@charset "UTF-8";

@media(max-width: 767px){
	.sec-top:before{
		background-image: url(../assets/contact_first-view.jpg);
	}
}
@media(min-width: 768px){
	.sec-top{
		background-image: url(../assets/contact_first-view.jpg);
	}
}


/*問合せフォーム*/
.sec-contact-detail{
	padding: 70px 6.58823529411765% 60px;
}
/*必須項目*/
.required{
	color: #ff0000;
	font-size: 1.4rem;
}
.sec-contact-detail h2{
	margin-bottom: 40px;
}
.contact-detail-dsc{
	text-align: left;
	padding-bottom: 40px;
	border-bottom: solid 1px #e3e3e3;
	margin: 0 auto 40px;
}
@media(min-width: 960px){
	.sec-contact-detail{
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		padding: 120px 6.9444444% 80px;
	}
	.sec-contact-detail_container{
		width: 100%;
		max-width: 960px;
		max-width: 1000px;
		margin: 0 auto;
	}
	.sec-contact-detail h2{
		margin-bottom: 60px;
	}
	.contact-detail-dsc{
		padding-bottom: 80px;
		margin: 0 auto 60px;
	}
}

/*質問項目*/
form{
	text-align: left;
}
.contact-item{
	margin-bottom: 60px;
}
.contact-item:last-child{
	margin-bottom: 80px;
}

.contact-item > label{
	display: block;
	width: 100%;
	padding-bottom: 20px;
	box-sizing: border-box;
}
/*赤い注意マーク*/
.contact-item > label span{
	color: #ff0000;
	font-size: 1.4rem;
}
::placeholder{
	font-size: 1.6rem;
}

/*単一質問（記述式）の設定*/
.contact-item-single p{
	width: 100%;
	height: 100%;
}
.contact-item-single input, textarea{
	width: 100%;
	height: 100%;
	background-color: #fafafa;
	border: 1px solid #e3e3e3;
	padding: 0 28px;
	box-sizing: border-box;
}
.contact-item-single input{
	height: 60px;
}
.contact-item-single textarea{
	height: 300px;
	padding-top: 28px;
	resize: none;
}
:focus{
    outline: none;
}

/*ラジオボタンの設定*/
.contact-item-multiple input{
 	height: 40px;
 	margin: 0 10px 0 0;	
}
.contact-item-multiple p{
	display: flex;
	flex-wrap: wrap;
}
.contact-item-multiple p label{
	padding-right: 40px;
}
button{
	width: 100%;
	font-size: 1.6rem;
}
@media(max-width: 425px){
	::placeholder{
		font-size: 3.764706vw;
	}
}

@media(min-width: 960px){
	.contact-item{
		display: flex;
		justify-content: space-between;
	}
	.contact-item > label{
		font-size: 1.8rem;
		padding-bottom: 0;
		width: 31%;
		min-width: 180px;/*潰れないように指定*/
		padding-right: 40px;
		display: flex;
		align-items: center;
		height: 70px;
	}
	.contact-item p{
		width: 68.96%;
		height: 100%;
	}
	input, textarea{
		padding-left: 30px;
	}
	input{
		height: 70px;
	}
	.contact-item-multiple input{
	 	height: 70px;
	}
}


.footer{
	background-color: #fff;
}

/*ラジオボタンの装飾*/
.contact-item-multiple input[type='radio']{
	cursor: pointer;
}
.contact-item-multiple input[type='radio']:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: 12px;
    left: -1px;
    position: relative;
    background-color: #fff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #ddd;
}
.contact-item-multiple input[type='radio']:checked:after{
	transition: all .1s;
}
.contact-item-multiple input[type='radio']:checked:after {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    top: 9px;
    left: -3px;
    position: relative;
    background-color: #fff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 5px solid #0088cc;
}
@media(min-width: 960px){
	.contact-item-multiple input[type='radio']:after {
	    top: 27px;
	}

	.contact-item-multiple input[type='radio']:checked:after {
	    top: 25px;
	    left: -2px;
	}
}