@charset "utf-8";

.main{ position: relative;
	.main-bg{ position: absolute; inset: auto 0 0; z-index: -1; height: 1638rem; background: url('/images/main/main-bg.jpg') no-repeat 50% 100% / cover; }
	.common-lead{ font: 600 var(--fs22) var(--font-pop); color: var(--primary); }
	.common-lead + .common-h2{ margin-top: .38181818em; }
	.common-h2{ font: 700 var(--fs55)/1.27272727 var(--font-pre); color: #000; }
}

.main .visual{ contain: content; width: 100%; height: 100svh; min-height: 600rem; color: var(--white); text-align: center;
	&::before, .swiper-slide::before{ content: ''; position: absolute; inset: 0; z-index: -1; background: var(--black) no-repeat 50% / cover; }
    &[data-bg="1"]::before, [data-bg="1"]::before{ background-image: url('/images/main/visual-5.jpg'); }
    &[data-bg="2"]::before, [data-bg="2"]::before{ background-image: url('/images/main/visual-6.jpg'); }
    &[data-bg="3"]::before, [data-bg="3"]::before{ background-image: url('/images/main/visual-2.jpg'); }
    &[data-bg="4"]::before, [data-bg="4"]::before{ background-image: url('/images/main/visual-3.jpg'); }
	.swiper-slide{ position: relative; z-index: 0; display: grid; align-items: center; padding-bottom: 3.8%; isolation: isolate; }
    .swiper-slide-active{ z-index: 2; }
    &.prev .swiper-slide-next, &.next .swiper-slide-prev{ z-index: 1; }
	.h2{ font: 700 var(--fs65)/1.30769231 var(--font-pre); }
	.t1{ display: block; font: 700 var(--fs28) var(--font-pop); }
	.t2{ margin-top: .38461538em; display: block; }
	.control{ position: absolute; inset: auto 0 22.9%; translate: 0 -50%; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 34rem; font: 600 20rem var(--font-pop); letter-spacing: 0; }
	.btn{ position: relative; width: 45rem; height: 16rem; }
	.btn::before{ content: ''; position: absolute; inset: 0; background: url('/images/main/arrow-white.png') no-repeat 50% / contain; }
	.next::before{ rotate: 180deg; }
	.pagination{ all: unset; display: inline-flex; align-items: center; gap: 19rem; }
	.dot{ display: inline-block; width: 6rem; aspect-ratio: 1; background: currentColor; border-radius: 50%; }
	.dot, .swiper-pagination-total{ opacity: .4; }
	.mouse{ position: absolute; inset: auto 0 50rem; z-index: 1; margin: auto; width: 44rem; aspect-ratio: 44/64; padding: 10rem; border: 2px solid currentColor; border-radius: 5em; }
	.wheel{ margin: 0 auto; width: 10rem; aspect-ratio: 1; background: currentColor; border-radius: 50%; }
}
@media(prefers-reduced-motion: no-preference){
	.main .visual.effect .swiper-slide-active{ clip-path: inset(30%); animation: slide_transition .8s both; }
	@keyframes slide_transition{
		0%{ clip-path: inset(30%); }
		100%{ clip-path: inset(0); }
	}
	.main .visual .swiper-slide::before{ transform: scale(1.1); transition: 1.5s; }
	.main .visual .swiper-slide-active::before{ transform: scale(1); }

	.main .visual .h2 > *{ translate: 0 20rem; opacity: 0; transition: .8s .3s; }
	.main .visual .swiper-slide-active .h2 > *{ translate: 0; opacity: 1; }
	.main .visual .swiper-slide-active .h2 > *:nth-child(2){ transition-delay: .6s; }

	.main .visual .wheel{ animation: wheel 1.5s infinite; }
	@keyframes wheel {
		0%, 10%{ translate: 0; opacity: 1; }
		33%{ opacity: 1; }
		90%, 100%{ translate: 0 30rem; opacity: 0; }
	}
}

.main .about{ height: 200svh; min-height: 500rem; text-align: center;
	.sticky{ position: sticky; top: 0; display: grid; place-items: center; height: 100svh; }
	.bg{ position: absolute; inset: 0; margin: auto; background: url('/images/main/about-bg.jpg') no-repeat 50% / cover; }
	.description{ margin-top: 38rem; font: 300 20rem/1.5 var(--font-pre); color: #666; }
}

.main .product{ contain: content; padding: clamp(70rem, calc( 192 / var(--inr) * 100vw ), 192rem) 0 35rem;
	.hGroup{ display: grid; gap: 0 40rem; }
	.control{ justify-self: end; margin-top: 40rem; display: inline-flex; align-items: center; gap: 40rem; }
	.btn{ position: relative; width: 45rem; aspect-ratio: 45/16; }
	.swiper-button-disabled{ opacity: .3; }
	.btn::before{ content: ''; position: absolute; inset: 0; background: url('/images/main/arrow-black.png') no-repeat 50% / contain; }
	.next::before{ rotate: 180deg; }
	.swiper{ overflow: visible; clip-path: inset(0 -100vw 0 0); margin-top: 69rem; }
	.a{ display: grid; gap: 27rem; }
	.img{ grid-column: 1/3; display: block; width: 100%; height: auto; }
	.title{ margin-left: 19rem; font: 600 var(--fs22) var(--font-pre); }
	.arrow{ justify-self: end; margin: 5rem 40rem 0 0; display: inline-block; width: 16rem; aspect-ratio: 1; background: url('/images/main/product-more.png') no-repeat 50% / contain; }
	@media(min-width:768px){
		.control{ grid-area: 1/2/3/3; align-self: end; margin-bottom: calc(var(--fs55) * 0.45454545); }
	}
}

.main .nav{ margin: clamp(35rem, calc( 172 / var(--inr) * 100vw ), 172rem) auto clamp(35rem, calc( 157 / var(--inr) * 100vw ), 157rem); display: grid; gap: 20rem; color: #fff;
	.a{ display: grid; align-items: center; padding: clamp(35rem, calc( 61 / var(--inr) * 100vw ), 61rem) clamp(40rem, calc( 80 / var(--inr) * 100vw ), 80rem) clamp(35rem, calc( 62 / var(--inr) * 100vw ), 62rem) clamp(40rem, calc( 79 / var(--inr) * 100vw ), 79rem); background: var(--primary) no-repeat 50% / cover; }
	.a1{ background-image: url('/images/main/nav-1.jpg'); }
	.a2{ background-image: url('/images/main/nav-2.jpg'); }
	.common-lead{ color: inherit; }
	.title{ margin-top: .4em; font: 700 var(--fs40) var(--font-pre); }
	.more{ grid-area: 1/2/3/3; justify-self: end; position: relative; display: inline-block; width: clamp(60rem, calc( 90 / var(--inr) * 100vw ), 90rem); aspect-ratio: 1; border-radius: 50%; background: url('/images/main/nav-more.png') no-repeat 50% / 21rem; }
	.more::before{ content: ''; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: inherit; }
	@media(prefers-reduced-motion:no-preference){
		.more::before{ transition: .3s; }
	}
	@media(hover){
		a:not(:hover) .more::before{ opacity: .5; }
	}
	@media(min-width:768px){
		&{ grid-template-columns: repeat(2, 1fr); }
	}
}

.main .inquiry{ position: relative; padding: 35rem 0 clamp(70rem, calc( 250 / var(--inr) * 100vw ), 250rem); color: #fff;
	.inr{ display: grid; gap: 40rem; }
	.common-lead, .common-h2{ color: inherit; }
	.description{ margin-top: calc(var(--fs55) * 0.69090909); font: 300 20rem/1.5 var(--font-pre); }
	.submit.sb1{ contain: content; position: relative; margin-top: 113rem; display: none; align-items: center; justify-content: center; width: 200rem; aspect-ratio: 1; background: var(--primary); border-radius: 50%; box-shadow: 0 0 30rem rgba(255, 255, 255, 0.3); font: 600 var(--fs22) var(--font-pre); }
	.item + .item{ margin-top: 36.5rem; }
	.item-title{ display: inline-flex; align-items: center; gap: 15rem; font-size: var(--fs22); }
	.item-title::before{ content: ''; display: inline-block; width: 24rem; aspect-ratio: 1; background: no-repeat 50% / contain; }
	.t1::before{ background-image: url('/images/main/inquiry-1.png'); }
	.t2::before{ background-image: url('/images/main/inquiry-2.png'); }
	.t3::before{ background-image: url('/images/main/inquiry-3.png'); }
	.t4::before{ background-image: url('/images/main/inquiry-4.png'); }
	.input{ margin-top: 8rem; width: 100%; padding: 12rem 0; background: 0; border: solid currentColor; border-width: 0 0 2px; font-size: 18rem; }
	.textarea{ margin-top: 22rem; width: 100%; height: 200rem; padding: 26rem 28rem; background: 0; border: 2px solid currentColor; font-size: 18rem; backdrop-filter: blur(8px); }
	.input::placeholder, .textarea::placeholder{ color: #ffffff80; }
	.last-item{ margin-top: 33rem; display: flex; align-items: center; justify-content: space-between; }
	.checkbox-label{ display: inline-flex; align-items: center; gap: 10rem; cursor: pointer; }
	#checkbox{ appearance: none; width: 18rem; height: auto; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; cursor: pointer; }
	#checkbox:checked{ background: url('/images/main/inquiry-check.png') no-repeat 50% 50% / 10rem; }
	#checkbox:not(:checked) ~ .checkbox-txt{ opacity: .6; }
	.privacyLink{ display: inline-flex; gap: 6rem; padding: 7rem 13rem 6rem 12rem; border: 2px solid currentColor; border-radius: 5em; }
	.detail{ display: inline-block; width: 17rem; aspect-ratio: 1; background: url('/images/main/inquiry-detail.png') no-repeat 50% / contain; }
	.submit.sb2{ margin-top: 36.5rem; width: 100%; padding: 1ch; border: 2px solid currentColor; border-radius: 5em; }
	@media(prefers-reduced-motion:no-preference) and (any-hover:hover){
		.submit.sb1::before{ --size:0; content:""; position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size); background:radial-gradient(circle closest-side, #a3b1f1, transparent); transform:translate(-50%, -50%); mix-blend-mode: screen; transition: .2s ease, left 0s, top 0s; }
		.submit.sb1:hover::before{ --size:200px; }
	}
	@media(min-width:768px){
		.inr{ grid-template-columns: 1fr 50%; }
		.submit.sb1{ display: flex; }
		.item-group{ padding-top: 60rem; }
		.submit.sb2{ display: none; }
	}
}