@charset "UTF-8";
/*
 * 歯科衛生士向け スカウト登録LP（/scout/）専用CSS
 *
 * 2026-08-19 新設。page-scout.php でのみ使う。
 *
 * 【なぜ専用ファイルにしたか】
 * - assets/css/style.css は SCSS ビルドで再生成されるため、手で書くと巻き戻る（過去3回事故）
 * - assets/dh-osipoint.css は複数案件が共用しており、pull漏れで他案件の追記を消す事故が起きている
 * → lp-top.css・partner-recruit.css と同じ方式で専用ファイルにし、
 *    inc/scripts.php から is_page('scout') のときだけ読み込む。
 *
 * 【スコープ】すべて .site-scout 配下に閉じている。他ページに影響しない。
 */

/* ============================================================
   変数・土台
   ============================================================ */
.site-scout {
	--sc-blue: #2e7bd6;
	--sc-blue-mid: #5b9bd5;
	--sc-blue-dark: #1b3d6e;
	--sc-blue-pale: #eaf3fc;
	--sc-blue-pale2: #f3f8fd;
	--sc-bg: #f6fafe;
	--sc-text: #3c4858;
	--sc-text-sub: #6b7a8d;
	--sc-line: #06c755;
	--sc-line-dark: #05a948;
	--sc-border: #dbe6f3;
	--sc-radius: 18px;
	--sc-shadow: 0 4px 20px rgba(46, 123, 214, .08);

	background: var(--sc-bg);
	color: var(--sc-text);
	font-family: "Zen Maru Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	overflow-x: hidden;
}

.site-scout * {
	box-sizing: border-box;
}

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

.site-scout .sc-inner {
	width: min(1080px, calc(100% - 40px));
	margin-inline: auto;
}

.site-scout .sc-sect {
	padding: 64px 0;
}

.site-scout .sc-sect__title {
	font-size: clamp(21px, 3.4vw, 30px);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: var(--sc-blue-dark);
	margin: 0 0 36px;
}

.site-scout .sc-em {
	color: var(--sc-blue);
}

.site-scout .sc-star {
	color: #f0b429;
	font-weight: 700;
}

/* 蛍光マーカー風 */
.site-scout .sc-marker {
	background: linear-gradient(transparent 62%, #fff1a8 62%);
	font-weight: 700;
	color: var(--sc-blue-dark);
	padding: 0 2px;
}

/* ============================================================
   LINEボタン（ヒーロー／末尾で共用）
   ============================================================ */
.site-scout .sc-line-btn {
	display: flex;
	align-items: center;
	gap: 16px;
	width: min(640px, 100%);
	padding: 16px 22px;
	border-radius: 14px;
	background: linear-gradient(180deg, #22cf6b 0%, var(--sc-line) 100%);
	box-shadow: 0 6px 16px rgba(6, 199, 85, .28);
	color: #fff;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.site-scout .sc-line-btn:hover,
.site-scout .sc-line-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(6, 199, 85, .34);
	color: #fff;
}

.site-scout .sc-line-btn--round {
	border-radius: 999px;
	padding-inline: 30px;
}

.site-scout .sc-line-btn__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: #fff;
	color: var(--sc-line);
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
}

.site-scout .sc-line-btn--round .sc-line-btn__mark {
	border-radius: 50%;
}

.site-scout .sc-line-btn__body {
	flex: 1 1 auto;
	text-align: center;
	line-height: 1.35;
}

.site-scout .sc-line-btn__main {
	display: block;
	font-size: clamp(18px, 2.6vw, 24px);
	font-weight: 700;
}

.site-scout .sc-line-btn__sub {
	display: block;
	font-size: 12px;
	opacity: .92;
	margin-top: 3px;
}

.site-scout .sc-line-btn__arrow {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-top: 2.5px solid #fff;
	border-right: 2.5px solid #fff;
	transform: rotate(45deg);
	margin-right: 4px;
}

/* ============================================================
   ヒーロー
   ============================================================ */
.site-scout .sc-hero {
	position: relative;
	isolation: isolate;
	padding: 44px 0 56px;
	background: linear-gradient(160deg, #ffffff 0%, #eaf4fd 55%, #dcecfa 100%);
	overflow: hidden;
}

.site-scout .sc-hero__bg {
	position: absolute;
	inset: 0 0 auto auto;
	width: 54%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.site-scout .sc-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 30%;
}

/* 写真の左端を背景色に溶かす */
.site-scout .sc-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #eaf4fd 0%, rgba(234, 244, 253, .82) 22%, rgba(234, 244, 253, 0) 58%);
}

.site-scout .sc-hero__inner {
	position: relative;
}

.site-scout .sc-hero__eyebrow {
	font-size: 13px;
	font-weight: 700;
	color: var(--sc-blue);
	letter-spacing: .04em;
	margin: 0 0 14px;
}

.site-scout .sc-hero__title {
	margin: 0 0 20px;
	font-size: clamp(34px, 7.4vw, 62px);
	font-weight: 700;
	line-height: 1.18;
	color: var(--sc-blue-dark);
	letter-spacing: .01em;
}

.site-scout .sc-hero__line {
	display: block;
	position: relative;
	width: fit-content;
	padding-bottom: 4px;
}

.site-scout .sc-hero__line + .sc-hero__line::after {
	content: "";
	position: absolute;
	left: 0;
	right: -6%;
	bottom: -6px;
	height: 5px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--sc-blue-mid), rgba(91, 155, 213, 0));
}

.site-scout .sc-hash {
	color: var(--sc-blue-mid);
	margin-right: .1em;
}

.site-scout .sc-hero__lead {
	font-size: clamp(14px, 1.9vw, 16px);
	line-height: 1.95;
	color: var(--sc-text);
	margin: 0 0 26px;
	font-weight: 500;
}

/* 3つのバッジ */
.site-scout .sc-badges {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 660px;
}

.site-scout .sc-badge {
	flex: 1 1 190px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: #fff;
	border-radius: 999px;
	box-shadow: var(--sc-shadow);
}

.site-scout .sc-badge__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sc-blue-pale);
	overflow: hidden;
}

/*
 * アイコン素材は白い正方形の背景ごと書き出されているため、
 * multiply で白を飛ばして線画だけを残す（白く塗ってしまうと multiply で消える）。
 */
.site-scout .sc-badge__icon img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.site-scout .sc-badge__text {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--sc-blue-dark);
}

.site-scout .sc-badge__text strong {
	font-weight: 700;
}

/* チェック3行 */
.site-scout .sc-hero__checks {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
	max-width: 560px;
}

.site-scout .sc-hero__checks li {
	position: relative;
	padding-left: 30px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sc-blue-dark);
	line-height: 1.5;
}

.site-scout .sc-hero__checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sc-blue);
}

.site-scout .sc-hero__checks li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: .42em;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(42deg);
}

.site-scout .sc-hero__note {
	margin: 18px 0 0;
	font-size: 12.5px;
	color: var(--sc-text-sub);
}

/* ============================================================
   疑い（共感）
   ============================================================ */
.site-scout .sc-doubt {
	background: linear-gradient(180deg, #ffffff 0%, var(--sc-blue-pale2) 100%);
}

.site-scout .sc-doubt__grid {
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: center;
	gap: 28px;
	max-width: 820px;
	margin-inline: auto;
}

.site-scout .sc-doubt__img img {
	width: 100%;
	/* 素材が白い正方形ごと書き出されているので、白を飛ばして線画だけ残す */
	mix-blend-mode: multiply;
}

.site-scout .sc-doubt__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.site-scout .sc-doubt__list li {
	position: relative;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.7;
}

.site-scout .sc-doubt__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 3px solid var(--sc-blue-mid);
}

.site-scout .sc-doubt__close {
	margin: 30px 0 0;
	text-align: center;
	font-size: clamp(15px, 2.2vw, 18px);
	font-weight: 700;
	color: var(--sc-blue-dark);
}

/* ============================================================
   届き方が違う（5カード）
   ============================================================ */
.site-scout .sc-reasons {
	background: var(--sc-bg);
}

.site-scout .sc-reason-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	align-items: stretch;
}

.site-scout .sc-reason {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 16px 20px;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
}

.site-scout .sc-reason__num {
	position: absolute;
	top: -13px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sc-blue);
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
}

.site-scout .sc-reason__title {
	margin: 0 0 12px;
	/* 5枚の見出しは行数がばらつくので、高さを揃えてアイコンの位置を合わせる */
	min-height: calc(1.5em * 4);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sc-blue-dark);
}

.site-scout .sc-reason__icon {
	display: block;
	margin: 0 auto 12px;
	width: 84px;
}

.site-scout .sc-reason__icon img {
	width: 100%;
	mix-blend-mode: multiply;
}

.site-scout .sc-reason__body {
	/* 見出しの高さを揃えてあるので、本文もアイコン直下で自然に揃う */
	margin: 0;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--sc-text-sub);
}

/* ============================================================
   3ステップ
   ============================================================ */
.site-scout .sc-steps {
	background: linear-gradient(180deg, var(--sc-blue-pale2) 0%, #ffffff 100%);
}

.site-scout .sc-step-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 46px;
	max-width: 900px;
	margin-inline: auto;
}

.site-scout .sc-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 26px 18px 22px;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
}

/* カード間の矢印 */
.site-scout .sc-step + .sc-step::before {
	content: "";
	position: absolute;
	left: -32px;
	top: 50%;
	width: 14px;
	height: 14px;
	border-top: 3px solid var(--sc-blue-mid);
	border-right: 3px solid var(--sc-blue-mid);
	transform: translateY(-50%) rotate(45deg);
}

.site-scout .sc-step__label {
	display: inline-block;
	padding: 4px 16px;
	border-radius: 999px;
	background: var(--sc-blue-dark);
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	margin-bottom: 12px;
}

.site-scout .sc-step__title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sc-blue-dark);
}

.site-scout .sc-step__icon {
	display: block;
	width: 104px;
	margin-bottom: 12px;
}

.site-scout .sc-step__icon img {
	width: 100%;
	mix-blend-mode: multiply;
}

.site-scout .sc-step__body {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--sc-text-sub);
}

.site-scout .sc-steps__note {
	margin: 26px 0 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--sc-text-sub);
}

/* ============================================================
   しつこい連絡はありません
   ============================================================ */
.site-scout .sc-calm {
	background: #fff;
}

.site-scout .sc-calm__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.site-scout .sc-calm__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 22px;
	background: var(--sc-blue-pale2);
	border-radius: var(--sc-radius);
}

.site-scout .sc-calm__icon {
	flex: 0 0 auto;
	width: 54px;
}

.site-scout .sc-calm__icon img {
	width: 100%;
	mix-blend-mode: multiply;
}

.site-scout .sc-calm__text h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sc-blue-dark);
}

.site-scout .sc-calm__text p {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--sc-text-sub);
}

.site-scout .sc-calm__note {
	margin: 22px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--sc-text-sub);
}

/* ============================================================
   個別サポート
   ============================================================ */
.site-scout .sc-support {
	background: linear-gradient(180deg, #ffffff 0%, var(--sc-blue-pale) 100%);
}

.site-scout .sc-support__lead {
	margin: -18px 0 30px;
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	color: var(--sc-text);
}

.site-scout .sc-plan-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.site-scout .sc-plan {
	display: flex;
	flex-direction: column;
	padding: 20px 18px;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
}

.site-scout .sc-plan__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.site-scout .sc-plan__icon {
	flex: 0 0 auto;
	width: 34px;
}

.site-scout .sc-plan__icon img {
	width: 100%;
	mix-blend-mode: multiply;
}

.site-scout .sc-plan__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sc-blue-dark);
}

.site-scout .sc-plan__spec {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 6px;
}

.site-scout .sc-plan__spec li {
	position: relative;
	padding-left: 14px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--sc-text-sub);
}

.site-scout .sc-plan__spec li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sc-blue-mid);
}

.site-scout .sc-plan__price {
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px dashed var(--sc-border);
	text-align: right;
	font-size: 14px;
	font-weight: 700;
	color: var(--sc-blue);
}

.site-scout .sc-plan__price span {
	font-family: "Open Sans", sans-serif;
	font-size: 25px;
	margin-right: 2px;
}

.site-scout .sc-support__notes {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.site-scout .sc-support__notes li {
	position: relative;
	padding-left: 15px;
	font-size: 11.5px;
	line-height: 1.75;
	color: var(--sc-text-sub);
}

.site-scout .sc-support__notes li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}

.site-scout .sc-support__notes a {
	color: var(--sc-blue);
	text-decoration: underline;
}

/* ============================================================
   運営者
   ============================================================ */
.site-scout .sc-who {
	background: var(--sc-bg);
}

.site-scout .sc-who__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 240px;
	gap: 18px;
	align-items: center;
}

.site-scout .sc-who__grid--single {
	grid-template-columns: 1fr 260px;
	max-width: 880px;
	margin-inline: auto;
}

.site-scout .sc-who__card {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
}

.site-scout .sc-who__card p {
	margin: 0 0 .9em;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--sc-text);
}

.site-scout .sc-who__card p:last-child {
	margin-bottom: 0;
}

.site-scout .sc-who__name {
	font-size: 20px !important;
	font-weight: 700;
	color: var(--sc-blue-dark);
	margin-bottom: .6em !important;
}

.site-scout .sc-who__img {
	position: relative;
	text-align: center;
}

.site-scout .sc-who__img img {
	width: 100%;
	mix-blend-mode: multiply;
}

.site-scout .sc-who__balloon {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 10px 14px;
	background: #fff;
	border: 2px solid var(--sc-blue-mid);
	border-radius: 14px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sc-blue-dark);
}

.site-scout .sc-who__balloon::after {
	content: "";
	position: absolute;
	left: 24px;
	bottom: -9px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-right: 2px solid var(--sc-blue-mid);
	border-bottom: 2px solid var(--sc-blue-mid);
	transform: rotate(45deg);
}

/* ============================================================
   クロージング
   ============================================================ */
.site-scout .sc-cta {
	background: linear-gradient(180deg, var(--sc-blue-pale) 0%, #d7e9f9 100%);
	padding: 56px 0 64px;
}

.site-scout .sc-cta__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	align-items: center;
}

.site-scout .sc-cta__title {
	margin: 0 0 12px;
	font-size: clamp(21px, 3.2vw, 28px);
	font-weight: 700;
	color: var(--sc-blue-dark);
}

.site-scout .sc-cta__text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--sc-text);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 1024px) {
	.site-scout .sc-reason-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-scout .sc-plan-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-scout .sc-who__grid,
	.site-scout .sc-who__grid--single {
		grid-template-columns: 1fr 220px;
	}

	.site-scout .sc-who__card--story {
		grid-column: 1 / -1;
	}
}

@media screen and (max-width: 767px) {
	.site-scout .sc-sect {
		padding: 44px 0;
	}

	.site-scout .sc-inner {
		width: calc(100% - 32px);
	}

	/* ヒーロー: 写真を上に出して、文字は下に重ねない */
	.site-scout .sc-hero {
		padding: 0 0 40px;
		background: linear-gradient(180deg, #eaf4fd 0%, #dcecfa 100%);
	}

	.site-scout .sc-hero__bg {
		position: relative;
		inset: auto;
		width: 100%;
		height: 210px;
		margin-bottom: 22px;
		z-index: 0;
	}

	.site-scout .sc-hero__bg img {
		object-position: 70% 26%;
	}

	.site-scout .sc-hero__bg::after {
		background: linear-gradient(180deg, rgba(234, 244, 253, 0) 55%, #eaf4fd 100%);
	}

	.site-scout .sc-hero__title {
		margin-bottom: 16px;
	}

	.site-scout .sc-badges {
		max-width: none;
	}

	.site-scout .sc-badge {
		flex: 1 1 100%;
	}

	.site-scout .sc-line-btn {
		gap: 12px;
		padding: 14px 16px;
	}

	.site-scout .sc-line-btn__mark {
		width: 44px;
		height: 44px;
		font-size: 13px;
	}

	.site-scout .sc-doubt__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.site-scout .sc-doubt__img {
		width: 170px;
		margin-inline: auto;
	}

	.site-scout .sc-reason-list {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.site-scout .sc-reason {
		flex-direction: row;
		align-items: flex-start;
		gap: 14px;
		padding: 26px 16px 18px;
	}

	.site-scout .sc-reason__icon {
		flex: 0 0 74px;
		width: 74px;
		margin: 0;
		order: -1;
	}

	.site-scout .sc-reason__body {
		margin-top: 8px;
	}

	/* タイトルと本文を右側にまとめる */
	.site-scout .sc-reason__title,
	.site-scout .sc-reason__body {
		flex: 1 1 auto;
	}

	.site-scout .sc-reason {
		display: grid;
		grid-template-columns: 74px 1fr;
		grid-template-areas:
			"icon title"
			"body body";
		column-gap: 14px;
	}

	.site-scout .sc-reason__icon { grid-area: icon; }
	/* 1カラムでは見出しの高さを揃える必要がないので、PC用の min-height を解除する
	   （残すと短い見出しのカードに大きな余白ができる） */
	.site-scout .sc-reason__title { grid-area: title; align-self: center; margin-bottom: 0; min-height: 0; }
	.site-scout .sc-reason__body { grid-area: body; margin-top: 12px; }

	.site-scout .sc-step-list {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.site-scout .sc-step + .sc-step::before {
		left: 50%;
		top: -28px;
		transform: translateX(-50%) rotate(135deg);
	}

	.site-scout .sc-calm__grid {
		grid-template-columns: 1fr;
	}

	.site-scout .sc-plan-list {
		grid-template-columns: 1fr;
	}

	.site-scout .sc-who__grid,
	.site-scout .sc-who__grid--single {
		grid-template-columns: 1fr;
	}

	.site-scout .sc-who__img {
		width: 220px;
		margin-inline: auto;
	}

	.site-scout .sc-cta__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.site-scout .sc-cta__inner .sc-line-btn {
		margin-inline: auto;
	}
}

/* ================================================================
   デザイン仕上げ（2026-08-20）

   ちゃっぴー（ChatGPT）に外注したデザイン修正を、そのまま取り込んだもの。
   受け取ったHTML内の <style id="scout-polish-20260820"> の中身と同一。

   - 上のブロックを書き換えるのではなく、後ろから上書きする形で入れている。
     どこを直したのかが一目で分かるので、気に入らなければこのブロックごと
     消せば元のデザインに戻せる。
   - セレクタは全て .site-scout 配下に閉じていることを確認済み
     （他ページに影響しない）。
   - HTMLの構造・class名・本文は一切変わっていない（差分はこのCSSだけ）。
     法くんゲートを通した文言もそのまま。
   ================================================================ */
/* ============================================================
   2026-08-20 Design polish override
   class names / Japanese copy / embedded image block untouched
   ============================================================ */
.site-scout {
  --sc-blue: #347fc7;
  --sc-blue-mid: #72a9d8;
  --sc-blue-dark: #193a63;
  --sc-blue-pale: #eaf4fb;
  --sc-blue-pale2: #f5f9fc;
  --sc-bg: #f7fafc;
  --sc-text: #3f4f61;
  --sc-text-sub: #718093;
  --sc-border: #dce8f1;
  --sc-radius: 22px;
  --sc-shadow: 0 10px 34px rgba(31, 78, 121, .08);
  background:
    radial-gradient(circle at 10% 4%, rgba(104,170,219,.09), transparent 24%),
    var(--sc-bg);
}

.site-scout .sc-inner { width: min(1120px, calc(100% - 48px)); }
.site-scout .sc-sect { padding: 82px 0; }
.site-scout .sc-sect__title {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.42;
  letter-spacing: .01em;
  margin-bottom: 42px;
}
.site-scout .sc-em { color: #2f7fc5; }
.site-scout .sc-marker { background: linear-gradient(transparent 58%, #ffefa7 58%); }

/* Hero */
.site-scout .sc-hero {
  min-height: 690px;
  display: flex;
  align-items: center;
  padding: 74px 0 72px;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.98) 0 18%, rgba(255,255,255,0) 48%),
    linear-gradient(135deg, #fbfdff 0%, #edf6fc 56%, #dcecf8 100%);
}
.site-scout .sc-hero::before {
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  left:-210px;
  bottom:-250px;
  background:rgba(112,169,216,.09);
  z-index:-1;
}
.site-scout .sc-hero__bg { width: 51%; }
.site-scout .sc-hero__bg img { object-position: 60% 40%; }
.site-scout .sc-hero__bg::after {
  background: linear-gradient(90deg, #eef6fc 0%, rgba(238,246,252,.92) 16%, rgba(238,246,252,.48) 38%, rgba(238,246,252,0) 68%);
}
.site-scout .sc-hero__inner { z-index:1; }
.site-scout .sc-hero__eyebrow {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 14px;
  margin-bottom:18px;
  border:1px solid rgba(52,127,199,.18);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 4px 18px rgba(43,94,137,.05);
  backdrop-filter: blur(5px);
  font-size:12.5px;
  letter-spacing:.06em;
}
.site-scout .sc-hero__title {
  max-width: 720px;
  margin-bottom:24px;
  font-size:clamp(42px, 6.2vw, 70px);
  line-height:1.12;
  letter-spacing:-.015em;
}
.site-scout .sc-hero__line + .sc-hero__line { margin-top:4px; }
.site-scout .sc-hero__line + .sc-hero__line::after {
  right:-3%; bottom:-7px; height:6px;
  background:linear-gradient(90deg,#6aa7d8 0%, rgba(106,167,216,.35) 70%, rgba(106,167,216,0) 100%);
}
.site-scout .sc-hash { color:#8eb7d8; font-weight:500; }
.site-scout .sc-hero__lead {
  max-width:620px;
  margin-bottom:28px;
  font-size:15.5px;
  line-height:1.9;
}
.site-scout .sc-badges { gap:10px; margin-bottom:28px; max-width:690px; }
.site-scout .sc-badge {
  flex:0 1 auto;
  min-width:190px;
  padding:10px 16px 10px 11px;
  border:1px solid rgba(70,126,174,.08);
  box-shadow:0 8px 22px rgba(45,92,135,.07);
}
.site-scout .sc-badge__icon { width:40px;height:40px;background:#edf5fb; }
.site-scout .sc-badge__text { font-size:12px; line-height:1.4; }

.site-scout .sc-line-btn {
  position:relative;
  overflow:hidden;
  min-height:88px;
  padding:16px 20px;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(6,199,85,.24), inset 0 1px 0 rgba(255,255,255,.35);
}
.site-scout .sc-line-btn::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.14) 42%,transparent 64%);
  transform:translateX(-120%);
  transition:transform .5s ease;
}
.site-scout .sc-line-btn:hover::after { transform:translateX(120%); }
.site-scout .sc-line-btn__mark { width:54px;height:54px;border-radius:16px; }
.site-scout .sc-line-btn__main { font-size:clamp(19px,2.2vw,25px); letter-spacing:.01em; }
.site-scout .sc-line-btn__sub { font-size:11.5px; }
.site-scout .sc-hero__checks { gap:8px; margin-top:20px; }
.site-scout .sc-hero__checks li { font-size:13.5px; }
.site-scout .sc-hero__note { max-width:700px; font-size:11.5px; line-height:1.7; }

/* Shared card polish */
.site-scout .sc-reason,
.site-scout .sc-step,
.site-scout .sc-plan,
.site-scout .sc-who__card {
  border-color:rgba(70,126,174,.13);
  box-shadow:0 12px 34px rgba(43,88,126,.075);
}
.site-scout .sc-reason,
.site-scout .sc-step,
.site-scout .sc-plan { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
@media (hover:hover) {
  .site-scout .sc-reason:hover,
  .site-scout .sc-step:hover,
  .site-scout .sc-plan:hover {
    transform:translateY(-4px);
    box-shadow:0 18px 42px rgba(43,88,126,.11);
    border-color:rgba(52,127,199,.24);
  }
}

/* Doubt */
.site-scout .sc-doubt {
  background:linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%);
}
.site-scout .sc-doubt__grid {
  grid-template-columns:240px 1fr;
  max-width:900px;
  gap:42px;
  padding:34px 40px;
  border:1px solid rgba(70,126,174,.10);
  border-radius:28px;
  background:rgba(255,255,255,.78);
  box-shadow:0 14px 36px rgba(46,88,124,.055);
}
.site-scout .sc-doubt__list { gap:16px; }
.site-scout .sc-doubt__list li { font-size:15px; line-height:1.75; padding-left:30px; }
.site-scout .sc-doubt__list li::before { width:11px;height:11px;border-width:3px;top:.58em; }
.site-scout .sc-doubt__close { margin-top:32px; }

/* Reasons */
.site-scout .sc-reasons { background:#f8fbfd; }
.site-scout .sc-reason-list { gap:16px; }
.site-scout .sc-reason { padding:34px 18px 24px; border-radius:22px; }
.site-scout .sc-reason__num {
  top:-15px;left:18px;width:34px;height:34px;
  box-shadow:0 5px 14px rgba(52,127,199,.23);
}
.site-scout .sc-reason__title {
  min-height:calc(1.48em * 4);
  font-size:14px;
  line-height:1.48;
  margin-bottom:14px;
}
.site-scout .sc-reason__icon { width:92px; margin-bottom:14px; }
.site-scout .sc-reason__body { font-size:12px; line-height:1.78; }

/* Steps */
.site-scout .sc-steps { background:linear-gradient(180deg,#eef6fb 0%,#ffffff 100%); }
.site-scout .sc-step-list { gap:58px; max-width:960px; }
.site-scout .sc-step { padding:30px 22px 26px; border-radius:24px; }
.site-scout .sc-step__label { padding:5px 17px; background:#23466f; margin-bottom:15px; }
.site-scout .sc-step__title { font-size:17px; margin-bottom:16px; }
.site-scout .sc-step__icon { width:112px; }
.site-scout .sc-step__body { font-size:12.5px; }
.site-scout .sc-step + .sc-step::before { left:-38px; width:15px;height:15px; opacity:.72; }

/* Calm */
.site-scout .sc-calm__grid { gap:20px; }
.site-scout .sc-calm__item {
  padding:26px;
  border:1px solid rgba(70,126,174,.08);
  border-radius:22px;
  background:linear-gradient(135deg,#f8fbfe 0%,#eef6fb 100%);
}
.site-scout .sc-calm__icon { width:60px; }
.site-scout .sc-calm__text h3 { font-size:15.5px; }

/* Support */
.site-scout .sc-support { background:linear-gradient(180deg,#ffffff 0%,#eef6fb 100%); }
.site-scout .sc-support__lead { margin-top:-20px; margin-bottom:34px; }
.site-scout .sc-plan-list { gap:16px; }
.site-scout .sc-plan { padding:22px 20px 20px; border-radius:22px; }
.site-scout .sc-plan__head { min-height:48px; }
.site-scout .sc-plan__title { font-size:14px; }
.site-scout .sc-plan__spec { gap:7px; }
.site-scout .sc-plan__price {
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #e6edf3;
  font-size:13px;
}
.site-scout .sc-plan__price span { font-size:29px; letter-spacing:-.02em; }
.site-scout .sc-support__notes {
  margin-top:30px;
  padding:18px 20px;
  border-radius:16px;
  background:rgba(255,255,255,.58);
}

/* Who */
.site-scout .sc-who { background:#f7fafc; }
.site-scout .sc-who__grid--single { grid-template-columns:minmax(0,1fr) 290px; max-width:940px; gap:34px; }
.site-scout .sc-who__card { padding:30px 32px; border-radius:24px; }
.site-scout .sc-who__card p { font-size:13.5px; line-height:1.95; }
.site-scout .sc-who__name { font-size:22px !important; }
.site-scout .sc-who__balloon { top:-4px; left:-12px; box-shadow:0 8px 24px rgba(45,92,135,.08); }

/* Closing CTA */
.site-scout .sc-cta {
  position:relative;
  overflow:hidden;
  padding:72px 0 76px;
  background:linear-gradient(135deg,#eaf5fc 0%,#d8ecf8 55%,#cae3f3 100%);
}
.site-scout .sc-cta::before {
  content:"";
  position:absolute;
  width:360px;height:360px;border-radius:50%;
  right:-120px;top:-190px;
  background:rgba(255,255,255,.3);
}
.site-scout .sc-cta__inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px; position:relative; }
.site-scout .sc-cta__text { flex:1 1 320px; max-width:420px; }
.site-scout .sc-cta__title { font-size:clamp(24px,3vw,32px); line-height:1.45; }
.site-scout .sc-cta__text p { font-size:13.5px; }
.site-scout .sc-cta .sc-line-btn {
  width:min(380px,100%);
  flex:0 0 auto;
  min-height:76px;
  padding:14px 18px;
}
.site-scout .sc-cta .sc-line-btn__mark { width:46px; height:46px; }
.site-scout .sc-cta .sc-line-btn__main { font-size:clamp(17px,1.8vw,21px); }
.site-scout .sc-cta .sc-line-btn__sub { font-size:11px; }

/* Responsive */
@media screen and (max-width:1024px) {
  .site-scout .sc-hero { min-height:620px; }
  .site-scout .sc-reason-list { grid-template-columns:repeat(2,1fr); gap:24px 18px; }
  .site-scout .sc-reason__title { min-height:0; }
  .site-scout .sc-plan-list { grid-template-columns:repeat(2,1fr); }
  .site-scout .sc-cta__inner { grid-template-columns:1fr; max-width:760px; margin-inline:auto; text-align:center; }
  .site-scout .sc-cta .sc-line-btn { margin-inline:auto; }
}

@media screen and (max-width:767px) {
  .site-scout .sc-inner { width:calc(100% - 28px); }
  .site-scout .sc-sect { padding:56px 0; }
  .site-scout .sc-sect__title { font-size:24px; margin-bottom:30px; }

  .site-scout .sc-hero { min-height:0; padding:0 0 44px; display:block; }
  .site-scout .sc-hero__bg { height:260px; margin-bottom:6px; }
  .site-scout .sc-hero__bg img { object-position:68% 34%; }
  .site-scout .sc-hero__bg::after {
    background:linear-gradient(180deg,rgba(234,244,253,0) 42%,rgba(234,244,253,.74) 72%,#eaf4fd 100%);
  }
  .site-scout .sc-hero__eyebrow { margin-top:-2px; margin-bottom:14px; font-size:11px; padding:5px 11px; }
  .site-scout .sc-hero__title { font-size:clamp(39px,13vw,52px); margin-bottom:18px; }
  .site-scout .sc-hero__lead { font-size:13.5px; line-height:1.8; margin-bottom:22px; }
  .site-scout .sc-badges { display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:20px; }
  .site-scout .sc-badge { width:100%; min-width:0; padding:9px 12px; }
  .site-scout .sc-line-btn { min-height:78px; padding:13px 14px; border-radius:16px; gap:10px; }
  .site-scout .sc-line-btn__mark { width:48px;height:48px;border-radius:14px; }
  .site-scout .sc-line-btn__main { font-size:19px; }
  .site-scout .sc-line-btn__sub { font-size:10.5px; }
  .site-scout .sc-hero__checks { margin-top:18px; }
  .site-scout .sc-hero__checks li { font-size:12.5px; padding-left:28px; }
  .site-scout .sc-hero__note { font-size:10.5px; }

  .site-scout .sc-doubt__grid { grid-template-columns:1fr; gap:18px; padding:24px 18px; border-radius:22px; }
  .site-scout .sc-doubt__img { width:150px; }
  .site-scout .sc-doubt__list li { font-size:13.5px; padding-left:25px; }
  .site-scout .sc-doubt__close { font-size:14px; line-height:1.7; }

  .site-scout .sc-reason-list { grid-template-columns:1fr; gap:24px; }
  .site-scout .sc-reason { padding:26px 16px 18px; border-radius:20px; }
  .site-scout .sc-reason__title { font-size:14px; }
  .site-scout .sc-reason__body { font-size:12px; }

  .site-scout .sc-step-list { gap:38px; }
  .site-scout .sc-step { padding:26px 18px 22px; }
  .site-scout .sc-step + .sc-step::before { top:-26px; }

  .site-scout .sc-calm__item { padding:20px 18px; gap:14px; }
  .site-scout .sc-calm__icon { width:50px; }

  .site-scout .sc-plan-list { grid-template-columns:1fr; gap:14px; }
  .site-scout .sc-plan { padding:20px 18px; }
  .site-scout .sc-support__notes { padding:16px; }

  .site-scout .sc-who__grid,
  .site-scout .sc-who__grid--single { grid-template-columns:1fr; gap:24px; }
  .site-scout .sc-who__card { padding:24px 20px; }
  .site-scout .sc-who__img { width:230px; }

  .site-scout .sc-cta { padding:56px 0 60px; }
  .site-scout .sc-cta__inner { gap:26px; }
  .site-scout .sc-cta__title { font-size:24px; }
}


/* ================================================================
   FV（ファーストビュー）の修正 3点 ── 2026-08-20 美穂さん指示

   🔴 なぜCSSだけで直しているか
     本来 ①#を消す ②ボタンを差し替える はHTML（page-scout.php）を直すのが素直。
     ただし 2026-08-20 時点で page-scout.php は **別セッションが編集中**
     （利用規約10/25改定の告知バーの作業）で、同じファイルを同時に触ると
     どちらかの作業が消える。そのためこのファイル側だけで完結させている。
     あちらの作業が終わったら、②はHTMLに移すほうが素直（下のコメント参照）。

   ① 女性のイラストをもっと左に
   ② タイトルの「#」を消す
   ③ ボタンをトップページと同じものにする
   ================================================================ */

/* ---- ① 写真の見せ方 ------------------------------------------------
   object-position の % を大きくすると、切り抜き位置が右へ寄る＝
   写っている人物は左へ動く。62% → 100% で女性を左に寄せた。 */
.site-scout .sc-hero__bg img {
	object-position: 100% 28%;
}

/* ---- ② タイトルの「#」 ---------------------------------------------
   display:none なので読み上げにも出ない。
   HTML側の <span class="sc-hash"># は残っているので、戻したくなったら
   このルールを消すだけでよい。 */
.site-scout .sc-hash {
	display: none;
}

/* 「#」が消えたぶん、行頭の位置と下線の長さを整える */
.site-scout .sc-hero__title {
	letter-spacing: .02em;
}

/* ---- ③ LINEボタン ---------------------------------------------------
   トップページ（front-section-lp.php の .lp-line-btn）と同じ画像ボタン
   assets/img/lp-top/btn-line.webp を使う。

   ⚠️ url() の書き方に注意。このCSSは assets/ 直下にあるので
      "img/..." が assets/img/ を指す。"../img/..." と書くと404になる。

   ⚠️ 画像は 685px 幅なので、これ以上大きく表示するとぼやける。
      大きくしたい場合は画像そのものを作り直すこと。

   HTML側の <span> は消さずに display:none で隠している（別セッションが
   page-scout.php を編集中のため）。あちらが終わったら、
   <a class="sc-line-btn"><img src=".../btn-line.webp"></a> の形に
   置き換えたほうが素直。そのときはこのブロックを消す。 */
.site-scout .sc-line-btn,
.site-scout .sc-line-btn--round {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: min(400px, 100%);
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--sc-text-sub);
}

.site-scout .sc-line-btn::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 685 / 142;
	background: url("img/lp-top/btn-line.webp") center / contain no-repeat;
	transition: transform .18s ease, filter .18s ease;
}

.site-scout .sc-line-btn:hover,
.site-scout .sc-line-btn:focus-visible {
	transform: none;
	box-shadow: none;
	color: var(--sc-text-sub);
}

.site-scout .sc-line-btn:hover::before,
.site-scout .sc-line-btn:focus-visible::before {
	transform: translateY(-2px);
	filter: brightness(1.03);
}

/* 画像に文字が入っているので、HTML側の文字は隠す。
   ただし「友だち追加は1分で終わります」だけはボタンの下に残す。 */
.site-scout .sc-line-btn__mark,
.site-scout .sc-line-btn__main,
.site-scout .sc-line-btn__arrow {
	display: none;
}

.site-scout .sc-line-btn__body {
	flex: 0 0 auto;
	text-align: center;
}

.site-scout .sc-line-btn__sub {
	margin: 0;
	font-size: 12.5px;
	font-weight: 500;
	opacity: 1;
	color: var(--sc-text-sub);
}

@media screen and (max-width: 767px) {
	.site-scout .sc-line-btn,
	.site-scout .sc-line-btn--round {
		width: min(340px, 100%);
		margin-inline: auto;
	}
}

/* ---- スマホの取りこぼし ----------------------------------------------
   ちゃっぴー版が .sc-hero__bg に width:51% を（メディアクエリの外で）
   指定したため、スマホでも写真が画面の半分しか使われず、右側が
   ぽっかり空いていた。スマホは全幅に戻す。
   ボタンも、ちゃっぴー版のスマホ用の高さ・余白指定が残っていたので消す。 */
@media screen and (max-width: 767px) {
	.site-scout .sc-hero__bg {
		width: 100%;
	}

	/* 横長の帯なので、人物が切れないよう中央寄りで見せる */
	.site-scout .sc-hero__bg img {
		object-position: 62% 30%;
	}

	.site-scout .sc-line-btn,
	.site-scout .sc-line-btn--round {
		min-height: 0;
		padding: 0;
		border-radius: 0;
		/* 見出し・バッジ・チェックが左揃えなので、ボタンも左に揃える */
		margin-inline: 0;
	}

	/* 末尾のCTAだけは中央のレイアウトなので、そこは中央のまま */
	.site-scout .sc-cta__inner .sc-line-btn {
		margin-inline: auto;
	}
}


/* ================================================================
   FV 追加の2点 ── 2026-08-20 美穂さん指示（第2弾）

   ④ ヒーロー写真と背景の境目がくっきり出ていたので、ぼかす
   ⑤ 3つのバッジのアイコンが薄いので、濃くする
   ================================================================ */

/* ---- ④ 写真の境目をぼかす ------------------------------------------
   これまでは写真の上に半透明の帯（::after）を重ねて左端を隠していたが、
   写真そのものは四角いまま終わっていたので、左に縦の線が見えていた。
   写真自体をマスクで少しずつ透明にして、背景に溶かす。

   ・横方向 … 左端を完全に透明にして、右へ向かって徐々に出す
   ・縦方向 … 下端も少し透明にして、次のセクションとの境目も和らげる
   mask-composite: intersect で「両方かかっている所だけ見える」ようにしている。 */
.site-scout .sc-hero__bg {
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 12%, rgba(0, 0, 0, .72) 30%, #000 46%),
		linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
	mask-image:
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 12%, rgba(0, 0, 0, .72) 30%, #000 46%),
		linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
	-webkit-mask-composite: source-in; /* Safari 用 */
	mask-composite: intersect;
}

/* マスクで溶かすようになったので、重ねていた帯は薄くしてよい。
   （残しておくと写真の色が浮くため、ごく薄い色味の統一だけに使う） */
.site-scout .sc-hero__bg::after {
	background: linear-gradient(90deg, rgba(238, 246, 252, .40) 0%, rgba(238, 246, 252, .18) 34%, rgba(238, 246, 252, 0) 62%);
}

/* ---- ⑤ バッジのアイコンを濃く --------------------------------------
   🔴 CSSのfilterでは直せなかった。素材（assets/img/lp-scout/badge-*.webp）
      そのものを作り直して対応している。

   ・contrast() は「中間の明るさ」を軸に効くので、もともと明るい線に
     かけると **かえって白に近づいて薄くなる**。逆効果だった。
   ・brightness() で暗くすると白地まで灰色になり、mix-blend-mode: multiply で
     四角い影が出る。これも使えない。
   → 正解は「白は白のまま、インクの量だけ増やす」変換
     （v' = 255 - (255 - v) × 2.8）を画像側に焼き込むこと。
     元素材はデスクトップ「DH LP素材」に残っているので、
     濃さを変えたくなったら係数を変えて作り直せばよい。
     40px表示に対して4倍の160pxで書き出している。

   同じ薄さの問題は、個別サポートのカードのアイコン（34px）と
   「しつこい連絡は、ありません」のアイコン（54px）にも残っている。
   同じ処理をかければ揃うが、2026-08-20 時点では指示があったバッジのみ。 */

/* 丸の下地は薄いままにして、濃くなったアイコンを引き立てる */
.site-scout .sc-badge__icon {
	background: #edf5fb;
}

/* スマホは写真が横いっぱいなので、左のぼかしは不要（人物まで薄くなる）。
   下の境目だけ和らげる。 */
@media screen and (max-width: 767px) {
	.site-scout .sc-hero__bg {
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
		-webkit-mask-composite: source-over;
		mask-composite: add;
	}
}


/* ================================================================
   「スカウトって、あの大量に届くやつでしょう？」のイラスト差し替え
   ── 2026-08-20 美穂さん指示

   運営者セクションと同じ2人のイラストを使い回していたが、
   専用のイラスト（doubt-scout-flood.webp）に差し替えた。
   縦長（4:5）なので、正方形前提だった枠を広げて縦位置も整える。
   ================================================================ */
.site-scout .sc-doubt__grid {
	grid-template-columns: 300px 1fr;
	align-items: center;
}

.site-scout .sc-doubt__img img {
	width: 100%;
}

@media screen and (max-width: 767px) {
	/* 上の 300px 1fr はメディアクエリの外にあるので、スマホでは1カラムに戻す
	   （戻さないと、狭い画面で文章が縦長に潰れる） */
	.site-scout .sc-doubt__grid {
		grid-template-columns: 1fr;
	}

	.site-scout .sc-doubt__img {
		width: 210px;
	}
}


/* ================================================================
   「あの大量に届くやつでしょう？」── イラストを白いカードの外に出す
   ── 2026-08-20 美穂さん指示

   これまでは白いカードの中にイラストと箇条書きの両方を入れていたため、
   イラストが小さくしか置けず窮屈だった。
   カードの見た目は「箇条書き」の側だけに移し、イラストはカードの外で
   大きく置いて、カードの左端に少し重ねる。
   ================================================================ */

/* 外側の枠は、ただの配置用に戻す（カードの見た目を外す） */
.site-scout .sc-doubt__grid {
	grid-template-columns: 400px 1fr;
	max-width: 1000px;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	align-items: center;
}

/* イラストはカードの外。大きく、カードより手前に */
.site-scout .sc-doubt__img {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* カードの見た目はこちらへ。左側はイラストが重なるぶん広めに空ける */
.site-scout .sc-doubt__list {
	position: relative;
	margin-left: -60px;
	padding: 42px 44px 42px 96px;
	border: 1px solid rgba(70, 126, 174, .10);
	border-radius: 28px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 14px 36px rgba(46, 88, 124, .055);
}

@media screen and (max-width: 1024px) {
	.site-scout .sc-doubt__grid {
		grid-template-columns: 320px 1fr;
	}

	.site-scout .sc-doubt__list {
		padding: 34px 32px 34px 80px;
	}
}

@media screen and (max-width: 767px) {
	/* スマホは縦積み。イラストを大きく見せて、カードはその下に重ねる */
	.site-scout .sc-doubt__grid {
		grid-template-columns: 1fr;
		gap: 0;
		justify-items: center;
	}

	.site-scout .sc-doubt__img {
		width: 250px;
		margin-bottom: -34px;
	}

	.site-scout .sc-doubt__list {
		width: 100%;
		margin-left: 0;
		padding: 46px 22px 26px;
		border-radius: 22px;
	}
}

/* ---- イラストの背景を透過に（2026-08-20 美穂さん指示）--------------
   doubt-scout-flood.webp を、外側の背景だけを切り抜いたアルファ付きに
   差し替えた。

   🔴 やり方を一度間違えているので、次に同じことをするときの注意。
      最初は「明るいピクセルほど透明にする」（α = 1 - min(R,G,B)/255）で
      作ったが、これは **絵の中身まで半透明になる**。
      女の子の服も、吹き出しの白い塗りも透けて、後ろのカードが見えてしまった。
      美穂さんの指摘どおり、正しいのは「背景だけ抜く」＝切り抜き:
        ① ink = 255 - min(R,G,B) で「描かれている量」を出す
        ② ink がしきい値（22）未満を白として2値化
        ③ **画像の外周から塗りつぶし**て、外とつながっている白だけを背景と判定
        ④ その領域だけ α=0。吹き出しの中のように閉じた白は残る
        ⑤ 切り口を 0.6px ぼかしてギザギザを消す
      副産物として容量も軽い（半透明だらけだと圧縮が効かない）:
        中身まで透過 181KB → 背景だけ切り抜き 76KB

   透過版の元ファイルはデスクトップ「DH LP素材」の
   doubt-scout-flood_透過.png。

   🔴 本当に透明になったので、白飛ばし用の mix-blend-mode: multiply は外す。
      残すと、重なっているカードの色を拾って絵が濁る。 */
.site-scout .sc-doubt__img img {
	mix-blend-mode: normal;
}

/* ================================================================
   「あの大量に届くやつでしょう？」── 白いカードをやめる
   ── 2026-08-20 美穂さん指示（案X）

   経緯を残しておく:
   ① もとは白いカードにイラストと3行を両方入れていた
      → カードが中身に対して大きすぎ、右半分が空いて箱だけが浮いていた
   ② 3行を吹き出しにしてみた
      → **イラストの中の通知の吹き出しとダブる**と指摘され不採用
   ③ 箱を使わず、各行の左に細い縦線を引く形に（これが採用）
      線が文字のすぐ横にあるので3行が一つのかたまりに見え、
      下の「スカウトが届くまで」の STEP 1・2・3 とも見た目がぶつからない。

   「イラストの縦幅とテキストの縦幅を大体合わせて。文字は大きくしてOK」
   との指示なので、flex + justify-content:space-between で
   イラストの高さいっぱいに3行を配り、文字は 15px → 20px にしている。

   ⚠️ 日本語で text-wrap:balance を使わないこと。
      「歯科医院か／ら、」のように語の途中で折れる（一度踏んだ）。
      3行とも1行に収まる幅（max-width:680px）を確保して回避している。
   ================================================================ */
.site-scout .sc-doubt__grid {
	grid-template-columns: 380px 1fr;
	gap: 44px;
	align-items: stretch;
}

.site-scout .sc-doubt__img {
	display: flex;
	align-items: center;
}

/* カードの見た目を外して、イラストの横に3行を置く箱にする。
   🔴 一度 justify-content:space-between でイラストの高さいっぱいに
      引き伸ばしたが、行間が空きすぎてバランスが悪かった（美穂さん指摘）。
      中央寄せ＋ほどよい gap に変更している。イラストの高さに無理に
      合わせないこと。 */
.site-scout .sc-doubt__list {
	align-self: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 34px;
	max-width: 680px;
	margin-left: 0;
	padding: 26px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.site-scout .sc-doubt__list li {
	position: relative;
	padding: 4px 0 4px 26px;
	border-left: 5px solid #9fc7ea;
	border-radius: 3px;
	font-size: 20px;
	line-height: 1.7;
	font-weight: 500;
	color: #31465c;
}

/* もとの丸ポチは使わない（左の縦線が役割を引き継ぐ） */
.site-scout .sc-doubt__list li::before {
	content: none;
}

@media screen and (max-width: 1024px) {
	.site-scout .sc-doubt__grid {
		grid-template-columns: 300px 1fr;
		gap: 30px;
	}

	.site-scout .sc-doubt__list li {
		font-size: 17px;
	}
}

@media screen and (max-width: 767px) {
	/* スマホは1カラム。高さを合わせる意味がないので普通に積む */
	.site-scout .sc-doubt__grid {
		grid-template-columns: 1fr;
		gap: 22px;
		justify-items: stretch;
	}

	.site-scout .sc-doubt__img {
		width: 250px;
		margin: 0 auto;   /* カードが無くなったので、重ねる指定も外す */
	}

	.site-scout .sc-doubt__list {
		display: grid;
		gap: 18px;
		align-self: auto;
		max-width: none;
		padding: 0;
	}

	.site-scout .sc-doubt__list li {
		padding: 2px 0 2px 18px;
		border-left-width: 4px;
		font-size: 15px;
		line-height: 1.7;
	}
}


/* ================================================================
   「DHのミカタは、届き方が違います」── 5列をやめて横長カード5段に
   ── 2026-08-20 美穂さん指示「アイコンも文字も小さくて見にくい」

   原因は5列に詰め込んでいたこと。1枚あたり200pxしかないので、
   文字を大きくすると改行だらけになって余計に読みにくくなる（実際に試した）。
   列を減らさないと解決しない。

   横長を選んだ理由:
   **5つの説明文の長さが揃っていない。** 2番と4番は法くんゲートで説明を
   足したぶん長く、1番・3番は2行しかない。横並びだと短いカードに大きな
   余白ができるが、横長なら中身に合った高さになって無駄が出ない。

   アイコンも薄かったので、素材側を濃くしている（インク量1.8倍・320px）。
   やり方は上の「バッジのアイコンを濃く」のコメントを参照。
   ================================================================ */
.site-scout .sc-reason-list {
	grid-template-columns: 1fr;
	gap: 18px;
	max-width: 920px;
	margin-inline: auto;
}

.site-scout .sc-reason {
	display: grid;
	grid-template-columns: 150px 1fr;
	align-items: center;
	column-gap: 32px;
	padding: 30px 36px 30px 30px;
	text-align: left;
}

.site-scout .sc-reason__num {
	top: -12px;
	left: 20px;
	width: 34px;
	height: 34px;
	font-size: 17px;
}

/* アイコンは左側で2行ぶんをまたぐ */
.site-scout .sc-reason__icon {
	grid-row: 1 / span 2;
	width: 130px;
	margin: 0;
}

.site-scout .sc-reason__title {
	grid-column: 2;
	margin-bottom: 10px;
	min-height: 0;          /* 5列時代の高さ揃えはもう不要 */
	font-size: 19px;
}

.site-scout .sc-reason__body {
	grid-column: 2;
	font-size: 15px;
	line-height: 1.9;
}

@media screen and (max-width: 1024px) {
	.site-scout .sc-reason {
		grid-template-columns: 120px 1fr;
		column-gap: 24px;
		padding: 26px 28px 26px 24px;
	}

	.site-scout .sc-reason__icon { width: 104px; }
	.site-scout .sc-reason__title { font-size: 17px; }
	.site-scout .sc-reason__body { font-size: 14px; }
}

@media screen and (max-width: 767px) {
	/* スマホは幅が足りないので、アイコン＋見出しを上、本文を下に回す */
	.site-scout .sc-reason-list {
		gap: 16px;
	}

	.site-scout .sc-reason {
		grid-template-columns: 84px 1fr;
		grid-template-areas:
			"icon title"
			"body body";
		column-gap: 16px;
		align-items: center;
		padding: 26px 18px 20px;
	}

	/* 🔴 grid-area のあとに grid-row / grid-column を書かないこと。
	   grid-area は行と列の指定をまとめたものなので、あとから
	   grid-column:auto と書くと名前で置いた位置が解除され、
	   勝手な場所に流し込まれる（実際にスマホが崩れた）。 */
	.site-scout .sc-reason__icon {
		width: 84px;
		grid-area: icon;
	}

	.site-scout .sc-reason__title {
		align-self: center;
		margin-bottom: 0;
		font-size: 15px;
		grid-area: title;
	}

	.site-scout .sc-reason__body {
		margin-top: 14px;
		font-size: 13.5px;
		line-height: 1.85;
		grid-area: body;
	}
}


/* ---- 見出しを1行に（2026-08-20 美穂さん指示）------------------------
   HTML側の見出しには <br> が入っている。5列で1枚200pxだった頃に
   改行位置を揃えるために入れたもの。横長カードになって幅に余裕が
   できたので、その改行を止めて1行で見せる。

   <br> は page-scout.php 側に残したまま display:none で消している
   （別セッションが同じファイルを触ることがあるため）。
   幅が足りなくなれば普通に折り返すので、消しても困らない。

   いちばん長い2番の見出しが1行に収まるよう、カードの最大幅を
   920px → 1020px に広げている。 */
.site-scout .sc-reason-list {
	max-width: 1020px;
}

.site-scout .sc-reason__title br {
	display: none;
}

@media screen and (max-width: 1024px) {
	/* 幅が足りないので、ここから下は普通に折り返させる */
	.site-scout .sc-reason__title br {
		display: inline;
	}
}


/* ================================================================
   アイコンの背景を透過に ── 2026-08-20 美穂さん指示

   イラストと同じで、これまでは白地の画像を mix-blend-mode: multiply で
   白飛ばししていただけだった。素材の背景が純白ではなく 252〜253 なので、
   白いカードの上でうっすら四角く浮いて見えていた。

   assets/img/lp-scout/ の全アイコンを、外側の背景だけ切り抜いた
   アルファ付きに差し替えた（やり方は上のイラストのコメントと同じ。
   外周からの塗りつぶしなので、スマホの画面や吹き出しの中の白は残る）。

   🔴 本当に透明になったので、白飛ばし用の multiply は全部やめる。
      残すと、重なった背景の色を拾って絵が濁る。
   ================================================================ */
.site-scout .sc-badge__icon img,
.site-scout .sc-reason__icon img,
.site-scout .sc-step__icon img,
.site-scout .sc-calm__icon img,
.site-scout .sc-plan__icon img,
.site-scout .sc-who__img img,
.site-scout .sc-doubt__img img {
	mix-blend-mode: normal;
}


/* ================================================================
   読みやすさの底上げ（FV・STEP・しつこい連絡・個別サポート）
   ── 2026-08-20 美穂さん指示「文字が薄くて小さい」「アイコンも大きく」

   ちゃっぴー版は本文の多くを --sc-text-sub（#718093）の12〜13pxで
   組んでいた。見出しとの差をつける意図だが、スマホで読むには薄く小さい。
   本文は --sc-text（濃いほう）に寄せ、サイズも1〜2段上げる。
   注記（※〜）だけは今までどおり控えめのままにしている。

   アイコンは表示サイズを上げたぶん、素材も解像度を上げて作り直した
   （薄かったものはインク1.8倍。やり方は上のコメント参照）。
   ================================================================ */

/* ---- FV ---------------------------------------------------------- */
.site-scout .sc-hero__lead {
	font-size: clamp(15px, 2vw, 18px);
	line-height: 2;
}

.site-scout .sc-badge__icon {
	width: 48px;
	height: 48px;
}

.site-scout .sc-badge__icon img {
	width: 42px;
	height: 42px;
}

.site-scout .sc-badge__text {
	font-size: 14px;
	line-height: 1.45;
}

.site-scout .sc-hero__checks li {
	font-size: 16px;
}

.site-scout .sc-hero__note {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--sc-text);
}

/* ---- スカウトが届くまで（STEP）----------------------------------- */
.site-scout .sc-step__icon {
	width: 150px;
}

.site-scout .sc-step__title {
	font-size: 18px;
}

.site-scout .sc-step__body {
	font-size: 15px;
	line-height: 1.9;
	color: var(--sc-text);
}

.site-scout .sc-steps__note {
	font-size: 13.5px;
	color: var(--sc-text);
}

/* ---- 連絡は、自分で止められます ----------------------------------- */
/* アイコンは 60px → 92px → 120px と2回上げている（美穂さん指示）。
   素材は240pxで書き出してあるので、この表示サイズでちょうど2倍。
   これ以上大きくするなら素材から作り直すこと。 */
.site-scout .sc-calm__icon {
	width: 120px;
}

.site-scout .sc-calm__item {
	gap: 26px;
	align-items: center;
}

.site-scout .sc-calm__text h3 {
	font-size: 17px;
	margin-bottom: 10px;
}

.site-scout .sc-calm__text p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--sc-text);
}

.site-scout .sc-calm__note {
	font-size: 13px;
	line-height: 1.8;
}

/* ---- 使いたい方だけの「個別サポート」------------------------------ */
.site-scout .sc-support__lead {
	font-size: 16px;
}

.site-scout .sc-plan__icon {
	width: 52px;
}

.site-scout .sc-plan__title {
	font-size: 16px;
	line-height: 1.45;
}

.site-scout .sc-plan__spec li {
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--sc-text);
}

.site-scout .sc-plan__spec li::before {
	top: .68em;
}

.site-scout .sc-support__notes li {
	font-size: 12.5px;
	line-height: 1.85;
}

@media screen and (max-width: 767px) {
	.site-scout .sc-step__icon { width: 128px; }
	.site-scout .sc-step__title { font-size: 17px; }
	.site-scout .sc-step__body { font-size: 14.5px; }
	.site-scout .sc-calm__icon { width: 74px; }
	.site-scout .sc-calm__text p { font-size: 14.5px; }
	.site-scout .sc-plan__spec li { font-size: 13.5px; }
	.site-scout .sc-hero__checks li { font-size: 15px; }
}

/* ---- 個別サポートは2列に ------------------------------------------
   文字を大きくしたら、4列（1枚250px）では見出しが
   「メッセージ相談（3往／復）」のように途中で折り返してしまった。
   列を減らさないと解決しないのは、上の5カードのときと同じ。
   2列なら1枚約500pxで、見出しも本文も素直に収まる。 */
.site-scout .sc-plan-list {
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	max-width: 940px;
	margin-inline: auto;
}

.site-scout .sc-plan {
	padding: 26px 28px 22px;
}

.site-scout .sc-plan__head {
	min-height: 0;
	gap: 14px;
	margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
	.site-scout .sc-plan-list {
		grid-template-columns: 1fr;
	}
}


/* ================================================================
   個別サポートの注記を開閉式に ── 2026-08-20 美穂さん「長すぎる」

   🔴 中身は1文字も削っていない。特商法の広告表示（支払時期・方法／撤回・解除）と
      職安法まわりの記載で、消してよいものが無いため「畳む」だけにしてある。
      削る話が出たら必ず legal-checker を通すこと。
   🔴 いちばん効く2点（お申し込みの有無で差を設けない／職業紹介ではない）は
      sc-support__lead に出したままなので、畳んでも見えなくならない。

   形は /recruiter/ の lp-clinic-options__terms と同じ。
   あちらも「壁」と言われて開閉式にした経緯がある。
   ================================================================ */
.site-scout .sc-support__terms {
	max-width: 940px;
	margin: 30px auto 0;
	padding: 4px 22px;
	border: 1px solid rgba(70, 126, 174, .14);
	border-radius: 16px;
	background: rgba(255, 255, 255, .66);
}

.site-scout .sc-support__terms > summary {
	position: relative;
	padding: 16px 34px 16px 0;
	list-style: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: var(--sc-blue-dark);
}

.site-scout .sc-support__terms > summary::-webkit-details-marker {
	display: none;
}

/* 右端の「＋」。開いたら「−」になる */
.site-scout .sc-support__terms > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 4px;
	width: 13px;
	height: 13px;
	margin-top: -6px;
	background:
		linear-gradient(var(--sc-blue), var(--sc-blue)) center / 100% 2px no-repeat,
		linear-gradient(var(--sc-blue), var(--sc-blue)) center / 2px 100% no-repeat;
	transition: transform .2s ease;
}

.site-scout .sc-support__terms[open] > summary::after {
	background: linear-gradient(var(--sc-blue), var(--sc-blue)) center / 100% 2px no-repeat;
	transform: rotate(180deg);
}

.site-scout .sc-support__terms > summary:hover {
	color: var(--sc-blue);
}

.site-scout .sc-support__terms .sc-support__notes {
	margin: 0 0 20px;
	padding-top: 6px;
	border-top: 1px solid rgba(70, 126, 174, .14);
}

.site-scout .sc-support__terms .sc-support__notes li {
	margin-top: 14px;
}

@media screen and (max-width: 767px) {
	.site-scout .sc-support__terms {
		padding: 2px 16px;
	}

	.site-scout .sc-support__terms > summary {
		font-size: 13.5px;
		padding: 14px 30px 14px 0;
		line-height: 1.5;
	}
}


/* ================================================================
   ローンチ記念のプレゼント ── 2026-08-20 新設

   履歴書・職務経歴書 添削／メッセージ相談（3往復）を
   2027年5月31日まで無料。6月1日から課金開始（美穂さん決定）。

   🔴 本番前に必要なことは page-scout.php 側のコメントに書いてある
      （LINE側の無料分岐・利用規約第7条の手当て・法くんゲート）。
   ================================================================ */
.site-scout .sc-gift {
	max-width: 940px;
	margin: 0 auto 26px;
	padding: 26px 32px 24px;
	border: 1px solid rgba(240, 180, 41, .38);
	border-radius: 22px;
	background: linear-gradient(180deg, #fffdf4 0%, #fff8e3 100%);
	text-align: center;
}

.site-scout .sc-gift__label {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 18px;
	border-radius: 999px;
	background: #f0b429;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
}

.site-scout .sc-gift__title {
	margin-bottom: 16px;
	font-size: clamp(18px, 2.6vw, 24px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--sc-blue-dark);
}

/* 🔴 文字は大きくせず**色を濃くして**目立たせる（2026-08-25 美穂さん指示・法くんゲート）。
   字を大きくすると打消し表示（limit/term/note）も同じ比率で上げる義務が生じ、
   セクションはかえって高くなる。#e0800a は背景 #fff8e3 に対し 2.73 で AA(4.5)割れ。
   18px太字は WCAG の large text(18.66px bold) に届かないので 4.5 が必要。#a85a00 = 4.79。 */
.site-scout .sc-gift__em {
	color: #a85a00;
}

/* 🔴 「お一人1回まで」は打消し表示にしないための必須要素。
   「無料」（.sc-gift__title）の**直下**に置き、目立ちを落としすぎない
   （景表法／消費者庁「打消し表示に関する留意点」平成30年6月）。
   小さくして下の方へ動かさないこと。 */
.site-scout .sc-gift__limit {
	margin-top: -6px;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: #a35c00;   /* 3.91 → 4.84（AA）。無料を濃くした分、打消しも必ず連動させる */
}

.site-scout .sc-gift__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 16px;
}

.site-scout .sc-gift__items li {
	padding: 9px 20px;
	border: 1px solid rgba(240, 180, 41, .45);
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	color: var(--sc-blue-dark);
}

.site-scout .sc-gift__term {
	margin-bottom: 10px;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--sc-text);
}

.site-scout .sc-gift__note {
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--sc-text-sub);
}

/* 規約への導線。求職者向けページには改定の告知バーを出さない判断なので、
   /tos-20260821/ への到達はこのリンクが担っている（inc/tos-revision-notice.php 参照）。
   🔴 消さないこと。 */
.site-scout .sc-gift__legal {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--sc-text-sub);
}

.site-scout .sc-gift__legal a {
	color: var(--sc-blue-dark);
	text-decoration: underline;
}

/* ---- 対象2枚のカードの価格欄 ---- */
.site-scout .sc-plan__price--gift {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
}

.site-scout .sc-plan__price--gift .sc-plan__gift-badge {
	padding: 3px 12px;
	border-radius: 999px;
	background: #f0b429;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

.site-scout .sc-plan__price--gift .sc-plan__gift-free {
	font-size: 27px;
	font-weight: 700;
	line-height: 1.2;
	color: #e0800a;
}

/* 🔴 中の span は .sc-plan__price span（29px）に負けるので、
   親の --gift を噛ませて詳細度を上げている。
   「6月1日以降は◯円」は打消しではなく、これからの価格として小さく添える。 */
/* 「お一人1回まで」は条件そのものなので、「6月1日以降は◯円」より一段強く出す。 */
.site-scout .sc-plan__price--gift .sc-plan__gift-limit {
	font-size: 13px;
	font-weight: 700;
	color: #b8690a;
}

.site-scout .sc-plan__price--gift .sc-plan__gift-after {
	font-size: 12px;
	font-weight: 500;
	color: var(--sc-text-sub);
}

@media screen and (max-width: 767px) {
	.site-scout .sc-gift {
		padding: 22px 18px 20px;
		border-radius: 18px;
	}

	.site-scout .sc-gift__items li {
		width: 100%;
		font-size: 14px;
	}

	.site-scout .sc-gift__term {
		font-size: 13.5px;
	}
}

/* ======================================================================
   2026-08-22 美穂さんの指摘2件（スマホ実機）
   ① LINEボタンが左に寄る ② 長い注記が読みにくい
   🔴 文言は legal-checker を通った確定文なので**1文字も変えない**。
      読みやすさだけをCSSで直す。
   ====================================================================== */

/* ---- ① LINEボタンを親の中央に置く -----------------------------------
   .sc-line-btn は width:min(400px,100%) の固定幅。親が display:block ／
   text-align:start だと**左寄せになる**（FVがこれだった。画面375pxで
   左14px・右21pxの非対称になっていた）。
   flex の align-items:center は「中の要素」を揃えるだけで、
   ボタン自身の位置は動かさない。自分を中央に置くのは margin-inline:auto。 */
.site-scout .sc-line-btn,
.site-scout .sc-line-btn--round {
	margin-inline: auto;
}

/* ---- ② 長い注記を左揃えにする ---------------------------------------
   日本語の長文を text-align:center にすると、行の始まりが毎行ずれて
   目が迷子になる。sc-gift__note は 327字あり、中央揃えでは読めない。
   🔴 これは景表法の打消し表示（無料訴求に付く不利益条件）なので、
      **読みやすくすることはあっても、隠したり小さくしたりはしない。**
   見出し・キャッチ（sc-*__title / __catch / __lead の短いもの）は
   中央のままにしたいので、長文を持つクラスだけを名指しで直す。 */
.site-scout .sc-gift__note,
.site-scout .sc-support__lead,
.site-scout .sc-calm__note {
	/* 🔴 2026-08-22 美穂さん指示で center に戻した。
	      一度 left にしたが「文章を中央寄せにしてほしい」＝ページ全体の
	      デザインの統一を優先する、という判断（司令塔の読みやすさ提案より優先）。
	      長さの問題は left ではなく **開閉式で畳む** ことで解決した。 */
	text-align: center;
	text-wrap: pretty;   /* 🔴 balance は日本語で語中改行するので使わない */
}

/* 段落が続くところは行間を少し開けて、塊に見えないようにする */
.site-scout .sc-gift__note {
	line-height: 1.75;   /* 1.9 → 1.75。字も色も変えないので打消しの明瞭性は保たれる。1.7を下回らないこと */
	color: #5a6a7c;      /* var(--sc-text-sub)=#718093 は 3.80 で AA割れ。#5a6a7c = 5.22 */
}

/* 🔴 2026-08-25: 2つ目の note を <details> に畳んだため、下の note+note は空振りする。
   同じ間隔を note+more にも効かせる（弁護くん申し送り5）。 */
.site-scout .sc-gift__note + .sc-more {
	margin-top: .9em;
}

.site-scout .sc-gift__note + .sc-gift__note {
	margin-top: .9em;
}

/* ---- ③ 追従するLINE登録ボタン（2026-08-22 美穂さん指示） --------------
   トップと同じボタンを /scout/ にも出す（footer.php・Instagramは出さない）。
   🔴 ただしトップと違い、このLPは本文が画面幅いっぱいなので**行末が隠れる**。
      トップは本文カラムが狭く、重なるのは1箇所だけだった（実測）。
      そこで /scout/ のときだけ、少し小さく・下に置いて重なりを減らす。
   ⚠️ ボタン自体は同じ画像・同じリンク・同じGA4計測（cta_location=float）。 */
.ig-floating--scout {
	bottom: 16px;
}

@media (max-width: 768px) {
	.ig-floating--scout .line-float-btn {
		width: 40px;
	}
	/* 🔴 2026-08-22 撤回: ここで本文に padding-right:44px を入れたが、
	      行が短くなって折り返しが不自然になり、かえって読みにくくなった（美穂さん指摘）。
	      追従ボタンは 40px 幅・画面の一部にしか無いので、本文は逃がさない方がよい。 */
}


/* ---- ④ 長い但し書きを畳む（2026-08-22 美穂さん「文章が長すぎる」×3回）------
   🔴 文言は legal-checker / legal-counsel を通った確定文なので**1文字も変えない**。
      短くするのではなく、**畳んで見えるかさを減らす**。
   🔴 畳んでよい線引き（司令塔の判断・景表法の打消し表示の観点）:
      - 畳まない … 無料に直接付く条件（期間・対象外のメニュー・2027年6月からの価格）、
                    「初期設定です」「あとから変えられます」＝見出しの断定を打ち消す文、
                    弁護くん C-2 の3文（プロフィール未登録でも申し込める）
      - 畳んでよい … 運用上の但し書き（受付停止、期限を早めない約束、★の細かい扱い）
   見た目は既存の sc-support__terms（お支払い6項目）に合わせる。 */
.site-scout .sc-more {
	margin: 10px 0 0;
	padding: 2px 16px;
	border: 1px solid rgba(70, 126, 174, .14);
	border-radius: 14px;
	background: rgba(255, 255, 255, .6);
}

.site-scout .sc-more > summary {
	position: relative;
	padding: 12px 30px 12px 0;
	list-style: none;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sc-blue-dark);
}

.site-scout .sc-more > summary::-webkit-details-marker {
	display: none;
}

/* 開閉の矢印。開くと上を向く */
.site-scout .sc-more > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.site-scout .sc-more[open] > summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.site-scout .sc-more__body {
	margin: 0;
	padding: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.9;
	text-align: center;   /* 2026-08-22 美穂さん指示（ページ全体の中央寄せに合わせる） */
	color: var(--sc-text-sub);
}

/* 🔴 .sc-reason はスマホでは grid（アイコン列＋本文列）＋ align-items:center。
      そこへ <details> を素で置くと**84px幅の列に押し込まれ、見出しが1文字ずつ縦に並ぶ**
      （2026-08-22 に実際にそうなった）。全列にまたがらせて、上端に揃える。
   ⚠️ grid-area で名前配置しているカードもあるので、grid-column は 1 / -1 で全幅を取る。 */
.site-scout .sc-more {
	grid-column: 1 / -1;
	align-self: start;
	justify-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

/* 2026-08-22 美穂さん指示で中央寄せに統一（一度 left にしたが戻した） */
.site-scout .sc-gift__legal {
	text-align: center;
}

/* ---- 3ステップの流れ（②のカード内・2026-08-22 美穂さん選択）------------
   🔴 カード自身が青い丸の①②③を持っているので、**中の番号は別の見た目にする**
      （同じ丸数字にすると、どっちの番号か分からなくなる）。細い数字＋縦線にした。
   🔴 .sc-reason はスマホで grid なので、全幅を取らないと細い列に入る（.sc-more と同じ罠）。 */
.site-scout .sc-flow {
	grid-column: 1 / -1;
	justify-self: stretch;
	width: 100%;
	box-sizing: border-box;
	margin: 12px 0 14px;
	padding: 0 0 0 4px;
	list-style: none;
	counter-reset: scflow;
}

.site-scout .sc-flow > li {
	position: relative;
	counter-increment: scflow;
	padding: 0 0 0 30px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--sc-text);
	/* 🔴 ここだけ left のまま。番号を左端に置く手順リストなので、
	      中央寄せにすると番号と文章がバラバラに見える。 */
	text-align: left;
}

.site-scout .sc-flow > li + li {
	margin-top: 10px;
}

.site-scout .sc-flow > li::before {
	content: counter(scflow);
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--sc-blue);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	color: var(--sc-blue);
	background: #fff;
}

/* 手順どうしを縦線でつなぐ（順番に進むことが見てわかる） */
.site-scout .sc-flow > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 24px;
	left: 9.5px;
	width: 1.5px;
	height: calc(100% - 14px);
	background: rgba(52, 127, 199, .22);
}

/* 🔴 .sc-reason__body は grid の**名前付きエリア**に置かれている。
      同じクラスの <p> を2つ置くと**同じマスに重なって二重描画**になる
      （2026-08-22 に実際にそうなった。文字が重なって読めない状態）。
      3ステップの前後の文は専用クラスにして、全幅の別行に落とす。 */
.site-scout .sc-flow__lead,
.site-scout .sc-flow__after {
	grid-column: 1 / -1;
	justify-self: stretch;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--sc-text-sub);
	text-align: center;   /* 2026-08-22 美穂さん指示の中央寄せに合わせる */
}

.site-scout .sc-flow__lead {
	margin-top: 10px;
}

.site-scout .sc-flow__after {
	margin-top: 2px;
}


/* ======================================================================
   末尾CTA（「まずは、友だち追加だけ。」）── 2026-08-26

   🔴 2026-08-25 の f98b9e8（grid→flex／gap:44px→28px／ボタン560px→380px）は
      本番に出ているのに、画面上は**ほとんど変わっていなかった**。
      原因は f98b9e8 ではなく、scout.css の一番うしろにある
      `.site-scout .sc-line-btn { margin-inline: auto; }`（2026-08-22・①LINEボタンを
      親の中央に置く）。**flex の子に auto マージンが付くと、余った幅を全部そこが吸う。**
      gap:28px はその手前で確定してしまうので、見た目のすき間は
      28px + 吸い込んだ余白（1440pxで146px）＝ **174px** になっていた。
      同時に、テキストが左端まで押し出され、ボタンの右に146pxの死に余白ができていた。

   → 2カラムで並ぶ幅（1025px以上）のときだけ auto マージンを外し、
     テキストとボタンを「28pxで並んだ1組」として中央に置く。

   🔴 1024px以下は外さないこと。あちらは1カラムに折り返すレイアウトで、
      auto マージンがボタンを中央に置く役目を実際に果たしている
      （1319行目・1517行目の `.sc-cta__inner .sc-line-btn { margin-inline:auto }` が本体）。
      実測: 1440px→すき間28px/左右146px・1100px→28px/左右112px・
            1024px→変化なし・375px→変化なし（折り返して全幅）。
   ====================================================================== */
@media screen and (min-width: 1025px) {
	.site-scout .sc-cta__inner .sc-line-btn {
		margin-inline: 0;
	}
}