@charset "utf-8";

.main .visual{ position: relative; height: 100svh; min-height: 450rem; color: #fff; text-align: center;
    .swiper{ contain: content; position: absolute; inset: 0; z-index: -1; }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; }
    .inr{ display: grid; place-items: center; height: 100%; padding: var(--header-height) 0 6.4%; }
    .h2{ font: 400 var(--fs60)/1.41666667 var(--font-pre); }
    .text-1, .text-2{ display: block; }
    .control{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
    .btn{ width: 40rem; height: 85rem; background: no-repeat 50% / contain; pointer-events: auto; }
    .prev{ background-image: url('/images/main/visual-prev.png'); }
    .next{ background-image: url('/images/main/visual-next.png'); }
    .scrollDown{ position: absolute; inset: auto 0 60rem; z-index: 1; margin: 0 auto; font: 300 16rem var(--font-rem); text-transform: uppercase; pointer-events: none; user-select: none; }
    .scrollDown{ pointer-events: auto; user-select: auto; }
    .scrollDown-txt{ margin-bottom: 11rem; }
    .scrollDown-arrow{ margin: 0 auto; width: 22rem; height: 9rem; background: url('/images/main/scrollDown-arrow.png') no-repeat 50% / contain; }
    .scrollDown-arrow.a1{ opacity: .5; }
    @media(hover){
        .btn:not(:hover){ opacity: .5; }
    }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide::before{ scale: 1.1; transition: 1.2s cubic-bezier(0, 0, 0.2, 1); }
        .swiper-slide-active::before{ scale: 1; }
        .text-1{ --delay: .4s; }
        .text-2{ --delay: .8s; }
        .text-1, .text-2{ animation: visualText .8s cubic-bezier(0, 0, 0.2, 1) var(--delay) both; }
        [lang="en"] & .text-1{ animation-name: visualText-en; }
        .btn{ transition: .3s; }
        .scrollDown-arrow{ animation: scrollDown 1.5s var(--delay) infinite both; }
        .scrollDown-arrow.a1{ --delay: 0s; }
        .scrollDown-arrow.a2{ --delay: .3s; }
    }
    @media(min-width:768px){
        .s1::before{ background-image: url('/images/main/visual-1-pc.jpg'); }
        .s2::before{ background-image: url('/images/main/visual-2-pc.jpg'); }
        .s3::before{ background-image: url('/images/main/visual-3-pc.jpg'); }
    }
    @media(max-width:767px){
        .s1::before{ background-image: url('/images/main/visual-1-mob.jpg'); }
        .s2::before{ background-image: url('/images/main/visual-2-mob.jpg'); }
        .s3::before{ background-image: url('/images/main/visual-3-mob.jpg'); }
        .btn{ display: none; }
    }
}
@keyframes visualText {
    0%{ translate: 0 1lh; clip-path: inset(0 0 1lh); }
    100%{ translate: 0; clip-path: inset(0); }
}
@keyframes visualText-en {
    0%{ translate: 0 2lh; clip-path: inset(0 0 2lh); }
    100%{ translate: 0; clip-path: inset(0); }
}
@keyframes scrollDown {
    0%, 66%, 100%{ opacity: 0; }
    33%{ opacity: 1; }
}

.main{
    .common-lead{ font: 600 20rem var(--font-rem); color: var(--primary); text-transform: uppercase; }
    .common-lead + .common-h2{ margin-top: 0.53333333em; }
    .common-h2{ font: 700 var(--fs45)/1.4 var(--font-pre); color: #101010; }
}

.main .product{ contain: content; margin-top: clamp(70rem, calc( 145 / var(--inr) * 100vw ), 145rem); 
    .control{ display: flex; justify-content: end; gap: 11rem; }
    .btn{ display: grid; place-items: center; width: clamp(60rem, calc( 90 / var(--inr) * 100vw ), 90rem); aspect-ratio: 1; border: 2px solid #ededed; border-radius: 50%; }
    .arrow{ width: 16rem; height: 14rem; fill: #bbb; }
    .swiper{ overflow: visible; margin: clamp(60rem, calc( 88 / var(--inr) * 100vw ), 88rem) auto 0; }
    .more{ display: block; }
    .img-group{ overflow: clip; overflow-clip-margin: 1px; position: relative; display: block; background: var(--black); border-radius: 50%; }
    .product-img{ display: block; width: 100%; aspect-ratio: 1; background: #f5f5f5 url('/images/common/no_img.png') no-repeat 50% / min(191rem, 50%); text-indent: -100vw; scale: 1.01; }
    .product-name{ margin-top: 31rem; display: block; font: 600 var(--fs25) var(--font-pre); text-align: center; }
    @media(hover){
        .more:hover .product-img{ opacity: .2; }
        .img-group::before, .img-group::after{ content: ''; position: absolute; inset: 0; margin: auto; background: #fff; }
        .img-group::before{ width: 60rem; height: 2px; }
        .img-group::after{ width: 2px; height: 60rem; }
        .img-group:not(:hover)::before, .img-group:not(:hover)::after{ scale: .5; opacity: .0; }
    }
    @media(prefers-reduced-motion:no-preference){
        .img-group::before, .img-group::after, .product-img{ transition: .3s; }
    }
    @media(min-width:768px){
        .heading-group{ display: grid; }
        .control{ grid-area: 1/2/3/3; place-self: end; translate: 0 -12rem; }
        .swiper-slide{ margin-right: 4.88721805%; width: 30.07518797%; }
    }
    @media(min-width:1280px){
        .swiper{ width: 95%; translate: 2.5%; }
    }
    @media(max-width:767px){
        .control{ margin-top: 20rem; }
        .swiper-slide{ margin-right: 8%; width: 60%; }
    }
}

.main .links{ contain: content; margin-top: clamp(70rem, calc( 156 / var(--inr) * 100vw ), 156rem); display: grid; gap: 20rem;
    .more{ position: relative; display: block; padding: 15.79710145% 7.82608696% 15.21739130%;  color: #fff; }
    .more{ display: grid; }
    .more::before{ content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #00000080, #0000), var(--black) var(--url) no-repeat 50% / cover; border-radius: 10rem; }
    .m1::before{ --url: url('/images/main/links-1.jpg'); }
    .m2::before{ --url: url('/images/main/links-2.jpg'); }
    .category{ display: block; font: 16rem var(--font-rem); letter-spacing: .02em; text-transform: uppercase; color: color-mix(in srgb, currentColor 50%, #0000); }
    .heading{ margin: .54285714em 0 .62857143em; display: block; font: 700 var(--fs35) var(--font-pre); }
    .subHeading{ display: block; font: 300 18rem/1.77777778 var(--font-pre); }
    .detail{ place-self: end; margin-top: 20rem; display: inline-block; padding: 10rem 28rem 8rem; background: var(--primary); border-radius: 5em; }
    @media(prefers-reduced-motion:no-preference){
        .detail{ transition: .3s; }
    }
    @media(hover){
        .detail:hover{ background: var(--black); }
    }
    @media(min-width:768px){
        &{ grid-template-columns: repeat(2, 1fr); }
        .detail{ grid-area: 1/2/4/3; margin-top: 0; translate: -6rem -9rem; }
    }
}

.main .notice{ margin-top: clamp(70rem, calc( 120 / var(--inr) * 100vw ), 120rem); padding: clamp(70rem, calc( 145 / var(--inr) * 100vw ), 145rem) 0 clamp(70rem, calc( 150 / var(--inr) * 100vw ), 150rem); background: no-repeat 50% / cover;;
    .heading-group{ text-align: center; }
    .list{ display: grid; gap: 25rem; padding: 48rem 0 80rem; }
    .list:has(:not(.no_data)){ grid-template-columns: repeat(3, 1fr); }
    .no_data{ text-align: center; }
    .link{ contain: content; display: block; min-width: 280rem; background: #fff; border-radius: 8rem; box-shadow: 0 5rem 30rem 10rem color-mix(in srgb, #000 8%, #0000); }
    .img-group{ contain: content; display: block; width: 100%; aspect-ratio: 45/26; background: #ddd url('/images/common/no_img.png') no-repeat 50% / min(191rem, 50%); }
    .img{ display: block; width: 100%; height: 100%; text-indent: -100vw; object-fit: cover; }
    .txt-group{ display: block; padding: 37rem 39rem 33rem; }
    .txt-group{ display: block; padding: 8.22222222% 8.66666667% 7.33333333%; }
    .title{ font: 600 clamp(20rem, calc( 22 / var(--inr) * 100vw ), 22rem) var(--font-pre); color: #101010; }
    .comment{ margin-top: 1.16666667em; font: clamp(16rem, calc( 18 / var(--inr) * 100vw ), 18rem)/1.55555556 var(--font-pre); color: #555; height: 55rem; }
    .date{ margin-top: 1.16666667em; display: block; font-size: clamp(16rem, calc( 18 / var(--inr) * 100vw ), 18rem); color: #888; }
    .more{ margin: 0 auto; display: flex; align-items: center; gap: 36rem; width: fit-content; padding: 24.4rem 32rem; background: var(--black); border-radius: 5em; font: 300 16rem var(--font-pre); color: #fff; }
    .arrow{ width: 13rem; height: auto; fill: currentColor; }
    @media(prefers-reduced-motion:no-preference){
        .img{ transition: .3s; }
    }
    @media(hover){
        .img:hover{ scale: 1.05; }
    }
    @media(min-width:768px){
        &{ background-image: url('/images/main/notice-bg-pc.jpg'); }
    }
    @media(max-width:767px){
        &{ background-image: url('/images/main/notice-bg-mob.jpg'); }
        .list{ margin-inline: -4vw; padding-inline: 4vw; overflow: auto; }
    }
}