@charset "utf-8";

#contact .headrow {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 48px;
				margin-bottom: 60px;
}
#contact .headrow .link {
				margin-bottom: 0;
				padding-top: 0;
}

#contact .headrow .logo{
	margin-bottom: 0;
	padding-top: 0;
}
#contact .headrow .logo img {
				width: auto;
				height: 36px;
}

#contact ul.check_list {
	background: #eee;
	color: #222;
	padding: 24px;
	margin-top: 30px;
	margin-bottom: 30px;
	border-radius: 9px;
}
#contact ul.check_list li{
}
#contact ul.check_list  li:before {
}

#contact ul.flex-form li label{
display: flex;
line-height: 1;
align-items: center;
}

#contact .row .box.exp input[type=checkbox]{
	padding-left: 22px;
	font-size: 1.4rem;
	line-height: 1.4;
	position: relative;
	
	cursor: pointer;
	width: 16px;
	height: 16px;
	margin-top: 0rem;
	border-radius: 0;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	transition: .3s;
	margin-bottom: 0.2rem;
	box-sizing: border-box;
	
	/* チェックマーク */
	&::before {
	position: absolute;
	content: '';
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	background-color: #fff;
	border: solid 1px #808080;
	background-repeat: no-repeat ;
	background-size: cover;
	}
}
	
	
	#contact .row .box.exp input[type=checkbox]:checked{
		
		
		background: none;
		border: none;

	/* チェックマーク */
	&::before {
		padding: 0;
		content: '';
		background: var(--blue);
		border: solid 1px var(--blue);
		background-image: url(../../src/images/icon/check.svg);
		background-repeat: no-repeat ;
		background-size: cover;
	}
	}


.btn_box{
	padding: 32px 0;
	font-size: 1.6rem;
	line-height: 1.6;
	margin-bottom: 32px;
}
.btn a.Btn_inBox{
	box-shadow: none;
	box-sizing: border-box;
	display: inline-flex;
	padding: 0.5em 4em;
	padding: 0.8em 4em;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #17AFEC;
	color: #17AFEC;
	font-size: 1.3rem;
	text-decoration: none;
	border-radius: 20px;
	position: relative;
	line-height: 101%;
}


.btn a.Btn_inBox:after{
	position: absolute;
	content: '';
	width: 24px;
	height: 24px;
	top: 0.85em;
	right: 0;
	background-image: url(../images/btn_arrow_blue.svg);
	background-repeat: no-repeat;
}

.btn a.Btn_inBox.ext:after{
	background-image: url(../images/btn_arrow_ext.svg);
	top: 0.4em;
	right: 0.2em;
}
	

.btn a.Btn_inBox:hover{
	background: #17AFEC;
border-color: #fff;
color: 	#fff;
}
.btn a.Btn_inBox:hover:after{
	background-image: url(../images/btn_arrow_white.svg);
}


.btn a.Btn_inBox.ext:hover:after{
	background-image: url(../images/btn_arrow_ext_white.svg);
}



@media (max-width: 768px){
		#contact .headrow {
		display: block;
		padding-top: 0;
	}
#contact .headrow .link {
	margin-top: 10px;
	text-align: center;
}


}











#contact .row {justify-content: center;}
#contact .row .box.exp {max-width: 760px;}
#contact h2,
#contact p {text-align: center;}
#contact p {font-size: calc(16vw / 12.8);}

#contact .row .box.exp li{
	margin-right: 1em;
}
#contact .row .box.exp select#department,
#contact .row .box.exp select#post{
	width: 94%;
	/* background: #efefef; */
}
#contact .row .box.exp .row.dept{
	margin-bottom: 0;
	align-items: flex-end;
}

#contact .row .box.exp .flex-form{
	display: flex;
	flex-wrap: wrap;
}

#contact .row .box.exp h3 span.free {
	border: 1px solid #808080;
	background: #808080;
	color: #fff;
}

@media (min-width: 1280px){
	#contact h2 {font-size: 4.0rem;}
	#contact p {font-size: 1.6rem;}
}
@media (max-width: 768px){
	#contact .row .box.exp {max-width: none;}
	#contact h2 {font-size: calc(36vw / 4.8);}
	#contact p {font-size: calc(14vw / 4.8);}
}