@charset "utf-8";

.main .visual{ position: relative; display: flex; align-items: center; height: 100svh; min-height: 500rem; padding: var(--header-height) 0 3.8%; color: #fff; 
    .swiper{ position: absolute; inset: 0; height: 100svh; }
    .swiper-slide{ contain: content; }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
    .s1::before{ background-image: url('/images/main/visual-1.jpg'); }
    .s2::before{ background-image: url('/images/main/visual-2.jpg'); }
    .s3::before{ background-image: url('/images/main/visual-3.jpg'); }
    .inr{ z-index: 1; }
    .lead{ font: 600 clamp(18rem, calc(25 / var(--inr) * 100vw), 25rem) var(--font-mon); }
    .lead small{ font: 600 .88em var(--font-pre); }
    .h2{ margin-top: 0.38333333em; font: 700 clamp(34rem, calc(60 / var(--inr) * 100vw), 60rem)/1.25 var(--font-pre); }
    .pagination{ all: unset; margin-top: calc(clamp(34rem, calc(60 / var(--inr) * 100vw), 60rem) * 1.16666667); display: flex; gap: 15rem; }
    .swiper-pagination-bullet{ all: unset; position: relative; display: block; width: 12rem; height: 12rem; background: currentColor; border-radius: 5em; opacity: .4; cursor: pointer; }
    .swiper-pagination-bullet-active{ width: 60rem; opacity: 1; }
    .swiper-pagination-bullet::before{ content: ''; position: absolute; inset: -7rem; border-radius: 5em; }
    .scrollDown{ position: absolute; inset: auto 0 26rem; z-index: 1; display: grid; justify-items: center; gap: 18rem; font: 500 14rem var(--font-mon); text-align: center; text-transform: uppercase; user-select: none; }
    .bar-group{ contain: content; position: relative; width: 2px; height: 100rem; background: rgba(255, 255, 255, 0.3); }
    .bar{ width: 2px; height: 30rem; background: currentColor; }
    .mouse{ display: block; width: 27rem; }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide::before{ scale: 1.1; transition: 1.2s; }
        .swiper-slide-active::before{ scale: 1; }
        .swiper-pagination-bullet{ transition: .3s; }
        :is(.lead, .h2, .pagination){ animation: visual-slide-up .6s .3s both; opacity: 0; }
        .h2{ animation-delay: .6s; }
        .pagination{ animation-delay: .9s; }
        .bar{ animation: scrollDown-bar 2s infinite; translate: 0 -30rem; }
    }
}
@keyframes visual-slide-up {
    0%{ translate: 0 20rem; opacity: 0; }
    100%{ translate: 0; opacity: 1; }
}
@keyframes scrollDown-bar {
    0%{ translate: 0 -30rem; }
    100%{ translate: 0 130rem; }
}

.main{
    :target{ scroll-margin-top: calc(var(--header-height) - 1px); }
    .common-lead{ font: 600 17rem var(--font-pre); color: var(--primary); text-transform: uppercase; }
    .common-lead + .common-h2{ margin-top: .28em; }
    .common-h2{ font: 700 var(--fs50) var(--font-mon); }
}

.main .about{ padding-top: clamp(70rem, calc(198 / var(--inr) * 100vw), 198rem);
    .description::before{ content: ''; margin-bottom: calc(var(--fs50) * .35); display: block; height: 1lh; font: 600 17rem var(--font-pre); }
    .t1{ font: 600 var(--fs30)/1.4 var(--font-pre); }
    .t2{ margin-top: 26rem; font: 300 18rem/1.5 var(--font-pre); color: #555; }
    .img{ contain: content; }
    .img-wrapper{ height: clamp(250rem, calc(550 / var(--inr) * 100vw), 550rem); background: var(--primary) url('/images/main/about.jpg') no-repeat 58% / cover; }
    @media(prefers-reduced-motion:no-preference){
        .img-wrapper:not(.seActive){ scale: 1.05; }
    }
    @media(min-width:768px){
        .inr-grid{ all: unset; display: grid; grid-template-columns: minmax(4vw, auto) minmax(21.875%, 420rem) minmax(51.04166667%, 980rem) minmax(4vw, auto); gap: 75rem 0; }
        .hGroup{ grid-column: 2/3; }
        .description{ grid-column: 3/4; padding-left: 18.2%; }
        .img{ grid-column: 2/5; }
    }
    @media(max-width:1279px){
        .t2 br{ display: none; }
    }
    @media(max-width:767px){
        .t1 br{ display: none; }
        .img{ margin: 40rem -4vw 0 0; }
    }
}

.main .cso{ contain: content; padding-top: clamp(70rem, calc(198 / var(--inr) * 100vw), 198rem);
    .d1{ margin-top: 40rem; }
    .t1{ font: 600 var(--fs30)/1.4 var(--font-pre); }
    .t2{ margin-top: 24rem; font: 300 18rem/1.5 var(--font-pre); color: #555; }
    .t2.more{ position: relative; display: inline-flex; align-items: center; gap: 5rem; font: 300 16rem var(--font-pre); color: #afafaf; cursor: pointer; }
    .t2.more::before{ content: ''; position: absolute; inset: auto -2rem -4rem 0; border-bottom: 1px solid currentColor; }
    .t2.more::after{ content: ''; display: inline-block; width: 6rem; aspect-ratio: 1; border: solid currentColor; border-width: 1px 1px 0 0; rotate: 45deg; }
    .img{ margin-top: clamp(40rem, calc(75 / var(--inr) * 100vw), 75rem); height: clamp(250rem, calc(500 / var(--inr) * 100vw), 500rem); background: var(--primary) url('/images/main/cso-img.jpg') no-repeat 58% / cover; }
    .description-group{ position: relative; padding: clamp(60rem, calc(90 / var(--inr) * 100vw), 90rem) 0 clamp(70rem, calc(145 / var(--inr) * 100vw), 145rem); color: #fff; }
    .description-group::before{ content: ''; position: absolute; inset: calc(clamp(125rem, calc(250 / var(--inr) * 100vw), 250rem) * -1) 50% 0; z-index: -1; translate: -50%; width: 100vw; background: #102e48 url('/images/main/cso-bg.jpg') no-repeat 50% / cover; }
    .d2{ margin-left: auto; }
    .d2 .t2{ color: inherit; }
    @media(prefers-reduced-motion:no-preference){
        .img{ clip-path: inset(0); scale: 1; transition: .6s; }
        .img:not(.seActive){ clip-path: inset(50%); scale: 1.05; }
    }
    @media(min-width:768px){
        .description-group{ padding-left: 33.5%; }
    }
    @media(min-width:1280px){
        .t2.more{ margin-bottom: 35rem; }
    }
    @media(max-width:1279px){
        .t2 br{ display: none; }
    }
    @media(max-width:767px){
        .description-group{ padding-left: 4ch; }
    }
}

.main .process{ contain: content; position: relative; padding: clamp(70rem, calc(196 / var(--inr) * 100vw), 196rem) 0 clamp(70rem, calc(200 / var(--inr) * 100vw), 200rem); background: url('/images/main/process-bg-1.webp') no-repeat 100% 0 / min(838rem, 44%), url('/images/main/process-bg-2.webp') no-repeat 0 100% / min(470rem, 25%);
    .subTitle{ margin-top: 1.5em; font: 600 var(--fs30) var(--font-pre); }
    .step-list{ counter-reset: number; margin-top: 45rem; display: grid; gap: clamp(10rem, calc(20 / var(--inr) * 100vw), 20rem); text-align: center;
        li{ padding: 58rem 1ch 46rem; background: rgba(255, 255, 255, 0.4); border: 1px solid #ddd; backdrop-filter: blur(10px); }
        li{ padding: 19.4% 1ch 15%; background: rgba(255, 255, 255, 0.4); border: 1px solid #ddd; backdrop-filter: blur(10px); }
        .icon{ height: clamp(60rem, calc(83 / var(--inr) * 100vw), 83rem); }
        .step{ margin-top: 33rem; font: 600 16rem var(--font-mon); color: var(--primary); }
        .step::after{ content: '0'counter(number); counter-increment: number; }
        .title{ margin-top: 13rem; font: 700 clamp(18rem, calc(20 / var(--inr) * 100vw), 20rem) var(--font-pre); color: #222; }
    }
    .step-detail{ margin-top: clamp(60rem, calc(100 / var(--inr) * 100vw), 100rem);
        li{display:flex; justify-content:space-between;}
        li:nth-child(even){flex-direction:row-reverse;}
        li+li{margin-top:100rem;}
        .img{display:block; width:600rem; object-fit:cover;}
        .txt{width:calc(100% - 680rem);}
        .number{ font: 700 clamp(80rem, calc(150 / var(--inr) * 100vw), 150rem) var(--font-mon); color: #000; opacity: .30; }
        .title{ margin-bottom: 1.04em; border-bottom: 1px dashed #ddd; padding-bottom: 1.04em; font: 700 var(--fs25) var(--font-pre); color: #035857; }
        .lead{ font: 600 20rem var(--font-pre); color: #222; line-height:1.4;}
        .description{ margin-top: 11rem; font: 300 18rem/1.5 var(--font-pre); color: #555; }
    }
    @media(prefers-reduced-motion:no-preference){
        &{ animation: process-bg 7s ease-in-out infinite; }
    }
    @media(min-width:768px){
        .step-list{ grid-template-columns: repeat(5, 1fr); }
    }
    @media(min-width:1280px){
        .step-list{ grid-template-columns: repeat(5, 1fr); }
    }
    @media(max-width:1279px){
        .step-detail {
            li+li{margin-top:80rem;}
            .img{width:40%;}
            .txt{width:calc(60% - 50rem);}
            .description br{ display: none; }
        }
        @media(min-width:768px){
            .step-list{ grid-template-columns: repeat(3, 1fr); }
        }
    }
    @media(max-width:767px){
        .step-list{ grid-template-columns: repeat(2, 1fr); }
        .step-detail{
            li{display:block;}
            li+li{margin-top:60rem;}
            .img{ width: 100%; }
            .txt{width:100%;}
            .number{ text-align: right; margin-bottom: -.5lh; font-size:60rem; }
            .control{ margin-top: 20rem; }
        }
    }
}
@keyframes process-bg{
    0%, 100%{ background-position-y: 0, 100%; }
    50%{ background-position-y: calc(clamp(10rem, calc(30 / var(--inr) * 100vw), 30rem) * -1), calc(100% + clamp(5rem, calc(20 / var(--inr) * 100vw), 20rem)); }
}

.main .location{ padding: clamp(70rem, calc(120 / var(--inr) * 100vw), 120rem) 0; background: var(--black) url('/images/main/location-bg.jpg') no-repeat 50% / cover; color: #fff;
    .tablist{ margin-top: 29rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10rem; }
    .tab{ display: grid; place-items: center; height: 54rem; border: 1px solid var(--primary); font: 600 20rem var(--font-pre); color: rgba(255, 255, 255, 0.7); cursor: pointer; }
    .tab[aria-selected="true"]{ background: var(--primary); color: #fff; }
    .tab-info[aria-hidden="true"]{ display: none; }
    .tab-info{ margin-top: 37rem; font: 300 18rem var(--font-pre); }
    .tab-info li{ margin-bottom: 17rem; display: grid; grid-template-columns: 7ch 1fr; gap: .8ch; padding-bottom: 16rem; border-bottom: 1px solid #888; }
    .tab-info b{ font-family: var(--font-mon); text-transform: uppercase; }
    .tab-map-group{ position: relative; }
    .tab-map{ position: absolute; inset: 0; }
    .tab-map[aria-hidden="true"]{ z-index: -1; }
    .map{ width: 100%; height: 100%; }
    .map .wrap_map{ height: 100%; }
    .map svg{ pointer-events: none; }
    .map_border, .wrap_controllers{ display: none }
    @media(min-width:768px){
        .tab-map-group{ height: 500rem; }
        @media(max-width:1279px){
            .tab-map-group{ margin-top: 40rem; }
        }
    }
    @media(min-width:1280px){
        .inr{ display: grid; grid-template-columns: 52fr 80fr; align-items: center; gap: 80rem; }
        .info{ padding-top: 3%; }
    }
    @media(max-width:767px){
        .tab-map-group{ aspect-ratio: 1/1; }
    }
}

.main .partner{ contain: content; padding: clamp(70rem, calc(198 / var(--inr) * 100vw), 198rem) 0 clamp(70rem, calc(194 / var(--inr) * 100vw), 194rem); background: url('/images/main/partner-bg.jpg') no-repeat 50% / cover;
    .subTitle{ margin-top: 1.43333333em; font: 600 var(--fs30) var(--font-pre); }
    .marquee{ display: flex; white-space: nowrap; }
    .m1{ margin-top: clamp(60rem, calc(94 / var(--inr) * 100vw), 94rem); }
    .marquee ~ .marquee{ margin-top: clamp(36rem, calc(54 / var(--inr) * 100vw), 54rem); }
    .item{ display: flex; align-items: center; will-change: translate; }
    .m1{ --du: 60s; }
    .m2{ --du: 55s; }
    .m3{ --du: 50s; }
    :where(.m1, .m3) .item{ animation: partner-marquee var(--du) linear infinite; }
    .m2 .item{ animation: partner-marquee-reverse var(--du) linear infinite; }
    .logo{ --size: clamp(150rem, calc(220 / var(--inr) * 100vw), 220rem); margin-right: calc(var(--size)*.45454545); display: block; max-width: var(--size); max-height: calc(var(--size)*.36363636); object-fit: scale-down; }
}
@keyframes partner-marquee {
    0%{ translate: 0; }
    100%{ translate: -100%; }
}
@keyframes partner-marquee-reverse {
    0%{ translate: -100%; }
    100%{ translate: 0; }
}