:root {
  --ink: #16223b;
  --muted: #56627a;
  --navy: #14295c;
  --brand: #0b5fba;
  --brand-dark: #0a4a92;
  --brand-soft: #eaf2fb;
  --orange: #f5821f;
  --orange-soft: #fff3e8;
  --green: #0f8a63;
  --green-soft: #e9f6ef;
  --violet: #6a55c2;
  --violet-soft: #f1eefb;
  --paper: #ffffff;
  --canvas: #f4f6fa;
  --line: #d9e0ea;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(20, 41, 92, 0.1);
  --width: 1160px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--brand-dark); text-underline-offset: 3px; }
a:hover { color: var(--brand); }
img, svg { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  color: #fff;
  background: var(--navy);
  border-radius: 6px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 68px;
  border-bottom: 1px solid rgba(217, 224, 234, 0.9);
}
/* ぼかしはヘッダー本体ではなく疑似要素に付ける。本体に付けると iPhone の Safari で
   ヘッダーからはみ出すハンバーガーメニューの中身が描かれず、真っ白になる */
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--width);
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
}
.brand:hover { color: var(--navy); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--navy) 100%);
  border-radius: 10px;
}
.brand-mark svg { width: 20px; height: 20px; }
.header-nav { display: flex; align-items: center; gap: 6px; }
.header-nav a {
  padding: 8px 12px;
  white-space: nowrap;
  color: #3a4863;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  border-radius: 8px;
}
.header-nav a:hover,
.header-nav a[aria-current="page"] { color: var(--brand-dark); background: var(--brand-soft); }
.header-nav a.nav-cta { color: #fff; background: var(--navy); }
.header-nav a.nav-cta:hover { color: #fff; background: var(--brand); }
.header-nav { gap: 2px; }
.header-nav a { padding: 8px 10px; }
.nav-toggle { display: none; }

/* 一列に収まらない幅では、メニューをハンバーガーボタンの中にまとめる */
@media (max-width: 1120px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
  }
  /* 幅は明示する。iPhone の Safari では button の中の flex アイテムが横に伸びず、幅 0 で線が消えて白い箱に見える */
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .header-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    padding: 10px 16px 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(20, 41, 92, .12);
  }
  .header-nav.is-open { display: flex; }
  .header-nav a { padding: 12px 14px; font-size: 15px; }
  .header-nav a.nav-cta { margin-top: 8px; text-align: center; }
}

/* ---------- 共通パーツ ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(20, 41, 92, 0.18);
}
.button:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.button.secondary { color: var(--navy); background: #fff; box-shadow: none; }
.button.secondary:hover { color: var(--brand-dark); background: var(--brand-soft); }

.eyebrow {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.section { padding: 84px 24px; }
.section.white { background: #fff; }
.section-inner { max-width: var(--width); margin: 0 auto; }
.section-heading { max-width: 760px; margin-bottom: 36px; }
.section-heading.center { margin-right: auto; margin-left: auto; text-align: center; }
.section-heading h2 { margin: 0; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.35; letter-spacing: -.02em; }
.section-heading p:last-child:not(.eyebrow) { margin: 13px 0 0; color: var(--muted); font-size: 17px; }

.icon-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  color: var(--tile-color, var(--brand));
  background: var(--tile-bg, var(--brand-soft));
  border-radius: 14px;
}
.icon-tile svg { width: 28px; height: 28px; }
.tone-blue { --tile-color: var(--brand); --tile-bg: var(--brand-soft); }
.tone-orange { --tile-color: #c25e07; --tile-bg: var(--orange-soft); }
.tone-green { --tile-color: var(--green); --tile-bg: var(--green-soft); }
.tone-violet { --tile-color: var(--violet); --tile-bg: var(--violet-soft); }

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 14%, rgba(11, 95, 186, .16), transparent 30%),
    radial-gradient(circle at 8% 92%, rgba(245, 130, 31, .1), transparent 30%),
    linear-gradient(135deg, #fff 15%, #eef4fc 100%);
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -130px;
  width: 440px;
  height: 250px;
  border: 2px solid rgba(11, 95, 186, .14);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 40px;
  max-width: var(--width);
  min-height: 560px;
  margin: 0 auto;
  padding: 72px 24px 78px;
}
.hero-copy h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.25;
  letter-spacing: -.03em;
}
.hero-copy h1 span { color: var(--brand); white-space: nowrap; }
.hero-copy > p:not(.eyebrow) { max-width: 600px; margin: 22px 0 28px; color: #45526b; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-quicklinks { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.hero-quicklinks a { color: var(--brand-dark); font-size: 14px; font-weight: 700; }
.hero-visual { min-width: 0; margin: 0; }

/* アプリ画面の見本（実アプリ src/renderer の配色・部品を CSS で再現）
   data-theme="light"（白背景）と data-theme="dark" の 2 種類。
   切り替えは index.html の .app-mock の data-theme を書き換えるだけ */
.app-mock {
  --m-bg: #eef1f7;
  --m-glow: radial-gradient(ellipse 100% 50% at 50% -15%, rgba(99, 102, 241, .12), transparent 70%),
    radial-gradient(circle at 100% 100%, rgba(16, 185, 129, .08), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(6, 182, 212, .07), transparent 45%);
  --m-titlebar: #e3e6ec;
  --m-titlebar-text: #4b5563;
  --m-titlebar-line: rgba(15, 23, 42, .1);
  --m-surface: rgba(255, 255, 255, .82);
  --m-surface-border: rgba(15, 23, 42, .08);
  --m-surface-shadow: 0 6px 24px -8px rgba(15, 23, 42, .15);
  --m-text-main: #0f172a;
  --m-text-body: #1e293b;
  --m-text-secondary: #475569;
  --m-well: rgba(15, 23, 42, .045);
  --m-well-border: rgba(15, 23, 42, .08);
  --m-field: #fff;
  --m-field-border: rgba(15, 23, 42, .14);
  --m-button: #fff;
  --m-button-border: rgba(15, 23, 42, .12);
  --m-hint-bg: rgba(99, 102, 241, .06);
  --m-hint-border: rgba(99, 102, 241, .2);
  --m-hint-text: #3730a3;
  --m-bar-track: rgba(15, 23, 42, .1);
  --m-card: rgba(255, 255, 255, .92);
  --m-card-border: rgba(15, 23, 42, .08);
  --m-card-shadow: 0 6px 20px -6px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .06);
  --m-translation-bg: #f6f8fc;
  --m-translation-line: rgba(15, 23, 42, .06);
  --m-label-bg: #f1f5f9;
  --m-label-border: rgba(100, 116, 139, .3);
  --m-label-text: #475569;
  --m-label-tr-bg: linear-gradient(135deg, rgba(16, 185, 129, .12) 0%, rgba(6, 182, 212, .12) 100%);
  --m-label-tr-border: rgba(5, 150, 105, .4);
  --m-label-tr-text: #047857;
  --m-icon-bg: #fff;
  --m-icon-border: rgba(15, 23, 42, .12);
  --m-toggle: #6366f1;
  overflow: hidden;
  color: var(--m-text-main);
  background-color: var(--m-bg);
  background-image: var(--m-glow);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(20, 41, 92, .22);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 12px;
  font-feature-settings: "palt" 1;
  line-height: 1.5;
}
.app-mock[data-theme="dark"] {
  --m-bg: #06080d;
  --m-glow: radial-gradient(ellipse 100% 50% at 50% -15%, rgba(99, 102, 241, .15), transparent 70%),
    radial-gradient(circle at 100% 100%, rgba(16, 185, 129, .06), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(6, 182, 212, .05), transparent 45%);
  --m-titlebar: #1c1f26;
  --m-titlebar-text: #9ca3af;
  --m-titlebar-line: rgba(0, 0, 0, .5);
  --m-surface: rgba(18, 24, 38, .78);
  --m-surface-border: rgba(255, 255, 255, .1);
  --m-surface-shadow: 0 8px 32px -4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
  --m-text-main: #f8fafc;
  --m-text-body: #e2e8f0;
  --m-text-secondary: #cbd5e1;
  --m-well: rgba(0, 0, 0, .32);
  --m-well-border: rgba(255, 255, 255, .08);
  --m-field: rgba(255, 255, 255, .04);
  --m-field-border: rgba(255, 255, 255, .08);
  --m-button: rgba(255, 255, 255, .04);
  --m-button-border: rgba(255, 255, 255, .1);
  --m-hint-bg: rgba(255, 255, 255, .04);
  --m-hint-border: rgba(255, 255, 255, .08);
  --m-hint-text: #e2e8f0;
  --m-bar-track: rgba(255, 255, 255, .1);
  --m-card: linear-gradient(180deg, rgba(24, 30, 46, .78) 0%, rgba(15, 19, 30, .85) 100%);
  --m-card-border: rgba(255, 255, 255, .08);
  --m-card-shadow: 0 10px 30px -5px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  --m-translation-bg: rgba(0, 0, 0, .18);
  --m-translation-line: rgba(255, 255, 255, .06);
  --m-label-bg: rgba(148, 163, 184, .1);
  --m-label-border: rgba(148, 163, 184, .3);
  --m-label-text: #cbd5e1;
  --m-label-tr-bg: linear-gradient(135deg, rgba(16, 185, 129, .18) 0%, rgba(6, 182, 212, .18) 100%);
  --m-label-tr-border: rgba(52, 211, 153, .45);
  --m-label-tr-text: #34d399;
  --m-icon-bg: rgba(255, 255, 255, .08);
  --m-icon-border: rgba(255, 255, 255, .14);
  --m-toggle: #fbbf24;
  border-color: #1e2638;
  box-shadow: 0 30px 70px rgba(20, 41, 92, .28);
}
.mock-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  background: var(--m-titlebar);
  border-bottom: 1px solid var(--m-titlebar-line);
}
.mock-titlebar i { width: 11px; height: 11px; border-radius: 50%; }
.mock-titlebar i:nth-child(1) { background: #ff5f57; }
.mock-titlebar i:nth-child(2) { background: #febc2e; }
.mock-titlebar i:nth-child(3) { background: #28c840; }
.mock-titlebar span { position: absolute; left: 0; right: 0; color: var(--m-titlebar-text); font-size: 11px; font-weight: 600; text-align: center; pointer-events: none; }
.mock-body { display: grid; gap: 10px; padding: 12px 14px 16px; }

/* ヘッダー（実アプリのフローティングバー） */
.mock-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 8px;
  padding: 7px 9px;
  background: var(--m-surface);
  border: 1px solid var(--m-surface-border);
  border-radius: 12px;
  box-shadow: var(--m-surface-shadow);
}
.mock-rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  color: #fff;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid rgba(185, 28, 28, .7);
  border-radius: 7px;
  box-shadow: 0 0 16px rgba(239, 68, 68, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
}
.mock-rec svg { width: 12px; height: 12px; }
.mock-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 9px;
  color: var(--m-text-secondary);
  background: var(--m-well);
  border: 1px solid var(--m-well-border);
  border-radius: 9px;
  font-size: 11px;
}
.mock-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 8px;
  color: var(--m-text-main);
  background: var(--m-field);
  border: 1px solid var(--m-field-border);
  border-radius: 6px;
  font-weight: 600;
}
.mock-select::after { content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.mock-hint {
  padding: 3px 10px;
  color: var(--m-hint-text);
  background: var(--m-hint-bg);
  border: 1px solid var(--m-hint-border);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}
.mock-button {
  padding: 4px 9px;
  color: var(--m-text-body);
  background: var(--m-button);
  border: 1px solid var(--m-button-border);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  font-size: 11px;
  font-weight: 600;
}
.mock-actions { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.mock-usage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  color: var(--m-text-body);
  background: var(--m-well);
  border: 1px solid var(--m-well-border);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mock-usage small { color: var(--m-text-secondary); font-size: 10px; }
.mock-usage i { display: block; width: 36px; height: 5px; overflow: hidden; background: var(--m-bar-track); border-radius: 999px; }
.mock-usage i::before { content: ""; display: block; width: 27%; height: 100%; background: #10b981; border-radius: inherit; }
.mock-theme {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--m-toggle);
  background: var(--m-button);
  border: 1px solid var(--m-button-border);
  border-radius: 8px;
}
.mock-theme svg { width: 13px; height: 13px; }
.mock-theme .sun { display: none; }
.app-mock[data-theme="dark"] .mock-theme .sun { display: block; }
.app-mock[data-theme="dark"] .mock-theme .moon { display: none; }

/* 会話カード */
.mock-list { display: grid; gap: 9px; }
.mock-card {
  overflow: hidden;
  background: var(--m-card);
  border: 1px solid var(--m-card-border);
  border-radius: 12px;
  box-shadow: var(--m-card-shadow);
}
.mock-line { display: flex; align-items: flex-start; gap: 9px; padding: 8px 12px; }
.mock-line + .mock-line { background: var(--m-translation-bg); border-top: 1px solid var(--m-translation-line); }
.mock-label {
  flex-shrink: 0;
  min-width: 44px;
  margin-top: 1px;
  padding: 1px 6px;
  color: var(--m-label-text);
  background: var(--m-label-bg);
  border: 1px solid var(--m-label-border);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
}
.mock-line + .mock-line .mock-label { color: var(--m-label-tr-text); background: var(--m-label-tr-bg); border-color: var(--m-label-tr-border); }
.mock-line + .mock-line .mock-label { margin-top: 3px; }
.mock-icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--m-text-secondary);
  background: var(--m-icon-bg);
  border: 1px solid var(--m-icon-border);
  border-radius: 50%;
}
.mock-line + .mock-line .mock-icon { margin-top: 2px; }
.mock-icon svg { width: 10px; height: 10px; }
.mock-original { min-width: 0; color: var(--m-text-body); font-size: 12px; font-weight: 500; }
.mock-translation { min-width: 0; color: var(--m-text-main); font-size: 15px; font-weight: 600; line-height: 1.55; }
/* 翻訳確定前（実アプリの data-final="false" と同じくグレー表示） */
.mock-card.live .mock-translation { color: var(--m-text-secondary); }
.mock-card.live .mock-translation::after { content: "▍"; margin-left: 2px; color: #10b981; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mock-card.live .mock-translation::after { animation: none; } }
.hero-visual figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; text-align: right; }

/* ---------- About ---------- */
.about-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(214, 232, 255, .75), transparent 70%),
    radial-gradient(700px 420px at 0% 100%, rgba(226, 236, 255, .8), transparent 70%),
    linear-gradient(180deg, #f8fbff 0%, #f1f5fd 100%);
}
.about-section > .section-inner { position: relative; }
.about-deco span { position: absolute; border-radius: 50%; pointer-events: none; }
.about-deco span:nth-child(1) { top: -220px; left: -160px; width: 500px; height: 500px; background: radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .75), rgba(199, 223, 252, .4)); border: 1px solid rgba(255, 255, 255, .8); }
.about-deco span:nth-child(2) { top: 60px; right: 12%; width: 72px; height: 72px; background: radial-gradient(circle at 35% 30%, #fff, rgba(170, 205, 250, .6)); }
.about-deco span:nth-child(3) { right: -120px; bottom: -140px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(214, 205, 252, .45), transparent 70%); }
.about-section .eyebrow { letter-spacing: .32em; }
.about-section .section-heading { max-width: 900px; }
.about-section .section-heading h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 900; color: #0f1b33; }
.about-section .section-heading h2 .text-gradient { white-space: nowrap; }
.about-mark {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  color: #fff;
  background: linear-gradient(145deg, #3fa0ff 0%, #1a6fe0 55%, var(--navy) 100%);
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(31, 92, 200, .28), 0 1px 0 rgba(255, 255, 255, .5) inset;
}
.about-mark svg { width: 36px; height: 36px; }
.lang-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lang-list li {
  --tone: #1f6fe0;
  --tone-bg: #e2edfd;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 34px rgba(31, 72, 140, .08);
  backdrop-filter: blur(10px);
  line-height: 1.35;
}
.lang-list .lang-blue { --tone: #1f6fe0; --tone-bg: #e2edfd; }
.lang-list .lang-orange { --tone: #e8700f; --tone-bg: #fff0e2; }
.lang-list .lang-green { --tone: #12a06a; --tone-bg: #e2f6ec; }
.lang-list .lang-violet { --tone: #7a45e0; --tone-bg: #efe8fd; }
.lang-code { display: grid; flex: 0 0 auto; place-items: center; width: 46px; height: 46px; color: var(--tone); background: var(--tone-bg); border-radius: 14px; font-size: 14px; font-weight: 900; letter-spacing: .06em; box-shadow: 0 1px 0 #fff inset; }
.lang-list li > div { min-width: 0; }
.lang-list b { display: block; color: #0f1b33; font-size: 16px; font-weight: 850; }
.lang-list li > div > span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.lang-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px auto 0;
  padding: 14px 24px;
  color: var(--muted);
  background: linear-gradient(90deg, rgba(225, 236, 252, .8), rgba(236, 232, 252, .8));
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  font-size: 15px;
  text-align: center;
}
.lang-note-count { flex: 0 0 auto; color: #0f1b33; font-size: 15px; font-weight: 800; }
.lang-note-count b {
  margin-right: 2px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(90deg, #0b6be0 0%, #1d8cf8 60%, #0b5fba 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 900px) {
  .lang-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .about-mark { width: 56px; height: 56px; border-radius: 16px; }
  .about-mark svg { width: 30px; height: 30px; }
  .lang-list { gap: 12px; }
  .lang-list li { gap: 10px; padding: 14px 12px; border-radius: 16px; }
  .lang-code { width: 38px; height: 38px; border-radius: 12px; font-size: 12px; }
  .lang-list b { font-size: 15px; }
  .lang-list li > div > span { font-size: 12px; }
  .lang-note { gap: 12px; padding: 14px 18px; border-radius: 18px; text-align: left; font-size: 14px; }
}

/* ---------- 利用シーン ---------- */
.uses-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 420px at 0% 0%, rgba(205, 225, 252, .7), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(214, 232, 255, .75), transparent 70%),
    linear-gradient(180deg, #f8fbff 0%, #f0f5fd 100%);
}
.uses-section > .section-inner { position: relative; max-width: 1280px; }
.uses-deco span { position: absolute; pointer-events: none; }
.uses-deco span:nth-child(1) { top: -260px; left: -180px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .6), rgba(190, 218, 252, .5)); border: 1px solid rgba(255, 255, 255, .9); }
.uses-deco span:nth-child(2) { top: -220px; right: -140px; width: 560px; height: 420px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .95); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(214, 230, 252, .3)); }
.uses-deco span:nth-child(3) { right: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .4), rgba(150, 195, 252, .45)); }
/* 右上・左下のドット模様 */
.uses-deco span:nth-child(4),
.uses-deco span:nth-child(5) { background: radial-gradient(circle, rgba(130, 165, 220, .4) 1.6px, transparent 2.2px) 0 0 / 24px 24px; }
.uses-deco span:nth-child(4) { top: 56px; right: 24px; width: 168px; height: 192px; }
.uses-deco span:nth-child(5) { bottom: 40px; left: 0; width: 96px; height: 144px; }
.uses-section .eyebrow { display: flex; align-items: center; justify-content: center; gap: 26px; letter-spacing: .32em; }
.uses-section .eyebrow::before,
.uses-section .eyebrow::after { content: ""; width: 56px; height: 1px; background: rgba(11, 95, 186, .3); }
.uses-section .section-heading { max-width: 900px; }
.uses-section .section-heading h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 900; color: #0f1b33; }

.purpose-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.purpose-card {
  --card-color: var(--brand);
  --card-tint: rgba(214, 232, 255, .55);
  --card-glow: rgba(120, 180, 255, .35);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 36px 36px 34px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--card-tint) 0%, rgba(255, 255, 255, .9) 45%, rgba(255, 255, 255, .96) 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 46px rgba(31, 72, 140, .09);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.purpose-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 26px 56px rgba(31, 72, 140, .14); }
.purpose-card.counter { --card-color: #1a6fe0; --card-tint: rgba(220, 234, 255, .6); --card-glow: rgba(110, 175, 255, .6); }
.purpose-card.hotel { --card-color: #e8720f; --card-tint: rgba(255, 233, 210, .6); --card-glow: rgba(255, 175, 100, .6); }
.purpose-card.travel { --card-color: #0f9a72; --card-tint: rgba(214, 246, 234, .6); --card-glow: rgba(90, 210, 170, .6); }

/* 場面の写真。カード上端いっぱいに敷く。写真に差し替えるときは assets/uses/ の画像を入れ替える */
.purpose-photo {
  margin: -36px -36px 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--card-tint);
  border-bottom: 1px solid rgba(20, 41, 92, .08);
}
.purpose-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.purpose-card:hover .purpose-photo img { transform: scale(1.03); }

.purpose-card .number {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 30px 0 0;
  color: var(--card-color);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .14em;
}
.purpose-card .number::after { content: ""; flex: 0 1 72px; min-width: 0; height: 1px; background: currentColor; opacity: .35; }
.purpose-card h3 { margin: 18px 0 16px; color: #0f1b33; font-size: clamp(24px, 2.5vw, 32px); font-weight: 900; line-height: 1.5; }
.purpose-card > p:not(.number) { margin: 0 0 28px; color: var(--muted); font-size: 16px; line-height: 1.95; }
.purpose-card ul { display: grid; gap: 12px; margin: auto 0 0; padding: 24px 0 0; border-top: 1px solid rgba(20, 41, 92, .1); list-style: none; }
.purpose-card li { position: relative; padding-left: 36px; color: #2a3650; font-size: 15px; line-height: 1.6; }
.purpose-card li::before {
  content: "";
  position: absolute;
  top: .05em;
  left: 0;
  width: 24px;
  height: 24px;
  background: var(--card-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat;
  border-radius: 50%;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--card-color) 35%, transparent);
}
@media (max-width: 1180px) {
  .purpose-card { padding: 30px 26px 28px; }
  .purpose-photo { margin: -30px -26px 0; }
  .purpose-card .number { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .purpose-card, .purpose-photo img { transition: none; } .purpose-card:hover, .purpose-card:hover .purpose-photo img { transform: none; } }
@media (max-width: 720px) {
  .uses-deco span:nth-child(4), .uses-deco span:nth-child(5) { display: none; }
  .uses-section .eyebrow { gap: 16px; }
  .uses-section .eyebrow::before, .uses-section .eyebrow::after { width: 32px; }
  /* 「か？」だけが次の行に落ちないよう、スマホでは1行に収める */
  .uses-section .section-heading h2 { font-size: clamp(24px, 7vw, 30px); }
}

/* ---------- お悩み ---------- */
.persona-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(214, 232, 255, .7), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(226, 236, 255, .8), transparent 70%),
    linear-gradient(180deg, #f7faff 0%, #eef4fd 100%);
}
.persona-section > .section-inner { position: relative; }
.persona-deco span { position: absolute; border-radius: 50%; pointer-events: none; }
.persona-deco span:nth-child(1) { top: -180px; right: -120px; width: 460px; height: 460px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(199, 223, 252, .45)); border: 1px solid rgba(255, 255, 255, .8); }
.persona-deco span:nth-child(2) { top: 30px; right: 220px; width: 110px; height: 110px; background: radial-gradient(circle at 35% 30%, #fff, rgba(190, 218, 252, .55)); }
.persona-deco span:nth-child(3) { bottom: 120px; left: -80px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(205, 225, 252, .55), transparent 70%); }
.persona-section .eyebrow { letter-spacing: .32em; }
.persona-section .section-heading { max-width: 900px; }
.persona-section .section-heading h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 900; color: #0f1b33; }
.text-gradient {
  background: linear-gradient(90deg, #0b6be0 0%, #1d8cf8 60%, #0b5fba 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.persona-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.persona-card {
  --tone: var(--brand);
  --tone-soft: rgba(11, 95, 186, .08);
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 170px;
  gap: 16px;
  align-items: center;
  min-height: 230px;
  padding: 30px 26px 30px 28px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 44px rgba(31, 72, 140, .09);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.persona-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--tone-soft), transparent 70%);
  pointer-events: none;
}
.persona-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 54px rgba(31, 72, 140, .14); }
.persona-card.tone-blue { --tone: #1d78e0; --tone-soft: rgba(29, 120, 224, .1); }
.persona-card.tone-orange { --tone: #ef8a2a; --tone-soft: rgba(255, 140, 70, .12); }
.persona-card.tone-green { --tone: #16a374; --tone-soft: rgba(40, 190, 130, .11); }
.persona-card.tone-violet { --tone: #7a5ae0; --tone-soft: rgba(130, 100, 240, .12); }
.persona-num { align-self: start; color: var(--tone); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: .02em; opacity: .75; }
.persona-body { position: relative; align-self: start; }
.persona-label { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; color: var(--tone); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.persona-label span + span { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .04em; }
.persona-label span + span::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .5; }
.persona-card h3 { margin: 0 0 14px; color: #0f1b33; font-size: 22px; font-weight: 850; line-height: 1.55; }
.persona-body > p:last-child { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.persona-art { position: relative; width: 170px; height: 170px; }
.persona-art svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 18px rgba(31, 72, 140, .14)); }
.banner-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 26px;
  padding: 28px 36px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(600px 200px at 85% 120%, rgba(80, 160, 255, .45), transparent 70%),
    linear-gradient(110deg, #0a2a6b 0%, #0b4fb0 55%, #1a6fe0 100%);
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(11, 60, 150, .28);
}
.banner-link::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% 30%;
  height: 160%;
  background: repeating-radial-gradient(ellipse at 100% 100%, transparent 0 18px, rgba(255, 255, 255, .05) 19px 20px);
  pointer-events: none;
}
.banner-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 76px;
  height: 76px;
  color: #fff;
  background: linear-gradient(145deg, rgba(80, 170, 255, .55), rgba(20, 90, 200, .35));
  border: 1px solid rgba(160, 210, 255, .55);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 10px 24px rgba(0, 20, 70, .3);
}
.banner-icon svg { width: 34px; height: 34px; }
.banner-text { flex: 1 1 auto; min-width: 0; }
.banner-link strong { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 850; letter-spacing: .01em; }
.banner-link .banner-text span { color: rgba(255, 255, 255, .82); font-size: 15px; }
.banner-link .button { position: relative; z-index: 1; flex: 0 0 auto; padding: 16px 30px; color: #0f1b33; border: 0; border-radius: 999px; box-shadow: 0 10px 24px rgba(0, 20, 70, .25); }
.banner-link .button:hover { color: var(--brand-dark); background: #fff; transform: translateY(-1px); }
@media (max-width: 1080px) {
  .persona-card { grid-template-columns: 36px minmax(0, 1fr) 110px; padding: 26px 20px; }
  .persona-art { width: 110px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) { .persona-card { transition: none; } .persona-card:hover { transform: none; } }

/* ---------- データの取り扱い ---------- */
.data-storage {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 42px;
  align-items: center;
  padding: 44px;
  color: #e8eefa;
  background: linear-gradient(135deg, #0f1f47 0%, #14295c 55%, #0b4f9c 100%);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.data-storage .eyebrow { color: #9cc7f5; }
.data-storage h2 { margin: 0 0 12px; color: #fff; font-size: clamp(28px, 4vw, 42px); line-height: 1.3; }
.data-storage p { margin: 0; color: rgba(232, 238, 250, .84); }
.data-storage p strong { color: #fff; }
.storage-points { display: grid; gap: 11px; }
.storage-points > div { padding: 17px 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px; }
.storage-points strong { display: block; color: #fff; }
.storage-points span { color: rgba(232, 238, 250, .8); font-size: 14px; }
.service-disclosure { margin-top: 24px; padding: 24px; background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; }
.service-disclosure h3 { margin: 0 0 8px; font-size: 18px; }
.service-disclosure p { margin: 0; color: var(--muted); font-size: 14px; }
.service-disclosure p + p { margin-top: 10px; }

/* ---------- 機能 ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card { min-height: 210px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 26px rgba(20, 41, 92, .055); }
.feature-card .icon-tile { margin-bottom: 20px; }
.feature-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.5; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- ステップ ---------- */
.steps-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 0% 30%, rgba(220, 230, 255, .8), transparent 70%),
    radial-gradient(800px 420px at 100% 60%, rgba(232, 224, 255, .7), transparent 70%),
    linear-gradient(180deg, #f7f9ff 0%, #f1f4fd 100%);
}
.steps-section > .section-inner { position: relative; }
.steps-deco span { position: absolute; border-radius: 50%; pointer-events: none; }
.steps-deco span:nth-child(1) { top: 40px; left: -160px; width: 520px; height: 520px; border: 1px solid rgba(160, 190, 240, .35); background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .6), transparent 60%); }
.steps-deco span:nth-child(2) { top: 140px; left: 6%; width: 64px; height: 64px; background: radial-gradient(circle at 35% 30%, #fff, rgba(190, 210, 250, .6)); }
.steps-deco span:nth-child(3) { top: -120px; right: -140px; width: 480px; height: 480px; background: radial-gradient(circle at 30% 60%, rgba(255, 255, 255, .7), rgba(214, 208, 252, .35)); border: 1px solid rgba(255, 255, 255, .8); }
.steps-deco span:nth-child(4) { top: 120px; right: 4%; width: 28px; height: 28px; background: radial-gradient(circle at 35% 30%, #fff, #7fb2f7); }
.steps-eyebrow { display: inline-flex; align-items: center; gap: 22px; letter-spacing: .2em; }
.steps-eyebrow::before, .steps-eyebrow::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .4; }
.steps-section .section-heading h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 900; color: #0f1b33; }
.steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step-card {
  --tone: #1f74e8;
  --tone-2: #4fa3ff;
  --tone-soft: rgba(31, 116, 232, .1);
  position: relative;
  padding: 30px 34px 34px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .78));
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 46px rgba(40, 70, 150, .1);
  backdrop-filter: blur(10px);
}
.step-card::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: linear-gradient(145deg, var(--tone-2), var(--tone));
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 8px 18px var(--tone-soft);
}
.step-card + .step-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -26px;
  width: 11px;
  height: 11px;
  border-top: 2.5px solid #8fa8dc;
  border-right: 2.5px solid #8fa8dc;
  transform: translateY(-50%) rotate(45deg);
}
.step-blue { --tone: #1268e0; --tone-2: #3d95ff; --tone-soft: rgba(18, 104, 224, .3); }
.step-teal { --tone: #0fa79a; --tone-2: #3fd0c0; --tone-soft: rgba(15, 167, 154, .3); }
.step-violet { --tone: #6a3fe0; --tone-2: #9a74ff; --tone-soft: rgba(106, 63, 224, .3); }
.step-art { height: 190px; margin: 0 -10px 18px 30px; }
.step-art svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 16px rgba(40, 70, 150, .14)); }
.step-card strong { display: block; margin-bottom: 12px; color: #0f1b33; font-size: 23px; font-weight: 850; }
.step-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
@media (max-width: 1080px) {
  .steps-row { gap: 28px; }
  .step-card { padding: 26px 24px 28px; }
  .step-card::before { top: 24px; left: 22px; width: 42px; height: 42px; font-size: 18px; }
  .step-card + .step-card::after { left: -19px; }
  .step-art { height: 150px; margin-left: 24px; }
  .step-card strong { font-size: 20px; }
}

/* ---------- 対応環境 ---------- */
.download-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.download-card { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.download-card h3 { margin: 0 0 4px; font-size: 24px; }
.download-card p { margin: 0 0 14px; color: var(--muted); }
.download-card ul { margin: 0; padding-left: 20px; font-size: 15px; }
.download-card li::marker { color: var(--brand); }
.download-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- CTA ---------- */
.cta {
  padding: 52px 44px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.section.white .cta { background: var(--canvas); box-shadow: none; }
.cta h2 { margin: 0 0 10px; color: var(--navy); font-size: clamp(26px, 4vw, 38px); line-height: 1.35; }
.cta > p { max-width: 640px; margin: 0 auto 26px; color: var(--muted); }
.contact-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.contact-item {
  display: grid;
  min-width: 260px;
  padding: 16px 22px;
  color: var(--navy);
  text-align: left;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  line-height: 1.5;
}
.contact-item:hover { border-color: var(--brand); color: var(--navy); }
.contact-item span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.contact-item b { font-size: 20px; overflow-wrap: anywhere; }

/* ---------- 料金ページ ---------- */
.pricing-hero {
  padding: 72px 24px 54px;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, #eef4fc 100%);
  border-bottom: 1px solid var(--line);
}
.pricing-hero-inner { max-width: 780px; margin: 0 auto; }
.pricing-hero h1 { margin: 0; color: var(--navy); font-size: clamp(34px, 6vw, 56px); line-height: 1.25; letter-spacing: -.03em; }
.pricing-hero h1 + p { margin: 18px auto 0; color: var(--muted); font-size: 18px; }
.pricing-scope { margin: 22px auto 0; padding: 14px 18px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; text-align: left; }
.pricing-scope a { color: var(--brand); }
.pricing-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 41, 92, .06); }
.price-card.featured { border: 2px solid var(--brand); box-shadow: 0 18px 45px rgba(11, 95, 186, .14); }
.price-badge { align-self: flex-start; margin: -8px 0 18px; padding: 4px 10px; color: #fff; background: var(--brand); border-radius: 999px; font-size: 12px; font-weight: 800; }
.price-card:not(.featured) .price-badge { color: var(--brand-dark); background: var(--brand-soft); }
.price-card h2 { margin: 0; font-size: 22px; }
.price-card .price { margin: 14px 0 3px; color: var(--navy); font-size: 44px; font-weight: 850; letter-spacing: -.03em; line-height: 1.2; }
.price-card .price small { margin-left: 6px; color: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.price-card > p:not(.price) { margin: 10px 0 18px; color: var(--muted); font-size: 15px; }
.price-card ul { margin: 0 0 22px; padding: 0; list-style: none; }
.price-card li { position: relative; padding: 5px 0 5px 26px; font-size: 15px; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 900; }
.price-card .button { margin-top: auto; }

.usage-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.usage-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.usage-table th, .usage-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.usage-table thead th { color: var(--muted); font-size: 13px; background: var(--canvas); }
.usage-table tbody tr:last-child td { border-bottom: 0; }
.usage-table td.num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.usage-table .ok { color: var(--green); font-weight: 800; }

/* ---------- どのプランが合う？ ---------- */
.fit-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 400px at 0% 20%, rgba(210, 226, 255, .8), transparent 70%),
    radial-gradient(700px 420px at 100% 10%, rgba(220, 232, 255, .75), transparent 70%),
    linear-gradient(180deg, #f7faff 0%, #f0f4fd 100%);
}
.fit-section > .section-inner { position: relative; }
.fit-deco span { position: absolute; pointer-events: none; }
.fit-deco span:nth-child(1) { top: 120px; left: -140px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle at 70% 40%, rgba(170, 205, 255, .55), rgba(210, 228, 255, .2) 70%); }
.fit-deco span:nth-child(2) { top: -140px; right: -100px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle at 30% 60%, rgba(255, 255, 255, .7), rgba(205, 225, 252, .45)); }
.fit-deco span:nth-child(3) { bottom: -120px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 222, 252, .55), transparent 70%); }
.fit-deco span:nth-child(4), .fit-deco span:nth-child(5) { width: 140px; height: 80px; background-image: radial-gradient(circle, rgba(120, 160, 230, .3) 2.5px, transparent 3px); background-size: 20px 20px; }
.fit-deco span:nth-child(4) { top: 36px; left: 5%; }
.fit-deco span:nth-child(5) { bottom: 30px; right: 3%; }
.fit-section .eyebrow { display: flex; flex-direction: column; align-items: center; gap: 12px; letter-spacing: .3em; }
.fit-section .eyebrow::after { content: ""; width: 48px; height: 2px; background: currentColor; opacity: .3; border-radius: 2px; }
.fit-section .section-heading h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 900; color: #0f1b33; }
.fit-table-wrap { padding: 8px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .95); border-radius: 26px; box-shadow: 0 24px 50px rgba(40, 70, 150, .1); backdrop-filter: blur(10px); }
.fit-table { min-width: 760px; overflow: hidden; background: #fff; border-radius: 20px; font-size: 16px; }
.fit-table th, .fit-table td { padding: 16px 24px; border-bottom: 1px solid #edf1f8; text-align: center; vertical-align: middle; }
.fit-table th + th, .fit-table td + td { border-left: 1px solid #edf1f8; }
.fit-table th:first-child, .fit-table td:first-child { padding-left: 56px; text-align: left; }
.fit-table thead th { padding-top: 22px; padding-bottom: 22px; color: #2a3a5c; font-size: 16px; font-weight: 800; background: linear-gradient(180deg, #f3f7fe, #e9f1fc); }
.fit-table tbody tr:nth-child(even) td { background: #f8fafe; }
.fit-table td.num { color: #0f1b33; font-weight: 800; }
.fit-scene { display: inline-flex; align-items: center; gap: 22px; color: #2a3a5c; }
.fit-icon { display: grid; flex: 0 0 auto; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.fit-icon svg { width: 26px; height: 26px; }
.fit-icon.fit-blue { color: #2a6ee0; background: #e6f0fd; }
.fit-icon.fit-violet { color: #7a55d8; background: #ede7fc; }
.fit-icon.fit-teal { color: #1798a0; background: #dcf4f3; }
.fit-pill { display: block; max-width: 190px; margin: 0 auto; padding: 9px 16px; border-radius: 999px; font-size: 16px; font-weight: 800; text-align: center; white-space: nowrap; }
.fit-pill.fit-charge, .fit-pill.fit-std { color: #1a62d6; background: #e3eefd; }
.fit-pill.fit-light { color: #6a45d0; background: #ebe5fb; }
@media (max-width: 720px) {
  .fit-table-wrap { overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  .fit-table, .fit-table tbody, .fit-table tr, .fit-table td { display: block; min-width: 0; }
  .fit-table { background: none; border-radius: 0; font-size: 14px; }
  .fit-table thead { display: none; }
  .fit-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, .95); border-radius: 18px; box-shadow: 0 10px 26px rgba(40, 70, 150, .08); }
  .fit-table tbody tr:nth-child(even) td { background: none; }
  .fit-table td, .fit-table td + td, .fit-table td:first-child { padding: 10px 12px; border: 0; }
  .fit-table td:first-child { grid-column: 1 / -1; padding: 16px 16px 8px; }
  .fit-table td.num { padding-top: 6px; text-align: center; }
  .fit-table td.num::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
  .fit-table td:last-child { grid-column: 1 / -1; padding: 4px 16px 16px; }
  .fit-scene { gap: 12px; font-weight: 700; }
  .fit-icon { width: 40px; height: 40px; }
  .fit-icon svg { width: 20px; height: 20px; }
  .fit-pill { max-width: none; padding: 8px 12px; font-size: 14px; }
}

.pricing-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pricing-summary > div { padding: 26px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
.pricing-summary h3 { margin: 0 0 8px; font-size: 19px; }
.pricing-summary p { margin: 0; color: var(--muted); font-size: 15px; }
.meter-examples { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.meter-examples li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.meter-examples b { font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.dot.ok { background: #10b981; }
.dot.warn { background: #f59e0b; }
.dot.over { background: #ef4444; }

/* ---------- 利用時間の数え方 ---------- */
.uc-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 0% 10%, rgba(214, 228, 255, .8), transparent 70%),
    radial-gradient(800px 420px at 100% 40%, rgba(222, 230, 255, .75), transparent 70%),
    linear-gradient(180deg, #f6f9ff 0%, #eef3fd 100%);
}
.uc-section > .section-inner { position: relative; }
.uc-deco > * { position: absolute; pointer-events: none; }
.uc-deco span { border-radius: 50%; }
.uc-deco span:nth-child(1) { top: 60px; left: -120px; width: 380px; height: 260px; background: radial-gradient(ellipse, rgba(200, 216, 250, .6), transparent 70%); }
.uc-deco span:nth-child(2) { top: 110px; left: 20%; width: 60px; height: 60px; background: radial-gradient(circle at 35% 30%, #fff, rgba(200, 216, 250, .7)); }
.uc-deco-clock { top: 20px; right: 4%; width: 220px; height: 220px; }
.uc-section .section-heading h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 900; color: #0f1b33; }
.uc-section .eyebrow { letter-spacing: .24em; }
.uc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.uc-card {
  position: relative;
  padding: 26px 40px 36px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7));
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 44px rgba(40, 70, 150, .09);
  backdrop-filter: blur(10px);
}
.uc-art { max-width: 380px; margin: 0 auto 18px; }
.uc-art svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 16px rgba(40, 70, 150, .13)); }
.uc-card h3 { margin: 0 0 12px; color: #0f1b33; font-size: 24px; font-weight: 850; }
.uc-card > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.uc-card .meter-examples { gap: 10px; margin-top: 16px; }
.uc-card .meter-examples li { gap: 4px 24px; padding: 8px 20px; background: rgba(255, 255, 255, .95); border-color: #e3e9f4; border-radius: 12px; box-shadow: 0 4px 12px rgba(40, 70, 150, .05); font-size: 15px; }
.uc-card .meter-examples li > span { min-width: 120px; color: var(--muted); }
.uc-card .meter-examples b { color: #0f1b33; }
@media (max-width: 720px) {
  .uc-grid { grid-template-columns: 1fr; }
  .uc-card { padding: 22px 20px 26px; }
  .uc-card h3 { font-size: 20px; }
  .uc-deco-clock { width: 130px; height: 130px; top: 0; right: -20px; }
  .uc-card .meter-examples li { padding: 10px 14px; }
}

.pricing-faq { display: grid; gap: 12px; margin: 0; }
.pricing-faq > div { padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.pricing-faq dt { font-weight: 800; }
.pricing-faq dt::before { content: "Q. "; color: var(--brand); }
.pricing-faq dd { margin: 6px 0 0; color: var(--muted); }
.legal-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- フッター ---------- */
.site-footer { color: rgba(255, 255, 255, .78); background: var(--navy); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--width);
  margin: 0 auto;
  padding: 40px 24px;
  font-size: 13px;
}
.footer-inner strong { color: #fff; font-size: 15px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-links a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-notes { flex-basis: 100%; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 12px; color: rgba(255, 255, 255, .64); list-style: none; }

/* ---------- オフライン版 ---------- */
.offline-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(205, 225, 252, .8), transparent 70%),
    radial-gradient(700px 420px at 0% 30%, rgba(222, 234, 252, .8), transparent 70%),
    linear-gradient(180deg, #f8fbff 0%, #eef3fc 100%);
}
.offline-section > .section-inner { position: relative; }
.offline-deco { position: absolute; inset: 0; pointer-events: none; }
.offline-wave { position: absolute; top: 0; width: 46%; height: 360px; }
.offline-wave-l { left: 0; }
.offline-wave-r { right: 0; }
.offline-dots { position: absolute; width: 220px; height: 120px; background-image: radial-gradient(rgba(91, 140, 220, .35) 1.6px, transparent 1.8px); background-size: 18px 18px; }
.offline-dots-r { top: 150px; right: 6%; }
.offline-dots-l { top: 280px; left: 3%; width: 160px; }
.offline-heading { max-width: 980px; margin-bottom: 44px; }
.offline-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.offline-eyebrow { padding: 5px 14px; color: var(--brand); background: #e2edfc; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.offline-tag { padding: 5px 14px; color: #fff; background: #0f1f47; border-radius: 999px; font-size: 13px; font-weight: 700; }
.offline-heading h2 { font-size: clamp(32px, 5.4vw, 60px); font-weight: 900; color: #0f1b33; line-height: 1.3; }
.offline-em { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.offline-em::after { content: ""; position: absolute; left: -4%; right: 18%; bottom: -2px; z-index: -1; height: 14px; background: linear-gradient(90deg, rgba(29, 140, 248, .28), rgba(29, 140, 248, .04)); border-radius: 50%; filter: blur(2px); }
.offline-heading p:last-child { color: #33405a; word-break: auto-phrase; text-wrap: pretty; }
.offline-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.offline-points li {
  --tone-wash: rgba(61, 139, 255, .12);
  position: relative;
  overflow: hidden;
  padding: 24px 22px 28px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(217, 224, 234, .7);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(20, 41, 92, .07);
}
.offline-points li::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 260px; height: 150px; background: radial-gradient(ellipse at 70% 70%, var(--tone-wash), transparent 70%); transform: rotate(-18deg); pointer-events: none; }
.offline-points li.tone-green { --tone-wash: rgba(15, 170, 110, .12); }
.offline-points li.tone-orange { --tone-wash: rgba(245, 130, 31, .13); }
.offline-points li.tone-violet { --tone-wash: rgba(106, 85, 194, .13); }
.offline-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.offline-icon { flex: none; width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 18px rgba(20, 41, 92, .12), inset 0 1px 0 rgba(255, 255, 255, .8); }
.offline-icon svg { display: block; width: 100%; height: 100%; }
.offline-card-head strong { color: #0f1b33; font-size: 17px; font-weight: 800; line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
.offline-points p { position: relative; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.offline-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.offline-detail > div { padding: 26px; border-radius: var(--radius); }
.offline-detail h3 { margin: 0 0 12px; font-size: 18px; }
.offline-models { color: #e8eefa; background: linear-gradient(135deg, #0f1f47 0%, #14295c 60%, #0b4f9c 100%); }
.offline-models h3 { color: #fff; }
.offline-models dl { display: grid; gap: 10px; margin: 0 0 14px; }
.offline-models dl > div { padding: 12px 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; }
.offline-models dt { color: #9cc7f5; font-size: 12px; font-weight: 700; }
.offline-models dd { margin: 0; color: #fff; font-weight: 700; }
.offline-models dd small { display: block; color: rgba(232, 238, 250, .72); font-size: 12px; font-weight: 400; }
.offline-models p { margin: 0; color: rgba(232, 238, 250, .84); font-size: 14px; }
.offline-notes { background: #fff; border: 1px solid var(--line); }
.offline-notes ul { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 14px; }
.offline-notes li + li { margin-top: 6px; }
.offline-notes strong { color: var(--ink); }
.offline-section .easy-actions { margin-top: 28px; }

/* ---------- オフライン版をメインにした構成 ---------- */
.hero-copy h1 { font-size: clamp(30px, 3.2vw, 42px); word-break: auto-phrase; }
.hero-tag { display: inline-block; margin-left: 8px; padding: 2px 10px; color: #fff; background: #0f1f47; border-radius: 999px; font-size: 11px; letter-spacing: .04em; text-transform: none; vertical-align: 1px; }
.mock-usage.mock-offline { color: #0b7a57; }
.mock-usage.mock-offline i { width: 7px; height: 7px; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.mock-usage.mock-offline i::before { content: none; }
.fx-chip { display: inline-block; margin-left: 8px; padding: 1px 9px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0; vertical-align: 3px; white-space: nowrap; }
.cloud-section { background: linear-gradient(180deg, #f8fbff 0%, #f1f5fd 100%); }
.cloud-section .section-heading { max-width: 900px; }
.cloud-section .section-heading h2 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 900; color: #0f1b33; }
.cloud-section .section-heading p:last-child { word-break: auto-phrase; text-wrap: pretty; }
.cloud-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: -8px 0 24px; padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 41, 92, .06); }
.cloud-contact > div { display: grid; gap: 2px; }
.cloud-contact strong { color: var(--navy); font-size: 17px; }
.cloud-contact > div span { color: var(--muted); font-size: 15px; }
.cloud-contact > div span b { color: var(--brand-dark); }
.cloud-contact .contact-item { min-width: 0; }
.lang-caption { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; color: var(--navy); font-size: 16px; font-weight: 800; }
.lang-caption-tag { padding: 3px 12px; color: #fff; background: #0f1f47; border-radius: 999px; font-size: 12px; font-weight: 700; }
@media (min-width: 961px) { .lang-list-ten { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lang-note a { color: var(--brand); font-weight: 700; }
.cloud-section .section-heading h2 .text-gradient { padding: 0 .04em; }
.edition-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.edition-card { position: relative; display: flex; flex-direction: column; padding: 40px 36px 28px; overflow: hidden; background: #fff; border: 1px solid #e6ebf3; border-radius: 24px; box-shadow: 0 18px 50px rgba(20, 41, 92, .07); }
.edition-card.edition-offline { border: 2px solid transparent; background: linear-gradient(180deg, #eef5ff 0%, #fff 34%) padding-box, linear-gradient(135deg, #2f8ef0, #8fd0fb) border-box; box-shadow: 0 20px 56px rgba(11, 95, 186, .14); }
.edition-card.edition-api { background: linear-gradient(180deg, #f7f4ff 0%, #fff 34%); }
.edition-art { position: absolute; top: 14px; right: 14px; width: 168px; pointer-events: none; }
.edition-art svg { display: block; width: 100%; height: auto; }
.edition-kicker { position: relative; margin: 0 0 6px; color: var(--brand); font-size: 14px; font-weight: 800; }
.edition-api .edition-kicker { color: var(--violet); }
.edition-card h3 { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 22px; color: #0f1b33; font-size: clamp(28px, 2.6vw, 36px); font-weight: 900; line-height: 1.2; }
.edition-card h3 span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; color: #fff; background: linear-gradient(135deg, #1a73e8, #1d9bf0); border-radius: 999px; box-shadow: 0 6px 16px rgba(26, 115, 232, .28); font-size: 15px; font-weight: 800; }
.edition-card h3 span svg { width: 17px; height: 17px; }
.edition-card ul { display: grid; gap: 22px; margin: 0 0 24px; padding: 0; list-style: none; }
.edition-card li { position: relative; padding-left: 58px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.edition-card li::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 40px; background: #eaf3fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a73e8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 20px no-repeat; border-radius: 50%; box-shadow: 0 4px 12px rgba(26, 115, 232, .14); }
.edition-api li::before { background-color: var(--violet-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a55c2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E"); box-shadow: 0 4px 12px rgba(106, 85, 194, .14); }
.edition-card li b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 18px; font-weight: 800; }
.edition-langs { display: flex; align-items: center; gap: 20px; margin: auto 0 0; padding: 16px 22px; background: #f1f7ff; border-radius: 16px; }
.edition-api .edition-langs { background: #f6f3fe; }
.edition-langs-icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; color: var(--brand); background: linear-gradient(135deg, #e3f0fe, #cfe3fb); border-radius: 50%; box-shadow: 0 6px 16px rgba(26, 115, 232, .16); }
.edition-api .edition-langs-icon { color: var(--violet); background: linear-gradient(135deg, #f1edfd, #e0d8fa); box-shadow: 0 6px 16px rgba(106, 85, 194, .16); }
.edition-langs-icon svg { width: 32px; height: 32px; }
.edition-langs p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.edition-langs b { display: block; color: var(--brand); font-size: 28px; font-weight: 900; line-height: 1.3; }
.edition-api .edition-langs b { color: var(--violet); }
.edition-fit { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.edition-fit b { flex: none; color: var(--brand); font-weight: 800; }
.edition-api .edition-fit b, .edition-api .edition-fit-icon { color: var(--violet); }
.edition-fit-icon { flex: none; display: inline-flex; margin-top: 1px; color: var(--brand); }
.edition-fit-icon svg { width: 24px; height: 22px; }
@media (max-width: 1080px) { .edition-art { width: 132px; top: 10px; right: 8px; } .edition-kicker, .edition-card h3 { padding-right: 110px; } }
@media (max-width: 720px) {
  .edition-cards { grid-template-columns: 1fr; }
  .edition-card { padding: 28px 20px 22px; }
  .edition-art { width: 112px; top: 10px; right: 8px; }
  .edition-kicker { padding-right: 96px; }
  .edition-card li { padding-left: 48px; font-size: 14px; }
  .edition-card li::before { width: 34px; height: 34px; background-size: 17px; }
  .edition-card li b { font-size: 16px; }
  .edition-langs { gap: 14px; padding: 14px 16px; }
  .edition-langs-icon { width: 48px; height: 48px; }
  .edition-langs-icon svg { width: 24px; height: 24px; }
  .edition-langs b { font-size: 22px; }
  .edition-fit { flex-wrap: wrap; }
}
.edition-compare { margin-bottom: 8px; }
.edition-compare .compare-row > [role="cell"] a { color: var(--brand); }
.cloud-section .banner-link { margin-bottom: 24px; }
.data-storage h3 { margin: 0 0 12px; color: #fff; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.3; }
.service-disclosure h4 { margin: 0 0 8px; font-size: 17px; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-top: 52px; }
  .purpose-grid, .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-storage { grid-template-columns: 1fr; gap: 28px; }
  .offline-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offline-detail { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .brand-name { display: none; }
  .section { padding: 60px 16px; }
  .hero-inner { padding: 40px 16px 56px; }
  .header-inner { padding: 0 16px; }
  .purpose-grid, .feature-grid, .persona-grid, .steps-row, .download-panel, .pricing-summary { grid-template-columns: 1fr; }
  .purpose-card { min-height: 0; }
  .persona-card { grid-template-columns: minmax(0, 1fr) 84px; gap: 12px; min-height: 0; padding: 24px 20px; }
  .persona-num { grid-column: 1 / -1; font-size: 20px; }
  .persona-art { grid-column: 2; grid-row: 2; align-self: start; width: 84px; height: 84px; }
  .persona-card h3 { font-size: 19px; }
  .steps-row { gap: 34px; }
  .step-card + .step-card::after { top: -22px; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .step-art { height: 160px; margin: 0 0 14px; }
  .persona-card h3 br { display: none; }
  .persona-label span + span::before { width: 20px; }
  .banner-link { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 22px; }
  .banner-icon { width: 56px; height: 56px; border-radius: 14px; }
  .banner-link strong { font-size: 18px; }
  .data-storage { padding: 28px 22px; }
  .offline-points { grid-template-columns: 1fr; }
  .offline-points li { padding: 22px 20px 24px; }
  .offline-icon { width: 56px; height: 56px; }
  .offline-card-head strong { font-size: 17px; }
  .offline-dots { display: none; }
  .offline-detail > div { padding: 22px 20px; }
  .cta { padding: 36px 20px; }
  .contact-item { min-width: 0; width: 100%; }
  .mock-usage, .mock-hint { display: none; }
  .pricing-hero { padding: 52px 16px 40px; }
}

/* ---------- 申し込み・アカウント ---------- */
button.button { font: inherit; font-weight: 800; cursor: pointer; }
.price-card form { margin-top: auto; }
.price-card form .button { width: 100%; }
.account-wrap { max-width: 880px; margin: 0 auto; }
.account-card { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 41, 92, .06); }
.account-card + .account-card { margin-top: 20px; }
.account-card h2 { margin: 0 0 16px; color: var(--navy); font-size: 22px; }
.account-card > p { margin: 0 0 18px; color: var(--muted); }
.account-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 22px; }
.account-stats div { padding: 16px 18px; background: var(--canvas); border-radius: 10px; }
.account-stats dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.account-stats dd { margin: 4px 0 0; color: var(--navy); font-size: 26px; font-weight: 850; letter-spacing: -.02em; }
.account-stats dd small { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.account-actions form { margin: 0; }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--muted); background: var(--canvas); }
.status-pill.ok { color: var(--green); background: var(--green-soft); }
.status-pill.warn { color: #b45309; background: var(--orange-soft); }
.notice { margin: 0 0 20px; padding: 14px 18px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.notice.error { background: #fdecec; color: #b42318; }
.link-button { padding: 0; color: var(--brand-dark); background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.legal-table { width: 100%; border-collapse: collapse; background: #fff; }
.legal-table th, .legal-table td { padding: 14px 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; }
.legal-table th { width: 32%; background: var(--canvas); color: var(--navy); }
@media (max-width: 640px) {
  .account-card { padding: 22px 18px; }
  .legal-table th, .legal-table td { display: block; width: auto; }
}

/* ---------- プライバシーポリシー ---------- */
.policy { line-height: 1.9; }
.policy-lead { margin: 0 0 32px; }
.policy-section { margin: 0 0 28px; }
.policy-section h2 { margin: 0 0 10px; color: var(--navy); font-size: 20px; }
.policy-section p { margin: 0 0 10px; }
.policy-note { margin: 36px 0 0; padding: 16px 18px; color: var(--muted); background: var(--canvas); border-radius: 10px; font-size: 14px; }

/* ---------- 月額プランとチャージの比較 ---------- */
.monthly-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.compare h3 { margin: 0 0 14px; color: var(--navy); font-size: 20px; }
.compare-table th[scope="row"] { color: var(--navy); font-weight: 700; text-align: left; white-space: nowrap; }
.compare-table .compare-hl { background: var(--brand-soft); }
.compare-table thead .compare-hl { color: var(--brand-dark); }
@media (max-width: 860px) {
  .monthly-grid { grid-template-columns: minmax(0, 1fr); }
  .compare-table th[scope="row"] { white-space: normal; }
}

/* ---------- 機能（モダンなカード） ---------- */
.fx-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #f5f8fd 0%, #f9fbfe 55%, #fff 100%); }
.fx-section::before, .fx-section::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.fx-section::before { top: -160px; right: -120px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(11, 95, 186, .08), rgba(11, 95, 186, 0) 70%); }
.fx-section::after { top: 80px; right: 140px; width: 420px; height: 420px; border: 1px solid rgba(11, 95, 186, .06); background: radial-gradient(circle, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%); }
.fx-section .section-inner { position: relative; z-index: 1; }
.fx-eyebrow { display: inline-flex; align-items: center; gap: 14px; letter-spacing: .22em; }
.fx-eyebrow::after { content: ""; width: 42px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.fx-heading { max-width: 860px; margin-bottom: 44px; }
.fx-heading h2 { font-size: clamp(32px, 5.2vw, 56px); font-weight: 900; letter-spacing: -.03em; line-height: 1.25; }
.fx-heading p:last-child { font-size: 18px; line-height: 1.9; }
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.fx-card {
  position: relative; overflow: hidden; padding: 28px 30px 32px;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(217, 224, 234, .7); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(20, 41, 92, .04), 0 18px 44px rgba(20, 41, 92, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fx-card::before { content: ""; position: absolute; top: -70px; right: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, var(--fx-glow), transparent 68%); opacity: .55; }
.fx-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20, 41, 92, .04), 0 26px 56px rgba(20, 41, 92, .11); }
.fx-blue { --fx-glow: #cfe2fb; }
.fx-orange { --fx-glow: #ffd9bd; }
.fx-green { --fx-glow: #c8efdf; }
.fx-violet { --fx-glow: #ddd4fa; }
.fx-icon { position: relative; display: block; width: 132px; height: 97px; margin: -4px 0 18px -10px; }
.fx-card h3 { position: relative; margin: 0 0 12px; color: var(--ink); font-size: 21px; font-weight: 900; letter-spacing: -.01em; line-height: 1.45; }
.fx-card p { position: relative; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.95; }
@media (max-width: 980px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-card { padding: 24px 22px 26px; }
  .fx-heading p:last-child br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-card { transition: none; } .fx-card:hover { transform: none; } }

/* ---------- 月額プラン（ライト／スタンダード） ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 880px; margin: 0 auto 40px; }
.plan-rate { margin: 6px 0 18px !important; color: var(--ink) !important; font-size: 15px; }
.plan-rate b { color: var(--brand-dark); }
.plan-rate .save { display: inline-block; margin-left: 8px; padding: 2px 10px; color: #b45309; background: var(--orange-soft); border-radius: 999px; font-size: 12px; font-weight: 800; }
@media (max-width: 760px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 安心して使える仕組み ---------- */
.pm-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 380px at 0% 0%, rgba(214, 230, 255, .75), transparent 70%),
    radial-gradient(700px 420px at 100% 30%, rgba(214, 232, 255, .7), transparent 70%),
    linear-gradient(180deg, #f8fbff 0%, #f1f5fd 100%);
}
.pm-section > .section-inner { position: relative; }
.pm-deco span { position: absolute; border-radius: 50%; pointer-events: none; }
.pm-deco span:nth-child(1) { top: -260px; left: -180px; width: 560px; height: 560px; background: radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .7), rgba(205, 225, 252, .4)); }
.pm-deco span:nth-child(2) { top: -40px; right: -120px; width: 300px; height: 300px; background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .5), rgba(150, 195, 250, .5)); }
.pm-deco span:nth-child(3) { top: 180px; right: 12%; width: 64px; height: 64px; background: radial-gradient(circle at 35% 30%, #e8f4ff, #8cc6f5); }
.pm-section .eyebrow { letter-spacing: .32em; }
.pm-section .section-heading { max-width: 900px; }
.pm-section .section-heading h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 900; color: #0f1b33; }
.pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pm-card {
  --tone: #1f6fe0;
  --tone-bg: #e4eefc;
  --tone-soft: rgba(31, 111, 224, .1);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 22px;
  align-items: center;
  min-height: 230px;
  padding: 28px 26px 28px 30px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8));
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 44px rgba(31, 72, 140, .09);
  backdrop-filter: blur(10px);
}
.pm-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--tone-soft), transparent 70%);
  pointer-events: none;
}
.pm-blue { --tone: #1f6fe0; --tone-bg: #e2edfd; --tone-soft: rgba(31, 111, 224, .1); }
.pm-orange { --tone: #f07a1a; --tone-bg: #fff0e2; --tone-soft: rgba(255, 140, 70, .14); }
.pm-violet { --tone: #7a45e0; --tone-bg: #efe8fd; --tone-soft: rgba(130, 90, 240, .12); }
.pm-green { --tone: #12a06a; --tone-bg: #e2f6ec; --tone-soft: rgba(40, 190, 130, .13); }
.pm-body { position: relative; align-self: start; }
.pm-num { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; color: var(--tone); font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.pm-num::after { content: ""; width: 34px; height: 1.5px; background: currentColor; opacity: .5; }
.pm-card h3 { margin: 0 0 12px; color: #0f1b33; font-size: 22px; font-weight: 850; line-height: 1.5; }
.pm-body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.pm-art { position: relative; width: 150px; height: 132px; }
.pm-art svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 16px rgba(31, 72, 140, .14)); }
@media (max-width: 1080px) {
  .pm-card { grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; padding: 24px 20px; }
  .pm-art { width: 110px; height: 98px; }
}
@media (max-width: 720px) {
  .pm-grid { grid-template-columns: 1fr; }
  .pm-card { grid-template-columns: minmax(0, 1fr) 96px; min-height: 0; }
  .pm-art { width: 96px; height: 84px; align-self: start; }
  .pm-card h3 { font-size: 19px; }
}

/* ---------- 対応環境 ---------- */
.env-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 380px at 0% 0%, rgba(205, 225, 252, .75), transparent 70%),
    radial-gradient(800px 400px at 100% 40%, rgba(214, 232, 255, .7), transparent 70%),
    linear-gradient(180deg, #f8fbff 0%, #f1f5fd 100%);
}
.env-section > .section-inner { position: relative; }
.env-deco span { position: absolute; border-radius: 50%; pointer-events: none; }
.env-deco span:nth-child(1) { top: -300px; left: -200px; width: 620px; height: 620px; background: radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .6), rgba(190, 218, 252, .45)); }
.env-deco span:nth-child(2) { top: 120px; right: -260px; width: 620px; height: 620px; border: 1px solid rgba(255, 255, 255, .9); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), rgba(205, 225, 252, .35)); }
.env-section .eyebrow { letter-spacing: .32em; }
.env-section .section-heading h2 { font-size: clamp(32px, 5.4vw, 60px); font-weight: 900; color: #0f1b33; }
.env-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.env-card {
  position: relative;
  padding: 36px 38px 0;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 46px rgba(31, 72, 140, .1);
  backdrop-filter: blur(10px);
}
.env-card::before {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 520px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
}
.env-mac::before { background: radial-gradient(circle at 40% 40%, rgba(196, 180, 255, .45), rgba(170, 205, 255, .3) 50%, transparent 72%); }
.env-win::before { background: radial-gradient(circle at 40% 40%, rgba(255, 226, 170, .4), rgba(160, 205, 255, .4) 50%, transparent 72%); }
.env-body { position: relative; z-index: 1; align-self: start; }
.env-head { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; white-space: nowrap; }
.env-os-icon { display: grid; flex: 0 0 auto; place-items: center; width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 12px 24px rgba(40, 80, 180, .25), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.env-os-icon svg { width: 44px; height: 44px; }
.env-mac .env-os-icon { background: linear-gradient(145deg, #4aa8ff 0%, #4f6cf0 55%, #7a4fe0 100%); }
.env-win .env-os-icon { background: linear-gradient(145deg, #3fb2ff 0%, #1a73e8 60%, #0f55cc 100%); }
.env-head h3 { margin: 0; color: #0f1b33; font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.env-head p { margin: 6px 0 0; color: var(--muted); font-size: 17px; }
.env-reqs { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.env-reqs li { display: flex; align-items: center; gap: 18px; }
.env-reqs strong { display: block; color: #0f1b33; font-size: 17px; font-weight: 800; }
.env-reqs li span:not(.env-req-icon) { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.env-reqs .env-caution { display: block; margin-top: 6px; color: #c2410c; font-style: normal; font-weight: 700; }
.env-req-icon { display: grid; flex: 0 0 auto; place-items: center; width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 1px 0 #fff inset; }
.env-req-icon svg { width: 26px; height: 26px; }
.tone-wifi { color: #1a6fe0; background: #e3eefd; }
.tone-mic-violet { color: #7a4fe0; background: #ede6fd; }
.tone-mic-orange { color: #f07a1a; background: #fff0e2; }
.tone-spk { color: #12a06a; background: #e0f6ea; }
/* 注意書きで項目が長くなったため、イラストは常にリストの下に置いて文字と重ならないようにする */
.env-art { position: relative; max-width: 340px; margin: -6px -10px 0 auto; pointer-events: none; }
.env-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.env-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 0;
  padding: 18px 24px;
  color: var(--muted);
  background: linear-gradient(90deg, rgba(225, 236, 252, .8), rgba(236, 232, 252, .8));
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  font-size: 15px;
  text-align: center;
}
.env-note > span { display: grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; color: #fff; background: #8fa8dc; border-radius: 50%; font-family: Georgia, serif; font-size: 15px; font-weight: 700; font-style: italic; }
@media (max-width: 1180px) {
  .env-card { padding: 30px 28px 0; }
  .env-art { max-width: 380px; }
}
@media (max-width: 720px) {
  .env-grid { grid-template-columns: 1fr; }
  .env-card { padding: 26px 20px 0; }
  .env-head { gap: 16px; margin-bottom: 22px; }
  .env-os-icon { width: 64px; height: 64px; border-radius: 18px; }
  .env-os-icon svg { width: 34px; height: 34px; }
  .env-req-icon { width: 48px; height: 48px; }
  .env-note { border-radius: 18px; text-align: left; }
}

/* ---------- アカウントページ（カードデザイン） ---------- */
.account-wrap:has(#signed-in:not([hidden])) { max-width: 1100px; }
.account-wrap .account-card { position: relative; padding: 34px 36px; border-color: #e3ebf7; border-radius: 22px; box-shadow: 0 14px 40px rgba(20, 60, 140, .07); }
.account-wrap .account-card h2 { font-size: 26px; letter-spacing: -.01em; }
.acc-banner { display: flex; align-items: center; gap: 26px; overflow: hidden; background: linear-gradient(120deg, #fff 0%, #f1f6ff 100%); }
.acc-banner-icon { flex: 0 0 auto; display: grid; place-items: center; width: 84px; height: 84px; color: #fff; background: linear-gradient(150deg, #3b8cff 0%, #1a5fe0 100%); border-radius: 22px; box-shadow: 0 12px 24px rgba(26, 95, 224, .3); }
.acc-banner-icon svg { width: 42px; height: 42px; }
.acc-banner-text { flex: 1 1 auto; min-width: 0; }
.account-wrap .acc-banner h2 { margin: 0 0 4px; font-size: 20px; }
.acc-banner-text p { margin: 0; color: var(--muted); }
.acc-banner-link { flex: 0 0 auto; gap: 10px; padding: 12px 18px 12px 22px; color: var(--brand-dark); border-color: #d6e3f7; border-radius: 12px; }
.acc-banner-link svg { width: 20px; height: 20px; }
.acc-banner-link[hidden] { display: none; }
.acc-user { margin: -6px 0 18px; color: var(--muted); }
.account-wrap .account-stats { gap: 18px; margin-bottom: 24px; }
.account-wrap .account-stats div { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; padding: 22px 24px; background: #f4f8fe; border-radius: 16px; }
.acc-stat-icon { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; color: #1a6be0; background: linear-gradient(150deg, #e3eeff 0%, #cfe0fb 100%); border-radius: 50%; }
.acc-stat-icon svg { width: 32px; height: 32px; }
.account-wrap .account-stats dd { margin: 0; font-size: 36px; line-height: 1.2; }
.acc-plan-actions, .acc-charge-actions { display: grid; gap: 16px; }
.acc-plan-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-charge-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
.acc-plan-actions form[hidden], .account-wrap .account-stats div[hidden] { display: none; }
.acc-action { width: 100%; justify-content: flex-start; gap: 14px; min-height: 62px; padding: 12px 18px 12px 20px; color: var(--brand-dark); border: 1.5px solid #4b8fe8; border-radius: 12px; font-weight: 500; text-align: left; }
.acc-action strong { font-weight: 800; }
.acc-action > span:not(.acc-action-icon) { flex: 1 1 auto; }
.acc-action-icon, .acc-action-icon svg { flex: 0 0 auto; width: 26px; height: 26px; }
.acc-chev { flex: 0 0 auto; width: 18px; height: 18px; }
.button.acc-action:not(.secondary) { color: #fff; background: linear-gradient(180deg, #1d5fd6 0%, #0d3fa8 100%); border-color: #0d3fa8; box-shadow: 0 10px 22px rgba(13, 63, 168, .28); }
.button.acc-action:not(.secondary):hover { background: linear-gradient(180deg, #2a6ee6 0%, #134bbd 100%); }
.acc-heading { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.acc-heading-icon { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; color: #1a6be0; background: #e6efff; border-radius: 50%; }
.acc-heading-icon svg { width: 30px; height: 30px; }
.account-wrap .acc-heading h2 { margin: 6px 0 4px; }
.acc-heading p { margin: 0; color: var(--muted); }
.account-wrap .acc-logout { padding: 20px 36px; }
.acc-logout .link-button { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; }
.acc-logout .link-button svg { width: 26px; height: 26px; }
@media (max-width: 720px) {
  .account-wrap .account-card { padding: 24px 18px; border-radius: 18px; }
  .acc-banner { flex-wrap: wrap; gap: 16px; }
  .acc-banner-icon { width: 60px; height: 60px; border-radius: 16px; }
  .acc-banner-icon svg { width: 30px; height: 30px; }
  .acc-banner-text { flex: 1 1 0; }
  .acc-banner-link { width: 100%; }
  .acc-plan-actions, .acc-charge-actions { grid-template-columns: minmax(0, 1fr); }
  .acc-stat-icon { width: 52px; height: 52px; }
  .account-wrap .account-stats dd { font-size: 30px; }
  .account-wrap .acc-logout { padding: 16px 18px; }
}

/* ---------- 導入のしやすさ（専用機器との比較） ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sp-only { display: none; }
.easy-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.easy-points li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.easy-num { color: var(--brand); font-size: 46px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.easy-num small { margin-left: 2px; font-size: 20px; font-weight: 800; }
.easy-points strong { color: var(--navy); font-size: 18px; }
.easy-points li > span:last-child { color: var(--muted); font-size: 15px; }

.compare {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.compare-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.25fr);
  border-top: 1px solid var(--line);
}
.compare-row:first-child { border-top: 0; }
.compare-row > span { padding: 16px 20px; font-size: 15px; line-height: 1.6; }
.compare-row > [role="rowheader"] { color: var(--navy); font-weight: 800; background: var(--canvas); }
.compare-row > [role="cell"]:not(.ours) { color: var(--muted); }
.compare-row > .ours { color: var(--ink); background: var(--brand-soft); }
.compare-row > .ours b { color: var(--brand-dark); }
.compare-head > span { font-size: 14px; font-weight: 800; color: var(--muted); background: var(--canvas); }
.compare-head > span small { display: block; font-size: 12px; font-weight: 650; }
.compare-head > .ours { color: #fff; background: var(--brand); }
.compare-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.easy-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

@media (max-width: 860px) {
  .easy-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sp-only { display: inline; }
  .compare-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare-row > [role="rowheader"] { grid-column: 1 / -1; padding: 10px 14px; font-size: 14px; }
  .compare-row > span { padding: 12px 14px; font-size: 14px; }
  .compare-head > span:first-child { display: none; }
}

/* ---------- 専用機器との比較：結論をひと目で ---------- */
.compare-vs .compare-row > [role="cell"] { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-content: start; }
.compare-vs .compare-row > [role="cell"]::before {
  content: "";
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: #c3cbd8 no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7h8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.compare-vs .compare-row > .ours::before {
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.8 7.4l2.7 2.7 5.7-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.compare-vs .vs-key { display: block; font-size: 16px; font-weight: 800; line-height: 1.45; }
.compare-vs [role="cell"]:not(.ours) .vs-key { color: #6b768a; }
.compare-vs .ours .vs-key { color: var(--brand-dark); font-size: 17px; }
.compare-vs .vs-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.compare-vs .compare-head > .ours { font-size: 15px; }
.vs-badge {
  display: inline-block;
  margin: 0 8px 4px 0;
  padding: 1px 9px;
  color: var(--brand-dark);
  background: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .compare-vs .compare-row > [role="rowheader"] { padding: 8px 14px; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
  .compare-vs .compare-row > [role="cell"] { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 14px; }
  .compare-vs .compare-row > [role="cell"]::before { grid-row: auto; width: 22px; height: 22px; margin: 0 0 6px; background-size: 13px; }
  .compare-vs .vs-key { font-size: 15px; }
  .compare-vs .ours .vs-key { font-size: 15px; }
  .compare-vs .vs-sub { font-size: 12px; }
  .compare-vs .compare-head > span { padding: 12px; font-size: 13px; }
  .vs-badge { display: table; margin: 0 0 6px; }
}