/* =====================================================
   共通トークン（ドローンLP／インプルAX LP で同一に保つ）
   色・フォント・文字サイズ・角丸・ボタン寸法・余白の基準値。
   どちらかを変えるときは、もう一方の style.css も同じ値に直す。
   ===================================================== */
:root {
  /* 色 */
  --c-lime: #95DE00;        /* コーポレートグリーン（ボタン・差し色） */
  --c-lime-dark: #4A7300;   /* 濃い緑の文字。白や薄い背景の上の小さな文字（ラベル・リンク・強調）はライムではなくこの色を使う（白地で 5.6:1、薄い緑面 #E7F3DA でも 4.87:1） */
  --c-lime-hover: #A5E72C;  /* 緑ボタンのホバー */
  --c-ink: #101010;         /* 黒（見出し・ボタン文字・暗い背景） */
  --c-text: #33383F;        /* 本文 */
  --c-muted: #5F666F;       /* 補足・注記 */
  --c-border: #E3E8EC;      /* 罫線・カードの枠 */
  --c-soft: #F4FAEF;        /* 薄い緑の面 */
  --c-soft-2: #E7F3DA;      /* 薄い緑のアクセント */
  --c-gray: #F5F7F8;        /* 薄いグレーの面 */
  --c-bg: #FFFFFF;
  /* フォント */
  --font-body: 'Noto Sans JP', sans-serif;
  --font-accent: 'Poppins', 'Noto Sans JP', sans-serif;   /* 英字ラベル・数字 */
  /* 文字サイズ（PC） */
  --fs-h1: 72px;
  --fs-h2: 38px;
  --fs-h3: 22px;
  --fs-h3-sm: 19px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-body-sm: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 14px;
  /* 文字サイズ（スマホ：700px以下） */
  --fs-h1-sp: 36px;
  --fs-h2-sp: 26px;
  --fs-h3-sp: 19px;
  /* 角丸 */
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-card-lg: 16px;
  --radius-panel: 20px;
  --radius-input: 8px;
  /* ボタン */
  --btn-h: 60px;
  --btn-h-lg: 68px;
  --btn-h-sm: 44px;
  --btn-w: 260px;
  --btn-w-lg: 300px;
  --btn-pad-x: 32px;
  --btn-fs: 16px;
  /* レイアウト */
  --container: 1156px;
  --gutter: 24px;
  --section-y: 110px;
  --section-y-sp: 64px;
  --header-w: 1220px;
}

/* =====================================================
   インプルAX ｜ バックオフィス LP
   ベースのスタイルと、画面幅ごとの調整（レスポンシブ）

   注意：見た目の指定はすべてこのファイルにあります（index.html に
   style="..." はありません）。繰り返し使う指定は「共通クラス」、
   1か所だけの指定は「残りの style をクラス化」のブロックにあります。
   下の @media の指定は、小さい画面で大きさや列を切り替えるもので、
   共通クラスより後ろに書いてあるため !important なしで優先されます。
   全体にかける指定（p の文字サイズ、section の余白）は .page（ページの
   外枠）を起点にして、クラスより優先されるようにしています。
   !important は [hidden] だけに使っています。
   ===================================================== */
.hd-link { color:var(--c-bg);text-decoration:none;font-size:15px;font-weight:700;padding:12px 4px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center }
.svg-block { display:block;font-family:var(--font-body) }
.highlight { color: var(--c-lime); padding: 0 .18em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone }
.sec-head { display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center }
.eyebrow { font-family:var(--font-accent);font-size:14px;font-weight:600;letter-spacing:.18em;color:var(--c-lime-dark) }
.sec-title { margin:0;font-size:38px;font-weight:900;line-height:1.5;color:var(--c-ink) }
.problem-card { background:var(--c-soft);border-radius:16px;padding:28px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;text-align:center }
.img-frame { position:relative;aspect-ratio:16/10;width:100%;border-radius:10px;border:1px solid #D9DFE4;overflow:hidden;background:#F5F7F8;box-sizing:border-box }
.pill-lime { display:inline-block;align-self:flex-start;background:var(--c-lime);color:var(--c-ink);border-radius:999px;padding:3px 14px;font-size:13px;font-weight:700 }
.problem-text { margin:0;font-size:15px;line-height:1.9;color:var(--c-text);word-break:normal }
.caption-bold { margin:0;font-size:13px;font-weight:700;color:var(--c-muted) }
.chev-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative }
.chev-first { position:relative;z-index:5;background:#3A3F4A;color:var(--c-bg);border-radius:0 32px 32px 0;min-height:64px;padding:8px 30px 8px 16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:14px;font-weight:700;line-height:1.5 }
.chev { position:relative;background:#3A3F4A;color:var(--c-bg);border-radius:0 32px 32px 0;margin-left:-30px;min-height:64px;padding:8px 30px 8px 46px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:14px;font-weight:700;line-height:1.5 }
.container-40 { width:1156px;max-width:calc(100% - 48px);margin:0 auto;display:flex;flex-direction:column;gap:40px }
.eyebrow-alt { font-family:var(--font-accent);font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--c-lime-dark) }
.container-28 { width:1156px;max-width:calc(100% - 48px);margin:0 auto;display:flex;flex-direction:column;gap:28px }
.band-arrow { position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:18px;z-index:2 }
.grid-3 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch }
.row-c14 { display:flex;align-items:center;gap:14px }
.icon { flex:0 0 auto;display:block }
.step-label-sm { font-family:var(--font-accent);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--c-lime-dark) }
.p-15 { margin:0;font-size:15px;line-height:1.9;color:var(--c-text);text-wrap:pretty;word-break:auto-phrase }
.row-top { display:flex;align-items:flex-start;gap:12px }
.section-white { scroll-margin-top:90px;background:var(--c-bg);padding:100px 0;color:var(--c-ink) }
.flow-text { margin:0;font-size:13px;line-height:1.7;color:var(--c-muted);text-wrap:pretty;word-break:auto-phrase }
.btn-outline { background:transparent;color:var(--c-ink);border:1px solid var(--c-ink);border-radius:999px;min-height:60px;padding:0 32px;width:260px;font-size:16px;font-weight:700;font-family:var(--font-accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;box-sizing:border-box }
.container-32 { width:1156px;max-width:calc(100% - 48px);margin:0 auto;display:flex;flex-direction:column;gap:32px }
.note-li { display:flex;gap:6px;font-size:13.5px;line-height:1.8;color:var(--c-muted) }
.inline-block { display:inline-block }
.grid-2 { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch }
.support-card { background:var(--c-bg);border:1px solid var(--c-border);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box }
.pill-soft { display:inline-block;align-self:flex-start;background:var(--c-soft);color:var(--c-ink);border:1px solid var(--c-border);border-radius:999px;padding:3px 14px;font-size:13px;font-weight:700 }
.support-text { margin:0;font-size:16px;line-height:1.9;color:var(--c-text);text-wrap:pretty;word-break:auto-phrase }
.support-list { margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px }
.support-list li { display:flex;flex-direction:column;gap:2px;padding-left:16px;position:relative;font-size:14px;line-height:1.8;color:var(--c-text) }
.support-list li::before { content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--c-lime) }
.support-list b { font-weight:700;color:var(--c-ink) }
.support-note { margin:auto 0 0;font-size:13px;line-height:1.8;color:var(--c-muted) }
.option-price { background:#FFFFFF;border:1px solid #E3E8EC;border-radius:20px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap }
.option-price-name { font-size:17px;font-weight:700;color:var(--c-ink) }
.option-price-sub { margin-top:2px;font-size:13px;color:var(--c-muted) }
.option-price-amount { font-family:var(--font-accent);font-size:26px;font-weight:700;color:var(--c-ink);white-space:nowrap }
.option-price-amount span { font-family:var(--font-body);font-size:14px;font-weight:700;margin-left:2px }
.faq-item { background:var(--c-bg);border:1px solid var(--c-border);border-radius:14px;padding:26px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px }
.faq-q-badge { flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--c-lime);display:inline-flex;align-items:center;justify-content:center }
.faq-q { margin:0;font-size:17px;font-weight:900;color:var(--c-ink);line-height:1.6;padding-top:3px;text-wrap:balance;word-break:auto-phrase }
.faq-a-badge { flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--c-soft-2);display:inline-flex;align-items:center;justify-content:center }
.faq-a { margin:0;font-size:15px;line-height:1.9;color:var(--c-text);padding-top:2px;text-wrap:pretty;word-break:auto-phrase }
.faq-a-row { align-items:center }
.faq-a-row .faq-a { padding-top:0 }
.form-label { display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700;color:var(--c-ink) }
.form-required { font-size:12px;font-weight:700;color:var(--c-lime-dark);margin-left:8px }
.form-input { min-height:52px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-bg);color:var(--c-ink);padding:0 14px;font-size:16px;font-family:inherit }
.form-optional { font-size:12px;font-weight:400;color:var(--c-muted);margin-left:8px }
/* 入力チェック（formrun.js）のエラー表示。.form-error は formrun.js がエラーのときだけ表示する */
.form-error { font-size:12px;font-weight:700;color:#B3261E }
.form-input.formrun-has-error, .form-textarea.formrun-has-error { border-color:#B3261E }
.ft-list { margin:0 }
.ft-row { display:flex;flex-wrap:wrap;gap:6px 28px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12) }
.ft-label { margin:0;flex:0 0 200px;font-size:13px;font-weight:700;color:var(--c-bg) }
.ft-value { margin:0;flex:1 1 360px;font-size:13px;line-height:1.8;color:#A3A8B0 }

/* フッターの Copyright（p にしたため、スマホ幅の p の文字サイズ指定を打ち消す） */
.ft .ft-copy { font-size:12px } /* .page p { font-size:15px } より優先させる */

/* -----------------------------------------------------
   残りの style="..." をクラス化（1か所ずつの指定）。並びは index.html の出現順。
   ----------------------------------------------------- */
.page { background:#FFFFFF;font-family:'Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased }
.hd { position:sticky;top:0;z-index:100;background:#101010;min-height:80px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:12px max(40px, calc((100% - 1220px) / 2));box-sizing:border-box }
.hd-brand { flex:1 1 240px;display:flex;align-items:center }
.hd-logo { display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit }
.hd-logo-img { display:block;width:auto;height:40px }
.hd-logo-text { font-size:21px;font-weight:900;color:#FFFFFF;letter-spacing:.04em }
.hd-nav { flex:0 0 auto;display:flex;flex-wrap:wrap;gap:28px;justify-content:center }
.hd-actions { flex:1 1 240px;display:flex;gap:10px;justify-content:flex-end }
.hd-btn-white { background:#FFFFFF;color:#101010;border:1px solid #FFFFFF;border-radius:999px;min-height:44px;padding:0 22px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center }
.hd-btn-lime { background:#95DE00;color:#101010;border:1px solid #95DE00;border-radius:999px;min-height:44px;padding:0 22px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center }
.hero { position:relative;overflow:hidden;background:linear-gradient(180deg,#22262D 0%,#15181C 100%);padding:110px 0 80px;color:#FFFFFF }
.hero-bg { position:absolute;top:0;left:0;right:0;bottom:0;z-index:0 }
.hero-overlay { position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background:rgba(16,16,16,0) }
.hero-inner { position:relative;z-index:2;width:1156px;max-width:calc(100% - 48px);margin:0 auto;display:flex;flex-direction:column;gap:40px }
.hero-head { display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center }
.hero-sub { font-family:'Poppins','Noto Sans JP',sans-serif;font-size:15px;font-weight:600;letter-spacing:.08em;color:var(--c-lime) }
.hero-title { margin:0;font-size:72px;font-weight:900;line-height:1.35;color:#FFFFFF }
.hero-lead { margin:0;max-width:1040px;font-size:18px;line-height:1.9;color:#FFFFFF }
.hero-actions { display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:28px }
.btn-outline-lg { background:#FFFFFF;color:#101010;border:1px solid #FFFFFF;border-radius:999px;min-height:68px;padding:0 32px;width:300px;font-size:16px;font-weight:700;font-family:'Poppins','Noto Sans JP',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;box-sizing:border-box }
.btn-lime-lg { background:#95DE00;color:var(--c-ink);border:1px solid #95DE00;border-radius:999px;min-height:68px;padding:0 32px;width:300px;font-size:16px;font-weight:700;font-family:'Poppins','Noto Sans JP',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center }
.sec-problem { scroll-margin-top:90px;background:#FFFFFF;padding:110px 0 0;color:#101010 }
.problem-inner { width:1156px;max-width:calc(100% - 48px);margin:0 auto;display:flex;flex-direction:column;gap:0px }
.problem-grid-wrap { height:48px }
.problem-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:stretch }
.problem-spacer { height:88px }
.sec-strength { scroll-margin-top:90px;background:#101010;padding:72px 0 110px;color:#FFFFFF }
.strength-inner { width:1156px;max-width:calc(100% - 48px);margin:0 auto;display:flex;flex-direction:column;gap:64px }
.strength-head { display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center }
.eyebrow-lime { font-family:'Poppins','Noto Sans JP',sans-serif;font-size:14px;font-weight:600;letter-spacing:.18em;color:var(--c-lime) }
.strength-title { margin:0;font-size:38px;font-weight:900;line-height:1.5;color:#FFFFFF }
.strength-body { display:flex;flex-direction:column;gap:36px }
.strength-sub { margin:0;text-align:center;font-size:24px;font-weight:700;line-height:1.6;color:#FFFFFF }
.diagram { background:#FFFFFF;border-radius:24px;padding:32px 28px;overflow-x:auto }
.diagram-inner { min-width:780px;display:flex;flex-direction:column;gap:12px }
.diagram-title { text-align:center;font-size:18px;font-weight:900;color:#101010 }
.diagram-note { grid-column:1 / 5;background:var(--c-soft-2);clip-path:polygon(0 0,100% 0,100% 100%,22% 100%);height:72px;margin-top:4px;display:flex;align-items:center;justify-content:center;padding-left:22%;box-sizing:border-box;font-size:20px;font-weight:900;color:var(--c-ink) }
.chev-ai { grid-column:2 / 5;position:relative;z-index:1;background:var(--c-lime);color:var(--c-ink);border-radius:0 32px 32px 0;margin-left:-30px;min-height:64px;padding:8px 30px 8px 46px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:14px;font-weight:700;line-height:1.5 }
.chev-ai-sub { font-size:12px;font-weight:600;margin-top:2px;opacity:.85 }
.sec-case { background:#FFFFFF;padding:110px 0 90px;color:#101010 }
.case-head { display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center }
.case-title { margin:0;font-size:30px;font-weight:700;color:#101010 }
.case-lead { margin:0;font-size:16px;line-height:1.9;color:#33383F;text-wrap:pretty;word-break:auto-phrase;max-width:760px }
.case-note-p { margin:0;font-size:14px;line-height:1.9;color:#5F666F;text-wrap:pretty;word-break:auto-phrase }
.sec-curriculum { scroll-margin-top:90px;background:#FFFFFF;padding:40px 0 100px;color:#101010 }
.cur-lead { margin:0;text-align:center;font-size:18px;line-height:1.9;color:#33383F }
.band-grid-3 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px }
.band-light { position:relative;background:#E7F3DA;color:#101010;padding:14px 8px;text-align:center;font-size:15px;font-weight:700;border-radius:999px;white-space:nowrap }
.band-mid { position:relative;background:#C9E89A;color:#101010;padding:14px 8px;text-align:center;font-size:15px;font-weight:700;border-radius:999px;white-space:nowrap }
.band-lime { position:relative;background:#95DE00;color:#101010;padding:14px 8px;text-align:center;font-size:15px;font-weight:700;border-radius:999px;white-space:nowrap }
.cur-card-1 { background:#FFFFFF;border:1px solid #E3E8EC;border-radius:14px;padding:26px 24px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px }
.cur-card-2 { background:#FFFFFF;border:1px solid #E3E8EC;border-radius:14px;padding:26px 24px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px }
.cur-card-3 { background:#FFFFFF;border:1px solid #E3E8EC;border-radius:14px;padding:26px 24px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px }
.flow-timings { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px }
.flow-timing { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:22px 28px;background:#262626;border:1px solid var(--c-text);border-radius:var(--radius-card) }
.flow-timing span { font-size:14px;font-weight:700;color:#FFFFFF }
.flow-timing strong { font-size:34px;line-height:1.35;font-weight:700;color:var(--c-lime) }
.flow-timing small { font-size:12px;line-height:1.7;color:#C5C9C6 }
.flow-timing strong .flow-timing-plain { font-size:inherit;color:#FFFFFF }
.flow-actions { display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:8px }
.btn-lime-md { background:#95DE00;color:var(--c-ink);border:1px solid #95DE00;border-radius:999px;min-height:60px;padding:0 32px;width:260px;font-size:16px;font-weight:700;font-family:'Poppins','Noto Sans JP',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;box-sizing:border-box }
.price-card { background:#FFFFFF;border:1px solid #E3E8EC;border-radius:20px;padding:56px 40px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center }
.price-amount { font-family:'Poppins','Noto Sans JP',sans-serif;font-weight:700;font-size:112px;line-height:1.1;color:#101010 }
.price-unit { font-family:'Noto Sans JP',sans-serif;font-size:36px;margin-left:10px }
.price-cond { font-family:'Noto Sans JP',sans-serif;font-size:18px;font-weight:400;color:#5F666F;margin-left:12px }
.subsidy-card { background:#F4FAEF;border-radius:20px;padding:40px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center }
.subsidy-pill { display:inline-block;background:#FFFFFF;border:1px solid #E3E8EC;border-radius:999px;padding:4px 16px;font-size:13px;font-weight:700 }
.subsidy-text { font-size:15px;color:#33383F }
.subsidy-amount { font-family:'Poppins','Noto Sans JP',sans-serif;font-weight:700;font-size:80px;line-height:1.1;color:#101010 }
/* 料金・助成金の大きな数字：白地のライム文字は読みにくいため、黒い数字の下にライムの太い下線 */
.price-amount .highlight, .subsidy-amount .highlight { color:var(--c-ink);padding:0 .04em;border-radius:0;background:linear-gradient(transparent 62%, var(--c-lime) 62%, var(--c-lime) 92%, transparent 92%) }
.subsidy-unit { font-family:'Noto Sans JP',sans-serif;font-size:26px;margin-left:8px }
.subsidy-decimal { font-family:'Poppins','Noto Sans JP',sans-serif;font-size:36px;margin-left:0 }
.subsidy-badge { display:inline-block;background:#FFFFFF;border:1px solid #E3E8EC;border-radius:999px;padding:3px 14px;font-size:13px;font-weight:700 }
.note-list { margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px }
.excl-card { background:#F4FAEF;border:2px solid #95DE00;border-radius:16px;padding:24px 32px;display:flex;align-items:center;gap:16px }
.excl-icon { flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#95DE00;display:flex;align-items:center;justify-content:center }
.excl-text { margin:0;font-size:17px;line-height:1.8;color:#33383F }
.excl-title { display:block;font-weight:900;color:#101010 }
.option-lead { margin-top:-28px }
@media (max-width:700px) {
  .excl-card { align-items:flex-start;gap:12px;padding:20px }
  .excl-icon { width:36px;height:36px }
  .excl-text { font-size:15px }
}
.support-lead { margin:0;font-size:17px;line-height:1.9;color:#33383F;text-wrap:pretty;word-break:auto-phrase }
.faq-cta { background:#F4FAEF;border-radius:14px;padding:26px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px }
.faq-cta-text { font-size:17px;font-weight:900;color:#101010;line-height:1.6 }
.btn-lime-sm { background:#95DE00;color:var(--c-ink);border:1px solid #95DE00;border-radius:999px;min-height:56px;padding:0 32px;width:240px;font-size:16px;font-weight:700;font-family:'Poppins','Noto Sans JP',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;box-sizing:border-box }
.sec-contact { scroll-margin-top:90px;background:#FFFFFF;border-top:1px solid #E3E8EC;padding:110px 0 120px;color:#101010 }
.contact-inner { display:flex;flex-direction:column;align-items:center;gap:40px }
.form-wrap { width:100%;display:flex;justify-content:center }
.form-panel { background:#FFFFFF;border:1px solid #E3E8EC;border-radius:16px;padding:44px;box-sizing:border-box;width:100%;max-width:760px;display:flex;flex-direction:column;gap:20px }
.form-textarea { height:110px;box-sizing:border-box;border:1px solid #E3E8EC;border-radius:8px;background:#FFFFFF;color:#101010;padding:14px;font-size:16px;font-family:inherit;resize:vertical }
.form-submit-wrap { display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px }
.btn-lime-xl { background:#95DE00;color:var(--c-ink);border:1px solid #95DE00;border-radius:999px;min-height:64px;padding:0 32px;width:320px;font-size:16px;font-weight:700;font-family:'Poppins','Noto Sans JP',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px }
.form-note { margin:0;font-size:13px;line-height:1.9;color:#5F666F;text-wrap:pretty;word-break:auto-phrase;text-align:center }
.form-note a { color:var(--c-lime-dark);text-decoration:underline;text-underline-offset:3px }
.download-card { scroll-margin-top:90px;width:100%;max-width:760px;margin:0 auto;box-sizing:border-box;background:#F4FAEF;border-radius:20px;padding:36px 40px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center }
.download-title { margin:0;font-size:26px;font-weight:900;color:#101010 }
.download-actions { margin-top:8px;display:flex;justify-content:center }
.ft { background:#101010;border-top:1px solid rgba(255,255,255,.12);padding:72px 0 40px }
.ft-brand { display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px }
.ft-brand-sub { font-size:13px;color:#A3A8B0 }
.ft-link { color:inherit;text-decoration:underline }
.ft-links { margin-top:28px;font-size:13px;line-height:1.8;color:#FFFFFF }
.ft-links .ft-link { text-underline-offset:3px }
.ft-copy { margin:0;font-size:12px;color:#A3A8B0;font-family:'Poppins','Noto Sans JP',sans-serif }

@media の指定は、クラス名、または style="..." の文字列
   （例：font-size:72px）を目印に、小さい画面で大きさや列を
   切り替えています。index.html の style の値や共通クラスの値を
   書き換えるときは、ここの指定も、同じ値に合わせて直してください。
   ===================================================== */

/* hidden 属性（切り替えの表示・非表示）を、確実に効かせる */
[hidden] { display: none !important; }

/* ベース・日本語の折り返し・レスポンシブ（元のスタイル） */
html { scroll-behavior:smooth }
body { margin:0;background:#FFFFFF }
a { color:inherit }
@media (max-width:1100px) {
  .hero-title { font-size:52px }
  /* (style属性が無くなったため削除) */
  .strength-title { font-size:30px }
  /* (style属性が無くなったため削除) */
  .sec-title { font-size:30px }
}
@media (max-width:800px) {
  /* (style属性が無くなったため削除) */
  /* (style属性が無くなったため削除) */
  .grid-2 { grid-template-columns:1fr }
  .problem-grid { grid-template-columns:1fr }
  header .hd-brand,
  header .hd-actions { flex:1 1 100%;justify-content:center }
  .hd .hd-nav { gap:18px;justify-content:center }
}
@media (max-width:700px) {
  .sec-title br { display:none }
  .flow-timings { grid-template-columns:1fr;gap:12px }
  .flow-timing { padding:18px 20px }
  .flow-timing strong { font-size:28px }
  .hero-title { font-size:36px }
  /* (style属性が無くなったため削除) */
  .strength-title { font-size:26px }
  .strength-sub { font-size:20px }
  .strength-sub br { display:none }
  /* (style属性が無くなったため削除) */
  .sec-title { font-size:26px }
  .page section { padding-top:64px;padding-bottom:64px }
  .page p { font-size:15px }
}
@media (max-width:520px) {
  .btn-outline,
  .btn-lime-md,
  .btn-lime-xl { width:100%;max-width:340px }
}
a:hover { opacity:.8 }
h1,h2,h3,h4 { word-break:auto-phrase;text-wrap:balance }
p,li { word-break:auto-phrase;text-wrap:pretty }
@media (max-width:900px) {
  .chev-grid,
  .grid-3,
  .band-grid-3 { grid-template-columns:1fr }
  .diagram-note,
  .chev-ai,
  /* (style属性が無くなったため削除) */
}
@media (max-width:900px) {
}
@media (max-width:700px) {
  .price-amount { font-size:72px }
}
@media (max-width:1250px) {
  #fvbg { display:none }
}
/* デザイン12：「お金が変わる場面」の表（3列）を、スマホ幅では縦に積む */

/* =====================================================
   スマホ幅のヘッダー（ロゴ＋MENU → 押すと全画面のメニュー）
   参考：www.impl.co.jp のスマホ表示
   ===================================================== */
.hd-toggle { display:none }
@media (max-width:1100px) {
  header.hd { padding:8px 16px;min-height:64px;gap:0 }
  header.hd .hd-brand { flex:1 1 100%;justify-content:space-between }
  header.hd .hd-toggle {
    display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 0 0 16px;
    background:none;border:0;color:#FFFFFF;cursor:pointer;
    font-family:'Poppins','Noto Sans JP',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em
  }
  header.hd .hd-toggle-bars { position:relative;display:block;width:34px;height:14px }
  header.hd .hd-toggle-bars::before,
  header.hd .hd-toggle-bars::after {
    content:"";position:absolute;left:0;width:100%;height:2px;background:#FFFFFF;
    transition:transform .2s,top .2s
  }
  header.hd .hd-toggle-bars::before { top:2px }
  header.hd .hd-toggle-bars::after { top:10px }
  header.hd.is-open .hd-toggle-bars::before { top:6px;transform:rotate(25deg) }
  header.hd.is-open .hd-toggle-bars::after { top:6px;transform:rotate(-25deg) }

  /* 閉じているとき：メニューと右のボタンは隠す */
  header.hd .hd-nav,
  header.hd .hd-actions { display:none }

  /* 開いているとき：画面いっぱいに表示 */
  header.hd.is-open {
    position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;
    overflow-y:auto;align-content:flex-start;z-index:300
  }
  header.hd.is-open .hd-nav {
    display:flex;flex:1 1 100%;width:100%;flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;justify-content:flex-start;gap:0;margin-top:16px
  }
  header.hd.is-open .hd-nav a {
    font-size:22px;font-weight:700;min-height:64px;padding:16px 4px;
    border-bottom:1px solid rgba(255,255,255,.14)
  }
  header.hd.is-open .hd-actions {
    display:flex;flex:1 1 100%;flex-direction:column;gap:12px;
    justify-content:flex-start;margin-top:32px;padding-bottom:32px
  }
  header.hd.is-open .hd-actions > * {
    width:100%;min-height:56px;box-sizing:border-box;justify-content:center;
    display:inline-flex;align-items:center;font-size:16px;text-decoration:none
  }
}

/* 導入実績の数字の行：1100px以下では折り返す */
/* 3つの特長の見出し：スマホ幅では、折り返す */
/* 注意書き（※）：とても狭い画面では、長い語の途中でも折り返す */
@media (max-width:520px) {
  li > span { min-width:0;overflow-wrap:anywhere }
}

/* =====================================================
   レスポンシブの追加調整（スマホ・タブレット）
   ===================================================== */
/* 見出し・ラベルの折り返し（1文字だけ残らないように） */
.hero-sub { text-wrap:balance }
.pill-lime { white-space:nowrap }
.effect-title { text-wrap:balance }

/* 「12時間の流れ」の帯：縦に並ぶ幅では、矢印を下向きにして、帯の下に置く */
@media (max-width:900px) {
  .band-arrow {
    right:auto;left:50%;top:calc(100% + 1px);
    transform:translateX(-50%) rotate(90deg);line-height:1
  }
}

/* 「AIエージェントとは」の比較表：幅が足りないときは、横にスクロール（左の見出し列は固定） */

/* 「出ていかなかったお金」の表：スマホ幅では縦に積む */

/* 料金：「33万円（税込）/ 1人」の折り返し、カードの余白 */
@media (max-width:700px) {
  .price-cond { display:block;margin:8px 0 0 }
  .price-card { padding:36px 20px }
  .excl-card { padding:24px 20px }
  .form-panel { padding:28px 20px }
}

/* =====================================================
   日本語の折り返し：文節の間（js/main.js が入れた <wbr>）でだけ改行する
   （JavaScript が動いたときだけ、html に jp-phrase が付く）
   ===================================================== */
html.jp-phrase * { word-break:keep-all;overflow-wrap:break-word }
/* ごく狭い画面（340px以下）では、はみ出しを防ぐため、必要なときだけ文節の途中でも折り返す */
@media (max-width:340px) { html.jp-phrase * { overflow-wrap:anywhere } }

/* 「持ち帰る成果物」の4つのカード：1100px以下では2列にして、文字の幅を確保する */
@media (max-width:1100px) {
}
@media (max-width:520px) {
}

/* 「手順書の作成」の図は、狭い幅では横にスクロールさせる（5列のまま） */
@media (max-width:900px) {
  .diagram-inner .chev-grid { grid-template-columns:repeat(5,minmax(0,1fr)) }
  .diagram-inner .diagram-note { grid-column:1 / 5 }
  .diagram-inner .chev-ai { grid-column:2 / 5 }
}
/* 図のタイトルは、横スクロールしても見える位置（表示領域の中央）に固定する */
@media (max-width:900px) {
  .diagram-title { position:sticky;left:0;width:calc(100vw - 48px - 56px);box-sizing:border-box }
}
/* 図が横スクロールになる幅（883px以下。780px の図＋カードの余白56px＋画面端の余白48px）だけ、
   図の上に「横にスクロールできます →」を出し、図の右端を白くぼかしてスクロールできることを示す。PCでは出さない */
.diagram-scroll { position:relative }
.diagram-scroll-hint { display:none;margin:0 0 10px;text-align:right;font-size:13px;font-weight:700;color:#C5C9C6 }
@media (max-width:883px) {
  .diagram-scroll-hint { display:block }
  .diagram-scroll::after { content:"";position:absolute;top:0;right:0;bottom:0;width:56px;border-radius:0 24px 24px 0;background:linear-gradient(90deg,rgba(255,255,255,0),#FFFFFF 75%);pointer-events:none }
}

/* SOLUTIONの見出し「インプルAXは、そんなお悩みを解決します」：
   2行に折り返す幅では、緑の下線を見出し全体の下に1本だけ引く */
@media (max-width:800px) {
  .sol-underline { display:inline-block }
}

/* 工程タブの重なり順（左ほど手前）：スライドの見た目に合わせる */
.chev-grid > .chev:nth-child(2) { z-index:4 }
.chev-grid > .chev:nth-child(3) { z-index:3 }
.chev-grid > .chev:nth-child(4) { z-index:2 }
.chev-grid > .chev:nth-child(5) { z-index:1 }
.chev-grid > .chev-ai + .chev { z-index:0 }
.chev-ai-sub { color:var(--c-ink) }
/* 工程ボックスの境目（半円）に白い線を出す：スライドの白フチに合わせる */
.chev-first, .chev, .chev-ai { border:2px solid var(--c-bg); border-left:0 }

/* CASE：提案資料スライド5「バックオフィスでの業務AI化の効果」と同じ構成 */
.effect-grid { display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:20px;align-items:stretch }
.effect-col { display:flex;flex-direction:column;gap:20px }
.effect-card { background:var(--c-gray);border-radius:20px;padding:28px 32px;box-sizing:border-box }
.effect-card-green { background:var(--c-soft-2);border:1.5px solid var(--c-lime);display:flex;flex-direction:column;justify-content:center }
.effect-title { margin:0;font-size:19px;font-weight:700;color:var(--c-ink) }
.effect-card-green .effect-title { color:var(--c-lime-dark) }
.effect-sub { margin:8px 0 0;font-size:14px;line-height:1.8;color:var(--c-muted) }
.effect-main { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:end }
.effect-main > :first-child, .effect-row > :first-child { align-self:center;text-align:center }
.effect-stat { display:flex;flex-direction:column;align-items:center;text-align:center }
.effect-label { font-size:14px;color:var(--c-muted) }
.effect-before { margin-top:10px;font-family:var(--font-accent);font-size:22px;font-weight:600;line-height:1.2;color:#6B7079 } /* 薄いグレー面（#F5F7F8）で 4.6:1 */
.effect-before small, .effect-after small { font-family:var(--font-body);font-size:13px;font-weight:700;margin-left:2px }
.effect-after small { font-size:18px;margin-left:4px }
.effect-arrow { width:0;height:0;margin:8px 0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #C9CFD6 }
.effect-after { font-family:var(--font-accent);font-size:56px;font-weight:700;line-height:1.15;color:var(--c-ink);background:var(--c-lime);padding:0 .14em }
.effect-note { margin-top:10px;font-size:13px;color:var(--c-muted) }
.effect-row { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:center }
.effect-big { margin:18px auto 6px;width:fit-content;font-family:var(--font-accent);font-size:18px;font-weight:700;line-height:1.15;color:var(--c-ink);background:var(--c-lime);padding:0 .3em }
.effect-big b { font-size:60px;margin:0 4px }
.effect-text { margin:0;font-size:14px;line-height:1.8;color:var(--c-text) }
.effect-eg { margin:22px 0 8px;font-size:14px;font-weight:700;color:var(--c-lime-dark) }
.effect-list { margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px }
.effect-list li { position:relative;padding-left:18px;font-size:14px;line-height:1.8;color:var(--c-text) }
.effect-list li::before { content:"";position:absolute;left:0;top:.65em;width:9px;height:9px;border-radius:50%;background:var(--c-lime) }
.effect-notes { display:flex;flex-direction:column;gap:6px;text-align:center }
.effect-foot { margin:0;font-size:15px;line-height:1.9;color:var(--c-muted) }
@media (max-width:1100px) {
  .effect-grid { grid-template-columns:1fr }
}
@media (max-width:700px) {
  .effect-card { padding:22px 20px }
  .effect-main { grid-template-columns:1fr 1fr;gap:16px }
  .effect-main > :first-child { grid-column:1 / -1 }
  .effect-row { grid-template-columns:1fr }
  .effect-after { font-size:48px }
}

/* CURRICULUM：身につくもの（スライド12）とオプション（スライド8） */
.learn-wrap, .option-wrap { display:flex;flex-direction:column;gap:20px;margin-top:20px }
.learn-card { background:var(--c-soft);border-radius:16px;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px }
.learn-list { margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px }
.learn-list li { position:relative;padding-left:16px;font-size:14px;line-height:1.8;color:var(--c-text) }
.learn-list li::before { content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--c-lime) }

/* FLOW：ドローンの導入フローと同じ黒背景 */
.sec-flow { scroll-margin-top:90px;background:var(--c-ink);padding:100px 0;color:#FFFFFF }
.sec-flow .eyebrow { color:var(--c-lime) }
.sec-flow .sec-title { color:#FFFFFF }
.sec-flow .btn-outline { background:#FFFFFF;border-color:#FFFFFF }
/* FLOW のステップ：スライド7と同じ右向きの矢羽（黒地に合わせて濃グレー・白文字）。STEP 03 は広く、中に3つの刻み */
.flow-arrows { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1.9fr 1fr;gap:0 }
.flow-arrow { position:relative;min-height:170px;margin-left:-20px;padding:22px 34px 22px 40px;box-sizing:border-box;background:#262626;color:#FFFFFF;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%,26px 50%);display:flex;flex-direction:column;justify-content:center;gap:8px }
.flow-arrow:first-child { margin-left:0;padding-left:26px;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%) }
.flow-arrow:last-child { clip-path:polygon(0 0,100% 0,100% 100%,0 100%,26px 50%);border-radius:0 16px 16px 0 }
.flow-arrow-wide { background:#1D211A }
.flow-arrow .step-label-sm { color:var(--c-lime) }
.flow-arrow .effect-title { display:flex;align-items:center;gap:8px;color:#FFFFFF }
.flow-arrow .icon { filter:invert(1) }
.flow-arrow .flow-text { color:#D5D8DD }
.flow-mini span { color:var(--c-ink) }
.flow-mini { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-size:12px;font-weight:700 }
.flow-mini span { border-radius:999px;padding:5px 10px;white-space:nowrap }
.flow-mini i { font-style:normal;color:#9AA1AB }
.flow-mini-light { background:#E7F3DA }
.flow-mini-mid { background:#C9E89A }
.flow-mini-lime { background:var(--c-lime) }
@media (max-width:1100px) {
  .flow-arrows { grid-template-columns:1fr 1fr;gap:12px }
  .flow-arrow, .flow-arrow:first-child, .flow-arrow:last-child { margin-left:0;padding-left:26px;clip-path:none;border-radius:16px }
  .flow-arrow-wide { grid-column:1 / -1 }
}
@media (max-width:700px) {
  .flow-arrows { grid-template-columns:1fr }
  .flow-arrow, .flow-arrow:first-child, .flow-arrow:last-child { min-height:0;padding:20px 22px }
}

/* PRICE：料金と助成金を横並びに（900px以下は縦） */
.price-pair { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch }
.price-col { display:flex;flex-direction:column;gap:16px;min-width:0 }
.price-col > .price-card, .price-col > .subsidy-card { flex:1;justify-content:center;box-sizing:border-box }
.price-pair .price-card { padding:40px }
.price-pair .price-amount { font-size:88px }
.price-pair .price-unit { font-size:28px }
@media (max-width:900px) {
  .price-pair { grid-template-columns:1fr }
}
@media (max-width:700px) {
  .price-pair .price-card { padding:36px 20px }
  .price-pair .price-amount { font-size:72px }
}

/* 金額の単位（万円など）：和文は欧文の数字より約0.09em下に沈むので、その分だけ持ち上げて数字と下端を揃える */
.subsidy-amount > .subsidy-unit, .price-unit, .price-cond, .effect-before small, .effect-after small, .effect-unit { vertical-align:.09em }

/* ファーストビューの高さ：画面の高さからヘッダー（80px）を引いた分。小さすぎ・大きすぎにならないよう 560〜900px の範囲に収める（ドローンと共通） */
.hero { display:flex;align-items:center;box-sizing:border-box;min-height:clamp(560px, calc(100vh - 80px), 900px);min-height:clamp(560px, calc(100svh - 80px), 900px);padding:80px 0 }
@media (max-width:700px) {
  .hero { padding:56px 0 }
}

/* とても狭い画面（360px以下）：ヘッダーのロゴ・MENU と、事例の大きな数字が折り返さないように少し小さくする */
.hd-logo-text, .hd-toggle-label { white-space:nowrap }
@media (max-width:360px) {
  .hd-logo { gap:8px }
  .hd-logo-img { height:32px }
  .hd-logo-text { font-size:17px }
  .effect-after { font-size:40px }
}