.main{
    &{ contain: content; }
    .text-gray{ color: var(--gray); }
    .title{ text-transform: uppercase; font: 700 var(--fs40) var(--font-gol); }
    .subTitle{ margin-top: 23rem; text-wrap: pretty; font-size: 16rem; line-height: 1.66666667; color: #666; }
}

.main .visual{
    &{ position: relative; color: var(--white); }
    .swiper-slide{ contain: content; }
    .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; }
    .content{ position: absolute; inset: 56.9% 0 auto; translate: 0 -50%; pointer-events: none; z-index: 1; }
    .control{ position :relative; margin-left: auto; aspect-ratio: 1; width: clamp(60rem, calc( 70 / var(--inr) * 100vw ), 70rem); display: flex; align-items: center; justify-content: center; }
    .circle, .circle-opacity{ position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 3px; stroke: currentColor; fill: none; stroke-dashoffset: calc(var(--stroke-dasharray) * 1px * (1 - var(--progress))); stroke-dasharray: var(--stroke-dasharray); transform: rotate(-90deg); }
    .circle{ --progress: 0; --stroke-dasharray: 208; stroke-dashoffset: calc(var(--stroke-dasharray) * 1px * (1 - var(--progress))); stroke-dasharray: var(--stroke-dasharray); }
    .circle-opacity{ opacity: .3; }
    .state-btn{ width: 100%; height: 100%; display: grid; place-content: center; cursor: pointer; pointer-events: auto; z-index: 1; }
    .state-icon{ display: block; width: 9rem; height: 8rem; background: currentColor; }
    .state-icon:not(.isPlay){ clip-path: polygon(1rem 0, 8rem 50%, 1rem 100%); }
    .state-icon.isPlay{ clip-path: polygon(0 100%, 0 0, 3rem 0, 3rem 100%, 6rem 100%, 6rem 0, 100% 0, 100% 100%); }
    .heading{ margin: .15384615em 0 .24615385em; text-transform: uppercase; font: 800 var(--fs65) var(--font-gol); text-shadow: 0 .15384615em .30769231em rgba(85, 85, 85, .25); }
    .subHeading{ font-weight: 500; font-size: 20rem; text-shadow: 0 .25em .5em rgba(85, 85, 85, .2); }
    @media(prefers-reduced-motion:no-preference){
        .swiper-slide::before{ scale: 1.05; transition: 3s; }
        .swiper-slide-active::before{ scale: 1;  }
        .heading{ animation: visual-heading .6s .2s both; }
        .subHeading{ animation: visual-heading .6s .6s both; }
    }
    @media(min-width:768px){
        &{ height: 970rem; }
        .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:767px){
        &{ min-height: 450rem; height: 100dvh; }
        .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'); }
    }
}
@keyframes visual-heading {
    0%{ translate: 0 20rem; opacity: 0; }
    100%{ translate: 0 0; opacity: 1; }
}

.main .business{
    .title-wrapper{ padding: clamp(70rem, calc( 125 / var(--inr) * 100vw ), 125rem) 0 clamp(70rem, calc( 124 / var(--inr) * 100vw ), 124rem); text-align: center; }
    .lead{ text-transform: uppercase; font: 600 16rem var(--font-gol); color: var(--primary); }
    .heading{ margin-top: 0.62222222em; text-wrap: balance; font-size: var(--fs45); }
    .subHeading{ margin-top: 23rem; text-wrap: pretty; font-size: 18rem; line-height: 1.66666667; color: #666; }
    .link-list{ display: grid; }
    .link{ contain: content; position: relative; display: grid; grid-template-rows: 1fr auto auto; aspect-ratio: 48/61; padding: 14.6% 10.4%; background: var(--black) no-repeat 50% / cover; color: var(--white); }
    .link::before{ content: ''; position: absolute; inset: auto 0 0; height: 349rem; background: linear-gradient(0deg, #000, #000 6.8%, #0000); pointer-events: none; opacity: .85; }
    .head{ position: relative; align-self: end; font-size: var(--fs25); text-shadow: 0 10rem 20rem rgba(85, 85, 85, 0.1); }
    .body{ position: relative; margin-top: 12rem; display: block; text-wrap: pretty; color: color-mix(in srgb, currentColor 80%, #0000); }
    .view{ contain: content; position: relative; margin-top: 27rem; height: 1em; display: inline-flex; align-items: center; gap: 9rem; text-transform: uppercase; font: 14rem var(--font-gol); }
    .view::after{ content: ''; display: inline-block; width: .42em; height: .42em; border: solid currentColor; border-width: 1px 1px 0 0; rotate: 45deg; }
    @media(prefers-reduced-motion:no-preference){
        .link::before{ transition: .4s; }
        .view{ transition: .3s ease-in-out; }
    }
    @media(hover){
        .link:not(:hover)::before{ opacity: .8; }
        .link:not(:hover) .view{ margin: 0; height: 0; }
    }
    @media(min-width:768px){
        .link-list{ grid-template-columns: repeat(4, 1fr); }
        .link.l1{ background-image: url('/images/main/business-1-pc.webp'); }
        .link.l2{ background-image: url('/images/main/business-2-pc.webp'); }
        .link.l3{ background-image: url('/images/main/business-3-pc.webp'); }
        .link.l4{ background-image: url('/images/main/business-4-pc.webp'); }
    }
    @media(max-width:767px){
        .link-list{ grid-template-columns: repeat(2, 1fr); }
        .link.l1{ background-image: url('/images/main/business-1-mob.webp'); }
        .link.l2{ background-image: url('/images/main/business-2-mob.webp'); }
        .link.l3{ background-image: url('/images/main/business-3-mob.webp'); }
        .link.l4{ background-image: url('/images/main/business-4-mob.webp'); }
    }
}

.main .notice{
    &{ contain: content; padding: clamp(70rem, calc( 130 / var(--inr) * 100vw ), 130rem) 0; }
    .title-wrapper{ display: grid; align-items: end; gap: 0 19rem; }
    .control{ display: flex; justify-content: end; gap: 10rem; }
    .btn{ display: grid; place-content: center; aspect-ratio: 1; width: clamp(50rem, calc( 60 / var(--inr) * 100vw ), 60rem); background: #eee; border-radius: 50%; }
    .swiper-button-disabled{ opacity: .6; }
    .arrow{ translate: 0 16%; width: 15rem; height: auto; fill: #888; }
    .swiper{ contain: content; overflow: initial; margin-top: 49rem; }
    .link{ display: block; padding: 50rem 39rem 49rem; border: 1px solid #e5e5e5; }
    .category{ display: inline-block; padding: 6rem 13rem 6rem; background: var(--primary); border-radius: 2rem; text-transform: uppercase; font: 500 13rem var(--font-gol); color: var(--white); }
    .head{ margin-top: 15rem; font-weight: 700; font-size: 18rem; }
    .body{ margin-top: 15rem; min-height: 3.5em; line-height: 1.65; color: #666; }
    .date{ margin-top: 22rem; display: block; font-size: 15rem; color: #888; }
    .view{ margin-top: 25rem; display: grid; place-content: center; padding: 12rem 13rem 14rem; background: var(--black); border: 1px solid #0000; border-radius: 3rem; font: 15rem var(--font-gol); color: var(--white); }
    .scrollbar{ margin-top: 40rem; height: 3px; background: #eee; }
    .swiper-scrollbar-drag{ background: var(--black); border-radius: 0; }
    @media(hover){
        .link:not(:hover) .view{ background: 0; border-color: #e5e5e5; color: #888; }
    }
    @media(min-width:768px){
        .title-wrapper{ grid-template-columns: auto 1fr auto; }
        .title{ translate: 0 16%; }
        .subTitle{ margin-top: 0; translate: 0 26%; }
    }
    @media(max-width:767px){
        .title-wrapper{ grid-template-columns: 1fr auto; }
        .subTitle{ grid-area: 2 / 1 / 3 / 3; }
        .control{ grid-area: 1 / 2 / 2 / 3; }
    }
}

.main .contact{
    &{ padding: 70rem 0 76rem; background: #486471 no-repeat 50% / cover; text-align: center; color: var(--white); }
    .lead{ text-transform: uppercase; font: 600 16rem var(--font-gol); }
    .heading{ margin-top: 0.57894737em; text-wrap: pretty; font-size: var(--fs38); }
    .more{ margin-top: 27rem; display: inline-block; padding: 17rem 46rem 16rem; background: color-mix(in srgb, currentColor 8%, #0000); border: 1px solid currentColor; border-radius: 5em; font-weight: 500; font-size: 15rem; }
    @media(min-width:768px){
        &{ background-image: url('/images/main/contact-pc.webp'); }
    }
    @media(max-width:767px){
        &{ background-image: url('/images/main/contact-mob.webp'); }
    }
}

.main .horizontal{
    &{ contain: content; display: grid; gap: 70rem 60rem; padding: clamp(70rem, calc( 109 / var(--inr) * 100vw ), 109rem) 0 clamp(70rem, calc( 120 / var(--inr) * 100vw ), 120rem); }
    .subTitle{ margin-top: 15rem; }
    .more{ contain: content; position: relative; margin-top: 28rem; display: inline-flex; align-items: center; gap: 16rem; height: 38rem; padding: 10rem 20rem 10rem 19rem; border: 1px solid #666; font: 500 14rem var(--font-pre); color: #666; }
    .plus{ position: relative; display: inline-block; width: 11rem; height: 11rem; color: #686868; }
    .plus::before, .plus::after{ content: ''; position: absolute; inset: 0; margin: auto; background: currentColor; }
    .plus::before{ width: 100%; height: 1px; }
    .plus::after{ width: 1px; height: 100%; }
    .img{ margin-top: 24rem; aspect-ratio: 67/26; background: var(--black) no-repeat 50% / cover; }
    @media(prefers-reduced-motion:no-preference){
        .more, .more-txt, .plus{ transition: .4s; }
    }
    @media(hover){
        .more{ --text-width: 80rem; padding-left: calc( 19rem + var(--text-width)); }
        .more:not(:hover){ padding-right: 12rem; padding-left: 13rem; border-color: #e1e1e1; }
        .more-txt{ position: absolute; left: 20rem; width: var(--text-width); clip-path: inset(0); }
        .more:not(:hover) .more-txt{ clip-path: inset(0 100% 0 0); }
        .more:not(:hover) .plus{ border-color: #e1e1e1; color: #8a8a8a; }
    }
    @media(min-width:768px){
        &{ grid-template-columns: repeat(2, 1fr); }
        .img.i1{ background-image: url('/images/main/horizontal-1-pc.webp'); }
        .img.i2{ background-image: url('/images/main/horizontal-2-pc.webp'); }
    }
    @media(max-width:767px){
        .img.i1{ background-image: url('/images/main/horizontal-1-mob.webp'); }
        .img.i2{ background-image: url('/images/main/horizontal-2-mob.webp'); }
    }
}