@charset "UTF-8";
/* ==========================================================
   奥飛騨冬物語 TOP — sp.css（SP版グローバルのみ・設計幅393px）
   カンプ: FLAG支給 2026-08-05 top_sp.jpg（393×10218 @1x）

   【2026-08-06 再編】セクション別のSPルールは css/sections/{name}.css 末尾の
   @media (max-width: 767px) ブロックへ移管した。このファイルに残るのは
   全セクション共通のグローバルだけ（キャンバス切替・共通ボタン・
   ハンバーガー・SPメニュー）。旧sp.css全文は _review/backup_site_20260806/css/sp.css。

   切替幅767pxは js/main.js の SP_MAX と必ず同じ値にすること。
   PC=1365px設計 / SP=393px設計 の二本立てで、どちらも #canvas への
   transform:scale() で等比縮小する。

   セクション高（新カンプ実測・合計10218px）:
     fv 795 / concept ~1300 / banner1 ~330 / events ~3110 /
     activities ~860 / news ~865 / notice 550 / access ~928 /
     logos ~181 / cta 240 / footer ~1054
   ========================================================== */

/* ==========================================================
   追従ハンバーガー＋ドロワー — PC/SP共通の土台（メディアクエリの外）
   2026-09-10 河野さん要望「やはりメニューは追従させたい」／定例合意
   「FVをめくった瞬間にハンバーガーが出て、FVに戻ると消える。
     ずっとヘッダーが出続けるのは雰囲気が良くない」。

   旧実装はここが `.fv__burger, .sp-menu { display: none; }` で、PCから
   ハンバーガーとドロワーを丸ごと消していた。
   【重要】この2行を消すだけにすると、.sp-menu の opacity:0 / visibility:hidden が
   @media (max-width: 767px) の中にしか無いため、PCで全画面の青パネル
   rgba(1,74,148,.97) が常時表示になる。PC用の初期状態（opacity:0・
   visibility:hidden・pointer-events:none）は必ずメディアクエリの外に置くこと。

   SP（767px以下）の見た目・座標は下の @media がそのまま上書きするので不変。
   出す／消すは js/main.js が .is-stuck を付け外しする（旧 .is-chip を一本化）。
   ========================================================== */

/* ---- ハンバーガー（PC: 56×56の青丸。right 25.3px＝ロゴ左余白と左右対称） ---- */
.fv__burger {
  position: fixed;
  top: 24px;
  right: 25.3px;
  z-index: 55;
  display: block;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(1, 89, 179, 0.94);
  cursor: pointer;
}
.fv__burger span {
  position: absolute;
  left: 14px;              /* (56-28)/2 ＝ 箱の中心とインクの中心を一致 */
  width: 28px;
  height: 1.5px;
  background: var(--color-white);
}
.fv__burger span:nth-child(1) { top: 20.25px; }
.fv__burger span:nth-child(2) { top: 27.25px; }  /* ink中心 28 ＝ 箱の中心 */
.fv__burger span:nth-child(3) { top: 34.25px; }

/* 初期状態＝隠す。FVを抜けたら main.js が .is-stuck を付けて出す。
   ※ css/animation.css の fv-fade-in セレクタ群から .fv__burger を外してあること。
     `both` で opacity:1 が永続保持され、ここの opacity:0 が効かなくなるため。 */
.fv__burger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity 0.35s var(--ease-sig, ease),
    transform 0.35s var(--ease-sig, ease),
    visibility 0.35s,
    background-color 0.3s var(--ease-sig, ease);
}
.fv__burger.is-stuck {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
/* ドロワーを開いている間は元のハンバーガーを触らせない（メニューの下に隠れるため） */
.fv__burger.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 【下層ページ専用の上書き対策・2026-09-10】
   css/lower.css:139 に `.js button.fv__burger--ink { animation: none; opacity: 1; }`（詳細度 0,2,1）
   があり、上の `.fv__burger`（0,1,0）の opacity:0 に勝ってしまう
   （実測: about/access/contact/events/stay/privacy で最上部でも computed opacity が 1 のまま）。
   lower.css は他担当の共有ファイルなので触らず、こちら側の詳細度を (0,3,1) に上げて打ち消す。
   ※ visibility:hidden / pointer-events:none は lower.css 側に無いので上のルールで足りているが、
     フェードアウトの見た目（0.35s）がopacity固定だと効かないためここが必要。 */
html.js .fv__burger:not(.is-stuck),
html.js .fv__burger.is-open { opacity: 0; }

/* ---- ドロワー（.sp-menu）: PCでも同じ全画面パネルを使う ---- */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  /* PCは面積が大きく .97 だと背後の本文がロゴに透けて見えるため不透明にする
     （SP側は面積が小さくカンプ準拠の .97 のまま。2026-09-10） */
  background: #014a94;
  /* ↓ この3行がメディアクエリの外に無いと、PCで青パネルが常時表示になる（最重要） */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-sig, ease), visibility 0.4s;
}
.sp-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.sp-menu a {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--color-white);
}
.sp-menu__logo { width: 106px; height: auto; margin-bottom: 16px; }
html.is-menu-open { overflow: hidden; }

/* 閉じる（×）: インク中心をハンバーガーの中心（右53.3px / 上52px）に合わせる */
.sp-menu__close {
  position: absolute;
  top: 41.25px;
  right: 39.3px;
  width: 28px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.sp-menu__close span {
  position: absolute;
  left: 0;
  top: 10px;
  width: 28px;
  height: 1.5px;
  background: var(--color-white);
}
.sp-menu__close span:nth-child(1) { transform: rotate(45deg); }
.sp-menu__close span:nth-child(2) { transform: rotate(-45deg); }

/* <picture> はレイアウトに影響させない（中の<img>が直接カードの子として並ぶ） */
picture { display: contents; }

/* SPだけで効かせる改行（カンプの折り返し位置が自然改行では作れない箇所） */
.u-sp-br { display: none; }

/* PCだけで効かせる改行（SPは別の位置で折るので、PCの改行を打ち消す用）
   2026-08-31 追加。u-sp-br と対で使い、PC/SPで折り返し位置を独立させる */
.u-pc-br { display: inline; }

@media (max-width: 767px) {

  :root { --canvas: 393px; }

  .u-sp-br { display: inline; }
  .u-pc-br { display: none; }

  /* ==========================================================
     共通ボタン（20260805 SPカンプ実測 214×45・青#0159b3）
     ※必ず個別ボタン指定より「前」に置くこと（詳細度が同じため）
     ========================================================== */
  .u-btn {
    width: 214px;
    height: 45px;
    padding-bottom: 3px;
    font-size: 15px;
    letter-spacing: 0.14em;
  }
  /* SPの矢印: 軸10px相当。頂点は right:18px（従来の軸の右端）に合わせる */
  .u-btn::after { right: 17.6px; width: 10.8px; height: 8.5px; }

  /* PC版CSSに 1365px 直書きが残る箇所をキャンバス幅へ戻す
     （放置すると body の scrollWidth が1365のままになり、SPで横に余白が出る） */
  .concept,
  .notice__bg,
  .cta,
  .footer,
  .footer__bg { width: var(--canvas); }

  /* ==========================================================
     ハンバーガー（2026-08-19 市岡さん指示でスクロール追従化。旧はカンプ位置の absolute）
     markupは #canvas / .fv の外＝transform:scale の影響を受けない実pxのfixed。
     2026-09-10: ページ上端では非表示になり、FV（下層は .l-header）を抜けたところで
     main.js が .is-stuck を付けて青い円チップ＋白線で現れる（白地の上でも視認できる）。
     当たり判定は44×44（タッチターゲット基準）。位置・サイズは従来どおりで不変
     ========================================================== */
  /* 2026-09-01 横山さん指示「中心揃え＋横幅（左右余白）を合わせる」:
     線3本の ink は box + (14 〜 28+1.5) ＝ top+14〜top+29.5 で中心 top+21.75。
     ロゴの ink 中心 28.8 に合わせて top:10→7（中心28.75）。
     右は box余白12 + span左オフセット8 = ink右余白20 だったので、
     box を 12.5 にして ink 右余白を 20.5px＝ロゴ左余白と同値にする。
     44×44 のタップ領域はそのまま維持する。 */
  .fv__burger {
    position: fixed;
    top: 7px;
    right: 12.5px;
    z-index: 55;
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    /* transition はメディアクエリ外の土台（opacity/transform/visibility/background-color）
       をそのまま使う。ここで上書きするとFVを抜けた時のフェードが消える（2026-09-10） */
  }
  .fv__burger span {
    position: absolute;
    left: 8px;
    width: 28px;
    height: 1.5px;
    background: var(--color-white);
    transition: background-color 0.3s var(--ease-sig, ease);
  }
  .fv__burger span:nth-child(1) { top: 14px; }
  .fv__burger span:nth-child(2) { top: 21px; }
  .fv__burger span:nth-child(3) { top: 28px; }
  /* 下層ページ: 白地ヘッダーに載るので線は墨（旧 lower.css .l-header .fv__burger の役割） */
  .fv__burger--ink span { background: var(--color-ink); }
  /* 追従して出てきた時の青チップ（.fv__burger--ink より後に書いて同詳細度で勝たせる）
     2026-09-10: クラス名を .is-chip → .is-stuck に一本化（main.js と対） */
  .fv__burger.is-stuck { background: rgba(1, 89, 179, 0.94); }
  .fv__burger.is-stuck span { background: var(--color-white); }

  /* ==========================================================
     SPメニュー（カンプに開いた状態が無いため作風に合わせて自作・2026-08-01）
     背景色は新カンプの基調青に追随（2026-08-06）
     ========================================================== */
  .sp-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: rgba(1, 74, 148, 0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease-sig, ease), visibility 0.4s;
  }
  .sp-menu.is-open { opacity: 1; visibility: visible; }
  .sp-menu a {
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    color: var(--color-white);
  }
  .sp-menu__logo { width: 92px; height: auto; margin-bottom: 14px; }
  html.is-menu-open { overflow: hidden; }

  /* 開いている間は元のハンバーガーを触らせない（メニューの下に隠れているため） */
  .fv__burger.is-open { opacity: 0; pointer-events: none; }

  /* 閉じる（×）＝メニュー内の自前ボタン。位置はハンバーガーと同じ */
  .sp-menu__close {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 28px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .sp-menu__close span {
    position: absolute;
    left: 0;
    top: 10px;
    width: 28px;
    height: 1.5px;
    background: var(--color-white);
  }
  .sp-menu__close span:nth-child(1) { transform: rotate(45deg); }
  .sp-menu__close span:nth-child(2) { transform: rotate(-45deg); }
}

/* ==========================================================
   言語切替リンク（2026-09-16 河野さん指摘「公式サイトと同じように多国語に対応」／
   9/10定例「朴の木平と同じ方式＝English へのリンクを置いて英語1枚ページへ飛ばす」）
   - PC: ヘッダー右端。ナビ（キャンバス中央・幅は実測マージンで固定）には足さない
   - SP: ページ上端では追従ハンバーガーが非表示なので、同じ右上に置いても重ならない
         （FV/ヘッダーを抜けてハンバーガーが出る時点で、このリンクは画面外）
   - ドロワー: 項目の末尾に English
   - 色: TOPのFV上は白、下層（白地ヘッダー）は墨。英語ページ(en.html)では同じ位置が「日本語」
   ========================================================== */
.u-lang {
  position: absolute;
  top: 29px;
  right: 40px;
  z-index: 4;
  display: block;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.12em;
  color: var(--color-white);
  white-space: nowrap;
}
.l-header .u-lang { color: var(--color-ink); }
.u-lang[lang="ja"] { font-family: var(--font-jp); font-size: 15px; letter-spacing: 0.08em; }
@media (hover: hover) {
  .u-lang::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.12em;
    bottom: -3px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-sig, ease);
  }
  .u-lang:hover::after { transform: scaleX(1); }
}
.js .fv__header .u-lang { animation: fv-fade-in 1.1s var(--ease-out-quint) calc(var(--splash-end, 2.2s) + 0.45s) both; }
@media (prefers-reduced-motion: reduce) {
  .js .fv__header .u-lang { animation: none; }
}
.sp-menu a.sp-menu__lang {
  margin-top: 6px;
  font-family: var(--font-en);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}
@media (max-width: 767px) {
  .u-lang { top: 19px; right: 20px; font-size: 16px; line-height: 20px; }
  .u-lang[lang="ja"] { font-size: 13px; }
}

/* ==========================================================
   【2026-09-22 HEROU定例】サイドバー（ドロワー）のロゴをタップしたらトップへ戻る
   ロゴ画像を <a class="sp-menu__home"> で包んだ。.sp-menu a の字下げ(text-indent)と
   行ボックスがロゴ画像に掛からないよう打ち消し、見た目の位置は包む前と同じにする
   ========================================================== */
.sp-menu .sp-menu__home { display: block; text-indent: 0; line-height: 0; letter-spacing: 0; }
.sp-menu__home .sp-menu__logo { display: block; }

/* ==========================================================
   【2026-10-01 横山さん指示（冬物語ルーム）・市岡さん選択「PCにも入れる」】
   「サイドバーのメニュー内、ロゴを少し小さくして、各メニューが出来るだけ中央に位置して、
    押しやすいようにレイアウトしなおしてください。」
   変更前（393×852 実測）: ロゴ 92×216px（＋下14px）が上にあり、全体を縦中央に置いていたため
   メニュー6項目は y410〜（画面中央426より下）に寄り、各リンクの当たり判定は高さ18pxしかなかった。
   - 縦: flex の全体中央 → grid「1fr｜メニュー7行｜1fr」。メニュー（6項目＋English）の塊が
         画面の縦中央に来て、ロゴはその上の余白の下端に付く（ロゴの大きさで塊がずれない）
   - ロゴ: SP 92→72px / PC 106→76px
   - 押しやすさ: 各リンクを block にして上下の余白で高さ44px（SP）/50px（PC）の当たり判定にする。
         項目の送り（中心間）は SP 44px（変更前と同じ）/ PC 50px
   - 上下に余白（PC 24px / SP 16px）: ロゴが画面の上端に貼り付かないように。
         低い画面（PC 高さ800px以下＝1366×768 等 / SP 高さ700px以下＝iPhone SE 等）はロゴをもう一段小さく
         （PC 64px / SP 60px）して、塊を中央に置いたままロゴを上の余白に収める
   - さらに低い端末（横向き等）で収まらない時はドロワー内でスクロールできる
   ========================================================== */
.sp-menu {
  display: grid;
  grid-template-rows: 1fr repeat(7, auto) 1fr;
  justify-items: center;
  align-items: center;
  gap: 0;
  padding: 24px 0;
  overflow-y: auto;
}
.sp-menu a {
  display: block;
  padding: 12px 32px;
  line-height: 26px;
}
.sp-menu .sp-menu__home {
  align-self: end;
  padding: 0;
  margin-bottom: 24px;
}
.sp-menu__logo { width: 76px; margin-bottom: 0; }
@media (max-width: 767px) {
  .sp-menu { padding: 16px 0; }
  .sp-menu a {
    padding: 11px 28px;
    line-height: 22px;
  }
  .sp-menu .sp-menu__home { margin-bottom: 18px; }
  .sp-menu__logo { width: 72px; margin-bottom: 0; }
}
@media (min-width: 768px) and (max-height: 800px) {
  .sp-menu__logo { width: 64px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .sp-menu__logo { width: 60px; }
}

/* ==========================================================
   【2026-10-09 HEROU定例 10/9】PCで開くメニュー（.sp-menu）の項目にホバー演出
   （横山さん［会議 18:47:58〜18:48:04］「PCの場合サイドバーにカーソル持って行った時も何か」）
   型 = フッターのメニュー（footer.css 52〜66行）と同じ: 白い1pxの下線が左から伸びる（文字は動かさない・opacity で暗くしない）。
   対象 = 6項目＋English（英語ページは5項目＋日本語）。ロゴ（.sp-menu__home）・閉じるボタンには付けない。
   下線の左右 = 当たり判定の padding（PC 32px／767px以下 28px）＋ 字下げ（text-indent 0.18em・English 0.12em）／
     末尾の字間（letter-spacing 0.18em・English 0.12em・英語ページ en.css は 0.01em）＝文字の送り幅だけに引く。
   下線の縦位置 = 文字の墨の下端から 3.5px 下（2026-10-09 実測。項目の箱 PC 高さ50／767px以下 44）:
     和文（Zen Old Mincho）       墨の下端 PC 34.5／SP 31.5 → bottom PC 11px／SP 8px
     「English」（EB Garamond・g の下がり 38.0／33.0）→ 下がりの下へ bottom PC 7.5px／SP 6.5px
     英語ページの項目（EB Garamond・下がりなし・ベースライン 32.5／28.5）→ bottom PC 13px／SP 11px
   :hover は @media (hover:hover) のみ（スマホでは出ない）。キーボードの :focus-visible にも同じ下線を出す。
   戻す時はこのブロックを消す
   ========================================================== */
.sp-menu a:not(.sp-menu__home) { position: relative; }
.sp-menu a:not(.sp-menu__home)::after {
  content: "";
  position: absolute;
  left: calc(32px + 0.18em);
  right: calc(32px + 0.18em);
  bottom: 11px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-sig, ease);
  pointer-events: none;
}
.sp-menu a.sp-menu__lang::after { left: calc(32px + 0.12em); right: calc(32px + 0.12em); }
.sp-menu a.sp-menu__lang[lang="en"]::after { bottom: 7.5px; }
html[lang="en"] .sp-menu a:not(.sp-menu__home)::after { right: calc(32px + 0.01em); }
html[lang="en"] .sp-menu a:not(.sp-menu__home):not([lang="ja"])::after { bottom: 13px; }
@media (max-width: 767px) {
  .sp-menu a:not(.sp-menu__home)::after { left: calc(28px + 0.18em); right: calc(28px + 0.18em); bottom: 8px; }
  .sp-menu a.sp-menu__lang::after { left: calc(28px + 0.12em); right: calc(28px + 0.12em); }
  .sp-menu a.sp-menu__lang[lang="en"]::after { bottom: 6.5px; }
  html[lang="en"] .sp-menu a:not(.sp-menu__home)::after { right: calc(28px + 0.01em); }
  html[lang="en"] .sp-menu a:not(.sp-menu__home):not([lang="ja"])::after { bottom: 11px; }
}
@media (hover: hover) {
  .sp-menu a:not(.sp-menu__home):hover::after { transform: scaleX(1); }
}
.sp-menu a:not(.sp-menu__home):focus-visible::after { transform: scaleX(1); }

/* ==========================================================
   【2026-10-14 河野さん修正リスト・共通「フッターメニューにTOP（右上のメニューにも）を追加」】
   日本語ページの右上のメニュー（.sp-menu）の先頭に「TOP」を足した → 項目 7→8行（6項目＋TOP＋English）。
   10/1 の grid「1fr｜7行｜1fr」を 8行に（メニューの塊が画面の縦中央・ロゴはその上は同じ）。
   英語ページ（5項目＋日本語）は 7行のまま。戻す時はこのブロックを消し、HTML（各ページ・header.php）の TOP を外す
   ========================================================== */
html[lang="ja"] .sp-menu { grid-template-rows: 1fr repeat(8, auto) 1fr; }

/* ==========================================================
   【2026-10-14 HEROU定例・PC「メニューを開くとスクロールバーが消えて、ボタンの位置がずれる」】
   打ち合わせ 10:41〜10:43「もともとのボタンの位置と変えずに（ぶれないように）メニューを表示する」。
   スクロールバーが常に出る環境（Windows・Mac の「常に表示」）では、開くと html.is-menu-open（overflow:hidden）でバーが消え、
   全画面の .sp-menu が バーの幅（例 15px）だけ広がる → 右上の × がハンバーガーより右へ、項目は半分だけ右へずれていた。
   main.js §0.8 が開く直前にバーの幅を測って --sbw に入れる。メニューの右にその幅の余白を持たせ、× を同じだけ左へ戻す
   （青い面は全幅のまま＝バーの跡に白い帯は出ない）。バーが重ねて表示される環境（Mac の既定・スマホ）は --sbw = 0 で変化なし。
   戻す時はこのブロックを消す（main.js の --sbw は値を入れるだけなので残っても無害）
   ========================================================== */
.sp-menu { padding-right: var(--sbw, 0px); }
.sp-menu__close { margin-right: var(--sbw, 0px); }

/* ==========================================================
   【2026-10-14 HEROU定例・スマホ「TOPで上に引っ張れてしまう（空白が見える）。上にも引っ張れないように」】
   打ち合わせ 10:24。ページの端でさらに引っ張った時の跳ね返り（iOS Safari 16 以降・Android Chrome の引き伸ばし）を止める。
   下端の跳ね返り（フッター下の白）も同時に止まる（footer.css の html.is-footer-in は、効かない古い iPhone 向けの保険として残す）。
   副作用: ページの上端で引っ張って再読み込み（Android Chrome）は効かなくなる。戻す時はこのブロックを消す
   ========================================================== */
html, body { overscroll-behavior-y: none; }   /* Chrome の「引っ張って更新」は body 側で止まる（Chrome 公式ブログ）＝両方に書く */