@charset "UTF-8";

/* --------------------------------------------
CONCEPT
--------------------------------------------- */
#concept h2{
	font-weight : 500;
	line-height : 1.5;
	color : white;
	color : var( --red );
	text-align : center;
}
#concept h2 span{
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-underline-offset : calc( ( 1lh - 1em ) / 2 );
}
@media screen and ( width <= 768px ){
	#concept{
		padding-block : calc( 60 var( --remBase ) );
	}
	#concept h2{
		font-size : 3.6rem;
	}
	#concept picture{
		margin-top : calc( 28 var( --remBase ) );
	}
	#concept picture + div{
		margin-top : calc( 36 var( --remBase ) );
	}
	#concept p{
		font-size : 2.6rem;
		line-height : 2;
	}
}
@media print , screen and ( width > 768px ){
	#concept{
		padding-block : calc( 40 var( --remBase ) );
	}
	#concept h2{
		font-size : 3.2rem;
	}
	#concept .box{
		display : grid;
		grid-template-columns : calc( 470 * 100% / 1000 ) calc( 500 * 100% / 1000 );
		row-gap : calc( 16 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 32 var( --remBase ) );
	}
	#concept p{
		font-size : 1.6rem;
		line-height : 1.8;
	}
	#concept p + p{
		margin-top : calc( 20 var( --remBase ) );
	}
	#concept picture{
		grid-row : 1;
		grid-column : 2;
	}
}

/* --------------------------------------------
POINT
-------------------------------------------- */
#point hgroup{
	color : white;
	text-align : center;
	background-color : var( --gold );
}
#point hgroup p{
	line-height : 1;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
#point hgroup h2{
	font-weight : 500;
	text-align : center;
	text-indent : .03em;
	letter-spacing : .03em;
}
#point li{
	position : relative;
	counter-increment : no;
}
#point picture{
	width : 100%;
}
#point picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#point h3{
	position : absolute;
	top : 0;
	display : grid;
	grid-auto-flow : row;
	row-gap : .25em;
	align-content : center;
	align-items : start;
	justify-content : start;
	justify-self : start;
	font-weight : 500;
	color : var( --red );
	text-shadow : 1px 1px 0 color-mix( in sRGB , white 50% , transparent ) , -1px 1px 0 color-mix( in sRGB , white 50% , transparent ) , 1px -1px 0 color-mix( in sRGB , white 50% , transparent ) , -1px -1px 0 color-mix( in sRGB , white 50% , transparent );
}
#point h3::before{
	padding-left : 1em;
	content : counter( no ) ".";
}
#point h3 span{
	writing-mode : vertical-rl;
}
@media screen and ( width <= 768px ){
	#point{
		padding-bottom : calc( 60 var( --remBase ) );
	}
	#point hgroup{
		padding-block : calc( 24 var( --remBase ) );
	}
	#point hgroup p{
		font-size : 2.6rem;
	}
	#point hgroup h2{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 5rem;
	}
	#point ul{
		margin-top : calc( 40 var( --remBase ) );
	}
	#point li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#point picture{
		height : calc( 528 var( --remBase ) );
	}
	#point h3{
		left : 0;
		z-index : 1;
		height : calc( 528 var( --remBase ) );
		font-size : 3.4rem;
	}
	#point li p{
		margin-top : calc( 20 var( --remBase ) );
		font-size : 2.6rem;
		line-height : 2;
	}
}
@media print , screen and ( width > 768px ){
	#point{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#point hgroup{
		padding-block : calc( 16 var( --remBase ) );
	}
	#point hgroup p{
		font-size : 2rem;
	}
	#point hgroup h2{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 4rem;
	}
	#point ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 480 * 100% / 1000 ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 40 var( --remBase ) );
	}
	#point li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 2;
		row-gap : 0;
	}
	#point picture{
		height : calc( 340 var( --remBase ) );
	}
	#point h3{
		left : -.5em;
		height : calc( 340 var( --remBase ) );
		font-size : 2.6rem;
	}
	#point li p{
		margin-top : calc( 20 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.6;
	}
}

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about .title01{
	margin-bottom : calc( 28 var( --remBase ) );
}
@media screen and ( width <= 768px ){
	#about{
		padding-bottom : calc( 56 var( --remBase ) );
	}
	#about p{
		font-size : 2.4rem;
		line-height : 1.5;
	}
	#about p + p{
		margin-top : calc( 36 var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	#about{
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#about p{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#about p + p{
		margin-top : calc( 16 var( --remBase ) );
	}
}

/* --------------------------------------------
FEATURE
--------------------------------------------- */
@media screen and ( width <= 768px ){
	#feature{
		padding-bottom : calc( 64 var( --remBase ) );
	}
	#feature > ol{
		margin-top : calc( 48 var( --remBase ) );
	}
	#feature > ol > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#feature ol ol{
		margin-top : calc( 24 var( --remBase ) );
	}
	#feature li li{
		font-size : 2.4rem;
		line-height : 1.5;
	}
	#feature li li + li{
		margin-top : 1lh;
	}
}
@media print , screen and ( width > 768px ){
	#feature{
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#feature > ol{
		margin-top : calc( 32 var( --remBase ) );
	}
	#feature > ol > li{
		display : grid;
		column-gap : calc( 40 var( --percentBase ) );
		align-items : center;
	}
	#feature > ol > li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#feature > ol > li:nth-child( odd ){
		grid-template-columns : 1fr calc( 400 * 100% / 1000 );
	}
	#feature > ol > li:nth-child( odd ) picture{
		grid-column : 2;
	}
	#feature > ol > li:nth-child( even ){
		grid-template-columns : calc( 400 * 100% / 1000 ) 1fr;
	}
	#feature > ol > li:nth-child( even ) picture{
		grid-column : 1;
	}
	#feature picture{
		grid-row : 1;
	}
	#feature ol ol{
		grid-row : 1;
	}
	#feature li li{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#feature li li + li{
		margin-top : 1lh;
	}
}

/* --------------------------------------------
BEFORE AFTER
--------------------------------------------- */
#ba > ul{
	position : relative;
	display : grid;
	justify-content : space-between;
}
#ba > ul > li > button{
	display : grid;
	grid-template-columns : 1fr;
	grid-auto-flow : row;
}
#ba > ul > li > button h3{
	grid-row : 2;
	color : #a1a1a1;
}
#ba > ul > li > button > ol{
	display : grid;
	grid-row : 1;
	justify-content : space-between;
}
#ba > ul > li > button > ol > li{
	position : relative;
}
#ba > ul > li > button > ol > li::before{
	position : absolute;
	bottom : 0;
	left : 0;
	width : 100%;
	padding-inline : .25em;
	font-weight : 500;
	line-height : 1.5;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
#ba > ul > li > button > ol > li:nth-child( 1 )::before{
	color : var( --base );
	content : "Before";
}
#ba > ul > li > button > ol > li:nth-child( 2 )::before{
	color : var( --red );
	content : "After";
}
#ba > ul > li > button > ol > li:nth-child( 2 )::after{
	position : absolute;
	top : 50%;
	display : block;
	width : auto;
	aspect-ratio : 1;
	clip-path : polygon( 0 0 , 100% 50% , 0 100% );
	font-size : 0;
	content : "";
	background-color : var( --red );
	translate : 0 -50%;
}
#ba > ul > li > button img{
	width : 100%;
	height : auto;
}
#ba h3{
	font-weight : 400;
	text-align : center;
}
#ba .sub{
	line-height : 1.2;
	text-align : right;
}
@media screen and ( width <= 768px ){
	#ba{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#ba > ul{
		grid-template-columns : repeat( 2 , calc( 350 var( --percentBase ) ) );
		row-gap : calc( 48 var( --remBase ) );
		padding-top : calc( 48 var( --remBase ) );
	}
	#ba > ul > li > button{
		row-gap : calc( 20 var( --remBase ) );
	}
	#ba > ul > li > button ol{
		grid-template-columns : repeat( 2 , calc( 165 * 100% / 350 ) );
	}
	#ba > ul > li > button ol > li::before{
		-webkit-text-stroke : 1px white;
		text-stroke : 1px white;
		paint-order : stroke;
		font-size : 2rem;
	}
	#ba > ul > li > button ol > li:nth-child( 2 )::after{
		left : calc( -17 * 100% / 165 );
		height : calc( 14 var( --remBase ) );
	}
	#ba > ul > li > button h3{
		font-size : 2rem;
	}
	#ba .sub{
		margin-top : calc( 40 var( --remBase ) );
		font-size : 1.6rem;
	}
}
@media print , screen and ( width > 768px ){
	#ba{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#ba > ul{
		grid-template-columns : repeat( 2 , calc( 408 * 100% / 856 ) );
		row-gap : calc( 64 var( --remBase ) );
		padding-block : calc( 104 var( --remBase ) );
		padding-inline : calc( 72 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#ba > ul::before , #ba > ul::after{
	}
	#ba > ul::before , #ba > ul::after{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		height : calc( 280 var( --remBase ) );
		pointer-events : none;
		content : "";
		background-repeat : no-repeat;
		background-size : auto 100%;
	}
	#ba > ul::before{
		top : 0;
		background-image : url( "../images/ui/frame/frame0101.svg" ) , url( "../images/ui/frame/frame0102.svg" );
		background-position : left top , right top;
	}
	#ba > ul::after{
		bottom : 0;
		background-image : url( "../images/ui/frame/frame0103.svg" ) , url( "../images/ui/frame/frame0104.svg" );
		background-position : right bottom , left bottom;
	}
	#ba > ul > li > button{
		row-gap : calc( 16 var( --remBase ) );
		padding-inline : calc( 8 * 100% / 408 );
		padding-top : calc( 8 var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
		border : solid 1px #ccc;
	}
	#ba > ul > li > button ol{
		grid-template-columns : repeat( 2 , calc( 186 * 100% / 392 ) );
	}
	#ba > ul > li > button ol > li::before{
		-webkit-text-stroke : 1px white;
		text-stroke : 1px white;
		paint-order : stroke;
		font-size : 2rem;
	}
	#ba > ul > li > button ol > li:nth-child( 2 )::after{
		left : calc( -17 * 100% / 186 );
		height : calc( 14 var( --remBase ) );
	}
	#ba > ul > li > button h3{
		font-size : 1.8rem;
	}
	#ba .sub{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.4rem;
	}
}
dialog[open]{
	z-index : 12;
	overflow-x : clip;
}
@media screen and ( width <= 768px ){
	dialog[open]{
		display : grid;
		align-content : center;
		width : 100%;
		height : 100dvh;
	}
}
@media print , screen and ( width > 768px ){
	dialog[open]{
		inset : 0;
		margin : auto;
	}
}
dialog:not( .is-open ){
	animation : fadeOut .3s ease-out forwards;
}
dialog.is-open{
	animation : fadeIn .3s ease-out forwards;
}
dialog::backdrop{
	background-color : color-mix( in sRGB , white 85% , transparent );
}
dialog .dialogContent{
	display : grid;
	align-items : center;
	justify-content : center;
	overflow : visible;
	overflow-y : auto;
}
dialog h3{
	grid-row : 2;
	color : var( --red );
}
dialog ol{
	display : grid;
	grid-row : 1;
	align-items : center;
	justify-content : center;
}
dialog ol > li{
	position : relative;
}
dialog ol > li::before{
	position : absolute;
	bottom : 0;
	left : 0;
	width : 100%;
	padding-inline : .25em;
	font-weight : 500;
	line-height : 1.5;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
dialog ol > li:nth-child( 1 )::before{
	color : var( --base );
	content : "Before";
}
dialog ol > li:nth-child( 2 )::before{
	color : var( --red );
	content : "After";
}
dialog ol > li:nth-child( 2 )::after{
	position : absolute;
	top : 50%;
	display : block;
	width : auto;
	aspect-ratio : 1;
	clip-path : polygon( 0 0 , 100% 50% , 0 100% );
	font-size : 0;
	content : "";
	background-color : var( --red );
	translate : 0 -50%;
}
dialog .controller{
	display : grid;
	grid-template-columns : repeat( 3 , auto );
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
}
dialog .controller .prev{
	grid-column : 1;
}
dialog .controller button:not( :has( img ) ){
	grid-column : 2;
}
dialog .controller .next{
	grid-column : 3;
}
@media screen and ( width <= 768px ){
	dialog .dialogContent{
		grid-template-columns : 1fr;
		row-gap : calc( 24 var( --remBase ) );
		width : 100%;
		padding-block : calc( 40 var( --remBase ) );
	}
	dialog ol{
		grid-template-columns : repeat( 2 , 1fr );
		column-gap : calc( 40 var( --percentBase ) );
	}
	dialog ol > li::before{
		-webkit-text-stroke : 1px white;
		text-stroke : 1px white;
		paint-order : stroke;
		font-size : 2.4rem;
	}
	dialog ol > li:nth-child( 2 )::after{
		left : calc( -30 * 100% / 340 );
		height : calc( 20 var( --remBase ) );
	}
	dialog picture img{
		width : 100%;
		height : auto;
	}
	dialog h3{
		font-size : 2.4rem;
	}
	dialog .controller{
		column-gap : calc( 20 var( --remBase ) );
	}
	dialog .controller button:not( :has( img ) ){
		font-size : 2.4rem;
	}
	dialog .controller img{
		height : calc( 24 var( --remBase ) );
		filter : var( --filterBase );
	}
}
@media print , screen and ( width > 768px ){
	dialog .dialogContent{
		row-gap : calc( 24 var( --remBase ) );
		max-width : 1000px;
		padding-block : calc( 12 var( --remBase ) );
	}
	dialog ol{
		grid-template-columns : repeat( 2 , auto );
		column-gap : calc( 16 var( --remBase ) );
	}
	dialog ol > li::before{
		-webkit-text-stroke : 1px white;
		text-stroke : 1px white;
		paint-order : stroke;
		font-size : 2.8rem;
	}
	dialog ol > li:nth-child( 2 )::after{
		left : calc( -15 var( --remBase ) );
		height : calc( 14 var( --remBase ) );
	}
	dialog picture img{
		width : 480px;
		max-width : 100%;
		height : auto;
	}
	dialog h3{
		font-size : 2.4rem;
	}
	dialog .controller{
		column-gap : calc( 16 var( --remBase ) );
	}
	dialog .controller button:not( :has( img ) ){
		font-size : 1.6rem;
	}
	dialog .controller img{
		height : calc( 16 var( --remBase ) );
		filter : var( --filterBase );
	}
}
@keyframes fadeIn{
	0%{
		opacity : 0;
	}
	100%{
		opacity : 1;
	}
}
@keyframes fadeOut{
	0%{
		opacity : 1;
	}
	100%{
		opacity : 0;
	}
}

/* --------------------------------------------
VOICE
--------------------------------------------- */
#voice .list01 li{
	height : auto;
	aspect-ratio : 16/9;
}
#voice iframe{
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#voice picture img{
	width : 100%;
	height : auto;
}
@media screen and ( width <= 768px ){
	#voice{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#voice ul{
		padding-inline : calc( 20 var( --percentBase ) );
	}
	#voice .list01{
		margin-top : calc( 48 var( --remBase ) );
	}
	#voice .list01 > li + li{
		margin-top : calc( 48 var( --remBase ) );
	}
	#voice .list02{
		margin-top : calc( 48 var( --remBase ) );
	}
	#voice .list02 > li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	#voice{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#voice ul{
		display : grid;
		justify-content : space-between;
	}
	#voice .list01{
		grid-template-columns : repeat( 2 , calc( 480 * 100% / 1000 ) );
		row-gap : calc( 40 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#voice .list02{
		grid-template-columns : repeat( 3 , calc( 320 * 100% / 1000 ) );
		row-gap : calc( 20var( --rembase ) );
		margin-top : calc( 64 var( --remBase ) );
	}
}

/* --------------------------------------------
PRICE
--------------------------------------------- */
#price table{
	width : 100%;
	border-collapse : separate;
}
#price th{
	font-weight : 500;
	color : white;
	text-align : center;
	background-color : var( --gold );
}
#price th , #price td{
	padding-block : calc( 16 var( --remBase ) );
	padding-inline : 1em;
	border-radius : calc( 8 var( --remBase ) );
}
#price td{
	background-color : color-mix( in sRGB , var( --gold ) 10% , transparent );
}
#price thead td{
	text-align : center;
}
#price tbody td{
	text-align : right;
}
@media screen and ( width <= 768px ){
	#price{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#price > p{
		margin-top : calc( 40 var( --remBase ) );
	}
	#price .tables{
		margin-top : calc( 24 var( --remBase ) );
		overflow-x : auto;
	}
	#price table{
		width : calc( 800 var( --percentBase ) );
		table-layout : fixed;
		border-spacing : calc( 4 var( --remBase ) );
	}
	#price th , #price td{
		font-size : 2rem;
		line-height : 1.2;
	}
}
@media print , screen and ( width > 768px ){
	#price{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#price > p{
		margin-top : calc( 40 var( --remBase ) );
	}
	#price .tables{
		margin-top : calc( 24 var( --remBase ) );
	}
	#price table{
		border-spacing : calc( 4 var( --remBase ) );
	}
	#price th , #price td{
		font-size : 1.6rem;
		line-height : 1.2;
	}
	#price td{
		text-align : right;
	}
}

/* --------------------------------------------
CONTACTS
--------------------------------------------- */
#contacts h3{
	font-weight : 500;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#contacts > ul > li > dl{
	display : grid;
}
#contacts > ul > li > dl > dt , #contacts > ul > li > dl > dd{
	border-bottom : solid 1px var( --red );
}
#contacts dl dl{
	display : grid;
	grid-template-columns : auto 1fr;
	column-gap : 1em;
}
#contacts dl dl dl{
	grid-template-columns : auto auto auto auto;
	column-gap : .5em;
	justify-content : start;
}
#contacts dd a{
	display : block;
	width : fit-content;
	color : var( --red );
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-underline-offset : .25em;
}
@media screen and ( width <= 768px ){
	#contacts{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#contacts > ul{
		margin-top : calc( 40 var( --remBase ) );
	}
	#contacts > ul > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#contacts h3{
		font-size : 3.6rem;
	}
	#contacts picture{
		margin-top : calc( 20 var( --remBase ) );
	}
	#contacts picture img{
		width : 100%;
		height : auto;
	}
	#contacts > ul > li > dl{
		grid-template-columns : calc( 200 var( --percentBase ) ) 1fr;
		margin-top : calc( 28 var( --remBase ) );
	}
	#contacts > ul > li > dl > dt , #contacts > ul > li > dl > dd{
		padding-block : calc( 28 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.7;
	}
	#contacts li li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	#contacts{
		padding-bottom : calc( 100 var( --remBase ) );
	}
	#contacts > ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 480 * 100% / 1000 ) );
		justify-content : space-between;
		margin-top : calc( 40 var( --remBase ) );
	}
	#contacts h3{
		font-size : 2.4rem;
	}
	#contacts picture{
		width : 100%;
		height : calc( 240 var( --remBase ) );
		margin-top : calc( 20 var( --remBase ) );
	}
	#contacts picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#contacts > ul > li > dl{
		grid-template-columns : calc( 140 * 100% / 480 ) calc( 320 * 100% / 480 );
		margin-top : calc( 12 var( --remBase ) );
	}
	#contacts > ul > li > dl > dt , #contacts > ul > li > dl > dd{
		padding-block : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#contacts li li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
}