/* CF7 送信前確認モーダル（komazawa-k）
 *
 * 配色は子テーマの既存色に合わせている:
 *   --kmzw-brand      #4f2d74  サイトのキーカラー（濃紫）
 *   --kmzw-brand-dark #3d2159  ホバー
 *   --kmzw-tint       #eceaef  子テーマで使われている淡紫（th の地色）
 */

.kmzw-cf7c-overlay {
	position: fixed;
	/* 🔴 `inset` は使わない。Safari 14.1未満（iOS 14.4以前）/ Chrome 86以前が未対応で、
	 *    宣言ごと無視されると position:fixed に offset が無い状態になり、
	 *    オーバーレイがページ最下部＝画面外に出て「ポップアップが出ない」症状になる。
	 *    （2026-07-29 実測: top が 844px＝ビューポート高になり不可視。body:overflow:hidden も
	 *    効くためスクロールもできず画面が固まったように見えた） */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	background: rgba(0, 0, 0, .55);
	-webkit-overflow-scrolling: touch;
	/* iOS Safari は body の overflow:hidden だけでは背景スクロールが止まらないことがある。
	 * スクロール連鎖を断つ（未対応環境では無視されるだけ＝副作用なし） */
	overscroll-behavior: contain;
}

.kmzw-cf7c-overlay[hidden] { display: none; }

body.kmzw-cf7c-open { overflow: hidden; }

.kmzw-cf7c-modal {
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	margin: auto;
	padding: 24px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
	font-size: 15px;
	line-height: 1.7;
	color: #333;
	/* テーマ側の text-align / letter-spacing が流れ込むのを防ぐ */
	text-align: left;
}

.kmzw-cf7c-modal h2,
.kmzw-cf7c-modal p,
.kmzw-cf7c-modal th,
.kmzw-cf7c-modal td {
	text-align: left;
}

.kmzw-cf7c-title {
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid #4f2d74;
	font-size: 19px;
	font-weight: bold;
	line-height: 1.4;
	color: #4f2d74;
	/* 親テーマの見出し装飾（背景画像・アイコン等）を持ち込まない */
	background: none;
}

.kmzw-cf7c-lead {
	margin: 0 0 16px;
	font-size: 14px;
	color: #555;
}

/* 横に溢れる内容はこの中だけでスクロールさせる（本文を横スクロールさせない） */
.kmzw-cf7c-tablewrap {
	overflow-x: auto;
	margin: 0 0 20px;
}

.kmzw-cf7c-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.kmzw-cf7c-table th,
.kmzw-cf7c-table td {
	padding: 10px 12px;
	border: 1px solid #ddd;
	text-align: left;
	vertical-align: top;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.kmzw-cf7c-table th {
	width: 32%;
	background: #eceaef;
	font-weight: bold;
	white-space: nowrap;
}

/* 改行・連続スペースを入力どおりに見せる（textarea 用） */
.kmzw-cf7c-table td {
	white-space: pre-wrap;
}

.kmzw-cf7c-table td.is-empty { color: #999; }

.kmzw-cf7c-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	/* flexbox の gap も Safari 14.1未満は未対応。margin で間隔を作る（gapは使わない） */
	margin: 0 -6px;
}

.kmzw-cf7c-actions > .kmzw-cf7c-btn {
	margin: 6px;
}

.kmzw-cf7c-btn {
	box-sizing: border-box;
	min-width: 132px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.4;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.kmzw-cf7c-back {
	border-color: #bbb;
	background: #fff;
	color: #444;
}

.kmzw-cf7c-back:hover:not(:disabled) { background: #f2f2f2; }

.kmzw-cf7c-send {
	background: #4f2d74;
	color: #fff;
	font-weight: bold;
}

.kmzw-cf7c-send:hover:not(:disabled) { background: #3d2159; }

.kmzw-cf7c-btn:disabled {
	opacity: .6;
	cursor: default;
}

/* :focus-visible は Safari 15.4未満が未対応。:focus のフォールバックを先に置く */
.kmzw-cf7c-btn:focus {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

.kmzw-cf7c-btn:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

@media screen and (max-width: 600px) {
	.kmzw-cf7c-modal { padding: 18px 16px; }

	.kmzw-cf7c-table,
	.kmzw-cf7c-table tbody,
	.kmzw-cf7c-table tr,
	.kmzw-cf7c-table th,
	.kmzw-cf7c-table td {
		display: block;
		width: auto;
	}

	.kmzw-cf7c-table tr { margin-bottom: 12px; }

	.kmzw-cf7c-table th {
		border-bottom: none;
		white-space: normal;
	}

	.kmzw-cf7c-actions { justify-content: stretch; }

	.kmzw-cf7c-actions > .kmzw-cf7c-btn {
		flex: 1 1 100%;
		width: 100%;   /* flex未計算時でも横幅いっぱいにする保険 */
	}

	/* スマホでは「この内容で送信する」を上に出す */
	.kmzw-cf7c-send { order: -1; }
}