.main{
    --overlapping-nav: 560rem;
    --overlapping-location: 560rem;
    @media(min-width:768px){
        --overlapping-nav: 202rem;
        --overlapping-location: 177rem;
    }
}

.main .visual{
    &{ height: 940rem; background: var(--black); color: var(--white); }
    .swiper-slide{ contain: content; }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; z-index: -1; }
    .title-wrap{ position: absolute; inset: var(--header-height) 0 16.3%; display: grid; align-content: center; padding-right: 40rem; }
    .title{ font-weight: 600; font-size: var(--fs60); line-height: 1.41666667; }
    .subTitle{ margin-top: 1.31818182em; font-weight: 500; font-size: var(--fs22); }
    .control{ position: absolute; inset: 70.5% 0 auto; translate: 0 -50%; display: flex; align-items: center; gap: 29rem; font: 500 18rem var(--font-mon); pointer-events: none; z-index: 1; }
    .control > *{ pointer-events: auto; }
    .btn{ position: relative; width: 12rem; height: 21rem; cursor: pointer; }
    .btn::before{ content: ''; position: absolute; inset: -10rem; }
    .arrow{ width: 12rem; height: 21rem; fill:none; stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}
    .pagination{ translate: 0 1rem; width: auto; }
    .swiper-pagination-current, .swiper-pagination-total{ display: inline-block; width: 2ch; }
    .slash{ margin: 0 11rem; }
    .slash, .swiper-pagination-total{ opacity: .7; }
    .scrollDown-wrap{ position: absolute; inset: 0; display: grid; place-items: center end; font: 500 14rem var(--font-mon); letter-spacing: 0; pointer-events: none; z-index: 1; }
    .scrollDown{ translate: 19% 23%; text-align: center; }
    .txt{ text-transform: uppercase; letter-spacing: 0; writing-mode: vertical-lr; rotate: 180deg; }
    .bar-wrap{ position: relative; margin: 10rem auto 0; width: 2px; height: 100rem; background: color-mix(in srgb, currentColor 40%, #0000); }
    .bar{ width: 100%; height: 100%; background: currentColor; clip-path: inset(0 0 52%); }
    .dot{ position: absolute; top: 52%; left: 50%; translate: -50% -50%; width: 8px; height: 8px; background: currentColor; border-radius: 50%;  }
    @media(min-width:768px){
        .s1::before{ background-image: url('/images/main/visual-1-pc.webp'); }
        .s2::before{ background-image: url('/images/main/visual-2-pc.webp'); }
        .s3::before{ background-image: url('/images/main/visual-3-pc.webp'); }
    }
    @media(max-width:1279px){
        &{ max-height: 100vh; }
    }
    @media(max-width:767px){
        .s1::before{ background-image: url('/images/main/visual-1-pc.webp'); }
        .s2::before{ background-image: url('/images/main/visual-2-mob.webp'); }
        .s3::before{ background-image: url('/images/main/visual-3-mob.webp'); }
    }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide::before{ scale: 1.05; transition: scale 2s; }
        .swiper-slide-active::before{ scale: 1; }
        .swiper-slide-active .title-wrap > *{ transition: .6s .2s; }
        .swiper-slide-active .title-wrap > *:nth-child(2){ transition-delay: .6s; }
        .swiper-slide:not(.swiper-slide-active) .title-wrap > *{ translate: 40rem; opacity: 0; }
        .bar{ animation: visual-bar 3s infinite; }
        .dot{ animation: visual-dot 3s infinite; }
    }
}
@keyframes visual-bar {
    0%, 10%{ clip-path: inset(0 0 100%); }
    80%, 100%{ clip-path: inset(0); }
}
@keyframes visual-dot {
    0%, 10%{ top: 0%; }
    80%, 100%{ top: 100%; }
}

.main .about{
    &{ --bg-position: 53.125%; padding: clamp(70rem, calc( 140 / var(--inr) * 100vw ), 140rem) 0; background: linear-gradient(90deg, var(--white) var(--bg-position), #f3f5f7 var(--bg-position)); }
    .inr{ display: grid; gap: 50rem; }
    .title-wrap{ grid-area: title; align-self: center; text-wrap: balance; }
    .title{ align-self: center; font-weight: 600; font-size: var(--fs40); }
    .subTitle{ margin-top: 1.31818182em; font-size: var(--fs22); color: #666; }
    .img{ background: no-repeat 50% / cover; }
    .img1{ grid-area: img1; background-position-x: 75%; }
    .img2{ grid-area: img2; height: clamp(200rem, calc( 280 / var(--inr) * 100vw ), 280rem); background-image: url('/images/main/about-2.webp'); }
    .img3{ grid-area: img3; height: clamp(370rem, calc( 481 / var(--inr) * 100vw ), 481rem); background-image: url('/images/main/about-3.webp'); }
    .more{ --color: #333; grid-area: more; place-self: end start; display: inline-flex; align-items: center; gap: 53rem; padding: 20rem 39rem 18rem; border: 1px solid var(--color); font-weight: 600; font-size: 20rem; color: var(--color); }
    .arrow{ translate: 0 -1rem; width: 22rem; height: 7rem; fill:none; stroke:currentColor; stroke-miterlimit: 10; stroke-width: 3px; }
    @media(prefers-reduced-motion:no-preference){
        .more, .more-arrow{ transition: .2s; }
    }
    @media(hover:hover){
        .more:hover{ background: var(--color); color: var(--white); }
        .more:hover .more-arrow{ background-image: url('/images/main/about-more-arrow-white.webp'); }
    }
    @media(min-width:768px){
        .inr{ grid-template: 'title img1 img1' ' img2 img2 img3' 'more more img3' / 730fr 370fr 480fr; }
        .img1{ height: clamp(350rem, calc( 410 / var(--inr) * 100vw ), 410rem); background-image: url('/images/main/about-1-pc.webp'); }
        .img3{ max-width: 400rem; }
        .more{ margin-left: 76rem; }
    }
    @media(max-width:767px){
        &{ --bg-position: 80%; }
        .inr{ grid-template: 'img1' 'title' 'more' }
        .img1{ aspect-ratio: 90/41; background-image: url('/images/main/about-1-pc.webp'); }
        .img2, .img3{ display: none; }
        .more{ margin-top: -10rem; padding:18rem 25rem 16rem; gap:30rem;}
    }
}

.main .nav{
    &{ position: relative; }
    .bg{ position: absolute; inset: 0 0 auto; height: calc( var(--fs100) * 4.93 + var(--overlapping-nav) ); background: no-repeat 50% / cover, linear-gradient(70deg, #194557, #958680); }
    .title{ position: relative; display: grid; place-content: center; height: 4.93em; padding-bottom: 0.5%; text-transform: uppercase; font: 700 var(--fs100) var(--font-mon); letter-spacing: -.02em; color: var(--white); }
    .ul{ display: grid; background: var(--white); text-align: center; box-shadow: 0 37rem 43rem rgba(0, 0, 0, .05); }
    .ul > li + li{ position: relative; }
    .ul > li + li::before{ content: ''; position: absolute; border: solid #d7d4d0; }
    .a{ display: grid; justify-items: center; padding: 61rem 20rem 55rem; }
    .icon{ width: auto; height: 60rem; fill: var(--primary); }
    .head{ margin-top: 1.1em; font-weight: 600; font-size: var(--fs30); }
    .body{ margin-top: 15rem; font-size: 18rem; color: #666; }
    .view{ margin-top: 32rem; text-transform: uppercase; font: 600 20rem var(--font-mon); letter-spacing: .2em; color: var(--primary); }
    @media(prefers-reduced-motion:no-preference){
        .icon, .view{ transition: .2s; }
    }
    @media(hover:hover){
        .a:not(:hover) .icon{ fill: #c5c5c5; }
        .a:not(:hover) .view{ color: #0037263a; }
    }
    @media(min-width:768px){
        .bg{ background-image: url('/images/main/nav-bg-pc.webp'); }
        .ul{ grid-template-columns: repeat(3, 1fr); }
        .ul > li + li::before{ inset: 41rem auto 40rem 0; border-width: 0 0 0 1px; }
    }
    @media(max-width:767px){
        .bg{ background-image: url('/images/main/nav-bg-mob.webp'); }
        .ul > li + li::before{ inset: 0 40rem auto; border-width: 1px 0 0; }
    }
}

.main .location{
    &{ --padding-block: clamp(70rem, calc( 140 / var(--inr) * 100vw ), 140rem); margin-top: calc( var(--overlapping-location) * -1 ); padding: calc( var(--overlapping-location) + var(--padding-block) ) 0 var(--padding-block); background: #f7f7f7 no-repeat 50% / cover; }
    .inr{ display: grid; gap: 40rem 7.2%; }
    .map{ width: 100%; }
    .map .wrap_map{ height: 500rem; }
    .map svg{ pointer-events: none; }
    .map_border, .wrap_controllers{ display: none }
    .info{ display: grid; align-content: center; justify-items: start; }
    .title{ font-weight: 600; font-size: var(--fs40); }
    .address{ margin-top: 23rem; display: flex; gap: 8rem; font-size: 18rem; color: #444; }
    .icon{ translate: 0 3rem; width: 15rem; height: 20rem; fill: var(--primary); vertical-align: text-top; }
    .tel{ margin-top: 0.22222222em; display: inline-block; font: 600 var(--fs45) var(--font-mon); }
    .operating{ margin-top: 33rem; font-size: 18rem; line-height: 1.7; color: #666; }
    @media(min-width:768px){
        &{ background-image: url('/images/main/location-bg-pc.webp'); }
        .inr{ grid-template-columns: 57.14% 1fr; }
    }
    @media(max-width:767px){
        /* &{ background-image: url('/images/main/location-bg-mob.webp'); } */
        .map{ aspect-ratio: 1/1; }
        .map .wrap_map{ height: 100%; }
    }
}

.main .banner{
    &{ padding: clamp(70rem, calc( 131 / var(--inr) * 100vw ), 131rem) 0 clamp(70rem, calc( 119 / var(--inr) * 100vw ), 119rem); background: #565154 no-repeat 50% / cover; font-weight: 600; font-size: var(--fs50); color: var(--white); }
    @media(min-width:768px){
        &{ background-image: url('/images/main/banner-pc.webp'); }
    }
    @media(max-width:767px){
        &{ background-image: url('/images/main/banner-mob.webp'); }
    }
}