@charset "utf-8";

/* 電話とLINE
* ************************************** */

#contact .contact-formtop {
	width: 880px;
	margin: 30px auto 0;
}
#contact .contact-formtop ul.contact-formtop-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
#contact .contact-formtop ul.contact-formtop-list.btn1 {
	justify-content: center;
}
#contact .contact-formtop ul.contact-formtop-list li {
	list-style: none;
	width: calc(100% / 2 - 30px);
	text-align: center;
}
#contact .contact-formtop ul.contact-formtop-list li span.concentration {
	font-weight: bold;
	position: relative;
}
#contact .contact-formtop ul.contact-formtop-list li span.concentration:before,
#contact .contact-formtop ul.contact-formtop-list li span.concentration:after {
	position: relative;
	display: inline-block;
	content: "";
	background: #000;
	width: 2px;
	height: 1.2em;
	margin: 0 1em;
	margin-top: -.2em;
	vertical-align: middle;
	border-radius: 4p
}
#contact .contact-formtop ul.contact-formtop-list li span.concentration:before {
	transform: rotate(-35deg);
}
#contact .contact-formtop ul.contact-formtop-list li span.concentration:after {
	transform: rotate(35deg);
}
#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn {
	display: block;
	padding: 22px 18px 15px;
	border-radius: 4px;
	font-weight: bold;
	margin-top: 6px;
}
#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.phone {
	background: #e7451a;
	color: #FFF;
}
#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.line {
	background: #13ab56;
	color: #FFF;
}
#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn span {
	display: inline-block;
	font-size: 2em;
	margin: 0 0 12px;
	padding-left: 52px;
	position: relative;
}
#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.phone span {
	font-family: 'mplus-1p-heavy', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.phone span:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/template/icon-dial.webp) no-repeat;
	background-size: 100%;
	width: 40px;
	height: 40px;
}
#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.line span:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/template/icon-line.webp) no-repeat;
	background-size: 100%;
	width: 40px;
	height: 40px;
}
#contact .contact-summary,
#thanks .contact-summary {
	margin: 30px 30px;
}

@media screen and (max-width: 834px) {
	#contact .contact-formtop {
		width: 100%;
	}
	#contact .contact-formtop ul.contact-formtop-list.btn1 li {
		width: 100%;
		max-width: 420px;
	}

	#contact .contact-summary p,
	#thanks .contact-summary p {
		font-size: 1em;
	}
}
@media screen and (max-width: 560px) {
	#contact .contact-summary,
	#thanks .contact-summary {
		margin: 30px 18px;
	}
	#contact .contact-formtop {
		width: 90%;
	}
	#contact .contact-formtop ul.contact-formtop-list.btn2 {
		flex-direction: column;
		margin-top: -12px;
	}
	#contact .contact-formtop ul.contact-formtop-list.btn2 li {
		width: 100%;
		margin: 12px auto;
	}
	#contact .contact-formtop ul.contact-formtop-list li span.concentration {
		font-size: .9em;
	}
	#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn span {
		margin: 0 0 3px;  
	}

	#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn span {
		font-size: 1.7em;
		padding-left: 48px;
	}
	#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.phone span:before,
	#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.line span:before {
		width: 36px;
		height: 36px;
	}
	
	#thanks .contact-summary {
		margin: 30px 6px;
	}
	#thanks .contact-summary p.right {
		text-align: right;
	}
	#thanks .contact-summary span {
		display: block;
	}
}
@media screen and (max-width: 430px) {
	#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn {
		padding: 15px 10px;
	}
}
@media screen and (max-width: 320px) {
	#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn span {
		font-size: 1.5em;
		padding-left: 42px;
	}
	#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.phone span:before,
	#contact .contact-formtop ul.contact-formtop-list li a.contact-formtop-btn.line span:before {
		width: 32px;
		height: 32px;
	}
	#contact .contact-formtop ul.contact-formtop-list li span.concentration {
		font-size: .8em;
	}
}


/* iOSリセット
* ************************************** */

input[type="submit"],
input[type="button"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
}
input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
}
/* リセット */


/* メイン
* ************************************** */

.form_wrapper .main {
	width: 1100px;
	height: auto;
	margin: 0 auto;
}
.form_wrapper .main .formALL {
	margin: 20px 0;
}


@media screen and (max-width: 1194px) {
	.form_wrapper .main {
		width: 100%;
	}
}

/* input textarea */
#contact input[type="text"],
#contact textarea,
#contact input[type="email"],
#contact input[type="tel"]{
	box-sizing: border-box;
	width: 100%;
	padding: 12px;
	outline: none;
	border: 1px solid #767676;
	border-radius: 4px;
}
#contact input#zip {
	width: 310px;
}
#contact textarea {
	box-sizing: border-box;
	height: 180px;
	outline: none;
	border: 1px solid #767676;
	border-radius: 4px;
}
#contact input[type="file"] {
	font-size: 1rem;
}
#contact .sendaiecoAttachment::file-selector-button {
	background: #ededed;
	color: #333;
	border: 0;
	border-radius: 30px;
	padding: 8px 16px;
	text-align: center;
}

@media screen and (max-width: 768px) {
	
}


/* テーブルとボタン
* ************************************** */

#contact table.form-table {
	width: 100%;
	table-layout: fixed;
}
#contact table.form-table,
#contact table.form-table tr,
#contact table.form-table th,
#contact table.form-table td {
	border-collapse: collapse;
	box-sizing: border-box;
}
#contact table.form-table th {
	width: 25%;
	padding: 18px;
	border: solid 1px #CCC;
	font-weight: bold;
	vertical-align: middle;
	background: #f6fef7;
	line-height: 1.2;
}
#contact table.form-table td {
	width: 75%;
	padding: 18px;
	border: solid 1px #CCC;
}
#contact table.form-table th span.hissu {
	display: block;
	margin-bottom: 3px;
	color: red;
	font-size: .8em;
}
#contact table.form-table td span.ex {
	display: block;
	margin: 18px 0 9px 0;
}
#contact table.form-table td span.smtx {
	display: block;
	font-size: .8em;
	line-height: 1.4;
}
#contact table.form-table td span.redd {
	display: block;
	line-height: 1.6;
	color: #D81D20;
}
#contact table.form-table td .files {
	margin-top: 18px;
}
#contact .maker-box {
	display: inline-block;
	position: relative;
	border: 1px solid #767676;
	border-radius: 3px;
}
#contact .maker-box:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #767676;
	transform: translateY(-50%);
}
#contact select.maker {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	appearance: none;
	padding: 12px 32px 12px 12px;
	font-size: 1em;
	color: #333;
}
#contact .acceptance-box {
	text-align: center;
	margin: 18px 0;
	font-size: 1.2em;
}
#contact .acceptance-box a.privacy_policy {
	text-decoration-line: underline;
	color: #0074E5;
}
#contact .acceptance-box span.wpcf7-list-item {
	display: block;
	margin: 18px auto 0;
	padding: 12px 18px;
	font-weight: bold;
	line-height: 1.2em;
	color: #5e5d5d;
	background: #fcebf2;
	border: solid 1px #bcb9b9;
}

#contact .button {
	width: 100%;
	text-align: center;
}
#contact input.sendBtn {
	width: 80%;
	max-width: 380px;
	color: #FFF;
	font-size: 2em;
	font-weight: bold;
	padding: 0.8em;
	background-color: #eb242c;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: all .3s ease;
}
#contact input.sendBtn:hover {
	background-color: #D1212A;
}
#contact .wpcf7-spinner {
	display: block;
	margin: 30px auto 0;
}

/* エラーメッセージ */
.wpcf7-not-valid-tip{
	font-weight: bold !important;
	font-size: .8em !important;
	margin-top: 3px !important;
}


@media screen and (max-width: 1194px) {
	#contact input.sendBtn {
		font-size: 1.2em;
	}
}
@media screen and (max-width: 768px) {
	#contact table.form-table th {
		display: flex;
		align-items: center;
		font-size: 1em;
		width: 100%;
		display: block;
		padding: 18px 22px 18px 22px;
		border-top: solid 1px #808080;
		border-bottom: 1px solid #808080;
		vertical-align: middle;
		font-weight: bold;
		background: #d3ffcc;
	}
	#contact table.form-table td {
		box-sizing: border-box;
		width: 100%;
		display: block;
		padding: 18px;
		line-height: 1.5em;
	}
	#contact table.form-table th span.hissu {
		display: inline-block;
	}
	#contact table.form-table td span.ex {
		font-size: .8em;
		line-height: 1.2;
		margin: 12px 0 3px 0;
	}
	#contact table.form-table td span.redd {
		font-size: .9em;
	}
	#contact .acceptance-box {
		font-size: 1em;
	}
}