@charset "UTF-8";


/* base settings */
@media all {
	:root {
		--frontale: #37a3e2;
		--modal-closer: var(--frontale);
	}
	body {
		font-family: "Noto Sans JP", sans-serif;
		font-feature-settings: "palt";
		line-height: 1;
	}
	body, a {color: #000;}
	.ilb {display: inline-block;}
	.reg {
		display: inline-block;
		font-size: .75em;
		transform: translateY(27%);
	}
	sub:not(.reg) {
		display: inline-block;
		font-size: .7em;
	}
	.filter_blk {
		filter: brightness(0);
	}
	img {width: 100%;height: auto;}
	section {position: relative;}

	/* sp & tab */
	@media only screen and (max-width: 1024px) {
		.pcOnly {display: none!important;}
	}
	/* sp */
	@media only screen and (max-width: 767px) {
		:root {font-size: .25vw;}
		body {font-size: 15rem;}
		.spNone, .tabOnly {display: none!important;}
		.site-main {overflow: clip;}
	}
	/* pc & tab */
	@media print,
	(min-width: 768px) {
		body {font-size: 16rem;}
		.site-main {overflow: clip;}
		.spOnly {display: none!important;}
		/* pc */
		@media (min-width: 1025px) {
			:root {font-size: 1px;}
			.pcNone, .tabOnly {display: none!important;}
			.site-main,
			.site-footer {min-width: 1280px;}
		}
		/* tab */
		@media (max-width: 1024px) {
			:root {font-size: 0.085vw;}
			.pcOnly, .spOnly, .tabNone {display: none!important;}
		}
		/* wide */
		@media (min-width: 1600px) {
			:root {font-size: .0625vw;}
		}
	}
}

/* splash */
@media all {
	.splash-base {
		overflow: hidden;
		position:fixed;
		z-index:1000;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		background: #fff;
	}
	.splashed .splash-base {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}
	.splash-skip {
		position: absolute;
		display: block;
	}

	.splash-logo {transition: clip-path .5s ease-in-out;}
	.splash-logo.start {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	.splash-logo,
	.splash-logo2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.splash-imgs img {
		position: absolute;
		opacity: 0;
		filter: blur(20rem);
		visibility: hidden;
		--img_duration: 2s
	}
	.splash-imgs.start img {animation: spl_img var(--img_duration) ease-in-out forwards;}
	.splash-img6 {animation-duration: 2s!important;}
	.splash-img5 {animation-duration: 2.5s!important;}

	.splash-logo-img {
		visibility: visible;
		opacity: 1;
		transition: opacity 1s, filter 1s, visibility 1s;
	}
	.splash-logo.end .splash-logo-img {
		visibility: hidden;
		opacity: 0;
		filter: blur(5rem);
	}
	.splash-logo2 {
		visibility: hidden;
		opacity: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: 7s linear;
	}
	.splash-logo2.start {
		visibility: visible;
		opacity: 1;
	}



	/* sp */
	@media only screen and (max-width: 767px) {
		.site-main {
			opacity: 0;
			transition: opacity .5s .25s;
		}
		.splashed .site-main {opacity: 1;}
		.splash-base {
			top: auto;
			bottom: 0;
			height: 100svh;
			transition: opacity .5s, visibility .5s;
		}
		.splash-skip {
			bottom: 20rem;
			right: 20rem;
			width: 70rem;
			height: 26rem;
		}

		.splash-logo {
			clip-path: polygon(0 -100%, 100% -100%, 100% 0, 0 0);
		}

		.splash-imgs img {
			width: 200rem;
		}
		.splash-img0 {top:    calc(50% - 240rem); left: -5%;}
		.splash-img1 {bottom: calc(50% - 240rem); left: -5%;}
		.splash-img2 {top:    calc(50% - 240rem); right: -5%;}
		.splash-img3 {bottom: calc(50% - 240rem); right: -5%;}
		.splash-img4 {top:    calc(50% - 240rem); left: -5%;}
		.splash-img5 {bottom: calc(50% - 240rem); left: calc(50% - 100rem);}
		.splash-img6 {top:    calc(50% - 240rem); right: -5%;}

		@keyframes spl_img {
			0% {
				opacity: 0;
				visibility: visible;
				filter: blur(5rem);
				transform: scale(2);
			}
			50% {
				opacity: 1;filter: blur(0);
			}
			100% {
				opacity: 0;
				visibility: hidden;
				filter: blur(70rem);
				transform: scale(0);
			}
		}

		.splash-30th {width: 130rem;}
		.splash-together {
			margin-top: 44rem;
			width: 380rem;
		}
	}

	/* pc & tab */
	@media (min-width: 768px) {
		.splash-base {transition: opacity 2s, visibility 2s, filter 2s;}
		.splashed .splash-base {filter: blur(50rem);}
		.splash-skip {
			bottom: 50rem;
			right: 30rem;
			width: 70rem;
			height: 26rem;
		}
		
		.splash-logo {
			width: 864rem;
			clip-path: polygon(-100% 0, 0 0, 0 100%, -100% 100%);
		}

		.splash-imgs img {
			opacity: 0;
			width: 800rem;
			transform: scale(1.4);
		}

		.splash-imgs.start img.splash-img0 {
			animation: spl_img var(--img_duration) ease-out forwards, spl_img0 var(--img_duration) ease-out forwards;
		}
		.splash-imgs.start img.splash-img1 {
			animation: spl_img var(--img_duration) ease-out forwards, spl_img1 var(--img_duration) ease-out forwards;
		}
		.splash-imgs.start img.splash-img2 {
			animation: spl_img var(--img_duration) ease-out forwards, spl_img2 var(--img_duration) ease-out forwards;
		}
		.splash-imgs.start img.splash-img3 {
			animation: spl_img var(--img_duration) ease-out forwards, spl_img3 var(--img_duration) ease-out forwards;;
		}
		.splash-imgs.start img.splash-img4 {
			animation: spl_img var(--img_duration) ease-out forwards, spl_img0 var(--img_duration) ease-out forwards;;
		}
		.splash-imgs.start img.splash-img5 {
			animation: spl_img var(--img_duration) ease-out forwards, spl_img1 var(--img_duration) ease-out forwards;;
		}
		.splash-imgs.start img.splash-img6 {
			animation: spl_img var(--img_duration) ease-out forwards, spl_img2 var(--img_duration) ease-out forwards;;
		}



	@keyframes spl_img {
		0% {
			opacity: 0;
			visibility: visible;
			filter: blur(5rem);
			transform: scale(1.5);
		}
		50% {
			opacity: 1;filter: blur(0);
		}
		100% {
			opacity: 0;
			visibility: hidden;
			filter: blur(70rem);
			transform: scale(0);
		}
	}
	.splash-img0, .splash-img4 {top: -5%; left: -5%;}
	@keyframes spl_img0 {
		0% {top: -5%; left: -5%;}
		100% {top: calc(50% - 266rem);left: calc(50% - 400rem);}
	}
	.splash-img1,.splash-img5 {top: -5%; right: -5%;}
	@keyframes spl_img1 {
		0% {top: -5%; right: -5%;}
		100% {top: calc(50% - 266rem);right: calc(50% - 400rem);}
	}
	.splash-img2, .splash-img6 {bottom: -5%; right: -5%;}
	@keyframes spl_img2 {
		0% {bottom: -5%; right: -5%;}
		100% {bottom: calc(50% - 266rem);right: calc(50% - 400rem);}
	}
	.splash-img3 {bottom: -5%; left: -5%;}
	@keyframes spl_img3 {
		0% {bottom: -5%; left: -5%;}
		100% {bottom: calc(50% - 266rem);left: calc(50% - 400rem);}
	}
	/* .splash-img4 {top: -5%; left: -5%;}
	@keyframes spl_img4 {
		0% {top: -5%; left: -5%;}
		100% {top: calc(50% - 266rem);left: calc(50% - 400rem);}
	}
	.splash-img5 {top: 5%; right: 10%;}
	@keyframes spl_img5 {
		0% {top: 5%; right: 10%;}
		100% {top: calc(50% - 266rem);right: calc(50% - 400rem);}
	}
	.splash-img6 {bottom: 0%; left: -5%;}
	@keyframes spl_img6 {
		0% {bottom: 0%; left: -5%;}
		100% {bottom: calc(50% - 266rem);left: calc(50% - 400rem);}
	} */

		.splash-30th {width: 204rem;}
		.splash-together {
			margin-top: 84rem;
			width: 550rem;
		}
		/* tab */
		@media (max-width: 960px) {}
		/* pc */
		@media (min-width: 961px) {}
		/* wide */
		@media (min-width: 1600px) {}
	}
}

/* .site-header */
@media all {
	.iPhone-hack {
		font-size: 0;
		height: 0;
		transition: height 2s;
	}
	
	.site-header {
		position: fixed;
		z-index: 1010;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100vw;
		background-color: var(--frontale);
	}
	.site-header :where(img, a) {display: block;}
	.site-header-9229logo {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		background-color: #fff;
	}
	.site-header-9229logo::before {
		content: '';
		position: absolute;
		top: 0;
		right: calc(100% - 1px);
		display: block;
		height: 100%;
		background-color: #fff;
		clip-path: polygon(0 100%, 100% 100%, 100% 0, calc(100% - 2px) 0);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.site-header {
			padding-left: 20rem;
			height: 56rem;
			box-shadow: 0 1rem 7rem rgba(0,0,0,.4);
			transition: top 2s;
		}
		.site-header-ftlogo {
			margin-top: 1rem;
			width: 120rem;
		}
		.site-header-9229logo {
			padding-right: 12rem;
			width: 240rem;
			height: 56rem;
			clip-path: polygon(0 100%, 100% 100%, 100% 0, 30rem 0);
		}
		.site-header-9229logo img {width: 190rem;}

		.iPhone .site-header {top: 5rem;}
		.iPhone .iPhone-hack {
			position: fixed;
			z-index: 9000;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 5px;
			background-color: var(--frontale);
		}
	}

	/* pc & tab */
	@media (min-width: 768px) {
		.site-header {
			padding-left: 40rem;
			height: 65rem;
			box-shadow: 0 3rem 10rem rgba(0,0,0,.4);
		}
		.site-header-ftlogo {width: 138rem;}
		.site-header-9229logo {
			padding-right: 40rem;
			width: calc(50% - 35rem);
			max-width: 410rem;
		}
		.site-header-9229logo::before {width: 35rem;}
		.site-header-9229logo img {width: 300rem;}
		
		/* tab */
		@media (max-width: 1024px) {}
		/* pc */
		@media (min-width: 1025px) {}
		/* wide */
		@media (min-width: 1600px) {}
	}
}

/* .site-main-header(slick) */
@media all {
	.site-main-header {position: relative;}
	.site-main-header div {height: 100%!important;}

	.main-header-belt {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		background-color: #fff;
		writing-mode: vertical-rl;
		line-height: 1.613;
	}
	.main-header-ttl {font-weight: normal;}
	.main-header-belt .h-num {
		display: inline-block;
		transform: rotate(-90deg);
	}
	.belt-img,
	.main-header-fronta {
		position: absolute;
		z-index: 1;
	}

	.slider-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.site-main-header {
			padding-left: 129rem;
			margin-top: 56rem;
			height: calc(100svh - 56rem - 56rem);
			min-height: 500rem;
			max-height: 700rem;
		}

		.main-header-belt {
			padding-top: 1em;
			width: 130rem;
			font-size: 23rem;
		}
		.belt-img {
			top: 468rem;
			left: 10rem;
			width: 186rem;
			height: 229rem;
		}
		.main-header-fronta {
			bottom: -100rem;
			right: -12rem;
			width: 140rem;
			height: 190rem;
		}
	}

	/* pc & tab */
	@media (min-width: 768px) {
		.site-main-header {
			margin-top: 65rem;
			height: calc(100vh - 65rem);
			min-height: 500rem;
		}

		.main-header-belt {
			padding-top: 60rem;
			width: 300rem;
			font-size: 31rem;
		}
		.belt-img {
			top: 460rem;
			left: 30rem;
			width: 297rem;
			height: 366rem;
		}

		.main-header-fronta {
			bottom: -218rem;
			right: calc(50% - 660rem);
			width: 273rem;
			height: 365rem;
		}


		/* tab */
		@media (max-width: 1024px) {
			.site-main-header {
				max-height: 750rem;
			}
		}
		@media (min-width: 1281px) {
			.site-main-header {
				min-height: 45vw;
				max-height: 75vw;
			}
		}
		/* wide */
		@media (min-width: 1600px) {}
	}
}

/* .intro-section */
@media all {
	.intro-header {
		background-color: #fff;
		text-align: center;
	}
	.intro-content {
		background-color: var(--frontale);
		color: #fff;
		text-align: center;
		line-height: 2.09;
	}
	.intro-content span.inview {display: inline-block;}
	
	.intro-content-ttl {
		font-weight: normal;
		line-height: 1.75;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.intro-header {padding: 120rem 0 30rem;}
		.intro-ttl img {width: 180rem;}

		.intro-content {
			padding: 80rem 0;
			font-size: 16rem;
		}
		.intro-content-ttl {
			margin-bottom: 40rem;
			font-size: 23rem;
		}
	}

	/* pc & tab */
	@media (min-width: 768px) {
		.intro-header {padding: 35rem 0 30rem;}
		.intro-ttl img {width: 224rem;}

		.intro-content {
			padding: 110rem 0 105rem;
			font-size: 22rem;
		}
		.intro-content-ttl {
			margin: 0 auto 60rem;
			max-width: 1000rem;
			font-size: 40rem;
		}
	}
}

/* .product-section */
@media all {
	.product-header {
		position: relative;
		background-color: var(--frontale);
		color: #fff;
	}
	.product-header::before,
	.official-site::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: center bottom repeat-x url(img/common/stripe.svg);
	}
	.product-header-ttl {position: relative;}
	.product-header-ttl > * {
		display: block;
		margin: 0 auto;
		text-align: right;
		font-weight: normal;
	}

	.product-content,
	.product-item {position: relative;}

	.fronta-2 {position: absolute;}
	.emblem {
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		opacity: .1;
	}
	
	.product-name {letter-spacing: .075em;}
	.product-feature {line-height: 1.733;}

	.product-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		font-weight: normal;
	}
	button.detail {
		overflow: hidden;
		position: relative;
		display: flex;
		margin: 0;
		padding: 0;
		background-color: #000;
		color: #fff;
	}
	button.detail::before {
		content: '';
		position: absolute;
		top: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: left center / contain no-repeat url(img/common/btn-bg.svg);
	}
	button.detail:hover {cursor: zoom-in;}
	button.detail > span {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 100%;
	}
	.detail .text-detail {letter-spacing: .1em;}
	.detail .text-watch {letter-spacing: .05em;}

	.product-btn.rakuten a {
		background: linear-gradient(to right, rgba(209, 12, 15, 1) 0%, rgba(136, 0, 1, 1) 100%)
	}
	.product-btn.yahoo a {
		background-color: #e6233e;
		color: #fff
	}
	.product-btn.amazon a {
		background-color: #f8991d;
		color: #fff
	}
	.product-btn a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	.product-buy-date {
		margin-top: 1em;
		text-align: center;
	}

	.product-img {position: relative;}
	.product-img p {
		position: absolute;
		color: var(--frontale);
		letter-spacing: .05em;
	}
	
	/* sp */
	@media only screen and (max-width: 767px) {
		.product-content {padding-bottom: 100rem;}
		.product-header {height: 208rem;}
		.product-header::before,
		.official-site::before {
			background-size: 47rem auto;
			background-position-x: calc(50% - 10rem);
		}
		.product-header-ttl .ft-logo {width: 270rem;}
		.product-header-ttl .colabo {
			margin-top: 20rem;
			width: 340rem;
		}
		.product-header-ttl .ft-copy {
			padding-right: 8rem;
			width: 270rem;
			font-size: 11rem;
		}

		.fronta-2 {
			top: -30rem;
			right: -8rem;
			width: 150rem;
		}
		.emblem {padding-bottom: 100rem;}
		.emblem img {width: 270rem;}
		
		.product-item.item-1 {padding-top: 100rem;}
		.product-item.item-2 {
			margin-top: 140rem;
			padding-top: 60rem;
		}

		.product-det {padding: 0 30rem;}
		.product-sub {font-size: 16rem;}
		.product-name {
			margin-top: 16rem;
			font-size: 26rem;
		}
		.product-img {position: absolute;}
		.item-1 .product-img {
			top: 120rem;
			left: calc(50% - 180rem);
			width: 360rem;
		}
		.item-2 .product-img {
			top: 120rem;
			left: calc(50% - 140rem);
			width: 280rem;
		}
		.product-img p {font-size: 13rem;}
		.product-img .front {
			bottom: 57rem;
			left: 60rem;
		}
		.product-img .back {
			bottom: -16rem;
			right: 60rem;
		}
		
		.product-feature {
			margin-top: 20rem;
			font-size: 15rem;
		}
		.item-1 .product-feature {margin-top: 310rem;}
		.item-2 .product-feature {margin-top: 380rem;}

		.product-buttons {
			margin: 20rem auto 0;
			gap: 16rem 8rem;
			width: 300rem;
		}

		.product-btn.btn1, button.detail {width: 100%;}

		.product-btn:not(.btn1) {
			width: calc(50% - 4rem);
			height: 44rem;
		}

		button.detail {height: 50rem;}
		button.detail::before {left: -27rem;}
		.detail .text-detail {font-size: 24rem;}

		.product-btn.rakuten img {width: 87.5rem;}
		.product-btn.amazon {margin-top: -8rem;}
	}

	/* pc & tab */
	@media (min-width: 768px) {
		.product-header {height: 315rem;}
		.product-header::before,
		.official-site::before {background-size: 67rem auto;}
		.product-header-ttl .ft-logo {width: 443rem;}
		.product-header-ttl .colabo {
			margin-top: 35rem;
			width: 610rem;
		}
		.product-header-ttl .ft-copy {
			padding-right: 20rem;
			width: 443rem;
			font-size: 12rem;
		}

		.fronta-2 {
			top: -85rem;
			right: calc(50% - 720rem);
			width: 369rem;
			height: 273rem;
		}

		.emblem {padding-top: 50rem;}
		.emblem img {width: 570rem;}

		.product-item {
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			width: 960rem;
		}

		.product-item.item-1 {padding-top: 170rem;}
		.product-item.item-2 {
			margin-top: 260rem;
			min-height: 550rem;
		}
		.item-1 .product-img {
			margin-top: -120rem;
			width: 584rem;
			transform: translateX(-90rem);
		}
		.item-2 .product-img {
			margin-top: -130rem;
			width: 435rem;
		}
		.product-img p {font-size: 15rem;}
		.product-img .front {
			bottom: 230rem;
			left: 100rem;
		}
		.product-img .back {
			bottom: 115rem;
			right: 100rem;
		}

		.product-det {width: 350rem;}
		.product-sub {font-size: 18rem;}
		.product-name {
			margin-top: 20rem;
			font-size: 36rem;
		}
		.product-feature {
			margin-top: 30rem;
			font-size: 15rem;
		}
		.product-buttons {
			margin-top: 30rem;
			gap: 20rem 8rem;
			font-size: 15rem;
		}

		button.detail {
			width: 350rem;
			height: 60rem;
		}
		button.detail::before {
			left: -45rem;
			transition: left .5s cubic-bezier(0.54, 0.53, 0, 1.38);
		}
		button.detail:hover::before {left: 160rem;}
		@keyframes detail_hover {
			0% {background-position-x: -45rem;}
			100% {background-position-x: 175rem;}
		}
		.detail .text-detail {font-size: 30rem;}

		.product-btn:not(.btn1) {
			width: calc(50% - 4rem);
			height: 44rem;
		}
		.product-btn.rakuten img {width: 87.5rem;}
		.product-btn a {transition: opacity .3s;}
		.product-btn a:hover {opacity: .6;}

		.product-btn.amazon {margin-top: -10rem;}

		/* wide */
		@media (min-width: 1600px) {}
	}
}


/* .site-footer */
@media all {
	.site-footer {position: relative;}
	.fronta-3 {position: absolute;z-index: 1;}
	.official-site {position: relative;}
	.official-site::before {background-repeat: repeat;}
	.official-site > * {position: relative;}
	
	.official-site a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
			box-shadow: 0 0 6rem 1rem rgba(0,0,0,.8);
	}
	.official-site-ft {background-color: var(--frontale);}
	.official-site-9229 {background-color: #fff;}


	
	/* sp */
	@media only screen and (max-width: 767px) {
		.site-footer {margin-top: 80rem;}
		.fronta-3 {
			top: -80rem;
			left: -5rem;
			width: 140rem;
		}
		.official-site {
			padding: 70rem 20rem 50rem;
			text-align: center;
		}
		.official-site a {
			width: 270rem;
			height: 90rem;
		}
		.official-site a + a {margin-top: 30rem;}
		.official-site-ft-logo {width: 130rem;}
		.official-site-9229-logo {width: 195rem;}

	}

	/* pc & tab */
	@media (min-width: 768px) {
		.fronta-3 {
			top: -160rem;
			left: calc(50% - 688rem);
			width: 294rem;
			height: 274rem;
		}
		.official-site {
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
			gap: 40rem 20rem;
			height: 240rem;
		}
		.official-site::before {
			background-position-x: calc(50% - 14rem);
		}

		.official-site a {
			width: 360rem;
			height: 120rem;
			transition: opacity .3s, box-shadow .3s;
			box-shadow: 0 0 8rem 2rem rgba(0,0,0,.8);
		}
		.official-site a:hover {
			box-shadow: 0 0 8rem 2rem rgba(255,255,255,.8);
		}
		.official-site-ft-logo {width: 240rem;}
		.official-site-9229-logo {width: 260rem;}

		/* tab */
		@media (max-width: 1024px) {
			.official-site::before {background-position-x: 4rem;}
		}


		/* wide */
		@media (min-width: 1600px) {}
	}
}


/* .inview */
@media all {
	.fadeUpperIn {
		opacity: 0;
		filter: blur(5rem);
		transform: translateY(50rem);
		transition: opacity 2s, filter 1s, transform 2s;
	}
	.animated:is(.fadeUpperIn, .fadeBlur) {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}
	.fadeBlur {
		opacity: 0;
		filter: blur(10rem);
		transition: opacity 2s, filter 2s;
	}
	
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media (min-width: 768px) {
		/* wide */
		@media (min-width: 1600px) {}
	}
}







/* modal-slider */
@media all {
	.modal-slider {
		border: max(1px, 1rem) solid #E6E6E6;
	}
	.modal-slider-thumb .slick-track {transform: unset!important;}
	.modal-slider-thumb-item {
		border: max(1px, 1rem) solid #E6E6E6;
		transition: border-color .3s;
		aspect-ratio: 1;
	}
	.modal-slider-thumb-item.slick-current {
		border-color: var(--modal-red);
	}
	.modal-slider .slick-prev,
	.modal-slider .slick-next {
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30rem;
		height: 100%;
		background-color: rgba(0,0,0,0);
		transition: background .3s;
	}
	.modal-slider .slick-prev {
		left: 0;
		padding-left: 9rem;
	}
	.modal-slider .slick-next {
		right: 0;
		padding-right: 9rem;
	}
	.modal-slider .slick-prev::before,
	.modal-slider .slick-next::before {
		content: '';
		width: 15rem;
		height: 15rem;
		border-top: max(1px, 1rem) solid #ccc;
		border-left: max(1px, 1rem) solid #ccc;
		transition: border .3s;
	}

	.modal-slider .slick-prev:hover::before,
	.modal-slider .slick-next:hover::before {border-color: #bbb;}
	.modal-slider .slick-prev::before {
		transform: rotate(-45deg);
	}
	.modal-slider .slick-next::before {
		transform: rotate(135deg);
	}

	/* sp */
	@media (max-width: 767px) {
		.modal-slider-block {width: 100%;}
		.modal-slider-thumb {margin-top: 10rem;}
		.modal-slider-thumb-item {
			width: 60rem!important;
			margin-right: 4rem;
		}
		.modal-slider-thumb-item:nth-child(5n) {margin-right: 0;}
		/* .modal-slider-thumb .slick-track {
			display: flex;
			justify-content: space-between;
			width: 100%!important;
		}
		.modal-slider-thumb-item {width: calc(20% - 3rem)!important;} */
		
	}
	/* tab & pc */
	@media (min-width: 768px) {
		.modal-slider-block {
			width: 400rem;
		}
		.modal-slider .slick-prev:hover,
		.modal-slider .slick-next:hover {background-color: rgba(128,128,128,.2);}
		.modal-slider-thumb {margin-top: 10rem;}
		.modal-slider-thumb-item {
			width: 15%!important;
			margin-left: 8rem;
			margin-bottom: 8rem;
		}
		.modal-slider-thumb-item:nth-child(6n+1) {margin-left: 0;}
	}
}


/* modal */
@media all {
	.modal-content {display: none;}
	.modal-base {
		position: fixed;
		z-index: 1111;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: rgba(55,163,226,.9);
		opacity: 1;
		transition: visibility .5s linear, opacity .5s linear;
		backdrop-filter: blur(3rem);
		pointer-events: none;
	}
	.modal-close-area {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100vw;
		height: 100vw;
		pointer-events: all;
		cursor:zoom-out;
	}
	.modal-base.hide {
		visibility: hidden;
		opacity: 0;
	}
	.modal,
	.modal-viewer {
		width: calc(100vw - 40rem);
		height: calc(100svh - 60rem);
		background-color: #fff;
	}
	.modal {
		position: relative;
		z-index: 0;
		pointer-events: all;
	}
	.modal-closer {
		position: absolute;
		top: .5em;
		right: .5em;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0 1px 0;
		width: 1.2em;
		height: 1.2em;
		border: max(2px, 2rem) solid var(--modal-closer);
		font-size: 18rem;
		-webkit-text-stroke: 1px;
		color: var(--modal-closer);
		line-height: 1;
		cursor: pointer;
		transition: background .3s, color .3s;
	}
	.modal-closer:hover {
		background: var(--modal-closer);
		color: #fff;
	}
	.modal-viewer {
		overflow: auto;
		height: 100%;
		color: #000;
	}
	.product-points {margin-top: 40rem;}
	.product-points-item {
		position: relative;
		padding-left: 1em;
		line-height: 1.334;
	}
	.product-points-item + .product-points-item {margin-top: .5em;}

	.best-notice-list li,
	.product-square-item,
	.product-dots-item {
		position: relative;
		padding-left: 1em;
	}
	.best-notice-list li::before,
	.product-points-item::before,
	.product-square-item::before,
	.product-dots-item::before {
		content: '■';
		position: absolute;
		left: 0;
	}
	.product-dots-item::before {content: '・';}

	.product-set {margin-top: 1.6em;}
	.product-parts-ttl {
		line-height: 1.4;
	}
	.product-parts-ttl.b-bottom {
		padding-bottom: .5em;
		border-bottom: max(1px, 1rem) solid #000;
	}
	.product-dots-list {
		margin-top: 10rem;
		padding: 10rem 0;
		border-top: max(1px, 1rem) solid #000;
		line-height: 1.667;
	}
	.product-set .product-dots-list {
		border-bottom: max(1px, 1rem) solid #000;
	}
	.product-spec tr:nth-child(odd) {background-color: #F4F6F7;}
	.inner-tbl tr:nth-child(odd) {background: none;}
	.product-spec {
		width: 100%;
		border: 1px solid #D3DAE0;
		line-height: 1.5;
	}
	.product-spec th {
		padding-right: .3em;
		padding-left: .4em;
		max-width: 6em;
		border-right: 1px solid #D3DAE0;
		font-weight: normal;
		text-align: left;
		vertical-align: top;
		white-space: nowrap;
	}
	.product-spec td {
		padding: 0 .4em;
	}
	/*.product-spec td:has(.inner-tbl) {padding: 0;}
	.inner-tbl {width: 100%;}
	.product-spec > tbody > tr > :is(th, td) {
		border: 1px solid #D3DAE0;
	} */
	.product-spec td small {font-size: 10rem;}
	.product-spec .inner-tbl :where(th, td) {
		text-align: center;
		vertical-align: middle;
	}
	.product-spec .inner-tbl th {
		padding-bottom: .4em;
		width: 50%;
		border: none;
	}
	/* .product-spec .inner-tbl tr:nth-child(odd) {background-color: #f2f2f2;} */
	.product-spec .inner-tbl td:nth-child(odd) {border-right: 1px solid #D3DAE0;}
	.product-spec .inner-tbl tr:not(:last-child) td {border-bottom: 1px solid #D3DAE0;}
	.product-spec .lh1 {
		padding-bottom: .25em;
		line-height: .8;
		white-space: nowrap;
	}
	.product-spec .inner-tbl .gray {
		display: block;
		margin: 0 auto;
		width: 95%;
		background-color: #92A2B2;
		border-radius: 1.5em;
		color: #fff;
	}
	.product-spec .modal-product-notice {
		margin-left: -1.5em;
	}
	.product-spec .modal-product-notice li {
		display: inline-block;
		margin-left: 1.5em;
	}
	.product-parts-img {text-align: center;}
	.spec-notice {
		margin-top: .5em;
		line-height: 1;
	}
	.spec-notice li {
		display: inline-block;
		margin-right: 1em;
		font-size: 10px;
	}
	.modal-product-notice {
		margin-top: 30rem;
		line-height: 1.34;
	}
	.modal-product-notice li {
		position: relative;
		padding-left: 2em;
	}
	.modal-product-notice li span {
		position: absolute;
		top: 0;
		left: 0;
	}

	.modal-buy-txt,
	.modal-buy-date {
		width: 100%;
		text-align: center;
	}
	.modal-buy-date {margin-top: 1em;}
	.close-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 4rem auto 0;
		background-color: #fff;
		border: 2px solid var(--modal-closer);
		border-radius: var(--4px);
		box-shadow: 2px 2px 0 rgba(0,0,0,.2);
		font-weight: bold;
		color: var(--modal-closer);
		transition: .3s;
		cursor: pointer;
	}
	.close-btn:hover {
		background-color: var(--modal-closer);
		box-shadow: 0 0 0 rgba(0,0,0,0);
		color: #fff;
	}
	.close-btn .oswald {
		margin-right: .5em;
		font-weight: 500;
	}

	.modal-viewer .product-edit {color: var(--modal-closer);}
	.size-tbl {
		font-family: var(--roboto);
		font-feature-settings: "palt";
	}
	.size-ttl {
		margin: .75em 0;
		text-align: left;
	}
	.size-tbl tr > :is(th, td):nth-child(n+2) {
		text-align: center;
	}
	.size-tbl tr:nth-child(odd) {background: none;}
	.size-tbl tr > td:nth-child(even) {
		background-color: #F4F6F7;
	}
	.size-tbl tr > :is(th, td) {border: 1px solid #D3DAE0;}
	.size-tbl tr > th {width: 25%;}
	.size-tbl tr > td {width: 15%;}
	.modal-product2 .product-set + .product-set {
		margin-top: 3.5rem;
	}
	.product-set-txt {margin-top: 1em;}
	.product2-notice {margin-top: 4em;}
	.modal-product-notice + .product2-notice {margin-top: 1em;}
	.modal-product2 .modal-buy {margin-top: 4rem;}

	.product-spec-add {
		margin-top: .5em;
		line-height: 1.5;
	}

	.best-notice {line-height: 1.333;}
	.best-notice p + p {margin-top: 1.3em;}

	/* sp */
	@media (max-width:767px) {
		.modal-base {height: 100dvh;}
		.modal-closer {
			top: 5rem;
			right: 5rem;
			z-index: 10;
			background-color: #fff;
			box-shadow: 0 0 0 5rem #fff;
		}
		.modal,
		.modal-viewer {
			width: 100%;
			max-width: 350rem;
			height: calc(100svh - 60rem);
		}
		.modal {
			width: calc(100% - 20rem);
		}
		.modal-content-inner {
			padding: 40rem 16rem 60rem;
			font-feature-settings: "palt";
		}
		.modal-product-main {margin-top: 50rem;}
		.modal-product-main .product-name {font-size: 40rem;}
		.modal-product-main .volt {font-size: 15rem;}
		.modal-product-main .product-sub {font-size: 15rem;}
		.product-parts-ttl {font-size: 18rem;}
		.product-dots-list,
		.product-spec {font-size: 15rem;}
		.product-parts-img img {width: 90%;}
		.spec-outer {
			overflow: scroll;
			margin-top: 24rem;
			padding-bottom: 20rem;
			width: 100%;
		}
		.inner-tbl {
			margin: 6rem 3rem;
			width: 100%;
		}
		.product-spec .inner-tbl .gray {
			font-size: 13rem;
			line-height: 1.45;
		}
		.modal-product-notice {
			margin-top: 12rem;
			font-size: 12rem;
		}
		.modal-product-notice + .product2-notice {margin-top: 20rem;}
		.product2-notice {font-size: 12rem;line-height: 1.34;}

		.modal-buy {
			margin-top: 50rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.modal-buy-txt {font-size: 20rem;}
		.modal-buy-date {font-size: 16rem;}
		.modal-buy .product-btn {
			margin: 16rem 0 0;
		}
		.modal-buy .product-btn:not(.btn1) {
			width: 170rem;
			height: 44rem;
		}
		.close-btn {
			width: 160rem;
			height: 30rem;
			font-size: 11rem;
		}
		.close-btn .oswald {font-size: 18rem;}

		.best-notice {
			margin-top: 1.3em;
			font-size: 12rem;
		}
	}

	/* tab & pc */
	@media (min-width: 768px) {
		.modal-content-inner {padding: 40rem 36rem 80rem;}
		.modal-product-main .product-sub {font-size: 18rem;}
		.modal .product-name-img {
			margin-top: 10rem;
		}

		.product-points-item {font-size: 18rem;}

		.product-parts-ttl {font-size: 20rem;}
		.product-dots-list,
		.product-spec {font-size: 15rem;}

		.product-set.size {padding-bottom: 30rem;}
		.inner-tbl {
			margin: 4rem;
			width: 250rem;
		}
		.product-spec .inner-tbl .gray {
			font-size: 13rem;
			line-height: 1.45;
		}
		.product-parts-img img {width: 350rem;}
		.spec-notice li {font-size: 12rem;}
		.modal-product-notice {font-size: 12rem;}

		.modal-buy {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			column-gap: 10rem;
			margin: 100rem auto 0;
		}
		.modal-buy-txt {font-size: 20rem;}
		.modal-buy .product-btn {
			margin-top: 20rem;
			width: 195rem;
		}
		.close-btn {
			width: 100rem;
			height: 30rem;
			font-size: 11rem;
		}
		.close-btn .oswald {font-size: 18rem;}

		.product-set-txt {font-size: 15rem;}
		.product2-notice {font-size: 12rem;}
		
		.modal,
		.modal-viewer {width: 920rem;}
		.modal-viewer .pc-2col {
			display: flex;
			justify-content: space-between;
		}
		.modal-viewer .pc-2col > * {
			width: 400rem;
		}
		.SK23011FR .product-dots-list,
		.BT23211 .product-dots-list {min-height: 165rem;}
		.product-spec-add {font-size: 15rem;}

		.product-parts {margin-top: 50rem;}

		.best-notice {
			margin-top: -100rem;
			width: 400rem;
			font-size: 12rem;
		}


		/* tab */
		@media (max-width: 1024px) {
			.modal,
			.modal-viewer {
				height: auto;
				max-height: calc(100vh - 120rem);
			}
		}
		/* pc */
		@media (min-width: 1025px) {
			.modal,
			.modal-viewer {
				max-height: 650rem;
			}
		}
	}
}


/* Font change */
@media all {
	.spec-notice > li > span,
	.modal-product-notice > li > span,
	sub {font-family: sans-serif;}
	
}

/* .template */
@media all {
	
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media (min-width: 768px) {
		/* wide */
		@media (min-width: 1600px) {}
	}
}





/* Amazon非表示（後日削除） */
@media all {
	.amazon {display: none!important;}
	
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media (min-width: 768px) {
		.product-item.sith-1 {
			margin-top: 80rem;
			padding-top: 90rem;
		}
		.sith-2 .product-det {margin-top: 90rem;}
		.product-item.way-1 {padding-top: 100rem;}
		.way-1 .product-det {margin-top: 70rem;}
		.way-2 .product-det {margin-top: 90rem;}
		/* wide */
		@media (min-width: 1600px) {}
	}
}