@charset "UTF-8";

/* --------------------------------------------
CONTACTS01
--------------------------------------------- */
.contacts01{
	.box{
		background-color : white;
		border-radius : calc( 12 * var( --remBase ) );
	}
	header{
		p{
			font-size : calc( 18 * var( --remBase ) );
			font-weight : 400;
		}
		h2{
			font-weight : 500;
			color : var( --orange );
		}
	}
	.box{
		> div > p{
			margin-top : calc( 28 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			font-weight : 400;
			line-height : 1.5;
			color : color-mix( in sRGB , var( --base ) 60% , transparent );
		}
	}
	.link-contact01 , .link-line01{
		height : calc( 64 * var( --remBase ) );
		> span{
			&:nth-of-type( 1 ){
				font-size : calc( 16 * var( --remBase ) );
			}
			&:nth-of-type( 2 ){
				height : calc( 24 * var( --remBase ) );
				background-size : auto calc( 8 * var( --remBase ) );
			}
		}
	}
	@media screen and ( width < 768px ){
		padding-top : calc( 80 * var( --remBase ) );
		.box{
			padding-block : calc( 48 * var( --remBase ) );
			padding-inline : calc( 20 * var( --contentBase ) );
		}
		header{
			text-align : center;
			p{
				line-height : 1.4;
			}
			h2{
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 28 * var( --remBase ) );
			}
		}
		ul{
			margin-top : calc( 30 * var( --remBase ) );
		}
		.links-tel01{
			column-gap : calc( 14 * 100% / 310 );
		}
		.contact{
			margin-top : calc( 30 * var( --remBase ) );
		}
		.line{
			margin-top : calc( 18 * var( --remBase ) );
		}
		.link-contact01 , .link-line01{
			column-gap : calc( 10 * 100% / 310 );
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-top : calc( 120 * var( --remBase ) );
		.box{
			display : grid;
			grid-template-columns : calc( 456 * 100% / 1124 ) calc( 428 * 100% / 1124 );
			column-gap : calc( 80 * 100% / 1124 );
			align-items : center;
			justify-content : center;
			width : calc( 1124 * var( --contentBase ) );
			padding-block : calc( 56 * var( --remBase ) );
			margin-inline : auto;
		}
		header{
			h2{
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 44 * var( --remBase ) );
				letter-spacing : .04em;
				white-space : nowrap;
			}
		}
		ul{
			display : grid;
			grid-template-columns : calc( 198 * 100% / 428 ) calc( 212 * 100% / 428 );
			row-gap : calc( 30 * var( --remBase ) );
			justify-content : space-between;
		}
		.links-tel01{
			grid-row : 1;
			grid-column : 1/-1;
			column-gap : calc( 14 * 100% / 428 );
			justify-content : center;
		}
		.contact{
			grid-row : 2;
			grid-column : 1;
		}
		.line{
			grid-row : 2;
			grid-column : 2;
		}
		.link-contact01{
			column-gap : calc( 10 * 100% / 198 );
		}
		.link-line01{
			column-gap : calc( 10 * 100% / 212 );
		}
	}
}
@media ( hover : hover ){
	.contacts01{
		.links-tel01:has( a:hover ){
			opacity : .75;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.contacts01{
		.links-tel01{
			transform : opacity var( --transitionBase );
		}
	}
}

/* --------------------------------------------
CONTACTS0101
--------------------------------------------- */
#contacts0101{
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
	}
}

/* --------------------------------------------
HGROUP
--------------------------------------------- */
.hgroup01{
	p{
		position : relative;
		width : fit-content;
		letter-spacing : .01em;
		background-color : white;
		border-radius : 100vmax;
		&::after{
			position : absolute;
			left : 0;
			display : block;
			width : auto;
			aspect-ratio : 23/14;
			font-size : 0;
			content : "";
			background : url( "../images/ui/parts/comment-unit.svg" ) left top / contain no-repeat;
		}
	}
	h2{
		font-weight : 500;
		line-height : 1.4;
		color : var( --orange );
		letter-spacing : . .02em;
	}
	@media screen and ( width < 768px ){
		p{
			padding-block : calc( 9.5 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			&::after{
				bottom : 0;
				height : calc( 9 * var( --remBase ) );
			}
		}
		h2{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		p{
			padding-block : calc( 14.5 * var( --remBase ) );
			padding-inline : calc( 24 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			&::after{
				bottom : calc( -1 * var( --remBase ) );
				left : 0;
				height : calc( 14 * var( --remBase ) );
			}
		}
		h2{
			margin-top : calc( 25 * var( --remBase ) );
			font-size : calc( 44 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
TEXT
--------------------------------------------- */
.text01{
	letter-spacing : .03em;
	@media screen and ( width < 768px ){
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.5;
	}
	@media print , screen and ( width >= 768px ){
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.7;
	}
}

/* --------------------------------------------
ITEM
--------------------------------------------- */
#item{
	ul{
		display : grid;
		row-gap : calc( 8 * var( --remBase ) );
		justify-content : space-between;
	}
	li{
		width : 100%;
		height : 100%;
		counter-increment : no;
		a{
			display : grid;
			align-items : center;
			width : 100%;
			height : 100%;
			background-color : white;
			border-radius : calc( 10 * var( --remBase ) );
			outline : solid 1px #e8e8e8;
			outline-offset : -1px;
			&::before{
				grid-row : 2;
				grid-column : 2;
				align-self : start;
				font-family : Helvetica , Arial , sans-serif;
				color : var( --orange );
				content : counter( no , decimal-leading-zero );
			}
		}
	}
	h3{
		position : relative;
		display : grid;
		grid-template-columns : 1fr auto;
		grid-row : 2;
		grid-column : 2;
		align-items : center;
		align-self : end;
		font-weight : 500;
		&::before{
			display : block;
			grid-row : 1;
			grid-column : 2;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background-color : white;
			border-radius : 50%;
			outline : solid 1px #e8e8e8;
			outline-offset : -1px;
		}
		&::after{
			position : absolute;
			top : 50%;
			display : block;
			width : auto;
			aspect-ratio : 8/11;
			font-size : 0;
			content : "";
			background : url( "../images/ui/arrow/right02.svg" ) center / contain no-repeat;
			filter : var( --filterOrange );
			translate : 0 -50%;
		}
	}
	picture{
		grid-row : 1/-1;
		grid-column : 1/-1;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		.lede{
			margin-top : calc( 32 * var( --remBase ) );
		}
		ul{
			grid-template-columns : repeat( 2 , calc( 171 * var( --contentBase ) ) );
			grid-auto-rows : calc( 171 * var( --remBase ) );
			margin-top : calc( 48 * var( --remBase ) );
		}
		li{
			a{
				grid-template-rows : calc( 16 * var( --remBase ) ) 1fr calc( 16 * var( --remBase ) );
				grid-template-columns : calc( 16 * 100% / 171 ) 1fr calc( 16 * 100% / 171 );
				&::before{
					font-size : calc( 12 * var( --remBase ) );
				}
			}
		}
		h3{
			font-size : calc( 13 * var( --remBase ) );
			&::before{
				height : calc( 14 * var( --remBase ) );
			}
			&::after{
				right : calc( 4.5 * 100% / 139 );
				height : calc( 6.24 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
		header{
			display : grid;
			grid-template-columns : auto calc( 640 * var( --contentBase ) );
			row-gap : calc( 18 * var( --remBase ) );
			align-items : end;
			justify-content : space-between;
			.hgroup01{
				display : contents;
				p{
					grid-row : 1;
					grid-column : 1;
				}
				h2{
					grid-row : 2;
					grid-column : 1;
					margin-top : 0;
				}
			}
			> p{
				grid-row : 2;
				grid-column : 2;
			}
		}
		ul{
			grid-template-columns : repeat( 4 , calc( 332 * var( --contentBase ) ) );
			grid-auto-rows : calc( 332 * var( --remBase ) );
			margin-top : calc( 64 * var( --remBase ) );
		}
		li{
			a{
				grid-template-rows : calc( 24 * var( --remBase ) ) 1fr calc( 24 * var( --remBase ) );
				grid-template-columns : calc( 24 * 100% / 332 ) 1fr calc( 24 * 100% / 332 );
				&::before{
					font-size : calc( 14 * var( --remBase ) );
				}
			}
		}
		h3{
			font-size : calc( 16 * var( --remBase ) );
			&::before{
				height : calc( 24 * var( --remBase ) );
			}
			&::after{
				right : calc( 8 * 100% / 284 );
				height : calc( 11 * var( --remBase ) );
			}
		}
	}
}
@media ( hover : hover ){
	#item a:hover{
		img{
			scale : 1.05;
		}
		h3{
			&::before{
				background-color : var( --orange );
				outline-color : var( --orange );
			}
			&::after{
				filter : var( --filterWhite );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#item a{
		img{
			transition : scale var( --transitionBase );
		}
		h3{
			&::before{
				transition : background-color var( --transitionBase ) , color var( --transitionBase );
			}
			&::after{
				transition : filter 0s linear .15s;
			}
		}
	}
}

/* --------------------------------------------
METHODS
--------------------------------------------- */
#methods{
	li{
		counter-increment : no;
		background-color : white;
	}
	h3{
		display : grid;
		align-items : center;
		justify-content : start;
		font-weight : 500;
		color : var( --orange );
		&::before{
			display : grid;
			place-items : center;
			font-weight : 400;
			color : white;
			content : counter( no , decimal-leading-zero );
			background-color : var( --orange );
			border-radius : 100vmax;
		}
	}
	picture{
		width : 100%;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	li{
		p{
			font-weight : 400;
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		.lede{
			margin-top : calc( 32 * var( --remBase ) );
		}
		ul{
			margin-top : calc( 48 * var( --remBase ) );
		}
		li{
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 20 * var( --contentBase ) );
			border-radius : calc( 10 * var( --remBase ) );
			+ li{
				margin-top : calc( 28 * var( --remBase ) );
			}
		}
		picture{
			height : calc( 180 * var( --remBase ) );
		}
		h3{
			grid-template-columns : calc( 38 * 100% / 310 ) auto;
			column-gap : calc( 12 * 100% / 310 );
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			&::before{
				height : calc( 29 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
			}
		}
		li p{
			margin-top : calc( 12 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		display : grid;
		grid-template-columns : calc( 308 * var( --contentBase ) ) calc( 888 * var( --contentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 180 * var( --remBase ) );
		header{
			position : sticky;
			top : var( --headerHeight );
			padding-top : calc( 103 * var( --remBase ) );
			.lede{
				margin-top : calc( 40 * var( --remBase ) );
			}
		}
		li{
			padding-block : calc( 64 * var( --remBase ) );
			padding-inline : calc( 64 * 100% / 888 );
			border-radius : calc( 26 * var( --remBase ) );
			+ li{
				margin-top : calc( 40 * var( --remBase ) );
			}
		}
		picture{
			height : calc( 433 * var( --remBase ) );
		}
		h3{
			grid-template-columns : calc( 53 * 100% / 760 ) auto;
			column-gap : calc( 20 * 100% / 760 );
			margin-top : calc( 24 * var( --remBase ) );
			font-size : calc( 28 * var( --remBase ) );
			&::before{
				height : calc( 41 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		li p{
			margin-top : calc( 24 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
PRICE
--------------------------------------------- */
#prices{
	background-color : #f7f4f0;
	.note{
		color : color-mix( in sRGB , currentColor 50% , transparent );
		text-align : center;
	}
	@media screen and ( width < 768px ){
		padding-block : calc( 140 * var( --remBase ) );
		.note{
			margin-top : calc( 32 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			line-height : 1.7;
		}
		.link01{
			width : calc( 298 * var( --viewportBase ) );
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-top : calc( 180 * var( --remBase ) );
		padding-bottom : calc( 167 * var( --remBase ) );
		.note{
			margin-top : calc( 28 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.5;
		}
		.link01{
			width : calc( 298 * var( --contentBase ) );
			margin-top : calc( 48 * var( --remBase ) );
		}
	}
}
#slider02{
	.splide__slide{
		a{
			position : relative;
			overflow : hidden;
		}
		picture{
			width : 100%;
			height : calc( 200 * var( --remBase ) );
			overflow : hidden;
			border-radius : calc( 10 * var( --remBase ) );
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
		.category{
			position : absolute;
			top : calc( 16 * var( --remBase ) );
			display : grid;
			place-items : center;
			width : fit-content;
			padding-block : calc( 8.5 * var( --remBase ) );
			padding-inline : calc( 13 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			text-align : center;
			text-indent : .01jem;
			letter-spacing : .01jem;
			background-color : white;
			border-radius : 100vmax;
		}
		.brand{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			margin-top : calc( 20 * var( --remBase ) );
			dt , dd{
				font-size : calc( 14 * var( --remBase ) );
			}
			dd{
				padding-block : calc( 8 * var( --remBase ) );
				padding-inline : calc( 12 * var( --remBase ) );
				border-radius : 100vmax;
				outline : solid 1px color-mix( in sRGB , currentColor 30% , transparent );
				outline-offset : -1px;
			}
		}
		h3{
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			font-weight : 500;
			line-height : 1.5;
		}
		.price{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			margin-top : calc( 8 * var( --remBase ) );
			dt{
				display : grid;
				place-items : center;
				height : calc( 34 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				background-color : white;
				border-radius : 100vmax;
			}
			dd{
				display : grid;
				grid-auto-flow : column;
				column-gap : calc( 8 * var( --remBase ) );
				align-items : center;
				justify-content : start;
				> span:nth-of-type( 1 ){
					font-family : Helvetica , Arial , sans-serif;
					font-size : calc( 32 * var( --remBase ) );
					font-weight : 400;
				}
				> span:nth-of-type( 2 ){
					font-size : calc( 18 * var( --remBase ) );
				}
			}
		}
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		.splide__slide{
			a{
				display : block;
			}
			.category{
				left : calc( 16 * 100% / 310 );
			}
			.brand{
				column-gap : calc( 17 * 100% / 310 );
			}
			.price{
				grid-template-columns : calc( 80 * 100% / 310 ) auto;
				column-gap : calc( 18 * 100% / 310 );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		margin-top : calc( 64 * var( --remBase ) );
		.splide__list{
			display : grid;
			grid-template-columns : repeat( 4 , calc( 308 * var( --contentBase ) ) );
			row-gap : calc( 20 * var( --remBase ) );
			justify-content : space-between;
		}
		.splide__slide , .splide__slide a{
			display : grid;
			grid-template-rows : subgrid;
			grid-row : span 4;
			row-gap : 0;
		}
		.splide__slide{
			a{
				padding-bottom : calc( 20 * var( --remBase ) );
			}
			.category{
				left : calc( 16 * 100% / 308 );
			}
			.brand{
				column-gap : calc( 17 * 100% / 308 );
			}
			.price{
				grid-template-columns : calc( 80 * 100% / 308 ) auto;
				column-gap : calc( 18 * 100% / 308 );
			}
		}
	}
}
@media ( hover : hover ){
	#slider02 .splide__slide a:hover{
		background-color : color-mix( in srgb , #white 10% , transparent );
		border-radius : calc( 10 * var( --remBase ) );
		img{
			scale : 1.05;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#slider02 .splide__slide a{
		transition : background-color var( --transitionBase );
		img{
			transition : scale var( --transitionBase );
		}
	}
}
.slider-sp01{
	@media screen and ( width < 768px ){
		padding-left : calc( 20 * var( --viewportBase ) );
		.splide-controllers{
			display : grid;
			grid-template-columns : calc( 108 * var( --contentBase ) ) calc( 222 * var( --contentBase ) );
			align-items : center;
			justify-content : space-between;
			padding-right : calc( 20 * 100% / 370 );
			margin-top : calc( 32 * var( --remBase ) );
		}
		.splide__arrows{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : space-between;
			button{
				display : grid;
				place-items : center;
				width : auto;
				height : calc( 48 * var( --remBase ) );
				aspect-ratio : 1;
				background-color : white;
				border-radius : calc( 14 * var( --remBase ) );
				img{
					height : calc( 14 * var( --remBase ) );
					filter : var( --filterOrange );
				}
			}
		}
		.progress{
			grid-column : 2;
			background-color : white;
			border-radius : 100vmax;
		}
		.progress-bar{
			height : calc( 4 * var( --remBase ) );
			background-color : var( --base );
			border-radius : 100vmax;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.slider-sp01 .progress-bar{
		transition : width var( --transitionBase );
	}
}
.link01{
	display : grid;
	grid-auto-flow : column;
	column-gap : calc( 10 * 100% / 298 );
	align-items : center;
	justify-content : center;
	height : calc( 64 * var( --remBase ) );
	margin-inline : auto;
	font-size : calc( 18 * var( --remBase ) );
	background-color : var( --orange );
	border-radius : calc( 10 * var( --remBase ) );
	outline : solid calc( 2 * var( --remBase ) ) var( --orange );
	outline-offset : calc( -2 * var( --remBase ) );
	> span{
		&:nth-of-type( 1 ){
			font-weight : 700;
			color : white;
		}
		&:nth-of-type( 2 ){
			position : relative;
			width : auto;
			height : calc( 24 * var( --remBase ) );
			aspect-ratio : 1;
			overflow : hidden;
			background-color : white;
			border-radius : 50%;
			img{
				opacity : 0;
			}
			&::after{
				position : absolute;
				top : 0;
				left : 0;
				display : block;
				width : 100%;
				height : 100%;
				font-size : 0;
				content : "";
				background-image : url( "../images/ui/arrow/right02.svg" );
				filter : var( --filterOrange );
				background-repeat : no-repeat;
				background-position : center;
				background-size : auto calc( 8 * var( --remBase ) );
				translate : 0 0;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ) and ( hover : hover ){
	.link01{
		> span:nth-of-type( 2 )::after{
			transition : translate .6s linear;
			will-change : translate;
		}
		&:hover > span:nth-of-type( 2 )::after{
			transition : none;
			animation : arrowMarquee .6s linear;
		}
	}
}

/* --------------------------------------------
MARKETS
--------------------------------------------- */
#markets{
	background-color : #f7f4f0;
	.lede{
		font-size : calc( 14 * var( --remBase ) );
		line-height : 1.5;
		color : color-mix( in sRGB , currentColor 50% , transparent );
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		.lede{
			margin-top : calc( 48 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		display : grid;
		grid-template-columns : auto auto;
		align-items : end;
		justify-content : space-between;
		padding-bottom : calc( 169 * var( --remBase ) );
		header{
			display : contents;
			.hgroup01{
				display : contents;
				p{
					grid-row : 1;
					grid-column : 1/-1;
					margin-bottom : calc( 18 * var( --remBase ) );
				}
				h2{
					grid-row : 2;
					grid-column : 1;
					margin-top : 0;
				}
			}
		}
		.lede{
			grid-row : 2;
			grid-column : 2;
			text-align : right;
		}
	}
}
#slider03{
	.splide__slide{
		background-color : white;
		picture{
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
		.brand{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			dt{
				display : grid;
				place-items : center;
				height : calc( 29 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
				color : white;
				background-color : var( --base );
				border-radius : 100vmax;
			}
		}
		h3{
			font-weight : 500;
			line-height : 1.5;
		}
		.values{
			> div{
				display : grid;
				grid-auto-flow : column;
				align-items : center;
				justify-content : start;
			}
			dt{
				display : grid;
				place-items : center;
				background-color : #f1ede9;
				border-radius : 100vmax;
			}
			dd{
				display : grid;
				grid-auto-flow : column;
				align-items : center;
				justify-content : start;
				> span{
					&:nth-of-type( 1 ){
						font-family : Helvetica , Arial , sans-serif;
						font-weight : 400;
					}
				}
			}
		}
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		.splide__slide{
			padding-block : calc( 28 * var( --remBase ) );
			padding-inline : calc( 24 * 100% / 310 );
			picture{
				width : calc( 190 * 100% / 262 );
				height : calc( 174 * var( --remBase ) );
				margin-inline : auto;
			}
			> div{
				margin-top : calc( 28 * var( --remBase ) );
			}
			.brand{
				grid-template-columns : calc( 83 * 100% / 262 );
				column-gap : calc( 15 * 100% / 262 );
				dd{
					font-size : calc( 14 * var( --remBase ) );
				}
			}
			h3{
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
			.values{
				margin-top : calc( 12 * var( --remBase ) );
				> div{
					column-gap : calc( 18 * 100% / 262 );
					+ div{
						margin-top : calc( 10 * var( --remBase ) );
					}
				}
				dt{
					height : calc( 28 * var( --remBase ) );
					padding-inline : calc( 8 * var( --remBase ) );
					font-size : calc( 12 * var( --remBase ) );
				}
				dd{
					column-gap : calc( 4 * var( --remBase ) );
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 34 * var( --remBase ) );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 16 * var( --remBase ) );
						}
					}
				}
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		grid-row : 3;
		grid-column : 1/-1;
		margin-top : calc( 80 * var( --remBase ) );
		.splide__list{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 656 * var( --contentBase ) ) );
			row-gap : calc( 50 * var( --remBase ) );
			justify-content : space-between;
		}
		.splide__slide{
			display : grid;
			grid-template-columns : calc( 198 * 100% / 560 ) 1fr;
			column-gap : calc( 34 * 100% / 560 );
			align-items : center;
			padding-block : calc( 48 * var( --remBase ) );
			padding-inline : calc( 48 * 100% / 656 );
			border-radius : calc( 10 * var( --remBase ) );
			picture{
				grid-row : 1;
				grid-column : 1;
				height : calc( 199 * var( --remBase ) );
			}
			> div{
				grid-row : 1;
				grid-column : 2;
			}
			.brand{
				grid-template-columns : calc( 79 * 100% / 328 );
				column-gap : calc( 15 * 100% / 328 );
				dd{
					font-size : calc( 16 * var( --remBase ) );
				}
			}
			h3{
				margin-top : calc( 20 * var( --remBase ) );
				font-size : calc( 22 * var( --remBase ) );
			}
			.values{
				margin-top : calc( 20 * var( --remBase ) );
				> div{
					column-gap : calc( 18 * 100% / 328 );
					+ div{
						margin-top : calc( 10 * var( --remBase ) );
					}
				}
				dt{
					height : calc( 32 * var( --remBase ) );
					padding-inline : calc( 12 * var( --remBase ) );
					font-size : calc( 12 * var( --remBase ) );
				}
				dd{
					column-gap : calc( 8 * var( --remBase ) );
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 36 * var( --remBase ) );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 18 * var( --remBase ) );
						}
					}
				}
			}
		}
	}
}

/* --------------------------------------------
GOOD TIME
--------------------------------------------- */
#goodTime{
	background-color : #f7f4f0;
	> ul{
		> li{
			counter-increment : no;
			background-color : white;
		}
		h3{
			font-weight : 500;
			color : var( --orange );
			&::before{
				display : block;
				font-family : Helvetica , Arial , sans-serif;
				font-weight : 700;
				line-height : 1;
				color : var( --base );
				content : counter( no , decimal-leading-zero );
			}
		}
		p{
			letter-spacing : .03em;
		}
	}
	picture{
		width : 100%;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 48 * var( --remBase ) );
		> ul{
			margin-top : calc( 48 * var( --remBase ) );
			> li{
				padding-block : calc( 20 * var( --remBase ) );
				padding-inline : calc( 20 * var( --contentBase ) );
				border-radius : calc( 20 * var( --remBase ) );
				+ li{
					margin-top : calc( 28 * var( --remBase ) );
				}
			}
			picture{
				height : calc( 180 * var( --remBase ) );
			}
			> li{
				> div{
					margin-top : calc( 12 * var( --remBase ) );
				}
			}
			h3{
				font-size : calc( 18 * var( --remBase ) );
				line-height : 1.5;
				&::before{
					margin-bottom : calc( 12 * var( --remBase ) );
					font-size : calc( 16 * var( --remBase ) );
				}
			}
			p{
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 169 * var( --remBase ) );
		> ul{
			margin-top : calc( 64 * var( --remBase ) );
			> li{
				display : grid;
				grid-template-columns : calc( 280 * 100% / 1192 ) 1fr;
				column-gap : calc( 56 * 100% / 1192 );
				align-items : center;
				padding-block : calc( 56 * var( --remBase ) );
				padding-inline : calc( 80 * var( --contentBase ) );
				border-radius : calc( 10 * var( --remBase ) );
				+ li{
					margin-top : calc( 40 * var( --remBase ) );
				}
			}
			picture{
				height : calc( 162 * var( --remBase ) );
			}
			h3{
				font-size : calc( 28 * var( --remBase ) );
				line-height : 1.5;
				&::before{
					margin-bottom : calc( 20 * var( --remBase ) );
					font-size : calc( 18 * var( --remBase ) );
				}
			}
			p{
				margin-top : calc( 20 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : 1.7;
			}
		}
	}
}
#goodTime02{
	h3{
		position : relative;
		width : fit-content;
		letter-spacing : .01em;
		background-color : white;
		border-radius : 100vmax;
		&::after{
			position : absolute;
			left : 0;
			display : block;
			width : auto;
			aspect-ratio : 23/14;
			font-size : 0;
			content : "";
			background : url( "../images/ui/parts/comment-unit.svg" ) left top / contain no-repeat;
		}
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		h3{
			padding-block : calc( 9.5 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			margin-left : calc( 20 * var( --viewportBase ) );
			font-size : calc( 14 * var( --remBase ) );
			&::after{
				bottom : 0;
				height : calc( 9 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		margin-top : calc( 64 * var( --remBase ) );
		h3{
			padding-block : calc( 14.5 * var( --remBase ) );
			padding-inline : calc( 24 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			&::after{
				bottom : calc( -1 * var( --remBase ) );
				left : 0;
				height : calc( 14 * var( --remBase ) );
			}
		}
	}
}
#slider04{
	.splide__slide{
		picture{
			height : calc( 194 * var( --remBase ) );
			overflow : hidden;
			border-radius : calc( 10 * var( --remBase ) );
		}
		p{
			line-height : 1.3;
			letter-spacing : .03em;
		}
	}
	@media screen and ( width < 768px ){
		padding-left : calc( 20 * var( --viewportBase ) );
		margin-top : calc( 32 * var( --remBase ) );
		.splide__slide{
			p{
				margin-top : calc( 10 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		.splide__list{
			display : grid;
			grid-template-columns : repeat( 4 , calc( 308 * var( --contentBase ) ) );
			justify-content : space-between;
		}
		.splide__slide{
			p{
				margin-top : calc( 14 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				text-align : center;
				text-indent : -.03em;
			}
		}
	}
}
.slider-sp02{
	@media screen and ( width < 768px ){
		.progress{
			width : calc( 222 * var( --viewportBase ) );
			margin-inline : auto;
			margin-top : calc( 32 * var( --remBase ) );
			background-color : white;
			border-radius : 100vmax;
		}
		.progress-bar{
			height : calc( 4 * var( --remBase ) );
			background-color : var( --base );
			border-radius : 100vmax;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.slider-sp02 .progress-bar{
		transition : width var( --transitionBase );
	}
}
.details01{
	background-color : white;
	border-radius : calc( 10 * var( --remBase ) );
	summary{
		display : grid;
		align-items : center;
		justify-content : start;
		&::before{
			display : grid;
			place-items : center;
			font-family : Helvetica , Arial , sans-serif;
			font-weight : 700;
			line-height : 1;
			color : white;
			background-color : var( --orange );
		}
	}
	summary > h2 , summary > h3{
		display : grid;
		align-items : center;
		font-weight : 500;
		&::before , &::after{
			display : block;
			grid-row : 1;
			grid-column : 2;
			width : 100%;
			font-size : 0;
			content : "";
			background-color : var( --base );
		}
		&::after{
			rotate : -90deg;
		}
	}
	&[open]{
		summary > h2 , summary > h3{
			&::after{
				rotate : 0deg;
			}
		}
	}
	@media screen and ( width < 768px ){
		padding-block : calc( 20 * var( --remBase ) );
		padding-inline : calc( 20 * var( --contentBase ) );
		summary{
			grid-template-columns : calc( 57 * 100% / 310 ) 1fr;
			column-gap : calc( 10 * 100% / 310 );
			&::before{
				height : calc( 32 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
				border-radius : calc( 8 * var( --remBase ) );
			}
		}
		h2 , h3{
			grid-template-columns : 1fr calc( 16 * 100% / 243 );
			column-gap : calc( 32 * 100% / 243 );
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.5;
			&::before , &::after{
				height : calc( 2 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		width : calc( 1124 * var( --contentBase ) );
		padding-block : calc( 48 * var( --remBase ) );
		padding-inline : calc( 48 * var( --contentBase ) );
		margin-inline : auto;
		border-radius : calc( 10 * var( --remBase ) );
		summary{
			grid-template-columns : calc( 101 * 100% / 1028 ) 1fr;
			column-gap : calc( 24 * 100% / 1028 );
			&::before{
				height : calc( 60 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				border-radius : calc( 10 * var( --remBase ) );
			}
		}
		summary > h2 , summary > h3{
			grid-template-columns : 1fr calc( 20 * 100% / 903 );
			font-size : calc( 32 * var( --remBase ) );
			line-height : 1.5;
			&::before , &::after{
				height : calc( 2 * var( --remBase ) );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.details01{
		summary > h2 , summary > h3{
			&::after{
				transition : rotate var( --transitionBase );
			}
		}
	}
}

/* --------------------------------------------
TIPS
--------------------------------------------- */
#tips{
	background-color : #f7f4f0;
	li + li{
		border-top : 1px dashed color-mix( in sRGB , var( --base ) 30% , transparent );
	}
	h3{
		font-weight : 500;
		line-height : 1.5;
		color : var( --orange );
	}
	li{
		p{
			letter-spacing : .03em;
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		ul{
			margin-top : calc( 20 * var( --remBase ) );
		}
		li + li{
			padding-top : calc( 24 * var( --remBase ) );
			margin-top : calc( 24 * var( --remBase ) );
		}
		h3{
			font-size : calc( 18 * var( --remBase ) );
		}
		li p{
			margin-top : calc( 10 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.6;
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 169 * var( --remBase ) );
		ul{
			margin-top : calc( 40 * var( --remBase ) );
		}
		li + li{
			padding-top : calc( 32 * var( --remBase ) );
			margin-top : calc( 32 * var( --remBase ) );
		}
		h3{
			font-size : calc( 26 * var( --remBase ) );
		}
		li p{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
		}
	}
}

/* --------------------------------------------
CONTACTS0102
--------------------------------------------- */
#contacts0102{
	background-color : #f7f4f0;
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
	}
}

/* --------------------------------------------
APPRAISERS
--------------------------------------------- */
#appraisers{
	@media screen and ( width < 768px ){
		padding-top : calc( 144 * var( --remBase ) );
		padding-bottom : calc( 140 * var( --remBase ) );
	}
	@media print , screen and ( width >= 768px ){
		padding-top : calc( 190 * var( --remBase ) );
		padding-bottom : calc( 180 * var( --remBase ) );
	}
}
#slider05{
	.splide__slide{
		background-color : white;
		picture{
			overflow : hidden;
			border-radius : calc( 10 * var( --remBase ) );
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
		header{
			display : flex;
			flex-wrap : wrap;
			align-items : center;
			justify-content : space-between;
		}
		h3{
			font-weight : 500;
		}
		ul{
			display : flex;
			flex-wrap : wrap;
			align-items : center;
		}
		li{
			display : grid;
			place-items : center;
			background-color : #f1ede9;
			border-radius : 100vmax;
		}
		p{
			font-size : calc( 16 * var( --remBase ) );
			font-weight : 400;
			line-height : 1.6;
			letter-spacing : .03em;
		}
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		.splide__slide{
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 20 * var( --remBase ) );
			border-radius : calc( 20 * var( --remBase ) );
			picture{
				height : calc( 180 * var( --remBase ) );
			}
			header{
				margin-top : calc( 16 * var( --remBase ) );
			}
			h3{
				font-size : calc( 18 * var( --remBase ) );
			}
			ul{
				column-gap : calc( 12 * var( --remBase ) );
			}
			li{
				height : calc( 28 * var( --remBase ) );
				padding-inline : calc( 10 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
			}
			p{
				margin-top : calc( 2 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		margin-top : calc( 64 * var( --remBase ) );
		.splide__slide{
			padding-block : calc( 48 * var( --remBase ) );
			padding-inline : calc( 48 * var( --remBase ) );
			border-radius : calc( 10 * var( --remBase ) );
			picture{
				height : calc( 260 * var( --remBase ) );
			}
			header{
				margin-top : calc( 28 * var( --remBase ) );
			}
			h3{
				font-size : calc( 26 * var( --remBase ) );
			}
			ul{
				column-gap : calc( 9 * var( --remBase ) );
			}
			li{
				height : calc( 34 * var( --remBase ) );
				padding-inline : calc( 16 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
			}
			p{
				margin-top : calc( 20 * var( --remBase ) );
			}
		}
	}
}
.splide-controllers01{
	display : grid;
	align-items : center;
	justify-content : space-between;
	margin-top : calc( 32 * var( --remBase ) );
	.splide__arrows{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : space-between;
		button{
			display : grid;
			place-items : center;
			width : auto;
			aspect-ratio : 1;
			background-color : white;
			img{
				filter : var( --filterOrange );
			}
		}
	}
	.progress{
		background-color : white;
		border-radius : 100vmax;
	}
	.progress-bar{
		height : calc( 4 * var( --remBase ) );
		background-color : var( --base );
		border-radius : 100vmax;
	}
	@media screen and ( width < 768px ){
		grid-template-columns : calc( 108 * var( --contentBase ) ) calc( 222 * var( --contentBase ) );
		.splide__arrows{
			button{
				height : calc( 48 * var( --remBase ) );
				border-radius : calc( 14 * var( --remBase ) );
				img{
					height : calc( 14 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		grid-template-columns : calc( 176 * var( --contentBase ) ) calc( 1120 * var( --contentBase ) );
		.splide__arrows{
			button{
				position : relative;
				height : calc( 72 * var( --remBase ) );
				overflow : hidden;
				border-radius : calc( 28 * var( --remBase ) );
				img{
					opacity : 0;
				}
				&::after{
					position : absolute;
					top : 0;
					left : 0;
					display : block;
					width : 100%;
					height : 100%;
					font-size : 0;
					content : "";
					filter : var( --filterOrange );
					background-repeat : no-repeat;
					background-position : center;
					background-size : auto calc( 15 * var( --remBase ) );
					translate : 0 0;
				}
			}
			.splide__arrow--prev::after{
				background-image : url( "../images/ui/arrow/prev01.svg" );
			}
			.splide__arrow--next::after{
				background-image : url( "../images/ui/arrow/next01.svg" );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ) and ( hover : hover ){
	.splide__arrow--prev{
		&::after{
			transition : translate .6s linear;
			will-change : translate;
		}
		&:hover::after{
			transition : none;
			animation : arrowMarqueeReverse .6s linear;
		}
	}
	.splide__arrow--next{
		&::after{
			transition : translate .6s linear;
			will-change : translate;
		}
		&:hover::after{
			transition : none;
			animation : arrowMarquee .6s linear;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.splide-controllers01 .progress-bar{
		transition : width var( --transitionBase );
	}
}

/* --------------------------------------------
REASON
--------------------------------------------- */
#reason{
	li{
		counter-increment : no;
	}
	h3{
		font-weight : 500;
		color : var( --orange );
		&::before{
			display : block;
			font-family : Helvetica , Arial , sans-serif;
			font-weight : 700;
			color : var( --base );
			content : counter( no , decimal-leading-zero );
		}
	}
	li p{
		font-weight : 400;
		letter-spacing : .03em;
	}
	picture{
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		ul{
			margin-top : calc( 48 * var( --remBase ) );
		}
		li{
			+ li{
				margin-top : calc( 40 * var( --remBase ) );
			}
		}
		picture{
			height : calc( 220 * var( --remBase ) );
		}
		li > div{
			margin-top : calc( 16 * var( --remBase ) );
		}
		h3{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.5;
			&::before{
				margin-bottom : calc( 12 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		li p{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.5;
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
		ul{
			margin-top : calc( 64 * var( --remBase ) );
		}
		li{
			display : grid;
			grid-template-columns : 1fr calc( 688 * 100% / 1192 );
			column-gap : calc( 80 * 100% / 1192 );
			align-items : center;
			padding-inline : calc( 80 * var( --contentBase ) );
			+ li{
				margin-top : calc( 56 * var( --remBase ) );
			}
			> div{
				grid-row : 1;
				grid-column : 1;
			}
		}
		h3{
			font-size : calc( 28 * var( --remBase ) );
			line-height : 1.5;
			&::before{
				margin-bottom : calc( 40 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		li p{
			margin-top : calc( 40 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.7;
		}
		picture{
			grid-row : 1;
			grid-column : 2;
			height : calc( 440 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
PURCHASE
--------------------------------------------- */
#purchase{
	li{
		background-color : white;
	}
	a{
		display : block;
		> span{
			&:nth-of-type( 1 ){
				span , em{
					display : block;
					text-align : center;
					text-indent : .02em;
					letter-spacing : .02em;
				}
				em{
					font-weight : 500;
					color : var( --orange );
				}
			}
			&:nth-of-type( 2 ){
				display : grid;
				grid-auto-flow : column;
				align-items : center;
				justify-content : center;
				height : calc( 64 * var( --remBase ) );
				margin-inline : auto;
				margin-top : calc( 32 * var( --remBase ) );
				color : white;
				background-color : var( --orange );
				border-radius : calc( 16 * var( --remBase ) );
				outline : solid calc( 2 * var( --remBase ) ) var( --orange );
				outline-offset : calc( -2 * var( --remBase ) );
				> span{
					&:nth-of-type( 1 ){
						font-size : calc( 18 * var( --remBase ) );
						font-weight : 700;
						color : white;
					}
					&:nth-of-type( 2 ){
						position : relative;
						width : auto;
						height : calc( 24 * var( --remBase ) );
						aspect-ratio : 1;
						overflow : hidden;
						background-color : white;
						border-radius : 50%;
						img{
							opacity : 0;
						}
						&::after{
							position : absolute;
							top : 0;
							left : 0;
							display : block;
							width : 100%;
							height : 100%;
							font-size : 0;
							content : "";
							background-image : url( "../images/ui/arrow/right02.svg" );
							filter : var( --filterOrange );
							background-repeat : no-repeat;
							background-position : center;
							background-size : auto calc( 8 * var( --remBase ) );
							translate : 0 0;
						}
					}
				}
			}
		}
		picture{
			width : 100%;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		ul{
			margin-top : calc( 48 * var( --remBase ) );
		}
		li{
			padding-block : calc( 40 * var( --remBase ) );
			padding-inline : calc( 20 * var( --contentBase ) );
			border-radius : calc( 10 * var( --remBase ) );
			+ li{
				margin-top : calc( 40 * var( --remBase ) );
			}
		}
		a{
			> span{
				&:nth-of-type( 1 ){
					span{
						font-size : calc( 14 * var( --remBase ) );
					}
					em{
						margin-top : calc( 16 * var( --remBase ) );
						font-size : calc( 32 * var( --remBase ) );
					}
				}
				&:nth-of-type( 2 ){
					column-gap : calc( 10 * 100% / 310 );
					width : 100%;
					font-size : calc( 18 * var( --remBase ) );
				}
			}
			picture{
				height : calc( 180 * var( --remBase ) );
				margin-top : calc( 48 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 656 * var( --contentBase ) ) );
			justify-content : space-between;
			margin-top : calc( 64 * var( --remBase ) );
		}
		li{
			padding-block : calc( 64 * var( --remBase ) );
			padding-inline : calc( 64 * 100% / 656 );
			border-radius : calc( 10 * var( --remBase ) );
		}
		a{
			> span{
				&:nth-of-type( 1 ){
					span{
						font-size : calc( 18 * var( --remBase ) );
					}
					em{
						margin-top : calc( 24 * var( --remBase ) );
						font-size : calc( 24 * var( --remBase ) );
					}
				}
				&:nth-of-type( 2 ){
					column-gap : calc( 10 * 100% / 208 );
					width : calc( 208 * 100% / 528 );
					font-size : calc( 18 * var( --remBase ) );
				}
			}
			picture{
				height : calc( 320 * var( --remBase ) );
				margin-top : calc( 48 * var( --remBase ) );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ) and ( hover : hover ){
	#purchase a{
		> span:nth-of-type( 2 ) > span:nth-of-type( 2 )::after{
			transition : translate .6s linear;
			will-change : translate;
		}
		&:hover > span:nth-of-type( 2 ) > span:nth-of-type( 2 )::after{
			transition : none;
			animation : arrowMarquee .6s linear;
		}
	}
}
#purchase02{
	p{
		letter-spacing : .03em;
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		.detailsContent{
			> div{
				margin-top : calc( 20 * var( --remBase ) );
			}
		}
		p{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.6;
			+ p{
				margin-top : calc( 16 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		margin-top : calc( 64 * var( --remBase ) );
		.detailsContent{
			> div{
				width : calc( 964 * 100% / 1028 );
				padding-bottom : calc( 32 * var( --remBase ) );
				margin-inline : auto;
				margin-top : calc( 40 * var( --remBase ) );
			}
		}
		p{
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
			+ p{
				margin-top : calc( 24 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
SEARCH
--------------------------------------------- */
#search{
	.me h3{
		font-weight : 500;
	}
	.address{
		margin-top : calc( 32 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.6;
	}
	.map{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		margin-top : calc( 10 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		text-decoration : underline;
		&::after{
			display : block;
			width : auto;
			height : calc( 24 * var( --remBase ) );
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : url( "../images/ui/arrow/right_top01.svg" ) center / contain no-repeat;
		}
	}
	.way{
		margin-top : calc( 32 * var( --remBase ) );
		li{
			font-size : calc( 16 * var( --remBase ) );
			font-weight : 400;
			line-height : 1.6;
		}
	}
	a{
		height : calc( 64 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		&::after{
			height : calc( 24 * var( --remBase ) );
		}
	}
	picture{
		width : 100%;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	.notes02{
		li{
			font-weight : 400;
			line-height : 1.5;
			color : color-mix( in sRGB , var( --base ) 50% , transparent );
			letter-spacing : .03em;
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		.me h3{
			margin-top : calc( 60 * var( --remBase ) );
			font-size : calc( 26 * var( --remBase ) );
		}
		.map{
			column-gap : calc( 12 * var( --contentBase ) );
		}
		a{
			column-gap : calc( 10 * var( --contentBase ) );
			width : 100%;
			margin-top : calc( 32 * var( --remBase ) );
			border-radius : calc( 10 * var( --remBase ) );
		}
		picture{
			height : calc( 240 * var( --remBase ) );
			margin-top : calc( 32 * var( --remBase ) );
		}
		.notes02{
			margin-top : calc( 20 * var( --remBase ) );
			li{
				font-size : calc( 12 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		display : grid;
		grid-template-columns : calc( 424 * var( --contentBase ) ) calc( 772 * var( --contentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 180 * var( --remBase ) );
		.me h3{
			margin-top : calc( 80 * var( --remBase ) );
			font-size : calc( 28 * var( --remBase ) );
		}
		.map{
			column-gap : calc( 12 * 100% / 424 );
		}
		a{
			column-gap : calc( 10 * 100% / 208 );
			width : calc( 208 * 100% / 424 );
			margin-top : calc( 80 * var( --remBase ) );
			border-radius : calc( 16 * var( --remBase ) );
		}
		picture{
			height : calc( 640 * var( --remBase ) );
		}
		.notes02{
			grid-row : 3;
			grid-column : 1/-1;
			width : calc( 1120 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 20 * var( --remBase ) );
			li{
				font-size : calc( 14 * var( --remBase ) );
			}
		}
	}
}
#search02{
	.licenses{
		display : flex;
		li{
			display : grid;
			place-items : center;
			border-radius : 100vmax;
			outline : solid 1px color-mix( in sRGB , var( --base ) 20% , transparent );
			outline-offset : -1px;
		}
	}
	p{
		letter-spacing : .03em;
	}
	.notes01{
		li{
			color : color-mix( in sRGB , var( --base ) 50% , transparent );
			letter-spacing : .03em;
		}
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 60 * var( --remBase ) );
		.detailsContent > div{
			margin-top : calc( 20 * var( --remBase ) );
		}
		.licenses{
			flex-wrap : wrap;
			row-gap : calc( 10 * var( --remBase ) );
			column-gap : calc( 10 * 100% / 310 );
			li{
				height : calc( 42 * var( --remBase ) );
				padding-inline : calc( 18 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		p{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.6;
		}
		.notes01{
			margin-top : calc( 16 * var( --remBase ) );
			li{
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		grid-row : 2;
		grid-column : 1/-1;
		margin-top : calc( 64 * var( --remBase ) );
		.detailsContent > div{
			width : calc( 964 * 100% / 1028 );
			margin-inline : auto;
			margin-top : calc( 40 * var( --remBase ) );
		}
		.licenses{
			justify-content : space-between;
			li{
				height : calc( 54 * var( --remBase ) );
				padding-inline : calc( 24 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		p{
			margin-top : calc( 40 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
		}
		.notes01{
			margin-top : calc( 24 * var( --remBase ) );
			li{
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
}

/* --------------------------------------------
VOICE
--------------------------------------------- */
#voices{
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		.link01{
			width : 100%;
			margin-top : calc( 48 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
		.link01{
			width : calc( 280 * var( --contentBase ) );
			margin-top : calc( 64 * var( --remBase ) );
		}
	}
}
#slider06{
	.splide__slide{
		background-color : white;
		border-radius : calc( 10 * var( --remBase ) );
		h3{
			font-weight : 500;
			line-height : 1.6;
		}
		.comment{
			font-size : calc( 16 * var( --remBase ) );
		}
		.author{
			display : grid;
			grid-template-columns : auto 1fr;
			img{
				width : 100%;
				width : auto;
				height : 100%;
				height : calc( 48 * var( --remBase ) );
				aspect-ratio : 1;
				object-fit : cover;
				object-position : center;
			}
			> span{
				display : flex;
				flex-wrap : wrap;
				column-gap : 1em;
				padding-top : calc( 15 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		.splide__slide{
			padding-block : calc( 24 * var( --remBase ) );
			padding-inline : calc( 20 * var( --remBase ) );
			h3{
				font-size : calc( 18 * var( --remBase ) );
			}
			.comment{
				margin-top : calc( 10 * var( --remBase ) );
				line-height : 1.5;
			}
			.author{
				column-gap : calc( 20 * 100% / 270 );
				margin-top : calc( 10 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		margin-top : calc( 64 * var( --remBase ) );
		.splide__slide{
			padding-block : calc( 48 * var( --remBase ) );
			padding-inline : calc( 48 * var( --remBase ) );
			h3{
				font-size : calc( 26 * var( --remBase ) );
			}
			.comment{
				margin-top : calc( 20 * var( --remBase ) );
				line-height : 1.6;
				letter-spacing : .03em;
			}
			.author{
				column-gap : calc( 20 * 100% / 328 );
				margin-top : calc( 20 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq{
	details{
		background-color : white;
	}
	summary{
		display : grid;
		align-items : center;
		justify-content : start;
		&::before{
			font-family : Helvetica , Arial , sans-serif;
			font-weight : 400;
			line-height : 1;
			color : var( --orange );
			content : "Q";
		}
		span{
			display : grid;
			align-items : center;
			font-weight : 500;
			&::before , &::after{
				display : block;
				grid-row : 1;
				grid-column : 2;
				width : 100%;
				font-size : 0;
				content : "";
				background-color : var( --base );
			}
			&::after{
				rotate : -90deg;
			}
		}
	}
	details{
		&[open]{
			span{
				&::after{
					rotate : 0deg;
				}
			}
		}
	}
	.detailsContent{
		> div{
			position : relative;
			font-weight : 400;
			border-top : dashed 1px color-mix( in sRGB , var( --base ) 30% , transparent );
			&::before{
				position : absolute;
				left : 0;
				font-family : Helvetica , Arial , sans-serif;
				font-weight : 400;
				line-height : 1;
				color : var( --orange );
				content : "A";
			}
		}
		p{
			letter-spacing : .03em;
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		header{
			margin-bottom : calc( 48 * var( --remBase ) );
		}
		details{
			padding-block : calc( 32 * var( --remBase ) );
			padding-inline : calc( 20 * var( --contentBase ) );
			border-radius : calc( 10 * var( --remBase ) );
			+ details{
				margin-top : calc( 20 * var( --remBase ) );
			}
		}
		summary{
			grid-template-columns : calc( 32 * 100% / 310 ) 1fr;
			&::before{
				font-size : calc( 18 * var( --remBase ) );
			}
			span{
				grid-template-columns : 1fr calc( 20 * 100% / 278 );
				column-gap : calc( 12 * 100% / 278 );
				font-size : calc( 18 * var( --remBase ) );
				line-height : 1.5;
				&::before , &::after{
					height : calc( 2 * var( --remBase ) );
				}
			}
		}
		.detailsContent{
			> div{
				padding-left : calc( 30 * 100% / 310 );
				&::before{
					top : calc( 24 * var( --remBase ) );
					font-size : calc( 18 * var( --remBase ) );
				}
			}
			p{
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		details[open]{
			.detailsContent{
				> div{
					padding-top : calc( 32 * var( --remBase ) );
					margin-top : calc( 32 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
		header{
			margin-bottom : calc( 64 * var( --remBase ) );
		}
		details{
			width : calc( 1192 * var( --contentBase ) );
			padding-block : calc( 40 * var( --remBase ) );
			padding-inline : calc( 40 * var( --contentBase ) );
			margin-inline : auto;
			border-radius : calc( 10 * var( --remBase ) );
			+ details{
				margin-top : calc( 40 * var( --remBase ) );
			}
		}
		summary{
			grid-template-columns : calc( 63 * 100% / 1112 ) 1fr;
			&::before{
				font-size : calc( 36 * var( --remBase ) );
			}
			span{
				grid-template-columns : 1fr calc( 20 * 100% / 1049 );
				font-size : calc( 24 * var( --remBase ) );
				line-height : 1.5;
				&::before , &::after{
					height : calc( 2 * var( --remBase ) );
				}
			}
		}
		.detailsContent{
			> div{
				padding-left : calc( 55 * 100% / 1112 );
				&::before{
					top : calc( 32 * var( --remBase ) );
					font-size : calc( 36 * var( --remBase ) );
				}
			}
			p{
				font-size : calc( 18 * var( --remBase ) );
				line-height : 1.6;
			}
		}
		details[open]{
			.detailsContent{
				> div{
					padding-top : calc( 32 * var( --remBase ) );
					margin-top : calc( 32 * var( --remBase ) );
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faq summary{
		span{
			&::after{
				transition : rotate var( --transitionBase );
			}
		}
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
#column{
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		.lede{
			margin-top : calc( 32 * var( --remBase ) );
		}
		.link01{
			column-gap : calc( 10 * var( --contentBase ) );
			width : 100%;
			width : calc( 350 * var( --viewportBase ) );
			margin-inline : auto;
			margin-top : calc( 48 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
		header{
			display : grid;
			grid-template-columns : auto calc( 640 * var( --contentBase ) );
			align-items : end;
			justify-content : space-between;
			.hgroup01{
				display : contents;
				p{
					grid-row : 1;
					grid-column : 1/-1;
				}
				h2{
					grid-row : 2;
					grid-column : 1;
					margin-top : 0;
				}
			}
			.lede{
				grid-row : 2;
				grid-column : 2;
			}
		}
		.link01{
			column-gap : calc( 10 * 100% / 316 );
			width : calc( 316 * var( --contentBase ) );
			margin-top : calc( 64 * var( --remBase ) );
		}
	}
}
#slider07{
	.splide__slide{
		a{
			display : block;
			background-color : white;
		}
		picture{
			width : 100%;
			overflow : hidden;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
		h3{
			font-weight : 500;
		}
		time{
			display : block;
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			font-weight : 400;
			color : color-mix( in sRGB , var( --base ) 50% , transparent );
		}
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		.splide__slide{
			a{
				padding-block : calc( 20 * var( --remBase ) );
				padding-inline : calc( 20 * 100% / 310 );
				border-radius : calc( 20 * var( --remBase ) );
			}
			picture{
				height : calc( 180 * var( --remBase ) );
				border-radius : calc( 10 * var( --remBase ) );
			}
			h3{
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		margin-top : calc( 64 * var( --remBase ) );
		.splide__list{
			display : grid;
			grid-template-columns : repeat( 3 , calc( 424 * var( --contentBase ) ) );
			row-gap : calc( 40 * var( --remBase ) );
			justify-content : space-between;
		}
		.splide__slide{
			a{
				padding-block : calc( 32 * var( --remBase ) );
				padding-inline : calc( 32 * 100% / 424 );
				border-radius : calc( 10 * var( --remBase ) );
			}
			picture{
				height : calc( 240 * var( --remBase ) );
				border-radius : calc( 10 * var( --remBase ) );
			}
			h3{
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 22 * var( --remBase ) );
				line-height : 1.6;
			}
		}
	}
}
@media ( hover : hover ){
	#slider07 .splide__slide a:hover{
		h3{
			color : var( --orange );
		}
		img{
			scale : 1.05;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#slider07 .splide__slide{
		h3{
			transition : color var( --transitionBase );
		}
		img{
			transition : scale var( --transitionBase );
		}
	}
}

/* --------------------------------------------
CONTACTS02
--------------------------------------------- */
#contacts02{
	header{
		text-align : center;
		p{
			font-size : calc( 18 * var( --remBase ) );
			font-weight : 400;
		}
		h2{
			font-weight : 500;
			color : var( --orange );
		}
	}
	.box{
		overflow : hidden;
		> div{
			background-color : white;
		}
		> div > p{
			font-weight : 400;
			line-height : 1.5;
			color : color-mix( in sRGB , var( --base ) 60% , transparent );
		}
	}
	.contact{
		margin-top : calc( 30 * var( --remBase ) );
	}
	.link-contact01 , .link-line01{
		height : calc( 64 * var( --remBase ) );
		> span{
			> span:nth-of-type( 1 ){
				font-size : calc( 16 * var( --remBase ) );
			}
			&:nth-of-type( 2 ){
				height : calc( 24 * var( --remBase ) );
			}
		}
	}
	picture{
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	@media screen and ( width < 768px ){
		padding-bottom : calc( 140 * var( --remBase ) );
		.box{
			border-radius : calc( 12 * var( --remBase ) );
			> div{
				padding-block : calc( 48 * var( --remBase ) );
				padding-inline : calc( 20 * var( --contentBase ) );
			}
		}
		header{
			p{
				line-height : 1.4;
			}
			h2{
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 28 * var( --remBase ) );
			}
		}
		.box{
			> div > p{
				margin-top : calc( 28 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		picture{
			height : calc( 240 * var( --remBase ) );
		}
		ul{
			margin-top : calc( 32 * var( --remBase ) );
		}
		.links-tel01{
			column-gap : calc( 14 * 100% / 310 );
		}
		.line{
			margin-top : calc( 18 * var( --remBase ) );
		}
		.link-contact01 , .link-line01{
			column-gap : calc( 10 * 100% / 310 );
			> span:nth-of-type( 1 ){
				font-size : calc( 16 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		padding-bottom : calc( 180 * var( --remBase ) );
		.box{
			display : grid;
			grid-template-columns : calc( 540 * var( --contentBase ) ) 1fr;
			height : calc( 680 * var( --remBase ) );
			border-radius : calc( 20 * var( --remBase ) );
			> div{
				padding-top : calc( 80 * var( --remBase ) );
			}
		}
		header{
			p{
				line-height : 1.5;
			}
			h2{
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 44 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		.box{
			> div > p{
				width : calc( 334 * 100% / 540 );
				margin-inline : auto;
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 10 * var( --remBase ) );
			}
		}
		ul{
			width : calc( 304 * 100% / 540 );
			margin-inline : auto;
			margin-top : calc( 40 * var( --remBase ) );
		}
		.links-tel01{
			column-gap : calc( 14 * 100% / 304 );
		}
		.line{
			margin-top : calc( 20 * var( --remBase ) );
		}
		.link-contact01 , .link-line01{
			column-gap : calc( 10 * 100% / 304 );
		}
		picture{
			height : 100%;
		}
	}
}
@media ( hover : hover ){
	#contacts02{
		.links-tel01:has( a:hover ){
			opacity : .75;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#contacts02{
		.links-tel01{
			transform : opacity var( --transitionBase );
		}
	}
}