@charset "UTF-8";
/* =====================================================================
   榎本メソッドとは？ ページ LP改修用スタイル（独立ファイル）
   - 既存 style.css / autoptimize CSS とは混在させない
   - すべて .emLp 配下に名前空間化し、既存クラスと衝突させない
   - 配色・余白・タイポは DESIGN.md のトークンに準拠
   ===================================================================== */

.emLp {
	/* --- DESIGN.md トークン --- */
	--em-navy: #0F2942;
	--em-green: #31A094; /* 他ページと統一したブランドグリーン */
	--em-orange: #E07B39;
	--em-surface: #FFFFFF;
	--em-gray: #F5F5F5;
	--em-text: #333333;
	--em-muted: #888888;
	--em-border: #DDDDDD;

	/* spacing */
	--em-sp-xs: 4px;
	--em-sp-sm: 8px;
	--em-sp-md: 16px;
	--em-sp-lg: 24px;
	--em-sp-xl: 40px;
	--em-sp-2xl: 64px;
	--em-sp-3xl: 96px;

	/* radius */
	--em-r-sm: 4px;
	--em-r-md: 8px;
	--em-r-lg: 12px;
	--em-r-full: 9999px;

	font-family: "Noto Sans JP", sans-serif;
	color: var(--em-text);
	line-height: 1.9;
	letter-spacing: 0.03em;
	/* このサイトは html{font-size:62.5%}（1rem=10px）のため、
	   .emLp 配下のフォントは rem を使わず px で固定し、意図したサイズで表示する */
	font-size: 16px;
}

.emLp *,
.emLp *::before,
.emLp *::after {
	box-sizing: border-box;
}

/* アンカー移動の着地位置オフセット（固定ヘッダー等の被り回避）。
   スムーズスクロール自体は専用JSで1回だけ実行する（bundle.js の重複ハンドラとの競合を避けるため、
   グローバルな scroll-behavior は指定しない） */
#method-index {
	scroll-margin-top: 24px;
}

/* ---------------------------------------------------------------------
   セクション骨格
   --------------------------------------------------------------------- */
.emLp__section {
	padding: var(--em-sp-2xl) 20px;
}
.emLp__section--gray {
	background-color: var(--em-gray);
}
.emLp__section--navy {
	background-color: var(--em-navy);
	color: var(--em-surface);
}
.emLp__inner {
	max-width: 1180px;
	margin: 0 auto;
}
.emLp__inner--narrow {
	max-width: 820px;
	margin: 0 auto;
}

/* セクション見出し（英語キャプション＋日本語大見出し＋下線） */
.emLp__eyebrow {
	display: block;
	text-align: center;
	color: var(--em-orange);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.18em;
	margin: 0 0 var(--em-sp-sm);
}
.emLp__heading {
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--em-navy);
	margin: 0;
}
.emLp__section--navy .emLp__heading {
	color: var(--em-surface);
}
.emLp__heading::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background-color: var(--em-green);
	border-radius: var(--em-r-full);
	margin: var(--em-sp-md) auto 0;
}
.emLp__lead {
	text-align: center;
	color: var(--em-text);
	font-size: 16px;
	line-height: 2;
	margin: var(--em-sp-lg) auto 0;
	max-width: 760px;
}
.emLp__section--navy .emLp__lead {
	color: rgba(255, 255, 255, 0.88);
}

/* ---------------------------------------------------------------------
   イントロ（ヒーロー）
   --------------------------------------------------------------------- */
.emLp__hero {
	padding: var(--em-sp-2xl) 20px var(--em-sp-xl);
	background-color: var(--em-surface);
}
.emLp__hero-title {
	text-align: center;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--em-navy);
	margin: 0;
	position: relative;
	padding-bottom: var(--em-sp-lg);
}
.emLp__hero-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background-color: var(--em-green);
	border-radius: var(--em-r-full);
	margin: var(--em-sp-lg) auto 0;
}
.emLp__hero-text {
	max-width: 760px;
	margin: var(--em-sp-xl) auto 0;
	font-size: 16px;
	line-height: 2.05;
}
.emLp__hero-text + .emLp__hero-text {
	margin-top: var(--em-sp-md);
}

/* ---------------------------------------------------------------------
   8つの要素グリッド
   --------------------------------------------------------------------- */
.emLp__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--em-sp-md);
	margin-top: var(--em-sp-2xl);
	align-items: stretch;
	list-style: none;
	padding: 0;
}
.emLp__grid > li {
	display: contents;
}
.emLp__card {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--em-sp-lg);
	align-items: start;
	align-content: start;
	background-color: var(--em-surface);
	border: 1px solid var(--em-border);
	border-radius: var(--em-r-md);
	padding: var(--em-sp-lg);
	text-decoration: none;
	color: var(--em-text);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.emLp__card:hover,
.emLp__card:focus-visible {
	border-color: var(--em-navy);
	background-color: #FBFCFD;
	outline: none;
}
.emLp__card-icon {
	grid-column: 1;
	grid-row: 1 / span 3;
	align-self: start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -2px;
	color: var(--em-navy);
}
.emLp__card-icon svg {
	width: 34px;
	height: 34px;
	stroke-width: 1.5;
}
.emLp__card-no {
	grid-column: 2;
	grid-row: 1;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
	color: var(--em-green);
}
.emLp__card-title {
	grid-column: 2;
	grid-row: 2;
	font-size: 20px;
	font-weight: 700;
	color: var(--em-navy);
	line-height: 1.4;
	margin-bottom: 6px;
}
.emLp__card-cap {
	grid-column: 2;
	grid-row: 3;
	font-size: 15px;
	line-height: 1.75;
	color: var(--em-muted);
	margin: 0;
}
.emLp__card-cap span {
	display: block;
	position: relative;
	padding-left: 24px;
}
.emLp__card-cap span::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.5em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--em-green);
	border-bottom: 2px solid var(--em-green);
	transform: rotate(-45deg);
}
.emLp__card-cap span + span {
	margin-top: 8px;
}

/* ---------------------------------------------------------------------
   詳細ブロック
   --------------------------------------------------------------------- */
.emLp__detail {
	scroll-margin-top: 24px;
	padding: var(--em-sp-xl) 0;
	border-bottom: 1px solid var(--em-border);
}
.emLp__detail:last-child {
	border-bottom: none;
}
.emLp__detail-head {
	display: flex;
	align-items: center;
	gap: var(--em-sp-md);
	margin-bottom: var(--em-sp-lg);
}
.emLp__detail-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	color: var(--em-navy);
}
.emLp__detail-icon svg {
	width: 32px;
	height: 32px;
	stroke-width: 1.5;
}
.emLp__detail-no {
	display: block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--em-green);
}
.emLp__detail-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--em-navy);
	line-height: 1.4;
	margin: 0;
}
.emLp__detail-sub {
	font-size: 23px;
	font-weight: 700;
	color: var(--em-navy);
	line-height: 1.55;
	margin: var(--em-sp-lg) 0 var(--em-sp-sm);
	padding-left: 16px;
	border-left: 4px solid var(--em-green);
}
.emLp__detail p {
	font-size: 16px;
	line-height: 2.05;
	margin: 0 0 var(--em-sp-md);
}
.emLp__detail p:last-child {
	margin-bottom: 0;
}

/* 番号付きサブ項目（①②形式の見出し用インラインバッジ） */
.emLp__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: var(--em-r-full);
	background: var(--em-green);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	margin-right: 8px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------
   キャラクター3要素並列図
   --------------------------------------------------------------------- */
.emLp__char-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--em-sp-lg);
	margin: var(--em-sp-lg) 0;
}
.emLp__char-item {
	background: var(--em-surface);
	border: 1px solid var(--em-border);
	border-radius: var(--em-r-md);
	padding: var(--em-sp-lg);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.emLp__char-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--em-r-full);
	background: var(--em-green);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 0 auto var(--em-sp-md);
	flex-shrink: 0;
}
.emLp__char-item-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--em-navy);
	line-height: 1.55;
	margin: 0 0 var(--em-sp-sm);
}
.emLp__char-item p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--em-text);
	margin: 0;
}

/* ---------------------------------------------------------------------
   CTA（ボタン・誘導カード）
   --------------------------------------------------------------------- */
.emLp__cta {
	margin-top: var(--em-sp-xl);
	background: var(--em-surface);
	border: 1px solid var(--em-border);
	border-radius: var(--em-r-md);
	padding: var(--em-sp-xl);
	text-align: center;
}
.emLp__cta--green {
	background: var(--em-green);
	border-color: var(--em-green);
	color: #fff;
}
.emLp__cta-title {
	font-size: 23px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 var(--em-sp-md);
	color: var(--em-navy);
}
.emLp__cta--green .emLp__cta-title {
	color: #fff;
}
.emLp__cta-text {
	font-size: 16px;
	line-height: 1.85;
	margin: 0 0 var(--em-sp-lg);
}

/* ボタン */
.emLp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 280px;
	max-width: 100%;
	padding: 16px 32px;
	border-radius: var(--em-r-sm);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-decoration: none;
	line-height: 1.5;
	white-space: nowrap;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.emLp__btn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}
.emLp__btn--orange {
	background: var(--em-orange);
	color: #fff;
}
.emLp__btn--navy {
	background: var(--em-navy);
	color: #fff;
}
.emLp__btn--green {
	background: var(--em-green);
	color: #fff;
}
.emLp__btn--outline {
	background: #fff;
	color: var(--em-navy);
	border: 2px solid var(--em-navy);
}
.emLp__btn--white {
	background: #fff;
	color: var(--em-green);
}
.emLp__btn::after {
	content: "→";
	font-size: 0.95em;
}

/* 3カラムの誘導カード（プロット後） */
.emLp__promo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--em-sp-lg);
	margin-top: var(--em-sp-xl);
}
.emLp__promo {
	display: flex;
	flex-direction: column;
	background: var(--em-surface);
	border: 1px solid var(--em-border);
	border-radius: var(--em-r-md);
	padding: var(--em-sp-lg);
	text-align: center;
}
.emLp__promo-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--em-navy);
	margin: 0 0 var(--em-sp-sm);
}
.emLp__promo-text {
	font-size: 15px;
	line-height: 1.85;
	color: var(--em-text);
	margin: 0 0 var(--em-sp-lg);
	flex-grow: 1;
}
.emLp__promo .emLp__btn {
	min-width: 0;
	width: 100%;
	padding: 13px 16px;
	font-size: 15px;
}

/* ---------------------------------------------------------------------
   推敲：波線グラフ
   --------------------------------------------------------------------- */
.emLp__chart {
	margin-top: var(--em-sp-lg);
	background: var(--em-surface);
	border: 1px solid var(--em-border);
	border-radius: var(--em-r-md);
	padding: var(--em-sp-lg);
}
.emLp__chart svg {
	display: block;
	width: 100%;
	height: auto;
}
.emLp__chart-cap {
	text-align: center;
	font-size: 14px;
	color: var(--em-muted);
	margin: var(--em-sp-sm) 0 0;
}

/* ---------------------------------------------------------------------
   クロージング
   --------------------------------------------------------------------- */
.emLp__closing-text {
	text-align: center;
	font-size: 16px;
	line-height: 2.05;
	margin: var(--em-sp-lg) auto 0;
	max-width: 760px;
}
.emLp__textlink {
	display: inline-block;
	margin-top: var(--em-sp-lg);
	color: #6FC8BC;
	font-weight: 700;
	text-decoration: underline;
}
.emLp__section--navy .emLp__textlink {
	color: #6FC8BC;
}
.emLp__btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--em-sp-md);
	margin-top: var(--em-sp-xl);
	margin-bottom: 100px;
}

/* ---------------------------------------------------------------------
   詳細→一覧に戻るリンク
   --------------------------------------------------------------------- */
.emLp__backlink-wrap {
	margin: var(--em-sp-lg) 0 0;
	text-align: right;
}
.emLp__backlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--em-navy);
	text-decoration: none;
	padding: 8px 4px;
	transition: color 0.2s ease;
}
.emLp__backlink:hover {
	color: var(--em-green);
}
.emLp__backlink-arrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------
   太字（本文中の強調）
   --------------------------------------------------------------------- */
.emLp__strong {
	font-weight: 700;
	color: var(--em-navy);
}

/* ---------------------------------------------------------------------
   レスポンシブ
   --------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
	.emLp__promo-grid {
		grid-template-columns: 1fr;
	}
	.emLp__char-grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 600px) {
	.emLp__section {
		padding: var(--em-sp-xl) 16px;
	}
	.emLp__hero {
		padding: var(--em-sp-xl) 16px var(--em-sp-lg);
	}
	.emLp__hero-title {
		font-size: 28px;
	}
	.emLp__heading {
		font-size: 24px;
	}
	.emLp__grid {
		grid-template-columns: 1fr;
		gap: var(--em-sp-sm);
	}
	.emLp__card {
		padding: var(--em-sp-md);
	}
	.emLp__card-title {
		font-size: 19px;
	}
	.emLp__detail-title {
		font-size: 23px;
	}
	.emLp__detail-sub {
		font-size: 20px;
	}
	.emLp__cta {
		padding: var(--em-sp-lg) var(--em-sp-md);
	}
	.emLp__btn {
		min-width: 0;
		width: 100%;
		font-size: 15px;
		padding: 14px 16px;
	}
}