@charset "UTF-8";
/* ============================================================
   base.css ― 土台（リセット／文字／リンク／フォーカス／動きの抑制）
   色・サイズは tokens.css の変数だけを使う。直値を書かない。

   ⚠ CSSの読み込み順は tokens → base → layout → components → pages。
     詳細度が同じなら「後に読むファイル」が勝つ。
     後のファイルを上書きしたいときは、詳細度を上げるか、
     打ち消し用の指定を pages.css の末尾に置く。
   ============================================================ */

/* ── リセット ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 固定ヘッダー（68px）の下にアンカー先が潜らないようにする */
  scroll-padding-top: var(--h-fixed-header);
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-normal);
  /* ⚠ line-height / letter-spacing は body に置かない。
     行送りと字送りは、必要な要素が自分で持つ（--lh-* / --ls-* を使う）。
     ここに 2.1 や .06em を置くと、チップ・タグ・表など「自分で持たない要素」
     まで伸びて、screens/ と行数が合わなくなる。 */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

/* --- 折り返し（UniMind DESIGN.md v16 §3「折り返し（改行）のルール」と同じ考え方）---
   ★UniMindの見本として置くにあたっての追加。買い手に渡す原本には無い。
   日本語は単語の区切りがないので、ブラウザは任意の文字位置で改行する。
   放っておくと最終行に1文字だけ取り残される（例：…根本改善をサポートしま / す）。
     本文  ＝ pretty：手前の行から送って、最終行が短くなりすぎないようにする
     見出し＝ balance：行数は変えずに各行の長さをそろえる
     strict：「ー」「っ」「ゃ」などの小書き仮名を行頭に置かせない（禁則）
   ※未対応ブラウザでは無視されるだけで、従来どおりの折り返しに戻る */
body { text-wrap: pretty; line-break: strict; }
h1, h2, h3, h4, h5, h6,
li, dt, dd, td, th, caption, figcaption, small { text-wrap: balance; }

/* 要素名だけでは拾えない短いまとまり（実測して足した。
   入れないと「…おすすめし / ます」のように最終行が1〜2文字になる） */
.p-features__label,      /* TOPの3つの特長ラベル */
.c-fee__name,            /* 料金表の項目名 */
.c-fee__note,            /* 料金表の補足 */
.c-bullets > div,        /* 「・」始まりの箇条書き */
.c-sechead__ja {         /* セクション見出しの和文 */
  text-wrap: balance;
}

/* 語の途中で切らせたくないまとまりを囲む。
   入りきる限り改行されず、入りきらないときだけ内部で折り返すのではみ出さない */
.u-nb { display: inline-block; }
/* ★ウェイトは 300 / 400 / 500 の3段だけ。見出しの既定の太字を使わない */
h1, h2, h3, h4, th { font-weight: var(--fw-normal); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; border: 0; vertical-align: bottom; }
table { border-collapse: collapse; }

/* アンカー先の見出しが固定ヘッダーに隠れないように */
[id] { scroll-margin-top: var(--h-fixed-header); }

/* ── リンク（TOKENS.md 6-1 の指定どおり） ───
   ⚠ opacity で薄めない。hover は必ず濃くする（--gold-deep ＝ 4.66:1）。 */
a {
  color: var(--ink);
  text-decoration: none;
  transition: color .3s;
}
a:hover { color: var(--gold-deep); }

/* 本文中のインラインリンクだけ下線を付ける（WCAG 1.4.1 / F73） */
p a, li a, dd a, .c-note a, .c-inline-link {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: .25em;
}
p a:hover, li a:hover, dd a:hover, .c-note a:hover, .c-inline-link:hover {
  color: var(--gold-deep-hover);
}

/* ── フォーカス表示 ────────────────────────
   ★変更禁止。デジタル庁デザインシステムの重ね方をそのまま使う。
     内側 = 黄 #FFD43D 2px（box-shadow）／外側 = 黒 #000000 4px（outline offset 2px）
   どの背景でも必ずどちらかが 3:1 を超える（アイボリー地は黒19.12、
   予約CTA帯は黄8.31、WEB予約ボタンは黒4.10／黄3.60）。
   ★単色にしない。#856A2E 単色はWEB予約ボタンと同色で 1.00:1 ＝ 見えなくなる。
   ★outline: none を書かない。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
  border-radius: var(--focus-radius);
}

/* ── スキップリンク ───────────────────── */
.c-skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--base);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-head);
  transform: translateY(-120%);
  transition: transform .2s;
}
.c-skip:focus-visible {
  transform: translateY(0);
  color: var(--base);
}

/* 視覚的にだけ隠す（読み上げには残す） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── フォームの素の見た目をそろえる ─────────
   ⚠ outline:none は書かない。:focus-visible のリングを消してはいけない。 */
input, select, textarea, button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* ── キーフレーム ─────────────────────── */
@keyframes plateReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes plateFade   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes herofade    { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scrollline {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── 動きを減らす設定（REBUILD_SPEC 8-2） ───
   ⚠ scrollline は無限ループなので、ここで必ず止める。
   ★アニメーションは「付加」なので、止めても初期状態が可視のまま残る。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}