@charset "utf-8";

section#facility.lp {
	padding: 0;
}
#facility #floor {
	z-index: 1;
	max-width: var(--width-max);
	padding: 40px 0 0;
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0 auto 100px;
}
#facility #floor:after {
	content:"";
	background: var(--opa-black05);
	position: absolute;
	margin: -10% calc(50% - 50vw);
	width: 60vw;
	left: 0;
	height: 100vh;
	z-index: -1;
}

.floortab {
	width: var(--flex-100);
	margin: 30px 0 0;
	order: 2;
}
.floortab ul {
	border-top: 1px dotted var(--opa-white02);
	display: block;
}
#facility .template .floortab > ul > li {
	border-bottom: 1px dotted var(--opa-white02);
	padding: 0 !important;
}
.floortab li a {
	display: block;
	padding: 15px 0;
	color: var(--white);
	cursor: pointer;
	font-size: var(--font-h6);
}
.floortab li a.active {
	background:var(--opa-black02);
}
.floortab li {
	
}
.floortab li.active {
	display:block;
}

#facility .roombox {
	margin: 0 auto 50px;
}

#facility .roombox ul{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 10px;
}
#facility .roombox li h4{
	font-size: var(--font-h5);
	padding: 10px 0 0;
}

#facility .roombox li div {
	display:none;
}

#facility small {
    font-family: var(--mn);
    font-size: var(--font-mc);
    color: var(--opa-white05);
    letter-spacing: 1px;

}
#floor figure div{
	display:none;
}
#floor figure div.active {
	display:block;
}	
	
.box{
	margin: 0 0 100px;
}

.column-2 {
	display: block;
	flex-wrap: wrap;
	gap: 3%;
	margin: 0;
	padding: 0;
	justify-content: left;
	/* overflow: hidden; */
	grid-template-columns: 57% 40%;
}
.wp-container-core-columns-is-layout-4.wp-container-core-columns-is-layout-4 {
	/* grid-template-columns: 40% 57%; */
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}
.wp-container-core-columns-is-layout-4.wp-container-core-columns-is-layout-4 .wp-block-column:first-child {/* order: 1; */}
.column-2 .wp-block-column {
	place-content: center;
	place-items: center;
	margin: 20px 0 0;
}
.column-2 .block-column:last-child{
	text-align: center;
}

#facility h3{
	vertical-align: middle;
	text-align: center;
	margin: 0 auto 30px;
	letter-spacing: 2px;
	font-size: var(--font-h2);
}

@media screen and (min-width: 600px) {
section#facility.lp {
	padding: 0;
}
#facility #floor {
}
#facility #floor:after {margin: -4% calc(50% - 50vw);height: 110vh;}

.floortab {
}
.floortab ul {
	border-top: 1px dotted var(--opa-white02);
}
#facility .template .floortab > ul > li {
	border-bottom: 1px dotted var(--opa-white02);
	padding: 0 !important;
}
.floortab li a {
}
.floortab li a.active {
	background:var(--opa-black02);
}
.floortab li {
	
}
.floortab li.active {
	display:block;
}

#facility .roombox {
	margin: 0 auto 50px;
}

#facility .roombox ul{
}
#facility .roombox li h4{
	font-size: var(--font-h4);
	padding: 10px 0 0;
}

#facility .roombox li div {
	display:none;
}

#facility small {
    font-family: var(--mn);
    font-size: var(--font-mc);
    color: var(--opa-white05);
    letter-spacing: 1px;

}
#floor figure div{
	display:none;
}
#floor figure div.active {
	display:block;
}	
	
.box{
	margin: 0 0 100px;
}

.column-2 {
}
.wp-container-core-columns-is-layout-4.wp-container-core-columns-is-layout-4 {
	/* grid-template-columns: 40% 57%; */
}
.column-2 .wp-block-column {
	place-content: center;
	place-items: center;
}
.column-2 .block-column:last-child{text-align: center;}

#facility h3{
	vertical-align: middle;
	text-align: center;
	margin: 0 auto 30px;
	letter-spacing: 2px;
	font-size: var(--font-h2);
}
}

@media screen and (min-width: 1024px) {
section#facility.lp {
	padding: 0;
}
#facility #floor {
	z-index: 1;
	padding: 60px 0;
	position: relative;
	margin: 0 auto 100px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: var(--flex-100);
}
#facility #floor:after {
	content:"";
	background: var(--darkgray);
	position: absolute;
	margin: 0 calc(50% - 50vw);
	width: 60vw;
	left: 0;
	height: 100%;
	z-index: -1;
}

.floortab {order: unset;}
.floortab ul {
	border-top: 1px dotted var(--opa-white02);
}
#facility .template .floortab > ul > li {
	border-bottom: 1px dotted var(--opa-white02);
	padding: 0 !important;
}
.floortab li a {
	display: block;
	padding: 20px;
	color: var(--white);
	cursor: pointer;
}
.floortab li a.active {
	background:var(--opa-black02);
}
.floortab li {
	
}
.floortab li.active {
	display:block;
}

#facility .roombox {
	margin: 0 auto 50px;
}

#facility .roombox ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px 20px;
}
#facility .roombox li h4{
	font-size: var(--font-h4);
	padding: 10px 0 0;
}

#facility .roombox li div {
	display:none;
}

#facility small {
    font-family: var(--mn);
    font-size: var(--font-mc);
    color: var(--opa-white05);
    letter-spacing: 1px;

}
#floor figure div{
	display:none;
}
#floor figure div.active {
	display:block;
}	
	
.box{
	margin: 0 0 100px;
}

.column-2 {
	display: grid !important;
	flex-wrap: wrap;
	gap: 3%;
	margin: 0 0 30px;
	padding: 0;
	justify-content: left;
	/* overflow: hidden; */
	grid-template-columns: 57% 40%;
}
.wp-container-core-columns-is-layout-4.wp-container-core-columns-is-layout-4 {
    /* grid-template-columns: 40% 57%; */
    
    
    

    
    
    
    
    
    
    

    
    
57%: 40;

	57%: 4;
	/* grid-template-columns: 40% 57%; */
}
.column-2 .wp-block-column {
	place-content: center;
	place-items: center;
}
.column-2 .block-column:last-child{text-align: center;}

#facility h3{
	vertical-align: middle;
	text-align: center;
	margin: 0 auto 30px;
	letter-spacing: 2px;
	font-size: var(--font-h2);
}
}

@media screen and (min-width: 1200px) {
section#facility.lp {
	padding: 0;
}
#facility #floor {
	z-index: 1;
	max-width: var(--width-full);
	padding: 100px 0;
	display: grid;
	grid-template-columns: 35% 65%;
	position: relative;
	margin: 0 auto 100px;
}
#facility #floor:after {
	content:"";
	background: var(--darkgray);
	position: absolute;
	margin: 0 calc(50% - 50vw);
	width: 60vw;
	left: 0;
	height: 100%;
	z-index: -1;
}

.floortab {
	width: var(--flex-90);
	margin: 30px 0 0;
}
.floortab ul {
	border-top: 1px dotted var(--opa-white02);
}
#facility .template .floortab > ul > li {
	border-bottom: 1px dotted var(--opa-white02);
	padding: 0 !important;
}
.floortab li a {
	display: block;
	padding: 20px;
	color: var(--white);
	cursor: pointer;
}
.floortab li a.active {
	background:var(--opa-black02);
}
.floortab li {
	
}
.floortab li.active {
	display:block;
}

#facility .roombox {
	margin: 0 auto 50px;
}

#facility .roombox ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px 20px;
}
#facility .roombox li h4{
	font-size: var(--font-h4);
	padding: 10px 0 0;
}

#facility .roombox li div {
	display:none;
}

#facility small {
    font-family: var(--mn);
    font-size: var(--font-mc);
    color: var(--opa-white05);
    letter-spacing: 1px;

}
#floor figure div{
	display:none;
}
#floor figure div.active {
	display:block;
}	
	
.box{
	margin: 0 0 100px;
}

.column-2 {
	display: grid !important;
	flex-wrap: wrap;
	gap: 3%;
	margin: 0 0 80px;
	padding: 0;
	justify-content: left;
	/* overflow: hidden; */
	grid-template-columns: 57% 40%;
}
.wp-container-core-columns-is-layout-4.wp-container-core-columns-is-layout-4 {
	/* grid-template-columns: 40% 57%; */
}
.column-2 .wp-block-column {
	place-content: center;
	place-items: center;
}
.column-2 .block-column:last-child{text-align: center;}

#facility h3{
	vertical-align: middle;
	text-align: center;
	margin: 0 auto 30px;
	letter-spacing: 2px;
	font-size: var(--font-h2);
}
}