/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.8em;border-radius:var(--radius);
  font-family:var(--font-latin);letter-spacing:.12em;font-size:.875rem;transition:.25s ease;border:1px solid transparent}
.btn-fill{background:var(--c-cta);color:var(--c-text-inv)}
.btn-fill:hover{transform:translateY(-1px);background:var(--c-cta-deep)}
.btn-line{border-color:var(--c-text);color:var(--c-text)}
.btn-line:hover{background:var(--c-text);color:var(--c-bg)}
.btn-light{border-color:rgba(255,255,255,.7);color:#fff}
.btn-light:hover{background:#fff;color:var(--c-text)}
.link-more{font-family:var(--font-latin);letter-spacing:.12em;font-size:.875rem;border-bottom:1px solid currentColor;padding-bottom:.2em;transition:.25s}
.link-more:hover{opacity:.6}

/* TEF風 共通リンク（テキスト＋伸びる線＋矢印・ホバーで線が伸び矢印が進む） */
.tlink{display:inline-flex;flex-direction:column;align-items:center;gap:.95rem;
  font-family:var(--font-serif);letter-spacing:.16em;font-size:.95rem;color:var(--c-text);line-height:1;transition:color .3s ease}
.tlink:hover{color:var(--c-accent)}
.tlink .tlink-bar{position:relative;display:block;width:108px;height:1px;background:currentColor;transition:width .4s cubic-bezier(.4,0,.1,1)}
.tlink .tlink-bar::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);transition:transform .4s cubic-bezier(.4,0,.1,1)}
.tlink:hover .tlink-bar{width:152px}
.tlink:hover .tlink-bar::after{transform:translateY(-50%) translateX(5px) rotate(45deg)}
/* 暗色背景（Instagram等）では白文字を維持 */
.insta-section .tlink{color:#fff}
.insta-section .tlink:hover{color:#fff;opacity:.85}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100;display:flex;align-items:center;
  transition:background .3s ease,box-shadow .3s ease,color .3s ease;color:#fff}
.site-header .container{display:flex;align-items:center;justify-content:flex-start;gap:clamp(1rem,2.2vw,2rem);width:100%;max-width:none}
/* トップ（HERO上）は透過＋白文字（可読スクリム）、スクロール/サブページは黒 */
.site-header:not(.scrolled):not(.solid){background:linear-gradient(180deg,rgba(20,24,18,.55),rgba(20,24,18,0))}
.site-header:not(.scrolled):not(.solid) .brand,
.site-header:not(.scrolled):not(.solid) .gnav>a,
.site-header:not(.scrolled):not(.solid) .lang-btn{text-shadow:0 1px 12px rgba(20,24,18,.6)}
.site-header.scrolled,.site-header.solid{background:rgba(26,26,26,.8);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px)}
.brand{display:inline-flex;flex-direction:column;justify-content:center;gap:.18rem;font-family:var(--font-serif);font-size:1.15rem;letter-spacing:.12em;white-space:nowrap;line-height:1}
.brand small{display:block;font-family:var(--font-latin);letter-spacing:.22em;font-size:.6rem;opacity:.85}
.brand-fallback{flex-direction:column;gap:.18rem;line-height:1}
/* Google翻訳ウィジェットのバー/余白/ツールチップを抑制 */
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate,iframe.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,#goog-gt-tt,.goog-te-balloon-frame,
.goog-te-gadget,#google_translate_element{display:none!important;visibility:hidden!important}
body{top:0!important;position:static!important}
.goog-tooltip,.goog-tooltip *,.goog-text-highlight{display:none!important;background:none!important;box-shadow:none!important}
/* ブランドロゴ（/assets/img/logo.svg を配置で自動表示。未配置時は日本語社名にフォールバック） */
.brand-logo{height:clamp(42px,4.6vw,54px);width:auto;display:block}
/* ロゴタイプ（ローマ字表記・ロゴの幾何学サンセリフに近い Jost）
   PC=1行／ハンバーガー切替（〜1023px）=縦3行・両端揃え */
.brand-word{font-family:'Jost',var(--font-latin),sans-serif;font-weight:300;letter-spacing:.34em;
  font-size:clamp(.8rem,1.15vw,.98rem);white-space:nowrap;line-height:1}
.brand-word i{font-style:normal}
.brand-word .bw-line{display:inline}
.brand-word .bw-line+.bw-line{margin-left:.62em}
@media(max-width:1023px){
  .brand-word{display:flex;flex-direction:column;gap:.5em;width:58px;letter-spacing:0;font-size:.62rem}
  .brand-word .bw-line{display:flex;justify-content:space-between;width:100%}
  .brand-word .bw-line+.bw-line{margin-left:0}
}
.site-header:not(.scrolled):not(.solid) .brand-logo{filter:drop-shadow(0 1px 10px rgba(20,24,18,.55))}
.gnav{display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);margin-left:auto}
.gnav a{font-size:.8rem;letter-spacing:.14em;font-family:var(--font-latin);transition:.2s;position:relative}
.gnav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:.25s}
.gnav a:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:clamp(.8rem,1.4vw,1.3rem)}
.lang{position:relative}
.lang-btn{font-family:var(--font-latin);letter-spacing:.1em;font-size:.78rem;display:flex;align-items:center;gap:.3em}
.lang-menu{position:absolute;right:0;top:140%;background:#fff;color:var(--c-text);border:1px solid var(--c-line);border-radius:0;min-width:120px;
  padding:.4rem 0;display:none;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.lang.open .lang-menu{display:block}
.lang-menu button{display:block;width:100%;text-align:left;padding:.45rem 1rem;font-size:.82rem;letter-spacing:.06em}
.lang-menu button:hover{background:var(--c-bg-sub)}
/* ヘッダー右端のテラコッタ「予約する」CTA（全デバイス表示） */
.header-reserve{background:var(--c-cta);color:#fff;border-radius:0;
  height:var(--header-h);display:inline-flex;align-items:center;padding:0 clamp(1.2rem,2.4vw,2.4rem);
  font-family:var(--font-serif);font-size:clamp(.9rem,1.15vw,1.05rem);letter-spacing:.14em;white-space:nowrap;transition:background .25s}
.header-reserve:hover{background:var(--c-cta-deep)}
/* ヘッダーのお気に入り（ハート＋件数バッジ） */
.header-fav{position:relative;display:inline-flex;align-items:center;color:currentColor;transition:opacity .2s}
.header-fav:hover{opacity:.65}
.header-fav .fav-ic{width:21px;height:21px;display:block}
.header-fav .fav-count{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  background:var(--c-cta);color:#fff;border-radius:0;font-family:var(--font-sans);font-size:.62rem;
  line-height:16px;text-align:center;letter-spacing:0}
/* スマホ・タブレットは右寄せ＋並び順：翻訳 → ハンバーガー → お気に入り → 予約する */
@media(max-width:1023px){
  .header-actions{margin-left:auto}
  .header-actions .lang{order:1}
  .header-actions .nav-toggle{order:2}
  .header-actions .header-fav{order:3}
  .header-actions .header-reserve{order:4}
}
@media(max-width:767px){
  .header-reserve{padding:0 1rem;font-size:.85rem;letter-spacing:.08em}
  .header-actions{gap:.7rem}
  .header-fav .fav-ic{width:20px;height:20px}
}
.nav-toggle{display:none;width:23px;height:18px;position:relative}
.nav-toggle span{position:absolute;left:0;height:1.5px;width:100%;background:currentColor;transition:.3s}
.nav-toggle span:nth-child(1){top:0}.nav-toggle span:nth-child(2){top:8px}.nav-toggle span:nth-child(3){top:16px}
body.menu-open .nav-toggle span:nth-child(1){top:8px;transform:rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){top:8px;transform:rotate(-45deg)}

@media(max-width:1023px){
  .nav-toggle{display:block}
  .gnav{position:fixed;top:0;left:0;right:0;bottom:0;height:100svh;background:rgba(255,255,255,.98);color:var(--c-text);
    flex-direction:column;justify-content:center;gap:1.6rem;transform:translateY(-100%);transition:transform .4s ease,visibility .4s;
    z-index:90;visibility:hidden}
  body.menu-open .gnav{transform:none;visibility:visible}
  .gnav a{font-size:1rem}
}

/* ---------- hero (写真＋白文字／木漏れ日トーン) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.hero .media{position:absolute;inset:0;
  background-image:linear-gradient(165deg,#e9f0de 0%,#f5f1e6 50%,#e4ecd9 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hero .media.media-video{background:#e9f0de}
.hero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 写真の上の可読性スクリム（上下を軽く暗く） */
.hero .media::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(40,44,36,.32),rgba(40,44,36,.12) 40%,rgba(40,44,36,.42))}

/* Ken Burns スライドショー（静止画フェード＋ゆっくり拡大） */
.hero-slides{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:0;animation:heroFade 24s linear infinite}
.hero-slide::before{content:"";position:absolute;inset:0;background:inherit;background-size:cover;background-position:center}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:6s}
.hero-slide:nth-child(3){animation-delay:12s}
.hero-slide:nth-child(4){animation-delay:18s}
/* 4枚×各6秒表示、クロスフェード。拡大はopacityと同期 */
@keyframes heroFade{
  0%{opacity:0;transform:scale(1.0)}
  4%{opacity:1}
  25%{opacity:1;transform:scale(1.08)}
  29%{opacity:0;transform:scale(1.09)}
  100%{opacity:0;transform:scale(1.0)}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{animation:none;opacity:0}
  .hero-slide:nth-child(1){opacity:1}
}
.hero .inner{position:relative;z-index:2;padding:0 1.5rem;max-width:820px;text-shadow:0 1px 24px rgba(30,34,26,.35)}
.hero .label{color:rgba(255,255,255,.9)}
.hero .sub{margin-top:1.2rem;font-size:clamp(.9rem,1.4vw,1.1rem);letter-spacing:.16em;color:rgba(255,255,255,.92)}
.hero-caption{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:2;font-family:var(--font-sans);
  font-size:.7rem;letter-spacing:.12em;color:rgba(255,255,255,.8)}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--font-latin);
  letter-spacing:.2em;font-size:.7rem;color:#fff;opacity:.85}
.scroll-cue::after{content:"";display:block;width:1px;height:42px;margin:.6rem auto 0;background:#fff;opacity:.6;animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
/* 下層ページのヒーロー：TEF風（背景=予約セクションと同色／中央に 明朝の日本語タイトル＋小さな英語サブ＋リボン代わりの短線） */
/* タイトル帯：全ページ最低限の余白（コンパクト） */
.page-hero{min-height:0;padding-block:clamp(1.5rem,3.5vw,2.3rem);background:var(--c-dark);color:#fff}
.page-hero.slim{padding-block:clamp(1.3rem,3.2vw,2rem)}

/* サブページ見出し（MACHIYA風：パンくず＋中央明朝大見出し＋区切り線・明るい背景） */
.page-head{padding-block:clamp(1.6rem,3.5vw,2.4rem) clamp(.8rem,2vw,1.2rem)}
/* タイトル直後のセクションは上余白を最小限に */
.page-head + .section{padding-top:clamp(1rem,2.5vw,1.6rem)}
.page-head .crumb{font-family:var(--font-sans);font-size:.74rem;letter-spacing:.03em;color:var(--c-text-weak);margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.page-head .crumb a{color:var(--c-text-weak);transition:color .2s}
.page-head .crumb a:hover{color:var(--c-text)}
.page-head .crumb .sep{margin:0 .55em;opacity:.55}
.page-head .ph-center{text-align:center}
.page-head .ph-eyebrow{font-family:var(--font-latin);letter-spacing:.18em;font-size:.78rem;color:var(--c-text-weak);text-transform:uppercase}
.page-head .ph-title{font-family:var(--font-head);font-weight:600;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.08em;line-height:1.5;margin-top:.6rem}
.page-head .ph-mark{display:block;width:34px;height:1px;background:var(--c-accent-soft);margin:clamp(1.1rem,3vw,1.7rem) auto 0}
.page-hero .inner{text-shadow:none}
.page-hero .hero-title{font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.45rem,2.3vw,1.85rem);letter-spacing:.3em;white-space:nowrap;line-height:1.5}
.page-hero .hero-en{display:block;margin-top:.9rem;font-family:var(--font-latin);
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.page-hero .hero-mark{display:block;width:28px;height:1px;background:rgba(255,255,255,.4);margin:1.1rem auto 0}

/* 画像ユーティリティ（プレースホルダ→実写真の差し替え用） */
img.ratio-43,img.ratio-32,img.ratio-11,img.ratio-169,img.ratio-916{width:100%;height:auto;object-fit:cover;display:block}
.media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- placeholder image ---------- */
.ph{position:relative;background:var(--c-bg-sub);overflow:hidden}
.ph::after{content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;color:#b9b3a8;
  font-family:var(--font-latin);letter-spacing:.18em;font-size:.7rem}
.ratio-43{aspect-ratio:4/3}.ratio-32{aspect-ratio:3/2}.ratio-11{aspect-ratio:1/1}.ratio-169{aspect-ratio:16/9}.ratio-916{aspect-ratio:9/16}

/* ---------- search & filter bar ---------- */
.searchbar{background:#fff;border:1px solid var(--c-line);border-radius:0;display:flex;flex-wrap:wrap;gap:.75rem;padding:1rem;align-items:end}
.searchbar .field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 140px}
.searchbar label{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.08em;color:var(--c-text-weak)}
.searchbar input,.searchbar select{border:1px solid var(--c-line);padding:.6rem .7rem;border-radius:var(--radius);background:#fff}
.searchbar .btn{flex:0 0 auto}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.2rem}
.chip{font-family:var(--font-sans);font-size:.8rem;letter-spacing:.04em;border:1px solid var(--c-line);padding:.45em 1em;border-radius:0;
  background:#fff;color:var(--c-text-weak);transition:.2s}
.chip:hover{border-color:var(--c-text)}
.chip.active{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.result-meta{display:flex;justify-content:space-between;align-items:center;margin:1.6rem 0 1rem;color:var(--c-text-weak);font-size:.85rem}

/* ---------- reservation panel (TOP / 町家インズ型：HERO下端に重なる白い横長パネル) ---------- */
.reserve-wrap{position:relative;z-index:5}
.reserve-panel{background:var(--c-bg-sub);border:1px solid var(--c-line);box-shadow:0 16px 44px rgba(40,44,36,.14);
  max-width:1120px;margin:0 auto;padding:1.6rem 1.8rem;border-radius:0;position:relative;z-index:5}
.reserve-form{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:end}
.reserve-form .rf-field{display:flex;flex-direction:column;gap:.5rem;flex:1 1 175px;min-width:140px}
.reserve-form label{font-family:var(--font-sans);font-size:.78rem;letter-spacing:.06em;color:var(--c-text-weak)}
.reserve-form input,.reserve-form select{border:1px solid var(--c-line);background:#fff;color:var(--c-text);
  height:52px;padding:0 .9rem;border-radius:var(--radius);font-family:inherit;font-size:.95rem}
.reserve-form .rf-submit{flex:0 0 auto;align-self:stretch;height:auto;min-height:52px;padding:0 2.4em;font-size:.92rem;letter-spacing:.14em;justify-content:center}
.reserve-sub{display:flex;gap:1rem;justify-content:center;align-items:center;margin-top:1.1rem;flex-wrap:wrap;font-size:.8rem}
.reserve-sub a{font-family:var(--font-sans);letter-spacing:.06em;color:var(--c-text-weak);border-bottom:1px solid var(--c-line);padding-bottom:.15em;transition:.2s}
.reserve-sub a:hover{color:var(--c-text);border-color:var(--c-text)}
.reserve-sub .rs-div{opacity:.4}
@media(max-width:760px){.reserve-panel{margin-top:0;box-shadow:0 10px 28px rgba(40,44,36,.1)}.reserve-form .rf-submit{flex:1 1 100%}}
/* TOP予約枠：横幅を画面いっぱい（全幅）に */
.reserve-wrap>.container{max-width:none;padding-inline:0}
.reserve-panel{max-width:none;margin-left:0;margin-right:0;border-radius:0;border-left:0;border-right:0;padding-inline:var(--gutter)}

/* ---------- HERO シネマ（NOT A HOTEL型・全画面1枚で3ブランド自動切替） ---------- */
.hero-cinema{position:relative;height:100svh;height:100dvh;min-height:640px;overflow:hidden;background:#1a1a1a}
.hc-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;
  opacity:0;transition:opacity 1s ease;pointer-events:none;z-index:1}
.hc-slide.is-active{opacity:1;pointer-events:auto;z-index:2}
.hc-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hc-slide.is-active .hc-bg{animation:hcKen 11s ease-out both}
@keyframes hcKen{from{transform:scale(1.04)}to{transform:scale(1.14)}}
/* 動画スライド（1枚目）：videoで全面カバー・Ken Burnsは二重動きになるため無効化 */
.hc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-slide.is-active .hc-bg.has-vid{animation:none}
.hc-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,22,.25),rgba(20,30,22,.55))}
.hc-inner{position:relative;z-index:2;padding:0 1.2rem}
/* 7/1打ち合わせ：文字はもっと太く・存在感（視認性重視）。ヘッダーは現状維持 */
.hc-en{font-family:var(--font-latin);letter-spacing:.18em;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.25;text-shadow:0 2px 22px rgba(20,24,18,.6)}
/* ブランドムービーのブランドタイトル指定フォント。
   ※「DNP 秀英にじみ初号明朝 Std」は有料フォント（Adobe Fonts/Morisawa等）で未ライセンス環境では
   Shippori Mincho にフォールバック。動画にタイトルを焼き込む際は指定フォントで作成。 */
.hc-en--shuei{font-family:"DNP 秀英にじみ初号明朝 Std","A-OTF 秀英初号明朝 Std","Shippori Mincho","Noto Serif JP",serif;font-weight:700;letter-spacing:.12em}
.hc-en--shippori{font-family:"Shippori Mincho","Noto Serif JP",serif;font-weight:600;letter-spacing:.12em}
/* 進行サークル（NOT A HOTEL風・画像入りの円＋外周リングが時間で一周）。HERO上部中央に配置 */
.hc-progress{position:absolute;left:50%;top:clamp(92px,12vh,124px);transform:translateX(-50%);z-index:5;
  display:flex;gap:clamp(.7rem,1.6vw,1.1rem)}
.hc-dot{position:relative;width:clamp(40px,4.4vw,52px);height:clamp(40px,4.4vw,52px);
  border:0;padding:0;background:none;cursor:pointer;border-radius:50%}
.hc-thumb{position:absolute;inset:3px;border-radius:50%;background-size:cover;background-position:center;
  opacity:.5;box-shadow:0 0 0 1px rgba(255,255,255,.5);transition:opacity .3s}
.hc-dot.is-active .hc-thumb{opacity:1}
.hc-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);opacity:0;transition:opacity .3s}
.hc-dot.is-active .hc-ring{opacity:1}
.hc-ring-prog{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
@media(max-width:760px){.hc-progress{top:clamp(80px,11vh,104px)}}
@media(prefers-reduced-motion:reduce){.hc-slide .hc-bg{animation:none}}

/* ---------- 旧HERO 3分割（未使用・残置） ---------- */
.hero-brands{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:clamp(440px,56vh,600px)}
.hero-brand{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;text-align:center}
.hero-brand .hb-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s ease}
.hero-brand::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,22,.18),rgba(20,30,22,.55));transition:background .4s ease}
.hero-brand:hover .hb-bg{transform:scale(1.07)}
.hero-brand:hover::after{background:linear-gradient(180deg,rgba(20,30,22,.08),rgba(20,30,22,.4))}
/* タッチ端末（スマホ・タブレット）では拡大しない＝指の追従ズームを抑制 */
@media(hover:none),(pointer:coarse){
  .hero-brand .hb-bg{transition:none !important}
  .hero-brand:hover .hb-bg,.hero-brand:active .hb-bg,.hero-brand:focus .hb-bg{transform:none !important}
  .hero-brand:hover::after,.hero-brand:active::after,.hero-brand:focus::after{background:linear-gradient(180deg,rgba(20,30,22,.18),rgba(20,30,22,.55))}
}
/* 念のため幅でも抑制（iPadOS等がhover:hoverを報告するケース対策）。
   スマホ・タブレット幅（≤1023px）はスクロール/タップ/フォーカス いかなる場合も拡大しない */
@media(max-width:1023px){
  .hero-brand .hb-bg{transform:none !important;transition:none !important}
  .hero-brand:hover .hb-bg,.hero-brand:active .hb-bg,.hero-brand:focus .hb-bg,.hero-brand:focus-within .hb-bg{transform:none !important}
  .hero-brand:hover::after,.hero-brand:active::after,.hero-brand:focus::after{background:linear-gradient(180deg,rgba(20,30,22,.18),rgba(20,30,22,.55))}
}
.hero-brand .hb-inner{position:relative;z-index:2;padding:0 1.2rem}
.hero-brand .hb-en{font-family:var(--font-latin);letter-spacing:.18em;font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.25;text-shadow:0 1px 18px rgba(20,24,18,.5)}
.hero-brand+.hero-brand{border-left:1px solid rgba(255,255,255,.16)}
/* 中央キャッチ（上部に重ねる） */
.hb-caption{position:absolute;left:0;right:0;top:clamp(96px,15vh,160px);z-index:3;text-align:center;color:#fff;pointer-events:none;text-shadow:0 1px 22px rgba(20,24,18,.55)}
.hb-caption .hc-title{font-family:var(--font-serif);font-size:clamp(1.5rem,3.4vw,2.7rem);letter-spacing:.12em;line-height:1.45}
.hb-caption .hc-sub{display:block;margin-top:.9rem;font-size:clamp(.78rem,1.4vw,1rem);letter-spacing:.2em;opacity:.92}
.hero-brands .scroll-cue{color:#fff}
@media(max-width:760px){
  .hero-brands{grid-template-columns:1fr;height:auto}
  /* スマホは横長(16:10)で各パネルを低く・見やすく（縦に長くならない） */
  .hero-brand{aspect-ratio:16/10;min-height:0}
  .hero-brand .hb-inner{padding-bottom:0}
  .hero-brand+.hero-brand{border-left:0}
  .hb-caption{position:static;padding:6rem 1rem 2rem;background:var(--c-dark);text-shadow:none}
}

/* ---------- header SNS icons（Instagram / Facebook / TikTok） ---------- */
.header-sns{display:flex;align-items:center;gap:.95rem;margin-right:clamp(1.2rem,3vw,2.6rem)}
.header-sns a{display:inline-flex;width:18px;height:18px;color:currentColor;transition:opacity .2s}
.header-sns a:hover{opacity:.6}
.header-sns svg{width:100%;height:100%;display:block;fill:currentColor}
@media(max-width:767px){.header-sns{display:none}}

/* ---------- 宿泊施設を選ぶ：3カード（アイコン＋タイトルのみ／町家インズ型） ---------- */
.choose-grid{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.5vw,1.6rem)}
@media(min-width:768px){.choose-grid{grid-template-columns:repeat(3,1fr)}}
.choose-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3rem;text-align:center;
  background:var(--c-bg-sub);border:1px solid var(--c-line);border-radius:0;padding:clamp(2.6rem,5vw,3.8rem) 1.5rem;color:var(--c-text);
  transition:box-shadow .25s,transform .25s}
.choose-card:hover{box-shadow:0 10px 28px rgba(40,44,36,.08);transform:translateY(-2px)}
.choose-card .ch-ic{width:44px;height:44px;color:var(--c-accent)}
.choose-card .ch-ic svg{width:100%;height:100%;fill:currentColor;display:block}
.choose-card .ch-ja{font-family:var(--font-serif);font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:.1em}

/* ---------- ライン見出し（MACHIYA風：中央タイトル＋左右の区切り線） ---------- */
.lined-title{display:flex;align-items:center;justify-content:center;gap:1.2rem;text-align:center;margin-bottom:var(--space-6)}
.lined-title::before,.lined-title::after{content:"";height:1px;background:rgba(43,43,43,.25);width:clamp(60px,12vw,150px)}
.lined-title span{font-family:var(--font-head);font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:.14em;white-space:nowrap}

/* ---------- PICK UP カルーセル（MACHIYA風スライド） ---------- */
.pickup{position:relative}
.pickup-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2.4rem)/3);gap:1.2rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.4rem}
@media(max-width:900px){.pickup-track{grid-auto-columns:calc((100% - 1.2rem)/2)}}
@media(max-width:600px){.pickup-track{grid-auto-columns:86%}}
.pickup-track::-webkit-scrollbar{display:none}
.pickup-track{scrollbar-width:none}
.pickup-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--c-bg-sub);border:1px solid var(--c-line);
  border-radius:0;overflow:hidden;transition:box-shadow .25s,transform .25s}
.pickup-card:hover{box-shadow:0 10px 28px rgba(40,44,36,.1);transform:translateY(-2px)}
.pickup-card .pk-media{aspect-ratio:3/2;overflow:hidden;background:var(--c-bg-sub)}
.pickup-card .pk-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.pickup-card:hover .pk-media img{transform:scale(1.05)}
.pickup-card .pk-body{display:flex;flex-direction:column;gap:.25rem;padding:.75rem .9rem .9rem}
.pickup-card .pk-brand{font-family:var(--font-latin);letter-spacing:.1em;font-size:.62rem;color:var(--c-text-weak)}
.pickup-card .pk-name{font-family:var(--font-serif);font-size:1rem;line-height:1.45}
.pickup-card .pk-desc{font-size:.76rem;color:var(--c-text-weak);line-height:1.6}
.pickup-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid var(--c-line);display:grid;place-items:center;font-size:1.3rem;line-height:1;color:var(--c-text);
  box-shadow:0 4px 14px rgba(40,44,36,.14);transition:.2s}
.pickup-arrow:hover{background:#efeadf}
.pickup-arrow.prev{left:-10px}.pickup-arrow.next{right:-10px}
@media(max-width:760px){.pickup-arrow{display:none}}

/* ---------- property cards ---------- */
.grid-cards{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2rem)}
@media(min-width:768px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-cards{grid-template-columns:repeat(3,1fr)}}
.card{display:block;background:#fff;transition:.3s}
.card .thumb{overflow:hidden}
.card .thumb>*{transition:transform .6s ease}
.card:hover .thumb>*{transform:scale(1.04)}
.card .brand{font-family:var(--font-latin);letter-spacing:.14em;font-size:.72rem;color:var(--c-text-weak);margin-top:1rem}
.card .name{font-size:1.15rem;margin-top:.3rem}
.card .meta{display:flex;gap:.8rem;flex-wrap:wrap;color:var(--c-text-weak);font-size:.8rem;margin-top:.5rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.tag{font-family:var(--font-sans);font-size:.7rem;letter-spacing:.04em;border:1px solid var(--c-line);padding:.25em .7em;border-radius:0;color:var(--c-text-weak)}
.price{margin-top:.7rem;font-size:.85rem}.price .num{font-size:1.05rem}
.card.is-ending{opacity:.62}
.ending-note{display:inline-block;margin-left:.6em;font-family:var(--font-sans);font-size:.62rem;letter-spacing:.04em;
  color:var(--c-text-weak);border:1px solid var(--c-line);border-radius:0;padding:.05em .6em;vertical-align:middle}
.series-head .lead{margin-top:.4rem}

/* ---------- concept select (top 2案目) ---------- */
.concept-grid{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.5vw,1.6rem)}
@media(min-width:768px){.concept-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
.cat-grid .concept-card{min-height:clamp(300px,30vw,400px)}
.concept-item{display:flex;flex-direction:column;gap:1rem}
.concept-movie{position:relative;aspect-ratio:16/9;background:#2b2b2b;overflow:hidden;border:1px solid var(--c-line)}
.concept-movie::after{content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.78);font-family:var(--font-latin);letter-spacing:.14em;font-size:.72rem;text-align:center;padding:0 1rem}
.concept-movie::before{content:"";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:0;height:0;border-left:18px solid rgba(255,255,255,.85);border-top:12px solid transparent;border-bottom:12px solid transparent;z-index:1}
.concept-item .concept-card{min-height:auto}
.concept-card{position:relative;display:block;overflow:hidden;border:1px solid var(--c-line);background:var(--c-bg-sub);min-height:clamp(260px,34vw,360px)}
.concept-card .ph{position:absolute;inset:0}
.concept-card .ph::after{color:#cfc8ba}
.concept-card .cc-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(1.2rem,3vw,2rem);
  background:linear-gradient(to top,rgba(43,43,43,.62),rgba(43,43,43,.12) 70%,transparent);color:#fff}
.concept-card .cc-en{font-family:var(--font-latin);letter-spacing:.16em;font-size:.72rem;opacity:.9}
.concept-card .cc-ja{font-family:var(--font-serif);font-size:clamp(1.3rem,2.4vw,1.8rem);margin:.2rem 0 .3rem}
.concept-card .cc-tag{font-size:.85rem;opacity:.92}
.concept-card .cc-count{font-family:var(--font-latin);letter-spacing:.1em;font-size:.72rem;opacity:.85;margin-top:.6rem}
.concept-card .cc-go{display:inline-block;margin-top:.9rem;font-family:var(--font-latin);letter-spacing:.12em;font-size:.78rem;
  border-bottom:1px solid currentColor;padding-bottom:.15em}
.concept-card .thumb-zoom{position:absolute;inset:0;transition:transform .6s ease}
.concept-card:hover .thumb-zoom{transform:scale(1.04)}

/* ---------- tabs (detail) ---------- */
.tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--c-line);position:sticky;top:var(--header-h);background:#fff;z-index:30;overflow-x:auto}
.tabs button{padding:1rem .2rem;font-size:.85rem;letter-spacing:.1em;color:var(--c-text-weak);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.active{color:var(--c-text);border-color:var(--c-accent)}
.spec-table th{width:38%;text-align:left;color:var(--c-text-weak);font-weight:400;padding:.8rem 0;border-bottom:1px solid var(--c-line);vertical-align:top}
.spec-table td{padding:.8rem 0;border-bottom:1px solid var(--c-line)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:768px){.gallery{grid-template-columns:repeat(3,1fr)}}
.booking-box{border:1px solid var(--c-line);border-radius:0;padding:1.6rem;background:var(--c-bg-sub)}

/* ---------- accordion (faq) ---------- */
.acc{border-top:1px solid var(--c-line)}
.acc-item{border-bottom:1px solid var(--c-line)}
.acc-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;text-align:left;padding:1.3rem 0;font-size:1rem}
.acc-q .ic{flex:0 0 auto;width:18px;height:18px;position:relative}
.acc-q .ic::before,.acc-q .ic::after{content:"";position:absolute;background:var(--c-text);transition:.3s}
.acc-q .ic::before{top:8px;left:0;width:18px;height:1.5px}
.acc-q .ic::after{top:0;left:8px;width:1.5px;height:18px}
.acc-item.open .ic::after{transform:rotate(90deg);opacity:0}
.acc-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc-a .inner{padding:0 0 1.3rem;color:var(--c-text-weak)}

/* ---------- split / feature ---------- */
.split{display:grid;gap:2rem;align-items:center}
@media(min-width:768px){.split{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}.split.rev>.media{order:2}}

/* ---------- footer（黒背景・白文字） ---------- */
.site-footer{background:#1a1a1a;color:#fff;border-top:1px solid rgba(255,255,255,.12);padding-block:var(--space-8) var(--space-4);margin-top:0}
.site-footer .cols{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:768px){.site-footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer .brand{color:#fff}
.site-footer .cap{color:rgba(255,255,255,.7)}
.site-footer a{color:#fff}
.site-footer a:hover{opacity:.6}
.site-footer .fnav{display:flex;flex-direction:column;gap:.6rem;font-size:.85rem}
.site-footer .sns{display:flex;gap:1.1rem;align-items:center}
.site-footer .sns a{display:inline-flex;width:20px;height:20px;color:#fff;transition:opacity .2s}
.site-footer .sns a:hover{opacity:.6}
.site-footer .sns svg{width:100%;height:100%;fill:currentColor;display:block}
.copyright{margin-top:var(--space-6);font-family:var(--font-latin);letter-spacing:.1em;font-size:.7rem;color:rgba(255,255,255,.6)}

/* ---------- 右端の縦型「宿泊施設」タブ（全デバイス固定・カレンダーアイコン上） ---------- */
.reserve-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;background:var(--c-cta);color:#fff;
  padding:.9rem .58rem 1.05rem;border-radius:0;box-shadow:-2px 3px 14px rgba(0,0,0,.2);transition:background .25s}
.reserve-tab:hover{background:var(--c-cta-deep)}
.reserve-tab .rt-ic{width:20px;height:20px;display:block}
.reserve-tab .rt-txt{writing-mode:vertical-rl;text-orientation:upright;
  letter-spacing:.3em;font-family:var(--font-serif);font-size:.95rem;line-height:1}
/* reserve-tab は v=49 で廃止（main.js で非挿入）。CSSは未使用として残置 */

/* ---------- お気に入り（ハート） ---------- */
/* 一覧カードの♥（カード右上に絶対配置） */
.facility-card{position:relative}
.fav-btn{position:absolute;top:.7rem;right:.7rem;z-index:3;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.85);color:var(--c-text);border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 8px rgba(40,44,36,.18);backdrop-filter:saturate(120%) blur(2px);transition:.2s}
.fav-btn:hover{background:#fff;transform:scale(1.06)}
.fav-btn .fav-ic{width:20px;height:20px;display:block}
.fav-btn[aria-pressed="true"]{color:var(--c-cta)}
/* 詳細ページの名前横の大きめ♥ */
.fav-btn-lg{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  margin-left:.6rem;width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:var(--c-bg-sub);color:var(--c-text);border:1px solid var(--c-line);transition:.2s}
.fav-btn-lg:hover{transform:scale(1.06)}
.fav-btn-lg .fav-ic{width:23px;height:23px;display:block}
.fav-btn-lg[aria-pressed="true"]{color:var(--c-cta);border-color:var(--c-cta)}
/* STAYのお気に入りトグル（チップ） */
.fav-chip .fav-ic{width:14px;height:14px;vertical-align:-2px;margin-right:.3em}
.chip.fav-chip[aria-pressed="true"],.chip.fav-chip.active{background:var(--c-cta);color:#fff;border-color:var(--c-cta)}
.chip.fav-chip[aria-pressed="true"] .fav-ic{fill:currentColor}
/* 検索枠右上のツール（お気に入り／条件をクリア） */
.search-tools{display:flex;justify-content:flex-end;gap:.6rem;margin-bottom:.8rem}

/* ---------- forms ---------- */
.form{display:grid;gap:1.2rem;max-width:560px;margin-inline:auto}
.form label{font-family:var(--font-sans);font-size:.78rem;color:var(--c-text-weak);display:block;margin-bottom:.35rem}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--c-line);padding:.8rem;border-radius:var(--radius);background:#fff;font:inherit;color:var(--c-text)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--c-accent)}
.form textarea{resize:vertical}

/* v78: ロゴを左に寄せる（余白は最小限残す） */
.site-header .container{padding-left:clamp(6px,0.8vw,12px);padding-right:0}