:root{
--ink:#061638;
--ink-2:#000;
--muted:#000;
--line:#e3e8f1;
--brand:#004BD6;
--brand-2:#0F66F0;
--orange:#F26B1F;
--orange-2:#E25A0E;
--bg:#ffffff;
--soft:#f4f7fc;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;color:var(--ink);font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 画面外に退避するドロワーメニュー（.nav-drawer translateX(100%)）による
横スクロール／モバイルviewport拡張を防止（clipはsticky/スクロールに影響しない） */
html{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
/* Shared CTA arrow: a right-pointing chevron drawn as a pseudo-element,
pinned to the right edge of the button (overridden per-button via right/size). */
.has-arrow{position:relative}
.has-arrow::after{
content:"";
position:absolute;
top:50%;right:24px;
width:11px;height:11px;
border-top:3px solid #fff;
border-right:3px solid #fff;
transform:translateY(-50%) rotate(45deg);
pointer-events:none;
}
/* ===== Header ===== */
.header{
position:sticky;top:0;z-index:50;
background:#fff;
border-bottom:1px solid rgba(6,22,56,.06);
}
.header-inner{
max-width:1672px;margin:0 auto;
height:76px;
padding:0 32px;
display:flex;align-items:center;gap:40px;
}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{height:56px;width:auto}
.logo-subtext{
font-size:12px;line-height:1.5;font-weight:500;color:#000;
letter-spacing:.02em;
}
.nav{display:flex;align-items:center;gap:36px;margin-left:24px}
.nav a{
font-size:16px;font-weight:700;color:var(--ink);
letter-spacing:.04em;
white-space:nowrap;
transition:color .15s ease;
}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
height:54px;padding:0 22px;
border-radius:10px;
font-size:16px;font-weight:700;letter-spacing:.04em;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
white-space:nowrap;
}
.btn-outline{
background:#fff;color:var(--ink);
border:1.5px solid #d6deeb;
}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-primary{
background:var(--orange);color:#fff;
box-shadow:0 6px 14px rgba(242,107,31,.28);
}
.btn-primary:hover{background:var(--orange-2);transform:translateY(-1px);box-shadow:0 10px 20px rgba(242,107,31,.32)}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-primary svg{stroke:#fff}
/* ===== Hamburger + Mobile Drawer (activated ≤1024px) ===== */
.hamburger{
display:none;
flex-direction:column;justify-content:center;gap:6px;
width:44px;height:44px;padding:0;
margin-left:auto;
position:relative;z-index:30;
background:none;border:none;cursor:pointer;
}
.hamburger span{
display:block;width:26px;height:3px;margin:0 auto;
background:var(--ink);border-radius:2px;
transition:transform .3s ease, opacity .2s ease;
transform-origin:center;
}
.hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
/* Drawer + overlay are off-canvas / disabled until the ≤1024px breakpoint */
.nav-drawer{display:none}
.nav-overlay{display:none}
/* ===== Hero ===== */
.hero{
position:relative;
overflow:hidden;
background:#fff;
}
.hero-bg{
position:absolute;inset:0;
background-image:url('../images/lp/hero-bg.webp');
background-size:cover;
background-position:center right;
background-repeat:no-repeat;
z-index:0;
}
.hero-inner{
position:relative;z-index:2;
max-width:1672px;margin:0 auto;
padding:40px 32px;
min-height:calc(100vh - 76px);
display:grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
gap:24px;
align-items:center;
}
/* Eyebrow badge */
.eyebrow{
margin-bottom:32px;
}
.eyebrow img{
height:60px;width:auto;
}
/* Main copy */
.main-copy{
margin-bottom:28px;
}
.main-copy img{
width:100%;
max-width:820px;
height:auto;
}
/* Sub copy */
.sub-copy{
font-size:18px;
line-height:1.85;
color:var(--ink);
font-weight:500;
margin-bottom:28px;
letter-spacing:.02em;
}
/* メインビジュアルのサブコピー：PC=フル文／スマホ=簡略文 を切り替え（≤640pxでSP表示） */
.sub-copy-sp{display:none}
/* Feature pills */
.feature-pills{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
max-width:560px;
margin-bottom:36px;
}
.feature-card{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:14px 12px;
background:#fff;
border:1px solid #E5EBF5;
border-radius:12px;
box-shadow:0 2px 6px rgba(34,80,200,.05);
min-width:0;
}
.feature-card-icon{width:34px;height:34px;object-fit:contain;flex-shrink:0}
.feature-card-text{display:flex;flex-direction:column;line-height:1.3}
.feature-card-sub{font-size:15px;font-weight:700;color:#000;letter-spacing:.02em;white-space:nowrap}
.feature-card-main{font-size:17px;font-weight:800;color:var(--brand);letter-spacing:.02em;white-space:nowrap}
/* Hero CTAs */
.hero-cta{
display:flex;flex-wrap:wrap;gap:14px;
margin-bottom:18px;
}
.hero-cta .btn{
height:64px;padding:0 32px;
font-size:17px;
border-radius:12px;
}
.hero-cta .btn svg{width:22px;height:22px}
.hero-cta .btn-primary{
box-shadow:0 10px 22px rgba(242,107,31,.32);
}
.reassurance{
display:inline-flex;align-items:center;gap:8px;
font-size:14px;font-weight:600;color:var(--muted);
letter-spacing:.04em;
}
.reassurance svg{width:18px;height:18px;stroke:#7b94b7}
/* Right: foreground image */
.hero-visual{
position:relative;
margin-top:-20px;
margin-right:-32px;
}
.hero-visual img{
width:100%;
height:auto;
max-width:none;
}
/* ===================================================== */
/* ===== Common section utilities (03 / 04 / 05) ====== */
/* ===================================================== */
.section{
position:relative;
padding:120px 32px 96px;
overflow:hidden;
}
.section-bg{
position:absolute;inset:0;
background-size:cover;background-position:center;background-repeat:no-repeat;
z-index:0;
}
.section-inner{
position:relative;z-index:2;
max-width:1320px;margin:0 auto;
}
.section-label{
margin-bottom:28px;
display:none;
}
.section-label img{
height:64px;width:auto;
}
.section-title{
display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
gap:0;
font-size:48px;font-weight:900;color:var(--ink);
letter-spacing:.04em;line-height:1.2;
text-align:center;
white-space:nowrap;
}
.section-title > span{white-space:nowrap}
.section-title .brush{
display:inline-block;vertical-align:middle;
}
/* flex内で読点（、）位置に強制改行を入れるための全幅スペーサー */
.title-break{flex-basis:100%;height:0;}
/* 「こんな[課題]ありませんか？」専用：通常は無効、スマホ時のみ改行（下部メディアクエリで有効化） */
.pain-break{display:none}
/* レスポンシブ改行ユーティリティ：通常は非表示、タブレット以下（≤1024px）で改行を有効化 */
.br-tablet{display:none}
/* スマホ専用改行：通常は非表示、スマホ（≤640px）でのみ改行を有効化 */
.br-sp{display:none}
/* PC/タブレット用改行：通常は表示、スマホ（≤640px）で非表示にして自然改行にする */
.br-pc{display:inline}
/* テキスト＋ブラシ画像で構成するセクション見出し（こんな[課題]ありませんか？方式） */
.brush-heading{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:6px 0;
font-size:44px;font-weight:900;color:var(--ink);
letter-spacing:.04em;line-height:1.3;text-align:center;
}
.brush-heading > span{white-space:nowrap}
.brush-heading .brush{height:96px;width:auto;display:inline-block;vertical-align:middle}
.section-subtitle{
margin-top:26px;
font-size:18px;font-weight:500;color:var(--ink-2);
text-align:center;letter-spacing:.04em;line-height:1.9;
}
/* ===== Subtext accent (key-phrase highlight) ===== */
/* サブテキスト内のキーフレーズだけを強調し、拾い読みでも要点が伝わるようにする */
/* 青テーマの中で埋もれないよう、対比色のオレンジで強調する */
.accent{color:var(--orange-2);font-weight:700}
.accent-grad{
font-weight:800;
background:linear-gradient(90deg,#FB8B3A 0%,var(--orange-2) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* 濃色背景のセクションでは明るめのオレンジを使う */
.fc-sub .accent,.fc-quote-text .accent{color:#FB8B3A}
/* ===== Section 03: Pain Points ===== */
.pain .section-bg{background-image:url('../images/lp/bg-pain.webp')}
.pain .section-title .brush{height:130px;width:auto;transform:translateY(-6px)}
.pain-cards{
margin-top:76px;
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.pain-card{
position:relative;
background:#fff;
border:1px solid #e3e8f1;
border-radius:18px;
padding:28px 24px 26px;
box-shadow:0 6px 18px rgba(6,22,56,.06);
transition:transform .2s ease, box-shadow .2s ease;
}
.pain-num{
position:absolute;top:-14px;left:22px;
display:inline-flex;align-items:center;justify-content:center;
min-width:54px;height:30px;padding:0 12px;
background:var(--brand);color:#fff;
font-family:'Inter','Noto Sans JP',sans-serif;
font-size:16px;font-weight:800;letter-spacing:.04em;
border-radius:8px;
box-shadow:0 4px 10px rgba(0,75,214,.25);
}
.pain-illust{
height:160px;
display:flex;align-items:center;justify-content:center;
margin:8px 0 14px;
}
.pain-illust img{
max-height:100%;max-width:100%;
width:auto;height:auto;
object-fit:contain;
}
.pain-card h3{
font-size:20px;font-weight:800;color:var(--ink);
letter-spacing:.04em;line-height:1.4;
margin-bottom:10px;
}
.pain-card p{
font-size:14px;font-weight:500;color:var(--muted);
line-height:1.7;letter-spacing:.04em;
}
.down-arrow{
margin:48px auto 0;
width:0;height:0;
border-left:22px solid transparent;
border-right:22px solid transparent;
border-top:26px solid var(--brand);
opacity:.85;
}
.closing-line{
margin-top:36px;
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:0;
font-size:30px;font-weight:900;color:var(--ink);
letter-spacing:.04em;line-height:1.4;
text-align:center;
}
.closing-line .brush{height:103px;width:auto;vertical-align:middle}
/* ===== Section 04: Solution ===== */
.solution{padding-top:120px}
.solution .section-bg{background-image:url('../images/lp/bg-solution.webp')}
.solution-top{
display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;
margin-bottom:64px;
}
.solution-top-left .section-label{margin-bottom:24px}
.solution-h2{
font-size:46px;font-weight:900;color:var(--ink);
letter-spacing:.04em;line-height:1.8;
margin-bottom:34px;
}
.solution-h2 .brush{
height:108px;width:auto;display:inline-block;vertical-align:middle;
transform:translateY(-6px);
}
.solution-sub{
font-size:17px;font-weight:500;color:var(--ink-2);
line-height:2.0;letter-spacing:.04em;
}
.solution-visual{
position:relative;
}
.solution-visual img{
width:100%;height:auto;
}
/* compare panel */
.compare{
display:grid;grid-template-columns:1fr 70px 1.15fr;gap:0;align-items:stretch;
}
.compare-col{
display:flex;flex-direction:column;gap:18px;
background:#fff;
border:1px solid #e3e8f1;
border-radius:18px;
padding:28px 32px 32px;
box-shadow:0 8px 22px rgba(6,22,56,.06);
}
.compare-col.future{border-color:#cfdcf3;box-shadow:0 10px 26px rgba(0,75,214,.10)}
.compare-head{
display:flex;align-items:center;justify-content:center;
height:38px;padding:0 28px;
border-radius:8px;
font-size:16px;font-weight:800;letter-spacing:.06em;
align-self:flex-start;
}
.compare-head.past{background:#5a6b87;color:#fff}
.compare-head.future{background:var(--brand);color:#fff}
.compare-row{
display:flex;align-items:flex-start;gap:18px;
padding:6px 4px;
}
.compare-icon{
flex-shrink:0;
width:62px;height:62px;
display:flex;align-items:center;justify-content:center;
}
.compare-icon img{width:100%;height:100%}
.compare-body .ct{
font-size:20px;font-weight:800;color:var(--ink);
letter-spacing:.04em;line-height:1.4;
}
.compare-body .cd{
margin-top:4px;
font-size:14px;font-weight:500;color:var(--muted);
letter-spacing:.04em;line-height:1.6;
}
.compare-arrow{
align-self:center;justify-self:center;
width:0;height:0;
border-top:22px solid transparent;
border-bottom:22px solid transparent;
border-left:32px solid var(--brand);
opacity:.9;
}
/* Section 04 closing */
.solution-closing{
margin-top:64px;
text-align:center;
}
.solution-closing .line1{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:0;
font-size:28px;font-weight:900;color:var(--ink);
letter-spacing:.04em;line-height:1.4;
}
.solution-closing .line1 .brush{
height:126px;width:auto;vertical-align:middle;
}
.solution-closing .line2{
margin-top:16px;
font-size:21px;font-weight:700;color:var(--ink-2);
letter-spacing:.04em;line-height:1.7;
}
/* ===== Section 05: Before/After ===== */
.ba .section-bg{background-image:url('../images/lp/bg-before-after.webp')}
.ba-head{
text-align:center;
}
.ba-title{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:6px 0;
font-size:44px;font-weight:900;color:var(--ink);
letter-spacing:.04em;line-height:1.3;
}
.ba-title .brush{height:125px;width:auto;vertical-align:middle;transform:translateY(-4px)}
.ba-sub{
margin-top:26px;
font-size:17px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.9;
}
.ba-table{
margin-top:48px;
display:grid;
grid-template-columns:120px 1fr 60px 1fr;
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 22px rgba(6,22,56,.06);
background:#fff;
border:1px solid #e3e8f1;
}
.ba-tag{
background:#2d3a55;color:#fff;
display:flex;align-items:center;justify-content:center;
flex-direction:column;gap:8px;
font-size:16px;font-weight:800;letter-spacing:.08em;
padding:24px 8px;
}
.ba-tag svg{width:32px;height:32px;stroke:#fff;fill:none}
.ba-header{
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:18px;font-weight:800;letter-spacing:.08em;
padding:14px 0;
}
.ba-header.before{background:#42526e}
.ba-header.after{background:var(--brand)}
.ba-cell{
padding:18px 28px;
display:flex;align-items:center;justify-content:space-between;gap:16px;
border-top:1px solid #eef1f7;
font-size:16px;font-weight:700;color:var(--ink);
letter-spacing:.04em;
}
.ba-cell .v{font-size:22px;font-weight:900;color:var(--ink);white-space:nowrap;flex-shrink:0}
.ba-cell.after-cell .v{color:var(--orange);font-size:24px;white-space:nowrap;flex-shrink:0}
.ba-cell.after-cost .v{color:var(--orange);font-size:17px;white-space:nowrap;flex-shrink:0}
.ba-cell .ba-row-head{white-space:nowrap}
.ba-mid{
display:flex;align-items:center;justify-content:center;
background:#fff;
border-top:1px solid #eef1f7;
}
.ba-mid svg{width:24px;height:24px;stroke:var(--brand);fill:none;opacity:.8}
.ba-corner-tag{
background:#2d3a55;color:#fff;
display:flex;align-items:center;justify-content:center;
flex-direction:column;gap:8px;
font-size:16px;font-weight:800;letter-spacing:.08em;
padding:24px 8px;
border-top:1px solid rgba(255,255,255,.08);
}
.ba-corner-tag svg{width:32px;height:32px;stroke:#fff;fill:none}
.ba-row-head{font-weight:800;color:var(--ink-2)}
/* 項目名カラム（タブレット以下で表示。デスクトップは Before/After 内に項目名を出すため非表示） */
.ba-table-wrap{}
.ba-item-head{display:none}
.ba-item{
display:none;
align-items:center;justify-content:flex-start;
padding:18px 16px;
border-top:1px solid #eef1f7;
background:#fff;
font-size:15px;font-weight:800;color:var(--ink-2);
letter-spacing:.02em;white-space:nowrap;
}
/* 横スクロール案内（各表がスクロール可能になる幅でのみ表示／BA表・他社比較表で共用） */
.ba-scroll-hint,
.comp-scroll-hint{
display:none;
align-items:center;justify-content:center;gap:7px;
margin-top:12px;
font-size:12px;font-weight:700;color:#7b8aa3;
letter-spacing:.04em;
}
.ba-scroll-hint svg,
.comp-scroll-hint svg{width:18px;height:18px;color:#9aa7bd;flex-shrink:0;animation:baSwipe 1.6s ease-in-out infinite}
@keyframes baSwipe{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@media (prefers-reduced-motion: reduce){.ba-scroll-hint svg,.comp-scroll-hint svg{animation:none}}
.ba-note{
margin-top:18px;text-align:center;
font-size:13px;color:#7b8aa3;letter-spacing:.04em;
}
/* ===== Section 05: What You Learn ===== */
.learn{padding:118px 32px 104px}
.learn .section-bg{background-image:url('../images/lp/bg-what-you-learn.webp')}
.learn .section-inner{max-width:1280px}
.learn .section-label{text-align:left;margin-bottom:14px}
.learn-title{
display:flex;justify-content:center;
margin-bottom:32px;
}
.learn-title img{
width:100%;max-width:960px;height:auto;
}
.learn-sub{
text-align:center;
font-size:18px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:2.15;
margin-bottom:64px;
}
.learn-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:26px;
}
.learn-card{
display:flex;flex-direction:column;align-items:center;
background:rgba(255,255,255,.74);
border:1px solid #e3e8f1;
border-radius:20px;
padding:38px 30px 30px;
min-height:282px;
box-shadow:0 10px 26px rgba(6,22,56,.055);
backdrop-filter:blur(2px);
transition:transform .2s ease, box-shadow .2s ease;
}
.learn-icon{
flex:1;
display:flex;align-items:center;justify-content:center;
margin-bottom:10px;
}
.learn-icon svg{width:84px;height:84px}
.learn-card-title{
font-size:25px;font-weight:900;color:var(--brand);
letter-spacing:.05em;line-height:1.4;
text-align:center;
margin-bottom:14px;
}
.learn-divider{
width:100%;max-width:208px;
border:0;border-top:1.5px dashed #c4d0e6;
margin:0 0 14px;
}
.learn-card-desc{
font-size:15.5px;font-weight:600;color:var(--ink-2);
letter-spacing:.04em;line-height:1.65;
text-align:center;
}
.learn-card-desc.tight{margin-bottom:14px}
.learn-chips{
display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.learn-chip{
display:inline-flex;align-items:center;
height:30px;padding:0 12px;
background:#fff;
border:1.4px solid #cdd9ec;
border-radius:8px;
font-size:13px;font-weight:700;color:var(--ink);
letter-spacing:.02em;
}
/* ===== Section 06: Why AI Toryumon (3つの理由) ===== */
.reasons{padding:120px 32px 100px}
.reasons .section-bg{background-image:url('../images/lp/bg-reasons.webp')}
.reasons .section-inner{max-width:1280px}
.reasons .section-label{text-align:left;margin-bottom:20px}
.reasons-title{
display:flex;align-items:center;justify-content:center;
margin-bottom:28px;
}
.reasons-title img{
width:100%;max-width:1056px;height:auto;
}
.reasons-sub{
text-align:center;
font-size:17px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.95;
margin-bottom:64px;
}
.reason-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.reason-card{
position:relative;
background:#fff;
border:1px solid #e3e8f1;
border-radius:18px;
padding:42px 26px 26px;
text-align:center;
box-shadow:0 8px 22px rgba(6,22,56,.06);
transition:transform .2s ease, box-shadow .2s ease;
}
.reason-num{
position:absolute;top:-22px;left:50%;transform:translateX(-50%);
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
background:var(--brand);color:#fff;
border-radius:50%;
font-family:'Inter','Noto Sans JP',sans-serif;
font-size:18px;font-weight:800;letter-spacing:.04em;
box-shadow:0 6px 14px rgba(0,75,214,.30);
border:4px solid #fff;
}
.reason-card h3{
font-size:24px;font-weight:900;color:var(--ink);
letter-spacing:.04em;line-height:1.45;
margin-bottom:14px;
}
.reason-card h3 .em{color:var(--brand)}
.reason-card p{
font-size:16px;font-weight:500;color:var(--ink-2);
line-height:1.8;letter-spacing:.04em;
margin-bottom:22px;
min-height:54px;
}
.reason-visual{
border-radius:12px;overflow:hidden;
aspect-ratio:16/10;
background:#f4f7fc;
}
.reason-visual img{
width:100%;height:100%;object-fit:cover;
}
.reasons-cta-wrap{
margin-top:64px;
display:flex;flex-direction:column;align-items:center;gap:14px;
}
.cta-primary-lg{
position:relative;
display:inline-flex;align-items:center;justify-content:center;gap:18px;
height:78px;padding:0 60px;
background:linear-gradient(180deg,#FB8B3A 0%,var(--orange) 60%,#E25A0E 100%);
color:#fff;
border-radius:14px;
font-size:22px;font-weight:900;letter-spacing:.06em;
box-shadow:0 14px 28px rgba(242,107,31,.34);
transition:transform .15s ease, box-shadow .15s ease;
min-width:480px;
}
.cta-primary-lg:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(242,107,31,.40)}
.cta-primary-lg .cta-cal{width:28px;height:28px;stroke:#fff;fill:none}
.cta-primary-lg.has-arrow{padding-right:64px}
.cta-primary-lg.has-arrow::after{right:34px;width:13px;height:13px;border-width:3.5px}
/* ===== Section 07: Curriculum ===== */
.curriculum{padding:120px 32px 100px}
.curriculum .section-bg{background-image:url('../images/lp/bg-curriculum.webp')}
.curriculum .section-inner{max-width:1280px}
.curriculum .section-label{text-align:left;margin-bottom:20px}
.cur-title{
display:flex;align-items:center;justify-content:center;
margin-bottom:28px;
}
.cur-title img{
width:100%;max-width:880px;height:auto;
}
.cur-sub{
text-align:center;
font-size:17px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.95;
margin-bottom:64px;
}
.cur-grid{
display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start;
}
/* timetable */
.timetable{
background:#fff;
border:1px solid #e3e8f1;
border-radius:16px;
padding:14px 22px;
box-shadow:0 8px 22px rgba(6,22,56,.06);
}
.tt-badge{
display:inline-flex;align-items:center;
background:#2d3a55;color:#fff;
font-size:13px;font-weight:800;letter-spacing:.06em;
padding:6px 12px;border-radius:8px;
margin-bottom:10px;
}
.tt-row{
display:grid;
grid-template-columns:88px 1fr 28px;
align-items:center;
gap:18px;
padding:14px 6px;
border-bottom:1px dashed #e3e8f1;
}
.tt-row:last-child{border-bottom:none}
.tt-time{
display:inline-flex;align-items:center;justify-content:center;
height:30px;padding:0 12px;min-width:74px;
background:var(--brand);color:#fff;
border-radius:6px;
font-family:'Inter','Noto Sans JP',sans-serif;
font-size:16px;font-weight:800;letter-spacing:.06em;
}
.tt-row.pre .tt-time{background:#2d3a55}
.tt-label{
display:flex;align-items:center;gap:14px;
font-size:16px;font-weight:700;color:var(--ink);
letter-spacing:.04em;line-height:1.5;
}
.tt-label::before{
content:"";
width:8px;height:8px;border-radius:50%;
background:var(--brand);flex-shrink:0;
}
.tt-row.pre .tt-label::before{background:#2d3a55}
.tt-icon{
width:28px;height:28px;
display:flex;align-items:center;justify-content:center;
}
.tt-icon svg{width:26px;height:26px;stroke:var(--brand);fill:none}
/* tools panel */
.tools-panel-wrap{
position:relative;
}
.tools-panel{
background:linear-gradient(180deg,#EAF1FB 0%,#DCE7F7 100%);
border:1px solid #cdd9ec;
border-radius:16px;
padding:24px 26px;
box-shadow:0 8px 22px rgba(6,22,56,.06);
}
.tools-panel h4{
font-size:18px;font-weight:900;color:var(--ink);
letter-spacing:.04em;
margin-bottom:14px;
}
.tools-list{
list-style:none;display:flex;flex-direction:column;gap:8px;
}
.tools-list li{
display:flex;align-items:center;gap:12px;
padding:9px 12px;
background:#fff;
border-radius:8px;
font-size:16px;font-weight:700;color:var(--ink);
letter-spacing:.04em;
box-shadow:0 1px 3px rgba(6,22,56,.04);
}
.tools-list li svg,
.tools-list li img.ti{width:24px;height:24px;flex-shrink:0;stroke:var(--brand);fill:none}
.tools-list li .ti-excel{stroke:#21A366}
.tools-list li .ti-pdf{stroke:#E2382B}
.tools-list li .ti-mail{stroke:#355A88}
/* curriculum visual composition: laptop top-right + phone bottom-right */
.tools-panel-wrap{
padding-top:18px;
padding-right:96px;
}
.cur-visual{
position:absolute;
inset:0;
pointer-events:none;
}
.cur-laptop{
position:absolute;
top:0;
right:0;
width:260px;
filter:drop-shadow(0 14px 26px rgba(6,22,56,.18));
z-index:1;
}
.cur-laptop-screen{
background:#fff;
border:6px solid #1f2937;
border-bottom:0;
border-radius:10px 10px 0 0;
padding:6px;
aspect-ratio:16/10;
overflow:hidden;
}
.cur-laptop-inner{
width:100%;height:100%;
display:grid;
grid-template-columns:22px 1fr;
background:#fff;
border-radius:3px;
overflow:hidden;
}
.cur-laptop-side{
background:linear-gradient(180deg,#1F3A6B 0%,#264A85 100%);
display:flex;flex-direction:column;align-items:center;
gap:8px;padding:8px 0;
}
.cur-laptop-side i{
display:block;width:12px;height:12px;border-radius:3px;
background:rgba(255,255,255,.35);
}
.cur-laptop-side i:first-child{background:#fff}
.cur-laptop-main{
display:flex;flex-direction:column;
background:#fff;
}
.cur-laptop-toolbar{
height:14px;display:flex;align-items:center;gap:4px;
padding:0 6px;border-bottom:1px solid #eef2f7;
}
.cur-laptop-toolbar span{
height:5px;background:#e5ebf3;border-radius:2px;
}
.cur-laptop-toolbar span.tb1{width:38px}
.cur-laptop-toolbar span.tb2{width:18px;margin-left:auto}
.cur-laptop-toolbar span.tb3{width:18px}
.cur-laptop-toolbar span.tb-btn{
width:24px;height:8px;background:var(--brand);border-radius:2px;
}
.cur-laptop-table{
flex:1;display:flex;flex-direction:column;
}
.cur-laptop-thead{
display:grid;grid-template-columns:14px repeat(5,1fr) 18px;
gap:4px;padding:4px 6px;
background:#F1F5FB;
align-items:center;
}
.cur-laptop-thead span{
height:4px;background:#cdd9ec;border-radius:2px;
}
.cur-laptop-thead .cb{
width:6px;height:6px;background:#fff;border:1px solid #cdd9ec;border-radius:1px;
}
.cur-laptop-trow{
display:grid;grid-template-columns:14px repeat(5,1fr) 18px;
gap:4px;padding:4px 6px;
align-items:center;
border-bottom:1px solid #f1f5fb;
}
.cur-laptop-trow span{
height:4px;background:#e5ebf3;border-radius:2px;
}
.cur-laptop-trow .cb{
width:6px;height:6px;background:#fff;border:1px solid #cdd9ec;border-radius:1px;
}
.cur-laptop-trow .dot{
width:6px;height:6px;border-radius:50%;background:var(--brand);
justify-self:center;
background:none;height:auto;
}
.cur-laptop-trow .dot::before{
content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--brand);
}
.cur-laptop-base{
height:10px;background:linear-gradient(180deg,#d6dbe2 0%,#a9b1bd 100%);
border-radius:0 0 14px 14px;
margin:0 -10px;
position:relative;
}
.cur-laptop-base::before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:42px;height:4px;background:#8a93a1;border-radius:0 0 6px 6px;
}
.cur-phone{
position:absolute;
top:90px;
right:-8px;
width:172px;
background:#fff;
border-radius:18px;
box-shadow:0 18px 30px rgba(6,22,56,.18), 0 0 0 1px rgba(6,22,56,.06);
padding:10px 12px 12px;
z-index:2;
}
.cur-phone-tabs{
display:flex;align-items:center;justify-content:space-around;
padding-bottom:8px;
border-bottom:1px solid #eef2f7;
}
.cur-phone-tabs i{
width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
color:#8893a8;
}
.cur-phone-tabs i.active{color:var(--brand)}
.cur-phone-title{
display:flex;align-items:center;gap:6px;
margin-top:10px;margin-bottom:8px;
font-size:11px;font-weight:800;color:var(--ink);
letter-spacing:.03em;
}
.cur-phone-title::before{
content:"";width:14px;height:14px;border-radius:3px;
background:var(--brand);
-webkit-mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.cur-phone-field{
margin-bottom:8px;
}
.cur-phone-field label{
display:block;
font-size:8.5px;font-weight:700;color:#5a6478;
letter-spacing:.02em;
margin-bottom:3px;
}
.cur-phone-select{
display:flex;align-items:center;justify-content:space-between;
height:22px;padding:0 8px;
border:1px solid #d8dfeb;
border-radius:5px;
font-size:9.5px;font-weight:700;color:var(--ink);
}
.cur-phone-select::after{
content:"";width:6px;height:6px;
border-right:1.4px solid #8893a8;
border-bottom:1.4px solid #8893a8;
transform:rotate(45deg) translateY(-2px);
}
.cur-phone-textarea{
border:1px solid #d8dfeb;
border-radius:5px;
padding:5px 7px;
font-size:9px;font-weight:600;color:var(--ink);
line-height:1.45;letter-spacing:.02em;
min-height:38px;
}
.cur-banner{
margin-top:56px;display:flex;justify-content:center;
}
.cur-banner img{
width:100%;max-width:988px;height:auto;
}
/* ===== Section 08: Case Studies ===== */
.cases{padding:120px 32px 100px}
.cases .section-bg{background-image:url('../images/lp/bg-case-studies.webp')}
.cases .section-inner{max-width:1280px}
.cases .section-label{text-align:left;margin-bottom:20px}
.cases-title{
display:flex;align-items:center;justify-content:center;
margin-bottom:28px;
}
.cases-title img{
width:100%;max-width:780px;height:auto;
}
.cases-sub{
text-align:center;
font-size:17px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.95;
margin-bottom:64px;
}
.case-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.case-card{
background:#fff;
border:1px solid #e3e8f1;
border-radius:18px;
padding:18px 18px 22px;
box-shadow:0 8px 22px rgba(6,22,56,.06);
transition:transform .2s ease, box-shadow .2s ease;
display:flex;flex-direction:column;gap:14px;
}
.case-head{
display:inline-flex;align-items:center;gap:10px;
align-self:flex-start;
height:30px;padding:0 12px 0 8px;
background:transparent;
font-size:16px;font-weight:800;color:var(--ink);
letter-spacing:.04em;
}
.case-head .case-num{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;
background:var(--brand);color:#fff;
border-radius:6px;
font-family:'Inter','Noto Sans JP',sans-serif;
font-size:16px;font-weight:800;letter-spacing:.04em;
}
.case-visual{
border-radius:10px;overflow:hidden;
aspect-ratio:16/10;
background:#f4f7fc;
}
.case-visual img{width:100%;height:100%;object-fit:cover}
.case-block{
padding:0 4px;
}
.case-block .case-label{
display:inline-block;
font-size:13px;font-weight:900;color:var(--brand);
letter-spacing:.08em;
padding-bottom:6px;
border-bottom:2px solid var(--brand);
margin-bottom:10px;
}
.case-block.outcome .case-label{color:var(--orange);border-color:var(--orange)}
.case-block p{
font-size:16px;font-weight:600;color:var(--ink);
letter-spacing:.04em;line-height:1.65;
}
.case-badge{
margin-top:auto;
padding:0 4px;
}
.case-badge img{
width:100%;height:auto;
}
.cases-note{
margin-top:36px;
text-align:center;
font-size:13px;color:#7b8aa3;letter-spacing:.04em;
}
/* ===== Section 09: Voices ===== */
.voices{padding:120px 32px 100px}
/* 額縁デザインのため cover では左右の装飾が切れる。100% 100% で全周を維持 */
.voices .section-bg{background-image:url('../images/lp/bg-voices.webp');background-size:100% 100%}
.voices .section-inner{max-width:1280px}
.voices .section-label{text-align:left;margin-bottom:20px}
.voices-title{
display:flex;align-items:center;justify-content:center;
margin-bottom:28px;
}
.voices-title img{
width:100%;max-width:820px;height:auto;
}
.voices-sub{
text-align:center;
font-size:17px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.95;
margin-bottom:64px;
}
.voice-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
align-items:stretch;
}
.voice-card{
position:relative;
display:flex;flex-direction:column;
background:#fff;
border:1px solid #e3e8f1;
border-radius:20px;
padding:46px 30px 28px;
box-shadow:0 8px 22px rgba(6,22,56,.06);
overflow:hidden;
}
/* 上部のアクセントストライプ（カードごとに色を切り替え） */
.voice-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:6px;
background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 100%);
}
.voice-card:nth-child(2)::before{background:linear-gradient(90deg,#FB8B3A 0%,var(--orange) 100%)}
/* 装飾用の大きな引用符 */
.voice-mark{
position:absolute;top:8px;right:22px;
font-family:Georgia,'Times New Roman',serif;
font-size:96px;line-height:1;font-weight:700;
color:#eaf1ff;pointer-events:none;user-select:none;
}
.voice-card:nth-child(2) .voice-mark{color:#fdeede}
.voice-title{
position:relative;z-index:1;
font-size:21px;font-weight:900;color:var(--brand);
letter-spacing:.03em;line-height:1.5;
margin-bottom:18px;
}
.voice-card:nth-child(2) .voice-title{color:var(--orange-2)}
.voice-text{
position:relative;z-index:1;flex:1;
font-size:15px;font-weight:500;color:var(--ink-2);
letter-spacing:.03em;line-height:1.95;
margin-bottom:24px;
}
.voice-person{
display:flex;align-items:center;gap:14px;
padding-top:20px;border-top:1px dashed #d8e1f0;
}
.voice-avatar{
flex-shrink:0;width:46px;height:46px;border-radius:50%;overflow:hidden;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#e8f0ff 0%,#d3e3ff 100%);
color:var(--brand);
}
.voice-card:nth-child(2) .voice-avatar{
background:linear-gradient(135deg,#ffeede 0%,#ffd9bd 100%);color:var(--orange-2);
}
.voice-avatar svg{width:26px;height:26px}
.voice-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.voice-meta{display:flex;flex-direction:column;gap:3px}
.voice-meta .v-name{
font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.05em;
}
.voice-meta .v-industry{
font-size:12.5px;font-weight:600;color:#7b8aa3;letter-spacing:.04em;
}
.voices-note{
margin-top:36px;text-align:center;
font-size:13px;color:#7b8aa3;letter-spacing:.04em;
}
/* ===== Section 10: Comparison ===== */
.comparison{padding:120px 32px 100px}
/* 額縁デザインのため cover では左右の装飾が切れる。100% 100% で全周を維持 */
.comparison .section-bg{background-image:url('../images/lp/bg-comparison.webp');background-size:100% 100%}
.comparison .section-inner{max-width:1280px}
.comparison .section-label{text-align:left;margin-bottom:20px}
.comp-title{
display:flex;align-items:center;justify-content:center;
margin-bottom:28px;
}
.comp-title img{width:100%;max-width:780px;height:auto}
.comp-sub{
text-align:center;
font-size:17px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:2.0;
margin-bottom:62px;
}
.comp-table-wrap{
background:#fff;
border:1px solid #e3e8f1;
border-radius:14px;
overflow:hidden;
box-shadow:0 8px 22px rgba(6,22,56,.06);
}
.comp-table{
width:100%;
border-collapse:collapse;
font-size:16px;
}
/* 日本語の自動改行（文字途中での折り返し）を抑止。折り返しは値が長い時のみ
セル幅に応じて起き、語の途中で割れる不自然な改行を防ぐ */
.comp-table th,
.comp-table td{word-break:keep-all}
.comp-table thead th{
background:#f4f7fc;
padding:18px 14px;
font-size:16px;font-weight:800;color:var(--ink);
letter-spacing:.04em;
text-align:center;
border-bottom:1px solid #e3e8f1;
border-right:1px solid #eef2f8;
}
.comp-table thead th:first-child{background:#fff;text-align:center}
.comp-table thead th:last-child{border-right:none}
.comp-table thead th.is-ours{
background:var(--brand);color:#fff;
border-bottom-color:var(--brand);
position:relative;
}
.comp-table tbody td{
padding:18px 14px;
text-align:center;
border-bottom:1px solid #eef2f8;
border-right:1px solid #eef2f8;
font-size:16px;font-weight:600;color:var(--ink-2);
letter-spacing:.04em;
line-height:1.5;
background:#fff;
}
.comp-table tbody tr:last-child td{border-bottom:none}
.comp-table tbody td:last-child{border-right:none}
.comp-table tbody td.label-col{
text-align:left;
padding-left:22px;
font-weight:800;color:var(--ink);
background:#fff;
width:170px;
}
.comp-table tbody td.label-col .lc-inner{
display:inline-flex;align-items:center;gap:12px;
}
.comp-table tbody td.label-col img{width:24px;height:24px}
.comp-table tbody td.is-ours{
background:#f1f6ff;
color:var(--ink);
font-weight:800;
position:relative;
}
.comp-table tbody td.is-ours .oc-inner{
display:inline-flex;align-items:center;gap:0;
}
.comp-table tbody td.is-ours img{width:22px;height:22px}
.comp-ours-col-bg{position:relative}
/* highlight border around AI登竜門 column */
.comp-table thead th.is-ours,
.comp-table tbody td.is-ours{
border-left:2px solid var(--brand);
border-right:2px solid var(--brand);
}
.comp-table tbody tr:last-child td.is-ours{
border-bottom:2px solid var(--brand);
}
.comp-table thead th.is-ours{
border-top:2px solid var(--brand);
}
/* comparison marks & emphasized numbers */
.comp-table .mk{
display:inline-block;font-weight:900;font-size:15px;
margin-right:5px;line-height:1;vertical-align:middle;
font-family:'Inter','Noto Sans JP',sans-serif;
}
.comp-table .mk-x{color:#aeb6c4}
.comp-table .mk-tri{color:#e3a72e}
.comp-table .mk-dash{color:#c4cbd6}
.comp-table .cn{font-weight:900;color:var(--ink);font-family:'Inter','Noto Sans JP',sans-serif}
.comp-table td.is-ours .cn{color:var(--orange-2)}
.comp-callout{
margin-top:44px;
display:flex;justify-content:center;
}
.comp-callout img{
width:100%;max-width:820px;height:auto;
}
/* ===== Section 11: Pricing ===== */
.pricing{padding:120px 32px 110px;background:#fbfcfe}
.pricing .section-bg{background-image:url('../images/lp/bg-pricing-washi-brush.webp');background-position:center top}
.pricing .section-inner{max-width:1040px}
.pricing .section-label{text-align:left;margin-bottom:20px}
/* ---------- 見出し（業界最安値[筆文字画像] + の料金[テキスト]） ---------- */
.pricing-hero{
display:flex;align-items:center;justify-content:center;
gap:.12em;flex-wrap:nowrap;
}
.pricing-hero-brush{
height:clamp(100px,14vw,135px);width:auto;display:block;
}
.pricing-hero-suffix{
font-weight:900;color:#07184A;
font-size:clamp(24px,4.6vw,42px);line-height:1;letter-spacing:.02em;
white-space:nowrap;
}
/* 「業界最安値」の注釈（当社調べ） */
.pricing-note{
text-align:center;color:#7b8aa3;font-weight:500;
font-size:clamp(11px,1.4vw,13px);letter-spacing:.02em;
margin-top:clamp(3px,0.6vw,6px);
}
.pricing-lead{
text-align:center;color:var(--ink-2);font-weight:500;
font-size:clamp(16px,1.8vw,17px);letter-spacing:.04em;
margin-top:clamp(30px,3.6vw,42px);line-height:1.9;text-wrap:balance;
}
/* ---------- 価格カード ---------- */
.price-card{
position:relative;
background:#fff;
border:3px solid #0f2a6e;
border-radius:24px;
max-width:760px;
margin:clamp(60px,7vw,84px) auto 0;
/* 上部パディングはレスポンシブでも縮めず、明朗価格ラベルと498,000円画像の間隔を保つ */
padding:clamp(60px,5.5vw,64px) clamp(15px,4.5vw,52px) clamp(30px,4vw,44px);
box-shadow:0 22px 60px -24px rgba(13,34,92,.35);
}
.price-card-label{
position:absolute;top:0;left:50%;
transform:translate(-50%,-52%);
width:clamp(252px,59%,378px);height:auto;
filter:drop-shadow(0 8px 14px rgba(20,82,214,.28));
}
/* カード上部：枠づけコピー */
.price-eyebrow{
text-align:center;color:#0f2a6e;font-weight:800;
font-size:clamp(12px,1.6vw,15px);letter-spacing:.04em;
margin-bottom:clamp(14px,2.2vw,22px);
}
/* 見出し：価格（左）＋分解情報（右）の2カラム */
.price-headline{
display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
align-items:center;gap:clamp(8px,1.4vw,18px);
}
.price-headline-main{min-width:0}
.price-figure{
display:flex;align-items:flex-end;justify-content:center;
gap:.08em;flex-wrap:nowrap;min-width:0;
}
.price-figure-num{
width:clamp(160px,80%,392px);min-width:0;height:auto;display:block;
}
.price-figure-yen{
flex:none;font-weight:900;color:#1452d6;
font-size:clamp(20px,2.8vw,35px);line-height:1;
margin-bottom:clamp(4px,1vw,10px);letter-spacing:.01em;
}
/* 価格分解（右カラム） */
.price-decomp{
list-style:none;display:flex;flex-direction:column;
gap:clamp(10px,1.6vw,16px);min-width:0;
}
.price-decomp-item{display:flex;align-items:center;gap:clamp(8px,1.4vw,12px)}
.price-decomp-ic{flex:none;width:clamp(28px,4vw,42px);height:clamp(28px,4vw,42px)}
.price-decomp-ic svg{width:100%;height:100%;display:block}
.price-decomp-text{
font-weight:700;color:#14213d;font-size:clamp(13px,1.6vw,16px);
line-height:1.4;letter-spacing:.02em;
}
.price-decomp-text strong{font-weight:900}
.price-decomp-text .is-orange{color:#f0640f;font-size:1.12em;white-space:nowrap}
.price-decomp-text .dnw{white-space:nowrap}
.price-figure-tax{
flex:none;align-self:flex-end;
font-weight:700;color:#14213d;font-size:clamp(11px,1.5vw,14px);
padding-bottom:clamp(6px,1.2vw,12px);white-space:nowrap;
}
.price-divider{
height:1.5px;background:#d9dfee;
margin:clamp(20px,3.5vw,30px) 0 clamp(18px,3vw,26px);
}
/* ---------- ROI（投資対効果）一文＋比較への誘導 ---------- */
.price-roi{
text-align:center;color:var(--ink-2);font-weight:700;
font-size:clamp(15px,1.9vw,18px);line-height:1.8;letter-spacing:.02em;
text-wrap:balance;
}
.price-roi strong{font-weight:900;color:var(--brand-2)}
/* accented phrases (年収数百万円 / 作れる人 / 最大3名) emphasised larger */
.price-roi strong{font-size:1.18em}
.price-roi .accent{font-size:1.34em}
.price-roi-link{
display:inline-flex;align-items:center;justify-content:center;
width:100%;margin-top:clamp(8px,1.4vw,12px);
color:var(--brand);font-weight:800;font-size:clamp(12px,1.6vw,14px);
letter-spacing:.02em;text-decoration:underline;
text-underline-offset:3px;text-decoration-thickness:1px;
}
.price-roi-link:hover{color:#0036a8}
/* ---------- カード内 CTA ---------- */
.price-cta{
display:flex;align-items:center;justify-content:center;
gap:clamp(10px,2vw,16px);
width:fit-content;max-width:100%;
margin:clamp(22px,3.5vw,34px) auto 0;
padding:clamp(15px,2.4vw,20px) clamp(28px,5vw,56px);
background:linear-gradient(180deg,#1d428f 0%,#0f2a6e 100%);
border:none;border-radius:14px;color:#fff;
font-family:inherit;font-weight:900;
font-size:clamp(15px,2.4vw,19px);letter-spacing:.04em;
box-shadow:0 12px 26px -10px rgba(15,42,110,.6);
transition:transform .12s ease, box-shadow .12s ease;
}
.price-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(15,42,110,.7)}
.price-cta:active{transform:translateY(0)}
.price-cta-cal{width:clamp(24px,4vw,32px);height:clamp(24px,4vw,32px);flex:none}
.price-cta-chev{width:clamp(14px,2.4vw,18px);height:clamp(14px,2.4vw,18px);flex:none}
/* ---------- リスク反転：保証チップ ---------- */
.price-guarantees{
list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:clamp(8px,1.4vw,12px);margin-top:clamp(16px,2.4vw,22px);
}
.price-guarantee{
display:inline-flex;align-items:center;gap:7px;
padding:8px 14px;border-radius:999px;
background:var(--soft);border:1px solid #e3e8f1;
font-weight:700;color:#07184A;font-size:clamp(12px,1.6vw,14px);
letter-spacing:.02em;white-space:nowrap;
}
.price-guarantee svg{width:18px;height:18px;flex:none}
/* bottom outsourcing comparison */
.pricing-bottom{
margin-top:80px;
}
.pricing-bottom-heading{
display:flex;justify-content:center;margin-bottom:34px;
}
/* 「社内で試せる人材」だけブラシ画像、前後（外注する前に／を育てる）は通常テキスト */
.pricing-bottom-title .brush{height:84px;max-width:100%}
/* ===== Section 12: Flow ===== */
.flow{padding:120px 32px 100px}
.flow .section-bg{background-image:url('../images/lp/bg-flow.webp')}
.flow .section-inner{max-width:1280px}
.flow .section-label{text-align:left;margin-bottom:20px}
.flow-title{display:flex;justify-content:center;margin-bottom:28px}
.flow-title img{width:100%;max-width:820px;height:auto}
.flow-sub{
text-align:center;
font-size:17px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:2.0;
margin-bottom:64px;
}
.flow-steps{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:18px;
align-items:stretch;
position:relative;
}
.flow-step{
position:relative;
background:#fff;
border:1px solid #e3e8f1;
border-radius:18px;
padding:42px 22px 24px;
text-align:center;
box-shadow:0 8px 22px rgba(6,22,56,.06);
transition:transform .2s ease, box-shadow .2s ease;
display:flex;flex-direction:column;
}
.flow-step .step-num{
position:absolute;top:-22px;left:50%;transform:translateX(-50%);
width:46px;height:46px;
display:flex;align-items:center;justify-content:center;
background:var(--brand);color:#fff;
border-radius:50%;
font-family:'Inter','Noto Sans JP',sans-serif;
font-size:16px;font-weight:800;letter-spacing:.04em;
box-shadow:0 6px 14px rgba(0,75,214,.30);
border:4px solid #fff;
}
.flow-step .step-icon{
width:96px;height:96px;
margin:0 auto 18px;
}
.flow-step .step-icon img{width:100%;height:100%;object-fit:contain}
.flow-step .step-title{
display:block;
color:var(--brand);
font-size:18px;font-weight:900;letter-spacing:.04em;
margin:0 0 10px;
}
.flow-step p{
font-size:15px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.8;
}
.flow-arrow{
position:absolute;top:50%;
width:78px;height:auto;
transform:translateY(-50%);
pointer-events:none;z-index:1;
}
.flow-arrow img{width:100%;height:auto;display:block}
.flow-arrow.arrow-1{left:calc(25% - 22px)}
.flow-arrow.arrow-2{left:calc(50% - 39px)}
.flow-arrow.arrow-3{left:calc(75% - 56px)}
/* ===== Section 13: FAQ ===== */
.faq{padding:120px 32px 100px}
.faq .section-bg{background-image:url('../images/lp/bg-faq.webp')}
.faq .section-inner{max-width:1200px}
.faq .section-label{text-align:left;margin-bottom:20px}
.faq-title{display:flex;justify-content:center;margin-bottom:28px}
.faq-title img{width:100%;max-width:540px;height:auto}
.faq-sub{
text-align:center;
font-size:17px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.95;
margin-bottom:60px;
}
.faq-grid{
display:grid;grid-template-columns:1fr;gap:14px;max-width:820px;margin:0 auto;
}
.faq-item{
background:#fff;
border:1px solid #e3e8f1;
border-radius:12px;
padding:18px 22px 16px;
box-shadow:0 4px 12px rgba(6,22,56,.05);
interpolate-size:allow-keywords;
}
/* アコーディオンを滑らかに開閉（モダンブラウザ対応・非対応環境は従来通り即時開閉） */
.faq-item::details-content{
block-size:0;
overflow:hidden;
transition:block-size .3s ease, content-visibility .3s allow-discrete;
}
.faq-item[open]::details-content{
block-size:auto;
}
.faq-q{
display:flex;align-items:flex-start;gap:10px;
cursor:pointer;
list-style:none;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q .q-mark{
font-family:'Inter','Noto Sans JP',sans-serif;
font-size:18px;font-weight:900;color:var(--brand);
letter-spacing:.04em;flex-shrink:0;line-height:1.5;
}
.faq-q .q-text{
flex:1;
font-size:16px;font-weight:800;color:var(--ink);
letter-spacing:.04em;line-height:1.55;
}
.faq-q .q-chev{
width:22px;height:22px;flex-shrink:0;
margin-left:8px;margin-top:4px;
transition:transform .25s ease;
}
.faq-item[open] .faq-q .q-chev{transform:rotate(180deg)}
.faq-a{
display:flex;align-items:flex-start;gap:10px;
margin-top:12px;
padding-top:12px;
border-top:1px dashed #e3e8f1;
}
.faq-a .a-mark{
font-family:'Inter','Noto Sans JP',sans-serif;
font-size:16px;font-weight:900;color:#E2382B;
letter-spacing:.04em;flex-shrink:0;line-height:1.7;
}
.faq-a .a-text{
flex:1;
font-size:16px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.85;
}
.faq-bottom-note{
margin-top:36px;
display:flex;align-items:center;justify-content:center;gap:10px;
font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:.04em;
}
.faq-bottom-note img{width:22px;height:22px}
/* ===== Section 14: Final CTA (Start Now) ===== */
.final-cta{
padding:120px 32px 110px;
position:relative;
}
.final-cta .section-bg{background-image:url('../images/lp/bg-final-cta.webp')}
.final-cta .section-inner{max-width:1180px;position:relative}
.final-cta .section-label{text-align:left;margin-bottom:28px}
.fc-title{display:flex;justify-content:center;margin-bottom:22px}
.fc-title img{width:100%;max-width:920px;height:auto}
.fc-sub{
text-align:center;
color:#dde7fb;
font-size:16px;font-weight:500;
letter-spacing:.04em;line-height:1.95;
margin-bottom:44px;
}
.fc-quote-wrap{
position:relative;
margin-bottom:36px;
}
.fc-quote{
position:relative;
background:rgba(8,28,86,.55);
border:1px solid rgba(255,255,255,.18);
border-radius:16px;
padding:28px 320px 28px 32px;
display:flex;align-items:center;gap:22px;
min-height:140px;
backdrop-filter:blur(6px);
}
.fc-quote .fc-q-icon{
width:56px;height:56px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:#fff;border-radius:50%;
padding:10px;
}
.fc-quote .fc-q-icon img{width:100%;height:100%}
.fc-quote-text{
color:#fff;
font-size:16px;font-weight:500;
letter-spacing:.04em;line-height:1.95;
}
.fc-laptop{
position:absolute;
right:-10px;bottom:-30px;
width:330px;
pointer-events:none;
}
.fc-laptop img{
width:100%;height:auto;display:block;
filter:drop-shadow(0 14px 28px rgba(0,0,0,.32));
}
.fc-ctas{
display:grid;grid-template-columns:1.1fr 1fr;gap:22px;
margin-bottom:28px;
}
.fc-cta{
display:flex;align-items:center;justify-content:center;gap:18px;
height:96px;
border-radius:14px;
font-size:24px;font-weight:900;letter-spacing:.06em;
transition:transform .15s ease, box-shadow .15s ease;
}
.fc-cta:hover{transform:translateY(-2px)}
.fc-cta.primary{
background:linear-gradient(180deg,#FB8B3A 0%,var(--orange) 60%,#E25A0E 100%);
color:#fff;
box-shadow:0 14px 28px rgba(242,107,31,.40);
}
.fc-cta.primary:hover{box-shadow:0 18px 36px rgba(242,107,31,.50)}
.fc-cta.secondary{
background:#fff;color:var(--brand);
border:2px solid #fff;
box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.fc-cta .fc-cta-ic{width:32px;height:32px;flex-shrink:0}
.fc-cta .fc-cta-chev{width:20px;height:20px;flex-shrink:0;opacity:.9}
.fc-reassurance{
display:flex;justify-content:center;align-items:center;
gap:64px;flex-wrap:wrap;
margin-top:28px;
}
.fc-r-item{
display:flex;align-items:center;gap:10px;
color:#fff;
font-size:16px;font-weight:600;letter-spacing:.06em;
}
.fc-r-item img{width:22px;height:22px;flex-shrink:0}
/* ===== Section 15: Contact (Form) ===== */
.contact{padding:120px 32px 60px}
.contact .section-bg{background-image:url('../images/lp/bg-contact.webp')}
.contact .section-inner{max-width:1100px}
.contact .section-label{text-align:left;margin-bottom:18px}
.contact-title{display:flex;justify-content:center;margin-bottom:24px}
.contact-title img{width:100%;max-width:920px;height:auto}
.contact-sub{
text-align:center;
font-size:16px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.95;
margin-bottom:44px;
}
/* tabs */
.contact-tabs{
display:grid;grid-template-columns:1fr 1fr;gap:0;
margin-bottom:0;
}
.contact-tab{
display:flex;align-items:center;justify-content:center;gap:12px;
height:64px;
background:#fff;
border:1px solid #e3e8f1;
border-radius:12px 12px 0 0;
font-size:20px;font-weight:900;color:var(--ink-2);
letter-spacing:.06em;
cursor:pointer;
position:relative;
}
/* icons are hard-coded single-color SVGs (calendar=white, document=blue);
normalize per state so they stay legible regardless of source color */
.contact-tab img{width:26px;height:26px;flex-shrink:0;filter:brightness(0);opacity:.55}
.contact-tab.active{
background:var(--brand);color:#fff;
border-color:var(--brand);
z-index:2;
}
.contact-tab.active img{filter:brightness(0) invert(1);opacity:1}
.contact-tab:not(.active){background:#f5f8fc}
.contact-panel{
background:#fff;
border:1px solid #e3e8f1;
border-top:none;
border-radius:0 0 16px 16px;
padding:48px 40px 52px;
box-shadow:0 10px 28px rgba(6,22,56,.08);
display:grid;grid-template-columns:280px 1fr;gap:36px;
}
/* left assurance column */
.assurance-col{}
.assurance-heading{
display:flex;justify-content:flex-start;margin-bottom:20px;
}
.assurance-heading img{
width:auto;max-width:100%;height:40px;
}
.assurance-list{
display:flex;flex-direction:column;gap:12px;
}
.assur-item{
display:flex;align-items:center;gap:12px;
background:#f4f8ff;
border:1px solid #dde7f6;
border-radius:10px;
padding:12px 14px;
}
.assur-icon{
width:46px;height:46px;flex-shrink:0;
border-radius:50%;
background:var(--brand);
display:flex;align-items:center;justify-content:center;
font-family:'Inter','Noto Sans JP',sans-serif;
color:#fff;font-weight:900;
box-shadow:0 4px 10px rgba(0,75,214,.20);
}
.assur-icon.zero{font-size:16px;letter-spacing:-.02em}
.assur-icon img{width:26px;height:26px}
.assur-text{display:flex;flex-direction:column;gap:2px;line-height:1.4}
.assur-text b{
font-size:14px;font-weight:900;color:var(--ink);letter-spacing:.04em;
}
.assur-text b .em{
font-family:'Inter','Noto Sans JP',sans-serif;font-size:18px;font-weight:900;
color:var(--ink);margin:0 2px;
}
.assur-text span{
font-size:11.5px;font-weight:500;color:var(--ink-2);letter-spacing:.02em;line-height:1.55;
}
.assurance-security{
display:flex;align-items:flex-start;gap:10px;
margin-top:20px;
padding:14px 14px;
background:#f4f6fb;
border-radius:10px;
}
.assurance-security img{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.assurance-security p{
font-size:11.5px;font-weight:500;color:var(--ink-2);
letter-spacing:.02em;line-height:1.65;
}
/* form column */
.form-col{display:flex;flex-direction:column;gap:22px}
.field-row{
display:grid;grid-template-columns:160px 1fr;align-items:center;gap:18px;
}
.field-row.textarea-row{align-items:flex-start}
.field-label{
display:flex;align-items:center;gap:8px;
font-size:14px;font-weight:800;color:var(--ink);letter-spacing:.04em;
}
.field-label .req{
display:inline-flex;align-items:center;justify-content:center;
height:22px;padding:0 8px;
background:#FFEBE6;color:#E55226;
border-radius:4px;
font-size:11px;font-weight:800;letter-spacing:.04em;
}
.field-label .opt{
display:inline-flex;align-items:center;justify-content:center;
height:22px;padding:0 8px;
background:#EEF2F8;color:#7b8aa3;
border-radius:4px;
font-size:11px;font-weight:800;letter-spacing:.04em;
}
.field-input{
position:relative;
}
.field-input input,
.field-input textarea{
width:100%;
height:50px;
padding:0 16px;
border:1px solid #cdd6e3;
border-radius:8px;
/* iOS Safari は input が16px未満だとフォーカス時に自動ズームするため、16pxに設定して防止 */
font-size:16px;font-weight:500;color:var(--ink);
background:#fff;
letter-spacing:.04em;
font-family:inherit;
transition:border-color .15s ease, box-shadow .15s ease;
}
.field-input textarea{
height:120px;padding:14px 16px;
resize:vertical;line-height:1.6;
}
.field-input input::placeholder,
.field-input textarea::placeholder{color:#a8b3c4}
.field-input input:focus,
.field-input textarea:focus{
outline:none;
border-color:var(--brand);
box-shadow:0 0 0 3px rgba(0,75,214,.10);
}
.privacy-row{
display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
padding-left:0;margin-top:6px;
}
.privacy-check{
display:inline-flex;align-items:center;gap:8px;
font-size:13px;font-weight:600;color:var(--ink);
letter-spacing:.04em;
cursor:pointer;
}
.privacy-check input{position:absolute;opacity:0;pointer-events:none}
.privacy-check .box{
width:20px;height:20px;
background:#fff;border:2px solid #8aa4d6;border-radius:4px;
display:inline-flex;align-items:center;justify-content:center;
transition:background .15s, border-color .15s;
}
.privacy-check input:checked + .box{
background:var(--brand);border-color:var(--brand);
}
.privacy-check .box::after{
content:"";width:10px;height:5px;
border-left:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(-45deg) translate(0px,-1px);
opacity:0;transition:opacity .15s;
}
.privacy-check input:checked + .box::after{opacity:1}
.submit-cta{
display:flex;align-items:center;justify-content:center;gap:18px;
width:100%;
height:72px;
background:linear-gradient(180deg,#FB8B3A 0%,var(--orange) 60%,#E25A0E 100%);
color:#fff;
border:none;
border-radius:12px;
font-size:21px;font-weight:900;letter-spacing:.06em;
box-shadow:0 12px 26px rgba(242,107,31,.34);
cursor:pointer;
margin-top:6px;
transition:transform .15s ease, box-shadow .15s ease;
font-family:inherit;
}
.submit-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(242,107,31,.42)}
/* 左のアイコンは右の矢印(::after)と対になるよう擬似要素(::before)で絶対配置。
テキストは中央のまま、左右の余白内にアイコンと矢印が収まる */
.submit-cta::before{
content:"";
position:absolute;
top:50%;left:24px;
width:28px;height:28px;
transform:translateY(-50%);
background:center/contain no-repeat;
pointer-events:none;
}
.submit-cta.icon-cal::before{background-image:url('../images/lp/icon-cta-calendar-white.svg')}
.submit-cta.icon-doc::before{background-image:url('../images/lp/icon-cta-document-white.svg')}
.submit-cta.has-arrow{padding-right:52px}
.submit-cta.has-arrow::after{right:26px;width:11px;height:11px}
/* doc tab reference panel */
.doc-ref{
margin-top:24px;
background:#fff;
border:1px solid #e3e8f1;
border-radius:14px;
padding:22px 26px 22px;
display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;
box-shadow:0 8px 22px rgba(6,22,56,.06);
}
.doc-ref-head{
display:flex;align-items:center;gap:8px;
font-size:14px;font-weight:900;color:var(--ink);letter-spacing:.04em;
margin-bottom:8px;
}
.doc-ref-head img{width:18px;height:18px;flex-shrink:0}
.doc-ref p.doc-ref-sub{
font-size:12.5px;font-weight:500;color:var(--ink-2);letter-spacing:.04em;line-height:1.7;
}
.doc-ref-fields{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.doc-ref-field{display:flex;flex-direction:column;gap:6px}
.doc-ref-field .dr-label{
display:flex;align-items:center;gap:6px;
font-size:11px;font-weight:800;color:var(--ink);letter-spacing:.04em;
}
.doc-ref-field .dr-label .req,
.doc-ref-field .dr-label .opt{
height:18px;padding:0 6px;font-size:10px;
}
.doc-ref-field input{
width:100%;height:32px;
padding:0 10px;
border:1px solid #d8e0ec;
background:#fafbfd;
border-radius:6px;
font-size:11px;color:#a8b3c4;font-weight:500;
pointer-events:none;
font-family:inherit;
}
.doc-ref-note{
grid-column:1 / -1;
margin-top:6px;
font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:.04em;
}
/* ===== Merged Final CTA + Form block (added 2026-06-04) =====
The old "16 / Contact" form was merged into the Final CTA section.
The reassurance items were pulled out of the old 2-column panel and
laid out full-width above the form. (Revert via git history.) */
/* Site-wide smooth scrolling for anchor / CTA links, with an offset so
targets are not hidden under the 76px sticky header. */
html{scroll-behavior:smooth}
.section{scroll-margin-top:92px}
#contact-form{scroll-margin-top:104px}
.fc-form-block{
position:relative;
max-width:920px;
margin:0 auto;
text-align:left;
}
/* invisible offset anchor so "#download" / smooth-scroll lands below the header */
.form-anchor{
position:absolute;top:-120px;left:0;
width:1px;height:1px;pointer-events:none;
}
/* reassurance bar: white card, full-width, above the tabs/form */
.assurance-bar{
background:#fff;
border:1px solid #e3e8f1;
border-radius:16px;
padding:24px 28px 26px;
margin-bottom:32px;
box-shadow:0 10px 28px rgba(6,22,56,.10);
}
.assurance-bar .assurance-heading{
display:flex;justify-content:center;margin-bottom:24px;
}
.assurance-bar .assurance-heading img{
width:auto;max-width:100%;height:64px;
}
.assurance-row{
display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.assurance-bar .assur-item{align-items:flex-start;padding:16px 16px;gap:14px}
/* card text bumped to >=16px per request */
.assurance-bar .assur-text{gap:4px}
.assurance-bar .assur-text b{font-size:16px}
.assurance-bar .assur-text b .em{font-size:20px}
.assurance-bar .assur-text span{font-size:16px;line-height:1.6}
/* panel now holds a single visible form (the other is hidden via [hidden]) */
.fc-form-block .contact-panel{display:block}
/* .form-col sets display:flex which overrides native [hidden]; re-hide explicitly */
.fc-form-block .form-col[hidden]{display:none}
/* submit button: content-width and centered (was full-width / too big) */
.fc-form-block .submit-cta{
align-self:center;
width:auto;
min-width:300px;max-width:100%;
height:64px;
padding:0 52px;
font-size:19px;
gap:14px;
margin-top:14px;
}
/* doc-request intro + reassurance note */
.form-lead{
font-size:14px;font-weight:700;color:var(--ink);
letter-spacing:.04em;line-height:1.7;margin-bottom:16px;
}
.form-note{
font-size:12.5px;font-weight:500;color:var(--ink-2);
letter-spacing:.04em;line-height:1.7;
padding:10px 14px;background:#f4f6fb;border-radius:8px;
}
/* security note: centered chip below the form on the dark CTA bg */
.fc-form-block .assurance-security{
margin:18px auto 0;
max-width:600px;
justify-content:center;
background:#f4f6fb;
}
/* ===== Section 16: Footer ===== */
.footer{
position:relative;
padding:52px 32px 22px;
color:#fff;
overflow:hidden;
}
.footer-bg{
position:absolute;inset:0;z-index:0;
background:#06184E url('../images/lp/bg-footer.webp') center/cover no-repeat;
}
.footer-inner{
position:relative;z-index:1;
max-width:1280px;margin:0 auto;
}
.footer-main{
display:flex;flex-direction:column;align-items:center;
padding-bottom:18px;
}
.footer-logo{
width:200px;height:auto;display:block;
margin-bottom:24px; /* ロゴ下の余白 */
}
.footer-links{
display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
row-gap:8px;
}
.footer-links a{
display:inline-flex;align-items:center;
padding:1px 18px;
color:#cfdbf3;font-size:13.5px;font-weight:600;letter-spacing:.04em;
transition:color .15s;
}
.footer-links a + a{border-left:1px solid rgba(255,255,255,.22)}
.footer-copyright{
text-align:center;
color:#9fb1d4;
font-size:13px;font-weight:500;letter-spacing:.06em;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.10);
}
/* ===== Mobile fixed CTA bar (mobile only) ===== */
.mobile-fixed-cta{
display:none;
position:fixed;
left:0;right:0;bottom:0;
z-index:100;
background:#fff;
border-top:1px solid #e3e8f1;
box-shadow:0 -6px 18px rgba(6,22,56,.10);
padding:10px 12px calc(10px + env(safe-area-inset-bottom));
gap:8px;
}
.mfc-btn{
display:flex;align-items:center;justify-content:center;gap:8px;
height:56px;
border-radius:10px;
font-size:13px;font-weight:900;letter-spacing:.04em;
text-align:center;
line-height:1.3;
text-decoration:none;
}
.mfc-btn.primary{
flex:1.4;
background:linear-gradient(180deg,#FB8B3A 0%,var(--orange) 60%,#E25A0E 100%);
color:#fff;
box-shadow:0 6px 14px rgba(242,107,31,.30);
}
.mfc-btn.primary .ic{width:22px;height:22px;flex-shrink:0}
.mfc-btn.primary .text{display:flex;flex-direction:column;gap:1px;line-height:1.2;text-align:left}
.mfc-btn.primary .text .lg{font-size:14px;font-weight:900}
.mfc-btn.primary .text .sm{font-size:10px;font-weight:700;color:#fff}
.mfc-btn.secondary{
flex:1;
background:#fff;color:var(--brand);
border:2px solid var(--brand);
box-shadow:0 6px 14px rgba(0,75,214,.12);
}
.mfc-btn.secondary .ic{width:22px;height:22px;flex-shrink:0}
@media (max-width: 768px){
.mobile-fixed-cta{display:flex}
body{padding-bottom:84px}
.voice-card{padding:40px 24px 26px}
/* 価格カードの見出しは縦並びにせず2カラムを維持し、金額画像を小さくしてバランスを取る */
.price-headline{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(8px,2vw,14px)}
.price-figure-num{width:clamp(120px,92%,240px)}
}
/* Responsive: keep at design fidelity, scale down gracefully */
@media (max-width: 1280px){
.hero-inner{padding:48px 24px 32px;gap:16px}
.main-copy img{max-width:680px}
/* FV: フィーチャーカードはアイコン上＋テキスト下＋中央寄せ（横並びだと折り返すため） */
.feature-pills{gap:10px}
.feature-card{flex-direction:column;gap:6px;padding:12px 8px;text-align:center}
.feature-card-text{align-items:center;text-align:center}
.feature-card-sub{font-size:13px}
.feature-card-main{font-size:16px}
/* FV: サブコピーを縮小して3行化を防ぐ */
.sub-copy{font-size:16px;line-height:1.7;margin-bottom:24px}
/* FV: CTAボタンを縮小して2段化を防ぐ */
.hero-cta{gap:12px}
.hero-cta .btn{height:56px;padding:0 18px;font-size:15px}
.hero-cta .btn svg{width:18px;height:18px}
.nav{gap:24px}
.nav a{font-size:14px}
/* ヘッダーボタンを一段コンパクトに（折り返す前に縮小タイミングを早める） */
.header-inner{gap:24px}
.header-cta{gap:10px}
.header-cta .btn{height:48px;padding:0 16px;font-size:14px;gap:8px}
.header-cta .btn svg{width:18px;height:18px}
.section{padding:50px 24px 40px}
.section-title{font-size:40px}
.pain .section-title .brush{height:108px}
.solution-h2{font-size:38px}
.solution-h2 .brush{height:90px}
.ba-title{font-size:36px}
.ba-title .brush{height:104px}
.brush-heading{font-size:36px}
.brush-heading .brush{height:80px}
.closing-line{font-size:24px}
.closing-line .brush{height:84px}
.solution-closing .line1{font-size:22px}
.solution-closing .line1 .brush{height:102px}
.reasons,.curriculum,.cases{padding:40px 24px 40px}
.voices,.comparison,.pricing{padding:96px 24px 80px}
.flow,.faq,.final-cta{padding:40px 24px 40px}
.contact{padding:96px 24px 48px}
.contact-title img{max-width:780px}
.contact-panel{padding:28px 24px 32px;grid-template-columns:240px 1fr;gap:24px}
.field-row{grid-template-columns:140px 1fr;gap:14px}
.flow-title img{max-width:680px}
.faq-title img{max-width:480px}
.fc-title img{max-width:780px}
.fc-cta{font-size:18px;height:78px;gap:12px}
.fc-cta .fc-cta-ic{width:26px;height:26px}
.fc-reassurance{gap:28px}
.voices-title img{max-width:680px}
.comp-title img{max-width:640px}
.pricing-bottom-title .brush{height:70px}
.reasons-title img,.cur-title img{max-width:720px}
.cases-title img{max-width:640px}
.reason-card h3{font-size:21px}
.cta-primary-lg{font-size:19px;height:70px;min-width:420px;padding:0 44px}
}
/* ============================================================
ヘッダーをハンバーガーメニューに切り替え（≤1140px）
PCナビ＋CTAボタンが窮屈になる前に、早めにハンバーガー化する。
ドロワーのデザインは WP（wp-min）ヘッダーのメニューに準拠。
============================================================ */
@media (max-width: 1140px){
.header-inner{padding:0 20px;gap:16px}
.nav{display:none}
/* デスクトップ用CTAボタンを隠してハンバーガーに切り替え（窮屈な2ボタンを解消） */
.header-cta{display:none}
.hamburger{display:flex}
.nav-drawer{
display:flex;flex-direction:column;
position:fixed;top:0;right:0;
width:360px;max-width:86vw;
height:100vh;height:100dvh;
background:#fff;
box-shadow:-4px 0 24px rgba(6,22,56,.16);
transform:translateX(100%);
transition:transform .3s ease;
z-index:20;
overflow-y:auto;
}
.nav-drawer.active{transform:translateX(0)}
.nav-drawer-header{
display:flex;align-items:center;gap:10px;
padding:18px 52px 18px 20px;
border-bottom:1px solid var(--line);
}
.nav-drawer-logo{height:46px;width:auto;flex-shrink:0}
.nav-drawer-subtext{
font-size:11px;line-height:1.5;color:var(--ink);
font-weight:600;letter-spacing:.02em;
}
.nav-drawer-list{list-style:none;width:100%}
.nav-drawer-list li{width:100%}
.nav-drawer-list li a{
display:flex;justify-content:space-between;align-items:center;
width:100%;padding:16px 20px;
font-size:15px;font-weight:700;color:var(--ink);
border-bottom:1px solid #f0f0f0;
transition:background .2s ease;
}
.nav-drawer-list li a:hover{background:var(--soft)}
.drawer-chevron{width:9px;height:14px;flex-shrink:0;color:#c2cad8;transition:color .2s ease}
.nav-drawer-list li a:hover .drawer-chevron{color:var(--orange)}
.nav-drawer-cta{
display:flex;flex-direction:column;gap:12px;
padding:22px 20px calc(22px + env(safe-area-inset-bottom));
}
.nav-drawer-cta .btn{width:100%;height:52px;font-size:15px}
.nav-overlay{
display:block;position:fixed;inset:0;
background:rgba(6,22,56,.5);
z-index:10;
opacity:0;visibility:hidden;
transition:opacity .3s ease, visibility .3s ease;
}
.nav-overlay.active{opacity:1;visibility:visible}
}
@media (max-width: 1024px){
.reason-cards{grid-template-columns:1fr;gap:48px;max-width:520px;margin:0 auto}
.learn-grid{grid-template-columns:1fr 1fr;gap:18px}
.voice-cards{grid-template-columns:1fr;max-width:560px;margin:0 auto;gap:20px}
.comp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* min-width は「各セルが1行で収まる幅」以上にする。これより狭いと、
table-layout:auto の列配分で一部の列が痩せ、keep-all でも「〜」等の
記号位置で折り返してしまうため、実測値(760px)を最小幅にする。 */
.comp-table{font-size:14px;min-width:760px}
.comp-table thead th,.comp-table tbody td{padding:14px 12px}
.comp-table tbody td.label-col{padding-left:14px;width:140px}
.flow-steps{grid-template-columns:1fr 1fr;gap:48px 20px}
.flow-arrow{display:none}
.faq-grid{grid-template-columns:1fr;gap:14px;max-width:640px;margin:0 auto}
.fc-quote-row{grid-template-columns:1fr;gap:24px}
.fc-quote{padding:24px 24px 200px}
.fc-laptop{width:240px;right:50%;transform:translateX(50%);bottom:14px}
.fc-ctas{grid-template-columns:1fr;gap:14px}
.fc-reassurance{gap:18px}
.fc-r-item{font-size:13px}
.fc-r-item img{width:20px;height:20px}
.contact-tab{font-size:16px;height:56px}
.contact-panel{grid-template-columns:1fr;gap:24px;padding:24px 18px}
.fc-form-block{max-width:100%}
.assurance-row{grid-template-columns:repeat(3,1fr)}
.field-row{grid-template-columns:1fr;gap:8px}
.field-label{padding-left:2px}
.doc-ref{grid-template-columns:1fr;gap:14px}
.doc-ref-fields{grid-template-columns:1fr 1fr}
.footer{padding:40px 24px 20px}
.footer-main{padding-bottom:16px}
.footer-logo{width:172px;margin-bottom:18px}
/* フッターのポリシー/規約リンクは縦並びにせず横並びを維持（base のまま）。スマホ幅での縮小は ≤640 で対応 */
.footer-copyright{padding-top:14px;font-size:12px}
.cur-grid{grid-template-columns:1fr;gap:24px}
.tools-panel-wrap{padding-top:0;padding-right:0}
/* 画像（ノートPC＋スマホ）はブロックに重ねたまま、常に右端へ寄せる */
.cur-visual{position:absolute;inset:0;display:block}
.cur-laptop{top:8px;bottom:auto;right:0;left:auto;transform:none;width:230px}
.cur-phone{top:auto;bottom:8px;right:-8px;left:auto;transform:none;width:160px}
.case-cards{grid-template-columns:1fr;gap:24px;max-width:520px;margin:0 auto}
/* CTAは画面幅いっぱいに広げず、いい感じのサイズで頭打ちにする（狭い端末では収まるよう100%まで縮小可） */
.cta-primary-lg{min-width:0;width:100%;max-width:420px;font-size:18px;padding:0 24px;height:64px}
/* ============================================================
★ 縦並び（≤1024px）：ヒーローを WP-Min スマホ版と同じ
「全面背景画像＋テキスト重ね」レイアウトに（option B）
※ 元に戻す場合はこの .hero 関連ブロックを削除し、
index.html の hero-visual も従来の ![]()
表示に戻す
============================================================ */
.hero-bg{
background-image:
linear-gradient(to bottom,
rgba(255,255,255,.88) 0%,
rgba(255,255,255,.50) 26%,
rgba(255,255,255,0) 52%),
url('../images/lp/hero-mobile.webp');
background-size:cover, cover;
background-position:center top, center top;
background-repeat:no-repeat, no-repeat;
}
/* 右側ビジュアルは非表示（背景画像に集約） */
.hero-visual{display:none}
/* スマホ（背景切替時）ではヒーローのCTAは非表示（下部固定CTAに集約） */
.hero-cta{display:none}
.hero-inner{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
.hero-left{display:flex;flex-direction:column;height:100%;min-width:0}
/* 特徴ピルは下部へ押し下げ（背景写真の人物を上側に見せる） */
.feature-pills{margin-top:auto}
/* サブコピーは背景写真の上でも読めるよう、半透明＋ぼかしパネルを敷く */
.sub-copy{
display:inline-block;
/* .hero-left は flex(column) のため、子は既定で全幅にstretchされる。
align-self:flex-start でテキスト幅ぶんだけにパネルを縮める */
align-self:flex-start;
background:rgba(255,255,255,.55);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
border-radius:10px;
padding:10px 14px;
}
.pain-cards{grid-template-columns:repeat(2,1fr)}
/* レスポンシブ改行：タブレット以下で「特定のAIだけを教える研修ではありません。」の後を改行 */
.br-tablet{display:inline}
/* タイトル横のチャット/ダッシュボード画像は縦並びにせず、画像を小さくして横並びを維持 */
.solution-top{grid-template-columns:minmax(0,1fr) 280px;gap:28px}
.compare{grid-template-columns:1fr;gap:24px;padding:24px}
.compare-arrow{transform:rotate(90deg);margin:0 auto}
/* タブレット以下：項目名を独立カラムにし、Before/After は値だけにする。
左端のタグ列（業務時間/コスト）は非表示にして4列構成にする */
.ba-table{grid-template-columns:max-content 1fr 28px 1fr}
.ba-tag,.ba-corner-tag,.ba-tag-head{display:none}
.ba-item-head{display:block;background:#fff}
.ba-item{display:flex;padding:14px 12px;font-size:14px}
.ba-cell .ba-row-head{display:none}
.ba-cell{padding:14px 12px;font-size:14px;justify-content:center}
.ba-cell .v{font-size:18px}
.ba-cell.after-cell .v{font-size:20px}
}
@media (max-width: 640px){
/* スマホ：各セクションタイトルのサブテキストを14pxに統一。
小さくなった分、各
位置を見直し（いずれも文・句の区切りで妥当と確認）、
text-wrap:balance で行長を自動で均し、短い余り行（孤立行）を防ぐ */
.section-subtitle,.solution-sub,.learn-sub,.ba-sub,.reasons-sub,.cur-sub,
.cases-sub,.voices-sub,.comp-sub,.flow-sub,.faq-sub,.fc-sub{
font-size:14px;line-height:1.9;text-wrap:balance; margin-bottom: 40px;
}
.cases-sub{margin-bottom:40px}
/* スマホ：セクションの左右paddingを15pxに（≤1280pxの24pxを上書き） */
.section{padding-left:15px;padding-right:15px}
.voices,.comparison,.pricing{padding:40px 15px}
/* スマホ：価格分解ブロックは縦並びにせず非表示にし、金額画像を中央で少し大きく */
.price-decomp{display:none}
.price-headline{grid-template-columns:1fr}
.price-figure-num{width:clamp(200px,68%,320px)}
/* スマホ：スマホのモックは非表示。ノートPCのみ小さくしてブロック右下へ */
.cur-laptop{top:auto;bottom:8px;right:2px;left:auto;width:230px;transform:scale(.42);transform-origin:bottom right}
.cur-phone{display:none}
/* スマホ：バナーの上余白を詰める */
.cur-banner{margin-top:30px}
.cur-banner img{width:120%}
/* スマホ：タイムテーブルは時刻バッジを各ブロックの左上に小さく置き、
メインタイトル(tt-label)を全幅に広げて1行に収まりやすくする。
grid-template-areas で「時刻｜（余白）｜アイコン」を上段、タイトルを下段全幅に再配置 */
.tt-row{
grid-template-columns:auto 1fr auto;
grid-template-areas:
"time . icon"
"label label label";
gap:6px 10px;
padding:13px 4px;
}
.tt-time{
grid-area:time;justify-self:start;
height:26px;min-width:0;padding:0 10px;font-size:14px;
}
.tt-icon{grid-area:icon;justify-self:end}
.tt-label{grid-area:label;font-size:15px;letter-spacing:.02em;gap:10px}
.tt-label::before{width:6px;height:6px}
/* スマホ：reasons サブコピーを「…作れる人」と」の後で改行 */
.br-sp{display:inline}
/* スマホ：カードのサブテキストはbrを消して自然改行にする */
.br-pc{display:none}
.assurance-row{grid-template-columns:1fr;gap:10px}
.assurance-bar{padding:25px 16px 25px}
.assurance-bar .assurance-heading img{height:48px}
.price-cta{padding-left:clamp(20px,6vw,40px);padding-right:clamp(20px,6vw,40px)}
.pricing-hero{gap:0}
.header-inner{height:64px}
.logo img{height:44px}
.logo-subtext{font-size:11px}
.hero-inner{padding:32px 16px 24px}
.eyebrow img{height:44px}
/* スマホ：eyebrowの下余白を20pxに（PCの32pxを上書き） */
.eyebrow{margin-bottom:20px}
/* スマホのMV：メインテキスト画像の下の余白 */
.main-copy{margin-bottom:40px}
.sub-copy{font-size:16px}
/* メインビジュアル：スマホは簡略文に切り替え */
.sub-copy-pc{display:none}
.sub-copy-sp{display:inline}
.feature-pills{gap:8px}
.feature-card{flex-direction:column;gap:6px;padding:12px 6px}
.feature-card-icon{width:36px;height:36px}
.feature-card-text{align-items:center;text-align:center}
.feature-card-sub{font-size:13px}
.feature-card-main{font-size:15px}
.hero-cta .btn{height:56px;font-size:16px;padding:0 22px;width:100%}
.learn-grid{grid-template-columns:1fr;gap:16px;max-width:420px;margin:0 auto}
.learn-card{min-height:0;padding:32px 26px 26px}
/* スマホ：ブラシ見出しの文字は30pxに抑え、ブラシ画像を主役として大きめに見せる */
.brush-heading{font-size:27px;gap:4px 0}
.brush-heading .brush{height:48px}
/* スマホ：ブラシ見出し画像を大きめに表示（共通の height:48px を上書き） */
.reasons-title .brush{height:72px} /* 3つの理由 */
/* リアルなタイムテーブルは横に長く、height:70px だと画面幅を超えて両端が見切れるため、
見切れない最大サイズ（画面幅94%・高さは比率なり＝約55px）に収める */
.cur-title .brush{height:auto;width:94%} /* リアルなタイムテーブル（横長のため幅基準） */
.cases-title .brush{height:75px} /* リアルな成果 */
.voices-title .brush{height:80px} /* 率直な感想 */
.comp-title .brush{height:70px} /* どう違うのか */
.flow-title .brush{height:70px} /* サポート */
.faq-title .brush{height:80px} /* ご質問 */
/* 「使い方」「業務ツール制作」ブラシはスマホで小さく見えるため大きめに（横長の業務ツール制作が画面幅を超えない上限） */
.learn-title .brush{height:55px}
/* 「社内で試せる人材」ブラシは横長(比5.6)のため、スマホは幅基準で画面内に収める */
.pricing-bottom-title .brush{height:auto;width:min(420px,100%)}
/* スマホ：価格下ブロックの上余白を40pxに（PCの80pxを上書き） */
.pricing-bottom{margin-top:40px}
.learn-card-title{font-size:21px}
/* 「こんな[課題]ありませんか？」が横幅から飛び出すため、ありませんか？を改行 */
.pain .section-title{flex-wrap:wrap;font-size:36px}
.pain .section-title .brush{height:90px}
.pain-break{display:block;flex-basis:100%;height:0}
/* スマホ：課題カードは2列で窮屈なため、余白とフォントを詰め、改行位置を自然に整える。
gap は 行間15px / 列間10px（左右は詰め気味のまま、上下だけ少し広げる） */
.pain-cards{gap:15px 10px; margin-top: 10px;}
.pain-card{padding:24px 13px 20px}
.pain-card h3{font-size:16px;line-height:1.45}
.pain-card h3 br{display:none} /* 01のPC用改行は無効化し、自然な折返しに任せる */
.pain-card p{font-size:14px;line-height:1.65}
.solution-h2{font-size:27px}
.solution-h2 .brush{height:68px}
/* スマホ付近では画像を非表示にし、タイトル・サブタイトルを中央揃え */
.solution-visual{display:none}
.solution-top{grid-template-columns:1fr;text-align:center; margin-bottom: 0px;}
.compare{padding:0}
/* スマホ：比較カードの左右paddingを15pxに（PCの32pxを上書き） */
.compare-col{padding-left:15px;padding-right:15px}
/* スマホ：比較行の左右paddingを0・gapを15pxに（PCの4px/18pxを上書き） */
.compare-row{padding-left:0;padding-right:0;gap:15px}
/* スマホ：フローステップは2カラムをやめて1カラム（4行）に。gapは行間25px */
.flow-steps{grid-template-columns:1fr;gap:25px}
/* スマホ：フローステップの左右paddingを15pxに（PCの22pxを上書き） */
.flow-step{padding-left:15px;padding-right:15px}
/* スマホ：フローステップの本文フォントを14pxに（PCの15pxを上書き） */
.flow-step p{font-size:14px}
/* スマホ：FAQ回答の本文フォントを14pxに（PCの16pxを上書き） */
.faq-a .a-text{font-size:14px}
/* スマホ：FAQ質問のフォントを14pxに（PCの16pxを上書き） */
.faq-q .q-text{font-size:14px}
/* スマホ：FAQ下の注記は margin-top20px / font13px に */
.faq-bottom-note{margin-top:20px;font-size:13px}
/* スマホ：問い合わせタブのアイコンとテキストの間隔を5pxに詰める */
.contact-tab{gap:5px}
/* スマホ：送信ボタンの文言が改行されないよう、文字とアイコン間隔・文字サイズを詰め、
矢印ぶんの右paddingも縮めて1行に収める */
.submit-cta{font-size:17px;gap:8px;white-space:nowrap}
.submit-cta.has-arrow{padding-left:38px;padding-right:38px}
.submit-cta.has-arrow::after{right:18px}
.submit-cta::before{left:16px;width:22px;height:22px}
.reason-card p{font-size:15px}
.reasons-cta-wrap{margin-top:40px}
.ba-title{font-size:27px}
.ba-title .brush{height:70px}
/* スマホ：「必要なのは」で改行し、画像＋「こと」は同じ行に保つ。
画像は「こと」と同居できる最大幅に制限（幅基準なので歪み・はみ出しなし） */
.closing-line > span:first-child{flex-basis:100%}
.closing-line .brush{width:min(300px,100%);height:auto}
.solution-closing .line1 .brush{height:72px}
/* スマホ：比較表は横スクロール可能に（列が詰まりすぎないよう最小幅を確保） */
.ba-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ba-table{min-width:500px; margin-top: 0;}
/* スマホ：フッターのポリシー/規約リンクは縦並びにせず、文字を小さくして横一列を保つ */
.footer-links{column-gap:0;row-gap:6px}
.footer-links a{font-size:10px;padding:1px 5px;letter-spacing:0}
}
/* 案内は「実際に横スクロールが発生する幅」でのみ表示する。
表は min-width:500px。左右余白(計≈48px)を含め、ビューポート≈548px未満で
はみ出してスクロール可能になるため、その境界に合わせて ≤544px で表示。 */
@media (max-width: 544px){
.ba-scroll-hint{display:flex}
/* ボタン下の3バッジは、この幅から2行に折り返し始めるため非表示にする */
.price-guarantees{display:none}
}
/* 他社比較表は min-width:760px（各行1行で表示）。左右余白(計≈50px)込みで
ビューポート≈810px未満ではみ出してスクロール可能になるため ≤808px で案内を表示。 */
@media (max-width: 808px){
.comp-scroll-hint{display:flex}
}
/* ==========================================================================
Contact Form 7 互換スタイル（リニューアル後のLPフォーム用）
・元の静的フォームは 構造だったが、
CF7は各入力を で包む（子孫セレクタなので
.field-input input / textarea の装飾はそのまま当たる）。
・同意チェックは [acceptance] を使用。元デザインの擬似チェック(.box)は
「input + .box」の隣接関係がCF7のマークアップで崩れて機能しないため、
CF7では実checkboxを表示してブランド色で整える。
========================================================================== */
/* CF7フォーム自体の余白をリセットしてパネル内に素直に展開 */
.contact-panel .wpcf7{margin:0}
.contact-panel .wpcf7 .wpcf7-form{margin:0}
/* 入力ラッパ（span）をブロック化して横幅100%に（input/textareaは既存ルールで装飾） */
.field-input .wpcf7-form-control-wrap{display:block;width:100%}
/* インラインのバリデーションエラー */
.field-input .wpcf7-not-valid{border-color:#e2474a !important}
.wpcf7-not-valid-tip{display:block;margin-top:6px;color:#e2474a;font-size:13px;line-height:1.6}
/* 送信後などの応答メッセージ枠 */
.contact-panel .wpcf7-response-output{margin:18px 0 0;padding:12px 16px;border-radius:10px;font-size:14px;line-height:1.7}
/* 送信中スピナー */
.wpcf7-spinner{margin:0 0 0 12px}
/* 同意チェックボックス（CF7 acceptance）：実checkboxを表示して整える */
.privacy-check .wpcf7-list-item{margin:0}
.privacy-check .wpcf7-acceptance{display:inline-flex;align-items:center}
.privacy-check .wpcf7-acceptance input[type="checkbox"]{
position:static;opacity:1;pointer-events:auto;
width:20px;height:20px;margin:0 10px 0 0;flex-shrink:0;
accent-color:var(--brand,#004BD6);
}