/* ============================================================
   AI-OCR 下層ページ／キャンペーンページ 共通 — style.css
   配色は UP to Cloud LP と統一:
     紺 #14324E ／ 青 #2E7DB2 ／ オレンジ #E8762C（CTA）
   AI-OCR のアクセントとして シアン #38B6E8 を追加
============================================================ */

:root{
  --navy:#14324E;
  --navy-deep:#0b1f31;
  --blue:#2E7DB2;
  --blue-soft:#eaf2f8;
  --cyan:#38B6E8;
  --orange:#E8762C;
  --orange-dark:#cf6520;
  --orange-soft:#fff3ea;

  --ink:#1f2a33;
  --ink-soft:#55636e;
  --line:#e2e8ee;
  --bg:#ffffff;
  --bg-gray:#f5f8fb;

  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 3px rgba(20,50,78,.06),0 1px 2px rgba(20,50,78,.04);
  --shadow-md:0 10px 30px rgba(20,50,78,.10);
  --shadow-lg:0 24px 60px rgba(11,31,49,.18);
  --maxw:1120px;
  --maxw-narrow:820px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  line-height:1.85;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ font-weight:700; color:var(--navy); }
h1,h2,h3{ margin:0; line-height:1.4; }
p{ margin:0; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.container-narrow{ max-width:var(--maxw-narrow); }
section[id]{ scroll-margin-top:80px; }
.sp-only{ display:none; }
.pc-only{ display:inline; }

/* ---------- 見出し ---------- */
.eyebrow{ font-size:12px; letter-spacing:.22em; font-weight:700; color:var(--ink-soft); margin-bottom:10px; }
.eyebrow-accent{ color:var(--blue); }
.eyebrow-light{ color:var(--cyan); }
.section{ padding:88px 0; }
.section-title{ font-size:clamp(22px,3.4vw,32px); font-weight:900; color:var(--navy); margin-bottom:18px; }
.section-title-light{ color:#fff; }
.section-sub{ color:var(--ink-soft); font-size:clamp(15px,1.7vw,17px); max-width:820px; }
.section-sub-light{ color:#c9dbe9; }
.hl{ color:var(--cyan); }
.note{ font-size:13px; color:var(--ink-soft); margin-top:24px; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; border-radius:999px; padding:15px 32px; font-size:16px;
  transition:transform .15s, box-shadow .15s, background .15s, border-color .15s;
  border:2px solid transparent; text-align:center; line-height:1.4;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(232,118,44,.30); }
.btn-primary:hover{ background:var(--orange-dark); box-shadow:0 10px 22px rgba(232,118,44,.38); }
.btn-ghost{ background:#fff; color:var(--navy); border-color:var(--line); }
.btn-ghost-light{ color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-lg{ font-size:17px; padding:17px 40px; }

.pill{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:.08em; padding:3px 9px; border-radius:999px; }
.pill-ai{ background:var(--cyan); color:var(--navy-deep); }

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.logo-img{ height:30px; width:auto; }
.site-nav{ display:flex; align-items:center; gap:22px; font-size:14px; font-weight:500; }
.site-nav a{ color:var(--navy); }
.nav-campaign{ color:var(--orange) !important; font-weight:700; }
.nav-cta{ background:var(--orange); color:#fff !important; padding:8px 18px; border-radius:999px; font-weight:700; }
.nav-cta:hover{ background:var(--orange-dark); text-decoration:none; }

/* ---------- パンくずリスト ---------- */
.breadcrumb{ background:#fff; border-bottom:1px solid var(--line); font-size:13px; }
.breadcrumb ol{ list-style:none; margin:0 auto; padding-block:10px; display:flex; flex-wrap:wrap; gap:4px 0; color:var(--ink-soft); }
.breadcrumb li + li::before{ content:"›"; margin:0 10px; color:#9fb0bd; }
.breadcrumb a{ color:var(--blue); }

/* ---------- ヒーロー ---------- */
.hero{
  background:
    radial-gradient(900px 500px at 85% 40%, rgba(56,182,232,.22), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%);
  color:#fff; overflow:hidden;
}
.hero-inner{ display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:40px; padding-block:72px 64px; }
.hero-label{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:#c9dbe9; margin-bottom:18px; }
.nowrap{ white-space:nowrap; }
.hero-title{ font-size:clamp(28px,3.6vw,44px); font-weight:900; line-height:1.3; color:#fff; margin-bottom:22px; }
.hero-title-lead{ display:block; font-size:clamp(16px,2vw,20px); color:var(--cyan); letter-spacing:.06em; margin-bottom:10px; }
.hero-title-lead small{ font-size:.8em; color:#c9dbe9; }
.hero-sub{ font-size:clamp(15px,1.8vw,18px); color:#dce8f2; margin-bottom:20px; max-width:560px; }
.hero-badge{
  display:inline-block; font-size:14px; font-weight:700; color:var(--navy-deep);
  background:#fff; border-left:5px solid var(--cyan); padding:8px 14px; border-radius:6px; margin-bottom:28px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-media img{ border-radius:20px; box-shadow:var(--shadow-lg); border:1px solid rgba(56,182,232,.3); }

/* 背景イラスト型ヒーロー（ai-ocr.html） */
.hero-bg{ position:relative; background:#071a2e; }
.hero-bg-media{
  position:absolute; top:0; right:0; bottom:0;
  aspect-ratio:16 / 9; max-width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 34%);
}
.hero-bg-media img{ width:100%; height:100%; object-fit:cover; object-position:left center; }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,26,46,.92) 0%, rgba(7,26,46,.75) 30%, rgba(7,26,46,0) 52%); pointer-events:none; }
.hero-bg .hero-inner{ position:relative; z-index:1; grid-template-columns:1fr; min-height:500px; padding-block:56px; }
.hero-bg .hero-copy{ max-width:470px; }
.hero-bg .hero-title{ font-size:clamp(30px,3.6vw,46px); text-shadow:0 2px 18px rgba(0,0,0,.55); }
.hero-bg .hero-title-lead{ font-size:clamp(17px,2vw,22px); }
.hero-bg .hero-sub{ color:#e8f0f7; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.hero-bg .hero-label{ color:#dce8f2; }

/* キャンペーン告知帯 */
.campaign-strip{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 16px;
  background:var(--orange); color:#fff; padding:14px 24px; font-size:15px; text-align:center;
}
.campaign-strip:hover{ text-decoration:none; background:var(--orange-dark); }
.campaign-strip strong{ color:#fff; }
.campaign-strip-tag{ background:#fff; color:var(--orange-dark); font-weight:900; font-size:12px; padding:3px 10px; border-radius:999px; }
.campaign-strip-arrow{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---------- お悩み ---------- */
.pains{ background:var(--bg-gray); }
.pain-wrap{ display:grid; grid-template-columns:1.15fr 1fr; gap:32px; align-items:center; margin-top:28px; }
.pain-media{ margin:0; }
.pain-media img{ border-radius:var(--radius); box-shadow:var(--shadow-md); }
.pain-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.pain-card{ background:#fff; border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:16px; font-size:16px; }
.pain-icon{ flex:none; width:44px; height:44px; fill:none; stroke:var(--blue); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- AI-OCRとは ---------- */
.merit-list{ list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.merit-card{ border:1px solid var(--line); border-top:4px solid var(--blue); border-radius:var(--radius); padding:28px 24px; }
.merit-num{ font-size:28px; font-weight:900; color:var(--cyan); line-height:1; }
.merit-card h3{ font-size:20px; color:var(--navy); margin:10px 0 8px; }
.merit-card p{ color:var(--ink-soft); font-size:15px; }

/* ---------- 主な特徴・仕様 ---------- */
.features{ background:var(--bg-gray); }
.feature-list{ list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.feature-card{ grid-column:span 2; }
.feature-card:nth-child(-n+2){ grid-column:span 3; }
.feature-card{ background:#fff; border-radius:var(--radius); padding:24px 20px; box-shadow:var(--shadow-sm); border-left:4px solid var(--cyan); }
.feature-icon{
  width:64px; height:64px; padding:7px; margin-bottom:14px; border-radius:16px; background:var(--blue-soft);
  fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.feature-icon .fill-w{ fill:var(--blue-soft); }
.feature-icon .accent{ stroke:var(--cyan); stroke-width:2.4; }
.feature-icon .ic-text{ fill:var(--blue); stroke:none; font-size:7px; font-weight:900; font-family:inherit; }
.feature-card h3{ font-size:17px; color:var(--navy); margin-bottom:8px; }
.feature-card p{ font-size:14px; color:var(--ink-soft); }
.small{ display:block; font-size:12px; margin-top:6px; }
.spec{ margin-top:40px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:28px; }
.spec-title{ font-size:18px; color:var(--navy); margin-bottom:16px; }
.spec-table{ margin:0; }
.spec-table > div{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.spec-table dt{ font-weight:700; color:var(--navy); }
.spec-table dd{ margin:0; }
.chip-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.chip-list li{ background:var(--blue-soft); color:var(--navy); font-size:14px; font-weight:500; padding:4px 12px; border-radius:999px; }
.tax-in{ display:block; font-size:12px; font-weight:400; color:var(--ink-soft); }
.addon-price .tax-in{ display:inline; }

/* ---------- 起票の流れ ---------- */
.flow{ background:var(--blue-soft); }
.step-nav{ list-style:none; padding:0; margin:32px 0 48px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; counter-reset:none; }
.step-nav li{
  position:relative; background:var(--navy); color:#fff; font-weight:700; font-size:15px;
  padding:14px 12px 14px 20px; display:flex; align-items:center; gap:10px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.step-nav li:first-child{ clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius:8px 0 0 8px; }
.step-nav li:nth-child(4){ background:var(--blue); }
.step-nav span{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--cyan); color:var(--navy-deep); font-size:14px; flex:none; }

.step-row{ display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center; margin-bottom:56px; }
.step-row-rev{ grid-template-columns:1.2fr .8fr; }
.step-row-rev .step-text{ order:2; }
.step-label{ display:flex; gap:6px; margin-bottom:12px; }
.step-no{ font-size:12px; font-weight:900; letter-spacing:.12em; color:#fff; background:var(--blue); padding:4px 10px; border-radius:6px; }
.step-text h3{ font-size:clamp(20px,2.6vw,26px); color:var(--navy); font-weight:900; margin-bottom:14px; }
.step-text p{ color:var(--ink-soft); }
.step-shot{ margin:0; background:#fff; border-radius:var(--radius); padding:10px; box-shadow:var(--shadow-md); }
.step-shot img{ border-radius:6px; border:1px solid var(--line); }
.step-shot figcaption{ font-size:12px; color:var(--ink-soft); text-align:center; padding-top:8px; }

/* ---------- 安心の仕組み ---------- */
.safety{ background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff; }
.safety-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:center; }
.safety-media{ margin:0; }
.safety-media img{ border-radius:20px; border:1px solid rgba(56,182,232,.35); box-shadow:0 0 50px rgba(56,182,232,.18); }
.safety-list{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:14px; }
.safety-list li{ background:rgba(255,255,255,.06); border:1px solid rgba(56,182,232,.35); border-radius:var(--radius); padding:18px 22px; }
.safety-list h3{ font-size:18px; color:#fff; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.safety-list h3::before{ content:""; width:22px; height:22px; flex:none; border-radius:50%; background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230b1f31' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.safety-list p{ color:#c9dbe9; font-size:15px; }

/* ---------- 業務フロー ---------- */
.biz-flow{ list-style:none; padding:0; margin:36px 0 28px; display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.biz-flow li{
  position:relative; background:var(--bg-gray); border:1px solid var(--line); color:var(--navy);
  font-weight:700; font-size:15px; text-align:center; padding:16px 4px; border-radius:var(--radius-sm);
}
.biz-flow li.is-ocr{ background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:0 0 0 4px rgba(56,182,232,.35); }
.biz-flow-tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--cyan); color:var(--navy-deep); font-size:11px; font-weight:900; padding:2px 8px; border-radius:999px; white-space:nowrap; }

/* ---------- 料金 ---------- */
.pricing{ background:var(--bg-gray); }
.table-wrap{ overflow-x:auto; margin-top:28px; }
.price-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); font-size:16px; }
.price-table th{ background:var(--navy); color:#fff; font-weight:700; padding:14px 16px; }
.price-table td{ padding:13px 16px; text-align:center; border-top:1px solid var(--line); }
.price-table td:nth-child(2){ font-weight:700; color:var(--navy); }
.price-table td:nth-child(3){ color:var(--ink-soft); font-size:14px; }
.price-table tbody tr:first-child{ background:var(--orange-soft); }
.addon{ margin-top:24px; background:#fff; border:2px dashed #b9d3e6; border-radius:var(--radius); padding:22px 24px; }
.addon h3{ font-size:17px; color:var(--navy); margin-bottom:6px; }
.addon-price{ font-size:17px; margin-bottom:4px; }
.addon p:last-child{ color:var(--ink-soft); font-size:14px; }
.note-list{ list-style:none; padding:0; margin:18px 0 0; font-size:13px; color:var(--ink-soft); }

.campaign-banner{
  display:block; margin-top:36px; padding:26px 28px; border-radius:var(--radius);
  background:linear-gradient(120deg, var(--orange) 0%, #f39a4c 100%); color:#fff; box-shadow:0 12px 28px rgba(232,118,44,.30);
}
.campaign-banner:hover{ text-decoration:none; transform:translateY(-2px); }
.campaign-banner strong{ color:#fff; font-size:1.15em; }
.campaign-banner-tag{ display:inline-block; background:#fff; color:var(--orange-dark); font-size:12px; font-weight:900; padding:3px 10px; border-radius:999px; margin-bottom:8px; }
.campaign-banner-main{ display:block; font-size:clamp(19px,2.6vw,24px); font-weight:900; margin-bottom:4px; }
.campaign-banner-sub{ display:block; font-size:14px; }

/* ---------- FAQ ---------- */
.faq-group{ display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.faq-item[open]{ border-color:#cfe0ee; box-shadow:var(--shadow-sm); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 22px; font-weight:700; color:var(--navy); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"＋"; margin-left:auto; color:var(--blue); font-weight:700; }
.faq-item[open] summary::after{ content:"－"; }
.faq-q{ display:inline-grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--blue); color:#fff; font-size:14px; }
.faq-label{ flex:1; line-height:1.5; }
.faq-body{ padding:0 22px 20px 66px; color:var(--ink-soft); }

/* ---------- クロージング ---------- */
.closing{ background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff; padding:84px 0; text-align:center; }
.closing-title{ font-size:clamp(22px,3.4vw,32px); font-weight:900; margin-bottom:14px; }
.closing-sub{ color:#c9dbe9; margin-bottom:30px; }
.closing-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ---------- フッター ---------- */
.site-footer{ background:var(--navy-deep); color:#8aa3b8; padding:28px 0; font-size:13px; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; }
.footer-logo img{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.85; }

.mobile-cta{ display:none; }

/* ============================================================
   キャンペーンページ（campaign.html）
============================================================ */
.cp-hero{
  background:
    radial-gradient(700px 420px at 80% 30%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(160deg, #eaf6fd 0%, #d6ecf9 100%);
  overflow:hidden;
}
.cp-hero-inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; padding-block:64px; }
.cp-period{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-weight:700; color:var(--navy); font-size:15px; margin-bottom:18px; }
.cp-period-tag{ background:var(--orange); color:#fff; font-size:12px; font-weight:900; padding:4px 12px; border-radius:999px; }
.cp-hero-title{ font-size:clamp(30px,4vw,48px); font-weight:900; color:var(--navy); line-height:1.3; margin-bottom:20px; }
.cp-hero-lead{ display:block; font-size:clamp(15px,1.8vw,18px); color:var(--blue); letter-spacing:.04em; margin-bottom:10px; }
.cp-num{ font-size:1.45em; color:var(--orange); letter-spacing:.02em; }
.cp-free{ color:var(--orange); }
.cp-hero-catch{ font-size:clamp(16px,2vw,19px); font-weight:700; color:var(--blue); margin-bottom:12px; }
.cp-greeting{ background:#fff; padding:40px 0 0; text-align:center; }
.cp-greeting p{ color:var(--ink-soft); font-size:15px; line-height:2; }
.cp-merits{ list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cp-merits li{ background:rgba(56,182,232,.12); border-left:4px solid var(--cyan); border-radius:var(--radius-sm); padding:18px 22px; }
.cp-merits h3{ font-size:17px; color:#fff; margin-bottom:4px; }
.cp-merits p{ font-size:14px; color:#c9dbe9; }
.cp-hero-sub{ font-size:clamp(15px,1.7vw,17px); color:var(--ink); margin-bottom:16px; max-width:560px; }
.cp-hero-badge{ display:inline-block; font-size:14px; font-weight:700; color:var(--navy); background:#fff; border-left:5px solid var(--orange); padding:8px 14px; border-radius:6px; margin-bottom:26px; box-shadow:var(--shadow-sm); }
.cp-hero-media img{ border-radius:20px; box-shadow:var(--shadow-md); }

.cp-card{ margin-top:24px; background:#fff; border:2px solid var(--orange); border-radius:var(--radius); padding:8px 28px; box-shadow:var(--shadow-md); }
.cp-table{ margin:0; }
.cp-table > div{ display:grid; grid-template-columns:110px 1fr; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.cp-table > div:first-child{ border-top:0; }
.cp-table dt{ font-weight:900; color:var(--navy); }
.cp-table dd{ margin:0; }
.cp-dd-sub{ font-size:14px; color:var(--ink-soft); }
.cp-gift{ font-size:clamp(18px,2.4vw,22px); color:var(--orange-dark); }

.cp-volume{ background:var(--bg-gray); }
.cp-volume-inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; align-items:stretch; margin-top:28px; }
.cp-volume-big{ background:var(--navy); color:#fff; border-radius:var(--radius); padding:32px 24px; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.cp-volume-label{ font-weight:700; color:#c9dbe9; }
.cp-volume-num{ font-size:28px; font-weight:900; line-height:1.2; }
.cp-volume-num span{ font-size:88px; color:var(--cyan); margin-inline:4px; }
.cp-volume-note{ font-size:13px; color:#c9dbe9; margin-top:6px; }
.cp-volume-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.cp-volume-list li{ background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); border-left:4px solid var(--cyan); flex:1; }
.cp-volume-list h3{ font-size:18px; color:var(--navy); margin-bottom:6px; }
.cp-volume-list p{ color:var(--ink-soft); font-size:15px; }

.cp-about{ background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff; }
.cp-steps{ list-style:none; padding:0; margin:36px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cp-steps li{ position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(56,182,232,.35); border-radius:var(--radius); padding:24px 18px 20px; text-align:center; }
.cp-step-no{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--cyan); color:var(--navy-deep); font-weight:900; margin-bottom:10px; }
.cp-steps h3{ font-size:17px; color:#fff; margin-bottom:4px; }
.cp-steps p{ font-size:14px; color:#c9dbe9; }
.cp-points{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.cp-points li{ background:rgba(56,182,232,.16); color:#fff; font-weight:700; font-size:14px; padding:8px 16px; border-radius:999px; }
.cp-points small{ font-weight:400; color:#c9dbe9; margin-left:6px; font-size:12px; }
.cp-about-cta{ text-align:center; margin-top:32px; }

.cp-now{ text-align:center; }
.cp-now .section-sub{ margin-inline:auto; }

.cp-flow{ background:var(--blue-soft); }
.cp-flow-list{ list-style:none; padding:0; margin:32px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cp-flow-list li{ background:#fff; border-radius:var(--radius); padding:24px 20px; box-shadow:var(--shadow-sm); }
.cp-flow-list span{ display:inline-block; font-size:12px; font-weight:900; letter-spacing:.12em; color:#fff; background:var(--blue); padding:3px 10px; border-radius:6px; margin-bottom:10px; }
.cp-flow-list h3{ font-size:17px; color:var(--navy); margin-bottom:6px; }
.cp-flow-list p{ font-size:14px; color:var(--ink-soft); }
.cp-flow-list li.is-goal{ background:var(--orange-soft); outline:2px solid var(--orange); }
.cp-flow-list li.is-goal span{ background:var(--orange); }

.cp-up-card{ display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.cp-up-title{ font-size:20px; color:var(--navy); margin-bottom:8px; }
.cp-up-card p{ color:var(--ink-soft); }
.cp-up-card .btn{ flex:none; }

.cp-notes{ background:var(--bg-gray); padding:56px 0; }
.cp-notes-title{ font-size:17px; color:var(--navy); margin-bottom:12px; }
.cp-notes-list{ margin:0; padding-left:1.2em; font-size:13px; color:var(--ink-soft); line-height:1.9; }

/* ============================================================
   AI機能トップ（ai/index.html）・AIヘルプ（ai/help/）
============================================================ */
.chip-state{ display:inline-block; font-size:12px; font-weight:900; padding:3px 10px; border-radius:999px; line-height:1.5; white-space:nowrap; }
.chip-state.is-now{ background:#e3f6ec; color:#16794a; }
.chip-state.is-soon{ background:var(--orange-soft); color:var(--orange-dark); }
.chip-state.is-plan{ background:#eef1f4; color:var(--ink-soft); }
.hl-blue{ color:var(--blue); }
.note-light{ color:#9fb6c9; }

/* ヒーロー：白基調・中央寄せの入口デザイン */
.top-hero{
  background:
    radial-gradient(600px 380px at 78% 45%, rgba(56,182,232,.18), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(46,125,178,.14) 1px, transparent 0) 0 0 / 22px 22px,
    #fff;
  border-bottom:1px solid var(--line);
}
.top-hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center; padding-block:48px 40px; }
.top-hero-label{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--ink-soft); margin-bottom:16px; }
.top-hero-title{ font-size:clamp(30px,4.4vw,52px); font-weight:900; color:var(--navy); line-height:1.3; margin-bottom:20px; }
.top-hero-sub{ font-size:clamp(15px,1.7vw,17px); color:var(--ink-soft); max-width:580px; margin-bottom:24px; }
.top-hero-chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:12px; }
.top-hero-chips a{ display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 18px 8px 10px; font-weight:700; color:var(--navy); box-shadow:var(--shadow-sm); }
.top-hero-chips a:hover{ text-decoration:none; border-color:var(--blue); }
.top-hero-media img{ max-width:440px; width:100%; margin-inline:auto; filter:drop-shadow(0 18px 30px rgba(20,50,78,.18)); }

/* ラインナップカード */
.top-lineup{ background:var(--bg-gray); }
.ai-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.ai-card{ display:flex; flex-direction:column; background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); color:var(--ink); border:2px solid transparent; transition:transform .15s, box-shadow .15s, border-color .15s; }
.ai-card:hover{ text-decoration:none; transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--cyan); }
.ai-card-media{ aspect-ratio:16 / 9; overflow:hidden; background:var(--navy); }
.ai-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ai-card:hover .ai-card-media img{ transform:scale(1.03); }
.ai-card-body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.ai-card-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px; }
.ai-card-price{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.ai-card-title{ font-size:26px; font-weight:900; color:var(--navy); margin-bottom:10px; }
.ai-card-title small{ font-size:.6em; color:var(--ink-soft); }
.ai-card-lead{ color:var(--ink-soft); font-size:15px; margin-bottom:14px; }
.ai-card-points{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:500; color:var(--navy); }
.ai-card-points li{ display:flex; gap:8px; }
.ai-card-points li::before{ content:"✓"; color:var(--cyan); font-weight:900; }
.ai-card-more{ margin-top:auto; align-self:flex-start; font-weight:700; color:#fff; background:var(--blue); padding:10px 22px; border-radius:999px; font-size:15px; }
.ai-card:hover .ai-card-more{ background:var(--navy); }

.ai-next{ display:flex; gap:20px; align-items:center; margin-top:24px; background:#fff; border:2px dashed #c6d6e3; border-radius:var(--radius); padding:20px 24px; }
.ai-next-tag{ flex:none; font-size:12px; font-weight:900; letter-spacing:.14em; color:#fff; background:var(--ink-soft); padding:6px 12px; border-radius:6px; }
.ai-next-title{ font-size:18px; color:var(--navy); margin-bottom:4px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ai-next div p{ color:var(--ink-soft); font-size:14px; }

/* 業務フロー */
.wf{ margin-top:40px; }
.wf-steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.wf-steps li{ position:relative; background:var(--bg-gray); border:1px solid var(--line); color:var(--navy); font-weight:700; font-size:15px; text-align:center; padding:16px 4px; border-radius:var(--radius-sm); }
.wf-steps li.is-ocr{ background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:0 0 0 4px rgba(56,182,232,.35); }
.wf-steps li.is-plan{ border:2px dashed #b9cbd9; }
.wf-tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--cyan); color:var(--navy-deep); font-size:11px; font-weight:900; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.wf-tag-plan{ background:#eef1f4; color:var(--ink-soft); border:1px solid #c6d6e3; }
.wf-help{ margin-top:12px; background:linear-gradient(90deg, var(--blue), var(--cyan)); color:#fff; border-radius:var(--radius-sm); padding:12px 18px; text-align:center; font-size:15px; }
.wf-help strong{ color:#fff; }

/* ロードマップ */
.top-roadmap{ background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff; }
.roadmap{ list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; }
.roadmap::before{ content:""; position:absolute; left:6%; right:6%; top:21px; height:2px; background:linear-gradient(90deg, var(--cyan), rgba(56,182,232,.2)); }
.roadmap li{ position:relative; text-align:center; padding-top:52px; display:flex; flex-direction:column; gap:4px; }
.roadmap li::before{ content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%; background:var(--navy-deep); border:3px solid var(--cyan); }
.roadmap li.is-now::before{ background:var(--cyan); box-shadow:0 0 0 6px rgba(56,182,232,.25); }
.roadmap li.is-soon::before{ border-color:var(--orange); background:var(--orange); }
.rm-when{ font-size:13px; font-weight:700; color:#9fb6c9; }
.rm-what{ font-size:19px; font-weight:900; color:#fff; line-height:1.4; }
.rm-what small{ display:block; font-size:12px; color:#c9dbe9; font-weight:700; }
.rm-state{ align-self:center; font-size:12px; font-weight:700; color:var(--cyan); border:1px solid rgba(56,182,232,.5); padding:2px 10px; border-radius:999px; margin-top:4px; }
.roadmap li.is-soon .rm-state{ color:#ffb27a; border-color:rgba(232,118,44,.6); }
.roadmap li.is-future .rm-what{ color:#c9dbe9; }

.top-cloud .cp-up-card{ margin-top:28px; }

/* AIヘルプ */
.help-hero{
  background:linear-gradient(180deg, #eef7fd 0%, #fff 100%);
  padding:48px 0 56px; text-align:center;
}
.help-hero-copy{ max-width:760px; margin-inline:auto; }
.help-hero .top-hero-label{ justify-content:center; }
.help-hero-title{ font-size:clamp(28px,4vw,46px); font-weight:900; color:var(--navy); line-height:1.35; margin-bottom:16px; }
.help-hero-lead{ display:block; font-size:clamp(16px,2vw,20px); color:var(--blue); letter-spacing:.06em; margin-bottom:8px; }
.help-hero-sub{ color:var(--ink-soft); font-size:clamp(15px,1.7vw,17px); margin-bottom:16px; }
.help-hero-tags{ display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:32px; }
.help-tag{ font-size:14px; font-weight:700; color:var(--navy); }
.help-hero-media{ margin:0 auto; max-width:920px; }
.help-hero-media img{ border-radius:18px; box-shadow:var(--shadow-lg); }

.help-points{ background:var(--bg-gray); }
.feature-list.feature-list-3{ grid-template-columns:repeat(3,1fr); }
.feature-list-3 .feature-card, .feature-list-3 .feature-card:nth-child(-n+2){ grid-column:auto; }

.help-howto{ background:#fff; }
.help-steps{ grid-template-columns:repeat(3,1fr); }
.help-caution{ margin-top:28px; background:var(--bg-gray); border-radius:var(--radius); padding:18px 24px; }
.help-caution h3{ font-size:15px; color:var(--navy); margin-bottom:6px; }
.help-caution ul{ margin:0; padding-left:1.2em; font-size:14px; color:var(--ink-soft); }

.help-more{ background:var(--blue-soft); }
.next-feature{ display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; align-items:center; background:#fff; border-radius:18px; padding:16px; box-shadow:var(--shadow-md); color:var(--ink); border:2px solid transparent; transition:transform .15s, border-color .15s; }
.next-feature:hover{ text-decoration:none; transform:translateY(-3px); border-color:var(--cyan); }
.next-feature img{ border-radius:12px; aspect-ratio:16 / 9; object-fit:cover; }
.next-feature-title{ font-size:clamp(18px,2.2vw,22px); color:var(--navy); font-weight:900; margin-bottom:8px; }
.next-feature p{ color:var(--ink-soft); font-size:14px; margin-bottom:14px; }

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width:1180px){
  .hero-bg-media{
    left:0; bottom:auto; width:100%; max-width:none;
    -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 60%, transparent 100%);
  }
  .hero-bg::after{ background:linear-gradient(180deg, rgba(7,26,46,0) 0%, rgba(7,26,46,0) calc(100vw * 9 / 16 - 120px), rgba(7,26,46,.9) calc(100vw * 9 / 16)); }
  .hero-bg .hero-inner{ min-height:0; padding-top:calc(100vw * 9 / 16 - 48px); padding-bottom:48px; }
  .hero-bg .hero-copy{ max-width:640px; }
}
@media (max-width:900px){
  .site-nav a:not(.nav-cta):not(.nav-campaign){ display:none; }
  .hero-inner{ grid-template-columns:1fr; padding-block:48px; }
  .hero-media{ max-width:640px; width:100%; margin-inline:auto; order:-1; }
  .pain-wrap, .safety-wrap{ grid-template-columns:1fr; gap:24px; }
  .safety-media{ max-width:360px; margin-inline:auto; }
  .cp-hero-inner{ grid-template-columns:1fr; padding-block:40px; }
  .cp-hero-media{ order:-1; max-width:640px; margin-inline:auto; }
  .cp-volume-inner{ grid-template-columns:1fr; }
  .cp-steps, .cp-flow-list{ grid-template-columns:1fr 1fr; }
  .cp-up-card{ flex-direction:column; align-items:flex-start; }
  .top-hero-inner{ grid-template-columns:1fr; text-align:center; padding-block:32px; }
  .top-hero-label, .top-hero-chips{ justify-content:center; }
  .top-hero-sub{ margin-inline:auto; }
  .top-hero-media{ order:-1; }
  .top-hero-media img{ max-width:260px; }
  .ai-cards{ grid-template-columns:1fr; }
  .wf-steps{ grid-template-columns:repeat(4,1fr); row-gap:22px; }
  .roadmap{ grid-template-columns:1fr 1fr; row-gap:8px; }
  .roadmap::before{ display:none; }
  .feature-list.feature-list-3, .help-steps{ grid-template-columns:1fr; }
  .next-feature{ grid-template-columns:1fr; }
  .step-row, .step-row-rev{ grid-template-columns:1fr; gap:20px; }
  .step-row-rev .step-text{ order:0; }
  .biz-flow{ grid-template-columns:repeat(4,1fr); row-gap:20px; }
  .feature-list{ grid-template-columns:1fr 1fr; }
  .feature-card, .feature-card:nth-child(-n+2){ grid-column:auto; }
  .feature-card:first-child{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .container{ padding-inline:16px; }
  .sp-only{ display:inline; }
  .pc-only{ display:none; }
  .section{ padding:60px 0; }
  .site-nav .nav-campaign{ display:none; }
  .merit-list, .feature-list{ grid-template-columns:1fr; }
  .spec{ padding:20px 16px; }
  .spec-table > div{ grid-template-columns:1fr; gap:6px; }
  .cp-table > div{ grid-template-columns:1fr; gap:4px; }
  .cp-card{ padding:4px 18px; }
  .cp-steps, .cp-flow-list{ grid-template-columns:1fr; }
  .cp-merits{ grid-template-columns:1fr; }
  .ai-card-body{ padding:20px; }
  .ai-next{ flex-direction:column; align-items:flex-start; gap:10px; }
  .wf-steps li{ font-size:13px; }
  .wf-tag{ font-size:10px; }
  .cp-volume-num span{ font-size:72px; }
  .step-nav{ grid-template-columns:1fr 1fr; }
  .step-nav li, .step-nav li:first-child{ clip-path:none; border-radius:8px; }
  .hero-actions .btn{ width:100%; }
  .faq-body{ padding-left:22px; }
  .footer-inner{ flex-direction:column; gap:10px; }
  body{ padding-bottom:76px; }
  .mobile-cta{
    display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 12px; background:rgba(255,255,255,.96); border-top:1px solid var(--line);
  }
  .mobile-cta .btn{ padding:12px 10px; font-size:15px; }
  .mobile-cta-sub{ flex:1; }
  .mobile-cta-main{ flex:2; }
}
.help-howto .cp-flow-list li{ border:1px solid var(--line); }

/* ---------- AI-OCR 第1弾・第2弾 ---------- */
.ocr-stages{ list-style:none; padding:0; margin:0 0 10px; display:flex; flex-direction:column; gap:8px; }
.ocr-stages li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; background:var(--bg-gray); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; }
.ocr-stages li.is-next{ background:var(--orange-soft); outline:1px dashed #f0b88d; }
.stage-no{ font-size:12px; font-weight:900; color:#fff; background:var(--blue); padding:2px 8px; border-radius:6px; }
.ocr-stages li.is-next .stage-no{ background:var(--orange); }
.stage-what{ font-weight:700; color:var(--navy); }
.stage-what b{ color:var(--blue); }
.ocr-stages li.is-next .stage-what b{ color:var(--orange-dark); }
.stage-when{ font-size:12px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.stage-when.is-soon{ color:var(--orange-dark); }
.ai-card-note{ font-size:12px; color:var(--ink-soft); margin-bottom:18px; }

/* 第2弾予告ブロック（トップ・AI-OCRページ） */
.next-promo{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:32px; align-items:center; margin-top:32px;
  background:linear-gradient(135deg, #fff 0%, #fff7f0 55%, #ffe9d8 100%);
  border:2px solid var(--orange); border-radius:20px; padding:24px; box-shadow:0 14px 34px rgba(232,118,44,.16); position:relative;
}
.next-promo-media img{ border-radius:14px; box-shadow:var(--shadow-md); }
.next-promo-tag{ display:inline-flex; align-items:center; gap:8px; font-weight:900; color:var(--orange-dark); font-size:15px; margin-bottom:10px; letter-spacing:.04em; }
.next-promo-tag span{ background:var(--orange); color:#fff; padding:4px 12px; border-radius:999px; font-size:13px; }
.next-promo-title{ font-size:clamp(22px,3vw,30px); font-weight:900; color:var(--navy); line-height:1.4; margin-bottom:12px; }
.next-promo-lead{ color:var(--ink); margin-bottom:14px; }
.next-promo-points{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--ink-soft); }
.next-promo-points li{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.next-promo-points li::before{ content:"✓"; color:var(--orange); font-weight:900; }
.next-promo-points strong{ color:var(--navy); }
.next-promo-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.chip-big{ font-size:14px; font-weight:900; padding:6px 16px; border-radius:999px; }
.chip-when{ background:var(--navy); color:#fff; }
.chip-price{ background:#fff; color:var(--orange-dark); border:2px solid var(--orange); }
.next-promo-note{ font-size:12px; color:var(--ink-soft); }
.next-section{ background:#fff; padding-top:24px; }

/* キャンペーンページの第2弾予告 */
.cp-next{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px; margin-top:28px; background:rgba(232,118,44,.14); border:1px solid rgba(232,118,44,.6); border-radius:var(--radius); padding:14px 20px; text-align:center; }
.cp-next p{ color:#fff; }
.cp-next strong{ color:#ffb27a; }
.cp-next-tag{ background:var(--orange); color:#fff; font-size:13px; font-weight:900; padding:3px 12px; border-radius:999px; }

@media (max-width:900px){
  .next-promo{ grid-template-columns:1fr; }
  .next-promo-media{ max-width:420px; margin-inline:auto; }
}
@media (max-width:640px){
  .next-promo{ padding:16px; }
  .ocr-stages li{ grid-template-columns:auto 1fr; }
  .stage-when{ grid-column:2; }
}

/* AIヘルプ：使い方（画面例＋3ステップ） */
.howto-wrap{ display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:center; margin-top:28px; }
.howto-media{ margin:0; }
.howto-media img{ border-radius:16px; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.howto-media figcaption{ font-size:12px; color:var(--ink-soft); text-align:center; padding-top:8px; }
.howto-wrap .help-steps{ grid-template-columns:1fr; margin-top:0; gap:12px; }
.howto-wrap .help-steps li{ padding:16px 20px; }
@media (max-width:900px){
  .howto-wrap{ grid-template-columns:1fr; }
}

/* 背景イラスト型ヒーロー：明るい版（AIヘルプ） */
.hero-bg-light{ background:#eaf6fe; color:var(--navy); }
.hero-bg-light::after{ background:linear-gradient(90deg, rgba(234,246,254,.97) 0%, rgba(234,246,254,.88) 30%, rgba(234,246,254,0) 50%); }
.hero-bg-light .hero-inner{ min-height:450px; }
.hero-bg-light .hero-copy{ max-width:440px; }
.hero-bg-light .hero-title{ color:var(--navy); text-shadow:0 1px 12px rgba(255,255,255,.8); font-size:clamp(26px,2.9vw,36px); }
.hero-bg-light .hero-title-lead{ color:var(--blue); }
.hero-bg-light .hl{ color:var(--blue); }
.hero-bg-light .hero-sub{ color:var(--ink); text-shadow:none; }
.hero-bg-light .hero-label{ color:var(--ink-soft); }
.hero-bg-light .help-hero-tags{ justify-content:flex-start; margin-bottom:0; }
@media (max-width:1180px){
  .hero-bg-light::after{ background:linear-gradient(180deg, rgba(234,246,254,0) 0%, rgba(234,246,254,0) calc(100vw * 9 / 16 - 120px), rgba(234,246,254,.95) calc(100vw * 9 / 16)); }
  .hero-bg-light .hero-copy{ max-width:640px; }
}

/* AI機能トップ：UP to Cloud 案内（画像付き・カード全体がリンク） */
.up-banner{
  display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:center; margin-top:28px;
  background:linear-gradient(120deg, #f2f9ff 0%, #fff 60%); border:1px solid #cfe3f2; border-left:5px solid var(--blue);
  border-radius:var(--radius); padding:16px 24px 16px 16px; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.up-banner:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue); }
.up-banner-img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:10px; }
.up-banner-tag{ display:inline-block; font-size:12px; font-weight:900; letter-spacing:.08em; color:#fff; background:var(--blue); padding:3px 10px; border-radius:999px; margin-bottom:8px; }
.up-banner-body p{ color:var(--ink-soft); font-size:15px; }
.up-banner-body .up-banner-tag{ color:#fff; font-size:12px; }
.up-banner-btn{ margin-top:12px; padding:10px 22px; font-size:15px; }
.up-banner:hover .up-banner-btn{ background:var(--orange-dark); }
@media (max-width:640px){
  .up-banner{ grid-template-columns:1fr; padding:14px; gap:14px; }
}

/* ---------- AI機能一覧：進化の階段 ---------- */
.stairs{ list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; position:relative; }
.stairs::before{ /* 右肩上がりの線 */
  content:""; position:absolute; left:4%; right:2%; top:62%; height:3px; z-index:0;
  background:linear-gradient(90deg, #22a06b, var(--orange) 50%, #b9c6d1);
  transform:rotate(-7deg); transform-origin:left center; opacity:.35; border-radius:3px;
}
.stair{ position:relative; z-index:1; }
.stair.is-now{ margin-top:120px; }
.stair.is-soon{ margin-top:60px; }
.stair.is-plan{ margin-top:0; }
.stair-card{
  display:flex; flex-direction:column; align-items:flex-start; height:100%;
  background:#fff; border-radius:18px; padding:20px 22px 22px; color:var(--ink);
  box-shadow:var(--shadow-md); border:2px solid transparent; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.stair-card:hover{ text-decoration:none; transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--cyan); }
.stair.is-plan .stair-card{ background:#fbfcfd; border:2px dashed #b9cbd9; box-shadow:var(--shadow-sm); }
.stair-when{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:900; color:var(--navy); }
.stair-dot{ width:12px; height:12px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 4px rgba(34,160,107,.18); }
.stair.is-soon .stair-dot{ background:var(--orange); box-shadow:0 0 0 4px rgba(232,118,44,.18); }
.stair.is-plan .stair-dot{ background:#fff; border:2px solid #9fb0bd; box-shadow:none; }
.stair-icon{ width:150px; height:150px; align-self:center; margin:6px 0 10px; }
.stair-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px; }
.stair-price{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.stair-title{ font-size:24px; font-weight:900; color:var(--navy); margin-bottom:8px; display:flex; align-items:baseline; gap:8px; }
.stair-title small{ font-size:14px; color:#fff; background:var(--blue); padding:2px 10px; border-radius:6px; }
.stair.is-plan .stair-title small{ background:#9fb0bd; }
.stair-lead{ font-size:14px; color:var(--ink-soft); margin-bottom:16px; }
.stair-more{ margin-top:auto; font-size:14px; font-weight:700; color:#fff; background:var(--blue); padding:9px 20px; border-radius:999px; }
.stair.is-plan .stair-more{ background:#fff; color:var(--navy); border:1px solid #b9cbd9; }
.stair-card:hover .stair-more{ background:var(--navy); color:#fff; }
.stairs-next{ text-align:right; font-weight:900; color:var(--blue); margin-top:14px; letter-spacing:.04em; }

@media (max-width:900px){
  .stairs{ grid-template-columns:1fr; gap:16px; padding-left:28px; }
  .stairs::before{ left:8px; right:auto; top:12px; bottom:12px; width:3px; height:auto; transform:none;
    background:linear-gradient(180deg, #22a06b, var(--orange) 50%, #b9c6d1); opacity:.5; }
  .stair.is-now, .stair.is-soon, .stair.is-plan{ margin-top:0; }
  .stair-dot{ position:absolute; left:-26px; top:26px; }
  .stair-card{ display:grid; grid-template-columns:76px 1fr; column-gap:14px; align-items:center; padding:16px 18px 18px; }
  .stair-card > *{ grid-column:2; }
  .stair-icon{ grid-column:1; grid-row:1 / span 3; width:76px; height:76px; margin:0; }
  .stair-lead, .stair-more{ grid-column:1 / -1; }
  .stair-lead{ margin-top:6px; }
  .stair-more{ justify-self:start; }
  .stair-title{ margin-bottom:0; }
  .stairs-next{ text-align:left; }
}