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

/*------------------------------------------------------------------------------------------------
    CONTACT
--------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------
     contact          
--------------------------------------------------- */
.confirm-area,
.thanks-area {
	display: none;
}


/*デフォルトのサンクスメッセージを非表示*/
.wpcf7-response-output{
	display: none;
}

.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}


/*---------------------------------------------
    PC - CONTACT
-----------------------------------------------*/
.contact-about{
	width: 100%;
	margin: 0 auto 40px;
	padding: 60px 0;
	text-align: center;
	position: relative;
	border-top: 1px solid #191919;
    border-bottom: 1px solid #191919;
}
.contact-about p.head{
	width: 400px;
    line-height: 40px;
	position: absolute;
    top: -20px;
    left: calc(50% - 200px);
	border: 1px solid #191919;
    background: #191919;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
	color: #fff;
}
.contact-about p.read{ font-size: 14px;}
.contact-about p.tel{ margin: 20px auto 0; font-size: 48px; font-weight: bold;}
.contact-about p.tel span.icon{
		content: '';
		display: inline-block;
		width: 34px;
		height: auto;
		padding-top: 34px;
		margin-top: -10px;
		margin-right: 10px;
		background: url(../../img/icon_tel_bk.png) no-repeat;
		background-size: cover;
		vertical-align: middle;
	}
.contact-about ul.about{ margin: 10px auto 0;}
.contact-about ul.about li{ margin: 0 auto 5px; font-size: 16px;}
.contact-about ul.about li:last-child{ margin-bottom: 0;}

.contact-form-guid{
	box-sizing: border-box;
	width: 50%;
	padding: 10px 10px 6px; 
	margin: 0 auto;
	font-size: 16px; 
	text-align: center;
	/*background: #b5121f;*/
	border: 1px solid #191919;
}
.contact-form-guid span{  }
.contact-form-guid i{ display: block; margin: 0 auto; font-size: 24px;}

@media screen and (max-width: 1023px){
	.contact-about{
		width: 100%;
		margin: 0 auto 10%;
		padding: 15% 0;
		text-align: center;
		position: relative;
		border-top: 1px solid #191919;
		border-bottom: 1px solid #191919;
	}
	.contact-about p.head{
		width: 80%;
		line-height: 40px;
		position: absolute;
		top: -20px;
		left: calc(50% - 40%);
		border: 1px solid #191919;
		background: #191919;
		border-radius: 25px;
		font-size: 4.6vw;
		font-weight: bold;
		color: #fff;
	}
	.contact-about p.read{ font-size: 4vw;}
	.contact-about p.tel{ margin: 5% auto 0; font-size: 9vw; font-weight: bold;}
	.contact-about p.tel span.icon{
		content: '';
		display: inline-block;
		width: 10%;
		height: auto;
		padding-top: 10%;
		margin-top: -10px;
		margin-right: 10px;
		background: url(../../img/icon_tel_bk.png) no-repeat;
		background-size: cover;
		vertical-align: middle;
	}
	.contact-about ul.about{ margin: 4% auto 0;}
	.contact-about ul.about li{ margin: 0 auto 1%; font-size: 4.4vw;}
	.contact-about ul.about li:last-child{ margin-bottom: 0;}
	
	.contact-form-guid{
		box-sizing: border-box;
		width: 100%;
		padding: 3% 2% 3%; 
		margin: 0 auto;
		font-size: 4.2vw; 
		text-align: center;
		/*background: #b5121f;*/
		border: 1px solid #191919;
	}
	.contact-form-guid span{  }
	.contact-form-guid i{ display: block; margin: 0 auto; font-size: 5vw;}
}



/*---------------------------------------------
    PC - FORM
-----------------------------------------------*/
#form p.second-maintext span.hissu{ 
	display: inline-block; 
	padding: 0 7px; 
	margin-right: 2px;
	font-size: 13px;
	color: #FFF; 
	background: #b5121f;
}

/*-----　status ------*/
#form .status-wrap{ width: 100%; margin: 0 auto 40px; display: flex;}
#form .status-wrap .status {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: calc(100% / 3);
	line-height: 30px;
	padding: 8px 10px;
	font-size: 16px;
	text-align: center;
	background: #FFF;
	border-right: 1px solid #c7c3bb;
}
#form .status-wrap .status.now{ border-right: none; font-weight: bold; color: #FFF; background: #b5121f; z-index: 500;}
#form .status-wrap .status:last-child{ border-right: none;}


#form .status-wrap .status.now:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -10px;
	border: 10px solid transparent;
	border-left: 8px solid #b5121f;
}
#form .status-wrap .status.last:before { border: none; border-left: none;}
#form .status-wrap .status p { margin: 0; padding: 0;}


@media screen and (max-width: 1023px){
	#form p.second-maintext span.hissu{ 
		display: inline-block; 
		padding: 0 7px; 
		margin-right: 2px;
		font-size: 3.8vw;
		color: #FFF; 
		background: #b5121f;
	}	
	/*-----　status ------*/
	#form .status-wrap{ width: 100%; margin: 0 auto 8%; display: flex;}
	#form .status-wrap .status {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		width: calc(100% / 3);
		padding: 3% 8px;
		font-size: 4vw;
		line-height: 1.3;
		text-align: center;
		background: #FFF;
		border-right: 1px solid #c7c3bb;
	}
	#form .status-wrap .status.now{ border-right: none; font-weight: bold; color: #FFF; background: #b5121f; z-index: 500;}
	#form .status-wrap .status:last-child{ border-right: none;}
	
	#form .status-wrap .status.now:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		margin-top: -10px;
		border: 10px solid transparent;
		border-left: 8px solid #b5121f;
	}
	#form .status-wrap .status.last:before { border: none; border-left: none;}
	#form .status-wrap .status p { margin: 0; padding: 0;}
}


/*-----　form ------*/
#form .formitem-wrap{
	box-sizing: border-box;
	width: 100%;
	padding: 20px 0;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #c7c3bb;
}
#form .formitem-wrap .formttl,
#form .formitem-wrap .formcontents{ box-sizing: border-box; padding: 0 16px; font-size: 14px;}

#form .formitem-wrap .formttl{ width: 30%; font-weight: bold; /*background: #C8E0FF;*/}
#form .formitem-wrap .formttl span{ display: inline-block; padding: 2px 7px; float: right;}
#form .formitem-wrap .formttl span.ninni{  background: #c7c3bb;}
#form .formitem-wrap .formttl span.hissu{ color: #FFF; background: #b5121f;}

#form .formitem-wrap .formcontents{ width: 64%; /*background: #D7FFCF;*/}
#form .formitem-wrap .formcontents input[type="text"],
#form .formitem-wrap .formcontents input[type="email"],
#form .formitem-wrap .formcontents input[type="tel"],
#form .formitem-wrap .formcontents textarea{
	box-sizing: border-box;
	width: 100%;
	padding: 6px 10px;
	font-size: 14px;
	border-radius:5px;
	border: none;
	-webkit-appearance: none;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.32);
}
#form .formitem-wrap .formcontents textarea{ height: 200px;}
#form .formitem-wrap .formcontents input[type="checkbox"]{ font-weight: bold;}

#form .formitem-wrap .formcontents input::-webkit-input-placeholder{ color: #c7c3bb;}
#form .formitem-wrap .formcontents input::-moz-placeholder{ color: #c7c3bb;}
#form .formitem-wrap .formcontents input:-ms-input-placeholder{ color: #c7c3bb;}

#form .formitem-wrap .formcontents textarea::-webkit-input-placeholder{ color: #c7c3bb;}
#form .formitem-wrap .formcontents textarea::-moz-placeholder{ color: #c7c3bb;}
#form .formitem-wrap .formcontents textarea:-ms-input-placeholder{ color: #c7c3bb;}

#form .formitem-wrap .formcontents input[type="text"]:required,
#form .formitem-wrap .formcontents input[type="email"]:required,
#form .formitem-wrap .formcontents input[type="tel"]:required,
#form .formitem-wrap .formcontents input[type="checkbox"]:required{ z-index: 200;}

#form .formitem-wrap .formcontents .privacy_statement{
	box-sizing: border-box;
	width: 100%;
	height: 200px;
    padding: 20px 20px 0;
    overflow: auto;
	border-radius:5px;
    border: 1px solid #d0d0d0;
    background: #fff;
}
#form .formitem-wrap .formcontents .privacy_statement p.head{ 
	margin: 0 auto 10px; 
	font-size: 18px; 
	font-weight: bold;
	padding-bottom: 8px;
	border-bottom: 1px solid #c7c3bb;
}
#form .formitem-wrap .formcontents .privacy_statement p.text{ margin: 0 auto 30px;}
#form .formitem-wrap .formcontents .privacy_statement ul{ box-sizing: border-box; margin: 0 auto 30px; padding-left: 1em;}
#form .formitem-wrap .formcontents .privacy_statement ul li{ margin: 0 auto 5px; list-style-type: decimal;}
#form .formitem-wrap .formcontents p.kakunin{ margin: 10px auto 30px; font-size: 13px; padding-left: .5em;}
#form .formitem-wrap .formcontents p.check label{ font-weight: bold;}
#form .formitem-wrap .formcontents p.check span{ display: inline-block; margin-left: 5px;}

#form p.kakunin_btn{ width: 300px; margin: 60px auto 0;}
#form p.kakunin_btn a, 
#form p.kakunin_btn input[type="submit"], 
#form p.kakunin_btn button[type="submit"]{
	display: block;
    width: 100%;
	padding: 10px 0;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
    color: #FFF;
	background: #b5121f;
	cursor: pointer;
	/*transition: .3s;*/
	border: 2px solid #b5121f;
}
#form p.kakunin_btn a:hover, 
#form p.kakunin_btn input[type="submit"]:hover, 
#form p.kakunin_btn button[type="submit"]:hover{ color: #b5121f; background: transparent; }

#form p.back_btn{ width: 300px; margin: 60px auto 0;}
#form p.back_btn a.back-button, 
#form p.back_btn button#back{
	display: block;
    width: 100%;
	padding: 10px 0;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
    color: #FFF;
	background: #333;
	cursor: pointer;
	/*transition: .3s;*/
	border: 2px solid #333;
}
#form p.back_btn a.back-button:hover, 
#form p.back_btn button#back:hover{ color: #333; background: transparent; }

@media screen and (max-width: 1023px){
	#form .formitem-wrap{
		box-sizing: border-box;
		width: 100%;
		padding: 20px 0;
		margin: 0 auto;
		display: block;
	}
	#form .formitem-wrap .formttl,
	#form .formitem-wrap .formcontents{ box-sizing: border-box; padding: 0 3%; font-size: 4vw;}
	
	#form .formitem-wrap .formttl{ width: 100%; margin: 0 auto 4%; font-weight: bold; /*background: #C8E0FF;*/}
	#form .formitem-wrap .formttl span{ display: inline-block; padding: .5% 3%; font-size: 3.7vw; float: right;}
	#form .formitem-wrap .formttl span.ninni{  background: #c7c3bb;}
	#form .formitem-wrap .formttl span.hissu{ color: #FFF; background: #b5121f;}
	
	#form .formitem-wrap .formcontents{ width: 100%; /*background: #D7FFCF;*/}
	#form .formitem-wrap .formcontents input[type="text"],
	#form .formitem-wrap .formcontents input[type="email"],
	#form .formitem-wrap .formcontents input[type="tel"],
	#form .formitem-wrap .formcontents textarea{
		box-sizing: border-box;
		width: 100%;
		padding: 3% 2%;
		font-size: 4vw;
		border-radius:5px;
		border: none;
		-webkit-appearance: none;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.32);
	}
	#form .formitem-wrap .formcontents textarea{ height: 300px;}
	#form .formitem-wrap .formcontents input[type="checkbox"]{ font-weight: bold;}
	
	#form .formitem-wrap .formcontents input::-webkit-input-placeholder{ color: #c7c3bb;}
	#form .formitem-wrap .formcontents input::-moz-placeholder{ color: #c7c3bb;}
	#form .formitem-wrap .formcontents input:-ms-input-placeholder{ color: #c7c3bb;}
	
	#form .formitem-wrap .formcontents textarea::-webkit-input-placeholder{ color: #c7c3bb;}
	#form .formitem-wrap .formcontents textarea::-moz-placeholder{ color: #c7c3bb;}
	#form .formitem-wrap .formcontents textarea:-ms-input-placeholder{ color: #c7c3bb;}
	
	#form .formitem-wrap .formcontents input[type="text"]:required,
	#form .formitem-wrap .formcontents input[type="email"]:required,
	#form .formitem-wrap .formcontents input[type="tel"]:required,
	#form .formitem-wrap .formcontents input[type="checkbox"]:required{ z-index: 200;}
	
	#form .formitem-wrap .formcontents .privacy_statement{
		box-sizing: border-box;
		width: 100%;
		height: 200px;
		padding: 4% 4% 0;
		overflow: auto;
		border-radius:5px;
		border: 1px solid #d0d0d0;
		background: #fff;
	}
	#form .formitem-wrap .formcontents .privacy_statement p.head{ 
		margin: 0 auto 4%; 
		font-size: 5vw; 
		font-weight: bold;
		padding-bottom: 3%;
		border-bottom: 1px solid #c7c3bb;
	}
	
	#form .formitem-wrap .formcontents .privacy_statement p.text{ margin: 0 auto 8%;}
	#form .formitem-wrap .formcontents .privacy_statement ul{ box-sizing: border-box; margin: 0 auto 8%; padding-left: 1em;}
	#form .formitem-wrap .formcontents .privacy_statement ul li{ margin: 0 auto 2%; list-style-type: decimal;}
	#form .formitem-wrap .formcontents p.kakunin{ margin: 5% auto 8%; font-size: 3.8vw; padding-left: .5em;}
	#form .formitem-wrap .formcontents p.check label{ font-weight: bold;}
	#form .formitem-wrap .formcontents p.check span{ display: inline-block; margin-left: 5px;}
	
	#form p.kakunin_btn{ width: 100%; margin: 10% auto 0;}
	#form p.kakunin_btn a, 
	#form p.kakunin_btn input[type="submit"], 
	#form p.kakunin_btn button[type="submit"]{
		display: block;
		width: 100%;
		padding: 4% 0;
		font-size: 4.6vw;
		font-weight: bold;
		text-align: center;
		color: #FFF;
		background: #b5121f;
		cursor: pointer;
		/*transition: .3s;*/
		border: 2px solid #b5121f;
	}
	#form p.kakunin_btn a:hover, 
	#form p.kakunin_btn input[type="submit"]:hover, 
	#form p.kakunin_btn button[type="submit"]:hover{ color: #b5121f; background: transparent; }
	
	#form p.back_btn{ width: 100%; margin: 10% auto 0;}
	#form p.back_btn a.back-button, 
	#form p.back_btn button#back{
		display: block;
		width: 100%;
		padding: 4% 0;
		font-size: 4.6vw;
		font-weight: bold;
		text-align: center;
		color: #FFF;
		background: #333;
		cursor: pointer;
		/*transition: .3s;*/
		border: 2px solid #333;
	}
	#form p.back_btn a.back-button:hover, 
	#form p.back_btn button#back:hover{ color: #333; background: transparent; }
}



/*---------------------------------------------
    PC - MAP
-----------------------------------------------*/
#map {
    width: 100%;
    height: 420px;
	margin: 0 auto;
	border-bottom: 1px solid #DDDDDD;
}





/*------------------------------------------------------------------------------------------------
    CONFIRM
--------------------------------------------------------------------------------------------------*/
#form ul.kakunin{ width: 630px; margin: 0 auto; display: flex;justify-content: space-between; align-items: flex-start;}
#form ul.kakunin li{ display: inline-block; margin-right: 20px;}
#form ul.kakunin li:last-child{ margin-right: 0;}

@media screen and (max-width: 1023px){
	#form ul.kakunin{ width: 100%; margin: 0 auto;}
	#form ul.kakunin li{ display: block; margin-right: 0; margin-bottom: 3%;}
	#form ul.kakunin li:last-child{ margin-right: 0; margin-bottom: 0;}
}


