@charset "UTF-8";

/* =========================================================
   徒然庵 博多川 — Teaser
   Design: Figma「徒然庵_デザイン」/ Teaser_PC_v2・Teaser_SP_v1
   PCレイアウト: 1100px 以上 / SPレイアウト: 1099px 以下
   ========================================================= */

:root{
  --bg:            #13131b;
  --bg-info:       #1e1e2c;
  --bg-footer:     #141425;
  --accent:        #3a305f;
  --accent-dot:    #4a406f;

  --text:          #ffffff;
  --text-mute:     rgba(255,255,255,.6);
  --rule:          rgba(255,255,255,.6);

  --container:     1280px;
  --gutter:        clamp(24px, 5.55vw, 80px);

  --font:          "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --glow:          0 0 5px var(--bg), 0 0 10px var(--bg), 0 0 10px var(--bg);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
h1,h2,p,figure{ margin:0; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
hr{ border:0; margin:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 改行の出し分け */
.only-pc{ display:inline; }
.only-sp{ display:none; }

/* ---------- 改行の品質 ----------
   text-wrap:pretty … 最終行が一文字だけにならないよう改行位置を選ぶ
                      （対応ブラウザのみ。非対応でも無害）
   .wb … この中では改行しない「文節」の印。inline-block なので
         行に収まらないときは文節ごと次の行へ送られる */
/*p, li, dd{ text-wrap:pretty; }*/
.wb{ display:inline-block; font-style:normal; }

/* ---------- scroll reveal ---------- */
.js-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.js-reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js-reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   共通パーツ
   ========================================================= */

/* 白枠のテキストリンク（同意書・Google Map など） */
.btn-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:36px;
  padding:0 14px;
  border:1px solid var(--text);
  font-size:14px;
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
  align-self:flex-start;
  transition:background-color .3s ease, color .3s ease;
}
.btn-line:hover{ background:var(--text); color:var(--bg); }
.btn-line__arrow{ width:6px; height:8px; flex:none; }
.btn-line:hover .btn-line__arrow{ filter:invert(1); }

.btn-line--sm{ height:30px; padding:0 10px; gap:8px; font-size:13px; letter-spacing:.04em; }

/* 塗りのCTA */
.btn-fill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:600px;
  max-width:100%;
  height:80px;
  background:var(--accent);
  font-size:20px;
  letter-spacing:.04em;
  text-shadow:0 0 20px rgba(0,0,0,.6);
  transition:background-color .3s ease;
}
.btn-fill:hover{ background:#473b74; }
.btn-fill__icon{ width:24px; height:24px; flex:none; }

/* 家紋の装飾レイヤー
   横方向は必ずセクション幅で切る（iOS15以前は overflow-x:clip が効かないため、
   body任せにせずここで止める）。縦は上下に大きく逃がして、
   家紋が隣のセクションへ滲み出す見え方を保つ。 */
.concept__deco,
.stay__deco,
.reserve__deco{
  position:absolute;
  left:0;
  right:0;
  top:-200px;
  bottom:-560px;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
/* ご予約は最後のセクションなので、下に伸ばしすぎるとページに余分な余白ができる */
.reserve__deco{ bottom:-200px; }

/* 家紋の装飾 */
.kamon{
  position:absolute;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}

/* 和柄テクスチャの敷き込み（コンセプト〜過ごし方） */
.textured{
  position:relative;
  background-image:
    linear-gradient(to top, var(--bg) 50%, rgba(19,19,27,0)),
    url("../img/pattern-shippou.png");
  background-size:100% 420px, 760px 425px;
  background-position:left bottom, left top;
  background-repeat:no-repeat, repeat;
}

/* =========================================================
   header
   ========================================================= */
.header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  height:100px;
  background:rgba(19,19,27,.85);
  backdrop-filter:blur(6px);
}
.header__inner{
  height:100%;
  padding-inline:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header__logo{ display:flex; flex-direction:column; gap:5px; }
.header__logo img{ width:202px; height:auto; }
/* 英語表記（2026-08-31 指示で小文字 tsurezurean hakatagawa に変更）。
   ロゴSVGから英字行を外し、テキストとして持つ（次の変更が1行で済むように） */
.header__logo-en{
  font-size:10px;
  letter-spacing:.32em;
  line-height:1;
  color:var(--text);
  white-space:nowrap;
}
.header__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:160px;
  height:50px;
  background:var(--accent);
  font-size:18px;
  letter-spacing:.08em;
  transition:background-color .3s ease;
}
.header__cta:hover{ background:#473b74; }

/* =========================================================
   MV
   ========================================================= */
.mv{
  position:relative;
  z-index:2;              /* 家紋の装飾を MV の下に隠す（Figma と同じ重ね順） */
  height:clamp(600px, 65.28vw, 940px);
  overflow:hidden;
  isolation:isolate;
}
/* z-index:0 で重なり順の境界にする。
   スライドに付ける z-index（フェードの重ね順）がこの箱の中で完結し、
   上に載るスクリム・ロゴ・テキストを追い越さなくなる。 */
.mv__stage{ position:absolute; inset:0; z-index:0; isolation:isolate; }
.mv__slide{
  position:absolute;
  inset:0;
  background-color:var(--bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.2s ease;
}
/* 本番写真（2026-08-31 支給）。PC=横位置、767px以下は下のメディアクエリでSP=縦位置に切り替え。
   ※ url() をインラインの custom property に書くと、ブラウザがCSSファイル基準で
      解決してパスがずれるため、必ずここ（CSS側）で指定すること。 */
.mv__slide--1{ background-image:url("../img/mv01-pc.jpg"); }
.mv__slide--2{ background-image:url("../img/mv02-pc.jpg"); }
.mv__slide--3{ background-image:url("../img/mv03-pc.jpg"); }
.mv__slide--4{ background-image:url("../img/mv04-pc.jpg"); }
.mv__slide--5{ background-image:url("../img/mv05-pc.jpg"); }
.mv__slide--6{ background-image:url("../img/mv06-pc.jpg"); }
.mv__slide.is-active{ opacity:1; }
.mv__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.42); }

.mv__logo{
  position:absolute;
  left:50%;
  top:35.74%;
  transform:translateX(-50%);
  height:29.06%;
  margin:0;
  display:flex;
  align-items:flex-end;
  gap:31px;
}
.mv__logo-name{ height:100%; width:auto; }
.mv__logo-place{ height:46.32%; width:auto; }

.mv__open{
  position:absolute;
  left:50%;
  top:68.09%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:160px;
  height:36px;
  border:1px solid var(--text);
  box-shadow:0 0 20px #000;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  text-shadow:0 0 20px rgba(0,0,0,.6);
}

/* Figma どおり、KV（FV）の一番下に揃える。
   dotNav = ドット12px＋間20px＋線80px＝112px で、下端がFV下端に一致する。 */
.mv__nav{
  position:absolute;
  left:50%;
  top:auto;
  bottom:0;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.mv__dots{ display:flex; align-items:center; gap:10px; }
.mv__dot{
  width:12px;
  height:12px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  cursor:pointer;
  transition:background-color .3s ease;
}
.mv__dot.is-active{
  background:var(--accent-dot);
  border:2px solid rgba(255,255,255,.6);
}
.mv__line{
  width:1px;
  height:80px;
  background:rgba(255,255,255,.45);
  /* 写真の明るい部分に重なっても線と光が沈まないよう、影で縁取る */
  box-shadow:0 0 6px rgba(0,0,0,.7);
}

/* =========================================================
   concept
   ========================================================= */
.concept{
  position:relative;
  padding:140px 0 160px;
}
.kamon--c1{ width:14.58%; left:0;     top:62px; }
.kamon--c2{ width:32.08%; left:0;     top:774px; }
.kamon--c3{ width:41.94%; right:0;    top:188px; }

.concept__inner{
  position:relative;
  z-index:1;
  writing-mode:vertical-rl;
  /* 一番長い列「徒然庵博多川では、三つの過ごし方をご用意いたしました」(26字)が収まる高さ */
  height:600px;
  width:max-content;
  /* 縦組みでは margin-inline が上下に効くので物理プロパティで中央寄せする */
  margin-left:auto;
  margin-right:auto;
  text-shadow:var(--glow);
}
.concept__title{
  font-size:40px;
  font-weight:700;
  letter-spacing:.2em;
  line-height:1.4;
  margin-block-end:104px;
}
.concept__body{ font-size:18px; letter-spacing:.2em; line-height:2; }
/* 段落と段落のあいだに、Figma と同じ「空の列」を1本ぶん挟む */
.concept__body p + p{ margin-block-start:36px; }
.concept__body p.is-continued{ margin-block-start:0; }

/* =========================================================
   contents（過ごし方）
   ========================================================= */
.stay{
  position:relative;
  padding-bottom:157px;
}
.kamon--s1{ width:55.56%; left:4.31%; top:901px; }

.stay .container{ position:relative; z-index:1; }

.stay__head{
  position:absolute;
  top:6px;
  right:var(--gutter);
  width:450px;
  max-width:100%;
  text-align:right;
}
.stay__title{
  font-size:40px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.15;
}
.stay__lead{
  margin-top:40px;
  font-size:18px;
  line-height:28px;
  letter-spacing:.04em;
}

.stay__grid{
  margin-top:-2px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:70px;
}
.card{ position:relative; }
/* ラベル（つどう 等）は右隣へ張り出すので、DOMが先のカードを上に置く。
   出現アニメーション中はカード自体が transform を持ち重なり順の文脈になるため、
   これを明示しないと後のカードが前のカードのラベルを覆う瞬間ができる。 */
.card--1{ z-index:3; }
.card--2{ margin-top:92px; z-index:2; }
.card--3{ margin-top:192px; z-index:1; }

.card__label{
  position:absolute;
  top:0;
  left:94.2%;
  z-index:2;   /* 文字は常に写真の上。この重なりは崩さないこと */
  display:flex;
  gap:6px;
  white-space:nowrap;
}
.card__label-ja{
  writing-mode:vertical-rl;
  font-size:40px;
  font-weight:700;
  letter-spacing:.2em;
  line-height:1.2;
  text-shadow:0 0 20px var(--bg), 0 0 20px rgba(0,0,0,.4);
}
.card__label-en{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:9px;
}
.card__label-rule{
  width:1px;
  height:var(--rule-h, 84px);
  background:rgba(255,255,255,.6);
}
.card__label-romaji{
  writing-mode:vertical-rl;
  text-orientation:sideways;
  font-size:12px;
  letter-spacing:.14em;
  line-height:1;
  text-shadow:0 0 20px rgba(0,0,0,.6);
}

.card__body{
  margin-top:72px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:34px;
}
.card--1 .card__body{ margin-top:64px; }
.card__img{
  position:relative;
  z-index:0;   /* ホバー時の transform（拡大）を写真の層に封じ込め、ラベルを追い越させない */
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
}
.card__img img{ width:100%; height:100%; object-fit:cover; }
.card__text{
  align-self:stretch;
  font-size:16px;
  line-height:28px;
  letter-spacing:.04em;
}
.card__rooms{
  align-self:stretch;
  font-size:14px;
  line-height:24px;
  letter-spacing:.04em;
  color:var(--text-mute);
}
.card__note{ display:inline-block; line-height:34px; }

/* =========================================================
   info（アクセス）
   ========================================================= */
.info{
  position:relative;
  z-index:1;
  background:var(--bg-info);
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:600px;
}
.info__map{ position:relative; overflow:hidden; }
.info__map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.info__body{ padding:60px 80px; }
.info__title{
  font-size:24px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.4;
}
.info__text{
  margin-top:30px;
  font-size:16px;
  line-height:28px;
  letter-spacing:.04em;
}
/* 住所下の交通案内（2026-08-31 追加。住所より一段小さく） */
.info__notes{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  font-size:14px;
  line-height:26px;
  letter-spacing:.04em;
}
.info__notes-aster{ color:var(--text-mute); }

.info__block .btn-line{ margin-top:30px; }
.info__rule{
  margin:40px 0;
  border-top:1px dashed rgba(255,255,255,.5);
}
.info__figure-btn{
  display:block;
  position:relative;
  margin-top:40px;
  padding:0;
  border:0;
  background:none;
  width:100%;
  cursor:zoom-in;
}
.info__figure{
  width:100%;
  height:auto;
  background:#fff;   /* 図版は白地。読み込み中も枠が沈まないように */
  transition:opacity .3s ease;
}
.info__figure-btn:hover .info__figure{ opacity:.92; }
.info__figure-hint{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:4px 10px;
  background:rgba(19,19,27,.72);
  color:#fff;
  font-family:var(--font);
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.4;
  pointer-events:none;
}

/* ---- 図版の拡大表示（<dialog>） ---- */
.zoom{
  padding:0;
  border:0;
  background:transparent;
  max-width:min(1200px, 92vw);
  max-height:92vh;
  overflow:visible;
}
.zoom::backdrop{
  background:rgba(10,10,16,.82);
  backdrop-filter:blur(2px);
}
.zoom__img{
  display:block;
  max-width:min(1200px, 92vw);
  max-height:88vh;
  width:auto;
  height:auto;
  background:#fff;
  cursor:zoom-out;
}
.zoom__close{
  position:absolute;
  right:0;
  top:-44px;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(255,255,255,.7);
  background:transparent;
  color:#fff;
  font-family:var(--font);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background-color .3s ease;
}
.zoom__close:hover{ background:rgba(255,255,255,.15); }

/* =========================================================
   reservation
   ========================================================= */
/* 麻の葉テクスチャ（ご予約〜注記） */
.textured--asanoha{
  position:relative;
  background:url("../img/pattern-asanoha.png") left top repeat;
  background-size:720px 432px;
}

.reserve{
  position:relative;
  padding:140px 0 150px;
  text-align:center;
}
.kamon--r1{ width:19.31%; left:0;      top:97px; }
.kamon--r2{ width:13.89%; left:19.31%; top:359px; }
.kamon--r3{ width:30%;    right:0;     top:331px; }

.reserve__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-shadow:0 0 20px rgba(0,0,0,.6);
}
.reserve__en,
.reserve__title,
.reserve__lead{ align-self:stretch; }

.reserve__en{ font-size:12px; letter-spacing:.14em; line-height:1; }
.reserve__title{
  margin-top:30px;
  font-size:40px;
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.2;
}
.reserve__lead{
  margin-top:58px;
  font-size:16px;
  line-height:28px;
  letter-spacing:.04em;
}
.reserve .btn-fill{ margin-top:40px; }

/* =========================================================
   写真に関する注記
   ========================================================= */
.notes{
  position:relative;
  z-index:1;
  padding-bottom:60px;
}
.notes p{
  font-size:13px;
  line-height:24px;
  letter-spacing:.04em;
  color:var(--text-mute);
  text-align:center;
  text-shadow:0 0 20px rgba(0,0,0,.6);
}

/* =========================================================
   footer
   ========================================================= */
.footer{
  position:relative;
  z-index:1;
  background:var(--bg-footer);
  overflow:hidden;
}
.footer__texture{
  position:absolute;
  inset:0;
  background:url("../img/footer-texture.jpg") center/cover no-repeat;
  mix-blend-mode:overlay;
  opacity:.3;
  pointer-events:none;
}
.footer__inner{
  position:relative;
  z-index:1;
  min-height:200px;
  /* 追従バーは消えないので、フッターの下に逃げ場を作って重ならないようにする */
  padding-top:60px;
  padding-bottom:170px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
}
.footer__logo{ width:160px; height:auto; }
.footer__address{
  margin-top:20px;
  font-size:14px;
  line-height:28px;
  letter-spacing:.04em;
  text-shadow:0 0 20px rgba(0,0,0,.6);
}
.footer__links{ display:flex; gap:20px; }
.footer__corp{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  text-align:right;
}
.footer__corp a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  line-height:22px;
  letter-spacing:.04em;
  text-shadow:0 0 20px rgba(0,0,0,.6);
  transition:opacity .3s ease;
}
.footer__corp a:hover{ opacity:.7; }
.footer__corp img{ width:18px; height:18px; flex:none; }

/* =========================================================
   SP（〜1099px）
   ========================================================= */
@media (max-width:1099px){

  :root{ --gutter:30px; --container:560px; }

  .only-pc{ display:none; }
  .only-sp{ display:inline; }

  /* --- header --- */
  .header{ height:60px; }
  .header__inner{ padding-inline:20px; }
  .header__logo img{ width:113px; }
  .header__cta{ width:96px; height:30px; font-size:13px; }

  /* --- MV --- */
  /* タブレット〜狭いPCは Figma（390×500）の比率のまま。
     画面いっぱいのFVはスマホ（767px以下）だけに適用する */
  .mv{ height:clamp(440px, 128vw, 620px); }
  .mv__logo{ top:30.4%; height:27.32%; gap:16px; }
  .mv__open{ top:61.6%; }

  /* --- concept --- */
  .concept{ padding:100px 0 120px; }
  .concept__inner{
    writing-mode:horizontal-tb;
    height:auto;
    width:auto;
    max-width:calc(var(--container) + var(--gutter) * 2);
    margin-inline:auto;
    padding-inline:var(--gutter);
  }
  .concept__title{
    font-size:26px;
    letter-spacing:.2em;
    line-height:2.05;
    margin-block-end:0;
    margin-bottom:40px;
  }
  /* 行送り 30.2px（Figma の leading 1.3 ＋ テキスト間 12px）を line-height で再現 */
  .concept__body{ font-size:14px; letter-spacing:.1em; line-height:1.65; }
  .concept__body p + p,
  .concept__body p.is-continued{ margin-block-start:0; margin-top:25px; }

  .kamon--c1{ width:36%;  left:0;  right:auto; top:130px; }
  .kamon--c2{ width:79%;  left:0;  right:auto; top:680px; }
  .kamon--c3{ width:103%; left:auto; right:0;  top:140px; }

  /* --- contents --- */
  .stay{ padding-bottom:120px; }
  .kamon--s1{ width:100%; left:19%; right:auto; top:720px; }

  .stay__head{
    position:static;
    right:auto;
    width:100%;
    text-align:right;
  }
  .stay__title{ font-size:28px; letter-spacing:.04em; }
  .stay__lead{ margin-top:30px; font-size:14px; line-height:28px; }

  .stay__grid{
    margin-top:20px;
    grid-template-columns:1fr;
    gap:40px;
  }
  .card{ padding-left:20px; }
  .card--2,
  .card--3{ margin-top:0; }
  .card__label{ left:calc(100% - 43px); right:auto; }
  .card__body{ margin-top:62px; width:calc(100% - 20px); gap:30px; }
  .card--1 .card__body{ margin-top:62px; }
  .card__text{ font-size:14px; }
  .card__rooms{ font-size:13px; letter-spacing:.04em; }

  /* --- info --- */
  .info{
    display:block;
    min-height:0;
    padding-bottom:60px;
  }
  .info__map{ aspect-ratio:1/1; }
  .info__map iframe{ position:absolute; }
  .info__body{
    padding:40px var(--gutter) 0;
    max-width:calc(var(--container) + var(--gutter) * 2);
    margin-inline:auto;
  }
  .info__text{ font-size:14px; }

  /* --- reservation --- */
  .reserve{ padding:110px 0 120px; }
  .reserve__title{ font-size:34px; }
  .reserve__lead{ margin-top:40px; font-size:14px; }
  .btn-fill{ width:100%; height:70px; font-size:17px; gap:14px; }

  .kamon--r1{ width:48%; left:0;    right:auto; top:140px; }
  .kamon--r2{ width:26%; left:82%;  right:auto; top:330px; }
  .kamon--r3{ width:74%; left:auto; right:0;    top:450px; }

  /* --- footer --- */
  .footer__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0;
    padding-top:40px;
    padding-bottom:130px;
  }
  .footer__brand{ display:flex; flex-direction:column; align-items:center; }
  .footer__logo{ width:140px; }
  .footer__links{
    margin-top:50px;
    flex-direction:column;
    align-items:center;
  }
  .footer__corp{
    margin-top:50px;
    align-items:center;
    text-align:center;
  }
}

/* ---------- 狭幅の微調整（iPhone SE など） ---------- */
@media (max-width:359px){
  :root{ --gutter:20px; }
  /* 極端に狭いときは、ラベルのはみ出しをやめてカード内に収める */
  .card__label{ left:auto; right:0; }
  .concept__body{ font-size:13px; }
  .header__logo img{ width:100px; }
}

/* =========================================================
   予約検索バー（追従）
   晴レ吉（tripla）と同じく、FVを過ぎたら画面下部に固定表示する。
   tripla のウィジェットに差し替えても効くよう、
   器（.bookbar / .bookbar__inner）と中身（.bookbar__form）を分けている。
   ========================================================= */
/* 初期状態：ファーストビューの下端に重ねる（top は main.js が算出）。
   FVの下端が画面下まで来たら .is-fixed に切り替わり、以降は画面下部に追従する。
   切り替わる瞬間は両者の位置が一致するので、見た目は動かない。 */
.bookbar{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:90;
  display:flex;
  justify-content:center;
  padding-inline:20px;
  pointer-events:none;              /* バー本体以外はクリックを透過 */
  --bookbar-gap:20px;
}
.bookbar.is-fixed{
  position:fixed;
  top:auto;
  bottom:var(--bookbar-gap);
}

.bookbar__inner{
  pointer-events:auto;
  width:min(940px, 100%);
  background:#f9f8f8;
  border-radius:4px;
  box-shadow:0 8px 40px rgba(0,0,0,.45);
  color:var(--bg);
}

/* SPだけに出す開閉ボタン */
.bookbar__toggle{ display:none; }

/* ---- tripla が描画する検索バーを、この白いカードに馴染ませる ----
   クラス名の末尾ハッシュはビルドで変わりうるので前方一致で当てる */
.bookbar__inner{ padding:10px 20px 12px; }
.bookbar__inner [class*="search-widget-wrapper"]{
  position:static !important;
  transform:none !important;
  width:100% !important;
}
.bookbar__inner [class*="search-widget-search-container"]{
  display:flex !important;
  align-items:flex-end;
  gap:14px;
  width:100% !important;
  box-shadow:none !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;
}
.bookbar__inner [class*="search-widget-input-wrapper"]{
  display:flex !important;
  flex:1 1 auto;
  gap:14px;
  align-items:flex-end;
}
.bookbar__inner [class*="input-container-input-container"]{ margin:0 !important; flex:1 1 auto; }
.bookbar__inner [class*="search-widget-input"],
.bookbar__inner [class*="search-widget-select"]{
  font-family:var(--font) !important;
  min-height:46px;
  border-radius:0 !important;
  width:100% !important;
}
.bookbar__inner [class*="search-widget-button-wrapper"]{ flex:0 0 auto; }
.bookbar__inner button[type="submit"],
.bookbar__inner [class*="search-widget-button-wrapper"] button{
  background:var(--accent) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  min-height:46px;
  font-family:var(--font) !important;
  letter-spacing:.08em;
}

/* tripla が描画するまでバーは出さない（読み込み失敗時に白い空箱を出さないため） */
.bookbar__inner{ display:none; }
.bookbar.has-widget .bookbar__inner{ display:block; }

/* ---- SP：ボタン → タップでフォームを開く（晴レ吉と同じ挙動） ---- */
@media (max-width:767px){

  /* --- スマホだけ：開いた瞬間に画面全体がFVになるようにする ---
     svh は「ブラウザのUIが出ている状態の高さ」なので、読み込み直後に必ず1画面へ収まる。
     縦長になるぶん、ロゴは画面の高さではなく幅を基準にして大きくなりすぎないようにする。 */
  /* 下から順に「確実に効くもの」で上書きされるフォールバック連鎖。
     100vh → JSが実測した --svh → 100svh（対応環境では最終的にこれ） */
  .mv{ height:100vh; height:var(--svh, 100vh); height:100svh; }
  .mv__slide--1{ background-image:url("../img/mv01-sp.jpg"); }
  .mv__slide--2{ background-image:url("../img/mv02-sp.jpg"); }
  .mv__slide--3{ background-image:url("../img/mv03-sp.jpg"); }
  .mv__slide--4{ background-image:url("../img/mv04-sp.jpg"); }
  .mv__slide--5{ background-image:url("../img/mv05-sp.jpg"); }
  .mv__slide--6{ background-image:url("../img/mv06-sp.jpg"); }
  .mv__logo{ top:32%; height:35vw; }
  .mv__open{ top:calc(32% + 35vw + 20px); }
  /* ドット＋線はPCと同じく「画像の下面」にぴったり合わせる（bottom:0 を継承）。
     線の末尾は画面最下部の予約バーの裏に入る。
     --sp はJSがSPレイアウト適用中かを判定するための印 */
  .mv{ --sp:1; }

  .bookbar{ padding-inline:16px; --bookbar-gap:16px; }

  .bookbar__toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    height:56px;
    border:0;
    background:var(--accent);
    color:#fff;
    font-family:var(--font);
    font-size:16px;
    letter-spacing:.08em;
    cursor:pointer;
  }
  .bookbar__toggle img{ width:20px; height:20px; }

  /* SPは「空室を検索する」ボタンだけ見せ、タップで tripla のフォームを開く */
  .bookbar__inner{ padding:0; }
  #tripla-searching-app{ display:none; padding:16px; }
  .bookbar__inner.is-open #tripla-searching-app{ display:block; }
  .bookbar__inner [class*="search-widget-search-container"],
  .bookbar__inner [class*="search-widget-input-wrapper"]{
    flex-direction:column;
    align-items:stretch;
  }
}

/* =========================================================
   モーション
   和のトーンを壊さないよう、どれも「ゆっくり・小さく・一度だけ」。
   prefers-reduced-motion が有効な環境では最後のブロックで全部止める。
   ========================================================= */

/* --- 1. オープニング：MVの要素が順に立ち上がる --- */
.mv__logo,
.mv__open,
.mv__nav{
  opacity:0;
  transition:opacity 1.6s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
}
.mv__logo{ transform:translateX(-50%) translateY(18px); }
.mv__open,
.mv__nav{ transform:translateX(-50%) translateY(12px); }

.is-loaded .mv__logo,
.is-loaded .mv__open,
.is-loaded .mv__nav{
  opacity:1;
  transform:translateX(-50%);
}
.is-loaded .mv__logo{ transition-delay:.3s; }
.is-loaded .mv__open{ transition-delay:.9s; }
.is-loaded .mv__nav{ transition-delay:1.2s; }

/* --- 2. MVの写真をごくゆっくり寄せる（ケンバーンズ） --- */
@keyframes mv-kenburns{
  from{ transform:scale(1); }
  to{ transform:scale(1.06); }
}
/* 常時付与して表示中だけ進める（pause/resume）。
   is-active が外れた瞬間に transform が 1.0 へ巻き戻る「脈打ち」を防ぐ。
   alternate infinite なので寄り切ったらゆっくり戻り、動きが途切れない。 */
.mv__slide{
  animation:mv-kenburns 26s ease-in-out alternate infinite;
  animation-play-state:paused;
}
.mv__slide.is-active{
  animation-play-state:running;
}

/* --- 3. スクロールを促す、縦線を流れる光 --- */
.mv__line{
  position:relative;
  overflow:hidden;
}
.mv__line::after{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:40%;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  box-shadow:0 0 6px rgba(255,255,255,.9);
  animation:mv-line 2.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mv-line{
  0%   { transform:translateY(-100%); opacity:0; }
  30%  { opacity:1; }
  70%,
  100% { transform:translateY(280%); opacity:0; }
}

/* --- 4. 家紋を、スクロールよりわずかに遅らせて動かす --- */
.kamon{ will-change:transform; }

/* --- 5. コンセプトの縦組みを、読む順（右から左）に送る --- */
/*      遅延は main.js が付ける。見た目のルールは .js-reveal と共通 */

/* --- 6. 過ごし方カード：3枚を少しずらして出し、写真はホバーで静かに寄る --- */
.card--2{ transition-delay:.12s; }
.card--3{ transition-delay:.24s; }

.card__img img{
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover){
  .card:hover .card__img img{ transform:scale(1.05); }
}

@media (max-width:1099px){
  /* SPは1枚ずつ画面に入るので、ずらさない */
  .card--2,
  .card--3{ transition-delay:0s; }
}

@media (prefers-reduced-motion:reduce){
  .mv__logo,
  .mv__open,
  .mv__nav{ opacity:1; transform:translateX(-50%); transition:none; }
  .mv__slide{ animation:none; }
  .mv__line::after{ animation:none; opacity:0; }
  .card__img img{ transition:none; }
  .card:hover .card__img img{ transform:none; }
  .card--2,
  .card--3{ transition-delay:0s; }
}