@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700;900&display=swap');
:root{--paper:#fff6f9;--ink:#35252d;--brand:#f7b9cf;--rose:#8b3455;--muted:#715661;--line:#e6cad5;--serif:"Noto Sans JP","Yu Gothic",sans-serif}
[hidden]{display:none!important}
*{box-sizing:border-box}html{scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.7 "Noto Sans JP","Yu Gothic",sans-serif;font-synthesis:none}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-weight:900;line-height:1.25;letter-spacing:-.045em}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #8b3455;outline-offset:5px}button:disabled{cursor:default;opacity:.6}img{display:block;max-width:100%}.wrap{max-width:1600px;margin:auto;padding-left:4.5%;padding-right:4.5%}
.header{height:84px;margin-bottom:-84px;padding:0 3%;display:flex;align-items:center;justify-content:space-between;gap:28px;position:sticky;top:0;z-index:20;background:linear-gradient(90deg,var(--paper) 0 31%,transparent 31%);backdrop-filter:blur(12px)}.brand{font-size:27px;white-space:nowrap;display:flex;align-items:center;gap:15px;letter-spacing:-.035em}.brand:before{content:"";width:46px;height:40px;display:block;background:var(--brand);clip-path:polygon(22% 0,61% 0,36% 70%,0 70%,22% 0,65% 29%,100% 29%,78% 100%,40% 100%,65% 29%)}.header nav{display:flex;align-items:center;gap:28px;background:var(--paper);padding:26px 32px;font-size:14px;font-weight:700}.header nav a+a:before{content:"/";display:inline-block;margin-right:28px}.menu-toggle{display:none;border:0;background:var(--paper)}.skip{position:fixed;left:20px;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:10px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:72px;padding:18px 38px;border:0;border-radius:100px;background:var(--brand);color:var(--ink);font-weight:700;font-size:22px;line-height:1.4;transition:transform 180ms,background 180ms;text-align:center}.button:hover{background:#eda4bf;text-decoration:none;transform:translateY(-3px)}.button span{font-size:1.4em}
.hero{position:relative;isolation:isolate;height:clamp(760px,62.5vw,1050px);width:100%;max-width:none;margin:0;overflow:hidden}.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero-plane{position:absolute;inset:0;background:var(--paper);pointer-events:none}.hero-plane-top{clip-path:polygon(0 0,31% 0,31% 8%,60% 14%,0 42%)}.hero-plane-bottom{clip-path:polygon(0 47%,30.8% 52.4%,30.6% 63%,34.4% 64%,34.1% 74.3%,39.8% 76.2%,42.3% 100%,0 100%)}.hero h1{position:absolute;top:10.1%;left:2.5%;font-size:clamp(96px,9.3vw,153px);line-height:1.12;letter-spacing:-.082em;font-weight:900;white-space:nowrap}.hero-detail{position:absolute;top:54.5%;left:2.8%;width:35.4%;display:flex;align-items:flex-start;flex-direction:column;gap:14px}.hero-detail h2{font-size:clamp(23px,2.25vw,36px);letter-spacing:.005em;display:flex;align-items:center;gap:16px;white-space:nowrap}.hero-detail h2:before{content:"";width:60px;height:4px;background:var(--brand);flex-shrink:0}.agency{font-size:14px;font-weight:700}.hero .intro{font-size:clamp(18px,1.7vw,27px);line-height:1.65}.hero .button{width:100%;font-size:clamp(18px,1.9vw,30px);padding:18px 20px;min-height:76px;margin-top:10px}.hero-secondary{align-self:center;text-decoration:underline;text-underline-offset:5px;font-size:17px}.image-note{position:absolute;right:18px;bottom:12px;font-size:11px;background:#fff6f9dd;padding:2px 7px;color:#49303c}
.about{position:relative;overflow:hidden;padding-top:110px;padding-bottom:120px;min-height:620px}.about:after{content:"";position:absolute;bottom:0;right:0;width:70%;height:100px;background:var(--brand);clip-path:polygon(100% 0,100% 85%,0 100%)}.about-content{position:relative;z-index:1;max-width:860px}.eyebrow{display:flex;align-items:center;gap:18px;font-weight:700;font-size:19px}.eyebrow:before{content:"";display:block;width:65px;height:4px;background:var(--brand)}.about h2,.process h2,.final-line h2{font-size:clamp(50px,6.9vw,110px);line-height:1.15;letter-spacing:-.075em}.about h2{margin:22px 0}.about-number{position:absolute;right:-2%;top:55px;font-size:clamp(250px,34vw,540px);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px var(--brand);letter-spacing:-.09em;transform:rotate(-6deg);opacity:.65}.about p:not(.eyebrow){font-size:22px;max-width:620px}.process{padding-top:85px;padding-bottom:130px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;list-style:none;padding:0;margin:55px 0 0}.steps li{border-right:1px solid var(--brand);padding-right:28px}.steps li:last-child{border:0}.step-line{border-bottom:3px solid var(--brand);margin-bottom:20px;max-width:90%}.step-line span{font-size:clamp(80px,10vw,156px);font-weight:900;line-height:1.3;letter-spacing:-.075em}.steps h3{font-size:27px;margin-bottom:16px}.steps p{font-size:18px}.steps li.arrived .step-line{animation:step-in 1800ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--step)*650ms)}@keyframes step-in{from{transform:translateY(18px)}to{transform:translateY(0)}}.final-line{padding:110px 0 65px;background:var(--brand);clip-path:polygon(0 0,100% 8%,100% 100%,0 100%)}.final-line p{margin:25px 0}.final-line .button{background:var(--paper);color:var(--ink);min-width:430px}.final-line .button:hover{background:white}.final-secondary{display:block;width:fit-content;margin:18px 0 0 105px;text-decoration:underline}
.footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:38px 4.5%;background:#35252d;color:var(--paper);font-size:14px}.footer .brand{font-size:21px}.footer nav{display:flex;gap:24px}.muted{color:var(--muted)}.small{font-size:15px}.copper{color:var(--rose)}
.subpage{padding-top:145px;padding-bottom:80px;position:relative;isolation:isolate;min-height:85vh;display:flex;flex-direction:column;align-items:flex-start;gap:28px;overflow:hidden}.subpage:before{content:"";position:absolute;z-index:-1;top:0;right:0;width:68%;height:370px;background:var(--brand);clip-path:polygon(8% 0,100% 0,100% 100%,0 71%,44% 35%,0 21%)}.subpage h1{font-size:clamp(56px,7.8vw,120px);letter-spacing:-.065em}.subpage>h2{font-size:38px}.subpage>p:not(.eyebrow):not(.breadcrumb){font-size:22px;max-width:960px}.breadcrumb{font-size:14px}.watermark{display:none}.beauty-categories{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:80px;margin:50px 0 20px;counter-reset:category}.beauty-categories section{border-top:2px solid var(--brand);padding:25px 0}.beauty-categories section:before{counter-increment:category;content:"0"counter(category);font-size:70px;font-weight:900;color:var(--rose);line-height:1.3}.beauty-categories h2{font-size:40px;margin:12px 0}.beauty-categories p{margin-top:12px}.beauty-cta{display:flex;flex-direction:column;gap:22px}.company{max-width:1440px;margin:auto;padding-left:6%;padding-right:6%}.company-table{width:100%;margin:0 0 12px}.company-table>div{display:grid;grid-template-columns:220px 1fr;padding:23px 0;border-bottom:1px solid var(--line);gap:30px}.company-table dt{font-weight:700}.company-table dd{margin:0;overflow-wrap:anywhere}
.contact-main{background:var(--paper);position:relative;isolation:isolate}.contact-main:before{content:"";position:absolute;z-index:-1;inset:0;background:var(--brand);clip-path:polygon(32% 0,100% 0,100% 42%,0 29%,52% 14%,32% 9%)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding-top:145px;padding-bottom:80px;align-items:start}.contact-intro{display:flex;flex-direction:column;gap:35px}.contact-intro h1{font-size:clamp(46px,5.6vw,82px);line-height:1.25;letter-spacing:-.07em}.contact-intro p{font-size:21px}.contact-intro>a{font-size:17px;font-weight:700;text-decoration:underline;text-underline-offset:6px}.contact-photo{display:none}.contact-form{background:#49303c;color:var(--paper);padding:38px;display:flex;flex-direction:column;gap:25px;min-width:0}.contact-form h2{font-size:30px}.field{display:flex;flex-direction:column;gap:10px}.field label{font-size:17px;font-weight:600}.field input,.field select,.field textarea{width:100%;border:1px solid #b48a9b;border-radius:2px;padding:13px 15px;background:white;color:var(--ink);min-height:54px}.field textarea{resize:vertical;min-height:185px}.field-error{color:#ffd5e4;font-size:14px}.contact-form .button{width:100%;font-size:19px}.contact-form [aria-invalid=true]{outline:2px solid #f7b9cf}.privacy-note{font-size:13px;line-height:1.7}.privacy-note label{display:block;margin-top:16px}.privacy-note input{width:18px;height:18px;vertical-align:middle}.privacy-note a{text-decoration:underline}.form-error{border-left:3px solid var(--brand);padding:12px 16px;background:#624151;font-size:15px}.form-error a{text-decoration:underline}.confirm-list{margin:0;overflow-wrap:anywhere}.confirm-list>div{border-bottom:1px solid #987385;padding:15px 0}.confirm-list dt{font-weight:700;color:#f7b9cf}.confirm-list dd{white-space:pre-wrap;margin:8px 0 0}.secondary-button{border:1px solid #cba7b8;border-radius:40px;padding:14px 20px;background:none;color:white;min-height:50px}.honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.mobile,.mobile-break{display:none}
@media(max-width:1100px) and (min-width:701px){.header{gap:12px}.brand{font-size:22px;gap:9px}.brand:before{width:35px;height:32px}.header nav{gap:15px;padding:26px 18px;font-size:12px}.header nav a+a:before{margin-right:15px}.hero{height:790px}.hero h1{font-size:9vw;top:13%}.hero-detail{top:50%;width:42%}.hero-detail h2{font-size:25px}.hero-detail h2:before{width:36px}.hero .intro{font-size:20px}.hero .button{font-size:20px}.hero-plane-bottom{clip-path:polygon(0 43%,37% 48%,37% 60%,41% 62%,41% 74%,47% 78%,49% 100%,0 100%)}.steps{gap:22px}.steps h3{font-size:22px}.steps p{font-size:16px}.footer{flex-wrap:wrap}.contact-grid{gap:30px}.contact-form{padding:25px}.contact-intro h1{font-size:47px}}
@media(max-width:700px){body{font-size:16px}.wrap{padding-left:24px;padding-right:24px}.header{height:auto;min-height:76px;margin-bottom:0;padding:18px 22px;gap:16px;flex-wrap:wrap;background:var(--paper)}.brand{font-size:20px;gap:9px}.brand:before{width:31px;height:29px}.menu-toggle{display:none;font-size:25px;min-width:44px;min-height:44px}.header.enhanced .menu-toggle{display:block}.header nav{width:100%;flex-direction:column;align-items:stretch;gap:3px;padding:5px 0;font-size:16px}.header nav a{padding:12px}.header nav a+a:before{display:none}.header.enhanced nav:not(.open){display:none}.header nav.open{max-height:65svh;overflow:auto}.header .menu-toggle[aria-expanded=true]{font-size:15px}.hero{height:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}.hero-photo{position:relative;inset:auto;order:2;width:100%;height:365px;object-fit:cover;object-position:68% center}.hero-plane{display:none}.hero h1{position:relative;top:auto;left:auto;order:1;padding:15px 20px 26px;background:linear-gradient(165deg,var(--paper) 0 56%,var(--brand) 56%);font-size:clamp(40px,10.8vw,74px);letter-spacing:-.075em;line-height:1.16;white-space:normal}.hero-detail{position:relative;top:auto;left:auto;order:4;width:100%;padding:28px 24px 38px;gap:15px}.hero-detail h2{font-size:25px;gap:12px}.hero-detail h2:before{width:38px}.agency{font-size:13px}.hero .intro{font-size:17px}.hero .intro br:first-child{display:none}.hero .button{font-size:17px;min-height:62px;padding:18px 15px;margin-top:3px}.hero-secondary{font-size:15px}.image-note{position:relative;right:auto;bottom:auto;order:3;padding:5px 18px;text-align:right;font-size:10px}.about{padding-top:55px;padding-bottom:100px;min-height:480px}.about h2,.process h2,.final-line h2{font-size:clamp(36px,10.6vw,64px);letter-spacing:-.065em}.eyebrow{font-size:15px;gap:12px}.eyebrow:before{width:35px}.about-number{font-size:240px;top:150px;right:-12%;opacity:.27}.about p:not(.eyebrow){font-size:17px;max-width:290px}.about:after{height:60px}.process{padding-top:55px;padding-bottom:70px}.steps{display:flex;flex-direction:column;gap:32px;margin-top:35px}.steps li{border-right:0;display:grid;grid-template-columns:74px 1fr;padding:0;gap:20px;align-items:start}.step-line{margin:0;max-width:100%}.step-line span{font-size:66px;line-height:1.1}.steps h3{font-size:22px;margin-bottom:10px}.steps p{font-size:15px}.steps li.arrived .step-line{animation-delay:0ms}.final-line{padding:70px 0 48px;clip-path:polygon(0 0,100% 4%,100% 100%,0 100%)}.final-line p{font-size:16px;margin:22px 0}.button{font-size:17px;min-height:60px;padding:16px 22px}.final-line .button{min-width:0;width:100%}.final-secondary{margin:18px auto 0;font-size:14px}.footer{padding:30px 24px;flex-direction:column;align-items:start;gap:24px}.footer .brand{font-size:20px}.footer nav{flex-direction:column;gap:14px}.footer nav a{min-height:30px}.subpage{padding-top:38px;padding-bottom:50px;gap:24px}.subpage:before{height:200px;width:75%}.subpage h1{font-size:clamp(39px,11vw,60px)}.subpage>h2{font-size:28px}.subpage>p:not(.eyebrow):not(.breadcrumb){font-size:17px}.breadcrumb{font-size:12px}.beauty-categories{grid-template-columns:1fr;gap:24px;margin:12px 0}.beauty-categories section:before{font-size:58px}.beauty-categories h2{font-size:32px}.beauty-cta{gap:20px}.beauty-cta .button{font-size:16px;width:100%}.company{padding-left:24px;padding-right:24px}.company-table>div{display:flex;flex-direction:column;gap:8px;padding:19px 0}.company-table dt{font-size:15px}.company-table dd{font-size:16px}.contact-main:before{height:400px}.contact-grid{grid-template-columns:1fr;gap:32px;padding-top:35px;padding-bottom:45px}.contact-intro{gap:25px}.contact-intro h1{font-size:clamp(38px,11vw,58px)}.contact-intro p{font-size:17px}.contact-intro>a{font-size:15px}.contact-form{padding:24px 20px;gap:24px}.contact-form .button{font-size:16px}.field label{font-size:15px}.desktop{display:none}.mobile,.mobile-break{display:block}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hero-color{position:absolute;left:0;top:0;width:59%;height:53%;background:linear-gradient(90deg,#f7b9cf 0%,#f7b9cf 72%,transparent 100%);mask-image:linear-gradient(#000 0 82%,transparent 100%)}
.button .button-label{font-size:inherit}
.button .cta-label,.button .cta-label span{font-size:inherit}.cta-label span{display:inline-block}
@media(max-width:700px){.final-line .button{padding-left:15px;padding-right:15px;gap:14px}}
@media(max-width:700px){.final-line h2{font-size:clamp(25px,8.2vw,40px)}}
@media(max-width:700px){.hero-color{display:none}.hero-photo{height:300px}.hero .intro br:first-child{display:initial}.hero .button,.button,.beauty-cta .button,.contact-form .button{font-size:20px}}

/* 2026-10-14: live scenes and overlay navigation */
.hero-carousel{position:absolute;inset:0;background:var(--brand)}
.hero-slides,.hero-slide,.slide-photo{position:absolute;inset:0;overflow:hidden}
.hero-slides{touch-action:pan-y}
.hero-slide{opacity:0;transform:translateX(5%);transition:opacity .85s ease,transform 1.1s cubic-bezier(.22,1,.36,1);pointer-events:none}
.hero-slide.active{opacity:1;transform:translateX(0);pointer-events:auto}
.slide-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% center}



.hero-carousel-controls{display:none;position:absolute;z-index:6;right:24px;bottom:48px;align-items:center;gap:5px;padding:6px;background:var(--paper);border:1px solid #35252d;box-shadow:4px 4px 0 #35252d}
.ready .hero-carousel-controls{display:flex}
.hero-carousel-controls button{border:0;background:transparent;min-width:44px;min-height:44px;padding:8px;font-size:15px;font-weight:700}
.hero-carousel-controls button:hover{background:var(--brand);color:var(--ink)}
.slide-count{font-size:13px;font-weight:700;padding:0 9px;font-variant-numeric:tabular-nums}
.slide-caption{position:absolute;right:24px;bottom:120px;background:var(--ink);color:var(--paper);padding:6px 14px;transform:rotate(-3deg);font-weight:700;font-size:18px}
.hero-color,.hero-plane{pointer-events:none}
.hero h1{pointer-events:none}
@keyframes live-arrive{from{transform:translateY(40px) rotate(1.5deg);opacity:.35}to{transform:translateY(0) rotate(0);opacity:1}}
@keyframes live-outline{from{transform:translateX(80px) rotate(0);opacity:.12}to{transform:translateX(0) rotate(-6deg);opacity:.65}}
.motion-arrived{animation:live-arrive 900ms cubic-bezier(.2,.8,.2,1) both}
.about-number.motion-arrived{animation:live-outline 1400ms cubic-bezier(.2,.8,.2,1) both}
.hero h1{animation:live-arrive 950ms cubic-bezier(.2,.8,.2,1) both}
.steps li.arrived .step-line{animation-duration:950ms;animation-delay:calc(var(--step)*180ms)}
.header nav a{transition:color .2s,transform .2s}.header nav a:hover{color:var(--rose);transform:translateY(-2px)}
@media(max-width:1100px) and (min-width:701px){.header nav{gap:8px;padding:20px 12px;font-size:11px}.header nav a+a:before{margin-right:8px}.header .brand{font-size:20px}}
@media(max-width:700px){
 .header.enhanced{height:80px;min-height:80px;flex-wrap:nowrap}
 .header.enhanced nav{position:absolute;top:100%;left:0;right:0;width:100%;padding:12px 22px 22px;background:var(--paper);border-bottom:3px solid var(--brand);box-shadow:0 15px 24px #35252d24;max-height:calc(100svh - 80px);overflow-y:auto;overscroll-behavior:contain;transform-origin:top}
 .header.enhanced nav.open{animation:menu-unfold 280ms ease-out both}
 .header nav a{border-bottom:1px solid var(--line);padding:15px 10px}
 .hero-carousel{position:relative;inset:auto;order:2;height:340px;width:100%;flex-shrink:0}
 .hero-carousel-controls{right:16px;bottom:16px;gap:2px;padding:3px;box-shadow:3px 3px 0 #35252d}
 .hero-carousel-controls button{font-size:14px}.slide-count{font-size:12px}
 .slide-caption{right:16px;bottom:84px;font-size:14px}
 .slide-photo img{object-position:72% center}
 .steps li.arrived .step-line{animation-delay:0ms}
 .about-number.motion-arrived{animation-name:live-arrive;opacity:.27;transform:rotate(-6deg)}
}
@keyframes menu-unfold{from{opacity:0;transform:translateY(-12px) scaleY(.96)}to{opacity:1;transform:translateY(0) scaleY(1)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.hero-slide{transform:none}.motion-arrived{opacity:1}.about-number.motion-arrived{opacity:.27}}


/* Subtle controls at the lower left of the visible photograph. */
.hero-carousel-controls{left:calc(48% + 16px);right:auto;bottom:20px;gap:0;padding:0 5px;background:rgb(255 246 249 / 32%);border:0;border-radius:24px;box-shadow:none;backdrop-filter:blur(5px);color:#35252d}
.hero-carousel-controls button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:14px;font-weight:400;border-radius:50%;transition:background .18s}
.hero-carousel-controls button:hover,.hero-carousel-controls button:focus-visible{background:rgb(255 246 249 / 75%);color:#35252d}
.slide-count{font-size:10px;font-weight:400;padding:0 7px}
.hero-carousel-controls [data-play] span{display:inline-block;font-size:15px;line-height:1}
@media(max-width:700px){.hero-carousel-controls{left:12px;right:auto;bottom:12px;padding:0 3px;gap:0;box-shadow:none}.hero-carousel-controls button{font-size:13px}.slide-count{font-size:10px;padding:0 5px}}

/* Pink focus ring remains visible on the dark rose form surface. */
.contact-form :focus-visible{outline-color:var(--brand)}

/* Keep the recording phone in frame in the drawing scene. */
.hero-slide:nth-child(3) .slide-photo img{object-position:right center}



@media(min-width:701px) and (max-width:1100px){.hero-slide:nth-child(3) .slide-photo img{object-position:35% center}}

/* All six scenes use one full-width photograph behind the existing paper planes. */
@media(min-width:1101px){.hero-detail{width:min(35.4%,620px)}}

/* Keep eyes below the header on wide cover crops. */
@media(min-width:1681px){.hero-slide .slide-photo img{object-position:68% 20%}.hero-slide:nth-child(3) .slide-photo img{object-position:right 20%}}

/* Keep the filming phones visible beside the outdoor hobby demonstrations. */
.hero-slide:nth-child(n+5) .slide-photo img{width:100%;object-position:right center}
@media(min-width:701px) and (max-width:1100px){.hero-slide:nth-child(5) .slide-photo img{width:110%}}
@media(min-width:1681px){.hero-slide:nth-child(n+5) .slide-photo img{object-position:right 20%}}

.hero-slide:nth-child(6) .slide-photo img{object-position:68% center}
@media(min-width:1681px){.hero-slide:nth-child(6) .slide-photo img{object-position:68% 20%}}
