@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 60 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( width > 750px ) , print{
	:root{
		--headerHeight : calc( 120 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( width >= 1960px ){
	:root{
		font-size : 10px;
	}
}
html{
	scroll-padding-block-start : var( --headerHeight );
}
body{
	background-color : var( --bgBase );
}
body:not( :has( #header.fixed ) ){
	padding-top : var( --headerHeight );
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
@media screen and ( width < 1960px ){
	.container{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	.container{
		width : calc( ( var( --breakPoint ) * 1px ) );
		padding-inline : calc( var( --gutter ) * 1px );
		margin-inline : auto;
	}
}
@media screen and ( width <= 750px ){
	.container-sp{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	.container-pc{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	.container-pc{
		width : calc( ( var( --breakPoint ) * 1px ) );
		padding-inline : calc( var( --gutter ) * 1px );
		margin-inline : auto;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width < 1960px ){
	.wrap{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	.wrap{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}
@media screen and ( width <= 750px ){
	.wrap-sp{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	.wrap-pc{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media screen and ( width > 750px ) , print{
	.is-sp{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-tb{
		display : none;
	}
}
@media screen and ( width >= 1960px ){
	.is-tb{
		display : none;
	}
}

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visuallyhidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
@media screen and ( width <= 750px ){
	[data-before-sp]::before{
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]::before , [data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( width <= 750px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]::before , [data-both-sp]::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width > 750px ) , print{
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]::before , [data-both-pb]::after{
		white-space : pre;
		content : attr( data-both );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
@media screen and ( width <= 750px ){
	br.sp-space{
		content : "";
	}
	br.sp-space::after{
		content : " ";
	}
}
@media screen and ( width > 750px ) , print{
	br.pc-space{
		content : "";
	}
	br.pc-space::after{
		content : " ";
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width <= 750px ){
	.lh-up-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media screen and ( width > 750px ) , print{
	.lh-up-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	width : 100%;
	height : var( --headerHeight );
}
#header .logo{
	display : block;
	width : fit-content;
}
#header:not( .transparent ){
	background-color : color-mix( in sRGB , var( --bgBase ) 100% , transparent );
}
#header.transparent{
	background-color : color-mix( in sRGB , var( --bgBase ) 0% , transparent );
}
@media screen and ( width <= 750px ){
	#header{
		align-items : start;
		padding-top : calc( 8 var( --remBase ) );
	}
	#header .logo img{
		height : calc( 44 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#header{
		display : grid;
		align-items : center;
	}
	#header .logo{
		grid-row : 1;
		grid-column : 2;
	}
	#header .logo img{
		height : calc( 62 var( --remBase ) );
	}
	#header:has( #menuBtn[aria-expanded="true"] ){
		padding-right : var( --scrollbarWidth );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#header{
		grid-template-columns : calc( 24 var( --viewportBase ) ) auto 1fr calc( 1000 var( --viewportBase ) ) calc( 25 var( --viewportBase ) ) calc( 120 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#header{
		grid-template-columns : 24px auto 1fr 872px 25px 120px;
	}
}

@media screen and ( 750px < width <= 1200px ) {
	#header{
		grid-template-columns : calc( 24 var( --viewportBase ) ) auto 1fr calc( 872 var( --viewportBase ) ) calc( 25 var( --viewportBase ) ) calc( 120 var( --viewportBase ) );
	}
}@media screen and ( 1200px < width < 1568px ) {
	#header{
		grid-template-columns : calc( 24 var( --viewportBase ) ) auto 1fr calc( 1100 var( --viewportBase ) ) calc( 25 var( --viewportBase ) ) calc( 120 var( --viewportBase ) );
	}
}

@media ( prefers-reduced-motion : no-preference ){
	#header{
		transition : background-color var( --transitionBase );
	}
}
@media screen and ( width > 750px ) , print{
	:where( #headerContacts , #headerLinks ){
		font-family : "Zen Kaku Gothic New" , sans-serif;
	}
}
@media screen and ( width > 750px ) , print{
	#headerLinks{
		display : grid;
		grid-template-rows : calc( 60 var( --remBase ) );
		grid-template-columns : repeat( 3 , calc( 280 * 100% / 872 ) );
		grid-row : 1;
		grid-column : 4;
		column-gap : calc( 16 * 100% / 872 );
		align-items : center;
		justify-content : end;
	}
	#headerLinks a{
		display : grid;
		grid-template-rows : 1fr auto  auto 1fr;
		column-gap : calc( 8 * 100% / 280 );
		justify-content : start;
		width : 100%;
		height : 100%;
		background-color : white;
	}
	#headerLinks img{
		grid-row : 1/-1;
		grid-column : 1;
	}
	#headerLinks span{
		grid-column : 2;
		font-family : "Noto Serif JP" , serif;
		line-height : 1.5;
		letter-spacing : -.022em;
	}
	#headerLinks span:nth-of-type( 1 ){
		grid-row : 2;
		font-size : 1.8rem;
	}
	#headerLinks span:nth-of-type( 2 ){
		grid-row : 3;
		font-size : 1.2rem;
	}
}
@media screen and ( 750px < width <= 1200px ) {
	#headerLinks a{

	}
}@media screen and ( 1200px < width < 1568px ) {
	#headerLinks a{

	}
}
/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
body:has( #menuBtn[aria-expanded="true"] ){
	overflow : hidden;
}
#menuBtn[aria-expanded="true"]{
	overflow : hidden;
}
#menuBtn{
	z-index : 12;
	overflow : hidden;
}
#menuBtn > span:nth-of-type( 1 ){
	position : relative;
	display : block;
	font-size : 0;
}
#menuBtn > span:nth-of-type( 1 ) > span{
	position : absolute;
	left : 0;
	display : block;
	width : 100%;
	transition : all .4s;
}
#menuBtn > span:nth-of-type( 1 ) > span:first-of-type{
	top : 0;
}
#menuBtn > span:nth-of-type( 1 ) > span:last-of-type{
	bottom : 0;
}
#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span{
	top : 50%;
	translate : 0 - 50%;
}
#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span:first-of-type{
	rotate : -45deg;
}
#menuBtn[aria-expanded="true"] > span:nth-of-type( 1 ) span:last-of-type{
	rotate : 45deg;
}
#menuBtn > span:nth-of-type( 1 ) span{
	background-color : var( --base );
}
#menuBtn > span:nth-of-type( 2 ){
	display : block;
	font-family : Actor , sans-serif;
	text-align : center;
}
#menuBtn[aria-expanded="true"] > span:nth-of-type( 2 ){
	opacity : 0;
}
#menuBtn[aria-expanded="false"] > span:nth-of-type( 2 ){
	opacity : 1;
}
@media screen and ( width <= 750px ){
	#menuBtn{
		position : fixed;
		top : 0;
		right : 0;
		z-index : 12;
		width : calc( 60 var( --viewportBase ) );
		height : calc( 60 var( --remBase ) );
		padding-block : calc( 10 var( --remBase ) );
		padding-top : calc( 18.75 var( --remBase ) );
		background-color : white;
	}
	#menuBtn > span:nth-of-type( 1 ){
		width : 100%;
		width : calc( 23 * 100% / 60 );
		height : calc( 12 var( --remBase ) );
		margin-inline : auto;
	}
	#menuBtn > span:nth-of-type( 1 ) > span{
		height : calc( 1.5 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 2 ){
		margin-top : calc( 7.25 var( --remBase ) );
		font-size : 1.2rem;
	}
}
@media screen and ( width > 750px ) , print{
	#menuBtn{
		grid-row : 1;
		grid-column : 6;
		width : 100%;
		height : var( --headerHeight );
		padding-inline : calc( 39 * 100% / 120 );
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 35 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 1 ){
		width : 100%;
		height : calc( 15 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 1 ) > span{
		height : calc( 2 var( --remBase ) );
	}
	#menuBtn > span:nth-of-type( 2 ){
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#menuBtn > span:nth-of-type( 2 ){
		transition : opacity .4s ease-in;
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
#nav{
	position : fixed;
	top : 0;
	right : 0;
	z-index : 11;
	grid-template-rows : 1fr;
	justify-content : end;
	width : 100%;
	height : 100dvh;
	overflow-y : auto;
	background-color : rgb( 43 46 56 / .9 );
	animation-duration : .3s;
	animation-timing-function : ease;
	animation-delay : 0s;
}
#nav .scroll{
	background-color : var( --color0102 );
}
#nav .dorm{
	background-color : white;
}
#nav .dorm h4 a{
	display : block;
	font-family : "Noto Serif JP" , serif;
	font-weight : 500;
	border-bottom-color : #d9d9d9;
	border-bottom-width : 1px;
}
#nav .dorm > a{
	display : block;
}
#nav .group h4 a{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 500;
}
#nav[aria-hidden="false"]{
	display : grid;
	animation-name : navOpen;
}
#nav[aria-hidden="true"]{
	display : none;
	animation-name : navClose;
}
@media screen and ( width <= 750px ){
	#nav{
		grid-template-columns : calc( 336 var( --viewportBase ) );
	}
	#nav .dorm{
		padding-inline : calc( 16 * 100% / 336 );
		padding-top : calc( 45 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#nav .dorm h4 a{
		padding-bottom : calc( 16 var( --remBase ) );
		font-size : 2.2rem;
	}
	#nav .dorm > a{
		width : 100%;
		margin-top : calc( 24 var( --remBase ) );
	}
	#nav .dorm > a img{
		width : 100%;
		height : auto;
	}
	#nav .group .box{
		padding-block : calc( 40 var( --remBase ) );
		padding-inline : calc( 16 * 100% / 336 );
		color : white;
	}
	#nav .group h4 a{
		font-size : 2.2rem;
		line-height : 1.3;
	}
}
@media screen and ( width > 750px ) , print{
	#nav :where( .dorm , .group ){
		padding-inline : calc( 40 * 100% / 680 );
	}
	#nav .dorm{
		display : grid;
		grid-template-rows : auto  auto  auto  calc( 80 var( --remBase ) )  auto calc( 89 var( --remBase ) );
		grid-template-columns : calc( 320 * 100% / 600 ) 1fr;
		row-gap : calc( 24 var( --remBase ) );
		column-gap : calc( 20 * 100% / 600 );
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 62 var( --remBase ) );
	}
	#nav .dorm h4{
		grid-row : 1;
		grid-column : 1/3;
	}
	#nav .dorm h4 a{
		padding-bottom : calc( 24 var( --remBase ) );
		font-size : 3rem;
	}
	#nav .dorm p{
		grid-row : 2;
		grid-column : 1/3;
		font-family : "Zen Kaku Gothic New" , sans-serif;
		font-size : 2.2rem;
	}
	#nav .dorm p a{
		margin-left : .5em;
	}
	#nav .dorm > a{
		display : block;
		grid-row : 6;
		grid-column : 1/3;
		height : 100%;
	}
	#nav .dorm > a img{
		height : 100%;
	}
	#nav .group{
		display : grid;
		grid-template-columns : calc( 380 * 100% / 600 ) 1fr;
		row-gap : calc( 32 var( --remBase ) );
		column-gap : calc( 16 * 100% / 600 );
		padding-block : calc( 80 var( --remBase ) );
		color : white;
	}
	#nav .group h4 a{
		font-size : 2.4rem;
	}
	#nav .group h4{
		grid-row : 1;
		grid-column : 1/3;
	}
	#nav .group .box{
		display : contents;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#nav{
		grid-template-columns : calc( 680 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#nav{
		grid-template-columns : 680px;
	}
}
@keyframes navOpen{
	0%{
		opacity : 0;
		scale : 1.05;
	}
	100%{
		opacity : 1;
		scale : 1;
	}
}
@keyframes navClose{
	0%{
		display : grid;
		opacity : 1;
		scale : 1;
	}
	100%{
		display : none;
		opacity : 0;
		scale : .95;
	}
}
#dormContacts{
	font-family : "Zen Kaku Gothic New" , sans-serif;
}
#dormContacts ul{
	display : grid;
}
#dormContacts a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
}
#dormContacts a::before{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	filter : var( --filterColor0102 );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#dormContacts li:nth-child( 1 ) a{
	letter-spacing : .1em;
}
#dormContacts li:nth-child( 1 ) a::before{
	background-image : url( "../../images/ui/icon/tel01.svg" );
}
#dormContacts li:nth-child( 2 ) a::before{
	background-image : url( "../../images/ui/icon/email01.svg" );
}
#dormContacts li:nth-child( 3 ) a::before{
	background-image : url( "../../images/ui/icon/comment.svg" );
}
@media screen and ( width <= 750px ){
	#dormContacts{
		margin-top : calc( 24 var( --remBase ) );
	}
	#dormContacts figcaption{
		font-size : 1.4rem;
	}
	#dormContacts ul{
		grid-template-columns : auto 1fr;
		row-gap : calc( 17 var( --remBase ) );
		column-gap : calc( 29 * 100% / 304 );
		justify-content : start;
		margin-top : calc( 13 var( --remBase ) );
	}
	#dormContacts li:nth-child( 1 ){
		grid-row : 1;
		grid-column : 1/3;
	}
	#dormContacts li:nth-child( 1 ) a{
		column-gap : calc( 5 * 100% / 304 );
		font-size : 3rem;
	}
	#dormContacts li:nth-child( 1 ) a::before{
		height : calc( 22.93 var( --remBase ) );
		aspect-ratio : 24/22.93;
	}
	#dormContacts li:nth-child( 2 ) a{
		column-gap : calc( 4.71 var( --remBase ) );
		font-size : 2rem;
	}
	#dormContacts li:nth-child( 2 ) a::before{
		height : calc( 22 var( --remBase ) );
		aspect-ratio : 27.29/22;
	}
	#dormContacts li:nth-child( 3 ) a{
		column-gap : calc( 4.52 var( --remBase ) );
		font-size : 2rem;
	}
	#dormContacts li:nth-child( 3 ) a::before{
		height : calc( 25 var( --remBase ) );
		aspect-ratio : 26.48/25;
	}
}
@media screen and ( width > 750px ) , print{
	#dormContacts{
		grid-row : 3;
		grid-column : 1/3;
	}
	#dormContacts figcaption{
		font-size : 2.2rem;
	}
	#dormContacts ul{
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		margin-top : calc( 8 var( --remBase ) );
	}
	#dormContacts li:nth-child( 1 ) a{
		column-gap : calc( 2.22 var( --remBase ) );
		font-size : 4rem;
	}
	#dormContacts li:nth-child( 1 ) a::before{
		height : calc( 29.56 var( --remBase ) );
		aspect-ratio : 30.94/29.56;
	}
	#dormContacts li:nth-child( 2 ){
		margin-left : calc( 23 var( --remBase ) );
	}
	#dormContacts li:nth-child( 2 ) a{
		column-gap : calc( 3.58 var( --remBase ) );
		font-size : 2.2rem;
	}
	#dormContacts li:nth-child( 2 ) a::before{
		height : calc( 27.41 var( --remBase ) );
		aspect-ratio : 34/27.41;
	}
	#dormContacts li:nth-child( 3 ){
		margin-left : calc( 10 var( --remBase ) );
	}
	#dormContacts li:nth-child( 3 ) a{
		column-gap : calc( 8 var( --remBase ) );
		font-size : 2.2rem;
	}
	#dormContacts li:nth-child( 3 ) a::before{
		height : calc( 28.32 var( --remBase ) );
		aspect-ratio : 30/28.32;
	}
}
#dormLinks{
	display : grid;
	grid-template-columns : repeat( 2 , 50% );
	font-family : "Zen Kaku Gothic New" , sans-serif;
}
#dormLinks li{
	width : 100%;
	height : 100%;
}
#dormLinks a{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	width : 100%;
	height : 100%;
}
#dormLinks a::before{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	filter : var( --filterBase );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#dormLinks li:nth-child( 1 ) a{
	background-color : #ffbe46;
}
#dormLinks li:nth-child( 1 ) a::before{
	background-image : url( "../../images/ui/icon/edit01.svg" );
}
#dormLinks li:nth-child( 2 ) a{
	background-color : #deedc0;
}
#dormLinks li:nth-child( 2 ) a::before{
	background-image : url( "../../images/ui/icon/document01.svg" );
}
@media screen and ( width <= 750px ){
	#dormLinks{
		grid-template-rows : calc( 52 var( --remBase ) );
		margin-top : calc( 17 var( --remBase ) );
	}
	#dormLinks a{
		justify-content : start;
		font-size : 1.6rem;
	}
	#dormLinks li:nth-child( 1 ) a{
		column-gap : calc( 16.57 * 100% / 131 );
		padding-left : calc( 21 * 100% / 152 );
	}
	#dormLinks li:nth-child( 1 ) a::before{
		height : calc( 32 var( --remBase ) );
		aspect-ratio : 25.43/32;
	}
	#dormLinks li:nth-child( 2 ) a{
		column-gap : calc( 10.86 * 100% / 130 );
		padding-left : calc( 22 * 100% / 152 );
	}
	#dormLinks li:nth-child( 2 ) a::before{
		height : calc( 31.34 var( --remBase ) );
		aspect-ratio : 29.14/31.34;
	}
}
@media screen and ( width > 750px ) , print{
	#dormLinks{
		grid-template-rows : calc( 80 var( --remBase ) );
		grid-row : 4;
		grid-column : 1/3;
	}
	#dormLinks a{
		justify-content : center;
		font-size : 2.2rem;
	}
	#dormLinks li:nth-child( 1 ) a{
		column-gap : calc( 4.67 * 100% / 300 );
	}
	#dormLinks li:nth-child( 1 ) a::before{
		height : calc( 31.34 var( --remBase ) );
		aspect-ratio : 29.14/31.34;
	}
	#dormLinks li:nth-child( 2 ) a{
		column-gap : calc( 5 * 100% / 300 );
	}
	#dormLinks li:nth-child( 2 ) a::before{
		height : calc( 32 var( --remBase ) );
		aspect-ratio : 25.43/32;
	}
}
#dormNavGlobal{
	font-family : "Zen Kaku Gothic New" , sans-serif;
}
#dormNavGlobal a{
	display : grid;
	align-items : center;
	justify-content : start;
}
#dormNavGlobal a::before{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#dormNavGlobal li:nth-child( 1 ) a::before{
	background-image : url( "../../images/nav/nav0101.webp" );
}
#dormNavGlobal li:nth-child( 2 ) a::before{
	background-image : url( "../../images/nav/nav0102.webp" );
}
#dormNavGlobal li:nth-child( 3 ) a::before{
	background-image : url( "../../images/nav/nav0103.webp" );
}
#dormNavGlobal li:nth-child( 4 ) a::before{
	background-image : url( "../../images/nav/nav0104.webp" );
}
#dormNavGlobal li:nth-child( 5 ) a::before{
	background-image : url( "../../images/nav/nav0105.webp" );
}
#dormNavGlobal li:nth-child( 6 ) a::before{
	background-image : url( "../../images/nav/nav0106.webp" );
}
@media screen and ( width <= 750px ){
	#dormNavGlobal{
		margin-top : calc( 24 var( --remBase ) );
	}
	#dormNavGlobal li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#dormNavGlobal a{
		grid-template-columns : calc( 60 * 100% / 304 ) auto;
		column-gap : calc( 8 * 100% / 304 );
		font-size : 2rem;
		letter-spacing : -.022em;
	}
	#dormNavGlobal a::before{
		height : calc( 45 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#dormNavGlobal{
		grid-template-columns : 1;
		grid-row : 5;
	}
	#dormNavGlobal li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#dormNavGlobal a{
		grid-template-columns : calc( 72 * 100% / 320 ) auto;
		column-gap : calc( 8 * 100% / 320 );
		font-size : 2rem;
		letter-spacing : -.022em;
	}
	#dormNavGlobal a::before{
		height : calc( 54 var( --remBase ) );
	}
}
#dormNavSub a{
	display : grid;
	align-items : start;
	justify-content : start;
	letter-spacing : -.022em;
}
#dormNavSub a::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --color0102 );
}
@media screen and ( width <= 750px ){
	#dormNavSub{
		padding-top : calc( 20 var( --remBase ) );
		margin-top : calc( 20 var( --remBase ) );
		border-top : solid 1px #cfd2d9;
	}
	#dormNavSub li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#dormNavSub a{
		grid-template-columns : calc( 6.06 * 100% / 302.25 ) auto;
		column-gap : calc( 8 * 100% / 302.25 );
		padding-block : calc( 8 var( --remBase ) );
		padding-left : calc( 1.75 * 100% / 304 );
		font-size : 1.8rem;
	}
	#dormNavSub a::before{
		height : calc( 5.25 var( --remBase ) );
		margin-top : calc( 6.375 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 50% , 0 100% );
	}
}
@media screen and ( width > 750px ) , print{
	#dormNavSub{
		grid-row : 5;
		grid-column : 2;
		padding-left : calc( ( 20 * 100% / 260 ) - 1px );
		border-left-color : #d9d9d9;
		border-left-width : 1px;
	}
	#dormNavSub a{
		grid-template-columns : auto auto;
		column-gap : calc( 8 * 100% / 240 );
		padding-block : calc( 16 var( --remBase ) );
		font-size : 2rem;
	}
	#dormNavSub a::before{
		height : calc( 7 var( --remBase ) );
		aspect-ratio : 1;
		margin-top : calc( 6.5 var( --remBase ) );
		border-radius : 50%;
	}
}
#groupNavSub a{
	font-family : "Zen Kaku Gothic New" , sans-serif;
}
@media screen and ( width <= 750px ){
	#groupNavSub{
		padding-inline : calc( 16 * 100% / 336 );
		padding-bottom : calc( 28 var( --remBase ) );
		background-color : white;
	}
	#groupNavSub::before{
		display : block;
		width : 100%;
		height : 1px;
		margin-bottom : calc( 24 var( --remBase ) );
		content : "";
		background-color : #fff;
		background-color : #cfd2d9;
	}
	#groupNavSub li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#groupNavSub a{
		display : grid;
		grid-template-columns : calc( 6.06 * 100% / 302.25 ) auto;
		column-gap : calc( 8 * 100% / 302.25 );
		padding-block : calc( 8 var( --remBase ) );
		padding-left : calc( 1.75 * 100% / 304 );
		font-size : 1.8rem;
	}
	#groupNavSub a::before{
		display : block;
		width : 100%;
		height : calc( 5.25 var( --remBase ) );
		margin-top : calc( 6.375 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 50% , 0 100% );
		font-size : 0;
		content : "";
		background-color : var( --color0102 );
	}
}
@media screen and ( width > 750px ) , print{
	#groupNavSub{
		grid-row : 2;
		grid-column : 2;
		padding-left : calc( ( 16 * 100% / 204 ) - 1px );
		border-left-color : white;
		border-left-width : 1px;
	}
	#groupNavSub li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#groupNavSub a{
		display : block;
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 15 * 100% / 188 );
		font-size : 2rem;
		letter-spacing : -.022em;
	}
}
#groupNavGlobal a{
	display : grid;
	grid-template-rows : 1fr auto auto 1fr;
	align-items : center;
	justify-content : start;
	font-family : "Zen Kaku Gothic New" , sans-serif;
}
#groupNavGlobal a::before{
	display : block;
	grid-row : 1/-1;
	grid-column : 1;
	width : 100%;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#groupNavGlobal span:nth-of-type( 1 ){
	grid-row : 2;
	grid-column : 2;
	font-weight : 400;
	line-height : 1.5;
	letter-spacing : -.022em;
}
#groupNavGlobal span:nth-of-type( 2 ){
	grid-row : 3;
	grid-column : 2;
	line-height : 1.5;
	letter-spacing : -.022em;
}
#groupNavGlobal li:nth-child( 1 ) a::before{
	background-image : url( "../../images/nav/nav0201.webp" );
}
#groupNavGlobal li:nth-child( 2 ) a::before{
	background-image : url( "../../images/nav/nav0202.webp" );
}
#groupNavGlobal li:nth-child( 3 ) a::before{
	background-image : url( "../../images/nav/nav0203.webp" );
}
#groupNavGlobal li:nth-child( 4 ) a::before{
	background-image : url( "../../images/nav/nav0204.webp" );
}
@media screen and ( width <= 750px ){
	#groupNavGlobal{
		margin-top : calc( 24 var( --remBase ) );
	}
	#groupNavGlobal li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#groupNavGlobal a{
		grid-template-columns : calc( 80 * 100% / 304 ) auto;
		column-gap : calc( 8 * 100% / 304 );
	}
	#groupNavGlobal a::before{
		height : calc( 60 var( --remBase ) );
	}
	#groupNavGlobal span:nth-of-type( 1 ){
		font-size : 2rem;
	}
	#groupNavGlobal span:nth-of-type( 2 ){
		font-size : 1.2rem;
	}
}
@media screen and ( width > 750px ) , print{
	#groupNavGlobal{
		grid-row : 2;
		grid-column : 1;
	}
	#groupNavGlobal li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#groupNavGlobal a{
		grid-template-columns : calc( 120 * 100% / 380 ) auto;
		column-gap : calc( 8 * 100% / 380 );
	}
	#groupNavGlobal a::before{
		height : calc( 80 var( --remBase ) );
	}
	#groupNavGlobal span:nth-of-type( 1 ){
		font-size : 2.4rem;
	}
	#groupNavGlobal span:nth-of-type( 2 ){
		font-size : 1.4rem;
	}
}
@media screen and ( width <= 750px ){
	#menuBtnClose{
		display : block;
		width : fit-content;
		margin-inline : auto;
		margin-top : calc( 49 var( --remBase ) );
	}
	#menuBtnClose img{
		height : calc( 26.87 var( --remBase ) );
	}
}

/* --------------------------------------------
TOP
--------------------------------------------- */
#mv{
	position : relative;
	width : 100%;
	overflow-x : clip;
}
#mv video{
	object-fit : cover;
	position : absolute;
	height : 100%;
}
#mv h1{
	position : absolute;
	inset : 0;
	width : fit-content;
	height : fit-content;
	margin : auto;
	font-size : 0;
}
@media screen and ( width <= 750px ){
	#mv{
		height : 100svh;
	}
	#mv video{
		width : 100%;
		height : 100%;
	}
	#mv h1 img{
		height : calc( 194 var( --remBase ) );
	}
	#mv > a{
		position : absolute;
		bottom : calc( 18 var( --remBase ) );
		right : calc( 18 var( --viewportBase ) );
		display : block;
		width : fit-content;
	}
	#mv > a img{
		height : calc( 100 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#mv{
		height : calc( 1183 var( --remBase ) );
		overflow-y : clip;
	}
	#mv video{
		top : 0;
		left : calc( -64 * 100% / 1960 );
		width : calc( 2171 * 100% / 1960 );
		height : calc( 1221 * 100vw / 1960 );
		clip-path : polygon( calc( 64 * 100% / 2171 ) 0 , calc( 2024 * 100% / 2171 ) 0 , calc( 2024 * 100% / 2171 ) 100% , calc( 64 * 100% / 2171 ) 100% );
	}
	#mv h1 img{
		height : calc( 360 * 100vw / 1960 );
	}
}
#mv #notice{
	position : absolute;
}
#mv #notice h2{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	font-family : "Noto Sans JP" , sans-serif;
	color : white;
	background-color : var( --color0102 );
}
#mv #notice h2::before{
	display : block;
	width : 100%;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : url( "../../images/ui/icon/info01_white.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#mv #notice a{
	color : #454545;
}
@media screen and ( width <= 750px ){
	#mv #notice{
		bottom : calc( -10 var( --remBase ) );
		left : calc( 16 var( --viewportBase ) );
		width : calc( 368 var( --viewportBase ) );
		padding-bottom : calc( 10 var( --remBase ) );
	}
	#mv #notice h2{
		position : relative;
		column-gap : calc( 8 * 100% / 353.28 );
		padding-block : calc( 6 var( --remBase ) );
		padding-left : calc( 14.72 var( --percentBase ) );
		font-size : 1.4rem;
		line-height : 2;
	}
	#mv #notice h2::before{
		height : calc( 18 var( --remBase ) );
	}
	#mv #notice ul{
		padding-inline : calc( 8 var( --percentBase ) );
		padding-top : calc( 8 var( --remBase ) );
		background-color : white;
	}
	#mv #notice li + li{
		margin-top : calc( 8 var( --remBase ) );
	}
	#mv #notice a{
		font-size : 1.2rem;
		line-height : 1.5;
	}
}
@media screen and ( width > 750px ) , print{
	#mv #notice{
		bottom : 0;
		display : grid;
		grid-template-rows : calc( 35 var( --remBase ) ) calc( 26 var( --remBase ) ) 1fr;
		grid-template-columns : calc( 480 * 100% / 760 ) 1fr;
	}
	#mv #notice h2{
		position : relative;
		grid-row : 1/3;
		grid-column : 1;
		column-gap : calc( 5 * 100% / 437 );
		padding-top : calc( 15 var( --remBase ) );
		padding-bottom : calc( 12 var( --remBase ) );
		padding-left : calc( 43 * 100% / 760 );
		font-size : 2rem;
		line-height : 1.7;
	}
	#mv #notice h2::before{
		height : calc( 24 var( --remBase ) );
	}
	#mv #notice ul{
		grid-row : 2/4;
		grid-column : 1/3;
		padding-inline : calc( 40 * 100% / 760 );
		padding-top : calc( 50 var( --remBase ) );
		padding-bottom : calc( 27 var( --remBase ) );
		background-color : var( --bgBase );
	}
	#mv #notice li + li{
		margin-top : calc( 11 var( --remBase ) );
	}
	#mv #notice a{
		font-size : 2rem;
		line-height : 1.7;
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#mv #notice{
		left : 0;
		width : calc( 760 var( --percentBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#mv #notice{
		/* left:calc( 50% - 980px ); */
		left : 0;
		width : 760px;
	}
}

/* --------------------------------------------
PAGES
--------------------------------------------- */
#title01{
	position : relative;
	overflow : clip;
}
#title01::before{
	position : absolute;
	bottom : 0;
	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;
}
#title01 video , #title01 picture{
	position : absolute;
	z-index : 0;
}
#title01 picture{
	top : 0;
}
#title01 :where( h1 , h2 ){
	position : relative;
	z-index : 1;
	width : fit-content;
	line-height : 1.3;
	color : white;
	letter-spacing : .1em;
	border-image-source : linear-gradient( var( --color01 ) , var( --color01 ) ) ;
	border-image-source : repeating-linear-gradient( 45deg , #d98da3 , #d98da3 1.4142px , var( --color01 ) 1.4142px , var( --color01 ) 4px );
	border-image-slice : 0 fill;
	border-image-outset : 0 0 0 100vw;
}
@media screen and ( width <= 750px ){
	#title01{
		height : calc( 193 var( --remBase ) );
		padding-top : calc( 111 var( --remBase ) );
	}
	#title01::before{
		left : calc( 72 var( --viewportBase ) );
		height : calc( 178 var( --remBase ) );
	}
	#title01 :where( h1 , h2 ){
		min-width : calc( 240 var( --remBase ) );
		padding-block : calc( 8 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		padding-right : calc( 40 var( --remBase ) );
		font-size : 3.2rem;
	}
	#title01 :where( h1 , h2 ) span{
		font-size : 1.6rem;
	}
	#title01 video{
		width : calc( 560 var( --viewportBase ) );
		height : calc( 210 var( --remBase ) );
	}
	#title01 picture{
		left : 0;
	}
	#title01 picture img{
		height : calc( 140 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#title01{
		height : calc( 432 var( --remBase ) );
		padding-top : calc( 258 var( --remBase ) );
	}
	#title01::before{
		left : 0;
		height : calc( 400 var( --remBase ) );
	}
	#title01 :where( h1 , h2 ){
		min-width : calc( 480 var( --remBase ) );
		padding-block : calc( 20 var( --remBase ) );
		padding-right : calc( 40 var( --remBase ) );
		font-size : 6rem;
	}
	#title01 :where( h1 , h2 ) span{
		font-size : 4rem;
	}
	#title01 video{
		height : calc( 600 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#title01 video{
		width : calc( 1600 var( --viewportBase ) );
	}
	#title01 picture{
		left : calc( 387 var( --viewportBase ) );
	}
	#title01 picture img{
		height : calc( 400 var( --remBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#title01 video{
		width : 1600px;
	}
	#title01 picture{
		left : calc( 50% + ( -980px + 387px ) );
	}
}
@media screen and ( width <= 750px ){
	#title01.safety video{
		top : calc( -50.75 var( --remBase ) );
		left : calc( -91 var( --viewportBase ) );
		clip-path : polygon( calc( 79.4326 * 100% / 560 ) calc( 50.75 * 100% / 210 ) , 100% calc( 50.75 * 100% / 210 ) , 100% calc( 190.75 * 100% / 210 ) , calc( 79.4326 * 100% / 560 ) calc( 190.75 * 100% / 210 ) );
	}
}
@media screen and ( width > 750px ) , print{
	#title01.safety video{
		top : calc( -145 var( --remBase ) );
		clip-path : polygon( calc( 27 * 100% / 1600 ) calc( 145 * 100% / 600 ) , 100% calc( 145 * 100% / 600 ) , 100% calc( 545 * 100% / 600 ) , calc( 27 * 100% / 1600 ) calc( 545 * 100% / 600 ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#title01.safety video{
		left : calc( 387 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#title01.safety video{
		left : calc( 50% - 593px );
	}
}
@media screen and ( width <= 750px ){
	#title01.room video{
		top : calc( -23.8  var( --remBase ) );
		left : calc( -105 var( --viewportBase ) );
		clip-path : polygon( calc( 105 * 100% / 560 ) calc( 23.8 * 100% / 210 ) , 100% calc( 23.8 * 100% / 210 ) , 100% calc( 163.8 * 100% / 210 ) , calc( 105 * 100% / 560 ) calc( 163.8 * 100% / 210 ) );
	}
}
@media screen and ( width > 750px ) , print{
	#title01.room video{
		top : calc( -68 var( --remBase ) );
		clip-path : polygon( calc( 13 * 100% / 1600 ) calc( 68 * 100% / 600 ) , 100% calc( 68 * 100% / 600 ) , 100% calc( 468 * 100% / 600 ) , calc( 13 * 100% / 1600 ) calc( 468 * 100% / 600 ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#title01.room video{
		left : calc( 374 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#title01.room video{
		left : calc( 50% - 606px );
	}
}
@media screen and ( width <= 750px ){
	#title01.facility video{
		top : calc( -89.6  var( --remBase ) );
		left : calc( -8.4 var( --viewportBase ) );
		width : calc( 565.25 var( --viewportBase ) );
		height : calc( 318.15 var( --remBase ) );
		clip-path : polygon( calc( 8.4 * 100% / 565.25 ) calc( 89.6 * 100% / 318.15 ) , 100% calc( 89.6 * 100% / 318.15 ) , 100% calc( 407.75 * 100% / 318.15 ) , calc( 8.4 * 100% / 565.25 ) calc( 407.75 * 100% / 318.15 ) );
	}
}
@media screen and ( width > 750px ) , print{
	#title01.facility video{
		top : calc( -256 var( --remBase ) );
		height : calc( 909 var( --remBase ) );
		clip-path : polygon( calc( 24 * 100% / 1615 ) calc( 256 * 100% / 909 ) , 100% calc( 256 * 100% / 909 ) , 100% calc( 656 * 100% / 909 ) , calc( 24 * 100% / 1615 ) calc( 656 * 100% / 909 ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#title01.facility video{
		left : calc( 363 var( --viewportBase ) );
		width : calc( 1615 var( --percentBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#title01.facility video{
		left : calc( 50% - 617px );
		width : 1615px;
	}
}
@media screen and ( width <= 750px ){
	#title01.restaurant video{
		top : calc( -89.6  var( --remBase ) );
		left : calc( -8.4 var( --viewportBase ) );
		width : calc( 565.25 var( --viewportBase ) );
		height : calc( 318.15 var( --remBase ) );
		clip-path : polygon( calc( 8.4 * 100% / 565.25 ) calc( 89.6 * 100% / 318.15 ) , 100% calc( 89.6 * 100% / 318.15 ) , 100% calc( 407.75 * 100% / 318.15 ) , calc( 8.4 * 100% / 565.25 ) calc( 407.75 * 100% / 318.15 ) );
	}
}
@media screen and ( width > 750px ) , print{
	#title01.restaurant video{
		top : calc( -256 var( --remBase ) );
		height : calc( 898 var( --remBase ) );
		clip-path : polygon( calc( 25 * 100% / 1596 ) calc( 249 * 100% / 898 ) , 100% calc( 249 * 100% / 898 ) , 100% calc( 649 * 100% / 898 ) , calc( 25 * 100% / 1596 ) calc( 649 * 100% / 898 ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#title01.restaurant video{
		left : calc( 363 var( --viewportBase ) );
		width : calc( 1596 var( --percentBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#title01.restaurant video{
		left : calc( 50% - 617px );
		width : 1596px;
	}
}

/* --------------------------------------------
DESCRIPTION
--------------------------------------------- */
#description01{
	font-family : "Noto Serif JP";
	font-weight : 500;
	line-height : 1.3;
	color : var( --color01 );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	#description01{
		padding-block : calc( 40 var( --remBase ) );
		font-size : 3.2rem;
	}
}
@media screen and ( width > 750px ) , print{
	#description01{
		padding-top : calc( 88 var( --remBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
		font-size : 6rem;
	}
}
#description02{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#description02{
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 39 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#description02{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 102 var( --remBase ) );
		font-size : 2rem;
		text-align : center;
	}
}

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#column01{
		padding-block : calc( 40 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#column01{
		display : grid;
		grid-template-columns : calc( 1360 var( --percentBase ) ) calc( 440 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 50 var( --remBase ) );
		padding-bottom : calc( 50 var( --remBase ) );
	}
}