/* このファイルは theme.settings から生成しています。直接編集しないでください。 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Outfit:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block");
:root {
  /* 色 */
  --ari-navy: #2563eb;
  --ari-blue: #dce8ff;
  --ari-coral: #2563eb;
  --ari-coral-strong: #2563eb;
  --ari-ink: #191919;
  --ari-ink-2: #2b2b2b;
  --ari-bg-soft: #f5f7fa;
  --ari-bg-page: #ffffff;
  --ari-line: #e6eaf0;
  --ari-coral-050: #eef4ff;
  --ari-navy-text: #1C5CEA;
  --ari-band-from: #0C2F7D;
  --ari-band-to: #134CCA;
  --ari-on-dark: #ffffff;
  --ari-tone-blue: #2563eb;
  --ari-tone-blue-050: #dce8ff;
  --ari-tone-blue-text: #1C5CEA;
  --ari-tone-green: #10b981;
  --ari-tone-green-050: #d1fae5;
  --ari-tone-green-text: #0B7C56;
  --ari-tone-amber: #f59e0b;
  --ari-tone-amber-050: #fef3c7;
  --ari-tone-amber-text: #996206;
  --ari-tone-red: #ef4444;
  --ari-tone-red-050: #fee2e2;
  --ari-tone-red-text: #D01212;
  --ari-tone-violet: #8b5cf6;
  --ari-tone-violet-050: #ede9fe;
  --ari-tone-violet-text: #763FF4;
  --ari-tone-teal: #0ea5a4;
  --ari-tone-teal-050: #ccfbf1;
  --ari-tone-teal-text: #0A7B7A;
  --ari-tone-stone: #e4e6e2;
  --ari-accent-fill: #2157CF;
  --ari-accent-fill-hover: #1B47A9;
  --ari-accent-text: #1E4FBC;
  --ari-accent-edge: transparent;

  /* テーマの3色 */
  --ari-pal-main: #2563EB;
  --ari-pal-main-fill: #2563EB;
  --ari-pal-main-fill-hover: #1F54C8;
  --ari-pal-main-tint: #E0E9FC;
  --ari-pal-main-text: #1C5CEA;
  --ari-pal-main-edge: transparent;
  --ari-pal-sub: #DCE8FF;
  --ari-pal-sub-fill: #1F6CFF;
  --ari-pal-sub-fill-hover: #1A5CD9;
  --ari-pal-sub-tint: #FAFCFF;
  --ari-pal-sub-text: #1A69FF;
  --ari-pal-sub-edge: transparent;
  --ari-pal-accent: #2563EB;
  --ari-pal-accent-fill: #2563EB;
  --ari-pal-accent-fill-hover: #1F54C8;
  --ari-pal-accent-tint: #E0E9FC;
  --ari-pal-accent-text: #1C5CEA;
  --ari-pal-accent-edge: transparent;

  /* サービスカラー */
  --ari-works-blue: #2e61a8;
  --ari-works-blue-strong: #23497e;
  --ari-works-blue-050: #eef4ff;
  --ari-works-blue-text: #2E61A8;
  --ari-chat-green: #0f7a6f;
  --ari-chat-green-strong: #0b5c53;
  --ari-chat-green-050: #e7f4f2;
  --ari-chat-green-text: #0F7A6F;
  --ari-note-orange: #d9741f;
  --ari-note-orange-strong: #b45f17;
  --ari-note-orange-050: #fbefe4;
  --ari-note-orange-text: #A35717;
  --ari-site: #8c5ac5;
  --ari-site-strong: #6f43a3;
  --ari-site-050: #f3eefa;
  --ari-site-text: #8752C2;

  /* 現在のページのサービスカラー（ページ側が上書きする） */
  --ari-service: var(--ari-works-blue);
  --ari-service-strong: var(--ari-works-blue-strong);
  --ari-service-050: var(--ari-works-blue-050);

  /* 書体・角丸・グラデーション */
  --font-main: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  --font-heading: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  --font-accent: 'Outfit', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  --line-height-body: 1.6;
  --radius-card: 24px;
  --radius-button: 999px;
  --ari-grad-dawn: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  --ari-grad-line: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  --transition: 0.25s ease;

  /* アイコン（Material Symbols）。--ari-icon-style は画面が読み戻す用 */
  --ari-icon-style: outlined;
  --ari-icon-font: 'Material Symbols Outlined';
  --ari-icon-weight: 400;
  --ari-icon-fill: 0;

  /* 画面幅で変わる値（ここは pc の段） */
  --font-size-body: 1rem;
  --font-size-heading: 2.5rem;
  --space-xs: 16px;
  --space-sm: 32px;
  --space-md: 56px;
  --space-lg: 88px;
  --space-xl: 110px;
}

@media (max-width: 1023px) {
  :root {
    --font-size-body: 1rem;
    --font-size-heading: 2rem;
    --space-xs: 16px;
    --space-sm: 32px;
    --space-md: 56px;
    --space-lg: 72px;
    --space-xl: 88px;
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-body: 0.9375rem;
    --font-size-heading: 1.625rem;
    --space-xs: 12px;
    --space-sm: 24px;
    --space-md: 40px;
    --space-lg: 56px;
    --space-xl: 64px;
  }
}

[data-service="works"] {
  --ari-service: var(--ari-works-blue);
  --ari-service-strong: var(--ari-works-blue-strong);
  --ari-service-050: var(--ari-works-blue-050);
  --ari-accent-fill: #1F406F;
  --ari-accent-fill-hover: #19355B;
  --ari-accent-text: #1C3A65;
  --ari-accent-edge: transparent;
}
[data-service="chat"] {
  --ari-service: var(--ari-chat-green);
  --ari-service-strong: var(--ari-chat-green-strong);
  --ari-service-050: var(--ari-chat-green-050);
  --ari-accent-fill: #0A5149;
  --ari-accent-fill-hover: #08423C;
  --ari-accent-text: #094A42;
  --ari-accent-edge: transparent;
}
[data-service="note"] {
  --ari-service: var(--ari-note-orange);
  --ari-service-strong: var(--ari-note-orange-strong);
  --ari-service-050: var(--ari-note-orange-050);
  --ari-accent-fill: #9E5414;
  --ari-accent-fill-hover: #824411;
  --ari-accent-text: #904C12;
  --ari-accent-edge: transparent;
}
[data-service="site"] {
  --ari-service: var(--ari-site);
  --ari-service-strong: var(--ari-site-strong);
  --ari-service-050: var(--ari-site-050);
  --ari-accent-fill: #623B8F;
  --ari-accent-fill-hover: #503075;
  --ari-accent-text: #593682;
  --ari-accent-edge: transparent;
}

/* theme: base.css */

/*
 * base.css — 現行 ariake-ai.com の index.html から持ち込んだ基本CSS
 * ============================================================================
 * 出どころ: 11.Webサイト/index.html の <style> ブロック（31〜1695行）
 * 取り込み日: 2026-09-27
 *
 * 【変更していないこと】
 * セレクタも宣言も、順序も、原則として原文のまま置いてある。
 * 「見た目を変えない移設」を確認できるようにするため。
 *
 * 【2026-10-08 に原本へ入れた置き換え】
 * 背景の `#ffffff` / `#fff`（22か所）を `var(--ari-bg-page)` にした。
 * テーマの「ページの背景」を変えたとき、カードやヒーローだけ白く残って
 * 「まだら」になるため。既定値は白なので、既定の見た目は変わらない。
 * あわせて body の font-size / line-height をテーマの「本文の大きさ・行の間隔」に
 * つないだ。文字の上に置く白（`color: #ffffff`）は、濃い面の上の文字なので置き換えていない。
 *
 * 【1つだけ除いたもの】
 * 先頭にあった `:root { ... }` ブロックは取り除いた。
 * テーマ設定値から generateThemeCss() が生成するためである
 * （仕様書 Theme仕様「値の流れは設定 → CSS変数の一方向」）。
 *
 * 【今後の扱い】
 * ここはモジュールへ切り出していく元になるファイルである。
 * モジュール固有のCSSは packages/site-modules 側へ移し、
 * ページ全体に効くもの（リセット、body、見出しの基本）だけをここに残す。
 *
 * 2026-10-01、切り出しの仕組みを作った（packages/site-modules/src/moduleCss.ts）。
 * 自分たちで書き足した分（料金表・本文・画像未選択の枠）は各モジュールの
 * module.css へ移した。
 *
 * 【2026-10-08 に原本から取り除いたもの：ナビ（.navbar-*）とフッター（.footer-*）】
 * ヘッダー・フッターがグローバルモジュールになったため、それぞれの module.css
 * （site-modules の header/ footer/）へ移した。ここに残すと、同じ名前のCSSが2か所に
 * 並び、どちらが効くかが連結の順番で決まってしまう（moduleCss.test.ts が止める）。
 * 変えたのは、固定の方法（fixed → sticky）、スマホのメニューの開閉（JS → details）、
 * 色の直書き（テーマの変数へ）。cookie バナーの CSS は、ここに残している。
 * 原本の塊（ナビ・フッターを除く）は、現行 index.html から変えずに持ち込んだものであり、
 * 「見た目を変えない移設」を確認するためのものなので、まだ解体しない。
 * TOPページの移設でこの塊に手を入れるとき、ヒーローやFAQのCSSも
 * それぞれの module.css へ移す。
 */

/* ===== CSS変数 ===== */
    /* ===== リセット ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* 文字の基準はブラウザの設定に従う（16px の固定にしない）。文字の大きさは rem で書く（利用者が文字を大きくしたとき、一緒に大きくなる） */
    html { scroll-behavior: smooth; font-size: 100%; }
    body {
      font-family: var(--font-main);
      font-weight: 400;
      font-size: var(--font-size-body);
      line-height: var(--line-height-body);
      color: var(--ari-ink);
      background: var(--ari-bg-page);
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { font-family: var(--font-main); cursor: pointer; border: none; }
    /* 見出しの書体（テーマの「見出しの書体」。未設定なら本文と同じ値が入る） */
    h1, h2, h3, h4, h5, h6, .section-title { font-family: var(--font-heading, var(--font-main)); }

    /* ===== スクロールアニメーション =====
       隠すのは、site.js が .is-motion を付けたページの、まだ見えていない要素だけ（QA public-ui B-06）。
       最初から透明にすると、site.js が届かない（配信の切り替え中の 404・広告ブロック・社内のプロキシ・古いキャッシュ）とき、
       最終CTA・FAQ の見出しが見えないままになる。.reveal（テーマの CSS）と同じ作りにそろえた */
    .fade-in {
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .ariake-page.is-motion .fade-in:not(.visible) {
      opacity: 0;
      transform: translateY(24px);
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-in-delay-1 { transition-delay: 0.1s; }
    .fade-in-delay-2 { transition-delay: 0.2s; }
    .fade-in-delay-3 { transition-delay: 0.3s; }
    .fade-in-delay-4 { transition-delay: 0.4s; }
    .fade-in-delay-5 { transition-delay: 0.5s; }

    /* ===== 共通レイアウト ===== */
    .container {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .section {
      padding: 80px 0;
    }
    .section-label {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ari-coral);
      margin-bottom: 10px;
    }
    .section-title {
      font-size: clamp(1.7rem, 4.5vw, 2.5rem);
      font-weight: 800;
      color: var(--ari-navy);
      line-height: 1.4;
      margin-bottom: 16px;
    }
    .section-lead {
      font-size: 0.95rem;
      color: var(--ari-ink-2);
      max-width: 580px;
      line-height: 1.8;
    }
    .section-header {
      margin-bottom: 56px;
    }
    .section-header.center {
      text-align: center;
    }
    .section-header.center .section-lead {
      margin: 0 auto;
    }

    /* グラデーションライン装飾 */
    .grad-line {
      display: block;
      height: 3px;
      width: 56px;
      background: var(--ari-grad-line);
      border-radius: 2px;
      margin-bottom: 24px;
    }
    .section-header.center .grad-line {
      margin: 0 auto 24px;
    }

    /* ===== ボタン ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 32px;
      border-radius: var(--radius-button);
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
      line-height: 1.4;
    }
    .btn:focus-visible {
      outline: 3px solid var(--ari-coral);
      outline-offset: 3px;
    }
    .btn-primary {
      background: var(--ari-coral-strong);
      color: #ffffff;
    }
    .btn-primary:hover {
      background: #A6462F;
      transform: translateY(-2px);
    }
    .btn-outline {
      background: transparent;
      color: #ffffff;
      border: 2px solid rgba(255,255,255,0.8);
    }
    .btn-outline:hover {
      background: rgba(255,255,255,0.12);
      transform: translateY(-2px);
    }
    /* story-mission等、暗色背景の上で少し控えめに見せたい場合の枠線バリエーション */
    .btn-outline-subtle {
      border-color: rgba(255,255,255,0.5);
      color: #ffffff;
    }
    .btn-outline-navy {
      background: transparent;
      color: var(--ari-navy);
      border: 2px solid var(--ari-navy);
    }
    .btn-outline-navy:hover {
      background: var(--ari-navy);
      /* 暗いページでは --ari-navy が明るい色になるので、文字は白固定ではなくページの背景の色 */
      color: var(--ari-bg-page);
      transform: translateY(-2px);
    }
    .btn-lg {
      padding: 18px 40px;
      font-size: 1.05rem;
    }

    /* ===== Hero ===== */
    .hero {
      position: relative;
      background: var(--ari-bg-page);
      display: flex;
      align-items: center;
      padding: 148px 20px 84px;
      overflow: hidden;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin: 0 auto;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 56px;
    }
    .hero-copy {
      flex: 1 1 520px;
      min-width: 0;
    }

    /* 画面モック側（ブラウザ枠） */
    .hero-visual {
      flex: 1 1 440px;
      max-width: 520px;
      margin-left: auto;
      min-width: 0;
    }
    .hero-mock {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(21,54,99,0.16);
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      line-height: normal;
      min-width: 0;
    }
    .hero-mock-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 12px 16px;
      background: var(--ari-bg-soft);
      border-bottom: 1px solid var(--ari-line);
    }
    .hero-mock-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #dce1ea;
    }
    .hero-mock svg { display: block; width: 100%; height: auto; line-height: 0; }
    .hero-mock-note {
      margin-top: 10px;
      font-size: 0.75rem;
      color: var(--ari-ink-2);
      text-align: right;
    }

    .hero-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--ari-coral-strong);
      margin-bottom: 20px;
    }
    .hero-label::before {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: var(--ari-coral-strong);
      border-radius: 1px;
    }
    .hero-title {
      font-size: clamp(1.8rem, 4.2vw, 2.75rem);
      font-weight: 800;
      color: var(--ari-navy);
      line-height: 1.45;
      margin-bottom: 28px;
      letter-spacing: 0.01em;
    }
    .hero-checks {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 36px;
    }
    .hero-checks li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.95rem;
      color: var(--ari-ink);
      line-height: 1.7;
    }
    .hero-checks .ari-icon {
      font-size: 1.2rem;
      color: var(--ari-coral-strong);
      margin-top: 3px;
      flex-shrink: 0;
    }
    .hero-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
    }
    .hero-note {
      margin-top: 16px;
      font-size: 0.8rem;
      color: var(--ari-ink-2);
    }
    .hero-stats {
      display: flex;
      gap: 0;
      margin-top: 28px;
      border-top: 1px solid var(--ari-line);
      padding-top: 20px;
      max-width: 520px;
    }
    .hero-stat {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0 18px;
      border-left: 1px solid var(--ari-line);
    }
    .hero-stat:first-child { border-left: none; padding-left: 0; }
    .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--ari-ink-2);
      letter-spacing: 0.04em;
    }
    .hero-stat-value {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--ari-navy);
      line-height: 1.2;
      white-space: nowrap;
    }
    .hero-stat-value small {
      font-size: 0.85rem;
      font-weight: 700;
    }
    @media (min-width: 769px) and (max-width: 1024px) {
      .hero-inner { gap: 28px; }
      .hero-visual { flex-basis: 340px; max-width: 340px; }
    }

    /* ===== 課題提起セクション ===== */
    .issues {
      background: var(--ari-bg-soft);
    }
    .issues-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }
    .issue-card {
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      border-radius: var(--radius-card);
      padding: 28px 24px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      transition: border-color var(--transition);
    }
    .issue-card:hover {
      border-color: var(--ari-coral);
    }
    /*
     * アイコン（Material Symbols）。site-modules の <Icon> が出す要素。
     * 書体のスタイル・線の太さ・塗りは、テーマの設定（--ari-icon-*）で決まる。
     * 書体が読み込まれるまでは、アイコンの名前の文字が見えないよう、幅を 1em に切る。
     */
    .ari-icon {
      font-family: var(--ari-icon-font, 'Material Symbols Outlined');
      font-variation-settings: 'FILL' var(--ari-icon-fill, 0), 'wght' var(--ari-icon-weight, 400), 'GRAD' 0, 'opsz' 24;
      font-weight: normal;
      font-style: normal;
      font-size: 1.5rem;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      width: 1em;
      overflow: hidden;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      flex-shrink: 0;
      font-feature-settings: 'liga';
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }
    .issue-icon {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      border-radius: 50%;
      background: #fff0ec;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ari-coral-strong);
    }
    .issue-card p {
      font-size: 0.95rem;
      color: var(--ari-ink);
      line-height: 1.65;
      font-weight: 700;
    }
    .issue-card span.sub {
      display: block;
      font-size: 0.85rem;
      font-weight: 400;
      color: var(--ari-ink-2);
      margin-top: 4px;
    }

    /* ===== ブランドストーリー ===== */
    .story { background: var(--ari-bg-soft); }
    .story-name-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin-bottom: 48px;
    }
    .story-name-card {
      background: var(--ari-bg-page);
      border-radius: var(--radius-card);
      padding: 40px 32px 36px;
      box-shadow: 0 4px 20px rgba(21,54,99,0.07);
      position: relative;
      overflow: hidden;
    }
    .story-name-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 4px;
      background: var(--ari-grad-line);
    }
    .story-kanji {
      font-size: 3.8rem;
      font-weight: 800;
      color: var(--ari-navy);
      opacity: 0.06;
      position: absolute;
      bottom: 12px; right: 20px;
      line-height: 1;
      user-select: none;
      pointer-events: none;
    }
    .story-kanji-label {
      display: inline-block;
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--ari-coral);
      margin-bottom: 12px;
      letter-spacing: 0.05em;
    }
    .story-name-card h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--ari-navy);
      margin-bottom: 12px;
      line-height: 1.55;
    }
    .story-name-card p {
      font-size: 0.9rem;
      color: var(--ari-ink-2);
      line-height: 1.9;
    }
    .story-mission {
      background: var(--ari-grad-dawn);
      border-radius: var(--radius-card);
      padding: 44px 48px;
      text-align: center;
    }
    .story-mission-lead {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.55);
      margin-bottom: 16px;
    }
    .story-mission-text {
      font-size: clamp(1.1rem, 2.5vw, 1.35rem);
      font-weight: 700;
      color: #ffffff;
      line-height: 1.85;
    }
    .story-mission-sub {
      margin-top: 20px;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.8;
    }
    @media (max-width: 640px) {
      .story-name-grid { grid-template-columns: 1fr; }
      .story-mission { padding: 32px 24px; }
    }

    /* ===== ありあけAIとは ===== */
    .about {
      background: var(--ari-bg-page);
    }
    .about-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 32px;
    }
    .about-card {
      padding: 36px 28px;
      border-left: 3px solid var(--ari-coral);
      background: var(--ari-bg-soft);
      border-radius: 0 var(--radius-card) var(--radius-card) 0;
    }
    .about-card-num {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      color: var(--ari-coral);
      margin-bottom: 12px;
    }
    .about-card-title {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--ari-navy);
      margin-bottom: 12px;
      line-height: 1.4;
    }
    .about-card-illust {
      width: 100%;
      max-height: 160px;
      object-fit: contain;
      margin-bottom: 20px;
      border-radius: 8px;
    }
    .about-card-icon {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .about-card-icon img {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }
    .about-card p {
      font-size: 0.9rem;
      color: var(--ari-ink-2);
      line-height: 1.8;
    }

    /* ===== こんなことができます ===== */
    .can-do {
      background: var(--ari-bg-soft);
    }
    .can-do-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .can-do-card {
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      border-radius: var(--radius-card);
      padding: 24px 20px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      transition: border-color var(--transition);
    }
    .can-do-card:hover {
      border-color: var(--ari-coral);
    }
    .can-do-icon {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 10px;
      background: #fff0ec;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ari-coral-strong);
    }
    .can-do-icon .ari-icon {
      font-size: 1.4rem;
    }
    .can-do-card p {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--ari-navy);
      line-height: 1.55;
    }
    .can-do-card span.sub {
      display: block;
      font-size: 0.82rem;
      font-weight: 400;
      color: var(--ari-ink-2);
      margin-top: 4px;
      line-height: 1.65;
    }
    @media (max-width: 768px) {
      .can-do-grid { grid-template-columns: 1fr; }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
      .can-do-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ===== plan-outcome ===== */
    .plan-outcome {
      background: var(--ari-coral-050, #fbeee9);
      border-radius: 6px;
      padding: 10px 14px;
      font-size: 0.85rem;
      color: var(--ari-navy);
      line-height: 1.6;
      margin-bottom: 20px;
    }

    /* ===== 月額プラン＝AriakeWorks込みの注記（目立たせる） ===== */
    .plan-includes-note {
      max-width: 640px;
      margin: 0 auto 32px;
      background: var(--ari-coral-050, #fbeee9);
      border-left: 4px solid var(--ari-coral);
      border-radius: 6px;
      padding: 16px 20px;
      font-size: 0.92rem;
      color: var(--ari-navy);
      line-height: 1.75;
      text-align: left;
    }
    .plan-includes-note strong { color: var(--ari-coral-strong); }
    .plan-includes-note a {
      color: var(--ari-coral-strong);
      text-decoration: underline;
      font-weight: 700;
    }

    /* ===== サービス一覧 ===== */
    .services {
      background: var(--ari-bg-soft);
    }

    /* 無料メニュー */
    .free-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      margin-bottom: 60px;
    }
    .free-card {
      background: var(--ari-bg-page);
      border: 2px solid var(--ari-line);
      border-radius: var(--radius-card);
      padding: 28px 24px;
    }
    .free-badge {
      display: inline-block;
      background: var(--ari-coral);
      color: #ffffff;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 3px 10px;
      border-radius: 20px;
      margin-bottom: 14px;
    }
    .free-card h3 {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--ari-navy);
      margin-bottom: 8px;
    }
    .free-card p {
      font-size: 0.88rem;
      color: var(--ari-ink-2);
      line-height: 1.75;
    }

    /* 月額プランタイトル */
    .plan-section-title {
      font-size: 1rem;
      font-weight: 800;
      color: var(--ari-navy);
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .plan-section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--ari-line);
    }

    /* 単発プラン */
    .single-plan {
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      border-radius: var(--radius-card);
      padding: 28px 28px;
      margin-bottom: 32px;
    }
    .single-plan-header {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .single-plan-header h3 {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--ari-navy);
    }
    .plan-price {
      font-size: 2rem;
      font-weight: 800;
      color: var(--ari-coral-strong);
      letter-spacing: -0.01em;
    }
    .plan-price-unit {
      font-size: 0.82rem;
      font-weight: 400;
      color: var(--ari-ink-2);
    }
    .plan-period {
      font-size: 0.82rem;
      color: var(--ari-ink-2);
      background: var(--ari-bg-soft);
      padding: 2px 10px;
      border-radius: 20px;
    }
    .single-plan-items {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 14px;
    }
    .plan-item {
      font-size: 0.85rem;
      color: var(--ari-ink);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .plan-item::before {
      content: '✓';
      color: var(--ari-coral);
      font-weight: 800;
      font-size: 0.8rem;
    }
    .plan-note {
      font-size: 0.8rem;
      color: var(--ari-ink-2);
      border-top: 1px solid var(--ari-line);
      padding-top: 12px;
      margin-top: 4px;
    }

    /* 料金セクション下部の安心ポイント */
    .price-assure {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      max-width: 720px;
      margin: 24px auto 0;
    }
    .price-assure-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      border-radius: 10px;
      padding: 16px 18px;
    }
    .price-assure-item .ari-icon {
      color: var(--ari-coral-strong);
      font-size: 1.375rem;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .price-assure-item p {
      font-size: 0.85rem;
      color: var(--ari-ink-2);
      line-height: 1.7;
      margin: 0;
    }
    .price-assure-item strong {
      display: block;
      font-size: 0.95rem;
      color: var(--ari-navy);
      margin-bottom: 2px;
    }
    .price-assure-item a {
      color: var(--ari-coral-strong);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    @media (max-width: 640px) {
      .price-assure { grid-template-columns: 1fr; }
    }

    /* 月額プランカード */
    .plans-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: start;
    }
    .plan-card {
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      border-radius: var(--radius-card);
      padding: 32px 24px;
      position: relative;
      transition: border-color var(--transition);
    }
    .plan-card:hover {
      border-color: var(--ari-blue);
    }
    .plan-card.featured {
      border: 2px solid var(--ari-coral);
      padding-top: 48px;
      background: var(--ari-bg-page);
      box-shadow: 0 14px 32px rgba(21,54,99,0.10);
    }
    .plan-badge-top {
      z-index: 1;
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--ari-coral);
      color: #ffffff;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 4px 18px;
      border-radius: 0 0 8px 8px;
    }
    .plan-name {
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ari-ink-2);
      margin-bottom: 8px;
    }
    .plan-card .plan-price {
      display: block;
      font-size: 1.8rem;
      line-height: 1.15;
      margin-bottom: 4px;
    }
    .plan-card.featured .plan-price { font-size: 2.1rem; }
    .plan-divider {
      height: 1px;
      background: var(--ari-line);
      margin: 20px 0;
    }
    .plan-features {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 28px;
    }
    .plan-feature {
      font-size: 0.875rem;
      color: var(--ari-ink);
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.5;
    }
    .plan-feature::before {
      content: '✓';
      color: var(--ari-coral);
      font-weight: 800;
      font-size: 0.8rem;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .plan-card .btn {
      width: 100%;
      text-align: center;
    }

    /* ===== 支援の流れ ===== */
    .flow {
      background: var(--ari-bg-page);
    }
    .flow-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }
    .flow-steps::before {
      content: '';
      position: absolute;
      left: 22px;
      top: 48px;
      bottom: 48px;
      width: 2px;
      background: var(--ari-grad-line);
    }
    .flow-step {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      padding: 20px 0;
      position: relative;
    }
    .flow-step-num {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--ari-navy);
      color: var(--ari-bg-page);
      font-size: 0.85rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
    .flow-step:first-child .flow-step-num,
    .flow-step:last-child .flow-step-num {
      background: var(--ari-coral);
    }
    .flow-step-body h3 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--ari-navy);
      margin-bottom: 4px;
      padding-top: 10px;
    }
    .flow-step-body p {
      font-size: 0.875rem;
      color: var(--ari-ink-2);
      line-height: 1.75;
    }

    /* ===== セミナー案内 ===== */
    .seminar {
      background: var(--ari-bg-soft);
    }
    .seminar-banner {
      background: var(--ari-grad-dawn);
      border-radius: 16px;
      padding: 56px 48px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .seminar-banner-rings {
      position: absolute;
      top: 50%;
      right: -60px;
      transform: translateY(-50%);
      width: 320px;
      height: 320px;
      pointer-events: none;
    }
    .seminar-banner-rings .ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
    .seminar-banner-rings .ring:nth-child(1) { width: 120px; height: 120px; border: 1px solid rgba(221,124,106,0.4); }
    .seminar-banner-rings .ring:nth-child(2) { width: 220px; height: 220px; border: 1px solid rgba(221,124,106,0.22); }
    .seminar-banner-rings .ring:nth-child(3) { width: 320px; height: 320px; border: 1px solid rgba(221,124,106,0.12); }
    .seminar-label {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ari-coral);
      margin-bottom: 12px;
      display: block;
      position: relative;
      z-index: 2;
    }
    .seminar-banner h2 {
      font-size: clamp(1.4rem, 3.5vw, 2rem);
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 12px;
      position: relative;
      z-index: 2;
    }
    .seminar-banner p {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.82);
      max-width: 520px;
      margin: 0 auto 28px;
      line-height: 1.8;
      position: relative;
      z-index: 2;
    }
    .seminar-banner .btn {
      position: relative;
      z-index: 2;
    }
    .seminar-detail {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 28px;
      position: relative;
      z-index: 2;
    }
    .seminar-detail-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.85rem;
      color: rgba(255,255,255,0.75);
    }
    .seminar-detail-item strong {
      color: #ffffff;
    }

    /* ===== FAQ ===== */
    .faq {
      background: var(--ari-bg-page);
    }
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-width: 760px;
      margin: 0 auto;
    }
    .faq-item {
      border-bottom: 1px solid var(--ari-line);
    }
    .faq-question {
      width: 100%;
      text-align: left;
      padding: 22px 0;
      background: transparent;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      cursor: pointer;
      transition: color var(--transition);
    }
    .faq-question:hover .faq-q-text { color: var(--ari-coral); }
    .faq-q-badge {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--ari-coral);
      color: #ffffff;
      font-size: 0.78rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .faq-q-text {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--ari-navy);
      flex: 1;
      line-height: 1.55;
      transition: color var(--transition);
    }
    .faq-chevron {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      margin-top: 4px;
      color: var(--ari-ink-2);
      transition: transform var(--transition);
    }
    .faq-item.open .faq-chevron {
      transform: rotate(180deg);
    }
    .faq-answer {
      display: none;
      padding: 0 0 22px 42px;
    }
    .faq-item.open .faq-answer { display: block; }
    .faq-answer p {
      font-size: 0.9rem;
      color: var(--ari-ink-2);
      line-height: 1.85;
    }

    /* ===== お問い合わせ（HubSpotフォーム） ===== */
    .contact {
      background: var(--ari-grad-dawn);
      padding: 96px 20px;
      position: relative;
      overflow: hidden;
    }
    .contact-rings {
      position: absolute;
      top: 50%;
      right: -120px;
      transform: translateY(-50%);
      width: 500px;
      height: 500px;
      pointer-events: none;
    }
    .contact-rings .ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
    .contact-rings .ring:nth-child(1) { width: 160px; height: 160px; border: 1px solid rgba(221,124,106,0.3); }
    .contact-rings .ring:nth-child(2) { width: 300px; height: 300px; border: 1px solid rgba(221,124,106,0.18); }
    .contact-rings .ring:nth-child(3) { width: 440px; height: 440px; border: 1px solid rgba(221,124,106,0.09); }
    .contact-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin: 0 auto;
    }
    .contact-text .section-label { color: rgba(255,255,255,0.6); }
    .contact-text h2 {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 800;
      color: #ffffff;
      line-height: 1.4;
      margin-bottom: 16px;
      margin-top: 8px;
    }
    .contact-text > p {
      color: rgba(255,255,255,0.78);
      line-height: 1.85;
      margin-bottom: 28px;
      font-size: 0.95rem;
    }
    .contact-reassure {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 36px;
    }
    .contact-reassure li {
      color: rgba(255,255,255,0.85);
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .contact-reassure li .ari-icon {
      font-size: 1.1rem;
      color: var(--ari-coral);
    }
    .contact-form-wrap {
      background: var(--ari-bg-page);
      border-radius: 16px;
      padding: 40px 36px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    }
    .contact-form-wrap h3 {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--ari-navy);
      margin-bottom: 6px;
    }
    .contact-form-wrap .form-sub {
      font-size: 0.82rem;
      color: var(--ari-ink-2);
      margin-bottom: 24px;
    }
    /* HubSpotフォームのスタイル調整 */
    .hs-form-frame .hs-form fieldset { max-width: 100% !important; }
    .hs-form-frame .hs-input { width: 100% !important; }
    .hs-form-frame input[type="submit"],
    .hs-form-frame .hs-button {
      background: var(--ari-coral-strong) !important;
      border-color: var(--ari-coral-strong) !important;
    }
    .hs-form-frame input[type="submit"]:hover,
    .hs-form-frame .hs-button:hover {
      background: #A6462F !important;
      border-color: #A6462F !important;
    }
    @media (max-width: 768px) {
      .contact-inner { grid-template-columns: 1fr; gap: 40px; }
      .contact-rings { display: none; }
      .contact-form-wrap { padding: 28px 20px; }
    }

    /* ===== Cookieバナー ===== */
    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(21,54,99,0.97);
      color: rgba(255,255,255,0.85);
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      z-index: 2000;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
      transform: translateY(0);
      transition: transform 0.3s ease;
    }
    .cookie-banner.hidden { transform: translateY(100%); }
    .cookie-banner p { font-size: 0.85rem; line-height: 1.6; margin: 0; }
    .cookie-banner a { color: var(--ari-coral); text-decoration: underline; text-underline-offset: 3px; }
    .cookie-banner-btn {
      background: var(--ari-coral);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 10px 24px;
      font-family: var(--font-main);
      font-size: 0.875rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background var(--transition);
    }
    .cookie-banner-btn:hover { background: var(--ari-coral-strong); }
    /* ===== レスポンシブ（モバイル） ===== */
    @media (max-width: 768px) {
      .section { padding: 64px 0; }
      .section-header { margin-bottom: 40px; }

      /* Hero */
      .hero { padding: 108px 20px 64px; }
      .hero-btns { flex-direction: column; align-items: stretch; }
      .btn-lg { padding: 16px 22px; font-size: 0.98rem; }
      .hero-inner { flex-direction: column; gap: 36px; }
      .hero-copy { flex: 1 1 auto; width: 100%; }
      .hero-visual { flex: 1 1 auto; width: 100%; max-width: 440px; margin: 0 auto; }

      /* 課題 */
      .issues-grid { grid-template-columns: 1fr; }

      /* About */
      .about-grid { grid-template-columns: 1fr; gap: 20px; }

      /* サービス */
      .plans-grid { grid-template-columns: 1fr; }
      .plan-card.featured { padding-top: 48px; }

      /* 流れ */
      .flow-steps::before { left: 21px; }

      /* セミナーバナー */
      .seminar-banner { padding: 44px 28px; }
      .seminar-banner-rings { display: none; }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
      .plans-grid { grid-template-columns: repeat(2, 1fr); }
      .plan-card:last-child { grid-column: span 2; max-width: 380px; margin: 0 auto; }
    }

    /* --- ありあけAIが行うこと（横フロー） --- */
    .do-flow {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 10px;
      max-width: 980px;
      margin: 0 auto;
    }
    .do-step {
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      border-radius: 10px;
      padding: 14px 18px;
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--ari-navy);
      display: flex;
      align-items: center;
      text-align: center;
    }
    .do-arrow { display: flex; align-items: center; color: var(--ari-coral-strong); font-weight: 800; }

    /* --- 3つのサービス --- */
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }
    .svc-card {
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      border-radius: var(--radius-card);
      padding: 28px;
      display: flex;
      flex-direction: column;
    }
    .svc-card.svc-main { border: 2px solid var(--ari-works-blue); }
    /* サービスカードごとの識別色（2枚目=AriakeChat、3枚目=AriakeWorks） */
    .svc-grid .svc-card:nth-child(2) .svc-chain-arrow,
    .svc-grid .svc-card:nth-child(2) .svc-cta a { color: var(--ari-chat-green-strong); }
    .svc-grid .svc-card:nth-child(3) .svc-chain-arrow,
    .svc-grid .svc-card:nth-child(3) .svc-cta a { color: var(--ari-works-blue-strong); }
    .svc-role {
      display: inline-block;
      align-self: flex-start;
      background: var(--ari-bg-soft);
      border-radius: 999px;
      padding: 4px 14px;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--ari-navy);
      margin-bottom: 12px;
    }
    .svc-card h3 { font-size: 1.15rem; color: var(--ari-navy); margin-bottom: 8px; }
    .svc-logo { display: flex; align-items: center; height: 26px; margin-bottom: 10px; }
    .svc-logo img { display: block; height: 100%; width: auto; }
    .svc-card > p { font-size: 0.9rem; color: var(--ari-ink-2); line-height: 1.8; margin-bottom: 16px; }
    .svc-chain { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: auto; background: var(--ari-bg-soft); border-radius: 10px; padding: 14px 12px; }
    .svc-chain span { font-size: 0.85rem; font-weight: 700; color: var(--ari-navy); }
    .svc-chain .svc-chain-arrow { color: var(--ari-coral-strong); line-height: 1; font-weight: 800; }
    .svc-chain .svc-chain-plus { color: var(--ari-coral-strong); line-height: 1.1; font-weight: 800; }
    .svc-cta { margin-top: 16px; font-size: 0.88rem; font-weight: 700; }
    .svc-cta a { color: var(--ari-coral-strong); text-decoration: none; }
    .svc-cta a:hover { text-decoration: underline; }

    /* --- ありあけAI（親）→ 3サービス（子）の構造図 --- */
    .structure-outcome {
      background: var(--ari-grad-dawn);
      border-radius: var(--radius-card);
      padding: 32px 24px 28px;
      text-align: center;
      margin-bottom: 0;
    }
    .structure-outcome-logo { display: block; height: 34px; width: auto; margin: 0 auto 14px; }
    .structure-outcome-text { max-width: 480px; margin: 0 auto; font-size: 1rem; font-weight: 700; line-height: 1.7; color: #ffffff; }
    .structure-arrows {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      position: relative;
      text-align: center;
      color: var(--ari-coral-strong);
      font-size: 1.4rem;
      font-weight: 800;
      line-height: 1;
      padding-top: 16px;
      margin-bottom: 4px;
    }
    .structure-arrows::before { content: ""; position: absolute; top: 0; left: 16.6667%; right: 16.6667%; height: 2px; background: var(--ari-coral-strong); }
    .structure-arrows span { position: relative; display: block; }
    .structure-arrows span::before { content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px; background: var(--ari-coral-strong); transform: translateX(-50%); }
    .structure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 4px; }
    .structure-block { background: var(--ari-bg-page); border: 1px solid var(--ari-line); border-radius: var(--radius-card); padding: 26px 20px 24px; display: flex; flex-direction: column; }
    .structure-block-role { display: inline-block; align-self: center; border-radius: 999px; padding: 4px 14px; font-size: 0.78rem; font-weight: 700; margin-bottom: 12px; }
    .structure-block-logo { display: flex; align-items: center; justify-content: center; height: 28px; margin: 0 auto 14px; }
    .structure-block-logo img { display: block; height: 100%; width: auto; }
    .structure-block p.structure-block-desc { font-size: 0.9rem; color: var(--ari-ink-2); line-height: 1.8; text-align: center; margin-bottom: 16px; }
    .structure-block-tag { display: block; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--ari-ink-2); margin-top: 10px; }
    .structure-block-tag a { color: var(--ari-note-orange-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
    @media (max-width: 768px) {
      .structure-grid { grid-template-columns: 1fr; }
      .structure-arrows { grid-template-columns: 1fr; padding-top: 0; }
      .structure-arrows::before { display: none; }
      .structure-arrows span::before { display: none; }
    }

    /* --- 信頼材料 --- */
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }
    .trust-item {
      background: var(--ari-bg-page);
      border: 1px solid var(--ari-line);
      border-radius: var(--radius-card);
      padding: 22px 24px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .trust-item .ari-icon { color: var(--ari-blue); font-size: 1.625rem; flex-shrink: 0; margin-top: 2px; }
    .trust-item h3 { font-size: 0.98rem; color: var(--ari-navy); margin-bottom: 4px; }
    .trust-item p { font-size: 0.86rem; color: var(--ari-ink-2); line-height: 1.7; }

    /* ボタンの角は、テーマの「角の丸み（ボタン）」に従う。直書きの 999px だと「角ばる」にしても丸いままだった（2026-10-08 ポールN-2） */
    .btn { border-radius: var(--radius-button); }

    /* 固定ヘッダー分だけアンカー位置をずらす（ヘッダー部品は position: sticky で、高さは約68px） */
    [id] { scroll-margin-top: 88px; }
    @media (max-width: 768px) { [id] { scroll-margin-top: 64px; } }

/* ===========================================================================
 * ページの骨格（area / section / row / column）
 * ---------------------------------------------------------------------------
 * PageRenderer が出す構造に当てる。
 * section の背景・余白・幅は、編集者が選択肢から選んだ値がクラス名になる
 * （自由なCSS値は入らない。仕様書 Template仕様）。
 * =========================================================================== */

/* 本文（<main id="main-content" tabindex="-1">）は、「本文へ移動」で焦点が移る先。枠線は出さない（本文全体が囲まれるため）。
   テーマの「:focus-visible の輪」（.ariake-page[data-theme] :focus-visible）に負けないよう、.ariake-page を付けて強くしている */
.ariake-page main.ariake-area:focus,
.ariake-page main.ariake-area:focus-visible { outline: none; }

.ariake-section > .ariake-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin: 0 auto;
}

/* 狭い画面では列を積む（決定事項#4：ブレークポイント別の列幅指定は入れない） */
@media (max-width: 767px) {
  .ariake-section > .ariake-row {
    display: block;
  }
  .ariake-section > .ariake-row > .ariake-col {
    grid-column: auto !important;
  }
  .ariake-section > .ariake-row > .ariake-col + .ariake-col {
    margin-top: 24px;
  }
}

/* section の背景 */
.ariake-section.bg-none { background: transparent; }
.ariake-section.bg-soft { background: var(--ari-bg-soft); }
.ariake-section.bg-dawn { background: var(--ari-grad-dawn); color: #ffffff; }
.ariake-section.bg-service { background: var(--ari-service-050, var(--ari-coral-050)); }

/* section の上下余白（テーマの段階から選ぶ） */
.ariake-section.sp-xs { padding-block: var(--space-xs); }
.ariake-section.sp-sm { padding-block: var(--space-sm); }
.ariake-section.sp-md { padding-block: var(--space-md); }
.ariake-section.sp-lg { padding-block: var(--space-lg); }
.ariake-section.sp-xl { padding-block: var(--space-xl); }

/* section の最大幅 */
.ariake-section.mw-narrow > .ariake-row { max-width: 760px; }
.ariake-section.mw-normal > .ariake-row { max-width: 1120px; }
.ariake-section.mw-wide   > .ariake-row { max-width: 1440px; }

/* 未対応モジュール・参照切れの表示（編集中にだけ出る） */
.ariake-unknown-module {
  padding: 16px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ari-ink-2);
  background: repeating-linear-gradient(
    45deg, #fff8f6, #fff8f6 10px, #ffeee9 10px, #ffeee9 20px
  );
  border: 1px dashed var(--ari-coral);
  border-radius: var(--radius-card);
}

/* 描画に失敗したモジュールの表示（ModuleBoundary） */
.ariake-module-error {
  margin: 16px auto;
  max-width: 720px;
  padding: 16px 20px;
  border: 1px solid #f3b7a9;
  border-left: 4px solid var(--ari-coral);
  border-radius: var(--radius-card);
  background: #fff8f6;
}
.ariake-module-error-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ari-ink);
}
.ariake-module-error-hint {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ari-ink-2);
}
.ariake-module-error-detail {
  margin: 8px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--ari-ink-2);
  word-break: break-all;
}

/* ===========================================================================
 * 公開サイトの見直し（2026-10-07 レビュー反映）
 * ---------------------------------------------------------------------------
 * 上の原本（〜1658行）と「ページの骨格」より後ろに、自分たちで足した分を置く。
 * 原本のセレクタは書き換えず、同じ強さで後ろから上書きする。
 * 原本と見比べたいときは、このブロックを外せば元の見た目に戻る。
 *
 * テーマ設定の値（色・余白の段）は変えていない。
 * 変えているのは「その値をどこにどう使うか」だけである。
 * =========================================================================== */

/*
 * 【文字・塗りに使う色の派生】
 * テーマの accent（#DD7C6A）は白地で 2.9:1、accentStrong（#C0573D）も
 * 白文字で 4.49:1 とぎりぎりで、小さい文字には足りない（WCAG AA は 4.5:1）。
 * 設定の値は ariake-ai.com の実値なので変えず、文字や塗りに使うときだけ
 * 黒を混ぜて濃くする。
 *
 *   --ari-accent-text … 白・淡い背景の上に置く「文字」の色（5:1 前後）
 *   --ari-accent-fill … 白文字を載せる「塗り」の色（ボタン・丸バッジ。5:1 前後）
 *
 * ページがサービスカラーを選んでいる（data-service がある）ときは、
 * そのサービスの strong を基にする。「サービス色を変えてもボタンが
 * 変わらない」という指摘（村上）への答えはこれである。
 * 選んでいないページは、これまでどおり accentStrong を基にする。
 */
/*
 * 値の定義はここには無い。generateThemeCss が :root に、generateServiceScopeCss が
 * [data-service] に出す（packages/site-theme/src/derive.ts の accentTokens）。
 * 背景の暗さに応じて明るさを決める計算は、CSS では書けないため。
 * 理由：暗いページ背景のとき、ここで黒を混ぜて濃くすると、強調文字が背景に沈んだ。
 */

/* ---- 余白 ---------------------------------------------------------------- */
/*
 * 【二重に掛かっていた余白をやめる】
 * 原本の .section（80px 0）と .hero（148px 20px 84px）は、body 直下に
 * 並べる前提の余白である（148px は固定ナビ 68px の分を含む）。
 * ページの骨格では、section の上下余白（.sp-*）を編集者が選ぶ。
 * その中にさらに .section / .hero の余白が重なり、ヒーロー上に
 * 約 270px、FAQ と本文の間に約 160px の空白ができていた（実測）。
 * 骨格の中では、余白は .sp-* だけが持つ。
 *
 * ナビの分の余白は、ヘッダー部品（header/module.css）が持つ。ヘッダーは
 * position: sticky でページの流れの中に自分の高さを持つので、本文はその下から始まり、
 * 固定の方法を変えても（固定しない）、ここの余白は変えなくてよい。
 */
.ariake-section .section,
.ariake-section .hero {
  padding-block: 0;
}

/*
 * 同じ背景が続くときは、後ろの section の上の余白を半分にする。
 * 背景が変わる境目は帯として見えるので全量を残す。
 * 同じ背景で全量を2つ足すと、区切りの無い空白が大きくなりすぎる
 * （lg 同士で 80+80=160px → 120px）。
 */
:is(
  .ariake-section.bg-none + .ariake-section.bg-none,
  .ariake-section.bg-soft + .ariake-section.bg-soft,
  .ariake-section.bg-service + .ariake-section.bg-service,
  .ariake-section.bg-dawn + .ariake-section.bg-dawn,
  .ariake-section.bg-main + .ariake-section.bg-main,
  .ariake-section.bg-main-tint + .ariake-section.bg-main-tint,
  .ariake-section.bg-sub + .ariake-section.bg-sub,
  .ariake-section.bg-sub-tint + .ariake-section.bg-sub-tint,
  .ariake-section.bg-accent + .ariake-section.bg-accent,
  .ariake-section.bg-accent-tint + .ariake-section.bg-accent-tint
).sp-xl { padding-top: calc(var(--space-xl) / 2); }
:is(
  .ariake-section.bg-none + .ariake-section.bg-none,
  .ariake-section.bg-soft + .ariake-section.bg-soft,
  .ariake-section.bg-service + .ariake-section.bg-service,
  .ariake-section.bg-dawn + .ariake-section.bg-dawn,
  .ariake-section.bg-main + .ariake-section.bg-main,
  .ariake-section.bg-main-tint + .ariake-section.bg-main-tint,
  .ariake-section.bg-sub + .ariake-section.bg-sub,
  .ariake-section.bg-sub-tint + .ariake-section.bg-sub-tint,
  .ariake-section.bg-accent + .ariake-section.bg-accent,
  .ariake-section.bg-accent-tint + .ariake-section.bg-accent-tint
).sp-lg { padding-top: calc(var(--space-lg) / 2); }
:is(
  .ariake-section.bg-none + .ariake-section.bg-none,
  .ariake-section.bg-soft + .ariake-section.bg-soft,
  .ariake-section.bg-service + .ariake-section.bg-service,
  .ariake-section.bg-dawn + .ariake-section.bg-dawn,
  .ariake-section.bg-main + .ariake-section.bg-main,
  .ariake-section.bg-main-tint + .ariake-section.bg-main-tint,
  .ariake-section.bg-sub + .ariake-section.bg-sub,
  .ariake-section.bg-sub-tint + .ariake-section.bg-sub-tint,
  .ariake-section.bg-accent + .ariake-section.bg-accent,
  .ariake-section.bg-accent-tint + .ariake-section.bg-accent-tint
).sp-md { padding-top: calc(var(--space-md) / 2); }

/* ---- 文字の折り返し ---------------------------------------------------- */
/*
 * 見出しは行の長さをそろえ、本文は最後の行に1文字だけ残るのを避ける。
 * 本文モジュール・料金表の分は、それぞれの module.css にある。
 * word-break: auto-phrase は文節で改行する（Chrome 119 以降。
 * 非対応のブラウザでは従来どおりの折り返しになるだけで、崩れない）。
 */
.section-title,
.hero-title,
.story-mission-text,
.faq-q-text {
  text-wrap: balance;
  word-break: auto-phrase;
}
.section-lead,
.faq-answer p,
.story-mission-sub,
.hero-checks li,
.hero-note {
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* ---- ラベル・見出し ------------------------------------------------------ */
/* 原本は --ari-coral（白地で 2.7:1）。文字には濃い派生色を使う。 */
.section-label {
  color: var(--ari-accent-text);
}
/* 暗い背景の上のラベルは原本が白60%（3.9:1 前後）。8割にして 4.5:1 を超える */
.contact-text .section-label { color: rgba(255, 255, 255, 0.85); }

/* ---- ボタン -------------------------------------------------------------- */
/* 白文字を載せるので、4.49:1 のぎりぎりを避けて 5:1 前後まで濃くする */
.btn-primary {
  background: var(--ari-accent-fill);
}
.btn-primary:hover {
  background: var(--ari-accent-fill-hover);
}
/* ボタンの焦点リングは地の色と混ざらない濃さにする（キーボード操作用） */
.btn:focus-visible {
  outline-color: var(--ari-accent-text);
}
.story-mission .btn:focus-visible {
  outline-color: var(--ari-on-dark);
}

/* ---- CTA（story-mission） ----------------------------------------------- */
/*
 * 原本は dawn（紺→青→オレンジ）。中間の46%が混ざる位置で泥色になり、
 * 白文字（特に白55〜60%の小さい文字）が読めなかった。
 * 紺の濃淡を基調にして、オレンジは右下の小さな光にとどめる。
 *
 * 帯の色（--ari-band-from / --ari-band-to）は generateThemeCss が primary から作る。
 * primary が淡い色でも、白文字が読める濃さ（7:1）に落としてある。
 * 以前は color-mix で primary に黒を混ぜていたが、淡い primary では濃さが足りなかった。
 */
.story-mission {
  background:
    radial-gradient(
      circle at 100% 100%,
      color-mix(in srgb, var(--ari-coral) 40%, transparent) 0%,
      transparent 42%
    ),
    linear-gradient(135deg, var(--ari-band-from) 0%, var(--ari-band-to) 100%);
  /* 前の部品（よくある質問など）との間をあける。以前は約20pxで接していた（2026-10-08 ポール重大2） */
  margin-top: var(--space-md);
}
.story-mission-lead { color: rgba(255, 255, 255, 0.85); }
.story-mission-sub { color: rgba(255, 255, 255, 0.88); }

/*
 * 暗い帯（CTA・夜明け背景）の上の主ボタン。
 * 塗りの色（--ari-accent-fill）は帯と同じ紺の仲間になりやすく、
 * ボタンの輪郭が背景に溶けた（実測 1.4:1。非文字の基準は 3:1）。
 * 暗い帯の上は「白い地に濃い文字」にして、輪郭が帯とはっきり分かれるようにする。
 */
.story-mission .btn-primary,
.ariake-section.bg-dawn .btn-primary {
  background: var(--ari-on-dark);
  color: var(--ari-band-to);
}
.story-mission .btn-primary:hover,
.ariake-section.bg-dawn .btn-primary:hover {
  background: color-mix(in srgb, var(--ari-on-dark) 88%, var(--ari-band-to));
}

/*
 * 背景「夜明け」を選んだ section。右端のオレンジ（#c46f4e）に白文字を
 * 載せると 3.7:1 で足りない。2026-10-08 に、グラデーションの終点そのものを
 * 紺の仲間（#1f4a78）にしたうえで、帯の色を45%重ねて、どの primary でも 7:1 前後にする。
 */
.ariake-section.bg-dawn {
  background:
    linear-gradient(
      color-mix(in srgb, var(--ari-band-to) 45%, transparent),
      color-mix(in srgb, var(--ari-band-to) 45%, transparent)
    ),
    var(--ari-grad-dawn);
}

/* 夜明け背景の上では、見出し・ラベル・本文を白にする（原本は紺の文字のままで読めない） */
.ariake-section.bg-dawn .section-title,
.ariake-section.bg-dawn .prose-body,
.ariake-section.bg-dawn .prose-body h2,
.ariake-section.bg-dawn .prose-body h3 { color: var(--ari-on-dark); }
.ariake-section.bg-dawn .section-label,
.ariake-section.bg-dawn .section-lead { color: rgba(255, 255, 255, 0.88); }
.ariake-section.bg-dawn .prose-body a { color: var(--ari-on-dark); }

/* ---- ヒーロー ------------------------------------------------------------- */
/*
 * ヒーローの原本はまだこのファイルにある。テーマと同じセレクタを
 * モジュール側の module.css に置くと、連結順で勝ち負けが決まる
 * （moduleCss.test.ts が止める）。原本を module.css へ移すときに、
 * ここも一緒に移すこと。
 */

/*
 * ラベルとボタン文字のコントラスト。
 * 原本は --ari-coral-strong（白地で 4.49:1、基準の 4.5:1 にわずかに届かない）。
 * 派生色（--ari-accent-text）は上で定義している。
 * ボタンの塗りは .btn-primary が持つ。
 */
.hero-label {
  color: var(--ari-accent-text);
}
.hero-label::before {
  background: var(--ari-accent-text);
}
.hero-checks .ari-icon {
  color: var(--ari-accent-text);
}

/*
 * 実績3枠。原本は flex で、枠が狭いと項目名が単語の途中で折れていた
 * （「Web制作・保守の実績」が「…の実/績」になる）。
 * 3列を等分（minmax(0,1fr) で中身に押し広げられない）にして、
 * 項目名は文節で折り返し、2行までは許す。
 */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.hero-stat {
  flex: none;
  min-width: 0;
  /* 項目名が1行でも2行でも、数値の高さがそろう */
  justify-content: space-between;
}
.hero-stat-label {
  line-height: 1.5;
  text-wrap: balance;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
/* 狭い画面では余白と数字を詰めて、「¥30,000〜」が枠からはみ出さないようにする */
@media (max-width: 767px) {
  .hero-stat { padding: 0 10px; }
  .hero-stat-value { font-size: 1.3rem; }
  .hero-stat-value small { font-size: 0.75rem; }
}

/* ---- FAQ ------------------------------------------------------------------ */
/* Q の丸：白文字と --ari-coral では 2.93:1 だった */
.faq-q-badge {
  background: var(--ari-accent-fill);
}
.faq-question:hover .faq-q-text {
  color: var(--ari-accent-text);
}
.faq-question:focus-visible {
  outline: 3px solid var(--ari-accent-text);
  outline-offset: 2px;
}

/* ===========================================================================
 * テーマ設定を「効く設定」にする（2026-10-08 レビュー反映）
 * ---------------------------------------------------------------------------
 * 管理画面で変えても、サイトのどこにも効かない設定があった（ポール重大1）。
 *   ・見出しの大きさ（--font-size-heading）… どこにも使われていなかった
 *   ・本文の大きさ・行の間隔 … 本文モジュール（prose）にしか効いていなかった
 *   ・ページの背景 … 白が直書きで、変えられなかった
 * ここで、各部品の文字の大きさをテーマの変数につなぐ。
 * 原本の rem の指定は、本文・見出しに当たるものだけを、この後ろで上書きする。
 * =========================================================================== */

/*
 * ページ全体の文字・背景。テーマの「本文の文字色」「ページの背景」「本文の大きさ」
 * 「行の間隔」がここから全体に効く。
 *
 * 【文字の大きさの段階】
 * 本文の大きさ（--font-size-body）を基準に、補助的な文字は比率で決める。
 * 12px を下回らないようにする（本文を最小の 12px にしても、補助文字が潰れない）。
 *   --fs-md … 本文よりわずかに小さい（0.95倍。箇条書き・説明）
 *   --fs-sm … 補足（0.88倍）
 *   --fs-xs … 注記・ラベル（0.78倍。12px 未満にしない）
 */
.ariake-page {
  --fs-md: calc(var(--font-size-body) * 0.95);
  --fs-sm: max(0.75rem, calc(var(--font-size-body) * 0.88));
  --fs-xs: max(0.75rem, calc(var(--font-size-body) * 0.78));
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--ari-ink);
}

/* ---- 見出し：テーマの「見出しの大きさ」 ------------------------------------ */
/*
 * 原本は clamp() で画面幅に応じて決めていた。テーマの値（PC / タブレット / スマホ）に置き換える。
 * ヒーローの見出しは、ほかの見出しより一段大きく（1.1倍）する。
 * CTAの見出し・本文モジュールの h2 / h3 は、見出しの大きさに比例させる
 * （見出しを小さくしたのに、CTAだけ大きいままにならないように）。
 */
.section-title {
  font-size: var(--font-size-heading);
}
.hero-title {
  font-size: calc(var(--font-size-heading) * 1.1);
}
.story-mission-text {
  font-size: max(1rem, calc(var(--font-size-heading) * 0.55));
}

/* ---- 本文：テーマの「本文の大きさ」「行の間隔」 ---------------------------- */
.hero-checks li {
  font-size: var(--fs-md);
  line-height: var(--line-height-body);
}
.section-lead {
  font-size: var(--fs-md);
  line-height: calc(var(--line-height-body) + 0.1);
}
.hero-note {
  font-size: var(--fs-xs);
}
.hero-stat-label {
  font-size: var(--fs-xs);
}
.faq-q-text {
  font-size: var(--fs-md);
}
.faq-answer p {
  font-size: var(--fs-sm);
  line-height: calc(var(--line-height-body) + 0.15);
}
.story-mission-sub {
  font-size: var(--fs-sm);
  line-height: calc(var(--line-height-body) + 0.1);
}
.hero-mock-note {
  font-size: var(--fs-xs);
}

/* ---- ヒーローの見出しの折り返し ------------------------------------------- */
/*
 * 見出しは「行」を並べて入力する（編集者が行ごとに区切りを付ける）。
 * 以前は Hero.tsx が1行目に white-space: nowrap（style 属性）を付けていたため、1行目が
 * 20字を超えるあたりから、右の画像と重なったり枠から切れたりした（山田 Y2-01 / 村上 M2-07）。
 * いまは部品側の nowrap を外してある。行の区切りは編集者が付けたままにして、
 * 1行の中では自動で折り返す。
 *
 * ・元のCSS（上の .hero-title）に nowrap があっても、ここで normal に戻す
 * ・overflow-wrap: anywhere … 長い英数字（URL・型番）が枠を押し広げない。
 *   min-content も小さくなるので、flex の子（.hero-copy）が縮められる
 * ・.hero-copy / .hero-visual の min-width: 0 は原本にある。grid の列にも同じ指定を足す
 */
.hero-title {
  white-space: normal;
  overflow-wrap: anywhere;
}
.hero-inner > * {
  min-width: 0;
}

/* ---- ボタンの輪郭（暗いページ） ------------------------------------------- */
/*
 * 暗いページでは、ボタンの塗り（紺の濃い色）がページの背景に溶けて、ボタンの形が
 * 見えなくなる（実測 1.72:1。図形は 3:1 が基準。2026-10-08 ポールN-1）。
 * 足りないときだけ、generateThemeCss が --ari-accent-edge に明るい色を入れる
 * （足りているときは transparent で、何も描かれない）。内側の縁なので、ボタンの大きさは変わらない。
 * 料金表の「おすすめ」札（.pricing-badge）は、同じ理由で pricing/module.css に同じ指定がある。
 * 暗い帯の上（白いボタン）では不要。
 */
.btn-primary,
.faq-q-badge {
  box-shadow: inset 0 0 0 2px var(--ari-accent-edge, transparent);
}
.story-mission .btn-primary,
.ariake-section.bg-dawn .btn-primary {
  box-shadow: none;
}

/* ---- ヒーローの見出し：行ごとに折り返しをそろえる -------------------------- */
/*
 * 見出しは行（span）を並べて作る。行を block にして、行ごとに text-wrap: balance を効かせる
 * （「に。」だけが次の行に孤立するのを防ぐ。2026-10-08 ポールN-10）。
 * 行の末尾の <br> は、block の中の最後なので余分な空行にならない。
 */
.hero-title > span {
  display: block;
  text-wrap: balance;
}

/* ---- ヒーローの画像：枠なし（data-frame="plain"） --------------------------- */
/*
 * 既定は「パソコンのウィンドウ枠（3つの点）」に入れる。写真には不自然なので、
 * ページ設定の「画像の枠」を「枠なし」にすると、点の帯と枠線を出さず、
 * 角丸（テーマの「カードの角の丸み」）と影の写真だけにする（2026-10-08 山田Y3-09）。
 * data-frame は Hero.tsx が .hero-visual か .hero-mock のどちらかに付ける。両方に対応する。
 */
[data-frame="plain"] .hero-mock-bar {
  display: none;
}
[data-frame="plain"].hero-mock,
[data-frame="plain"] .hero-mock {
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
[data-frame="plain"].hero-mock img,
[data-frame="plain"] .hero-mock img {
  border-radius: var(--radius-card);
}

/* ---- 本文を並べた列（2列）：見出しも左にそろえる ---------------------------- */
/*
 * 本文の見出し（ラベル・見出し・下線）は中央に置く（FAQ・料金表と同じ）。
 * ただし2列以上に並べたとき、見出しだけ中央で本文は左だと、
 * 見出しが本文からずれて見える（2026-10-08 村上N3-06）。列が複数あるときは左にそろえる。
 */
.ariake-col:not(:only-child) .prose-section .section-header {
  text-align: left;
}
.ariake-col:not(:only-child) .prose-section .section-header .grad-line {
  margin: 0 0 24px;
}

/* ==========================================================================
 * テーマの3色（テーマカラー・サブカラー・アクセント）を使う、ブロックの背景とボタンの色
 * ==========================================================================
 * 色の値（--ari-pal-<main|sub|accent>-fill / -fill-hover / -tint / -text / -edge）は、
 * テーマの設定から generateThemeCss が計算して出す（derive.ts の paletteColorsOf）。ここは、それを使う側。
 */

/* ---- ブロックの背景（section の style.background） ----------------------- */
/* うすい背景：選んだ色をページの背景にわずかに混ぜた色。文字は、ふだんのまま読める */
.ariake-section.bg-main-tint { background: var(--ari-pal-main-tint); }
.ariake-section.bg-sub-tint { background: var(--ari-pal-sub-tint); }
.ariake-section.bg-accent-tint { background: var(--ari-pal-accent-tint); }

/*
 * 濃い背景：白い文字が読める濃さ（fill）。「夜明け」と同じく、見出し・本文・小見出しを白にし、
 * 主ボタンは白地に変える（塗りが背景に溶けないように）。カード状の部品は、白いまま。
 * --pal-bg は、どの色の背景かを、下の共通の指定に伝える。
 */
.ariake-section.bg-main { --pal-bg: var(--ari-pal-main-fill); }
.ariake-section.bg-sub { --pal-bg: var(--ari-pal-sub-fill); }
.ariake-section.bg-accent { --pal-bg: var(--ari-pal-accent-fill); }
.ariake-section.bg-main,
.ariake-section.bg-sub,
.ariake-section.bg-accent,
.ariake-section.bg-pal-fill {
  background: var(--pal-bg);
  color: var(--ari-on-dark);
}
.ariake-section.bg-main .section-title,
.ariake-section.bg-main .prose-body,
.ariake-section.bg-main .prose-body h2,
.ariake-section.bg-main .prose-body h3,
.ariake-section.bg-main .prose-body a,
.ariake-section.bg-sub .section-title,
.ariake-section.bg-sub .prose-body,
.ariake-section.bg-sub .prose-body h2,
.ariake-section.bg-sub .prose-body h3,
.ariake-section.bg-sub .prose-body a,
.ariake-section.bg-accent .section-title,
.ariake-section.bg-pal-fill .section-title,
.ariake-section.bg-accent .prose-body,
.ariake-section.bg-pal-fill .prose-body,
.ariake-section.bg-accent .prose-body h2,
.ariake-section.bg-pal-fill .prose-body h2,
.ariake-section.bg-accent .prose-body h3,
.ariake-section.bg-pal-fill .prose-body h3,
.ariake-section.bg-accent .prose-body a,
.ariake-section.bg-pal-fill .prose-body a {
  color: var(--ari-on-dark);
}
.ariake-section.bg-main .section-label,
.ariake-section.bg-main .section-lead,
.ariake-section.bg-sub .section-label,
.ariake-section.bg-sub .section-lead,
.ariake-section.bg-accent .section-label,
.ariake-section.bg-pal-fill .section-label,
.ariake-section.bg-accent .section-lead,
.ariake-section.bg-pal-fill .section-lead {
  color: rgba(255, 255, 255, 0.88);
}
.ariake-section.bg-main .btn-primary,
.ariake-section.bg-sub .btn-primary,
.ariake-section.bg-accent .btn-primary,
.ariake-section.bg-pal-fill .btn-primary {
  background: var(--ari-on-dark);
  color: var(--pal-bg);
  box-shadow: none;
}
.ariake-section.bg-main .btn-primary:hover,
.ariake-section.bg-sub .btn-primary:hover,
.ariake-section.bg-accent .btn-primary:hover,
.ariake-section.bg-pal-fill .btn-primary:hover {
  background: color-mix(in srgb, var(--ari-on-dark) 88%, var(--pal-bg));
}

/* ---- ボタンの色（部品の「ボタンの色」。ActionButton などが data-color を付ける） ----- */
/*
 * ボタンの塗りは、テーマの変数（--ari-accent-fill・ありあけAI は --ari-navy）が決めている。
 * 選んだ色の組を、このボタンの上だけで、その変数に入れ替える（テーマごとの形・ホバーの反転はそのまま使える）。
 * 濃い帯（CTA・夜明け・濃い背景）の上の主ボタンは、白地のまま（それぞれの指定のほうが強い）。
 */
[data-btn-color="main"] .btn {
  --ari-accent-fill: var(--ari-pal-main-fill);
  --ari-accent-fill-hover: var(--ari-pal-main-fill-hover);
  --ari-accent-edge: var(--ari-pal-main-edge);
  --ari-navy: var(--ari-pal-main-fill);
}
[data-btn-color="sub"] .btn {
  --ari-accent-fill: var(--ari-pal-sub-fill);
  --ari-accent-fill-hover: var(--ari-pal-sub-fill-hover);
  --ari-accent-edge: var(--ari-pal-sub-edge);
  --ari-navy: var(--ari-pal-sub-fill);
}
[data-btn-color="accent"] .btn {
  --ari-accent-fill: var(--ari-pal-accent-fill);
  --ari-accent-fill-hover: var(--ari-pal-accent-fill-hover);
  --ari-accent-edge: var(--ari-pal-accent-edge);
  --ari-navy: var(--ari-pal-accent-fill);
}

/*
 * ボタン1つだけの色（ActionButton の color。ボタンの並びで、ボタンごとに選ぶ）。
 * 部品全体の色（上の [data-btn-color] .btn）と同じ指定の強さなので、あとに書いて、こちらを優先させる。
 */
.btn[data-btn-color="main"] {
  --ari-accent-fill: var(--ari-pal-main-fill);
  --ari-accent-fill-hover: var(--ari-pal-main-fill-hover);
  --ari-accent-edge: var(--ari-pal-main-edge);
  --ari-navy: var(--ari-pal-main-fill);
}
.btn[data-btn-color="sub"] {
  --ari-accent-fill: var(--ari-pal-sub-fill);
  --ari-accent-fill-hover: var(--ari-pal-sub-fill-hover);
  --ari-accent-edge: var(--ari-pal-sub-edge);
  --ari-navy: var(--ari-pal-sub-fill);
}
.btn[data-btn-color="accent"] {
  --ari-accent-fill: var(--ari-pal-accent-fill);
  --ari-accent-fill-hover: var(--ari-pal-accent-fill-hover);
  --ari-accent-edge: var(--ari-pal-accent-edge);
  --ari-navy: var(--ari-pal-accent-fill);
}

/* ---- 本文の画像の表示のしかた（2026-10-22。RichText.tsx が data-fit・data-ratio を付ける） ------------ */
/*
 * 付けないとき（画像の縦横のまま、幅いっぱい）は、これまでどおり。
 *   contain … 枠に収める（画像の全体を見せる。余白が出ることがある）
 *   cover   … 枠いっぱいに広げる（はみ出す部分は切れる）
 * 枠の形（data-ratio）は、16:9（既定）・3:2・4:3・1:1。
 */
img[data-fit] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
img[data-fit="contain"] {
  object-fit: contain;
  background: var(--ari-bg-soft, #f3f5f7);
}
img[data-fit="cover"] {
  object-fit: cover;
}
img[data-fit][data-ratio="3:2"] { aspect-ratio: 3 / 2; }
img[data-fit][data-ratio="4:3"] { aspect-ratio: 4 / 3; }
img[data-fit][data-ratio="1:1"] { aspect-ratio: 1 / 1; }

/* ---- 文字の拡大・画面の拡大でも、横にはみ出さない（150問 Q113。WCAG 1.4.4・1.4.10） ------------------------
 * 文字を大きくしたり、ブラウザを 400% に拡大した（幅 320px 相当）とき、長い語やボタンの文字が枠を越えて、
 * 横にスクロールが出ないように：横並び（flex）の中の文字の入れ物は縮められるようにし、長い語は途中で折り返す。
 * ボタンは、幅を越えない（文字は折り返して中央に）。
 */
.btn { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.faq-q-text { min-width: 0; overflow-wrap: anywhere; }

/* ---- 動きを減らす設定（prefers-reduced-motion。150問 Q67） ------------------------------------------
 * 利用者の OS が「視覚効果を減らす」になっているとき、飾りの動きをやめる：
 *   ・スクロールで、ふわっと出る動き（.fade-in）は、最初から表示する（動かさない）
 *   ・なめらかなスクロール（scroll-behavior: smooth）をやめる
 *   ・ボタンやリンクの色の変化・移動のアニメーションは、すぐに切り替える（状態の変化は、遅らせずに反映する）
 * 部品ごとの module.css にも同じ設定があるが（ヘッダー・フッター・予約など）、ここは「全体の最後の砦」。
 * （!important は、部品の CSS より後に読まれる保証が無いので使う。この範囲だけ）
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 印刷・PDF 保存（QA public-ui B-05） -------------------------------------------------------------
 * スクロールで出る要素（.fade-in）は、まだスクロールしていない所だと透明のまま印刷されてしまう。
 * 印刷では、動きの途中の状態を残さず、全部を見せる。
 * （テーマの CSS が持つ .reveal などは、テーマの CSS の @media print が見せる）
 */
@media print {
  .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* 閉じたままの「よくある質問」の答えも、紙には載せる（開いてから印刷しないと答えが欠ける） */
  .faq-answer { display: block !important; }
}


/* module: hero */

/* ===========================================================================
 * hero/module.css — このモジュールのCSS
 * ---------------------------------------------------------------------------
 * ここに書いたものは、ビルド時にテーマのCSSの後ろへ連結される
 * （packages/site-modules/src/moduleCss.ts）。
 * モジュールを消せばこのCSSも消える。テーマ側に書くと、
 * モジュールを消しても使われないCSSが残り続ける。
 *
 * テーマの変数（--ari-*）は参照してよい。値は設定から生成される
 * （仕様書 Theme仕様「値の流れは設定 → CSS変数の一方向」）。
 * 変数の定義をここに書かないこと。
 * =========================================================================== */

/*
 * ヒーローの見た目そのものは、まだテーマの base.css に入っている。
 * あちらは現行 index.html から1文字も変えずに持ち込んだ塊で、
 * 「見た目を変えない移設」を確認するための原本である。
 * TOPページの移設でその塊を解体するときに、ここへ移す。
 */

/* 画像が未選択のときの枠（編集中にだけ出る） */
.hero-mock-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  font-size: 0.85rem;
  color: var(--ari-ink-2);
  background: var(--ari-bg-soft);
  border: 1px dashed var(--ari-line);
}


/* module: pricing */

/* ===========================================================================
 * pricing/module.css — このモジュールのCSS
 * ---------------------------------------------------------------------------
 * ここに書いたものは、ビルド時にテーマのCSSの後ろへ連結される
 * （packages/site-modules/src/moduleCss.ts）。
 * モジュールを消せばこのCSSも消える。テーマ側に書くと、
 * モジュールを消しても使われないCSSが残り続ける。
 *
 * テーマの変数（--ari-*）は参照してよい。値は設定から生成される
 * （仕様書 Theme仕様「値の流れは設定 → CSS変数の一方向」）。
 * 変数の定義をここに書かないこと。
 * =========================================================================== */

/* ===========================================================================
 * 料金表モジュール
 * ---------------------------------------------------------------------------
 * 現行サイトの料金表は partner.html と pricing-detail.html に別々のCSSで
 * 書かれており、テーブルとカードで構造も異なっていた。
 * モジュール化にあたり、カード形式に一本化する。
 * 色は --ari-service を参照し、ページのサービスカラーに追従させる
 * （2026-09-27決定。T5で見つかった「同じクラス名で色だけ違う」を防ぐ）。
 * =========================================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: var(--space-md);
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  background: var(--ari-bg-page);
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ari-on-dark);
  /* 白文字を載せる塗り。テーマが 4.5:1 以上になる濃さで出す（--ari-accent-fill） */
  background: var(--ari-accent-fill);
  /* ボタンと同じ形（「角ばる」にしたとき、札だけ丸薬のまま残らない） */
  border-radius: var(--radius-button);
  /* 暗いページで札が背景に溶けるときだけ、輪郭を足す（base.css の「ボタンの輪郭」と同じ） */
  box-shadow: inset 0 0 0 2px var(--ari-accent-edge, transparent);
}

.pricing-plan-name {
  font-size: 1.1rem;
  font-weight: 800;
  /* 背景の上で読める強調色（明るい背景では濃く、暗い背景では明るく。テーマが計算して出す） */
  color: var(--ari-accent-text);
}

.pricing-price {
  margin-top: 8px;
  font-size: 2rem;
  font-weight: 800;
  color: var(--ari-ink);
  line-height: 1.2;
}

.pricing-price small {
  margin-left: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ari-ink-2);
}

/* 派生値。基準価格から算出したものであることが分かるよう、控えめに出す */
.pricing-derived {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--ari-bg-soft);
  border-radius: 8px;
}

.pricing-derived > div + div {
  margin-top: 8px;
}

.pricing-derived dt {
  font-size: var(--fs-xs);
  color: var(--ari-ink-2);
}

.pricing-derived dd {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ari-ink);
}

.pricing-derived dd small {
  margin-left: 4px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ari-ink-2);
}

.pricing-description {
  margin-top: 16px;
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}

.pricing-features {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-sm);
}

.pricing-features .ari-icon {
  font-size: 1.1rem;
  color: var(--ari-accent-text);
}

.pricing-cta {
  margin-top: 20px;
}

.pricing-note {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}

/* 2026-10-07 レビュー反映。孤立した1文字の折り返しを避ける */
.pricing-plan-name {
  text-wrap: balance;
  word-break: auto-phrase;
}
.pricing-description {
  text-wrap: pretty;
  word-break: auto-phrase;
}


/* module: faq */

/* ===========================================================================
 * faq/module.css — このモジュールのCSS
 * ---------------------------------------------------------------------------
 * ここに書いたものは、ビルド時にテーマのCSSの後ろへ連結される
 * （packages/site-modules/src/moduleCss.ts）。
 * モジュールを消せばこのCSSも消える。
 *
 * FAQ本体の見た目は、まだテーマの base.css に入っている。
 * あちらは現行 works.html / index.html から1文字も変えずに持ち込んだ塊で、
 * 「見た目を変えない移設」を確認するための原本である。
 * TOPページの移設でその塊を解体するときに、ここへ移す。
 * ここにあるのは、モジュール化にあたって自分たちで足した分だけである。
 * =========================================================================== */

/* FAQで参照先が見つからないときの表示（編集中のみ起きる） */
.faq-empty {
  padding: 16px;
  text-align: center;
  color: var(--ari-ink-2);
  background: var(--ari-bg-soft);
  border-radius: var(--radius-card);
}

/* FAQの回答内のリンク。base.css のFAQスタイルを補う */
.faq-answer a {
  color: var(--ari-coral-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * .faq-chevron の transition は書かない。
 * テーマ側（base.css）が同じ宣言を既に持っている（原本からの移設分）。
 * 同じセレクタを2箇所に置くと、あとで片方を直したときに
 * もう片方が効き続け、原因を探すことになる。
 * 開閉の回転は Faq.tsx が style で付けている。
 */

/* 回答内リンクの色：--ari-coral-strong は白地で 4.49:1 のため、派生色にする */
.faq-answer a {
  color: var(--ari-accent-text);
}


/* module: prose */

/* ===========================================================================
 * prose/module.css — このモジュールのCSS
 * ---------------------------------------------------------------------------
 * ここに書いたものは、ビルド時にテーマのCSSの後ろへ連結される
 * （packages/site-modules/src/moduleCss.ts）。
 * モジュールを消せばこのCSSも消える。テーマ側に書くと、
 * モジュールを消しても使われないCSSが残り続ける。
 *
 * テーマの変数（--ari-*）は参照してよい。値は設定から生成される
 * （仕様書 Theme仕様「値の流れは設定 → CSS変数の一方向」）。
 * 変数の定義をここに書かないこと。
 * =========================================================================== */

/* ===========================================================================
 * 本文モジュール（prose）
 * --------------------------------------------------------------------------
 * 法務ページのような文章主体のセクション。
 * リッチテキストが出す要素（p / h2-h4 / ul / ol / blockquote / a）に当てる。
 * =========================================================================== */

.prose-narrow {
  max-width: 720px;
}

.prose-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--ari-ink);
}

.prose-body > * + * {
  margin-top: 1em;
}

.prose-body h2 {
  margin-top: 1.8em;
  /* テーマの「見出しの大きさ」に比例させる（既定 2.5rem で 1.375rem）。小さくしすぎても 1.1rem は残す */
  font-size: max(1.1rem, calc(var(--font-size-heading) * 0.55));
  font-weight: 800;
  color: var(--ari-navy);
}

.prose-body h3 {
  margin-top: 1.6em;
  font-size: max(1rem, calc(var(--font-size-heading) * 0.44));
  font-weight: 700;
  color: var(--ari-navy);
}

.prose-body ul,
.prose-body ol {
  padding-left: 1.4em;
}

.prose-body ul { list-style: disc; }
.prose-body ol { list-style: decimal; }

.prose-body li + li {
  margin-top: 0.4em;
}

.prose-body li p {
  margin: 0;
}

.prose-body blockquote {
  padding: 12px 16px;
  border-left: 3px solid var(--ari-service, var(--ari-coral));
  background: var(--ari-bg-soft);
  color: var(--ari-ink-2);
}

.prose-body a {
  color: var(--ari-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/*
 * 2026-10-07 レビュー反映。
 * 孤立した1文字の折り返しを避ける（pretty / auto-phrase）。
 */
.prose-body {
  text-wrap: pretty;
  word-break: auto-phrase;
}

/*
 * 本文セクションの見出しは、ラベルも下線も中央に置く。
 * ほかのセクション（FAQ・料金表）が center なので、ここだけ左に残ると
 * ラベルだけ左、見出しだけ中央のように見えていた（D-07）。
 */
.prose-section .section-header {
  text-align: center;
}
.prose-section .section-header .grad-line {
  margin: 0 auto 24px;
}


/* module: cta */

/* ===========================================================================
 * cta/module.css — 行動喚起（CTA）
 * ---------------------------------------------------------------------------
 * 帯そのもの（.story-mission）の見た目はテーマ（base.css・テーマ固有の CSS）が持つ。
 * ここは、右側の人物のイラスト（任意。2026-10-08 に足した）の並びと形だけ。
 * イラストが無いときは .cta-text が1つあるだけで、これまでと同じ見た目になる。
 * =========================================================================== */

.cta-with-figure {
  display: grid;
  gap: 40px;
  align-items: center;
  text-align: left;
}
@media (min-width: 900px) {
  .cta-with-figure {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
  }
}

/* イラスト：外側の淡い円・内側の明るい円・人物・吹き出し（Figma の Final CTA の比率） */
.cta-figure {
  position: relative;
  justify-self: center;
  width: min(100%, 375px);
  aspect-ratio: 375 / 363;
}
@media (min-width: 900px) {
  .cta-figure {
    width: clamp(300px, 26vw, 375px);
    justify-self: end;
  }
}
.cta-figure > * {
  position: absolute;
}
.cta-figure-ring {
  left: 3.8%;
  top: 0.55%;
  width: 96%;
  height: 99.2%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.cta-figure-halo {
  left: 3.8%;
  top: 15.8%;
  width: 81.3%;
  height: 83.9%;
  border-radius: 50%;
  background: var(--ari-coral-050);
}
.cta-figure-person {
  left: 4.7%;
  top: 31.1%;
  width: 79.4%;
  height: 57.2%;
  overflow: hidden;
}
.cta-figure-person img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.cta-figure-bubble {
  left: 0;
  top: 21.5%;
  padding: 12px 18px;
  border-radius: 18px;
  background: var(--ari-bg-page);
  box-shadow: 0 6px 20px rgba(26, 51, 38, 0.08);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
  white-space: nowrap;
}

/* ===========================================================================
 * 帯の見た目の選択（2026-10-22）。Cta.tsx が、選んだものだけを data-cta-* 属性にする。
 * 選ばないときは、何も付かず、これまでどおり（テーマの見た目）。
 * テーマ固有の CSS（.ariake-page[data-theme] .story-mission …）より強く効かせるため、! important を付けている。
 * ========================================================================= */

/* 背景色：テーマの3色は、白い文字が読める濃さの色（--ari-pal-*-fill）。淡いグレー・白は、濃い文字にする */
.story-mission[data-cta-band="main"] { background: var(--ari-pal-main-fill) !important; }
.story-mission[data-cta-band="sub"] { background: var(--ari-pal-sub-fill) !important; }
.story-mission[data-cta-band="accent"] { background: var(--ari-pal-accent-fill) !important; }
.story-mission[data-cta-band="soft"] { background: var(--ari-bg-soft, #f3f5f7) !important; }
.story-mission[data-cta-band="white"] { background: #ffffff !important; }

/* 淡い背景（淡いグレー・白）：文字は濃い色。ボタンも濃い塗り・濃い枠にする（白いボタンだと、背景に溶ける） */
.story-mission[data-cta-band="soft"] .story-mission-lead,
.story-mission[data-cta-band="soft"] .story-mission-text,
.story-mission[data-cta-band="soft"] .story-mission-sub,
.story-mission[data-cta-band="white"] .story-mission-lead,
.story-mission[data-cta-band="white"] .story-mission-text,
.story-mission[data-cta-band="white"] .story-mission-sub {
  color: var(--ari-ink, #222222) !important;
}
/* ボタンの矢印（円の ::before ＋ 矢印の ::after）も、淡い背景の上の色にそろえる */
.story-mission[data-cta-band="soft"] .btn-primary::before,
.story-mission[data-cta-band="white"] .btn-primary::before,
.story-mission[data-cta-band="soft"] .btn-outline:hover::before,
.story-mission[data-cta-band="white"] .btn-outline:hover::before {
  background: #ffffff !important;
}
.story-mission[data-cta-band="soft"] .btn-primary::after,
.story-mission[data-cta-band="white"] .btn-primary::after,
.story-mission[data-cta-band="soft"] .btn-outline:hover::after,
.story-mission[data-cta-band="white"] .btn-outline:hover::after {
  background: var(--ari-accent-fill, var(--ari-navy)) !important;
}
.story-mission[data-cta-band="soft"] .btn-outline::before,
.story-mission[data-cta-band="white"] .btn-outline::before {
  background: var(--ari-accent-fill, var(--ari-navy)) !important;
}
.story-mission[data-cta-band="soft"] .btn-outline::after,
.story-mission[data-cta-band="white"] .btn-outline::after {
  background: #ffffff !important;
}
.story-mission[data-cta-band="soft"] .btn-primary,
.story-mission[data-cta-band="white"] .btn-primary {
  background: var(--ari-accent-fill, var(--ari-navy)) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.story-mission[data-cta-band="soft"] .btn-outline,
.story-mission[data-cta-band="white"] .btn-outline {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--ari-accent-fill, var(--ari-navy)) !important;
  color: var(--ari-accent-fill, var(--ari-navy)) !important;
}
@media (hover: hover) {
  .story-mission[data-cta-band="soft"] .btn-primary:hover,
  .story-mission[data-cta-band="white"] .btn-primary:hover {
    background: var(--ari-accent-fill-hover, var(--ari-accent-fill, var(--ari-navy))) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  .story-mission[data-cta-band="soft"] .btn-outline:hover,
  .story-mission[data-cta-band="white"] .btn-outline:hover {
    background: var(--ari-accent-fill, var(--ari-navy)) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
}

/* 角の形 */
.story-mission[data-cta-shape="square"] { border-radius: 4px !important; }
.story-mission[data-cta-shape="slight"] { border-radius: 16px !important; }
.story-mission[data-cta-shape="round"] { border-radius: 40px !important; }

/* 見出し・文章の色（背景に合わせた色より、選んだ色を優先する） */
.story-mission[data-cta-text="light"] .story-mission-lead,
.story-mission[data-cta-text="light"] .story-mission-text,
.story-mission[data-cta-text="light"] .story-mission-sub { color: #ffffff !important; }
.story-mission[data-cta-text="dark"] .story-mission-lead,
.story-mission[data-cta-text="dark"] .story-mission-text,
.story-mission[data-cta-text="dark"] .story-mission-sub { color: var(--ari-ink, #222222) !important; }
.story-mission[data-cta-text="main"] .story-mission-lead,
.story-mission[data-cta-text="main"] .story-mission-text,
.story-mission[data-cta-text="main"] .story-mission-sub { color: var(--ari-pal-main-text, var(--ari-pal-main)) !important; }
.story-mission[data-cta-text="sub"] .story-mission-lead,
.story-mission[data-cta-text="sub"] .story-mission-text,
.story-mission[data-cta-text="sub"] .story-mission-sub { color: var(--ari-pal-sub-text, var(--ari-pal-sub)) !important; }
.story-mission[data-cta-text="accent"] .story-mission-lead,
.story-mission[data-cta-text="accent"] .story-mission-text,
.story-mission[data-cta-text="accent"] .story-mission-sub { color: var(--ari-pal-accent-text, var(--ari-pal-accent)) !important; }

/* ============================================================================
 * 記事の本文（.blog-embed）の中では、画面の幅にかかわらず、縦に積む並びにそろえる（2026-10-22）。
 * 記事の本文はページよりずっと狭い（約760px）のに、「横に並べる」指定はブラウザの画面の幅で決まるため、
 * 広い画面で、文章の列が潰れたり、プレビューと公開した記事で見え方が違ったりした。
 * ========================================================================== */
.blog-embed .cta-with-figure {
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.blog-embed .cta-figure {
  width: min(100%, 375px);
  justify-self: center;
}


/* module: header */

/* ===========================================================================
 * header/module.css — ヘッダー（全ページの一番上）
 * ---------------------------------------------------------------------------
 * ビルド時にテーマのCSSの後ろへ連結される（packages/site-modules/src/moduleCss.ts）。
 * 色・文字の大きさ・角の丸みは、テーマの変数（--ari-*, --fs-*, --radius-*）で書く。
 * 変数の定義はここに書かない。
 *
 * 現行 ariake-ai.com の navbar（theme の base.css にあった .navbar-*）を、ここへ移した。
 * 変えた点：
 *   ・position: fixed → sticky（本文がヘッダーの下に隠れない。余白の調整が要らない）
 *   ・スマホのメニューは JS の class="open" ではなく details[open]（Header.tsx の説明を参照）
 *   ・色の直書き（#ffffff など）をやめ、テーマの変数にした
 * =========================================================================== */

/* ---- 外枠 ---------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--ari-bg-page);
  box-shadow: 0 1px 0 var(--ari-line);
}
/* 固定しない：流れる。メニューを下へ重ねる土台（position）だけ残す */
.header[data-sticky="static"] {
  position: relative;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1100px;
  min-height: 68px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- 本文へ移動するリンク ------------------------------------------------ */
/* 普段は画面の外。Tab で止まったときだけ、左上に見せる（QA public-ui B-04） */
.header-skip {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 1;
  padding: 10px 16px;
  border: 2px solid var(--ari-ink);
  border-radius: 8px;
  background: var(--ari-bg-page);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ari-ink);
  text-decoration: none;
  transform: translateY(-300%);
}
.header-skip:focus,
.header-skip:focus-visible {
  transform: none;
}

/* ---- ロゴ ---------------------------------------------------------------- */
.header-brand {
  flex-shrink: 0;
}
.header-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.header-logo-img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.header-logo-text {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ari-navy);
}

/* ---- PC：メニュー -------------------------------------------------------- */
.header-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}
.header-nav-list {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
}
.header-nav-item {
  flex-shrink: 0;
}
.header-link {
  display: inline-block;
  padding: 10px 0;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--ari-navy);
  transition: color var(--transition);
}
.header-link:hover {
  color: var(--ari-accent-text);
}

/* ---- PC：電話番号とボタン ------------------------------------------------ */
.header-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
}
.header-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  color: var(--ari-ink-2);
}
a.header-tel:hover {
  color: var(--ari-accent-text);
}
.header-tel-icon {
  flex-shrink: 0;
}
.header-actions .header-cta {
  display: block;
  padding: 7px 18px;
  font-size: var(--fs-sm);
  text-align: center;
  white-space: nowrap;
}

/* ---- スマホ：メニューボタンと開くメニュー -------------------------------- */
/* PC では出さない */
.header-more {
  display: none;
}
/* 画面を読み上げ専用にする文字（目には見えない） */
.header-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-button);
}
/* ブラウザ標準の三角マーク（▶）を消す */
.header-toggle::-webkit-details-marker {
  display: none;
}
.header-toggle:focus-visible {
  outline: 2px solid var(--ari-accent-text);
  outline-offset: 2px;
}
.header-toggle-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
}
.header-toggle-bar {
  display: block;
  height: 2px;
  background: var(--ari-navy);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
/* 開いているあいだは × にする */
.header-more[open] .header-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header-more[open] .header-toggle-bar:nth-child(2) {
  opacity: 0;
}
.header-more[open] .header-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 開くメニュー。ヘッダーの真下に、横いっぱいで重ねる */
.header-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  padding: 8px 20px 20px;
  background: var(--ari-bg-page);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ari-navy) 14%, transparent);
}
.header-menu-item + .header-menu-item {
  border-top: 1px solid var(--ari-line);
}
.header-menu-link {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ari-navy);
}
a.header-menu-link:hover {
  color: var(--ari-accent-text);
}
/* ボタンと電話は、区切り線の無い別の段にする（上の + 指定と同じ強さで、後に書いて勝たせる） */
.header-menu-item.header-menu-cta {
  padding: 16px 0 6px;
  border-top: 0;
}
.header-menu-btn {
  display: block;
  text-align: center;
}
.header-menu-item.header-menu-tel {
  border-top: 0;
}
.header-menu-tel .header-menu-link {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ari-ink-2);
}
/* 番号は途中で折り返さない（「050-3748-」と「0060」に割れない。折り返すなら「：」の後ろ。デザインレビュー第1回 B6） */
.header-menu-tel-number {
  white-space: nowrap;
}

/* ---- 狭い画面（メニュー項目が折り返す前に切り替える） -------------------- */
@media (max-width: 900px) {
  .header-nav,
  .header-actions {
    display: none;
  }
  .header-more {
    display: block;
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .header-inner {
    min-height: 60px;
    padding: 0 16px;
  }
  .header-menu {
    max-height: calc(100vh - 60px);
    padding: 4px 16px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-toggle-bar,
  .header-link {
    transition: none;
  }
}


/* module: footer */

/* ===========================================================================
 * footer/module.css — フッター（全ページの一番下）
 * ---------------------------------------------------------------------------
 * ビルド時にテーマのCSSの後ろへ連結される（packages/site-modules/src/moduleCss.ts）。
 * 色・文字の大きさは、テーマの変数（--ari-*, --fs-*）で書く。変数の定義はここに書かない。
 *
 * 現行 ariake-ai.com の footer（theme の base.css にあった .footer-*）を、ここへ移した。
 * 変えた点：
 *   ・背景 #0a1f3d の直書き → テーマの「帯の色」（--ari-band-from）。CTA・夜明け背景と同じ濃い色
 *   ・白の透明度 35〜50% の薄い文字 → 65% 以上（背景に対して 4.5:1 以上を保つ）
 *   ・SNS のアイコン画像をやめ、文字のリンクにした
 * 文字の色は「濃い面の上の文字色」（--ari-on-dark）を color-mix で薄めて作る。
 * =========================================================================== */

.footer {
  padding: 52px 20px 36px;
  background: var(--ari-band-from);
  color: color-mix(in srgb, var(--ari-on-dark) 78%, transparent);
  font-size: var(--fs-md);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---- 上段：ロゴ・説明 / リンクの列 --------------------------------------- */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid color-mix(in srgb, var(--ari-on-dark) 18%, transparent);
}
.footer-brand {
  min-width: 0;
  max-width: 420px;
}
.footer-logo-img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 220px;
  margin-bottom: 12px;
  object-fit: contain;
}
/* ふつうのロゴ（明るい背景用）。このフッターは濃い背景なので隠す。明るいフッターのテーマが入れ替える */
.footer-logo-light {
  display: none;
}
.footer-logo-text {
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ari-on-dark);
}
.footer-description {
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: color-mix(in srgb, var(--ari-on-dark) 72%, transparent);
}
.footer-description-line {
  display: block;
}

.footer-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.footer-group-title {
  margin-bottom: 14px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--ari-on-dark) 68%, transparent);
}
/* リンクの押せる面は縦 40px ほど（デザインレビュー第1回 B7）。行の間のすき間は、リンクの上下の余白でとる */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-link {
  display: inline-block;
  padding: 10px 0;
  font-size: var(--fs-md);
  color: color-mix(in srgb, var(--ari-on-dark) 82%, transparent);
  transition: color var(--transition);
}
.footer-link:hover,
.footer-info-link:hover,
.footer-sns-link:hover,
.footer-legal-link:hover {
  color: var(--ari-on-dark);
}

/* ---- 中段：会社の情報・SNS ----------------------------------------------- */
.footer-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 32px;
  padding: 20px 0 24px;
}
.footer-info-item {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: color-mix(in srgb, var(--ari-on-dark) 72%, transparent);
}
.footer-info-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.footer-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.footer-sns-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--ari-on-dark) 72%, transparent);
  transition: color var(--transition);
}
.footer-sns-handle {
  font-size: var(--fs-xs);
}
/* SNS のアイコン（見せ方が「アイコンだけ」「アイコンと名前」のとき） */
.footer-sns-icon {
  flex: none;
  width: 20px;
  height: 20px;
}
.footer-sns[data-sns-style="icon-text"] .footer-sns-link {
  align-items: center;
}
/* アイコンだけ：押せる大きさ（44px 四方）を取り、間を詰める */
.footer-sns[data-sns-style="icon"] {
  gap: 4px;
}
.footer-sns[data-sns-style="icon"] .footer-sns-link {
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
.footer-sns[data-sns-style="icon"] .footer-sns-icon {
  width: 22px;
  height: 22px;
}

/* ---- 下段：規約などのリンク・著作権 -------------------------------------- */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--ari-on-dark) 18%, transparent);
}
.footer-legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.footer-legal-link {
  display: inline-block;
  padding: 10px 0;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--ari-on-dark) 72%, transparent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.footer-copy {
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--ari-on-dark) 68%, transparent);
}

@media (max-width: 767px) {
  .footer {
    padding: 44px 16px 28px;
  }
  .footer-top {
    flex-direction: column;
    gap: 28px;
  }
  .footer-groups {
    flex-direction: column;
    gap: 28px;
  }
  .footer-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-link,
  .footer-info-link,
  .footer-sns-link,
  .footer-legal-link {
    transition: none;
  }
}


/* module: section-heading */

/* ============================================================================
 * section-heading/module.css — セクションの見出し
 * 文字の大きさ・色・英字の小見出しの形はテーマ（base.css とテーマ固有の CSS）が持つ。
 * ここは、並び（中央・左）と、見出しの中の強調・色つきの一言だけ。
 * ========================================================================== */

.section-heading {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: var(--space-md);
}
.section-heading--center {
  align-items: center;
  text-align: center;
}
.section-heading--left {
  align-items: flex-start;
  text-align: left;
}
.section-heading .section-label,
.section-heading .section-title {
  margin: 0;
}
.section-heading .section-title em {
  font-style: normal;
  color: var(--ari-navy);
}
.section-heading-sub {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ari-accent-text);
}
.section-heading .section-lead {
  margin: 0;
}
.section-heading .section-lead p {
  margin: 0;
}
.section-heading .section-lead p + p {
  margin-top: 0.6em;
}


/* module: page-intro */

/* ============================================================================
 * page-intro/module.css — ページの最初（ファーストビュー）
 * 出どころ：design-html の top.css（.kv）・about.css（.a-fv / .chip）・service.css（.s-fv / .orb）・
 * common.css（.breadcrumb / .tag / .title-xl）。数値は Figma のまま。
 * 横の余白はテーマの列（ariake-row）が持つので、ここは列の幅いっぱいに描く。
 * ========================================================================== */

.page-intro {
  width: 100%;
}

/* ------------------------------------------------------------ パンくず */
.page-intro-breadcrumb {
  margin-bottom: clamp(24px, 3.33vw, 48px);
}
.page-intro-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink-2);
}
.page-intro-breadcrumb a {
  /* 押せる面を縦に広げる（余白は負の余白で戻す。デザインレビュー第1回 B7） */
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  color: var(--ari-navy);
}
.page-intro-breadcrumb a:hover {
  text-decoration: underline;
}
.page-intro-breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  opacity: 0.45;
}

/* ------------------------------------------------------------ 並び */
.page-intro-row {
  display: grid;
  gap: 40px;
  align-items: center;
}
.page-intro--illustration .page-intro-row {
  gap: 32px;
}

/* ------------------------------------------------------------ 文字 */
.page-intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
.page-intro--illustration .page-intro-text {
  gap: 20px;
}
.page-intro-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 6px 16px 6px 14px;
  border-radius: 999px;
  background: var(--ari-blue);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.page-intro-tag::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ari-navy);
}
.page-intro--illustration .page-intro-tag {
  padding: 7px 16px 7px 14px;
  color: var(--ari-navy-text, var(--ari-navy));
}
.page-intro-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-heading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
  text-wrap: balance;
  word-break: auto-phrase;
}
.page-intro-title em {
  font-style: normal;
  color: var(--ari-navy);
}
/* トップページの見出しは、ほかの見出しより大きい（Figma：64px） */
.page-intro--illustration .page-intro-title {
  font-size: clamp(36px, 4.445vw, 64px);
  font-weight: 900;
  line-height: 1.3;
}
.page-intro-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ari-ink);
  text-wrap: pretty;
  word-break: auto-phrase;
}
.page-intro--illustration .page-intro-lead {
  max-width: 520px;
  font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: 0.05em;
}
.page-intro-lead p {
  margin: 0;
}
.page-intro-lead p + p {
  margin-top: 0.6em;
}
/* 説明文の改行は、広い画面でだけ効かせる（Figma の br-lg と同じ） */
@media (max-width: 1279px) {
  .page-intro-lead br {
    display: none;
  }
}
.page-intro-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
}
.page-intro-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--ari-navy);
}
.page-intro-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ------------------------------------------------------------ 右の絵 */
.page-intro-visual {
  min-width: 0;
  width: 100%;
}

/* イラスト1枚（トップページ） */
.page-intro-illust {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 751 / 438;
  object-fit: contain;
}
.page-intro-illust-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 751 / 438;
  border-radius: var(--radius-card);
  background: var(--ari-bg-soft);
}

/* 写真のカード＋小さな札（ありあけAIとは） */
.page-intro-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 560 / 440;
  margin-inline: auto;
  border-radius: 24px;
  background: var(--ari-coral-050);
}
.page-intro-photo {
  position: absolute;
  left: 5.36%;
  top: 12.05%;
  width: 89.29%;
  height: 85.2%;
  object-fit: cover;
}
.page-intro-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ari-line);
  border-radius: 999px;
  background: var(--ari-bg-page);
  filter: drop-shadow(0 6px 10px rgba(26, 51, 38, 0.08));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
  white-space: nowrap;
}
.page-intro-chip::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--ari-navy);
}
.page-intro-chip-n1 {
  left: max(-4.29%, -16px);
  top: 9.09%;
}
.page-intro-chip-n1::before {
  background: var(--ari-tone-green);
}
.page-intro-chip-n2 {
  left: 67.86%;
  top: 5.45%;
}
.page-intro-chip-n2::before {
  background: var(--ari-tone-amber);
}
.page-intro-chip-n3 {
  left: 75%;
  top: 84.09%;
}
@media (max-width: 639px) {
  .page-intro-chip-n2 {
    left: auto;
    right: 0;
  }
  .page-intro-chip-n3 {
    left: auto;
    right: -2%;
  }
}

/* 丸い枠に画像3枚（サービス） */
.page-intro-orbs {
  position: relative;
  width: 100%;
  max-width: 633px;
  aspect-ratio: 633 / 508;
  margin-inline: auto;
}
.page-intro-dot,
.page-intro-orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}
.page-intro-dot-n1 {
  left: 93.52%;
  top: 9.84%;
  width: 3.21%;
  background: var(--ari-blue);
}
.page-intro-dot-n2 {
  left: 45.02%;
  top: 7.48%;
  width: 3.93%;
  background: var(--ari-tone-amber-050);
}
.page-intro-dot-n3 {
  left: 7.9%;
  top: 3.15%;
  width: 6.43%;
  background: var(--ari-tone-green-050);
}
.page-intro-dot-n4 {
  left: 87.52%;
  top: 66.73%;
  width: 11.42%;
  background: var(--ari-blue);
}
.page-intro-orb {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 9.04px 27.12px rgba(26, 38, 77, 0.08);
}
.page-intro-orb-n1 {
  left: 0;
  top: 13.39%;
  width: 49.98%;
  background: var(--ari-tone-green-050);
}
.page-intro-orb-n2 {
  left: 55.29%;
  top: 2.17%;
  width: 37.49%;
  background: var(--ari-coral-050);
}
.page-intro-orb-n3 {
  left: 51.82%;
  top: 55.12%;
  width: 35.7%;
  background: var(--ari-tone-amber-050);
}
.page-intro-orb-img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.page-intro-orb-n1 .page-intro-orb-img {
  width: 82.14%;
}
.page-intro-orb-n2 .page-intro-orb-img {
  width: 87.23%;
}
.page-intro-orb-n3 .page-intro-orb-img {
  width: 79.65%;
  border-radius: 4px;
}

/* ------------------------------------------------------------ 広い画面：2列 */
@media (min-width: 1024px) {
  .page-intro--illustration .page-intro-row {
    grid-template-columns: minmax(0, min(528px, 45%)) minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }
  /* イラストは右の余白まで広げる（Figma：画面の右端から 31px まで） */
  .page-intro--illustration .page-intro-visual {
    width: auto;
    padding-top: clamp(0px, 1.4vw, 20px);
    margin-right: calc(min(2.15vw, 31px) - clamp(40px, 9.03vw, 130px));
  }
  .page-intro--photo-card .page-intro-row {
    grid-template-columns: minmax(0, 556fr) minmax(0, 560fr);
    gap: 64px;
  }
  .page-intro--circles .page-intro-row {
    grid-template-columns: minmax(0, 480fr) minmax(0, 633fr);
    gap: clamp(40px, 4.65vw, 67px);
  }
  .page-intro--text-only .page-intro-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------- 説明文の下の小さな表（infoRows・任意） */
/* パートナーページ P_01 の「対面でのご相談／オンラインでのご相談」の薄いグレーの箱 */
.page-intro-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px 24px;
  border-radius: 14px;
  background: var(--ari-bg-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.page-intro-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}
.page-intro-info-row + .page-intro-info-row {
  padding-top: 12px;
  border-top: 1px solid var(--ari-line);
}
.page-intro-info-row dt {
  width: 170px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.page-intro-info-row dd {
  margin: 0;
  color: var(--ari-ink-2);
}
@media (max-width: 559px) {
  .page-intro-info {
    padding: 14px 18px;
  }
  .page-intro-info-row dt {
    width: 100%;
  }
}

/* ---------------------------------------- 小さな札・薄い青のパネル（2026-10-30） */
/* 説明文の下の小さな札（セミナー：約90分・無料・少人数） */
.page-intro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-intro-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ari-coral-050);
  color: var(--ari-navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
}
/* 薄い青のパネルに絵1枚（セミナー・お問い合わせ）。絵は全体が見えるように収める */
.page-intro-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 24px;
  background: var(--ari-coral-050);
}
.page-intro-panel-img {
  display: block;
  width: 84%;
  height: 84%;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .page-intro--panel .page-intro-row {
    grid-template-columns: minmax(0, 556fr) minmax(0, 560fr);
    gap: 64px;
  }
}


/* module: button-row */

/* ============================================================================
 * button-row/module.css — ボタンの並び
 * 出どころ：design-html の top.css（.solution__more / .apps__note / .apps__more /
 * .price__note / .price__more）・service.css（.s-price__more）。
 * ボタンの形・色はテーマ（btn）が持つ。ここは並びと、補足の文の大きさだけ。
 * ========================================================================== */

.button-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: clamp(24px, 2.78vw, 40px);
  text-align: center;
}
/* 列の一番上に置いたときは、上の余白を足さない */
.button-row:first-child {
  margin-top: 0;
}
.button-row--left {
  align-items: flex-start;
  text-align: left;
}
.button-row-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
  text-wrap: pretty;
  word-break: auto-phrase;
}
.button-row-note p {
  margin: 0;
}
.button-row-note p + p {
  margin-top: 0.4em;
}
.button-row-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
}
.button-row--left .button-row-buttons {
  justify-content: flex-start;
}
.button-row--right {
  align-items: flex-end;
  text-align: right;
}
.button-row--right .button-row-buttons {
  justify-content: flex-end;
}

/*
 * 何個ずつ並べるかを選んだとき（data-cols="1"〜"4"）：その数の列に並べる。
 * 列の幅は、その列でいちばん長いボタンにそろう。そろえ方（中央・左・右）は、列のかたまりの位置。
 * スマホでは、1個ずつ縦に並べる。
 */
.button-row-buttons[data-cols] {
  display: grid;
  justify-content: center;
}
.button-row--left .button-row-buttons[data-cols] {
  justify-content: start;
}
.button-row--right .button-row-buttons[data-cols] {
  justify-content: end;
}
.button-row-buttons[data-cols="1"] { grid-template-columns: repeat(1, max-content); }
.button-row-buttons[data-cols="2"] { grid-template-columns: repeat(2, max-content); }
.button-row-buttons[data-cols="3"] { grid-template-columns: repeat(3, max-content); }
.button-row-buttons[data-cols="4"] { grid-template-columns: repeat(4, max-content); }
@media (max-width: 640px) {
  .button-row-buttons[data-cols="1"],
  .button-row-buttons[data-cols="2"],
  .button-row-buttons[data-cols="3"],
  .button-row-buttons[data-cols="4"] {
    grid-template-columns: minmax(0, max-content);
  }
}

/*
 * 枠線だけのボタン（btn-outline）は、テーマの標準では「濃い帯の上の白い枠」として作られていて、
 * ふつうの（明るい）背景の上では、白い文字・白い枠で見えなかった（2026-10-22 ユーザーの指摘：2つ目のボタンが見えない）。
 * ボタンの並びは明るい背景に置くことが多いので、ボタンの色（塗りの色）の枠・文字にする。ホバーで塗りつぶす。
 * 濃い面（テーマカラー・サブカラー・アクセント・夜明け）の上では、これまでどおり白い枠。
 * ありあけAI のテーマは、もともと青い枠・青い文字（同じ見え方）なので変わらない。
 */
.ariake-page .button-row .btn-outline {
  color: var(--ari-accent-fill, var(--ari-navy));
  border-color: var(--ari-accent-fill, var(--ari-navy));
}
@media (hover: hover) {
  .ariake-page .button-row .btn-outline:hover {
    background: var(--ari-accent-fill, var(--ari-navy));
    color: #ffffff;
  }
}
.ariake-section.bg-main .button-row .btn-outline,
.ariake-section.bg-sub .button-row .btn-outline,
.ariake-section.bg-accent .button-row .btn-outline,
.ariake-section.bg-dawn .button-row .btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
}
@media (hover: hover) {
  .ariake-section.bg-main .button-row .btn-outline:hover,
  .ariake-section.bg-sub .button-row .btn-outline:hover,
  .ariake-section.bg-accent .button-row .btn-outline:hover,
  .ariake-section.bg-dawn .button-row .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }
}


/* module: case-cards */

/* ============================================================================
 * case-cards/module.css — やりたいこと（事例カード）
 * 出どころ：design-html top.css の .solution（simple）と service.css の .s-case / .s-ba（detail）。
 * 色はカードごとに style の --tone / --tone-bg（parts.tsx の toneStyle）を使う。
 * ========================================================================== */

.case-cards {
  width: 100%;
}
.case-cards-grid {
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-cards--detail .case-cards-grid {
  gap: 20px;
}

/* 並べる数：3つ（TOP の Solution）・2つ（サービスの Koushitai） */
@media (min-width: 640px) {
  .case-cards--simple .case-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
  }
}
@media (min-width: 900px) {
  .case-cards--detail .case-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .case-cards--simple.case-cards--cols-3 .case-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px clamp(24px, 3.47vw, 50px);
  }
}
@media (min-width: 1200px) {
  .case-cards--detail.case-cards--cols-3 .case-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ カード */
.case-cards-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  container-type: inline-size;
}
.case-cards--detail .case-cards-item {
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--ari-line);
  border-radius: 24px;
  background: var(--ari-bg-page);
}

/* 色の面（絵の後ろ）。札と絵の位置は Figma の割合のまま */
.case-cards-visual {
  position: relative;
  aspect-ratio: 360 / 200;
  border-radius: 20px;
  background: var(--tone-bg);
}
.case-cards--detail .case-cards-visual {
  aspect-ratio: 530 / 240;
  border-radius: 10px;
}
.case-cards-pill {
  position: absolute;
  z-index: 1;
  top: 9%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ari-bg-page);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--tone-text, var(--tone));
}
.case-cards-pill--before {
  left: 6.67%;
  background: var(--ari-tone-stone);
  color: var(--ari-ink);
}
.case-cards-pill--after {
  left: 63.33%;
}
.case-cards--detail .case-cards-pill {
  top: 9.17%;
  padding: 3.6px 12px;
  font-size: 0.8125rem;
}
.case-cards--detail .case-cards-pill--before {
  left: 14.72%;
}
.case-cards--detail .case-cards-pill--after {
  left: 60.94%;
}
.case-cards-frame {
  position: absolute;
  left: 5.56%;
  top: 22%;
  width: 88.89%;
  height: 70%;
}
.case-cards--detail .case-cards-frame {
  left: 13.77%;
  top: 22.08%;
  width: 72.45%;
}
.case-cards-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------------ 文字 */
.case-cards-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case-cards-title {
  margin: 0;
  font-size: clamp(17px, 1.39vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.case-cards--detail .case-cards-title {
  font-size: 1.125rem;
  line-height: 1.4;
}
.case-cards-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink);
}

/* ------------------------------------------------- いま → 改善後 の箱 */
.case-cards-ba {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: auto;
}
.case-cards-arrow {
  width: 12px;
  height: 9px;
  margin-inline: auto;
  background: var(--ari-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5H10.5M7.2 7.8L10.5 4.5L7.2 1.2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5H10.5M7.2 7.8L10.5 4.5L7.2 1.2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(90deg);
}
.case-cards-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.case-cards-box p {
  margin: 0;
}
.case-cards-box--before {
  background: var(--ari-bg-soft);
  color: var(--ari-ink);
}
.case-cards-box--after {
  border: 1px solid var(--ari-navy);
  background: var(--ari-coral-050);
  color: var(--ari-navy);
}
.case-cards-box-label {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ari-tone-stone);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.case-cards-box--after .case-cards-box-label {
  background: var(--ari-navy);
  color: var(--ari-on-dark);
}
/* カードの幅が足りるときは、いま・矢印・改善後を横に並べる */
@container (min-width: 320px) {
  .case-cards-ba {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
    align-items: stretch;
  }
  .case-cards-arrow {
    align-self: center;
    margin: 0;
    transform: none;
  }
}

/* ------------------------------------------------------------ 注記・ボタン */
.case-cards-note {
  margin: clamp(32px, 3.9vw, 56px) 0 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
.case-cards-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}


/* module: cast-cta */

/* ============================================================================
 * cast-cta/module.css — 相談のおさそい（人物つき）
 * 出どころ：design-html top.css の .midcta / .cast。
 * 人物は Figma の絶対位置を使わず、横一列（足元をそろえる）。床の薄い青の帯は、札の高さ分だけ敷く。
 * ========================================================================== */

.cast-cta {
  width: 100%;
  text-align: center;
}
.cast-cta-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.cast-cta-text .section-title,
.cast-cta-text .section-lead {
  margin: 0;
}
.cast-cta-text .section-lead p {
  margin: 0;
}
.cast-cta-text .section-lead p + p {
  margin-top: 0.6em;
}
.cast-cta-note {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
}

/* ------------------------------------------------------------------ 人物 */
/* スマホ：4人ずつ折り返す。1人ずつ、足元に札の高さの薄い青の帯 */
.cast-cta-cast {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 560px;
  margin: clamp(32px, 3.2vw, 46px) auto 0;
  padding: 0;
  list-style: none;
}
.cast-cta-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 25%;
  padding: 0 6px 12px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, transparent calc(100% - 44px), var(--ari-blue) 0);
}
.cast-cta-figure {
  display: block;
  width: 100%;
}
.cast-cta-img {
  display: block;
  width: 100%;
  height: auto;
}
.cast-cta-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ari-bg-page);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--ari-ink);
}
.cast-cta-person--brand .cast-cta-tag {
  color: var(--ari-navy);
}

/* タブレット・PC：横一列。足元をそろえ、札の高さの帯を全体に敷く（Figma：絵の下の端から 70px） */
@media (min-width: 768px) {
  .cast-cta-cast {
    position: relative;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: clamp(6px, 0.7vw, 10px);
    max-width: none;
    padding: 0 clamp(12px, 3vw, 40px) 27px;
  }
  .cast-cta-cast::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    border-radius: 20px;
    background: var(--ari-blue);
  }
  .cast-cta-person {
    position: relative;
    flex: 0 1 150px;
    width: auto;
    min-width: 0;
    gap: 18px;
    padding: 0;
    background: none;
  }
}


/* module: company-intro */

/* ============================================================================
 * company-intro/module.css — 会社の紹介
 * 出どころ：design-html top.css の .company__grid / .collage / .company__*。
 * コラージュの切り抜きの数字（left/top/width/height）は持たない。絵は枠いっぱい（cover）。
 * ========================================================================== */

.company-intro {
  display: grid;
  gap: 32px;
  width: 100%;
}

/* ------------------------------------------------------------- コラージュ */
.company-intro-collage {
  display: grid;
  grid-template-columns: minmax(0, 400fr) minmax(0, 270fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.company-intro-tile {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.company-intro-tile-main {
  grid-row: span 2;
  min-height: 200px;
  background: var(--ari-coral-050);
}
/* 左の枠の下の、少し濃い青の床（Figma の .collage__card--area::before） */
.company-intro-tile-main::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 17.33%;
  background: var(--ari-blue);
}
.company-intro-tile-top {
  aspect-ratio: 270 / 140;
  background: var(--ari-tone-amber-050);
}
.company-intro-tile-bottom {
  aspect-ratio: 270 / 144;
  background: var(--ari-tone-green-050);
}
.company-intro-tile-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.company-intro-tile-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* ------------------------------------------------------------------ 文字 */
.company-intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
.company-intro-lead {
  margin: 0;
}
.company-intro-lead p {
  margin: 0;
}
.company-intro-lead p + p {
  margin-top: 0.6em;
}
.company-intro-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 18px;
  border-radius: 16px;
  background: var(--ari-bg-soft);
}
.company-intro-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.company-intro-stat b {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.company-intro-stat span {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
.company-intro-sep {
  flex: none;
  width: 1px;
  height: 40px;
  background: var(--ari-line);
}
.company-intro-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 117px;
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
.company-intro-badge-img {
  display: block;
  width: 87px;
  height: 50px;
  object-fit: contain;
}
@media (max-width: 479px) {
  .company-intro-sep {
    display: none;
  }
  .company-intro-stats {
    justify-content: space-between;
    width: 100%;
  }
  .company-intro-badge {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--ari-line);
    text-align: left;
  }
}
@media (min-width: 1100px) {
  .company-intro {
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 74px;
    align-items: start;
  }
  .company-intro-text {
    padding-top: 10px;
  }
  .company-intro-stats {
    flex-wrap: nowrap;
  }
  .company-intro-stat {
    flex: none;
  }
  .company-intro-badge span {
    font-size: 0.75rem;
    white-space: nowrap;
  }
}


/* module: check-list */

/* ============================================================================
 * check-list/module.css — チェックリスト（見出し左）
 * 出どころ：design-html service.css の .s-spot（見出しは common.css の .section-head--left）。
 * ========================================================================== */

.check-list {
  display: grid;
  gap: 32px;
  width: 100%;
}
@media (min-width: 1024px) {
  .check-list {
    grid-template-columns: minmax(0, 500fr) minmax(0, 616fr);
    gap: clamp(40px, 4.44vw, 64px);
    align-items: start;
  }
  /* 見出しの改行位置を Figma どおりにする（文節ではなく幅で折り返す） */
  .check-list-head .section-title {
    word-break: normal;
    text-wrap: wrap;
  }
}

/* ------------------------------------------------------------ 左：見出し */
.check-list-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  text-align: left;
}
.check-list-head .section-label,
.check-list-head .section-title,
.check-list-head .section-lead {
  margin: 0;
}
.check-list-head .section-lead p {
  margin: 0;
}
.check-list-head .section-lead p + p {
  margin-top: 0.6em;
}
.check-list-head .btn {
  margin-top: 14px;
}

/* -------------------------------------------------------- 右：白いカード */
.check-list-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 24px;
  border-radius: 24px;
  background: var(--ari-bg-page);
}
@media (min-width: 768px) {
  .check-list-card {
    padding: 32px 36px;
  }
}
.check-list-items {
  display: grid;
  gap: 20px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .check-list-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.check-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* 薄い青の丸に、青い矢印 */
.check-list-icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ari-blue);
}
.check-list-icon::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 11.5px;
  width: 12px;
  height: 9px;
  background: var(--ari-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5H10.5M7.2 7.8L10.5 4.5L7.2 1.2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5H10.5M7.2 7.8L10.5 4.5L7.2 1.2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check-list-words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.check-list-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.check-list-sub {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ari-ink);
}
.check-list-rule {
  height: 1px;
  background: var(--ari-line);
}
.check-list-note p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.check-list-note p + p {
  margin-top: 0.6em;
}

/* ============================================================================
 * 記事の本文（.blog-embed）の中では、画面の幅にかかわらず、縦に積む並びにそろえる（2026-10-22）。
 * 記事の本文はページよりずっと狭い（約760px）のに、「横に並べる」指定はブラウザの画面の幅で決まるため、
 * 広い画面で、文章の列が潰れたり、プレビューと公開した記事で見え方が違ったりした。
 * ========================================================================== */
.blog-embed .check-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}


/* module: app-cards */

/* ============================================================================
 * app-cards/module.css — アプリの紹介カード
 * デザイン：TOP「BUSINESS APPS」（top.css の .apps__grid / .app-card / .ui）。
 * アプリの色は style の --tone（濃い色）と --tone-bg（うすい色）から（products.ts）。
 * 幅：狭い画面は1列（最大640px・中央）、520px から右に絵、1180px から2列。
 * ========================================================================== */

.app-cards {
  width: 100%;
}
.app-cards-grid {
  display: grid;
  gap: 24px;
  max-width: 640px;
  margin: 0 auto;
}
.app-cards-item {
  display: grid;
  gap: 20px;
  padding: 28px 24px;
  border: 1.5px solid var(--ari-line);
  border-radius: 24px;
  background: var(--ari-bg-page);
}
.app-cards-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  color: var(--ari-ink);
}
.app-cards-name {
  display: flex;
  align-items: center;
  gap: 9.2px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--tone-text, var(--tone));
}
.app-cards-symbol {
  flex: none;
  width: 39.784px;
  height: 27.6px;
  object-fit: contain;
}
.app-cards-tagline {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.app-cards-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.app-cards-point {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--tone-text, var(--tone));
}
.app-cards-point b {
  font-family: var(--font-accent);
  font-weight: 600;
  line-height: 1.3;
}
.app-cards-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ari-tone-stone);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
}
.app-cards-status--live {
  background: var(--tone-text, var(--tone));
  color: var(--ari-on-dark);
}
.app-cards-note {
  margin: 36px 0 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
}
.app-cards-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
@media (min-width: 520px) {
  .app-cards-item {
    grid-template-columns: minmax(0, 1fr) 233px;
    align-items: start;
    padding: 30px;
  }
}
@media (min-width: 1180px) {
  .app-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    max-width: none;
  }
  .app-cards-item {
    min-height: 260px;
    padding: 30.5px 33.5px 30.5px 30.5px;
  }
}

/* ---------------------------------------------- 右側の小さな画面の絵（233×196px） */
.app-cards-ui {
  position: relative;
  width: 233px;
  height: 196px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--tone-bg);
  justify-self: center;
}
.app-cards-ui > *,
.app-cards-ui-row > *,
.app-cards-ui-doc > *,
.app-cards-ui-step > *,
.app-cards-ui-browser > * {
  position: absolute;
}
.app-cards-ui-t {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
  white-space: nowrap;
}
.app-cards-ui-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ari-bg-page);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Works：3行（人・作業名・進み具合のバー・状態） */
.app-cards-ui-row {
  left: 0;
  right: 0;
  height: 54px;
}
.app-cards-ui-row--1 {
  top: 22px;
}
.app-cards-ui-row--2 {
  top: 76px;
}
.app-cards-ui-row--3 {
  top: 130px;
}
.app-cards-ui-avatar {
  left: 16px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(244, 205, 174, 1);
}
.app-cards-ui-row .app-cards-ui-t {
  left: 46px;
  top: 0;
}
.app-cards-ui-track,
.app-cards-ui-fill {
  left: 46px;
  top: 18px;
  height: 6px;
  border-radius: 3px;
}
.app-cards-ui-track {
  width: 110px;
  background: var(--ari-bg-page);
}
.app-cards-ui-fill {
  background: var(--tone);
}
.app-cards-ui-row--1 .app-cards-ui-fill {
  width: 88px;
}
.app-cards-ui-row--2 .app-cards-ui-fill {
  width: 55px;
}
.app-cards-ui-row--3 .app-cards-ui-fill {
  width: 110px;
}
.app-cards-ui-row .app-cards-ui-pill {
  left: 166px;
  top: 4px;
  color: var(--tone);
}

/* Chat：吹き出し2つとチャンネルの札 */
.app-cards-ui-msg {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.6875rem;
  line-height: 1.5;
  white-space: nowrap;
}
.app-cards-ui-msg--in {
  left: 16px;
  top: 20px;
  background: var(--ari-bg-page);
  color: var(--ari-ink-2);
}
.app-cards-ui-msg--out {
  left: 92px;
  top: 86px;
  background: var(--tone);
  color: var(--ari-on-dark);
}
.app-cards-ui--chat .app-cards-ui-pill {
  top: 154px;
  color: var(--tone);
}
.app-cards-ui-pill--1 {
  left: 16px;
}
.app-cards-ui-pill--2 {
  left: 84px;
}

/* Note：手順書の紙 */
.app-cards-ui-doc,
.app-cards-ui-browser {
  border-radius: 10px;
  background: var(--ari-bg-page);
}
.app-cards-ui-doc {
  left: 22px;
  top: 16px;
  width: 190px;
  height: 160px;
}
.app-cards-ui-doc .app-cards-ui-t {
  left: 14px;
  top: 14px;
  line-height: 1.3;
}
.app-cards-ui-step {
  left: 0;
  right: 0;
  height: 20px;
}
.app-cards-ui-step--1 {
  top: 44px;
}
.app-cards-ui-step--2 {
  top: 78px;
}
.app-cards-ui-step--3 {
  top: 112px;
}
.app-cards-ui-no {
  left: 14px;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 25%, transparent);
  color: var(--tone);
  font-family: var(--font-accent);
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}
.app-cards-ui-bar {
  left: 36px;
  height: 6px;
  border-radius: 3px;
  background: var(--ari-tone-stone);
}
.app-cards-ui-bar--long {
  top: 2px;
  width: 130px;
}
.app-cards-ui-bar--short {
  top: 14px;
  width: 90px;
}

/* Site：ブラウザの画面 */
.app-cards-ui-browser {
  left: 16px;
  top: 16px;
  width: 200px;
  height: 160px;
  overflow: hidden;
}
.app-cards-ui-chrome {
  left: 0;
  top: 0;
  width: 200px;
  height: 20px;
  background: var(--ari-tone-stone);
}
.app-cards-ui-dot {
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ari-bg-page);
}
.app-cards-ui-dot--1 {
  left: 8px;
}
.app-cards-ui-dot--2 {
  left: 18px;
}
.app-cards-ui-dot--3 {
  left: 28px;
}
.app-cards-ui-hero {
  left: 12px;
  top: 30px;
  width: 176px;
  height: 56px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tone) 25%, transparent);
}
.app-cards-ui-line {
  left: 12px;
  height: 8px;
  border-radius: 4px;
  background: var(--ari-tone-stone);
}
.app-cards-ui-line--1 {
  top: 98px;
  width: 90px;
}
.app-cards-ui-line--2 {
  top: 114px;
  width: 130px;
}
.app-cards-ui-browser .app-cards-ui-pill {
  left: 120px;
  top: 130px;
  background: var(--tone);
  color: var(--ari-on-dark);
}


/* module: price-panel */

/* ============================================================================
 * price-panel/module.css — 料金のパネル
 * デザイン：TOP「PRICE」（top.css の .price__*）＝ checks、
 *           サービス「費用について」（service.css の .s-price__*）＝ rows。
 * 横並びになる幅：checks は 1000px、rows は 900px。
 * 左の絵は 1320px から、パネル（868px）の左外に置く（デザインどおり、パネルより下まで出る）。
 * ========================================================================== */

.price-panel {
  width: 100%;
}
.price-panel-layout {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.price-panel-illust {
  width: 180px;
  aspect-ratio: 225 / 174;
}
.price-panel-illust img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.price-panel-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  max-width: 868px;
  padding: 32px 24px;
  border-radius: 28px;
  background: var(--ari-bg-page);
  box-shadow: 0 6px 20px rgba(26, 51, 38, 0.08);
}
.price-panel--rows .price-panel-box {
  max-width: 960px;
  border: 1px solid var(--ari-line);
  border-radius: 24px;
}
.price-panel-main {
  min-width: 0;
}
.price-panel-plan {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.price-panel-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.price-panel--rows .price-panel-amount {
  gap: 6px;
}
.price-panel-amount small,
.price-panel-amount span {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.price-panel--checks .price-panel-amount span {
  font-size: 1.25rem;
  line-height: 1.5;
}
.price-panel-amount strong {
  font-family: var(--font-accent);
  font-size: clamp(52px, 5vw, 72px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.price-panel-fee {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.price-panel-rule {
  align-self: stretch;
  height: 1px;
  background: var(--ari-line);
}
.price-panel-includes {
  min-width: 0;
  width: 100%;
}
.price-panel-list-title {
  margin: 0 0 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.price-panel-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-panel-list li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.price-panel-check {
  flex: none;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--ari-coral-050);
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ari-navy);
}
.price-panel-item-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.price-panel-item-sub {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
}
.price-panel-rows {
  display: grid;
  gap: 18px;
  margin: 0;
}
.price-panel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.price-panel-row dt {
  width: 120px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
}
.price-panel-row dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.price-panel-note {
  margin: 24px 0 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
}
.price-panel-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 3.33vw, 48px);
}
.price-panel-note + .price-panel-more {
  margin-top: 17px;
}

/* 表（rows）：900px から横並び */
@media (min-width: 900px) {
  .price-panel--rows .price-panel-box {
    flex-direction: row;
    align-items: center;
    gap: clamp(32px, 3.9vw, 56px);
    padding: clamp(32px, 3.33vw, 48px) clamp(32px, 3.9vw, 56px);
  }
  .price-panel--rows .price-panel-main {
    flex: none;
  }
  .price-panel--rows .price-panel-amount {
    flex-wrap: nowrap;
  }
  .price-panel--rows .price-panel-rule {
    align-self: auto;
    width: 1px;
    height: 160px;
    flex: none;
  }
  .price-panel--rows .price-panel-includes {
    flex: 1;
  }
  .price-panel-row dd {
    white-space: nowrap;
  }
}

/* チェック付き（checks）：1000px から横並び。金額と項目は折り返さない */
@media (min-width: 1000px) {
  .price-panel--checks .price-panel-box {
    flex-direction: row;
    align-items: center;
    gap: clamp(32px, 3.9vw, 56px);
    padding: 48px clamp(32px, 4.45vw, 64px);
  }
  .price-panel--checks .price-panel-main,
  .price-panel--checks .price-panel-includes {
    flex: none;
    width: auto;
  }
  .price-panel--checks .price-panel-amount,
  .price-panel-item-title,
  .price-panel-item-sub {
    white-space: nowrap;
  }
  .price-panel--checks .price-panel-rule {
    align-self: auto;
    width: 1px;
    height: 170px;
    flex: none;
  }
}

/* 左の絵：1320px から、パネルの左外へ */
@media (min-width: 1320px) {
  .price-panel-layout--illust {
    grid-template-columns: minmax(0, 1fr) 868px minmax(0, 1fr);
    gap: 0;
    justify-items: stretch;
  }
  .price-panel--rows .price-panel-layout--illust {
    grid-template-columns: minmax(0, 1fr) 960px minmax(0, 1fr);
  }
  .price-panel-layout--illust .price-panel-illust {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: 225px;
    margin: 190px 8px -174px 0;
  }
  .price-panel-layout--illust .price-panel-box {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
}


/* module: feature-block */

/* ============================================================================
 * feature-block/module.css — サービスの紹介ブロック
 * デザイン：サービス「3つの支援」（service.css の .s-block / .s-visual / .s-apps / .s-screen）。
 * 白い枠なので、薄いグレーの面（背景 soft）の上に置く想定。
 * 1024px から左右に並べる。それより狭い画面では文章 → 画像の順に縦に積む。
 * ========================================================================== */

.feature-block {
  width: 100%;
}
.feature-block-card {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 32px 24px;
  border-radius: 24px;
  background: var(--ari-bg-page);
}
.feature-block + .feature-block {
  margin-top: clamp(24px, 3.33vw, 48px);
}
.feature-block-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.6;
}
.feature-block-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.feature-block-title {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.feature-block-body p {
  margin: 0;
}
.feature-block-body p + p {
  margin-top: 16px;
}
.feature-block-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.feature-block-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ari-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy-text, var(--ari-navy));
  white-space: nowrap;
}
.feature-block-badge--neutral {
  background: var(--ari-bg-soft);
  color: var(--ari-ink-2);
}
.feature-block-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.feature-block-price small {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
}
.feature-block-price strong {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.feature-block-more {
  display: flex;
}

/* アプリの一覧 */
.feature-block-apps {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-block-app {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tone-bg);
}
.feature-block-app-name {
  display: flex;
  align-items: center;
  gap: 9.2px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--tone-text, var(--tone));
}
.feature-block-app-symbol {
  flex: none;
  width: 39.784px;
  height: 27.6px;
  object-fit: contain;
}
.feature-block-app-tagline {
  grid-column: 1;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.feature-block-app-status {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  min-width: 106px;
  min-height: 44px;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--ari-bg-page);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--tone-text, var(--tone));
}

/* 360px 未満（320px など）は、名前（最小で約 174px）の右に状態の箱（最小 106px）を置く幅が足りず、
   1fr（最小は中身の幅）のまま縮まずに横へ 36px はみ出す（QA public-ui B-03。WCAG 1.4.10）。
   1 列にして、状態は名前の下に回す。360px 以上は、これまでどおり名前の右 */
@media (max-width: 359px) {
  .feature-block-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-block-app-name,
  .feature-block-app-tagline {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .feature-block-app-status {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    min-width: 0;
  }
}

/* 絵：色の付いた枠（480:320）の中に、左右に余白をとって収める */
.feature-block-visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 480 / 320;
  overflow: hidden;
  border-radius: 20px;
  background: var(--tone-bg);
  justify-self: center;
}
.feature-block-visual .feature-block-img,
.feature-block-visual .feature-block-img-empty {
  position: absolute;
  left: 6.25%;
  top: 0;
  width: 87.5%;
  height: 100%;
  object-fit: contain;
}

/* 画面の画像：うすい青の枠＋影つきの画像＋下に説明 */
.feature-block-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px;
  border-radius: 20px;
  background: var(--ari-coral-050);
}
.feature-block-screen .feature-block-img,
.feature-block-screen .feature-block-img-empty {
  width: 100%;
  max-width: 500px;
  height: auto;
  aspect-ratio: 500 / 313;
  border: 1px solid var(--ari-line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(26, 51, 38, 0.08);
  object-fit: cover;
}
.feature-block-screen figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* 画像が未選択（編集中だけ） */
.feature-block-img-empty {
  display: grid;
  place-items: center;
  border: 1px dashed var(--ari-ink-2);
  background: var(--ari-bg-page);
  font-size: 0.8125rem;
  color: var(--ari-ink-2);
}

@media (min-width: 640px) {
  .feature-block-app {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    min-height: 54px;
    padding-block: 5px;
  }
  .feature-block-app-tagline {
    grid-column: auto;
    white-space: nowrap;
  }
  .feature-block-app-status {
    grid-column: auto;
    grid-row: auto;
  }
}
@media (min-width: 768px) {
  .feature-block-card {
    padding: clamp(32px, 3.33vw, 48px) clamp(32px, 3.9vw, 56px);
  }
  .feature-block-screen {
    padding: 24px;
  }
}
@media (min-width: 1024px) {
  .feature-block-card {
    grid-template-columns: minmax(0, 532fr) minmax(0, 480fr);
    gap: clamp(32px, 3.9vw, 56px);
  }
  .feature-block--reverse .feature-block-card {
    grid-template-columns: minmax(0, 480fr) minmax(0, 532fr);
  }
  .feature-block--screen .feature-block-card {
    grid-template-columns: minmax(0, 472fr) minmax(0, 548fr);
    gap: clamp(32px, 3.33vw, 48px);
  }
  .feature-block--screen.feature-block--reverse .feature-block-card {
    grid-template-columns: minmax(0, 548fr) minmax(0, 472fr);
  }
  .feature-block--reverse .feature-block-visual,
  .feature-block--reverse .feature-block-screen {
    order: -1;
  }
}


/* module: index-cards */

/* ============================================================================
 * index-cards/module.css — 目次カード
 * デザイン：サービス「3つの支援」の上の3枚（service.css の .s-supports__index / .s-index）。
 * 白いカードなので、薄いグレーの面（背景 soft）の上に置く想定。
 * 640px から横に並べる（列の数はカードの枚数）。
 * ========================================================================== */

.index-cards {
  display: grid;
  gap: 16px;
  width: 100%;
  margin: 0 0 clamp(24px, 3.33vw, 48px);
  padding: 0;
  list-style: none;
}
.index-cards-item {
  display: flex;
  min-width: 0;
}
.index-cards-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 28px;
  border-radius: 20px;
  background: var(--ari-bg-page);
  text-align: center;
  color: inherit;
  text-decoration: none;
}
.index-cards-link {
  transition: box-shadow 0.2s;
}
@media (hover: hover) {
  .index-cards-link:hover {
    box-shadow: 0 6px 20px rgba(26, 51, 38, 0.08);
  }
}
.index-cards-no {
  font-family: var(--font-accent);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.index-cards-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.index-cards-sub {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
}
@media (min-width: 640px) {
  .index-cards {
    gap: clamp(12px, 1.67vw, 24px);
  }
  .index-cards--n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .index-cards--n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .index-cards--n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .index-cards--n4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .index-cards-link {
    transition: none;
  }
}


/* module: media-text */

/* ============================================================================
 * media-text/module.css — 文章と写真
 * 出どころ：design-html top.css の .about__*・.bubble、about.css の .a-area__*・.photo
 * 文字の大きさ・色・ボタンの形はテーマが持つ。ここは並びと、写真の枠・吹き出しの形だけ。
 * ========================================================================== */

.media-text {
  display: grid;
  gap: 40px;
  width: 100%;
}
/* 同じ列で後ろに部品が続く（トップの「手順」など）ときの間 */
.media-text:not(:last-child) {
  margin-bottom: 56px;
}

/* ---- 文章 ---- */
.media-text-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.media-text-text > * {
  margin: 0;
}
.media-text-text > * + * {
  margin-top: 22px;
}
.media-text-text > .section-label + * {
  margin-top: 4px;
}
.media-text .section-title {
  margin: 0;
}
/* 見出しの大きさ（テーマの見出しの大きさに、倍率を掛ける。選ばないときは、テーマのまま） */
.media-text .section-title.media-text-title--sm {
  font-size: calc(var(--font-size-heading) * 0.8);
}
.media-text .section-title.media-text-title--lg {
  font-size: calc(var(--font-size-heading) * 1.25);
}
.media-text .section-title.media-text-title--xl {
  font-size: calc(var(--font-size-heading) * 1.5);
}
.media-text .media-text-lead {
  max-width: none;
}
.media-text .media-text-lead p {
  margin: 0;
}
.media-text .media-text-lead p + p {
  margin-top: 0.6em;
}
.media-text-quote {
  padding: 14px 24px;
  border: 1px solid var(--ari-line);
  border-radius: 22px;
  background: var(--ari-bg-page);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.media-text-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
.media-text-text > .media-text-button {
  margin-top: 26px;
}

/* ---- 写真：白いカードに1枚（トップの ABOUT） ---- */
.media-text-cardwrap {
  position: relative;
  width: 100%;
  max-width: 513px;
}
.media-text-card {
  position: relative;
  aspect-ratio: 513 / 303;
  border-radius: 24px;
  background: var(--ari-bg-page);
}
.media-text-card-img {
  position: absolute;
  left: 6.24%;
  top: 15.84%;
  width: 84.6%;
  height: 59.7%;
  max-width: none;
  object-fit: cover;
}
.media-text-cardwrap .media-text-image-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
/* 吹き出し：カードの下端に重ねる（カードの高さの約1割ぶん上へ。高さは幅の 303/513） */
.media-text-bubble {
  position: relative;
  width: fit-content;
  max-width: 94%;
  margin: -5.7% 0 0 3.3%;
  padding: 13px 22px;
  border-radius: 22px;
  background: var(--ari-blue);
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.media-text-bubble::before {
  content: "";
  position: absolute;
  left: min(130px, 45%);
  top: -18px;
  width: 32px;
  height: 20px;
  background: var(--ari-blue);
  clip-path: polygon(0 100%, 81.25% 100%, 100% 0);
}

/* ---- 写真：大きな1枚と小さな2枚（会社紹介の AREA） ---- */
.media-text-grid {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.media-text-tile {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ari-bg-page);
}
.media-text-tile--main {
  aspect-ratio: 560 / 300;
}
.media-text-tile--sub {
  aspect-ratio: 272 / 200;
  background: var(--tone-bg);
}
.media-text-tile-img {
  position: absolute;
  inset: 7.5% 8%;
  width: 84%;
  height: 85%;
  max-width: none;
  object-fit: contain;
}
.media-text-tile--sub .media-text-tile-img {
  inset: 19% 4%;
  width: 92%;
  height: 62%;
}
.media-text-tile .media-text-image-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.media-text-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 768px) {
  .media-text:not(:last-child) {
    margin-bottom: clamp(72px, 8.75vw, 126px);
  }
}

@media (min-width: 1024px) {
  .media-text--photo-card {
    grid-template-columns: minmax(0, 540px) minmax(0, 513px);
    justify-content: space-between;
    align-items: start;
  }
  .media-text--photo-card.media-text--reverse {
    grid-template-columns: minmax(0, 513px) minmax(0, 540px);
  }
  .media-text--photo-card .media-text-cardwrap {
    margin-top: 56px;
  }
  .media-text--photo-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: clamp(40px, 4.44vw, 64px);
    align-items: center;
  }
  .media-text--photo-grid.media-text--reverse {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  }
  .media-text--reverse .media-text-visual {
    order: -1;
  }
}

/* ============================================================================
 * 記事の本文（.blog-embed）の中では、画面の幅にかかわらず、縦に積む並びにそろえる（2026-10-22）。
 * 記事の本文はページよりずっと狭い（約760px）のに、「横に並べる」指定はブラウザの画面の幅で決まるため、
 * 広い画面で、文章の列が潰れたり、プレビューと公開した記事で見え方が違ったりした。
 * ========================================================================== */
.blog-embed .media-text--photo-card,
.blog-embed .media-text--photo-card.media-text--reverse,
.blog-embed .media-text--photo-grid,
.blog-embed .media-text--photo-grid.media-text--reverse {
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.blog-embed .media-text--reverse .media-text-visual {
  order: 0;
}
.blog-embed .media-text--photo-card .media-text-cardwrap {
  margin-top: 0;
}


/* module: steps */

/* ============================================================================
 * steps/module.css — 手順（番号つき）
 * 出どころ：design-html top.css の .steps・.step
 * つなぎの線は、各段階から次の段階の丸までを、段階ごとに描く（数が変わっても線の端がそろう）。
 * 丸の白い縁は、線を丸の手前で切って見せるためのもの。
 * ========================================================================== */

.steps {
  position: relative;
  display: grid;
  gap: 28px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}
/* つなぎの線（スマホ：下の丸へ縦に） */
.steps-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  width: 2px;
  height: calc(100% + 28px);
  background: var(--ari-blue);
}
.steps-no {
  position: relative;
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border: 5px solid var(--ari-bg-page);
  border-radius: 50%;
  background: var(--tone-bg);
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--tone-text, var(--tone));
}
.steps-name {
  align-self: end;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.steps-desc {
  align-self: start;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
.steps-item--nodesc .steps-no {
  grid-row: auto;
}
.steps-item--nodesc .steps-name {
  align-self: center;
}

@media (min-width: 768px) {
  .steps {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
  }
  .steps-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-inline: 4px;
    text-align: center;
  }
  /* つなぎの線（横：この丸の中心から、次の丸の中心まで） */
  .steps-item:not(:last-child)::after {
    left: 50%;
    top: 35px;
    width: 100%;
    height: 2px;
  }
  .steps-no {
    width: 72px;
    height: 72px;
    border-width: 6px;
    font-size: 1.25rem;
  }
  .steps-name,
  .steps-desc,
  .steps-item--nodesc .steps-name {
    align-self: auto;
  }
  .steps-desc {
    font-size: clamp(12px, 0.97vw, 14px);
  }
}


/* module: split-text */

/* ============================================================================
 * split-text/module.css — 見出しと文章（左右）
 * 出どころ：design-html about.css の .a-stance__intro / .a-stance__head / .a-stance__body /
 * .a-stance__key と .a-name__card / .a-name__row / .a-name__head / .a-name__key / .a-name__body
 * ========================================================================== */

.split-text {
  width: 100%;
}
/* 同じ列で後ろに部品が続く（OUR STANCE の下のカードなど）ときの間 */
.split-text:not(:last-child) {
  margin-bottom: clamp(40px, 4.44vw, 64px);
}

/* ---- 上の横長の絵 ---- */
.split-text-banner {
  position: relative;
  aspect-ratio: 1180 / 440;
  overflow: hidden;
  margin-bottom: clamp(32px, 3.9vw, 56px);
  border-radius: 20px;
  background: var(--ari-coral-050);
}
.split-text-banner-img {
  position: absolute;
  left: 11.95%;
  top: 7.5%;
  width: 76.1%;
  height: 85%;
  max-width: none;
  object-fit: contain;
}

/* ---- 見出し｜文章 ---- */
.split-text-row {
  display: grid;
  gap: 32px;
}
.split-text-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.split-text-head > * {
  margin: 0;
}
.split-text .section-title {
  margin: 0;
}
.split-text-head > .section-title + .split-text-key {
  margin-top: 18px;
}
.split-text-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.split-text-body > * {
  margin: 0;
}
.split-text-paras {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
  text-wrap: pretty;
}
.split-text-paras p {
  margin: 0;
}
.split-text-key {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}

@media (min-width: 1024px) {
  .split-text-row {
    grid-template-columns: fit-content(480px) minmax(0, 1fr);
    column-gap: clamp(40px, 5.56vw, 80px);
  }
  .split-text-paras {
    padding-top: 2px;
  }
}


/* module: point-cards */

/* ============================================================================
 * point-cards/module.css — 番号つきカード
 * 出どころ：design-html about.css の .a-flow / .a-flow__arrow / .stance*
 * カードは白。薄いグレーの背景（soft）の上に置く想定。
 * ========================================================================== */

.point-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.point-cards-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px 24px 32px;
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
}
.point-cards-card > * {
  margin: 0;
}
.point-cards-illust {
  position: relative;
  aspect-ratio: 297 / 180;
  overflow: hidden;
  border-radius: 16px;
  background: var(--tone-bg);
}
.point-cards-illust-img {
  position: absolute;
  left: 11.77%;
  top: 2%;
  width: 76.46%;
  height: 96%;
  max-width: none;
  object-fit: contain;
}
.point-cards-illust > [data-ariake-empty] {
  position: absolute;
  inset: 0;
  margin: auto !important;
  height: fit-content;
}
.point-cards-head > * {
  margin: 0;
}
.point-cards-no {
  font-family: var(--font-accent);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.point-cards-no + .point-cards-title,
.point-cards-no + [data-ariake-empty] {
  margin-top: 10px;
}
.point-cards-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.point-cards-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
}
.point-cards-text p {
  margin: 0;
}
.point-cards-text p + p {
  margin-top: 0.6em;
}
.point-cards-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.point-cards-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ari-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy-text, var(--ari-navy));
  white-space: nowrap;
}
.point-cards-arrow {
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-inline: auto;
  border: 1px solid var(--ari-line);
  border-radius: 50%;
  background: var(--ari-bg-page);
  color: var(--ari-navy);
  transform: rotate(90deg);
}

@media (min-width: 1024px) {
  .point-cards {
    flex-direction: row;
    align-items: stretch;
  }
  .point-cards-card {
    flex: 1 1 0;
  }
  .point-cards-arrow {
    align-self: center;
    margin: 0;
    transform: none;
  }
}

/* ============================================================================
 * 記事の本文（.blog-embed）の中では、画面の幅にかかわらず、縦に積む並びにそろえる（2026-10-22）。
 * 記事の本文はページよりずっと狭い（約760px）のに、「横に並べる」指定はブラウザの画面の幅で決まるため、
 * 広い画面で、文章の列が潰れたり、プレビューと公開した記事で見え方が違ったりした。
 * ========================================================================== */
.blog-embed .point-cards {
  flex-direction: column;
  align-items: stretch;
}
.blog-embed .point-cards-card {
  flex: none;
}
.blog-embed .point-cards-arrow {
  align-self: auto;
  margin-inline: auto;
  transform: rotate(90deg);
}


/* module: statement */

/* ============================================================================
 * statement/module.css — 想い・メッセージ
 * 出どころ：design-html about.css の .a-phil*
 * ========================================================================== */

.statement {
  width: 100%;
  text-align: center;
}
.statement-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.statement-head > * {
  margin: 0;
}
/* 英字の小見出しの下はテーマの余白（18px）。ほかの行の間も 18px にそろえる */
.statement-head > :not(.section-label) + * {
  margin-top: 18px;
}
.statement-sub {
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.statement .statement-title {
  margin: 0;
  font-size: clamp(28px, 3.61vw, 52px);
  line-height: 1.35;
}
.statement-en {
  font-family: var(--font-accent);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.statement-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(32px, 3.9vw, 56px);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
  text-wrap: pretty;
}
.statement-body p {
  margin: 0;
}
.statement-body strong {
  font-weight: 700;
  color: var(--ari-navy);
}

@media (max-width: 767px) {
  .statement-br {
    display: none;
  }
}

/* ---- 下のカード ---- */
.statement-card {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: clamp(32px, 3.9vw, 56px);
  padding: 32px 24px;
  border-radius: var(--radius-card);
  background: var(--ari-coral-050);
  text-align: left;
}
.statement-card-img {
  justify-self: center;
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 520 / 173;
  object-fit: contain;
}
.statement-card-text > * {
  margin: 0;
}
.statement-card-title {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.statement-card-title + .statement-card-body {
  margin-top: 16px;
}
.statement-card-body {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
}
.statement-card-body p {
  margin: 0;
}
.statement-card-body p + p {
  margin-top: 0.6em;
}

@media (min-width: 900px) {
  .statement-card {
    gap: clamp(32px, 3.9vw, 56px);
    padding: clamp(32px, 3.33vw, 48px) clamp(32px, 3.9vw, 56px);
  }
  .statement-card--image {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  }
}

/* ============================================================================
 * 記事の本文（.blog-embed）の中では、画面の幅にかかわらず、縦に積む並びにそろえる（2026-10-22）。
 * 記事の本文はページよりずっと狭い（約760px）のに、「横に並べる」指定はブラウザの画面の幅で決まるため、
 * 広い画面で、文章の列が潰れたり、プレビューと公開した記事で見え方が違ったりした。
 * ========================================================================== */
.blog-embed .statement-card--image {
  grid-template-columns: minmax(0, 1fr);
}
.blog-embed .statement-card {
  gap: 24px;
  padding: 32px 24px;
}


/* module: link-card */

/* ============================================================================
 * link-card/module.css — リンクカード
 * 出どころ：design-html about.css の .a-company__card
 * ========================================================================== */

.link-card {
  width: 100%;
}
.link-card-card {
  display: grid;
  gap: 24px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
}
.link-card-card--soft {
  background: var(--ari-bg-soft);
}
.link-card-text > * {
  margin: 0;
}
.link-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.link-card-title + .link-card-body {
  margin-top: 12px;
}
.link-card-body {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
}
.link-card-body p {
  margin: 0;
}
.link-card-body p + p {
  margin-top: 0.6em;
}
.link-card-card > .link-card-button {
  justify-self: start;
}

@media (min-width: 900px) {
  .link-card-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(24px, 3.33vw, 48px);
    padding: clamp(28px, 2.78vw, 40px) clamp(28px, 3.33vw, 48px);
  }
}

/* ============================================================================
 * 記事の本文（.blog-embed）の中では、画面の幅にかかわらず、縦に積む並びにそろえる（2026-10-22）。
 * 記事の本文はページよりずっと狭い（約760px）のに、「横に並べる」指定はブラウザの画面の幅で決まるため、
 * 広い画面で、文章の列が潰れたり、プレビューと公開した記事で見え方が違ったりした。
 * ========================================================================== */
.blog-embed .link-card-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 28px 24px;
}


/* module: contact-form */

/* ============================================================================
 * contact-form/module.css — 問い合わせフォーム
 * 色・角の丸み・すき間・文字の大きさは、テーマの変数だけで書く（テーマを変えると追従する）。
 * テーマ「ありあけAI」での形（丸い入力欄・ブランドの色の焦点リング）は themes/ariake-ai.css が上書きする。
 *
 * 【並び方】入力欄は6つ割りの格子に、上から順に流し込む（全幅＝6・1/2＝3・1/3＝2）。
 * スマホ（767px以下）では、どの欄も全幅。
 * 【送ったあとの表示】.contact-form-done / .contact-form-error は、URL の # が指したときだけ見せる（:target）。
 * ========================================================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.contact-form-title {
  margin: 0;
}
.contact-form-lead {
  margin: 0;
  color: var(--ari-ink-2);
}
.contact-form-lead p {
  margin: 0;
}
.contact-form-lead p + p {
  margin-top: 0.6em;
}

/* ---- 送ったあとの文（ふだんは隠す） ---- */
.contact-form-done,
.contact-form-error {
  display: none;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--ari-line);
  scroll-margin-top: 96px;
}
/* 成功は緑、失敗は赤。色だけに頼らず、見出しの前に ✓ と ！ を付ける（デザインレビュー第1回 A1）。
 * 文字の色は -text（うすい色の上で 4.5:1 以上になるよう、テーマが計算して出す濃い色） */
.contact-form-done {
  background: var(--ari-tone-green-050);
  border-color: var(--ari-tone-green);
}
.contact-form-error {
  background: var(--ari-tone-red-050);
  border-color: var(--ari-tone-red);
}
.contact-form-done:target,
.contact-form-error:target,
.contact-form-done--preview {
  display: block;
}
.contact-form-done:target ~ .contact-form-form {
  display: none;
}
.contact-form-done:focus,
.contact-form-error:focus {
  outline: none;
}
.contact-form-done-title,
.contact-form-error-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-weight: 700;
}
.contact-form-done-title {
  color: var(--ari-tone-green-text);
}
.contact-form-error-title {
  color: var(--ari-tone-red-text);
}
.contact-form-done-title::before,
.contact-form-error-title::before {
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0.9em;
  line-height: 1;
}
/* 記号は飾り（読み上げは見出しの文だけ）。代替テキストを空にできないブラウザでは、記号をそのまま読む */
.contact-form-done-title::before {
  content: "✓";
  content: "✓" / "";
}
.contact-form-error-title::before {
  content: "！";
  content: "！" / "";
}
.contact-form-done-text p,
.contact-form-error-text {
  margin: 0;
  color: var(--ari-ink-2);
}
.contact-form-preview-note {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  color: var(--ari-ink-2);
}

/* ---- ロボットよけ（人には見せない。display: none だと入力しない機械もあるので、画面の外へ出す） ---- */
.contact-form-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 入力欄の格子 ---- */
.contact-form-form {
  position: relative;
}
.contact-form-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.contact-form-fieldset:disabled {
  opacity: 0.7;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px 20px;
}
.contact-form-field {
  grid-column: span 6;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 768px) {
  .contact-form-field--half {
    grid-column: span 3;
  }
  .contact-form-field--third {
    grid-column: span 2;
  }
  /* 項目名を左に置く（PC・タブレット）。項目名の幅をそろえる */
  .contact-form-field--left {
    display: grid;
    grid-template-columns: minmax(7em, 30%) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .contact-form-field--left > .contact-form-label {
    padding-top: 10px;
  }
}

.contact-form-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ari-ink);
}
.contact-form-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-button);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ari-ink-2);
  background: var(--ari-bg-soft);
  border: 1px solid var(--ari-line);
}
.contact-form-badge--required {
  color: var(--ari-on-dark);
  background: var(--ari-accent-fill);
  border-color: var(--ari-accent-fill);
}
.contact-form-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.contact-form-input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--font-size-body);
  line-height: 1.5;
  color: var(--ari-ink);
  background: var(--ari-bg-page);
  /* 入力欄の枠は、白い面の上で 3:1 以上（WCAG 1.4.11。デザインレビュー第1回 B1）。--ari-line は仕切り線用でうすすぎるので、
   * 濃い文字色を背景に混ぜた色にする（どのテーマでも 3:1 以上になる 75%。color-mix が使えない古いブラウザでは、文字色そのまま） */
  border: 1px solid var(--ari-ink-2);
  border-color: color-mix(in srgb, var(--ari-ink-2) 75%, var(--ari-bg-page));
  border-radius: var(--radius-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form-textarea {
  min-height: 9em;
  resize: vertical;
}
.contact-form-input::placeholder {
  color: var(--ari-ink-2);
  opacity: 0.6;
}
.contact-form-input:focus {
  outline: none;
  border-color: var(--ari-accent-text);
  box-shadow: 0 0 0 3px var(--ari-coral-050);
}
.contact-form-input:focus-visible {
  outline: 2px solid var(--ari-accent-text);
  outline-offset: 1px;
}

.contact-form-help {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}

/* ---- ラジオ・チェックボックス ---- */
.contact-form-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.contact-form-choice {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 24px;
  cursor: pointer;
  color: var(--ari-ink);
}
.contact-form-choice input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--ari-accent-fill);
}
.contact-form-choice > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---- 同意と送信 ---- */
.contact-form-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: var(--space-sm);
}
.contact-form-privacy {
  /* 押せる面を縦に広げる（余白は負の余白で戻すので、見た目の並びは変えない。デザインレビュー第1回 B7） */
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  font-size: var(--fs-sm);
  color: var(--ari-accent-text);
  text-decoration: underline;
}
.contact-form-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-sm);
}
.contact-form-submit {
  min-width: min(100%, 240px);
}
.contact-form-fieldset:disabled .contact-form-submit {
  cursor: not-allowed;
}

/* ---------------------------------------- 送信前の確認画面（2026-11-05。切り替えは site.js） */
/* JavaScript が動かないときは hidden のまま。hidden より display の指定が勝たないよう、はっきり書く */
.contact-form-confirm[hidden],
.contact-form-fieldset[hidden] {
  display: none;
}
.contact-form-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-form-confirm-title {
  margin: 0;
  font-size: calc(var(--font-size-body) * 1.2);
  font-weight: 700;
  color: var(--ari-ink);
  scroll-margin-top: 96px;
}
.contact-form-confirm-title:focus {
  outline: none;
}
.contact-form-confirm-lead {
  margin: 0;
  color: var(--ari-ink-2);
}
.contact-form-confirm-list {
  margin: 0;
  border-top: 1px solid var(--ari-line);
}
.contact-form-confirm-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ari-line);
}
@media (min-width: 768px) {
  .contact-form-confirm-row {
    display: grid;
    grid-template-columns: minmax(7em, 30%) minmax(0, 1fr);
    column-gap: 16px;
  }
}
.contact-form-confirm-row dt {
  font-weight: 700;
  color: var(--ari-ink);
}
.contact-form-confirm-row dd {
  margin: 0;
  color: var(--ari-ink);
  /* 複数行の欄の改行をそのまま見せる。長い英数字は枠の中で折り返す */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.contact-form-confirm-row dd.contact-form-confirm-empty {
  color: var(--ari-ink-2);
}
.contact-form-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: var(--space-sm);
}
.contact-form-confirm-actions .btn {
  min-width: min(100%, 200px);
}
.contact-form-confirm-send:disabled,
.contact-form-confirm-edit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------------------------------------- 安心の一言・送信ボタンの下の注記（2026-10-30） */
/* フォームの上の薄い青の箱。✓ つきで横に並び、狭い画面では折り返す */
.contact-form-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  background: var(--ari-coral-050);
  list-style: none;
}
.contact-form-assurance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ari-ink-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.6;
}
.contact-form-assurance::before {
  content: "✓";
  color: var(--ari-navy);
  font-weight: 700;
}
.contact-form-footnote {
  margin: var(--space-sm) 0 0;
  color: var(--ari-ink-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
}


/* module: booking */

/* ============================================================================
 * booking/module.css — 予約
 * 色・角の丸み・すき間・文字の大きさは、テーマの変数だけで書く（テーマを変えると追従する）。
 * 中の画面（メニュー・カレンダー・入力・確認・完了）は、公開サイトでは assets/booking.js が描く。編集中のプレビューは、同じ見た目の見本（押せない）。
 * ボタンは、テーマの .btn / .btn-primary をそのまま使う（ボタンの色の入力欄・ホバーの反転も効く）。
 * ========================================================================== */

.booking {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.booking-title {
  margin: 0;
}
.booking-lead,
.booking-notice {
  margin: 0;
  color: var(--ari-ink-2);
}
.booking-lead p,
.booking-notice p {
  margin: 0;
}
.booking-lead p + p,
.booking-notice p + p {
  margin-top: 0.6em;
}
.booking-notice {
  padding: 12px 16px;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  background: var(--ari-bg-soft);
  font-size: var(--fs-sm);
}
.booking-loading,
.booking-noscript,
.booking-unavailable {
  margin: 0;
  color: var(--ari-ink-2);
}
.booking-preview-note {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  color: var(--ari-ink-2);
}

.booking-app,
.booking-sample {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ---- 手順の表示 ---- */
.booking-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}
.booking-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.booking-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  border: 1px solid var(--ari-line);
  background: var(--ari-bg-page);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.booking-step.is-current {
  color: var(--ari-ink);
  font-weight: 700;
}
.booking-step.is-current .booking-step-no {
  color: var(--ari-on-dark);
  background: var(--ari-accent-fill);
  border-color: var(--ari-accent-fill);
}
.booking-step.is-done .booking-step-no {
  background: var(--ari-bg-soft);
  border-color: var(--ari-accent-edge);
}

.booking-heading {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ari-ink);
}
.booking-heading:focus {
  outline: none;
}
.booking-help {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}

/* ---- メニュー ---- */
.booking-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.booking-menu > li {
  display: flex;
  min-width: 0;
}
.booking-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  text-align: left;
  color: var(--ari-ink);
  background: var(--ari-bg-page);
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
button.booking-menu-item:hover {
  border-color: var(--ari-accent-text);
}
button.booking-menu-item:focus-visible {
  outline: 2px solid var(--ari-accent-text);
  outline-offset: 1px;
}
.booking-menu-name {
  font-weight: 700;
}
.booking-menu-meta {
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}
.booking-menu-desc {
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}

/* ---- 絞り込み（担当者・人数） ---- */
.booking-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.booking-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.booking-label {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ari-ink);
}
.booking-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--radius-button);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ari-ink-2);
  background: var(--ari-bg-soft);
  border: 1px solid var(--ari-line);
}
.booking-badge--required {
  color: var(--ari-on-dark);
  background: var(--ari-accent-fill);
  border-color: var(--ari-accent-fill);
}
.booking-input,
.booking-select,
.booking-textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--font-size-body);
  line-height: 1.5;
  color: var(--ari-ink);
  background: var(--ari-bg-page);
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
}
.booking-textarea {
  min-height: 6em;
  resize: vertical;
}
.booking-input:focus,
.booking-select:focus,
.booking-textarea:focus {
  outline: none;
  border-color: var(--ari-accent-text);
  box-shadow: 0 0 0 3px var(--ari-coral-050);
}
.booking-input:focus-visible,
.booking-select:focus-visible,
.booking-textarea:focus-visible {
  outline: 2px solid var(--ari-accent-text);
  outline-offset: 1px;
}
.booking-field--short {
  width: min(100%, 14rem);
}
.booking-field-error {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ari-coral);
}

/* ---- カレンダー ---- */
.booking-cal {
  max-width: 28rem;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
  padding: 12px;
}
.booking-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.booking-cal-title {
  font-weight: 700;
}
.booking-cal-nav {
  min-width: 2.5rem;
  min-height: 2.5rem;
  font: inherit;
  color: var(--ari-ink);
  background: var(--ari-bg-soft);
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-button);
  cursor: pointer;
}
.booking-cal-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.booking-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
.booking-cal-dow {
  padding: 4px 0;
  font-size: var(--fs-xs);
  color: var(--ari-ink-2);
}
.booking-day {
  min-height: 2.75rem;
  padding: 0;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ari-ink);
  background: var(--ari-bg-page);
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-button);
  cursor: pointer;
}
.booking-day:disabled {
  color: var(--ari-ink-2);
  background: transparent;
  border-color: transparent;
  opacity: 0.45;
  cursor: not-allowed;
}
.booking-day:not(:disabled):hover {
  border-color: var(--ari-accent-text);
}
.booking-day.is-selected {
  color: var(--ari-on-dark);
  background: var(--ari-accent-fill);
  border-color: var(--ari-accent-fill);
  font-weight: 700;
}
.booking-day-blank {
  min-height: 2.75rem;
}

/* ---- 時間・回 ---- */
.booking-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.booking-time {
  min-width: 5rem;
  min-height: 2.75rem;
  padding: 0 14px;
  font: inherit;
  color: var(--ari-ink);
  background: var(--ari-bg-page);
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-button);
  cursor: pointer;
}
.booking-time:hover {
  border-color: var(--ari-accent-text);
}
.booking-sessions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.booking-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  text-align: left;
  color: var(--ari-ink);
  background: var(--ari-bg-page);
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.booking-session:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.booking-session:not(:disabled):hover {
  border-color: var(--ari-accent-text);
}
.booking-session-remain {
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}

/* ---- 入力・確認・完了 ---- */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 36rem;
}
.booking-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
}
.booking-consent label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
.booking-summary {
  display: grid;
  grid-template-columns: minmax(6em, 30%) minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  background: var(--ari-bg-soft);
  max-width: 36rem;
}
.booking-summary dt {
  font-weight: 700;
  color: var(--ari-ink-2);
}
.booking-summary dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.booking-back {
  padding: 0;
  font: inherit;
  color: var(--ari-accent-text);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.booking-error,
.booking-msg {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--ari-line);
}
.booking-error {
  background: var(--ari-coral-050);
  border-color: var(--ari-coral);
  color: var(--ari-ink);
}
.booking-msg {
  background: var(--ari-bg-soft);
  color: var(--ari-ink-2);
}
.booking-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  border-radius: var(--ari-radius-card, var(--radius-card));
  border: 1px solid var(--ari-accent-edge);
  background: var(--ari-bg-soft);
  max-width: 36rem;
}
.booking-done p {
  margin: 0;
}
.booking-done-no {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ari-ink);
}

/* ---- ロボットよけ（人には見せない） ---- */
.booking-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.booking-sample-consent {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}

@media (max-width: 767px) {
  .booking-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .booking-summary dd {
    margin-bottom: 8px;
  }
  .booking-time {
    flex: 1 1 calc(33% - 8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .booking-menu-item {
    transition: none;
  }
}


/* module: process-flow */

/* ============================================================================
 * process-flow/module.css — 流れ（絵つき）
 * 出どころ：design-html partner.css の .p-flow*
 * 薄いグレーの背景（soft）の上に置く想定（丸は白）。
 *   1024px〜   横一列。間に右向きの矢印（丸の中央の高さ）
 *   640〜1023px 3列に折り返す（矢印は出さない）
 *   〜639px    縦に積む。間に下向きの矢印
 * ========================================================================== */

.process-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.process-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 300px;
  text-align: center;
  word-break: normal;
}
.process-flow-step > * {
  margin: 0;
}
.process-flow-illust {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  border: 4px solid color-mix(in srgb, var(--tone) 32%, var(--ari-bg-page));
  border-radius: 50%;
  background: var(--ari-bg-page);
  box-shadow: 0 6px 16px rgba(26, 38, 77, 0.06);
  overflow: hidden;
}
/* 絵は丸の中央に、Figma と同じ大きさ（内側の 78% × 56% の枠に、全体が見えるように） */
.process-flow-img {
  display: block;
  width: 78%;
  height: 56%;
  max-width: none;
  object-fit: contain;
}
.process-flow-illust > [data-ariake-empty] {
  margin: 0 !important;
  font-size: 0.75rem !important;
}
.process-flow-no {
  font-family: var(--font-accent);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.process-flow-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.process-flow-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.process-flow-text p {
  margin: 0;
}
.process-flow-text p + p {
  margin-top: 0.4em;
}
.process-flow-arrow {
  flex: none;
  width: 12px;
  height: 9px;
  background: var(--ari-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5H10.5M7.2 7.8L10.5 4.5L7.2 1.2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5H10.5M7.2 7.8L10.5 4.5L7.2 1.2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(90deg);
}
@media (min-width: 640px) and (max-width: 1023px) {
  .process-flow {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px 24px;
  }
  .process-flow-step {
    width: calc((100% - 48px) / 3);
  }
  .process-flow-arrow {
    display: none;
  }
}
@media (min-width: 1024px) {
  .process-flow {
    flex-direction: row;
    align-items: flex-start;
  }
  .process-flow-step {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  .process-flow-arrow {
    margin-top: 70px;
    transform: none;
  }
}


/* module: plan-cards */

/* ============================================================================
 * plan-cards/module.css — 料金プランのカード
 * 出どころ：design-html partner.css の .p-plan*
 * 白い背景（none）の上に置く想定。カードは同じ高さにそろえ、ボタンを一番下に寄せる。
 *   横に並べる：1024px〜 で枚数ぶんの列（2枚なら2列）。それ未満は1列（最大 560px・中央）
 *   縦に積む  ：いつも1列（幅いっぱい）
 * ========================================================================== */

.plan-cards {
  width: 100%;
}
.plan-cards-list {
  display: grid;
  gap: 24px;
  max-width: 560px;
  margin-inline: auto;
}
.plan-cards--stack .plan-cards-list {
  max-width: none;
}
.plan-cards-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding: 32px clamp(20px, 2vw, 28px);
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
  word-break: normal;
}
.plan-cards-card > * {
  margin: 0;
}
.plan-cards-card--featured {
  border: 2px solid var(--ari-navy);
  background: var(--ari-coral-050);
}
.plan-cards-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}
.plan-cards-label {
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.plan-cards-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ari-note-orange-text, var(--ari-note-orange));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-on-dark);
}
.plan-cards-name {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.plan-cards-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-cards-price > * {
  margin: 0;
}
.plan-cards-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.plan-cards-amount small,
.plan-cards-amount span {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.plan-cards-amount strong {
  font-family: var(--font-accent);
  font-size: clamp(34px, 2.78vw, 40px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.plan-cards-price-note {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ari-ink-2);
  opacity: 0.85;
}
.plan-cards-summary {
  align-self: stretch;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--ari-bg-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
}
.plan-cards-card--featured .plan-cards-summary {
  background: var(--ari-bg-page);
}
.plan-cards-summary p {
  margin: 0;
}
.plan-cards-summary p + p {
  margin-top: 0.4em;
}
/* チェックの一覧（上に区切りの線） */
.plan-cards-features {
  display: grid;
  gap: 10px;
  align-self: stretch;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--ari-line);
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.plan-cards-features li {
  position: relative;
  padding-left: 30px;
}
.plan-cards-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ari-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ari-navy-text, var(--ari-navy));
}
.plan-cards-foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch;
  margin-top: auto;
}
.plan-cards-foot:empty {
  display: none;
}
.plan-cards-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
/* ボタンはカードの幅いっぱい。矢印の丸はテーマの形のまま右端に来る */
.plan-cards-button.btn {
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.plan-cards-list-note {
  margin: clamp(32px, 3.33vw, 48px) 0 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
@media (min-width: 1024px) {
  .plan-cards--columns .plan-cards-list {
    max-width: none;
  }
  .plan-cards--columns.plan-cards--n2 .plan-cards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan-cards--columns.plan-cards--n3 .plan-cards-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .plan-cards--columns.plan-cards--n4 .plan-cards-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* module: compare-table */

/* ============================================================================
 * compare-table/module.css — 比較表
 * 出どころ：design-html partner.css の .p-table*
 * 薄いグレーの背景（soft）の上に置く想定（表は白）。
 * 狭い画面では表の中だけ横にスクロールする（表の最小幅 860px）。左の項目名の列は動かない。
 * ========================================================================== */

.compare-table {
  width: 100%;
}
.compare-table-frame {
  border: 1px solid color-mix(in srgb, var(--ari-navy) 10%, var(--ari-line));
  border-radius: 16px;
  background: var(--ari-bg-page);
  overflow: hidden;
}
.compare-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table-table {
  width: 100%;
  min-width: 860px;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.compare-table--c2 .compare-table-table {
  min-width: 600px;
}
.compare-table-table th,
.compare-table-table td {
  padding: 18px 16px;
  border: 0;
  text-align: center;
  vertical-align: middle;
}
.compare-table-table thead th,
.compare-table-table thead td {
  padding-block: 20px;
  background: color-mix(in srgb, var(--ari-navy) 10%, var(--ari-bg-page));
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.compare-table-table thead .compare-table-featured {
  background: color-mix(in srgb, var(--ari-navy) 20%, var(--ari-bg-page));
  color: color-mix(in srgb, var(--ari-navy) 45%, var(--ari-ink));
}
.compare-table-table tbody tr {
  border-top: 1px solid color-mix(in srgb, var(--ari-navy) 12%, var(--ari-line));
}
/* 左の項目名の列（横にスクロールしても動かない） */
.compare-table-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 220px;
  padding-left: 24px;
  text-align: left;
}
.compare-table-table tbody th {
  background: var(--ari-bg-soft);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--ari-navy) 45%, var(--ari-ink));
}
.compare-table-table tbody td {
  background: var(--ari-bg-page);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.compare-table-table tbody td.compare-table-featured {
  background: var(--ari-coral-050);
}
.compare-table-price td strong {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.compare-table-price td small {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
  opacity: 0.8;
}
/* 狭い画面だけ出す「横にスクロールできます」の案内 */
.compare-table-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ari-ink-2);
}
@media (max-width: 959px) {
  .compare-table-hint {
    display: block;
  }
}
.compare-table-note {
  margin-top: clamp(32px, 2.78vw, 40px);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
.compare-table-note p {
  margin: 0;
}
@media (max-width: 767px) {
  .compare-table-table tr > :first-child {
    width: 150px;
    padding-left: 16px;
  }
  .compare-table-price td small {
    display: block;
  }
}

/* ============================================================================
 * 見出しの行の背景色（2026-10-22）。CompareTable.tsx が、選んだときだけ data-head を付ける。
 * 選ばないときは、何も付かず、これまでどおり（薄い青）。
 * 濃い3色：白い文字。目立たせる列は、その色より少し暗くする。淡い色：濃い文字。目立たせる列は、少し青みを足す。
 * ========================================================================== */
.compare-table[data-head="main"] .compare-table-table thead th,
.compare-table[data-head="main"] .compare-table-table thead td { background: var(--ari-pal-main-fill); color: #ffffff; }
.compare-table[data-head="sub"] .compare-table-table thead th,
.compare-table[data-head="sub"] .compare-table-table thead td { background: var(--ari-pal-sub-fill); color: #ffffff; }
.compare-table[data-head="accent"] .compare-table-table thead th,
.compare-table[data-head="accent"] .compare-table-table thead td { background: var(--ari-pal-accent-fill); color: #ffffff; }
.compare-table[data-head="main"] .compare-table-table thead th.compare-table-featured { background: color-mix(in srgb, #000000 24%, var(--ari-pal-main-fill)); color: #ffffff; }
.compare-table[data-head="sub"] .compare-table-table thead th.compare-table-featured { background: color-mix(in srgb, #000000 24%, var(--ari-pal-sub-fill)); color: #ffffff; }
.compare-table[data-head="accent"] .compare-table-table thead th.compare-table-featured { background: color-mix(in srgb, #000000 24%, var(--ari-pal-accent-fill)); color: #ffffff; }

.compare-table[data-head="soft"] .compare-table-table thead th,
.compare-table[data-head="soft"] .compare-table-table thead td { background: var(--ari-bg-soft, #f3f5f7); color: var(--ari-navy); }
.compare-table[data-head="white"] .compare-table-table thead th,
.compare-table[data-head="white"] .compare-table-table thead td { background: #ffffff; color: var(--ari-navy); }
.compare-table[data-head="soft"] .compare-table-table thead th.compare-table-featured { background: color-mix(in srgb, var(--ari-navy) 14%, var(--ari-bg-soft, #f3f5f7)); color: var(--ari-navy); }
.compare-table[data-head="white"] .compare-table-table thead th.compare-table-featured { background: color-mix(in srgb, var(--ari-navy) 12%, #ffffff); color: var(--ari-navy); }


/* module: fee-campaign */

/* ============================================================================
 * fee-campaign/module.css — 費用とキャンペーン
 * 出どころ：design-html partner.css の .p-fee* / .p-campaign*
 * 白い背景（none）の上に置く想定。1024px〜 で横に並べ、それ未満は縦に積む。
 * 割引後の金額のオレンジは、テーマの AriakeNote の色（--ari-note-orange）を使う。
 * ========================================================================== */

.fee-campaign {
  display: grid;
  gap: 24px;
  width: 100%;
}
.fee-campaign-card,
.fee-campaign-campaign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  border-radius: var(--radius-card);
}
.fee-campaign-card > *,
.fee-campaign-campaign > * {
  margin: 0;
}
.fee-campaign-card {
  gap: 20px;
  padding: clamp(28px, 2.78vw, 40px) clamp(20px, 3.06vw, 44px);
  border: 1px solid var(--ari-line);
  background: var(--ari-bg-page);
}
.fee-campaign-title {
  font-size: clamp(20px, 1.67vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.fee-campaign-title small {
  font-size: 1rem;
  font-weight: 500;
}
.fee-campaign-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  color: var(--ari-ink-2);
}
.fee-campaign-amount strong {
  font-family: var(--font-accent);
  font-size: clamp(52px, 5vw, 72px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.05em;
}
.fee-campaign-amount span,
.fee-campaign-sale span {
  /* 小さい文字（18px の「円」）は、文字用の濃いオレンジ（4.5:1）。大きな金額は、そのままのオレンジで 3:1 を満たす */
  color: var(--ari-note-orange-text, var(--ari-note-orange));
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.fee-campaign-amount small,
.fee-campaign-sale small {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
  opacity: 0.8;
}
.fee-campaign-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ari-bg-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.fee-campaign-list-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.fee-campaign-checks {
  display: grid;
  gap: 10px;
  align-self: stretch;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.fee-campaign-checks li {
  position: relative;
  padding-left: 30px;
}
.fee-campaign-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ari-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ari-navy-text, var(--ari-navy));
}
.fee-campaign-note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
}

/* 右の青い枠 */
.fee-campaign-campaign {
  gap: 16px;
  padding: clamp(28px, 2.78vw, 40px) clamp(20px, 2.78vw, 40px);
  background: var(--ari-navy);
  color: var(--ari-on-dark);
}
.fee-campaign-campaign-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ari-bg-page);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.fee-campaign-campaign-title {
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--ari-on-dark);
}
.fee-campaign-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: stretch;
  padding: 14px clamp(16px, 1.67vw, 24px);
  border-radius: 16px;
  background: var(--ari-bg-page);
  filter: drop-shadow(0 6px 8px rgba(13, 26, 77, 0.18));
}
.fee-campaign-price > * {
  margin: 0;
}
.fee-campaign-regular {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
  opacity: 0.6;
}
.fee-campaign-sale {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  color: var(--ari-note-orange);
}
.fee-campaign-sale .fee-campaign-sale-arrow {
  margin-right: 6px;
}
.fee-campaign-sale strong {
  font-family: var(--font-accent);
  font-size: clamp(34px, 2.78vw, 40px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.fee-campaign-conditions {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.fee-campaign-conditions li::before {
  content: "・";
}
@media (min-width: 1024px) {
  .fee-campaign--with-campaign {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  }
}


/* module: option-items */

/* ============================================================================
 * option-items/module.css — ＋つきの項目とお知らせ
 * 出どころ：design-html partner.css の .p-extra*
 * 薄いグレーの背景（soft）の上に置く想定（箱は白）。
 *   〜639px 1列 ／ 640px〜 2列 ／ 1024px〜 3列（「2つ」を選んだときは2列のまま）
 * ========================================================================== */

.option-items {
  width: 100%;
}
.option-items-grid {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.option-items-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--ari-bg-page);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
  word-break: normal;
}
.option-items-item::before {
  content: "＋";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ari-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ari-navy-text, var(--ari-navy));
}
.option-items-message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(32px, 2.78vw, 40px);
  padding: 28px clamp(20px, 2.5vw, 36px);
  border: 2px solid var(--ari-navy);
  border-radius: 20px;
  background: var(--ari-bg-page);
  text-align: center;
}
.option-items-message > * {
  margin: 0;
}
.option-items-message-title {
  font-size: clamp(17px, 1.39vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.option-items-message-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.option-items-message-text p {
  margin: 0;
}
@media (min-width: 640px) {
  .option-items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .option-items--c3 .option-items-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* module: persona-cards */

/* ============================================================================
 * persona-cards/module.css — こんな方に（おすすめの案内）
 * 出どころ：design-html partner.css の .p-persona*
 * 白い背景（none）の上に置く想定（カードは白に細い枠）。900px〜 で2列。
 * ========================================================================== */

.persona-cards {
  display: grid;
  gap: 16px 20px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.persona-cards-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
}
.persona-cards-illust {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(72px, 6.45vw, 93px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tone-bg);
  overflow: hidden;
}
.persona-cards-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.persona-cards-illust > [data-ariake-empty] {
  margin: 0 !important;
  font-size: 0.6875rem !important;
}
.persona-cards-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.persona-cards-text > * {
  margin: 0;
}
.persona-cards-voice {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.persona-cards-target {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.persona-cards-target a {
  color: inherit;
  text-decoration: none;
}
.persona-cards-target a:hover {
  text-decoration: underline;
}
.persona-cards-arrow {
  margin-right: 0.4em;
}
.persona-cards-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink);
  word-break: normal;
}
.persona-cards-desc p {
  margin: 0;
}
@media (min-width: 900px) {
  .persona-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* module: info-rows */

/* ============================================================================
 * info-rows/module.css — 項目と説明の表
 * 出どころ：design-html partner.css の .p-info*
 * 薄いグレーの背景（soft）の上に置く想定（枠は白）。768px〜 で項目名と説明を横に並べる。
 * ========================================================================== */

.info-rows {
  width: 100%;
}
.info-rows-list {
  margin: 0;
  box-sizing: border-box;
  padding: 8px clamp(20px, 2.78vw, 40px);
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
}
.info-rows-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 24px;
}
.info-rows-row + .info-rows-row {
  border-top: 1px solid var(--ari-line);
}
.info-rows-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--ari-navy) 45%, var(--ari-ink));
}
.info-rows-label::before {
  content: "";
  flex: none;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--ari-navy);
}
.info-rows-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
  word-break: normal;
}
.info-rows-text p {
  margin: 0;
}
.info-rows-text p + p {
  margin-top: 0.4em;
}
@media (min-width: 768px) {
  .info-rows-row {
    flex-direction: row;
    gap: 32px;
  }
  .info-rows-label {
    width: clamp(180px, 15.3vw, 220px);
  }
  .info-rows-text {
    flex: 1;
    min-width: 0;
  }
}


/* module: hub-intro */

/* ============================================================================
 * hub-intro/module.css — つながりの図つきのファーストビュー
 * 出どころ：design-html の ariake-one.css（.ao-fv / .ao-orbit）・common.css（.breadcrumb / .tag / .title-xl）。
 * 数値は Figma のまま。横の余白はテーマの列（ariake-row）が持つので、ここは列の幅いっぱいに描く。
 *
 * 【図の置き方】
 * 図の中の要素は、style の --x・--y・--w（Figma の 646×472 の図の px）を、表示する枠に対する割合にして置く。
 *   広いとき … 枠 = 図全体（左上 0,0／幅 646／高さ 472）
 *   狭いとき（図の幅 560px 以下）… 飾りを外し、丸と線だけの範囲（左上 68,28／幅 466／高さ 450）を枠にする
 * 文字の大きさは、図の幅（コンテナの幅 100cqw）に比例させる（Figma の 1px = 100cqw ÷ 枠の幅）。
 * ========================================================================== */

.hub-intro {
  width: 100%;
}

/* ------------------------------------------------------------ パンくず */
.hub-intro-breadcrumb {
  margin-bottom: clamp(24px, 3.33vw, 48px);
}
.hub-intro-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink-2);
}
.hub-intro-breadcrumb a {
  /* 押せる面を縦に広げる（余白は負の余白で戻す。デザインレビュー第1回 B7） */
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  color: var(--ari-navy);
}
.hub-intro-breadcrumb a:hover {
  text-decoration: underline;
}
.hub-intro-breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  opacity: 0.45;
}

/* ------------------------------------------------------------ 並び */
.hub-intro-row {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hub-intro-row {
    grid-template-columns: minmax(0, 470fr) minmax(0, 646fr);
    gap: clamp(40px, 4.44vw, 64px);
  }
}

/* ------------------------------------------------------------ 文字 */
.hub-intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
.hub-intro-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 6px 16px 6px 14px;
  border-radius: 999px;
  background: var(--ari-blue);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.hub-intro-tag::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ari-navy);
}
.hub-intro-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-heading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
  text-wrap: balance;
  word-break: auto-phrase;
}
.hub-intro-title em {
  font-style: normal;
  color: var(--ari-navy);
}
.hub-intro-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ari-ink);
  word-break: auto-phrase;
}
.hub-intro-lead p {
  margin: 0;
}
.hub-intro-lead p + p {
  margin-top: 24px;
}
@media (min-width: 1280px) {
  /* 広い画面では、Figma と同じく幅で折り返す */
  .hub-intro-lead {
    word-break: normal;
  }
}
.hub-intro-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ------------------------------------------------------------ つながりの図 */
.hub-intro-visual {
  container-type: inline-size;
  width: 100%;
  max-width: 646px;
  justify-self: center;
}
.hub-intro-orbit {
  position: relative;
  aspect-ratio: 646 / 472;
}
.hub-intro-orbit > * {
  position: absolute;
}
.hub-intro-deco {
  left: calc(var(--x) / 646 * 100%);
  top: calc(var(--y) / 472 * 100%);
  width: calc(var(--w) / 646 * 100%);
  height: auto;
  max-width: none;
}
.hub-intro-deco--empty {
  aspect-ratio: 1;
}
.hub-intro-ring {
  left: calc(128.19 / 646 * 100%);
  top: calc(96.53 / 472 * 100%);
  width: calc(346.3 / 646 * 100%);
  aspect-ratio: 1;
  border: 1.65px dashed color-mix(in srgb, var(--ari-navy) 22%, var(--ari-bg-page));
  border-radius: 50%;
}
.hub-intro-spoke {
  left: calc(301.34 / 646 * 100%);
  top: calc(269.68 / 472 * 100%);
  width: calc(173.15 / 646 * 100%);
  height: 1.65px;
  margin-top: -0.82px;
  background: color-mix(in srgb, var(--ari-navy) 22%, var(--ari-bg-page));
  transform-origin: 0 50%;
  transform: rotate(var(--a));
}
.hub-intro-hub {
  left: calc(223.01 / 646 * 100%);
  top: calc(191.35 / 472 * 100%);
  width: calc(156.66 / 646 * 100%);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 8 / 646);
  box-sizing: border-box;
  border: calc(100cqw * 3.13 / 646) solid var(--ari-blue);
  border-radius: 50%;
  background: var(--ari-bg-page);
  box-shadow: 0 6.27px 18.8px rgba(38, 99, 235, 0.16);
}
.hub-intro-hub-img {
  width: 54%;
  height: auto;
  object-fit: contain;
}
.hub-intro-hub-label {
  font-size: max(10px, calc(100cqw * 13 / 646));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ari-navy) 35%, var(--ari-ink));
}
.hub-intro-node {
  left: calc((var(--x) - 61.84) / 646 * 100%);
  top: calc((var(--y) - 61.84) / 472 * 100%);
  width: calc(123.68 / 646 * 100%);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 6.6 / 646);
  box-sizing: border-box;
  border: max(1.5px, calc(100cqw * 2.06 / 646)) solid var(--tone);
  border-radius: 50%;
  background: var(--ari-bg-page);
  box-shadow: 0 4.95px 14.84px rgba(20, 54, 99, 0.1);
}
.hub-intro-node-img {
  width: 39.8%;
  height: auto;
  object-fit: contain;
}
.hub-intro-node-name {
  font-family: var(--font-accent);
  font-size: max(10px, calc(100cqw * 14.02 / 646));
  font-weight: 600;
  line-height: 1.25;
  color: var(--tone-text, var(--tone));
  white-space: nowrap;
}

/* 狭いとき：飾りを外し、丸と線だけの範囲（左上 68,28／幅 466／高さ 450）を枠いっぱいに見せる */
@container (max-width: 560px) {
  .hub-intro-orbit {
    aspect-ratio: 466 / 450;
  }
  .hub-intro-deco {
    display: none;
  }
  .hub-intro-ring {
    left: calc((128.19 - 68) / 466 * 100%);
    top: calc((96.53 - 28) / 450 * 100%);
    width: calc(346.3 / 466 * 100%);
  }
  .hub-intro-spoke {
    left: calc((301.34 - 68) / 466 * 100%);
    top: calc((269.68 - 28) / 450 * 100%);
    width: calc(173.15 / 466 * 100%);
  }
  .hub-intro-hub {
    left: calc((223.01 - 68) / 466 * 100%);
    top: calc((191.35 - 28) / 450 * 100%);
    width: calc(156.66 / 466 * 100%);
    gap: calc(100cqw * 8 / 466);
    border-width: calc(100cqw * 3.13 / 466);
  }
  .hub-intro-hub-label {
    font-size: max(10px, calc(100cqw * 13 / 466));
  }
  .hub-intro-node {
    left: calc((var(--x) - 61.84 - 68) / 466 * 100%);
    top: calc((var(--y) - 61.84 - 28) / 450 * 100%);
    width: calc(123.68 / 466 * 100%);
    gap: calc(100cqw * 6.6 / 466);
    border-width: max(1.5px, calc(100cqw * 2.06 / 466));
  }
  .hub-intro-node-name {
    font-size: max(10px, calc(100cqw * 14.02 / 466));
  }
}


/* module: pair-cards */

/* ============================================================================
 * pair-cards/module.css — 2枚のカードを「×」でつなぐ
 * 出どころ：design-html の ariake-one.css（.ao-pair / .ao-check / .ao-tool）。数値は Figma のまま。
 * 900px 以上で「カード｜丸い印（56px）｜カード」の横並び、それより狭いと縦に積む。
 * ========================================================================== */

.pair-cards {
  display: grid;
  gap: 16px;
  width: 100%;
}
.pair-cards-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px 20px;
  border-radius: var(--radius-card, 24px);
  background: var(--ari-bg-page);
}
.pair-cards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pair-cards-head-text {
  min-width: 0;
}
.pair-cards-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-accent-text);
}
.pair-cards-title {
  margin: 2px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.pair-cards-avatar {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ari-blue);
  object-fit: cover;
}
.pair-cards-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pair-cards-check,
.pair-cards-row {
  display: flex;
  align-items: center;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.pair-cards-check {
  gap: 12px;
  padding: 10px 16px;
  background: var(--ari-bg-soft);
}
.pair-cards-check::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M6 11.25L9.5 14.75L16 7.25' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat var(--ari-navy);
}
.pair-cards-row {
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 16px;
  background: var(--tone-bg);
}
.pair-cards-logo {
  width: auto;
  max-width: 100%;
  height: 24px;
  object-fit: contain;
}
.pair-cards-join {
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ari-navy);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ari-on-dark);
}
@media (min-width: 480px) {
  .pair-cards-logo {
    height: 30px;
  }
}
@media (min-width: 768px) {
  .pair-cards-card {
    padding: 32px;
  }
}
@media (min-width: 900px) {
  .pair-cards {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    gap: 24px;
  }
  .pair-cards--no-join {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* module: cycle-diagram */

/* ============================================================================
 * cycle-diagram/module.css — くり返しの図
 * 出どころ：design-html の ariake-one.css（.ao-cycle）。数値は Figma のまま（図は 504×504）。
 * 文字の大きさは図の幅（コンテナの幅 100cqw）に比例させる（Figma の 1px = 100cqw ÷ 504）。
 * 図の幅が 440px 未満のときは、丸い図をやめて「真ん中の名前 → 段階を矢印でつないだ縦の流れ」にする。
 * ========================================================================== */

.cycle-diagram {
  width: 100%;
}
/* 同じ列で上に部品があるとき（2枚のカードの下など）は、Figma の間（48px）を空ける */
* + .cycle-diagram {
  margin-top: clamp(32px, 3.33vw, 48px);
}
.cycle-diagram-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
}
.cycle-diagram-panel--framed {
  padding: 28px 20px;
  border: 2px solid var(--ari-navy);
  border-radius: var(--radius-card, 24px);
  background: var(--ari-bg-page);
}
.cycle-diagram-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--ari-accent-text);
}
.cycle-diagram-wrap {
  container-type: inline-size;
  width: 100%;
  max-width: 504px;
}
.cycle-diagram-figure {
  position: relative;
  aspect-ratio: 1;
}
.cycle-diagram-outer,
.cycle-diagram-arcs,
.cycle-diagram-center,
.cycle-diagram-steps,
.cycle-diagram-step {
  position: absolute;
}
.cycle-diagram-outer {
  inset: 0.4%;
  border-radius: 50%;
  background: var(--ari-coral-050);
}
.cycle-diagram-arcs {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cycle-diagram-arc {
  fill: none;
  stroke: color-mix(in srgb, var(--ari-navy) 75%, var(--ari-bg-page));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.1 8;
}
.cycle-diagram-arrowhead {
  fill: none;
  stroke: color-mix(in srgb, var(--ari-navy) 75%, var(--ari-bg-page));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cycle-diagram-center {
  left: 27.78%;
  top: 27.78%;
  width: 44.44%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 4 / 504);
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ari-navy) 82%, var(--ari-bg-page)) 14%,
    var(--ari-navy) 86%
  );
  text-align: center;
  line-height: 1.45;
}
.cycle-diagram-center::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.cycle-diagram-center-small {
  font-size: calc(100cqw * 13 / 504);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ari-on-dark) 85%, var(--ari-navy));
}
.cycle-diagram-center-label {
  font-size: calc(100cqw * 22 / 504);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ari-on-dark);
}
.cycle-diagram-steps {
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cycle-diagram-step {
  left: calc((var(--x) - 76) / 504 * 100%);
  top: calc((var(--y) - 76) / 504 * 100%);
  width: 30.16%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 6 / 504);
  border-radius: 50%;
  background: var(--ari-bg-page);
  box-shadow: 0 8px 20px rgba(20, 54, 99, 0.14);
  text-align: center;
}
.cycle-diagram-tag {
  padding: calc(100cqw * 2 / 504) calc(100cqw * 10 / 504);
  border-radius: 999px;
  font-size: calc(100cqw * 11 / 504);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--ari-on-dark);
}
.cycle-diagram-tag--dark {
  background: color-mix(in srgb, var(--ari-navy) 35%, var(--ari-ink));
}
.cycle-diagram-tag--brand {
  background: var(--ari-navy);
}
.cycle-diagram-text {
  font-size: calc(100cqw * 15 / 504);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--ari-ink-2);
}
@media (min-width: 768px) {
  .cycle-diagram-panel--framed {
    padding: 32px 40px;
  }
}

/* 狭いとき：丸い図をやめて、真ん中の名前を上に置き、段階を矢印でつないだ縦の流れにする */
@container (max-width: 439px) {
  .cycle-diagram-figure {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .cycle-diagram-outer,
  .cycle-diagram-arcs {
    display: none;
  }
  .cycle-diagram-center {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    aspect-ratio: auto;
    gap: 2px;
    padding: 12px 28px;
    border-radius: 999px;
  }
  .cycle-diagram-center::before {
    inset: 4px;
    border-radius: 999px;
  }
  .cycle-diagram-center-small {
    font-size: 0.8125rem;
  }
  .cycle-diagram-center-label {
    font-size: 1.25rem;
  }
  .cycle-diagram-steps {
    position: static;
    display: grid;
    gap: 28px;
    width: 100%;
  }
  .cycle-diagram-step {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    aspect-ratio: auto;
    gap: 6px;
    padding: 16px;
    border-radius: 16px;
    background: var(--ari-coral-050);
    box-shadow: none;
  }
  .cycle-diagram-step + .cycle-diagram-step::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -22px;
    width: 2px;
    height: 16px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--ari-navy);
  }
  .cycle-diagram-step + .cycle-diagram-step::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-right: 2px solid var(--ari-navy);
    border-bottom: 2px solid var(--ari-navy);
    transform: rotate(45deg);
  }
  .cycle-diagram-tag {
    padding: 2px 10px;
    font-size: 0.75rem;
  }
  .cycle-diagram-text {
    font-size: 0.9375rem;
  }
}


/* module: app-list */

/* ============================================================================
 * app-list/module.css — アプリの一覧（1行ずつ）
 * 出どころ：design-html の ariake-one.css（.ao-applist / .ao-app）。数値は Figma のまま。
 * 640px 以上で「ロゴ（170px）｜役割の一言｜札」の1行、それより狭いと「ロゴ＋札」の下に一言の2段。
 * ========================================================================== */

.app-list {
  width: 100%;
}
/* 上に見出しなどがあるときは、Figma の広い間（112px）を空ける */
* + .app-list {
  margin-top: clamp(40px, 7.78vw, 112px);
}
.app-list-rows {
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.app-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ari-bg-soft);
}
.app-list-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}
.app-list-logo img {
  width: auto;
  max-width: 100%;
  height: 20px;
  object-fit: contain;
}
.app-list-name {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tone-text, var(--tone));
}
.app-list-role {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ari-ink-2);
}
.app-list-status {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tone-bg);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--tone-text, var(--tone));
  white-space: nowrap;
}
@media (min-width: 640px) {
  .app-list-item {
    grid-template-columns: 170px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px 20px;
  }
  .app-list-role,
  .app-list-status {
    grid-column: auto;
    grid-row: auto;
  }
}


/* module: option-cards */

/* ============================================================================
 * option-cards/module.css — 選択肢のカード（使い方・プラン）
 * 出どころ：design-html の ariake-one.css（.ao-options / .ao-option）。数値は Figma のまま。
 * 縦に積む（stack）が Figma どおり。横に並べる（columns）は 900px 以上で2列。
 * ========================================================================== */

.option-cards {
  display: grid;
  gap: 32px;
  width: 100%;
}
@media (min-width: 900px) {
  .option-cards--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
.option-cards-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding: 32px 24px;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card, 24px);
  background: var(--ari-bg-page);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ari-ink);
}
.option-cards-card--featured {
  gap: 16px;
  border: 2px solid var(--ari-navy);
  background: var(--ari-coral-050);
}
@media (min-width: 768px) {
  .option-cards-card {
    padding: clamp(32px, 3.33vw, 48px) clamp(32px, 3.9vw, 56px);
  }
}
.option-cards-badge {
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ari-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-accent-text);
}
.option-cards-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-accent-text);
  white-space: pre-wrap;
}
.option-cards-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.option-cards-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.option-cards-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}
.option-cards-amount small {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.option-cards-amount strong {
  font-family: var(--font-accent);
  font-size: clamp(34px, 2.78vw, 40px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-navy);
}
.option-cards-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ari-ink) 75%, var(--ari-bg-page));
}
.option-cards-body p {
  margin: 0;
}
.option-cards-body p + p {
  margin-top: 16px;
}
/* おすすめのカードは、ボタンの上を少し空ける（Figma の 8px の間） */
.option-cards-card--featured .option-cards-button {
  margin-top: 8px;
}


/* module: thanks-card */

/* ===========================================================================
 * thanks-card/module.css — お礼のカード（送信のあとのページ）
 * ---------------------------------------------------------------------------
 * ありあけAI の thanks.html・thanks-seminar.html（ローカル版 2026-10-30）の見た目を、テーマの変数で書いたもの。
 * 色はテーマの3色（--ari-navy＝テーマカラー・--ari-accent-*＝アクセント）と、文字・背景の色。
 * =========================================================================== */

.thanks-card {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 0;
  text-align: center;
}

/* 丸いアイコン（テーマカラーの円に白いアイコン） */
.thanks-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 32px;
  border-radius: 50%;
  background: var(--ari-navy);
  color: var(--ari-on-dark);
}
.thanks-card-icon .ari-icon {
  font-size: 2.5rem;
}

/* 見出しの上の短い線 */
.thanks-card-line {
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 24px;
  border-radius: 2px;
  background: var(--ari-accent-fill);
}

.thanks-card-label {
  margin-bottom: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ari-accent-text);
}

.thanks-card-title {
  margin-bottom: 20px;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ari-navy);
}

.thanks-card-body {
  margin-bottom: 40px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ari-ink-2);
}
.thanks-card-body strong {
  font-weight: 700;
  color: var(--ari-ink);
}

/* 返信の目安（左に色の線のある箱） */
.thanks-card-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 40px;
  padding: 20px 24px;
  border-left: 4px solid var(--ari-accent-fill);
  border-radius: 8px;
  background: var(--ari-bg-soft);
  text-align: left;
}
.thanks-card-note-icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.375rem;
  color: var(--ari-accent-text);
}
.thanks-card-note-text {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ari-ink);
}
.thanks-card-note-title {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--ari-navy);
}

/* 次の一歩（薄い色の箱） */
.thanks-card-next,
.thanks-card-steps {
  margin-bottom: 40px;
  padding: 28px 32px;
  border-radius: 12px;
  background: var(--ari-bg-soft);
  text-align: left;
}
.thanks-card-next-label {
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ari-accent-text);
}
.thanks-card-next-title,
.thanks-card-steps-title {
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ari-navy);
}
.thanks-card-next-text {
  margin-bottom: 16px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ari-ink-2);
}
.thanks-card-next-button {
  width: 100%;
  max-width: 360px;
}

/* 流れ（番号つき） */
.thanks-card-steps-list {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  list-style: none;
}
.thanks-card-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.thanks-card-step-no {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ari-navy);
  color: var(--ari-on-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.thanks-card-step-text {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ari-ink-2);
}
.thanks-card-step-text strong {
  display: block;
  font-weight: 700;
  color: var(--ari-ink);
}

/* 戻るボタン（枠だけ） */
.thanks-card-back {
  display: flex;
  justify-content: center;
}
.thanks-card-back .btn {
  width: 100%;
  max-width: 360px;
}

@media (max-width: 480px) {
  .thanks-card-next,
  .thanks-card-steps {
    padding: 20px;
  }
  .thanks-card-note {
    padding: 16px 18px;
  }
  .thanks-card-next-button,
  .thanks-card-back .btn {
    max-width: 100%;
  }
}


/* module: choice-cards */

/* ============================================================================
 * choice-cards/module.css — 状況別のカード
 * 出どころ：Figma の /seminar（2026-10-30）「次回のありあけAIセミナー」と、最後の2枚のカード。
 * カードは白・青い枠／白・細い枠／薄い青／薄いグレー。出すカードが1枚のときは、幅を絞って中央に置く。
 * 編集中だけ、カードの上に灰色の小さな札（どの状況のカードか）。いまは出ないカードは薄く見せる。
 * ========================================================================== */

.choice-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  width: 100%;
}
@media (min-width: 768px) {
  .choice-cards[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice-cards[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.choice-cards[data-count="1"] {
  max-width: 760px;
  margin-inline: auto;
}
/* 出ないカードは、カードだけ薄くする。「いまは出ていません」の札は薄くしない（札の文字が 2.4:1 まで落ちて読めなくなるため。デザインレビュー第1回 B3） */
.choice-cards-item--off > .choice-cards-card {
  opacity: 0.45;
}
.choice-cards-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.choice-cards-badge {
  align-self: flex-start;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ari-line);
  color: var(--ari-ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
}
.choice-cards-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
}
@media (min-width: 768px) {
  .choice-cards-card {
    padding: 32px;
  }
}
.choice-cards-card > * {
  margin: 0;
}
.choice-cards-card--outline {
  box-shadow: inset 0 0 0 2px var(--ari-navy);
}
.choice-cards-card--plain {
  box-shadow: inset 0 0 0 1px var(--ari-line);
}
.choice-cards-card--tint {
  background: var(--ari-coral-050);
}
.choice-cards-card--soft {
  background: var(--ari-bg-soft);
}
.choice-cards-title {
  color: var(--ari-ink);
  font-weight: 700;
  line-height: 1.4;
}
.choice-cards-title--large {
  font-size: 1.5rem;
}
.choice-cards-title--medium {
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  .choice-cards-title--large {
    font-size: 1.75rem;
  }
}
.choice-cards-rows {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 20px !important;
}
.choice-cards-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
@media (min-width: 480px) {
  .choice-cards-row {
    grid-template-columns: 7.5em minmax(0, 1fr);
    gap: 12px;
  }
}
.choice-cards-row dt {
  color: var(--ari-navy);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.7;
}
.choice-cards-row dd {
  margin: 0;
  color: var(--ari-ink-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.choice-cards-text {
  margin-top: 14px !important;
  color: var(--ari-ink-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.choice-cards-text p {
  margin: 0;
}
.choice-cards-text p + p {
  margin-top: 0.6em;
}
.choice-cards-button {
  margin-top: 24px !important;
}
.choice-cards-note {
  margin-top: 12px !important;
  color: var(--ari-ink-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
}


/* module: feature-tiles */

/* ============================================================================
 * feature-tiles/module.css — 特長タイル
 * 出どころ：Figma の /seminar（2026-10-30）「気軽にご参加いただけます。」。
 * 色のタイル（--tone-bg）に、白い丸のアイコンと太い短い言葉。スマホは2つずつ、PC は横一列。
 * ========================================================================== */

.feature-tiles {
  width: 100%;
}
.feature-tiles-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .feature-tiles-list {
    gap: 20px;
  }
  .feature-tiles-list[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .feature-tiles-list[data-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.feature-tiles-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  min-height: 168px;
  padding: 24px 12px;
  border-radius: var(--radius-card);
  background: var(--tone-bg);
  text-align: center;
}
@media (min-width: 768px) {
  .feature-tiles-item {
    min-height: 216px;
    gap: 20px;
  }
}
.feature-tiles-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ari-bg-page);
}
@media (min-width: 768px) {
  .feature-tiles-icon {
    width: 88px;
    height: 88px;
  }
}
.feature-tiles-img {
  width: 56%;
  height: 56%;
  object-fit: contain;
}
.feature-tiles-label {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--ari-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .feature-tiles-label {
    font-size: 1.1875rem;
  }
}
.feature-tiles-note {
  margin: 24px 0 0;
  color: var(--ari-ink-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  text-align: center;
}


/* module: contact-methods */

/* ============================================================================
 * contact-methods/module.css — 相談方法のカード
 * 出どころ：Figma の /contact（2026-10-30）「ご相談方法」。
 * 左に大きなカード（白・青い枠）、右に小さな白いカードを縦に2つ。スマホでは縦に1列。
 * ========================================================================== */

.contact-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
}
@media (min-width: 900px) {
  .contact-methods:not([data-subs="0"]) {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
  }
}
.contact-methods-subs {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.contact-methods-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
}
.contact-methods-card > * {
  margin: 0;
}
.contact-methods-card--main {
  justify-content: center;
  padding: 28px 24px;
  box-shadow: inset 0 0 0 2px var(--ari-navy);
}
@media (min-width: 768px) {
  .contact-methods-card--main {
    padding: 40px;
  }
}
.contact-methods-card--sub {
  justify-content: center;
  padding: 22px 24px;
  box-shadow: inset 0 0 0 1px var(--ari-line);
}
.contact-methods-badge {
  margin-bottom: 12px !important;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ari-coral-050);
  color: var(--ari-navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
}
.contact-methods-title {
  color: var(--ari-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .contact-methods-title {
    font-size: 1.75rem;
  }
}
.contact-methods-meta {
  margin-top: 6px !important;
  color: var(--ari-navy);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.6;
}
.contact-methods-text {
  margin-top: 16px !important;
  color: var(--ari-ink-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.contact-methods-text p {
  margin: 0;
}
.contact-methods-text p + p {
  margin-top: 0.6em;
}
.contact-methods-button {
  margin-top: 24px !important;
}
.contact-methods-label {
  color: var(--ari-ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
}
.contact-methods-subtitle {
  margin-top: 4px !important;
  color: var(--ari-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}
.contact-methods-tel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px !important;
  color: var(--ari-navy);
  font-family: var(--font-accent);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
.contact-methods-tel a {
  color: inherit;
  text-decoration: none;
}
.contact-methods-tel-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ari-navy);
  color: var(--ari-on-dark);
  font-size: 1.25rem;
}
.contact-methods-subtext {
  margin-top: 6px !important;
  color: var(--ari-ink-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.contact-methods-link {
  /* 押せる面を縦に 45px ほどに広げる。上下のすき間は、広げた分だけ負の余白で戻し、見た目の並びは変えない（デザインレビュー第1回 B7） */
  display: inline-block;
  padding-block: 12px;
  margin-block: -2px -12px !important;
  color: var(--ari-navy);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
.contact-methods-link::after {
  content: " →";
}
.contact-methods-link:hover {
  text-decoration: underline;
}


/* module: flow-cards */

/* ============================================================================
 * flow-cards/module.css — 流れ（カード）
 * 出どころ：Figma の /contact（2026-10-30）「ご相談の流れ」。
 * 白いカード（番号・名前・説明）を、小さな矢印でつなぐ。1100px 未満は縦（矢印は下向き）、それ以上は横一列（5枚だと 900〜1100px では 1 枚が 140px ほどと細すぎるため。デザインレビュー第1回 B8）。
 * ========================================================================== */

.flow-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1100px) {
  .flow-cards {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 28px;
  }
}
.flow-cards-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 22px 20px 24px;
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
}
.flow-cards-item > * {
  margin: 0;
}
/* つなぎの矢印（スマホ：下向き。PC：右向き）。読み上げない飾り */
.flow-cards-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-right: 2px solid var(--ari-navy);
  border-bottom: 2px solid var(--ari-navy);
  transform: rotate(45deg);
}
@media (min-width: 1100px) {
  .flow-cards-item:not(:last-child)::after {
    left: auto;
    right: -19px;
    top: 50%;
    bottom: auto;
    margin: -5px 0 0;
    transform: rotate(-45deg);
  }
}
.flow-cards-no {
  color: var(--ari-navy);
  font-family: var(--font-accent);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.flow-cards-title {
  color: var(--ari-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}
.flow-cards-text {
  color: var(--ari-ink-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.flow-cards-text p {
  margin: 0;
}


/* module: product */

/* ============================================================================
 * product/module.css — 商品（2026-11-03）
 * 白いカード。写真は正方形の枠に全体を収める。900px から写真が左、文章が右。
 * ========================================================================== */

.product {
  width: 100%;
}
.product-card {
  display: grid;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  padding: 24px;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
}
.product-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--radius-card) / 2);
  background: var(--ari-bg-soft);
}
.product-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.product-text > * {
  margin: 0;
}
.product-name {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.product-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  color: var(--ari-navy);
}
.product-price-amount {
  font-family: var(--font-accent);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}
.product-price-unit {
  font-size: 1.125rem;
  font-weight: 700;
}
.product-price-tax {
  margin-left: 4px;
  font-size: var(--fs-sm);
  color: var(--ari-ink);
}
.product-stock {
  margin: 0;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.6;
  background: var(--ari-bg-soft);
  color: var(--ari-ink-2);
}
.product-stock--in-stock {
  background: var(--ari-accent-fill);
  color: var(--ari-on-dark);
}
.product-description {
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
}
.product-description p {
  margin: 0;
}
.product-description p + p {
  margin-top: 0.6em;
}
.product-sku {
  font-size: var(--fs-sm);
  color: var(--ari-ink);
}
.product-button {
  margin-top: 8px;
}

@media (min-width: 900px) {
  .product-card--photo {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(24px, 3.33vw, 48px);
    align-items: center;
    padding: clamp(24px, 2.78vw, 40px);
  }
}

/* 記事の本文（.blog-embed）は狭いので、画面の幅にかかわらず縦に積む（link-card と同じ） */
.blog-embed .product-card--photo {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
}


/* template: blog */

/* ===========================================================================
 * blog/template.css — ブログのテンプレート（記事詳細・記事一覧）のCSS
 * ---------------------------------------------------------------------------
 * ビルド時にテーマのCSSの後ろへ連結される（packages/site-modules/src/moduleCss.ts の TEMPLATES_WITH_CSS）。
 * ページの部品（モジュール）ではなく、ブログ専用のテンプレートのCSSなので、module.css ではなく template.css。
 *
 * 決まり（module.css と同じ。moduleCss.test.ts が見る）：
 *   ・色・すき間・角の丸み・文字の大きさは、テーマの変数（--ari-* / --space-* / --radius-* / --font-size-*）で書く
 *   ・テーマ（base.css）や、ほかの部品・テンプレートと同じセレクタを書かない（クラス名は blog- で始める）
 *   ・CSS変数を定義しない
 * =========================================================================== */

/* ---- 共通の枠 ------------------------------------------------------------ */
.blog-main {
  padding: var(--space-md) 20px var(--space-lg);
}

.blog-article,
.blog-list {
  margin: 0 auto;
}

/* 記事は、読みやすい幅の1本の流れ */
.blog-article {
  max-width: 760px;
}

.blog-list {
  max-width: 1100px;
}

/* ---- 記事：頭の部分 ------------------------------------------------------- */
.blog-breadcrumb {
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}
.blog-breadcrumb a {
  color: var(--ari-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-category-label {
  display: inline-block;
  margin-top: 20px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--ari-bg-soft);
  color: var(--ari-accent-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.blog-article-title {
  margin-top: 12px;
  font-size: max(1.6rem, calc(var(--font-size-heading) * 0.8));
  font-weight: 800;
  line-height: 1.45;
  color: var(--ari-navy);
  text-wrap: balance;
}

.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 16px;
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}
.blog-article-author {
  font-weight: 700;
  color: var(--ari-ink);
}

.blog-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.blog-tag {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--ari-line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--ari-ink-2);
}
.blog-tag::before {
  content: "#";
  margin-right: 2px;
}

/* ---- 記事：アイキャッチ画像 ------------------------------------------------ */
.blog-eyecatch {
  margin-top: 28px;
}
.blog-eyecatch img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ---- 記事：カスタム項目（開催日・会場など。項目名と値の表） ---------------- */
.blog-custom-fields {
  margin-top: 28px;
  border-top: 1px solid var(--ari-line);
}
.blog-custom-field {
  display: grid;
  grid-template-columns: minmax(6em, 28%) 1fr;
  gap: 4px 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--ari-line);
}
.blog-custom-label {
  font-weight: 700;
  color: var(--ari-ink);
}
.blog-custom-value {
  min-width: 0;
  color: var(--ari-ink);
  overflow-wrap: anywhere;
}
.blog-custom-value a {
  color: var(--ari-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-custom-line {
  display: block;
}
.blog-custom-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
@media (max-width: 560px) {
  .blog-custom-field {
    grid-template-columns: 1fr;
  }
}

/* ---- 記事：本文 ---------------------------------------------------------- */
/*
 * 本文が出す要素（p / h2-h4 / ul / ol / blockquote / a / img。RichText.tsx）にだけ当てる。
 * 本文の直下の要素に限る（> を付ける）。本文の段落のあいだには部品（.blog-embed。ArticleBody.tsx）が入るので、
 * 子孫まで当てると、部品の中の見出し・リスト・ボタン（a）にまで、本文の線・下線・色が付いてしまう。
 */
.blog-body {
  margin-top: 32px;
  font-size: var(--font-size-body);
  line-height: 1.9;
  color: var(--ari-ink);
  text-wrap: pretty;
  word-break: auto-phrase;
}
.blog-body > * + * {
  margin-top: 1.2em;
}
.blog-body > h2 {
  margin-top: 2.2em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--ari-line);
  font-size: max(1.25rem, calc(var(--font-size-heading) * 0.58));
  font-weight: 800;
  line-height: 1.5;
  color: var(--ari-navy);
}
.blog-body > h3 {
  margin-top: 1.8em;
  font-size: max(1.1rem, calc(var(--font-size-heading) * 0.46));
  font-weight: 700;
  line-height: 1.5;
  color: var(--ari-navy);
}
.blog-body > h4 {
  margin-top: 1.6em;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ari-navy);
}
.blog-body > ul,
.blog-body > ol {
  padding-left: 1.5em;
}
.blog-body > ul {
  list-style: disc;
}
.blog-body > ol {
  list-style: decimal;
}
.blog-body > ul > li + li,
.blog-body > ol > li + li {
  margin-top: 0.4em;
}
.blog-body > ul > li > p,
.blog-body > ol > li > p {
  margin: 0;
}
.blog-body > blockquote {
  padding: 12px 18px;
  border-left: 4px solid var(--ari-service, var(--ari-coral));
  background: var(--ari-bg-soft);
  color: var(--ari-ink-2);
}
.blog-body > blockquote > p + p {
  margin-top: 0.6em;
}
.blog-body > p a,
.blog-body > h2 a,
.blog-body > h3 a,
.blog-body > h4 a,
.blog-body > ul a,
.blog-body > ol a,
.blog-body > blockquote a {
  color: var(--ari-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-body > img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/*
 * 本文の部品（ArticleBody.tsx）。部品の中はページと同じ見た目（ページの骨格の中に置く）。
 * ここは、前後の文章との間隔と、本文の行の間隔・文字の折り返しを部品に持ち込まないことだけ。
 */
.blog-body > .blog-embed {
  margin-block: 2.4em;
  line-height: var(--line-height-body);
  text-wrap: wrap;
  word-break: normal;
}
.blog-body > .blog-embed:first-child {
  margin-top: 0;
}
.blog-body > .blog-embed:last-child {
  margin-bottom: 0;
}

/* ---- 記事：著者プロフィール ------------------------------------------------ */
.blog-author {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 56px;
  padding: 20px;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  background: var(--ari-bg-soft);
}
.blog-author-photo {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}
.blog-author-label {
  font-size: var(--fs-xs);
  color: var(--ari-ink-2);
}
.blog-author-name {
  margin-top: 2px;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--ari-navy);
}
.blog-author-title {
  font-size: var(--fs-sm);
  color: var(--ari-ink-2);
}
.blog-author-bio {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--ari-ink);
}

.blog-back {
  margin-top: 40px;
  font-size: var(--fs-sm);
}
.blog-back a {
  color: var(--ari-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 一覧：見出しと絞り込み ------------------------------------------------ */
.blog-list-header {
  margin-bottom: 24px;
}
.blog-list-title {
  font-size: max(1.8rem, var(--font-size-heading));
  font-weight: 800;
  line-height: 1.4;
  color: var(--ari-navy);
}
.blog-list-lead {
  margin-top: 8px;
  font-size: var(--fs-sm);
}
.blog-list-lead a {
  color: var(--ari-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.blog-filter a {
  display: inline-block;
  padding: 4px 16px;
  border: 1px solid var(--ari-line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--ari-ink);
}
.blog-filter a[aria-current="page"] {
  border-color: var(--ari-accent-fill);
  background: var(--ari-accent-fill);
  color: var(--ari-on-dark);
  font-weight: 700;
}

/* ---- 一覧：カード --------------------------------------------------------- */
.blog-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-card);
  background: var(--ari-bg-page);
  transition: border-color var(--transition);
}
.blog-card:hover {
  border-color: var(--ari-accent-edge);
}
.blog-card[data-current="true"] {
  border-color: var(--ari-accent-fill);
  box-shadow: 0 0 0 2px var(--ari-accent-fill);
}
.blog-card-image {
  display: block;
  aspect-ratio: 1200 / 630;
  background: var(--ari-bg-soft);
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card-noimage {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ari-grad-dawn);
  opacity: 0.35;
}
.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 20px;
}
.blog-card-category {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ari-accent-text);
}
.blog-card-title {
  margin-top: 6px;
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ari-navy);
}
.blog-card-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-card-excerpt {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--ari-ink-2);
}
.blog-card-date {
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--fs-xs);
  color: var(--ari-ink-2);
}

.blog-list-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--ari-ink-2);
}

/* ---- 一覧：ページ送り ----------------------------------------------------- */
.blog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  font-size: var(--fs-sm);
}
.blog-pager-pages {
  display: flex;
  gap: 8px;
}
.blog-pager-pages a,
.blog-pager-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--ari-line);
  border-radius: var(--radius-button);
  color: var(--ari-ink);
}
.blog-pager-current {
  border-color: var(--ari-accent-fill);
  background: var(--ari-accent-fill);
  color: var(--ari-on-dark);
  font-weight: 700;
}
.blog-pager-prev,
.blog-pager-next {
  min-width: 4.5em;
  color: var(--ari-accent-text);
}

/* ---- タブレット・スマホ --------------------------------------------------- */
@media (max-width: 1023px) {
  .blog-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .blog-card-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-author {
    flex-direction: column;
  }
  .blog-pager {
    gap: 8px;
  }
  .blog-pager-prev,
  .blog-pager-next {
    min-width: 0;
  }
}


/* theme: ariake-ai */

/* ============================================================================
 * themes/ariake-ai.css — テーマ「ありあけAI」固有の見た目
 * ----------------------------------------------------------------------------
 * 出どころ：Figma「ありあけAI」から作った HTML（design-html の common.css）。
 * テーマの値（色・書体・余白・角丸）はテーマ設定（themes.ts の ariakeAiSettings）が持つ。
 * ここに書くのは「値ではなく形」— 英字の小見出しの点、ボタンの矢印の丸、角の丸いセクション、
 * 青い帯の CTA など、設定の数字だけでは表せないもの。
 *
 * 決まり（themeCss.test.ts が確かめる）
 *   ・すべてのセレクタを .ariake-page[data-theme="ariake-ai"] から始める（ほかのテーマに効かない）
 *   ・CSS 変数を定義しない（色はテーマの変数 var(--ari-…) を使う）
 *   ・@import を書かない
 * 連結の順番は base.css → 部品の module.css → ここ（build-css.mjs）。同じ強さなら、ここが勝つ。
 *
 * 色の対応（Figma の変数 → テーマの変数）
 *   color/brand #2563eb → --ari-navy（primary）   color/brand-tint #dce8ff → --ari-blue（primaryLight）
 *   color/text #191919 → --ari-ink               color/text-body #2b2b2b → --ari-ink-2
 *   color/soft #f5f7fa → --ari-bg-soft            color/brand-subtle #eef4ff → --ari-coral-050（accentTint）
 *   color/border #e6eaf0 → --ari-line             白 → --ari-bg-page（面）・--ari-on-dark（青の上の文字）
 * ========================================================================== */

/* ------------------------------------------------------------------ 基本 */
.ariake-page[data-theme="ariake-ai"] {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: auto-phrase;
}
.ariake-page[data-theme="ariake-ai"] :focus-visible {
  outline: 3px solid var(--ari-navy);
  outline-offset: 3px;
}

/* 横の余白（Figma：スマホ 20px・タブレット 40px・PC は画面幅の 9%）と、中身の最大幅 1180px。
 * 余白は列の並び（row）が持ち、部品の .container は余白を重ねない。 */
.ariake-page[data-theme="ariake-ai"] .ariake-section > .ariake-row {
  box-sizing: border-box;
  padding-inline: 20px;
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.mw-normal > .ariake-row {
  max-width: 1220px;
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.mw-narrow > .ariake-row {
  max-width: 920px;
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.mw-wide > .ariake-row {
  max-width: 1480px;
}
.ariake-page[data-theme="ariake-ai"] .ariake-col .container {
  max-width: none;
  padding-inline: 0;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .ariake-section > .ariake-row {
    padding-inline: 40px;
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.mw-normal > .ariake-row {
    max-width: 1260px;
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.mw-narrow > .ariake-row {
    max-width: 960px;
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.mw-wide > .ariake-row {
    max-width: 1520px;
  }
}
@media (min-width: 1024px) {
  .ariake-page[data-theme="ariake-ai"] .ariake-section > .ariake-row {
    padding-inline: clamp(40px, 9.03vw, 130px);
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.mw-normal > .ariake-row {
    max-width: calc(1180px + clamp(40px, 9.03vw, 130px) * 2);
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.mw-narrow > .ariake-row {
    max-width: calc(880px + clamp(40px, 9.03vw, 130px) * 2);
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.mw-wide > .ariake-row {
    max-width: calc(1440px + clamp(40px, 9.03vw, 130px) * 2);
  }
}

/* ------------------------------------------------------------ セクションの背景 */
/* 薄いグレー・薄い青の面は、角を大きく丸める（Figma：40px → PC は 100px まで） */
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-soft,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-service,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn {
  border-radius: 40px;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-soft,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-service,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn {
    border-radius: clamp(40px, 6.94vw, 100px);
  }
}
/* 「夜明け」は、このテーマでは青一色の帯（最終CTAと同じ色） */
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn {
  background: var(--ari-navy);
  color: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .section-label,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .section-title,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .section-lead {
  color: var(--ari-on-dark);
}
/* 同じ背景が続いても、角の丸い面どうしは上の余白を半分にしない（面の切れ目が見えるため） */
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-soft + .ariake-section.bg-soft {
  margin-top: 24px;
}

/* 薄いグレーの面の直後に CTA の帯が来るとき（FAQ → 最終CTA）：面の下の角を丸めず、
 * 帯の上半分の後ろまで面の色を続ける（Figma の下層ページの最終CTA） */
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-soft:has(+ .ariake-section .story-mission) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-soft + .ariake-section:has(.story-mission) {
  background: linear-gradient(180deg, var(--ari-bg-soft) 50%, var(--ari-bg-page) 50%);
  padding-top: 0;
}

/* ------------------------------------------------------------------ 文字 */
.ariake-page[data-theme="ariake-ai"] .section-header {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .section-header {
    margin-bottom: 56px;
  }
}
/* 英字の小見出し：Outfit 16px・前に丸い点 */
.ariake-page[data-theme="ariake-ai"] .section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .section-label::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}
.ariake-page[data-theme="ariake-ai"] .section-title {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.ariake-page[data-theme="ariake-ai"] .section-title em {
  font-style: normal;
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .section-lead {
  max-width: 44em; /* 1行は全角 42 字前後まで（字間 0.05em 込み） */
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
}
/* 見出しの下の色の線は、このテーマでは使わない（Figma に無い） */
.ariake-page[data-theme="ariake-ai"] .grad-line {
  display: none;
}

/* ---------------------------------------------------------------- ボタン */
/* 丸いボタン＋右に白い丸の中の矢印。矢印の丸（::before）と矢印（::after）は
 * 文字の後ろに並べる（flex の order）。色はすべてテーマの変数なので、反転も変数の入れ替えだけ。 */
.ariake-page[data-theme="ariake-ai"] .btn {
  position: relative;
  gap: 14px;
  max-width: 100%;
  padding: 14px 12px 14px 30px;
  border: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transform: none;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.ariake-page[data-theme="ariake-ai"] .btn::before {
  content: "";
  order: 2;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ari-bg-page);
  transition: background-color 0.2s;
}
.ariake-page[data-theme="ariake-ai"] .btn::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 12px;
  height: 9px;
  margin-top: -4.5px;
  background: var(--ari-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5H10.5M7.2 7.8L10.5 4.5L7.2 1.2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5H10.5M7.2 7.8L10.5 4.5L7.2 1.2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color 0.2s;
}

/* 主ボタン：青い塗り（白地の上） */
.ariake-page[data-theme="ariake-ai"] .btn-primary {
  background: var(--ari-navy);
  box-shadow: inset 0 0 0 1.5px var(--ari-navy);
  color: var(--ari-on-dark);
}
/* 副ボタン：白地に青い枠（白地の上） */
.ariake-page[data-theme="ariake-ai"] .btn-outline,
.ariake-page[data-theme="ariake-ai"] .btn-outline-navy {
  background: var(--ari-bg-page);
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--ari-navy);
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .btn-outline::before,
.ariake-page[data-theme="ariake-ai"] .btn-outline-navy::before {
  background: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .btn-outline::after,
.ariake-page[data-theme="ariake-ai"] .btn-outline-navy::after {
  background: var(--ari-on-dark);
}

/* ホバー・キーボードで選んだとき：色を反転する（青い塗り ⇄ 白地に青い枠） */
@media (hover: hover) {
  .ariake-page[data-theme="ariake-ai"] .btn-primary:hover {
    background: var(--ari-bg-page);
    color: var(--ari-navy);
    transform: none;
  }
  .ariake-page[data-theme="ariake-ai"] .btn-primary:hover::before {
    background: var(--ari-navy);
  }
  .ariake-page[data-theme="ariake-ai"] .btn-primary:hover::after {
    background: var(--ari-on-dark);
  }
  .ariake-page[data-theme="ariake-ai"] .btn-outline:hover,
  .ariake-page[data-theme="ariake-ai"] .btn-outline-navy:hover {
    background: var(--ari-navy);
    color: var(--ari-on-dark);
    transform: none;
  }
  .ariake-page[data-theme="ariake-ai"] .btn-outline:hover::before,
  .ariake-page[data-theme="ariake-ai"] .btn-outline-navy:hover::before {
    background: var(--ari-bg-page);
  }
  .ariake-page[data-theme="ariake-ai"] .btn-outline:hover::after,
  .ariake-page[data-theme="ariake-ai"] .btn-outline-navy:hover::after {
    background: var(--ari-navy);
  }
}
.ariake-page[data-theme="ariake-ai"] .btn-primary:focus-visible {
  background: var(--ari-bg-page);
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .btn-primary:focus-visible::before {
  background: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .btn-primary:focus-visible::after {
  background: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .btn-outline:focus-visible {
  background: var(--ari-navy);
  color: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .btn-outline:focus-visible::before {
  background: var(--ari-bg-page);
}
.ariake-page[data-theme="ariake-ai"] .btn-outline:focus-visible::after {
  background: var(--ari-navy);
}

/* 青い帯（最終CTA・背景「夜明け」）の上：主ボタンは白い塗り、副ボタンは白い枠 */
.ariake-page[data-theme="ariake-ai"] .story-mission .btn-primary,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-primary {
  background: var(--ari-bg-page);
  box-shadow: none;
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .story-mission .btn-primary::before,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-primary::before {
  background: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .story-mission .btn-primary::after,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-primary::after {
  background: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .story-mission .btn-outline,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-outline {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ari-on-dark);
  color: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .story-mission .btn-outline::before,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-outline::before {
  background: var(--ari-bg-page);
}
.ariake-page[data-theme="ariake-ai"] .story-mission .btn-outline::after,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-outline::after {
  background: var(--ari-navy);
}
@media (hover: hover) {
  .ariake-page[data-theme="ariake-ai"] .story-mission .btn-primary:hover,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-primary:hover {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ari-on-dark);
    color: var(--ari-on-dark);
  }
  .ariake-page[data-theme="ariake-ai"] .story-mission .btn-primary:hover::before,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-primary:hover::before {
    background: var(--ari-bg-page);
  }
  .ariake-page[data-theme="ariake-ai"] .story-mission .btn-primary:hover::after,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-primary:hover::after {
    background: var(--ari-navy);
  }
  .ariake-page[data-theme="ariake-ai"] .story-mission .btn-outline:hover,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-outline:hover {
    background: var(--ari-bg-page);
    box-shadow: none;
    color: var(--ari-navy);
  }
  .ariake-page[data-theme="ariake-ai"] .story-mission .btn-outline:hover::before,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-outline:hover::before {
    background: var(--ari-navy);
  }
  .ariake-page[data-theme="ariake-ai"] .story-mission .btn-outline:hover::after,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn-outline:hover::after {
    background: var(--ari-on-dark);
  }
}
.ariake-page[data-theme="ariake-ai"] .story-mission .btn:focus-visible,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn .btn:focus-visible {
  outline-color: var(--ari-on-dark);
}

@media (max-width: 479px) {
  .ariake-page[data-theme="ariake-ai"] .btn {
    white-space: normal;
    text-align: left;
    padding-left: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ariake-page[data-theme="ariake-ai"] .btn,
  .ariake-page[data-theme="ariake-ai"] .btn::before,
  .ariake-page[data-theme="ariake-ai"] .btn::after {
    transition: none;
  }
}

/* --------------------------------------------------------- 最終CTA（cta 部品） */
/* 青い帯・大きな角丸・左上に淡い円（Figma の Final CTA） */
.ariake-page[data-theme="ariake-ai"] .story-mission {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: clamp(56px, 5.7vw, 82px) clamp(24px, 6vw, 80px) clamp(56px, 5.2vw, 75px);
  border-radius: 40px;
  background: var(--ari-navy);
  color: var(--ari-on-dark);
  text-align: left;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .story-mission {
    border-radius: clamp(40px, 6.94vw, 100px);
  }
}
.ariake-page[data-theme="ariake-ai"] .story-mission::before {
  content: "";
  position: absolute;
  left: -60px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.ariake-page[data-theme="ariake-ai"] .story-mission > * {
  position: relative;
}
.ariake-page[data-theme="ariake-ai"] .story-mission-lead {
  margin-bottom: 14px; /* セクションの英字の小見出しと同じ */
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .story-mission-text {
  font-size: var(--font-size-heading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .story-mission-sub {
  margin-top: 24px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .story-mission .hero-btns {
  justify-content: flex-start !important;
  gap: 16px;
}

/* ------------------------------------------------------------------- FAQ */
/* 白いカードを縦に並べる（Figma の FAQ。薄いグレーの面の上に置く想定） */
.ariake-page[data-theme="ariake-ai"] .faq {
  background: transparent;
}
.ariake-page[data-theme="ariake-ai"] .faq-list {
  gap: 14px;
  max-width: 880px;
}
.ariake-page[data-theme="ariake-ai"] .faq-item {
  border-bottom: 0;
  border-radius: 16px;
  background: var(--ari-bg-page);
}
.ariake-page[data-theme="ariake-ai"] .faq-question {
  align-items: center;
  gap: 16px;
  padding: 20px 28px 20px 24px;
}
.ariake-page[data-theme="ariake-ai"] .faq-q-badge {
  width: auto;
  height: auto;
  margin-top: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ari-navy);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .faq-q-text {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ari-ink);
}
.ariake-page[data-theme="ariake-ai"] .faq-chevron {
  margin-top: 0;
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .faq-answer {
  padding: 0 28px 22px 24px;
}
.ariake-page[data-theme="ariake-ai"] .faq-answer p {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--ari-ink-2);
}
@media (max-width: 479px) {
  .ariake-page[data-theme="ariake-ai"] .faq-question {
    gap: 12px;
    padding: 16px;
  }
  .ariake-page[data-theme="ariake-ai"] .faq-answer {
    padding: 0 16px 18px;
  }
}

/* --------------------------------------------------------------- ヘッダー */
/* 白地・ロゴ・中央のメニュー・電話番号・小さい主ボタン（Figma の Header）。
 * 1200px 未満はメニューボタン（丸・薄い青）にする（部品の既定は 900px） */
.ariake-page[data-theme="ariake-ai"] .header {
  box-shadow: none;
}
.ariake-page[data-theme="ariake-ai"] .header-inner {
  max-width: none;
  min-height: 64px;
  padding: 10px 20px;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .header-inner {
    padding-inline: 40px;
  }
}
.ariake-page[data-theme="ariake-ai"] .header-logo-img {
  height: auto;
  width: clamp(160px, 15.6vw, 225px);
  max-width: none;
}
.ariake-page[data-theme="ariake-ai"] .header-logo-text {
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .header-nav {
  flex: 0 1 auto;
  justify-content: center;
}
.ariake-page[data-theme="ariake-ai"] .header-nav-list {
  gap: 24px;
}
.ariake-page[data-theme="ariake-ai"] .header-link {
  padding: 10px 0;
  font-size: 1rem;
  /* 2026-10-30 ユーザーの要望で太く（500 → 700） */
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ari-ink-2);
}
.ariake-page[data-theme="ariake-ai"] .header-link:hover {
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .header-actions {
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.ariake-page[data-theme="ariake-ai"] .header-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ari-ink-2);
}
.ariake-page[data-theme="ariake-ai"] .header-actions .header-cta {
  display: inline-flex;
  gap: 10px;
  min-height: 44px;
  padding: 10px 10px 10px 22px;
  font-size: 0.875rem;
}
.ariake-page[data-theme="ariake-ai"] .header-actions .header-cta::before {
  width: 22px;
  height: 22px;
}
.ariake-page[data-theme="ariake-ai"] .header-actions .header-cta::after {
  right: 16px;
  width: 10px;
  height: 7.5px;
  margin-top: -3.75px;
}
.ariake-page[data-theme="ariake-ai"] .header-toggle {
  border-radius: 50%;
  background: var(--ari-coral-050);
}
.ariake-page[data-theme="ariake-ai"] .header-toggle-icon {
  width: 18px;
}
.ariake-page[data-theme="ariake-ai"] .header-menu {
  border-top: 1px solid var(--ari-line);
  box-shadow: 0 16px 24px color-mix(in srgb, var(--ari-navy) 8%, transparent);
}
.ariake-page[data-theme="ariake-ai"] .header-menu-item + .header-menu-item {
  border-top-color: var(--ari-line);
}
.ariake-page[data-theme="ariake-ai"] .header-menu-link {
  font-weight: 700;
  color: var(--ari-ink-2);
}
.ariake-page[data-theme="ariake-ai"] .header-menu-tel .header-menu-link {
  font-family: var(--font-accent);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.ariake-page[data-theme="ariake-ai"] .header-menu-btn {
  display: inline-flex;
}
@media (max-width: 1199px) {
  .ariake-page[data-theme="ariake-ai"] .header-nav,
  .ariake-page[data-theme="ariake-ai"] .header-actions {
    display: none;
  }
  .ariake-page[data-theme="ariake-ai"] .header-more {
    display: block;
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .ariake-page[data-theme="ariake-ai"] .header-inner {
    justify-content: center;
    gap: clamp(32px, 5.56vw, 80px);
    padding: 20px 24px;
  }
}

/* --------------------------------------------------------------- フッター */
/* 白地。上に区切り線、ロゴと説明・リンクの列・下の段（Figma の Footer） */
.ariake-page[data-theme="ariake-ai"] .footer {
  padding: 0 20px;
  background: var(--ari-bg-page);
  color: var(--ari-ink);
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .footer {
    padding-inline: 40px;
  }
}
@media (min-width: 1024px) {
  .ariake-page[data-theme="ariake-ai"] .footer {
    padding-inline: clamp(40px, 9.03vw, 130px);
  }
}
.ariake-page[data-theme="ariake-ai"] .footer-inner {
  max-width: 1180px;
  padding-top: 48px;
  border-top: 1px solid var(--ari-line);
}
@media (min-width: 1024px) {
  .ariake-page[data-theme="ariake-ai"] .footer-inner {
    padding-top: 64px;
  }
}
.ariake-page[data-theme="ariake-ai"] .footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 20px;
  padding-bottom: 0;
  border-bottom: 0;
}
@media (min-width: 1024px) {
  .ariake-page[data-theme="ariake-ai"] .footer-top {
    grid-template-columns: 415fr 760fr;
  }
}
.ariake-page[data-theme="ariake-ai"] .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 330px;
}
.ariake-page[data-theme="ariake-ai"] .footer-brand:has(.footer-logo-light) .footer-logo-dark {
  display: none;
}
.ariake-page[data-theme="ariake-ai"] .footer-logo-light {
  display: block;
}
.ariake-page[data-theme="ariake-ai"] .footer-logo-img {
  width: 225px;
  height: auto;
  max-width: 100%;
  margin-bottom: 0;
}
.ariake-page[data-theme="ariake-ai"] .footer-logo-text {
  margin-bottom: 0;
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .footer-description {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ari-ink);
}
.ariake-page[data-theme="ariake-ai"] .footer-description-line + .footer-description-line {
  margin-top: 16px;
}
.ariake-page[data-theme="ariake-ai"] .footer-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 20px;
}
/* 列は3つまで（サービス／知る・相談する／会社・規約。ローカル版 2026-10-30 の common.css と同じ） */
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .footer-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ariake-page[data-theme="ariake-ai"] .footer-group-title {
  margin-bottom: 18px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--ari-ink);
}
/* リンクの押せる面は縦 41px（デザインレビュー第1回 B7）。行の間のすき間（以前は 12px）は、リンクの上下の余白 10px ずつでとる */
.ariake-page[data-theme="ariake-ai"] .footer-links {
  gap: 0;
  padding-left: 4px;
}
/* 見出しの下の項目は、点を付けて一段下げる（ローカル版 2026-10-16〜） */
.ariake-page[data-theme="ariake-ai"] .footer-links-item {
  position: relative;
  padding-left: 18px;
}
.ariake-page[data-theme="ariake-ai"] .footer-links-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(12px + 0.62em);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ari-navy);
  opacity: 0.55;
}
@media (min-width: 1280px) {
  .ariake-page[data-theme="ariake-ai"] .footer-link {
    white-space: nowrap;
  }
}
.ariake-page[data-theme="ariake-ai"] .footer-link {
  padding: 12px 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ari-ink);
}
.ariake-page[data-theme="ariake-ai"] .footer-link:hover,
.ariake-page[data-theme="ariake-ai"] .footer-info-link:hover,
.ariake-page[data-theme="ariake-ai"] .footer-sns-link:hover,
.ariake-page[data-theme="ariake-ai"] .footer-legal-link:hover {
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .footer-info {
  margin-top: 40px;
  padding: 18px 0 0;
  border-top: 1px solid var(--ari-line);
}
.ariake-page[data-theme="ariake-ai"] .footer-info-item,
.ariake-page[data-theme="ariake-ai"] .footer-sns-link,
.ariake-page[data-theme="ariake-ai"] .footer-legal-link,
.ariake-page[data-theme="ariake-ai"] .footer-copy {
  font-size: 0.875rem;
  color: var(--ari-ink);
}
.ariake-page[data-theme="ariake-ai"] .footer-sns {
  gap: 0 24px;
}
.ariake-page[data-theme="ariake-ai"] .footer-bottom {
  margin-top: 18px;
  padding: 18px 0 24px;
  border-top: 1px solid var(--ari-line);
}
.ariake-page[data-theme="ariake-ai"] .footer-legal-link {
  text-decoration: none;
}

/* ------------------------------------------------- 最終CTAの帯は、画面の横幅いっぱい */
/* Figma の Final CTA は、セクションそのものが青い帯（左右の余白なし・大きな角丸）。
 * 帯を持つセクションだけ、列の並びの最大幅と横の余白を外し、帯の内側の余白で中身を 1180px にそろえる。
 * 下の余白も無くして、すぐ下にフッターが来るようにする。 */
.ariake-page[data-theme="ariake-ai"] .ariake-section:has(.story-mission) {
  padding-bottom: 0;
}
.ariake-page[data-theme="ariake-ai"] .ariake-section:has(.story-mission) > .ariake-row {
  max-width: none;
  padding-inline: 0;
}
.ariake-page[data-theme="ariake-ai"] .ariake-section .story-mission {
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .ariake-section .story-mission {
    padding-inline: 40px;
  }
}
@media (min-width: 1024px) {
  .ariake-page[data-theme="ariake-ai"] .ariake-section .story-mission {
    padding-inline: max(clamp(40px, 9.03vw, 130px), calc((100% - 1180px) / 2));
  }
}

/* 最終CTAの英字の小見出しにも、丸い点を付ける（.section-label と同じ形） */
.ariake-page[data-theme="ariake-ai"] .story-mission-lead {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ariake-page[data-theme="ariake-ai"] .story-mission-lead::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}
/* FAQ の開閉の印：Figma は ＋／－（下向きの矢印は使わない） */
.ariake-page[data-theme="ariake-ai"] .faq-chevron {
  display: none;
}
.ariake-page[data-theme="ariake-ai"] .faq-question::after {
  content: "＋";
  flex: none;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .faq-item.open .faq-question::after {
  content: "－";
}

/* 明るい背景用のロゴがあれば、サイト名の文字は出さない（ロゴと名前が2つ並ばないように） */
.ariake-page[data-theme="ariake-ai"] .footer-brand:has(.footer-logo-light) .footer-logo-text {
  display: none;
}

/* ボタンが横いっぱいに伸びたときも、矢印の丸を右端に置く（矢印（::after）は右端からの位置で描いているため） */
.ariake-page[data-theme="ariake-ai"] .btn {
  justify-content: space-between;
}
/* スマホでボタンを縦に並べるときも、横いっぱいに伸ばさない（Figma は文字の長さのまま、左にそろえる） */
@media (max-width: 767px) {
  .ariake-page[data-theme="ariake-ai"] .hero-btns {
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------------ 問い合わせフォーム（contact-form） */
/* Figma の入力欄に合わせて、丸みを強く・地を薄い灰に。焦点はブランドの青のリング（キーボードでも見える濃さ）。 */
.ariake-page[data-theme="ariake-ai"] .contact-form-input {
  padding: 14px 18px;
  border-radius: 12px;
  /* 枠は、白の上で 3:1 以上（デザインレビュー第1回 B1）。このテーマは文字色が濃いので、混ぜる割合は 55%（#8a8a8a ほど・3.4:1）。
   * 部品の既定（75%）だと、Figma のやわらかい見た目より黒く見える */
  border-color: color-mix(in srgb, var(--ari-ink-2) 55%, var(--ari-bg-page));
  background: var(--ari-bg-soft);
}
/* ホバーは主の色で、さらに濃くする */
.ariake-page[data-theme="ariake-ai"] .contact-form-input:hover {
  border-color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .contact-form-input:focus {
  border-color: var(--ari-navy);
  background: var(--ari-bg-page);
  box-shadow: 0 0 0 4px var(--ari-blue);
}
.ariake-page[data-theme="ariake-ai"] .contact-form-input:focus-visible {
  outline: 2px solid var(--ari-navy);
  outline-offset: 2px;
}
.ariake-page[data-theme="ariake-ai"] .contact-form-badge--required {
  background: var(--ari-navy);
  border-color: var(--ari-navy);
}
.ariake-page[data-theme="ariake-ai"] .contact-form-choice input {
  accent-color: var(--ari-navy);
}
/* 送信できた（緑）・できなかった（赤）の色は contact-form/module.css。ここでは角の丸みだけ合わせる */
.ariake-page[data-theme="ariake-ai"] .contact-form-done,
.ariake-page[data-theme="ariake-ai"] .contact-form-error {
  border-radius: 24px;
}
.ariake-page[data-theme="ariake-ai"] .contact-form-privacy {
  color: var(--ari-navy);
}
/* 確認画面の「修正する」は入力へ戻るボタン：矢印を左に置き、左向きにする */
.ariake-page[data-theme="ariake-ai"] .contact-form-confirm-edit {
  padding: 14px 30px 14px 12px;
}
.ariake-page[data-theme="ariake-ai"] .contact-form-confirm-edit::before {
  order: -1;
}
.ariake-page[data-theme="ariake-ai"] .contact-form-confirm-edit::after {
  right: auto;
  left: 20px;
  transform: rotate(180deg);
}

/* 白い背景のセクションに置いた FAQ は、カードを薄いグレーにする（白い面の上の白いカードは見えない。Figma のパートナーの FAQ） */
.ariake-page[data-theme="ariake-ai"] .ariake-section:not(.bg-soft):not(.bg-service):not(.bg-dawn) .faq-item {
  background: var(--ari-bg-soft);
}

/* ------------------------------------------------ テーマの3色（背景・ボタンの色） */
/* ブロックの背景にテーマの3色を選んだとき。うすい背景・濃い背景とも、薄いグレーの面と同じ丸い面にする。
 * 濃い背景は「夜明け」と同じ扱い（白い見出し・白地の主ボタン）。色は --pal-bg（base.css が背景ごとに入れる）。 */
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main-tint,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub-tint,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent-tint,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-tint {
  border-radius: 40px;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main-tint,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub-tint,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent-tint,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-tint {
    border-radius: clamp(40px, 6.94vw, 100px);
  }
}
/* 同じ背景が続いても、角の丸い面どうしは、上の余白を半分にしない（面の切れ目が見えるため） */
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main + .ariake-section.bg-main,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub + .ariake-section.bg-sub,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent + .ariake-section.bg-accent,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main-tint + .ariake-section.bg-main-tint,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub-tint + .ariake-section.bg-sub-tint,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent-tint + .ariake-section.bg-accent-tint {
  margin-top: 24px;
}
/* 濃い背景の上：主ボタンは白い塗り（矢印の丸は背景の色）、副ボタンは白い枠 */
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-primary,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-primary,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-primary,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-primary {
  background: var(--ari-bg-page);
  box-shadow: none;
  color: var(--pal-bg);
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-primary::before,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-primary::before,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-primary::before,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-primary::before {
  background: var(--pal-bg);
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-primary::after,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-primary::after,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-primary::after,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-primary::after {
  background: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-outline,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-outline,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-outline,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-outline {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ari-on-dark);
  color: var(--ari-on-dark);
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-outline::before,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-outline::before,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-outline::before,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-outline::before {
  background: var(--ari-bg-page);
}
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-outline::after,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-outline::after,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-outline::after,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-outline::after {
  background: var(--pal-bg);
}
@media (hover: hover) {
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-primary:hover,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-primary:hover,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-primary:hover,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-primary:hover {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ari-on-dark);
    color: var(--ari-on-dark);
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-primary:hover::before,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-primary:hover::before,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-primary:hover::before,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-primary:hover::before {
    background: var(--ari-bg-page);
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-primary:hover::after,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-primary:hover::after,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-primary:hover::after,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-primary:hover::after {
    background: var(--pal-bg);
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-outline:hover,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-outline:hover,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-outline:hover,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-outline:hover {
    background: var(--ari-bg-page);
    box-shadow: none;
    color: var(--pal-bg);
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-outline:hover::before,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-outline:hover::before,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-outline:hover::before,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-outline:hover::before {
    background: var(--pal-bg);
  }
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main .btn-outline:hover::after,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub .btn-outline:hover::after,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent .btn-outline:hover::after,
  .ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill .btn-outline:hover::after {
    background: var(--ari-on-dark);
  }
}

/* ================================================================== 動き
 * 出どころ：ローカル版（2026-10-30）の common/motion.css・motion.js。部品のクラス名に置き換えた。
 *   1. 最初の画面（page-intro・hub-intro）… 文字が順に浮かぶ。絵がふわっと出て、ゆっくり浮遊する（CSS だけ）
 *   2. セクション … スクロールで、見出し・カード・画像が下から順に出る（site.js が .reveal を付ける）
 *   3. ステップ・登場人物 … 線が伸びる・番号が出る／人物が順に立ち上がる（site.js が .is-in を付ける）
 *   4. 最終CTA … 吹き出しがポップに出る。円がゆっくり脈打つ
 *   5. ホバー … ボタンの矢印が進む／カードが浮く／メニューの下線
 *   6. ヘッダー … スクロールすると影（site.js が .is-scrolled）。スマホのメニューはなめらかに開く
 *   7. FAQ … 答えが開くとき、なめらかに出る
 * 隠しておく指定は、site.js が .ariake-page に .is-motion を付けたときだけ効く（JavaScript が動かない・
 * 「視差効果を減らす」がオンのときは、最初から全部見える）。動かすのは opacity と transform だけ。
 * ================================================================== */

@keyframes ariake-ai-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes ariake-ai-pop-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes ariake-ai-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes ariake-ai-ring-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes ariake-ai-drop-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- 1. 最初の画面 */
.ariake-page[data-theme="ariake-ai"] .page-intro-text > *,
.ariake-page[data-theme="ariake-ai"] .hub-intro-text > * {
  animation: ariake-ai-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-text > :nth-child(2),
.ariake-page[data-theme="ariake-ai"] .hub-intro-text > :nth-child(2) {
  animation-delay: 0.2s;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-text > :nth-child(3),
.ariake-page[data-theme="ariake-ai"] .hub-intro-text > :nth-child(3) {
  animation-delay: 0.3s;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-text > :nth-child(4),
.ariake-page[data-theme="ariake-ai"] .hub-intro-text > :nth-child(4) {
  animation-delay: 0.4s;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-text > :nth-child(n + 5),
.ariake-page[data-theme="ariake-ai"] .hub-intro-text > :nth-child(n + 5) {
  animation-delay: 0.5s;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-visual,
.ariake-page[data-theme="ariake-ai"] .hub-intro-visual {
  animation: ariake-ai-pop-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
/* 出きったあと、ゆっくり浮遊する（目立たせすぎない） */
.ariake-page[data-theme="ariake-ai"] .page-intro-illust {
  animation: ariake-ai-float-y 8s ease-in-out 1.4s infinite;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-chip {
  animation: ariake-ai-float-y 6s ease-in-out infinite;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-chip-n1 { animation-delay: -1.2s; }
.ariake-page[data-theme="ariake-ai"] .page-intro-chip-n2 { animation-delay: -3.1s; }
.ariake-page[data-theme="ariake-ai"] .page-intro-chip-n3 { animation-delay: -4.6s; }
.ariake-page[data-theme="ariake-ai"] .page-intro-dot {
  animation: ariake-ai-float-y 7s ease-in-out infinite;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-dot-n1 { animation-delay: -0.8s; }
.ariake-page[data-theme="ariake-ai"] .page-intro-dot-n2 { animation-delay: -2.6s; }
.ariake-page[data-theme="ariake-ai"] .page-intro-dot-n3 { animation-delay: -4.2s; }
.ariake-page[data-theme="ariake-ai"] .page-intro-dot-n4 { animation-delay: -5.5s; }
.ariake-page[data-theme="ariake-ai"] .page-intro-orb {
  animation: ariake-ai-float-y 10s ease-in-out infinite;
}
.ariake-page[data-theme="ariake-ai"] .page-intro-orb-n2 { animation-delay: -3s; }
.ariake-page[data-theme="ariake-ai"] .page-intro-orb-n3 { animation-delay: -6s; }

/* ----------------------------------------------- 2. スクロールで表示 */
/* .reveal は site.js が付け、出きったら外す（ホバーの動きと喧嘩しないため）。遅れ（--reveal-delay）も site.js が入れる */
.ariake-page[data-theme="ariake-ai"].is-motion .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.ariake-page[data-theme="ariake-ai"].is-motion .reveal.is-in {
  opacity: 1;
  transform: none;
}
/* 隠す状態に切り替える瞬間は動かさない（一瞬見えてから消えるのを防ぐ。site.js が次のフレームで外す） */
.ariake-page[data-theme="ariake-ai"].is-motion .reveal.reveal--init {
  transition: none;
}

/* ------------------------------------------- 3. ステップ・登場人物 */
.ariake-page[data-theme="ariake-ai"] .steps-item:not(:last-child)::after {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ariake-page[data-theme="ariake-ai"] .steps-no {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.ariake-page[data-theme="ariake-ai"] .steps-name,
.ariake-page[data-theme="ariake-ai"] .steps-desc {
  transition: opacity 0.6s ease;
}
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(1)::after { transition-delay: 0.25s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(2)::after { transition-delay: 0.45s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(3)::after { transition-delay: 0.65s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(4)::after { transition-delay: 0.85s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(n + 5)::after { transition-delay: 1.05s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(1) .steps-no { transition-delay: 0.2s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(2) .steps-no { transition-delay: 0.34s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(3) .steps-no { transition-delay: 0.48s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(4) .steps-no { transition-delay: 0.62s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(n + 5) .steps-no { transition-delay: 0.76s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(1) .steps-name,
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(1) .steps-desc { transition-delay: 0.35s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(2) .steps-name,
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(2) .steps-desc { transition-delay: 0.49s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(3) .steps-name,
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(3) .steps-desc { transition-delay: 0.63s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(4) .steps-name,
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(4) .steps-desc { transition-delay: 0.77s; }
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(n + 5) .steps-name,
.ariake-page[data-theme="ariake-ai"] .steps-item:nth-child(n + 5) .steps-desc { transition-delay: 0.91s; }
.ariake-page[data-theme="ariake-ai"].is-motion .steps:not(.is-in) .steps-item::after {
  transform: scaleY(0);
  transform-origin: top center;
}
@media (min-width: 768px) {
  .ariake-page[data-theme="ariake-ai"].is-motion .steps:not(.is-in) .steps-item::after {
    transform: scaleX(0);
    transform-origin: left center;
  }
}
.ariake-page[data-theme="ariake-ai"].is-motion .steps:not(.is-in) .steps-no {
  opacity: 0;
  transform: scale(0.5);
}
.ariake-page[data-theme="ariake-ai"].is-motion .steps:not(.is-in) .steps-name,
.ariake-page[data-theme="ariake-ai"].is-motion .steps:not(.is-in) .steps-desc {
  opacity: 0;
}

/* 登場人物：下から順に立ち上がる */
.ariake-page[data-theme="ariake-ai"] .cast-cta-person {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ariake-page[data-theme="ariake-ai"] .cast-cta-person:nth-child(2) { transition-delay: 0.09s; }
.ariake-page[data-theme="ariake-ai"] .cast-cta-person:nth-child(3) { transition-delay: 0.18s; }
.ariake-page[data-theme="ariake-ai"] .cast-cta-person:nth-child(4) { transition-delay: 0.27s; }
.ariake-page[data-theme="ariake-ai"] .cast-cta-person:nth-child(5) { transition-delay: 0.36s; }
.ariake-page[data-theme="ariake-ai"] .cast-cta-person:nth-child(6) { transition-delay: 0.45s; }
.ariake-page[data-theme="ariake-ai"] .cast-cta-person:nth-child(n + 7) { transition-delay: 0.54s; }
.ariake-page[data-theme="ariake-ai"].is-motion .cast-cta:not(.is-in) .cast-cta-person {
  opacity: 0;
  transform: translateY(34px);
}

/* ------------------------------------------------------ 4. 最終CTA */
.ariake-page[data-theme="ariake-ai"] .cta-figure-ring {
  animation: ariake-ai-ring-pulse 6s ease-in-out infinite;
}
.ariake-page[data-theme="ariake-ai"] .cta-figure-halo {
  animation: ariake-ai-ring-pulse 6s ease-in-out -2s infinite;
}
/* 吹き出し：CTA が見えたとき（.fade-in に .visible が付いたとき）にポップに出る */
.ariake-page[data-theme="ariake-ai"] .cta-figure-bubble {
  transition: opacity 0.4s ease 0.5s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}
.ariake-page[data-theme="ariake-ai"].is-motion .fade-in:not(.visible) .cta-figure-bubble {
  opacity: 0;
  transform: scale(0.6) translateY(10px);
}

/* ----------------------------------------------------------- 5. ホバー */
.ariake-page[data-theme="ariake-ai"] .btn::after {
  transition: background-color 0.2s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .ariake-page[data-theme="ariake-ai"] .btn:hover::after {
    transform: translateX(3px);
  }
  /* 事例のカード（case-cards）は浮かせない。絵の下に文字が出るだけの形なので、影を付けると白い枠に見える（2026-10-30 ユーザーの指摘） */
  .ariake-page[data-theme="ariake-ai"] .app-cards-item,
  .ariake-page[data-theme="ariake-ai"] .point-cards-card,
  .ariake-page[data-theme="ariake-ai"] .index-cards-card,
  .ariake-page[data-theme="ariake-ai"] .media-text-tile,
  .ariake-page[data-theme="ariake-ai"] .media-text-card,
  .ariake-page[data-theme="ariake-ai"] .company-intro-tile {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ariake-page[data-theme="ariake-ai"] .app-cards-item:hover,
  .ariake-page[data-theme="ariake-ai"] .point-cards-card:hover,
  .ariake-page[data-theme="ariake-ai"] .index-cards-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--ari-navy) 10%, transparent);
  }
  .ariake-page[data-theme="ariake-ai"] .media-text-tile:hover,
  .ariake-page[data-theme="ariake-ai"] .media-text-card:hover,
  .ariake-page[data-theme="ariake-ai"] .company-intro-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--ari-navy) 10%, transparent);
  }
}
/* PC のメニュー：いま見ているページには、青い下線と青い文字を常に出す（site.js が aria-current="page" を付ける）。
 * ほかのメニューは、カーソルを当てると下線が左から伸びる */
@media (min-width: 1200px) {
  .ariake-page[data-theme="ariake-ai"] .header-link {
    position: relative;
  }
  .ariake-page[data-theme="ariake-ai"] .header-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 3px;
    border-radius: 2px;
    background: var(--ari-navy);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ariake-page[data-theme="ariake-ai"] .header-link[aria-current="page"] {
    color: var(--ari-navy);
  }
  .ariake-page[data-theme="ariake-ai"] .header-link[aria-current="page"]::after {
    transform: scaleX(1);
  }
}
@media (hover: hover) and (min-width: 1200px) {
  .ariake-page[data-theme="ariake-ai"] .header-link:hover::after {
    transform: scaleX(1);
  }
}
/* スマホのメニュー：いま見ているページは青い文字 */
.ariake-page[data-theme="ariake-ai"] .header-menu-link[aria-current="page"] {
  color: var(--ari-navy);
}

/* -------------------------------------------------------- 6. ヘッダー */
.ariake-page[data-theme="ariake-ai"] .header {
  transition: box-shadow 0.3s ease;
}
.ariake-page[data-theme="ariake-ai"] .header.is-scrolled {
  box-shadow: 0 2px 18px color-mix(in srgb, var(--ari-navy) 8%, transparent);
}
/* スマホのメニュー：開くとき、上から少しずれて出る */
.ariake-page[data-theme="ariake-ai"] .header-more[open] .header-menu {
  animation: ariake-ai-drop-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------ 7. FAQ */
.ariake-page[data-theme="ariake-ai"] .faq-item {
  transition: box-shadow 0.3s ease;
}
.ariake-page[data-theme="ariake-ai"] .faq-item.open {
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ari-navy) 8%, transparent);
}
.ariake-page[data-theme="ariake-ai"] .faq-item.open .faq-answer {
  animation: ariake-ai-drop-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------ 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .ariake-page[data-theme="ariake-ai"] .page-intro-text > *,
  .ariake-page[data-theme="ariake-ai"] .hub-intro-text > *,
  .ariake-page[data-theme="ariake-ai"] .page-intro-visual,
  .ariake-page[data-theme="ariake-ai"] .hub-intro-visual,
  .ariake-page[data-theme="ariake-ai"] .page-intro-illust,
  .ariake-page[data-theme="ariake-ai"] .page-intro-chip,
  .ariake-page[data-theme="ariake-ai"] .page-intro-dot,
  .ariake-page[data-theme="ariake-ai"] .page-intro-orb,
  .ariake-page[data-theme="ariake-ai"] .cta-figure-ring,
  .ariake-page[data-theme="ariake-ai"] .cta-figure-halo,
  .ariake-page[data-theme="ariake-ai"] .header-more[open] .header-menu,
  .ariake-page[data-theme="ariake-ai"] .faq-item.open .faq-answer {
    animation: none;
  }
}

/* ------------------------------------------ 濃い背景の上のフォーカス */
/* 全体のフォーカスの輪は主の色（青）。テーマの3色の濃い背景・夜明けの背景の上では、青い面に溶けて見えない
 * （WCAG 2.4.7）ので、濃い面の上の文字色（白）にする。ボタンは上の .story-mission・.bg-dawn と同じ */
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-dawn :focus-visible,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-main :focus-visible,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-sub :focus-visible,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-accent :focus-visible,
.ariake-page[data-theme="ariake-ai"] .ariake-section.bg-pal-fill :focus-visible {
  outline-color: var(--ari-on-dark);
}

/* ------------------------------------------------------- 印刷・PDF 保存 */
/* スクロールで出る動き（.reveal・ステップ・人物・最終CTAの吹き出し）は、まだスクロールしていない所だと、
 * 透明・縮んだままの状態で印刷されてしまう。印刷では、動きの途中の状態を残さず、全部を見せる（QA public-ui B-05） */
@media print {
  .ariake-page[data-theme="ariake-ai"] .reveal,
  .ariake-page[data-theme="ariake-ai"] .steps .steps-no,
  .ariake-page[data-theme="ariake-ai"] .steps .steps-name,
  .ariake-page[data-theme="ariake-ai"] .steps .steps-desc,
  .ariake-page[data-theme="ariake-ai"] .cast-cta .cast-cta-person,
  .ariake-page[data-theme="ariake-ai"] .fade-in .cta-figure-bubble {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ariake-page[data-theme="ariake-ai"] .steps .steps-item::after {
    transform: none !important;
    transition: none !important;
  }
}

/* ===================================================== 見やすさの整え（版 8）
 * 『ノンデザイナーズ・デザインブック』の4原則（近接・整列・反復・コントラスト）で整えた分。
 * 色の系統・書体・Figma の構成は変えない。値の決まりは次のとおり。
 *   近接：英字の小見出し → 見出し 14px ＜ 見出し → リード 22px ＜ 見出しの塊 → 中身 40/56px ＜ セクションの間
 *   整列：スマホ（767px 以下）では、中央揃えの見出しも左揃えにして、下のカード・本文と左の線をそろえる
 *   反復：見出しの塊の間隔を、セクション見出し・画像と文章・人物の CTA で同じにする
 *   読みやすさ：本文の行間 1.8・リードの1行は全角 42 字前後まで・押せる所は高さ 44px 以上・小さい文字は 12px 以上
 * ========================================================================== */

/* ---- 近接・反復：見出しの塊の中の間隔を、どの部品でも同じにする ---- */
/* セクション見出し部品は gap で並べていた（小見出しの余白と足されて 36px になっていた） */
.ariake-page[data-theme="ariake-ai"] .section-heading {
  gap: 0;
}
.ariake-page[data-theme="ariake-ai"] .section-heading .section-label {
  margin-bottom: 14px;
}
.ariake-page[data-theme="ariake-ai"] .section-heading .section-heading-sub {
  margin-bottom: 8px;
}
/* 見出し → リードは 22px（画像と文章・人物の CTA の部品と同じ値） */
.ariake-page[data-theme="ariake-ai"] .section-heading .section-title + .section-lead {
  margin-top: 22px;
}

/* ---- 読みやすさ：リードの1行は全角 42 字前後まで（max-width は上の「文字」で）。中央揃えの見出しでは真ん中に置く ---- */
.ariake-page[data-theme="ariake-ai"] .section-header.center .section-lead,
.ariake-page[data-theme="ariake-ai"] .section-heading--center .section-lead {
  margin-inline: auto;
}
.ariake-page[data-theme="ariake-ai"] .check-list-text,
.ariake-page[data-theme="ariake-ai"] .option-items-item,
.ariake-page[data-theme="ariake-ai"] .plan-cards-note {
  line-height: 1.7;
}

/* ---- 整列：スマホでは見出しも左揃え（下のカード・本文と左の線をそろえる） ---- */
@media (max-width: 767px) {
  .ariake-page[data-theme="ariake-ai"] .section-heading--center {
    align-items: flex-start;
    text-align: left;
  }
  .ariake-page[data-theme="ariake-ai"] .section-header.center {
    text-align: left;
  }
  .ariake-page[data-theme="ariake-ai"] .section-header.center .section-lead,
  .ariake-page[data-theme="ariake-ai"] .section-heading--center .section-lead {
    margin-inline: 0;
  }
}

/* ---- コントラスト：表の見出しの行（薄い青の上の青い文字が 4.0:1 だった → 濃い青で 4.5:1 以上） ---- */
.ariake-page[data-theme="ariake-ai"] .compare-table:not([data-head]) .compare-table-table thead th,
.ariake-page[data-theme="ariake-ai"] .compare-table:not([data-head]) .compare-table-table thead td {
  color: color-mix(in srgb, var(--ari-navy) 72%, #000000);
}

/* ---- 小さすぎる文字を 12px 以上に（絵の中の飾りの文字は除く） ---- */
.ariake-page[data-theme="ariake-ai"] .case-cards-pill,
.ariake-page[data-theme="ariake-ai"] .app-cards-status {
  font-size: 0.75rem;
}
.ariake-page[data-theme="ariake-ai"] .cast-cta-tag {
  font-size: 0.8125rem;
}

/* ---- 押せる所は高さ 44px 以上（ヘッダーの電話・CTA、フッターのリンクは上の各所で） ---- */
.ariake-page[data-theme="ariake-ai"] .footer-sns-link {
  align-items: center;
  min-height: 44px;
  padding-block: 0;
}
.ariake-page[data-theme="ariake-ai"] .contact-methods-tel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ariake-page[data-theme="ariake-ai"] .contact-form-choice {
  padding-block: 10px;
}

/* ---- 整列・読みやすさ：スマホでは、本文の中の手動の改行（PC の幅で入れた <br>）を使わない ----
 * PC の幅で入れた改行が、狭い画面では「どこを／改善できそうか…」のような短い行を作り、右端がガタガタになる。
 * 文章ブロックの段落（<p>）の区切りはそのまま。見出し（最終CTAの大きな文字など）の改行は残す。
 * 本文モジュールの言い回し部品（statement）が .statement-br で同じことをしている */
@media (max-width: 599px) {
  .ariake-page[data-theme="ariake-ai"] .page-intro-lead br,
  .ariake-page[data-theme="ariake-ai"] .section-lead br {
    display: none;
  }
}