/*
Theme Name: Enkaku Jorei Light
Theme URI: https://xn--tzwx26eeiesna.com/
Author: 夜明けの扉
Author URI: https://datenagroup.com/
Description: 遠隔浄霊.com（夜明けの扉）向けの軽量自作テーマ。ページビルダー非依存・JS最小限・[ej_checkout]ショートコード対応。osaka-jorei-light / purrologie.com と同系統の設計方針（ローダーなし、jQuery非依存、外部Webフォントなし）。
Version: 0.16.3
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: enkaku-jorei-light
*/

/* =========================================================
   0. デザイントークン
   ========================================================= */
:root {
	--ej-navy: #1c1856;
	--ej-navy-deep: #110e38;
	--ej-gold: #e8c34a;
	--ej-gold-deep: #c89f2e;
	--ej-ink: #211f33;
	--ej-paper: #fffdf7;
	--ej-paper-soft: #f6f3ea;
	--ej-line: #e4e0d2;
	--ej-success-bg: #f1f8f1;

	--ej-font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	--ej-font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;

	--ej-radius: 14px;
	--ej-shell: 1120px;
	--ej-shadow: 0 10px 30px rgba(17, 14, 56, 0.08);
}

/* =========================================================
   1. リセット・基本
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--ej-paper);
	color: var(--ej-ink);
	font-family: var(--ej-font-sans);
	font-size: 16px;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ej-navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ej-gold-deep); }

h1, h2, h3, h4 {
	font-family: var(--ej-font-serif);
	line-height: 1.5;
	margin: 0 0 0.6em;
	color: var(--ej-navy-deep);
}
h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

.site-shell { max-width: var(--ej-shell); margin: 0 auto; padding: 0 20px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000;
	width: auto; height: auto; padding: 10px 16px; clip: auto;
	background: var(--ej-navy); color: #fff; border-radius: 8px;
}

.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
	padding: 0.85em 1.6em; border-radius: 999px; font-weight: 700;
	background: var(--ej-gold); color: var(--ej-navy-deep); border: none;
	min-height: 44px; cursor: pointer; text-decoration: none; font-size: 1rem;
}
.button:hover { background: var(--ej-gold-deep); color: var(--ej-navy-deep); }
.button-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); }
.button-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }
.button-navy { background: var(--ej-navy); color: #fff; }
.button-navy:hover { background: var(--ej-navy-deep); color: #fff; }

/* =========================================================
   2. ヘッダー
   ========================================================= */
.top-bar { background: var(--ej-navy-deep); color: #f3efe0; font-size: 0.85rem; }
.top-bar .site-shell { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding-top: 6px; padding-bottom: 6px; }
.top-bar a { color: #f3efe0; }
.top-bar .top-bar-phone { font-weight: 700; letter-spacing: 0.02em; }
.top-bar .top-bar-phone strong { color: var(--ej-gold); font-size: 1.05rem; margin-left: 0.3em; }

.site-header { background: var(--ej-paper); border-bottom: 1px solid var(--ej-line); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
.site-branding { display: flex; flex-direction: column; line-height: 1.3; }
.site-title { font-family: var(--ej-font-serif); font-weight: 700; font-size: 1.3rem; color: var(--ej-navy-deep); text-decoration: none; }
.site-kicker { font-size: 0.78rem; color: #6b6a7d; }

.menu-toggle {
	display: none; background: none; border: 1px solid var(--ej-line); border-radius: 8px;
	width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer;
}
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ej-navy-deep); }

.primary-nav { display: flex; }
.primary-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; align-items: center; }
.primary-menu a { font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--ej-ink); padding: 6px 0; }
.primary-menu a:hover { color: var(--ej-navy); }
/* メニューの目立たせる項目（メニュー項目の「CSSクラス」に menu-item-cta を付けたもの）。
   色は旧サイト（本番）の「無料確認申し込み」ボタンと同じ青（v0.15.6、2026-10-31 ユーザー指示）。 */
.primary-menu .menu-item-cta a {
	background: #3744bd; color: #fff; padding: 0.6em 1.4em; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center;
}
.primary-menu .menu-item-cta a:hover, .primary-menu .menu-item-cta a:focus-visible { background: #2a3494; color: #fff; }

@media (max-width: 860px) {
	.menu-toggle { display: inline-flex; }
	.primary-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ej-paper);
		border-bottom: 1px solid var(--ej-line); box-shadow: var(--ej-shadow); padding: 10px 20px 18px;
	}
	.primary-nav.is-open { display: block; }
	.primary-menu { flex-direction: column; align-items: flex-start; gap: 10px; }
	.primary-menu .menu-item-cta { width: 100%; }
	.primary-menu .menu-item-cta a { width: 100%; }
}

/* =========================================================
   3. ヒーロー（トップページ）
   ========================================================= */
.hero {
	position: relative; color: #fff; padding: 64px 0 56px;
	background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 55%), linear-gradient(160deg, var(--ej-navy) 0%, var(--ej-navy-deep) 70%);
	background-size: cover; background-position: center;
	overflow: hidden;
}
/* 背景写真が設定されている場合：暗めのグラデーションを写真の上に重ねて
   文字（電話番号・営業時間・見出し等）の視認性を確保する。写真自体には
   文字を入れない運用を前提としているため、画像を差し替えても常に読みやすい。 */
.hero.hero-has-image {
	background-image:
		linear-gradient(160deg, rgba(20,18,46,0.82) 0%, rgba(20,18,46,0.55) 55%, rgba(20,18,46,0.82) 100%),
		var(--hero-photo, none);
	background-size: cover, cover;
	background-position: center, center;
	background-blend-mode: normal, normal;
}
.hero-ribbon {
	position: absolute; top: 22px; left: -46px; transform: rotate(-45deg);
	background: var(--ej-gold); color: var(--ej-navy-deep); font-weight: 700; font-size: 0.8rem;
	padding: 6px 60px; box-shadow: var(--ej-shadow);
}
.hero-inner { position: relative; max-width: var(--ej-shell); margin: 0 auto; padding: 0 20px; }
.hero-kicker { color: var(--ej-gold); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.4em; }
.hero h1 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem); }
.hero-lead { max-width: 640px; color: #e7e4f2; }
.hero-highlight {
	display: inline-block; background: var(--ej-gold); color: var(--ej-navy-deep); font-weight: 700;
	padding: 0.7em 1.1em; border-radius: 10px; margin: 0.6em 0 1em;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; color: #f3efe0; font-size: 0.95rem; margin-bottom: 1.4em; }
.hero-meta strong { color: #fff; font-size: 1.3rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 画像バナー（旧サイトのヒーロー画像をそのまま表示。v0.15.0） */
.hero-banner { background: var(--ej-navy-deep); }
.hero-banner-title { margin: 0; line-height: 0; font-size: 1rem; }
.hero-banner-title picture, .hero-banner-img { display: block; width: 100%; height: auto; }

/* =========================================================
   4. セクション共通スタイル
   ========================================================= */
.section { padding: 56px 0; }
.section-soft { background: var(--ej-paper-soft); }
.section-kicker { color: var(--ej-gold-deep); font-weight: 700; letter-spacing: 0.08em; font-size: 0.85rem; }

/* =========================================================
   5. お知らせ／受付状況（自動更新）
   ========================================================= */
.status-card {
	border: 1px solid var(--ej-line); border-radius: var(--ej-radius); padding: 22px 26px;
	background: #fff; box-shadow: var(--ej-shadow);
}
.status-card .status-period { color: var(--ej-gold-deep); font-weight: 700; }
.status-card .status-updated { font-size: 0.82rem; color: #7a7891; margin-top: 0.6em; }

/* =========================================================
   7. お問い合わせ帯／フッター
   ========================================================= */
.contact-band { background: linear-gradient(160deg, var(--ej-navy) 0%, var(--ej-navy-deep) 100%); color: #fff; padding: 40px 0; }
.contact-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.contact-band h2 { color: #fff; margin: 0 0 0.3em; }
.contact-band p { color: #e4e2f0; margin: 0; }

.site-footer { background: #15123f; color: #cfccdf; padding: 44px 0 20px; font-size: 0.92rem; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1.3fr 1fr; margin-bottom: 24px; }
.footer-brand { font-family: var(--ej-font-serif); color: #fff; font-size: 1.1rem; margin-bottom: 0.4em; }
.footer-description { color: #b9b6cf; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-menu a { color: #cfccdf; text-decoration: none; }
.footer-menu a:hover { color: #fff; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; margin-bottom: 12px; }
.legal-links a { color: #cfccdf; font-size: 0.85rem; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #9490ab; font-size: 0.8rem; }
.back-to-top { color: #9490ab; text-decoration: none; }

@media (max-width: 700px) {
	.footer-grid { grid-template-columns: 1fr; }
	.contact-band-inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   8. 固定ページ／ブログ共通
   ========================================================= */
.page-hero { background: var(--ej-paper-soft); border-bottom: 1px solid var(--ej-line); padding: 34px 0 26px; }
.breadcrumbs { font-size: 0.82rem; color: #7a7891; margin-bottom: 0.6em; }
.breadcrumbs a { color: #7a7891; }

.content-area { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; }
.content-area img { border-radius: 10px; }
.content-area .featured-image { margin: 0 0 1.6em; }
.content-area table { width: 100%; border-collapse: collapse; }
.content-area table th, .content-area table td { border: 1px solid var(--ej-line); padding: 10px 12px; text-align: left; }

.post-meta { color: #7a7891; font-size: 0.85rem; margin-bottom: 1.4em; }

.archive-grid { max-width: var(--ej-shell); margin: 0 auto; padding: 40px 20px 64px; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .archive-grid { grid-template-columns: 1fr; } }
.post-card { display: block; text-decoration: none; color: var(--ej-ink); border: 1px solid var(--ej-line); border-radius: var(--ej-radius); overflow: hidden; background: #fff; }
.post-card .post-card-thumb { aspect-ratio: 16/10; background: var(--ej-paper-soft); overflow: hidden; }
.post-card .post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 14px 16px; }
.post-card-body h2, .post-card-body h3 { font-size: 1.02rem; margin: 0 0 0.4em; }
.post-card-date { font-size: 0.78rem; color: #7a7891; }

.pagination { display: flex; gap: 10px; justify-content: center; padding: 0 20px 60px; }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--ej-line); border-radius: 8px; text-decoration: none; color: var(--ej-ink); }
.pagination .current { background: var(--ej-navy); color: #fff; border-color: var(--ej-navy); }

/* =========================================================
   9. [ej_checkout] 申込ページ統合
   ---------------------------------------------------------
   プラグイン提供のマークアップ・クラス（.ej-checkout / data-ej-*）
   はそのまま。ここではテーマの配色・タイポグラフィに合わせた
   見た目の調整のみを行い、入力欄サイズ・フォーカス表示など
   機能に関わるルールは上書きしない。
   ========================================================= */
body.ej-checkout-page { background: var(--ej-paper-soft); }

.ej-checkout { font-family: var(--ej-font-sans); }
.ej-checkout h2 { font-family: var(--ej-font-sans); color: var(--ej-navy-deep); }
.ej-checkout .ej-panel {
	background: #fff; border: 1px solid var(--ej-line); border-radius: var(--ej-radius);
	padding: 22px 22px 26px; margin: 0 0 18px; box-shadow: var(--ej-shadow);
}
.ej-checkout button[type="submit"] {
	background: var(--ej-gold); color: var(--ej-navy-deep); border: none; border-radius: 999px;
	font-weight: 700; padding: 0.9em 1.8em;
}
.ej-checkout button[type="submit"]:hover { background: var(--ej-gold-deep); }
.ej-checkout .ej-secondary { background: transparent; border: 1px solid var(--ej-line); border-radius: 999px; color: var(--ej-navy); }
.ej-checkout .ej-total { color: var(--ej-navy-deep); white-space: nowrap; } /* 「25,000円」の「円」だけが次の行に落ちないように（v0.13.2） */
.ej-checkout a.ej-button {
	display: inline-flex; background: var(--ej-navy); color: #fff; padding: 0.8em 1.6em; border-radius: 999px; text-decoration: none; min-height: 44px; align-items: center;
}
.ej-checkout.ej-result { max-width: 760px; margin: 2rem auto; padding: 0 1rem 4rem; }
.ej-checkout.ej-result h1 { color: var(--ej-navy-deep); }

/* スマートフォンでの区切り見出し（legend）の折り返し対策（v0.13.2）
   「1. お申し込み・お支払いをする方」などの見出しが2行になると、
   2行目が枠線をまたいで表示されるため、狭い画面では文字を少し小さくして
   1行に収める。さらに狭い画面（〜374px）では、見出しを枠の内側に置いて
   何行になっても枠線と重ならないようにする。 */
@media (max-width: 480px) {
	.ej-checkout .ej-panel > legend { font-size: 0.9375rem; }
}
@media (max-width: 374px) {
	.ej-checkout .ej-panel > legend { float: left; width: 100%; padding: 0; margin: 0 0 0.75rem; }
	.ej-checkout .ej-panel > legend + * { clear: both; }
}

/* 料金説明ページ（/jourei/）用（v0.13.3） */
.content-area .ej-apply-cta { margin: 1.6em 0; text-align: center; }
.content-area .ej-price-table table { margin: 0; }
.content-area .ej-price-table th { background: var(--ej-paper-soft); white-space: nowrap; }
.content-area .ej-price-table td:nth-child(2) { white-space: nowrap; font-weight: 700; color: var(--ej-navy-deep); }
.content-area .ej-report-example {
	background: var(--ej-paper-soft); border-left: 4px solid var(--ej-gold); border-radius: 8px;
	margin: 1.2em 0 1.6em; padding: 1em 1.2em;
}
.content-area .ej-report-example p { margin: 0 0 0.6em; }
@media (max-width: 600px) {
	/* 3列の料金表を、狭い画面では1サービスずつ縦に並べる */
	.content-area .ej-price-table thead { display: none; }
	.content-area .ej-price-table table, .content-area .ej-price-table tbody,
	.content-area .ej-price-table tr, .content-area .ej-price-table td { display: block; width: 100%; }
	.content-area .ej-price-table tr { border: 1px solid var(--ej-line); border-radius: 8px; margin-bottom: 12px; padding: 10px 12px; background: #fff; }
	.content-area .ej-price-table td { border: none; padding: 2px 0; }
	.content-area .ej-price-table td:first-child { font-weight: 700; }
}

/* 10. フローティングCTA：v0.16.0 で廃止（2026-11-01 ユーザー指示） */

/* =========================================================
   11. ユーティリティ
   ========================================================= */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* =========================================================
   目次（v0.14.0。Table of Contents Plus の代替。functions.php 15章）
   ========================================================= */
.content-area .ej-toc {
	background: var(--ej-paper-soft); border: 1px solid var(--ej-line); border-radius: 10px;
	margin: 1.6em 0 2em; padding: 0.9em 1.2em 1em;
}
.content-area .ej-toc-title {
	cursor: pointer; font-weight: 700; color: var(--ej-navy-deep); list-style-position: inside;
}
.content-area .ej-toc ol { list-style: decimal; margin: 0.6em 0 0; padding-left: 1.6em; }
.content-area .ej-toc ol ol { list-style: none; margin: 0.2em 0 0.3em; padding-left: 1em; font-size: 0.94em; }
.content-area .ej-toc li { margin: 0.25em 0; line-height: 1.6; }
.content-area .ej-toc a { color: var(--ej-navy); text-decoration: none; }
.content-area .ej-toc a:hover, .content-area .ej-toc a:focus-visible { text-decoration: underline; }
/* 目次から移動したとき、見出しが固定ヘッダーの下に隠れないように */
.content-area :is(h2, h3, h4)[id] { scroll-margin-top: 96px; }

/* =========================================================
   お問い合わせフォーム（Contact Form 7）のチェックボックス（v0.15.4）
   Turnstile（Cloudflare）のチェックボックスと大きさ・見た目・左端の
   位置をそろえる。Turnstile 側は外部の枠内のため変更できないので、
   こちらを 24px・濃い灰色の枠に合わせている。
   ========================================================= */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item { margin: 0 0 0 9px; }
.wpcf7-form .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.wpcf7-form input[type="checkbox"] {
	-webkit-appearance: none; appearance: none;
	width: 24px; height: 24px; margin: 0; flex-shrink: 0;
	border: 2px solid #4b4b4b; border-radius: 4px;
	background: #fff center / 16px 16px no-repeat; cursor: pointer;
}
.wpcf7-form input[type="checkbox"]:checked {
	background-color: var(--ej-navy); border-color: var(--ej-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wpcf7-form input[type="checkbox"]:focus-visible { outline: 2px solid var(--ej-gold-deep); outline-offset: 2px; }

/* お問い合わせフォームの送信ボタン（v0.15.5）
   サイトのほかのボタン（.button）と同じ金色・丸型にして目立たせる。
   同意のチェックを入れるまでは CF7 が押せない状態（disabled）にするため、
   その間は淡い色にして「まだ押せない」ことが分かるようにする。 */
.wpcf7-form input.wpcf7-submit {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 240px; min-height: 52px; margin: 8px 0 24px; padding: 0.85em 2.4em;
	border: none; border-radius: 999px;
	background: var(--ej-gold); color: var(--ej-navy-deep);
	font-family: inherit; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.1em;
	box-shadow: 0 4px 14px rgba(17, 14, 56, 0.15);
	cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--ej-gold-deep); }
.wpcf7-form input.wpcf7-submit:active { transform: translateY(1px); }
.wpcf7-form input.wpcf7-submit:focus-visible { outline: 3px solid var(--ej-navy); outline-offset: 3px; }
.wpcf7-form input.wpcf7-submit:disabled { background: #e9e6dc; color: #8a8799; box-shadow: none; cursor: not-allowed; }
@media (max-width: 480px) {
	.wpcf7-form input.wpcf7-submit { width: 100%; }
}

/* =========================================================
   お問い合わせフォームのデザイン（v0.16.0）
   フォームの中身を <div class="ej-form"> で組んだフォームに適用。
   白いカードの中に、見出し付きの入力欄 → 同意・ロボット確認 → 申込ボタン
   の順に並べる。入力欄の文字は16px（スマートフォンで勝手に拡大されない大きさ）。
   ========================================================= */
.wpcf7 .ej-form {
	background: #fff; border: 1px solid var(--ej-line); border-radius: var(--ej-radius);
	box-shadow: var(--ej-shadow); padding: 32px 32px 28px; margin: 1.5em 0 1em;
}
.ej-form .ej-field { display: block; margin: 0 0 22px; }
.ej-form .ej-label {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
	font-weight: 700; font-size: 0.95rem; line-height: 1.6; color: var(--ej-navy-deep); margin-bottom: 8px;
}
.ej-form .ej-req {
	display: inline-block; background: #b3412f; color: #fff; border-radius: 4px;
	font-size: 0.72rem; font-weight: 700; line-height: 1; letter-spacing: 0.05em; padding: 4px 7px;
}
.ej-form .wpcf7-form-control-wrap { display: block; }
.ej-form input[type="text"],
.ej-form input[type="email"],
.ej-form input[type="tel"],
.ej-form textarea {
	display: block; width: 100%; box-sizing: border-box; margin: 0;
	font: inherit; font-size: 16px; color: var(--ej-ink);
	background: #fcfbf7; border: 1px solid #cfc9b8; border-radius: 10px; padding: 12px 14px;
	transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.ej-form textarea { min-height: 150px; line-height: 1.7; resize: vertical; }
.ej-form input::placeholder, .ej-form textarea::placeholder { color: #9a97a8; }
.ej-form input[type="text"]:focus,
.ej-form input[type="email"]:focus,
.ej-form input[type="tel"]:focus,
.ej-form textarea:focus {
	outline: none; background: #fff; border-color: #3744bd; box-shadow: 0 0 0 3px rgba(55, 68, 189, 0.18);
}

/* はい・いいえ（ラジオボタン）：押しやすい丸い選択肢にする */
.ej-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.ej-form .wpcf7-radio .wpcf7-list-item { margin: 0; }
.ej-form .wpcf7-radio label {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 20px 8px 14px;
	background: #fcfbf7; border: 1px solid #cfc9b8; border-radius: 999px; cursor: pointer;
}
.ej-form .wpcf7-radio label:has(input:checked) { background: #eef0fb; border-color: #3744bd; color: var(--ej-navy-deep); font-weight: 700; }
.ej-form input[type="radio"] {
	-webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; flex-shrink: 0;
	border: 2px solid #4b4b4b; border-radius: 50%; background: #fff; cursor: pointer;
}
.ej-form input[type="radio"]:checked { border-color: #3744bd; background: #3744bd; box-shadow: inset 0 0 0 4px #fff; }
.ej-form input[type="radio"]:focus-visible { outline: 2px solid var(--ej-gold-deep); outline-offset: 2px; }

/* 同意・ロボット確認：淡い背景の枠にまとめる。チェックボックスの左端は Turnstile にそろえる */
.ej-form .ej-agree {
	background: var(--ej-paper-soft); border-radius: 12px; padding: 12px 16px 16px; margin: 4px 0 22px;
}
.ej-form .ej-agree .wpcf7-form-control-wrap { display: block; }
.ej-form .ej-agree .wpcf7-turnstile { margin-top: 10px; }

/* 申込ボタン：カードの横幅いっぱい */
.ej-form .ej-actions { position: relative; }
.ej-form input.wpcf7-submit { width: 100%; min-width: 0; margin: 0; }
.ej-form .wpcf7-spinner { position: absolute; right: 16px; top: 50%; margin: -12px 0 0; }

/* 入力エラー・送信結果の表示 */
.ej-form .wpcf7-not-valid { border-color: #b3412f !important; background: #fffafa !important; }
.ej-form .wpcf7-not-valid-tip { color: #b3412f; font-size: 0.85rem; font-weight: 700; margin-top: 6px; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-width: 1px; border-radius: 10px; font-size: 0.95rem; line-height: 1.7; }
.wpcf7 form.sent .wpcf7-response-output { background: #f1f8f1; border-color: #46a35a; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { background: #fff8e5; border-color: #e0b33c; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { background: #fdf0ee; border-color: #d0563f; }

/* スマートフォン：ロボット確認（Turnstile）の枠は幅300pxで縮まないため、
   淡い枠・カードの左右の余白を詰めて、枠からはみ出さないようにする（v0.16.1） */
@media (max-width: 600px) {
	.wpcf7 .ej-form { padding: 22px 16px 20px; border-radius: 12px; }
	.ej-form .ej-agree { padding: 10px 4px 12px; }
}
@media (max-width: 400px) {
	.wpcf7 .ej-form { padding: 20px 10px 18px; }
	.ej-form .ej-agree { padding: 8px 0 10px; }
}