@charset "utf-8";

.main .visual{ position: relative; height: 740rem; color: #fff;
    .swiper-slide{ position: relative; }
    .bg{ position: absolute; inset: 0; margin-left: auto; max-width: 1820rem; }
    .bg::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; }
    .b1::before{ background-image: url('/images/main/visual-1.jpg'); }
    .b2::before{ background-image: url('/images/main/visual-2.jpg'); }
    .b3::before{ background-image: url('/images/main/visual-3.jpg'); }
    .h2{ display: grid; align-items: center; height: 100%; padding-bottom: 0.9%; font: 600 var(--fs60)/1.33333333 var(--font-pre); letter-spacing: .01em; }
    .control{ position: absolute; inset: auto 0 80rem; z-index: 1; display: flex; align-items: center; justify-content: end; gap: 30rem; }
    .pagination{ display: flex; gap: 30rem; width: auto; }
    .swiper-pagination-bullet{ position: relative; margin: 0; width: 10rem; height: 10rem; background: currentColor; border-radius: 50%; }
    .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){ opacity: .4; }
    .swiper-pagination-bullet::before{ content: ''; position: absolute; inset: -20rem; }
    .state-btn{ position: relative; display: flex; align-items: center; justify-content: center; width: 100rem; aspect-ratio: 1; border-radius: 50%; font: 700 16rem var(--font-mon); letter-spacing: .01em; }
    .state-btn::before{ content: ''; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 50%; opacity: .3; }
    .progress{ --length: 307.3787841796875; position: absolute; inset: 0; fill: none; stroke: currentColor; stroke-width: 2px; stroke-dashoffset: calc(var(--length) * 1px * (1 - var(--progress))); stroke-dasharray: var(--length); transform: rotate(-90deg); }
    .dot{ margin: 0 .5ch; }
    @media(prefers-reduced-motion:no-preference){
        .bg::before{ scale: 1.05; transition: 1.3s; }
        .swiper-slide-active .bg::before{ scale: 1; }
    }
    @media(min-width:768px){
        .bg{ contain: content; left: 2vw; border-radius: 50rem 0 0 50rem; }
    }
    @media(max-width:767px){
        .bg{ background: var(--black); }
        .bg::before{ opacity: .8; }
    }
}

.main .common-h2{ display: flex; flex-wrap: wrap; align-items: center; gap: .2lh 1.7ch;
    .heading{ font: 700 var(--fs30) var(--font-pre); letter-spacing: -.01em; color: #000; }
    .en{ font: 700 17rem var(--font-pla); letter-spacing: -.01em; color: #b5b5b5; }
}

.main .board{ padding: clamp(70rem, calc( 115 / var(--inr) * 100vw ), 115rem) 0 clamp(70rem, calc( 145 / var(--inr) * 100vw ), 145rem);
    .inr{ display: grid; gap: 40rem 3.8%; }
    .common-h2{ display: grid; grid-template-columns: auto 1fr auto; }
    .more{ position: relative; display: block; width: 22rem; aspect-ratio: 1;}
    .more::before, .more::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 2px; height: 100%; background: #222; }
    .more::after{ rotate: 90deg; }
    .list{ margin-top: 43rem; }
    .list > li{ position: relative; }
    .border{ width: 100%; height: 1px; background: #ccc; }
    .list a{ padding: 21rem 0 22rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1ch; border-bottom: 1px dashed #ddd; }
    .title{ font: 600 18rem var(--font-pre); letter-spacing: -.01em; }
    .new::before{ content: '[NEW]'; margin-right: .3ch; font-family: var(--font-mon); letter-spacing: -.01em; color: var(--primary); }
    .comment{ margin-top: 15rem; height: 2lh; line-height: 23rem; letter-spacing: -.01em; color: #777; }
    .date{ display: block; font: 300 14rem var(--font-pre); letter-spacing: -.01em; color: #aaa; }
    @media(prefers-reduced-motion:no-preference){
        .more, .title{ transition: .3s; }
    }
    @media(hover){
        .list a:hover .title{ opacity: .6; }
        .more:hover{ rotate: 180deg; }
    }
    @media(min-width:767px){
        .inr{ grid-template-columns: 1fr 1px 1fr 1px 1fr; }
        .list > li:first-child{
            a{ display: block; padding-bottom: 27rem; }
            .date{ margin-top: 21rem; display: block; }
        }
        .border{ width: 1px; height: 100%; }
        @media(max-width:1279px){
            .common-h2{ grid-template-columns: 1fr auto; }
            .en{ grid-column: 1/3; order: 3; }
        }
    }
    @media(max-width:767px){
        .comment{ display: none; }
    }
}

.main .inquiry{ margin-bottom: clamp(70rem, calc( 150 / var(--inr) * 100vw ), 150rem);
    .response{ margin-top: 30rem; font: 500 var(--fs25) var(--font-pre); letter-spacing: -.01em; color: #222; }
    .tel{ font: 700 var(--fs28) var(--font-pla); letter-spacing: -.01em; color: var(--primary); }
    .list{ margin-top: 36rem; display: grid; gap: 40rem; }
    .li{ height: 300rem; padding: clamp(43rem, calc( 53 / var(--inr) * 100vw ), 53rem) clamp(41rem, calc( 51 / var(--inr) * 100vw ), 51rem); background: var(--black) no-repeat 50% / cover; color: #fff; }
    .l1{ background-image: url('/images/main/inquiry-bg-1.jpg'); }
    .l2{ background-image: url('/images/main/inquiry-bg-2.jpg'); }
    .li a { display:inline-block; width:100%; height:100%;}
    .h3{ margin-bottom: .44em; font-size: var(--fs25); letter-spacing: -.01em; }
    .description{ font: 300 17rem/26rem var(--font-pre); letter-spacing: -.01em; }
    @media(min-width:768px){
        .list{ grid-template-columns: 90fr 56fr; }
    }
}