@charset "utf-8";
/* GLAMDAY STYLE 熱海 ハブサイト
   規約: ~/.claude/sites/glamday-atami/DESIGN.md（実測 2026-08-20）
   - 和文 Noto Serif JP / 英字見出し EB Garamond
   - font-weight は 400 のみ（太字を使わない）
   - 影なし / 写真の角丸 0 / ボタンのみ radius 100px
   - 色は6色から増やさない */

:root {
  --ink: #000000;
  --brand: #72665E;      /* 英字見出し */
  --beige: rgba(209, 182, 142, .30);
  --terra: rgba(154, 67, 7, .15);
  --line: #DCD5CD;
}

html { background: #fff; }
body {
  background: #fff; color: var(--ink);
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", serif;
  font-weight: 400;
  font-size: 23px; line-height: 2.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; border-radius: 0; }
a { color: inherit; text-decoration: none; }
.en { font-family: "EB Garamond", serif; }

.wrap { width: 934px; max-width: calc(100% - 40px); margin-inline: auto; }
.wrap_wide { width: 1024px; max-width: calc(100% - 40px); margin-inline: auto; }
section { padding-block: 120px; }
.sec_head { text-align: center; margin-bottom: 60px; }
.sec_head h2 {
  font-family: "EB Garamond", serif; font-size: 43px; font-weight: 400;
  letter-spacing: 3px; line-height: 1.6; color: var(--brand);
}
.sec_head .ja { font-size: 21px; line-height: 1.6; margin-top: 8px; }
.lead { text-align: center; line-height: 2.6; }

/* ---------- ヒーロー ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; padding: 0; }
.hero_slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero_slide.is_on { opacity: 1; }
.hero_slide img { width: 100%; height: 100%; object-fit: cover; }
.hero_copy {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #fff;
  text-shadow: 0 0 24px rgba(0,0,0,.35);
}
.hero_copy .title { font-family: "EB Garamond", serif; font-size: 52px; letter-spacing: 6px; line-height: 1.4; }
.hero_copy .sub { font-size: 21px; letter-spacing: 3px; line-height: 2; margin-top: 18px; }
.hero_copy .count { font-size: 16px; letter-spacing: 2px; margin-top: 26px; }

/* ---------- 施設インデックス ---------- */
.index_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.fac_card { text-align: center; display: flex; flex-direction: column; }
.fac_card .btn { margin-top: auto; align-self: center; }
.fac_card_img { aspect-ratio: 1.6; overflow: hidden; }
.fac_card_img img { width: 100%; height: 100%; object-fit: cover; }
.fac_card_logo { height: 62px; margin: 26px auto 0; width: auto; object-fit: contain; }
.fac_cap { margin-top: 20px; line-height: 1.3; }
.fac_cap .num { font-family: "EB Garamond", serif; font-size: 40px; letter-spacing: 2px; }
.fac_cap .unit { font-size: 16px; letter-spacing: 2px; }
.fac_cap .max { display: block; font-size: 14px; letter-spacing: 1px; color: var(--brand); margin-top: 4px; }
.fac_note { font-size: 16px; line-height: 2; margin: 16px 0 24px; }
.scale {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 44px; font-size: 14px; letter-spacing: 2px; color: var(--brand);
}
.scale::before, .scale::after { content: ""; }
.scale span { white-space: nowrap; }
.scale i { flex: 1; height: 1px; background: var(--line); margin: 0 16px; }

/* ---------- 比較表 ---------- */
.cmp { background: var(--beige); }
.cmp table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.9; background: #fff; }
.cmp th, .cmp td { border: 1px solid var(--line); padding: 18px 14px; text-align: center; vertical-align: middle; }
.cmp thead th { font-size: 16px; letter-spacing: 1px; }
.cmp thead th .en { display: block; font-size: 18px; letter-spacing: 1px; color: var(--brand); }
.cmp tbody th { width: 140px; text-align: left; font-size: 15px; letter-spacing: 1px; color: var(--brand); }
.cmp_cards { display: none; }

/* ---------- 各施設の詳細 ---------- */
.detail + .detail { padding-top: 0; }
.detail_visual { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.detail_visual > div:first-child { aspect-ratio: 2.057; }
.detail_visual > div:last-child { display: grid; gap: 8px; }
.detail_visual div > img,
.detail_visual > div:first-child img { width: 100%; height: 100%; object-fit: cover; }
.detail_body { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 60px; }
.detail_body h3 { font-size: 21px; line-height: 1.8; }
.detail_body h3 .en { display: block; font-size: 32px; letter-spacing: 3px; color: var(--brand); line-height: 1.4; }
.detail_body p { font-size: 19px; line-height: 2.4; margin-top: 20px; }
.spec { font-size: 16px; line-height: 2.2; }
.spec dt { color: var(--brand); letter-spacing: 1px; }
.spec dd { margin: 0 0 14px; }
.btn {
  display: inline-block; border: 1px solid var(--ink); border-radius: 100px;
  padding: 14px 44px; font-size: 16px; letter-spacing: 2px; margin-top: 24px;
  transition: opacity .3s;
}
.btn:hover { opacity: .6; }

/* ---------- アクセス ---------- */
.access { background: var(--terra); }
.access_list { display: grid; gap: 0; font-size: 16px; line-height: 2; }
.access_row { display: grid; grid-template-columns: 260px 1fr 140px; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }
.access_row:first-child { border-top: 1px solid var(--line); }
.access_row .name { letter-spacing: 1px; }
.access_row .park { text-align: right; color: var(--brand); font-size: 15px; }

/* ---------- NEWS / フッター ---------- */
.news_item { border-bottom: 1px solid var(--line); padding: 26px 0; font-size: 16px; line-height: 2; }
.news_item time { display: block; color: var(--brand); letter-spacing: 1px; font-family: "EB Garamond", serif; font-size: 17px; }
.reserve { text-align: center; }
.reserve .tel { font-family: "EB Garamond", serif; font-size: 40px; letter-spacing: 2px; }
footer { padding: 80px 0 40px; border-top: 1px solid var(--line); font-size: 15px; line-height: 2; }
.other_brand { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-bottom: 60px; max-width: 720px; margin-inline: auto; }
.other_brand a { text-align: center; }
.other_brand img.pic { aspect-ratio: 1.6; object-fit: cover; width: 100%; }
.other_brand img.logo { height: 46px; width: auto; margin: 16px auto 0; object-fit: contain; }
.foot_bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; }
.foot_sns { display: flex; gap: 16px; align-items: center; }
.foot_sns img { width: 22px; }
.copy { font-size: 12px; letter-spacing: 1px; color: var(--brand); }

/* ---------- SP ---------- */
@media (max-width: 768px) {
  body { font-size: 14px; line-height: 2.4; }
  .wrap, .wrap_wide { width: 350px; max-width: calc(100% - 40px); }
  section { padding-block: 70px; }
  .sec_head { margin-bottom: 40px; }
  .sec_head h2 { font-size: 25px; letter-spacing: 1px; }
  .sec_head .ja { font-size: 12px; letter-spacing: 4px; }

  .hero_copy .title { font-size: 28px; letter-spacing: 3px; }
  .hero_copy .sub { font-size: 13px; letter-spacing: 2px; margin-top: 14px; }
  .hero_copy .count { font-size: 12px; margin-top: 18px; }

  .index_grid { grid-template-columns: 1fr; gap: 48px; }
  .fac_card_logo { height: 54px; }
  .fac_cap .num { font-size: 34px; }
  .fac_note { font-size: 13px; }
  .scale { display: none; }

  /* 表は使わず、1施設1カードに分解する */
  .cmp table { display: none; }
  .cmp_cards { display: grid; gap: 24px; }
  .cmp_card { background: #fff; border: 1px solid var(--line); padding: 22px 20px; }
  .cmp_card h3 { font-family: "EB Garamond", serif; font-size: 19px; letter-spacing: 1px; color: var(--brand); line-height: 1.5; }
  .cmp_card dl { display: grid; grid-template-columns: 76px 1fr; gap: 6px 12px; margin-top: 14px; font-size: 13px; line-height: 1.9; }
  .cmp_card dt { color: var(--brand); letter-spacing: 1px; }
  .cmp_card dd { margin: 0; }

  .detail_visual { grid-template-columns: 1fr; }
  .detail_visual > div:last-child { grid-template-columns: 1fr 1fr; }
  .detail_body { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .detail_body h3 .en { font-size: 22px; letter-spacing: 1px; }
  .detail_body p { font-size: 13px; line-height: 2.2; }
  .spec { font-size: 13px; }
  .btn { font-size: 13px; padding: 12px 32px; }

  .access_row { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; font-size: 13px; }
  .access_row .park { text-align: left; }

  .reserve .tel { font-size: 28px; }
  .other_brand { grid-template-columns: 1fr; gap: 32px; }
  .foot_bottom { flex-direction: column; align-items: flex-start; }
}

/* ================= 2026-08-20 追加分 ================= */

/* スクロールで現れる固定ヘッダー */
.site_header {
  position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%); transition: transform .4s ease;
}
.site_header.is_on { transform: translateY(0); }
.header_inner {
  width: 1024px; max-width: calc(100% - 40px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0;
}
.header_name { display: block; font-size: 16px; letter-spacing: .22em; text-indent: .22em; line-height: 1; white-space: nowrap; }
.header_nav { display: flex; align-items: center; gap: 28px; font-size: 14px; letter-spacing: 1px; }
.header_nav .btn { margin-top: 0; padding: 8px 26px; font-size: 13px; }

/* ヒーローの施設名（旧：支給ロゴ画像）。
   書体は Marcellus＝支給ロゴ（GLAMDAY STYLE のワードマーク）の字形に一番近い。
   ロゴの各文字と重ねて比べたときの一致度が Google Fonts の中で最良だった。
   施設名だけに使い、他の英字見出しは EB Garamond のまま。 */
.hero_name, .header_name { font-family: "Marcellus", "EB Garamond", serif; }
.hero_name { font-size: 40px; letter-spacing: .28em; text-indent: .28em; line-height: 1.14; font-weight: 400; }
.hero_copy .sub { margin-top: 26px; }

/* 施設インデックス：背景色と縦長写真 */
.villas { background: var(--beige); }
.fac_card_img { aspect-ratio: 4 / 5; }
.fac_card .btn { margin-top: 0; }
.fac_btns { margin-top: auto; padding-top: 8px; display: grid; gap: 10px; justify-items: center; }
.btn_rsv { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn_rsv:hover { opacity: .75; }
.btn_sub { background: transparent; }

/* 比較表：罫線を減らしてロゴを立てる */
.cmp { background: #fff; }
.cmp table { background: transparent; }
.cmp th, .cmp td { border: none; border-bottom: 1px solid var(--line); padding: 26px 16px; }
.cmp thead th { border-bottom: 1px solid var(--ink); padding-bottom: 22px; }
.cmp thead th img { height: 58px; width: auto; margin-inline: auto; object-fit: contain; }
.cmp tbody tr:nth-child(odd) td { background: rgba(209,182,142,.14); }
.cmp tbody th { background: transparent; font-size: 14px; }
.cmp td .sub { font-size: 13px; color: var(--brand); }
.cmp_card_logo { height: 46px; width: auto; margin: 0 auto 14px; object-fit: contain; }

/* お食事 */
.cuisine { background: var(--beige); }
.cuisine_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 40px; margin-top: 56px; }
.cuisine_item { text-align: center; }
.cuisine_img { aspect-ratio: 1.6; overflow: hidden; }
.cuisine_img img { width: 100%; height: 100%; object-fit: cover; }
.cuisine_logo { height: 52px; width: auto; margin: 22px auto 0; object-fit: contain; }
.cuisine_item p { font-size: 16px; line-height: 2.1; margin-top: 14px; text-align: left; }

@media (max-width: 768px) {
  .header_inner { padding: 10px 0; }
  /* SPはヘッダーの横幅が足りないので2行に折る（1行だと予約ボタンを画面外へ押し出す） */
  .header_name { font-size: 12px; letter-spacing: .16em; text-indent: .16em; white-space: normal; max-width: 8em; line-height: 1.3; text-align: center; }
  .header_nav { gap: 14px; font-size: 11px; letter-spacing: 0; }
  .header_nav a:not(.btn) { display: none; }
  .header_nav .btn { padding: 7px 18px; font-size: 12px; }
  .hero_name { font-size: 22px; letter-spacing: .22em; text-indent: .22em; }
  .cuisine_grid { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
  .cuisine_logo { height: 44px; }
  .cuisine_item p { font-size: 13px; }
  .cmp thead th img { height: 38px; }
  .cmp th, .cmp td { padding: 16px 8px; }
}

/* 海森風のロゴは行数が多い縦組みのため、他より一段大きく置いて文字サイズを揃える */
.fac_card_logo.logo_gv { height: 88px; }
.cmp thead th img.logo_gv { height: 84px; }
.cuisine_logo.logo_gv { height: 76px; }
.cmp_card_logo.logo_gv { height: 66px; }
@media (max-width: 768px) {
  .fac_card_logo.logo_gv { height: 76px; }
  .cmp thead th img.logo_gv { height: 56px; }
  .cuisine_logo.logo_gv { height: 64px; }
}

/* 施設名は「GLAMDAY ATAMI」。ロゴ画像を使わず EB Garamond の字組みで見せる。
   SPの寸法は規約の下限（h2=25px / 小さい文字は12px）を割らないこと。 */
.hero_name { font-size: 54px; }          /* 2行に折ったぶん大きくできる */
.header_name { font-size: 16px; }
@media (max-width: 768px) {
  .hero_name { font-size: 32px; }        /* セクション見出し h2(25px) より小さくしない */
  .header_name { font-size: 12px; }      /* SPの文字はここが下限 */
}
@media (max-width: 360px) {
  .hero_name { font-size: 29px; letter-spacing: .18em; text-indent: .18em; }
  /* 320px幅だとヘッダー中央に53pxしか残らないので、文字を縮めずに左右のアキを詰める */
  .header_inner { gap: 11px; max-width: calc(100% - 28px); }
}

/* ヒーローの可読性確保（写真が明るいスライドでも文字が沈まないように） */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.10) 35%, rgba(0,0,0,.34) 100%);
}
.hero_copy { z-index: 2; }
.hero_copy .sub, .hero_copy .count { text-shadow: 0 1px 16px rgba(0,0,0,.6); }
.hero_name { text-shadow: 0 2px 16px rgba(0,0,0,.55); }

/* カードは「詳しく見る」1本。予約と公式サイトは詳細側に置く */
.fac_card .btn { margin-top: auto; align-self: center; }
.detail_btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.detail_btns .btn { margin-top: 0; }

/* 予約セクション */
.rsv_grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 32px 0 56px; }
.rsv_grid .btn { margin-top: 0; min-width: 190px; }
.rsv_tel_lead { font-size: 16px; letter-spacing: 1px; color: var(--brand); }
.reserve .tel { margin-top: 6px; }

/* アンカー移動時にヘッダーで隠れないように */
[id] { scroll-margin-top: 90px; }

@media (max-width: 768px) {
  .detail_btns { gap: 10px; }
  .rsv_grid { gap: 10px; margin: 24px 0 40px; }
  .rsv_grid .btn { min-width: 46%; padding: 12px 10px; }
  .rsv_tel_lead { font-size: 12px; }
  [id] { scroll-margin-top: 64px; }
}

/* OUR VILLAS はインデックスとして詰める */
.villas { padding-block: 90px; }
.villas .sec_head { margin-bottom: 44px; }
.index_grid { gap: 28px; }
.fac_card_logo { height: 54px; margin-top: 20px; }
.fac_card_logo.logo_gv { height: 76px; }
.fac_cap { margin-top: 14px; }
.fac_cap .num { font-size: 36px; }
.fac_cap .max { margin-top: 2px; }
.fac_card .btn { margin-top: 20px; padding: 11px 32px; font-size: 14px; }
@media (max-width: 768px) {
  .villas { padding-block: 60px; }
  .index_grid { gap: 36px; }
  .fac_card_logo { height: 46px; }
  .fac_card_logo.logo_gv { height: 64px; }
  .fac_cap .num { font-size: 30px; }
}

/* 各邸の大画像をフェードスライドに */
.detail_main { position: relative; aspect-ratio: 2.057; overflow: hidden; }
.detail_main img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease;
}
.detail_main img.is_on { opacity: 1; }
.detail_side { display: grid; gap: 8px; }
.detail_side img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .detail_side { grid-template-columns: 1fr 1fr; }
}

/* 右側サムネの高さを主画像に合わせる */
.detail_visual { align-items: stretch; }
.detail_side { height: 100%; min-height: 0; grid-template-rows: 1fr 1fr; }
.detail_side img { min-height: 0; }

/* ---------- カード：画像の上に人数チップとロゴを載せる ---------- */
.fac_card_img { position: relative; }
.fac_card_img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}
.fac_overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 18px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.chip {
  border: 1px solid rgba(255,255,255,.9); color: #fff;
  font-size: 13px; letter-spacing: 1px; line-height: 1; padding: 7px 12px;
}
.fac_overlay_logo { height: 44px; width: auto; object-fit: contain; }
.fac_overlay_logo.logo_gv { height: 62px; }
.fac_sub { font-size: 13px; letter-spacing: 1px; color: var(--brand); margin-top: 14px; line-height: 1.6; }
.fac_card .btn { margin-top: 16px; }

@media (max-width: 768px) {
  .fac_overlay { padding: 0 16px 16px; gap: 10px; }
  .chip { font-size: 12px; padding: 6px 10px; }
  .fac_overlay_logo { height: 38px; }
  .fac_overlay_logo.logo_gv { height: 54px; }
  .fac_sub { font-size: 12px; }
}

/* オーバーレイのロゴは内容幅に縮める（flex子要素が横いっぱいに伸びるのを防ぐ） */
.fac_overlay_logo { flex: 0 0 auto; align-self: flex-start; width: auto; max-width: 78%; object-fit: contain; }
.fac_card_img::after { background: linear-gradient(to bottom, rgba(0,0,0,0) 38%, rgba(0,0,0,.62) 100%); }

/* ロックアップごとに幅で指定する（高さ指定だとflex内で横に伸びるため） */
.fac_overlay_logo { height: auto; max-width: none; }
.fac_overlay_logo[src*="w_gv"] { width: 92px; }
.fac_overlay_logo[src*="w_gp"] { width: 134px; }
.fac_overlay_logo[src*="w_gk"],
.fac_overlay_logo[src*="w_gh"] { width: 74px; }
@media (max-width: 768px) {
  .fac_overlay_logo[src*="w_gv"] { width: 80px; }
  .fac_overlay_logo[src*="w_gp"] { width: 118px; }
  .fac_overlay_logo[src*="w_gk"],
  .fac_overlay_logo[src*="w_gh"] { width: 64px; }
}

/* ---------- スクロールで浮かび上がる（AOS fade-up 相当） ---------- */
[data-fade] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-fade].is_in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 1; transform: none; transition: none; }
}

/* ---------- 導入セクション：パララックス ---------- */
.intro { position: relative; overflow: hidden; padding-block: 150px; color: #fff; }
.intro .parallax { position: absolute; inset: -14% 0; z-index: 0; will-change: transform; }
.intro .parallax img { width: 100%; height: 100%; object-fit: cover; }
.intro::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(30,26,22,.46), rgba(30,26,22,.30) 45%, rgba(30,26,22,.52));
}
.intro_body { position: relative; z-index: 2; }
.intro .sec_head h2 { color: #fff; }
.intro .sec_head .ja, .intro .lead { color: #fff; }
.intro .lead { text-shadow: 0 1px 14px rgba(0,0,0,.45); }

/* ---------- 予約ボタンを軽く ---------- */
.btn_rsv {
  background: rgba(114,102,94,.10); color: var(--ink);
  border: 1px solid rgba(114,102,94,.38); letter-spacing: 1.5px;
}
.btn_rsv:hover { background: rgba(114,102,94,.18); opacity: 1; }
.btn_rsv .sep { color: var(--brand); margin: 0 2px; }
.site_header .btn_rsv { background: rgba(114,102,94,.08); }

/* ---------- 和文ゴシック版（?font=gothic で切替） ---------- */
.font-gothic body,
.font-gothic .bullet, .font-gothic .lead, .font-gothic .fac_sub,
.font-gothic .spec, .font-gothic .cmp, .font-gothic .news_item,
.font-gothic .cuisine_item p, .font-gothic .sec_head .ja,
.font-gothic .detail_body h3, .font-gothic .chip, .font-gothic .header_nav {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: .04em;
}
.font-gothic body { line-height: 2.2; }
.font-gothic .lead { line-height: 2.3; }
.font-gothic .detail_body p { line-height: 2.1; }
/* 欧文見出しと数字は EB Garamond のまま残す */
.font-gothic .en, .font-gothic .sec_head h2, .font-gothic .fac_cap .num,
.font-gothic .reserve .tel, .font-gothic .news_item time { font-family: "EB Garamond", serif; letter-spacing: normal; }
.font-gothic .sec_head h2 { letter-spacing: 3px; }

@media (max-width: 768px) {
  .intro { padding-block: 90px; }
  .intro .parallax { inset: -10% 0; }
}

/* ================= 2026-08-21 ================= */

/* ---------- ヒーロー：ズームアウトとズームインを交互に ---------- */
/* 表示時間6秒＋フェード1.6秒より少し長くして、動きが途中で止まらないようにする */
.hero_slide img { transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
@keyframes kb_zoom_out { from { transform: scale(1.10); } to { transform: scale(1); } }
@keyframes kb_zoom_in  { from { transform: scale(1); } to { transform: scale(1.10); } }
.hero_slide.kb_out img { animation: kb_zoom_out 8s linear both; }
.hero_slide.kb_in  img { animation: kb_zoom_in  8s linear both; }
@media (prefers-reduced-motion: reduce) {
  .hero_slide img { animation: none !important; transform: none; }
}

/* ---------- 海森風のオーバーレイロゴが下で切れていた ---------- */
/* 高さ指定＋object-fit:cover で5行目の「海森風」が欠けるため、幅指定＋高さautoに戻す */
.fac_overlay_logo,
.fac_overlay_logo.logo_gv { height: auto; object-fit: contain; }
.fac_overlay_logo[src*="w_gv"] { width: 104px; }
@media (max-width: 768px) {
  .fac_overlay_logo.logo_gv { height: auto; }
  .fac_overlay_logo[src*="w_gv"] { width: 88px; }
}

/* ---------- ボタンを細く、線を軽く ---------- */
.btn {
  border: 1px solid rgba(114,102,94,.42);
  color: var(--brand);
  padding: 9px 30px; font-size: 14px; letter-spacing: 2.5px; line-height: 1.9;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; opacity: 1; }
.btn_rsv {
  background: rgba(114,102,94,.09); color: var(--ink);
  border: 1px solid rgba(114,102,94,.42); letter-spacing: 2px;
}
.btn_rsv:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn_rsv .sep { color: var(--brand); }
.btn_rsv:hover .sep { color: rgba(255,255,255,.7); }
.fac_card .btn { padding: 8px 26px; font-size: 13px; letter-spacing: 2px; }
.site_header .btn_rsv { padding: 7px 22px; font-size: 13px; }
.rsv_grid .btn { padding: 11px 26px; }
@media (max-width: 768px) {
  .btn { padding: 9px 24px; font-size: 12.5px; letter-spacing: 1.5px; }
  .fac_card .btn { padding: 8px 22px; font-size: 12px; }
  .rsv_grid .btn { padding: 10px 10px; }
}

/* ---------- 人数チップは写真の右下に固定 ---------- */
/* ロゴの行数で高さが変わり、邸ごとにチップの位置がずれていたため */
.fac_overlay { display: block; padding: 0 16px 16px; }
.fac_overlay .chip {
  position: absolute; right: 16px; bottom: 16px; margin: 0;
  font-size: 12px; letter-spacing: .5px; padding: 6px 10px; white-space: nowrap;
}
/* ロゴが1段上がったぶん、暗幕も上まで伸ばす（白ロゴが明るい写真に埋もれるため） */
.fac_card_img::after {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 26%, rgba(0,0,0,.20) 48%, rgba(0,0,0,.46) 70%, rgba(0,0,0,.72) 100%);
}
/* ロゴはチップの1段上に置く。こうすると4邸ともチップもロゴも同じ位置に揃う */
/* .fac_card_img img の height:100%/cover と同じ詳細度で当てないと、絶対配置後に潰れる */
.fac_overlay .fac_overlay_logo { height: auto; object-fit: contain; }
.fac_overlay_logo { position: absolute; left: 16px; bottom: 54px; }
.fac_overlay_logo[src*="w_gp"] { width: 120px; }
@media (max-width: 768px) {
  .fac_overlay { padding: 0 14px 14px; }
  .fac_overlay .chip { right: 14px; bottom: 14px; font-size: 11px; padding: 5px 9px; }
  .fac_overlay_logo { left: 14px; bottom: 46px; }
  .fac_overlay_logo[src*="w_gp"] { width: 112px; }
}

/* ---------- 各邸の写真：右に次の写真がのぞくスライダー ---------- */
/* 旧レイアウト（grid 2fr/1fr・first-child に aspect-ratio）の指定を打ち消してから組み直す */
.detail_visual { display: block; }
/* 旧ルールが div:first-child / div:last-child（詳細度 0,2,1）なので、
   同じ詳細度の div.peek で後から上書きする。:last-child は使わない（操作パネルまで拾うため） */
.detail_visual > div.peek {
  display: block; width: 100%; aspect-ratio: auto; gap: 0; grid-template-columns: none;
}
.peek { overflow: hidden; }
.peek_track {
  display: flex; column-gap: 8px; cursor: pointer;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1); will-change: transform;
}
.peek_item { flex: 0 0 86%; aspect-ratio: 2.057; overflow: hidden; }
.peek_item img { width: 100%; height: 100%; object-fit: cover; }
/* 操作パネルは主写真の右下に。主写真の右端は container の 86% の位置 */
.detail_visual { position: relative; }
/* 旧 .detail_visual > div:last-child（0,2,1）と同じ詳細度で当て直す */
.detail_visual > div.peek_ui {
  position: absolute; right: calc(14% + 18px); bottom: 18px; z-index: 2;
  display: flex; align-items: center; gap: 10px; width: auto; aspect-ratio: auto;
}
.peek_count {
  font-family: "EB Garamond", serif; font-size: 15px; letter-spacing: 2px; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.55); margin-right: 4px;
}
.peek_count em { font-style: normal; }
/* 矢印は文字（‹ ›）だとフォントのメトリクスで上下に寄るので、CSSで描いて中央に置く */
.peek_btn {
  position: relative; width: 34px; height: 34px; border-radius: 100px; cursor: pointer;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.75); color: #fff;
  font-size: 0; line-height: 0; padding: 0;
  transition: background-color .3s ease, color .3s ease;
}
.peek_btn::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; box-sizing: border-box;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translate(-62%, -50%) rotate(45deg);
}
.peek_btn[data-prev]::before { transform: translate(-38%, -50%) rotate(-135deg); }

/* ヒーローの予約ボタン。ヘッダーはスクロール後にしか出ないので、MVにも1つ置く */
.hero_copy .btn_hero {
  margin-top: 36px; padding: 12px 42px; font-size: 14px; letter-spacing: 2.5px;
  color: #fff; border: 1px solid rgba(255,255,255,.8); background: rgba(0,0,0,.14);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.hero_copy .btn_hero:hover {
  background: #fff; color: var(--brand); border-color: #fff; text-shadow: none; opacity: 1;
}
.hero_copy .btn_hero .sep { color: rgba(255,255,255,.65); margin: 0 2px; }
.hero_copy .btn_hero:hover .sep { color: var(--brand); }
@media (max-width: 768px) {
  .hero_copy .btn_hero { margin-top: 26px; padding: 10px 30px; font-size: 12.5px; letter-spacing: 2px; }
}

/* フッター「その他の運営施設」のロゴ。4行組のロックアップなので46pxでは文字が読めない */
.other_brand img.logo { height: 92px; margin-top: 20px; }
@media (max-width: 768px) {
  .other_brand img.logo { height: 76px; margin-top: 16px; }
}
.peek_btn:hover { background: #fff; color: var(--brand); }

/* ヘッダーのナビを英字セクション名に */
.header_nav a.en { font-size: 15px; letter-spacing: 2.5px; color: var(--brand); transition: color .3s; }
.header_nav a.en:hover { color: var(--ink); }

/* OUR VILLAS だけマウスオーバーで4邸を出す（写真つきのパネル） */
/* 親はヘッダーの高さいっぱい。パネルはヘッダー幅に合わせるので position は静的のまま */
.header_inner { position: relative; }
.nav_has_menu { display: flex; align-items: center; align-self: stretch; }
.nav_menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  padding: 30px 44px 34px; background: #fff;
  border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.nav_has_menu:hover .nav_menu,
.nav_has_menu:focus-within .nav_menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav_menu a { display: block; text-align: center; }
.nav_menu .thumb { display: block; aspect-ratio: 1.5; overflow: hidden; }
.nav_menu .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.nav_menu a:hover .thumb img { transform: scale(1.05); }
.nav_menu .en {
  display: block; margin-top: 14px; font-size: 12px; letter-spacing: 2.5px;
  line-height: 1.4; color: var(--brand);
}
.nav_menu .ja { display: block; margin-top: 5px; font-size: 14px; letter-spacing: 1.5px; line-height: 1.6; }
.nav_menu .num { display: block; margin-top: 7px; font-size: 11px; letter-spacing: 1.5px; color: var(--brand); }
.nav_menu a:hover .ja { color: var(--brand); }

@media (max-width: 768px) {
  .header_nav a.en { font-size: 12px; letter-spacing: 1px; }
  .nav_has_menu { display: none; }
}

/* 比較表・SPカードの折り返し。「バーベキューSTYLE」「手巻き寿司・鍋」が
   語の途中で切れていたので、区切りの ／ 以外では折り返さないようにする */
.cmp td, .cmp_card dd { word-break: keep-all; overflow-wrap: normal; }
.cmp td .nw, .cmp_card dd .nw, .vc_note .nw { white-space: nowrap; }

@media (max-width: 768px) {
  .peek_track { column-gap: 6px; }
  .peek_item { flex: 0 0 88%; aspect-ratio: 1.5; }
  .detail_visual > div.peek_ui { right: calc(12% + 12px); bottom: 12px; gap: 8px; }
  .peek_count { font-size: 13px; letter-spacing: 1px; margin-right: 2px; }
  .peek_btn { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .peek_track { transition: none; }
}

/* ---------- お食事：コース別タブ（style-b 版を移植 2026-08-24） ---------- */
/* 元は style-b/style-b.css の .mtab / .mpanel。
   このサイトの規約に合わせて Cormorant → EB Garamond、
   ゴシックの補助見出し → 明朝、font-weight 500 → 400 に直してある */
.cuisine .lead { margin-bottom: 56px; }

.mtab {
  list-style: none; margin: 0 0 56px; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.mtab li { flex: 1 1 0; min-width: 0; display: flex; }
.mtab_btn {
  width: 100%; background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  padding: 0 10px 18px; cursor: pointer;
  font-family: inherit; font-weight: 400; color: var(--brand);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: color .3s, border-color .3s;
}
.mtab_btn .en { font-size: 21px; line-height: 1.2; letter-spacing: 1px; }
.mtab_btn em { font-style: normal; font-size: 12px; line-height: 1.5; letter-spacing: 1.5px; }
.mtab_btn:hover { color: var(--ink); }
.mtab_btn.is_on { color: var(--ink); border-bottom-color: var(--ink); }

/* タブごとにパネルの高さが変わると、写真の位置と見え方が動く。
   4枚を同じグリッドセルに重ねて置き、いちばん高いパネルに合わせて器の高さを固定する。
   切り替えは display ではなく opacity なのでクロスフェードになる */
/* 器の高さは JS が表示中のパネルに合わせる（下に余白が余らないように）。
   JSが動かなくても、いちばん高いパネル分の高さで上揃えになるだけで崩れない */
/* height に transition を付けると、[data-fade] 側の transition と噛み合って
   高さが更新されないことがあったので付けない。切り替えの見た目は下のクロスフェードで足りる */
.mpanels { display: grid; }
.mpanel {
  grid-area: 1 / 1; align-self: start;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
.mpanel.is_on { opacity: 1; visibility: visible; pointer-events: auto; }
.mpanel_pic { aspect-ratio: 1.5; overflow: hidden; }
.mpanel_pic img { width: 100%; height: 100%; object-fit: cover; }
.mpanel_txt h3 { font-size: 30px; line-height: 1.2; letter-spacing: 1px; }
.mpanel_txt h3 em {
  display: block; font-style: normal; font-size: 15px; line-height: 1.8;
  letter-spacing: 2px; margin-top: 10px; color: var(--brand);
  font-family: "Noto Serif JP", 游明朝, "Yu Mincho", serif;
}
.mpanel_lead { margin: 22px 0 0; font-size: 15px; line-height: 2.1; }
.mpanel_dl {
  display: grid; grid-template-columns: 84px 1fr; gap: 8px 16px;
  margin: 24px 0 0; font-size: 13.5px; line-height: 1.9;
}
.mpanel_dl dt { color: var(--brand); letter-spacing: 1.5px; }
.mpanel_dl dd { margin: 0; }
.mpanel_villas { margin: 28px 0 10px; font-size: 12px; letter-spacing: 2px; color: var(--brand); }
.mpanel_tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cui_tag {
  display: inline-block; border: 1px solid rgba(114,102,94,.45);
  padding: 8px 18px; font-size: 13px; letter-spacing: 1.5px; line-height: 1;
}

/* 選べるお鍋（横スクロール） */
.nabe { margin-top: 26px; }
.nabe_ttl { margin: 0 0 12px; font-size: 12px; letter-spacing: 2px; color: var(--brand); line-height: 1.6; }
.nabe_row {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #C9C0B4 transparent;
}
.nabe_row::-webkit-scrollbar { height: 4px; }
.nabe_row::-webkit-scrollbar-thumb { background: #C9C0B4; }
.nabe_row figure { margin: 0; flex: 0 0 148px; scroll-snap-align: start; }
.nabe_row img { width: 100%; aspect-ratio: 1.4; object-fit: cover; }
.nabe_row figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.65; letter-spacing: .5px; }
.nabe_row figcaption span { color: var(--brand); font-size: 10.5px; }

@media (max-width: 768px) {
  .cuisine .lead { margin-bottom: 32px; }
  .mtab { margin-bottom: 34px; }
  .mtab li { flex: 1 1 50%; }
  .mtab_btn { padding: 0 4px 12px; }
  .mtab_btn .en { font-size: 15px; }
  .mtab_btn em { font-size: 10.5px; letter-spacing: .5px; }
  .mpanel { grid-template-columns: 1fr; gap: 26px; }
  .mpanel_txt h3 { font-size: 22px; }
  .mpanel_txt h3 em { font-size: 13px; }
  .mpanel_lead { font-size: 13.5px; }
  .mpanel_dl { grid-template-columns: 68px 1fr; font-size: 12.5px; }
  .cui_tag { font-size: 11.5px; padding: 7px 14px; }
  .nabe_row figure { flex: 0 0 132px; }
  .nabe_row figcaption { font-size: 11px; }
}

/* ---------- 空き状況チェック（RESERVATION内フォーム＋モーダル） ---------- */
.vc { margin-top: 4px; margin-bottom: 48px; }
.vc_lead { font-size: 15px; letter-spacing: 1px; color: var(--brand); }
.vc_form {
  display: flex; justify-content: center; align-items: flex-end;
  flex-wrap: wrap; gap: 14px 20px; margin-top: 20px;
}
.vc_field { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.vc_label { font-family: "EB Garamond", serif; font-size: 13px; letter-spacing: 2px; color: var(--brand); }
.vc_form input[type="date"], .vc_form select {
  font-family: inherit; font-size: 15px; letter-spacing: 1px; color: var(--ink);
  background: #fff; border: 1px solid rgba(114,102,94,.42); border-radius: 0;
  padding: 0 14px; height: 52px; min-width: 168px; box-sizing: border-box;
}
.vc_form select { min-width: 110px; }
.vc_btn { margin-top: 0; height: 52px; padding: 0 36px; box-sizing: border-box; }

/* モーダル */
.vc_modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vc_modal[hidden] { display: none; }
.vc_modal_bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.vc_modal_panel {
  position: relative; background: #fff; border: 1px solid var(--line);
  width: 560px; max-width: 100%; max-height: calc(100vh - 40px); overflow: auto;
  padding: 44px 44px 36px; text-align: center;
}
.vc_modal_en { font-family: "EB Garamond", serif; font-size: 22px; letter-spacing: 3px; color: var(--brand); line-height: 1.4; }
.vc_modal_ja { font-size: 13px; letter-spacing: 2px; margin-top: 4px; }
.vc_modal_date { font-size: 15px; letter-spacing: 1px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.vc_list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.vc_list a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid rgba(114,102,94,.42); border-radius: 100px;
  padding: 13px 30px; font-size: 15px; letter-spacing: 1px;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.vc_list a .cap { font-size: 12.5px; letter-spacing: .5px; color: var(--brand); white-space: nowrap; }
.vc_list a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.vc_list a:hover .cap { color: rgba(255,255,255,.7); }
/* ブラウザ標準の青いフォーカスリングを消し、ブランド色の枠に置き換える */
.vc_list a:focus, .vc_close:focus, .vc_btn:focus, .vc_cal_link:focus, .vcal_arrow:focus, .vcal_table td a:focus {
  outline: none; border-color: var(--brand);
}
.vc_list a:focus-visible, .vc_close:focus-visible, .vc_btn:focus-visible, .vc_cal_link:focus-visible, .vcal_arrow:focus-visible, .vcal_table td a:focus-visible {
  outline: 1px solid var(--brand); outline-offset: 3px;
}
.vc_note { font-size: 12.5px; letter-spacing: .5px; line-height: 2; color: var(--brand); margin-top: 18px; }
.vc_close { margin-top: 20px; padding: 8px 34px; }

@media (max-width: 768px) {
  .vc_lead { font-size: 12px; }
  .vc_form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
  .vc_field { width: 100%; }
  .vc_form input[type="date"], .vc_form select { width: 100%; min-width: 0; font-size: 14px; height: 48px; }
  .vc_field:nth-of-type(3) { grid-column: 1 / -1; }
  .vc_btn { grid-column: 1 / -1; justify-self: center; min-width: 66%; height: 48px; }
  .vc { margin-bottom: 36px; }
  .vc_modal { padding: 14px; }
  .vc_modal_panel { padding: 32px 22px 28px; }
  .vc_modal_date { font-size: 13px; }
  .vc_list a { padding: 12px 16px; font-size: 12.5px; letter-spacing: .5px; }
  .vc_list a .nm { white-space: nowrap; }
  .vc_list a .cap { font-size: 10.5px; }
  .vc_note { font-size: 12px; letter-spacing: 1px; }
}

/* ---------- 熱海エリアMAP（ATAMI ⇄ OUR VILLAS をまたぐ） ---------- */
/* --amap-up = OUR VILLAS の上端より上（＝写真側）にせり出す量。
   .villas の padding-top を 0 にしてあるので、ここがそのまま写真とベージュの境目になる。
   同じ図形を2枚重ね、その境目で clip-path を切り替えて線の色を白⇄ブランド色に変えている */
.villas { padding-top: 0; }
/* .amap の負マージンが .wrap_wide ごと引き上げられて OUR VILLAS まで動くのを防ぐ
   （親子のマージン相殺。flow-root で BFC をつくって .amap だけに効かせる） */
.villas > .wrap_wide { display: flow-root; }
.amap { --amap-up: 210px; position: relative; z-index: 2; margin-top: calc(var(--amap-up) * -1); margin-bottom: 76px; }
.amap_def { position: absolute; width: 0; height: 0; overflow: hidden; }
.amap_stage { position: relative; width: 700px; max-width: 100%; margin-inline: auto; }
.amap_layer { position: relative; }
.amap_layer + .amap_layer { position: absolute; inset: 0; }
.amap_layer svg { display: block; width: 100%; height: auto; aspect-ratio: 1310 / 880; }
.amap_light { color: #fff; clip-path: inset(0 0 calc(100% - var(--amap-up)) 0); }
.amap_dark  { color: var(--brand); clip-path: inset(var(--amap-up) 0 0 0); }
.amap_coast { stroke-width: 3; }
.amap_rail  { stroke-width: 2; }
.amap_en { font-family: "EB Garamond", serif; font-size: 27px; letter-spacing: 2px; }
.amap_jp { font-family: "Noto Serif JP", 游明朝, "Yu Mincho", serif; font-size: 26px; letter-spacing: 2px; }
.amap_sta { font-size: 30px; }
.amap_sea { font-family: "Noto Serif JP", 游明朝, "Yu Mincho", serif; font-size: 26px; letter-spacing: 8px; fill: currentColor; opacity: .45; }
/* ATAMI の下に地図を置く余白をつくる */
.intro { padding-bottom: 250px; }
@media (max-width: 768px) {
  .intro { padding-bottom: 150px; }
  .amap { --amap-up: 105px; margin-bottom: 40px; }
  .amap_coast { stroke-width: 6; }
  .amap_rail  { stroke-width: 4; }
  .amap_pins circle.pin { r: 16; }
  .amap_pins circle.ring { r: 34; stroke-width: 3.4; }
  .amap_en { font-size: 48px; letter-spacing: 1px; }
  .amap_jp { font-size: 46px; }
  .amap_sta { font-size: 50px; }
  .amap_sea { font-size: 44px; letter-spacing: 6px; }
}

/* ---------- 比較表のリンク（間取り／食事） ---------- */
.cmp td .plan_link, .cmp td .meal_link,
.cmp_card .plan_link, .cmp_card .meal_link {
  color: inherit; border-bottom: 1px solid rgba(114,102,94,.42);
  padding-bottom: 2px; transition: color .25s ease, border-color .25s ease;
}
.cmp td .plan_link:hover, .cmp td .meal_link:hover,
.cmp_card .plan_link:hover, .cmp_card .meal_link:hover {
  color: var(--brand); border-color: var(--brand);
}
.cmp td .plan_link { display: inline-block; }

/* ---------- 間取り図モーダル ---------- */
body.is_locked { overflow: hidden; }
.plan_md { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.plan_md[hidden] { display: none; }
.plan_md_bg { position: absolute; inset: 0; background: rgba(30,26,22,.62); }
.plan_md_box {
  position: relative; z-index: 1; background: #fff; width: 1080px; max-width: 100%;
  max-height: 100%; overflow-y: auto; padding: 46px 44px 44px; text-align: center;
}
.plan_md_close {
  position: absolute; top: 18px; right: 20px; background: none; border: 0; border-radius: 0;
  padding: 8px 4px; cursor: pointer; color: var(--brand); font-family: inherit;
  letter-spacing: 2px; font-size: 13px; line-height: 1; transition: opacity .25s ease;
}
.plan_md_close:hover { opacity: .6; }
.plan_md_ttl { font-size: 15px; line-height: 1.5; letter-spacing: 2px; }
.plan_md_ttl .en { display: block; font-family: "EB Garamond", serif; font-size: 30px; letter-spacing: 2px; color: var(--brand); }
.plan_md_ttl em { display: block; font-style: normal; margin-top: 6px; font-size: 17px; letter-spacing: 3px; }
.plan_md_sub { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--brand); letter-spacing: 1px; }
.plan_md_imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.plan_md_imgs.is_single { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
/* エリアMAPは横長なので、間取り図の 720px 制限を外して幅いっぱいに使う */
.plan_md_imgs.is_map { max-width: none; }
.plan_md_imgs .am_svg { width: 100%; height: auto; }
.am_scroll_hint { display: none; }
.plan_md_imgs figure { margin: 0; }
.plan_md_imgs img { width: 100%; height: auto; }
.plan_md_imgs figcaption { margin-top: 10px; font-family: "EB Garamond", serif; font-size: 17px; letter-spacing: 3px; color: var(--brand); }
@media (max-width: 768px) {
  .plan_md { padding: 16px; }
  .plan_md_box { padding: 40px 16px 28px; }
  .plan_md_ttl .en { font-size: 22px; }
  .plan_md_ttl em { font-size: 14px; }
  .plan_md_sub { font-size: 12.5px; }
  .plan_md_imgs { grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
  /* SPは MAP 全体が1画面で見えるように画面幅へ収める（横スクロールはやめた・2026-08-27）。
     そのぶん字が小さくなるので、モーダルの中だけ文字を大きくして、
     枠つきの「熱海駅」は枠を外して他のラベルと同じ白フチ文字にする。 */
  .plan_md_imgs.is_map figure { overflow-x: visible; }
  .plan_md_imgs.is_map .am_svg { width: 100%; max-width: 100%; }
  .plan_md_imgs.is_map .am_en { font-size: 40px; letter-spacing: 0; }
  .plan_md_imgs.is_map .am_ja { font-size: 36px; }
  .plan_md_imgs.is_map .am_box { display: none; }
  .plan_md_imgs.is_map .am_boxja { font-size: 38px; stroke: #fff; }
  .plan_md_imgs.is_map .am_note { font-size: 26px; }
  .plan_md_imgs.is_map .am_sea { font-size: 36px; letter-spacing: 8px; }
  .plan_md_imgs.is_map .am_fwja { font-size: 32px; }
  .plan_md_imgs.is_map .am_fwnote,
  .plan_md_imgs.is_map .am_fwlink { font-size: 22px; }
  .plan_md_imgs.is_map .am_n { font-size: 34px; }
  .plan_md_imgs.is_map .am_svg text { stroke-width: 7; }
  .am_scroll_hint { display: none; }
}

/* ---------- ATAMI の導入文を少し小さく（2026-08-24 ユーザー指示） ---------- */
.intro .lead { font-size: 18.5px; line-height: 2.5; letter-spacing: .5px; }
@media (max-width: 768px) {
  .intro .lead { font-size: 13.5px; line-height: 2.3; letter-spacing: 0; }
}

/* ---------- ヘッダーのドロップダウン：各邸のメイン写真を出す ---------- */

/* ---------- 住所を Googleマップへ ---------- */
/* 下線は住所の部分だけ。注記まで下線が回ると、折り返したときに二重線に見える */
.map_link { transition: color .25s ease; }
.map_link .addr { border-bottom: 1px solid rgba(114,102,94,.35); padding-bottom: 2px; transition: border-color .25s ease; }
.map_link:hover { color: var(--brand); }
.map_link:hover .addr { border-color: var(--brand); }
.map_link .ext { display: inline-block; margin-left: .4em; font-size: .82em; color: var(--brand); }
/* 「↗」だけでは外部に飛ぶことが伝わらないので、行き先を小さく添える */
.map_link .gmap_note { display: inline-block; margin-left: .6em; font-size: 13px; letter-spacing: 1px; color: var(--brand); }
@media (max-width: 768px) {
  .map_link .gmap_note { font-size: 12px; letter-spacing: .5px; }
}
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- 空き状況カレンダー ---------- */
.vc_cal_link {
  display: inline-block; margin-top: 18px; background: none; border: none;
  font-family: inherit; font-size: 13.5px; letter-spacing: 1.5px; color: var(--brand);
  cursor: pointer; padding: 2px 2px 4px; border-bottom: 1px solid rgba(114,102,94,.42);
  transition: opacity .3s;
}
.vc_cal_link:hover { opacity: .6; }
.vc_full { font-size: 13.5px; letter-spacing: 1px; color: var(--brand); margin-top: 16px; line-height: 2; }

.vcal_panel { width: min(1280px, 94vw); }
.vc_modal_panel.vcal_panel { padding-inline: 28px; }
.vcal_nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; }
.vcal_month { font-family: "EB Garamond", serif; font-size: 19px; letter-spacing: 2px; }
.vcal_arrow {
  background: none; border: 1px solid rgba(114,102,94,.42); border-radius: 100px;
  width: 34px; height: 34px; font-family: inherit; font-size: 16px; line-height: 1;
  color: var(--brand); cursor: pointer; transition: background-color .35s ease, color .35s ease;
}
.vcal_arrow:hover:not(:disabled) { background: var(--brand); color: #fff; }
.vcal_arrow:disabled { opacity: .25; cursor: default; }
.vcal_scroll { overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); }
.vcal_table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; line-height: 1.4; }
.vcal_table th, .vcal_table td { border: 1px solid var(--line); text-align: center; padding: 0; vertical-align: middle; }
.vcal_table thead th { padding: 7px 0 6px; min-width: 34px; font-weight: 400; }
.vcal_table thead th .d { display: block; font-family: "EB Garamond", serif; font-size: 13.5px; }
.vcal_table thead th .w { display: block; font-size: 10px; letter-spacing: 0; color: var(--brand); }
.vcal_table thead th.vcal_we .d { color: var(--brand); }
.vcal_table th.vcal_name {
  position: sticky; left: 0; background: #fff; z-index: 1;
  box-shadow: 1px 0 0 var(--line);
  min-width: 108px; padding: 10px 12px; font-weight: 400; font-size: 12.5px;
  letter-spacing: 1px; text-align: left; white-space: nowrap;
}
.vcal_table td { height: 40px; min-width: 34px; }
.vcal_table td a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--brand); font-size: 14px;
  transition: background-color .3s ease, color .3s ease;
}
.vcal_table td a:hover { background: var(--brand); color: #fff; }
.vcal_no { color: var(--brand); opacity: .55; font-size: 12px; }
.vcal_na { color: var(--brand); opacity: .35; font-size: 12px; }
.vcal_updated { font-size: 12px; letter-spacing: .5px; color: var(--brand); margin-top: 10px; }
.vcal_empty { font-size: 14px; letter-spacing: 1px; line-height: 2.2; padding: 40px 20px; }

@media (max-width: 768px) {
  .vc_cal_link { font-size: 12px; margin-top: 14px; }
  .vc_full { font-size: 12.5px; }
  .vcal_panel { width: 100%; }
  .vcal_nav { gap: 14px; margin-top: 16px; }
  .vcal_month { font-size: 16px; }
  .vcal_table thead th { min-width: 30px; }
  .vcal_table td { min-width: 30px; height: 36px; }
  .vcal_table th.vcal_name { min-width: 88px; padding: 8px 8px; font-size: 12px; }
  .vcal_updated { font-size: 12px; }
}

/* ---------- 間取り図リンク（各邸の詳細スペック内） ---------- */
.plan_btn {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 10px; padding: 9px 18px; border: 1px solid rgba(114,102,94,.42);
  border-radius: 100px; font-size: 13.5px; line-height: 1; letter-spacing: 1.5px;
  color: var(--brand); transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.plan_btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.plan_btn .ic { display: block; width: 13px; height: 11px; border: 1px solid currentColor; position: relative; }
.plan_btn .ic::after { content: ""; position: absolute; left: 4px; top: -1px; bottom: -1px; width: 1px; background: currentColor; }
/* 間取りの文字が短いとボタンが同じ行に並んでくっつくので、必ず改行して置く */
.spec .plan_btn { display: flex; width: fit-content; margin-top: 14px; }
@media (max-width: 768px) {
  .plan_btn { padding: 8px 15px; font-size: 12px; letter-spacing: 1px; }
  .spec .plan_btn { margin-top: 10px; }
  .plan_btn .ic { width: 11px; height: 9px; }
}

/* 比較表の「食事」はリンクだと分かりにくかったので、ブランド色＋濃いめの下線にした */
.cmp td .meal_link, .cmp_card .meal_link {
  color: var(--brand); border-bottom: 1px solid rgba(114,102,94,.55);
}
.cmp td .meal_link:hover, .cmp_card .meal_link:hover {
  color: var(--ink); border-color: var(--ink);
}
/* 「食事」の行だけ、行見出しの下に案内を出す */
.cmp .meal_hint { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.6; letter-spacing: .5px; color: var(--brand); opacity: .85; }
@media (max-width: 768px) { .cmp .meal_hint { font-size: 10.5px; } }

/* ---------- CUISINE「ご用意できる邸」タグに軽く色を ---------- */
/* 使う色は規約の6色から増やさない。GLAMDAY系＝テラコッタ地／GLAMPETIT系＝ベージュ地の2トーンだけ */
.cui_tag {
  background: var(--beige); border-color: rgba(114,102,94,.3); color: var(--brand);
}
.cui_tag--gd { background: var(--terra); }

/* ---------- ACCESS の熱海エリアMAP ---------- */
/* 白地のプレートに載せ、下に英字ラベルと拡大リンクを置く。影・角丸はつけない（規約）。
   MAPは支給ラスタ画像をやめて自製のSVGにした（tools/map/）。
   線画＝ベクター、文字とピン＝サイトのフォントで組んだ実テキスト。
   拡大しても崩れず、4邸のピンは各邸の詳細へのリンクになっている */
.access_map { margin: 0 0 64px; }
.access_map_plate {
  display: block; background: #fff; border: 1px solid var(--line);
  padding: 30px 34px;
}
.access_map_plate img { width: 100%; height: auto; }

/* --- 熱海エリアMAP（SVG本体） --- */
.am_svg { display: block; width: 100%; height: auto; }
/* 相模湾。色は足さず、ブランド色を極薄で敷いて海と陸を分けるだけ */
.am_sea_fill { fill: var(--brand); opacity: .07; }
/* 線画（実座標版・OSMの線をstrokeで描く） */
.am_s_road, .am_s_main, .am_s_rail, .am_s_river, .am_s_coast, .am_lead, .am_scale path {
  fill: none; stroke-linejoin: round; stroke-linecap: round;
}
.am_s_road { stroke: var(--line); stroke-width: 1.6; }
.am_s_river { stroke: var(--line); stroke-width: 1.6; }
.am_s_main { stroke: var(--brand); stroke-opacity: .5; stroke-width: 4.4; }
.am_s_coast { stroke: var(--brand); stroke-opacity: .5; stroke-width: 2.6; }
.am_s_rail { stroke: var(--brand); stroke-opacity: .9; stroke-width: 3.4; stroke-dasharray: 15 11; }
.am_lead { stroke: var(--ink); stroke-width: 1; }
.am_scale path { stroke: var(--brand); stroke-opacity: .55; stroke-width: 1.4; }
/* 線画（旧イラスト版・potraceの塗り。差し戻し用に残す） */
.am_road { fill: var(--line); }
.am_road_main { fill: var(--brand); opacity: .5; }
.am_rail { fill: var(--brand); opacity: .9; }
/* 枠・方位記号 */
.am_box, .am_compass circle {
  fill: #fff; stroke: var(--ink); stroke-width: 1.4;
}
.am_dot, .am_needle { fill: var(--ink); }
/* 文字。線の上に重なっても読めるよう、白フチを敷いてから塗る */
.am_svg text {
  paint-order: stroke fill; stroke: #fff; stroke-width: 4; stroke-linejoin: round;
}
.am_boxja { stroke: none; }
.am_en { font-family: "EB Garamond", serif; font-size: 21px; letter-spacing: .5px; fill: var(--ink); }
.am_ja { font-size: 19px; letter-spacing: 1px; fill: var(--ink); }
.am_boxja { font-size: 22px; letter-spacing: 2px; text-anchor: middle; fill: var(--ink); }
.am_note { font-size: 13px; letter-spacing: 1px; fill: var(--ink); }
.am_note_e { text-anchor: end; }
.am_sea { font-size: 20px; letter-spacing: 6px; fill: var(--brand); }
.am_n { font-family: "EB Garamond", serif; font-size: 22px; text-anchor: middle; fill: var(--ink); }
/* 4邸の地点は各邸の詳細へ飛ぶ。
   駅・港・城（黒い点）と区別がつくよう、4邸だけテラコッタ #9A4307 で目立たせる。
   規約の6色から増やしていない（「空き状況を見る」ボタンと同じ色）。 */
.am_link { cursor: pointer; }
.am_link .am_dot, .am_link text { transition: fill .25s ease; }
.am_villa .am_dot { fill: #9A4307; stroke: #fff; stroke-width: 2.2; }
.am_villa .am_halo { fill: #9A4307; opacity: .14; }
.am_villa text { fill: #9A4307; }
.am_villa .am_lead { stroke: #9A4307; stroke-opacity: .75; }
.am_villa .am_en { letter-spacing: 1px; }
.am_link:hover .am_dot, .am_link:focus-visible .am_dot,
.am_link:hover text, .am_link:focus-visible text { fill: #823906; }
.am_villa:hover .am_halo, .am_villa:focus-visible .am_halo { opacity: .26; }
/* 熱海海上花火大会。打上げは熱海湾の沖合で、4邸すべてから見える。
   リンク先は熱海市観光協会（日程はそちらで更新されるので、こちらに日付は書かない）。
   色は4邸と同じテラコッタ #9A4307 */
.am_fw_ray { fill: none; stroke: #9A4307; stroke-width: 2.2; stroke-opacity: .8; stroke-linecap: round; }
.am_fw_tip, .am_fw_core { fill: #9A4307; }
.am_fw text { fill: #9A4307; }
.am_fwja { font-size: 19px; letter-spacing: 1px; }
.am_fwnote { font-size: 13.5px; letter-spacing: 1px; }
/* 押せる範囲は印とラベルを囲む透明の板。見た目には出さない */
.am_fw_hit { fill: transparent; }
/* リンクであることの合図＝サイト共通の下線。
   文字を大きくする場面（SPのモーダル）でも長さが合うよう text-decoration で引く */
.am_fwlink { font-size: 13.5px; letter-spacing: 1px; text-decoration: underline; text-decoration-thickness: 1px; }
.am_fw:hover .am_fw_ray, .am_fw:focus-visible .am_fw_ray { stroke: #823906; stroke-opacity: 1; }
.am_fw:hover .am_fw_tip, .am_fw:hover .am_fw_core,
.am_fw:focus-visible .am_fw_tip, .am_fw:focus-visible .am_fw_core { fill: #823906; }
.access_map_cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-top: 16px;
}
.access_map_cap .en { font-size: 14px; letter-spacing: 3px; color: var(--brand); }
.access_map_zoom {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; line-height: 1; letter-spacing: 1.5px; color: var(--brand);
  border-bottom: 1px solid rgba(114,102,94,.42); padding-bottom: 5px;
  transition: color .25s ease, border-color .25s ease;
}
.access_map_zoom:hover { color: var(--ink); border-color: var(--ink); }
.access_map_zoom .ic {
  display: block; width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%; position: relative;
}
.access_map_zoom .ic::before,
.access_map_zoom .ic::after { content: ""; position: absolute; background: currentColor; }
.access_map_zoom .ic::before { left: 2.5px; right: 2.5px; top: 50%; height: 1px; margin-top: -.5px; }
.access_map_zoom .ic::after { top: 2.5px; bottom: 2.5px; left: 50%; width: 1px; margin-left: -.5px; }
@media (max-width: 768px) {
  .access_map { margin-bottom: 38px; }
  .access_map_plate { padding: 14px 12px; }
  .access_map_cap { margin-top: 12px; gap: 12px; }
  .access_map_cap .en { font-size: 11.5px; letter-spacing: 2px; }
  .access_map_zoom { font-size: 11.5px; letter-spacing: 1px; gap: 7px; }
  .access_map_zoom .ic { width: 11px; height: 11px; }
}

/* ---------- ヘッダー：MVの上でも出す（ハンバーガー式） ---------- */
/* 以前はヒーローを過ぎるまで隠していたが、MVの上にもメニューを出したいので
   常時表示にして、ヒーロー上は背景なし・白文字。スクロール後（.is_on）で白地に戻す */
.site_header { transform: none; background: transparent; border-bottom: 1px solid transparent; }
.site_header.is_on { background: rgba(255,255,255,.94); border-bottom-color: var(--line); }
.header_inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
/* ヒーローには大きなロゴがあるので、スクロールするまでヘッダーのロゴは出さない */
.header_logo { justify-self: center; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.site_header.is_on .header_logo { opacity: 1; visibility: visible; }
.header_logo { color: #fff; }
.site_header.is_on .header_logo { color: var(--brand); }
/* .btn の margin-top:24px が効いていて、予約ボタンだけ12px下にずれていた */
.site_header .btn_rsv { justify-self: end; margin-top: 0; }
.site_header:not(.is_on) .btn_rsv {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.55);
}
.site_header:not(.is_on) .btn_rsv .sep { color: rgba(255,255,255,.7); }
.site_header:not(.is_on) .btn_rsv:hover { background: rgba(255,255,255,.22); }

.nav_toggle {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; border-radius: 0; padding: 6px 2px; cursor: pointer;
  font-family: inherit; color: #fff; transition: color .3s ease;
}
.site_header.is_on .nav_toggle { color: var(--brand); }
.nav_toggle .bars { display: block; width: 26px; height: 10px; position: relative; }
.nav_toggle .bars i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .35s ease, opacity .35s ease; }
.nav_toggle .bars i:first-child { top: 0; }
.nav_toggle .bars i:last-child { bottom: 0; }
.nav_toggle .lbl { font-size: 13px; letter-spacing: 2.5px; line-height: 1; }
.nav_toggle .t_close { display: none; }
body.nav_open .nav_toggle { color: var(--brand); }
body.nav_open .nav_toggle .bars i:first-child { transform: translateY(4.5px) rotate(20deg); }
body.nav_open .nav_toggle .bars i:last-child { transform: translateY(-4.5px) rotate(-20deg); }
body.nav_open .nav_toggle .t_open { display: none; }
body.nav_open .nav_toggle .t_close { display: inline; }

/* ---------- 全画面メニュー ---------- */
body.nav_open { overflow: hidden; }
.nav_ov {
  position: fixed; inset: 0; z-index: 45; background: #fff;
  overflow-y: auto; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
}
body.nav_open .nav_ov { opacity: 1; visibility: visible; }
.nav_ov_in { width: 1024px; max-width: calc(100% - 40px); margin-inline: auto; padding: 120px 0 70px; text-align: center; }
.nav_ov_ttl { line-height: 1.5; }
.nav_ov_ttl .en { display: block; font-family: "EB Garamond", serif; font-size: 30px; letter-spacing: 4px; color: var(--brand); }
.nav_ov_ttl em { display: block; font-style: normal; margin-top: 6px; font-size: 13px; letter-spacing: 3px; }
.nav_ov_villas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 34px; }
.nav_ov_villas a { display: block; }
.nav_ov_villas .thumb { display: block; aspect-ratio: 1.5; overflow: hidden; }
.nav_ov_villas .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.nav_ov_villas a:hover .thumb img { transform: scale(1.05); }
.nav_ov_villas .en { display: block; margin-top: 14px; font-family: "EB Garamond", serif; font-size: 16px; letter-spacing: 2px; color: var(--brand); }
.nav_ov_villas .ja { display: block; margin-top: 5px; font-size: 15px; letter-spacing: 1.5px; line-height: 1.6; }
.nav_ov_villas .num { display: block; margin-top: 7px; font-size: 11px; letter-spacing: 1.5px; color: var(--brand); }
.nav_ov_links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px;
  margin: 54px 0 0; padding-top: 40px; border-top: 1px solid var(--line);
}
.nav_ov_links a { display: block; }
.nav_ov_links .en { display: block; font-family: "EB Garamond", serif; font-size: 19px; letter-spacing: 2.5px; color: var(--brand); transition: color .3s ease; }
.nav_ov_links em { display: block; font-style: normal; margin-top: 4px; font-size: 11.5px; letter-spacing: 2px; }
.nav_ov_links a:hover .en { color: var(--ink); }
.nav_ov_tel { margin-top: 44px; line-height: 1.8; }
.nav_ov_tel .lbl { display: block; font-size: 12px; letter-spacing: 2px; color: var(--brand); }
.nav_ov_tel .en { display: inline-block; margin-top: 6px; font-family: "EB Garamond", serif; font-size: 28px; letter-spacing: 2px; }

@media (max-width: 768px) {
  .nav_toggle .lbl { font-size: 11px; letter-spacing: 1.5px; }
  .nav_toggle .bars { width: 22px; }
  .nav_ov_in { padding: 92px 0 56px; }
  .nav_ov_ttl .en { font-size: 22px; letter-spacing: 3px; }
  .nav_ov_ttl em { font-size: 11px; }
  .nav_ov_villas { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 24px; }
  .nav_ov_villas .en { margin-top: 10px; font-size: 12.5px; letter-spacing: 1px; }
  .nav_ov_villas .ja { font-size: 12.5px; }
  .nav_ov_villas .num { font-size: 10px; }
  .nav_ov_links { gap: 12px 26px; margin-top: 34px; padding-top: 26px; }
  .nav_ov_links .en { font-size: 15px; letter-spacing: 1.5px; }
  .nav_ov_links em { font-size: 10px; }
  .nav_ov_tel { margin-top: 30px; }
  .nav_ov_tel .en { font-size: 22px; }
}

/* ---------- 「空き状況を見る」は目立たせる ---------- */
/* 規約の6色から増やさず、テラコッタ（#9A4307）をベタで使う。
   これまで背景に15%で敷いていた色なので、系統は外れない */
.vc_btn {
  background: #9A4307; border-color: #9A4307; color: #fff;
  letter-spacing: 3px; transition: background-color .3s ease, border-color .3s ease, opacity .3s ease;
}
.vc_btn:hover { background: #823906; border-color: #823906; color: #fff; opacity: 1; }

/* ---------- フッター（現行本番の構成に合わせる） ---------- */
.foot_main {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 40px; margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line);
}
.foot_nav { display: flex; flex-direction: column; gap: 12px; font-size: 14px; letter-spacing: 1.5px; line-height: 1.6; }
.foot_nav a { transition: color .25s ease; }
.foot_nav a:hover { color: var(--brand); }
.foot_left .foot_sns { margin-top: 26px; }
.foot_sns { display: flex; gap: 18px; align-items: center; }
.foot_sns img { width: 22px; height: auto; }
.foot_right { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.foot_kpg img { width: 148px; height: auto; }
.foot_link { font-size: 14px; letter-spacing: 1.5px; border-bottom: 1px solid rgba(114,102,94,.35); padding-bottom: 3px; transition: color .25s ease, border-color .25s ease; }
.foot_link:hover { color: var(--brand); border-color: var(--brand); }
.copy { margin-top: 44px; text-align: center; font-size: 12px; letter-spacing: 2px; color: var(--brand); }
@media (max-width: 768px) {
  .foot_main { flex-direction: column; align-items: flex-start; gap: 30px; margin-top: 40px; padding-top: 32px; }
  .foot_nav { gap: 10px; font-size: 12.5px; }
  .foot_right { align-items: flex-start; gap: 14px; }
  .foot_kpg img { width: 124px; }
  .foot_link { font-size: 12.5px; }
  .copy { margin-top: 32px; text-align: left; font-size: 10.5px; letter-spacing: 1px; }
}

/* ============================================================
   2026-08-25 SPの指摘まとめ直し
   ここは既存ルールを上書きするので、必ずファイル末尾に置く
   ============================================================ */

/* ① ヘッダーの「Reserve / 予約」が2行になる → 折り返さない */
.btn_rsv, .btn_hero { white-space: nowrap; }
@media (max-width: 768px) {
  .site_header .btn_rsv { padding: 6px 13px; font-size: 11px; letter-spacing: .5px; }
  .btn_rsv .sep { margin: 0 1px; }
}

/* ② メニューを開いたとき、上部（CLOSE・予約ボタン）が中身と被る
   → 開いている間はヘッダーを白地にして、中身は上揃えでスクロールさせる */
body.nav_open .site_header { background: rgba(255,255,255,.96); border-bottom-color: var(--line); }
body.nav_open .site_header .nav_toggle { color: var(--brand); }
body.nav_open .site_header .btn_rsv {
  background: rgba(114,102,94,.08); color: var(--ink); border-color: rgba(114,102,94,.5);
}
body.nav_open .site_header .btn_rsv .sep { color: var(--brand); }
.nav_ov { align-items: flex-start; }
.nav_ov_in { margin-block: auto; }
@media (max-width: 768px) {
  .nav_ov_in { padding: 84px 0 48px; }
}

/* ③ メニューの英語と日本語が離れて別物に見える → 1つの塊に見えるまで詰める */
.nav_ov_links { gap: 22px 34px; }
.nav_ov_links a { line-height: 1.25; }
.nav_ov_links .en { line-height: 1.2; }
.nav_ov_links em { margin-top: 2px; line-height: 1.4; }
.nav_ov_villas .en { line-height: 1.2; }
.nav_ov_villas .ja { margin-top: 3px; line-height: 1.4; }
.nav_ov_villas .num { margin-top: 4px; line-height: 1.4; }
.nav_ov_ttl .en { line-height: 1.2; }
.nav_ov_tel { line-height: 1.5; }
.nav_ov_tel .en { margin-top: 4px; }

/* ④ メニューの電話番号の下にも予約ボタン */
.nav_ov_btn { margin-top: 18px; display: inline-block; }

/* ⑥ 写真をまたぐ地図：SPで文字が窮屈／左端で切れる */
@media (max-width: 768px) {
  .amap_en { font-size: 40px; letter-spacing: 0; }
  .amap_jp { font-size: 38px; }
  .amap_sta { font-size: 42px; }
  .amap_sea { font-size: 36px; letter-spacing: 4px; }
}

/* ⑦ 施設カード：ロゴと人数チップの下端を揃える（バラバラに見えていた） */
.fac_overlay_logo { bottom: 18px; }
.fac_overlay .chip { bottom: 18px; }
@media (max-width: 768px) {
  .fac_card_img { aspect-ratio: 1 / 1; }
  .fac_overlay_logo { left: 14px; bottom: 14px; max-width: 58%; }
  .fac_overlay .chip { right: 14px; bottom: 14px; }
  .fac_sub { margin-top: 12px; }
}

/* ⑧ 横にはみ出して1画面に収まらない
   原因＝「選べるお鍋」の横スクロール（幅が縮まない）。SPは上下に並べる */
.mpanels, .mpanel, .mpanel_txt, .nabe, .nabe_row { min-width: 0; }
@media (max-width: 768px) {
  .nabe_row {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px;
    overflow: visible; padding-bottom: 0;
  }
  .nabe_row figure { flex: none; width: auto; }
}

/* ⑨ CUISINEのタブ：タブだと気づかない／押すと下が変わることが分かるように（SPのみ） */
.mtab_hint { display: none; }
@media (max-width: 768px) {
  .mtab {
    border-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 0;
  }
  .mtab li { display: block; }
  /* タブが5つ＝2列だと最後が1つ余るので、5つ目だけ横いっぱいに置く */
  .mtab li:nth-child(5):last-child { grid-column: 1 / -1; }
  .mtab_btn {
    border: 1px solid rgba(114,102,94,.45); border-radius: 100px;
    padding: 9px 6px; gap: 2px; background: #fff;
  }
  .mtab_btn .en { font-size: 13.5px; }
  .mtab_btn em { font-size: 10px; }
  .mtab_btn.is_on {
    background: var(--brand); border-color: var(--brand); color: #fff;
  }
  .mtab_btn.is_on em { color: rgba(255,255,255,.8); }
  /* 選択中のタブから下のパネルへ、三角で「ここが変わる」と示す */
  .mtab_hint {
    display: block; margin: 14px 0 0; text-align: center;
    font-size: 11px; letter-spacing: 1px; color: var(--brand);
  }
  .mtab_hint::after {
    content: ""; display: block; width: 0; height: 0; margin: 6px auto 0;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 7px solid var(--brand);
  }
  .mpanels { margin-top: 18px; }
  .mtab_btn em { font-size: 9.5px; letter-spacing: 0; }
}

/* ⑪ 空き状況カレンダー：右に動かせることが分かるように */
.vcal_scroll_wrap { position: relative; }
.vcal_scroll_wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 42px;
  pointer-events: none; background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}
.vcal_hint { margin: 8px 0 0; font-size: 11.5px; letter-spacing: 1px; color: var(--brand); text-align: right; }
.vcal_table th.vcal_sel .d, .vcal_table th.vcal_sel .w { color: #9A4307; }
.vcal_table td.vcal_selcol { background: rgba(154,67,7,.06); }

/* ⑤ SPだけで効かせる改行（PCでは無効）。行数が増えて縦長にならないよう行間も詰める */
.br_sp { display: none; }
@media (max-width: 768px) {
  .br_sp { display: inline; }
  .intro .lead { line-height: 2; }
}
/* 固定した邸名の列の左に、スクロールした日付が覗く問題。
   border-collapse: collapse だと罫線をテーブルが描くので、固定列の白geometryで隠せない。
   separate にして罫線をセル側に持たせる */
.vcal_table { border-collapse: separate; border-spacing: 0; }
.vcal_table th, .vcal_table td {
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.vcal_table tr > *:last-child { border-right: 0; }
.vcal_table tbody tr:last-child > * { border-bottom: 0; }
.vcal_table th.vcal_name { box-shadow: 1px 0 0 var(--line); z-index: 2; }

/* ページ全体で本文の幅を1つに揃える（1024）。
   導入文と予約だけ934pxで、セクションごとに左右の位置が変わって見えていた */
.wrap { width: 1024px; }

/* 写真をスワイプすると、ブラウザの「戻る／進む」ジェスチャに取られてページごと横にズレる（実機Chrome）。
   スライダーは縦のパンだけブラウザに渡し、横は自前のtouchstart/touchendで受ける。
   横スクロールする箇所も、端まで行ったときにページ側へ伝えない */
.peek, .peek_track, .peek_item { touch-action: pan-y; }
html { overscroll-behavior-x: contain; }
.vcal_scroll, .nabe_row, .cmp_scroll { overscroll-behavior-x: contain; }

/* 実機（WebKit）で比較カードの「／」区切りが折り返さず、カードごと画面からはみ出して
   ページ全体が横に動いていた。keep-all のままだと ／ で切れないので <wbr> を入れ、
   幅の計算にも効くよう overflow-wrap を anywhere に */
.cmp td, .cmp_card dd { overflow-wrap: normal; }   /* 折り返しは <wbr> の位置だけ＝「／」の後ろ */
.vc_field { min-width: 0; }
/* 保険：どこかで横にはみ出しても、ページ自体は横に動かさない */
html { overflow-x: clip; }

/* フッター：各邸の名前の右にその邸のInstagram（アカウントは邸ごとに別） */
.foot_nav li { display: flex; align-items: center; gap: 10px; }
.foot_ig { display: inline-flex; opacity: .75; transition: opacity .25s ease; }
.foot_ig img { width: 16px; height: auto; }
.foot_ig:hover { opacity: 1; }
/* .nw（折り返さない）は比較表向けの指定だったので、お食事パネルの定義リストにも効かせる */
.mpanel_dl .nw { white-space: nowrap; }

/* ⑨ 2026-08-26 施設カード：ロゴと人数チップが横で突き当たる
   ⑦で下端を揃えたときにロゴを1段下げてチップと同じ行にしたため、
   ロゴの広いPORT（120px）がチップに重なっていた（1024〜1440pxで6〜16px）。
   チップの占有幅（右余白16＋チップ最大89＋間10＋左余白16＝131px）を空け、
   足りなければロゴ側が縮むようにする。SPは⑦の max-width:58% が効いているので対象外。 */
@media (min-width: 769px) {
  .fac_overlay_logo { max-width: calc(100% - 131px); }
}

/* ⑩ 2026-08-27 施設カード：ロゴと人数チップが突き当たって見える
   ⑨の 131px はチップの実寸ぴったりで、ロゴとの間に10pxしか残っていなかった。
   24px以上あける。タブレット幅（769〜1023px）は4列でカードが細く、
   131pxを引くとロゴが30〜60pxまで潰れるので、そこだけロゴを1段上に戻す。 */
@media (min-width: 1024px) {
  .fac_overlay_logo { max-width: calc(100% - 145px); }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .fac_overlay_logo { max-width: calc(100% - 32px); bottom: 58px; }
}

/* ⑫ 2026-08-27 CUISINE「アラカルト」だけ、7品を写真の一覧で見せる（ユーザー指示）。
   他のタブは写真1枚＋説明の2カラムのまま。写真は角丸なし・影なしで規約どおり。 */
.mpanel--ala { display: block; }
.ala_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 24px; margin-top: 34px; }
.ala_grid figure { margin: 0; }
.ala_grid img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; }
.ala_grid figcaption { margin-top: 12px; font-size: 15px; line-height: 1.6; letter-spacing: .5px; }
.ala_grid figcaption span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--brand); letter-spacing: 1px; }
.mpanel--ala .mpanel_villas { margin-top: 40px; }
@media (max-width: 768px) {
  .ala_grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; margin-top: 24px; }
  .ala_grid figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
  .ala_grid figcaption span { font-size: 11px; letter-spacing: .5px; }
  .mpanel--ala .mpanel_villas { margin-top: 28px; }
}

/* ⑬ CUISINEタブの和文が「組合せコース（手巻き寿司・／鍋）」と割れていたので、
   カッコの中はひとかたまりで折り返す */
.mtab_btn em .nw { white-space: nowrap; }