/* =========================================
   Contact Form 7 / お問い合わせフォーム
   ・サイト全体の「細い」トーンに合わせて、
   　Bootstrap系の旧クラス（row/col-*/b/requiredMail等）から
   　テーマ独自のクラスに置き換えたもの。
   ・フィールド名・タイプ（CF7側のタグ）は変更していないので、
   　メールテンプレート・確認画面連携（grm-cf-confirm）とも
   　そのまま連携できる。
========================================= */

/* =========================================
   ページ全体：左に説明文、右にフォーム
========================================= */
.grm-cf-page{
	display:grid;
	grid-template-columns:1fr;
	gap:60px;
	margin-top:40px;
}
@media(min-width:768px){
	.grm-cf-page{
		display:grid;
		grid-template-columns:320px 1fr;
		gap:100px;
		margin-top:40px;
	}
}

/* =========================================
   左：説明文
========================================= */
.grm-cf-intro{
	display:flex;
	flex-direction:column;
	gap:24px;
	/* 以前はPC幅でposition:stickyを使い、右のフォームを
	   スクロールしても左の説明文が画面上部に張り付いたまま
	   残る作りにしていたが、フォームが長いページだと
	   スクロールするにつれ左右の開始位置がどんどんズレて
	   見えてしまうため撤去。左右とも通常のグリッド項目として
	   一緒にスクロールさせ、常に上端が揃うようにする。 */
}

/* キャッチコピー */
.grm-page-content .grm-cf-catch{
	margin:0;
	font-size:clamp(22px, 2vw, 28px);
	font-weight:600;
	line-height:1.6;
	letter-spacing:.04em;
	color:var(--color-main);
}

.grm-cf-intro-text{
	margin:0;
	font-size:14px;
	line-height:2;
	font-weight:300;
	color:var(--color-text);
}

/* 左側の説明文（.grm-cf-intro-text）は固定ページの編集画面側で
   本文の先頭に空行（<br>）が入っており、そのままだと1行分
   下がった位置から文章が始まってしまい、右側フォームの
   1つ目のラベルと視覚的に高さが揃わなくなる。
   編集画面の本文を直接触らなくても揃うよう、先頭の空行だけ
   CSS側で無効化しておく。 */
.grm-cf-intro-text br:first-child{
	display:none;
}

.grm-cf-notes{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.grm-cf-notes-item{
	margin:0;
	font-size:12px;
	line-height:1.9;
	font-weight:300;
	color:var(--color-sub);
	display:flex;
	align-items:flex-start;
	gap:6px;
}

.grm-cf-intro .grm-cf-privacy-link{
	font-size:13px;
	color:var(--color-main);
	text-decoration:underline;
	align-self:flex-start;
}

/* =========================================
   右：フォーム本体
========================================= */
.grm-cf-form{
	display:flex;
	flex-direction:column;
}

/* =========================================
   1項目分の行
========================================= */
.grm-cf-row{
	margin-bottom:8px;
}

.grm-cf-label{
	display:flex;
	align-items:center;
	gap:8px;
	margin-bottom:10px;
	font-size:14px;
	font-weight:400;
	letter-spacing:.04em;
	color:var(--color-text);
}

/* =========================================
   必須／確認 バッジ
========================================= */
.grm-cf-badge{
	display:inline-block;
	padding:2px 10px;
	font-size:11px;
	font-weight:400;
	letter-spacing:.05em;
	border-radius:var(--radius-full);
	line-height:1.6;
	flex:none;
}

.grm-cf-badge-required{
	background:var(--color-main);
	color:#fff;
}

.grm-cf-badge-confirm{
	background:transparent;
	color:var(--color-sub);
	border:1px solid var(--color-border);
}

/* =========================================
   入力欄共通
   ・text / email / tel / select / textarea
========================================= */
.grm-cf-field .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio){
	display:block;
	width:100%;
	padding:14px 18px;
	border:1px solid var(--color-border);
	border-radius:var(--radius-sm);
	background-color:#fff;
	font-family:var(--font-base);
	font-size:14px;
	font-weight:300;
	color:var(--color-text);
	transition:.2s;
}

.grm-cf-field textarea.wpcf7-form-control{
	line-height:1.9;
	resize:vertical;
}

.grm-cf-field .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):focus{
	outline:none;
	border-color:var(--color-main);
}

.grm-cf-field select.wpcf7-form-control{
	appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-position:right 20px center;
	background-size:24px;
	background-repeat:no-repeat;
	padding-right:44px !important;
}

/* =========================================
   送信ボタン
   ・[submit class:button "送信"] としているため、
   　サイト共通の .button（ピル型）がそのまま適用される。
   　input[type=submit] のデフォルト装飾だけ打ち消す。
========================================= */
.grm-cf-submit{
	margin-top:48px;
	text-align:center;
}

.grm-cf-submit .button{
	border:none;
	cursor:pointer;
	font-family:var(--font-base);
	font-size:16px;
	font-weight:400;
}

.grm-cf-submit .wpcf7-spinner{
	display:block;
	margin:16px auto 0;
}

/* =========================================
   エラーメッセージ
   ・CF7標準の枠線付きバルーンをやめて、
   　サイトのトーンに合わせて赤文字のみに
========================================= */
.grm-cf-field .wpcf7-not-valid-tip{
	display:block;
	margin-top:6px;
	font-size:12px;
	color:#d33;
}

.wpcf7-response-output{
	margin:32px 0 0 !important;
	padding:16px 20px !important;
	border-radius:var(--radius-sm) !important;
	font-size:16px !important;
}

/* =========================================
   GRM CF Confirm（確認画面）
   ・プラグイン本体（frontend.css）が四角い黒／グレーの
   　ボタンを標準で当てているため、サイト共通の
   　ピル型ボタン（.button / .button-outline）に
   　テーマ側から上書きする。プラグインのCSSより後に
   　読み込まれるよう functions.php でform.cssの
   　enqueue順を管理しているが、念のため詳細度を
   　少し上げて確実に上書きする。
   ・GRM CF Confirmが有効な場合、実際の送信は
   　「確認画面へ」→モーダル内の「送信」の流れで行われ、
   　フォーム本体側の元の[submit]ボタンは使われない
   　（クリックしても確認前のバリデーションを通らない）。
   　それにも関わらず元のボタンがそのまま
   　スタイル無し（グレー）で表示され続けていたため、
   　.grm-cf-confirm-wrap内でのみ非表示にする
   　（[response]は元々プラグイン側CSSで非表示済みのため
   　　このボタンだけ消しても問題ない）。
========================================= */
.grm-cf-confirm-wrap .grm-cf-submit .wpcf7-submit{
	display:none;
}

.grm-cf-confirm-actions .grm-cf-confirm-open,
.grm-cf-confirm-actions .grm-cf-confirm-submit{
	display:inline-block;
	min-height:0;
	padding:15px 48px;
	background:var(--color-main);
	color:#fff;
	border:none;
	border-radius:var(--radius-full);
	font-family:var(--font-base);
	font-size:14px;
	font-weight:400;
	line-height:1.4;
	transition:.3s;
}

.grm-cf-confirm-actions .grm-cf-confirm-open:hover,
.grm-cf-confirm-actions .grm-cf-confirm-submit:hover{
	opacity:.8;
}

.grm-cf-confirm-actions .grm-cf-confirm-back{
	display:inline-block;
	min-height:0;
	padding:15px 48px;
	background:transparent;
	color:var(--color-main);
	border:1px solid var(--color-main);
	border-radius:var(--radius-full);
	font-family:var(--font-base);
	font-size:14px;
	font-weight:400;
	line-height:1.4;
	transition:.3s;
}

.grm-cf-confirm-actions .grm-cf-confirm-back:hover{
	background:var(--color-main);
	color:#fff;
}

.grm-cf-confirm-actions{
	justify-content:center;
}

/* 確認画面の項目名につく必須／確認バッジ
   （テキスト自体はcf-confirm-enhance.jsが組み替える） */
.grm-cf-confirm-name{
	display:flex;
	align-items:center;
	gap:8px;
}

/* =========================================
   レイアウト（2026-09 作り直し）
   ・各行：左に番号（01〜）・項目名・英語表記（右揃え）、右に入力欄。
   ・項目の区切り罫線はなし。
   ・入力欄は薄いグレーの背景＋少しだけ角丸。
   　フォーカスで下線が左から黒く伸びる。
========================================= */
.grm-cf-form{
	counter-reset:grm-cf;
}

.grm-cf-row{
	counter-increment:grm-cf;
	margin:0;
	padding:20px 0;
}

/* 1行目は上の余白を無くし、左の説明文と上端を揃える */
.grm-cf-form > .grm-cf-row:first-child,
.grm-cf-form .grm-cf-row.cf-error-check:first-child{
	padding-top:0;
}

/* CF7の自動整形で <p> が挟まることがあるため、
   「項目名（.grm-cf-label）を直下に持つ要素」を2カラムにする */
.grm-page-content .grm-cf-row p{
	margin:0;
}

/* 各行：上に「項目名＋バッジ／英語表記」と右端に番号、
   その下に左右いっぱいの入力欄 */
.grm-cf-row :has(> .grm-cf-label){
	display:block;
}

.grm-cf-label{
	display:grid;
	grid-template-columns:auto auto 1fr auto;
	grid-template-areas:
		"title badge . num"
		"en    en    . num";
	align-items:center;
	gap:4px 10px;
	margin:0 0 12px;
	font-size:15px;
	font-weight:500;
}

.grm-cf-label .cf-title{
	grid-area:title;
}

.grm-cf-label .grm-cf-badge{
	grid-area:badge;
	justify-self:start;
}

.grm-cf-label::before{
	content:counter(grm-cf, decimal-leading-zero);
	grid-area:num;
	align-self:end;
	font-size:32px;
	font-weight:100;
	line-height:1;
	letter-spacing:.02em;
	color:var(--color-sub);
}

.grm-cf-en{
	grid-area:en;
	font-size:11px;
	font-weight:300;
	letter-spacing:.08em;
	color:var(--color-sub);
}

/* 入力欄：薄いグレー背景＋少しだけ角丸。
   フォーカスで下端の黒い線が左から伸びる */
.grm-cf-field .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio){
	padding:14px 16px;
	border:none;
	border-radius:4px;
	background:
		linear-gradient(var(--color-main), var(--color-main)) left bottom / 0 1px no-repeat,
		#f3f4f6;
	font-size:16px;
	transition:background-size .5s cubic-bezier(.2,.7,.2,1);
}

.grm-cf-field .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):focus{
	background-size:100% 1px, auto;
}

.grm-cf-field textarea.wpcf7-form-control{
	height:180px;
}

.grm-cf-field ::placeholder{
	color:#8e8e96;
	opacity:1;
}

/* =========================================
   お問い合わせの種類
   ・カードを縦に並べ、左に丸いラジオ。
   　選択中は枠線を黒に。背景は入力欄と同じ薄いグレー。
========================================= */
.grm-cf-field .wpcf7-radio{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.grm-cf-field .wpcf7-radio .wpcf7-list-item{
	display:block;
	margin:0;
}

.grm-cf-field .wpcf7-radio .wpcf7-list-item label{
	display:flex;
	align-items:center;
	gap:14px;
	width:100%;
	padding:16px 18px;
	background:#f3f4f6;
	border:1px solid transparent;
	border-radius:4px;
	font-size:14px;
	font-weight:400;
	cursor:pointer;
	transition:border-color .2s;
}

.grm-cf-field .wpcf7-radio .wpcf7-list-item label:hover{
	border-color:var(--color-border);
}

.grm-cf-field .wpcf7-radio input[type="radio"]{
	appearance:none;
	flex:none;
	width:18px;
	height:18px;
	margin:0;
	border:1px solid var(--color-border);
	border-radius:50%;
	background:#fff;
	cursor:pointer;
	transition:.2s;
}

.grm-cf-field .wpcf7-radio input[type="radio"]:checked{
	border-color:var(--color-main);
	box-shadow:inset 0 0 0 4px #fff;
	background:var(--color-main);
}

.grm-cf-field .wpcf7-radio .wpcf7-list-item label:has(input:checked){
	border-color:var(--color-main);
}

/* =========================================
   個人情報の取り扱い＋同意チェック
   ・グレーの箱に説明文（白い箱）と同意欄をまとめる。
   ・プライバシーポリシーへのリンクは data-grm-popup 付きで、
   　popup.js によりページを離れずにポップアップ表示する。
   ・箱全体を .cf-field にして、未チェック時は
   　GRM CF Confirm のエラー一覧に
   　「プライバシーポリシーへの同意」として出す
   　（cf-confirm-hide で確認画面には出さない）。
========================================= */
.grm-cf-privacy{
	margin-top:32px;
	padding:clamp(24px,4vw,40px);
	background:#edeef2;
	border-radius:16px;
}

.grm-page-content .grm-cf-privacy .grm-cf-privacy-title{
	margin:0 0 6px;
	font-size:18px;
	font-weight:500;
	letter-spacing:.04em;
}

.grm-page-content .grm-cf-privacy .grm-cf-privacy-lead{
	margin:0 0 20px;
	font-size:13px;
	font-weight:400;
}

.grm-cf-privacy-text{
	padding:24px 28px;
	background:#fff;
}

.grm-page-content .grm-cf-privacy .grm-cf-privacy-text p{
	margin:0;
	font-size:13px;
	line-height:2;
	font-weight:400;
}

.grm-page-content .grm-cf-privacy .grm-cf-privacy-text p + p{
	margin-top:8px;
}

.grm-cf-privacy-link{
	color:var(--color-main);
	text-decoration:underline;
	text-underline-offset:3px;
}

.grm-cf-privacy-link:hover{
	opacity:.6;
}

.grm-cf-agree{
	margin-top:24px;
	padding-top:24px;
	border-top:1px solid rgba(0,0,0,.08);
	text-align:center;
}

.grm-page-content .grm-cf-privacy .grm-cf-agree p{
	margin:0;
}

.grm-cf-agree .wpcf7-list-item{
	margin:0;
}

.grm-cf-agree .wpcf7-list-item label{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-size:14px;
	font-weight:500;
	cursor:pointer;
}

.grm-cf-agree .wpcf7-acceptance input[type="checkbox"]{
	width:18px;
	height:18px;
	margin:0;
	accent-color:var(--color-main);
}

/* 送信（確認画面へ）：右の入力欄の頭に揃えた大きなボタン。
   ボタンは cf-confirm-enhance.js で .grm-cf-form の末尾へ移動。
   元の[submit]は非表示なので入れ物ごと消す */
.grm-cf-confirm-wrap .grm-cf-submit{
	display:none;
}

.grm-cf-form > .grm-cf-confirm-actions{
	display:block;
	margin-top:56px;
	text-align:center;
}

.grm-cf-form > .grm-cf-confirm-actions .grm-cf-confirm-open{
	display:inline-flex;
	align-items:center;
	gap:20px;
	padding:24px 40px 24px 60px;
	font-size:15px;
	font-weight:500;
	letter-spacing:.08em;
	border:1px solid var(--color-main);
	transition:background .3s, color .3s;
}

.grm-cf-form > .grm-cf-confirm-actions .grm-cf-confirm-open::after{
	content:"→";
	font-weight:300;
	transition:transform .3s;
}

.grm-cf-form > .grm-cf-confirm-actions .grm-cf-confirm-open:hover{
	opacity:1;
	background:#fff;
	color:var(--color-main);
}

.grm-cf-form > .grm-cf-confirm-actions .grm-cf-confirm-open:hover::after{
	transform:translateX(6px);
}

/* エラー表示：プラグイン標準の赤い太枠を、下線・文字色だけに */
.grm-cf-form .cf-error-field{
	border:none !important;
	box-shadow:inset 0 -1px 0 #d33;
	background-color:#fbeff0 !important;
}

/* エラー一覧：ピンクの箱をやめて、左の赤い線と文字だけに */
.grm-cf-confirm-wrap .cf-error-summary{
	margin-bottom:48px;
	padding:4px 0 4px 20px;
	border:none;
	border-left:2px solid #d33;
	border-radius:0;
	background:none;
}

.grm-cf-confirm-wrap .cf-error-summary-title{
	font-size:14px;
	font-weight:500;
}

.grm-cf-confirm-wrap .cf-error-summary-list{
	padding:0;
	list-style:none;
}

.grm-cf-confirm-wrap .cf-error-summary-list li{
	margin:0;
	font-size:13px;
}

.grm-cf-form .grm-cf-row.cf-error-check{
	padding:20px 0;
	border:none !important;
	border-radius:0;
	background:none !important;
}

.grm-cf-form .grm-cf-privacy.cf-error-check{
	padding:clamp(24px,4vw,40px);
	border:1px solid #d33 !important;
	border-radius:16px;
	background:#edeef2 !important;
}

.grm-cf-form .cf-error-check .wpcf7-list-item label{
	color:#d33;
}

.grm-cf-form .cf-error-check input{
	border-color:#d33 !important;
}

@media(max-width:767px){
	.grm-cf-row,
	.grm-cf-form .grm-cf-row.cf-error-check{
		padding:16px 0;
	}
	.grm-cf-label::before{
		font-size:26px;
	}
}

/* =========================================
   SP
   ・.grm-cf-page のdisplay:gridが環境によって
   　効かない場合があるため、gap任せにせず
   　左ブロックの下に固定マージンを保険で入れておく
   　（display:gridが正しく効いている場合でも、
   　　単に見た目上の余白が少し増えるだけで問題ない）。
========================================= */
@media(max-width:767px){
	.grm-cf-intro{
		margin-bottom:60px;
	}
	.grm-cf-row{
		margin-bottom:24px;
	}
}