/*
Theme Name:   Cap Media (帽子選び診断メディア子テーマ)
Theme URI:    -
Description:  京都・大阪 帽子選び診断メディア用 子テーマ。STEP2-1範囲：WordPress基盤・ACF・店舗データ構造。
Author:       -
Template:     twentytwentyone
Version:      0.26.6
Text Domain:  cap-media

【現在のリビジョン】STEP2-1（WordPress基盤・ACF・店舗データ構造）確定版。

【親テーマ確定：Twenty Twenty-One（承認済み・MVPで採用）】
理由（詳細はREADME_STEP2-1.mdを参照）：
1. クラシックテンプレート階層（header.php/footer.php/index.php等）を使う最後期の
   WordPressコア同梱テーマで、フルサイト編集（FSE）のブロックテンプレート機構を持たない。
   診断・店舗一覧・店舗詳細を独自PHPテンプレート（page-diagnosis.php／archive-shop.php／
   single-shop.php等）で作る本サイトの構成と、テンプレート解決の仕組みが完全に一致する。
   Twenty Twenty-Four等のFSEテーマを親にすると、block-templatesとPHPテンプレート階層が
   混在し、診断UIのカスタムテンプレートが期待通り読み込まれない／管理画面の外観エディタで
   意図しない編集ができてしまう等のリスクがある。
2. デザインが極めてミニマルで、デフォルトの装飾CSSが少ない。第9章デザイン仕様（濃紺×
   アイボリー×ゴールド）を上書きしやすく、打ち消すべき既存スタイルが少ない。
3. WordPressコア開発チームが長期メンテナンスを継続している「レガシーデフォルトテーマ」の
   一つで、追加プラグイン無しでコアと一緒に配布・更新される。将来のセキュリティ対応も
   コア更新に追従できる。
4. ページビルダー・独自JSライブラリへの依存がなく、表示速度（第3章）を阻害しない。

診断・店舗一覧・店舗詳細のテンプレートファイル自体はSTEP2-3以降で追加します。
このファイル・functions.php・inc/ 配下は「WordPress基盤・ACF・店舗データ構造」のみを対象としています。
*/

/* ==========================================================================
   Cap Media デザインシステム実装（WordPress実装仕様書 v1.0 第9章・
   Web画面設計書 第2章「デザインシステム」に基づく。数値・配色は変更していない）
   スマホ375pxを最優先のブレークポイントとし、Mobile Firstで記述する。
   ========================================================================== */

:root{
	--cm-navy: #0B2341;
	--cm-gold: #B88A45;
	--cm-ivory: #F7F4EE;
	--cm-white: #FFFFFF;
	--cm-text: #1E2430;
	--cm-text-sub: #666666;
	--cm-radius-card: 14px;
	--cm-radius-btn: 16px;
	--cm-max-width: 1200px;       /* トップ・店舗一覧・店舗詳細用。PC最大幅約1200px（第9章） */
	--cm-max-width-narrow: 600px; /* 診断画面等、読みやすさを優先する狭いコンテナ用 */
}

*, *::before, *::after{ box-sizing:border-box; }

body.cap-media{
	margin:0;
	background:var(--cm-ivory);
	color:var(--cm-text);
	font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
	font-weight:400;
	line-height:1.7;
	font-size:15px;
}

.cm-container{
	max-width:var(--cm-max-width);
	margin:0 auto;
	padding:0 16px;
}
/* 診断画面等、狭いコンテナが必要な場合に使う（STEP2-4以降で使用） */
.cm-container-narrow{
	max-width:var(--cm-max-width-narrow);
	margin:0 auto;
	padding:0 16px;
}
@media (min-width:900px){
	.cm-container{ padding:0 32px; }
}

/* ---- ヘッダー ---- */
.cm-header{
	background:var(--cm-navy);
	position:sticky;
	top:0;
	z-index:100;
}
.cm-header-inner{
	max-width:var(--cm-max-width);
	margin:0 auto;
	padding:12px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
@media (min-width:900px){
	.cm-header-inner{ padding:12px 32px; }
}
.cm-logo{
	color:var(--cm-white);
	font-weight:700;
	font-size:17px;
	text-decoration:none;
	line-height:1.3;
}
.cm-logo span{
	display:block;
	font-weight:400;
	font-size:11px;
	color:#C9D3E0;
}
.cm-nav{
	display:none; /* スマホでは非表示。ハンバーガーメニューはSTEP2-3では簡易実装 */
	gap:20px;
}
.cm-nav a{
	color:var(--cm-white);
	text-decoration:none;
	font-size:14px;
}
.cm-nav-toggle{
	background:none;
	border:1px solid rgba(255,255,255,.4);
	border-radius:8px;
	color:var(--cm-white);
	font-size:13px;
	padding:8px 12px;
	min-height:44px;
}
@media (min-width:600px){
	.cm-nav{ display:flex; }
	.cm-nav-toggle{ display:none; }
}

/* ---- ボタン ---- */
.cm-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:52px;
	padding:14px 24px;
	border-radius:var(--cm-radius-btn);
	font-weight:700;
	font-size:16px;
	text-decoration:none;
	text-align:center;
	width:100%;
	border:2px solid transparent;
}
.cm-btn-primary{
	background:var(--cm-navy);
	color:var(--cm-white);
}
.cm-btn-secondary{
	background:var(--cm-white);
	color:var(--cm-navy);
	border-color:var(--cm-navy);
}
/* ヒーロー（濃紺背景）内の主役CTA専用。デザインシステムのアクセント色
   （ゴールド）を使い、濃紺背景の上で最も目立つ配色にする。
   デザイン方針（濃紺×アイボリー×ゴールド）自体は変更していない。
   ヒーロー以外（白・アイボリー背景）の主CTAは引き続き cm-btn-primary
   （濃紺）を使用する。 */
.cm-btn-accent{
	background:var(--cm-gold);
	color:var(--cm-navy);
	border-color:var(--cm-gold);
}
.cm-btn-note{
	display:block;
	text-align:center;
	font-size:12px;
	color:var(--cm-text-sub);
	margin-top:6px;
}
/* 【STEP2-6】Googleマップ・公式サイトへの短い導線ボタン用の小型モディファイア */
.cm-btn-small{
	width:auto;
	min-height:auto;
	padding:8px 14px;
	font-size:12px;
}

/* ---- ファーストビュー ---- */
.cm-hero{
	background:linear-gradient(180deg, rgba(11,35,65,.88), rgba(11,35,65,.88)), var(--cm-navy);
	color:var(--cm-white);
	padding:40px 0 32px;
}
.cm-hero h1{
	font-size:26px;
	line-height:1.4;
	font-weight:700;
	margin:0 0 16px;
}
.cm-hero-lead{
	font-size:15px;
	color:#E5E9F0;
	margin:0 0 24px;
}
.cm-hero-values{
	list-style:none;
	margin:24px 0 0;
	padding:0;
	display:grid;
	gap:10px;
}
.cm-hero-values li{
	background:rgba(255,255,255,.08);
	border-radius:12px;
	padding:10px 14px;
	font-size:13px;
}

/* ---- セクション共通 ---- */
.cm-section{ padding:32px 0; }
.cm-section h2{
	font-size:20px;
	font-weight:700;
	color:var(--cm-navy);
	margin:0 0 16px;
}

/* ---- 悩みリスト ---- */
.cm-worry-list{
	list-style:none;
	margin:0 0 20px;
	padding:0;
	display:grid;
	gap:10px;
}
.cm-worry-list li{
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	padding:14px 16px;
	font-size:14px;
	box-shadow:0 1px 3px rgba(11,35,65,.08);
}

/* ---- STEP（使い方） ---- */
.cm-steps{
	list-style:none;
	margin:0;
	padding:0;
	counter-reset:cm-step;
	display:grid;
	gap:14px;
}
.cm-steps li{
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	padding:16px;
	position:relative;
	padding-left:52px;
}
.cm-steps li::before{
	counter-increment:cm-step;
	content:counter(cm-step);
	position:absolute;
	left:14px;
	top:14px;
	width:28px;
	height:28px;
	border-radius:50%;
	background:var(--cm-gold);
	color:var(--cm-white);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	font-size:14px;
}
.cm-steps .cm-step-title{ font-weight:700; margin:0 0 4px; }
.cm-steps .cm-step-note{ font-size:12px; color:var(--cm-text-sub); margin:0; }

/* ---- 注意書き ---- */
.cm-notice{
	background:#FFF7E8;
	border-left:4px solid var(--cm-gold);
	border-radius:8px;
	padding:14px 16px;
	font-size:13px;
	color:var(--cm-text-sub);
}

/* ---- エリアカード ---- */
.cm-area-links{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
}
.cm-area-links a{
	display:block;
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	padding:20px 12px;
	text-align:center;
	text-decoration:none;
	color:var(--cm-navy);
	font-weight:700;
	box-shadow:0 1px 3px rgba(11,35,65,.08);
}
/* 【STEP2-6】都道府県ページ内の子エリア絞り込みチップ（親リンクより控えめに） */
.cm-area-links-sub{
	grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
}
.cm-area-links-sub a{
	padding:10px 8px;
	font-size:13px;
	font-weight:400;
}

/* ---- 店舗カード ---- */
.cm-shop-grid{
	display:grid;
	gap:16px;
}
.cm-shop-card{
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	overflow:hidden;
	box-shadow:0 1px 4px rgba(11,35,65,.10);
}


.cm-shop-card{ position:relative; }
.cm-shop-card-badges{
	position:absolute;
	top:8px;
	left:8px;
	z-index:1;
}
.cm-recommend-badge{
	display:inline-block;
	background:var(--cm-white);
	color:var(--cm-navy);
	border:1px solid var(--cm-navy);
	font-size:11px;
	font-weight:700;
	border-radius:4px;
	padding:3px 8px;
	line-height:1.4;
}

/* ---- スポンサー枠（STEP2-10） ---- */
/* 通常の店舗カードと同じデザインシステム（濃紺×アイボリー×ゴールド）を使い、
   派手なバナー広告にならないよう、ゴールドの細い左ボーダーのみで区別する。 */
.cm-sponsor-section{
	margin-bottom:24px;
}
.cm-sponsor-section-label{
	font-size:12px;
	font-weight:700;
	color:var(--cm-text-sub);
	letter-spacing:.05em;
	margin:0 0 8px;
}
.cm-sponsor-grid{
	display:grid;
	gap:16px;
}
.cm-sponsor-card{
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	overflow:hidden;
	box-shadow:0 1px 4px rgba(11,35,65,.10);
	border-left:3px solid var(--cm-gold);
	position:relative;
}
.cm-sponsor-card-link{
	text-decoration:none;
	color:inherit;
	display:block;
}
.cm-sponsor-card-badges{
	position:absolute;
	top:8px;
	left:8px;
	display:flex;
	gap:6px;
	z-index:1;
}
.cm-sponsor-badge{
	background:var(--cm-gold);
	color:var(--cm-navy);
	font-size:11px;
	font-weight:700;
	border-radius:4px;
	padding:3px 8px;
	line-height:1.4;
}
.cm-sponsor-badge-recommend{
	background:var(--cm-white);
	color:var(--cm-navy);
	border:1px solid var(--cm-navy);
}
.cm-sponsor-card-media{
	background:var(--cm-ivory);
	aspect-ratio:4/3;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#B9C0CC;
	font-size:12px;
	overflow:hidden;
}
.cm-sponsor-card-media img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.cm-sponsor-card-body{ padding:14px 16px; }
.cm-sponsor-card-blurb{
	font-size:13px;
	color:var(--cm-text-sub);
	margin:4px 0 0;
	line-height:1.6;
}
/* 【STEP2-6】カード自体は<a>ではなく<div>にし、内側の.cm-shop-card-linkが
   詳細ページへのメインリンクを担う（クイックリンクとの入れ子回避のため）。 */
.cm-shop-card-link{
	text-decoration:none;
	color:inherit;
	display:block;
}
.cm-shop-card-quicklinks{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	padding:0 16px 14px;
}
.cm-shop-card-media{
	background:var(--cm-ivory);
	aspect-ratio:4/3;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#B9C0CC;
	font-size:12px;
}
.cm-shop-card-body{ padding:14px 16px; }
.cm-shop-card-area{
	display:inline-block;
	font-size:11px;
	color:var(--cm-gold);
	font-weight:700;
	margin-bottom:4px;
}
.cm-shop-card-name{
	font-size:16px;
	font-weight:700;
	color:var(--cm-navy);
	margin:0 0 6px;
}
.cm-shop-card-stars{ color:var(--cm-gold); font-size:14px; }
.cm-shop-card-persona{
	font-size:13px;
	color:var(--cm-text-sub);
	margin:6px 0 0;
}

/* ---- 店舗詳細 ---- */
.cm-breadcrumb{
	font-size:12px;
	color:var(--cm-text-sub);
	margin:16px 0;
}
.cm-breadcrumb a{ color:var(--cm-text-sub); }
.cm-shop-hero{
	background:var(--cm-ivory);
	border-radius:var(--cm-radius-card);
	overflow:hidden;
	margin-bottom:20px;
}
.cm-shop-hero-media{
	aspect-ratio:16/9;
	background:linear-gradient(135deg,#E7ECF2,#F7F4EE);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#AEB6C2;
	font-size:13px;
}
.cm-shop-hero-body{ padding:18px 18px 20px; }
.cm-shop-hero-area{ color:var(--cm-gold); font-weight:700; font-size:12px; }
.cm-shop-hero h1{ font-size:22px; margin:6px 0 8px; color:var(--cm-navy); }
.cm-shop-hero-catch{ font-size:13px; color:var(--cm-text-sub); margin:0; }

.cm-info-table{
	width:100%;
	border-collapse:collapse;
	font-size:13px;
	margin:0 0 8px;
}
.cm-info-table th{
	text-align:left;
	color:var(--cm-text-sub);
	font-weight:500;
	padding:10px 8px;
	width:34%;
	vertical-align:top;
	border-bottom:1px solid #E7ECF2;
}
.cm-info-table td{
	padding:10px 8px;
	border-bottom:1px solid #E7ECF2;
	vertical-align:top;
}
.cm-tag-list{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}
.cm-tag{
	background:var(--cm-ivory);
	color:var(--cm-navy);
	font-size:11px;
	font-weight:700;
	border-radius:999px;
	padding:5px 10px;
}
/* 【STEP2-5修正2】診断で一致した理由（.cm-tag）と、その他の実データ上の
   強み（.cm-tag-strength）を色分けして区別する。 */
.cm-tag-strength{
	background:transparent;
	border:1px solid var(--cm-navy);
	font-weight:400;
}
.cm-tag-group-label{
	font-size:11px;
	color:var(--cm-text-sub);
	margin:8px 0 4px;
}
/* 【STEP2-7】ガイド記事の組み合わせページへリンクする「こんな人に
   おすすめ」タグ。通常のタグ（span）と見た目を揃えつつ、リンクだと
   分かるよう下線を付ける。 */
.cm-tag-link{
	text-decoration:underline;
	cursor:pointer;
}
/* 【STEP2-7】ガイド記事（single-guide.php）のエリア別バリエーション見出し */
.cm-guide-area-suffix{
	font-size:16px;
	font-weight:400;
	color:var(--cm-text-sub);
}
.cm-guide-content{
	margin:16px 0 24px;
	line-height:1.8;
}
.cm-strength-list{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:8px;
}
.cm-strength-list li{
	font-size:13px;
	padding-left:18px;
	position:relative;
}
.cm-strength-list li::before{
	content:"・";
	position:absolute;
	left:0;
}
.cm-cta-stack{
	display:grid;
	gap:10px;
	margin:20px 0;
}
.cm-empty-note{
	font-size:12px;
	color:#9AA1AC;
	font-style:italic;
}

/* ---- フッター ---- */
.cm-footer{
	background:var(--cm-navy);
	color:#C9D3E0;
	padding:28px 0;
	margin-top:40px;
	font-size:12px;
}
.cm-footer a{ color:#C9D3E0; }
.cm-footer-links{
	display:flex;
	flex-wrap:wrap;
	gap:12px 16px;
	margin:0 0 12px;
	padding:0;
	list-style:none;
}

/* ---- PC（タブレット・デスクトップ）レイアウト調整 ---- */
@media (min-width:600px){
	.cm-hero h1{ font-size:32px; }
	.cm-shop-grid{ grid-template-columns:1fr 1fr; }
	.cm-sponsor-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
	.cm-hero h1{ font-size:38px; }
	.cm-hero-lead{ font-size:16px; max-width:640px; }
	.cm-hero-values{ grid-template-columns:repeat(3, 1fr); }
	.cm-shop-grid{ grid-template-columns:repeat(3, 1fr); }
	.cm-sponsor-grid{ grid-template-columns:repeat(3, 1fr); }
	.cm-area-links{ max-width:480px; }
	/* PCではヒーロー内CTAを横並びにし、中央寄せの広がり過ぎを防ぐ */
	.cm-hero .cm-btn{ width:auto; min-width:260px; }
}
@media (min-width:1200px){
	.cm-shop-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* ---- モバイルナビ（ハンバーガー展開） ---- */
.cm-mobile-nav{
	background:var(--cm-navy);
	border-top:1px solid rgba(255,255,255,.12);
}
.cm-mobile-nav[hidden]{ display:none; }
.cm-mobile-nav a{
	display:block;
	color:var(--cm-white);
	text-decoration:none;
	padding:14px 0;
	font-size:15px;
	border-bottom:1px solid rgba(255,255,255,.08);
}
@media (min-width:600px){
	.cm-mobile-nav{ display:none !important; }
}

/* ==========================================================================
   診断・結果画面（STEP2-4）
   ========================================================================== */

.cm-diagnosis-section, .cm-result-section{ padding-top:20px; }

.cm-diag-card{
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	padding:20px 18px 24px;
	box-shadow:0 1px 4px rgba(11,35,65,.08);
}
.cm-diag-progress{
	display:flex;
	align-items:center;
	justify-content:space-between;
	font-size:12px;
	color:var(--cm-text-sub);
	margin-bottom:16px;
}
.cm-diag-progress span{ font-weight:700; color:var(--cm-navy); }
.cm-diag-back, .cm-diag-quit{
	background:none;
	border:none;
	color:var(--cm-text-sub);
	font-size:12px;
	text-decoration:underline;
	padding:6px 0;
	cursor:pointer;
}
.cm-diag-back:disabled{ visibility:hidden; }

.cm-diag-title{
	font-size:19px;
	font-weight:700;
	color:var(--cm-navy);
	margin:0 0 8px;
}
.cm-diag-sub{
	font-size:13px;
	color:var(--cm-text-sub);
	margin:0 0 16px;
}
.cm-diag-options{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-bottom:20px;
}
.cm-diag-option{
	min-height:64px;
	background:var(--cm-ivory);
	border:2px solid transparent;
	border-radius:var(--cm-radius-card);
	padding:12px;
	font-size:14px;
	font-weight:500;
	color:var(--cm-text);
	cursor:pointer;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
}
.cm-diag-option.is-selected{
	background:#EAF0F8;
	border-color:var(--cm-navy);
	color:var(--cm-navy);
	font-weight:700;
}
.cm-diag-next{ width:100%; }
.cm-diag-next:disabled{ opacity:.4; cursor:not-allowed; }

.cm-diag-loading{
	text-align:center;
	padding:60px 20px;
	color:var(--cm-navy);
	font-weight:700;
}

/* ---- 結果画面 ---- */
.cm-result-heading{ display:inline-block; font-size:22px; color:var(--cm-navy); margin:0; }
.cm-result-restart{ float:right; font-size:12px; color:var(--cm-text-sub); text-decoration:underline; }
.cm-result-type{
	font-size:20px;
	font-weight:700;
	color:var(--cm-navy);
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	padding:16px;
	margin:8px 0 16px;
}
.cm-hat-candidates{
	display:grid;
	gap:10px;
	margin-bottom:20px;
}
.cm-hat-candidate{
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	padding:14px 16px;
}
.cm-hat-candidate-title{ font-weight:700; color:var(--cm-navy); margin:0 0 4px; }
.cm-hat-candidate-desc{ font-size:13px; color:var(--cm-text-sub); margin:0; }

.cm-rank-grid{
	display:grid;
	gap:14px;
	margin-bottom:20px;
}
.cm-rank-card{
	display:block;
	background:var(--cm-white);
	border-radius:var(--cm-radius-card);
	padding:16px;
	color:inherit;
	box-shadow:0 1px 4px rgba(11,35,65,.1);
	position:relative;
}
.cm-rank-badge{
	display:inline-block;
	color:var(--cm-white);
	font-size:12px;
	font-weight:700;
	border-radius:999px;
	padding:4px 12px;
	margin-bottom:8px;
}
.cm-rank-gold .cm-rank-badge{ background:#C9A227; }
.cm-rank-silver .cm-rank-badge{ background:#9AA1AC; }
.cm-rank-bronze .cm-rank-badge{ background:#B08D57; }
/* 【STEP2-6】cm-rank-nameは店舗詳細への個別リンク（<a>）になった */
.cm-rank-name{
	display:block;
	font-size:17px;
	font-weight:700;
	color:var(--cm-navy);
	margin:2px 0 6px;
	text-decoration:none;
}
.cm-rank-quicklinks{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:10px;
}
.cm-rank-cta{ display:block; margin-top:12px; text-align:center; }

@media (min-width:600px){
	.cm-diag-card{ padding:28px; }
}

/* ---- あなたとの相性（STEP2-5・診断結果経由の来訪時のみ表示） ---- */
.cm-shop-affinity{
	font-size:14px;
	font-weight:700;
	color:var(--cm-navy);
	background:var(--cm-ivory);
	border-radius:10px;
	padding:8px 12px;
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:10px 0 6px;
}

/* ==========================================================================
   STEP2-12：固定ページ（運営者情報／情報確認について／プライバシーポリシー／
   免責事項／お問い合わせ）共通スタイル＋お問い合わせフォーム。
   既存のデザインシステム（濃紺×アイボリー×ゴールド、CSS変数・cm-container-narrow・
   cm-btn等）をそのまま踏襲しており、新しい配色・変数は追加していない。
   ========================================================================== */
.cm-static-page{ padding:8px 0 40px; }
.cm-static-page h1{
	font-size:22px;
	font-weight:700;
	color:var(--cm-navy);
	margin:0 0 20px;
}
.cm-static-page h2{
	font-size:17px;
	font-weight:700;
	color:var(--cm-navy);
	margin:28px 0 10px;
}
.cm-static-page p{ margin:0 0 14px; line-height:1.8; }
.cm-static-page ul{ margin:0 0 14px; padding-left:1.3em; line-height:1.8; }
.cm-static-page li{ margin-bottom:6px; }
.cm-static-page a{ color:var(--cm-navy); text-decoration:underline; }
.cm-static-unset{ color:var(--cm-text-sub); font-style:italic; }
.cm-static-note{ font-size:12px; color:var(--cm-text-sub); }

/* ---- お問い合わせフォーム ---- */
.cm-status-banner{
	border-radius:10px;
	padding:12px 14px;
	margin:0 0 20px;
	font-size:14px;
	line-height:1.7;
}
.cm-status-success{
	background:#EAF5EC;
	border:1px solid #B7DDBE;
	color:#256029;
}
.cm-status-error{
	background:#FBEAEA;
	border:1px solid #E0B4B4;
	color:#A94442;
}
.cm-contact-form{ margin-top:8px; }
.cm-field{ margin:0 0 18px; }
.cm-label{
	display:block;
	font-weight:700;
	font-size:14px;
	color:var(--cm-navy);
	margin-bottom:6px;
}
.cm-required{
	display:inline-block;
	font-size:11px;
	font-weight:700;
	color:var(--cm-white);
	background:var(--cm-navy);
	border-radius:4px;
	padding:1px 6px;
	margin-left:6px;
	vertical-align:middle;
}
.cm-input,
.cm-select,
.cm-textarea{
	width:100%;
	max-width:100%;
	box-sizing:border-box;
	font-size:16px; /* iOSでの入力時自動ズームを防止 */
	padding:12px 14px;
	border:1px solid #C9CDD3;
	border-radius:10px;
	background:var(--cm-white);
	color:var(--cm-text);
}
.cm-textarea{ resize:vertical; min-height:140px; }
.cm-input:focus,
.cm-select:focus,
.cm-textarea:focus{
	outline:2px solid var(--cm-gold);
	outline-offset:1px;
}
.cm-field-hint{
	font-size:12px;
	color:var(--cm-text-sub);
	margin:-10px 0 18px;
}
.cm-field-checkbox .cm-checkbox-label{
	display:flex;
	align-items:flex-start;
	gap:8px;
	font-size:14px;
	line-height:1.6;
}
.cm-field-checkbox input[type="checkbox"]{
	width:20px;
	height:20px;
	flex:0 0 auto;
	margin-top:2px;
}
.cm-contact-form .cm-btn{ margin-top:6px; }

/* honeypot：通常の利用者には見えないようにする。display:noneは一部の
   支援技術・ブラウザ自動入力と相性が悪い場合があるため、視覚的にのみ
   隠すオフスクリーン手法を使う（tabindex="-1"と併用しキーボード操作の
   タブ順からも外している）。 */
.cm-hp-field{
	position:absolute !important;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	left:-9999px;
}