:root {
  --plum:#35152c; --plum-deep:#2d1025; --berry:#6f214e; --cream:#fff8ed; --paper:#faf6ee; --gold:#f2c66e;
  --ink:#33262c; --muted:#75656b; --line:#d8ccc8;
  --serif:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif; --sans:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --ease:cubic-bezier(.22,.68,.12,1); --width:min(1200px,calc(100% - 96px)); --header-height:max(88px,5.5rem);
}
* { box-sizing:border-box; }
/* iPhone Safari enlarges text on its own in landscape; keep the sizes the layout was tuned for (pinch zoom still works). */
html { scroll-padding-top:calc(var(--header-height) + 24px); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html[data-motion="on"] { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.9; -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
img { display:block; max-width:100%; height:auto; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; font:inherit; cursor:pointer; border-radius:0; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:3px solid #ae6413; outline-offset:6px; }
.products a:focus-visible,.site-footer a:focus-visible,.menu-dialog a:focus-visible,.menu-dialog button:focus-visible { outline-color:var(--gold); }
h1,h2,h3,p { margin-top:0; }
/* Chrome and Safari keep a paragraph's last line from being one character such as 「す。」; other browsers wrap as before. */
p { text-wrap:pretty; }
/* Short phrases stay together so headings never leave one or two characters on a line. */
.nw { display:inline-block; }
/* Read by screen readers, not shown. */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:500; }
/* The px floor / cap keep the headings inside their columns when the browser's text size is set larger (rem grows, the column does not). Same size at the default 16px. */
h2 { margin-bottom:0; font-size:clamp(min(1.9rem,30.4px),3.55vw,min(3.6rem,57.6px)); letter-spacing:.035em; line-height:1.65; }
html:not(.js-ready) .js-control { display:none; }
.js-ready .js-control { display:inline-flex; }
.js-ready .gift-hint { display:block; }
.skip-link { position:fixed; z-index:1000; top:8px; left:8px; padding:8px 16px; background:var(--cream); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
/* The page body starts right under the header, so "本文へ移動" needs no scroll; without this it nudged the sample notice 6-18px out of view. */
#main { scroll-margin-top:4rem; }
.sample-note { min-height:30px; padding:4px 20px; display:flex; justify-content:center; align-items:center; gap:16px; background:var(--plum); color:var(--cream); font-size:.64rem; letter-spacing:.08em; }
/* ">" so the .nw phrase spans inside keep the Japanese text's style */
.sample-note > span:first-child { color:var(--gold); font-family:Georgia,serif; letter-spacing:.14em; }
.sample-note > span:last-child { font-size:.6875rem; }
.site-header { position:sticky; top:0; z-index:50; height:var(--header-height); background:var(--paper); }
.header-inner { width:calc(100% - 80px); margin:auto; display:flex; align-items:center; height:100%; gap:32px; }
.brand { width:172px; flex-shrink:0; }
.desktop-nav { margin-left:auto; display:flex; gap:clamp(20px,2.4vw,38px); }
.desktop-nav a { position:relative; font-size:.875rem; letter-spacing:.04em; padding:8px 0; white-space:nowrap; }
.desktop-nav a::after { content:""; position:absolute; bottom:3px; left:0; width:100%; height:1px; background:var(--berry); transform:scaleX(0); transform-origin:left; }
.desktop-nav a:focus-visible::after { transform:scaleX(1); }
.header-controls { display:flex; gap:16px; align-items:center; }
.motion-control { align-items:center; gap:7px; min-height:44px; border:0; background:none; padding:8px 0 8px 12px; font-size:.75rem; white-space:nowrap; }
.motion-dot { height:7px; width:7px; border:1px solid var(--berry); border-radius:50%; }
html[data-motion="on"] .motion-dot { background:var(--berry); }
.js-ready .menu-button { display:none; }
.reading-progress { height:1px; background:var(--line); }
.reading-progress::after { content:""; display:block; height:100%; width:100%; transform:scaleX(var(--reading-progress,0)); transform-origin:left; background:var(--berry); }
.hero { min-height:min(810px,calc(100svh - 118px)); display:grid; grid-template-columns:.95fr 1.05fr; position:relative; padding:36px 4.2% 0 6.5%; gap:5%; overflow:hidden; }
/* Printing: Firefox will not split an overflow:hidden box across pages, so the whole hero went to page 2 and left page 1 blank.
   clip trims the same overflow but can be split; browsers without clip keep hidden.
   Chrome repeats fixed boxes on every printed page, which put the hidden skip link (and any open toast) at the foot of each one. */
@media print { .hero { overflow:clip; } .skip-link,.toast { display:none; } }
.hero-copy { padding-top:34px; align-self:center; }
.hero h1 { color:var(--plum); margin-bottom:25px; font-size:clamp(3.3rem,5.1vw,5.6rem); line-height:1.43; letter-spacing:.09em; }
.hero-line { display:block; overflow:hidden; padding:0 .1em .07em 0; margin-bottom:-.07em; }
.hero-line > span { display:inline-block; }
.hero h1 em { font-style:normal; color:var(--berry); }
.hero-lead { margin-bottom:28px; font-size:1rem; line-height:2; letter-spacing:.05em; }
.round-link { display:inline-flex; justify-content:space-between; align-items:center; gap:28px; font-size:.9375rem; letter-spacing:.04em; }
.link-arrow { display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; height:49px; width:49px; font-size:1.25rem; flex-shrink:0; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:48px 0 26px; max-width:365px; }
.hero-bottom > span { color:var(--muted); font-size:.6875rem; }
.scroll-cue { display:inline-flex; align-items:center; gap:16px; font:.6rem Georgia,serif; letter-spacing:.12em; padding:12px 0; }
.scroll-cue > span:last-child { font-size:1.1rem; }
.hero-art { position:relative; align-self:stretch; display:flex; flex-direction:column; min-width:0; padding-top:10px; }
.hero-photo { position:relative; min-height:580px; flex:1; border-radius:47% 47% 0 0; overflow:hidden; background:#b28a6a; }
.hero-photo img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:76% 50%; transform:translateY(var(--hero-drift,0px)) scale(1.08); }
.hero-stamp { position:absolute; left:-56px; bottom:104px; background:var(--cream); border:1px solid #d0b4af; width:130px; height:130px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; transform:rotate(-13deg); box-shadow:0 8px 25px #35152c0d; }
.hero-stamp span { white-space:nowrap; }
.hero-stamp span:first-child { font:.66rem var(--serif); letter-spacing:.1em; }
.hero-stamp span:last-child { font:.6rem var(--serif); letter-spacing:.12em; }
.hero-stamp svg { width:63px; height:63px; fill:none; stroke:var(--berry); stroke-width:1.5; }
.photo-caption { margin:14px 0 16px; display:flex; justify-content:space-between; gap:16px; font:.6875rem Georgia,var(--sans); color:var(--muted); letter-spacing:.06em; }
.section { padding:110px 0; }
.section-kicker { width:var(--width); margin:0 auto 70px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:20px; border-top:1px solid var(--line); color:var(--berry); }
.section-kicker > span:first-child { font:.66rem Georgia,serif; letter-spacing:.12em; }
.section-kicker > span:last-child { font:.7rem var(--serif); letter-spacing:.1em; }
.about { padding-top:120px; }
.about-heading { width:var(--width); display:grid; grid-template-columns:1fr 1.6fr; align-items:center; margin:0 auto 70px; gap:8%; }
.sun-drawing { display:flex; flex-direction:column; align-items:center; gap:18px; color:var(--berry); }
.sun-drawing svg { width:clamp(110px,14vw,190px); fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; }
.about-intro { margin:30px 0 0; color:var(--muted); font-size:1rem; line-height:2; }
.about-points { width:var(--width); margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.about-points article { position:relative; padding:30px 0 0; border-top:1px solid var(--line); }
.point-number { font:italic .78rem Georgia,serif; color:var(--berry); }
.about-points h3 { margin:20px 0 14px; font-size:1.1rem; }
.about-points p { color:var(--muted); font-size:1rem; margin-bottom:0; }
.products { background:var(--plum); color:var(--cream); padding-bottom:54px; }
.products .section-kicker { color:var(--gold); border-color:#ffffff35; }
.products-heading { width:var(--width); margin:0 auto 72px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.products-heading > p { font-size:1rem; line-height:2; color:#e1ced4; margin:0 0 8px; }
/* With a larger browser text size the paragraph squeezed the heading into 「どれにしましょ／う。」; let the paragraph wrap instead. */
.products-heading > h2 { flex-shrink:0; }
.product-story { width:var(--width); margin:auto; display:grid; grid-template-columns:1.2fr .8fr; gap:8%; align-items:start; }
.product-stage { position:sticky; top:calc(var(--header-height) + 30px); margin-top:24px; }
.product-stage__photos { position:relative; height:clamp(330px,62vh,640px); max-height:calc(100svh - var(--header-height) - 70px - 2rem); background:#533347; overflow:hidden; }
.product-stage__photos > img { position:absolute; width:100%; height:100%; object-fit:cover; opacity:0; clip-path:inset(100% 0 0); transform:scale(1.06); }
.product-stage__photos > img.is-active { opacity:1; clip-path:inset(0); transform:scale(1); z-index:1; }
.product-stage__photos > img[data-product-photo="1"] { object-position:50% 50%; }
.photo-corner { position:absolute; z-index:3; bottom:0; right:0; display:flex; align-items:baseline; gap:10px; padding:16px 24px; background:var(--plum); font:.74rem Georgia,serif; }
.photo-corner span:first-child { font-size:1.65rem; color:var(--gold); }
.photo-corner span:last-child { color:#dec6d1; }
.stage-progress { background:#ffffff25; margin-top:20px; height:1px; }
.stage-progress > span { display:block; height:100%; background:var(--gold); transform:scaleX(.333333); transform-origin:left; }
/* Tall screens (owner's choice 2026-11-01): the photo is at most 640px, so pinned near the top it left half the screen empty below.
   Centre it on 52% of the screen, the line script.js uses for the current chapter, so it sits level with that chapter's text. */
@media (min-width:761px) and (min-height:1000px) { .product-stage { top:max(calc(var(--header-height) + 30px), calc(52svh - clamp(330px,62vh,640px) / 2)); } }
.product-chapter { min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:70px 0; }
.chapter-image { display:none; }
.product-label { color:var(--gold); font:.65rem Georgia,serif; letter-spacing:.12em; display:flex; align-items:center; gap:18px; margin-bottom:35px; }
.product-label > span { font-size:1rem; font-style:italic; border-bottom:1px solid #ffffff55; padding-bottom:4px; }
.product-sensation { font:.76rem var(--serif); letter-spacing:.07em; margin-bottom:18px; }
.chapter-copy h3 { font-size:clamp(min(1.8rem,28.8px),2.6vw,min(2.7rem,43.2px)); line-height:1.8; letter-spacing:.04em; margin-bottom:24px; }
.chapter-copy > p:not(.product-label,.product-sensation,.price) { max-width:345px; color:#e1ced4; font-size:1rem; line-height:2; }
.price { border-top:1px solid #ffffff35; display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:18px; margin:28px 0 0; font-size:.8125rem; max-width:345px; }
.price strong { font:1.6rem Georgia,serif; }
.price small { font-size:.75rem; }
.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:26px; border:0; padding:8px 0; border-bottom:1px solid currentColor; background:transparent; font-size:.9375rem; letter-spacing:.04em; }
.chapter-copy .text-link { margin-top:28px; color:var(--gold); }
.text-link > span { font-size:1.2rem; }
.product-notice { width:var(--width); margin:38px auto 0; color:#dec6d1; font-size:.75rem; }
.gift { background:#f0e7da; }
.gift-layout { width:var(--width); margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; grid-template-areas:"copy presentation" "price presentation"; column-gap:8%; align-items:center; }
.gift-copy { grid-area:copy; align-self:end; }
.gift-presentation { grid-area:presentation; min-width:0; }
.gift-actions { display:none; }
.js-ready .gift-actions { display:block; position:relative; z-index:4; width:min(calc(100% - 24px),15.5rem); margin:0 0 -26px clamp(8px,calc(42% - 7.75rem),160px); }
/* Just above 760px (and narrower still with a desktop scrollbar) the column fits 「「ありがとう」に、」 only if the minimum shrinks a little. */
.gift-copy h2 { font-size:clamp(min(1.75rem,3.5vw),2.9vw,min(2.8rem,44.8px)); }
.gift-lead { grid-area:lead; font-size:1rem; line-height:2; margin:28px 0 0; color:#65545b; }
.gift-price { grid-area:price; align-self:start; font-size:.8125rem; margin:28px 0; }
.gift-price strong { display:inline-block; font:1.45rem Georgia,serif; margin:8px 0 0; }
.gift-price small { font-size:.75rem; }
.gift-toggle { width:100%; min-height:82px; gap:12px; border:1px solid var(--plum); border-radius:6px; padding:13px 16px; color:var(--cream); background:var(--plum); text-align:left; transform:rotate(-3deg); box-shadow:0 8px 20px #35152c25; }
.gift-toggle__copy { display:block; min-width:0; }
.gift-toggle__prompt { display:block; font-size:.8125rem; line-height:1.6; letter-spacing:.04em; }
.gift-toggle__label { display:block; font:600 1.25rem/1.5 var(--serif); letter-spacing:.03em; }
.gift-toggle .link-arrow { width:2rem; height:2rem; font-size:1.15rem; border-color:currentColor; }
.gift-toggle:focus-visible { outline-color:#ae6413; outline-offset:5px; }
.gift-toggle[aria-expanded="true"] { color:var(--plum); background:var(--cream); box-shadow:0 4px 12px #35152c18; }
.gift-hint { font-size:.75rem; color:#65545b; margin:16px 0 0; }
.gift-wrap { position:relative; width:100%; overflow:hidden; aspect-ratio:1.12; background:#c4aa8c; box-shadow:0 26px 45px #35152c16; }
.gift-wrap > img { width:100%; height:100%; object-fit:cover; }
.wrapping,.gift-seal { display:none; }
.js-ready .wrapping { position:absolute; top:0; width:50.2%; height:100%; display:flex; align-items:center; background:#e5d3b9; background-image:repeating-linear-gradient(90deg,transparent 0 23px,#fff3 24px,transparent 25px); }
.wrapping::before { content:""; position:absolute; top:calc(50% - 21px); height:42px; width:100%; background:var(--berry); border-block:2px solid #ffffff30; }
.wrapping--left { left:0; justify-content:flex-end; border-right:1px solid #b8a087; padding-right:10px; }
.wrapping--right { right:0; justify-content:flex-start; padding-left:10px; }
.wrapping-word { font:italic clamp(1.8rem,4vw,3.8rem) Georgia,serif; color:var(--plum); align-self:flex-start; margin-top:21%; }
.js-ready .gift-seal { display:flex; position:absolute; width:92px; height:110px; top:calc(50% - 55px); left:calc(50% - 46px); background:var(--cream); flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1px solid #ceba9f; transform:rotate(-10deg); }
.gift-seal img { width:63px; height:63px; }
.gift-seal span { font:.58rem Georgia,serif; letter-spacing:.18em; }
.gift-wrap.is-open .wrapping--left { transform:translateX(-102%) rotate(-8deg); }
.gift-wrap.is-open .wrapping--right { transform:translateX(102%) rotate(8deg); }
.gift-wrap.is-open .gift-seal { opacity:0; transform:translateY(30px) rotate(12deg); pointer-events:none; }
.gift-caption { display:flex; justify-content:space-between; gap:12px; margin:22px 0 0; color:#65545b; }
.gift-caption span { font:.7rem var(--serif); }
.shop { padding-bottom:64px; }
.shop-heading { width:var(--width); margin:0 auto 58px; display:flex; justify-content:space-between; gap:30px; align-items:flex-end; }
.shop-heading > p { font-size:1rem; color:var(--muted); margin:0 0 10px; line-height:2; }
.shop-layout { width:var(--width); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; }
.shop-info { padding:28px 0; }
.shop-logo { width:207px; margin-bottom:30px; }
.shop-info dl { margin:0 0 28px; }
.shop-info dl > div { display:grid; grid-template-columns:5.3125rem 1fr; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem; }
.shop-info dt { color:var(--berry); }
.shop-info dd { margin:0; }
.shop-info dd small { display:block; color:var(--muted); font-size:.75rem; }
.sample-map { position:relative; min-height:420px; overflow:hidden; background:#eae1d3; border:1px solid #ddd1bf; }
.sample-map::before,.sample-map::after { content:""; position:absolute; inset:-15%; transform:rotate(-20deg); background:repeating-linear-gradient(0deg,transparent 0 70px,#faf6ee 71px 82px,transparent 83px 95px); }
.sample-map::after { transform:rotate(70deg); }
.map-street { width:150%; height:2px; position:absolute; left:-25%; top:58%; z-index:1; background:#b79365; transform:rotate(-29deg); }
.map-shop,.map-station,.map-walk { position:absolute; z-index:2; }
.map-shop { top:17%; right:17%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.map-shop span { font:.78rem var(--serif); background:var(--paper); padding:6px 12px; }
.map-station { bottom:14%; left:12%; background:var(--plum); color:var(--cream); padding:12px 22px; font-size:.75rem; }
.map-walk { left:38%; top:63%; color:#65545b; font:.75rem/1.8 var(--serif); transform:rotate(-12deg); }
/* 404.html: the heading is an h1 there, sized like the section headings. */
.not-found { min-height:calc(100svh - 330px); }
.not-found h1 { margin-bottom:0; font-size:clamp(min(1.9rem,30.4px),3.55vw,min(3.6rem,57.6px)); letter-spacing:.035em; line-height:1.65; }
.not-found-actions { width:var(--width); margin:48px auto 0; }
.instagram { width:var(--width); margin:82px auto 0; padding-top:36px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:30px; }
.instagram h3 { font-size:1.25rem; margin-bottom:10px; }
.instagram p:last-child { font-size:1rem; color:var(--muted); margin-bottom:0; }
.instagram .round-link { background:none; border:0; font:.9rem Georgia,serif; padding:0; }
.instagram .round-link > span:first-child { min-width:0; overflow-wrap:anywhere; }
.shop-demo-note { width:var(--width); margin:44px auto 0; font-size:.75rem; color:var(--muted); }
/* Same side margins as the sections; percentages ignore the scrollbar, unlike 100vw. */
.site-footer { background:var(--plum-deep); color:var(--cream); padding:64px calc((100% - var(--width)) / 2) 26px; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:25px; border-bottom:1px solid #ffffff35; padding:0 0 40px; font:clamp(2rem,5.5vw,5rem) var(--serif); letter-spacing:.05em; }
.footer-arrow { display:grid; place-items:center; width:clamp(60px,7vw,95px); height:clamp(60px,7vw,95px); border:1px solid #ffffff70; border-radius:50%; font:2rem Georgia,serif; }
.footer-row { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:40px 0; }
.footer-row img { width:175px; filter:brightness(0) invert(1); }
.footer-row p { margin:0; font-size:.75rem; color:#dfcdd5; line-height:2; }
.footer-meta { display:flex; justify-content:space-between; gap:18px; color:#dfcdd5; font:.55rem Georgia,serif; letter-spacing:.04em; }
.menu-dialog { color:var(--cream); background:var(--plum); border:0; padding:28px; width:100%; max-width:none; max-height:100dvh; min-height:100dvh; margin:0; }
.menu-dialog::backdrop { background:#2d1025bb; }
.menu-dialog:not([open]) { display:none; }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:.7rem; }
.dialog-head p { margin:0; }
.menu-close { display:inline-flex; align-items:center; gap:16px; min-height:44px; border:0; background:none; color:var(--cream); padding:8px; font-size:.8rem; }
.menu-close > span { font-size:1.65rem; }
.menu-dialog nav { margin-top:clamp(32px,8vh,90px); }
.menu-dialog nav a { display:flex; align-items:baseline; gap:20px; padding:23px 0; border-bottom:1px solid #ffffff35; font:clamp(1.3rem,4vw,2rem) var(--serif); }
.menu-dialog nav a > span:first-child { font:italic .75rem Georgia,serif; color:var(--gold); }
.menu-dialog nav a > span:last-child { margin-left:auto; }
.dialog-note { margin:40px 0; font:.86rem var(--serif); color:#dfcdd5; }
/* Phones held sideways: tighten the menu so all four links fit without scrolling inside it. */
@media (max-height:520px) {
  .menu-dialog { padding-block:12px; }
  .menu-dialog nav { margin-top:4px; }
  .menu-dialog nav a { padding:11px 0; font-size:clamp(1.05rem, 5.4vh, 1.5rem); }
  .dialog-note { display:none; }
}
.toast { position:fixed; z-index:100; bottom:22px; left:50%; transform:translateX(-50%); width:min(480px,calc(100% - 36px)); background:var(--plum); color:var(--cream); box-shadow:0 12px 35px #35152c30; font-size:.8rem; text-align:center; }
.toast:not(:empty) { padding:16px 22px; border:1px solid var(--gold); text-wrap:pretty; }
/* Narrow phones: a little more room so 「実際のInstagramアカウントはありません。」 fits on one line from 300px. */
@media (max-width:359px) { .toast { width:calc(100% - 20px); } .toast:not(:empty) { padding:14px 12px; } }

html:not(.js-ready) .product-story { display:block; }
html:not(.js-ready) .product-stage { display:none; }
html:not(.js-ready) .product-chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
html:not(.js-ready) .product-chapter { min-height:0; padding:0; justify-content:flex-start; }
html:not(.js-ready) .chapter-image { display:block; aspect-ratio:1; margin-bottom:28px; overflow:hidden; }
html:not(.js-ready) .chapter-image img { width:100%; height:100%; object-fit:cover; }
html:not(.js-ready) .chapter-image--pound img { object-position:50% 50%; }
html[data-motion="on"] .desktop-nav a::after { transition:transform 450ms var(--ease); }
/* Content remains visible without JavaScript; motion is an enhancement. */
html[data-motion="on"] .hero-line > span { animation:line-arrive 1000ms var(--ease) both; }
html[data-motion="on"] .hero-line:nth-child(2) > span { animation-delay:140ms; }
html[data-motion="on"] .hero-line:nth-child(3) > span { animation-delay:280ms; }
html[data-motion="on"] .hero-photo { animation:photo-arrive 1300ms var(--ease) both; }
html[data-motion="on"] .hero-stamp { animation:stamp-arrive 1100ms 400ms var(--ease) both; }
html[data-motion="on"] :is(.link-arrow,.text-link > span,.footer-arrow) { transition:transform 450ms var(--ease),background-color 350ms,color 350ms; }
html[data-motion="on"] .product-stage__photos > img { transition:opacity 700ms var(--ease),clip-path 900ms var(--ease),transform 1200ms var(--ease); }
html[data-motion="on"] .stage-progress > span { transition:transform 650ms var(--ease); }
html[data-motion="on"] .gift-toggle[aria-expanded="false"] .gift-toggle__copy { animation:gift-callout 4s 700ms ease-in-out infinite; }
html[data-motion="on"] .wrapping { transition:transform 1250ms var(--ease); }
html[data-motion="on"] .gift-seal { transition:opacity 300ms,transform 450ms var(--ease); }
html[data-motion="on"] .menu-dialog[open] { animation:menu-arrive 650ms var(--ease) both; }
html[data-motion="on"] .menu-dialog[open] nav a { animation:line-arrive 650ms 150ms var(--ease) both; }
html[data-motion="on"] .menu-dialog[open] nav a:nth-child(2) { animation-delay:210ms; }
html[data-motion="on"] .menu-dialog[open] nav a:nth-child(3) { animation-delay:270ms; }
html[data-motion="on"] .menu-dialog[open] nav a:nth-child(4) { animation-delay:330ms; }
html[data-motion="off"] .hero-photo img { transform:scale(1.08); }
/* Scroll-in: section rules draw from the left, photos unfold from the middle like the wrapping.
   Screen only, so a page printed before scrolling still shows every photo and rule. */
@media screen {
  html[data-motion="on"].js-ready .section-kicker { position:relative; border-top-color:transparent; }
  html[data-motion="on"].js-ready .section-kicker::before { content:""; position:absolute; top:-1px; left:0; width:100%; height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform 1100ms var(--ease); }
  html[data-motion="on"].js-ready .products .section-kicker::before { background:#ffffff35; }
  html[data-motion="on"].js-ready .section-kicker.is-seen::before { transform:scaleX(1); }
  html[data-motion="on"].js-ready :is(.chapter-image,.sample-map) { clip-path:inset(0); transition:clip-path 1100ms var(--ease); }
  html[data-motion="on"].js-ready :is(.chapter-image,.sample-map):not(.is-seen) { clip-path:inset(0 50% 0 50%); }
}
/* High-contrast modes repaint the drawn line in the page colour, hiding the real rule beneath it. */
@media (forced-colors:active) {
  html[data-motion="on"].js-ready .section-kicker::before { content:none; }
}
/* Touch screens keep :hover after a tap, which would leave arrows turned until the next tap. */
@media (hover:hover) {
  .desktop-nav a:hover::after { transform:scaleX(1); }
  .round-link:hover .link-arrow { background:var(--plum); color:var(--cream); transform:rotate(45deg); }
  .text-link:hover > span { transform:translate(3px,-3px); }
  .gift-toggle:hover .link-arrow { background:transparent; color:inherit; transform:none; }
  .footer-top:hover .footer-arrow { transform:translateY(-8px); }
}
@keyframes gift-callout {
  0%,24%,100% { transform:translateX(0) rotate(0); }
  4%,12%,20% { transform:translateX(-2px) rotate(-1deg); }
  8%,16% { transform:translateX(2px) rotate(1deg); }
}
@keyframes line-arrive { from { opacity:0; transform:translateY(110%) rotate(2deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
@keyframes photo-arrive { from { clip-path:inset(100% 0 0); transform:translateY(30px); } to { clip-path:inset(0); transform:translateY(0); } }
@keyframes stamp-arrive { from { opacity:0; transform:translateY(35px) rotate(-30deg); } to { opacity:1; transform:translateY(0) rotate(-13deg); } }
@keyframes menu-arrive { from { clip-path:inset(0 0 100%); } to { clip-path:inset(0); } }

/* High-contrast modes paint the page dark, but the logo SVG keeps its dark lettering. */
@media (forced-colors:active) {
  .brand img,.shop-logo { forced-color-adjust:none; background:var(--cream); padding:4px 8px; border-radius:4px; }
}
@media (min-width:1600px) {
  .hero { padding-left:max(6.5%,calc((100% - 1440px) / 2)); padding-right:max(4.2%,calc((100% - 1440px) / 2)); }
}
@media (max-width:1080px) {
  :root { --width:calc(100% - 64px); --header-height:max(78px,4.875rem); }
  .header-inner { width:calc(100% - 48px); gap:20px; }
  .brand { width:150px; }
  .desktop-nav { gap:20px; }
  .desktop-nav a { font-size:.8125rem; }
  .hero { padding-left:5%; gap:4%; min-height:720px; }
  .hero h1 { font-size:4.5vw; }
  .hero-photo { min-height:560px; }
  .hero-stamp { width:110px; height:110px; left:-32px; }
  .hero-stamp svg { width:50px; height:50px; }
  .about-points { gap:28px; }
  .about-points h3 { font-size:1rem; }
  .product-story { gap:6%; }
  .gift-layout { column-gap:6%; }
}
@media (max-width:960px) {
  .header-inner { width:calc(100% - 36px); gap:12px; flex-wrap:wrap; }
  .brand { width:146px; }
  .header-controls { margin-left:auto; gap:12px; }
  .motion-control { padding-left:0; }
  .js-ready .desktop-nav { display:none; }
  .js-ready .menu-button { display:inline-flex; align-items:center; gap:9px; border:0; padding:8px 0 8px 5px; min-height:44px; font:.75rem Georgia,serif; background:none; }
  .menu-lines { width:20px; height:9px; border-block:1px solid var(--plum); }
  html:not(.js-ready) .site-header,html.nav-unsupported .site-header { height:auto; min-height:110px; position:static; }
  html:not(.js-ready) .header-inner,html.nav-unsupported .header-inner { padding-top:12px; }
  html:not(.js-ready) .desktop-nav,.js-ready .desktop-nav.nav-fallback { display:flex; order:2; width:100%; margin:0; justify-content:space-between; gap:10px; padding-bottom:12px; }
}
/* Up to 1500px the hero copy shares the left edge of the sections below; a few pixels off reads as a mistake. */
@media (min-width:761px) and (max-width:1500px) {
  .hero { padding-left:calc((100% - var(--width)) / 2); }
}
/* Short desktop screens: shrink the hero spacing, the photo's minimum height and, if needed, the
   heading with the viewport height so the button, the stamp and the "SCROLL" row are never cut by
   the bottom edge. Below 700px the row cannot fit at all, so it is hidden there, as on phones. */
@media (min-width:761px) and (max-height:900px) {
  .hero { padding-top:clamp(8px, 4svh - 8px, 36px); }
  .hero-photo { min-height:min(580px, max(320px, calc(100svh - 218px))); }
  .hero-copy { padding-top:clamp(0px, 6svh - 20px, 34px); }
  .hero h1 { margin-bottom:clamp(12px, 3svh, 25px); font-size:min(clamp(3.3rem,5.1vw,5.6rem), 8.4svh); }
  .hero-lead { margin-bottom:clamp(16px, 3.5svh, 28px); }
  .hero-bottom { margin:clamp(16px, 9svh - 40px, 48px) 0 clamp(12px, 3svh, 26px); }
}
/* Tablets: the rotated stamp reaches into the copy column, so keep the SCROLL cue clear of it. */
@media (min-width:761px) and (max-width:1080px) {
  .hero-bottom { max-width:min(365px, calc(100% - 40px)); }
}
@media (min-width:761px) and (max-width:1080px) and (max-height:900px) {
  .hero { min-height:min(720px, calc(100svh - 118px)); }
  .hero h1 { font-size:min(4.5vw, 8.4svh); }
  .hero-photo { min-height:min(560px, max(320px, calc(100svh - 218px))); }
}
@media (min-width:761px) and (max-height:699px) {
  .hero-bottom { display:none; }
}
@media (max-width:760px) {
  :root { --width:calc(100% - 40px); --header-height:max(72px,4.5rem); }
  .sample-note { font-size:.58rem; gap:8px; padding-inline:10px; }
  .hero { min-height:auto; grid-template-columns:1fr; padding:16px 20px 0; gap:18px; }
  .hero-copy { padding:0; }
  .hero h1 { font-size:clamp(2.5rem,10vw,4.6rem); letter-spacing:.07em; line-height:1.38; margin-bottom:16px; }
  .hero-lead { margin-bottom:16px; }
  .hero .round-link { gap:30px; font-size:.9375rem; }
  .link-arrow { width:45px; height:45px; }
  .hero-bottom { display:none; }
  .hero-art { padding:0 10px; margin-left:22px; }
  .hero-photo { min-height:0; flex:none; height:clamp(350px,95vw,600px); }
  .hero-photo img { object-position:50% 50%; }
  .hero-stamp { width:103px; height:103px; bottom:68px; left:-25px; }
  .hero-stamp span:first-child { font-size:.55rem; }
  .hero-stamp span:last-child { font-size:.5rem; }
  .hero-stamp svg { height:48px; width:48px; }
  .photo-caption { margin:16px 0 0; }
  .section { padding:78px 0; }
  .section-kicker { margin-bottom:46px; padding-top:16px; gap:12px; }
  .section-kicker > span:first-child { font-size:.59rem; }
  .section-kicker > span:last-child { font-size:.6875rem; }
  h2 { font-size:clamp(1.65rem,6.3vw,2.6rem); line-height:1.8; }
  .about-heading { grid-template-columns:1fr; gap:32px; margin-bottom:40px; }
  .sun-drawing { flex-direction:row; justify-content:flex-start; }
  .sun-drawing svg { width:76px; }
  .about-intro { margin-top:24px; }
  .desktop-break { display:none; }
  .about-points { grid-template-columns:1fr; gap:0; }
  .about-points article { padding:24px 0; display:grid; grid-template-columns:32px 1fr; gap:8px 14px; }
  .about-points article:last-child { padding-bottom:0; }
  .point-number { grid-column:1; padding-top:6px; }
  .about-points h3 { grid-column:2; margin:0; font-size:1.04rem; }
  .about-points p { grid-column:2; }
  .products { padding-bottom:40px; }
  .products-heading { flex-direction:column; align-items:flex-start; gap:25px; margin-bottom:44px; }
  .products-heading > p { margin:0; }
  .product-story { display:block; }
  html:not(.js-ready) .product-chapters { grid-template-columns:1fr; gap:0; }
  .product-stage { display:none; }
  .product-chapter { min-height:auto; padding:0 0 56px; margin-bottom:42px; border-bottom:1px solid #ffffff35; }
  .product-chapter:last-child { padding-bottom:0; margin-bottom:0; border:0; }
  .chapter-image { display:block; margin-bottom:30px; aspect-ratio:1.12; overflow:hidden; }
  .chapter-image img { width:100%; height:100%; object-fit:cover; }
  .chapter-image--pound img { object-position:50% 50%; }
  .product-label { margin-bottom:18px; }
  .product-sensation { margin-bottom:12px; }
  .chapter-copy h3 { font-size:1.85rem; line-height:1.65; margin-bottom:20px; }
  .chapter-copy h3 br { display:none; }
  .chapter-copy > p:not(.product-label,.product-sensation,.price) { max-width:none; }
  .price { max-width:none; margin-top:22px; }
  .product-notice { margin-top:38px; }
  .gift-layout { grid-template-columns:1fr; grid-template-areas:"copy" "presentation" "lead" "price"; gap:0; }
  .gift-copy { display:contents; }
  .gift-heading { grid-area:copy; }
  .gift { padding-top:48px; }
  .gift .section-kicker { margin-bottom:24px; }
  .gift-presentation { margin-top:26px; }
  .gift-copy h2 { font-size:1.9rem; }
  .gift-lead { margin:26px 0 0; }
  .gift-price { margin:26px 0 0; }
  .gift-wrap { aspect-ratio:1.1; max-height:max(180px,calc(50svh - var(--header-height) - 3rem)); }
  .wrapping-word { font-size:2.8rem; }
  .gift-caption { display:none; }
  .shop-heading { flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:15px; }
  .shop-layout { grid-template-columns:1fr; gap:24px; }
  .shop-info { padding-top:20px; padding-bottom:0; }
  .shop-logo { width:180px; }
  .shop-info dl > div { grid-template-columns:4.5rem 1fr; }
  .sample-map { min-height:350px; }
  .map-shop { right:12%; }
  .map-walk { left:39%; font-size:.75rem; }
  .instagram { flex-direction:column; align-items:flex-start; margin-top:48px; gap:24px; }
  .instagram h3 { font-size:1.08rem; line-height:1.8; }
  .instagram .round-link { width:100%; font-size:.87rem; }
  .shop-demo-note { margin-top:35px; }
  .site-footer { padding:45px 20px 24px; }
  .footer-top { padding-bottom:28px; font-size:clamp(1.8rem,7.6vw,2.6rem); }
  .footer-arrow { width:48px; height:48px; font-size:1.6rem; }
  .footer-row { flex-direction:column; align-items:flex-start; padding:32px 0; }
  .footer-row img { width:160px; }
  .footer-meta { flex-direction:column; gap:12px; font-size:.51rem; }
}
@media (max-width:360px) {
  .sample-note { flex-wrap:wrap; gap:0 8px; line-height:1.6; padding-block:5px; }
  .header-inner { width:calc(100% - 24px); gap:8px; }
  .brand { width:126px; }
  .header-controls { gap:10px; }
  .hero { padding-inline:16px; }
  .hero-copy { padding-inline:4px; }
  .hero h1 { font-size:10.8vw; }
  .gift-copy h2 { font-size:1.7rem; }
  .chapter-copy h3 { font-size:1.65rem; }
}

/* Very narrow phones (e.g. 280px fold covers): keep logo and controls on one row inside the header. */
@media (max-width:319px) {
  .brand { width:100px; }
  h2,.gift-copy h2 { font-size:1.5rem; }
}
/* Below 300px the opened label 「もう一度、包む」 wrapped to 「包／む」 and the button grew, pushing the photo down; a little less padding keeps it on one line. */
@media (max-width:299px) { .gift-toggle { padding-inline:12px; gap:8px; } }

@media (max-width:760px) and (max-height:700px) {
  .gift { padding-top:28px; }
  .gift .section-kicker { margin-bottom:16px; }
  .gift-presentation { margin-top:18px; }
}

/* Keep the opening and its button together when a landscape viewport is short. */
@media (orientation:landscape) and (max-height:760px) {
  .gift { padding-top:8px; }
  .gift .section-kicker,.gift .gift-hint,.gift-caption { display:none; }
  .gift-layout { grid-template-columns:.9fr 1.1fr; grid-template-areas:"copy presentation" "lead presentation" "price presentation"; gap:0 clamp(16px,4vw,32px); align-items:start; }
  .gift-copy { display:contents; }
  .gift-heading { grid-area:copy; }
  .gift-copy h2 { font-size:clamp(1.2rem,2.8vw,1.75rem); line-height:1.6; }
  .gift-lead,.gift-price { margin:14px 0 0; }
  .gift-presentation { display:grid; grid-template-rows:auto minmax(3rem,1fr); align-self:start; min-height:10rem; height:calc(100svh - var(--header-height) - 44px); margin-top:0; }
  .js-ready .gift-actions { width:min(calc(100% - 8px),15.5rem); margin-left:clamp(0px,calc(42% - 7.75rem),160px); }
  .gift-wrap { grid-row:2; min-height:0; height:100%; max-height:none; aspect-ratio:auto; }
}