:root{
--cream:#f4ece4;
--paper:#f8f2ec;
--ink:#463832;
--ink-soft:#7a685f;
--pink:#e3b3b8;
--pink-deep:#bd7681;
--rasp:#a3435a;
--line:#d9c7ba;
--serif:'Cormorant Garamond', serif;
--mincho:'Shippori Mincho', serif;
--gothic:'Zen Kaku Gothic New', sans-serif;
--script:'Parisienne', cursive;
--canvas:1180px;
}
/* script accent + editorial helpers (Pattern C) */
.script{font-family:var(--script);color:var(--pink-deep);line-height:1}
.frame{position:relative}
.frame::after{content:"";position:absolute;inset:clamp(12px,3.4cqw,26px);border:1px solid rgba(255,255,255,.55);pointer-events:none;z-index:3}
.tagtop{position:absolute;top:clamp(20px,6cqw,50px);left:clamp(30px,9cqw,64px);z-index:4;color:#fff;font-family:var(--gothic);font-weight:300;font-size:10px;letter-spacing:.34em;text-transform:uppercase;opacity:.92;text-shadow:0 1px 10px rgba(60,38,38,.5)}
.chlabel{font-family:var(--script);font-size:clamp(30px,8cqw,52px);color:var(--pink-deep);line-height:.8;margin-bottom:2px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--gothic);-webkit-font-smoothing:antialiased;line-height:1.85;overflow-x:hidden}
/* 全体ラッパー：横はみ出しを確実にクリップ（横スクロール／左寄り防止） */
.wrap{overflow-x:clip}
img{display:block;width:100%;height:auto}
/* sec = per-chapter wrapper (semantic grouping; layout-neutral) */
.sec{position:relative}
/* stage = centered editorial column (Pattern D: narrow, aligns with the scatter collage) */
.stage{max-width:1180px;margin:0 auto;position:relative;padding:0 clamp(14px,3.5cqw,32px)}
.stage.tight{padding:0 clamp(14px,3.5cqw,32px)}
/* ---- reveal (fade UP only — no horizontal shift, so nothing slides in from the right) ---- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.19,1,.22,1)}
.rv.l,.rv.r{transform:translateY(30px)}
.rv.in{opacity:1;transform:none}
/* ---- widths (percent of stage) ---- */
.w42{width:42%}.w46{width:46%}.w52{width:52%}.w58{width:58%}.w64{width:64%}.w72{width:72%}.w80{width:80%}.w90{width:90%}
.w74{width:74%}.w84{width:84%}.w86{width:86%}.w88{width:88%}.w92{width:92%}
.fl{margin-right:auto}.fr{margin-left:auto}
/* solo = wide & centered (reference keeps single shots wide with even margins → no one-sided void) */
.solo{margin-left:auto;margin-right:auto}
.up{margin-top:-9%}.up-s{margin-top:-5%}
/* === viewport-edge images: break OUT of the 1180 canvas — bold, wide, overlapping === */
.ed{position:relative} /* body-level image, viewport-referenced */
.e100{width:100cqw}.e94{width:94cqw}.e88{width:88cqw}.e82{width:82cqw}.e76{width:76cqw}.e70{width:70cqw}.e64{width:64cqw}.e58{width:58cqw}.e52{width:52cqw}.e46{width:46cqw}
.L{margin-right:auto} /* flush to LEFT viewport edge */
.R{margin-left:auto} /* flush to RIGHT viewport edge */
.C{margin-left:auto;margin-right:auto}
.ov{margin-top:-12cqw;z-index:2}.ov2{margin-top:-20cqw;z-index:2}
.gv-s{margin-top:3cqw}.gv-m{margin-top:6cqw}.gv-l{margin-top:12cqw}
/* crop tall images to a shorter band (shortens section height) */
.hcrop{overflow:hidden;height:clamp(300px,48vh,560px)}
.hcrop img{height:100%;object-fit:cover;object-position:center 38%}
/* scene = a scattered photo collage (PPT-like: several small photos, loosely placed) */
.scene{position:relative;width:100%}
.scene figure{margin-bottom:0}
/* two-column interlocking collage — fills left & right, no big empty bands */
.cols{display:flex;align-items:flex-start;justify-content:space-between;width:100%}
.cols .cL,.cols .cR{display:flex;flex-direction:column}
.cols figure{margin:0 0 4cqw 0}
.cols figure:last-child{margin-bottom:0}
.g-s{margin-top:22px}.g-m{margin-top:60px}.g-l{margin-top:120px}
.ind1{margin-left:8%}.ind2{margin-left:18%}.ind3{margin-left:26%}
figure{position:relative;margin:0}
.cap{font-family:var(--serif);font-style:italic;font-size:clamp(13px,3.4cqw,17px);color:var(--ink-soft);letter-spacing:.04em;margin-top:12px}
/* full viewport bleed inside stage */
.bleed{width:100cqw;margin-left:calc(50% - 50cqw);position:relative}
.crop{overflow:hidden}
/* ============================================================
絶対配置コラージュ：各画像を top / left / width で自由に調整。
SP = 下の基本値（〜700px）、 PC = @container phone (min-width:701px) 側。
.pos の height は、その区画に必要な縦の高さ（画像がはみ出す時は増やす）。
============================================================ */
.pos{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:0;container-type:inline-size}
.pos figure{position:absolute;margin:0}
.pos figure img{width:100%}
.pos .cap{margin-top:7px;font-size:clamp(11px,3cqw,13px);white-space:nowrap}
/* Sweet Items(sc-bag)のNoキャプション：画像の左下にオーバーレイ・白文字・影・やや大きめ */
.sc-bag .cap{position:absolute;left:20px;bottom:10px;margin:0;color:#fff;font-size:clamp(15px,4.2cqw,20px);text-shadow:0 2px 8px rgba(0,0,0,.7)}
/* ---- CH01 : top は cqw（コンテナ幅基準）, 区画高さは aspect-ratio（自分の幅基準）で余白を出さない ---- */
.ch01{max-width:1180px;aspect-ratio:1 / 2.21}
.ch01 .p1{top:0; left:3.1%; width:56%}
.ch01 .p2{top:20.9cqw; right:0; width:38%}
.ch01 .p3{ top: 54.6cqw;
left: 10%;
width: 68%;
z-index: -1;}
.ch01 .p4{top:91.3cqw; left:57%; width:37%; z-index:2}
.ch01 .p5{ top: 26.4cqw;
right: 0;
width: 36%;
z-index: -1;}
/* ---- CH02+ collages: absolute positioning (CH01 と統一)。
top=cqw（コンテナ幅基準）/ left,width=% で1枚ずつ独立配置。重なりはDOM順。 */
.sc-talk{aspect-ratio:760 / 974}
.sc-talk .f1{top:0cqw; left:4.21%; width:59.53%}
.sc-talk .f2{ left: 0;
width: 65%;
top: 0;}
.sc-talk .f3{ top: 50cqw;
/* left: 0; */
right: 0;
/* margin-inline: auto; */
width: 90%;
}
.sc-cheers{aspect-ratio:760 / 1924}
.sc-cheers .f1{top: 5cqw;left: 0; width: 90%;}
.sc-cheers .f2{top:72cqw; left:53%; width:50%}
.sc-cheers .f3{top: 88cqw;left: 9%;width: 35%;}
.sc-cheers .f4{top: 157cqw;left:0;right:0;margin-inline:auto;width: 64%;}
.sc-mix{aspect-ratio:760 / 759}
.sc-mix .f1{top:10cqw; left:53.66%; width:42.13%}
.sc-mix .f2{top:39.42cqw; left:4.21%; width:40.29%}
.sc-morning{aspect-ratio:760 / 875}
.sc-morning .f1{top:0cqw; right:0; width:70.44%}
.sc-morning .f2{top:18.36cqw; left:4.21%; width:42.13%}
.sc-morning .f3{top:54.94cqw;left:0;right:0;margin-inline:auto;width:90%}
.sc-out{aspect-ratio:760 / 2262}
.sc-out .f1{top:0cqw;left:0;right:0;margin-inline:auto;width:80%}
.sc-out .f2{top:127cqw;left:8%; width:45%}
.sc-out .f3{top:127cqw;right:0; width:45%}
.sc-out .f4{top: 200cqw;left:0;right:0;margin-inline:auto;width: 65%;}
.sc-room{aspect-ratio:760 / 1446}
.sc-room .f1{top:0cqw;left:4.21%; width:62.27%}
.sc-room .f2{top:71.47cqw; left:53.66%; width:38.46%;z-index: 1;}
.sc-room .f3{top: 106.49cqw;left: 13.37%;width: 55.79%;}
.sc-sty1{aspect-ratio:760 / 759}
/* 変更前（戻す場合はこの1行を有効化し、下の新ルールを削除／コメントアウト）:
.sc-sty1 .f1{top:10cqw; left:4.21%; width:40.29%} */
.sc-sty1 .f1{top:10cqw; left:0px; right:0px; width:65%; margin-inline:auto}
.sc-sty1 .f2{top:36.67cqw; left:51.83%; width:42.13%}
.sc-sty2{aspect-ratio:760 / 606}
.sc-sty2 .f1{top:10cqw;left:0;right:0;margin-inline:auto;width:53.11%}
.sc-bag{aspect-ratio:760 / 1863}
.sc-bag .f1{top:5cqw; left:0; width:60%}
.sc-bag .f2{ top: 83.01cqw;
right: 4%;
width: 60%;}
.sc-bag .f3{ top: 135.92cqw;
left: 9.7%;
width: 60%;}
.sc-bag .f4{ top: 208.71cqw;
right: 0;
width: 40%;}
.sc-bag .f5{top: 238.86cqw;
left: 4.04%;
width: 48%;
z-index: -1;}
.sc-bag .f6{top: 287.4cqw;
left: 56.66%;
width: 37%;
z-index: -2;}
.sc-present{aspect-ratio:760 / 687;max-width:760px}
/* present：画像フル幅＋黒オーバーレイに見出し＆本文を重ねる版（戻す時はこのブロック＋HTMLの present__over を差し戻し） */
.sc-present .f1{top:0; left:0; width:100%}
.present__over{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6% 8%;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55);background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.92) 100%)}
.present__over .eyebrow{margin-bottom:10px;color:var(--pink)}
.present__over .chlabel{color:var(--pink)}
.present__over .chap{color:#fff}
.present__over .present__txt{margin-top:24px;color:#fff}
.present__over .present__txt b{color:var(--pink)}
.present__over .present__txt i{color:var(--pink)}
/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
/* PC3カラムに埋め込まれた時はhero高さを固定（100svhだとiframe伸長と無限ループするため） */
.embedded .hero{height:200cqw;min-height:0;max-height:900px}
/* 直下の背景写真のみ対象（> で限定しないと中の白ロゴimgにも効いてしまう） */
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(50,32,32,.12),rgba(50,32,32,0) 34%,rgba(55,35,35,.42) 100%)}
/* ロゴ・テキスト下の可読性UP：背景写真とテキストの間に敷く「透明→黒」オーバーレイ */
.hero__scrim{position:absolute;left:0;right:0;bottom:0;height:55%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.72) 100%)}
.hero__wrap{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;padding:0 clamp(30px,9cqw,64px) clamp(40px,9cqw,86px);display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__eyebrow{font-family:var(--serif);font-style:italic;font-size:clamp(15px,4.4cqw,24px);letter-spacing:.16em;text-shadow:0 2px 18px rgba(60,38,38,.5)}
/* FV：Heather / × / PEACH JOHN を1つのwrap(hero__wrap)にまとめ、各SVGを個別marginで制御 */
.hero__logo{margin:0}
.hero__logo img{position:static;width:clamp(240px,78cqw,560px);height:auto;filter:drop-shadow(0 3px 24px rgba(60,38,38,.45))}
.hero__cross{display:block;width:clamp(22px,6.6cqw,40px);height:auto;margin:0 0 10px;filter:drop-shadow(0 2px 14px rgba(60,38,38,.5))}
.hero__pj{display:block;width:clamp(170px,50cqw,290px);height:auto;margin-top:clamp(8px,2.4cqw,16px);filter:drop-shadow(0 2px 14px rgba(60,38,38,.5))}
.hero__side{position:absolute;top:clamp(20px,6cqw,52px);right:clamp(16px,4cqw,40px);z-index:2;writing-mode:vertical-rl;font-family:var(--gothic);font-weight:300;font-size:11px;letter-spacing:.5em;color:#fff;text-transform:uppercase;opacity:.9;text-shadow:0 1px 10px rgba(60,38,38,.5)}
.scrollcue{position:absolute;left:clamp(22px,7cqw,72px);bottom:16px;z-index:3;color:#fff;font-size:9px;letter-spacing:.4em;text-transform:uppercase;opacity:.85;display:none}
/* ---------- section eyebrow / chapter ---------- */
.eyebrow{font-family:var(--gothic);font-weight:300;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--pink-deep)}
.chap{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,9cqw,78px);line-height:1;letter-spacing:.005em;color:var(--ink)}
.chap.it{font-family:var(--serif);font-style:italic}
.chap .xl{font-size:1.5em;line-height:.7;vertical-align:-.06em}
.jp{font-family:var(--mincho);font-size:clamp(12px,3.3cqw,14px);letter-spacing:.12em;color:var(--ink-soft);word-break:auto-phrase}
/* keep long Japanese phrases from splitting mid-word (breaks at bunsetsu; graceful fallback) */
.intro__lead,.present__txt{word-break:auto-phrase}
.jp small{display:block;font-family:var(--gothic);font-weight:300;font-size:11px;letter-spacing:.18em;color:var(--pink-deep);margin-top:7px}
.num{font-family:var(--serif);font-style:italic;font-size:clamp(52px,15cqw,120px);line-height:.8;color:var(--pink);opacity:.55}
/* ---- unified chapter header: number + label + title, identical for every chapter ---- */
.chhead{display:flex;align-items:flex-start;gap:clamp(16px,4cqw,26px);margin-bottom:26px}
.chhead__body{flex:1;min-width:0;padding-top:8px}
.chhead__body .eyebrow{margin-bottom:10px}
.chhead__body .jp{margin-top:16px}
/* alignment variants — keep each chapter's original title position */
.chhead.r{flex-direction:row-reverse;text-align:right}
.chhead.c{flex-direction:column;align-items:center;text-align:center;gap:2px}
.chhead.c .chhead__body{flex:none;padding-top:0}
/* vertical english accent */
.vaccent{writing-mode:vertical-rl;font-family:var(--serif);font-style:italic;font-size:clamp(13px,3.4cqw,18px);letter-spacing:.18em;color:var(--pink-deep)}
/* ---------- intro ---------- */
.intro{padding-top:clamp(70px,14cqw,150px);padding-bottom:0}
.intro__lead{font-family:var(--mincho);font-size:clamp(14px,4cqw,17px);line-height:2.4;letter-spacing:.05em;max-width:24em;margin-left:auto;margin-right:auto}
.intro__lead b{font-weight:500}
/* intro リード1ブロック目（見出し）：イタリック */
.intro__lead--head{font-style:italic}
/* intro リード2ブロック目（本文）：1ブロック目との間隔＋少し小さめ */
.intro__lead--body{margin-top:2.4em;font-size:clamp(12px,3.3cqw,14px)}
.intro__gift{font-family:var(--serif);font-style:italic;font-size:clamp(14px,3.8cqw,18px);color:var(--pink-deep);margin-top:26px}
/* Cormorant は数字が小さめに出るため「25」だけ拡大 */
.intro__gift__num{font-size:1.5em;letter-spacing:.02em;vertical-align:.12em}
/* ---------- look credits ---------- */
.lookrow{display:flex;align-items:flex-end;gap:clamp(16px,4cqw,44px)}
.lookrow.rev{flex-direction:row-reverse}
/* image pair — stays asymmetric side-by-side at every size (never collapses) */
.duo{display:flex;align-items:flex-start;gap:clamp(10px,3cqw,28px)}
.duo.rev{flex-direction:row-reverse}
.cred{flex:1;min-width:0;padding-bottom:8px}
.cred__no{font-family:var(--serif);font-style:italic;font-size:clamp(20px,5.5cqw,30px);color:var(--ink);letter-spacing:.05em}
.cred__name{font-family:var(--serif);font-size:clamp(17px,4.6cqw,23px);letter-spacing:.05em;margin:2px 0 4px}
.cred__tag{font-family:var(--gothic);font-weight:300;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:16px}
.item{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.03em;text-decoration:none;color:var(--ink);transition:color .25s,border-color .25s}
.item .nm{color:var(--ink);flex:1;min-width:0}
.item .no{font-family:var(--serif);font-style:italic;color:var(--pink-deep);margin-right:10px}
.item .pr{font-family:var(--gothic);font-size:13px;white-space:nowrap;color:var(--ink)}
.item .buy{flex:none;font-family:var(--gothic);font-weight:400;font-size:10px;letter-spacing:.14em;color:var(--pink-deep);background:transparent;border:1px solid var(--pink-deep);padding:6px 14px;border-radius:100px;white-space:nowrap;transition:.25s}
.item:hover{border-color:var(--pink-deep)}
.item:hover .nm,.item:hover .pr{color:var(--pink-deep)}
.item:hover .buy{background:var(--pink-deep);color:#fff}
/* items = 価格リストのまとまり。下に余白を持たせ、後続の画像とくっつかないように */
.items{margin-bottom:clamp(20px,5cqw,34px)}
/* ---------- travel bag scatter ---------- */
.scatter{position:relative}
/* ---------- present ---------- */
.present{background:var(--cream);margin-top:100px}
.present__txt{font-family:var(--mincho);font-size:clamp(12px,3.3cqw,14px);line-height:2.35;letter-spacing:.04em;max-width:24em;text-align:center;margin-inline:auto}
.present__txt b{color:var(--rasp);font-weight:500}
.present__txt i{color:var(--pink-deep)}
/* ---------- CTA / footer ---------- */
.cta{padding-top:clamp(70px,12cqw,120px);padding-bottom:clamp(80px,12cqw,120px);text-align:center}
.cta a{display:inline-flex;align-items:center;gap:18px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,6cqw,40px);color:var(--ink);text-decoration:none;letter-spacing:.03em;border-bottom:1px solid var(--ink);padding-bottom:8px;transition:.35s}
.cta a:hover{color:var(--pink-deep);border-color:var(--pink-deep)}
.cta a .arw{font-style:normal;font-size:.7em;transition:.35s}
.cta a:hover .arw{transform:translateX(10px)}
.cta__hint{font-family:var(--gothic);font-weight:300;font-size:11px;letter-spacing:.3em;color:var(--pink-deep);margin-top:18px}
/* フッター スタッフクレジット（商品情報 .item と同じ12px） */
.credits{font-family:var(--serif);font-size:12px;letter-spacing:.03em;line-height:2.1;color:var(--ink);font-style: italic;}
.credits p{margin:0}
footer{background:var(--ink);color:#e7d9d0;padding:clamp(56px,10cqw,90px) clamp(22px,7cqw,72px)}
footer .fmark{font-family:var(--serif);font-size:clamp(46px,13cqw,96px);line-height:.9;color:#fff}
footer .fx{font-family:var(--serif);font-style:italic;font-size:clamp(13px,3.6cqw,18px);letter-spacing:.2em;color:var(--pink);margin-top:8px}
footer .staff{margin-top:40px;font-size:10px;line-height:2.5;letter-spacing:.16em;color:#c6b1a7;text-transform:uppercase}
footer .copy{margin-top:26px;font-size:9px;letter-spacing:.22em;color:#8c766c}
@container phone (max-width:700px){
.lookrow{flex-direction:column;align-items:stretch;gap:20px}
.lookrow.rev{flex-direction:column}
.lookrow>figure{width:90%;margin-left:auto;margin-right:auto}
.cred{padding-bottom:0}
/* 商品情報はフル幅にせず左右を少し詰める（幅を統一） */
.lookrow .cred{padding-left:clamp(14px,3.5cqw,32px);padding-right:clamp(14px,3.5cqw,32px)}
.up{margin-top:-7%}
.ind3{margin-left:14%}.ind2{margin-left:10%}
/* CH02 スマホ配置：image21=左端0 / image23=右端0（f3=image22 の中央は基本ルール側で対応） */
.sc-talk .f1{left:0}
.sc-talk .f2{ left: 0;
width: 65%;
top: 0;}
}
/* desktop: tighter editorial canvas so scattered images read as intentional, not sparse */
@container phone (min-width:701px){
.g-l{margin-top:96px}.g-m{margin-top:52px}
/* CH01 は cqw で全幅対応のため PC専用値は不要 */
.w42{width:46%}.w46{width:50%}.w52{width:56%}
.cred{padding-left:8px}
/* B) tall full-bleed → cover-crop to a cinematic band on PC */
.bleed.crop{height:clamp(440px,60vh,640px)}
.bleed.crop img{height:100%;object-fit:cover;object-position:center 42%}
/* A) don't span full width on PC → narrower & centered = shorter */
.bleed.shrink{width:56%;max-width:560px;margin-left:auto;margin-right:auto}
.pc-narrow{width:48%!important;max-width:520px}
}
/* ===== PC 3カラム（左右固定・中央スマホ幅）。中央は container-query でスマホ表示を再現 ===== */
/* 中央スマホ幅：ビューポート連動。中間幅(iPad等)では自動で狭まり左右カラムに余裕を持たせ、
広い画面では上限500pxで頭打ち。下限360pxで狭すぎを防止。 */
:root{ --phone: clamp(360px, 46vw, 500px); --idxw: clamp(320px, 40vw, 600px); } /* --idxw = 右Indexカラム幅(約40%)。ここでコンテンツ:Index比を調整 */
.d-side{position:fixed;top:0;bottom:0;width:calc((100vw - var(--phone)) / 2);background:var(--cream);z-index:1;display:flex;flex-direction:column;justify-content:center;padding:40px clamp(20px,3vw,56px)}
.d-side.left{left:0;align-items:center;overflow:hidden}
/* 右カラム：花柄をパターン敷き（PC専用。.d-sideは700px以下で非表示）。
bg_flower.webp = bg_flowersvg.svg(3.5MB/2833パス)のクリーム地部分をシームレスタイル化したラスタ版(≈7.6KB)。
タイル表示サイズは background-size で調整（小さくすると花が細かく密に、大きくすると粗く大きく）。 */
.d-side.right{right:0;align-items:flex-start;
/* 花柄パターン（一旦非表示。戻す時は下3行のコメントを外す） */
/* background-image:url("assets/bg_flower.webp");
background-repeat:repeat;
background-size:clamp(300px,24vw,380px) auto */}
.d-phone{position:relative;z-index:2;width:var(--phone);margin:0 auto;container-type:inline-size;container-name:phone;box-shadow:0 0 60px rgba(70,56,50,.18)}
/* --- 左カラム：ロゴ --- */
/* PC左カラム：Heather / × / PEACH JOHN を1つのwrap(.d-logo)にまとめ、各SVGを個別marginで制御 */
.d-logo{width:min(56%,250px);position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.d-logo img{height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.d-logo__heather{width:100%}
.d-logo__cross{width:clamp(18px,1.6vw,28px);margin:10px 0 20px;filter:drop-shadow(0 1px 10px rgba(0,0,0,.5))}
.d-logo__pj{width:clamp(110px,62%,168px);filter:drop-shadow(0 1px 10px rgba(0,0,0,.5))}
.d-logo__note{margin-top:12px;font-family:var(--gothic);font-weight:300;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* --- 左カラム背景：スクロール連動で章ごとに切替（二層クロスフェード） --- */
.d-side__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;z-index:0;pointer-events:none}
.d-side__bg.show{opacity:1}
.d-side__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(40,26,26,.30),rgba(40,26,26,.48))}
/* --- 右カラム：目次 --- */
.d-toc{width:100%;max-width:320px}
/* Contents = ページ内 .eyebrow と同じ / Index = ページ内 .chlabel と同じ（順番は eyebrow → chlabel） */
.d-toc__sub{font-family:var(--gothic);font-weight:300;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:8px;padding:0 0 0 10px}
.d-toc__ttl{font-family:var(--script);font-size:clamp(32px,3vw,52px);color:var(--pink-deep);line-height:.8;margin-bottom:15px;padding:0 0 0 10px}
.d-toc__list{list-style:none;margin:0;padding:0}
.d-toc__item{display:flex;align-items:baseline;gap:14px;padding:11px 10px;text-decoration:none;color:var(--ink);transition:color .3s;position:relative}
.d-toc__no{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--pink);flex:none;transition:color .3s}
.d-toc__lbl{flex:1;min-width:0;font-family:var(--serif);font-size:clamp(14px,1.1vw,17px);letter-spacing:.03em;line-height:1.3}
.d-toc__jp{display:block;font-family:var(--mincho);font-size:10px;letter-spacing:.06em;color:var(--ink-soft);margin-top:3px}
.d-toc__item.active .d-toc__no{color:var(--pink-deep)}
.d-toc__item.active .d-toc__lbl{color:var(--pink-deep)}
.d-toc__item.active .d-toc__jp{color:var(--pink-deep)}
.d-toc__item.active::before{content:"\2661";position:absolute;left:-20px;top:50%;transform:translateY(-52%);font-family:var(--serif);font-style:italic;font-size:14px;line-height:1;color:var(--pink-deep)}
/* 実機スマホ（〜700px）：左右カラムを消して全幅1カラム（従来どおり） */
@media(max-width:700px){
.d-side{display:none}
.d-phone{width:100%;box-shadow:none}
}
/* iPad（701〜880px）：左の画像カラムだけ削除し、［コンテンツ | Index］の2カラム。
コンテンツは左端0＋最大500px、右にIndex(--idxw)。881px以上は元の3カラム(PC)に戻る。 */
@media(min-width:701px) and (max-width:880px){
:root{--idxw:300px} /* iPadのIndex(aside)幅を300px固定に */
.d-side.left{display:none} /* 左の画像カラムを削除（PCには影響しない） */
.d-side.right{width:var(--idxw);padding:40px 16px} /* 右=Index 300px */
.d-toc{max-width:260px} /* 300pxのaside内に収まるよう目次を詰める */
.d-toc__jp{display:none} /* 和文サブは隠す（幅節約） */
body{padding-right:var(--idxw)} /* 右にIndex領域(300px)を確保 */
/* コンテンツは画面左端にぴったり（左余白0）＋最大500px。余ったスペースはIndexとの間(右)へ */
.d-phone{width:min(500px, calc(100vw - var(--idxw) - 20px));margin-left:0;margin-right:auto}
}
/* ===== 改行のSP/PC出し分けユーティリティ =====
= PC(701px〜)だけ改行 /
= SP(〜700px)だけ改行。
※本文は「スマホ幅カラム(最大500px)」のため @container ではなくビューポート幅で切替える。 */
.br-sp{display:none}
@media(max-width:700px){
.br-pc{display:none}
.br-sp{display:inline}
}
/* ===== Present Campaign = 招待状カード(Pattern A)。LPのグローバルclassと衝突しないよう .pa 配下にscope ===== */
.pa{max-width:440px;margin:0 auto;padding:0 22px}
.pa .ticket{position:relative;background:var(--paper);padding:12px;box-shadow:0 22px 55px rgba(70,56,50,.14)}
.pa .ticket__frame{border:1px dashed var(--line);padding:40px 26px 32px;text-align:center}
.pa .eyebrow{font-family:var(--gothic);font-weight:300;font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--pink-deep)}
.pa .script{font-family:var(--script);color:var(--pink-deep);font-size:46px;line-height:1;margin:8px 0 2px}
.pa .title{margin:20px 0;font-family:var(--serif);font-style:italic;font-size:34px;line-height:1.05;color:var(--ink);font-weight:300}
.pa .sub-title{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.05;color:var(--ink);font-weight:300}
.pa .jp{font-family:var(--mincho);font-size:12px;line-height:2.2;letter-spacing:.04em;color:var(--ink);margin-top:14px}
.pa .jp b{color:var(--rasp);font-weight:500}.pa .jp i{color:var(--pink-deep)}
/* 白マーカー：各行を左からシュッとハイライト（スクロールで発火・1行ずつ） */
.pa .mkwrap{--mkdur:.85s;--mkgap:.45s} /* --mkdur=1行の速さ / --mkgap=行ごとの間隔 */
/* 下線マーカー：インライン背景＋box-decoration-breakで「行に追従」。
折り返しても
を入れても、各行に自動で下線が付く。
scaleXの代わりに background-size(幅0→100%) で左→右に伸ばす。 */
.pa .mk{padding:1px 6px;background-image:linear-gradient(#ebcdcd,#ebcdcd);background-repeat:no-repeat;background-position:0 calc(100% - .05em);background-size:0 .4em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--mkdur) ease-out}
.pa .mkwrap.in .mk{background-size:100% .4em}
.pa .mkwrap.in .mk:nth-of-type(2){transition-delay:calc(var(--mkgap)*1)}
.pa .mkwrap.in .mk:nth-of-type(3){transition-delay:calc(var(--mkgap)*2)}
.pa .mkwrap.in .mk:nth-of-type(4){transition-delay:calc(var(--mkgap)*3)}
.pa .mkwrap.in .mk:nth-of-type(5){transition-delay:calc(var(--mkgap)*4)}
.pa .mkwrap.in .mk:nth-of-type(6){transition-delay:calc(var(--mkgap)*5)}
.pa .mkwrap.in .mk:nth-of-type(7){transition-delay:calc(var(--mkgap)*6)}
.pa .mkwrap.in .mk:nth-of-type(8){transition-delay:calc(var(--mkgap)*7)}
/* マーカー本文：改行をPC/SPで出し分け（既定=PC、700px以下でSP） */
.pa .pa-mk-sp{display:none}
@media(max-width:700px){
.pa .pa-mk-pc{display:none}
.pa .pa-mk-sp{display:block}
}
.pa .allitems{display:block;width:100%;margin:28px auto 0;padding:13px 20px;border:1px solid var(--pink-deep);border-radius:100px;background:var(--pink-deep);color:#fff;font-family:var(--serif);font-style:italic;font-size:16px;text-decoration:none;text-align:center;transition:.25s}
.pa .allitems:hover{background:var(--rasp);border-color:var(--rasp)}
/* フォトスタック（スクロールで開く。速度は --gap/--dur で調整） */
.pa .pstack{position:relative;height:270px;margin:20px 0 30px;--gap:.6s;--dur:.8s}
.pa .pstack .ph{position:absolute;top:50%;left:50%;width:152px;background:#fff;padding:5px 5px 15px;box-shadow:0 8px 20px rgba(70,56,50,.2);transform:translate(-50%,calc(-50% + 36px)) scale(.68);opacity:0;transition:transform var(--dur) cubic-bezier(.2,.85,.25,1), opacity calc(var(--dur)*.7) ease}
.pa .pstack .ph img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.pa .pstack.in .ph{opacity:1}
.pa .pstack.in .p1{transform:translate(calc(-50% - 62px),calc(-50% + 2px)) rotate(-10deg);transition-delay:calc(var(--gap)*0)}
.pa .pstack.in .p2{transform:translate(calc(-50% + 56px),calc(-50% - 8px)) rotate(7deg);transition-delay:calc(var(--gap)*1)}
.pa .pstack.in .p3{transform:translate(calc(-50% - 28px),calc(-50% + 34px)) rotate(-4deg);transition-delay:calc(var(--gap)*2)}
.pa .pstack.in .p4{transform:translate(calc(-50% + 36px),calc(-50% + 28px)) rotate(9deg);transition-delay:calc(var(--gap)*3)}
.pa .pstack.in .p5{transform:translate(-50%,-50%) rotate(-2deg);transition-delay:calc(var(--gap)*4)}
.pa .pstack .p1{z-index:1}.pa .pstack .p2{z-index:2}.pa .pstack .p3{z-index:3}.pa .pstack .p4{z-index:4}.pa .pstack .p5{z-index:5;width:164px}
/* ===== Present Campaign 応募要項（リード文＋応募期間/対象/賞品＋注意書き） ===== */
.pa .pa-campaign-lead{margin-top:14px}
.pa .pa-div{border:0;border-top:1px dotted var(--line);width:100%;margin:40px 0 0}
.pa .pa-info{margin:40px 0 0;text-align:center}
.pa .pa-info dt{font-family:var(--gothic);font-weight:500;font-size:11px;letter-spacing:.22em;color:var(--pink-deep);margin-top:18px}
.pa .pa-info dt:first-child{margin-top:0}
.pa .pa-info dd{margin:5px 0 0;font-family:var(--mincho);font-size:clamp(12px,3.3cqw,13px);line-height:1.95;letter-spacing:.03em;color:var(--ink)}
/* 賞品：1行目=賞品名（通常）、2行目=部屋の詳細（小さめ・淡色）。文言はそのまま、階層で“1品＋説明”に見せる */
.pa .pa-info dd .pz-name{display:block}
.pa .pa-info dd .pz-spec{display:block;margin-top:3px;font-size:clamp(10px,2.9cqw,11px);line-height:1.5;letter-spacing:.02em;color:var(--ink-soft)}
.pa .pa-note{margin-top:20px;font-family:var(--mincho);font-size:11px;line-height:1.85;letter-spacing:.02em;color:var(--ink-soft);text-align:center}
/* ===== Hotel（撮影の舞台）セクション。Present Campaign の直前に配置。
画像は後日差し替え：.ho__ph 内の div.ph-gray を 
に置換する ===== */
.hotel .ho__ph{margin:0 auto 24px;max-width:440px}
.hotel .ho__body{max-width:440px;margin:0 auto;text-align:center;padding:0 22px}
.hotel .ho__desc{font-family:var(--mincho);font-size:clamp(12px,3.3cqw,14px);line-height:2.35;letter-spacing:.04em;text-align:justify;word-break:normal;color:var(--ink)}
.hotel .ho__addr{font-family:var(--gothic);font-weight:400;font-size:12px;line-height:1.9;letter-spacing:.03em;color:var(--ink);text-align:center}
.hotel .ho__links{display:flex;flex-direction:column;align-items:stretch;gap:25px;margin:30px 0 40px}
.hotel .ho__link{display:block;width:100%;text-align:center;font-family:var(--gothic);font-weight:400;font-size:12px;letter-spacing:.14em;color:var(--pink-deep);text-decoration:none;background:transparent;border:1px solid var(--pink-deep);border-radius:100px;padding:12px 14px;transition:.25s}
.hotel .ho__link:hover{background:var(--pink-deep);color:#fff}
.hotel .ho__sub{margin-top:34px}
.hotel .ho__sub .eyebrow{margin-bottom:12px}
/* SERVICE 内のキャンペーン見出し（2026/08/25 追加） */
.hotel .ho__svc-ttl{font-family:var(--mincho);font-weight:500;font-size:clamp(12px,3.3cqw,14px);line-height:1.8;letter-spacing:.04em;color:var(--pink-deep);text-align:center;margin-bottom:10px}
/* グレープレースホルダー（後日、実写真の ![]()
に置換） */
.ph-gray{width:100%;aspect-ratio:4 / 3;background:#dcdcdc;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:.1em}