@charset "utf-8";
/*         
  common
                     */
::-ms-expand{display:none;}
section *+p{margin-top: 16px;}
section p.kome+p.kome{margin-top: 0;}
.mt30{margin-top: 30px;}
input[type="button"] {
    border: 0;
    padding: 6px 30px;
}
input[type=submit], input[type=button] {
    cursor: pointer;
}
.submit, .button, .bttn_1 a {
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
	text-decoration: none;
	min-width: 240px;
	display: block;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
}
.submit01, .button01, .btn01 a {
	color: #fff;
	border-radius: 6px;
	background: #f35454 url(/myroom/css/images/arrow01.png) no-repeat;
	background-position: right 10px center;
}
.submit01, .button01, .btn01 a, input[type="button"].button01 {
	padding: 8px 20px;
	background-color: #111;
}
#t_error,
.error{
	margin-bottom: 36px;
	color: #f35454;
	font-weight: bold;
	line-height: 1.8;
	font-size: 1.6rem;
}
.error+ul.btn{margin-top: 60px;}
dl.detail dt{
	margin-bottom: 10px;
}
dl.detail *+dt{margin-top: 20px;}
dl.detail dd{
	margin-top:10px;
	border-bottom:1px dotted #aaa;
	padding-bottom: 15px;
}
dl.detail#cancelTbl dd,
dl.detail#cancelTbl dd ul{
	margin-bottom:0;
	padding-bottom:0;
	border:none;
}
.form dt {
    color: #00405f;
    font-weight: bold;
    padding: 0 1rem 1rem;
    font-size: 1.555rem;
}
dl.detail dd ul{
	margin:8px 0 16px;
	line-height: 1.8;
}
dl.detail dd ul.kome li,
dl.detail dd ol li{
	display:block;
	position:relative;
	padding-left:20px;
}
dl.detail dd ul.kome li:before{
	content:"※";
	position:absolute;
	top:0;
	left:0;
}
dl.detail dd ol li:before{
	position:absolute;
	top:0;
	left:0;
}
dl.detail dd ol li:nth-child(1):before{content:"\02460";}
dl.detail dd ol li:nth-child(2):before{content:"\02461";}
dl.detail dd ol li:nth-child(3):before{content:"\02462";}
dl.detail dd ol li:nth-child(4):before{content:"\02463";}
dl.detail dd ol li:nth-child(5):before{content:"\02464";}
dl.detail dd ul span.caution{
	display:block;
	margin-left:1rem;
}
table.pay{margin:10px 0;}
table.pay th,
table.pay td{vertical-align:top;}
table.pay th{font-weight:normal;}
form input,
form select,
form textarea{outline: 0;}
form textarea[name="reh_remarks"]{margin-top:10px;}
.form dt {
	color: #00405f;
	font-weight: bold;
	padding:0 1rem 1rem;
	font-size: 1.555rem;
}
.form dt strong,
.form dd strong{
	color: #f35454;
	font-size: 1.25rem;
	font-style: normal;
	margin-left: 0.3rem;
}
.form dd strong{margin-right: 0.3rem;}
.form dd {margin-bottom: 1rem;}
.form.comfirm dd {margin:0 0 2rem 1rem;}
.form select,
.form input[type=text],
.form input[type=number],
.form textarea {
	background-color: #fff;
	border: none;
	padding: 1rem 1rem 0.7rem;
	border-bottom: 0.3rem solid #fff;
	margin-bottom: 1rem;
}
.form input[type=text]#cardno{margin-top:10px;}
.form select:focus,
.form input[type=text]:focus,
.form input[type=number]:focus,
.form textarea:focus {
	background-color: #fff4f4;
	border-bottom: 0.3rem solid #f35454;
}
.form input[type=text] + input[type=text] {margin-left: 1rem;}

.form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	padding-right: 5%;
	background-image: url(/common/img/pink-arrow-down.svg);
	background-repeat: no-repeat;
	background-position: 98% 50%;
	-webkit-background-size: 12px;
	background-size: 12px;
}
.form select:focus {background-image: url(/common/img/pink-arrow-up.svg);}

.form input[type=text].datepicker {
	background-image: url(/common/img/form/calendar.svg);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	padding-right: 5%;
	-webkit-background-size: 20px;
	background-size: 20px;
}

.form input[type=radio],
.form input[type=checkbox] {display: none;}
.form input[type=radio] + label{margin-right:12px;}
.form input[type=radio] + label:before {
	content: '';
	width: 0.8rem;
	height: 0.8rem;
	display: inline-block;
	margin:0 10px 0 3px;
	background-color: #fff;
	border-radius: 50%;
	-webkit-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #fff;
		 -moz-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #fff;
			box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #fff;
}
.form input[type=radio]:checked + label:before {
	background-color: #f35454;
	-webkit-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #f35454;
		 -moz-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #f35454;
			box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #f35454;
}
.form input[type=checkbox] + label{position: relative;}
.form input[type=checkbox] + label:before{
	content: '';
	width: 1.2rem;
	height: 1.2rem;
	display: inline-block;
	margin:0 0.8rem 0 3px;
	vertical-align: -0.2rem;
	background-color: #fff;
}
.form 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;
}
.form input[type=checkbox]:checked + label:after{background-image: url(/common/img/form/tick_act02.svg);}
.form .hopeDate li:not(:first-child) .datepicker{margin-left:31px;}
.form .hopeDate select{width:auto;}
.form .hopeDate select[name="hope_time1_hour"],
.form .hopeDate select[name="hope_time2_hour"],
.form .hopeDate select[name="hope_time3_hour"]{
	margin-left: 1rem;
	margin-right:6px;
}
.form .hopeDate select[name="hope_time1_min"],
.form .hopeDate select[name="hope_time2_min"],
.form .hopeDate select[name="hope_time3_min"]{
	margin-right:6px;
	margin-left:6px;
}
.form textarea,
.form input[type=text].txt100p {width: 100%;}
.ui-widget.ui-widget-content{font-size: 1.0rem;}
.ui-datepicker th{padding:.2em .3em;}
.ui-datepicker td span, .ui-datepicker td a{padding: 0 .2em;}
.ui-datepicker-calendar .ui-state-default,
.ui-datepicker-calendar .ui-widget-content .ui-state-default{
	border: 1px transparent solid;
	background: transparent;
}
.ui-widget-header{background: transparent;border: 1px solid transparent;}
.ui-datepicker-header > a{top:4px!important;}
.ui-datepicker th.ui-datepicker-week-end span[title="日曜日"],
.ui-datepicker td.sunday span,
.ui-datepicker td.holiday span{color: rgb(255, 0, 0);}
.ui-datepicker th.ui-datepicker-week-end span[title="土曜日"],
.ui-datepicker td.saturday span{color: rgb(0, 127, 255);}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover{
	border: 0!important;
	padding: 0!important;
	background:transparent;
	top: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover{left: 2px;}
.ui-datepicker .ui-datepicker-next-hover{right: 2px;}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker-prev .ui-icon-circle-triangle-w:hover,
.ui-datepicker-next .ui-icon-circle-triangle-e:hover{
	background-position: center center!important;
	background-size: 12px auto!important;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker-prev .ui-icon-circle-triangle-w:hover{background-image:url(../img/arrow-prev.png);}
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker-next .ui-icon-circle-triangle-e:hover{background-image:url(../img/arrow-next.png);}
.cancelRateTbl{
	margin:12px 0;
	border-collapse: collapse;
}
.cancelRateTbl tr{
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}
.cancelRateTbl td,
.cancelRateTbl th{
	font-weight: normal;
	padding:2px 10px;
}

#loungeReserve #securitycode{
	margin-top: 10px;
	display: inline-block;
	vertical-align:bottom;
}
#loungeReserve .codeAboutLink{
	display: inline-block;
	margin:0 0 1rem 20px;
	vertical-align:bottom;
}
#loungeReserve .codeAboutLink a:after{
	font-family: FontAwesome;
	content: "\f107";
	display: inline-block;
	margin-left:5px;
}
#loungeReserve .codeAboutLink.open a:after{content: "\f106";}
#loungeReserve .codeAboutLink+#codeAbout{
	display: block;
	width: 100%;
	max-height: 0px;
	transition: all 0.4s;
	transform-origin: center top;
	transform: scale(1,0);
}
#loungeReserve .codeAboutLink.open+#codeAbout{
	transform: scale(1,1);
	max-height:800px;
}
#loungeReserve .security_cord figcaption{font-size: 1.3rem;}
#loungeReserve .wrap.cards{margin-bottom: 16px;}
#loungeReserve .wrap.cards figcaption{
	display:block;
	margin: 16px 0 6px;
	max-width: 260px;
	padding: 2px 10px 4px;
	font-size: 1.6rem;
	font-weight: bold;
	border: 1px solid #000;
	text-align: center;
	color:#000;
}
#loungeReserve .wrap.cards p{
	display: inline-block;
	vertical-align: middle;
}
#loungeReserve .wrap.cards p img{width:auto;}




#select_day .tbl_wrap_3 {
	width: 100%;
	overflow-x: scroll;
}
#select_day .tbl02 tr th,
#select_day .tbl02 tr td{width:12.5%;}
#select_day .tbl02 thead,
#select_day .tbl02 tr th:first-child{background: #fff;}
.stepList{
	display: block;
	margin: 20px auto 16px;
	text-align: center;
}
.stepList li{
	position: relative;
	display:inline-block;
	width:100px;
	padding: 4px 12px 6px;
	margin: 0 10px;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
	font-size: 15px;
	color: #000;
	vertical-align: middle;
}
.stepList li+li:before{
	position: absolute;
	top:7px;
	left: -17px;
	font-family: FontAwesome;
	content: "\f054";
	color: #fff;
}
.stepList li.done{
	background-color:#aaa;
	color: #fff;
	font-weight: bold;
}
.stepList li.now{
	background-color:#D22C2C;
	color: #fff;
	font-weight: bold;
}


.form .tbl02.tbl_wrap_1 table th,
.form .tbl02.tbl_wrap_1 table td{
	border: 1px solid #bbb;
	padding: 3px 10px;
}
.form .tbl02.tbl_wrap_1 table tr th:first-child,
.form .tbl02.tbl_wrap_1 table tr td:first-child{border-left: none;}
.form .tbl02.tbl_wrap_1 table tr th:last-child,
.form .tbl02.tbl_wrap_1 table tr td:last-child{border-right: none;}
.form .tbl02.tbl_wrap_1 table tr:first-child th,
.form .tbl02.tbl_wrap_1 table tr:first-child td{border-top:none;}
.form .tbl02.tbl_wrap_1 table tr:last-child th,
.form .tbl02.tbl_wrap_1 table tr:last-child td{border-bottom:none;}
.form .tbl02.tbl_wrap_1 table th{text-align:center;}
.btn-c{text-align: center;margin:36px auto 0;}
.btn-c li input[type="button"]{
	font-size:2.4rem;
	text-align: center;
	background:#D22C2C;
	border: none;
	padding: 8px 20px 10px;
	margin: 0;
	outline: 0;
	line-height: 1.0;
	font-weight: normal;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: 9px auto;
}
#loungeReserve .btn-c li input[type="button"].button01{
	background-image:url("../img/white-arrow-next.svg");
	background-position:right 12px center;
	padding-right: 30px;
}
.btn-c li input[type="button"].button04{background-color:#aaa;}
#loungeReserve .btn-c li input[type="button"].button04{background-color:#00405f;}
#loungeReserve .btn-c li input[type="button"].button04{
	background-image:url("../img/white-arrow-prev.svg");
	background-position: 12px center;
	padding-left: 30px;
}
.btn-c li > a{
	font-size:2.4rem;
	text-align: center;
	border: none;
	padding: 8px 20px 10px;
	margin: 0;
	outline: 0;
	line-height: 1.0;
	font-weight: normal;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: 9px auto;
}
#loungeReserve .btn-c li.btn01 > a{padding-right: 30px;}


/*         
  loungeReserve
                     */
.roomList{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.roomList > *{
	flex-basis: 33%;
	text-align: center;
	padding: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #fff;
}
.locations > dt:hover{
	color: #6b92cb;
	cursor: pointer;
}
.roomList > *:hover{
	border: 1px solid #ccc;
}
.roomList .selected{
	background: #ddd;
}
#loungeReserve section:not(#titleBlock){padding:50px 0;}
#loungeReserve section h3{
	display: block;
	padding: 3px 16px;
	margin:40px auto 16px;
	background: #000;
	color: #fff;
	font-weight: bold;
	font-size: 1.8rem;
}
#loungeReserve section > .inner > div:first-child{margin-top:-40px;}
#loungeReserve #select_room .kome{
	margin: 12px 0 36px;
	font-size: 1.3rem;
}
#loungeReserve #searchform{margin-bottom: 36px;}
#loungeReserve .locRoom{overflow-x: hidden;}
#loungeReserve .locRoom ul{
	display: flex;
	flex-wrap: wrap;
	margin-right:-10px;
	width:calc(100% + 10px);
}
#loungeReserve .locRoom li{
	min-width:calc(25% - 10px);
	display: inline-block;
	padding:0 10px;
	margin: 0 10px 6px 0;
	border: 1px solid #979797;
	font-size: 1.2rem;
	text-align: center;
	line-height:2.0;
	color: #000;
	cursor: pointer;
}
#loungeReserve .locRoom li.selected{
	background:#777777;
	color: #fff;
}
#loungeReserve #roomInfo{margin-top:24px;}
#loungeReserve #roomInfo .txt,
#loungeReserve #roomInfo .roomDetailBtn{
	margin-bottom: 24px;
	font-size: 1.6rem;
}
#loungeReserve #roomInfo .txt.roomDetail{display: inline-block;}
#loungeReserve #roomInfo .roomDetailBtn{
	display: inline-block;
	margin-left: 16px;
}
#loungeReserve #roomInfo .roomDetailBtn a{
	display: block;
	background:#ccc;
	padding: 3px 30px;
	color: #000;
	transition: all 0.4s;
}
#loungeReserve #roomInfo .roomDetailBtn a:hover{
	text-decoration: none;
	opacity: 0.8;
}
#loungeReserve #roomInfo .roomDetailBtn a:before{
	font-family: FontAwesome;
	content: "\f105";
	display:inline-block;
}
#loungeReserve #roomInfo .roomDetailBtn a:after{content:none;}
#loungeReserve #roomInfo dl.detail,
#styleReserve #roomInfo dl.detail{
	margin-top: 36px;
	border: 5px solid #bbb;
	padding: 10px 16px;
}
#loungeReserve .security_cord img,
#loungeReserve #useCardList p img{
	width:auto;
}
#loungeReserve #useCardList figcaption{
	margin-top:16px;
	font-weight:bold;
	display:block;
}
#loungeReserve #useCardList p{
	display:inline-block;
	vertical-align:middle;
}
#loungeReserve #useCardList p+p{margin-left:5px;}
#loungeReserve #select_day .wrap_select{
	position:relative;
	border-bottom:1px solid #666;
	padding-bottom: 6px;
	margin-bottom:16px;
}
#loungeReserve #select_day .wrap_select ul{
	display: inline-block;
	margin: 0;
}
#loungeReserve #select_day .wrap_select p.calendar{
	display: inline-block;
	margin: 0 0 0 24px;
}
#loungeReserve #select_day .wrap_select li{display:inline-block;}
#loungeReserve #select_day .wrap_select li+li{margin-left:24px;}
#loungeReserve #select_day .wrap_select li.date{
	padding: 2px;
	font-weight: bold;
}
#loungeReserve #select_day .wrap_select li.bttn_2 a{
	display: block;
	padding: 2px 16px;
	border-radius: 4px;
	border: 1px solid #999;
	background:#fff;
	color: #000;
}
#loungeReserve #select_day .wrap_select li.bttn_2 a:hover{
	text-decoration: none;
	opacity: 0.7;
}
#loungeReserve #select_day .wrap_select ul.modeList{
	position:absolute;
	right:0;
	bottom:6px;
}
#loungeReserve #select_day .wrap_select ul.modeList li:before{
	content:"";
	display:inline-block;
	width:20px;
	height:20px;
	margin-right:6px;
	vertical-align:bottom;
}
#loungeReserve #select_day .wrap_select ul.modeList li.possible:before{background:url(/common/img/loungeReserve/input-reserve.png) center center no-repeat;background-size:contain;}
#loungeReserve #select_day .wrap_select ul.modeList li.impossible:before{content:"X";}


/*#loungeReserve #select_day .tbl_wrap_3{
	overflow:auto;
	width:100%;
}*/
#loungeReserve #select_day .tbl02{
	border-collapse: collapse;
	border-bottom: 1px solid #999;
	width: 100%;
}
#loungeReserve #select_day .tbl02 th,
#loungeReserve #select_day .tbl02 td{
	border: 1px solid #999;
	text-align: center;
	padding: 3px;
}
#loungeReserve #select_day .tbl02 td.pastDay,
#loungeReserve #select_day .tbl02 td.pastDay{background-color:#bcbcbc;}
#loungeReserve .tbl02#prices table{border:1px solid #bbb;}
#loungeReserve #estimate_btn_area p:first-child{
	margin-bottom: 6px;
	font-weight: bold;
}
#loungeReserve #estimate_btn_area div.inParalSet{
	width:136px;
	display:inline-block;
	margin:7px 0 8px 16px;
	margin-bottom: calc(1rem + 8px);
}
#loungeReserve #estimate_btn_area div.inParalSet label{margin-right:16px;}
#loungeReserve #estimate_btn_area #addr_name{display:inline-block;}
#loungeReserve #estimate_btn_area #estimate_btn{
	display:block;
	clear: both;
	text-align:right;
}
#loungeReserve #estimate_btn_area #estimate_btn input{
	width: 200px;
	margin: 0 0 8px;
	padding:16px;
	border: none;
	font-size: 1.6rem;
	color: #fff;
	background:#00405f url(/common/img/form/pdf-icon.svg) no-repeat 22px center;
	background-size:26px auto;
	cursor: pointer;
}
#loungeReserve #estimate_btn_area #estimate_btn input:hover{opacity: 0.8;}
#loungeReserve #estimate_btn_area p.txts.kome{margin-top: 0;}
#select_day td input {
	text-indent: -9999px;
	width: 18px;
	height: 17px;
	display: inline-block;
	background: url(/common/img/loungeReserve/input-reserve.png) center center no-repeat;
	border: none;
	cursor: pointer;
}
#select_day .calendar{margin-bottom: 16px;}
#select_day .ui-datepicker-trigger{
	width:30px;
	margin-left: 10px;
	vertical-align: middle;
}
#loungeReserve #cardLimitTimes+dd > *{
	display:inline-block;
}
#loungeReserve #cardLimitTimes+dd select{
	width:auto;
	margin:0 6px;
}


/*loungeReserveEdit */
#loungeReserveEdit section{
	max-width:980px;
	margin:10px auto 36px;
}
.roomList{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.roomList > *{
	flex-basis: 33%;
	text-align: center;
	padding: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #fff;
}
.locations > dt:hover{
	color: #6b92cb;
	cursor: pointer;
}
.roomList > *:hover{
	border: 1px solid #ccc;
}
.roomList .selected{
	background: #ddd;
}


@media screen and (min-width:1081px){
	#loungeReserve section .inner{max-width:980px;}
	.btn-c li{display: inline-block;}
	.btn-c li+li{margin-left: 16px;}
}
@media screen and (min-width:769px){
	#select_day .tbl_wrap_3 {
		height: 400px;
		overflow-y: scroll;
	}
	#select_day .tbl_wrap_3 td,
	#select_day .tbl_wrap_3 th {width: 12.5%;}
	#loungeReserve .tbl02#prices,
	#loungeReserve #estimate_btn_area{
		display:inline-block;
		width:48%;
		vertical-align: top;
	}
	#loungeReserve .tbl02#prices table{width:96%!important;}
}
@media screen and (min-width:769px) and (max-width:1080px){
	#loungeReserve .locRoom li{min-width:calc(33.3333% - 10px);}
}

@media screen and (max-width:1080px){
	.form .tbl02.tbl_wrap_1 table{width:100%!important;}
	.btn-c li{display:block;text-align: center;}
	.btn-c li+li{margin-top: 16px;}
	.btn-c li input[type="button"]{margin: 0 auto;}
	.form input[type=checkbox] + label[for$="_chk"]{padding-left:25px;}
	.form input[type=checkbox] + label[for$="_chk"]:before{
		position: absolute;
		top:5px;
		left: 0;
	}
	.form input[type=checkbox] + label[for$="_chk"]:after{
		position: absolute;
		bottom:initial;
		top:-5px;
	}
	#loungeReserve section .inner{width:96%;}
	#loungeReserve table.pay th,
	#loungeReserve table.pay td{display:block;}
	#loungeReserve table.pay td{padding:2px 0 5px 16px;}
}
@media screen and (max-width:768px){
	.stepList{
		width:104%;
		margin: 20px -2% 16px;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.stepList li{
		display: block;
		width:60px;
		margin: 0 6px;
		padding:4px 6px 6px;
	}
	.stepList li:first-child{line-height: 44px;}
	.stepList li+li:before{
		left:-11px;
		margin-top: -11px;
		top: 50%;
		text-shadow:0px 0px 1px #666;
	}
	#select_day .tbl_wrap_3 {
		height: 400px;
		overflow: scroll;
	}
	#select_day .tbl_wrap_3 td,
	#select_day .tbl_wrap_3 th{width:80px !important;}
	#loungeReserve .locRoom li{min-width:calc(50% - 10px);}
	#loungeReserve #select_day .wrap_select ul.modeList{
		display:block;
		position:static;
		text-align:right;
	}
	#loungeReserve #select_day .tbl_wrap_3 table.tbl02,
	#loungeReserve #select_day .tbl_wrap_3 table.tbl02{width:800px;}
	#loungeReserve #select_day .wrap_select p.calendar{
		display: block;
		margin-left: 0;
	}
	#loungeReserve .tbl02#prices table{
		width:100%!important;
		margin-bottom: 16px;
	}
}