@charset "UTF-8";
/*
 * mediup.jp トップページ専用スタイル
 *
 * 正本は リポジトリ mediup/DESIGN.md。色・書体・余白・禁止事項はすべてそちらに従う。
 * SWELL の main.css と混線しないよう、全セレクタを .mu-body 配下にスコープする
 * （functions.php で SWELL の CSS を dequeue しているが、外れても崩れないための二重の保険）。
 */

/* ============================================================
   0. トークン（DESIGN.md の表をそのまま変数化）
   ============================================================ */
.mu-body {
	/* 面 */
	--mu-canvas: #f6f8fb;
	--mu-surface: #ffffff;

	/* 文字 */
	--mu-ink: #16181d;
	--mu-ink-2: #5c6470;
	--mu-ink-3: #9aa1ab;

	/* 罫 */
	--mu-line: rgba(22, 24, 29, 0.08);
	--mu-line-strong: rgba(22, 24, 29, 0.16);

	/* アクセント（青＝メイン） */
	--mu-accent: #2e6be6;
	--mu-accent-strong: #1b4fc0;
	--mu-accent-bg: #eaf1fd;

	/* 副色（オレンジ） */
	--mu-accent2: #f2822f;
	--mu-accent2-strong: #d96c1c;
	--mu-accent2-bg: #fdefe3;

	/* semantic */
	--mu-up: #1a7f5c;
	--mu-up-bg: #eaf5f0;

	/* 影は使わない。面の区別はヘアラインと余白でつける */
	--mu-shadow-card: none;

	/* 角丸はほぼ落とす。丸い塗りボタンと丸カードの組み合わせが「よくあるSaaS」の顔になる */
	--mu-r-control: 2px;
	--mu-r-card: 2px;

	/* 版面 */
	--mu-max: 1120px;
	--mu-gutter: 24px;

	/*
	 * 書体（公開サイト方針：明朝エディトリアル）
	 * 見出しは明朝、本文はゴシック、数字と欧文はセリフ。
	 * Noto Sans JP / Geist / Geist Mono は「AI生成LPの標準セット」で既視感が強いため使わない。
	 */
	--mu-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--mu-sans: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
	--mu-num: "EB Garamond", "Shippori Mincho", serif;
}

/* ============================================================
   1. リセット（SWELL 非依存にするため最小限を自前で持つ）
   ============================================================ */
.mu-body * ,
.mu-body *::before,
.mu-body *::after {
	box-sizing: border-box;
}

.mu-body {
	margin: 0;
	background: var(--mu-canvas);
	color: var(--mu-ink);
	font-family: var(--mu-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.95;
	/* DESIGN.md: 和文の字間は 0（詰め禁止） */
	letter-spacing: 0;
	font-feature-settings: "palt" 0;
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%;
	overflow-wrap: break-word;
}

/*
 * リセットは全部 :where() で詳細度 0 にする。
 * `.mu-body p { margin: 0 }` は詳細度(0,1,1)になり、`.mu-lede { margin-top: 20px }`(0,1,0)
 * のような部品側の指定を黙って潰す。同じ理由で `.mu-body img { height: auto }` は
 * `.mu-hero__bg { height: 100% }` に勝ち、背景画像が原寸で伸びる。
 * リセットは常に一番弱くしておくこと。
 */
:where(
	.mu-body h1,
	.mu-body h2,
	.mu-body h3,
	.mu-body h4,
	.mu-body p,
	.mu-body ul,
	.mu-body ol,
	.mu-body dl,
	.mu-body dd,
	.mu-body figure,
	.mu-body blockquote
) {
	margin: 0;
}

:where(.mu-body ul, .mu-body ol) {
	padding: 0;
	list-style: none;
}

:where(.mu-body img, .mu-body svg) {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * a のリセットは :where() で詳細度 0 にする。
 * 通常の `.mu-body a` は詳細度(0,1,1)で `.mu-btn--invert` など単一クラスの部品(0,1,0)に勝ってしまい、
 * ボタンの文字色が親から継承されて地色と同化する（白地に白／青地に青）。
 * 詳細度 0 にしておけば、色は必ず各部品側の指定が効く。
 */
:where(.mu-body a) {
	color: inherit;
	text-decoration: none;
}

.mu-body button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.mu-body table {
	border-collapse: collapse;
	border-spacing: 0;
}

.mu-body :focus-visible {
	outline: 2px solid var(--mu-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* 数字・英字だけ字間を詰めてよい（DESIGN.md） */
.mu-num,
.mu-body .mu-num {
	font-family: var(--mu-num);
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: 0;
}

/*
 * 章の見出し。
 * 以前は Geist Mono の英大文字（PROBLEM / HOW IT WORKS …）を全セクションに置いていたが、
 * これが「AIが作ったLP」の一番の筆跡だった。全廃し、章番号＋和語に置き換える。
 * さらに、章番号を付けるのは3セクションだけにして、リズムの反復自体を崩す。
 */
.mu-chapter {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 22px;
	font-size: 12px;
	line-height: 1;
	color: var(--mu-ink-3);
}

.mu-chapter__no {
	font-family: var(--mu-num);
	font-variant-numeric: lining-nums;
	font-size: 15px;
	font-weight: 500;
	color: var(--mu-accent-strong);
}

.mu-chapter__no::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	margin: 0 0 4px 14px;
	background: var(--mu-line-strong);
	vertical-align: middle;
}

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

/* ============================================================
   2. レイアウト部品
   ============================================================ */
.mu-container {
	width: 100%;
	max-width: var(--mu-max);
	margin-inline: auto;
	padding-inline: var(--mu-gutter);
}

.mu-section {
	padding-block: 112px;
}

/* 固定ヘッダーの下にアンカー先の見出しが潜り込まないようにする */
.mu-body [id] {
	scroll-margin-top: 92px;
}

.mu-section--tight {
	padding-block: 72px;
}

.mu-section--alt {
	background: var(--mu-surface);
	border-block: 1px solid var(--mu-line);
}

.mu-sec-head {
	max-width: 46em;
	margin-bottom: 48px;
}

.mu-sec-head > .mu-eyebrow {
	margin-bottom: 16px;
}

.mu-h2 {
	font-family: var(--mu-serif);
	font-size: clamp(26px, 3.6vw, 44px);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: 0;
	text-wrap: pretty;
}

.mu-lede {
	margin-top: 20px;
	font-size: 16px;
	color: var(--mu-ink-2);
	text-wrap: pretty;
}

.mu-h3 {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.6;
}

/* ============================================================
   3. ボタン / リンク
   ============================================================ */
.mu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 32px;
	border-radius: var(--mu-r-control);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}

.mu-btn__arrow {
	display: inline-block;
	font-family: var(--mu-num);
	transition: transform 160ms ease-out;
}

.mu-btn:hover .mu-btn__arrow {
	transform: translateX(3px);
}

.mu-btn--primary {
	background: var(--mu-accent-strong);
	color: #fff;
}

.mu-btn--primary:hover {
	background: #153f9c;
}

.mu-btn--ghost {
	background: transparent;
	color: var(--mu-ink);
	border: 1px solid var(--mu-line-strong);
}

.mu-btn--ghost:hover {
	border-color: var(--mu-ink-3);
	background: rgba(22, 24, 29, 0.02);
}

.mu-btn--invert {
	background: #fff;
	color: var(--mu-accent-strong);
}

.mu-btn--invert:hover {
	background: #e6eefc;
}

.mu-btn--lg {
	min-height: 60px;
	padding: 0 36px;
	font-size: 16px;
}

.mu-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

/* テキストリンク：ホバーで下線がスッと伸びる（DESIGN.md「ホバーの気配」） */
.mu-link {
	position: relative;
	display: inline-block;
	color: var(--mu-ink);
	font-weight: 500;
	font-size: 15px;
}

.mu-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 160ms ease-out;
}

.mu-link:hover::after {
	transform: scaleX(1);
}

/* 本文中に混ざるリンク（メールアドレスなど）は、リンクだとわかる色と下線を常時つける */
.mu-micro .mu-link,
.mu-company-table .mu-link {
	color: var(--mu-accent-strong);
	font-weight: 500;
	font-size: inherit;
}

.mu-micro .mu-link::after,
.mu-company-table .mu-link::after {
	transform: scaleX(1);
	opacity: 0.4;
}

.mu-micro .mu-link:hover::after,
.mu-company-table .mu-link:hover::after {
	opacity: 1;
}

.mu-micro {
	font-size: 13px;
	line-height: 1.7;
	color: var(--mu-ink-3);
}

/* ============================================================
   4. ヘッダー
   ============================================================ */
.mu-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(246, 248, 251, 0.9);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.mu-header.is-stuck {
	background: rgba(255, 255, 255, 0.92);
	border-bottom-color: var(--mu-line);
}

.mu-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 68px;
}

.mu-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	color: var(--mu-ink);
}

.mu-logo__mark {
	font-family: var(--mu-num);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.mu-logo__sub {
	font-size: 11px;
	color: var(--mu-ink-3);
	white-space: nowrap;
}

.mu-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-left: auto;
}

.mu-nav__link {
	position: relative;
	color: var(--mu-ink-2);
	font-size: 14px;
	font-weight: 500;
	transition: color 160ms ease-out;
}

.mu-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 1px;
	background: var(--mu-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 160ms ease-out;
}

.mu-nav__link:hover {
	color: var(--mu-ink);
}

.mu-nav__link:hover::after {
	transform: scaleX(1);
}

.mu-header__cta {
	min-height: 42px;
	padding: 0 20px;
	font-size: 14px;
}

/* ============================================================
   5. ヒーロー（構図①：全面写真＋左寄せコピー＋下部スペック帯）
   ============================================================ */
.mu-hero {
	position: relative;
	isolation: isolate;
	background: #0b1526;
}

/* 画像は「左3分の2が窓と壁、右にノートPC」で撮ってある。見出しは左に置くので、
   反転や object-position の調整をせずそのまま敷けば文字と主題がぶつからない。
   （2026-08-31 に差し替え。旧画像は人物が中央左におり、見出しが顔に重なっていた） */
.mu-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.mu-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(11, 21, 38, 0.95) 0%, rgba(11, 21, 38, 0.9) 38%, rgba(11, 21, 38, 0.6) 62%, rgba(11, 21, 38, 0.22) 100%);
}

.mu-hero__inner {
	padding-block: 104px 88px;
}

/*
 * 幅を em で持たない。em は body の 16px 基準なので、見出しを大きくすると
 * 「「作って終わり」から、」12文字が入りきらず3行に割れる。
 * 見出しの実寸（62px × 12文字 ≒ 744px）が収まる px で持つ。本文の行長は .mu-hero__lead 側で絞る。
 */
.mu-hero__copy {
	max-width: 820px;
	color: #fff;
}

.mu-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
	color: #fff;
}

.mu-hero__eyebrow .mu-hero__eyebrow-en {
	font-family: var(--mu-num);
	font-size: 15px;
	letter-spacing: 0.04em;
	color: #8fb4ff;
}

.mu-hero__eyebrow-ja {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.72);
	padding-left: 12px;
	border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.mu-hero__punch {
	font-size: clamp(14px, 1.6vw, 16px);
	font-weight: 500;
	color: #a8c4ff;
	margin-bottom: 12px;
}

.mu-hero__title {
	/* 下限 26px は「「作って終わり」から、」12文字が 390px 幅で1行に収まる上限から決めた値。
	   これより大きくすると「終わ／り」で割れる */
	font-family: var(--mu-serif);
	font-size: clamp(26px, 5.4vw, 60px);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	text-wrap: balance;
}

.mu-hero__title .mu-mark {
	position: relative;
	white-space: nowrap;
}

.mu-hero__title .mu-mark::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.08em;
	height: 0.18em;
	background: var(--mu-accent);
	opacity: 0.55;
	z-index: -1;
}

.mu-hero__lead {
	margin-top: 24px;
	max-width: 34em;
	font-size: 16px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.86);
}

/* ページで一番言いたい一行。リードより大きく、見出しより小さく置く */
.mu-hero__claim {
	margin-top: 22px;
	font-family: var(--mu-serif);
	font-size: clamp(19px, 2.1vw, 26px);
	font-weight: 600;
	line-height: 1.7;
	color: #fff;
}

.mu-hero__claim::before {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin-bottom: 18px;
	background: var(--mu-accent);
}

/* 客側のゴール。承認だけ＝こちらの作業量の話なので、相手の成果の話を必ず隣に置く */
.mu-hero__goal {
	margin-top: 20px;
	max-width: 34em;
	font-size: 14px;
	line-height: 1.95;
	color: rgba(255, 255, 255, 0.72);
}

.mu-hero__goal strong {
	font-weight: 500;
	color: #fff;
	border-bottom: 1px solid rgba(143, 180, 255, 0.7);
	padding-bottom: 1px;
}

.mu-hero__actions {
	margin-top: 36px;
}

.mu-hero__actions .mu-link {
	color: #fff;
}

.mu-hero__note {
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.6);
}

/* 下部スペック帯：カードにせず罫線だけで区切る */
.mu-spec {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(11, 21, 38, 0.42);
	backdrop-filter: blur(6px);
}

.mu-spec__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.mu-spec__item {
	padding: 22px 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.mu-spec__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.mu-spec__item dt {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 6px;
}

.mu-spec__item dd {
	display: flex;
	align-items: baseline;
	gap: 4px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

.mu-spec__num {
	font-family: var(--mu-num);
	font-variant-numeric: tabular-nums;
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* ============================================================
   6. Problem（構図②：左右非対称 2カラム・カードなし）
   ============================================================ */
.mu-problem__lede {
	max-width: 44em;
	margin-bottom: 56px;
	font-size: 17px;
	color: var(--mu-ink-2);
}

.mu-problem__lede strong {
	display: block;
	margin-top: 8px;
	font-weight: 600;
	color: var(--mu-ink);
}

.mu-walls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--mu-line);
	margin-bottom: 64px;
}

.mu-wall {
	padding: 32px 32px 32px 0;
	border-right: 1px solid var(--mu-line);
}

.mu-wall:last-child {
	border-right: 0;
}

.mu-wall:not(:first-child) {
	padding-left: 32px;
}

.mu-wall__h {
	font-family: var(--mu-serif);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 14px;
}

.mu-wall__h::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 16px;
	background: var(--mu-accent);
}

.mu-wall p {
	font-size: 15px;
	color: var(--mu-ink-2);
}

/* 3:2 の非対称 */
.mu-problem__grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 56px;
	align-items: start;
}

.mu-checks li {
	position: relative;
	padding: 16px 0 16px 36px;
	border-bottom: 1px solid var(--mu-line);
	font-size: 15px;
	color: var(--mu-ink);
}

.mu-checks li:first-child {
	border-top: 1px solid var(--mu-line);
}

.mu-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 21px;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--mu-line-strong);
	border-radius: 4px;
}

.mu-problem__figure img {
	width: 100%;
	border-radius: var(--mu-r-card);
}

.mu-problem__figure figcaption {
	margin-top: 12px;
	font-size: 13px;
	color: var(--mu-ink-3);
}

.mu-bridge {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--mu-line);
	font-size: 17px;
	color: var(--mu-ink-2);
	max-width: 44em;
}

.mu-bridge strong {
	color: var(--mu-ink);
	font-weight: 600;
}

/* ============================================================
   7. Transform（構図③：Before → mediup → After。明朝の見せ場はここ1箇所）
   ============================================================ */
.mu-transform {
	display: grid;
	grid-template-columns: 1fr auto 1.25fr auto 1fr;
	align-items: stretch;
	gap: 0;
}

.mu-tcol {
	padding: 32px 28px;
}

/* 両端の列は、セクション見出しと左右の縦ラインを揃える（光学調整） */
.mu-transform > .mu-tcol:first-child {
	padding-left: 0;
}

.mu-transform > .mu-tcol:last-child {
	padding-right: 0;
}

.mu-tcol--side {
	color: var(--mu-ink-2);
}

.mu-tcol__label {
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--mu-ink-3);
	margin-bottom: 14px;
}

.mu-tcol h3 {
	font-family: var(--mu-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--mu-ink);
	margin-bottom: 16px;
}

.mu-tcol ul li {
	position: relative;
	padding-left: 16px;
	font-size: 14px;
	line-height: 2;
}

.mu-tcol ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 6px;
	height: 1px;
	background: var(--mu-ink-3);
}

.mu-tcol--core {
	background: var(--mu-surface);
	border: 1px solid var(--mu-line);
	border-radius: var(--mu-r-card);
	/* 影は使わない。区切りはヘアライン */
	padding: 36px 32px;
}

.mu-tcol--core .mu-tcol__label {
	color: var(--mu-accent-strong);
}

.mu-tcol--core p {
	font-size: 15px;
	color: var(--mu-ink-2);
}

.mu-tcol--after ul li::before {
	background: var(--mu-accent);
	width: 8px;
	height: 2px;
}

.mu-tarrow {
	align-self: center;
	width: 40px;
	height: 1px;
	background: var(--mu-line-strong);
	position: relative;
}

.mu-tarrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--mu-line-strong);
	border-right: 1px solid var(--mu-line-strong);
	transform: rotate(45deg);
}

/* 明朝の見せ場（1画面1箇所） */
/*
 * 明朝の見せ場（ページ内でここ1箇所だけ / DESIGN.md）。
 * 白い面が続くページに濃紺の全幅バンドを1枚だけ挟み、額縁のコントラストを作る。
 * 装飾ではなく、読み手がひと呼吸置く場所。
 */
.mu-quote-band {
	background: #0b1526;
	color: #fff;
	padding-block: 96px;
}

.mu-quote-band__inner {
	text-align: center;
}

.mu-quote-band__mark {
	display: block;
	width: 40px;
	height: 1px;
	margin: 0 auto 40px;
	background: rgba(255, 255, 255, 0.28);
}

.mu-serif-line {
	font-family: var(--mu-serif);
	font-weight: 600;
	font-size: clamp(23px, 3.4vw, 40px);
	line-height: 1.75;
	color: #fff;
	/* 和文に text-wrap: balance は使わない。行長を揃えようとして「日か／ら」のような
	   不自然な位置で割れる。改行位置は .mu-br-sp で明示的に決める */
}

/* SP でだけ効かせる明示改行 */
.mu-br-sp {
	display: none;
}

.mu-serif-line em {
	font-style: normal;
	color: #8fb4ff;
}

.mu-quote-band__sub {
	margin-top: 32px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   8. How（構図④：AIの3つ ＝ 淡く小さく / あなたの1つ ＝ 濃く大きく）
   　 このページで唯一「あなたの負担の軽さ」を面積で語る場所。
   　 左右を同じ大きさにすると主張が消えるので、意図的に 1.15 : 1 で右を主役にする。
   ============================================================ */
.mu-split {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	border-top: 1px solid var(--mu-line);
}

.mu-split__label {
	font-size: 13px;
	color: var(--mu-ink-3);
	margin-bottom: 28px;
}

.mu-split__ai {
	padding: 40px 56px 40px 0;
	border-right: 1px solid var(--mu-line);
}

.mu-ailist li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--mu-line);
}

.mu-ailist li:first-child {
	padding-top: 0;
}

.mu-ailist li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mu-ailist__no {
	font-family: var(--mu-num);
	font-variant-numeric: tabular-nums;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--mu-ink-3);
	padding-top: 2px;
}

.mu-ailist__body {
	font-size: 14px;
	color: var(--mu-ink-2);
}

.mu-ailist__body strong {
	display: block;
	font-family: var(--mu-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--mu-ink);
	margin-bottom: 6px;
}

.mu-split__you {
	padding: 40px 0 40px 56px;
}

.mu-split__label--you {
	color: var(--mu-accent-strong);
}

/* 主役。数字ではないが、KPI と同じ扱いで一番大きく置く */
/* 主役。明朝で組み、色は墨のまま。青は下の罫だけに使って品を保つ */
.mu-split__hero {
	font-family: var(--mu-serif);
	font-size: clamp(56px, 7vw, 92px);
	font-weight: 600;
	line-height: 1;
	color: var(--mu-ink);
	margin-bottom: 24px;
}

.mu-split__hero::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 24px;
	background: var(--mu-accent);
}

.mu-split__body {
	font-size: 16px;
	color: var(--mu-ink-2);
	max-width: 22em;
}

.mu-split__meta {
	display: inline-block;
	margin-top: 24px;
	padding-left: 14px;
	border-left: 2px solid var(--mu-accent);
	color: var(--mu-ink-2);
	font-size: 13px;
}

.mu-value-line {
	padding-top: 40px;
	border-top: 1px solid var(--mu-line);
	margin-top: 48px;
	font-family: var(--mu-serif);
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 600;
	line-height: 1.7;
}

.mu-value-line .mu-mark-ink {
	border-bottom: 3px solid var(--mu-accent2);
	padding-bottom: 2px;
}

/* ============================================================
   9. Screens（構図⑤：1枚目は全幅、2〜3枚目は 2カラム）
   ============================================================ */
.mu-shot {
	/* 白いUIのキャプチャを薄いグレー地に置くため、境界は濃いめのヘアラインで作る */
	border: 1px solid rgba(22, 24, 29, 0.18);
	border-radius: var(--mu-r-card);
	overflow: hidden;
	background: var(--mu-surface);
}

.mu-shot img {
	width: 100%;
}

.mu-screen__no {
	font-family: var(--mu-num);
	font-variant-numeric: lining-nums;
	font-size: 15px;
	color: var(--mu-accent-strong);
	margin: 26px 0 10px;
}

.mu-screen__h {
	font-family: var(--mu-serif);
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 12px;
}

.mu-screen__body {
	font-size: 15px;
	color: var(--mu-ink-2);
}

/*
 * 主役の1枚は全幅で出す。
 * 2カラムに入れると 1100px のキャプチャが 600px まで縮み、UIの文字が読めなくなる。
 * 「承認するだけ」を証明する画面なので、読めないと意味がない。
 */
.mu-screen--wide {
	margin-bottom: 72px;
}

.mu-screen--wide__foot {
	display: grid;
	grid-template-columns: 20em 1fr;
	gap: 48px;
	align-items: start;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--mu-line);
}

.mu-screen--wide__foot .mu-screen__no {
	margin-top: 0;
}

.mu-screen-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}

.mu-minilist {
	margin-top: 16px;
}

.mu-minilist li {
	position: relative;
	padding: 7px 0 7px 18px;
	font-size: 14px;
	color: var(--mu-ink-2);
	border-bottom: 1px solid var(--mu-line);
}

.mu-minilist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 8px;
	height: 2px;
	background: var(--mu-accent);
}

/*
 * 「読んで確かめられる」導線。
 * カードにせず、太めの上罫だけで1節として独立させる（カードの連打を避ける）。
 */
.mu-proof {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	margin-top: 40px;
	padding-top: 36px;
	border-top: 2px solid var(--mu-ink);
}

.mu-proof__h {
	font-family: var(--mu-serif);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 10px;
}

.mu-proof__body {
	font-size: 15px;
	color: var(--mu-ink-2);
	max-width: 34em;
}

.mu-screen-note {
	margin-top: 40px;
	padding: 16px 20px;
	border-left: 2px solid var(--mu-line-strong);
	font-size: 13px;
	color: var(--mu-ink-3);
	background: rgba(22, 24, 29, 0.02);
}

/* ============================================================
   10. Compare（構図⑥：全幅の罫線テーブル。カードにしない）
   ============================================================ */
.mu-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mu-compare {
	width: 100%;
	min-width: 760px;
	font-size: 14px;
}

.mu-compare th,
.mu-compare td {
	padding: 18px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--mu-line);
}

.mu-compare thead th {
	position: sticky;
	top: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--mu-ink-2);
	background: var(--mu-canvas);
	border-bottom: 1px solid var(--mu-line-strong);
	white-space: nowrap;
}

.mu-compare tbody th {
	font-weight: 500;
	color: var(--mu-ink);
	white-space: nowrap;
	width: 1%;
}

.mu-compare td {
	color: var(--mu-ink-2);
}

.mu-compare .mu-col-mu {
	background: var(--mu-accent-bg);
	color: var(--mu-ink);
	font-weight: 500;
}

.mu-compare thead .mu-col-mu {
	background: var(--mu-accent-strong);
	color: #fff;
	border-bottom-color: var(--mu-accent-strong);
}

.mu-compare tbody tr:last-child th,
.mu-compare tbody tr:last-child td {
	border-bottom: 0;
}

/* 横スクロールが実際に起きる幅でだけ出す。PC では表が収まるので隠す */
.mu-scroll-hint {
	display: none;
	margin-top: 12px;
	font-size: 12px;
	color: var(--mu-ink-3);
}

/* ============================================================
   12. FAQ（details。JS を使わない）
   ============================================================ */
.mu-faq-layout {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 64px;
	align-items: start;
}

.mu-faq-layout .mu-sec-head {
	margin-bottom: 0;
	position: sticky;
	top: 92px;
}

.mu-faq__item {
	border-bottom: 1px solid var(--mu-line);
}

.mu-faq__item:first-child {
	border-top: 1px solid var(--mu-line);
}

.mu-faq__item > summary {
	position: relative;
	padding: 20px 44px 20px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	cursor: pointer;
	list-style: none;
	transition: color 160ms ease-out;
}

.mu-faq__item > summary::-webkit-details-marker {
	display: none;
}

.mu-faq__item > summary:hover {
	color: var(--mu-accent-strong);
}

.mu-faq__item > summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 28px;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--mu-ink-3);
	border-bottom: 1.5px solid var(--mu-ink-3);
	transform: rotate(45deg);
	transition: transform 160ms ease-out;
}

.mu-faq__item[open] > summary::after {
	transform: rotate(-135deg);
	top: 32px;
}

.mu-faq__item > p {
	padding: 0 44px 24px 0;
	font-size: 15px;
	color: var(--mu-ink-2);
}

/* ============================================================
   13. 会社（構図⑧：非対称 1.4:1）
   ============================================================ */
.mu-company {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
	align-items: start;
}

.mu-company__copy p + p {
	margin-top: 20px;
}

.mu-company__copy p {
	font-size: 15px;
	color: var(--mu-ink-2);
}

.mu-company__copy strong {
	color: var(--mu-ink);
	font-weight: 600;
}

.mu-company-table {
	width: 100%;
	font-size: 14px;
}

.mu-company-table th,
.mu-company-table td {
	padding: 14px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--mu-line);
}

.mu-company-table th {
	width: 6.5em;
	font-weight: 500;
	color: var(--mu-ink-3);
}

.mu-company-table td {
	color: var(--mu-ink);
}

.mu-company-table tr:first-child th,
.mu-company-table tr:first-child td {
	border-top: 1px solid var(--mu-line);
}

/* ============================================================
   14. 最終CTA（ターコイズ面。フォームは持たず外部URLへ飛ばす）
   ============================================================ */
.mu-cta {
	background: var(--mu-accent-strong);
	color: #fff;
	padding-block: 80px;
}

.mu-cta__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: center;
}

.mu-cta h2 {
	font-family: var(--mu-serif);
	font-size: clamp(24px, 3.2vw, 36px);
	font-weight: 600;
	line-height: 1.6;
}

.mu-cta p {
	margin-top: 18px;
	color: rgba(255, 255, 255, 0.84);
	font-size: 15px;
}

.mu-cta .mu-micro {
	color: rgba(255, 255, 255, 0.6);
}

.mu-cta__actions {
	justify-self: end;
}

/* ============================================================
   15. フッター
   ============================================================ */
.mu-footer {
	background: var(--mu-canvas);
	border-top: 1px solid var(--mu-line);
	padding-block: 56px 40px;
}

.mu-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--mu-line);
}

.mu-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.mu-footer__nav a {
	font-size: 14px;
	color: var(--mu-ink-2);
	transition: color 160ms ease-out;
}

.mu-footer__nav a:hover {
	color: var(--mu-ink);
}

.mu-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	padding-top: 24px;
}

.mu-copy {
	font-family: var(--mu-num);
	font-size: 12px;
	color: var(--mu-ink-3);
	letter-spacing: -0.01em;
}

/* 規約リンク（記事ページの SWELL フッターと同じ内容を、こちらの書体・寸法で）。
   寸法はコピーライトと同じ12pxの脇役に留める。囲みも影も付けない。

   色は --mu-ink-3 ではなく --mu-ink-2 を使う。--mu-ink-3(#9aa1ab) は地(#f6f8fb)
   に対して 2.45:1 しかなく、12px の本文サイズでは WCAG の 4.5:1 を割る。
   コピーライトは読み飛ばしてよい表示だが、こちらは押す対象なので基準を満たす
   --mu-ink-2(#5c6470 / 5.62:1) にする。 */
.mu-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.mu-footer__legal a {
	font-size: 12px;
	color: var(--mu-ink-2);
	transition: color 160ms ease-out;
}

.mu-footer__legal a:hover {
	color: var(--mu-ink);
}

/* ============================================================
   16. モバイル固定 CTA（SP のみ）
   ============================================================ */
.mu-sticky-cta {
	display: none;
}

/* ============================================================
   17. レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
	.mu-screen--wide__foot,
	.mu-faq-layout,
	.mu-company {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* AI と あなた を縦に積む。区切りは縦線から横線へ */
	.mu-split {
		grid-template-columns: 1fr;
	}

	.mu-split__ai {
		padding: 32px 0;
		border-right: 0;
		border-bottom: 1px solid var(--mu-line);
	}

	.mu-split__you {
		padding: 32px 0 8px;
	}

	.mu-faq-layout .mu-sec-head {
		position: static;
	}

	.mu-transform {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.mu-tarrow {
		justify-self: center;
		width: 1px;
		height: 32px;
	}

	.mu-tarrow::after {
		right: -3px;
		top: auto;
		bottom: 0;
		transform: rotate(135deg);
	}

	.mu-tcol {
		padding: 24px 0;
	}

	.mu-tcol--core {
		padding: 28px 24px;
	}
}

@media (max-width: 782px) {
	:root {
		--mu-gutter: 20px;
	}

	.mu-section {
		padding-block: 64px;
	}

	.mu-section--tight {
		padding-block: 48px;
	}

	.mu-sec-head {
		margin-bottom: 32px;
	}

	.mu-nav {
		display: none;
	}

	/* ヘッダーが横幅に収まらず、CTA が画面外へ出ていた（390px で41pxはみ出し、
	   ページ全体に横スクロールが発生。実測 2026-08-31）。
	   原因は「ロゴ204px + gap32px + CTA171px + 左右padding48px = 455px」で、
	   ロゴのサブ文言が nowrap のため縮まないこと。
	   サブ文言はすぐ下のヒーローの eyebrow に同じものが出るので、SP では落とす。 */
	.mu-logo__sub {
		display: none;
	}

	.mu-header__inner {
		gap: 16px;
	}

	.mu-header__cta {
		margin-left: auto;
		padding: 0 16px;
	}

	.mu-hero__inner {
		padding-block: 64px 56px;
	}

	/* SP はボタンを全幅にして、副導線はその下へ回す */
	.mu-hero__actions {
		display: block;
	}

	.mu-hero__actions .mu-btn {
		width: 100%;
	}

	.mu-hero__actions .mu-link {
		display: block;
		margin-top: 20px;
		text-align: center;
	}

	.mu-hero__scrim {
		background: linear-gradient(180deg, rgba(11, 21, 38, 0.86) 0%, rgba(11, 21, 38, 0.8) 60%, rgba(11, 21, 38, 0.88) 100%);
	}

	.mu-spec__grid {
		grid-template-columns: 1fr 1fr;
	}

	.mu-spec__item {
		padding: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.mu-spec__item:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.mu-spec__num {
		font-size: 24px;
	}

	.mu-walls {
		grid-template-columns: 1fr;
		margin-bottom: 48px;
	}

	.mu-wall {
		padding: 24px 0;
		border-right: 0;
		border-bottom: 1px solid var(--mu-line);
	}

	.mu-wall:not(:first-child) {
		padding-left: 0;
	}

	.mu-wall:last-child {
		border-bottom: 0;
	}

	.mu-problem__grid,
	.mu-screen-pair {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.mu-cta__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mu-cta__actions {
		justify-self: stretch;
	}

	.mu-cta__actions .mu-btn {
		width: 100%;
	}

	.mu-scroll-hint {
		display: block;
	}

	.mu-proof {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.mu-proof__action .mu-btn {
		width: 100%;
	}

	.mu-br-sp {
		display: inline;
	}

	/* SP だけ固定 CTA を出す。フォームまで到達しない離脱を減らすための機能で、装飾ではない */
	.mu-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: block;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--mu-line);
	}

	.mu-sticky-cta .mu-btn {
		width: 100%;
	}

	.mu-body {
		padding-bottom: 76px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mu-body *,
	.mu-body *::before,
	.mu-body *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

@media print {
	.mu-header,
	.mu-sticky-cta {
		display: none;
	}
}