@charset "UTF-8";
/* ==================================================================
 * フォーム・規約・画像まわり（1-c）
 *
 * 🚨 トークンを使ってよいのは「既存のCSSにPC上書きがあり、値も一致する宣言」だけ。
 * ================================================================== */

/* --- 画像とキャプション ------------------------------------------------- */

.m-caption {
	position: relative;
}

.m-caption-item {
	width: 100%;
	vertical-align: top;
}

/* 画像の上に重ねる帯 */
.m-caption-text {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.m-img-top {
	position: relative;
}

.m-img-top video {
	width: 100%;
	height: 100%;
}

.m-img-main {
	line-height: var(--leading-normal);
}

.m-img-main img {
	width: 100%;
}

.m-img-main-text {
	padding: 1.33333vw 1.33333vw .8vw 2.66667vw;
	font-size: var(--font-16);
	font-weight: bold;
	color: var(--color-text);
	letter-spacing: .53333vw;
}

.m-logo-bunner {
	width: 90px;
	height: 30px;
}

.m-g_map {
	width: 100%;
	height: 90.4vw;   /* = 339px @375 */
}

@media screen and (min-width: 751px) {
	.m-img-main {
		margin-top: 64px;
		margin-right: 0;
		margin-left: 0;
	}

	.m-img-main-text {
		padding: 5px 5px 3px 10px;
		font-size: var(--font-26);
		letter-spacing: .2em;
	}

	.m-g_map {
		height: 400px;
	}
}

/* --- 問い合わせフォーム --------------------------------------------------
 * PCでは「項目名 30% ／ 入力欄 70%」の横並び。スマホでは縦積み。
 */

.m-form + .m-form {
	margin-top: var(--space-16);
}

/*
 * 🚨 **`.m-form-*` は消してはいけない。**
 *
 * Contact Form 7 は**フォーム定義を `post_content` ではなく
 * postmeta `_form` に保存する**。フォーム7件は `m-form-title` /
 * `m-form-body` / `m-form-consent-check` を使い続けている（383箇所）。
 *
 * 記事本文のクラスは専用の名前空間（`s-`）へ移したが、
 * **CF7のフォーム定義は移していない**。CF7の定義は管理画面のCF7設定で
 * 編集するもので、記事本文とは性質が違うため。
 *
 * ★未使用CSSを判定するときは **postmeta も数える**こと。
 *   `post_content` だけを見ると「未使用」と誤判定し、削除すると
 *   問い合わせフォームの見た目が崩れる。
 */
.m-form-title {
	padding: var(--space-8) 0;
	font-size: var(--font-16);
}

.m-form-title *,
.m-form-body * {
	width: 100%;
}

.m-form input[type="text"],
.m-form input[type="email"],
.m-form input[type="tel"],
.m-form select {
	padding: var(--space-8);
	font-size: var(--font-16);
}

.m-form option {
	font-size: var(--font-16);
}

.m-form textarea {
	padding: var(--space-8);
	resize: vertical;
}

.m-form input[type="submit"] {
	cursor: pointer;
	border-style: none;
}

/* 確認画面では入力欄を「読むだけ」の見た目にする */
.m-form textarea:read-only {
	font-weight: bold;
	background-color: var(--color-bg);
	border: none;
}

@media screen and (min-width: 751px) {
	.m-form {
		display: flex;
		flex-wrap: nowrap;
	}

	.m-form + .m-form {
		margin-top: var(--space-32);
	}

	.m-form-title {
		flex-basis: 30%;
		padding: var(--space-8);
		font-size: var(--font-16);
	}

	.m-form-body {
		flex-basis: 70%;
	}

	.m-form input[type="text"],
	.m-form input[type="email"],
	.m-form input[type="tel"],
	.m-form select {
		padding: var(--space-8);
		font-size: var(--font-16);
	}

	.m-form option {
		font-size: var(--font-16);
	}

	.m-form textarea {
		padding: var(--space-8);
	}
}

/* --- 同意欄 -------------------------------------------------------------- */

.m-form-consent-text {
	height: 80vw;
	margin-top: var(--space-16);
	overflow: auto;
	border: var(--space-6) solid #eee;
}

.m-form-consent-check {
	padding: var(--space-20) 0;
	margin-top: var(--space-20);
	text-align: center;
	background-color: #f6f7f8;   /* ★--color-gray-50(#f7f7f7) とは別の値 */
}

@media screen and (min-width: 751px) {
	.m-form-consent-text {
		height: 500px;
		margin-top: var(--space-32);
		border: 6px solid #eee;
	}

	.m-form-consent-check {
		padding: var(--space-20) 0;
		margin-top: var(--space-20);
	}
}

/* --- Contact Form 7 ------------------------------------------------------
 * プラグインが出す要素の見た目を調整する。
 */

.wpcf7-response-output,
div.wpcf7 .ajax-loader {
	display: none !important;
}

/* 確認画面のステップ表示（2026-09-17 / task226）
 *
 * 🚨 **この2行が無いと、確認・戻る・送信のボタンが最初から全部表示される。**
 *   もともとプラグイン（contact-form-7-add-confirm）の CSS にしか無い定義で、
 *   プラグインを停止した時点で読み込まれなくなり、CTA が崩れた。
 *   確認画面をテーマへ内製した（C-6・task225）以上、**この指定もテーマで持つ。**
 *
 * ★JS はクラスの付け外しだけを行い、隠す・出すの判断はここに集約する。
 */
.wpcf7c-force-hide {
	display: none !important;
}

.wpcf7c-hide {
	display: none;
}

/* 確認画面の入力欄（add-confirm が付けるクラス） */
.m-form .wpcf7c-conf {
	font-weight: bold !important;
	background-color: var(--color-bg) !important;
	border: none !important;
	appearance: none !important;
}

.m-form .wpcf7c-conf::placeholder {
	color: transparent;
}

/* --- 規約・方針ページ ------------------------------------------------------ */

.m-privacy {
	padding: var(--space-16);
}

.m-privacy-title {
	margin-bottom: var(--space-24);
}

/* ★rem 指定。スマホでも 24px 固定 */
.m-privacy-list {
	margin-left: 1.5rem;
}

.m-privacy-item {
	margin-bottom: var(--space-24);
}

.m-privacy-item:last-child {
	margin-bottom: 0;
}

.m-privacy-detail-title {
	margin-bottom: var(--space-16);
}

/* 番号を持たない見出しは、リストのぶら下げ分だけ左へ戻す */
.m-privacy-detail-nonum-title {
	margin-left: -1.5rem;
}

.m-privacy-detail-title-secondary {
	margin-bottom: var(--space-8);
}

.m-privacy-detail-body {
	margin-bottom: var(--space-32);
	margin-left: -1.5rem;
}

.m-privacy-detail p {
	margin-bottom: var(--space-8);
}

.m-privacy-signature {
	margin-top: var(--space-32);
	text-align: right;
}

.m-privacy-address {
	margin-top: var(--space-32);
}

.m-privacy-address-body > * {
	margin-bottom: var(--space-8);
}

.m-privacy-address-body > *:last-child {
	margin-bottom: 0;
}

/* (1) (2) … の連番リスト */
.m-privacy-ol {
	margin-top: var(--space-16);
	list-style: none;
	counter-reset: num 0;
}

.m-privacy-ol li {
	position: relative;
	padding-left: 2rem;
	margin-top: var(--space-16);
}

.m-privacy-ol li::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "(" counter(num) ")";
	counter-increment: num 1;
}

@media screen and (min-width: 751px) {
	.m-privacy {
		padding: 30px 40px;
	}

	.m-privacy-title,
	.m-privacy-item {
		margin-bottom: var(--space-32);
	}

	.m-privacy-detail-title {
		margin-bottom: var(--space-16);
	}

	.m-privacy-detail-title-secondary,
	.m-privacy-detail p,
	.m-privacy-address-body > * {
		margin-bottom: var(--space-8);
	}

	.m-privacy-detail-body {
		margin-bottom: var(--space-32);
	}

	.m-privacy-signature,
	.m-privacy-address {
		margin-top: var(--space-32);
	}

	.m-privacy-ol,
	.m-privacy-ol li {
		margin-top: var(--space-16);
	}
}

/* ===== 個別に補う宣言 ===== */
/*
 * 🚨 セレクタは書き直し済みだが、**このプロパティだけ他に定義が無い**もの。
 */

.m-form textarea:-moz-read-only {
	font-weight: bold;
	background-color: #fff;
	border: none;
}

/* ===== reCAPTCHA ===== */

/*
 * 🚨 バッジを隠すには Google の条件を満たす必要がある。
 * https://developers.google.com/recaptcha/docs/faq
 * 「ユーザーフローに reCAPTCHA のブランドを明示しているのであれば、バッジを非表示にできます」
 *
 * ★隠すだけにしてはいけない。PHP 側がフォームの末尾に
 * Google 指定の文面（Privacy Policy と Terms of Service へのリンク付き）を出しており、
 * **この2つはセットで初めて条件を満たす**。片方だけ消してはいけない。
 *
 * ★`display: none` ではなく `visibility: hidden` を使う（Google の記載どおり）。
 * 消してしまうと reCAPTCHA 側の処理に影響しうる。
 *
 * ※既存サイトはバッジを出しており、カスタマイザーの「追加CSS」で
 * 位置と大きさだけ調整する（bottom:10px / right:10px / scale(0.85) / opacity:.6）。
 * 追加CSSはテーマごとに保存されるため切替で失われる。ここへ移したうえで、
 * 方針により**非表示**に変更している。
 */
.grecaptcha-badge {
	visibility: hidden;
}

/* Google 指定の帰属表示。フォームの末尾に出る */
.m-recaptcha-notice {
	/*
	 * 🚨 直前の `.m-btn-container` は **負の下マージン**を持つ
	 *    （SP `-8px` / PC `-42px`。ボタンを並べたときの行間を詰めるための指定）。
	 *    この帰属表示はそのグリッドの一部ではないのに引き上げられてしまう。
	 *    PC では 16px - 42px = **-26px** となり、確認ボタンに重なっていた。
	 *    打ち消したうえで余白を取る。SP は 16 - 8 = 8px で足りている。
	 */
	margin-top: var(--space-16);
	font-size: 12px;
	line-height: 1.6;
	color: #767676;   /* 白背景で 4.54:1。小さな文字でも読める濃さにする */
}

@media screen and (min-width: 751px) {
	.m-recaptcha-notice {
		/* 42px は `.m-btn-container` の負マージンの打ち消し。残る 16px が実際の余白。 */
		margin-top: calc(42px + var(--space-16));
	}
}

.m-recaptcha-notice a {
	color: inherit;
	text-decoration: underline;
}

.m-recaptcha-notice a:hover {
	text-decoration: none;
}