@charset "UTF-8";

:root {
  --navy: #0B1F3A;
  --ink: #12263F;
  --muted: #44546A;
  --line: #E1E8EE;
  --paper: #F5F7FA;
  --white: #FFFFFF;
  --mint: #34D6B6;
  --mint-dark: #1FB596;
  --mint-soft: #E3F8F2;
  --latin: "Manrope", "Zen Kaku Gothic New", sans-serif;
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", "Zen Kaku Gothic New", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  letter-spacing: .02em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  /* 日本語は単語（文節）の区切りで改行する */
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3, .plan h3, .final h2 {
  text-wrap: balance;
  /* 日本語を詰めて組む。フォントに palt が無いため、約物の余白は vendor/heading-tight.js で詰める */
  font-feature-settings: "palt" 1;
  text-spacing-trim: trim-start;
  letter-spacing: 0;
}
.pt-c { margin-right: -.4em; }
.pt-o { margin-left: -.4em; }
p { text-wrap: pretty; }
ul, ol { list-style: none; }
svg { flex: none; }

.wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }

/* BUTTONS ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-mint { color: var(--navy); background: var(--mint); box-shadow: 0 10px 26px rgba(52,214,182,.28); }
.btn-mint:hover { background: #4be0c2; }
.btn-line { color: var(--white); border: 1px solid rgba(255,255,255,.55); }
.btn-line:hover { background: rgba(255,255,255,.08); }
.btn-sm { min-height: 38px; padding: 0 20px; font-size: 13px; box-shadow: none; }

/* HEADER ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  width: min(1240px, calc(100% - 48px));
  height: 68px;
  margin: 0 auto;
  color: var(--white);
}
.brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; }
.brand-mark { display: block; flex: none; width: auto; height: 36px; }
.site-footer .brand-mark { height: 32px; }
.brand-word { font-family: var(--latin); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.brand small { font-size: 9.5px; font-weight: 500; opacity: .7; letter-spacing: .04em; }
.global-nav { display: flex; gap: 30px; margin-left: 20px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.82); white-space: nowrap; }
.global-nav a { white-space: nowrap; }
.global-nav a:hover { color: var(--mint); }
.header-actions { display: flex; gap: 10px; margin-left: auto; }
.header-actions .btn { white-space: nowrap; }

/* HERO ------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 24px;
  width: min(1240px, calc(100% - 48px));
  min-height: 560px;
  margin: 0 auto;
  padding: 96px 0 72px;
}
.hero h1 {
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1.38;
  font-weight: 700;
}
.hero h1 em { font-style: normal; color: var(--mint); }
.hero-lead { margin-top: 26px; font-size: 16px; line-height: 1.95; color: rgba(255,255,255,.88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-note { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.7); }

.hero-visual { position: relative; margin-right: -90px; }

/* SOURCES（余白：小） ---------------------------------- */
.sources { padding: 64px 24px; background: var(--paper); text-align: center; }
.source-row { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 12px; overflow: hidden; max-width: 940px; margin: 0 auto; }
.source-row li {
  margin-left: -1px;
  padding: 2px 22px;
  border-left: 1px solid #C9D3DC;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: #33465C;
  white-space: nowrap;
}

/* PROBLEM（余白：大） ---------------------------------- */
.problem { padding: 128px 0; background: var(--paper); }
.h2-lg { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.4; font-weight: 700; }
.h2-md { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.4; font-weight: 700; }
.sub { margin-top: 16px; font-size: 16px; line-height: 1.9; color: var(--muted); }
.sub-light { color: rgba(255,255,255,.8); }

.problem .wrap { display: grid; grid-template-columns: 40% 60%; align-items: start; }
.problem-head { position: sticky; top: 104px; align-self: start; padding-right: 16px; }
.problem-grid { margin-top: 0; }
.problem-grid li { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: 24px; padding: 36px 0; }
.problem-grid li + li { border-top: 1px solid var(--line); }
.problem-grid li:first-child { padding-top: 0; }
.p-no { font-family: var(--latin); font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--mint); }
.p-body h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.p-body p { margin-top: 10px; max-width: 760px; font-size: 16px; line-height: 1.95; color: var(--muted); }

/* UNIFY ------------------------------------------------ */
.unify { padding: 84px 0 80px; color: var(--white); background: var(--navy); }
.unify-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin-top: 44px; }
.steps { display: grid; gap: 34px; }
.steps li { display: flex; gap: 20px; align-items: flex-start; }
.step-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--navy); font-family: var(--latin); font-weight: 800; font-size: 18px; }
.steps h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.steps p { margin-top: 6px; font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.85; }

.connect-card { padding: 22px 24px 20px; color: var(--ink); background: var(--white); border-radius: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }

/* 受注でCPA：太い縦線のみ */
.true-cpa { margin-top: 56px; padding: 6px 0 6px 28px; border-left: 6px solid var(--mint); }
.true-cpa h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.true-cpa p { margin-top: 8px; font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.95; }

/* FEATURES（画像大・幅広） ----------------------------- */
.features { padding: 100px 0 108px; background: var(--paper); }
.feature-grid { margin-top: 72px; display: grid; gap: 72px; }
.fcard { display: grid; grid-template-columns: 40% 60%; align-items: start; }
.fcard:nth-child(even) { grid-template-columns: 60% 40%; }
.fcard:nth-child(even) .shot { order: -1; }
.fcard-text { padding-right: 56px; }
.fcard:nth-child(even) .fcard-text { padding-right: 0; padding-left: 56px; }
.fcard-text { padding-top: 0; }
.fcard h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.fno { display: inline-grid; place-items: center; vertical-align: middle; margin-right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); color: var(--navy); font-family: var(--latin); font-size: 15px; font-weight: 800; }
.fcard-text p { margin-top: 16px; font-size: 16px; line-height: 1.95; color: var(--muted); }
.shot { margin: 0; padding: 24px; overflow: hidden; background: var(--white); border: 1px solid #E3E8EE; border-radius: 0; }
.shot img { width: 100%; height: auto; border: 0; box-shadow: none; }

/* OPERATIONS ------------------------------------------- */
.ops { padding: 84px 0 92px; color: var(--white); background: var(--navy); }
.ops .sub { color: rgba(255,255,255,.82); }
.ops-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; margin-top: 44px; align-items: start; }
.ops-list { display: grid; gap: 30px; }
.ops-list li { display: flex; gap: 22px; align-items: flex-start; }
.oico { width: 34px; height: 34px; margin-top: 2px; fill: none; stroke: var(--mint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ops-list h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.ops-list p { margin-top: 6px; font-size: 16px; line-height: 1.9; color: rgba(255,255,255,.8); }
.ops-cards { display: grid; gap: 20px; }
.mini-card { color: var(--ink); padding: 18px 22px 20px; background: var(--white); border: 0; border-radius: 8px; box-shadow: 0 2px 12px rgba(11,31,58,.06); font-size: 12px; }
.mc-title { font-size: 12px; font-weight: 700; padding-bottom: 12px; }
.mc-head { margin: 0 -22px; padding: 8px 22px; font-size: 11px; font-weight: 700; background: #F0F4F7; }
.members li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.members li:last-child { border-bottom: 0; }
.av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; }
.av1 { background: #1F5E8C; } .av2 { background: #C2654B; } .av3 { background: #5D7C65; }
.members b { font-weight: 500; font-size: 12px; }
.role { margin-left: auto; padding: 1px 8px; font-style: normal; font-size: 10px; color: var(--muted); background: #EEF2F5; border-radius: 3px; }
.role-own { color: #137A66; background: var(--mint-soft); }
.mc-add { margin-top: 4px; font-size: 12px; font-weight: 700; color: #1C6BB5; }

/* PRICING：1つの表 ------------------------------------- */
.pricing { padding: 88px 0 92px; background: var(--paper); text-align: center; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 44px; border-top: 2px solid var(--navy); border-bottom: 1px solid #D5DEE6; }
.plan { position: relative; padding: 64px 12px 36px; background: var(--white); border: 0; border-left: 1px solid #D5DEE6; }
.plan:first-child { border-left: 0; }
.plan h3 { margin: 0; padding: 0; font-size: 15px; font-weight: 700; background: none; }
.rows { margin-top: 18px; font-size: 17px; color: #33465C; }
.price { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 2px; }
.price b { font-family: var(--latin); font-size: clamp(34px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.price span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.plan-rec { color: var(--white); background: var(--navy); border-left-color: var(--navy); }
.plan-rec + .plan { border-left-color: var(--navy); }
.plan-rec .rows { color: rgba(255,255,255,.82); }
.plan-rec .price span { color: rgba(255,255,255,.7); }
.plan-badge { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 2px 16px; font-size: 11px; font-weight: 700; color: var(--navy); background: var(--mint); border-radius: 99px; white-space: nowrap; }
.plan-add { margin-top: 28px; font-size: 13px; font-weight: 500; }
.plan-checks { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: #33465C; }
.plan-checks li { display: inline-flex; align-items: center; gap: 6px; }
.plan-checks svg { width: 16px; height: 16px; fill: none; stroke: var(--mint-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* FAQ：1列・幅800px ------------------------------------ */
.faq { padding: 84px 0 96px; background: var(--paper); }
.faq .wrap { width: min(800px, calc(100% - 48px)); }
.faq .h2-md { text-align: left; }
.faq-grid { display: block; margin-top: 30px; }
.faq-col { display: block; }
.faq details { background: transparent; border: 0; border-top: 1px solid #CFD9E1; }
.faq .faq-col:first-child details:first-child { border-top: 0; }
.faq .faq-col:last-child details:last-child { border-bottom: 1px solid #CFD9E1; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-size: 17px; font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 300; line-height: 1; color: #33465C; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 4px 24px; font-size: 16px; line-height: 1.95; color: var(--muted); }

/* FINAL CTA -------------------------------------------- */
.final { position: relative; overflow: hidden; padding: 96px 24px 100px; color: var(--white); text-align: center; background: var(--navy); }
.final-inner { position: relative; }
.final h2 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.4; font-weight: 700; }
.final p { margin-top: 14px; font-size: 16px; color: rgba(255,255,255,.84); }
.final .hero-actions { justify-content: center; }

/* FOOTER ----------------------------------------------- */
.site-footer { color: var(--white); background: var(--navy); border-top: 1px solid rgba(255,255,255,.1); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0; }
.footer-links { display: flex; align-items: center; gap: 28px; font-size: 12px; color: rgba(255,255,255,.78); }
.footer-links a:hover { color: var(--mint); }
.ext { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* CAN DO：できること（白） ------------------------------ */
.cando { padding: 96px 0 104px; background: var(--paper); }
.cando-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; margin-top: 56px; }
.cando-name { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--navy); }
.cando-name::before { content: ""; width: 24px; height: 3px; background: var(--mint); }
.cando-group li { padding: 22px 0 26px; border-top: 1px solid #CFD9E1; }
.cando-group h3 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.cando-group li p { margin-top: 8px; font-size: 16px; line-height: 1.9; color: var(--muted); }

/* FLOW：導入の流れ（白） -------------------------------- */
.flow { padding: 96px 0 100px; background: var(--paper); }
.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; }
.flow-steps li { position: relative; padding: 36px 32px 0 0; border-top: 1px solid #B7C3CE; }
.flow-steps li::before { content: ""; position: absolute; top: -6px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); }
.flow-day { font-size: 24px; font-weight: 800; line-height: 1.3; color: var(--mint); }
.flow-day .num { font-family: var(--latin); font-size: 52px; font-weight: 800; letter-spacing: -.02em; margin-right: 4px; }
.flow-steps h3 { margin-top: 14px; font-size: 22px; font-weight: 700; line-height: 1.5; }
.flow-note { margin-top: 56px; font-size: 16px; line-height: 1.95; color: var(--muted); }

/* SUPPORT：サポート（紺） ------------------------------- */
.support { padding: 96px 0 104px; color: var(--white); background: var(--navy); }
.support-cols { display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; }
.support-col { min-width: 0; }
.support-contact { padding-right: 56px; border-right: 1px solid rgba(255,255,255,.28); }
.support-setup { padding-left: 56px; }
.support h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.support-col p { margin-top: 14px; font-size: 16px; line-height: 1.95; color: rgba(255,255,255,.84); }
.support-col .support-price { margin-top: 10px; font-size: 16px; color: rgba(255,255,255,.9); }
.support-price .yen { white-space: nowrap; }
.support-price .support-once { margin-left: .4em; white-space: nowrap; }
.support-service + .support-service { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.28); }
.support-price b { font-family: var(--latin); font-size: 48px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--white); }
.support-list { margin: 22px 0 6px; }
.support-list li { display: flex; gap: 10px; padding: 8px 0; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.88); }
.support-list .n { flex: none; width: 1.5em; font-family: var(--latin); font-weight: 800; color: var(--mint); }

/* TRUST：安心して使えます（薄い灰色） -------------------- */
.trust { padding: 96px 0 104px; background: var(--paper); }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; margin-top: 56px; }
.trust-grid li { padding-top: 26px; border-top: 1px solid #CFD9E1; }
.trust-grid h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.trust-grid p { margin-top: 10px; font-size: 16px; line-height: 1.9; color: var(--muted); }

/* TABLET ----------------------------------------------- */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 80px; gap: 40px; }
  .hero-visual { margin-right: 0; max-width: 720px; }
  .unify-grid, .ops-grid { grid-template-columns: 1fr; gap: 40px; }
  .cando-grid { grid-template-columns: 1fr; gap: 48px; }
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .problem .wrap { display: block; }
  .problem-head { position: static; padding-right: 0; }
  .problem-grid { margin-top: 56px; }
  .ops-cards { grid-template-columns: 1fr 1fr; }
  .fcard, .fcard:nth-child(even) { grid-template-columns: 1fr; gap: 28px; }
  .fcard:nth-child(even) .shot { order: 0; }
  .fcard-text, .fcard:nth-child(even) .fcard-text { padding: 0; }
  .global-nav { display: none; }
}

/* MOBILE ----------------------------------------------- */
@media (max-width: 720px) {
  .wrap { width: calc(100% - 40px); }
  .header-inner { width: calc(100% - 32px); height: 60px; gap: 12px; }
  .header-actions .btn-line { display: none; }
  .brand-word { font-size: 18px; }
  .brand-mark { height: 30px; }
  .hero-inner { width: calc(100% - 40px); padding: 72px 0 48px; }
  .hero h1 { font-size: clamp(27px, 7.8vw, 36px); line-height: 1.4; }
  .hero-lead br { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .btn { padding: 0 22px; }
  .sources { padding: 48px 16px; }
  .source-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 0; max-width: 360px; justify-content: stretch; }
  .source-row li { margin: 0; padding: 12px 0; border-left: 0; font-size: 15px; white-space: normal; text-align: left; }
  .source-row li:nth-child(n+3) { border-top: 1px solid #D5DDE5; }
  .problem { padding: 72px 0; }
  .problem-grid { margin-top: 36px; }
  .problem-grid li { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .p-no { font-size: 44px; }
  .unify, .ops { padding: 60px 0 64px; }
  .features { padding: 64px 0 72px; }
  .feature-grid { gap: 56px; margin-top: 44px; }
  .true-cpa { padding-left: 20px; }
  .ops-cards { grid-template-columns: 1fr; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(odd) { border-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plan-rec + .plan { border-left-color: var(--line); }
  .plan-checks { flex-direction: column; align-items: center; gap: 8px; }
  .cando, .flow, .support, .trust { padding: 64px 0 72px; }
  .cando-grid { gap: 40px; margin-top: 36px; }
  .cando-group h3 { font-size: 18px; }
  .flow-steps { display: block; margin-top: 40px; padding-left: 4px; }
  .flow-steps li { padding: 0 0 36px 36px; border-top: 0; border-left: 1px solid #B7C3CE; }
  .flow-steps li:last-child { padding-bottom: 0; border-left-color: transparent; background: linear-gradient(#B7C3CE, #B7C3CE) no-repeat 0 0 / 1px 14px; }
  .flow-steps li::before { top: 8px; left: -6px; }
  .flow-day .num { font-size: 44px; }
  .flow-steps h3 { font-size: 20px; }
  .flow-note { margin-top: 40px; }
  .support-cols { display: block; margin-top: 36px; }
  .support-contact { padding: 0 0 36px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.28); }
  .support-setup { padding: 36px 0 0; }
  .support-service + .support-service { margin-top: 32px; padding-top: 32px; }
  .support h3, .trust-grid h3 { font-size: 20px; }
  .support-price b { font-size: 34px; }
  .trust-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .faq summary { font-size: 16px; }
  .rows { font-size: 16px; }
  .p-body h3, .fcard h3, .ops-list h3, .steps h3, .true-cpa h3 { font-size: 20px; }
  .h2-lg, .h2-md, .final h2 { font-size: clamp(28px, 7.4vw, 30px); }
  .final { padding: 70px 20px 76px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { flex-wrap: wrap; gap: 14px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ===== 試作 A-2：ページ全体を「1枚の表計算の紙」にする ================================
   紺以外の8つのセクションは同じ薄い灰色。罫線(横40px)と行番号は rowgrid.js が描く。 */
.sheet { position: relative; }
.sheet > * { position: relative; z-index: 1; }
.sheet > .sheet-lines { position: absolute; left: 0; z-index: 0; pointer-events: none; display: block; }
.sheet > .rowno { position: absolute; left: 0; top: 0; z-index: 1; width: calc((100% - 1120px) / 2 - 20px); height: 100%; pointer-events: none; }
.rowno span { position: absolute; right: 0; transform: translateY(-50%); font-family: var(--latin); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .06em; color: #A3AEBB; }
.rowno span.is-h2 { color: var(--mint); font-weight: 800; }
@media (max-width: 1279px) { .rowno { display: none; } }

/* 料金の「1行」の説明と見本 */
.sample { margin-top: 72px; text-align: left; }
.sample-title { font-size: 22px; font-weight: 700; line-height: 1.5; }
.sample-tag { margin-top: 20px; font-size: 12px; font-weight: 700; line-height: 1; color: #44546A; }
.sample-scroll { margin-top: 8px; overflow-x: auto; }
.sample-table { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.sample-table tr { height: 40px; }
.sample-table th, .sample-table td { height: 40px; padding: 0 12px; border: 1px solid #D5DEE6; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-align: left; color: var(--ink); background: var(--white); }
.sample-table th { font-size: 13px; font-weight: 700; color: #44546A; }
.sample-table .num { text-align: right; font-family: var(--latin); font-variant-numeric: tabular-nums; }
.sample-table td.num { font-weight: 600; }
.sample-table .eq { width: auto; border: 0; background: transparent; padding-left: 20px; font-size: 20px; font-weight: 800; color: var(--mint); }
.sample-table tr.hl td:not(.eq) { background: #E8FAF6; }
.sample-note { margin-top: 28px; font-size: 16px; line-height: 1.95; color: var(--muted); }
.sample-guide { margin-top: 10px; font-size: 16px; line-height: 1.95; color: var(--muted); }
.sample + .plan-checks { margin-top: 40px; }

/* 料金の「円/月（税別）」は、数字の下の行に中央揃えでまとめて置く */
@media (max-width: 1100px) {
  .price { flex-direction: column; align-items: center; gap: 2px 0; }
}
@media (max-width: 720px) {
  .sample { margin-top: 56px; }
  .sample-title { font-size: 20px; }
  .price b { font-size: 34px; }
}

/* ===== 試作 キャラクター（飾りの画像。動かさない） ======================================= */
.chara { display: block; max-width: none; pointer-events: none; user-select: none; }

/* 画面幅 1101px 以上 */
@media (min-width: 1101px) {
    /* 2 あらゆるデータを：見本画面の左下の角 */
  .connect-card { position: relative; }
  .connect-card .chara-unify { position: absolute; left: -207px; bottom: -72px; }
  .true-cpa { margin-top: 80px; }
  /* 3 あらゆる場面を：大見出しの行の右側 */
  .features .wrap > .chara-features { position: absolute; right: 0; top: -12px; }
  /* 4 運用：共有設定パネルの左下の角の外側 */
  .ops-cards { position: relative; }
  .ops-cards .chara-ops { position: absolute; left: -38px; bottom: -116px; }
  /* 5 最終CTA：ボタンの右側 */
  .final-inner > .chara-cta { position: absolute; left: calc(50% + 262px); bottom: 0; }
}

/* 画面幅 1100px 以下：最終CTAだけ小さな案内役を表示する（ヒーローは下の「ヒーロー作り直し」） */
@media (max-width: 1100px) {
  .chara-unify, .chara-features, .chara-ops { display: none; }
  .final-inner > .chara-cta { width: auto; height: 120px; margin: 0 auto 14px; }
}

/* スマホ */
@media (max-width: 720px) {
  .final-inner > .chara-cta { height: 96px; }
}

/* ===== ヒーロー修正：画面ははっきり、キャラクターは画面の左下の角の手前、一言は紺の背景の上 ============ */
.hero { --ws: clamp(520px, 50vw, 720px); --ch: clamp(280px, 23.6vw, 340px); --kc: .981; }
@media (max-width: 1279px) { .hero { --kc: 1.04; } }
@media (max-width: 1160px) { .hero { --kc: 1.17; } }
.hero-visual { margin: 0; }
.hero-screen-wrap { position: absolute; display: block; max-width: none; user-select: none; }
.hero-screen { display: block; width: 100%; max-width: none; height: auto; opacity: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; pointer-events: none; user-select: none; }
.chara-hero-large { position: absolute; z-index: 2; display: block; max-width: none; width: auto; pointer-events: none; user-select: none; }
.hero-hand {
  position: absolute; z-index: 3;
  font-family: "Zen Kurenaido", "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
  font-weight: 400; line-height: 1.3; letter-spacing: .04em;
  color: var(--white); white-space: nowrap;
  transform: rotate(-7deg); transform-origin: right bottom;
  pointer-events: none; user-select: none;
}
.hero-hand-line { display: block; width: 100%; height: 12px; margin-top: 4px; overflow: visible; }
.hero-hand-line path { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }

@media (min-width: 1101px) {
  .hero-inner { min-height: 750px; padding: 71px 0 0; align-items: start; }
  .hero-visual { position: absolute; top: 0; bottom: 0; left: 48%; right: max(-100px, calc((100% - 100vw) / 2)); max-width: none; }
  .hero-screen-wrap { top: max(70px, calc(726px - .31 * var(--ch) - .764 * var(--ws))); right: -40px; width: var(--ws); }
  .chara-hero-large { right: calc(var(--ws) - 40px - var(--kc) * var(--ch)); bottom: 24px; height: var(--ch); }
  .hero-hand { right: 20px; top: 6px; font-size: clamp(21px, 1.8vw, 26px); }
}
@media (min-width: 1400px) {
  .hero-hand { top: auto; right: 8px; bottom: 50px; }
}

/* 画面幅 1100px 以下：文章の下に、絵をまとめて置く（上から 一言 → 画面 → 手前のキャラクター） */
@media (max-width: 1100px) {
  .hero-visual { position: relative; width: 100%; max-width: 640px; height: 690px; margin: 8px auto 0; }
  .hero-hand { right: 4px; top: 8px; font-size: 24px; }
  .hero-screen-wrap { top: 108px; right: 0; width: calc(100% - 80px); }
  .chara-hero-large { left: 0; bottom: 0; height: 260px; }
}
@media (max-width: 720px) {
  .hero-visual { height: 470px; }
  .hero-hand { right: 2px; top: 4px; font-size: 19px; }
  .hero-screen-wrap { top: 92px; width: calc(100% - 30px); }
  .chara-hero-large { height: 190px; }
}

/* ===== 灰色の背景のセクション：中身を白いカードに載せる（背景の罫線と行番号は「紙」として残す） ========= */
.source-row li, .problem-grid li, .fcard, .cando-group li, .flow-steps li, .faq-grid, .trust-grid li {
  background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; box-shadow: none;
}
.chara-problem, .chara-cando, .chara-pricing, .chara-flow, .chara-faq { display: block; max-width: none; pointer-events: none; user-select: none; }

/* 1 取り込む数字：9つの小さなカード（5つ＋4つ、中央揃え） */
.source-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; overflow: visible; max-width: 1040px; }
.source-row li { margin: 0; padding: 12px 24px; white-space: nowrap; }

/* 2 課題：右の列の 01〜04 を1つずつカードに。左の列はカードにしない */
.problem-grid { display: grid; gap: 20px; }
.problem-grid li, .problem-grid li:first-child { grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 28px 32px; }
.problem-grid li + li { border-top: 1px solid #E3E8EE; }
.problem-head .chara-problem { margin-top: 24px; }

/* 3 あらゆる場面を：1枚のカードに、文章と画像を左右に並べる（文章40% : 画像60%、項目ごとに交互） */
.feature-grid { gap: 24px; margin-top: 56px; }
.fcard { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 32px; align-items: center; padding: 32px; }
.fcard:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.fcard-text, .fcard:nth-child(even) .fcard-text { padding: 0; }
.shot { padding: 0; overflow: visible; background: none; border: 0; border-radius: 0; }
.shot img { border: 1px solid #E3E8EE; }

/* 4 できること：3列、各列の一番上にまとまりの名前、その下にカードを3枚。同じ段の高さを揃える */
.cando-name { margin-bottom: 0; }
.cando-group li { padding: 24px; }
@media (min-width: 1101px) {
  .cando-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin-top: 56px; }
  .cando-group, .cando-group ul { display: contents; }
  .cando-group:nth-child(1) .cando-name { grid-column: 1; grid-row: 1; }
  .cando-group:nth-child(2) .cando-name { grid-column: 2; grid-row: 1; }
  .cando-group:nth-child(3) .cando-name { grid-column: 3; grid-row: 1; }
  .cando-group:nth-child(1) li { grid-column: 1; }
  .cando-group:nth-child(2) li { grid-column: 2; }
  .cando-group:nth-child(3) li { grid-column: 3; }
  .cando-group li:nth-child(1) { grid-row: 2; }
  .cando-group li:nth-child(2) { grid-row: 3; }
  .cando-group li:nth-child(3) { grid-row: 4; }
}

/* 6 導入の流れ：4つのカードを横に。つなぐ細い横線とミントの丸は、カードの上に残す */
.flow-steps { position: relative; gap: 20px; margin-top: 72px; }
.flow-steps::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 1px; background: #B7C3CE; }
.flow-steps li { padding: 24px; }
.flow-steps li::before { top: -32px; left: 0; }

/* 7 FAQ：1枚の大きなカードの中に7つの質問。質問と質問の間は細い線 */
.faq-grid { margin-top: 56px; padding: 0 32px; }
.faq details { border-top: 1px solid #E3E8EE; }
.faq .faq-col:first-child details:first-child { border-top: 0; }
.faq .faq-col:last-child details:last-child { border-bottom: 0; }
.faq summary { min-height: 68px; padding: 0 4px; }

/* 8 安心して使えます：2列×2段 */
.trust-grid { gap: 20px; margin-top: 56px; }
.trust-grid li { padding: 28px 32px; }

/* 追加のキャラクター（小さな案内役。動かさない） */
@media (min-width: 1101px) {
  .cando .wrap > .chara-cando, .flow .wrap > .chara-flow { position: absolute; right: 0; top: -14px; }
  .faq .wrap > .chara-faq { position: absolute; right: 0; top: -30px; }
  .sample { position: relative; }
  .sample > .chara-pricing { position: absolute; right: 0; top: 14px; }
}

/* 画面幅 1100px 以下 */
@media (max-width: 1100px) {
  .chara-cando, .chara-pricing { display: none; }
  .fcard, .fcard:nth-child(even) { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .cando-group ul { display: grid; gap: 16px; }
  .cando-name { margin-bottom: 16px; }
  .flow-steps::before { display: none; }
  .problem-head .chara-problem { height: 120px; width: auto; margin-top: 16px; }
  .flow .wrap > .chara-flow, .faq .wrap > .chara-faq { width: auto; height: 120px; margin: 16px 0 0 auto; }
}

/* スマホ */
@media (max-width: 720px) {
  .source-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 360px; }
  .source-row li, .source-row li:nth-child(n+3) { padding: 12px; white-space: normal; border: 1px solid #E3E8EE; }
  .problem-grid li, .problem-grid li:first-child { grid-template-columns: 1fr; gap: 8px; padding: 24px 20px; }
  .problem-head .chara-problem { height: 96px; }
  .feature-grid { gap: 20px; margin-top: 40px; }
  .fcard, .fcard:nth-child(even) { padding: 20px; gap: 20px; }
  .cando-group li { padding: 20px; }
  .flow-steps { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 48px; padding-left: 0; }
  .flow-steps li, .flow-steps li:last-child { padding: 20px; border: 1px solid #E3E8EE; background: var(--white); }
  .flow-steps li::before { top: -6px; left: 20px; }
  .flow .wrap > .chara-flow, .faq .wrap > .chara-faq { height: 96px; }
  .faq-grid { margin-top: 36px; padding: 0 20px; }
  .trust-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .trust-grid li { padding: 24px 20px; }
}
@media (max-width: 720px) { .source-row li { display: flex; align-items: center; } }

/* ===== 文章とカードの修正：取り込めるデータの例／課題の「Adnalytics なら」／レポートの3形式 ================ */
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 1 取り込めるデータの例：2つのまとまり。名前を左に、その下にカードを横1列 */
.sources { padding: 96px 0 104px; text-align: left; }
.sources .h2-lg { margin-bottom: 8px; }
.src-group { margin-top: 40px; }
.src-group .cando-name { margin-bottom: 16px; }
.source-row { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; max-width: none; margin: 0; overflow: visible; }
.source-row li { width: 200px; min-height: 100px; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; white-space: nowrap; }
.source-row li b { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.src-note { margin-top: 32px; font-size: 16px; line-height: 1.95; color: var(--muted); }

/* 2 課題：カードの下に、細い区切りの線と「Adnalytics なら」の解決の一文 */
.p-solve { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 16px; padding-top: 20px; border-top: 1px solid #E3E8EE; }
.p-tag { flex: none; margin-top: 4px; padding: 2px 12px; border-radius: 99px; background: var(--mint); color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.p-solve p { font-size: 16px; line-height: 1.9; color: #12263F; }

/* 3 レポートは3形式：文章の側に、形式ごとの説明を縦に並べる */
.fmt-list { margin-top: 20px; }
.fmt-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.fmt-list li + li { border-top: 1px solid #E3E8EE; }
.fmt-list .ico { width: 28px; height: 28px; }
.fmt-list b { flex: none; min-width: 108px; font-family: var(--latin); font-size: 17px; font-weight: 800; color: var(--ink); }
.fmt-list span { font-size: 15px; line-height: 1.6; color: var(--muted); }
@media (min-width: 1101px) {
  /* 画像の側の右に、次の回でキャラクターを置く空きを残す（表紙の画像は左に寄せる） */
  .fcard:nth-child(4) .shot { padding-right: 176px; }
}

/* スマホ */
@media (max-width: 720px) {
  .sources { padding: 64px 0 72px; }
  .src-group { margin-top: 32px; }
  .source-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .source-row li, .source-row li:nth-child(n+3) { width: auto; min-height: 96px; padding: 12px 10px; gap: 4px; align-items: flex-start; justify-content: center; }
  .source-row li b { font-size: clamp(13px, 3.6vw, 15px); letter-spacing: 0; }
  .p-solve { flex-direction: column; gap: 10px; }
  .fmt-list li { gap: 12px; }
  .fmt-list b { min-width: 96px; font-size: 16px; }
}

/* ===== 追加のキャラクター（2回目の7体。小さな案内役。動かさない） ======================================= */
.chara-n01, .chara-n02, .chara-n03, .chara-n04, .chara-n05, .chara-n06, .chara-n07 { display: block; max-width: none; pointer-events: none; user-select: none; }
.support-contact .chara-n05 { margin-top: 28px; }
/* 画面幅 1101px 以上 */
@media (min-width: 1101px) {
  .sources .wrap > .chara-n01 { position: absolute; right: 0; top: calc(min(4.48vw, 64.4px) - 96px); }
  .plan-add { position: relative; }
  .plan-add > .chara-n03 { position: absolute; left: calc(50% - 224px); top: -22px; }
  .trust .wrap > .chara-n06 { position: absolute; right: 0; top: calc(min(4.48vw, 64.4px) - 100px); }
}
/* 画面幅 721px 以上（1100px 以下でも、文字や中身に重ならなかった3体は表示する） */
@media (min-width: 721px) {
  .flow .wrap > .chara-n04 { position: absolute; right: 0; bottom: -40px; }
  .fcard:nth-child(4) .shot { position: relative; padding-right: 176px; }
  .shot img.chara-n07 { position: absolute; right: 0; bottom: 0; width: auto; height: 150px; border: 0; }
}
/* 画面幅 1100px 以下：重なってしまう【1】【3】は表示しない。【5】【6】は高さ 120px */
@media (max-width: 1100px) {
  .chara-n01, .chara-n03 { display: none; }
  .support-contact .chara-n05 { width: auto; height: 120px; margin-top: 20px; }
  .trust .wrap > .chara-n06 { width: auto; height: 120px; margin: 16px 0 0 auto; }
}
/* スマホ：【5】【6】だけ表示する（高さ 96px） */
@media (max-width: 720px) {
  .chara-n04, .chara-n07 { display: none; }
  .support-contact .chara-n05 { height: 96px; }
  .trust .wrap > .chara-n06 { height: 96px; }
}

/* ===== 課題の作り直し：左右2列をやめて、「課題 → 解決」を左から右に読む横長のカードにする ================== */
.problem .wrap { display: block; }
.problem-head { position: relative; top: auto; padding-right: 0; }
.problem-chars { position: absolute; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 20px; }
.problem-chars .chara { display: block; width: auto; height: 150px; max-width: none; margin: 0; }
.problem-grid { display: grid; gap: 16px; margin-top: 44px; }
.problem-grid li, .problem-grid li:first-child { display: grid; grid-template-columns: 45fr 5fr 50fr; gap: 0; align-items: stretch; padding: 0; overflow: hidden; }
.problem-grid li + li { border-top: 1px solid #E3E8EE; }
.p-prob { align-self: center; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: start; padding: 28px 24px 28px 32px; }
.p-body p { max-width: none; }
.p-arrow { align-self: center; justify-self: center; display: grid; place-items: center; width: 28px; height: 28px; }
.p-arrow svg { width: 28px; height: 28px; fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-solve { grid-column: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 28px 32px; border-top: 0; background: #EFFCF9; }
.p-tag { margin-top: 0; }
@media (min-width: 721px) { .problem { padding: 96px 0; } }

/* 画面幅 861px 以下：スマホと同じ並び（上から 課題 → 下向きの矢印 → 解決） */
@media (max-width: 860px) {
  .problem-grid li, .problem-grid li:first-child { grid-template-columns: 1fr; }
  .p-prob { padding: 24px 20px 12px; }
  .p-arrow { width: 32px; height: 32px; margin: 0 0 12px; }
  .p-arrow svg { transform: rotate(90deg); }
  .p-solve { padding: 20px; }
}
/* 画面幅 1100px 以下：キャラクター2体は高さ 115px */
@media (max-width: 1100px) {
  .problem-chars .chara { height: 115px; }
  .problem-grid { margin-top: 40px; }
}
/* スマホ：上から 見出し → 説明文 → キャラクター2体（右寄せ） → カード */
@media (max-width: 720px) {
  .problem-chars { position: static; justify-content: flex-end; gap: 12px; margin-top: 20px; }
  .problem-chars .chara { height: 85px; }
  .problem-grid { margin-top: 28px; }
  .p-prob { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== カードを「製品の案内」らしく：紺の面、小さな製品の画面（文字と図形）、アイコンの四角 =============== */
.ico-box { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 6px; background: var(--navy); }
.ico-box .ico { width: 20px; height: 20px; stroke: var(--mint); stroke-width: 1.7; }
.ico-box-sheet { background: #EEF2F5; }
.ico-box-sheet .ico { stroke: var(--navy); }
.ico-xs { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

/* 小さな部品（札・小さな画面） */
.mock { position: relative; width: 100%; margin-top: 6px; padding: 20px 12px 10px; border-radius: 4px; font-size: 12px; line-height: 1.4; color: #44546A; background: #FFFFFF; pointer-events: none; user-select: none; }
.mock-label { position: absolute; top: 5px; right: 8px; font-size: 10px; line-height: 1; color: #8A97A8; }
.mock small { display: block; font-size: 11px; line-height: 1.3; color: #6B7A8D; }
.mock b { font-size: 12px; font-weight: 700; color: var(--ink); }
.pl { display: inline-block; padding: 1px 9px; border-radius: 99px; background: #E9EEF3; color: #44546A; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.pl-mint { background: #DDF6EF; color: #137A66; }
.pl-red { background: #FCE4E4; color: #C0392B; }
.pl-yellow { background: #FFF1C7; color: #8A6100; }
.pl-navy { background: var(--navy); color: #FFFFFF; }
.pl-dash { background: transparent; border: 1px dashed #9AA8B8; padding: 0 8px; }
.mock-c, .mock-f { background: #F5F7FA; }

/* 1 取り込めるデータの例：アイコンの四角＋名前（上の段）、取り込み方の状態（下の段） */
.sources { padding-bottom: 48px; }
.source-row { gap: 12px; }
.source-row li { width: auto; min-width: 200px; min-height: 104px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; }
.src-top { display: flex; align-items: center; gap: 8px; }
.source-row li b { font-size: 17px; }
.src-state { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); }

/* 2 課題：解決の側を紺にし、真ん中の矢印はミントの丸の中の白い矢印 */
.problem-grid li, .problem-grid li:first-child { position: relative; grid-template-columns: 45fr 55fr; }
.p-arrow { position: absolute; left: 45%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); }
.p-arrow svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: none; }
.p-solve { background: var(--navy); padding: 28px 32px 28px 44px; }
.p-solve p { color: #FFFFFF; }
.mock-p1 { display: flex; align-items: center; gap: 10px; }
.m1-src { display: grid; gap: 4px; justify-items: start; }
.m1-arrow { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--mint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m1-nums { flex: 1; display: grid; grid-template-columns: repeat(3, auto); gap: 8px 14px; justify-content: space-between; }
.wf { display: flex; gap: 6px; height: 98px; }
.wf-col { position: relative; flex: 1; }
.wf-bar { position: absolute; left: 22%; right: 22%; bottom: calc(16px + var(--b)); height: var(--h); border-radius: 1px; }
.wf-gray { background: #B9C3CF; } .wf-red { background: #D64545; } .wf-green { background: #2E9E6B; }
.wf-amt { position: absolute; left: -4px; right: -4px; bottom: calc(16px + var(--b) + var(--h) + 3px); text-align: center; font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.wf-name { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; color: #6B7A8D; }
.m3-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m3-bar { display: block; position: relative; height: 10px; margin: 9px 0 7px; border-radius: 99px; background: #E3E8EE; }
.m3-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--navy); }
.m3-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--mint); }
.m3-note { display: block; font-size: 11px; color: #6B7A8D; }
.m4-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m4-plans > span { padding: 6px 4px; text-align: center; border: 1px solid #E3E8EE; border-radius: 3px; }
.m4-plans small { font-size: 11px; }
.m4-rec { background: var(--navy); border-color: var(--navy) !important; }
.m4-rec small { color: rgba(255,255,255,.82); }
.m4-rec b { color: #FFFFFF; }
.m4-note { display: block; margin-top: 7px; font-size: 11px; color: #6B7A8D; }

/* 3 できること：アイコンの四角 → 見出しと説明文 → 小さな製品の画面（薄い灰色の面） */
.cando-group li { display: flex; flex-direction: column; align-items: flex-start; }
.cando-group li > .ico-box { margin-bottom: 12px; }
.cando-group li .mock { margin-top: auto; }
.cando-group li p { margin-bottom: 14px; }
.c-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.c-row > span:first-child { flex: 1; }
.c-why { font-style: normal; font-size: 11px; color: #8A97A8; }
.c-btn { display: inline-block; padding: 5px 10px; border: 1px solid #C9D3DC; border-radius: 4px; background: #FFFFFF; color: var(--ink); font-size: 12px; font-weight: 700; }
.c-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.c-days { display: flex; gap: 6px; }
.c-days i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; }
.c-days .on { background: var(--navy); color: #FFFFFF; }
.c-days .off { background: #FFFFFF; color: #8A97A8; border: 1px solid #D5DEE6; }
.c-row + .c-btn { margin-top: 8px; }
/* 画像つきのクリエイティブ一覧の見本: デモ用の架空のバナー3枚（`demo-assets`）に、数字を添える */
.c-cr { display: flex; gap: 10px; }
.c-cr-item { flex: 1 1 0; min-width: 0; display: grid; gap: 5px; }
.c-cr-item img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border: 1px solid #D5DEE6; border-radius: 3px; background: #FFFFFF; }
.c-cr-item b { font-family: var(--latin); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-opts { display: flex; gap: 16px; }
.c-opt { display: flex; align-items: center; gap: 6px; color: #6B7A8D; }
.c-opt i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #C9D3DC; background: #FFFFFF; }
.c-opt.sel { color: var(--ink); font-weight: 700; }
.c-opt.sel i { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 2px #FFFFFF; }

/* 4 導入の流れ：数字を大きく（Manrope、ミント）、「日目」は小さめ。各カードの下に小さな製品の画面 */
.flow-steps li { display: flex; flex-direction: column; align-items: flex-start; }
.flow-day { font-size: 16px; }
.flow-day .num { font-size: 44px; }
.flow-steps li h3 { margin-bottom: 16px; }
.flow-steps li .mock { margin-top: auto; }
.f-conn { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
.f-ok { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #137A66; }
.f-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-keep { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
.f-check { width: 18px; height: 18px; fill: none; stroke: var(--mint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* 5 安心して使えます：左上にアイコンの四角、その右に見出しと説明文 */
.trust-grid li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }

/* スマホ・狭い画面 */
@media (max-width: 860px) {
  .p-arrow { position: relative; left: auto; top: auto; transform: none; justify-self: center; margin: -16px 0 -16px; }
  .p-arrow svg { transform: rotate(90deg); }
  .p-solve { padding: 32px 20px 20px; }
}
@media (max-width: 720px) {
  .sources { padding-bottom: 48px; }
  .source-row li, .source-row li:nth-child(n+3) { min-width: 0; min-height: 0; align-items: flex-start; justify-content: flex-start; gap: 8px; }
  .src-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mock-p1 { flex-direction: column; align-items: flex-start; }
  .m1-arrow { transform: rotate(90deg); }
  .m1-nums { width: 100%; }
  .flow-steps { padding-left: 32px; }
  .flow-steps::before { display: block; left: 5px; right: auto; top: 20px; bottom: 20px; width: 1px; height: auto; }
  .flow-steps li::before { top: 24px; left: -32px; }
  .trust-grid li { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
}

/* スマホ・狭い画面の調整（上の指定を上書き） */
@media (max-width: 860px) {
  .problem-grid li, .problem-grid li:first-child { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .source-row li, .source-row li:nth-child(n+3) { padding: 12px 8px; }
  .source-row li b { font-size: clamp(12.5px, 3.3vw, 14px); letter-spacing: 0; white-space: nowrap; }
  .src-state { white-space: normal; font-size: 11px; }
}
@media (max-width: 1100px) {
  .source-row { flex-wrap: wrap; }
}

/* ===== 細かい修正 ===================================================================== */
/* 修正4：「その他」は途中で改行しない */
.nw { white-space: nowrap; }

/* 修正3：「あらゆるデータを」の丸い番号は、縮まない正円 */
.step-no { flex: none; aspect-ratio: 1 / 1; min-width: 40px; min-height: 40px; }

/* 修正1：課題の上の余白を 72px に（「取り込めるデータの例」の下 48px と合わせて、間を 120px に） */
@media (min-width: 721px) { .problem { padding: 72px 0 96px; } }

/* 修正2：「できること」の画面幅ごとの並び */
@media (min-width: 861px) and (max-width: 1100px) {
  .cando-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin-top: 48px; }
  .cando-group, .cando-group ul { display: contents; }
  .cando-name { margin-bottom: 0; }
  .cando-group:nth-child(1) .cando-name { grid-column: 1; grid-row: 1; }
  .cando-group:nth-child(2) .cando-name { grid-column: 2; grid-row: 1; }
  .cando-group:nth-child(3) .cando-name { grid-column: 3; grid-row: 1; }
  .cando-group:nth-child(1) li { grid-column: 1; }
  .cando-group:nth-child(2) li { grid-column: 2; }
  .cando-group:nth-child(3) li { grid-column: 3; }
  .cando-group li:nth-child(1) { grid-row: 2; }
  .cando-group li:nth-child(2) { grid-row: 3; }
  .cando-group li:nth-child(3) { grid-row: 4; }
}
@media (min-width: 721px) and (max-width: 860px) {
  .cando-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .cando-group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cando-name { margin-bottom: 16px; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .c-days { gap: 4px; }
  .c-days i { width: 20px; height: 20px; font-size: 10px; }
}
@media (max-width: 720px) {
  .cando-group li .mock { display: none; }
  .cando-group li p { margin-bottom: 0; }
}

/* 修正5：1400px 以上では、画面を少し上げて、KPI の数字がキャラクターに隠れないようにする */
@media (min-width: 1400px) {
  .hero-screen-wrap { top: max(24px, calc(686px - .31 * var(--ch) - .764 * var(--ws))); }
}
@media (min-width: 1101px) and (max-width: 1399px) {
  .hero { --ch: clamp(280px, 21.1vw, 295px); }
  .chara-hero-large { bottom: 10px; }
}

/* 修正6：スマホのヒーローを短くする（文字の大きさは変えない。余白を詰め、絵をまとめて小さくする） */
@media (max-width: 720px) {
  .hero-inner { padding: 32px 0 32px; gap: 20px; }
  .hero-lead { margin-top: 16px; }
  .hero-actions { margin-top: 20px; }
  .hero-note { margin-top: 12px; }
  .hero-visual { height: 300px; margin-top: 0; }
  .hero-screen-wrap { top: 92px; right: 0; width: 50%; }
  .chara-hero-large { left: -10px; bottom: 0; height: 190px; }
}

/* ===== 製品の本物の画面に差し替え（画像の下の一行、書類の重なり、見本の置き換え、共有設定の枠と札） =============== */
/* 2 4象限マップ：画像のすぐ下の一行（灰色、13px） */
.shot-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #5F6F82; }

/* 4 レポート：表紙の後ろに2ページ目を、右上に少しずらして重ねる（影なし。細い線 #E3E8EE は .shot img の線） */
.report-stack { position: relative; padding-top: 5%; }
.report-stack img { display: block; height: auto; }
.report-stack .rs-front-btn { position: relative; z-index: 1; width: 93%; }
.report-stack .rs-front-btn img { width: 100%; }
.report-stack .rs-back { position: absolute; top: 0; right: 0; width: 93%; }

/* 2 あらゆるデータを：データ連携の見本を、スプレッドシート連携の画面に（白い面、角の丸み 8px、影なし） */
.connect-card { padding: 16px; background: var(--white); border-radius: 8px; box-shadow: none; }
.connect-card .cc-shot { display: block; width: 100%; height: auto; }

/* 4 運用：クライアントへの共有設定。枠と札はページの上に重ねる（位置は画像に対する%なので、大きさが変わってもずれない） */
.share-shot { position: relative; }
.share-shot img { display: block; width: 100%; height: auto; }
.share-frame { position: absolute; box-sizing: border-box; border: 2px solid var(--mint); border-radius: 4px; pointer-events: none; }
.sf-a { left: 86.04%; width: 3.75%; top: 25.10%; height: 6.33%; }
.sf-b { left: 86.04%; width: 3.75%; top: 50.02%; height: 14.60%; }
.sf-c { left: 86.04%; width: 3.75%; top: 74.84%; height: 14.60%; }
/* 枠の番号：枠の左上の角（少し外側）に、ミントの丸と紺の数字。位置は枠に対して決めるので、画像の大きさが変わってもずれない */
.share-no { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); color: var(--navy); font-family: var(--latin); font-size: 11px; font-weight: 800; font-style: normal; line-height: 1; }
.share-frame .share-no { position: absolute; left: -15px; top: -15px; }
/* 札：画像のすぐ下に横に並べる（番号の丸 ＋ 文字） */
.share-notes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.share-notes li { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--navy); }

/* ヒーローの KPI の数字（CPC）が手前のキャラクターに隠れないように、位置を数pxだけ調整する */
@media (min-width: 1400px) {
  .chara-hero-large { bottom: 6px; }
}
@media (min-width: 1101px) and (max-width: 1399px) {
  .hero-inner { min-height: 764px; }
  .chara-hero-large { bottom: 0; }
}

/* データ連携の見本が低くなったので、つなぐくんは見本の左下の角の外側（ステップ2の文章の下）に動かす */
@media (min-width: 1101px) {
  .connect-card .chara-unify { bottom: -167px; }
}

/* 共有設定の見本の左下の角から、みるちゃんが少しはみ出して重なっていたので、少し下げる */
@media (min-width: 1101px) {
  .ops-cards .chara-ops { bottom: -134px; }
}

/* ===== 画像を押すと大きく表示する：押せる印（右下の白い丸と虫めがね） ============================== */
.zoom-btn { display: block; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: zoom-in; -webkit-appearance: none; appearance: none; }
:where(.zoom-btn:not(.hero-screen-wrap)) { position: relative; width: 100%; }
.zoom-btn img { cursor: zoom-in; }
.zoom-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.zoom-ico { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--line); pointer-events: none; }
.zoom-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ヒーローの画面は右が 40px 画面の外に出るので、印は内側に寄せる */
@media (min-width: 1101px) {
  .hero-screen-wrap .zoom-ico { right: 48px; }
}

/* ===== 大きく表示する画面 ===================================================================== */
.lb { position: fixed; inset: 0; z-index: 1000; display: block; padding: 56px 16px 16px; background: rgba(11, 31, 58, .9); }
.lb[hidden] { display: none; }
.lb-multi { padding-left: 72px; padding-right: 72px; }
.lb-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.lb-img { display: block; flex: none; max-width: none; user-select: none; -webkit-user-drag: none; transform-origin: center center; will-change: transform; }
.lb-close, .lb-nav { position: absolute; z-index: 2; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lb-close { top: 8px; right: 8px; width: 44px; height: 44px; }
.lb-nav { top: 50%; width: 48px; height: 64px; margin-top: -32px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-nav[hidden] { display: none; }
.lb-close svg, .lb-nav svg { width: 28px; height: 28px; fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -4px; border-radius: 6px; }
html.lb-open, html.lb-open body { overflow: hidden; }
@media (min-width: 721px) {
  .lb { padding: 64px 40px 32px; }
  .lb-multi { padding-left: 88px; padding-right: 88px; }
}

/* スマホ（720px 以下）：虫めがねの印を小さくして、画像の右下の角から半分ほど外にはみ出させる。枠の番号の丸も小さくする */
@media (max-width: 720px) {
  .zoom-ico { width: 24px; height: 24px; right: -12px; bottom: -12px; }
  .zoom-ico svg { width: 14px; height: 14px; }
  .share-frame .share-no { width: 14px; height: 14px; font-size: 9px; left: -13px; top: -13px; }
  /* はみ出した印が画像の下の一行に重ならないように、一行の上の余白を少し広げる */
  .shot-note { margin-top: 16px; }
}

/* 仕上げ：メールのリンクの下線、フッターの「運営：」の一行、料金の注記（ユーザー数） */
.flow-note a:not(.btn), .support-contact a[href^="mailto:"]:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.footer-op { flex-basis: 100%; margin: 0; font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.7); }
.plan-users, .plan-tax { margin-top: 8px; }
@media (min-width: 1101px) {
  /* 手前のキャラクター（左）に重ならないよう、上の「追加：…」の行の左端にそろえて、右側に置く */
  .plan-users, .plan-tax { max-width: 640px; margin-left: calc(50% - 113px); text-align: left; }
}

/* ===== round28 ======================================================================= */
/* 1 見出しの横棒：文字の下半分に、ミントの太い横棒（蛍光ペン）。行ごとに、文字の幅に合わせて引く。背景は平らな1色の図（グラデーションではない） */
.hbar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect width='10' height='10' fill='%2334D6B6' fill-opacity='.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% .33em;
  background-position: 0 calc(100% - .26em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.unify .hbar, .ops .hbar, .support .hbar, .final .hbar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Crect width='10' height='10' fill='%2334D6B6' fill-opacity='.35'/%3E%3C/svg%3E");
}
.hz { white-space: nowrap; }
/* 7 見出しの横棒の右端：つなぐくんの顔（高さ 40px。ノーマルとよろこぶを交互に） */
.hz > .face-h { display: inline-block; width: auto; height: 40px; margin-left: 12px; vertical-align: -.2em; }
@media (max-width: 720px) { .hz > .face-h { height: 36px; margin-left: 8px; } }

/* 3 あらゆるデータを：取り込み方の画面3枚を、右下に少しずつずらして重ねる（後ろから CSV → スプレッドシート → 媒体。一番手前が媒体） */
.connect-card { padding: 0; background: none; border-radius: 0; box-shadow: none; }
.connect-card .zoom-btn.cs { position: relative; display: block; width: 100%; aspect-ratio: 100 / 64; }
.cs-item { position: absolute; display: block; width: 82%; }
.cs-item img { display: block; width: 100%; height: auto; border: 1px solid #E3E8EE; border-radius: 8px; box-shadow: none; background: var(--white); }
.cs-1 { left: 18%; top: 47.7%; z-index: 3; }
.cs-2 { left: 9%; top: 24.2%; z-index: 2; }
.cs-3 { left: 0; top: 0; z-index: 1; }
.cs-tag { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 2px 10px; border-radius: 99px; background: var(--mint); color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.connect-card .zoom-ico { z-index: 4; }
@media (max-width: 1100px) { .connect-card { max-width: 640px; } }
@media (max-width: 720px) {
  .connect-card .zoom-btn.cs { aspect-ratio: 100 / 54; }
  .cs-item { width: 88%; }
  .cs-1 { left: 12%; top: 31.5%; }
  .cs-2 { left: 6%; top: 15.7%; }
  .cs-tag { left: 6px; top: 6px; padding: 1px 8px; font-size: 11px; }
}

/* 7 あらゆる場面を：みるちゃん（虫めがね）は①、つなぐくん（ベル）は③のカードの右の空き。幅 1440px 以上だけ */
.fcard { position: relative; }
.chara-g01, .chara-g02 { display: none; }
@media (min-width: 1440px) {
  .chara-g01, .chara-g02 { display: block; position: absolute; left: calc(100% + 10px); top: 24px; width: auto; height: 140px; }
}

/* 5 安心して使えます：10枚のカード。見出しの右につなぐくん（鍵）、カードの下の右にみるちゃん（盾） */
.chara-g03 { display: block; width: auto; height: 150px; margin: 24px 0 0 auto; }
@media (max-width: 720px) { .chara-g03 { height: 96px; margin-top: 20px; } }

/* 6 操作の動画：3枚のカード（番号・名前・説明）で選び、1本の大きな動画を順番に再生する */
.demo { padding: 96px 0 104px; background: var(--paper); }
.demo .wrap { position: relative; }
.demo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.demo-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 20px 24px 26px; overflow: hidden; text-align: left; font: inherit; color: var(--ink); background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.demo-card:hover { border-color: var(--navy); }
.demo-card:focus-visible, .demo-pp:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.dc-no { font-family: var(--latin); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--mint); }
.dc-name { font-size: 20px; font-weight: 700; line-height: 1.4; }
.dc-desc { font-size: 14px; line-height: 1.8; color: var(--muted); }
.demo-card.is-on { color: var(--white); background: var(--navy); border-color: var(--navy); }
.demo-card.is-on .dc-desc { color: rgba(255,255,255,.84); }
.dc-bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.demo-card.is-on .dc-bar { display: block; }
.dc-bar i { display: block; height: 100%; background: var(--mint); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.demo-stage { position: relative; margin-top: 20px; overflow: hidden; background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; cursor: pointer; }
.demo-panel[hidden] { display: none; }
.demo-screen { position: relative; aspect-ratio: 1440 / 900; background: var(--white); }
.demo-video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--white); }
/* 一時停止中：真ん中に大きな再生ボタン（直径 68px の紺の丸に白い三角）。再生中は左下に「一時停止」 */
.demo-big { display: none; position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; place-items: center; border-radius: 50%; background: var(--navy); pointer-events: none; }
.demo-big svg { width: 30px; height: 30px; margin-left: 3px; fill: var(--white); }
.demo-stage.is-paused .demo-big { display: grid; }
.demo-pp { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 18px 0 14px; min-height: 40px; border: 0; border-radius: 999px; background: var(--navy); color: var(--white); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .03em; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; }
.demo-pp svg { width: 18px; height: 18px; fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; }
.demo-pp .pp-play { display: none; fill: var(--white); stroke: none; }
.demo-pp.is-paused .pp-pause { display: none; }
.demo-pp.is-paused .pp-play { display: block; }
.chara-g05 { display: block; width: auto; height: 160px; }
@media (min-width: 1101px) { .demo .wrap > .chara-g05 { position: absolute; right: 0; top: -14px; } }
@media (max-width: 1100px) { .chara-g05 { height: 120px; margin: 16px 0 0 auto; } }
@media (max-width: 860px) { .demo-card { padding: 18px 16px 24px; } .dc-name { font-size: 18px; } .dc-desc { font-size: 13px; } }
@media (max-width: 720px) {
  .demo { padding: 64px 0 72px; }
  .demo-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .demo-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 14px; row-gap: 6px; padding: 16px 18px 20px; }
  .dc-desc { grid-column: 1 / -1; }
  .demo-card:not(.is-on) .dc-desc { display: none; }
  .demo-card:not(.is-on) { padding-bottom: 16px; }
  .demo-pp { left: 8px; bottom: 8px; min-height: 36px; padding: 0 14px 0 11px; font-size: 13px; }
  .demo-big { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .demo-big svg { width: 26px; height: 26px; }
  .chara-g05 { height: 96px; margin-top: 12px; }
}

/* 2 CTA の帯：セクションの区切りに、横幅いっぱいの紺の帯（左に見出しと小さな文、右にボタン、端にキャラクター） */
.trust-end { display: flex; justify-content: flex-end; margin-top: 24px; }
.trust-end .chara-g03 { margin: 0; }
.cta-band { background: var(--mint); color: var(--navy); overflow: hidden; }
.cta-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 36px; width: min(1120px, calc(100% - 48px)); min-height: 200px; margin: 0 auto; padding: 24px 0; }
.cb-title { font-size: 32px; font-weight: 700; line-height: 1.4; color: var(--navy); }
.cb-note { margin-top: 10px; font-size: 14px; line-height: 1.7; color: rgba(11,31,58,.8); }
.cb-btn { position: relative; min-height: 60px; padding: 0 40px; overflow: hidden; font-size: 18px; font-weight: 800; letter-spacing: .03em; color: var(--white); background: var(--navy); box-shadow: none; }
.cb-btn:hover { transform: translateY(-2px); background: #17375f; }
.cb-arrow { display: inline-block; }
.cb-chara { display: block; width: auto; height: 140px; }
/* 動き：帯が画面に入ったとき中身がふわっと現れる（1回だけ）／ボタンの上を細い光の帯が流れる／→ が行ったり来たり／キャラクターがゆっくり揺れる */
.cta-band.js-reveal .cta-band-inner { opacity: 0; transform: translateY(20px); }
.cta-band.js-reveal.is-in .cta-band-inner { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .6s ease-out; }
.cb-btn::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34px; background: rgba(255,255,255,.55); transform: translateX(-120px) skewX(-20deg); pointer-events: none; animation: cb-shine 4s ease-in-out infinite; }
.cb-arrow { animation: cb-arrow 2.4s ease-in-out infinite; }
.cb-chara { animation: cb-float 3.2s ease-in-out infinite; }
.cta-band.js-reveal:not(.is-in) .cb-btn::after, .cta-band.js-reveal:not(.is-in) .cb-arrow, .cta-band.js-reveal:not(.is-in) .cb-chara { animation-play-state: paused; }
@keyframes cb-shine { 0% { transform: translateX(-120px) skewX(-20deg); } 20%, 100% { transform: translateX(560px) skewX(-20deg); } }
@keyframes cb-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes cb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* 「動きを減らす」設定のときは、上の動きをすべて止める（ボタンの持ち上がりも） */
@media (prefers-reduced-motion: reduce) {
  .cta-band.js-reveal .cta-band-inner, .cta-band.js-reveal.is-in .cta-band-inner { opacity: 1; transform: none; transition: none; }
  .cb-btn::after, .cb-arrow, .cb-chara { animation: none; }
  .cb-btn::after { display: none; }
  .cb-btn:hover { transform: none; }
}
@media (max-width: 1100px) { .cb-title { font-size: 28px; } .cb-btn { padding: 0 30px; } .cb-chara { height: 120px; } }
@media (max-width: 860px) {
  .cta-band-inner { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding: 40px 0 32px; }
  .cb-title { font-size: 26px; }
  .cb-btn { width: 100%; min-height: 56px; margin-top: 22px; padding: 0 22px; }
  .cb-chara { height: 90px; margin: 18px 0 0 auto; }
}
@media (max-width: 720px) { .cta-band-inner { width: calc(100% - 40px); } .cb-title { font-size: 24px; } }

/* 2 ヘッダーの「ログイン」（ボタンより目立たない白い文字のリンク） */
.login-link { align-self: center; padding: 6px 4px; font-size: 13px; font-weight: 500; letter-spacing: .03em; color: rgba(255,255,255,.82); white-space: nowrap; }
.login-link:hover { color: var(--mint); }
.header-actions { align-items: center; gap: 18px; }
.btn .lbl-short { display: none; }
@media (max-width: 720px) {
  .btn .lbl-full { display: none; }
  .btn .lbl-short { display: inline; }
  .header-actions { gap: 12px; }
}

/* 2 スマホの画面の下の帯（720px 以下）と、PC の右下の小さな箱（721px 以上）。出る・隠れるは ctabar.js（round37 で、スクロールが止まって約1秒たったら出し、動かすと消す動きに変更。見た目は末尾の round37 を参照） */
.cta-bar { display: none; }
@media (max-width: 720px) {
  .site-footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* 7 サポート：初期設定の代行の近くに、2人で運ぶ */
.chara-g04 { display: block; width: auto; height: 150px; margin: 28px 0 0 auto; }
@media (max-width: 720px) { .chara-g04 { display: none; } }

/* 7 最終CTA：左の空きに、2人で手を振る（右の2人並びと向かい合う）。幅 1101px 以上だけ */
.chara-g06 { display: none; }
@media (min-width: 1101px) { .final-inner > .chara-g06 { display: block; position: absolute; right: calc(50% + 262px); bottom: 0; width: auto; height: 130px; } }

/* 7 FAQ：答えの頭に、みるちゃんの顔（高さ 30px。ノーマルとよろこぶを交互に） */
.faq details p { position: relative; padding-left: 52px; }
.faq-face { position: absolute; left: 4px; top: 0; width: auto; height: 30px; }

/* 3 あらゆるデータを：重ねた3枚の高さが変わったので、つなぐくんは、ステップの文章と画像の間の空き（重ねた画像の左下）へ動かす */
@media (min-width: 1101px) {
  .connect-card .chara-unify { left: -143px; bottom: 0; width: auto; height: 160px; }
}

/* 7 最終CTA：見出しの右端のつなぐくんの顔に、右のキャラクターの枠が触れないよう、左右の2組を外側へ 18px ずつ動かす */
@media (min-width: 1101px) {
  .final-inner > .chara-cta { left: calc(50% + 280px); }
  .final-inner > .chara-g06 { right: calc(50% + 280px); }
}

/* 3 あらゆるデータを：画面幅 1101〜1199px では、つなぐくんが文章や画像に触れるため表示しない */
@media (min-width: 1101px) and (max-width: 1199px) { .chara-unify { display: none; } }

/* 2 ヘッダーのログイン：幅 399px 以下（390px・375px）では、ブランドの文字に触れるため表示しない */
@media (max-width: 399px) { .login-link { display: none; } }

/* ===== round37 ======================================================================= */
/* 5 上部のメニュー：機能 ▾（一覧）／料金／導入の流れ／サポート／安全性／よくあるご質問。1200px 未満は「≡」（スマホと狭い画面のメニュー） */
html { scroll-padding-top: 68px; }
@media (max-width: 720px) { html { scroll-padding-top: 60px; } }
.global-nav { align-items: center; gap: 26px; }
.global-nav > a, .nav-dd-btn { position: relative; padding: 6px 0; }
.global-nav > a:focus-visible, .nav-dd-btn:focus-visible, .nav-dd-list a:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 4px; }
.nav-dd { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; border: 0; background: none; font: inherit; color: inherit; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; }
.nav-dd-btn:hover, .nav-dd-btn[aria-expanded="true"] { color: var(--mint); }
.nav-caret { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.nav-dd-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-dd-list { position: absolute; left: -16px; top: 100%; z-index: 60; min-width: 260px; padding: 8px; background: var(--navy); border: 1px solid rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.08); border-radius: 0 0 8px 8px; }
.nav-dd-list[hidden] { display: none; }
.nav-dd-list a { display: block; padding: 10px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9); white-space: nowrap; }
.nav-dd-list a:hover, .nav-dd-list a:focus-visible { color: var(--mint); background: rgba(255,255,255,.06); }
.nav-dd-list a[aria-current="true"] { color: var(--mint); }
.global-nav > a[aria-current="true"], .nav-dd-btn[aria-current="true"] { color: var(--white); }
.global-nav > a[aria-current="true"]::after, .nav-dd-btn[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--mint); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 -8px 0 0; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; -webkit-appearance: none; appearance: none; }
.nav-toggle svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle:focus-visible, .mnav-close:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 1199px) {
  .global-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 720px) { .header-actions { gap: 8px; } }

/* スマホと狭い画面のメニュー：紺の地が画面いっぱいに開く。開いている間、後ろのページはスクロールしない */
html.menu-open, html.menu-open body { overflow: hidden; }
.mnav { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; padding: 0 20px; color: var(--white); background: var(--navy); overflow-y: auto; overscroll-behavior: contain; }
.mnav[hidden] { display: none; }
@media (min-width: 1200px) { .mnav { display: none !important; } }
.mnav-top { display: flex; align-items: center; justify-content: space-between; flex: none; height: 60px; }
.mnav-close { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mnav-close svg { width: 28px; height: 28px; fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; }
.mnav-list { margin-top: 12px; }
.mnav-list > li { border-top: 1px solid rgba(255,255,255,.16); }
.mnav-list > li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.mnav-list > li > a, .mnav-head { display: block; padding: 15px 4px; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--white); }
.mnav-sub { padding: 0 0 10px 14px; }
.mnav-sub a { display: block; padding: 10px 4px; font-size: 15px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.88); }
.mnav-list a:hover, .mnav-list a:focus-visible { color: var(--mint); }
.mnav-list a:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; border-radius: 4px; }
.mnav-actions { display: grid; gap: 12px; margin-top: auto; padding: 28px 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
.mnav-actions .btn { width: 100%; min-height: 52px; }

/* 1 スクロールが止まって約1秒たったら CTA を出し、動かすと消す。PC（721px 以上）は右下の小さな箱、スマホ（720px 以下）は画面の下の帯。出る・隠れるは ctabar.js */
.cta-bar { opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.cta-bar.is-on { opacity: 1; visibility: visible; transition: opacity .3s ease, transform .3s ease, visibility 0s; }
@media (min-width: 721px) {
  .cta-bar { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: block; width: 300px; padding: 18px; color: var(--white); background: var(--navy); border: 1px solid var(--mint); border-radius: 12px; transform: translateY(10px); }
  .cta-bar.is-on { transform: none; }
  .cta-small { margin: 0 24px 12px 0; font-size: 13px; line-height: 1.6; color: var(--white); }
  .cta-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
  .cta-close svg { width: 16px; height: 16px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; }
  .cta-close:hover svg { stroke: var(--mint); }
  .cta-close:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
  .cta-bar .btn { display: flex; width: 100%; min-height: 44px; padding: 0 16px; font-size: 14px; box-shadow: none; }
  /* D-586: 「21日間無料で試す」（主役・ミントの塗り）と「デモを触る」（控えめ・枠だけ）を、横に並べる。箱の高さは変えない（ボタンは1行のまま） */
  .cta-bar .cta-actions .btn { padding: 0 12px; white-space: nowrap; justify-content: center; }
}
@media (max-width: 720px) {
  .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: block; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--navy); border-top: 1px solid rgba(255,255,255,.12); transform: translateY(110%); }
  .cta-bar.is-on { transform: none; }
  .cta-bar .btn { display: flex; width: 100%; min-height: 44px; font-size: 14px; box-shadow: none; }
  .cta-bar .cta-actions .btn { padding: 0 12px; white-space: nowrap; justify-content: center; }
  .cta-small, .cta-close { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cta-bar, .cta-bar.is-on { transition: none; } }
/* D-586: 右下の箱・下の帯の、2つのボタン。ミントが残りの幅、デモは文字の幅だけ。デモが停止中は（demolinks.js が hidden を付ける）出さず、ミントが全幅になる */
.cta-actions { display: flex; gap: 8px; }
.cta-actions .btn-mint { flex: 1 1 auto; width: auto; }
.cta-actions .btn-line { flex: 0 0 auto; width: auto; }
[data-demo-link][hidden] { display: none !important; }

/* 4 上に戻るボタン：画面1つ分ほどスクロールしたら右下に出る。CTA の箱や帯が出ているときは、その上に置く。フッターに近づいたら、フッターの上に持ち上げる */
.to-top { position: fixed; right: 24px; bottom: max(24px, calc(var(--tt-lift, 0px) + 16px)); z-index: 85; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: var(--navy); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, bottom .25s ease; -webkit-appearance: none; appearance: none; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s, bottom .25s ease; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { background: #17375f; }
.to-top:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
html.cta-on .to-top { bottom: max(calc(24px + var(--cta-h, 0px) + 12px), calc(var(--tt-lift, 0px) + 16px)); }
@media (max-width: 720px) {
  .to-top { right: 16px; bottom: max(calc(16px + env(safe-area-inset-bottom, 0px)), calc(var(--tt-lift, 0px) + 16px)); }
  html.cta-on .to-top { bottom: calc(var(--cta-h, 0px) + 12px); }
}
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.is-on { transition: none; } }

/* 3 メールのボタン：宛先と件名の入ったメールが開く。横の小さな文字のボタンで、アドレスをコピーできる（アドレスは画面に文字として出さない） */
.mail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.mail-btn { min-height: 48px; padding: 0 28px; font-size: 15px; }
.mail-btn-navy { color: var(--white); background: var(--navy); box-shadow: none; }
.mail-btn-navy:hover { background: #17375f; }
.mail-btn:focus-visible, .copy-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.copy-btn { min-width: 136px; margin: 0; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .03em; line-height: 1.4; text-align: center; color: var(--navy); background: transparent; border: 1px solid #B7C3CE; border-radius: 99px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.copy-btn:hover { border-color: var(--navy); }
.support .copy-btn { color: var(--white); border-color: rgba(255,255,255,.5); }
.support .copy-btn:hover { color: var(--mint); border-color: var(--mint); }
.copy-btn.is-done { color: #137A66; border-color: var(--mint-dark); }
.support .copy-btn.is-done { color: var(--mint); border-color: var(--mint); }
.copy-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.copy-fallback { flex: 1 1 100%; width: 100%; max-width: 320px; margin: 0; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid #B7C3CE; border-radius: 6px; user-select: all; }
@media (max-width: 720px) {
  .mail-btn { width: 100%; }
  .support-contact .mail-actions, .flow .mail-actions { margin-top: 16px; }
}

/* 2 スクロールに合わせた動き（reveal.js）：画面に入ったとき、1回だけ。reveal.js が付けた要素だけを、最初は隠す（スクリプトが動かないときは、最初から見える）。
   位置の動きは translate / scale（個別の指定）で行い、レイアウトの高さは変えない。既存の transform（ボタンの持ち上がり・キャラクターの揺れ など）とも重ならない */
.rv { opacity: 0; translate: 0 16px; }
.rv.is-in { opacity: 1; translate: none; scale: none; transition: opacity .6s ease-out, translate .6s ease-out, scale .6s ease-out; transition-delay: var(--rv-d, 0s); }
.rv-card { translate: 0 20px; }
.rv-img { translate: var(--rv-x, 24px) 0; }
.fcard:nth-child(even) .rv-img { --rv-x: -24px; }
.rv-chara { translate: none; scale: .9; transform-origin: 50% 100%; }
@media (max-width: 1100px) { .rv-img, .fcard:nth-child(even) .rv-img { translate: 0 20px; } }
/* 大見出しの下のミントの横棒：左から右へ伸びる（2つに分かれた棒は、続けて伸びる） */
.rv-h .hbar { background-size: 0% .33em; }
.rv-h.is-in .hbar { background-size: 100% .33em; transition: background-size .5s ease-out calc(var(--rv-d, 0s) + .1s); }
.rv-h.is-in .hz .hbar { transition-duration: .2s; transition-delay: calc(var(--rv-d, 0s) + .55s); }
/* 罫線と行番号の位置を測るとき（rowgrid.js）は、動きの分のずれを外して測る */
html.rg-measure .rv, html.rg-measure .rv.is-in { translate: none !important; scale: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.is-in { opacity: 1; translate: none; scale: none; transition: none; }
  .rv-h .hbar, .rv-h.is-in .hbar { background-size: 100% .33em; transition: none; }
}
/* 料金の金額の数え上がり：正しい金額の文字は透明にして置いたまま（幅・高さを変えない）、その上に数え上がる数字を重ねる */
.price b.is-counting { position: relative; }
.price b > span, .plan-rec .price b > span { font-size: inherit; color: inherit; }
.price b > .count-real, .plan-rec .price b > .count-real { color: transparent; }
.price b > .count-ov { position: absolute; top: 0; right: 0; white-space: nowrap; }

/* ===== round39 ======================================================================= */
/* 画面ごとの紹介：LP の「画面ごとに、できること。」（#screens）と、新しいページ（screens/） */
.btn-navy { color: var(--white); background: var(--navy); box-shadow: none; }
.btn-navy:hover { background: #17375f; }
/* D-581: 明るい面の、枠だけのボタン（デモへの入口。「無料で試す」より目立たせない）。枠は影で描く（大きさが、塗りのボタンとずれない） */
.btn-outline-navy { color: var(--navy); background: transparent; border: 1px solid var(--navy); box-shadow: none; }
.btn-outline-navy:hover { background: rgba(11,31,58,.06); }
.sc-can { display: grid; gap: 8px; margin-top: 20px; }
.sc-can li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.85; color: var(--muted); }
.sc-can li::before { content: ""; position: absolute; left: 4px; top: .82em; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.sc-note { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.sc-one { margin-top: 8px; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.sc-more { display: inline-block; margin-top: 18px; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--navy); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.sc-more:hover { color: var(--mint-dark); }
.sc-more:focus-visible, .sc-back a:focus-visible, .sc-end-link a:focus-visible, .crumbs a:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 2px; }

/* LP：左に画面の名前（2つのまとまり）、右に選んだ画面の紹介 */
.screens { padding: 96px 0 104px; background: var(--paper); }
.sc-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 48px; }
.sc-list { display: grid; gap: 28px; }
.sc-grp-name { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--navy); }
.sc-grp-name::before { content: ""; flex: none; width: 24px; height: 3px; background: var(--mint); }
.sc-grp-tabs { display: grid; gap: 8px; }
.sc-tab { display: block; width: 100%; margin: 0; padding: 14px 18px; text-align: left; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.sc-tab:hover { border-color: var(--navy); }
.sc-tab:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.sc-tab.is-on { color: var(--white); background: var(--navy); border-color: var(--navy); }
/* 7つの紹介は、同じ場所に重ねて置く（いちばん高いものに高さが揃うので、切り替えてもページの高さが変わらない）。選んでいないものは、見えず、フォーカスもできない */
.sc-stage { display: grid; padding: 32px; background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; }
.sc-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; }
.sc-panel.is-on { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.sc-name { font-size: 26px; font-weight: 700; line-height: 1.4; }
.sc-shot { display: block; width: 100%; height: clamp(380px, 33.34vw, 480px); margin-top: 24px; overflow: hidden; background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; }
.sc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.sc-all { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; text-align: center; }
@media (max-width: 1199px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
  .sc-list { display: flex; gap: 20px; margin: 0 -4px; padding: 4px 4px 8px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .sc-grp { flex: none; }
  .sc-grp-name { margin-bottom: 8px; font-size: 12px; }
  .sc-grp-name::before { width: 16px; height: 2px; }
  .sc-grp-tabs { display: flex; gap: 8px; }
  .sc-tab { width: auto; padding: 10px 16px; font-size: 15px; white-space: nowrap; }
  .sc-shot { height: clamp(240px, 46vw, 420px); }
}
@media (max-width: 720px) {
  .screens { padding: 64px 0 72px; }
  .sc-stage { padding: 18px; }
  .sc-name { font-size: 22px; }
  .sc-one { font-size: 16px; }
  .sc-can li { font-size: 15px; }
  .sc-all { margin-top: 28px; }
  .sc-all .btn { width: 100%; padding: 0 16px; font-size: 14px; }
}

/* 新しいページ（screens/）：上（道しるべ・見出し・目次）、7つの画面、最後のボタン */
.sc-top { padding: 64px 0 88px; background: var(--paper); }
.sc-top .wrap { position: relative; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.crumbs li + li::before { content: "＞"; margin-right: 10px; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--navy); }
.sc-top h1 { margin-top: 28px; }
.chara-sc-top, .chara-sc-toc { display: block; width: auto; max-width: none; pointer-events: none; user-select: none; }
.chara-sc-top { height: 150px; margin: 16px 0 0 auto; }
.sc-toc-wrap { position: relative; margin-top: 48px; }
.sc-toc { display: grid; gap: 32px; }
.sc-toc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; max-width: 900px; margin-top: 16px; }
.sc-toc-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 18px; font-size: 17px; font-weight: 700; line-height: 1.5; background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; transition: border-color .2s ease; }
.sc-toc-list a::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 2px; border-right: 2px solid var(--mint-dark); border-bottom: 2px solid var(--mint-dark); transform: rotate(45deg); }
.sc-toc-list a:hover { border-color: var(--navy); }
.sc-toc-list a:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.chara-sc-toc { display: none; }
@media (min-width: 1101px) {
  .chara-sc-top { position: absolute; right: 0; top: 36px; height: 160px; margin: 0; }
  .chara-sc-toc { display: block; position: absolute; right: 0; bottom: -6px; height: 160px; }
}

.sc-screen { padding: 88px 0 72px; background: var(--paper); }
.sc-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.sc-intro .sc-one { margin-top: 16px; font-size: 20px; }
.sc-can-wrap { padding: 24px 28px 26px; background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; }
.sc-can-wrap .sc-can { margin-top: 0; }
.sc-parts { display: grid; gap: 24px; margin-top: 48px; }
.sc-part { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 32px; align-items: center; padding: 28px; background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; }
.sc-part:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.sc-part:nth-child(even) .sc-part-img { order: 2; }
.sc-part-img { min-width: 0; }
.sc-part-img .zoom-btn { width: min(100%, calc(var(--w, 1360) * .5px)); }
.sc-part-img img { display: block; width: 100%; height: auto; border: 1px solid #E3E8EE; border-radius: 4px; }
.sc-part-text { min-width: 0; }
.sc-part-text h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.sc-part-text p { margin-top: 10px; font-size: 16px; line-height: 1.9; color: var(--muted); }
.sc-back { margin-top: 28px; text-align: right; font-size: 15px; font-weight: 700; line-height: 1.6; }
.sc-back a { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.sc-back a:hover { color: var(--mint-dark); }
.sc-end { padding: 72px 0 88px; background: var(--paper); text-align: center; }
.sc-end-link { margin-top: 24px; font-size: 16px; line-height: 1.6; }
.sc-end-link a { text-decoration: underline; text-underline-offset: 4px; }
.sc-end-link a:hover { color: var(--mint-dark); }
@media (max-width: 1100px) {
  .sc-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sc-part, .sc-part:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sc-part:nth-child(even) .sc-part-img { order: 0; }
}
@media (max-width: 720px) {
  .sc-top { padding: 40px 0 56px; }
  .sc-top h1 { margin-top: 20px; }
  .chara-sc-top { height: 96px; }
  .sc-toc-wrap { margin-top: 36px; }
  .sc-toc-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sc-screen { padding: 56px 0 48px; }
  .sc-can-wrap { padding: 18px 20px 20px; }
  .sc-intro .sc-one { font-size: 18px; }
  .sc-parts { gap: 16px; margin-top: 32px; }
  .sc-part { padding: 16px; }
  .sc-part-text h3 { font-size: 20px; }
  .sc-end { padding: 56px 0 72px; }
}

/* 「いまのページ」の印：画面ごとの紹介のページで、メニューの「すべての画面を見る」と、その親の「機能」に付ける（ミントの下線） */
.global-nav > a[aria-current="page"], .nav-dd-btn[aria-current="page"] { color: var(--white); }
.nav-dd-btn[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--mint); }
.nav-dd-list a[aria-current="page"] { color: var(--mint); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mnav-list a[aria-current="page"] { color: var(--mint); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ===== round41 ======================================================================= */
/* 料金のセクション：「一般的な広告レポートツールとの比較」の表。PC（721px 以上）は1つの表、スマホ（720px 以下）は項目ごとのまとまり */
.cmp { margin-top: 72px; text-align: left; }
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cmp-title { font-size: 22px; font-weight: 700; line-height: 1.5; }
.chara-cmp { display: block; flex: none; width: auto; height: 140px; max-width: none; pointer-events: none; user-select: none; }
.cmp-wrap { margin-top: 16px; overflow: hidden; background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; box-shadow: none; }
.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.7; color: var(--ink); }
.cmp-table thead th, .cmp-table thead td { padding: 16px 20px; border-left: 1px solid #E3E8EE; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: left; }
.cmp-table thead .cmp-corner { width: 22%; padding: 0; border-left: 0; background: var(--white); }
.cmp-table thead .cmp-gen { color: var(--navy); background: #EEF2F5; }
.cmp-table thead .cmp-us { color: var(--white); font-weight: 800; background: var(--navy); border-left-color: var(--navy); }
.cmp-table tbody th, .cmp-table tbody td { padding: 18px 20px; border-top: 1px solid #E3E8EE; vertical-align: top; text-align: left; }
.cmp-table tbody th { color: var(--navy); font-weight: 700; }
.cmp-table tbody td { border-left: 1px solid #E3E8EE; font-weight: 500; }
.cmp-table tbody td.cmp-us { font-weight: 700; background: #F0FBF8; }
.cmp-point { margin-top: 20px; padding-left: 16px; border-left: 4px solid var(--mint); font-size: 16px; font-weight: 700; line-height: 1.9; color: var(--navy); }
.cmp-note { margin-top: 16px; font-size: 13px; line-height: 1.8; color: #5F6F82; }
@media (max-width: 1100px) {
  .chara-cmp { height: 110px; }
}
@media (max-width: 720px) {
  .cmp { margin-top: 56px; }
  .cmp-title { font-size: 20px; }
  .chara-cmp { height: 80px; }
  .cmp-wrap { margin-top: 12px; overflow: visible; background: transparent; border: 0; border-radius: 0; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp-table tbody tr { margin-top: 12px; padding: 16px; background: var(--white); border: 1px solid #E3E8EE; border-radius: 8px; }
  .cmp-table tbody tr:first-child { margin-top: 0; }
  .cmp-table tbody th { padding: 0 0 8px; border: 0; font-size: 16px; line-height: 1.5; }
  .cmp-table tbody td { padding: 10px 0 0; border: 0; font-size: 15px; }
  .cmp-table tbody td::before { content: attr(data-label); display: block; width: max-content; max-width: 100%; margin-bottom: 4px; padding: 1px 10px; font-size: 11px; font-weight: 700; line-height: 1.7; color: var(--navy); white-space: nowrap; background: #EEF2F5; border-radius: 99px; }
  .cmp-table tbody td.cmp-us { margin-top: 10px; padding: 10px 12px 12px; background: #F0FBF8; border-radius: 6px; }
  .cmp-table tbody td.cmp-us::before { color: var(--white); background: var(--navy); }
}

/* D-544 右下（スマホは下の帯の上）の並び。上から ①Botへ行くボタン（LPだけ）②CTA ③上に戻る。位置は、下にあるものの高さを足して決める
 *  --dock-base：いちばん下の高さ（フッターに近づいたら持ち上がる）／--tt-step：上に戻るが出ているときの、その分／--cta-step：CTA が出ているときの、その分。
 *  色は、紺（#0B1F3A）とミント（#34D6B6）と白だけ。グラデーション・影・絵文字は使わない。 */
:root { --dock-base: max(24px, calc(var(--tt-lift, 0px) + 16px)); --tt-step: 0px; --cta-step: 0px; }
html.tt-on { --tt-step: 60px; }
html.cta-on { --cta-step: calc(var(--cta-h, 0px) + 12px); }
.bot-fab { position: fixed; right: 24px; bottom: calc(var(--dock-base) + var(--tt-step) + var(--cta-step)); z-index: 88; display: flex; align-items: center; gap: 10px; height: 56px; margin: 0; padding: 6px 20px 6px 6px; color: var(--white); text-decoration: none; background: var(--navy); border: 1px solid var(--mint); border-radius: 28px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s, bottom .25s ease, background-color .15s ease; }
.bot-fab.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s, bottom .25s ease, background-color .15s ease; }
.bot-fab[hidden] { display: none; }
.bot-fab:hover { background: #17375f; }
.bot-fab:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.bf-icon { flex: none; display: block; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--white); }
.bf-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bf-text { display: grid; gap: 1px; text-align: left; line-height: 1.25; }
.bf-text small { font-size: 11px; font-weight: 600; color: var(--mint); }
.bf-text strong { font-size: 14px; font-weight: 800; color: var(--white); white-space: nowrap; }
@media (min-width: 721px) {
  /* PC：下から 上に戻る → CTA の箱 → Botへ行くボタン */
  html.cta-on .to-top { bottom: var(--dock-base); }
  .cta-bar { bottom: calc(var(--dock-base) + var(--tt-step)); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s, bottom .25s ease; }
  .cta-bar.is-on { transition: opacity .3s ease, transform .3s ease, visibility 0s, bottom .25s ease; }
}
@media (max-width: 720px) {
  /* スマホ：下の帯（CTA）の右端に、上に戻るボタンが入る（帯の高さは変えない）。Botへ行くボタンは、帯の上に浮く */
  :root { --dock-base: max(calc(16px + env(safe-area-inset-bottom, 0px)), calc(var(--tt-lift, 0px) + 16px)); }
  html.tt-on { --tt-step: 56px; }
  .to-top { width: 44px; height: 44px; }
  html.cta-on .to-top { z-index: 91; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  html.cta-on.tt-on .cta-bar .cta-actions { width: calc(100% - 56px); }
  .bot-fab { right: 16px; height: 52px; }
  .bf-icon { width: 40px; height: 40px; }
  html.cta-on .bot-fab { bottom: calc(var(--cta-h, 0px) + 12px); }
}
@media (prefers-reduced-motion: reduce) { .bot-fab, .bot-fab.is-on { transition: none; } }

/* 同意バナー（D-636。`ga.js`が、画面の下に細く出す）が出ている間は、右下に浮かぶ部品（CTA・上に戻る・Botへ行く）を、バナーの高さ（--consent-h）の分だけ、上へずらす。`translate`は、`transform`（出入りの動き）と、独立に重なる */
html.consent-on .cta-bar, html.consent-on .to-top, html.consent-on .bot-fab { translate: 0 calc(-1 * var(--consent-h, 0px)); }
/* 「アクセス解析について」の、同意の選び直しのボタン: いま選んでいる方を、色で示す（aria-pressed） */
/* `.btn-line`は、暗い背景用（白い文字・白い枠）。このページの白い背景では、見えないため、同意・止めるのボタンだけ、濃い文字・枠にする */
.ga-consent-box .btn, .ga-optout-box .btn { margin: 0 8px 8px 0; color: var(--navy); background: var(--white); border: 2px solid var(--navy); }
.ga-consent-box .btn:hover, .ga-optout-box .btn:hover { background: var(--mint-soft); }
.ga-consent-box .btn[aria-pressed="true"] { background: var(--mint-soft); border-color: var(--mint-dark); }
.ga-consent-box .btn:disabled { opacity: .5; cursor: not-allowed; }