@charset "UTF-8";
.form{
	background: #00A5FF;
}
.form .wrap{
	padding: 60px 0;
}
.form .breadcrumb{
	margin-bottom: 0;
}
.form .breadcrumb ul{
	padding: 0;
}
.form p{
	color: #FFF;
}
.form p.first_coment{
	margin-bottom: 16px;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}
.title_mid{
	height: 52px;
	margin-bottom: 30px;
}
.title_mid h3{
	font-size: 1.6rem;
	text-align: center;
}
.tel{
	position: relative;
	margin-bottom: 40px;
}
.tel:before{
	content: "";
	position: absolute;
	top: -76px;
	left: 20px;
	width: 166px;
	height: 225px;
	background: url(../img/form/img01.png) no-repeat center center;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}
.tel p{
	font-size: 1.6rem;
	text-align: center;
}
.tel p:last-child{
	margin-top: 8px;
}

.mail p{
	margin-bottom: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}
.mail dl{
	padding: 20px;
	background: rgba(204, 237, 255, 0.2);
}
.mail dl + p{
	margin-top: 40px;
	font-weight: bold;
}
.mail dl dt{
	position: absolute;
	width: 244px;
	font-size: 1.6rem;
	color: #FFF;
	line-height: 36px;
}
.mail dl dt span.fss{
	font-size: 1.2rem;
}
.mail dl dt span.required{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	        justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	width: 55px;
	height: 36px;
	font-size: 1.6rem;
	color: #333;
	font-weight: bold;
	text-align: center;
	background: linear-gradient(#ffff00, #b4ff17);
	-webkit-border-radius: 6px;
	        border-radius: 6px;
}
.ie11 .mail dl dt span.required{
	padding-top: 5px;
}
.mail dl dd{
	padding-left: 260px;
	margin-bottom: 20px;
	font-size: 1.6rem;
	color: #FFF;
	line-height: 36px;
	min-height: 36px;
}
.mail dl dd:last-child{
	margin-bottom: 0;
}
.mail dl dd input[type="text"],
.mail dl dd input[type="tel"],
.mail dl dd input[type="email"],
.mail dl dd textarea{
	width: 100%;
	height: 36px;
	padding: 8px 12px;
	font-size: 1.6rem;
	background: #FFF;
	border: 1px solid #808080;
	-webkit-border-radius: 6px;
	        border-radius: 6px;
}
.mail dl dd textarea{
	height: 148px;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
	resize: vertical;
}
.mail dl dd .radio{
	position: relative;
	display: inline-block;
	padding: 0 0 0 2em;
	cursor: pointer;
}
.mail dl dd .radio:after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: block;
	content: '';
	width: 24px;
	height: 24px;
	margin: 4px auto auto auto;
	border: 1px solid #808080;
	-webkit-border-radius: 50%;
	        border-radius: 50%;
	background: #fff;
}
.ie11 .mail dl dd .radio:after{
	margin: 2px auto auto auto;
}
.mail dl dd .radio:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 16px;
	height: 16px;
	margin: 9px auto auto 5px;
	content: '';
	opacity: 0;
	background: linear-gradient(#05FBFF, #1E00FF);
	-webkit-border-radius: 50%;
	        border-radius: 50%;
	z-index: 99;
}
.ie11 .mail dl dd .radio:before{
	margin: 7px auto auto 5px;
}
.mail dl dd input[type=radio]{
	display: none;
}
.mail dl dd input[type=radio]:checked + .radio:before {
	opacity: 1;
}
.mail dl dd select{
	position: relative;
	width: 100%;
	height: 36px;
	padding: 4px 12px;
	font-size: 1.6rem;
	background: linear-gradient(#fff, #cdcecd);
	border: 1px solid #808080;
	-webkit-border-radius: 6px;
	        border-radius: 6px;
	cursor: pointer;
}
.mail dl .select_area{
	position: relative;
}
.mail dl .select_area:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	/*left: 98%;*/
	right:10px;
	bottom: 0;
	width: 9px;
	height: 20px;
	margin: auto;
	background: url(../img/form/bg_select.png) no-repeat center center;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	z-index: 999;
}
p.checkbox{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	        justify-content: center;
	width: 100%;
	height: 40px;
	padding: 8px;
	/*margin-bottom: 40px;*/
	background: rgba(250, 250, 250, 0.2);	
}
p.checkbox + p.btn_send {
	margin-top: 40px;
}
.ie11 p.checkbox{
	padding: 4px 0 0;
}
label.checkbox {
	position: relative;
	display: inline-block;
	padding: 0 0 0 2.5em;
	cursor: pointer;
}
label.checkbox:after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: block;
	content: '';
	width: 24px;
	height: 24px;
	margin: auto;
	background: #fff;
	border: 1px solid #808080;
	-webkit-border-radius: 4px;
	        border-radius: 4px;
}
.ie11 label.checkbox:after,
.ie11 label.checkbox:before{
	top: -6px;
}
label.checkbox:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 8px;
	display: block;
	width: 8px;
	height: 14px;
	margin: 1px auto auto auto;
	border-right: 3px solid #000;
	border-bottom: 3px solid #000;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 999;
}
input[type=checkbox]{
	display: none;
}
input[type=checkbox]:checked + .checkbox:before {
	opacity: 1;
}

input, button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select::-ms-expand {
    display: none;
}

.form p.caution{
	margin-bottom: 8px;
	font-size: 1.6rem;
	font-weight: bold;
}
.personal_information{
	width: 100%;
	height: 310px;
	padding: 20px;
	margin-bottom: 20px;
	background: #FFF;
	border: 1px solid #808080;
	overflow: scroll;
}
.personal_information p{
	margin-bottom: 0;
	font-size: 1.4rem;
	color: #333;
	line-height: 1.8;
}
.personal_information p.mb1em{
	margin-bottom: 1em;
}
.btn_send.mt40 {
	margin-top: 40px;
}
.btn_send input{
	display: block;
	width: 460px;
	height: 60px;
	margin: auto;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	background: linear-gradient(#ffff00, #b4ff17);
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 3px 10px 0 rgba(0,0,0,0.5);
	box-shadow: 1px 3px 10px 0 rgba(0,0,0,0.5);
	cursor: pointer;
}
.ie11 .btn_send input{
	padding-top: 3px;
}
.btn_return button{
	display: block;
	width: 460px;
	height: 60px;
	margin: auto;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	background: #e4e4e4;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 3px 10px 0 rgba(0,0,0,0.5);
	box-shadow: 1px 3px 10px 0 rgba(0,0,0,0.5);
	cursor: pointer;
}
.ie11 .btn_return button{
	padding-top: 3px;
}
.btn_returns2 a{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	        justify-content: center;
	width: 460px;
	height: 60px;
	margin: 68px auto;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	background: linear-gradient(#ffff00, #b4ff17);
	-webkit-border-radius: 6px;
	        border-radius: 6px;
	-webkit-box-shadow: 1px 3px 10px 0 rgba(0,0,0,0.5);
	        box-shadow: 1px 3px 10px 0 rgba(0,0,0,0.5);	
	cursor: pointer;
}
.ie11 .btn_returns2 a{
	padding-top: 7px;
}
.btn_send input:hover,
.btn_return button:hover,
.btn_returns2 a:hover{
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-webkit-transition: 0.7s ease-in-out;
	-moz-transition: 0.7s ease-in-out;
	-o-transition: 0.7s ease-in-out;
	transition: 0.7s ease-in-out;
}


.mail dl dd select.container,
.mail dl dd select.box{
	display: none;
}
.mail dl dd.mbhalf{
	margin-bottom: 0.5em;
}
.mail dl dd p{
	margin-left: 1em;
	margin-bottom: 0;
	font-weight: normal;
	text-indent: -1em;
}

.confirm h3{
	margin-bottom: 60px;
	font-size: 3rem;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}
.confirm dl + dl{
	margin: 30px 0 60px;
}

.thanks p{
	font-size: 2rem;
	text-align: center;
}

/* 住所・電話番号の変更 */
.change_of_address{
    /*display: none;*/
}

.mail dl .change_of_address  dd p {
    margin-left: 0;
    text-indent: 0;
}
.change_of_address p.checkbox{
    background: none;
    display: block;
}
.change_of_address label.checkbox {
    padding: 0 0 0 1.5em;
}
.change_of_address label.checkbox:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.change_of_address label.checkbox:before {
    top: 1px;
    left: 5px;
    width: 6px;
    height: 11px;
}

.change_of_address .contact_zip{
    max-width: 90px;
    margin: 0 5px;
}
.change_of_address .new_tel_num input[type="tel"],
.change_of_address .new_mobile_num input[type="tel"],
.mail .change_of_address dd.adaptation_date .select_area{
    display: inline-block;
    max-width: 90px;
    width: 100%;
    margin-right: 5px;
}
.mail .change_of_address .select_area:before{
    left: 80%;
}


.change_of_address .js-button{
    text-align: center;
    font-size: 1.6rem;
    color: #FFF;
    background: #333333;
    border-radius: 6px;
    padding: 6px 10px;
    box-sizing: border-box;
    cursor: pointer;
}
.change_of_address #hidden01,
.change_of_address #hidden02,
.change_of_address #hidden03,
.change_of_address,
.reservation { margin-bottom: 20px;}

@media screen and (max-width: 760px){
	.lower_title_area h2{
		width: 130px;
	}
	.form .wrap{
		padding: 5% 0;
	}
	.form p.first_coment{
		margin-bottom: 2%;
		font-size: 1.4rem;
		letter-spacing: -1px;
	}
	.title_mid{
		width: 100%;
		height: 30px;
		margin-bottom: 3%;
	}
	.title_mid h3{
		font-size: 1.4rem;
	}
	.tel{
		margin-bottom: 5%;
	}
	.tel:before{
		top: -40px;
		left: 10px;
		width: 50px;
		height: 70px;
	}
	.android .tel:before{
		left: 2px;
	}
	.tel p{
		font-size: 1rem;
	}
	.tel p.sp{
		width: 80%;
		margin: auto;
	}
	.tel p:last-child{
		margin-top: 2%;
	}

	.mail p{
		margin-bottom: 2%;
		font-size: 1.4rem;
	}
	.mail dl{
		padding: 4%;
	}
	.mail dl + p{
		margin-top: 2%;
	}
	.mail dl dt{
		position: inherit;
		width: 100%;
		font-size: 1.4rem;
		line-height: 1.8;
	}
	.mail dl dt span.fss{
		font-size: 1.4rem;
	}
	.mail dl dt span.required{
		position: inherit;
		display: inline-block;
		width: auto;
		height: auto;
		padding: 0.3em 0.5em 0.4em;
		margin-left: 2%;
		margin-bottom: 2%;
		font-size: 0.8rem;
		line-height: 1;
	}
	.mail dl dd{
		padding-left: 0;
		margin-bottom: 3%;
		font-size: 1.4rem;
		line-height: 1.8;
	}
	.mail dl dd input[type="text"],
	.mail dl dd input[type="tel"],
	.mail dl dd input[type="email"],
	.mail dl dd textarea{
		height: 2em;
		padding: 2% 4%;
		font-size: 1.4rem;
	}
	.mail dl dd textarea{
		height: 140px;
	}
	.mail dl dd .radio{
		padding: 0 0 0 1.6em;
		letter-spacing: 0;
	}
	.mail dl dd .radio:after{
		width: 1.2em;
		height: 1.2em;
		margin: 2px auto auto auto;
	}
	.mail dl dd .radio:before{
		width: 1em;
		height: 1em;
		margin: 4.7px auto auto 2.7px;
	}
	.mail dl dd select{
		height: 2em;
		padding: 1% 4%;
		font-size: 1.4rem;
	}
	.mail dl .select_area:before{
		left: 95%;
		width: 6px;
		height: 16px;
	}
	p.checkbox{
		height: 2em;
		padding: 2%;
		margin-bottom: 5%;	
	}
	label.checkbox {
		padding: 0 0 0 2em;
	}
	label.checkbox:after {
		width: 1.4em;
		height: 1.4em;
	}
	label.checkbox:before {
		left: 6px;
		margin: 0 auto auto auto;
	}

	.form p.caution{
		margin-bottom: 2%;
		font-size: 1.4rem;
	}
	.personal_information{
		height: 200px;
		padding: 4%;
		margin-bottom: 3%;
	}
	.personal_information p{
		font-size: 1.2rem;
		line-height: 1.5;
	}
	.btn_send input,.btn_return button,.btn_returns2 a{
		width: 60%;
		height: 50px;
		font-size: 1.6rem;
	}
	.btn_return button{
		margin: 3% auto 0;
	}
	.btn_returns2 a{
		margin: 5% auto 3%;
	}


	.mail dl dd select.container,
	.mail dl dd select.box{
		display: none;
	}
	.mail dl dd select.mbhalf{
		margin-bottom: 0.5em;
	}
	.mail dl dd p{
		margin-left: 1em;
		margin-bottom: 0;
		font-weight: normal;
		text-indent: -1em;
	}

	.confirm h3{
		margin-bottom: 5%;
		font-size: 1.4rem;
	}
	.confirm dl + dl{
		margin: 3% 0 5%;
	}
	.btn_area{
		display: block;
	}

	.thanks p{
		font-size: 1.4rem;
	}


/* 住所・電話番号の変更 */
    .change_of_address .contact_zip{
        max-width: 20vw;
    }
    .change_of_address .new_tel_num input[type="tel"],
    .change_of_address .new_mobile_num input[type="tel"],
    .mail .change_of_address dd.adaptation_date .select_area{
        max-width: 20vw;
    }

    .mail .change_of_address .select_area:before{
        left: 76%;
    }
    .change_of_address .js-button{
        font-size: 1.4rem;
        padding: 4px 6px;
    }
    .change_of_address #hidden01,
    .change_of_address #hidden02,
    .change_of_address #hidden03,
    .change_of_address,
	.reservation{ margin-bottom: 3%;}

}