/*
  つなぎ帳 公式サイトの見た目（site/ の全ページで共通。外部の読み込みなし・JavaScript なし）

  方針: 大きな見出しと広い余白・白と黒の帯・角の丸いタイル（ベントー）・画面のイメージ（HTML と CSS と SVG で描く）。
  色: 藍（ブランド）・紫・金のグラデーション。LINE・HubSpot の色はまねない。
  文字: 端末の字体だけ（Web フォントを読まない）。Apple の端末ではヒラギノ角ゴ・SF、Windows では BIZ UDP ゴシック・游ゴシック。
  動き: スクロールに合わせて少しずつ出す（animation-timeline が使えるブラウザーだけ・「視差効果を減らす」の設定では動かさない）。

  部品の名前（ページを足すときに使う）
    帯（節）        .sec / .sec-soft / .sec-dark / .sec-tight   中: .wrap / .wrap-narrow / .wrap-wide
    見出し          .sec-head（中央）> .kicker・.title・.lede・.links     大きな見出し .display・.title-xl  グラデーションの字 .grad
    ボタン          .btn .btn-primary / .btn-secondary / .btn-light       文字のリンク .more（「›」つき）
    ヒーロー        .hero > .hero-name・.hero-title・.hero-sub・.hero-actions・.stage（画面のイメージの舞台）・.chips
    ベントー        .bento > .tile（.span-3/4/5/6/7/8/12・.tall）・.tile-dark / .tile-brand / .tile-grad / .tile-soft
                   中: .tile-kicker・.tile-title・.tile-text・.tile-num・.tile-art
    見せる節        .showcase（見出し → 画面）・.split（左右）・.split.rev（左右を入れ替え）・.points（小さな特長の並び）
                   画面のイメージのすぐ下に続ける .catalog.after-art・.split.after-art（上を 64px あける）
    画面のイメージ  .win（ウィンドウ）> .win-bar・.win-body     .app（アプリの形）> .app-side・.app-main
                   受信箱 .ibx・.ibx-list・.ibx-item・.thread・.msg（.in/.out/.memo/.ai）・.info・.kv
                   配信 .cmp・.cmp-row・.cmp-card    ワークフロー .flow・.node・.flow-branch
                   表 .tbl    リッチメニュー .rmenu・.rm-tile    分析 .kpis・.kpi・.chart    CRM .crm
                   スマホ .phone    コード .code    浮かぶカード .float
    ギャラリー      .gallery > .gcard（横にスクロール）    小さな手順 .steps-mini > li（> i に番号）
    くらべる        .plans > .plan（3 つ並べるときは .plans.three）  表 .compare-wrap > .compare（プランの表は .compare.compare-plans。
                   中の印 .yes・.no、区切りの行 tr.grp）
    流れ            .timeline > li          安全 .cards3 > .card
    質問            .faq > details          終わりの帯 .cta              下のページの頭 .phero（中に .stage を置ける）
    上のナビ        .gnav（tools/site_sync.py が書く。ログインのリンク .gnav-login・料金へのボタン .gnav-cta）
*/

/* ================================================================== 色と字 */
:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-elev: #ffffff;
  --bg-sunk: #fbfbfd;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;

  --brand: #2f54c8;
  --brand-ink: #2a4bb3;
  --brand-deep: #1f3a8f;
  --brand-soft: #eef2fd;
  --violet: #7a55e6;
  --violet-soft: #f3effd;
  --gold: #e9a23b;
  --gold-ink: #8a5a0b;
  --gold-soft: #fdf3e2;
  --teal: #0f8f7e;
  --teal-soft: #e3f5f2;
  --rose: #d6456b;
  --rose-soft: #fdecf1;

  --grad: linear-gradient(100deg, #2f54c8 0%, #7a55e6 48%, #e9a23b 100%);
  --grad-soft: linear-gradient(135deg, #eef2fd 0%, #f3effd 50%, #fdf3e2 100%);
  --glow-1: rgb(47 84 200 / 28%);
  --glow-2: rgb(122 85 230 / 22%);
  --glow-3: rgb(233 162 59 / 22%);

  --on-brand: #ffffff;
  --shadow-s: 0 1px 2px rgb(0 0 0 / 5%), 0 2px 8px rgb(0 0 0 / 5%);
  --shadow-m: 0 2px 6px rgb(0 0 0 / 6%), 0 12px 32px rgb(0 0 0 / 9%);
  --shadow-l: 0 4px 12px rgb(0 0 0 / 7%), 0 30px 80px rgb(0 0 0 / 14%);

  --r-xl: 28px;
  --r-l: 20px;
  --r-m: 14px;
  --r-s: 10px;

  --gutter: 20px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI",
    "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Noto Sans Mono CJK JP", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-soft: #101012;
    --bg-elev: #1c1c1e;
    --bg-sunk: #0b0b0d;
    --ink: #f5f5f7;
    --ink-2: #d2d2d7;
    --ink-3: #a1a1a6;
    --line: #3a3a3f;
    --line-soft: #2a2a2e;

    --brand: #6f8fff;
    --brand-ink: #8ea7ff;
    --brand-deep: #b9c8ff;
    --brand-soft: #172142;
    --violet: #a98bff;
    --violet-soft: #231a3f;
    --gold: #f3b955;
    --gold-ink: #f3c46f;
    --gold-soft: #2c2312;
    --teal: #4fd1bd;
    --teal-soft: #0d2a26;
    --rose: #ff7d9c;
    --rose-soft: #3a1520;

    --grad: linear-gradient(100deg, #7d97ff 0%, #b28cff 48%, #f3b955 100%);
    --grad-soft: linear-gradient(135deg, #131a33 0%, #1d1633 50%, #2a2112 100%);
    --glow-1: rgb(111 143 255 / 30%);
    --glow-2: rgb(169 139 255 / 24%);
    --glow-3: rgb(243 185 85 / 18%);

    --on-brand: #0b0d14;
    --shadow-s: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-m: 0 2px 6px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 45%);
    --shadow-l: 0 4px 12px rgb(0 0 0 / 45%), 0 30px 80px rgb(0 0 0 / 60%);
  }
}

/* いつも暗い帯（明るい表示でも暗い） */
.sec-dark,
.tile-dark,
.cta {
  --bg: #000000;
  --bg-soft: #111113;
  --bg-elev: #1c1c1e;
  --bg-sunk: #0b0b0d;
  --ink: #f5f5f7;
  --ink-2: #d2d2d7;
  --ink-3: #a1a1a6;
  --line: #3a3a3f;
  --line-soft: #2a2a2e;
  --brand: #7d97ff;
  --brand-ink: #9db1ff;
  --brand-deep: #c7d3ff;
  --brand-soft: #172142;
  --violet: #b28cff;
  --violet-soft: #231a3f;
  --gold: #f3b955;
  --gold-ink: #f3c46f;
  --gold-soft: #2c2312;
  --teal: #4fd1bd;
  --teal-soft: #0d2a26;
  --rose: #ff7d9c;
  --rose-soft: #3a1520;
  --grad: linear-gradient(100deg, #8aa2ff 0%, #b996ff 48%, #f5c15f 100%);
  --on-brand: #0b0d14;
  --shadow-m: 0 2px 6px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 50%);
  --shadow-l: 0 4px 12px rgb(0 0 0 / 50%), 0 30px 80px rgb(0 0 0 / 70%);
  background: var(--bg);
  color: var(--ink);
}

@media (min-width: 734px) {
  :root { --gutter: 32px; }
}

/* ================================================================== 土台 */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  line-break: strict;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: balance;
  word-break: auto-phrase;
  font-feature-settings: "palt";
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
}
.skip:focus { top: 8px; text-decoration: none; }

.wrap,
.wrap-narrow,
.wrap-wide {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap { max-width: calc(1120px + var(--gutter) * 2); }
.wrap-narrow { max-width: calc(820px + var(--gutter) * 2); }
.wrap-wide { max-width: calc(1360px + var(--gutter) * 2); }

/* ================================================================== お知らせの帯 */
.ribbon {
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.ribbon p { padding: 11px var(--gutter); }
.ribbon strong { color: var(--gold-ink); }

/* ================================================================== 上のナビ */
.gnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .gnav { background: var(--bg); }
}
.gnav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand svg { width: 28px; height: 28px; flex: none; }
.gnav-nav { display: flex; align-items: center; margin-left: auto; }
.gnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.gnav-links a {
  display: block;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  white-space: nowrap;
}
.gnav-links a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.gnav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.gnav-cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.gnav-cta:hover { background: var(--brand-deep); color: var(--on-brand); text-decoration: none; }
.gnav-login {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  white-space: nowrap;
}
.gnav-login:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }

/* 開いたメニューは、帯の右端（右のボタンの下）にそろえる（メニューのボタンの右には、ログイン・料金のボタンがある） */
.gnav-menu { display: none; position: static; }
.gnav-menu summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}
.gnav-menu summary::-webkit-details-marker { display: none; }
.gnav-menu summary:hover { background: var(--bg-soft); }
.gnav-menu summary svg { width: 22px; height: 22px; }
.gnav-menu[open] summary { background: var(--bg-soft); }
.gnav-menu ul {
  position: absolute;
  right: var(--gutter);
  top: 52px;
  width: min(300px, calc(100vw - 32px));
  padding: 10px;
  list-style: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-l);
  background: var(--bg-elev);
  box-shadow: var(--shadow-l);
}
.gnav-menu ul a {
  display: block;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 16px;
}
.gnav-menu ul a:hover { background: var(--bg-soft); text-decoration: none; }
.gnav-menu .gnav-menu-login { display: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }

@media (max-width: 1180px) {
  .gnav-links { display: none; }
  .gnav-menu { display: block; }
}
/* 狭い画面: ログインはメニューの中へ（上の帯に収めるため） */
@media (max-width: 599px) {
  .gnav-inner { gap: 10px; }
  .gnav-login { display: none; }
  .gnav-menu .gnav-menu-login { display: block; }
}

/* ================================================================== ボタンとリンク */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
}
.actions.center { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-deep); color: var(--on-brand); }
.btn-secondary { background: transparent; color: var(--brand-ink); border-color: var(--brand-ink); }
.btn-secondary:hover { background: var(--brand-soft); color: var(--brand-ink); }
.btn-light { background: #ffffff; color: #1d1d1f; }
.btn-light:hover { background: #e8e8ed; color: #1d1d1f; }

.more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-ink);
  font-size: 17px;
  font-weight: 500;
}
.more::after {
  content: "›";
  font-size: 1.25em;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}
.more:hover::after { transform: translate(3px, -1px); }

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}
.chips svg { width: 16px; height: 16px; color: var(--brand); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.pill-wait { background: var(--gold-soft); color: var(--gold-ink); }
.pill-wait::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.pill-free { background: var(--brand-soft); color: var(--brand-ink); }
.pill-new { background: var(--violet-soft); color: var(--violet); }

/* ================================================================== 帯（節）と見出し */
.sec { position: relative; padding: 96px 0; }
.sec-tight { padding: 64px 0; }
.sec-soft { background: var(--bg-soft); }
@media (min-width: 1068px) {
  .sec { padding: 140px 0; }
  .sec-tight { padding: 88px 0; }
}

.sec-head {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.sec-head.left { margin-left: 0; text-align: left; }
.kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--brand-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.kicker.gold { color: var(--gold-ink); }
.kicker.violet { color: var(--violet); }
.title {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
}
.title-xl {
  font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5rem);
  line-height: 1.1;
}
.display {
  font-size: clamp(3rem, 1.4rem + 7vw, 6.5rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
}
.lede {
  margin-top: 22px;
  word-break: auto-phrase;
  text-wrap: pretty;
  color: var(--ink-3);
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
  font-weight: 500;
  line-height: 1.7;
}
.lede strong { color: var(--ink); }
.links { margin-top: 26px; }
.sec-head .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.sec-head.left .links { justify-content: flex-start; }

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ================================================================== ヒーロー */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 0;
  text-align: center;
}
@media (min-width: 1068px) {
  .hero { padding-top: 104px; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 900px;
  background:
    radial-gradient(40% 50% at 22% 60%, var(--glow-1), transparent 70%),
    radial-gradient(35% 45% at 78% 52%, var(--glow-2), transparent 70%),
    radial-gradient(30% 35% at 52% 88%, var(--glow-3), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-name {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hero-name svg { width: 44px; height: 44px; }
.hero-title { margin-top: 22px; }
.hero-sub {
  word-break: auto-phrase;
  text-wrap: pretty;
  max-width: 760px;
  margin: 26px auto 0;
  color: var(--ink-3);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.65;
}
.hero-actions { justify-content: center; margin-top: 36px; }
.hero .chips { margin-top: 34px; }
.hero-note { margin-top: 18px; color: var(--ink-3); font-size: 14px; }

.stage {
  position: relative;
  max-width: 1180px;
  margin: 64px auto 0;
  padding: 0 var(--gutter) 96px;
}
@media (min-width: 1068px) {
  .stage { margin-top: 84px; padding-bottom: 140px; }
}

/* ================================================================== ベントー */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
}
.tile {
  position: relative;
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 30px 28px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  text-align: left;
}
.sec-soft .tile { box-shadow: none; }
.tile.tall { min-height: 420px; }
@media (min-width: 734px) {
  .tile.span-3, .tile.span-4, .tile.span-5 { grid-column: span 6; }
  .tile.span-6, .tile.span-7, .tile.span-8 { grid-column: span 12; }
}
@media (min-width: 1068px) {
  .tile { padding: 36px 34px; }
  .tile.span-3 { grid-column: span 3; }
  .tile.span-4 { grid-column: span 4; }
  .tile.span-5 { grid-column: span 5; }
  .tile.span-6 { grid-column: span 6; }
  .tile.span-7 { grid-column: span 7; }
  .tile.span-8 { grid-column: span 8; }
}
.tile-soft { background: var(--bg-soft); }
.tile-brand { background: #2f54c8; color: #ffffff; --ink: #ffffff; --ink-2: rgb(255 255 255 / 92%); --ink-3: rgb(255 255 255 / 80%); --brand-ink: #ffffff; }
.tile-grad { background: var(--grad-soft); }
.tile-kicker { color: var(--brand-ink); font-size: 15px; font-weight: 700; }
.tile-title {
  margin-top: 8px;
  font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem);
  line-height: 1.25;
}
.tile-text { margin-top: 12px; color: var(--ink-3); font-size: 16px; line-height: 1.7; }
.tile-num {
  font-size: clamp(3.4rem, 2.4rem + 3.4vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.tile-num small { font-size: 0.4em; font-weight: 700; letter-spacing: 0; }
.tile-art { margin-top: auto; padding-top: 24px; }
.tile .more { margin-top: 16px; font-size: 16px; }

/* ================================================================== 見せる節 */
.showcase .sec-head { margin-bottom: 64px; }
.split {
  display: grid;
  gap: 48px;
  align-items: center;
}
.split .title { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); }
@media (min-width: 1068px) {
  .split { grid-template-columns: 0.85fr 1.15fr; gap: 72px; }
  .split.rev { grid-template-columns: 1.15fr 0.85fr; }
  .split.rev > :first-child { order: 2; }
}

.points {
  display: grid;
  gap: 34px 28px;
  margin-top: 72px;
  list-style: none;
}
@media (min-width: 734px) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1068px) { .points { grid-template-columns: repeat(3, 1fr); } }
.points.four { }
@media (min-width: 1068px) { .points.four { grid-template-columns: repeat(4, 1fr); } }
.points li { padding-top: 18px; border-top: 1px solid var(--line); }
.points h3 { font-size: 18px; line-height: 1.45; }
.points p { margin-top: 8px; color: var(--ink-3); font-size: 15px; line-height: 1.75; }
.points .ic { margin-bottom: 12px; }

.ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.ic svg { width: 24px; height: 24px; }
.ic.gold { background: var(--gold-soft); color: var(--gold-ink); }
.ic.violet { background: var(--violet-soft); color: var(--violet); }
.ic.teal { background: var(--teal-soft); color: var(--teal); }
.ic.rose { background: var(--rose-soft); color: var(--rose); }

/* 大きな数字の並び */
.stats {
  display: grid;
  gap: 18px;
  list-style: none;
}
@media (min-width: 734px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stats li {
  padding: 30px 26px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
}
.stats .n {
  display: block;
  font-size: clamp(3rem, 2.2rem + 3vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stats .l { display: block; margin-top: 12px; color: var(--ink-3); font-size: 16px; line-height: 1.6; }

/* ================================================================== 画面のイメージ（共通） */
.win {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-l);
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-sunk);
}
.win-dots { display: flex; gap: 7px; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.win-addr {
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-body { position: relative; }
.caption { margin-top: 18px; color: var(--ink-3); font-size: 13px; text-align: center; }

.app { display: grid; grid-template-columns: 1fr; min-height: 520px; }
@media (min-width: 900px) {
  .app { grid-template-columns: 200px 1fr; }
}
.app-side {
  display: none;
  padding: 16px 12px;
  border-right: 1px solid var(--line-soft);
  background: var(--bg-sunk);
}
@media (min-width: 900px) { .app-side { display: block; } }
.app-brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; }
.app-brand svg { width: 22px; height: 22px; }
.app-nav { list-style: none; display: grid; gap: 2px; }
.app-nav li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: 13px;
}
.app-nav li svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.app-nav li.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.app-nav li.on svg { color: var(--brand-ink); }
.app-nav li svg.lock { width: 13px; height: 13px; margin-left: auto; }
.app-nav .badge {
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}
.app-main { min-width: 0; padding: 18px 20px; }
.app-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; font-size: 18px; font-weight: 700; }
.app-title .pill { font-size: 11px; }

.av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}
.av.a1 { background: linear-gradient(135deg, #5b7cfa, #2f54c8); }
.av.a2 { background: linear-gradient(135deg, #f0a14a, #d9772b); }
.av.a3 { background: linear-gradient(135deg, #a07cf5, #6d4fd8); }
.av.a4 { background: linear-gradient(135deg, #3fb6a4, #0f8f7e); }
.av.a5 { background: linear-gradient(135deg, #ef7aa0, #d6456b); }
.av.a6 { background: linear-gradient(135deg, #8a94a6, #5d6576); }
.av.s { width: 26px; height: 26px; font-size: 11px; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.tag.gold { background: var(--gold-soft); color: var(--gold-ink); }
.tag.violet { background: var(--violet-soft); color: var(--violet); }
.tag.teal { background: var(--teal-soft); color: var(--teal); }
.tag.rose { background: var(--rose-soft); color: var(--rose); }
.tag.gray { background: var(--bg-soft); color: var(--ink-3); }

/* ------------------------------------------------------------------ 受信箱 */
.ibx {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  min-height: 460px;
}
@media (min-width: 734px) { .ibx { grid-template-columns: 240px 1fr; } }
@media (min-width: 1180px) { .ibx { grid-template-columns: 250px 1fr 230px; } }
.ibx-list { display: none; border-right: 1px solid var(--line-soft); background: var(--bg-elev); }
@media (min-width: 734px) { .ibx-list { display: block; } }
.ibx-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line-soft); }
.ibx-filter span {
  padding: 2px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 11px;
  white-space: nowrap;
}
.ibx-filter span.on { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 700; }
.ibx-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.ibx-item.on { background: var(--brand-soft); }
.ibx-item .nm { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx-item .sn { grid-column: 2 / 4; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx-item .tm { color: var(--ink-3); font-size: 11px; }
.ibx-item .av { grid-row: span 2; }
.ibx-item .ct {
  justify-self: end;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.7;
}

.thread { display: flex; flex-direction: column; min-width: 0; background: var(--bg-sunk); }
.thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elev);
}
.thread-head .who { font-weight: 700; font-size: 13px; }
.thread-head .meta { margin-left: auto; display: flex; gap: 6px; }
.thread-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; flex: 1; }
.msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.6;
}
.msg.in { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--bg-elev); border: 1px solid var(--line-soft); }
.msg.out { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--brand); color: var(--on-brand); }
.msg.memo {
  align-self: stretch;
  max-width: none;
  border: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 12px;
}
.msg.ai {
  align-self: stretch;
  max-width: none;
  border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent);
  border-radius: 14px;
  background: var(--violet-soft);
  color: var(--ink);
}
.msg .who-s { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; opacity: 0.8; }
.msg .src { display: inline-flex; margin-top: 6px; gap: 6px; flex-wrap: wrap; }
.msg-time { align-self: center; color: var(--ink-3); font-size: 11px; }
.compose {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 14px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-3);
  font-size: 12px;
}
.compose .send {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
}
.compose .send svg { width: 14px; height: 14px; }

.info { display: none; padding: 14px; border-left: 1px solid var(--line-soft); background: var(--bg-elev); }
@media (min-width: 1180px) { .info { display: block; } }
.info-name { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.info .info-h { margin: 16px 0 6px; color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font-size: 12px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; text-align: right; font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.synced {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}
.synced svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ 浮かぶカード */
.float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-l);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.float strong { display: block; font-size: 13px; }
.float span { color: var(--ink-3); font-size: 12px; }
.float .ic { width: 34px; height: 34px; border-radius: 10px; }
.float .ic svg { width: 18px; height: 18px; }
.stage-inner { position: relative; }
.float-a { top: -26px; right: 4%; }
.float-b { bottom: 64px; left: -26px; }
.float-c { top: 42%; right: -30px; }
@media (max-width: 899px) {
  .float { display: none; }
}

/* ------------------------------------------------------------------ スマホ */
.phone {
  position: relative;
  width: 260px;
  padding: 12px;
  border-radius: 42px;
  background: #0d0d10;
  box-shadow: var(--shadow-l), inset 0 0 0 2px #2b2b30;
}
.phone-screen {
  overflow: hidden;
  border-radius: 31px;
  background: var(--bg-elev);
  min-height: 500px;
  font-size: 12px;
  line-height: 1.5;
}
.phone-top { display: flex; justify-content: center; padding: 10px 0 6px; }
.phone-top i { width: 70px; height: 20px; border-radius: 999px; background: #0d0d10; }
.phone-head { padding: 4px 16px 10px; font-size: 17px; font-weight: 700; }

/* ------------------------------------------------------------------ 配信 */
.cmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .cmp.with-preview { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; } }
.cmp-card {
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-elev);
}
.cmp-card .cap { margin: 0 0 10px; color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.cmp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-row + .cmp-row { margin-top: 8px; }
.cmp-label { width: 64px; color: var(--ink-3); font-size: 12px; }
.cmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 12px;
  font-weight: 600;
}
.cmp-chip svg { width: 13px; height: 13px; }
.cmp-chip.inc { background: var(--brand-soft); color: var(--brand-ink); }
.cmp-chip.exc { background: var(--rose-soft); color: var(--rose); }
.cmp-chip.hs { background: var(--gold-soft); color: var(--gold-ink); }
.cmp-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cmp-sum { gap: 10px; }
.cmp-sum b { font-size: 20px; white-space: nowrap; }
.ab { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab > div { padding: 10px 12px; border-radius: 10px; background: var(--bg-soft); }
.ab .k { display: block; color: var(--ink-3); font-size: 11px; }
.ab .v { display: block; font-size: 18px; font-weight: 800; }
.bar { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }

.prev {
  padding: 12px;
  border-radius: 18px;
  background: var(--bg-soft);
}
.prev-card { overflow: hidden; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line-soft); }
.prev-img {
  height: 120px;
  background:
    radial-gradient(60% 80% at 30% 30%, rgb(255 255 255 / 55%), transparent 60%),
    linear-gradient(135deg, #2f54c8, #7a55e6 55%, #e9a23b);
}
.prev-body { padding: 10px 12px; font-size: 12px; }
.prev-body b { display: block; font-size: 13px; }
.prev-btn { margin: 0 12px 12px; padding: 7px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700; text-align: center; }

/* ------------------------------------------------------------------ ワークフロー */
.canvas {
  position: relative;
  padding: 28px 20px;
  border-radius: 14px;
  background-color: var(--bg-sunk);
  background-image: radial-gradient(var(--line) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.flow { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.node {
  position: relative;
  width: min(100%, 300px);
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  font-size: 13px;
}
.node + .node::before,
.flow-branch::before,
.flow-after::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -27px;
  width: 2px;
  height: 26px;
  background: var(--line);
}
.node .nk { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.node .nk svg { width: 13px; height: 13px; }
.node .nt { margin-top: 2px; font-weight: 700; }
.node .ns { margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.node.trigger { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.node.trigger .nk { color: var(--brand-ink); }
.node.wait .nk { color: var(--gold-ink); }
.node.hs .nk { color: var(--gold-ink); }
.node.ai .nk { color: var(--violet); }
.flow-branch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: min(100%, 560px);
  padding-top: 14px;
}
.flow-branch::after {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--line);
}
.flow-branch > .col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.flow-branch > .col::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 2px;
  height: 14px;
  background: var(--line);
}
.flow-branch .node { width: 100%; }
.flow-branch .port {
  position: absolute;
  top: -11px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 0 7px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.flow-after { position: relative; }

/* ------------------------------------------------------------------ 表 */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th,
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
.tbl th { color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; background: var(--bg-sunk); }
.tbl .who { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 12px; }

/* ------------------------------------------------------------------ リッチメニュー・QR */
.rmenu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: var(--bg-soft);
}
.rm-tile {
  position: relative;
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 0;
  aspect-ratio: 1.1 / 1;
  padding: 18px 6px 10px;
  border-radius: 10px;
  background: var(--bg-elev);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.rm-tile svg { width: 26px; height: 26px; color: var(--brand-ink); }
.rm-tile.hot { background: var(--brand); color: var(--on-brand); }
.rm-tile.hot svg { color: var(--on-brand); }
.rm-count {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 10px;
  line-height: 1.7;
}
.rm-tile.hot .rm-count { background: color-mix(in srgb, var(--on-brand) 20%, transparent); color: var(--on-brand); }
.qr-card { display: flex; gap: 14px; align-items: center; }
.qr-card svg.qr { width: 92px; height: 92px; flex: none; border-radius: 10px; background: #ffffff; padding: 6px; }

/* ------------------------------------------------------------------ 分析 */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 734px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-elev); }
.kpi .k { color: var(--ink-3); font-size: 11px; }
.kpi .v { margin-top: 2px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.kpi .d { font-size: 11px; font-weight: 700; color: var(--teal); }
.kpi .d.down { color: var(--rose); }
.charts { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 734px) { .charts { grid-template-columns: 1.6fr 1fr; } }
.chart { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-elev); }
.chart .cap { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.chart svg { width: 100%; height: auto; }
.c-grid { stroke: var(--line-soft); stroke-width: 1; }
.c-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.c-line2 { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 5; }
.c-area { fill: url(#area); opacity: 0.9; }
.c-bar { fill: var(--brand); }
.c-bar2 { fill: var(--violet); }
.c-bar3 { fill: var(--gold); }
.c-label { fill: var(--ink-3); font-size: 10px; font-family: var(--font); }
.area-a { stop-color: var(--brand); stop-opacity: 0.25; }
.area-b { stop-color: var(--brand); stop-opacity: 0; }

/* ------------------------------------------------------------------ CRM（HubSpot のコンタクトのイメージ） */
.crm { display: grid; gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--bg-elev); }
@media (min-width: 900px) { .crm { grid-template-columns: 220px 1fr; } }
.crm-side { padding: 16px; border-right: 1px solid var(--line-soft); background: var(--bg-sunk); }
.crm-who { display: flex; align-items: center; gap: 10px; }
.crm-who b { display: block; font-size: 14px; }
.crm-who span { color: var(--ink-3); font-size: 11px; }
.crm-who .av { color: #ffffff; font-size: 13px; }
.crm-props { margin-top: 14px; display: grid; gap: 8px; font-size: 12px; }
.crm-props div { display: grid; gap: 1px; }
.crm-props dt { color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.04em; }
.crm-props dd { margin: 0; font-weight: 700; }
.crm-main { padding: 16px; display: grid; gap: 12px; }
.crm-card { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.crm-card-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); background: var(--bg-sunk); font-size: 12px; font-weight: 700; }
.crm-card-h .mark { width: 18px; height: 18px; }
.crm-card-b { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.crm-tl { list-style: none; display: grid; gap: 0; }
.crm-tl li { position: relative; padding: 0 0 12px 22px; font-size: 12px; }
.crm-tl li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.crm-tl li::after { content: ""; position: absolute; left: 8.5px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.crm-tl li:last-child::after { display: none; }
.crm-tl b { display: block; }
.crm-tl span { color: var(--ink-3); font-size: 11px; }

/* ------------------------------------------------------------------ コード */
.code {
  margin: 0;
  padding: 22px 24px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b0b0d;
  color: #e7e7ea;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  text-align: left;
  white-space: pre;
}
.stats + .code { margin-top: 18px; }
.code .c { color: #8b8b93; }
.code .k { color: #9db1ff; }
.code .s { color: #f5c15f; }
.code .v { color: #b996ff; }

/* ================================================================== しくみの図 */
.diagram { width: 100%; height: auto; }
.d-box { fill: var(--bg-elev); stroke: var(--line); stroke-width: 1.5; }
.d-core { fill: var(--brand); }
.d-core-text { fill: var(--on-brand); font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: 0.08em; }
.d-title { fill: var(--ink); font-family: var(--font); font-size: 17px; font-weight: 700; }
.d-text { fill: var(--ink-3); font-family: var(--font); font-size: 12.5px; }
.d-line { fill: none; stroke: var(--line); stroke-width: 2; }
.d-flow { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 8; }
.d-chip { fill: var(--bg-soft); }
.d-core-sub { fill: var(--on-brand); fill-opacity: 0.88; font-family: var(--font); font-size: 13px; }
.d-chip-text { fill: var(--ink-2); font-family: var(--font); font-size: 12px; font-weight: 700; }
.d-icon { fill: none; stroke: var(--brand-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram-wrap { padding: 24px; border-radius: var(--r-xl); background: var(--bg-elev); box-shadow: var(--shadow-s); }
.sec-soft .diagram-wrap { box-shadow: none; }
.diagram-mobile { display: grid; gap: 12px; list-style: none; }
.diagram-mobile li {
  padding: 16px 18px;
  border-radius: var(--r-m);
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
}
.diagram-mobile li.core { background: var(--brand); color: var(--on-brand); border-color: transparent; text-align: center; font-weight: 700; letter-spacing: 0.08em; }
.diagram-mobile b { display: block; }
.diagram-mobile span { color: var(--ink-3); font-size: 14px; }
.diagram-mobile .arrow { padding: 0; border: 0; background: none; text-align: center; color: var(--gold-ink); font-size: 13px; font-weight: 700; }
@media (min-width: 900px) { .diagram-mobile { display: none; } }
@media (max-width: 899px) { .diagram-wrap { display: none; } }

/* ================================================================== ギャラリー（横にスクロール） */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84vw, 380px);
  gap: 18px;
  overflow-x: auto;
  padding: 6px var(--gutter) 28px;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  list-style: none;
  scrollbar-width: thin;
}
@media (min-width: 1180px) {
  .gallery { grid-auto-columns: 1fr; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; max-width: calc(1120px + var(--gutter) * 2); margin: 0 auto; }
}
.gcard {
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: 28px 26px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  scroll-snap-align: start;
}
.sec-soft .gcard { box-shadow: none; }
.gcard .no { color: var(--ink-3); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.gcard h3 { margin-top: 8px; font-size: 22px; line-height: 1.35; }
.gcard p { margin-top: 10px; color: var(--ink-3); font-size: 15px; line-height: 1.75; }
.steps-mini { list-style: none; display: grid; gap: 8px; }
.gcard .steps-mini { margin-top: auto; padding-top: 22px; }
.steps-mini li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  font-size: 13.5px;
  font-weight: 600;
}
.steps-mini li i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

/* ================================================================== くらべる（2 つの使い方） */
.plans { display: grid; gap: 18px; }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
}
.sec-soft .plan { box-shadow: none; }
.plan-top { display: flex; flex-wrap: wrap; gap: 8px; }
.plan h3 { margin-top: 18px; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
.plan-price { margin-top: 8px; font-size: 20px; font-weight: 700; }
.plan-price small { color: var(--ink-3); font-size: 14px; font-weight: 500; }
.plan > p { margin-top: 12px; color: var(--ink-3); }
.plan-list { margin-top: 24px; list-style: none; display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.plan-list li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.6; }
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-soft);
}
.plan-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
  transform: rotate(45deg);
}
.plan .actions { margin-top: auto; padding-top: 28px; }

/* 3 つのプラン（料金） */
@media (min-width: 900px) { .plans.three { grid-template-columns: repeat(3, 1fr); } }
.plans.three .plan { padding: 32px 26px; }
.plans.three .plan h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.plans.three .plan-price { color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 800; line-height: 1.3; }
.plans.three .plan-price small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.5; }
.plans.three .plan-list { gap: 10px; }
.plans.three .plan-list li { font-size: 15px; }
.plan-ring {
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--grad) border-box;
}

.compare-wrap { margin-top: 28px; overflow-x: auto; border-radius: var(--r-l); background: var(--bg-elev); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.compare caption { padding: 18px 22px 4px; color: var(--ink-3); font-size: 13px; text-align: left; }
.compare th,
.compare td { padding: 15px 22px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; line-height: 1.6; }
.compare thead th { border-top: 0; color: var(--ink-3); font-size: 13px; }
.compare tbody th { width: 11em; color: var(--ink-2); font-weight: 700; white-space: nowrap; }

/* プランの表（行の名前が長いので折り返す。スマホでも横にはみ出さない） */
.compare-wrap.lined { border: 1px solid var(--line-soft); }
.compare-plans { min-width: 0; table-layout: fixed; }
.compare-plans thead th { color: var(--ink); font-size: 15px; text-align: center; white-space: nowrap; }
.compare-plans thead th:first-child { width: 46%; text-align: left; }
.compare-plans tbody th { white-space: normal; word-break: auto-phrase; font-weight: 600; }
.compare-plans tbody th small { display: block; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.compare-plans td { text-align: center; white-space: nowrap; }
.compare-plans tr.grp th {
  padding-top: 26px;
  padding-bottom: 10px;
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.compare .yes { color: var(--teal); font-size: 18px; font-weight: 800; line-height: 1; }
.compare .no { color: var(--ink-3); font-size: 18px; line-height: 1; }
@media (max-width: 733px) {
  .compare-plans { font-size: 12.5px; }
  .compare-plans th,
  .compare-plans td { padding: 11px 5px; }
  .compare-plans thead th { font-size: 13px; }
  .compare-plans thead th:first-child { width: 42%; }
  .compare-plans td { font-size: 12px; }
  .compare-plans tbody th { padding-left: 12px; }
  .compare-plans tbody th small { font-size: 11.5px; }
  .compare-plans tr.grp th { padding-left: 12px; }
}

/* ================================================================== 流れ */
.timeline { display: grid; gap: 14px; list-style: none; counter-reset: step; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.timeline li {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--r-l);
  background: var(--bg-elev);
  counter-increment: step;
  box-shadow: var(--shadow-s);
}
.sec-soft .timeline li { box-shadow: none; }
.timeline li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.timeline h3 { margin-top: 14px; font-size: 18px; }
.timeline p { margin-top: 8px; color: var(--ink-3); font-size: 15px; line-height: 1.75; }

/* ================================================================== カード 3 つ並び */
.cards3 { display: grid; gap: 18px; list-style: none; }
@media (min-width: 734px) { .cards3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1068px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  padding: 28px 26px;
  border-radius: var(--r-l);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
}
.sec-soft .card { box-shadow: none; }
.card h3 { margin-top: 14px; font-size: 19px; line-height: 1.45; }
.card p { margin-top: 8px; color: var(--ink-3); font-size: 15px; line-height: 1.75; }
.card ul { margin-top: 12px; padding-left: 1.2em; list-style: disc; color: var(--ink-2); font-size: 14.5px; line-height: 1.75; }
.card li::marker { color: var(--brand); }

/* ================================================================== 質問 */
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 24px 48px 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 700;
  line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--ink-3);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-52%) rotate(45deg); }
.faq summary:hover { color: var(--brand-ink); }
.faq .a { padding: 0 0 26px; color: var(--ink-2); font-size: 16px; line-height: 1.85; }
.faq .a p + p { margin-top: 10px; }
.faq-group { margin-top: 64px; }
.faq-group:first-child { margin-top: 0; }
.faq-group > h2 { max-width: 860px; margin: 0 auto 18px; font-size: 26px; }

/* ================================================================== 終わりの帯 */
.cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 20% 30%, rgb(125 151 255 / 35%), transparent 70%),
    radial-gradient(35% 55% at 80% 70%, rgb(178 140 255 / 30%), transparent 70%),
    radial-gradient(30% 40% at 55% 100%, rgb(243 185 85 / 25%), transparent 70%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta .lede { max-width: 760px; margin-left: auto; margin-right: auto; color: var(--ink-2); }
.cta .actions { margin-top: 36px; }

/* ================================================================== 下のページの頭 */
.phero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  text-align: center;
}
.phero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 620px;
  background:
    radial-gradient(40% 50% at 25% 55%, var(--glow-1), transparent 70%),
    radial-gradient(35% 45% at 75% 45%, var(--glow-2), transparent 70%);
  filter: blur(8px);
  opacity: 0.8;
  pointer-events: none;
}
.phero > * { position: relative; }
.phero .lede { max-width: 760px; margin-left: auto; margin-right: auto; }
.phero .chips { margin-top: 26px; }
.crumbs { margin-bottom: 18px; color: var(--ink-3); font-size: 13px; }
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--ink-3); }

/* 文章のページ（決まりごと） */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { margin-top: 56px; font-size: 26px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 28px; font-size: 19px; }
.prose p,
.prose ul,
.prose ol,
.prose .table-wrap,
.prose .note { margin-top: 14px; }
.prose ul,
.prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--brand); }
.prose .muted { color: var(--ink-3); font-size: 14px; }
.note {
  padding: 20px 22px;
  border-radius: var(--r-m);
  background: var(--gold-soft);
  color: var(--ink-2);
}
.note strong { display: block; margin-bottom: 4px; color: var(--gold-ink); }
.table-wrap { overflow-x: auto; border-radius: var(--r-m); background: var(--bg-elev); border: 1px solid var(--line-soft); }
.legal { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.legal th,
.legal td { padding: 16px 20px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; line-height: 1.7; }
.legal tr:first-child th,
.legal tr:first-child td { border-top: 0; }
.legal th { width: 13em; color: var(--ink-2); font-weight: 700; }
.legal .tbd { color: var(--gold-ink); font-weight: 700; }
@media (max-width: 733px) {
  .legal th,
  .legal td { display: block; width: auto; }
  .legal td { padding-top: 0; border-top: 0; }
}

/* 機能の一覧（features） */
.catalog { display: grid; gap: 18px; }
@media (min-width: 1068px) { .catalog { grid-template-columns: repeat(2, 1fr); } }
.cat {
  padding: 30px 28px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
}
.sec-soft .cat { box-shadow: none; }
.cat-head { display: flex; align-items: center; gap: 14px; }
.cat h3 { font-size: 22px; }
.cat > p { margin-top: 10px; color: var(--ink-3); font-size: 15px; }
.cat ul { margin-top: 16px; list-style: none; display: grid; gap: 10px; }
.cat li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.7; }
.cat li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.cat li b { font-weight: 700; }
.cat li span { color: var(--ink-3); }

/* ジャンプのリンク（ページの中の目次） */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin-top: 28px; }
.jump a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}
.jump a:hover { background: var(--brand-soft); color: var(--brand-ink); text-decoration: none; }

/* ================================================================== 下（フッター） */
.gfoot {
  padding: 56px 0 36px;
  background: var(--bg-soft);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.7;
}
.gfoot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.gfoot-top p { max-width: 520px; }
.gfoot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 734px) { .gfoot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .gfoot-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gfoot-cols h2 { color: var(--ink); font-size: 13px; font-weight: 700; }
.gfoot-cols ul { margin-top: 10px; list-style: none; display: grid; gap: 7px; }
.gfoot-cols a { color: var(--ink-3); }
.gfoot-cols a:hover { color: var(--ink); }
.gfoot-fine { padding-top: 22px; font-size: 12px; }
.gfoot-fine p + p { margin-top: 6px; }

/* ================================================================== 見つからない */
.lost { padding: 140px 0 160px; text-align: center; }
.lost .display { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.lost h1 { margin-top: 18px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.lost p { margin-top: 14px; color: var(--ink-3); }
.lost .actions { justify-content: center; margin-top: 30px; }

/* ================================================================== 動き */
@media (prefers-reduced-motion: no-preference) {
  .float-a { animation: bob 7s ease-in-out infinite; }
  .float-b { animation: bob 8s ease-in-out -2s infinite; }
  .float-c { animation: bob 9s ease-in-out -4s infinite; }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    .reveal-scale {
      animation: grow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes grow {
  from { opacity: 0.4; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================================================================== 印刷 */
@media print {
  .ribbon, .gnav, .skip, .stage, .float, .cta .actions { display: none !important; }
  body { background: #fff; color: #000; }
  .sec, .hero, .phero { padding: 24px 0; }
  .sec-dark, .tile-dark, .cta { background: #fff; color: #000; }
}

/* ================================================================== 小さな部品（インラインの style を使わない。CSP のため） */
.center-text { text-align: center; }
.points.tight { margin-top: 40px; }
@media (min-width: 1068px) { .points.tight { grid-template-columns: repeat(2, 1fr); } }
.phone.center { margin: 0 auto; }
.win-body.pad { padding: 18px; }
@media (min-width: 734px) { .win-body.pad { padding: 22px; } }
.win-body.stack { display: grid; gap: 12px; }
.thread.boxed { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.compose.flush { margin: 0; }
.bar i.w74 { width: 74%; }
.bar i.w48 { width: 48%; }
.bar i.w50 { width: 50%; }
.bar i.w60 { width: 60%; }
.bar i.w85 { width: 85%; }
.bar i.w100 { width: 100%; }
.bar.warn i { background: var(--gold); }
.catalog.after-art,
.split.after-art { margin-top: 64px; }
.phero .stage { margin-top: 56px; padding-bottom: 0; }
.sec-head .actions { margin-top: 32px; }
.caption.wide { max-width: 760px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.stats-mini { display: grid; gap: 8px; min-width: 0; flex: 1; }
.tile-dark .kpi { background: var(--bg-elev); border-color: var(--line); }
.mini-list { display: grid; gap: 8px; }
.ml-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-soft);
  font-size: 14px;
}
.ml-name { flex: none; font-weight: 700; }
.ml-text { min-width: 0; color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-row .tag { margin-left: auto; flex: none; }
@media (max-width: 733px) { .ml-text { display: none; } }

/* ================================================================== 絵記号（tools/site_sync.py の ICONS。<svg class="i"><use href="#i-名前"/></svg>） */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================================================================== 豊かに見せる部品（2026-10-18 に足した） */
/*
  ページで使う部品（下に、それぞれの形）
    重ねた画面        .devices > .win.dev-pc ＋ .phone.dev-phone ＋ .toasts > .toast
    お客様のスマホ    .phone > .phone-screen.cv > .phone-top・.cv-head・.cv-body（.cv-time・.cv-msg.them / .cv-msg.me・.cv-card > .cv-img・.cv-card-b・.cv-btns）
                     ・.cv-quick・.cv-menu > .cv-mt（.hot）・.cv-menu-bar・.cv-input
    順に出る動き      .play の中の .s1〜.s8（16 秒でくり返す。動きを減らす設定・「動きを止める」では、全部が最初から見える）  入力中 .typing > i×3
    動きを止める      <main> の最初に input.stopmo#stopmo（checkbox）。押すところは label.stopmo-btn（for="stopmo"）> span.off-txt ＋ span.on-txt
    流れる帯          .marquee > ul.mq-track ＋ ul.mq-track[aria-hidden="true"]（同じ中身の写し）  逆向き .marquee.rev
    動く流れ          .pipe > .pipe-node（.core）＋ .pipe-link（> .pl-t・.pl-b・i.fw・i.bw）＋ …
    画面の切り替え    .tour > input.tour-r（name をそろえ、1 つに checked）× n ＋ .tour-tabs > label × n ＋ .tour-panels > div.tour-panel × n（8 つまで）
                     パネルの中: .tour-text（h3・p・ul・.more）＋ .tour-art
    1 日の流れ        ol.daylog > li > span.dl-time（.hl）＋ div.dl-card > div（.dl-who・h3・p）＋ div.dl-art
    業種のカード      ul.inds > li.ind（.c-rose / .c-gold / .c-teal / .c-violet / .c-brand）> a.ind-link > .ind-art（.big・.sm）・.ind-k・h3・p・ul.uses・span.more
    くらべる表        .vs-wrap > table.vs（つなぎ帳の列は th・td に .us）  印 span.mk.yes / .mk.part / .mk.no（字も添える）
    チェックリスト    ul.checks（.two）> li > input[type=checkbox]#id ＋ label[for]（> b ＋ span）
    用語集            nav.gloss-index > a  ・ section.gloss-group > h2 ＋ dl.gloss-list > div.gloss-item#id > dt（> small）＋ dd（> p・p.gloss-rel）
    資料のカード      .dl > .dl-cover（> .pg × 3。表紙は .pg.pg-cover）＋ .dl-body（> .kicker・h3・p・.actions・p.dl-meta）
    機能の地図        ul.fmap > li > a.fm > .ic ＋ h3 ＋ p ＋ span.more
    まわる図          .orbit > .orbit-core ＋ ul.orbit-ring > li > span（8 つ）
    前とあと          .bfaf > .bf ＋ .bfaf-arrow ＋ .af（それぞれ p.bfaf-h ＋ ul）
    大きな数字の帯    ul.bignums（.three）> li > span.bn ＋ span.bl
    ページの中の目次  nav.subnav > ul > li > a（ナビの下に張り付く。最初の li に .sn-title）
    スマホのまわり    .scene > .phone ＋ .chipf.p1〜.p6（スマホの幅では下に並ぶ）
    設定の手順        ol.recipe（.two）> li > div（h3・p・ul.uses）   使う機能 ul.uses > li（> a）
    2 つの画面        .duo > .win ＋ .duo-arrow ＋ .phone
    手順の線          ol.rail（.c4 / .c5 / .c6）> li > h3 ＋ p
    そのほか          大きな一文 .statement（.dim）・架空の札 .fic・光る枠 .glow・大きな絵記号 .big-ic・小さな窓 .win.mini・
                     青と灰のお知らせ .note.blue / .note.gray・お客様の声のように見せない（作らない）
*/

/* ------------------------------------------------------------------ 重ねた画面 */
.devices { position: relative; max-width: 1180px; margin: 0 auto; }
.devices .dev-phone { z-index: 4; margin: 24px auto 0; }   /* スマホの幅では重ねない（窓の下の行を隠さない） */
.devices .info { display: none; }
@media (min-width: 1180px) { .devices .ibx { grid-template-columns: 250px 1fr; } }
@media (min-width: 900px) {
  .devices { padding: 0 236px 56px 0; }
  .devices .dev-phone { position: absolute; right: 0; bottom: 0; margin: 0; }
}
.mq-band { padding: 8px 0 72px; }
@media (min-width: 1068px) { .mq-band { padding-bottom: 96px; } }
.toasts { display: none; }
@media (min-width: 900px) {
  .toasts {
    position: absolute;
    z-index: 5;
    top: -30px;
    right: 36px;
    display: grid;
    gap: 10px;
    width: 300px;
  }
}
/* 動くときは、同じ場所に 1 つずつ出す（16 秒でくり返す）。止めたときは、上の 2 つだけを並べる */
.toasts .toast:nth-child(n+3) { display: none; }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-l);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.toast strong { display: block; font-size: 13px; }
.toast span.s { display: block; color: var(--ink-3); font-size: 12px; }
.toast .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; }
.toast .ic svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ お客様のスマホ（トークの見え方。LINE の色はまねない） */
.phone.sm { width: 230px; padding: 10px; border-radius: 38px; }
.phone.sm .phone-screen { min-height: 440px; border-radius: 29px; }
.cv { display: flex; flex-direction: column; min-height: 520px; background: var(--bg-sunk); }
.phone.sm .cv { min-height: 440px; }
.cv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 9px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elev);
  font-size: 13px;
  font-weight: 700;
}
.cv-av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--grad);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}
.cv-head small { margin-left: auto; color: var(--ink-3); font-size: 10.5px; font-weight: 500; }
.cv-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 12px 10px; }
.cv-time {
  align-self: center;
  padding: 1px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-3);
  font-size: 10px;
}
.cv-msg { max-width: 84%; padding: 7px 11px; border-radius: 16px; font-size: 12px; line-height: 1.55; }
.cv-msg.them { align-self: flex-start; border: 1px solid var(--line-soft); border-top-left-radius: 6px; background: var(--bg-elev); }
.cv-msg.me { align-self: flex-end; border-top-right-radius: 6px; background: var(--brand); color: var(--on-brand); }
.cv-card {
  align-self: flex-start;
  width: 86%;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--bg-elev);
}
.cv-img {
  display: grid;
  place-items: center;
  height: 86px;
  background:
    radial-gradient(60% 80% at 30% 30%, rgb(255 255 255 / 45%), transparent 60%),
    linear-gradient(135deg, #2f54c8, #7a55e6 55%, #e9a23b);
  color: #ffffff;
}
.cv-img svg { width: 30px; height: 30px; stroke-width: 1.6; }
.cv-img.g-teal { background: radial-gradient(60% 80% at 30% 30%, rgb(255 255 255 / 40%), transparent 60%), linear-gradient(135deg, #0f8f7e, #3fb6a4 55%, #9fd9c9); }
.cv-img.g-rose { background: radial-gradient(60% 80% at 30% 30%, rgb(255 255 255 / 40%), transparent 60%), linear-gradient(135deg, #d6456b, #ef7aa0 55%, #f6b8a0); }
.cv-img.g-gold { background: radial-gradient(60% 80% at 30% 30%, rgb(255 255 255 / 40%), transparent 60%), linear-gradient(135deg, #c77d17, #e9a23b 55%, #f5d08a); }
.cv-img.g-violet { background: radial-gradient(60% 80% at 30% 30%, rgb(255 255 255 / 40%), transparent 60%), linear-gradient(135deg, #5b3fc4, #7a55e6 55%, #b9a2f7); }
.cv-card-b { padding: 8px 11px 9px; font-size: 11.5px; line-height: 1.55; }
.cv-card-b b { display: block; font-size: 12.5px; }
.cv-card-b .price { display: block; margin-top: 2px; color: var(--brand-ink); font-weight: 800; }
.cv-btns { display: grid; gap: 1px; border-top: 1px solid var(--line-soft); background: var(--line-soft); }
.cv-btns span { padding: 7px; background: var(--bg-elev); color: var(--brand-ink); font-size: 11.5px; font-weight: 700; text-align: center; }
.cv-quick {
  display: flex;
  gap: 6px;
  overflow: hidden;
  padding: 0 10px 8px;
  -webkit-mask-image: linear-gradient(90deg, #000000 82%, transparent);
  mask-image: linear-gradient(90deg, #000000 82%, transparent);
}
.cv-quick span {
  flex: none;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cv-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--line-soft); background: var(--line-soft); }
.cv-mt {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 9px 4px;
  background: var(--bg-elev);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.cv-mt svg { width: 20px; height: 20px; color: var(--brand-ink); }
.cv-mt.hot { background: var(--brand-soft); color: var(--brand-ink); }
.cv-menu-bar {
  padding: 5px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-elev);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}
.cv-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-elev);
  color: var(--ink-3);
  font-size: 11px;
}
.cv-input .box { flex: 1; padding: 5px 10px; border-radius: 999px; background: var(--bg-soft); }
.cv-input svg { width: 18px; height: 18px; color: var(--ink-3); }

/* ------------------------------------------------------------------ 入力中の点 */
.typing {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--bg-elev);
}
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: 0.6; }

/* ------------------------------------------------------------------ 動きを止める（自動で動き続けるものを、押して止められる） */
.stopmo { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.stopmo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.stopmo-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.stopmo-btn svg { width: 14px; height: 14px; }
.stopmo-btn span { align-items: center; gap: 6px; }
.stopmo-btn .off-txt { display: inline-flex; }
.stopmo-btn .on-txt { display: none; }
.stopmo:checked ~ * .stopmo-btn .off-txt { display: none; }
.stopmo:checked ~ * .stopmo-btn .on-txt { display: inline-flex; }
.stopmo:focus-visible ~ * .stopmo-btn { outline: 3px solid var(--brand); outline-offset: 3px; }
.motion-note { margin-top: 14px; }

/* ------------------------------------------------------------------ 流れる帯 */
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 7%, #000000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000000 7%, #000000 93%, transparent);
}
.marquee + .marquee { margin-top: 10px; }
.mq-track { display: flex; flex: none; gap: 10px; padding-right: 10px; list-style: none; }
.mq-track li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.mq-track li svg { width: 18px; height: 18px; color: var(--brand); }
.sec-dark .mq-track li { background: var(--bg-elev); border-color: var(--line); }

/* ------------------------------------------------------------------ 動く流れ（行きと帰り） */
.pipe { display: grid; align-items: center; }
@media (min-width: 900px) {
  .pipe { grid-template-columns: minmax(0, 1fr) minmax(96px, 0.62fr) minmax(0, 1.12fr) minmax(96px, 0.62fr) minmax(0, 1fr); }
}
.pipe-node {
  position: relative;
  z-index: 1;
  padding: 26px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-l);
  background: var(--bg-elev);
  box-shadow: var(--shadow-m);
  text-align: center;
}
.pipe-node .ic { margin: 0 auto 12px; }
.pipe-node b { display: block; font-size: 18px; line-height: 1.4; }
.pipe-node .t { display: block; margin-top: 6px; color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.pipe-node .tags { justify-content: center; margin-top: 12px; }
.pipe-node.core {
  border-color: transparent;
  background: linear-gradient(150deg, #2f54c8, #4a3fc0 60%, #6a4bd8);
  color: #ffffff;
  box-shadow: 0 24px 70px var(--glow-1);
}
.pipe-node.core .t { color: rgb(255 255 255 / 82%); }
.pipe-node.core .tag { background: rgb(255 255 255 / 16%); color: #ffffff; }
.pipe-node.core .ic { background: rgb(255 255 255 / 16%); color: #ffffff; }
.pipe-link { position: relative; height: 112px; }
.pipe-link::before,
.pipe-link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
}
.pipe-link::before { left: calc(50% - 16px); }
.pipe-link::after { left: calc(50% + 14px); }
.pipe-link i {
  position: absolute;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 24%, transparent);
}
.pipe-link i.fw { top: 0; left: calc(50% - 20px); }
.pipe-link i.bw { bottom: 0; left: calc(50% + 10px); background: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 24%, transparent); }
.pl-t,
.pl-b {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.pl-t { right: calc(50% + 28px); text-align: right; }
.pl-b { left: calc(50% + 26px); }
.pl-t::after { content: " ↓"; }
.pl-b::before { content: "↑ "; }
@media (min-width: 900px) {
  .pl-t::after { content: " →"; }
  .pl-b::before { content: "← "; }
}
@media (min-width: 900px) {
  .pipe-link { height: 150px; }
  .pipe-link::before,
  .pipe-link::after {
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  }
  .pipe-link::before { top: calc(50% - 16px); }
  .pipe-link::after { top: calc(50% + 14px); }
  .pipe-link i.fw { top: calc(50% - 20px); left: 0; bottom: auto; }
  .pipe-link i.bw { top: calc(50% + 10px); bottom: auto; left: auto; right: 0; }
  .pl-t,
  .pl-b { left: 0; right: 0; transform: none; text-align: center; white-space: normal; }
  .pl-t { top: calc(50% - 52px); }
  .pl-b { top: calc(50% + 26px); }
}

/* ------------------------------------------------------------------ 画面の切り替え（ラジオボタンだけで動く） */
.tour { position: relative; }
.tour-r { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tour-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--bg-soft);
  scrollbar-width: none;
}
.tour-tabs::-webkit-scrollbar { display: none; }
.sec-soft .tour-tabs { background: var(--bg-elev); }
.sec-dark .tour-tabs { background: var(--bg-elev); }
.tour-tabs label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.tour-tabs label svg { width: 18px; height: 18px; }
.tour-tabs label:hover { color: var(--ink); }
.tour-panels { margin-top: 44px; }
.tour-panel { display: none; gap: 40px; align-items: center; }
@media (min-width: 1068px) { .tour-panel { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 56px; } }
.tour-r:nth-of-type(1):checked ~ .tour-panels > .tour-panel:nth-of-type(1),
.tour-r:nth-of-type(2):checked ~ .tour-panels > .tour-panel:nth-of-type(2),
.tour-r:nth-of-type(3):checked ~ .tour-panels > .tour-panel:nth-of-type(3),
.tour-r:nth-of-type(4):checked ~ .tour-panels > .tour-panel:nth-of-type(4),
.tour-r:nth-of-type(5):checked ~ .tour-panels > .tour-panel:nth-of-type(5),
.tour-r:nth-of-type(6):checked ~ .tour-panels > .tour-panel:nth-of-type(6),
.tour-r:nth-of-type(7):checked ~ .tour-panels > .tour-panel:nth-of-type(7),
.tour-r:nth-of-type(8):checked ~ .tour-panels > .tour-panel:nth-of-type(8) { display: grid; }
.tour-r:nth-of-type(1):checked ~ .tour-tabs > label:nth-of-type(1),
.tour-r:nth-of-type(2):checked ~ .tour-tabs > label:nth-of-type(2),
.tour-r:nth-of-type(3):checked ~ .tour-tabs > label:nth-of-type(3),
.tour-r:nth-of-type(4):checked ~ .tour-tabs > label:nth-of-type(4),
.tour-r:nth-of-type(5):checked ~ .tour-tabs > label:nth-of-type(5),
.tour-r:nth-of-type(6):checked ~ .tour-tabs > label:nth-of-type(6),
.tour-r:nth-of-type(7):checked ~ .tour-tabs > label:nth-of-type(7),
.tour-r:nth-of-type(8):checked ~ .tour-tabs > label:nth-of-type(8) { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-s); }
.tour-r:nth-of-type(1):focus-visible ~ .tour-tabs > label:nth-of-type(1),
.tour-r:nth-of-type(2):focus-visible ~ .tour-tabs > label:nth-of-type(2),
.tour-r:nth-of-type(3):focus-visible ~ .tour-tabs > label:nth-of-type(3),
.tour-r:nth-of-type(4):focus-visible ~ .tour-tabs > label:nth-of-type(4),
.tour-r:nth-of-type(5):focus-visible ~ .tour-tabs > label:nth-of-type(5),
.tour-r:nth-of-type(6):focus-visible ~ .tour-tabs > label:nth-of-type(6),
.tour-r:nth-of-type(7):focus-visible ~ .tour-tabs > label:nth-of-type(7),
.tour-r:nth-of-type(8):focus-visible ~ .tour-tabs > label:nth-of-type(8) { outline: 3px solid var(--brand); outline-offset: 2px; }
.tour-text h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.25; }
.tour-text > p { margin-top: 14px; color: var(--ink-3); font-size: 17px; line-height: 1.75; }
.tour-text ul { display: grid; gap: 10px; margin-top: 20px; list-style: none; }
.tour-text li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.6; }
.tour-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-soft);
}
.tour-text li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
  transform: rotate(45deg);
}
.tour-text .more { margin-top: 22px; }
.tour-art { min-width: 0; }

/* ------------------------------------------------------------------ 1 日の流れ */
.daylog { position: relative; display: grid; gap: 22px; max-width: 1040px; margin: 0 auto; list-style: none; }
.daylog::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--brand), var(--violet), var(--gold));
  opacity: 0.45;
}
.daylog > li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.dl-time {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--line-soft);
  border-radius: 50%;
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dl-time.hl { border-color: transparent; background: var(--brand); color: var(--on-brand); }
.dl-card {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  border-radius: var(--r-l);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
}
.sec-soft .dl-card { box-shadow: none; }
.dl-who { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; font-weight: 700; }
.dl-who svg { width: 16px; height: 16px; }
.dl-card h3 { margin-top: 6px; font-size: 20px; line-height: 1.4; }
.dl-card p { margin-top: 8px; color: var(--ink-3); font-size: 15px; line-height: 1.75; }
.dl-card .uses { margin-top: 12px; }
.dl-art { min-width: 0; }
@media (min-width: 900px) {
  .daylog::before { left: 39px; }
  .daylog > li { grid-template-columns: 80px minmax(0, 1fr); gap: 24px; }
  .dl-time { width: 80px; height: 80px; font-size: 16px; }
  .dl-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 28px; }
}

/* ------------------------------------------------------------------ 業種のカード */
.inds { display: grid; gap: 18px; list-style: none; }
@media (min-width: 734px) { .inds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1068px) { .inds { grid-template-columns: repeat(3, 1fr); } }
.ind { --ac: var(--brand); --ac-ink: var(--brand-ink); --ac-soft: var(--brand-soft); }
.ind.c-rose { --ac: var(--rose); --ac-ink: var(--rose); --ac-soft: var(--rose-soft); }
.ind.c-gold { --ac: var(--gold); --ac-ink: var(--gold-ink); --ac-soft: var(--gold-soft); }
.ind.c-teal { --ac: var(--teal); --ac-ink: var(--teal); --ac-soft: var(--teal-soft); }
.ind.c-violet { --ac: var(--violet); --ac-ink: var(--violet); --ac-soft: var(--violet-soft); }
.ind-link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 26px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sec-soft .ind-link { box-shadow: none; }
.ind-link:hover { color: var(--ink); text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-m); }
.ind-link::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 170px;
  background: radial-gradient(90% 100% at 85% 0%, var(--ac-soft), transparent 72%);
  pointer-events: none;
}
.ind-link > * { position: relative; }
.ind-art { display: flex; align-items: flex-end; gap: 8px; height: 76px; }
.ind-art .big {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--ac);
  color: var(--on-brand);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ac) 32%, transparent);
}
.ind-art .big svg { width: 32px; height: 32px; }
.ind-art .sm { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ac-soft); color: var(--ac-ink); }
.ind-art .sm svg { width: 19px; height: 19px; }
.ind-k { margin-top: 18px; color: var(--ac-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.ind-link h3 { margin-top: 4px; font-size: 24px; line-height: 1.35; }
.ind-link p { margin-top: 10px; color: var(--ink-3); font-size: 15px; line-height: 1.75; }
.ind-link .uses { margin-top: 16px; }
.ind-link .more { margin-top: auto; padding-top: 20px; font-size: 16px; }

/* ------------------------------------------------------------------ くらべる表 */
.vs-wrap { overflow-x: auto; border-radius: var(--r-xl); background: var(--bg-elev); box-shadow: var(--shadow-s); }
.sec-soft .vs-wrap { box-shadow: none; }
.vs { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.vs caption { padding: 20px 24px 6px; color: var(--ink-3); font-size: 13px; text-align: left; }
.vs th,
.vs td { padding: 16px 18px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; line-height: 1.6; }
.vs thead th { border-top: 0; color: var(--ink); font-size: 15px; vertical-align: bottom; }
.vs thead th small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 500; }
.vs tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 12em;
  background: var(--bg-elev);
  color: var(--ink-2);
  font-weight: 700;
}
.vs td small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.vs .us { background: color-mix(in srgb, var(--brand-soft) 75%, transparent); }
.vs thead th.us { border-radius: 16px 16px 0 0; background: var(--brand); color: var(--on-brand); }
.vs thead th.us small { color: color-mix(in srgb, var(--on-brand) 80%, transparent); }
.vs tr.grp th { position: static; padding-top: 24px; padding-bottom: 8px; background: none; color: var(--brand-ink); font-size: 13px; letter-spacing: 0.06em; }
.mk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.mk::before {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.mk.yes { color: var(--teal); }
.mk.yes::before { content: "✓"; content: "✓" / ""; background: var(--teal-soft); }
.mk.part { color: var(--gold-ink); }
.mk.part::before { content: "△"; content: "△" / ""; background: var(--gold-soft); font-size: 10px; }
.mk.no { color: var(--ink-3); }
.mk.no::before { content: "−"; content: "−" / ""; background: var(--bg-soft); }

/* ------------------------------------------------------------------ チェックリスト（押すと印が付く。保存はしない） */
.checks { display: grid; gap: 10px; list-style: none; }
@media (min-width: 900px) { .checks.two { grid-template-columns: 1fr 1fr; } }
.checks li { position: relative; }
.checks input {
  position: absolute;
  left: 18px;
  top: 19px;
  width: 22px;
  height: 22px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: var(--bg-elev);
  cursor: pointer;
}
.checks input:checked { border-color: var(--brand); background: var(--brand); }
.checks input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border-right: 2.5px solid var(--on-brand);
  border-bottom: 2.5px solid var(--on-brand);
  transform: rotate(45deg);
}
.checks input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.checks label {
  display: block;
  height: 100%;
  padding: 16px 18px 16px 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  background: var(--bg-elev);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.checks input:checked + label { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: var(--brand-soft); }
.checks label b { display: block; font-size: 16px; line-height: 1.5; }
.checks label span { display: block; margin-top: 4px; color: var(--ink-3); font-size: 14px; line-height: 1.7; }

/* ------------------------------------------------------------------ 用語集 */
.gloss-index {
  position: sticky;
  top: 66px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 56px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-s);
}
.gloss-index a {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.gloss-index a:hover { background: var(--brand-soft); color: var(--brand-ink); text-decoration: none; }
@media (max-width: 733px) { .gloss-index { position: static; border-radius: var(--r-l); } }
.gloss-group { max-width: 920px; margin: 0 auto; scroll-margin-top: 150px; }
.gloss-group + .gloss-group { margin-top: 64px; }
.gloss-group > h2 { padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 28px; }
.gloss-list { margin: 0; }
.gloss-item { display: grid; gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 150px; }
@media (min-width: 900px) { .gloss-item { grid-template-columns: 15em minmax(0, 1fr); } }
.gloss-item dt { font-size: 18px; font-weight: 700; line-height: 1.5; }
.gloss-item dt small { display: block; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.gloss-item dt .tag { margin-top: 6px; }
.gloss-item dd { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.85; }
.gloss-item dd p + p { margin-top: 8px; }
.gloss-rel { color: var(--ink-3); font-size: 14px; }
.gloss-item:target { margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: var(--r-m); background: var(--brand-soft); }

/* ------------------------------------------------------------------ 資料のカード */
.dl {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 32px 26px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
}
.sec-soft .dl { box-shadow: none; }
@media (min-width: 900px) { .dl { grid-template-columns: 320px minmax(0, 1fr); gap: 52px; padding: 44px 52px; } }
.dl-cover { position: relative; width: 300px; max-width: 100%; height: 230px; margin: 0 auto; }
.dl-cover .pg {
  position: absolute;
  width: 200px;
  aspect-ratio: 297 / 210;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-m);
}
.dl-cover .pg:nth-child(1) { left: 0; top: 70px; transform: rotate(-7deg); }
.dl-cover .pg:nth-child(2) { left: 46px; top: 38px; transform: rotate(-1.5deg); }
.dl-cover .pg:nth-child(3) { left: 92px; top: 6px; transform: rotate(4deg); }
.pg-lines { display: grid; gap: 7px; padding: 18px 16px; }
.pg-lines i { display: block; height: 6px; border-radius: 3px; background: var(--line-soft); }
.pg-lines i:nth-child(1) { width: 55%; height: 9px; background: var(--brand-soft); }
.pg-lines i:nth-child(2) { width: 90%; }
.pg-lines i:nth-child(3) { width: 75%; }
.pg-lines i:nth-child(4) { width: 82%; }
.pg-cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  border-color: transparent !important;
  background:
    radial-gradient(70% 90% at 80% 10%, rgb(255 255 255 / 30%), transparent 60%),
    linear-gradient(135deg, #2f54c8, #7a55e6 60%, #e9a23b) !important;
  color: #ffffff;
}
.pg-cover svg { width: 26px; height: 26px; margin-bottom: auto; }
.pg-cover b { font-size: 15px; letter-spacing: 0.06em; }
.pg-cover span { font-size: 9px; opacity: 0.9; }
.dl-body h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.3; }
.dl-body > p { margin-top: 12px; color: var(--ink-3); font-size: 16px; line-height: 1.75; }
.dl-body ul { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.dl-body .actions { margin-top: 26px; }
.dl-meta { margin-top: 14px; color: var(--ink-3); font-size: 13px; }

/* ------------------------------------------------------------------ 機能の地図 */
.fmap { display: grid; gap: 16px; list-style: none; }
@media (min-width: 734px) { .fmap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1068px) { .fmap { grid-template-columns: repeat(4, 1fr); } }
.fm {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 22px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sec-soft .fm { box-shadow: none; }
.sec-dark .fm { background: var(--bg-elev); }
.fm:hover { color: var(--ink); text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-m); }
.fm .ic { width: 52px; height: 52px; border-radius: 16px; }
.fm .ic svg { width: 28px; height: 28px; }
.fm h3 { margin-top: 16px; font-size: 21px; line-height: 1.35; }
.fm p { margin-top: 8px; color: var(--ink-3); font-size: 14.5px; line-height: 1.7; }
.fm .more { margin-top: auto; padding-top: 16px; font-size: 15px; }

/* ------------------------------------------------------------------ まわる図 */
.orbit { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.orbit::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 2px dashed var(--line);
  border-radius: 50%;
}
.orbit::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-1), transparent);
  filter: blur(6px);
}
.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 4px;
  width: 30cqw;
  height: 30cqw;
  padding: 10px;
  transform: translate(-50%, -50%);
  border-radius: 28%;
  background: linear-gradient(150deg, #2f54c8, #4a3fc0 60%, #6a4bd8);
  color: #ffffff;
  box-shadow: 0 24px 70px var(--glow-1);
  text-align: center;
}
.orbit-core svg { width: 9cqw; height: 9cqw; }
.orbit-core b { font-size: clamp(14px, 4.2cqw, 24px); letter-spacing: 0.08em; }
.orbit-ring { position: absolute; inset: 0; z-index: 3; list-style: none; }
.orbit-ring li {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19cqw;
  margin: -9.5cqw 0 0 -9.5cqw;
  transform: rotate(var(--a)) translateX(37cqw) rotate(calc(-1 * var(--a)));
}
.orbit-ring li:nth-child(1) { --a: -90deg; }
.orbit-ring li:nth-child(2) { --a: -45deg; }
.orbit-ring li:nth-child(3) { --a: 0deg; }
.orbit-ring li:nth-child(4) { --a: 45deg; }
.orbit-ring li:nth-child(5) { --a: 90deg; }
.orbit-ring li:nth-child(6) { --a: 135deg; }
.orbit-ring li:nth-child(7) { --a: 180deg; }
.orbit-ring li:nth-child(8) { --a: 225deg; }
.orbit-ring li > span {
  display: grid;
  place-items: center;
  gap: 2px;
  aspect-ratio: 1;
  padding: 6%;
  border: 1px solid var(--line-soft);
  border-radius: 26%;
  background: var(--bg-elev);
  box-shadow: var(--shadow-m);
  font-size: clamp(10px, 2.5cqw, 13px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.orbit-ring li svg { width: 6cqw; height: 6cqw; color: var(--brand-ink); }

/* ------------------------------------------------------------------ 前とあと */
.bfaf { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .bfaf { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; } }
.bf,
.af { padding: 28px 26px; border-radius: var(--r-xl); }
.bf { background: var(--bg-soft); }
.sec-soft .bf { background: var(--bg-elev); }
.af {
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--grad) border-box;
  box-shadow: var(--shadow-m);
}
.bfaf-h { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
.bfaf-h svg { width: 20px; height: 20px; }
.af .bfaf-h { color: var(--brand-ink); }
.bf ul,
.af ul { display: grid; gap: 12px; margin-top: 16px; list-style: none; }
.bf li,
.af li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.65; }
.bf li { color: var(--ink-2); }
.bf li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 13px; height: 2px; border-radius: 1px; background: var(--ink-3); }
.af li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); }
.af li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
  transform: rotate(45deg);
}
.bfaf-arrow { display: grid; place-items: center; color: var(--gold); }
.bfaf-arrow svg { width: 36px; height: 36px; transform: rotate(90deg); }
@media (min-width: 900px) { .bfaf-arrow svg { transform: none; } }

/* ------------------------------------------------------------------ 大きな数字の帯 */
.bignums { display: grid; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 734px) { .bignums { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1068px) { .bignums { grid-template-columns: repeat(4, 1fr); } .bignums.three { grid-template-columns: repeat(3, 1fr); } }
.bignums li { padding: 30px 6px 28px; border-bottom: 1px solid var(--line); }
@media (min-width: 734px) { .bignums li { padding: 34px 22px 30px; } }
.bn {
  display: block;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(3.4rem, 2.4rem + 3.6vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.bn small { font-size: 0.36em; letter-spacing: 0; }
.bl { display: block; margin-top: 14px; color: var(--ink-2); font-size: 16px; font-weight: 600; line-height: 1.55; }
.bl small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------------ ページの中の目次（ナビの下に張り付く） */
:root:has(.subnav) { scroll-padding-top: 118px; }
.subnav {
  position: sticky;
  top: 56px;
  z-index: 40;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@supports not (backdrop-filter: blur(1px)) { .subnav { background: var(--bg); } }
.subnav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(1120px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 8px var(--gutter);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.subnav a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.subnav .sn-title { flex: none; margin-right: 10px; color: var(--ink); font-size: 15px; font-weight: 800; white-space: nowrap; }

/* ------------------------------------------------------------------ スマホのまわり */
.scene { position: relative; display: grid; justify-items: center; gap: 10px; }
.scene::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-2), transparent);
  filter: blur(10px);
  pointer-events: none;
}
.scene > * { position: relative; }
.scene .phone { z-index: 2; margin-bottom: 8px; }
.chipf {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 300px);
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-m);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.chipf .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; }
.chipf .ic svg { width: 17px; height: 17px; }
.chipf b { display: block; font-size: 13px; }
.chipf .s { display: block; color: var(--ink-3); font-size: 12px; }
@media (min-width: 900px) {
  .scene { display: block; min-height: 600px; padding: 20px 0; }
  .scene .phone { margin: 0 auto; }
  .chipf { position: absolute; width: auto; max-width: 250px; }
  .chipf.p1 { top: 7%; left: 0; }
  .chipf.p2 { top: 22%; right: 0; }
  .chipf.p3 { top: 46%; left: 2%; }
  .chipf.p4 { top: 60%; right: 2%; }
  .chipf.p5 { bottom: 8%; left: 6%; }
  .chipf.p6 { bottom: 4%; right: 8%; }
}

/* ------------------------------------------------------------------ 設定の手順・使う機能 */
.recipe { display: grid; gap: 14px; list-style: none; counter-reset: rc; }
@media (min-width: 900px) { .recipe.two { grid-template-columns: 1fr 1fr; } }
.recipe > li {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--r-l);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  counter-increment: rc;
}
.sec-soft .recipe > li { box-shadow: none; }
.recipe > li::before {
  content: counter(rc);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--grad);
  color: var(--on-brand);
  font-size: 21px;
  font-weight: 800;
}
.recipe h3 { font-size: 19px; line-height: 1.45; }
.recipe p { margin-top: 6px; color: var(--ink-3); font-size: 15px; line-height: 1.75; }
.recipe .uses { margin-top: 12px; }
.uses { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.uses > li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.sec-soft .uses > li { background: var(--bg-elev); }
.sec-soft .ind-link .uses > li,
.sec-soft .recipe .uses > li,
.sec-soft .dl-card .uses > li { background: var(--bg-soft); }
.uses > li > a { color: inherit; }
.uses > li:has(a):hover { background: var(--brand-soft); color: var(--brand-ink); }
.uses svg { width: 14px; height: 14px; color: var(--brand); }

/* ------------------------------------------------------------------ 2 つの画面（管理の画面 → お客様のスマホ） */
.duo { display: grid; gap: 26px; align-items: center; justify-items: center; }
@media (min-width: 1068px) { .duo { grid-template-columns: minmax(0, 1fr) auto auto; gap: 34px; } }
.duo > .win { width: 100%; }
.duo-arrow { display: grid; place-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; font-weight: 700; line-height: 1.4; text-align: center; }
.duo-arrow svg { width: 40px; height: 40px; color: var(--gold); transform: rotate(90deg); }
@media (min-width: 1068px) { .duo-arrow svg { transform: none; } }

/* ------------------------------------------------------------------ 手順の線 */
.rail { display: grid; gap: 18px; list-style: none; counter-reset: rl; }
.rail > li { position: relative; min-height: 52px; padding: 2px 0 0 68px; counter-increment: rl; }
.rail > li::before {
  content: counter(rl);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--brand);
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--brand-ink);
  font-size: 19px;
  font-weight: 800;
}
.rail > li::after { content: ""; position: absolute; left: 24px; top: 50px; bottom: -18px; width: 2px; background: var(--line); }
.rail > li:last-child::after { display: none; }
.rail h3 { font-size: 18px; line-height: 1.45; }
.rail p { margin-top: 6px; color: var(--ink-3); font-size: 14.5px; line-height: 1.75; }
.rail .tag { margin-top: 10px; }
@media (min-width: 1068px) {
  .rail.c4 { grid-template-columns: repeat(4, 1fr); }
  .rail.c5 { grid-template-columns: repeat(5, 1fr); }
  .rail.c6 { grid-template-columns: repeat(6, 1fr); }
  .rail.c4 > li,
  .rail.c5 > li,
  .rail.c6 > li { padding: 70px 6px 0 0; }
  .rail.c4 > li::after,
  .rail.c5 > li::after,
  .rail.c6 > li::after { left: 50px; right: -18px; top: 24px; bottom: auto; width: auto; height: 2px; }
}

/* ------------------------------------------------------------------ そのほかの小さな部品 */
.statement {
  max-width: 1000px;
  margin: 0 auto;
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-wrap: balance;
  word-break: auto-phrase;
}
.statement .dim { color: var(--ink-3); }
.fic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.fic::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.phero .fic { margin-bottom: 14px; }
.big-ic {
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  border-radius: 26px;
  background: linear-gradient(140deg, #2f54c8, #7a55e6 60%, #e9a23b);
  color: #ffffff;
  box-shadow: 0 18px 50px var(--glow-2);
}
.big-ic svg { width: 44px; height: 44px; stroke-width: 1.6; }
.win.mini { border-radius: 12px; box-shadow: var(--shadow-m); font-size: 12px; }
.win.mini .win-bar { height: 30px; gap: 10px; padding: 0 10px; }
.win.mini .win-dots { gap: 5px; }
.win.mini .win-dots i { width: 8px; height: 8px; }
.win.mini .win-addr { padding: 2px 10px; font-size: 10.5px; }
.note.blue { background: var(--brand-soft); }
.note.blue strong { color: var(--brand-ink); }
.note.gray { background: var(--bg-soft); }
.note.gray strong { color: var(--ink); }
.sec-soft .note.gray { background: var(--bg-elev); }
@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.glow {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    conic-gradient(from var(--ang), #2f54c8, #7a55e6, #e9a23b, #2f54c8) border-box;
}
.split-art { min-width: 0; }
.cols2 { display: grid; gap: 16px; }
@media (min-width: 734px) { .cols2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.card .fix {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.7;
}
.card .fix b { flex: none; color: var(--brand-ink); }
.dl-art .thread.boxed .thread-body { padding: 12px; }
.dl-art .toast { box-shadow: var(--shadow-m); }
.dl-art .canvas { padding: 18px 14px; }
.dl-art .flow { gap: 20px; }
.dl-art .node + .node::before { top: -21px; height: 20px; }
.center-actions { justify-content: center; }
.mt-l { margin-top: 56px; }
.mt-m { margin-top: 32px; }
.mt-s { margin-top: 12px; }

/* ------------------------------------------------------------------ 動き（足した部品の分。動きを減らす設定では、上の「動き」で全部止まる） */
@media (prefers-reduced-motion: no-preference) {
  .play .s1 { animation: seq1 16s ease-in-out infinite both; }
  .play .s2 { animation: seq2 16s ease-in-out infinite both; }
  .play .s3 { animation: seq3 16s ease-in-out infinite both; }
  .play .s4 { animation: seq4 16s ease-in-out infinite both; }
  .play .s5 { animation: seq5 16s ease-in-out infinite both; }
  .play .s6 { animation: seq6 16s ease-in-out infinite both; }
  .play .s7 { animation: seq7 16s ease-in-out infinite both; }
  .play .s8 { animation: seq8 16s ease-in-out infinite both; }
  .typing i { animation: blink 1.2s ease-in-out infinite both; }
  .typing i:nth-child(2) { animation-delay: 0.2s; }
  .typing i:nth-child(3) { animation-delay: 0.4s; }
  .mq-track { animation: mq 80s linear infinite; }
  .marquee.rev .mq-track { animation-direction: reverse; }
  .marquee:hover .mq-track { animation-play-state: paused; }
  .pipe-link i.fw { animation: pipe-down 2.8s linear infinite; }
  .pipe-link i.bw { animation: pipe-up 2.8s linear -1.4s infinite; }
  .orbit-ring { animation: orbit 90s linear infinite; }
  .orbit-ring li > span { animation: orbit 90s linear infinite reverse; }
  .glow { animation: glow-spin 9s linear infinite; }
  .chipf.p1, .chipf.p4 { animation: bob 7s ease-in-out infinite; }
  .chipf.p2, .chipf.p5 { animation: bob 8s ease-in-out -2s infinite; }
  .chipf.p3, .chipf.p6 { animation: bob 9s ease-in-out -4s infinite; }
  .tour-panel { animation: tour-in 0.45s ease both; }
  .toasts .toast { grid-area: 1 / 1; }
  .toasts .toast:nth-child(n+3) { display: flex; }
  .toasts .toast:nth-child(1) { animation: tst1 16s ease-in-out infinite both; }
  .toasts .toast:nth-child(2) { animation: tst2 16s ease-in-out infinite both; }
  .toasts .toast:nth-child(3) { animation: tst3 16s ease-in-out infinite both; }
  .toasts .toast:nth-child(4) { animation: tst4 16s ease-in-out infinite both; }
  .ind-art .big { transition: transform 0.3s ease; }
  .ind-link:hover .ind-art .big { transform: rotate(-6deg) scale(1.05); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .pipe-link i.fw { animation-name: pipe-right; }
  .pipe-link i.bw { animation-name: pipe-left; }
}
@media (max-width: 899px) {
  .chipf { animation: none !important; }
}
@keyframes seq1 { 0%, 2% { opacity: 0; transform: translateY(8px); } 5%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes seq2 { 0%, 12% { opacity: 0; transform: translateY(8px); } 15%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes seq3 { 0%, 22% { opacity: 0; transform: translateY(8px); } 25%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes seq4 { 0%, 32% { opacity: 0; transform: translateY(8px); } 35%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes seq5 { 0%, 42% { opacity: 0; transform: translateY(8px); } 45%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes seq6 { 0%, 52% { opacity: 0; transform: translateY(8px); } 55%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes seq7 { 0%, 62% { opacity: 0; transform: translateY(8px); } 65%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes seq8 { 0%, 72% { opacity: 0; transform: translateY(8px); } 75%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tst1 { 0%, 10% { opacity: 0; transform: translateY(-10px); } 13%, 28% { opacity: 1; transform: none; } 31%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes tst2 { 0%, 30% { opacity: 0; transform: translateY(-10px); } 33%, 48% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes tst3 { 0%, 50% { opacity: 0; transform: translateY(-10px); } 53%, 68% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes tst4 { 0%, 70% { opacity: 0; transform: translateY(-10px); } 73%, 92% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes mq { to { transform: translateX(-100%); } }
@keyframes pipe-down { from { top: 0; } to { top: calc(100% - 10px); } }
@keyframes pipe-up { from { bottom: 0; } to { bottom: calc(100% - 10px); } }
@keyframes pipe-right { from { left: 0; } to { left: calc(100% - 10px); } }
@keyframes pipe-left { from { right: 0; } to { right: calc(100% - 10px); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes glow-spin { to { --ang: 360deg; } }
@keyframes tour-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 「動きを止める」を押したとき・動きを減らす設定のとき: 自動で動き続けるものを止め、全部を見せる */
.stopmo:checked ~ * .play .s1,
.stopmo:checked ~ * .play .s2,
.stopmo:checked ~ * .play .s3,
.stopmo:checked ~ * .play .s4,
.stopmo:checked ~ * .play .s5,
.stopmo:checked ~ * .play .s6,
.stopmo:checked ~ * .play .s7,
.stopmo:checked ~ * .play .s8,
.stopmo:checked ~ * .typing i,
.stopmo:checked ~ * .mq-track,
.stopmo:checked ~ * .pipe-link i,
.stopmo:checked ~ * .orbit-ring,
.stopmo:checked ~ * .orbit-ring li > span,
.stopmo:checked ~ * .glow,
.stopmo:checked ~ * .float,
.stopmo:checked ~ * .chipf,
.stopmo:checked ~ * .toasts .toast { animation: none !important; }
.stopmo:checked ~ * .toasts .toast { grid-area: auto; }
.stopmo:checked ~ * .toasts .toast:nth-child(n+3) { display: none; }
.stopmo:checked ~ * .marquee {
  flex-wrap: wrap;
  justify-content: center;
  -webkit-mask-image: none;
  mask-image: none;
}
.stopmo:checked ~ * .mq-track { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; padding-right: 0; }
.stopmo:checked ~ * .mq-track[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .mq-track { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .mq-track[aria-hidden="true"] { display: none; }
  .stopmo-btn { display: none; }
}

/* 印刷: 切り替えの画面は全部を出す */
@media print {
  .tour-tabs,
  .stopmo-btn,
  .subnav,
  .toasts,
  .mq-track[aria-hidden="true"] { display: none !important; }
  .tour-panel { display: grid !important; margin-bottom: 32px; }
  .marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .mq-track { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ 足した部品（features-a）: ワークフローのノードの一覧（.fa-palette・.fa-node・.fa-grp）・スマホのロック画面（.fa-lock）・曜日の並び（.fa-week） */
/* ワークフローのノードの一覧: h3.fa-grp（まとまりの見出し）＋ ul.fa-palette > li.fa-node（.act アクション・.hs HubSpot）
   > p.fa-nk（絵記号・種類・札）＋ h4（名前）＋ p（中身）＋ p.fa-ports（出口）＋ ul.uses（選べること） */
.fa-grp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 56px 0 18px;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
}
.sec-head + .fa-grp { margin-top: 0; }
.fa-grp .tag { font-size: 12px; }
.fa-grp-note { margin: -6px 0 20px; color: var(--ink-3); font-size: 15px; line-height: 1.7; }
.fa-palette { display: grid; gap: 14px; list-style: none; }
@media (min-width: 734px) { .fa-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .fa-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fa-node {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 22px 20px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-l);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
}
.sec-soft .fa-node { box-shadow: none; }
.fa-node::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--brand); }
.fa-node.act::before { background: var(--violet); }
.fa-node.hs::before { background: var(--gold); }
.fa-nk { display: flex; align-items: center; gap: 8px; color: var(--brand-ink); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; }
.fa-node.act .fa-nk { color: var(--violet); }
.fa-node.hs .fa-nk { color: var(--gold-ink); }
.fa-nk svg { width: 18px; height: 18px; }
.fa-nk .tag { margin-left: auto; }
.fa-node h4 { margin-top: 10px; font-size: 18px; line-height: 1.4; }
.fa-node > p { margin-top: 6px; color: var(--ink-3); font-size: 14.5px; line-height: 1.75; }
.fa-node > p.fa-ports { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
.fa-node .uses { margin-top: auto; padding-top: 14px; }
.sec-soft .fa-node .uses > li { background: var(--bg-soft); }

/* スマホのロック画面（プッシュの知らせ）: .phone > .phone-screen.fa-lock > .phone-top ＋ p.fa-lock-time ＋ p.fa-lock-date ＋ .toast …
   （明るい・暗い表示で同じ見た目にするため、中の色を決めておく） */
.phone-screen.fa-lock {
  --bg-elev: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #5f5f66;
  --line-soft: rgb(255 255 255 / 55%);
  --brand-soft: #eef2fd;
  --brand-ink: #2a4bb3;
  --violet-soft: #f3effd;
  --violet: #6a45d6;
  --gold-soft: #fdf3e2;
  --gold-ink: #8a5a0b;
  --teal-soft: #e3f5f2;
  --teal: #0b7a6b;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 18px;
  background:
    radial-gradient(70% 45% at 25% 18%, rgb(255 255 255 / 30%), transparent 65%),
    radial-gradient(60% 40% at 85% 85%, rgb(233 162 59 / 55%), transparent 70%),
    linear-gradient(165deg, #1f3a8f 0%, #3b47c4 40%, #6a4bd8 72%, #a46ad0 100%);
  color: #ffffff;
}
.fa-lock-time { margin-top: 4px; font-size: 52px; font-weight: 300; line-height: 1; text-align: center; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.fa-lock-date { margin-bottom: 12px; font-size: 12px; font-weight: 600; text-align: center; opacity: 0.92; }
.fa-lock .toast { padding: 9px 11px; border-radius: 14px; color: var(--ink); box-shadow: 0 6px 18px rgb(0 0 0 / 18%); font-size: 12px; }
.fa-lock .toast strong { font-size: 12px; }
.fa-lock .toast span.s { font-size: 11px; }
.fa-lock .toast .ic { width: 28px; height: 28px; border-radius: 8px; }
.fa-lock .toast .ic svg { width: 15px; height: 15px; }

/* 曜日の並び（配信の繰り返し）: .fa-week > span × 7（.on が選んだ曜日） */
.fa-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fa-week span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}
.fa-week span.on { background: var(--brand); color: var(--on-brand); }
.tile-dark .fa-week span:not(.on) { background: var(--bg-elev); }

/* ------------------------------------------------------------------ 足した部品（features-b）: Web サイトの見本（.fb-site）・重ねた窓と端末（.fb-stack・.fb-term）・ドーナツ（.fb-donut）・横の帯グラフ（.fb-bars）・設定の行とスイッチ（.fb-set・.fb-sw）・API の一覧（.fb-ops）・等幅の字（.fb-mono） */
/* Web サイトの見本（サイトの CTA の見え方）: .win > .fb-site（.dim で後ろを暗く）> .fb-site-nav（> span.fb-logo ＋ b ＋ i × 3）・.fb-site-hero・
   .fb-site-lines（> i × n）＋ CTA は .fb-cta-float（右下のボタン）・.fb-cta-pop（ポップアップ。> span.x・b・span・span.go）・
   .fb-cta-bar（下の帯。> span.go）・.fb-cta-inline（ページの中。> span.go） */
.fb-site { position: relative; min-height: 330px; overflow: hidden; background: var(--bg-elev); }
.fb-site-nav { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.fb-site-nav b { font-size: 12px; white-space: nowrap; }
.fb-site-nav i { display: block; width: 34px; height: 6px; flex: none; border-radius: 3px; background: var(--line-soft); }
.fb-site-nav b + i { margin-left: auto; }
.fb-logo { width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--grad); }
.fb-site-hero {
  display: grid;
  place-items: center;
  height: 118px;
  margin: 16px;
  border-radius: 12px;
  background:
    radial-gradient(60% 90% at 25% 20%, rgb(255 255 255 / 40%), transparent 60%),
    linear-gradient(135deg, var(--brand-soft), var(--violet-soft) 55%, var(--gold-soft));
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.fb-site-lines { display: grid; gap: 8px; padding: 0 16px 18px; }
.fb-site-lines i { display: block; width: 92%; height: 7px; border-radius: 4px; background: var(--line-soft); }
.fb-site-lines i:nth-child(3n+2) { width: 76%; }
.fb-site-lines i:nth-child(3n) { width: 60%; }
.fb-site.dim::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / 42%); }
.fb-cta-float {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-m);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.fb-cta-float svg { width: 15px; height: 15px; }
.fb-cta-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(82%, 280px);
  padding: 20px 16px 16px;
  transform: translate(-50%, -46%);
  border-radius: 16px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-l);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.fb-cta-pop b { display: block; font-size: 14.5px; line-height: 1.45; }
.fb-cta-pop > span { display: block; margin-top: 4px; color: var(--ink-3); }
.fb-cta-pop .x { position: absolute; top: 8px; right: 12px; margin: 0; color: var(--ink-3); font-size: 15px; line-height: 1; }
.fb-cta-pop .tag { margin-top: 8px; }
.fb-cta-pop .go { display: block; margin-top: 12px; padding: 8px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-weight: 700; }
.fb-cta-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
}
.fb-cta-bar .go,
.fb-cta-inline .go {
  flex: none;
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  white-space: nowrap;
}
.fb-cta-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 18px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}
.fb-cta-inline svg { width: 22px; height: 22px; flex: none; color: var(--brand-ink); }

/* 重ねた窓: .fb-stack > .win（下）＋ .fb-over（上に重ねる窓。広い画面では右下に重ね、狭い画面では下に並べる）。端末の窓 .win.fb-term（中に pre.code） */
.fb-stack { position: relative; }
.fb-over { position: relative; z-index: 3; margin-top: 18px; }
@media (min-width: 900px) {
  .fb-stack { padding-bottom: 120px; }
  .fb-stack > .win:first-child { width: 84%; }
  .fb-over { position: absolute; right: 0; bottom: 0; width: min(560px, 58%); margin-top: 0; }
}
.win.fb-term { border-color: #2a2a2e; background: #0b0b0d; }
.win.fb-term .win-bar { border-color: #2a2a2e; background: #161618; }
.win.fb-term .win-dots i { background: #3a3a3f; }
.win.fb-term .win-addr { background: #232326; color: #a1a1a6; }
.win.fb-term .code { border: 0; border-radius: 0; font-size: 12.5px; }
.code .g { color: #4fd1bd; }

/* ドーナツ（SVG）: .fb-pie > svg.fb-donut（> circle.fb-ring ＋ circle.fb-seg.fb-c1〜.fb-c4。長さは stroke-dasharray の属性で）＋ ul.fb-legend > li > i.fb-c1〜4 ＋ 名前 ＋ b */
.fb-pie { display: grid; gap: 14px; align-items: center; }
@media (min-width: 520px) { .fb-pie { grid-template-columns: 128px minmax(0, 1fr); } }
.fb-donut { width: 128px; max-width: 100%; height: auto; margin: 0 auto; }
.fb-donut circle { fill: none; stroke-width: 16; }
.fb-ring { stroke: var(--line-soft); }
.fb-seg.fb-c1 { stroke: var(--brand); }
.fb-seg.fb-c2 { stroke: var(--violet); }
.fb-seg.fb-c3 { stroke: var(--gold); }
.fb-seg.fb-c4 { stroke: var(--teal); }
.fb-donut-n { fill: var(--ink); font-family: var(--font); font-size: 19px; font-weight: 800; }
.fb-donut-l { fill: var(--ink-3); font-family: var(--font); font-size: 10px; }
.fb-legend { display: grid; gap: 7px; list-style: none; font-size: 12.5px; }
.fb-legend li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fb-legend i { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--brand); }
.fb-legend i.fb-c2 { background: var(--violet); }
.fb-legend i.fb-c3 { background: var(--gold); }
.fb-legend i.fb-c4 { background: var(--teal); }
.fb-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* 横の帯グラフ: ul.fb-bars > li > span.fb-bl（名前）＋ span.fb-bv（数）＋ span.fb-bt > i.fb-w5〜.fb-w100（長さ。色は .fb-c2〜.fb-c4） */
.fb-bars { display: grid; gap: 12px; list-style: none; }
.fb-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: baseline; font-size: 13px; line-height: 1.45; }
.fb-bl { min-width: 0; color: var(--ink-2); font-weight: 600; }
.fb-bv { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-bt { grid-column: 1 / -1; height: 10px; overflow: hidden; border-radius: 999px; background: var(--line-soft); }
.fb-bt i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--grad); }
.fb-bt i.fb-c2 { background: var(--violet); }
.fb-bt i.fb-c3 { background: var(--gold); }
.fb-bt i.fb-c4 { background: var(--teal); }
.fb-w5 { width: 5% !important; } .fb-w10 { width: 10% !important; } .fb-w15 { width: 15% !important; } .fb-w20 { width: 20% !important; }
.fb-w25 { width: 25% !important; } .fb-w30 { width: 30% !important; } .fb-w35 { width: 35% !important; } .fb-w40 { width: 40% !important; }
.fb-w45 { width: 45% !important; } .fb-w50 { width: 50% !important; } .fb-w55 { width: 55% !important; } .fb-w60 { width: 60% !important; }
.fb-w65 { width: 65% !important; } .fb-w70 { width: 70% !important; } .fb-w75 { width: 75% !important; } .fb-w80 { width: 80% !important; }
.fb-w85 { width: 85% !important; } .fb-w90 { width: 90% !important; } .fb-w95 { width: 95% !important; } .fb-w100 { width: 100% !important; }

/* 設定の行とスイッチ（設定の画面のイメージ）: .fb-set > .fb-set-row > span.k ＋ span.v（右に寄せる。中に span.fb-sw〈入〉・span.fb-sw.off〈切〉や .tag） */
.fb-set { display: grid; }
.fb-set-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.5; }
.fb-set-row:last-child { border-bottom: 0; }
.fb-set-row .k { min-width: 0; color: var(--ink-2); font-weight: 700; }
.fb-set-row .v { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ink-3); text-align: right; }
.fb-sw { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; border-radius: 999px; background: var(--teal); }
.fb-sw::after { content: ""; position: absolute; top: 2px; left: 16px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); }
.fb-sw.off { background: var(--line); }
.fb-sw.off::after { left: 2px; }

/* API の一覧（説明のページのイメージ）: .fb-ops > .fb-op-h（まとまりの見出し）・.fb-op（> span.tag〈GET・POST〉＋ span.fb-mono〈道〉＋ span.d〈中身〉） */
.fb-ops { overflow: hidden; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-elev); }
.fb-op-h { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); background: var(--bg-sunk); color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.fb-op { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.fb-op:last-child { border-bottom: 0; }
.fb-op .tag { justify-content: center; }
.fb-op .fb-mono { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fb-op .d { grid-column: 2; min-width: 0; color: var(--ink-3); font-size: 11.5px; }
@media (min-width: 734px) {
  .fb-op { grid-template-columns: 48px minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .fb-op .d { grid-column: auto; }
}
.fb-mono { font-family: var(--mono); letter-spacing: 0; }

/* ------------------------------------------------------------------ 足した部品（industries-a）: 業種の使い方のページ（/usecases/salon/ など）の小見出し（.ia-sub）・前置き（.ia-lead）・ボタンの中身（.ia-btns）・読ませる表（.tbl.ia-wrap）・「だれに」とトークの切り抜き（.ia-who・.ia-talk）・横に並ぶカード（.ia-cards） */
/* 節の中の小見出し（カードの外の h3） */
.ia-sub { margin: 0 0 18px; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.35; }
.ia-sub + .tbl-wrap { margin-top: 6px; }
/* 小見出しのすぐ下の前置き（.lede と一緒に使う） */
.lede.ia-lead { max-width: 760px; margin: 0 auto 44px; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem); }
/* ボタンの中身の一覧（名前と説明の 2 列。スマホでは縦に） */
.ia-btns { display: grid; gap: 8px; list-style: none; }
.ia-btns li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
  padding: 11px 16px;
  border-radius: var(--r-m);
  background: var(--bg-soft);
  font-size: 15px;
  line-height: 1.6;
}
.sec-soft .ia-btns li { background: var(--bg-elev); }
.ia-btns b { color: var(--ink); font-weight: 700; }
.ia-btns span { color: var(--ink-3); }
@media (max-width: 599px) { .ia-btns li { grid-template-columns: minmax(0, 1fr); } }
.ia-note { margin-top: 16px; color: var(--ink-3); font-size: 14.5px; line-height: 1.75; }
/* 読ませる表（字を折り返す。せまい画面では表の中だけ横に動かす） */
.tbl-wrap.ia-tw { background: var(--bg-elev); }
.tbl.ia-wrap { min-width: 620px; font-size: 14.5px; }
.tbl.ia-wrap th,
.tbl.ia-wrap td { padding: 12px 14px; white-space: normal; vertical-align: top; line-height: 1.6; }
.tbl.ia-wrap thead th { font-size: 12px; }
.tbl.ia-wrap tbody th { background: none; color: var(--ink); font-size: 14.5px; letter-spacing: 0; }
.tbl.ia-wrap tbody tr:last-child th,
.tbl.ia-wrap tbody tr:last-child td { border-bottom: 0; }
.tbl.ia-wrap .tag { font-size: 12px; }
/* ギャラリーのカード: 「だれに」と、下にそろえるトークの切り抜き */
.gcard .ia-who { margin-bottom: 18px; font-size: 14px; line-height: 1.7; }
.ia-who b { display: block; color: var(--brand-ink); font-size: 12px; letter-spacing: 0.06em; }
.gcard .ia-talk { margin-top: auto; }
.ia-talk .cv-body { padding: 14px 12px; }
.ia-talk .cv-card { width: 92%; }
/* 横に並ぶカード（物件の案内などの、カードタイプのメッセージ） */
.ia-cards {
  display: flex;
  gap: 8px;
  overflow: hidden;
  padding: 12px;
  -webkit-mask-image: linear-gradient(90deg, #000000 78%, transparent);
  mask-image: linear-gradient(90deg, #000000 78%, transparent);
}
.ia-cards .cv-card { flex: none; width: 168px; }
.ia-cards .cv-img { height: 74px; }
/* 1 日の流れの中の小さなリッチメニュー（せまい画面でも 3 列に収める） */
.dl-art.rmenu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl-art.rmenu .rm-tile { aspect-ratio: auto; min-height: 76px; padding: 18px 4px 10px; font-size: 11.5px; line-height: 1.35; }

/* ------------------------------------------------------------------ 足した部品（features-b）: 中身で広がらない格子（.fb-min。子の幅の下限を 0 にして、狭い画面で横にはみ出さない） */
.fb-min > * { min-width: 0; }
/* ------------------------------------------------------------------ 足した部品（industries-a）の続き: せまい画面の「使う機能」の札・小見出しの上（.ia-sub.mt-l）・気をつけることの 2 列（.ia-care・.ia-col・.ia-colh） */
/* とてもせまい画面（320px など）では、1 日の流れの「使う機能」の札を折り返す */
@media (max-width: 399px) { .dl-card .uses > li { white-space: normal; } }
/* 小見出しの上をあける（.mt-l と一緒に使うとき） */
.ia-sub.mt-l { margin-top: 88px; }
/* 気をつけること: 「送り方」と「預かり方」の 2 列（それぞれ縦に並べる） */
.ia-care { align-items: start; }
.ia-col { display: grid; gap: 14px; }
.ia-colh { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
.ia-colh svg { width: 20px; height: 20px; color: var(--brand); }
.ia-col .note p { margin-top: 2px; font-size: 15px; line-height: 1.75; }

/* ------------------------------------------------------------------ 足した部品（features-b）: ダッシュボードの並べ方（.fb-layout > .fb-wg。大きさ .fb-s2〈1/3〉・.fb-s3〈1/2〉・.fb-s4〈2/3〉・無し〈全部〉・選んだもの .on） */
.fb-layout { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.fb-wg {
  display: flex;
  grid-column: span 6;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.fb-wg svg { width: 16px; height: 16px; flex: none; color: var(--brand-ink); }
.fb-wg small { margin-left: auto; color: var(--ink-3); font-size: 11px; font-weight: 600; white-space: nowrap; }
.fb-wg.on { border-style: solid; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
@media (min-width: 520px) {
  .fb-wg.fb-s2 { grid-column: span 2; }
  .fb-wg.fb-s3 { grid-column: span 3; }
  .fb-wg.fb-s4 { grid-column: span 4; }
}

/* ------------------------------------------------------------------ 足した部品（features-b）: グラフの箱（.chart）の中のドーナツは、決めた大きさのまま */
.chart .fb-donut { width: 128px; }

/* ------------------------------------------------------------------ 足した部品（features-a）: ノードの一覧の 2 列（.fa-palette.two）・上をそろえる 2 つの面（.cols2.fa-top） */
@media (min-width: 1068px) { .fa-palette.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cols2.fa-top { align-items: start; }
/* ------------------------------------------------------------------ 足した部品（industries-a）の続き: 小さな窓の中の見出し（.ia-cap） */
/* 小さな窓の中の見出し（.win.mini > .win-body の先頭。.cmp-card .cap と同じ見た目） */
.ia-cap { margin: 0 0 10px; color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.dl-card .ia-cap { margin: 0 0 10px; color: var(--ink-3); font-size: 11px; line-height: 1.5; }

/* ------------------------------------------------------------------ 足した部品（features-a）: 左上に浮かぶカード（.float-c.fa-float-tl）・上をそろえる左右（.split.fa-top）・取り込みの数の並び（.fa-diff。青いタイルの中） */
.float-c.fa-float-tl { top: -24px; right: auto; left: 5%; }
.split.fa-top { align-items: start; }
.fa-diff { display: grid; gap: 6px; }
.fa-diff > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 14px; border-radius: 12px; background: rgb(255 255 255 / 14%); font-size: 14px; }
.fa-diff b { font-size: 16px; font-weight: 800; }

/* ------------------------------------------------------------------ 足した部品（guide）: 導入の手順の番号つきの並び（ol.gd-steps > li（> small で補足））。白い帯でも灰の帯でも、枠と背景で見分けられる */
.gd-steps { display: grid; gap: 8px; margin-top: 22px; list-style: none; counter-reset: gds; }
.gd-steps > li {
  position: relative;
  min-width: 0;
  padding: 11px 14px 11px 50px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
  counter-increment: gds;
}
.gd-steps > li::before {
  content: counter(gds);
  position: absolute;
  left: 13px;
  top: 11px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}
.gd-steps small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13.5px; font-weight: 500; line-height: 1.7; }
.sec-dark .gd-steps > li { border-color: var(--line); }
/* ------------------------------------------------------------------ 足した部品（guide）: 行の多いくらべる表（table.vs.gd-vs）。せまい画面で、行の名前の列が 1 字ずつに縮まないようにする */
.vs.gd-vs tbody th[scope="row"] { min-width: 10em; }

/* ------------------------------------------------------------------ 資料（/brochure/）: 画面では 1 枚ずつのカード、印刷・PDF では A4 横の 1 ページ */
/*
  形: main > … > .sheets > section.sheet（表紙は .sheet.sh-cover）> .sheet-head（.sh-kicker・h2.sh-title・.sh-lede）＋ .sheet-body ＋ .sheet-foot
  中の部品: .sh-grid2 / .sh-grid3 / .sh-grid4（並べる）・.sh-card（小さなカード）・.sh-list（点つきの並び）・.sh-chips（札の並び）・.sh-plan（プランの表）
  PDF は python3 tools/build_brochure.py が、このページを印刷の形で写して site/assets/tsunagicho-guide.pdf に書く
*/
.sheets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 34px 26px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-m);
}
@media (min-width: 900px) { .sheet { padding: 46px 54px 26px; } }
.sheet-head { max-width: 900px; }
.sh-kicker { color: var(--brand-ink); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; }
.sh-kicker b { margin-right: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sh-title { margin-top: 6px; font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.25; }
.sh-lede { margin-top: 10px; color: var(--ink-3); font-size: 15.5px; line-height: 1.75; }
.sheet-body { margin-top: 26px; min-width: 0; }
.sheet-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: 11.5px;
}
.sh-grid2,
.sh-grid3,
.sh-grid4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sheet .kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 734px) {
  .sh-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1068px) { .sh-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sh-grid2.mid { align-items: center; }
.sh-card { padding: 16px 16px 15px; border: 1px solid var(--line-soft); border-radius: var(--r-m); background: var(--bg-sunk); }
.sh-card .ic { width: 38px; height: 38px; margin-bottom: 10px; border-radius: 12px; }
.sh-card .ic svg { width: 21px; height: 21px; }
.sh-card h3 { font-size: 16px; line-height: 1.45; }
.sh-card p { margin-top: 5px; color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.sh-card p.fix { color: var(--ink-2); }
.sh-card p.fix b { color: var(--brand-ink); }
.sh-list { display: grid; gap: 8px; list-style: none; }
.sh-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.65; }
.sh-list li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.sh-list li b { font-weight: 700; }
.sh-list li span { color: var(--ink-3); }
.sh-h { margin-bottom: 10px; color: var(--ink-2); font-size: 15px; font-weight: 800; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.sh-chips li { padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
.sh-chips.brand li { background: var(--brand-soft); color: var(--brand-ink); }
.sh-chips.gold li { background: var(--gold-soft); color: var(--gold-ink); }
.sh-note { margin-top: 14px; color: var(--ink-3); font-size: 12px; line-height: 1.7; }
.sh-plan { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sh-plan th,
.sh-plan td { padding: 9px 12px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; line-height: 1.55; }
.sh-plan thead th { border-top: 0; color: var(--ink-3); font-size: 12px; }
.sh-plan tbody th { color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.sh-plan .now { color: var(--brand-ink); font-weight: 800; }
.sh-plan td:nth-child(2) { white-space: nowrap; }
.sheet .crm { align-self: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sheet .crm { grid-template-columns: 170px minmax(0, 1fr); } }
.sheet .bignums li { padding: 16px 10px 14px; }
.sheet .bn { font-size: clamp(2.4rem, 1.8rem + 1.8vw, 3.2rem); }
.sheet .bl { margin-top: 8px; font-size: 13.5px; }
.sheet .pipe-node { padding: 18px 16px; }
.sheet .pipe-link { height: 84px; }
@media (min-width: 900px) { .sheet .pipe-link { height: 120px; } }
.sheet .rail h3 { font-size: 16px; }
.sheet .rail p { font-size: 13px; }
.sheet .win { box-shadow: var(--shadow-m); }

/* 表紙 */
.sh-cover {
  justify-content: space-between;
  min-height: 520px;
  border-color: transparent;
  background:
    radial-gradient(60% 70% at 85% 15%, rgb(255 255 255 / 18%), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, rgb(233 162 59 / 35%), transparent 70%),
    linear-gradient(135deg, #1f3a8f 0%, #3b3fc0 50%, #6a4bd8 100%);
  color: #ffffff;
}
.sh-cover .sh-kicker { color: rgb(255 255 255 / 85%); }
.sh-cover-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: 0.08em; }
.sh-cover-brand svg { width: 44px; height: 44px; }
.sh-cover-main { display: grid; gap: 28px; align-items: center; margin-top: 30px; }
@media (min-width: 900px) { .sh-cover-main { grid-template-columns: minmax(0, 1fr) auto; } }
.sh-cover-title { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); line-height: 1.18; letter-spacing: 0.01em; }
.sh-cover-sub { margin-top: 18px; max-width: 34em; color: rgb(255 255 255 / 88%); font-size: 16px; line-height: 1.75; }
.sh-cover .phone { color: var(--ink); text-align: left; box-shadow: 0 30px 80px rgb(0 0 0 / 35%), inset 0 0 0 2px #2b2b30; }
.sh-cover .sheet-foot { border-top-color: rgb(255 255 255 / 25%); color: rgb(255 255 255 / 78%); }
.sh-cover-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; list-style: none; }
.sh-cover-meta li { padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / 14%); font-size: 13px; font-weight: 700; }

/* 印刷・PDF: A4 横の 1 ページずつ（このページだけ。ほかのページの印刷は変えない） */
/* 紙の大きさ（A4 横）は、資料のページだけが読む site/assets/brochure-print.css（@page はページを選べないため） */
@media print {
  .brochure-page .ribbon,
  .brochure-page .gnav,
  .brochure-page .skip,
  .brochure-page .gfoot,
  .brochure-page .phero,
  .brochure-page .bro-screen-only { display: none !important; }
  .brochure-page main .sec { padding: 0 !important; background: #ffffff !important; }
  .brochure-page main .wrap { max-width: none; padding: 0; }
  .brochure-page .sheets { display: block; }
  .brochure-page .sheet {
    width: 297mm;
    height: 210mm;
    margin: 0;
    padding: 12mm 15mm 7mm;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .brochure-page .sheet:last-child { break-after: auto; }
  .brochure-page .sheet-body { flex: 1; min-height: 0; margin-top: 5mm; }
  .brochure-page .sheet-foot { margin-top: 3mm; }
  .brochure-page .sh-cover { min-height: 0; }
  .brochure-page .sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------------ 足した部品（media-b）: 本物の画面の写し（figure.shot・.shot-duo）・短い動画（figure.shot-video・ul.shot-videos） */
/*
  写し 1 枚        figure.shot > div.shot-frame > picture（source[media="(prefers-color-scheme: dark)"] ＋ img[alt][width][height]）＋ figcaption
  PC とスマホ      div.shot-duo > figure.shot（PC の写し）＋ figure.shot.shot-phone（スマホの写し。端末の枠を付ける）
  動画             figure.shot-video > div.shot-frame > video[controls][preload="none"][playsinline][muted][poster] > source[type="video/mp4"]
                   ＋ figcaption > p.shot-video-h ＋ ol.shot-steps > li（音がないので、動画でしていることを文で書く。自動で再生しない）
  動画を並べる     ul.shot-videos > li > h3 ＋ figure.shot-video
  写しと動画は tools/site_media.py が作る（site/assets/shots/・site/assets/video/）。動画を置くページは CSP に media-src 'self' が要る
*/
.shot,
.shot-video { min-width: 0; margin: 0; }
.shot-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-l);
}
.sec-soft .shot-frame { box-shadow: var(--shadow-m); }
.shot-frame picture,
.shot-frame img,
.shot-frame video { display: block; width: 100%; height: auto; }
.shot-frame video { background: var(--bg-soft); }
.shot figcaption,
.shot-video figcaption { margin-top: 14px; color: var(--ink-3); font-size: 14.5px; line-height: 1.75; }
.shot figcaption b { color: var(--ink); }
.shot-phone .shot-frame {
  width: min(100%, 290px);
  margin: 0 auto;
  padding: 8px;
  border: 0;
  border-radius: 40px;
  background: #0d0d10;
  box-shadow: var(--shadow-l), inset 0 0 0 2px #2b2b30;
}
.shot-phone .shot-frame img { border-radius: 32px; }
.shot-phone figcaption { text-align: center; }
.shot-duo { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .shot-duo { grid-template-columns: minmax(0, 1fr) 250px; } }
.shot-video-h { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.6; }
.shot-steps { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: shs; }
.shot-steps li { position: relative; padding-left: 34px; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; counter-increment: shs; }
.shot-steps li::before {
  content: counter(shs);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}
.shot-videos { display: grid; gap: 48px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1068px) { .shot-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 36px; } }
.shot-videos h3 { margin-bottom: 14px; font-size: 20px; line-height: 1.4; }
/* ------------------------------------------------------------------ 足した部品（guides）: 活用ガイド（/guide/）の記事の読みやすい列・節の頭・点の並び・つなぎ帳でのやり方・30 日の暦・式・じょうご・リッチメニューの型・出典・目立つ注意・記事の一覧 */
/*
  節の中の流れ       div.wrap.gu-flow（子どうしの間を 40px あける）
  記事の読みやすい列 .gu-col（760px。中の p・h3・ul・ol・.note の間をあける。文の中のリンクは下線つき）
  節の頭             .gu-sh > p.gu-step（> b に番号）＋ h2.gu-h2 ＋ p.lede
  点・番号の並び     ul.gu-list / ol.gu-ol（> li。> b は見出しの語）
  要点のカード       .af.gu-sum（前とあとの「あと」の箱を 1 つだけ使う。> p.bfaf-h ＋ ul）
  つなぎ帳でのやり方 .gu-how > p.gu-how-h（絵記号＋名前）＋ p・ol.gd-steps・.gu-links（> a.more）
  図の置き場         .gu-fig（.narrow で 920px）。下の説明は p.caption
  30 日の暦          .gu-cal（role="img"）> ul.gu-cal-key > li.p1〜p5 ＋ ol.gu-cal-days > li.p1〜p5（> b 日・span 一言。.ms は目印の日）
  式                 .gu-eq（role="img"）> .gu-eq-b（.on。> span.k・b・small）＋ span.gu-eq-op
  じょうご           ol.gu-fun（role="img"）> li.fb-w100 など（> b 名前 ＋ span 説明）
  リッチメニューの型 ul.gu-rms > li > figure > .gu-rm.g6 / .g4 / .g3 / .g2 / .g3s / .g1（.small は小さい型）> span（.hot）＋ figcaption（> b）
  出典               ol.gu-src > li（> a ＋ small）
  目立つ注意         .gu-alert（> svg.i ＋ div > b ＋ p）
  記事の一覧（入口） .gu-bundles > section.gu-bundle > .gu-bundle-h（.ic・h2.gu-bh・p）＋ ul.gu-cards > li > a.gu-card
                     （> .gu-card-top > span.gu-card-no ＋ .tag、h3、p、.gu-card-meta > span × n ＋ span.more）
*/
.gu-flow > * + * { margin-top: 40px; }
.gu-flow > .gu-sh + * { margin-top: 26px; }

.gu-col { max-width: 760px; margin-left: auto; margin-right: auto; }
.gu-col > * + * { margin-top: 18px; }
.gu-col > h3 {
  margin-top: 48px;
  font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  line-height: 1.4;
}
.gu-col > h3:first-child { margin-top: 0; }
.gu-col > h3 + * { margin-top: 12px; }
.gu-col > p,
.gu-col > ul > li,
.gu-col > ol > li { color: var(--ink-2); }
.gu-col strong { color: var(--ink); }
.gu-col > .note,
.gu-col > .checks,
.gu-col > .tbl-wrap { margin-top: 24px; }
.gu-col .note p + p { margin-top: 8px; }
.gu-col p a:not(.more),
.gu-col li a:not(.more),
.gu-how p a:not(.more),
.gu-src a,
.gu-alert a,
.gu-col .note a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.gu-sh { max-width: 760px; margin-left: auto; margin-right: auto; }
.gu-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.gu-step b {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 15px;
  letter-spacing: 0;
}
.gu-h2 {
  margin-top: 14px;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.22;
}
.gu-sh .lede { margin-top: 14px; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); }

.gu-list,
.gu-ol { display: grid; gap: 10px; list-style: none; }
.gu-list > li { position: relative; padding-left: 26px; line-height: 1.75; }
.gu-list > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.gu-ol { counter-reset: guo; }
.gu-ol > li { position: relative; padding-left: 40px; line-height: 1.75; counter-increment: guo; }
.gu-ol > li::before {
  content: counter(guo);
  position: absolute;
  left: 0;
  top: 0.15em;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.gu-list b,
.gu-ol b { color: var(--ink); }

.af.gu-sum { max-width: 760px; margin: 34px auto 0; text-align: left; }
.af.gu-sum li { color: var(--ink-2); }

.gu-how {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px 24px 22px;
  border: 2px solid transparent;
  border-radius: var(--r-l);
  background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--grad) border-box;
  box-shadow: var(--shadow-s);
}
.sec-soft .gu-how { box-shadow: none; }
.gu-how-h {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.gu-how-h .i { width: 20px; height: 20px; }
.gu-how > p:not(.gu-how-h) { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.gu-how .gd-steps { margin-top: 14px; }
.gu-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.gu-links .more { font-size: 16px; }

.gu-fig.narrow { max-width: 920px; margin-left: auto; margin-right: auto; }
.gu-fig > .caption { margin-top: 14px; }

/* 30 日の暦（スマホの幅では、日の一言を隠して色だけにする。中身は下の表にもある） */
.gu-cal {
  padding: 22px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-m);
}
.sec-soft .gu-cal { box-shadow: none; }
.gu-cal .p1 { --c: var(--brand); }
.gu-cal .p2 { --c: var(--violet); }
.gu-cal .p3 { --c: var(--teal); }
.gu-cal .p4 { --c: var(--gold); }
.gu-cal .p5 { --c: var(--rose); }
.gu-cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 16px;
  list-style: none;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
}
.gu-cal-key li { display: inline-flex; align-items: center; gap: 7px; }
.gu-cal-key li::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.gu-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; list-style: none; }
.gu-cal-days li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 78px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 10%, var(--bg-elev));
}
.gu-cal-days li.ms { border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 22%, var(--bg-elev)); }
.gu-cal-days b { color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.gu-cal-days span { color: var(--ink-2); font-size: 11.5px; font-weight: 600; line-height: 1.35; }
@media (max-width: 733px) {
  .gu-cal { padding: 14px; }
  .gu-cal-days { gap: 4px; }
  .gu-cal-days li { align-items: center; justify-content: center; min-height: 44px; padding: 4px 2px; border-radius: 9px; }
  .gu-cal-days span { display: none; }
}

/* 式（1 回 × 人数 = 通数） */
.gu-eq { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px; }
.gu-eq-b {
  display: grid;
  flex: 1 1 160px;
  align-content: center;
  gap: 4px;
  max-width: 270px;
  padding: 20px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-l);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  text-align: center;
}
.sec-soft .gu-eq-b { box-shadow: none; }
.gu-eq-b .k { color: var(--ink-3); font-size: 13px; font-weight: 700; }
.gu-eq-b b { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.gu-eq-b small { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.gu-eq-b.on { border: 2px solid transparent; background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--grad) border-box; }
.gu-eq-op { display: grid; place-items: center; color: var(--gold-ink); font-size: 28px; font-weight: 800; line-height: 1; }
@media (max-width: 599px) {
  .gu-eq { flex-direction: column; align-items: stretch; }
  .gu-eq-b { flex: none; max-width: none; }
  .gu-eq-op { padding: 2px 0; }
}

/* じょうご（友だち → 届いた → 開いた → 押した → 申し込み） */
.gu-fun { display: grid; gap: 8px; justify-items: center; list-style: none; }
.gu-fun > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  min-width: 0;
  min-height: 54px;
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--brand-soft);
}
.gu-fun > li:nth-child(2) { background: var(--violet-soft); }
.gu-fun > li:nth-child(3) { background: var(--teal-soft); }
.gu-fun > li:nth-child(4) { background: var(--gold-soft); }
.gu-fun > li:nth-child(5) { background: var(--rose-soft); }
.gu-fun b { color: var(--ink); font-size: 15.5px; white-space: nowrap; }
.gu-fun span { min-width: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; text-align: right; }
@media (max-width: 733px) {
  .gu-fun > li { width: 100% !important; flex-direction: column; align-items: flex-start; }
  .gu-fun span { text-align: left; }
}

/* リッチメニューの型（LINE の大きい型 2500×1686・小さい型 2500×843 の形を、縦横の比で描く） */
.gu-rms { display: grid; gap: 22px 18px; list-style: none; }
@media (min-width: 600px) { .gu-rms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .gu-rms { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gu-rms figure { margin: 0; }
.gu-rm {
  display: grid;
  gap: 4px;
  aspect-ratio: 2500 / 1686;
  padding: 5px;
  border-radius: 12px;
  background: var(--line);
}
.gu-rm.small { aspect-ratio: 2500 / 843; }
.gu-rm.g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.gu-rm.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.gu-rm.g3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.gu-rm.g3 > :first-child { grid-row: 1 / 3; }
.gu-rm.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gu-rm.g3s { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gu-rm.g1 { grid-template-columns: minmax(0, 1fr); }
.gu-rm > span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 4px;
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.gu-rm > span .i { width: 20px; height: 20px; color: var(--brand-ink); }
.gu-rm > span.hot { background: var(--brand); color: var(--on-brand); }
.gu-rm > span.hot .i { color: var(--on-brand); }
.gu-rm.small > span .i { width: 17px; height: 17px; }
.gu-rms figcaption { margin-top: 10px; color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.gu-rms figcaption b { display: block; color: var(--ink); font-size: 15px; }

/* 出典 */
.gu-src { display: grid; gap: 10px; max-width: 860px; margin-left: auto; margin-right: auto; list-style: none; counter-reset: gus; }
.gu-src > li {
  position: relative;
  min-width: 0;
  padding: 14px 18px 14px 52px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
  counter-increment: gus;
}
.gu-src > li::before {
  content: counter(gus);
  position: absolute;
  left: 16px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
}
.gu-src a { font-weight: 700; }
.gu-src small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.gu-src-note { max-width: 860px; margin: 18px auto 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.7; }

/* 目立つ注意（法律の助言ではない など） */
.gu-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 820px;
  margin: 30px auto 0;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--r-l);
  background: var(--gold-soft);
  color: var(--ink);
  text-align: left;
}
.gu-alert > .i { width: 26px; height: 26px; color: var(--gold-ink); }
.gu-alert b { display: block; color: var(--gold-ink); font-size: 16px; line-height: 1.5; }
.gu-alert p { margin-top: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }

/* 記事の一覧（/guide/）: 束ごとに、左に束の名前、右に記事のカード */
.gu-bundles { display: grid; gap: 72px; }
.gu-bundle { display: grid; gap: 24px; scroll-margin-top: 84px; }
@media (min-width: 1068px) {
  .gu-bundle { grid-template-columns: 290px minmax(0, 1fr); gap: 44px; align-items: start; }
  .gu-bundle-h { position: sticky; top: 92px; }
}
.gu-bundle-h .ic { width: 54px; height: 54px; border-radius: 17px; }
.gu-bundle-h .ic .i { width: 28px; height: 28px; }
.gu-bh { margin-top: 14px; font-size: clamp(1.55rem, 1.25rem + 1vw, 2.1rem); line-height: 1.3; }
.gu-bundle-h p { margin-top: 8px; color: var(--ink-3); font-size: 15.5px; line-height: 1.75; }
.gu-cards { display: grid; gap: 16px; list-style: none; }
@media (min-width: 734px) { .gu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gu-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 24px 20px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sec-soft .gu-card { box-shadow: none; }
.gu-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-m); }
.gu-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gu-card-no {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gu-card h3 { margin-top: 14px; font-size: 21px; line-height: 1.4; }
.gu-card p { margin-top: 8px; color: var(--ink-3); font-size: 15px; line-height: 1.75; }
.gu-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}
.gu-card-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.gu-card-meta .i { width: 15px; height: 15px; }
.gu-card-meta .more { margin-left: auto; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .gu-card:hover { transform: none; } }
@media print {
  .gu-bundle-h { position: static; }
  .gu-card { box-shadow: none; border: 1px solid #d2d2d7; }
}

/* ------------------------------------------------------------------ 足した部品（係 S）: 名前を途中で折り返さない */
/* 「つなぎ帳 クラウド」などの名前を 1 かたまりにする（Chrome の word-break: auto-phrase は「つなぎ帳」を「つな｜ぎ帳」で折り返すことがある。
   2026-10-19 に確かめた）。お知らせの帯（tools/site_sync.py の RIBBON）で使う。長い文の中だけで使い、狭い枠（表の見出しなど）には使わない */
.sr-name { white-space: nowrap; }

/* ------------------------------------------------------------------ 足した部品（templates）: テンプレート集（/templates/）の文例のカード・吹き出し・差し込み・業種の見出し・種類のカード・季節・自動の流れの型・リッチメニューの絵・印刷用のページ（画面） */
/*
  色             .tpl-c-brand / .tpl-c-rose / .tpl-c-violet / .tpl-c-teal / .tpl-c-gold / .tpl-c-ink（--tc・--tc-ink・--tc-soft を決める）
  文例のカード   .tpl-grid > article.tpl-card > .tpl-top（.tpl-no ＋ .tag）・h3・dl.tpl-meta（> div > dt ＋ dd）・.tpl-talk・p.tpl-tip・div.tpl-warn（> p ＋ p.tpl-src）
  本文           .tpl-talk > p.tpl-talk-h ＋ p.tpl-bub（吹き出し。文は 1 つの要素。押すとまるごと選べる）× n ＋ p.tpl-att（> span.tpl-att-ic ＋ span > b）
  差し込み       span.tpl-var（{{変数}}。青）・span.tpl-ph（書きかえる所。黄色）
  業種の見出し   .tpl-cat（色）> span.tpl-cat-ic ＋ div.tpl-cat-t（> p.tpl-cat-k ＋ h2 ＋ p ＋ a.more）＋ p.tpl-cat-n（> b）
  種類のカード   ul.tpl-kinds > li > a.tpl-kind（色）> span.tpl-kind-art（> .tpl-mini-bubs / -phone / -flow / -rm）＋ span.tpl-kind-n ＋ h3 ＋ p ＋ ul.uses ＋ span.more
  季節           ul.tpl-seasons > li.tpl-season > p.tpl-season-h ＋ ul > li > a（> small）
  自動の流れの型 .tpl-wfs > article.tpl-wf（色）> div.tpl-wf-text（.tpl-top・h3・p.tpl-aim・h4.tpl-h4・ul.uses・ul.tpl-list・ol.tpl-steps）＋ div.tpl-wf-art（> .canvas > .flow）
                 2 つのきっかけが 1 つにまとまる所 .flow > .tpl-merge > .col × 2（次のノードに .flow-after）
  リッチメニュー  .tpl-rm（大 .g6 .g4 .t1b3 .l1r2 .t1b2 .r2 .c2 .one・小 .sm と .c3 .c2s .wl .wr .ones・自由な領域 .tab・とても小さい .xs）> span（.hot）
                 型の一覧 ul.tpl-types > li.tpl-type > .tpl-rm ＋ p.tpl-type-n ＋ p.tpl-type-m ＋ p.tpl-type-u
                 例 .tpl-rmxs > article.tpl-rmx（色）> div.tpl-rmx-art（> .phone.sm）＋ div.tpl-rmx-text（> ol.tpl-btns > li > b ＋ span.tpl-act ＋ span.tpl-what）
  そのほか       ul.tpl-rules（決まりの並び）・ol.tpl-srcs（出典）・.tpl-pin（絵の中の札）・.ml-row.tpl-on（選んでいる行）・.tpl-typegrid（型を選ぶ画面の絵）・
                 .dl-cover .pg.pg-a4（縦の紙）・h2.tpl-dl-h（資料のカードの見出し）
  印刷用のページ  body.tpl-print-page の .tpl-pnote・.tpl-book・.tpl-pcover・.tpl-psec・.tpl-ph2・.tpl-pcat・.tpl-pcols・.tpl-pwfs・.tpl-prmxs・.tpl-phow・.tpl-ptbl
                 （紙の形は site/assets/templates-print.css。このページだけが読む）
*/
.tpl-card,
.tpl-wf,
.tpl-rmx,
.tpl-cat,
.tpl-kind,
.tpl-pcat { --tc: var(--brand); --tc-ink: var(--brand-ink); --tc-soft: var(--brand-soft); }
.tpl-c-brand { --tc: var(--brand); --tc-ink: var(--brand-ink); --tc-soft: var(--brand-soft); }
.tpl-c-rose { --tc: var(--rose); --tc-ink: var(--rose); --tc-soft: var(--rose-soft); }
.tpl-c-violet { --tc: var(--violet); --tc-ink: var(--violet); --tc-soft: var(--violet-soft); }
.tpl-c-teal { --tc: var(--teal); --tc-ink: var(--teal); --tc-soft: var(--teal-soft); }
.tpl-c-gold { --tc: var(--gold); --tc-ink: var(--gold-ink); --tc-soft: var(--gold-soft); }
.tpl-c-ink { --tc: var(--ink-3); --tc-ink: var(--ink-2); --tc-soft: var(--bg-soft); }

/* 文例のカード */
.tpl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 26px 22px 22px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-l);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  scroll-margin-top: 130px;
}
.sec-soft .tpl-card { box-shadow: none; }
.tpl-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tc); }
.tpl-card:target { outline: 3px solid var(--tc); outline-offset: 2px; }
.tpl-card h3,
.tpl-card h4 { font-size: 19px; line-height: 1.45; }
.tpl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tpl-no {
  display: inline-flex;
  align-items: center;
  padding: 2px 11px;
  border-radius: 999px;
  background: var(--tc-soft);
  color: var(--tc-ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tpl-meta { display: grid; gap: 6px; margin: 0; }
.tpl-meta > div { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.tpl-meta dt { color: var(--tc-ink); font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; }
.tpl-meta dd { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.7; }

/* 本文（吹き出し）。番号は CSS で付けるので、コピーした文には入らない */
.tpl-talk {
  display: grid;
  gap: 8px;
  padding: 14px 14px 16px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--bg-sunk);
  counter-reset: tplb;
}
.tpl-talk-h { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.tpl-talk-h svg { width: 15px; height: 15px; }
.tpl-bub,
.tpl-att { position: relative; justify-self: start; max-width: calc(100% - 30px); margin-left: 30px; counter-increment: tplb; }
.tpl-bub {
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  border-top-left-radius: 6px;
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-line;
  overflow-wrap: anywhere;
  cursor: text;
  -webkit-user-select: all;
  user-select: all;
}
.tpl-bub::before,
.tpl-att::before {
  content: counter(tplb);
  content: counter(tplb) / "";
  position: absolute;
  left: -30px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tc-soft);
  color: var(--tc-ink);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
}
.tpl-att {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  border: 1px dashed color-mix(in srgb, var(--tc) 55%, transparent);
  border-radius: 14px;
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.tpl-att b { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; }
.tpl-att-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--tc-soft); color: var(--tc-ink); }
.tpl-att-ic svg { width: 18px; height: 18px; }
.win .tpl-bub,
.dl-art .tpl-bub { font-size: 12.5px; line-height: 1.65; }
.win .tpl-talk { padding: 10px 10px 12px 8px; }

/* 差し込み（変数と、書きかえる所） */
.tpl-var {
  padding: 0 4px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--mono);
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tpl-ph {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gold) 60%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sec-dark .tpl-var { background: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--brand-deep); }

/* ひとこと・注意 */
.tpl-tip { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.75; }
.tpl-tip > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--gold-ink); }
.tpl-tip b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; }
.tpl-warn { padding: 12px 15px; border-radius: 12px; background: var(--rose-soft); color: var(--ink-2); font-size: 13.5px; line-height: 1.75; }
.tpl-warn b { display: block; color: var(--rose); font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; }
.tpl-src { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; line-height: 1.7; }
.tpl-src a { overflow-wrap: anywhere; }

/* 業種の見出し */
.tpl-cat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 20px; align-items: start; margin-bottom: 36px; }
@media (min-width: 734px) { .tpl-cat { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; } }
.tpl-cat-ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--tc-soft);
  color: var(--tc-ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent);
}
.tpl-cat-ic svg { width: 32px; height: 32px; }
.tpl-cat-k { color: var(--tc-ink); font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.tpl-cat h2 { margin-top: 2px; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.2; }
.tpl-cat-t > p:not(.tpl-cat-k) { margin-top: 8px; max-width: 46em; color: var(--ink-3); font-size: 16px; line-height: 1.75; }
.tpl-cat-t .more { margin-top: 8px; font-size: 15px; }
.tpl-cat-n { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 4px; color: var(--ink-3); font-size: 15px; font-weight: 700; }
@media (min-width: 734px) { .tpl-cat-n { grid-column: auto; } }
.tpl-cat-n b {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* 種類のカード（入口） */
.tpl-kinds { display: grid; gap: 18px; list-style: none; }
@media (min-width: 734px) { .tpl-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .tpl-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tpl-kind {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px 22px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sec-soft .tpl-kind { box-shadow: none; }
.tpl-kind:hover { color: var(--ink); text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-m); }
.tpl-kind-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 118px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(80% 90% at 85% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%),
    var(--tc-soft);
}
.tpl-kind-n {
  margin-top: 16px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.tpl-kind-n small { font-size: 0.4em; letter-spacing: 0; }
.tpl-kind h3 { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 20px; line-height: 1.35; }
.tpl-kind h3 svg { width: 22px; height: 22px; color: var(--tc-ink); }
.tpl-kind p { margin-top: 8px; color: var(--ink-3); font-size: 14.5px; line-height: 1.7; }
.tpl-kind .uses { margin-top: 12px; }
.sec-soft .tpl-kind .uses > li { background: var(--bg-soft); }
.tpl-kind .more { margin-top: auto; padding-top: 16px; font-size: 15px; }
/* 小さな絵（文の吹き出し・スマホ・流れ・メニュー） */
.tpl-mini-bubs { display: grid; gap: 7px; width: 150px; }
.tpl-mini-bubs i { display: block; height: 16px; border-radius: 9px 9px 9px 3px; background: var(--bg-elev); box-shadow: var(--shadow-s); }
.tpl-mini-bubs i:nth-child(2) { width: 74%; }
.tpl-mini-bubs b {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--mono);
  font-size: 11px;
  box-shadow: var(--shadow-s);
}
.tpl-mini-phone { display: grid; align-content: start; gap: 6px; width: 74px; height: 128px; margin-top: 26px; padding: 14px 8px; border-radius: 16px; background: #0d0d10; }
.tpl-mini-phone i { display: block; height: 11px; border-radius: 6px 6px 6px 2px; background: #ffffff; }
.tpl-mini-phone i:nth-child(2) { width: 80%; }
.tpl-mini-phone i:nth-child(3) { width: 60%; background: var(--tc); }
.tpl-mini-flow { display: grid; justify-items: center; gap: 12px; }
.tpl-mini-flow i { position: relative; display: block; width: 92px; height: 22px; border: 2px solid var(--tc); border-radius: 8px; background: var(--bg-elev); }
.tpl-mini-flow i + i::before { content: ""; position: absolute; left: calc(50% - 1px); top: -14px; width: 2px; height: 12px; background: var(--tc); }
.tpl-mini-flow i:first-child { background: var(--tc); }
.tpl-mini-rm { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; padding: 4px; border-radius: 10px; background: color-mix(in srgb, var(--tc) 45%, var(--line)); }
.tpl-mini-rm i { display: block; height: 28px; border-radius: 4px; background: var(--bg-elev); }
.tpl-mini-rm i:first-child { background: var(--tc); }

/* 季節で探す */
.tpl-seasons { display: grid; gap: 14px; list-style: none; }
@media (min-width: 734px) { .tpl-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .tpl-seasons { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tpl-season { min-width: 0; padding: 18px 16px; border-radius: var(--r-l); background: var(--bg-soft); }
.tpl-season-h { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; }
.tpl-season-h svg { width: 22px; height: 22px; color: var(--brand-ink); }
.tpl-season ul { display: grid; gap: 8px; margin-top: 12px; list-style: none; }
.tpl-season a {
  display: block;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.tpl-season a:hover { background: var(--brand-soft); color: var(--brand-ink); text-decoration: none; }
.tpl-season a small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 500; }

/* 自動の流れの型 */
.tpl-wfs { display: grid; gap: 22px; }
.tpl-wf {
  position: relative;
  display: grid;
  gap: 26px;
  min-width: 0;
  padding: 30px 22px 24px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  scroll-margin-top: 130px;
}
.sec-soft .tpl-wf { box-shadow: none; }
.tpl-wf::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tc); }
@media (min-width: 1068px) { .tpl-wf { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 36px; padding: 34px 34px 30px; align-items: start; } }
.tpl-wf h3,
.tpl-wf h4:not(.tpl-h4) { margin-top: 12px; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.35; }
.tpl-aim { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.tpl-h4 { margin: 20px 0 8px; color: var(--tc-ink); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; }
.tpl-list { display: grid; gap: 7px; list-style: none; }
.tpl-list li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.75; }
.tpl-list li::before { content: ""; position: absolute; left: 3px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.tpl-steps { display: grid; gap: 7px; list-style: none; counter-reset: tpls; }
.tpl-steps li { position: relative; padding-left: 32px; color: var(--ink-2); font-size: 14.5px; line-height: 1.75; counter-increment: tpls; }
.tpl-steps li::before {
  content: counter(tpls);
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tc-soft);
  color: var(--tc-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.tpl-wf .tpl-warn,
.tpl-wf .tpl-src { margin-top: 14px; }
.tpl-wf-art { min-width: 0; }
.tpl-wf .canvas { padding: 26px 14px; }
.tpl-wf .node { width: min(100%, 280px); }
.tpl-wf .flow-branch .node { width: 100%; }
/* 2 つのきっかけが 1 つにまとまる所 */
.tpl-merge { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; width: min(100%, 560px); padding-bottom: 14px; }
.tpl-merge::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 2px; background: var(--line); }
.tpl-merge > .col { position: relative; display: flex; }
.tpl-merge > .col::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 2px; height: 14px; background: var(--line); }
.tpl-merge .node { width: 100%; }

/* リッチメニューの絵 */
.tpl-rm {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 3px;
  aspect-ratio: 2500 / 1686;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tc) 40%, var(--line));
}
.tpl-rm.sm { aspect-ratio: 2500 / 843; }
.tpl-rm > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.tpl-rm > span svg { width: 20px; height: 20px; flex: none; color: var(--tc-ink); }
.tpl-rm > span.hot { background: var(--tc-soft); color: var(--tc-ink); box-shadow: inset 0 0 0 2px var(--tc); }
.tpl-rm.g6 { grid-template: repeat(2, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); }
.tpl-rm.g4,
.tpl-rm.l1r2,
.tpl-rm.t1b2 { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.tpl-rm.t1b3 { grid-template: repeat(2, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); }
.tpl-rm.t1b3 > :first-child,
.tpl-rm.t1b2 > :first-child { grid-column: 1 / -1; }
.tpl-rm.l1r2 > :first-child { grid-row: 1 / -1; }
.tpl-rm.r2 { grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1fr); }
.tpl-rm.c2,
.tpl-rm.c2s { grid-template: minmax(0, 1fr) / repeat(2, minmax(0, 1fr)); }
.tpl-rm.one,
.tpl-rm.ones { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.tpl-rm.c3 { grid-template: minmax(0, 1fr) / repeat(3, minmax(0, 1fr)); }
.tpl-rm.wl { grid-template: minmax(0, 1fr) / minmax(0, 2fr) minmax(0, 1fr); }
.tpl-rm.wr { grid-template: minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 2fr); }
.tpl-rm.tab { grid-template: minmax(0, 0.42fr) minmax(0, 1fr) / repeat(6, minmax(0, 1fr)); }
.tpl-rm.tab > :nth-child(-n+2) { grid-column: span 3; flex-direction: row; font-size: 11.5px; }
.tpl-rm.tab > :nth-child(-n+2) svg { width: 16px; height: 16px; }
.tpl-rm.tab > :nth-child(1) { background: var(--tc-soft); color: var(--tc-ink); box-shadow: inset 0 -3px 0 var(--tc); }
.tpl-rm.tab > :nth-child(2) { background: var(--bg-soft); color: var(--ink-3); }
.tpl-rm.tab > :nth-child(n+3) { grid-column: span 2; }
.tpl-rm.xs { gap: 2px; padding: 2px; border-radius: 5px; }
.tpl-rm.xs > span { padding: 0; border-radius: 2px; }
.cv .tpl-rm { border-radius: 0; }
/* 型の一覧 */
.tpl-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; }
@media (min-width: 734px) { .tpl-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .tpl-types { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tpl-type { min-width: 0; padding: 14px 14px 16px; border-radius: var(--r-l); background: var(--bg-elev); }
.sec:not(.sec-soft) .tpl-type { background: var(--bg-soft); }
.tpl-type .tpl-rm > span { color: var(--ink-3); font-size: 13px; font-weight: 800; }
.tpl-type-n { margin-top: 12px; font-size: 15.5px; font-weight: 800; line-height: 1.4; }
.tpl-type-m { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tpl-type-u { margin-top: 6px; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }
.tpl-type-free { --tc: var(--violet); --tc-ink: var(--violet); --tc-soft: var(--violet-soft); }
.tpl-typegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .tpl-typegrid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.tpl-typegrid .tpl-rm { --tc: var(--ink-3); }
.tpl-typegrid .tpl-rm.tpl-on { --tc: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; }
/* 業種ごとの例 */
.tpl-rmxs { display: grid; gap: 22px; }
@media (min-width: 1068px) { .tpl-rmxs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl-rmx {
  position: relative;
  display: grid;
  gap: 22px;
  min-width: 0;
  padding: 28px 22px 24px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-s);
  container-type: inline-size;
  scroll-margin-top: 130px;
}
.sec-soft .tpl-rmx { box-shadow: none; }
.tpl-rmx::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tc); }
@container (min-width: 540px) {
  .tpl-rmx-art { float: left; margin: 0 22px 8px 0; }
}
.tpl-rmx-art { display: grid; justify-items: center; }
.tpl-rmx .phone.sm .phone-screen { min-height: 400px; }
.tpl-rmx .cv-body { padding: 10px 8px; }
.tpl-rmx-text { min-width: 0; }
.tpl-rmx h3,
.tpl-rmx h4 { margin-top: 10px; font-size: 21px; line-height: 1.35; }
.tpl-rmx .tpl-meta { margin-top: 10px; }
.tpl-btns { display: grid; gap: 6px; margin-top: 14px; list-style: none; counter-reset: tplbn; }
.tpl-btns li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 8px 12px 8px 40px;
  border-radius: 12px;
  background: var(--bg-soft);
  font-size: 14px;
  line-height: 1.55;
  counter-increment: tplbn;
}
.tpl-btns li::before {
  content: counter(tplbn);
  position: absolute;
  left: 10px;
  top: 9px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: var(--tc-soft);
  color: var(--tc-ink);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
}
.tpl-btns b { font-weight: 800; }
.tpl-act { padding: 0 8px; border-radius: 999px; background: var(--bg-elev); color: var(--tc-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tpl-what { flex-basis: 100%; color: var(--ink-3); font-size: 13px; }
.tpl-rmx .tpl-tip { margin-top: 14px; clear: both; }

/* 決まりの並び・出典・絵の中の札・選んでいる行・縦の紙・資料のカードの見出し */
.tpl-rules { display: grid; gap: 12px; list-style: none; }
.tpl-rules > li { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-m); background: var(--bg-elev); }
.sec-soft .tpl-rules > li { background: var(--bg-elev); }
.sec:not(.sec-soft):not(.sec-dark) .tpl-rules > li { background: var(--bg-soft); }
.tpl-rules > li > svg { width: 24px; height: 24px; margin-top: 2px; color: var(--brand-ink); }
.tpl-rules b { display: block; font-size: 16px; line-height: 1.5; }
.tpl-rules p { margin-top: 4px; color: var(--ink-3); font-size: 14.5px; line-height: 1.75; }
.tpl-srcs { display: grid; gap: 10px; padding-left: 1.6em; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.tpl-srcs li::marker { color: var(--brand); font-weight: 700; }
.tpl-srcs a { overflow-wrap: anywhere; }
.tpl-pin {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 10.5px;
  font-weight: 800;
}
.ml-row.tpl-on { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 50%, transparent); }
.ml-row > svg { width: 18px; height: 18px; flex: none; color: var(--brand-ink); }
.dl-cover .pg.pg-a4 { width: 150px; aspect-ratio: 210 / 297; }
.dl-cover .pg.pg-a4:nth-child(1) { left: 22px; top: 22px; }
.dl-cover .pg.pg-a4:nth-child(2) { left: 74px; top: 8px; }
.dl-cover .pg.pg-a4:nth-child(3) { left: 126px; top: 0; }
.dl-cover:has(.pg-a4) { height: 250px; }
.tpl-dl-h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.3; }
.tpl-vars th[scope="row"] { min-width: 13em; font-weight: 500; }
.tpl-vars .tpl-var,
.tpl-vars .tpl-ph { font-size: 13px; }

/* 印刷用のページ（画面で見たとき。紙の形は site/assets/templates-print.css） */
.tpl-pnote { padding: 40px 0 8px; text-align: center; }
.tpl-pnote p { max-width: 760px; margin: 0 auto; color: var(--ink-3); font-size: 15px; line-height: 1.8; }
.tpl-book { padding-bottom: 96px; }
.tpl-pcover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: min(100% - var(--gutter) * 2, 1120px);
  min-height: 520px;
  margin: 24px auto 0;
  padding: 40px 32px 28px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 70% at 85% 15%, rgb(255 255 255 / 18%), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, rgb(233 162 59 / 35%), transparent 70%),
    linear-gradient(135deg, #1f3a8f 0%, #3b3fc0 50%, #6a4bd8 100%);
  color: #ffffff;
}
.tpl-pcover-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: 0.08em; }
.tpl-pcover-brand svg { width: 44px; height: 44px; }
.tpl-pcover-k { font-size: 18px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.9; }
.tpl-pcover h1 { margin-top: 10px; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height: 1.2; }
.tpl-pcover-sub { max-width: 38em; margin-top: 18px; color: rgb(255 255 255 / 88%); font-size: 16px; line-height: 1.8; }
.tpl-pcover-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; list-style: none; }
.tpl-pcover-meta li { padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / 14%); font-size: 13.5px; font-weight: 700; }
.tpl-pcover-foot { padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 25%); color: rgb(255 255 255 / 80%); font-size: 12.5px; line-height: 1.7; }
.tpl-psec { margin-top: 72px; }
.tpl-ph2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.tpl-ph2 small { color: var(--ink-3); font-size: 16px; font-weight: 700; }
.tpl-plead { max-width: 60em; margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 1.85; }
.tpl-pcat { display: flex; align-items: center; gap: 10px; margin: 36px 0 16px; font-size: 21px; line-height: 1.35; }
.tpl-pcat svg { width: 24px; height: 24px; color: var(--tc-ink); }
.tpl-pcat small { color: var(--ink-3); font-size: 14px; font-weight: 700; }
.tpl-pcols { display: grid; gap: 16px; }
@media (min-width: 900px) { .tpl-pcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl-pwfs { display: grid; gap: 18px; }
.tpl-prmxs { display: grid; gap: 18px; }
@media (min-width: 1068px) { .tpl-prmxs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl-phow { display: grid; gap: 8px 40px; }
@media (min-width: 900px) { .tpl-phow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl-phow .tpl-list b { color: var(--ink); }
.tpl-ptbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tpl-ptbl th,
.tpl-ptbl td { padding: 8px 10px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; line-height: 1.6; }
.tpl-ptbl th { font-weight: 500; }
.tpl-pnote2 { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }

/* ------------------------------------------------------------------ 足した部品（guides）の続き: 記事の一覧（/guide/）で、束の記事が 1 本だけのときは横いっぱいに。読む順の線の中のリンク */
@media (min-width: 734px) { .gu-cards > li:only-child { grid-column: 1 / -1; } }
.rail.gu-rail h3 a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.rail.gu-rail h3 a:hover { color: var(--brand-ink); }

/* ------------------------------------------------------------------ 足した部品（guides）の続き: 記事の一覧で、束の最後の 1 本が行に 1 つだけ残るときも横いっぱいに */
@media (min-width: 734px) { .gu-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ 足した部品（templates）の続き: 印刷用のページ（/templates/print/）の中身の一覧・段の中の見出し・リッチメニューの型の小見出し（画面） */
/*
  中身の一覧     ol.tpl-ptoc > li > a（> b ＋ span）＋ small
  段の中の見出し .tpl-pcols > h3.tpl-pcat（配信の文例・あいさつは、節ごとに 1 つの .tpl-pcols に見出しとカードを並べる）
  型の小見出し   p.tpl-ptypes-h（大きいメニュー・小さいメニュー）＋ ul.tpl-types.tpl-types-l / .tpl-types-s
*/
.tpl-pcols > .tpl-pcat { grid-column: 1 / -1; }
.tpl-pcols > .tpl-pcat:first-child { margin-top: 0; }
.tpl-psec > .tpl-pcols { margin-top: 28px; }
.tpl-ptypes-h { margin: 18px 0 12px; color: var(--ink-2); font-size: 15px; font-weight: 800; }
.tpl-ptoc { display: grid; gap: 10px; list-style: none; counter-reset: tpltoc; }
@media (min-width: 900px) { .tpl-ptoc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl-ptoc li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--r-m);
  background: var(--bg-soft);
  counter-increment: tpltoc;
}
.tpl-ptoc li::before {
  content: counter(tpltoc);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 800;
  line-height: 1;
}
.tpl-ptoc a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink); }
.tpl-ptoc b { font-size: 17px; }
.tpl-ptoc span { color: var(--ink-3); font-size: 14px; font-weight: 700; }
.tpl-ptoc small { color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }
.tpl-phow { --tc: var(--brand); --tc-ink: var(--brand-ink); --tc-soft: var(--brand-soft); }
.tpl-wf .uses > li { white-space: normal; }
/* 入口の「気をつけること」: 送る前の 4 つを横に並べ、その下に法律の決まりを 2 列で */
.tpl-care { display: grid; gap: 14px; }
.tpl-care-4,
.tpl-care-2 { display: grid; gap: 14px; }
.tpl-care-4 { margin-bottom: 22px; }
@media (min-width: 734px) { .tpl-care-4, .tpl-care-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .tpl-care-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tpl-care .note { margin: 0; }
.tpl-care .note p { margin-top: 2px; font-size: 15px; line-height: 1.75; }
.tpl-type { --tc: var(--brand); --tc-ink: var(--brand-ink); --tc-soft: var(--brand-soft); }
.tpl-type .tpl-rm > span { background: var(--bg-soft); }
.sec:not(.sec-soft) .tpl-type .tpl-rm > span { background: var(--bg-elev); }
/* リッチメニューの例: 横に並んだカードの高さがそろっても、スマホの絵は伸ばさない */
.tpl-rmx { align-content: start; }
.tpl-rmx-art { align-items: start; }
/* 印刷用のページの「1 つの文例の見方」 */
.tpl-pread { display: grid; gap: 10px; list-style: none; counter-reset: tplrd; }
@media (min-width: 734px) { .tpl-pread { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1068px) { .tpl-pread { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tpl-pread li { position: relative; padding: 14px 16px 16px 52px; border-radius: var(--r-m); background: var(--bg-soft); color: var(--ink-2); font-size: 14px; line-height: 1.7; counter-increment: tplrd; }
.tpl-pread li::before { content: counter(tplrd); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; line-height: 1; }
.tpl-pread b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15px; }

/* ------------------------------------------------------------------ 足した部品（係 P）: 写しと動画を今のページに置く（1 本の動画の幅・写しの上のあき・説明の下のリンク・上だけ見せる写し） */
/*
  1 本の動画       figure.shot-video.pv-video（幅を 960px までにして、まん中に）
  幅を絞った写し   figure.shot.pv-mid（幅を 960px までにして、まん中に。下に少し空きのある写し）
  上だけ見せる写し figure.shot.pv-top（下の半分ほどが空いている写し。枠を 1192:540 にして、上から見せる。画像のファイルは切らない）
  上をあける       .pv-mt（56px。figure.shot・figure.shot-video には .mt-l が効かない（media-b の margin: 0 が後ろにある）ので、こちらを使う）
  説明の下のリンク figcaption > p.pv-go > a.more
*/
.pv-video,
.pv-mid { max-width: 960px; margin-left: auto; margin-right: auto; }
.pv-mt { margin-top: 56px; }
.pv-go { margin-top: 12px; }
.pv-go .more { font-size: 16px; }
/* 下に空きの多い写し（一覧が短い画面）は、上の部分だけを見せる: figure.shot.pv-top（画像は切らずに、枠の高さを 1192:540 にして上から見せる） */
.shot.pv-top .shot-frame img { aspect-ratio: 1192 / 540; object-fit: cover; object-position: 50% 0; }

/* ------------------------------------------------------------------ 足した部品（係 F）: 横に動かせる表とコードの「スクロールの影」（fx-） */
/*
  横に動かせる箱（表の .tbl-wrap・.compare-wrap・.table-wrap・.vs-wrap と、コードの .code）で、中身がはみ出しているときだけ、
  続きのある側の端に影を出す（CSS だけ。スマホで右の列が切れて見えるとき、横に動かせると分かるように）。
  しくみ: 背景の絵を 4 枚重ねる。上の 2 枚（attachment: local）は中身と一緒に動く「ふた」で、箱の後ろの色と同じ色。
  下の 2 枚（scroll）は箱の端に止まった影。はみ出していなければ、両端のふたが影を隠す。右に続きがあると右のふたが外に出て、右の影が見える（左も同じ）。
  - ふたの色 --fx-cover: 表の箱は --bg-elev（.tbl-wrap は自分の色が無く、置いている所（.win・.tile・.sheet・本文の表 .ia-tw）が --bg-elev。
    いつも暗い帯 .sec-dark の中でも --bg-elev が暗い色に変わるので合う）。ちがう色の上に置くときは、その色を --fx-cover に入れる
  - 影の色 --fx-shade: 字の色 --ink を薄くしたもの（明るい表示では暗い影、暗い表示と .sec-dark では明るい影になり、どちらでも見える）
  - コード（.code）は、明るい表示でも暗い箱（#0b0b0d）なので、ふたは箱の色、影はコードの字の色（#e7e7ea）を薄くしたもの
  - 表の見出しの行（.tbl th）や、くらべる表の左に止まる列（.vs tbody th）のように色の付いたマスの下では、影は見えない（ほかの行で見える）
  - 印刷（資料・テンプレート集の PDF）には出さない（@media screen）
  - ギャラリー（.gallery）・画面の切り替えのタブ（.tour-tabs）・ページの中の目次（.subnav ul）には付けない（次のカードやタブが切れて見えて、続きが分かる。
    .subnav は後ろが透けてぼけるので、同じ色のふたを作れない）
  - .tbl-wrap.ia-tw は前の決まりが background をまとめて書いている（強さ 0,2,0）ので、ここにも並べて、絵を消されないようにする
*/
@media screen {
  .tbl-wrap,
  .tbl-wrap.ia-tw,
  .compare-wrap,
  .table-wrap,
  .vs-wrap,
  .code {
    --fx-cover: var(--bg-elev);
    --fx-shade: color-mix(in srgb, var(--ink) 22%, transparent);
    background-image:
      linear-gradient(to right, var(--fx-cover) 30%, transparent),
      linear-gradient(to left, var(--fx-cover) 30%, transparent),
      linear-gradient(to right, var(--fx-shade), transparent),
      linear-gradient(to left, var(--fx-shade), transparent);
    background-position: left center, right center, left center, right center;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  /* 自分の色の無い .tbl-wrap は、ふたと同じ色をしいておく（いまはどこも --bg-elev の上なので、見た目は変わらない。ちがう色の上に置いても、ふたが浮かない） */
  .tbl-wrap { background-color: var(--fx-cover); }
  .code {
    --fx-cover: #0b0b0d;
    --fx-shade: rgb(231 231 234 / 26%);
  }
}

/* ------------------------------------------------------------------ 足した部品（係 F）: 表のマスの中で、言葉の途中で折り返さない */
/*
  body の overflow-wrap: anywhere は、表の列の幅を決めるときにも「1 字ずつに縮められる」と見なされるので、自動で幅を決める表
  （本文の表 .tbl.ia-wrap・くらべる表 .vs・.compare・資料のプランの表 .sh-plan・決まりの表 .legal）で、行の名前の列がせまくなり、
  「マーケティングエージェン｜ト」「友だち追加ボ｜タン」のように言葉の途中で割れていた。マスの中だけ break-word にすると、
  列は「いちばん長いひとかたまりの言葉」より細くならない（はみ出すときだけ折る）。表は横に動かせる箱の中なので、ページははみ出さない。
  印刷（資料・テンプレート集の PDF）の形は変えない（@media screen）
*/
@media screen {
  .tbl.ia-wrap th,
  .tbl.ia-wrap td,
  .vs th,
  .vs td,
  .compare th,
  .compare td,
  .sh-plan th,
  .sh-plan td,
  .legal th,
  .legal td { overflow-wrap: break-word; }
}

/* ------------------------------------------------------------------ 足した部品（係 F）: 列の多い本文の表を広くする（table.tbl.ia-wrap.fx-wide） */
/*
  本文の表 .tbl.ia-wrap は 620px より細くならない。列が 6 つ以上ある表（/guide/ai/ のよくある質問の CSV の例・/guide/frequency/ の配信の記録の例）は、
  620px では 1 列が 60〜110px になり、「212｜人」「お知ら｜せください」のように数と単位や言葉が割れるので、820px（くらべる表 .vs と同じ）より細くしない。
  横に動かせる箱（.tbl-wrap）の中なので、せまい画面では横に動かして読む（端に影が出る）
*/
@media screen {
  .tbl.ia-wrap.fx-wide { min-width: 820px; }
}