:root {
	
	--ink: #141414;
	--ink-soft: #2d2d30;
	--ink-faint: #58585e;
	--line: #e6e6e3;
	--paper: #ffffff;
	--paper-warm: #eef3ef;
	--accent: #0b8757;
	--accent-deep: #0a4f38;
	--accent-mid: #1f8a62;
	--accent-soft: #e0f5ea;
	--radius: 18px;
	--radius-m: 14px;
	--radius-s: 12px;
	--gap-block: 52px;
	--maxw: 1080px;
	--font: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
	--font-head: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
	--font-lat: "Outfit", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--shadow-sm: 0 1px 2px rgba(18,30,24,.04), 0 8px 20px -14px rgba(30,60,45,.16);
	--shadow-md: 0 20px 46px -26px rgba(30,70,50,.30);
	--shadow-lg: 0 40px 84px -44px rgba(18,60,42,.44);
}
* { margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
/* html { scroll-behavior: smooth;
	scroll-padding-top: 92px;
	} */
body {
	font-family: var(--font);
	color: var(--ink);
	background: var(--paper);
	line-height: 1.9;
	font-size: 17px;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%;
	}
a { color: inherit;
	text-decoration: none;
	}
ul { list-style: none;
	}
/* 見出しの折返しを行間で均す（狭幅での「大丈/夫？」型の分断対策。非対応ブラウザでは現状維持） */
h1, h2, h3 { text-wrap: balance;
	word-break: auto-phrase;
	font-family: var(--font-head);
	font-feature-settings: "palt" 1;
	}
.wrap { max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 28px;
	}
.br-sp { display: none;
	}

/* ---------- header ---------- */
header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
.header-in {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}
.brand { display: flex;
	align-items: baseline;
	gap: 14px;
	flex-shrink: 0;
	}
.brand .site { font-weight: 700;
	font-size: 17px;
	letter-spacing: .04em;
	white-space: nowrap;
	}
.brand .page { font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
	letter-spacing: .06em;
	white-space: nowrap;
	}
nav.gnav { display: flex;
	align-items: center;
	gap: 28px;
	flex-shrink: 0;
	}
nav.gnav a { font-size: 14px;
	color: var(--ink-soft);
	font-weight: 600;
	letter-spacing: .04em;
	transition: color .2s;
	}
nav.gnav a:hover { color: var(--ink);
	}
.btn-nav { background: var(--accent);
	color: #fff !important;
	padding: 10px 24px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	transition: opacity .2s;
	}
.btn-nav:hover { opacity: .8;
	}

/* ---------- hero ---------- */
/* 左にサービスコピー、右に元の運用支援イラストを参考サイト同様に大きく置く */
.hero { padding: 34px 0 28px;
	background: #fcfbf9;
	overflow: hidden;
	}
.hero .wrap { max-width: 1280px;
	}
.hero-grid {
	display: grid;
	grid-template-columns: minmax(500px, .9fr) minmax(0, 1.1fr);
	gap: 0;
	align-items: center;
	min-height: 560px;
}
.hero-grid > :first-child { position: relative;
	z-index: 3;
	}
.hero .kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-lat);
	font-size: 12.5px;
	letter-spacing: .26em;
	color: var(--accent);
	font-weight: 600;
	margin-bottom: 20px;
}
.hero .kicker::before { content: "";
	width: 34px;
	height: 1px;
	background: var(--accent);
	}
/* 既存の2行構成を保ち、語の途中で見出しが折れないようにする */
.hero h1 { font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 600;
	line-height: 1.34;
	letter-spacing: .01em;
	margin-bottom: 24px;
	}
.hero h1 .hero-title-line, .hero h1 .em { display: inline-block;
	white-space: nowrap;
	}
.hero h1 .em { color: var(--accent-deep);
	background: none;
	padding: 0 .06em;
	border-radius: 2px;
	}
.hero .lead { font-size: 17px;
	color: var(--ink);
	max-width: 32em;
	margin-bottom: 26px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .01em;
	}
/* H1・サブコピー・CTA・補足文を一つのCTAブロックとしてまとめるため縦積みに変更 */
.hero-cta { display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	}
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--accent);
	color: #fff;
	padding: 17px 36px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	border: none;
	cursor: pointer;
	font-family: inherit;
	box-shadow: 0 14px 26px -12px rgba(10,79,56,.5);
	transition: transform .15s, box-shadow .2s, opacity .2s;
}
.btn-primary:hover { opacity: .88;
	transform: translateY(-1px);
	}
.btn-primary .arrow { font-size: 13px;
	}
/* サブCTA: デザインラフ準拠のテキストリンク（2026-07-10 amiリファレンス反映） */
.btn-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 2px;
	border: none;
	background: none;
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	text-underline-offset: 5px;
	transition: opacity .15s;
}
.btn-link .chev { font-size: 17px;
	line-height: 1;
	}
.btn-link:hover { text-decoration: underline;
	opacity: .85;
	}
/* アウトライン系ボタンは btn-link と同寸法（min-height 48px・font 14px）に統一 */
.btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	border: 1.5px solid var(--accent);
	font-size: 15px;
	font-weight: 600;
	color: var(--accent);
	background: var(--paper);
	transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--ink);
	color: var(--ink);
	}
.hero .note { font-size: 12px;
	color: var(--ink-faint);
	margin-top: 12px;
	}
.hero-experience {
	position: relative;
	align-self: stretch;
	height: 560px;
	min-width: 0;
}
.hero-experience > img {
	position: absolute;
	z-index: 0;
	top: 50%;
	transform: translateY(-50%);
	left: -24px;
	display: block;
	width: min(920px, 66vw);
	max-width: none;
	height: auto;
}

/* ---------- section base ---------- */
section { padding: 92px 0;
	}
section.warm { background: var(--paper-warm);
	}
.sec-label { display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-lat);
	font-size: 12.5px;
	letter-spacing: .26em;
	color: var(--accent);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 20px;
	}
.sec-label::before { content: "";
	width: 30px;
	height: 1px;
	background: var(--accent);
	}
.sec-title { font-size: clamp(27px, 3.4vw, 40px);
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: .01em;
	margin-bottom: 24px;
	}
/* No.4/13/26: 幅制限による単語途中の分断対策。改行は文末の .br-pc（PC時のみ有効）で制御する */
.sec-lead { font-size: 16px;
	color: var(--ink-soft);
	max-width: none;
	margin-bottom: 56px;
	font-weight: 500;
	}
/* 見出しブロック→コンテンツの縦間隔は全セクション共通（インラインstyleで個別指定しない） */
.sec-body { margin-top: var(--gap-block);
	}
.notes { margin-top: 24px;
	}
/* 単独CTAカードのセクションは詰めて、前後セクションの間延びを防ぐ */
.sec-bridge { padding: 52px 0;
	}
/* 転換ブロック（そのお困りごと〜）: ページの山場として強い面＋下向き矢印＋大見出しで見せる */
section.statement { background: #e8f5ef;
	padding: 100px 0;
	}
.statement .wrap { position: relative;
	}
.statement::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto 34px;
	border-radius: 50%;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 22px no-repeat;
	box-shadow: 0 14px 26px -10px rgba(11,135,87,.6);
}
.statement .sec-title { font-size: clamp(30px, 4.6vw, 48px);
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 28px;
	}
.statement .sec-lead { font-size: 17px;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: 0;
	}
.statement .sec-lead::before {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent);
	margin: 0 auto 26px;
}

/* ---------- icons ---------- */
.ico {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-s);
	background: var(--accent);
	color: #fff;
	margin-bottom: 18px;
	box-shadow: 0 8px 18px -10px rgba(11,135,87,.55);
}
.ico svg { width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	}

/* ---------- quiz ---------- */
.check-band { background: var(--accent-deep);
	padding: 48px 0;
	}
.check-band .check-start h2 { color: #fff;
	}
.check-band .check-start p { color: rgba(255,255,255,.82);
	}
.check-band .check-start .btn-primary { background: #fff;
	color: var(--accent);
	box-shadow: 0 10px 24px -12px rgba(0,0,0,.4);
	}
.check-band .quiz-assure { color: rgba(255,255,255,.85);
	}
.check-band .quiz-assure span::before { color: #7fd6ae;
	}
.check-card {
	position: relative;
}
/* 診断中・結果画面は集中しやすい白カードに */
.check-card:not(.is-start) {
	max-width: 640px;
	margin: 0 auto;
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: 30px 44px;
	background: var(--paper);
	box-shadow: 0 24px 60px -40px rgba(90,120,110,.35);
}
/* Q&A画面: 進捗行（Q1/5・バー・%）を1行にまとめ、上下の余白を圧縮 */
.q-top { display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	}
.q-top .q-progress { font-family: var(--font-lat);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-faint);
	letter-spacing: .08em;
	white-space: nowrap;
	}
.q-top .q-bar { flex: 1;
	margin: 0;
	}
.q-percent { font-family: var(--font-lat);
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
	white-space: nowrap;
	}
.q-bar { height: 4px;
	background: var(--line);
	border-radius: 2px;
	overflow: hidden;
	}
.q-bar i { display: block;
	height: 100%;
	background: var(--accent);
	width: 0;
	transition: width .25s;
	}
.q-badge {
	display: inline-block;
	background: var(--accent-deep);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 999px;
	letter-spacing: .05em;
	margin-bottom: 14px;
}
.check-card h2 { font-size: 21px;
	font-weight: 700;
	line-height: 1.65;
	margin-bottom: 8px;
	max-width: 32em;
	}
.q-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ink-faint);
	font-size: 12.5px;
	font-weight: 500;
	margin-bottom: 22px;
}
.q-hint svg { width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	flex-shrink: 0;
	}
.q-options { display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	}
.q-options button {
	text-align: left;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-m);
	padding: 17px 20px 17px 48px;
	cursor: pointer;
	line-height: 1.6;
	position: relative;
	transition: border-color .15s, background .15s;
}
.q-options button::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 22px;
	width: 18px;
	height: 18px;
	border: 2px solid var(--ink-faint);
	border-radius: 50%;
	background: var(--paper);
	transition: border-color .15s;
}
.q-options button:hover { border-color: var(--accent);
	background: var(--accent-soft);
	}
.q-options button:hover::before { border-color: var(--accent);
	}
.q-options button.selected { border-color: var(--accent);
	background: var(--accent-soft);
	box-shadow: 0 0 0 1px var(--accent);
	}
.q-options button.selected::before { border-color: var(--accent);
	}
/* ポチは外円（left19/top22・外形22px）の正中央＝(30,33)に置く */
.q-options button.selected::after {
	content: "";
	position: absolute;
	left: 27px;
	top: 30px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}
.q-options button small { display: block;
	color: var(--ink-soft);
	font-weight: 500;
	font-size: 12.5px;
	margin-top: 3px;
	}
.q-nav { display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 22px;
	}
.q-next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 26px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity .15s, background .15s, color .15s;
}
.q-next:hover:not(:disabled) { opacity: .88;
	}
.q-next:disabled { background: var(--line);
	color: var(--ink-faint);
	cursor: not-allowed;
	}
.q-next .arrow { transition: transform .15s;
	}
.q-next:hover:not(:disabled) .arrow { transform: translateX(2px);
	}
/* 開始画面: テキスト＋CTAを横並びにした帯レイアウト */
.check-start { display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	text-align: left;
	}
.check-start-info { flex: 1;
	min-width: 260px;
	}
/* バッジとアイコンを1つのヘッダー要素としてまとめて配置 */
.check-head { display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	}
.check-start .ico { margin: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--paper);
	color: var(--accent);
	box-shadow: none;
	}
.check-start .ico svg { width: 18px;
	height: 18px;
	}
.check-start h2 { font-size: clamp(21px,2.6vw,26px);
	margin-bottom: 6px;
	}
.check-start p { color: var(--ink-soft);
	font-size: 14.5px;
	font-weight: 500;
	margin-bottom: 0;
	}
/* CTA柱: ボタン＋安心材料を縦積みで1ユニットに。ボタンは一回り大きく「試しやすさ」を出す */
.check-start-cta { display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
	}
.check-start .btn-primary { flex-shrink: 0;
	font-size: 16px;
	padding: 20px 42px;
	}
.check-start-cta .quiz-assure { margin-top: 0;
	justify-content: center;
	font-size: 12.5px;
	}
/* No.9: 診断結果の見出し・本文の文字サイズとコントラストを強化 */
.check-result .verdict-label { font-size: 17px;
	letter-spacing: .1em;
	color: var(--accent);
	font-weight: 700;
	margin-bottom: 16px;
	}
.check-result h2 { margin-bottom: 16px;
	font-size: clamp(24px, 3.2vw, 32px);
	}
/* No.4: max-widthが狭く1文目が収まらず自然折返しで単語が分断されていたため撤廃 */
.check-result .summary { color: var(--ink);
	font-size: 16.5px;
	line-height: 1.9;
	margin-bottom: 10px;
	max-width: 100%;
	}
.check-result .caveat { color: var(--ink-faint);
	font-size: 12.5px;
	margin-bottom: 34px;
	}
.check-result .cta-row { display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 26px;
	}
.check-result .assure { font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-soft);
	border-top: 1px solid var(--line);
	padding-top: 22px;
	}
.q-back { margin-top: 26px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 12px;
	color: var(--ink-faint);
	cursor: pointer;
	letter-spacing: .06em;
	}
.q-back:hover { color: var(--ink);
	}
.q-nav .q-back { margin-top: 0;
	font-size: 13px;
	}

/* ---------- grids / tiles ---------- */
.grid-3 { display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	}
.tile {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 34px 30px;
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.tile:hover { transform: translateY(-4px);
	border-color: #d3e6dc;
	box-shadow: var(--shadow-md);
	}
.tile h3 { font-size: 17px;
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1.6;
	}
.tile p { font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	}
.tile-list { margin-top: 16px;
	border-top: 1px solid var(--line);
	padding-top: 14px;
	}
.tile-list li { font-size: 14px;
	font-weight: 500;
	color: var(--ink-soft);
	padding: 6px 0 6px 22px;
	position: relative;
	}
.tile-list li::before { content: "✓";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
	}

/* ---------- plans ---------- */
.plans { display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: stretch;
	}
.plan {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}
.plan.featured { border: 2px solid var(--accent);
	box-shadow: var(--shadow-lg);
	}
.plan .badge {
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 2;
	background: rgba(255,255,255,.92);
	color: var(--accent);
	font-size: 11px;
	letter-spacing: .1em;
	font-weight: 700;
	padding: 4px 16px;
	border-radius: 999px;
}
/* 白ベース: おすすめ（featured）だけ緑の面。他は白ヘッダー＋黒見出しでパキッと */
.plan-head { padding: 26px 34px 20px;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	}
.plan-base .plan-head { background: #f0f0ee;
	}
.plan-grow .plan-head { background: var(--accent);
	color: #fff;
	border-bottom: none;
	}
.plan-pro .plan-head { background: var(--accent-deep);
	color: #fff;
	border-bottom: none;
	}
.plan-head h3 { font-size: 20px;
	font-weight: 700;
	margin-bottom: 4px;
	color: currentColor;
	}
.plan-head .tagline { font-size: 12.5px;
	font-weight: 500;
	opacity: .82;
	}
.plan-body { padding: 26px 34px 34px;
	display: flex;
	flex-direction: column;
	flex: 1;
	}
.plan .price-line { font-family: var(--font-lat);
	font-size: 27px;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.3;
	margin-bottom: 18px;
	}
/* 注記（/月・税抜・仮）は常に金額の下の行に固定＝カード間で行数が揃い、括弧途中の折返しも起きない */
.plan .price-line small { font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-faint);
	display: block;
	margin-top: 2px;
	white-space: nowrap;
	}
.plan .include-box { font-size: 13px;
	font-weight: 700;
	padding: 10px 14px;
	border-radius: var(--radius-s);
	margin-bottom: 18px;
	}
.plan-grow .include-box { background: var(--accent-soft);
	color: var(--accent);
	}
.plan-pro .include-box { background: var(--accent-soft);
	color: var(--accent-deep);
	}
.plan .grp-title { font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	margin: 18px 0 6px;
	}
.plan .grp-title:first-child { margin-top: 0;
	}
.plan ul.sub { margin-bottom: 2px;
	}
.plan ul.sub li { font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-soft);
	padding: 4px 0 4px 16px;
	position: relative;
	line-height: 1.65;
	}
.plan ul.sub li::before { content: "・";
	position: absolute;
	left: 0;
	color: var(--ink-faint);
	}
.plan ul.sub li .note-sub { display: block;
	font-size: 11.5px;
	color: var(--ink-faint);
	margin-top: 1px;
	}
.plan .plan-cta { margin-top: auto;
	padding-top: 22px;
	text-align: center;
	}
.plan .plan-cta a { display: block;
	padding: 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: 13px;
	color: var(--ink-soft);
	transition: all .2s;
	}
.plan.featured .plan-cta a { background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	}
.plan .plan-cta a:hover { border-color: var(--ink);
	color: var(--ink);
	}
.plan.featured .plan-cta a:hover { opacity: .85;
	color: #fff;
	}

/* ---------- compare ---------- */
/* 「選ばれる理由」の表（cmp2）と同じデザイン言語＝白カード・hairline罫線・深緑濃淡ヘッダー */
.cmp-scroll { overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: 0 20px 50px -38px rgba(90,120,110,.3);
	}
.cmp { width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	min-width: 640px;
	}
.cmp th, .cmp td { padding: 15px 14px;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	}
.cmp tbody tr { border-top: 1px solid var(--line);
	}
.cmp tbody tr:nth-child(even) { background: var(--paper-warm);
	}
.cmp th:first-child, .cmp td:first-child { width: 46%;
	text-align: left;
	padding-left: 24px;
	}
.cmp th:not(:first-child), .cmp td:not(:first-child) { width: 18%;
	}
.cmp td:first-child { color: var(--ink-soft);
	}
/* プランカードと同じ言語: ベース=薄グレー／おすすめ=緑／戦略=濃緑 */
.cmp thead th { font-size: 13px;
	font-weight: 700;
	background: var(--paper);
	color: var(--ink);
	padding: 15px 14px;
	}
.cmp thead th.base { background: #f0f0ee;
	color: var(--ink);
	}
.cmp thead th.hl { background: var(--accent);
	color: #fff;
	}
.cmp thead th.pro { background: var(--accent-deep);
	color: #fff;
	}
.cmp thead th .th-price { display: inline-block;
	font-family: var(--font-lat);
	font-size: 12px;
	font-weight: 500;
	opacity: .85;
	margin-top: 4px;
	}
.cmp td.ok { color: var(--accent);
	font-weight: 700;
	}
.cmp td.no { color: var(--ink-faint);
	}
/* グループ見出し行（プランカードのカテゴリと対応）: 濃緑帯で章立てをはっきり見せる */
.cmp tr.grp-row td { background: var(--accent-deep);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-align: left;
	padding: 10px 14px 10px 24px;
	}
.cmp tr.grp-row { border-top: none;
	}
.cmp tbody tr.grp-row:nth-child(even) { background: var(--accent-deep);
	}
/* 縦の罫線 */
.cmp th:not(:last-child), .cmp td:not(:last-child) { border-right: 1px solid var(--line);
	}
.cmp thead tr { border-bottom: 1px solid var(--line);
	}

/* ---------- why-us feature tiles（横型アイコンカード2×2・2026-07-10 amiラフ準拠） ---------- */
.feature-grid { display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	}
.tile-h { display: flex;
	align-items: flex-start;
	gap: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 30px;
	background: var(--paper);
	}
.tile-h .ico { width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 0;
	}
.tile-h .ico svg { width: 24px;
	height: 24px;
	}
.tile-h h3 { font-size: 16.5px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
	line-height: 1.6;
	}
.tile-h p { font-size: 14px;
	font-weight: 500;
	color: var(--ink-soft);
	line-height: 1.85;
	}
/* 点線ディバイダ＋中央ラベル（No.40: 見出し感を出すためサイズアップ） */
.divider-label { display: flex;
	align-items: center;
	gap: 18px;
	margin: 56px 0 26px;
	font-size: 18px;
	font-weight: 700;
	color: var(--accent-deep);
	white-space: nowrap;
	}
.divider-label::before, .divider-label::after { content: "";
	flex: 1;
	border-top: 1.5px dotted #cfcfcb;
	}

/* ---------- why-us comparison (cmp2): 白カード・軽い罫線・右列を主役にした比較表 ---------- */
.cmp2-scroll {
	overflow-x: auto;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: auto;
	scrollbar-color: var(--accent) #dfe6e1;
}
.cmp2-scroll::-webkit-scrollbar { height: 10px;
	}
.cmp2-scroll::-webkit-scrollbar-track { background: #dfe6e1;
	border-radius: 999px;
	}
.cmp2-scroll::-webkit-scrollbar-thumb { background: var(--accent);
	border-radius: 999px;
	}
.cmp2-card { min-width: 640px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 20px 50px -38px rgba(90,120,110,.3);
	}
.cmp2 { width: 100%;
	border-collapse: collapse;
	min-width: 640px;
	}
.cmp2 th, .cmp2 td { padding: 14px 20px;
	font-size: 14px;
	text-align: left;
	vertical-align: middle;
	}
/* 行区切りは点線（2026-07-10 amiラフ準拠） */
.cmp2 tbody tr { border-top: 1px dotted #cfcfcb;
	}
.cmp2-row { display: flex;
	align-items: center;
	gap: 12px;
	}
/* ヘッダー: 全列とも軽い配色（濃色ベタなし） */
.cmp2 thead .cmp2-item { background: var(--paper);
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 700;
	}
.cmp2 thead .cmp2-base { background: #eef0ee;
	color: var(--ink-soft);
	font-size: 13.5px;
	font-weight: 700;
	}
.cmp2 thead .cmp2-us { background: var(--accent-soft);
	color: var(--accent-deep);
	font-size: 13.5px;
	font-weight: 700;
	}
/* 本文: 中央列は控えめグレー、右列は白地に緑テキスト＋✓バッジで主役 */
.cmp2 tbody .cmp2-item { color: var(--ink);
	font-weight: 600;
	}
.cmp2 tbody .cmp2-base { color: var(--ink-faint);
	background: var(--paper);
	}
.cmp2 tbody .cmp2-us { color: var(--accent);
	background: var(--paper);
	font-weight: 700;
	}
/* 記号: ○×は素の文字（囲み円なし・二重丸に見えるため）。✓のみ緑バッジ */
.cmp2-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink-faint);
}
.cmp2-mark--ok { width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	}

/* ---------- flow ---------- */
.flow-list { position: relative;
	margin-top: var(--gap-block);
	}
.flow-list::before { content: "";
	position: absolute;
	left: 21px;
	top: 20px;
	bottom: 20px;
	width: 1.5px;
	background: var(--line);
	}
.flow-list li { display: grid;
	grid-template-columns: 44px 1fr;
	gap: 32px;
	padding: 26px 0;
	position: relative;
	}
.flow-list .dot {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--paper);
	border: 1.5px solid var(--accent);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-lat);
	font-size: 14px;
	font-weight: 700;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 4px var(--paper), var(--shadow-sm);
}
.flow-list h3 { font-size: 17.5px;
	font-weight: 700;
	margin-bottom: 6px;
	}
.flow-list p { font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	max-width: 58em;
	}

/* ---------- bridge / notes ---------- */
.bridge {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 52px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 36px;
	align-items: center;
	background: var(--paper);
}
.bridge .ico { margin: 0;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	}
.bridge h3 { font-size: 22px;
	font-weight: 700;
	margin-bottom: 10px;
	}
.bridge p { font-size: 15.5px;
	font-weight: 500;
	color: var(--ink-soft);
	max-width: 34em;
	}
.notes li { font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-faint);
	padding: 3px 0;
	line-height: 1.7;
	}

/* ---------- faq ---------- */
.faq-list { max-width: 100%;
	}
.faq-list details { border: 1px solid var(--line);
	border-radius: var(--radius-m);
	margin-bottom: 12px;
	background: var(--paper);
	}
.faq-list summary { cursor: pointer;
	list-style: none;
	padding: 22px 56px 22px 26px;
	font-size: 15.5px;
	font-weight: 700;
	position: relative;
	}
.faq-list summary::-webkit-details-marker { display: none;
	}
.faq-list summary::before { content: "Q";
	color: var(--accent);
	font-weight: 700;
	margin-right: 14px;
	}
.faq-list summary::after { content: "+";
	position: absolute;
	right: 24px;
	top: 20px;
	font-size: 20px;
	font-weight: 300;
	color: var(--ink-faint);
	transition: transform .2s;
	}
.faq-list details[open] summary::after { transform: rotate(45deg);
	}
//.faq-list .a { padding: 0 26px 24px 51px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	max-width: 42em;
	line-height: 1.9;
	}
.faq-list .a { padding: 0 70px 24px 51px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	line-height: 1.9;
	}

/* ---------- contact ---------- */
.contact { padding: 120px 0;
	background: var(--paper-warm);
	}
.form-card {
	margin-top: 52px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 52px;
	box-shadow: var(--shadow-md);
}
.form-row { margin-bottom: 26px;
	}
.form-row label { display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 9px;
	}
.form-row label .req { font-size: 10px;
	color: #fff;
	background: var(--accent);
	border-radius: 4px;
	padding: 2px 8px;
	margin-left: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	}
.form-row input, .form-row textarea {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	padding: 14px 17px;
	background: var(--paper-warm);
	transition: border-color .15s, background .15s;
	outline: none;
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--accent);
	background: var(--paper);
	}
.form-row textarea { min-height: 150px;
	resize: vertical;
	}
.form-submit { margin-top: 40px;
	text-align: center;
	}

/* ---------- company / footer ---------- */
.company { border-top: 1px solid var(--line);
	padding: 84px 0;
	}
.company .logo { font-size: 20px;
	font-weight: 700;
	letter-spacing: .06em;
	margin-bottom: 18px;
	}
.company p { font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	max-width: none;
	margin-bottom: 26px;
	}
.company a.more { font-size: 13px;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	}
footer { border-top: 1px solid var(--line);
	}
footer .wrap { display: flex;
	justify-content: space-between;
	padding-top: 26px;
	padding-bottom: 26px;
	}
footer small { font-size: 11.5px;
	color: var(--ink-faint);
	letter-spacing: .04em;
	}

/* ---------- voice cards & check badge ---------- */
/* .tile p より詳細度を上げて、キャッチ文の太字（700）が確実に効くようにする */
p.voice { font-size: 16.5px;
	font-weight: 700;
	line-height: 1.75;
	color: var(--ink);
	margin-bottom: 12px;
	}
p.vexp { font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	line-height: 1.85;
	}
/* No.7: 簡易診断バッジを大きく・目立つように調整 */
.check-badge { display: inline-block;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--accent);
	background: var(--paper);
	border-radius: 999px;
	padding: 9px 20px;
	}
/* No.8: 登録不要・その場で完了することを明示する注釈。CTA帯の下に左揃えで配置 */
.quiz-assure { margin-top: 20px;
	display: flex;
	justify-content: flex-start;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--ink-soft);
	font-weight: 600;
	}
.quiz-assure span { display: inline-flex;
	align-items: center;
	gap: 6px;
	}
.quiz-assure span::before { content: "✓";
	color: var(--accent);
	font-weight: 700;
	}

/* ---------- responsive ---------- */
/* フルナビが折れ始める前に相談ボタンだけへ切り替える */
@media (max-width: 960px) {
	nav.gnav a:not(.btn-nav) { display: none;
	}
}

/* No.4/13/26/32/34/35: 文末の改行はPC専用（.br-pc）。狭幅では改行を消して自然に流し、
	 固定brによる「短い行＋単語途中の折返し」を防ぐ */
@media (max-width: 820px) {
	.br-pc { display: none;
	}
	.br-sp { display: block;
	}
	nav.gnav a:not(.btn-nav) { display: none;
	}
	.hero { padding: 0 0 48px;
	}
	.hero .wrap { padding: 0;
	}
	.btn-primary { font-size: 14px;
	padding: 15px 28px;
	}
	.hero-grid { display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	}
	/* SPはキャッチコピーを先に見せ、その下にイラストを配置する */
	.hero-grid > :first-child { order: 1;
	width: 100%;
	padding: 42px 22px 0;
	}
	.hero-experience {
		order: 2;
	width: 100%;
	height: clamp(360px, 72vw, 540px);
		overflow: hidden;
	text-align: center;
	margin-top: 32px;
	}
	.hero-experience > img {
		position: absolute;
	top: 50%;
	left: 50%;
		width: 128vw;
	max-width: none;
	margin: 0;
		transform: translate(-50%, -50%);
	}
	section { padding: 64px 0;
	}
	.grid-3, .plans, .feature-grid { grid-template-columns: 1fr;
	}
	.tile-h { padding: 24px 22px;
	}
	.check-card:not(.is-start) { padding: 22px 20px;
	}
	.q-top { flex-wrap: wrap;
	}
	.check-start { flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	}
	.check-start-cta { width: 100%;
	}
	.check-start .btn-primary { width: 100%;
	justify-content: center;
	}
	.check-head { flex-wrap: wrap;
	}
	.q-options { grid-template-columns: 1fr;
	}
	.bridge { grid-template-columns: 1fr;
	padding: 34px 26px;
	}
	.divider-label {
		gap: 10px;
	font-size: 16px;
	line-height: 1.55;
		white-space: normal;
	text-align: center;
	}
	.divider-label span { min-width: 0;
	text-wrap: balance;
	}
	.divider-label::before, .divider-label::after { min-width: 18px;
	}
	.form-card { padding: 32px 22px;
	}
	.contact { padding: 74px 0;
	}
}
/* 参考サイト同様、中間幅では2カラムを保ったまま画像全体をウィンドウ幅に合わせて縮小する */
@media (min-width: 821px) and (max-width: 1180px) {
	.hero { padding: 0 0 28px;
	}
	.hero .wrap { padding: 0 22px;
	}
	.hero-grid { grid-template-columns: minmax(455px, .95fr) minmax(0, 1.05fr);
	}
	.hero-grid { min-height: 520px;
	}
	.hero h1 { font-size: 36px;
	}
	.hero-experience { height: 520px;
	}
	.hero-experience > img {
		top: 50%;
		left: -8px;
		width: min(650px, 58vw);
		transform: translateY(-50%);
	}
}
/* No.34/35: 狭幅時にヘッダーのプラン名ラベルが折り返して崩れるのを防止 */
@media (max-width: 480px) {
	.brand .page { display: none;
	}
	.header-in { padding: 0 20px;
	}
	.hero .wrap { padding: 0;
	}
	.hero-grid > :first-child { padding-left: 20px;
	padding-right: 20px;
	}
	.hero h1 { font-size: 26px;
	letter-spacing: .01em;
	}
	/* 金額が1行に収まるサイズへ（80,000〜100,000円 が最長） */
	.plan .price-line { font-size: 20px;
	}
}

/*--------------------------------------------------*/
/* お問合せフォーム */
/*--------------------------------------------------*/

.section-form .container {
	max-width: 1000px;
}
.section-form .form-content {
	margin-top: -100px;
	padding-top: 100px;
}
.section-form .form-content table {
	width: 100%;
	line-height: 1.8;
	text-align: left;
	margin: 0;
}
.section-form .form-content table th,
.section-form .form-content table td {
	vertical-align: top;
	padding: 15px 0;
}
.section-form .form-content table th {
	width: 200px;
	padding: 30px 0;
}
.section-form .form-content table th span {
	display: inline-block;
	color: #ff0000;
	font-size: 12px;
	font-weight: normal;
	margin-left: 5px;
}
.section-form .form-content table td .small {
	margin-top: 10px;
}
.section-form .form-content table td > *:last-child {
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.section-form .mw_wp_form_input table .radio th,
	.section-form .mw_wp_form_input table .radio td {
		padding: 20px 0;
	}
}
@media (max-width: 767px) {
	.section-form .form-content table th,
	.section-form .form-content table td {
		display: block;
		width: 100%;
		border-top: 1px solid #dddddd;
	}
	.section-form .form-content table th {
		background-color: #eeeeee;
		padding: 10px;
	}
	.section-form .form-content table td {
		padding: 15px 0 35px 0;
	}
	.mw_wp_form .horizontal-item {
		display: block;
	}
	.mw_wp_form .horizontal-item + .horizontal-item {
		margin-left: 0 !important;
	}
}

/*--------------------------------------------------*/
/* MW WP Form */
/*--------------------------------------------------*/

.section-form ::placeholder {
	color: #cccccc;
}
.section-form .btn-wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 30px 0;
}
.section-form .form-submit .btn-back {
	background: #333333;
}

/*--------------------------------------------------*/
/* フォーム 画面遷移 */
/*--------------------------------------------------*/

.section-form .mw_wp_form .error {
	color: #ff0000;
}
.section-form .mw_wp_form_complete h3 {
	font-size: 140%;
	margin: 2em 0 1em 0;
}
.section-form .mw_wp_form_preview table td p.small {
	display: none;
}
@media (min-width: 768px) {
	.section-form .mw_wp_form_preview table th,
	.section-form .mw_wp_form_preview table td {
		padding: 20px 0;
	}
}