@charset "utf-8";
/**
 * お問い合わせセクション共通スタイル（form.css）
 *
 * 概要: 全サービスページで共有するフォーム（form-sec）のスタイル
 * 仕様: 3ページでほぼ完全に同一のコード
 * 制限: ページ固有の微調整（例: manufacturing の padding-top）は pages/*.css で行う
 */


/* === セクション基本 ===
-----------------------------------------------------------*/
.form-sec {
	margin-top: 0;
	background-color: radial-gradient(ellipse at bottom, var(--yellow-color-second) 0%, #fff 100%);
	padding-bottom: 120px;
}
.form-wrap { margin-top: 40px; }


/* === フォーム紹介エリア ===
-----------------------------------------------------------*/
.form-intro { margin-bottom: 40px; align-items: center; }
.form-intro-image { width: 32%; margin-right: 4%; }
.form-intro-image img { width: 100%; height: auto; }
.form-intro-text-wrap { width: 64%; }
.form-intro-text1 { font-weight: 900; margin-bottom: 16px; }

.promise-list {
	padding: 12px 24px; border-radius: 4px;
	background-color: rgba(var(--yellow-color-primary-rgb), .15);
}
.promise-list li {
	align-items: center; margin-bottom: 4px;
	padding-bottom: 2px; font-weight: 900;
}
.promise-list li:last-child { margin-bottom: 0px; }
.promise-list li span { margin-left: 8px; }


/* === 連絡先カード ===
-----------------------------------------------------------*/
.contact-area {
	padding: 24px; background-color: #fff; border-radius: 24px;
	transition: transform var(--base-duration) var(--base-easing),
	            box-shadow var(--base-duration) var(--base-easing);
	box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
	border: 2px solid var(--gray-color-primary);
	color: var(--text-color); display: block; width: 48%;
}
.contact-area-tel { margin-right: 2%; }
.contact-area-line {
	margin-left: 2%; border-color: #06c755;
	background-color: rgb(6 199 85 / 8%);
	box-shadow: rgb(6 199 85 / 20%) 0px 8px 24px;
}
.contact-area:active {
	box-shadow: rgb(149 157 165 / 60%) 4px 16px 32px;
	transform: translateY(-8px);
}
.contact-area-line:active {
	box-shadow: rgb(6 199 85 / 60%) 4px 16px 32px;
	transform: translateY(-8px);
}
.contact-area h3 { text-align: center; margin-bottom: 16px; line-height: 1.4; }
.contact-inner { align-items: center; justify-content: center; }
.contact-inner br { display: none; }
.contact-area img { width: 40px; height: auto; }

.tel-number { font-size: 170%; line-height: 1; margin-left: 8px; }
.line-account { font-size: 140%; line-height: 1.2; margin-left: 8px; font-weight: 900; }
.contact-text { font-size: 80%; margin-top: 8px; }


/* === フォーム本体 ===
-----------------------------------------------------------*/
.contact-form { margin-top: 64px; }
.service-table { width: 100%; }
.service-table th, .service-table td { text-align: left; display: block; width: 100%; }
.service-table th { padding: 24px 0px 0px; }
.service-table td { vertical-align: middle; padding: 4px 0px 0px; }

.contact-chip {
	padding: 4px 8px; margin-left: 4px; font-size: 80%;
	border-radius: 4px; color: #fff; line-height: 1;
}
.required { background-color: var(--red-color-primary); }
.any { background: #aaa; }


/* === フォーム入力要素 ===
-----------------------------------------------------------*/
form input[type=url],
form input[type=tel],
form input[type=date],
form input[type=email],
form input[type=password],
form input[type=text],
form select,
form textarea {
	accent-color: var(--yellow-color-primary);
	border: 1px solid #ccc; background-color: #fff;
	box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%); box-sizing: border-box;
	border-radius: 8px; padding: 12px; font-size: 100%;
	width: 100%; -webkit-appearance: none; appearance: none;
}
form select {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20icon-tabler%20icon-tabler-chevron-down%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%223%22%20stroke%3D%22%23d9a941%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%20%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%20%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: right .7em top 50%;
	background-size: 1em auto;
}


/* === 送信ボタン ===
-----------------------------------------------------------*/
.submitbtn { text-align: center; }
input[type=submit] {
	color: var(--text-color); cursor: pointer; font-weight: 900; font-size: 120%;
	text-align: center; display: inline-block; line-height: 1;
	padding: 24px; background-size: 300% 100%;
	margin-top: 24px; box-shadow: rgb(149 157 165 / 80%) 0px 8px 24px; border: none;
	transition: background-position var(--base-duration) var(--base-easing),
	            box-shadow var(--base-duration) var(--base-easing);
	background-image: var(--warm-gradients2); width: 80%; border-radius: 40px;
	text-shadow: 1px 1px 1px rgb(255 255 255 / 40%); letter-spacing: 1px;
}
input[type=submit]:active {
	background-position: 100% 0;
	box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
}


/* === Contact Form 7 ===
-----------------------------------------------------------*/
.wpcf7-not-valid-tip { color: var(--red-color-primary); font-size: 100%; font-weight: 900; }

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border: none; background-color: var(--red-color-primary); color: #fff;
	font-size: 120%; text-align: center; font-weight: 900;
	padding: 16px; margin: 16px 0px 0px; border-radius: 40px;
}
.wpcf7 form.sent .wpcf7-response-output {
	border: none; background-color: var(--red-color-primary); color: #fff;
	font-size: 120%; text-align: center; font-weight: 900;
	padding: 16px; margin: 16px 0px 0px; border-radius: 40px;
}

::-webkit-input-placeholder { color: rgba(var(--text-color-rgb), 0.8); letter-spacing: 1px; }
:-ms-input-placeholder { color: rgba(var(--text-color-rgb), 0.8); letter-spacing: 1px; }
::placeholder { color: rgba(var(--text-color-rgb), 0.8); letter-spacing: 1px; }

.screen-reader-response { display: none; }


/* === ホバー ===
-----------------------------------------------------------*/
@media (hover: hover) and (pointer: fine) {
	input[type=submit]:hover {
		background-position: 100% 0;
		box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
	}
	.contact-area:hover {
		box-shadow: rgb(149 157 165 / 60%) 4px 16px 32px;
		transform: translateY(-8px);
	}
	.contact-area-line:hover {
		box-shadow: rgb(6 199 85 / 60%) 4px 16px 32px;
		transform: translateY(-8px);
	}
}


/* === レスポンシブ ===
-----------------------------------------------------------*/
@media (max-width: 960px) {
	.contact-area { width: 100%; }
	.contact-area-tel { margin-right: 0%; margin: 0 0% 40px; }
	.contact-area-line { margin-left: 0%; margin: 0; }
}

@media (max-width: 767px) {
	.form-intro-image { width: 100%; margin: 0 0 12px; }
	.form-intro-image img { width: 100%; height: auto; }
	.form-intro-text-wrap { width: 100%; }
}

@media screen and (max-width: 599px) {
	.form-sec .form-wrap { margin: 0; }
	.form-intro-text1 { font-size: 100%; }
	.promise-list { padding: 8px 12px; }
	.contact-nav-list li { display: block; font-size: 90%; }
	.contact-nav-list li:first-child { margin-bottom: 8px; }
	.contact-intortext br { display: none; }
	input[type=submit] { width: 100%; font-size: 110%; }
	.wpcf7 form.invalid .wpcf7-response-output,
	.wpcf7 form.unaccepted .wpcf7-response-output,
	.wpcf7 form.sent .wpcf7-response-output {
		font-size: 100%; padding: 16px 32px;
		border-radius: 80px; margin-top: 0px;
	}
	.contact-area img { display: block; width: 56px; margin: auto; }
	.tel-number, .line-account {
		margin-top: 8px; margin-left: 0px;
		display: block; text-align: center;
	}
	.tel-number { font-size: 160%; }
	.line-account { font-size: 140%; }
}