/* ============================================================
   アオトマリ ／ トークン（工程3a 本承認・トークン v2）
   コンセプト「窓を開けると、海の風が入る1泊」→ ①抜け ②水平 ③数字で約束する ④軽いが甘くない
   ============================================================ */
:root{
  --bg:#f8fafd;        /* 地：朝の浜の白。写真の白（#e5e6e7）と並べて浮かないよう純白にしない */
  --face:#e8eefb;      /* 面：予約の帯・料金の表の地だけ。濃い帯で区切らない（同業の共通項） */
  --ink:#1c2a44;       /* 文字：濡れた岩の墨 */
  --sub:#56627a;       /* 副文字 */
  --sea:#2c5fd0;       /* 海（線）：水平線1本の色＝あしらい。写真の海より15°深い群青 */
  --line:#d5ddeb;      /* 細い罫：表・入力欄・メニューの区切り（海の線より弱い）。雛形の部品が使う名前 */
  --accent:#1b3a78;    /* 行動：予約ボタンだけ */
  --mark:#e2483d;      /* 目印：旗と地図の宿の位置だけ（文字には使わない） */

  --ja:"Murecho","Hiragino Sans","Noto Sans JP",sans-serif;
  --en:"Jost","Murecho",sans-serif;
  --dsp:"Jost","Murecho",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);

  --sec:168px;                     /* 節の間：本文の約10倍。線や面ではなく余白で区切る */
  --pad:calc(3.5vw + 22px);
  --wrap:max(1120px, min(1320px, 88vw));   /* 版面：参考の実測 1300〜1500px */
  --measure:28em;                          /* 行長：参考の本文カラム 400〜430px より少し広く */

  --mv-pin:300svh; --ov-from:0; --ov-to:0; --plx:4%; --sc-dim:1; --sc-sat:1;
}
/* ============================================================
   段階の一覧（工程3aで埋める）── 新しい部品は、ここの値だけから選ぶ
   ------------------------------------------------------------
   なぜこの欄があるか：部品ごとに「それっぽい値」を置くと、角丸12種・影13種・
   文字サイズ15種になる（別の制作見本で実際に発生）。下層を量産する前に決めておけば、
   誰が作っても揃う。検査（audit）の A4・D1・D2 はこの表と照らして見る。

   文字（本文以上は各幅6段まで。表を先に埋めてから CSS を書く）
            表札  節見出し 数字 リード 本文 補助
     PC     44    30      24   20    17   14     （≥1100）
     TB     38    28      22   19    17   14     （768〜1099）
     SP     30    22      20   17    16   13     （〜767）
     例）PC 96/52/36/26/20/17・TB 72/44/30/24/19/17・SP 56/34/28/22/18/17

   角丸（3つまで。丸いものも --r-f で描く＝50% を使わない）
   影  （1種。ずらし幅は通常と hover の2段階。色は面の意味で変えてよい）
   ============================================================ */
:root{
  --r-f:999px;     /* ピル・丸 */
  --r-l:10px;      /* 帯・写真の角（片側だけ丸める） */
  --r-s:2px;       /* 札・小さな写真 */
  --off:0px;       /* 影のずらし幅（影を使わないなら 0 のまま） */
  --off-h:0px;     /* hover のずらし幅 */
}
/* 幅で変えるなら、ここで上書きする（例：@media (min-width:768px){ :root{ --r-l:40px } }） */

@media (max-width:820px){
 :root{ --sec:104px; --pad:24px; --mv-pin:340svh; } }


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;fill:var(--ink);color:var(--ink)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.95 var(--ja);
  /* 和文の改行位置について。ここが全ページの土台です。

     keep-all ＝「印のあるところ以外では折らない」。
     その印（<wbr>）は build のときに文節の切れ目へ入れています（tools/wbr.mjs）。
     CSSの word-break:auto-phrase でも同じことができますが、
     Safari が未対応なので iOS だけ意味の途中で折れます。印なら全部同じになります。

     line-break:strict ＝ 禁則。行頭に「、」「。」「っ」などを来させません。
     overflow-wrap:break-word ＝ 最後の保険。1つの塊が1行に収まらないときだけ折ります。
       anywhere ではなく break-word なのが大事です。anywhere は「最小幅＝1文字」として
       箱の寸法計算にも効くので、収まるはずの行まで細かく折れてしまいます。 */
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}

/* 横はみ出しの定番の原因を、1か所で止めておきます。
   grid / flex の子は、既定では「中身の最小幅より小さくならない」決まりです。
   和文に keep-all を当てていると、句読点まで1つの塊なので、
   その最小幅が枠を押し広げて右に飛び出します。
   実際に「体験90分、赤ちゃん同伴で2,000円。」で4px飛び出し、
   CTA帯のある30ページ全部で出ていました。
   縮んでいい、と明示しておけば起きません。
   新しく grid を書くときも、この行があるので気にしなくて大丈夫です。 */
.gn__in>*,.blk--2>*,.rows__r>*,.lead2>*,.g3>*,.conf__r>*,
.ctab__in>*,.pn>*,.two>*,.two9>*,.ft__grid>*,.cta>*{min-width:0}
a{color:inherit;text-decoration:none}
.ct{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.lb{font-family:var(--en);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
    color:var(--sub);display:block;width:max-content;max-width:100%;margin-bottom:14px}
h1,h2,h3{font-weight:400;margin:0;letter-spacing:.02em}
h3{font-size:34px;line-height:1.6}

/* ============================================================
   セクション見出し ── 大英字 ＋ 小和文
   めおと 実測：字高46px（font-size66px相当）／行送り 字高の1.63倍／
                和文 15.75px・字間0.08em を英字1行目の右に、罫線を挟んで置く／
                イタリックは1ブロックに1語だけ。
   参考A 実測：英字 90px / lh 1.20 / weight 300、和文はゴシックで英字の下。
   → na-gi は「型は同じ、書体で外す」。書体は Cormorant Garamond 300。
     参考A の Melodrama より低コントラストで、並べても別物に見える。
   英字は合図であって情報ではない。意味は必ず小和文が持つ。
   ============================================================ */
.hd2{margin-bottom:36px}
.hd2__en{font-family:var(--dsp);font-size:70px;line-height:1.16;font-weight:300;
         letter-spacing:.012em;text-transform:uppercase;margin:0;max-width:none}
.hd2__en i{font-style:italic}
.hd2__row{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap}
.hd2__rule{display:block;width:96px;height:1px;background:var(--line);flex:0 0 auto;
           position:relative;top:-.42em}
/* 以前は white-space:nowrap でした。画面が狭いと、そのまま画面外へ出ます。
   実機で「教えるのは、6人。」が右端で切れました。
   横一列に置きたいのはPCだけなので、収まらなければ折り返します。 */
.hd2__ja{font-size:17px;letter-spacing:.08em;color:var(--ink)}
/* SPのサイズは FVの h1 と同値にそろえる。
   別の値にすると「本文以上の文字サイズが3〜7種」の判定が8種になって落ちる。 */
@media (max-width:820px){

  .hd2__en{font-size:52px;line-height:1.14}
  .hd2__row{gap:10px 16px}
  .hd2__rule{width:44px}
  .hd2__ja{flex:1 0 100%}   /* SPでは必ず自分の行に置く。横に並べようとして溢れさせない */
}

@media (max-width:575px){
 .hd2__en{font-size:34px} }

p{margin:0}
.bd{font-size:17px;color:var(--ink);max-width:34em}
.aux{font-size:14px;color:var(--sub);max-width:34em}

/* あしらい：微かな弧の水平線。animate しない（最初から引かれた状態） */
.arc{height:14px;margin-bottom:26px}
.arc svg{display:block;width:100%;height:14px}
.arc path{fill:none;stroke:var(--line);stroke-width:1.1}

.btn{display:inline-flex;align-items:center;gap:26px;min-height:56px;padding:14px 30px;
     border:1px solid var(--accent);color:var(--accent);font-size:17px;letter-spacing:.08em;
     transition:background-color .3s var(--ease),color .3s var(--ease)}
@media (hover:hover){
 .btn:hover{background:var(--accent);color:var(--bg)} }


/* ============================================================
   ヘッダー
   ============================================================ */
/* ヘッダーの帯は幅いっぱいの箱です。押せるのはロゴだけなので、
   帯そのものはタップを通します。
   （これが無いと、メニューを開いたとき帯が × ボタンの上に乗って、
     閉じるボタンが押せなくなります。実際に押せませんでした） */
.hd{position:fixed;top:0;left:0;width:100%;height:96px;z-index:40;
    display:flex;align-items:center;justify-content:center;color:#f7f5f0;
    pointer-events:none;transition:color .5s var(--ease),
                                   background-color .3s var(--ease),
                                   transform .38s var(--ease)}
.hd__logo{pointer-events:auto}
/* ヘッダーの直リンク（site.json の headerNav。v5.5）。無ければ空なので出さない。狭い画面では全画面メニューに任せる */
.hd__nav{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);display:flex;gap:22px;
         font-size:14px;letter-spacing:.06em;pointer-events:auto}
.hd__nav:empty{display:none}
@media (max-width:900px){ .hd__nav{display:none} }

/* 固定ヘッダーは、地色が無いと本文がそのまま裏を通って重なります。
   実機（iOS）で、ロゴと「ご予約」が本文の上に乗って読めませんでした。
   PCの検査でも同じことが起きていたのに、私が見落としていました。

   解き方は2つ組み合わせています。
   ・1画面目を過ぎたら地色を敷く（重なっても本文が透けない）
   ・下へスクロールしている間は隠す（読んでいる邪魔をしない）
   上に戻したときだけ出るので、ナビはいつでも1回のスワイプで届きます。 */
html.hd-solid .hd{background:var(--bg);color:var(--ink);
                  box-shadow:0 1px 0 var(--line)}
html.hd-hide .hd,
html.hd-hide .hd__cta,
html.hd-hide .menu{transform:translateY(calc(-100% - 16px))}
.hd__cta,.menu{transition:transform .38s var(--ease),
                          background-color .3s var(--ease),opacity .3s var(--ease)}
html.hd-solid .menu i{background:var(--ink);opacity:.55}
/* メニューを開いている間は必ず出す */
html.gn-open .hd,html.gn-open .menu{transform:none!important}
.hd.is-dark{color:var(--ink)}
/* 下層はFVが無いので、最初から濃い文字。JSに頼らない */
body.p .hd{color:var(--ink)}
body.p .menu i{background:var(--ink);opacity:.55}
.hd__logo{display:block;text-align:center;min-height:44px;padding-top:2px}
.hd__logo b{display:block;font-family:var(--en);font-size:27px;font-weight:400;letter-spacing:.26em}
.hd__logo small{display:block;font-family:var(--en);font-size:11px;letter-spacing:.4em;
                margin-top:5px;opacity:.72}
.menu{position:fixed;right:var(--pad);top:34px;z-index:41;width:44px;height:44px;
      background:none;border:0;padding:12px 0;cursor:pointer;color:inherit}
.menu i{display:block;height:1px;background:#f7f5f0;opacity:.85;margin-bottom:9px;
        transition:background-color .5s var(--ease)}
.menu.is-dark i{background:var(--ink);opacity:.55}
/* 予約ボタン（常時）。参考A 実測：固定ヘッダー内 162×42・角丸30px・14px。
   na-gi は角丸を使わないので角なし。塗りは --accent。地色に対し 5.58:1／面に対し 4.87:1 */
.hd__cta{position:fixed;z-index:41;right:calc(var(--pad) + 68px);top:26px;
         display:inline-flex;align-items:center;justify-content:center;
         min-height:44px;padding:0 22px;background:var(--accent);color:var(--bg);
         font-size:14px;letter-spacing:.1em;
         transition:background-color .3s var(--ease)}
@media (hover:hover){
 .hd__cta:hover{background:#3c525d} }

@media (max-width:820px){

  .hd{height:64px}.hd__logo b{font-size:19px}.hd__logo small{display:none}
  .menu{top:12px;width:44px}
  /* **SPでも右上のままにします。**予約ボタンは基本が右上です。
     以前は左に動かしていましたが、実機で「押しづらい」「PCと左右が逆」と指摘されました。
     ※案件によっては、SPではCTA自体を消す選択もあります。 */
  /* メニューのボタン（右端・幅44px）の左隣に置く。**以前は right:var(--pad) でメニューと同じ位置に重なっていた**
     （820px以下・ロゴの右端にも5px。100万を公開したまま数時間気づかなかった）。
     ボタンが右に2つ並ぶので、ロゴは中央ではなく左に寄せる。sp.mjs の「固定要素の重なり」が見ています（v5.1） */
  .hd{justify-content:flex-start;padding-left:var(--pad)}
  .hd__cta{right:calc(var(--pad) + 52px);left:auto;top:10px;min-height:44px;padding:0 15px;font-size:13px}
}


/* ============================================================
   グローバルナビ ── 全画面
   下層が21ページあります。右から板が出る形だと縦に長くなり、
   メニューの中でスクロールが要ります（＝下の項目に気づかれない）。
   全画面なら3列に組めて、PCでは1画面に収まります。

   幕は上から降ります（clip-path）。透明度だけで出すと、
   下の本文が透けている途中の状態が一瞬見えて汚くなります。
   ============================================================ */
/* 幕そのもの。ここは切り取る（clip-path）だけで、スクロールはしません。
   clip-path と overflow-y:auto を同じ要素に持たせると、
   iOS Safari で中身がスクロールしなくなりました（実機で下が切れました）。
   役割を2枚に分けています。 */
.gn{position:fixed;inset:0;z-index:60;background:var(--bg);
    visibility:hidden;clip-path:inset(0 0 100% 0);
    transition:clip-path .78s var(--ease),visibility 0s .78s;
    overflow:hidden}
.gn.is-open{visibility:visible;clip-path:inset(0 0 0 0);
            transition:clip-path .78s var(--ease),visibility 0s}
/* 中身を運ぶ箱。スクロールするのはこちらだけ。 */
.gn__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;
            -webkit-overflow-scrolling:touch;touch-action:pan-y;
            display:flex;align-items:flex-start}
/* 中央寄せは margin:auto で。収まるときだけ真ん中に来て、画面より高いときは上から並ぶ（v5.5）。
   align-items:center だと、低い画面（1000×548 など）で上が切れ、スクロールしても戻れなかった */
.gn__in{width:100%;max-width:var(--wrap);margin:auto;
        padding:96px var(--pad) 96px;
        display:grid;grid-template-columns:repeat(3,1fr) minmax(200px,232px);gap:0 36px}
.gn .lb{margin-bottom:20px}
.gn__list{list-style:none;margin:0;padding:0}
/* 1項目ずつ遅らせて出す。--i は build.mjs が振ります */
.gn__in .lb,.gn__list li>a,.gn__side>*{
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.gn.is-open .gn__in .lb,
.gn.is-open .gn__list li>a,
.gn.is-open .gn__side>*{opacity:1;transform:none;
  transition-delay:calc(.26s + var(--i,0) * .028s)}
/* 和文が主役。英字は寄り添うだけ（ブランドシート④の主従） */
.gn__a{display:flex;align-items:baseline;gap:13px;min-height:44px;
       font-size:22px;letter-spacing:.05em;line-height:1.5}
.gn__a em{font-family:var(--en);font-style:normal;font-size:11px;letter-spacing:.2em;
          color:var(--sub);text-transform:uppercase;white-space:nowrap}
.gn__a.is-here{color:var(--accent)}
.gn__a.is-here em{color:var(--accent)}
.gn__sub{list-style:none;margin:0 0 10px;padding:0 0 0 1px;border-left:1px solid var(--line)}
.gn__b{display:flex;align-items:center;min-height:44px;padding-left:16px;
       font-size:15px;letter-spacing:.05em;color:var(--sub)}
.gn__b.is-here{color:var(--accent)}
@media (hover:hover){
 .gn__a:hover,.gn__b:hover{color:var(--accent)} }

.gn__side .btn{width:100%;justify-content:space-between;gap:18px;white-space:nowrap}
.gn__side address{font-style:normal;font-size:14px;line-height:1.9;color:var(--sub);margin-top:26px}
.gn__side address a{display:inline-flex;align-items:center;min-height:44px}
.gn__pp{font-size:13px;color:var(--sub);margin:22px 0 0}
.gn__pp a{display:inline-flex;align-items:center;min-height:44px}

/* ハンバーガー → × 。開いている間はナビより上に出す */
.menu{z-index:70}
.menu i{transition:background-color .5s var(--ease),transform .5s var(--ease),opacity .3s}
.menu.is-open i{background:var(--ink);opacity:.72}
.menu.is-open i:first-child{transform:translateY(5px) rotate(45deg)}
.menu.is-open i:last-child{transform:translateY(-5px) rotate(-45deg)}
html.gn-open{overflow:hidden}
html.gn-open .hd__cta{opacity:0;pointer-events:none}
/* 幕が降りてもロゴは残す。全画面で何も無いところにバツだけ、は迷子になる */
html.gn-open .hd{z-index:71;color:var(--ink)}
.hd__cta{transition:background-color .3s var(--ease),opacity .3s var(--ease)}

@media (max-width:900px){

  .gn__in{grid-template-columns:1fr 1fr;gap:0 28px;padding-top:96px}
  .gn__side{grid-column:1 / -1;margin-top:36px}
}

@media (max-width:575px){

  /* iPhoneのホームバーの下に最後の項目が潜らないよう、下に安全域を足す */
  .gn__in{grid-template-columns:1fr;padding-top:88px;
          padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px))}
  .gn__col+.gn__col{margin-top:30px}
  .gn__a em{display:none}   /* 幅が足りない。和文が主役なので英字を落とす */
  .gn__side{margin-top:34px}
}


/* ============================================================
   下層ページの共通パーツ
   21ページを1枚ずつ組まないための土台。
   ここに無い形が要るときは、まずここに足してから使ってください。
   ============================================================ */
/* ここには以前 word-break:auto-phrase の指定がありました。
   いまは全ページ <wbr> で文節を切っているので要りません。
   （auto-phrase は keep-all を上書きするので、残すと逆に印を無視します）

   ※ 消すときはセレクタの行ごと消してください。
     宣言だけ消してセレクタを残すと、次のルールにつながって
     関係ない要素にまで当たります。実際、本文が全部 display:inline になり、
     max-width が効かなくなりました（1行58文字まで伸びていました）。 */

/* 本文の中のリンク。
   行の中に置くと高さが行送りぶん（約32px）しか無く、指で押せない。
   padding-block は行送りを変えずに当たり判定だけ広げられるので、それで44pxを作る。
   下線は border ではなく text-decoration。border だと padding のぶん下にずれる。 */
body.p .bd a,body.p .aux a,body.p .acc__a a,body.p .blk__cap a,
body.p .form__n a,body.p .g3 figcaption a,body.p .art a{display:inline;padding-block:13px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:var(--line)}
@media (hover:hover){

  body.p .bd a:hover,body.p .aux a:hover,body.p .acc__a a:hover{color:var(--accent);text-decoration-color:var(--accent)}
}


/* パンくず */
.crumb{padding:calc(64px + 34px) 0 0;font-size:13px;letter-spacing:.04em;color:var(--sub)}
.crumb a{display:inline-flex;align-items:center;min-height:44px}
.crumb i{font-style:normal;margin:0 8px;opacity:.55}
.crumb span{color:var(--ink)}
@media (hover:hover){
 .crumb a:hover{color:var(--accent)} }


/* ページ見出し。トップの .hd2 をそのまま使う＝サイト内で組み方を揃える */
.ph{padding:44px 0 0}
.ph .hd2{margin-bottom:0}
.ph__lead{margin-top:34px}
@media (max-width:820px){
 .ph{padding-top:28px} }


/* 本文ブロック。1カラムと、本文＋図版の2カラム。この2つだけ */
.blk{padding:var(--sec) 0 0}
.blk__h{margin-bottom:22px}
.blk--2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--pad) * .9);align-items:start}
.blk--2.rev>*:first-child{order:2}
.blk__fig{margin:0}
.blk__fig .ph--slot{position:relative;overflow:hidden;background:var(--face)}
.blk__cap{margin-top:12px;font-size:14px;color:var(--sub)}
@media (max-width:820px){
 .blk--2{grid-template-columns:1fr;gap:26px} .blk--2.rev>*:first-child{order:0} }


/* 行リスト。クラス一覧・料金・FAQ で共用。罫線1本で区切るだけ */
.rows{margin:34px 0 0;border-top:1px solid var(--line)}
.rows__r{display:grid;grid-template-columns:minmax(190px,26%) 1fr auto;gap:26px;
         align-items:baseline;padding:26px 2px;border-bottom:1px solid var(--line)}
.rows__r>b{font-weight:400}
.rows__r .aux,.rows__r .bd{margin:0;max-width:38em}
.rows a.rows__r{min-height:44px}
@media (hover:hover){
 a.rows__r:hover b{color:var(--accent)} }

@media (max-width:820px){

  .rows__r{grid-template-columns:1fr;gap:6px;padding:20px 2px}
}


/* アコーディオン。<details> をそのまま使う。
   JSで開閉を書くと、キーボード操作とスクリーンリーダー対応を自分で持つことになる。
   ブラウザに任せれば、そこは最初から正しい。 */
.acc{margin:34px 0 0;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:flex-start;gap:20px;min-height:44px;
             padding:24px 2px;cursor:pointer;list-style:none;font-size:17px;line-height:1.9}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:0 0 auto;width:13px;height:13px;margin-left:auto;
                    margin-top:.62em;position:relative;
                    background:
                      linear-gradient(var(--sub),var(--sub)) center/13px 1px no-repeat,
                      linear-gradient(var(--sub),var(--sub)) center/1px 13px no-repeat;
                    transition:transform .4s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg);background:
                      linear-gradient(var(--accent),var(--accent)) center/13px 1px no-repeat,
                      linear-gradient(var(--accent),var(--accent)) center/1px 13px no-repeat}
.acc summary>b{font-weight:400}
.acc__q{font-family:var(--dsp);font-size:19px;line-height:1;color:var(--line);
        flex:0 0 auto;margin-top:.3em;letter-spacing:.04em}
.acc details[open] .acc__q{color:var(--accent)}
.acc__a{padding:0 2px 28px 52px}
.acc__a p{margin:0 0 12px}
.acc__a p:last-child{margin-bottom:0}
@media (hover:hover){
 .acc summary:hover{color:var(--accent)} }

@media (max-width:820px){
 .acc__a{padding-left:0} .acc summary{gap:14px} }


/* 短い線を頭に置くリスト。中黒や「・」より静かで、罫線のあしらいと揃う */
.dash{list-style:none;margin:16px 0 0;padding:0}
.dash li{font-size:17px;line-height:1.95;position:relative;padding-left:17px;max-width:34em}
.dash li+li{margin-top:4px}
.dash li::before{content:"";position:absolute;left:0;top:.92em;width:8px;height:1px;background:var(--accent)}
.dash--sub li::before{background:var(--line)}

/* クラス詳細の1枚目。正方形の写真を左、定義を右 */
.lead2{display:grid;grid-template-columns:minmax(0,42%) 1fr;gap:calc(var(--pad) * .9);
       align-items:center;margin-top:44px}
.lead2 .plx{aspect-ratio:1 / 1}
.lead2 .bd{max-width:26em}
@media (max-width:820px){
 .lead2{grid-template-columns:1fr;gap:26px;margin-top:30px} }


/* 行リストの時系列版。左の列に沿って1本の線を通すだけ。
   「順番があるもの」と「並んでいるだけのもの」を、部品を増やさずに区別する */
.rows--time{position:relative}
.rows--time::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line)}
.rows--time .rows__r{position:relative;padding-left:34px}
.rows--time .rows__r::before{content:"";position:absolute;left:2px;top:32px;width:7px;height:7px;
                             background:var(--bg);border:1px solid var(--sub)}
.rows--time .rows__r>b{font-family:var(--en);font-size:14px;letter-spacing:.08em;color:var(--sub)}
@media (max-width:820px){

  .rows--time .rows__r{padding-left:26px}
  .rows--time .rows__r::before{top:24px}
}


/* 3つ並べる。道順写真・声・インストラクターで共用 */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.g3 figure{margin:0}
.g3 .plx{aspect-ratio:3 / 2;margin-bottom:18px}
.g3 figcaption{font-size:14px;line-height:1.85;color:var(--sub)}
/* 声のように、キャプションが読みものになる場合は本文サイズにする。
   14pxのまま量が増えると、そこが「本文」と判定されて A1 で落ちます */
.g3--read figcaption{font-size:17px;line-height:1.95;color:var(--ink);max-width:30em}
.g3--read figcaption .aux{display:block;margin-top:10px}
.g3 figcaption b{display:block;font-weight:400;font-size:17px;color:var(--ink);margin-bottom:6px}
.g3 figcaption b em{font-style:normal;font-family:var(--dsp);font-size:19px;color:var(--line);margin-right:12px}
@media (max-width:820px){
 .g3{grid-template-columns:1fr;gap:30px;margin-top:30px} }


/* 一覧の3つ並べ（リンク版）。.g3 と同じ寸法で、中身がリンクになるだけ */
.g3__i{display:block}
.g3__i .plx{display:block;position:relative;overflow:hidden;aspect-ratio:4 / 5;margin-bottom:18px;background:var(--face)}
.g3__i .plx__i{display:block;position:absolute;inset:0}
.g3__t{display:block;font-size:14px;line-height:1.85;color:var(--sub)}
.g3__t b{display:block;font-weight:400;font-size:17px;color:var(--ink);margin-bottom:6px}
@media (hover:hover){
 .g3__i:hover .g3__t b{color:var(--accent)} }

.g3--6{grid-row-gap:56px}

/* 記事ページ。読みものなので、幅と行間だけを整える */
.art__meta{display:flex;gap:20px;align-items:baseline;font-size:14px;color:var(--sub);margin-bottom:18px}
.art__meta time{font-family:var(--en);letter-spacing:.08em}
.art__h{font-size:34px;line-height:1.6;font-weight:400;letter-spacing:.02em;max-width:24em;margin:0}
.art{max-width:34em}
.art p{margin:0 0 1.6em}
.art p:last-child{margin-bottom:0}
@media (max-width:820px){
 .art__h{font-size:30px} }


/* ------------------------------------------------------------
   型C ── フォーム
   入力→確認→完了。いまどこにいるかを、最初に出す。
   ------------------------------------------------------------ */
.steps{display:flex;gap:0;margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps li{flex:1;list-style:none;padding:18px 8px;text-align:center;font-size:14px;color:var(--sub);
          position:relative}
.steps li+li{border-left:1px solid var(--line)}
.steps li em{display:block;font-style:normal;font-family:var(--dsp);font-size:19px;line-height:1;
             margin-bottom:8px;color:var(--line)}
.steps li[aria-current]{color:var(--ink);background:var(--face)}
.steps li[aria-current] em{color:var(--accent)}

.form{margin-top:44px;max-width:760px}
.form__r{padding:28px 0;border-bottom:1px solid var(--line)}
.form__r:first-child{border-top:1px solid var(--line)}
.form__l{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;font-size:17px}
.form__l i{font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--accent);
           border:1px solid var(--accent);padding:2px 7px;line-height:1.6}
.form__n{font-size:17px;line-height:1.9;color:var(--sub);margin:0 0 14px;max-width:34em}
/* 色は必ず指定する。既定のままだと純黒になります */
.form input,.form select,.form textarea{color:var(--ink);accent-color:var(--accent)}
.form input[type=text],.form input[type=tel],.form input[type=email],
.form input[type=date],.form select,.form textarea{
  width:100%;max-width:520px;min-height:52px;padding:12px 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:0;
  font:inherit;font-size:17px;color:var(--ink);-webkit-appearance:none;appearance:none}
.form textarea{min-height:140px;line-height:1.9;resize:vertical}
/* option に色を指定しないと純黒のまま出ます（C2 に引っかかりました） */
.form option{color:var(--ink);background:var(--bg)}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),
                              linear-gradient(135deg,var(--sub) 50%,transparent 50%);
             background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
             background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  outline:1px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form__2{display:flex;flex-wrap:wrap;gap:12px}
.form__2>*{flex:1 1 200px;max-width:254px}
/* チェックとラジオ。
   ブラウザ既定のままだと、箱が17pxしかなく指で押せません（E3）。
   さらに input の color は既定が純黒で、C2 に引っかかります。
   なので input は透明にしてラベル全面に広げ、四角は span::before で自分で描きます。
   丸を使わないのは、円をFVの1箇所に封じるという方針に揃えるためです。 */
.form__c{display:flex;flex-wrap:wrap;gap:10px 26px}
.form__c label{position:relative;display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.form__c input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.form__c span{display:inline-flex;align-items:center;gap:12px;font-size:17px}
.form__c span::before{content:"";flex:0 0 auto;width:16px;height:16px;
                      border:1px solid var(--sub);background:var(--bg)}
.form__c input:checked+span::before{background:var(--accent);border-color:var(--accent)}
.form__c input:focus-visible+span::before{outline:1px solid var(--accent);outline-offset:2px}
.form__go{margin-top:44px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.form__go .aux{margin:0}

/* 確認画面。入力と同じ並びで、値だけを見せる */
.conf{margin-top:44px;max-width:760px;border-top:1px solid var(--line)}
.conf__r{display:grid;grid-template-columns:minmax(180px,26%) 1fr;gap:26px;
         padding:22px 2px;border-bottom:1px solid var(--line)}
.conf__r>b{font-weight:400;color:var(--sub);font-size:14px}
@media (max-width:820px){
 .conf__r{grid-template-columns:1fr;gap:6px} }


/* 完了画面 */
.done{margin-top:44px;padding:44px var(--pad);background:var(--face);max-width:760px}
.done h2{font-size:34px;line-height:1.6;font-weight:400;margin:0 0 18px}
@media (max-width:820px){
 .done h2{font-size:30px} }


/* CTA帯。全ページの末尾に同じものを置く */
.ctab{margin-top:var(--sec);padding:var(--sec) 0;background:var(--face)}
.ctab__in{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end}
.ctab h3{margin-top:8px;max-width:18em}
.ctab .aux{margin-top:16px}
@media (max-width:820px){
 .ctab__in{grid-template-columns:1fr;gap:28px;align-items:start} .ctab h3{font-size:30px} }


/* 前後ページ送り。クラス詳細4本とCMS記事で使う */
.pn{display:grid;grid-template-columns:1fr 1fr;
     border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--sec)}
/* 間の線は border で引く（v5.5）。1px の隙間＋地の色で線にすると、SP で縦に積んだときに audit H2「継ぎ目の隙間」に掛かる */
.pn>*+*{border-left:1px solid var(--line)}
.pn a,.pn>span{display:flex;align-items:center;min-height:96px;padding:20px var(--pad);background:var(--bg)}
.pn>*:nth-child(2){justify-content:flex-end;text-align:right}
.pn em{font-style:normal;font-family:var(--en);font-size:11px;letter-spacing:.2em;
       color:var(--sub);text-transform:uppercase;display:block;margin-bottom:8px}
@media (hover:hover){
 .pn a:hover{background:var(--face)} }

@media (max-width:575px){
 .pn{grid-template-columns:1fr} .pn>*+*{border-left:0;border-top:1px solid var(--line)} }


/* ============================================================
   画像スロット
   assets/img/ に決められたファイル名で置くだけで差し替わる。
   HTMLもCSSも触らない。ファイルが無いあいだは下のグレー枠と
   ファイル名がそのまま見える（alt="" なので壊れアイコンは出ない）。
   ============================================================ */
.slot{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
      position:absolute;inset:0;z-index:1}
/* 短い塊（「2,000円。」など）が行末で割れるのを防ぐためのもの。
   長い文に付けると SP で横スクロールが出ます（実測 538px / 画面375px）。 */
.nb{white-space:nowrap}
/* <wbr> は white-space:nowrap より強い。折り位置ごと消す */
.nb wbr{display:none}

/* ============================================================
   セクション
   ============================================================ */
/* 背景色は必ず指定する。FVの sticky 背景は margin-bottom:-100svh のぶん
   FVの終わりから100svh ぶん下まで箱が残るため、透明だと次のセクションに透ける
   （YURUMARU も .page-top__product に背景色と z-index:10 を入れて同じ処理をしている） */
.s{padding:var(--sec) 0;position:relative;overflow:clip;background:var(--bg)}   /* hidden にすると子孫の position:sticky が効かなくなる */
.s--face{background:var(--face)}
/* 地紋：対角に2枚、右下は180度回転。55% / 不透明度2段階（枠Eから採った規則）。
   絵柄は「上はうねりが残り、下へ行くほど平らになる水面」＝凪。あしらいの弧と同じ形。 */
/* 地紋は保留中（素材が入ってから判断）
.pat{position:absolute;width:55%;aspect-ratio:1;pointer-events:none;opacity:.30;
     background:url("./assets/pattern.svg") no-repeat center/contain;
     /* 端を溶かす。切り落とすと罫線用紙に見える */
     -webkit-mask-image:radial-gradient(115% 115% at 0% 0%,#000 26%,transparent 76%);
             mask-image:radial-gradient(115% 115% at 0% 0%,#000 26%,transparent 76%)}
.pat--tl{top:0;left:0}
.pat--br{right:0;bottom:0;transform:rotate(180deg)}
@media (max-width:820px){

  h2{font-size:30px}h3{font-size:24px}body{font-size:16px}.bd{font-size:16px}
}


/* ============================================================
   動きの語彙（2つだけ）
   ① 枠の中で画像が流れる（上の .mv__media / .plx）
   ② 10pxだけ上がって現れる
   ============================================================ */
html.js .up{opacity:0;transform:translate3d(0,10px,0)}
html.js .up.is-in{opacity:1;transform:translateZ(0)}
.up{transition:opacity .6s cubic-bezier(.25,.1,.25,1),
              transform .6s cubic-bezier(.25,.1,.25,1)}
html.js .stagger>*{opacity:0}
html.js .stagger.is-in>*{opacity:1}
.stagger>*{transition:opacity .4s cubic-bezier(.25,.1,.25,1)}
.stagger>*:nth-child(1){transition-delay:0ms}
.stagger>*:nth-child(2){transition-delay:60ms}
.stagger>*:nth-child(3){transition-delay:120ms}
.stagger>*:nth-child(4){transition-delay:180ms}
.stagger>*:nth-child(5){transition-delay:240ms}

/* 枠の中で画像が流れる（FV以外の節でも使う） */
.plx{overflow:hidden;position:relative}
.plx__i{position:absolute;inset:-7.5% 0;
        background:linear-gradient(160deg,#cfd2c9,#aab1a8);
        transform:translateY(var(--plx-y,0%));
        will-change:transform}
.plx__i{z-index:1}
/* 写真が入るまでの目印。絶対配置でも親の scrollWidth には効くので、
   幅を親で止めておきます（狭い画面で3pxはみ出して検査に出ました） */
.plx__lb{z-index:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;
         max-width:100%;overflow:hidden;text-overflow:ellipsis;
         font-family:var(--en);font-size:17px;letter-spacing:.28em;color:rgba(247,245,240,.55)}


/* 02のレイアウト */
.two{display:grid;grid-template-columns:5fr 7fr;gap:70px;align-items:start;margin-top:56px}
.two .plx{height:420px}
@media (max-width:820px){

  .two{grid-template-columns:1fr;gap:34px;margin-top:34px}
  .two .plx{height:240px}
}


/* ワイヤー表示 */
.wire-note{background:#4a4f4b;color:#ddd9cd;text-align:center;padding:16px 0;
           font-family:var(--ja);font-size:14px;letter-spacing:.14em}
.wire{opacity:.55}
.wire .wbox{margin-top:30px;text-align:center;background:repeating-linear-gradient(135deg,var(--face) 0 10px,var(--line) 10px 20px);
            display:flex;align-items:center;justify-content:center;
            font-family:var(--en);font-size:17px;letter-spacing:.2em;color:var(--sub);width:max-content;margin:auto}
.wire .wrow{display:flex;justify-content:space-between;align-items:baseline;max-width:1120px;
            padding:22px 2px;border-bottom:1px solid var(--line);font-size:22px}
.wire .wrow:first-of-type{border-top:1px solid var(--line);margin-top:30px}
.wire .wrow span{font-size:17px;color:var(--sub)}
.wscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:30px}
.wtrack{display:flex;gap:20px;width:max-content}
.wtrack i{flex:0 0 300px;height:400px;
          background:repeating-linear-gradient(135deg,var(--face) 0 10px,var(--line) 10px 20px)}
/* 絞り込みで外れたコマ。消すと表の形が崩れるので薄くするだけ */
.is-off{opacity:.22}

/* 05の後半（予約導線）。専用セクションは作らず、スケジュールの中に置く。
   ただし「表の続き」に見えると予約が沈むので、罫線1本と88pxで切ります。 */
.cta{margin-top:88px;padding-top:44px;border-top:1px solid var(--line);
     display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end}
.cta h3{margin-top:8px;max-width:18em}   /* サイズは指定しない。h3の34pxのまま（文字サイズを増やさないため） */
.cta .aux{margin-top:16px}

/* ---- 07 声 ---- */
.voice{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:50px}
.voice>div,.two9>div,.dir__grid>div,.two>div{min-width:0}
.voice .plx{aspect-ratio:4 / 3;margin-bottom:22px}
.voice .aux{margin-top:10px}

/* ---- 09 ジャーナル・お知らせ ---- */
.two9{display:grid;grid-template-columns:7fr 5fr;gap:70px;margin-top:10px}

/* ---- 10 体験 ---- */
.trial{text-align:center}
.trial .bd{margin:26px auto 0}
.btn--fill{background:var(--accent);color:var(--bg)}
@media (hover:hover){
 .btn--fill:hover{background:var(--ink);color:var(--bg)} }


/* ---- フッター ---- */
.ft{background:#4a4f4b;color:var(--face);padding:110px 0 40px;position:relative;overflow:clip}

/* ナビ3列＋情報1列。下層21ページを全部ここから辿れるようにした */
.ft__grid{display:grid;grid-template-columns:repeat(3,1fr) minmax(190px,240px);
          gap:44px;position:relative;z-index:2}
.ft__nav{display:flex;flex-direction:column}
.ft__nav a{display:flex;align-items:center;min-height:44px;font-size:17px}
.ft__info .ft__logo{margin-bottom:26px}
.ft__logo b{display:block;font-family:var(--en);font-size:22px;font-weight:400;letter-spacing:.26em}
.ft__logo small{display:block;font-family:var(--en);font-size:11px;letter-spacing:.4em;
                color:var(--line);margin-top:6px}
.ft address{font-style:normal;font-size:17px;line-height:2}
.ft address a{display:inline-flex;align-items:center;min-height:44px}
.ft__bottom{display:flex;justify-content:space-between;align-items:center;margin-top:90px;
            padding-top:20px;border-top:1px solid rgba(210,204,190,.3);font-size:14px;
            position:relative;z-index:2}
.ft__bottom a{display:flex;align-items:center;min-height:44px}
@media (hover:hover){
 .ft__nav a:hover,.ft__bottom a:hover{color:var(--line)} }


@media (max-width:820px){

  .dir__grid{grid-template-columns:1fr;gap:34px}   /* 20pxにすると文字サイズの種類が8種になるので22pxのまま */
  .cta{grid-template-columns:1fr;gap:28px;align-items:start;margin-top:60px}
  .cta h3{font-size:30px}
  .voice{grid-template-columns:1fr;gap:34px;margin-top:34px}
  .voice .plx{margin-bottom:16px}

  .two9{grid-template-columns:1fr;gap:50px}

  .ft{padding:64px 0 28px}
  /* 2列にすると1列159px。「赤ちゃんと一緒に来る」は170pxあって収まらず、
     2行に折れて最後の行が「来る」だけになりました（孤立行）。
     ページ名は途中で折らないほうが読みやすいので、SPは1列にしています。 */
  .ft__grid{grid-template-columns:1fr;gap:30px}
  .ft__info{grid-column:1 / -1;margin-top:16px}
  .ft__bottom{margin-top:50px}
}


/* ---- 30万（plan-none）：雛形の部品の演出も止める（v5.1） ----
   案件の CSS で打ち消しても、**雛形の部品（全画面メニューの幕が降りる・項目が順に出る）が残る。**
   メニューを開くこと自体は機能なので残し、幕と順番だけを止める。30万は hover だけ（references/scope.md） */
.plan-none .gn,.plan-none .gn *{transition:none!important}
/* 雛形の出現（.up / .stagger）も30万は最初から出す。scope.md の例を雛形に持たせた。
   案件ごとに書いていたが、書き忘れると motion.mjs で落ちる */
html.js .plan-none :is(.up,.stagger>*){opacity:1;transform:none;transition:none}


@media (prefers-reduced-motion:reduce){

  html.js .up,html.js .stagger>*{opacity:1!important;transform:none!important}
  *{transition-duration:.001s!important;animation-duration:.001s!important}
}


/* ---- 821〜1100px の帯（タブレット横・小さいノートPC） ----
   ここは長らく「PCと同じ」で通していましたが、実測すると2か所はみ出していました。
   ・FVの見出し76pxが版面からはみ出す（900pxで 853px > 枠793px）
   ・フッターの4列が細くなりすぎて「インストラクター」が切れる（834pxで 136px > 枠120px） */
@media (min-width:821px) and (max-width:1100px){

  .ft__grid{grid-template-columns:1fr 1fr;gap:30px 26px}
}


/* スケジュールのコマから来たときの1行。直接来た人には出ません */
.form__from{margin:0 0 26px;padding:14px 18px;background:var(--face);
            border-left:2px solid var(--accent);font-size:14px;color:var(--sub)}

/* 架空である旨の注記。制作見本のフッターに必ず1つ出ます（tools/build.mjs の FICTION_NOTE）。
   小さくてよいが、読める大きさは保つ。12px を下回らせない。 */
.ft__note{margin-top:18px;font-size:12px;line-height:1.8;max-width:64ch}
/* opacity で薄くしない（v5.5）。.62 でコントラスト 2.85 になり、Lighthouse で減点された。薄くしたいときは色を変えて測る */

/* 文節で折り返し位置を決めるための箱。
   FV・キャッチ・CTAの見出しは、**文節を .ib で括って改行位置を設計します。**

   <h1><span class="ib">日々の不調から、</span><span class="ib">これからの健康まで。</span></h1>

   BudouX の <wbr> は「どこで折れてよいか」を示すだけで、**折れる場所は画面幅任せ**です。
   見出しは成り行きで折れると意味が切れるので、ここだけは設計します。

   **注意：<wbr> は nowrap の中でも折れますが、inline-block の中では折れません。**
   だから .nw（nowrap）ではなく .ib を標準にします。.nw は補助です。 */
.ib{display:inline-block}

/* 本文カラムの行長。版面（.ct）の中で、読む列だけを絞ります。 */
.measure{max-width:var(--measure)}


/* ============================================================
   アオトマリ（工程3c）── 雛形の部品をこのサイトの形に置き換える
   見出しの形式H：節見出し＝横組み・体言止め・句点なし＋水平線＋数字ラベル
   動きの主語彙「風が通る」：線が伸びる／横に流れる／霞がほどける／旗が漂う
   ============================================================ */
body{font-weight:400;letter-spacing:.06em;line-height:1.9}
h1,h2,h3{font-weight:200;letter-spacing:.12em}
.num{font-family:var(--en);font-weight:300;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.bd{max-width:var(--measure)}
.aux{margin-top:18px}
.lead{font-size:20px;line-height:1.9;max-width:var(--measure);margin-top:28px}
.sec{padding:var(--sec) 0 0}

/* 節見出し（形式H） */
.h2{display:flex;align-items:center;gap:18px;font-size:40px;font-weight:400;letter-spacing:.1em;line-height:1.45;margin:0}
.h2__t{flex:0 1 auto}
@media (min-width:821px){ .h2__t{white-space:nowrap} .h2__t wbr{display:none} }
.h2__l{flex:1 1 40px;height:1px;background:var(--sea);transform-origin:left;transform:scaleX(1)}
.h2__n{flex:0 0 auto;white-space:nowrap;font-family:var(--en);font-weight:300;font-size:14px;letter-spacing:.06em;color:var(--sea)}
html.js .ln .h2__l{transform:scaleX(0);transition:transform 1.2s var(--ease)}
html.js .ln.is-in .h2__l{transform:scaleX(1)}
h3{font-size:20px;line-height:1.6;letter-spacing:.1em}

/* 出現（静かな版）：20px・0.9秒・1回。線が伸びたあとに上がる */
html.js .up{opacity:0;transform:translate3d(0,20px,0)}
.up{transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s}

/* ロゴのしるし：水平線1本と赤い旗 */
.mk{width:44px;height:22px;flex:0 0 auto;overflow:visible}
.mk line{stroke:var(--sea);stroke-width:1}
.mk .mk__p{stroke:var(--ink)}
.mk .mk__f{fill:var(--mark)}

/* ヘッダー：100万は1画面目で隠し、FVを抜けると降りる */
.hd{color:var(--ink);height:84px;justify-content:flex-start;padding-left:var(--pad)}
.hd__logo{display:flex;align-items:center;gap:12px;text-align:left;min-height:44px;padding-top:0}
.hd__logo b{font-family:var(--ja);font-size:16px;font-weight:400;letter-spacing:.24em;line-height:1}
.hd__logo small{font-size:11px;letter-spacing:.28em;margin:0 0 1px;opacity:1;color:var(--sub)}
html.hd-solid .hd{background:rgba(248,250,253,.94);box-shadow:0 1px 0 var(--line)}
.menu{top:20px}
.menu i{background:var(--ink);opacity:.7}
.hd__cta{top:20px;background:var(--accent);color:var(--bg);border-radius:var(--r-f);padding:0 24px;font-size:14px;letter-spacing:.1em}
@media (hover:hover){ .hd__cta:hover{background:#244a95} }
body:not(.p) .hd,body:not(.p) .hd__cta,body:not(.p) .menu{transform:translateY(calc(-100% - 24px))}
html.hd-solid body:not(.p) .hd,html.hd-solid body:not(.p) .hd__cta,html.hd-solid body:not(.p) .menu{transform:none}
html.hd-solid.hd-hide body:not(.p) .hd,html.hd-solid.hd-hide body:not(.p) .hd__cta,html.hd-solid.hd-hide body:not(.p) .menu{transform:translateY(calc(-100% - 24px))}
html.gn-open body:not(.p) .hd,html.gn-open body:not(.p) .menu{transform:none!important}
@media (max-width:820px){
  .hd{height:64px}.hd__logo small{display:none}.menu{top:10px}.hd__cta{top:10px;padding:0 12px;font-size:12px;letter-spacing:.06em}
  .hd .mk{width:30px}.hd__logo{gap:8px}.hd__logo b{font-size:14px;letter-spacing:.14em}
}

/* ボタン：行動＝濃い群青のピル1種 */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:var(--r-f);
      background:var(--accent);color:var(--bg);font-size:15px;letter-spacing:.12em;transition:background-color .3s var(--ease)}
@media (hover:hover){ .pill:hover{background:#244a95} }
.btn{border-color:var(--accent);color:var(--accent);border-radius:var(--r-f)}

/* 全画面メニュー：地は白、区切りは細い罫。英字ラベルは使わない */
.gn{background:var(--bg)}
.gn .lb{font-family:var(--ja);text-transform:none;letter-spacing:.2em;font-size:13px;color:var(--sea)}
.gn__a{font-size:24px;font-weight:400;letter-spacing:.12em}
.gn__a em{display:none}

/* フッター：濃い帯にしない（同業の共通項）。面の色に水平線1本 */
.ft{background:var(--face);color:var(--ink);padding:96px 0 36px;border-top:1px solid var(--sea)}
.ft__logo b{font-family:var(--ja);font-size:17px;letter-spacing:.24em}
.ft__logo small{color:var(--sub)}
.ft__bottom{border-top:1px solid var(--line)}
.ft__note{color:var(--sub)}
@media (hover:hover){ .ft__nav a:hover,.ft__bottom a:hover{color:var(--sea)} }

/* 旗：水平線の上で「漂う」（#09 を限定：4px・7秒・旗だけ） */
.flag{position:absolute;width:1px;height:20px;background:var(--ink);z-index:3;animation:bob 7s ease-in-out infinite}
.flag::after{content:"";position:absolute;left:1px;top:0;border-left:13px solid var(--mark);border-top:5px solid transparent;border-bottom:5px solid transparent}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* #01 霞がほどける（オープニング・1回だけ） */
.haze{position:fixed;inset:0;z-index:80;background:var(--bg);pointer-events:none;transition:opacity 3.2s cubic-bezier(.445,.05,.55,.95)}
html.is-ready .haze{opacity:0;visibility:hidden;transition:opacity 3.2s cubic-bezier(.445,.05,.55,.95),visibility 0s 3.2s}
html:not(.js) .haze{display:none}
html.js .rise{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.is-copy .rise{opacity:1;transform:none}
html.is-copy .rise.d2{transition-delay:.25s}
html.is-copy .rise.d3{transition-delay:.5s}

/* FV（案A）：全面の写真（動画）が横に流れ、中央に小さく主役 */
.fv{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--face)}
.fv__bg{position:absolute;inset:0}
.fv__drift{position:absolute;inset:0;animation:drift 110s linear infinite alternate;will-change:transform}
.fv__v{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@keyframes drift{from{transform:translateX(0) scale(1.1)}to{transform:translateX(-4.5%) scale(1.1)}}
.fv__copy{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:4;text-align:center;width:min(90%,760px)}
.fv__h{font-size:44px;line-height:1.6;letter-spacing:.14em;margin:0}
.fv__h .ib{display:inline-block}
@media (max-width:767px){.fv__h{font-size:32px}}
.fv__flag{left:50%;top:51%}
/* 動画が再生されているあいだは、動画のカメラの動きが「横に流れる」を担う。CSSの横流れは重ねない */
html.fv-video .fv__drift{animation:none;transform:none}
html.fv-video .fv__flag{top:48%}
.fv__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;z-index:4;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.fv__panel{background:rgba(248,250,253,.92);padding:16px 22px;border-radius:var(--r-s)}
.fv__logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:2px}
.fv__logo b{font-weight:400;font-size:15px;letter-spacing:.24em;line-height:1}
.fv__sub{font-size:14px;color:var(--sub);margin:0}
.fv__nums{display:flex;gap:24px;flex-wrap:wrap;margin:6px 0 0;font-size:17px;align-items:baseline}
.fv__nums .num{font-size:24px}
@media (max-aspect-ratio:4/5){
  .fv__copy{top:9%}.fv__flag{top:52.5%}.fv__v{object-position:50% 50%}
  .fv__foot{flex-direction:column;align-items:stretch;bottom:16px}.fv__nums{gap:14px}.fv__nums .num{font-size:20px}
}

/* K-01 水平の帯：片側（左）だけ画面の外へ */
.band{margin:44px 0 0;width:calc(100% - var(--pad));border-radius:0 var(--r-l) var(--r-l) 0;overflow:hidden;aspect-ratio:21/8}
.band img{width:100%;height:100%;object-fit:cover}
.two-tou{display:grid;grid-template-columns:1fr 1fr;gap:28px 56px;margin-top:40px;max-width:900px}
.two-tou p{margin:0;font-size:17px}
.two-tou b{display:block;font-weight:200;font-size:30px;letter-spacing:.2em;margin-bottom:6px}

/* K-04 時刻の短い表（罫は水平線だけ） */
.tt{list-style:none;margin:44px 0 0;padding:0;max-width:900px}
.tt li{display:grid;grid-template-columns:110px 220px 1fr;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.tt li:first-child{border-top:1px solid var(--line)}
.tt .num{font-size:24px;color:var(--sea)}
.tt b{font-weight:400}
.tt__n{font-size:14px;color:var(--sub)}

/* K-07 縦長写真＋本文（1ページに1回まで） */
.k07__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.k07__fig{margin:0;border-radius:var(--r-s);overflow:hidden;aspect-ratio:3/4}
.k07__fig img{width:100%;height:100%;object-fit:cover}
.k07 .bd{margin-top:18px}

/* K-03 線画の地図（静止。赤は宿の旗だけ） */
.k03__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;margin-top:44px}
.map{margin:0}
.map svg{width:100%;height:auto;display:block}
.map__sp{display:none!important}
@media (max-width:820px){.map__pc{display:none!important}.map__sp{display:block!important}}
.map__sea{fill:var(--face)}
.map__coast{fill:none;stroke:var(--sea);stroke-width:1.5}
.map__wave{fill:none;stroke:var(--sea);stroke-width:1;opacity:.5}
.map__road{fill:none;stroke:var(--sub);stroke-width:1;stroke-dasharray:2 6}
.map__walk{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:6 6}
.map__bld{fill:var(--bg);stroke:var(--ink);stroke-width:1}
.map__pole{stroke:var(--ink);stroke-width:1}
.map__flag{fill:var(--mark)}
.map__t{font-family:var(--ja);font-size:20px;fill:var(--ink);letter-spacing:.1em}
.map__t--s{font-size:17px;fill:var(--sub)}
.kv{margin:28px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.kv>div{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.kv dt{color:var(--sub);font-size:14px}.kv dd{margin:0}.kv .num{font-size:24px}

/* K-06 流れる写真列（横に流れる。止まって見える速さ） */
.flow{margin-top:44px;overflow:hidden}
.flow__row{display:flex;gap:20px;width:max-content;animation:flow 150s linear infinite}
.flow:hover .flow__row{animation-play-state:paused}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rec{display:block;width:420px}
.rec__ph{display:flex;align-items:center;justify-content:center;aspect-ratio:21/9;background:var(--face);color:var(--sub);
         font-family:var(--en);font-size:13px;letter-spacing:.2em;border-radius:var(--r-s);transition:filter .4s var(--ease)}
.rec__t{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:15px}
.rec__t b{font-weight:400}.rec__t .num{color:var(--sub);font-size:14px}
@media (hover:hover){ .rec:hover .rec__ph{filter:brightness(1.06)} .rec:hover b{color:var(--sea)} }

/* 料金（情報の節：FVと同じ完成度） */
.fee__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:44px;align-items:start}
.fee__tbl{background:var(--face);padding:28px 32px 26px;border-radius:0 var(--r-l) var(--r-l) 0}
.fee table{width:100%;border-collapse:collapse}
.fee caption{text-align:left;font-size:14px;color:var(--sub);margin-bottom:14px;caption-side:top}
.fee th,.fee td{padding:16px 0;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--line)}
.fee thead th{font-size:13px;color:var(--sub);font-weight:400;padding-top:0}
.fee tbody th{font-weight:400}
.fee td .num{font-size:24px;color:var(--ink)}
.fee tbody tr:last-child th,.fee tbody tr:last-child td{border-bottom:1px solid var(--sea)}
.fee__h{font-size:20px;margin:0 0 14px}
.dots{list-style:none;margin:0;padding:0}
.dots li{position:relative;padding:8px 0 8px 22px;border-bottom:1px solid var(--line)}
.dots li::before{content:"";position:absolute;left:0;top:1.35em;width:12px;height:1px;background:var(--sea)}
.fee__time{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px;font-size:14px}
.fee__time .num{font-size:24px;color:var(--sea)}
.sp-only{display:none}
@media (max-width:820px){.sp-only{display:inline}}

/* お知らせ（行） */
.nl{list-style:none;margin:36px 0 0;padding:0;max-width:900px}
.nl li{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.nl li:first-child{border-top:1px solid var(--line)}
.nl time{color:var(--sub);font-size:15px}

/* K-10 予約の帯 */
.k10{margin-top:var(--sec);background:var(--face);padding:88px 0}
.k10__in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.k10__h{font-size:40px;font-weight:400;margin:0}

@media (max-width:820px){
  .h2{font-size:26px;gap:12px}.lead{font-size:17px}
  .band{width:100%;border-radius:0;aspect-ratio:16/9}
  .two-tou{grid-template-columns:1fr}.two-tou b{font-size:22px}
  .tt li{grid-template-columns:76px 1fr;gap:4px 14px}.tt .num{font-size:20px}.tt__n{grid-column:2}
  .k07__in,.k03__in,.fee__in{grid-template-columns:1fr;gap:36px}
  .rec{width:300px}
  .fee__tbl{padding:22px 18px;border-radius:0}
  .fee th:nth-child(3),.fee td:nth-child(3){display:none}
  .fee thead th:nth-child(2),.fee td{text-align:right}.fee td .num,.kv .num,.fee__time .num{font-size:20px}
  .nl li{grid-template-columns:1fr;gap:2px}
  .k10{padding:64px 0}.k10__in{grid-template-columns:1fr}.k10__h{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .fv__drift,.flow__row,.flag{animation:none}
  .haze{display:none}
  html.js .rise{opacity:1;transform:none}
  html.js .ln .h2__l{transform:scaleX(1)}
}
.btn--fill{background:var(--accent);color:var(--bg);border-color:var(--accent)}
@media (hover:hover){ .btn--fill:hover{background:#244a95;color:var(--bg)} }

/* ============================================================
   トップの直し（E5：5点「説明書のように見える」→ 案1 写真の帯をふやす）
   測った原因：FVより下の写真の面積14%（参考の空気の担当は39%）。同じ形の節の繰り返し。左1列。
   帯＝水平線なので、装飾を足さずに反復できる。写真は節ごとに別のもの（使い回さない）
   ============================================================ */
.t-open{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.t-open__ph{margin:0 calc(var(--pad) * -1) 0 0;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-l) 0 0 var(--r-l)}
.t-open__ph img,.t-band__ph img,.t-time__ph img,.t-asa__ph img,.t-hama__ph img{width:100%;height:100%;object-fit:cover}
.t-band{position:relative}
.t-band__ph{aspect-ratio:21/9;overflow:hidden}
.t-band__cap{position:absolute;left:var(--pad);bottom:32px;width:min(560px,calc(100% - var(--pad) * 2));background:rgba(248,250,253,.95);padding:26px 30px;border-radius:var(--r-s)}
.t-band__cap .h2{margin-bottom:14px}
.t-band__row{margin:8px 0 0;font-size:15px}
.t-band__row b{display:inline-block;min-width:4.6em;font-weight:400;font-size:24px;letter-spacing:.2em;vertical-align:-.1em}
.t-time{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}
.t-time .tt{max-width:none}
.t-time__ph{position:sticky;top:120px;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-s)}
.t-asa{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
.t-asa__ph{aspect-ratio:3/4;max-height:92vh;overflow:hidden;border-radius:0 var(--r-l) var(--r-l) 0}
.t-asa__cap{position:relative;margin-left:-72px;margin-right:var(--pad);background:rgba(248,250,253,.96);padding:30px 34px;border-radius:var(--r-s);z-index:2}
.t-asa__cap .bd{margin-top:14px;font-size:16px}
.t-hama{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start;margin-top:44px}
.t-hama__ph{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-s)}
.t-hama .lead{margin-top:28px}
@media (max-width:820px){
  .t-open,.t-time,.t-hama{grid-template-columns:1fr;gap:32px}
  .t-open__ph{margin:0 calc(var(--pad) * -1);border-radius:0}
  .t-time__ph{position:static}
  .t-band__ph{aspect-ratio:16/10}
  .t-asa{display:block}.t-asa__ph{aspect-ratio:4/5;max-height:none;border-radius:0}
  .t-band__cap,.t-asa__cap{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:-48px var(--pad) 0;padding:22px 20px}
  .t-band__cap .h2__t{white-space:nowrap}
  .t-band__row b{font-size:20px}
  .t-asa__cap .h2__t,.t-band__cap .h2__t{white-space:nowrap}
}


/* ============================================================
   P3 空から海へ（2026-10-19 採用）── 下へ進むほど白→淡い青→群青へ深くなる
   節ごとの地をつないで1本のグラデーションに見せる（PC/SPで高さが違っても、変わり目が節に揃う）
   ============================================================ */
:root{--p1:#e8eefb;--p2:#e1eaf9;--p3:#d2def6;--deep:#1e3f99;--deeper:#17306f;--on:#f8fafd;--onsub:rgba(248,250,253,.78);--online:rgba(248,250,253,.5)}
.sec{padding:var(--sec) 0}
#tou{background:linear-gradient(var(--bg),var(--p1))}
#asa{background:linear-gradient(var(--p3),var(--p1))}
#hama{background:var(--p1)}
#rec{background:linear-gradient(var(--bg),var(--p1))}
#fee{background:linear-gradient(var(--p1),#c8d6f4)}
#news{background:linear-gradient(#bccdf2 0,#2c5fd0 16%,var(--deep) 60%)}
#reserve{background:var(--deep);margin-top:0}
.fee__tbl{background:rgba(248,250,253,.8)}
.t-band__cap,.t-asa__cap{background:rgba(248,250,253,.92)}
/* 濃い面の上 */
.on-deep{color:var(--on)}
.on-deep .h2__l{background:var(--online)}
.h2__n{color:var(--accent)}
.on-deep .h2__n,.on-deep .aux,.on-deep time{color:var(--onsub)}
.on-deep .nl li,.on-deep .nl li:first-child{border-color:rgba(248,250,253,.22)}
.on-deep .pill{background:var(--on);color:var(--deep)}
@media (hover:hover){ .on-deep .pill:hover{background:#dfe7f8} }
/* フッター：全ページ共通で海の底 */
.ft{background:var(--deeper);color:var(--on);border-top:0}
.ft__logo small,.ft__note,.ft address{color:var(--onsub)}
.ft__bottom{border-color:rgba(248,250,253,.2)}
@media (hover:hover){ .ft__nav a:hover,.ft__bottom a:hover{color:#ffffff} }

/* コンセプト（導入を統合・C2 縦組みの宣言）
   写真（左）→ 本文（中）→ 縦組みの一文（右）。参考 C1 の「縦組みの見出し」をトップに入れる
   写真は横長の top-open を 16:10 の枠で見せる（縦横比の乖離を 1.6倍未満に保つ） */
.concept__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) auto;gap:56px;align-items:center}
.concept__ph{margin:0 0 0 calc(var(--pad) * -1);aspect-ratio:16/10;overflow:hidden;border-radius:0 var(--r-l) var(--r-l) 0}
.concept__ph img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.concept__lb{font-size:14px;color:var(--accent);letter-spacing:.2em;margin:0 0 18px}
.concept .bd{margin:0}
.concept .aux{margin-top:14px}
.concept__nums{display:flex;gap:28px;margin-top:32px;font-size:14px;color:var(--sub)}
.concept__nums .num{font-size:24px;color:var(--ink);margin-right:4px}
.concept__h{writing-mode:vertical-rl;font-weight:400;font-size:44px;line-height:1.75;letter-spacing:.16em;margin:0;justify-self:end}
.concept__h .ib{display:inline-block}
@media (max-width:820px){
  .concept__in{grid-template-columns:minmax(0,1fr) auto;gap:28px 20px}
  .concept__ph{grid-column:1 / -1;margin:0 calc(var(--pad) * -1);border-radius:0}
  .concept__tx{grid-column:1;grid-row:2}
  .concept__h{grid-column:2;grid-row:2;font-size:30px}
}
.concept{padding-bottom:0}

/* ---------- 朝ごはん 案B（2026-10-19）：写真を裁ち落とし、札を重ねる ---------- */
.asa__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.asa__ph{margin:0 0 0 calc(var(--pad)*-1);aspect-ratio:3/4;max-height:820px;overflow:hidden;border-radius:0 var(--r-l) var(--r-l) 0}
.asa__ph img{width:100%;height:100%;object-fit:cover}
.asa__card{position:relative;z-index:2;margin-left:-140px;background:var(--bg);padding:44px 48px;border-radius:var(--r-s);box-shadow:0 30px 60px -44px rgba(28,42,68,.5)}
.asa__card .h2{margin-bottom:20px}
.asa__t{font-size:44px;line-height:1;color:var(--sea);margin:0 0 14px}
.asa__dl{margin:16px 0 0;border-top:1px solid var(--line)}
.asa__dl>div{display:grid;grid-template-columns:6em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.asa__dl dt{font-weight:400}.asa__dl dd{margin:0;color:var(--sub);font-size:15px}
.asa__card .aux{margin-top:16px}
@media (max-width:820px){
  .asa__in{grid-template-columns:1fr}
  .asa__ph{margin:0 calc(var(--pad)*-1);border-radius:0;aspect-ratio:4/5;max-height:none}
  .asa__card{margin:-80px 0 0;padding:26px 22px}.asa__t{font-size:30px}
}

/* ---------- FV 3本（2026-10-19 案M3）：霞がかかって、ほどける（導入と同じ語彙）。映っているあいだは横へゆっくり流す（風が通る） ---------- */
.fvc{position:absolute;inset:0;visibility:hidden}
.fvc.is-on,.fvc.is-in{visibility:visible}
.fvc.is-on{z-index:1}.fvc.is-in{z-index:2}
.fvc__haze{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(248,250,253,.96),rgba(232,238,251,.9) 60%,rgba(210,222,246,.85))}


/* ---------- 写真の帯 G1（2026-10-19）：版面（.ct の内側）に合わせた12列＋左右の裁ち落とし用の列。溝24px ---------- */
.gb{--cw:calc(min(var(--wrap),100vw) - 2*var(--pad));display:grid;column-gap:24px;
  grid-template-columns:[full-s] minmax(0,1fr) repeat(12,calc((var(--cw) - 264px)/12)) minmax(0,1fr) [full-e];
  padding-block:calc(var(--sec)*.75)}
.gb--p3{background:linear-gradient(var(--p1),var(--p3))}.gb--eve{background:var(--p3)}
:where(.gb) figure{margin:0;overflow:hidden}.gb img{width:100%;height:100%;object-fit:cover;display:block}
.gb__t{font-size:44px;line-height:1;color:var(--sea);margin:0 0 18px}.gb__h{font-size:20px;letter-spacing:.12em;margin:0 0 12px}.gb__b{font-size:16px;color:var(--sub);margin:0;line-height:1.9}
.g1__big{grid-column:full-s / 9;grid-row:1 / 3;aspect-ratio:16/10;align-self:start;border-radius:0 var(--r-s) var(--r-s) 0}
.g1__tx{grid-column:10 / 14;grid-row:1;align-self:start}
.g1__sm{grid-column:11 / 14;grid-row:2;aspect-ratio:4/5;align-self:start;margin-top:64px;border-radius:var(--r-s)}
.g1--r .g1__big{grid-column:7 / full-e;border-radius:var(--r-s) 0 0 var(--r-s)}.g1--r .g1__tx{grid-column:2 / 6}.g1--r .g1__sm{grid-column:2 / 5}
@media (max-width:820px){
  .gb{grid-template-columns:var(--pad) repeat(6,minmax(0,1fr)) var(--pad);column-gap:12px;padding-block:72px 88px}
  .gb__t{font-size:30px}.gb__h{font-size:17px}.gb__b{font-size:15px}
  .g1__big{grid-column:1 / 7;grid-row:1}.g1--r .g1__big{grid-column:3 / 9}
  .g1__sm{grid-column:5 / 9;grid-row:2;margin-top:24px;border-radius:var(--r-s) 0 0 var(--r-s)}.g1--r .g1__sm{grid-column:1 / 5;border-radius:0 var(--r-s) var(--r-s) 0}
  .g1__tx,.g1--r .g1__tx{grid-column:2 / 8;grid-row:3;padding-top:32px}
}

/* ---------- 予約の帯（2026-10-19）：全面の写真＋群青のオーバーレイ、白文字 ---------- */
.k10--ph{position:relative;overflow:hidden;padding-block:clamp(120px,14vw,200px)}
.k10__ph{position:absolute;inset:0;margin:0}.k10__ph img{width:100%;height:100%;object-fit:cover;display:block}
.k10__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,48,111,.9) 0%,rgba(23,48,111,.72) 55%,rgba(23,48,111,.5) 100%)}
.k10--ph .k10__in{position:relative;z-index:1}
@media (max-width:820px){.k10--ph{padding-block:96px}.k10__ph::after{background:rgba(23,48,111,.8)}}

/* ---------- 時刻の順（2026-10-19 R1）：ページそのものを時刻表にする。15:10→17:00→20:00→8:00→11:00 ----------
   地の色：午後は白〜淡い青、17:00・20:00 で淡い青がいちばん濃く、8:00 で明るさが戻り、11:00 は白。
   20:00 を群青の地にする案は不採用（制作担当の指示）。滞在のあとの情報（料金・お知らせ・予約）で海の色へ深くなる */
.tl{margin:0 0 18px}
.k11{background:linear-gradient(var(--p1),var(--bg))}
.k11 .bd{margin-top:20px}
.k11__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}
.k11__ph{margin:0;aspect-ratio:4/5;max-height:560px;overflow:hidden;border-radius:var(--r-s)}.k11__ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.k11__in{grid-template-columns:1fr;gap:28px}.k11__ph{max-height:none}}
/* 滞在の記録：写真が届いたので仮の枠から画像へ（2026-10-19） */
.rec__ph{overflow:hidden}.rec__ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 2棟の札（2026-10-19）：説明文が2行になっても、名前の下に回り込まないよう2列で組む。文の折り返しは .ib の切れ目で */
.t-band__row{display:grid;grid-template-columns:6.4em minmax(0,1fr);align-items:baseline;column-gap:16px}
.t-band__row b{min-width:0;white-space:nowrap;font-size:24px}
@media (max-width:820px){.t-band__row{grid-template-columns:4.6em minmax(0,1fr);column-gap:10px}.t-band__row b{font-size:20px;letter-spacing:.12em}}

/* ---------- スクロールの動き S3（2026-10-19）：写真は霞の中からピントが合って現れる（導入・KVの切り替えと同じ語彙）。
   文は雛形どおり下から小さく上がる。動きを減らす設定・30万では最初から出す（既存の .up の決まりに従う） ---------- */
html.js .concept__ph.up,
html.js .t-band__ph.up,
html.js .t-hama__ph.up,
html.js .g1__big.up,
html.js .g1__sm.up,
html.js .asa__ph.up,
html.js .k11__ph.up{opacity:0;filter:blur(14px) saturate(.6);transform:scale(1.03);
  transition:opacity 1.4s ease,filter 1.8s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
html.js .concept__ph.up.is-in,
html.js .t-band__ph.up.is-in,
html.js .t-hama__ph.up.is-in,
html.js .g1__big.up.is-in,
html.js .g1__sm.up.is-in,
html.js .asa__ph.up.is-in,
html.js .k11__ph.up.is-in{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){html.js .concept__ph.up,html.js .t-band__ph.up,html.js .t-hama__ph.up,html.js .g1__big.up,html.js .g1__sm.up,html.js .asa__ph.up,html.js .k11__ph.up{opacity:1;filter:none;transform:none;transition:none}}
html.js .plan-none :is(.concept__ph,.t-band__ph,.t-hama__ph,.g1__big,.g1__sm,.asa__ph,.k11__ph).up{opacity:1;filter:none;transform:none;transition:none}

/* ---------- オープニング Q2（2026-10-19）：霞が晴れる。合計約2.3秒、1.45秒からFVのコピー ----------
   0.1〜0.7秒 しるしと屋号が浮かぶ → 0.95〜1.3秒 ロゴが消える → 1.15〜2.15秒 水色の地が晴れる／1.1〜2.4秒 FVのぼけが取れる */
.op3{position:fixed;inset:0;z-index:100;pointer-events:none;display:grid;place-items:center;background:var(--p1);
  animation:op3Out 1s cubic-bezier(.25,.1,.25,1) 1.15s both}
.op3__in{display:grid;justify-items:center;gap:14px;animation:op3Logo 1.2s cubic-bezier(.2,.7,.2,1) .1s both}
.op3__mk{width:112px;height:56px;overflow:visible}
.op3__mk line{stroke:var(--sea);stroke-width:1.2}.op3__mk .p{stroke:var(--ink)}.op3__mk .f{fill:var(--mark)}
.op3__ja{font-size:26px;font-weight:400;letter-spacing:.42em;margin:6px 0 0 .42em;color:var(--ink)}
.op3__en{font-family:var(--en);font-weight:300;font-size:13px;letter-spacing:.46em;margin-left:.46em;color:var(--sub)}
html:has(.op3) .fv__bg{animation:op3Fv 1.3s cubic-bezier(.2,.7,.2,1) 1.1s both}
@keyframes op3Out{to{opacity:0;visibility:hidden}}
@keyframes op3Logo{0%{opacity:0;transform:translateY(8px)}50%{opacity:1;transform:none}71%{opacity:1}100%{opacity:0}}
@keyframes op3Fv{from{filter:blur(14px);transform:scale(1.04)}to{filter:none;transform:none}}
html:not(.js) .op3{display:none}
@media (max-width:767px){.op3__mk{width:72px;height:36px}.op3__ja{font-size:19px}.op3__en{font-size:11px}}
@media (prefers-reduced-motion:reduce){.op3{display:none}html:has(.op3) .fv__bg{animation:none}}

/* ---------- 下層の頭（2026-10-19 工程3d）：形式H。K-01 の帯を左の画面端から10列目まで、縦組みの表札を右の列に置き、帯の上端にかける ---------- */
.lh{--cw:calc(min(var(--wrap),100vw) - 2*var(--pad));display:grid;column-gap:24px;
  grid-template-columns:[full-s] minmax(0,1fr) repeat(12,calc((var(--cw) - 264px)/12)) minmax(0,1fr) [full-e];
  padding-block:40px 0;background:linear-gradient(var(--bg),var(--p1))}
/* パンくずは雛形の .crumb（全ページ共通）。棟のご案内（親）は工程4でページができたら site.json の parent で入る */
.lh__ph{grid-column:full-s / 11;grid-row:2 / 4;margin:0;aspect-ratio:21/9;overflow:hidden;border-radius:0 var(--r-s) var(--r-s) 0}
.lh__ph img{width:100%;height:100%;object-fit:cover;display:block}
.lh__h{grid-column:12 / 14;grid-row:2;justify-self:end;margin:-12px 0 0;display:flex;flex-direction:column;align-items:center;gap:18px;font-weight:400}
.lh__name{writing-mode:vertical-rl;font-size:56px;letter-spacing:.32em;line-height:1}
.lh__n{font-size:20px;color:var(--accent);letter-spacing:.06em}
.lh__lead{grid-column:2 / 9;grid-row:4;margin:44px 0 0}
@media (max-width:820px){
  .lh{grid-template-columns:var(--pad) repeat(6,minmax(0,1fr)) var(--pad);column-gap:12px;padding-top:20px}
  .lh__ph{grid-column:1 / 7;grid-row:2;aspect-ratio:4/3}
  .lh__h{grid-column:7 / 9;grid-row:2;margin:0;gap:12px;justify-self:center}
  .lh__name{font-size:34px}.lh__n{font-size:16px}
  .lh__lead{grid-column:2 / 8;grid-row:3;margin-top:28px}
}

/* K-03 間取り（線画） */
.plan{background:var(--p1)}
.plan__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:center;margin-top:24px}
.plan__fig{margin:0}.plan__fig svg{width:100%;height:auto;display:block}
.plan__sea{fill:var(--face)}.plan__coast{fill:none;stroke:var(--sea);stroke-width:1.5}
.plan__wall{fill:var(--bg);stroke:var(--ink);stroke-width:1.6}
.plan__in-w{fill:none;stroke:var(--ink);stroke-width:1}
.plan__fx{fill:none;stroke:var(--sub);stroke-width:1}
.plan__deck{fill:none;stroke:var(--sub);stroke-width:1;stroke-dasharray:3 5}
.plan__door{fill:none;stroke:var(--sea);stroke-width:1.4}
.plan__win{fill:none;stroke:var(--sea);stroke-width:1.4}
.plan__gap{stroke:var(--bg);stroke-width:3}
.plan__walk{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:6 6}
.plan__ray{stroke:var(--sea);stroke-width:1;stroke-dasharray:4 5}
.plan__sun{fill:none;stroke:var(--sea);stroke-width:1.4}.plan__sunr{stroke:var(--sea);stroke-width:1.2}
.plan__n{fill:none;stroke:var(--sub);stroke-width:1}
.plan__t{font-family:var(--ja);font-size:18px;fill:var(--ink);letter-spacing:.1em}
.plan__t--s{font-size:15px;fill:var(--sub)}.plan__t--xs{font-size:15px}
@media (max-width:820px){
  .plan__in{grid-template-columns:1fr;gap:28px}
  .plan__t{font-size:28px;letter-spacing:.02em}.plan__t--s{font-size:26px}.plan__t--xs{font-size:25px;letter-spacing:0}
}

/* K-06 ひがしの朝（流れる写真列） */
.morning{background:linear-gradient(var(--p1),var(--bg))}
.mo{margin:0;width:300px}
.mo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--r-s)}
.mo figcaption{display:flex;gap:14px;align-items:baseline;margin-top:12px;font-size:15px}
.mo figcaption .num{color:var(--sea);font-size:18px}
@media (max-width:820px){.mo{width:220px}}

/* K-04 設備 */
.eq{background:linear-gradient(var(--bg),var(--p3))}
.eq__dl{margin:24px 0 0;border-top:1px solid var(--line);max-width:860px}
.eq__dl>div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.eq__dl dt{font-weight:400}.eq__dl dd{margin:0;color:var(--sub)}
.eq .aux{margin-top:24px}
@media (max-width:820px){.eq__dl>div{grid-template-columns:5em minmax(0,1fr);gap:12px}}
/* 3d 実測の直し（2026-10-19）：SPの帯は16:9（元21:9からの切りすぎを防ぐ）／タブレットでは表札を大きく（ジャンプ率）／予約の帯は広い画面で写真が細くならない高さを持つ */
@media (max-width:820px){.lh__ph{aspect-ratio:16/9}}
@media (min-width:600px) and (max-width:820px){.lh__name{font-size:46px}}
.k10--ph{min-height:36vw;display:grid;align-items:center}
@media (max-width:820px){.k10--ph{padding-block:48px}}

/* ひがしの朝（2026-10-19 直し）：時刻の順に止めて並べる。時刻は1本の水平線の上にそろえ（線の上の小さな印が時刻）、
   写真だけを右へ行くほど少し高くする（日が昇る向き） */
.mtl{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:56px auto 0;position:relative}
.mtl::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--sea);opacity:.5}
.mtl__i{margin:0;position:relative;padding-top:22px}
.mtl__i::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--sea)}
.mtl__t{display:flex;gap:14px;align-items:baseline;margin:0;font-size:15px}
.mtl__t .num{color:var(--sea);font-size:20px}
.mtl__i img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--r-s);margin-top:44px}
.mtl__i:nth-child(2) img{margin-top:30px}.mtl__i:nth-child(3) img{margin-top:16px}
@media (max-width:820px){
  .mtl{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .mtl::before{left:calc(var(--pad) + 4px);right:auto;top:0;bottom:0;width:1px;height:auto}
  .mtl__i{padding:0 0 0 28px}.mtl__i::before{left:0;top:6px}
  .mtl__i:nth-child(n) img{margin-top:14px;aspect-ratio:1/1}
}

/* =====================================================================
   工程4 下層の部品（2026-10-19）。承認済みの型（K-01〜K-11）と形式Hだけで組む
   ===================================================================== */
/* ページの頭・写真なし（K-02 として使う）：縦組みの表札は右、リードは左。前後を大きく空ける */
.lh--text{padding-block:56px 32px}
.lh--text .lh__h{grid-row:1;margin:0}
.lh--text .lh__lead{grid-row:1;grid-column:2 / 10;align-self:end;margin:0 0 8px}
@media (max-width:820px){
  .lh--text{padding-block:28px 8px}
  .lh--text .lh__lead{grid-column:2 / 7;grid-row:1}
  .lh--text .lh__h{grid-column:7 / 9}
}
.art__t{font-size:24px;line-height:1.6;margin:0 0 10px;letter-spacing:.06em}
.lh__lead>.lead{margin:0}.lh__lead>.aux{margin:12px 0 0}
@media (max-width:820px){.art__t{font-size:20px}}

/* K-02 余白の一文 */
.k02{padding-block:calc(var(--sec)*.9)}
.k02__t{font-size:30px;line-height:1.8;letter-spacing:.08em;margin:0;max-width:22em}
.k02 .aux{margin-top:18px}
@media (max-width:820px){.k02__t{font-size:22px}}

/* K-05 振り分けの短文：左右に振って置き、下に細い線 */
.k05{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:8px;margin-top:32px}
.k05__i{grid-column:1 / 7;padding:28px 0 26px;border-bottom:1px solid var(--line)}
.k05__i:nth-child(even){grid-column:7 / 13;margin-top:64px}
.k05__h{font-size:22px;font-weight:400;letter-spacing:.1em;margin:0 0 10px}
.k05__h .num{color:var(--sea);margin-right:14px}
.k05__i .bd{margin:0}
.k05__go{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;color:var(--accent);text-decoration:none;letter-spacing:.08em}
.k05__go::after{content:"";width:28px;height:1px;background:currentColor;margin-left:12px;transition:width .4s var(--ease)}
@media (hover:hover){.k05__go:hover::after{width:44px}}
@media (max-width:820px){.k05{grid-template-columns:1fr}.k05__i,.k05__i:nth-child(even){grid-column:1 / -1;margin-top:0}.k05__h{font-size:19px}}

/* K-07 縦長写真＋本文（ページに2回まで）。--r で写真を左に */
.k07__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}
.k07--r .k07__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.k07--r .k07__ph{order:-1}
.k07__ph{margin:0;aspect-ratio:3/4;max-height:620px;overflow:hidden;border-radius:var(--r-s)}
.k07__ph img{width:100%;height:100%;object-fit:cover;display:block}
.k07__ph--45{aspect-ratio:4/5}
.k07 .bd+.bd{margin-top:14px}
@media (max-width:820px){.k07__in,.k07--r .k07__in{grid-template-columns:1fr;gap:28px}.k07__ph{max-height:none}}

/* K-01 写真の帯（ページの途中に置くとき）：片側だけ画面の端へ */
.k01{--cw:calc(min(var(--wrap),100vw) - 2*var(--pad));display:grid;column-gap:24px;
  grid-template-columns:[full-s] minmax(0,1fr) repeat(12,calc((var(--cw) - 264px)/12)) minmax(0,1fr) [full-e];padding-block:calc(var(--sec)*.75)}
:where(.k01) figure{margin:0}
.k01__ph{grid-column:3 / full-e;aspect-ratio:21/9;overflow:hidden;border-radius:var(--r-s) 0 0 var(--r-s)}
.k01__ph img{width:100%;height:100%;object-fit:cover;display:block}
.k01__cap{grid-column:3 / 12;margin:18px 0 0;font-size:15px;color:var(--sub)}
.k01__cap .num{color:var(--sea);margin-right:12px}
@media (max-width:820px){.k01{grid-template-columns:var(--pad) repeat(6,minmax(0,1fr)) var(--pad);column-gap:12px;padding-block:64px}.k01__ph{grid-column:2 / -1;aspect-ratio:16/9}.k01__cap{grid-column:2 / 8}}

/* K-03 線画（道のり・断面）：トップの地図と同じ線と色。赤は宿の位置の旗だけ */
.lg{margin:28px 0 0}.lg svg{width:100%;height:auto;display:block}
.lg__road{fill:none;stroke:var(--ink);stroke-width:1.2}
.lg__dash{fill:none;stroke:var(--sub);stroke-width:1;stroke-dasharray:4 6}
.lg__node{fill:var(--bg);stroke:var(--ink);stroke-width:1.2}
.lg__end{fill:var(--sea)}
.lg__sea{fill:var(--face)}.lg__coast{fill:none;stroke:var(--sea);stroke-width:1.5}
.lg__bld{fill:var(--bg);stroke:var(--ink);stroke-width:1.4}
.lg__ground{fill:none;stroke:var(--sub);stroke-width:1.2}
.lg__pole{stroke:var(--ink);stroke-width:1}.lg__flag{fill:var(--mark)}
.lg__eye{fill:none;stroke:var(--sea);stroke-width:1;stroke-dasharray:3 5}
.lg__t{font-family:var(--ja);font-size:18px;fill:var(--ink);letter-spacing:.06em}
.lg__t--s{font-size:15px;fill:var(--sub)}.lg__t--n{font-family:var(--en);font-size:20px;fill:var(--sea)}
.lg .lg__sp{display:none}
@media (max-width:820px){.lg .lg__pc{display:none}.lg .lg__sp{display:block}}

/* 棟の比較（棟のご案内のK-05に添える小さな写真） */
.k05__ph{margin:0 0 18px;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-s)}
.k05__ph img{width:100%;height:100%;object-fit:cover;display:block}

/* 料金表（トップと同じ組み）は .fee を使う。ここではページの地だけ */
.pg-fee .fee{background:none}

/* お知らせの一覧（トップと共通の行リスト）：行全体をリンクに */
.nl a{color:var(--ink);text-decoration:none}
@media (hover:hover){.nl a:hover{color:var(--sea)}}
.art__in{max-width:44em}
.art__in .bd+.bd{margin-top:18px}
.art__back{margin-top:48px}
.art__back a{color:var(--accent)}

/* 前後送り：雛形の英字ラベル（Prev / Next）を和文に置き換える（英字ラベルは使わない決まり） */
.pn em{font-size:0;letter-spacing:0}
.pn em::before{font-family:var(--ja);font-size:13px;letter-spacing:.1em;content:"前へ"}
.pn>*:last-child em::before{content:"次へ"}

/* よくある質問：Q の字は副文字色に（雛形の罫線色ではコントラストが足りない） */
.acc__q{color:var(--sub);font-family:var(--en)}

/* フォームの手順 */
.steps li em{font-family:var(--en);color:var(--sub)}
.form__go .pill{border:0;cursor:pointer;font:inherit}
.fm-note{margin-top:28px}

/* 宿の人（スタッフ） */
.st__ph{margin:0 0 32px;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-s);max-width:860px}
.st__ph img{width:100%;height:100%;object-fit:cover;display:block}
/* トップの滞在の記録：同じ一覧をもう1つ続けて並べ、横に流れるループにする（2つ目は読み上げ・操作の対象外） */
.flow__dup{display:contents}
.rec-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.rec-list .rec{width:auto}
@media (max-width:820px){.rec-list{grid-template-columns:1fr;gap:32px}}

/* 工程4 実測の直し（2026-10-19） */
.k02{padding-block:var(--sec)}
@media (max-width:820px){.k01{padding-block:var(--sec)}}
.k05__ph{aspect-ratio:5/4}
.k07__ph--sq{aspect-ratio:1/1}
.acc__a p{max-width:40em}
.form__go .k05__go{margin-top:0}
.nl a{display:inline-flex;align-items:center;min-height:44px}
/* 予約の帯：SPでは写真を帯の上側にだけ敷き、下へ群青に溶かす（写真を縦に切りすぎないため）。余白は節の余白に戻す */
@media (max-width:820px){
  .k10--ph{padding-block:var(--sec)}
  .k10--ph .k10__ph{bottom:auto;height:62vw}
  .k10--ph .k10__ph::after{background:linear-gradient(rgba(23,48,111,.55),rgba(23,48,111,.85) 70%,var(--deep))}
}
/* 工程4 はみ出しの直し：表札は中身の幅を持つ／縦長写真＋本文は狭いPC幅（〜1100px）では縦に積む */
.lh__h{min-width:max-content}
@media (max-width:1100px){.k07__in,.k07--r .k07__in{grid-template-columns:1fr;gap:32px}.k07--r .k07__ph{order:0}.k07__ph{max-height:560px;max-width:520px}}
.lh__name{line-height:1.5}
/* 縦組みの表札の数字（2026-10-19）：半角数字は縦中横で立てる */
.tcy{text-combine-upright:all;-webkit-text-combine:horizontal}

/* 余白の直し（2026-10-19 指摘「頭の下が狭い」「よくある質問が狭い」） */
/* ページの頭：リードの下に、節の余白の半分を持たせる（帯の下端にリードが貼り付かないように） */
.lh{padding-bottom:calc(var(--sec)*.5)}
.lh--text{padding-bottom:calc(var(--sec)*.5)}
.lh__lead{margin-top:56px}
.lh--text .lh__lead{margin-top:0}
@media (max-width:820px){.lh{padding-bottom:56px}.lh--text{padding-bottom:56px}.lh__lead{margin-top:32px}.lh--text .lh__lead{margin-top:0}}
/* よくある質問：群れと群れのあいだを空け、行も少しゆったり */
.acc+.h2{margin-top:120px}
.acc summary{padding:28px 2px}
@media (max-width:820px){.acc+.h2{margin-top:80px}.acc summary{padding:22px 2px}}

/* 時刻の表（2026-10-19 作り直し）：左の縦線と四角の印をやめる。時刻は青い数字で大きく、行の上の細い線（水平線）だけで区切る */
.rows--time::before,.rows--time .rows__r::before{content:none;display:none}
.rows--time{border-top:0;margin-top:40px}
.rows--time .rows__r{grid-template-columns:7.5em 11em minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;padding-left:0;border-bottom:0;border-top:1px solid var(--line)}
.rows--time .rows__r:last-child{border-bottom:1px solid var(--line)}
.rows--time .rows__r>b{font-family:var(--en);font-weight:300;font-size:26px;letter-spacing:.04em;color:var(--sea);line-height:1}
.rows--time .rows__r>span:not(.aux){font-size:17px}
.rows--time .rows__r .aux{margin:0;text-align:left;color:var(--sub)}
@media (max-width:820px){
  .rows--time .rows__r{grid-template-columns:5em minmax(0,1fr);gap:4px 16px;padding:20px 0}
  .rows--time .rows__r>b{font-size:22px;grid-row:1 / 3}
  .rows--time .rows__r .aux{grid-column:2}
}
/* 群青の地のお知らせ：行のリンクは白（2026-10-19 指摘。.nl a の濃紺が群青に沈んでいた） */
.on-deep .nl a{color:var(--on)}
@media (hover:hover){.on-deep .nl a:hover{color:#dfe7f8}}
/* 縦中横の数字のあとにも、ほかの字と同じ字間を（letter-spacing は組み合わせた数字のあとに効かない） */
.lh__name .tcy{letter-spacing:0;margin-inline-end:.32em}
.nl li{align-items:center}

/* ページの頭 V1 縦長の窓（2026-10-20）：写真付きの頭（左の端から横長・表札は右）と逆の形。表札は左、4:5 の写真を右の画面端まで */
.lh--win{padding-top:40px}
.lh--win .lh__h{grid-column:2 / 4;grid-row:1 / 3;justify-self:start;align-self:start;margin:0}
.lh__win{grid-column:8 / full-e;grid-row:1 / 3;margin:0;aspect-ratio:4/5;width:100%;overflow:hidden;border-radius:var(--r-s) 0 0 var(--r-s)}
.lh__win img{width:100%;height:100%;object-fit:cover;display:block}
.lh--win .lh__lead{grid-column:3 / 8;grid-row:2;align-self:end;margin:0;padding-right:24px}
@media (max-width:820px){
  .lh--win{padding-top:20px}
  .lh--win .lh__h{grid-column:2 / 3;grid-row:1}
  .lh__win{grid-column:4 / -1;grid-row:1}
  .lh--win .lh__lead{grid-column:2 / 8;grid-row:2;margin-top:28px;padding:0}
}
/* ページの頭 V1 の高さ（2026-10-20 指摘「高すぎる」）：画面の下に次の節が少しのぞくよう、写真の高さを画面の高さから決める */
.lh__win{aspect-ratio:auto;height:clamp(320px,calc(100svh - 430px),560px)}
.lh--win{padding-bottom:64px}
@media (max-width:820px){.lh__win{height:auto;aspect-ratio:4/5}.lh--win{padding-bottom:48px}}
/* 料金ページ：見出しと料金表の枠のあいだ */
.fee .h2+.fee__tbl{margin-top:36px}
.lh--win{padding-bottom:40px}
.lh--win+.sec,.lh--win+section{padding-top:104px}
@media (max-width:820px){.lh--win+.sec,.lh--win+section{padding-top:72px}}
/* V1 の窓は高さを決めたら幅も 4:5 で決める（横に広げると縦長の写真を切りすぎる）。右の画面端に寄せる */
@media (min-width:821px){.lh__win{aspect-ratio:4/5;width:auto;height:clamp(360px,calc(100svh - 400px),600px);justify-self:end;max-width:100%}}

/* ページの頭・横長（2026-10-20 決定「横長で進める」）：表札は左、横長の写真を5列目から右の画面端まで。リードは写真の下。
   高さは画面から決める（次の節の見出しが画面の下にのぞく）。上下は少し切って見せる */
@media (min-width:821px){
  .lh--win .lh__h{grid-column:2 / 4;grid-row:1 / 3}
  .lh--win .lh__win{grid-column:5 / full-e;grid-row:1;aspect-ratio:auto;width:100%;max-width:none;height:clamp(340px,calc(100svh - 440px),600px);justify-self:stretch}
  .lh--win .lh__lead{grid-column:5 / 12;grid-row:2;align-self:start;margin:28px 0 0;padding:0}
}
@media (max-width:820px){.lh__win{aspect-ratio:4/3}}
@media (min-width:821px){
  .lh--win .lh__win{grid-column:6 / full-e;height:clamp(345px,calc(100svh - 470px),560px)}
  .lh--win .lh__lead{grid-column:6 / 13;margin-top:24px}
}

/* ③ 重ね（2026-10-20 承認）：読みもの・人のページ（朝ごはん・浜と過ごし方・滞在の記録・スタッフ・お知らせ・アオトマリについて）。
   写真は版面の左端から右端まで、表札は地の色の板で写真の右上の端にかける、リードは写真の上の左 */
.lh--over{padding-top:24px}
.lh--over .lh__win{grid-column:2 / 14;grid-row:2;aspect-ratio:2.35/1;width:100%;height:auto;max-width:none;justify-self:stretch;border-radius:var(--r-s)}
.lh--over .lh__h{grid-column:12 / 14;margin-right:24px;justify-self:end;grid-row:1 / 3;align-self:start;z-index:2;background:var(--bg);padding:26px 26px 22px;border-radius:var(--r-s);box-shadow:0 24px 50px -40px rgba(28,42,68,.5)}
.lh--over .lh__lead{grid-column:2 / 10;grid-row:1;align-self:end;margin:0 0 28px;padding:0}
@media (max-width:820px){
  .lh--over{grid-template-rows:48px auto auto}
  .lh--over .lh__win{grid-column:2 / 8;grid-row:2;aspect-ratio:4/3}
  .lh--over .lh__h{grid-column:6 / 8;grid-row:1 / 3;padding:14px 12px}
  .lh--over .lh__lead{grid-column:2 / 8;grid-row:3;margin-top:24px}
}


/* ① 帯の高さ（2026-10-20 そろえる）：②・③ と同じく、画面の下に次の節の見出しがのぞく高さ。高さを画面から決め、上下を少し切って見せる */
@media (min-width:821px){
  .lh:not(.lh--win):not(.lh--text) .lh__ph{aspect-ratio:auto;height:clamp(300px,calc(100svh - 480px),500px)}
  .lh:not(.lh--win):not(.lh--text) .lh__lead{margin-top:36px}
  .lh:not(.lh--win):not(.lh--text){padding-bottom:48px}
  .lh:not(.lh--win):not(.lh--text)+.sec,.lh:not(.lh--win):not(.lh--text)+section{padding-top:104px}
}

/* 磨き（工程5.5・2026-10-20）
   3. palt は見送り：Murecho に palt の機能が無い（GPOS は kern だけ）。指定しても効かないので書かない
   5. 滞在の記録のカードは、色だけでなく写真がわずかに寄る */
.rec__ph img{transition:transform .9s var(--ease)}
@media (hover:hover){.rec:hover .rec__ph img{transform:scale(1.04)}}
/* 30万（plan-none）：見出しの水平線は伸びる動きなしで、最初から引ききっておく（2026-10-20 check:plans の motion） */
html.js .plan-none .h2__l,.plan-none .h2__l{transform:none!important;transition:none!important}

/* 30万（hover だけ）：ヘッダーは降りてこない。1画面目から出しておき、隠すときも動かさない */
.plan-none .hd,.plan-none .hd__cta,.plan-none .menu{transition:none!important}
html:not(.hd-hide) body.plan-none .hd,html:not(.hd-hide) body.plan-none .hd__cta,html:not(.hd-hide) body.plan-none .menu{transform:none}
/* FVの中では「空いている日をみる」がFVのボタンと2つ並ぶので、ヘッダー側は地色が敷かれてから出す（トップだけ） */
html:not(.hd-solid) body.plan-none:not(.p) .hd__cta{visibility:hidden}
/* 30万（hover だけ）：トップの演出を止める（2026-10-20 check:plans の motion）
   オープニング・FVの文の上がり・FVの動画の切り替え（JSで止める）・滞在の記録の横流れ。
   横流れは止めると3件目が画面外に残るので、記録の一覧ページと同じ3列に並べる */
.plan-none .op3{display:none}
.plan-none .fv__bg{animation:none!important}
html.js .plan-none .rise{opacity:1;transform:none;transition:none}
.plan-none .flow{overflow:visible}
.plan-none .flow__row{animation:none;width:auto;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.plan-none .flow__row .rec{width:auto}
.plan-none .flow__dup{display:none}
@media (max-width:820px){.plan-none .flow__row{grid-template-columns:1fr;gap:32px}}
.plan-none .fv__drift{animation:none}

/* ==================== 60万・30万（工程8・2026-10-20 承認：60万 案B 窓／30万 案C 帯） ====================
   ブランドは100万のまま。FVの構図と演出の量だけを変える（削ぎ落とし表）。 */

/* ヘッダー：60万・30万はトップでも1画面目から地色つきで出す（100万だけFVの中で隠す）。
   FVの中ではヘッダーの「空いている日をみる」を出さない（FVのボタンと2つ並ぶため） */
html:not(.hd-hide) body.plan-lite .hd,html:not(.hd-hide) body.plan-lite .hd__cta,html:not(.hd-hide) body.plan-lite .menu{transform:none}
html:not(.hd-solid) body.plan-lite:not(.p) .hd__cta{visibility:hidden}
.plan-lite:not(.p) .hd,.plan-none:not(.p) .hd{background:rgba(248,250,253,.96);box-shadow:0 1px 0 var(--line)}

/* 60万：オープニングなし。FVの文は上がらずに、ふわっと出るだけ。写真は霞からピントが合う動きを外し、ふわっと出るだけ */
.plan-lite .op3{display:none}
.plan-lite .fv__bg{animation:none!important}
html.js .plan-lite .rise{transform:none}
html.js .plan-lite .up{transform:none}
html.js .plan-lite :is(.concept__ph,.t-band__ph,.t-hama__ph,.g1__big,.g1__sm,.asa__ph,.k11__ph).up{filter:none;transform:none}

/* 60万 案B 窓：100万と同じ写真・同じ配置のまま、四辺に地色を残して版面に収める */
.plan-lite .fv{background:var(--bg)}
.plan-lite .fv__bg{inset:108px var(--pad) 32px;border-radius:var(--r-l);overflow:hidden}
.plan-lite .fv__drift{animation:none}
.plan-lite .fv__copy{top:calc(108px + 8%)}
.plan-lite .fv__foot{left:calc(var(--pad) + 32px);right:calc(var(--pad) + 32px);bottom:64px}
@media (max-width:820px){
  .plan-lite .fv__bg{inset:76px 16px 16px}
  .plan-lite .fv__copy{top:calc(76px + 5%)}
  .plan-lite .fv__foot{left:32px;right:32px;bottom:32px}
}

/* 30万 案C 帯：写真は上の帯だけ。コピー・札・予約のボタンは帯の下の地色に置く（写真に文字を重ねない） */
.plan-none .fv{height:auto;min-height:0;background:var(--bg);padding-top:84px;overflow:visible}
.plan-none .fv__bg{position:relative;height:calc(100svh - 84px - 240px);min-height:320px}
.plan-none .fv__copy{position:static;transform:none;width:auto;text-align:left;max-width:var(--wrap);margin:0 auto;padding:44px var(--pad) 0}
.plan-none .fv__foot{position:static;max-width:var(--wrap);margin:0 auto;padding:20px var(--pad) 40px;align-items:center}
.plan-none .fv__panel{background:none;padding:0}
@media (max-width:820px){
  .plan-none .fv{padding-top:64px}
  .plan-none .fv__bg{height:46svh;min-height:0}
  .plan-none .fv__copy{padding-top:28px}
  .plan-none .fv__foot{flex-direction:column;align-items:stretch;padding-bottom:28px}
}

/* 横のはみ出しを節の中で切る（2026-10-20 公開後の livecheck：1440幅で21px）。
   2棟の帯の写真は現れる前に scale(1.03) で左右に約21pxずつはみ出し、G1 の大きい写真は 100vw で画面の端まで伸ばすため、
   幅を取るスクロールバー（Windows など）のぶんだけはみ出す。Mac の重なるスクロールバーでは起きない */
.t-band,.gb{overflow-x:clip}