@charset "utf-8";
/*------------------------------------------------
 * ほうぼう屋シミラン予約フォーム用CSS
 * booking.css
 * 
 * @create 2018/07/26
 * @author HOBO-YA TOUR
 * 
/*----------------------------------------------*/

/*---------------------------------------
 * 属性リセット
---------------------------------------*/
.booking-form input{
	font-weight:normal;
}

.booking-form abbr, .booking-form acronym{
	border:0;
}

.booking-form *, .booking-form *::before, .booking-form *::after{
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

/*---------------------------------------
 * 基本設定
---------------------------------------*/
.booking-form{
	position:relative;
	margin:0 auto;
	padding-top:15px;
	font-size:12px;
	height:100%;
	min-height:100%;
	height:auto !important;
	width:100%;
}

.booking-form *{
	font-size:100%;
	line-height:180%;
}

.booking-form a{
	cursor:pointer;
	color:#1957ac;
	text-decoration:underline;
}

.booking-form a > i.fa-external-link{
	margin-left:3px;
	color:#1957ac;
}

.booking-form a:hover{
	color:#f33;
}

.booking-form a:hover > i.fa-external-link{
	color:#f33;
}

.booking-form label{
	display:inline-block;
	cursor:pointer;
	margin-top:4px;
}

/*---------------------------------------
 * フォーム要素（共通）
---------------------------------------*/
input[type='text'], input[type='date'], input[type='email'], input[type='tel'], input[type='password']{
	height:23px;
	text-indent:5px;
	display:inline-block;
	background:#fff;
	border:1px solid #aaa;
	border-radius:4px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
	padding:0;
	margin:4px 0 0 0;
}

input[type="checkbox"]{
	border:1px solid #aaa;
	-webkit-appearance:none;
	-moz-transform:scale(1.3);
	position:relative;
	background:#fcfcfc;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #fcfcfc));
	background:linear-gradient(to bottom, #fff 0%, #fcfcfc 100%);
	vertical-align:-6px;
	border-radius:3px;
	width:14px;
	height:14px;
	display:block;
	float:left;
	margin:3px 6px 8px 0;
}

input[type="checkbox"]:checked{
	background:#fff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #eee));
	background:linear-gradient(to bottom, #fff 0%, #eee 100%);
	border:1px solid #360;
}

input[type="checkbox"]:checked::before{
	position:absolute;
	display:block;
	box-shadow:0 1px 1px rgba(0,0,0,0.5);
	content:"";
	background:#345;
	-webkit-transform:rotate(45deg);
	-webkit-transform-origin:right center;
	top:8px;
	left:0;
	width:5px;
	height:1px;
}

input[type="checkbox"]:checked::after{
	display:block;
	position:absolute;
	content:"";
	box-shadow:0 1px 1px rgba(0,0,0,0.5);
	background:#345;
	-webkit-transform:rotate(-53deg);
	-webkit-transform-origin:left center;
	top:9px;
	left:5px;
	width:9px;
	height:1px;
}

.agreement-checkbox input[type="checkbox"]{
	vertical-align:-7px;
	border-radius:3px;
	width:18px;
	height:18px;
}

.agreement-checkbox input[type="checkbox"]:checked::before{
	top:11px;
	left:0;
	width:7px;
	height:2px;
}

.agreement-checkbox input[type="checkbox"]:checked::after{
	top:12px;
	left:6px;
	width:13px;
	height:2px;
}

select{
	display:inline-block;
	height:23px;
	background:#fff;
	border:1px solid #aaa;
	border-radius:4px;
	font-size:100%;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
	margin-top:3px;
	max-width:100%;
}

textarea{
	display:inline-block;
	padding:3px;
	background:#fff;
	border:1px solid #aaa;
	border-radius:4px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
	margin:0;
}

.w50{width:50px;}
.w75{width:75px;}
.w100{width:100px;}
.w125{width:125px;}
.w150{width:150px;}
.w200{width:200px;}
.w250{width:250px;}
.w300{width:300px;}

::-webkit-input-placeholder{
	color:#aaa;
	opacity:1;
}

:-moz-placeholder{
	color:#aaa;
}

::-moz-placeholder{
	color:#aaa;
	opacity:1;
}

:-ms-input-placeholder{
	color:#aaa;
}

.ui-datepicker{
	z-index:10 !important;
}

/*-------------------------------------
 * ボタン共通定義
-------------------------------------*/
.button{
	-webkit-appearance:none;
	display:inline-block;
	text-decoration:none;
	text-shadow:none;
	text-align:center;
	border:1px solid #ddd;
	border-radius:6px;
	color:#fff;
	margin-top:-1px;
	font-weight:bold;
}

.type-default{
	padding-top:2px;
	margin:0;
	width:140px;
	height:28px;
	font-size:100%;
}

.type-large{
	padding:0;
	margin:0;
	width:240px;
	height:32px;
	font-size:121%;
}

.button:hover, .button-small:hover, .button-large:hover{
	cursor:pointer;
	text-decoration:none;
	text-shadow:none;
}

.button > i, .button-small > i, .button-large > i{
	color:#fff;
}

.case-submit{
	background:#3296b4;
	color:#fff;
}

.case-submit:hover{
	background:#6ed1e8;
}

.btn-center{
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.btn-right{
	float:right;
}

.button:disabled{
	background:#ccc;
	cursor:default;
}

/*---------------------------------------
 * モーダル表示
---------------------------------------*/
#loading-div-background{
	display:none;
	position:fixed;
	top:0;
	left:0;
	background:#eee;
	width:100%;
	height:100%;
	z-index:20;
}

#loading-div{
	width:300px;
	height:100px;
	text-align:left;
	position:absolute;
	left:50%;
	top:50%;
	padding:15px;
	margin-left:-150px;
	margin-top:-100px;
}

#loading-div img{
	display:block;
	margin:0 auto 20px auto;
}

#loading-div p{
	font-weight:bold;
}

/*---------------------------------------
 * フォームレイアウト
---------------------------------------*/
.booking-box-title{
	display:block;
	font-size:114%;
	border-left:12px solid #FF4B00;
	margin:15px auto 0 auto;
	padding:0 7px;
	letter-spacing:1px;
}

.booking-box-chapter{
	font-size:107%;
	margin:0 auto;
	padding:3px 7px 0 0;
	letter-spacing:1px;
	font-weight:bold;
}

.booking-list-primary{
	width:100%;
	margin:5px auto 15px auto;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}
 
.booking-list-primary dt{
	display:inline-block;
	width:149px;
	padding:12px 8px 0 8px;
	margin:0 1px 1px 0;
	color:#fff;
	background:#6F57CF;
}
 
.booking-list-primary dd{
	width:calc(100% - 150px);
	display:inline-block;
	padding:8px 8px 10px 8px;
	margin:0 0 1px 0;
	background:#FFC2FF;
}

.booking-list-secondary{
	width:100%;
	margin:0 auto 15px auto;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}
 
.booking-list-secondary dt{
	display:inline-block;
	width:149px;
	padding:12px 8px 0 8px;
	margin:0 1px 1px 0;
	color:#fff;
	background:#2B639B;
}
 
.booking-list-secondary dd{
	width:calc(100% - 150px);
	display:inline-block;
	padding:8px 8px 10px 8px;
	margin:0 0 1px 0;
	background:#CFC7FF;
}

.booking-inner-list-main{
	width:100%;
	margin:0 auto 0 -6px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}

.booking-inner-list-main dt{
	display:inline-block;
	min-height:24px;
	width:120px;
	margin:0;
	background:none;
	color:#666;
}
 
.booking-inner-list-main dd{
	width:calc(100% - 130px);
	display:inline-block;
	margin:0;
}

.booking-inner-list{
	width:100%;
	margin:0 auto 0 -6px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}

.booking-inner-list dt{
	display:inline-block;
	min-height:24px;
	width:90px;
	margin:0;
	background:none;
	color:#666;
}
 
.booking-inner-list dd{
	width:calc(100% - 100px);
	display:inline-block;
	margin:0;
}

#guest2, #guest3, #guest4, #guest5, #guest6, #guest7, #c_guest2, #c_guest3, #c_guest4, #c_guest5, #c_guest6, #c_guest7{
	display:none; !important
} 

.booking-required{
	font-size:93%;
	color:#FDFFCA;
}

.booking-notice{
	font-size:93%;
	color:#f33;
	margin:5px 0 0 0;
}

.booking-guest-notice{
	display:block;
	font-size:93%;
	color:#f33;
	margin:0 6px 0 2px;
}

hr{
	margin:16px 6px 10px 6px;
	border:none;
	border-bottom:1px dashed #aaa;
}

.checkboxes label{
	display:block;
}

.checkboxes label:first-child{
	margin-bottom:1.5em;
}

/*---------------------------------------
 * 確認画面（モーダルウィンドウ）
---------------------------------------*/
#confirm-window{
	display:none;
	position:fixed;
	top:0;
	left:0;
	background:#444;
	width:100%;
	height:100%;
	z-index:1000;
	overflow:auto;
}

#c_divecruise, #c_daytrip, #c_snorkeling{
	width:100%;
	max-width:530px;
	background:#fff;
	margin:10px auto;
	padding:0;
}

.confirm-box-title{
	display:block;
	font-size:107%;
	margin:0 auto;
	padding:0 6px;
	letter-spacing:1px;
	color:#fff;
	background:#555;
}

.confirm-box-chapter{
	font-size:107%;
	margin:0 auto;
	padding:0 6px;
	letter-spacing:1px;
	font-weight:bold;
	color:#fff;
	background:#555;
}

.confirm-box-additional{
	background:#ddd;
	font-size:107%;
	padding:1px 7px;
	letter-spacing:1px;
	font-weight:bold;
	border-bottom:1px solid #eee;
}

.confirm-list{
	margin:5px 6px 30px 6px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}

.confirm-list-trip {
	margin-bottom: 0;
}
 
.confirm-list dt{
	display:inline-block;
	width:149px;
	min-height:27px;
	padding-top:3px;
	margin:0;
}
 
.confirm-list dd{
	width:calc(100% - 150px);
	display:inline-block;
	padding:3px 0;
	margin:0;
}

.confirm-inner-list{
	width:100%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}

.confirm-inner-list dt{
	display:inline-block;
	width:140px;
	min-height:24px;
	padding:0;
	background:none;
	border:none;
}
 
.confirm-inner-list dd{
	width:calc(100% - 150px);
	display:inline-block;
	margin:0;
	padding:0;
	border:none;
}

.confirm-required{
	font-size:93%;
	color:#f00;
}

.confirm-remarks{
	margin:5px 6px 40px 6px;
}

.booking-list-cancellation{
	width:100%;
	margin:0 auto 15px auto;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}
 
.booking-list-cancellation dt{
	display:inline-block;
	width:149px;
	padding:6px;
	margin:0 1px 1px 0;
	color:#fff;
	background:#539F66;
	font-size:93%;
}
 
.booking-list-cancellation dd{
	width:calc(100% - 150px);
	display:inline-block;
	padding:6px;
	margin:0 0 1px 0;
	background:#BCFFCC;
	font-size:93%;
}

.booking-list-cancellation p{
	margin:1em auto 0 auto;
}

.cancellation-cruise-name{
	color:#f33;
	font-weight:bold;
}

.booking-list-cancellation h4{
	font-weight:normal;
	margin:1em auto;
}

.booking-list-cancellation h5{
	font-weight:normal;
	margin:0 auto 0 .5em;
}

.cancellation-inner-list{
	margin:0 auto 1em 1em;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}

.cancellation-inner-list dt{
	display:inline-block;
	width:140px;
	padding:0;
	background:none;
	border:none;
	color:#666;
}
 
.cancellation-inner-list dd{
	width:calc(100% - 150px);
	display:inline-block;
	margin:0;
	padding:0;
	border:none;
}

.booking-remarks{
	width:100%;
	height:300px;
	margin:0;
}

.booking-submit{
	width:calc(100% - 14px);
	margin:30px auto;
}

.agreement-checkbox{
	text-align:center;
	font-size:121%;
}

.booking-button{
	text-align:center;
}

#close-button{
	display:block;
	margin:30px auto -30px auto;
	text-align:center;
}

#close-button a{
	font-size:107%;
}

.booking-box-additional{
	display:block;
	font-size:107%;
	margin:0 auto;
	padding:0 6px;
	letter-spacing:1px;
	background:#ddd;
}

.booking-notice-box{
	margin:10px;
	padding-bottom:5px;
}

.booking-notice-list{
	margin:-1em 0 10px -1.5em;
}

.booking-trip {
	position: relative;
}

.booking-list-primary dt.booking-trip-hidden, .booking-list-primary dd.booking-trip-hidden {
	display: none;
}

.booking-add-trip-section {
	text-align: center;
}

.booking-add-trip-button {
	width: 149px;
	background-color: red;
	color: white;
}

.booking-delte-trip-button {
	position: absolute;
	bottom: 5px;
	right: 5px;
}
/*---------------------------------------
 * カレンダー
---------------------------------------*/
.ui-datepicker{
	width:240px;
	max-width:240px;
}

.ui-widget{
	font-size:86%;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{
	width:36%;
	margin:0 2px 0 7px;
}

/*---------------------------------------
 * 基本レイアウト（スマホ）
---------------------------------------*/
@media(max-width:480px){

	.booking-form{
		width:100%;
	}

	.booking-list-primary{
		width:100%;
		margin:5px auto 15px auto;
	}
 
	.booking-list-primary dt{
		display:inline-block;
		width:100%;
		padding:2px 8px;
		margin:0 1px 1px 0;
		color:#fff;
		background:#6F57CF;
	}
 
	.booking-list-primary dd{
		width:100%;
		display:inline-block;
		padding:8px 8px 10px 8px;
		margin:0 0 1px 0;
		background:#FFC2FF;
	}

	.booking-required{
		font-size:93%;
		color:#FDFFCA;
		display:inline-block;
		margin:0 0 0 1em;
	}

	.booking-notice{
		font-size:93%;
		color:#f33;
		display:block;
		margin:0.5em 0 0 0;
	}

	.booking-list-secondary{
		width:100%;
		margin:0 auto 15px auto;
	}
 
	.booking-list-secondary dt{
		display:inline-block;
		width:100%;
		padding:2px 8px;
		margin:0 1px 1px 0;
		color:#fff;
		background:#2B639B;
	}
 
	.booking-list-secondary dd{
		width:100%;
		display:inline-block;
		padding:8px 8px 10px 8px;
		margin:0 0 1px 0;
		background:#CFC7FF;
	}

	.booking-inner-list-main{
		width:100%;
		margin:0 auto 0 -6px;
	}

	.booking-inner-list-main dt{
		display:inline-block;
		width:120px;
		margin:0 0 6px 0;
		background:none;
		color:#666;
	}
 
	.booking-inner-list-main dd{
		width:calc(100% - 130px);
		display:inline-block;
		margin:0;
		padding:0 0 6px 8px;
	}

	.booking-inner-list{
		width:100%;
		margin:0 auto 0 -6px;
	}

	.booking-inner-list dt{
		display:inline-block;
		width:90px;
		margin:0 0 6px 0;
		background:none;
		color:#666;
	}
 
	.booking-inner-list dd{
		width:calc(100% - 100px);
		display:inline-block;
		margin:0;
		padding:0 0 6px 8px;
	}

	.w150{
		max-width:75%;
	}

	.w200{
		max-width:calc(100% - 1.5em);
	}

	.w250{
		max-width:213px;
	}

	.booking-guest-notice{
		display:block;
		font-size:93%;
		color:#f33;
		margin:6px 6px 0 2px;
	}

	.confirm-list{
		margin:5px 6px 30px 6px;
		display:flex;
		flex-wrap:wrap;
		flex-direction:row;
		display:-webkit-flex;
		-webkit-flex-wrap:wrap;
		-webkit-flex-direction:row;
	}
 
	.confirm-list dt{
		display:inline-block;
		width:129px;
		min-height:27px;
		padding-top:3px;
		margin:0;
	}
 
	.confirm-list dd{
		width:calc(100% - 130px);
		display:inline-block;
		padding:3px 0;
		margin:0;
	}

	.confirm-inner-list dt{
		display:inline-block;
		width:140px;
		padding:0;
		background:none;
		border:none;
	}
 
	.confirm-inner-list dd{
		width:calc(100% - 150px);
		display:inline-block;
		margin:0;
		padding:0;
		border:none;
	}

	.booking-list-cancellation{
		width:100%;
		margin:0 auto 15px auto;
	}
 
	.booking-list-cancellation dt{
		display:inline-block;
		width:100%;
		padding:6px;
		margin:0 1px 1px 0;
		color:#fff;
		background:#539F66;
		font-size:93%;
	}
 
	.booking-list-cancellation dd{
		width:100%;
		display:inline-block;
		padding:6px;
		margin:0 0 1px 0;
		background:#BCFFCC;
		font-size:93%;
	}

	.booking-list-cancellation p{
		margin:1em auto 0 auto;
	}

	.cancellation-inner-list{
		margin:0 auto 1em 1em;
		display:flex;
		flex-wrap:wrap;
		flex-direction:row;
		display:-webkit-flex;
		-webkit-flex-wrap:wrap;
		-webkit-flex-direction:row;
	}

	.cancellation-inner-list dt{
		display:inline-block;
		width:140px;
		padding:0;
		background:none;
		border:none;
		color:#666;
	}
 
	.cancellation-inner-list dd{
		width:calc(100% - 150px);
		display:inline-block;
		margin:0;
		padding:0;
		border:none;
	}

	.booking-delte-trip-button {
		position: absolute;
		top: 0px;
		bottom: 0px;
	}
}