@charset "UTF-8";
/* ============================================================
   store-cafe.css — カフェ・喫茶・パン・スイーツテーマ
   方向: 明るく余白の多い、写真が主役の誌面。生成りの地に焼き色、手書きの添え書き
   シグネチャー: 木漏れ日がゆれるヒーローと写真の横の添え書き / 焼き上がりの時刻表(つぎの焼き上がりに印)/ 席の ○△× 表
   ============================================================ */
:root {
  --st-bg: #fcf9f2;          /* ミルク */
  --st-surface: #fffefb;
  --st-ink: #3a2e25;         /* 深煎り */
  --st-muted: #6d5f52;
  --st-line: #ebe1cf;
  --st-accent: #98521f;      /* 焼き色(白地で文字にも使える濃さ) */
  --st-accent-ink: #ffffff;
  --butter: #f6ecd7;         /* 焼く前の生地 */
  --butter-deep: #efdfbd;
  --crust: #c98a4b;          /* 飾りの焼き色 */
  --leaf: #7f8c5d;           /* 木の葉の点 */
  --st-font-display: "Klee One", "Hiragino Maru Gothic ProN", "Zen Maru Gothic", serif;
  --st-font-body: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  --st-radius: 6px;
  --wrap: min(1120px, 100% - 36px);
}

body { font-weight: 500; }
h1, h2, h3 { font-family: var(--st-font-display); font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; }
.cf-wrap { width: var(--wrap); margin-inline: auto; }
.cf-wrap--narrow { width: min(760px, 100% - 36px); }
.cf-section { padding-block: clamp(72px, 10vw, 136px); }
.cf-text { margin-top: 18px; font-size: 16px; line-height: 2; }
.cf-note { margin-top: 18px; font-size: 14px; color: var(--st-muted); }
.cf-note--center { text-align: center; }
.cf-squiggle { display: block; width: 120px; height: 10px; margin-top: 4px; color: var(--crust); }

/* 見出し: 小さい手書きのラベル + Klee One の見出し */
.cf-head__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--st-font-display); font-size: 15px; color: var(--st-accent); letter-spacing: 0.1em;
}
.cf-head__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 12px -5px 0 -1px var(--crust); margin-right: 10px; }
.cf-head__title { margin-top: 10px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.55; }
.cf-head__lead { margin-top: 16px; color: var(--st-muted); max-width: 34em; }
.cf-head--center { text-align: center; }
.cf-head--center .cf-head__lead { margin-inline: auto; }

/* ボタン */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 26px; border-radius: 999px;
  background: var(--st-accent); color: var(--st-accent-ink); border: 1px solid var(--st-accent);
  font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--st-ease);
}
.cf-btn:hover { background: #7c4118; transform: translateY(-1px); }
.cf-btn--line { background: transparent; color: var(--st-ink); border-color: color-mix(in srgb, var(--st-ink) 45%, transparent); }
.cf-btn--line:hover { background: var(--butter); color: var(--st-ink); }
.cf-btn svg { width: 18px; height: 18px; }

/* ヘッダー */
.cf-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--st-bg) 90%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--st-line) 70%, transparent);
}
.cf-header__inner { width: var(--wrap); margin-inline: auto; min-height: 66px; display: flex; align-items: center; gap: 28px; }
.cf-logo { display: grid; line-height: 1.25; text-decoration: none; min-width: 0; }
.cf-logo small { font-size: 11px; color: var(--st-muted); letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-logo span { font-family: var(--st-font-display); font-weight: 600; font-size: 22px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-header__nav { margin-left: auto; display: flex; gap: 24px; font-size: 14px; }
.cf-header__nav a { text-decoration: none; padding-block: 6px; background: linear-gradient(var(--crust), var(--crust)) 0 100% / 0 1px no-repeat; transition: background-size 0.3s var(--st-ease); }
.cf-header__nav a:hover { background-size: 100% 1px; }
.cf-header__tel {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 42px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--st-line);
  background: var(--st-surface); text-decoration: none; font-weight: 700; font-size: 14px;
}
.cf-header__tel svg { width: 16px; height: 16px; color: var(--st-accent); }

/* お知らせの帯 */
.cf-today { background: var(--butter); border-bottom: 1px solid var(--butter-deep); }
.cf-today__inner { width: var(--wrap); margin-inline: auto; padding: 10px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 15px; }
.cf-today__label { font-family: var(--st-font-display); color: var(--st-accent); }

/* ---- ヒーロー: 写真が主役の誌面 + 木漏れ日 ---- */
.cf-hero { position: relative; padding: clamp(36px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
.cf-hero__light {
  position: absolute; inset: -10% -10% auto -10%; height: 120%; pointer-events: none; opacity: 0.9;
  background:
    radial-gradient(closest-side, rgba(255, 236, 190, 0.7), transparent) 8% 12% / 260px 200px no-repeat,
    radial-gradient(closest-side, rgba(255, 242, 210, 0.8), transparent) 30% 70% / 180px 150px no-repeat,
    radial-gradient(closest-side, rgba(246, 225, 180, 0.55), transparent) 55% 18% / 320px 240px no-repeat,
    radial-gradient(closest-side, rgba(255, 246, 222, 0.9), transparent) 18% 45% / 120px 100px no-repeat;
  animation: cf-sway 14s ease-in-out infinite alternate;
}
@keyframes cf-sway {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(24px, 14px, 0) rotate(1deg); }
}
.cf-hero__grid { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cf-hero__kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--st-muted); letter-spacing: 0.14em; }
.cf-hero__kicker span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 14px; border-radius: 50%; background: var(--leaf); vertical-align: 3px; }
.cf-hero__name { margin-top: 18px; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.25; letter-spacing: 0.08em; }
.cf-hero__name small { display: block; margin-bottom: 8px; font-family: var(--st-font-body); font-weight: 700; font-size: 15px; letter-spacing: 0.2em; color: var(--st-accent); }
.cf-hero__name.cf-name--m { font-size: clamp(34px, 4.4vw, 52px); }
.cf-hero__name.cf-name--l { font-size: clamp(27px, 3.4vw, 40px); line-height: 1.4; }
.cf-hero__catch { margin-top: 22px; font-family: var(--st-font-display); font-size: clamp(20px, 2.2vw, 25px); line-height: 1.75; color: var(--st-ink); }
.cf-hero__lead { margin-top: 16px; color: var(--st-muted); max-width: 30em; }
.cf-hero__open { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cf-hero__open .open-status { font-size: 14px; }
.cf-hero__closed { font-size: 13px; color: var(--st-muted); padding: 2px 12px; border-radius: 999px; background: var(--butter); }
.cf-hero__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.cf-hero__place { margin-top: 20px; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--st-muted); line-height: 1.7; }
.cf-hero__place svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--st-accent); }

.cf-hero__photo { position: relative; }
.cf-hero__photo img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: 4px; }
.cf-hero__photo .img-note { bottom: auto; top: 10px; }
/* 写真の横の添え書き(手書き風) */
.cf-memo {
  position: absolute; left: clamp(-56px, -4vw, -24px); bottom: -34px; max-width: 78%;
  padding: 14px 22px 10px; background: var(--st-bg); border-radius: 0 4px 0 0;
  font-family: var(--st-font-display); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.7; color: var(--st-ink);
}
.cf-memo small { display: block; font-size: 13px; color: var(--st-accent); letter-spacing: 0.12em; }
.cf-memo .cf-squiggle { width: 100%; max-width: 180px; }

/* ---- 席のこと(受け取り前・後で共通) ---- */
.cf-seats__list { margin-top: 28px; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-seat {
  display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; align-items: center;
  padding: 14px 16px; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-radius);
}
.cf-seat__mark {
  grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--st-font-display); font-size: 21px; line-height: 1; color: var(--st-accent); background: var(--butter);
}
.cf-seat__name { font-weight: 700; line-height: 1.5; }
.cf-seat small { grid-column: 2; font-size: 13px; line-height: 1.6; color: var(--st-muted); }
.cf-seat--some .cf-seat__mark { color: #8a5a14; background: #f7e6c4; }
.cf-seat--no .cf-seat__mark { color: var(--st-muted); background: #efebe4; }
.cf-seat--pending { border-style: dashed; background: transparent; }
.cf-seat--pending .cf-seat__mark { background: transparent; border: 1px dashed var(--st-line); color: var(--st-muted); }
.cf-seats__list--pending { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-pending { margin-top: 18px; font-size: 15px; color: var(--st-muted); }
.cf-pending a { color: var(--st-accent); font-weight: 700; }

/* ---- メニュー(カード。品のひとことを手書き風に) ---- */
.cf-menu { background: var(--st-surface); border-block: 1px solid var(--st-line); }
.cf-menu__cards { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px clamp(20px, 3vw, 36px); }
.cf-menu__card { min-width: 0; padding: clamp(22px, 3vw, 32px); background: var(--st-bg); border-radius: var(--st-radius); }
.cf-menu__cat { font-size: 21px; padding-bottom: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--crust) 60%, transparent); }
.cf-menu__card ul { list-style: none; padding: 0; margin-top: 6px; }
.cf-menu__card li { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--st-line) 70%, transparent); }
.cf-menu__card li:last-child { border-bottom: 0; }
.cf-menu__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.cf-menu__name { flex: 0 1 auto; min-width: min(7em, 100%); overflow-wrap: anywhere; font-weight: 700; }
.cf-menu__row::after { content: ""; flex: 1; order: 1; min-width: 16px; border-bottom: 1px dotted var(--butter-deep); transform: translateY(-5px); }
.cf-menu__price { order: 2; max-width: 100%; margin-left: auto; text-align: right; overflow-wrap: anywhere; font-weight: 700; color: var(--st-accent); }
.cf-menu__note { display: block; margin-top: 2px; font-family: var(--st-font-display); font-size: 15px; line-height: 1.6; color: #7a5a3c; }
.cf-menu__note::before { content: "— "; color: var(--crust); }
.cf-menu .ph { background: var(--st-bg); }

/* ---- 電話の呼びかけ(受け取り前) ---- */
.cf-call { padding-block: clamp(56px, 8vw, 96px); background: var(--butter); }
.cf-call__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cf-call__hand { font-family: var(--st-font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.6; }
.cf-call__tel { display: inline-flex; align-items: center; gap: 12px; font-family: var(--st-font-display); font-size: clamp(28px, 3.6vw, 40px); text-decoration: none; color: var(--st-accent); }
.cf-call__tel svg { width: 28px; height: 28px; }

/* ---- 受け取り前: お店のこと ---- */
.cf-about { padding-bottom: 0; }
.cf-about .cf-text { max-width: 40em; }
.p-prestore .cf-hero { padding-bottom: clamp(24px, 4vw, 56px); }

/* ---- 営業時間・アクセス ---- */
.cf-access__grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.cf-access__hours { margin-bottom: 28px; padding: 22px 24px; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-radius); }
.cf-access__hours h3 { font-size: 19px; }
.cf-week { list-style: none; padding: 0; margin-top: 8px; }
.cf-week li { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; padding: 8px 10px; border-radius: 4px; }
.cf-week li + li { border-top: 1px dashed var(--st-line); }
.cf-week__day { font-family: var(--st-font-display); font-size: 17px; display: flex; align-items: center; gap: 8px; }
.cf-week__day small { font-family: var(--st-font-body); font-size: 11px; font-weight: 700; padding: 0 8px; border-radius: 999px; background: var(--st-accent); color: #fff; line-height: 1.8; }
.cf-week__time { font-variant-numeric: tabular-nums; }
.cf-week li.is-off .cf-week__time { color: var(--st-muted); }
.cf-week li.is-today { background: var(--butter); border-top-color: transparent; }
.cf-week li.is-today + li { border-top-color: transparent; }
.cf-dl { display: grid; grid-template-columns: 6.5em 1fr; font-size: 15px; }
.cf-dl dt, .cf-dl dd { padding: 12px 0; border-bottom: 1px solid var(--st-line); }
.cf-dl dt { color: var(--st-muted); font-size: 14px; }
.cf-dl dd { min-width: 0; }
.cf-dl a { color: var(--st-accent); }
.cf-dl small { color: var(--st-muted); }
.cf-access__map .st-map { border-radius: var(--st-radius); }
.cf-faq { margin-top: 44px; display: grid; gap: 10px; }
.cf-faq details { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-radius); }
.cf-faq summary { position: relative; padding: 18px 52px 18px 20px; font-weight: 700; line-height: 1.6; }
.cf-faq summary::before { content: "Q."; font-family: var(--st-font-display); color: var(--st-accent); margin-right: 8px; }
.cf-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; translate: 0 -50%; font-size: 22px; color: var(--crust); transition: rotate 0.3s; }
.cf-faq details[open] summary::after { rotate: 45deg; }
.cf-faq details p { padding: 0 20px 20px; color: var(--st-muted); }

/* ---- フッター ---- */
.cf-footer { padding: 40px 0; border-top: 1px solid var(--st-line); font-size: 14px; color: var(--st-muted); }
.cf-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.cf-footer__name { font-family: var(--st-font-display); font-size: 20px; color: var(--st-ink); }

/* ============================================================
   受け取り後だけの部品
   ============================================================ */
/* 焼き上がりの時刻表 */
.p-full .cf-bake { background: var(--butter); position: relative; }
.p-full .cf-bake__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.p-full .cf-bake__grid > .cf-head { position: sticky; top: 100px; }
.p-full .cf-bake__board { background: var(--st-surface); border-radius: 10px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 30px 60px -40px rgba(90, 60, 30, 0.45); }
.p-full .cf-bake__now { min-height: 1.9em; font-size: 15px; color: var(--st-muted); padding-bottom: 14px; border-bottom: 1px dashed var(--st-line); }
.p-full .cf-bake__now b { font-family: var(--st-font-display); font-size: 20px; color: var(--st-accent); margin-inline: 2px; }
.p-full .cf-bake__list { list-style: none; padding: 0; margin-top: 8px; position: relative; }
.p-full .cf-bake__item { position: relative; display: grid; grid-template-columns: 4.2em 18px 1fr; gap: 14px; align-items: start; padding: 14px 0; transition: opacity 0.4s; }
.p-full .cf-bake__item::before { content: ""; position: absolute; left: calc(4.2em + 14px + 8px); top: 0; bottom: 0; width: 2px; background: var(--butter-deep); }
.p-full .cf-bake__item:first-child::before { top: 26px; }
.p-full .cf-bake__item:last-child::before { bottom: calc(100% - 26px); }
.p-full .cf-bake__time { white-space: nowrap; font-family: var(--st-font-display); font-size: 22px; line-height: 1.3; color: var(--st-accent); text-align: right; font-variant-numeric: tabular-nums; }
.p-full .cf-bake__dot { position: relative; z-index: 1; margin-top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--st-surface); border: 2px solid var(--crust); }
.p-full .cf-bake__body { display: grid; gap: 2px; min-width: 0; }
.p-full .cf-bake__body b { font-weight: 700; line-height: 1.6; }
.p-full .cf-bake__body small { font-size: 14px; color: var(--st-muted); line-height: 1.6; }
.p-full .cf-bake__item.is-past { opacity: 0.5; }
.p-full .cf-bake__item.is-past .cf-bake__dot { background: var(--butter-deep); border-color: var(--butter-deep); }
.p-full .cf-bake__item.is-next .cf-bake__dot { background: var(--st-accent); border-color: var(--st-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--crust) 25%, transparent); }
.p-full .cf-bake__flag { justify-self: start; margin-top: 4px; font-style: normal; font-family: var(--st-font-display); font-size: 14px; color: #fff; background: var(--st-accent); padding: 1px 12px; border-radius: 999px 999px 999px 2px; }

/* 看板の品 */
.p-full .cf-picks__grid { margin-top: 48px; display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(20px, 3vw, 40px); }
.p-full .cf-pick--main { grid-row: span 3; }
.p-full .cf-picks__grid--1 { grid-template-columns: 1fr; }
.p-full .cf-picks__grid--2 { grid-template-columns: 1fr 1fr; }
.p-full .cf-picks__grid--2 .cf-pick--main { grid-row: auto; }
.p-full .cf-pick { min-width: 0; }
.p-full .cf-pick__img { position: relative; }
.p-full .cf-pick__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.p-full .cf-pick__tag {
  position: absolute; left: 14px; top: -14px; padding: 2px 14px 4px;
  font-family: var(--st-font-display); font-size: 15px; color: var(--st-accent); background: var(--st-bg);
  border-radius: 3px; rotate: -3deg; box-shadow: 0 6px 16px -10px rgba(90, 60, 30, 0.5);
}
.p-full .cf-pick__tag--flat { position: static; display: inline-block; }
.p-full .cf-pick__body { margin-top: 16px; }
.p-full .cf-pick h3 { font-size: clamp(20px, 2vw, 24px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.p-full .cf-pick--main h3 { font-size: clamp(24px, 2.8vw, 30px); }
.p-full .cf-pick__price { font-family: var(--st-font-body); font-size: 16px; font-weight: 700; color: var(--st-accent); }
.p-full .cf-pick p { margin-top: 8px; color: var(--st-muted); font-size: 15px; }
/* 2つ目からは写真と文を横に */
.p-full .cf-picks__grid--3 .cf-pick:not(.cf-pick--main),
.p-full .cf-picks__grid--4 .cf-pick:not(.cf-pick--main) { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.p-full .cf-picks__grid--3 .cf-pick:not(.cf-pick--main) .cf-pick__body,
.p-full .cf-picks__grid--4 .cf-pick:not(.cf-pick--main) .cf-pick__body { margin-top: 0; }
.p-full .cf-picks__grid--3 .cf-pick:not(.cf-pick--main) h3,
.p-full .cf-picks__grid--4 .cf-pick:not(.cf-pick--main) h3 { font-size: 19px; }
.p-full .cf-picks__grid--3 .cf-pick:not(.cf-pick--main) p,
.p-full .cf-picks__grid--4 .cf-pick:not(.cf-pick--main) p { font-size: 14px; line-height: 1.8; }

/* 写真と文の2段(テイクアウト・席) */
.p-full .cf-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.p-full .cf-split--rev > .cf-split__img { order: 2; }
.p-full .cf-split--solo { grid-template-columns: 1fr; max-width: 760px; }
.p-full .cf-split__img img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: 4px; }
.p-full .cf-takeout { padding-bottom: clamp(40px, 5vw, 64px); }
.p-full .cf-seats { padding-top: clamp(40px, 5vw, 64px); }
.p-full .cf-points { margin-top: 22px; list-style: none; padding: 0; display: grid; gap: 10px; }
.p-full .cf-points li { position: relative; padding-left: 26px; }
.p-full .cf-points li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--crust); }

/* 店主 */
.p-full .cf-person { background: var(--st-surface); border-block: 1px solid var(--st-line); }
.p-full .cf-person__grid { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.p-full .cf-person__grid--solo { grid-template-columns: 1fr; max-width: 760px; }
.p-full .cf-person__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 160px 160px 4px 4px; }
.p-full .cf-person__text { margin-top: 22px; display: grid; gap: 1em; line-height: 2.05; }
.p-full .cf-person__sign { margin-top: 24px; display: flex; align-items: baseline; gap: 12px; }
.p-full .cf-person__sign span { font-family: var(--st-font-display); font-size: 26px; }
.p-full .cf-person__sign small { font-size: 13px; color: var(--st-muted); }
.p-full .cf-person__career { margin-top: 14px; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; }
.p-full .cf-person__career li { padding: 2px 12px; border-radius: 999px; background: var(--butter); }

/* お客さまの声 */
.p-full .cf-voices__list { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.p-full .cf-voice { position: relative; padding: 34px 26px 24px; background: var(--st-surface); border-radius: var(--st-radius); border: 1px solid var(--st-line); }
.p-full .cf-voice::before { content: "“"; position: absolute; left: 20px; top: -6px; font-family: Georgia, serif; font-size: 64px; line-height: 1; color: var(--butter-deep); }
.p-full .cf-voice__head { font-family: var(--st-font-display); font-size: 19px; line-height: 1.6; color: var(--st-ink); }
.p-full .cf-voice p + p { margin-top: 10px; font-size: 15px; color: var(--st-muted); }
.p-full .cf-voice .cf-voice__who { font-size: 13px; }

/* フォーム */
.p-full .cf-form { background: var(--butter); }
.p-full .cf-form .st-form { margin-top: 40px; border-color: var(--butter-deep); }

.p-full .cf-faq-sec { padding-top: 0; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1023px) {
  .cf-header__nav { display: none; }
  .cf-header__tel { margin-left: auto; }
  .cf-hero { padding-top: 0; }
  .cf-hero__grid { grid-template-columns: 1fr; gap: 0; }
  .cf-hero__photo { order: -1; margin-inline: -18px; }
  .cf-hero__photo img { aspect-ratio: 5 / 4; border-radius: 0; }
  .cf-memo { left: auto; right: 18px; bottom: -30px; max-width: calc(100% - 64px); border-radius: 4px 4px 0 0; box-shadow: 0 -8px 20px -16px rgba(90, 60, 30, 0.5); }
  .cf-hero__copy { padding-top: 32px; }
  .cf-hero__copy:has(+ .cf-hero__photo .cf-memo) { padding-top: 60px; }
  .cf-access__grid { grid-template-columns: 1fr; }
  .p-full .cf-bake__grid { grid-template-columns: 1fr; }
  .p-full .cf-bake__grid > .cf-head { position: static; }
  .cf-seats__list--pending { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cf-section { padding-block: clamp(64px, 16vw, 88px); }
  .cf-header__inner { min-height: 60px; gap: 12px; }
  .cf-logo span { font-size: 19px; }
  .cf-hero__actions .cf-btn { flex: 1 1 100%; }
  .cf-seats__list, .cf-seats__list--pending { grid-template-columns: 1fr; }
  .p-full .cf-bake__item { grid-template-columns: 3.9em 16px 1fr; gap: 10px; }
  .p-full .cf-bake__item::before { left: calc(3.9em + 10px + 7px); }
  .p-full .cf-bake__time { font-size: 18px; }
  .cf-head__title { font-size: 25px; }
  .p-full .cf-bake__dot { width: 16px; height: 16px; }
  .p-full .cf-picks__grid, .p-full .cf-picks__grid--2 { grid-template-columns: 1fr; }
  .p-full .cf-pick--main { grid-row: auto; }
  .p-full .cf-picks__grid--3 .cf-pick:not(.cf-pick--main),
  .p-full .cf-picks__grid--4 .cf-pick:not(.cf-pick--main) { grid-template-columns: 128px minmax(0, 1fr); gap: 14px; }
  .p-full .cf-picks__grid--3 .cf-pick:not(.cf-pick--main) .cf-pick__img img,
  .p-full .cf-picks__grid--4 .cf-pick:not(.cf-pick--main) .cf-pick__img img { aspect-ratio: 1; }
  .p-full .cf-picks__grid--3 .cf-pick:not(.cf-pick--main) .cf-pick__tag,
  .p-full .cf-picks__grid--4 .cf-pick:not(.cf-pick--main) .cf-pick__tag { font-size: 13px; left: 6px; }
  .p-full .cf-split { grid-template-columns: 1fr; }
  .p-full .cf-split--rev > .cf-split__img { order: 0; }
  .p-full .cf-person__grid { grid-template-columns: 1fr; }
  .p-full .cf-person__img { width: min(280px, 76%); margin-inline: auto; }
  .cf-call__inner { flex-direction: column; align-items: flex-start; }
  .cf-dl { grid-template-columns: 5.5em 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-hero__light { animation: none; }
}