@charset "UTF-8";

/* =========================================================================
   CONTACT  (/contact/)
   -------------------------------------------------------------------------
   Figma実測。
     通常     CONTACT_pc01        1440x2279 / CONTACT_sp01        390x1928
     エラー   CONTACT_error_pc01  1440x2305 / CONTACT_error_sp01  390x1952
     送信完了 CONTACT_thanks_pc01 1440x1507 / CONTACT_thanks_sp01 390x805

   PC(1440):
     ヘッダー97(96+罫線1)の直下に、左464の暗い帯 / 間隔80 / 右816のフォーム / 右余白80。
     帯の中身は304幅で、04 + 90度倒した CONTACT(110px)+ 連絡ボタン304x56。
     フォームは上下余白180、行間は 導入文—項目—同意 が80、同意—SENDが64。
   1023px以下:
     二段組をやめ、暗い帯を全幅の塊にして上に積む。タイトルは横組みへ戻す。
   767px以下(SP):
     文字サイズと間隔を CONTACT_sp01 の実測へ。

   main.css の後に読み込まれる。:root のトークンはそのまま使う。
   字間は main.css の `*` セレクタが全要素に 0.05em を当てているので、
   このファイルでは letter-spacing を一切指定しない。
   ========================================================================= */

.contact {
	/* --- このページだけで使う色(Figma実測) --- */
	--c-36: #363636; /* 連絡ボタンの地(暗い帯の上) */
	--c-c5: #c5c5c5; /* 未同意のSENDボタン */
	--c-err: #db1a1e; /* エラー文 */

	background: var(--c-f9);
	color: var(--c-ink);
	/* ヘッダーは position:fixed。その高さ + 罫線1px の分だけ内容を下げる */
	padding-top: calc(var(--hd-h) + 1px);
	/*
	 * 暗い帯を左端まで伸ばす ::before が画面外へ出る分を切る。
	 * clip は overflow:hidden と違いスクロールコンテナを作らない。
	 */
	overflow-x: clip;
}

/* -------------------------------------------------------------------------
   二段組(1440基準: 464 + 間隔80 + 816 + 右余白80)
   ------------------------------------------------------------------------- */

.contact__row {
	max-width: calc(1280px + var(--edge) * 2);
	margin-left: auto;
	margin-right: auto;
	/* 暗い帯は左端まで届かせるので、余白は右だけ自分で持つ */
	padding-right: var(--edge);
	display: grid;
	/*
	 * 帯は464固定。比率で縮めると中身(最大304のボタンと連絡先の文字)が
	 * 入らなくなるため、狭いときはフォーム側だけを詰める。
	 * 1440では 464 + 80 + 816 + 右余白80 でデザインと一致する。
	 */
	grid-template-columns: 464px minmax(0, 1fr);
	column-gap: 80px;
}

/* --- 左の暗い帯 --- */

.contact__aside {
	position: relative;
	background: var(--c-ink);
	color: var(--c-f9);
	/* 464 - 80 - 80 = 304 が中身の幅 */
	padding: 80px;
}

/*
 * 画面が1440より広いとき、帯の地色だけ左端まで伸ばす。
 * (行を中央寄せしているので、伸ばさないと帯の左に明るい地が覗く)
 */
.contact__aside::before {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	bottom: 0;
	width: 50vw;
	background: inherit;
}

.contact__aside-inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* -------------------------------------------------------------------------
   見出し
   彫刻で削ったようなスライス処理を90度倒して使う。
   同じ文字を2帯に切り分け、間に隙間を作って片側をわずかにずらす。
   下層共通の .ptitle は使わない(このページだけ構造が違う)。
   ------------------------------------------------------------------------- */

.contact__ptitle {
	/* 文字サイズ。1440で110px、390で76px(横組みに戻す1023px以下で計算し直す) */
	--t: 110px;
	/* 「CONTACT」の送り幅 ÷ 文字サイズ。字間5%込みのFigma実測(514 ÷ 110) */
	--adv: 4.673;
	/* 帯の幅と隙間。110pxに対する比率(49 / 2.93 / 55 → 合計107) */
	--slice-top: 0.445;
	--slice-gap: 0.027;
	--slice-bottom: 0.5;
	/* 削り跡。下半分を持ち上げる量(SPの実測 37 ÷ 76) */
	--slice-shift: 0.487;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	/* 304の中で中央(Figma: 107幅を x=98 に置いている) */
	align-self: center;
}

/*
 * 90度倒す方法は writing-mode。text-orientation:sideways は
 * 「横組みのまま時計回りに90度倒す」指定なので、字送りと行の高さの取り方が
 * 横組みと完全に同じになる。スライスの比率をそのまま使えるのはこのため。
 * transform:rotate() だとレイアウト上の寸法が回らず、親に幅を実測で持たせる
 * 必要が出るので採らない。
 */
.contact__no,
.contact__heading {
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	-webkit-text-orientation: sideways;
	text-orientation: sideways;
}

.contact__no {
	display: block;
	font-weight: 500;
	font-size: 24px;
	line-height: 24px;
	color: var(--c-87);
	/* Figma: 文字帯の左端から16(=110pxに対して0.145) */
	margin-left: calc(var(--t) * 0.145);
}

.contact__heading {
	/*
	 * vertical-rl のブロック方向は右→左。column に並べると
	 * 1つ目(文字の上半分)が右、2つ目(下半分)が左に来る = Figmaと同じ。
	 */
	display: flex;
	flex-direction: column;
}

.contact__slice {
	display: block;
	overflow: hidden;
}

/* vertical-rl では width がブロック方向の寸法(= 横組みでの height)になる */
.contact__slice--top {
	width: calc(var(--t) * var(--slice-top));
}

.contact__slice--bottom {
	width: calc(var(--t) * var(--slice-bottom));
	/* 隙間はブロック方向の手前側 = 右 */
	margin-right: calc(var(--t) * var(--slice-gap));
}

.contact__slice > span {
	display: block;
	font-weight: 100;
	font-size: var(--t);
	line-height: 1;
	color: var(--c-f9);
	white-space: nowrap;
}

.contact__slice--bottom > span {
	margin-right: calc(var(--t) * var(--slice-shift) * -1);
}

/* -------------------------------------------------------------------------
   連絡ボタン(WhatsApp / メール)
   Figma: 304x56 / 地 #363636 / アイコン+ラベルを中央に gap8
   WhatsApp は番号未開設のため、PHP側で空なら出力しない。
   ------------------------------------------------------------------------- */

.contact__actions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 304px;
	margin-left: auto;
	margin-right: auto;
}

.contact__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 高さは min-height で取る。中身(22.5)より余白が広いので上下paddingは持たせない */
	min-height: 56px;
	padding: 8px 16px;
	background: var(--c-36);
	color: var(--c-f9);
	font-weight: 400;
	font-size: 15px;
	line-height: 22.5px;
	text-align: center;
	transition: opacity 0.3s ease;
}

.contact__link:hover {
	opacity: 0.7;
}

.contact__icon {
	flex: none;
}

/* -------------------------------------------------------------------------
   右のフォーム
   ------------------------------------------------------------------------- */

.contact__main {
	padding-top: 180px;
	padding-bottom: 180px;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.contact__lead {
	font-weight: 300;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-3c);
}

.contact__form {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.contact__body {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.contact__fields {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.contact__field {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ラベルとエラー文を横に並べる(エラー時のみエラー文が現れる) */
.contact__labelrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
}

.contact__label {
	font-weight: 400;
	font-size: 15px;
	line-height: 25.5px;
	color: var(--c-ink);
}

/* -------------------------------------------------------------------------
   エラー表示(CONTACT_error_pc01 / _sp01)
   ・文言は常にDOMに置き、.is-error のときだけ出す(CF7導入後もクラスだけで足りる)
   ・項目のエラーはラベルの右へ8px空けて並ぶ
   ・同意のエラーはチェックボックスの行の上(間隔0)
   ・入力欄の枠線と地色はエラー時も変わらない(Figmaで確認済み)
   ------------------------------------------------------------------------- */

.contact__error {
	display: none;
	margin: 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 25.5px;
	color: var(--c-err);
}

.contact__form.is-error .contact__error {
	display: block;
}

/* --- 入力欄 --- */

.contact__input,
.contact__textarea {
	width: 100%;
	height: 56px;
	padding: 12px;
	background: var(--c-f9);
	border: 1px solid var(--c-87);
	border-radius: 2px;
	color: var(--c-ink);
	font-family: inherit;
	font-weight: 300;
	font-size: 15px;
	line-height: 30px;
}

/* 176 = 上下padding12 + 本文150(30x5行) + 枠線2 */
.contact__textarea {
	height: 176px;
	resize: vertical;
	display: block;
}

.contact__input::placeholder,
.contact__textarea::placeholder {
	color: var(--c-c4);
	opacity: 1;
}

.contact__input:focus,
.contact__textarea:focus {
	border-color: var(--c-ink);
}

/* 既定の focus-visible は 4px 離れるため、枠のある入力欄では枠に沿わせる */
.contact__input:focus-visible,
.contact__textarea:focus-visible {
	outline: 1px solid var(--c-ink);
	outline-offset: 0;
}

/* --- プライバシーポリシーへの同意 --- */

.contact__consent {
	display: flex;
	flex-direction: column;
}

.contact__consent-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * 16x16 / 地 #F9F9F9 / 枠 1px #878787 / 角丸2。
 * チェック後の見た目はデザイン未受領のため、地を #191919 にして白いチェックを描く。
 */
.contact__check {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	background: var(--c-f9);
	border: 1px solid var(--c-87);
	border-radius: 2px;
	cursor: pointer;
}

.contact__check:checked {
	background-color: var(--c-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.1 3.7 6.8 9 1.3' fill='none' stroke='%23F9F9F9' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
	border-color: var(--c-ink);
}

.contact__consent-label {
	font-weight: 400;
	font-size: 16px;
	line-height: 32px;
	color: var(--c-3c);
}

/*
 * デザインではリンクの装飾が無いが、同意対象の文書へ辿れないと困るので
 * 下線だけ足している(判断)。色はデザインどおり本文と同じ。
 */
.contact__consent-label a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   ボタン(SEND / BACK TO TOP)
   Figma: 360x64 / 地 #191919 / ラベル中央 / 右端16に「>」6x9
   ------------------------------------------------------------------------- */

.contact__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 360px;
	min-height: 64px;
	padding: 8px 32px;
	background: var(--c-ink);
	color: var(--c-f9);
	font-weight: 400;
	font-size: 15px;
	line-height: 22.5px;
	text-align: center;
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

.contact__btn:hover {
	opacity: 0.8;
}

.contact__chevron {
	position: absolute;
	right: 16px;
	flex: none;
}

/*
 * 番号・URL未設定のボタン(先方提示用の仮表示)。
 * **見た目はリンク版と同一**にして、カーソルだけ変えている。
 * 公開前に functions.php の SI_CONTACT_BTN_PREVIEW を false にすれば消える。
 */
.contact__link--pending {
	cursor: default;
}

/*
 * Figmaコメント「デフォルトはエラー画面のボタンの色合いです。
 * (チェックを入れないと押せない)」。
 * つまりSENDの灰色はエラー専用の色ではなく、同意前の既定の状態。
 * JSを足さず :has() で表す。CF7導入後は [acceptance] が同じ制御を持つので、
 * このブロックはそのまま外せる。
 */
.contact__submit {
	background: var(--c-c5);
}

.contact__form:has(#contact-privacy:checked) .contact__submit {
	background: var(--c-ink);
}

.contact__form:not(:has(#contact-privacy:checked)) .contact__submit {
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   送信完了(CONTACT_thanks_pc01)
   ヘッダーから120 → 見出し48px + 64 + 本文 → 80 → BACK TO TOP → 180 → footer
   ------------------------------------------------------------------------- */

.contact__thanks {
	max-width: calc(1280px + var(--edge) * 2);
	margin-left: auto;
	margin-right: auto;
	padding: 120px var(--edge) 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

.contact__thanks-lead {
	/* 中央寄せの列なので、幅を持たせないと内容幅に縮んで折り返し位置が変わる */
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 64px;
	text-align: center;
}

.contact__thanks-title {
	font-weight: 300;
	font-size: 48px;
	line-height: 62.4px;
	color: var(--c-ink);
}

.contact__thanks-text {
	font-weight: 300;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-3c);
}

/* =========================================================================
   1023px以下 — 二段組をやめて縦に積む
   1440でようやく帯464が成立する比率なので、狭い幅では中身が入らない。
   768〜900のタブレット幅もここで受ける。
   ========================================================================= */

@media (max-width: 1023px) {
	.contact__row {
		display: block;
		max-width: none;
		padding-right: 0;
	}

	.contact__aside {
		padding: 80px var(--edge);
	}

	/* 全幅になるので地色を伸ばす必要が無い */
	.contact__aside::before {
		content: none;
	}

	.contact__aside-inner {
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
		gap: 80px;
	}

	/* --- タイトルは横組みへ戻す --- */

	.contact__ptitle {
		/* 枠内に収まる上限。--adv は「CONTACT」の実測送り幅 */
		--t: min(110px, calc((100vw - var(--edge) * 2) / var(--adv)));

		align-self: stretch;
		gap: 4px;
	}

	.contact__no,
	.contact__heading {
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
	}

	.contact__no {
		margin-left: 0;
	}

	.contact__slice--top {
		width: auto;
		height: calc(var(--t) * var(--slice-top));
	}

	.contact__slice--bottom {
		width: auto;
		height: calc(var(--t) * var(--slice-bottom));
		margin-right: 0;
		margin-top: calc(var(--t) * var(--slice-gap));
	}

	.contact__slice--bottom > span {
		margin-right: 0;
		margin-top: calc(var(--t) * var(--slice-shift) * -1);
	}

	/* --- フォーム --- */

	.contact__main {
		max-width: calc(1280px + var(--edge) * 2);
		margin-left: auto;
		margin-right: auto;
		padding: 80px var(--edge);
	}
}

/*
 * タブレット幅(SP専用デザインの対象外)。
 * 帯が広いのに304のボタンだけ中央にあると浮くので、タイトルの左端に揃える。
 * SP(390)ではデザインどおり中央のまま。
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.contact__actions {
		margin-left: 0;
	}
}

/* =========================================================================
   SP  (Figma: CONTACT_sp01 = 390x1928 / --edge は main.css で20になる)
   ========================================================================= */

@media (max-width: 767px) {
	.contact__no {
		font-size: 14px;
		line-height: 14px;
		/*
		 * FigmaのSPフレームだけ 04 が #F9F9F9 だったが、PC版と他の下層ページに
		 * 揃えて #878787 にする(服部氏の指示 2026-08-18)。色は .contact__no の
		 * 基本指定(--c-87)のままでよいので、ここでは上書きしない。
		 */
	}

	.contact__link {
		min-height: 48px;
		font-size: 14px;
		line-height: 21px;
	}

	.contact__main {
		gap: 48px;
	}

	.contact__form {
		gap: 24px;
	}

	.contact__body {
		gap: 48px;
	}

	.contact__fields {
		gap: 32px;
	}

	.contact__field {
		gap: 12px;
	}

	.contact__label,
	.contact__error {
		font-size: 14px;
		line-height: 23.8px;
	}

	.contact__input,
	.contact__textarea {
		height: 54px;
		font-size: 14px;
		line-height: 28px;
	}

	/* 166 = 上下padding12 + 本文140(28x5行) + 枠線2 */
	.contact__textarea {
		height: 166px;
	}

	.contact__consent-label {
		font-size: 14px;
		line-height: 28px;
	}

	.contact__btn {
		min-height: 56px;
		font-size: 14px;
		line-height: 21px;
	}

	/* --- 送信完了はSPだけ左寄せ、ボタンは全幅 --- */

	.contact__thanks {
		padding: 80px var(--edge);
		align-items: stretch;
		gap: 24px;
	}

	.contact__thanks-lead {
		gap: 24px;
		text-align: left;
	}

	.contact__thanks-title {
		font-size: 24px;
		line-height: 31.2px;
	}

	.contact__thanks-text {
		font-size: 14px;
		line-height: 28px;
	}
}

/* -------------------------------------------------------------------------
   Contact Form 7 対応(2026-08-28)

   フォーム本体はCF7が生成する。デザインどおりの構造はCF7側のフォーム本文に
   持たせてあるので、ここで吸収するのは **CF7が勝手に足す分** だけ。

   ・.wpcf7-form-control-wrap  … 入力欄を包む span。素通しにする
   ・.wpcf7-not-valid-tip      … CF7の英語エラー文。デザインに無いので隠し、
                                 代わりに自前の .contact__error を出す
   ・.wpcf7-response-output    … 送信結果の枠。デザインに無いので隠す
                                 (成功時は main.js が ?state=sent へ送る)
   ・[acceptance]              … チェックボックスを label と span で二重に包む
   ------------------------------------------------------------------------- */

.contact__form .wpcf7-form-control-wrap {
	display: block;
}

/* CF7の既定のエラー文と結果表示は出さない(デザインに存在しない) */
.contact__form .wpcf7-not-valid-tip,
.contact__form .wpcf7-response-output,
.contact__form .wpcf7-spinner {
	display: none;
}

/*
 * デザインのエラー文を、CF7が不正と判定した項目にだけ出す。
 * .is-error は ?state=error 時代の名残で、いまはCF7の .invalid が同じ役目。
 */
.contact__field:has(.wpcf7-not-valid) .contact__error,
.contact__consent:has(.wpcf7-not-valid) .contact__error {
	display: block;
}

/* 同意漏れはCF7が個別クラスを付けないことがあるため、フォーム全体の判定で補う */
.contact__form.invalid .contact__consent:not(:has(#contact-privacy:checked)) .contact__error {
	display: block;
}

/* --- [acceptance] の入れ子をデザインの1行に戻す --- */

.contact__consent .wpcf7-acceptance,
.contact__consent .wpcf7-list-item {
	display: block;
	margin: 0;
}

.contact__consent .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
}

/* .contact__check と同じ見た目。CF7はclass:を外側のspanに付けるため直接指定する */
.contact__consent input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	background: var(--c-f9);
	border: 1px solid var(--c-87);
	border-radius: 2px;
	cursor: pointer;
}

.contact__consent input[type="checkbox"]:checked {
	background-color: var(--c-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.1 3.7 6.8 9 1.3' fill='none' stroke='%23F9F9F9' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
	border-color: var(--c-ink);
}

.contact__consent .wpcf7-list-item-label {
	font-weight: 400;
	font-size: 16px;
	line-height: 32px;
	color: var(--c-3c);
}

.contact__consent .wpcf7-list-item-label a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 送信中は二重送信を防ぐ(CF7がフォームに .submitting を付ける) */
.contact__form.submitting .contact__submit {
	pointer-events: none;
	opacity: 0.6;
}

@media (max-width: 767px) {
	.contact__consent .wpcf7-list-item-label {
		font-size: 14px;
		line-height: 28px;
	}
}

/* -------------------------------------------------------------------------
   ハニーポット(迷惑メール対策 / 2026-08-28)

   ⚠ display:none にしないこと。それを見て避けるボットがいる。
      画面外へ飛ばして人間の目から隠す。
      キーボード(tabindex="-1")とスクリーンリーダー(aria-hidden)からも
      外してあるので、正規の利用者が誤って入力することはない。
   ------------------------------------------------------------------------- */

.si-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}