@charset "utf-8";

.main .visual{ contain: content; position: relative; display: flex; align-items: center; height: 970rem; padding-bottom: .9%; color: #fff;
    .swiper{ position: absolute; inset: 0; z-index: -1; }
    .swiper-slide{ background: var(--black); }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
    .inr{ display: flex; align-items: center; justify-content: space-between; }
    .heading{ margin-bottom: 0.48275862em; font: 700 var(--fs58)/1.29310345 var(--font-pop); letter-spacing: -.01em; text-transform: uppercase; }
    .subHeading{ font-size: 18rem; }
    .pagination{ margin-top: 55rem; display: flex; gap: 16rem; color: currentColor; }
    .swiper-pagination-bullet{ all: unset; position: relative; display: block; width: 9rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid currentColor; box-sizing: border-box; cursor: pointer; }
    .swiper-pagination-bullet-active{ background: currentColor; }
    .swiper-pagination-bullet::before{ content: ''; position: absolute; inset: -8rem; border-radius: 50%; }
    .product{ translate: 6.2% 9.7%; display: block; max-width: 548rem; width: 100%; height: auto; }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide::before{ scale: 1.05; transition: 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
        .swiper-slide-active::before{ scale: 1; }
        hgroup > *{ animation: main-slide-up .6s .2s both; opacity: 0; }
        hgroup > *:nth-child(2){ animation-delay: .5s; }
        hgroup > *:nth-child(3){ animation-delay: .8s; }
        .product{ animation: main-visual-product .6s 1.1s both; opacity: 0; }
    }
    @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'); }
    }
    @media(max-width:1279px){
        .product{ display: none; }
    }
    @media(max-width:767px){
        .s1::before{ background-image: url('/images/main/visual-1-pc.jpg'); }
        .s2::before{ background-image: url('/images/main/visual-2-pc.jpg'); }
    }
}
@keyframes main-slide-up {
    0%{ translate: 0 20rem; opacity: 0; }
    100%{ translate: 0 0; opacity: 1; }
}
@keyframes main-visual-product {
    0%{ scale: 1.25; opacity: 0; }
    100%{ scale: 1; opacity: 1; }
}

.main{
    .common-subHeading{ font: 17rem/1.76470588 var(--font-pre); }
}

.main .product{ padding: 70rem 0;
    hgroup{ display: grid; }
    .heading{ font: 700 var(--fs45)/1.375 var(--font-pop); letter-spacing: -.01em; text-transform: uppercase; }
    .common-subHeading{ margin-top: 22rem; color: var(--gray); }
    .more{ justify-self: end; display: inline-flex; align-items: center; gap: 30rem; font-family: var(--font-pop); color: var(--primary); text-transform: uppercase; }
    .circle{ position: relative; display: grid; place-items: center; width: 106rem; aspect-ratio: 1; border-radius: 50%; }
    .circle::before,
    .circle::after{ content: ''; position: absolute; inset: 0; margin: auto; aspect-ratio: 1; background: currentColor; border-radius: 50%; }
    .circle::before{ opacity: .1; }
    .circle::after{ width: 52.83018868%; }
    .arrow{ position: relative; z-index: 1; width: 10rem; height: 10rem; fill: #fff; }
    .list{ margin-top: 50rem; display: grid; gap: 40rem 7%; }
    .link{ position: relative; display: block; padding: 58rem 10% 59rem; background: #f0f3f8; border-radius: 15rem; }
    .title{ display: block; font-size: var(--fs25); }
    .description{ margin-top: 12rem; display: block; line-height: 1.5625; color: var(--gray); }
    .img{ margin-inline: auto; display: block; max-width: 285rem; width: 100%; height: auto; object-fit: scale-down; }
    .i1{ margin-top: clamp(49rem, calc( 93 / var(--inr) * 100vw ), 93rem); }
    .i2{ margin-top: clamp(49rem, calc( 69 / var(--inr) * 100vw ), 69rem); }
    .i3{ margin-top: 49rem; }
    @media(hover){
        .link:not(:hover)::before, .link:not(:hover)::after{ scale: 1.25; opacity: 0; }
        .link::before, .link::after{ content: ''; position: absolute; inset: 0; margin: auto; aspect-ratio: 1;  }
        .link::before{ width: 90rem; background: var(--primary); border-radius: 50%; }
        .link::after{ width: 20rem; background: #fff; clip-path: polygon(0 9rem, 9rem 9rem, 9rem 0, 11rem 0, 11rem 9rem, 20rem 9rem, 20rem 11rem, 11rem 11rem, 11rem 20rem, 9rem 20rem, 9rem 11rem, 0 11rem); }
        .link:hover{ background: #252525; color: #fff; }
        .link:hover *{ color: inherit; }
        @media(prefers-reduced-motion:no-preference){
            .link, .link::before, .link::after{ transition: .3s; }
            .link:not(:hover)::before, .link:not(:hover)::after{ transition: .3s, scale 0s .3s; }
        }
    }
    @media(min-width:768px){
        &{ padding: 136rem 0 150rem; }
        .more{ grid-area: 1/2/3/3; place-self: end; translate: 1rem -7rem; }
        .list{ margin-top: 32rem; grid-template-columns: repeat(3, 1fr); }
        .list > li:nth-child(odd){ margin-top: 70rem; }
    }
    @media(max-width:1279px){
        .description br{ display: none; }
    }
    @media(max-width:767px){
        .common-subHeading br{ display: none; }
        .more{ margin-top: 20rem; }
        .list > li{ width: 90%; }
        .list > li:nth-child(even){ justify-self: end; }
    }
}

.main .about{ position: sticky; top: 0; 
    & ~ section{ position: relative; }
}

.main .about{ padding: 70rem 0; background: #101d2c url('/images/main/about-bg-mob.jpg') no-repeat 15% / cover; color: #fff;
    .inr{ display: grid; grid-template-columns: 40rem 1fr; }
    .lead{ justify-self: start; translate: -6rem 6rem; display: inline-flex; align-items: center; gap: 11rem; font: 15rem var(--font-pop); writing-mode: vertical-lr; }
    .lead::after{ content: ''; display: block; height: 25rem; border-left: 1px solid color-mix(in srgb, currentColor 80%, #0000); }
    .heading{ font: 700 clamp(20rem, calc( 40 / var(--inr) * 100vw ), 40rem)/1.375 var(--font-pre); }
    .heading + .common-subHeading{ margin-top: 33rem; }
    .common-subHeading{ margin-top: 20rem; font-weight: 300;}
    .more{ margin-top: 38rem; display: inline-flex; gap: 25rem; padding: 8rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 80%, #0000); font: 300 15rem var(--font-pop); }
    .arrow{ width: 12rem; height: auto; fill: currentColor; }
    @media(min-width:768px){
        &{ padding: 138rem 0 143rem; background-image: url('/images/main/about-bg-pc.jpg'); }
        .inr{ display: grid; grid-template-columns: 80rem 1fr; }
    }
    @media(max-width:767px){
        .common-subHeading br{ display: none; }
    }
}

.main .etc{ padding: 70rem 0; background: #fff;
    .heading{ font: 700 var(--fs40)/1.375 var(--font-pop); text-align: center; }
    .list{ margin-top: 96rem; display: grid; grid-template-columns: repeat(2, 1fr); text-align: center;
        .icon{ margin: auto; display: block; width: auto; height: 36rem; object-fit: scale-down; object-position: center; }
        .title{ margin-top: 37rem; font: 600 18rem var(--font-pre); }
        .description{ margin-top: 14rem; font-size: 15rem; color: var(--gray); }
        .more{ margin-top: 29rem; display: inline-block; background: linear-gradient(0deg, #0000 1px, #6b6b6b 1px, #6b6b6b 2px, #0000 2px) no-repeat 0 / 100% 100%; font: 14rem var(--font-pop); }
    }
    .banner{ margin-top: 68rem; padding: 70rem 0; background: var(--black) url('/images/main/banner-bg-mob.jpg') no-repeat 50% / cover; color: #fff;
        .inr{ display: grid; max-width: 1300rem; }
        .title{ margin-bottom: .94285714em; font: 700 var(--fs35) var(--font-pre); letter-spacing: -.01em; }
        .subTitle{ font: 300 17rem var(--font-pre); }
        .more{ place-self: end; margin-top: 40rem; display: inline-flex; gap: 39rem; padding: 15rem 27rem; background: color-mix(in srgb, currentColor 4%, #0000); border: 1px solid color-mix(in srgb, currentColor 40%, #0000); font: 14rem var(--font-pop); }
        .arrow{ width: 13rem; height: auto; fill: currentColor; }
    }
    @media(hover){
        .list .more:not(:hover){ background-size: 0 100%; color: var(--gray); }
        @media(prefers-reduced-motion:no-preference){
            .list .more{ transition: .3s; }
        }
    }
    @media(min-width:768px){
        &{ padding: 146rem 0 80rem; }
        .list{ grid-template-columns: repeat(4, 1fr); }
        .banner{ padding: 97rem 0 99rem; background-image: url('/images/main/banner-bg-pc.jpg'); }
        .banner .more{ grid-area: 1/2/3/3; translate: 2rem -3rem; }
        
    }
}