/* =========================================
   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-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;
}

/* =========================================
   ラジオボタン（返信方法）
   ・チップと同じ見た目のトグルにする
========================================= */
.grm-cf-field .wpcf7-radio{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

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

.grm-cf-field .wpcf7-radio .wpcf7-list-item label{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 22px;
	border:1px solid var(--color-border);
	border-radius:var(--radius-full);
	font-size:14px;
	font-weight:300;
	cursor:pointer;
	transition:.2s;
}

.grm-cf-field .wpcf7-radio input[type="radio"]{
	accent-color:var(--color-main);
}

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

/* =========================================
   個人情報保護方針
========================================= */
.grm-cf-privacy{
	margin-top:8px;
	padding:20px 20px 0;
	border:1px solid var(--color-border);
	border-radius:var(--radius-sm);
}

.grm-cf-privacy-title{
	margin:0 0 10px;
	font-size:14px;
	font-weight:400;
}

.grm-cf-privacy-text{
	margin:0;
	font-size:13px;
	line-height:1.9;
	color:var(--color-sub);
}

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

/* =========================================
   同意チェックボックス
========================================= */
.grm-cf-agree{
	margin-top:16px;
	padding:20px 20px 0;
	background:var(--color-gray);
	border-radius:var(--radius-sm);
}

.grm-cf-agree-text{
	margin:0;
	font-size:14px;
	font-weight:400;
	display:flex;
	align-items:center;
	gap:8px;
}

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

/* =========================================
   送信ボタン
   ・[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;
}

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