@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--primary : #5da126;
}
/*--------------------------------------------
support
---------------------------------------------*/
@media screen and (max-width: 768px){
	#support-section01{
		margin-bottom : calc( ( 104 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#support-section02{
		margin-bottom : calc( 42 * 100vw / 768 );
	}
}
/*--------------------------------------------
safety
---------------------------------------------*/
@media screen and (max-width: 768px){
	#safety-section01{
		margin-top : calc( 38 * 100vw / 768 );
		margin-bottom : calc( ( 92 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#safety-section02{
		margin-bottom : calc( ( 79 - 13 ) * 100vw / 768 );
	}
	#safety-section02 picture{
		width : calc( 613 * 100% / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#safety-section02 picture{
		width : 500px;
	}
}
/*--------------------------------------------
ROOM
---------------------------------------------*/
@media screen and (max-width: 768px){
	#rooms > li:nth-child(1) .facility img{
		width : calc( 669 * 100% / 768 );
	}
	#rooms > li:nth-child(2) .facility img{
		width : calc( 652 * 100% / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#rooms > li:nth-child(1) .iframe-container{
		width : 1189px;
	}
	#rooms > li:nth-child(1) .facility img{
		width : 520px;
	}
	#rooms > li:nth-child(2) .iframe-container{
		width : 1200px;
	}
	#rooms > li:nth-child(2) .facility img{
		width : 506px;
	}
}
/*--------------------------------------------
facility
---------------------------------------------*/
@media screen and (max-width: 768px){
	#facility-section01{
		margin-bottom : calc( ( 110 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section02{
		margin-bottom : calc( ( 144 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section03 , #facility-section13{
		margin-bottom : calc( ( 128 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section04{
		margin-bottom : calc( ( 132 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section05{
		margin-bottom : calc( ( 163 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section06{
		margin-bottom : calc( ( 171 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section07{
		margin-bottom : calc( ( 154 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section08{
		margin-bottom : calc( ( 193 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section09{
		margin-bottom : calc( ( 159 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section10{
		margin-bottom : calc( ( 210 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section11{
		margin-bottom : calc( ( 213 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section12{
		margin-bottom : calc( ( 150 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#facility-section14{
		margin-bottom : calc( 150 * 100vw / 768 );
		position: relative;
	}
	#facility-section14 .wrap{
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
		#facility-section14 .message{
			text-align: center;
			font-size: 4.6rem;
			margin-bottom: 1em;
			color: #f16d90;
		}
	.theta_wrap:before{
		content : "";
		display : block;
		position : absolute;
		left : 0;
		width : 100%;
		background-color : #fef4f7;
		height : calc( 350 * 100vw / 768 );
		top : calc( -70 * 100vw / 768 );
		z-index : -1;
	}
}
@media screen and (min-width: 769px){
	#facility-section14{
		margin-bottom : 50px;
		margin-top : 150px;
		position: relative;
	}
		#facility-section14 .message{
			text-align: center;
			font-size: 3rem;
			margin-bottom: 1em;
			color: #f16d90;
		}
	.theta_wrap:before{
		content : "";
		display : block;
		position : absolute;
		left : 0;
		width : 100%;
		background-color : #fef4f7;
		height : 150px;
		top : -50px;
		z-index : -1;
	}
}


/*--------------------------------------------
RESTAURANT
---------------------------------------------*/
@media screen and (max-width: 768px){
	#restaurant-section01{
		margin-top : calc( -55 * 100vw / 768 );
		margin-bottom : calc( 90 * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#restaurant-section04{
		margin-bottom : calc( ( 119 - 13 ) * 100vw / 768 );
	}
}
/*--------------------------------------------
EVENT
---------------------------------------------*/
@media screen and (max-width: 768px){
	#event-section01{
		margin-bottom : calc( 142 * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#event-section02{
		margin-bottom : calc( ( 153 - 40 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#event-section03{
		margin-bottom : calc( ( 214 - 13 ) * 100vw / 768 );
	}
}
/*--------------------------------------------
PRICE
---------------------------------------------*/
@media screen and (max-width: 768px){
	#price-section01{
		margin-bottom : calc( ( 114 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#price-section02{
		margin-bottom : calc( 108 * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#price-section03{
		margin-bottom : calc( ( 84 - 13 ) * 100vw / 768 );
	}
}
@media screen and (max-width: 768px){
	#price-section04{
		margin-bottom : calc( ( 178 - 13 ) * 100vw / 768 );
	}
}
/*--------------------------------------------
ACCESS
---------------------------------------------*/
@media print,screen and (min-width: 769px){
	#access{
		margin-top : -46px;
	}
}
/*--------------------------------------------
VOICES
---------------------------------------------*/
@media screen and (max-width: 768px){
	#voices .wrap{
		padding-top : calc( 51 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#voices .wrap{
		padding-top : 41px;
	}
}

/*--------------------------------------------
FORM
---------------------------------------------*/
.contact #title h1:before , .apply #title h1:before , .request #title h1:before , .flow #title h1:before{
	content : "北園";
}