/* =========================================================
   固定ページ汎用（page.php）
   タイトル＋本文を l-narrow 幅で中央寄せ。上下に余白。
   フォーム個別スタイル（.form/.required/.submit-btn 等）は別途。
   ========================================================= */

.page-article {
	padding: 80px 0 96px; /* ヘッダー/フッターから上下に離す */
	background: var(--bg-studio); /* page / archive / 404 共通の背景 */
}

.page-article__header {
	margin-bottom: 40px;
	text-align: center;
}
.page-article__title {
	margin: 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 28px;
	letter-spacing: 0.56px;
	line-height: 1.4;
	color: var(--color-text);
}

.page-article__body {
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
}

/* スマホ（≤599px）：余白・タイトルを圧縮 */
@media (max-width: 599px) {
	.page-article { padding: 56px 0 72px; }
	.page-article__title { font-size: 22px; }
}

/* =========================================================
   お問い合わせフォーム（Contact Form 7）最低限スタイル。サイトのトーン・トークン使用。
   構造：form.wpcf7 > dl.form > (dt: label+span.required) (dd > p > .wpcf7-form-control-wrap > input)
        送信は .submit-btn > input。
   ========================================================= */
.wpcf7 {
	background: var(--bg-white);
	border-radius: 70px 0 70px 0;
	padding: 40px;
}
.wpcf7 dd {
	margin-inline-start: 0;
}
.wpcf7 dd > p {
	margin: 0;
}

/* 入力要素 */
.wpcf7 button,
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box; /* width:100%＋paddingでboxからはみ出さない */
	border: 1px solid var(--color-border-card);
	border-radius: 0;
	color: #333;
	padding: 10px 15px;
	width: 100%;
	margin-bottom: 10px;
}

/* ラジオ・チェックボックスは width:auto に戻す（width:100%で縦積み＝改行する不具合の解消） */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
	width: auto;
	margin-bottom: 0;
}
/* CF7の選択肢ラッパ。先頭の微小な左余白を消す */
.wpcf7-list-item:first-child {
	margin-left: 0;
}

/* 必須マーク（オレンジバッジ風） */
.wpcf7 .required {
	font-size: 11px;
	padding: 4px 5px;
	margin-right: 8px;
	margin-left: 10px;
	background: var(--color-accent-orange); /* #FFC481（トークン） */
	color: #fff;
	border-radius: 0;
	vertical-align: middle;
}

/* 項目ラベル（dt）：直下pのmarginを消し、2つ目以降は上に間隔 */
.wpcf7 .form dt > p { margin: 0; }
.wpcf7 .form dt:not(:first-of-type) { margin-top: 20px; }

/* メール注意書き等の補足テキスト（管理画面で span.form-note を付与）
   line-height は親 .page-article__body の 1.8 を継承し 13px×1.8=23.4px と間延びするため、
   1.5（=19.5px）を明示して補足文として自然に詰める（PC/SP共通）。 */
.form-note { font-size: 13px; line-height: 1.5; }

/* 送信ボタン：左右中央寄せ（spinner span の影響を避けるため、input自体を block-flex＋margin auto で中央化） */
.wpcf7 .submit-btn { text-align: center; }
.wpcf7 .submit-btn p { margin: 0; }
/* 送信ボタン：サイトCTAと同じグラデ・角丸 */
.wpcf7 .submit-btn input {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	max-width: 100%;
	height: 70px;
	margin: 38px auto 0; /* 上38・左右auto（中央）・下0 */
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.4px;
	color: var(--bg-white);
	text-decoration: none;
	background: var(--cta-gradient);
	border: 0; /* 入力要素の枠を打ち消す */
	border-radius: var(--cta-radius);
	transition: opacity 0.2s ease;
	cursor: pointer;
}
.wpcf7 .submit-btn input:hover {
	opacity: 0.9;
}

/* =========================================================
   お問い合わせフォーム（CF7）スマホ（≤599px）専用調整。
   PC/タブレットの表示は変更しない。
   ========================================================= */
@media (max-width: 599px) {
	/* 1. 左右パディングを詰める */
	.wpcf7 { padding: 40px 25px; }

	/* 2-3. 入力要素：iOSの自動ズーム回避で 16px・パディング/下マージン調整 */
	.wpcf7 button,
	.wpcf7 input,
	.wpcf7 select,
	.wpcf7 textarea {
		font-size: 16px;
		padding: 15px;
		margin-bottom: 5px;
	}

	/* 4. ラジオ/チェックボックスの項目間隔 */
	.wpcf7-list-item { margin: 0 1em 0 0; }

	/* 5. エラー文 */
	.wpcf7-not-valid-tip { font-size: 15px; }

	/* 6. 必須バッジを inline-block に */
	.wpcf7 .required { display: inline-block; }
}