/* ==========================================================
   珈琲と焼き菓子 こもれび　共通スタイル【プレミアム版】
   デザイン：docs/premium/03_design.md（A案「木陰の深緑」＋「窓辺の光」）
   技術：docs/premium/03_tech.md（CSS＋素のJavaScript。ライブラリなし）
   スマホ（375px）を基準に作り、768px・1024px で広げる

   動きの切り替え（各ページの <head> の1行スクリプトが <html> に付ける）
     .js         … JavaScriptが動く
     .motion-on  … 演出あり
     .motion-off … 動きを減らす設定（端末の設定 または URLの ?motion=off）。完成形で止める
     .motion-ready … js/motion.js が動き始めたとき（js/motion.js が付ける）。「画面に入ったら」系の演出に使う
   JavaScriptが動かないときは .js も .motion-on も付かないので、すべて完成形で表示される
   ========================================================== */

/* ===== 色・文字・余白・動き（すべてここに集める） ===== */
:root {
  --color-bg: #F7F2E8;          /* 生成り：ページ背景 */
  --color-bg-sub: #EDE3D1;      /* ベージュ：交互の背景・カード */
  --color-text: #2B2622;        /* 本文 */
  --color-text-sub: #5C5249;    /* 補足・注記 */
  --color-line: #D6C8B0;        /* 区切り線（文字には使わない） */
  --color-photo: #DCCDB3;       /* 写真の仮置き */
  --color-photo-text: #3E342B;
  --color-open-bg: #E3ECE2;     /* 営業中 */
  --color-open-text: #24412F;
  --color-closed-bg: #EFE3D3;   /* 定休日 */
  --color-closed-text: #5C3B1E;
  --color-error: #8E2A1E;       /* フォームのエラー文字（生成りの上で約7:1） */
  --color-input-border: #877B6D; /* 入力欄の枠線（白・生成り・ベージュのどれに対しても3:1以上） */

  --color-main: #2F4A3A;        /* 深い緑：見出し・フッター・強調帯 */
  --color-accent: #8A4B1F;      /* 焦げ茶：CTAボタンだけ */
  --color-accent-hover: #6F3C18;
  --color-band-bg: #2F4A3A;
  --color-band-text: #F7F2E8;
  --color-footer-bg: #2F4A3A;

  /* 演出用の色（飾り。文字には使わない） */
  --light: 255, 246, 220;        /* 木漏れ日の光 #FFF6DC（rgba で透明度をつけて使う） */
  --light-warm: 255, 236, 196;   /* カレンダーの光の縁 */
  --leaf-opacity: .10;           /* 葉の影の濃さ（深い緑の10%以下） */
  --window-light-alpha: .09;     /* 平日午後の窓の光（上限12%。文字のコントラスト約6:1以上を保つ） */
  --roast-light: #D9C49A;        /* 焙煎の目盛り：浅煎り */
  --roast-mid: #9A6A3E;          /*             中煎り */
  --roast-dark: #4A3122;         /*             深煎り */
  --bean: #5B3A22;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-heading: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --radius: 6px;
  --radius-button: 6px;
  --space-section: 64px;
  --width-max: 1080px;
  --fixed-cta-height: 96px;

  /* 動きの性格：深呼吸の速さ。ふっと出て、ゆっくり止まる（跳ねない） */
  --ease-settle: cubic-bezier(.22, .61, .36, 1);  /* ふっと出て、ゆっくり止まる */
  --ease-breath: cubic-bezier(.4, 0, .2, 1);      /* 光の揺らぎ・時間の移ろい（呼吸） */
  --dur-touch: .3s;      /* ボタンに触れたとき */
  --dur-fade: .9s;       /* 文字・セクションの登場 */
  --dur-exhale: 1.6s;    /* 「ひと息。」・焙煎の目盛り */
  --dur-light: 4.6s;     /* 最初の木漏れ日（これ以上は動かさない。sun-in 0〜1.6秒＋揺れ 0.4〜4.6秒） */
  --dur-sway: 4.2s;      /* 木漏れ日の1往復（0.4秒後から） */
  --dur-steam: 3.2s;     /* 湯気 */
  --dur-flow: 1.2s;      /* 予約の流れの線 */
  --dur-cal-light: 1.4s; /* カレンダーの光が今日へ移る */
  --dur-veil-in: .3s;    /* ページを移るとき、明るくなる */
  --dur-veil-out: .6s;   /* 次のページが現れる */
  --rise: 10px;          /* 見出しが下から浮かぶ距離 */
  --rise-section: 12px;  /* セクションが下から浮かぶ距離 */

  /* スクロールで動く量（js/motion.js がここを読む） */
  --drift-max: 32px;     /* 木漏れ日が流れる量 */
  --parallax-max: 16px;  /* 特徴の小さい写真のずれ */
}

/* ===== 基本 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--color-bg); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  /* スマホの画面下固定ボタンでフッターが隠れないように */
  padding-bottom: calc(var(--fixed-cta-height) + env(safe-area-inset-bottom));
}
/* hidden 属性が display の指定に負けないようにする */
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--font-heading); color: var(--color-main); line-height: 1.5; font-weight: 600; }
h1 { font-size: 24px; letter-spacing: .02em; }
h2 { font-size: 22px; margin-bottom: 20px; letter-spacing: .04em; }
h3 { font-size: 18px; line-height: 1.6; }
p + p { margin-top: 1em; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.container { width: 100%; max-width: var(--width-max); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 720px; }
.section { padding: var(--space-section) 0; }
.section--sub { background: var(--color-bg-sub); }
.note { font-size: 16px; color: var(--color-text-sub); line-height: 1.7; }
.nowrap { display: inline-block; } /* 「ひと息。」などを途中で改行させない */
.no-break { white-space: nowrap; } /* 「L.O. 17:30」などを途中で改行させない */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 120; background: var(--color-main); color: #fff; padding: 8px 12px; border-radius: var(--radius); }
.skip-link:focus { top: 8px; }

/* 【要確認】の目印（確認が取れたら外す） */
.tag-check {
  display: inline-block; font-size: 14px; font-weight: 700; line-height: 1.7;
  color: var(--color-closed-text); background: var(--color-closed-bg);
  border: 1px dashed var(--color-closed-text); border-radius: 4px; padding: 0 6px;
  vertical-align: middle;
}

/* ===== ヘッダー（スマホ：1行目に店名、2行目に4ページ） ===== */
.site-header { position: relative; z-index: 5; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.site-name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em;
  text-decoration: none; padding: 12px 0 2px; color: var(--color-main); font-family: var(--font-heading); line-height: 1.4;
}
.site-name small { font-size: 14px; font-family: var(--font-body); color: var(--color-text-sub); letter-spacing: .1em; }
.site-name span { font-size: 21px; font-weight: 600; letter-spacing: .08em; }
.site-nav { width: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.site-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 4px; text-decoration: none; font-size: 16px; font-weight: 700; border-bottom: 3px solid transparent; white-space: nowrap; } /* ページ名を途中で改行させない（QA第1回 No.1） */
.site-nav a:hover { border-bottom-color: var(--color-line); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--color-main); }
.header-cta { display: none; }

/* ===== ボタン（ボタン自体は動かさない。触れたとき色が濃くなり「→」が右へ4px） ===== */
.cta-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 8px 20px;
  background: var(--color-accent); color: #fff; border: 2px solid var(--color-accent);
  border-radius: var(--radius-button);
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; line-height: 1.4; text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-touch) var(--ease-settle), border-color var(--dur-touch) var(--ease-settle), color var(--dur-touch) var(--ease-settle);
}
.cta-button:hover, .cta-button:active { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.cta-button .arrow { display: inline-block; font-size: 18px; }
.motion-on .cta-button .arrow { transition: transform var(--dur-touch) var(--ease-settle); }
.motion-on .cta-button:hover .arrow, .motion-on .cta-button:focus-visible .arrow { transform: translateX(4px); }
.cta-button--sub { background: var(--color-bg); color: var(--color-accent); min-height: 52px; flex-wrap: wrap; gap: 0 6px; }
.cta-button--sub:hover, .cta-button--sub:active { background: #F1E7D6; color: var(--color-accent-hover); }
.cta-button--sub small { font-size: 16px; font-weight: 400; }
.cta-group { display: grid; gap: 10px; }
.text-link { font-weight: 700; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }

/* ===== 本日の営業（札／太字の一文／補足の3段） ===== */
.today-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: var(--radius); font-size: 16px; line-height: 1.6; background: var(--color-bg-sub); }
.today-status--open { background: var(--color-open-bg); color: var(--color-open-text); }
.today-status--closed { background: var(--color-closed-bg); color: var(--color-closed-text); }
.today-status__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; border: 1.5px solid currentColor; border-radius: 999px; padding: 0 10px; font-size: 16px; background: rgba(255,255,255,.55); }
.today-status--open .today-status__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.today-status--closed .today-status__label::before { content: "休"; font-size: 16px; }
.today-status strong { display: block; font-weight: 700; }
.today-status__detail { display: block; }
.today-status a { font-weight: 700; text-underline-offset: 3px; }
/* 営業日の札の「●」が1回だけ灯る（点滅しない）。#3 */
@keyframes lamp { from { opacity: .25; } to { opacity: 1; } }
.motion-on .today-status--open .today-status__label::before { animation: lamp 1.2s var(--ease-breath) var(--lamp-delay, .2s) 1 both; }

/* ===== 写真の仮置き（撮影後に img に差し替え） ===== */
.photo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--color-photo); color: var(--color-photo-text);
  border-radius: var(--radius); font-size: 16px; line-height: 1.7; padding: 16px; aspect-ratio: 4 / 3;
  width: 100%; object-fit: cover;
}
.photo--square { aspect-ratio: 1 / 1; }
.photo--wide { aspect-ratio: 16 / 9; }
/* 光・湯気を重ねる写真の仮枠（光が見えるよう少し濃い色。説明は左下の札に書く） */
.photo--lit {
  position: relative; display: block; padding: 0; overflow: hidden;
  background: linear-gradient(155deg, #CDB995 0%, #B4966E 55%, #8C7052 100%);
}
.photo--cup { background: linear-gradient(170deg, #C7B08C 0%, #A98B66 60%, #7E6247 100%); }
.photo__label {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  max-width: calc(100% - 20px);
  background: rgba(247, 242, 232, .92); color: var(--color-photo-text);
  font-size: 14px; line-height: 1.5; padding: 4px 8px; border-radius: 4px; text-align: left;
}

/* ==========================================================
   トップ
   ========================================================== */

/* ===== 1 ファーストビュー（木漏れ日＋見出し3段） ===== */
.hero { position: relative; padding: 14px 0 40px; overflow: hidden; }
.hero__grid { position: relative; display: grid; gap: 20px; }
.hero__media { position: relative; z-index: 0; }
.hero__photo { aspect-ratio: 16 / 9; }
.hero__text { position: relative; z-index: 2; display: grid; gap: 14px; }
.hero h1 { font-size: 24px; line-height: 1.5; letter-spacing: .04em; }
.hero__line { display: block; }
.hero__exhale { display: block; font-size: 34px; line-height: 1.3; margin-top: 2px; letter-spacing: .08em; white-space: nowrap; }
.hero__lead { font-size: 16px; line-height: 1.8; }
.hero__main-cta { display: none; } /* スマホ：画面下の固定ボタンが同じ役割（768px以上で表示） */
.hero .today-status { --lamp-delay: .8s; } /* 本日の営業が現れ始めて少し後に灯り、2.0秒で灯り終わる（QA第1回 No.3） */

/* 木漏れ日の層（飾り）。写真とその周りに、光の粒と葉の影。#1 */
.komorebi {
  position: absolute; inset: -40px -20px 0; z-index: 1; pointer-events: none; overflow: hidden;
  /* 文字の後ろでは弱める（葉の影は約3%以下になる） */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.18) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.18) 100%);
}
/* 外側の箱＝スクロールで流れる（JS）／中の箱＝最初の1往復（CSS）／一番内側＝ぼかし（動かさない） */
.komorebi__drift, .komorebi__leaves-drift, .komorebi__leaves-sway { position: absolute; inset: 0; }
.komorebi__leaves-sway { transform-origin: 20% 0%; }
.komorebi__leaves {
  position: absolute; left: -10%; top: -6%; width: 120%; height: 70%;
  color: var(--color-main); opacity: var(--leaf-opacity); filter: blur(7px);
}
.spot {
  position: absolute; border-radius: 50%; opacity: var(--o);
  background: radial-gradient(circle, rgba(var(--light), .95) 0%, rgba(var(--light), .5) 32%, rgba(var(--light), 0) 70%);
}
.spot--pc { display: none; } /* スマホは5つ、PCは9つ */

@keyframes sun-in { from { opacity: 0; } to { opacity: var(--o); } }
@keyframes sway {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(var(--dx), var(--dy)); }
  75%  { transform: translate(calc(var(--dx) * -.5), calc(var(--dy) * -.4)); }
  100% { transform: translate(0, 0); }
}
@keyframes leaves-sway {
  0%   { transform: rotate(0deg) translateX(0); }
  40%  { transform: rotate(1.2deg) translateX(8px); }
  75%  { transform: rotate(-.6deg) translateX(-4px); }
  100% { transform: rotate(0deg) translateX(0); }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }

/* 開いたときだけ。4.6秒で止まり、それ以降は自分では動かない */
.motion-on .spot { animation: sun-in var(--dur-exhale) var(--ease-settle) var(--delay, 0s) 1 both, sway var(--dur-sway) var(--ease-breath) .4s 1 both; }
.motion-on .komorebi__leaves-sway { animation: leaves-sway var(--dur-sway) var(--ease-breath) .4s 1 both; }
.motion-on .komorebi:not(.is-settled) .spot,
.motion-on .komorebi:not(.is-settled) .komorebi__leaves-sway,
.motion-on .komorebi__drift, .motion-on .komorebi__leaves-drift { will-change: transform; }
/* 見出しが1段ずつ、「ひと息。」は最後に。#2 */
.motion-on .hero .reveal { animation: rise-in var(--dur-fade) var(--ease-settle) var(--delay, 0s) 1 both; }
.motion-on .hero .hero__exhale { animation-duration: var(--dur-exhale); }

/* ===== 2 お知らせ（動かさない） ===== */
.news { background: var(--color-bg-sub); border-radius: var(--radius); padding: 20px; }
.news h2 { font-size: 18px; margin-bottom: 8px; }
.news ul { list-style: none; margin: 0; padding: 0; }
.news li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--color-line); font-size: 16px; }
.news time { color: var(--color-text-sub); font-size: 16px; white-space: nowrap; }

/* ===== 3 共感（文章の枠が写真の端に重なる＝崩し①／湯気） ===== */
.empathy__grid { position: relative; }
.empathy__media { position: relative; }
.empathy__photo { aspect-ratio: 4 / 3; }
.empathy__text {
  position: relative; z-index: 3; background: var(--color-bg);
  margin: -32px 0 0 24px; padding: 24px 0 0 20px;
}
.empathy-quote { margin: 0; font-size: 17px; line-height: 2.1; }
.empathy-quote cite { display: block; margin-top: 12px; font-style: normal; color: var(--color-text-sub); font-size: 16px; }

/* 湯気（細い線3本）。JSが動かないときは出さない。#5 */
.steam { display: none; }
.js .steam {
  display: block; position: absolute; left: 34%; top: 6%; width: 32%; height: 58%; z-index: 2; overflow: visible; pointer-events: none;
}
.steam path { fill: none; stroke: rgba(255, 252, 244, .85); stroke-width: 3; stroke-linecap: round; opacity: .35; }
@keyframes steam {
  0%   { stroke-dashoffset: 200; opacity: 0; transform: translateY(8px); }
  35%  { opacity: .85; }
  100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-12px); }
}
.motion-ready .steam path { opacity: 0; stroke-dasharray: 200; stroke-dashoffset: 200; }
.motion-ready .empathy.in-view .steam path { animation: steam var(--dur-steam) var(--ease-breath) var(--delay, 0s) 1 both; }

/* ===== 4 特徴3つ（大きな番号＋写真の重なり＝崩し②） ===== */
.features { list-style: none; margin: 0; padding: 28px 0 0; display: grid; gap: 64px; }
.feature { position: relative; min-width: 0; }
.feature__media { position: relative; width: 84%; margin-bottom: 52px; }
.feature:nth-child(even) .feature__media { margin-left: auto; }
.feature__main { aspect-ratio: 4 / 3; }
.feature__sub {
  position: absolute; width: 46%; aspect-ratio: 1 / 1; right: -12%; bottom: -36px; z-index: 2;
  border: 5px solid var(--color-bg-sub); border-radius: 8px;
  background: linear-gradient(140deg, #B99B73, #7F6247);
}
.motion-on .feature__sub { will-change: transform; }
.feature:nth-child(even) .feature__sub { right: auto; left: -12%; }
.feature__sub .photo__label { left: 6px; bottom: 6px; max-width: calc(100% - 12px); }
/* 偶数番（02）は小さい写真が左下に重なるので、大きい写真の説明札を左上へ（右上の番号を避ける）。QA第1回 No.4 */
.feature:nth-child(even) .feature__main .photo__label { top: 10px; bottom: auto; max-width: calc(100% - 110px); }
/* 番号「01」〜「03」は飾り（読み上げない）。Noto Serif JP 400 を4文字だけ読み込む */
.feature__num {
  position: absolute; top: -34px; left: -6px; z-index: 3;
  font-family: var(--font-heading); font-weight: 400; font-size: 56px; line-height: 1; color: var(--color-main);
  letter-spacing: .02em;
}
.feature:nth-child(even) .feature__num { left: auto; right: -6px; }
.feature h3 { margin-bottom: 8px; }

/* ===== 5 平日午後（窓の光が横切る・時間の目盛り） ===== */
.band { position: relative; overflow: hidden; background: var(--color-band-bg); color: var(--color-band-text); }
.band h2 { color: var(--color-band-text); }
.band .container { position: relative; z-index: 2; }
.band p { max-width: 32em; }
/* 窓の形の光（4つの窓ガラス）。JSがスクロールに合わせて動かす。初期値（動きを減らす設定・JSなし）は真ん中。#7 */
.window-light {
  position: absolute; top: 8%; left: 0; width: 56%; height: 84%; z-index: 1; pointer-events: none;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;
  transform: translateX(39%) skewX(-18deg);
}
.motion-on .window-light { will-change: transform; }
.window-light span { background: rgba(247, 242, 232, var(--window-light-alpha)); border-radius: 2px; }
.timeline { margin-top: 28px; max-width: 440px; }
.timeline__track { position: relative; height: 24px; }
.timeline__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(247, 242, 232, .45);
}
.timeline__runner { position: absolute; inset: 0; transform: translateX(calc(var(--p, .5) * 100%)); }
.timeline__sun {
  position: absolute; top: 4px; left: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: rgb(var(--light)); box-shadow: 0 0 0 6px rgba(var(--light), .18);
}
.timeline__labels { display: flex; justify-content: space-between; font-size: 16px; margin-top: 4px; }
.band .timeline-note { margin-top: 12px; }

/* ===== 6 ギフト・予約の流れ（①②③を線がつなぐ）。#9 ===== */
.flow { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 20px; --flow-gap: 20px; }
.flow__step { position: relative; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.flow__num {
  position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-bg); border: 2px solid var(--color-main); color: var(--color-main);
  font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1;
}
.section--sub .flow__num { background: var(--color-bg-sub); }
.flow__body { padding-top: 6px; }
.flow__body h3 { margin-bottom: 4px; }
.flow__body strong { display: block; }
.flow__body p { margin: 2px 0 0; }
/* つなぐ線：①から②、②から③（スマホは縦） */
.flow__step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; background: var(--color-main);
  left: 19px; top: 40px; bottom: calc(var(--flow-gap) * -1); width: 2px;
  transform-origin: 0 0;
}
.motion-ready .flow .flow__step {
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-fade) var(--ease-settle), transform var(--dur-fade) var(--ease-settle);
}
.motion-ready .flow.in-view .flow__step { opacity: 1; transform: none; }
.motion-ready .flow.in-view .flow__step:nth-child(2) { transition-delay: .25s; }
.motion-ready .flow.in-view .flow__step:nth-child(3) { transition-delay: .5s; }
.motion-ready .flow .flow__step::after { transform: scaleY(0); transition: transform calc(var(--dur-flow) / 2) linear; }
.motion-ready .flow.in-view .flow__step::after { transform: none; }
.motion-ready .flow.in-view .flow__step:nth-child(2)::after { transition-delay: calc(var(--dur-flow) / 2); }

/* ===== 7 お客様の声 ===== */
.voices { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.voice { position: relative; background: var(--color-bg); border-radius: var(--radius); padding: 16px 16px 16px 44px; border: 1px solid var(--color-line); }
.voice::before { content: "“"; position: absolute; left: 14px; top: 2px; font-family: var(--font-heading); font-size: 36px; color: var(--color-main); line-height: 1.4; }

/* ===== 共通の2列（写真＋文章） ===== */
.split { display: grid; gap: 24px; align-items: center; }

/* ===== 10 最後のCTA（動かない木漏れ日）。#13 ===== */
.final { text-align: center; position: relative; overflow: hidden; }
.final .container { position: relative; z-index: 1; }
.final .cta-group { max-width: 420px; margin: 24px auto 0; }
.final__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--light), .9), rgba(var(--light), 0) 22%),
    radial-gradient(circle at 80% 30%, rgba(var(--light), .8), rgba(var(--light), 0) 18%),
    radial-gradient(ellipse at 60% 85%, rgba(47, 74, 58, .06), rgba(47, 74, 58, 0) 40%);
}
/* 生成りの背景どうしが続くとき、下に区切り線を入れる */
.section--divided { border-bottom: 1px solid var(--color-line); }

/* ==========================================================
   下層ページ
   ========================================================== */
.page-header { padding: 32px 0 8px; }
.page-header p { margin-top: 12px; }

/* ===== 品名と価格の一覧 ===== */
.price-list { list-style: none; margin: 16px 0 20px; padding: 0; }
.price-list li { padding: 10px 0; border-bottom: 1px dotted var(--color-text-sub); }
.price-list__row { display: flex; align-items: baseline; gap: 8px; }
.price-list__name { font-weight: 700; }
.price-list__dots { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--color-line); transform: translateY(-4px); }
.price-list__price { white-space: nowrap; font-weight: 700; }
.price-list__note { font-size: 16px; color: var(--color-text-sub); margin-top: 2px; }
.label-recommend { display: inline-block; margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--color-main); background: var(--color-bg-sub); border-radius: 4px; padding: 0 8px; }

/* ===== メニューページ ===== */
.menu-block + .menu-block { margin-top: 56px; }
.menu-block .photo { margin-bottom: 20px; }
.menu-columns { display: grid; gap: 0; }

/* 焙煎の目盛り（色の帯＋豆の印）。豆は浅煎り側から動いて止まる。#8
   止まる位置は data/shop-data.js の roast.position（js/motion.js が --roast-pos に入れる） */
.roast { margin: 0 0 24px; }
.roast__title { font-weight: 700; margin-bottom: 4px; }
.roast__lane { position: relative; height: 44px; overflow: hidden; }
.roast__bar {
  position: absolute; left: 0; right: 0; top: 16px; height: 12px; border-radius: 6px;
  background: linear-gradient(to right, var(--roast-light), var(--roast-mid) 50%, var(--roast-dark));
}
.roast__runner { position: absolute; inset: 0; transform: translateX(var(--pos, var(--roast-pos, 50%))); }
.motion-on .roast__runner { transition: transform var(--dur-exhale) var(--ease-settle); will-change: transform; }
.motion-ready .roast:not(.in-view) .roast__runner { --pos: 3%; }
.roast__bean {
  position: absolute; left: -11px; top: 6px; width: 22px; height: 32px;
  border-radius: 50%; background: var(--bean); border: 3px solid var(--color-bg); box-shadow: 0 0 0 1px var(--bean);
}
.roast__bean::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: #C9A57A; border-radius: 2px; }
.roast__labels { display: flex; justify-content: space-between; font-size: 16px; color: var(--color-text-sub); }
.roast__caption { margin-top: 8px; }

/* ===== ギフトのカード ===== */
.gift-cards { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.gift-card { position: relative; min-width: 0; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; align-content: start; }
.gift-card--recommend { border: 2px solid var(--color-main); }
.gift-card__label { justify-self: start; font-size: 16px; font-weight: 700; color: var(--color-band-text); background: var(--color-main); border-radius: 4px; padding: 0 8px; }
.gift-card__price { font-weight: 700; font-size: 18px; }
.gift-card dl { margin: 0; font-size: 16px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.gift-card dt { color: var(--color-text-sub); }
.gift-card dd { margin: 0; }
.steps-notes { margin-top: 20px; display: grid; gap: 4px; }

/* ===== フォーム（演出なし。入力中に動くと迷うため） ===== */
.form { display: grid; gap: 22px; }
.form-field { display: grid; gap: 6px; }
.form-field label, .form-field legend { font-weight: 700; padding: 0; }
.required, .optional { display: inline-block; margin-left: 8px; font-size: 16px; font-weight: 700; border-radius: 4px; padding: 0 6px; line-height: 1.7; vertical-align: middle; }
.required { color: #fff; background: var(--color-main); }
.optional { color: var(--color-text-sub); border: 1px solid var(--color-text-sub); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"],
.form input[type="date"], .form input[type="number"], .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 8px 12px;
  font: inherit; font-size: 16px; color: var(--color-text);
  background: #fff; border: 2px solid var(--color-input-border); border-radius: var(--radius);
}
.form textarea { min-height: 112px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--color-main); }
.form [aria-invalid="true"] { border-color: var(--color-error); }
.form-hint { font-size: 16px; color: var(--color-text-sub); line-height: 1.7; }
.form-error { font-size: 16px; font-weight: 700; color: var(--color-error); line-height: 1.6; }
.form-error:empty { display: none; }
.form-error::before { content: "！ "; }
.form-error-summary { background: #fff; border: 2px solid var(--color-error); border-radius: var(--radius); padding: 12px 16px; color: var(--color-error); font-weight: 700; }
.form-thanks { background: var(--color-open-bg); color: var(--color-open-text); border-radius: var(--radius); padding: 24px 20px; display: grid; gap: 12px; }
.form-thanks h3 { font-size: 20px; }
.form-thanks dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 16px; color: var(--color-text); }
.form-thanks dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.form-thanks dd.form-thanks__note { white-space: pre-wrap; } /* 備考の改行をそのまま見せる */
.form-wrap { max-width: 640px; margin: 0 auto; }
/* JavaScriptが動かないときは送信できないので、フォームを出さない（名前・電話がURLに付かないように）。代わりに <noscript> の案内を出す。QA第1回 No.7 */
html:not(.js) [data-gift-form] { display: none; }
.form-test-note { margin-top: 4px; }

/* ===== よくある質問 ===== */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); }
.faq summary { cursor: pointer; min-height: 52px; padding: 12px 44px 12px 16px; font-weight: 700; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; position: absolute; right: 16px; top: 12px; color: var(--color-main); }
.faq details[open] summary::after { content: "－"; }
.faq details > div { padding: 0 16px 16px; }
.faq-list { display: grid; gap: 0; margin: 0; }
.faq-list dt { font-weight: 700; padding-top: 14px; border-top: 1px solid var(--color-line); }
.faq-list dd { margin: 4px 0 14px; }

/* ===== 店舗情報の表 ===== */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.info-table th { width: 6em; font-weight: 700; padding-right: 12px; }
.map-box { margin-top: 0; }
.info-grid > section + section { margin-top: 48px; }
.access-grid { display: grid; gap: 32px; }

/* ===== 営業カレンダー ===== */
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0 0 12px; padding: 0; font-size: 16px; }
.calendar-legend span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; border-radius: 4px; margin-right: 6px; font-size: 16px; font-weight: 700; }
.calendar-switch { display: flex; gap: 8px; margin-bottom: 12px; }
.calendar-switch button {
  flex: 1; min-height: 44px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  color: var(--color-main); background: var(--color-bg); border: 2px solid var(--color-main); border-radius: var(--radius);
}
.calendar-switch button[aria-pressed="true"] { background: var(--color-main); color: var(--color-band-text); }
.calendar { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.calendar caption { font-family: var(--font-heading); color: var(--color-main); font-size: 20px; font-weight: 600; padding-bottom: 8px; }
.calendar th { font-size: 16px; font-weight: 700; padding: 4px 0; }
/* マスは少し透けさせ、後ろの光（今日を照らす）が見えるようにする */
.calendar td { height: 64px; text-align: center; vertical-align: top; padding: 4px 0; background: rgba(255, 255, 255, .72); border-radius: 4px; font-size: 16px; line-height: 1.3; }
.calendar td.is-empty { background: transparent; }
.calendar td.day-today { background: rgba(255, 255, 255, .3); }
.calendar td small { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.calendar-legend .day-changed { background: #fff; border: 1px solid var(--color-line); }
.day-off, .calendar-legend .day-off { background: var(--color-closed-bg) !important; color: var(--color-closed-text); }
.day-special, .calendar-legend .day-special {
  background: repeating-linear-gradient(135deg, #EFE3D3 0 6px, #E2D2BC 6px 12px) !important; color: var(--color-closed-text);
}
.day-changed { color: var(--color-open-text); }
.day-today, .calendar-legend .day-today { outline: 3px solid var(--color-main); outline-offset: -3px; font-weight: 700; }
.calendar-legend .day-open { background: #fff; border: 1px solid var(--color-line); }
.calendar-notes { list-style: none; margin: 12px 0 0; padding: 0; font-size: 16px; }
.calendar-notes li { padding: 4px 0; }

/* カレンダーの光：左上から「今日」のマスへ移って止まり、そのまま照らす。#10
   光は補助（今日の太枠と「今日」の文字は別にある）。JSが動かないときは出さない */
.cal-wrap { position: relative; }
.cal-wrap [data-calendar] { position: relative; z-index: 1; }
.cal-light { display: none; }
.js .cal-light {
  display: block; position: absolute; z-index: 0; left: 0; top: 0;
  width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--light), 1) 0%, rgba(var(--light-warm), .8) 38%, rgba(var(--light), 0) 70%);
  opacity: 0; transform: translate(var(--lx, 0px), var(--ly, 0px));
}
.js .cal-light.is-on { opacity: 1; }
.motion-on .cal-light { transition: transform var(--dur-cal-light) var(--ease-settle), opacity 1s var(--ease-settle); }

/* お休み情報（シート）が読めなかったときの注意書き */
.data-warning { display: block; width: 100%; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--color-closed-text); }
[data-calendar] > .data-warning { margin-bottom: 8px; }

/* 確認用の表示（?check=1 のときだけ。お客様には出ない） */
.check-panel { background: #fff; border-bottom: 3px solid var(--color-main); padding: 12px 0; font-size: 14px; line-height: 1.7; }
.check-panel__title { font-weight: 700; color: var(--color-main); }
.check-panel ul { margin: 4px 0 0; padding-left: 1.2em; }

/* ===== フッター ===== */
.site-footer { background: var(--color-footer-bg); color: #F7F2E8; padding: 48px 0 32px; font-size: 16px; }
.site-footer .site-name { color: #F7F2E8; }
.site-footer .site-name small { color: #E6DCCB; }
.site-footer address { font-style: normal; margin: 12px 0; }
.site-footer address a { display: inline-block; padding: 8px 0; text-underline-offset: 4px; }
.footer-nav { margin: 16px 0 20px; }
.footer-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px;
  border-bottom: 1px solid rgba(247, 242, 232, .3);
}
.footer-nav li { border-top: 1px solid rgba(247, 242, 232, .3); }
.footer-nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 4px;
  color: #F7F2E8; font-size: 16px; font-weight: 700; text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.footer-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-footer a:focus-visible { outline-color: #F7F2E8; }
.site-footer .footer-cta { max-width: 420px; margin-top: 16px; }
.site-footer .footer-cta .cta-button:focus-visible { outline-color: #F7F2E8; }
.site-footer .copyright { margin-top: 24px; font-size: 16px; color: #E6DCCB; }

/* ===== スマホの画面下固定ボタン（1つだけ。演出で動かさない） ===== */
.fixed-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(247, 242, 232, .97); border-top: 1px solid var(--color-line);
}

/* ===== 登場のフェード（各セクション1回だけ。js/motion.js が .fade を付ける）。#4 =====
   「画面に入るまで隠す」指定は、js/motion.js が動き始めて .motion-ready を付けたときだけ効く
   （motion.js が読み込めなくても、内容が隠れたままにならないように） */
.motion-ready .fade {
  opacity: 0; transform: translateY(var(--rise-section));
  transition: opacity var(--dur-fade) var(--ease-settle), transform var(--dur-fade) var(--ease-settle);
}
.motion-ready .fade.in-view { opacity: 1; transform: none; }
/* motion.js が動き始めた最初の一瞬は、隠すときの動きを切る（表示中のものが消えていくように見せない） */
.motion-init .fade, .motion-init .flow__step, .motion-init .flow__step::after,
.motion-init .roast__runner, .motion-init .cal-light { transition: none !important; }

/* ===== ページ切り替えの光（生成りの幕）。#11 =====
   幕はタップ・キーボード操作を邪魔しない。js/motion.js が動かなくても1.2秒で必ず消える */
.veil {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 70% 20%, #FFFBF0 0%, var(--color-bg) 65%);
  transition: opacity var(--dur-veil-in) var(--ease-settle);
}
.veil.is-on { opacity: 1; }
.veil.is-out { transition-duration: var(--dur-veil-out); }
@keyframes veil-safety { to { opacity: 0; } }
.veil-in .veil { opacity: 1; animation: veil-safety var(--dur-veil-out) var(--ease-settle) 1.2s 1 forwards; }
.motion-off .veil { display: none; }

/* ===== 動きを減らす設定（端末の設定）。.motion-on は付かないが、念のため止める ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .veil { display: none; }
}

/* ===== 768px以上（タブレット） ===== */
@media (min-width: 768px) {
  :root { --space-section: 96px; --drift-max: 48px; --parallax-max: 28px; }
  body { padding-bottom: 0; font-size: 17px; }
  .fixed-cta { display: none; }
  h1 { font-size: 34px; }
  h2 { font-size: 26px; margin-bottom: 28px; }
  h3 { font-size: 20px; }
  .cta-button { font-size: 17px; }
  .container { padding: 0 32px; }
  .site-header .container { flex-wrap: nowrap; gap: 24px; padding-top: 6px; padding-bottom: 6px; }
  .site-name { padding: 8px 0; }
  .site-name span { font-size: 22px; }
  .site-nav { width: auto; margin-left: auto; }
  .site-nav ul { gap: 20px; }
  .header-cta { display: block; flex-shrink: 0; }
  .header-cta .cta-button { min-height: 44px; font-size: 15px; padding: 4px 16px; }

  /* ファーストビュー：左に文字、右に写真（4:3） */
  .hero { padding: 32px 0 72px; }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "text media"; gap: 40px; align-items: center; }
  .hero__media { grid-area: media; }
  .hero__photo { aspect-ratio: 4 / 3; }
  .hero__text { grid-area: text; }
  .hero h1 { font-size: 34px; }
  .hero__exhale { font-size: 50px; }
  .hero__line { white-space: nowrap; } /* 「と」「で、」だけが次の行に落ちないように（QA第1回 No.2。列の幅は下の768〜1023pxの指定で確保） */
  .hero__main-cta { display: flex; } /* 固定ボタンが消える幅で表示 */
  .komorebi {
    inset: -60px -40px -40px 30%;
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 55%, rgba(0,0,0,.25) 85%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to left, #000 0%, #000 55%, rgba(0,0,0,.25) 85%, rgba(0,0,0,0) 100%);
  }
  .komorebi__leaves { height: 90%; }
  .spot--pc { display: block; }

  .news { max-width: 760px; margin: 0 auto; }

  /* 共感：写真を大きめに左、文章の枠が写真の端に48px重なる */
  .empathy__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .empathy__text { margin: 0 0 0 -48px; padding: 36px 0 36px 40px; }

  /* 特徴：2列（写真と文）を左右交互 */
  .features { gap: 96px; padding-top: 48px; }
  .feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  .feature:nth-child(even) .feature__media { order: 2; }
  .feature__media { width: 100%; margin-bottom: 36px; }
  .feature__sub { right: -8%; }
  .feature:nth-child(even) .feature__sub { left: -8%; }
  .feature__num { font-size: 88px; top: -52px; }

  .split, .info-grid, .access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
  .split { align-items: center; }
  .split--top { align-items: start; }
  .info-grid > section + section { margin-top: 0; }
  .gift-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-header { padding: 56px 0 8px; }
  .menu-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
  .menu-columns .menu-block + .menu-block { margin-top: 0; }

  /* 予約の流れ：PCは横に伸びる（トップのギフト欄は列が狭いので縦のまま＝.flow--stack） */
  .flow:not(.flow--stack) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; --flow-gap: 24px; }
  .flow:not(.flow--stack) .flow__step { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .flow:not(.flow--stack) .flow__body { padding-top: 0; }
  .flow:not(.flow--stack) .flow__step:not(:last-child)::after {
    left: 40px; top: 19px; bottom: auto; width: calc(100% + var(--flow-gap) - 40px); height: 2px;
  }
  .motion-ready .flow:not(.flow--stack) .flow__step::after { transform: scaleX(0); }
  .motion-ready .flow.in-view:not(.flow--stack) .flow__step::after { transform: none; }

  .footer-nav ul { display: flex; gap: 32px; border-top: 1px solid rgba(247, 242, 232, .3); }
  .footer-nav li { border-top: 0; }
  .footer-nav a { min-height: 44px; }
}
/* ===== 768〜1023px（タブレット）：1行に店名・ページ・メインCTAを収める。QA第1回 No.1・No.2 ===== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* ヘッダー：店名は小さい行と大きい行の2段にし、間隔を詰める（ページ名は改行させない） */
  .site-header .container { gap: 16px; }
  .site-header .site-name { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 0; line-height: 1.3; flex-shrink: 0; }
  .site-nav ul { gap: 12px; }
  .header-cta .cta-button { padding: 4px 12px; white-space: nowrap; }
  /* ファーストビュー：文字の列を広げ、見出しの1段目・2段目が途中で折り返さないようにする（34pxで9字＝約318px） */
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}
/* ===== 1024px以上（PC） ===== */
@media (min-width: 1024px) {
  :root { --space-section: 112px; }
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  .hero__grid { gap: 56px; }
  .hero h1 { font-size: 40px; }
  .hero__exhale { font-size: 60px; }
  .hero__text { max-width: 30em; }
}

/* ===== 見本の表示（かくいのHPに載せる見本サイト。全ページの一番上に出す） ===== */
.sample-bar { background: var(--color-text); color: #F7F2E8; font-size: 14px; line-height: 1.7; }
.sample-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; padding-top: 8px; padding-bottom: 8px; }
.sample-bar p { margin: 0; min-width: 0; }
.sample-bar__tag {
  display: inline-block; margin-right: 8px; padding: 0 8px; border: 1px solid #F7F2E8; border-radius: 4px;
  font-weight: 700; white-space: nowrap;
}
.sample-bar a { display: inline-flex; align-items: center; min-height: 44px; color: #F7F2E8; font-weight: 700; text-underline-offset: 4px; }
.sample-bar a:focus-visible { outline-color: #F7F2E8; }
.sample-note { font-size: 16px; font-weight: 700; color: var(--color-main); background: var(--color-open-bg); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 20px; }

/* 印刷時は固定ボタン・演出を出さない */
@media print {
  .fixed-cta, .header-cta, .veil, .komorebi, .steam, .cal-light, .window-light { display: none !important; }
  body { padding-bottom: 0; }
  .fade { opacity: 1 !important; transform: none !important; }
}