/* Layout: 薄いグレー一色の地にビビッドなカードを並べ、作品紹介だけ青い円が画面を塗って横スクロールに切り替わる */
:root{
  --bg:#f2f4f7; --ink:#17191d; --sub:#5d6470; --line:#d8dde5; --white:#ffffff;
  --tomato:#e8452c; --ultra:#2152d9; --sky:#2f9ee6; --mustard:#f2b705; --tangerine:#f47a2a;
  --forest:#1f9d6b; --mint:#7fd1b0; --grape:#8a4fd1; --pink:#ef4f86; --char:#2b2e33;
  --f-en:"Lexend","Helvetica Neue",Arial,sans-serif;
  --f-ja:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --e-fade:cubic-bezier(.26,.16,.1,1); --e-move:cubic-bezier(.43,.05,.17,1);
  --e-flip:cubic-bezier(.6,0,.4,1); --e-pop:cubic-bezier(.175,.885,.32,1.275);
  --r:20px; --gut:max(16px, env(safe-area-inset-left, 0px)); --gutR:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ja);font-size:16px;line-height:1.7;letter-spacing:.02em;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--ultra);outline-offset:3px}
.en{font-family:var(--f-en)}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(24px,var(--gut));padding-right:max(24px,var(--gutR))}
.wrap-wide{max-width:1440px;margin:0 auto;padding-left:max(24px,var(--gut));padding-right:max(24px,var(--gutR))}
@media(min-width:768px){.wrap-wide{padding-left:max(64px,var(--gut));padding-right:max(64px,var(--gutR))}.wrap{padding-left:max(40px,var(--gut));padding-right:max(40px,var(--gutR))}}
h1,h2,h3,p{margin:0}
h2,h3{text-wrap:balance}

/* header */
.gh{position:fixed;inset:0 0 auto;z-index:50;color:#fff;mix-blend-mode:difference;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:16px}
.gh__in{display:flex;align-items:center;gap:24px}
.gh__logo{display:block;width:132px;flex:none}
.gh__logo svg{display:block;width:100%;height:auto}
.gh__nav{display:none;margin-left:auto;gap:22px;font-family:var(--f-en);font-weight:500;font-size:13px}
.gh__contact{display:none;border:1.5px solid currentColor;border-radius:999px;padding:7px 18px;font-family:var(--f-en);font-weight:600;font-size:13px;transition:background .4s var(--e-fade),color .4s var(--e-fade)}
.gh__contact:hover{background:#fff;color:#000}
@media(min-width:1024px){.gh__nav,.gh__contact{display:flex}}
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 1s var(--e-move)}
.ul:hover::after,a:hover>.ul::after{transform:scaleX(1);transform-origin:left;transition-duration:.1s}
.menu-btn{margin-left:auto;display:grid;justify-items:center;gap:4px;width:48px;font-family:var(--f-en);font-size:11px;font-weight:500}
@media(min-width:1024px){.menu-btn{margin-left:0}}
.menu-btn__dots{display:flex;gap:4px;height:10px;align-items:center;transition:transform .4s var(--e-move)}
.menu-btn__dots i{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;transition:transform .4s var(--e-move)}
.menu-btn:hover .menu-btn__dots i:nth-child(2),.menu-btn[aria-expanded=true] .menu-btn__dots i:nth-child(2){transform:scale(2.4)}
.menu-btn:hover .menu-btn__dots i:first-child{transform:translateX(3px)}
.menu-btn:hover .menu-btn__dots i:last-child{transform:translateX(-3px)}
.menu-btn[aria-expanded=true] .menu-btn__dots i:first-child{transform:translate(8px,0) scale(0)}
.menu-btn[aria-expanded=true] .menu-btn__dots i:last-child{transform:translate(-8px,0) scale(0)}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:40;pointer-events:none}
.menu__cover{position:absolute;inset:0;background:var(--white);transform:translateY(-100%);transition:transform .6s var(--e-pop)}
.menu__body{position:relative;height:100%;display:grid;align-content:center;gap:4px;opacity:0;transform:translateY(-5%);transition:opacity .6s var(--e-fade),transform .6s var(--e-move);padding:80px max(24px,var(--gutR)) 40px max(24px,var(--gut))}
.menu.is-open{pointer-events:auto}
.menu.is-open .menu__cover{transform:none}
.menu.is-open .menu__body{opacity:1;transform:none;transition-duration:1s;transition-delay:.15s}
.menu__link{display:flex;align-items:baseline;gap:16px;padding:6px 0;border-bottom:1px solid var(--line)}
.menu__link b{font-family:var(--f-en);font-weight:700;font-size:clamp(32px,7vw,64px);line-height:1.2}
.menu__link span{font-size:14px;color:var(--sub)}
.menu.is-open ~ .gh{mix-blend-mode:normal;color:var(--ink)}

/* hero */
.hero{position:relative;min-height:min(100svh,900px);display:grid;overflow:hidden;padding-top:96px}
.hero__grid{display:grid;gap:24px;align-items:end;padding-bottom:88px}
@media(min-width:900px){.hero__grid{grid-template-columns:1fr 1.05fr;align-items:center;padding-bottom:110px}}
.hero__title{font-family:var(--f-en);font-weight:700;font-size:clamp(52px,9.4vw,124px);line-height:.98;letter-spacing:-.01em}
.hero__title .row{display:block;white-space:nowrap}
.sp{display:inline-block;min-width:.24em;transform:translateY(55%);opacity:0;transition:opacity .6s var(--e-fade),transform .6s var(--e-pop);transition-delay:calc(var(--i)*50ms)}
.is-loaded .sp{transform:none;opacity:1}
.hero__copy{margin-top:24px;font-weight:700;font-size:clamp(17px,2vw,24px);letter-spacing:.08em}
.hero__copy .sp{transform:translateY(40%)}
.hero__meta{position:absolute;left:0;right:0;bottom:24px;display:flex;align-items:end;justify-content:space-between;font-family:var(--f-en);font-size:12px;font-weight:500}
.scroll{display:none;justify-items:center;gap:8px}
@media(min-width:768px){.scroll{display:grid;position:absolute;left:50%;bottom:0;transform:translateX(-50%)}}
.scroll__bar{position:relative;width:1px;height:48px;overflow:hidden}
.scroll__bar::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.2}
.scroll__bar::after{content:"";position:absolute;inset:0;background:currentColor;animation:bar 2s var(--e-flip) infinite}
@keyframes bar{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.idx{display:flex;align-items:center;gap:12px;font-size:14px;font-variant-numeric:tabular-nums}
.idx__bar{width:56px;height:2px;background:rgba(23,25,29,.15);overflow:hidden}
.idx__bar i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}

/* hero card stack */
.stage{position:relative;height:clamp(300px,46vw,560px);perspective:1400px}
.stage__tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--e-move)}
.hc{position:absolute;left:50%;top:50%;width:min(64vw,360px);aspect-ratio:4/5;margin-left:calc(min(64vw,360px)/-2);margin-top:calc(min(64vw,360px)*-0.625);transform-style:preserve-3d;transition:transform .9s var(--e-pop),opacity .6s var(--e-fade)}
@media(min-width:900px){.hc{width:min(30vw,360px);margin-left:calc(min(30vw,360px)/-2);margin-top:calc(min(30vw,360px)*-0.625)}}
.hc__face{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--c);transition:transform .8s var(--e-flip);display:grid;grid-template-rows:auto 1fr;padding:14px;gap:12px;color:#fff;box-shadow:0 20px 40px -24px rgba(23,25,29,.45)}
.hc__face--back{transform:rotateY(180deg)}
.hc.is-flip .hc__face--front{transform:rotateY(-180deg)}
.hc.is-flip .hc__face--back{transform:rotateY(0)}
.hc__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px}
.hc__head b{font-family:var(--f-en);font-weight:600;font-size:15px}
.hc__img{border-radius:12px;overflow:hidden;min-height:0}
.hc__img svg{display:block;width:100%;height:100%}
.hc[data-pos="0"]{transform:translate3d(0,0,0) rotate(-3deg);z-index:3}
.hc[data-pos="1"]{transform:translate3d(14%,-4%,-120px) rotate(7deg);z-index:2}
.hc[data-pos="2"]{transform:translate3d(-14%,-6%,-220px) rotate(-11deg);z-index:1}
.hc[data-pos="3"],.hc[data-pos="4"],.hc[data-pos="5"]{transform:translate3d(0,-8%,-320px) rotate(0);opacity:0;z-index:0}
.hc[data-pos="out"]{transform:translate3d(-140%,10%,0) rotate(-24deg);opacity:0;z-index:4}

/* stalker */
.stalker{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:60;display:none;opacity:0;place-content:center;transition:width .4s var(--e-pop),height .4s var(--e-pop),margin .4s var(--e-pop),opacity .3s}
.stalker span{font-size:12px;font-weight:700;color:#000;opacity:0;transition:opacity .3s var(--e-fade);white-space:nowrap}
.stalker.is-live{opacity:1}
.stalker.is-big{width:110px;height:110px;margin:-55px 0 0 -55px}
.stalker.is-big span{opacity:1}
@media(hover:hover) and (pointer:fine){.stalker{display:grid}}

/* section heads */
.sec{padding-block:clamp(88px,12vw,160px)}
.eyebrow{font-family:var(--f-en);font-weight:700;font-size:clamp(15px,1.6vw,20px)}
.lead{font-weight:700;font-size:clamp(24px,3.6vw,46px);line-height:1.45;letter-spacing:.04em}
.hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.hd b{font-family:var(--f-en);font-weight:700;font-size:clamp(40px,6vw,80px);line-height:1}
.hd span{font-size:14px;font-weight:500}

/* about */
.about__head{text-align:center;display:grid;gap:20px;justify-items:center}
.about__body{display:grid;justify-items:center;gap:28px;text-align:center;margin-top:clamp(48px,6vw,80px)}
.about__body p{max-width:34em;font-size:clamp(15px,1.4vw,17px);line-height:2}

/* image marquee */
.mq{overflow:hidden;margin-top:clamp(48px,6vw,80px)}
.mq__track{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq__track.rev{animation-direction:reverse}
.mq.is-paused .mq__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(var(--dist,0px) * -1))}}
.mq__set{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;gap:16px;padding-right:16px;align-items:center;flex:none}
@media(max-width:767px){.mq__set{gap:10px;padding-right:10px}}
.mq__item{grid-row:span 2}
.mq__item.t{grid-row:1}
.mq__item.b{grid-row:2}

/* flip card (generic) */
.flip{position:relative;display:grid;perspective:1200px}
.flip>.f{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r);overflow:hidden;transition:transform .4s var(--e-flip);background:var(--c)}
.flip>.f--b{transform:rotateY(180deg)}
.flip.is-on>.f--a{transform:rotateY(-180deg)}
.flip.is-on>.f--b{transform:rotateY(0)}
@media(hover:hover) and (pointer:fine){.flip.hov:hover>.f--a{transform:rotateY(-180deg)}.flip.hov:hover>.f--b{transform:rotateY(0)}}
.f svg{display:block;width:100%;height:100%}
.cv{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.mini .f{padding:10px}
.mini .f>div{border-radius:10px;overflow:hidden;height:100%}
.mini .f--b .cv{object-fit:contain}

/* services bento */
.svc__top{display:grid;gap:24px;align-items:end}
@media(min-width:900px){.svc__top{grid-template-columns:1fr 1.3fr;gap:64px}}
.svc__top p{color:var(--sub);max-width:36em}
.bento{display:grid;gap:16px;margin-top:48px}
@media(min-width:768px){.bento{grid-template-columns:1.25fr 1fr 1fr;grid-template-areas:"a b c" "a d e" "f f f";gap:20px}}
.bento>*:nth-child(1){grid-area:a}.bento>*:nth-child(2){grid-area:b}.bento>*:nth-child(3){grid-area:c}
.bento>*:nth-child(4){grid-area:d}.bento>*:nth-child(5){grid-area:e}.bento>*:nth-child(6){grid-area:f}
@media(max-width:767px){.bento>*{grid-area:auto!important}}
.sc{color:#fff;min-height:240px}
.sc .f{display:grid;grid-template-rows:auto 1fr;gap:16px;padding:20px}
.sc__t{display:flex;justify-content:space-between;align-items:start;gap:12px}
.sc__t b{display:block;font-family:var(--f-en);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.1}
.sc__t small{display:block;margin-top:6px;font-size:13px;font-weight:500}
.glow{position:relative;border-radius:12px;min-height:170px}
.glow>div{position:absolute;inset:0;border-radius:12px;overflow:hidden}
.glow>div:first-child{filter:blur(4px);transform:scale(1.03);opacity:.75}
.sc .f--b{background:var(--c);display:grid;align-content:space-between;gap:20px;padding:24px}
.sc .f--b h3{font-size:clamp(20px,2vw,26px);font-weight:700}
.sc .f--b p{font-size:15px;line-height:1.9}
.sc--all .f{grid-template-rows:auto;align-items:center;min-height:120px}
.sc--all .f--b{align-content:center}
.vm{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;white-space:nowrap}
.vm__i{position:relative;display:grid;place-items:center;width:22px;height:22px;flex:none}
.vm__i::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;transform:scale(.25);transition:transform .4s var(--e-flip)}
.vm__i svg{position:relative;width:11px;height:11px;transform:translateX(-140%);opacity:0;transition:transform .4s var(--e-flip),opacity .2s;color:var(--c,var(--ink))}
.vmp:hover .vm__i::before,.flip.is-on .vm__i::before{transform:scale(1)}
.vmp:hover .vm__i svg,.flip.is-on .vm__i svg{transform:none;opacity:1}

/* big text marquee */
.bigmq{padding-block:clamp(56px,8vw,120px);overflow:hidden}
.bigmq__row{flex:none}
.bigmq__row{display:flex;align-items:center;gap:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px);white-space:nowrap;font-family:var(--f-en);font-weight:500;font-size:clamp(56px,9vw,124px);line-height:1.15;letter-spacing:-.01em}
.bigmq__row .flip{width:clamp(80px,9vw,128px);aspect-ratio:4/3;flex:none}

/* works (fill circle + pinned) */
.works{position:relative;margin-top:clamp(40px,6vw,80px)}
.works__sticky{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;display:grid;align-content:center}
.works__circle{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;border-radius:50%;background:var(--ultra);transform:scale(var(--cs,0));will-change:transform}
.works__inner{position:relative;min-width:0;width:100vw;color:#fff;opacity:var(--co,0);transition:opacity .3s}
.works__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px}
.works__track{display:flex;gap:20px;padding-left:max(24px,var(--gut));will-change:transform}
@media(min-width:768px){.works__track{padding-left:max(64px,var(--gut))}}
.wk{flex:none;width:min(540px,74vw);aspect-ratio:4/3;color:#fff}
.wk.s{width:min(380px,60vw)}
.wk .f--a{padding:0;position:relative}
.wk .f--a .cap{position:absolute;left:14px;bottom:14px;right:14px;display:flex;justify-content:space-between;align-items:end;gap:12px}
.pill{display:inline-block;background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
.wk .f--b{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:20px}
.wk__cat{font-family:var(--f-en);font-size:12px;font-weight:600}
.wk__name{font-size:clamp(18px,1.8vw,24px);font-weight:700;line-height:1.4}
.wk__plan{border-radius:10px;overflow:hidden;min-height:0}
.wk__plan .cv{object-position:50% 45%}
.wk__foot{display:flex;justify-content:space-between;align-items:end;gap:12px;font-size:13px}
.wk__foot .en{font-weight:600}
.works__end{flex:none;width:min(320px,60vw);display:grid;place-content:center;gap:16px;justify-items:center;text-align:center;border:1.5px dashed rgba(255,255,255,.5);border-radius:var(--r);color:#fff}
.works__end b{font-family:var(--f-en);font-size:28px}
@media(max-width:767px){
  .works__inner{width:auto}
  .works{background:var(--ultra);border-radius:40px;margin-inline:8px;padding-block:72px}
  .works__sticky{position:static;height:auto;overflow:visible}
  .works__circle{display:none}
  .works__inner{opacity:1}
  .works__track{overflow-x:auto;scroll-snap-type:x mandatory;padding-right:24px;transform:none!important;scrollbar-width:none}
  .works__track::-webkit-scrollbar{display:none}
  .wk{scroll-snap-align:center}
}

/* awards */
.aw{display:grid;gap:48px}
@media(min-width:900px){.aw{grid-template-columns:1fr 1fr;gap:80px}}
.aw__list{margin-top:32px;border-top:1px solid var(--line)}
.aw__row{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.aw__row .en{font-weight:600;font-variant-numeric:tabular-nums}
.aw__row b{display:block;font-size:16px}
.aw__row small{color:var(--sub);font-size:13px}
.aw__num{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.num{border-radius:var(--r);padding:20px;color:#fff;background:var(--c)}
.num b{display:block;font-family:var(--f-en);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1}
.num span{font-size:13px;font-weight:700}
.clients{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.clients span{border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}
.voice{margin-top:28px;background:var(--white);border-radius:var(--r);padding:24px}
.voice p{font-size:15px;line-height:1.9}
.voice small{display:block;margin-top:12px;color:var(--sub);font-size:12px}

/* members */
.mem{overflow:hidden}
.mem__top{display:flex;justify-content:space-between;align-items:end;gap:16px}
.arrows{display:flex;gap:10px}
.arrow{width:48px;height:48px;border-radius:50%;background:var(--white);display:grid;place-items:center;transition:background .4s var(--e-fade),color .4s var(--e-fade)}
.arrow:hover{background:var(--ink);color:#fff}
.arrow svg{width:16px;height:16px}
.mem__track{display:flex;gap:24px;margin-top:40px;transition:transform .8s var(--e-move);padding-left:calc(50% - min(150px,36vw))}
.mc{flex:none;width:min(300px,72vw);aspect-ratio:300/400;color:#fff;cursor:pointer}
.mc .f--a{border:2px solid var(--c);background:var(--white);padding:10px}
.mc .f--a>div{border-radius:12px;overflow:hidden;height:100%}
.mc .f--a .cv{object-position:50% 20%}
.mc .f--b{padding:18px;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px}
.mc .f--b .role{font-family:var(--f-en);font-weight:700;font-size:22px;line-height:1.1}
.mc .f--b .ph{border-radius:12px;overflow:hidden;aspect-ratio:16/10}
.mc .f--b q{font-weight:700;font-size:17px;line-height:1.6;quotes:none;align-self:end}
.mc .f--b small{font-size:12px;font-weight:500}
.mc{opacity:.55;transition:opacity .6s var(--e-fade)}
.mc.is-on{opacity:1}

/* news */
.news{display:grid;gap:32px}
@media(min-width:900px){.news{grid-template-columns:260px 1fr;gap:64px}}
.nw{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.nw:first-child{padding-top:0}
.nw__sq{width:72px;height:72px;border-radius:14px;background:var(--c)}
.nw time{font-family:var(--f-en);font-size:12px;color:var(--sub)}
.nw b{display:block;font-size:15px;margin-top:4px}

/* recruit */
.rc{display:grid;gap:56px;align-items:center}
@media(min-width:900px){.rc{grid-template-columns:1fr 1fr}}
.rc__pics{position:relative;height:clamp(340px,40vw,520px)}
.rp{position:absolute;width:44%;aspect-ratio:3/4;border-radius:16px;padding:10px;background:var(--c);box-shadow:0 24px 40px -28px rgba(23,25,29,.6);transition:transform 1s var(--e-pop)}
.rp>div{border-radius:9px;overflow:hidden;height:100%}
.rp:nth-child(1){left:2%;top:18%;--rot:-6deg}
.rp:nth-child(2){left:30%;top:0;--rot:5deg;width:40%}
.rp:nth-child(3){left:54%;top:30%;--rot:-4deg}
.rc__pics.in .rp{transform:rotate(var(--rot))}
.rc__pics.in .rp:nth-child(2){transition-delay:.12s}
.rc__pics.in .rp:nth-child(3){transition-delay:.24s}
.rc__body{display:grid;gap:24px}
.rc__body .key{font-family:var(--f-en);font-weight:700;font-size:clamp(22px,2.4vw,30px)}
.rc__body ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-weight:500}

/* button */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:220px;padding:16px 22px 16px 28px;border-radius:999px;background:var(--white);overflow:hidden;font-weight:700;font-size:14px;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .4s var(--e-flip);z-index:-1}
.btn span{transition:color .4s var(--e-flip)}
.btn i{position:relative;width:24px;height:24px;border-radius:50%;background:var(--ink);overflow:hidden;transition:background .4s var(--e-flip)}
.btn i svg{position:absolute;inset:6px;width:12px;height:12px;color:#fff;transition:transform .4s var(--e-flip)}
.btn i svg+svg{transform:translateX(-200%)}
.btn:hover::before{transform:none}
.btn:hover span{color:#fff}
.btn:hover i{background:#fff}
.btn:hover i svg{transform:translateX(200%);color:var(--ink)}
.btn:hover i svg+svg{transform:none}
.btn--g{background:var(--white)}

/* contact */
.ct{background:var(--tangerine);color:#fff;border-radius:clamp(40px,8vw,100px) clamp(40px,8vw,100px) 0 0;margin-top:clamp(40px,6vw,80px);padding-block:clamp(96px,14vw,180px);text-align:center;cursor:pointer}
.ct__t{position:relative;display:inline-block;font-family:var(--f-en);font-weight:600;font-size:clamp(56px,11vw,150px);line-height:1.1}
.ct__t .ch{display:inline-block}
.ct.is-hover .ch{animation:hop 1s var(--e-flip) both;animation-delay:calc(var(--i)*50ms)}
@keyframes hop{30%{transform:translateY(-40%)}100%{transform:none}}
.ct__line{position:absolute;left:0;right:0;bottom:4px;height:4px}
.ct__line::before,.ct__line::after{content:"";position:absolute;inset:0;background:#fff}
.ct__line::before{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e-flip)}
.ct__line::after{transform-origin:right;transition:transform 1s var(--e-flip)}
.ct.is-hover .ct__line::before{transform:scaleX(1);transition-delay:.5s}
.ct.is-hover .ct__line::after{transform:scaleX(0)}
.ct__sub{margin-top:20px;font-weight:700;font-size:clamp(16px,1.8vw,22px);letter-spacing:.08em}
.ct__mail{margin-top:28px;display:inline-block;background:#fff;color:var(--ink);border-radius:999px;padding:10px 22px;font-family:var(--f-en);font-weight:600;font-size:14px;user-select:all}

/* footer */
.ft{background:var(--char);color:#fff;padding-block:72px calc(32px + env(safe-area-inset-bottom,0px))}
.ft__grid{display:grid;gap:40px}
@media(min-width:900px){.ft__grid{grid-template-columns:200px 1fr 1fr}}
.ft__logo{width:150px}
.ft__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;font-size:14px}
.ft__nav a b{display:block;font-family:var(--f-en);font-weight:600;font-size:16px}
.ft__nav a span{font-size:12px;opacity:.7}
.off{display:grid;gap:16px}
.off__c{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}
.off__c .im{border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.off__c b{display:block;font-size:15px}
.off__c small{font-size:12px;opacity:.75}
.ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15);font-size:12px;opacity:.8}

/* toast */
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;width:min(372px,calc(100vw - 32px));display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px;border-radius:14px;background:rgba(239,79,134,.86);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);color:#fff;transform:translateX(60px);opacity:0;pointer-events:none;transition:transform 1s var(--e-pop),opacity 1s var(--e-fade)}
.toast.is-in{transform:none;opacity:1;pointer-events:auto}
.toast__im{border-radius:10px;overflow:hidden;aspect-ratio:1}
.toast time{font-family:var(--f-en);font-size:11px}
.toast b{display:block;font-size:13px;line-height:1.5}
.toast__x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;align-self:start}
.toast__x:hover{background:rgba(255,255,255,.2)}
.toast__x svg{width:12px;height:12px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .mq__track{animation:none!important}
}