@charset "utf-8";

:root {
	--blue: #0099D9;
	--orange: #F08300;	
	--glay: #595757;	
	--green: #00A73C;	
	--pink: #EB6EA5;
	--red: #D24434
}
#contact{
	/* padding: 120px 0; */
	/* background: #5B5E66; */
}
.page {background-image: none;}
.page .inner,
.page #contact .inner{
	background: none;
	max-width: calc(1032vw / 12.8 * 960 / 1032);
	max-width: calc(1032vw / 12.8);
	margin-left: auto;
	margin-right: auto;
}
.page .inner .contents {padding: 0;}

.pc-footer .ft_menu ul.flex li{display: none;}
#contact .row{
	justify-content: space-between;
	display: flex;
	align-items: stretch;
}
#contact .row .box.btns{
	width: 100%;
	max-width: 480px;
	max-width: calc(460vw / 12.8);
	/* color: #fff; */
}
#contact .row .box.exp{
	width: 100%;
	max-width: 560px;
	max-width: calc(540vw / 12.8);
}
#contact .row .box .bg_gray {
	background-color: #eee;
	padding: 16px;
	line-height: 1.2;
	border-radius: 4px;
}
#contact .row .box .bg_gray p{margin-bottom: 0;}

#contact h2{
	font-weight: 800;
	font-size: 4.6rem;
	font-size: calc(40vw / 12.8);
	line-height: 1.0;
	letter-spacing: 0.03em;
	/* color: #fff; */
	margin-bottom: 40px;
	text-align: left;
}
#contact h3{
	font-size: 1.8rem;
	color: #222;
	/* color: #fff; */
	margin-bottom: 1rem;
	text-align: left;
}
#contact p{
	font-size: 1.4rem;
	line-height: 1.6;
	margin-bottom: 20px;
	/* color: #fff; */
	text-align: left;
}
#contact .logo{
	padding-top: 48px;
	margin-bottom: 52px;
}
body#contact .logo{
	padding: 0;
	margin: 0;
}
#contact .logo img{
	width: 330px;
	height: auto;
}
#contact .btns .row{
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
#contact .btns .row.tel{
	margin-bottom: 30px;
}
#contact .tel span{
	font-weight: 400;
	font-size: 28px;
	line-height: 100%;
	letter-spacing: 0.05em;
	display: block;
}
#contact .tel span a{
	text-decoration: none;
	color: #222;
}
#contact .btns ul{
	background: #eee;
	color: #222;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 30px;
	margin-bottom: 30px;
	border-radius: 9px;
}
#contact .btns ul li{
	/* display: flex;
	align-items: flex-start;
	gap: 8px; */
	padding-left: 22px;
	font-size: 1.4rem;
	line-height: 1.4;
	position: relative;
}
#contact .btns ul li:before {
	position: absolute;
	content: '';
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	background: var(--orange);
	background: var(--red);
	background: var(--green);
	background: var(--blue);
	background-image: url(../../src/images/icon/check.svg);
	background-repeat: no-repeat ;
	background-size: cover;
}
#contact .btns .fig{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
#contact .btns .fig img{
	/* width: 100%;
	width: 80%;
	margin-bottom: 30px; */
	width: 100%;
	padding: 0 8vw;
	box-sizing: border-box;
}

#contact .row .box.exp input:not([type="checkbox"]),
#contact .row .box.exp textarea,
#contact .row .box.exp select {
	width: 97%;
	padding: .6rem;
	margin: 0;
	border: none;
	font-size: 14px;
	font-size: 1.4rem;
	border: 1px solid #C4C7C5;
	border-radius: 3px;
}
#contact .row .box.exp input:not([type="checkbox"]){width: 95%;}
#contact .row .box.exp .half input:not([type="checkbox"]){width: 90%;}
#contact .row .box.exp textarea{width: 95%;}
.plivacyArea iframe {
	width: 	98%;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin: 0 0 10px;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}
#contact .row .box.exp .inner{
	padding: 48px;
	margin: 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
}
#contact .row .box.exp .row{
	margin-bottom: 26px;
	/* gap: 26px; */
}
#contact .row .box.exp .row div{width: 100%;}
#contact .row .box.exp,
#contact .row .box.exp h3 {color: #2E3130;}
#contact .row .box.exp h3 {
	font-size: 14px;
	line-height: 100%;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
}
#contact .row .box.exp h3 span{
	padding: 4px 8px;
	margin-left: 0.6rem;
	border: 1px solid #B62226;
	border-radius: 20px;
	font-size: 10px;
	line-height: 100%;
	color: #B62226;
}
#contact .row .box.exp input[type=checkbox] {
	position: relative;
	cursor: pointer;
	width: 16px;
	height: 16px;
	margin-top: 	0rem;
	border-radius: 2px;
	background-color: #fff;
	border: 1px solid #8E918F;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	transition: .3s;
	margin-bottom: 0.2rem;
	box-sizing: border-box;
}
#contact .row .box.exp ul{margin-top: 8px;}
#contact .row .box.exp li{margin-bottom: 8px;}
#contact .row .box.exp input[type=checkbox]:checked {
	background: #27c374;
	border: 1px solid #27c374;
}
#contact .row .box.exp input[type=checkbox]:checked::before {
	position: absolute;
	padding: 2px;
	color: white;
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	font-size: 10px;
	content: '\f00c';
}

#contact .row .box.exp .nodis{display: none;}
#plan .row .crm .btn,
#contact .row .box.exp .btn {display: flex;margin: 0 auto;}
#plan .row .crm .btn a.Btn_inBox,
#contact .row .box.exp .btn a.Btn_inBox{
	box-shadow:none;
	box-sizing: border-box;
	display: inline-flex;
	padding: 9px 80px;
	margin: 0 auto;
	background: #0379D5;
	border: 1px solid #0379D5;
	color: #fff;
	font-size: 1.8rem;
	text-decoration: none;
	border-radius: 40px;	
	justify-content: center;
}
#plan .row .crm .btn a.Btn_inBox:hover,
#contact .row .box.exp .btn a.Btn_inBox:hover{
	background: #fff;
	border-color: #0379D5;
	color: 	#0379D5;
}
#contact .row .box.exp .btn a.Btn_inBox.disable{
	background: #d2d2d2;
	border: 1px solid #D2D2D2;
	pointer-events: none;
}
#contact .row .box.exp .btn a.Btn_inBox.disable:hover{
	color: #fff;
}
.g-recaptcha,
#warning{
	display: grid;
	justify-content: center;
	font-size: 1.4rem;
	color: #B62226;
}
.errorValName{
	color: #B62226;
	margin-top: 4px;
}

@media (min-width: 1585px){
	.page .inner,
	.page #contact .inner{max-width: 1280px;}
	#contact .row .box.btns {max-width: 569px;}
	#contact .row .box.exp {max-width: 668px;}
	#contact h2{font-size: 4.4rem;}
}
@media (max-width: 768px) {
	.page .inner {
					max-width: none;
	}
	.contents-header {
					height: 0;
	}
	#contact .logo img {
					width: 90vw;
					width: auto;
					max-width: 90vw;
					height: 26px;
	}
	.page .inner,
	.page #contact .inner{max-width: calc(90vw);}
	
	#contact h2 {font-size: calc(44vw / 7.68);margin-bottom: 30px;}
	/*
	#contact .row {flex-direction: column;}
	.contents-header {height: 0;}
	#contact .row .box.btns,
	#contact .row .box.exp {max-width: none;}
	#contact .row .box.exp .inner {padding: 20px;}
	#contact .row .box.exp .row div {margin-bottom: 0.5rem;}
	*/	
	#contact .form-attention .bg_gray {
		background-color: #eee;
		padding: 10px;
		line-height: 1.2;
		border-radius: 4px;
		margin-bottom: 30px;
	}

	#contact {padding : 0;}
	#contact .logo{margin-bottom: 30px;padding-top: 0;
		display: grid;
		justify-content: center;
	}
	.page .inner {margin-bottom: 0;max-width: none;}
	#contact .row{flex-direction: column;}
	#contact .row .box.exp .row{gap: 26px;}
	#contact .row.name{flex-direction: row ;}
	#contact .row .box.exp .row.name {gap: 10px;}
	
	#contact .row .box.exp .name .half input:not([type="checkbox"]) {
					width: 90%;
	}
	#contact .row .box.btns{order: 2;}
	#contact .row .box.exp{order: 1;}
	
	#contact .row .box.btns,
	#contact .row .box.exp{	max-width: none;}
	#contact .row .box.exp .inner{padding: 20px;}
	#contact .row .box.exp p{font-size: 1.4rem;}
	#contact h2,#contact h3{text-align: center;}
	/* .page #contact .inner{padding: 0 6vw;} */
	#contact .row .box.exp input:not([type="checkbox"]),
	#contact .row .box.exp textarea,
	#contact .row .box.exp select,
	#contact .row .box.exp label {
		font-size: 16px;
		font-size: 1.6rem;
	}
	#contact .row .box.exp .row div{margin-bottom: 0.5rem;}
	#contact .row .box.exp ul {
		margin-top: 12px;
	}
	#contact .row .box.exp label {line-height: 1.6}
	#contact .row .box.exp input[type=checkbox] {
		width: 24px;
		height: 24px;
	}
	#contact .row .box.exp input[type=checkbox]:checked::before{font-size: 18px;}
	#contact .row .box.exp textarea{width: 95%;}
	#contact .row .box.exp input:not([type="checkbox"]){width: 95%;}
	#contact .row .box.exp .half input:not([type="checkbox"]) {width: 95%;}
	#contact .plivacyArea iframe {width: 98%;}
}