@charset "UTF-8";
/* ============================================================
   contact.css — お問い合わせページ専用（page-contact.php でのみenqueue）
   CONTACT Hero(title) + リード + CF7フォーム（ラベル左／入力右）
   配色・フォントはサイト共通トークン（style.css :root）を使用
   ============================================================ */

.contact {
	max-width: 100rem;
	margin: 0 auto;
	padding: 6rem var(--s-page-x) var(--s-section-y);
}

/* ===== リード文 ===== */
.contact__lead {
	text-align: center;
	color: var(--c-ink-mute);
	font-size: 1.5rem;
	line-height: 2;
	margin-bottom: 6rem;
}
/* v3.125: リード文中リンク（FAQページ等）に下線。下のプライバシーポリシー（.cform__consent a）と同じ意匠 */
.contact__lead a {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.contact__lead a:hover {
	color: var(--c-accent);
}
.contact__note {
	margin-top: 2rem;
	font-size: 1.4rem;
}
.contact__req,
.cform__req {
	color: var(--c-accent);
}
.cform__req {
	margin-left: 0.4em;
	font-size: 1.3rem;
}

/* ===== フォーム本体（行） ===== */
.cform {
	max-width: 76rem;
	margin: 0 auto;
}
.cform__row {
	display: grid;
	grid-template-columns: 22rem 1fr;
	gap: 2rem 3rem;
	align-items: center;
	padding: 2.4rem 0;
	border-bottom: 1px solid var(--c-rule);
}
/* ラベルを上揃えにする行（複数行入力・テキストエリア） */
.cform__row--top {
	align-items: start;
}
.cform__row--top .cform__label {
	padding-top: 1.3rem;
}

.cform__label {
	font-size: 1.5rem;
	color: var(--c-ink);
	letter-spacing: 0.06em;
	line-height: 1.6;
}

.cform__field {
	min-width: 0;
}

/* 入力フィールド共通 */
.cform__field .wpcf7-form-control-wrap {
	display: block;
}
.cform__field input[type="text"],
.cform__field input[type="email"],
.cform__field input[type="tel"],
.cform__field input[type="url"],
.cform__field input[type="number"],
.cform__field input[type="search"],
.cform__field select,
.cform__field textarea {
	width: 100%;
	max-width: 42rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid transparent;
	border-radius: 2px;
	color: var(--c-ink);
	font-family: inherit;
	font-size: 1.5rem;
	line-height: 1.6;
	padding: 1.3rem 1.5rem;
	transition: border-color 0.3s ease, background 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}
/* オートフィル時も白背景化させず、ダーク背景・明色テキストを維持 */
.cform__field input:-webkit-autofill,
.cform__field input:-webkit-autofill:hover,
.cform__field input:-webkit-autofill:focus,
.cform__zip input:-webkit-autofill {
	-webkit-text-fill-color: var(--c-ink);
	-webkit-box-shadow: 0 0 0 1000px #162130 inset;
	box-shadow: 0 0 0 1000px #162130 inset;
	caret-color: var(--c-ink);
	transition: background-color 9999s ease-out 0s;
}
.cform__field textarea {
	height: 18rem;
	resize: vertical;
}
.cform__field ::placeholder {
	color: var(--c-ink-mute);
	opacity: 1;
}
.cform__field input:focus,
.cform__field select:focus,
.cform__field textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	background: rgba(255, 255, 255, 0.08);
}

/* セレクト（ご要件）— カスタム矢印 */
.cform__field select {
	max-width: 32rem;
	padding-right: 4rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23acacac' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.5rem center;
}
/* Windows等でネイティブのドロップダウン地色（白）になっても選択肢が見えるよう、
   option に明示色を指定（白文字継承で白地に埋もれるのを防ぐ）。
   Macは選択肢リストがネイティブ描画のため影響なし。 */
.cform__field select option {
	color: #0a1525;
	background-color: #ffffff;
}

/* 複数行スタック（住所：都道府県＋住所／メール＋確認用） */
.cform__field--stack .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
	margin-top: 1.2rem;
}
/* 都道府県は短く */
.cform__field .wpcf7-form-control-wrap[data-name="your-pref"] input,
.cform__field .wpcf7-form-control-wrap[data-name="your-pref"] select {
	max-width: 20rem;
}

/* 郵便番号（2分割） */
.cform__zip {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
}
.cform__zip .wpcf7-form-control-wrap {
	display: inline-block;
}
.cform__zip input[type="text"],
.cform__zip input[type="tel"] {
	width: 8rem;
	max-width: none;
	text-align: center;
}
.cform__zip-sep {
	color: var(--c-ink-mute);
}

/* ===== 同意（チェックボックス） ===== */
/* ハニーポット（スパム対策）: 隠しフィールドを画面外へ。display:none ではなく画面外配置で
   "hidden を無視する" 一部ボットにも値を入れさせる。人間には不可視。検証は functions.php 側。 */
.cform__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cform__consent {
	position: relative;
	max-width: 76rem;
	margin: 4rem auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.4rem;
	color: var(--c-ink-mute);
	line-height: 1.6;
}
.cform__consent .wpcf7-form-control-wrap {
	display: inline-flex;
	align-items: center;
	/* CF7既定の position:relative を解除。検証メッセージ(absolute)を
	   このwrap(幅=チェックボックス分)ではなく .cform__consent 全幅基準で配置するため */
	position: static;
}
.cform__consent .wpcf7-checkbox,
.cform__consent .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	margin: 0;
}
/* [checkbox*] が自動出力する選択肢ラベル（"1"）を隠す。可視テキストは .cform__consent-text 側で持つ */
.cform__consent .wpcf7-list-item-label { display: none; }
.cform__consent input[type="checkbox"] {
	width: 1.6rem;
	height: 1.6rem;
	accent-color: var(--c-accent);
	/* チェックボックスとテキストの間隔は margin で確実に確保 */
	margin: 0 1rem 0 0;
	cursor: pointer;
	flex-shrink: 0;
	/* CF7のauto-pでwrapが <p> 内のinline-flex（baseline基準）になり、
	   チェックボックスがテキストより上に出るため 0.4rem 下げて文字と縦位置を合わせる（光学調整） */
	position: relative;
	top: 0.4rem;
}
.cform__consent-text { color: var(--c-ink-mute); }
/* 検証メッセージ（未チェックで送信時のみ表示）は absolute で「同意」行の“下”に中央表示。
   通常時はレイアウトに影響させない（送信ボタンまでの余白内に収まる） */
.cform__consent .wpcf7-not-valid-tip {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 0.4rem;
	text-align: center;
}
.cform__consent a {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.cform__consent a:hover {
	color: var(--c-accent);
}

/* ===== 送信ボタン ===== */
.cform__submit {
	margin: 5rem auto 0;
	text-align: center;
}
.cform__submit input[type="submit"],
.cform__submit .wpcf7-submit,
.cform__submit .wpcf7-previous,
.cform__submit button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	background-color: transparent; /* 通常時は背景なし（UA既定のグレーも消す）。hoverで白へフェード */
	border: 1px solid currentColor;
	color: var(--c-ink);
	font-family: var(--f-en);
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	width: 240px;
	height: 40px;
	line-height: 38px; /* 枠2px分で垂直中央 */
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cform__submit input[type="submit"]:hover,
.cform__submit .wpcf7-submit:hover,
.cform__submit .wpcf7-previous:hover,
.cform__submit button:hover {
	background-color: var(--c-ink);
	color: var(--c-bg);
	border-color: var(--c-ink);
}
/* 同意チェック未投入でCF7がsubmitをdisabledにしても、見た目を有効時と同一に固定。
   ＝プライバシー同意のチェック有無でボタンの外見が変化しない。
   （根本対処はCF7設定 acceptance_as_validation: on の併用を推奨） */
.cform__submit input[type="submit"]:disabled,
.cform__submit .wpcf7-submit:disabled,
.cform__submit button:disabled {
	opacity: 1;
	color: var(--c-ink);
	border-color: currentColor;
	background-color: transparent;
	cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
	.cform__submit input[type="submit"],
	.cform__submit .wpcf7-submit,
	.cform__submit button { transition: none; }
}
/* 確認画面の「戻る」＋「送信する」横並び */
.cform__submit--confirm {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
/* 「戻る」は送信ボタンとデザイン統一（白ボーダー＋白文字・hoverで白塗り）。幅のみ控えめ */
.cform__submit--confirm .wpcf7-previous {
	width: 160px;
}
/* ボタン間の余白は flex gap ではなくボタン自体の margin で確保
   （CF7のauto-pでボタンが <p> に包まれると gap が効かないため）＝左右1remずつ */
.cform__submit--confirm .wpcf7-previous,
.cform__submit--confirm .wpcf7-submit {
	margin: 0 1rem;
}

/* ===== 確認画面の表示値 ===== */
.cform--confirm .cform__field {
	color: var(--c-ink);
	font-size: 1.5rem;
	line-height: 1.8;
}
.cform__confirm-lead {
	text-align: center;
	color: var(--c-ink-mute);
	font-size: 1.5rem;
	line-height: 2;
	margin-bottom: 4rem;
}

/* ===== 入口：個人／法人の選択 ===== */
.contact-select {
	display: flex;
	gap: 3rem;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 72rem;
	margin: 1rem auto 0;
}
.contact-select__btn {
	flex: 1 1 28rem;
	max-width: 33rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 4.5rem 2rem;
	border: 1px solid var(--c-rule);
	border-radius: 2px;
	text-decoration: none;
	color: var(--c-ink);
	transition: background 0.4s ease, border-color 0.4s ease;
}
.contact-select__btn:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--c-accent);
}
.contact-select__en {
	font-family: var(--f-en);
	font-size: 1.8rem;
	letter-spacing: 0.18em;
	color: var(--c-accent);
}
.contact-select__ja {
	font-size: 1.6rem;
	letter-spacing: 0.08em;
}

/* ===== 完了画面 ===== */
.contact-complete {
	max-width: 64rem;
	margin: 0 auto;
	padding-top: 4rem;
	text-align: center;
}
.contact-complete__body {
	color: var(--c-ink-mute);
	font-size: 1.5rem;
	line-height: 2.1;
}
.contact-complete__body p {
	margin-bottom: 1.4rem;
}
.contact-complete__body p:last-child {
	margin-bottom: 0;
}
.contact-complete__home {
	display: inline-block;
	margin-top: 5rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 2px;
	color: var(--c-ink);
	font-size: 1.5rem;
	letter-spacing: 0.16em;
	padding: 1.7rem 6rem;
	text-decoration: none;
	transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-complete__home:hover {
	background: var(--c-ink);
	color: var(--c-bg);
	border-color: var(--c-ink);
}

/* ===== バリデーション／応答メッセージ ===== */
.wpcf7-not-valid-tip {
	color: #B52424;
	font-size: 1.3rem;
	margin-top: 0.6rem;
}
.cform__field input.wpcf7-not-valid,
.cform__field select.wpcf7-not-valid,
.cform__field textarea.wpcf7-not-valid {
	border-color: #B52424;
}
.wpcf7-response-output {
	max-width: 76rem;
	margin: 3rem auto 0 !important;
	border: 1px solid var(--c-rule) !important;
	color: var(--c-ink-mute);
	font-size: 1.4rem;
	text-align: center;
	padding: 1.4rem 2rem !important;
}
.wpcf7-spinner {
	margin: 0 0 0 1rem;
}

/* ===== SP ===== */
@media (max-width: 768px) {
	.contact {
		padding-top: 4rem;
	}
	.cform__row {
		grid-template-columns: 1fr;
		gap: 0.8rem;
		align-items: start;
		padding: 2rem 0;
	}
	.cform__row--top .cform__label {
		padding-top: 0;
	}
	.cform__field input[type="text"],
	.cform__field input[type="email"],
	.cform__field input[type="tel"],
	.cform__field input[type="url"],
	.cform__field input[type="number"],
	.cform__field input[type="search"],
	.cform__field select,
	.cform__field textarea {
		max-width: 100%;
	}
	.cform__field .wpcf7-form-control-wrap[data-name="your-pref"] input,
	.cform__field .wpcf7-form-control-wrap[data-name="your-pref"] select {
		max-width: 24rem;
	}
	.cform__submit input[type="submit"],
	.cform__submit .wpcf7-submit {
		width: 100%;
	}
	.cform__submit--confirm {
		flex-direction: column-reverse;
	}
	.cform__submit--confirm .wpcf7-previous,
	.cform__submit--confirm .wpcf7-submit {
		width: 100%;
	}
	.contact-select {
		gap: 1.6rem;
	}
	.contact-select__btn {
		flex-basis: 100%;
		max-width: 100%;
		padding: 3.5rem 2rem;
	}
}


/* ============================================================
   タイトル（Hero = hero-title）上の余白：リーガル系（legal.css）と同値で統一
   ・タイトル上: PC 240px / SP 150px（ヘッダー高さ込み）
   ============================================================ */
.hero--title {
	padding-top: calc(var(--h-header) + 11.8rem); /* PC: 92 + 118 = 210px */
}

@media (max-width: 767px) {
	.hero--title {
		padding-top: calc(var(--h-header) + 9rem); /* SP: 60 + 90 = 150px */
	}
}

/* ============================================================
   PCのみ改行（SPは無効＝自然な折り返しに任せる）
   任意の位置に <br class="br-pc"> を入れるとPCでだけ改行される
   ============================================================ */
@media (max-width: 767px) {
	.br-pc { display: none; }
}