/* ==========================================================================
   Genba Ippatsu Modern — main stylesheet
   ネイビーベース＋グラデーション / モバイルファースト / 中程度モーション
   ========================================================================== */

:root {
	/* ネイビーパレット */
	--navy-950: #060f22;
	--navy-900: #0a1a33;
	--navy-800: #0e2a52;
	--navy-600: #1d4a8f;
	--navy-400: #3b76c9;
	--sky-300: #7fb4ef;
	--cyan-300: #5fd4d0;

	/* CTAアクセント */
	--amber-400: #f7b733;
	--amber-300: #ffd166;
	--amber-grad: linear-gradient(135deg, #ffd166, #f7a020);

	/* グラデーション */
	--grad-hero: linear-gradient(
		160deg,
		#060f22 0%,
		#0e2a52 45%,
		#1d4a8f 80%,
		#2f63b4 100%
	);
	--grad-band: linear-gradient(120deg, #0a1a33, #1d4a8f 60%, #2b5aa6);
	--grad-text: linear-gradient(90deg, #7fb4ef, #5fd4d0);

	/* ニュートラル */
	--ink: #15203a;
	--muted: #333;
	/* --muted: #5a6779; */
	--line: #dce4f0;
	--bg: #f4f7fc;
	--bg-tint: #eaf1fa;
	--card: #ffffff;

	/* 形状・影 */
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	--shadow-sm: 0 4px 14px rgba(10, 26, 51, 0.08);
	--shadow: 0 4px 40px rgba(10, 26, 51, 0.12);
	--shadow-lg: 0 28px 64px rgba(10, 26, 51, 0.2);
	--glow-amber: 0 8px 28px rgba(247, 183, 51, 0.35);

	/* レイアウト */
	--section-pad: clamp(64px, 10vw, 112px);
	--container: 1160px;

	/* モーション */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur: 0.7s;
}

/* --------------------------------------------------------------------------
   Reset / Base
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   改行制御（単語・文節の途中で改行させない / レスポンシブ）
   - <budoux-ja> ラッパーはレイアウトに影響させない（display: contents）。
     JS が無効・失敗してもこの指定だけは効くため、ブロックが横並びに崩れない。
   - BudouX 読込時: ラッパー配下に word-break: keep-all / overflow-wrap: anywhere が
     継承適用され、文節境界（ゼロ幅スペース）でのみ改行 → 語・文節が途中で割れない。
   - フォールバック: 英数字の長い連続（URL 等）だけは端で折り返してはみ出しを防ぐ。
   -------------------------------------------------------------------------- */
budoux-ja {
	display: contents;
}

body {
	/* 通常の単語は途中で割らず、収まらない長いトークンのみ端で折り返す。 */
	overflow-wrap: break-word;
}

/* 特定要素だけ BudouX の文節改行を打ち消し、ブラウザ既定の通常改行（文字単位）に戻すユーティリティ。
   BudouX は処理対象要素にインラインで word-break:keep-all を付与するため、!important で上書きする。
   挿入済みのゼロ幅スペースは通常改行では無害（＝既に有効な改行位置の部分集合）で見た目に影響しない。 */
.budoux-normal {
	word-break: normal !important;
}

html {
	scroll-behavior: smooth;
	/* reveal--left/right の出現前 translateX による横スクロールを抑止（clip は sticky を壊さない） */
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	font-family:
		"Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	/* rem 基準に統一（SP では html の font-size を拡大して全テキストを一括 1.15 倍するため）。
	   既定ルートは 16px なので PC での見た目は 16px のまま変わらない。 */
	font-size: 1rem;
	line-height: 1.75;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--navy-600);
	text-decoration: none;
	transition: color 0.25s var(--ease-out);
}

a:hover {
	color: var(--navy-400);
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.6em;
	line-height: 1.32;
	font-weight: 900;
	font-feature-settings: "palt";
	letter-spacing: 0.01em;
	color: var(--ink);
}

h1 {
	font-size: clamp(1.9rem, 7.4vw, 3.05rem);
}

h2 {
	font-size: clamp(1.5rem, 5.4vw, 2.35rem);
}

h3 {
	font-size: 1.16rem;
}

p {
	margin: 0 0 1em;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

figure {
	margin: 0;
}

.container {
	width: min(100% - 36px, var(--container));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.skip-link {
	position: absolute;
	/* top: -48px; */
	top: -100px;
	left: 12px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--navy-800);
	color: #fff;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Typography parts
   -------------------------------------------------------------------------- */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 16px;
	border-radius: var(--radius-pill);
	background: var(--bg-tint);
	color: var(--navy-600);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--amber-grad);
}

.eyebrow--light {
	background: rgba(255, 255, 255, 0.12);
	color: #dbe9fb;
	backdrop-filter: blur(4px);
}

.eyebrow--dark {
	/* background: rgba(255, 255, 255, 0.12); */
	background: #dce4f08a;
	backdrop-filter: blur(4px);
}

.text-grad {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.text-grad-amber {
	background: linear-gradient(90deg, #fff3b0, var(--amber-300), #f7a020);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--amber-300);
	text-shadow: 1px 3px 2px rgba(247, 160, 32, 0.5);
}

.lead {
	font-size: 1.02rem;
	color: var(--muted);
}

.section-intro {
	/* max-width: 760px; */
	max-width: 860px;
	margin-bottom: clamp(36px, 6vw, 56px);
}

.section-intro h2 {
	margin-bottom: 0.45em;
}

/* よくある相談セクション（料金ページ）のみ、見出しをコンテナ幅まで広げる */
.section--faq .section-intro {
	max-width: 1160px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 12px 30px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.4;
	text-align: center;
	transition:
		transform 0.3s var(--ease-out),
		box-shadow 0.3s var(--ease-out),
		background-color 0.3s var(--ease-out),
		color 0.3s var(--ease-out);
}

.button:hover {
	transform: translateY(-2px);
}

.button--primary {
	background: var(--navy-800);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.button--primary:hover {
	background: var(--navy-600);
	color: #fff;
	box-shadow: var(--shadow);
}

.button--secondary {
	background: var(--card);
	color: var(--navy-800);
	border: 2px solid var(--navy-800);
}

.button--secondary:hover {
	color: var(--navy-600);
	border-color: var(--navy-600);
	box-shadow: var(--shadow-sm);
}

.button--accent {
	background: var(--amber-grad);
	color: var(--navy-950);
	box-shadow: var(--glow-amber);
}

.button--accent:hover {
	color: var(--navy-950);
	box-shadow: 0 12px 34px rgba(247, 183, 51, 0.5);
}

/* LINE 公式カラーのボタン（先頭に吹き出しSVG）。サイズは .button / .nav-cta を継承。 */
.button--line {
	background: #06c755;
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.button--line:hover {
	background: #05a847;
	color: #fff;
	box-shadow: var(--shadow);
}

.button--line svg {
	flex-shrink: 0;
}

.button--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(4px);
}

.button--ghost:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.7);
}

.button--lg {
	min-height: 60px;
	padding: 16px 42px;
	font-size: 1.05rem;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 24px 0;
	text-shadow: none !important;
}

.section-action {
	margin-top: clamp(32px, 5vw, 44px);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(220, 228, 240, 0.7);
	transition:
		box-shadow 0.3s var(--ease-out),
		background-color 0.3s var(--ease-out);
}

.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.97);
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* padding: 12px 0; */
	padding: 6px 0;
	transition: padding 0.3s var(--ease-out);
}

.site-header.is-scrolled .site-header__inner {
	/* padding: 7px 0; */
	padding: 0px 0;
}

.site-brand img {
	height: 42px;
	width: auto;
	transition: height 0.3s var(--ease-out);
}

.nav-toggle {
	position: relative;
	z-index: 70;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 11px;
	/* background: var(--navy-800); */
	background: #ffffff00;
	border: 0;
	/* border-radius: var(--radius-sm); */
	cursor: pointer;
}

.nav-toggle span:not(.screen-reader-text) {
	display: block;
	height: 2.5px;
	width: 100%;
	border-radius: 2px;
	/* background: #fff; */
	background: var(--navy-800);
	transition:
		transform 0.3s var(--ease-out),
		opacity 0.2s;
}

body.nav-open .nav-toggle span:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
	opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

.site-nav {
	/* ヘッダーの backdrop-filter が fixed の包含ブロックになるため、
     モバイルはヘッダー直下のドロップダウンパネル（absolute）で実装する */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 65;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 22px;
	padding: 26px 24px 30px;
	background: var(--grad-hero);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition:
		opacity 0.3s var(--ease-out),
		transform 0.3s var(--ease-out),
		visibility 0.3s;
}

body.nav-open .site-nav {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* メニューを開いたときに、ヘッダーと site-nav 以外を薄暗くするマスク。
   z-index はヘッダー(60)・site-nav(65)より下に置き、両者を手前に残す。 */
.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(15, 23, 42, 0.78);
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	transition:
		opacity 0.3s var(--ease-out),
		visibility 0.3s;
}

body.nav-open .nav-overlay {
	opacity: 1;
	visibility: visible;
}

/* ヘッダー背景は半透明(0.86)のため、そのままだと背後のマスクが透けて
   ヘッダーまで暗く見える。メニューを開いている間は不透明にしてマスク対象から外す。 */
body.nav-open .site-header {
	background: #fff;
}

/* フローティングLINEボタンはスニペット側で z-index:9999 が付き、
   そのままだとマスク(.nav-overlay=55)より手前に残ってしまう。
   メニューを開いている間はオーバーレイより下げてマスク対象に含める。 */
body.nav-open .line-float-btn {
	z-index: 1 !important;
}

.site-nav .menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-nav .menu a {
	display: block;
	padding: 11px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
}

.site-nav .menu a:hover {
	color: var(--amber-300);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
	padding: var(--section-pad) 0;
}

.section--tint {
	background: var(--bg-tint);
}

.section--dark {
	position: relative;
	background: var(--grad-band);
	background-size: 200% 200%;
	color: #e8eef8;
	overflow: hidden;
}

.section--dark h2,
.section--dark h3 {
	color: #fff;
}

.section--dark p {
	color: #ccd9ec;
}

/* --------------------------------------------------------------------------
   Front hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	padding: clamp(56px, 9vw, 110px) 0 clamp(72px, 10vw, 120px);
	background: linear-gradient(
		115deg,
		#123769 0%,
		#1e579c 40%,
		#3477c4 68%,
		#6ea6e8 100%
	);
	background-size: 180% 180%;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	animation: gim-grad-shift 18s ease-in-out infinite alternate;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(
			100deg,
			rgba(8, 28, 61, 0.68) 0%,
			rgba(18, 62, 115, 0.44) 40%,
			rgba(52, 119, 196, 0.12) 72%,
			rgba(110, 166, 232, 0.16) 100%
		),
		linear-gradient(180deg, rgba(30, 87, 156, 0.08), rgba(8, 28, 61, 0.2)),
		/* url("../img/hero-bg-manufacturing-dx.png"); */
		/* url("../img/hero-bg-manufacturing-dx-right-person-v2.png"); */
		url("../img/hero-bg-manufacturing-dx-right-person-v2.webp");
	/* url("../img/hero-bg-manufacturing-dx-variant-02.png"); */
	background-position: center;
	background-size: cover;
	opacity: 0.72;
	filter: saturate(1.08) brightness(1.08);
	pointer-events: none;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* background:
		linear-gradient(
			100deg,
			rgba(3, 12, 30, 0.94) 0%,
			rgba(6, 19, 45, 0.88) 28%,
			rgba(10, 33, 75, 0.62) 52%,
			rgba(10, 33, 75, 0.18) 78%,
			rgba(10, 33, 75, 0) 100%
		),
		linear-gradient(180deg, rgba(3, 12, 30, 0.2), rgba(3, 12, 30, 0.36)); */
	/* background:
		linear-gradient(
			100deg,
			rgba(52, 82, 143, 0.2) 0%,
			rgba(52, 76, 122, 0.1) 28%,
			rgba(74, 99, 146, 0.05) 52%,
			rgba(10, 33, 75, 0) 78%,
			rgba(10, 33, 75, 0) 100%
		),
		linear-gradient(180deg, rgba(122, 159, 233, 0.05), rgba(99, 141, 226, 0.1)); */
	pointer-events: none;
}

.hero__deco,
.page-hero__deco,
.cta-band__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__deco {
	z-index: 1;
}

.hero__deco span,
.page-hero__deco span,
.cta-band__deco span {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.5;
	animation: gim-float 22s ease-in-out infinite alternate;
}

.hero__deco span:nth-child(1) {
	width: 420px;
	height: 420px;
	top: -140px;
	right: -100px;
	background: radial-gradient(
		circle,
		rgba(95, 212, 208, 0.55),
		transparent 70%
	);
}

.hero__deco span:nth-child(2) {
	width: 360px;
	height: 360px;
	bottom: -160px;
	left: -120px;
	background: radial-gradient(circle, rgba(59, 118, 201, 0.7), transparent 70%);
	animation-delay: -8s;
}

.hero__deco span:nth-child(3) {
	width: 220px;
	height: 220px;
	top: 30%;
	left: 38%;
	background: radial-gradient(
		circle,
		rgba(247, 183, 51, 0.28),
		transparent 70%
	);
	animation-delay: -14s;
}

.hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(40px, 6vw, 64px);
	align-items: center;
}

.hero__content {
	position: relative;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.hero .eyebrow {
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.48);
	background: rgba(3, 12, 30, 0.42);
	color: #fff;
	font-size: clamp(0.86rem, 2.6vw, 0.95rem);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.hero h1 {
	color: #fff;
	margin-bottom: 0.5em;
	/* font-size: clamp(1.5rem, 6.4vw, 3.05rem); */
	font-size: clamp(2.4rem, 6.4vw, 3.05rem);
	text-shadow: 0 3px 22px rgba(0, 0, 0, 0.5);
}

.hero .text-grad {
	background: linear-gradient(90deg, #fff3b0, var(--amber-300), #f7a020);
	/* background: #f7a020; */
	/* background: var(--grad-text); */
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--amber-300);
	text-shadow: 1px 3px 2px rgba(247, 160, 32, 0.5);
}

/* h1配下の text-grad（「一発管理」）に下線
   ※ background-clip:text + text-fill-color:transparent のため
     text-decoration では下線が透明クリップされる。border-bottom で確実に表示する */
.hero h1 .text-grad {
	display: inline-block;
	border-bottom: 3px solid var(--amber-300);
	padding-bottom: 2px;
}

.hero .lead {
	color: #fff;
	font-size: clamp(0.9rem, 2.9vw, 1.22rem);
	line-height: 1.9;
	font-weight: 700;
}

/* .hero .button--accent {
	box-shadow:
		0 14px 34px rgba(0, 0, 0, 0.32),
		0 8px 28px rgba(247, 183, 51, 0.34);
} */

.hero .button--ghost {
	background: rgba(3, 12, 30, 0.46);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.82);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.hero .button--ghost:hover {
	background: rgba(3, 12, 30, 0.62);
	color: #fff;
	border-color: #fff;
}

/* ヒーローの主ボタンを大きく・目立たせる。clamp で SP〜PC を滑らかに拡縮。
   .button--lg を直接拡張すると CTA帯のボタンにも波及するため hero に限定。
   gap は PC で少し広めにし、clamp で SP〜PC を滑らかに調整(SPは下の媒体クエリで上書き)。 */
.hero .button-row {
	gap: clamp(12px, 1.6vw, 18px);
}

/* PC は2ボタンを等分(flex:1 1 0)して button-row の横幅いっぱいに広げる。
   text は .button の justify-content:center で中央寄せのまま。
   横 padding の最小値は抑えて、狭い2カラム幅でも内容が折返さないようにする。 */
.hero .button-row .button {
	flex: 1 1 0;
	min-width: 0;
	min-height: clamp(58px, 6.4vw, 68px);
	padding: clamp(14px, 2.2vw, 21px) clamp(20px, 3.4vw, 46px);
	font-size: clamp(1.05rem, 2.7vw, 1.18rem);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.hero-points {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 28px;
}

.hero-points li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 4px;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
}

.hero-points li + li {
	border-top: 1px solid #fff;
}

.hero-point__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
}

.hero-point__icon img {
	display: block;
	width: clamp(36px, 6.4vw, 50px);
	height: clamp(36px, 6.4vw, 50px);
}

.hero-point__text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	word-break: keep-all;
	text-wrap: balance;
}

.hero-point__text::before {
	content: "✓";
	flex: 0 0 auto;
	color: var(--amber-300);
	font-weight: 900;
}

/* hero-point__text は <wbr> + keep-all + text-wrap:balance で改行位置を手調整しているため、
   BudouX による自動の改行位置（ゼロ幅スペース）の挿入を無効化する。
   各セグメントを white-space:nowrap にすると BudouX は「分割可能なテキストが無い段落」と判断して
   何もしない（NoBreak 扱い）。改行は <wbr> の位置でのみ発生する。
   __line はセグメントと <wbr> を 1 つの flex アイテムにまとめ、従来のレイアウトを保つためのラッパー。 */
.hero-point__seg {
	white-space: nowrap;
}

/* hero-points を visual カラム（note の下）に置いた際の余白調整。
   note との間に上側余白を入れ、下端は section の padding に任せて 0。 */
.hero__visual .hero-points {
	margin-top: clamp(20px, 3vw, 28px);
	margin-bottom: 0;
}

.hero__visual {
	position: relative;
}

.hero__visual::before {
	content: "";
	position: absolute;
	inset: -10% -8% auto;
	aspect-ratio: 16 / 11;
	background: radial-gradient(
		closest-side,
		rgba(127, 180, 239, 0.45),
		rgba(95, 212, 208, 0.18) 55%,
		transparent 75%
	);
	filter: blur(26px);
	pointer-events: none;
}

.hero__visual-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.94);
}

.hero__visual-card img {
	display: block;
	width: 100%;
}

.hero__visual-card .hero__illustration {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.hero__visual-note {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 20px auto 0;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.hero__visual-note::before,
.hero__visual-note::after {
	content: "";
	flex: 0 1 72px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(127, 180, 239, 0.85) 55%,
		rgba(95, 212, 208, 0.85)
	);
}

.hero__visual-note::after {
	background: linear-gradient(
		90deg,
		rgba(95, 212, 208, 0.85),
		rgba(127, 180, 239, 0.85) 45%,
		transparent
	);
}

/* --------------------------------------------------------------------------
   Page hero (sub pages)
   -------------------------------------------------------------------------- */

.page-hero {
	position: relative;
	padding: clamp(48px, 8vw, 88px) 0;
	background: linear-gradient(
		115deg,
		#123769 0%,
		#1e579c 40%,
		#3477c4 68%,
		#6ea6e8 100%
	);
	background-size: 180% 180%;
	color: #fff;
	overflow: hidden;
}

.page-hero__deco span:nth-child(1) {
	width: 320px;
	height: 320px;
	top: -120px;
	right: -80px;
	background: radial-gradient(circle, rgba(95, 212, 208, 0.5), transparent 70%);
}

.page-hero__deco span:nth-child(2) {
	width: 280px;
	height: 280px;
	bottom: -140px;
	left: -90px;
	background: radial-gradient(
		circle,
		rgba(59, 118, 201, 0.65),
		transparent 70%
	);
	animation-delay: -10s;
}

.page-hero__inner {
	position: relative;
	max-width: 820px;
}

.page-hero h1 {
	color: #fff;
	margin-bottom: 0.4em;
}

.page-hero .lead {
	color: #cfdcef;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Stats bar
   -------------------------------------------------------------------------- */

.stats-section {
	position: relative;
	z-index: 5;
	margin-top: clamp(-56px, -6vw, -40px);
	padding-bottom: var(--section-pad);
}

.stats-bar {
	position: relative;
	display: grid;
	gap: 0;
	padding: clamp(22px, 4vw, 36px);
	border-radius: var(--radius-lg);
	background: var(--card);
	box-shadow: var(--shadow);
	border: 1px solid var(--line);
}

/* カード内側 8px に stat__num と同じグラデーションのインナーフレームを描く
   （グラデは border で描けないため、mask で枠線部分だけ残す） */
.stats-bar::after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: calc(var(--radius-lg) - 8px);
	padding: 1px;
	background: linear-gradient(120deg, var(--navy-800), var(--navy-400));
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.stat {
	text-align: center;
	padding: 14px clamp(12px, 2.2vw, 24px);
}

/* stat 同士の区切り線（ネイビー）。stats-bar の gap を 0 にし、stat の左右/上下
   padding の内側に線を置くことで両隣の余白が均等＝線が中央に見える。
   SP（1カラム縦積み）は上に横線、PC（3カラム横並び）は下の媒体クエリで左の縦線へ切替。 */
.stat + .stat {
	border-top: 1px solid var(--navy-800);
}

.stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	margin: 0;
	color: var(--navy-800);
	font-weight: 900;
	line-height: 1.1;
}

.stat__prefix,
.stat__suffix {
	font-size: 1.05rem;
}

.stat__num {
	font-size: clamp(2.4rem, 7vw, 3.2rem);
	background: linear-gradient(120deg, var(--navy-800), var(--navy-400));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

/* ラベルはアクセントカラー（黄色）のバッジに。inline-block で文字幅に追従し、
   .stat の text-align:center で中央寄せ。長いラベルはバッジ内で折返す。
   黄色背景で読めるよう文字色はネイビー（accent ボタンと同じ --navy-950）。 */
.stat__label {
	display: inline-block;
	margin: 10px 0 0;
	padding: 5px 14px;
	border-radius: 10px;
	background: var(--amber-grad);
	color: var(--navy-950);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Note link card
   -------------------------------------------------------------------------- */

.note-link-section {
	padding: 0 0 var(--section-pad);
	overflow: hidden;
}

.note-slider {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.note-slider__viewport {
	overflow: hidden;
	padding: 18px clamp(18px, 4vw, 56px) 28px;
	touch-action: pan-y;
}

.note-slider__track {
	position: relative;
	display: flex;
	gap: clamp(14px, 2vw, 28px);
	transform: translate3d(var(--note-slide-offset, 0%), 0, 0);
	transition: transform 0.65s var(--ease-out);
	will-change: transform;
}

.note-slider__track.is-resetting {
	transition: none;
}

.note-slider__slide {
	flex: 0 0 min(82vw, 400px);
	min-width: 0;
}

.note-link-card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
	box-shadow: var(--shadow-sm);
	color: #fff;
	text-decoration: none;
	transition:
		transform 0.25s var(--ease-out),
		box-shadow 0.25s var(--ease-out),
		border-color 0.25s var(--ease-out);
}

.note-link-card__media {
	position: relative;
	display: block;
}

.note-link-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1280 / 670;
	object-fit: cover;
}

.note-link-card:hover {
	transform: translateY(-2px);
	border-color: var(--navy-400);
	box-shadow: var(--shadow);
	color: #fff;
}

.note-link-card:focus-visible {
	outline: 3px solid var(--navy-400);
	outline-offset: 4px;
}

.note-link-card__eyebrow {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background: rgba(6, 15, 34, 0.78);
	color: var(--amber-300);
	font-family: Roboto, sans-serif;
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	line-height: 1.4;
}

.note-link-card__action {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 1;
	display: inline-flex;
	gap: 8px;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	background: rgba(6, 15, 34, 0.78);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 800;
	line-height: 1.4;
}

.note-link-card__action-arrow {
	transition: transform 0.3s var(--ease-out);
}

.note-link-card:hover .note-link-card__action-arrow {
	transform: translateX(6px);
}

.note-link-card__title {
	min-height: calc(3.1em + 38px);
	margin: 0;
	padding: 16px 18px 22px;
	color: var(--ink);
	font-size: clamp(1.02rem, 3.8vw, 1.22rem);
	line-height: 1.55;
}

.note-slider__controls {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 30px;
}

.note-slider__button {
	display: inline-grid;
	width: 40px;
	height: 40px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--card);
	color: var(--navy-800);
	font-size: 1.15rem;
	line-height: 1;
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.25s var(--ease-out),
		box-shadow 0.25s var(--ease-out),
		border-color 0.25s var(--ease-out);
}

.note-slider__button:hover {
	transform: translateY(-2px);
	border-color: var(--navy-400);
	box-shadow: var(--shadow);
}

.note-slider__button-icon {
	display: block;
	width: 12px;
	height: auto;
	transform: translateX(2px);
}

.note-slider__button-icon--prev {
	transform: translateX(-2px) rotate(180deg);
}

.note-slider__button:focus-visible,
.note-slider:focus-visible {
	outline: 3px solid var(--navy-400);
	outline-offset: 3px;
}

@media (min-width: 700px) {
	.note-slider__slide {
		flex-basis: clamp(280px, 28vw, 440px);
	}
}

/* --------------------------------------------------------------------------
   Problem cards
   -------------------------------------------------------------------------- */

.problem-grid {
	display: grid;
	gap: 22px;
}

.problem-grid article {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out);
}

.problem-grid img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.problem-grid h3 {
	margin: 18px 20px 8px;
}

.problem-grid h3::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--navy-800);
	color: var(--amber-300);
	font-size: 0.85rem;
	font-weight: 900;
	vertical-align: 2px;
}

.problem-grid p {
	margin: 0 20px 22px;
	color: var(--muted);
	font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   Before / After
   -------------------------------------------------------------------------- */

.ba-grid {
	display: grid;
	gap: 18px;
	align-items: stretch;
}

.ba-card {
	border-radius: var(--radius);
	padding: clamp(22px, 4vw, 32px);
	box-shadow: var(--shadow-sm);
}

.ba-card__label {
	display: inline-block;
	margin: 0 0 14px;
	padding: 5px 18px;
	border-radius: var(--radius-pill);
	font-size: 0.85rem;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.ba-card--before {
	background: #f3f5f9;
	border: 1px solid var(--line);
}

.ba-card--before .ba-card__label {
	background: #d9dfeb;
	color: var(--muted);
}

.ba-card--after {
	background: var(--navy-800);
	background: var(--grad-band);
	color: #eaf1fb;
}

.ba-card--after .ba-card__label {
	background: var(--amber-grad);
	color: var(--navy-950);
}

.ba-card--after h3,
.ba-card--after p {
	color: #fff;
}

.ba-card ul li {
	position: relative;
	padding: 8px 0 8px 32px;
	font-weight: 600;
	font-size: 0.96rem;
}

.ba-card--before ul li {
	color: var(--muted);
}

.ba-card--before ul li::before {
	content: "✕";
	position: absolute;
	left: 4px;
	color: #c25151;
	font-weight: 900;
}

.ba-card--after ul li::before {
	content: "✓";
	position: absolute;
	left: 4px;
	color: var(--amber-300);
	font-weight: 900;
}

.ba-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 回転は画像側に持たせる（.reveal の transform と衝突させないため）。
   SP では 90 度回して下向き、PC では SVG 既定の右向きに戻す。 */
.ba-arrow__icon {
	display: block;
	width: 26px;
	height: auto;
	transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */

.feature-grid {
	display: grid;
	gap: 22px;
}

.feature-card {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out);
}

.feature-card__num {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	background: rgba(6, 15, 34, 0.78);
	color: var(--amber-300);
	font-family: Roboto, sans-serif;
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	backdrop-filter: blur(4px);
}

.feature-card__figure {
	overflow: hidden;
}

.feature-card__figure img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

.feature-card__body {
	padding: 20px 22px 24px;
}

.feature-card__body p {
	margin: 0;
	color: var(--muted);
	font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   Front page migrated sections
   -------------------------------------------------------------------------- */

.front-simple-hero {
	position: relative;
	overflow: hidden;
}

.front-simple-hero__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.front-simple-hero__inner h2 {
	font-size: clamp(1.8rem, 7vw, 3rem);
}

.front-simple-hero__inner p {
	margin: 0.4em 0 0;
	color: var(--muted);
	font-size: clamp(1rem, 3.5vw, 1.16rem);
	font-weight: 700;
}

.industry-grid {
	display: grid;
	gap: 22px;
}

.industry-card {
	display: grid;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out);
}

.industry-card figure {
	min-height: 190px;
	overflow: hidden;
}

.industry-card img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

.industry-card div {
	padding: 20px 22px 24px;
}

.industry-card h3 {
	font-size: 1.12rem;
}

.industry-card p {
	margin: 0;
	color: var(--muted);
	font-size: 0.94rem;
}

.front-solution-cta {
	position: relative;
	display: grid;
	gap: 24px;
	align-items: center;
}

.front-solution-cta h2 {
	color: #fff;
	font-size: clamp(1.8rem, 7vw, 3.1rem);
}

.front-solution-cta p {
	margin: 0;
	color: #ccd9ec;
	font-weight: 700;
}

.reason-grid {
	display: grid;
	gap: 18px;
	counter-reset: reason;
}

.reason-card {
	position: relative;
	background: var(--card);
	border: 1px solid rgba(29, 74, 143, 0.16);
	border-radius: var(--radius);
	padding: clamp(24px, 5vw, 34px);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition:
		transform 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out);
}

.reason-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 100%;
	/* background: var(--amber-grad); */
	background: var(--grad-hero);
	/* background: #2f63b469; */
	/* background: var(--grad-text); */
}

/* .reason-card::after {
	content: "";
	position: absolute;
	right: -32px;
	bottom: -32px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(127, 180, 239, 0.22),
		transparent 70%
	);
	pointer-events: none;
} */

.reason-card__num {
	display: inline-block;
	margin-bottom: 6px;
	font-family: Roboto, sans-serif;
	/* 元: clamp(4.8rem, 5vw, 5.6rem) を一律 ×0.75（PC・SP 共に現状比 75%） */
	font-size: clamp(3.6rem, 3.75vw, 4.2rem);
	font-weight: 800;
	line-height: 1;
	/* color: #2f63b469; */
	/* color: var(--grad-hero); */
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.reason-card h3 {
	margin-bottom: 10px;
	font-size: 1.4rem;
}

.reason-card p {
	margin: 0;
	color: var(--muted);
	font-size: 0.94rem;
}

.voice-grid {
	display: grid;
	gap: 22px;
}

.voice-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(24px, 5vw, 32px);
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out);
}

/* .voice-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
} */

.voice-card__stars {
	margin: 0 0 18px;
	color: var(--amber-400);
	font-size: 1.05rem;
	letter-spacing: 0.08em;
}

.voice-card__text {
	flex: 1;
	margin: 0 0 24px;
	color: var(--ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.8;
	text-align: justify;
	/* text-align: center;
	letter-spacing: 4%; */
}

.voice-card__person {
	display: grid;
	justify-items: center;
	gap: 10px;
	text-align: center;
}

.voice-card__person img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--shadow-sm);
}

.voice-card__person h3 {
	margin: 0;
	font-size: 0.94rem;
}

.voice-card__person p {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: 0.84rem;
}

.front-contact {
	/* display: grid; */
	/* gap: 28px; */
	align-items: stretch;
}

/* 右カラム：キャンペーン訴求（support-box を流用） */
.front-contact__aside {
	display: flex;
}

.front-contact__aside .support-box {
	flex: 1;
}

/* support-box を明るいセクション単体でも成立させるネイビー地バリアント */
.support-box--solid {
	background: var(--grad-band);
	border-color: rgba(255, 255, 255, 0.16);
	color: #fff;
	box-shadow: var(--shadow);
}

.support-box--solid h3 {
	color: #fff;
}

.support-box--solid p {
	color: #dbe9fb;
}

@media (max-width: 699px) {
	.front-contact {
		padding-bottom: 96px;
	}

	.front-contact .form-panel {
		padding-bottom: 72px;
	}
}

/* --------------------------------------------------------------------------
   Steps（導入の流れ）
   -------------------------------------------------------------------------- */

.steps {
	display: grid;
	gap: 0;
	counter-reset: step;
}

.step {
	position: relative;
	display: flex;
	gap: 18px;
	padding: 0 0 32px 0;
}

.step::before {
	content: "";
	position: absolute;
	top: 52px;
	left: 25px;
	bottom: 4px;
	width: 2px;
	background: linear-gradient(180deg, var(--navy-400), var(--line));
}

.step:last-child::before {
	display: none;
}

.step__num {
	flex: 0 0 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 50%;
	background: var(--grad-band);
	color: #fff;
	font-size: 1.3rem;
	font-weight: 900;
	box-shadow: var(--shadow-sm);
}

.step__body {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 22px;
	box-shadow: var(--shadow-sm);
	flex: 1;
}

.step__body h3 {
	margin-bottom: 6px;
}

.step__body p {
	margin: 0;
	color: var(--muted);
	font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   Dark split / support box
   -------------------------------------------------------------------------- */

.split {
	position: relative;
	display: grid;
	gap: 32px;
	align-items: center;
}

.support-box {
	position: relative;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 4vw, 36px);
	backdrop-filter: blur(6px);
	overflow: hidden;
}

.support-box::after {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(247, 183, 51, 0.3), transparent 70%);
	filter: blur(20px);
}

/* セレクタの詳細度を .section--dark p より高くし、薄青の継承を防ぐ */
.support-box .support-box__label {
	display: inline-block;
	margin: 0 0 14px;
	padding: 5px 16px;
	border-radius: var(--radius-pill);
	background: var(--amber-grad);
	color: var(--navy-950);
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.02em;
}

.support-box h3 {
	font-size: 1.4rem;
}

.support-box h3 span {
	color: var(--amber-300);
	font-size: 1.7rem;
}

.support-box p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
	position: relative;
	background: var(--grad-band);
	background-size: 200% 200%;
	color: #fff;
	padding: clamp(56px, 8vw, 88px) 0;
	overflow: hidden;
	animation: gim-grad-shift 16s ease-in-out infinite alternate;
}

.cta-band__deco span:nth-child(1) {
	width: 300px;
	height: 300px;
	top: -120px;
	right: -60px;
	background: radial-gradient(circle, rgba(95, 212, 208, 0.4), transparent 70%);
}

.cta-band__deco span:nth-child(2) {
	width: 260px;
	height: 260px;
	bottom: -120px;
	left: -70px;
	background: radial-gradient(
		circle,
		rgba(247, 183, 51, 0.22),
		transparent 70%
	);
	animation-delay: -9s;
}

.cta-band__inner {
	position: relative;
	display: grid;
	gap: 26px;
	align-items: center;
}

.cta-band h2 {
	color: #fff;
}

.cta-band p {
	color: #ccd9ec;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Case cards
   -------------------------------------------------------------------------- */

.case-grid {
	display: grid;
	gap: 22px;
}

.case-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.case-card__figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.case-card__body {
	padding: 22px 24px 26px;
}

.tag {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	background: var(--bg-tint);
	color: var(--navy-600);
	font-size: 0.8rem;
	font-weight: 700;
}

.case-card__row {
	position: relative;
	margin: 0 0 10px;
	padding-left: 58px;
	color: var(--muted);
	font-size: 0.93rem;
}

.case-card__row strong {
	position: absolute;
	left: 0;
	top: 2px;
	display: inline-block;
	padding: 1px 10px;
	border-radius: var(--radius-sm);
	font-size: 0.76rem;
	font-weight: 900;
}

.case-card__row--before strong {
	background: #f0f2f7;
	color: var(--muted);
}

.case-card__row--after strong {
	background: var(--navy-800);
	color: var(--amber-300);
}

.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	margin-bottom: 22px;
}

.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   Price cards
   -------------------------------------------------------------------------- */

.price-benefits {
	margin: 0 0 clamp(26px, 5vw, 42px);
	padding: clamp(18px, 3vw, 26px) 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.js .price-benefits {
	max-height: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	border-top-width: 0;
	border-bottom-width: 0;
	opacity: 0;
	filter: blur(8px);
	transform: translateY(26px) scale(0.985);
	transition:
		max-height 0.78s var(--ease-out),
		margin-bottom 0.78s var(--ease-out),
		padding-top 0.78s var(--ease-out),
		padding-bottom 0.78s var(--ease-out),
		border-width 0.78s var(--ease-out),
		opacity 0.7s var(--ease-out),
		filter 0.7s var(--ease-out),
		transform 0.7s var(--ease-out);
	will-change: max-height, opacity, filter, transform;
}

.js .price-benefits.is-visible {
	max-height: 520px;
	margin-bottom: clamp(26px, 5vw, 42px);
	padding-top: clamp(18px, 3vw, 26px);
	padding-bottom: clamp(18px, 3vw, 26px);
	border-top-width: 1px;
	border-bottom-width: 1px;
	opacity: 1;
	filter: blur(0);
	transform: none;
}

.price-benefits h2 {
	margin-bottom: 16px;
	font-size: clamp(1.55rem, 4vw, 2.2rem);
	line-height: 1.35;
}

.price-benefits__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
}

.price-benefits__list li {
	position: relative;
	padding-left: 28px;
	color: var(--navy-800);
	font-weight: 800;
	line-height: 1.45;
}

.price-benefits__list li:nth-child(1) {
	--benefit-delay: 200ms;
}

.price-benefits__list li:nth-child(2) {
	--benefit-delay: 300ms;
}

.price-benefits__list li:nth-child(3) {
	--benefit-delay: 400ms;
}

.price-benefits__list li:nth-child(4) {
	--benefit-delay: 500ms;
}

.price-benefits__list li:nth-child(5) {
	--benefit-delay: 600ms;
}

.js .price-benefits__list li {
	opacity: 0;
	transform: translateX(-14px);
	transition:
		opacity 0.2s var(--ease-out),
		transform 0.2s var(--ease-out);
	transition-delay: calc(220ms + var(--benefit-delay, 0ms));
	will-change: opacity, transform;
}

.js .price-benefits.is-visible .price-benefits__list li {
	opacity: 1;
	transform: none;
}

.price-benefits__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-weight: 900;
	transform-origin: 50% 55%;
}

.js .price-benefits__list li::before {
	opacity: 0;
	transform: scale(0.4) rotate(-18deg);
	transition:
		opacity 0.2s var(--ease-out),
		transform 0.2s var(--ease-out);
	transition-delay: calc(420ms + var(--benefit-delay, 0ms));
}

.js .price-benefits.is-visible .price-benefits__list li::before {
	opacity: 1;
	transform: scale(1) rotate(0);
}

@media (min-width: 980px) {
	.js .price-benefits.is-visible {
		max-height: 760px;
	}

	.price-benefits__list {
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		gap: 18px;
	}

	.price-benefits__list li {
		display: flex;
		min-height: 82px;
		align-items: center;
		gap: 10px;
		padding: 18px 18px 18px 28px;
		overflow: hidden;
		border: 1px solid rgba(29, 74, 143, 0.16);
		border-radius: var(--radius);
		background: var(--card);
		box-shadow: var(--shadow-sm);
		transition:
			opacity 0.2s var(--ease-out),
			transform 0.2s var(--ease-out),
			box-shadow 0.35s var(--ease-out);
		transition-delay:
			calc(220ms + var(--benefit-delay, 0ms)),
			calc(220ms + var(--benefit-delay, 0ms)), 0s;
	}

	.price-benefits__list li::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 100%;
		background: var(--grad-hero);
	}

	.price-benefits__list li::before {
		position: static;
		left: auto;
		display: inline-flex;
		flex: 0 0 auto;
		margin: 0;
		align-items: center;
		font-family: inherit;
		font-size: 1em;
		font-weight: 900;
		line-height: inherit;
		z-index: 1;
	}

	.js .price-benefits__list li {
		transform: translateY(18px) scale(0.97);
	}

	.js .price-benefits.is-visible .price-benefits__list li {
		transform: none;
	}
}

.price-grid {
	display: grid;
	gap: 22px;
	align-items: stretch;
}

.price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(26px, 4vw, 34px);
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out);
}

.price-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.price-card--featured {
	border: 2px solid var(--amber-400);
	box-shadow: var(--shadow);
}

.price-card__badge {
	position: absolute;
	top: -14px;
	left: 24px;
	margin: 0;
	padding: 5px 18px;
	border-radius: var(--radius-pill);
	background: var(--amber-grad);
	color: var(--navy-950);
	font-size: 0.82rem;
	font-weight: 900;
	box-shadow: var(--glow-amber);
}

.price {
	margin: 4px 0 10px;
	color: var(--navy-800);
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.price span {
	font-size: 1.2rem;
	margin-right: 2px;
}

.price small {
	font-size: 0.95rem;
	color: var(--muted);
	font-weight: 700;
}

.price-card__lead {
	color: var(--muted);
	font-size: 0.93rem;
}

.price-card ul {
	margin: 8px 0 22px;
	flex: 1;
}

.price-card ul li {
	position: relative;
	padding: 7px 0 7px 28px;
	border-bottom: 1px dashed var(--line);
	font-size: 0.93rem;
}

.price-card ul li::before {
	content: "✓";
	position: absolute;
	left: 2px;
	color: var(--navy-400);
	font-weight: 900;
}

.price-card .button {
	width: 100%;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-list {
	display: grid;
	gap: 14px;
	max-width: 820px;
	margin-inline: auto;
}

.faq-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition:
		border-color 0.3s var(--ease-out),
		box-shadow 0.3s var(--ease-out);
}

.faq-item[open] {
	border-color: var(--navy-400);
	box-shadow: var(--shadow);
}

.faq-item__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.25s var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}

.faq-item__summary::-webkit-details-marker {
	display: none;
}

.faq-item__summary:hover {
	background: var(--bg-tint);
}

.faq-item__question {
	flex: 1 1 auto;
}

/* 開閉アイコン：「+」を 45° 回して「×」へなめらかに変化させる。 */
.faq-item__summary::after {
	content: "+";
	flex: 0 0 auto;
	margin-left: 6px;
	color: var(--navy-400);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.4s var(--ease-out);
}

/* JS 無効時のフォールバック：open 属性でアイコンを回転。 */
.faq-item[open] .faq-item__summary::after {
	transform: rotate(135deg);
}

.faq-item__icon {
	flex: 0 0 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--grad-band);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 900;
}

/* 回答エリア：grid-template-rows を 0fr → 1fr に補間して高さをなめらかに開閉する。 */
.faq-item__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition:
		grid-template-rows 0.42s var(--ease-out),
		opacity 0.32s var(--ease-out);
	opacity: 0;
}

.faq-item__answer-inner {
	min-height: 0;
	overflow: hidden;
}

/* JS 無効時のフォールバック：open 属性だけで開いた状態を表示する。 */
.faq-item[open] .faq-item__answer-wrap {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* JS 有効時：is-open クラスで制御し、閉じるアニメーションも効かせる。 */
.faq-list.is-enhanced .faq-item[open] .faq-item__answer-wrap {
	grid-template-rows: 0fr;
	opacity: 0;
}

.faq-list.is-enhanced .faq-item.is-open .faq-item__answer-wrap {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* + アイコンの回転も JS 有効時は is-open に追従させ、閉じる動きと同期させる。 */
.faq-list.is-enhanced .faq-item[open] .faq-item__summary::after {
	transform: rotate(0);
}

.faq-list.is-enhanced .faq-item.is-open .faq-item__summary::after {
	transform: rotate(135deg);
}

.faq-item__answer {
	margin: 0;
	padding: 2px 22px 20px 68px;
	color: var(--muted);
	font-size: 0.95rem;
	transform: translateY(-6px);
	transition: transform 0.42s var(--ease-out);
}

.faq-item[open] .faq-item__answer,
.faq-list.is-enhanced .faq-item.is-open .faq-item__answer {
	transform: translateY(0);
}

.faq-list.is-enhanced .faq-item[open] .faq-item__answer {
	transform: translateY(-6px);
}

.faq-list.is-enhanced .faq-item.is-open .faq-item__answer {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */

.news-list {
	display: grid;
	gap: 0;
	max-width: 820px;
}

.news-list article {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 6px;
	border-bottom: 1px solid var(--line);
	transition: background-color 0.25s var(--ease-out);
}

.news-list article:hover {
	background: var(--bg-tint);
}

.news-list time {
	color: var(--navy-400);
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.news-list h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.news-list h3 a {
	color: var(--ink);
}

.news-list h3 a:hover {
	color: var(--navy-600);
}

/* --------------------------------------------------------------------------
   Detail cards / check list / sub-page parts
   -------------------------------------------------------------------------- */

.detail-grid {
	display: grid;
	gap: 18px;
}

.detail-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--navy-400);
	border-radius: var(--radius);
	padding: 22px 24px;
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out);
}

.detail-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.detail-card h2,
.detail-card h3 {
	font-size: 1.1rem;
	margin-bottom: 8px;
}

.detail-card p {
	margin: 0;
	color: var(--muted);
	font-size: 0.94rem;
}

.detail-card--before {
	border-left-color: #c25151;
}

.detail-card--after {
	border-left-color: var(--amber-400);
}

.check-list li {
	position: relative;
	padding: 8px 0 8px 34px;
	font-weight: 600;
}

.check-list li::before {
	content: "✓";
	position: absolute;
	left: 2px;
	top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bg-tint);
	color: var(--navy-600);
	font-size: 0.8rem;
	font-weight: 900;
}

.section--dark .check-list li::before {
	background: rgba(255, 255, 255, 0.12);
	color: var(--amber-300);
}

.support-list {
	display: grid;
	gap: 12px;
}

.support-list li {
	position: relative;
	padding: 14px 18px 14px 48px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-sm);
	font-weight: 600;
	color: #eaf1fb;
}

.support-list li::before {
	content: "✓";
	position: absolute;
	left: 18px;
	color: var(--amber-300);
	font-weight: 900;
}

.note {
	margin-top: 20px;
	color: var(--muted);
	font-size: 0.85rem;
}

.video-stack {
	display: grid;
	gap: 18px;
}

.video-stack .video-embed {
	margin-bottom: 0;
}

/* 導入事例 詳細セクション（section--tint）の事例リスト */
.case-detail-list {
	display: grid;
	gap: 0;
}

/* 各事例ブロック。上下paddingで間隔をとり、帯が隣の事例と隙間なく接する */
.case-detail-item {
	padding-block: clamp(40px, 6vw, 72px);
}

/* 偶数番目の事例の背景を、要素幅を超えて画面幅いっぱいに --bg で敷く。
   .split はグリッドのため通常の擬似要素はセルを占有してしまうが、
   position:absolute の擬似要素はグリッドフローから外れるので安全に全幅化できる。 */
.case-detail-item--even {
	position: relative;
}

.case-detail-item--even::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--bg);
}

.case-detail-item--even > * {
	position: relative;
	z-index: 1;
}

/* 事例が偶数個＝最後の事例が偶数バンドのとき、セクション下padding分も --bg で覆う
   （その分だけ帯を下に延長。余白サイズ自体は変えない）。 */
.case-detail-list > .case-detail-item--even:last-child::before {
	bottom: calc(-1 * var(--section-pad));
}

/* 動画が無い事例（テキストのみ）の本文幅 */
.case-detail-single .case-detail__text {
	max-width: 760px;
}

.case-detail__body {
	margin: 0 0 18px;
}

.case-detail__body > :last-child {
	margin-bottom: 0;
}

/* PC: 偶数番目の事例は「左に動画／右にテキスト」へ反転する。
   SP（< 980px）では .split が1カラムになり、DOM順（テキスト→動画）のまま
   各事例の最下部に動画が積まれる。 */
@media (min-width: 980px) {
	.split--reverse {
		grid-template-columns: 0.9fr 1.1fr;
	}

	.split--reverse .video-stack {
		order: -1;
	}
}

.contact-grid {
	display: grid;
	gap: 32px;
	align-items: start;
}

.contact-panel h2 {
	font-size: 1.3rem;
}

.form-panel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 4vw, 36px);
	box-shadow: var(--shadow);
}

.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="tel"],
.form-panel textarea {
	border-radius: var(--radius-sm) !important;
	border-color: var(--line) !important;
}

.form-panel button[type="submit"],
.form-panel .wpforms-submit {
	background: var(--amber-grad) !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	color: var(--navy-950) !important;
	font-weight: 900 !important;
	min-height: 52px;
	padding: 12px 34px !important;
	box-shadow: var(--glow-amber);
}

.mission-story-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* background-image:
		linear-gradient(
			135deg,
			rgba(10, 26, 51, 0.18) 0%,
			rgba(234, 241, 250, 0.5) 48%,
			rgba(29, 74, 143, 0.2) 100%
		),
		url("../img/mission-story-sky-bg.png"); */
	background-image:
		linear-gradient(
			135deg,
			rgba(10, 26, 51, 0) 0%,
			rgba(234, 241, 250, 0.5) 48%,
			rgba(29, 74, 143, 0) 100%
		),
		url("../img/mission-story-sky-bg.png");
	background-position: center;
	background-size: cover;
}

.mission-story-section .story {
	position: relative;
	z-index: 1;
	padding: clamp(28px, 5vw, 46px);
	color: var(--navy-900);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.mission-story-section .story::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* border: 1px solid rgba(255, 255, 255, 0.72); */
	border-radius: var(--radius);
	/* background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.86),
		rgba(255, 255, 255, 0.74)
	); */
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.17),
		rgba(255, 255, 255, 0.23)
	);
	/* box-shadow: 0 24px 60px rgba(10, 26, 51, 0.16); */
	box-shadow: 0 0 60px 60px rgb(194 202 213 / 33%);
	backdrop-filter: blur(14px) saturate(0.92);
	-webkit-backdrop-filter: blur(14px) saturate(0.92);
}

.story {
	max-width: 912px;
}

.story p {
	margin-bottom: 1.6em;
	font-size: 1.04rem;
}

.story .mission-emphasis {
	margin: 1.8em 0;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 2;
	color: var(--navy-800);
	text-align: center;
}

.story .mission-emphasis span {
	background: linear-gradient(transparent 62%, rgba(247, 183, 51, 0.5) 62%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.case-detail .detail-grid {
	margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   Content body / archive
   -------------------------------------------------------------------------- */

.content-body {
	max-width: 820px;
}

.content-body img {
	border-radius: var(--radius);
}

.single-thumbnail {
	margin-bottom: 28px;
}

.single-thumbnail img {
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.archive-list {
	max-width: 820px;
}

.archive-item {
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}

.archive-item time {
	color: var(--navy-400);
	font-size: 0.85rem;
	font-weight: 700;
}

.archive-item h2 {
	font-size: 1.2rem;
	margin: 4px 0 8px;
}

.archive-item p {
	margin: 0;
	color: var(--muted);
	font-size: 0.94rem;
}

.pagination {
	margin-top: 32px;
}

.pagination .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--card);
	font-weight: 700;
}

.pagination .page-numbers.current {
	background: var(--navy-800);
	border-color: var(--navy-800);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--navy-950);
	color: #aebdd3;
	padding: clamp(48px, 7vw, 72px) 0 0;
}

.site-footer__grid {
	display: grid;
	gap: 36px;
	padding-bottom: 40px;
}

.site-brand--footer {
	display: inline-flex;
	width: fit-content;
}

.site-brand--footer img {
	display: block;
	height: 45px;
	width: auto;
}

.site-footer__about p {
	margin: 16px 0 0;
	font-size: 0.92rem;
}

.footer-links {
	display: grid;
	gap: 12px;
}

.footer-links a {
	color: #cdd9ea;
	font-weight: 600;
	font-size: 0.95rem;
}

.footer-links a:hover {
	color: var(--amber-300);
}

.site-footer__bottom {
	padding: 18px 0 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__bottom small {
	color: #7588a3;
	font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Mobile fixed CTA / LINE float button
   -------------------------------------------------------------------------- */

.mobile-fixed-cta {
	position: fixed;
	z-index: 40;
	right: 16px;
	bottom: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	border-radius: var(--radius-pill);
	background: var(--amber-grad);
	color: var(--navy-950);
	font-weight: 900;
	font-size: 1rem;
	box-shadow: var(--glow-amber);
	transition: transform 0.3s var(--ease-out);
}

.mobile-fixed-cta:hover {
	color: var(--navy-950);
	transform: translateY(-2px);
}

body .line-float-btn {
	right: 18px !important;
	bottom: 82px !important;
}

/* ヒーロー表示中はフローティングCTA（固定CTA・LINEボタン）を隠し、
   ヒーローを過ぎてスクロールすると「ふわっと」表示する。
   表示切替は main.js が <body> に show-floating-cta を付与して行う。 */
.mobile-fixed-cta {
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px);
	transition:
		opacity 0.5s var(--ease-out),
		transform 0.5s var(--ease-out),
		visibility 0s linear 0.5s;
}

body .line-float-btn {
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(24px) !important;
	pointer-events: none !important;
	transition:
		opacity 0.5s var(--ease-out),
		transform 0.5s var(--ease-out),
		visibility 0s linear 0.5s !important;
}

body.show-floating-cta .mobile-fixed-cta {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 0.5s var(--ease-out),
		transform 0.5s var(--ease-out),
		visibility 0s;
}

body.show-floating-cta .line-float-btn {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
   Reveal animations（中程度モーション）
   -------------------------------------------------------------------------- */

.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out);
	transition-delay: var(--reveal-delay, 0s);
	will-change: opacity, transform;
}

.js .reveal--left {
	transform: translateX(-32px);
}

.js .reveal--right {
	transform: translateX(32px);
}

.js .reveal--zoom {
	transform: scale(0.94);
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* PC では stats-bar 本体もスクロール到達時にフェードアップさせ、
   バーが見えてから子要素が順番に出るよう stagger に基礎遅延を足す */
@media (min-width: 980px) {
	.js .stats-bar {
		opacity: 0;
		transform: translateY(26px);
		transition:
			opacity var(--dur) var(--ease-out),
			transform var(--dur) var(--ease-out);
		will-change: opacity, transform;
	}

	.js .stats-bar.is-visible {
		opacity: 1;
		transform: none;
	}

	.js .stats-bar .reveal {
		transition-delay: calc(0.45s + var(--reveal-delay, 0s));
	}
}

@keyframes gim-float {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(24px, -28px, 0) scale(1.08);
	}
	100% {
		transform: translate3d(-18px, 20px, 0) scale(0.96);
	}
}

@keyframes gim-grad-shift {
	0% {
		/* background-position: 0% 30%; */
		background-position: 40% 60%;
	}
	100% {
		background-position: 100% 70%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.js .reveal,
	.js .stats-bar {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.story p {
		font-size: 1.14rem;
	}

	.problem-grid,
	.case-grid,
	.price-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.problem-grid--balanced {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.industry-grid,
	.reason-grid,
	.voice-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.front-contact {
		grid-template-columns: 1fr 0.9fr;
	}

	.front-solution-cta {
		grid-template-columns: 1fr auto;
	}

	.stats-bar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* PC は横並びなので区切りを左の縦線に切替（SP の横線は解除） */
	.stat + .stat {
		border-top: 0;
		border-left: 1px solid var(--navy-800);
	}

	.hero-points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hero-points li {
		flex-direction: column;
		justify-content: flex-start;
		gap: 12px;
		padding: 6px 14px;
		text-align: center;
		font-size: 1.3rem;
	}

	.hero-points li + li {
		border-top: 0;
		border-left: 1px solid #fff;
	}

	/* 1行のみの項目も2行の項目と同じ高さを取り、チェック＋テキストを上下中央に */
	.hero-points li .hero-point__text {
		flex: 1 1 auto;
	}

	.ba-grid {
		grid-template-columns: 1fr 56px 1fr;
	}

	.ba-arrow__icon {
		transform: none;
	}

	.cta-band__inner {
		grid-template-columns: 1fr auto;
	}

	.site-footer__grid {
		grid-template-columns: 1.2fr 1fr;
	}

	.detail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contact-grid {
		grid-template-columns: 0.9fr 1.1fr;
	}

	.footer-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.news-list article {
		flex-direction: row;
		align-items: baseline;
		gap: 22px;
	}
}

/* PC（≥700px）：.hero-points li を 1.3rem にしたことに合わせ、0.92rem 以下の
   小さめフォントをまとめて ×1.15 して全体のバランスを取る。
   0.92rem 超のフォント／clamp 指定のフォントは据え置き。SP（≤699px）は html の
   ルート拡大で別途 1.15 倍されるため、ここは PC 専用（min-width:700px）に閉じている。 */
@media (min-width: 700px) {
	.hero-points li {
		font-size: 1.3rem;
	}

	.eyebrow {
		font-size: 0.943rem; /* 0.82rem ×1.15 */
	}

	.stat__label {
		font-size: 1.012rem; /* 0.88rem ×1.15 */
	}

	.problem-grid h3::before {
		font-size: 0.978rem; /* 0.85rem ×1.15 */
	}

	.ba-card__label {
		font-size: 0.978rem; /* 0.85rem ×1.15 */
	}

	.feature-card__num {
		font-size: 0.943rem; /* 0.82rem ×1.15 */
	}

	.voice-card__person p {
		font-size: 0.966rem; /* 0.84rem ×1.15 */
	}

	.support-box .support-box__label {
		font-size: 0.943rem; /* 0.82rem ×1.15 */
	}

	.tag {
		font-size: 0.92rem; /* 0.8rem ×1.15 */
	}

	.case-card__row strong {
		font-size: 0.874rem; /* 0.76rem ×1.15 */
	}

	.price-card__badge {
		font-size: 0.943rem; /* 0.82rem ×1.15 */
	}

	.faq-item__icon {
		font-size: 1.035rem; /* 0.9rem ×1.15 */
	}

	.check-list li::before {
		font-size: 0.92rem; /* 0.8rem ×1.15 */
	}

	.note {
		font-size: 0.978rem; /* 0.85rem ×1.15 */
	}

	.news-list time {
		font-size: 0.978rem; /* 0.85rem ×1.15 */
	}

	.archive-item time {
		font-size: 0.978rem; /* 0.85rem ×1.15 */
	}

	.site-footer__about p {
		font-size: 1.058rem; /* 0.92rem ×1.15 */
	}

	.site-footer__bottom small {
		font-size: 0.92rem; /* 0.8rem ×1.15 */
	}
}

/* PC（≥700px）：上記に続き、0.921rem〜1.02rem のフォントも ×1.15 する。
   body も 1.15rem にして、クラス指定のない継承テキスト（FAQ質問文・記事本文・
   フォーム内テキスト等）もまとめて拡大する。1.04rem 以上（見出し・価格・表示数字
   など）は据え置き。SP（≤699px）は html ルート拡大で別途処理されるため PC 専用。 */
@media (min-width: 700px) {
	body {
		font-size: 1.15rem; /* 1rem ×1.15（継承テキスト用） */
	}

	.lead {
		font-size: 1.173rem; /* 1.02rem ×1.15 */
	}

	.button {
		font-size: 1.127rem; /* 0.98rem ×1.15 */
	}

	.support-box__cta {
		font-size: 1.127rem; /* 0.98rem ×1.15 */
	}

	.ba-card ul li {
		font-size: 1.104rem; /* 0.96rem ×1.15 */
	}

	.hero__visual-note {
		font-size: 1.0925rem; /* 0.95rem ×1.15 */
	}

	.price small {
		font-size: 1.0925rem; /* 0.95rem ×1.15 */
	}

	.faq-item__answer {
		font-size: 1.0925rem; /* 0.95rem ×1.15 */
	}

	.footer-links a {
		font-size: 1.0925rem; /* 0.95rem ×1.15 */
	}

	.problem-grid p,
	.feature-card__body p,
	.industry-card p,
	.reason-card p,
	.step__body p,
	.detail-card p,
	.archive-item p,
	.voice-card__person h3 {
		font-size: 1.081rem; /* 0.94rem ×1.15 */
	}

	.case-card__row,
	.price-card__lead,
	.price-card ul li {
		font-size: 1.0695rem; /* 0.93rem ×1.15 */
	}

	.voice-card__text,
	.news-list h3,
	.mobile-fixed-cta {
		font-size: 1.15rem; /* 1rem ×1.15 */
	}
}

@media (min-width: 980px) {
	.site-brand img {
		/* height: 49px; */
		height: 86px;
	}

	.nav-toggle {
		display: none;
	}

	.nav-overlay {
		display: none;
	}

	/* LINEボタンはモバイルのハンバーガーメニュー内のみ表示し、
	   デスクトップのヘッダーには出さない。 */
	.site-nav .nav-cta--line {
		display: none;
	}

	.site-nav {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 26px;
		padding: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav .menu a {
		display: inline-block;
		border-bottom: 0;
	}

	.site-nav .menu {
		flex-direction: row;
		gap: 26px;
	}

	.site-nav .menu a {
		position: relative;
		color: var(--ink);
		font-size: 1.0925rem; /* 0.95rem ×1.15 */
		padding: 6px 0;
	}

	.site-nav .menu a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2.5px;
		border-radius: 2px;
		background: var(--amber-grad);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s var(--ease-out);
	}

	.site-nav .menu a:hover {
		color: var(--navy-600);
	}

	.site-nav .menu a:hover::after {
		transform: scaleX(1);
	}

	.site-nav .button.nav-cta {
		min-height: 44px;
		padding: 8px 24px;
		/* 0.92rem → ×1.15 */
		font-size: 1.058rem;
	}

	.hero__grid {
		grid-template-columns: 1.05fr 0.95fr;
		/* grid-template-columns: 1.35fr 0.65fr; */
		align-items: stretch;
	}

	.hero__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* padding-block: clamp(14px, 3vw, 34px); */
	}

	.hero h1 {
		margin-bottom: 0;
		font-size: clamp(2.45rem, 4vw, 3.05rem);
		line-height: 1.28;
	}

	.hero .lead {
		margin: clamp(22px, 2.3vw, 30px) 0 0;
	}

	.hero .button-row {
		max-width: min(100%, 575px);
		margin: clamp(30px, 3.2vw, 42px) 0 0;
	}

	.hero-points li {
		flex-direction: column;
		justify-content: flex-start;
		gap: 12px;
		padding: 6px 14px;
		text-align: center;
		/* font-size: 1.3rem; */
		font-size: min(1.8vw, 1.3rem);
	}

	.feature-grid,
	.problem-grid,
	.price-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.problem-grid--balanced,
	.industry-grid,
	.reason-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.voice-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.price-card--featured {
		transform: scale(1.04);
	}

	.price-card--featured:hover {
		transform: scale(1.04) translateY(-4px);
	}

	.split {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 56px;
	}

	.steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 26px;
	}

	.step {
		flex-direction: column;
		padding: 0;
	}

	.step::before {
		top: 26px;
		left: 64px;
		right: -38px;
		bottom: auto;
		width: auto;
		height: 2px;
		background: linear-gradient(90deg, var(--navy-400), var(--line));
	}

	.mobile-fixed-cta {
		display: none;
	}

	body .line-float-btn {
		bottom: 24px !important;
	}
}

/* SP（≤699px）：全テキストを 1.15 倍にする。
   フォントは body も含め全て rem 基準（px 指定は body だけで 1rem に統一済み）なので、
   html のルート font-size を 115% にすることで全テキストが一括で 1.15 倍になる。
   余白・幅の大半は px / clamp(px) 指定のためレイアウトはほぼ影響を受けない。
   px 指定のアイコン類はルート拡大では変わらないので、文字に合わせて個別に ×1.15 する。 */
@media (max-width: 699px) {
	html {
		font-size: 115%;
	}

	/* hero のチェックポイント アイコン（画像）：clamp の各値を ×1.15 */
	.hero-point__icon img {
		width: clamp(41px, 7.36vw, 57px);
		height: clamp(41px, 7.36vw, 57px);
	}

	/* 「!」バッジ（problem 見出し） 24px ×1.15 */
	.problem-grid h3::before {
		width: 28px;
		height: 28px;
	}

	/* Before/After の矢印アイコン 26px ×1.15 */
	.ba-arrow__icon {
		width: 30px;
	}

	/* FAQ アイコン 32px ×1.15（≤599px は下のブロックで 30px に上書き） */
	.faq-item__icon {
		flex-basis: 37px;
		width: 37px;
		height: 37px;
	}

	/* チェックリストの ✓ バッジ 22px ×1.15 */
	.check-list li::before {
		width: 25px;
		height: 25px;
	}
}

@media (max-width: 599px) {
	.hero {
		padding-top: 40px;
	}

	.hero::before {
		background-position: 62% center;
		opacity: 0.76;
	}

	.hero::after {
		/* background:
			linear-gradient(
				180deg,
				rgba(3, 12, 30, 0.92) 0%,
				rgba(6, 19, 45, 0.86) 46%,
				rgba(10, 33, 75, 0.58) 76%,
				rgba(10, 33, 75, 0.32) 100%
			),
			linear-gradient(
				100deg,
				rgba(3, 12, 30, 0.74) 0%,
				rgba(3, 12, 30, 0.34) 100%
			); */
	}

	.hero .button-row {
		gap: 12px;
	}

	.hero .button-row .button {
		flex: 1 1 100%;
		text-shadow: none !important;
	}

	body {
		padding-bottom: 76px;
	}

	/* FAQ アコーディオン（SP） ------------------------------------------------ */
	.faq-list {
		gap: 10px;
	}

	.faq-item__summary {
		gap: 10px;
		padding: 15px 16px;
		font-size: 0.95rem;
		line-height: 1.5;
		/* 折り返した質問文でもアイコンと「+」の縦位置を揃える。 */
		align-items: flex-start;
	}

	.faq-item__icon {
		/* 26px ×1.15。font-size はルート拡大で自動的に大きくなるため指定不要 */
		flex: 0 0 30px;
		width: 30px;
		height: 30px;
	}

	.faq-item__summary::after {
		/* アイコンを行の中央付近に保つための微調整。 */
		margin-top: -2px;
		font-size: 1.35rem;
	}

	.faq-item__answer {
		/* SP では左の大きなインデントを詰めて読みやすくする。 */
		padding: 2px 16px 16px 16px;
		font-size: 0.9rem;
		line-height: 1.7;
	}
}

/* --------------------------------------------------------------------------
   ヒーロー（1カラム＝SP〜タブレット, ≤979px）の組み替え
   - hero__content / hero__visual を display:contents で透過させ、
     両カラムの子要素を hero__grid 直下のアイテムとして縦並びにする。
   - これにより button-row を hero-points の下へ並べ替えられる。
   -------------------------------------------------------------------------- */
@media (max-width: 979px) {
	.hero__grid {
		gap: 0;
	}

	.hero__content,
	.hero__visual {
		display: contents;
	}

	/* SP〜タブレットでは画像カードと「業務の流れを一元化」ラベルは非表示。 */
	.hero__visual-card,
	.hero__visual-note {
		display: none;
	}

	/* 「受注・在庫・出荷・売上を」が改行されないギリギリまで h1 を拡大。 */
	.hero h1 {
		/* font-size: min(7.6vw, 2.4rem); */
		font-size: min(8.4vw, 3.05rem);
	}

	/* wrapper(.hero__content)の text-shadow が display:contents で無効化されるため、
	   背景写真上でも lead が読めるよう影を補う。 */
	.hero .lead {
		/* text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); */
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	}

	/* button-row を hero-points の下へ移動し、上に余白を確保する。 */
	.hero .button-row {
		order: 1;
		margin-top: clamp(20px, 4vw, 28px);
	}

	/* 画面中央寄りの装飾（hero__deco の3つ目＝アンバーの光球）が
	   テキスト背後に重なり、色味が変わって読みづらくなるため非表示。 */
	.hero__deco span:nth-child(3) {
		display: none;
	}

	/* hero__visual を display:contents にした副作用で、その ::before の
	   ぼかしグロウが .hero 基準で中央上部へ浮き上がりテキストに被る。
	   カード自体も非表示で不要なため消す（decoを消しても残る“中央のフィルター”はこれ）。 */
	.hero__visual::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Support box（新規導入キャンペーン）をクリック可能なCTAカード化 + shine演出
   - リンク化してもデザインは維持（color: inherit / text-decoration: none）
   - 斜めの光が定期的に流れる shine。prefers-reduced-motion 時は既存の
     共通ルール（animation 0.01ms !important）で自動的に停止する。
   - SP では .split が1カラム化するため、レイアウトはそのまま崩れない。
   -------------------------------------------------------------------------- */
.support-box--link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition:
		transform 0.4s var(--ease-out),
		box-shadow 0.4s var(--ease-out),
		border-color 0.4s var(--ease-out),
		background 0.4s var(--ease-out);
}

.support-box--link:hover,
.support-box--link:focus-visible {
	transform: translateY(-5px);
	border-color: rgba(247, 183, 51, 0.55);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

.support-box--link:focus-visible {
	outline: 3px solid var(--amber-300);
	outline-offset: 4px;
}

/* 斜めの光が定期的に流れる shine（::after は既存のアンバー光球で使用中のため ::before を使用） */
.support-box--link::before {
	content: "";
	position: absolute;
	top: -25%;
	left: 0;
	width: 38%;
	height: 150%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.05) 35%,
		rgba(255, 255, 255, 0.32) 50%,
		rgba(255, 255, 255, 0.05) 65%,
		transparent 100%
	);
	transform: translateX(-220%) skewX(-18deg);
	pointer-events: none;
	z-index: 2;
	animation: gim-shine 5.5s ease-in-out infinite;
}

.support-box--link:hover::before {
	animation-duration: 1.6s;
}

@keyframes gim-shine {
	0% {
		transform: translateX(-220%) skewX(-18deg);
	}
	22%,
	100% {
		transform: translateX(360%) skewX(-18deg);
	}
}

/* 「無料で相談する →」の誘導ラベル */
.support-box__cta {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	color: var(--amber-300);
	font-weight: 800;
	font-size: 0.98rem;
	letter-spacing: 0.02em;
}

.support-box__cta-arrow {
	transition: transform 0.3s var(--ease-out);
}

.support-box--link:hover .support-box__cta-arrow {
	transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   CTAボタン（アクセント）にも shine 演出を適用
   - ヘッダーCTA（.nav-cta）は対象外。
   - 料金「おすすめ（スタンダード）」カードのボタンも .button--accent のため対象。
   - 光は背景の上・ラベル(<span>)の下を流れるので文字は常に鮮明。
   - gim-shine キーフレームは support-box と共用。
   - prefers-reduced-motion 時は既存の共通ルール（animation 0.01ms !important）で自動停止。
   -------------------------------------------------------------------------- */
.button--accent:not(.nav-cta) {
	position: relative;
	overflow: hidden;
}

.button--accent:not(.nav-cta) > span {
	position: relative;
	z-index: 1;
}

.button--accent:not(.nav-cta)::before {
	content: "";
	position: absolute;
	top: -25%;
	left: 0;
	width: 55%;
	height: 150%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.1) 35%,
		rgba(255, 255, 255, 0.5) 50%,
		rgba(255, 255, 255, 0.1) 65%,
		transparent 100%
	);
	transform: translateX(-220%) skewX(-18deg);
	pointer-events: none;
	z-index: 0;
	animation: gim-shine 5.5s ease-in-out infinite;
}

.button--accent:not(.nav-cta):hover::before {
	animation-duration: 1.6s;
}

@media screen and (max-width: 600px) {
	.hero .lead {
		/* font-size: clamp(0.9rem, 2.9vw, 1.22rem); */
		line-height: 1.4;
		font-weight: 700;
	}
}