/* トップの最初の画面（MV）。試作 _mv/3d.html を本番の部品にしたもの。図の動きは assets/js/mv.js */
.mv{position:relative;padding:clamp(1.5rem,1rem + 1.5vw,2.5rem) 0 clamp(2.5rem,2rem + 2vw,4rem);text-align:center;overflow:hidden}
.mv__side{display:none;position:absolute;top:3rem;writing-mode:vertical-rl;font:600 14px/1 var(--ff-head);letter-spacing:.4em;color:var(--c-sub);overflow:hidden}
.mv__side::after{content:"";display:block;width:1px;height:120px;margin:1rem auto 0;background:var(--c-hair);transform-origin:top;transform:scaleY(var(--sl,1))}
.mv__side span{display:block;white-space:nowrap;animation:mvSide 2s var(--ease) .6s both}
.mv__side--l{left:var(--gutter)}.mv__side--r{right:var(--gutter)}
@media (min-width:1024px){.mv__side{display:block}}
@keyframes mvSide{from{transform:translateY(-100%)}to{transform:none}}

.mv__kicker{display:flex;justify-content:center;align-items:center;gap:.9rem;font-size:14px;font-weight:700;color:var(--c-ai);letter-spacing:.08em}
.mv__kicker::before,.mv__kicker::after{content:"";width:36px;height:1px;background:var(--c-ai);transform:scaleX(0);animation:mvGrow 1.4s var(--ease) .4s forwards}
.mv__kicker::before{transform-origin:right}.mv__kicker::after{transform-origin:left}
@media (max-width:599px){.mv__kicker::before,.mv__kicker::after{display:none}}
@keyframes mvGrow{to{transform:scaleX(1)}}

/* 見出しと大きなかぎかっこ */
.mv__title{position:relative;display:table;margin:1.25rem auto 0;isolation:isolate}
.mv__title::before,.mv__title::after{position:absolute;font:800 clamp(6rem,3rem + 11vw,14rem)/1 var(--ff-head);color:#E6EEF7;z-index:-1;transition:color .6s ease}
.mv__title::before{content:"「";left:-.55em;top:-.35em;animation:mvTL 2.2s var(--ease) .3s both}
.mv__title::after{content:"」";right:-.8em;bottom:-.55em;animation:mvBR 2.2s var(--ease) .3s both}
@keyframes mvTL{from{opacity:0;transform:translate(-40px,-40px)}to{opacity:1;transform:none}}
@keyframes mvBR{from{opacity:0;transform:translate(40px,40px)}to{opacity:1;transform:none}}
.mv__title.live::before{animation:none;transform:translate(var(--bx,0),var(--by,0))}
.mv__title.live::after{animation:none;transform:translate(calc(var(--bx,0) * -1),calc(var(--by,0) * -1))}
.mv__title.want::before,.mv__title.want::after{color:#CDE6F5}
.mv h1{max-width:14.5em;margin:0 auto;font:800 clamp(2rem,1rem + 3vw,3.6rem)/1.38 var(--ff-head);color:var(--c-ink);font-feature-settings:"palt";letter-spacing:-.005em}
.mv h1 .ln{display:inline-block;vertical-align:top;padding-bottom:.06em;white-space:nowrap}
.mv h1 .ln:nth-child(2){display:block;margin:.08em 0 .12em}
.mv h1 .ln > span{display:inline-block;animation:mvUp 1.6s var(--ease) .2s both}
.mv h1 .ln:nth-child(2) > span{animation-delay:.55s}.mv h1 .ln:nth-child(3) > span{animation-delay:.9s}.mv h1 .ln:nth-child(4) > span{animation-delay:1.25s}
@keyframes mvUp{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}

/* 「欲しい！」 */
.hoshii{position:relative;display:inline-block;font-style:normal;font-size:1.62em;line-height:1;vertical-align:-.06em;margin:0 .02em;color:var(--c-ai);letter-spacing:-.02em}
@media (max-width:599px){.hoshii{font-size:1.5em}}
.hoshii::before{content:"";position:absolute;left:.42em;right:.42em;bottom:.04em;height:.34em;background:#E6EEF7;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease),background-color .4s ease}
.hoshii.drawn::before{transform:scaleX(1)}
.hoshii.want::before{background:#BFE6F6}
.hoshii i{display:inline-block;font-style:normal;opacity:0;transform:translateY(.6em) scale(.6);animation:mvPop .9s cubic-bezier(.3,1.7,.5,1) forwards}
.hoshii i:nth-child(1){animation-delay:1.1s}.hoshii i:nth-child(2){animation-delay:1.28s}.hoshii i:nth-child(3){animation-delay:1.46s}
.hoshii i:nth-child(4){animation-delay:1.64s}.hoshii i:nth-child(5){animation-delay:1.82s}.hoshii i:nth-child(6){animation-delay:2s}
.hoshii.drawn i{opacity:1;transform:none}
@keyframes mvPop{to{opacity:1;transform:none}}
.hoshii .ex{transform-origin:50% 90%}
.hoshii.jump i{animation:mvJump .55s cubic-bezier(.3,1.6,.5,1) both}
.hoshii.jump i:nth-child(2){animation-delay:.05s}.hoshii.jump i:nth-child(3){animation-delay:.1s}.hoshii.jump i:nth-child(4){animation-delay:.15s}
.hoshii.jump i:nth-child(5){animation:mvJumpX .7s cubic-bezier(.3,1.6,.5,1) .2s both}.hoshii.jump i:nth-child(6){animation-delay:.25s}
@keyframes mvJump{0%{transform:none}40%{transform:translateY(-.22em)}100%{transform:none}}
@keyframes mvJumpX{0%{transform:none}35%{transform:translateY(-.26em) rotate(14deg)}70%{transform:rotate(-6deg)}100%{transform:none}}

.mv__lede{margin:1.1rem auto 0;max-width:40em;color:#3A3A44;word-break:auto-phrase;text-wrap:pretty;animation:mvFade 1.2s ease 2s both}
.mv__cta{margin-top:1.4rem;animation:mvFade 1.2s ease 2.4s both}
.mv__cta .btn.nudge::after{width:40px}
@media (max-width:599px){.mv__cta .btn{width:100%}}
@keyframes mvFade{from{opacity:0}to{opacity:1}}

/* 図（SVG） */
.mv__film{position:relative;margin:1.25rem auto 0;max-width:1240px;animation:mvFade 1.2s ease 2.8s both}
.mv__film svg{display:block;width:100%;height:auto}
.mv__film .v-sp{display:none}
@media (max-width:767px){.mv__film .v-pc{display:none}.mv__film .v-sp{display:block}}
.mv-mincho{font-family:var(--ff-head);font-weight:600}
.mv-gothic{font-family:var(--ff-body)}

/* 回るスタンプ（広いPCだけ） */
.mv__stamp{display:none;position:absolute;right:calc(var(--gutter) + 1%);top:30%;width:132px;height:132px;animation:mvStamp 1.8s var(--ease) 2.4s both}
.mv__stamp svg{width:100%;height:100%;animation:mvSpin 18s linear infinite}
.mv__stamp text{font:600 14px var(--ff-head);letter-spacing:.2em;fill:var(--c-ai)}
.mv__stamp b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:800 15px/1.35 var(--ff-head);color:var(--c-ai)}
.mv__stamp b::before{content:"";position:absolute;inset:34px;border-radius:50%;border:1px solid var(--c-ai)}
.mv__stamp.ping b::before{animation:mvPing .9s var(--ease)}
@media (min-width:1180px){.mv__stamp{display:block}}
@keyframes mvSpin{to{transform:rotate(360deg)}}
@keyframes mvStamp{from{opacity:0;transform:rotate(-90deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes mvPing{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .mv *,.mv *::before,.mv *::after,.mv__title::before,.mv__title::after{animation:none!important;transition:none!important}
  .hoshii i{opacity:1;transform:none}.hoshii::before{transform:scaleX(1)}
}