@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title01{
	display : block;
	align-content : center;
	font-weight : 700;
	text-align : center;
	background : url( "../images/ui/bg/title.webp" ) center top / cover no-repeat;
	@media screen and ( width <= 768px ){
		height : calc( 198 * var( --remBase ) );
		margin-inline : calc( 12 * var( --viewportBase ) );
		margin-top : calc( 18 * var( --remBase ) );
		font-size : calc( 28 * var( --remBase ) );
		line-height : calc( 44 / 28 );
		border-radius : calc( 24 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		height : calc( 224 * var( --remBase ) );
		margin-inline : calc( 40 * var( --viewportBase ) );
		margin-top : calc( 16 * var( --remBase ) );
		font-size : calc( 40 * var( --remBase ) );
		line-height : calc( 60 / 40 );
		border-radius : calc( 24 * var( --remBase ) );
	}
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
#breadcrumbs{
	margin-inline : auto;
	ol{
		display : flex;
		flex-wrap : wrap;
		justify-content : end;
	}
	li{
		font-weight : 500;
		&:not( :last-child ){
			display : grid;
			grid-auto-flow : column;
			align-items : start;
			justify-content : start;
			&::after{
				white-space : pre;
				content : " > ";
			}
		}
	}
	a{
		text-decoration : underline;
		text-decoration-color : transparent;
		text-underline-offset : calc( ( 1lh - 1em ) / 2 );
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 10 * var( --remBase ) );
		padding-bottom : calc( 32 * var( --remBase ) );
		li{
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
	}
	@media print , screen and ( width > 768px ){
		width : calc( 1100 * var( --viewportBase ) );
		padding-top : calc( 10 * var( --remBase ) );
		padding-bottom : calc( 28 * var( --remBase ) );
		li{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 21 / 14 );
		}
	}
}
@media ( hover : hover ){
	#breadcrumbs a:hover{
		text-decoration-color : currentColor;
		opacity : .8;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#breadcrumbs a{
		transition : text-decoration .3s linear , opacity .3s linear;
	}
}

/* --------------------------------------------
AREA
--------------------------------------------- */
#areaContent{
	padding-bottom : calc( 80 * var( --remBase ) );
	> p{
		font-weight : 500;
	}
	.sub{
		margin-top : calc( 42 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		line-height : calc( 27 / 18 );
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 60 * var( --remBase ) );
		.lede{
			margin-top : calc( 28 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 34 / 24 );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 72 * var( --remBase ) );
		> p{
			text-align : center;
		}
		.lede{
			margin-top : calc( 32 * var( --remBase ) );
			font-size : calc( 26 * var( --remBase ) );
			line-height : calc( 39 / 26 );
		}
	}
}

/* --------------------------------------------
PRICE
--------------------------------------------- */
#pricesTitle{
	p{
		display : grid;
		grid-auto-flow : column;
		justify-content : center;
		> span{
			&:nth-of-type( 1 ){
				display : block;
				align-content : center;
				aspect-ratio : 1;
				font-weight : 700;
				color : white;
				text-align : center;
				background-color : var( --blue03 );
				border-radius : 50%;
			}
			&:nth-of-type( 2 ){
				font-weight : 700;
				text-decoration : underline;
				text-decoration-color : #f7ff20 ;
				text-decoration-skip-ink : none;
				span{
					color : #e52f2f;
				}
			}
		}
	}
	h2 , h3{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : center;
		font-weight : 700;
		color : var( --green );
		&::before , &::after{
			font-weight : 100;
			line-height : 1;
		}
		&::before{
			content : "\\";
		}
		&::after{
			content : "/";
		}
	}
	@media screen and ( width <= 768px ){
		p{
			column-gap : calc( 18 * 100% / 432 );
			align-items : start;
			> span{
				&:nth-of-type( 1 ){
					height : calc( 82 * var( --remBase ) );
					margin-top : calc( 32 * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					display : grid;
					grid-auto-flow : column;
					align-items : baseline;
					font-size : calc( 45 * var( --remBase ) );
					text-decoration-thickness : calc( 12 * var( --remBase ) );
					text-underline-offset : calc( -4 * var( --remBase ) );
					span{
						font-size : calc( 90 * var( --remBase ) );
					}
				}
			}
		}
		h2 , h3{
			column-gap : calc( 24 * 100% / 432 );
			font-size : calc( 36 * var( --remBase ) );
			line-height : calc( 54 / 36 );
			text-align : center;
			&::before , &::after{
				align-self : center;
				font-size : calc( 50 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		p{
			column-gap : calc( 16 * 100% / 1008 );
			align-items : end;
			> span{
				&:nth-of-type( 1 ){
					height : calc( 96 * var( --remBase ) );
					font-size : calc( 17 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 64 * var( --remBase ) );
					text-decoration-thickness : calc( 12 * var( --remBase ) );
					text-underline-offset : calc( -4 * var( --remBase ) );
					span{
						font-size : calc( 128 * var( --remBase ) );
					}
				}
			}
		}
		h2 , h3{
			column-gap : calc( 24 * 100% / 1008 );
			margin-top : calc( 28 * var( --remBase ) );
			font-size : calc( 48 * var( --remBase ) );
			&::before , &::after{
				font-size : calc( 72 * var( --remBase ) );
			}
		}
	}
}
#pricesList01{
	background-color : var( --green );
	> li{
		display : block;
		align-content : center;
		font-weight : 700;
		color : var( --green );
		text-align : center;
		background-color : white;
		span{
			display : block;
			font-weight : 500;
			text-align : center;
		}
	}
	@media screen and ( width <= 768px ){
		display : grid;
		grid-template-columns : 1fr;
		grid-auto-rows : 1fr;
		row-gap : calc( 16 * var( --remBase ) );
		justify-content : space-between;
		padding-block : calc( 28 * var( --remBase ) );
		padding-inline : calc( 28 * 100% / 432 );
		margin-inline : auto;
		margin-top : calc( 24 * var( --remBase ) );
		border-radius : calc( 24 * var( --remBase ) );
		>li{
			padding-block : calc( 15 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 40 / 27 );
			border-radius : calc( 12 * var( --remBase ) );
			span{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 26 / 18 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : repeat( 2 , calc( 372 * 100% / 762 ) );
		grid-auto-rows : 1fr;
		row-gap : calc( 16 * var( --remBase ) );
		justify-content : space-between;
		width : calc( 838 * 100% / 1008 );
		padding-block : calc( 30 * var( --remBase ) );
		padding-inline : calc( 38 * 100% / 1008 );
		margin-inline : auto;
		margin-top : calc( 24 * var( --remBase ) );
		border-radius : calc( 20 * var( --remBase ) );
		>li{
			padding-block : calc( 12 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 36 / 24 );
			border-radius : calc( 10 * var( --remBase ) );
			span{
				font-size : calc( 15 * var( --remBase ) );
				line-height : calc( 22.5 / 15 );
			}
		}
	}
}
#pricesList02{
	position : relative;
	outline-style : solid;
	outline-color : var( --green );
	&::before{
		position : absolute;
		left : 50%;
		display : block;
		width : auto;
		aspect-ratio : 1;
		content : "";
		background : url( "../images/ui/parts/char01.svg" ) center / contain no-repeat;
		translate : -50% 0;
	}
	h3{
		overflow : hidden;
		font-weight : 700;
		color : white;
		background-color : var( --green );
	}
	li{
		display : grid;
		grid-template-columns : auto 1fr;
		&::before{
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : url( "../images/ui/icon/check01.svg" ) left top / contain no-repeat;
		}
		span{
			font-weight : 500;
		}
		em{
			font-weight : 700;
			color : var( --blue );
		}
	}
	@media screen and ( width <= 768px ){
		border-radius : calc( 12 * var( --remBase ) );
		outline-width : calc( 3 * var( --remBase ) );
		outline-offset : calc( -3 * var( --remBase ) );
		h3{
			padding-block : calc( 18 * var( --remBase ) );
			padding-inline : calc( 24 * 100% / 432 );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 38 / 24 );
			border-radius : calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) ) 0 0;
		}
		ul{
			padding-block : calc( 38 * var( --remBase ) );
			padding-inline : calc( 24 * 100% / 432 );
		}
		li{
			column-gap : calc( 20 * 100% / 384 );
			align-items : center;
			&::before{
				height : calc( 40 * var( --remBase ) );
			}
			span{
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 32 / 22 );
			}
			+ li{
				margin-top : calc( 24 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		border-radius : calc( 10 * var( --remBase ) );
		outline-width : calc( 3 * var( --remBase ) );
		outline-offset : calc( -3 * var( --remBase ) );
		h3{
			padding-block : calc( 16 * var( --remBase ) );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 33 / 22 );
			border-radius : calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) 0 0;
		}
		ul{
			padding-block : calc( 34 * var( --remBase ) );
		}
		li{
			&::before{
				height : calc( 36 * var( --remBase ) );
			}
			span{
				padding-block : calc( 3.75 * var( --remBase ) );
				font-size : calc( 19 * var( --remBase ) );
				line-height : calc( 28.5 / 19 );
			}
			+ li{
				margin-top : calc( 24 * var( --remBase ) );
			}
		}
	}
}
#price01 , #installmentpayment01{
	.frame{
		background-color : white;
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 32 * var( --remBase ) );
		.frame{
			padding-block : calc( 44 * var( --remBase ) );
			padding-inline : calc( 12 * var( --contentBase ) );
			border-radius : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 60 * var( --remBase ) );
		.frame{
			padding-block : calc( 60 * var( --remBase ) );
			padding-inline : calc( 38 * 100% / 1080 );
			border-radius : calc( 16 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
PRICE
--------------------------------------------- */
#price01{
	@media screen and ( width <= 768px ){
		.link01{
			margin-top : calc( 64 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		.link01{
			margin-top : calc( 92 * var( --remBase ) );
		}
	}
}
#price0102{
	> p{
		position : relative;
		font-weight : 500;
		color : white;
		text-align : center;
		background-color : #6dbfe3;
		&::before{
			position : absolute;
			top : 50%;
			left : calc( 100% - 1px );
			display : block;
			width : auto;
			aspect-ratio : 1/2;
			clip-path : polygon( 0 0 , 100% 50% , 0 100% );
			font-size : 0;
			content : "";
			background-color : #6dbfe3;
			translate : 0 -50%;
		}
		&::after{
			position : absolute;
			top : 50%;
			display : block;
			width : auto;
			aspect-ratio : 560/599.422;
			font-size : 0;
			content : "";
			background : url( "../images/ui/parts/char01.svg" ) left top / contain no-repeat;
			translate : 0 -50%;
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 36 * var( --remBase ) );
		> p{
			width : calc( 220 * 100% / 432 );
			padding-block : calc( 16 * var( --remBase ) );
			padding-inline : calc( 8 * 100% / 432 );
			margin-top : calc( 72 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
			border-radius : calc( 12 * var( --remBase ) );
			&::before{
				height : calc( 22 * var( --remBase ) );
			}
			&::after{
				left : calc( 100% + 16 * 100% / 220 );
				height : calc( 202 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : calc( 554 * 100% / 1004 ) calc( 234 * 100% / 1004 );
		column-gap : calc( 32 * 100% / 1004 );
		align-items : center;
		justify-content : start;
		margin-top : calc( 32 * var( --remBase ) );
		#pricesList02{
			h3{
				padding-inline : calc( 24 * 100% / 554 );
			}
			ul{
				padding-inline : calc( 24 * 100% / 554 );
			}
			li{
				column-gap : calc( 6 * 100% / 506 );
			}
		}
		> p{
			padding-block : calc( 16 * var( --remBase ) );
			padding-inline : calc( 8 * 100% / 234 );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 30 / 20 );
			border-radius : calc( 12 * var( --remBase ) );
			&::before{
				height : calc( 24 * var( --remBase ) );
			}
			&::after{
				left : calc( 100% + 20 * 100% / 234 );
				height : calc( 172 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
INSTALLMENTPAYMENT
--------------------------------------------- */
#installmentpayment01{
	h2{
		display : grid;
		grid-auto-flow : column;
		justify-content : center;
		font-weight : 700;
		color : var( --green );
		&::before , &::after{
			font-weight : 100;
			line-height : 1;
		}
		&::before{
			content : "\\";
		}
		&::after{
			content : "/";
		}
		img{
			position : relative;
			filter : invert( 44% ) sepia( 49% ) saturate( 2616% ) hue-rotate( 169deg ) brightness( 94% ) contrast( 98% );
		}
	}
	@media screen and ( width <= 768px ){
		h2{
			grid-template-rows : auto 1fr auto;
			grid-template-rows : auto auto;
			row-gap : calc( 4 * var( --remBase ) );
			align-items : start;
			justify-content : space-between;
			&::before , &::after{
				grid-row : 1;
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 44 * var( --remBase ) );
			}
			&::before{
				grid-row : 1/-1;
				grid-column : 1;
			}
			&::after{
				grid-row : 1/-1;
				grid-column : 3;
			}
			img{
				grid-row : 1;
				grid-column : 2;
				height : calc( 42 * var( --remBase ) );
				margin-inline : auto;
			}
			span{
				grid-row : 2;
				grid-column : 2;
				font-size : calc( 32 * var( --remBase ) );
				line-height : calc( 48 / 32 );
				text-align : center;
			}
		}
		.box{
			margin-top : calc( 354 * var( --remBase ) );
			&::before{
				top : calc( -282 * var( --remBase ) );
				height : calc( 250 * var( --remBase ) );
			}
		}
		hgroup{
			margin-top : calc( 24 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		h2{
			align-items : baseline;
			font-size : calc( 48 * var( --remBase ) );
			line-height : 1;
			&::before , &::after{
				font-size : calc( 64 * var( --remBase ) );
			}
			&::before{
				margin-right : calc( 24 * var( --remBase ) );
			}
			&::after{
				margin-left : calc( 24 * var( --remBase ) );
			}
			img{
				top : calc( 4 * var( --remBase ) );
				height : calc( 48 * var( --remBase ) );
				margin-right : calc( 8 * var( --remBase ) );
			}
		}
		.box{
			width : calc( 800 * 100% / 1008 );
			margin-inline : auto;
			margin-top : calc( ( 60 + 250 ) * var( --remBase ) );
			&::before{
				top : calc( -282 * var( --remBase ) );
				height : calc( 250 * var( --remBase ) );
			}
			h3{
				padding-inline : calc( 24 * 100% / 800 );
			}
			ul{
				padding-inline : calc( 24 * 100% / 800 );
			}
			li{
				column-gap : calc( 6 * 100% / 752 );
			}
		}
		hgroup{
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
}