@charset "UTF-8";
/* CSS Document */
.contact{
	margin-top: -75px;
    padding: 135px 0 60px;
	background-color: #F8F8F8;
}

.contact_inner{
	width: 1010px;
	margin: 0 auto;
}

.contact_content{
    padding: 60px 120px;
	background-color: #fff;
}

.contact_item{
    display: flex;
    align-items: center;
	margin-bottom: 30px;
}

.contact_item:last-of-type{
	align-items: flex-start;
	margin-bottom: 0;
}

.contact_heading{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	margin-right: 14px;
	font-size: 16px;
	line-height: 1;
}

.contact_item:last-of-type .contact_heading{
	margin-top: 10px;
}

.contact_heading_required{
	display: inline-block;
	padding: 5px 6px 4px;
	border-radius: 6px;
	color: #fff;
	font-size: 2.66vw;
  font-family: heisei-maru-gothic-std,sans-serif;
  font-weight: 400;
	background-color: #FCAD00;
}

.contact_data{
	width: 540px;
}

.contact_data_input,
.contact_form_textarea{
	width: 100%;
	height: 10.93vw;
	padding: 0 20px;
  font-size:3.2vw;
	border: none;
	background-color: #F5F5F5;
	font-weight: 700;
}

.contact_form_textarea{
	height: 61.2vw;
	padding: 14px 20px;
	line-height: 1.6em;
}
					
.contact_data_input::placeholder,
.contact_form_textarea::placeholder{
	color: #C1C1C1;
}			

.contact_data_input:focus,
.contact_form_textarea:focus{
	outline-color: #26A7E1;
}

.contact_agree{
	display: flex;
	margin-left: auto;
}

.contact_agree_text{
	margin-left: 8px;
}

.contact_agree_link{
	text-decoration: underline;
  color:#26A7E1;
}

.contact_agree_link:hover{
	text-decoration: underline;
}

.contact_agree_label{
	cursor: pointer;
	cursor: hand;
}

.contact_agree_toggle_button{
	display: none;
}

.contact_submit{
	text-align: center;
}

.contact_submit_input{
	display: inline-block;
	width:77.3vw;
	height: 14.14vw;
	border: none;
	border-radius: 32px;
	background-color: #26A7E1;
	color: #fff;
	font-weight: 700;
	transition: opacity 0.3s;
}

#26A7E1:hover{
	opacity: 0.7;
}

@media (max-width: 639px) {
	.contact{
	    padding: 162px 0 110px;
	    background-color: transparent;
	}
	
	.contact_inner{
		width: var( --inner-width );
	}
	
	.contact_content{
	    padding: 0;
	    background-color: #fff;
	}
	
	.contact_item{
	    align-items: flex-start;
	    flex-direction: column;
	    margin-bottom: 4.266vw;
	}
	
	.contact_item:last-of-type{
		align-items: flex-start;
		margin-bottom: 0;
	}
	
	.contact_heading{
		justify-content: flex-start;
		margin-right: 0;
		margin-bottom:  3.94vw;
		font-size: 3.2vw;
	}
	
	.contact_item:last-of-type .contact_heading{
		margin-top: 10px;
	}
	
	.contact_heading_required{
		margin-left: 8px;
	}
	
	.contact_data{
		width: 100%;
	}
	
	.contact_form_textarea{
		padding: 20px;
	}

	.contact_agree{
		display: flex;
		flex-direction: column-reverse;
	}
	
	.contact_agree_text{
		margin-bottom: 16px;
		margin-left: 0;
		font-size: 3.2vw;
	}
	
	.contact_agree_input{
		display: none;
	}
	
	.contact_agree_toggle_button{
		display: inline-block;
		position: relative;
		width: 15vw;
		height: 7.38vw;
		border-radius: 15px;
		background: #C1C1C1;
		cursor: pointer;
		transition: .2s ease;
	}
	
	.contact_agree_input:checked + .contact_agree_toggle_button{
		background: #fff;
    border:1px solid #26A7E1;
	}
	
	.contact_agree_toggle_button:before{
		content: '';
		position: absolute;
		top: 0.3vw;
		left: 0.5vw;
		border-radius: 50%;
		width: 6.6vw;
		height: 6.6vw;
		background: #fff;
		box-shadow: 2px 2px 3px rgb(0 0 0 / 16%);
		transition: .2s ease; /* 円が動くスピードを指定 */
	}
	
	.contact_agree_input:checked + .contact_agree_toggle_button:before{
		left: 7.46vw;
    top:0.1vw;
    background:#26A7E1;
	}
	
	.contact_submit{
		text-align: center;
	}
	
	.contact_submit_input{
		display: inline-block;
		width:77.3vw;
    height: 14.14vw;
		border-radius: 6px;
    font-size:3.2vw;
	}
}