@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** TrueEmotion page motion styles
************************************/
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:transparent;pointer-events:none}.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--red),#ffb35c);box-shadow:0 0 18px rgba(216,20,58,.65)}
.brand small{font-size:10px;letter-spacing:.1em;color:inherit;opacity:.62;margin-left:8px}.manga-lp .site-header{background:rgba(12,13,19,.88);color:#fff;border-color:rgba(255,255,255,.12);backdrop-filter:blur(20px)}.manga-lp .site-header nav a{opacity:.72;transition:opacity .2s,color .2s}.manga-lp .site-header nav a:hover{opacity:1;color:#ff5b72}.manga-lp .header-cta{background:#fff;color:#11131d}
.immersive-hero{--mx:0px;--my:0px;max-width:none;min-height:calc(100svh - 76px);grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:4vw;margin:0;padding:clamp(64px,7vw,110px) max(24px,calc((100vw - 1320px)/2)) 92px;background:radial-gradient(circle at 82% 28%,rgba(216,20,58,.2),transparent 28%),radial-gradient(circle at 72% 82%,rgba(58,48,117,.5),transparent 34%),#0d0e15;color:#fff;position:relative;overflow:hidden}.immersive-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to right,transparent 5%,#000 55%,transparent)}.immersive-hero .hero-copy{position:relative;z-index:6}.immersive-hero .eyebrow{color:#fff}.live-dot{display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:50%;background:#ff3b58;box-shadow:0 0 0 6px rgba(255,59,88,.13);animation:pulse 1.9s ease-in-out infinite}.immersive-hero h1{font-size:clamp(54px,6.1vw,98px);max-width:830px}.immersive-hero h1 span{display:block;color:#ff3b58;text-shadow:0 0 48px rgba(216,20,58,.22)}.immersive-hero .lead{color:#c9c9d2;max-width:670px}.immersive-hero .text-link{border-color:#fff}.immersive-hero .trust{color:#aaaab7}.hero-stage{height:min(690px,72vw);min-height:570px;position:relative;z-index:4;transform:translate3d(calc(var(--mx)*.25),calc(var(--my)*.25),0);transition:transform .18s ease-out}.stage-glow{position:absolute;width:58%;aspect-ratio:1;border-radius:50%;right:12%;top:19%;background:rgba(255,50,83,.25);filter:blur(80px);animation:breathe 6s ease-in-out infinite}.stage-frame{position:absolute;margin:0;overflow:hidden;background:#262735;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 80px rgba(0,0,0,.45)}.stage-frame img{width:100%;height:100%;object-fit:cover}.frame-main{z-index:3;width:76%;height:75%;right:6%;top:8%;clip-path:polygon(7% 0,100% 0,94% 100%,0 94%);transform:rotate(1.7deg)}.frame-main img{animation:heroZoom 11s ease-in-out infinite alternate}.frame-main figcaption{position:absolute;left:24px;bottom:28px;padding:7px 13px;background:rgba(10,10,16,.8);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em}.frame-a{z-index:4;width:34%;height:34%;left:0;top:3%;clip-path:polygon(0 8%,92% 0,100% 92%,8% 100%);animation:floatA 8s ease-in-out infinite}.frame-b{z-index:5;width:38%;height:35%;right:0;bottom:1%;clip-path:polygon(7% 0,100% 10%,93% 100%,0 91%);animation:floatB 9.5s ease-in-out infinite}.stage-caption{position:absolute;z-index:6;left:5%;bottom:5%;margin:0;color:#fff;font-size:12px;line-height:1.35;font-weight:900;letter-spacing:.18em;writing-mode:vertical-rl}.stage-caption span{color:#ff3b58;margin-bottom:10px}.scroll-cue{position:absolute;left:max(24px,calc((100vw - 1320px)/2));bottom:26px;color:#a9a9b4;font-size:10px;font-weight:800;letter-spacing:.18em;display:flex;gap:12px;align-items:center}.scroll-cue span{display:block;width:58px;height:1px;background:#777885;position:relative;overflow:hidden}.scroll-cue span:after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:scrollLine 2.2s ease-in-out infinite}
.motion-marquee{overflow:hidden;background:#ff3655;color:#fff;border-block:1px solid rgba(255,255,255,.28);height:66px;display:flex;align-items:center}.motion-marquee-track{display:flex;align-items:center;gap:28px;width:max-content;white-space:nowrap;font-weight:950;font-size:20px;letter-spacing:.08em;animation:marquee 26s linear infinite}.motion-marquee-track span{display:inline-block}.motion-marquee-track i{font-style:normal;color:#11131d}
.corporate .site-header{background:rgba(12,13,19,.88);color:#fff;border-color:rgba(255,255,255,.12);backdrop-filter:blur(20px)}.corporate .header-cta{background:#fff;color:#11131d!important}.corp-hero-motion{max-width:none;min-height:calc(100svh - 76px);grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);padding:clamp(64px,7vw,110px) max(24px,calc((100vw - 1320px)/2)) 90px;background:radial-gradient(circle at 78% 33%,rgba(216,20,58,.22),transparent 30%),#0d0e15;color:#fff;position:relative;overflow:hidden}.corp-hero-motion:before{content:"TRUEEMOTION";position:absolute;left:-.02em;bottom:-.3em;color:rgba(255,255,255,.028);font-size:clamp(110px,18vw,280px);font-weight:950;letter-spacing:-.08em;white-space:nowrap}.corp-hero-motion>div:first-child{position:relative;z-index:3}.corp-hero-motion>div:first-child>p:not(.eyebrow){color:#c9c9d2}.corp-hero-motion .text-link{border-color:#fff}.corp-visual-stack{height:min(680px,70vw);min-height:540px;position:relative;z-index:2}.corp-visual-stack figure{position:absolute;margin:0;overflow:hidden;border-radius:0;background:#242633;box-shadow:0 30px 80px rgba(0,0,0,.48)}.corp-visual-stack img{width:100%;height:100%;object-fit:cover}.corp-visual-main{width:78%;height:77%;right:5%;top:5%;clip-path:polygon(4% 0,100% 4%,95% 100%,0 94%);transform:rotate(1.5deg)}.corp-visual-main img{animation:heroZoom 12s ease-in-out infinite alternate}.corp-visual-sub{width:44%;height:32%;left:0;bottom:2%;border:1px solid rgba(255,255,255,.18);clip-path:polygon(0 8%,94% 0,100% 92%,7% 100%);animation:floatA 8s ease-in-out infinite}.corp-visual-stack>span{position:absolute;right:0;bottom:6%;z-index:4;background:#ff3655;color:#fff;padding:20px 18px;font-size:18px;font-weight:900;line-height:1.35;letter-spacing:.04em;transform:rotate(-2deg)}
.work-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}.work-card img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .5s}.work-card:hover{transform:translateY(-10px);box-shadow:0 28px 70px rgba(0,0,0,.3)}.work-card:hover img{transform:scale(1.045);filter:saturate(1.08)}.reveal{opacity:0;transform:translateY(44px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}.reveal-sequence>*{opacity:0;transform:translateY(54px) scale(.98);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal-sequence.is-visible>*{opacity:1;transform:none}.reveal-sequence.is-visible>*:nth-child(2){transition-delay:.12s}.reveal-sequence.is-visible>*:nth-child(3){transition-delay:.24s}
@keyframes pulse{0%,100%{transform:scale(.9);box-shadow:0 0 0 5px rgba(255,59,88,.1)}50%{transform:scale(1.16);box-shadow:0 0 0 10px rgba(255,59,88,.02)}}@keyframes breathe{0%,100%{transform:scale(.88);opacity:.42}50%{transform:scale(1.1);opacity:.8}}@keyframes heroZoom{0%{transform:scale(1.01)}100%{transform:scale(1.095)}}@keyframes floatA{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(-8px,18px,0) rotate(-1deg)}}@keyframes floatB{0%,100%{transform:translate3d(0,0,0) rotate(3deg)}50%{transform:translate3d(10px,-20px,0) rotate(1deg)}}@keyframes scrollLine{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:900px){.site-header nav{display:none}.site-header{height:64px;padding:0 18px}.header-cta{margin-left:auto;padding:9px 15px}.hero,.corp-hero{grid-template-columns:1fr;padding:52px 20px 72px;gap:34px;min-height:0}.hero h1,.corp-hero h1{font-size:46px}.hero-visual{max-height:560px}.hero-visual img{aspect-ratio:1/1.1}.section-pad{padding:78px 20px}.section-head{display:block}.section-head>p{margin-top:20px}.problem-grid,.work-grid,.story-steps,.plan-grid,.service-stack{grid-template-columns:1fr}.work-card.featured img,.work-card img{aspect-ratio:16/10}.usecase-list{grid-template-columns:1fr}.usecase-list article,.usecase-list article:nth-child(odd),.usecase-list article:nth-child(even){padding:24px 0;border-left:0}.plan.recommended{transform:none}.flow-list{grid-template-columns:1fr 1fr}footer{grid-template-columns:1fr;gap:12px;text-align:center;padding-bottom:92px}footer p,footer p:last-child{text-align:center}.mobile-cta{display:flex;position:fixed;right:14px;bottom:14px;left:14px;z-index:40;background:var(--red);color:#fff;height:54px;align-items:center;justify-content:center;border-radius:999px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.25)}}
@media(max-width:520px){.hero h1,.corp-hero h1{font-size:39px}.lead,.corp-hero>div>p:not(.eyebrow){font-size:16px}.button{width:100%;text-align:center;padding:0 18px}.trust{display:grid;gap:7px}.section-pad h2{font-size:35px}.problem-grid p{padding:24px}.usecase-list article{grid-template-columns:1fr;gap:4px}.flow-list{grid-template-columns:1fr}.plan h3{font-size:48px}}
@media(max-width:1100px){.immersive-hero{grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr)}.immersive-hero h1{font-size:clamp(49px,6.2vw,72px)}.hero-stage{min-height:520px;height:590px}}
@media(max-width:900px){.brand small{display:none}.manga-lp .site-header{position:sticky}.immersive-hero{grid-template-columns:1fr;padding:66px 20px 82px;gap:30px;min-height:0}.immersive-hero h1{font-size:clamp(47px,12vw,74px)}.immersive-hero .lead{font-size:17px}.hero-stage{height:min(128vw,650px);min-height:460px;width:min(100%,680px);margin-inline:auto}.frame-main{width:78%;height:74%;right:5%;top:10%}.frame-a{width:36%;height:32%;top:1%}.frame-b{width:39%;height:34%;bottom:0}.scroll-cue{display:none}.motion-marquee{height:56px}.motion-marquee-track{font-size:16px;gap:20px}.stage-caption{left:1%}.corp-hero-motion{grid-template-columns:1fr;padding:66px 20px 82px;gap:28px;min-height:0}.corp-visual-stack{width:min(100%,680px);height:min(122vw,620px);min-height:450px;margin-inline:auto}.corp-visual-main{width:82%;right:2%}.corp-visual-sub{width:45%}}
@media(max-width:520px){.immersive-hero{padding-top:48px}.immersive-hero h1{font-size:43px}.hero-stage{min-height:400px;height:112vw}.frame-main{width:84%;right:0}.frame-a{width:40%;height:29%}.frame-b{width:44%;height:31%}.stage-caption{display:none}.motion-marquee{height:50px}.motion-marquee-track{font-size:14px}.live-dot{margin-left:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Mobile menu works without page JavaScript on WordPress. */
.menu-switch{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:900px){.menu-toggle{margin-left:auto!important;cursor:pointer}.menu-switch:focus-visible + .menu-toggle{outline:2px solid #fff;outline-offset:2px}.menu-switch:checked + .menu-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}.menu-switch:checked + .menu-toggle span:nth-child(2){opacity:0}.menu-switch:checked + .menu-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}.menu-switch:checked ~ nav{display:grid!important;transform:none!important;opacity:1!important;pointer-events:auto!important}}
