@charset "UTF-8";
/* ==========================================================
   奥飛騨冬物語 TOP — base.css（凍結・再定義禁止）
   デザインカンプ: FLAG支給 2x JPG（設計幅1365px）
   トークンはカンプ実測値（2026-07-11）
   ========================================================== */

:root {
  /* カラー（2026-08-05新カンプ 2xJPG実測。20260806改版） */
  --color-blue: #0159b3;        /* 基調青: ボタン・催しパネル・帯・見出し（旧navy面の後継） */
  --color-ink: #37393c;         /* 本文インク（暗灰。旧は紺文字だった） */
  --color-pale: #ecf3f9;        /* News/Access背景の淡青 */
  --color-script: #ebecee;      /* 筆記体の淡銀（白地上・concept/events実測で決着。写真上の白筆記体は#c8ccce・accessは#fff＝各アセットに焼き込み済み） */
  --color-navy: #235980;        /* 旧A案の紺（レガシー参照用。新規使用禁止） */
  --color-navy-deep: #004c86;   /* STARTローディング背景（カンプ改版対象外＝維持） */
  --color-gold: #b38b55;        /* 旧金（レガシー参照用。新カンプでは不使用） */
  --color-cream: #f9f5ec;       /* 旧NEWS背景（レガシー参照用） */
  --color-white: #ffffff;

  /* フォント */
  --font-jp: 'Zen Old Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-script: 'Pinyon Script', cursive;
  --font-en: 'EB Garamond', 'Zen Old Mincho', serif;

  /* レイアウト */
  --canvas: 1365px;             /* 設計幅（zoom等比縮小の基準） */

  /* 矢印「→」の正本（2026-09-09 市岡さん指示「全ページの矢印が崩れているので綺麗な矢印に」）。
     旧実装は「軸1px線」＋「7x7の正方形をrotate(45deg)して2辺だけ残した矢頭」の2疑似要素合成で、
     45度・transform-origin 60% 40% のせいで矢頭の頂点が軸の右端と噛み合わず、
     拡大すると軸と矢頭が離れて見えていた（CTAは軸が二重にも出ていた）。
     カンプ2xマスター実測（top_server.jpg・1x換算）:
       軸の全長 13.0px ／ 矢頭は頂点が軸の右端と同一点 ／ 張り出し 8.0px ／ 総高さ 10.5px ／ 角度約34度
     これを 14x11 のviewBoxに1本のSVGとして描き、currentColor を背景にマスク抜きする。
     ＝1要素で軸と矢頭が必ず繋がる。色はcurrentColor追従、サイズは各所で width/height を変えるだけ。
     使う側は width:W / height:W*11/14 / right:(軸右端の位置 - W*0.036) を守ること。 */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0.5 5.5H13.5'/%3E%3Cpath d='M5.5 0.5 13.5 5.5 5.5 10.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; overflow-x: clip; } /* clip=スクロールコンテナ化しない（FVのsticky固定に必須）。非対応古参はhiddenへフォールバック */
/* 等比スケールキャンバス（zoomはSafariで絶対配置がズレるためtransform方式。
   スケール値とbody高さ同期はmain.jsが書く） */
#canvas {
  position: relative; /* fixedなFV(z:0)の上に描画（カーテンの「上に被さる」側） */
  z-index: 1;
  width: var(--canvas);
  transform-origin: 0 0;
  /* ヒットテスト: canvas自身の透明領域（FV帯=spacer部分）は素通しにして
     背面fixedのFV（ナビ・ロゴ）へクリックを届かせる。実コンテンツは直下で受け直す */
  pointer-events: none;
}
#canvas > * { pointer-events: auto; }
#canvas > .fv-spacer { pointer-events: none; } /* 純レイアウト要素=常に素通し */
body {
  /* 幅は指定しない（キャンバス幅は#canvas/各セクションが持つ。
     bodyに1365を張るとtransformスケール時にscrollWidthが残り偽overflowになる） */
  font-family: var(--font-jp);
  font-weight: 500;
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1; /* 行間は要素ごとにpxでopt-in（カンプ実測） */
  -webkit-font-smoothing: antialiased;
}
img { display: block; border: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; }

/* ---- 共通部品: ピル型ボタン（20260805カンプ実測 290×60・青地白字・右25pxに→矢印） ----
   ラベル: カンプ実測 漢字送り24px＝20px+0.2em、ピル中心より約2.5px上（padding-bottomで補正）
   矢印: 軸13px＋左開きシェブロン（bbox約13×10.5px）。currentColorに追従 */
.u-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  height: 60px;
  padding-bottom: 5px;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
/* 軸は ::after の1本SVGに統合したので出さない（各所の上書きが残っていても無害） */
.u-btn::before { content: none; }
.u-btn::after {
  /* 矢印（軸＋矢頭を1要素で）: 軸の右端＝矢頭の頂点が right:25px に来る */
  content: "";
  position: absolute;
  right: 24.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%;
}
.u-btn--white {
  background: var(--color-white);
  color: var(--color-blue);
}
.u-btn--outline {
  background: transparent;
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
}
.u-btn--outline-white {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

/* ---- ユーティリティ ---- */
.u-vert { writing-mode: vertical-rl; }
.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================
   筆記体（This / is / Okuhida / Winter / Winter Events & Lights /
   Winter Activities / News / Access）
   2026-08-01: カンプの筆記体は市販の極細コパープレート体で、
   Google Fontsに同等品が無い（22書体を字形照合したが最良でも一致度0.54・
   線の太さは全て2倍以上）。全て固定文言の装飾文字（aria-hidden）なので、
   カンプPDFのベクターから切り出した透過PNGに置き換える＝カンプと完全一致。
   文字自体はDOMに残す（読み上げ・検索対象）。
   ========================================================== */
.concept__script,
.events__script,
.activities__script,
.news__script,
.access__script {
  font-size: 0;
  line-height: 0;
  color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}

/* ==========================================================
   【2026-10-06 ハイフンの位置】市岡さん指摘「ハイフンの位置が下寄り」（フッター TEL のスクリーンショット）。
   Zen Old Mincho のハイフン（U+002D）はインク中心が数字の中心より 0.149em 下（canvas 実測。14px で 2.1px）。
   文字はそのまま（コピー・tel: リンク・検索に影響なし）、span（.u-hy）で 0.15em 持ち上げる。
   適用先: フッターの住所・TEL・FAX（全ページ＋お知らせWPの footer.php）、プライバシーポリシーの注記
   ========================================================== */
.u-hy { position: relative; top: -0.15em; }
/* 同日追記（市岡さん「コロンも下寄り」）: 「TEL:」「FAX:」のコロンもインク中心が数字より 0.141em 下（canvas 実測）。同じ方法で 0.14em 持ち上げる。
   版番号は base.css だけ 20261006b（同日2回目） */
.u-cl { position: relative; top: -0.14em; }

/* ==========================================================
   【2026-10-09 HEROU定例 10/9】PCのボタンにホバー演出（横山さん［会議 18:47:34〜18:47:58］
   「冬物語とはとか、詳細を見るとか…ボタンにカーソルを持ってった時に何も動かない」）
   型 = 既存の2つの組み合わせ（新しい動きは足さない）:
     - 矢印（::after・正本SVG --arrow）が 4px 右へ（stay の .logos__link と同じ量）
     - 地色が一段変わる（.l-next__item・タブと同じ「地が変わる」）
         青 .u-btn・.p-events__map-btn・.p-contact__submit … #0159b3 → #014a94（メニューの青＝sp.css .sp-menu）
         白 .u-btn--white（TOP 催しの「詳細を見る」）  … #fff → var(--color-pale)
         白枠 .u-btn--outline-white（CTA「公式サイトを見る」）… 透明 → rgba(255,255,255,.16)
   文字は動かさない・opacity で暗くしない（2026-08-18 市岡さん判断「右へ動く演出はポップ過ぎる」・footer.css のナビと同じ方針）。
   :hover は @media (hover:hover) の中だけ（タッチ端末で張り付かない）。キーボードの :focus-visible は同じ見た目を常に出す。
   詳細度: 矢印は各セクションの `.access .access__btn::after` / `.cta .cta__btn::after`（0,2,1・transform:translateY(-50%)）に
   勝つよう `html a.u-btn:hover::after`（0,2,3）で書き、縦の translateY(-50%) は残す（矢印の縦位置は不変）。
   地色の transition は、ボタン自身に .js-reveal が付く2つ（TOP「冬物語とは」「アクセスを見る」）だけ
   animation.css `.js .js-reveal` の transition（opacity/transform 1.1s・0,2,0）と1本にまとめて書く（上書きで出現の動きを消さない）。
   戻す時はこのブロックを消す
   ========================================================== */
html .u-btn::after { transition: transform 0.4s var(--ease-sig, ease); }
@media (hover: hover) {
  html .u-btn,
  html .p-events__map-btn,
  html .p-contact__submit {
    transition: background-color 0.4s var(--ease-sig, ease);
  }
  .js .u-btn.js-reveal {
    transition:
      opacity 1.1s var(--ease-sig),
      transform 1.1s var(--ease-sig),
      background-color 0.4s var(--ease-sig, ease);
    transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s;
  }
  html a.u-btn:hover::after { transform: translate(4px, -50%); }
  html a.u-btn:hover,
  html a.p-events__map-btn:hover,
  html button.p-contact__submit:hover { background: #014a94; }
  html a.u-btn.u-btn--white:hover { background: var(--color-pale); }
  html a.u-btn.u-btn--outline-white:hover { background: rgba(255, 255, 255, 0.16); }
  html a.u-btn.u-btn--outline:hover { background: var(--color-pale); }   /* 青枠（現在どのページも未使用）: 青字が青地に沈まないよう淡青 */
}
html a.u-btn:focus-visible::after { transform: translate(4px, -50%); }
html a.u-btn:focus-visible,
html a.p-events__map-btn:focus-visible,
html button.p-contact__submit:focus-visible { background: #014a94; }
html a.u-btn.u-btn--white:focus-visible { background: var(--color-pale); }
html a.u-btn.u-btn--outline-white:focus-visible { background: rgba(255, 255, 255, 0.16); }
html a.u-btn.u-btn--outline:focus-visible { background: var(--color-pale); }
@media (prefers-reduced-motion: reduce) {
  .js .u-btn.js-reveal { transition: none; }
}