/* ============================================================
   base.css — リセット・共通タイポグラフィ・共通パーツ
   ============================================================ */

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

body{
  font-family:var(--gothic);
  background:var(--sumi);
  color:var(--washi);
  -webkit-font-smoothing:antialiased;
  line-height:1.9;
  font-size:15px;
  overflow-x:hidden;
}

img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--kohaku);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* --- セクションの明暗 ------------------------------------ */
.sec{padding:var(--sec-y) 0}
.sec--sm{padding:var(--sec-y-sm) 0}
.light{background:var(--washi);color:var(--sumi)}
.mid{background:var(--sumi-2)}

/* --- 見出し ---------------------------------------------- */
/* 英字の小見出し。必ず sec-title の直前に置く */
.eyebrow{
  font-family:var(--gothic);
  font-size:10px;font-weight:500;
  letter-spacing:.38em;text-transform:uppercase;
  color:var(--kohaku);
  display:block;margin-bottom:16px;
}
/* セクション見出し。日本語・明朝 */
.sec-title{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.1em;line-height:1.55;
}
.sec-title--sm{font-size:clamp(20px,2.6vw,30px)}

/* --- 本文 ------------------------------------------------ */
.lead{
  font-size:14px;line-height:2.2;letter-spacing:.06em;
  color:var(--ash);max-width:40em;
}
.light .lead{color:var(--ash-lt)}
.lead + .lead{margin-top:24px}

/* --- リンク ---------------------------------------------- */
.more{
  display:inline-flex;align-items:center;gap:16px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  padding-bottom:8px;border-bottom:1px solid currentColor;
  transition:gap .3s var(--ez),opacity .25s;
}
.more:hover{gap:24px}
.more::after{content:"→"}

/* --- ボタン ---------------------------------------------- */
.btn{
  display:inline-block;
  padding:16px 40px;font-size:12px;letter-spacing:.18em;font-weight:500;
  transition:background .25s,color .25s,border-color .25s,transform var(--dur-press) var(--ez);
}
.btn--fill{background:var(--kohaku);color:var(--sumi);font-weight:700}
.btn--fill:hover{background:var(--kohaku-hv)}
.btn--dark{background:var(--sumi);color:var(--washi)}
.btn--dark:hover{background:var(--kohaku);color:var(--sumi)}
.btn--ghost{border:1px solid rgba(22,18,15,.3)}
.btn--ghost:hover{border-color:var(--sumi)}
.btn--ghost-d{border:1px solid rgba(240,235,225,.4)}
.btn--ghost-d:hover{border-color:var(--kohaku);color:var(--kohaku)}

/* --- 押したときの反応 ------------------------------------
   マウスにはホバーがあるが、タッチには無い。押した瞬間に何も返らないと
   「反応していない」と受け取られ、二度押しの原因になる。

   :active に transition:none を置いているのは意図的。
   押した瞬間は即座に縮み、指を離したときだけ上の行の
   transition（--dur-press）を通ってゆっくり戻る。
   行きは瞬時・戻りはなめらか、という非対称がいちばん自然に感じる。

   面のあるもの（ボタン）は縮め、文字だけのリンクは薄くする。
   文字を縮めると 1px の下線がぼけるため。 */
.btn:active{transform:scale(.97);transition:none}
.more:active{opacity:.55;transition:none}
/* 自前の押下表現を持たせたので、iOS 既定の灰色の点滅は消す */
.btn,.more{-webkit-tap-highlight-color:transparent}

/* --- 定義リスト（店舗情報など） -------------------------- */
.dl{display:grid;grid-template-columns:6.5em 1fr;border-top:1px solid var(--line-l)}
.dl dt,.dl dd{padding:16px 0;border-bottom:1px solid var(--line-l);font-size:13px;letter-spacing:.05em}
.dl dt{font-weight:500;color:var(--ash-lt-2)}
.dl dd{line-height:1.95}
/* 暗背景で使う場合 */
.dl--dark{border-color:var(--line-d)}
.dl--dark dt,.dl--dark dd{border-color:var(--line-d)}
.dl--dark dt{color:var(--ash)}

/* --- 画像枠 ---------------------------------------------- */
/* 画像は必ず .ph で包む。読み込み失敗時も背景色でレイアウトが保たれる */
.ph{overflow:hidden;background:var(--sumi-3)}
.light .ph{background:var(--washi-2)}
.ph--zoom img{transition:transform .8s var(--ez)}
a:hover .ph--zoom img,.ph--zoom:hover img{transform:scale(1.05)}

/* --- スマホの文字サイズ ----------------------------------
   接待・記念日・顔合わせで使われる店なので、読み手には年配の方が多い。
   画面が小さいほど文字を詰めたくなるが、このサイトでは逆に一段大きくする。

   効かせるのは 700px 以下（ヘッダーがスマホの高さに切り替わる幅）。
   上げるのは本文とラベルだけで、見出しには触らない。
   見出しは clamp() の下限（26px など）で既に十分な大きさがあり、
   ここを上げると2行に折れて、かえって読みにくくなる。

   ※ どこかの font-size を変えたら、この下のブロックも一緒に見直すこと。
     同じ役目のブロックが layout.css・page-top.css・lang.css の末尾にもある。 */
@media(max-width:700px){
  body{font-size:16px}
  .eyebrow{font-size:11px}
  .lead{font-size:16px}
  .more{font-size:12px}
  .btn{font-size:13px}
  .dl dt,.dl dd{font-size:15px}
}

/* --- モーション配慮 --------------------------------------
   「動きを減らす」設定は、動きを消す設定ではない。
   負担になるのは移動・拡大・視差であって、色や濃さの変化ではないため、
   transform だけを止め、フェードは残す。
   すべての transition を切ると、押したときの反応まで消えてしまい、
   かえって「反応しないサイト」になる。

   ※ 消してはいけない指定です（CLAUDE.md 掟7）。 */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  /* 通してよいのは、動きを伴わない性質のものだけ */
  *,*::before,*::after{
    transition-property:opacity,color,background-color,border-color!important;
  }
  /* 「お取り寄せ」などのページ内リンク。画面全体が流れる動きは
     いちばん負担が大きいので、瞬時に移動させる */
  html{scroll-behavior:auto}
  /* ホバーでの拡大・浮き上がりを止める */
  .ph--zoom img,.course:hover,.scene:hover img,.recommend-card:hover{transform:none!important}
}