/* 共通スタイル */
:root {
  --bg: #eeeeee;
  --surface: #ffffff;
  --band: #8c8c8c;
  --text: #333333;
  --muted: #666666;
  --accent: #22a1d4;
  --accent-ink: #ffffff;
  --line: #d6d6d6;
  --header-bg: rgba(255, 255, 255, 0.92);
  --hero-veil: rgba(20, 20, 20, 0.68);
  --badge-bg: #2b8fd6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1d1f;
    --surface: #26282b;
    --band: #3a3c40;
    --text: #e6e6e6;
    --muted: #a8a8a8;
    --accent: #45b6e4;
    --line: #3b3e42;
    --header-bg: rgba(28, 29, 31, 0.92);
    --hero-veil: rgba(0, 0, 0, 0.78);
  }
}
:root[data-theme="dark"] {
  --bg: #1c1d1f;
  --surface: #26282b;
  --band: #3a3c40;
  --text: #e6e6e6;
  --muted: #a8a8a8;
  --accent: #45b6e4;
  --line: #3b3e42;
  --header-bg: rgba(28, 29, 31, 0.92);
  --hero-veil: rgba(0, 0, 0, 0.78);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans JP", "Lato", sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
.mi { font-family: "Material Icons"; font-weight: normal; font-style: normal; line-height: 1;
  display: inline-block; text-transform: none; letter-spacing: normal; white-space: nowrap;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; }

/* ヘッダー */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  max-width: 1200px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { font-family: "Abel", sans-serif; font-size: 40px; color: var(--text); text-decoration: none; line-height: 1.2; }
.logo small { font-size: 0.5em; color: var(--accent); margin-left: 2px; }
.nav { display: flex; align-items: center; gap: 22px; font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 13px; letter-spacing: 0.08em; }
.nav a { color: var(--text); text-decoration: none; }
.nav a:hover { color: var(--accent); }
.nav .btn-contact { background: var(--badge-bg); color: #fff; padding: 6px 10px; border-radius: 2px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 28px; cursor: pointer; padding: 4px; }

/* ヒーロー */
.hero {
  position: relative; color: #fff; text-align: center;
  background: url("screens/ja-list.webp") center / cover no-repeat;
  padding: 48px 16px 44px;
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-veil); }
.hero > * { position: relative; }
.hero .catch { font-family: "Lato", sans-serif; font-weight: 300; font-size: clamp(32px, 5vw, 48px); margin: 0; }
.hero .hero-icon { width: min(180px, 40vw); margin: 16px auto 8px; }
.hero .name { font-family: "Abel", sans-serif; font-size: clamp(44px, 7vw, 64px); margin: 0; line-height: 1.1; }
.hero .lead { font-size: clamp(18px, 3vw, 28px); font-weight: 300; margin: 8px 0 24px; color: #eee; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 4px; text-decoration: none; font-weight: 500; font-size: 15px;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.8); }
.btn.outline { background: transparent; color: var(--accent); }
.btn:hover { filter: brightness(1.08); }

/* セクション */
section { padding: 72px 16px; }
section.alt { background: var(--surface); }
.wrap { max-width: 1040px; margin: 0 auto; }
.sec-sub { text-align: center; font-size: 12px; color: var(--muted); margin: 0; letter-spacing: 0.1em; }
.sec-title { text-align: center; font-family: "Abel", sans-serif; font-weight: 400; color: var(--accent);
  font-size: clamp(34px, 5vw, 48px); margin: 0 0 32px; line-height: 1.2; }
.center { text-align: center; }
.caption { display: inline-block; font-size: 20px; padding: 0 6px 4px; border-bottom: 3px solid var(--accent); margin: 20px 0 12px; }
.big { font-size: 20px; }
.note { font-size: 13px; color: var(--muted); }
.down { font-size: 48px; color: var(--accent); margin: 28px auto; display: block; text-align: center; }
.inline-name { font-family: "Abel", sans-serif; font-size: 44px; vertical-align: -4px; }

.shot { border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); margin: 0 auto; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dd { background: #9a9a9a; padding: 24px; border-radius: 4px; }

/* 流れの帯 */
.band { background: var(--band); color: #fff; padding: 40px 16px; }
.band .steps { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.band .step { text-align: center; font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 15px; flex: 1; }
.band .step .mi { font-size: 64px; }
.band .step img { width: 72px; margin: 0 auto; }
.band .dots { flex: 0 0 48px; border-top: 4px dotted rgba(255,255,255,0.9); }

/* アイコンのグリッド */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
.item { text-align: center; }
.item .mi { font-size: 44px; color: var(--text); }
.item h3 { font-size: 18px; font-weight: 500; margin: 8px 0 8px; }
.item p, .item ul { font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 14px; color: var(--muted); margin: 0; line-height: 1.7; }
.item ul { list-style: none; padding: 0; }
.item.feature { background: var(--surface); padding: 22px 16px; border-radius: 6px; text-align: left; }
.item.feature .mi { color: var(--accent); font-size: 32px; }
.item.feature h3 { font-size: 16px; }
.tag { display: inline-block; font-size: 11px; border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; padding: 0 5px; margin-left: 4px; vertical-align: 2px; line-height: 1.6; }

.exports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.exports figure { margin: 0; text-align: center; }
.exports figcaption { font-weight: 500; margin-top: 10px; }
.exports figcaption .mi { display: block; font-size: 36px; margin: 6px auto; }

/* 物語 */
.story { text-align: center; max-width: 760px; margin: 0 auto; font-size: 14px; }
.story .story-icon { width: 96px; margin: 0 auto 8px; }
.story .tagline { font-family: "Abel", sans-serif; font-size: 24px; margin: 0 0 20px; }

/* 表 */
.spec { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; }
.spec th, .spec td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.spec th { width: 28%; font-weight: 500; }

/* 料金 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 28px 20px; text-align: center; position: relative; }
.plan.recommended { border: 2px solid var(--accent); }
.plan .ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 10px; white-space: nowrap; }
.plan h3 { margin: 0; font-weight: 500; font-size: 16px; }
.plan .price { font-family: "Lato", sans-serif; font-size: 34px; margin: 8px 0 0; }
.plan .price small { font-size: 14px; color: var(--muted); }
.group { margin-top: 28px; background: var(--surface); border-radius: 6px; padding: 24px; }
.group .rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 16px; text-align: center; }
.group .rows div { border: 1px solid var(--line); border-radius: 4px; padding: 10px; }
.group .rows b { display: block; font-family: "Lato", sans-serif; font-size: 22px; font-weight: 400; }

/* FAQ */
details { background: var(--surface); border-radius: 4px; margin-bottom: 10px; padding: 14px 18px; }
summary { cursor: pointer; font-weight: 500; }
details p { margin: 10px 0 0; font-size: 14px; }

/* お問い合わせ・フッター */
.contact { text-align: center; }
footer { background: #2b2b2b; color: #ccc; padding: 40px 16px 24px; font-size: 13px; }
footer .cols { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
footer a { color: #ccc; text-decoration: none; }
footer a:hover { color: #fff; }
footer ul { list-style: none; padding: 0; margin: 0; line-height: 2; }
footer .logo { color: #fff; font-size: 32px; }
footer .copy { text-align: center; margin-top: 28px; font-family: "Lato", sans-serif; letter-spacing: 0.06em; font-size: 12px; color: #999; }
/* 商標の表記(© の行の上) */
footer .tm { text-align: center; margin: 28px auto 0; max-width: 760px; font-size: 11px; line-height: 1.7; color: #999; }
footer .tm + .copy { margin-top: 8px; }

/* スマホ幅 */
@media (max-width: 820px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 16px; width: 100%; text-align: center; }
  .nav .btn-contact { border-radius: 0; }
  .nav-toggle { display: block; }
  .logo { font-size: 32px; }
  .site-header .inner { padding: 6px 16px; }
  .pair, .grid3, .exports, .plans, .group .rows { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .band .steps { flex-direction: column; }
  .band .dots { flex: 0 0 24px; border-top: 0; border-left: 4px dotted rgba(255,255,255,0.9); width: 0; }
  footer .cols { grid-template-columns: 1fr; }
  section { padding: 56px 16px; }
  .spec th { width: 36%; }
}
@media (max-width: 420px) { .grid4 { grid-template-columns: 1fr; } }

/* FAQ ページ */
.page-head { text-align: center; padding: 56px 16px 24px; }
.page-head .sec-title { margin-bottom: 8px; }
.faq-tools { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.faq-search { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px 12px 44px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--text); }
.faq-search-wrap { position: relative; }
.faq-search-wrap .mi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.faq-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 0; padding: 0; list-style: none; }
.faq-cats a { display: inline-block; padding: 4px 12px; border: 1px solid var(--accent); border-radius: 16px; font-size: 13px; text-decoration: none; }
.faq-cats a:hover { background: var(--accent); color: #fff; }
.faq-body { max-width: 880px; margin: 0 auto; padding: 24px 16px 72px; }
.faq-body h2 { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 20px; margin: 40px 0 12px;
  padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.faq-body h2 .mi { color: var(--accent); }
.faq-body details { padding: 0; }
.faq-body summary { padding: 14px 18px; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq-body summary::-webkit-details-marker { display: none; }
.faq-body summary::before { content: "Q"; font-family: "Lato", sans-serif; font-weight: 700; color: var(--accent); flex: 0 0 auto; }
.faq-body details[open] summary { border-bottom: 1px solid var(--line); }
.faq-body .a { padding: 4px 18px 16px 18px; font-size: 14px; }
.faq-body .a p, .faq-body .a li { margin: 10px 0 0; }
.faq-body .a ol, .faq-body .a ul { padding-left: 1.4em; margin: 8px 0 0; }
.faq-body .a .point { background: var(--bg); border-left: 3px solid var(--accent); padding: 8px 12px; margin-top: 12px; border-radius: 0 4px 4px 0; }
.faq-body .a table { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: 13px; }
.faq-body .a th, .faq-body .a td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.faq-body .a th { background: var(--bg); font-weight: 500; }
.faq-body .permalink { margin-left: auto; font-size: 12px; color: var(--muted); text-decoration: none; opacity: 0; }
.faq-body summary:hover .permalink { opacity: 1; }
.faq-empty { display: none; text-align: center; color: var(--muted); }
.faq-contact { text-align: center; background: var(--surface); border-radius: 6px; padding: 28px 16px; margin-top: 48px; }
@media (max-width: 820px) { .faq-body .a { overflow-x: auto; } }

/* Windows / mac の強調 */
.os-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: -8px 0 22px; }
.os-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border: 1px solid rgba(255,255,255,0.75);
  border-radius: 18px; font-family: "Lato", sans-serif; font-size: 15px; letter-spacing: 0.04em; color: #fff; background: rgba(0,0,0,0.25); }
.os-badge .mi { font-size: 20px; }
.cross { background: var(--accent); color: #fff; padding: 36px 16px; text-align: center; }
.cross h2 { margin: 0; font-weight: 500; font-size: clamp(20px, 3.4vw, 28px); }
.cross p { margin: 8px auto 0; max-width: 760px; font-size: 14px; opacity: 0.95; }
.cross .os-row { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 10px; }
.cross .os-row .mi { font-size: 52px; }
.cross .os-row .plus { font-family: "Lato", sans-serif; font-size: 28px; opacity: 0.8; }
.cross ul { list-style: none; padding: 0; margin: 16px auto 0; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13px; }
.cross li::before { content: "✓ "; }

/* ShotPlayer */
.player-lead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
.player-mock { background: #111; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden; }
.player-mock .bar { display: flex; gap: 6px; padding: 8px 10px; background: #2a2a2a; }
.player-mock .bar i { width: 10px; height: 10px; border-radius: 50%; background: #666; display: block; }
.player-mock .tc { position: absolute; left: 10px; bottom: 8px; font-family: "Lato", monospace; color: #fff; font-size: 13px;
  background: rgba(0,0,0,0.55); padding: 1px 6px; border-radius: 3px; }
.player-mock .ctrl { display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: #ddd; background: #1d1d1d; font-size: 12px; }
.player-mock .ctrl .mi { font-size: 22px; }
.player-mock .seek { flex: 1; height: 4px; background: #444; border-radius: 2px; position: relative; }
.player-mock .seek::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: var(--accent); border-radius: 2px; }
.player-points { list-style: none; padding: 0; margin: 0; }
.player-points li { display: flex; gap: 12px; margin-bottom: 16px; }
.player-points .mi { color: var(--accent); font-size: 28px; flex: 0 0 auto; }
.player-points b { display: block; font-weight: 500; }
.player-points span.d { font-size: 14px; color: var(--muted); }
.keys { margin-top: 36px; }
.keys table { width: 100%; border-collapse: collapse; background: var(--bg); font-size: 14px; }
.keys th, .keys td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.keys th { font-weight: 500; width: 34%; }
kbd { font-family: "Lato", monospace; font-size: 12px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; background: var(--surface); }
@media (max-width: 820px) { .player-lead { grid-template-columns: 1fr; } }

/* 重要なお知らせ(FAQ の先頭) */
.notice { display: flex; gap: 14px; align-items: flex-start; max-width: 880px; margin: 0 auto 24px; padding: 16px 20px;
  background: #fff4e5; color: #5a3600; border: 2px solid #f0a020; border-radius: 6px; font-size: 15px; line-height: 1.7; }
.notice .mi { font-size: 30px; color: #e08a00; flex: 0 0 auto; }
.notice b { display: block; font-size: 16px; }
.notice p { margin: 2px 0 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notice { background: #3a2a10; color: #ffe2b0; border-color: #c98a20; }
}
:root[data-theme="dark"] .notice { background: #3a2a10; color: #ffe2b0; border-color: #c98a20; }

/* 料金の枠: ボタンを中央・塗りのボタンにそろえる */
.group { text-align: center; }
.group h3, .group > p { text-align: center; }
.group .btn { margin: 4px 6px; }

.hero .lead2 { display: block; font-size: 0.72em; margin-top: 4px; letter-spacing: 0.08em; }

.sp-icon { width: 112px; height: auto; margin: 0 auto 18px; }

/* ShotPlayer: 再生画面を上・中央、機能は 2 列 */
.player-lead { grid-template-columns: 1fr; gap: 40px; }
.player-lead .player-mock { width: min(720px, 100%); margin: 0 auto; }
.player-points { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px; }
@media (max-width: 820px) { .player-points { grid-template-columns: 1fr; } }

/* Production アドオン: 詳しいカード 2 × 2 */
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.addon { background: var(--surface); border-radius: 6px; padding: 22px 22px 18px; }
.addon h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 18px; font-weight: 500; }
.addon h3 .mi { color: var(--accent); font-size: 30px; }
.addon .lead { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.addon h4 { margin: 14px 0 4px; font-size: 13px; font-weight: 500; color: var(--accent); letter-spacing: 0.04em; }
.addon ul { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.75; }
.addon li { margin: 2px 0; }
.addon .req { margin-top: 14px; padding: 8px 12px; background: var(--bg); border-radius: 4px; font-size: 13px; color: var(--muted); }
.addon code { font-size: 12px; }
@media (max-width: 820px) { .addons { grid-template-columns: 1fr; } }

/* サブスクリプションの強調 */
.sub-badge { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%;
  margin: -8px auto 18px; padding: 8px 20px; border-radius: 24px; background: var(--accent); color: #fff; font-weight: 500; font-size: 16px; text-align: center; }
.sub-badge .mi { font-size: 22px; }

/* 料金のカード = プランごとの購入リンク */
a.plan-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.plan-link:hover { border-color: var(--accent); transform: translateY(-2px); }
a.plan-link .plan-buy { display: inline-flex; margin-top: 4px; color: var(--accent); }

/* 料金のカード */
.pc-icons { display: flex; justify-content: center; gap: 18px; margin: 4px 0 18px; }
.pc-icons img { width: 72px; height: 72px; }
.pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.pcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px 18px 16px; text-align: left; }
.pcard.primary { border: 2px solid var(--accent); padding: 17px 17px 15px; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-name { font-size: 19px; font-weight: 700; }
.pc-badge { font-size: 12px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 6px; white-space: nowrap; }
.pc-badge.pc-empty { visibility: hidden; }
.pc-kind { font-size: 13px; margin-top: 4px; }
.pcard.primary .pc-kind { color: var(--accent); }
.pc-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pcard hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; width: 100%; }
.pc-price { display: flex; align-items: baseline; gap: 6px; }
.pc-price b { font-family: "Lato", sans-serif; font-size: 32px; font-weight: 700; line-height: 1.1; }
.pc-price span { font-size: 13px; color: var(--muted); }
.pc-note { font-size: 13px; color: var(--muted); margin: 8px 0 16px; flex: 1; }
.pcard .btn { justify-content: center; width: 100%; }
.pc-terms { max-width: 900px; margin: 20px auto 0; font-size: 12px; color: var(--muted); line-height: 1.8; }
@media (max-width: 980px) { .pcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pcards { grid-template-columns: 1fr; } }

.pcards.pcards3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 980px) { .pcards.pcards3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pcards.pcards3 { grid-template-columns: 1fr; } }
.pcards.pcards1 { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }

/* 料金の枠の説明文は本文の大きさで・行の長さをそろえて折り返す */
.group > p.note { font-size: 15px; line-height: 1.8; text-wrap: balance; }
#pricing > .wrap > p.center.note { font-size: 15px; text-wrap: balance; }

/* Windows / Mac の帯の文字を大きく */
.cross p { font-size: 17px; }
.cross ul { font-size: 15px; gap: 10px 24px; margin-top: 20px; }
.cross p { max-width: 920px; text-wrap: balance; }
.cross ul { max-width: 980px; }

/* xlsx の書き出しモード 3 枚 */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mode { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; text-align: center; }
.mode .mi { font-size: 36px; color: var(--accent); }
.mode h4 { margin: 6px 0 2px; font-size: 19px; font-weight: 700; }
.mode .mode-tag { display: inline-block; margin: 2px 0 10px; font-size: 12px; color: var(--accent); border: 1px solid var(--accent); border-radius: 12px; padding: 0 10px; }
.mode p { margin: 0; font-size: 14px; color: var(--muted); }
.mode p.mode-tag { color: var(--accent); }
@media (max-width: 820px) { .modes { grid-template-columns: 1fr; } }

/* 下線付きの見出し(.caption)を大きく太く */
.caption { font-size: clamp(22px, 3.2vw, 28px); font-weight: 700; padding: 0 8px 6px; border-bottom-width: 4px; margin: 28px 0 14px; }
h2.caption { line-height: 1.5; }

/* 見出しの太さを 700 にそろえる(Noto Sans JP は可変フォント 100..900・英字の大見出し .sec-title = Abel は 400 のまま) */
h2:not(.sec-title), h3, h4,
.item h3, .plan h3, .faq-body h2, .cross h2, .addon h3, .addon h4,
.exports figcaption, .player-points b, summary { font-weight: 700; }

/* 見出しの構造に合わせた見た目 */
.sec-title .sec-sub { display: block; font-family: "Noto Sans JP", "Lato", sans-serif; font-size: 12px; font-weight: 400;
  color: var(--muted); letter-spacing: 0.1em; line-height: 1.6; margin-bottom: 2px; }
.hero-h1 { margin: 0; font-weight: 400; }
.hero-h1 .name { display: block; font-weight: 700; }
.hero-h1 .lead { display: block; }
.h-with-icon { display: flex; align-items: center; gap: 8px; }
.h-with-icon > h2, .h-with-icon > h3 { margin: 0; border: 0; padding: 0; }
.faq-body .h-with-icon { margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.faq-body .h-with-icon > h2 { font-size: 20px; }
.faq-body .h-with-icon .mi, .addon .h-with-icon .mi { color: var(--accent); }
.addon .h-with-icon { margin: 0 0 4px; }
.addon .h-with-icon .mi { font-size: 30px; }
.addon .h-with-icon > h3 { font-size: 18px; }
summary h3.q { display: inline; margin: 0; font-size: inherit; font-weight: 700; line-height: inherit; }
.hero .lead-plus { display: block; font-size: 1.1em; line-height: 1; margin: 6px 0 2px; color: var(--accent); font-weight: 700; }
.hero .lead2 { margin-top: 0; }

/* ヘッダーのメニュー */
.nav { font-size: 15px; font-weight: 700; gap: 24px; }
@media (max-width: 1140px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 16px; width: 100%; text-align: center; }
  .nav .btn-contact { border-radius: 0; }
  .nav-toggle { display: block; }
}

/* トップの FAQ 欄: 枠の余白ごと押せるように(押せる高さ 44px 以上) */
#faq details { padding: 0; }
#faq details > summary { padding: 14px 18px; }
#faq details > p { margin: 0; padding: 0 18px 14px; }
.hero .lead, .hero .lead2, .center, .big { text-wrap: balance; }
.hero .lead { word-break: auto-phrase; }
@media (max-width: 560px) {
  .keys table { font-size: 13px; }
  .keys th, .keys td { padding: 6px 6px; }
  .keys th:first-child, .keys td:first-child { width: 38%; }
  .keys th { width: auto; }
  kbd { font-size: 11px; padding: 0 3px; }
}
.addons > .addon, .pcards > .pcard, .modes > .mode, .grid3 > *, .grid4 > * { min-width: 0; }
.addon, .pcard, .mode, .item { overflow-wrap: anywhere; }

/* 画面写真 */
.screen-fig { margin: 0 auto; max-width: 1100px; }
.screen-fig img { width: 100%; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.screen-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }
.player-shot { max-width: 1040px; }

/* キャッチの 2 行目 = Windows / macOS の目印と同じ札の形 */
.hero .lead2 { display: inline-block; margin-top: 4px; padding: 6px 22px; border: 1px solid rgba(255,255,255,0.75); border-radius: 26px;
  background: rgba(0,0,0,0.25); color: #fff; font-size: 0.72em; font-weight: 500; letter-spacing: 0.04em; line-height: 1.5; }
.hero .lead-plus { margin: 8px 0 6px; }
@media (max-width: 560px) { .hero .lead2 { font-size: 15px; padding: 5px 16px; } }
/* 札の角 */
.os-badge, .hero .lead2 { border-radius: 6px; }
/* 先頭: 札と Windows / macOS・ボタンの間 */
.hero .os-badges { margin: 34px 0 22px; }
@media (max-width: 560px) { .hero .os-badges { margin: 26px 0 18px; } }

/* 「たくさんの動画素材」= Finder の画面を 2 枚並べる */
.folders { display: flex; justify-content: center; gap: 36px; }
.folders img { width: min(320px, 44%); height: auto; }

/* 「shotlist なら作り方は簡単」= 点線ではさんだ 2 行 + 画面の端まで広がる灰色の帯 + ドラッグ＆ドロップの絵 */
.dd-lead { display: inline-block; margin: 4px auto 0; padding: 8px 48px; border-top: 2px dotted var(--accent); border-bottom: 2px dotted var(--accent);
  font-size: clamp(16px, 2.2vw, 22px); line-height: 2; letter-spacing: 0.08em; text-wrap: balance; }
.dd { margin: 16px calc(50% - 50vw) 0; padding: clamp(24px, 4vw, 56px) 16px; background: #b3b3b3; border-radius: 0; }
.dd img { max-width: 1240px; width: 100%; margin: 0 auto; }
@media (max-width: 560px) { .dd-lead { padding: 8px 12px; letter-spacing: 0.02em; } }
html, body { overflow-x: clip; }   /* 画面の端まで広がる帯(.dd)がスクロールバーの幅だけはみ出すのを切る */
.dd img { max-width: 1100px; }
/* 書き出しモードの印 */
.mode p.mode-tag { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }
.mode p.mode-tag { font-size: 14px; padding: 2px 14px; line-height: 1.7; }
.mode h4 { margin-bottom: 12px; }
.mode p.mode-tag + p.mode-tag { margin-top: 6px; }
/* 書き出しモードのカード: 説明文はカードの下端にそろえる */
.mode { display: flex; flex-direction: column; align-items: center; }
.mode > p:not(.mode-tag) { margin-top: auto; padding-top: 14px; }
/* 印の箱: 3 枚で同じ高さ(印 2 つ分)・印は縦横とも中央 */
.mode-tags { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; }
.mode-tags p.mode-tag { margin: 0; }
.mode-tags { height: 72px; min-height: 0; }
/* 書き出しは 4 種類(xlsx の 3 モード + 画像のみ) */
.modes { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .modes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }
.mode { padding: 20px 16px; }
.mode p.mode-tag { white-space: nowrap; padding: 2px 10px; }
/* 「書き出しは 4 種類」= 流れの中の小見出し(.caption)と同じ大きさ */
.modes-title { margin: 48px 0 20px; font-size: clamp(22px, 3.2vw, 28px); font-weight: 700; }
/* 節の中の小見出し(動作環境・料金の枠・アドオンの料金表) */
#download > .wrap > h3, #pricing > .wrap > h3, .group > h3 { font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; }
.contact-addr { margin: 14px 0 0; font-family: "Lato", sans-serif; font-size: 16px; letter-spacing: 0.04em; color: var(--muted); user-select: all; }
/* メニューの太さ: 日本語のページは英字も Noto Sans JP(可変フォント)で表示 */
.nav { font-weight: 600; }
html[lang="ja"] .nav { font-family: "Noto Sans JP", sans-serif; }
.nav { font-weight: 500; }
/* Windows / Mac の帯の項目 = 白地に水色の文字のラベル */
.cross ul.cross-labels { gap: 10px 12px; margin-top: 22px; }
.cross ul.cross-labels li { background: #fff; color: var(--accent); border-radius: 6px; padding: 6px 16px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.cross ul.cross-labels li::before { content: none; }

/* Review BOX & Review プレイヤー: 小見出し(.caption)ごとに 画面写真 → 機能 2 列 */
#review .review-head { margin-top: 48px; }
#review .review-head + .player-lead { margin-top: 12px; }

/* Production アドオンの帯: ライト / ダークのどちらでも同じ濃い紺(トークンは帯の中だけで使う) */
:root { --pro-bg-top: #101822; --pro-bg-bottom: #07090c; --pro-text: #e8eef4; --pro-muted: #a9b8c8; --pro-card: rgba(255,255,255,0.05); --pro-line: rgba(255,255,255,0.12); }
.pro-band { color: var(--pro-text); padding: 88px 0 96px;
  background: radial-gradient(ellipse 60% 70% at 12% 0%, rgba(34,161,212,0.35), transparent 70%),
              linear-gradient(180deg, var(--pro-bg-top), var(--pro-bg-bottom)); }
.pro-band .sec-title { color: #45b6e4; }
.pro-band .sec-sub { color: var(--pro-muted); }
.pro-lead { max-width: 900px; margin: -8px auto 22px; text-align: center; font-size: 17px; line-height: 1.9; color: var(--pro-text);
  text-wrap: balance; word-break: auto-phrase; }
.pro-chips { list-style: none; padding: 0; margin: 0 auto 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.pro-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid rgba(69,182,228,0.6); border-radius: 6px;
  color: #bfe6f7; font-size: 15px; background: rgba(34,161,212,0.12); }
.pro-chips .mi { font-size: 18px; color: #45b6e4; }
.pro-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pro-card { position: relative; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column;
  background: var(--pro-card); border: 1px solid var(--pro-line); border-radius: 8px; padding: 30px 24px 24px; min-height: 360px; }
.pro-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 8px 8px 0 0; background: #22a1d4; }
.pro-card > .mi { font-size: 44px; color: #45b6e4; }
.pro-card h3 { margin: 14px 0 8px; font-size: 19px; font-weight: 700; color: #fff; }
.pro-card p { margin: 0 0 12px; font-size: 14px; color: var(--pro-muted); line-height: 1.8; }
.pro-card ul { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.7; }
.pro-card li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.pro-card li::before { content: "✓"; position: absolute; left: 0; color: #45b6e4; font-weight: 700; }
.pro-card .pro-req { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--pro-line); font-size: 13px; color: var(--pro-muted); }
.pro-card kbd { background: rgba(255,255,255,0.08); border-color: var(--pro-line); color: var(--pro-text); }
@media (max-width: 1080px) { .pro-cards { grid-template-columns: 1fr 1fr; } .pro-card { min-height: 0; } }
@media (max-width: 560px) { .pro-cards { grid-template-columns: 1fr; } .pro-band { padding: 64px 0 72px; } .pro-lead { font-size: 15px; } }

/* Production のページ: 見出しから「Features」までを同じ紺の帯に */
.pro-band.pro-page { padding: 0 0 88px; }
.pro-page .page-head { padding-top: 72px; }
.pro-page .page-head p { color: var(--pro-text); font-size: 17px; line-height: 1.9; }
.pro-page .page-head .pro-chips { margin-bottom: 8px; }
.pro-page section { background: transparent; }
.pro-page .addon { position: relative; background: var(--pro-card); border: 1px solid var(--pro-line); border-radius: 8px; padding: 30px 28px 26px; color: var(--pro-text); }
.pro-page .addon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 8px 8px 0 0; background: #22a1d4; }
.pro-page .addon .h-with-icon { gap: 12px; margin-bottom: 8px; }
.pro-page .addon .h-with-icon .mi { font-size: 44px; color: #45b6e4; }
.pro-page .addon .h-with-icon > h3 { font-size: 21px; font-weight: 700; color: #fff; }
.pro-page .addon .lead { font-size: 15px; color: var(--pro-muted); }
.pro-page .addon h4 { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: #45b6e4; }
.pro-page .addon ul { list-style: none; padding: 0; }
.pro-page .addon li { position: relative; padding-left: 22px; margin: 4px 0; }
.pro-page .addon li::before { content: "✓"; position: absolute; left: 0; color: #45b6e4; font-weight: 700; }
.pro-page .addon b { color: #fff; }
.pro-page .addon .req { margin-top: 18px; background: rgba(255,255,255,0.06); border-left: 3px solid rgba(69,182,228,0.6); color: var(--pro-muted); }
.pro-page .addon .req b { color: var(--pro-text); }
.pro-page .addon code, .pro-page .addon kbd { background: rgba(255,255,255,0.08); border-color: var(--pro-line); color: var(--pro-text); }

/* フッター = サイトマップ */
footer .foot-brand { max-width: 1040px; margin: 0 auto 28px; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
footer .foot-brand p { margin: 0 0 6px; }
footer .sitemap { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 0.9fr; gap: 24px 32px; }
footer .foot-h { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #444; font-size: 14px; font-weight: 700; color: #fff; }
footer .foot-h a { color: #fff; }
footer .sitemap ul { line-height: 1.6; }
footer .sitemap li { padding: 3px 0; }
@media (max-width: 820px) { footer .sitemap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer .sitemap { grid-template-columns: 1fr; } footer .sitemap li { padding: 7px 0; } }
footer .sitemap li.sub { padding-left: 14px; position: relative; }
footer .sitemap li.sub::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; border-top: 1px solid #777; }
footer .foot-brand { align-items: center; gap: 20px; }
footer .foot-brand .logo { line-height: 1; padding-right: 20px; border-right: 1px solid #555; }
footer .foot-brand p { margin: 0; line-height: 1.7; }

/* ライト / ダークの切り替えボタン */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
.site-header .inner { justify-content: flex-start; }
.site-header .nav { order: 2; margin-left: auto; }
.theme-toggle { order: 3; flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; padding: 0; background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--text);
  font-size: 22px; cursor: pointer; }
.theme-toggle:hover { border-color: var(--text); }
.nav-toggle { order: 4; }
@media (max-width: 1140px) { .theme-toggle { margin-left: auto; } .nav-toggle { margin-left: 4px; } }
/* 切り替えボタンの大きさ */
.theme-toggle { width: 34px; height: 34px; font-size: 19px; border: 0; border-radius: 6px; margin-left: 8px; }
.theme-toggle:hover { background: var(--line); }
@media (max-width: 1140px) { .theme-toggle { width: 40px; height: 40px; font-size: 20px; } }
/* Windows / Mac の帯の項目: 1 行に 1 つずつ・中央・間を空ける */
.cross ul.cross-labels { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cross ul.cross-labels li { max-width: 100%; text-align: center; }

/* 絞り込み(Filter)の節: 小見出し → 説明 → 画面写真(横長の帯)を 3 つ・最後に機能の 2 列 */
.filter-step { max-width: 1100px; margin: 48px auto 0; }
.filter-step h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.filter-step p { margin: 0 0 16px; font-size: 15px; line-height: 1.85; color: var(--muted); }
.filter-shot { max-width: 1100px; }
.filter-points { max-width: 1100px; margin: 56px auto 0; }
/* 条件の ON / OFF の見本(中央のボタン) */
.pill-demo { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin-top: 24px; }
.pill-demo figure { margin: 0; text-align: center; }
.pill-demo img { width: 260px; max-width: 100%; height: auto; border-radius: 8px; }
.pill-demo figcaption { margin-top: 6px; font-size: 14px; color: var(--muted); }

/* 特定商取引法に基づく表示(表)・使用許諾契約書(本文) */
.legal { width: 100%; max-width: 960px; margin: 0 auto; border-collapse: collapse; background: var(--surface); font-size: 15px; line-height: 1.8; }
.legal th, .legal td { border: 1px solid var(--line); padding: 14px 18px; text-align: left; vertical-align: top; }
.legal th { width: 30%; font-weight: 500; background: var(--bg); }
.legal .note { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.legal .price-mini { width: 100%; margin: 8px 0; border-collapse: collapse; font-size: 14px; }
.legal .price-mini th, .legal .price-mini td { border: 0; border-top: 1px dashed var(--line); padding: 6px 0; background: none; width: auto; }
.legal .price-mini th { padding-right: 16px; white-space: nowrap; }
.eula { max-width: 860px; margin: 0 auto; font-size: 15px; line-height: 1.9; }
.eula h2 { margin: 36px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); font-size: 19px; font-weight: 700; }
.eula p { margin: 0 0 10px; }
.eula ul { margin: 0 0 12px; padding-left: 1.4em; }
.eula .eula-meta { color: var(--muted); font-size: 14px; }
@media (max-width: 560px) { .legal th, .legal td { display: block; width: auto; border-top: 0; } .legal tr { display: block; border-top: 1px solid var(--line); } .legal .price-mini th { white-space: normal; } }

/* ショートカットの表 = 開閉式(閉じた状態が既定・押すと開く) */
details.keys { margin-top: 36px; text-align: center; }
details.keys > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 22px; border: 1px solid var(--accent);
  border-radius: 4px; color: var(--accent); font-weight: 500; cursor: pointer; list-style: none; user-select: none; }
details.keys > summary::-webkit-details-marker { display: none; }
details.keys > summary::after { content: "expand_more"; font-family: "Material Icons"; font-size: 22px; line-height: 1; transition: transform .2s; }
details.keys[open] > summary::after { transform: rotate(180deg); }
details.keys > summary .mi { font-size: 22px; }
details.keys > summary:hover { background: var(--surface); }
details.keys > table { margin-top: 16px; text-align: left; }

/* 折りたたみの幅: 「≡」を右端へ / スマホの幅: 切り替えをメニューのいちばん下へ(小さく・薄く) */
.theme-toggle-menu { display: none; }
@media (max-width: 1140px) {
  .site-header .inner > .theme-toggle { margin-left: auto; }
  .nav-toggle { margin-left: 4px; }
}
@media (max-width: 820px) {
  .site-header .inner > .theme-toggle { display: none; }
  .nav-toggle { margin-left: auto; }
  .nav .theme-toggle-menu { display: inline-flex; width: 100%; height: 40px; margin: 0; border-radius: 0; font-size: 18px; color: var(--muted); opacity: 0.7; }
  .nav .theme-toggle-menu:hover { opacity: 1; background: none; }
}

/* グリッドの中の画面写真: margin auto だと中身(画像)の大きさに縮み、読み込みの前は 0 = 高さを確保しない
   → 遅延読み込みで節が後から伸び、#アンカーへのスクロールが手前で止まった。幅を先に決めて高さを確保する */
.player-lead > .screen-fig { width: 100%; justify-self: center; }

/* 書き出しモードの印: 文字の長さに関係なく同じ幅(カードの中の幅いっぱい・最大 260px)・文字は中央 */
.mode-tags { align-items: stretch; width: 100%; max-width: 260px; margin-left: auto; margin-right: auto; }
.mode-tags p.mode-tag { display: block; text-align: center; }
/* 書き出しモード: 4 列は 1141px 以上だけ(1000px 前後の 4 列だと印の文字がはみ出した) */
@media (max-width: 1140px) { .modes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }
/* Windows / Mac の帯のラベル: 3 つとも同じ横幅(帯の中の幅いっぱい・最大 640px)・文字は中央 */
.cross ul.cross-labels { align-items: stretch; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; padding: 0; }
.cross ul.cross-labels li { text-align: center; text-wrap: balance; word-break: auto-phrase; }

/* Review BOX の一覧の画像の下の「プレイヤーを開いたところ」 */
.player-lead > .review-open { margin-top: -12px; }

/* 販売の準備中: 文中のリンクは普通の文字・ボタンはダウンロードの「準備中」と同じ枠線 */
.soon-link { color: inherit; }
.pcard span.btn.outline, .group span.btn.outline { cursor: default; }

/* Cookie の同意のバナー(EU などからの閲覧だけ自動で出る・フッターの「Cookie の設定」からも)= 2 つのボタンは同じ見た目 */
.consent {
  position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); font-size: 14px; line-height: 1.7;
}
.consent p { margin: 0; flex: 1 1 340px; }
.consent-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-btns .btn { padding: 8px 20px; font-size: 14px; font-family: inherit; cursor: pointer; justify-content: center; }
@media (max-width: 480px) { .consent-btns { width: 100%; } .consent-btns .btn { flex: 1; } }
footer .consent-open { background: none; border: 0; padding: 0; font: inherit; color: #ccc; cursor: pointer; }
footer .consent-open:hover { color: #fff; }