/* =========================================================
   読了CTA（read_cta）＝移住者インタビュー詳細で本文75%到達時に出る診断バナー
   表示形式は「中央モーダル」（2026-07-31 に2案比較のうえ採用決定・スライドイン版は削除）
   HTMLの生成と表示制御は cmn/js/read_cta.js（jQuery）側
   ※ 新サイト(html_temp)の read_cta を旧サイト用にpx・変数なしで移植
   ※ 既存CSSには手を入れず、このファイル単体で完結させている
========================================================= */
.read_cta {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* ヘッダー(1050)より前面に出す */
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	/* 暗転の濃さは既存 mobile_navi_bg に揃える */
	background: rgba(0, 0, 0, 0.6);
	pointer-events: none;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.read_cta.is_visible {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.read_cta,
	.read_cta_inner {
		transition-duration: 0.01s;
	}
}

/* カード本体。暗転のフェードに少し遅れてせり上がる */
.read_cta_inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 400px;
	padding: 32px 24px 24px;
	/* 閉じるボタンを左上にはみ出させるので隠さない（あびぃの下端は透明余白なので見えない） */
	overflow: visible;
	/* 旧サイトは body に text-align:center が効いているのでここで断ち切る */
	text-align: left;
	/* 白シート＋ドット柄 */
	background:
		radial-gradient(circle, rgba(106, 180, 106, 0.16) 2px, transparent 2.5px) 0 0 / 22px 22px,
		linear-gradient(135deg, #f4fbf7 0%, #cdefcd 100%);
	border: 2px solid #6ab46a;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(12px);
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.2s ease;
}

.read_cta.is_visible .read_cta_inner {
	transform: none;
}

.read_cta_inner:hover {
	border-color: #55914f;
}

/* 全体リンク（ストレッチリンク：カード全体クリックで遷移。閉じるボタンは更に上に重ねる） */
.read_cta_link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	border-radius: 16px;
}

/* 縦並びの順序：文言(1) → あびぃ(2) → ボタン(3) */
.read_cta_main {
	position: relative;
	z-index: 1;
	order: 1;
	flex: 1;
	width: 100%;
	min-width: 0;
	text-align: center;
}

.read_cta_visual {
	position: relative;
	z-index: 1;
	order: 2;
	flex-shrink: 0;
	width: 150px;
}

.read_cta_abi {
	display: block;
	width: 100%;
	height: auto;
}

/* ＼／の斜め罫線は文字ではなくCSSの棒（回転）で描く */
.read_cta_eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #009856;
}

.read_cta_eyebrow::before,
.read_cta_eyebrow::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 12px;
	background: #6ab46a;
}

.read_cta_eyebrow::before {
	transform: rotate(-20deg);
}

.read_cta_eyebrow::after {
	transform: rotate(20deg);
}

.read_cta_title {
	margin: 8px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #1f231f;
	/* 2行になるSPで「を診断」だけが行に残らないよう行長を均等化（非対応ブラウザでも読める） */
	text-wrap: balance;
}

.read_cta_title .read_cta_strong {
	color: #009856;
	/* マーカーが行末で分断されないよう「広島暮らし」は必ず1行に収める */
	white-space: nowrap;
	background: linear-gradient(transparent 58%, rgba(250, 230, 0, 0.55) 58%);
}

/* ボタンは視覚装飾（クリックは read_cta_link が拾う） */
.read_cta_btn {
	position: relative;
	z-index: 1;
	order: 3;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	letter-spacing: 0.03em;
	white-space: nowrap;
	background: linear-gradient(135deg, #6bb46a 0%, #009856 100%);
	border-radius: 9999px;
	transition: background 0.2s ease;
}

.read_cta_inner:hover .read_cta_btn {
	background: linear-gradient(135deg, #009856, #009856);
}

/* 矢印は文字ではなくCSSの棒＋山形で描く */
.read_cta_arrow {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 12px;
	transition: transform 0.2s ease;
}

.read_cta_arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: translateY(-50%);
}

.read_cta_arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translate(1px, -50%) rotate(45deg);
}

.read_cta_inner:hover .read_cta_arrow {
	transform: translateX(3px);
}

/* 閉じるボタン：カード左上にはみ出して置く。×は文字ではなくCSSの棒2本を回転して描く */
.read_cta_close {
	position: absolute;
	top: -12px;
	left: -12px;
	/* ストレッチリンクより前面に出して確実に押せるようにする */
	z-index: 3;
	display: block;
	width: 32px;
	height: 32px;
	padding: 0;
	color: #fff;
	background: #1f231f;
	/* 白フチでカードの緑ボーダーから切り離す */
	border: 2px solid #fff;
	border-radius: 9999px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.read_cta_close:hover {
	background: #000;
}

.read_cta_close::before,
.read_cta_close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background: currentColor;
}

.read_cta_close::before {
	transform: rotate(45deg);
}

.read_cta_close::after {
	transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
	.read_cta {
		padding: 16px;
	}

	.read_cta_inner {
		gap: 12px;
		padding: 28px 20px 20px;
		border-radius: 12px;
	}

	.read_cta_visual {
		width: 120px;
	}

	.read_cta_title {
		font-size: 17px;
	}

	.read_cta_btn {
		gap: 8px;
		padding: 14px;
		font-size: 15px;
	}

	.read_cta_close {
		top: -10px;
		left: -10px;
		width: 28px;
		height: 28px;
	}

	.read_cta_close::before,
	.read_cta_close::after {
		width: 12px;
		margin-left: -6px;
	}
}

/* モーダル表示中の背景スクロール止め。html の overflow だけを止める。
   スクロール位置を退避・復元しないので、閉じても位置がそのまま保たれる。

   ▼ この方式に至った経緯（いずれも実機で不具合が出た）
   ・既存の .non_scroll（height:100% 込み）→ 位置がトップへ飛ぶ
   ・body を position:fixed にして top で退避する方式
     → 閉じたときの scrollTop() 復元が旧サイトの html { scroll-behavior: smooth }
        （import.css）に拾われ、元位置まで高速スクロールする動きになった
     → Safari では body が fixed の間、中の fixed 要素のヒットテストがずれて×が押せない */
html.read_cta_lock {
	overflow: hidden;
}