@charset "UTF-8";

/* --------------------------------------------
PRICES
--------------------------------------------- */
#prices{
	@media print , screen and ( width > 750px ){
		.box-pc{
			width : calc( 1100 * var( --rem ) );
			padding-top : calc( 62 * var( --rem ) );
			padding-bottom : calc( 95 * var( --rem ) );
			margin-inline : auto;
			background : url( "../images/price/price/bg_pc.svg" ) center / cover no-repeat;
			background-color : white;
			border-radius : calc( 20 * var( --rem ) );
		}
	}
}
#price{
	h3{
		display : flex;
		align-items : center;
		justify-content : center;
		margin-inline : auto;
		font-weight : 700;
		color : white;
		background-color : rgb( 0 0 0 / .6 );
	}
	@media screen and ( width <= 750px ){
		width : calc( 690 * var( --rem ) );
		padding-top : calc( 142 * var( --rem ) );
		padding-bottom : calc( 208 * var( --rem ) );
		margin-inline : auto;
		background : url( "../images/price/price/bg_sp.svg" ) center / cover no-repeat white;
		h3{
			width : calc( 454 * var( --rem ) );
			height : calc( 90 * var( --rem ) );
			margin-top : calc( 120 * var( --rem ) );
			font-size : calc( 36 * var( --rem ) );
			border-radius : calc( 10 * var( --rem ) );
		}
		.types{
			margin-top : calc( 124 * var( --rem ) );
			> li + li{
				margin-top : calc( 129 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h3{
			width : calc( 252 * var( --rem ) );
			height : calc( 60 * var( --rem ) );
			margin-top : calc( 50 * var( --rem ) );
			font-size : calc( 24 * var( --rem ) );
			border-radius : calc( 10 * var( --rem ) );
		}
		.types{
			display : flex;
			column-gap : calc( 131 * var( --rem ) );
			margin-top : calc( 42 * var( --rem ) );
			margin-left : calc( 135 * var( --rem ) );
		}
	}
}
#plans{
	h4{
		position : relative;
		display : flex;
		align-items : center;
		justify-content : center;
		margin-inline : auto;
		font-weight : 900;
		color : #43134f;
		background-repeat : no-repeat;
		background-position : center;
		background-size : cover;
		box-shadow : 0 calc( 4 * var( --rem ) ) calc( 4 * var( --rem ) ) black;
		img{
			position : absolute;
			font-size : 0;
		}
		> span{
			display : flex;
			align-items : baseline;
			justify-content : center;
		}
		.noto{
			font-weight : 900;
		}
	}
	.price{
		display : flex;
		align-items : baseline;
		justify-content : start;
		font-weight : 700;
		.value{
			font-weight : 900;
		}
	}
	a{
		display : flex;
		align-items : center;
		justify-content : center;
		font-weight : 700;
		color : white;
		background-color : var( --red );
		border-radius : 100vmax;
		box-shadow : 0 calc( 4 * var( --rem ) ) calc( 4 * var( --rem ) ) rgb( 0 0 0 / .75 );
	}
	@media screen and ( width <= 750px ){
		margin-top : calc( 212 * var( --rem ) );
		> li + li{
			margin-top : calc( 160 * var( --rem ) );
		}
		h4{
			width : calc( 634 * var( --rem ) );
			height : calc( 110 * var( --rem ) );
			font-size : calc( 48 * var( --rem ) );
			font-size : calc( 50 * var( --rem ) );
			border-radius : calc( 50 * var( --rem ) );
			img{
				top : calc( -107 * var( --rem ) );
				left : calc( -24 * var( --rem ) );
				height : calc( 183 * var( --rem ) );
			}
			.sp , .noto{
				font-size : calc( 60 * var( --rem ) );
			}
			.sp{
				font-family : "Noto Sans JP" , sans-serif;
			}
		}
		> li:nth-child( 1 ) h4{
			background-image : url( "../images/price/price/bg_title01_sp.webp" );
		}
		> li:nth-child( 2 ) h4{
			background-image : url( "../images/price/price/bg_title02_sp.webp" );
		}
		.price{
			margin-top : calc( 25 * var( --rem ) );
			margin-left : calc( 121 * var( --rem ) );
			.value{
				font-family : "Noto Sans JP" , sans-serif;
				font-size : calc( 100 * var( --rem ) );
				font-weight : 900;
				line-height : calc( 145 / 100 );
			}
			.unit{
				font-size : calc( 32 * var( --rem ) );
				line-height : calc( 46 / 32 );
			}
		}
		a{
			width : calc( 550 * var( --rem ) );
			height : calc( 110 * var( --rem ) );
			margin-top : calc( 48 * var( --rem ) );
			margin-left : calc( 61 * var( --rem ) );
			font-size : calc( 40 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		margin-top : calc( 74 * var( --rem ) );
		> li + li{
			margin-top : calc( 82 * var( --rem ) );
		}
		h4{
			width : calc( 960 * var( --rem ) );
			height : calc( 90 * var( --rem ) );
			font-size : calc( 48 * var( --rem ) );
			border-radius : calc( 30 * var( --rem ) );
			img{
				top : calc( -111 * var( --rem ) );
				left : calc( -22 * var( --rem ) );
				height : calc( 193 * var( --rem ) );
			}
		}
		> li:nth-child( 1 ) h4{
			background-image : url( "../images/price/price/bg_title01_pc.webp" );
		}
		> li:nth-child( 2 ) h4{
			background-image : url( "../images/price/price/bg_title02_pc.webp" );
		}
		.price{
			.value{
				font-size : calc( 80 * var( --rem ) );
				line-height : calc( 116 / 80 );
			}
			.unit{
				font-size : calc( 24 * var( --rem ) );
				line-height : calc( 35 / 24 );
			}
		}
		a{
			font-size : calc( 24 * var( --rem ) );
		}
	}
}
#price01{
	@media screen and ( width <= 750px ){
		h5{
			margin-top : calc( 126 * var( --rem ) );
			margin-left : calc( 56 * var( --rem ) );
			img{
				height : calc( 236 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h5{
			margin-top : calc( 68 * var( --rem ) );
			margin-left : calc( 184 * var( --rem ) );
			img{
				height : calc( 128 * var( --rem ) );
			}
		}
		div{
			display : flex;
			align-items : start;
			margin-top : calc( 19 * var( --rem ) );
			margin-left : calc( 246 * var( --rem ) );
		}
		a{
			width : calc( 254 * var( --rem ) );
			height : calc( 60 * var( --rem ) );
			margin-top : calc( 51 * var( --rem ) );
			margin-left : calc( 48 * var( --rem ) );
		}
	}
}
#price02{
	@media screen and ( width <= 750px ){
		h5{
			margin-top : calc( 124 * var( --rem ) );
			margin-left : calc( 65 * var( --rem ) );
			img{
				height : calc( 120 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h5{
			img{
				height : calc( 120 * var( --rem ) );
			}
		}
		.price{
			margin-top : calc( 26 * var( --rem ) );
		}
		a{
			width : calc( 282 * var( --rem ) );
			height : calc( 60 * var( --rem ) );
			margin-top : calc( 26 * var( --rem ) );
			margin-left : calc( 42 * var( --rem ) );
		}
	}
}
#price03{
	@media screen and ( width <= 750px ){
		h5{
			margin-left : calc( 65 * var( --rem ) );
			img{
				height : calc( 128 * var( --rem ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		h5{
			img{
				height : calc( 128 * var( --rem ) );
			}
		}
		.price{
			margin-top : calc( 18 * var( --rem ) );
		}
		a{
			width : calc( 282 * var( --rem ) );
			height : calc( 60 * var( --rem ) );
			margin-top : calc( 26 * var( --rem ) );
			margin-left : calc( 47 * var( --rem ) );
		}
	}
}
#costs{
	h3{
		display : flex;
		align-items : center;
		justify-content : center;
		margin-inline : auto;
		font-weight : 700;
		color : white;
		text-align : center;
		background-color : rgb( 0 0 0 / .6 );
		border-radius : calc( 10 * var( --rem ) );
	}
	dl{
		>div{
			outline : solid calc( 2 * var( --rem ) ) #ff6478;
			outline-offset : calc( -2 * var( --rem ) );
		}
	}
	dt{
		display : flex;
		align-items : center;
		justify-content : center;
		font-weight : 700;
		color : white;
		background-color : var( --red );
	}
	dd{
		display : flex;
		align-content : center;
		align-items : center;
		justify-content : center;
		font-weight : 700;
		background-color : white;
		> span{
			display : flex;
			align-items : baseline;
			justify-content : center;
		}
	}
	@media screen and ( width <= 750px ){
		width : calc( 690 * var( --rem ) );
		padding-top : calc( 120 * var( --rem ) );
		padding-bottom : calc( 110 * var( --rem ) );
		margin-inline : auto;
		margin-top : calc( 120 * var( --rem ) );
		background-color : white;
		h3{
			width : calc( 608 * var( --rem ) );
			height : calc( 143 * var( --rem ) );
			font-size : calc( 36 * var( --rem ) );
			line-height : calc( 52 / 36 );
		}
		dl{
			width : calc( 606 * var( --percent ) );
			margin-inline : auto;
			margin-top : calc( 120 * var( --rem ) );
			> div + div{
				margin-top : calc( 58 * var( --rem ) );
			}
		}
		dt{
			height : calc( 121 * var( --rem ) );
			font-size : calc( 32 * var( --rem ) );
		}
		dd{
			height : calc( 150 * var( --rem ) );
		}
		.value{
			font-size : calc( 48 * var( --rem ) );
			line-height : calc( 70 / 48 );
		}
		.unit{
			font-size : calc( 30 * var( --rem ) );
			line-height : calc( 43 / 30 );
		}
	}
	@media print , screen and ( width > 750px ){
		margin-top : calc( 104 * var( --rem ) );
		h3{
			width : calc( 650 * var( --rem ) );
			height : calc( 70 * var( --rem ) );
			font-size : calc( 24 * var( --rem ) );
		}
		dl{
			display : flex;
			column-gap : calc( 12 * var( --rem ) );
			justify-content : center;
			margin-top : calc( 60 * var( --rem ) );
			> div{
				width : calc( 230 * var( --rem ) );
			}
		}
		dt{
			height : calc( 46 * var( --rem ) );
			font-size : calc( 24 * var( --rem ) );
		}
		dd{
			height : calc( 112 * var( --rem ) );
		}
		.value{
			font-size : calc( 36 * var( --rem ) );
			line-height : calc( 52 / 36 );
		}
		.unit{
			font-size : calc( 18 * var( --rem ) );
			line-height : calc( 26 / 18 );
		}
	}
}

/* --------------------------------------------
NOTE
--------------------------------------------- */
#note{
	.box{
		background-color : white;
	}
	h4{
		font-weight : 500;
		text-align : center;
	}
	.notes{
		margin-inline : auto;
		font-weight : 500;
		li li{
			display : flex;
			align-items : start;
			justify-content : start;
			&::before{
				flex-shrink : 0;
				content : "・";
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 120 * var( --rem ) );
		.box{
			padding-block : calc( 105 * var( --rem ) );
			padding-inline : calc( 43 * var( --percent ) );
		}
		h4{
			font-size : calc( 32 * var( --rem ) );
			line-height : calc( 50 / 32 );
		}
		.notes{
			margin-top : calc( 95 * var( --rem ) );
			h5 , p , ul{
				font-size : calc( 28 * var( --rem ) );
				line-height : calc( 60 / 28 );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 65 * var( --rem ) );
		padding-bottom : calc( 100 * var( --rem ) );
		.box{
			width : calc( 1100 * var( --rem ) );
			padding-top : calc( 54 * var( --rem ) );
			padding-bottom : calc( 60 * var( --rem ) );
			margin-inline : auto;
		}
		h4{
			font-size : calc( 20 * var( --rem ) );
			line-height : calc( 29 / 20 );
		}
		.notes{
			width : calc( 828 * var( --percent ) );
			margin-top : calc( 48 * var( --rem ) );
			h5 , p , ul{
				font-size : calc( 14 * var( --rem ) );
				line-height : calc( 23 / 14 );
			}
		}
	}
}

/* --------------------------------------------
OPTIONS
--------------------------------------------- */
#option{
	ul{
		margin-inline : auto;
	}
	h3{
		font-weight : 700;
	}
	.price{
		display : flex;
		align-items : baseline;
		justify-content : start;
		font-weight : 700;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 160 * var( --rem ) );
		padding-bottom : calc( 188 * var( --rem ) );
		ul{
			width : calc( 480 * var( --percent ) );
			margin-top : calc( 120 * var( --rem ) );
		}
		li + li{
			margin-top : calc( 92 * var( --rem ) );
		}
		li{
			img{
				display : block;
				width : fit-content;
				height : calc( 240 * var( --rem ) );
				margin-inline : auto;
			}
		}
		h3{
			margin-top : calc( 50 * var( --rem ) );
			font-size : calc( 48 * var( --rem ) );
			line-height : calc( 70 / 48 );
		}
		.value{
			font-size : calc( 60 * var( --rem ) );
			line-height : calc( 87 / 60 );
		}
		.unit{
			font-size : calc( 28 * var( --rem ) );
			line-height : calc( 41 / 28 );
		}
		.sub{
			margin-top : calc( 44 * var( --rem ) );
			font-size : calc( 30 * var( --rem ) );
			line-height : calc( 50 / 30 );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 80 * var( --rem ) );
		padding-bottom : calc( 102 * var( --rem ) );
		ul{
			display : flex;
			flex-wrap : wrap;
			row-gap : calc( 36 * var( --rem ) );
			justify-content : space-between;
			width : calc( 1138 * var( --rem ) );
			margin-top : calc( 150 * var( --rem ) );
		}
		li{
			display : flex;
			align-items : start;
			justify-content : space-between;
			width : calc( 502 * var( --rem ) );
			img{
				flex-shrink : 0;
				height : calc( 150 * var( --rem ) );
			}
			> div{
				width : calc( 300 * var( --rem ) );
				padding-top : calc( 15 * var( --rem ) );
			}
		}
		h3{
			font-size : calc( 30 * var( --rem ) );
			line-height : calc( 43 / 30 );
		}
		.value{
			font-size : calc( 48 * var( --rem ) );
			line-height : calc( 70 / 48 );
		}
		.unit{
			font-size : calc( 18 * var( --rem ) );
			line-height : calc( 26 / 18 );
		}
		.sub{
			margin-top : calc( 16 * var( --rem ) );
			font-size : calc( 18 * var( --rem ) );
			line-height : calc( 30 / 18 );
		}
	}
}

/* --------------------------------------------
SIMURATION
--------------------------------------------- */
#simulation{
	.form-group{
		> label{
			display : block;
			font-weight : 700;
			color : white;
			border-bottom : solid calc( 2 * var( --rem ) ) white;
		}
	}
.radios {
        display: flex;
        flex-wrap: wrap;
        align-items: start;

        label {
            display: flex;
            align-items: center;
            justify-content: start;
            width: fit-content;

            input {
                position: relative;
                flex-shrink: 0;
                background-color: white;
                border-radius: 50%;
                accent-color: var(--red);
                appearance: none;
                cursor: pointer; /* 通常時はクリックできることを示すポインター */

                &:checked::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    display: block;
                    width: auto;
                    aspect-ratio: 1;
                    content: "";
                    background-color: var(--red);
                    border-radius: 50%;
                    translate: -50% -50%;
                }

                /* --- disabled: 無効化された時のスタイル --- */
                &:disabled {
                    cursor: not-allowed; /* 禁止マークを表示 */
                    background-color: #d1d1d1; /* 背景をグレーに */
                    opacity: 0.7;

                    &:checked::before {
                        background-color: #888; /* チェック状態でも色を控えめに */
                    }
                }
            }

            span {
                font-weight: 700;
                color: white;
            }

            /* --- inputがdisabledの時、横のspanの色も変える --- */
            input:disabled + span {
                color: #aaaaaa;
                cursor: not-allowed;
            }
        }
    }
	@media screen and ( width <= 750px ){
		padding-top : calc( 158 * var( --rem ) );
		padding-bottom : calc( 112 * var( --rem ) );
		.title01{
			margin-bottom : calc( 102 * var( --rem ) );
		}
		.form-group{
			+ .form-group{
				margin-top : calc( 78 * var( --rem ) );
			}
			> label{
				padding-bottom : calc( 29 * var( --rem ) );
				margin-bottom : calc( 38 * var( --rem ) );
				font-size : calc( 38 * var( --rem ) );
				line-height : calc( 55 / 38 );
			}
		}
		.radios{
			row-gap : calc( 68 * var( --rem ) );
			&.column02-sp{
				> label{
					width : calc( 100% / 2 );
				}
			}
			label{
				input{
					width : calc( 70 * var( --rem ) );
					height : calc( 70 * var( --rem ) );
					margin-right : calc( 21 * var( --rem ) );
					&:checked::before{
						height : calc( 32 * var( --rem ) );
					}
				}
				span{
					padding-right : 1.5em;
					font-size : calc( 32 * var( --rem ) );
					line-height : calc( 46 / 32 );
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 78 * var( --rem ) );
		padding-bottom : calc( 100 * var( --rem ) );
		.title01{
			margin-bottom : calc( 68 * var( --rem ) );
		}
		.form-group{
			+ .form-group{
				margin-top : calc( 54 * var( --rem ) );
			}
			> label{
				padding-bottom : calc( 12 * var( --rem ) );
				margin-bottom : calc( 38 * var( --rem ) );
				font-size : calc( 30 * var( --rem ) );
				line-height : calc( 43 / 30 );
			}
		}
		.radios{
			row-gap : calc( 44 * var( --rem ) );
			&.column04-pc{
				> label{
					width : calc( 100% / 4 );
				}
			}
			&.column03-pc{
				> label{
					width : calc( 100% / 3 );
				}
			}
			label{
				input{
					width : calc( 45 * var( --rem ) );
					height : calc( 45 * var( --rem ) );
					margin-right : calc( 20 * var( --rem ) );
					&:checked::before{
						height : calc( 20 * var( --rem ) );
					}
				}
				span{
					padding-right : .5em;
					font-size : calc( 21 * var( --rem ) );
					line-height : calc( 30 / 21 );
				}
			}
		}
	}
}
#results{
	background-color : white;
	outline : solid calc( 2 * var( --rem ) ) black;
	outline-offset : calc( -2 * var( --rem ) );
	h3 , h4{
		font-weight : 700;
		text-align : center;
	}
	.free{
		display : flex;
		align-content : center;
		align-items : baseline;
		justify-content : center;
		width : fit-content;
		margin-inline : auto;
		font-weight : 700;
		background-color : #fff100;
		.max{
			font-size : calc( 24 * var( --rem ) );
			line-height : calc( 35 / 24 );
		}
		.value{
			font-weight : 900;
			color : var( --red );
		}
		.unit{
			font-size : calc( 36 * var( --rem ) );
			line-height : calc( 52 / 36 );
		}
	}
	h4{
		margin-inline : auto;
		border-bottom : solid calc( 2 * var( --rem ) ) currentColor;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 90 * var( --rem ) );
		padding-bottom : calc( 184 * var( --rem ) );
		margin-top : calc( 191 * var( --rem ) );
		h3 , h4{
			font-size : calc( 42 * var( --rem ) );
			line-height : calc( 61 / 42 );
		}
		h4{
			width : calc( 630 * var( --percent ) );
			padding-bottom : calc( 22 * var( --rem ) );
			margin-top : calc( 120 * var( --rem ) );
		}
		.free{
			width : calc( 450 * var( --percent ) );
			height : calc( 94 * var( --rem ) );
			margin-top : calc( 66 * var( --rem ) );
			.value{
				font-size : calc( 60 * var( --rem ) );
				line-height : calc( 87 / 60 );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 54 * var( --rem ) );
		padding-bottom : calc( 58 * var( --rem ) );
		margin-top : calc( 134 * var( --rem ) );
		h3 , h4{
			font-size : calc( 36 * var( --rem ) );
			line-height : calc( 52 / 36 );
		}
		h4{
			width : calc( 767 * var( --percent ) );
			padding-bottom : calc( 18 * var( --rem ) );
			margin-top : calc( 42 * var( --rem ) );
		}
		.free{
			width : calc( 450 * var( --percent ) );
			height : calc( 90 * var( --rem ) );
			margin-top : calc( 30 * var( --rem ) );
			.value{
				font-size : calc( 54 * var( --rem ) );
				line-height : calc( 78 / 54 );
			}
		}
	}
}
#result{
	> div{
		display : flex;
		align-items : center;
	}
	dt{
		display : contents;
		span{
			display : block;
			font-size : calc( 36 * var( --rem ) );
			font-weight : 700;
			line-height : calc( 52 / 36 );
		}
		img{
			height : calc( 15 * var( --rem ) );
		}
	}
	dd{
		display : flex;
		align-items : baseline;
		justify-content : start;
		font-weight : 700;
		white-space : pre;
		.value{
			font-weight : 900;
			color : var( --red );
		}
	}
	@media screen and ( width <= 750px ){
		padding-left : calc( 95 * var( --percent ) );
		margin-top : calc( 86 * var( --rem ) );
		> div{
			flex-wrap : wrap;
			row-gap : calc( 8 * var( --rem ) );
			column-gap : calc( 50 * var( --rem ) );
			+ div{
				margin-top : calc( 60 * var( --rem ) );
			}
		}
		dt{
			span{
				width : 100%;
			}
		}
		.value{
			font-size : calc( 60 * var( --rem ) );
			line-height : calc( 87 / 60 );
		}
		.unit{
			font-size : calc( 30 * var( --rem ) );
			line-height : calc( 43 / 30 );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-left : calc( 91 * var( --percent ) );
		margin-top : calc( 52 * var( --rem ) );
		> div{
			+ div{
				margin-top : calc( 36 * var( --rem ) );
			}
		}
		dt{
			span{
				flex-shrink : 0;
				width : calc( 324 * var( --rem ) );
			}
			img{
				flex-shrink : 0;
				margin-right : calc( 73 * var( --rem ) );
			}
		}
		.value{
			font-size : calc( 54 * var( --rem ) );
			line-height : calc( 78 / 54 );
		}
		.unit{
			font-size : calc( 24 * var( --rem ) );
			line-height : calc( 35 / 24 );
		}
	}
}
#detail{
	display : block;
	margin-inline : auto;
	thead , tbody , tfoot{
		display : block;
	}
	th , td{
		font-weight : 500;
	}
	th{
		text-align : left;
	}
	tfoot{
		border-top : solid calc( 2 * var( --rem ) ) black;
		tr{
			display : flex;
			align-items : baseline;
		}
		td{
			display : flex;
			align-items : baseline;
			.value{
				font-weight : 700;
			}
		}
	}
	@media screen and ( width <= 750px ){
		width : calc( 630 * var( --percent ) );
		margin-top : calc( 56 * var( --rem ) );
		tbody{
			tr{
				display : block;
				+ tr{
					margin-top : calc( 45 * var( --rem ) );
				}
			}
			th , td{
				display : block;
			}
			th{
				font-size : calc( 30 * var( --rem ) );
				line-height : calc( 40 / 30 );
			}
			td{
				margin-top : calc( 10 * var( --rem ) );
				font-size : calc( 36 * var( --rem ) );
				font-weight : 700;
				line-height : calc( 52 / 36 );
			}
		}
		tfoot{
			padding-top : calc( 36 * var( --rem ) );
			margin-top : calc( 68 * var( --rem ) );
			th{
				width : calc( 171 * var( --rem ) );
				font-size : calc( 36 * var( --rem ) );
				line-height : calc( 52 / 36 );
			}
			td{
				.value , .sp{
					font-size : calc( 36 * var( --rem ) );
					line-height : calc( 52 / 36 );
				}
				.unit{
					font-size : calc( 24 * var( --rem ) );
					line-height : calc( 35 / 24 );
				}
				.sp{
					font-family : "Noto Sans JP" , sans-serif;
					font-weight : 700;
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		width : calc( 767 * var( --percent ) );
		margin-top : calc( 26 * var( --rem ) );
		tr{
			display : flex;
		}
		th , td{
			font-size : calc( 24 * var( --rem ) );
			line-height : calc( 35 / 24 );
		}
		th{
			flex-shrink : 0;
			width : calc( 392 * var( --rem ) );
		}
		tbody{
			tr{
				align-items : center;
				+tr{
					margin-top : calc( 34 * var( --rem ) );
				}
			}
		}
		tfoot{
			padding-top : calc( 28 * var( --rem ) );
			margin-top : calc( 42 * var( --rem ) );
			.value{
				font-size : calc( 36 * var( --rem ) );
				line-height : calc( 52 / 36 );
			}
		}
	}
}

/* --------------------------------------------
WI FI
--------------------------------------------- */
#wifi{
	a{
		display : block;
	}
	@media screen and ( width <= 750px ){
		padding-top : calc( 147 * var( --rem ) );
		padding-bottom : calc( 145 * var( --rem ) );
		a{
			width : calc( 688 * var( --percent ) );
			margin-inline : auto;
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 80 * var( --rem ) );
		padding-bottom : calc( 80 * var( --rem ) );
	}
}