/* ==========================================================================
   foundation.css — 色・書体・形の決まり（トークン）と、素の要素の見た目
   読む順: foundation → layout → component → project → utility
   ▼ 色と書体を変えるときは、このファイルの :root だけを書き換えます（手引き 3章）
   ========================================================================== */

:root {
  /* ▼ 色 ---------------------------------------------------------------- */
  --c-main: #6E4A4F;        /* 押すところ・英字の見出し。白い文字とのコントラスト 7.6:1 */
  --c-main-dark: #4B3236;   /* 濃い面（ご予約の帯）・押したときの色。白い文字と 11.6:1 */
  --c-footer: #3D292C;      /* 足もと（ご予約の帯と並んだとき、少し濃くして境目を出す） */
  --c-main-pale: #F1E7E5;   /* 薄い面（選んでいる所・表の行） */
  --c-paper: #F6F2EE;       /* 生成りの地。白の面と交互に使う */
  --c-white: #FFFDFB;       /* 白の面（真っ白より少し温かく） */
  --c-ink: #2E2926;         /* 文字（真っ黒にしない） */
  --c-sub: #6A605B;         /* 補足の文字。生成りの上で 5.4:1 */
  --c-line: rgba(46, 41, 38, .14);
  --c-on-dark: #F6F2EE;     /* 濃い面の上の文字 */
  --c-on-dark-sub: #D9CBC8;

  /* 写真を入れる前の枠の色（4つ。写真に差し替えると見えなくなります） */
  --c-tone-1: #E6DCD3;
  --c-tone-2: #DED0CC;
  --c-tone-3: #D5CEC6;
  --c-tone-4: #CDB9B3;

  /* ▼ 書体 --------------------------------------------------------------- */
  --f-latin: "Cormorant Garamond", "Times New Roman", serif;        /* 英字の見出し・数字 */
  --f-head: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; /* 日本語の見出し */
  --f-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif; /* 本文 */

  /* ▼ 形 ----------------------------------------------------------------- */
  --r-s: 8px;
  --r-card: 16px;
  --r-btn: 999px;
  --shadow: 0 1px 2px rgba(46, 41, 38, .05), 0 12px 32px rgba(46, 41, 38, .08);
  --wrap: 1160px;                       /* 中身の最大の幅 */
  --gutter: clamp(16px, 5vw, 40px);     /* 画面の端との間 */
  --sec: clamp(72px, 10vw, 128px);      /* 節の上下の余白 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 72px;
}

/* ── リセット ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

/* ── 素の要素 ─────────────────────────────────────────────── */
body {
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums;   /* 英字の書体の数字を、0 が o に見えない形に */
  word-break: normal;
  line-break: strict;
}
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 500; line-height: 1.5; letter-spacing: .06em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
strong, b { font-weight: 700; }
small { font-size: .875em; }

:focus-visible { outline: 2px solid var(--c-main); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-main-pale); }

/* 数字（料金・時間・電話）は桁をそろえる */
.num, time, td, .c-price { font-variant-numeric: lining-nums tabular-nums; }