@charset "utf-8";

/* お問い合わせ- contact - */

/* ==============================

	レイアウト

============================== */
.contact {
	background: url(../img/contact_bg.svg) no-repeat right top / 100%;
}


@media only screen and (max-width: 767px){
	.contact {
		background: none;
	}

}

.contact h2 {
	text-align: center;
	background: url(../img/contact_h2.svg) no-repeat top right / 50px;
	width: fit-content;
	display:block;
	margin: 0 auto 50px auto;
	padding: 5px 30px;
}

.contact h2 span {
	font-size: 1.8rem;
	background: linear-gradient(transparent 60%, #FBED11 0%);
}

@media only screen and (max-width: 767px){
	.contact h2 {
		padding: 20px 30px;
		margin-bottom: 10px;
	}

	.contact h2 span {
		font-size: 1.3rem;
	}
}


/* ==============================

	メイン画像

============================== */
/* .qa mv */
.contact .mv_ttl {
	background: url(../img/mv_contact_bg.jpg) no-repeat top center / cover ;
}




/* ==============================

	コンテンツ

============================== */
.contact_cont {
	padding: 40px;
	padding-bottom: 100px;
	background: url(../../../asset/img/bg_stripe.jpg);
}

.contact .box {
	background-color: #fff;
	padding: 20px 40px;
	border:1px solid #CCCCCC;
	border-radius: 20px;
}

.contact_cont_bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
}

.contact_cont_form,
.contact_cont_tel {
	width: 49%;
}

.contact_cont_form .box,
.contact_cont_tel .box {
	text-align: center;
	height: 260px;
}

@media only screen and (max-width: 767px){
	.contact_cont {
		padding: 40px 0;
	}
	
	.contact_cont_form .box{
		text-align: left;
	}

	.contact_cont_form,
	.contact_cont_tel {
		width: 100%;
	}

	.contact .box {
		padding: 20px;
		margin-bottom: 40px;
	}
	.contact .box p br.pc{
        display: none;
    }
	
	.contact_cont_form .box,
	.contact_cont_tel .box {
		height: auto;
	}
	
}



/* ==============================

	よくいただくご質問

============================== */
/* contact_cont_question */
.contact_cont_question {
	margin-bottom: 60px;	
}

.contact_cont_question .box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}


.contact_cont_question .box ul li {
	font-size:1.0rem;
	font-weight:bold;
	margin-bottom: 10px;
}

.contact_cont_question .box ul li:before {
	content:url(../img/icon_cheack.svg);
	display: inline-block;
	width: 20px;
	margin-right: 5px;
	vertical-align:middle;
}

.contact_cont_question .box .btn a{
	background-color: #B89FC9;
	color: #FFF;
	border: none;
}

@media only screen and (max-width: 767px){
	.contact_cont_question {
		margin-bottom: 0;
	}

	.contact_cont_question .box ul {
		margin-bottom: 20px;
	}

	.contact_cont_question .box ul li {
		font-size:0.7rem;
		margin-bottom: 0px;
	}
	
	.contact_cont_question .box .btn{
		width: 100%;
	}
}



/* ==============================

	フォームからのお問い合わせ

============================== */
/* contact_cont_form */
.contact_cont_form .btn a{
	background-color: #9BCB6C;
	color: #FFF;
	border: none;
	margin-top: 30px;
	width: auto;
}

@media only screen and (max-width: 767px){
	.contact_cont_form {
		font-size:0.9rem;
	}
}



/* ==============================

	お電話でのお問い合わせ

============================== */
/* contact_cont_tel */
.contact_cont_tel .box {
	padding: 45px;
}

.contact_cont_tel_no a {
	color: #000;
	font-size:2.4rem;
}

.contact_cont_tel_no a i{
	margin-right: 5px;
}

.contact_cont_tel dt {
	background-color: #FCD25B;
	color: #FFF;
	border-radius: 1000px;
	width:200px;
	margin: 20px auto 10px auto;
	padding: 5px;
}


@media only screen and (max-width: 767px){
	.contact_cont_tel .box{
		padding: 20px;
	}

	.contact_cont_tel .box dd{
		font-size:0.9rem;
	}
}



/*220315追加*/
/*お問い合わせ*/
#mv2{ text-align: center; padding: 80px 0; text-shadow: 0.25em 0.25em 0.5em rgba(255,255,255,1.0), -0.25em 0.25em 0.5em rgba(255,255,255,1.0), 0.25em -0.25em 0.5em rgba(255,255,255,1.0), -0.25em -0.25em 0.5em rgba(255,255,255,1.0);}
#mv2 h1{ margin-bottom: 40px;}
#mv2 p span.red{ color: #ff0000;}
@media screen and (max-width:767px){
#mv2{ padding:10% 0;}
#mv2 h1{ margin-bottom:5%; font-size: 6vw;}
#mv2 p{ font-size: 3vw;}
}

/*form_parts*/
#contact_form form#mailformpro button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}
#contact_form form#mailformpro ::placeholder{ color: #aaa;}
#contact_form form#mailformpro ::-ms-input-placeholder{ color: #aaa;}
#contact_form form#mailformpro input, #contact_form form#mailformpro textarea, #contact_form form#mailformpro select{ width:100%; max-width: 100%; padding:0.5em; font-family: 'Noto Sans JP', sans-serif; background: #fff !important; color: #333; font-size:18px; line-height: 1.25em; border: none; border-radius: 0; box-sizing: border-box; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); margin: 0; box-sizing: border-box;}
#contact_form form#mailformpro textarea{ text-align: left; width: 100% !important; height: 10em !important; font-weight: normal;}
#contact_form form#mailformpro label{ cursor: pointer; border: none; background: none; box-shadow: none; margin 0 1.5em 0 0;}
#contact_form form#mailformpro input.half{ width: calc(50% - 20px); margin: 0 20px 0 0;}
#contact_form form#mailformpro input[type="checkbox"],
#contact_form form#mailformpro input[type="radio"]{ width: auto; padding: 0; box-shadow: none; margin-right: 0.5em;}
@media screen and (max-width:767px){
#contact_form form#mailformpro input, #contact_form form#mailformpro textarea, #contact_form form#mailformpro select{ font-size:4.2vw;}
#contact_form form#mailformpro input.half{ width: calc(50% - 2.5vw); margin-right: 2.5vw;}
}

#contact_form form#mailformpro .center{ text-align: center;}
#contact_form form#mailformpro table{ margin: 20px auto; width: 100%; border-collapse: collapse; border-spacing: 0;}
#contact_form form#mailformpro table th{ width: 320px;}
#contact_form form#mailformpro table th span{ color: #ff0000; float: right;}
#contact_form form#mailformpro table td{ padding: 20px; letter-spacing: -1em;}
#contact_form form#mailformpro table td *{ letter-spacing: 0;}
#contact_form form#mailformpro table td .check_list{ display: flex; flex-wrap: wrap;}
#contact_form form#mailformpro table td .check_list label{ width: calc(33.33% - 1.5em);}
#contact_form form#mailformpro table td.checkbox label{ display: flex; align-items: center;}
#contact_form form#mailformpro table td.checkbox label p{ font-size: 16px; margin-left: 0.5em;}
#contact_form form#mailformpro #submit_btn{ text-align: center;}
#contact_form form#mailformpro #submit_btn button{ background: #84C638; color: #fff; padding: 1em; font-size: 20px; line-height: 1em; letter-spacing: 0.1em; border-radius: 2em; width: 320px; position: relative; transition: 0.3s;}
#contact_form form#mailformpro #submit_btn button:after{ content: "→"; position: absolute; right: 30px; top: 50%; transform: translateY(-52.5%); transition: 0.3s;}
#contact_form form#mailformpro #submit_btn button:hover{ opacity: 0.7}
#contact_form form#mailformpro #submit_btn button:hover:after{ right: 20px;}
@media screen and (max-width:767px){
#contact_form form#mailformpro p{ font-size:3vw;}
#contact_form form#mailformpro table{ margin:5% auto; font-size:3.5vw;}
#contact_form form#mailformpro table th{ display:block; width:100%;}
#contact_form form#mailformpro table td{ display:block; width:100%; padding:2.5% 0 7.5%;}
#contact_form form#mailformpro table td .check_list.check_list2 label{ width: calc(50% - 1.5em);}
#contact_form form#mailformpro table td.checkbox label{ display: flex; align-items: center;}
#contact_form form#mailformpro table td.checkbox label p{ font-size: 3.5vw;}
#contact_form form#mailformpro #submit_btn button{ font-size:4.2vw; width:80%;}
#contact_form form#mailformpro #submit_btn button:after{ transform: translateY(-60%); right:5vw;}
#contact_form form#mailformpro #submit_btn button:hover:after{ right:5vw;}
}



#submit_btn .mfp_element_submit{ text-shadow: none;}