/* =====================================================
   AI MASTER — design system
   コーポレート（.site--corporate）とサービス（.site--service）を
   同一の骨格（フォント・余白・グリッド）の上で配色分離する。
   ===================================================== */

:root {
	/* 共通骨格 */
	--font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	--font-jp-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	--font-en: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--container: 1120px;
	--radius: 12px;
	--space-1: 8px; --space-2: 16px; --space-3: 24px;
	--space-4: 40px; --space-5: 64px; --space-6: 104px;

	/* コーポレートパレット */
	--c-bg: #F7F9FA;
	--c-surface: #FFFFFF;
	--c-ink: #111827;
	--c-navy: #102A43;
	--c-emerald: #00A88F;
	--c-line: #E7ECF0;
	--c-muted: #5B6B7A;

	/* サービスパレット */
	--s-blue: #2448E8;
	--s-navy: #101B3F;
	--s-orange: #F45D3B;
	--s-emerald: #00A88F;
	--s-soft: #F4F6FA;
	--s-ink: #20242C;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-jp); font-size: 16px; line-height: 1.9; color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; overflow-wrap: anywhere; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
table { border-collapse: collapse; width: 100%; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-navy); color: #fff; padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--c-emerald); outline-offset: 2px; }
.site--service :focus-visible { outline-color: var(--s-blue); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }

/* ---------- 見出し系 ---------- */
.eyebrow { font-family: var(--font-en); font-weight: 800; font-size: 12px; letter-spacing: .22em; color: var(--c-emerald); margin-bottom: var(--space-2); text-transform: uppercase; }
.section { padding-block: var(--space-6); }
.section--soft { background: var(--c-surface); border-block: 1px solid var(--c-line); }
.section__title { font-family: var(--font-jp-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.5; letter-spacing: .02em; color: var(--c-navy); margin-bottom: var(--space-3); }
.section__lead { max-width: 720px; color: var(--c-muted); margin-bottom: var(--space-2); }
.note { font-size: 14px; color: var(--c-muted); margin-top: var(--space-3); }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.4; transition: background-color .2s, color .2s, border-color .2s, transform .2s; border: 2px solid transparent; text-align: center; }
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn:hover { transform: translateY(-1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* コーポレート側ボタン */
.site--corporate .btn--primary { background: var(--c-navy); color: #fff; }
.site--corporate .btn--primary:hover { background: #0B3B54; }
.site--corporate .btn--download { background: #fff; color: var(--c-navy); border-color: var(--c-navy); }
.site--corporate .btn--download:hover { border-color: var(--c-emerald); color: var(--c-emerald); }
.site--corporate .btn--outline { background: transparent; color: var(--c-navy); border-color: var(--c-line); }
.site--corporate .btn--outline:hover { border-color: var(--c-emerald); color: var(--c-emerald); }

/* サービス側ボタン */
.site--service .btn--primary { background: var(--s-blue); color: #fff; }
.site--service .btn--primary:hover { background: #1B38C0; }
.site--service .btn--download { background: var(--s-orange); color: #fff; }
.site--service .btn--download:hover { background: #D9482A; }
.site--service .btn--outline { background: #fff; color: var(--s-blue); border-color: var(--s-blue); }
.site--service .btn--outline:hover { background: #EDF1FE; }

/* ---------- ヘッダー ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); }
.site-header__inner { max-width: 1280px; margin-inline: auto; padding: 10px clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: var(--space-3); }
.site-header__logo { width: 92px; height: auto; mix-blend-mode: multiply; }
.global-nav { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.global-nav__list { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); font-size: 14px; font-weight: 500; }
.global-nav__list > li > a, .global-nav__toggle { padding: 10px 2px; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; }
.global-nav__list > li > a:hover, .global-nav__toggle:hover { border-bottom-color: var(--c-emerald); }
.caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.global-nav__cta { display: flex; gap: 10px; }

/* メガメニュー */
.has-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: 0 24px 40px -30px rgba(16,42,67,.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__inner { max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 280px 1fr; gap: var(--space-4); padding: var(--space-4) clamp(20px, 4vw, 40px); }
.mega__lead { font-size: 14px; color: var(--c-muted); }
.mega__all { display: inline-block; margin-top: var(--space-2); font-size: 13px; font-weight: 700; color: var(--c-emerald); border-bottom: 1px solid currentColor; }
.mega__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
.mega__list a { display: block; padding: 12px 14px; border-radius: 8px; }
.mega__list a:hover { background: var(--c-bg); }
.mega__list strong { display: block; font-size: 15px; color: var(--c-navy); }
.mega__list span { font-size: 12.5px; color: var(--c-muted); }

/* バーガー */
.nav-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--c-navy); transition: transform .25s, opacity .25s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- パンくず ---------- */
.breadcrumb { font-size: 12.5px; color: var(--c-muted); padding-block: 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--c-line); }
.breadcrumb a:hover { color: var(--c-emerald); }

/* ---------- コーポレートヒーロー ---------- */
.hero { padding-block: clamp(56px, 9vw, 120px) var(--space-5); position: relative; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-5); align-items: center; }
.hero__en { font-family: var(--font-en); font-weight: 600; letter-spacing: .18em; font-size: 13px; color: var(--c-emerald); margin-bottom: var(--space-2); text-transform: uppercase; }
.hero__title { font-family: var(--font-jp-display); font-weight: 900; font-size: clamp(34px, 5vw, 58px); line-height: 1.35; color: var(--c-navy); letter-spacing: .015em; }
.hero__lead { margin-top: var(--space-3); color: var(--c-muted); max-width: 34em; }

/* シグネチャ：業務カードが線で接続されるワークフロー図 */
.workflow { position: relative; }
.workflow svg { width: 100%; height: auto; }
.wf-card { fill: #fff; stroke: var(--c-line); stroke-width: 1.2; }
.wf-card--navy { fill: var(--c-navy); stroke: none; }
.wf-line { fill: none; stroke: var(--c-emerald); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .85; }
.wf-dot { fill: var(--c-emerald); }
.wf-text { font-family: var(--font-jp); font-size: 12px; fill: var(--c-navy); font-weight: 600; }
.wf-text--light { fill: #fff; }
.wf-sub { font-size: 9px; fill: var(--c-muted); font-weight: 400; }
.wf-bar { fill: var(--c-line); }
@keyframes wf-flow { to { stroke-dashoffset: -36; } }
.wf-line { animation: wf-flow 6s linear infinite; }

/* ---------- カード ---------- */
.card-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, 1fr); margin-top: var(--space-4); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-4) var(--space-3); transition: border-color .2s, transform .2s; }
.card h3 { font-size: 18px; color: var(--c-navy); margin-bottom: var(--space-1); line-height: 1.6; }
.card p { font-size: 14.5px; color: var(--c-muted); }
a.card:hover, .card--link:hover { border-color: var(--c-emerald); transform: translateY(-2px); }
.card__more { display: inline-block; margin-top: var(--space-2); font-size: 13px; font-weight: 700; color: var(--c-emerald); }

.site--service .card { border-color: #E3E8F4; }
.site--service .card h3 { color: var(--s-navy); }
.site--service a.card:hover { border-color: var(--s-blue); }

/* チェックリスト */
.checks li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.checks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 9px; border-left: 2.5px solid var(--s-emerald); border-bottom: 2.5px solid var(--s-emerald); transform: rotate(-45deg); }

/* バッジ */
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); }
.badges li { background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--c-navy); }
.site--service .badges li { border-color: #DCE3F5; color: var(--s-navy); }

/* ---------- フロー ---------- */
.flow { margin-top: var(--space-4); border-left: 1px solid var(--c-line); }
.flow__step { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-3); padding: var(--space-3) 0 var(--space-3) var(--space-3); position: relative; }
.flow__num { font-family: var(--font-en); font-weight: 800; font-size: 28px; color: var(--c-emerald); line-height: 1; }
.flow__body h3 { font-size: 18px; color: var(--c-navy); margin-bottom: 6px; }
.flow__body p { font-size: 14.5px; color: var(--c-muted); }
.flow__step::before { content: ""; position: absolute; left: -5px; top: calc(var(--space-3) + 10px); width: 9px; height: 9px; border-radius: 50%; background: var(--c-emerald); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin-top: var(--space-4); }
.faq-item { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; margin-bottom: 12px; }
.faq-item summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-weight: 700; cursor: pointer; color: var(--c-navy); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; font-family: var(--font-en); font-weight: 800; color: var(--c-emerald); flex: none; }
.faq-item__icon { margin-left: auto; width: 12px; height: 12px; border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted); transform: rotate(45deg); transition: transform .2s; flex: none; }
.faq-item[open] .faq-item__icon { transform: rotate(-135deg); }
.faq-item__a { padding: 0 20px 18px 48px; font-size: 14.5px; color: var(--c-muted); }
.site--service .faq-item summary { color: var(--s-navy); }
.site--service .faq-item summary::before { color: var(--s-blue); }

/* ---------- 最終CTA ---------- */
.cta-final { padding-block: var(--space-6); background: var(--c-navy); color: #fff; }
.cta-final .eyebrow { color: var(--c-emerald); }
.cta-final__title { font-family: var(--font-jp-display); font-size: clamp(24px, 3vw, 34px); line-height: 1.6; max-width: 24em; }
.cta-final__lead { margin-top: var(--space-2); color: #C4D2DE; max-width: 40em; }
.site--corporate .cta-final .btn--primary { background: var(--c-emerald); }
.site--corporate .cta-final .btn--primary:hover { background: #009980; }
.site--corporate .cta-final .btn--download { background: transparent; color: #fff; border-color: #48607A; }
.site--corporate .cta-final .btn--download:hover { border-color: var(--c-emerald); color: var(--c-emerald); }
.site--service .cta-final { background: var(--s-navy); }
.site--service .cta-final .eyebrow { color: var(--s-orange); }

/* ---------- テーブル ---------- */
.table-wrap { overflow-x: auto; margin-top: var(--space-4); -webkit-overflow-scrolling: touch; }
.spec-table th, .spec-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--c-line); font-size: 15px; vertical-align: top; }
.spec-table th { width: 180px; color: var(--c-navy); background: var(--c-bg); font-weight: 700; white-space: nowrap; }

/* ---------- サービスページ ---------- */
.site--service { background: #fff; color: var(--s-ink); }
.site--service .section--soft { background: var(--s-soft); border-color: #E3E8F4; }
.site--service .eyebrow { color: var(--s-blue); }
.site--service .section__title { color: var(--s-navy); }

.s-hero { background: linear-gradient(180deg, #F4F6FA 0%, #FFFFFF 100%); padding-block: clamp(40px, 7vw, 88px) var(--space-4); border-bottom: 1px solid #E3E8F4; }
.s-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: center; }
.s-hero__logo img { width: 190px; }
.s-hero__copy { margin-top: var(--space-3); font-weight: 700; color: var(--s-blue); font-size: 15px; }
.s-hero__title { font-family: var(--font-jp-display); font-weight: 900; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.4; color: var(--s-navy); margin-top: 6px; }
.s-hero__desc { margin-top: var(--space-2); color: #4A5265; max-width: 36em; }
.diagram { max-width: 420px; margin-inline: auto; }
.dg-card { fill: #fff; stroke: #D7DEF2; stroke-width: 1.4; }
.dg-card--blue { fill: var(--s-blue); stroke: none; }
.dg-label { font-family: var(--font-jp); font-size: 17px; font-weight: 700; fill: var(--s-navy); }
.dg-label--light { fill: #fff; }
.dg-line { fill: none; stroke: var(--s-emerald); stroke-width: 1.6; stroke-dasharray: 4 5; }
.dg-dot { fill: var(--s-emerald); }

/* 業界タブ風リスト */
.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.industry { background: #fff; border: 1px solid #E3E8F4; border-radius: var(--radius); padding: var(--space-3); }
.industry h3 { color: var(--s-navy); font-size: 17px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--s-blue); display: inline-block; }
.industry ul { display: flex; flex-wrap: wrap; gap: 8px; }
.industry ul li { background: var(--s-soft); border-radius: 6px; padding: 6px 12px; font-size: 13px; color: #3B4358; }

/* 料金プレースホルダー */
.price-box { border: 2px dashed #C9D2E8; border-radius: var(--radius); padding: var(--space-4); margin-top: var(--space-4); background: #FBFCFE; }
.price-box h3 { color: var(--s-navy); margin-bottom: 8px; }

/* ---------- フォーム ---------- */
.form { max-width: 680px; margin-top: var(--space-4); }
.form__row { margin-bottom: var(--space-3); }
.form__row label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--c-navy); }
.req { color: var(--s-orange); font-size: 12px; margin-left: 6px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { width: 100%; padding: 13px 14px; border: 1px solid #C9D2E8; border-radius: 8px; font: inherit; background: #fff; }
.form textarea { min-height: 160px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid rgba(36,72,232,.25); border-color: var(--s-blue); }
.form__agree { font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.form__agree a { color: var(--s-blue); text-decoration: underline; }
.form .btn { min-width: 260px; }

/* ---------- コラム ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.post-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.post-card:hover { border-color: var(--c-emerald); transform: translateY(-2px); }
.post-card__thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--c-navy), #23415C); display: grid; place-items: center; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__thumb .ph { font-family: var(--font-en); color: #ffffff66; font-weight: 800; letter-spacing: .2em; font-size: 12px; }
.post-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__cat { font-size: 11.5px; font-weight: 700; color: var(--c-emerald); }
.post-card__title { font-size: 15.5px; line-height: 1.7; color: var(--c-navy); font-weight: 700; }
.post-card__date { margin-top: auto; font-size: 12px; color: var(--c-muted); }

.post-single { max-width: 760px; }
.post-single__meta { display: flex; gap: 16px; font-size: 13px; color: var(--c-muted); margin: var(--space-2) 0 var(--space-4); flex-wrap: wrap; }
.post-single__cat a { color: var(--c-emerald); font-weight: 700; }
.post-content h2 { font-family: var(--font-jp-display); font-size: 24px; color: var(--c-navy); margin: var(--space-5) 0 var(--space-2); padding-left: 14px; border-left: 4px solid var(--c-emerald); line-height: 1.6; }
.post-content h3 { font-size: 19px; color: var(--c-navy); margin: var(--space-4) 0 var(--space-2); }
.post-content p { margin-bottom: var(--space-2); }
.post-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: var(--space-2); }
.post-content ol { list-style: decimal; padding-left: 1.4em; margin-bottom: var(--space-2); }
.post-cta { margin-top: var(--space-5); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-4); }
.post-cta__title { font-weight: 700; font-size: 18px; color: var(--c-navy); margin-bottom: 8px; }
.author-box { display: flex; gap: 16px; margin-top: var(--space-5); padding: var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; font-size: 14px; color: var(--c-muted); align-items: center; }
.author-box strong { color: var(--c-navy); display: block; }

/* ---------- フッター ---------- */
.site-footer { background: #0C1E30; color: #B9C7D4; margin-top: 0; }
.site--service .site-footer { background: var(--s-navy); }
.site-footer__inner { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-5); padding-block: var(--space-6) var(--space-4); }
.site-footer__logo { width: 96px; background: #fff; border-radius: 10px; padding: 8px; }
.site-footer__tag { font-family: var(--font-en); letter-spacing: .12em; font-size: 12px; margin-top: var(--space-2); color: #7E93A6; }
.site-footer__addr { font-size: 13px; margin-top: 8px; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.site-footer__head { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #7E93A6; margin-bottom: 12px; }
.site-footer__nav li { margin-bottom: 8px; font-size: 14px; }
.site-footer__nav a:hover { color: var(--c-emerald); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding-block: var(--space-3); border-top: 1px solid #23415C; flex-wrap: wrap; }
.site-footer__legal { display: flex; gap: var(--space-3); font-size: 12.5px; flex-wrap: wrap; }
.site-footer__legal a:hover { color: var(--c-emerald); }
.site-footer__copy { font-family: var(--font-en); font-size: 12px; color: #7E93A6; }

/* ---------- モバイル固定CTA ---------- */
.mobile-cta { display: none; }

/* ---------- スクロールフェード ---------- */
.fade-in { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }

/* ---------- 404 ---------- */
.page-404 { text-align: center; padding-block: var(--space-6); }
.page-404 h1 { font-family: var(--font-en); font-size: 72px; color: var(--c-navy); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1024px) {
	.card-grid, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.mega__inner { grid-template-columns: 1fr; }
	.global-nav__cta { display: none; }
}

@media (max-width: 860px) {
	.hero__inner, .s-hero__inner { grid-template-columns: 1fr; gap: var(--space-4); }
	.site-footer__inner { grid-template-columns: 1fr; gap: var(--space-4); }

	.nav-burger { display: flex; }
	.global-nav { position: fixed; inset: 0; top: 64px; background: #fff; flex-direction: column; align-items: stretch; padding: var(--space-3); overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; z-index: 90; }
	.global-nav.is-open { transform: none; }
	.global-nav__list { flex-direction: column; align-items: stretch; gap: 0; font-size: 16px; }
	.global-nav__list > li { border-bottom: 1px solid var(--c-line); }
	.global-nav__list > li > a, .global-nav__toggle { width: 100%; padding: 16px 4px; justify-content: space-between; display: flex; }
	.mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; }
	.mega.is-open { display: block; }
	.mega__inner { padding: 0 0 var(--space-2); }
	.mega__list { grid-template-columns: 1fr; }
	.mega__head { display: none; }
}

@media (max-width: 640px) {
	body { font-size: 15px; }
	.card-grid, .card-grid--2, .card-grid--4, .industry-grid, .post-grid { grid-template-columns: 1fr; }
	.flow__step { grid-template-columns: 56px 1fr; gap: var(--space-2); }
	.btn { width: 100%; }
	.btn-row { flex-direction: column; }
	.mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--c-line); z-index: 80; }
	.mobile-cta .btn { width: 100%; padding: 12px 8px; font-size: 13px; border-radius: 10px; }
	.site--corporate .mobile-cta .btn--download { border-color: var(--c-navy); }
	body { padding-bottom: 76px; }
	.spec-table th { width: 120px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.fade-in { opacity: 1; transform: none; }
	.wf-line { animation: none; }
}

/* =====================================================
   Corporate 3.0 — フォトグラフィック＆明朝
   全画面写真のヒーロー、透過ヘッダー、静かな余白。
   ===================================================== */

.site--corporate { --font-jp-display: "Shippori Mincho", "Zen Kaku Gothic New", serif; }
.site--corporate .eyebrow { font-family: "Cormorant Garamond", var(--font-en); font-size: 15px; font-weight: 600; letter-spacing: .34em; }
.site--corporate .section__title { font-weight: 600; letter-spacing: .06em; line-height: 1.7; font-size: clamp(25px, 3.2vw, 36px); }
.site--corporate .btn { border-radius: 2px; letter-spacing: .12em; font-weight: 500; }

/* ---------- 透過ヘッダー（トップページ） ---------- */
.site--corporate.home .site-header { position: fixed; left: 0; right: 0; background: transparent; border-bottom: 0; backdrop-filter: none; transition: background .3s, box-shadow .3s; }
.site--corporate.home .site-header .site-header__logo { filter: brightness(0) invert(1); mix-blend-mode: normal; transition: filter .3s; }
.site--corporate.home .site-header .global-nav__list > li > a,
.site--corporate.home .site-header .global-nav__toggle { color: #fff; }
.site--corporate.home .site-header .nav-burger span { background: #fff; }
.site--corporate.home .site-header .global-nav__cta .btn--download { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.site--corporate.home .site-header .global-nav__cta .btn--primary { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); backdrop-filter: blur(4px); }
/* スクロール後・メニュー展開時は白ヘッダーに戻す */
.site--corporate.home .site-header.is-scrolled,
.site--corporate.home .site-header.is-nav-open { background: rgba(255,255,255,.95); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--c-line); }
.site--corporate.home .site-header.is-scrolled .site-header__logo,
.site--corporate.home .site-header.is-nav-open .site-header__logo { filter: none; mix-blend-mode: multiply; }
.site--corporate.home .site-header.is-scrolled .global-nav__list > li > a,
.site--corporate.home .site-header.is-scrolled .global-nav__toggle,
.site--corporate.home .site-header.is-nav-open .global-nav__list > li > a,
.site--corporate.home .site-header.is-nav-open .global-nav__toggle { color: var(--c-ink); }
.site--corporate.home .site-header.is-scrolled .nav-burger span,
.site--corporate.home .site-header.is-nav-open .nav-burger span { background: var(--c-navy); }
.site--corporate.home .site-header.is-scrolled .global-nav__cta .btn--download { color: var(--c-navy); border-color: var(--c-navy); }
.site--corporate.home .site-header.is-scrolled .global-nav__cta .btn--primary { background: var(--c-navy); border-color: transparent; }
@media (max-width: 860px) {
	.site--corporate.home .global-nav a, .site--corporate.home .global-nav .global-nav__toggle { color: var(--c-ink) !important; }
}

/* ---------- ヒーロー：全画面フォト＋明朝 ---------- */
.site--corporate.home .hero {
	min-height: 100svh;
	display: flex; align-items: flex-end;
	padding: 0; padding-bottom: clamp(64px, 10vh, 120px);
	background: url(../img/hero.jpg) center / cover no-repeat;
	position: relative; isolation: isolate; color: #fff;
}
.site--corporate.home .hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(14,24,34,.28) 0%, rgba(14,24,34,.08) 40%, rgba(14,24,34,.44) 100%);
}
.site--corporate.home .hero__inner { grid-template-columns: 1fr; width: 100%; }
.site--corporate.home .hero__en { font-family: "Cormorant Garamond", serif; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .4em; }
.site--corporate.home .hero__title { color: #fff; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(40px, 6.4vw, 78px); letter-spacing: .1em; line-height: 1.55; text-shadow: 0 2px 24px rgba(0,0,0,.18); }
.site--corporate.home .hero__lead { color: rgba(255,255,255,.94); font-family: "Shippori Mincho", serif; letter-spacing: .26em; line-height: 2.5; max-width: none; font-size: 15.5px; text-shadow: 0 1px 12px rgba(0,0,0,.22); }
.site--corporate.home .hero .btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); padding: 15px 34px; }
.site--corporate.home .hero .btn:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: none; }
.site--corporate.home .hero .workflow { display: none; }
.scroll-cue { position: absolute; right: clamp(18px, 3vw, 40px); bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; font-family: "Cormorant Garamond", serif; letter-spacing: .3em; font-size: 12px; writing-mode: vertical-rl; }
.scroll-cue::after { content: ""; width: 1px; height: 72px; background: linear-gradient(#fff, rgba(255,255,255,0)); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 下層ページのヒーロー：静かな余白＋明朝 */
.site--corporate:not(.home) .hero { padding-top: clamp(64px, 9vw, 110px); }
.site--corporate .hero__title { font-weight: 600; letter-spacing: .08em; }
.site--corporate:not(.home) .hero__en { font-family: "Cormorant Garamond", serif; letter-spacing: .34em; font-size: 15px; }

/* ---------- セクション：罫線ベースの静かな構成 ---------- */
.site--corporate .section { border-top: 1px solid var(--c-line); }
.site--corporate .section--soft { background: #fff; }
.site--corporate .section > .container > .eyebrow { display: flex; align-items: center; gap: 18px; }
.site--corporate .section > .container > .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* カード：罫線＋伸びるエメラルドライン */
.site--corporate .card { background: transparent; border: 0; border-top: 1px solid #CBD6DD; border-radius: 0; padding: 26px 20px 10px 0; position: relative; }
.site--corporate .card::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--c-emerald); transition: width .4s ease; }
.site--corporate .card:hover::before { width: 100%; }
.site--corporate a.card:hover, .site--corporate .card--link:hover { transform: none; border-color: #CBD6DD; }
.site--corporate .card h3 { font-family: "Shippori Mincho", serif; font-weight: 600; letter-spacing: .04em; }
.site--corporate .card__more { color: var(--c-navy); }
.site--corporate a.card:hover .card__more { color: var(--c-emerald); }

/* バッジ・FAQ・フロー・表 */
.site--corporate .badges li { background: transparent; border: 1px solid #CBD6DD; border-radius: 3px; font-weight: 500; }
.site--corporate .badges li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--c-emerald); margin-right: 9px; vertical-align: 2px; }
.site--corporate .faq-item { background: transparent; border: 0; border-bottom: 1px solid #CBD6DD; border-radius: 0; margin-bottom: 0; }
.site--corporate .faq-item summary { padding-inline: 4px; font-family: "Shippori Mincho", serif; }
.site--corporate .faq-item__a { padding-left: 32px; }
.site--corporate .flow { border-left: 1px solid #CBD6DD; }
.site--corporate .flow__num { font-family: "Cormorant Garamond", serif; font-size: 40px; color: var(--c-navy); font-weight: 600; }
.site--corporate .flow__body h3 { font-family: "Shippori Mincho", serif; }
.site--corporate .spec-table th { background: transparent; font-family: "Shippori Mincho", serif; }

/* 最終CTA：深いネイビー＋明朝 */
.site--corporate .cta-final { background: linear-gradient(180deg, #102A43 0%, #0B1F33 100%); }
.site--corporate .cta-final__title { font-family: "Shippori Mincho", serif; font-weight: 500; letter-spacing: .08em; line-height: 1.9; }
.site--corporate .cta-final .eyebrow { font-family: "Cormorant Garamond", serif; letter-spacing: .34em; }
.site--corporate .cta-final .btn--primary { background: transparent; border: 1px solid rgba(255,255,255,.7); color: #fff; }
.site--corporate .cta-final .btn--primary:hover { background: rgba(255,255,255,.12); }
.site--corporate .cta-final .btn--download { background: transparent; border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.85); }
.site--corporate .cta-final .btn--download:hover { border-color: var(--c-emerald); color: var(--c-emerald); }

.site--corporate .post-card { border-radius: 4px; }
.site--corporate .post-card__thumb { background: linear-gradient(160deg, #C9D2D9, #93A3B1); }
.site--corporate .post-card__thumb .ph { color: #ffffffAA; font-family: "Cormorant Garamond", serif; letter-spacing: .3em; font-size: 13px; }

@media (max-width: 640px) {
	.site--corporate.home .hero__lead { letter-spacing: .14em; line-height: 2.2; }
	.site--corporate .card { padding-right: 0; }
}

/* =====================================================
   Service 2.0 — ライトブルーLPスタイル
   水色グラデーション、ハーフトーンドット、丸型CTA、
   黄色マーカー強調、大きな角丸カード。
   ===================================================== */

.site--service { --s-blue: #2E7FF0; --s-sky: #57B7EE; background: #FAFCFF; }

/* ボタン：グラデーションピル／黒ピル */
.site--service .btn { border-radius: 999px; padding: 16px 30px; }
.site--service .btn--primary { background: linear-gradient(92deg, var(--s-sky) 0%, var(--s-blue) 100%); box-shadow: 0 8px 22px -8px rgba(46,127,240,.55); }
.site--service .btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.site--service .btn--primary::after { content: "→"; }
.site--service .btn--download { background: #17181C; color: #fff; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); }
.site--service .btn--download:hover { background: #000; }
.site--service .btn--download::after { content: "↓"; }
.site--service .btn--outline { border-color: var(--s-blue); color: var(--s-blue); }

/* ヒーロー：水色グラデ＋ハーフトーンドット */
.site--service .s-hero { background: linear-gradient(180deg, #E7F3FC 0%, #FBFDFF 78%, #FFFFFF 100%); border-bottom: 0; position: relative; overflow: hidden; }
.site--service .s-hero::before, .site--service .s-hero::after {
	content: ""; position: absolute; width: 300px; height: 300px; pointer-events: none;
	background-image: radial-gradient(circle, rgba(46,127,240,.30) 24%, transparent 26%);
	background-size: 15px 15px;
	-webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
	mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
}
.site--service .s-hero::before { top: -70px; right: -70px; }
.site--service .s-hero::after { bottom: -90px; left: -80px; }
.site--service .s-hero__copy { display: inline; font-size: 17px; color: #20242C; line-height: 2; background: linear-gradient(transparent 58%, #FFE45E 58%); padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.site--service .s-hero__title { color: #1E2A47; margin-top: 14px; }
.site--service .s-hero__title .accent { color: var(--s-blue); }

/* ヒーロー内オファーカード */
.offer-card { background: #fff; border-radius: 24px; box-shadow: 0 18px 44px -22px rgba(30,60,120,.35); padding: clamp(24px, 4vw, 36px); margin-top: var(--space-3); text-align: center; }
.offer-card__lead { font-weight: 700; color: var(--s-blue); font-size: 17px; line-height: 1.8; }
.offer-card__lead strong { color: #1E2A47; font-size: 19px; }
.offer-card__arrow { color: var(--s-sky); font-size: 20px; line-height: 1; margin: 6px 0 2px; }
.offer-card .btn-row { flex-direction: column; align-items: stretch; margin-top: 12px; gap: 12px; }
.offer-card .btn { width: 100%; }

/* カード：大きな角丸＋やわらかい影 */
.site--service .card { border: 0; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px -20px rgba(30,60,120,.35); }
.site--service a.card:hover { box-shadow: 0 16px 34px -18px rgba(46,127,240,.45); transform: translateY(-3px); border: 0; }
.site--service .section--soft { background: #EFF6FD; border: 0; }
.site--service .eyebrow { color: var(--s-blue); }
.site--service .badges li { border: 0; background: #fff; box-shadow: 0 6px 16px -10px rgba(30,60,120,.35); border-radius: 999px; }
.site--service .faq-item { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px -16px rgba(30,60,120,.35); margin-bottom: 14px; }
.site--service .price-box { border-radius: 20px; border-color: #BFD8F5; background: #F7FBFF; }
.site--service .industry { border: 0; border-radius: 20px; box-shadow: 0 10px 26px -18px rgba(30,60,120,.3); }
.site--service .industry h3 { border-bottom-color: var(--s-blue); }
.site--service .industry ul li { background: #ECF4FD; color: #33507E; border-radius: 999px; }
.site--service .spec-table th { background: #EFF6FD; border-radius: 6px 0 0 6px; }
.site--service .flow__num { color: var(--s-blue); }
.site--service .flow__step::before { background: var(--s-blue); }
.site--service .dg-card--blue { fill: var(--s-blue); }
.site--service .dg-line, .site--service .dg-dot { stroke: var(--s-sky); }
.site--service .dg-dot { fill: var(--s-sky); }

/* 最終CTA：ブルーグラデーション */
.site--service .cta-final { background: linear-gradient(120deg, #1E4FBF 0%, #2E7FF0 55%, #57B7EE 120%); }
.site--service .cta-final .eyebrow { color: #FFE45E; }
.site--service .cta-final__lead { color: #E3EEFF; }
.site--service .cta-final .btn--primary { background: #fff; color: var(--s-blue); box-shadow: none; }
.site--service .cta-final .btn--primary:hover { background: #EAF3FF; }

/* =====================================================
   Corporate 3.1 — テイストの全体展開
   ファーストビューの写真×明朝×余白のトーンを、
   下層ヒーロー・セクション・ボタン・CTAまで統一する。
   ===================================================== */

/* 余白を大きく、リード文は明朝で静かに */
.site--corporate .section { padding-block: clamp(96px, 12vw, 152px); }
.site--corporate .section__lead { font-family: "Shippori Mincho", serif; letter-spacing: .06em; line-height: 2.3; color: #42525F; }
.site--corporate .note { letter-spacing: .04em; }

/* ボタン：全体をゴースト（細枠）に統一 */
.site--corporate .btn--primary,
.site--corporate .btn--download,
.site--corporate .btn--outline { background: transparent; color: var(--c-navy); border: 1px solid var(--c-navy); }
.site--corporate .btn--primary:hover { background: var(--c-navy); color: #fff; }
.site--corporate .btn--download:hover,
.site--corporate .btn--outline:hover { border-color: var(--c-emerald); color: var(--c-emerald); background: transparent; }

/* チェックは細いエメラルドのダッシュに */
.site--corporate .checks li { padding-left: 30px; }
.site--corporate .checks li::before { width: 16px; height: 1px; border: 0; background: var(--c-emerald); transform: none; top: 1.05em; }

/* ---------- 下層ページのヒーロー：写真バンド ---------- */
.site--corporate:not(.home) .hero {
	background: url(../img/hero.jpg) center / cover no-repeat;
	position: relative; isolation: isolate; color: #fff;
	padding-block: clamp(72px, 10vw, 128px) !important;
}
.site--corporate:not(.home) .hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(12,24,36,.42) 0%, rgba(12,24,36,.58) 100%);
}
.site--corporate:not(.home) .hero__en { color: #fff; }
.site--corporate:not(.home) .hero__title { color: #fff; font-family: "Shippori Mincho", serif; font-weight: 500; letter-spacing: .1em; text-shadow: 0 2px 20px rgba(0,0,0,.2); }
.site--corporate:not(.home) .hero__lead { color: rgba(255,255,255,.92); font-family: "Shippori Mincho", serif; letter-spacing: .08em; line-height: 2.3; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.site--corporate:not(.home) .hero__en::before { content: ""; display: inline-block; width: 34px; height: 1px; background: var(--c-emerald); margin-right: 12px; vertical-align: middle; }

/* ---------- 写真セクション（.section--photo） ---------- */
.site--corporate .section--photo {
	background: url(../img/band.jpg) center / cover no-repeat;
	position: relative; isolation: isolate; color: #fff; border-top: 0;
}
.site--corporate .section--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(9,20,31,.52); }
.site--corporate .section--photo .section__title { color: #fff; }
.site--corporate .section--photo .section__lead { color: rgba(255,255,255,.9); }
.site--corporate .section--photo > .container > .eyebrow::after { background: rgba(255,255,255,.28); }
.site--corporate .section--photo .btn--primary,
.site--corporate .section--photo .btn--outline,
.site--corporate .section--photo .btn--download { color: #fff; border-color: rgba(255,255,255,.7); }
.site--corporate .section--photo .btn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ---------- 最終CTA：写真×ダークオーバーレイ ---------- */
.site--corporate .cta-final {
	background: url(../img/band.jpg) center / cover no-repeat;
	position: relative; isolation: isolate;
	padding-block: clamp(110px, 14vw, 170px);
}
.site--corporate .cta-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(7,16,25,.66); }

/* ---------- コラムカード：モノトーン写真サムネイル ---------- */
.site--corporate .post-card { background: transparent; border: 0; border-radius: 0; }
.site--corporate .post-card:hover { transform: none; }
.site--corporate .post-card__thumb { background: url(../img/band.jpg) center / cover no-repeat; border-radius: 2px; position: relative; overflow: hidden; }
.site--corporate .post-card__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(10,22,34,.3); transition: background .3s; }
.site--corporate .post-card:hover .post-card__thumb::after { background: rgba(10,22,34,.12); }
.site--corporate .post-card__thumb .ph { position: relative; z-index: 1; }
.site--corporate .post-card__body { padding: 18px 0 0; }
.site--corporate .post-card__title { font-family: "Shippori Mincho", serif; font-weight: 600; letter-spacing: .03em; }
.site--corporate .post-card__cat { font-family: "Cormorant Garamond", serif; letter-spacing: .2em; font-size: 12.5px; }

/* ---------- モバイル固定CTAは視認性優先で塗りに ---------- */
.site--corporate .mobile-cta .btn--primary { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.site--corporate .mobile-cta .btn--download { background: transparent; color: var(--c-navy); border: 1px solid var(--c-navy); }

/* フッターの手前に境界の縁を付けず、写真CTA→ダークフッターを連続させる */
.site--corporate .site-footer { background: #0B1F33; }

/* =====================================================
   Fix: 透過ヘッダーの視認性・モバイルヘッダー調整
   ===================================================== */

/* 明るい写真でも白ロゴ・白ナビが読めるよう、上部を暗めに */
.site--corporate.home .hero::before {
	background: linear-gradient(180deg, rgba(14,24,34,.55) 0%, rgba(14,24,34,.12) 34%, rgba(14,24,34,.46) 100%);
}

/* ハンバーガー：背景は透過のまま、白い線に影を落として視認性を確保 */
.site--corporate.home .site-header .nav-burger { background: transparent; }
.site--corporate.home .site-header .nav-burger span { box-shadow: 0 1px 6px rgba(0,0,0,.5); }
.site--corporate.home .site-header.is-scrolled .nav-burger span,
.site--corporate.home .site-header.is-nav-open .nav-burger span { box-shadow: none; }

/* モバイル：ロゴ縮小・ナビパネル位置をヘッダー実寸に合わせる */
@media (max-width: 860px) {
	.site-header__inner { padding: 8px 16px; }
	.site-header__logo { width: 64px; }
	.global-nav { top: 72px; }
}

/* フォーム導線ボックス（form.run） */
.form-cta { max-width: 680px; margin-top: var(--space-4); background: #fff; border-radius: 16px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 14px 34px -22px rgba(30,60,120,.4); text-align: center; }
.form-cta p { margin-bottom: var(--space-3); }
.site--corporate .form-cta { border: 1px solid var(--c-line); box-shadow: none; border-radius: 4px; }

/* =====================================================
   Monitor LP 2.0 — グラデーションLPスタイル
   マゼンタ→ブルーのグラデーション、白カード＋グラデ枠、
   丸型フローティングヘッダー、下部固定ピルCTA。
   ===================================================== */

.lp-page {
	--lp-g1: #E0187B; --lp-g2: #3D56F0;
	--lp-grad: linear-gradient(92deg, var(--lp-g1) 0%, var(--lp-g2) 100%);
	--lp-ink: #16181D;
	background: #F1F3F6; color: var(--lp-ink);
	padding-top: 92px; padding-bottom: 92px;
}
.lp-grad-text { background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lp-page .section { border: 0; padding-block: clamp(64px, 9vw, 112px); }
.lp-page .section--soft { background: #fff; border: 0; }
.lp-page .eyebrow { text-align: center; color: #8A5BD6; letter-spacing: .26em; }
.lp-page .section__title { font-family: var(--font-jp); text-align: center; color: var(--lp-ink); font-weight: 800; font-size: clamp(26px, 4.2vw, 40px); letter-spacing: .02em; line-height: 1.6; }
.lp-page .section__title::after { content: ""; display: block; width: 96px; height: 5px; border-radius: 3px; margin: 20px auto 0; background: var(--lp-grad); }
.lp-page .section__lead { margin: var(--space-3) auto 0; text-align: center; max-width: 660px; color: #33373F; font-size: 16px; line-height: 2.1; }
.lp-page .note { text-align: center; max-width: 680px; margin-inline: auto; }

/* グラデ枠カード共通 */
.lp-frame { background-image: linear-gradient(#fff, #fff), var(--lp-grad); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; border-radius: 20px; background-color: #fff; }

/* ---------- 丸型フローティングヘッダー ---------- */
.lp-header { position: fixed; top: 14px; left: 12px; right: 12px; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 12px 34px -16px rgba(20,30,60,.35); }
.lp-header__inner { padding: 10px 12px 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-header__logo { width: 118px; }

/* ---------- ボタン ---------- */
.lp-page .btn { border-radius: 999px; font-weight: 800; padding: 15px 26px; gap: 10px; }
.lp-page .btn--primary { background: var(--lp-grad); color: #fff; box-shadow: 0 12px 26px -12px rgba(100,50,220,.6); }
.lp-page .btn--primary::after { content: "→"; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.24); display: inline-grid; place-items: center; font-size: 13px; }
.lp-page .btn--primary:hover { filter: brightness(1.07); }
.lp-page .btn--ghost, .lp-page .btn--download { background: #fff; color: var(--lp-ink); box-shadow: 0 10px 24px -14px rgba(20,30,60,.5); }
.lp-page .btn--ghost::after, .lp-page .btn--download::after { content: "→"; font-size: 14px; }
.lp-page .btn--ghost:hover, .lp-page .btn--download:hover { background: #F5F6FA; }
.lp-header .btn { padding: 11px 20px; font-size: 13px; }

/* ---------- ヒーロー ---------- */
.lp-hero { padding-top: clamp(8px, 2vw, 40px); overflow: hidden; }
.lp-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.lp-hero__photo { position: relative; }
.lp-hero__photo-img { aspect-ratio: 1 / 1.02; background: url(../img/hero.jpg) center / cover no-repeat; border-radius: 47% 53% 55% 45% / 46% 49% 51% 54%; }
.lp-hero__stats { position: absolute; left: -6px; top: 34%; display: flex; flex-direction: column; gap: 10px; }
.lp-stat-badge { background-image: linear-gradient(#fff, #fff), var(--lp-grad); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; background-color: #fff; border-radius: 14px; padding: 8px 16px; box-shadow: 0 10px 24px -12px rgba(20,30,60,.4); font-size: 12px; font-weight: 700; line-height: 1.5; }
.lp-stat-badge em { display: block; font-style: normal; font-family: var(--font-en); font-size: 22px; font-weight: 800; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero__lines { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lp-hero__lines span { background: #fff; border-radius: 10px; padding: 9px 16px; font-weight: 800; font-size: clamp(19px, 3.4vw, 30px); line-height: 1.55; box-shadow: 0 8px 22px -14px rgba(20,30,60,.3); }
.lp-hero__desc { margin-top: var(--space-3); line-height: 2.15; color: #2A2E36; font-weight: 500; }
.lp-hero__btns { display: flex; gap: 12px; margin-top: var(--space-3); flex-wrap: wrap; }
.lp-hero__price-note { margin-top: 14px; font-size: 13px; color: #575D68; }
.lp-hero__price-note strong { background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-en); font-size: 22px; }

/* ---------- 番号付きお悩みカード ---------- */
.lp-num-list { display: grid; gap: 14px; max-width: 760px; margin: var(--space-4) auto 0; }
.lp-num-card { display: flex; gap: 16px; align-items: baseline; padding: 22px 24px; font-weight: 700; font-size: 16px; line-height: 1.8; }
.lp-num-card i { font-style: normal; font-family: var(--font-en); font-weight: 800; font-size: 18px; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; flex: none; }

/* ---------- 特徴・効果カード ---------- */
.lp-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: var(--space-4); }
.lp-feature { padding: clamp(22px, 3vw, 32px); }
.lp-feature em { display: block; font-style: normal; font-family: var(--font-en); font-weight: 800; font-size: clamp(30px, 4vw, 42px); background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.lp-feature em .jp { font-family: var(--font-jp); font-size: .55em; }
.lp-feature h3 { margin-top: 8px; font-size: 17.5px; color: var(--lp-ink); }
.lp-feature p { margin-top: 6px; font-size: 14px; color: #4B4F58; line-height: 1.9; }

/* ---------- 統計 ---------- */
.lp-page .stat { border-radius: 20px; box-shadow: 0 12px 30px -20px rgba(20,30,60,.35); }
.lp-page .stat em { background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-en); font-style: normal; font-weight: 800; font-size: clamp(40px, 5vw, 56px); line-height: 1; }
.lp-page .stat--alert em { background: linear-gradient(92deg, #E0187B, #FF5C39); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.stat { background: #fff; padding: var(--space-4) var(--space-3); text-align: center; border-radius: 20px; }
.stat p { font-size: 13.5px; color: #4A5265; margin-top: 10px; }

/* ---------- 料金 ---------- */
.lp-price { max-width: 600px; margin: var(--space-4) auto 0; padding: clamp(28px, 5vw, 48px); text-align: center; border-radius: 28px; }
.lp-price__tag { display: inline-block; background: var(--lp-grad); color: #fff; border-radius: 999px; padding: 8px 24px; font-weight: 800; font-size: 14px; }
.lp-price__was { margin-top: 20px; color: #6E7480; font-weight: 700; }
.lp-price__was s { text-decoration-thickness: 2px; text-decoration-color: var(--lp-g1); font-size: 20px; }
.lp-price__now { font-weight: 800; color: var(--lp-ink); margin-top: 4px; }
.lp-price__now em { font-style: normal; font-family: var(--font-en); font-size: clamp(52px, 8vw, 72px); letter-spacing: -.01em; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-price__now small { font-size: 15px; color: #575D68; font-weight: 700; }
.lp-price__off { display: inline-block; margin-top: 6px; font-weight: 800; color: var(--lp-g1); font-size: 14px; }
.lp-price .checks { text-align: left; max-width: 380px; margin: var(--space-3) auto 0; }
.lp-price .btn { width: 100%; margin-top: var(--space-3); }

/* ---------- AI顧問ミニプラン ---------- */
.lp-adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: var(--space-4); }
.lp-adv { background: #fff; border-radius: 20px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 12px 30px -20px rgba(20,30,60,.35); }
.lp-adv h3 { font-size: 17px; color: var(--lp-ink); }
.lp-adv__price { font-weight: 800; margin: 8px 0 14px; color: var(--lp-ink); }
.lp-adv__price em { font-style: normal; font-family: var(--font-en); font-size: 34px; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-adv .checks li { font-size: 14px; margin-bottom: 8px; }
.lp-page .checks li::before { border-color: var(--lp-g2); }

/* ---------- フロー・FAQ・表 ---------- */
.lp-page .flow { max-width: 760px; margin-inline: auto; border-left-color: #D5D9E2; }
.lp-page .flow__num { font-family: var(--font-en); font-weight: 800; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-page .flow__step::before { background: var(--lp-g2); }
.lp-page .faq-list { margin-inline: auto; }
.lp-page .spec-table th { background: #F1F3F6; color: var(--lp-ink); }
.lp-page .table-wrap { max-width: 760px; margin-inline: auto; margin-top: var(--space-4); }

/* ---------- 最終CTA ---------- */
.lp-page .cta-final { background: var(--lp-grad); border-radius: 32px; margin: 0 clamp(12px, 2vw, 24px); padding-block: clamp(72px, 9vw, 110px); }
.lp-page .cta-final .eyebrow { color: #FFE45E; }
.lp-page .cta-final__title { text-align: left; }
.lp-page .cta-final .btn--primary { background: #fff; color: var(--lp-g2); box-shadow: none; }
.lp-page .cta-final .btn--primary::after { background: rgba(61,86,240,.12); }
.lp-page .cta-final .btn--download { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.5); box-shadow: none; }

/* ---------- LPフッター・下部固定CTA ---------- */
.lp-footer { background: #16181D; color: #B7BCC8; padding-block: var(--space-5); margin-top: var(--space-5); }
.lp-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 13.5px; }
.lp-footer ul { display: flex; gap: 20px; flex-wrap: wrap; }
.lp-footer a:hover { color: #fff; text-decoration: underline; }
.lp-footer__copy { margin-left: auto; font-family: var(--font-en); font-size: 12px; color: #787E8A; }

.lp-sticky { position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 90; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; max-width: 720px; margin-inline: auto; }
.lp-sticky .btn { width: 100%; padding: 15px 12px; font-size: 14px; justify-content: space-between; padding-inline: 22px 14px; }

html { scroll-behavior: smooth; }

@media (max-width: 860px) {
	.lp-hero__grid { grid-template-columns: 1fr; }
	.lp-hero__photo { max-width: 440px; margin-inline: auto; width: 100%; }
	.lp-feature-grid, .lp-adv-grid { grid-template-columns: 1fr; }
	.stat-grid { grid-template-columns: 1fr; }
	.lp-page .btn { width: auto; }
	.lp-sticky .btn { width: 100%; }
	.lp-hero__btns .btn { width: 100%; }
}

/* =====================================================
   Fix: モバイルメニューが開いても表示されない問題
   ヘッダーの backdrop-filter が position:fixed の子要素
   （ドロワーメニュー）の基準を変えてしまうため無効化する。
   ===================================================== */
.site-header,
.site--corporate.home .site-header.is-scrolled,
.site--corporate.home .site-header.is-nav-open {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.site-header { background: rgba(255,255,255,.98); }
.site--corporate.home .site-header { background: transparent; }
.site--corporate.home .site-header.is-scrolled,
.site--corporate.home .site-header.is-nav-open { background: rgba(255,255,255,.98); }

/* ドロワー本体の保険：画面全体を確実に覆う */
@media (max-width: 860px) {
	.global-nav { top: 70px; height: calc(100dvh - 70px); background: #fff; }
	.global-nav.is-open { transform: none; }
}

/* =====================================================
   Fix: LPヒーロー写真差し替え＋iOSグラデ文字バグ修正
   ===================================================== */

/* iOS Safariでグラデーション文字が透明になる問題（-webkit-text-fill-color必須） */
.lp-grad-text,
.lp-stat-badge em,
.lp-feature em,
.lp-page .stat em,
.lp-page .stat--alert em,
.lp-price__now em,
.lp-adv__price em,
.lp-num-card i,
.lp-page .flow__num,
.lp-hero__price-note strong {
	-webkit-text-fill-color: transparent;
}
/* 背景クリップ非対応環境へのフォールバック色 */
@supports not (-webkit-background-clip: text) {
	.lp-grad-text, .lp-stat-badge em, .lp-feature em, .lp-page .stat em,
	.lp-price__now em, .lp-adv__price em, .lp-num-card i, .lp-page .flow__num,
	.lp-hero__price-note strong { -webkit-text-fill-color: currentColor; color: #3D56F0; background: none; }
}

/* ヒーロー写真：実写（講師がスクリーンの前で説明する写真）に差し替え */
.lp-hero__photo-img {
	background: url(../img/lp-hero.jpg) 62% center / cover no-repeat;
	aspect-ratio: 1 / 0.94;
	box-shadow: 0 24px 60px -30px rgba(20,30,60,.45);
}

/* モバイルの余白を圧縮（ヘッダー下の空白・写真まわり） */
@media (max-width: 860px) {
	.lp-page { padding-top: 84px; }
	.lp-page .lp-hero { padding-top: 8px; padding-bottom: 40px; }
	.lp-hero__grid { gap: 20px; }
	.lp-hero__photo { max-width: 520px; }
	.lp-hero__photo-img { aspect-ratio: 4 / 3.1; }
	.lp-hero__stats { left: -2px; top: auto; bottom: 14px; }
	.lp-hero__lines span { font-size: clamp(18px, 5.4vw, 24px); padding: 8px 12px; }
}

/* ---------- TikTok LP：3プラン料金グリッド ---------- */
.lp-plans3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: var(--space-4); align-items: stretch; }
.lp-plan3 { padding: clamp(22px, 3vw, 32px); text-align: center; border-radius: 24px; display: flex; flex-direction: column; }
.lp-plan3--main { transform: scale(1.03); box-shadow: 0 20px 44px -22px rgba(90,60,220,.4); }
.lp-plan3__tag { display: inline-block; background: var(--lp-grad); color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 6px 16px; margin: 0 auto 10px; }
.lp-plan3 h3 { font-size: 19px; color: var(--lp-ink); }
.lp-plan3__num { font-weight: 800; color: #575D68; margin-top: 4px; }
.lp-plan3__price { font-weight: 800; color: var(--lp-ink); margin: 6px 0 12px; }
.lp-plan3__price em { font-style: normal; font-family: var(--font-en); font-size: clamp(34px, 3.6vw, 44px); background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lp-plan3__price small { font-size: 13px; color: #575D68; font-weight: 700; }
.lp-plan3 .checks { text-align: left; margin: 0 auto; }
.lp-plan3 .checks li { font-size: 13.5px; margin-bottom: 8px; }
.lp-plan3 .btn { width: 100%; margin-top: auto; padding-top: 13px; padding-bottom: 13px; }
.lp-plan3 .checks + .btn { margin-top: var(--space-3); }
@media (max-width: 860px) {
	.lp-plans3 { grid-template-columns: 1fr; }
	.lp-plan3--main { transform: none; }
}

/* Fix: 白ピル内のグラデ文字がiOSで消える問題（行内フラグメント化を防ぐ） */
.lp-grad-text { display: inline-block; }

/* TikTok LP：専用ヒーロー写真 */
.lp-hero__photo-img--tiktok { background-image: url(../img/tiktok-hero.jpg); background-position: 32% center; }

/* Fix: 文中グラデーション文字を廃止し、確実に表示される単色（ブルー）に */
.lp-grad-text {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	color: #3D56F0 !important;
	-webkit-text-fill-color: #3D56F0 !important;
	display: inline;
}

/* =====================================================
   Fix: ヘッダーメニューがタブレット幅で2行に折れる問題
   ===================================================== */
.global-nav__list > li > a,
.global-nav__toggle,
.global-nav__cta .btn,
.site-header__brand { white-space: nowrap; }

/* タブレット幅では「資料ダウンロード」ボタンのみ非表示（お問い合わせは残す） */
@media (max-width: 1280px) {
	.global-nav__cta .btn--download { display: none; }
}
/* 中間幅ではナビを少し詰める */
@media (min-width: 861px) and (max-width: 1120px) {
	.global-nav__list { font-size: 13px; gap: 14px; }
	.site-header__inner { gap: 16px; }
	.site-header__logo { width: 76px; }
}

/* =====================================================
   Footer 2.0 — 大企業サイト風リニューアル
   ===================================================== */
.site-footer { position: relative; background: #0A1626; }
.site--service .site-footer { background: #0A1626; }

/* ページトップボタン */
.pagetop { position: absolute; right: clamp(16px, 3vw, 40px); top: -26px; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 10px 26px -10px rgba(0,0,0,.45); display: grid; place-items: center; z-index: 5; transition: transform .2s; }
.pagetop:hover { transform: translateY(-3px); }
.pagetop span { width: 12px; height: 12px; border-top: 2px solid #102A43; border-left: 2px solid #102A43; transform: rotate(45deg) translate(2px, 2px); }

/* ブランドブロック：白箱をやめ、白抜きロゴに */
.site-footer__inner { grid-template-columns: 320px 1fr; padding-block: clamp(64px, 8vw, 96px) clamp(40px, 5vw, 56px); }
.site-footer__logo { width: 120px; background: none; border-radius: 0; padding: 0; filter: brightness(0) invert(1); opacity: .95; }
.site-footer__tag { color: #8CA0B3; margin-top: 20px; }
.site-footer__addr { color: #A8B8C7; }

/* ナビ列：見出し罫線＋整ったリンク行 */
.site-footer__nav { gap: clamp(24px, 4vw, 48px); }
.site-footer__head { font-size: 12px; letter-spacing: .18em; color: #8CA0B3; border-bottom: 1px solid #22354A; padding-bottom: 12px; margin-bottom: 14px; }
.site-footer__nav li { margin-bottom: 0; }
.site-footer__nav li a { display: block; padding: 9px 0; font-size: 13.5px; color: #C9D5E2; transition: color .2s, padding-left .2s; }
.site-footer__nav li a:hover { color: #fff; padding-left: 6px; }

/* 下部バー */
.site-footer__bottom { border-top: 1px solid #1B2C3F; padding-block: 22px; }
.site-footer__legal { gap: 8px 26px; }
.site-footer__legal a { color: #8CA0B3; }
.site-footer__legal a:hover { color: #fff; }
.site-footer__copy { color: #5E7488; }

/* モバイル：1列リスト＋シェブロン（折り返し問題も解消） */
@media (max-width: 640px) {
	.site-footer__inner { gap: 28px; }
	.site-footer__logo { width: 96px; }
	.site-footer__nav { grid-template-columns: 1fr; gap: 0; }
	.site-footer__col { border-top: 1px solid #1B2C3F; padding-top: 14px; margin-bottom: 14px; }
	.site-footer__head { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
	.site-footer__nav li a { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; font-size: 14.5px; }
	.site-footer__nav li a::after { content: "\203A"; color: #4E657C; font-size: 18px; }
	.site-footer__nav li a:hover { padding-left: 2px; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
	.site-footer__legal { flex-direction: column; gap: 2px; width: 100%; }
	.site-footer__legal a { display: block; padding: 8px 0; }
	.pagetop { top: -24px; }
}

/* =====================================================
   Hotfix: フッターの横はみ出し修正
   （Footer 2.0の2カラム指定がモバイル1カラム化を上書きしていた）
   ===================================================== */
@media (max-width: 860px) {
	.site-footer__inner { grid-template-columns: 1fr !important; }
	.site-footer__nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.site-footer__nav { grid-template-columns: 1fr !important; }
}
/* 念のための横スクロール防止 */
.site-footer { overflow-x: clip; }