/* ==========================================================================
   工房 ここひな - 統合スタイルシート (style.css)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 共通リセット & 基本スタイル (Common Reset & Base)
   -------------------------------------------------------------------------- */

:root{--ink:#242320;--paper:#f8f6f1;--accent:#876650}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:110px}

body{margin:0;color:var(--ink);background:var(--paper);font-family:"Yu Mincho","Hiragino Mincho ProN",serif;-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none}

button{font:inherit;cursor:pointer}

img{display:block;max-width:100%}

p{line-height:2.25;margin:0 0 1.5em}

h1,h2,h3{font-weight:400;margin:0}

a:focus-visible,button:focus-visible{outline:2px solid #b89c72;outline-offset:6px}

.header{position:fixed;inset:0 0 auto;z-index:100;height:100px;padding:0 3.5%;display:flex;align-items:center;justify-content:space-between;gap:35px;color:white;transition:background .35s,height .35s,color .35s}

.header.scrolled,.header.menu-open{height:84px;color:#111;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);box-shadow:0 3px 24px #30271d0b}

.brand{width:220px;position:relative;flex-shrink:0}

.brand img{width:100%;height:auto;transition:opacity .35s}

.brand .black{position:absolute;inset:0;opacity:0}

.scrolled .brand .white,.menu-open .brand .white{opacity:0}

.scrolled .brand .black,.menu-open .brand .black{opacity:1}

.nav{display:flex;align-items:center;gap:34px;font-family:"Yu Gothic",sans-serif;font-size:13px;font-weight:500;letter-spacing:.09em}

.nav a:not(.reserve){padding:14px 0;position:relative}

.nav a:not(.reserve):after{content:"";position:absolute;bottom:5px;left:0;width:0;height:1px;background:currentColor;transition:width .25s}

.nav a:hover:after{width:100%}

.reserve{padding:15px 25px;background:#fff;color:#222;border-radius:30px;display:inline-flex;gap:24px;align-items:center;transition:background .3s,color .3s}

.scrolled .reserve,.menu-open .reserve{background:#252420;color:white}

.menu{display:none;background:none;border:0;color:inherit;width:44px;height:44px}

.menu span{display:block;background:currentColor;height:1px;margin:7px 0}

.hero{height:100svh;min-height:620px;position:relative;color:white;display:grid;place-items:center;overflow:hidden}

.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 53%}

.hero-copy{position:relative;z-index:1;text-align:center;width:min(90%,850px);margin-top:-15px;text-shadow:0 2px 14px #0005}

.hero-copy .intro{font-size:clamp(23px,2.8vw,40px);letter-spacing:.16em;margin:0 0 35px}

.hero-copy h1 img{width:min(100%,650px);margin:auto;filter:drop-shadow(0 2px 8px #0003)}

.hero-copy .caption{font-size:15px;letter-spacing:.35em;margin:32px 0 0}

.scroll{position:absolute;z-index:2;bottom:0;left:50%;transform:translateX(-50%);font:9px Arial,sans-serif;letter-spacing:.25em;display:flex;flex-direction:column;align-items:center;gap:17px}

.scroll:after{content:"";width:1px;height:55px;background:#ffffffb0}

.wrap{width:min(1180px,86%);margin:auto}

.eyebrow{font:10px Arial,sans-serif;letter-spacing:.25em;color:var(--accent);margin-bottom:27px}

.story{padding:130px 0 110px}

.story-heading{display:grid;grid-template-columns:1fr 2fr;align-items:start;margin-bottom:65px}

.story-heading .eyebrow{padding-top:14px}

.story h2{font-size:clamp(28px,3.2vw,44px);line-height:1.8;letter-spacing:.1em}

.story-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:8%;align-items:center}

.story-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:43% center}

.small-caption{font-size:11px;color:#797369;letter-spacing:.1em;margin-top:15px}

.body-copy{font-size:14px;letter-spacing:.05em}

.body-copy .lead{font-size:20px;line-height:1.9;margin-bottom:28px}

.body-copy p:last-child{margin-bottom:0}

.wishes{padding:55px 0 0;margin-top:60px;border-top:1px solid #dcd6cb;text-align:center}

.wishes blockquote{margin:0 0 23px;font-size:clamp(17px,1.8vw,24px);line-height:2.15;letter-spacing:.07em}

.wishes p{font-size:14px;color:#655f55}

.makers{background:#efece5;padding:110px 0}

.section-title{font-size:clamp(28px,3vw,40px);letter-spacing:.1em;line-height:1.8;margin-bottom:55px}

.maker-main{display:grid;grid-template-columns:38% 1fr;gap:9%;align-items:center}

.portrait{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 35%}

.name{font-size:25px;letter-spacing:.15em;margin:20px 0 10px}

.role{font-size:12px;color:#786f63;line-height:1.9}

.maker-main h3{font-size:29px;margin-bottom:27px;line-height:1.8}

.maker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:85px}

.maker-grid .name{font-size:21px}

.maker-grid .role{font-size:11px}

.maker-grid .bio{font-size:12px;margin-top:18px;line-height:2}

.visit{padding:100px 0;text-align:center}

.visit h2{font-size:clamp(26px,3vw,40px);line-height:1.8;letter-spacing:.1em;margin-bottom:25px}

.visit p{font-size:14px}

.actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

.action{border:1px solid #b9b0a3;padding:18px 35px;font-size:14px;background:transparent;min-width:220px}

.action.primary{background:#292824;color:#fff;border-color:#292824}

.action:hover{background:#e9e3d8}

.action.primary:hover{background:#514d43}

footer{border-top:1px solid #ded9d0;padding:45px 7%;display:flex;justify-content:space-between;align-items:center;gap:30px}

footer img{width:200px}

footer small{font:10px Arial;letter-spacing:.1em;color:#7b766e}

dialog{border:1px solid #ded6c9;background:var(--paper);padding:45px;max-width:calc(100% - 40px);width:470px;line-height:2}

dialog::backdrop{background:#17181380}

dialog h2{font-size:24px;margin-bottom:20px}

dialog p{font-size:14px}

dialog button{border:1px solid #b9b0a3;background:none;padding:10px 25px}

@media(min-width:1600px){.hero-copy h1 img{width:750px}}

@media(max-width:1050px){.nav{gap:20px;font-size:12px}.brand{width:185px}.header{gap:22px}.reserve{padding:13px 20px;gap:16px}.maker-grid{gap:20px}}

@media(max-width:800px){html{scroll-padding-top:90px}.header,.header.scrolled,.header.menu-open{height:76px;padding:0 22px}.brand{width:166px}.menu{display:block}.nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;color:#111;padding:25px;box-shadow:0 15px 20px #0001}.menu-open .nav{display:flex;flex-direction:column;align-items:stretch;gap:8px}.nav a{text-align:center}.nav .reserve{justify-content:center;margin-top:10px}.hero{min-height:580px}.hero-photo{object-position:51% center}.hero-copy{width:86%;margin-top:-5px}.hero-copy .intro{font-size:23px;letter-spacing:.12em;margin-bottom:30px}.hero-copy .caption{font-size:12px;margin-top:28px}.wrap{width:86%}.story{padding:80px 0}.story-heading{display:block;margin-bottom:40px}.story-heading .eyebrow{padding-top:0;margin-bottom:18px}.story h2{font-size:28px}.story-grid{grid-template-columns:1fr;gap:35px}.story-photo{aspect-ratio:4/3}.body-copy{font-size:13px}.body-copy .lead{font-size:20px}.wishes{margin-top:40px;padding-top:36px}.wishes blockquote{font-size:17px}.makers{padding:75px 0}.section-title{margin-bottom:35px}.maker-main{grid-template-columns:1fr;gap:32px}.maker-main>figure{max-width:420px;width:100%;margin:auto}.maker-main h3{font-size:25px}.maker-grid{grid-template-columns:1fr 1fr;gap:35px 20px;margin-top:55px}.maker-grid .name{font-size:18px;letter-spacing:.07em}.visit{padding:75px 0}footer{flex-direction:column;text-align:center}figure{margin:0}.scroll:after{height:42px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:after{transition:none!important}}

/* Keep the supplied calligraphy; typeset the revised English signature. */
.brand img,.hero-copy h1 img,footer a img{clip-path:polygon(0 0,100% 0,100% 100%,74% 100%,74% 83%,26% 83%,26% 100%,0 100%)}

.hero-copy h1,footer a{position:relative;display:block}

.brand:after,.hero-copy h1:after,footer a:after{content:"KARUIZAWA";position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.24em;line-height:1.15;text-indent:.24em}

.brand:after{font-size:8px}

.hero-copy h1:after{font-size:clamp(12px,1.6vw,22px)}

footer a:after{font-size:8px}

.opening{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#000;color:#fff;overflow:hidden;animation:opening-warmth 7s linear forwards;transition:opacity 1.35s ease,visibility 1.35s}

.opening-copy{position:relative;width:100%;height:180px;text-align:center;letter-spacing:.14em}

.opening-copy p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;opacity:0;line-height:1.8;margin:0;padding:0 15px;font-weight:400}

.opening-copy p:first-child{font-size:clamp(18px,2.2vw,30px);animation:opening-thought 7s ease forwards}

.opening-copy p:last-child{font-size:clamp(34px,4.5vw,64px);color:#70503b;animation:opening-love 7s ease forwards}

.opening.done{opacity:0;visibility:hidden;pointer-events:none}

html.is-opening{overflow:hidden}

html.is-opening .hero-copy{opacity:0;transform:translateY(12px)}

.hero-copy{transition:opacity 1.5s ease .3s,transform 1.5s ease .3s}

@keyframes opening-warmth{0%,35%{background:#000}53%,100%{background:#f1dfca}}

@keyframes opening-thought{0%,4%{opacity:0;filter:blur(6px);transform:translateY(7px)}20%,29%{opacity:1;filter:blur(0);transform:translateY(0)}40%,100%{opacity:0;filter:blur(5px);transform:translateY(-4px)}}

@keyframes opening-love{0%,47%{opacity:0;filter:blur(9px);transform:scale(.96);letter-spacing:.14em}64%,77%{opacity:1;filter:blur(0);transform:scale(1);letter-spacing:.14em}98%,100%{opacity:0;filter:blur(20px);transform:scale(1.35);letter-spacing:.48em}}

@media(prefers-reduced-motion:reduce){.opening{animation:none;background:#f1dfca;transition:none}.opening-copy p:first-child{display:none}.opening-copy p:last-child{animation:none;opacity:1;filter:none;transform:none}.hero-copy{transition:none}}

/* A gently irregular handwritten invitation. */
.opening-copy p:last-child{font-family:"HGP教科書体","HG教科書体","UD Digi Kyokasho NP-R","Yu Mincho",serif;font-size:clamp(43px,5.8vw,82px);color:#975b40;gap:.07em;letter-spacing:0}

.love-letter{display:inline-block;transform:rotate(-4deg);text-shadow:0 2px 14px #d59a5a18}

.love-letter:nth-child(2){transform:translateY(.09em) rotate(3deg);font-size:.79em}

.love-letter:nth-child(3){transform:translateY(-.015em) rotate(-2deg)}

.love-letter:nth-child(4){transform:translateY(.055em) rotate(4deg);font-size:.92em}

.love-letter:nth-child(5){transform:translateY(.015em) rotate(-3deg);font-size:.95em}

.love-letter:nth-child(6){transform:translateY(-.045em) rotate(9deg);font-size:.88em}

@keyframes opening-love{0%,47%{opacity:0;filter:blur(9px);transform:scale(.94);gap:.07em}64%,77%{opacity:1;filter:blur(0);transform:scale(1);gap:.07em}98%,100%{opacity:0;filter:blur(20px);transform:scale(1.35);gap:.34em}}

.textile{position:absolute;top:0;bottom:0;width:28%;pointer-events:none;opacity:0;animation:opening-textile 7s ease forwards;mask-image:linear-gradient(to right,#000 0%,#000 43%,#000b 65%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 43%,#000b 65%,transparent 100%)}

.textile-left{left:0}

.textile-right{right:0;transform:scaleX(-1)}

.textile-art{display:block;width:100%;height:100%;opacity:.83}

.opening-copy{z-index:1}

@keyframes opening-textile{0%,39%{opacity:0;filter:blur(8px)}60%,80%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(12px)}}

@media(max-width:600px){.textile{width:25%;mask-image:linear-gradient(to right,#000, #0009 35%,transparent);-webkit-mask-image:linear-gradient(to right,#000, #0009 35%,transparent)}.textile-art{width:160%;max-width:none;opacity:.7}}

@media(prefers-reduced-motion:reduce){.textile{animation:none;opacity:.6;filter:none}}

.hero-copy .intro{margin-bottom:12px}

.hero-copy .hero-location{font-family:Georgia,"Times New Roman",serif;font-size:clamp(12px,1.6vw,22px);font-weight:400;line-height:1.4;letter-spacing:.24em;text-indent:.24em;margin:0 0 42px}

.hero-copy h1:after{content:none}

@media(max-width:800px){.hero-copy .intro{margin-bottom:12px}.hero-copy .hero-location{margin-bottom:32px}}

/* Refined navigation and deep green reservation accents. */
.header .nav{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:16px;font-weight:500;letter-spacing:.12em;gap:clamp(22px,2.4vw,38px)}

.header .nav .reserve{font-size:15px;letter-spacing:.13em;padding:16px 28px;gap:25px}

.header .reserve,.header.scrolled .reserve,.header.menu-open .reserve,.action.primary{background:#244b3e;color:#fff;border-color:#244b3e}

.header .reserve:hover,.header.scrolled .reserve:hover,.header.menu-open .reserve:hover,.action.primary:hover{background:#16382d;color:#fff;border-color:#16382d}

.header .reserve span{transition:transform .25s ease}

.header .reserve:hover span{transform:translate(2px,-2px)}

@media(min-width:801px) and (max-width:1100px){.header .nav{gap:20px;font-size:14px;letter-spacing:.07em}.header .nav .reserve{font-size:14px;padding:14px 22px;gap:15px}}

@media(max-width:800px){.header .nav{font-size:17px;gap:10px;letter-spacing:.13em}.header .nav .reserve{font-size:16px}}

/* Desktop: show the complete photograph without cover cropping or pixel upscaling. */
@media(min-width:801px){
.hero{background:#24382e;min-height:0}
.hero-photo{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100%,1567px);height:min(100%,1004px);object-fit:contain;object-position:center}
.hero-copy h1 img{width:min(100%,650px)}
}

/* Expanded landscape photo: preserve its full framing without side bands. */
@media(min-width:801px){
.hero{height:auto;min-height:0;aspect-ratio:1811 / 868}
.hero-photo{inset:0;transform:none;width:100%;height:100%;object-fit:contain;object-position:center}
.hero-copy{padding:85px 0 70px}
}

@media(min-width:801px) and (max-width:1100px){
.hero-copy .intro{font-size:26px;line-height:1.6}
.hero-copy .hero-location{margin-bottom:22px;font-size:14px}
.hero-copy h1 img{width:440px}
.hero-copy .caption{margin-top:15px;font-size:12px}
.scroll:after{height:24px}
}

/* Slightly larger typography throughout, retaining the visual hierarchy. */
.body-copy{font-size:16px}

.body-copy .lead{font-size:22px}

.story h2{font-size:clamp(30px,3.4vw,47px)}

.eyebrow{font-size:12px}

.small-caption{font-size:13px}

.wishes blockquote{font-size:clamp(19px,2vw,26px)}

.wishes p{font-size:16px}

.section-title{font-size:clamp(30px,3.2vw,43px)}

.maker-main h3{font-size:31px}

.name{font-size:27px}

.role{font-size:14px}

.maker-grid .name{font-size:23px}

.maker-grid .role{font-size:13px}

.maker-grid .bio{font-size:14px}

.visit h2{font-size:clamp(28px,3.2vw,43px)}

.visit p,.action{font-size:16px}

footer small{font-size:12px}

dialog p{font-size:16px}

dialog h2{font-size:26px}

.header .nav{font-size:17px}

.header .nav .reserve{font-size:16px}

.hero-copy .intro{font-size:clamp(25px,3vw,43px)}

.hero-copy .hero-location{font-size:clamp(14px,1.7vw,24px)}

.hero-copy .caption{font-size:17px}

.scroll{font-size:10px}

.opening-copy p:first-child{font-size:clamp(20px,2.4vw,33px)}

.opening-copy p:last-child{font-size:clamp(46px,6vw,88px)}

@media(min-width:801px) and (max-width:1100px){.header .nav{font-size:15px;gap:16px}.header .nav .reserve{font-size:15px;padding:14px 18px}.hero-copy .intro{font-size:28px}.hero-copy .hero-location{font-size:16px}.hero-copy .caption{font-size:14px}}

@media(max-width:800px){
.body-copy{font-size:15px}.body-copy .lead{font-size:22px}.story h2{font-size:30px}
.wishes blockquote{font-size:19px}.wishes p{font-size:15px}.maker-main h3{font-size:27px}
.maker-grid .name{font-size:20px}.maker-grid .role{font-size:13px}.maker-grid .bio{font-size:14px}
.header .nav{font-size:18px}.header .nav .reserve{font-size:17px}
.hero-copy .intro{font-size:25px;letter-spacing:.07em}.hero-copy .caption{font-size:14px}
}

.gallery{padding:15px 0 95px;background:var(--paper)}

.gallery-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:35px}

.gallery-heading h2{font-size:clamp(25px,2.5vw,36px);line-height:1.7;letter-spacing:.09em}

.gallery-heading .eyebrow{margin-bottom:16px}

.gallery-controls{display:flex;gap:12px}

.gallery-controls button,.gallery-view-bottom button{width:48px;height:48px;border:1px solid #b7bbae;border-radius:50%;background:transparent;color:#244b3e;font-size:22px}

.gallery-controls button:hover{background:#244b3e;color:#fff}

.gallery-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#a7afa1 #e7e4dc;padding:0 7% 22px;scroll-padding-inline:7%;overscroll-behavior-x:contain}

.gallery-item{flex:0 0 clamp(290px,29vw,440px);padding:0;background:none;border:0;text-align:left;color:var(--ink);scroll-snap-align:start}

.gallery-item img{width:100%;aspect-ratio:3/2;object-fit:cover}

.gallery-item>span{display:flex;align-items:center;gap:14px;padding-top:18px;font-size:15px;letter-spacing:.04em}

.gallery-item small{font:11px Georgia;color:var(--accent)}

.gallery-item b{font-weight:400;margin-left:auto;color:#244b3e;font-size:22px}

.gallery-item:hover img{filter:brightness(1.06)}

.gallery-hint{font-size:12px;color:#787367;margin-top:18px;line-height:1.8}

#gallery-view{width:min(1120px,94vw);max-width:94vw;max-height:94svh;padding:52px 24px 18px;border:0;background:#f8f6f1;overflow:auto}

#gallery-view::backdrop{background:#151c18db}

#gallery-view>img{width:100%;height:min(68svh,720px);object-fit:contain}

#gallery-view .gallery-close{position:absolute;right:14px;top:7px;border:0;padding:0;width:40px;height:40px;font-size:32px;background:none}

.gallery-view-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}

.gallery-view-bottom p{margin:0;text-align:center;font-size:15px;line-height:1.8}

.gallery-view-bottom button{padding:0;flex-shrink:0}

@media(max-width:800px){.gallery{padding-bottom:65px}.gallery-heading{align-items:flex-start}.gallery-heading h2{font-size:24px}.gallery-controls{gap:6px}.gallery-controls button{width:38px;height:38px}.gallery-track{gap:16px}.gallery-item{flex-basis:82vw}.gallery-item>span{font-size:14px}.gallery-view-bottom p{font-size:13px}.gallery-hint{font-size:12px}}

:root{--paper:#fcf8f3;--accent:#a8796b}

.story{background:linear-gradient(180deg,#fcf8f3,#fbf5f0)}

.story-photo{border-radius:70px 8px 70px 8px}

.eyebrow{color:#a57567}

.wishes{position:relative;border-color:#e5d3c8}

.wishes:before{content:"✿";position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:#fbf5f0;padding:0 20px;color:#cd9d97;font-size:25px}

.wishes blockquote{color:#765447}

.makers{background:#f2eae2}

.portrait{border-radius:35px 5px 35px 5px}

.gallery{padding-top:45px;background:linear-gradient(180deg,#fbf5f0,#f5e9e3);position:relative}

.gallery-heading h2{color:#6b4e42}

.gallery-heading .eyebrow:before{content:"✿";font-size:18px;margin-right:12px;color:#c18d89;vertical-align:middle}

.gallery-item{flex-basis:clamp(420px,46vw,700px)}

.gallery-item img{border-radius:24px 24px 6px 6px;box-shadow:0 8px 22px #714b3510}

.gallery-item>span{padding:20px 8px 4px;font-size:16px}

.gallery-controls button{background:#fff8f3;border-color:#d6b6a8;color:#795b4e}

.gallery-controls button:hover{background:#7e9580;color:white;border-color:#7e9580}

.gallery-track{gap:28px;scrollbar-color:#d1ada1 #f0e0d8;padding-bottom:28px}

.gallery-controls .gallery-play{font-family:Arial,sans-serif;font-size:16px}

.gallery-hint{color:#896c60}

.visit{background:radial-gradient(ellipse at 50% 100%,#f0dcd2 0%,#fcf8f3 65%)}

.action{border-radius:32px}

.visit .eyebrow:before{content:"✿";display:block;font-size:28px;margin-bottom:18px;color:#c69591}

footer{background:#fcf8f3;border-color:#e7d9cc}

@media(max-width:800px){.gallery-heading{flex-wrap:wrap;gap:20px}.gallery-heading>div:first-child{width:100%}.gallery-controls{margin-left:auto}.gallery-item{flex-basis:88vw}.gallery-track{gap:18px;padding-inline:6%;scroll-padding-inline:6%}.gallery-item>span{font-size:15px}.story-photo{border-radius:40px 6px 40px 6px}}

/* Reveal only the background photograph after the opening sequence. */
.hero-photo{filter:blur(0);transition:filter 4.8s cubic-bezier(.2,.55,.25,1) .15s;will-change:filter}

html.is-opening .hero-photo{filter:blur(18px)}

@media(prefers-reduced-motion:reduce){.hero-photo,html.is-opening .hero-photo{filter:none;transition:none;will-change:auto}}

/* Keep the opening statement on a single line. */
.story-heading{grid-template-columns:1fr;gap:14px}

.story-heading .eyebrow{padding-top:0;margin-bottom:0}

.story-heading h2{white-space:nowrap;font-size:clamp(24px,3.2vw,44px);letter-spacing:.055em}

@media(max-width:800px){.story-heading h2{font-size:clamp(14px,4.05vw,30px);letter-spacing:0}.story-heading .eyebrow{margin-bottom:18px}}

.love-story{position:relative;background:#fcf5ee}

.love-stage{position:relative;padding:100px 7%}

.love-slide{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;margin-bottom:90px}

.love-copy h2{font-size:clamp(30px,3.5vw,50px);line-height:1.5;letter-spacing:.08em;color:#795648;margin-bottom:20px}

.love-copy h3{font-size:19px;line-height:1.8;color:#aa7a69;margin-bottom:25px}

.love-copy p{font-size:16px;line-height:2;margin-bottom:17px}

.love-copy .eyebrow{font-size:11px;margin-bottom:22px}

.love-photo{margin:0;height:65svh;min-height:380px;background:#f1e3d7;border-radius:100px 6px 100px 6px;overflow:hidden}

.love-photo img{width:100%;height:100%;object-fit:cover}

.love-slide-0 .love-photo img{object-fit:contain}

.love-slide.reverse .love-photo{grid-column:1;grid-row:1}

.love-slide.reverse .love-copy{grid-column:2;grid-row:1}

.love-finale{display:block;text-align:center;background:radial-gradient(ellipse,#f0d6c580,transparent 70%)}

.love-finale .love-copy{max-width:880px;margin:auto}

.love-flower{display:block;font-size:30px;color:#c38c87;margin-bottom:22px}

.love-finale h2{font-size:clamp(36px,4.5vw,64px)}

.love-ending{color:#9c6551;font-size:19px!important;margin-top:25px}

.love-skip{position:absolute;right:7%;top:100px;font-size:12px;color:#957366;z-index:5}

.love-progress{display:none}

.is-pinned .love-stage{position:sticky;top:0;height:100svh;padding:0;overflow:hidden}

.is-pinned .love-slide{position:absolute;inset:115px 8% 65px;margin:0;opacity:0;visibility:hidden;will-change:opacity,transform}

.is-pinned .love-photo{height:min(67svh,720px);min-height:0}

.is-pinned .love-finale{display:flex;align-items:center;justify-content:center}

.is-pinned .love-progress{position:absolute;bottom:24px;left:8%;right:8%;display:flex;align-items:center;gap:20px;color:#997565;font:10px Arial;letter-spacing:.16em}

.love-progress i{height:1px;background:linear-gradient(to right,#a67665 var(--love-progress,0%),#ddc8bb 0);flex:1}

@media(max-width:800px){.love-stage{padding:90px 7%}.love-slide{grid-template-columns:1fr;gap:20px}.love-slide.reverse .love-copy,.love-slide.reverse .love-photo{grid-column:auto;grid-row:auto}.love-photo{height:40svh;min-height:0;border-radius:45px 5px 45px 5px}.love-copy h2{font-size:27px;margin-bottom:8px}.love-copy h3{font-size:15px;margin-bottom:12px}.love-copy p{font-size:14px;line-height:1.9;margin-bottom:12px}.love-copy .eyebrow{margin-bottom:12px}.love-skip{top:84px}.love-finale h2{font-size:33px}.love-ending{font-size:16px!important}}

@media(prefers-reduced-motion:reduce){.love-slide{will-change:auto!important}}

.love-slide-0 .love-photo,.is-pinned .love-slide-0 .love-photo{height:auto;min-height:0;aspect-ratio:3/2;border-radius:28px 6px 28px 6px;background:transparent}

.love-slide-0 .love-photo img{height:auto;object-fit:contain}

.love-finale h2{padding-left:.08em}

.floating-reservation{position:fixed;left:3.5%;top:104px;width:clamp(110px,11vw,158px);z-index:90;opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .8s ease,transform .8s ease,visibility .8s;filter:drop-shadow(0 4px 10px #72554012)}

.floating-reservation img{width:100%;height:auto}

.floating-reservation.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}

html.is-opening .floating-reservation{opacity:0;visibility:hidden;pointer-events:none}

@media(max-width:800px){.floating-reservation{left:16px;top:96px;width:88px}}

@media(prefers-reduced-motion:reduce){.floating-reservation{transition:none;transform:none}}

.makers-thought{text-align:center;margin-top:75px}

.thought-link{display:inline-flex;align-items:center;gap:48px;padding:22px 38px;background:#244b3e;color:#fff;border-radius:50px;font-size:18px;letter-spacing:.09em;transition:background .3s}

.thought-link:hover{background:#37614f}

.makers-thought.reveal-ready{opacity:0;transform:translateY(30px);transition:opacity 1.2s ease,transform 1.2s ease}

.makers-thought.reveal-ready.is-revealed{opacity:1;transform:none}

.company{padding:110px 0;background:#fcf8f3}

.company-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:8%}

.company-facts{margin:0}

.company-facts>div{display:grid;grid-template-columns:95px 1fr;gap:15px;padding:23px 0;border-bottom:1px solid #e2d4c8;font-size:16px;line-height:1.9}

.company-facts dt{color:#8d6856}

.company-facts dd{margin:0;overflow-wrap:anywhere}

.company-business h3{font-size:22px;color:#795648;margin:0 0 18px;letter-spacing:.08em}

.company-business p,.company-business li{font-size:16px;line-height:2.15}

.company-business ul{padding-left:1.3em;margin:0 0 34px}

.company-business h3:not(:first-child){margin-top:36px}

@media(max-width:800px){.company{padding:75px 0}.company-layout{grid-template-columns:1fr;gap:45px}.company-facts>div{font-size:15px}.company-business p,.company-business li{font-size:15px}.thought-link{font-size:16px;gap:25px;padding:20px 27px}}

@media(prefers-reduced-motion:reduce){.makers-thought.reveal-ready{opacity:1;transform:none;transition:none}}

.love-choose{margin-top:30px}

.love-choose.reveal-ready{opacity:0;transform:translateY(22px);visibility:hidden;transition:opacity 1.8s ease .4s,transform 1.8s ease .4s,visibility 0s 2.2s}

.love-choose.reveal-ready.is-revealed{opacity:1;transform:none;visibility:visible;transition:opacity 1.8s ease .4s,transform 1.8s ease .4s,visibility 0s}

.love-choose .thought-link{font-size:17px;padding:17px 32px}

@media(min-width:801px) and (max-height:800px){.is-pinned .love-finale .love-flower{margin-bottom:10px;font-size:24px}.is-pinned .love-finale h2{font-size:40px;margin-bottom:14px}.is-pinned .love-finale p{font-size:14px;line-height:1.85;margin-bottom:12px}.is-pinned .love-finale .love-ending{font-size:16px!important;margin-top:15px}.is-pinned .love-choose{margin-top:20px}}

@media(prefers-reduced-motion:reduce){.love-choose.reveal-ready{opacity:1;transform:none;visibility:visible;transition:none}}

.love-choose .thought-link{position:relative;background:#f7e2df;color:#795648;border:1px solid #dca8a2;border-radius:50px;padding:17px 29px;gap:22px;box-shadow:0 4px 0 #eed0c9,0 8px 22px #ac776512;letter-spacing:.08em;transition:background .3s,box-shadow .3s,transform .3s}

.love-choose .thought-link:before{content:'✿';color:#c98689;font-size:23px;line-height:1}

.love-choose .thought-link span{color:#b88269;font-size:20px}

.love-choose .thought-link:hover{background:#f2d4d0;transform:translateY(-2px);box-shadow:0 6px 0 #eed0c9,0 10px 25px #ac776521}

@media(max-width:800px){.love-choose .thought-link{font-size:15px;gap:13px;padding:15px 23px}}

.maker-letter{position:relative;margin:0 auto 85px;padding:64px clamp(28px,7vw,100px) 56px;background:linear-gradient(135deg,#fffdf8,#fcf1e9);border:1px solid #e9d8cb;border-radius:65px 12px 65px 12px;box-shadow:0 12px 38px #92715b08}

.maker-letter:after{content:'';position:absolute;inset:12px;border:1px dashed #d9bca666;border-radius:54px 8px 54px 8px;pointer-events:none}

.letter-flower{display:block;text-align:center;color:#c78e8c;font-size:27px;margin-bottom:20px}

.maker-letter .body-copy{max-width:820px;margin:auto;color:#665046}

.maker-letter h3{text-align:center;font-size:clamp(25px,2.6vw,34px);letter-spacing:.08em;margin:0 0 32px;font-weight:400}

.maker-letter p{line-height:2.35}

.representative-profile{align-items:start;gap:9%}

.representative-profile figure{margin:0}

.representative-profile .portrait{border-radius:40px 6px 40px 6px}

.representative-career .eyebrow{margin:0 0 15px}

.representative-career h3.name{font-size:30px;margin:0 0 20px;font-weight:400}

.career-craft{font-size:14px;line-height:2;color:#8b7060;margin-bottom:25px}

.representative-career h4{font-size:18px;font-weight:400;letter-spacing:.15em;margin:0 0 18px;color:#795648}

.career-timeline{margin:0}

.career-timeline>div{display:grid;grid-template-columns:85px 1fr;gap:20px;padding:0 0 23px}

.career-timeline dt{color:#a67665;font-size:16px}

.career-timeline dd{margin:0;font-size:16px;line-height:2}

.career-timeline dd p{margin:12px 0;font-size:15px;line-height:2}

.career-timeline dd span{font-size:14px;color:#8b7060}

.career-positions{border-top:1px solid #ddc9b9;padding-top:20px}

.career-positions p{font-size:15px;margin:0;line-height:2}

@media(max-width:800px){.maker-letter{padding:40px 25px;margin-bottom:50px;border-radius:40px 8px 40px 8px}.maker-letter:after{inset:8px;border-radius:33px 5px 33px 5px}.maker-letter h3{font-size:24px}.representative-profile{grid-template-columns:1fr;gap:35px}.representative-profile figure{width:min(100%,380px);margin:auto}.career-timeline>div{grid-template-columns:72px 1fr;gap:14px}.career-timeline dd{font-size:15px}}

/* Improve the reading panel contrast while retaining warm accents. */
.maker-letter{background:#fffefa;border-color:#c9ad99;box-shadow:0 10px 28px #62432d14}

.maker-letter:after{border-color:#ceb4a180}

.maker-letter .body-copy{color:#392f29;font-size:17px;font-weight:500}

.maker-letter h3{color:#3c3028;font-weight:500}

.maker-letter .letter-flower{color:#b46c73}

@media(max-width:800px){.maker-letter .body-copy{font-size:16px}}

/* A warmer, playful greeting for the opening. */
.opening-copy p:last-child{font-family:"UD Digi Kyokasho NP-B","UD Digi Kyokasho NK-B","HGP教科書体",serif;font-weight:600;color:#cc526b;text-shadow:0 2px 0 #fff5,0 5px 22px #de829525}

.opening-copy .love-letter{ text-shadow:inherit }

.opening-copy .love-letter:first-child{color:#d94867}

.opening-copy .love-letter:nth-child(3){color:#d35a78}

.opening-copy .love-letter:last-child{color:#d78949}

.opening-copy p:last-child:before,.opening-copy p:last-child:after{content:'✿';position:absolute;color:#e991a2;font-family:serif;font-weight:400;font-size:.34em;line-height:1;text-shadow:none}

.opening-copy p:last-child:before{left:calc(50% - 2.65em);top:-.25em;transform:rotate(-17deg)}

.opening-copy p:last-child:after{right:calc(50% - 3.7em);bottom:-.15em;font-size:.24em;color:#dc9e66;transform:rotate(13deg)}

@keyframes opening-warmth{0%,35%{background:#000}53%,100%{background:#fff0e5}}

@media(prefers-reduced-motion:reduce){.opening{background:#fff0e5}}

/* Restrained opening palette and typography. */
.opening-copy p:last-child{color:#a56561;font-weight:400;text-shadow:none;font-family:"HGP教科書体","HG教科書体","UD Digi Kyokasho NP-R","Yu Mincho",serif}

.opening-copy p:last-child .love-letter{color:inherit;text-shadow:none}

.opening-copy p:last-child:before,.opening-copy p:last-child:after{content:none}

@keyframes opening-warmth{0%,35%{background:#000}53%,100%{background:#f6e9dc}}

@media(prefers-reduced-motion:reduce){.opening{background:#f6e9dc}}

/* Quiet, elegant opening with a warm handwritten character. */
.opening-copy p:last-child{font-size:clamp(40px,5.3vw,76px);color:#996865;gap:.12em}

.opening-copy p:last-child .love-letter{transform:none;font-size:1em}

.opening-copy p:last-child .love-letter:nth-child(2){font-size:.86em}

.opening-copy p:last-child .love-letter:last-child{font-size:.82em}

@keyframes opening-love{0%,47%{opacity:0;filter:blur(9px);transform:translateY(8px) scale(.98);gap:.12em}66%,79%{opacity:1;filter:blur(0);transform:translateY(0) scale(1);gap:.12em}98%,100%{opacity:0;filter:blur(16px);transform:scale(1.16);gap:.27em}}

/* Editorial Mincho treatment, distinct from the original handwritten opening. */
.opening-copy p:last-child{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(36px,4.8vw,70px);font-weight:400;color:#853f4d;text-shadow:none}

.opening-copy p:last-child .love-letter{font-size:1em;transform:none;color:inherit}

.opening-copy p:last-child .love-letter:first-child{font-size:1.2em;color:#9c4857}

.opening-copy p:last-child .love-letter:nth-child(2){font-size:.82em}

.opening-copy p:last-child .love-letter:last-child{font-size:.7em;color:#a1875c}

.opening-copy p:last-child:after{content:'';display:block;position:absolute;width:46px;height:1px;left:calc(50% - 23px);right:auto;bottom:0;background:#b29a71;transform:none}

@keyframes opening-warmth{0%,35%{background:#000}53%,100%{background:#faf5ed}}

@media(prefers-reduced-motion:reduce){.opening{background:#faf5ed}}

/* Soft brush lettering with restrained plum-blossom accents. */
.opening-copy p:last-child{font-family:"UD Digi Kyokasho NP-R","HGP教科書体","HG教科書体",serif;font-size:clamp(40px,5.3vw,76px);font-weight:400;color:#b65f72}

.opening-copy p:last-child .love-letter{color:inherit;font-size:1em;transform:none}

.opening-copy p:last-child .love-letter:first-child{font-size:1.14em;color:#ad5369;transform:rotate(-2deg)}

.opening-copy p:last-child .love-letter:nth-child(2){font-size:.82em;transform:translateY(.03em)}

.opening-copy p:last-child .love-letter:last-child{font-size:.76em;color:#b65f72;transform:rotate(4deg)}

.opening-copy p:last-child:before{content:'✿';position:absolute;left:calc(50% - 12px);top:-24px;font-family:serif;font-size:24px;font-weight:400;line-height:1;color:#c9949a;transform:none}

.opening-copy p:last-child:after{content:'';position:absolute;width:30px;height:1px;left:calc(50% - 15px);bottom:0;background:#c5ad83;transform:none}

.mobile-fixed-booking{display:none}

@media(max-width:900px){
.floating-reservation{display:none!important}
body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.mobile-fixed-booking{display:flex;align-items:center;justify-content:center;gap:22px;position:fixed;z-index:95;left:20px;right:20px;bottom:calc(14px + env(safe-area-inset-bottom,0px));min-height:56px;border:1px solid rgba(255,255,255,.24);border-radius:32px;background:rgba(174,112,133,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;text-decoration:none;font-size:17px;letter-spacing:.12em;box-shadow:0 5px 18px rgba(126,76,93,.16)}
.mobile-fixed-booking:focus-visible{outline:3px solid #b75c75;outline-offset:3px}
.header.menu-open~.mobile-fixed-booking{visibility:hidden}
}

footer{flex-wrap:wrap;gap:28px}

footer>.footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 28px;margin-left:auto}

footer>.footer-links a{display:inline-block;position:static;font-size:14px;letter-spacing:.08em;white-space:nowrap}

footer>.footer-links a:after{content:none}

footer>.footer-links a:hover{text-decoration:underline;text-underline-offset:5px}

@media(max-width:800px){footer>.footer-links{width:100%;margin:0;gap:18px 24px}footer>.footer-links a{font-size:13px}footer>small{width:100%;text-align:center}}

@media(min-width:801px){footer{display:grid;grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr);align-items:center;gap:24px}footer>.footer-links{margin:0;justify-self:center;justify-content:center}footer>small{justify-self:end}}

footer>.footer-links a{font-size:16px}

@media(max-width:800px){footer>.footer-links a{font-size:14px}}

@media(max-width:800px){footer>.footer-links{flex-direction:column;align-items:stretch;gap:2px;width:100%}footer>.footer-links a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;font-size:15px;text-align:center}}

.brand:after,footer>a:after{content:none!important;display:none!important}

.brand img,footer>a img{clip-path:none!important}


/* --------------------------------------------------------------------------
   2. ページ個別基本設定 (Page Specific Base / Header / Backgrounds)
   -------------------------------------------------------------------------- */
/* HTML共通スクロール挙動 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

/* ページ別 Body 背景・文字色 */
body.page-home {
  color: var(--ink);
  background: var(--paper);
}
body.page-concept {
  background: #fcf8f3;
}
body.page-direct {
  background: #faf3e8;
  color: #09213d;
  isolation: isolate;
}
body.page-points {
  background: #fcf8f3;
}

/* ページ別 ヘッダー調整 */
body.page-home .header,
body.page-direct .header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 100px;
}
body.page-concept .header,
body.page-points .header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 84px;
  color: #242320;
  background: #fffefa;
}

/* ページ別 ヒーローグラデーション調整 */
body.page-home .hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #10251d20, #10251d3d 46%, #10251d66 78%, #10251d80 100%);
  pointer-events: none;
}
body.page-concept .hero:after,
body.page-direct .hero:after,
body.page-points .hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #10251d30, #10251d59 46%, #10251d78 78%, #10251d90 100%);
  pointer-events: none;
}



/* --------------------------------------------------------------------------
   3. トップページ固有スタイル (index.html)
   -------------------------------------------------------------------------- */

.love-story.is-pinned{height:300svh}

@media(min-width:801px){.hero{aspect-ratio:3984/2406;height:auto}.hero-photo{object-fit:contain}}

.opening{background:#faf5ed;animation:none}

.opening-copy p:last-child{display:flex;animation:opening-love-direct 4s ease forwards}

.textile{animation:opening-textile-direct 4s ease forwards}

@keyframes opening-love-direct{0%{opacity:0;filter:blur(8px);transform:translateY(8px) scale(.98);gap:.12em}28%,68%{opacity:1;filter:blur(0);transform:translateY(0) scale(1);gap:.12em}100%{opacity:0;filter:blur(16px);transform:scale(1.16);gap:.27em}}

@keyframes opening-textile-direct{0%{opacity:0;filter:blur(8px)}25%,72%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(12px)}}

@media(min-width:801px){.hero{aspect-ratio:4182/2223;height:auto}}

@media(prefers-reduced-motion:reduce){.opening-copy p:last-child{display:flex;animation:none;opacity:1;filter:none;transform:none}.textile{animation:none;opacity:1}}

/* Keep the hero lettering above the noren inscription. */
@media(min-width:801px){.hero-copy{position:absolute;top:clamp(105px,7.5vw,155px);left:50%;translate:-50% 0;margin:0;width:min(86%,850px)}.hero-copy h1 img{width:clamp(340px,32vw,590px)}.hero-copy .hero-location{margin-bottom:22px}.hero-copy .caption{margin-top:18px}.hero-copy .intro{font-size:clamp(23px,2.4vw,40px)}}

@media(max-width:800px){.hero-copy{position:absolute;top:105px;left:50%;translate:-50% 0;margin:0}.hero-copy .hero-location{margin-bottom:20px}.hero-copy .caption{margin-top:16px}}

.opening{background:linear-gradient(90deg,#eedbd7 0%,#f6ebe2 17%,#faf5ed 34%,#faf5ed 66%,#f6ebe2 83%,#eedbd7 100%)}

@media(min-width:801px){.hero{aspect-ratio:4182/2088;height:auto}}

/* Match the crown of each staff portrait at approximately 12% of the frame. */
.maker-grid article:nth-child(1) .portrait{object-position:center 18%}

.maker-grid article:nth-child(2) .portrait{object-position:center 13%}

.maker-grid article:nth-child(3) .portrait{object-position:center 72%}

.maker-grid article:nth-child(4) .portrait{object-position:center 100%}

html:not(.is-opening) .hero-photo{filter:blur(var(--hero-scroll-blur,0px))}

html.hero-scroll-active:not(.is-opening) .hero-photo{transition:filter .7s ease-out}

@media(prefers-reduced-motion:reduce){html:not(.is-opening) .hero-photo{filter:none;transition:none}}

.opening{display:none}

@media(max-width:900px){.mobile-fixed-booking{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease,visibility .5s}.mobile-fixed-booking.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){.mobile-fixed-booking{transition:none;transform:none}}

@media(max-width:800px){.hero-photo{object-fit:cover;object-position:center center}}

@media(max-width:800px){
.hero-copy{top:25%;width:90%;padding:0}
.hero-copy .intro{font-size:clamp(25px,6.9vw,30px);font-weight:700;line-height:1.6;letter-spacing:.055em;margin-bottom:10px}
.hero-copy .hero-location{font-size:13px;margin-bottom:18px}
.hero-copy h1 img{width:72%;max-width:270px;margin:auto}
.hero-copy .caption{font-size:12px;margin-top:14px}
}

@media(max-width:800px) and (prefers-reduced-motion:no-preference){html:not(.hero-scroll-active) .hero-photo{transition:filter 2.8s linear 0s}}

@media(max-width:800px){
body{width:100%;overflow-x:clip}
body>.header{position:fixed;left:0;right:0;top:0;width:100%;height:76px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}
body>.header .brand{width:166px;max-width:48vw;flex:0 0 auto}
body>.header .brand img{width:100%;max-width:100%;height:auto}
body>.opening{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
.opening .opening-copy{width:100%;max-width:100%;height:180px}
.opening .opening-copy p{font-size:clamp(32px,10.6vw,43px);padding:0 12px;max-width:100%;white-space:nowrap}
.hero{width:100%;height:100svh;min-height:580px;position:relative;overflow:hidden}
.hero-picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-picture>.hero-photo{position:absolute;inset:0;left:0;top:0;transform:none;width:100%;height:100%;max-width:100%;object-fit:cover}
.hero>.hero-copy{position:absolute;left:5%;right:5%;top:25%;width:90%;max-width:90%;translate:none;margin:0;padding:0}
.hero>.hero-copy .intro{font-size:clamp(25px,6.9vw,30px);font-weight:700;line-height:1.6;letter-spacing:.055em}
.hero>.hero-copy h1{width:100%;margin-left:0;margin-right:0}
.hero>.hero-copy h1 img{width:72%;max-width:270px;height:auto;margin:auto}
}

@media(min-width:801px){.hero-copy{transition:none}}

@media(min-width:801px) and (prefers-reduced-motion:no-preference){html:not(.hero-scroll-active) .hero-photo{transition:filter 2.8s linear 0s}}

@media(prefers-reduced-motion:no-preference){html.photo-reveal-wait:not(.is-opening) .hero-photo{filter:blur(18px);transition:none}}

.hero-copy h1{position:relative}

.hero-copy h1 .hero-sign{position:absolute;left:calc(50% + clamp(170px,16vw,295px) + 18px);top:50%;transform:translateY(-50%);width:clamp(72px,5.3vw,102px);height:auto;display:block}

.hero-copy h1 .hero-sign img{width:100%;max-width:100%;height:auto;clip-path:none;border-radius:50%;margin:0;filter:drop-shadow(0 0 4px rgba(255,255,255,.48)) drop-shadow(0 2px 4px #0002)}

@media(max-width:800px){.hero-copy h1 .hero-sign{left:calc(86% + 2px);width:44px}.hero>.hero-copy h1 .hero-sign img{width:100%;max-width:100%;height:auto;margin:0}}

.makers{background:linear-gradient(to bottom,#f2eae2 0%,#f2eae2 calc(100% - 180px),#fcf8f3 100%)}

@media(max-width:800px){.makers{background:linear-gradient(to bottom,#f2eae2 0%,#f2eae2 calc(100% - 110px),#fcf8f3 100%)}}

.hero-copy h1{display:flex;align-items:center;justify-content:center;gap:18px}

.hero-copy h1>img{flex:0 1 auto;margin:0;width:clamp(340px,32vw,590px)}

.hero-copy h1 .hero-sign{position:static;transform:none;flex:0 0 auto;width:clamp(72px,5.3vw,102px)}

@media(max-width:800px){.hero>.hero-copy h1{display:flex;align-items:center;justify-content:center;gap:8px}.hero>.hero-copy h1>img{width:72%;max-width:270px;margin:0}.hero-copy h1 .hero-sign{position:static;transform:none;width:44px}}


/* --------------------------------------------------------------------------
   4. ものづくりへの想い固有スタイル (concept.html)
   -------------------------------------------------------------------------- */

.love-story.is-pinned{height:650svh}

.message-hero{padding:155px 7% 70px;text-align:center;background:radial-gradient(ellipse at 50% 100%,#f1e2d7,transparent 70%)}

.message-hero h1{font-size:clamp(30px,4vw,52px);font-weight:400;letter-spacing:.12em;margin:24px 0}

.message-flower{color:#bc9090;font-size:24px}

.breadcrumb{font-size:12px;color:#806d61;letter-spacing:.05em;margin-bottom:40px}

.message-hero .eyebrow{margin-bottom:10px}

.message-content{width:min(1100px,86%);margin:auto;padding:45px 0 100px}

.principle{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;padding:65px 0;border-bottom:1px solid #dfd1c2}

.principle:nth-child(2) figure{order:2}

.principle figure{margin:0}

.principle img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:55px 8px 55px 8px}

.principle .number{color:#ab8c59;font:16px Georgia;letter-spacing:.2em;display:block;margin-bottom:20px}

.principle h2{font-size:clamp(25px,2.8vw,36px);line-height:1.8;letter-spacing:.06em;margin-bottom:24px}

.principle p{font-size:17px;color:#493d35;line-height:2.3}

.message-ending{padding:85px 7%;margin-top:75px;text-align:center;border:1px solid #dbc7b4;border-radius:60px 10px;background:#fffefa}

.message-ending h2{font-size:clamp(22px,2.3vw,30px);line-height:2.1;margin:25px 0}

.message-ending p{font-size:17px}

.message-back{text-align:center;margin-top:55px}

.message-back a{display:inline-block;border-bottom:1px solid #bca387;padding:12px;font-size:15px}

@media(max-width:800px){.message-hero{padding-top:120px}.message-hero h1{letter-spacing:.04em}.principle{grid-template-columns:1fr;gap:28px;padding:40px 0}.principle:nth-child(2) figure{order:0}.principle p{font-size:16px}.message-ending{padding:45px 22px}.message-ending p{font-size:15px}}

.sheet-message{padding:115px 0 75px;background:#faf6ed}

.sheet-breadcrumb{width:90%;max-width:1450px;margin:0 auto 28px;font-size:12px;color:#806d61}

.message-desktop{width:96%;max-width:1536px;margin:auto}

.message-desktop img{width:100%;height:auto}

.message-mobile{display:none}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media(max-width:1100px){.message-desktop{display:none}.message-mobile{display:block;width:min(100%,600px);margin:auto}.message-mobile img{width:100%;height:auto}.sheet-message{padding-top:108px}.sheet-breadcrumb{margin-bottom:18px}.message-back{margin-top:30px}}

.making-process{margin:85px auto 0;padding:85px 7%;background:#f3ece3;border-top:1px solid #dfcdb8}

.process-heading{text-align:center;margin:0 auto 65px}

.process-heading>span{color:#bd8c8c;font-size:24px}

.process-heading h2{font-size:clamp(25px,3vw,39px);line-height:1.8;letter-spacing:.08em;margin:20px 0 24px}

.process-heading>p:last-child{font-size:16px;color:#67564b}

.process-steps{list-style:none;padding:0;margin:auto;max-width:1120px}

.process-step{display:grid;grid-template-columns:1.15fr 1fr;gap:8%;align-items:center;padding:50px 0;border-bottom:1px solid #d9c6b4}

.process-step figure{margin:0}

.process-step img{width:100%;height:auto;border-radius:40px 6px 40px 6px}

.process-step:nth-child(even):not(.process-complete) figure{order:2}

.process-number{font:italic 30px Georgia;color:#ab8c59;display:block;margin-bottom:20px}

.process-copy h3{font-size:clamp(24px,2.5vw,32px);line-height:1.7;margin:0 0 22px;color:#674b3f}

.process-copy p{font-size:17px;line-height:2.2;color:#493d35}

.process-complete{display:flex;flex-direction:column-reverse;text-align:center;border:0;padding:80px 0 0;gap:28px}

.process-complete figure{max-width:900px;width:100%}

.process-complete .process-copy{max-width:700px}

.process-step.process-ready{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}

.process-step.process-visible{opacity:1;transform:none}

@media(max-width:800px){.making-process{padding:55px 6%;margin-top:45px}.process-heading{margin-bottom:20px}.process-step{grid-template-columns:1fr;gap:25px;padding:35px 0}.process-step:nth-child(even):not(.process-complete) figure{order:0}.process-copy p{font-size:16px}.process-number{margin-bottom:12px}.process-complete{padding-top:50px}}

@media(prefers-reduced-motion:reduce){.process-step.process-ready{opacity:1;transform:none;transition:none}}


/* --------------------------------------------------------------------------
   5. 工房直販固有スタイル (direct.html)
   -------------------------------------------------------------------------- */

body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("image/direct-bg-1.png") center/100% 100% no-repeat}

.direct-hero{min-height:100svh;box-sizing:border-box;padding:120px 7% 50px;display:flex;align-items:center;justify-content:center}

.direct-composition{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(0,1fr);align-items:center;width:min(900px,78vw);gap:0}

.direct-copy{position:relative;z-index:1}

.direct-lead{font-size:clamp(16px,1.4vw,25px);letter-spacing:.08em;white-space:nowrap;margin:0 0 18px}

.direct-rule{display:block;width:100%;height:32px;object-fit:fill;mix-blend-mode:multiply}

.direct-copy h1{font-size:clamp(65px,6.8vw,122px);line-height:1.35;letter-spacing:.03em;font-weight:500;margin:6px 0;color:#061e3c;white-space:nowrap}

.direct-description{font-size:clamp(15px,1.1vw,21px);line-height:2.1;letter-spacing:.14em;margin:20px 0 0 12px}

.direct-person{display:block;width:100%;height:auto;align-self:end;max-height:65svh;object-fit:contain;object-position:bottom;mix-blend-mode:multiply}

@media(max-width:800px){.direct-hero{padding:116px 7% 40px}.direct-composition{width:100%;grid-template-columns:1fr .7fr;align-items:center}.direct-lead{white-space:normal;font-size:14px;line-height:1.8}.direct-copy h1{font-size:clamp(38px,8.8vw,65px)}.direct-rule{height:20px}.direct-description{font-size:13px;letter-spacing:.03em;line-height:2;margin-left:0}.direct-person{width:120%;max-width:none;margin-left:-10%;align-self:center}.direct-description br{display:block}}

/* Workshop direct-sales introduction and five promises */
.direct-hero{display:block;padding:0;min-height:0}

.direct-composition{min-height:calc(100svh - 170px);box-sizing:content-box;margin:auto;padding:120px 0 50px;align-content:center}

.direct-person{align-self:center}

.direct-values{padding:95px 6% 100px;color:#3c302b;background:rgba(255,250,244,.35)}

.values-intro{text-align:center;margin:0 auto 58px}

.values-mark{width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply;margin:0 auto 22px;display:block}

.values-label{color:#801c22;font-size:24px;letter-spacing:.25em;margin:0 0 18px}

.values-intro h2{font-size:clamp(30px,3vw,48px);font-weight:500;color:#982c3c;line-height:1.6;letter-spacing:.08em;margin:0 0 25px}

.values-intro>p:last-child{font-size:clamp(16px,1.2vw,21px);line-height:2;letter-spacing:.06em}

.values-list{list-style:none;padding:0;margin:0 auto;width:min(100%,1000px);display:grid;gap:22px}

.value-card{--accent:#a72d40;display:grid;grid-template-columns:195px minmax(0,1fr);align-items:center;gap:35px;padding:30px 45px 30px 30px;background:rgba(255,255,255,.95);border-radius:38px;box-shadow:0 5px 22px #a7794420}

.value-card:nth-child(2),.value-card:nth-child(5){--accent:#a36a06}

.value-card:nth-child(3){--accent:#607e3d}

.value-card:nth-child(4){--accent:#ab3e58}

.value-illustration{width:100%;height:auto;border-radius:50%}

.value-text h3{display:flex;gap:15px;align-items:center;color:var(--accent);font-size:clamp(23px,2vw,32px);line-height:1.5;font-weight:500;border-bottom:2px dotted color-mix(in srgb,var(--accent) 40%,transparent);padding-bottom:13px;margin:0 0 15px}

.value-number{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font:32px Georgia}

.value-text p{margin:0;font-size:19px;line-height:2;letter-spacing:.04em}

.values-closing{text-align:center;margin:65px auto 0}

.values-closing h2{color:#982c3c;font-size:clamp(23px,2.3vw,36px);font-weight:500;line-height:1.8;margin:0 0 24px}

.values-closing .values-mark{width:30px;height:30px;margin-bottom:20px}

.values-closing p{font-size:20px;letter-spacing:.08em}

@media(max-width:800px){.direct-composition{width:86%;padding:116px 0 40px;min-height:calc(100svh - 156px)}.direct-values{padding:60px 5% 65px}.values-list{gap:18px}.value-card{grid-template-columns:85px minmax(0,1fr);gap:16px;padding:24px 18px;border-radius:24px;align-items:start}.value-illustration{margin-top:4px}.value-text h3{font-size:20px;gap:9px;align-items:flex-start}.value-number{flex-basis:28px;width:28px;height:28px;font-size:21px}.value-text p{font-size:15px;line-height:1.9}.values-intro>p:last-child br{display:none}.values-closing p{font-size:16px}}

.direct-mobile-panels{display:none}

@media(max-width:800px){
.direct-hero>.direct-composition,.direct-hero>.direct-values{display:none}
.direct-mobile-panels{display:block;width:min(100%,600px);margin:0 auto;padding-top:84px;background:#faf6ef}
.direct-mobile-panels img{display:block;width:100%;height:auto;margin:0;border:0}
body{background:#faf6ef}body:before{display:none}
}

.direct-booking-bottom{text-align:center;padding:20px 6% 90px}

.direct-booking-button{display:inline-flex;justify-content:center;align-items:center;gap:35px;min-width:250px;padding:20px 40px;background:#204b3e;color:#fff;border-radius:999px;font-size:19px;letter-spacing:.12em;box-shadow:0 6px 20px #204b3e18;transition:background .3s,transform .3s}

.direct-booking-button:hover{background:#30644f;transform:translateY(-3px)}

.direct-booking-button:focus-visible{outline:3px solid #ac7c43;outline-offset:5px}

@keyframes direct-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.direct-copy{animation:direct-arrive 1.6s ease-out both}

.direct-person{animation:direct-arrive 1.9s .25s ease-out both}

@media(max-width:800px){.direct-mobile-panels>img:first-child{animation:direct-arrive 1.6s ease-out both}.direct-booking-bottom{padding:38px 6% 55px;background:#faf6ef}.direct-booking-button{font-size:17px;min-width:230px}}

@media(prefers-reduced-motion:reduce){.direct-copy,.direct-person,.direct-mobile-panels>img:first-child{animation:direct-mobile-fade 1.6s ease-out both}.direct-booking-button{transition:none}}

/* Bring the booking action closer to the closing message. */
.direct-values{padding-bottom:28px}

.direct-booking-bottom{padding-top:0;padding-bottom:65px}

@media(max-width:800px){.direct-booking-bottom{padding-top:28px;padding-bottom:45px}}

@media(max-width:800px){
body:before{display:block;background:#faf6ef url("image/direct-bg-2.png") center / 100% 100% no-repeat}
.direct-mobile-panels{background:transparent;max-width:600px}
.direct-mobile-panels>img:first-child{position:relative;background:#faf6ef;z-index:1}
.mobile-story-section{min-height:calc(100svh - 84px);box-sizing:border-box;padding:82px 7% 74px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.story-icon{position:relative;flex-shrink:0;overflow:hidden;mix-blend-mode:multiply;margin:0 auto 25px}
.story-icon.round{width:74px;height:74px;border-radius:50%}.story-icon.round img{width:100%;height:100%;object-fit:contain}
.story-icon.dolls{width:112px;height:77px}.story-icon.dolls img{position:absolute;width:112px!important;height:auto!important;left:0;top:-29px}
.story-icon.gift{width:92px;height:91px}.story-icon.gift img{position:absolute;width:225px!important;max-width:none;left:-66px;top:-15px;height:auto!important}
.story-label{font-size:18px;letter-spacing:.22em;color:#721b19;margin:0 0 25px}
.mobile-story-section h2{font-size:clamp(24px,6.6vw,36px);font-weight:500;line-height:1.85;letter-spacing:.045em;color:#751b18;margin:0;text-wrap:balance}
.story-divider{display:flex;align-items:center;gap:18px;color:#bc8f43;width:88%;margin:30px auto;font-size:16px}.story-divider:before,.story-divider:after{content:"";height:1px;background:#cba56a;flex:1}
.story-body{font-size:clamp(16px,4.5vw,22px);line-height:2.25;letter-spacing:.035em;color:#332d29;margin:0;overflow-wrap:anywhere}
.direct-booking-bottom{background:transparent;padding-top:0}
}

@media(max-width:800px){
.story-icon.dolls{width:126px;height:90px}
.story-icon.gift{width:88px;height:85px}
.story-icon.dolls img,.story-icon.gift img{position:static;width:100%!important;height:100%!important;max-width:100%;object-fit:contain}
}

@media(max-width:800px){
.direct-mobile-panels{padding-top:64px}
.direct-mobile-panels>img:first-child{animation:direct-mobile-fade 1.6s ease-out both}
.direct-hero .mobile-story-section:last-child{min-height:0;padding-bottom:28px}
.direct-booking-bottom{padding-top:0;padding-bottom:45px}
}

@keyframes direct-mobile-fade{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){.direct-mobile-panels>img:first-child{animation:none}}

.sakura-sides{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}

.sakura-edge{position:absolute;top:0;bottom:0;width:12%;overflow:hidden}

.sakura-edge.left{left:0}

.sakura-edge.right{right:0}

.sakura-fall{position:absolute;top:-60px;left:var(--x);width:var(--size);height:calc(var(--size)*1.4);animation:sakura-descend var(--duration) linear var(--delay) infinite;opacity:0}

.sakura-petal{display:block;width:100%;height:100%;background:linear-gradient(135deg,#eadbdc,#d6afb6 70%,#bc8d99);clip-path:polygon(50% 0,68% 16%,85% 7%,100% 32%,96% 57%,76% 79%,35% 100%,9% 74%,0 44%,13% 17%);animation:sakura-turn var(--turn) ease-in-out infinite alternate;filter:blur(var(--blur))}

@keyframes sakura-descend{0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}8%{opacity:var(--alpha)}90%{opacity:var(--alpha)}100%{transform:translate3d(var(--drift),calc(100vh + 120px),0) rotate(var(--rotation));opacity:0}}

@keyframes sakura-turn{0%{transform:translateX(-10px) rotateY(0deg) rotate(-20deg)}100%{transform:translateX(12px) rotateY(65deg) rotate(25deg)}}

@media(max-width:900px){.sakura-edge{width:8%}}

@media(prefers-reduced-motion:reduce){.sakura-sides{display:none}}

html.petals-paused .sakura-fall,html.petals-paused .sakura-petal{animation-play-state:paused}


/* --------------------------------------------------------------------------
   6. 選び方の6つのポイント固有スタイル (points.html)
   -------------------------------------------------------------------------- */

.choosing-page{padding:115px 0 70px;background:white}

.choosing-page>picture,.choosing-point{display:block;width:94%;max-width:1400px;margin:0 auto 30px}

.choosing-page picture img{width:100%;height:auto}

.points-nav{width:90%;max-width:1160px;margin:5px auto 45px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}

.points-nav a{border:1px solid #e6c8c6;border-radius:30px;padding:15px 8px;text-align:center;font-size:16px;background:#fff8f5}

.points-nav a span{color:#ad6975;font:12px Georgia;margin-right:8px}

.points-nav a:hover{background:#f8e6e2}

.choosing-ending{text-align:center;background:#fcf4ee;padding:65px 24px;margin:50px auto;max-width:1100px;border-radius:45px 8px}

.choosing-ending>span{color:#be888e;font-size:24px}

.choosing-ending h2{font-size:clamp(25px,3vw,38px);margin:25px 0}

.choosing-ending p{font-size:17px;line-height:2.2}

.choosing-ending .thought-link{font-size:16px;margin-top:16px}

@media(max-width:900px){.choosing-page>picture,.choosing-point{width:100%;max-width:600px;margin-bottom:28px}.points-nav{grid-template-columns:repeat(2,1fr);max-width:560px;gap:10px;margin:25px auto 40px}.choosing-ending{margin:35px 5%}.choosing-ending p{font-size:15px}}

.guide-page{background:#f4ece3;padding:115px 0 70px;color:#3f342e;background-image:radial-gradient(ellipse at 5% 15%,#efd4d280,transparent 35%),radial-gradient(ellipse at 95% 70%,#e4e7d580,transparent 35%)}

.guide-hero{text-align:center;padding:0 6% 55px}

.guide-hero .breadcrumb{text-align:left;max-width:1180px;margin:0 auto 55px}

.guide-flower{color:#bb858c;font-size:27px}

.guide-kicker{font-size:17px;margin:22px 0 15px;letter-spacing:.08em}

.guide-hero h1{font-size:clamp(32px,4.3vw,56px);line-height:1.7;letter-spacing:.1em;font-weight:400;margin:0 0 25px}

.guide-hero h1 em{font:italic 1.6em Georgia;color:#a75c6b;margin-right:.12em}

.guide-intro{font-size:17px;line-height:2.2;color:#6a574b}

.guide-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;width:min(1180px,88%);margin:0 auto 65px}

.guide-nav a{background:#fffdf8;border:1px solid #e4d6c8;border-radius:22px 6px;padding:20px 8px;text-align:center;transition:transform .25s,box-shadow .25s}

.guide-nav a:hover{transform:translateY(-4px);box-shadow:0 8px 20px #74574112}

.guide-nav svg{width:60px;height:60px;display:block;margin:0 auto 12px;color:var(--tone)}

.guide-nav span{font-size:16px}

.guide-nav small{font:12px Georgia;color:var(--tone);margin-right:8px}

.guide-sections{width:min(1120px,88%);margin:auto}

.guide-card{display:grid;grid-template-columns:30% 1fr;gap:7%;background:#fffdf9;border:1px solid #e0d1c2;border-radius:45px 8px 45px 8px;margin-bottom:35px;padding:55px 6%;box-shadow:0 10px 28px #6b4b3110;scroll-margin-top:110px}

.guide-label{text-align:center;color:var(--tone);padding-top:7px}

.guide-num{font:11px Georgia;letter-spacing:.12em;display:block}

.guide-num b{font-size:28px;font-weight:400;margin-left:8px}

.guide-label svg{width:135px;height:135px;margin:25px auto 15px;display:block}

.guide-label h2{font-size:29px;font-weight:400;letter-spacing:.08em}

.guide-copy h3{font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.9;color:var(--tone);margin:0 0 25px}

.guide-copy p{font-size:17px;line-height:2.1;margin:0 0 22px}

.guide-copy p:last-child{margin-bottom:0}

.guide-copy ul{list-style:none;padding:18px 24px;background:#f8f2eb;border-radius:16px;margin:24px 0}

.guide-copy li{font-size:16px;line-height:1.9;padding:8px 0 8px 20px;position:relative;border-bottom:1px dotted #dbcabc}

.guide-copy li:last-child{border:0}

.guide-copy li:before{content:'・';position:absolute;left:0;color:var(--tone)}

.guide-ending{width:min(960px,88%);margin:80px auto 40px;text-align:center;padding:55px 25px;border-top:1px solid #ccb49b;border-bottom:1px solid #ccb49b}

.guide-ending h2{font-size:clamp(29px,3vw,42px);font-weight:400;color:#8f5960;margin:25px 0}

.guide-ending p{font-size:17px;line-height:2.2}

.guide-ending .thought-link{font-size:16px}

.mobile-break{display:none}

@media(max-width:900px){.guide-nav{grid-template-columns:repeat(3,1fr)}.guide-card{grid-template-columns:1fr;padding:32px 7%;gap:25px}.guide-label{display:grid;grid-template-columns:68px 1fr;text-align:left;align-items:center;column-gap:20px}.guide-label svg{width:68px;height:68px;grid-column:1;grid-row:1/3;margin:0}.guide-num{grid-column:2}.guide-label h2{grid-column:2;font-size:26px;margin:6px 0}.guide-copy p{font-size:16px}.guide-label .guide-num b{font-size:20px}.guide-nav span{font-size:14px}.guide-nav small{display:block;margin:0 0 5px}.guide-hero .breadcrumb{margin-bottom:35px}.guide-kicker{font-size:14px}.guide-intro,.guide-ending p{font-size:15px}.guide-copy ul{padding:12px 16px}.guide-copy li{font-size:15px}.mobile-break{display:block}}

.guide-page{overflow:hidden}

.guide-hero{position:relative;isolation:isolate}

.guide-hero>*:not(.sakura-hero){position:relative;z-index:1}

.sakura-hero{position:absolute;pointer-events:none;object-fit:contain;z-index:0}

.sakura-left{width:clamp(145px,20vw,290px);left:3%;top:110px;opacity:.85;transform:rotate(-12deg)}

.sakura-right{width:clamp(100px,12vw,175px);right:6%;top:115px;opacity:.8;transform:rotate(10deg)}

.guide-nav .fabric-icon{width:60px;height:60px;object-fit:contain;margin:0 auto 12px;mix-blend-mode:multiply}

.guide-label .fabric-icon{width:145px;height:135px;object-fit:contain;margin:25px auto 15px;mix-blend-mode:multiply}

.guide-card{position:relative}

.sakura-card{position:absolute;right:-48px;bottom:18px;width:76px;height:auto;pointer-events:none;opacity:.65;mix-blend-mode:multiply}

.guide-ending{position:relative}

.sakura-ending{position:absolute;left:-75px;top:25px;width:135px;opacity:.75;pointer-events:none}

.guide-ending>p,.guide-ending>h2,.guide-ending>a{position:relative}

.sakura-right{clip-path:inset(0 0 0 3px);mix-blend-mode:multiply}

.sakura-card{clip-path:inset(0 0 0 3px)}

@media(max-width:900px){.sakura-left{width:110px;left:-40px;top:130px;opacity:.5}.sakura-right{width:70px;right:-18px;top:170px;opacity:.5}.guide-label .fabric-icon{width:68px;height:68px;grid-column:1;grid-row:1/3;margin:0}.sakura-card{width:46px;right:-20px;bottom:12px;opacity:.5}.sakura-ending{width:80px;left:-25px;top:-42px;opacity:.55}}

.guide-nav .point-art{width:60px;height:60px;object-fit:contain;margin:0 auto 12px;mix-blend-mode:multiply}

.guide-label .point-art{width:190px;max-width:100%;height:145px;object-fit:contain;margin:22px auto 18px;mix-blend-mode:multiply}

@media(max-width:900px){.guide-label .point-art{width:68px;height:68px;grid-column:1;grid-row:1/3;margin:0}}

/* Gentle motion: one-time reveals leave reading content still. */
.guide-reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.65,.25,1);transition-delay:var(--reveal-delay,0ms)}

.guide-reveal.has-appeared{opacity:1;transform:none}

.guide-nav a{transition:transform .3s ease,box-shadow .3s ease,background .3s ease}

.guide-nav a:focus-visible{transform:translateY(-3px);box-shadow:0 8px 20px #74574118}

.guide-card{transition:border-color .35s ease,box-shadow .35s ease,opacity 1s ease,transform 1.1s cubic-bezier(.2,.65,.25,1)}

@media(hover:hover){.guide-card:hover{border-color:#cdb4a3;box-shadow:0 13px 32px #6b4b3118}}

.sakura-hero{animation:sakura-breathe 9s ease-in-out 2;animation-play-state:paused;transform-origin:50% 80%}

.sakura-right{animation-name:sakura-branch;animation-duration:11s}

.guide-hero.motion-in-view .sakura-hero{animation-play-state:running}

@keyframes sakura-breathe{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-10deg) translateY(-7px)}}

@keyframes sakura-branch{0%,100%{transform:rotate(10deg)}50%{transform:rotate(7deg)}}

.guide-nav a.is-current{background:#f6e5df;border-color:#bd9c8e;box-shadow:inset 0 -2px 0 #c69999}

@media(max-width:900px){.guide-reveal{transform:translateY(16px)}}

@media(prefers-reduced-motion:reduce){.guide-reveal{opacity:1;transform:none;transition:none}.sakura-hero{animation:none}.guide-card,.guide-nav a{transition:none}html{scroll-behavior:auto}}

@media(min-width:901px){.guide-label{align-self:start;will-change:transform}}

@media(prefers-reduced-motion:reduce){.guide-label{will-change:auto}}

/* Generous editorial spacing inside each point. */
.guide-card{padding:76px 7.5%;grid-template-columns:27% minmax(0,1fr);gap:8%;margin-bottom:48px}

.guide-copy h3{line-height:1.85;margin-bottom:34px;text-wrap:balance;overflow-wrap:break-word}

.guide-copy p{line-height:2.2;margin-bottom:28px}

.guide-copy ul{padding:24px 30px;margin:30px 0 32px;border-radius:20px}

.guide-copy li{padding-top:12px;padding-bottom:12px}

.guide-label{padding-top:10px}

.guide-label h2{letter-spacing:.12em}

@media(max-width:900px){.guide-card{grid-template-columns:1fr;padding:42px 8%;gap:32px;margin-bottom:30px}.guide-copy h3{margin-bottom:26px}.guide-copy ul{padding:20px;margin:26px 0}.guide-copy p{margin-bottom:24px}.guide-label{padding-top:0}}

/* Align card edges with the full content width; retain readable inner measure. */
@media(min-width:901px){.guide-sections{width:min(1180px,88%)}.guide-card{padding-left:calc(7.5% + 22px);padding-right:calc(7.5% + 22px);padding-top:84px;padding-bottom:84px}}

/* Circular first-view navigation */
.orbit-hero{padding:0 5% 45px}

.orbit-hero .breadcrumb{margin-bottom:12px}

.orbit-heading .guide-kicker{margin:0 0 5px;font-size:15px}

.orbit-heading h1{font-size:clamp(26px,2.7vw,38px);line-height:1.45;margin:0;letter-spacing:.06em}

.orbit-heading h1 em{font-size:1.35em}

.orbit-board{position:relative;width:min(760px,100%);height:clamp(480px,calc(100svh - 245px),570px);margin:8px auto 0}

.orbit-price{position:absolute;width:230px;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:multiply}

.orbit-nav{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;opacity:1!important;transform:none!important}

.orbit-nav a{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;width:160px;height:160px;box-sizing:border-box;border-radius:50%;padding:20px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border-color:var(--tone);background:#fffdf9;box-shadow:0 7px 22px #78534709;transition:transform .4s,box-shadow .4s,background .4s}

.orbit-nav a:nth-child(1){--x:50%;--y:15%}

.orbit-nav a:nth-child(2){--x:80%;--y:32%}

.orbit-nav a:nth-child(3){--x:80%;--y:68%}

.orbit-nav a:nth-child(4){--x:50%;--y:85%}

.orbit-nav a:nth-child(5){--x:20%;--y:68%}

.orbit-nav a:nth-child(6){--x:20%;--y:32%}

.orbit-nav a img,.orbit-nav a svg{width:67px;height:67px;object-fit:contain;margin:0}

.orbit-nav a span{font-size:17px;color:var(--tone)}

.orbit-nav a small{font-size:13px}

.orbit-nav a:hover{transform:translateY(-4px);box-shadow:0 12px 26px #78534720;background:#fff}

.orbit-nav a:focus-visible{outline:3px solid var(--tone);outline-offset:5px}

.guide-mobile-main{display:none}

@media(min-width:901px) and (max-height:800px){.orbit-nav a{width:140px;height:140px}.orbit-nav a img,.orbit-nav a svg{width:55px;height:55px}.orbit-price{width:200px}.guide-page{padding-top:100px}}

@media(max-width:900px){.orbit-heading,.orbit-board{display:none}.orbit-hero{padding:0 0 40px}.orbit-hero .breadcrumb{padding:0 6%;margin-bottom:16px}.guide-mobile-main{display:block;width:min(100%,460px);height:auto;margin:0 auto}.guide-page{padding-top:100px}}

@media(prefers-reduced-motion:reduce){.orbit-nav a{transition:none}}

/* Supplied circular point artwork */
@media(min-width:901px){
.orbit-board{width:650px;height:650px;margin:12px auto 0}
.orbit-price{width:214px;height:214px;object-fit:contain;z-index:2;mix-blend-mode:normal;pointer-events:none}
.orbit-nav a{width:204px;height:204px;padding:0;border:0;background:transparent;box-shadow:none;display:block;overflow:hidden;border-radius:50%}
.orbit-nav a img{display:block;width:100%;height:100%;object-fit:contain;margin:0;border-radius:50%}
.orbit-nav a:nth-child(1){--x:50%;--y:17.6%}
.orbit-nav a:nth-child(2){--x:78.1%;--y:33.8%}
.orbit-nav a:nth-child(3){--x:78.1%;--y:66.2%}
.orbit-nav a:nth-child(4){--x:50%;--y:82.4%}
.orbit-nav a:nth-child(5){--x:21.9%;--y:66.2%}
.orbit-nav a:nth-child(6){--x:21.9%;--y:33.8%}
.orbit-nav a:hover{background:transparent;transform:scale(1.025);box-shadow:0 8px 24px #78534715;z-index:3}
.orbit-nav a:focus-visible{outline:3px solid #b77787;outline-offset:0;z-index:3}
.orbit-nav a.is-current{box-shadow:none;background:transparent}
.orbit-hero{padding-bottom:45px}
}

@media(min-width:901px) and (max-height:850px){.orbit-board{width:560px;height:560px}.orbit-price{width:184px;height:184px}.orbit-nav a{width:176px;height:176px}.orbit-heading h1{font-size:30px}.orbit-hero .breadcrumb{margin-bottom:4px}.orbit-heading .guide-kicker{font-size:14px}}

/* Emphasize the central price badge */
@media(min-width:901px){.orbit-price{width:254px;height:254px;z-index:4}}

@media(min-width:901px) and (max-height:850px){.orbit-price{width:220px;height:220px}}

/* Match the outer white margins of the supplied badges. */
@media(min-width:901px){
.orbit-nav a:nth-child(2) img{transform:scale(1.07);transform-origin:center}
.orbit-nav a:nth-child(6) img{transform:scale(1.03);transform-origin:center}
}

/* Stationary viewport cherry-blossom background */
body{isolation:isolate;background:#fff}

body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:#fff url("image/points-bg-1.png") center center / 100% 100% no-repeat}

.guide-page{background:transparent}

/* Give the central price badge a little breathing room. */
@media(min-width:901px){
.orbit-nav a:nth-child(1){--x:50%;--y:14.3%}
.orbit-nav a:nth-child(2){--x:80.9%;--y:32.15%}
.orbit-nav a:nth-child(3){--x:80.9%;--y:67.85%}
.orbit-nav a:nth-child(4){--x:50%;--y:85.7%}
.orbit-nav a:nth-child(5){--x:19.1%;--y:67.85%}
.orbit-nav a:nth-child(6){--x:19.1%;--y:32.15%}
.orbit-board{margin-top:28px;margin-bottom:20px}
}

/* Desktop opening: editorial heading left, full diagram centered right. */
@media(min-width:901px){
.guide-page{padding-top:84px}
.orbit-hero{box-sizing:border-box;min-height:calc(100svh - 84px);display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.4fr);grid-template-rows:36px 1fr;column-gap:3%;align-items:center;padding:12px 6% 24px;max-width:1680px;margin:auto}
.orbit-hero .breadcrumb{grid-column:1/-1;align-self:start;width:100%;max-width:none;margin:0;text-align:left}
.orbit-heading{text-align:left;padding-left:2%;padding-bottom:20px}
.orbit-heading .guide-kicker{font-size:clamp(13px,1.05vw,17px);line-height:2;letter-spacing:.06em;margin:0 0 24px}
.orbit-heading h1{font-size:clamp(30px,3.05vw,52px);line-height:1.8;letter-spacing:.06em;font-weight:500;margin:0;color:#493830}
.orbit-heading h1 span{display:block;white-space:nowrap}
.orbit-heading h1 em{font-size:1.75em;line-height:1.2;color:#b45f76}
.orbit-heading:after{content:"";display:block;width:76px;height:2px;background:#d9a0aa;margin-top:28px}
.orbit-board{width:min(100%,calc(100svh - 178px),690px);height:auto;aspect-ratio:1;justify-self:center;margin:0}
.orbit-price{width:39.08%;height:39.08%}
.orbit-nav a{width:31.38%;height:31.38%}
}

@media(min-width:901px){.orbit-board{translate:clamp(-48px,-3vw,-24px) 0}}

@media(min-width:1200px){.orbit-board{translate:clamp(-175px,calc(210px - 20vw),-30px) 0}}

/* Readable heading colors and intentional phrase breaks. */
#point-1{--tone:#914456!important}

#point-2{--tone:#3d654b!important}

#point-3{--tone:#695080!important}

#point-4{--tone:#386579!important}

#point-5{--tone:#8b5036!important}

#point-6{--tone:#78601d!important}

.guide-copy h3{font-weight:500;text-wrap:wrap}

.heading-line{display:block}

.heading-phrase{display:inline-block}

.orbit-message{display:none}

@media(min-width:901px){
.orbit-hero{max-width:none;padding-left:4%;padding-right:4%;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr) minmax(0,1fr);column-gap:2%}
.orbit-heading{grid-column:1;grid-row:2;padding-left:0}
.orbit-heading h1{font-size:clamp(22px,2.1vw,38px);letter-spacing:.03em}
.orbit-heading .guide-kicker{font-size:clamp(12px,.9vw,16px);text-wrap:balance}
.orbit-board{grid-column:2;grid-row:2;translate:none;width:min(100%,calc(100svh - 178px),690px)}
.orbit-message{display:block;grid-column:3;grid-row:2;text-align:left;justify-self:center;margin:0;color:#8d455b;font-size:clamp(19px,1.65vw,30px);line-height:2;letter-spacing:.05em;font-weight:500}
.orbit-message span{display:block}
}

/* Keep both captions close to the centered diagram. */
@media(min-width:901px){
.orbit-hero{grid-template-columns:minmax(0,1fr) min(46%,calc(100svh - 178px),690px) minmax(0,1fr);column-gap:24px}
.orbit-heading{justify-self:end;width:max-content;max-width:100%}
.orbit-message{justify-self:start}
.orbit-board{width:100%}
}

.guide-label .supplied-heading-art{width:135px;height:135px;object-fit:contain;display:block;margin:25px auto 15px;mix-blend-mode:multiply}

@media(max-width:900px){.guide-label .supplied-heading-art{width:68px;height:68px;grid-column:1;grid-row:1/3;margin:0}}

@media(max-width:900px){body::before{background-image:url("image/points-bg-2.png");background-size:100% 100%;background-position:center;}}

.sakura-petal{display:block;width:100%;height:100%;background:linear-gradient(135deg,#ffe5ec,#f6afc2 70%,#ef96ae);clip-path:polygon(50% 0,68% 16%,85% 7%,100% 32%,96% 57%,76% 79%,35% 100%,9% 74%,0 44%,13% 17%);animation:sakura-turn var(--turn) ease-in-out infinite alternate;filter:blur(var(--blur))}

@media(min-width:901px){
.orbit-hero{grid-template-columns:minmax(0,1fr) min(46%,calc(100svh - 178px),690px) minmax(40px,.45fr);column-gap:48px}
.orbit-heading{justify-self:end}
.orbit-heading h1{font-size:clamp(30px,2.8vw,52px);font-weight:600;line-height:1.85}
.orbit-heading h1 em{font-size:1.65em}
}

@media(min-width:901px){.orbit-heading{transform:translateX(-35px)}.orbit-heading h1{font-size:clamp(34px,3.15vw,60px);font-weight:600}}

.choosing-main-visual{position:relative;z-index:9;margin-top:84px;min-height:calc(100svh - 84px);display:flex;align-items:center;background:#fbf5ed}

.choosing-main-visual>img{display:block;width:100%;height:auto}

.guide-hero.orbit-hero{margin-top:0}

.orbit-board.diagram-reveal-ready,.guide-mobile-main.diagram-reveal-ready{opacity:0;transform:translateY(25px);transition:opacity 1.6s ease,transform 1.6s ease}

.orbit-board.diagram-reveal-ready.diagram-visible,.guide-mobile-main.diagram-reveal-ready.diagram-visible{opacity:1;transform:translateY(0)}

@media(max-width:900px){.choosing-main-visual{margin-top:76px;min-height:calc(100svh - 76px)}}

@media(prefers-reduced-motion:reduce){.orbit-board.diagram-reveal-ready,.guide-mobile-main.diagram-reveal-ready{opacity:1;transform:none;transition:none}}

.choosing-main-visual{margin-top:0;align-items:flex-start;min-height:0}

@media(max-width:900px){.choosing-main-visual{margin-top:0;min-height:0}}

.choosing-main-visual{position:relative;box-sizing:border-box;margin:0;min-height:calc(100svh - 84px);padding:48px 0 34px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f3ebe2}

.choosing-main-visual>img{width:100%;height:auto;max-height:calc(100svh - 166px);object-fit:contain;flex:0 1 auto}

.main-visual-breadcrumb{position:absolute;top:14px;left:4%;font-size:12px;letter-spacing:.08em;color:#8c796c;z-index:1}

@media(max-width:900px){.choosing-main-visual{min-height:calc(100svh - 76px);padding:44px 0 26px}.choosing-main-visual>img{max-height:calc(100svh - 146px)}.main-visual-breadcrumb{top:12px}}

.choosing-main-visual>img{transform:scaleY(1.055);filter:contrast(1.065) saturate(1.025)}

.choosing-main-visual{overflow:hidden}

.choosing-main-visual>img{transform:none;filter:none}

.choosing-visual-stage{position:relative;width:100%;container-type:inline-size}

.choosing-visual-stage>img{display:block;width:100%;height:auto}

.choosing-visual-copy{position:absolute;left:61%;right:5%;top:50%;transform:translateY(-50%);text-align:center;color:#44281e;font-family:"Yu Mincho","Hiragino Mincho ProN",serif}

.choosing-visual-copy h1,
.choosing-visual-copy .choosing-visual-title{font-size:2.45cqw;font-weight:600;line-height:1.5;letter-spacing:.055em;margin:0 0 1.4cqw;white-space:nowrap}

.choosing-visual-copy h1 span,
.choosing-visual-copy .choosing-visual-title span,.visual-six{color:#ed315c}

.choosing-visual-copy p{font-size:1.18cqw;line-height:1.7;letter-spacing:.035em;margin:0;padding:0 0 1.1cqw}

.choosing-visual-copy p+p:before{content:"";display:block;width:4.5cqw;height:1px;background:#eec4b7;margin:0 auto 1.1cqw}

.choosing-visual-copy .visual-copy-last{padding-bottom:0}

.visual-six{font-size:1.55cqw;white-space:nowrap}

.visual-six em{font-family:Georgia,serif;font-size:3.5cqw;line-height:1;font-weight:400}

@media(max-width:900px){.choosing-visual-copy{position:relative;left:auto;right:auto;top:auto;transform:none;background:#fbf5ed;padding:26px 20px 32px}.choosing-visual-copy h1, .choosing-visual-copy .choosing-visual-title{font-size:clamp(23px,6vw,32px);margin-bottom:22px}.choosing-visual-copy p{font-size:15px;line-height:1.9;padding-bottom:20px}.choosing-visual-copy p+p:before{width:60px;margin-bottom:20px}.visual-six{font-size:20px}.visual-six em{font-size:42px}.choosing-main-visual{justify-content:flex-start}}

.orbit-heading .revised-orbit-title{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;color:#261914;font-size:clamp(29px,2.5vw,48px);font-weight:500;line-height:1.7;letter-spacing:.035em}

.revised-orbit-title .orbit-title-line{display:block;white-space:nowrap}

.revised-orbit-title strong{font-size:1.3em;font-weight:700;color:#e92548;text-shadow:0 0 15px #ef647c20}

.revised-orbit-title .title-connector{display:inline;font-size:.85em}

.revised-orbit-title .title-thought{font-size:1em;margin-top:8px}

.orbit-heading .revised-orbit-title em{font-family:Georgia,"Times New Roman",serif;font-size:2.05em;color:#e51c40;font-weight:400;line-height:1;text-shadow:0 0 18px #ed315b35}

.revised-orbit-title .title-points{margin-top:14px;font-size:1.1em}

.revised-orbit-title .title-points .points-wording{display:inline;font-size:1.17em;letter-spacing:.035em}

.choosing-visual-stage{animation:choosing-visual-enter 1.8s ease-out both}

@keyframes choosing-visual-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){.choosing-visual-stage{animation:none}}

.choosing-main-visual{background:#fcf7f1}

@media(max-width:900px){.choosing-visual-copy{background:#fcf7f1}}

.choosing-main-visual{background:linear-gradient(to bottom,#fcf7f1 0%,#fcf7f1 calc(100% - 100px),rgba(252,247,241,0) 100%);padding-bottom:100px}

@media(max-width:900px){.choosing-main-visual{background:linear-gradient(to bottom,#fcf7f1 0%,#fcf7f1 calc(100% - 70px),rgba(252,247,241,0) 100%);padding-bottom:70px}}

.choosing-visual-picture{display:block;width:100%}

.choosing-visual-picture>img{display:block;width:100%;height:auto}

@media(max-width:900px){.guide-page{padding-top:76px}.choosing-main-visual{margin-top:0}}