@charset "UTF-8";
/* ==========================================================
   奥飛騨冬物語 — lower.css（下層ページ共通シェル / 2026-08-11）

   about / events / stay / news / contact の5ページが共有する骨格だけを持つ。
   ページ固有の中身は css/page-{name}.css 側に書く（このファイルは触らない）。

   【読み込み順（下層HTML固定）】
     base.css → sections/cta.css → sections/footer.css → lower.css →
     page-{name}.css → animation.css → sp.css
   つまり lower.css は animation.css / sp.css より「前」。両者と同じセレクタで
   争うときは詳細度で勝たないと負ける（後述の罠1・罠2）。

   【設計座標系】TOPと同じ #canvas 等比スケール（PC=1365px / SP=393px 設計）。
   .l-header は position:sticky ではなく通常フロー＝TOPのカーテン機構は持ち込まない。

   【罠1・SPハンバーガー】2026-08-19からmarkupは #canvas の外（sp-menu直後）にあり
     sp.css が実px fixed＋チップ化を持つ。下層の線色は .fv__burger--ink（sp.css）。
   【罠2・登場アニメ】animation.css は `.js .fv__burger { animation: fv-fade-in
     ... calc(var(--splash-end, 2.2s) + 0.45s) both }` を持つ。下層はスプラッシュを
     置かない＝--splash-end が未設定なので既定2.2sが効き、ハンバーガーが約2.65秒
     不可視になる。lower.css は animation.css より前なので `.js .l-header
     .fv__burger`（0,3,0）で打ち消す（下の「SPハンバーガー」節）。
   【罠3・.js-fogreveal は下層で使わない】main.js の帯マスクスクラブは
     `[data-speed]` が1つもないページでは初期化ごとスキップされる。
     mask だけ当たって二度と動かない＝要素が消える。下層のリビールは
     .js-reveal / .js-reveal-group（フェードアップ）だけを使う。
   ========================================================== */

:root {
  --l-col: 960px;        /* 本文カラム幅（PC 1365px設計。左右余白は各202.5px） */
  --l-gap: 40px;         /* カラム内2分割のすき間（460+40+460=960） */
  --l-edge: 56px;        /* ページ端の余白（TOPフッターのナビ x56 と揃える） */
  --l-rule: rgba(55, 57, 60, 0.18);   /* 区切り罫（インク18%） */
  --l-rule-blue: rgba(1, 89, 179, 0.35); /* 見出し下の短い罫 */
}

/* ==========================================================
   1. .l-header — 下層ヘッダー
   TOPの .fv__header と同じ座標・同じ級数（ロゴ247.5×40.5 @25.3,23.8 /
   ナビ16px・項目送りは fv.css の実測マージンをそのまま踏襲）。
   違いは (a) 写真の上ではなく白地に載る＝文字色は青、
   (b) ロゴは白アセットが使えないので黒へ再着色した img/lower/logo_dark.png（月の金は維持）、
   (c) 下端に1pxの淡い罫、(d) fixed/stickyではなく通常フロー。
   ========================================================== */
.l-header {
  position: relative;
  z-index: 20;
  width: var(--canvas);
  height: 88px;
  background: var(--color-white);
  border-bottom: 1px solid rgba(55, 57, 60, 0.14);  /* 2026-08-12: ヘッダー黒化に合わせて罫も中立色へ */
}

.l-header__logo {
  position: absolute;
  left: 25.3px;
  /* 2026-08-29 ロゴ90%化。高さ 40.5→36.45px に伴い、ヘッダー(88px)の縦中心44.0に合わせ直す
     （44.05 - 36.45/2 = 25.825）。左端25.3pxは基準アンカーとして据え置き */
  top: 25.825px;
  display: block;
}
.l-header__logo img {
  width: 222.75px;   /* 247.5 × 0.9 */
  height: 36.45px;   /* 40.5 × 0.9 */
}

/* ナビ（TOP実測・5項目時: 項目インク開始 x420.5 / 523.5 / 640.5 / 761.5 / 850.0）。
   文言がTOPと同一なので同じマージンでインク位置が一致する。
   2026-08-31「アクセス」追加で6項目・幅合計 524.5→612.5px → left は fv.css と同値の376px
   （TOP / 下層 / WP(/news/) の3系統が同値であることが従来からの合格基準） */
.l-nav {
  position: absolute;
  top: 32px;
  left: 376px;
  display: flex;
  align-items: flex-start;
  /* 2026-08-29 市岡さん指示「文字・ロゴを90%」。まずヘッダーのみ試行。
     font-size を縮めると nth-child の実測マージン(23/21/24/24.5px)だけが原寸で取り残され、
     項目が最大33.6px左へドリフトする（8/29の破綻原因）。transform なら字送り・マージン・
     下線が同率で縮むので、カンプ実測値の引き直しが要らない。
     origin 50% はナビが元々キャンバス中央(682.25)に置かれているため中心が動かない */
  transform: scale(0.9);
  transform-origin: 50% 0;
}
.l-nav-item {
  position: relative;
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-ink);   /* 2026-08-12 市岡さん指示: 下層ヘッダーは黒 */
  white-space: nowrap;
}
.l-nav-item:nth-child(2) { margin-left: 23px; }
.l-nav-item:nth-child(3) { margin-left: 21px; }
.l-nav-item:nth-child(4) { margin-left: 24px; }
.l-nav-item:nth-child(5) { margin-left: 24px; }    /* = アクセス（2026-08-31 追加） */
.l-nav-item:nth-child(6) { margin-left: 24.5px; }  /* = お問い合わせ（従来の nth-child(5) の値） */

/* 現在地の下線（TOPは白2px・下層は青2px。左右-1.5pxはTOPの実測 83px/80文字幅に相当） */
.l-nav-item--active::after {
  content: "";
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  top: 24.5px;
  height: 2px;
  background: var(--color-ink);   /* 2026-08-12: 現在地の下線も黒に揃える */
}

/* ホバー下線（2026-08-31 市岡さん指示）。fv.css の .fv__nav-item::before と同一実装。
   ::after は現在地の下線が占有済みなので ::before を使い、現在地には出さない。
   currentColor なので下層の墨がそのまま当たる */
@media (hover: hover) {
  .l-nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24.5px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-sig, ease);
  }
  .l-nav-item:hover::before { transform: scaleX(1); }
  .l-nav-item--active::before { content: none; }
}

/* ---- SPハンバーガー（2026-08-19 追従化で #canvas の外へ移設） ----
   線色は sp.css の .fv__burger--ink（墨）。座標・チップ化も sp.css が正。
   罠2の打ち消し: 下層にスプラッシュは無いのでフェードイン待ちを起こさせない。
   animation.css の `.js .fv__burger`(0,2,0) に読み込み順で負けないよう
   button型を足して詳細度(0,2,1)で上書きする */
.js button.fv__burger--ink { animation: none; opacity: 1; }

/* ==========================================================
   2. .l-crumb — パンくず（左寄せ・小さめ・インク薄め）
   ページ端 --l-edge 基準（本文カラムより外側）。
   色は rgba(55,57,60,.75)=rgb(105,107,109) 相当で白地に 5.35:1（4.5:1クリア）
   ========================================================== */
.l-crumb {
  /* 2026-08-28 市岡さん指示: 公式サイト（okuhida.or.jp）に寄せて一回り小さく・少し左へ。
     公式は PC 12px / SP 10px・左10px。ページ端 --l-edge(56px) より内側に寄せず、
     パンくただけ 40px の位置に置く */
  padding: 30px 0 0 40px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(55, 57, 60, 0.75);
}
.l-crumb a { color: inherit; }
.l-crumb__sep {
  margin: 0 0.6em;
  color: rgba(55, 57, 60, 0.55);
}
.l-crumb__current { color: rgba(55, 57, 60, 0.75); }

/* ==========================================================
   3. .l-hero — ページタイトル（青・センター）＋短い横罫＋KV画像
   KVは全幅ではなく本文カラム幅（960×380）。角丸なし・影なし。
   ========================================================== */
.l-hero {
  width: var(--canvas);
  padding-top: 54px;
  text-align: center;
}
.l-hero__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;          /* TOPのH2と同じ（500はカンプ比で約1.2倍太い） */
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-indent: 0.06em;       /* letter-spacing 分の中心ズレを戻す */
  color: var(--color-blue);
}
.l-hero__rule {
  width: 120px;
  height: 1px;
  margin: 26px auto 0;
  border: 0;
  background: var(--l-rule-blue);
}
.l-hero__img {
  display: block;
  width: var(--l-col);
  height: 380px;
  margin: 52px auto 0;
  object-fit: cover;
}

/* KVのラッパー（全ページ共通）。overflow:hidden はゆっくりズームの受け皿。
   --veil は「KVの中に英字タイトルが載る型」（ワイヤーの news / contact）用で、
   欧文はTOPの .cta__en と同じ EB Garamond・白。写真が明るくても読めるよう薄い紺を重ねる */
/* 2026-08-12 市岡さん指示: 上下の余白が気になるのでKVは画面幅いっぱい（全幅）に。
   カラム幅960→キャンバス全幅・高さ380→460。写真は2x（2730×920）を用意してある */
.l-hero__kv {
  position: relative;
  width: var(--canvas);
  height: 460px;
  margin: 48px 0 0;
  overflow: hidden;
}
.l-hero__kv .l-hero__img {
  width: 100%;
  height: 100%;
}
.l-hero__kv .l-hero__img { margin: 0; }
/* 読み込み後にごくゆっくり引く（TOPのKen Burnsと同じ発想・9秒で1.06→1.0）。
   動きを減らす設定では静止。2026-08-12 追加 */
.js .l-hero__kv .l-hero__img {
  animation: l-hero-zoom 9s var(--ease-out-quint) both;
}
@keyframes l-hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.l-hero__kv--veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 34, 66, 0.42);
}
.l-hero__kv-en {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  color: var(--color-white);
}

/* ==========================================================
   4. .l-lead — KV下のリード文（センター・2〜3行）
   既定はTOP activities のリード語彙（21px / 行送り42px / インク）。
   --catch は情緒コピー用（青・大きめ）。ページ側で級数を上書きしてよい。
   ========================================================== */
.l-lead {
  width: var(--l-col);
  margin: 68px auto 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 21px;
  line-height: 42px;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
  color: var(--color-ink);
  text-align: center;
}
.l-lead--catch {
  font-size: 30px;
  line-height: 48px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: var(--color-blue);
}
/* 段落を続けて置くとき用（ワイヤーが1行あけている箇所）。2026-08-12 追加 */
.l-lead--tight { margin-top: 34px; }

/* ==========================================================
   5. .l-cta — 公式サイト誘導
   実体は TOP の <section class="cta"> を markup ごと複製して使う
   （見た目の正は css/sections/cta.css・このファイルでは何も再定義しない）。
   下層で必要なのは前後の余白だけ＝隣接セレクタで一括して持つ。
   想定する並び: .l-header → .l-crumb → main.l-main → .cta → .l-next → footer
   ========================================================== */
.l-main + .cta,
.l-main + .l-next { margin-top: 130px; }
.cta + .l-next    { margin-top: 88px; }

/* ==========================================================
   6. .l-next — 次回遊CTA（2枚組）
   ワイヤーは 460×120 の枠2つ。base.css の .u-btn--outline と同じ語彙
   （白地・1px青罫・青文字・右に→矢印）を、寸法だけ枠に合わせて使う。
   ※ .u-btn クラスは付けない: sp.css の共通 .u-btn(214×45) が lower.css より
     後に読まれて SP で寸法を奪うため（同詳細度で後勝ち）。矢印はここで持つ。
   ========================================================== */
.l-next {
  display: flex;
  gap: var(--l-gap);
  width: var(--l-col);
  margin: 96px auto 0;
}
.l-next__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 460px;
  height: 120px;
  padding-bottom: 4px;
  border: 1px solid var(--color-blue);
  background: var(--color-white);
  color: var(--color-blue);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  transition: background-color 0.4s var(--ease-sig, ease);
}
.l-next__item:hover { background: var(--color-pale); }

/* ---- 3枚組（お知らせ・アクセス・お問い合わせ。2026-09-10 定例で決定）----
   960pxカラムを3等分＝(960 − 40×2)/3 = 293.333px。
   2枚組の20px級のままだと本文（10字×24px＝240px）が右矢印（右端から53.5px）に
   重なるため、級数と字送りも落とす。2枚組（.l-next）は一切変えない */
.l-next--3 .l-next__item {
  width: 293.333px;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
.l-next--3 .l-next__item::after { right: 24px; }
/* 矢印（base.css .u-btn と同じ正本SVGを使う。頂点は right:40px＝旧・軸の右端） */
.l-next__item::before { content: none; }
.l-next__item::after {
  content: "";
  position: absolute;
  right: 39.5px;
  top: 50%;
  width: 14px;
  height: 11px;
  border: 0;
  border-radius: 0;
  transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: var(--arrow) no-repeat center / 100% 100%;
  mask: var(--arrow) no-repeat center / 100% 100%;
}

/* ==========================================================
   7. footer — TOPの <footer id="footer" class="footer"> を markup ごと複製。
   見た目の正は css/sections/footer.css（再定義禁止）。
   下層で足すのは「直前ブロックからの間」だけ。
   ========================================================== */
.l-next + .footer,
.cta + .footer,
.l-main + .footer { margin-top: 120px; }

/* ==========================================================
   SP（設計幅393px・TOP SPカンプの語彙に合わせる）
   ・ヘッダー60px / ロゴ163×26.6 / 横並びナビは畳んでハンバーガー
   ・本文カラム 341px（TOP SPの news リスト x26–367 と同じ）
   ========================================================== */
@media (max-width: 767px) {

  :root {
    --l-col: 341px;
    --l-gap: 16px;
    --l-edge: 26px;
  }

  /* ---- ヘッダー ---- */
  .l-header { height: 60px; }
  /* ロゴ: 見た目はTOP SP（ink x12–175 / y15.5–42.1）のまま、
     タップ領域だけ上下パディングで44px以上へ広げる（top を padding 分だけ戻す） */
  .l-header__logo {
    left: 20.5px;   /* 2026-09-01 TOPの .fv__logo と同値（ハンバーガーの右余白と揃える） */
    top: 6.5px;
    padding: 9px 0;
  }
  .l-header__logo img { width: 163px; height: 26.6px; }
  .l-nav { display: none; }

  /* ハンバーガー: 線の実座標（x350–378 / y21・28・35）はTOP SPと同一のまま、
     ボタンの当たり判定だけ44×44へ広げる（sp.cssの 28×22 は詳細度で上書き）。
     3本目のtopは fv.css が `.fv .fv__burger` 配下でしか定義していない＝ここで持つ。 */
  /* 【重要・2026-09-01 追記】このセレクタは**一致しない**（死にルール）。
     <button class="fv__burger fv__burger--ink"> は transform 回避のため
     <header class="l-header"> より前＝.l-header の外に置いてある（下層6ページ・WPテーマとも）。
     下層のハンバーガーの実座標は sp.css の `.fv__burger`（top:7px / right:12.5px）が持っており、
     TOPと完全に同じ ink 座標（x344.5–372.5 / y21–36.5・中心28.75）になる。実測で7ページ一致を確認済み。
     ここの値は履歴として残すだけ。直したい時は sp.css 側を触ること。
     （復活させたい場合は `.fv__burger--ink` のようにボタン自身のクラスで書く。ただし
      当たり判定44×44を割らないよう注意） */
  .l-header .fv__burger {
    top: 3px;
    right: 12.5px;
    width: 44px;
    height: 44px;
  }
  .l-header .fv__burger span { left: 8px; width: 28px; height: 1.5px; }
  .l-header .fv__burger span:nth-child(1) { top: 18px; }
  .l-header .fv__burger span:nth-child(2) { top: 25px; }
  .l-header .fv__burger span:nth-child(3) { top: 32px; }

  /* ---- パンくず ---- */
  .l-crumb {
    padding: 22px 0 0 16px;
    font-size: 12px;
  }

  /* ヒーロー画像に焼き込みで重なる英字は、SPだと写真が小さく圧迫感が出るため隠す
     （PCはそのまま。2026-08-28 市岡さん指示） */
  .l-hero__kv-en { display: none; }

  /* ---- ヒーロー ---- */
  .l-hero { padding-top: 34px; }
  .l-hero__title { font-size: 25px; letter-spacing: 0.05em; text-indent: 0.05em; }
  .l-hero__rule { width: 70px; margin-top: 18px; }
  .l-hero__kv { height: 210px; margin-top: 28px; }
  .l-hero__img { height: 210px; }

  /* ---- リード ---- */
  .l-lead {
    margin-top: 38px;
    font-size: 15px;
    line-height: 28px;
  }
  .l-lead--catch { font-size: 19px; line-height: 32px; }

  /* ---- CTA前後の間 ---- */
  .l-main + .cta,
  .l-main + .l-next { margin-top: 64px; }
  .cta + .l-next    { margin-top: 52px; }

  /* ---- 次回遊CTA: 横2枚 → 縦積み ---- */
  .l-next {
    flex-direction: column;
    margin-top: 52px;
  }
  .l-next__item {
    width: var(--l-col);
    height: 68px;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }
  .l-next__item::after { right: 21.6px; width: 10.8px; height: 8.5px; }

  /* 3枚組はSPでは縦積みのまま＝2枚組と同寸に戻す（PC側の .l-next--3 は詳細度が高いので明示的に打ち消す） */
  .l-next--3 .l-next__item { width: var(--l-col); font-size: 15px; letter-spacing: 0.14em; text-indent: 0.14em; }
  .l-next--3 .l-next__item::after { right: 21.6px; }

  /* ---- フッター前の間 ---- */
  .cta + .footer,
  .l-main + .footer { margin-top: 64px; }

  /* 2026-08-31 市岡さん指示（SP）: TOPと同じく、フッターのグラデが始まるまでの空きを詰める。
     実測（393px・画素走査）:
       公式サイトバナー下端 → 次ページナビ上端 ＝ 52.0px
       次ページナビ下端 → グラデが見え始めるY ＝ 238.5px（フッター背景の白フェードは上端から約174.5px）
     → margin-top を 64px から -122.5px にすると 52.0px となり、上の空き52pxと揃う
       （52 − 174.5 ＝ −122.5）。TOPの `.cta + .footer{-125px}`（footer.css）と同じ考え方。
     重なる186.5pxはフッター背景の白帯だけ（フッター内部要素の最小 top は .footer__catch の399.3px）。
     次ページナビが前面に残るよう .l-next 側に z-index を持たせる。
     対象＝下層6ページ＋WPお知らせ（lower.css を読むページ）。TOPは lower.css を読まないので無関係 */
  .l-next {
    position: relative;
    z-index: 1;
  }
  .l-next + .footer { margin-top: -122.5px; }
}

/* 動きを減らす設定ではKVのズームを止める（2026-08-12） */
@media (prefers-reduced-motion: reduce) {
  .js .l-hero__kv .l-hero__img { animation: none; }
}

/* ==========================================================
   8. .l-hero__script — ページ見出しの銀の筆記体（2026-08-12 追加）
   市岡さん指摘「シンプルすぎる」。TOPの一番の署名意匠＝淡銀の筆記体が
   下層に1つも無かったので、TOPの各セクション（script → 青H2 → リード）と
   同じ型をページ見出しにも持ち込む。
   ・アセットはTOPと同じ img/script/*_silver.png（同じグリフ・同じ塗り #ebecee）
   ・青H2の背面に敷いて重ねる（TOPの events / activities と同じ重なり方）
   ・装飾なので aria-hidden。読み上げ・検索対象はH2の方
   ========================================================== */
.l-hero { position: relative; }
.l-hero__script {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  z-index: 0;
  height: 118px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  pointer-events: none;
}
.l-hero__title,
.l-hero__rule { position: relative; z-index: 1; }
/* ページごとの絵柄（TOPで使っているものと同一アセット） */
.l-hero__script--about  { background-image: url(../img/script/about_silver.png); }
.l-hero__script--events { background-image: url(../img/script/events_silver.png); }
.l-hero__script--stay   { background-image: url(../img/script/activities_silver.png); }

/* ==========================================================
   9. .l-band — 全幅の写真帯（2026-08-12 追加）
   TOPには全幅の写真帯（banner）があるのに下層には無く、白の連続で単調だった。
   セクションの切れ目に1本挟んでリズムを作る。上下フェードは焼き込まない
   （＝素の写真。KVで踏んだ罠を繰り返さない）
   ========================================================== */
.l-band {
  width: var(--canvas);
  height: 320px;
  margin: 118px 0 0;
  overflow: hidden;
}
.l-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-band + .cta,
.l-band + .l-next { margin-top: 118px; }

@media (max-width: 767px) {
  .l-hero__script { top: 4px; height: 62px; }
  .l-band { height: 170px; margin-top: 56px; }
  .l-band + .cta,
  .l-band + .l-next { margin-top: 56px; }
}
.l-hero__script--access { background-image: url(../img/script/access_silver.png); }

/* ==========================================================
   【2026-10-10 監査】タッチ端末では「次のページ」カードの :hover を効かせない
   10/9 のボタン方針（タッチでは変化なし）に合わせる。タップ後に淡青が残るのを防ぐ。
   :focus-visible は従来どおり。戻す時はこのブロックを消す
   ========================================================== */
@media (hover: none) {
  .l-next__item:hover { background: var(--color-white); }
}