@charset "utf-8";

.main{ --customer-margin: clamp(216.4635rem, calc( 250 / var(--inr) * 100vw ), 250rem);
    & > *{ position: relative; z-index: 0; }
    .bgBorder-group{ position: absolute; inset: 0; display: grid; pointer-events: none; }
    .bgBorder{ border-right: 1px solid; }
    .bgBorder-black .bgBorder{ border-color: #000; }
    .bgBorder-white .bgBorder{ border-color: #fff; }
    .inr{ z-index: 1; }
    .lead{ font: 600 var(--fs22) / 1.5 var(--font-pre); }
    .head{ margin-top: 0.16363636em; font: 700 var(--fs55) / 1.18181818 var(--font-mon); }
    .subHead{ margin-top: 21rem; font: 300 18rem / 1.5 var(--font-pre); }
    .common-link{ --color: #333; --bgColor: #fff; display: inline-flex; align-items: center; padding: 13rem 43rem 14rem; gap: 13rem; background: var(--bgColor); border: 1px solid currentColor; border-radius: 5em; font: 600 18rem / 1.5 var(--font-pre); color: var(--color); }
    .linkArrow{ position: relative; display: inline-block; width: 20rem; height: 14rem;
        &::before, &::after{ content: ''; position: absolute; }
        &::before{ inset: 0; margin: auto; height: 2rem; background: currentColor; }
        &::after{ inset: 0 1rem 0 auto; margin: auto; width: 8rem; height: 8rem; border: solid currentColor; border-width: 2rem 2rem 0 0; rotate: 45deg; }
    }
    @media(prefers-reduced-motion:no-preference){
        .common-link{ transition: .2s; }
    }
    @media(hover){
        .common-link:hover{ background: var(--color); color: var(--bgColor); }
    }
    @media(min-width:768px){
        .bgBorder-group{ grid-template-columns: 209fr 501fr 501fr 501fr 208fr; }
        .bgBorder-black{ opacity: .07; }
        .bgBorder-white{ opacity: .2; }
    }
    @media(max-width:767px){
        .bgBorder-group{ grid-template-columns: 4vw 1fr 1fr 1fr 4vw; }
        .bgBorder-black{ opacity: .03; }
        .bgBorder-white{ opacity: .07; }
    }
}

.main .visual{ height: calc( 100svh - var(--header-height) ); min-height: 400rem; color: #fff; z-index: 5;
    .swiper-slide{ contain: content; }
    .swiper-slide:has(.i1){ z-index: 1; }
    .swiper-slide-prev:has(.i1){ z-index: 0; }
    .swiper-slide-active{ z-index: 2; }
    .img{ position: absolute; inset: 0; }
    .img::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
    .inr{ position: absolute; inset: 42.28915663% 0 auto; translate: 0 -50%; pointer-events: none; z-index: 1; }
    .head{ margin-bottom: 0.2em; font: 700 var(--fs70) / 1.5 var(--font-mon); }
    .subHead{ font: 500 var(--fs30) / 1.46666667 var(--font-pre); }
    .pagination{ margin-top: 86rem; display: flex; align-items: center; gap: 9rem; font: 700 18rem / 1.5 var(--font-mon); pointer-events: auto; }
    .swiper-pagination-current, .swiper-pagination-total{ width: 2ch; }
    .swiper-pagination-total{ margin-left: 5rem; }
    .progress{ position: relative; display: inline-block; width: 200rem; height: 3px; background: color-mix(in srgb, currentColor 30%, #0000); }
    .bar{ position: absolute; inset: 0; width: var(--percentage); background: currentColor; }
    @media(prefers-reduced-motion:reduce){
        .pagination{ display: none; }
    }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide{ scale: 1.1; transition: 3s ease-out; }
        .swiper-slide-active{ scale: 1; }
    }
    @media(min-width:768px){
        .i1::before{ background-image: url('/images/main/visual-1-pc.webp'); }
        .i2::before{ background-image: url('/images/main/visual-2-pc.webp'); }
    }
    @media(max-width:767px){
        .i1::before{ background-image: url('/images/main/visual-1-mob.webp'); }
        .i2::before{ background-image: url('/images/main/visual-2-mob.webp'); }
    }
}

.main .about{ padding: clamp(90rem, calc( 179 / var(--inr) * 100vw ), 179rem) 0 clamp(90rem, calc( 173 / var(--inr) * 100vw ), 173rem); background: #fefefe no-repeat 25% 100% / cover;
    .inr{ display: grid; gap: 60rem 40rem; }
    .img{ width: 100%; height: auto; }
    .lead{ color: var(--primary); }
    .head{ margin: 0.16363636em 0 0.38181818em; color: #000; }
    .subHead{ color: #666; }
    .common-link{ margin-top: clamp(40rem, calc( 55 / var(--inr) * 100vw ), 55rem); }
    @media(min-width:768px){
        &{ background-image: url('/images/main/about-bg-pc.webp'); }
        .inr{ grid-template-columns: 1fr 50%; }
        .txt{ padding-top: 14.1%; }
        .pic{ order: 2; }
    }
    @media(max-width:767px){
        &{ background-image: url('/images/main/about-bg-mob.webp'); }
    }
    @supports(animation-timeline: view()){
        @media(prefers-reduced-motion:no-preference){
            @media(min-width:768px){
                .pic{ animation: about-pic-scroll 1s; animation-timeline: view(-10% 0); }
            }
            @media(max-width:767px){
                .pic{ animation: about-pic-appear 1s both; animation-timeline: view(60% 20%); }
            }
        }
    }
}
@keyframes about-pic-scroll {
    0%{ translate: 0 15%; }
    100%{ translate: 0 -15%; }
}
@keyframes about-pic-appear {
    0%{ clip-path: inset(0 50%); scale: .8; translate: 0 5%; }
    100%{ clip-path: inset(0); scale: 1; translate: 0; }
}

.main .business{ padding: clamp(90rem, calc( 173 / var(--inr) * 100vw ), 173rem) 0 clamp(90rem, calc( 146 / var(--inr) * 100vw ), 146rem); background: #517b95 url('/images/main/business-bg-pc.webp') no-repeat 50% / cover; color: #fff;
    .txt{ text-align: right; }
    .nav{ margin-top: clamp(50rem, calc( 145 / var(--inr) * 100vw ), 145rem); display: grid; gap: 30rem clamp(20rem, calc( 80 / var(--inr) * 100vw ), 80rem); font: 600 var(--fs25) / 1.5 var(--font-pre); }
    .link{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 23rem 2ch; padding-bottom: 25rem; }
    .bar{ grid-column: 1 / 3; position: relative; display: block; width: 100%; height: 2rem; background: color-mix(in srgb, currentColor 40%, #0000); }
    .bar::before{ content: ''; position: absolute; inset: 0; background: currentColor; }
    .title{ margin-left: 20rem; }
    .linkArrow{ margin-right: 20rem; }
    @media(prefers-reduced-motion:no-preference){
        .bar::before{ transition: .2s; }
    }
    @media(hover){
        .link:not(:hover) .bar::before{ right: 100%; }
    }
    @media(hover:none){
        .bar::before{ opacity: .25; }
    }
    @media(min-width:768px){
        .nav{ grid-template-columns: repeat(3, 1fr); }
    }
}

.main .customer{ padding: clamp(90rem, calc( 180 / var(--inr) * 100vw ), 180rem) 0 calc( clamp(90rem, calc( 180 / var(--inr) * 100vw ), 180rem) + var(--customer-margin) ); background: #040a24; color: #fff;
    .inr{ display: grid; gap: 70rem clamp(20rem, calc( 100 / var(--inr) * 100vw ), 100rem); }
    .inquiry{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 1%; background: #41617d no-repeat 50% / cover; text-align: center;
        .common-link{ margin-top: clamp(40rem, calc( 67 / var(--inr) * 100vw ), 67rem); }
    }
    .notice{ padding-top: 13rem; }
    .list{ margin-top: 47rem; font: 500 var(--fs22) / 1.5 var(--font-pre);
        li{ border-top: 1px solid currentColor; }
        .no_data, a{ display: grid; grid-template-columns: 1fr 16rem; align-items: center; gap: 2.5ch; padding: 23.8rem 0; }
    }
    .plus{ translate: -1rem; display: grid; place-items: center; aspect-ratio: 1; width: 16rem; }
    .plus::before, .plus::after{ content: ''; grid-area: 1 / 1; width: 100%; height: 2rem; background: currentColor; }
    .plus::after{ rotate: 90deg; }
    .common-link{ --color: #fff; --bgColor: #0000; margin-top: 29rem; padding-inline: 33rem; border-color: #fff; }
    .common-link:hover{ --bgColor: #333; }
    @media(prefers-reduced-motion:no-preference){
        .list a{ transition: .2s; }
    }
    @media(hover){
        .list a:hover{ opacity: .6; }
    }
    @media(min-width:768px){
        .bgBorder-white{ opacity: .17; }
        .inr{ grid-template-columns: 6fr 7fr; }
        .inquiry{ height: 598rem; background-image: url('/images/main/inquiry-bg-pc.webp'); }
    }
    @media(max-width:767px){
        .inquiry{ aspect-ratio: 600/598; background-image: url('/images/main/inquiry-bg-mob.webp'); }
    }
}

.main .location{ margin-top: calc( var(--customer-margin) * -1 ); padding-bottom: clamp(90rem, calc( 169 / var(--inr) * 100vw ), 169rem);
    .bg{ position: absolute; inset: var(--customer-margin) 0 0; background: no-repeat 50% 100% / cover; }
    .bgBorder-group{ top: var(--customer-margin); }
    .map{ display: block; width: 100%; box-shadow: 0 0 50rem rgba(0, 0, 0, 0.2); }
    .map > img{ width: 100%; height: auto; }
    .map svg{ pointer-events: none; }
    .map_border, .wrap_controllers{ display: none }
    .txt{ margin-top: 52rem; }
    .lead{ color: var(--primary); }
    @media(min-width:768px){
        .bg{ background-image: url('/images/main/location-bg-pc.webp'); }
        .map .wrap_map{ height: 500rem; }
        .txt{ display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 40rem; }
        .common-link{ grid-area: 1 / 2 / 3 / 3; translate: 0 -11rem; }
    }
    @media(max-width:767px){
        .bg{ background-image: url('/images/main/location-bg-mob.webp'); }
        .map{ aspect-ratio: 1/1; }
        .map .wrap_map{ height: 100%; }
        .common-link{ margin-top: 40rem; }
    }
}