@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
#modelroom {
	width: 100%;
	height: auto;
	padding: 230px 0px 0px;
	background-color: #FAF9F2;
}
	.modelroom--inner {
		width: 100%;
		margin: auto auto;
	}
		.modelroom-main {
			width: 90%;
			margin: auto auto;
		}
			.modelroom-txt {
				/* display: flex; */
				align-items: center;
				width: 620px;
				height: auto;
				margin: auto auto -115px;
				position: relative;
				z-index: 2;
				transition-delay: 0.8s !important;
				-webkit-transition-delay: 0.8s !important;
			}
				.modelroom-txt img {
					width: 100%;
					height: auto;
					margin: auto auto 20px;
				}
				.reservation {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 200px;
					height: 50px;
					margin: 0 auto;
					font-size: 16px;
					line-height: 1.0;
					color: #ffffff;
					transition: .1s;
					-webkit-transition: .1s;
					background-color: #680000;
					opacity: .3;
					color: #E2CECA !important;
				}
					.reservation span {
						margin-top: 6px;
						font-family: adobe-garamond-pro, serif;
						font-size: 10px;
						font-weight: 400;
					}
				.modelroom-txt p {
					width: 100%;
					font-size: 16px;
					text-align: center;
					line-height: 2.0;
				}
			.modelroom-image-area {
				width: 100%;
				max-width: 1500px;
				height: auto;
				margin: 110px auto 0;
				padding: 0 0 105px;
				display: flex;
				justify-content: center;
			}

			.map-left {
				width: 498px;
			}
			.map-right {
				margin-left: 48px;
				/* display: none; */
			}
			.map2 {
				width: 448px;
			}
			.address-map {
				width: 448px;
			}
				.modal{
					display: none;
					width: 100%;
					height: 100vh;
					position: fixed;
					top: 0;
					left: 0;
					z-index: 20;
				}
				.modal__bg{
					width: 100%;
					height: 100vh;
					background: rgba(104,87,68,0.8);
					position: absolute;
				}
				.modal__content{
					max-width: 90%;
					height: 90%;
					padding: 50px;
					background: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					-webkit-transform: translate(-50%,-50%);
				}
					.modal__content img {
						width: auto;
						height: 100%;
						margin: auto auto;
					}
				.modal__btn {
					line-height: 1.0;
					font-size: 30px;
					color: #685744;
					position: absolute;
					top: 10px;
					right: 15px;
				}
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
	#modelroom {
		width: 100%;
		height: auto;
		padding: 100px 0px 0px;
		background-color: #FAF9F2;
	}
		.modelroom--inner {
			width: 100%;
			margin: auto auto;
		}
			.modelroom-main {
				width: 90%;
				margin: auto auto;
			}
				.modelroom-txt {
					width: 100%;
					height: auto;
					margin: auto auto -115px;
					position: relative;
					z-index: 2;
					transition-delay: 0.8s !important;
					-webkit-transition-delay: 0.8s !important;
				}
					.modelroom-txt img {
						width: 100%;
						height: auto;
						margin: auto auto 40px;
					}
					.modelroom-txt p {
						width: 100%;
						font-size: 16px;
						text-align: center;
						line-height: 2.0;
					}
				.modelroom-image-area {
					width: 100%;
					height: auto;
					margin: 150px auto 0;
					padding: 0 0 60px;
					display: flex;
					flex-direction: column;
				}

				.map-left {
					width: 100%;
				}
				.map-right {
					margin-top: 40px;
					/* display: none; */
				}
				.map2 {
					width: 100%;
				}
				.address-map {
					width: 100%;
				}
					.modal{
						display: none;
						width: 100%;
						height: 100vh;
						position: fixed;
						top: 0;
						left: 0;
						z-index: 20;
					}
					.modal__bg{
						width: 100%;
						height: 100vh;
						background: rgba(104,87,68,0.8);
						position: absolute;
					}
					.modal__content{
						max-width: 90%;
						height: 90%;
						padding: 50px;
						background: #fff;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						-webkit-transform: translate(-50%,-50%);
					}
						.modal__content img {
							width: auto;
							height: 100%;
							margin: auto auto;
						}
					.modal__btn {
						line-height: 1.0;
						font-size: 30px;
						color: #685744;
						position: absolute;
						top: 10px;
						right: 15px;
					}
}

/* SP ================================================== */
@media all and (max-width:559px){
	#modelroom {
		width: 100%;
		height: auto;
		padding: 100px 0px 0px;
		background-color: #FAF9F2;
	}
		.modelroom--inner {
			width: 100%;
			margin: auto auto;
		}
			.modelroom-main {
				width: 90%;
				margin: 30px auto 0;
			}
				.modelroom-txt {
					width: 90%;
					height: auto;
					margin: auto auto -115px;
					position: relative;
					z-index: 2;
					transition-delay: 0.8s !important;
					-webkit-transition-delay: 0.8s !important;
				}
					.modelroom-txt img {
						width: 100%;
						height: auto;
						margin: auto auto 40px;
					}
					.re-btn {
					}
					.reservation {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 180px;
						height: 50px;
						font-size: 16px;
						line-height: 1.0;
						color: #ffffff;
						transition: .1s;
						-webkit-transition: .1s;
						background-color: #680000;
						opacity: .3;
						color: #E2CECA !important;
					}
						.reservation span {
							margin-top: 6px;
							font-family: adobe-garamond-pro, serif;
							font-size: 10px;
							font-weight: 400;
						}
					.modelroom-txt p {
						width: 100%;
						font-size: 16px;
						text-align: center;
						line-height: 2.0;
					}
				.modelroom-image-area {
					width: 100%;
					height: auto;
					margin: 150px auto 0;
					padding: 0 0 30px;
					display: flex;
					flex-direction: column;
				}

				.map-left {
					width: 100%;
				}
				.map-right {
					margin-top: 40px;
					/* display: none; */
				}
				.map2 {
					width: 100%;
				}
				.address-map {
					width: 100%;
				}
					.modal{
						display: none;
						width: 100%;
						height: 100vh;
						position: fixed;
						top: 0;
						left: 0;
						z-index: 20;
					}
					.modal__bg{
						width: 100%;
						height: 100vh;
						background: rgba(104,87,68,0.8);
						position: absolute;
					}
					.modal__content{
						max-width: 90%;
						height: 90%;
						padding: 20px;
						background: #fff;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						-webkit-transform: translate(-50%,-50%);
					}
						.modal__content img {
							width: auto;
							height: 50%;
							margin: auto auto;
						}
					.modal__btn {
						line-height: 1.0;
						font-size: 30px;
						color: #685744;
						position: absolute;
						top: 10px;
						right: 15px;
					}
}