/*
 * Film Club — テーマ追加スタイル
 *
 * style.css（先方 dist/style.css）は無改変で使うため、
 * WordPress 化にあたって必要になった分だけをこのファイルに分離しています。
 *
 * 内訳:
 *  1. 画像未入稿期間のプレースホルダ
 *  2. Contact Form 7 を先方フォームの見た目に合わせるための調整
 *  3. ページネーションなど WordPress 固有パーツ
 *  4. フッターロゴの見切れ補正
 */

/* ---------------------------------------------------------------
 * 1. 画像プレースホルダ
 *    assets/ に画像を置くと <img> に自動で切り替わり、この指定は効かなくなる
 * ------------------------------------------------------------ */

.fc-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 60px;
	background: repeating-linear-gradient(45deg, #d9d9d9, #d9d9d9 10px, #cfcfcf 10px, #cfcfcf 20px);
	color: #4a4a4a;
	text-align: center;
	overflow: hidden;
}

.fc-placeholder__label {
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .04em;
	padding: 6px 8px;
	overflow-wrap: anywhere;
}

/* ロゴ枠は .logo-window 側で高さが決まっているため埋める */
.logo-window .fc-placeholder {
	position: absolute;
	inset: 0;
}

/* CREATORS のポートレートは 3/4 比率の枠いっぱいに */
.creator-photo .fc-placeholder,
.message-portrait .fc-placeholder {
	aspect-ratio: auto;
	min-height: 220px;
}

.message-portrait .fc-placeholder {
	min-height: 300px;
}

.bokumono-logo-wrap .fc-placeholder {
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.client-logo .fc-placeholder {
	height: 100%;
}

/* ---------------------------------------------------------------
 * 2. Contact Form 7
 *    先方フォーム（form > label > input）と同じ見た目になるよう補正する
 * ------------------------------------------------------------ */

/*
 * CF7 6.1.7 は form 内を自動で <p> でまとめ、各 label の間に <br> を入れる。
 * （wpcf7_autop_or_not フィルタを入れても実レンダリングでは <p>/<br> が残ることを
 *   2026-09-15 にサーバー上の実出力で確認済み。）
 * そのため「form > label」ではなく子孫セレクタで当て、<p> と <br> を無効化する。
 */
.contact-form-area .wpcf7-form p {
	margin: 0;
	color: inherit;
}

.contact-form-area .wpcf7-form br {
	display: none;
}

.contact-form-area .wpcf7-form label {
	display: block;
	font-size: 15px;
	margin-bottom: 28px;
}

/*
 * 先方CSSの form label > span は「必須」バッジ用の赤字指定。
 * CF7 は入力欄を span.wpcf7-form-control-wrap で包むため、
 * そのままだと入力欄側にも赤字指定が当たってしまうので打ち消す。
 */
.contact-form-area .wpcf7-form label > span.wpcf7-form-control-wrap {
	display: block;
	color: inherit;
	font-size: inherit;
	margin-left: 0;
}

.contact-form-area .wpcf7-form label > .required {
	color: #ff907d;
	font-size: 12px;
	margin-left: 12px;
}

.contact-form-area .wpcf7-form p.form-note {
	font-size: 13px;
	line-height: 1.8;
	color: #555;
	margin: 0 0 25px;
}

/* CF7 の隠しフィールド／スクリーンリーダー用領域が余白を作らないように */
.contact-form-area .wpcf7 .hidden-fields-container,
.contact-form-area .wpcf7 .screen-reader-response {
	display: none;
}

/* 送信ボタンを先方の .solid-button と同じ見た目に */
.contact-form-area .wpcf7-form input[type="submit"] {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	width: auto;
	margin-top: 0;
	background: #151515;
	color: #fff;
	border: none;
	border-radius: 0;
	padding: 20px 28px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.contact-form-area .wpcf7-form input[type="submit"]:hover {
	background: #3158db;
}

.contact-form-area .wpcf7-form input[type="submit"]:disabled {
	opacity: .55;
	cursor: wait;
}

/* 送信中スピナー・エラー表示 */
.contact-form-area .wpcf7-spinner {
	margin: 0 0 0 14px;
}

/* 送信結果メッセージ。状態クラスが付くまでは枠ごと出さない */
.contact-form-area .wpcf7-form .wpcf7-response-output {
	display: none;
	margin: 24px 0 0;
	padding: 16px 18px;
	border: 1px solid #bbb;
	font-size: 14px;
	line-height: 1.8;
}

.contact-form-area .wpcf7-form.sent .wpcf7-response-output,
.contact-form-area .wpcf7-form.failed .wpcf7-response-output,
.contact-form-area .wpcf7-form.aborted .wpcf7-response-output,
.contact-form-area .wpcf7-form.invalid .wpcf7-response-output,
.contact-form-area .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-form-area .wpcf7-form.payment-required .wpcf7-response-output,
.contact-form-area .wpcf7-form.spam .wpcf7-response-output {
	display: block;
}

.contact-form-area .wpcf7-form.sent .wpcf7-response-output {
	border-color: #3158db;
	color: #24409c;
}

.contact-form-area .wpcf7-form.failed .wpcf7-response-output,
.contact-form-area .wpcf7-form.aborted .wpcf7-response-output,
.contact-form-area .wpcf7-form.spam .wpcf7-response-output {
	border-color: #c8341c;
	color: #a52a16;
}

.contact-form-area .wpcf7-not-valid-tip {
	color: #c8341c;
	font-size: 13px;
	margin-top: 8px;
	display: block;
}

.contact-form-area .wpcf7-form .wpcf7-not-valid {
	border-color: #c8341c;
}

/* ---------------------------------------------------------------
 * 3. WordPress 固有パーツ
 * ------------------------------------------------------------ */

.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 45px;
	font-size: 14px;
}

.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #bbb;
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: #151515;
	color: #fff;
	border-color: #151515;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 投稿本文（コラム・新着情報）内の基本要素 */
.article ul,
.article ol {
	padding-left: 22px;
}

.article img {
	max-width: 100%;
	height: auto;
}

.article a:not(.solid-button) {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------------------------------------------------------------
 * 4. フッターロゴの見切れ補正（2026-09-16・RYO承認済み）
 *
 * 先方 style.css は `footer .logo-window{width:200px;height:72px}` で、
 * ヘッダーの 210px より 10px 狭い切り抜き窓になっている。
 * 入稿ロゴ（1774×887）の黒インク右端は窓の可視ソース範囲をわずかに超えるため、
 * フッターだけ「部」の右側が約5px切れていた（3倍拡大SSで目視確認済み）。
 *
 * → width のみヘッダーと同じ 210px に揃える。height（72px）は変更しない。
 * ------------------------------------------------------------ */

footer .logo-window {
	width: 210px;
}