@charset "UTF-8";

/* =========================================================================
   hair salon LUNO — assets/css/style.css
   制作サンプル用の1枚CSS。外部リソース（Webフォント・CDN）は一切読み込まない。
   数値は docs/design-notes.md §5「美容室用トークン」をそのまま採用し、
   すべて :root のカスタムプロパティ経由で参照する（直書きを避ける）。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. デザイントークン
   ------------------------------------------------------------------------- */
:root {
  /* --- 色（§5 美容室用トークン／根拠 §2「色」） --- */
  --bg: #FFFFFF;            /* palette.bg[0] が白のサイト 11/21 */
  --surface: #F5F2EE;       /* 副次背景レンジ #EDEDEE/#F3F0EE/#EEEAD7/#F8F6F4 */
  --text: #1A1A1A;          /* #000000 9サイト、#191818/#1A1919 が続く */
  --text-muted: #6B6B6B;    /* #666666 3サイト・#999999 3サイトの中間 */
  --accent: #A8322A;        /* 描画アクセントの赤レンジ #9A001E – #E63232 から1色 */
  --accent-2: #A98A63;      /* 金茶レンジ。#FFFFFF 上は 3.2:1 のため装飾（罫線・面）専用 */
  --border: #E3DED8;        /* グレー帯 #333–#999 の最も薄い側から決め */

  /* --- ヒーロー画像上のオーバーレイ（白文字で 7:1 以上を確保する不透明度） --- */
  --overlay-strong: rgba(20, 18, 16, .78);
  --overlay-mid: rgba(20, 18, 16, .52);
  --overlay-soft: rgba(20, 18, 16, .12);
  --overlay-none: rgba(20, 18, 16, 0);

  /* --- フォント（Webフォントを使わないため system-ui 系で組む） --- */
  --font-body: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --font-display: Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* --- フォントサイズ階段（§5: 13 / 14 / 16 / 20 / 26 / 40 / 56） --- */
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;            /* モバイル H1（§5 モバイル方針 H1 24px） */
  --fs-26: 26px;
  --fs-40: 40px;
  --fs-56: 56px;

  /* 役割で参照する別名 */
  --fs-body: var(--fs-16);
  --fs-small: var(--fs-14);
  --fs-note: var(--fs-13);
  --fs-h1: var(--fs-40);     /* 実測 最大見出し med 40.0 */
  --fs-h2: var(--fs-26);     /* 実測 H2 med 25.6 */
  --fs-h3: var(--fs-20);
  --fs-display: var(--fs-56);/* 実測は 40–108、抑えめに設定 */

  /* --- 行間・字間（§5: 本文 1.6／見出し 1.25／見出し字間 +0.02em） --- */
  --lh-body: 1.6;
  --lh-head: 1.25;
  --ls-body: 0em;
  --ls-head: 0.02em;
  --ls-label: 0.18em;       /* 英字ラベル用のトラッキング（実測レンジ内の決め値） */

  /* --- 余白階段 --- */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 120px;

  /* --- レイアウト（§5「余白・幅」） --- */
  --container: 1200px;                 /* 内容幅レンジ 768 – 1208 */
  --gutter: var(--space-9);            /* desktop 120px（inset レンジ 116 – 336） */
  --gutter-md: var(--space-6);         /* 768–1023px 48px */
  --gutter-sm: var(--fs-20);           /* mobile 20px（§5 モバイル方針） */
  --section-y: var(--space-7);         /* desktop 64px（実測 pt 最頻 64px） */
  --section-y-sm: var(--space-5);      /* mobile 32px（実測 med 33.81） */
  --section-y-lg: var(--space-8);      /* 強弱用 96px（実測レンジ 40 – 96） */
  --grid-gap: var(--space-3);          /* 16px（実測 med 12.25） */
  --gap-tight: var(--space-1);         /* 8px（実測 ammo-nyc） */
  --measure: 32em;                     /* 本文の行長（ヒーロー文字をスクリム内に収める） */
  --label-col: 9em;                    /* 定義リストのラベル列 */
  --header-h: 76px;                    /* 実測ヘッダー高 57 – 319px の内側 */
  --table-min: 520px;                  /* 料金表がこれ以下になると横スクロールに切替 */

  /* --- 角丸・影・transition（§6により実測なし。決め値） --- */
  --radius: 0px;
  --shadow: none;
  --transition: 240ms cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 1023px) {
  :root {
    --gutter: var(--gutter-md);
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--gutter-sm);
    --section-y: var(--section-y-sm);
    --section-y-lg: var(--space-6);
    --fs-h1: var(--fs-24);
    --fs-h2: var(--fs-20);
    --fs-h3: var(--fs-16);
    --fs-display: var(--fs-24);
    --table-min: 460px; /* モバイルでは料金表を .table-scroll 内で横スクロールさせる幅 */
  }
}

/* -------------------------------------------------------------------------
   2. リセットとベース
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-3));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

a:hover { color: var(--text); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

ul, ol { padding-left: 0; list-style: none; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 暗い面でのフォーカスリングは白に切り替える（見えなくしない） */
.hero :focus-visible,
.cta--dark :focus-visible {
  outline-color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   3. ユーティリティ
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: -9999px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background-color: var(--text);
  color: #FFFFFF;
  font-size: var(--fs-small);
  text-decoration: none;
}

.skip-link:focus { left: var(--space-2); }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--surface { background-color: var(--surface); }
.section--tight-top { padding-block-start: 0; }

/* セクション内のブロック間リズム */
.section-body { display: grid; gap: var(--space-8); }
.section-body--tight { gap: var(--space-6); }

.section-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-note);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.lead {
  max-width: var(--measure);
  color: var(--text-muted);
}

.note {
  font-size: var(--fs-note);
  color: var(--text-muted);
}

.rule {
  height: 1px;
  border: 0;
  background-color: var(--border);
}

.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--gap-lg { gap: var(--space-6); }

.stack { display: grid; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }

/* スクロールで現れる要素（JS 有効時のみ初期状態を隠す） */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--space-3));
  transition: opacity var(--transition), transform var(--transition);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------------------
   4. ヘッダーとナビゲーション
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.site-header.is-scrolled { border-bottom-color: var(--border); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.logo {
  display: grid;
  gap: 2px;
  color: var(--text);
  text-decoration: none;
}

.logo__mark {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: var(--ls-label);
}

.logo__sub {
  font-size: var(--fs-note);
  color: var(--text-muted);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--fs-24);
  padding: var(--space-3) var(--space-4);
  background-color: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-small);
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: var(--fs-16);
}

.nav-toggle__bars span {
  display: block;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.global-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.global-nav a {
  display: inline-block;
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.global-nav a:hover { border-bottom-color: var(--text); }

.global-nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }

  .global-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background-color: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-inline: var(--gutter);
  }

  /* JS があるときだけ畳む（無効時は開いた状態で見せる） */
  .js .global-nav {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--transition), visibility var(--transition);
  }

  .js .global-nav.is-open {
    max-height: 70vh;
    overflow-y: auto;
    visibility: visible;
  }

  .global-nav ul {
    display: grid;
    gap: 0;
  }

  .global-nav a {
    display: block;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-body);
  }

  .global-nav li:last-child a { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   5. ボタン
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-head);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

/* 通常（赤ベタ）→ ホバーで濃色ベタ。ゴースト側のどの状態とも一致しない。 */
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--text);
  border-color: var(--text);
  color: #FFFFFF;
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--border);
  color: var(--text);
}

/* 通常（透明）→ ホバーで面を敷く。プライマリのどの状態とも一致しない。 */
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--surface);
  border-color: var(--text);
  color: var(--text);
}

/* ヒーロー（暗い面）用。通常は白ベタ、ホバーはアクセントの赤ベタ。 */
.btn--on-dark {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--text);
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

/* ヒーローのゴーストは、通常もホバーも「透明＋白枠＋白文字」のまま。
   ホバーでは白の薄い面だけを敷き、白ベタにはしない（.btn--on-dark と入れ替わらない）。 */
.btn--ghost-on-dark {
  background-color: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #FFFFFF;
}

.btn--ghost-on-dark:hover,
.btn--ghost-on-dark:focus-visible {
  background-color: rgba(255, 255, 255, .16);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.link-more:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

.link-more::after {
  content: "→";
  font-size: var(--fs-note);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* -------------------------------------------------------------------------
   6. ヒーロー
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 72vh, 760px);
  background-color: var(--text);
  color: #FFFFFF;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    var(--overlay-strong) 0%,
    var(--overlay-strong) 40%,
    var(--overlay-mid) 62%,
    var(--overlay-soft) 85%,
    var(--overlay-none) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y-lg) var(--section-y);
}

.hero__body {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
}

.hero__title {
  font-size: var(--fs-display);
  color: #FFFFFF;
}

.hero__text {
  color: #FFFFFF;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-note);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .hero__scrim {
    background-image: linear-gradient(
      0deg,
      var(--overlay-strong) 0%,
      var(--overlay-strong) 48%,
      var(--overlay-mid) 74%,
      var(--overlay-soft) 100%
    );
  }
}

/* 下層ページの見出し帯（写真を置かず余白で作る型） */
.page-head {
  padding-block: var(--section-y-lg) var(--section-y);
  border-bottom: 1px solid var(--border);
}

.page-head__inner {
  display: grid;
  gap: var(--space-4);
}

.page-head .lead { max-width: var(--measure); }

/* -------------------------------------------------------------------------
   7. 画像（比率を固定して CLS を出さない）
   ------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background-color: var(--surface);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--1-1 { aspect-ratio: 1 / 1; }
.media--4-5 { aspect-ratio: 4 / 5; }
.media--3-4 { aspect-ratio: 3 / 4; }
.media--3-2 { aspect-ratio: 3 / 2; }
.media--16-9 { aspect-ratio: 16 / 9; }

.media-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  .media-grid { grid-template-columns: minmax(0, 1fr); }
}

figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-note);
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   8. コンセプト（本文＋写真の2カラム）
   ------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

/* 写真を右カラムに回す（マークアップは写真が先。モバイルでは写真が上） */
.split--flip .split__media { order: 2; }
.split--start { align-items: start; }
.split__body { display: grid; gap: var(--space-4); align-content: start; }
.split__body p { max-width: var(--measure); }

@media (max-width: 767px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split__media { order: 0; }
}

.point-list {
  display: grid;
  gap: var(--space-4);
  counter-reset: point;
}

.point-list > li {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.point-list__title {
  font-size: var(--fs-h3);
}

.point-list__text {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   9. メニュー（抜粋カードと料金表）
   ------------------------------------------------------------------------- */
.card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card__title { font-size: var(--fs-h3); }

.card__price {
  font-family: var(--font-display);
  font-size: var(--fs-20);
}

.card__price span {
  font-family: var(--font-body);
  font-size: var(--fs-note);
  color: var(--text-muted);
}

.card__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* メニューの各カテゴリ（見出し＋料金表）の並び */
.menu-blocks {
  display: grid;
  gap: var(--space-6);
}

.menu-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: start;
}

.menu-block__head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
  .menu-block { grid-template-columns: minmax(0, 1fr); }
}

.table-scroll { overflow-x: auto; }

.price-table { min-width: var(--table-min); }

.price-table caption {
  text-align: left;
  padding-bottom: var(--space-2);
}

.price-table th,
.price-table td {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.price-table tbody th {
  font-size: var(--fs-body);
}

.price-table td {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.price-table td.price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.price-table thead th {
  font-size: var(--fs-note);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.notice {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--surface);
  border-left: 2px solid var(--accent-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.notice strong { color: var(--text); }

.notice ul {
  display: grid;
  gap: var(--space-1);
  padding-left: 1.4em;
  list-style: disc;
}

.notice li::marker { color: var(--accent-2); }

/* メニュー抜粋の料金リスト */
.price-list { display: grid; }

.price-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.price-list__row:first-child { border-top: 1px solid var(--border); }

.price-list dt,
.price-list dd { margin: 0; }

.price-list dt { font-size: var(--fs-h3); }

.price-list__price {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  text-align: right;
  white-space: nowrap;
}

.price-list__text {
  grid-column: 1 / -1;
  max-width: var(--measure);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   10. スタッフ
   ------------------------------------------------------------------------- */
.staff-card { display: grid; gap: var(--space-3); }

/* スタッフのイニシャル表記（顔写真を使わないため、頭文字を目印にする） */
.initial-mark {
  display: grid;
  place-items: center;
  justify-self: start;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-head);
}

.staff-card__role {
  font-size: var(--fs-note);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.staff-card__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: var(--measure);
}

.staff-list {
  display: grid;
  gap: var(--space-8);
}

/* -------------------------------------------------------------------------
   11. アクセス（定義リストと地図プレースホルダ）
   ------------------------------------------------------------------------- */
.info {
  display: grid;
  gap: var(--space-4);
}

.info__row {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.info__row dt {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.info__row dd {
  display: grid;
  gap: var(--space-1);
}

.info__row dd p {
  max-width: var(--measure);
}

@media (max-width: 767px) {
  .info__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

.map-placeholder {
  display: grid;
  place-content: center;
  gap: var(--space-2);
  min-height: 280px;
  padding: var(--space-6);
  text-align: center;
  background-color: var(--surface);
  border: 1px solid var(--border);
}

.map-placeholder__title {
  font-size: var(--fs-h3);
}

.map-placeholder__text {
  font-size: var(--fs-note);
  color: var(--text-muted);
}

.steps {
  display: grid;
  gap: var(--space-3);
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-small);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--accent);
}

/* 図版・一覧の直後に置く補足文 */
.steps + .note,
.map-placeholder + .note,
.table-scroll + .note { margin-top: var(--space-4); }

/* -------------------------------------------------------------------------
   12. 予約導線（CTA 帯）
   ------------------------------------------------------------------------- */
.cta {
  padding-block: var(--section-y-lg);
  background-color: var(--surface);
  border-top: 1px solid var(--border);
}

.cta__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.cta p {
  max-width: var(--measure);
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   13. フォーム（サンプル。action を持たず、どこにも送信しない）
   ------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
}

.field { display: grid; gap: var(--space-2); }

.field > label {
  font-size: var(--fs-small);
}

.field__hint {
  font-size: var(--fs-note);
  color: var(--text-muted);
}

.field-row {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
}

.req {
  margin-left: var(--space-1);
  font-size: var(--fs-note);
  color: var(--accent);
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: var(--space-3);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-body);
}

textarea { resize: vertical; }

.form-status {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}

.form-status strong { font-size: var(--fs-h3); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* メニューの複数選択（チェックボックス）と、選んだ内容の合計表示 */
.menu-field {
  min-width: 0;              /* fieldset 既定の min-content で横に広がらないように */
  padding: 0;
  border: 0;
  margin: 0;
}

.menu-field__legend { font-size: var(--fs-small); }

.menu-choices { display: grid; gap: var(--space-2); }

.menu-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.menu-choice input {
  flex: none;
  width: var(--fs-20);
  height: var(--fs-20);
  margin: 2px 0 0;           /* 1行目の文字の高さに合わせる */
  accent-color: var(--accent);
}

.menu-choice label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-small);
}

.menu-choice__meta { color: var(--text-muted); }

.menu-summary {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.menu-summary__status { font-size: var(--fs-small); }

/* -------------------------------------------------------------------------
   14. フッター
   ------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--section-y);
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer__brand { display: grid; gap: var(--space-3); align-content: start; }

.footer__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-label);
}

.footer__nav { display: grid; gap: var(--space-2); align-content: start; }

.footer__nav a {
  width: fit-content;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
}

.footer__nav a:hover { border-bottom-color: var(--text); }

.footer__notes {
  display: grid;
  gap: var(--space-2);
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.footer__disclaimer,
.footer__credit {
  font-size: var(--fs-note);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* -------------------------------------------------------------------------
   15. モーション設定の尊重
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  html { scroll-behavior: auto; }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   16. グリッドの段組み（768 / 1024 で切り替え）
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--gap-lg { gap: var(--space-4); }
}

@media (max-width: 767px) {
  .grid--2,
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   17. 予約日時の空き状況カレンダー（サンプル）
   JavaScript が動いたときだけ表示する。無効なときは HTML の自由入力欄を使う。
   色は既存トークンのみ（--accent / --accent-2 / --surface / --bg / --border / --text / --text-muted）。
   ------------------------------------------------------------------------- */
.date-picker-field {
  min-width: 0;              /* fieldset 既定の min-content で横に広がらないように */
  padding: 0;
  border: 0;
  margin: 0;
}

.date-picker-field__legend { font-size: var(--fs-small); }

.date-picker { display: grid; gap: var(--space-3); }

.date-picker__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.date-picker__nav {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
}

.date-picker__nav:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.date-picker__range {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-head);
}

/* 曜日の列が入りきらない幅では、カレンダーの箱の中だけを横スクロールさせる */
.date-picker__scroll {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.date-picker__grid {
  display: grid;
  gap: 3px;
  min-width: 460px;          /* これ以下になったら横スクロールに切り替える */
  padding: var(--space-1);           /* フォーカスリングが切れない余白 */
  grid-template-columns: 48px repeat(7, minmax(0, 1fr));
}

.date-picker__row { display: contents; }

.date-picker__time,
.date-picker__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-1) 0;
  font-size: var(--fs-note);
  line-height: var(--lh-head);
  color: var(--text-muted);
}

.date-picker__time { font-size: var(--fs-small); }
.date-picker__dow { font-size: var(--fs-small); color: var(--text); }
.date-picker__head--closed .date-picker__dow { color: var(--text-muted); }

/* 定休日の列は、同じ「定休日」が6枠ぶん縦に並ばないよう、見出し側で1回だけ小さく示す。
   セルの側は記号（−）だけになる。 */
.date-picker__closed-note {
  font-size: var(--fs-note);
  letter-spacing: var(--ls-head);
  color: var(--text-muted);
}

.date-picker__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: var(--space-2) 2px;
  background-color: var(--bg);
  /* 押せる枠は真鍮（--accent-2）の枠線を持ち、押せない枠は下の :disabled で枠線を消す。
     そのため「枠線のあるマス＝押せる」という見分け方がそのまま成立する。 */
  border: 1px solid var(--accent-2);
  border-radius: var(--radius);
  font-size: var(--fs-note);
  line-height: var(--lh-head);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

/* 押せる枠（◎ 空きあり ／ △ 残りわずか）。
   枠線は 1px のまま、内側に同じ色を .5px 重ねて 1.5px 相当に見せる
   （枠線の幅を変えずに強さだけ上げるので、マスの大きさは動かない）。 */
.date-picker__cell:not(:disabled) {
  border-color: var(--accent-2);
  box-shadow: inset 0 0 0 .5px var(--accent-2);
  color: var(--text);
  cursor: pointer;
}

/* 状態テキスト（空きあり／残りわずか）は、時刻より先に読ませたいので濃い文字色にする */
.date-picker__cell:not(:disabled) .date-picker__state { color: var(--text); }

.date-picker__state {
  font-size: 12px;
  white-space: nowrap;
}

/* ホバー／フォーカスでは、押せる枠をアクセント色のベタ面に反転させて「押せるボタン」だと分からせる。
   薄い面に白文字を置かないよう、面は必ず濃いアクセント色にする（#FFFFFF との比 6.6:1）。 */
.date-picker__cell:not(:disabled):hover,
.date-picker__cell:not(:disabled):focus-visible {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 .5px var(--accent);
  color: #FFFFFF;
}

/* わずかな浮きで押せそうに見せる。動きを減らす設定では下の @media で外す。 */
.date-picker__cell:not(:disabled):hover {
  transform: translateY(-1px);
}

/* 押せない枠（× 満席 ／ − 定休日）は、枠線を消して背景と文字を後ろに下げる。 */
.date-picker__cell:disabled {
  background-color: var(--surface);
  border-color: transparent;
  box-shadow: none;
  color: var(--text-muted);
  cursor: not-allowed;
}

.date-picker__mark { font-size: var(--fs-16); }
.date-picker__state { font-size: var(--fs-13); }

/* 選択中の表示。行の高さが変わらないよう、常に場所だけ確保しておく */
.date-picker__rank {
  visibility: hidden;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-head);
}

.date-picker__cell.is-selected,
.date-picker__cell.is-selected:not(:disabled):hover,
.date-picker__cell.is-selected:focus-visible {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 .5px var(--accent);
  color: #FFFFFF;
}

/* 選択済みの枠にマウスを乗せたときは、解除できることが分かるよう一段濃くする */
.date-picker__cell.is-selected:not(:disabled):hover {
  background-color: var(--text);
  border-color: var(--text);
  box-shadow: inset 0 0 0 .5px var(--text);
}

.date-picker__cell.is-selected .date-picker__rank { visibility: visible; }

/* 週の切り替えボタンの直下・グリッドの直前に置く操作案内。
   「押せる枠はどれか」を、表を見る前に読ませる。 */
.date-picker__howto {
  font-size: var(--fs-13);
  color: var(--text);
  letter-spacing: var(--ls-body);
}

.date-picker__keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--fs-note);
  color: var(--text-muted);
}

.date-picker__keys li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.date-picker__chosen-title {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-head);
}

.date-picker__chosen {
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-small);
}

.date-picker__chosen li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
}

.date-picker__chosen > li.date-picker__empty {
  padding: 0;
  background-color: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: var(--fs-note);
}

.date-picker__chosen-label { flex: 1 1 auto; }

.date-picker__remove {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-note);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.date-picker__remove:hover {
  background-color: var(--text);
  border-color: var(--text);
  color: #FFFFFF;
}

/* 3枠目を押したときだけ文字が入る案内。背景は付けず、アクセント色の文字だけにする。 */
.date-picker__alert {
  font-size: var(--fs-note);
  color: var(--accent);
}

/* 第1希望・第2希望とも埋まったとき、まだ選べる枠を薄くして「これ以上は選べない」ことを見せる。
   選択済みの2枠（.is-selected）と、満席・定休日（:disabled）の見た目は変えない。 */
.date-picker[data-limit="reached"] .date-picker__cell:not(.is-selected):not(:disabled) {
  opacity: .45;
}

/* 3枠目を押されたとき、取り消し導線（選択中のご希望の一覧）を一時的に強調する。
   点滅はさせず、枠線だけで示す（動きを減らす設定でも同じ見え方になる）。
   クラスは JavaScript が1.2秒で外す。 */
.date-picker__chosen.is-flash {
  outline: 2px solid var(--accent);
  outline-offset: var(--space-1);
}

@media (max-width: 767px) {
  .date-picker__bar { justify-content: space-between; }
  .date-picker__range { order: -1; width: 100%; }
  .date-picker__grid { grid-template-columns: 44px repeat(7, minmax(72px, 1fr)); min-width: 0; }
}

/* 動きを減らす設定では、このカレンダーの状態変化もアニメーションさせない
   （取り消し導線の強調はもともと点滅せず枠線だけなので、ここでの指定は不要） */
@media (prefers-reduced-motion: reduce) {
  .date-picker__cell,
  .date-picker__remove {
    transition: none;
  }

  /* 押せる枠のわずかな浮きも付けない（動きを減らす設定を尊重する） */
  .date-picker__cell:not(:disabled):hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   18. スタイル一覧（ヘアカタログ／style.html）
   PC 3列／タブレット 3列／スマホ 2列。写真はすべて 3:4 の縦長。
   色は既存トークンのみを使う（新しい色は足さない）。
   ------------------------------------------------------------------------- */
.style-list { display: grid; gap: var(--space-4); }

/* 一覧の見出しと件数の並び（件数は見出しの横に小さく添える） */
.style-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.style-count {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-muted);
  letter-spacing: var(--ls-head);
}

/* 長さ別の絞り込み。JavaScript が有効なときだけ hidden が外れる
   （無効なときは12枚がそのまま全部見える）。 */
.style-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.style-filter__btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.style-filter__btn:hover {
  background-color: var(--surface);
  border-color: var(--text);
}

/* 選択中のボタン。白文字は --accent の上で 6.6:1。 */
.style-filter__btn[aria-pressed="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

.style-grid {
  display: grid;
  gap: var(--space-5) var(--grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* カード全体をリンクにする。白い面・角丸・影は使わず、写真と1行テキストだけ。 */
.style-card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  color: var(--text);
  text-decoration: none;
}

.style-card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--surface);
}

.style-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-card__name {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-h3);
}

.style-card__length {
  font-size: var(--fs-note);
  color: var(--text-muted);
  letter-spacing: var(--ls-label);
}

/* 予約の導線。通常は控えめ（--text-muted は白地で 5.7:1）、
   カードのホバーとフォーカスでアクセント色に変わる。 */
.style-card__cta {
  font-size: var(--fs-note);
  color: var(--text-muted);
  transition: color var(--transition);
}

.style-card:hover .style-card__name { color: var(--accent); }

.style-card:hover .style-card__cta,
.style-card:focus-visible .style-card__cta {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .style-grid {
    gap: var(--space-4) var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   19. スタイル一覧から引き継いだ内容の案内（contact.html）
   JavaScript が slug を対応表で解決できたときだけ表示する。
   ------------------------------------------------------------------------- */
.form-notice {
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-small);
  color: var(--text);
}

/* 絞り込みの状態変化もアニメーションさせない */
@media (prefers-reduced-motion: reduce) {
  .style-filter__btn,
  .style-card__cta {
    transition: none;
  }
}