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

/*@font-face {
  font-family: "YuGothic M";
  src: local(Yu Gothic Medium);
}
body {
	color: #646464;
	font-size: 62.5%;
	font-family: "游ゴシック体", YuGothic, "YuGothic M", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;;
}
*/
h4 {
	margin : 0;
	padding : 0;
	font-size :1.4em;
	font-weight: normal;
}

input{
	border:none;
	background:none;
	-webkit-appearance:none; 
}

/* input */
.custom-input { position: relative;}
.custom-input input{
	z-index: 1;
	height: 40px;
	opacity:0;
	color:#fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 140px;
	overflow: hidden;
}

.custom-input .inner{
	position: relative;
	z-index: 0;
	box-sizing: border-box;
	border: 1px solid #aaa;
	background:#fff;
	color:#333;
	padding: 0 12px;
	width: 140px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	border-radius: 5px;
	overflow: hidden;
}
.checked .custom-input .inner{ background:#eee; color:#aaa; border-color: #eee;}


/* selectbox */
.custom-selectbox { position: relative; overflow: hidden;}
.custom-selectbox select{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 240px;
	height: 40px;
	opacity: 0;
	overflow:hidden;
	}
.custom-selectbox .inner{
	position: relative;
	z-index: 0;
	box-sizing: border-box;
	border: 1px solid #aaa;
	background:#fff;
	color:#333;
	padding: 0 12px;
	width: 240px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	border-radius: 5px;
	
}

/* 未定チェックしたとき */
.checked .custom-selectbox .inner{ background:#eee; color:#aaa; border-color: #eee;}
.checked .custom-selectbox .inner:before {
	border-bottom: 2px solid #aaa;
	border-right: 2px solid #aaa;
}


.custom-selectbox .inner:before,
.custom-selectbox .inner:after {
	content: '';
	position: absolute;
	display: block;
}
.custom-selectbox .inner:before {
	top:50%;
	right: 10px;
	bottom: 0;
	width: 6px;
	height: 6px;
	margin-top:-6px;
	border-bottom: 2px solid #212121;
	border-right: 2px solid #212121;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


#stay_data select,
#stay_data .inner{ width:70px;}

#room_data select,
#room_data .inner{ width:70px; margin-bottom:10px;}

#member_data select,
#member_data .inner{ width:70px;}

#childa_data select,
#childa_data .inner{ width:70px; margin-bottom:10px;}

#childb_data select,
#childb_data .inner{ width:70px; margin-bottom:10px;}

#childc_data select,
#childc_data .inner{ width:70px; margin-bottom:10px;}

#childd_data select,
#childd_data .inner{ width:70px; margin-bottom:10px;}

.custom-selectbox em{ position:absolute; top:10px; left:85px; font-size:1.4em; font-style: normal;}

/*.custom-input { position: relative;}
.custom-input input{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 240px;
	height: 36px;
	opacity: 0;
	}
.custom-input .inner{
	position: relative;
	z-index: 0;
	box-sizing: border-box;
	border: 1px solid #000;
	background:#000;
	color:#fff;
	padding: 0 12px;
	width: 240px;
	height: 36px;
	font-size: 14px;
	line-height: 36px;
	border-radius: 5px;
}*/

input[type="button"],
input[type="submit"] {
   background-color: #000;
   color: white;
   border: 1px solid #000;
   height:40px;
   width:240px;
   cursor:pointer;
}

/* ラジオボタン、チェックボックス */
input[type=radio],
input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}
input[type=radio] + label,
input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    margin-right: 12px;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
}
 
@media (min-width: 1px) {
input[type=radio],
input[type=checkbox] { display: none; margin: 0; }
input[type=radio] + label,
input[type=checkbox] + label {
	padding: 0 0 0 24px;
	font-size: 1.2em;
}
input[type=radio] + label::before,
input[type=checkbox] + label::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: #FFF;
}
input[type=radio] + label::before {
	border: 2px solid #aaa;
	border-radius: 30px;
}
input[type=checkbox] + label::before {
	border: 2px solid #aaa;
}
input[type=radio]:checked + label::after,
input[type=checkbox]:checked + label::after {
	content: "";
	position: absolute;
	top: 50%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}

input[type=radio]:checked + label::before {
	border: 2px solid #000;
}
input[type=radio]:checked + label::after {
	left: 5px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #000;
	border-radius: 8px;
}
input[type=checkbox]:checked + label::after {
	left: 3px;
	width: 16px;
	height: 8px;
	margin-top: -8px;
	border-left: 3px solid #000;
	border-bottom: 3px solid #000;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
}


/* レイアウト */
.onlineserviceY { width:100%; min-height:110px; color: #333; line-height:1.6; background:#fff; border-top: 1px solid #292446;}
.onlineserviceY .onlineserviceY-inner { width:1080px; margin: 0 auto; padding:10px 0; position:relative; }
.onlineserviceY .onlineserviceY-inner:after{ content:""; clear:both; display:block;}

.onlineserviceY h3#hd_search { float:left; width:120px; font-size: 2.2em; font-weight:normal; padding-top: 20px;}

.onlineserviceY #reserved_form{ float: left;}
.onlineserviceY #reserved_form:after{ content:""; clear:both; display:block;}

.onlineserviceY #reserved_form02:after{ content:""; clear:both; display:block;}
.onlineserviceY #reserved_form02{ float: left; overflow:hidden; width:280px; margin-right:10px;}
.onlineserviceY #reserved_form02 .mitei{ padding-left:40px;}
.onlineserviceY #reserved_form02 .adult_box{ float:left; margin-right:15px;}
.onlineserviceY #reserved_form02 .child_box{ overflow:hidden;}


.onlineserviceY p.shd{ float:left; font-size:1.4em; line-height:36px;}
.onlineserviceY h4.shd_booking{ font-size:1.4em; margin-bottom:5px;}


.onlineserviceY .booking_date{ float:left; margin-right:10px;}
.onlineserviceY .booking_btn{ padding-top:15px;}
.onlineserviceY .btns { margin: 5px auto; text-align: center;}
.onlineserviceY .button { width: 160px; height: 60px; border: none; font-size: 1.8em; letter-spacing:2px; background:#303131;}

.onlineserviceY #cal_data_inner{
	background-image: url(../img/common/icon_cal.png);
	background-repeat:no-repeat;
	background-position: 110px center;
}

/* モーダルウィンドウのスタイル */
.child_box .toggle_box{
	display:none;
	color:#333;
	background-color:#fff;
	padding:20px;
	margin-top:10px;
	position:absolute;
	z-index:50;
	width:320px;
	border-radius: 5px;
	box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}
.child_box .btn{
	background: url(../img/common/icon_modal_open.png) no-repeat 0 center;
	padding:5px 10px 5px 28px;
	position:relative;
	margin:0;
	font-size:1.6em;
	transition: all .4s;
}
.child_box .btn.active{
	background: url(../img/common/icon_modal_close.png) no-repeat 0 center;
}
.child_box .btn:hover{
	cursor:pointer;
}