.main .visual{ contain: content; position: relative; display: flex; align-items: center; color: #fff;
    *{ letter-spacing: 0; }
    &::before{ content: ''; position: absolute; inset: 0; }
    .t0{ display: block; }
    .t1{ margin-right: .275em; font: 700 clamp(50rem, calc( 80 / var(--inr) * 100vw ), 80rem) var(--font-pla); color: #97ff7a; text-decoration: none; text-transform: uppercase; }
    .t2{ font: clamp(20rem, calc( 25 / var(--inr) * 100vw ), 25rem) var(--font-pla); }
    .t3{ margin-top: .53333333em; display: block; font: 600 clamp(30rem, calc( 60 / var(--inr) * 100vw ), 60rem) var(--font-pre); }
    .t4{ margin-top: 0.1em; display: block; font: 600 clamp(60rem, calc( 90 / var(--inr) * 100vw ), 90rem) var(--font-pre); color: #7ef2ff; }
    @media(prefers-reduced-motion:no-preference){
        &::before{ animation: visual-bg 1.2s both; }
        .t0, .t3, .t4{ animation: visual-text .6s .3s both; opacity: 0; }
        .t3{ animation-delay: .6s; }
        .t4{ animation-delay: .8s; }
    }
    @media(min-width:768px){
        &{ aspect-ratio: 192/94; padding: var(--header-height) 0 8.3%; }
        &::before{ background: url('/images/main/visual-pc.jpg') no-repeat 100% 50% / cover; }
    }
    @media(max-width:767px){
        &{ aspect-ratio: 36/70; padding: var(--header-height) 0 110%; }
        &::before{ background: url('/images/main/visual-mob.jpg') no-repeat 50% 100% / cover; }
    }
}
@keyframes visual-bg {
    0%{ scale: 1.1; }
    100%{ scale: 1; }
}
@keyframes visual-text {
    0%{ translate: 0 20rem; opacity: 0; }
    100%{ translate: 0; opacity: 1; }
}