@charset "utf-8";

.main .visual{ contain: content; position: relative; display: grid; align-content: center; height: 100svh; min-height: 550rem; padding: var(--header-height) 0 6.8%; background: var(--black);
    .swiper{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
    .swiper-slide{ contain: content; }
    .img{ width: 100%; height: 100%; background: no-repeat 50% / cover; }
    .heading-wrapper{ height: 100%; color: #fff; }
    .heading{ margin-bottom: 0.52727273em; font: 700 var(--fs55)/1.36363636 var(--font-pre); }
    .subHeading{ font: 600 var(--fs22)/1.5 var(--font-mon); }
    .control{ --black: #222; position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 40rem; padding: 29rem 59.5rem 29rem; background: #fff; }
    .state{ flex-shrink: 0; position: relative; width: 12rem; height: 15rem; }
    .state::before{ content: ''; position: absolute; inset: -10rem; }
    .state::after{ content: ''; position: absolute; inset: 0; background: currentColor; }
    .state.isPlay::after{ clip-path: polygon(0 100%, 0 0, 4rem 0, 4rem 100%, 8rem 100%, 8rem 0, 100% 0, 100% 100%); }
    .state:not(.isPlay)::after{ clip-path: polygon(0 100%, 0 0, 100% 50%); }
    .pagination{ all: unset; display: flex; align-items: center; gap: 7rem; font: 700 18rem var(--font-mon); color: #cbcbcb; }
    .swiper-pagination-current{ text-align: right; color: var(--black); }
    .swiper-pagination-current, .swiper-pagination-total{ width: 2ch; }
    .dot{ display: inline-block; width: 5rem; height: 5rem; background: currentColor; border-radius: 50%; }
    .progress{ position: relative; width: 100%; height: 2px; background: #dedede; }
    .progress::before{ content: ''; position: absolute; inset: 0; background: var(--black); }
    .scrollDown{ position: absolute; right: min(4vw, 2.55%); bottom: 26.2%; display: flex; align-items: center; font: 500 15rem var(--font-mon); color: #fff; writing-mode: vertical-rl; user-select: none; }
    .scrollDown-txt{ translate: 2rem; margin-bottom: 6rem; }
    .arrow{ display: inline-block; width: 9rem; height: 9rem; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; }
    .arrow.a1{ opacity: .4; }
    .arrow.a2{ opacity: .7; }
    @media(prefers-reduced-motion:no-preference){
        .img{ scale: 1.2; transition: 3s; }
        .swiper-slide-active .img{ scale: 1; }
        .heading > *{ --delay: calc( var(--index) * .04s + .3s) }
        .subHeading > *{ --delay: calc( var(--index) * .01s + 2s) }
        .wrapInSpan{ color: color-mix(in srgb, currentColor 0%, #0000); }
        .wrapInSpan > *{ animation: wrapInSpan .6s var(--delay) both; display: inline-block; opacity: 0; color: #fff; }
        .progress::before{ width: var(--progress, 0); }
        .arrow{ animation: scrollDown-arrow 1.2s infinite; }
        .arrow.a2{ animation-delay: .1s; }
        .arrow.a3{ animation-delay: .2s; }
    }
    @media(min-width:768px){
        .i1{ background-image: url('/images/main/visual-1-pc.jpg'); }
        .i2{ background-image: url('/images/main/visual-2-pc.jpg'); }
        .i3{ background-image: url('/images/main/visual-3-pc.jpg'); }
        .i4{ background-image: url('/images/main/visual-4-pc.jpg'); }
        .i5{ background-image: url('/images/main/visual-5-pc.jpg'); }
        .progress{ width: 250rem; }
    }
    @media(max-width:767px){
        .img{ opacity: .8; }
        .i1{ background-image: url('/images/main/visual-1-mob.jpg'); }
        .i2{ background-image: url('/images/main/visual-2-mob.jpg'); }
        .i3{ background-image: url('/images/main/visual-3-mob.jpg'); }
        .i4{ background-image: url('/images/main/visual-4-mob.jpg'); }
        .i5{ background-image: url('/images/main/visual-5-mob.jpg'); }
        .heading-wrapper{ padding-bottom: 70rem; }
        .control{ width: 100%; }
    }
}
@keyframes wrapInSpan {
    0%{ translate: 2ch; opacity: 0; scale: .9; }
    100%{ translate: 0; opacity: 1; scale: 1; }
}
@keyframes scrollDown-arrow {
    0%, 75%, 100%{ opacity: 0; }
    37.5%{ opacity: 1; }
}

.main .common{
    .lead{ font: 600 20rem/1.5 var(--font-mon); color: var(--primary); text-transform: uppercase; }
    .lead + .heading{ margin-top: 0.48888889em; }
    .heading{ font: 600 var(--fs45)/1.33333333 var(--font-pre); text-transform: uppercase; }
    .heading em{ font-style: normal; font-weight: 800; }
    .more{ display: inline-flex; align-items: center; gap: 14rem; padding: 13rem 25rem; background: #222; border-radius: 5em; font: 500 17rem var(--font-mon); text-transform: uppercase; color: #fff; }
    .more::after{ content: ''; translate: 0 -1rem; display: inline-block; width: 18rem; height: 13rem; background: url('/images/main/common-arrow-white.png') no-repeat 50% / contain; }
    @media(prefers-reduced-motion:no-preference){
        .more, .more::after{ transition: .3s; }
    }
    @media(hover){
        .more:hover{ background: 0; color: #222; }
        .more:hover::after{ background-image: url('/images/main/common-arrow-black.png'); }
    }
}

.main .about{ contain: content; padding: clamp(70rem, calc( 200 / var(--inr) * 100vw ), 200rem) 0 clamp(70rem, calc( 236 / var(--inr) * 100vw ), 236rem);
    .inr{ display: grid; gap: 73rem 0; }
    .more{ margin-top: 50rem; }
    .bg-txt{ position: relative; translate: -1.33ch 12rem; z-index: -1; font: 800 clamp(10rem, calc( 250 / var(--inr) * 100vw ), 250rem) var(--font-mon); opacity: .07; user-select: none; }
    .item{ display: grid; }
    .pic{ grid-area: pic; display: block; }
    .img{ display: block; width: 100%; height: auto; }
    .sa{ grid-area: sa; font: 500 15rem var(--font-mon); color: #aaa; writing-mode: vertical-rl; }
    .txt-wrapper{ grid-area: txt; }
    .category{ font: 500 22rem/1.5 var(--font-pre); color: var(--primary); }
    .title{ margin: .1em 0 0.76666667em; font: 700 var(--fs30)/1.5 var(--font-mon); }
    .description{ font-size: 17rem; line-height: 1.47058824; color: #666; }
    .item.i1{ justify-self: end;
        .pic{ order: 2; }
        .img{ max-width: clamp(360rem, calc( 480 / var(--inr) * 100vw ), 480rem); }
        .sa{ order: 3; }
        .txt-wrapper{ align-self: end; order: 1; }
    }
    .item.i2{ grid-template: 'sa pic' 'none txt '; gap: 27rem 24rem;
        .sa{ order: -1; }
        .img{ max-width: clamp(360rem, calc( 520 / var(--inr) * 100vw ), 520rem); }
    }
    .item.i3{ grid-template: 'txt txt' 'sa pic' / auto 1fr; gap: 13rem 24rem;
        .txt-wrapper{ order: 1; }
        .pic{ order: 3; }
        .img{ max-width: clamp(360rem, calc( 735 / var(--inr) * 100vw ), 735rem);}
        .sa{ order: 2; }
    }
    @media(min-width:768px){
        .inr{ grid-template: 'a b' 'c d' / 40.14285714% 1fr; }
        .heading-wrapper{ grid-area: 1/a/2/b; translate: 0 -8rem; }
        .bg-txt{ translate: -0.33ch 12rem; font-size: 120rem; }
        .item.i1{ grid-area: 1/a/2/b; translate: 3rem; grid-template: 'txt pic sa'; gap: 27rem 26rem; }
        .item.i3{ translate: 10.95vw 3.35vw; margin-top: 10rem; }
        .item.i3 .img{ width: 90%; }
    }
    @media(min-width:1280px){
        .bg-txt{ translate: -4vw 12rem; font-size: 250rem; }
        .item.i1 .txt-wrapper{ padding: 0 82rem 41rem 0; }
    }
    @media(min-width:1536px){
        .bg-txt{ translate: -11.8vw 12rem; }
        .item.i3 .img{ width: 100%; }
    }
    @media(max-width:1279px) and (min-width:768px){
        .item.i1 .txt-wrapper{ padding: 0 30rem 10rem 0; }
    }
    @media(max-width:767px){
        .bg-txt{ display: none; }
        .item.i1{ grid-template: 'pic sa' 'txt txt'; gap: 27rem 26rem; }
    }
}

.main .product{ contain: content; padding: clamp(70rem, calc( 142 / var(--inr) * 100vw ), 142rem) 0 clamp(70rem, calc( 193 / var(--inr) * 100vw ), 193rem); background: no-repeat 50% 0 / cover, linear-gradient(#e9e7e3, #fff);
    .heading-wrapper{ display: grid; }
    .more{ place-self: end; }
    .swiper{ overflow: visible; clip-path: inset(0 -100vw 0 0); margin-top: 70rem; }
    .img-wrapper{ contain: content; display: block; aspect-ratio: 446/330; max-width: 446rem; width: 100%; background: #000; }
    .img{ display: block; width: 100%; height: 100%; background: #eee url('/images/common/no-img.png') no-repeat 50% / 148rem; text-indent: -100vw; object-fit: cover; }
    .category{ margin-top: 35rem; display: block; font: 600 17rem/1.5 var(--font-pre); color: var(--primary); }
    .title{ margin-top: 9rem; display: block; font: 600 22rem/1.5 var(--font-pre); }
    @media(hover){
        .btn{ position: absolute; inset: 0; margin: auto; display: block; width: 100rem; height: 100rem; background: color-mix(in srgb, currentColor 30%, #0000); border-radius: 50%; color: #fff; }
        a:not(:hover) .btn{ scale: .8; opacity: 0; }
        .btn::before, .btn::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 34rem; height: 4rem; background: currentColor; }
        .btn::after{ rotate: 90deg; }
        a:hover .img{ scale: 1.05; opacity: .5; }
        @media(prefers-reduced-motion:no-preference){
            .img, .btn{ transition: .3s; }
        }
    }
    @media(hover:none){
        .btn{ display: none; }
    }
    @media(min-width:768px){
        background-image: url('/images/main/product-bg-pc.jpg');
        .lead{ grid-column: 1/3; }
        .more{ grid-column: 2/3; translate: 0 -10rem; }
    }
    @media(max-width:767px){
        background-image: url('/images/main/product-bg-mob.jpg');
        .more{ margin-top: 40rem; }
    }
}

.main .inquiry{ padding: clamp(70rem, calc( 112 / var(--inr) * 100vw ), 112rem) 0 clamp(70rem, calc( 120 / var(--inr) * 100vw ), 120rem); background: var(--black) no-repeat 50% / cover; color: #fff;
    .description{ margin-top: 15rem; font-size: 17rem; line-height: 1.47058824; }
    .more{ float: right; margin-top: 45rem; background: #fff; color: #222; }
    .more::after{ background-image: url('/images/main/common-arrow-black.png'); }
    .heading-wrapper::after{ content: ''; display: block; clear: both; }
    @media(hover){
        .more:hover{ background: #222; color: #fff }
        .more:hover::after{ background-image: url('/images/main/common-arrow-white.png'); }
    }
    @media(min-width:768px){ background-image: url('/images/main/inquiry-bg-pc.jpg'); }
    @media(max-width:767px){ background-image: url('/images/main/inquiry-bg-pc.jpg'); }
}

.main .customer{ padding: clamp(70rem, calc( 150 / var(--inr) * 100vw ), 150rem) 0;
    .inr{ display: grid; gap: 70rem 7.14285714%; }
    .map{ z-index: 0; width: 100%; }
    .map .wrap_map{ height: 441px; }
    .map svg{ pointer-events: none; }
    .map_border, .wrap_controllers{ display: none }
    .heading-wrapper{ display: grid; grid-template-columns: 1fr auto; align-items: center; }
    .heading{ font: 700 var(--fs35)/1.5 var(--font-mon); text-transform: uppercase; }
    .more{ position: relative; translate: 0 -1rem; display: block; aspect-ratio: 1; width: 46rem; background: #222; border-radius: 50%; }
    .more::before, .more::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 21rem; height: 3rem; background: #fff; }
    .more::after{ rotate: 90deg; }
    .list{ margin-top: 26rem; border-top: 3rem solid #bbb; }
    .anchor{ display: grid; grid-template: 'date title' 1.1fr 'date comment' 1fr / auto 1fr; gap: 8rem 24rem; padding: 20rem 0 19rem; border-bottom: 1px solid #ddd; }
    .date{ grid-area: date; display: grid; align-content: center; justify-items: center; aspect-ratio: 1; width: 80rem; background: #222; border-radius: 10rem; color: #fff; }
    .day{ font: 600 var(--fs30) var(--font-mon); }
    .month{ translate: 0 -.13333333em; font: 500 15rem var(--font-mon); }
    .title{ align-self: end; grid-area: title; font: 600 20rem var(--font-pre); color: #222; }
    .comment{ align-self: start; grid-area: comment; color: #777; }
    @media(prefers-reduced-motion:no-preference){
        .more, .date, .title{ transition: .3s; }
    }
    @media(hover){
        .more:hover{ rotate: 180deg; }
        .anchor:hover{
            .date{ background: var(--primary); }
            .title{ color: var(--primary); }
        }
    }
    @media(min-width:1280px){
        .inr{ grid-template-columns: 1fr 50%; }
        .notice{ translate: 0 -2rem; }
    }
    @media(max-width:767px){
        .map{ aspect-ratio: 1/1; }
        .map .wrap_map{ height: 100%; }
    }
}