@charset "UTF-8";

/* --------------------------------------------
SAFETY
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#safety01{
		min-height : calc( 680 var( --remBase ) );
		padding-bottom : calc( 23.08 var( --remBase ) );
	}
	#safety01::after{
		position : absolute;
		top : calc( 165 var( --remBase ) );
		right : 0;
		z-index : -1;
		display : block;
		width : 100%;
		width : calc( 320 var( --viewportBase ) );
		height : calc( 515 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --color0103 );
		background-repeat : no-repeat;
		background-position : center;
		background-size : contain;
	}
}
@media screen and ( width > 750px ) , print{
	#safety01 .pics p{
		top : calc( 485 var( --remBase ) );
		left : calc( -7 * 100% / 920 );
	}
	#safety01 .pics p img{
		height : calc( 129.81 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#safety02{
		padding-bottom : calc( 80.15 var( --remBase ) );
		margin-top : calc( 7.67 var( --remBase ) );
	}
	#safety02 picture{
		width : calc( 241 var( --percentBase ) );
		margin-inline : auto;
	}
	#safety02 h2{
		margin-top : calc( 16 var( --remBase ) );
	}
	#safety02 p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#safety02{
		display : grid;
		grid-template-rows : 1fr auto calc( 16 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 324 var( --percentBase ) ) calc( 760 var( --percentBase ) ) calc( 36 var( --percentBase ) )  calc( 526 var( --percentBase ) ) 1fr;
		padding-bottom : calc( 94.69 var( --remBase ) );
		margin-top : calc( 36.4 var( --remBase ) );
	}
	#safety02 h2{
		grid-row : 2;
		grid-column : 2;
	}
	#safety02 p{
		grid-row : 4;
		grid-column : 2;
	}
	#safety02 picture{
		grid-row : 1/-1;
		grid-column : 4;
	}
}
@media screen and ( width <= 750px ){
	#safety03{
		margin-bottom : calc( 75 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#safety03{
		margin-bottom : calc( 80 var( --remBase ) );
	}
}

/* --------------------------------------------
ROOM
--------------------------------------------- */
#rooms > li{
	position : relative;
	overflow-x : clip;
}
#rooms > li::before{
	position : absolute;
	z-index : -1;
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-color : var( --color0103 );
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#rooms .head{
	display : grid;
}
#rooms .head h2{
	font-weight : 500;
	line-height : 1.3;
	letter-spacing : .1em;
	color: var( --base );
}
#rooms .head p{
	font-family : "Noto Serif JP";
	font-weight : 500;
	line-height : 1.3;
	letter-spacing : .1em;
}
#rooms .head li{
	display : grid;
	place-items : center;
	font-size : 1.2rem;
	font-weight : 500;
	line-height : 1.3;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#rooms .head .pink{
	background-color : var( --color0102 );
}
#rooms .head .yellow{
	background-color : #d8a742;
}
#rooms .head .blue{
	background-color : #04c4d9;
}
#rooms .description{
	line-height : 2;
}
#rooms .area{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
}
#rooms .area dt{
	display : grid;
	place-items : center;
	color : white;
	background-color : var( --color0102 );
}
#rooms .area dd{
	line-height : 1.5;
}
#rooms .area dd:not( :first-of-type )::before{
	white-space : pre;
	content : "、";
}
#rooms .option{
	display : flex;
	flex-wrap : wrap;
	border-top : solid 1px #d9d9d9;
}
#rooms .option li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	padding-block : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
	line-height : 1.2;
	border-bottom : solid 1px #d9d9d9;
}
#rooms .option li::before{
	display : block;
	width : 100%;
	height : calc( 48 var( --remBase ) );
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#rooms .option li.toilet::before{
	background-image : url( "../images/room/toilet.svg" );
}
#rooms .option li.bath::before{
	background-image : url( "../images/room/bath.svg" );
}
#rooms .option li.bed::before{
	background-image : url( "../images/room/bed.svg" );
}
#rooms .option li.mirror::before{
	background-image : url( "../images/room/mirror.svg" );
}
#rooms .option li.blind::before{
	background-image : url( "../images/room/blind.svg" );
}
#rooms .option li.curtain::before{
	background-image : url( "../images/room/curtain.svg" );
}
#rooms .option li.laundry::before{
	background-image : url( "../images/room/laundry.svg" );
}
#rooms h3{
	margin-top : calc( 16 var( --remBase ) );
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 600;
	line-height : 1.5;
}
#rooms .facility{
	display : flex;
	flex-wrap : wrap;
}
#rooms .gallery{
	display : grid;
}
#rooms .ricoh-theta-tour-image{
	grid-row : 1;
}
#rooms .splide01{
	grid-row : 3;
}
#rooms .splide01 .splide__slide button{
	position : relative;
	width : 100%;
	height : 100%;
}
#rooms .splide01 .splide__slide button::before{
	position : absolute;
	z-index : 1;
	display : block;
	width : 100%;
	width : fit-content;
	aspect-ratio : 1;
	font-size : 0;
	pointer-events : none;
	content : "";
	background-image : url( "../images/ui/icon/search01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#rooms .splide01 .splide__slide img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#rooms .gallery > button{
	position : relative;
	grid-row : 5;
}
#rooms .gallery > button::before{
	position : absolute;
	z-index : 1;
	display : block;
	width : 100%;
	width : fit-content;
	aspect-ratio : 1;
	font-size : 0;
	pointer-events : none;
	content : "";
	background-image : url( "../images/ui/icon/search01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#rooms dl.price {
	display: flex;
	flex-wrap: wrap;
		column-gap: 4em;
		row-gap: 1em; 
}
	#rooms dl.price div {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1em;
		row-gap: 1em; 
		line-height: 1.7;
	}
		#rooms dl.price div dt {
			font-weight: 600;
		}
		#rooms dl.price div dd {
		}
@media screen and ( width <= 750px ){
	#rooms{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#rooms > li::before{
		top : 0;
		left : 0;
		width : 100%;
	}
	#rooms > li:nth-of-type( odd ){
		padding-top : calc( 33 var( --remBase ) );
	}
	#rooms > li:nth-of-type( odd )::before{
		height : calc( 981 var( --remBase ) );
	}
	#rooms > li:nth-of-type( even ){
		padding-top : calc( 28 var( --remBase ) );
	}
	#rooms > li:nth-of-type( even )::before{
		height : calc( 897 var( --remBase ) );
	}
	#rooms > li + li{
		margin-top : calc( 110 var( --remBase ) );
	}
	#rooms .head{
		grid-template-columns : auto auto;
		row-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : space-between;
	}
		.kaga #rooms .head{
			display: flex;
			flex-direction: row;
		}
	#rooms .head h2{
		grid-row : 1;
		grid-column : 1/3;
		font-size : 3.2rem;
	}
	#rooms .head p{
		grid-row : 2;
		grid-column : 1;
		font-size : 2rem;
	}
	#rooms .head ul{
		display : grid;
		grid-row : 2;
		grid-column : 2;
		grid-auto-columns : calc( 140 var( --remBase ) );
		grid-auto-flow : column;
		column-gap : calc( 4 var( --remBase ) );
		justify-content : end;
	}
		.kaga #rooms .head ul{
		}
	#rooms .description{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#rooms .area{
		margin-top : calc( 16 var( --remBase ) );
	}
	#rooms .area dt{
		width : calc( 72 var( --remBase ) );
		height : calc( 37 var( --remBase ) );
		margin-right : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
	#rooms .area dd{
		font-size : 1.4rem;
	}
	#rooms .option{
		column-gap : calc( 16 var( --percentBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#rooms .option :where( .bath , .toilet , .bed , .curtain , .laundry ){
		column-gap : calc( 12 var( --percentBase ) );
		width : calc( 400 var( --percentBase ) );
	}
	#rooms .option :where(  .mirror , .blind ){
		column-gap : calc( 12 * 100% / 176 );
		width : calc( 176 var( --percentBase ) );
	}
	#rooms h3{
		font-size : 1.4rem;
	}
	#rooms .facility{
		column-gap : calc( 8 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#rooms .facility li{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#rooms .gallery{
		grid-template-rows : calc( 416 var( --remBase ) ) calc( 10 var( --remBase ) ) calc( 160 var( --remBase ) ) calc( 10 var( --remBase ) ) auto;
		grid-template-columns : calc( 16 var( --viewportBase ) ) 1fr calc( 16 var( --viewportBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#rooms .ricoh-theta-tour-image{
		grid-column : 2;
	}
	#rooms .splide01{
		grid-column : 2/4;
	}
	#rooms .splide01 button::before{
		bottom : calc( 8 var( --remBase ) );
		right : calc( 8 * 100% / 228 );
		height : calc( 20 var( --remBase ) );
	}
	#rooms .gallery > button{
		grid-column : 2;
	}
	#rooms .gallery > button::before{
		bottom : calc( 8 var( --remBase ) );
		right : calc( 8 var( --percentBase ) );
		height : calc( 20 var( --remBase ) );
	}
	#rooms .gallery > button img{
		width : 100%;
		height : auto;
	}
	#rooms dl.price {
		margin-top:  calc( 12 var( --remBase ) );
	}
	#rooms dl.price {
		column-gap: 0em;
		row-gap:.5em;
	}
	#rooms dl.price div {
		font-size: 1.4rem;
		width: calc(60% - 0em);
	}
	#rooms dl.price div:nth-child(2n) {
		font-size: 1.4rem;
		width: calc(40% - 0em);
	}
		#rooms dl.price div dt {
			width: 3em;
		}
}
@media screen and ( width > 750px ) , print{
	#rooms{
		padding-bottom : calc( 70 var( --remBase ) );
	}
	#rooms > li{
		display : grid;
		grid-template-columns : calc( 760 var( --percentBase ) ) calc( 1080 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
	#rooms > li + li{
		margin-top : calc( 155 var( --remBase ) );
	}
	#rooms > li:nth-of-type( odd )::before{
		top : 0;
		height : calc( 753 var( --remBase ) );
	}
	#rooms > li:nth-of-type( even )::before{
		top : calc( 41 var( --remBase ) );
		height : calc( 718 var( --remBase ) );
	}
	#rooms .info{
		position : sticky;
		top : 0;
		top : var( --headerHeight );
		grid-row : 1;
		grid-column : 1;
	}
	#rooms > li:nth-child( odd ){
		padding-top : calc( 30 var( --remBase ) );
	}
	#rooms > li:nth-child( odd ) .info{
		padding-top : calc( 83 var( --remBase ) );
	}
	#rooms > li:nth-child( even ) .info{
		padding-top : calc( 144 var( --remBase ) );
	}
	#rooms .head{
		grid-template-rows : 1fr auto 1fr;
		grid-template-columns : auto auto 1fr calc( 140 * 100% / 760 );
		align-items : end;
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid calc( 2 var( --remBase ) ) var( --color01 );
	}
	#rooms .head h2{
		grid-row : 2;
		grid-column : 1;
		font-size : 4.6rem;
	}
	#rooms .head p{
		grid-row : 2;
		grid-column : 2;
		padding-bottom : calc( 4.2 var( --remBase ) );
		font-size : 2rem;
	}
	#rooms .head ul{
		grid-row : 1/4;
		grid-column : 4;
	}
	#rooms .head li{
		width : 100%;
	}
	#rooms .head li + li{
		margin-top : calc( 4 var( --remBase ) );
	}
	#rooms .description{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
	}
	#rooms .area{
		margin-top : calc( 29 var( --remBase ) );
	}
	#rooms .area dt{
		width : 5em;
		height : calc( 40 var( --remBase ) );
		margin-right : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
	}
	#rooms .area dd{
		font-size : 2rem;
	}
	#rooms .option{
		column-gap : calc( 16 * 100% / 760 );
		margin-top : calc( 35 var( --remBase ) );
	}
	#rooms .option :where( .toilet , .bed ){
		column-gap : calc( 12 * 100% / 400 );
		width : calc( 400 * 100% / 760 );
	}
	#rooms .option .bath{
		column-gap : calc( 12 * 100% / 344 );
		width : calc( 344 * 100% / 760 );
	}
	#rooms .option .laundry{
		column-gap : calc( 12 * 100% / 344 );
		width : calc( 344 * 100% / 760 );
	}
	#rooms .option :where( .mirror , .blind ){
		column-gap : calc( 12 * 100% / 164 );
		width : calc( 164 * 100% / 760 );
	}
	#rooms .option .curtain{
		column-gap : calc( 12 * 100% / 240 );
		width : calc( 240 * 100% / 760 );
	}
	#rooms h3{
		font-size : 2rem;
	}
	#rooms .facility{
		column-gap : calc( 16 * 100% / 760 );
		margin-top : calc( 12 var( --remBase ) );
	}
	#rooms .facility li{
		font-size : 1.6rem;
		line-height : 1.7;
	}
	#rooms .gallery{
		grid-template-rows : calc( 671 var( --remBase ) ) calc( 14 var( --remBase ) ) calc( 182 var( --remBase ) ) calc( 63 var( --remBase ) ) auto;
		grid-template-columns : 100%;
		grid-row : 1;
		grid-column : 2;
	}
	#rooms .ricoh-theta-tour-image{
		grid-column : 1;
	}
	#rooms .splide01{
		grid-column : 1;
	}
	#rooms .splide01 button::before{
		bottom : calc( 8 var( --remBase ) );
		right : calc( 8 * 100% / 258 );
		height : calc( 24 var( --remBase ) );
	}
	#rooms .gallery > button{
		justify-self : center;
		width : fit-content;
	}
	#rooms .gallery > button::before{
		bottom : calc( 8 var( --remBase ) );
		right : calc( 8 var( --remBase ) );
		height : calc( 24 var( --remBase ) );
	}
	#rooms .gallery > button img{
		height : calc( 405 var( --remBase ) );
	}
	#rooms dl.price div {
		font-size: 1.6rem;
	}

}
@media screen and ( 750px < width < 1960px ) , print{
	#rooms > li::before{
		width : calc( 1595 var( --viewportBase ) );
	}
	#rooms > li:nth-of-type( odd )::before{
		left : calc( -79 var( --viewportBase ) );
	}
	#rooms > li:nth-of-type( even )::before{
		left : 0;
	}
}
@media screen and ( width >= 1960px ){
	#rooms > li::before{
		left : 0;
	}
	#rooms > li:nth-of-type( odd )::before{
		width : calc( 50% + 536px );
	}
	#rooms > li:nth-of-type( even )::before{
		width : calc( 50% + 615px );
	}
}
@media screen and ( 750px < width <= 1200px ) {
	#rooms .head{
		display: flex;
		flex-direction: column;
	}
	#rooms .head li{
		font-size:max(1.2rem,12px) !important;
	}
	#rooms .head ul {
		display: flex;
		flex-direction: row;
		column-gap: 4px;
		
	}
	#rooms .head ul li {
		padding: 2px;
	}
	#rooms .head li + li {
		margin-top : 0px;
	}
}@media screen and ( 1200px < width < 1568px ) {
	#rooms .head{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	#rooms .head li{
		font-size:max(1.4rem,14px) !important;
		width: 300px;
	}	
	#rooms .head ul {
		display: flex;
		flex-direction: row;
		width: 300px;
		column-gap: 4px;
	}
	#rooms .head ul li {
		padding: 2px;
	}
	#rooms .head li + li {
		margin-top : 0px;
	}
}
/* --------------------------------------------
FACILITY
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#facility01 p:nth-of-type( 2 ){
		margin-top : calc( 25.08 var( --remBase ) );
		margin-left : calc( 80.46 var( --percentBase ) );
	}
	#facility01 p:nth-of-type( 2 ) img{
		height : calc( 218.94 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#facility01 p:nth-of-type( 2 ){
		margin-top : calc( 57 var( --remBase ) );
		margin-left : calc( 419.72 * 100% / 920 );
	}
	#facility01 p:nth-of-type( 2 ) img{
		height : calc( 310 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#facility02{
		margin-top : calc( 27.82 var( --remBase ) );
	}
	#facility02 p:nth-of-type( 2 ){
		margin-top : calc( 25.08 var( --remBase ) );
		margin-left : calc( 2 var( --percentBase ) );
	}
	#facility02 p:nth-of-type( 2 ) img{
		height : calc( 212.16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#facility02{
		margin-top : calc( -49.1 var( --remBase ) );
	}
	#facility02 p:nth-of-type( 2 ){
		margin-top : calc( 51 var( --remBase ) );
		margin-left : calc( 200 * 100% / 920 );
	}
	#facility02 p:nth-of-type( 2 ) img{
		height : calc( 296.6 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#facility03{
		margin-top : calc( 49.68 var( --remBase ) );
	}
	#facility03 p:nth-of-type( 2 ){
		margin-top : calc( 25 var( --remBase ) );
		margin-left : calc( 83.61 var( --percentBase ) );
	}
	#facility03 p:nth-of-type( 2 ) img{
		height : calc( 228.94 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#facility03{
		margin-top : calc( 12 var( --remBase ) );
	}
	#facility03 p:nth-of-type( 2 ){
		margin-top : calc( 73 var( --remBase ) );
		margin-left : calc( 420.78 * 100% / 920 );
	}
	#facility03 p:nth-of-type( 2 ) img{
		height : calc( 314.36 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#facility04{
		margin-top : calc( 21.45 var( --remBase ) );
	}
	#facility04 p:nth-of-type( 2 ){
		margin-top : calc( 25.08 var( --remBase ) );
		margin-left : calc( 62 var( --percentBase ) );
	}
	#facility04 p:nth-of-type( 2 ) img{
		height : calc( 236 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#facility04{
		margin-top : calc( 33.64 var( --remBase ) );
	}
	#facility04 p:nth-of-type( 2 ){
		margin-top : calc( 58 var( --remBase ) );
		margin-left : calc( 200 * 100% / 920 );
	}
	#facility04 p:nth-of-type( 2 ) img{
		height : calc( 294.6 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#facility05{
		margin-top : calc( 11 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#facility05{
		margin-top : calc( 92 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#facility06{
		margin-top : calc( 40 var( --remBase ) );
		margin-bottom : calc( 68 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#facility06{
		margin-top : calc( 216 var( --remBase ) );
		margin-bottom : calc( 121 var( --remBase ) );
	}
}

/* --------------------------------------------
RESTAURANT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#restaurantDiscription{
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#restaurantDiscription{
		display : grid;
		grid-template-columns : calc( 161 var( --percentBase ) ) calc( 759 var( --percentBase ) ) calc( 38 var( --percentBase ) ) calc( 758 var( --percentBase ) ) 1fr;
		column-gap : calc( 38 var( --percentBase ) );
		align-items : center;
		padding-top : calc( 78 var( --remBase ) );
		padding-bottom : calc( 54 var( --remBase ) );
	}
	#restaurantDiscription > p{
		grid-row : 1;
		grid-column : 2;
	}
}
#restaurantMenu{
	background-repeat : repeat;
	background-position : 0 0;
}
#restaurantMenu h3{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	line-height : 2;
	color : #f60;
}
#restaurantMenu ul{
	display : grid;
	grid-template-rows : calc( 74 var( --remBase ) );
	justify-content : space-between;
}
#restaurantMenu li , #restaurantMenu a{
	width : 100%;
	height : 100%;
	line-height: 1.3;
}
#restaurantMenu a{
	display : grid;
	grid-auto-flow : row;
	row-gap : calc( 4 var( --remBase ) );
	align-content : center;
	justify-content : center;
	background-color : white;
	filter : drop-shadow( calc( 2 var( --remBase ) ) calc( 2 var( --remBase ) ) 0 #f60 );
}
#restaurantMenu h4{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	#restaurantMenu{
		padding-inline : calc( 16 var( --percentBase ) );
		padding-top : calc( 23 var( --remBase ) );
		padding-bottom : calc( 44 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		background-image : url( "../images/restaurant/bg_menu_sp.webp" );
		background-size : 100% auto;
	}
	#restaurantMenu h3{
		font-size : 2rem;
		text-align : center;
	}
	#restaurantMenu ul{
		grid-template-columns : repeat( 2 , calc( 160 * 100% / 336 ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#restaurantMenu h4{
		font-size : 1.6rem;
	}
	#restaurantMenu {
		font-size : 1.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	#restaurantMenu{
		display : grid;
		grid-template-columns : auto calc( 412 * 100% / 614 );
		grid-row : 1;
		grid-column : 4;
		align-items : center;
		justify-content : space-between;
		height : calc( 120 var( --remBase ) );
		padding-block : calc( 23 var( --remBase ) );
		padding-inline : calc( 62 var( --percentBase ) );
		background-image : url( "../images/restaurant/bg_menu_pc.webp" );
	}
	#restaurantMenu h3{
		font-size : 2.4rem;
	}
	#restaurantMenu ul{
		grid-template-columns : repeat( 2 , calc( 200 * 100% / 412 ) );
	}
	#restaurantMenu h4{
		font-size : 2rem;
	}
	#restaurantMenu {
		font-size : 2.0rem;
	}
}
#restaurant01{
	position : relative;
	overflow-x : clip;
}
#restaurant01 li:nth-child( 2 ){
	position : absolute;
}
@media screen and ( width <= 750px ){
	#restaurant01{
		padding-bottom : calc( 259 var( --remBase ) );
	}
	#restaurant01 li:nth-child( 1 ) img{
		width : 100%;
		height : auto;
	}
	#restaurant01 li:nth-child( 2 ){
		top : calc( 226 var( --remBase ) );
		left : calc( 150 var( --viewportBase ) );
	}
	#restaurant01 li:nth-child( 2 ) img{
		height : calc( 310 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#restaurant01{
		padding-top : calc( 58 var( --remBase ) );
		padding-bottom : calc( 184.68 var( --remBase ) );
	}
	#restaurant01::before{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		width : 100%;
		height : calc( 503 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --color0103 );
	}
	#restaurant01 li:nth-child( 1 ) img{
		height : calc( 532 var( --remBase ) );
	}
	#restaurant01 li:nth-child( 2 ){
		top : calc( 26 var( --remBase ) );
	}
	#restaurant01 li:nth-child( 2 ) img{
		height : calc( 593 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#restaurant01 li:nth-child( 2 ){
		left : calc( 1448 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#restaurant01 li:nth-child( 2 ){
		left : calc( 50% + ( 980px + 468px ) );
	}
}
#restaurant02{
	position : relative;
	overflow : clip;
}
#restaurant02::before{
	position : absolute;
	z-index : -1;
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#restaurant02 .box{
	background-color : var( --color0103 );
}
#restaurant02 .box h3{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 400;
	color : var( --color01 );
}
#restaurant02 .box dl{
	display : grid;
	align-items : baseline;
	justify-content : start;
}
#restaurant02 .box dl > div{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
}
#restaurant02 .box dt{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 4 var( --remBase ) );
	align-items : baseline;
	justify-content : start;
}
#restaurant02 .box dt::before{
	color : var( --color0102 );
	content : "◆";
}
@media screen and ( width <= 750px ){
	#restaurant02{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#restaurant02 > h2{
		margin-top : calc( 8 var( --remBase ) );
	}
	#restaurant02 > p{
		margin-top : calc( 8 var( --remBase ) );
	}

	#restaurant02 .box{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#restaurant02 .box h3{
		font-size : 1.5rem;
		line-height : 1.5;
	}
	#restaurant02 .box dl{
		grid-template-columns : auto 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 16 * 100% / 336 );
		margin-top : calc( 8 var( --remBase ) );
	}
	#restaurant02 .box dt , #restaurant02 .box dd{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#restaurant02 .box p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#restaurant02{
		display : grid;
		grid-template-rows : calc( 56 var( --remBase ) ) auto calc( 16 var( --remBase ) ) auto calc( 16 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 160 var( --percentBase ) ) calc( 650 var( --percentBase ) ) calc( 110 var( --percentBase ) ) calc( 38 var( --percentBase ) ) calc( 920 var( --percentBase ) );
		padding-bottom : calc( 78 var( --remBase ) );
	}
	#restaurant02::before{
		top : calc( -191 var( --remBase ) );
		height : calc( 862 var( --remBase ) );
		background-image : url( "../images/restaurant/parts_pc.webp" );
	}
	#restaurant02 > picture{
		grid-row : 1/8;
		grid-column : 5;
	}
	#restaurant02 > h2{
		grid-row : 2;
		grid-column : 2/4;
	}
	#restaurant02 > p{
		grid-row : 4;
		grid-column : 2/4;
	}
	#restaurant02 .box{
		grid-row : 6;
		grid-column : 2;
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 650 );
	}
	#restaurant02 .box h3{
		font-size : 2.6rem;
	}
	#restaurant02 .box dl{
		display: flex;
		flex-wrap: wrap;
		column-gap : calc( 16 * 100% / 336 );
		row-gap : calc( 8 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		line-height: 1.5;
	}
	#restaurant02 .box dl div{
		white-space: nowrap;
	}
	#restaurant02 .box dt , #restaurant02 .box dd{
		font-size : 2rem;
	}
	#restaurant02 .box p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#restaurant02::before{
		left : calc( -151 var( --viewportBase ) );
		width : calc( 1150 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#restaurant02::before{
		left : calc( 50% + ( -980px + -151px ) );
	}
}




@media screen and ( width <= 750px ){
	#restaurant03{
		padding-bottom : calc( 53 var( --remBase ) );
	}
	#restaurant03::before{
		top : calc( 45.08 var( --remBase ) );
		height : calc( 449 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#restaurant04{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#restaurant04 > picture{
		width : calc( 241 var( --percentBase ) );
		margin-inline : auto;
	}
	#restaurant04 h2{
		margin-top : calc( 16 var( --remBase ) );
	}
	#restaurant04 p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#restaurant04{
		display : grid;
		grid-template-rows : 1fr auto calc( 16 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 701 var( --percentBase ) ) calc( 600 var( --percentBase ) ) calc( 16 var( --percentBase ) ) calc( 443 var( --percentBase ) ) 1fr;
		padding-bottom : calc( 34 var( --remBase ) );
		margin-top : calc( -41 var( --remBase ) );
	}
	#restaurant04 h2{
		grid-row : 2;
		grid-column : 2;
	}
	#restaurant04 p{
		grid-row : 4;
		grid-column : 2;
	}
	#restaurant04 picture{
		grid-row : 1/6;
		grid-column : 4;
	}
}

/* --------------------------------------------
EVENT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#event01{
		padding-bottom : calc( 108 var( --remBase ) );
	}
	#event01 p:nth-of-type( 2 ){
		margin-top : calc( 24 var( --remBase ) );
		margin-left : calc( 83.27 var( --percentBase ) );
	}
	#event01 p:nth-of-type( 2 ) img{
		height : calc( 257.5 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#event01 p:nth-of-type( 2 ){
		margin-top : calc( 39 var( --remBase ) );
		margin-left : calc( 41.38 * 100% / 920 );
	}
	#event01 p:nth-of-type( 2 ) img{
		height : calc( 314 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#event02 p:nth-of-type( 2 ){
		margin-top : calc( 7 var( --remBase ) );
		margin-left : calc( -10 var( --percentBase ) );
	}
	#event02 p:nth-of-type( 2 ) img{
		height : calc( 266.5 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#event02{
		margin-top : calc( -26 var( --remBase ) );
	}
	#event02 p:nth-of-type( 2 ){
		margin-top : calc( 47 var( --remBase ) );
		margin-left : calc( 160 * 100% / 920 );
	}
	#event02 p:nth-of-type( 2 ) img{
		height : calc( 400 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#event03{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#event03 p:nth-of-type( 2 ){
		margin-top : calc( 20 var( --remBase ) );
		margin-left : calc( 59 var( --percentBase ) );
	}
	#event03 p:nth-of-type( 2 ) img{
		height : calc( 222 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#event03{
		padding-bottom : calc( 158 var( --remBase ) );
	}
	#event03 p:nth-of-type( 2 ){
		margin-top : calc( 78 var( --remBase ) );
		margin-left : calc( 407.02 * 100% / 920 );
	}
	#event03 p:nth-of-type( 2 ) img{
		height : calc( 319 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#event04{
		margin-bottom : calc( 80 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#event04{
		margin-bottom : calc( 153 var( --remBase ) );
	}
}

/* --------------------------------------------
ACCESS
--------------------------------------------- */
#access01{
	position : relative;
	overflow-x : clip;
}
#access01 dl{
	display : grid;
	align-items : start;
	justify-content : start;
}
@media screen and ( width <= 750px ){
	#access01{
		padding-bottom : calc( 120 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#access01 .pics{
		margin-left : calc( 16 var( --percentBase ) );
	}
	#access01 .pics picture img{
		height : calc( 618 var( --remBase ) );
	}
	#access01 .pics + div{
		margin-top : calc( 52 var( --remBase ) );
	}
	#access01 dl{
		grid-template-columns : calc( 238 var( --percentBase ) ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 16 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#access01 dl + h2{
		margin-top : calc( 69 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#access01{
		display : grid;
		grid-template-columns : calc( 1240 var( --percentBase ) ) 1fr;
		column-gap : calc( 40 var( --percentBase ) );
		align-items : start;
		padding-bottom : calc( 120 var( --remBase ) );
		margin-top : calc( 39 var( --remBase ) );
	}
	#access01::before{
		position : absolute;
		top : calc( 152 var( --remBase ) );
		z-index : -1;
		display : block;
		width : 100%;
		height : calc( 814 var( --remBase ) );
		font-size : 0;
		content : "";
		background-image : url( "../images/access/bg_pc.svg" );
		background-repeat : no-repeat;
		background-position : center;
		background-size : contain;
	}
	#access01 .pics{
		grid-row : 1;
		grid-column : 1;
	}
	#access01 .pics img{
		width : 100%;
		height : auto;
	}
	#access01 .pics + div{
		grid-row : 1;
		grid-column : 2;
		padding-top : calc( 121 var( --remBase ) );
	}
	#access01 .pics + div dl{
		grid-template-columns : calc( 320 * 100% / 600 ) 1fr;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 24 * 100% / 600 );
		margin-top : calc( 16 var( --remBase ) );
	}
	#access01 .pics + div dl + h2{
		margin-top : calc( 169 var( --remBase ) );
	}
	#access01 p{
		margin-top : calc( 169 var( --remBase ) );
		margin-left : calc( 120 * 100% / 600 );
	}
	#access01 p img{
		height : calc( 321 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#access01::before{
		left : calc( 1158 var( --viewportBase ) );
		width : calc( 931 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#access01::before{
		left : calc( 50% + 178px );
		width : 931px;
	}
}
@media screen and ( width <= 750px ){
	#access02{
		margin-bottom : calc( 88 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#access02{
		margin-bottom : calc( 80 var( --remBase ) );
	}
}

/* --------------------------------------------
PRICE
--------------------------------------------- */
#prices h2{
	display : grid;
	place-items : center;
	line-height : 1.3;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --color01 );
}
@media screen and ( width <= 750px ){
	#prices{
		padding-bottom : calc( 71 var( --remBase ) );
	}
	#prices > * + *{
		margin-top : calc( 40 var( --remBase ) );
	}
	#prices h2{
		height : calc( 74 var( --remBase ) );
		font-size : 3.2rem;
	}
}
@media screen and ( width > 750px ) , print{
	#prices{
		display : grid;
		grid-template-columns : calc( 478 var( --percentBase ) ) calc( 122 var( --percentBase ) ) calc( 40 var( --percentBase ) ) calc( 280 var( --percentBase ) ) calc( 40 var( --percentBase ) ) calc( 280 var( --percentBase ) ) calc( 40 var( --percentBase ) )  calc( 122 var( --percentBase ) ) calc( 478 var( --percentBase ) );
		justify-content : space-between;
		padding-bottom : calc( 88 var( --remBase ) );
	}
	#prices h2{
		height : calc( 120 var( --remBase ) );
		font-size : 4.8rem;
	}
}
:where( #price01 , #price02 ) > dl{
	display : grid;
}
:where( #price01 , #price02 ) > dl > div{
	display : grid;
	height : 100%;
}
:where( #price01 , #price02 ) > dl dt{
	display : grid;
	place-items : center;
	color : white;
	background-color : var( --color01 );
}
:where( #price01 , #price02 ) > dl dd{
	align-self : center;
}
:where( #price01 , #price02 ) li{
	display : grid;
	align-items : start;
	justify-content : start;
	counter-increment : no;
}
:where( #price01 , #price02 ) li dl , :where( #price01 , #price02 ) li dt , :where( #price01 , #price02 ) li dd{
	display : inline;
}
:where( #price01 , #price02 ) li dd + dt::before{
	content : "、";
}
:where( #price01 , #price02 ) li::before{
	white-space : pre;
	content : counter( no ) ". ";
}
@media screen and ( width <= 750px ){
	:where( #price01 , #price02 ) h2{
		margin-bottom : calc( 13 var( --remBase ) );
	}
	:where( #price01 , #price02 ) > dl{
		grid-template-columns : repeat( 2 , calc( 176 var( --percentBase ) ) );
		grid-auto-rows : calc( 32 var( --remBase ) );
		row-gap : calc( 16 var( --remBase ) );
		justify-content : space-between;
	}
	:where( #price01 , #price02 ) > dl > div{
		grid-template-columns : calc( 72 * 100% / 176 ) 1fr;
		column-gap : calc( 8 * 100% / 176 );
	}
	:where( #price01 , #price02 ) > dl dt , :where( #price01 , #price02 ) > dl dd{
		font-size : 1.4rem;
		line-height : 1.7;
	}
	:where( #price01 , #price02 ) > p{
		font-size : 1.4rem;
		line-height : 1.7;
	}
	:where( #price01 , #price02 ) ul{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #price01 , #price02 ) li{
		grid-template-columns : auto auto;
		font-size : 1.4rem;
		line-height : 2;
	}
}
@media screen and ( width > 750px ) , print{
	:where( #price01 , #price02 ){
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
	}
	:where( #price01 , #price02 ) h2{
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( var( --percentBase ) );
		margin-bottom : calc( 32 var( --remBase ) );
	}
	:where( #price01 , #price02 ) > dl{
		grid-template-rows : calc( 46 var( --remBase ) );
		grid-template-columns : repeat( 4 , 25% );
		align-self : center;
		padding-inline : calc( 30 * 100% / 920 );
	}
	:where( #price01 , #price02 ) > dl > div{
		grid-template-columns : calc( 96 * 100% / 215 ) 1fr;
		column-gap : calc( 8 * 100% / 215 );
	}
	:where( #price01 , #price02 ) > dl dt , :where( #price01 , #price02 ) > dl dd{
		font-size : 2rem;
		line-height : 1.5;
	}
	:where( #price01 , #price02 ) > p{
		align-self : center;
		font-size : 2rem;
		line-height : 1.7;
	}
	:where( #price01 , #price02 ) ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	:where( #price01 , #price02 ) li{
		grid-template-columns : calc( 30 * 100% / 920 ) auto;
		font-size : 2rem;
		line-height : 2;
	}
}
@media screen and ( width > 750px ) , print{
	#price01{
		grid-column : 1/5;
	}
}
@media screen and ( width > 750px ) , print{
	#price02{
		grid-column : 6/10;
	}
}
#price03 h2 + p{
	margin-top : calc( 16 var( --remBase ) );
}
#price03 > p{
	line-height : 2;
}
#price03 .type h3{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 400;
}
#price03 .type li{
	display : grid;
	align-items : center;
	justify-content : start;
}
#price03 .type h4{
	display : grid;
	place-items : center;
	font-family : "Noto Sans JP" , sans-serif;
}
#price03 .type h4[title="Renovation"]{
	background-color : #04c4d9;
}
#price03 .type h4[title="Standard"]{
	background-color : #d8a742;
}
#price03 .cost{
	background-color : var( --color0103 );
}
#price03 .cost h3{
	font-family : "Noto Sans JP" , sans-serif;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#price03 > p{
		font-size : 1.4rem;
	}
	#price03 #priceTables{
		margin-top : calc( 18 var( --remBase ) );
	}
	#price03 .type{
		margin-top : calc( 6 var( --remBase ) );
	}
	#price03 .type h3{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#price03 .type ol{
		margin-top : calc( 8 var( --remBase ) );
	}
	#price03 .type li{
		grid-template-columns : calc( 32 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
	#price03 .type li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#price03 .type h4{
		height : calc( 21 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#price03 .type p{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#price03 .cost{
		padding-block : calc( 24 var( --remBase ) );
		margin-top : calc( 31 var( --remBase ) );
	}
	#price03 .cost h3{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#price03 .cost h3 span{
		display : block;
		margin-top : calc( 8 var( --remBase ) );
		text-align : center;
	}
	#price03 .cost dl{
		margin-top : calc( 8 var( --remBase ) );
	}
	#price03 .cost dl div{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : center;
	}
	#price03 .cost dt , #price03 .cost dd{
		font-size : 1.4rem;
		line-height : 1.5;
	}
}
@media screen and ( width > 750px ) , print{
	#price03{
		grid-row : 4;
		grid-column : 1/-1;
		margin-top : calc( 89 var( --remBase ) );
	}
	#price03 > p{
		font-size : 2rem;
		text-align : center;
	}
	#price03 #priceTables{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 920 var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 42 var( --remBase ) );
	}
	#price03 .type{
		display : grid;
		grid-template-columns : calc( 160 var( --percentBase ) ) 1fr;
		column-gap : calc( var( --percentBase ) );
		align-items : center;
		justify-content : start;
		margin-top : calc( 24 var( --remBase ) );
	}
	#price03 .type h3{
		font-size : 2rem;
		line-height : 2;
	}
	#price03 .type ol{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 8 * 100% / 1720 );
		justify-content : start;
	}
	#price03 .type li{
		grid-template-columns : calc( 50 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
	}
	#price03 .type h4{
		height : calc( 21 var( --remBase ) );
		font-size : 1.4rem;
	}
	#price03 .type p{
		font-size : 2rem;
		line-height : 2;
	}
	#price03 .cost{
		width : calc( 1240 var( --percentBase ) );
		padding-block : calc( 24 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 40 var( --remBase ) );
	}
	#price03 .cost h3{
		font-size : 2rem;
		line-height : 2;
	}
	#price03 .cost dl{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 20 var( --percentBase ) );
		align-items : center;
		justify-content : center;
	}
	#price03 .cost dl > div{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : center;
	}
	#price03 .cost dt , #price03 .cost dd{
		font-size : 2rem;
		line-height : 2;
	}
}
@media screen and ( width <= 750px ){
	#priceTablist{
		display : grid;
		grid-template-columns : repeat( 2 , 50% );
		grid-auto-rows : calc( 40 var( --remBase ) );
		margin-top : calc( 18 var( --remBase ) );
	}
	#priceTablist li{
		height : 100%;
	}
	#priceTablist button{
		display : grid;
		place-items : center;
		width : 100%;
		height : 100%;
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#priceTablist button[aria-selected="true"]{
		color : white;
		background-color : var( --color01 );
	}
	#priceTablist button[aria-selected="false"]{
		color : var( --base );
		background-color : #f1f2ed;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#priceTablist button{
		transition : background-color var( --transitionBase ) , color var( --transitionBase ) ;
	}
}
#priceTables table , #priceTables thead , #priceTables tbody{
	display : block;
}
#priceTables caption{
	display : grid;
	grid-template-columns : 1fr auto 1fr;
	align-items : center;
	width : 100%;
	font-size : 2.4rem;
	line-height : 1.3;
	color : var( --color01 );
}
#priceTables caption::before , #priceTables caption::after{
	width : 100%;
	height : 1px;
	font-size : 0;
	content : "";
	background-color : currentColor;
}
#priceTables tr{
	display : grid;
}
#priceTables th{
	font-weight : 400;
}
#priceTables thead{
	margin-top : calc( 24 var( --remBase ) );
}
#priceTables thead th{
	display : grid;
	align-items : center;
	background-color : #e0e0e0;
}
#priceTables thead th:nth-of-type( 1 ){
	grid-column : 1;
}
#priceTables thead th:nth-of-type( 2 ){
	grid-column : 2;
	text-align : right;
}
#priceTables thead th:nth-of-type( 3 ){
	grid-column : 4;
}
#priceTables thead th:nth-of-type( 4 ){
	grid-column : 6;
}
#priceTables thead th:nth-of-type( 5 ){
	grid-column : 8;
}
#priceTables thead th:nth-of-type( 6 ){
	grid-column : 10;
}
#priceTables thead th:nth-of-type( n+3 ){
	justify-content : center;
}
#priceTables tbody th , #priceTables tbody td{
	align-self : center;
}
#priceTables tbody th:nth-of-type( 1 ){
	grid-column : 2;
}
#priceTables tbody th:nth-of-type( 2 ){
	grid-column : 3;
	align-self : center;
}
#priceTables tbody th:nth-of-type( 2 ) abbr{
	display : grid;
	place-items : center;
	-webkit-text-decoration : none;
	text-decoration : none;
}
#priceTables tbody td{
	text-align : center;
}
#priceTables tbody td:nth-of-type( 1 ){
	grid-column : 6;
}
#priceTables tbody td:nth-of-type( 2 ){
	grid-column : 8;
}
#priceTables tbody td:nth-of-type( 3 ){
	grid-column : 10;
}
#priceTables tbody td:nth-of-type( 4 ){
	grid-column : 12;
}
#priceTables tbody tr:nth-of-type( even ){
	background-color : var( --color0103 );
}
#priceTables abbr[title^="Renovation"]{
	background-color : var( --categoryColor03 );
}
#priceTables abbr[title^="Single"]{
	background-color : #d8a742;
}
@media screen and ( width <= 750px ){
	#priceTables{
		margin-top : calc( 13 var( --remBase ) );
	}
	#priceTables caption{
		column-gap : calc( 40 var( --percentBase ) );
		font-weight : 500;
	}
	#priceTables thead tr{
		grid-template-columns : 1fr auto repeat( 4 , calc( 8 var( --percentBase ) ) calc( 64 var( --percentBase ) ) );
		grid-auto-rows : calc( 32 var( --remBase ) );
	}
	#priceTables thead th:not( :nth-of-type( 2 ) ){
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#priceTables thead th:nth-of-type( 1 ){
		padding-left : calc( 8 var( --remBase ) );
	}
	#priceTables thead th:nth-of-type( 2 ){
		padding-right : calc( 8 var( --remBase ) );
		font-size : 1rem;
		line-height : 1.5;
	}
	#priceTables tbody{
		margin-top : calc( 8 var( --remBase ) );
	}
	#priceTables tbody tr{
		grid-template-columns : calc( 4 var( --percentBase ) ) 1fr calc( 24 var( --percentBase ) ) 0 repeat( 4 , calc( 8 var( --percentBase ) ) calc( 64 var( --percentBase ) ) );
		padding-block : calc( 8 var( --remBase ) );
	}
	#priceTables tbody th , #priceTables tbody td{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#priceTables tbody th:nth-of-type( 2 ){
		height : calc( 21 var( --remBase ) );
	}
	#priceTables p{
		margin-top : calc( 13 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.7;
	}
}
@media screen and ( width > 750px ) , print{
	#priceTables caption{
		column-gap : calc( 40 * 100% / 920 );
		font-size : 2.4rem;
		font-weight : 600;
	}
	#priceTables thead tr{
		grid-template-columns : 1fr auto repeat( 4 , calc( 24 * 100% / 920 ) calc( 166 * 100% / 920 ) );
		grid-auto-rows : calc( 38 var( --remBase ) );
	}
	#priceTables thead th{
		line-height : 1.5;
	}
	#priceTables thead th:not( :nth-of-type( 2 ) ){
		font-size : 2rem;
	}
	#priceTables thead th:nth-of-type( 1 ){
		padding-left : calc( 8 var( --remBase ) );
	}
	#priceTables thead th:nth-of-type( 2 ){
		padding-right : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
	}
	#priceTables tbody{
		margin-top : calc( 8 var( --remBase ) );
	}
	#priceTables tbody tr{
		grid-template-columns : calc( 8 * 100% / 920 ) 1fr calc( 50 * 100% / 920 ) calc( 8 * 100% / 920 ) repeat( 4 , calc( 24 * 100% / 920 ) calc( 166 * 100% / 920 ) );
		padding-block : calc( 16 var( --remBase ) );
	}
	#priceTables tbody th , #priceTables tbody td{
		line-height : 1.5;
	}
	#priceTables tbody th:nth-of-type( 1 ){
		font-size : 2rem;
	}
	#priceTables tbody th:nth-of-type( 2 ){
		height : calc( 21 var( --remBase ) );
		font-size : 1.4rem;
	}
	#priceTables tbody td{
		font-size : 2rem;
	}
	#priceTables p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
		text-align : center;
	}
}
:where( #price04 , #price05 , #price06 , #price07, #price08, #price09 ) h2{
	margin-bottom : calc( 16 var( --remBase ) );
}
:where( #price04 , #price05 , #price06 , #price07, #price08, #price09 ) p , :where( #price04 , #price05 , #price06 , #price07, #price08, #price09 ) ul , :where( #price04 , #price05 , #price06 , #price07, #price08, #price09 ) li , :where( #price04 , #price05 , #price06 , #price07, #price08, #price09 ) dl , :where( #price04 , #price05 , #price06 , #price07, #price08, #price09 ) dt , :where( #price04 , #price05 , #price06 , #price07, #price08, #price09 ) dd{
	font-size : 1.4rem;
	line-height : 2;
}
@media screen and ( width <= 750px ){
	:where( #price04 , #price05 , #price06 , #price07, #price08, #price09 ){
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #price04 , #price05 , #price06, #price08, #price09 ){
		grid-row : 5;
		margin-top : calc( 80 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#price04{
		grid-column : 1/3;
	}
	#price04 p{
		font-size : 2rem;
	}
	#price04 p:nth-of-type( 1 ){
		line-height : 1.7;
	}
	#price04 p:nth-of-type( 2 ){
		margin-top : calc( 24 var( --remBase ) );
		line-height : 2;
	}
}
#price05 dl{
	margin-top : calc( 24 var( --remBase ) );
}
#price05 dl > div{
	font-size : 0;
}
#price05 dt::before{
	content : "・";
}
#price05 dt , #price05 dd , #price05 ul , #price05 li{
	display : inline;
	line-height : 2;
}
#price05 li + li::before{
	content : "、";
}
@media screen and ( width <= 750px ){
	#price05 dt , #price05 dd , #price05 ul , #price05 li{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#price05{
		grid-column : 4/7;
	}
	#price05 p{
		font-size : 2rem;
	}
	#price05 p:nth-of-type( 1 ){
		line-height : 1.7;
	}
	#price05 p:nth-of-type( 2 ){
		line-height : 2;
	}
	#price05 dt , #price05 dd , #price05 ul , #price05 li{
		font-size : 2rem;
	}
}
#price06 dl{
	display : grid;
}
@media screen and ( width <= 750px ){
	#price06 dl{
		grid-template-columns : auto auto;
	}
}
@media screen and ( width > 750px ) , print{
	#price06{
		grid-column : 8/10;
	}
	#price06 dl{
		display : grid;
		grid-template-columns : calc( 320 * 100% / 600 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
	}
	#price06 dt , #price06 dd{
		font-size : 2rem;
		line-height : 1.7;
	}
}
#price07 > dl{
	display : grid;
}
#price07 dl dl{
	display : grid;
	grid-template-columns : auto auto;
	justify-content : start;
}
#price07 dl dl dd::before{
	content : "…";
}
@media screen and ( width <= 750px ){
	#price07 > dl{
		grid-template-columns : auto auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#price07{
		grid-row : 6;
		grid-column : 2/9;
		margin-top : calc( 40 var( --remBase ) );
	}
	#price07 p{
		font-size : 2rem;
		line-height : 2;
	}
	#price07 > dl{
		grid-template-columns : calc( 160 * 100% / 924 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#price07 dt , #price07 dd{
		font-size : 2rem;
		line-height : 1.7;
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow01 {
	position: relative;
}
	#flow01 .goukakumae {
		text-align: center;
		margin-bottom: 2em;
	}
	#flow01 .goukakumae-txt {
		text-align: right;
	}
		#flow01 .goukakumae-txt a {
			display: inline-block;
			padding: 1em 2em;
			color: #fff;
			background: #EF7A00;
		}

#flow01 > ol > li:not( :last-child ){
	counter-increment : no;
}
#flow01 h2{
	display : grid;
	align-items : center;
	line-height : 1.3;
	color : white;
	background-color : var( --color01 );
}
#flow01 h2::before{
	display : grid;
	align-content : center;
	justify-content : center;
	height : 100%;
	content : counter( no );
	background-color : var( --color0102 );
}
#flow01 p , #flow01 li li , #flow01 th , #flow01 td{
	line-height : 2;
}
#flow01 table{
	display : block;
	border : solid 1px var( --color01 );
}
#flow01 tbody{
	display : block;
}
#flow01 th , #flow01 td{
	display : block;
	font-weight : 400;
}
#flow01 h3{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	line-height : 1.3;
	color : var( --color01 );
}
#flow01 ol :where( ol , ul ) li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
}
#flow01 ol ol > li{
	column-gap : .5em;
	counter-increment : no02;
}
#flow01 ol ol > li::before{
	content : counter( no02 ) ".";
}
#flow01 > ol > li:last-child p{
	line-height : 1.3;
	color : var( --color01 );
}
#flow01 > ol > li:last-child p::after{
	background-image : url( "../images/flow/cat.svg" );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#flow01 .goukakumae {
		img {
			width: 100%;
		}
	}
	#flow01 .goukakumae-txt {
		margin-bottom: 1em;
	}
		#flow01 .goukakumae-txt a {
			font-size: 1.6rem;
		}
	#flow01{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 50 var( --remBase ) );
	}
	#flow01 > ol > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#flow01 h2{
		grid-template-rows : calc( 74 var( --remBase ) );
		grid-template-columns : calc( 74 var( --percentBase ) ) 1fr;
		column-gap : calc( 16 var( --percentBase ) );
		margin-bottom : calc( 16 var( --remBase ) );
		font-size : 3.2rem;
	}
	#flow01 p , #flow01 li li , #flow01 th , #flow01 td{
		font-size : 1.4rem;
	}
	#flow01 table{
		padding-block : calc( ( 8 var( --remBase ) ) - 1px );
		padding-inline : calc( ( 8 var( --percentBase ) ) - 1px );
		margin-top : calc( 8 var( --remBase ) );
	}
	#flow01 tr{
		display : flex;
		flex-wrap : wrap;
		column-gap : calc( 14 * 100% / 336 );
	}
	#flow01 tr th , #flow01 tr td:first-of-type{
		order : 1;
	}
	#flow01 tr::before{
		display : block;
		order : 2;
		width : 100%;
		content : "";
	}
	#flow01 tr td:not( :first-of-type ){
		order : 3;
	}
	#flow01 ol :where( ol , ul ){
		margin-top : calc( 8 var( --remBase ) );
	}
	#flow01 h3{
		margin-top : calc( 32 var( --remBase ) );
		font-size : 2.4rem;
	}
	#flow01 > ol > li:last-child p{
		font-size : 2.4rem;
		font-weight : 500;
		text-align : center;
	}
	#flow01 > ol > li:last-child p::after{
		display : block;
		width : calc( 112.14 var( --percentBase ) );
		height : calc( 146.64 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 24 var( --remBase ) );
		font-size : 0;
		content : "";
	}
}
@media screen and ( width > 750px ) , print{
	#flow01 .goukakumae {
		img {
			calc( 400 var( --remBase ) );
		}
	}
	#flow01 .goukakumae-txt {
		padding: 0 calc( 160 var( --percentBase ) )  2em calc( 160 var( --percentBase ) ) ;
	}
		#flow01 .goukakumae-txt a {
			font-size: 2.4rem;
		}
	#flow01{
		padding-top : calc( 78 var( --remBase ) );
		padding-bottom : calc( 126 var( --remBase ) );
	}
	#flow01 > ol{
		padding-inline : calc( 160 var( --percentBase ) );
	}
	#flow01 > ol > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#flow01 h2{
		grid-template-rows : calc( 120 var( --remBase ) );
		grid-template-columns : calc( 120 * 100% / 1560 ) 1fr;
		column-gap : calc( 43 * 100% / 1560 );
		margin-bottom : calc( 24 var( --remBase ) );
		font-size : 4.8rem;
		line-height : 1.3;
	}
	#flow01 p , #flow01 li li , #flow01 th , #flow01 td{
		font-size : 2rem;
	}
	#flow01 table{
		padding-block : calc( ( 16 var( --remBase ) ) - 1px );
		padding-inline : calc( ( 16 * 100% / 1560 ) - 1px );
		margin-top : calc( 24 var( --remBase ) );
	}
	#flow01 tr{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 20 * 100% / 1528 );
		justify-content : start;
	}
	#flow01 ol :where( ol , ul ){
		margin-top : calc( 24 var( --remBase ) );
	}
	#flow01 h3{
		margin-top : calc( 40 var( --remBase ) );
		font-size : 3.2rem;
		line-height : 1.3;
	}
	#flow01 > ol > li:last-child p{
		display : grid;
		grid-template-columns : calc( 112.14 * 100% / 1560 ) auto calc( 112.14 * 100% / 1560 );
		column-gap : calc( 55 * 100% / 1560 );
		align-items : center;
		justify-content : center;
		font-size : 3.2rem;
		font-weight : 700;
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
	}
	#flow01 > ol > li:last-child p::before , #flow01 > ol > li:last-child p::after{
		height : calc( 146.64 var( --remBase ) );
		font-size : 0;
		content : "";
	}
}

/* --------------------------------------------
SCHOOL
--------------------------------------------- */
#shcoolTablist{
	display : grid;
	justify-content : center;
}
#shcoolTablist h2 , #shcoolTablist button{
	width : 100%;
	height : 100%;
}
#shcoolTablist button{
	display : grid;
	place-items : center;
	font-family : "Noto Sans JP" , sans-serif;
}
#shcoolTablist button[aria-selected="true"]{
	color : white;
	background-color : var( --color01 );
}
#shcoolTablist button[aria-selected="false"]{
	color : var( --base );
	background-color : #f1f2ed;
}
@media screen and ( width <= 750px ){
	#shcoolTablist{
		grid-template-columns : repeat( 2 , 50% );
		grid-auto-rows : calc( 40 var( --remBase ) );
		padding-block : calc( 24 var( --remBase ) );
	}
	#shcoolTablist button{
		font-size : 1.4rem;
		line-height : 1.7;
	}
}
@media screen and ( width > 750px ) , print{
	#shcoolTablist{
		grid-template-columns : repeat( 2 , calc( 520 var( --percentBase ) ) );
		grid-auto-rows : calc( 80 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#shcoolTablist button{
		font-size : 2.4rem;
		line-height : 2;
	}
}
@media ( hover : hover ){
	#shcoolTablist button[aria-selected="false"]:hover{
		color : white;
		background-color : var( --color01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#shcoolTablist button{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
	}
}
#school01 .links{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
}
#school01 .links a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	line-height : 2;
}
#school01 .links a::before{
	color : var( --color01 );
	content : "▼";
}
#school01 p{
	line-height : 1.5;
	text-align : center;
}
#school01 h2{
	display : grid;
	place-items : center;
	line-height : 1.3;
	color : white;
	background-color : var( --color01 );
}
#school01 dl > div{
	padding-block : calc( 16 var( --remBase ) );
	border-bottom : solid 1px #d9d9d9;
}
#school01 dt a{
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
	#school01 dt a span.sp_none{
		display: none;
	}
#school01 dd > div{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
}
#school01 dd > div::before{
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#school01 dd > div.walk::before{
	background-image : url( "../images/school/walk.svg" );
}
#school01 dd > div.bike::before{
	background-image : url( "../images/school/bike.svg" );
}
#school01 dd > div.train::before{
	background-image : url( "../images/school/train.svg" );
}
#school01 dd > div.bus::before{
	background-image : url( "../images/school/bus.svg" );
}
#school01 dd > div.bt::before{
	background-image : url( "../images/school/bt.svg" );
}
#school01 dd > div + div{
	margin-top : calc( 8 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#school01{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#school01 .links{
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
	}
	#school01 .links > li:nth-child( -n+5 ){
		order : 1;
	}
	#school01 .links::before{
		display : block;
		order : 2;
		width : 100%;
		content : "";
	}
	#school01 .links > li:nth-child( n+6 ){
		order : 3;
	}
	#school01 .links a{
		font-size : 1.6rem;
	}
	#school01 p{
		margin-top : calc( 16 var( --remBase ) );
		margin-bottom : calc( 40 var( --remBase ) );
		font-size : 1.4rem;
	}
	#school01 h2{
		height : calc( 74 var( --remBase ) );
		font-size : 3.2rem;
	}
	#school01 dt{
		font-size : 1.6rem;
		font-weight : 600;
		line-height : 1.5;
	}
	#school01 dd{
		padding-left : calc( 24 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#school01 dd > div{
		column-gap : calc( 8 * 100% / 344 );
	}
	#school01 dd > div::before{
		height : calc( 30 var( --remBase ) );
		aspect-ratio : 40/30;
	}
}
@media screen and ( width > 750px ) , print{
	#school01{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#school01 .links{
		column-gap : calc( 16 var( --percentBase ) );
	}
	#school01 .links a{
		font-size : 2.4rem;
	}
	#school01 p{
		margin-top : calc( 40 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
		font-size : 2rem;
	}
	#school01 :where( h2 , dl ){
		width : calc( 1560 var( --percentBase ) );
		margin-inline : auto;
	}
	#school01 h2{
		height : calc( 120 var( --remBase ) );
		font-size : 4.8rem;
	}
	#school01 dl + h2{
		margin-top : calc( 80 var( --remBase ) );
	}
	#school01 dl{
		margin-top : calc( 8 var( --remBase ) );
	}
	#school01 dl > div{
		display : grid;
		grid-template-columns : calc( 440 * 100% / 1560 ) 1fr;
		column-gap : calc( 40 * 100% / 1560 );
	}
	#school01 dt{
		align-self : center;
		font-size : 2rem;
		line-height : 1.5;
	}
	#school01 dd > div{
		column-gap : calc( 8 * 100% / 1080 );
		font-size : 2rem;
		line-height : 1.5;
	}
	#school01 dd > div::before{
		height : calc( 40 var( --remBase ) );
		aspect-ratio : 53.33/40;
	}
}

/* --------------------------------------------
APPLY
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#apply-ledes{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#apply-ledes p{
		font-size : 1.4rem;
		line-height : 2;
	}
}
@media screen and ( width > 750px ) , print{
	#apply-ledes{
		padding-block : calc( 80 var( --remBase ) );
	}
	#apply-ledes p{
		font-size : 2rem;
		line-height : 1.5;
		text-align : center;
	}
	#apply-ledes p a{
		-webkit-text-decoration : underline;
		text-decoration : underline;
	}
}
#apply #mailformpro fieldset{
	min-width : 0;
	padding : 0;
	margin : 0;
	border : 0;
}
#apply #mailformpro legend{
	display : grid;
	grid-auto-flow : column;
	place-items : center;
	justify-content : center;
	width : 100%;
	padding : 0;
	margin : 0;
	font-family : "Noto Serif JP" , serif;
	font-weight : 500;
	line-height : 1.3;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --color01 );
}
#apply #mailformpro fieldset > dl > div > dt label{
	display : grid;
	align-items : center;
}
#apply #mailformpro fieldset > dl > div > dt label::after{
	display : grid;
	place-items : center;
	color : white;
}
#apply #mailformpro fieldset > dl > div > dt label.required::after{
	content : "必須";
	background-color : var( --color0102 );
}
#apply #mailformpro fieldset > dl > div > dt label:not( .required )::after{
	content : "任意";
	background-color : #448aca;
}
#apply #mailformpro fieldset > dl > div > dd a{
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
#apply #mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] , textarea ){
	background-color : #eee;
}
#apply #mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] , textarea )::placeholder{
	color : #d9d9d9;
}
#apply #mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] , select , textarea ){
	padding-inline : .75em;
}
#apply #mailformpro .dob01{
	display : grid;
	align-items : center;
}
#apply #mailformpro .address01 .box{
	display : grid;
	align-items : center;
	justify-content : start;
}
#apply #mailformpro dd.radios label{
	display : grid;
	align-items : center;
	justify-content : start;
}
#apply #mailformpro dd.radios input[type="radio"]{
	appearance : none;
	position : relative;
}
#apply #mailformpro dd.radios input[type="radio"]::before{
	position : relative;
	display : block;
	font-size : 0;
	content : "";
	background-color : #cecece;
	border-radius : 50%;
}
#apply #mailformpro dd.radios input[type="radio"]:checked::after{
	position : absolute;
	inset : 0;
	display : block;
	margin : auto;
	font-size : 0;
	content : "";
	background-color : #eb6877;
	border-radius : 50%;
}
#apply #mailformpro .eat01 .box{
	display : flex;
	flex-wrap : wrap;
}
#apply #mailformpro .radios.interview01 .box{
	display : flex;
	flex-wrap : wrap;
}
#apply #mailformpro .link-pdf01::after{
	display : block;
	content : "";
	background : url( "../images/ui/icon/pdf.png" ) 0 0 / contain no-repeat;
}
#apply #mailformpro input[type="checkbox"]{
	appearance : none;
	position : relative;
}
#apply #mailformpro input[type="checkbox"]::before{
	position : relative;
	display : block;
	font-size : 0;
	content : "";
	background-color : white;
	border-color : #a7a2a2;
	border-style : solid;
}
#apply #mailformpro input[type="checkbox"]:checked::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/check03.png" ) 0 0 / contain no-repeat;
}
#apply #mailformpro .agree label , #apply #mailformpro .agree span , #apply #mailformpro .agree a{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
}
#apply #mailformpro .agree a{
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
#apply #mailformpro .mfp_buttons input[type="submit"]{
	display : grid;
	place-items : center;
	color : #fff;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : #f184a1;
}
#apply #mailformpro div.mfp_err{
	background-position-y : center;
}
@media screen and ( width <= 750px ){
	#apply{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#apply #mailformpro .fieldset01{
		padding-bottom : calc( 62 var( --remBase ) );
	}
	#apply #mailformpro .fieldset02{
		padding-bottom : calc( 58 var( --remBase ) );
	}
	#apply #mailformpro .fieldset04{
		padding-bottom : calc( 36 var( --remBase ) );
	}
	#apply #mailformpro .fieldset05{
		padding-bottom : calc( 68 var( --remBase ) );
	}
	#apply #mailformpro .fieldset06{
		padding-bottom : calc( 68 var( --remBase ) );
	}
	#apply #mailformpro legend{
		padding-block : calc( 16 var( --remBase ) );
		font-size : 3.2rem;
	}
	#apply #mailformpro fieldset > dl{
		margin-top : calc( 8 var( --remBase ) );
	}
	#apply #mailformpro fieldset > dl > div{
		padding-block : calc( 24 var( --remBase ) );
	}
	#apply #mailformpro fieldset > dl > div:not( :last-of-type ){
		border-bottom : solid 1px #d9d9d9;
	}
	#apply #mailformpro fieldset > dl > div > dt label{
		grid-template-columns : auto calc( 80 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
		justify-content : start;
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#apply #mailformpro fieldset > dl > div > dt label::after{
		height : calc( 21 var( --remBase ) );
	}
	#apply #mailformpro fieldset > dl > div > dd{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#apply #mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] , select ){
		width : 100%;
		height : calc( 37 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#apply #mailformpro .dob01{
		grid-template-columns : calc( 125 var( --percentBase ) ) repeat( 2 , calc( 104 var( --percentBase ) ) );
		justify-content : space-between;
	}
	#apply #mailformpro .address01 .box{
		row-gap : calc( 10 var( --remBase ) );
	}
	#apply #mailformpro .address01 .box label{
		grid-row : 1;
		grid-column : 1/3;
	}
	#apply #mailformpro .address01 .box ~ .box{
		margin-top : calc( 26 var( --remBase ) );
	}
	#apply #mailformpro .address01 > div:nth-child( 1 of .box ){
		display : grid;
		grid-template-columns : calc( 168 var( --percentBase ) ) 1fr;
		column-gap : calc( 13 var( --percentBase ) );
		align-items : start;
	}
	#apply #mailformpro .address01 > div:nth-child( 1 of .box ) input{
		grid-row : 2;
		grid-column : 1;
		width : 100%;
	}
	#apply #mailformpro .address01 > div:nth-child( 1 of .box ) a{
		grid-row : 2;
		grid-column : 2;
	}
	#apply #mailformpro .address01 > div:nth-child( 2 of .box ){
		grid-template-columns : auto 1fr;
	}
	#apply #mailformpro .address01 > div:nth-child( 2 of .box ) select{
		grid-row : 2;
		grid-column : 1/3;
		width : 100%;
	}
	#apply #mailformpro .address01 > div:nth-child( 3 of .box ){
		grid-template-columns : auto 1fr;
	}
	#apply #mailformpro .address01 > div:nth-child( 3 of .box ) input{
		grid-row : 2;
		grid-column : 1/3;
		width : 100%;
	}
	#apply #mailformpro .address01 p{
		margin-top : calc( 10 var( --remBase ) );
	}
	#apply #mailformpro .emails01 .box p{
		padding-top : calc( 14 var( --remBase ) );
		padding-bottom : calc( 5 var( --remBase ) );
	}
	#apply #mailformpro .emails01 .box + p{
		padding-inline : calc( 9 var( --percentBase ) );
		margin-top : calc( 18 var( --remBase ) );
	}
	#apply #mailformpro :where( .contactinfo01 , .workplace01 , .contactinfo02 , .admission01 ) .box ~ .box{
		margin-top : calc( 18 var( --remBase ) );
	}
	#apply #mailformpro :where( .contactinfo01 , .workplace01 , .contactinfo02 , .admission01 ) label{
		display : block;
		margin-bottom : calc( 5 var( --remBase ) );
	}
	#apply #mailformpro .from01 select{
		width : calc( 125 var( --percentBase ) );
		margin-top : calc( 14 var( --remBase ) );
	}
	#apply #mailformpro dd.radios label{
		grid-template-columns : calc( 20 var( --remBase ) ) auto;
		column-gap : calc( 10 var( --remBase ) );
	}
	#apply #mailformpro dd.radios label input::before{
		height : calc( 20 var( --remBase ) );
	}
	#apply #mailformpro dd.radios label input:checked::after{
		width : calc( 12 * 100% / 20 );
		height : calc( 12 var( --remBase ) );
	}
	#apply #mailformpro .interview01 select{
		width : calc( 250 var( --percentBase ) );
	}
	#apply #mailformpro .interview01 p{
		margin-top : calc( 18 var( --remBase ) );
	}
	#apply #mailformpro .type01 p{
		margin-top : calc( 22 var( --remBase ) );
	}
	#apply #mailformpro .eat01 .box{
		column-gap : calc( 25 var( --percentBase ) );
	}
	#apply #mailformpro .radios.interview01 .box{
		column-gap : calc( 25 var( --percentBase ) );
	}
	#apply #mailformpro .radios.interview01 p{
		margin-top : calc( 18 var( --remBase ) );
	}
	#apply #mailformpro .choice01 select:nth-of-type( 2 ){
		margin-top : calc( 10 var( --remBase ) );
	}
	#apply #mailformpro textarea{
		width : 100%;
		height : calc( 84 var( --remBase ) );
	}
	#apply #mailformpro .agree{
		margin-top : calc( 28 var( --remBase ) );
	}
	#apply #mailformpro .agree p{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#apply #mailformpro .agree p + label{
		margin-top : calc( 52 var( --remBase ) );
	}
	#apply #mailformpro .agree label + label{
		margin-top : calc( 25 var( --remBase ) );
	}
	#apply #mailformpro .agree label{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
	}
	#apply #mailformpro .agree label span{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#apply #mailformpro .agree input[type="checkbox"]::before{
		width : calc( 20 var( --remBase ) );
		height : calc( 20 var( --remBase ) );
		margin-right : calc( 6 var( --remBase ) );
		border-width : 1px;
	}
	#apply #mailformpro .agree input[type="checkbox"]:checked::after{
		top : 0;
		left : calc( -1 var( --remBase ) );
		width : calc( 23 var( --remBase ) );
		height : calc( 18 var( --remBase ) );
	}
	#apply #mailformpro .agree .link-pdf01::after{
		width : calc( 17 var( --remBase ) );
		height : calc( 18 var( --remBase ) );
		margin-inline : calc( 2 var( --remBase ) );
	}
	#apply #mailformpro .mfp_buttons{
		display : grid;
		grid-template-columns : calc( 312 var( --percentBase ) );
		grid-auto-rows : calc( 62 var( --remBase ) );
		justify-content : center;
	}
	#apply #mailformpro .mfp_buttons input[type="submit"]{
		font-size : 1.6rem;
	}
	#apply #mailformpro div.mfp_err{
		font-size : 1.4rem;
		line-height : 1.5;
	}
}
@media screen and ( width > 750px ) , print{
	#apply{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#apply #mailformpro{
		padding-inline : calc( 160 var( --percentBase ) );
	}
	#apply #mailformpro .fieldset01{
		padding-bottom : calc( 86 var( --remBase ) );
	}
	#apply #mailformpro .fieldset02{
		padding-bottom : calc( 69 var( --remBase ) );
	}
	#apply #mailformpro .fieldset04{
		padding-bottom : calc( 65 var( --remBase ) );
	}
	#apply #mailformpro .fieldset05{
		padding-bottom : calc( 85 var( --remBase ) );
	}
	#apply #mailformpro legend{
		height : calc( 120 var( --remBase ) );
		font-size : 4.8rem;
	}
	#apply #mailformpro fieldset > dl{
		margin-top : calc( 8 var( --remBase ) );
	}
	#apply #mailformpro fieldset > dl > div{
		display : grid;
		grid-template-columns : calc( 440 * 100% / 1560 ) 1fr;
		column-gap : calc( 40 * 100% / 1560 );
		padding-block : calc( 16 var( --remBase ) );
	}
	#apply #mailformpro fieldset > dl > div:not( :last-of-type ){
		border-bottom : solid 1px #d9d9d9;
	}
	#apply #mailformpro fieldset > dl > div > dt{
		padding-top : calc( 11 var( --remBase ) );
	}
	#apply #mailformpro fieldset > dl > div > dt label{
		grid-template-columns : 1fr calc( 109 * 100% / 440 );
		justify-content : space-between;
		font-size : 2rem;
	}
	#apply #mailformpro fieldset > dl > div > dt label::after{
		height : calc( 24 var( --remBase ) );
		font-size : 1.6rem;
	}
	#apply #mailformpro fieldset > dl > div > dd{
		font-size : 2rem;
		line-height : 1.5;
	}
	#apply #mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] , select ){
		height : calc( 46 var( --remBase ) );
		font-size : 2rem;
	}
	#apply #mailformpro :where( input[type="text"] , input[type="email"] , input[type="tel"] ){
		width : calc( 760 * 100% / 1080 );
	}
	#apply #mailformpro .dob01{
		grid-template-columns : repeat( 3 , calc( 155 * 100% / 1080 ) );
		column-gap : calc( 13 * 100% / 1080 );
		justify-content : start;
	}
	#apply #mailformpro .address01 .box ~ .box{
		margin-top : calc( 15 var( --remBase ) );
	}
	#apply #mailformpro .address01 > div:nth-child( 1 of .box ){
		display : grid;
		grid-template-columns : auto calc( 34 * 100% / 1080 ) calc( 200 * 100% / 1080 ) calc( 17 * 100% / 1080 ) auto 1fr;
		align-items : center;
	}
	#apply #mailformpro .address01 > div:nth-child( 1 of .box ) label{
		grid-row : 1;
		grid-column : 1;
	}
	#apply #mailformpro .address01 > div:nth-child( 1 of .box ) input{
		grid-row : 1;
		grid-column : 3;
		width : 100%;
	}
	#apply #mailformpro .address01 > div:nth-child( 1 of .box ) a{
		grid-row : 1;
		grid-column : 5;
	}
	#apply #mailformpro .address01 > div:nth-child( 2 of .box ){
		grid-template-columns : auto calc( 34 * 100% / 1080 ) calc( 300 * 100% / 1080 );
	}
	#apply #mailformpro .address01 > div:nth-child( 2 of .box ) label{
		grid-row : 1;
		grid-column : 1;
	}
	#apply #mailformpro .address01 > div:nth-child( 2 of .box ) select{
		grid-row : 1;
		grid-column : 3;
		width : 100%;
	}
	#apply #mailformpro .address01 > div:nth-child( 3 of .box ){
		grid-template-columns : auto calc( 34 * 100% / 1080 ) calc( 430 * 100% / 1080 );
	}
	#apply #mailformpro .address01 > div:nth-child( 3 of .box ) label{
		grid-row : 1;
		grid-column : 1;
	}
	#apply #mailformpro .address01 > div:nth-child( 3 of .box ) input{
		grid-row : 1;
		grid-column : 3;
		width : 100%;
	}
	#apply #mailformpro .address01 p{
		margin-top : calc( 10 var( --remBase ) );
	}
	#apply #mailformpro .emails01 .box p{
		padding-block : calc( 13 var( --remBase ) );
		padding-left : calc( 14 * 100% / 1080 );
	}
	#apply #mailformpro .emails01 .box + p{
		margin-top : calc( 10 var( --remBase ) );
	}
	#apply #mailformpro :where( .contactinfo01 , .workplace01 ) .box{
		display : grid;
		grid-template-columns : calc( 120 * 100% / 1080 ) calc( 430 * 100% / 1080 );
		align-items : center;
		justify-content : start;
	}
	#apply #mailformpro :where( .contactinfo01 , .workplace01 ) .box ~ .box{
		margin-top : calc( 11 var( --remBase ) );
	}
	#apply #mailformpro :where( .contactinfo02 ) .box{
		display : grid;
		grid-template-columns : calc( 120 * 100% / 1080 ) calc( 430 * 100% / 1080 );
		align-items : center;
		justify-content : start;
	}
	#apply #mailformpro :where( .contactinfo02 ) .box ~ .box{
		margin-top : calc( 10 var( --remBase ) );
	}
	#apply #mailformpro .from01 .box{
		display : grid;
		grid-template-columns : calc( 430 * 100% / 1080 ) calc( 97 * 100% / 1080 );
		column-gap : calc( 8 * 100% / 1080 );
		align-items : center;
		justify-content : start;
	}
	#apply #mailformpro .from01 .box input{
		width : 100%;
	}
	#apply #mailformpro .admission01 .box{
		display : grid;
		align-items : center;
		justify-content : start;
	}
	#apply #mailformpro .admission01 .box ~ .box{
		margin-top : calc( 10 var( --remBase ) );
	}
	#apply #mailformpro .admission01 .box:nth-child( 1 of .box ){
		grid-template-columns : calc( 120 * 100% / 1080 ) calc( 430 * 100% / 1080 );
	}
	#apply #mailformpro .admission01 .box:nth-child( 2 of .box ){
		grid-template-columns : calc( 120 * 100% / 1080 ) calc( 430 * 100% / 1080 );
	}
	#apply #mailformpro .admission01 .box:nth-child( 3 of .box ){
		grid-template-columns : calc( 120 * 100% / 1080 ) calc( 155 * 100% / 1080 );
	}
	#apply #mailformpro dd.radios{
		padding-top : calc( 8 var( --remBase ) );
	}
	#apply #mailformpro dd.radios label{
		grid-template-columns : calc( 20 var( --remBase ) ) auto;
		column-gap : calc( 6 var( --remBase ) );
	}
	#apply #mailformpro dd.radios label input::before{
		height : calc( 20 var( --remBase ) );
	}
	#apply #mailformpro dd.radios label input:checked::after{
		width : calc( 12 * 100% / 20 );
		height : calc( 12 var( --remBase ) );
	}
	#apply #mailformpro .interview01 select{
		width : calc( 243 * 100% / 1080 );
	}
	#apply #mailformpro .interview01 p{
		margin-top : calc( 29 var( --remBase ) );
	}
	#apply #mailformpro .type01 p{
		margin-top : calc( 28 var( --remBase ) );
	}
	#apply #mailformpro .eat01 .box{
		column-gap : calc( 38 * 100% / 1080 );
	}
	#apply #mailformpro :where( .years01 , .way01 ) select{
		width : calc( 300 * 100% / 1080 );
	}
	#apply #mailformpro .radios.interview01 .box{
		column-gap : calc( 38 * 100% / 1080 );
	}
	#apply #mailformpro .radios.interview01 p{
		margin-top : calc( 29 var( --remBase ) );
	}
	#apply #mailformpro .choice01 .box{
		display : grid;
		grid-template-columns : calc( 300 * 100% / 1080 ) calc( 136 * 100% / 1080 );
		column-gap : calc( 29 * 100% / 1080 );
		align-items : center;
		justify-content : start;
	}
	#apply #mailformpro textarea{
		width : calc( 484 * 100% / 1080 );
		height : calc( 84 var( --remBase ) );
	}
	#apply #mailformpro .agree{
		padding-top : calc( 20 var( --remBase ) );
	}
	#apply #mailformpro .agree p{
		font-size : 2rem;
		line-height : 1.5;
	}
	#apply #mailformpro .agree p + label{
		margin-top : calc( 52 var( --remBase ) );
	}
	#apply #mailformpro .agree label + label{
		margin-top : calc( 25 var( --remBase ) );
	}
	#apply #mailformpro .agree label{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		margin-left : calc( 313 * 100% / 1560 );
	}
	#apply #mailformpro .agree label span{
		font-size : 2rem;
		line-height : 1.5;
	}
	#apply #mailformpro .agree input[type="checkbox"]::before{
		width : calc( 24 var( --remBase ) );
		height : calc( 24 var( --remBase ) );
		margin-right : calc( 9 var( --remBase ) );
		border-width : 1px;
		border-radius : calc( 3 var( --remBase ) );
	}
	#apply #mailformpro .agree input[type="checkbox"]:checked::after{
		top : calc( 2 var( --remBase ) );
		left : calc( -4 var( --remBase ) );
		width : calc( 32 var( --remBase ) );
		height : calc( 23 var( --remBase ) );
	}
	#apply #mailformpro .agree .link-pdf01::after{
		width : calc( 24 var( --remBase ) );
		height : calc( 26 var( --remBase ) );
		margin-inline : calc( 4 var( --remBase ) );
	}
	#apply #mailformpro .mfp_buttons{
		display : grid;
		grid-template-columns : calc( 320 * 100% / 1560 );
		grid-auto-rows : calc( 80 var( --remBase ) );
		justify-content : center;
		margin-top : calc( 73 var( --remBase ) );
	}
	#apply #mailformpro .mfp_buttons input[type="submit"]{
		font-size : 2.2rem;
	}
	#apply div.mfp_err{
		font-size : 2rem;
		line-height : 1.5;
	}
}


#mailformpro .radios label input:checked ~ span:after{
	content : "";
	display : block;
	position : absolute;
	border-radius : 50%;
}
#mailformpro .radios span{
	letter-spacing : .1em;
}
#mailformpro .type01 label span:before{
	border-radius : 50%;
}
	#mailformpro .type01 label.fully span:before , #mailformpro .type01 label.confirm span:before {
		border-radius : 50%;
		background-color : #eee;
		flex-shrink : 0;
	}
#mailformpro .type01 label input:not([disabled]):checked ~ span:after{
	background-color : #eb6877;
	border-radius : 50%;
}
#mailformpro .type01 label input[disabled] + span{
	color : #cecece;
}
#mailformpro .type01 label.confirm span{
	color : #cecece;
}


#mailformpro .type01 label.fully span:after , #mailformpro .type01 label.confirm span:after{
	letter-spacing : .1em;
	text-decoration: none;
}
#mailformpro .form-normal .type01 label.fully span:after , #mailformpro .radios label.fully span span:after , .form-sundai #mailformpro .radios label.fully span:after {
	content : "[満室]";
	color : #930606;
}
#mailformpro .form-normal .type01 label.confirm span:after , #mailformpro .radios label.confirm span span:after , .form-sundai #mailformpro .radios label.confirm  span:after {
	content : "[要問合せ]";
	color : #448aca;
}

#btnDialog{
	display : grid;
	place-items : center;
	width : fit-content;
	background-color : #ccc;
	background-color : white;
	background-repeat : no-repeat;
	border-style : solid;
	appearance : none;
}
@media screen and ( width <= 750px ){
	#btnDialog{
		height : calc( 42 var( --remBase ) );
		padding-left : calc( 16 var( --remBase ) );
		padding-right : calc( 38 var( --remBase ) );
		background-image : url( "/assets/images/ui/parts/spin01_sp.png" );
		background-position : right calc( ( 19 * 400 / 750 ) var( --remBase ) ) top 50%;
		background-size : auto calc( ( 22 * 400 / 750 ) var( --remBase ) );
		border-width : 1px;
	}
}
@media screen and ( width > 750px ) , print{
	#btnDialog{
		height : calc( 46 var( --remBase ) );
		padding-left : calc( 14 var( --remBase ) );
		padding-right : calc( ( 14 + 11 + 13 ) var( --remBase ) );
		background-image : url( "/assets/images/ui/parts/spin01_pc.png" );
		background-position : right 11px top 50%;
		background-size : auto calc( 13 var( --remBase ) );
		border-width : 1px;
	}
}
#dialog:not( [open] ){
	display : none;
}
#dialog[open]{
	z-index : 15;
	display : grid;
}
body:has( #dialog[open] ){
	overflow : hidden;
}
#dialog{
	position : fixed;
	top : 0;
	left : 0;
	align-items : center;
	max-width : inherit;
	height : 100%;
	max-height : inherit;
	padding-inline : 0;
	overflow : hidden;
	overflow-y : auto;
	background-color : color-mix( in srgb , #000 80% , transparent );
	border : 0;
}
@media screen and ( width <= 750px ){
	#dialog{
		left : calc( 8 var( --viewportBase ) );
		justify-content : center;
		width : calc( 384 var( --viewportBase ) );
		padding-block : calc( 14 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		background-color : color-mix( in srgb , #fff 100% , transparent );
	}
	#dialog .dialogContainer{
		grid-column : 1;
		padding-inline : calc( 13 * 100% / 384 );
	}
}
@media screen and ( width > 750px ) , print{
	#dialog{
		width : 100%;
		padding-block : calc( 16 var( --remBase ) );
	}
	#dialog .dialogContainer{
		position : relative;
		padding-top : calc( 50 var( --remBase ) );
		padding-bottom : calc( 42 var( --remBase ) );
		background-color : #fff;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#dialog{
		padding-inline : calc( ( ( 1960 - 645 ) / 2 ) var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#dialog{
		padding-inline : calc( ( ( 1960 - 645 ) / 2 ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width <= 1200px ) {
	#dialog{
		padding-inline : calc( 200 var( --remBase ) );
	}
}@media screen and ( 1200px < width < 1568px ) {
	#dialog{
		padding-inline : calc( 400 var( --remBase ) );
	}
}
#mailformpro #dialog li > label{
	display : block;
	font-weight : 700;
}
#mailformpro #dialog li > label > span:nth-of-type( 1 ){
	color : #ef1c1c;
}
#mailformpro #dialog li > label > span:nth-of-type( 2 ){
	display : block;
	font-weight : 400;
	color : #222;
}
#mailformpro #dialog li > label > i{
	font-weight : 400;
}
#mailformpro #dialog .radios{
	display : grid;
}
#mailformpro #dialog .radios label + label{
	margin-left : 0;
}
#mailformpro #dialog .radios label{
	display : grid;
	align-items : center;
	justify-content : start;
	height : 100%;
	margin : 0;
	letter-spacing : 0;
	border : solid 1px #d9d9d9;
}
#mailformpro #dialog .radios label:has( input:checked ){
	background-color : #f2c94c;
}
#mailformpro #dialog .radios label:not( :nth-of-type( 4n + 1 ) ){
	margin-left : -1px;
}
#mailformpro #dialog .radios label:nth-of-type( n+5 ){
	margin-top : -1px;
}
#mailformpro #dialog .radios label input[type="radio"]{
	appearance : none;
	position : relative;
	font-size : 0;
}
#mailformpro #dialog .radios label input[type="radio"]::before{
	display : block;
	align-self : center;
	justify-self : center;
	width : 100%;
	content : "";
	background-color : #d9d9d9;
	border-radius : 0;
}
#mailformpro #dialog .radios label input[type="radio"]:checked::before{
	opacity : 0;
}
#mailformpro #dialog .radios label input[type="radio"]:checked::after{
	position : absolute;
	top : 50%;
	display : block;
	content : "";
	background : url( "../images/ui/icon/check01.svg" ) center / contain no-repeat;
	background-color : transparent;
	border-radius : 0;
	transform : none;
	translate : 0 -50%;
}
#mailformpro #dialog .radios label span{
	color : #222;
	letter-spacing : 0;
}
#mailformpro #dialog .radios label input[type="radio"]:not( :disabled )::before{
	background-color : #d9d9d9;
	border-radius : 0;
}
#mailformpro #dialog .radios label:has( input:disabled ){
	cursor : not-allowed ! important;
}
#mailformpro #dialog .radios label:has( input:disabled ) span{
	color : #bdbdbd;
	-webkit-text-decoration : none;
	text-decoration : none;
}
#mailformpro #dialog .radios label input[type="radio"]:disabled::before{
	display : block;
	margin : 0;
	font-size : 0;
	content : "";
	background-color : transparent;
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
	border : 0;
	border-radius : 0;
}
#mailformpro #dialog .radios label.fully input[type="radio"]:disabled::before{
	background-image : url( "../images/ui/card/fully.svg" );
}
#mailformpro #dialog .radios label.confirm input[type="radio"]:disabled::before{
	background-image : url( "../images/ui/card/confirm.svg" );
}
#mailformpro #dialog .radios label.none input[type="radio"]:disabled::before{
	background-image : url( "../images/ui/card/none.svg" );
}
#mailformpro #dialog .dialogNote dt{
	display : block;
	width : auto;
	padding : 0;
	margin : 0;
}
#mailformpro #dialog .dialogNote dd{
	width : auto;
	padding : 0;
	margin : 0;
}
#mailformpro #dialog .dialogNote > dl > dt{
	width : 100%;
}
#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div{
	display : grid;
	align-items : center;
	justify-content : start;
}
#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div dt{
	font-size : 0;
}
#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 2 ) > div{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
}
#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 2 ) > div + div{
	margin-top : 0;
}
#mailformpro #dialog .dialogNote dl{
	width : 100%;
	margin : 0;
}
#mailformpro #dialog .dialogNote dl > div{
	display : block;
	padding-block : 0;
}
#mailformpro #dialog .dialogNote dl > div + div{
	border : 0;
}
@media screen and ( width <= 750px ){
	#mailformpro #dialog li + li{
		margin-top : calc( 30 var( --remBase ) );
	}
	#mailformpro #dialog li > label{
		margin-bottom : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 23 / 16 );
	}
	#mailformpro #dialog li > label span , #mailformpro #dialog li > label i{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#mailformpro #dialog li > label i{
		display : block;
	}
	#mailformpro #dialog .radios{
		grid-auto-rows : calc( 30 var( --remBase ) );
		justify-content : start;
	}
	#mailformpro #dialog .radios span{
		font-size : 1.4rem;
	}
	#mailformpro #dialog .radios input[type="radio"]:not( :disabled )::before{
		width : calc( 14 * 100% / 23 );
		height : calc( 14 var( --remBase ) );
	}
	#mailformpro #dialog .radios input[type="radio"]:not( :disabled ):checked::after{
		left : calc( 3.5 * 100% / 23 );
		width : calc( 16 * 100% / 23 );
		height : calc( 11 var( --remBase ) );
	}
	#mailformpro #dialog .radios input[type="radio"]:disabled::before{
		width : calc( 16 * 100% / 23 );
		height : calc( 20 var( --remBase ) );
	}
	#mailformpro #dialog .radios01{
		grid-template-columns : repeat( 4 , calc( 86 * 100% / 358 ) );
	}
	#mailformpro #dialog .radios01 label{
		grid-template-columns : calc( 23 * 100% / 84 ) 1fr;
	}
	#mailformpro #dialog .radios02{
		grid-template-columns : repeat( 2 , calc( 60 * 100% / 358 ) calc( 119 * 100% / 358 ) );
	}
	#mailformpro #dialog .radios02 label:nth-of-type( odd ){
		grid-template-columns : calc( 23 * 100% / 58 ) 1fr;
	}
	#mailformpro #dialog .radios02 label:nth-of-type( even ){
		grid-template-columns : calc( 23 * 100% / 117 ) 1fr;
	}
	#mailformpro #dialog .dialogNote{
		margin-top : calc( 20 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dt{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#mailformpro #dialog .dialogNote > dl > dd{
		margin-top : calc( 10 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dd dd{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div{
		grid-template-columns : calc( 16 * 100% / 384 ) auto;
		column-gap : calc( 4 * 100% / 384 );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div + div{
		margin-top : calc( 4 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div img{
		height : calc( 20 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div dt{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 2 ){
		margin-top : calc( 14 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 2 ) dt{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
}
@media screen and ( width > 750px ) , print{
	#mailformpro #dialog li + li{
		margin-top : calc( 22 var( --remBase ) );
	}
	#mailformpro #dialog li > label{
		padding-inline : calc( 48 * 100% / 645 );
		margin-bottom : calc( 11 var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 23 / 16 );
	}
	#mailformpro #dialog li > label > span:nth-of-type( 2 ){
		display : block;
		padding-left : calc( 21 * 100% / 549 );
	}
	#mailformpro #dialog li > label i{
		font-size : 1.2rem;
		font-weight : 400;
	}
	#mailformpro #dialog :where( .radios01 , .radios02 ){
		grid-auto-rows : calc( 38 var( --remBase ) );
		padding-inline : calc( 68 * 100% / 645 );
	}
	#mailformpro #dialog :where( .radios01 , .radios02 ) > label{
		display : grid;
		align-items : center;
		justify-content : start;
	}
	#mailformpro #dialog .radios01{
		grid-template-columns : repeat( 4 , calc( 90 * 100% / 509 ) );
	}
	#mailformpro #dialog .radios01 label{
		grid-template-columns : calc( 30 * 100% / 88 ) 1fr;
	}
	#mailformpro #dialog .radios02{
		grid-template-columns : repeat( 2 , calc( 90 * 100% / 509 ) calc( 142 * 100% / 509 ) );
	}
	#mailformpro #dialog .radios02 label:nth-of-type( odd ){
		grid-template-columns : calc( 30 * 100% / 88 ) 1fr;
	}
	#mailformpro #dialog .radios02 label:nth-of-type( even ){
		grid-template-columns : calc( 30 * 100% / 140 ) 1fr;
	}
	#mailformpro #dialog .radios span{
		font-size : 1.4rem;
	}
	#mailformpro #dialog .radios input[type="radio"]:not( :disabled )::before{
		width : calc( 12 * 100% / 30 );
		height : calc( 12 var( --remBase ) );
	}
	#mailformpro #dialog .radios input[type="radio"]:not( :disabled ):checked::after{
		left : calc( 7 * 100% / 30 );
		width : calc( 16 * 100% / 30 );
		height : calc( 11 var( --remBase ) );
	}
	#mailformpro #dialog .radios input[type="radio"]:disabled::before{
		width : calc( 23 * 100% / 30 );
		height : calc( 29 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote{
		padding-left : calc( 42 * 100% / 645 );
		margin-top : calc( 16 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dt{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#mailformpro #dialog .dialogNote > dl > dd{
		margin-top : calc( 8 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ){
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 9 * 100% / 603 );
		align-items : start;
		justify-content : start;
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div{
		grid-template-columns : calc( 23 var( --remBase ) ) auto;
		column-gap : calc( 8 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div img{
		height : calc( 29 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 1 ) > div dt{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 2 ){
		margin-top : calc( 8 var( --remBase ) );
	}
	#mailformpro #dialog .dialogNote > dl > dd > dl:nth-of-type( 2 ) dt{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
	#mailformpro #dialog .dialogNote > dl > dd dd{
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
}
@media ( hover : hover ){
	#mailformpro #dialog .radios label:not( :has( input[type="radio"]:disabled ) ):hover{
		background-color : #ecf2fc;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#mailformpro #dialog .radios label{
		transition : background var( --transitionBase );
	}
	#mailformpro #dialog .radios input[type="radio"]:not( :disabled )::before{
		transition : opacity var( --transitionBase );
	}
	#mailformpro #dialog .radios input[type="radio"]:not( :disabled )::after{
		transition : background var( --transitionBase );
	}
}
#btnCloseDialog{
	position : absolute;
	display : block;
	width : fit-content;
	font-weight : 700;
}
@media screen and ( width <= 750px ){
	#btnCloseDialog{
		top : calc( 14 var( --remBase ) );
		right : calc( 14 * 100% / 384 );
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
}
@media screen and ( width > 750px ) , print{
	#btnCloseDialog{
		top : calc( 14 var( --remBase ) );
		right : calc( 20 * 100% / 645 );
		font-size : 1.6rem;
	}
}
@media screen and (1200px < width < 1568px){
	#btnCloseDialog{
		font-size : max(1.6rem,16px) !important
	}
}


#btnCloseDialog02{
	display : block;
	width : fit-content;
	margin-inline : auto;
	font-weight : 700;
}
@media screen and ( width <= 750px ){
	#btnCloseDialog02{
		margin-top : calc( 56 var( --remBase ) );
		font-size : 1.4rem;
		line-height : calc( 20 / 14 );
	}
}
@media screen and ( width > 750px ) , print{
	#btnCloseDialog02{
		margin-top : calc( 40 var( --remBase ) );
		font-size : 1.6rem;
	}
}
#apply #mfp_phase_confirm h4{
	display : grid;
	place-items : center;
	font-family : "Noto Serif JP" , serif;
	line-height : 1.3;
	color : white;
	background-color : var( --color01 );
}
#apply #mfp_phase_confirm th{
	font-weight : 400;
	text-align : left;
}
#apply #mfp_phase_confirm :where( #mfp_button_send , #mfp_button_cancel ){
	display : grid;
	place-items : center;
	border-style : solid;
	border-width : 1px;
}
#apply #mfp_phase_confirm #mfp_button_send{
	color : white;
	background-color : #f184a1;
	border-color : #f184a1;
}
#apply #mfp_phase_confirm #mfp_button_cancel{
	background-color : #fff;
	border-color : currentColor;
	border-style : solid;
}
@media screen and ( width <= 750px ){
	#apply #mfp_phase_confirm h4{
		height : calc( 120 var( --remBase ) );
		font-size : 4.8rem;
	}
	#apply #mfp_phase_confirm table , #apply #mfp_phase_confirm thead , #apply #mfp_phase_confirm tbody , #apply #mfp_phase_confirm tr , #apply #mfp_phase_confirm th , #apply #mfp_phase_confirm td{
		display : block;
	}
	#apply #mfp_phase_confirm table{
		margin-top : calc( 32 var( --remBase ) );
	}
	#apply #mfp_phase_confirm th , #apply #mfp_phase_confirm td{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#apply #mfp_phase_confirm td{
		padding-bottom : calc( 24 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#apply #mfp_phase_confirm tr:not( :last-of-type ) td{
		border-bottom : solid 1px #d9d9d9;
	}
	#apply #mfp_phase_confirm tr + tr{
		margin-top : calc( 24 var( --remBase ) );
	}
	#apply #mfp_phase_confirm .mfp_buttons{
		display : grid;
		grid-template-columns : calc( 312 var( --viewportBase ) );
		grid-auto-rows : calc( 64 var( --remBase ) ) ;
		grid-auto-flow : row;
		row-gap : calc( 18 var( --remBase ) );
		align-items : start;
		justify-content : center;
		margin-top : calc( 68 var( --remBase ) );
	}
	#apply #mfp_phase_confirm .mfp_buttons button{
		width : 100%;
		height : 100%;
		font-size : 1.6rem;
	}
	#apply #mfp_phase_confirm .mfp_buttons button:first-of-type{
		grid-row : 2;
	}
	#apply #mfp_phase_confirm .mfp_buttons button:last-of-type{
		grid-row : 1;
	}
}
@media screen and ( width > 750px ) , print{
	#apply #mfp_phase_confirm{
		padding-inline : calc( 160 var( --percentBase ) );
	}
	#apply #mfp_phase_confirm h4{
		height : calc( 74 var( --remBase ) );
		font-size : 3.2rem;
	}
	#apply #mfp_phase_confirm table{
		width: 100%;
		margin-top : calc( 8 var( --remBase ) );
	}
	#apply #mfp_phase_confirm :where( th, td ){
		padding-block : calc( 24 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
		border-bottom : solid 1px #d9d9d9;
	}
	#apply #mfp_phase_confirm th{
		width : calc( 480 * 100% / 1560 );
		padding-right : calc( 40 * 100% / 1560 );
		border-bottom : solid 1px #d9d9d9;
	}
	#apply #mfp_phase_confirm .mfp_buttons{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 320 * 100% / 1560 ) );
		grid-auto-rows : calc( 80 var( --remBase ) );
		column-gap : calc( 32 * 100% / 1560 );
		align-items : center;
		justify-content : center;
		margin-top : calc( 72 var( --remBase ) );
	}
	#apply #mfp_phase_confirm .mfp_buttons button{
		grid-row : 1;
		width : 100%;
		height : 100%;
		font-size : 2rem;
	}
	#apply #mfp_phase_confirm .mfp_buttons button:first-of-type{
		grid-column : 2;
	}
	#apply #mfp_phase_confirm .mfp_buttons button:last-of-type{
		grid-column : 1;
	}
}



/*---------------*/
.contents-body p , .contents-body li {
	line-height: 2.0;
}
@media screen and ( width <= 750px ){
	.contents-body p , .contents-body li {
		font-size: 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	.contents-body p , .contents-body li {
		font-size: 2rem;
	}
}


/* --------------------------------------------
faq
--------------------------------------------- */
#faq {
}
#faq01 {
}
@media screen and ( width <= 750px ){
	#faq-lede01 {
		
	}
}
@media screen and ( width > 750px ) , print{
	#faq-lede01 {
        padding-top: calc(80 var(--remBase));
        padding-bottom: calc(80 var(--remBase));
		padding-inline: calc(160 var(--percentBase));
	}
}


	#faq-list  {
		dt {
			position: relative;
			padding-left: 3em;
			font-weight: 600;
		}
		dt:before {
			position: absolute;
			top: 0;
			left: 0;
			content: "Ｑ";
			display: block;
			width: 2.5em;
			line-height: 2.5em;
			text-align: center;
			background-color: var( --color01 );
			color: #fff;
		}
	}
	#faq dd[data-before]:before{
		display : inline-flex;
		align-items : center;
		justify-content : center;
		content : attr(data-before);
		background-color : var( --color01 );
		color : #fff;
		font-weight : 500;
		letter-spacing : .1em;
		text-indent : .1em;
		padding: .2em;
	}

@media screen and ( width <= 750px ){
	#faq-list {
	}
	#faq-list  {
		dl {
			font-size: 1.4rem;
			line-height: 1.7;
			margin-bottom: calc(80 var(--remBase));
		}
		dl{
			div {
				display: block;
				flex-wrap: wrap;
				margin-bottom: calc(24 var(--remBase));
				padding-bottom:  calc(24 var(--remBase));
				border-bottom: solid 1px #d9d9d9;
			}
		}
		dt {
			background: var( --color0103 );
			padding-top: calc(8 var(--remBase));
			padding-bottom: calc(8 var(--remBase));
		}
		dd {
			padding: calc(8 var(--remBase));
		}
		h2 {
			grid-template-rows: calc(120 var(--remBase));
			grid-template-columns: calc(120* 100% / 1560) 1fr;
			column-gap: calc(43* 100% / 1560);
			margin-bottom: calc(24 var(--remBase));
			font-size: 4.8rem;
			line-height: 1.3;
			align-items: center;
			line-height: 1.3;
			color: white;
			background-color: var(--color01);
			padding: calc(16 var(--remBase));
		}
	}
}
@media screen and ( width > 750px ) , print{
	#faq-list {
		padding-inline: calc(160 var(--percentBase));
	}
	#faq-list  {
		dl {
			font-size: 2rem;
			line-height: 1.7;
			margin-bottom: calc(160 var(--remBase));
		}
		dl{
			div {
				display: flex;
				column-gap: calc(16 var(--remBase));
				flex-wrap: wrap;
				margin-bottom: calc(24 var(--remBase));
				padding-bottom:  calc(24 var(--remBase));
				border-bottom: solid 1px #d9d9d9;
			}
		}
		dt {
			width: calc(30% - calc(24 var(--remBase)));
			background: var( --color0103 );
			padding-top: calc(8 var(--remBase));
			padding-bottom: calc(8 var(--remBase));
		}
		dd {
			width: calc(70%);
			padding: calc(8 var(--remBase));
		}
		h2 {
			grid-template-rows: calc(120 var(--remBase));
			grid-template-columns: calc(120* 100% / 1560) 1fr;
			column-gap: calc(43* 100% / 1560);
			margin-bottom: calc(24 var(--remBase));
			font-size: 4.8rem;
			line-height: 1.3;
			align-items: center;
			line-height: 1.3;
			color: white;
			background-color: var(--color01);
			padding: calc(16 var(--remBase));
		}
	}
}



/* --------------------------------------------
c360
--------------------------------------------- */
#c360 {
}
#c360-div01 {
	text-align: center;
}
ul#moviewrap{
} 
	ul#moviewrap li{
		margin-bottom:4em; 
	} 
@media screen and ( width <= 750px ){
	#c360-div01{
		
	}
	.youtube {
		width: calc(100vw - ( 60 * 100vw / 768 ));
		margin: 10px auto 0 auto;
	}
	.youtube iframe {
		width: calc(100vw - ( 60 * 100vw / 768 ));
		height: 60vw;
	}
	#moviewrap li {
		margin-bottom: 60px;
	}
	#moviewrap li p {
	}
	.theta360 {
		display: flex;
		margin-top: 20px;
		flex-wrap: wrap;
		justify-content: center;
		flex-direction: column;
	}
		.theta360 dl {
			width: calc(100vw - ( 60 * 100vw / 768 ));
			margin-bottom: 30px;
		}
		.theta360 dl:nth-last-of-type(2n + 1) {
		}
		.theta360 dl dt {
			text-align: center;
			margin-bottom: 10px;
			font-size: 3.4rem;	
			font-weight: 500;
			color: #f16d90;
		}
		.theta360 dl dd {
		height: calc(100vw - ( 60 * 100vw / 768 ));
		}
}
@media screen and ( width > 750px ) , print{
	.youtube {
		width: 800px;
		margin: 10px auto 0 auto;
	}
	.youtube iframe {
		width: 800px;
		height: 500px;
	}
	#moviewrap li {
		margin-bottom: 60px;
	}
	#moviewrap li p {
		text-align: center;
	}
	.theta360 {
		display: flex;
		margin-top: 20px;
		flex-wrap: wrap;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
		.theta360 dl {
			width: 800px;
			margin-bottom: 30px;
		}
		.theta360 dl:nth-last-of-type(2n + 1) {
		}
		.theta360 dl dt {
			text-align: center;
			margin-bottom: 10px;
			font-size: 2.2rem;	
			font-weight: 500;
			color: #f16d90;
		}
		.theta360 dl dd {
			height: 500px;
		}
}



/*--------------------------------------------
kitazononet
---------------------------------------------*/
#kitazononet .wrap{
	position : relative;
}
#kitazononet .wrap:before , #kitazononet .wrap:after{
	content : "";
	display : block;
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
	position : absolute;
}
#kitazononet .title01  , #kitazononet .lede01{
	text-align: center;
}
#kitazononet .wrap:before{
	background-image : url("../images/kitazononet/bg01.png");
}
#kitazononet .wrap:after{
	background-image : url("../images/kitazononet/bg02.png");
}
#kitazononet .list > li{
	counter-increment : no;
}
#kitazononet h3{
	color : #fff;
	background-color : #f36c90;
	letter-spacing : .1em;
	width : 100%;
	position : relative;
	background-repeat : no-repeat;
    line-height: 1.3;
	text-align: center;
}
#kitazononet .list > li:nth-child(1) h3{
	background-image : url("../images/ui/icon/shinsei.png");
}
#kitazononet .list > li:nth-child(2) h3{
	background-image : url("../images/ui/icon/mail.png");
}
#kitazononet .list > li:nth-child(3) h3{
	background-image : url("../images/ui/icon/webcamera.png");
}
#kitazononet .list p{
	letter-spacing : .1em;
}
#kitazononet .list a{
	margin-left : auto;
	margin-right : auto;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	background-color : #f5d25a;
	letter-spacing : .1em;
	text-indent : .1em;
}
#kitazononet .photo-list {
    display: flex;
    justify-content: center;
    gap:20px 20px;
}
    #kitazononet .photo-list li {
		width: 30%;
		max-width: 200px;
    }
        #kitazononet .photo-list li img {
            width: 100%;
        }
@media screen and ( width <= 750px ){
	#kitazononet.wrap{
	}
	#kitazononet .title01{
	}
	#kitazononet .list{
	}
	#kitazononet .list li {
		padding-bottom:  calc( 24 var( --remBase ) );

	}
	#kitazononet h3{
		font-size : 2rem;
		padding-right: calc( 100 var( --remBase ) );
		padding-left: calc( 16 var( --remBase ) );
		padding-top: calc( 16 var( --remBase ) );
		padding-bottom: calc( 16 var( --remBase ) );
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: calc( 80 var( --remBase ) );

	}
	#kitazononet h3:before{
	}
	#kitazononet .list > li h3{
		background-size : auto calc( 138 * 100vw / 768 );
		background-position : right calc( 28 * 100% / 720 ) top 50%;
	}

	#kitazononet .list p{
	}
	#kitazononet .list a{
	}
    #kitazononet .photo-list {
		padding-bottom:  calc( 24 var( --remBase ) );
    }
}
@media screen and ( width > 750px ) , print{
	#kitazononet .wrap{
	}

	#kitazononet.wrap:after{
		width : 278px;
		height : 260px;
		top : -93px;
		right : -18px;
	}
	#kitazononet .title01{
		margin-top : calc( 72px - 8px );
	}
	#kitazononet .list{
		display : flex;
		margin-top : 45px;
        justify-content: center;
	}
	#kitazononet .list > li{
		max-height : 40%;
		min-width: calc( 500 var( --remBase ) );
		
	}

	#kitazononet h3{
		text-indent : .1em;
		font-size :max(3rem,24px) !important;
		min-height: calc( 300 var( --remBase ) );
		text-align : center;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: calc( 160 var( --remBase ) );
	}
	
	#kitazononet .list > li h3{
		background-size : auto calc( 150 var( --remBase ) );
		background-position : center calc( 30 var( --remBase ) );
	}

	#kitazononet .list p{
		margin-top : ;
	}
	#kitazononet .iframe-container{
		margin-top : ;

	}
	#kitazononet .list a{
		margin-top : ;
		width : ;
		height : 54px;
		font-size : 1.8rem;
	}
    #kitazononet .photo-list {
        margin: 40px 0 ;
    }
        #kitazononet .photo-list li {
            width: ;
        }
}

/*--------------------------------------------
COVID 19
---------------------------------------------*/
#covid-19 .list01 li{
	border-color : #3cb4a0;
	border-style : solid;
}
#covid-19 .list01 p{
	letter-spacing : .1em;
}
#covid-19 .list02 li{
	display : flex;
	align-items : flex-start;
	letter-spacing : .1em;
}
#covid-19 .list02 li:before{
	content : "";
	display : block;
	flex-shrink : 0;
	background : url("../images/ui/icon/check01.png") 0 0 / contain no-repeat;
}
@media screen and (max-width: 768px){
	#covid-19.wrap{
	}
	#covid-19 .lede01 + .title01{
	}
	#covid-19 .list01{
		margin-top : calc( 26 * 100vw / 768 );
	}
	#covid-19 .list01 li{
		border-width : 2px;
		border-radius : calc( 16 var( --remBase ) );
		padding :calc( 16 var( --remBase ) );
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#covid-19 .list01 li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#covid-19 .list01 p{

	}
	#covid-19 .list01 li:nth-child(1) img{
		height : calc( 80 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(2) img{
		height : calc( 80 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(3) img{
		height : calc( 80 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(4) img{
		height : calc( 80 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(5) img{
		height : calc( 80 var( --remBase ) );
	}
	#covid-19 .list01 + .title01{
		margin-top : calc( 114 * 100vw / 768 );
	}
	#covid-19 .list02{
		margin-top : calc( ( 54 - 7 ) * 100vw / 768 );
		padding-left : calc( 20 * 100% / 720 );
		padding-right : calc( 20 * 100% / 720 );
	}
	#covid-19 .list02 li{
		width : 100%;
	}
	#covid-19 .list02 li + li{
		margin-top : calc( 25 * 100vw / 768 );
	}
	#covid-19 .list02 li:before{
		margin-right : calc( 3 * 100% / 700 );
		width : calc( 26 * 100% / 700 );
		height : calc( 16 * 100vw / 768 );
		margin-top : calc( ( 4 + 7 ) * 100vw / 768 );
	}
	#covid-19 .list-banners01 img {
		max-width: 100%;
		height: auto;
	}
}
@media print,screen and (min-width: 769px){
	#covid-19.wrap{
		text-align: center;
	}
	#covid-19 .lede01{
		padding-bottom: calc( 40 var( --remBase ) );
	}
	#covid-19 .list01{
		margin-top : calc( 24 var( --remBase ) );	
		display : flex;
		flex-wrap : wrap;
		justify-content : center;
		column-gap: calc( 24 var( --remBase ) );
		grid-row-gap: calc( 24 var( --remBase ) );
		text-align: left;
		padding-bottom: calc( 120 var( --remBase ) );		
	}
	#covid-19 .list01 li{
		border-width : 2px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width : calc( 500 var( --remBase ) );
		border-radius : calc( 8 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#covid-19 .list01 p{
		padding-left : calc( 16 var( --remBase ) );
		padding-right :calc( 16 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(1) img{
		height: calc( 133 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(2) img{
		height: calc( 141 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(3) img{
		height: calc( 178 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(4) img{
		height: calc( 152 var( --remBase ) );
	}
	#covid-19 .list01 li:nth-child(5) img{
		height: calc( 165 var( --remBase ) );
	}
	
	#covid-19 .list02{
		padding-top: calc( 16 var( --remBase ) );
		width: calc( 1200 var( --remBase ) );
		margin: auto;
	}

	#covid-19 .list02 li{
		text-align: left;
	}
	#covid-19 .list02 li + li{
		margin-top : 1em;
	}
	#covid-19 .list02 li:before{
		margin-right : 1px;
		width : 26px;
		height : 20px;
		margin-top : 8px;
	}
}
/*--------------------------------------------
OUCHIDE KEIYAKU
---------------------------------------------*/
#ouchidekeiyaku.wrap{
	position : relative;
}
#ouchidekeiyaku.wrap:before , #ouchidekeiyaku .wrap:after{
	content : "";
	display : block;
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
	position : absolute;
}
#ouchidekeiyaku.wrap:before{
	background-image : url("../images/ouchidekeiyaku/bg01.png");
}
#ouchidekeiyaku.wrap:after{
	background-image : url("../images/ouchidekeiyaku/bg02.png");
}
#ouchidekeiyaku .list > li{
	counter-increment : no;
}
#ouchidekeiyaku h3{
	color : #fff;
	background-color : #f36c90;
	letter-spacing : .1em;
	width : 100%;
	position : relative;
	background-repeat : no-repeat;
}
#ouchidekeiyaku h3:before{
	content : counter(no);
	font-weight : 700;
	position : absolute;
}
#ouchidekeiyaku .list > li:nth-child(1) h3{
	background-image : url("../images/ui/icon/movie.png");
}
#ouchidekeiyaku .list > li:nth-child(2) h3{
	background-image : url("../images/ui/icon/form.png");
}
#ouchidekeiyaku .list > li:nth-child(3) h3{
	background-image : url("../images/ui/icon/webcamera.png");
}
#ouchidekeiyaku .list > li:nth-child(4) h3{
	background-image : url("../images/ui/icon/onlinenailen.png");
}
#ouchidekeiyaku .list p{
	letter-spacing : .1em;
}
#ouchidekeiyaku .list a{
	margin-left : auto;
	margin-right : auto;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	background-color : #f5d25a;
	letter-spacing : .1em;
	text-indent : .1em;
}
@media screen and ( width <= 750px ){
	#ouchidekeiyaku .wrap{
		padding-top : calc( ( 37 - 13 ) * 100vw / 768 );
		padding-bottom : calc( 92 * 100vw / 768 );
	}
	#ouchidekeiyaku .wrap:before{
		width : calc( 269 * 100% / 768 );
		height : calc( 228 * 100vw / 768 );
		top : calc( -206 * 100vw / 768 );
		left : calc( -82 * 100% / 768 );
	}
	#ouchidekeiyaku .wrap:after{
		width : calc( 198 * 100% / 768 );
		height : calc( 196 * 100vw / 768 );
		top : calc( -184 * 100vw / 768 );
		left : calc( 570 * 100% / 768 );
	}
	#ouchidekeiyaku .title01{
	}
	#ouchidekeiyaku .list{
		margin-top : calc( ( 55 - 13 ) * 100vw / 768 );
	}
	#ouchidekeiyaku .list li + li{
		margin-top : calc( 86 * 100vw / 768 );
	}
	#ouchidekeiyaku h3{
		height : calc( 200 * 100vw / 768 );
		padding-top : calc( 123 * 100vw / 768 );
		padding-left : calc( 31 * 100% / 720 );
	}
	#ouchidekeiyaku h3:before{
		top : calc( 39 * 100vw / 768 );
		left : calc( 17 * 100% / 720 );
	}
	#ouchidekeiyaku .list > li:nth-child(1) h3{
		background-size : auto calc( 138 * 100vw / 768 );
		background-position : right calc( 28 * 100% / 720 ) top 50%;
	}
	#ouchidekeiyaku .list > li:nth-child(2) h3{
		background-size : auto calc( 135 * 100vw / 768 );
		background-position : right calc( 7 * 100% / 720 ) top calc( 43 * 100vw / 768 );
	}
	#ouchidekeiyaku .list > li:nth-child(3) h3{
		background-size : auto calc( 124 * 100vw / 768 );
		background-position : right calc( 23 * 100% / 720 ) top calc( 39 * 100vw / 768 );
	}
	#ouchidekeiyaku .list > li:nth-child(4) h3{
		background-size : auto calc( 124 * 100vw / 768 );
		background-position : right calc( 23 * 100% / 720 ) top calc( 39 * 100vw / 768 );
	}
	#ouchidekeiyaku .list p{
		line-height : 2;
		margin-top : calc( ( 42 - 13 ) * 100vw / 768 );
	}
	#ouchidekeiyaku .iframe-container{
	}
	#ouchidekeiyaku .iframe-container iframe{
		margin-top : calc( 16px - 8px );
		width: calc( 350 var( --remBase ) );
		height: calc( 280 var( --remBase ) );
	}
	#ouchidekeiyaku .list a{
		margin-top : calc( ( 52 - 13 ) * 100vw / 768 );
		width : calc( 600 * 100% / 720 );
		height : calc( 80 * 100vw / 768 );
	}
	.list-banners01{
		margin-top: calc( 40 var( --remBase ) );
	}

	#ouchidekeiyaku img{
		max-width: 100%;
		height: auto;
	}
}
@media screen and ( width > 750px ) , print{
	#ouchidekeiyaku.wrap{
		padding-top : calc( 68px - 8px );
		padding-bottom : 68px;
	}
	#ouchidekeiyaku.wrap:before{
		width : 345px;
		height : 292px;
		top : -111px;
		left : -25px;
	}
	#ouchidekeiyaku.wrap:after{
		width : 278px;
		height : 260px;
		top : -93px;
		right : -18px;
	}
	#ouchidekeiyaku .title01{
		margin-top : calc( 72px - 8px );
	}
	#ouchidekeiyaku .list{
		display : flex;
		margin-top : 45px;
		column-gap: calc( 24 var( --remBase ) );
		flex-wrap: wrap;
	}
	#ouchidekeiyaku .list > li{
		width: calc( 400 var( --remBase ) );
	}
	#ouchidekeiyaku .list > li:not(:nth-child(3n+1)){
	}
	#ouchidekeiyaku h3{
		text-indent : .1em;
		height : 180px;
		text-align : center;
		padding-top : 137px;
	}
	#ouchidekeiyaku h3:before{
		top : 13px;
		left : 8px;
	}
	#ouchidekeiyaku .list > li:nth-child(1) h3{
		background-size : auto 66px;
		background-position : center 47px;
	}
	#ouchidekeiyaku .list > li:nth-child(2) h3{
		background-size : auto 73px;
		background-position : center 44px;
	}
	#ouchidekeiyaku .list > li:nth-child(3) h3{
		background-size : auto 76px;
		background-position : center 34px;
	}
	#ouchidekeiyaku .list > li:nth-child(4) h3{
		background-size : auto 76px;
		background-position : center 34px;
	}
	#ouchidekeiyaku .list p{
		margin-top : calc( 17px - 8px );
	}
	#ouchidekeiyaku .iframe-container iframe{
		margin-top : calc( 16px - 8px );
		width: calc( 400 var( --remBase ) );
		height: calc( 300 var( --remBase ) );
	}
	#ouchidekeiyaku .list a{
		margin-top : calc( 8 var( --remBase ) );
		width : 100%;
		padding: calc( 16 var( --remBase ) );
	}
	#ouchidekeiyaku img{
		max-width: 100%;
		height: auto;
	}
	.list-banners01{
		margin: auto ;
		margin-top: calc( 40 var( --remBase ) );
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc( 400 var( --remBase ) );
	}
}

@media screen and ( width <= 750px ){
	.page-contents {
		font-size: 1.4rem;
		line-height: 2.0;
		padding-top: calc( 40 var( --remBase ) );
		padding-bottom: calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.page-contents {
		font-size: 2rem;
		line-height: 2.0;
		padding-top: calc( 80 var( --remBase ) );
		padding-bottom: calc( 80 var( --remBase ) );
	}

}


@media screen and ( width <= 750px ){

}
@media screen and ( width > 750px ) , print{

}