/* ============================================================
   base.css — 浪早リゾート 共通の骨格と部品
   tokens.css を読み込んだ後に読み込むこと。
   ここには色の生の値を書かない。すべて var(--…) を使う。
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  font-weight: var(--w-normal);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;

  /* ---- 日本語の改行制御（このサイトの共通ルール）----------------
     読み手にとって不自然な位置で行が折れないようにする。
     1) line-break: strict … 句読点や小書き文字の禁則処理を厳格にする（全ブラウザ）
     2) word-break: auto-phrase … 文節（意味のまとまり）で改行する
        ※Chrome / Edge のみ対応。SafariとFirefoxでは無視される
     3) text-wrap: pretty … 行末の泣き別れ・1文字だけ残る行を減らす
        ※Chrome / Edge / Safari 26 以降
     対応していないブラウザでも表示は壊れず、従来どおりの改行になるだけ。 */
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 見出しは行の長さを揃えたほうが読みやすいので balance を使う */
h1, h2, h3 { text-wrap: balance; }

/* 句読点で改行させたい文に使う。文や文節をこの要素で包むと、
   その境目が優先的な改行位置になる（Safariを含む全ブラウザで有効）。
   auto-phrase が効かない環境での主要な手段。 */
.br-unit { display: inline-block; }

/* 途中で割れると読みにくい語（「1日1組」「15:00〜18:00」など）を包む。
   短い語だけに使うこと。長い語に付けると画面からはみ出す。 */
.nb { white-space: nowrap; }

h1, h2, h3 {
  font-weight: var(--w-med);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}
/* 大きい見出しだけ明朝にする。和の宿としての品格が出る。
   h3以下は小さいので、読みやすさを優先してゴシックのまま。 */
h1, h2 { font-family: var(--font-brand); }

/* 太字(700)は使わない。強調も500で止める */
b, strong { font-weight: var(--w-med); }

/* height:auto がないと、HTMLのwidth/height属性が aspect-ratio を打ち消す */
img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--fg); text-underline-offset: 3px; }
a:hover { opacity: .7; }

section { scroll-margin-top: 64px; }

.wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--sp-3); }

/* ---------- スマホの可読性 ----------
   狭い画面では1行が約20文字しか入らない。行間1.9・字間0.04emのままだと
   細長く隙間だらけに見えるため、スマホのときだけ詰める。
   PC（760px以上）では従来どおりの値に戻す。 */
@media (max-width: 759px) {
  body { line-height: 1.78; letter-spacing: 0.02em; }
  .wrap { padding: 0 var(--sp-2); }
  .lead { font-size: 1rem; }
}
.read { max-width: var(--w-read); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--w-page); margin: 0 auto;
  padding: var(--sp-1) var(--sp-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.brand {
  font-family: var(--font-brand);
  font-size: 1.05rem; font-weight: var(--w-med);
  letter-spacing: var(--ls-wide);
  text-decoration: none; white-space: nowrap; line-height: 1.3;
  min-width: 0; /* 狭い画面でボタンを画面外へ押し出さない */
  /* 2026-09-10: 指で押せる高さ（44px以上）を確保する。
     文字は変えず、当たり判定だけを縦に広げている。
     ヘッダーの中身はもともと40px（ハンバーガー）なので、増えるのは4pxだけ。 */
  display: flex; flex-direction: column; justify-content: center; min-height: 44px;
}
.brand small {
  display: block; font-family: var(--font-base);
  font-size: var(--fs-xs); color: var(--fg-mute);
  letter-spacing: var(--ls-base); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 419px) {
  .header-inner { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .brand small { display: none; }
}
.site-nav { display: none; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: var(--sp-3); }
.site-nav a { font-size: var(--fs-nav); text-decoration: none; }

/* ---- 「過ごし方▾」ドロップダウン ----
   トリガーは<a>ではなく<button>(.drop-toggle)。押しても他のページへ遷移せず、
   4本の選択肢を開くことだけを行う(2026-09-08 修正。以前は<a href="#enjoy">で
   クリック即トップへ遷移してしまい、4本を選べない不具合になっていた)。
   開閉は3通りをORで許可: ホバー(マウス) / focus-within(Tab) / is-open(クリック・タップ)。
   is-open の付け外しと外側クリックで閉じる処理は assets/js/nav.js 側。
   影は design-system.md のルールで禁止のため使わず、枠線+背景で浮かせる。 */
.site-nav .has-drop { position: relative; }
.site-nav .drop-toggle {
  font: inherit; font-size: var(--fs-nav); color: inherit;
  background: none; border: none; padding: 0; cursor: pointer;
}
.site-nav .drop-toggle::after { content: " ▾"; font-size: 0.8em; }
.site-nav .dropdown {
  list-style: none;
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: var(--sp-1);
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-1) 0;
  display: none;
  flex-direction: column;
  z-index: 60;
}
/* 「過ごし方」とメニューのあいだには8pxの隙間があり、その隙間の上では
   ホバーが切れる。マウスを下ろす途中でメニューが消えて4本を選べなかったため、
   隙間を透明の帯で埋めて、ホバーが途切れないようにする（2026-09-08 修正）。
   メニューが開いているときだけ存在するので、ふだんクリックを邪魔しない。 */
.site-nav .dropdown::before {
  content: ""; position: absolute;
  left: 0; right: 0;
  top: calc(var(--sp-1) * -1); height: var(--sp-1);
}
.site-nav .has-drop:hover .dropdown,
.site-nav .has-drop:focus-within .dropdown,
.site-nav .has-drop.is-open .dropdown {
  display: flex;
}
.site-nav .dropdown li { width: 100%; }
.site-nav .dropdown a {
  display: block;
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
}
.site-nav .dropdown a:hover { opacity: 1; background: var(--bg-alt); }

/* ---- ハンバーガーメニュー（1000px未満） ---- */
.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  /* 2026-09-10: 40px -> 44px。指で押せる大きさの下限に合わせた（線の太さと間隔は変えない） */
  gap: 5px; width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  background: transparent; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--fg);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-height: 80vh; overflow-y: auto;
  z-index: 55;
}
.mobile-nav ul { list-style: none; padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; }
.mobile-nav a {
  /* 2026-09-10: 上下の余白 8px -> 11px。高さ40px -> 46px。
     メニューを開いたときだけ出る要素なので自動採寸には出てこないが、
     スマホでいちばん押される場所なので合わせて広げた。 */
  display: block; padding: 11px 0;
  font-size: var(--fs-nav); text-decoration: none;
}
.mobile-nav a.sub { padding-left: var(--sp-3); color: var(--fg-mute); }
.mobile-nav .mobile-drop-label {
  padding: var(--sp-1) 0 0; margin-top: var(--sp-1);
  font-size: var(--fs-nav); font-weight: var(--w-med); color: var(--fg-mute);
  border-top: 1px solid var(--line);
}
.mobile-nav .btn { display: block; margin: var(--sp-1) var(--sp-3) var(--sp-3); text-align: center; }

/* ---- ナビの表示切り替え（2026-09-07改定）----
   実測: ナビ5項目を16pxにしても1024pxまでは収まるが900pxで潰れる。
   760px〜999pxは中途半端に狭いため、ここだけPC本体の760px基準とは別に
   1000pxで区切る（.sec の余白や他のグリッドは従来どおり760px基準のまま）。 */
@media (min-width: 1000px) {
  .site-nav { display: block; }
  .nav-toggle, .mobile-nav { display: none; }

  /* ナビは予約ボタン側（右）へ寄せる（2026-09-08 修正）。
     header-inner は space-between なので、そのままだとナビが中央に
     取り残されて読みにくい。margin-left:auto で余ったスペースを
     すべてナビの左側へ送り、「宿名は左端」「メニュー＋予約ボタンは右のかたまり」
     という並びにする（アビリブなど、他社サイトで一般的な配置）。
     margin-right は header-inner の gap(16px)に足されて、
     「ご利用案内」と予約ボタンのあいだが32pxになる。 */
  .site-nav { margin-left: auto; margin-right: var(--sp-2); }
}

/* ---------- ボタン（角丸は1種類） ---------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  background: var(--fg); color: var(--bg);
  padding: 13px var(--sp-3);
  border-radius: var(--radius);
  font-weight: var(--w-med); font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  transition: opacity var(--dur) var(--ease);
}
.btn:hover { opacity: .78; }
/* 2026-09-10: 上下の余白 9px -> 12px。高さが39pxで44pxに届かなかったため。
   文字の大きさと横幅は変えていない。 */
.btn.small { padding: 12px var(--sp-2); font-size: var(--fs-xs); white-space: nowrap; }
.btn.accent { background: var(--accent); color: var(--on-accent); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--fg); }

/* ---------- ヒーロー ---------- */
.hero { position: relative; min-height: 76vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 写真の上の薄膜。2枚重ねる。
   1枚目（上→下）… 全体を沈める。従来からあるもの。
   2枚目（左→右）… 文字は左下に置くので、左側だけをさらに濃くする（2026-09-07 追加）。
   これを入れる前は、写真の明るいコマでキャッチ文が白飛びに溶けて読めなかった。 */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hero-veil) 25%, transparent) 0%,
      color-mix(in srgb, var(--hero-veil) 45%, transparent) 45%,
      var(--hero-veil) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--hero-veil) 72%, transparent) 0%,
      color-mix(in srgb, var(--hero-veil) 28%, transparent) 55%,
      transparent 80%);
}

/* ヒーローのスライド（クロスフェード＋ゆっくり拡大）
   1枚が5.5秒。切り替えは1.6秒かけて重ねる。拡大は6.6秒で常に動き続ける。 */
.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); }
.hero-slide.is-active img { transform: scale(1.08); transition: transform 6.6s ease-out; }
.hero-slide.is-leaving img { transform: scale(1.08); transition: none; }
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--w-page); margin: 0 auto;
  padding: var(--sp-6) var(--sp-3) var(--sp-4);
  color: var(--bg);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--hero-veil) 85%, transparent);
}
.hero .yomi { font-size: var(--fs-xs); letter-spacing: var(--ls-label); }
.hero h1 {
  font-family: var(--font-brand);
  font-size: var(--fs-h1); letter-spacing: 0.14em;
  margin: var(--sp-1) 0 var(--sp-2);
}
.hero .catch { font-size: var(--fs-base); max-width: 30em; }
.hero .btn { text-shadow: none; }
.hero .btn { margin-top: var(--sp-3); }
/* ヒーロー画像の上では .btn.ghost の既定色(--fg=濃紺)が暗い写真に沈む。
   色を反転するだけでは、写真の明るい部分に白文字が溶けて読みにくいままなので、
   .hero::after と同じ hero-veil を薄く敷いて、どの写真の上でも文字を読めるようにする */
.hero .btn.ghost {
  color: var(--bg); border-color: var(--bg);
  background: color-mix(in srgb, var(--hero-veil) 80%, transparent);
}

/* ---------- ヒーローの一押し行（2026-09-07 追加） ----------
   ファーストビューで、宿名の次に読ませたい1行。バッジ（12px相当）に混ぜると
   いちばん言いたいことが最小の文字になってしまうため、独立させている。
   装飾はアクセント色の縦線1本だけ。design-system.md の
   「アクセント色は面で使わず、線・記号にとどめる」に従う。**1ページに1つまで。** */
.hero-hook {
  display: block; text-decoration: none; color: inherit;
  border-left: 3px solid var(--accent);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-2);
  margin-top: var(--sp-3);
  transition: opacity var(--dur-fast) var(--ease);
}
.hero-hook b {
  display: block; font-size: var(--fs-base);
  font-weight: var(--w-med); letter-spacing: var(--ls-wide);
}
.hero-hook span { display: block; font-size: var(--fs-sm); }
.hero-hook span::after { content: " →"; }
.hero-hook:hover { opacity: .8; }

/* ---------- ヒーローの聖地巡礼ボタン（2026-09-08 追加・トップのみ） ----------
   スマホは従来どおり .hero-hook（横書きの一行）のまま。
   PC（1000px以上）では .hero-hook を隠し、右端の縦書きボタンに置き換える。
   縦書きにする理由は、左下の文章と場所を奪い合わず、動く写真を隠す面積が
   いちばん小さくてすむため。色は予約ボタンの黄と分けて --seichi を使う。 */
.hero-seichi { display: none; }
@media (min-width: 1000px) {
  .hero .hero-hook { display: none; }
  /* 1行14文字の縦書きだと高さ370pxの帯になり、写真より目立ってしまった。
     2列に分けて高さを約半分に落とし、作品名は小さく、行き先（聖地巡礼）を
     大きくしている（2026-09-08 暫定。デザイン確定後に差し替える予定）。 */
  .hero-seichi {
    position: absolute; z-index: 3;
    right: var(--page-inset-lg); bottom: var(--sp-5);
    display: block;
    writing-mode: vertical-rl; text-orientation: mixed;
    background: var(--seichi); color: var(--bg);
    padding: var(--sp-2) var(--sp-1);
    border-radius: var(--radius);
    letter-spacing: var(--ls-wide); line-height: 1.7;
    text-decoration: none; text-shadow: none;
    transition: opacity var(--dur-fast) var(--ease);
  }
  .hero-seichi .t { display: block; font-size: var(--fs-sm); }
  .hero-seichi .s { display: block; font-size: var(--fs-h3); font-weight: var(--w-med); }
  .hero-seichi:hover { opacity: .85; }
}

.badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
.badges span {
  border: 1px solid color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: var(--radius); padding: 3px 12px;
  font-size: var(--fs-xs); letter-spacing: var(--ls-base);
}

/* ---------- セクション ---------- */
.sec { padding: var(--sec-y) 0; }
.sec.alt { background: var(--bg-alt); }

.sec-label { margin-bottom: var(--sp-4); }
.sec-label .en {
  display: block; font-size: var(--fs-xs); letter-spacing: var(--ls-label);
  color: var(--fg-mute); text-transform: uppercase; margin-bottom: var(--sp-1);
}
/* 英字ラベルの上に短い線を1本だけ引く。このサイトで唯一の装飾。
   暖簾の黄色をここで使い、ブランドの色を記憶に残す。 */
.sec-label .en::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--accent);
  margin-bottom: var(--sp-2);
}
.sec-label h2 { font-size: var(--fs-h2); }
.lead { max-width: var(--w-read); text-wrap: pretty; font-size: 1.05rem; }
.lead + .lead { margin-top: 1em; }

/* オーナーの言葉や、そのまま使える文面を引く。人柄が伝わる箇所に使う。
   1ページに1〜2箇所まで。多用すると効果が消える。 */
.quote {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-3); margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}
.quote b {
  display: block; font-weight: var(--w-med);
  margin-bottom: var(--sp-1); letter-spacing: var(--ls-wide);
}
.quote p + p { margin-top: .5em; }

/* ---------- 過ごし方：主役ブロック ---------- */
.feature { display: grid; gap: var(--sp-3); }
.feature img { border-radius: var(--radius); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feature h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
.feature p + p { margin-top: 0.8em; }

/* ---------- 過ごし方：従属ブロック ---------- */
.subgrid { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.subgrid h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.subgrid p { font-size: var(--fs-sm); }
.note { font-size: var(--fs-xs); color: var(--fg-mute); margin-top: var(--sp-1); }

/* ---------- リンクカード（次のページへ送る） ---------- */
.linkcards { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
/* 押せることが、ホバーしなくても分かるようにする。
   ①わずかに色を敷いて「面」に見せる ②矢印を枠で囲って行き先を示す
   ③ホバー/フォーカスで枠と矢印が反応する ④タップで1px沈む */
.linkcard {
  display: block; text-decoration: none; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  padding: var(--sp-3);
  padding-right: calc(var(--sp-3) + 44px); /* 矢印の居場所 */
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.linkcard:hover,
.linkcard:focus-visible {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  opacity: 1;
}
.linkcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.linkcard:active { transform: translateY(1px); }
.linkcard b { display: block; font-weight: var(--w-med); letter-spacing: var(--ls-wide); }
.linkcard span { display: block; font-size: var(--fs-sm); color: var(--fg-mute); margin-top: 2px; }
.linkcard::after {
  content: "→";
  position: absolute; right: var(--sp-3); top: 50%; margin-top: -14px;
  width: 28px; height: 28px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--fg) 32%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); color: var(--fg); line-height: 1;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.linkcard:hover::after,
.linkcard:focus-visible::after {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

/* ---------- お客様の声（引用カード） ----------
   引用は原文のまま載せる。読み手が「作った文章ではない」と分かるよう、
   カギカッコではなく明朝の引用符と罫線で「引いてきた言葉」であることを示す。 */
.voices { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }

.voice {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  background: var(--bg);
  display: flex; flex-direction: column;
}
.voice blockquote { position: relative; padding-top: 26px; }
/* 引用符。文字として読ませたくないので装飾扱いにする */
.voice blockquote::before {
  content: "\201C"; position: absolute; top: -6px; left: -2px;
  font-family: var(--font-brand); font-size: 3rem; line-height: 1;
  color: var(--accent); opacity: .5; pointer-events: none;
}
.voice blockquote p { font-size: var(--fs-base); }
.voice blockquote[lang="en"] p {
  /* 英文は日本語用の字間・禁則を外す。詰まって見えるのを防ぐ */
  letter-spacing: 0; line-height: 1.7; word-break: normal;
}
.voice .voice-trans { font-size: var(--fs-sm); color: var(--fg-mute); margin-top: var(--sp-1); }

.voice figcaption {
  margin-top: auto; padding-top: var(--sp-2);
  font-size: var(--fs-sm); color: var(--fg-mute);
}
/* 出典（媒体と時期）は属性の下に落として、誰の声かを先に読ませる */
.voice figcaption .meta {
  display: block; font-size: var(--fs-xs); margin-top: 4px;
  letter-spacing: var(--ls-wide);
}

/* ---------- 数値の並び ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); }
.stat { border-top: 1px solid var(--line); padding-top: var(--sp-1); }
.stat b { display: block; font-weight: var(--w-med); font-size: var(--fs-base); letter-spacing: var(--ls-wide); }
.stat small { color: var(--fg-mute); font-size: var(--fs-xs); }

/* ============================================================
   写真を主役にする部品（2026-08-19追加）
   「泊まりたい」は装飾ではなく写真の大きさと余白で作る。
   1ページに .bleed は1〜2箇所まで。使いすぎると効果が消える。
   ============================================================ */

/* 画面いっぱいに広がる写真。コンテナ(.wrap)の外へはみ出す */
.bleed {
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: var(--sp-5); margin-bottom: var(--sp-5);
  position: relative; overflow: hidden;
}
.bleed img, .bleed video {
  width: 100%; height: clamp(300px, 62vh, 680px);
  object-fit: cover; display: block;
}
.bleed figcaption {
  max-width: var(--w-page); margin: var(--sp-2) auto 0;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs); color: var(--fg-mute);
}

/* 写真の上に文字を重ねる。ヒーロー以外でも使えるようにする */
.bleed.with-text::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 30%, color-mix(in srgb, var(--hero-veil) 75%, transparent) 100%);
}
.bleed .on-photo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: var(--w-page); margin: 0 auto;
  padding: var(--sp-4) var(--sp-3);
  color: var(--bg);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--hero-veil) 85%, transparent);
}
.bleed .on-photo h2 { color: var(--bg); }
.bleed .on-photo p { font-size: var(--fs-sm); margin-top: var(--sp-1); max-width: 34em; }

/* 写真の縦横比を混ぜる。3:2だけだと単調になる */
.r-wide   img, .r-wide   video { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.r-tall   img, .r-tall   video { aspect-ratio: 4 / 5;  object-fit: cover; width: 100%; }
.r-square img, .r-square video { aspect-ratio: 1 / 1;  object-fit: cover; width: 100%; }

/* 短いループ動画。音なし・自動再生・繰り返し。写真と同じ扱いで置く。
   1ページ1〜2本まで。1本1〜2MBに抑えること。poster必須（読み込み中の空白を防ぐ） */
.loop { border-radius: var(--radius); overflow: hidden; }
.loop video { width: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  .loop video { display: none; }
  .loop img.fallback { display: block; }
}
.loop img.fallback { display: none; width: 100%; border-radius: var(--radius); }

/* ---------- ギャラリー ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: var(--fs-xs); color: var(--fg-mute); margin-top: 5px; }

/* ---------- 一覧・表・開閉 ---------- */
.floor { border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
.floor h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.floor ul { padding-left: 1.3em; font-size: var(--fs-sm); }

.info-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.info-table th, .info-table td {
  padding: var(--sp-2); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); text-align: left; vertical-align: top;
  overflow-wrap: break-word;
}
.info-table th { width: 32%; font-weight: var(--w-med); white-space: nowrap; }

details { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer; padding: var(--sp-2) 0; font-weight: var(--w-med);
  list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: var(--sp-2); font-size: var(--fs-sm);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "＋"; color: var(--fg-mute); font-weight: var(--w-normal); }
details[open] summary::after { content: "−"; }
/* 回答は読み物なので、1行が長くなりすぎないよう幅を制限する。
   制限しないと1140pxのコンテナいっぱいに広がり、PCで1行73文字になる（実測）。
   日本語は35〜45文字が読みやすい。summary（質問文）は開閉の目印なので制限しない。 */
details .inner { padding: 0 0 var(--sp-3); font-size: var(--fs-sm); max-width: var(--w-read); }
details .inner ul { padding-left: 1.3em; margin-top: 6px; }

.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.videos video { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--fg); }

/* ---------- 問い合わせ ---------- */
.contact-links { display: grid; gap: var(--sp-2); max-width: 420px; }
.contact-links a {
  display: block; text-decoration: none;
  border: 1px solid var(--fg); border-radius: var(--radius);
  padding: 13px; font-weight: var(--w-med); text-align: center; font-size: var(--fs-sm);
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--fg); color: var(--bg);
  padding: var(--sp-6) 0 calc(var(--sp-6) + 40px);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--bg); }
.site-footer .fbrand {
  font-family: var(--font-brand); font-size: 1.15rem;
  letter-spacing: var(--ls-wide); margin-bottom: var(--sp-3);
}
.footer-grid { display: grid; gap: var(--sp-4); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 6px; }
/* 2026-09-10: フッターのリンクは高さ14pxで、指では押しにくかった。
   リンクを inline-block にして上下に12pxの余白を付け、当たり判定を48pxにする。
   文字の大きさ・色・並びは変えていない。
   リンクのある項目だけ下の余白を消して、行間が空きすぎないようにしている
   （:has が使えないブラウザでは、少し広めに表示されるだけで表示は壊れない）。 */
.site-footer li a { display: inline-block; padding: 12px 0; }
.site-footer li:has(a) { margin-bottom: 0; }
.site-footer .legal {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--bg) 20%, transparent);
  font-size: var(--fs-xs); opacity: .75;
}

/* ---------- モバイル固定CTA ---------- */
.fixed-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}
.fixed-cta .btn { flex: 1; max-width: 420px; }

/* ---------- 動き（1種類だけ：下からふわっと） ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn, .linkcard { transition: none; }
  /* スライドは動かさず、1枚目だけを表示する */
  .hero-slide { transition: none; }
  .hero-slide img,
  .hero-slide.is-active img { transform: none; transition: none; }
}

/* ---------- PC ---------- */
@media (min-width: 760px) {
  .sec { padding: var(--sec-y-lg) 0; }

  /* ---- PCのファーストビュー（2026-09-07 改定・オーナー承認済み）------------
     改定前はPCでも yomi・バッジが12px、ボタンが13.6pxで、本文16pxより小さかった。
     背景写真が5.5秒ごとに入れ替わるため、明るいコマになると読めなくなっていた。
     スマホの値は変えていない（この @media の中だけで上書きしている）。 */
  .hero { min-height: var(--hero-minh-lg); }

  /* ---- 左端ぞろえ（2026-09-08 改定・オーナー承認済み）--------------------
     改定前は、ヘッダーもヒーローも中央1140pxの箱に入れていた。1440pxでは
     気にならないが、1920pxでは左右に390pxずつ余白ができ、文字が画面の
     中央へ集まって「浮いている」ように見えていた。動く背景写真も隠れていた。
     箱をやめ、画面の左端から --page-inset-lg だけ離す方式に変える。
     ヒーローの文字は 60rem で頭打ちにして、1行が長くなりすぎないようにする。
     スマホ（760px未満）はこの @media の外なので、従来のまま変わらない。 */
  .header-inner {
    max-width: none;
    padding-left: var(--page-inset-lg);
    padding-right: var(--page-inset-lg);
  }
  .hero-inner {
    max-width: 60rem; margin: 0;
    padding-left: var(--page-inset-lg); padding-right: var(--sp-3);
    padding-bottom: var(--sp-5);
    /* 背景写真が5.5秒ごとに変わるため、明るいコマでも読めるよう影を少し強める
       （--hero-veil 85%→92%、ぼかし 12px→14px） */
    text-shadow: 0 2px 14px color-mix(in srgb, var(--hero-veil) 92%, transparent);
  }
  .hero .yomi { font-size: var(--fs-base); }
  .hero h1 { font-size: var(--fs-hero-h1-lg); }
  .hero .catch { font-size: var(--fs-hero-catch-lg); max-width: 22em; line-height: 1.7; }
  /* 行間を指定しないと本文の1.9を継いでボタンの高さが72pxになり間延びする */
  .hero .btn { font-size: var(--fs-hero-btn-lg); padding: var(--sp-2) var(--sp-4); line-height: var(--lh-tight); }
  .site-header .btn.small { font-size: var(--fs-sm); }
  .badges span { font-size: var(--fs-base); padding: 6px 18px; }
  .hero-hook { display: flex; align-items: baseline; gap: var(--sp-2); }
  .hero-hook b { font-size: var(--fs-h3); white-space: nowrap; }
  .hero-hook span { font-size: var(--fs-lg); }
  .feature { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--sp-4); }
  .subgrid { grid-template-columns: repeat(3, 1fr); }
  .linkcards { grid-template-columns: repeat(3, 1fr); }
  /* 引用は読ませる文章。3列にすると1行13文字前後になり細切れで読みにくいので2列 */
  .voices { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(6, 1fr); }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .fixed-cta { display: none; }
}