@charset "utf-8";
/* CSS Document */

#main .intro{ padding-bottom: 80px; text-align: center; }
#main .floor-section{ background: url(../images/common/content/bg03.gif) center 0 repeat; padding: 90px 0; }
#main .floor-section:nth-of-type(even){ background-image: url(../images/common/content/bg04.gif); }
#main .floor-section .floor-map{ margin-top: 50px; }
#main .floor-section .howto{ color: #a89757; margin-top: 20px; }
#main .floor-section .list-item{ position: relative; left: 50%; }
#main .floor-section .list-item.col-3{ width: 990px; margin-left: -500px; }
#main .floor-section .list-item.col-2{ width: 660px; margin-left: -345px; }
#main .floor-section .list-item .item{ display: inline-block; width: 300px; vertical-align: top; margin-left: 30px; position: relative; margin-top: 30px; }
#main .floor-section .photo-body .open-modal,
#main .floor-section .list-item .open-modal{ position: absolute; left: 0; top: 0; width: 100%; padding-top: 66.67%; z-index: 5; outline: none; background: url(../images/common/content/spacer.gif) repeat; z-index: 1; }
#main .floor-section .photo-body .open-modal~.open-modal,
#main .floor-section .list-item .open-modal~.open-modal{ z-index: 0; }
#main .floor-section .photo-body .photo,
#main .floor-section .list-item .photo{ position: relative; }
#main .floor-section .photo-body .photo::before,
#main .floor-section .list-item .photo::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/facilities/icon_zoom.png) center center no-repeat rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.25s linear; }
#main .floor-section .photo-body .open-modal:hover~.photo::before,
#main .floor-section .list-item .open-modal:hover~.photo::before{ opacity: 1; }
#main .floor-section .photo-body .icon-num,
#main .floor-section .list-item .icon-num{ position: absolute; left: 0; top: 0; width: 22px; line-height: 22px; background-color: #9b873d; color: #ffffff; text-align: center; }
#main .floor-section .photo-body .caption,
#main .floor-section .list-item .caption{ margin-top: 5px; }
#main .floor-section .split-view{ width: 950px; margin: 0 auto; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; }
#main .floor-section .split-view .photo-body{ position: relative; max-width: 450px; }
#main .floor-section .photo-single{ position: relative; max-width: 450px; margin: 30px auto 0; }
#main .content .bottom-caption{ max-width: 1112px; margin-left: auto; margin-right: auto; padding: 10px 30px; }
.modaal-overlay{ z-index: 9998; }


@media screen and (max-width: 1112px){
	#main .floor-section .list-item.col-3{ width: 660px; margin-left: -345px; }
}
@media screen and (max-width: 768px){
	#main .intro{ padding: 0 30px 10.42%; text-align: left; }
	#main .floor-section{ padding: 10% 30px; }
	#main .floor-section .floor-map{ margin-top: 5%; }
	#main .floor-section .howto{ margin-top: 3%; }
	#main .floor-section .list-item{ left: 0; }
	#main .floor-section .list-item.col-3{ width: auto; margin-left: auto; }
	#main .floor-section .list-item.col-2{ width: auto; margin-left: auto; }
	#main .floor-section .list-item .item{ width: 48%; margin: 5% 0 0; }
	#main .floor-section .list-item .item:nth-child(odd){ margin-right: 2%; }
	#main .floor-section .list-item .item:nth-child(even){ margin-left: 2%; }
	#main .floor-section .list-item .item img{ width: 100%; height: auto; }
	#main .floor-section .split-view{ width: auto; display: block; }
	#main .floor-section .split-view .photo-body{ margin: 30px auto 0; }
}
@media screen and (max-width: 480px){
	#main .intro{ padding: 0 15px 10.42%; }
	#main .floor-section{ padding: 10% 15px; }
	#main .floor-section .howto{ display: none; }
	#main .floor-section .list-item{ width: auto; margin-left: auto; margin-right: auto; max-width: 300px; }
	#main .floor-section .list-item .item{ width: 100%; }
	#main .floor-section .list-item .item:nth-child(odd){ margin-right: 0; }
	#main .floor-section .list-item .item:nth-child(even){ margin-left: 0; }
	#main .floor-section .photo-body .open-modal,
	#main .floor-section .list-item .open-modal{ display: none; }
	#main .content .bottom-caption{ padding: 10px 15px; }
	.modaal-wrapper{ display: none; }
	.modaal-overlay{ display: none; }
	.modaal-noscroll{ overflow: scroll; }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5),screen and (min-resolution: 1.5dppx){
	#main .floor-section .list-item .photo::before{ background-image: url(../images/facilities/icon_zoom@2x.png); background-size: 53px 16px; }
}