/* TOP | Structured production CSS | 2026-10-26 */
:root{--ink:#102822;--ink2:#17382e;--paper:#f4efdf;--cream:#fbf7ea;--yellow:#edc94e;--vermilion:#ba4e31;--sage:#82937a;--white:#fffdf7;--line:rgba(16,40,34,.18);--serif:"Yu Mincho","Hiragino Mincho ProN",serif;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink2);color:var(--ink);font-family:var(--sans);line-height:1.8}.comp-note{height:26px;background:#0b1713;color:#fff;text-align:center;font:10px/26px Arial;letter-spacing:.18em;position:relative;z-index:100}.comp-note span{opacity:.55;margin-left:1rem}.header{position:fixed;z-index:90;left:0;right:0;top:26px;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;transition:.35s;color:var(--ink)}.header.is-scrolled{height:68px;background:rgba(251,247,234,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}.brand{display:flex;align-items:center;color:inherit;text-decoration:none;gap:14px}.brand-jp{font:600 29px/1 var(--serif);letter-spacing:.08em}.brand-rule{width:1px;height:36px;background:currentColor;opacity:.35}.brand b{display:block;font:700 16px/1 Arial;letter-spacing:.22em}.brand small{display:block;font:9px/1.55 Arial;letter-spacing:.13em;margin-top:4px}.menu{border:0;background:transparent;color:inherit;width:48px;cursor:pointer}.menu span{font:10px Arial}.menu i{display:block;width:30px;height:2px;background:currentColor;margin:5px auto}.page{width:min(100% - 24px,1680px);margin:0 auto 12px;background:var(--cream);border-radius:0 0 34px 34px;overflow:hidden}.hero{height:min(940px,100vh);min-height:720px;position:relative;overflow:hidden}.hero-slides,.hero-slide,.hero-shade{position:absolute;inset:0}.hero-slide{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);transition:opacity 1.1s,transform 6s}.hero-slide.is-active{opacity:1;transform:scale(1)}.hero-shade{background:linear-gradient(90deg,rgba(249,244,228,.95) 0%,rgba(249,244,228,.82) 31%,rgba(249,244,228,.12) 62%,transparent)}.hero-copy{position:absolute;z-index:3;left:6vw;top:17%;max-width:520px}.eyebrow,.chapter{font:700 11px/1.4 Arial;letter-spacing:.18em}.vertical-title{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.35em;min-height:360px;margin:28px 0 15px;font:500 clamp(2.25rem,4vw,4.5rem)/1.45 var(--serif)}.vertical-title span{writing-mode:vertical-rl;letter-spacing:.08em}.vertical-title span:nth-child(2){padding-top:38px}.vertical-title span:nth-child(3){padding-top:76px;color:var(--vermilion)}.hero-lead{font-size:14px}.hero-actions{display:flex;gap:10px;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;min-width:145px;padding:14px 20px;text-decoration:none;border:1px solid var(--ink);font-size:13px;transition:.25s}.button:hover{transform:translateY(-4px)}.primary{background:var(--ink);color:white}.ghost{background:rgba(255,255,255,.3)}.hero-character{position:absolute;z-index:5;right:2vw;bottom:-3%;width:min(27vw,380px);filter:drop-shadow(0 20px 25px rgba(0,0,0,.16))}.hero-character img{width:100%;max-height:520px;object-fit:contain;object-position:bottom}.hero-character p{position:absolute;z-index:2;right:72%;top:8%;width:170px;background:var(--white);padding:19px 24px;border-radius:52% 48% 48% 52%;font-weight:700;transform:rotate(-5deg)}.hero-character p:after{content:"";position:absolute;right:-17px;bottom:17px;border:15px solid transparent;border-left-color:var(--white);transform:rotate(22deg)}.hero-dots{position:absolute;z-index:7;left:6vw;bottom:55px;display:flex;gap:8px}.hero-dots button{width:34px;height:3px;border:0;background:#ffffff88;padding:0}.hero-dots button.is-active{background:var(--vermilion)}.hero-wave{position:absolute;z-index:6;left:-3%;right:-3%;bottom:-78px;height:155px;background:var(--cream);border-radius:50% 48% 0 0/42% 48% 0 0;transform:rotate(-1.5deg)}.section{padding:clamp(80px,10vw,150px) 7vw;position:relative}.cream{background:var(--cream)}.paper{background:var(--paper)}.ink{background:var(--ink);color:var(--white)}.yellow{background:var(--yellow)}.green{background:var(--ink2);color:var(--white)}.vermilion{background:var(--vermilion);color:var(--white)}h2{font:500 clamp(2.2rem,4vw,4.7rem)/1.42 var(--serif);letter-spacing:.035em;margin:20px 0 30px}.intro{display:grid;grid-template-columns:1.08fr .92fr;gap:9%;align-items:center}.intro-image{height:680px;border-radius:160px 0 80px 0;overflow:hidden}.intro-image img,.scene-rail img,.company-photo img{width:100%;height:100%;object-fit:cover}.intro-copy{position:relative;max-width:600px}.intro-copy>p:not(.chapter){max-width:520px}.vertical-note{position:absolute;writing-mode:vertical-rl;right:-2vw;top:0;letter-spacing:.12em;font:600 13px var(--serif)}.scenes{padding-bottom:170px}.section-heading{max-width:760px}.section-heading>p:last-child{opacity:.72}.scene-rail{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;margin:55px -7vw 0;padding:0 7vw 24px;cursor:grab}.scene-rail::-webkit-scrollbar{display:none}.scene-rail article{flex:0 0 min(440px,70vw)}.scene-rail article:nth-child(even){padding-top:65px}.scene-rail img{height:360px;border-radius:70px 0 38px 0}.scene-rail small{display:block;font:10px Arial;letter-spacing:.15em;color:var(--yellow);margin-top:18px}.scene-rail h3{font:500 25px var(--serif);margin:5px 0}.guide{display:grid;grid-template-columns:.7fr 1.3fr;gap:7%;align-items:center}.guide-character{position:relative;align-self:end}.guide-character img{width:100%;max-height:600px;object-fit:contain;object-position:bottom}.guide-character p{position:absolute;left:5%;top:3%;background:var(--white);padding:22px;border-radius:48%;font-weight:700}.guide-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:40px 0 20px}.guide-tabs button{border:1px solid var(--ink);border-radius:99px;background:transparent;padding:10px 18px;cursor:pointer}.guide-tabs button.is-active{background:var(--ink);color:white}.guide-panel{background:var(--white);border-radius:22px;padding:30px;display:grid;grid-template-columns:230px 1fr;gap:35px;align-items:center;min-height:240px}.layer-diagram{display:flex;flex-direction:column;text-align:center;font-weight:700}.layer-diagram span{padding:12px}.ink-layer{background:var(--vermilion);color:white}.glaze-layer{background:#e8eee8;border-radius:45% 45% 0 0}.body-layer{background:#d5c8aa;min-height:65px}.guide-panel a,.text-link{color:inherit;text-underline-offset:6px}.caution{font-size:11px;opacity:.7}.simulator{display:grid;grid-template-columns:.7fr 1.3fr;gap:7%;align-items:center}.sim-copy img{width:80%;height:270px;object-fit:contain;object-position:bottom}.sim-window{background:var(--white);border-radius:45px;padding:22px;display:grid;grid-template-columns:1.1fr .9fr;box-shadow:0 30px 70px #6e551f33}.sim-stage{min-height:500px;background:radial-gradient(circle at 50% 60%,#efe9db,transparent 58%);display:grid;place-items:center}.sim-stage>small{align-self:end;font:9px Arial;letter-spacing:.15em}.mock-mug{width:240px;height:290px;background:linear-gradient(90deg,#ddd5c7,#fff 23%,#f9f6ee 73%,#cfc7b8);border-radius:20px 20px 58px 58px;box-shadow:inset -18px 0 25px #a99f9033,0 30px 35px #4c3b1c2b;position:relative;display:grid;place-items:center}.mock-mug:before{content:"";position:absolute;width:94px;height:145px;border:28px solid #eee9df;border-left-width:20px;border-radius:50%;right:-88px;top:64px}.mock-mug:after{content:"";position:absolute;left:12px;right:12px;top:-13px;height:28px;border-radius:50%;background:#d8d1c5;box-shadow:inset 0 8px 0 #7f7462}.mock-mug span{font:700 70px var(--serif);color:var(--vermilion);position:relative;z-index:2}.sim-controls{padding:28px;display:flex;flex-direction:column;gap:22px}.sim-controls>b{font:12px Arial;letter-spacing:.15em}.sim-controls label{font-size:12px}.sim-controls input{display:block;width:100%;accent-color:var(--vermilion)}.sim-controls button,.sim-controls a{border:1px solid var(--ink);background:transparent;padding:13px;text-align:center;color:inherit;text-decoration:none}.sim-controls a{background:var(--ink);color:white}.sim-controls small{font-size:10px}.product-stage{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:25px;margin-top:50px}.arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:transparent;font-size:20px}.product-orbit{display:flex;align-items:end;justify-content:center;gap:7vw;min-height:460px}.product-orbit figure{width:20%;margin:0;text-align:center;opacity:.55;transform:scale(.8);transition:.5s}.product-orbit figure.active{width:34%;opacity:1;transform:scale(1)}.product-orbit img{width:100%;height:330px;object-fit:contain;filter:drop-shadow(0 25px 18px #605c4f32)}.product-orbit figcaption{font-weight:700}.product-orbit small{font:10px Arial;letter-spacing:.12em}.wide-link{margin-top:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;color:inherit;text-decoration:none}.process{display:grid;grid-template-columns:.65fr 1.35fr;gap:8%}.process-heading{position:sticky;top:130px;align-self:start}.vertical-process{writing-mode:vertical-rl;min-height:340px}.process-list{list-style:none;margin:0;padding:0}.process-list li{display:grid;grid-template-columns:85px 1fr;align-items:center;min-height:108px;border-bottom:1px solid #ffffff35}.process-list b{font:italic 32px Georgia;color:var(--yellow)}.process-list span{font:600 20px var(--serif)}.company{display:grid;grid-template-columns:1.05fr .95fr;gap:9%;align-items:center}.company-photo{height:650px;position:relative;border-radius:0 130px 0 50px;overflow:hidden}.company-photo span{position:absolute;bottom:18px;left:18px;background:var(--paper);padding:8px 12px;font:10px Arial;letter-spacing:.13em}.company-quote{font:500 25px/1.8 var(--serif);color:var(--vermilion)}.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:8%}.faq-title{position:relative}.faq-title img{width:75%;height:320px;object-fit:contain}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{padding:24px 40px 24px 0;cursor:pointer;list-style:none;position:relative;font-weight:700}summary:after{content:"＋";position:absolute;right:4px;color:var(--vermilion)}details[open] summary:after{content:"−"}details p{padding:0 40px 25px 0;font-size:14px}.faq-more{width:100%;border:0;background:var(--ink);color:white;padding:17px;margin-top:20px}.contact{display:flex;align-items:end;justify-content:space-between;gap:8%}.contact h2{margin-bottom:15px}.contact-button{min-width:360px;background:var(--yellow);color:var(--ink);padding:28px 30px;text-decoration:none;display:flex;justify-content:space-between;font-weight:700}.floating-contact{position:fixed;z-index:80;right:20px;bottom:20px;width:76px;height:76px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;text-decoration:none;box-shadow:0 12px 30px #0003}.floating-contact span{font:700 17px var(--serif);align-self:end}.floating-contact small{font:8px Arial;align-self:start}footer{color:white;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding:65px 7vw 80px}footer p{font-size:12px}footer nav{display:flex;flex-direction:column;gap:8px}footer nav a{color:white;text-decoration:none;font:11px Arial;letter-spacing:.12em}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:900px){.page{width:100%;border-radius:0}.header{top:26px}.hero{min-height:820px}.hero-shade{background:linear-gradient(180deg,rgba(249,244,228,.96),rgba(249,244,228,.55) 58%,transparent)}.hero-copy{left:7vw;top:13%}.vertical-title{min-height:310px;font-size:clamp(2rem,8vw,3.2rem)}.hero-character{width:48vw;right:-7vw}.hero-character p{display:none}.intro,.guide,.simulator,.process,.company,.faq{grid-template-columns:1fr}.intro-image,.company-photo{height:450px}.vertical-note{display:none}.guide-character{display:none}.sim-window{grid-template-columns:1fr}.sim-stage{min-height:430px}.product-orbit{gap:2vw}.product-orbit figure{display:none}.product-orbit figure.active{display:block;width:min(75%,360px)}.process-heading{position:static}.vertical-process{writing-mode:horizontal-tb;min-height:0}.company-copy{order:-1}.contact{align-items:stretch;flex-direction:column}.contact-button{min-width:0}.floating-contact{width:64px;height:64px}.footer-brand{display:none}footer{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.comp-note span{display:none}.header{padding:0 20px}.brand-jp{font-size:23px}.brand small{display:none}.hero{min-height:760px}.hero-copy{top:12%;right:7vw}.hero-lead{width:min(100%,310px);padding:10px 12px;background:rgba(251,247,234,.78);backdrop-filter:blur(5px)}.hero-lead br{display:none}.hero-character{display:none}.hero-actions{gap:8px}.hero-actions .button{min-width:0;flex:1}.hero-dots{bottom:35px}.section{padding:80px 22px}.scene-rail{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}.scene-rail article{flex-basis:78vw}.guide-panel{grid-template-columns:1fr}.sim-window{padding:10px;border-radius:25px}.sim-stage{min-height:360px}.mock-mug{transform:scale(.72)}.sim-controls{padding:18px}.product-stage{grid-template-columns:42px 1fr 42px;gap:5px}.arrow{width:40px;height:40px}.process-list li{grid-template-columns:65px 1fr}.faq-title img{height:240px}.contact-button{padding:20px}footer{grid-template-columns:1fr}.vertical-title span:nth-child(3){padding-top:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-slide,.reveal,*{animation:none!important;transition:none!important}}

/* Design comp v2 refinements */
.page{width:min(100%,1600px);margin:0 auto 12px}
.hero-wave{z-index:2;bottom:-96px;height:160px}
.hero-copy{z-index:7}
.hero-actions{position:relative;z-index:9}

/* chapter transitions: intentionally varied, but held together by one visual system */
.chapter-break{height:150px;position:relative;z-index:12;margin:-1px 0;background:var(--paper);display:flex;align-items:center;justify-content:flex-end;padding:0 8vw;overflow:visible}
.chapter-break:before{content:"";position:absolute;inset:-42px -4% auto;height:90px;background:inherit;z-index:-1}
.chapter-break img{position:absolute;left:8vw;bottom:10px;width:190px;height:220px;object-fit:contain;filter:drop-shadow(0 14px 15px #0002)}
.chapter-break>div{position:relative;min-width:330px;padding:20px 28px;background:var(--white);border:1px solid var(--line);border-radius:42% 58% 48% 52%/52% 45% 55% 48%;box-shadow:0 16px 35px #10282216}
.chapter-break>div:after{content:"";position:absolute;left:-24px;bottom:22px;border:15px solid transparent;border-right-color:var(--white);transform:rotate(-18deg)}
.chapter-break b{font:italic 44px/1 Georgia;color:var(--vermilion);margin-right:16px}
.chapter-break span{font:700 11px Arial;letter-spacing:.18em}
.chapter-break p{margin:7px 0 0;font:600 17px var(--serif)}
.break-wave{background:var(--ink);color:var(--ink)}
.break-wave:before{border-radius:52% 48% 0 0/85% 75% 0 0;transform:rotate(.7deg)}
.break-diagonal{background:var(--paper)}.break-diagonal:before{clip-path:polygon(0 70%,100% 0,100% 100%,0 100%)}
.break-notch{background:#f3f1ec}.break-notch:before{clip-path:polygon(0 35%,47% 35%,50% 0,53% 35%,100% 35%,100% 100%,0 100%)}
.break-curve{background:#fff}.break-curve:before{border-radius:50% 50% 0 0/100% 75% 0 0}
.break-zigzag{background:var(--ink2);color:var(--ink)}.break-zigzag:before{clip-path:polygon(0 45%,8% 5%,16% 45%,24% 5%,32% 45%,40% 5%,48% 45%,56% 5%,64% 45%,72% 5%,80% 45%,88% 5%,96% 45%,100% 25%,100% 100%,0 100%)}
.break-fold{background:var(--paper)}.break-fold:before{clip-path:polygon(0 45%,76% 45%,82% 0,88% 45%,100% 45%,100% 100%,0 100%)}

/* guide comparison */
.guide{padding-bottom:80px}
.transfer-compare{padding-top:55px!important}
.compare-heading{max-width:820px;margin-bottom:35px}
.compare-heading h2{margin-bottom:14px}
.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:24px;background:var(--white);box-shadow:0 24px 60px #10282212}
.transfer-compare table{width:1500px;border-collapse:collapse;font-size:12px;line-height:1.55}
.transfer-compare th,.transfer-compare td{padding:17px 15px;border-right:1px solid #10282212;border-bottom:1px solid #10282212;text-align:left;vertical-align:top}
.transfer-compare thead th{position:sticky;top:0;background:var(--ink);color:white;white-space:nowrap}
.transfer-compare tbody th{position:sticky;left:0;min-width:155px;background:#f7f3e7;color:var(--ink)}

/* exact legacy Canvas/Three.js simulator presentation */
.simulator{display:block!important;background:#f3f1ec!important;color:var(--ink);padding-top:90px}
.simulator-heading{max-width:760px;margin-bottom:55px}
.mug-simulator-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,.7fr);max-width:1400px;margin:0 auto;border-top:1px solid rgba(43,71,63,.22)}
.mug-view-column{min-width:0;padding:50px 50px 0 0}
.mug-viewer{position:relative;width:100%;height:min(70vh,720px);min-height:520px;overflow:hidden;background:#ebe8e1}
.mug-viewer canvas{display:block;width:100%;height:100%;cursor:grab}.mug-viewer canvas:active{cursor:grabbing}
.mug-loading{position:absolute;top:50%;left:50%;z-index:5;transform:translate(-50%,-50%);font:11px Arial;letter-spacing:.22em;color:#2b473f}
.viewer-help{display:flex;gap:30px;padding-top:16px;font-size:11px;letter-spacing:.08em;color:#747a76}
.mug-control-panel{padding:50px 0 0 50px;border-left:1px solid rgba(43,71,63,.22)}
.control-heading{margin-bottom:35px}.control-heading small{font:10px Arial;letter-spacing:.2em;color:#69716d}.control-heading h3{margin:7px 0 10px;font:400 30px var(--serif)}.control-heading p{font-size:13px;color:#6b706d}
.sim-control-block{padding:21px 0;border-top:1px solid rgba(43,71,63,.18)}
.sim-control-label,.range-heading label{font-size:12px;letter-spacing:.08em}
.design-upload{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 18px;border:1px solid #2b473f;cursor:pointer}.design-upload small{margin-left:auto;font-size:9px}.upload-icon{font-size:22px}.file-name{margin-top:9px;font-size:10px;color:#777}
.range-heading{display:flex;justify-content:space-between;margin-bottom:14px}.range-heading output{font-size:11px;color:#737975}
.sim-range{width:100%;height:2px;border:0;background:#c7c9c5;appearance:none}.sim-range::-webkit-slider-thumb{width:15px;height:15px;border:2px solid #f3f1ec;border-radius:50%;background:#2b473f;box-shadow:0 0 0 1px #2b473f;appearance:none}
.mug-color-palette{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;margin-top:16px;padding:12px 15px;border:1px solid #2b473f;cursor:pointer;transition:background .25s ease,transform .25s ease}.mug-color-palette:hover{background:#fff;transform:translateY(-1px)}.mug-color-palette input[type="color"]{width:52px;height:52px;padding:3px;border:1px solid #2b473f;border-radius:50%;background:#fff;cursor:pointer;appearance:none}.mug-color-palette input[type="color"]::-webkit-color-swatch-wrapper{padding:0}.mug-color-palette input[type="color"]::-webkit-color-swatch{border:0;border-radius:50%}.mug-color-palette input[type="color"]::-moz-color-swatch{border:0;border-radius:50%}.mug-color-palette span{display:grid;gap:3px}.mug-color-palette strong{font-size:12px}.mug-color-palette small{font-size:9px;color:#777}.mug-color-palette>b{font:400 22px/1 var(--sans)}
.simulator-buttons{display:grid;gap:9px;margin-top:26px}.sim-reset,.sim-contact{min-height:54px;padding:14px 18px;border:1px solid #2b473f;background:transparent;color:#2b473f;font:12px var(--sans);text-decoration:none;display:flex;align-items:center;justify-content:center}.sim-contact{justify-content:space-between;background:#2b473f;color:white}.simulator-note{font-size:10px;color:#777c79}

/* white product gallery */
.lineup{background:#fff!important}
.product-filters{display:flex;gap:9px;flex-wrap:wrap;margin:36px 0}.product-filters button{padding:11px 18px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);cursor:pointer}.product-filters button.is-active{background:var(--ink);color:#fff}
.product-all{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.product-mini{margin:0;padding:22px;background:#fff;border:1px solid #10282210;border-radius:24px;box-shadow:0 15px 38px #1028220d;transition:.3s}.product-mini:hover{transform:translateY(-8px);box-shadow:0 22px 48px #1028221c}.product-mini img{width:100%;height:240px;object-fit:contain;background:#fff}.product-mini figcaption{padding-top:12px;font-weight:700}.product-mini small{display:block;font:10px Arial;letter-spacing:.12em;color:var(--vermilion);margin-bottom:4px}

/* narrative timeline */
.process{display:grid!important;grid-template-columns:.62fr 1.38fr;gap:8%;padding-top:120px}
.process-heading{position:sticky;top:120px;align-self:start}.process-heading h2{font-size:clamp(2.3rem,4vw,4.8rem)}
.process-timeline{list-style:none;margin:0;padding:0;position:relative}.process-timeline:before{content:"";position:absolute;left:50%;top:20px;bottom:20px;width:1px;background:#ffffff55}
.process-timeline li{position:relative;width:calc(50% - 36px);min-height:330px;margin-bottom:34px;padding:22px;background:#fff;color:var(--ink);border-radius:42px 10px 42px 10px;box-shadow:0 24px 55px #0002}.process-timeline li:nth-child(even){margin-left:calc(50% + 36px);border-radius:10px 42px 10px 42px}.process-timeline li:after{content:"";position:absolute;top:44px;right:-44px;width:15px;height:15px;border:7px solid var(--ink2);border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1px #ffffff88}.process-timeline li:nth-child(even):after{right:auto;left:-44px}.process-timeline img{width:100%;height:170px;object-fit:contain}.process-timeline b{font:italic 13px Georgia;color:var(--vermilion)}.process-timeline h3{margin:5px 0;font:600 25px var(--serif)}.process-timeline p{margin:0;font-size:13px}
.company-copy{position:relative;padding-bottom:120px}.company-shizuo{position:absolute;right:-30px;bottom:-100px;width:250px;height:260px;object-fit:contain;filter:drop-shadow(0 15px 15px #0002)}

/* FAQ and full form */
.faq-extra[hidden]{display:none}.faq-extra{display:block}.faq-more{cursor:pointer}
.contact{display:grid!important;grid-template-columns:.68fr 1.32fr;align-items:start!important}
.contact-intro{position:sticky;top:120px}
.contact-form{display:grid;gap:18px;padding:35px;background:#fff;color:var(--ink);border-radius:34px}
.contact-form label{display:grid;gap:8px;font-size:12px;font-weight:700}.contact-form label>span{color:var(--vermilion)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px;border:1px solid #10282235;border-radius:8px;background:#fff;font:inherit;color:var(--ink)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form small,.form-note{font-size:10px;opacity:.7}.checkline{display:flex!important;align-items:center;grid-template-columns:auto 1fr}.checkline input{width:auto}.submit-button{padding:18px 22px;border:0;background:var(--ink);color:white;display:flex;justify-content:space-between;font-weight:700;cursor:pointer}

@media(max-width:1100px){.product-all{grid-template-columns:repeat(3,1fr)}.chapter-break img{left:4vw;width:160px}.mug-simulator-layout{grid-template-columns:1fr}.mug-view-column{padding-right:0}.mug-control-panel{padding-left:0;border-left:0}.process{grid-template-columns:1fr!important}.process-heading{position:static}.contact{grid-template-columns:1fr!important}.contact-intro{position:static}}
@media(max-width:700px){.chapter-break{height:118px;padding:0 20px}.chapter-break img{left:-10px;width:115px;height:145px}.chapter-break>div{min-width:0;width:78%;padding:14px 17px}.chapter-break b{font-size:28px}.chapter-break p{font-size:13px}.transfer-compare{padding-top:30px!important}.mug-viewer{height:430px;min-height:430px}.viewer-help{display:grid;gap:4px}.product-all{grid-template-columns:repeat(2,1fr);gap:10px}.product-mini{padding:10px;border-radius:15px}.product-mini img{height:150px}.process-timeline:before{left:18px}.process-timeline li,.process-timeline li:nth-child(even){width:calc(100% - 42px);margin-left:42px;border-radius:24px;min-height:0}.process-timeline li:after,.process-timeline li:nth-child(even):after{left:-32px;right:auto}.process-timeline img{height:150px}.company-shizuo{position:relative;right:auto;bottom:auto;width:100%;margin-top:20px}.contact-form{padding:22px}.field-grid{grid-template-columns:1fr}}
@media(min-width:1601px){body{background:var(--ink2)}.page{box-shadow:0 0 0 1px #ffffff0c}}

/* Motion and illustration pass v3 */
:root{--ease-smooth:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1)}
.reveal{transform:translateY(22px) scale(.99);transition:opacity .75s var(--ease-smooth),transform .75s var(--ease-smooth)}

/* repair chapter speech balloons at every width */
.chapter-break{isolation:isolate;min-height:150px;padding-inline:clamp(24px,7vw,110px)}
.chapter-break img{left:clamp(22px,8vw,120px);bottom:5px;width:clamp(145px,14vw,205px);height:220px;object-fit:contain;object-position:center bottom;z-index:2}
.chapter-break>div{z-index:3;width:clamp(310px,30vw,460px);min-width:0;margin-right:clamp(0px,3vw,50px);padding:20px 30px;border-radius:34px}
.chapter-break>div:after{left:-20px;bottom:28px;border-width:11px 20px 11px 0;border-color:transparent var(--white) transparent transparent;transform:none}
.chapter-break b,.chapter-break span{display:inline-block;vertical-align:middle}.chapter-break p{white-space:normal}

/* wide-screen side character rail */
.side-character-rail{display:none;position:fixed;z-index:65;left:max(10px,calc((100vw - 1600px)/4 - 84px));bottom:24px;width:150px;pointer-events:none;filter:drop-shadow(0 16px 18px #0003)}
.side-character-rail img{width:100%;height:230px;object-fit:contain;object-position:center bottom;opacity:1;transform:translateY(0) scale(1);transition:opacity .5s var(--ease-soft),transform .7s var(--ease-smooth)}
.side-character-rail span{display:block;margin:-10px auto 0;width:max-content;max-width:130px;padding:7px 12px;border-radius:99px;background:var(--yellow);color:var(--ink);font:700 9px Arial;letter-spacing:.13em}
.side-character-rail.is-changing img{opacity:0;transform:translateY(22px) scale(.96)}
@media(min-width:1780px){.side-character-rail{display:block}}

/* transfer tab illustration */
.guide-panel{overflow:hidden;transition:min-height .55s var(--ease-smooth),background .4s ease}
.guide-visual{min-height:250px;display:grid;place-items:center;opacity:1;transform:translateX(0);transition:opacity .35s ease,transform .55s var(--ease-smooth)}
.guide-visual.is-leaving,.guide-copy.is-leaving{opacity:0;transform:translateX(-16px)}
.guide-copy{transition:opacity .35s ease,transform .55s var(--ease-smooth)}
.guide-visual svg{width:100%;height:auto;max-height:280px;overflow:visible}
.guide-visual .vessel{fill:#eadfc9;stroke:var(--ink);stroke-width:2}
.guide-visual .glaze{fill:#cfe4df;stroke:#6f9b90;stroke-width:1.5}
.guide-visual .decal{fill:none;stroke:var(--vermilion);stroke-width:7;stroke-linecap:round}
.guide-visual .line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.guide-visual .accent-fill{fill:var(--yellow);stroke:var(--ink);stroke-width:1.5}
.guide-visual text{fill:var(--ink);font-family:var(--sans);font-size:11px}

/* comparison table always communicates horizontal overflow */
.table-scroll-cue{display:flex;justify-content:flex-end;gap:10px;margin:0 3px 8px;font:700 10px Arial;letter-spacing:.12em;color:var(--vermilion)}
.table-scroll-cue b{animation:cue-right 1.5s ease-in-out infinite}
@keyframes cue-right{50%{transform:translateX(7px)}}
.table-scroll-top{height:18px;overflow-x:auto;overflow-y:hidden;margin-bottom:8px;scrollbar-color:var(--vermilion) #dfd8c7;scrollbar-width:auto}
.table-scroll-top>div{height:1px;width:1500px}
.table-scroll{scrollbar-color:var(--vermilion) #dfd8c7;scrollbar-width:auto;cursor:grab;position:relative}
.table-scroll:active{cursor:grabbing}
.table-scroll::-webkit-scrollbar,.table-scroll-top::-webkit-scrollbar{height:12px}.table-scroll::-webkit-scrollbar-track,.table-scroll-top::-webkit-scrollbar-track{background:#dfd8c7;border-radius:99px}.table-scroll::-webkit-scrollbar-thumb,.table-scroll-top::-webkit-scrollbar-thumb{background:var(--vermilion);border:3px solid #dfd8c7;border-radius:99px}
.transfer-compare tr{transition:background .35s ease,box-shadow .35s ease}.transfer-compare tr.is-highlighted{background:#f8dc83;box-shadow:inset 5px 0 0 var(--vermilion)}.transfer-compare tr.is-highlighted th{background:#f8dc83}

/* purpose cards */
.purpose-guide{margin-top:90px}.purpose-heading{max-width:800px;margin-bottom:34px}.purpose-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.purpose-card{min-height:285px;padding:24px;border:1px solid var(--line);border-radius:32px 8px 32px 8px;background:var(--white);color:var(--ink);text-align:left;cursor:pointer;transition:transform .55s var(--ease-smooth),box-shadow .55s var(--ease-smooth),background .3s ease}
.purpose-card:hover{transform:translateY(-9px) rotate(-.4deg);box-shadow:0 22px 45px #10282218;background:#fff}.purpose-card svg{width:100%;height:115px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.purpose-card svg .accent{stroke:var(--vermilion);stroke-width:4}.purpose-card span,.purpose-card strong,.purpose-card small{display:block}.purpose-card span{min-height:48px;font-size:13px}.purpose-card strong{margin:9px 0;font:600 19px var(--serif)}.purpose-card small{width:max-content;padding:5px 9px;border-radius:99px;background:var(--paper);font-size:9px;letter-spacing:.08em}

/* smoother tabs, products, accordion and scene rail */
.guide-tabs button,.product-filters button{transition:color .35s ease,background .35s ease,transform .45s var(--ease-smooth),box-shadow .35s ease}.guide-tabs button:hover,.product-filters button:hover{transform:translateY(-3px)}
.product-all{transition:opacity .3s ease,transform .45s var(--ease-smooth)}.product-all.is-filtering{opacity:0;transform:translateY(12px) scale(.992)}
.product-mini{opacity:0;transform:translateY(18px) scale(.98);animation:product-in .6s var(--ease-smooth) forwards;animation-delay:var(--delay,0ms)}
@keyframes product-in{to{opacity:1;transform:none}}
.faq-extra{display:grid!important;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .65s var(--ease-smooth),opacity .4s ease}.faq-extra[hidden]{display:grid!important;grid-template-rows:0fr;opacity:0}.faq-extra>*{overflow:hidden}.faq-list details p{animation:faq-copy .48s var(--ease-smooth)}@keyframes faq-copy{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.scene-rail{scroll-behavior:auto}.scene-rail article{transition:transform .65s var(--ease-smooth),opacity .45s ease}.scene-rail article:hover{transform:translateY(-10px)}

@media(max-width:1100px){.purpose-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.chapter-break{padding-right:16px}.chapter-break img{left:-18px;width:120px;height:150px}.chapter-break>div{width:76%;margin-right:0;padding:13px 17px;border-radius:24px}.chapter-break>div:after{left:-14px;bottom:22px;border-width:8px 14px 8px 0}.guide-panel{grid-template-columns:1fr!important}.guide-visual{min-height:210px}.purpose-grid{grid-template-columns:1fr}.purpose-card{min-height:0;display:grid;grid-template-columns:100px 1fr;column-gap:14px;align-items:center}.purpose-card svg{grid-row:1/4;height:90px}.purpose-card span{min-height:0}.table-scroll-top{height:20px}}
@media(prefers-reduced-motion:reduce){.table-scroll-cue b,.product-mini{animation:none}.side-character-rail img,.guide-visual,.guide-copy,.product-all,.purpose-card{transition:none}}

/* Information hierarchy and bolder section transitions v4 */

/* Keep the fixed navigation inside the 1600px canvas so it never disappears into the green gutters. */
.header{left:50%;right:auto;width:min(100%,1600px);transform:translateX(-50%);padding-inline:clamp(22px,4vw,64px)}
.header.is-scrolled{border-radius:22px;border-bottom:1px solid #1028221f}

/* One numbering system: vertical on desktop, horizontal in the original heading on mobile. */
.section[data-chapter]::after{content:attr(data-chapter);position:absolute;z-index:8;left:clamp(18px,2vw,34px);top:clamp(70px,7vw,110px);writing-mode:vertical-rl;font:700 10px/1 Arial;letter-spacing:.22em;opacity:.72;pointer-events:none}
.section[data-chapter] .chapter{display:none}
.subchapter{margin:0 0 12px;font:700 10px/1.4 Arial;letter-spacing:.2em;color:var(--vermilion)}
.vertical-title{gap:.6em;font-size:clamp(2.25rem,3vw,3rem);line-height:1.28;min-height:470px;margin-top:22px}
.vertical-title span:nth-child(2){padding-top:52px}
.vertical-title em{font-style:normal;text-combine-upright:none;letter-spacing:.03em}

/* Transition characters speak; they no longer duplicate chapter numbers and labels. */
.chapter-break>div{width:auto;min-width:260px;max-width:440px;padding:19px 28px}
.chapter-break>div p{margin:0;font:600 17px/1.65 var(--serif)}
.chapter-break b,.chapter-break span{display:none}

/* Multi-layer curves. These layers sit behind the character and its speech balloon. */
.chapter-break::after{content:"";position:absolute;z-index:1;pointer-events:none}
.break-diagonal::before{inset:-68px -4% auto;height:130px;clip-path:ellipse(72% 62% at 65% 100%);background:var(--paper)}
.break-diagonal::after{left:-3%;right:-3%;top:-34px;height:85px;background:linear-gradient(100deg,#4e9f82 0 18%,var(--yellow) 18% 100%);clip-path:polygon(0 58%,23% 19%,52% 64%,77% 28%,100% 0,100% 34%,77% 61%,52% 91%,23% 48%,0 88%);opacity:.96}
.break-zigzag::before{inset:-62px -4% auto;height:140px;background:var(--ink2);clip-path:ellipse(78% 65% at 28% 100%)}
.break-zigzag::after{left:-3%;right:-3%;top:-42px;height:96px;background:linear-gradient(105deg,var(--vermilion) 0 19%,var(--yellow) 19% 72%,#4e9f82 72%);clip-path:polygon(0 66%,19% 30%,43% 73%,70% 21%,100% 55%,100% 78%,70% 45%,43% 96%,19% 56%,0 88%)}
.break-fold::before{inset:-72px -4% auto;height:145px;background:var(--paper);clip-path:ellipse(75% 62% at 78% 100%)}
.break-fold::after{left:-4%;right:-4%;top:-35px;height:88px;background:linear-gradient(95deg,var(--yellow) 0 54%,var(--vermilion) 54% 72%,#4e9f82 72%);clip-path:polygon(0 68%,30% 35%,58% 76%,100% 8%,100% 34%,58% 100%,30% 60%,0 93%)}

/* Purpose selection belongs to chapter 03 and appears before the detailed table. */
.guide{display:block!important;padding-bottom:45px}
.guide-body{max-width:1280px;margin:0 auto}
.transfer-compare{display:flex;flex-direction:column;padding-top:45px!important}
.transfer-compare>.purpose-guide{order:1;margin:0 0 95px}
.transfer-compare>.compare-heading{order:2}
.transfer-compare>.table-scroll-cue{order:3}
.transfer-compare>.table-scroll-top{order:4}
.transfer-compare>.table-scroll{order:5}
.transfer-compare>.caution{order:6}
.purpose-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.purpose-card{min-height:0;padding:22px 24px;border-radius:24px 6px 24px 6px}
.purpose-card svg{display:none}
.purpose-card span{min-height:0;font-size:12px;color:#53615c}
.purpose-card strong{font-size:20px}

/* Cross-section diagrams use flat material layers, not cup silhouettes. */
.guide-panel{grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr)}
.guide-visual .substrate{fill:#d7b38b;stroke:#a77d50;stroke-width:2}
.guide-visual .glaze{fill:#c6e3ea;stroke:#79aebe;stroke-width:2}
.guide-copy ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.guide-copy li{padding-left:16px;position:relative;font-size:12px}
.guide-copy li::before{content:"";position:absolute;left:0;top:.8em;width:7px;height:2px;background:var(--vermilion)}
.transfer-compare table{width:1650px}

/* Independent back-to-top control. */
.back-to-top{position:fixed;z-index:80;right:25px;bottom:108px;width:58px;height:58px;border:1px solid #fff8;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;text-decoration:none;box-shadow:0 12px 28px #0003;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s ease,transform .55s var(--ease-smooth)}
.back-to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.back-to-top span{font-size:19px;line-height:1;align-self:end}.back-to-top small{font:8px Arial;letter-spacing:.12em;align-self:start}

@media(max-width:900px){
  .header{left:0;right:0;width:100%;transform:none}
  .section[data-chapter]::after{display:none}
  .section[data-chapter] .chapter{display:block}
  .vertical-title{min-height:380px;font-size:clamp(2rem,7vw,3rem)}
  .vertical-title em{text-combine-upright:none}
}
@media(max-width:700px){
  .chapter-break>div{width:74%;min-width:0;padding:13px 17px}
  .chapter-break>div p{font-size:13px}
  .purpose-grid{grid-template-columns:1fr}
  .purpose-card{display:block;padding:18px 20px}
  .guide-panel{grid-template-columns:1fr}
  .back-to-top{right:15px;bottom:88px;width:50px;height:50px}
  .break-diagonal::after,.break-zigzag::after,.break-fold::after{height:62px}
  .vertical-title{min-height:350px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .hero-actions .button{width:100%;min-width:0;padding-inline:10px}
}

/* v4.1: remove redundant speech balloons; the character alone bridges chapters. */
.chapter-break>div{display:none!important}

/* Rebuilt transitions: one primary silhouette plus one controlled accent layer. */
.chapter-break{height:clamp(125px,11vw,180px);overflow:visible;isolation:isolate}
.chapter-break::before,.chapter-break::after{content:"";position:absolute;pointer-events:none;transform:none;opacity:1}
.chapter-break::before{z-index:0;left:-5%;right:-5%;top:-68px;height:145px}
.chapter-break::after{z-index:1;left:-5%;right:-5%;top:-25px;height:48px}
.chapter-break img{z-index:3;bottom:10px}

.break-wave{background:var(--ink)}
.break-wave::before{background:var(--ink);clip-path:none;border-radius:52% 48% 0 0/100% 80% 0 0;transform:rotate(-1deg)}
.break-wave::after{top:-48px;height:64px;background:linear-gradient(100deg,var(--yellow) 0 72%,var(--vermilion) 72% 100%);clip-path:none;border-radius:58% 42% 0 0/100% 78% 0 0;transform:rotate(.6deg)}

.break-diagonal{background:var(--paper)}
.break-diagonal::before{background:var(--paper);clip-path:polygon(0 78%,100% 4%,100% 100%,0 100%);border-radius:0}
.break-diagonal::after{top:-42px;height:58px;background:linear-gradient(105deg,#4e9f82 0 20%,var(--yellow) 20% 84%,var(--vermilion) 84% 100%);clip-path:polygon(0 68%,100% 0,100% 34%,0 100%);border-radius:0}

.break-notch{background:#f3f1ec}
.break-notch::before{background:#f3f1ec;clip-path:ellipse(76% 68% at 45% 100%);border-radius:0}
.break-notch::after{top:-39px;height:56px;background:linear-gradient(90deg,var(--vermilion) 0 62%,var(--yellow) 62% 100%);clip-path:ellipse(64% 58% at 42% 100%);border-radius:0}

.break-curve{background:#fff}
.break-curve::before{background:#fff;clip-path:none;border-radius:60% 40% 0 0/100% 72% 0 0;transform:rotate(1.2deg)}
.break-curve::after{top:-47px;height:62px;background:linear-gradient(100deg,#4e9f82 0 76%,var(--yellow) 76% 100%);clip-path:none;border-radius:42% 58% 0 0/100% 78% 0 0;transform:rotate(-.8deg)}

.break-zigzag{background:var(--ink2)}
.break-zigzag::before{top:-72px;height:145px;background:var(--ink2);clip-path:none;border-radius:58% 42% 0 0/100% 72% 0 0;transform:rotate(-.8deg)}
.break-zigzag::after{top:-31px;height:52px;background:linear-gradient(90deg,var(--yellow) 0 78%,var(--vermilion) 78% 100%);clip-path:polygon(0 56%,16.66% 4%,33.33% 56%,50% 4%,66.66% 56%,83.33% 4%,100% 56%,100% 80%,83.33% 30%,66.66% 80%,50% 30%,33.33% 80%,16.66% 30%,0 80%);border-radius:0}

.break-fold{background:var(--paper)}
.break-fold::before{background:var(--paper);clip-path:polygon(0 76%,100% 10%,100% 100%,0 100%);border-radius:0}
.break-fold::after{top:-40px;height:60px;background:linear-gradient(102deg,var(--vermilion) 0 60%,var(--yellow) 60% 82%,#4e9f82 82% 100%);clip-path:polygon(0 82%,42% 16%,68% 62%,100% 3%,100% 32%,68% 90%,42% 45%,0 100%);border-radius:0}

/* Chapter 03 now reads as one continuous decision guide: purpose, layers, comparison. */
.guide{padding-bottom:18px}
.guide-body>p:last-child{max-width:760px}
.transfer-compare>.purpose-guide{order:1;margin-bottom:75px}
.transfer-compare>.static-layer-guide{order:2;margin-bottom:85px}
.transfer-compare>.compare-heading{order:3}
.transfer-compare>.table-scroll-cue{order:4}
.transfer-compare>.table-scroll-top{order:5}
.transfer-compare>.table-scroll{order:6}
.transfer-compare>.caution{order:7}
.static-layer-heading{margin-bottom:24px}.static-layer-heading h3{margin:8px 0 0;font:500 clamp(1.8rem,3vw,3.2rem)/1.45 var(--serif)}

/* Reversible viewport reveals: sections breathe as the reader moves through them. */
.reveal{opacity:0!important;transform:translateY(34px) scale(.985)!important;transition:opacity .75s var(--ease-smooth),transform .85s var(--ease-smooth)!important;transition-delay:var(--reveal-delay,0ms)!important;will-change:opacity,transform}
.reveal.is-visible{opacity:1!important;transform:none!important}
.process-timeline li:nth-child(2n){--reveal-delay:70ms}.process-timeline li:nth-child(3n){--reveal-delay:120ms}

/* Smooth FAQ details and the extended question group. */
:root{interpolate-size:allow-keywords}
.faq-list details::details-content{block-size:0;opacity:0;overflow:hidden;transition:block-size .55s var(--ease-smooth),opacity .35s ease,content-visibility .55s;transition-behavior:allow-discrete}
.faq-list details[open]::details-content{block-size:auto;opacity:1}
.faq-list details p{animation:none!important;transform:none}
.faq-extra{display:block!important;max-height:2200px;opacity:1;overflow:hidden;transition:max-height .8s var(--ease-smooth),opacity .45s ease!important}
.faq-extra.is-collapsed{max-height:0;opacity:0}
.faq-extra[hidden]{display:block!important}

@media(max-width:700px){
  .chapter-break{height:105px}
  .chapter-break::before{top:-44px;height:92px}.chapter-break::after{height:26px}
  .chapter-break img{bottom:3px}
  .static-layer-guide{margin-bottom:55px!important}
}

/* v4.2: keep the shop identity visible in the navigation at every width. */
.header .brand small,.header .brand small strong,.header .brand small em{display:block}
.header .brand small strong{font-weight:600}
.header .brand small em{font-style:normal}
.header .brand{gap:12px}
.header .brand-shop-name{font:600 clamp(20px,1.7vw,28px)/1.15 var(--serif);letter-spacing:.12em;white-space:nowrap}
.header .brand-origin{display:block!important;margin:3px 0 0;padding-left:12px;border-left:1px solid currentColor;font:500 9px/1.4 var(--serif);letter-spacing:.12em;white-space:nowrap;opacity:.68}

/* Keep the character cast focused: hero, guide, process, about and the wide-screen rail. */
.chapter-break img,.contact-shizuo{display:none!important}
.hero{overflow:visible;z-index:6}
.hero-copy{z-index:9}
.hero-character{z-index:8;right:-1vw;bottom:calc(-18% - 200px);width:min(52vw,760px);filter:drop-shadow(0 28px 32px rgba(0,0,0,.2));pointer-events:none}
.hero-character img{width:100%;max-height:none;height:auto;object-fit:contain;object-position:right bottom}
.hero-character p{left:2%;right:auto;top:14%;width:190px;min-height:150px;margin:0;padding:20px 25px;display:grid;place-items:center;text-align:center;line-height:1.7;transform:rotate(-4deg)}
.hero-character p::after{right:-18px;left:auto;bottom:18px;border-left-color:var(--white);border-right-color:transparent}
.hero-dots{z-index:10;bottom:20px}
.guide{overflow:visible}
.guide-body{position:relative;z-index:2;padding-right:min(40vw,560px)}
.guide-shizuo{position:absolute;z-index:10;right:clamp(70px,7vw,125px);top:clamp(22px,3vw,52px);bottom:auto;width:min(38vw,560px);height:min(55vw,760px);max-height:none;object-fit:contain;object-position:right top;filter:drop-shadow(0 20px 20px #0003)}

/* Section boundaries use only the two neighbouring section colours.
   Kill the former accent layer completely so no cached gradient, hairline or gap can survive. */
.chapter-break::after{content:none!important;display:none!important;width:0!important;height:0!important;background:none!important;clip-path:none!important;border:0!important}

/* The long chapter titles use the quiet left column as a vertical signboard. */
@media(min-width:901px){
  .process-heading h2{writing-mode:vertical-rl;text-orientation:mixed;min-height:430px;margin:20px auto 28px;letter-spacing:.09em}
  .company-copy{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:34px;align-items:start}
  .company-copy h2{grid-column:1;grid-row:1/6;writing-mode:vertical-rl;text-orientation:mixed;min-height:330px;margin:0;letter-spacing:.08em}
  .company-copy .company-quote,.company-copy>p:not(.chapter):not(.company-quote),.company-copy>.text-link{grid-column:2}
  .faq-title{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start}
  .faq-title h2{writing-mode:vertical-rl;text-orientation:mixed;min-height:360px;margin:0;letter-spacing:.08em}
  .faq-title img{width:100%;height:360px}
}

/* The active production step signals only while it crosses the viewport centre. */
.process-timeline li.is-current::after{animation:timeline-center-pulse 1.25s ease-in-out infinite}
.process-heading{isolation:isolate;overflow:visible}
.process-heading>p,.process-heading>h2{position:relative;z-index:1}
.process-background-character{position:absolute;z-index:0;left:50%;top:50%;width:min(145%,620px);height:auto;max-height:none;object-fit:contain;transform:translate(-50%,-36%);opacity:.13;filter:saturate(.72) contrast(.92);pointer-events:none;user-select:none}
.process-timeline img{height:190px;object-fit:cover;object-position:center;border-radius:24px 8px 20px 8px;background:#f5f1e6}
.process-timeline li:last-child img{object-fit:contain}
.process-pictogram{position:relative;display:grid;place-items:center;height:190px;border:1px solid rgba(16,40,34,.13);border-radius:24px 8px 20px 8px;background:linear-gradient(145deg,#fbf7ea 0%,#eef1e8 100%);color:var(--ink);overflow:hidden}
.process-pictogram::before{content:"";position:absolute;left:-34px;bottom:-44px;width:120px;height:120px;border:1px solid rgba(16,40,34,.08);border-radius:50%}
.process-pictogram::after{content:"";position:absolute;right:17px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--vermilion)}
.process-pictogram svg{position:relative;z-index:1;width:112px;height:112px;overflow:visible}
.process-timeline li.is-current .process-pictogram{background:#fffdf7;box-shadow:inset 0 0 0 1px rgba(186,78,49,.16)}
.company-photo>span{z-index:3}
.contact-shizuo{display:block;width:min(100%,360px);height:280px;margin:26px 0 -22px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 18px 16px #0003)}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-form button:disabled{cursor:not-allowed;opacity:.55}
.privacy-scroll{height:230px;overflow-y:auto;padding:22px 24px;border:1px solid rgba(16,40,34,.2);border-radius:12px;background:#f7f4eb;color:var(--ink);overscroll-behavior:contain;scrollbar-gutter:stable}
.privacy-scroll h3{margin:0 0 16px;font:600 18px/1.5 var(--serif)}
.privacy-scroll p{margin:0 0 13px;font-size:11px;line-height:1.9}
.privacy-scroll a{text-underline-offset:4px}
@keyframes timeline-center-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 1px #ffffff88,0 0 0 0 rgba(237,201,78,.55)}
  50%{transform:scale(1.25);box-shadow:0 0 0 1px #ffffff88,0 0 0 13px rgba(237,201,78,0)}
}

@media(max-width:600px){
  .header .brand-shop-name{font-size:19px;letter-spacing:.08em}
  .header .brand-origin{display:none!important}
  .process-timeline img,.process-pictogram{height:150px}
  .process-pictogram svg{width:92px;height:92px}
  .contact-shizuo{height:220px;margin-bottom:0}
}

@media(max-width:900px){
  .hero{overflow:hidden}
  .hero-character{right:-12vw;bottom:calc(-3% - 100px);width:58vw}
  .guide-body{padding-right:0}
  .guide-shizuo{display:none}
}

@media(prefers-reduced-motion:reduce){
  .process-timeline li.is-current::after{animation:none}
}

/* v4.3: continuous scenes, deliberate desktop line breaks and rebuilt chapter 07. */
.scene-rail{scrollbar-width:none;overscroll-behavior-x:none}
.scene-rail article{flex-shrink:0}
.scene-rail.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.company{grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);align-items:stretch}
.company-copy{padding-bottom:0}
.company-photo{grid-column:1/-1;width:100%;height:clamp(320px,34vw,500px);margin:52px 0 0;position:relative;border-radius:56px 8px 34px 8px;overflow:hidden}
.company-character{min-height:650px;display:flex;align-items:stretch;justify-content:center;overflow:visible}
.company-character .company-shizuo{display:block;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 24px #0004)}

@media(min-width:901px){
  .scenes .section-heading,.lineup .section-heading,.compare-heading{max-width:none}
  .scenes .section-heading h2,.compare-heading h2,.lineup .section-heading h2{max-width:none;white-space:nowrap;font-size:clamp(2.2rem,3.7vw,4.3rem)}
}

/* v4.4: TRANSFER GUIDE is intentionally reduced to two customer-facing choices. */
.transfer-simple{display:block;padding-top:70px!important}
.transfer-simple .compare-heading{max-width:900px;margin-bottom:48px}
.transfer-simple .compare-heading h2{white-space:normal}
.transfer-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.transfer-method-card{overflow:hidden;display:grid;grid-template-columns:minmax(190px,.65fr) minmax(0,1.35fr);min-height:520px;border:1px solid var(--line);border-radius:52px 8px 38px 8px;background:var(--white)}
.transfer-method-icon{position:relative;display:grid;place-items:center;padding:35px;background:linear-gradient(145deg,#e8ede4,#f8f4e8);border-right:1px solid var(--line)}
.transfer-method-icon::after{content:"";position:absolute;left:-55px;bottom:-55px;width:170px;height:170px;border:1px solid rgba(16,40,34,.1);border-radius:50%}
.transfer-method-icon svg{position:relative;z-index:1;width:min(100%,250px);height:auto;overflow:visible;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.transfer-method-icon .mug{fill:#fffdf7}.transfer-method-icon .mark{stroke:var(--vermilion);stroke-width:5}.transfer-method-icon .heat,.transfer-method-icon .press{stroke:var(--yellow);stroke-width:4}.transfer-method-icon .mark-dot{fill:var(--vermilion);stroke:none}.transfer-method-icon .mark-line{stroke:var(--vermilion);stroke-width:3}
.transfer-method-copy{padding:clamp(34px,4vw,58px)}
.transfer-method-copy>span{color:var(--vermilion);font:700 9px Arial;letter-spacing:.18em}
.transfer-method-copy h3{margin:9px 0 20px;font:600 clamp(2.2rem,3.7vw,4rem) var(--serif)}
.transfer-method-copy>p{margin:0 0 27px;font-size:13px;line-height:2}
.transfer-method-copy dl{margin:0;border-top:1px solid var(--line)}
.transfer-method-copy dl div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.transfer-method-copy dt{font-size:10px;font-weight:700}.transfer-method-copy dd{margin:0;font-size:11px;line-height:1.75}
.transfer-method-note{max-width:950px;margin:24px 0 0;font-size:11px;line-height:1.9;opacity:.7}
.transfer-simple .design-guide-callout{margin-top:70px}

@media(max-width:1200px){
  .transfer-method-card{grid-template-columns:1fr;min-height:0}
  .transfer-method-icon{min-height:260px;border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:760px){
  .transfer-simple{padding-top:45px!important}
  .transfer-method-grid{grid-template-columns:1fr}
  .transfer-method-card{border-radius:34px 7px 28px 7px}
  .transfer-method-icon{min-height:220px;padding:24px}
  .transfer-method-icon svg{width:min(70%,220px)}
  .transfer-method-copy{padding:30px 24px}
  .transfer-method-copy dl div{grid-template-columns:95px 1fr}
  .transfer-simple .design-guide-callout{margin-top:45px}
}

@media(max-width:900px){
  .company{grid-template-columns:1fr}
  .company-copy{order:0}
  .company-character{order:1;min-height:clamp(420px,115vw,680px)}
  .company-character .company-shizuo{width:min(100%,620px);margin-inline:auto}
  .company-photo{height:420px;margin-top:38px}
}

@media(max-width:600px){
  .company-character{min-height:430px}
  .company-photo{height:330px}
}

/* v4.4: footer shares the same brand lockup and horizontal rhythm as the header. */
footer{width:min(100% - 24px,1600px);margin:0 auto;grid-template-columns:1.2fr 1fr auto;align-items:center;padding:70px clamp(22px,4vw,64px) 86px;border-top:1px solid rgba(255,255,255,.16)}
footer .footer-brand{display:flex;color:var(--white);gap:12px;width:max-content}
footer .brand-shop-name{font:600 clamp(20px,1.7vw,28px)/1.15 var(--serif);letter-spacing:.12em;white-space:nowrap}
footer .brand-origin{display:block;margin:0;padding-left:12px;border-left:1px solid currentColor;font:500 9px/1.4 var(--serif);letter-spacing:.12em;white-space:nowrap;opacity:.68}
footer>p{margin:0}

@media(max-width:900px){
  footer{width:100%;grid-template-columns:1fr 1fr}
  footer .footer-brand{grid-column:1/-1}
}

@media(max-width:600px){
  footer{grid-template-columns:1fr;gap:30px;padding-block:52px 70px}
  footer .brand-shop-name{font-size:19px;letter-spacing:.08em}
  footer .brand-origin{display:none}
}

/* v4.5: every chapter boundary is one uninterrupted curve or one straight diagonal. */
.chapter-break{height:clamp(90px,8vw,130px);margin:-1px 0;padding:0;overflow:hidden;isolation:isolate}
.chapter-break::before{content:"";position:absolute;z-index:0;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;transform:none!important;opacity:1!important;pointer-events:none}
.chapter-break::after{content:none!important;display:none!important}

/* Previous colour forms one continuous Bezier-like arc across the full width. */
.break-wave{background:var(--ink)}
.break-wave::before{background:var(--cream);clip-path:ellipse(85% 96% at 50% 0)}
.break-notch{background:#f3f1ec}
.break-notch::before{background:var(--paper);clip-path:ellipse(85% 96% at 50% 0)}
.break-zigzag{background:var(--ink2)}
.break-zigzag::before{background:#fff;clip-path:ellipse(85% 96% at 50% 0)}

/* The remaining dividers are a single straight diagonal from edge to edge. */
.break-diagonal{background:var(--paper)}
.break-diagonal::before{background:var(--ink);clip-path:polygon(0 0,100% 0,100% 22%,0 78%)}
.break-curve{background:#fff}
.break-curve::before{background:#f3f1ec;clip-path:polygon(0 0,100% 0,100% 72%,0 18%)}
.break-fold{background:var(--paper)}
.break-fold::before{background:var(--ink2);clip-path:polygon(0 0,100% 0,100% 20%,0 76%)}

/* v4.6: lighten the long production chapter while retaining the brand palette. */
.process{background:#dce4d5!important;color:var(--ink)!important}
.process .process-heading p{color:var(--ink);opacity:.78}
.process-timeline::before{background:rgba(16,40,34,.24)}
.process-timeline li::after{border-color:#dce4d5}
.break-zigzag{background:#dce4d5}
.break-fold::before{background:#dce4d5}

/* v4.7: remove sub-pixel seams and let chapter 07 read as a horizontal story. */
.chapter-break{margin:-3px 0 -1px}
.chapter-break::before{top:-3px!important;height:calc(100% + 3px)!important}
@media(min-width:901px){
  .company-copy{display:block}
  .company-copy h2{writing-mode:horizontal-tb;text-orientation:mixed;min-height:0;margin:18px 0 30px;letter-spacing:.035em}
  .company-copy>p:not(.chapter){max-width:680px}
}
/* Keep the two floating utility controls visually balanced. */
.back-to-top,
.floating-contact {
  width: 64px !important;
  height: 64px !important;
}

/* v4.8: Shizuo reacts to page movement in the wide left gutter. */
.side-character-rail{transform-origin:center bottom}
.side-character-rail img{will-change:transform;transform-origin:center bottom}
.side-character-rail[data-motion="walking"] img{animation:side-walk-bob .8s linear infinite}
.side-character-rail[data-motion="thinking"] img{animation:side-think-breathe 2.2s ease-in-out infinite}
.side-character-rail[data-motion="sitting"] img{animation:side-sit-down .48s cubic-bezier(.3,.7,.2,1) both}
.side-character-rail[data-motion="resting"] img{animation:side-rest-breathe 3s ease-in-out infinite}
.side-character-rail[data-motion="sitting"],
.side-character-rail[data-motion="resting"]{width:164px}
@keyframes side-walk-bob{0%,100%{transform:translateY(0)}25%,75%{transform:translateY(-1px)}50%{transform:translateY(-2px)}}
@keyframes side-think-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-.35deg)}}
@keyframes side-sit-down{from{transform:translateY(-12px) scale(1.03);opacity:.72}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes side-rest-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(2px) scale(.995)}}
@media(prefers-reduced-motion:reduce){.side-character-rail[data-motion] img{animation:none!important}}

/* v4.9: show the actual product dimensions directly on every lineup card. */
.product-mini .product-size{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:11px;line-height:1.55;letter-spacing:.015em;color:rgba(16,40,34,.78)}
.product-mini .product-size b{display:block;margin-bottom:3px;font:700 9px/1.3 Arial;letter-spacing:.13em;color:var(--vermilion)}
@media(max-width:700px){.product-mini .product-size{font-size:10px}.product-mini .product-size b{font-size:8px}}

/* v5.0: desktop navigation and contained rounded menu panel */
.header{width:min(calc(100% - 24px),1600px);border-radius:22px}
.header .desktop-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(13px,1.4vw,24px);margin-left:auto}
.header .desktop-nav a{position:relative;color:inherit;text-decoration:none;white-space:nowrap;font:600 clamp(10px,.72vw,12px)/1.3 var(--sans);letter-spacing:.055em}
.header .desktop-nav a:not(.desktop-nav-contact)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .25s}
.header .desktop-nav a:not(.desktop-nav-contact):hover::after{right:0}
.header .desktop-nav-contact{padding:12px 17px;border-radius:999px;background:var(--ink);color:#fff!important}
@media(max-width:1100px){
  .header .desktop-nav{display:none}
  .process-background-character{display:none}
}
@media(max-width:900px){
  .header{left:50%;right:auto;top:30px;width:calc(100% - 16px);transform:translateX(-50%);border-radius:18px;background:rgba(251,247,234,.92);backdrop-filter:blur(14px)}
}

/* 本番表示ではデザイン確認用の上部ラベルを使用しない。 */
.comp-note{display:none!important}
.header{top:12px}
@media(max-width:900px){.header{top:8px}}
.design-guide-callout{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:38px;padding:25px 28px;border:1px solid var(--line);background:var(--ink);color:#fff;text-decoration:none;transition:transform .25s}.design-guide-callout:hover{transform:translateY(-4px)}.design-guide-callout span{display:grid;gap:6px}.design-guide-callout small{color:var(--yellow);font:700 9px Arial;letter-spacing:.18em}.design-guide-callout strong{font:500 clamp(1.05rem,2vw,1.45rem) var(--serif)}.design-guide-callout b{font-size:28px}.contact-form small a{color:inherit;text-underline-offset:4px}
@media(max-width:600px){.design-guide-callout{align-items:flex-end;padding:20px}.design-guide-callout strong{line-height:1.7}}

/* TOP・相談ボタンの円サイズを統一 */
    .back-to-top,
    .floating-contact {
      width: 64px !important;
      height: 64px !important;
      right: 18px !important;
    }

    /* 問い合わせは見出しからフォームまで素直に続く1カラム */
    .contact {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      align-items: start !important;
      gap: 36px !important;
      min-height: 0 !important;
      overflow: visible !important;
      padding: clamp(72px, 7vw, 108px) 7vw clamp(92px, 8vw, 124px) !important;
    }

    .contact-intro {
      position: static !important;
      top: auto !important;
      width: min(100%, 980px);
      max-width: 980px;
      min-height: 0 !important;
      margin: 0 auto !important;
    }

    .contact-intro .chapter {
      display: block !important;
      position: static !important;
      writing-mode: horizontal-tb !important;
      margin: 0 0 16px !important;
    }

    .contact-intro h2 {
      margin: 0 0 18px !important;
    }

    .contact-intro > p:last-child {
      margin: 0;
    }

    .contact-form {
      width: min(100%, 980px);
      margin: 0 auto !important;
      overflow: visible !important;
    }

    .contact-form .field-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .contact-form .form-note {
      display: block;
      position: relative;
      z-index: 2;
      margin: 4px 0 0;
      padding-bottom: 4px;
    }

    @media (max-width: 1100px) {
      /* 見出しが上段へ回る幅では、納品カードの後ろに十分な実余白を確保する */
      .process {
        padding-bottom: clamp(260px, 30vw, 360px) !important;
      }

      .process .process-timeline {
        padding-bottom: 0 !important;
      }

      .process .process-timeline li:last-child {
        margin-bottom: 0 !important;
      }

      .process + .chapter-break,
      .chapter-break {
        margin-top: 0 !important;
      }

      .process + .chapter-break {
        position: relative;
        z-index: 2;
      }
    }

    @media (max-width: 700px) {

      .contact {
        gap: 26px !important;
        padding: 64px 22px 96px !important;
      }

      .contact-form {
        padding: 22px !important;
      }
    }

    /* 07: 左を物語、右を静夫に絞った二列構成 */
    .company {
      grid-template-columns: minmax(0, 1.14fr) minmax(300px, .86fr) !important;
      align-items: center !important;
    }

    .company-copy h2 {
      white-space: nowrap;
      font-size: clamp(1.75rem, 3.4vw, 4.1rem);
    }

    .company-copy {
      font-family: var(--serif);
    }

    .company-copy > p:not(.chapter) {
      line-height: 2.05;
      letter-spacing: .035em;
    }

    .company-persona {
      margin: 0 0 18px;
      color: var(--vermilion);
      font: 600 clamp(1.35rem, 2vw, 2rem)/1.55 var(--serif);
      font-weight: 600;
      letter-spacing: .08em !important;
    }

    .company-signature {
      margin: 30px 0 24px;
      text-align: right;
      color: var(--vermilion);
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: .12em !important;
    }

    /* 生成画像側に文字用の余白があるため、白いヒーローマスクは使用しない */
    .hero-shade {
      display: none !important;
    }

    .company-character {
      align-self: stretch;
      min-height: clamp(560px, 56vw, 760px);
    }

    @media (max-width: 900px) {
      .company {
        grid-template-columns: 1fr !important;
      }

      .company-character {
        min-height: clamp(390px, 110vw, 620px);
      }
    }