/* Chocolaterie Nuit クリスマスケーキ予約LP — HTML版（文字はHTML、絵はカンプから文字を消した画像）
   位置はカンプと同じ %、文字の大きさは画像の幅に対する cqw。動きは main.js（GSAP）と snow.js（three.js）。
   ボタンは mato-button-depth 8-1。飾りは画像の素材（雪の結晶・雪の稜線・電球）、CSSで描くのは細い線と色面だけ。 */

:root {
  --k0: #0A0A0B; --k1: #131315; --k2: #1D1C1F;
  --ivory: #EFE6D8; --sub: #BFB2A0; --gold: #B8955A; --gold-l: #C2A26A; --gold-d: #A8864C;
  --ink: #1E1A18; --ink-sub: #6B635C;
  --line: #06C755; --line-hi: #22D86C; --line-lo: #04A847; --shadow-rgb: 3, 40, 20;
  --col: 560px;
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --didone: "Bodoni Moda", "Didot", serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--k0); -webkit-text-size-adjust: 100%; }
body { background: radial-gradient(ellipse 70% 60% at 50% 20%, var(--k2), transparent 70%), var(--k0); color: var(--ivory);
  font-family: var(--gothic); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-feature-settings: "palt" 1; }
.num, .cake__no, .layer__no, .big4, .qa__mark { font-family: var(--serif) !important; font-weight: 600 !important; font-variant-numeric: lining-nums; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: inherit; }
ol, dl { list-style: none; }

/* ---------- 配置 ---------- */
.page { display: grid; grid-template-columns: minmax(0, 1fr); }
.lp { width: 100%; max-width: var(--col); margin: 0 auto; background: var(--k0); box-shadow: 0 0 80px rgba(0,0,0,.55); position: relative; z-index: 1; }
.sec { position: relative; container-type: inline-size; aspect-ratio: 1024 / 1792; isolation: isolate; }
.sec--join { margin-top: calc(-1 * var(--ov, 0%)); }      /* 雪の稜線より上が透明な画像を、前のセクションの下端に重ねる */
.sec__bg, .sec__cut { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec__bg { z-index: 0; }
.foot { padding: 28px 20px calc(96px + env(safe-area-inset-bottom)); text-align: center; color: var(--sub); font-size: 12px; letter-spacing: .08em; }

/* 文字の層：カンプと同じ位置（%）に置く */
.t { position: absolute; left: var(--x); top: var(--y); z-index: 3; }
.sec--light .t { color: var(--ink); }

/* ---------- 共通の文字 ---------- */
.label { display: flex; align-items: center; gap: 1.6cqw; font-family: var(--serif); font-weight: 500; font-size: 2.85cqw; letter-spacing: .2em; color: var(--sub); line-height: 1; white-space: nowrap; }
.sec--light .label { color: #8A7E72; }
.label--plain { gap: 0; }
.flake { width: 3cqw; height: auto; flex: none; }
.label__rule { display: inline-block; width: 4cqw; height: 1px; background: var(--gold); }
.h2 { font-family: var(--mincho); font-weight: 600; font-size: 7.3cqw; line-height: 1.36; letter-spacing: .01em; white-space: nowrap; }
.sec--light .h2 { font-weight: 700; font-size: 7.9cqw; }
.h2--xl { font-size: 8.6cqw; }
.h2--cta { font-size: 8.2cqw; line-height: 1.3; }
.ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ln > span { display: inline-block; will-change: transform; }
.sub { font-size: 3.3cqw; line-height: 1.8; color: var(--sub); white-space: nowrap; letter-spacing: .03em; }
.sec--light .sub { color: var(--ink-sub); }
.note { font-size: 2.85cqw; line-height: 1.75; color: var(--sub); white-space: nowrap; }
.gline { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1px; background: var(--gold); transform-origin: left center; z-index: 3; }

/* 価格 */
.price { display: flex; align-items: baseline; gap: 0; white-space: nowrap; }
.price__pre { font-size: 4cqw; letter-spacing: .05em; margin-right: 3.6cqw; font-weight: 500; }
.price__num { font-family: var(--didone); font-weight: 500; font-size: 10.6cqw; line-height: 1; letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; }
.price__yen { font-size: 3.7cqw; margin-left: 1cqw; }
.price__yen small { font-size: .82em; }

/* ---------- 01 FV ---------- */
.fv__logo { font-family: var(--serif); font-weight: 600; font-size: 3.7cqw; letter-spacing: .2em; line-height: 1; }
.fv__h { font-family: var(--mincho); font-weight: 700; font-size: 7.9cqw; line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
.fv__h-big { font-size: 9.6cqw; }
.noel { position: absolute; left: 5.4%; top: 19.4%; z-index: 1; font-family: var(--didone); font-weight: 400; font-size: 34cqw; line-height: 1; letter-spacing: -.01em; color: rgba(239, 230, 216, .24); white-space: nowrap; pointer-events: none; }
.noel span { display: inline-block; }
.sec__cut { z-index: 2; pointer-events: none; }
.fv__sub1 { font-size: 4.6cqw; letter-spacing: .04em; line-height: 1.4; font-weight: 500; }
.fv__sub .price { margin-top: .2cqw; line-height: 1; }
.price__num { line-height: .95; }
.fv__sub3 { font-size: 3.55cqw; color: var(--sub); letter-spacing: .05em; margin-top: .4cqw; line-height: 1.5; }

/* グラサージュの上を走る光（ケーキの切り抜きの形で切る） */
.shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  -webkit-mask: url(images/01-fv-cake.webp) center / 100% 100% no-repeat; mask: url(images/01-fv-cake.webp) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 0 40%, rgba(255, 244, 225, .0) 44%, rgba(255, 244, 225, .55) 50%, rgba(255, 244, 225, 0) 56%, transparent 60% 100%);
  background-size: 260% 100%; background-position: 120% 0; mix-blend-mode: screen; }

/* ---------- 02 悩み ---------- */
.num { font-family: var(--didone); font-weight: 400; font-size: 7.6cqw; line-height: 1; }
.cell { font-size: 3.45cqw; line-height: 1.85; letter-spacing: .03em; white-space: nowrap; }
.cell4__m { font-family: var(--mincho); font-weight: 500; font-size: 4.35cqw; line-height: 1.55; white-space: nowrap; }
.cell4__s { font-size: 2.85cqw; color: var(--gold-l); margin-top: 2.2cqw; letter-spacing: .06em; }

/* ---------- 03 4つのショコラ ---------- */
.h2--offer { font-size: 7.4cqw; }
.big4 { font-style: normal; font-size: 1.8em; line-height: .8; vertical-align: -.06em; margin: 0 .02em; }
.price--offer .price__pre { font-size: 3.4cqw; margin-right: 4cqw; }
.price--offer .price__num { font-size: 9.2cqw; }
.price--offer .price__yen { font-size: 3.2cqw; }
.cake__no { font-family: var(--didone); font-size: 3.4cqw; color: var(--sub); line-height: 1; }
.cake__name { font-family: var(--mincho); font-weight: 600; font-size: 4.5cqw; line-height: 1.5; margin-top: 1.4cqw; white-space: nowrap; }
.cake__d { font-size: 3.05cqw; color: #D4C3B6; line-height: 1.75; margin-top: .6cqw; white-space: nowrap; }
.cake--big .cake__name { font-size: 5.2cqw; }
.cake__en { font-family: var(--serif); font-size: 3cqw; letter-spacing: .14em; color: var(--sub); margin-top: .4cqw; }
.cake--big .cake__d { margin-top: 2.6cqw; }

/* ---------- 04 チョコの素材 ---------- */
.layer__no { font-family: var(--didone); font-size: 4.2cqw; color: var(--gold-d); line-height: 1; }
.layer__n { font-family: var(--mincho); font-weight: 700; font-size: 3.65cqw; line-height: 1.35; margin-top: 1.6cqw; white-space: nowrap; }
.layer__d { font-size: 2.95cqw; color: var(--ink-sub); line-height: 1.7; margin-top: 1cqw; white-space: nowrap; }
.pin { position: absolute; left: var(--x); top: var(--y); width: 4.4cqw; height: 4.4cqw; margin: -2.2cqw 0 0 -2.2cqw; border-radius: 50%; z-index: 3;
  box-shadow: 0 0 0 1px rgba(168, 134, 76, .9); opacity: 0; pointer-events: none; }
.brand { color: var(--ivory) !important; }
.brand__k { font-size: 3cqw; color: var(--sub); line-height: 1.4; }
.brand__n { font-family: var(--didone); font-size: 5.5cqw; line-height: 1.15; margin-top: .2cqw; white-space: nowrap; }
.brand__n small { font-family: var(--gothic); font-size: .5em; letter-spacing: .04em; margin-left: .4em; }
.brand__d { font-size: 3.05cqw; color: var(--sub); margin-top: .2cqw; line-height: 1.5; white-space: nowrap; }

/* ---------- 05 パティシエ ---------- */
.chef__k { font-family: var(--serif); font-weight: 500; font-size: 2.85cqw; letter-spacing: .2em; color: var(--sub); line-height: 1; }
.chef__n { font-family: var(--serif); font-weight: 500; font-size: 8.8cqw; line-height: 1.2; letter-spacing: .03em; margin-top: 1.4cqw; }
.bio { font-size: 3.3cqw; line-height: 1.9; color: var(--sub); white-space: nowrap; letter-spacing: .03em; }
.quote { font-family: var(--mincho); font-weight: 500; font-size: 3.75cqw; line-height: 1.85; white-space: nowrap; padding-left: 2.6cqw; border-left: 1px solid var(--gold); }

/* ---------- 06 お店 ---------- */
.shop__n { font-family: var(--serif); font-weight: 500; font-size: 4.6cqw; line-height: 1.2; white-space: nowrap; }
.shop__d { font-size: 3.05cqw; line-height: 1.9; color: var(--sub); margin-top: 2.2cqw; white-space: nowrap; }
.hours dt { font-size: 3.05cqw; color: var(--sub); line-height: 1.6; }
.hours dd { font-size: 3.7cqw; line-height: 1.6; margin-bottom: 2.4cqw; white-space: nowrap; }

/* ---------- 07 よくある質問 ---------- */
.faq { position: absolute; inset: 0; z-index: 3; }
.qa { position: absolute; left: 0; right: 0; top: var(--y); }
.qa__q { position: absolute; left: 8.4%; top: 2.1cqw; display: flex; align-items: center; gap: 4.4cqw; font-size: 3.6cqw; line-height: 1.5; color: var(--ivory); white-space: nowrap; letter-spacing: .03em; }
.qa__q .qa__mark { font-size: 5.2cqw; color: var(--gold-l); line-height: 1; }
.qa__a { position: absolute; left: 9.8%; top: 13.2cqw; display: flex; align-items: flex-start; gap: 4.2cqw; font-size: 3.45cqw; line-height: 1.75; color: var(--ink); white-space: nowrap; letter-spacing: .03em; }
.qa__a .qa__mark { font-size: 5.2cqw; color: var(--gold-d); line-height: 1; margin-top: -.3cqw; }

/* ---------- 08 LINE登録 ---------- */
.steps { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.step { position: absolute; left: var(--x); top: 62%; transform: translateX(-50%); padding-top: 7.7cqw; text-align: center; font-size: 2.95cqw; line-height: 1.6; white-space: nowrap; color: var(--ivory); }
.step__ring { position: absolute; left: 50%; top: 1.6cqw; width: 6cqw; height: 6cqw; margin-left: -3cqw; border-radius: 50%; box-shadow: 0 0 0 1px rgba(194, 162, 106, .9), 0 0 18px rgba(194, 162, 106, .35); opacity: 0; }
.note--cta { white-space: nowrap; }
.foot-logo { left: 0 !important; width: 100%; text-align: center; font-family: var(--serif); font-weight: 500; font-size: 3.3cqw; letter-spacing: .24em; color: var(--sub); }

/* ---------- 電球のまたたき ---------- */
.lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tw { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 218, .95) 0, rgba(255, 228, 180, .45) 30%, rgba(255, 220, 160, 0) 70%);
  mix-blend-mode: screen; opacity: 0; animation: twinkle var(--d) ease-in-out var(--dl) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.7); } 45% { opacity: .9; transform: scale(1.15); } 60% { opacity: .55; } }

/* ---------- ボタン（mato-button-depth 8-1） ---------- */
.btn-line { --gloss-alpha: .26; position: relative; display: flex; align-items: center; justify-content: center; gap: .6em; overflow: hidden;
  border-radius: 9999px; color: #fff; font-family: var(--gothic); font-weight: 500; letter-spacing: .04em; line-height: 1.35; text-align: center; text-decoration: none;
  text-shadow: 0 1px 1px rgba(var(--shadow-rgb), .35);
  background: linear-gradient(to bottom, rgba(255,255,255,var(--gloss-alpha)), rgba(255,255,255,0) 33%), linear-gradient(100deg, var(--line-hi), var(--line) 45%, var(--line-lo));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset -2px -4px 8px rgba(255,255,255,.28), inset 0 -2px 0 rgba(var(--shadow-rgb),.25), 0 1px 2px rgba(var(--shadow-rgb),.3), 0 10px 26px rgba(var(--shadow-rgb),.55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; -webkit-tap-highlight-color: transparent; z-index: 4; }
.btn-line::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg) translateX(-120%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none; }
.btn-line.is-shine::after { animation: shine 1.1s ease forwards; }
.btn-line:hover::after { animation: shine 1.1s ease forwards; }
@keyframes shine { to { transform: skewX(-20deg) translateX(520%); } }
.btn-line__arrow { font-family: var(--serif); font-size: 1.15em; line-height: 1; transform: translateY(-.04em); }
.btn-line:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-line:active { transform: translateY(1px); }
.btn-line:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.btn-line--on { position: absolute; left: 6%; width: 88%; top: var(--y); height: var(--h); min-height: 44px; font-size: clamp(15px, 4.15cqw, 26px); }

/* スマホの追従ボタン */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(10,10,11,.92) 55%, rgba(10,10,11,0)); transform: translateY(110%); transition: transform .28s ease; pointer-events: none; }
.sticky.is-on { transform: translateY(0); pointer-events: auto; }
.btn-line--sticky { max-width: calc(var(--col) - 32px); margin: 0 auto; min-height: 52px; font-size: 16px; }

/* 動きを止めるボタン */
.motion-toggle { position: fixed; z-index: 21; left: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(184,149,90,.6); background: rgba(10,10,11,.72); color: var(--ivory); font: 500 12px/1 var(--gothic); letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(6px); }
.motion-toggle:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }

/* 雪（three.js） */
.snow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 10; pointer-events: none; }
.is-still .snow { display: none; }
.is-still .tw { animation: none; opacity: .5; }

/* デモのお知らせ */
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 30; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: min(90vw, 420px); padding: 10px 16px; border-radius: 10px; background: rgba(29,28,31,.96); border: 1px solid rgba(184,149,90,.5);
  color: var(--ivory); font-size: 13px; line-height: 1.6; text-align: center; transition: opacity .2s ease, transform .2s ease; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- PC：左右の帯 ---------- */
.side { display: none; }
@media (min-width: 1100px) {
  .page { grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr); }
  .lp { grid-column: 2; grid-row: 1; }
  .side { display: flex; flex-direction: column; justify-content: center; position: sticky; top: 0; height: 100vh; grid-row: 1; padding: 0 48px; z-index: 2; }
  .side--left { grid-column: 1; align-items: flex-end; text-align: right; }
  .side--right { grid-column: 3; align-items: flex-start; }
  .side__brand { font-family: var(--serif); font-size: 26px; letter-spacing: .14em; }
  .side__en { font-family: var(--serif); font-size: 16px; letter-spacing: .24em; color: var(--sub); margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--gold); }
  .side__copy { font-family: var(--mincho); font-weight: 500; font-size: 34px; line-height: 1.5; letter-spacing: .04em; margin-top: 36px; }
  .side__price { font-size: 15px; color: var(--sub); margin-top: 26px; line-height: 1.9; }
  .side__num { font-family: var(--didone); font-weight: 500; font-size: 44px; color: var(--ivory); margin-right: .1em; font-variant-numeric: lining-nums; }
  .side__lead { font-family: var(--mincho); font-weight: 500; font-size: 20px; line-height: 1.7; margin-bottom: 20px; }
  .side--right .btn-line { width: 248px; min-height: 76px; padding: 12px 22px; font-size: 16px; }
  .sticky { display: none; }
  .motion-toggle { bottom: 24px; left: 24px; }
  .toast { bottom: 32px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .side { padding: 0 28px; } .side__copy { font-size: 28px; } .side--right .btn-line { width: 216px; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
  .tw { animation: none; opacity: .5; }
  .btn-line, .sticky, .toast { transition: none; }
  .btn-line::after { display: none; }
}

/* 字詰め：Google Fonts の Shippori Mincho B1 は palt が効かないため、仮名の多い見出し・本文は字間を少し詰めてカンプに合わせる */
.fv__h, .h2, .cell4__m, .cake__name, .layer__n, .quote, .side__copy { letter-spacing: -.055em; }
.k-s { display: inline-block; margin: 0 -.09em; }          /* 小さい仮名・長音 */
.k-p { display: inline-block; margin-right: -.42em; }      /* 、。 */
.k-m { display: inline-block; margin: 0 -.26em; }          /* ・ */
.k-o { display: inline-block; margin-left: -.44em; }       /* （「 */
.k-c { display: inline-block; margin-right: -.44em; }      /* ）」 */
.price__num { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.side__num { font-family: var(--serif); font-weight: 600; }

/* カンプに合わせた微調整（よくある質問の大きさ・本文の太さ） */
.qa__q { font-size: 3.95cqw; gap: 4.6cqw; top: 1.7cqw; }
.qa__q .qa__mark, .qa__a .qa__mark { font-size: 6.4cqw; }
.qa__a { font-size: 3.75cqw; top: 12.6cqw; gap: 4.6cqw; }
.qa__t { font-weight: 500; }
.cell, .bio, .cake__d, .layer__d, .shop__d, .hours dd, .fv__sub3, .sub, .step { font-weight: 500; }
.lights { overflow: hidden; }
.big4 { font-size: 1.62em; }
#cakes .sub { line-height: 1.5; }
#reserve .sub { line-height: 1.6; }
.note--cta { line-height: 1.6; }
/* 「動きを止める」は右上（FVではツリーの上で、見出し・ボタンに重ならない） */
.motion-toggle { top: calc(10px + env(safe-area-inset-top)); right: 10px; left: auto; bottom: auto; padding: 7px 11px; font-size: 11px; background: rgba(10,10,11,.55); }
@media (min-width: 1100px) { .motion-toggle { top: 20px; right: 24px; left: auto; bottom: auto; } }
/* 電球のにじみが画面の右端からはみ出して横スクロールを作らないように、セクションの左右で切る */
.sec { overflow-x: clip; }

/* ===== 赤ペン先生の指摘の直し（2026-11-07） =====
   No.25 文字の大きさ：本文は 15px 以上（375px より狭い画面は 13.5px 以上）、そのほかの文字も 13px 以上。PCの列では本文を 17px までに抑える（No.11 の見出しとの差を保つため）
   No.11 大小の差：FVの見出しをページでいちばん大きい見せ場にする
   No.16 形：英字の小見出しは FV と LINE登録だけ。電球のまたたきは FV と LINE登録だけで、画面に入ったら3回で止める */
:root { --b: 15px; --s: 13px; }
@media (max-width: 374px) { :root { --b: 13.5px; } }

.fv__h { font-size: 9.8cqw; }
.fv__h .ln:first-child { font-size: .82em; }
.fv__h-big { font-size: 1em; }

.label { font-size: max(var(--s), 2.85cqw); }
.label--mark { gap: 0; }
.note { font-size: max(var(--s), 2.85cqw); white-space: normal; width: 88%; }
.fv__sub3 { font-size: clamp(var(--b), 3.55cqw, 17px); white-space: normal; }
.fv__sub { width: 88%; }
.price__yen { font-size: max(var(--b), 3.7cqw); }
.price__yen small { font-size: 1em; }
.sub { font-size: clamp(var(--b), 3.3cqw, 17px); }
.cell { font-size: clamp(var(--b), 3.45cqw, 17px); white-space: normal; width: 37%; line-height: 1.7; }
.cell--r { width: 36%; }
.cell4__s { font-size: max(var(--s), 2.85cqw); }
.cake { width: 49%; }
.cake__no { font-size: max(var(--s), 3.4cqw); }
.cake__d { font-size: clamp(var(--b), 3.05cqw, 17px); white-space: normal; line-height: 1.55; }
.cake__en { font-size: max(var(--s), 3cqw); }
.layer__d { font-size: clamp(var(--b), 2.95cqw, 17px); line-height: 1.55; }
.brand__k { font-size: max(var(--s), 3cqw); }
.brand__n small { font-size: max(var(--s), 2.75cqw); }
.brand__d { font-size: clamp(var(--b), 3.05cqw, 17px); }
.chef__k { font-size: max(var(--s), 2.85cqw); }
.bio { font-size: clamp(var(--b), 3.3cqw, 17px); white-space: normal; width: 42%; line-height: 1.8; }
.quote { font-size: max(var(--b), 3.75cqw); }
.shop { width: 37%; }
.shop__d { font-size: clamp(var(--b), 3.05cqw, 17px); white-space: normal; }
.hours dt { font-size: max(var(--s), 3.05cqw); }
.hours dd { font-size: max(var(--b), 3.7cqw); }
.qa__q { font-size: max(var(--b), 3.95cqw); }
.qa__a { font-size: max(var(--b), 3.75cqw); }
.step { font-size: max(var(--s), 2.95cqw); line-height: 1.45; }
.foot-logo { font-size: max(var(--s), 3.3cqw); }
.side__copy { font-size: clamp(22px, 2.3vw, 34px); white-space: nowrap; }

/* 電球：画面に入ったら3回またたいて止まる */
.tw { animation: none; }
.lights.is-on .tw { animation: twinkle var(--d) ease-in-out var(--dl) 3 both; }

/* 測り直しで出た重なりの直し */
.fv__logo { font-size: max(var(--s), 3.7cqw); }
.price__pre { font-size: max(var(--s), 4cqw); margin-right: 2.6cqw; }
.price--offer .price__pre { font-size: max(var(--s), 3.4cqw); }
.price--offer .price__yen { font-size: max(var(--b), 3.2cqw); }
.layer__n { font-size: max(var(--s), 3.65cqw); }
.cell { width: 38.5%; }
#cakes .sub { line-height: 1.25; }
.cake__name { line-height: 1.35; margin-top: 1cqw; }
.cake__d { margin-top: .3cqw; }
.bio { white-space: nowrap; width: auto; }
#reserve .sub { line-height: 1.45; }
@media (max-width: 374px) { .price__num { font-size: 9.6cqw; } }

.sp-n { display: none; }
@media (max-width: 374px) { .sp-n { display: inline; } }
.cake__d { line-height: 1.45; }
.step { top: 62.6%; padding-top: 6.65cqw; }
.step__ring { top: .5cqw; }

.shop__d { white-space: nowrap; }
.sp-only { display: none; }
@media (max-width: 480px) { .sp-only { display: inline; } }
.motion-toggle { font-size: 13px; padding: 7px 12px; }

/* 悩みの章（2026-11-07 赤ペン先生の直しのあと）
   狭いスマホで「、」「。」だけの行ができないよう、文は <br> の位置でだけ改行する。
   「03」は元カンプどおり下の枠線にまたがる位置（背景の切れた枠線は tools/repair_pain_border.py で戻した） */
@media (max-width: 389px) {
  #pain .cell { white-space: nowrap; letter-spacing: 0; }
}
@media (max-width: 339px) {
  #pain .cell { font-size: 13px; --x: 7% !important; }
  #pain .cell--r { --x: 57.4% !important; }
}

/* ケーキの説明：480px未満は、言葉の切れ目で2行にする（「。」だけの行・写真にかかる行を出さない）。
   2行が区切り線の間に収まるよう、行の間隔を詰め、01・02を少し上へ */
.sp-c { display: none; }
@media (max-width: 479px) {
  .sp-c { display: inline; }
  #cakes .cake:not(.cake--big) .cake__name { line-height: 1.25; }
  #cakes .cake:not(.cake--big) .cake__d { line-height: 1.35; }
  #cakes div.cake:nth-of-type(1) { --y: 24.2% !important; }
  #cakes div.cake:nth-of-type(2) { --y: 38.4% !important; }
}
@media (max-width: 359px) {
  #cakes .cake__d { font-size: 13px; }
  #cakes .cake:not(.cake--big) .cake__name { line-height: 1.2; }
  #cakes .cake:not(.cake--big) .cake__d { line-height: 1.3; }
}
@media (max-width: 339px) {
  #cakes div.cake:nth-of-type(2) { --y: 38.25% !important; }
}

/* ===== 05 パティシエを動画に（2026-11-07 かおりさんOK） =====
   動画は画面に入ったら1回だけ流れ、最後の場面（ケーキを差し出す）で止まる。
   お辞儀と前に出る動きが左の文字の位置を通るため、見出しだけ動画の上に残し、名前・経歴・ひとことは動画の下に置く。
   動画の上端は、静止画の透明（雪の稜線より上）をそのまま型にして抜く。下端は文字の背景色へなじませる。 */
.sec--movie { aspect-ratio: auto; --pat-bg: #131213; }
.movie { position: relative; aspect-ratio: 1024 / 1792; }
.movie__vid { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity .2s linear; }
/* 型の画像は、動画を読み込むときに一緒に読む（開いた直後に余計な画像を読まない） */
.movie__vid[src] { -webkit-mask: url(images/05-patissier.webp) 0 0 / 100% 100% no-repeat; mask: url(images/05-patissier.webp) 0 0 / 100% 100% no-repeat; }
/* 再生の合図にする点（人物の真ん中あたり）。この点が画面の上20%〜下30%の間に入ったら流す */
.movie__cue { position: absolute; left: 50%; top: 40%; width: 1px; height: 1px; pointer-events: none; }
.movie__vid.is-on { opacity: 1; }
.movie__fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 13%; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(19,18,19,0), rgba(19,18,19,.75) 55%, var(--pat-bg)); }
.pat-text { position: relative; z-index: 3; margin-top: -1px; background: var(--pat-bg); padding: 0 6.2cqw calc(11.2cqw + 13cqw); }
.pat-text .bio { margin-top: 5.2cqw; }
.pat-text .quote { margin-top: 6.4cqw; }
/* 流れる前に止めたときだけ静止画へ。流れ始めたあとは、その場面のまま止める（絵が最初に戻らない） */
.is-still .movie__vid:not(.is-on) { display: none; }
@media (prefers-reduced-motion: reduce) { .movie__vid { display: none; } }

/* 上のつなぎ目：素材の章の「Cacao Lumière」の板の下端が、次の章の雪のふちの高い所に埋もれないよう、
   素材の章の下に同じ紙の質感を 44/1024 だけ足す（素材の章の下44行を上下反転した画像。つなぎ目で質感が続く） */
.sec-foot { position: relative; z-index: 0; width: 100%; aspect-ratio: 1024 / 44; background: url(images/04-material-foot.webp) 0 0 / 100% 100% no-repeat; }