/*
 * banglao お問い合わせページ専用スタイル。
 *
 * トーンは archive.css（カテゴリー）/ shop-page.css と共通
 * （紺ヒーロー＋赤いマーカー下線、白背景、共通フォント --bl-font）。
 * page-contact.php（固定ページ スラッグ contact）でのみ読み込む（inc/enqueue.php）。
 * 全体を .contact-page（= #main）配下にスコープし、他ページに影響させない。
 * フォームは Contact Form 7 が出力する既存マークアップ（.wpcf7）にスタイルを当てるだけ。
 */

/* --- 全幅レイアウト（祖先の横幅制限を外す） ------------------------------ */
body.contact #content,
body.contact #content-in,
body.contact .content-in.wrap {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

body.contact #content {
	margin-top: 0;
}

body.contact #main.contact-page {
	padding: 0;
	background: var(--bl-blue-tint);
	overflow-x: clip;
}

/* --- トークン（archive.css と同じ値） ----------------------------------- */
.contact-page {
	--bl-red: #d7282f;
	--bl-red-dark: #a91822;
	--bl-navy: #102a43;
	--bl-ink: #17212b;
	--bl-muted: #65717d;
	--bl-line: #e2e4e7;
	--bl-shell: min(760px, calc(100% - 48px));

	color: var(--bl-ink);
	font-feature-settings: "palt";
	line-height: 1.7;
}

.contact-page a {
	text-decoration: none;
}

/* --- ヒーロー ------------------------------------------------------------ */
.contact-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--bl-navy);
	color: #fff;
}

.contact-page-hero::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border: 84px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	right: -170px;
	top: -200px;
	pointer-events: none;
}

.contact-page-hero__in {
	position: relative;
	z-index: 1;
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
	padding: 14px 0 clamp(36px, 5vw, 58px);
}

.contact-page-hero .bl-breadcrumb {
	padding: 6px 0 0;
	color: #fff;
}

.contact-page-hero .bl-breadcrumb a,
.contact-page-hero .bl-breadcrumb__current {
	color: #fff;
}

.contact-page-hero .bl-breadcrumb a {
	text-decoration-color: rgba(255, 255, 255, .5);
}

.contact-page-hero .bl-breadcrumb a:hover,
.contact-page-hero .bl-breadcrumb a:focus-visible {
	color: #ffd7d9;
}

.contact-page-hero .bl-breadcrumb__sep {
	color: #ff6e73;
}

.contact-page-hero__kicker {
	margin: clamp(20px, 3vw, 34px) 0 12px;
	font-family: var(--bl-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .24em;
	color: #8fa6bd;
}

.contact-page-hero__title {
	margin: 0;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.22;
	letter-spacing: -.03em;
	color: #fff;
}

.contact-page-hero__title em {
	font-style: normal;
	padding: 0 3px;
	background: linear-gradient(transparent 74%, var(--bl-red) 74%, var(--bl-red) 92%, transparent 92%);
}

.contact-page-hero__desc {
	margin: 18px 0 0;
	max-width: 660px;
	color: #c5d2dc;
	font-size: 14px;
	line-height: 1.9;
}

/* --- 本文（フォームのカード） --------------------------------------------- */
.contact-page-body__in {
	width: var(--bl-shell);
	margin-inline: auto;
	padding: clamp(32px, 5vw, 56px) 0 clamp(56px, 8vw, 92px);
}

.contact-page-card {
	margin: 0;
	padding: clamp(24px, 4vw, 44px);
	background: #fff;
	border: 1px solid var(--bl-line);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(16, 42, 67, .08);
}

.contact-page-card .entry-content {
	margin: 0;
	padding: 0;
}

/* --- フォーム（Contact Form 7） ------------------------------------------- */
.contact-page .wpcf7-form p {
	margin: 0 0 22px;
}

.contact-page .wpcf7-form label {
	display: block;
	color: var(--bl-navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;
}

/* ラベル文字の下に入力欄が来る既存構造に合わせて、余白だけ整える。 */
.contact-page .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.contact-page .wpcf7-form input[type="text"],
.contact-page .wpcf7-form input[type="email"],
.contact-page .wpcf7-form input[type="tel"],
.contact-page .wpcf7-form input[type="url"],
.contact-page .wpcf7-form textarea {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 13px 16px;
	background: var(--bl-blue-tint);
	border: 1px solid #cfd5db;
	border-radius: 8px;
	box-shadow: none;
	color: var(--bl-ink);
	font-family: var(--bl-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.contact-page .wpcf7-form textarea {
	min-height: 200px;
	resize: vertical;
}

.contact-page .wpcf7-form input[type="text"]:focus,
.contact-page .wpcf7-form input[type="email"]:focus,
.contact-page .wpcf7-form input[type="tel"]:focus,
.contact-page .wpcf7-form input[type="url"]:focus,
.contact-page .wpcf7-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--bl-navy);
	box-shadow: 0 0 0 3px rgba(16, 42, 67, .16);
}

/* 送信ボタン（サイト共通 .button-navy と同じ紺ボタン） */
.contact-page .wpcf7-form input[type="submit"] {
	display: block;
	width: 100%;
	margin: 34px 0 0;
	padding: 15px 18px;
	border: 0;
	border-radius: 3px;
	background: var(--bl-navy);
	box-shadow: 0 10px 20px rgba(16, 42, 67, .24);
	color: #fff;
	font-family: var(--bl-font);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
	transition: background .2s;
}

.contact-page .wpcf7-form input[type="submit"]:hover,
.contact-page .wpcf7-form input[type="submit"]:focus-visible {
	background: var(--bl-red);
}

.contact-page .wpcf7-form input[type="submit"]:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* --- 入力エラー / 送信結果 ------------------------------------------------ */
.contact-page .wpcf7-not-valid {
	border-color: var(--bl-red) !important;
}

.contact-page .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--bl-red-dark);
	font-size: 13px;
	font-weight: 700;
}

.contact-page .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border: 0;
	border-left: 5px solid var(--bl-muted);
	border-radius: 4px;
	background: var(--bl-blue-tint);
	color: var(--bl-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
}

.contact-page .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #2e7d4f;
	background: #eef7f1;
}

.contact-page .wpcf7 form.invalid .wpcf7-response-output,
.contact-page .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-page .wpcf7 form.failed .wpcf7-response-output,
.contact-page .wpcf7 form.aborted .wpcf7-response-output,
.contact-page .wpcf7 form.spam .wpcf7-response-output {
	border-left-color: var(--bl-red);
	background: #fdf0f0;
}

/* 送信結果の欄は、メッセージが出るまで場所を取らない（空のとき余白が残るのを防ぐ） */
.contact-page .wpcf7 form .wpcf7-response-output:empty {
	display: none;
}

/* 送信中スピナーは場所を取らないよう、ボタンの右側に重ねて表示する */
.contact-page .wpcf7-form p:has(input[type="submit"]) {
	position: relative;
	margin-bottom: 0;
}

.contact-page .wpcf7-spinner {
	position: absolute;
	right: 16px;
	top: 50%;
	margin: 17px 0 0;
	transform: translateY(-50%);
}

@media (max-width: 600px) {
	.contact-page {
		--bl-shell: calc(100% - 32px);
	}
	.contact-page-hero__in {
		width: calc(100% - 32px);
	}
	.contact-page .wpcf7-form input[type="submit"] {
		font-size: 16px;
	}
}