@charset "utf-8";
#modalOverlay{
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120%;
	z-index: 20000;
	opacity: 0.8;
	background: #2d2726;
}
#modalClose{
	position:absolute;
	top: -44px;
	right:13px;
	content: "";
	width:30px;
	height:30px;
	background:url(/common/img/close-icon.svg) no-repeat center center;
	background-size: contain;
	text-indent: -9999px;
	cursor: pointer;
}
#modalContent{
	display:none;
	height:80vh;
	position:fixed;
	box-sizing: border-box;
	z-index:20001;
	opacity: 1;
	background: #ffffff;
	border: 1px solid #d2d2d2;
}
#modalContent #modalInBox{
	width:100%;
	height:calc(80vh - 2px);
	box-sizing: border-box;
	padding:18px 4px 4px;
	position: relative;
	overflow-y:auto;
}
#modalContent #modalInBox .ps__thumb-y{background:#999;}
#modalContent h1{
	display: block;
	margin-bottom:16px;
	color: #323232;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.2;
	font-weight: bold;
}
#modalContent h2{
	display:block;
	margin:12px auto 32px;
	color: #D22C2C;
	font-size:1.8rem;
	line-height:1.2;
	font-weight: bold;
	text-align: center;
}
#modalContent form,
#modalContent .modalThanksBox{
	display:block;
	background:#eee;
	text-align:center;
	box-sizing:border-box;
	color: #323232;
}
#modalContent .modalThanksBox{height: calc(100% - 60px);}
#modalContent form h3{
	margin-bottom: 16px;
	text-align: left;
}
#modalContent dl{
	display: block;
	text-align: left;
}
#modalContent dl dt{
	display: block;
	padding: 16px 0 10px 8px;
	color: #004265;
	font-size: 1.4rem;
	font-weight: bold;
}
#modalContent dl dt:first-child{padding-top: 0;}
#modalContent dl dt strong{
	display: inline-block;
	margin-left: 6px;
	color:#f3588e;
	font-size: 1.2rem;
}
#modalContent dl dd{
	display: block;
	width: 100%;
	margin: 0;
}
#modalContent dl dd input[type=checkbox],
.privacyTxt input[type=checkbox]{display: none;}
#modalContent dl dd input[type=checkbox]+label,
.privacyTxt input[type=checkbox]+label{position:relative;}
#modalContent dl dd input[type=checkbox]+label:before,
.privacyTxt input[type=checkbox]+label:before{
	content: '';
	width: 1.2rem;
	height: 1.2rem;
	display:inline-block;
	margin: 0 12px 0 3px;
	vertical-align: -0.2rem;
	background-color: #fff;
}
#modalContent dl dd input[type=checkbox]+label:after,
.privacyTxt input[type=checkbox]+label:after{
	content: '';
	width: 30px;
	height: 24px;
	background-image: url(/common/img/form/tick.svg);
	background-repeat: no-repeat;
	background-position: 0;
	-webkit-background-size:18px;
	background-size: 18px;
	position: absolute;
	left:5px;
	bottom: 0;
}
#modalContent dl dd input[type=checkbox]:checked+label:after,
.privacyTxt input[type=checkbox]:checked+label:after{background-image: url(/common/img/form/tick_act02.svg);}
#modalContent form select{
	border:none;
	padding:2px 6px;
	font-size: 1.5rem;
}
#modalContent form input[type="text"]{
	width: 100%;
	box-sizing: border-box;
	border:none;
	padding:6px;
	font-size: 1.5rem;
}
#modalContent form input[type="text"][name^="rn_name"]{width:40%;}
#modalContent form input[type="text"][name="rn_name1"]{margin-right:12px;}
#modalContent ul.note li{
	display: block;
	position: relative;
	padding-left:1.5rem;
	font-size: 1.3rem;
	line-height: 1.6;
	text-align: left;
}
#modalContent ul.note li:before{
	position: absolute;
	top: 0;
	left: 0;
	content: "※";
}
#modalContent form button{
	padding: 10px 24px 12px;
	background:#f35454;
	border-radius: 3px;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1.0;
	border: none;
}
#modalContent .modalThanksBox p{
	font-size: 1.3rem;
	line-height: 1.6;
	text-align: left;
}
#modalContent .modalThanksBox p+p{margin-top: 0.5rem;}
.privacyTxt a{text-decoration: underline;}
body.akihabara2 #room_price{display:none!important;}

@media screen and (min-width:1081px){
	#modalContent{width:50%;}
	#modalContent form,
	#modalContent .modalThanksBox{padding:30px 60px;}
	#modalContent ul.note,
	#modalContent form > p{margin:24px 0 36px;}
}
@media screen and (min-width:769px) and (max-width:1080px){
	#modalContent{width:80%;}
	#modalContent form,
	#modalContent .modalThanksBox{padding:24px 4vw;}
	#modalContent ul.note,
	#modalContent form > p{margin:2vw 0 4vw;}
}
@media screen and (max-width:768px){
	#modalContent{width:96%;}
	#modalContent form,
	#modalContent .modalThanksBox{padding:4vw 2vw;}
	#modalContent ul.note,
	#modalContent form > p{margin:2vw 0 3vw;}
}
@media screen and (max-width:640px){
	#modalClose{
		top: -26px;
		right: 5px;
		width:18px;
		height:18px;
	}
}