:root {
  /* === 参考画像実測色（S__25296961 / S__25296962） === */
  --color-bg-header:    #D2CFCA;
  --color-bg-light:     #D5D0CA;   /* Concept：明るいウォームグレージュ */
  --color-text:         #2A2622;
  --color-text-sub:     #574F46;   /* 補助文字：light面#D5D0CAでAA本文4.5以上を確保（実測5.25:1） */
  --color-border-light: #BCB6AD;
  --color-bg-dark:      #3B3937;   /* Design：黒ではなくブラウンを含むチャコール */
  --color-bg-info:      #5A544E;   /* Information：中間トープ */
  --color-bg-reserve:   #544D46;   /* Reserve：Informationより少し暗い */
  --color-bg-footer:    #252523;   /* Footer：最暗 */
  --color-dark-text:    #E9E3D9;
  --color-dark-sub:     #B3A99D;
  --color-border-dark:  rgba(233, 227, 217, 0.24);
  --color-footer-line:  rgba(233, 227, 217, 0.18);
  --color-nav-button:   #4D4640;
  --color-btn-primary:  #35302A;
  --color-btn-secondary: #C9C3B7;  /* LINE相談＝ライトベージュ＋濃文字（docs/49承認パレット。旧#8A8177+明文字は3.0:1でAA未達） */

  /* === フォント（試作＝セリフ：Cormorant Garamond＋Noto Serif JP） === */
  --font-display:      "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-heading-jp: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans:       "Noto Serif JP", "Hiragino Mincho ProN", serif;

  /* === タイポスケール === */
  --fs-100: 12px;
  --fs-200: 12px;
  --fs-300: 14px;
  --fs-400: 16px;
  --fs-500: 18px;
  --fs-600: clamp(18px, 2vw, 26px);
  --fs-650: clamp(24px, 3.4vw, 40px); /* 記事タイトル（Information詳細） */
  --fs-700: clamp(30px, 4.8vw, 60px);
  --fs-700-ja: clamp(24px, 3.4vw, 42px); /* 日本語の説明見出し用（英字大見出しより小さく） */
  --fs-800: clamp(32px, 5.2vw, 70px);
  --fs-900: clamp(76px, 8.2vw, 120px);

  /* === セクション余白（B-4準拠） === */
  --space-section: clamp(84px, 8vw, 132px);
  --space-section-inner: clamp(42px, 5vw, 72px);

  /* === コンテンツ幅 === */
  --width-content: min(100% - 32px, 720px);
  --width-narrow:  980px;
  --width-reading: 720px;

  /* === 角丸 === */
  --radius-sm: 2px;
  --radius-md: 3px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg-light);
  color: var(--color-text);
  font-family: var(--font-sans);
  letter-spacing: 0;
  /* 日本語を文節単位で折り返す（「オフ無/料」のような不自然な改行を防ぐ）。
     Chrome/Edge対応・非対応ブラウザはこの行を無視して従来折返し */
  word-break: auto-phrase;
}

body::selection {
  background: var(--color-btn-primary);
  color: var(--color-dark-text);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

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

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-heading-jp);
  font-weight: 300; /* 見出しはさらに細字（Light）に＝クライアント要望 */
  line-height: 1.3;
  text-wrap: balance;
}

/* 日本語の説明見出しは英字大見出しより一段小さく（重さ回避・Codex提案#5） */
.h2--ja {
  font-size: var(--fs-700-ja);
}

/* 英字見出し・ロゴ（Open Sans）はクラス指定 */
.hero h1,
.brand,
.footer-brand,
.page-title h1,
.section-label,
.section-heading .en-label {
  font-family: var(--font-display);
}

h1 {
  font-size: clamp(38px, 6vw, 88px);
}

h2 {
  font-size: var(--fs-700);
  letter-spacing: 0;
}

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

p {
  line-height: 1.75; /* SP: 本文16px → 行高28px（docs/66。768px+では1.875=30pxへ復元） */
  text-wrap: pretty;
}

.text-line {
  display: block;
}

/* === フォーカス === */
:focus-visible {
  outline: 2px solid var(--color-btn-primary);
  outline-offset: 3px;
}

.section-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-dark-text); /* 暗背景（フッター含む）でもフォーカス枠が見えるように */
}

/* === ヘッダー === */
.site-header {
  min-height: auto;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  background: var(--color-bg-header);
  border-bottom: 1px solid rgba(42, 38, 34, 0.08);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand,
.footer-brand {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* フッターナビ：ページ遷移（primary）と補助/外部リンク（meta）の2グループ */
.footer-nav {
  display: grid;
  gap: 18px;
}

/* Figma準拠：2行とも同サイズ・同色（Open Sans 18px / --color-text） */
/* フッターナビ：上下グループとも同じ表示（区切り線なし）。
   モバイルは2列グリッドで段ズレを防ぎ、PCは横並び（下のメディアクエリ） */
.footer-links {
  display: grid;
  /* 半々の2列＝上下グループで2列目の開始位置が揃う（max-contentだと列幅が文字依存でズレる） */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px 24px;
  font-family: var(--font-display);
  font-size: 16px;
}

/* 各リンクのタップ領域を44px確保（SPの押し間違い防止） */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* JS無効時のフォールバック：ナビを通常フローで表示（隠さない＝必ず辿れる） */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-family: var(--font-display);
  font-size: 16px;
}

/* JS有効時（<head>のインラインスクリプトが html に .has-nav-js を付与）：
   SPはドロワー化して初期は隠す。:where()で詳細度を上げず、768px+の上書きを維持 */
:where(.has-nav-js) .site-nav {
  display: none;
  position: fixed;
  inset: 0;
  padding: 100px 32px 48px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  z-index: 19;
  background: var(--color-bg-light);
  font-size: 22px;
}

:where(.has-nav-js) .site-nav.is-open {
  display: flex;
}

/* オーバーレイ表示中もロゴと閉じるボタンを前面に残す */
.brand,
.nav-toggle {
  position: relative;
  z-index: 21;
}

/* 開時はバーを「×」に変形（transformのみ・reduced-motionは全体ルールで無効化） */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav a:not(.nav-reserve),
.footer-links a {
  position: relative;
  /* タップターゲット 44px 確保 */
  padding-block: 10px;
}

.site-nav a:not(.nav-reserve)::after,
.footer-links a::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -7px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 180ms ease, transform 180ms ease;
}

.site-nav a:hover::after,
.footer-links a:hover::after {
  opacity: 0.45;
  transform: scaleX(1);
}

.nav-reserve {
  min-width: 118px;
  padding: 16px 24px;
  color: var(--color-dark-text);
  text-align: center;
  background: var(--color-nav-button);
  transition: opacity 160ms ease;
}

.nav-reserve:hover {
  opacity: 0.88;
}

/* === ハンバーガーナビ === */
.nav-toggle {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* === Hero === */
.hero {
  min-height: calc(100svh - 86px); /* ヘッダー高(約85px)を引き、開いた瞬間に画面いっぱい */
  position: relative;
  overflow: hidden;
  background-image: url("assets/warm-hero2.jpg");
  background-position: 49% 50%;
  background-size: cover;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(20, 18, 16, 0.22) 0%, rgba(20, 18, 16, 0.12) 42%, rgba(20, 18, 16, 0.18) 100%),
    rgba(30, 27, 23, 0.28);
}

.hero::after {
  background:
    linear-gradient(180deg, rgba(14, 14, 12, 0.04) 0%, transparent 38%, rgba(14, 14, 12, 0.14) 100%);
}

.hero-inner {
  width: var(--width-content);
  min-height: calc(100svh - 86px); /* ヘッダー高(約85px)を引き、開いた瞬間に画面いっぱい */
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--color-dark-text);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 16vw, 104px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
}

.hero-kicker {
  margin-top: clamp(28px, 3.2vw, 44px);
  font-family: var(--font-display);
  font-size: clamp(18px, 2.1vw, 30px);
  line-height: 1.35;
}

/* === セクション === */
.section-light,
.section-dark {
  padding-block: clamp(72px, 16vw, 96px);
  position: relative;
  overflow: hidden;
}

.section-light {
  background-color: var(--color-bg-light);
}

.section-dark {
  color: var(--color-dark-text);
  background-color: var(--color-bg-dark);
}

/* 各セクションは専用の背景画像（単色＋微質感）。Conceptは背景色のみ・テクスチャなし */
/* Design系（design-teaser / ギャラリー）は縦に長い。均一なテクスチャ画像なので、
   SPは原寸タイル（background-size:auto + repeat）で拡大を避けて鮮明に保ち、
   PC（768px〜）では cover で全面表示する（下のメディアクエリ参照） */
.design-teaser,
.section-dark.lower-section {
  background-color: var(--color-bg-dark);
  background-image: url("assets/warm-design4.jpg");
  background-position: center top;
  background-size: auto;
  background-repeat: repeat;
}

.section-dark.information {
  background: var(--color-bg-info) url("assets/warm-information4.jpg") center / cover;
}

.section-dark.reserve {
  background: var(--color-bg-reserve) url("assets/warm-reserve5.jpg") center / cover;
}

.section-inner,
.footer-inner,
.site-footer small {
  position: relative;
  z-index: 1;
}

/* TOPは参考画像どおり、色面の切り替えを見せながら余白を締める */
.concept.section-light {
  padding-block: clamp(48px, 4vw, 62px);
}

.concept .section-inner.narrow {
  max-width: none;
}

.design-teaser.section-dark {
  padding-block: clamp(72px, 7vw, 96px);
}

.information.section-dark {
  padding-block: clamp(56px, 6vw, 82px);
}

.reserve.section-dark {
  padding-block: clamp(58px, 6vw, 86px);
}

.section-inner {
  width: var(--width-content);
  margin-inline: auto;
}

.section-inner.narrow {
  max-width: var(--width-narrow);
}

.section-label,
.meta-label {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: var(--fs-200);
  letter-spacing: 0.10em;
  opacity: 0.72;
}

/* === page-title === */
.page-title {
  padding-top: clamp(52px, 7vw, 104px);
  padding-bottom: var(--space-section-inner);
}

.page-title h1 {
  font-family: var(--font-display);
  font-size: var(--fs-800);
  letter-spacing: 0;
}

/* === テキスト色（ライト面） === */
.concept p,
.split-copy p,
.reserve p,
.page-title p,
.section-heading p,
.about-grid p,
.menu-heading p,
.about-copy p {
  max-width: 680px;
  color: var(--color-text-sub);
  font-size: var(--fs-400);
}

/* ダーク面の本文（Figma準拠：#EDE8E0 で明るく）
   ※ .reserve は section-dark と同一要素にクラス併記のため結合セレクタ（スペースなし） */
.section-dark .split-copy p,
.section-dark .section-heading p,
.section-dark.reserve p {
  color: var(--color-dark-text);
}

.information h2,
.reserve h2 {
  margin-bottom: 28px;
}

.concept h2 {
  margin-bottom: clamp(28px, 3vw, 44px);
}

.concept h2,
.design-teaser h2,
.information h2,
.reserve h2 {
  font-size: 34px; /* SP固定（docs/66。9vwだと430px幅で約39pxまで肥大。768px+でclampへ復元） */
  line-height: 1.16;
}

.concept p + p {
  margin-top: 12px;
}

/* === split レイアウト === */
.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.split-copy p {
  margin-top: 26px;
}

/* === text-arrow === */
.text-arrow {
  width: fit-content;
  margin-top: 40px;
  padding-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-display);
  font-size: 18px;
  border-bottom: 1px solid var(--color-border-light);
}

/* gap は layout プロパティのため transition 禁止。矢印を transform で右移動する */
.text-arrow::after {
  content: "→";
  transition: transform 180ms ease;
}

.text-arrow:hover::after {
  transform: translateX(8px);
}

.section-dark .text-arrow {
  border-bottom-color: var(--color-border-dark);
}

/* === プレビューグリッド（TOP Design） === */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  overflow: hidden;
}

.preview-grid--single {
  grid-template-columns: 1fr;
}

.preview-item {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.preview-grid--single .preview-item {
  aspect-ratio: 16 / 9;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === ニュースリスト === */
.news-list {
  margin-top: 18px;
}

.news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-block: 22px;
  border-bottom: 1px solid var(--color-border-dark);
}

.news-item time,
.news-item p {
  font-size: var(--fs-400);
  color: var(--color-dark-text);
}

/* SP: 日付はタイトルより一段小さく＝情報階層を明確に（docs/66。768px+で16pxへ復元） */
.news-item time {
  font-size: var(--fs-300);
  line-height: 24px;
}

/* お知らせタイトル → 詳細ページへのリンク */
.news-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--color-dark-sub);
}

.section-dark .news-item .news-link {
  color: var(--color-dark-text);
}

.news-link:hover,
.news-link:focus-visible {
  text-decoration-color: currentColor;
}

/* ライト面（Information一覧ページ）のニュースリスト */
.section-light .news-item {
  border-bottom-color: var(--color-border-light);
}

.section-light .news-item time {
  color: var(--color-text-sub);
}

.section-light .news-item p {
  color: var(--color-text);
}

.section-light .news-link {
  text-decoration-color: var(--color-border-light);
}

/* === Information 詳細（記事テンプレート） === */
.page-title--article h1 {
  max-width: 680px;
  font-family: var(--font-heading-jp);
  font-size: var(--fs-650);
  letter-spacing: 0.02em;
  line-height: 1.42;
  text-wrap: balance; /* 1文字だけの折返し孤立を防ぐ（非対応ブラウザは通常折返し） */
}

.article-meta {
  margin-bottom: 18px;
  font-family: var(--font-heading-jp);
  font-size: var(--fs-400);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}

/* 本文全体を読み幅で中央寄せ（従来はpだけ680pxに制限され、外枠980pxとの差分が
   右側だけの余白になっていた）。h2・リンク等も同じ幅に揃う */
.article-body {
  max-width: var(--width-reading);
  margin-inline: auto;
}

.article-body p {
  color: var(--color-text);
  font-size: var(--fs-400);
  line-height: 1.95;
}

.article-body p + p {
  margin-top: 1.3em;
}

.article-body .button {
  margin-top: 34px;
}

/* 記事内の小見出し（プライバシーポリシー等の長文ページ用） */
.article-body h2 {
  margin: clamp(36px, 5vw, 52px) 0 14px;
  font-family: var(--font-heading-jp);
  font-size: var(--fs-600);
  font-weight: 500;
}

.article-body h2 + p {
  margin-top: 0;
}

/* 本文中のテキストリンク（下線で示す）。
   ラベル途中の泣き別れ（「〜ポリシ/ー」等）を防ぎ、リンクは丸ごと次行へ送る
   ※ラベルは最長14字≒230px想定。SP(343px)でも収まる範囲で運用する */
.article-body p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-text-sub);
  white-space: nowrap;
}

.article-body p a:hover,
.article-body p a:focus-visible {
  text-decoration-color: currentColor;
}

.policy-date {
  margin-top: clamp(36px, 5vw, 52px);
  color: var(--color-text-sub);
  font-size: var(--fs-300);
}

.article-footer {
  margin-top: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--color-border-light);
}

.article-footer .text-arrow {
  margin-top: 30px;
}

/* === Reserve === */
.reserve {
  padding-top: clamp(64px, 7vw, 104px);
}

.reserve-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.reserve-actions,
.inline-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* === ボタン === */
.button {
  min-width: min(236px, 100%);
  min-height: 64px;
  padding: 20px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  font-family: var(--font-display);
  font-size: 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: opacity 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  opacity: 0.88;
}

.button::after {
  content: "→";
}

.button-primary {
  color: var(--color-dark-text);
  background: var(--color-btn-primary);
  border-color: rgba(236, 234, 230, 0.22);
}

.button-secondary {
  color: var(--color-text); /* 明地に濃文字＝8.56:1（AA） */
  background: var(--color-btn-secondary);
  border-color: transparent;
}

/* === フッター（ライト面・Reserveとの重複回避＆軽く終わる） === */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 6vw, 82px) max(48px, calc((100vw - 1136px) / 2));
  color: var(--color-dark-text);
  background: var(--color-bg-footer) url("assets/warm-footer3.jpg") center / cover;
  border-top: 1px solid rgba(233, 227, 217, 0.10);
}

.footer-inner {
  display: grid;
  gap: 36px;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--color-footer-line);
}

.site-footer p,
.site-footer small {
  color: var(--color-dark-sub);
}

.site-footer small {
  display: block;
  margin-top: 34px;
}

/* フッター：ロゴを一段太く・明るくして、タグラインとメリハリを付ける
   （Cormorantは600が最大ウェイト＝faux boldを避け600を使用）
   色は .site-footer p より詳細度を上げる必要があるため .site-footer 併記 */
.site-footer .footer-brand {
  font-weight: 600;
  color: var(--color-dark-text);
}

.footer-inner p:not(.footer-brand) {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

/* === アクセシビリティ補助 === */
.visually-small {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.components-page .site-header {
  position: static;
}

/* === lower-section === */
.lower-section {
  border-top: 1px solid rgba(38, 38, 42, 0.08);
}

.section-dark.lower-section {
  border-top-color: var(--color-border-dark);
}

/* === section-heading === */
.section-heading {
  margin-bottom: clamp(38px, 5vw, 64px);
  display: grid;
  align-items: start;
  gap: 16px;
}

/* === 価格表 === */
.menu-heading {
  max-width: var(--width-reading);
  margin-bottom: clamp(38px, 5vw, 64px);
}

.menu-heading h2 {
  margin-bottom: 20px;
}

.menu-design-link {
  margin-top: 28px;
  font-size: var(--fs-400);
}

.price-table {
  border-top: 1px solid var(--color-border-light);
}

.price-head {
  display: none;
}

/* 料金表：SPはラベルと金額を横一行にして、HAND/FOOTを比較しやすくする */
.price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "info info"
    "hand foot";
  column-gap: 0;
  row-gap: 16px;
  padding-block: 24px;
  border-bottom: 1px solid var(--color-border-light);
}

.price-row__info { grid-area: info; }
.price-row__hand { grid-area: hand; }
.price-row__foot { grid-area: foot; }

.price-row h3 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.35;
}

.price-row__info p,
.credential-list p,
.flow-step p {
  color: var(--color-text-sub);
  font-size: var(--fs-300);
  line-height: 24px;
}

.price-row__hand,
.price-row__foot {
  min-width: 0;
  min-height: 28px;
  padding-inline: 8px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--color-text);
  font-family: var(--font-heading-jp);
  font-size: clamp(18px, 1.8vw, 22px);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  white-space: nowrap;
}

.price-row__foot {
  border-left: 1px solid var(--color-border-light);
}

/* HAND/FOOTラベル（各料金に常時表示＝どちらの料金か一目で分かるように） */
.price-svc {
  color: var(--color-text-sub);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === フィルター === */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 42px;
}

.filter-row button {
  min-height: 44px;
  padding: 10px 18px;
  color: var(--color-dark-sub);
  background: transparent;
  border: 1px solid var(--color-border-dark);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.filter-row button[aria-pressed="true"],
.filter-row .is-active {
  color: var(--color-bg-dark);
  background: var(--color-dark-text);
  border-color: transparent;
}

/* === ギャラリー === */
.gallery-check {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.gallery-tile {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
}

.gallery-tile__button {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 280ms ease, opacity 280ms ease;
}

.gallery-tile__button:hover img {
  opacity: 0.88;
  transform: scale(1.015);
}

.gallery-instagram {
  margin-top: clamp(42px, 6vw, 72px);
  display: flex;
  justify-content: flex-end;
}

.gallery-instagram .text-arrow {
  margin-top: 0;
}

/* === Design詳細モーダル === */
.has-dialog-open {
  overflow: hidden;
}

.design-modal {
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100svh - 32px);
  padding: 0;
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 80px rgba(24, 21, 18, 0.34);
  overflow: auto;
}

.design-modal::backdrop {
  background: rgba(21, 20, 18, 0.76);
}

.design-modal__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.design-modal__media {
  min-height: 0;
  background: var(--color-bg-dark);
}

.design-modal__media img {
  width: 100%;
  height: min(56svh, 520px);
  object-fit: contain;
}

.design-modal__body {
  padding: clamp(32px, 8vw, 56px);
}

.design-modal__body .section-label {
  margin-bottom: 12px;
  color: var(--color-text-sub);
}

.design-modal__body h2 {
  max-width: 18em;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.design-modal__description {
  margin-top: 24px;
  max-width: 34em;
  color: var(--color-text-sub);
  font-size: var(--fs-400);
  line-height: 1.9;
  white-space: pre-line;
  text-wrap: pretty;
}

.design-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--color-dark-text);
  background: rgba(37, 37, 35, 0.76);
  border: 1px solid var(--color-border-dark);
  border-radius: 50%;
  cursor: pointer;
}

.design-modal__close span {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.design-modal [hidden] {
  display: none;
}

/* === About === */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 80px);
}

.about-grid h2 {
  margin-bottom: 24px;
}

.about-copy {
  max-width: var(--width-reading);
}

/* 長文の段落は字単位の折返し＝右端まで詰める（文節折返しだと行末の空きが目立つ）。
   短い説明文・見出しはbodyの auto-phrase を維持。
   text-wrap も既定に戻す：Safariの pretty は全行の右端を滑らかにするため
   行を早めに折り返し、iPhoneで右側の空きが残る（Chromeのprettyは末尾4行のみ） */
.about-copy p,
.article-body p {
  word-break: normal;
  text-wrap: wrap;
}

.about-copy p + p {
  margin-top: 18px;
}

.about-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.about-feature-grid .section-label {
  margin-bottom: 18px;
}

/* === 資格リスト === */
.credential-list {
  border-top: 1px solid var(--color-border-light);
}

.credential-list article {
  padding-block: 28px;
  border-bottom: 1px solid var(--color-border-light);
}

/* === フローチェック === */
.flow-check {
  margin-top: clamp(54px, 7vw, 86px);
  /* ol要素でも使用: デフォルトのリストスタイルをリセット */
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.flow-step {
  min-height: 92px;
  padding: 26px 20px;
  display: grid;
  gap: 14px;
  align-content: start;
  text-align: center;
  border-bottom: 1px solid var(--color-border-light);
}

.flow-step:last-child {
  border-bottom: 0;
}

.flow-step__no {
  color: var(--color-text-sub);
  font-family: var(--font-display);
  font-size: var(--fs-400);
}

.flow-step__icon {
  color: var(--color-text-sub);
}

.flow-step__icon svg {
  width: 32px;
  height: 32px;
  display: block;
  margin-inline: auto;
}

.flow-step h3 {
  margin-bottom: 6px;
  font-size: var(--fs-400);
  font-weight: 500;
}

/* === Access === */
.access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(42px, 7vw, 86px);
  align-items: center;
}

.map-embed {
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background-color: var(--color-border-light);
}

.map-embed iframe {
  width: 100%;
  min-height: 420px;
  height: 100%;
  border: 0;
  display: block;
  /* サイトの落ち着いたブラウン基調へ控えめにトーン調整。
     操作・ピン・ズームなど地図の機能には影響しない（表示色のみ） */
  filter: grayscale(0.25) sepia(0.12) contrast(0.96);
}

.info-list {
  margin: 32px 0 36px;
}

.info-list div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-block: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.info-list dt {
  color: var(--color-text-sub);
  font-size: var(--fs-300);
}

.info-list dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-300);
}

/* === Access Reserve 3ブロック === */
.access-reserve-block {
  padding-block: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--color-border-light);
}

.access-reserve-block:last-child {
  border-bottom: 0;
}

.access-reserve-block p {
  max-width: 640px;
  margin-block: 12px 24px;
  color: var(--color-text);
  font-size: var(--fs-400);
}

/* Access の予約ブロックは中間面（reserve=section-dark）に乗るため明文字・暗罫線に */
.section-dark .access-reserve-block {
  border-bottom-color: var(--color-border-dark);
}

.section-dark .access-reserve-block p {
  color: var(--color-dark-text);
}

/* === Care レイアウト === */
.care-layout,
.profile-layout,
.profile-summary-layout,
.design-focus-layout,
.note-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.care-copy {
  margin-top: 24px;
}

.care-copy p {
  /* SP: 通常本文と同サイズ（docs/66。長文3段落の18px強調は過剰。768px+で18px/32pxへ復元） */
  font-size: var(--fs-400);
  line-height: 28px;
}

.care-copy p + p {
  margin-top: 16px;
}

/* === プロフィール写真 === */
.profile-photo {
  margin: 0;
  /* 元写真(1567×1045≒3:2)をノートリミングで見せる＝「左で施術・右に横顔」の構図を保つ */
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 本人写真の差し込み待ち＝枠だけのプレースホルダ */
.profile-photo--placeholder,
.care-photo--placeholder {
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-light);
}

.profile-photo__note,
.care-photo__note {
  color: var(--color-text-sub);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* === ケア写真 === */
.care-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.care-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 縦長写真の上部（両手の爪）を横4:3に切り出す */
  object-position: center top;
}

/* === プロフィール名 === */
.profile-name {
  margin: 8px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
}

/* === メニュー区分・注記 === */
.menu-category {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: var(--fs-200);
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.menu-note {
  margin-top: 22px;
  color: var(--color-text-sub);
  font-size: var(--fs-200);
}

/* === オプション（単価項目：REPAIR / オフ / MAGNET等） === */
.option-block {
  margin-top: clamp(44px, 6vw, 72px);
}

.option-block__title {
  margin-bottom: 20px;
  font-family: var(--font-heading-jp);
  font-size: clamp(20px, 2.2vw, 28px); /* 大見出し(42px)より一段下の階層 */
  font-weight: 300;
}

.option-list {
  border-top: 1px solid var(--color-border-light);
}

.option-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid var(--color-border-light);
}

.option-row dt {
  font-family: var(--font-display); /* コース名(h3)と同じCormorant＝表全体で項目名の書体を統一 */
  /* コースより一段小さく＝付帯項目の階層。大文字表記・日本語名が22pxだと光学的に肥大して見えるため */
  font-size: var(--fs-500);
  font-weight: 600;
  line-height: 1.35;
}

.option-row dd {
  margin: 0;
}

.option-price {
  color: var(--color-text);
  font-family: var(--font-heading-jp);
  font-size: var(--fs-500); /* 項目名と同段＝コース価格(22px)より一段小さく */
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

/* 説明文は2行目で行の全幅に広げる（価格列のぶん右が狭まらないように）。
   PCでは読み幅720pxで頭打ち＝1行が長くなりすぎない */
.option-note {
  grid-column: 1 / -1;
  max-width: var(--width-reading);
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-sub);
}

/* === ミニリスト === */
.mini-list {
  margin-top: 34px;
  border-top: 1px solid var(--color-border-light);
}

.mini-list p {
  padding-block: 18px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--fs-500);
  line-height: 32px;
}

/* ===================================
   モバイルファーストレスポンシブ
   =================================== */

/* 768px以上: タブレット〜PC基本 */
@media (min-width: 768px) {
  /* コンテンツ幅 */
  :root {
    --width-content: min(1224px, calc(100vw - 96px));
  }

  /* SPタイポ調整（docs/66）の復元：タブレット/PCは従来値を維持 */
  p {
    line-height: 1.875; /* 本文16px → 行高30px */
  }

  .care-copy p {
    font-size: var(--fs-500);
    line-height: 32px;
  }

  .news-item time {
    font-size: var(--fs-400);
    line-height: normal;
  }

  .concept h2,
  .design-teaser h2,
  .information h2,
  .reserve h2 {
    font-size: clamp(34px, 9vw, 56px);
  }

  /* ヘッダー */
  .site-header {
    min-height: 92px;
    padding: 0 max(48px, calc((100vw - 1312px) / 2));
    gap: 32px;
  }

  .brand,
  .footer-brand {
    font-size: clamp(32px, 3vw, 44px);
  }

  /* ナビゲーション */
  .nav-toggle {
    display: none !important;
  }

  .site-nav {
    display: flex !important;
    position: static;
    inset: auto;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: clamp(22px, 3vw, 48px);
    background: transparent;
    z-index: auto;
    font-size: var(--fs-500);
  }

  /* Hero */
  .hero,
  .hero-inner {
    min-height: calc(100svh - 92px); /* PCヘッダー高(約92px)を引き、画面いっぱい */
  }

  .hero {
    background-position: 50% 48%;
  }

  .hero h1 {
    font-size: var(--fs-900);
  }

  /* セクション余白 */
  .section-light,
  .section-dark {
    padding-block: var(--space-section);
  }

  .lower-section {
    padding-block: clamp(80px, 8vw, 112px);
  }

  .concept.section-light {
    padding-block: clamp(64px, 6vw, 96px);
  }

  .design-teaser.section-dark {
    padding-block: clamp(72px, 7vw, 96px);
  }

  .information.section-dark {
    padding-block: clamp(56px, 6vw, 82px);
  }

  .reserve.section-dark {
    padding-block: clamp(58px, 6vw, 86px);
  }

  /* Design系背景：SPは原寸タイル、PC（768px〜）は cover で全面表示 */
  .design-teaser,
  .section-dark.lower-section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* ボタン */
  .button {
    min-height: 86px;
    padding: 24px 34px;
    font-size: 20px;
  }

  .text-arrow {
    font-size: 20px;
  }

  /* アクション */
  .reserve-actions,
  .inline-actions {
    display: flex;
    flex-wrap: wrap;
  }

  /* グリッドレイアウト */
  .split-layout,
  .about-grid,
  .care-layout,
  .profile-layout,
  .profile-summary-layout,
  .about-feature-grid,
  .design-focus-layout,
  .note-layout {
    grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1.28fr);
  }

  /* .reserve-layout はボタン列が広く 720px コンテナに収まらないため、2カラムは1024px以上で（下記） */

  /* プロフィール：横長3:2写真のため半々（0.72frだと写真が小さくなりすぎる） */
  .profile-summary-layout {
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
  }

  .about-grid {
    grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
    gap: clamp(42px, 8vw, 110px);
  }

  .split-layout {
    gap: clamp(48px, 9vw, 120px);
  }

  .care-layout,
  .profile-layout,
  .profile-summary-layout,
  .about-feature-grid,
  .design-focus-layout,
  .note-layout {
    grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
    gap: clamp(42px, 8vw, 110px);
  }

  /* プロフィール：横長3:2写真とテキストを半々に（写真約557×371px） */
  .profile-summary-layout {
    grid-template-columns: minmax(300px, 1fr) minmax(360px, 1fr);
  }

  .access-grid {
    grid-template-columns: minmax(360px, 1.04fr) minmax(320px, 0.96fr);
    gap: clamp(42px, 7vw, 86px);
  }

  /* section-heading */
  .section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
  }

  /* news-item：日付列を詰めて間延びを抑える */
  .news-item {
    min-height: 60px;
    grid-template-columns: 116px 1fr;
    align-items: center;
    gap: 24px;
    padding-block: 0;
  }

  /* price-row */
  .price-row {
    grid-template-columns: 1fr 116px 116px;
    grid-template-areas: "info hand foot";
    column-gap: 36px;
    row-gap: 0;
    padding-block: 0;
    min-height: 104px;
    align-items: center;
  }

  /* PCは従来どおり、HAND/FOOTラベルと金額を縦積み・右揃えで列に収める */
  .price-row__hand,
  .price-row__foot {
    min-height: 0;
    padding-inline: 0;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    text-align: right;
  }

  .price-row__foot {
    border-left: 0;
  }

  /* Care見出し：左カラム(0.82fr)に text-line どおり2行で収める（42pxだと1行目が約20px溢れて3行化） */
  .care-layout .h2--ja {
    font-size: clamp(24px, 3vw, 38px);
  }

  /* フロー */
  .flow-check {
    grid-template-columns: repeat(5, 1fr);
  }

  .flow-step {
    min-height: 148px;
    border-right: 1px solid var(--color-border-light);
    border-bottom: 0;
  }

  .flow-step:last-child {
    border-right: 0;
  }

  /* ギャラリー */
  .gallery-check {
    grid-template-columns: repeat(2, 1fr);
  }

  .design-modal__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    min-height: min(720px, calc(100svh - 64px));
  }

  .design-modal__media img {
    height: 100%;
    min-height: min(720px, calc(100svh - 64px));
  }

  .design-modal__body {
    align-self: center;
    padding: clamp(42px, 4vw, 64px);
  }

  .design-modal__close {
    color: var(--color-text);
    background: transparent;
    border-color: var(--color-border-light);
  }

  /* footer */
  .footer-inner {
    display: flex;
    justify-content: space-between;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 3vw, 42px);
    font-size: 16px;
  }

  /* Information→Reserve は連続ダーク面：下パディングを詰めて空きを締める */
  .information {
    padding-bottom: clamp(56px, 6vw, 88px);
  }

  /* info-list（「変更・キャンセル」が折り返さない幅） */
  .info-list div {
    grid-template-columns: 140px 1fr;
    gap: 20px;
  }

  /* pattern */
  .pattern-copy-columns {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .lead-line {
    min-height: 176px;
    padding-block: 0;
    grid-template-columns: minmax(300px, 0.86fr) minmax(260px, 1fr) 148px auto;
  }

  .lead-line h2 {
    white-space: nowrap;
  }
}

/* 1024px以上: PC */
@media (min-width: 1024px) {
  .gallery-check {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Reserve は2カラム（コンテナが広がる1024px以上のみ・タブレットは縦積み） */
  .reserve-layout {
    grid-template-columns: minmax(280px, 0.86fr) minmax(420px, 1.14fr);
    gap: clamp(42px, 7vw, 92px);
  }
}


/* ===========================================================
   モーション低減（prefers-reduced-motion）
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================
   旧アーカイブページ用（components.html / pattern-*）
   =========================================================== */
.components-page .site-header {
  position: static;
}

.pattern-page .site-header {
  position: sticky;
}

body.pattern-page {
  overflow-x: hidden;
}

.pattern-hero {
  min-height: min(760px, calc(100vh - 92px));
}

.pattern-hero .hero-inner {
  min-height: min(760px, calc(100vh - 92px));
}

.pattern-copy h2 {
  max-width: 980px;
  margin-bottom: 28px;
}

.pattern-copy-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 6vw, 74px);
}

.first-lead {
  padding-top: 0;
}

.lead-line {
  padding-block: 30px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 44px);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.lead-line h2 {
  font-size: clamp(34px, 4vw, 48px);
  white-space: normal;
}

.lead-line .text-arrow {
  margin-top: 0;
  white-space: nowrap;
}

.mini-design-hint {
  min-height: 86px;
  position: relative;
  overflow: hidden;
  background: #88888A;
}

.mini-design-hint span {
  width: 18%;
  height: 50%;
  position: absolute;
  bottom: 24%;
  border-radius: 46% 46% 36% 36%;
  background: #C6C4BF;
}

.mini-design-hint span:nth-child(1) {
  left: 24%;
  transform: rotate(-8deg);
}

.mini-design-hint span:nth-child(2) {
  left: 43%;
  background-color: #A1A09C;
  transform: rotate(2deg);
}

.mini-design-hint span:nth-child(3) {
  left: 62%;
  background-color: #DEDCD6;
  transform: rotate(8deg);
}

.pattern-flow {
  margin-top: 0;
}

.design-focus {
  padding-block: clamp(82px, 9vw, 132px);
}

.design-focus-layout p {
  max-width: 520px;
  margin-top: 24px;
  color: var(--color-dark-sub);
}

.design-focus-layout > * {
  min-width: 0;
}

.preview-strip {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.preview-strip .gallery-tile {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

.gallery-expanded {
  gap: 28px 22px;
}

.gallery-card p {
  margin-top: 12px;
  color: var(--color-dark-sub);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
}

.pattern-filter {
  gap: 12px;
}

.note-layout .text-arrow {
  margin-top: 0;
}

.pattern-03 .concept {
  padding-block: clamp(68px, 8vw, 104px);
}