@charset "UTF-8";

/* --------------------------------------------
DEAL
--------------------------------------------- */
#deal{
	.label{
		position : relative;
		z-index : 1;
		display : flex;
		align-items : baseline;
		justify-content : start;
		background : url( "../images/top/deal/bg_title.svg" ) left top / contain no-repeat;
		> span{
			&:nth-of-type( 1 ){
				font-weight : 700;
				color : #f5f5f5;
			}
			&:nth-of-type( 2 ){
				font-weight : 900;
				color : white;
			}
		}
	}
	.box{
		position : relative;
		width : 100%;
		background-color : white;
		background-repeat : no-repeat;
		outline-style : solid;
		outline-color : black;
		&::before{
			position : absolute;
			display : block;
			width : auto;
			aspect-ratio : 140/141;
			font-size : 0;
			content : "";
			background : url( "../images/top/deal/firework.svg" ) left top / contain no-repeat;
		}
	}
	h2{
		font-weight : 700;
	}
	.text{
		font-size : calc( 36 * var( --rem ) );
		font-weight : 500;
		line-height : calc( 52 / 36 );
		text-align : center;
		em{
			color : var( --red );
		}
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 108 * var( --rem ) );
		padding-bottom : calc( 140 * var( --rem ) );
		.label{
			width : calc( 460 * var( --rem ) );
			height : calc( 135 * var( --rem ) );
			padding-top : calc( 58 * var( --rem ) );
			padding-left : calc( 148 * var( --rem ) );
			margin-left : calc( 86 * var( --rem ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 42 * var( --rem ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 48 * var( --rem ) );
				}
			}
		}
		.box{
			top : calc( -47 * var( --rem ) );
			padding-bottom : calc( 46 * var( --rem ) );
			outline-width : calc( 15 * var( --rem ) );
			outline-offset : calc( -15 * var( --rem ) );
			&::before{
				top : calc( 81 * var( --rem ) );
				left : calc( 36 * var( --rem ) );
				height : calc( 94 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 80 * var( --rem ) );
		padding-bottom : calc( 94 * var( --rem ) );
		.label{
			width : calc( 628 * var( --rem ) );
			height : calc( 180 * var( --rem ) );
			padding-top : calc( 80 * var( --rem ) );
			padding-left : calc( 215 * var( --rem ) );
			margin-left : calc( 119 * var( --rem ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 40 * var( --rem ) );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 60 * var( --rem ) );
				}
			}
		}
		.box{
			top : calc( -60 * var( --rem ) );
			padding-bottom : calc( 54 * var( --rem ) );
			outline-width : calc( 10 * var( --rem ) );
			outline-offset : calc( -10 * var( --rem ) );
			&::before{
				top : calc( 109 * var( --rem ) );
				left : calc( 50 * var( --rem ) );
				height : calc( 141 * var( --rem ) );
			}
		}
	}
}
#deal01{
	h2{
		width : fit-content;
		margin-inline : auto;
		text-align : center;
		> span{
			display : block;
			&:nth-of-type( 1 ){
				display : block;
				font-size : calc( 48 * var( --rem ) );
				line-height : calc( 70 / 48 );
				text-align : center;
			}
			&:nth-of-type( 2 ){
				font-size : calc( 54 * var( --rem ) );
				line-height : calc( 78 / 54 );
				span{
					font-weight : 900;
					color : var( --red );
				}
			}
		}
	}
	@media screen and ( width <= 750px ){
		.box{
			padding-top : calc( 58 * var( --rem ) );
		}
		h2{
			padding-left : calc( 47 * var( --rem ) );
			> span{
				&:nth-of-type( 2 ){
					margin-top : calc( -8 * var( --rem ) );
					span{
						font-size : calc( 70 * var( --rem ) );
						line-height : calc( 101 / 70 );
					}
				}
			}
		}
		.text{
			padding-left : calc( 48 * var( --rem ) );
			margin-top : calc( 12 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		.box{
			padding-top : calc( 78 * var( --rem ) );
		}
		h2{
			padding-left : calc( 5 * var( --rem ) );
			> span{
				&:nth-of-type( 2 ){
					margin-top : calc( -12 * var( --rem ) );
					span{
						font-size : calc( 80 * var( --rem ) );
						line-height : calc( 96 / 80 );
					}
				}
			}
		}
		.text{
			padding-left : calc( 29 * var( --rem ) );
			margin-top : calc( 5 * var( --rem ) );
		}
	}
}
#deal02{
	h2{
		span{
			font-weight : 900;
			color : var( --red );
		}
	}
	@media screen and ( width <= 750px ){
		.box{
			padding-top : calc( 91.7 * var( --rem ) );
		}
		h2{
			padding-left : calc( 132 * var( --rem ) );
			font-size : calc( 48 * var( --rem ) );
			line-height : calc( 70 / 48 );
			> span{
				font-size : calc( 60 * var( --rem ) );
				line-height : calc( 72 / 60 );
				> span{
					font-size : calc( 48 * var( --rem ) );
					line-height : calc( 70 / 48 );
				}
			}
		}
		.text{
			padding-left : calc( 84.4 * var( --rem ) );
			margin-top : calc( 10.02 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		.box{
			padding-top : calc( 112.13 * var( --rem ) );
		}
		h2{
			padding-left : calc( 13 * var( --rem ) );
			font-size : calc( 54 * var( --rem ) );
			line-height : calc( 78 / 54 );
			text-align : center;
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 60 * var( --rem ) );
					line-height : calc( 72 / 60 );
				}
			}
		}
		.text{
			padding-left : calc( 17 * var( --rem ) );
		}
	}
}
#deal03{
	h2{
		span{
			font-weight : 900;
			color : var( --red );
		}
	}
	@media screen and ( width <= 750px ){
		.box{
			padding-top : calc( 100 * var( --rem ) );
		}
		h2{
			padding-left : calc( 125 * var( --rem ) );
			font-size : calc( 48 * var( --rem ) );
			line-height : calc( 70 / 48 );
		}
		.text{
			padding-left : calc( 17 * var( --rem ) );
			margin-top : calc( 21 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		.box{
			padding-top : calc( 90 * var( --rem ) );
		}
		h2{
			padding-left : calc( 25 * var( --rem ) );
			font-size : calc( 54 * var( --rem ) );
			line-height : calc( 78 / 54 );
			text-align : center;
		}
		.text{
			padding-left : calc( 57 * var( --rem ) );
			margin-top : calc( 24 * var( --rem ) );
		}
	}
}

/* --------------------------------------------
PLAN
--------------------------------------------- */
#plan{
	.box{
		background-color : white;
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : cover;
	}
	h3{
		position : relative;
		display : flex;
		align-items : center;
		justify-content : center;
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : cover;
		border-radius : 100vmax;
		box-shadow : 0 calc( 4 * var( --rem ) ) calc( 4 * var( --rem ) ) black;
		img{
			position : absolute;
		}
		> span{
			display : flex;
			align-items : baseline;
			justify-content : center;
			font-weight : 900;
			color : #43134f;
		}
	}
	.price{
		display : flex;
		align-items : baseline;
		justify-content : start;
	}
	.value{
		font-weight : 900;
	}
	.unit{
		font-weight : 700;
	}
	.sub{
		display : flex;
		flex-wrap : wrap;
		align-items : start;
	}
	.free{
		display : flex;
		align-items : baseline;
		justify-content : start;
		font-weight : 700;
		.red{
			display : flex;
			align-items : baseline;
			justify-content : start;
			color : var( --red );
		}
	}
	.note{
		width : 100%;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 128 * var( --rem ) );
		.box{
			padding-top : calc( 90 * var( --rem ) );
			padding-bottom : calc( 188 * var( --rem ) );
			background-image : url( "../images/top/plan/bg_sp.svg" );
		}
		.plans{
			margin-top : calc( 188 * var( --rem ) );
			> li + li{
				margin-top : calc( 112 * var( --rem ) );
			}
			> li:nth-child( 1 ) h3{
				background-image : url( "../images/top/plan/title01_sp.webp" );
			}
			> li:nth-child( 2 ) h3{
				background-image : url( "../images/top/plan/title02_sp.webp" );
			}
		}
		h3{
			width : calc( 655 * var( --rem ) );
			height : calc( 131 * var( --rem ) );
			padding-left : calc( 63 * var( --rem ) );
			margin-inline : auto;
			img{
				top : calc( -102 * var( --rem ) );
				left : calc( 11 * var( --rem ) );
				height : calc( 188 * var( --rem ) );
			}
			> span{
				font-size : calc( 50 * var( --rem ) );
				line-height : calc( 72 / 50 );
				span{
					font-size : calc( 60 * var( --rem ) );
					line-height : calc( 72 / 60 );
				}
			}
		}
		.types{
			margin-top : calc( 86 * var( --rem ) );
			> li{
				+ li{
					margin-top : calc( 110 * var( --rem ) );
				}
			}
		}
		.price{
			justify-content : center;
			.value{
				font-size : calc( 100 * var( --rem ) );
				line-height : calc( 120 / 100 );
			}
			.unit{
				font-size : calc( 32 * var( --rem ) );
				line-height : calc( 46 / 32 );
			}
		}
		.sub{
			column-gap : calc( 47 * var( --rem ) );
			justify-content : center;
			img{
				height : calc( 44.18 * var( --rem ) );
				margin-top : calc( 61.91 * var( --rem ) );
			}
		}
		.free{
			font-size : calc( 32 * var( --rem ) );
			line-height : calc( 46 / 32 );
			.big{
				font-size : calc( 100 * var( --rem ) );
				line-height : calc( 120 / 100 );
			}
			.sp-big{
				font-size : calc( 48 * var( --rem ) );
				line-height : calc( 70 / 48 );
			}
		}
		.note{
			font-size : calc( 24 * var( --rem ) );
			line-height : calc( 35 / 24 );
			text-align : center;
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 83 * var( --rem ) );
		.box{
			width : calc( 1060 * var( --rem ) );
			padding-inline : calc( 50 * var( --rem ) );
			padding-top : calc( 68 * var( --rem ) );
			padding-bottom : calc( 100 * var( --rem ) );
			margin-inline : auto;
			background-image : url( "../images/top/plan/bg_pc.svg" );
		}
		.plans{
			margin-top : calc( 148 * var( --rem ) );
			> li + li{
				margin-top : calc( 80 * var( --rem ) );
			}
			> li:nth-child( 1 ) h3{
				background-image : url( "../images/top/plan/title01_pc.webp" );
			}
			> li:nth-child( 1 ) h4 img{
				height: calc( 128 * var( --rem ) );
			}

			> li:nth-child( 2 ) h3{
				background-image : url( "../images/top/plan/title02_pc.webp" );
			}

		}
		h3{
			height : calc( 110 * var( --rem ) );
			margin-inline : calc( -10 * var( --rem ) );
			img{
				top : calc( -102 * var( --rem ) );
				left : calc( 141 * var( --rem ) );
				height : calc( 188 * var( --rem ) );
			}
			> span{
				font-size : calc( 48 * var( --rem ) );
			}
		}
		.types{
			display : flex;
			align-items : start;
			margin-top : calc( 43 * var( --rem ) );
			> li{
				width : 50%;
			}
		}
		p{
			img{
				height : calc( 44.18 * var( --rem ) );
			}
		}
	}
}
#planType01{
	@media screen and ( width <= 750px ){
		h4{
			margin-top : calc( 88 * var( --rem ) );
			margin-left : calc( 67 * var( --rem ) );
			img{
				height : calc( 217 * var( --rem ) );
			}
		}
		p{
			margin-top : calc( 36 * var( --rem ) );
			.sub{
				margin-top : calc( -1 * var( --rem ) );
			}
			.note{
				margin-top : calc( 31 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h4{
			margin-top : calc( 46 * var( --rem ) );
			margin-left : calc( 113 * var( --rem ) );
		}
		p{
			display : flex;
			column-gap : calc( 16 * var( --rem ) );
			align-items : start;
			justify-content : start;
			margin-top : calc( 7.23 * var( --rem ) );
			margin-left : calc( 147 * var( --rem ) );
		}
		.price{
			flex-shrink : 0;
		}
		.value{
			font-size : calc( 80 * var( --rem ) );
			line-height : calc( 116 / 80 );
		}
		.unit{
			font-size : calc( 24 * var( --rem ) );
			line-height : calc( 35 / 24 );
		}
		.sub{
			column-gap : calc( 17 * var( --rem ) );
			img{
				margin-top : calc( 53.91 * var( --rem ) );
			}
		}
		.free{
			font-size : calc( 36 * var( --rem ) );
			line-height : calc( 52 / 36 );
			.big{
				font-size : calc( 80 * var( --rem ) );
				line-height : calc( 96 / 80 );
			}
		}
		.note{
			margin-top : calc( 20 * var( --rem ) );
			margin-left : calc( 70.91 * var( --rem ) );
			font-size : calc( 14 * var( --rem ) );
			line-height : calc( 20 / 14 );
		}
	}
}
:where( #planType02 , #planType03 ){
	@media print , screen and ( width > 750px ){
		.value{
			font-size : calc( 80 * var( --rem ) );
			line-height : calc( 116 / 80 );
		}
		.unit{
			font-size : calc( 24 * var( --rem ) );
			line-height : calc( 35 / 24 );
		}
		.sub{
			column-gap : calc( 9 * var( --rem ) );
			margin-top : calc( -14 * var( --rem ) );
			img{
				margin-top : calc( 61.91 * var( --rem ) );
			}
		}
		.free{
			font-size : calc( 36 * var( --rem ) );
			line-height : calc( 52 / 36 );
			.big{
				font-size : calc( 80 * var( --rem ) );
				line-height : calc( 116 / 80 );
			}
		}
		.note{
			margin-top : calc( 21 * var( --rem ) );
			font-size : calc( 14 * var( --rem ) );
			line-height : calc( 20 / 14 );
		}
	}
}
#planType02{
	@media screen and ( width <= 750px ){
		h4{
			margin-top : calc( 86 * var( --rem ) );
			margin-left : calc( 70 * var( --rem ) );
			img{
				height : calc( 120 * var( --rem ) );
			}
		}
		p{
			margin-top : calc( 35 * var( --rem ) );
			.sub{
				margin-top : calc( 13 * var( --rem ) );
			}
			.note{
				margin-top : calc( 39 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h4{
			margin-left : calc( 64 * var( --rem ) );
			img{
				height : calc( 153 * var( --rem ) );
			}
		}
		p{
			margin-top : calc( -7 * var( --rem ) );
			margin-left : calc( 64 * var( --rem ) );
		}
	}
}
#planType03{
	@media screen and ( width <= 750px ){
		h4{
			margin-top : calc( 86 * var( --rem ) );
			margin-left : calc( 70 * var( --rem ) );
			img{
				height : calc( 128 * var( --rem ) );
			}
		}
		p{
			margin-top : calc( 36 * var( --rem ) );
			.sub{
				margin-top : calc( -1 * var( --rem ) );
			}
			.note{
				margin-top : calc( 31 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h4{
			margin-left : calc( 56 * var( --rem ) );
			img{
				height : calc( 128 * var( --rem ) );
			}
		}
		p{
			margin-top : calc( 18 * var( --rem ) );
			margin-left : calc( 56 * var( --rem ) );
		}
	}
}

/* --------------------------------------------
SPECIAL
--------------------------------------------- */
#special{
	h3{
		display : flex;
		align-items : center;
		font-weight : 700;
		.label{
			display : flex;
			flex-shrink : 0;
			align-items : center;
			justify-content : center;
			width : auto;
			aspect-ratio : 1;
			font-weight : 900;
			color : var( --red );
			background-color : white;
			border-radius : 50%;
		}
		.title{
			flex-shrink : 0;
			font-weight : 700;
			color : white;
		}
	}
	.shadow{
		position : relative;
		box-shadow : 0 calc( 4 * var( --rem ) ) calc( 4 * var( --rem ) ) black;
		&::before{
			position : absolute;
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : url( "../images/top/special/fan.svg" ) left top / contain no-repeat;
		}
	}
	.box{
		background-color : white;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 185 * var( --rem ) );
		padding-bottom : calc( 168 * var( --rem ) );
		.specials{
			margin-top : calc( 88 * var( --rem ) );
			> li + li{
				margin-top : calc( 60 * var( --rem ) );
			}
		}
		h3{
			.label{
				height : calc( 124 * var( --rem ) );
				padding-bottom : calc( 12 * var( --rem ) );
				margin-left : calc( 15 * var( --rem ) );
				font-size : calc( 48 * var( --rem ) );
			}
		}
		.shadow{
			padding-block : calc( 10 * var( --rem ) );
			padding-inline : calc( 10 * var( --rem ) );
			padding-top : calc( 70 * var( --rem ) );
			margin-top : calc( -55 * var( --rem ) );
			&::before{
				top : calc( -23.17 * var( --rem ) );
				right : calc( -26 * var( --rem ) );
				height : calc( 157.04 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 84 * var( --rem ) );
		padding-bottom : calc( 102 * var( --rem ) );
		.specials{
			margin-top : calc( 24 * var( --rem ) );
			> li + li{
				margin-top : calc( 22 * var( --rem ) );
			}
		}
		h3{
			.label{
				height : calc( 144 * var( --rem ) );
				padding-bottom : calc( 12 * var( --rem ) );
				margin-left : calc( 15 * var( --rem ) );
				font-size : calc( 80 * var( --rem ) );
			}
		}
		.shadow{
			padding-block : calc( 10 * var( --rem ) );
			padding-inline : calc( 10 * var( --rem ) );
			padding-top : calc( 100 * var( --rem ) );
			margin-top : calc( -85 * var( --rem ) );
			&::before{
				top : calc( -28.44 * var( --rem ) );
				right : calc( -43.55 * var( --rem ) );
				height : calc( 226.79 * var( --rem ) );
			}
		}
	}
}
#special0101{
	h3{
		.title{
			display : flex;
			align-items : baseline;
			justify-content : start;
		}
	}
	.box{
		p:nth-of-type( 1 ){
			display : flex;
			align-items : baseline;
			justify-content : center;
			font-weight : 700;
			.value{
				font-size : calc( 80 * var( --rem ) );
				font-weight : 900;
				line-height : calc( 116 / 80 );
				color : var( --red );
			}
		}
		p:nth-of-type( 2 ){
			font-weight : 700;
			text-align : center;
		}
	}
	@media screen and ( width <= 750px ){
		h3{
			.title{
				margin-left : calc( 16 * var( --rem ) );
				span:nth-of-type( 1 ){
					font-size : calc( 48 * var( --rem ) );
				}
				span:nth-of-type( 2 ){
					font-size : calc( 42 * var( --rem ) );
				}
			}
		}
		.box{
			padding-top : calc( 22 * var( --rem ) );
			padding-bottom : calc( 34 * var( --rem ) );
			p:nth-of-type( 1 ){
				.max , .en{
					font-size : calc( 36 * var( --rem ) );
					line-height : calc( 52 / 36 );
				}
				.tax{
					font-size : calc( 28 * var( --rem ) );
					line-height : calc( 28 / 41 );
				}
			}
			p:nth-of-type( 2 ){
				margin-top : calc( 21 * var( --rem ) );
				font-size : calc( 28 * var( --rem ) );
				line-height : calc( 41 / 28 );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h3{
			.title{
				margin-left : calc( 62 * var( --rem ) );
				span:nth-of-type( 1 ){
					font-size : calc( 60 * var( --rem ) );
				}
				span:nth-of-type( 2 ){
					font-size : calc( 48 * var( --rem ) );
				}
			}
		}
		.box{
			padding-top : calc( 26 * var( --rem ) );
			padding-bottom : calc( 50 * var( --rem ) );
			p:nth-of-type( 1 ){
				font-size : calc( 36 * var( --rem ) );
				line-height : calc( 52 / 36 );
			}
			p:nth-of-type( 2 ){
				margin-top : calc( 5 * var( --rem ) );
				font-size : calc( 30 * var( --rem ) );
				line-height : calc( 43 / 30 );
			}
		}
	}
}
#special0102{
	h3{
		.title{
			display : flex;
			align-items : baseline;
			justify-content : start;
		}
	}
	h4{
		font-size : calc( 36 * var( --rem ) );
		font-weight : 700;
		line-height : calc( 52 / 36 );
		text-align : center;
	}
	p{
		display : flex;
		align-items : baseline;
		justify-content : center;
		font-weight : 700;
		.base{
			font-size : calc( 60 * var( --rem ) );
			line-height : calc( 87 / 60 );
		}
		.en{
			font-size : calc( 30 * var( --rem ) );
			line-height : calc( 43 / 30 );
		}
		picture{
			display : contents;
		}
		img{
			height : calc( 45 * var( --rem ) );
		}
		.special{
			font-size : calc( 36 * var( --rem ) );
			line-height : calc( 52 / 36 );
			span{
				font-size : calc( 100 * var( --rem ) );
				font-weight : 900;
				line-height : calc( 145 / 100 );
				color : var( --red );
			}
		}
	}
	@media screen and ( width <= 750px ){
		h3{
			.title{
				margin-left : calc( 112 * var( --rem ) );
				font-size : calc( 48 * var( --rem ) );
			}
		}
		.box{
			padding-top : calc( 32 * var( --rem ) );
			padding-bottom : calc( 32 * var( --rem ) );
			p{
				margin-top : calc( -28 * var( --rem ) );
				.tax{
					font-size : calc( 30 * var( --rem ) );
					line-height : calc( 43 / 30 );
				}
				img{
					margin-right : calc( 30 * var( --rem ) );
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h3{
			.title{
				column-gap : .5em;
				margin-left : calc( 182 * var( --rem ) );
				span:nth-of-type( 1 ){
					font-size : calc( 48 * var( --rem ) );
				}
				span:nth-of-type( 2 ){
					font-size : calc( 60 * var( --rem ) );
				}
			}
		}
		.box{
			padding-top : calc( 43 * var( --rem ) );
			padding-bottom : calc( 35 * var( --rem ) );
			p{
				margin-top : calc( -35 * var( --rem ) );
				.tax{
					font-size : calc( 36 * var( --rem ) );
					line-height : calc( 52 / 36 );
				}
				img{
					margin-right : calc( 30 * var( --rem ) );
				}
			}
		}
	}
}
#special0103{
	h3{
		justify-content : start;
		.title{
			> span{
				display : block;
				text-align : center;
			}
		}
	}
	li{
		display : flex;
		align-items : baseline;
		justify-content : start;
	}
	h4{
		font-size : calc( 36 * var( --rem ) );
		font-weight : 700;
		line-height : calc( 52 / 36 );
	}
	p{
		font-weight : 700;
	}
	.special{
		span{
			font-weight : 900;
			color : var( --red );
		}
	}
	.base{
		display : flex;
		align-items : baseline;
		justify-content : start;
	}
	.value{
		font-size : calc( 60 * var( --rem ) );
		line-height : calc( 87 / 60 );
	}
	.special{
		display : flex;
		align-items : baseline;
		justify-content : start;
		font-size : calc( 36 * var( --rem ) );
		line-height : calc( 52 / 36 );
	}
	@media screen and ( width <= 750px ){
		h3{
			.title{
				margin-left : calc( 12 * var( --rem ) );
				span:nth-of-type( 1 ){
					font-size : calc( 34 * var( --rem ) );
					line-height : calc( 60 / 34 );
				}
				span:nth-of-type( 2 ){
					font-size : calc( 48 * var( --rem ) );
					line-height : calc( 70 / 48 );
				}
			}
		}
		.box{
			padding-top : calc( 20 * var( --rem ) );
			padding-bottom : calc( 12 * var( --rem ) );
		}
		li + li{
			margin-top : calc( 10 * var( --rem ) );
		}
		li{
			margin-left : calc( 13 * var( --rem ) );
		}
		h4{
			width : calc( 200 * var( --rem ) );
		}
		.base{
			width : calc( 280 * var( --rem ) );
			white-space : pre;
		}
		.en , .tax{
			font-size : calc( 30 * var( --rem ) );
			line-height : calc( 43 / 30 );
		}
		li img{
			height : calc( 44 * var( --rem ) );
			margin-right : calc( 12 * var( --rem ) );
		}
		.special{
			span{
				font-size : calc( 70 * var( --rem ) );
				line-height : calc( 101 / 70 );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h3{
			.title{
				margin-left : calc( 43 * var( --rem ) );
				span:nth-of-type( 1 ){
					font-size : calc( 40 * var( --rem ) );
					line-height : calc( 58 / 40 );
				}
				span:nth-of-type( 2 ){
					font-size : calc( 60 * var( --rem ) );
					line-height : calc( 87 / 60 );
				}
			}
		}
		.box{
			padding-bottom : calc( 18 * var( --rem ) );
		}
		ul{
			margin-top : calc( -7 * var( --rem ) );
		}
		li + li{
			margin-top : calc( -25 * var( --rem ) );
		}
		li{
			margin-left : calc( 124 * var( --rem ) );
		}
		h4{
			width : calc( 250 * var( --rem ) );
		}
		.base{
			width : calc( 300 * var( --rem ) );
			.value{
				letter-spacing : -.05em;
			}
		}
		.en , .tax{
			font-size : calc( 36 * var( --rem ) );
			line-height : calc( 52 / 36 );
		}
		li img{
			height : calc( 44 * var( --rem ) );
			margin-left : calc( 20 * var( --rem ) );
			margin-right : calc( 10 * var( --rem ) );
		}
		.special{
			span{
				font-size : calc( 80 * var( --rem ) );
				line-height : calc( 116 / 80 );
			}
		}
	}
}

/* --------------------------------------------
SPECIAL02
--------------------------------------------- */
#special02{
	position : relative;
	overflow : clip;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	&::before{
		position : absolute;
		display : block;
		width : auto;
		aspect-ratio : 307/365;
		font-size : 0;
		content : "";
		background : url( "../images/top/special02/mikosho.svg" ) left top / contain no-repeat;
	}
	p{
		text-shadow : 0 calc( 1 * var( --rem ) ) calc( 2 * var( --rem ) ) rgb( 0 0 0 / .3 ) , 0 calc( 1 * var( --rem ) ) calc( 3 * var( --rem ) ) rgb( 0 0 0 / .15 );
		> span{
			&:nth-of-type( 1 ){
				font-weight : 900;
				-webkit-text-stroke : calc( 10 * var( --rem ) ) white;
				paint-order : stroke;
				> span{
					&:nth-of-type( 1 ){
						color : var( --purple );
					}
					&:nth-of-type( 2 ){
						display : flex;
						align-items : baseline;
						color : var( --red );
						span{
							color : var( --purple );
						}
					}
				}
			}
			&:nth-of-type( 2 ){
				background-repeat : no-repeat;
				background-position : 0 0;
				background-size : contain;
				> span{
					&:nth-of-type( 1 ){
						display : block;
						font-weight : 700;
					}
					&:nth-of-type( 2 ){
						display : flex;
						align-items : baseline;
						justify-content : start;
						margin-top : calc( -4 * var( --rem ) );
						font-weight : 900;
						color : var( --red );
						span{
							font-weight : 700;
							color : var( --purple );
						}
					}
					&:nth-of-type( 3 ){
						display : flex;
						align-items : baseline;
						justify-content : start;
						font-weight : 900;
						color : var( --red );
						span{
							color : black;
						}
					}
				}
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 20 * var( --rem ) );
		padding-bottom : calc( 9.07 * var( --rem ) );
		background-image : url( "../images/top/special02/bg_sp.svg" );
		&::before{
			top : calc( 103 * var( --rem ) );
			left : calc( 27 * var( --viewport ) );
			height : calc( 245.85 * var( --rem ) );
		}
		p{
			> span{
				&:nth-of-type( 1 ){
					> span{
						&:nth-of-type( 1 ){
							display : block;
							margin-left : calc( 213 * var( --viewport ) );
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
						}
						&:nth-of-type( 2 ){
							justify-content : start;
							margin-top : calc( 30 * var( --rem ) );
							margin-left : calc( 242 * var( --viewport ) );
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
						}
					}
				}
				&:nth-of-type( 2 ){
					display : block;
					width : calc( 736.96 * var( --viewport ) );
					height : calc( 554.08 * var( --rem ) );
					padding-top : calc( 130.15 * var( --rem ) );
					margin-top : calc( 54.85 * var( --rem ) );
					margin-left : calc( 7.38 * var( --viewport ) );
					background-image : url( "../images/top/special02/bg_text_sp.svg" );
					> span{
						&:nth-of-type( 1 ){
							margin-left : calc( 248.29 * 100% / 736.96 );
							font-size : calc( 60 * var( --rem ) );
							line-height : calc( 72 / 60 );
						}
						&:nth-of-type( 2 ){
							margin-top : calc( -3 * var( --rem ) );
							margin-left : calc( 156.62 * 100% / 736.96 );
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
							span{
								font-size : calc( 48 * var( --rem ) );
								line-height : calc( 58 / 48 );
							}
						}
						&:nth-of-type( 3 ){
							margin-top : calc( -3 * var( --rem ) );
							margin-left : calc( 210.62 * 100% / 736.96 );
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
							span{
								font-size : calc( 70 * var( --rem ) );
								line-height : calc( 84 / 70 );
							}
						}
					}
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-inline : calc( ( 100% - 1440px ) / 2 );
		padding-top : calc( 35 * var( --rem ) );
		padding-bottom : calc( 452.38 * var( --rem ) );
		background-image : url( "../images/top/special02/bg_pc.svg" );
		&::before{
			bottom : calc( 36 * var( --rem ) );
			left : calc( 50% - min( 488.95px , 488.95 * var( --viewport ) ) );
			height : calc( 364.68 * var( --rem ) );
		}
		p{
			> span{
				&:nth-of-type( 1 ){
					display : block;
					width : fit-content;
					margin-left : calc( 116 * var( --viewport ) );
					> span{
						&:nth-of-type( 1 ){
							display : block;
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
							text-align : center;
						}
						&:nth-of-type( 2 ){
							justify-content : center;
							margin-top : calc( 21 * var( --rem ) );
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
							span{
								font-size : calc( 70 * var( --rem ) );
								line-height : calc( 84 / 70 );
							}
						}
					}
				}
				&:nth-of-type( 2 ){
					position : absolute;
					top : calc( 41.33 * var( --rem ) );
					left : calc( 50% - min( 213.44px , 213.44 * var( --viewport ) ) );
					width : min( calc( 828.85 * 100% / 1440 ) , 828.85px );
					height : calc( 591.32 * var( --rem ) );
					padding-top : calc( 142.67 * var( --rem ) );
					background-image : url( "../images/top/special02/bg_text_pc.svg" );
					> span{
						&:nth-of-type( 1 ){
							margin-left : calc( 315.44 * 100% / 828.85 );
							font-size : calc( 48 * var( --rem ) );
							line-height : calc( 58 / 48 );
						}
						&:nth-of-type( 2 ){
							margin-top : calc( * var( --rem ) );
							margin-left : calc( 190.44 * 100% / 828.85 );
							font-size : calc( 90 * var( --rem ) );
							line-height : calc( 108 / 90 );
							span{
								font-size : calc( 48 * var( --rem ) );
								line-height : calc( 58 / 48 );
							}
						}
						&:nth-of-type( 3 ){
							margin-top : calc( * var( --rem ) );
							margin-left : calc( 284.44 * 100% / 828.85 );
							font-size : calc( 80 * var( --rem ) );
							line-height : calc( 96 / 80 );
						}
					}
				}
			}
		}
	}
}

/* --------------------------------------------
ENTRY
--------------------------------------------- */
#entry{
	@media screen and ( width <= 750px ){
		padding-block : calc( 80 * var( --rem ) );
	}
	@media print , screen and ( width > 750px ){
		position : relative;
		padding-top : calc( 102 * var( --rem ) );
		padding-bottom : calc( 74 * var( --rem ) );
		&::before{
			position : absolute;
			top : 0;
			left : 50%;
			display : block;
			height : calc( 78 * var( --rem ) );
			aspect-ratio : 623/78;
			font-size : 0;
			content : "";
			background : url( "../images/top/entry/bg02_pc.svg" ) left top / contain no-repeat;
			translate : -50% 0;
		}
	}
}

/* --------------------------------------------
MORE
--------------------------------------------- */
#more{
	h3{
		font-weight : 700;
		text-align : center;
	}
	p{
		font-weight : 700;
		text-align : center;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 106 * var( --rem ) );
		padding-bottom : calc( 162 * var( --rem ) );
		h3{
			font-size : calc( 40 * var( --rem ) );
			line-height : calc( 58 / 40 );
		}
		.buttons{
			margin-top : calc( 92 * var( --rem ) );
		}
		p{
			font-size : calc( 30 * var( --rem ) );
			line-height : calc( 43 / 30 );
		}
		.btn02{
			margin-top : calc( 26 * var( --rem ) );
		}
		a + p{
			margin-top : calc( 108 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 106 * var( --rem ) );
		padding-bottom : calc( 126 * var( --rem ) );
		h3{
			font-size : calc( 48 * var( --rem ) );
			line-height : calc( 70 / 48 );
		}
		.buttons{
			margin-top : calc( 54 * var( --rem ) );
		}
		p{
			font-size : calc( 24 * var( --rem ) );
			line-height : calc( 35 / 24 );
		}
		.btn02{
			margin-top : calc( 18 * var( --rem ) );
		}
		a + p{
			margin-top : calc( 98 * var( --rem ) );
		}
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq{
	background-color : #fdc1c1;
	.box{
		background-color : white;
	}
	details{
		overflow : hidden;
	}
	summary{
		display : flex;
		align-items : start;
		&::before , &::after{
			display : block;
			flex-shrink : 0;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
		}
		&::before{
			background : url( "../images/ui/icon/q.svg" ) left top / contain no-repeat;
		}
		span{
			flex-grow : 1;
			border-bottom : solid 1px currentColor;
		}
	}
	details:not( [open] ) summary{
		&::after{
			background : url( "../images/ui/icon/plus.svg" ) left top / contain no-repeat;
		}
	}
	details[open] summary{
		&::after{
			background : url( "../images/ui/icon/minus.svg" ) left top / contain no-repeat;
		}
	}
	.details-content{
		font-weight : 500;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 98 * var( --rem ) );
		padding-bottom : calc( 160 * var( --rem ) );
		.box{
			padding-inline : calc( 36 * var( --rem ) );
			padding-top : calc( 102 * var( --rem ) );
			padding-bottom : calc( 114 * var( --rem ) );
			margin-top : calc( 84 * var( --rem ) );
		}
		details + details{
			margin-top : calc( 60 * var( --rem ) );
		}
		summary{
			&::before , &::after{
				height : calc( 38 * var( --rem ) );
				margin-top : calc( 6 * var( --rem ) );
			}
			&::before{
				margin-right : calc( 29 * var( --rem ) );
			}
			span{
				padding-bottom : calc( 16 * var( --rem ) );
				font-size : calc( 30 * var( --rem ) );
				line-height : calc( 40 / 30 );
			}
		}
		.details-content{
			padding-top : calc( 38 * var( --rem ) );
			padding-left : calc( 67 * var( --rem ) );
			padding-right : calc( 38 * var( --rem ) );
			font-size : calc( 30 * var( --rem ) );
			line-height : calc( 48 / 30 );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 63 * var( --rem ) );
		padding-bottom : calc( 98 * var( --rem ) );
		.box{
			padding-inline : calc( 172 * var( --rem ) );
			padding-top : calc( 60 * var( --rem ) );
			padding-bottom : calc( 66 * var( --rem ) );
			margin-top : calc( 40 * var( --rem ) );
		}
		details + details{
			margin-top : calc( 57 * var( --rem ) );
		}
		summary{
			&::before , &::after{
				height : calc( 38 * var( --rem ) );
			}
			&::before{
				margin-right : calc( 22 * var( --rem ) );
			}
			span{
				padding-top : calc( 5 * var( --rem ) );
				padding-bottom : calc( 8 * var( --rem ) );
				font-size : calc( 16 * var( --rem ) );
				line-height : calc( 23 / 16 );
			}
			&::after{
				margin-left : calc( 7 * var( --rem ) );
			}
		}
		.details-content{
			padding-top : calc( 11 * var( --rem ) );
			padding-left : calc( 60 * var( --rem ) );
			padding-right : calc( 45 * var( --rem ) );
			font-size : calc( 16 * var( --rem ) );
			line-height : calc( 30 / 16 );
		}
	}
}

/*---MV↓のお知らせゾーン---------------------*/

#topics {
			font-weight: 500;
	p {
			font-weight: 500;
	}
	
	@media screen and ( width <= 750px ){
		padding-top: calc( 40 * var( --rem ) );
		padding-bottom: calc( 40 * var( --rem ) );
		font-size: calc( 36 * var( --rem ) );
		line-height: 1.5;
	}
	@media print , screen and ( width > 750px ){
		padding-top: calc( 40 * var( --rem ) );
		padding-bottom: calc( 40 * var( --rem ) );	
		font-size: calc( 36 * var( --rem ) );
		line-height: 1.5;
	}
	a {
		text-decoration: underline;
	}
	a:hover {
		text-decoration: none;
	}

}