@charset "UTF-8";
/* ==========================================================================
   マーケティングAI サービスサイト 共通スタイル
   デザイントークンは :root に集約。ここにない色は使わない。
   ========================================================================== */

:root{
  /* ブランドカラー */
  --primary:#083388;
  --primary-tint:#EDF2FB;
  --primary-pale:#F2F7FF;
  --green:#01af84;
  --green-tint:#E6F7F2;
  --pink:#FF93A2;
  --pink-deep:#C2415A;   /* ブランドピンクの濃色派生。アラート表示の可読性確保用 */
  --pink-tint:#FFEFF2;
  --green-deep:#0B7A5C;  /* ブランドグリーンの濃色派生。小さい文字・チェック記号の可読性確保用（白地で5.3:1） */
  --green-light:#8FD9C6; /* 反転セクション（紺地）上の見出し・ラベル用 */
  /* テキスト・グレー（ロゴガイドライン準拠） */
  --text:#212121;
  --text-sub:#888888;
  --gray-dark:#404040;
  --gray-light:#D9D9D9;
  --gray-line:#EEF1F5;
  --bg-tint:#F7F9FC;
  --bg-faint:#FAFBFD;    /* 表ヘッダー・入力欄などのごく薄い下地 */
  --mark:#FFF4D6;        /* 規約ページで〔未定〕の箇所に敷く下地（見落とさないため） */
  --text-note:#6B6B6B;   /* 注記・パンくずなど13px前後の小さい文字用（白地で5.3:1）。--text-sub はロゴ準拠のため値を変えない */
  /* ロゴのグラデーション。ロゴ・キービジュアル・飾りの線（カード上辺・大見出しの縦線）・場面の見出しのアイコンの下地に使う。ボタンや広い面の塗りには使わない（2026-10-03） */
  --grad-start:#2E74D2;
  --grad-end:#0FAA96;
  --grad:linear-gradient(90deg,var(--grad-start),var(--grad-end));
  /* 工程の色（2026-10-03）。計画→出稿→改善→報告→集客の順に、ロゴの青から緑へ5段階で混ぜる。文字には使わず、アイコンの下地と線に使う */
  --step-1:var(--grad-start);
  --step-2:color-mix(in srgb,var(--grad-start) 75%,var(--grad-end));
  --step-3:color-mix(in srgb,var(--grad-start) 50%,var(--grad-end));
  --step-4:color-mix(in srgb,var(--grad-start) 25%,var(--grad-end));
  --step-5:var(--grad-end);
  /* 造形 */
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 12px 40px rgba(8,51,136,.06);
  --shadow-lg:0 24px 60px rgba(8,51,136,.10);
  --header-h:72px;
}

/* ---------- reset / base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:'Noto Sans JP',sans-serif;
  color:var(--text);
  line-height:1.8;
  background:#fff;
  font-feature-settings:"palt";
  /* 段落の最終行が1〜2文字だけにならないように調整する */
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:var(--primary)}
ul,ol{list-style:none}
button{font-family:inherit}
.en{font-family:'Poppins','Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums}
.num{font-family:'Poppins',sans-serif;font-variant-numeric:tabular-nums}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:var(--primary);color:#fff;padding:8px 16px;border-radius:var(--radius-sm);z-index:999}

/* ---------- layout ---------- */
/* 本文の最大幅。1120pxでは3列カードの本文が1行20字前後になり改行が多くなるため、1200pxに広げた */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 32px}
section{padding:88px 0}
section.tint{background:var(--bg-tint)}
.center{text-align:center}
.center .sec-lead{margin-left:auto;margin-right:auto}
.sp-only{display:none}

/* ---------- typography ---------- */
h1{font-size:40px;font-weight:700;line-height:1.45;letter-spacing:.01em}
h2{font-size:32px;font-weight:700;line-height:1.5;letter-spacing:.01em}
/* 大見出しの左の縦線（2026-10-03）。セクションの始まりを目で追いやすくする。
   中央寄せ（.center・相談の帯）・規約や会社のような本文のページ（.prose）・アイコン付きの見出し（.h2-ic）には付けない */
.wrap > h2:not(.cta-title):not(.center):not(.h2-ic),.wrap-narrow:not(.prose) > h2:not(.center){position:relative;padding-left:20px}
.wrap > h2:not(.cta-title):not(.center):not(.h2-ic)::before,.wrap-narrow:not(.prose) > h2:not(.center)::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--grad-start),var(--grad-end))}
h3{font-size:20px;font-weight:700;line-height:1.6}
/* 見出しは複数行になるとき各行の長さを揃える（末尾の1語だけが2行目に落ちるのを防ぐ） */
h1,h2,h3,.cta-title{text-wrap:balance}
/* 見出しだけ文節の区切りで折り返す（Chrome系）。本文に掛けると狭いカードで右端がガタつき、「1か／月」のような切れ方も出るので本文は文字単位のまま */
h1,h2,h3,h4,.cta-title{word-break:auto-phrase}
/* 行長を揃える（text-wrap:balance）のは見出しだけ。本文に掛けると1行に収まる所まで2行に割れて途中で改行したように見えるため、本文は body の pretty だけにする */
h4{font-size:17px;font-weight:700}
/* 英語の飾りラベルは読者に情報を与えないため非表示。HTMLからはページ整理のPRで順次除去する */
.sec-label{display:none;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--primary);text-transform:uppercase;margin-bottom:14px}
/* リード文の幅。見出しの幅（約1000px）に対して狭すぎると2行に折れて詰まって見えるため、880pxまで使う */
.sec-lead{margin-top:18px;color:var(--gray-dark);font-size:17px;max-width:960px}
.lead-lg{font-size:18px}
.note{font-size:14px;color:var(--text-note)}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:var(--radius-sm);text-align:center;transition:opacity .2s;padding:14px 32px;font-size:16px;border:2px solid transparent}
.btn:hover{opacity:.85}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{border-color:var(--primary);color:var(--primary);background:#fff}
.btn-sm{padding:9px 20px;font-size:14px;border-width:1px}
.btn-lg{padding:17px 44px;font-size:17px}
.btn-block{display:block;width:100%}

/* ---------- badges ---------- */
/* 強調したい語句の下半分にブランドのピンクでマーカーを引く。ピンクは文字色にすると白地で読みにくいため、背景に使う */
.mark{background:linear-gradient(transparent 62%,var(--pink) 62%);padding:0 2px}
.badge{display:inline-block;font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-tint);border-radius:999px;padding:5px 14px}
.soon-mini{display:inline-block;font-style:normal;font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-tint);border-radius:4px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.soon{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--primary);border-radius:999px;padding:5px 16px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-light);z-index:100}
/* 本文（.wrap）と同じ幅にして、ロゴとパンくず・本文の左端を揃える */
.header-inner{max-width:1200px;margin:0 auto;padding:8px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}
.logo{position:relative}
.logo img{height:100px;width:auto;display:block;margin:-33px 0}
/* ロゴの「by Lifunext」の下に添えるベータ版表記 */
.logo-beta{position:absolute;right:14px;top:100%;margin-top:-1px;font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1;color:var(--primary);background:var(--primary-tint);border-radius:999px;padding:3px 8px}
.gnav{display:flex;align-items:center;gap:28px}
.gnav-list{display:flex;align-items:center;gap:4px}
.gnav-link{display:block;font-size:15px;font-weight:500;color:var(--gray-dark);text-decoration:none;padding:10px 14px;border-radius:var(--radius-sm);background:none;border:none;cursor:pointer;white-space:nowrap}
.gnav-link:hover{color:var(--primary);background:var(--primary-tint)}
.gnav-link.is-current{color:var(--primary);font-weight:700}
.gnav-cta{display:flex;gap:10px;white-space:nowrap}

/* dropdown */
.has-child{position:relative}
.has-child > .gnav-link::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:8px}
.dropdown{position:absolute;top:calc(100% + 10px);left:0;width:340px;background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:12px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s}
.has-child:hover .dropdown,.has-child.is-open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li a,.dropdown li > span{display:block;padding:11px 14px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text)}
.dropdown li a:hover{background:var(--bg-tint)}
.dropdown strong{display:block;font-size:15px;font-weight:700}
.dropdown span span,.dropdown a span{display:block;font-size:14px;color:var(--text-note);font-weight:400;margin-top:1px}
.dropdown .is-soon > span{color:var(--text-note);cursor:default}
.dropdown-all{display:block;margin-top:6px;padding:11px 14px;border-top:1px solid var(--gray-line);font-size:14px;font-weight:700;color:var(--primary);text-decoration:none}

/* hamburger / drawer */
.hamburger{display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;position:relative}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;margin:6px auto;width:22px;transition:transform .2s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.drawer{display:none;border-top:1px solid var(--gray-light);background:#fff;max-height:calc(100vh - var(--header-h));overflow-y:auto;padding:16px 20px 28px}
.drawer-list li{border-bottom:1px solid var(--gray-line)}
.drawer-list a,.drawer-soon{display:block;padding:14px 4px;font-size:16px;text-decoration:none;color:var(--text)}
.drawer-soon{color:var(--text-note)}
.drawer-head{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--primary);padding:20px 4px 6px;border-bottom:none !important}
.drawer-cta{display:grid;gap:10px;margin-top:22px}

/* ---------- breadcrumb ---------- */
/* パンくずはページ冒頭（.page-hero）と同じ背景にして、ひとつの帯に見せる */
.breadcrumb{background:var(--bg-tint)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 0;font-size:14px;color:var(--text-note)}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:var(--text-sub)}
.breadcrumb li[aria-current]{color:var(--text)}
.breadcrumb a{color:var(--text-note);text-decoration:underline;text-decoration-color:var(--gray-light);text-underline-offset:3px}
.breadcrumb a:hover{color:var(--primary)}

/* ---------- page hero（下層共通） ---------- */
.page-hero{padding:48px 0 64px;background:var(--bg-tint);border-bottom:1px solid var(--gray-line)}
.page-hero h1{font-size:38px}
/* h1 の2行目（title の「｜」以降の一言）はサブタイトルとして小さく見せる。h1 の中に入れたままにして title と同じ文を保つ */
.page-hero h1 .h1-sub{display:block;font-size:.5em;font-weight:600;color:var(--gray-dark);margin-top:10px;line-height:1.5}
.page-hero .sec-lead{font-size:17px;margin-top:20px;max-width:none}
/* ページ冒頭の右に置くイラスト（2026-10-05 代理店向け）。透明な余白は画像側で切り落とし、幅を抑えて冒頭の帯が縦に伸びすぎないようにする */
.hero-illust img{display:block;width:100%;max-width:480px;height:auto;margin:0 auto}
@media(max-width:600px){.hero-illust img{max-width:320px}}

/* ---------- FV（TOP） ---------- */
.fv{padding:80px 0 92px;position:relative;overflow:hidden;background:#fff}
/* FV の装飾（斜めの色の帯、2026-10-03 ユーザー選択）。ロゴの青→緑の帯をキャプチャの後ろに斜めに通し、
   その上に同じ色を薄めた細い帯を添える。文章とボタンの裏には帯を通さない（左下 30% から始める）。
   色は :root の --grad-start / --grad-end だけを使う（新しい色コードは置かない）。
   キャプチャは少し傾けたまま。傾きで画面の文字が読みにくいときは rotateY の角度を浅くする */
.fv::before,.fv::after{content:"";position:absolute;inset:0;pointer-events:none}
.fv::before{background:linear-gradient(100deg,color-mix(in srgb,var(--grad-start) 18%,transparent),color-mix(in srgb,var(--grad-end) 18%,transparent));
  clip-path:polygon(22% 100%,100% 12%,100% 25%,30% 100%)}
.fv::after{background:linear-gradient(100deg,var(--grad-start),var(--grad-end));
  clip-path:polygon(30% 100%,100% 25%,100% 72%,55% 100%)}
.fv .fv-inner{z-index:1}
.fv .fv-inner>div:last-child{perspective:1600px}
.fv .shot{transform:rotateY(-6deg) rotateX(2deg);transform-origin:left center;box-shadow:-30px 40px 90px color-mix(in srgb,var(--primary) 32%,transparent)}
.fv-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;position:relative}
/* 列の中の長い見出しが列の幅を押し広げて画面からはみ出さないようにする（2026-10-05 事業会社ページのスマホで発生） */
.fv-inner>*{min-width:0}
/* TOPのファーストビューは右の画面キャプチャを大きくする（2026-10-01 ユーザー指示）。左の文章は530pxで折り返すので右を広くし、
   キャプチャは本文の枠の右端から外へはみ出させる。2026-10-05 に機能ページの冒頭のキャプチャ（.fv-inner-shot）も同じ大きさにした（ユーザー指示）。
   事業会社・代理店のイラストと資料の表紙（.page-hero .fv-inner）は従来の 1.1・1 のまま */
.fv .fv-inner,.fv-inner-shot{grid-template-columns:1fr 1.2fr;gap:48px}
.fv .fv-inner>div:last-child,.fv-inner-shot>div:last-child{margin-right:-60px}
@media(max-width:1280px){.fv .fv-inner>div:last-child,.fv-inner-shot>div:last-child{margin-right:-20px}}
/* タブレット幅では左が狭くなり見出しの「パートナー」が途中で折れるため、比率を戻して見出しを少し小さくする */
@media(max-width:1080px){.fv .fv-inner,.fv-inner-shot{grid-template-columns:1.1fr 1fr;gap:40px}.fv .fv-title{font-size:34px}}
.fv-badges{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}
/* FV のスローガン（p）。h1 と同じ見た目にする。h1 はサービスの説明（.fv-eyebrow）が担う */
.fv-title{font-size:40px;font-weight:700;line-height:1.45;letter-spacing:.01em;color:var(--text);word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
/* スローガンの下の「あとはAIの提案を承認するだけ」。主役の2行より一回り小さくし、マーカーで目に留める */
.fv-tagline{display:block;margin-top:14px;font-size:.68em;line-height:1.5}
.fv-eyebrow{display:block;font-size:16px;font-weight:700;color:var(--primary);letter-spacing:.02em;margin-bottom:14px;line-height:1.6}
/* h1 の一言（title の「｜」以降）。名前の横に細字で添える */
.fv-sub{margin-top:22px;font-size:18px;color:var(--gray-dark);max-width:530px}
.fv-cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
.fv-note{margin-top:14px;font-size:14px;color:var(--text-note)}
/* 事業会社向け・代理店向けの冒頭の右に置く資料ダウンロードのフォーム。中身は HubSpot の iframe（inc/hubspot-form.php） */
.form-card.fv-form{max-width:none;margin:0;padding:32px}
.fv-form-title{margin:0;font-size:20px;line-height:1.5}
.fv-form-lead{margin:6px 0 20px;font-size:15px;color:var(--text-note)}
@media(max-width:900px){.form-card.fv-form{padding:28px 20px}}

/* ---------- 汎用グリッド・カード ---------- */
.grid{display:grid;gap:24px;margin-top:48px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:30px 26px}
.card h3{color:var(--primary)}
.card p{margin-top:10px;font-size:16px;color:var(--gray-dark)}
/* リンクになっているカードは、静止状態でも下辺の色で見分けられるようにする */
/* クリックできるカード。上辺の色の線は数字のカード（.about-stat）・安全設計の要約（.sec-summary）と同じグラデーションにそろえる（2026-09-30 ユーザー指示）。
   押せるかどうかは「〜を見る →」とマウスを乗せたときの浮き上がりで見分ける */
.card-link{text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s}
.card-link::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad)}
.card-link:hover .card-more{text-decoration:underline}
.card-link:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.card-link:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card-more{margin-top:16px;font-size:15px;font-weight:700;color:var(--primary)}
/* カード全体がリンクのとき、「〜を見る」をリンクの色で示す（.card p の灰色より優先） */
.card-link .card-more{color:var(--primary)}
/* カードの中の「〜を見る →」を、本文の長さにかかわらず下端にそろえる（全ページ共通） */
.card,.process-item{display:flex;flex-direction:column}
.card > .soon{align-self:flex-start}
.card .card-more,.process-item .card-more{margin-top:auto;padding-top:16px}
/* 準備中の機能のカードは点線の枠と薄い下地（2026-10-03）。使える機能のカードと見分けられるようにする */
.card.is-soon{background:var(--bg-tint);border-style:dashed;border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
.card.is-soon h3{color:var(--gray-dark)}
.card.is-soon .soon-mini{background:#fff;border:1px solid var(--primary-tint)}
.card-num{font-family:'Poppins',sans-serif;font-size:42px;font-weight:600;color:var(--primary);line-height:1.2;font-variant-numeric:tabular-nums}
.card-num small{font-size:16px;font-weight:700;color:var(--text)}
/* 見出しの頭に入れる番号。見出しの上の小さなラベル（旧 .card-step・.reason-no）はテンプレート調に見えるため 2026-09-30 にやめた */
.h-num{margin-right:.45em;color:var(--primary)}
.card-fact{margin-top:18px;padding-top:16px;border-top:1px dashed var(--gray-light);font-size:15px}
.card-fact b{color:var(--primary);font-family:'Poppins',sans-serif;font-variant-numeric:tabular-nums}

/* タグ列 */
.taglist{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
/* タグは薄い紺の下地（2026-10-03） */
.taglist span{font-size:14px;background:var(--primary-tint);border:1px solid transparent;border-radius:6px;padding:4px 10px;color:var(--primary)}
.taglist span .soon-mini{background:#fff}
.tagbox{margin-top:40px;border:1px solid var(--gray-light);border-radius:var(--radius);padding:30px 32px;background:var(--bg-tint)}
.tagbox h3{font-size:16px}
.tagbox .taglist span{background:#fff;border-color:var(--gray-line);border-radius:999px;padding:6px 16px;font-size:14px}

/* チェックリスト */
.checklist{margin-top:18px}
/* ✓は濃い緑の丸に白抜き（2026-10-03） */
.checklist li{font-size:16px;color:var(--gray-dark);padding:6px 0 6px 32px;position:relative}
.checklist li::before{content:"✓";position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:50%;background:var(--green-deep);color:#fff;font-size:13px;font-weight:700;line-height:20px;text-align:center}
.checklist li.off{color:var(--text-note)}
.checklist li.off::before{content:"−";background:var(--gray-line);color:var(--text-note)}
/* TOPの悩み: アイコン付きのカードを4列（1080px以下は2列）。下に「マーケティングAIとは？」へつなぐ一言と下向きの印 */
.worry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.worry{padding:28px 24px;box-shadow:var(--shadow)}
.worry-icon,.sec-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--primary-tint);color:var(--primary)}
.worry-icon svg,.sec-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.worry h3{margin-top:18px;font-size:18px;line-height:1.5}
.worry p{margin-top:10px;font-size:15px;color:var(--gray-dark)}
.worry-bridge{margin-top:44px;text-align:center;font-size:20px;font-weight:700;color:var(--primary);word-break:auto-phrase;text-wrap:balance}
.worry-bridge::after{content:"";display:block;width:0;height:0;margin:14px auto 0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:12px solid var(--primary)}
@media(max-width:1080px){.worry-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.worry-grid{gap:12px;margin-top:24px}.worry{padding:20px 16px}.worry-icon{width:44px;height:44px}.worry-icon svg{width:22px;height:22px}.worry h3{margin-top:14px;font-size:16px}.worry p{font-size:14px}.worry-bridge{margin-top:32px;font-size:17px}}

/* ---------- 4工程フロー ---------- */
/* 工程カードは数（4つ・5つ）に合わせて1行に並べる。repeat(4) だと5つのとき1枚だけ次の行に落ちる */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:48px}
.process-item{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:30px 26px;position:relative}
/* カードの上段。左に丸い線画の印、右に番号（2026-10-01 追加。印の見た目はセキュリティの4つのチェックの .gate-ic と共通） */
.process-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.process-no{font-family:'Poppins',sans-serif;font-size:22px;font-weight:600;color:var(--primary);line-height:1}
.process-item.is-soon .process-ic{background:#fff;border:1px dashed var(--primary)}
.process-item h3,.process-item h4{margin-top:12px;color:var(--primary)}
.process-item h4{font-size:19px}
.process-item p{margin-top:10px;font-size:15px;color:var(--gray-dark)}
.process-item .taglist span{font-size:13px}

/* ---------- TOPの「マーケティングAIとは？」 ---------- */
/* TOPのメインの説明なので、見出しの下に大きな一文・数字の帯・開発元のパネルを置いて、ほかのセクションより強く見せる。
   要素が多いため、余白と5つの工程のカードはほかのセクションより詰めて縦に長くなりすぎないようにする */
.about-statement{margin-top:14px;font-size:34px;font-weight:700;line-height:1.5;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;word-break:auto-phrase}
.about-sub{margin-top:12px;font-size:18px;font-weight:700;color:var(--primary);word-break:auto-phrase;text-wrap:balance}
.about .sec-lead{margin-top:24px;word-break:auto-phrase}
/* 開発元の認定・パートナーのロゴ（2026-10-05）。白い枠の中にロゴを縦横の比率を保って収める */
.about-partners{margin-top:32px;padding-top:28px;border-top:1px solid var(--gray-line)}
.about-partners h3{font-size:17px;color:var(--primary)}
.partner-logos{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.partner-logos li{display:flex;align-items:center;justify-content:center;height:120px;margin:0;padding:12px 16px;background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius-sm)}
.partner-logos img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:900px){.partner-logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.partner-logos{grid-template-columns:1fr 1fr;gap:8px}.partner-logos li{height:100px;padding:10px 12px}}
/* 「選ぶ理由」の各理由の番号・見出し・説明。見出しはセクションの h2 より小さく、カードの見出しより大きくする */
.reason-h3{margin-top:56px;font-size:22px;color:var(--text)}
.reasons .sec-lead+.reason-h3{margin-top:40px}
.reason-lead{margin-top:8px;font-size:16px;color:var(--gray-dark)}
.reason-chat{margin-top:24px}
/* 選ぶ理由の1つ目「自社だけのAIに成長する」の図（登録するもの4つが左右から中央のマーケティングAIに集まる。下に学習の流れ）。中央は脳のアイコンと線・点で表す */
.grow-map{margin-top:28px;display:grid;grid-template-columns:1fr 56px 240px 56px 1fr;align-items:center;row-gap:24px}
.grow-side{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.grow-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:18px 20px}
.grow-item strong{display:block;font-size:16px}
.grow-item small{display:block;margin-top:2px;font-size:14px;color:var(--gray-dark)}
.grow-item.is-soon{border-style:dashed;border-color:var(--primary)}
.grow-item.is-soon strong{color:var(--text-note)}
.grow-ic{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--primary-tint);color:var(--primary)}
.grow-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-soon .grow-ic{background:#fff;border:1px dashed var(--primary)}
/* 流れる点線。TOPの脳の図の左右と、セキュリティ「4つのチェック」の間で共通に使う。横向きが基本で .is-reverse は逆向き。縦向きは .gate-flow の1080px以下で指定 */
.flow-link{position:relative;height:2px;background:var(--gray-light)}
.flow-link span{position:absolute;left:0;right:0;top:-3px;height:8px;background:radial-gradient(circle,var(--green) 0 3px,transparent 3.5px) 0 50%/20px 8px repeat-x;animation:flow-dots 1.2s linear infinite}
@keyframes flow-dots{to{background-position:20px 50%}}
@keyframes flow-dots-v{to{background-position:50% 20px}}
.flow-link.is-reverse span{animation-direction:reverse}
.grow-brain{position:relative;width:240px;height:240px;display:flex;align-items:center;justify-content:center}
.grow-net{position:absolute;inset:0;width:100%;height:100%}
.grow-net-lines path{fill:none;stroke:var(--primary);stroke-opacity:.18;stroke-width:1.2}
.grow-net-dots circle{fill:var(--green);animation:grow-blink 3s ease-in-out infinite}
.grow-net-dots circle:nth-child(2n){fill:var(--primary);animation-delay:1s}
.grow-net-dots circle:nth-child(3n){animation-delay:2s}
@keyframes grow-blink{0%,100%{opacity:.35}50%{opacity:1}}
/* AIの印（inc/ai-core.php）。ロゴのグラデーションの丸に脳のアイコンを置き、薄い輪がゆっくり広がる。
   -lg はTOPの脳の図の中心、-sm はセキュリティ「4つのチェック」の左端。輪の太さは --ring で大きさごとに変える */
.ai-core{--ring:10px;position:relative;border-radius:50%;background:var(--grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 0 var(--ring) var(--primary-tint);animation:core-pulse 3s ease-in-out infinite}
.ai-core svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ai-core-lg{width:150px;height:150px}
.ai-core-lg svg{width:64px;height:64px}
.ai-core-sm{--ring:5px;width:64px;height:64px}
.ai-core-sm svg{width:32px;height:32px}
.ai-core-name{font-size:14px;font-weight:700}
@keyframes core-pulse{0%,100%{box-shadow:0 0 0 var(--ring) var(--primary-tint)}50%{box-shadow:0 0 0 calc(var(--ring) * 1.8) var(--primary-tint)}}
.grow-loop{grid-column:1/-1;justify-self:center;display:flex;align-items:center;gap:12px;padding:12px 24px;border:1px dashed var(--primary);border-radius:999px;background:#fff}
.grow-loop p{font-size:15px;color:var(--gray-dark)}
@media(prefers-reduced-motion:reduce){.flow-link span,.grow-net-dots circle,.ai-core{animation:none}}
/* スマホは脳を上に置き、登録するもの4つを下に並べる。左右の線は出さない */
@media(max-width:900px){
  .grow-map{grid-template-columns:1fr;justify-items:center;row-gap:12px}
  .grow-brain{order:-1;margin-bottom:8px}
  .grow-side{width:100%;gap:12px}
  .grow-map .flow-link{display:none}
  .grow-loop{margin-top:8px;border-radius:var(--radius);padding:14px 18px}
}
.reason-chat .checklist li strong{display:block;color:var(--primary)}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.about-stat{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.about-stat::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad)}
.about-num{font-size:40px;font-weight:600;color:var(--primary);line-height:1.1}
.about-num small{font-family:'Noto Sans JP',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-left:4px}
.about-stat p{margin-top:6px;font-size:14px;color:var(--gray-dark)}
/* 試算・実測の札（.data-tag）と、セクションの最後にまとめる注記（.note-list）。代理店ページの「導入で減る作業時間」で使う（2026-10-02） */
.data-tag{flex:none;display:inline-block;margin-left:8px;padding:0 8px;border-radius:4px;font-size:13px;font-weight:700;line-height:1.7;vertical-align:2px;background:var(--gray-line);color:var(--text-note)}
.data-tag.is-real{background:var(--primary-tint);color:var(--primary)}
.note-list{margin-top:32px;padding-left:1.2em;list-style:disc;font-size:14px;line-height:1.8;color:var(--text-note)}
.note-list li{list-style:disc}
/* 代理店ページの「導入で減る作業時間」。並びは営業資料と同じく左に作業ごとの表・右に削減率を大きく出すパネル（2026-10-02）。
   色と枠はサイトに合わせ、白地・灰色の枠・上辺のグラデーションの線（.about-stat と同じ）・紺の文字にする。削減率の数字だけ「とは」の一文と同じグラデーションの文字 */
.time-board{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;margin-top:24px;align-items:stretch}
.time-board .table-scroll{margin:0}
.time-table td{vertical-align:middle}
.time-sub{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--text-note)}
.time-table td.time-cut{font-weight:700;color:var(--primary)}
.time-table tr.time-total td{background:var(--primary-pale);color:var(--primary);font-weight:700}
.time-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:30px 28px 24px;box-shadow:var(--shadow);color:var(--text)}
.time-hero::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad)}
.time-hero-label{font-size:15px;font-weight:700;color:var(--text)}
.time-hero-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 0 4px}
.time-hero-num{margin-top:6px;font-size:96px;font-weight:700;line-height:1.05;color:var(--primary)}
.time-hero-num span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.time-hero-num small{font-family:'Noto Sans JP',sans-serif;font-size:28px;font-weight:700;margin:0 2px}
.time-hero-sub{margin-top:10px;font-size:15px;font-weight:700;color:var(--primary)}
.time-hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.time-hero-card{background:var(--primary-pale);border-radius:var(--radius-sm);padding:14px 16px;color:var(--text)}
.time-hero-card-label{font-size:12px;font-weight:700;color:var(--gray-dark)}
.time-hero-card-num{margin-top:4px;font-size:34px;font-weight:700;line-height:1.1;color:var(--primary)}
.time-hero-card-num small{font-family:'Noto Sans JP',sans-serif;font-size:14px;margin-left:3px}
.time-hero-card-sub{margin-top:4px;font-size:12px;color:var(--gray-dark)}
@media(max-width:1080px){.time-board{grid-template-columns:1fr}.time-hero{order:-1}}
@media(max-width:600px){.time-hero{padding:22px 20px 20px}.time-hero-num{font-size:72px}.time-hero-cards{gap:8px}.time-hero-card-num{font-size:28px}}
/* 代理店ページの場面ごとのブロック（2026-10-02）。5場面の図を各ブロックに組み込んだ。
   目次（.scene-nav）・場面の札と課題（.scene-meta）・導入前と導入後の2行（.scene-change。導入前は灰色、導入後は紺の太字） */
.scene-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:64px;padding-top:32px;border-top:1px solid var(--gray-light)}
.scene-nav-label{width:100%;margin-bottom:4px;font-size:18px;font-weight:700;color:var(--text)}
.scene-nav a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px 6px 12px;border:1px solid var(--gray-light);border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:var(--primary);text-decoration:none}
.scene-nav a:hover{border-color:var(--primary)}
.scene-nav svg,.scene-tag svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scene-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.scene-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 9px;border-radius:999px;background:var(--primary-tint);font-size:13px;font-weight:700;color:var(--primary)}
.scene-issue{font-size:12px;line-height:1.6;color:var(--text-note)}
.scene-issue b{display:inline-block;margin-right:6px;padding:0 6px;border:1px solid var(--gray-light);border-radius:4px;font-size:10px;font-weight:700;color:var(--text-note)}
.scene-change{margin-top:16px;border:1px solid var(--gray-light);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.scene-change p{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:baseline;padding:10px 14px;font-size:14px;line-height:1.6}
.scene-change p span{font-size:11px;font-weight:700}
.scene-change .is-before{background:var(--bg-faint);border-bottom:1px dashed var(--gray-light);color:var(--gray-dark)}
.scene-change .is-before span{color:var(--text-note)}
.scene-change .is-after{font-size:15px;font-weight:700;color:var(--primary)}
.scene-change .is-after span{color:var(--primary)}
.scene-change+.checklist{margin-top:16px}
/* スマホでは場面の札と見出しを画面より先に出す */
@media(max-width:900px){.featrow.scene-block .featrow-body,.featrow.rev.scene-block .featrow-body{order:-1}}
.reasons .process{margin-top:20px;gap:14px}
.reasons .process-item{padding:22px 20px}
.reasons .process-no{font-size:18px}
.reasons .process-item h4{font-size:18px}
.reasons .process-item p{font-size:14px;margin-top:6px}
.reasons .process-item .taglist{margin-top:10px;gap:6px}
.reasons .process-item .taglist span{font-size:13px;padding:3px 10px}
/* 上の .reasons .process-item p の margin-top が「〜を見る →」にも効いて下端にそろわなくなるため、ここで auto に戻す */
.reasons .process-item .card-more{margin-top:auto;padding-top:12px;font-size:14px}
/* 選ぶ理由の「運用が回る」の4工程（2026-10-01）。4枚を横一列に並べてカードのあいだを矢印でつなぎ、04 の下から 01 へ戻る線で一周を見せる。
   線は動かさない。カードの上に、AIと担当者が回す6つの手順を横一行で置く（承認だけピンク。最後の印は最初の手順に戻ることを表す） */
.loop-gate-label{margin-top:20px;font-size:14px;font-weight:700;color:var(--primary)}
.loop-gate{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:8px}
.loop-gate li{position:relative;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--gray-light);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;color:var(--gray-dark);white-space:nowrap}
.loop-gate li+li::before{content:"";position:absolute;left:-19px;top:50%;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--primary)}
.loop-gate .is-human{background:var(--pink-tint);border-color:var(--pink);color:var(--pink-deep)}
.loop-gate svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.loop-gate-back{position:absolute;right:-30px;top:50%;margin-top:-9px;display:flex;color:var(--green)}
.loop-gate-back svg{width:18px;height:18px}
.loop{--loop-arrow:26px;display:grid;grid-template-columns:1fr var(--loop-arrow) 1fr var(--loop-arrow) 1fr var(--loop-arrow) 1fr;margin-top:16px}
.loop-arrow{position:relative}
.loop-arrow::before{content:"";position:absolute;left:3px;right:8px;top:50%;height:2px;margin-top:-1px;background:var(--green)}
.loop-arrow::after{content:"";position:absolute;right:1px;top:50%;margin-top:-6px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--green)}
/* 戻る線は 04 の真ん中から下に出て、01 の真ん中に下から入る */
.loop-back{grid-column:1/-1;position:relative;height:26px;margin:0 calc((100% - 3 * var(--loop-arrow)) / 8);border:2px solid var(--green);border-top:0;border-radius:0 0 12px 12px}
.loop-back::before{content:"";position:absolute;left:-8px;top:-2px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid var(--green)}
.loop-back::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-5px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:9px solid var(--green)}
.loop-soon{margin-top:16px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;padding:16px 22px}
.loop-soon .process-head{grid-row:1/3}
.loop-soon h4{margin-top:0}
.loop-soon p{margin-top:2px}
/* タブレットは2列、スマホは1列。矢印と戻る線は出さず、番号の順で読ませる */
@media(max-width:1080px){
  .loop{grid-template-columns:1fr 1fr;gap:14px}
  .loop-arrow,.loop-back{display:none}
}
@media(max-width:600px){
  .loop{grid-template-columns:1fr}
  .loop-gate{flex-direction:column;align-items:flex-start;gap:14px}
  .loop-gate li+li::before{left:18px;top:-12px;margin-top:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--primary);border-bottom:0}
  .loop-soon{grid-template-columns:1fr;padding:20px}
  .loop-soon .process-head{grid-row:auto}
  .loop-soon h4{margin-top:12px}
}
/* 大きな一文の下の一文。ロゴを文の主語として文字と同じ行に並べ、運営会社へのリンクを文のすぐ後ろに置く */
.about-sub .lfn-logo{display:inline-block;height:1.1em;width:auto;vertical-align:-.17em;margin-right:6px}
.about-sub a{margin-left:14px;font-size:15px;white-space:nowrap;color:var(--primary);text-decoration:none}

/* ---------- 媒体ロゴ ---------- */
.media-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.media-list span{border:1px solid var(--gray-light);border-radius:var(--radius-sm);padding:10px 20px;font-size:15px;font-weight:500;color:var(--gray-dark);background:#fff}
/* 広告機能ページの対応媒体（inc/ad-media.php）。ロゴは元の色のまま出す（各社の規定で色の変更は不可が多い） */
.ad-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.ad-media-grid.is-soon{grid-template-columns:repeat(4,1fr);margin-top:16px}
.ad-media-card{padding:24px 16px;align-items:center;text-align:center}
.ad-media-logo{height:48px;display:flex;align-items:center;justify-content:center;gap:10px}
.ad-media-logo img{width:auto;max-width:100%;object-fit:contain}
.card .ad-media-name{margin-top:14px;font-weight:700;color:var(--text)}
.card .ad-media-sub{margin-top:2px;font-size:14px;color:var(--text-note)}
.ad-media-tags{justify-content:center;gap:6px}
.ad-media-tags span{font-size:13px;padding:3px 10px}
.ad-media-card.is-soon{justify-content:center;padding:18px 16px}
.card.is-soon .ad-media-name{margin-top:0;color:var(--gray-dark)}
.ad-media-soon-head{margin-top:48px}
.ad-media-strip{margin-top:28px}
.ad-media-strip-label{margin-bottom:10px;font-size:14px;font-weight:700;color:var(--text-note)}
.ad-media-strip-logos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;text-decoration:none}
.ad-media-strip-logos img{width:auto;max-width:100%;object-fit:contain}
.ad-media-strip-logos:focus-visible{outline:3px solid var(--primary);outline-offset:6px;border-radius:var(--radius-sm)}
@media(max-width:860px){.ad-media-grid,.ad-media-grid.is-soon{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:600px){.ad-media-logo img{max-width:120px}}

/* ---------- セキュリティ（inc/safety.php） ---------- */
/* h2 の下を「4つのチェック」と「データとアカウントの仕組み」の2つの小見出し（h3）に分ける */
.sec-sub{margin-top:48px;font-size:20px}
/* 左端のAIの印から右端の媒体まで、4つのチェックを流れる点線（.flow-link）でつないで横に並べる。濃紺はCTAだけに使うため、カードは白地にする */
.gate-flow{display:flex;align-items:stretch;margin-top:28px}
.gate-flow .flow-link{flex:0 0 30px;align-self:center;margin:0 4px}
.gate-end{flex:0 0 92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:14px;font-weight:700;color:var(--primary);text-align:center}
/* 右端の媒体の印。左端のAIの印と同じ大きさの薄紺の丸 */
.gate-media{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--primary-tint);color:var(--primary)}
.gate-media svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gate{flex:1;background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow)}
/* カードの上段。左に印、右に番号 */
.gate-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gate-ic,.process-ic,.stage-ic,.change-ic{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--primary-tint);color:var(--primary)}
.gate-ic svg,.process-ic svg,.stage-ic svg,.change-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gate-no{display:inline-block;font-size:14px;font-weight:600;color:var(--primary);background:var(--primary-tint);border-radius:999px;padding:1px 12px}
.gate h3,.gate h4{margin-top:14px;font-size:17px;line-height:1.5;color:var(--primary)}
.gate p{margin-top:8px;font-size:14px;color:var(--gray-dark)}
/* 人が承認する02を主役にする。枠を太くした分だけ内側の余白を減らして大きさを揃える。印と番号はマーカーと同じピンク */
.gate-human{border:2px solid var(--primary);padding:21px 19px;box-shadow:var(--shadow-lg)}
.gate-human .gate-no,.gate-human .gate-ic{background:var(--pink-tint);color:var(--pink-deep)}
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.sec-grid-3{grid-template-columns:repeat(3,1fr)}
.sec-card{padding:26px 22px}
.sec-card h3,.sec-card h4{margin-top:16px;font-size:17px;line-height:1.5;color:var(--primary)}
/* 粒度の大きい版（TOP）の4枚。見出しが文なので少し大きくする。
   上端の線は「マーケティングAIとは？」の数字のカード（.about-stat）とそろえる。
   図の高さがカードごとに違うため、subgrid で図・見出し・本文の行を横のカードとそろえる（2026-10-01） */
.sec-summary{margin-top:32px}
.sec-summary .sec-card{position:relative;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.sec-summary .sec-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad)}
.sec-summary .sec-card h3{margin-top:20px;font-size:18px}
/* カードの上の小さな図。画面の一部のように見せる飾り */
.sec-viz{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;min-height:132px;background:var(--primary-pale);border-radius:var(--radius-sm);padding:16px 18px}
.viz-label{font-size:13px;font-weight:700;color:var(--primary)}
.viz-bar{display:block;width:100%;height:8px;border-radius:4px;background:var(--gray-light)}
.viz-bar.is-short{width:60%}
.viz-actions{display:flex;gap:8px;margin-top:4px}
.viz-actions span{font-size:13px;font-weight:700;border:1px solid var(--gray-light);border-radius:var(--radius-sm);padding:4px 16px;color:var(--gray-dark);background:#fff}
.viz-actions .is-ok{background:var(--primary);border-color:var(--primary);color:#fff}
.viz-tags{display:flex;flex-wrap:wrap;gap:6px}
.viz-tags span{font-size:13px;font-weight:700;color:var(--primary);background:#fff;border:1px solid var(--gray-light);border-radius:999px;padding:3px 10px}
.viz-row{display:flex;justify-content:space-between;gap:12px;width:100%;background:#fff;border-radius:6px;padding:4px 12px;font-size:13px;color:var(--gray-dark)}
.viz-val{font-weight:700;color:var(--primary)}
.viz-chip{font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-tint);border-radius:999px;padding:2px 10px}
/* AIの学習のカードの図。上が担当者の質問、下がAIの回答の吹き出し */
.viz-msg{display:flex;flex-direction:column;gap:6px;width:78%;background:#fff;border-radius:10px;padding:8px 12px}
.viz-msg.is-user{align-self:flex-end;width:56%;background:var(--primary)}
.viz-msg .viz-bar{height:6px}
.viz-msg.is-user .viz-bar{background:#fff;opacity:.5}
.sec-card p{margin-top:8px;font-size:15px;color:var(--gray-dark)}
/* 共通機能「5種類の役割」の役割ごとにできること */
/* 共通機能「案件管理・権限」の5種類の役割の表（2026-10-03）と3階層の図（.tier-flow は .stage-flow の再利用） */
.tier-flow{margin-top:36px}
.role-title{margin-top:48px;font-size:20px;color:var(--primary)}
.role-lead{margin-top:8px;color:var(--gray-dark)}
table.tbl-roles th,table.tbl-roles td{text-align:center;vertical-align:middle}
table.tbl-roles th:first-child{text-align:left;width:18%}
table.tbl-roles tbody th{font-weight:700;color:var(--primary)}
.role-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text-note)}
.role-mark.is-yes{border-radius:50%;background:var(--green-tint);color:var(--green-deep)}
.role-mark svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* ---------- 事業会社「段階的な内製化の進め方」 ---------- */
/* 3段階のカードを山形の矢印（.stage-arrow）でつなぐ（LPO「行動計測機能」の手順でも使う）。手順の図なので流れる点線のアニメーションは使わない（2026-10-01 ユーザー指示）。
   事業会社ではカードの下端に「マーケティングAIが行うこと」の帯（3区切りで、段階が進むほど点いている区切りが増える）と「担当者が行うこと」の1行を置く */
.stage-flow{display:flex;align-items:stretch;margin-top:32px}
.stage-arrow{flex:0 0 36px;position:relative}
.stage-arrow::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-6px 0 0 -8px;border-top:2px solid var(--primary);border-right:2px solid var(--primary);transform:rotate(45deg)}
.stage-you{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-line);font-size:14px;color:var(--text)}
.stage-you b{flex:none;font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-tint);border-radius:4px;padding:1px 8px}
.stage{flex:1}
.stage-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stage-no{font-family:'Poppins',sans-serif;font-size:20px;font-weight:600;color:var(--primary);line-height:1}
.stage h3,.stage h4{margin-top:12px}
.stage h4{font-size:18px;color:var(--primary)}
/* ---------- 事業会社「担当者の作業はこう変わる」 ---------- */
/* 場面ごとに導入前（破線の薄いカード）と導入後（白いカード・上辺グラデーション）を横に並べ、間に山形の矢印を置く。
   前後の変化を示す図なので、流れる点線のアニメーション（.flow-link）は使わない（2026-10-01 ユーザー指示） */
.change-list{display:grid;gap:14px;margin-top:28px}
.change-row{display:grid;grid-template-columns:180px 1fr 44px 1.2fr;align-items:center}
.change-scene{display:flex;align-items:center;gap:12px;padding-right:16px;font-size:16px;font-weight:700}
.change-before,.change-after{display:flex;flex-direction:column;justify-content:center;min-height:96px;border-radius:var(--radius);padding:16px 20px}
.change-before{background:#fff;border:1px dashed var(--gray-light);color:var(--text-note)}
.change-before p{font-size:15px;color:var(--gray-dark)}
/* 導入前の作業の下に、その作業がつながる課題を小さく添える */
.change-before small{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--text-note)}
.change-before small b{display:inline-block;margin-right:6px;padding:0 6px;border:1px solid var(--gray-light);border-radius:4px;font-size:12px;font-weight:700;color:var(--text-note)}
.change-tag{align-self:flex-start;font-size:13px;font-weight:700;border-radius:4px;padding:1px 8px;margin-bottom:6px;background:var(--gray-line);color:var(--text-note)}
.change-after{position:relative;overflow:hidden;background:#fff;border:1px solid var(--gray-light);box-shadow:var(--shadow);color:var(--text)}
.change-after::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad)}
.change-after .change-tag{background:var(--primary-tint);color:var(--primary)}
.change-after p{position:relative;padding-left:24px;font-size:16px;font-weight:700;color:var(--primary);line-height:1.6}
.change-after p::before{content:"✓";position:absolute;left:0;top:0;color:var(--green-deep)}
.change-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.change-feats{display:flex;flex-wrap:wrap;gap:6px}
.change-feat{font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-tint);border-radius:999px;padding:2px 10px}
/* 順次提供の機能は破線の白い印にして、提供中の印と見分ける */
.change-feat.is-soon{background:#fff;border:1px dashed var(--primary);padding:1px 9px}
.change-feat.is-soon span{margin-left:4px;font-weight:400;color:var(--text-note)}
.change-after .card-more{margin:0;padding:0;font-size:14px;white-space:nowrap}
/* 導入前と導入後の間の山形の矢印 */
.change-arrow{position:relative;height:100%}
.change-arrow::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-6px 0 0 -8px;border-top:2px solid var(--primary);border-right:2px solid var(--primary);transform:rotate(45deg)}
@media(max-width:900px){
  .change-list{gap:20px}
  .change-row{grid-template-columns:1fr;gap:8px}
  .change-scene{padding:0}
  .change-arrow{height:22px}
  .change-arrow::before{margin:-8px 0 0 -5px;transform:rotate(135deg)}
}
/* 要素を流れる点線でつなぐ横並びの図（LPO「広告データとの連携」の 広告→LP→CV）。LPO機能が見ている要素は .is-lpo で緑にする */
.node-flow{display:flex;align-items:flex-start;justify-content:center;margin-top:28px;margin-bottom:28px}
.node-flow .flow-link{flex:0 1 140px;margin:31px 8px 0}
.node{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.node-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--primary-tint);color:var(--primary)}
.node-ic svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.node strong{font-size:16px;color:var(--primary)}
.node small{font-size:13px;line-height:1.5;color:var(--text-note)}
.node.is-lpo .node-ic{background:var(--green-tint);color:var(--green-deep)}
.node.is-lpo strong{color:var(--green-deep)}
/* 準備中の要素は破線の丸にする（会社ページの「集客」） */
.node.is-soon .node-ic{background:#fff;border:1px dashed var(--primary)}
.node .soon-mini{margin-left:0}
/* 小さい版。会社ページ「マーケティングAIについて」の5つの工程。本文の幅（820px）に5つ並べる */
.node-flow-sm{margin:8px 0 28px}
.node-flow-sm .node{flex:0 0 112px;gap:4px}
.node-flow-sm .node-ic{width:48px;height:48px}
.node-flow-sm .node-ic svg{width:24px;height:24px}
.node-flow-sm .node strong{font-size:15px}
.node-flow-sm .flow-link{flex:0 1 48px;margin:23px 2px 0}
.stage-range{margin-top:auto;padding-top:20px}
.stage-range-label{display:block;font-size:13px;font-weight:700;color:var(--primary)}
.stage-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.stage-bar i{display:block;height:8px;border-radius:4px;background:var(--gray-line)}
.stage-bar i.is-on{background:var(--green)}
.stage-bar-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px;font-size:13px;line-height:1.4;color:var(--text-note);text-align:center}
.stage-bar-labels .is-on{color:var(--primary);font-weight:700}
/* 1080px以下は4つのチェックと3段階を縦に並べ、点線を下向きに流す */
@media(max-width:1080px){
  .gate-flow,.stage-flow{flex-direction:column;align-items:center}
  .gate,.stage{width:100%}
  .gate-flow .flow-link{flex:0 0 28px;width:2px;height:28px;margin:4px 0}
  .gate-flow .flow-link span{top:0;bottom:0;left:-3px;right:auto;width:8px;height:auto;background:radial-gradient(circle,var(--green) 0 3px,transparent 3.5px) 50% 0/8px 20px repeat-y;animation-name:flow-dots-v}
  .stage-arrow{flex:0 0 22px;width:100%;height:22px}
  .stage-arrow::before{margin:-8px 0 0 -5px;transform:rotate(135deg)}
  .node{flex:1 1 0;min-width:0}
  .node-flow .flow-link{flex:0 0 32px;margin:31px 4px 0}
  .node small{font-size:12px}
  .node-flow-sm .node{flex:1 1 0}
  .node-flow-sm .flow-link{flex:0 0 16px;margin:23px 2px 0}
  .gate-end{flex:none;flex-direction:row;gap:12px}
  .gate-end .ai-core-sm,.gate-media{width:48px;height:48px}
  .gate-end .ai-core-sm svg,.gate-media svg{width:24px;height:24px}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
}
/* 3階層の図（共通機能）はカードが短いので 901〜1080px でも横に並べる（2026-10-03） */
@media(min-width:901px) and (max-width:1080px){
  .tier-flow{flex-direction:row;align-items:stretch}
  .tier-flow .stage{width:auto}
  .tier-flow .stage-arrow{flex:0 0 28px;width:auto;height:auto}
  .tier-flow .stage-arrow::before{margin:-6px 0 0 -8px;transform:rotate(45deg)}
}
@media(max-width:600px){
  .sec-sub{margin-top:40px;font-size:18px}
  .sec-grid{grid-template-columns:1fr;gap:12px}
}

/* ---------- 導入の流れ ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px}
/* 8段階の流れは4列×2行で並べる（TOPの導入の流れ） */
.steps.steps-4{grid-template-columns:repeat(4,1fr)}
.step{border:1px solid var(--gray-light);border-radius:var(--radius);padding:26px 22px;background:#fff}
.step > .process-ic{margin-bottom:14px}
.steps.is-linked{column-gap:32px}
.steps.is-linked .step{position:relative}
.steps.is-linked .step + .step::before{content:"";position:absolute;left:-22px;top:50%;width:10px;height:10px;margin-top:-6px;border-top:2px solid var(--primary);border-right:2px solid var(--primary);transform:rotate(45deg)}
@media(max-width:1080px){.steps.is-linked{column-gap:16px}.steps.is-linked .step + .step::before{display:none}}
.step h3{font-size:17px}
.step p{font-size:15px;color:var(--gray-dark);margin-top:8px}

/* ---------- 料金 ---------- */
.tabs{display:inline-flex;background:#fff;border:1px solid var(--gray-light);border-radius:999px;padding:5px;margin:40px auto 0;gap:4px}
.tab-btn{border:none;background:transparent;font-size:15px;font-weight:700;color:var(--text-note);padding:10px 30px;border-radius:999px;cursor:pointer;transition:all .15s}
.tab-btn.is-active{background:var(--primary);color:#fff}
.tab-pane{display:none}
.tab-pane.is-active{display:block}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;text-align:left}
.plan-stack{margin-top:36px;display:flex;flex-direction:column}
.plan-tier{--c:var(--primary);display:grid;grid-template-columns:240px 1fr;border:1px solid var(--gray-light);border-radius:var(--radius);overflow:hidden;background:#fff}
.plan-tier.is-free{--c:color-mix(in srgb,var(--grad-end) 60%,var(--primary))}
.plan-tier.is-inhouse{--c:color-mix(in srgb,var(--grad-start) 75%,var(--primary))}
.plan-tier-name{background:var(--c);color:#fff;padding:18px 22px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.plan-tier-name b{font-size:18px}
.plan-tier-name small{font-size:14px}
.plan-tier-items{display:flex;flex-wrap:wrap;gap:8px;padding:18px 20px;align-content:center}
.plan-tier-items li{font-size:15px;background:color-mix(in srgb,var(--c) 10%,transparent);color:var(--primary);border-radius:6px;padding:6px 12px}
.plan-plus{align-self:flex-start;margin:-2px 0 -2px 106px;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--gray-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:18px;line-height:1;position:relative;z-index:1}
@media(max-width:900px){.plan-tier{grid-template-columns:1fr}.plan-tier-name{padding:14px 18px}.plan-tier-items{padding:14px 16px}.plan-plus{margin-left:18px}}
/* 料金ページのカードはチェック項目を積み上げ図に移したので、ボタンを下にそろえる */
.plans.is-compact .plan-meta{margin-bottom:24px}
.plans.is-compact .plan .btn{margin-top:auto}
.plan{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:36px 30px;display:flex;flex-direction:column}
.plan.is-main{border:2px solid var(--primary);box-shadow:var(--shadow);position:relative}
.plan-flag{position:absolute;top:-13px;left:30px;background:var(--primary);color:#fff;font-size:13px;font-weight:700;border-radius:999px;padding:4px 16px}
.plan-name{font-size:20px;font-weight:700;color:var(--primary)}
.plan-for{font-size:15px;color:var(--text-note);margin-top:4px;min-height:44px}
.plan-price{margin-top:14px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.plan-price .amt{font-family:'Poppins',sans-serif;font-size:38px;font-weight:600;font-variant-numeric:tabular-nums}
.plan-price .unit{font-size:15px;color:var(--gray-dark)}
.plan-init{font-size:15px;color:var(--green-deep);font-weight:700;margin-top:6px}
.plan-meta{margin-top:14px;font-size:15px;color:var(--gray-dark);background:var(--bg-tint);border-radius:var(--radius-sm);padding:10px 14px}
.plan .checklist{flex:1}
.plan .btn{margin-top:24px}

/* テーブル */
.table-scroll{overflow-x:auto;margin-top:32px;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;min-width:640px;border-collapse:collapse;background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);overflow:hidden;font-variant-numeric:tabular-nums}
table.tbl th,table.tbl td{padding:14px 16px;font-size:15px;text-align:left;border-bottom:1px solid var(--gray-line);vertical-align:top}
table.tbl thead th{background:var(--bg-faint);font-size:14px;color:var(--gray-dark);font-weight:700;line-height:1.5}
table.tbl thead th.ours{background:var(--primary);color:#fff}
table.tbl td.ours{background:var(--primary-pale);color:var(--primary);font-weight:700}
/* 料金の比較表はプラン3列を同じ幅にする（おすすめ列だけ狭くなって「月／1,000万」のように切れるのを防ぐ） */
table.tbl-compare th:first-child{width:34%}
table.tbl-compare th:not(:first-child){width:22%}
/* 他社ツール比較（TOP）は5列。項目列と自社の列を広くし、他社の3列は同じ幅 */
table.tbl-tools th:first-child{width:22%}
table.tbl-tools th.ours{width:27%}
table.tbl-tools th:not(:first-child):not(.ours){width:17%}
table.tbl-tools .tbl-group td{background:var(--bg-faint);color:var(--gray-dark);font-weight:700;font-size:14px;padding:10px 16px}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl td.num-cell,table.tbl th.num-cell{text-align:right;font-family:'Poppins',sans-serif}
.tbl-yes{color:var(--green-deep);font-weight:700}
.tbl-no{color:var(--text-note)}
/* 画面一覧の表（レポート自動化の25画面の内訳）: グループ名を紺で目立たせ、画面名をタグで並べる */
.tbl-screens td:first-child strong{color:var(--primary);font-size:16px}
.tbl-screens .taglist{margin-top:0}
.tbl-screens td{vertical-align:middle}

/* ---------- FAQ ---------- */
.faq-group{margin-top:48px}
.faq-group h2{font-size:20px;color:var(--primary);margin-bottom:8px}
.faq-item{border-bottom:1px solid var(--gray-light)}
.faq-item:first-of-type{border-top:1px solid var(--gray-light)}
.faq-q-h{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
h3.plan-name{margin:0}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-size:17px;font-weight:700;padding:22px 44px 22px 30px;position:relative;color:var(--text);line-height:1.6}
.faq-q::before{content:"Q";position:absolute;left:0;top:22px;color:var(--primary);font-family:'Poppins',sans-serif;font-weight:600}
.faq-q::after{content:"";position:absolute;right:8px;top:30px;width:9px;height:9px;border-right:2px solid var(--text-note);border-bottom:2px solid var(--text-note);transform:rotate(45deg);transition:transform .2s}
.faq-q[aria-expanded="true"]::after{transform:rotate(-135deg)}
.faq-a{font-size:16px;color:var(--gray-dark);padding:0 44px 24px 30px;position:relative}
.faq-a::before{content:"A";position:absolute;left:0;top:0;color:var(--green-deep);font-family:'Poppins',sans-serif;font-weight:600}
.faq-a[hidden]{display:none}

/* ---------- アンカーナビ（長尺ページ用） ---------- */
.anchor-nav{position:sticky;top:var(--header-h);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-light);z-index:50}
.anchor-nav ul{display:flex;gap:4px;overflow-x:auto;padding:10px 0;-webkit-overflow-scrolling:touch}
.anchor-nav a{font-size:15px;font-weight:700;color:var(--gray-dark);text-decoration:none;padding:10px 16px;border-radius:999px;white-space:nowrap}
.anchor-nav a:hover{background:var(--primary-tint);color:var(--primary)}
/* スマホではメニューが横にはみ出すので、右端を白くぼかして続きがあることを示す（PC は全項目が収まるので出さない） */
@media(max-width:900px){
  .anchor-nav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));pointer-events:none}
  .anchor-nav ul{padding-right:56px}
}

/* ---------- フォーム ---------- */
.form-card{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);padding:48px;box-shadow:var(--shadow);max-width:680px;margin:0 auto}
.field{margin-bottom:26px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-card label{display:block;font-size:15px;font-weight:700;margin-bottom:8px}
/* ラジオ群を fieldset/legend で囲むための初期化（見た目は label と同じ） */
.form-card fieldset{border:0;padding:0;margin:0;min-width:0}
.form-card legend{display:block;font-size:15px;font-weight:700;margin-bottom:8px;padding:0}
.req,.opt{font-size:13px;font-weight:700;border-radius:4px;padding:2px 8px;margin-left:8px;vertical-align:2px}
.req{background:var(--primary);color:#fff}
.opt{background:var(--gray-line);color:var(--text-note)}
.form-card input[type=text],.form-card input[type=email],.form-card input[type=tel],.form-card select,.form-card textarea{
  width:100%;border:1px solid var(--gray-light);border-radius:var(--radius-sm);background:var(--bg-faint);padding:13px 16px;
  font-size:16px;font-family:inherit;color:var(--text);transition:border-color .15s,box-shadow .15s;appearance:none}
.form-card select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(8,51,136,.10)}
.form-card ::placeholder{color:var(--text-sub)}
.form-card textarea{min-height:110px;resize:vertical}
.hint{font-size:14px;color:var(--text-note);margin-top:6px}
/* 送信エラー時の項目ごとの表示 */
.is-invalid input,.is-invalid select,.is-invalid .choice span{border-color:var(--pink-deep)}
.field-error{font-size:14px;font-weight:700;color:var(--pink-deep);margin-top:6px}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* ラジオは display:none だとキーボードで選べないため、見えない位置に置いてフォーカスはカード側に表示する */
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.choice input:focus-visible+span{outline:3px solid var(--primary);outline-offset:2px}
.choice span{display:block;border:1px solid var(--gray-light);border-radius:var(--radius-sm);background:#fff;padding:14px 16px;font-size:15px;font-weight:700;text-align:center;cursor:pointer;transition:all .15s}
.choice span small{display:block;font-size:13px;font-weight:400;color:var(--text-note);margin-top:2px}
.choice input:checked+span{border-color:var(--primary);background:var(--primary-tint);color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.agree{display:flex;justify-content:center;gap:10px;align-items:center;margin-top:22px;font-size:14px}
.agree input{width:17px;height:17px;accent-color:var(--primary)}
.agree label{margin:0;font-weight:400}
.submit-btn{display:block;width:100%;max-width:360px;margin:26px auto 0;background:var(--primary);color:#fff;border:none;
  border-radius:var(--radius-sm);padding:17px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:opacity .2s}
.submit-btn:hover{opacity:.88}
.submit-note{text-align:center;font-size:14px;color:var(--text-note);margin-top:12px}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.trust-row{display:flex;justify-content:center;gap:26px;margin-top:30px;font-size:14px;color:var(--gray-dark);flex-wrap:wrap}
.trust-row span::before{content:"✓ ";color:var(--green-deep);font-weight:700}
.form-error{background:var(--pink-tint);color:var(--pink-deep);border-radius:var(--radius-sm);padding:14px 18px;font-size:15px;font-weight:700;margin-bottom:24px;max-width:680px;margin-left:auto;margin-right:auto}

/* ---------- 記事・プレーン本文 ---------- */
.prose h2{font-size:24px;margin:48px 0 14px}
.prose h3{font-size:18px;margin:32px 0 10px}
.prose p{font-size:16px;color:var(--gray-dark);margin-bottom:16px}
.prose ul{margin:0 0 20px}
.prose ul li{font-size:16px;color:var(--gray-dark);padding:4px 0 4px 20px;position:relative}
.prose ul li::before{content:"";position:absolute;left:4px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--gray-light)}
.prose ol{margin:0 0 20px;padding-left:22px;list-style:decimal}
.prose ol li{font-size:16px;color:var(--gray-dark);padding:4px 0}
.prose table{width:100%;border-collapse:collapse;margin-bottom:24px}
.prose th,.prose td{border:1px solid var(--gray-light);padding:12px 16px;font-size:15px;text-align:left}
.prose th{background:var(--bg-tint);width:30%;font-weight:700}

/* お知らせ一覧 */
.news-list{margin-top:40px;border-top:1px solid var(--gray-light)}
.news-item{display:grid;grid-template-columns:120px 110px 1fr;gap:20px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--gray-light)}
.news-date{font-family:'Poppins',sans-serif;font-size:14px;color:var(--text-note)}
.news-cat{font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-tint);border-radius:4px;padding:3px 10px;text-align:center}
.news-item h2,.news-item h3{font-size:16px;font-weight:500}

/* ---------- 共通CTA ---------- */
.cta-section{background:var(--primary);color:#fff;padding:88px 0;text-align:center;position:relative;overflow:hidden}
/* ロゴの色の光をぼかして重ねる（2026-10-03。FV の光と同じ系統）。白い文字の読みやすさを保つため濃さは控えめにする */
.cta-section::before{content:"";position:absolute;inset:-40% -10%;pointer-events:none;filter:blur(60px);
  background:radial-gradient(ellipse 35% 45% at 18% 70%,color-mix(in srgb,var(--grad-start) 55%,transparent),transparent 70%),
             radial-gradient(ellipse 30% 40% at 85% 30%,color-mix(in srgb,var(--grad-end) 40%,transparent),transparent 70%)}
.cta-section > .wrap{position:relative}
.cta-label{display:none;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--green-light);margin-bottom:14px}
.cta-title{font-size:34px;font-weight:700;line-height:1.5}
.cta-lead{margin-top:16px;font-size:16px;color:rgba(255,255,255,.85)}
.cta-buttons{margin-top:32px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-section .btn-primary{background:#fff;color:var(--primary)}
.cta-section .btn-outline{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.cta-sub{margin-top:22px;font-size:15px}
.cta-sub a{color:rgba(255,255,255,.85)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--gray-light);padding:64px 0 32px;background:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-logo{height:80px;width:auto;margin:-26px 0 0 -8px}
.footer-brand p{font-size:14px;color:var(--text-note);margin-top:8px;line-height:1.9}
.footer-head{font-size:14px;font-weight:700;color:var(--primary);margin-bottom:12px}
.footer-col li{margin-bottom:8px}
.footer-col a,.footer-soon{font-size:15px;color:var(--gray-dark);text-decoration:none}
.footer-col a:hover{color:var(--primary)}
.footer-soon{color:var(--text-note)}
.copyright{margin-top:48px;padding-top:24px;border-top:1px solid var(--gray-line);font-size:14px;color:var(--text-note);text-align:center}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media(max-width:1080px){
  .gnav-list{gap:0}
  .gnav-link{padding:10px}
  .gnav{gap:16px}
  /* 1080px以下では4列のカードと導入の流れを2列にする。4列のままだと1列が約220pxになり、16pxの本文とリンク文言が折れすぎる（2026-10-02） */
  .grid-4,.steps,.steps.steps-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  :root{--header-h:64px}
  .sp-only{display:inline}
  .gnav{display:none}
  .hamburger{display:block}
  .drawer{display:block}
  /* hidden属性はクラス指定より弱いため、明示的に打ち消す */
  .drawer[hidden]{display:none}
  .header-inner{padding:6px 20px}
  .logo img{height:78px;margin:-24px 0}
  .logo-beta{right:10px}
  .wrap,.wrap-narrow{padding:0 20px}
  section{padding:60px 0}
  h1{font-size:27px}
  .fv-title{font-size:27px}
  h2{font-size:25px}
  h3{font-size:18px}
  .page-hero{padding:28px 0 44px}
  .page-hero h1{font-size:26px}
  .fv{padding:44px 0 62px}
  /* 上下に積むと文章の裏に帯がかかるため、帯はキャプチャの周りだけに通す */
  .fv::before{clip-path:polygon(0 100%,100% 64%,100% 71%,10% 100%)}
  .fv::after{clip-path:polygon(10% 100%,100% 71%,100% 90%,55% 100%)}
  .fv .shot{transform:none;box-shadow:var(--shadow-lg)}
  .fv-sub,.lead-lg{font-size:16px}
  .fv-eyebrow{font-size:14px;margin-bottom:10px}
  .fv-cta .btn,.cta-buttons .btn{width:100%}
  .fv-inner,.fv .fv-inner,.grid-2,.grid-3,.grid-4,.process,.steps,.steps.steps-4,.plans,.field-row,.choice-grid{grid-template-columns:1fr}
  .fv .fv-inner>div:last-child,.fv-inner-shot>div:last-child{margin-right:0}
  .about-statement{font-size:24px}
  .reason-h3{margin-top:40px}
  .reasons .reason-h3{font-size:19px}
  .about-sub{font-size:15px}
  .about-stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
  .about-stat{padding:14px 16px}
  .about-num{font-size:32px}
  .cta-title{font-size:26px}
  .cta-section{padding:64px 0}
  .form-card{padding:32px 22px}
  .plan{padding:30px 24px}
  .plan-for{min-height:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:1/-1}
  .news-item{grid-template-columns:1fr;gap:6px}
  .news-cat{justify-self:start;padding:3px 12px}
  .prose th{width:auto;display:block}
  .prose td{display:block}
}

/* ---------- 画面キャプチャの共通フレーム ---------- */
.shot{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.shot-bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--gray-line);background:var(--bg-faint)}
.shot-bar span{width:9px;height:9px;border-radius:50%;background:var(--gray-light)}
.shot img,.shot video{display:block;width:100%;height:auto}
/* ---------- 追従CTA（inc/sticky-cta.php） ---------- */
.sticky-cta[hidden]{display:none}
/* PC: 右下の画像バナー。画像が無い間は画像の枠と文字リンク */
.sticky-banner{position:fixed;right:24px;bottom:24px;width:300px;background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:90}
.sticky-banner-link{display:block;border-radius:var(--radius);overflow:hidden;text-decoration:none}
.sticky-banner-link img{display:block;width:100%;height:auto}
/* 画像が無い間の枠。画像と同じ 3:2 の大きさで「ここに画像が入る」と分かるようにする */
.sticky-banner-ph{aspect-ratio:3/2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--bg-tint);border-bottom:1px solid var(--gray-light);color:var(--text-note);font-size:13px;text-align:center;padding:12px}

.sticky-banner-label{display:block;padding:12px 16px;font-size:15px;font-weight:700;color:var(--primary)}
.sticky-close{position:absolute;top:-12px;right:-12px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;background:var(--text);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.sticky-bar{display:none}
/* スマホ: 画面下の帯だけ */
@media(max-width:900px){
  .sticky-banner{display:none}
  .sticky-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--gray-light);z-index:90}
  .sticky-bar .btn{flex:1;padding:12px 8px;font-size:14px}
  body.has-sticky-cta{padding-bottom:72px}
}
/* ---------- 資料ダウンロードのパネル（inc/download-band.php） ---------- */
.dl-band{background:var(--bg-tint);border-radius:var(--radius);padding:48px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.dl-title{font-size:26px;font-weight:700;line-height:1.5}
.dl-lead{margin-top:14px;color:var(--gray-dark);font-size:16px}
.dl-buttons{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
/* ラベルの下に小さな補足を持つ大きなボタン。この部品では「資料ダウンロード」が塗り */
.btn-card{display:block;min-width:240px;padding:16px 22px;border-radius:var(--radius-sm);border:2px solid var(--primary);background:#fff;color:var(--primary);text-decoration:none;line-height:1.4}
.btn-card strong{display:block;font-size:17px;font-weight:700}
.btn-card small{display:block;font-size:14px;margin-top:4px;opacity:.85}
.btn-card-primary{background:var(--primary);color:#fff}
.btn-card:hover{opacity:.9}
@media(max-width:900px){.dl-band{grid-template-columns:1fr;padding:28px 20px;gap:28px}.dl-title{font-size:22px}.btn-card{min-width:0;width:100%}}
/* 資料の表紙などの枠（ブラウザ風のバーなし）。中の画像が無いときは .shot-ph のプレースホルダーを流用 */
.doc-cover{background:#fff;border:1px solid var(--gray-light);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.doc-cover img{display:block;width:100%;height:auto}
/* 画面イメージが入るまでの枠は薄い色と画面の名前（2026-10-03）。名前は shot() / cover() が読み上げ用に入れている aria-label をそのまま見せる */
.shot-ph{aspect-ratio:16/10;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;color:var(--text-note);font-size:14px;text-align:center;padding:20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--grad-start) 9%,var(--bg-tint)),color-mix(in srgb,var(--grad-end) 11%,var(--bg-tint)))}
.shot-ph[aria-label]::before{content:attr(aria-label);font-size:18px;font-weight:700;color:var(--primary)}
.shot-caption{font-size:13px;color:var(--text-note);margin-top:10px;text-align:right}

/* 機能ブロック（画像＋説明の左右交互） */
.featrow{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;margin-top:48px}
.featrow+.featrow{margin-top:72px}
.featrow.rev .featrow-body{order:-1}
/* 画像の無い説明を2つ横に並べる行。スマホでは下の @media で1列になる */
.featrow-body h3{font-size:22px;color:var(--primary)}
/* 機能ページの「利用シーン」: h3 はシーンの見出し（h2 に次ぐ大きさ）、h4 は個々の機能 */
.scene-title{font-size:26px;line-height:1.5;margin-top:6px;display:flex;align-items:center;gap:14px}
/* 場面の見出しのアイコン（2026-10-03）。グラデーションの角丸に白い線画。脳の印（.ai-core の丸）と区別するため角丸にする */
.scene-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--grad);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--grad-start) 25%,transparent)}
.scene-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 機能一覧の工程の見出しのアイコン（2026-10-03）。色は工程の色（--step-1〜5）。アイコン付きの見出しには左の縦線を付けない */
.h2-ic{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.step-ic{--c:var(--step-1);flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,transparent);color:color-mix(in srgb,var(--c) 70%,var(--primary))}
.step-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step-ic.is-2{--c:var(--step-2)}.step-ic.is-3{--c:var(--step-3)}.step-ic.is-4{--c:var(--step-4)}.step-ic.is-5{--c:var(--step-5)}
.h2-ic .soon-mini{margin-left:0}
.featrow-body h4{font-size:20px;color:var(--primary)}
.card h4{font-size:18px;color:var(--primary)}
.featrow-body .lead{margin-top:12px;font-size:16px;color:var(--gray-dark)}
@media(max-width:900px){
  .featrow,.featrow.rev{grid-template-columns:1fr;gap:24px;margin-top:32px}
  .featrow+.featrow{margin-top:48px}
  .featrow.rev .featrow-body{order:0}
  .featrow-body h3{font-size:19px}
  .featrow-body h4{font-size:18px}
  .scene-title{font-size:21px;gap:12px}
  .scene-ic{width:44px;height:44px;border-radius:12px}
  .scene-ic svg{width:22px;height:22px}
  .step-ic{width:42px;height:42px}
  .step-ic svg{width:21px;height:21px}
}

/* 機能ページの小さな機能カード。主要な機能より控えめに並べ、スマホでは2列にして縦の長さを抑える（2026-09-30 ユーザー指定） */
.mini-grid{gap:16px;margin-top:32px}
.mini-grid .card{padding:22px 20px}
.mini-grid .card h4{font-size:17px}
.mini-grid .card p{margin-top:6px;font-size:15px}
/* 見出しつきの箇条書き。太字の語を1行目に置き、その下に内容を続ける */
.checklist.is-headed li strong{display:block;color:var(--primary)}
/* 補足の項目の折りたたみ。閉じている間は「ほかにできること」の1行だけを出す */
.more{margin-top:14px;border-top:1px solid var(--gray-light)}
.more summary{list-style:none;cursor:pointer;position:relative;padding:14px 28px 0 0;font-size:15px;font-weight:700;color:var(--primary)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";position:absolute;right:6px;top:20px;width:8px;height:8px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);transition:transform .2s}
.more[open] summary::after{top:25px;transform:rotate(-135deg)}
.more .checklist{margin-top:8px}
@media(max-width:900px){
  .grid.mini-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
  .grid.mini-grid.mini-wide{grid-template-columns:1fr}
  .mini-grid .card{padding:16px 14px}
  .mini-grid .card h4{font-size:16px}
  .mini-grid .card p{font-size:14px}
  /* 課題のカードはスマホで余白と文字を詰める */
  .issue-grid{gap:12px;margin-top:28px}
  .issue-grid .card{padding:20px 18px}
  .issue-grid .card h3{font-size:17px}
  .issue-grid .card p{margin-top:6px;font-size:15px}
}

/* ---------- 表のスマホ表示（縦積み） ----------
   HTML側で table に .tbl-stack、各 td に data-label="列見出し" を付けると、
   900px以下では1行を1枚のカードとして縦に並べる。付けていない表は従来どおり横スクロール。 */
@media(max-width:900px){
  table.tbl.tbl-stack{min-width:0;border:none;background:none;border-radius:0}
  table.tbl.tbl-stack thead{display:none}
  table.tbl.tbl-stack tbody,table.tbl.tbl-stack tr,table.tbl.tbl-stack td{display:block}
  table.tbl.tbl-stack tr{border:1px solid var(--gray-light);border-radius:var(--radius);background:#fff;overflow:hidden}
  table.tbl.tbl-stack tr+tr{margin-top:16px}
  table.tbl.tbl-stack td{border-bottom:1px solid var(--gray-line);padding:12px 16px}
  table.tbl.tbl-stack tbody tr td:last-child{border-bottom:none}
  table.tbl.tbl-stack td[data-label]::before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:var(--text-note);margin-bottom:4px}
  table.tbl.tbl-stack td.num-cell{text-align:left}
}

/* ---------- 規約ページ（/terms/ /privacy/ /tokusho/） ----------
   本文は ad-automatic-operation の docs/legal から生成した HTML（inc/legal/*.html）。
   長文用の .prose の上に、条文に要る分（見出しの罫線・入れ子の番号・〔未定〕の下地）だけ足す */
.legal{padding:48px 0 96px}
.legal h1{font-size:28px;color:var(--primary);border-bottom:2px solid var(--primary);padding-bottom:16px;margin-bottom:32px}
.legal h2{color:var(--primary)}
.legal li>ol,.legal li>ul{margin:8px 0 0}
.legal code{background:var(--bg-faint);padding:1px 5px;border-radius:3px;font-size:14px}
.legal .placeholder{background:var(--mark);padding:0 3px}
@media (max-width:600px){
  .legal{padding:32px 0 64px}
  .legal h1{font-size:23px}
}