@charset "UTF-8";
/* ============================================================================
   MEO LP 専用スタイル（/meo/）
   ・すべてのセレクタを .meo-lp / .meo-lp-body 配下に閉じ、他ページへ漏らさない
   ・色・角丸・フォントは app.css の CSS変数を継承（トーンを既存サイトと揃える）
   ・モバイルファースト（紹介の場でスマホで開かれる想定）
   ========================================================================== */

/* ---------- LP専用ヘッダー（body直下・名前空間の外なので個別に限定） ---------- */
.meo-lp-body .meo-lp__header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--color-paper) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-line);
}
.meo-lp-body .meo-lp__header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1180px;
	margin-inline: auto;
	padding: 0.7rem 1.1rem;
}
/* ロゴの上にタグラインを重ねる（通常ヘッダーと同じ並び） */
.meo-lp-body .meo-lp__logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.34rem;
	text-decoration: none;
}
.meo-lp-body .meo-lp__tagline {
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--color-ink);
}
.meo-lp-body .meo-lp__tagline--pc { display: none; }
.meo-lp-body .meo-lp__logo img { height: 22px; width: auto; display: block; }
.meo-lp-body .meo-lp__header-cta {
	display: inline-flex;
	align-items: center;
	background: var(--color-brand);
	color: #fff;
	border-radius: 999px;
	padding: 0.6rem 1.15rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}
.meo-lp-body .meo-lp__header-cta:hover { background: var(--color-brand-deep); }

@media (min-width: 768px) {
	.meo-lp-body .meo-lp__header-inner { padding: 0.9rem 1.75rem; }
	.meo-lp-body .meo-lp__logo img { height: 26px; }
	.meo-lp-body .meo-lp__tagline--sp { display: none; }
	.meo-lp-body .meo-lp__tagline--pc { display: block; font-size: 11px; }
	.meo-lp-body .meo-lp__header-cta { font-size: 0.88rem; padding: 0.7rem 1.5rem; }
}

/* ---------- 基本レイアウト ---------- */
.meo-lp {
	color: var(--color-ink);
	font-family: var(--font-noto, "Noto Sans JP", sans-serif);
	overflow-x: hidden;
	padding-bottom: 5.5rem; /* モバイル固定CTA分 */
}
.meo-lp__inner {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 1.15rem;
}
.meo-lp__inner--narrow { max-width: 820px; }

.meo-lp p { line-height: 1.85; }

.meo-sec { padding-block: 3.5rem; }
.meo-sec--tint { background: var(--color-paper-3); }

/* ブランドカラー背景のセクション（課題提起など）。中の白カードはそのまま活きる */
.meo-sec--brand {
	background: var(--color-brand);
	color: #fff;
}
.meo-sec--brand .meo-sec__title,
.meo-sec--brand .meo-sec__lead { color: #fff; }

/* 赤背景の内側に置く白カードは、文字色を通常のインクに戻す
   （これをしないと親の color:#fff を継承して白地に白文字になる） */
.meo-sec--brand .meo-problem,
.meo-sec--brand .meo-card {
	color: var(--color-ink);
	border-color: transparent;
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.55);
}
.meo-sec--brand .meo-problem__title,
.meo-sec--brand .meo-problem__body,
.meo-sec--brand .meo-card__title,
.meo-sec--brand .meo-card__body { color: var(--color-ink); }
.meo-sec--brand .meo-problem__num { color: var(--color-brand); }

.meo-sec__title {
	font-weight: 700;
	line-height: 1.35;
	font-size: clamp(1.35rem, 5.2vw, 2.1rem);
	text-align: center;
	letter-spacing: 0.01em;
}
.meo-sec__lead {
	margin-top: 1.1rem;
	font-size: 0.95rem;
	color: var(--color-ink);
	text-align: justify;
}
.meo-sec__lead--center { text-align: center; }

.meo-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (min-width: 768px) {
	.meo-lp { padding-bottom: 0; }
	.meo-lp__inner { padding-inline: 2rem; }
	.meo-sec { padding-block: 5.5rem; }
	.meo-sec__lead { font-size: 1rem; }
}

/* ---------- ボタン ---------- */
.meo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 999px;
	padding: 1rem 1.6rem;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.meo-btn--primary {
	background: var(--color-brand);
	color: #fff;
	box-shadow: 0 12px 30px -12px rgba(124, 42, 35, 0.6);
}
.meo-btn--primary:hover { background: var(--color-brand-deep); color: #fff; }
.meo-btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }

/* 赤背景の上に置く反転ボタン（白地・ブランド文字） */
.meo-btn--invert {
	background: #fff;
	color: var(--color-brand);
	box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.45);
}
.meo-btn--invert:hover { background: var(--color-brand-wash); color: var(--color-brand-deep); }

/* ---------- 1. ファーストビュー ---------- */
.meo-hero {
	position: relative;
	isolation: isolate;
	padding-block: 3rem 3.5rem;
	background: var(--color-paper);
	text-align: center;
	overflow: hidden;
}
/* 背景の波（ブランド画像）。文字が読みづらくならないよう下側に寄せる */
.meo-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	pointer-events: none;
	/* 下に向かって濃く、上は白く抜く */
	-webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 42%);
	mask-image: linear-gradient(to bottom, transparent 4%, #000 42%);
}
.meo-hero__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--color-brand);
	background: #fff;
	border: 1px solid var(--color-brand-tint);
	border-radius: 999px;
	padding: 0.4rem 1rem;
}
/* アイブロウを置かない構成のため、先頭に来たときは上マージンを消す */
.meo-hero__title:first-child { margin-top: 0; }
.meo-hero__title {
	margin-top: 1.3rem;
	font-weight: 700;
	font-size: clamp(1.85rem, 8.5vw, 3.4rem);
	line-height: 1.28;
	letter-spacing: 0.005em;
}
.meo-hero__lead {
	margin: 1.4rem auto 0;
	max-width: 34rem;
	font-size: 0.95rem;
	text-align: justify;
}
.meo-hero__cta { margin-top: 2rem; width: 100%; max-width: 24rem; }
.meo-hero__note { margin-top: 0.9rem; font-size: 0.78rem; color: var(--color-ink); opacity: 0.72; }

@media (min-width: 768px) {
	.meo-hero { padding-block: 5rem 6rem; }
	.meo-hero__lead { text-align: center; font-size: 1.02rem; }
	.meo-hero__cta { width: auto; }
}

/* ---------- 2. 課題 ---------- */
.meo-problems { margin-top: 2.2rem; display: grid; gap: 1rem; }
.meo-problem {
	background: var(--color-card);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	padding: 1.5rem 1.35rem;
}
.meo-problem__num {
	font-family: var(--font-display, inherit);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.08em;
}
.meo-problem__title { margin-top: 0.5rem; font-size: 1.05rem; font-weight: 700; }
.meo-problem__body { margin-top: 0.7rem; font-size: 0.9rem; text-align: justify; }

@media (min-width: 860px) {
	.meo-problems { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
	.meo-problem { padding: 1.9rem 1.6rem; }
}

/* ---------- 3. なぜ今か（AI時代の店選び） ---------- */
.meo-why { background: var(--color-paper); }
.meo-br-sp { display: inline; }
.meo-br-pc { display: none; }   /* PCでのみ改行させる（スマホでは無効） */

/* 数字3つ */
.meo-stats { margin-top: 2.2rem; display: grid; gap: 0.9rem; }
.meo-stat {
	background: var(--color-card);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	padding: 1.3rem 1.2rem;
	text-align: center;
}
.meo-stat__num { color: var(--color-brand); font-weight: 700; line-height: 1; }
.meo-stat__num .display-num { font-size: clamp(2.2rem, 10vw, 3rem); }
.meo-stat__num small { font-size: 1rem; margin-left: 0.1em; }
.meo-stat__label { margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.65; }
.meo-stat__sub { margin-top: 0.35rem; font-size: 0.72rem; opacity: 0.6; }
.meo-stats__src { margin-top: 0.9rem; font-size: 0.7rem; line-height: 1.7; opacity: 0.55; text-align: left; }

/* 「3枠に入れば安心」の崩壊 */
.meo-why__shift { margin-top: 2.6rem; }
.meo-why__shift-title,
.meo-why__ctx-title {
	font-size: clamp(1.1rem, 4.4vw, 1.5rem);
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}
.meo-why__compare { margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.meo-why__col {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-card);
	padding: 1.4rem 1.25rem;
}
.meo-why__col--now { border-color: var(--color-brand); background: var(--color-brand-wash); }
.meo-why__col-tag {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.28rem 0.8rem;
	background: var(--color-paper-3);
}
.meo-why__col-tag--on { background: var(--color-brand); color: #fff; }
.meo-why__col-head { margin-top: 0.75rem; font-size: 1rem; font-weight: 700; }
.meo-why__col--now .meo-why__col-head { color: var(--color-brand); }
.meo-why__col-body { margin-top: 0.55rem; font-size: 0.88rem; text-align: justify; }
.meo-why__shift-note {
	margin-top: 1.2rem;
	font-size: 0.9rem;
	text-align: justify;
	padding: 1.1rem 1.2rem;
	border-left: 3px solid var(--color-brand);
	background: var(--color-paper-3);
	border-radius: 0 var(--radius, 6px) var(--radius, 6px) 0;
}

/* キーワード → 相談 */
.meo-why__ctx { margin-top: 2.8rem; }
.meo-why__queries {
	margin-top: 1.4rem;
	display: grid;
	grid-template-rows: auto auto auto;
	justify-items: center;
	gap: 0.6rem;
}
.meo-why__query {
	width: 100%;
	border-radius: var(--radius-lg, 12px);
	padding: 1.1rem 1.2rem;
	text-align: center;
	border: 1px solid var(--color-line);
	background: var(--color-card);
}
.meo-why__query p { margin-top: 0.5rem; font-size: 1.02rem; font-weight: 700; line-height: 1.5; }
.meo-why__query--new { border-color: var(--color-brand); background: var(--color-brand-wash); }
.meo-why__query--new p { color: var(--color-brand); }
.meo-why__query-tag { font-size: 0.68rem; font-weight: 700; opacity: 0.7; }
.meo-why__query-tag--on { color: var(--color-brand); opacity: 1; }
.meo-why__query-arrow { color: var(--color-brand); font-size: 1.3rem; font-weight: 700; transform: rotate(90deg); }
.meo-why__ctx-body { margin-top: 1.3rem; font-size: 0.92rem; text-align: center; }

/* 投稿の対比 */
.meo-post {
	margin-top: 1.8rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-paper-3);
	padding: 1.4rem 1.2rem;
}
.meo-post__label { font-size: 0.78rem; font-weight: 700; opacity: 0.72; }
.meo-post__grid { margin-top: 0.9rem; display: grid; gap: 0.8rem; }
.meo-post__card {
	background: var(--color-card);
	border: 1px solid var(--color-line);
	border-radius: var(--radius, 6px);
	padding: 1.1rem 1.1rem;
}
.meo-post__card--on { border-color: var(--color-brand); }
.meo-post__tag {
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.24rem 0.7rem;
	background: var(--color-paper-3);
}
.meo-post__tag--on { background: var(--color-brand); color: #fff; }
.meo-post__text { margin-top: 0.6rem; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.meo-post__card--on .meo-post__text { color: var(--color-brand); }
.meo-post__note { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.7; opacity: 0.82; }
.meo-post__concl { margin-top: 1.1rem; font-size: 0.86rem; text-align: justify; }

/* Google公式の見解 */
.meo-why__google {
	margin: 2.6rem 0 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-card);
	padding: 1.5rem 1.3rem;
}
.meo-why__google-lead { font-size: 0.8rem; opacity: 0.7; }
.meo-why__google-quote {
	margin-top: 0.7rem;
	font-size: clamp(1rem, 4vw, 1.25rem);
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-brand);
	padding-left: 0.9rem;
	border-left: 3px solid var(--color-brand);
}
.meo-why__google-body { margin-top: 1rem; font-size: 0.88rem; text-align: justify; }

@media (min-width: 768px) {
	.meo-br-sp { display: none; }
	.meo-br-pc { display: inline; }
	.meo-stats { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.8rem; }
	.meo-stat { padding: 1.8rem 1.4rem; }
	.meo-why__compare { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
	.meo-why__queries { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.1rem; }
	.meo-why__query-arrow { transform: none; font-size: 1.6rem; }
	.meo-post { padding: 1.9rem 1.8rem; }
	.meo-post__grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
	.meo-why__google { padding: 2rem 1.9rem; }
}

/* ---------- 3b. 図版 ---------- */
.meo-figure { margin: 2rem 0 0; }
.meo-figure__ph {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border: 1px dashed var(--color-brand-tint);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-brand-wash);
	color: var(--color-brand);
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
	padding: 1rem;
}
.meo-figure__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg, 12px);
	border: 1px solid var(--color-line);
	box-shadow: 0 24px 55px -34px rgba(29, 26, 24, 0.5);
}
.meo-figure__cap {
	margin-top: 0.8rem;
	font-size: 0.78rem;
	line-height: 1.75;
	opacity: 0.75;
	text-align: center;
}
.meo-figure__note { font-size: 0.72rem; opacity: 0.85; }

/* ---------- 4. 提供内容 ---------- */
.meo-cards { margin-top: 2.2rem; display: grid; gap: 1rem; }
.meo-card {
	background: var(--color-card);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	padding: 1.5rem 1.35rem;
}
.meo-card__title { font-size: 1rem; font-weight: 700; color: var(--color-brand); }
.meo-card__body { margin-top: 0.6rem; font-size: 0.88rem; text-align: justify; }

@media (min-width: 700px) { .meo-cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1000px) { .meo-cards { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 5. ★実績（中核） ---------- */
.meo-results {
	position: relative;
	isolation: isolate;
	background: var(--color-paper);
	overflow: hidden;
}
/* 左右に波、中央が空く構図。カードの背後に敷く */
.meo-results__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	opacity: 0.85;
}
/* スマホは横幅が狭く波がカードに重なるため、拡大して外へ逃がしつつ薄くする */
@media (max-width: 899px) {
	.meo-results__bg { opacity: 0.5; transform: scale(1.35); }
}
.meo-results__grid { position: relative; margin-top: 2.4rem; display: grid; gap: 1.4rem; }

.meo-result {
	background: var(--color-card);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	padding: 1.6rem 1.35rem;
	box-shadow: 0 20px 45px -34px rgba(29, 26, 24, 0.45);
}
.meo-result__industry { font-size: 1.12rem; font-weight: 700; }
.meo-result__kw { margin-top: 0.35rem; font-size: 0.74rem; opacity: 0.7; line-height: 1.6; }

/* 順位 */
.meo-result__rank {
	margin-top: 1.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	padding: 1.1rem 0.6rem;
	background: var(--color-paper-3);
	border-radius: var(--radius-lg, 12px);
}
.meo-rank__side { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 5.2rem; }
.meo-rank__label { font-size: 0.68rem; opacity: 0.65; letter-spacing: 0.06em; }
.meo-rank__before { font-size: 1.15rem; font-weight: 700; opacity: 0.5; }
.meo-rank__arrow { font-size: 1.1rem; color: var(--color-brand); }
.meo-rank__after { display: flex; align-items: baseline; gap: 0.1rem; color: var(--color-brand); }
.meo-rank__after .display-num { font-size: 2.3rem; font-weight: 700; line-height: 1; }
.meo-rank__after small { font-size: 0.9rem; font-weight: 700; }

/* 指標バー */
.meo-result__metric { margin-top: 1.3rem; }
.meo-metric__label { font-size: 0.82rem; font-weight: 700; opacity: 0.8; }
.meo-bars { margin-top: 0.85rem; display: grid; gap: 0.65rem; }
.meo-bar { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.55rem; }
.meo-bar__cap { font-size: 0.7rem; opacity: 0.65; }
.meo-bar__track { height: 0.6rem; border-radius: 999px; background: var(--color-line-soft, #f1f0ed); overflow: hidden; }
.meo-bar__fill { display: block; height: 100%; border-radius: 999px; }
.meo-bar__fill--before { background: color-mix(in srgb, var(--color-ink) 22%, transparent); }
.meo-bar__fill--after { background: var(--color-brand); }
.meo-bar__val { font-size: 0.8rem; white-space: nowrap; opacity: 0.75; }
.meo-bar__val .display-num { font-size: 1rem; font-weight: 700; margin-right: 0.1em; }
.meo-bar__val--after { color: var(--color-brand); opacity: 1; }
.meo-bar__val--after .display-num { font-size: 1.3rem; }

.meo-metric__mult {
	margin-top: 0.9rem;
	text-align: right;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--color-brand);
}
.meo-metric__mult .display-num { font-size: 1.35rem; margin-inline: 0.12em; }

.meo-results__note {
	margin-top: 1.8rem;
	font-size: 0.72rem;
	line-height: 1.75;
	opacity: 0.62;
	text-align: justify;
}

@media (min-width: 900px) {
	.meo-results__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
	.meo-result { padding: 1.9rem 1.5rem; }
	.meo-results__note { text-align: center; }
}

/* ---------- 6. 料金 ---------- */
.meo-price { margin-top: 2.2rem; }
.meo-price__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.meo-price__table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	background: var(--color-card);
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	font-size: 0.85rem;
}
.meo-price__table th,
.meo-price__table td {
	border-bottom: 1px solid var(--color-line);
	padding: 0.85rem 0.7rem;
	text-align: center;
	vertical-align: middle;
}
.meo-price__table tbody th {
	text-align: left;
	font-weight: 500;
	background: var(--color-paper-3);
	white-space: nowrap;
	font-size: 0.82rem;
}
.meo-price__corner { background: transparent; border-bottom-color: transparent; }
.meo-price__plan {
	background: var(--color-brand);
	color: #fff;
	padding: 1.1rem 0.8rem;
	line-height: 1.45;
}
.meo-price__plan--premium { background: var(--color-brand-deep); }
.meo-plan__name { display: block; font-size: 0.98rem; font-weight: 700; }
.meo-plan__catch { display: block; margin-top: 0.25rem; font-size: 0.72rem; opacity: 0.9; }
.meo-plan__for { display: block; margin-top: 0.2rem; font-size: 0.72rem; opacity: 0.82; }

.meo-fee { font-weight: 700; font-size: 1.1rem; }
.meo-fee--lg { font-size: 1.45rem; color: var(--color-brand); }
.meo-price__row--fee td { background: #fff; }
.meo-price__table td.is-premium { background: color-mix(in srgb, var(--color-brand-wash) 55%, #fff); }
.meo-check { color: var(--color-brand); font-weight: 700; }
.meo-strong { font-weight: 700; }

/* --- 料金：モバイルはカード、PCは表 --- */
.meo-price__cards { display: grid; gap: 1rem; margin-top: 2.2rem; }
.meo-pcard {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-card);
	overflow: hidden;
}
.meo-pcard--premium { border-color: var(--color-brand); }
.meo-pcard__head { background: var(--color-brand); color: #fff; padding: 1.1rem 1.2rem; }
.meo-pcard--premium .meo-pcard__head { background: var(--color-brand-deep); }
.meo-pcard__name { display: block; font-size: 1.05rem; font-weight: 700; }
.meo-pcard__catch { display: block; margin-top: 0.2rem; font-size: 0.74rem; opacity: 0.92; }
.meo-pcard__for { display: block; margin-top: 0.15rem; font-size: 0.74rem; opacity: 0.85; line-height: 1.55; }

.meo-pcard__fees { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--color-line); }
.meo-pcard__fee { padding: 0.95rem 0.8rem; text-align: center; }
.meo-pcard__fee + .meo-pcard__fee { border-left: 1px solid var(--color-line); }
.meo-pcard__fee-label { display: block; font-size: 0.7rem; opacity: 0.68; }
.meo-pcard__fee-val { display: block; margin-top: 0.2rem; font-size: 1.15rem; font-weight: 700; }
.meo-pcard__fee-val--lg { font-size: 1.5rem; color: var(--color-brand); }

.meo-pcard__list { margin: 0; padding: 0; list-style: none; }
.meo-pcard__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.7rem 1.2rem;
	font-size: 0.82rem;
}
.meo-pcard__row + .meo-pcard__row { border-top: 1px solid var(--color-line-soft, #f1f0ed); }
.meo-pcard__row-label { opacity: 0.78; }
.meo-pcard__row-val { font-weight: 500; white-space: nowrap; }
.meo-pcard__row-val.is-strong { font-weight: 700; color: var(--color-brand); }

/* 767px以下＝カードのみ、768px以上＝表のみ */
@media (max-width: 767px) {
	.meo-price__scroll { display: none; }
}
@media (min-width: 768px) {
	.meo-price__cards { display: none; }
}

.meo-price__foot { margin-top: 1.2rem; display: grid; gap: 0.9rem; }
.meo-price__multi {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-card);
	padding: 1.1rem 1.2rem;
	font-size: 0.78rem;
	line-height: 1.75;
}
.meo-price__multi-title { font-weight: 700; margin-bottom: 0.3rem; }
.meo-price__daily {
	border-radius: var(--radius-lg, 12px);
	background: var(--color-brand-deep);
	color: #fff;
	padding: 1.2rem;
	text-align: center;
}
.meo-price__daily-main { font-size: 0.98rem; font-weight: 700; }
.meo-price__daily-main .display-num { font-size: 1.2rem; }
.meo-price__daily-sub { margin-top: 0.3rem; font-size: 0.76rem; opacity: 0.86; }

@media (min-width: 860px) {
	.meo-price__foot { grid-template-columns: 1.55fr 1fr; align-items: stretch; }
	.meo-price__daily { display: grid; place-content: center; }
}


/* ---------- 7. ★流れ ---------- */
/* ---------- 6.5 投資対効果 ---------- */
.meo-roi { background: var(--color-paper); }

.meo-roi__eyebrow { text-align: center; }
.meo-roi__eyebrow span {
	position: relative;
	display: inline-block;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--color-brand);
	padding-inline: 1.4rem;
}
.meo-roi__eyebrow span::before,
.meo-roi__eyebrow span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 1px;
	height: 1.05em;
	background: var(--color-brand);
}
.meo-roi__eyebrow span::before { left: 0.35rem; transform: translateY(-50%) rotate(-22deg); }
.meo-roi__eyebrow span::after  { right: 0.35rem; transform: translateY(-50%) rotate(22deg); }

.meo-roi__title {
	margin-top: 0.7rem;
	text-align: center;
	font-weight: 700;
	line-height: 1.32;
	font-size: clamp(1.5rem, 6.4vw, 2.5rem);
	letter-spacing: 0.005em;
}
.meo-roi__title-em { color: var(--color-brand); }

.meo-roi__panel {
	margin-top: 2rem;
	background: var(--color-card);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	padding: 1.3rem 1.1rem;
	box-shadow: 0 26px 60px -40px rgba(29, 26, 24, 0.5);
}

/* --- 上段：前 → 後 --- */
.meo-roi__ba {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--color-line);
}
.meo-roi__ba-side { text-align: center; }
.meo-roi__pill {
	display: inline-block;
	font-size: 0.62rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	background: var(--color-paper-3);
	color: var(--color-ink);
	line-height: 1.3;
}
.meo-roi__pill--on { background: var(--color-brand); color: #fff; }
.meo-roi__ba-num { margin-top: 0.5rem; font-weight: 700; line-height: 1; }
.meo-roi__ba-num .display-num { font-size: clamp(1.9rem, 9vw, 3rem); }
.meo-roi__ba-num small { font-size: 0.9rem; margin-left: 0.1em; }
.meo-roi__ba-num--up { color: var(--color-brand); }
.meo-roi__ba-note { margin-top: 0.35rem; font-size: 0.62rem; opacity: 0.62; line-height: 1.4; }
.meo-roi__arrow { color: var(--color-brand); display: grid; place-items: center; }
.meo-roi__arrow svg { width: 2rem; height: auto; }

/* ゴールドのバッジ。signamのパレットに金色が無いため、ここだけローカルに定義する
   （.meo-roi__badge 配下に閉じているので他へは影響しない） */
.meo-roi__badge {
	--meo-gold: #efcd77;
	--meo-gold-lt: #f8e4ac;
	--meo-gold-ink: #6b4a12;

	position: absolute;
	right: -0.2rem;
	top: -0.6rem;
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 999px;
	background: linear-gradient(150deg, var(--meo-gold-lt), var(--meo-gold));
	color: var(--meo-gold-ink);
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1.2;
	transform: rotate(-8deg);
	box-shadow: 0 10px 24px -12px rgba(107, 74, 18, 0.55);
}
.meo-roi__badge span { font-size: 0.66rem; font-weight: 700; }
.meo-roi__badge strong { font-size: 1.15rem; }
.meo-roi__badge small { font-size: 0.55rem; font-weight: 700; }

/* --- 中段：掛け算 --- */
.meo-roi__calc {
	margin-top: 1.2rem;
	display: grid;
	gap: 0.5rem;
	align-items: stretch;
}
.meo-roi__factor {
	border: 1px solid var(--color-line);
	border-radius: var(--radius, 6px);
	padding: 0.75rem 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}
.meo-roi__factor-label { font-size: 0.72rem; opacity: 0.72; }
.meo-roi__factor-val { font-weight: 700; font-size: 0.9rem; }
.meo-roi__factor-val .display-num { font-size: 1.25rem; }
.meo-roi__op { text-align: center; color: var(--color-brand); font-weight: 700; font-size: 0.95rem; line-height: 1; }
.meo-roi__total {
	border-radius: var(--radius, 6px);
	background: var(--color-brand);
	color: #fff;
	padding: 0.95rem 1rem;
	text-align: center;
}
.meo-roi__total-label { display: block; font-size: 0.7rem; opacity: 0.92; }
.meo-roi__total-val { display: block; margin-top: 0.15rem; font-weight: 700; font-size: 0.95rem; }
.meo-roi__total-val .display-num { font-size: clamp(1.5rem, 7vw, 2.1rem); }

/* --- 下段：費用と結果 --- */
.meo-roi__bottom { margin-top: 0.6rem; display: grid; gap: 0.5rem; }
.meo-roi__cost {
	border: 1px solid var(--color-line);
	border-radius: var(--radius, 6px);
	padding: 0.85rem 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}
.meo-roi__cost-label { font-size: 0.72rem; opacity: 0.72; }
.meo-roi__cost-val { font-weight: 700; font-size: 0.9rem; }
.meo-roi__cost-val .display-num { font-size: 1.3rem; }

.meo-roi__result {
	border-radius: var(--radius, 6px);
	background: var(--color-brand); /* 「年間の売上増加額」と同じ赤に揃える */
	color: #fff;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.meo-roi__result-cell { padding: 0.95rem 0.6rem; text-align: center; }
.meo-roi__result-cell + .meo-roi__result-cell { border-left: 1px solid rgba(255, 255, 255, 0.28); }
.meo-roi__result-label { display: block; font-size: 0.66rem; opacity: 0.92; line-height: 1.4; }
.meo-roi__result-val { display: block; margin-top: 0.2rem; font-weight: 700; font-size: 0.82rem; }
.meo-roi__result-val .display-num { font-size: clamp(1.45rem, 6.4vw, 2rem); }

/* --- 補足 --- */
.meo-roi__cpa { margin-top: 1.2rem; font-size: 0.88rem; text-align: center; }
.meo-roi__cpa strong { color: var(--color-brand); font-size: 1.02rem; }

.meo-roi__stock {
	margin-top: 1.4rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	background: var(--color-brand-wash);
	padding: 1.35rem 1.25rem;
}
.meo-roi__stock-title { font-size: 0.98rem; font-weight: 700; color: var(--color-brand); }
.meo-roi__stock p { margin-top: 0.6rem; font-size: 0.88rem; text-align: justify; }

.meo-roi__notes { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.meo-roi__notes li { font-size: 0.72rem; line-height: 1.7; opacity: 0.6; text-align: justify; }

@media (min-width: 820px) {
	.meo-roi__panel { padding: 2.1rem 2rem; }
	.meo-roi__ba { gap: 1.5rem; padding-bottom: 1.8rem; }
	.meo-roi__pill { font-size: 0.76rem; padding: 0.4rem 1.1rem; }
	.meo-roi__ba-note { font-size: 0.74rem; }
	.meo-roi__arrow svg { width: 3rem; }
	.meo-roi__badge { width: 6rem; height: 6rem; right: 0; top: -0.4rem; }
	.meo-roi__badge span { font-size: 0.82rem; }
	.meo-roi__badge strong { font-size: 1.6rem; }
	.meo-roi__badge small { font-size: 0.68rem; }

	.meo-roi__calc {
		margin-top: 1.6rem;
		grid-template-columns: 1fr auto 1fr auto 1fr auto 1.5fr;
		align-items: center;
		gap: 0.6rem;
	}
	.meo-roi__factor { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.9rem 1rem; }
	.meo-roi__op { font-size: 1.2rem; }
	.meo-roi__total { padding: 1.1rem 1rem; }

	.meo-roi__bottom { grid-template-columns: 1fr 2fr; gap: 0.6rem; margin-top: 0.6rem; }
	.meo-roi__cost { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.3rem; padding: 1rem 1.1rem; }
	.meo-roi__result-cell { padding: 1.2rem 1rem; }
	.meo-roi__result-label { font-size: 0.76rem; }
	.meo-roi__cpa { font-size: 0.95rem; }
}

/* TOPの「ご相談から運用までの流れ」と同じ設計：円アイコン＋番号のグリッド */
.meo-flow { background: var(--color-paper); }
.meo-steps {
	margin: 2.6rem auto 0;
	padding: 0;
	list-style: none;
	max-width: 56rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.2rem 1.25rem;
}
.meo-step__icon-wrap { display: flex; justify-content: center; }
.meo-step__icon-wrap > span:first-child { position: relative; }
.meo-step__icon {
	display: grid;
	place-items: center;
	width: 6rem;
	height: 6rem;
	border-radius: 999px;
	background: var(--color-brand-wash);
	color: var(--color-brand);
	position: relative;
}
.meo-step__icon svg { width: 3rem; height: 3rem; }
.meo-step__num {
	position: absolute;
	left: -0.25rem;
	top: -0.25rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-brand);
	line-height: 1;
}
.meo-step { position: relative; }
.meo-step__title { margin-top: 1.1rem; text-align: center; font-size: 1rem; font-weight: 700; }
.meo-step__rule { margin-top: 0.75rem; height: 1px; width: 100%; background: var(--color-line); }
.meo-step__text { margin-top: 0.75rem; font-size: 0.82rem; line-height: 1.8; word-break: auto-phrase; }

@media (min-width: 768px) {
	.meo-steps { grid-template-columns: repeat(3, 1fr); gap: 3rem 2.5rem; margin-top: 3.5rem; }
	.meo-step__icon { width: 9rem; height: 9rem; }
	.meo-step__icon svg { width: 5rem; height: 5rem; }
	.meo-step__num { left: -0.5rem; top: -0.5rem; font-size: 2.25rem; }
	.meo-step__title { font-size: 1.1rem; }
	.meo-step__text { font-size: 0.9rem; }
}

/* ---------- 8. FAQ ---------- */
.meo-faq { margin-top: 2rem; display: grid; gap: 0.7rem; }
.meo-faq__item {
	background: var(--color-card);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
}
.meo-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 1.05rem 2.6rem 1.05rem 1.2rem;
	font-size: 0.92rem;
	font-weight: 700;
	position: relative;
}
.meo-faq__q::-webkit-details-marker { display: none; }
.meo-faq__q::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-brand);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
}
.meo-faq__item[open] .meo-faq__q::after { content: "−"; }
.meo-faq__a { padding: 0 1.2rem 1.15rem; }
.meo-faq__a p { font-size: 0.88rem; text-align: justify; opacity: 0.9; }

/* ---------- 9. 最終CTA ---------- */
.meo-final {
	padding-block: 3.6rem;
	background: var(--color-brand);
	color: #fff;
	text-align: center;
}
.meo-final__title { font-size: clamp(1.35rem, 5.6vw, 2.1rem); font-weight: 700; line-height: 1.38; color: #fff; }
.meo-final__lead { margin: 1.2rem auto 0; max-width: 32rem; font-size: 0.93rem; text-align: justify; color: #fff; opacity: 0.95; }
.meo-final .meo-btn { margin-top: 1.9rem; width: 100%; max-width: 26rem; }
.meo-final__note { margin-top: 0.9rem; font-size: 0.76rem; color: #fff; opacity: 0.82; }

@media (min-width: 768px) {
	.meo-final { padding-block: 5.5rem; }
	.meo-final__lead { text-align: center; }
	.meo-final .meo-btn { width: auto; }
}

/* ---------- 10. 事業者情報 ---------- */
.meo-about { padding-block: 2.2rem; border-top: 1px solid var(--color-line); background: var(--color-paper); }
.meo-about__text { font-size: 0.8rem; opacity: 0.72; text-align: center; }
.meo-about__links { margin-top: 0.6rem; text-align: center; font-size: 0.8rem; }
.meo-about__links a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.meo-about__links span { opacity: 0.4; margin-inline: 0.4rem; }

/* ---------- モバイル固定CTA ---------- */
.meo-sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--color-paper) 94%, transparent);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--color-line);
}
.meo-sticky__btn { width: 100%; padding-block: 0.95rem; font-size: 0.92rem; }

@media (min-width: 768px) { .meo-sticky { display: none; } }

/* ---------- 動きを減らす設定への配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
	.meo-lp * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================================
   モバイル専用の調整（767px以下）
   ここから下は max-width で閉じてあるため、PC表示には一切影響しない。
   ========================================================================== */
@media (max-width: 767px) {

	/* --- 日本語の折り返しを文節単位にして、行末に1文字だけ残るのを防ぐ --- */
	.meo-lp h1,
	.meo-lp h2,
	.meo-lp h3,
	.meo-lp p,
	.meo-lp li,
	.meo-lp figcaption,
	.meo-lp span,
	.meo-lp th,
	.meo-lp td,
	.meo-lp summary {
		word-break: auto-phrase;
		text-wrap: pretty;
		overflow-wrap: anywhere;
	}

	/* --- 両端揃えは行が伸びて折り返しが目立つため、モバイルでは左寄せ --- */
	.meo-hero__lead,
	.meo-sec__lead,
	.meo-problem__body,
	.meo-card__body,
	.meo-why__col-body,
	.meo-why__shift-note,
	.meo-post__note,
	.meo-post__concl,
	.meo-step__text,
	.meo-faq__a p,
	.meo-final__lead,
	.meo-roi__stock p,
	.meo-roi__notes li,
	.meo-results__note {
		text-align: left;
	}

	/* --- 中央寄せをやめて左寄せにする箇所（ご指定分） --- */
	.meo-why__ctx-body,       /* 文脈の説明文（PCは中央寄せ） */
	.meo-sec__lead--center,   /* 各セクションのリード文 */
	.meo-stats__src,          /* 出典 */
	.meo-figure__cap,         /* ※画像はイメージです */
	.meo-roi__cpa {           /* 約137円という計算になります */
		text-align: left;
	}

	/* 統計カードのラベルは中央のまま、折り返しだけ整える */
	.meo-stat__label { text-wrap: balance; }

	/* 1.8倍バッジ：スマホでは絶対配置だと「対策後の月間来店数」に重なるため、
	   通常の並びに戻して前後比較の下に置く */
	.meo-roi__badge {
		position: static;
		grid-column: 1 / -1;
		justify-self: center;
		width: 5rem;
		height: 5rem;
		margin-top: 0.9rem;
		transform: rotate(-6deg);
	}

	/* 「流れ」のリード文だけは中央寄せのまま（ご指定） */
	.meo-flow .meo-sec__lead--center { text-align: center; }
}