@charset "UTF-8";

/* --------------------------------------------
UNIT
--------------------------------------------- */
@media screen and ( width <= 780px ){
	:root{
		--breakPoint : 390;
		--gutter : 18;
		--remBase : 100vw / 390;
	}
}
@media print , screen and ( width > 780px ){
	:root{
		--breakPoint : 1200;
		--gutter : 18;
		--remBase : min( 2px , 100vw / 390 );
	}
}
:root{
	--viewportBase : 100% / 390;
}

/* --------------------------------------------
REGULATE
--------------------------------------------- */
* ,
::before ,
::after{
	box-sizing : border-box;
	border-style : solid;
	border-width : 0;
}
html{
	-webkit-text-size-adjust : 100%; /* 2 */
	-webkit-tap-highlight-color : transparent; /* 3 */
	line-height : 1.15; /* 1 */
}
body{
	margin : 0;
}
main{
	display : block;
}
p ,
table ,
blockquote ,
address ,
pre ,
iframe ,
form ,
figure ,
dl{
	margin : 0;
}
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6{
	margin : 0;
	font-size : inherit;
	font-weight : inherit;
}
h1 ,
h2 ,
h3{
	font-weight : 700;
}
ul ,
ol{
	padding : 0;
	margin : 0;
	list-style : none;
}
dt{
	font-weight : 700;
}
dd{
	margin-left : 0;
}
hr{
	box-sizing : content-box; /* 1 */
	height : 0; /* 1 */
	margin : 0;
	overflow : visible; /* 2 */
	clear : both;
	color : inherit;
	border-top-width : 1px;
}
pre{
	font-family : monospace , monospace; /* 1 */
	font-size : inherit; /* 2 */
}
address{
	font-style : inherit;
}
a{
	color : inherit;
	text-decoration : none;
	background-color : transparent;
}
abbr[title]{
	-webkit-text-decoration : underline dotted;
	text-decoration : underline dotted; /* 2 */
}
b ,
strong{
	font-weight : bolder;
}
code ,
kbd ,
samp{
	font-family : monospace , monospace; /* 1 */
	font-size : inherit; /* 2 */
}
small{
	font-size : 80%;
}
sub ,
sup{
	position : relative;
	font-size : 75%;
	line-height : 0;
	vertical-align : baseline;
}
sub{
	bottom : -.25em;
}
sup{
	top : -.5em;
}
svg ,
img ,
embed ,
object ,
iframe{
	vertical-align : bottom;
}
button ,
input ,
optgroup ,
select ,
textarea{
	padding : 0;
	margin : 0;
	font : inherit;
	color : inherit;
	text-align : inherit;
	text-transform : inherit; /* 2 */
	vertical-align : middle;
	background : transparent;
	border-radius : 0;
	-webkit-appearance : none; /* 1 */
	-moz-appearance : none;
	appearance : none;
}
button ,
[type="button"] ,
[type="reset"] ,
[type="submit"]{
	cursor : pointer;
}
button:disabled ,
[type="button"]:disabled ,
[type="reset"]:disabled ,
[type="submit"]:disabled{
	cursor : default;
}
:-moz-focusring{
	outline : auto;
}
select:disabled{
	opacity : inherit;
}
option{
	padding : 0;
}
fieldset{
	min-width : 0;
	padding : 0;
	margin : 0;
}
legend{
	padding : 0;
}
progress{
	vertical-align : baseline;
}
textarea{
	overflow : auto;
}
[type="number"]::-webkit-inner-spin-button ,
[type="number"]::-webkit-outer-spin-button{
	height : auto;
}
[type="search"]{
	outline-offset : -2px; /* 1 */
}
[type="search"]::-webkit-search-decoration{
	-webkit-appearance : none;
}
::-webkit-file-upload-button{
	-webkit-appearance : button; /* 1 */
	font : inherit; /* 2 */
}
[type="number"]{
	-moz-appearance : textfield;
}
label[for]{
	cursor : pointer;
}
details{
	display : block;
}
summary{
	display : list-item;
}
[contenteditable]:focus{
	outline : auto;
}
table{
	border-collapse : collapse;
	border-color : inherit; /* 1 */
}
caption{
	text-align : left;
}
td ,
th{
	padding : 0;
	vertical-align : top;
}
th{
	font-weight : 700;
	text-align : left;
}
a ,
img{
	display : block;
	width : 100%;
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
.main_content{
	position : relative;
	width : min( 780px , 100vw );
	margin : 0 auto;
	overflow-x : clip;
	overflow-x : hidden;
	background : linear-gradient( 159.82deg , #dfe6e7 -2.14% , #f6fafb 17.5% , #f1f0f0 26.26% );
	@media only screen and ( max-width : 768px ){
		width : 100vw;
	}
}
img.full{
	width : 100%;
	height : auto;
	font-size : 0;
}
#header{
	position : absolute;
	top : calc( 20 * var( --remBase ) );
	left : 0;
	z-index : 1;
	width : 100%;
	height : calc( 30.13 * var( --remBase ) );
	padding-inline : calc( 18 * var( --viewportBase ) );
	font-size : 0;
	h1{
		font-size : 0;
		img{
			width : auto;
			height : 100%;
		}
	}
}
#mvs{
	position : relative;
	z-index : 0;
	height : calc( 972 * var( --remBase ) );
	.bg{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		width : 100%;
		img{
			width : 100%;
			height : auto;
		}
	}
	&::before , &::after{
		position : absolute;
		display : block;
		width : auto;
		font-size : 0;
		pointer-events : none;
		content : "";
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : contain;
	}
	&::before{
		top : 0;
		left : 0;
		height : calc( 340.5 * var( --remBase ) );
		aspect-ratio : 655/681;
		background-image : image-set( url( "../images/top/mv/flare01.avif" ) type( "image/avif" ) , url( "../images/top/mv/flare01.webp" ) type( "image/webp" ) );
	}
	&::after{
		top : calc( -13.39 * var( --remBase ) );
		left : calc( 338 * var( --viewportBase ) );
		height : calc( 70.5 * var( --remBase ) );
		aspect-ratio : 134/141;
		background-image : image-set( url( "../images/top/mv/flare02.avif" ) type( "image/avif" ) , url( "../images/top/mv/flare02.webp" ) type( "image/webp" ) );
	}
}
#mv{
	position : relative;
	height : calc( 442 * var( --remBase ) );
	:is( .first , .review , .title , li ){
		position : absolute;
		display : block;
		font-size : 0;
		img{
			width : auto;
		}
	}
	.first{
		top : calc( 21 * var( --remBase ) );
		left : calc( 220 * var( --viewportBase ) );
		img{
			height : calc( 40 * var( --remBase ) );
		}
	}
	.review{
		top : calc( 160.08 * var( --remBase ) );
		left : 0;
		img{
			height : calc( 146.5 * var( --remBase ) );
		}
	}
	.title{
		top : calc( 85.56 * var( --remBase ) );
		left : calc( 6.53 * var( --viewportBase ) );
		img{
			height : calc( 79.5 * var( --remBase ) );
		}
	}
	li:nth-child( 1 ){
		top : calc( 280 * var( --remBase ) );
		left : calc( -4 * var( --viewportBase ) );
		img{
			height : calc( 162 * var( --remBase ) );
		}
	}
	li:nth-child( 2 ){
		top : calc( 296.22 * var( --remBase ) );
		left : calc( 261 * var( --viewportBase ) );
		img{
			height : calc( 145 * var( --remBase ) );
		}
	}
}
.partsPrice{
	background-color : white;
	:where( h2 , h3 ){
		font-size : 0;
	}
	p{
		padding-top : calc( 11.33 * var( --remBase ) );
		padding-bottom : calc( 9.77 * var( --remBase ) );
		font-size : 0;
		> span{
			display : grid;
			grid-template-columns : auto auto;
			align-items : start;
			justify-content : center;
			&:nth-of-type( 1 ){
				column-gap : calc( 6.55 * var( --viewportBase ) );
				picture{
					grid-row : 1;
					grid-column : 2;
					img{
						height : calc( 32 * var( --remBase ) );
					}
				}
				del{
					grid-row : 1;
					grid-column : 1;
					img{
						height : calc( 27 * var( --remBase ) );
					}
				}
			}
			&:nth-of-type( 2 ){
				column-gap : calc( 13.25 * var( --viewportBase ) );
				margin-top : calc( 12.82 * var( --remBase ) );
				> img{
					&:nth-of-type( 1 ){
						height : calc( 56 * var( --remBase ) );
						margin-top : calc( 2.18 * var( --remBase ) );
					}
					&:nth-of-type( 2 ){
						height : calc( 68 * var( --remBase ) );
					}
				}
			}
		}
		img{
			width : auto;
		}
	}
}
.partsPrice01{
	position : relative;
	&::before{
		position : absolute;
		top : calc( -73 * var( --remBase ) );
		left : calc( -75 * var( --viewportBase ) );
		display : block;
		width : auto;
		height : calc( 150 * var( --remBase ) );
		aspect-ratio : 298/300;
		font-size : 0;
		pointer-events : none;
		content : "";
		background : image-set( url( "../images/top/mv/flare03.avif" ) type( "image/avif" ) , url( "../images/top/mv/flare03.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
	}
}
[data-before]::before{
	content : attr( data-before );
}
[data-after]::after{
	content : attr( data-after );
}
.partsCta{
	padding-inline : calc( 18 * var( --viewportBase ) );
	> p{
		font-size : calc( 12 * var( --remBase ) );
		font-weight : 400;
		line-height : 1.2;
		color : white;
	}
	ul{
		margin-top : calc( 11 * var( --remBase ) );
	}
	li:nth-child( 2 ){
		margin-top : calc( 8 * var( --remBase ) );
	}
	li:nth-child( 3 ){
		margin-top : calc( 11 * var( --remBase ) );
		p{
			display : grid;
			grid-template-columns : 1fr auto 1fr;
			column-gap : calc( 15.33 * 100% / 354 );
			align-items : center;
			margin-bottom : calc( 12 * var( --remBase ) );
			font-size : calc( 14.31 * var( --remBase ) );
			font-weight : 700;
			color : #5d5d5d;
			&::before , &::after{
				display : block;
				height : calc( 1 * var( --remBase ) );
				font-size : 0;
				content : "";
				background-color : currentColor;
			}
			&::before{
				grid-column : 1;
			}
			&::after{
				grid-column : 3;
			}
		}
	}
	a{
		display : block;
	}
}
.partsCta01{
	padding-top : calc( 18 * var( --remBase ) );
}