@charset "UTF-8";

/* --------------------------------------------
DIALOG
--------------------------------------------- */
#search{
	position : fixed;
	top : 0;
	top : 50%;
	left : 0;
	left : 50%;
	align-content : center;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	font-family : "Zen Kaku Gothic New" , sans-serif;
	opacity : 0;
	translate : -50% -50%;
	&[open]{
		overflow-x : visible;
		overflow-y : visible;
		box-shadow : 0 calc( 3 * var( --remBase ) ) calc( 6 * var( --remBase ) ) color-mix( in sRGB , black 16.08% , transparent );
		opacity : 1;
		@starting-style{
			opacity : 0;
		}
		&::backdrop{
			opacity : 1;
			@starting-style{
				opacity : 0;
			}
		}
	}
	&::backdrop{
		background-color : color-mix( in sRGB , black 39.75% , transparent );
	}
	> button{
		position : absolute;
		top : 0;
		right : 0;
		width : auto;
		aspect-ratio : 1;
		background : url( "../images/parts/searchDialog/close.svg" ) left top / contain no-repeat;
		translate : 50% -50%;
	}
	.dialogContent{
		background-color : white;
		border-radius : calc( 10 * var( --remBase ) );
	}
	.tabList01{
		display : grid;
		grid-auto-flow : column;
		background-color : var( --cyan01 );
		border-radius : calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) 0 0;
		button{
			font-weight : 700;
			border-radius : calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) 0 0;
			&[aria-selected="true"]{
				color : var( --blue );
				background-color : white;
				&::before{
					filter : var( --filterCyan01 );
				}
			}
			&[aria-selected="false"]{
				color : white;
				background-color : #666c6f;
				&::before{
					filter : var( --filterWhite );
				}
			}
			&::before{
				display : block;
				width : auto;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : center;
				background-size : contain;
			}
		}
	}
	#tab-type{
		&::before{
			aspect-ratio : 23/20;
			background-image : url( "../images/parts/searchDialog/bag.svg" );
		}
	}
	legend{
		font-weight : 700;
	}
	.tabList02 button{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : space-between;
		width : 100%;
		font-weight : 700;
		color : var( --blue );
		&::after{
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			background-repeat : no-repeat;
			background-position : center;
			background-size : contain;
		}
	}
	.checkboxies{
		label{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			span{
				font-weight : 500;
			}
		}
		input[type="checkbox"]{
			appearance : none;
			position : relative;
			font-size : 0;
			&::before , &::after{
				font-size : 0;
				content : "";
			}
			&::before{
				display : block;
				background-color : white;
				outline : solid 1px #a0a0a0;
				outline-offset : -1px;
			}
			&::after{
				position : absolute;
				top : 50%;
				left : 50%;
				display : none;
				background : url( "../images/parts/searchDialog/checked.svg" ) left top / contain no-repeat;
				opacity : 0;
				translate : -50% -50%;
				@starting-style{
					opacity : 0;
				}
			}
			&:checked::after{
				display : block;
				opacity : 1;
			}
		}
	}
	button[type="submit"]{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		height : calc( 64 * var( --remBase ) );
		font-size : calc( 20 * var( --remBase ) );
		font-weight : 700;
		color : white;
		background-color : var( --cyan01 );
		border-radius : 100vmax;
		box-shadow : 0 calc( 3 * var( --remBase ) ) var( --blue );
		&::before{
			display : block;
			width : auto;
			height : calc( 34.22 * var( --remBase ) );
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : url( "../images/parts/searchDialog/search.svg" ) left top / contain no-repeat;
		}
	}
	button[type="reset"]{
		font-family : "Noto Sans JP" , sans-serif;
		font-weight : 700;
	}
	@media screen and ( width <= 750px ){
		width : calc( 335 * var( --viewportBase ) );
		> button{
			height : calc( 30 * var( --remBase ) );
		}
		.dialogContent{
			padding-bottom : calc( 20 * var( --remBase ) );
		}
		.tabList01{
			grid-template-columns : calc( 100 * 100% / 305 ) calc( 95 * 100% / 305 ) calc( 100 * 100% / 305 );
			justify-content : space-between;
			padding-inline : calc( 15 * var( --contentBase ) );
			padding-top : calc( 20 * var( --remBase ) );
			button{
				height : calc( 72 * var( --remBase ) );
				font-size : calc( 15 * var( --remBase ) );
				line-height : 1.2;
				text-align : center;
				&::before{
					margin-inline : auto;
				}
			}
		}
		#tab-type{
			padding-top : calc( 7 * var( --remBase ) );
			&::before{
				height : calc( 19 * var( --remBase ) );
				margin-bottom : calc( 5 * var( --remBase ) );
			}
		}
		#tab-environment{
			padding-top : calc( 5 * var( --remBase ) );
			&::before{
				height : calc( 24 * var( --remBase ) );
				aspect-ratio : 1;
				margin-bottom : calc( 2 * var( --remBase ) );
				background-image : url( "../images/parts/searchDialog/building_sp.svg" );
			}
		}
		#tab-feature{
			padding-top : calc( 5 * var( --remBase ) );
			&::before{
				height : calc( 24 * var( --remBase ) );
				aspect-ratio : 1;
				margin-bottom : calc( 2 * var( --remBase ) );
				background-image : url( "../images/parts/searchDialog/light_sp.svg" );
			}
		}
		:where( fieldset , .submits ){
			padding-inline : calc( 20 * var( --contentBase ) );
		}
		legend{
			padding-top : calc( 20 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 41 / 24 );
		}
		.tabpanel02{
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 20 * 100% / 295 );
			margin-top : calc( 10 * var( --remBase ) );
			background-color : var( --cyan02 );
			border-radius : calc( 10 * var( --remBase ) );
		}
		.tabList02{
			button{
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 27 / 20 );
				&::after{
					height : calc( 7.58 * var( --remBase ) );
					aspect-ratio : 10/8;
					background-image : url( "../images/parts/searchDialog/arrow_sp.svg" );
				}
				&[aria-selected="true"]{
					&::after{
						rotate : 0deg;
					}
				}
				&[aria-selected="false"]{
					&::after{
						rotate : -180deg;
					}
				}
			}
			+ ul{
				padding-top : calc( 15 * var( --remBase ) );
				border-top : solid 1px white;
			}
		}
		.checkboxies{
			margin-top : calc( 20 * var( --remBase ) );
			> li + li{
				margin-top : calc( 15 * var( --remBase ) );
			}
			label{
				column-gap : calc( 10 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 26 / 16 );
			}
			input[type="checkbox"]{
				&::before{
					width : calc( 15 * var( --remBase ) );
					height : calc( 15 * var( --remBase ) );
				}
				&::after{
					width : calc( 10.9091 * var( --remBase ) );
					height : calc( 8 * var( --remBase ) );
				}
			}
		}
		.submits{
			margin-top : calc( 20 * var( --remBase ) );
		}
		button[type="submit"]{
			column-gap : calc( 10 * 100% / 266 );
			width : calc( 266 * 100% / 295 );
		}
		button[type="reset"]{
			display : block;
			width : fit-content;
			margin-inline : auto;
			margin-top : calc( 20 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 27 / 16 );
		}
	}
	@media print , screen and ( width > 750px ){
		width : calc( 1160 * var( --viewportBase ) );
		> button{
			height : calc( 60 * var( --remBase ) );
		}
		.dialogContent{
			padding-bottom : calc( 50 * var( --remBase ) );
		}
		:where( .tabList01 , fieldset , .submits ){
			padding-inline : calc( 32 * 100% / 1160 );
		}
		.tabList01{
			column-gap : calc( 20 * 100% / 1096 );
			justify-content : start;
			padding-top : calc( 30 * var( --remBase ) );
			button{
				display : grid;
				grid-auto-flow : column;
				column-gap : calc( 8 * var( --remBase ) );
				align-content : center;
				align-items : center;
				justify-content : center;
				height : calc( 48 * var( --remBase ) );
				padding-inline : calc( 20 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 27 / 20 );
				&::before{
					height : calc( 20 * var( --remBase ) );
				}
			}
		}
		#tab-environment{
			&::before{
				aspect-ratio : 22/20;
				background-image : url( "../images/parts/searchDialog/building_pc.svg" );
			}
		}
		#tab-feature{
			&::before{
				aspect-ratio : 14/20;
				background-image : url( "../images/parts/searchDialog/light_pc.svg" );
			}
		}
		legend{
			padding-top : calc( 10 * var( --remBase ) );
			font-size : calc( 30 * var( --remBase ) );
			line-height : calc( 41 / 30 );
		}
		.tabpanel02{
			margin-top : calc( 17 * var( --remBase ) );
		}
		div.tabpanel02{
			display : grid;
			grid-template-columns : calc( 365 * 100% / 1096 ) 1fr;
			align-items : start;
		}
		.tabList02{
			grid-row : 1;
			grid-column : 1;
			> button{
				height : calc( 50 * var( --remBase ) );
				padding-inline : calc( 24 * 100% / 365 );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 27 / 20 );
				border-radius : calc( 8 * var( --remBase ) ) 0 0 calc( 8 * var( --remBase ) );
				outline : solid 1px var( --cyan02 );
				outline-offset : -1px;
				&::after{
					height : calc( 7.82 * var( --remBase ) );
					aspect-ratio : 6/8;
					background-image : url( "../images/parts/searchDialog/arrow_pc.svg" );
				}
				&[aria-selected="true"]{
					background-color : var( --cyan02 );
				}
				&[aria-selected="false"]{
					background-color : white;
				}
			}
			> button + button{
				margin-top : 1px;
			}
		}
		div.tabpanel02{
			grid-row : 1;
			grid-column : 2;
			ul{
				align-items : start;
				padding-block : calc( 12 * var( --remBase ) );
				padding-inline : calc( 30 * 100% / 731 );
				background-color : var( --cyan02 );
				border-radius : 0 0 calc( 8 * var( --remBase ) ) calc( 8 * var( --remBase ) );
				> li + li{
					margin-top : calc( 15 * var( --remBase ) );
				}
			}
		}
		ul.tabpanel02{
			display : grid;
			grid-template-columns : repeat( 3 , 1fr );
			row-gap : calc( 15 * var( --remBase ) );
			padding-block : calc( 12 * var( --remBase ) );
			padding-inline : calc( 30 * 100% / 731 );
			background-color : var( --cyan02 );
			border-radius : calc( 8 * var( --remBase ) );
		}
		.checkboxies{
			label{
				column-gap : calc( 10 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 26 / 15 );
			}
			input[type="checkbox"]{
				&::before{
					width : calc( 15 * var( --remBase ) );
					height : calc( 15 * var( --remBase ) );
				}
				&::after{
					width : calc( 10.9091 * var( --remBase ) );
					height : calc( 8 * var( --remBase ) );
				}
			}
		}
		.submits{
			display : grid;
			grid-template-columns : calc( 266 * 100% / 1096 ) auto;
			grid-auto-flow : column;
			column-gap : calc( 30 * 100% / 1096 );
			align-items : center;
			justify-content : center;
			margin-top : calc( 30 * var( --remBase ) );
		}
		button[type="submit"]{
			column-gap : calc( 10 * 100% / 266 );
			height : calc( 64 * var( --remBase ) );
		}
		button[type="reset"]{
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 27 / 20 );
		}
	}
}
@media ( hover : hover ){
	#search{
		.tabList01{
			> button:hover{
				color : var( --blue );
				background-color : white;
				&::before{
					filter : var( --filterCyan01 );
				}
			}
		}
		button[type="submit"]:hover{
			translate : 0 calc( 3 * var( --remBase ) );
			box-shadow : 0 0 0 calc( var( --blue ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#search{
		transition : opacity var( --hoverDuration ) var( --hoverTimingFunction ) , overlay var( --hoverDuration ) var( --hoverTimingFunction ) allow-discrete , display var( --hoverDuration ) var( --hoverTimingFunction ) allow-discrete;
		&::backdrop{
			transition : opacity var( --hoverDuration ) var( --hoverTimingFunction );
		}
		.tabList01{
			> button{
				transition : background var( --hoverDuration ) var( --hoverTimingFunction ) , color var( --hoverDuration ) var( --hoverTimingFunction );
			}
		}
		button[type="submit"]:hover{
			transition : translate var( --hoverDuration ) var( --hoverTimingFunction ) , box-shadow var( --hoverDuration ) var( --hoverTimingFunction );
		}
	}
}

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about{
	position : relative;
	z-index : 0;
	overflow : clip;
	&::before{
		position : absolute;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		font-size : 0;
		content : "";
		background-color : var( --cyan02 );
	}
	@media screen and ( width <= 750px ){
		&::before{
			top : calc( 146 * var( --remBase ) );
			height : calc( 100% - ( 146 * var( --remBase ) ) );
			clip-path : polygon( 0 calc( 100% - ( 375 * var( --remBase ) ) ) , 100% 0 , 100% 100% , 0 100% );
		}
	}
	@media print , screen and ( width > 750px ){
		&::before{
			top : 0;
			height : 100%;
			clip-path : polygon( calc( 50% + ( 350 * var( --viewportBase ) ) ) 0 , 100% 0 , 100% 100% , calc( 50% - ( 250 * var( --viewportBase ) ) ) 100% );
		}
	}
}
#about{
	font-family : "Zen Kaku Gothic New" , sans-serif;
	.title01{
		&::before{
			aspect-ratio : 59/19;
			margin-bottom : calc( 20 * var( --remBase ) );
			background-image : url( "../images/ui/label/about.svg" );
		}
	}
	li{
		position : relative;
		font-weight : 700;
		line-height : 1.2;
		color : var( --blue );
		text-align : center;
		background-color : var( --cyan03 );
		border-radius : calc( 15 * var( --remBase ) );
		outline : solid calc( 2 * var( --remBase ) ) var( --cyan01 );
		outline-offset : calc( -2 * var( --remBase ) );
		box-shadow : calc( 5 * var( --remBase ) ) calc( 5 * var( --remBase ) ) 0 color-mix( in sRGB , black 10% , transparent );
		&::before , &::after{
			position : absolute;
			left : 0;
			display : block;
			width : 100%;
			content : "";
			background-repeat : no-repeat;
			background-position : center top;
			background-size : auto 100%;
		}
		&::before{
			top : calc( 22.83 * var( --remBase ) );
			height : calc( 18.41 * var( --remBase ) );
		}
		&::after{
			top : calc( 50 * var( --remBase ) );
			height : calc( 108 * var( --remBase ) );
		}
		&:nth-child( 1 ){
			&::before{
				background-image : url( "../images/top/about/check01.svg" );
			}
			&::after{
				background-image : url( "../images/top/about/icon01.svg" );
			}
		}
		&:nth-child( 2 ){
			&::before{
				background-image : url( "../images/top/about/check02.svg" );
			}
			&::after{
				background-image : url( "../images/top/about/icon02.svg" );
			}
		}
		&:nth-child( 3 ){
			&::before{
				background-image : url( "../images/top/about/check03.svg" );
			}
			&::after{
				background-image : url( "../images/top/about/icon03.svg" );
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		.title01{
			&::before{
				height : calc( 13.98 * var( --remBase ) );
			}
		}
		ul{
			width : calc( 280 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 30 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		li{
			height : calc( 214 * var( --remBase ) );
			padding-top : calc( 140 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-block : calc( 80 * var( --remBase ) );
		.title01{
			&::before{
				height : calc( 18.17 * var( --remBase ) );
			}
		}
		ul{
			display : grid;
			grid-template-rows : calc( 266 * var( --remBase ) );
			grid-template-columns : repeat( 3 , calc( 280 * var( --contentBase ) ) );
			column-gap : calc( 20 * var( --contentBase ) );
			margin-top : calc( 49 * var( --remBase ) );
		}
		li{
			padding-top : calc( 178 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
FEATURED
--------------------------------------------- */
#featured{
	.title01::before{
		margin-bottom : calc( 20 * var( --remBase ) );
		background-image : url( "../images/ui/label/featured.svg" );
		appearance : 223/24;
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		.title01{
			&::before{
				height : calc( 17.72 * var( --remBase ) );
			}
		}
		> ul{
			margin-top : calc( 43 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-block : calc( 80 * var( --remBase ) );
		.title01{
			&::before{
				height : calc( 23.04 * var( --remBase ) );
			}
		}
		> ul{
			margin-top : calc( 43 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow{
	font-family : "Zen Kaku Gothic New" , sans-serif;
	.title01{
		&::before{
			aspect-ratio : 46/19;
			margin-bottom : calc( 20 * var( --remBase ) );
			background-image : url( "../images/ui/label/flow.svg" );
		}
	}
	ol{
		> li{
			background-color : var( --cyan03 );
			border-radius : calc( 15 * var( --remBase ) );
			+ li{
				position : relative;
				&::before{
					position : absolute;
					left : 50%;
					width : auto;
					height : calc( 26.75 * var( --remBase ) );
					aspect-ratio : 24/27;
					font-size : 0;
					content : "";
					background : url( "../images/top/flow/next.svg" ) left top / contain no-repeat;
					translate : -50% 0;
				}
			}
		}
	}
	hgroup{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : start;
		h4{
			margin-top : calc( 10 * var( --remBase ) );
			font-weight : 700;
			color : var( --blue );
		}
	}
	li > p{
		font-size : calc( 16 * var( --remBase ) );
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		.title01{
			&::before{
				height : calc( 13.98 * var( --remBase ) );
			}
		}
		ol{
			margin-top : calc( 30 * var( --remBase ) );
			> li{
				padding-block : calc( 20 * var( --remBase ) );
				padding-inline : calc( 20 * var( --contentBase ) );
			}
			> li + li{
				margin-top : calc( 46.75 * var( --remBase ) );
				&::before{
					top : calc( -36.75 * var( --remBase ) );
				}
			}
		}
		hgroup{
			column-gap : calc( 10 * 100% / 295 );
			img{
				height : calc( 42 * var( --remBase ) );
			}
			h4{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 22 / 18 );
			}
		}
		li > p{
			margin-top : calc( 10 * var( --remBase ) );
			line-height : 1.7;
		}
	}
	@media print , screen and ( width > 750px ){
		padding-block : calc( 80 * var( --remBase ) );
		.title01{
			&::before{
				height : calc( 18.17 * var( --remBase ) );
			}
		}
		ol{
			padding-inline : calc( 5 * var( --contentBase ) );
			margin-top : calc( 72 * var( --remBase ) );
			> li{
				padding-block : calc( 30 * var( --remBase ) );
				padding-inline : calc( 30 * 100% / 900 );
				+ li{
					margin-top : calc( 66.75 * var( --remBase ) );
					&::before{
						top : calc( -46.75 * var( --remBase ) );
					}
				}
			}
		}
		hgroup{
			column-gap : calc( 25 * 100% / 840 );
			img{
				height : calc( 55 * var( --remBase ) );
			}
			h4{
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 35 / 24 );
			}
		}
		li > p{
			margin-top : calc( 16 * var( --remBase ) );
			line-height : calc( 23 / 16 );
		}
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq{
	font-family : "Zen Kaku Gothic New" , sans-serif;
	color : white;
	.title01{
		color : white;
		&::before{
			aspect-ratio : 39/19;
			margin-bottom : calc( 20 * var( --remBase ) );
			background-image : url( "../images/ui/label/faq_white.svg" );
		}
	}
	dl{
		> div{
			padding-block : calc( 20 * var( --remBase ) );
			border-bottom : solid 1px currentColor;
		}
	}
	dt{
		display : grid;
		grid-template-columns : auto 1fr;
		align-items : start;
		justify-content : start;
		&::before{
			display : block;
			width : auto;
			height : calc( 30 * var( --remBase ) );
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : url( "../images/ui/label/q.svg" ) left top / contain no-repeat;
		}
		span{
			font-weight : 700;
		}
	}
	dd{
		font-size : calc( 16 * var( --remBase ) );
		font-weight : 500;
		line-height : 1.7;
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		.title01{
			&::before{
				height : calc( 13.98 * var( --remBase ) );
			}
		}
		dl{
			margin-top : calc( ( 30 - 20 ) * var( --remBase ) );
		}
		dt{
			column-gap : calc( 5 * var( --contentBase ) );
			span{
				margin-top : calc( 3 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		dd{
			margin-top : calc( 20 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-block : calc( 80 * var( --remBase ) );
		.title01{
			&::before{
				height : calc( 18.93 * var( --remBase ) );
			}
		}
		dl{
			padding-inline : calc( 5 * var( --contentBase ) );
			margin-top : calc( ( 72 - 20 ) * var( --remBase ) );
		}
		dt{
			column-gap : calc( 5 * 100% / 900 );
			span{
				margin-top : calc( .5 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 29 / 20 );
			}
		}
		dd{
			margin-top : calc( 10 * var( --remBase ) );
		}
	}
}