/* ================= TOP PAGE ================= */
/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink)}
.hero-img{display:block;width:100%;height:auto}
.hero-missing{display:none}
.hero-missing .sp{display:none}
@media (max-width:820px){.hero-missing .pc{display:none}.hero-missing .sp{display:inline}.hero.is-missing .hero-missing{aspect-ratio:9/16}}
.hero.is-missing .hero-img{display:none}
.hero.is-missing .hero-missing{display:grid;place-items:center;aspect-ratio:16/9;color:#fff;font-weight:700;font-size:clamp(14px,1.4vw,20px);opacity:.7}

/* ---------- concept ---------- */
.concept{position:relative;height:calc(500*var(--u))}
.concept-art{position:absolute;right:0;top:calc(10*var(--u));width:calc(935*var(--u));height:calc(470*var(--u));object-fit:cover;object-position:40% 50%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%);mask-image:linear-gradient(to right,transparent 0,#000 9%)}
.concept-text{position:absolute;left:calc(78*var(--u));top:calc(84*var(--u));width:calc(520*var(--u));z-index:2}
.concept-text .sec-title{font-size:calc(42*var(--u));margin-top:calc(-2*var(--u))}
.concept-text p{font-size:calc(15*var(--u));line-height:1.85;font-weight:500;margin-top:calc(18*var(--u));color:#3a3f45}
.concept-text .btn{margin-top:calc(24*var(--u));height:calc(46*var(--u));padding:0 calc(40*var(--u));font-size:calc(15*var(--u))}
.concept-hand{position:absolute;left:calc(1010*var(--u));top:calc(96*var(--u));font-family:var(--hand);color:var(--ink-deep);font-size:calc(40*var(--u));line-height:1.3;transform:rotate(-12deg);transform-origin:left top;z-index:2}
.concept-hand .l2{padding-left:calc(28*var(--u))}
.concept-hand .l3{margin-left:calc(-6*var(--u))}
.concept-hand .under{display:block;width:calc(270*var(--u));height:calc(12*var(--u));margin:calc(4*var(--u)) 0 0 calc(-10*var(--u))}

/* ---------- service ---------- */
.service{height:calc(620*var(--u));margin-top:calc(-26*var(--u))}
.service-art{position:absolute !important;right:0;top:calc(30*var(--u));width:calc(610*var(--u));height:calc(566*var(--u));object-fit:cover;object-position:45% 50%;z-index:1;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%);mask-image:linear-gradient(to right,transparent 0,#000 18%)}
.service-head{position:absolute !important;left:calc(82*var(--u));top:calc(64*var(--u))}
.service-head .sec-title{color:#fff;font-size:calc(38*var(--u))}
.service-head p{font-size:calc(16*var(--u));font-weight:500;line-height:1.75;margin-top:calc(14*var(--u));color:#eef0f2}
.service-cards{position:absolute !important;left:calc(82*var(--u));top:calc(258*var(--u));display:flex;gap:calc(22*var(--u))}
.s-card{width:calc(244*var(--u));height:calc(210*var(--u));background:#fff;border-radius:calc(12*var(--u));color:var(--ink);text-align:center;padding:calc(30*var(--u)) calc(16*var(--u)) 0;display:flex;flex-direction:column;align-items:center;box-shadow:0 calc(8*var(--u)) calc(24*var(--u)) rgba(0,0,0,.25)}
.s-card svg{width:calc(68*var(--u));height:calc(55*var(--u));flex:none}
.s-card h3::after{content:"";display:block;width:calc(24*var(--u));height:2px;background:var(--pink);margin:calc(10*var(--u)) auto 0;border-radius:2px}
.s-card h3{font-size:calc(20*var(--u));font-weight:900;margin-top:calc(16*var(--u));letter-spacing:.04em}
.s-card p{font-size:calc(13.5*var(--u));color:var(--muted);line-height:1.75;margin-top:calc(12*var(--u));font-weight:500}
.service-more{position:absolute !important;left:calc(82*var(--u));top:calc(506*var(--u));height:calc(50*var(--u));padding:0 calc(40*var(--u));font-size:calc(15*var(--u));border:1.5px solid rgba(255,255,255,.9);color:#fff;background:rgba(255,255,255,.04)}
.service-more:hover{background:#fff;color:var(--ink)}
.service-hand{position:absolute !important;left:calc(1150*var(--u));top:calc(92*var(--u));font-family:var(--hand);color:var(--ink-deep);font-size:calc(33*var(--u));line-height:1.28;transform:rotate(-14deg);transform-origin:left top;z-index:3;white-space:nowrap}
.service-hand .under{display:block;width:calc(210*var(--u));height:calc(12*var(--u));margin-top:calc(6*var(--u))}

/* ---------- why ---------- */
.why{position:relative;height:calc(600*var(--u));padding:calc(30*var(--u)) calc(48*var(--u)) 0}
.why-head{position:relative;display:inline-block;margin:calc(10*var(--u)) 0 0 calc(36*var(--u));transform:rotate(-5deg);transform-origin:left bottom}
.why-head .script{font-size:calc(66*var(--u));margin-left:calc(-14*var(--u))}
.why-head .sec-title{font-size:calc(54*var(--u));letter-spacing:.03em;margin-top:calc(-20*var(--u));margin-left:calc(38*var(--u))}
.why-head .sec-sub{font-size:calc(19*var(--u));font-weight:500;letter-spacing:.14em;margin:calc(6*var(--u)) 0 0 calc(34*var(--u))}
.why-head .brush{display:block;width:calc(420*var(--u));height:calc(24*var(--u));margin:calc(2*var(--u)) 0 0 calc(230*var(--u));transform:rotate(-4deg)}
.why-hand{position:absolute;right:calc(64*var(--u));top:calc(26*var(--u));font-size:calc(46*var(--u));line-height:1.2;transform:rotate(-10deg);text-align:left}
.why-hand .brush{display:block;width:calc(250*var(--u));height:calc(24*var(--u));margin:calc(6*var(--u)) 0 0 calc(-30*var(--u))}
.why-cards{display:flex;gap:calc(18*var(--u));margin-top:calc(24*var(--u))}
.w-card{flex:1;background:#fff;border-radius:calc(16*var(--u));overflow:hidden;box-shadow:0 calc(8*var(--u)) calc(24*var(--u)) rgba(30,38,45,.06);text-align:center}
.w-card .pic{position:relative;aspect-ratio:452/305;background:#F7F7F6}
.w-card .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.w-card .pic.is-missing img{display:none}
.w-card .pic.is-missing::after{content:attr(data-file) " を配置";position:absolute;inset:0;display:grid;place-items:center;font-size:calc(13*var(--u));color:#aaa;font-family:var(--en)}
.w-card .txt{padding:calc(18*var(--u)) calc(12*var(--u)) calc(24*var(--u))}
.w-card h3{font-size:calc(23*var(--u));font-weight:900;color:var(--ink);letter-spacing:.06em}
.w-card p{font-size:calc(15*var(--u));color:#3d4249;line-height:1.75;margin-top:calc(10*var(--u));font-weight:500;letter-spacing:.08em}

/* ---------- talents (pickup livers) ---------- */
.talents{position:relative;height:calc(640*var(--u));padding:calc(34*var(--u)) calc(28*var(--u)) 0}
.lv-head{position:relative;height:calc(150*var(--u))}
.lv-title{position:absolute;left:calc(36*var(--u));top:0}
.lv-title .script{font-size:calc(62*var(--u))}
.lv-title .sec-title{font-size:calc(46*var(--u));letter-spacing:.02em;margin:calc(-16*var(--u)) 0 0 calc(62*var(--u));transform:rotate(-3deg);transform-origin:left center}
.lv-title .brush{display:block;width:calc(200*var(--u));height:calc(16*var(--u));margin:calc(0*var(--u)) 0 0 calc(300*var(--u));transform:rotate(-6deg)}
.lv-sub{position:absolute;left:calc(614*var(--u));top:calc(46*var(--u));font-family:var(--hand);font-size:calc(19*var(--u));color:var(--ink-deep);transform:rotate(-6deg);transform-origin:left center;white-space:nowrap;-webkit-text-stroke:calc(.5*var(--u)) currentColor}
.lv-sub .brush{display:block;width:100%;height:calc(12*var(--u));margin-top:calc(2*var(--u))}
.lv-hand{position:absolute;left:calc(1086*var(--u));top:calc(0*var(--u));font-size:calc(31*var(--u));line-height:1.2;transform:rotate(-12deg);-webkit-text-stroke:calc(.6*var(--u)) currentColor}
.lv-hand .crown{position:absolute;right:calc(-58*var(--u));top:calc(-6*var(--u));width:calc(40*var(--u));height:calc(30*var(--u))}
.lv-hand .brush{display:block;width:calc(160*var(--u));height:calc(14*var(--u));margin:calc(2*var(--u)) 0 0 calc(20*var(--u))}
.lv-more{position:absolute;right:calc(10*var(--u));top:calc(76*var(--u));display:flex;align-items:center;justify-content:center;width:calc(250*var(--u));height:calc(66*var(--u));color:#fff;font-weight:700;font-size:calc(15*var(--u));background-size:100% 100%;transform:rotate(-6deg);transition:scale .2s}
.lv-more:hover{scale:1.05}
.lv-list{list-style:none;display:flex;justify-content:space-between;margin-top:calc(28*var(--u))}
.lv-list li{width:calc(344*var(--u))}
.lv-card{--accent:#FE1179;--wash:rgba(254,17,121,.13);position:relative;display:block;height:calc(375*var(--u));rotate:var(--rot,0deg);color:var(--ink-deep);transition:translate .25s}
.lv-card.blue{--accent:#2B7FE8;--wash:rgba(43,127,232,.13)}
.lv-card:hover{translate:0 -6px}
.lv-frame{position:absolute;inset:0;background:#FEFEFD;border:1px solid #E4E2DE;box-shadow:0 calc(10*var(--u)) calc(22*var(--u)) rgba(30,38,45,.13),0 1px 2px rgba(0,0,0,.06);
  background-image:radial-gradient(ellipse at 20% 30%,var(--wash),transparent 55%),radial-gradient(ellipse at 90% 80%,rgba(0,0,0,.025),transparent 60%)}
.lv-photo{position:absolute;left:calc(14*var(--u));right:calc(14*var(--u));top:calc(14*var(--u));height:calc(238*var(--u));clip-path:inset(-60px -24px 0 -24px);z-index:2}
.lv-photo img{position:absolute;left:50%;bottom:0;height:120%;width:auto;max-width:none;translate:-50% 0}
.lv-photo.is-missing img{display:none}
.lv-photo.is-missing::after{content:attr(data-file) "（背景透過）";position:absolute;inset:0;border:1.5px dashed #d4d1cc;display:grid;place-items:center;font-size:calc(12*var(--u));color:#aaa;font-family:var(--en)}
.lv-quote{position:absolute;z-index:3;font-family:var(--hand);font-size:calc(21*var(--u));line-height:1.3;color:var(--ink-deep);-webkit-text-stroke:calc(.4*var(--u)) currentColor;transform:rotate(-8deg)}
.lv-quote .ic{color:var(--accent)}
.lv-tag{position:absolute;z-index:4;left:calc(34*var(--u));top:calc(222*var(--u));background:var(--accent);color:#fff;font-size:calc(14*var(--u));font-weight:700;padding:calc(4*var(--u)) calc(16*var(--u));border-radius:calc(4*var(--u));rotate:-3deg;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.lv-info{position:absolute;z-index:3;left:calc(26*var(--u));right:calc(18*var(--u));top:calc(262*var(--u));display:flex;gap:calc(10*var(--u))}
.lv-name{font-family:"Permanent Marker",var(--hand);font-weight:800;font-size:calc(40*var(--u));-webkit-text-stroke:calc(.8*var(--u)) currentColor;line-height:1;color:#4a4d52;rotate:-4deg;white-space:nowrap}
.lv-id{display:block;font-family:var(--hand);font-size:calc(15*var(--u));color:#6d7076;margin-top:calc(8*var(--u));rotate:-4deg;border-bottom:2px solid var(--wash);padding-bottom:calc(2*var(--u));width:max-content}
.lv-msg{flex:1;font-family:var(--hand);font-size:calc(14*var(--u));white-space:nowrap;line-height:1.55;margin-top:calc(12*var(--u));rotate:-6deg;-webkit-text-stroke:calc(.3*var(--u)) currentColor}
.lv-msg::after{content:"";display:block;height:calc(4*var(--u));margin-top:calc(4*var(--u));background:var(--accent);border-radius:4px;opacity:.75;width:90%}
.lv-deco{position:absolute;inset:calc(140*var(--u)) 0 0 0;pointer-events:none;z-index:0}

/* ---------- news ---------- */
.news{position:relative;height:calc(380*var(--u));display:flex;align-items:flex-start;padding:calc(56*var(--u)) 0 0 calc(108*var(--u))}
.news-head{width:calc(270*var(--u));flex:none}
.news-head .script{font-size:calc(44*var(--u));margin-left:calc(-30*var(--u))}
.news-head .sec-title{font-size:calc(34*var(--u));margin:calc(-8*var(--u)) 0 0 calc(10*var(--u))}
.news-body{position:relative;flex:1;padding-right:calc(210*var(--u))}
.news-lead{font-size:calc(16*var(--u));font-weight:500;color:#444;padding-top:calc(6*var(--u))}
.news-list{display:flex;list-style:none;margin-top:calc(28*var(--u));border-top:1px solid #d6d6d3;border-bottom:1px solid #d6d6d3}
.news-list li{flex:1;padding:calc(30*var(--u)) calc(30*var(--u)) calc(34*var(--u));border-left:1px solid #d6d6d3;min-height:calc(150*var(--u));transition:background .2s}
.news-list li:first-child{border-left:none;padding-left:calc(4*var(--u))}
.news-list li:hover{background:rgba(255,255,255,.6)}
.news-list time{font-family:var(--en);font-size:calc(13.5*var(--u));color:#666;font-weight:500;letter-spacing:.04em}
.news-list .cat{display:inline-block;font-size:calc(12.5*var(--u));font-weight:700;padding:calc(1*var(--u)) calc(16*var(--u));border-radius:999px;margin-left:calc(14*var(--u));border:1.5px solid #FFB3CF;color:var(--pink);background:#fff}
.news-list .cat.media{border-color:#9DB9E8;color:#3A6CC7}
.news-list p{font-size:calc(17*var(--u));line-height:1.75;font-weight:500;margin-top:calc(14*var(--u));color:#333}
.news-all{position:absolute;right:calc(96*var(--u));top:calc(214*var(--u));font-size:calc(15*var(--u));font-weight:700;border-bottom:1.5px solid var(--ink);padding-bottom:calc(4*var(--u));display:flex;align-items:center}

/* ---------- hero motion ---------- */
.hero{overflow:hidden}
.hero-img{will-change:scale,translate}
.hero:not(.is-ready) .hero-img{scale:1.18;filter:blur(10px) brightness(1.8)}
.hero.is-ready .hero-img{animation:heroIn 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroIn{0%{scale:1.18;filter:blur(10px) brightness(1.8) saturate(1.4)}45%{filter:blur(0) brightness(1.15)}100%{scale:1;filter:none}}
.hero-flash{position:absolute;inset:0;background:#fff;pointer-events:none;z-index:3;opacity:.95}
.hero.is-ready .hero-flash{animation:flash .7s ease-out both}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.hero-burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;opacity:0}
.hero.is-ready .hero-burst{animation:burst 1.2s cubic-bezier(.2,.7,.3,1) .15s both}
@keyframes burst{0%{opacity:0;scale:1.35}25%{opacity:.85}100%{opacity:0;scale:1}}
.hero::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:18%;z-index:5;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28) 45%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.28) 55%,transparent);
  transform:skewX(-18deg);animation:glint 7s ease-in-out 1.6s infinite}
@keyframes glint{0%{left:-30%}18%,100%{left:130%}}
.hero-petals{position:absolute;inset:0;pointer-events:none;z-index:6}
.hero-petal{position:absolute;top:-6%;width:var(--w,26px);height:calc(var(--w,26px)*.42);border-radius:50% 0;
  background:linear-gradient(90deg,#ffc2dd,#ff6fae);opacity:.85;animation:fall var(--dur,9s) linear var(--delay,0s) infinite}
@keyframes fall{0%{translate:0 0;rotate:0deg}25%{translate:calc(var(--sway)*1) 28vh;rotate:110deg}50%{translate:calc(var(--sway)*-.4) 56vh;rotate:200deg}75%{translate:calc(var(--sway)*.8) 84vh;rotate:300deg}100%{translate:0 115vh;rotate:400deg}}
.hero.is-missing .hero-flash,.hero.is-missing .hero-burst{display:none}

/* ---------- mobile ---------- */
@media (max-width: 820px){
  .service-head p br,.concept-text p br:not(:first-of-type){display:none}
  .concept,.service,.talents{height:auto}
  .concept{padding:20px 0 0}
  .concept-text{position:relative;left:auto;top:auto;width:auto;padding:0 22px}
  .concept-text .sec-title{font-size:28px}.concept-text p{font-size:14px}.concept-text .btn{height:44px;font-size:14px}
  .concept-art{position:relative;width:100%;height:auto;aspect-ratio:611/235;margin-top:24px;-webkit-mask-image:none;mask-image:none}
  .concept-hand{left:auto;right:3vw;top:75px;font-size:3.8vw}
  .concept-hand .under{width:34vw}  .service{margin-top:0;padding:52px 22px 96px}
  .service-head,.service-cards,.service-art,.service-hand{position:relative !important;left:auto;top:auto;right:auto}
  .service-head .sec-title{font-size:26px}.service-head p{font-size:14px}
  .service-cards{flex-direction:column;gap:14px;margin-top:28px}
  .service-more{position:relative !important;left:auto;top:auto;display:flex;width:100%;height:50px;margin-top:26px;font-size:15px}
  .s-card{width:100%;height:auto;padding:24px 16px 22px}.s-card svg{width:48px;height:40px}.s-card h3{font-size:17px}.s-card p{font-size:13px}
  .service-art{width:100%;height:auto;aspect-ratio:411/228;margin:0 0 26px;border-radius:10px;-webkit-mask-image:none;mask-image:none}
  .service-hand{display:none}
  .why{height:auto;padding:36px 22px}
  .why-head{margin-left:0}.why-head .script{font-size:40px;margin-left:0}
  .why-head{margin:0}.why-head .sec-title{font-size:30px;margin:-8px 0 0 16px}.why-head .sec-sub{font-size:12.5px;margin:6px 0 0 12px;letter-spacing:.02em}
  .why-head .brush{width:220px;height:16px;margin:-2px 0 0 90px}
  .why-hand{position:relative;right:auto;top:auto;font-size:26px;margin:18px 0 0 auto;width:max-content}
  .why-hand .brush{width:150px;height:16px}
  .why-cards{flex-wrap:wrap;gap:12px;margin-top:22px}
  .w-card{flex:1 1 calc(50% - 6px)}
  .w-card .txt{padding:12px 8px 16px}.w-card h3{font-size:16px}.w-card p{font-size:12px;letter-spacing:.02em}
  .talents{padding:40px 0 44px}
  .lv-head{height:auto;padding:0 22px}
  .lv-title,.lv-sub,.lv-hand,.lv-more{position:relative;left:auto;right:auto;top:auto}
  .lv-title .script{font-size:40px}.lv-title .sec-title{font-size:27px;margin:-8px 0 0 26px}.lv-title .brush{width:130px;height:12px;margin-left:150px}
  .lv-sub{display:inline-block;font-size:15px;margin-top:14px;white-space:normal}
  .lv-hand{display:none}
  .lv-more{width:220px;height:58px;font-size:14px;margin:14px 0 0 auto}
  .lv-list{overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start;gap:16px;padding:64px 22px 24px;margin-top:0;scrollbar-width:none}
  .lv-list li{flex:none;width:76vw;scroll-snap-align:center}
  .lv-card{height:82vw}
  .lv-photo{height:52vw;top:12px;left:12px;right:12px}
  .lv-quote{font-size:4.2vw}.lv-tag{top:48vw;font-size:12px;left:24px}
  .lv-info{top:57vw;left:20px}.lv-name{font-size:8vw}.lv-id{font-size:12px}.lv-msg{font-size:12.5px}
  .news{height:auto;flex-direction:column;align-items:stretch;padding:44px 22px 56px}
  .news-head{width:auto}.news-head .script{margin-left:0}.news-head .sec-title{font-size:26px;margin-left:30px}
  .news-body{padding:0;margin-top:10px}.news-lead{font-size:13px}
  .news-list{flex-direction:column}
  .news-list{border:none;margin-top:18px}
  .news-list li,.news-list li:first-child{border:none;border-top:1px solid #d6d6d3;padding:18px 0;min-height:0}
  .news-list li:last-child{border-right:none;border-bottom:1px solid #d6d6d3}
  .news-list time,.news-list .cat{font-size:11px}.news-list p{font-size:14px}
  .news-all{position:relative;right:auto;top:auto;display:inline-flex;margin-top:14px;font-size:13px}
}