/* =====================================================================
   Grok Bot 導入コンサル  —  sections.css
   FV以降のセクション（新デザイン）。トークンは fv.css の --fv-* を使用
   構成: 共通 → 01 Grok Botとは → responsive
   ===================================================================== */

/* ---------- 共通 ---------- */
.sec {
  position: relative;
  background: var(--fv-white);
  color: var(--fv-ink);
  font-family: var(--fv-font);
  scroll-margin-top: var(--header-h);
  overflow: hidden;
}
.sec .en { font-family: var(--fv-font-en); font-weight: 800; }

/* セクション番号 + 英語ラベル */
.sec-num {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}
.sec-num .n {
  font-family: var(--fv-font-en);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--fv-red);
}
.sec-num .line {
  width: 44px;
  height: 2px;
  background: var(--fv-red);
}
.sec-num .label {
  margin-left: 18px;
  font-family: var(--fv-font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fv-muted);
}

/* 右上の手書きコピー */
.sec-hand {
  position: absolute;
  right: 64px;
  top: 18px;
  z-index: 2;
  margin: 0;
  font-family: var(--fv-font-hand);
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--fv-ink);
  white-space: nowrap;
  transform: rotate(-8deg);
  transform-origin: right top;
}
.sec-hand span { display: inline-block; padding-left: 70px; }
.sec-hand .sec-hand-line {
  position: absolute;
  left: 78px;
  right: -8px;
  bottom: -8px;
  height: 12px;
  fill: none;
  stroke: var(--fv-red);
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* ---------- 01 Grok Botとは ---------- */
.sec-about { padding: 66px 0 40px; isolation: isolate; }
.sec-about::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 72%;
  z-index: -1;
  background: linear-gradient(118deg, transparent 0 58%, #f7f7f9 58% 68%, transparent 68% 80%, #f8f8fa 80% 88%, transparent 88%);
  pointer-events: none;
}

.about-top {
  display: grid;
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
  gap: 28px;
  align-items: start;
}
.about-copy { padding: 4px 0 0 36px; }

.about-title {
  margin-top: 24px;
  font-size: clamp(1.9rem, 3.85vw, 4.1rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fv-ink);
  text-wrap: unset;
  white-space: nowrap;
}
.about-title .en {
  color: var(--fv-red);
  letter-spacing: -0.015em;
  margin-right: 0.12em;
}

.about-text {
  margin-top: 40px;
  font-size: clamp(0.95rem, 1.04vw, 1.1rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--fv-ink-2);
}
.about-text + .about-text { margin-top: 30px; }

/* --- 比較カード --- */
.cmp {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 50px;
}
.cmp-card {
  border-radius: 18px;
  overflow: hidden;
}
.cmp-head {
  margin: 0;
  height: 62px;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fv-ink);
}
.cmp-old .cmp-head { background: #e8ebf0; }
.cmp-new .cmp-head { background: #fbe5e5; color: var(--fv-red); font-size: 28px; }
.cmp-body { padding: 14px 14px 18px; }
.cmp-old .cmp-body { background: #f5f6f8; --arrow: #9aa0ab; --no-bg: #e1e4ea; --no-fg: #5c6170; }
.cmp-new .cmp-body { background: #fdf2f2; --arrow: var(--fv-red); --no-bg: var(--fv-red); --no-fg: #fff; }

.cmp-arrow {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 44px;
  height: 52px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* イラスト */
.cmp-art {
  position: relative;
  height: 196px;
  margin-bottom: 10px;
}
.cmp-art > * { position: absolute; }
.cmp-art img { object-fit: contain; object-position: center bottom; }
.cmp-art .laptop { width: 156px; height: 100px; }
.cmp-bubble {
  padding: 12px 18px;
  background: var(--fv-white);
  border-radius: 14px;
  box-shadow: var(--fv-shadow);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: var(--fv-ink);
}
.cmp-bubble::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 2px;
}
.cmp-art-old .scribble { left: 24%; top: 0; width: 46px; height: 36px; }
.cmp-art-old .man { left: 14%; top: 14px; width: 250px; height: 182px; }
.cmp-art-old .cmp-bubble { right: 5%; top: 12px; }

.cmp-art-new .rays { left: 9%; top: 6px; width: 44px; height: 44px; }
.cmp-art-new .grok { left: 26%; top: 28px; width: 124px; height: 132px; z-index: 1; }
.cmp-art-new .laptop { left: 49%; top: 92px; }
.cmp-art-new .mug { left: 11%; top: 138px; width: 34px; height: 36px; }
.cmp-art-new .bot-blue { left: 8%; top: 68px; width: 60px; height: 58px; }
.cmp-art-new .bot-orange { right: 11%; top: 72px; width: 54px; height: 52px; }
.cmp-art-new .bot-brown { right: 1%; top: 106px; width: 54px; height: 52px; }
.cmp-art-new .bot-green { right: 15%; top: 124px; width: 58px; height: 52px; z-index: 2; }
.cmp-art-new .cmp-bubble { right: 4%; top: 14px; }

/* ステップ */
.cmp-body .steps {
  display: grid;
  gap: 20px;
}
.cmp-body .steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 48px;
  padding: 8px 16px 8px 14px;
  border-radius: 10px;
  background: var(--fv-white);
}
.cmp-body .steps .no {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0.5px 0 0 1px; /* 数字インクを円の光学中心に合わせる */
  border-radius: 50%;
  background: var(--no-bg);
  color: var(--no-fg);
  font-family: var(--fv-font-en);
  font-size: 14px;
  font-weight: 700;
}
.cmp-body .steps .t {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
}
.cmp-body .steps .t small {
  display: block;
  font-size: 13px;
  color: var(--fv-ink-3);
}
.cmp-body .steps li + li::before,
.cmp-body .steps li + li::after {
  content: "";
  position: absolute;
}
.cmp-body .steps li + li::before {
  left: 29px;
  top: -17px;
  width: 3px;
  height: 8px;
  border: 0;
  border-radius: 2px;
  background: var(--arrow);
  transform: translateX(-50%);
}
.cmp-body .steps li + li::after {
  left: 29px;
  top: -10px;
  width: 0;
  height: 0;
  border-left: 5.5px solid transparent;
  border-right: 5.5px solid transparent;
  border-top: 7px solid var(--arrow);
  transform: translateX(-50%);
}

/* --- 主な特徴パネル --- */
.feat-panel {
  margin-top: 30px;
  padding: 30px 44px 36px;
  border-radius: 24px;
  background: #f0f1f4;
}
.feat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.feat-head h3 {
  margin: 0;
  font-size: clamp(1.4rem, 1.95vw, 2.05rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
}
.feat-head h3 .en { letter-spacing: -0.01em; }
.feat-lead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--fv-ink);
}
.feat-lead .line { width: 56px; height: 2px; background: var(--fv-red); }

.feat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.feat-card {
  position: relative;
  padding: 22px 16px 26px;
  border-radius: 16px;
  background: var(--fv-white);
  text-align: center;
}
.feat-no {
  position: absolute;
  left: 22px;
  top: 20px;
  font-family: var(--fv-font-en);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: #6b7280;
}
.feat-art {
  position: relative;
  width: 156px;
  height: 100px;
  margin: 4px auto 0;
}
.feat-art > * { position: absolute; }
.feat-art img { object-fit: contain; }
.feat-card h4 {
  margin: 12px 0 0;
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
  font-feature-settings: "palt";
  white-space: nowrap;
}
.feat-card p {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--fv-ink-2);
}

.feat-art-1 .cloud { left: 8px; top: 12px; width: 98px; height: 64px; }
.feat-art-1 img { left: 76px; top: 44px; width: 62px; height: 60px; }
.feat-art-2 img { left: 8px; top: 34px; width: 72px; height: 66px; }
.feat-art-2 .folder { left: 88px; top: 6px; width: 48px; height: 40px; }
.feat-art-2 .term { left: 92px; top: 54px; width: 60px; height: 42px; }
.feat-art-3 img { left: 22px; top: 32px; width: 80px; height: 68px; }
.feat-art-3 .clock { left: 92px; top: 14px; width: 54px; height: 54px; }
.feat-art-4 img { left: 14px; top: 36px; width: 78px; height: 64px; }
.feat-art-4 .docs { left: 88px; top: 10px; width: 58px; height: 66px; }
.feat-art-5 img { left: 20px; top: 34px; width: 74px; height: 66px; }
.feat-art-5 .shield { left: 94px; top: 12px; width: 50px; height: 58px; }

/* ---------- Responsive ---------- */
@media (max-width: 1440px) {
  .about-copy { padding: 0 24px 0 20px; }
  .feat-panel { padding: 26px 28px 30px; }
  .feat-card { padding: 20px 12px 22px; }
  .feat-card h4 { white-space: normal; }
  .sec-hand { right: 40px; font-size: 22px; }
}

@media (max-width: 1200px) {
  .about-top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .about-copy { padding: 0; }
  .about-title { font-size: clamp(1.9rem, 4.8vw, 3.35rem); }
  .about-text br { display: none; }
  .cmp { max-width: 920px; }
  .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-hand { position: static; transform: none; margin-bottom: 20px; white-space: normal; }
  .sec-hand span { padding-left: 0; }
  .sec-hand .sec-hand-line { display: none; }
}

@media (max-width: 720px) {
  .sec-about { padding: 48px 0 32px; }
  .about-title { white-space: normal; font-size: clamp(1.6rem, 6.9vw, 2.4rem); }
  .cmp { grid-template-columns: 1fr; gap: 40px; }
  .cmp-arrow { top: auto; left: 50%; transform: translate(-50%, -50%) rotate(90deg); }
  .cmp-old { position: relative; }
  .cmp-arrow { position: absolute; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-panel { padding: 22px 16px 24px; border-radius: 18px; }
  .feat-head h3 { font-size: 1.35rem; }
  .feat-lead { font-size: 14px; }
}

@media (max-width: 480px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-body { padding: 12px 10px 14px; }
  .cmp-art { height: 170px; }
  .cmp-art .laptop { width: 130px; height: 84px; }
  .cmp-art-old .man { width: 200px; height: 150px; top: 20px; }
  .cmp-art-new .grok { width: 104px; height: 110px; top: 44px; }
  .cmp-bubble { font-size: 13px; padding: 10px 14px; }
  .cmp-body .steps li { gap: 14px; }
  .cmp-body .steps .t { font-size: 14px; }
  .sec-num .n { font-size: 30px; }
  .sec-num .label { margin-left: 8px; font-size: 11px; }
}

/* ---------- 03 任せられる業務（USE CASES） ---------- */
.sec-uc { padding: 66px 0 56px; isolation: isolate; }
.sec-uc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  z-index: -1;
  background: linear-gradient(118deg, transparent 0 56%, #f7f7f9 56% 66%, transparent 66% 78%, #f8f8fa 78% 86%, transparent 86%);
  pointer-events: none;
}

.uc-top {
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  gap: 20px;
  align-items: start;
}
.uc-copy { padding: 4px 0 0 20px; }
.uc-h2 {
  margin-top: 22px;
  font-size: clamp(2.05rem, 4.35vw, 4.6rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fv-ink);
  text-wrap: unset;
  white-space: nowrap;
}
.uc-h2 em { font-style: normal; color: var(--fv-red); }
.uc-lead {
  margin-top: 26px;
  font-size: clamp(0.95rem, 1.14vw, 1.2rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--fv-ink-2);
}

/* --- 右上イラスト（キャンバス 780 x 390。1cqw = 7.8単位） --- */
.uc-hero {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  aspect-ratio: 780 / 390;
  user-select: none;
}
.uc-hero > * { position: absolute; }
.uc-hero img { object-fit: contain; object-position: center bottom; }
.uc-lines { inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.uc-lines .dots { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.5 7; }
.uc-hand {
  left: 71cqw;
  top: 1cqw;
  z-index: 2;
  margin: 0;
  font-family: var(--fv-font-hand);
  font-size: 3.2cqw;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--fv-ink);
  white-space: nowrap;
  transform: rotate(-10deg);
  transform-origin: left top;
}
.uc-hand span { display: inline-block; padding-left: 3cqw; }
.uc-hand .hand-line {
  position: absolute;
  left: 3.4cqw;
  right: -0.6cqw;
  bottom: -0.9cqw;
  height: 1.5cqw;
  fill: none;
  stroke: var(--fv-red);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.uc-hero .floor { left: 24.4cqw; top: 46.8cqw; width: 33cqw; height: 3.2cqw; border-radius: 50%; background: #e8e9ed; }
.uc-hero .grok { left: 29.5cqw; top: 26.5cqw; width: 21.8cqw; height: 22cqw; z-index: 2; }
.uc-hero .laptop { left: 38.5cqw; top: 37.2cqw; width: 20.5cqw; height: 13.2cqw; z-index: 3; }
.uc-hero .bot { z-index: 2; }
.uc-hero .b-blue   { left: 10.3cqw; top: 18.6cqw; width: 11.5cqw; height: 9.2cqw; }
.uc-hero .b-green  { left: 32.7cqw; top: 9.6cqw;  width: 10.9cqw; height: 9cqw; }
.uc-hero .b-orange { left: 55.8cqw; top: 19.9cqw; width: 10.9cqw; height: 9.6cqw; }
.uc-hero .b-gray   { left: 5.1cqw;  top: 37.8cqw; width: 10.3cqw; height: 9cqw; }
.uc-hero .b-brown  { left: 68cqw;   top: 35.9cqw; width: 11.5cqw; height: 10.3cqw; }
.uc-tag {
  z-index: 3;
  padding: 0.9cqw 1.9cqw;
  background: var(--fv-white);
  border-radius: 1.4cqw;
  box-shadow: var(--fv-shadow);
  font-size: 2.15cqw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--fv-ink);
}
.uc-tag::after {
  content: "";
  position: absolute;
  left: 1.6cqw;
  bottom: -0.6cqw;
  width: 1.4cqw;
  height: 1.4cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.2cqw;
}
.uc-tag.t-blue   { left: 8.3cqw;  top: 12.8cqw; color: #2f7cf6; }
.uc-tag.t-green  { left: 42.3cqw; top: 5.1cqw;  color: #1f9e55; }
.uc-tag.t-orange { left: 62.8cqw; top: 13.5cqw; color: #e56f16; }
.uc-tag.t-gray   { left: 0.6cqw;  top: 32cqw; }
.uc-tag.t-brown  { left: 77.6cqw; top: 30.1cqw; color: #8a5a34; }
.uc-hero .ico { z-index: 2; }
.uc-hero .i-search   { left: 19.9cqw; top: 11.5cqw; width: 7.7cqw; height: 7.7cqw; }
.uc-hero .i-sheet    { left: 44.9cqw; top: 14.1cqw; width: 6.4cqw; height: 6.4cqw; }
.uc-hero .i-page     { left: 67.3cqw; top: 20.5cqw; width: 7.7cqw; height: 10.3cqw; }
.uc-hero .i-shield   { left: 14.7cqw; top: 35.3cqw; width: 7cqw;   height: 7.7cqw; }
.uc-hero .i-envelope { left: 80.1cqw; top: 38.5cqw; width: 7.7cqw; height: 5.5cqw; }

/* --- タブ --- */
.uc-tabs {
  display: flex;
  gap: 14px;
  margin-top: 24px;
}
.uc-tab {
  position: relative;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 78px;
  padding: 0 28px;
  border-radius: 14px;
  background: #f0f1f4;
  font-family: var(--fv-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fv-ink);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.uc-tab:hover { background: #e6e8ee; }
.uc-tab .ti { width: 26px; height: 26px; fill: currentColor; flex: none; }
.uc-tab[aria-selected="true"] { background: var(--fv-red); color: var(--fv-white); }
.uc-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  border: 12px solid transparent;
  border-bottom: 0;
  border-top-color: var(--fv-red);
  transform: translateX(-50%);
}

/* --- パネル --- */
.uc-panel {
  display: grid;
  grid-template-columns: minmax(0, 25fr) minmax(0, 33fr) minmax(0, 22fr) minmax(0, 20fr);
  gap: 16px;
  margin-top: 16px;
  padding: 33px 33px 35px;
  border-radius: 20px;
  background: #fdf3f3;
}
.uc-panel[hidden] { display: none; }
.uc-intro { padding-top: 14px; }
.uc-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.uc-kicker .n { font-family: var(--fv-font-en); font-size: 24px; font-weight: 700; line-height: 1; color: var(--fv-red); }
.uc-kicker .sep { width: 1px; height: 18px; background: #c9ccd3; }
.uc-kicker .label { font-family: var(--fv-font-en); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fv-muted); }
.uc-title {
  margin: 22px 0 0;
  font-size: clamp(1.5rem, 2.35vw, 2.5rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fv-ink);
  text-wrap: unset;
}
.uc-text {
  margin-top: 22px;
  font-size: clamp(0.9rem, 1.02vw, 1.05rem);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--fv-ink-2);
}
.uc-btn {
  height: 60px;
  margin-top: 34px;
  padding: 0 30px;
  font-size: clamp(0.95rem, 1.02vw, 1.0625rem);
  gap: 12px;
}

/* シーン（キャンバス 460 x 370。1cqw = 4.6単位） */
.uc-scene {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 460 / 370;
  user-select: none;
}
.uc-scene > * { position: absolute; }
.uc-scene img { object-fit: contain; object-position: center bottom; }
.uc-scene .c { border-radius: 50%; z-index: 0; }
.uc-scene .c1 { left: 1cqw;  top: 14cqw; width: 30cqw; height: 30cqw; background: #f7d2d2; }
.uc-scene .c2 { left: 47cqw; top: 10cqw; width: 36cqw; height: 36cqw; background: #f9dcdc; }
.uc-scene .c3 { left: 64cqw; top: 56cqw; width: 32cqw; height: 32cqw; background: #fbe4e4; }
.uc-scene .person { left: -2cqw; top: 14cqw; width: 52cqw; height: 54cqw; z-index: 1; }
.uc-bubble {
  left: 33cqw;
  top: 4cqw;
  z-index: 3;
  padding: 2.2cqw 3cqw;
  background: var(--fv-white);
  border-radius: 2.6cqw;
  box-shadow: var(--fv-shadow);
  font-size: 3.2cqw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: var(--fv-ink);
}
.uc-bubble::after {
  content: "";
  position: absolute;
  left: 3cqw;
  bottom: -1.4cqw;
  width: 3cqw;
  height: 3cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.4cqw;
}
.uc-scene .rays { left: 36cqw; top: 41cqw; width: 9cqw; height: 9cqw; z-index: 2; }
.uc-scene .grok { left: 43cqw; top: 48cqw; width: 22cqw; height: 24cqw; z-index: 2; }
.uc-scene .mini {
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 1.6cqw;
  row-gap: 0.9cqw;
  align-items: center;
  width: 30cqw;
  padding: 2cqw 2.4cqw;
  background: var(--fv-white);
  border-radius: 1.8cqw;
  box-shadow: var(--fv-shadow);
}
.uc-scene .mini .bar {
  grid-column: 1 / -1;
  height: 1.4cqw;
  margin: -0.6cqw 0 0.2cqw;
  border-radius: 1cqw;
  background:
    radial-gradient(circle at 0.7cqw 50%, #ff5f57 0 0.45cqw, transparent 0.55cqw),
    radial-gradient(circle at 2.2cqw 50%, #febc2e 0 0.45cqw, transparent 0.55cqw),
    radial-gradient(circle at 3.7cqw 50%, #28c840 0 0.45cqw, transparent 0.55cqw);
}
.uc-scene .mini .mi { grid-row: span 3; width: 6.2cqw; height: 6.2cqw; }
.uc-scene .mini .bar + .mi { grid-row: span 3; }
.uc-scene .mini b { font-size: 2.5cqw; font-weight: 700; line-height: 1.2; color: var(--fv-ink); white-space: nowrap; font-feature-settings: "palt"; }
.uc-scene .mini i { display: block; height: 0.9cqw; border-radius: 0.5cqw; background: var(--fv-ph); }
.uc-scene .mini i:last-child { width: 70%; }
.uc-scene .m1 { left: 58cqw; top: 27cqw; }
.uc-scene .m2 { left: 69cqw; top: 49cqw; width: 26cqw; }
.uc-scene .m3 { left: 42cqw; top: 74cqw; }

/* 右のカード */
.uc-card {
  padding: 26px 24px 24px;
  border-radius: 16px;
  background: var(--fv-white);
}
.uc-card h4 {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
}
.uc-checks {
  display: grid;
  gap: 13px;
  margin-top: 20px;
}
.uc-checks li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 26px;
  padding-left: 40px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--fv-ink);
}
.uc-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fbd9d9;
  transform: translateY(-50%);
}
.uc-checks li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: calc(50% - 3px);
  width: 8px;
  height: 4px;
  border-left: 2.5px solid var(--fv-red);
  border-bottom: 2.5px solid var(--fv-red);
  transform: rotate(-45deg);
}
.uc-results {
  display: grid;
  gap: 24px;
  margin-top: 22px;
}
.uc-results li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--fv-ink);
}
.uc-results .ri { width: 30px; height: 30px; flex: none; color: var(--fv-red); fill: currentColor; }

/* ---------- Responsive (03) ---------- */
@media (max-width: 1440px) {
  .uc-copy { padding-left: 8px; }
  .uc-tab { padding: 0 16px; font-size: 16px; height: 68px; gap: 9px; }
  .uc-tab .ti { width: 22px; height: 22px; }
  .uc-panel { padding: 26px 24px 28px; gap: 14px; }
  .uc-card { padding: 22px 18px 20px; }
  .uc-checks li, .uc-results li { font-size: 14px; }
}
@media (min-width: 1201px) {
  .sec-uc { padding-top: 16px; padding-bottom: 16px; }
  .uc-top { align-items: center; }
  .uc-copy { padding-top: 0; }
  .uc-h2 {
    margin-top: 12px;
    font-size: clamp(2rem, 3.2vw, 3.5rem);
    line-height: 1.18;
  }
  .uc-lead {
    margin-top: 12px;
    font-size: clamp(0.875rem, 0.95vw, 1rem);
    line-height: 1.55;
  }
  .uc-hero { max-width: 540px; }
  .uc-tabs { gap: 10px; margin-top: 10px; }
  .uc-tab {
    height: 52px;
    padding: 0 16px;
    gap: 8px;
    font-size: 15px;
    border-radius: 11px;
  }
  .uc-tab .ti { width: 21px; height: 21px; }
  .uc-tab[aria-selected="true"]::after {
    bottom: -8px;
    border-width: 9px;
  }
  .uc-panel {
    gap: 12px;
    margin-top: 10px;
    padding: 14px 18px 16px;
    border-radius: 16px;
  }
  .uc-intro { padding-top: 0; }
  .uc-kicker { gap: 9px; }
  .uc-kicker .n { font-size: 20px; }
  .uc-kicker .label { font-size: 11px; }
  .uc-title {
    margin-top: 12px;
    font-size: clamp(1.35rem, 1.9vw, 2rem);
    line-height: 1.2;
  }
  .uc-text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
  }
  .uc-btn {
    height: 44px;
    margin-top: 14px;
    padding: 0 18px;
    font-size: 14px;
  }
  .uc-scene {
    width: min(100%, 280px);
    margin: 0 auto;
    transform: translateY(-6px);
  }
  .uc-card { padding: 16px 14px; }
  .uc-card h4 { font-size: 15px; }
  .uc-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin-top: 12px;
  }
  .uc-checks li {
    min-height: 22px;
    padding-left: 27px;
    font-size: 12.5px;
    line-height: 1.35;
  }
  .uc-checks li::before { width: 20px; height: 20px; }
  .uc-checks li::after {
    left: 7px;
    top: calc(50% - 2px);
    width: 7px;
    height: 3px;
    border-width: 0 0 2px 2px;
  }
  .uc-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
  }
  .uc-results li {
    gap: 8px;
    font-size: 13px;
    line-height: 1.35;
  }
  .uc-results .ri { width: 24px; height: 24px; }
}
@media (max-width: 1200px) {
  .uc-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .uc-copy { padding-left: 0; }
  .uc-h2 { font-size: clamp(1.9rem, 5.2vw, 3.7rem); }
  .uc-lead br { display: none; }
  .uc-hero { margin: 0 auto; }
  .uc-tabs { flex-wrap: wrap; }
  .uc-tab { flex: 1 1 30%; }
  .uc-tab[aria-selected="true"]::after { display: none; }
  .uc-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uc-intro { grid-column: 1 / -1; padding-top: 0; }
  .uc-text br { display: none; }
  .uc-scene { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 720px) {
  .sec-uc { padding: 48px 0 40px; }
  .uc-h2 { white-space: normal; font-size: clamp(1.75rem, 7.8vw, 2.8rem); }
  .uc-tabs { gap: 8px; }
  .uc-tab { flex: 1 1 45%; height: 56px; font-size: 14px; padding: 0 10px; border-radius: 10px; }
  .uc-panel { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 22px; border-radius: 16px; }
  .uc-btn { width: 100%; }
  .uc-hand { font-size: 3cqw; }
}

/* ---------- 04 世界での導入（GLOBAL ADOPTION） ---------- */
.sec-adopt { padding: 60px 0 50px; isolation: isolate; }
.sec-adopt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 92% -4%, #fdf1e6 0 190px, transparent 191px),
    radial-gradient(circle at 99% 10%, #fdf3ea 0 120px, transparent 121px);
  pointer-events: none;
}

.ad-top {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: 24px;
  align-items: start;
}
.ad-copy { padding: 0 0 0 16px; }
.ad-h2 {
  margin-top: 22px;
  font-size: clamp(1.8rem, 3.45vw, 3.7rem);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--fv-ink);
  text-wrap: unset;
  white-space: nowrap;
}
.ad-h2 em { font-style: normal; color: var(--fv-red); }
.ad-lead {
  margin-top: 18px;
  font-size: clamp(0.92rem, 1.12vw, 1.2rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--fv-ink-2);
}

/* --- 右上イラスト（キャンバス 560 x 330。1cqw = 5.6単位） --- */
.ad-hero {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  aspect-ratio: 560 / 330;
  user-select: none;
}
.ad-hero > * { position: absolute; }
.ad-hero img { object-fit: contain; object-position: center bottom; }
.ad-hero .orbits { inset: 0; width: 100%; height: 100%; }
.ad-hero .globe { left: 21.4cqw; top: 5.4cqw; width: 50cqw; height: 50cqw; }
.ad-hero .gb { left: 34cqw; top: 24cqw; width: 21.4cqw; height: 21.4cqw; z-index: 2; filter: drop-shadow(0 6px 14px rgba(27,28,32,.18)); }
.ad-hero .marks { left: 52.5cqw; top: 17.5cqw; width: 6cqw; height: 6cqw; z-index: 3; }
.ad-hero .bot { z-index: 2; }
.ad-hero .b-blue   { left: 17.9cqw; top: 15.2cqw; width: 12.5cqw; height: 9.8cqw; }
.ad-hero .b-orange { left: 14.3cqw; top: 39.3cqw; width: 12.5cqw; height: 10.7cqw; }
.ad-hero .b-green  { left: 63.4cqw; top: 18.7cqw; width: 12.5cqw; height: 9.8cqw; }
.ad-hero .b-black  { left: 60.7cqw; top: 42cqw;   width: 13.4cqw; height: 9.8cqw; }
.ad-tag {
  z-index: 3;
  padding: 1.3cqw 2.2cqw;
  background: var(--fv-white);
  border-radius: 1.8cqw;
  box-shadow: var(--fv-shadow);
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  color: var(--fv-ink);
}
.ad-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.7cqw;
  width: 1.6cqw;
  height: 1.6cqw;
  margin-left: -0.8cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.2cqw;
}
.ad-tag.t-blue   { left: 7.1cqw;  top: 2.7cqw; }
.ad-tag.t-orange { left: 0;       top: 27.7cqw; }
.ad-tag.t-right  { left: 78.6cqw; top: 30.4cqw; }
.ad-tag.t-right::after { left: 0.6cqw; top: 50%; bottom: auto; margin: -0.8cqw 0 0 0; }
.ad-hand {
  left: 66cqw;
  top: -1cqw;
  z-index: 3;
  margin: 0;
  padding: 1.6cqw 3cqw 1.9cqw;
  background: #fde8e8;
  border-radius: 2.4cqw;
  font-family: var(--fv-font-hand);
  font-size: 2.9cqw;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--fv-ink);
  white-space: nowrap;
  transform: rotate(-8deg);
  transform-origin: left top;
}
.ad-hand span { display: inline-block; padding-left: 1cqw; }
.ad-hand::after {
  content: "";
  position: absolute;
  left: 3cqw;
  bottom: -1.2cqw;
  width: 2.4cqw;
  height: 2.4cqw;
  background: #fde8e8;
  transform: rotate(45deg);
  border-radius: 0.3cqw;
}
.ad-hand .hand-line {
  position: absolute;
  left: 4cqw;
  right: 2cqw;
  bottom: 0.4cqw;
  height: 1.4cqw;
  fill: none;
  stroke: var(--fv-red);
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* --- 導入企業 / 部門 --- */
.ad-mid {
  display: grid;
  grid-template-columns: minmax(0, 66fr) minmax(0, 34fr);
  gap: 16px;
  margin-top: 30px;
  align-items: end;
}
.ad-h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fv-ink);
}
.ad-h3 small { font-size: 14px; font-weight: 500; color: var(--fv-ink-3); }
.ad-h3 .bi { width: 26px; height: 26px; color: var(--fv-red); }
.co-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 12px;
}
.co-card {
  padding: 26px 22px 24px;
  border-radius: 16px;
  background: var(--fv-white);
  box-shadow: 0 6px 22px rgba(27, 28, 32, 0.06);
}
.co-head { display: flex; align-items: center; gap: 16px; }
.co-logo { width: 60px; height: 60px; flex: none; }
.co-head b { font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: var(--fv-ink); }
.co-cat {
  margin: 18px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fv-line);
  font-size: 15px;
  font-weight: 500;
  color: var(--fv-ink-2);
}
.co-desc {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--fv-ink-2);
}
.ad-depts {
  padding: 22px 20px 20px;
  border-radius: 16px;
  background: #f2f4f8;
}
.dept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.dept-grid li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px 0 42px;
  border-radius: 8px;
  background: #fffdf7;
  border: 1px solid #e9e4d6;
  box-shadow: 0 2px 5px rgba(27, 28, 32, 0.07), 0 8px 18px rgba(27, 28, 32, 0.05);
  color: var(--fv-ink);
}
.dept-grid li:nth-child(1) { transform: rotate(-1.1deg); }
.dept-grid li:nth-child(2) { transform: rotate(0.9deg); }
.dept-grid li:nth-child(3) { transform: rotate(-0.5deg); }
.dept-grid li:nth-child(4) { transform: rotate(1.2deg); }
.dept-grid li:nth-child(5) { transform: rotate(-0.7deg); }
.dept-grid .hole {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #f2f4f8;
  box-shadow: inset 0 1.5px 2.5px rgba(27, 28, 32, 0.22), 0 0 0 3px #fff;
}
.dept-grid .ringclip {
  position: absolute;
  left: 2px;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3.5px solid #c8cdd6;
  border-right-color: #aab0bb;
  border-bottom-color: #dde1e7;
  transform: translate(-40%, -50%) rotate(-20deg);
  pointer-events: none;
}
.dept-grid b {
  font-family: var(--fv-font-hand);
  font-size: 19px;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.1;
  padding: 0 3px 2px;
  background: linear-gradient(transparent 68%, var(--marker) 68%, var(--marker) 94%, transparent 94%);
}
.dept-grid .m-red { --marker: rgba(228, 38, 43, 0.28); }
.dept-grid .m-blue { --marker: rgba(47, 124, 246, 0.26); }
.dept-grid .m-orange { --marker: rgba(244, 121, 31, 0.30); }
.dept-grid .m-green { --marker: rgba(35, 165, 102, 0.28); }
.dept-grid .m-ink { --marker: rgba(26, 33, 48, 0.18); }
.dept-grid .wide { grid-column: 1 / -1; }
.dept-grid .di { width: 25px; height: 25px; flex: none; fill: currentColor; }
.c-red { color: var(--fv-red); }
.c-blue { color: var(--fv-blue); }
.c-orange { color: #f4791f; }
.c-green { color: #23a566; }
.c-ink { color: var(--fv-ink); }

/* --- xAI公開事例 --- */
.ad-case {
  margin-top: 26px;
  padding: 22px 30px 30px;
  border-radius: 20px;
  background: #fdf1f1;
  border: 1px solid #f6dada;
}
.case-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.case-head .ci { width: 26px; height: 26px; color: var(--fv-red); fill: none; stroke: currentColor; }
.case-head b { font-size: 18px; font-weight: 700; color: var(--fv-ink); }
.case-head .sep { width: 2px; height: 18px; margin: 0 10px; background: var(--fv-red); }
.case-head small { font-size: 13px; font-weight: 500; color: var(--fv-ink-3); }
.case-body {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: 24px;
  align-items: center;
  margin-top: 22px;
}
.case-copy h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 2.3rem);
  font-weight: 900;
  line-height: 1.3;
  color: var(--fv-ink);
  text-wrap: unset;
}
.case-copy h3 em { font-style: normal; color: var(--fv-red); }
.case-copy p {
  margin: 16px 0 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--fv-ink-2);
}
.case-flow {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.flow-inputs {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--fv-white);
  box-shadow: 0 6px 20px rgba(27, 28, 32, 0.05);
}
.flow-inputs span {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 20px 0 14px;
  border-radius: 10px;
  background: #f4f5f7;
  font-size: 15px;
  font-weight: 700;
  color: var(--fv-ink);
  white-space: nowrap;
}
.flow-inputs svg { width: 26px; height: 26px; flex: none; }
.flow-arrow { width: 34px; height: 22px; flex: none; }
.flow-step { text-align: center; }
.flow-art { position: relative; width: 170px; height: 112px; margin: 0 auto; }
.flow-art > * { position: absolute; }
.flow-art img { object-fit: contain; object-position: center bottom; }
.bot-art .gb { left: 45px; top: 30px; width: 80px; height: 80px; z-index: 2; }
.bot-art .bulb { left: 92px; top: -6px; width: 34px; height: 34px; z-index: 3; }
.bot-art .sb-blue { left: 34px; top: 8px; width: 30px; height: 26px; }
.bot-art .sb-orange { left: 2px; top: 44px; width: 36px; height: 32px; }
.bot-art .sb-green { left: 128px; top: 40px; width: 32px; height: 28px; }
.man-art img { left: 4px; top: 0; width: 160px; height: 112px; }
.man-art .marks { left: 128px; top: 8px; width: 28px; height: 28px; }
.flow-label {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 18px;
  border-radius: 10px;
  background: var(--fv-white);
  box-shadow: 0 4px 14px rgba(27, 28, 32, 0.06);
  font-size: 16px;
  font-weight: 700;
  color: var(--fv-ink);
  white-space: nowrap;
}
.flow-step small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--fv-ink-3);
}
.flow-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 18px;
  border-radius: 14px;
  background: #fbe0e0;
}
.flow-result .ri { width: 36px; height: 36px; flex: none; }
.flow-result b {
  display: block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--fv-ink);
  white-space: nowrap;
}
.flow-result b em { font-style: normal; color: var(--fv-red); }
.flow-result small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--fv-ink-3); }

/* ---------- Responsive (04) ---------- */
@media (max-width: 1440px) {
  .ad-copy { padding-left: 4px; }
  .co-card { padding: 22px 18px 20px; }
  .co-head b { font-size: 22px; }
  .co-logo { width: 50px; height: 50px; }
  .flow-art { width: 150px; }
  .man-art img { width: 142px; }
  .flow-result b { font-size: 18px; }
  .flow-inputs span { height: 42px; font-size: 14px; }
}
@media (max-width: 1200px) {
  .ad-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ad-copy { padding-left: 0; }
  .ad-h2 { font-size: clamp(1.7rem, 4.25vw, 3rem); }
  .ad-lead br { display: none; }
  .ad-hero { margin: 0 auto; }
  .ad-mid { grid-template-columns: minmax(0, 1fr); }
  .case-body { grid-template-columns: minmax(0, 1fr); }
  .case-copy p br { display: none; }
  .case-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow-arrow { display: none; }
  .flow-inputs { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-result { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 720px) {
  .sec-adopt { padding: 48px 0 36px; }
  .ad-h2 { white-space: normal; font-size: clamp(1.5rem, 6.5vw, 2.25rem); }
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-desc br { display: none; }
  .dept-grid { grid-template-columns: minmax(0, 1fr); }
  .dept-grid .wide { grid-column: auto; }
  .ad-case { padding: 18px 16px 22px; border-radius: 16px; }
  .case-flow { grid-template-columns: minmax(0, 1fr); }
  .flow-inputs { grid-template-columns: minmax(0, 1fr); }
  .flow-result b { white-space: normal; }
}

/* ---------- 05 向いている企業（IDEAL FOR YOUR COMPANY） ---------- */
.sec-fit { padding: 62px 0 52px; isolation: isolate; }

.fit-top {
  display: grid;
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
  gap: 0;
  align-items: start;
}
.fit-copy { padding: 0 0 0 16px; }

.fit-h2 {
  margin-top: 20px;
  font-size: clamp(1.85rem, 4.25vw, 4.1rem);
  font-weight: 900;
  line-height: 1.17;
  letter-spacing: -0.02em;
  color: var(--fv-ink);
  text-wrap: unset;
  white-space: nowrap;
}
.fit-h2 .en { color: var(--fv-ink); letter-spacing: -0.02em; }
.fit-h2 em { font-style: normal; color: var(--fv-red); }

.fit-lead {
  margin-top: 24px;
  font-size: clamp(0.92rem, 1.24vw, 1.19rem);
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: 0;
  color: var(--fv-ink-2);
}

/* --- 右上イラスト（キャンバス 900 x 420。1cqw = 9px相当） --- */
.fit-hero {
  position: relative;
  container-type: inline-size;
  width: auto;
  margin-right: -44px;
  margin-top: -8px;
  aspect-ratio: 900 / 420;
  user-select: none;
}
.fit-hero > * { position: absolute; }
.fit-hero img { object-fit: contain; }
.fit-scene { inset: 0; width: 100%; height: 100%; }

.fit-scene .fit-city rect,
.fit-scene .fit-city path { fill: #dee6f1; }
.fit-scene .fit-win rect { fill: #fbfcfe; }
.fit-scene .fit-tree path { fill: #a9c4a9; }
.fit-scene .fit-spark path { fill: none; stroke: #f5a623; stroke-width: 8; stroke-linecap: round; }
.fit-scene .fit-limb rect { fill: #232c3a; }
.fit-scene .fit-swoosh { fill: none; stroke: var(--fv-red); stroke-width: 3.6; stroke-linecap: round; }

.fit-scene .slab rect { fill: #dfe5f0; }
.fit-scene .slab .top { fill: #eef1f7; }
.fit-scene .s-a rect { fill: #e9edf4; }
.fit-scene .s-a .top { fill: #f4f6fa; }
.fit-scene .s-b rect { fill: #eceff6; }
.fit-scene .s-b .top { fill: #f6f8fb; }
.fit-scene .s-c rect { fill: #eceff6; }
.fit-scene .s-c .top { fill: #f6f8fb; }
.fit-scene .s-d rect { fill: #d8dfec; }
.fit-scene .s-d .top { fill: #e6eaf3; }
.fit-scene .s-e rect { fill: #e2e7f0; }
.fit-scene .s-e .top { fill: #f0f3f8; }
.fit-scene .s-f rect { fill: #dde3ee; }
.fit-scene .s-f .top { fill: #eaeef5; }
.fit-scene .p-pink { fill: #fbdde3; }
.fit-scene .p-pink-t { fill: #fdeff2; }
.fit-scene .p-red { fill: #f4586e; }
.fit-scene .p-red-t { fill: #f87a8c; }

.fit-hero .fit-bot { z-index: 3; }
.fit-hero .b-brown  { left: 8cqw;    top: 35.6cqw; width: 7.7cqw; }
.fit-hero .b-orange { left: 17.8cqw; top: 27.6cqw; width: 8.7cqw; }
.fit-hero .b-blue   { left: 26.9cqw; top: 21cqw;   width: 8.2cqw; }
.fit-hero .b-grok   { left: 36.5cqw; top: 8.3cqw;  width: 14cqw; z-index: 4; }
.fit-hero .b-green  { left: 49.5cqw; top: 13.2cqw; width: 8cqw; z-index: 2; }

.fit-hand {
  z-index: 5;
  margin: 0;
  font-family: var(--fv-font-hand);
  line-height: 1.42;
  letter-spacing: 0.02em;
  color: var(--fv-ink);
  white-space: nowrap;
  transform-origin: left top;
}
.fit-hand span { display: inline-block; }
.fit-hand-1 {
  left: 1.7cqw;
  top: 3.4cqw;
  font-size: 3.25cqw;
  transform: rotate(-5deg);
}
.fit-hand-1 span { padding-left: 0.6cqw; }
.fit-hand-2 {
  left: 76.7cqw;
  top: 24.2cqw;
  font-size: 1.95cqw;
  transform: rotate(-7deg);
}
.fit-hand-2 span { padding-left: 1.2cqw; }

.fit-balloon {
  left: 58.5cqw;
  top: 10.2cqw;
  z-index: 5;
  margin: 0;
  padding: 1.5cqw 2.2cqw 1.7cqw;
  background: var(--fv-white);
  border-radius: 1.6cqw;
  box-shadow: var(--fv-shadow);
  font-size: 1.82cqw;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--fv-ink);
}
.fit-balloon::after {
  content: "";
  position: absolute;
  left: -0.6cqw;
  top: 42%;
  width: 1.7cqw;
  height: 1.7cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.25cqw;
}

/* --- 5枚のカード --- */
.fit-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.fit-card {
  display: flex;
  flex-direction: column;
  padding: 15px 18px 18px;
  border-radius: 16px;
  background: var(--fv-white);
  box-shadow: 0 8px 26px rgba(27, 28, 32, 0.07), 0 1px 3px rgba(27, 28, 32, 0.04);
}
.fit-cards.fit-cards--reveal .fit-card {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
}
.fit-cards.fit-cards--reveal.is-visible .fit-card {
  animation: fit-card-enter 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fit-cards.fit-cards--reveal.is-visible .fit-card:nth-child(2) { animation-delay: 0.11s; }
.fit-cards.fit-cards--reveal.is-visible .fit-card:nth-child(3) { animation-delay: 0.22s; }
.fit-cards.fit-cards--reveal.is-visible .fit-card:nth-child(4) { animation-delay: 0.33s; }
.fit-cards.fit-cards--reveal.is-visible .fit-card:nth-child(5) { animation-delay: 0.44s; }

@keyframes fit-card-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fit-cards.fit-cards--reveal.is-visible .fit-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.fc-no {
  margin: 0;
  font-size: clamp(21px, 1.95vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fv-red);
}
.fc-title {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-feature-settings: "palt";
  color: var(--fv-ink);
}

/* カード内イラスト（キャンバス幅=カード内幅。1cqw = 内幅/100） */
.fc-art {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 250 / 163;
  margin-top: 12px;
  overflow: hidden;
}
.fc-art > * { position: absolute; }
.fc-art img { object-fit: contain; object-position: center bottom; }

.fc-art .tool {
  display: grid;
  place-items: center;
  background: var(--fv-white);
  border-radius: 5.5cqw;
  box-shadow: 0 4px 14px rgba(27, 28, 32, 0.12);
  z-index: 3;
}
.fc-art .tool::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: -1.4cqw;
  width: 3cqw;
  height: 3cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.5cqw;
}
.fc-art .tool svg { width: 62%; height: 62%; }

.art-1 .t-slack  { left: 3.5cqw;  top: 7cqw;    width: 20cqw;   height: 18.5cqw; }
.art-1 .t-drive  { left: 38cqw;   top: 2cqw;    width: 19.5cqw; height: 18.5cqw; }
.art-1 .t-notion { left: 68cqw;   top: 9cqw;    width: 19cqw;   height: 17.5cqw; }
.art-1 .t-gmail  { left: 51cqw;   top: 24cqw;   width: 18cqw;   height: 16.5cqw; }
.art-1 .ghost-bubble {
  left: 70cqw;
  top: 35cqw;
  width: 14.5cqw;
  height: 11.5cqw;
  border-radius: 3cqw;
  background: #dfe3ea;
  z-index: 2;
}
.art-1 .ghost-bubble::after {
  content: "";
  position: absolute;
  left: 0.6cqw;
  bottom: 1.6cqw;
  width: 4cqw;
  height: 4cqw;
  background: #dfe3ea;
  transform: rotate(45deg);
  border-radius: 0.5cqw;
}
.art-1 .p-man { left: 8cqw; top: 21cqw; width: 32cqw; z-index: 4; }
.art-1 .p-laptop { left: 38cqw; top: 44cqw; width: 34cqw; height: 22cqw; z-index: 5; }
.art-1 .desk { left: 1cqw; top: 65.5cqw; width: 78cqw; height: 0.9cqw; border-radius: 1cqw; background: #ccd2dd; z-index: 1; }

.art-2 .ui { z-index: 2; }
.art-2 .u-doc {
  left: 0cqw; top: 13cqw; width: 22cqw; height: 28cqw;
  display: grid; align-content: center; gap: 2.4cqw;
  padding: 0 3.6cqw;
  border-radius: 1.6cqw;
  background: var(--fv-white);
  box-shadow: 0 3px 12px rgba(27, 28, 32, 0.10);
}
.art-2 .u-doc i { display: block; height: 1.5cqw; border-radius: 0.8cqw; background: #d5dae3; }
.art-2 .u-doc i:nth-child(2) { width: 78%; }
.art-2 .u-doc i:nth-child(4) { width: 60%; }
.art-2 .u-chart {
  left: 41cqw; top: 0cqw; width: 25cqw; height: 26cqw;
  display: grid; place-items: center;
  border-radius: 1.6cqw;
  background: #e3edfd;
}
.art-2 .u-chart svg { width: 74%; height: 74%; }
.art-2 .u-search { left: 70cqw; top: 4cqw; width: 22cqw; height: 22cqw; z-index: 3; }
.art-2 .u-blue {
  left: 66cqw; top: 26cqw; width: 24cqw; height: 27cqw;
  display: grid; align-content: start; gap: 2.2cqw;
  padding: 3cqw;
  border-radius: 1.6cqw;
  background: #d6e6fb;
}
.art-2 .u-blue i { display: block; height: 1.6cqw; border-radius: 0.8cqw; background: #fff; }
.art-2 .u-blue i.hd { height: 5cqw; border-radius: 1cqw; background: #2f7cf6; margin-bottom: 0.6cqw; }
.art-2 .u-blue i:nth-child(3) { width: 72%; }
.art-2 .p-think { left: 17cqw; top: 20cqw; width: 51cqw; z-index: 4; }

.art-3 .p-think { left: 23cqw; top: 5cqw;  width: 51cqw; z-index: 2; }
.art-3 .p-man   { left: 3cqw;  top: 26cqw; width: 35cqw; z-index: 3; }
.art-3 .p-woman { left: 47cqw; top: 26cqw; width: 50cqw; z-index: 4; }
.art-3 .sweat { z-index: 5; }
.art-3 .s1 { left: 6cqw;  top: 21cqw; width: 8.5cqw; height: 11cqw; }
.art-3 .s2 { left: 71cqw; top: 12cqw; width: 8.5cqw; height: 11cqw; }

.art-4 .rays { left: 6cqw; top: 21cqw; width: 24cqw; height: 24cqw; z-index: 3; }
.art-4 .gear { left: 62cqw; top: 8cqw; width: 26cqw; height: 26cqw; z-index: 2; }
.art-4 .laptop { left: 55cqw; top: 34cqw; width: 40cqw; height: 26cqw; z-index: 2; }
.art-4 .b-orange { left: 20cqw; top: 18cqw; width: 47cqw; z-index: 4; }

.art-5 .p-suit { left: 10cqw; top: 5cqw; width: 68cqw; z-index: 2; }
.art-5 .ok-bubble {
  left: 60cqw; top: 14cqw; width: 32cqw; height: 25cqw;
  display: grid; place-items: center;
  border-radius: 3cqw;
  background: var(--fv-white);
  box-shadow: 0 4px 14px rgba(27, 28, 32, 0.10);
  z-index: 3;
}
.art-5 .ok-bubble::after {
  content: "";
  position: absolute;
  left: 14%;
  bottom: -1.6cqw;
  width: 4cqw;
  height: 4cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.6cqw;
}
.art-5 .ok-bubble svg { width: 50%; height: 50%; }

.fc-list { display: none; }
.fc-list li {
  position: relative;
  padding-left: 29px;
  font-size: clamp(11.5px, 0.93vw, 14.6px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  font-feature-settings: "palt";
  color: var(--fv-ink-2);
}
.fc-list .ck {
  position: absolute;
  left: 0;
  top: 0.14em;
  width: 21px;
  height: 21px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fde3e9;
  color: var(--fv-red);
}

/* --- 下部の業種バー --- */
.fit-bar {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 16px;
  padding: 16px 16px 16px 30px;
  border-radius: 18px;
  background: var(--fv-white);
  box-shadow: 0 6px 22px rgba(27, 28, 32, 0.06);
}
.fb-label {
  margin: 0;
  padding-right: 30px;
  font-size: clamp(16px, 1.5vw, 23px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
  white-space: nowrap;
}
.fb-inds {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
.fb-inds li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 12px;
  font-size: clamp(11px, 0.95vw, 14.6px);
  font-weight: 700;
  letter-spacing: 0;
  font-feature-settings: "palt";
  color: var(--fv-ink-2);
  white-space: nowrap;
}
.fb-inds svg { width: clamp(20px, 1.75vw, 27px); height: clamp(20px, 1.75vw, 27px); }
.fb-inds li:nth-child(1) svg { color: #f4791f; }
.fb-inds li:nth-child(2) svg { color: #2f7cf6; }
.fb-inds li:nth-child(3) svg { color: #1a2130; }
.fb-inds li:nth-child(4) svg { color: #8a5a34; }
.fb-inds li:nth-child(5) svg { color: #23a566; }
.fb-inds li:nth-child(6) svg { color: #e4262b; }
.fb-inds li:nth-child(7) svg { color: #2f7cf6; }
.fb-more {
  margin: 0;
  padding: 0 26px 0 30px;
  font-family: var(--fv-font-en);
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #9aa0ab;
  white-space: nowrap;
}
.fit-btn {
  flex: none;
  height: 72px;
  padding: 0 34px;
  border-radius: 999px;
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 700;
  gap: 16px;
}

/* ---------- 05 responsive ---------- */
@media (max-width: 1440px) {
  .fit-hero { margin-right: -32px; }
  .fit-card { padding: 14px 14px 18px; }
  .fc-list li { padding-left: 26px; }
  .fc-list .ck { width: 19px; height: 19px; padding: 3.6px; }
  .fit-bar { padding-left: 22px; }
  .fb-label { padding-right: 20px; }
  .fb-more { padding: 0 14px 0 18px; }
  .fit-btn { height: 62px; padding: 0 24px; }
}

@media (max-width: 1200px) {
  .sec-fit { padding: 32px 0 44px; }
  .fit-top { grid-template-columns: minmax(0, 1fr); }
  .fit-copy { padding-left: 0; }
  .fit-h2 { font-size: clamp(1.75rem, 5.2vw, 3.15rem); white-space: normal; }
  .fit-lead { font-size: 1.02rem; }
  .fit-hero { margin: 18px -32px 0 0; }
  .fit-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
  .fc-title { font-size: clamp(14px, 2.05vw, 19px); }
  .fc-no { font-size: 26px; }
  .fc-list li { font-size: clamp(12px, 1.5vw, 14px); padding-left: 27px; }
  .fit-bar { flex-wrap: wrap; gap: 14px; justify-content: center; padding: 18px; }
  .fb-label { padding-right: 18px; font-size: 19px; }
  .fb-inds { flex: 1 1 100%; order: 3; border-left: 0; }
  .fb-inds li { font-size: 13px; }
  .fb-inds svg { width: 24px; height: 24px; }
  .fb-more { padding: 0; margin-left: auto; font-size: 15px; }
  .fit-btn { height: 58px; font-size: 16px; }
}

@media (max-width: 720px) {
  .sec-fit { padding: 26px 0 36px; }
  .fit-h2 { font-size: clamp(1.5rem, 7vw, 2.25rem); line-height: 1.28; }
  .fit-h2 br { display: none; }
  .fit-lead { font-size: 0.95rem; margin-top: 16px; }
  .fit-lead br { display: none; }
  .fit-hero { margin-right: -20px; }
  /* 手書き2行目が右端で切れるため内側へ寄せる */
  .fit-hand-2 { left: 58cqw; top: 26.4cqw; font-size: 2.5cqw; }
  .fit-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
  .fit-card { padding: 18px 20px 20px; }
  .fc-art { max-width: 300px; margin-inline: auto; }
  .fc-title { font-size: 19px; }
  .fc-title br { display: none; }
  .fc-list li { font-size: 14.5px; }
  .fc-list li br { display: none; }
  .fit-bar { padding: 18px 16px; gap: 12px; }
  .fb-label { width: 100%; padding: 0; text-align: center; font-size: 18px; }
  .fb-label br { display: none; }
  .fb-inds { flex-wrap: wrap; order: 2; }
  .fb-inds li { flex: 0 0 25%; gap: 7px; padding: 8px 2px; font-size: 12px; }
  .fb-inds li + li { border-left: 0; }
  .fb-more { order: 3; margin: 0 auto; }
  .fit-btn { order: 4; width: 100%; height: 54px; font-size: 15px; }
}

@media (max-width: 480px) {
  .fit-hero { margin-right: -20px; }
  .fb-inds li { flex: 0 0 33.333%; }
  .fc-title { font-size: 17px; }
}

/* ---------- 06 つまずきポイント（CHALLENGE） ---------- */
.sec-prob { padding: 62px 0 44px; isolation: isolate; }
.sec-prob::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  z-index: -1;
  background:
    radial-gradient(ellipse 46% 62% at 78% 30%, #eef3fa 0%, rgba(238,243,250,0) 70%),
    radial-gradient(ellipse 30% 40% at 96% 8%, #f3f6fb 0%, rgba(243,246,251,0) 70%);
  pointer-events: none;
}

.pb-top {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: 0;
  align-items: start;
}
.pb-copy { padding: 4px 0 0; }

.pb-h2 {
  margin: 20px 0 0;
  font-size: clamp(1.95rem, 4.15vw, 4.25rem);
  font-weight: 900;
  line-height: 1.13;
  letter-spacing: -0.015em;
  color: #10203c;
  text-wrap: unset;
  white-space: nowrap;
}
.pb-h2 em { font-style: normal; color: var(--fv-red); }

.pb-lead {
  margin-top: 12px;
  font-size: clamp(0.95rem, 1.28vw, 1.32rem);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: 0.005em;
  color: var(--fv-ink-2);
}

/* --- 右上イラスト（モック実寸 760 x 440 を右寄せ。1cqw = 7.6単位） --- */
.pb-hero {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 764px;
  margin: -11px 0 0 auto;
  aspect-ratio: 760 / 440;
  user-select: none;
}
.pb-hero > * { position: absolute; }
.pb-hero img { object-fit: contain; object-position: center bottom; }

.pb-blob {
  left: 22cqw; top: 13cqw; width: 54cqw; height: 44cqw;
  border-radius: 46% 54% 52% 48% / 50%;
  background: #eef3fa;
  filter: blur(14px);
  z-index: 0;
}
.pb-floor {
  left: 2cqw; top: 57.6cqw; width: 92cqw; height: 2.4cqw;
  border-radius: 50%;
  background: #eceef3;
  filter: blur(3px);
  z-index: 0;
}

/* ブラウザウィンドウの重なり */
.pb-win { border-radius: 1.7cqw; z-index: 1; }
.pb-win-a {
  left: 19.3cqw; top: 6.8cqw; width: 34.5cqw; height: 31.3cqw;
  background: #eaeff7;
  box-shadow: 0 3px 16px rgba(31, 43, 69, 0.05);
}
.pb-win-a .d {
  position: absolute; top: 2.4cqw; width: 1cqw; height: 1cqw;
  border-radius: 50%; background: #bcc7d8;
}
.pb-win-a .d:nth-child(1) { left: 2.2cqw; width: 1.4cqw; height: 1.4cqw; background: #9dafc8; top: 2.2cqw; }
.pb-win-a .d:nth-child(2) { left: 4.6cqw; }
.pb-win-a .d:nth-child(3) { left: 6.4cqw; }
.pb-win-a .d:nth-child(4) { left: 8.2cqw; }
.pb-win-b {
  left: 38.8cqw; top: 3.7cqw; width: 23.6cqw; height: 34.5cqw;
  background: #dde4ee;
}
.pb-win-c {
  left: 57.9cqw; top: 30.7cqw; width: 8.2cqw; height: 12.3cqw;
  background: #c2ccdb;
}

/* チャット行 */
.pb-row {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 0.65cqw 2cqw;
  border-radius: 1.1cqw;
  background: #f7f9fc;
  box-shadow: 0 2px 9px rgba(31, 43, 69, 0.05);
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: #2b3a52;
}
.pb-row .av {
  flex: none;
  width: 1.3cqw; height: 1.3cqw;
  margin-left: -0.6cqw;
  border-radius: 50%;
  background: #b3bfd1;
  box-shadow: 0 -2.1cqw 0 #b3bfd1, 0 2.1cqw 0 #b3bfd1;
}
.pb-row.r1 { left: 21.4cqw; top: 8.9cqw; min-width: 31cqw; }
.pb-row.r2 { left: 26.2cqw; top: 15.7cqw; min-width: 32.4cqw; }
.pb-row.r3 { left: 28.9cqw; top: 23.8cqw; min-width: 33.1cqw; }
.pb-row.r4 { left: 28.9cqw; top: 31.4cqw; min-width: 28.3cqw; }

/* 吹き出し */
.pb-bub {
  z-index: 4;
  margin: 0;
  padding: 2.1cqw 3.2cqw;
  background: var(--fv-white);
  border-radius: 2.4cqw;
  box-shadow: 0 8px 24px rgba(31, 43, 69, 0.10);
  font-size: 2.35cqw;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: #2b3a52;
}
.pb-bub::after {
  content: "";
  position: absolute;
  width: 2.8cqw; height: 2.8cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.4cqw;
}
.pb-bub-1 { left: 1.5cqw; top: 15.8cqw; }
.pb-bub-1::after { left: 8cqw; bottom: -1.1cqw; }
.pb-bub-2 {
  left: 69.8cqw; top: 10cqw;
  padding: 2.3cqw 3.8cqw 2.5cqw;
  font-size: 3.15cqw;
  line-height: 1.48;
  color: #10203c;
}
.pb-bub-2::after { left: 5.4cqw; bottom: -1.1cqw; }
.pb-bub-2 em {
  position: relative;
  font-style: normal;
  border-bottom: 0.4cqw solid var(--fv-red);
  padding-bottom: 0.4cqw;
}
.pb-bub-2 .pb-tri {
  position: absolute;
  right: -2.3cqw;
  top: 0.5cqw;
  width: 1.6cqw;
  height: 1.8cqw;
}

/* もやもや */
.pb-scr { z-index: 4; color: #1f2b45; }
.pb-scr-1 { left: 4.4cqw; top: 31.3cqw; width: 6.1cqw; height: 5.9cqw; }
.pb-scr-2 { left: 79.7cqw; top: 28.9cqw; width: 6.9cqw; height: 6.6cqw; }

.pb-hero .pb-person { left: 1.2cqw; top: 18.5cqw; width: 38cqw; height: 38cqw; z-index: 3; }
.pb-hero .pb-books { left: 36.4cqw; top: 33.4cqw; width: 20.4cqw; height: 24.2cqw; z-index: 2; }
.pb-hero .pb-gb { left: 55.5cqw; top: 36.4cqw; width: 21cqw; height: 21cqw; z-index: 4; }
.pb-hero .pb-books2 { left: 66.8cqw; top: 51.6cqw; width: 14.4cqw; height: 6.4cqw; z-index: 5; }
.pb-bluebox {
  left: 74cqw; top: 46.8cqw; width: 7.2cqw; height: 5.6cqw;
  border-radius: 0.7cqw;
  background: #6ba3e0;
  box-shadow: inset 0 1.4cqw 0 #8fbde9;
  z-index: 3;
}

/* 積み重なるタグ */
.pb-slabs {
  left: 80.7cqw; top: 38.8cqw; width: 18.8cqw;
  z-index: 5;
  display: grid;
}
.pb-slabs li {
  position: relative;
  padding: 0.58cqw 1.4cqw 0.62cqw;
  border: 0.13cqw solid #dde3ec;
  border-radius: 0.6cqw;
  background: #f2f5fa;
  box-shadow: 0 0.28cqw 0 #e2e7ef;
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #2b3a52;
  text-align: center;
  white-space: nowrap;
}
.pb-slabs li + li { margin-top: 0.34cqw; }

/* --- 見出し（よくある4つのつまずきポイント） --- */
.pb-h3 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 12px 0 0;
  padding-left: 2px;
  font-size: clamp(1.15rem, 1.62vw, 1.62rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #10203c;
}
.pb-h3::before {
  content: "";
  flex: none;
  width: 7px;
  height: 37px;
  border-radius: 2px;
  background: var(--fv-red);
}

/* --- 4カード --- */
.pb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-top: 16px;
}
.pb-card {
  display: flex;
  flex-direction: column;
  padding: 22px 28px 0;
  border-radius: 18px;
  overflow: hidden;
}
.pb-c1 { background: linear-gradient(150deg, #fdf3f5 0%, #fdf4f5 55%, #fbf6f8 100%); }
.pb-c2 { background: linear-gradient(150deg, #f3f7fd 0%, #f4f7fd 55%, #f6f9fc 100%); }
.pb-c3 { background: linear-gradient(150deg, #fef8ef 0%, #fef9f0 55%, #fbf8f2 100%); }
.pb-c4 { background: linear-gradient(150deg, #f3fdf4 0%, #f4fdf5 55%, #f5fbf8 100%); }

.pb-card-head { display: flex; align-items: flex-start; gap: 14px; }
.pb-no {
  flex: none;
  font-family: var(--fv-font-en);
  font-size: clamp(1.6rem, 2.2vw, 2.24rem);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--fv-red);
}
.pb-sep { flex: none; width: 2px; align-self: stretch; margin-top: 3px; background: #d9dde5; }
.pb-card-head h4 {
  margin: 0;
  font-size: clamp(1rem, 1.55vw, 1.56rem);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: 0.01em;
  color: #10203c;
  font-feature-settings: "palt";
  display: inline;
  padding: 0 3px 2px;
  background: linear-gradient(transparent 68%, var(--mk) 68%, var(--mk) 94%, transparent 94%);
}
.pb-c1 { --mk: rgba(228, 38, 43, 0.22); }
.pb-c2 { --mk: rgba(47, 124, 246, 0.20); }
.pb-c3 { --mk: rgba(244, 121, 31, 0.24); }
.pb-c4 { --mk: rgba(35, 165, 102, 0.22); }
.pb-desc { display: none; }

/* カード内イラスト（キャンバス 294 x 176。1cqw = 2.94単位） */
.pb-art {
  position: relative;
  container-type: inline-size;
  margin-top: 30px;
  padding-top: 20px;
  width: 100%;
  aspect-ratio: 294 / 176;
  transform: scale(1.08);
  transform-origin: 50% 100%;
}
.pb-art > * { position: absolute; }
.pb-art img { object-fit: contain; object-position: center bottom; }

.pb-mini {
  z-index: 4;
  margin: 0;
  padding: 3.4cqw 4.4cqw;
  background: var(--fv-white);
  border-radius: 4cqw;
  box-shadow: 0 6px 20px rgba(31, 43, 69, 0.10);
  font-size: 4.6cqw;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: #2b3a52;
}
.pb-mini::after {
  content: "";
  position: absolute;
  width: 4.4cqw;
  height: 4.4cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.6cqw;
}
.pb-qm {
  z-index: 3;
  font-family: var(--fv-font-en);
  font-weight: 800;
  line-height: 1;
  color: #6b8ab5;
}
.pb-d { z-index: 1; }
.pb-dbars {
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 2.6cqw;
  background: #eef2f8;
}
.pb-dbars svg { width: 62%; height: 46%; }

/* 01 */
.pb-art-1 .pb-mini { left: -1cqw; top: 3.5cqw; }
.pb-art-1 .pb-mini::after { left: 6cqw; bottom: -1.8cqw; }
.pb-art-1 .qm-a { left: 43cqw; top: 0; font-size: 15cqw; }
.pb-art-1 .d-a { left: 55cqw; top: 16cqw; width: 16cqw; height: 19.5cqw; transform: rotate(-8deg); }
.pb-art-1 .d-b { left: 72cqw; top: 5.5cqw; width: 16cqw; height: 19.5cqw; transform: rotate(6deg); }
.pb-art-1 .d-c { left: 65cqw; top: 30cqw; width: 17cqw; height: 21cqw; transform: rotate(-4deg); }
.pb-art-1 .pb-p1 { left: 14cqw; top: 17cqw; width: 62cqw; height: 62cqw; z-index: 2; clip-path: inset(0 0 33% 0); }

/* 02 （生成イラストに差し替え。配置は末尾の「06 カード02」ブロックを参照） */

/* 03 */
.pb-art-3 .d-d { left: 0; top: 6.5cqw; width: 20cqw; height: 25cqw; }
.pb-art-3 .d-e { left: 22cqw; top: 5.5cqw; width: 19cqw; height: 24cqw; }
.pb-art-3 .b2 { left: 0; top: 37cqw; width: 19cqw; height: 21cqw; }
.pb-art-3 .pb-dots { left: 46cqw; top: 12cqw; width: 8cqw; height: 6cqw; z-index: 3; }
.pb-art-3 .pb-dots i {
  position: absolute;
  border-radius: 50%;
  background: #f5c542;
}
.pb-art-3 .pb-dots i:nth-child(1) { left: 0; top: 4cqw; width: 1.6cqw; height: 1.6cqw; }
.pb-art-3 .pb-dots i:nth-child(2) { left: 2.6cqw; top: 1.8cqw; width: 2.1cqw; height: 2.1cqw; }
.pb-art-3 .pb-dots i:nth-child(3) { left: 5.6cqw; top: 0; width: 2.6cqw; height: 2.6cqw; }
.pb-art-3 .pb-p3 { left: 24cqw; top: 10cqw; width: 58cqw; height: 46.6cqw; z-index: 2; clip-path: inset(0 34% 0 0); }
.pb-art-3 .pb-mini { left: 52cqw; top: 3cqw; }
.pb-art-3 .pb-mini::after { left: 5cqw; bottom: -1.8cqw; }
.pb-art-3 .d-f { left: 59cqw; top: 32cqw; width: 20cqw; height: 24cqw; }
.pb-art-3 .d-g { left: 80cqw; top: 32cqw; width: 20cqw; height: 24cqw; }

/* 04 */
.pb-art-4 .pb-scr-3 { left: 0; top: 13cqw; width: 12cqw; height: 11cqw; z-index: 3; }
.pb-art-4 .pb-mini { left: 13cqw; top: 0; }
.pb-art-4 .pb-mini::after { left: 6cqw; bottom: -1.8cqw; }
.pb-art-4 .pb-p4 { left: -7cqw; top: 19cqw; width: 57cqw; height: 46cqw; z-index: 2; }
.pb-ng {
  right: -6cqw; top: -1cqw;
  z-index: 4;
  display: grid;
  gap: 2.6cqw;
}
.pb-ng li {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2.4cqw 3cqw 2.4cqw 2cqw;
  border-radius: 2.6cqw;
  background: var(--fv-white);
  box-shadow: 0 4px 14px rgba(31, 43, 69, 0.08);
  font-size: 3.9cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: #2b3a52;
}
.pb-ng svg { flex: none; width: 5.6cqw; height: 5.6cqw; }

/* --- 結論バー --- */
.pb-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 26px;
  padding: 18px 24px 18px 32px;
  border-radius: 16px;
  background: var(--fv-white);
  box-shadow: 0 8px 26px rgba(31, 43, 69, 0.07);
}
.pb-cta-bulb { flex: none; width: 48px; height: 48px; }
.pb-cta-sep { flex: none; width: 2px; align-self: stretch; background: #dfe3ea; }
.pb-cta-text {
  margin: 0;
  margin-right: auto;
  font-size: clamp(1.05rem, 1.68vw, 1.7rem);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: #10203c;
}
.pb-cta-text em { font-style: normal; color: var(--fv-red); }
.pb-cta-btn {
  flex: none;
  height: 58px;
  padding: 0 40px;
  gap: 14px;
  font-size: clamp(0.9rem, 1.1vw, 1.12rem);
  border-radius: 999px;
}

/* ---------- Responsive (06) ---------- */
@media (max-width: 1440px) {
  .pb-copy { padding-left: 4px; }
  .pb-card { padding: 22px 18px 0; }
  .pb-desc { line-height: 1.8; }
  .pb-cta { gap: 20px; padding: 20px 20px 20px 26px; }
  .pb-cta-btn { padding: 0 24px; height: 52px; }
}
@media (max-width: 1200px) {
  .pb-top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pb-copy { padding-left: 0; }
  .pb-h2 { font-size: clamp(1.75rem, 4.6vw, 3.15rem); }
  .pb-lead br { display: none; }
  .pb-hero { margin: 0 auto; }
  .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-card-head h4 br { display: none; }
  .pb-desc br { display: none; }
  .pb-cta { flex-wrap: wrap; gap: 18px; }
  .pb-cta-text { flex: 1 1 260px; margin-right: 0; }
  .pb-cta-btn { flex: 1 1 100%; justify-content: center; }
  .pb-ng { right: 0; }
}
@media (max-width: 720px) {
  .sec-prob { padding: 48px 0 40px; }
  .pb-h2 { white-space: normal; font-size: clamp(1.5rem, 6.8vw, 2.25rem); }
  .pb-h3 { margin-top: 30px; }
  .pb-h3::before { height: 26px; width: 5px; }
  .pb-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pb-card { padding: 20px 18px 0; }
  .pb-art { max-width: 340px; }
  .pb-cta { padding: 18px 16px; gap: 14px; border-radius: 14px; }
  .pb-cta-text { font-size: 1rem; }
  .pb-cta-text br { display: none; }
  .pb-cta-btn { width: 100%; margin-left: 0; height: 50px; padding: 0 18px; font-size: 0.9rem; }
}

/* ============================================================
   02 How it works（sec-how2 / 採用モック: mocks/sec02-adopted.png）
   ============================================================ */
.sec-how2 {
  --h2-bg: #f2f6fb;
  --h2-blue: #1261eb;
  --h2-blue-soft: #e8f1fd;
  --h2-line: #d5e1f1;
  --h2-peach: #fff0e4;
  --h2-orange: #e45419;
  padding: 25px 0 28px;
  background:
    radial-gradient(circle at 48% 40%, rgba(255, 255, 255, 0.6), transparent 52%),
    linear-gradient(115deg, #f1f6fb 0%, #f6f8fb 52%, #eef4fa 100%);
  overflow: clip;
}
.sec-how2 .fv-container {
  max-width: 1371px;
  padding-right: 31px;
  padding-left: 31px;
}

/* --- 見出し --- */
.how2-head {
  position: relative;
  height: 264px;
  min-height: 264px;
}
.how2-head-txt { position: relative; z-index: 2; }
.how2-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 28px;
  margin: 0 0 24px;
}
.how2-kicker .badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 28px;
  padding: 1px 0 0 1px;
  border-radius: 7px;
  background: var(--h2-blue);
  color: #fff;
  font-family: var(--fv-font-mono, "IBM Plex Mono", monospace);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.how2-kicker .label {
  font-family: var(--fv-font-mono, "IBM Plex Mono", monospace);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--h2-blue);
}
.how2-head h2 {
  width: 690px;
  margin: 0 0 17px;
  font-size: 43.5px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #151d2b;
}
.how2-head h2 span {
  display: block;
  width: max-content;
  white-space: nowrap;
  transform-origin: left center;
}
.how2-head h2 span:first-child,
.how2-head h2 span:last-child { transform: translateY(-2px); }
.how2-lead {
  width: 770px;
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.92;
  letter-spacing: 0.01em;
  color: #6c7f99;
}
.how2-head-art {
  position: absolute;
  z-index: 1;
  top: 46px;
  right: 0;
  width: 530px;
  height: 265px;
}
.how2-head-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4px;
  top: 33px;
  width: 397px;
  height: 228px;
  background:
    radial-gradient(circle at 30% 44%, rgba(219, 232, 249, 0.82) 0 31%, transparent 32%),
    radial-gradient(circle at 67% 67%, rgba(229, 238, 250, 0.8) 0 28%, transparent 29%),
    radial-gradient(circle at 92% 82%, rgba(225, 235, 248, 0.62) 0 20%, transparent 21%);
}
.how2-note {
  position: absolute;
  z-index: 2;
  top: 31px;
  right: -1px;
  width: 228px;
  margin: 0;
  font-family: var(--fv-font-hand, "Yomogi", cursive);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.055em;
  color: #17315f;
  transform: rotate(-7deg);
}
.how2-note::after {
  content: "";
  display: block;
  width: 91px;
  height: 3px;
  margin: 7px 28px 0 auto;
  border-radius: 2px;
  background: #438cf5;
}
.how2-head-art .how2-person {
  position: absolute;
  top: -14px;
  left: 28px;
  width: 330px;
  height: auto;
}

/* --- 2カラム --- */
.how2-grid {
  display: grid;
  grid-template-columns: 616px minmax(0, 1fr);
  gap: 54px;
  margin-top: 48px;
  align-items: start;
}

/* --- 左: 全体像カード --- */
.how2-stage {
  height: 782px;
  padding: 34px 25px 26px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #cfdeef;
  border-radius: 19px;
  box-shadow: none;
  text-align: center;
  overflow: hidden;
}
.hs-requester {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 286px;
  height: 60px;
  margin: 0 0 45px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(229, 237, 248, 0.66);
  font-size: 17px;
  font-weight: 800;
  color: #141d2c;
}
.hs-requester::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -27px;
  width: 11px;
  height: 11px;
  border-right: 3px solid #9eb2cf;
  border-bottom: 3px solid #9eb2cf;
  transform: translateX(-50%) rotate(45deg);
}
.hs-requester .ic {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 12px rgba(48, 83, 128, 0.08);
}
.hs-tools {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.hs-tools-sub { margin-top: 9px; }
.hs-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 58px;
  padding: 0 17px;
  border: 1px solid #cdddf0;
  border-radius: 13px;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  color: #172033;
  white-space: nowrap;
}
.hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(1) { width: 111px; }
.hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(2) { width: 122px; }
.hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(3) { width: 126px; }
.hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(4) { width: 132px; }
.hs-tools-sub .hs-chip { width: 126px; }
.hs-chip .ic { width: 27px; height: 27px; }
.hs-tools-sub .hs-chip .ic { width: 24px; height: 24px; }
.hs-links {
  display: block;
  position: relative;
  z-index: 1;
  width: 466px;
  height: 110px;
  margin: -58px auto 0;
  overflow: visible;
}
.hs-links > path { transform: translateY(14px); }
.hs-bot {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  height: 148px;
  margin-top: 9px;
  overflow: hidden;
}
.hs-bot img {
  width: 210px;
  height: auto;
  transform: translateY(-9px);
}
.hs-bot .spark {
  flex: none;
  width: 35px;
  height: 31px;
  margin-top: 48px;
  transform: translateY(-9px);
}
.hs-name {
  margin: 8px 0 0;
  font-family: var(--fv-font-mono, "IBM Plex Mono", monospace);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.22em;
  color: #141d2c;
}
.hs-chev {
  width: 20px;
  height: 10px;
  margin: 18px auto 19px;
  display: block;
}
.hs-outputs {
  display: grid;
  grid-template-columns: 278px 1fr;
  gap: 12px;
  height: 205px;
  text-align: left;
}
.hs-out {
  position: relative;
  height: 205px;
  border-radius: 13px;
  padding: 13px 14px 0;
  overflow: hidden;
  text-align: center;
}
.hs-out small {
  display: block;
  font-family: var(--fv-font-mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
}
.hs-out p {
  margin: 8px 0 4px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}
.hs-out-deliv { background: #eaf2fd; }
.hs-out-deliv small { color: var(--h2-blue); }
.hs-out-deliv p { color: #075fe6; }
.hs-out-deliv .art {
  display: block;
  width: 250px;
  height: 93px;
  margin: 0 auto;
  filter: drop-shadow(0 7px 6px rgba(61, 106, 171, 0.1));
}
.hs-out-human { background: var(--h2-peach); }
.hs-out-human small { color: var(--h2-orange); }
.hs-out-human p { color: #d84a12; }
.hs-out-human .art-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 161px;
  overflow: hidden;
}
.hs-out-human .art-wrap img {
  display: block;
  width: 215px;
  height: auto;
  margin: 0 auto;
}
.hs-out-human .check {
  position: absolute;
  top: 32px;
  right: 31px;
  width: 56px;
  height: 56px;
}

/* --- 右: 手順 --- */
.how2-steps { padding-top: 9px; }
.hq-ask {
  position: relative;
  width: 497px;
  height: 110px;
  padding: 22px 23px 18px;
  background: rgba(255, 255, 255, 0.91);
  border: 1px solid #cdddf0;
  border-radius: 17px;
}
.hq-ask::before,
.hq-ask::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 23px;
  width: 0;
  height: 0;
  border-top: 13px solid #cdddf0;
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
}
.hq-ask::after {
  bottom: -11px;
  border-top-color: #fff;
}
.hq-ask small {
  display: block;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #70819a;
}
.hq-ask p {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #111a29;
}
.hq-list {
  position: relative;
  margin: 35px 0 0;
  padding: 0 0 0 47px;
  list-style: none;
  display: grid;
  gap: 18px;
}
.hq-list::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -22px;
  left: 26px;
  border-left: 1.5px dashed #9eb4d0;
}
.hq-list li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 121px;
  align-items: center;
  height: 80px;
  padding: 0 18px 0 27px;
  width: calc(100% + 15px);
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.48));
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(61, 91, 137, 0.045);
}
.hq-list .n {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -49px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 1px 0 0 1px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #c7d8ec;
  transform: translateY(calc(-50% - 6px));
  font-family: var(--fv-font-en);
  font-size: 16px;
  font-weight: 800;
  color: var(--h2-blue);
}
.hq-list .t {
  min-width: 0;
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #172033;
}
.hq-list .si {
  width: 120px;
  height: 62px;
  overflow: visible;
  filter: drop-shadow(0 7px 7px rgba(55, 101, 168, 0.1));
  transform: scale(1.25);
}
.hq-list .tag {
  justify-self: center;
  font-family: var(--fv-font-mono, "IBM Plex Mono", monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #71819a;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #cbdbee;
  background: rgba(255,255,255,.72);
  white-space: nowrap;
}
.hq-list .is-human .si {
  padding: 5px 31px;
  filter: drop-shadow(0 7px 7px rgba(55, 101, 168, 0.08));
}
.hq-report {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: end;
  gap: 18px;
  margin: 44px 0 0 30px;
}
.hq-report-bot {
  display: block;
  width: 86px;
  height: 96px;
  object-fit: cover;
  object-position: 50% 22%;
}
.hq-report-bubble {
  position: relative;
  min-height: 122px;
  padding: 21px 23px;
  background: rgba(255, 255, 255, 0.91);
  border: 1px solid #cdddf0;
  border-radius: 17px;
}
.hq-report-bubble::before,
.hq-report-bubble::after {
  content: "";
  position: absolute;
  top: 54px;
  left: -13px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 13px solid #cdddf0;
  border-bottom: 13px solid transparent;
}
.hq-report-bubble::after {
  left: -11px;
  border-right-color: #fff;
}
.hq-report-bubble small {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #70819a;
}
.hq-report-bubble p {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.65;
  color: #111a29;
}
.hq-statement {
  margin: 42px 0 0 47px;
  padding: 27px 8px 0 22px;
  border-top: 1px solid #d5e1f1;
  border-left: 3px solid var(--h2-blue);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.55;
  color: #172033;
}
.hq-statement small {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  color: #63758e;
}
.hq-statement > span { white-space: nowrap; }

@media (min-width: 1201px) {
  .hq-list li:nth-child(1) .si { transform: translateX(-10px) scale(1.25); }
  .hq-list li:nth-child(3) .si { transform: translateX(-11px) scale(1.25); }
  .hq-list li:nth-child(4) .si { transform: translateX(-17px) scale(1.25); }
  .hq-list li:nth-child(5) .si { transform: translateX(-14px) scale(1.25); }
  .hq-list li:not(:nth-child(3)) .tag { transform: translateX(-9px); }
}

@media (min-width: 901px) {
  .how2-stage {
    position: sticky;
    top: calc(var(--header-h, 72px) + 24px);
  }
}

/* --- レスポンシブ --- */
@media (max-width: 1200px) {
  .sec-how2 { padding: 42px 0 52px; }
  .sec-how2 .fv-container { padding-right: 32px; padding-left: 32px; }
  .how2-head { height: auto; min-height: 280px; }
  .how2-head h2 { width: 58%; font-size: clamp(35px, 3.7vw, 42px); }
  .how2-lead { width: 44%; max-width: 490px; font-size: 15px; line-height: 1.9; }
  .how2-head-art { top: 58px; right: -38px; transform: scale(.86); transform-origin: top right; }
  .how2-grid { grid-template-columns: minmax(420px, .94fr) minmax(0, 1.06fr); gap: 30px; margin-top: 42px; }
  .how2-stage { height: 742px; padding-right: 17px; padding-left: 17px; }
  .hs-chip { padding-right: 10px; padding-left: 10px; }
  .hs-tools:not(.hs-tools-sub) .hs-chip { width: auto; min-width: 0; flex: 1; }
  .hs-links { width: 92%; }
  .hs-outputs { grid-template-columns: 1fr 1fr; gap: 9px; }
  .hs-out { padding-right: 9px; padding-left: 9px; }
  .hs-out p { font-size: 15px; }
  .hs-out-deliv .art { width: 100%; }
  .how2-steps { padding-top: 0; }
  .hq-ask { width: 82%; }
  .hq-list { padding-left: 42px; }
  .hq-list::before { left: 23px; }
  .hq-list li { grid-template-columns: minmax(0, 1fr) 76px 82px; width: 100%; padding-right: 12px; padding-left: 23px; }
  .hq-list .n { left: -46px; width: 52px; height: 52px; }
  .hq-list .t { font-size: 14px; }
  .hq-list .si { width: 76px; height: 56px; transform: scale(1.08); }
  .hq-list .tag { font-size: 9px; padding: 5px 8px; }
  .hq-list .is-human .si { padding: 7px 19px; }
  .hq-report { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; margin-left: 18px; }
  .hq-report-bot { width: 70px; height: 82px; }
  .hq-report-bubble { padding: 18px; }
  .hq-report-bubble p { font-size: 14px; }
  .hq-statement { margin-left: 42px; font-size: 18px; }
}
@media (max-width: 900px) {
  .sec-how2 { padding: 64px 0 72px; overflow: clip; }
  .sec-how2 .fv-container { padding-right: 24px; padding-left: 24px; }
  .how2-head { min-height: 620px; }
  .how2-head h2 { width: 100%; max-width: 680px; font-size: clamp(33px, 5.5vw, 44px); }
  .how2-head h2 span { width: auto; white-space: normal; }
  .how2-head h2 span:first-child,
  .how2-head h2 span:last-child { transform: none; }
  .how2-lead { width: 100%; max-width: 680px; font-size: 16px; }
  .how2-lead { transform: none; }
  .how2-head-art { top: 310px; right: 50%; transform: translateX(50%) scale(.95); transform-origin: top center; }
  .how2-grid { grid-template-columns: minmax(0, 1fr); gap: 54px; margin-top: 24px; }
  .how2-stage { width: min(616px, 100%); height: 782px; margin: 0 auto; padding-right: 25px; padding-left: 25px; }
  .hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(1) { width: 111px; }
  .hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(2) { width: 122px; }
  .hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(3) { width: 126px; }
  .hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(4) { width: 132px; }
  .hs-links { width: 466px; }
  .hs-out p { font-size: 17px; }
  .hs-outputs { grid-template-columns: 278px 1fr; }
  .hs-out-deliv .art { width: 238px; }
  .how2-steps { width: min(641px, 100%); margin: 0 auto; padding-top: 0; }
  .hq-ask { width: min(497px, calc(100% - 48px)); }
  .hq-list { padding-left: 47px; }
  .hq-list::before { left: 26px; }
  .hq-list li { grid-template-columns: minmax(0, 1fr) 120px 121px; width: 100%; padding-right: 18px; padding-left: 27px; }
  .hq-list .n { left: -49px; width: 58px; height: 58px; }
  .hq-list .t { font-size: 16.5px; }
  .hq-list .si { width: 120px; height: 62px; transform: scale(1.25); }
  .hq-list .tag { font-size: 11px; padding: 6px 12px; }
  .hq-list .is-human .si { padding: 5px 31px; }
  .hq-report { margin-right: 0; }
}
@media (max-width: 640px) {
  .sec-how2 { padding-top: 48px; }
  .sec-how2 .fv-container { padding-right: 20px; padding-left: 20px; }
  .how2-kicker { margin-bottom: 24px; }
  .how2-kicker .badge { width: 40px; }
  .how2-head { min-height: 510px; }
  .how2-head h2 { margin-bottom: 18px; font-size: clamp(29px, 7.7vw, 35px); line-height: 1.32; }
  .how2-lead { font-size: 15px; line-height: 1.9; }
  .how2-head-art { top: 285px; right: 50%; transform: translateX(50%) scale(.7); }
  .how2-grid { gap: 44px; margin-top: 20px; }
  .how2-stage { height: auto; min-height: 704px; padding: 28px 14px 18px; }
  .hs-requester { width: min(286px, 88%); height: 56px; margin-bottom: 42px; font-size: 15px; }
  .hs-requester .ic { width: 40px; height: 40px; }
  .hs-tools { gap: 7px; }
  .hs-tools:not(.hs-tools-sub) { flex-wrap: wrap; }
  .hs-tools:not(.hs-tools-sub) .hs-chip:nth-child(n) { flex: 0 1 calc(50% - 4px); width: auto; height: 52px; }
  .hs-tools-sub { margin-top: 7px; }
  .hs-tools-sub .hs-chip { height: 52px; }
  .hs-links { width: 88%; height: 90px; margin-top: -51px; }
  .hs-bot { height: 138px; margin-top: 10px; }
  .hs-bot img { width: 190px; }
  .hs-name { font-size: 15px; }
  .hs-chev { margin-top: 15px; margin-bottom: 15px; }
  .hs-outputs { height: auto; grid-template-columns: 1fr; }
  .hs-out { height: 196px; }
  .hs-out p { font-size: 16px; }
  .hs-out-deliv .art { height: 88px; }
  .hq-ask { width: calc(100% - 16px); height: auto; min-height: 104px; padding: 20px; }
  .hq-ask p { font-size: 17px; }
  .hq-list { gap: 13px; padding-left: 34px; }
  .hq-list::before { left: 18px; }
  .hq-list li { grid-template-columns: minmax(0, 1fr) auto; width: 100%; height: 74px; padding: 0 12px 0 21px; }
  .hq-list .n { left: -37px; width: 45px; height: 45px; font-size: 13px; }
  .hq-list .t { font-size: 14px; }
  .hq-list .si { display: none; }
  .hq-list .tag { font-size: 8.5px; padding: 5px 7px; }
  .hq-report { grid-template-columns: 58px minmax(0, 1fr); gap: 11px; margin: 34px 0 0 15px; }
  .hq-report-bot { width: 58px; height: 70px; }
  .hq-report-bubble { min-height: 0; padding: 17px 16px; border-radius: 14px; }
  .hq-report-bubble::before,
  .hq-report-bubble::after { top: 35px; }
  .hq-report-bubble small { font-size: 11px; }
  .hq-report-bubble p { font-size: 14px; line-height: 1.65; }
  .hq-statement { margin: 34px 0 0 34px; padding: 24px 2px 0 17px; font-size: clamp(15px, 3.95vw, 17px); }
  .hq-statement small { font-size: 13.5px; }
}

/* ============================================================
   08 45-day PoC program
   ============================================================ */
.sec-poc {
  --poc-red: #e4262b;
  --poc-red-soft: #fde8e8;
  --poc-line: #d9e0eb;
  position: relative;
  isolation: isolate;
  padding: 24px 0 28px;
  background: #fff;
  overflow: clip;
}
.sec-poc::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -170px;
  right: 7%;
  width: 90px;
  height: 560px;
  background: rgba(228, 38, 43, 0.035);
  transform: rotate(25deg);
}
.sec-poc::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 300px;
  left: -210px;
  width: 570px;
  height: 360px;
  border: 72px solid rgba(228, 38, 43, 0.04);
  border-radius: 50%;
}
.sec-poc .container {
  max-width: 1600px;
  padding-right: 36px;
  padding-left: 36px;
}
.sec-poc .poc-head {
  max-width: none;
  margin: 0 0 26px;
}
.sec-poc .eyebrow {
  gap: 13px;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--poc-red);
}
.sec-poc .eyebrow .num {
  min-width: 46px;
  height: 30px;
  padding: 1px 8px 0;
  border-radius: 7px;
  background: var(--poc-red);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.sec-poc .poc-head h2 {
  margin: 36px 0 0;
  text-align: center;
  font-family: var(--fv-font, var(--font-jp));
  font-size: clamp(43px, 3.25vw, 54px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.035em;
  color: #151d2b;
}
.sec-poc .poc-title-prefix,
.sec-poc .poc-title-result { display: inline-block; }
.sec-poc .poc-title-prefix { margin-right: 0.18em; }
.sec-poc .poc-head h2 em {
  margin-right: 0.04em;
  color: var(--poc-red);
  font-style: normal;
}
.sec-poc .poc-head .lead {
  max-width: 760px;
  margin: 17px auto 0;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: #5e6d84;
}
.poc-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(180px, 240px);
  grid-template-areas: "person diagram bot";
  align-items: stretch;
  min-height: 410px;
  margin-top: 24px;
}
.poc-side-slot {
  position: relative;
  min-width: 0;
  min-height: 410px;
  background: radial-gradient(ellipse at 50% 76%, rgba(228, 38, 43, 0.055), transparent 62%);
}
.poc-side-slot::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 12px;
  left: 8%;
  height: 1px;
  background: rgba(199, 211, 226, 0.72);
}
.poc-side-slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.poc-side-slot-person { grid-area: person; }
.poc-side-slot-bot { grid-area: bot; }
.poc-diagram {
  grid-area: diagram;
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 410px;
}
.poc-diagram::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 390px;
  height: 310px;
  border-radius: 50%;
  background: rgba(228, 38, 43, 0.035);
  transform: translate(-50%, -50%);
}
.poc-core {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 230px;
  border: 17px solid rgba(228, 38, 43, 0.13);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(228, 38, 43, 0.16), 0 14px 34px rgba(83, 101, 130, 0.08);
  transform: translate(-50%, -50%);
}
.poc-core-calendar {
  position: relative;
  width: 34px;
  height: 31px;
  margin-bottom: 4px;
  border: 3px solid var(--poc-red);
  border-radius: 5px;
}
.poc-core-calendar::before {
  content: "";
  position: absolute;
  top: 6px;
  right: -3px;
  left: -3px;
  border-top: 3px solid var(--poc-red);
}
.poc-core-calendar::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 6px;
  width: 16px;
  height: 9px;
  border-right: 3px solid var(--poc-red);
  border-left: 3px solid var(--poc-red);
}
.poc-core strong {
  font-family: var(--fv-font-en, "Manrope", sans-serif);
  font-size: 82px;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--poc-red);
}
.poc-core-days {
  margin-top: 4px;
  font-family: var(--fv-font-en, "Manrope", sans-serif);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #151d2b;
}
.poc-core small {
  margin-top: 9px;
  font-family: var(--fv-font-mono, var(--font-mono));
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.24em;
  color: #65748a;
}
.sec-poc .poc-steps {
  display: block;
  margin: 0;
  padding: 0;
}
.sec-poc .poc-step {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  width: clamp(270px, 34%, 360px);
  height: 156px;
  padding: 25px 24px 22px 36px;
  border: 1px solid #e3e8f0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 34px rgba(61, 80, 112, 0.08);
}
.sec-poc .poc-step-1 { top: 18px; left: 0; }
.sec-poc .poc-step-2 { top: 18px; right: 0; }
.sec-poc .poc-step-3 { right: 0; bottom: 18px; }
.sec-poc .poc-step-4 { bottom: 18px; left: 0; }
.sec-poc .poc-step .n {
  position: absolute;
  top: -18px;
  left: -17px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  background: var(--poc-red-soft);
  color: var(--poc-red);
  font-family: var(--fv-font-en, "Manrope", sans-serif);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.poc-step-visual {
  display: block;
  width: 52px;
  height: 64px;
  border-radius: 11px;
  background: rgba(228, 38, 43, 0.035);
}
.poc-step-visual > img,
.poc-step-visual > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.poc-step-copy { min-width: 0; }
.sec-poc .poc-step h3 {
  margin: 0 0 8px;
  font-family: var(--fv-font, var(--font-jp));
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #172033;
}
.sec-poc .poc-step p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #65758c;
}
.sec-poc .metrics {
  min-height: 136px;
  margin-top: 18px;
  padding: 26px 36px;
  border: 1px solid #d8e0eb;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  box-shadow: none;
}
.sec-poc .metrics .col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px;
  font-family: var(--fv-font-mono, var(--font-mono));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--poc-red);
}
.sec-poc .metrics .col-title::before {
  content: "";
  width: 6px;
  height: 20px;
  border-radius: 3px;
  background: var(--poc-red);
}
.sec-poc .metrics h3 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.45;
  color: #172033;
}
.sec-poc .metrics .chips {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
.sec-poc .metrics .chips .chip {
  justify-content: center;
  min-height: 58px;
  padding: 10px 9px;
  border-radius: 12px;
  background: #f3f5f9;
  color: #344258;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.sec-poc .poc-note {
  min-height: 80px;
  margin-top: 16px;
  padding: 19px 28px;
  border-radius: 15px;
  background: #fff3d5;
  color: #765111;
  font-size: 15px;
  line-height: 1.75;
}
.sec-poc .poc-note .ic {
  width: 23px;
  height: 23px;
  margin-top: 2px;
}
.sec-poc .poc-note strong { color: #493307; }

@media (max-width: 1400px) {
  .sec-poc .container { padding-right: 32px; padding-left: 32px; }
  .sec-poc .poc-title-prefix,
  .sec-poc .poc-title-result { display: block; }
  .sec-poc .poc-title-prefix { margin: 0; }
  .poc-main { grid-template-columns: 190px minmax(0, 1fr) 190px; }
  .poc-core { width: 220px; height: 220px; }
}

@media (max-width: 1100px) {
  .sec-poc { padding-top: 36px; }
  .sec-poc .poc-head h2 { font-size: clamp(40px, 4.8vw, 50px); }
  .poc-main { grid-template-columns: 120px minmax(0, 1fr) 120px; }
  .sec-poc .poc-step { width: 255px; padding-right: 18px; padding-left: 28px; }
  .poc-core { width: 194px; height: 194px; border-width: 14px; }
  .poc-core strong { font-size: 68px; }
  .poc-core-days { font-size: 22px; }
  .sec-poc .metrics { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sec-poc .metrics .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .sec-poc { padding: 56px 0 64px; }
  .sec-poc .container { padding-right: 24px; padding-left: 24px; }
  .sec-poc .poc-head { margin-bottom: 42px; }
  .sec-poc .poc-head h2 { margin-top: 30px; font-size: clamp(37px, 6vw, 46px); }
  .sec-poc .poc-head .lead { font-size: 16px; }
  .poc-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "diagram diagram"
      "person bot";
    gap: 34px 18px;
    min-height: 0;
    margin-top: 0;
  }
  .poc-diagram { height: auto; }
  .poc-diagram::before { top: 105px; width: 330px; height: 230px; }
  .poc-core {
    position: relative;
    top: auto;
    left: auto;
    width: 210px;
    height: 210px;
    margin: 0 auto 40px;
    border-width: 15px;
    transform: none;
  }
  .sec-poc .poc-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .sec-poc .poc-step,
  .sec-poc .poc-step-1,
  .sec-poc .poc-step-2,
  .sec-poc .poc-step-3,
  .sec-poc .poc-step-4 {
    position: relative;
    inset: auto;
    width: auto;
    height: 174px;
    padding: 28px 22px 22px 30px;
    border-radius: 30px;
  }
  .sec-poc .poc-step-4 { order: 3; }
  .sec-poc .poc-step-3 { order: 4; }
  .poc-side-slot { min-height: 210px; }
  .sec-poc .metrics { margin-top: 34px; }
}

@media (max-width: 600px) {
  .sec-poc { padding: 48px 0 54px; }
  .sec-poc .container { padding-right: 20px; padding-left: 20px; }
  .sec-poc .eyebrow { font-size: 11px; letter-spacing: 0.14em; }
  .sec-poc .eyebrow .num { min-width: 40px; height: 27px; font-size: 13px; }
  .sec-poc .poc-head { margin-bottom: 36px; }
  .sec-poc .poc-head h2 { margin-top: 26px; font-size: clamp(31px, 9vw, 38px); line-height: 1.34; }
  .sec-poc .poc-head .lead { margin-top: 20px; font-size: 15px; line-height: 1.85; }
  .sec-poc .poc-head .lead br { display: none; }
  .poc-main { gap: 28px 14px; }
  .poc-core { width: 190px; height: 190px; margin-bottom: 34px; border-width: 13px; }
  .poc-core strong { font-size: 64px; }
  .poc-core-days { font-size: 21px; }
  .sec-poc .poc-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sec-poc .poc-step,
  .sec-poc .poc-step-1,
  .sec-poc .poc-step-2,
  .sec-poc .poc-step-3,
  .sec-poc .poc-step-4 {
    grid-template-columns: 54px minmax(0, 1fr);
    height: 150px;
    padding: 24px 18px 20px 25px;
    border-radius: 24px;
  }
  .sec-poc .poc-step-3 { order: 3; }
  .sec-poc .poc-step-4 { order: 4; }
  .sec-poc .poc-step .n { top: -13px; left: -9px; width: 48px; height: 48px; font-size: 19px; }
  .poc-step-visual { width: 45px; height: 56px; }
  .sec-poc .poc-step h3 { font-size: 19px; }
  .sec-poc .poc-step p { font-size: 13.5px; }
  .poc-side-slot { min-height: 160px; }
  .sec-poc .metrics { margin-top: 28px; padding: 23px 18px; border-radius: 18px; }
  .sec-poc .metrics h3 { font-size: 20px; }
  .sec-poc .metrics .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sec-poc .metrics .chips .chip { min-height: 50px; font-size: 13px; }
  .sec-poc .poc-note { padding: 18px; font-size: 13.5px; }
}

/* ============================================================
   10 Process
   ============================================================ */
.sec-flow {
  --flow-blue: #0f55dd;
  --flow-orange: #ff582d;
  --flow-ink: #111a2b;
  --flow-line: #cbd7e7;
  position: relative;
  isolation: isolate;
  padding: 44px 0 50px;
  background: #fff;
  overflow: clip;
}
.sec-flow .container {
  max-width: 1580px;
  padding-right: 44px;
  padding-left: 44px;
}
.flow-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(520px, 1.07fr);
  min-height: 330px;
  align-items: stretch;
}
.sec-flow .flow-head {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: none;
  margin: 0;
  padding: 4px 0 24px;
}
.sec-flow .eyebrow {
  gap: 22px;
  margin: 0 0 26px;
  font-size: 15px;
  letter-spacing: 0.17em;
  color: #173a85;
}
.sec-flow .eyebrow .num {
  min-width: 62px;
  height: 36px;
  border-radius: 9px;
  background: var(--flow-blue);
  font-size: 17px;
  letter-spacing: 0.08em;
}
.sec-flow .flow-head h2 {
  font-family: var(--fv-font, var(--font-jp));
  font-size: clamp(48px, 4vw, 66px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.045em;
  color: var(--flow-ink);
}
.sec-flow .flow-head .lead {
  max-width: 760px;
  margin-top: 22px;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: #3d4d69;
}
.flow-hero-art {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.flow-hero-illustration {
  position: absolute;
  z-index: 1;
  inset: 58px 15% 25px 1%;
}
.flow-hero-illustration > img,
.flow-hero-illustration > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.flow-hero-art::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -90px -120px -30px 0;
  background: repeating-linear-gradient(
    117deg,
    transparent 0 108px,
    rgba(230, 236, 245, 0.48) 108px 210px,
    transparent 210px 322px
  );
}
.flow-hero-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 3.5%;
  bottom: 26px;
  left: 8%;
  height: 7px;
  border-radius: 50%;
  background: #dfe7f1;
  opacity: 0.92;
}
.flow-hand-note {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 5%;
  font-family: "Yomogi", cursive;
  font-size: clamp(25px, 2.1vw, 35px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: var(--flow-ink);
  transform: rotate(-4deg);
}
.flow-hand-note::after {
  content: "";
  display: block;
  width: 88%;
  height: 18px;
  margin: 4px 0 0 20%;
  border-top: 4px solid #e71f2b;
  border-radius: 50%;
  transform: rotate(-8deg);
}
.sec-flow .timeline-arrow {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  padding: 24px 32px 28px;
  border: 1px solid #d8e1ee;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(25, 56, 108, 0.055);
}
.sec-flow .timeline {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}
.sec-flow .timeline::before {
  left: 5.5%;
  right: 5.5%;
  top: 29px;
  border-top: 2px dashed #b8c7da;
}
.sec-flow .tl-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec-flow .tl-item .dot {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border: 3px solid var(--flow-line);
  background: #fff;
  box-shadow: 0 4px 11px rgba(27, 55, 98, 0.06);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--flow-ink);
}
.sec-flow .tl-item.phase-free .dot {
  border-color: var(--flow-blue);
  color: var(--flow-blue);
}
.sec-flow .tl-item.phase-poc .dot {
  border-color: var(--flow-ink);
  color: var(--flow-ink);
}
.sec-flow .tl-item.phase-live .dot {
  border-color: var(--flow-orange);
  background: var(--flow-orange);
  color: #fff;
}
.sec-flow .tl-illustration {
  display: block;
  width: 100%;
  height: 92px;
  margin-top: 12px;
}
.sec-flow .tl-illustration > img,
.sec-flow .tl-illustration > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.sec-flow .tl-item .t {
  display: grid;
  place-items: start center;
  min-height: 52px;
  margin-top: 8px;
  font-size: clamp(14px, 1.02vw, 18px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.035em;
  color: var(--flow-ink);
}
.sec-flow .tl-item .ph {
  display: grid;
  place-items: center;
  width: min(112px, 90%);
  min-height: 34px;
  margin-top: 0;
  padding: 6px 8px;
  border-radius: 9px;
  background: #f2f5fa;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #3c5682;
}
.sec-flow .timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 26px;
  font-size: 16px;
  color: #42516b;
}
.sec-flow .timeline-legend li {
  gap: 16px;
  min-height: 38px;
  padding: 0 34px;
  border-right: 1px solid #d7e0eb;
}
.sec-flow .timeline-legend li:first-child { padding-left: 22px; }
.sec-flow .timeline-legend li:last-child { border-right: 0; }
.sec-flow .timeline-legend .sw {
  width: 26px;
  height: 26px;
  border-width: 3px;
}
.sec-flow .timeline-legend .sw.free { border-color: var(--flow-blue); }
.sec-flow .timeline-legend .sw.poc { border-color: var(--flow-ink); }
.sec-flow .timeline-legend .sw.live {
  border-color: var(--flow-orange);
  background: var(--flow-orange);
}

@media (max-width: 1320px) {
  .sec-flow .container { padding-right: 32px; padding-left: 32px; }
  .flow-top { grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr); min-height: 310px; }
  .sec-flow .flow-head h2 { font-size: clamp(46px, 4.6vw, 60px); }
  .sec-flow .timeline-arrow { padding-right: 28px; padding-left: 28px; }
  .sec-flow .tl-item .dot { width: 56px; height: 56px; font-size: 18px; }
  .sec-flow .timeline::before { top: 27px; }
  .sec-flow .tl-illustration { height: 80px; }
  .sec-flow .tl-item .t { min-height: 50px; font-size: 15px; }
  .sec-flow .tl-item .ph { font-size: 12px; }
}

@media (min-width: 1021px) and (max-height: 820px) {
  .sec-flow { padding-top: 22px; padding-bottom: 26px; }
  .flow-top { min-height: 238px; }
  .sec-flow .flow-head { padding-bottom: 12px; }
  .sec-flow .eyebrow { margin-bottom: 16px; }
  .sec-flow .flow-head h2 { font-size: clamp(42px, 3.65vw, 58px); }
  .sec-flow .flow-head .lead { margin-top: 14px; font-size: 17px; }
  .flow-hero-illustration { top: 34px; }
  .flow-hand-note { top: 8px; font-size: clamp(22px, 1.8vw, 30px); }
  .sec-flow .timeline-arrow { padding-top: 18px; padding-bottom: 20px; }
  .sec-flow .tl-item .dot { width: 50px; height: 50px; font-size: 17px; }
  .sec-flow .timeline::before { top: 24px; }
  .sec-flow .tl-illustration { height: 64px; margin-top: 8px; }
  .sec-flow .tl-item .t { min-height: 42px; margin-top: 5px; font-size: 14px; }
  .sec-flow .tl-item .ph { min-height: 28px; padding-top: 4px; padding-bottom: 4px; font-size: 10px; }
  .sec-flow .timeline-legend { margin-top: 16px; font-size: 14px; }
  .sec-flow .timeline-legend li { min-height: 30px; }
  .sec-flow .timeline-legend .sw { width: 22px; height: 22px; }
}

@media (max-width: 1020px) {
  .sec-flow { padding: 64px 0 72px; }
  .flow-top { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sec-flow .flow-head { padding: 0 0 20px; }
  .sec-flow .flow-head h2 { font-size: clamp(46px, 7vw, 60px); }
  .sec-flow .flow-head .lead { font-size: 19px; }
  .flow-hero-art { width: min(720px, 100%); min-height: 300px; margin: 0 0 0 auto; }
  .flow-hero-illustration { inset: 40px 12% 22px 2%; }
  .sec-flow .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 16px; }
  .sec-flow .timeline::before { display: none; }
  .sec-flow .tl-illustration { height: 110px; }
  .sec-flow .tl-item .t { min-height: 58px; font-size: 17px; }
  .sec-flow .tl-item .ph { width: min(130px, 90%); }
}

@media (max-width: 600px) {
  .sec-flow { padding: 52px 0 60px; }
  .sec-flow .container { padding-right: 20px; padding-left: 20px; }
  .sec-flow .eyebrow { gap: 12px; margin-bottom: 26px; font-size: 11px; }
  .sec-flow .eyebrow .num { min-width: 42px; height: 28px; border-radius: 7px; font-size: 13px; }
  .sec-flow .flow-head h2 { font-size: clamp(38px, 12vw, 48px); line-height: 1.23; }
  .sec-flow .flow-head .lead { margin-top: 20px; font-size: 15px; line-height: 1.8; }
  .flow-hero-art { min-height: 250px; margin-top: 10px; }
  .flow-hero-art::before { inset: -40px -80px -20px 5%; background-size: auto; }
  .flow-hero-art::after { right: 0; bottom: 20px; left: 0; height: 5px; }
  .flow-hero-illustration { inset: 30px 5% 20px 0; }
  .flow-hand-note { top: 13px; right: 1%; font-size: 22px; }
  .flow-hand-note::after { border-top-width: 3px; }
  .sec-flow .timeline-arrow { padding: 26px 18px; border-radius: 18px; }
  .sec-flow .timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .sec-flow .timeline::before {
    display: block;
    top: 28px;
    right: auto;
    bottom: 28px;
    left: 27px;
    border-top: 0;
    border-left: 2px dashed #b8c7da;
  }
  .sec-flow .tl-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 86px;
    text-align: left;
  }
  .sec-flow .tl-illustration {
    grid-column: 2 / 4;
    width: 100%;
    height: 92px;
    margin: 0 0 12px;
  }
  .sec-flow .tl-illustration:empty { display: none; }
  .sec-flow .tl-item .dot {
    width: 56px;
    height: 56px;
    margin: 0;
    border-width: 3px;
    font-size: 17px;
  }
  .sec-flow .tl-item .t {
    display: block;
    min-height: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
  }
  .sec-flow .tl-item .ph {
    width: 76px;
    min-height: 32px;
    margin: 0;
    font-size: 10px;
  }
  .sec-flow .timeline-legend {
    display: grid;
    gap: 13px;
    margin-top: 28px;
    font-size: 14px;
  }
  .sec-flow .timeline-legend li,
  .sec-flow .timeline-legend li:first-child {
    min-height: 30px;
    padding: 0;
    border-right: 0;
  }
  .sec-flow .timeline-legend .sw { width: 22px; height: 22px; border-width: 3px; }
}

/* ---------- 仕上げ調整（文字組み・見切れ） ---------- */

/* 日本語の見出し・本文を文節単位で折り返し、1文字だけ次行に落ちるのを防ぐ */
.support-copy .big,
.metrics h3,
.contact-grid h2,
.form-foot .note,
.poc-lead,
.pb-h2,
.fit-h2 {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.support-copy .big,
.metrics h3,
.contact-grid h2 {
  text-wrap: balance;
}

/* 07: 右端のGrok Botが見切れていたため内側へ寄せる */
.support-bot { right: 3.5%; }
@media (max-width: 1200px) { .support-bot { right: 3%; } }
@media (max-width: 720px)  { .support-bot { right: 2%; } }

/* ヘッダーナビ: 1600px前後で各項目が2行に折れていたため折り返しを禁止し、詰めて収める */
.nav a { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1700px) {
  .nav { gap: 0; }
  .nav a { padding: 8px 8px; font-size: 0.86rem; }
}
@media (min-width: 1025px) and (max-width: 1480px) {
  .nav a { padding: 8px 6px; font-size: 0.8rem; }
}

/* ---------- Grok Bot ＋ ノートPC の統合イラスト ---------- */
/* 01: 従来の .grok(頭部) + .laptop(SVG) を1枚の生成イラストに置き換え */
.cmp-art-new .grok-laptop {
  position: absolute;
  left: 22%;
  top: 24px;
  width: 218px;
  height: auto;
  z-index: 1;
}
/* 03: ヒーロー中央 */
.uc-hero .grok-desk {
  position: absolute;
  left: 28cqw;
  top: 25cqw;
  width: 34cqw;
  height: auto;
  z-index: 3;
}

@media (max-width: 1440px) {
  .cmp-art-new .grok-laptop { width: 186px; top: 34px; }
}
@media (max-width: 1200px) {
  .cmp-art-new .grok-laptop { width: 170px; }
}
@media (max-width: 720px) {
  .cmp-art-new .grok-laptop { width: 150px; left: 20%; }
}

/* === agent-A5B2 :: 06 card02 + 09 security illustrations === */
/* --- 06 カード02: 手描きSVG（盾/DB）を生成イラスト1枚に差し替え --- */
.pb-art-2 .pb-i2 {
  left: -3cqw;
  bottom: -1cqw;
  width: 106cqw;
  height: auto;
  z-index: 1;
}
.pb-art-2 .pb-mini { left: 30cqw; top: 2cqw; }
.pb-art-2 .pb-mini::after { left: auto; right: 12cqw; bottom: -1.8cqw; }

/* --- 09 セキュリティ: 見出し横に3段階のイラストを追加 --- */
#security .sec9-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 44%);
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}
#security .sec9-top .section-head { margin-bottom: 0; }
#security .sec9-top .section-head h2,
#security .sec9-top .section-head .lead { word-break: auto-phrase; }
#security .sec9-top .section-head .lead { max-width: 30em; }
#security .sec9-fig {
  justify-self: end;
  width: 100%;
  max-width: 480px;
}
#security .sec9-fig img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 980px) {
  #security .sec9-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 36px;
  }
  #security .sec9-fig { justify-self: center; max-width: 400px; }
}
@media (max-width: 600px) {
  #security .sec9-fig { max-width: 300px; }
}

/* --- 09 各レベルカード下部の小イラスト --- */
#security .tier { display: flex; flex-direction: column; }
#security .tier ul { padding-bottom: 8px; }
#security .tier-fig {
  margin-top: auto;
  padding: 10px 24px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 108px;
}
#security .tier-fig img {
  height: 92px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* LEVEL 1 はBot単体のため、他2枚とBotの大きさを揃えるよう少し小さく表示する */
#security .tier.auto .tier-fig img { height: 74px; }
@media (max-width: 900px) {
  #security .tier-fig { min-height: 0; padding: 6px 24px 18px; }
  #security .tier-fig img { height: 80px; }
}

/* ================================================================
   04 GLOBAL ADOPTION — 追補
   ================================================================ */

/* --- B1: 「導入が進む部門」リング金具とラベルの重なり解消 --- */
/* 原因: グリッドが `1fr 1fr`（= minmax(auto,1fr)）で、ラベルが white-space:nowrap の
   ため列の最小幅が「マーケティング」の全長になり、カードから溢れて
   隣カードのリング金具に重なっていた。長いラベルを1行占有にして解消する。 */
.dept-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.dept-grid li {
  min-width: 0;
  padding-right: 14px;
}
/* マーケティング（最長ラベル）を横1行占有に。開発は財務と並ぶ */
.dept-grid .m-orange { grid-column: 1 / -1; }
.dept-grid .wide { grid-column: auto; }
.dept-grid b { min-width: 0; }

/* リング金具は「穴に通した開いた金具」として、カード左端をまたぐ位置に置く */
.dept-grid .ringclip {
  left: 12px;
  width: 30px;
  height: 30px;
  border-width: 3.5px;
  border-top-color: transparent;
  transform: translate(-50%, -50%) rotate(-34deg);
}

@media (max-width: 720px) {
  .dept-grid { grid-template-columns: minmax(0, 1fr); }
  .dept-grid .m-orange { grid-column: auto; }
}

/* --- A4: 事例フローの入力カード／成果バッジを生成イラストに差し替え --- */
.flow-inputs .fi {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
}
.flow-inputs span {
  height: 60px;
  gap: 10px;
  padding: 0 18px 0 12px;
}
.flow-result .ri {
  width: 70px;
  height: 70px;
  flex: none;
  object-fit: contain;
}
@media (max-width: 1440px) {
  .flow-inputs span { height: 56px; font-size: 14px; }
  .flow-inputs .fi { width: 40px; height: 40px; }
  .flow-result .ri { width: 62px; height: 62px; }
}
@media (max-width: 1200px) {
  .flow-inputs span { height: 52px; padding: 0 12px; }
}
@media (max-width: 720px) {
  .flow-inputs span { height: 54px; padding: 0 14px; }
}

/* ---------- 01 主な特徴カード: 生成イラスト1枚化 ---------- */
/* .feat-art-1〜5 の座標指定（本ファイル上部）は個別SVG用で、現在は未使用。 */
.feat-panel .feat-art {
  width: 100%;
  height: 120px;
  margin: 2px auto 0;
}
.feat-panel .feat-art img.feat-pic {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* ============================================================
   03 USE CASES ビジュアル調整
   ============================================================ */

/* --- ヒーロー周辺のアイコンを生成イラストに差し替え --- */
/* 高さは画像の実比率から求めるので aspect-ratio で指定し、height は auto にする */
.uc-hero img.ico {
  height: auto;
  object-fit: contain;
  object-position: center center;
}
.uc-hero .i-search   { left: 19.2cqw; top: 10.7cqw; width: 9cqw;    aspect-ratio: 177 / 180; }
.uc-hero .i-sheet    { left: 44.3cqw; top: 13.4cqw; width: 7.6cqw;  aspect-ratio: 178 / 180; }
.uc-hero .i-page     { left: 67.4cqw; top: 20.9cqw; width: 7.6cqw;  aspect-ratio: 144 / 180; }
.uc-hero .i-shield   { left: 14.6cqw; top: 34.6cqw; width: 7.2cqw;  aspect-ratio: 143 / 180; }
.uc-hero .i-envelope { left: 79.9cqw; top: 38.3cqw; width: 8cqw;    aspect-ratio: 180 / 133; }

/* --- 部門タブ内の浮遊カード --- */
.uc-scene .mini {
  column-gap: 1.7cqw;
  padding: 2.1cqw 2.4cqw 2.2cqw;
  border-radius: 2cqw;
  box-shadow:
    0 1.1cqw 2.6cqw rgba(26, 33, 46, 0.11),
    0 0.2cqw 0.6cqw rgba(26, 33, 46, 0.05);
}
/* アイコンは淡い角丸タイルに載せて「アプリの一枚」らしく見せる */
.uc-scene .mini .mi {
  box-sizing: border-box;
  width: 7.2cqw;
  height: 7.2cqw;
  padding: 1.1cqw;
  border-radius: 1.8cqw;
  background: #eaf1fe;
}
.uc-scene .m2 .mi { background: #f1f3f8; }
/* アイコンタイル分の幅を確保する（ラベルは nowrap のため） */
.uc-scene .m1 { width: 32cqw; }
.uc-scene .m2 { left: 66cqw; width: 30cqw; }
.uc-scene .m3 { width: 32cqw; }
.uc-scene .mini i { height: 1cqw; background: #e2e5ec; }
.uc-scene .mini i:nth-of-type(1) { width: 100%; }
.uc-scene .mini i:last-child { width: 62%; }
/* m1 だけはブラウザ風のヘッダーを持たせる */
.uc-scene .m1 .bar {
  position: relative;
  height: 3.2cqw;
  margin: -2.1cqw -2.4cqw 1.3cqw;
  border-radius: 2cqw 2cqw 0 0;
  background:
    radial-gradient(circle at 2.6cqw 50%, #ff5f57 0 0.52cqw, transparent 0.62cqw),
    radial-gradient(circle at 4.5cqw 50%, #febc2e 0 0.52cqw, transparent 0.62cqw),
    radial-gradient(circle at 6.4cqw 50%, #28c840 0 0.52cqw, transparent 0.62cqw),
    linear-gradient(#f1f3f7, #f1f3f7);
}
.uc-scene .m1 .bar::after {
  content: "";
  position: absolute;
  left: 8.4cqw;
  right: 1.8cqw;
  top: 1cqw;
  height: 1.2cqw;
  border-radius: 0.6cqw;
  background: #dde1e9;
}


/* ============================================================
   04 活用シナリオ（sec-scn）
   語彙は既存に準拠：番号バッジ=.poc-step .n / 連結シェブロン=.support-process
   部門↔役割別Bot: 営業=orange 採用=blue マーケ=green 経理=brown CS=gray 開発=black
   ============================================================ */
.sec-scn { padding: 62px 0 54px; isolation: isolate; }
.sec-scn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  z-index: -1;
  background: linear-gradient(118deg, transparent 0 56%, #f7f7f9 56% 66%, transparent 66% 78%, #f8f8fa 78% 86%, transparent 86%);
  pointer-events: none;
}

/* ---- 見出し行 ---- */
.scn-top-row {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 32px;
  align-items: center;
}
.scn-h2 {
  margin-top: 22px;
  font-size: clamp(1.95rem, 3.5vw, 3.7rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
.scn-lead {
  margin-top: 26px;
  font-size: clamp(0.95rem, 1.14vw, 1.2rem);
  font-weight: 500;
  line-height: 1.9;
  color: var(--fv-ink-2);
  word-break: auto-phrase;
}

/* ---- シーン（正アセットPNGをCSS合成）---- */
.scn-scene { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16 / 9; }
.scn-scene > * { position: absolute; }
.scn-plate { left: 4cqw; top: 8cqw; right: 6cqw; bottom: 6cqw; border-radius: 3cqw; background: #fdf3f3; }
.scn-grok { left: 1cqw; top: 17cqw; width: 20cqw; height: auto; z-index: 2; }
.scn-doc {
  display: grid; align-content: center; gap: 1.1cqw;
  width: 21cqw; padding: 2.2cqw 2cqw; border-radius: 1.6cqw;
  background: var(--fv-white); box-shadow: 0 6px 22px rgba(27, 28, 32, 0.06); z-index: 2;
}
.scn-doc i { display: block; height: 1.1cqw; border-radius: 999px; background: var(--fv-ph); }
.scn-doc i:nth-child(1) { width: 52%; background: var(--fv-ph-2); }
.scn-doc i:nth-child(2) { width: 100%; }
.scn-doc i:nth-child(3) { width: 78%; }
.scn-doc.p1 { left: 24cqw; top: 10cqw; }
.scn-doc.p2 { left: 24cqw; top: 25cqw; }
.scn-doc.p3 { left: 24cqw; top: 40cqw; }
.scn-bot { left: 49cqw; top: 19cqw; width: 11cqw; height: auto; z-index: 3; }
.scn-person { right: 2cqw; bottom: 4cqw; width: 30cqw; height: auto; z-index: 2; }
.scn-check {
  display: grid; place-items: center;
  right: 34cqw; top: 32cqw; width: 7cqw; height: 7cqw;
  border-radius: 999px; background: #2ec46a; z-index: 4;
}
.scn-check svg { width: 4.2cqw; height: 4.2cqw; }

/* ============ FEATURED（横レール）============ */
.scn-featured {
  margin-top: 44px;
  padding: 30px 32px 28px;
  border-radius: 24px;
  background: var(--fv-white);
  border: 1px solid var(--fv-line);
  box-shadow: var(--fv-shadow);
}
.scn-featured__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.scn-feat-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 6px; background: var(--fv-ink);
  font-family: var(--fv-font-en); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; color: var(--fv-white);
}
.scn-featured__title {
  flex: 1 1 100%;
  margin-top: 6px;
  font-size: clamp(1.25rem, 1.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
.scn-featured__ask {
  margin-top: 6px;
  font-family: var(--fv-font-hand);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  color: var(--fv-ink-2);
  word-break: auto-phrase;
}

.scn-rail-wrap {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #f7f8fa;
}
.scn-rail__actor { width: 72px; height: auto; }
.scn-rail {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scn-rail__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px 12px 13px;
  border-radius: 14px;
  background: var(--fv-white);
  border: 1px solid #edf0f4;
  box-shadow: 0 6px 22px rgba(27, 28, 32, 0.06);
}
.scn-rail__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%; right: -17px;
  width: 9px; height: 9px;
  border-right: 2px solid #969caa;
  border-bottom: 2px solid #969caa;
  transform: translateY(-50%) rotate(-45deg);
}
.scn-rail__n {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--fv-red);
  font-family: var(--fv-font-en);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--fv-white);
}
.scn-rail__t {
  font-size: 12.5px; line-height: 1.6; font-weight: 500;
  color: var(--fv-ink-2); word-break: auto-phrase;
}

.scn-gateline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px auto;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.scn-arrow { justify-self: center; width: 9px; height: 9px; border-right: 2px solid #969caa; border-bottom: 2px solid #969caa; transform: rotate(-45deg); }
.scn-done {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 12px;
  background: #eafaf1; font-size: 14px; font-weight: 700; color: #14804a;
}
.scn-done .si { width: 17px; height: 17px; }

/* ============ 部門グループ ============ */
.scn-groups { display: grid; gap: 34px; margin-top: 44px; }
.scn-group { --dc: var(--fv-ink); }
.scn-group.d-sales { --dc: #ff6700; }
.scn-group.d-hr    { --dc: #1084fe; }
.scn-group.d-mkt   { --dc: #00c972; }
.scn-group.d-fin   { --dc: #936439; }
.scn-group.d-cs    { --dc: #777777; }
.scn-group.d-dev   { --dc: #000000; }

.scn-group__head { display: flex; align-items: center; gap: 12px; }
.scn-group__bot { width: 40px; height: auto; }
.scn-group__name { font-size: 19px; font-weight: 800; color: var(--fv-ink); }
.scn-group__count {
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--dc) 12%, #fff);
  font-family: var(--fv-font-en); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--dc);
}
.scn-group__rule { flex: 1 1 auto; height: 2px; border-radius: 999px; background: color-mix(in srgb, var(--dc) 22%, #fff); }
.scn-group__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }

/* ---- カード ---- */
.scn-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--fv-white);
  border: 1px solid var(--fv-line);
  box-shadow: 0 6px 22px rgba(27, 28, 32, 0.06);
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.scn-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dc); }
.scn-card:hover { box-shadow: var(--fv-shadow); transform: translateY(-2px); }
.scn-card > summary { position: relative; display: grid; gap: 9px; padding: 18px 20px 18px 22px; cursor: pointer; list-style: none; }
.scn-card > summary::-webkit-details-marker { display: none; }
.scn-meta { display: flex; align-items: center; gap: 8px; }
.scn-steps-n {
  padding: 3px 9px; border-radius: 6px; background: #f0f1f4;
  font-family: var(--fv-font-en); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--fv-ink-2);
}
.scn-src { font-family: var(--fv-font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--fv-muted); }
.scn-name { font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--fv-ink); word-break: auto-phrase; }
.scn-ask { font-family: var(--fv-font-hand); font-size: 15px; line-height: 1.7; color: var(--fv-ink-2); word-break: auto-phrase; }
.scn-auto {
  justify-self: start; padding: 3px 9px; border-radius: 6px;
  background: #f0f1f4; font-size: 12.5px; color: var(--fv-ink-3);
}
.scn-plus { margin-left: auto; position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.scn-plus::before, .scn-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--fv-ink-3); transform: translate(-50%, -50%); transition: opacity 0.15s ease;
}
.scn-plus::before { width: 13px; height: 2px; }
.scn-plus::after  { width: 2px; height: 13px; }
.scn-card[open] .scn-plus::after { opacity: 0; }

/* 承認ゲート（閉じていても見える＝このカードの視覚的な要） */
.scn-gate {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 2px; padding: 10px 12px; border-radius: 10px;
  background: #fdf3f3; font-size: 12.5px; line-height: 1.65;
  color: var(--fv-ink-2); word-break: auto-phrase;
}
.scn-gate .si { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--fv-red); }
.scn-gate b { margin-right: 6px; font-weight: 700; color: var(--fv-red); }
.scn-gate.is-none { background: #f7f8fa; color: var(--fv-muted); }
.scn-featured .scn-gate { margin-top: 0; padding: 12px 16px; font-size: 13.5px; }

.scn-body { padding: 14px 20px 18px 22px; border-top: 1px solid var(--fv-line); }
.scn-body__cap {
  margin-bottom: 9px;
  font-family: var(--fv-font-en); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--fv-muted);
}
.scn-steps { display: grid; gap: 7px; margin: 0; padding-left: 1.35em; list-style: decimal; }
.scn-steps li { font-size: 13.5px; line-height: 1.75; color: var(--fv-ink-2); word-break: auto-phrase; }

.scn-note { margin-top: 30px; font-size: 12.5px; line-height: 1.85; color: var(--fv-muted); word-break: auto-phrase; }
.scn-note b { font-weight: 700; color: var(--fv-ink-3); }

/* 部門チップ（FEATURED内）*/
.scn-dept {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px 0 7px; border-radius: 999px;
  background: #fff2e8; font-size: 12px; font-weight: 700; color: #b34700;
}
.scn-dept img { width: 18px; height: auto; }

/* ---- レスポンシブ 1440 / 1200 / 720 ---- */
@media (max-width: 1440px) {
  .scn-h2 { font-size: clamp(1.9rem, 3.3vw, 3.1rem); }
  .scn-rail { gap: 22px; }
  .scn-rail__item:not(:last-child)::after { right: -15px; }
}
@media (max-width: 1200px) {
  .scn-top-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .scn-scene { max-width: 720px; margin: 0 auto; }
  .scn-lead br { display: none; }
  .scn-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .scn-rail__item:not(:nth-child(4n)):not(:last-child)::after { right: -14px; }
  .scn-rail__item:nth-child(4n)::after { display: none; }
  .scn-group__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sec-scn { padding: 48px 0 40px; }
  .scn-h2 { font-size: clamp(1.6rem, 7vw, 2.25rem); }
  .scn-h2 br { display: none; }
  .scn-featured { margin-top: 30px; padding: 20px 16px 18px; border-radius: 18px; }
  .scn-rail-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
  .scn-rail__actor { width: 56px; }
  .scn-rail { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .scn-rail__item::after { display: none !important; }
  .scn-gateline { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .scn-arrow { justify-self: start; transform: rotate(45deg); }
  .scn-done { justify-self: start; }
  .scn-groups { gap: 26px; margin-top: 30px; }
  .scn-group__cards { grid-template-columns: minmax(0, 1fr); }
  .scn-card > summary { padding: 16px 16px 16px 18px; }
  .scn-body { padding: 12px 16px 16px 18px; }
  .scn-name { font-size: 16px; }
}

/* ============================================================
   背景（2026-09-10 改訂）
   斜めの柄は全面に敷かない。全セクションに出すと壁紙になり、
   アクセントとして意味を失う。繋がりは縦リズムと幅の統一で作る。
   ============================================================ */
:root { --fv-band: #f5f7fa; }

/* セクション個別の斜めモチーフは無効化 */
#about::before, #how::before, #usecases::before,
#adoption::before, #fit::before, #problem::before, #support::before,
#poc::before, #security::before, #flow::before, #faq::before,
.sec-about::before, .sec-uc::before, .sec-adopt::before,
.sec-prob::before, .sec-support::before {
  display: none !important;
}

/* 地色は明示する（body 透過による意図しない色ムラを避ける） */
#about, #usecases, #adoption, #fit, #problem, #support, #poc, #flow {
  background: var(--fv-white);
}
#how, #security, #faq { background: var(--fv-white); }

/* --- 差し色：地色は変えず、中身をグレーのブロックで括る --- */
/* 02 チャットステージ */
.how2-stage { background: var(--fv-band) !important; }
/* 11 FAQ */
.faq-grid {
  padding: 10px 30px 14px;
  border-radius: 22px;
  background: var(--fv-band);
}
.faq-item:last-child, .faq-grid > .faq-item:nth-last-child(2) { border-bottom: 0; }

/* ============================================================
   活用事例ページ（/use-cases/）
   トップの .scn-* を流用し、下層ページ固有の要素だけ追加する
   ============================================================ */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  padding-top: 26px;
  font-size: 12.5px; color: var(--fv-muted);
}
.breadcrumb a { color: var(--fv-ink-3); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-hidden] { color: var(--fv-ph-2); }

.scn-head--page { margin-top: 18px; }
.scn-head--page .scn-h2 { margin-top: 18px; }
.sec-scn h1.scn-h2 { font-size: clamp(1.95rem, 3.2vw, 3.2rem); }

/* 部門ページの見出し部 */
.ucp-top {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: 32px; align-items: center;
}
.ucp-art { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16 / 10; }
.ucp-art > * { position: absolute; }
.ucp-plate { inset: 6cqw 4cqw 4cqw 6cqw; border-radius: 4cqw; background: #fdf3f3; }
.ucp-person { right: 4cqw; bottom: 2cqw; width: 46cqw; height: auto; z-index: 2; }
.ucp-bot { left: 8cqw; top: 22cqw; width: 20cqw; height: auto; z-index: 2; }

/* 任せられること／成果 */
.ucp-lists {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 34px;
}
.ucp-list {
  padding: 24px 26px 26px;
  border-radius: 16px; background: var(--fv-white);
  border: 1px solid var(--fv-line);
  box-shadow: 0 6px 22px rgba(27, 28, 32, 0.06);
}
.ucp-list h2 {
  margin-bottom: 14px;
  font-size: 16px; font-weight: 800; color: var(--fv-ink);
}
.ucp-results { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ucp-results li {
  position: relative; padding-left: 22px;
  font-size: 14px; line-height: 1.7; color: var(--fv-ink-2);
}
.ucp-results li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--fv-red);
}

/* グループ見出しの「詳細」リンク */
.scn-group__more {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  font-size: 13.5px; font-weight: 700; color: var(--fv-red);
  text-decoration: none;
}
.scn-group__more:hover { text-decoration: underline; }
.scn-group__more .fv-arrow { width: 16px; height: 10px; }

/* ほかの部門へ */
.ucp-others { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--fv-line); }
.ucp-others__cap {
  font-family: var(--fv-font-en); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--fv-muted);
}
.ucp-others__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ucp-others__links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: 999px;
  background: var(--fv-white); border: 1px solid var(--fv-line);
  font-size: 14px; font-weight: 700; color: var(--fv-ink); text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ucp-others__links a:hover { border-color: var(--fv-ph-2); box-shadow: 0 6px 22px rgba(27,28,32,0.06); }
.ucp-others__links img { width: 24px; height: auto; }

/* ページ末CTA */
.uc-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  margin-top: 36px; padding: 30px 34px;
  border-radius: 20px; background: #fdf3f3;
}
.uc-cta__lead { font-size: 17px; font-weight: 700; line-height: 1.7; color: var(--fv-ink); word-break: auto-phrase; }
.uc-cta .btn { height: 58px; padding: 0 28px; }

@media (max-width: 1200px) {
  .ucp-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ucp-art { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .breadcrumb { padding-top: 18px; font-size: 11.5px; }
  .ucp-lists { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
  .ucp-list { padding: 18px 18px 20px; }
  .scn-group__more { width: 100%; margin-top: 6px; }
  .uc-cta { padding: 22px 18px; margin-top: 28px; }
  .uc-cta .btn { width: 100%; }
  .scn-head--page .scn-h2 br { display: none; }
}

/* ============================================================
   縦リズムの整理（2026-09-10）
   旧デザイン（.section）の 104px パディングと、内容量と無関係に
   ビューポート高を強制していた min-height を、新デザイン側の
   リズム（66px / 56px）へ揃える。内容は削っていない。
   ============================================================ */

/* #support: 内容は772pxしかないのに 100svh を強制していたため空白が出ていた */
.section.sec-support { min-height: 0; }

/* 旧デザイン3セクションの 104px を新デザインの 66/56 に揃える */
#security, #contact { padding-top: 66px; padding-bottom: 56px; }
#faq { padding-top: 66px; }   /* 下は内容が接しているため据え置き */

/* フォームの用件ラベルが中途半端に折り返さないように */
.choice label { word-break: auto-phrase; line-height: 1.5; }

/* ============================================================
   セクション間の接続詞UI（.sec-bridge）
   物語の転換点にだけ置く。
   矢印は「下へ続く」意味なので、横に添えずテキストの下に置く。
   ============================================================ */
.sec-bridge {
  position: relative;
  background: var(--fv-white);
  padding: 10px 0 14px;
}
.sec-bridge__inner {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
}
.sec-bridge__fig {
  grid-row: 1;
  width: auto;
  height: 78px;
}
.sec-bridge__text {
  grid-row: 1;
  font-family: var(--fv-font-hand);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.6;
  color: var(--fv-ink-2);
  word-break: auto-phrase;
}
.sec-bridge__text .lead { color: var(--fv-muted); }
.sec-bridge__text em {
  font-style: normal;
  font-weight: 700;
  color: var(--fv-ink);
  background: linear-gradient(transparent 68%, rgba(245, 197, 66, 0.55) 68%);
}
/* 矢印：2列ぶんの下に、中央で */
.sec-bridge__arrow {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: 26px;
  height: 34px;
  margin-top: 2px;
  color: var(--fv-red);
}

@media (max-width: 720px) {
  .sec-bridge { padding: 6px 0 10px; }
  .sec-bridge__inner { gap: 2px 12px; }
  .sec-bridge__fig { height: 58px; }
  .sec-bridge__text { font-size: 1rem; }
  .sec-bridge__arrow { width: 20px; height: 26px; }
}

/* ============================================================
   役割別Botの配置（.role-bot）
   要素の種類ごとに担当Botを固定し、「誰が言っているか」を示す。
   注意=gray / 承認=black / 提案=orange / 前進=green / 受付=grokbot
   小さく置くこと。大きくすると本文より目立って読みを邪魔する。
   ============================================================ */
.role-bot {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  height: 26px;
  margin-left: auto;
}
.role-bot--lg { height: 38px; margin-left: 0; margin-right: 4px; }

/* 注記バナー：右端に小さく添える */
.poc-note .role-bot { margin-left: 14px; }

/* 提案バナー：電球の隣に並べる */
.pb-cta .role-bot { height: 30px; margin-left: 10px; }

/* シナリオの根拠注記：文頭に置く */
.scn-note .role-bot {
  height: 22px;
  margin: 0 8px -4px 0;
  vertical-align: -4px;
  float: none;
}

/* フォーム見出し */
.form-card h3 { display: flex; align-items: center; gap: 10px; }
.role-bot--grok { height: 28px; margin-left: 0; }

@media (max-width: 720px) {
  .role-bot { height: 22px; }
  .role-bot--lg { height: 30px; }
  .pb-cta .role-bot { height: 24px; }
}


/* ============================================================
   ヘッダーのブランドマーク
   フッターは既に Grok Bot を持っているのにヘッダーは文字だけ、
   という不一致を解消する。スクロール後は少し引き締める。
   ============================================================ */
.site-header .brand { gap: 9px; }
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f2f3f6;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.brand-mark img {
  width: 26px;
  height: auto;
  display: block;
}
.site-header .brand:hover .brand-mark { background: #e9eaee; transform: translateY(-1px); }

/* スクロール後：マークを一段小さくして視線を本文へ渡す */
.site-header.is-scrolled .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
.site-header.is-scrolled .brand-mark img { width: 23px; }

@media (max-width: 720px) {
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .brand-mark img { width: 23px; }
  .site-header .brand { gap: 8px; }
}

/* ============================================================
   モバイルメニュー内のCTA
   720px以下は .header-actions が display:none になるため、
   ヘッダーから主CTAへ到達できなかった。メニュー内に置く。
   ============================================================ */
.nav-cta { display: none; }
@media (max-width: 720px) {
  .nav-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: 6px;
  }
}

/* 部門グループの見出し：狭い幅では折り返す */
@media (max-width: 720px) {
  .scn-group__head { flex-wrap: wrap; }
  .scn-group__rule { flex-basis: 100%; order: 9; height: 0; }
  .scn-group__more { width: auto; margin: 4px 0 0; }
}

/* 見出し内に置く担当Bot */
.role-bot--inline {
  height: 30px;
  margin: 0 10px -4px 0;
  vertical-align: -4px;
  display: inline-block;
}
/* 送信完了 */
.form-thanks { text-align: center; }
.form-thanks__bot { display: block; width: 52px; height: auto; margin: 0 auto 12px; }

@media (max-width: 720px) {
  .role-bot--inline { height: 24px; margin-right: 8px; }
}

/* ============================================================
   404
   Grok Bot が仕事を見つけられなかった、という場面にする
   ============================================================ */
.sec-404 { padding: 40px 0 80px; }
.nf-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.nf-art {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 10px;
  aspect-ratio: 3 / 2;
}
.nf-art > * { position: absolute; }
.nf-plate { inset: 14% 8% 8% 8%; border-radius: 6cqw; background: #fdf3f3; }
.nf-grok { left: 50%; top: 26%; width: 36cqw; height: auto; transform: translateX(-50%); z-index: 2; }
.nf-bot { z-index: 2; height: auto; }
.nf-bot--a { left: 9cqw; top: 30cqw; width: 13cqw; }
.nf-bot--b { right: 9cqw; top: 22cqw; width: 12cqw; }
.nf-dot {
  width: 2.6cqw; height: 2.6cqw; border-radius: 999px;
  background: var(--fv-ph-2); z-index: 3;
}
.nf-dot--1 { left: 40cqw; top: 16cqw; }
.nf-dot--2 { left: 48cqw; top: 12cqw; }
.nf-dot--3 { left: 56cqw; top: 16cqw; }

.sec-404 .sec-num { justify-content: center; }
.nf-h1 {
  margin-top: 16px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
.nf-lead {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--fv-ink-3);
  word-break: auto-phrase;
}
.nf-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 12px; margin-top: 26px;
}
.nf-links .btn { height: 56px; padding: 0 26px; }
.nf-nav { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--fv-line); }
.nf-nav__cap {
  font-family: var(--fv-font-en); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--fv-muted);
}
.nf-nav__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.nf-nav__links a { font-size: 14px; font-weight: 700; color: var(--fv-ink-2); text-decoration: none; }
.nf-nav__links a:hover { color: var(--fv-red); text-decoration: underline; }

@media (max-width: 720px) {
  .sec-404 { padding: 24px 0 56px; }
  .nf-h1 br { display: none; }
  .nf-links .btn { width: 100%; }
}

/* ============================================================
   細部の仕上げ
   ============================================================ */
/* 選択範囲をブランドカラーに */
::selection { background: rgba(228, 38, 43, 0.16); color: var(--fv-ink); }

/* キーボード操作時のフォーカス（マウス操作では出さない） */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fv-red);
  outline-offset: 3px;
  border-radius: 6px;
}
.scn-card > summary:focus-visible { outline-offset: -3px; }

/* 画像の読み込み前に高さが跳ねないように */
img { max-width: 100%; }

/* アニメーションを減らす設定を尊重（既存の1箇所に加えて全体） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   コンテナ幅の統一（2026-09-11）
   #security / #faq / #contact だけ .container（1120px）で、
   他（1680px）より左端が196pxも内側に入っていた。
   外枠を揃えて見出しの左端を一致させ、
   「読む部分」だけ適正幅に保つ。単純に広げると1行が長くなりすぎる。
   ============================================================ */
#security > .container,
#faq > .container,
#contact > .container {
  max-width: var(--fv-container);
  padding-left: 44px;
  padding-right: 44px;
}

/* 権限レベル3枚：カードなので全幅で問題ない */

/* FAQ：2カラムのまま、読みやすい幅で止めて左端を揃える */
#faq .faq-grid { max-width: 1240px; }

/* Contact：コピーとフォームの比率を調整し、フォームが間延びしないように */
#contact .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 48px; }

@media (max-width: 1200px) {
  #security > .container,
  #faq > .container,
  #contact > .container { padding-left: 24px; padding-right: 24px; }
  #contact .contact-grid { grid-template-columns: minmax(0, 1fr); }
}


/* 送信先が未設定のときの表示（偽の完了表示を出さないため） */
.form-thanks--notice { color: var(--fv-ink); }
.form-thanks--notice small {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--fv-ink-3);
}

/* 1200px帯で手書き注記の下線がビューポート端に触れていたので内側へ寄せる。
   901px未満は既存の中央寄せ指定（@media max-width:900px）が効くので対象外にする。 */
@media (min-width: 901px) and (max-width: 1200px) {
  .sec-how2 .how2-head-art { right: -16px; }
}

/* ============================================================
   09 セキュリティ・権限・承認設計（sec-s9）
   3段階のレベルを、地色つきカード＋アイコンタイルで見せる
   ============================================================ */
.sec-s9 { padding: 62px 0 54px; background: var(--fv-white); }

/* ---- 見出し ＋ ヒーロー ---- */
.s9-top {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: 28px;
  align-items: center;
}
.s9-h2 {
  margin-top: 22px;
  font-size: clamp(1.95rem, 3.4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
.s9-h2 em { font-style: normal; color: var(--fv-red); }
.s9-lead {
  margin-top: 22px;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 500;
  line-height: 1.9;
  color: var(--fv-ink-2);
  word-break: auto-phrase;
}

.s9-art { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 1400 / 918; }
.s9-art > * { position: absolute; }
.s9-art__scene { left: 0; top: 0; width: 100%; height: auto; }
.s9-art__bot { left: 6cqw; bottom: 2cqw; width: 17cqw; height: auto; z-index: 2; }
.s9-chip {
  z-index: 3;
  padding: 1.1cqw 2cqw;
  border-radius: 1.6cqw;
  background: var(--fv-white);
  box-shadow: 0 6px 22px rgba(27, 28, 32, 0.10);
  font-size: 2.1cqw;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fv-ink-2);
  white-space: nowrap;
}
.s9-chip--a { left: 1cqw; top: 6cqw; }
.s9-chip--b { left: 0; top: 22cqw; }
.s9-chip--c { right: 2cqw; top: 2cqw; }
.s9-chip--d { right: 8cqw; top: 16cqw; }
.s9-hand {
  right: 0; bottom: 16cqw; z-index: 3;
  font-family: var(--fv-font-hand);
  font-size: 2.3cqw;
  line-height: 1.7;
  color: var(--fv-ink-2);
  text-align: left;
}
.s9-hand::after {
  content: "";
  display: block;
  width: 78%;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--fv-red);
}

/* ---- 3段階カード ---- */
.s9-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.s9-level {
  --lv: var(--fv-ink);
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
  border-radius: 20px;
}
.s9-level--auto    { --lv: #16a06a; background: #f0f8f4; }
.s9-level--approve { --lv: #e08a0b; background: #fdf8ec; }
.s9-level--never   { --lv: #e4262b; background: #fdf2f2; }

.s9-level__top { display: flex; align-items: flex-start; gap: 12px; }
.s9-level__txt { flex: 1 1 auto; min-width: 0; }
.s9-level__k {
  font-family: var(--fv-font-en);
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--lv);
}
.s9-level__k b { font-size: 20px; font-weight: 800; letter-spacing: 0; }
.s9-level__title {
  margin-top: 4px;
  font-size: clamp(1.15rem, 1.35vw, 1.45rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
.s9-level__bot { position: relative; flex: 0 0 auto; width: 92px; padding-top: 26px; }
.s9-level__bot img { width: 64px; height: auto; margin-left: 14px; display: block; }
.s9-bubble {
  position: absolute;
  right: 0; top: 0;
  padding: 5px 10px;
  border-radius: 9px;
  background: var(--fv-white);
  box-shadow: 0 4px 14px rgba(27, 28, 32, 0.10);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lv);
  white-space: nowrap;
}
.s9-level__desc {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--fv-ink-2);
  word-break: auto-phrase;
}

.s9-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.s9-level--approve .s9-tiles,
.s9-level--never .s9-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s9-tiles li {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border-radius: 12px;
  background: var(--fv-white);
  text-align: center;
}
.s9-tiles .ti { width: 26px; height: 26px; color: var(--lv); }
.s9-tiles span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--fv-ink-2);
  word-break: auto-phrase;
}

/* ---- 下部 ---- */
.s9-foot {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 20px;
  padding: 28px 30px;
  border-radius: 20px;
  background: var(--fv-white);
  border: 1px solid var(--fv-line);
}
.s9-foot__h {
  font-size: clamp(1.1rem, 1.25vw, 1.35rem);
  font-weight: 800;
  line-height: 1.55;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
.s9-foot__note { font-size: 13.5px; line-height: 1.85; color: var(--fv-ink-2); word-break: auto-phrase; }
.s9-feats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 16px 0 0; padding: 0; list-style: none; }
.s9-feats li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 700; color: var(--fv-ink-2);
}
.s9-feats .fi { width: 22px; height: 22px; color: var(--fv-ink-3); }
.s9-foot__cta { height: auto; padding: 15px 26px; line-height: 1.5; text-align: left; }

/* ---- レスポンシブ ---- */
@media (max-width: 1440px) {
  .s9-h2 { font-size: clamp(1.9rem, 3.1vw, 3rem); }
  .s9-levels { gap: 14px; }
  .s9-level { padding: 20px 18px 22px; }
  .s9-tiles { gap: 8px; }
}
@media (max-width: 1200px) {
  .s9-top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .s9-art { max-width: 760px; margin: 0 auto; }
  .s9-levels { grid-template-columns: minmax(0, 1fr); }
  .s9-level--approve .s9-tiles,
  .s9-level--never .s9-tiles,
  .s9-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s9-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .s9-foot__cta { justify-self: start; }
}
@media (max-width: 720px) {
  .sec-s9 { padding: 48px 0 40px; }
  .s9-h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .s9-h2 br { display: none; }
  .s9-lead br { display: none; }
  .s9-level { padding: 18px 16px 20px; border-radius: 16px; }
  .s9-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .s9-foot { padding: 20px 18px; }
  .s9-foot__note br { display: none; }
  .s9-foot__cta { width: 100%; text-align: center; }
}

/* --- 09 ヒーローとカードの調整（モックに合わせる） --- */
.s9-top { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: 20px; align-items: start; }
.s9-art { max-width: 640px; margin-left: auto; padding-right: 96px; }
.s9-art__scene { width: calc(100% - 96px); }
.s9-art__bot { left: 2cqw; bottom: 8cqw; width: 20cqw; }

/* チップ：モックの配置に寄せる */
.s9-chip { font-size: 2cqw; padding: 1cqw 1.8cqw; }
.s9-chip--a { left: 4cqw;  top: 4cqw; }
.s9-chip--b { left: 0;     top: 17cqw; }
.s9-chip--c { right: 0;    top: 0; }
.s9-chip--d { right: 8cqw; top: 12cqw; }

/* 手書き注記：はみ出さないよう枠内へ */
.s9-hand { right: 0; top: 26cqw; bottom: auto; width: 92px; font-size: 11.5px; line-height: 1.75; }
.s9-hand::after { width: 100%; }

/* カード：余白とアイコンをモックに寄せる */
.s9-level { padding: 26px 24px 28px; }
.s9-level__bot { width: 104px; padding-top: 22px; }
.s9-level__bot img { width: 72px; margin-left: 18px; }
.s9-bubble { font-size: 11.5px; padding: 6px 11px; }
.s9-tiles { gap: 12px; margin-top: 20px; }
.s9-tiles li { padding: 16px 6px 14px; gap: 9px; }
.s9-tiles .ti { width: 30px; height: 30px; }
.s9-tiles span { font-size: 12.5px; }
.s9-level__desc { font-size: 14px; }

/* 下部：本文を読みやすい大きさに */
.s9-foot { grid-template-columns: minmax(0, 270px) minmax(0, 1fr) auto; padding: 30px 32px; }
.s9-foot__note { font-size: 14px; }
.s9-feats li { font-size: 14px; }

@media (max-width: 1200px) {
  .s9-art { max-width: 700px; margin: 0 auto; padding-right: 104px; }
}
@media (max-width: 720px) {
  .s9-art { padding-right: 84px; }
  .s9-hand { width: 78px; font-size: 10.5px; }
}

/* --- 09 ヒーロー微調整（手書き注記を読める大きさに） --- */
.s9-top { align-items: center; gap: 12px; }
.s9-art { max-width: 690px; padding-right: 132px; }
.s9-art__scene { width: calc(100% - 132px); }
.s9-hand {
  right: 0;
  top: 30cqw;
  width: 124px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--fv-ink-2);
}
.s9-hand::after { height: 2.5px; margin-top: 6px; }
.s9-levels { margin-top: 26px; }

@media (max-width: 1200px) {
  .s9-art { max-width: 740px; padding-right: 132px; }
}
@media (max-width: 720px) {
  .s9-art { padding-right: 104px; }
  .s9-hand { width: 98px; font-size: 11px; }
}

/* --- 09 仕上げ：Botを盾の横に、チップを内側へ --- */
.s9-art__bot { left: 1cqw; bottom: auto; top: 34cqw; width: 21cqw; }
.s9-chip--c { right: 1cqw; top: 1cqw; }
.s9-chip--d { right: 6cqw; top: 13cqw; }
.s9-hand { top: 33cqw; }

/* ============================================================
   09 レスポンシブの再定義
   調整ルールをメディアクエリより後ろに追記したため、
   1カラム化の指定が上書きされていた。最後にまとめて定義し直す。
   ============================================================ */
@media (max-width: 1200px) {
  .s9-top { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }
  .s9-art { max-width: 700px; margin: 0 auto; padding-right: 128px; }
  .s9-levels { grid-template-columns: minmax(0, 1fr) !important; }
  .s9-level--approve .s9-tiles,
  .s9-level--never .s9-tiles,
  .s9-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .s9-foot { grid-template-columns: minmax(0, 1fr) !important; gap: 18px; }
  .s9-foot__cta { justify-self: start; }
}
@media (max-width: 720px) {
  .s9-art { max-width: 100%; padding-right: 104px; }
  .s9-hand { width: 96px; font-size: 11px; top: 30cqw; }
  .s9-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .s9-foot { padding: 20px 18px; }
  .s9-foot__note br { display: none; }
  .s9-foot__cta { width: 100%; text-align: center; }
  .s9-feats { gap: 10px 18px; }
}

/* ============================================================
   09 スケールをモックの実測値に合わせる
   見出し22→33px / 説明14→16px / タイル13→15px / アイコン30→38px
   ============================================================ */
.s9-level__title { font-size: clamp(1.5rem, 2.06vw, 2.06rem); line-height: 1.35; }
.s9-level__desc  { font-size: clamp(0.95rem, 1vw, 1rem); line-height: 1.75; margin-top: 16px; }
.s9-tiles span   { font-size: clamp(0.85rem, 0.94vw, 0.94rem); line-height: 1.4; }
.s9-tiles .ti    { width: 38px; height: 38px; }
.s9-tiles li     { padding: 18px 6px 15px; gap: 10px; border-radius: 14px; }
.s9-level__k     { font-size: 16px; letter-spacing: 0.1em; }
.s9-level__k b   { font-size: 30px; margin-left: 2px; }
.s9-level__title { margin-top: 2px; }

/* Bot を大きく、吹き出しに尻尾と効果線を足す */
.s9-level__bot { width: 132px; padding-top: 30px; }
.s9-level__bot img { width: 92px; margin-left: 30px; }
.s9-bubble { font-size: 13px; padding: 8px 13px; border-radius: 11px; }
.s9-bubble::after {
  content: "";
  position: absolute;
  left: 16px; bottom: -6px;
  width: 12px; height: 12px;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 2px;
}
.s9-level__bot::before,
.s9-level__bot::after {
  content: "";
  position: absolute;
  width: 3px; height: 13px;
  border-radius: 2px;
  background: var(--fv-yellow);
}
.s9-level__bot::before { left: 20px; top: 44px; transform: rotate(-28deg); }
.s9-level__bot::after  { left: 12px; top: 62px; transform: rotate(-62deg); }

/* 余白をモックに合わせる */
.s9-level { padding: 28px 26px 30px; border-radius: 22px; }
.s9-tiles { gap: 12px; margin-top: 22px; }

/* 09 カードの縦を詰める（モック405px / 幅471px の比率に寄せる） */
.s9-level { padding: 24px 24px 24px; }
.s9-level__bot { padding-top: 16px; }
.s9-level__desc { margin-top: 12px; }
.s9-tiles { margin-top: 16px; gap: 10px; }
.s9-tiles li { padding: 14px 6px 12px; gap: 8px; }
.s9-level__title { line-height: 1.3; }

/* ============================================================
   09 ヒーローと見出しをモック実測に合わせる
   モック：ヒーロー692x316px / h2 59px / リード 21px
   ============================================================ */
.s9-h2   { font-size: clamp(2rem, 3.7vw, 3.7rem); }
.s9-lead { font-size: clamp(1rem, 1.32vw, 1.32rem); margin-top: 20px; }

.s9-art {
  max-width: 692px;
  aspect-ratio: 692 / 316;
  padding-right: 0;
  margin-left: auto;
}
.s9-art__scene { width: 70%; left: 7%; top: 0; }
.s9-art__bot   { left: 0; top: 44%; width: 13%; }

.s9-chip { font-size: 12px; padding: 6px 11px; border-radius: 9px; }
.s9-chip--a { left: 9%;  top: 6%;  }
.s9-chip--b { left: 3%;  top: 36%; }
.s9-chip--c { right: 0;  top: 2%;  }
.s9-chip--d { right: 6%; top: 26%; }

.s9-hand { right: 0; top: 56%; width: 118px; font-size: 12px; line-height: 1.75; }

@media (max-width: 1200px) {
  .s9-art { max-width: 692px; margin: 0 auto; padding-right: 0; }
}
@media (max-width: 720px) {
  .s9-art { max-width: 100%; }
  .s9-chip { font-size: 10.5px; padding: 5px 8px; }
  .s9-hand { width: 92px; font-size: 10.5px; }
}

/* ============================================================
   09 ヒーローを盾＋人物の2枚に分離
   1枚絵では比率を調整できず、人物が盾より大きくなっていた。
   モック実測：盾 382x316 / 人物 295x281（ヒーロー692x316内）
   ============================================================ */
.s9-art__scene { display: none; }
.s9-art__shield {
  left: 20%;
  top: 0;
  width: 55%;
  height: auto;
  z-index: 1;
}
.s9-art__person {
  right: 1.5%;
  bottom: 0;
  width: 43%;
  height: auto;
  z-index: 2;
}
.s9-art__bot { left: 0; bottom: 4%; top: auto; width: 14%; z-index: 2; }

/* 09 ヒーロー：人物の比率をモックに合わせる（38% → 24%） */
.s9-art__person { width: 24%; right: 12%; bottom: 2%; }
.s9-art__shield { left: 14%; top: 2%; width: 46%; }
.s9-art__bot { left: 0; bottom: 6%; width: 12%; }
.s9-hand { z-index: 5; right: 0; top: 40%; width: 112px; }
.s9-chip { z-index: 6; }
.s9-chip--c { right: 0; top: 0; }
.s9-chip--d { right: 14%; top: 22%; }

/* 09 ヒーロー：盾と人物を重ねる（モックの配置） */
.s9-art__shield { left: 16%; top: 2%; width: 44%; }
.s9-art__person { width: 23%; right: 19%; bottom: 0; }
.s9-art__bot { left: 1%; bottom: 8%; width: 13%; }
.s9-hand { right: 0; top: 34%; width: 108px; }
.s9-chip--d { right: 12%; top: 24%; }

/* 09 ヒーロー：可視範囲の実測から算出した最終値
   モック実測 → 盾 幅28.6%/上8.4%、人物 幅42.5%/上12.2%/右98.4% */
.s9-art__shield { left: 22%; top: 0; width: 36%; }
.s9-art__person { width: 55%; right: 0; bottom: 0; }
.s9-art__bot { left: 1%; bottom: 10%; width: 13%; z-index: 3; }
.s9-hand { z-index: 6; right: 0; top: 30%; width: 104px; }
.s9-chip--c { right: 0; top: 0; }
.s9-chip--d { right: 10%; top: 22%; }

/* 09 人物：上端12.2% / 右端98.4% に合わせる最終調整 */
.s9-art__person { right: -6%; bottom: -12%; }

/* 09 人物：頭身がモックと異なるため、幅一致ではなく見た目の重さで合わせる */
.s9-art__person { width: 30%; right: 8%; bottom: 0; }
.s9-hand { top: 26%; right: 0; width: 104px; }
.s9-chip--d { right: 8%; top: 20%; }

/* 09 ヒーロー最終：人物を盾に重ね、注記をチップと分ける */
.s9-art__person { right: 14%; bottom: -2%; }
.s9-hand { top: 46%; right: 0; width: 104px; }
.s9-chip--d { right: 6%; top: 18%; }
/* Grok Bot の効果線（モックの黄色いキラッ） */
.s9-art { --sp: var(--fv-yellow); }
.s9-art::before, .s9-art::after {
  content: "";
  position: absolute;
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--sp);
  z-index: 4;
}
.s9-art::before { left: 12%; bottom: 44%; transform: rotate(32deg); }
.s9-art::after  { left: 15%; bottom: 36%; transform: rotate(62deg); }

/* 09 ヒーロー：全体を寄せて余白を締める */
.s9-art__bot { left: 6%; bottom: 12%; width: 13%; }
.s9-art::before { left: 17%; bottom: 46%; }
.s9-art::after  { left: 20%; bottom: 38%; }
.s9-hand { width: 112px; top: 44%; }

/* ============================================================
   09 ヒーロー：モックの該当部分をAPIで複製した画像に差し替え
   配置はモック内の座標比率をそのまま使う
   盾   left 19.1% / top -1.9% / width 43.4%
   人物 left 52.7% / top 39.1% / width 27.9%
   ============================================================ */
.s9-art__shield { left: 19.1%; top: -2%; width: 43.4%; z-index: 1; }
.s9-art__person { left: 52.7%; top: 39%; right: auto; bottom: auto; width: 27.9%; z-index: 2; }
.s9-art__bot { left: 4%; top: 46%; bottom: auto; width: 15%; z-index: 3; }
.s9-art::before { left: 19%; top: 44%; bottom: auto; }
.s9-art::after  { left: 22%; top: 52%; bottom: auto; }
.s9-hand { top: 42%; right: 0; width: 108px; z-index: 6; }
.s9-chip--a { left: 6%;  top: 6%;  }
.s9-chip--b { left: 0;   top: 34%; }
.s9-chip--c { right: 0;  top: 2%;  }
.s9-chip--d { right: 10%; top: 22%; }

/* 09 ヒーロー：配置の最終調整 */
.s9-art__shield { left: 17%; top: 0; width: 41%; }
.s9-art__person { left: 49%; top: 33%; width: 31%; }
.s9-art__bot { left: 2%; top: 44%; width: 14%; }
.s9-art::before { left: 17.5%; top: 42%; }
.s9-art::after  { left: 20.5%; top: 50%; }
.s9-hand { top: 40%; width: 110px; }

/* 09 人物：頭を盾の中央高さに合わせる */
.s9-art__person { top: 24%; left: 50%; width: 32%; }

/* ============================================================
   09 ヒーロー：可視範囲の実測から逆算した確定値
   モック  盾 幅28.6% 左29.0% 上8.4% / 人物 幅42.5% 左55.9% 上12.2%
   画像内の余白ぶんを差し引いてCSS値を算出
   ============================================================ */
.s9-art__shield { width: 54.5%; left: 16.1%; top: -22.3%; }
.s9-art__person { width: 61.8%; left: 40.3%; top: -1.7%; }
.s9-art { overflow: visible; }

/* 09 人物：手書き文字を除いた実測値で再算出
   モック 幅28.5% 左55.9% 上12.2%（42.5%は黒い手書き文字を拾った誤測定） */
.s9-art__person { width: 43%; left: 44.9%; top: 4%; }

/* ============================================================
   08 45日PoCプログラム（sec-p8）
   モック 1448px幅を基準に比率で構成
   ============================================================ */
.sec-p8 { padding: 62px 0 54px; background: var(--fv-white); }

/* ---- 見出し ＋ ヒーロー ---- */
.p8-top { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 20px; align-items: center; }
.p8-h2 {
  margin-top: 22px;
  font-size: clamp(2rem, 3.75vw, 3.75rem);
  font-weight: 900; line-height: 1.28; letter-spacing: -0.01em;
  color: var(--fv-ink); word-break: auto-phrase;
}
.p8-h2 em { font-style: normal; color: var(--fv-red); }
.p8-lead {
  margin-top: 20px;
  font-size: clamp(1rem, 1.3vw, 1.3rem); font-weight: 500; line-height: 1.85;
  color: var(--fv-ink-2); word-break: auto-phrase;
}

.p8-hero { container-type: inline-size; position: relative; width: 100%; max-width: 700px; margin-left: auto; aspect-ratio: 703 / 380; }
.p8-hero > * { position: absolute; }
.p8-hero__scene { left: 0; top: 0; width: 100%; height: auto; }
/* カレンダー面の文字（画像には入れない） */
.p8-cal {
  display: grid; place-items: center; gap: 0;
  left: 51%; top: 22%; width: 22%;
  text-align: center; line-height: 1;
}
.p8-cal b { font-family: var(--fv-font-en); font-size: 9cqw; font-weight: 800; color: var(--fv-red); letter-spacing: -0.02em; }
.p8-cal i { font-style: normal; font-family: var(--fv-font-en); font-size: 3cqw; font-weight: 700; letter-spacing: 0.18em; color: var(--fv-ink); }
.p8-cal u { text-decoration: none; font-family: var(--fv-font-en); font-size: 5.6cqw; font-weight: 800; color: var(--fv-ink); }

.p8-chip {
  display: inline-flex; align-items: center; gap: 1.2cqw;
  padding: 1.4cqw 2cqw; border-radius: 1.8cqw;
  background: var(--fv-white); box-shadow: 0 6px 20px rgba(27,28,32,.12);
  font-size: 2.1cqw; font-weight: 700; line-height: 1.35; color: var(--fv-ink-2); white-space: nowrap;
}
.p8-chip .mi { width: 2.8cqw; height: 2.8cqw; color: var(--fv-blue); }
.p8-chip .bulb { width: 2.6cqw; height: 2.6cqw; border-radius: 999px; background: var(--fv-yellow); }
.p8-chip--a { left: 1%; top: 8%; }
.p8-chip--b { right: 0; top: 44%; }
.p8-hand {
  right: 3%; top: 20%;
  font-family: var(--fv-font-hand); font-size: 2.4cqw; line-height: 1.7; color: var(--fv-ink-2);
}
.p8-hand::after { content: ""; display: block; width: 88%; height: 2px; margin-top: 3px; border-radius: 2px; background: var(--fv-red); }

/* ---- 4ステップ ---- */
.p8-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; margin: 30px 0 0; padding: 0; list-style: none;
}
.p8-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 22px 0; border-radius: 18px; overflow: hidden;
}
.p8-card--s1 { background: #f2f6fd; }
.p8-card--s2 { background: #fdf8ee; }
.p8-card--s3 { background: #f4f8fb; }
.p8-card--s4 { background: #fdf3f4; }
.p8-card:not(:last-child)::after {
  content: ""; position: absolute; right: -14px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2.4px solid #b4bcc9; border-bottom: 2.4px solid #b4bcc9;
  transform: translateY(-50%) rotate(-45deg); z-index: 2;
}
.p8-card__head { display: flex; align-items: center; justify-content: space-between; }
.p8-card__n { font-family: var(--fv-font-en); font-size: 34px; font-weight: 800; color: var(--fv-red); line-height: 1; }
.p8-card__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: rgba(255,255,255,.85); }
.p8-card__ic svg { width: 24px; height: 24px; color: var(--fv-ink-2); }
.p8-card--s1 .p8-card__ic svg { color: #2f6cf0; }
.p8-card--s2 .p8-card__ic svg { color: #4b5565; }
.p8-card--s3 .p8-card__ic svg { color: #2f6cf0; }
.p8-card--s4 .p8-card__ic svg { color: #2f6cf0; }
.p8-card__title { margin-top: 14px; font-size: clamp(1.3rem, 1.72vw, 1.72rem); font-weight: 800; line-height: 1.35; color: var(--fv-ink); }
.p8-card__desc { margin-top: 10px; font-size: clamp(0.9rem, 1.03vw, 1.03rem); line-height: 1.75; color: var(--fv-ink-2); word-break: auto-phrase; }

.p8-art { margin-top: auto; padding-top: 16px; }
.p8-art img { display: block; width: 100%; height: auto; }
.p8-art--split { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 8px; align-items: end; }
.p8-art--split .p8-fig { width: 100%; }
.p8-checks {
  display: grid; gap: 9px; margin: 0 0 14px; padding: 14px 12px;
  border-radius: 12px; background: rgba(255,255,255,.92); list-style: none;
}
.p8-checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--fv-ink); white-space: nowrap; }
.p8-checks .ci { flex: 0 0 auto; width: 15px; height: 15px; }
.p8-checks--blue .ci { color: #2f6cf0; }
.p8-checks--red  .ci { color: var(--fv-red); }

/* ---- 計測指標 ---- */
.p8-metrics {
  display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 24px; align-items: center;
  margin-top: 20px; padding: 20px 24px;
  border-radius: 18px; background: var(--fv-white); border: 1px solid var(--fv-line);
}
.p8-metrics__head h3 { font-size: 22px; font-weight: 800; color: var(--fv-ink); }
.p8-metrics__head p { margin-top: 4px; font-size: 13px; color: var(--fv-ink-3); }
.p8-metrics__list {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px; margin: 0; padding: 0 0 0 24px; list-style: none;
  border-left: 1px solid var(--fv-line);
}
.p8-metrics__list li { display: grid; place-items: center; gap: 9px; padding: 12px 4px; border-radius: 12px; background: #f7f8fb; text-align: center; }
.p8-metrics__list img { width: 34px; height: auto; }
.p8-metrics__list span { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--fv-ink-2); word-break: auto-phrase; }

/* ---- 下部 ---- */
.p8-foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
  margin-top: 16px; padding: 22px 26px;
  border-radius: 18px; background: var(--fv-white); border: 1px solid var(--fv-line);
}
.p8-foot__mark {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px;
  background: #fdeaea; color: var(--fv-red); font-size: 24px; font-weight: 800;
}
.p8-foot__note { font-size: 14px; line-height: 1.8; color: var(--fv-ink-2); word-break: auto-phrase; }
.p8-foot__cta { height: 58px; padding: 0 26px; }

/* ---- レスポンシブ ---- */
@media (max-width: 1440px) {
  .p8-cards { gap: 16px; }
  .p8-card { padding: 20px 16px 0; }
  .p8-checks li { font-size: 12px; }
}
@media (max-width: 1200px) {
  .p8-top { grid-template-columns: minmax(0, 1fr); }
  .p8-hero { margin: 0 auto; }
  .p8-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p8-card:not(:last-child)::after { display: none; }
  .p8-metrics { grid-template-columns: minmax(0, 1fr); }
  .p8-metrics__list { padding-left: 0; border-left: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p8-foot { grid-template-columns: auto minmax(0, 1fr); }
  .p8-foot__cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 720px) {
  .sec-p8 { padding: 48px 0 40px; }
  .p8-h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .p8-h2 br { display: none; }
  .p8-lead br { display: none; }
  .p8-cards { grid-template-columns: minmax(0, 1fr); }
  .p8-metrics__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p8-foot { padding: 18px 16px; }
  .p8-foot__note br { display: none; }
  .p8-foot__cta { width: 100%; justify-content: center; }
}

/* ============================================================
   08 スケールをモック実測に合わせる
   h2 60→56 / 見出し 28→32 / 説明 16→18 / 計測 22→24 / 注記 14→18
   カード 363x517 → 目標 358x424（縦を詰める）
   ============================================================ */
.p8-h2 { font-size: clamp(1.95rem, 3.5vw, 3.5rem); line-height: 1.26; }
.p8-lead { font-size: clamp(1rem, 1.38vw, 1.38rem); }
.p8-card__title { font-size: clamp(1.35rem, 2vw, 2rem); margin-top: 12px; }
.p8-card__desc { font-size: clamp(0.95rem, 1.13vw, 1.13rem); line-height: 1.7; margin-top: 8px; }
.p8-metrics__head h3 { font-size: 24px; }
.p8-metrics__head p { font-size: 14px; }
.p8-metrics__list span { font-size: 13.5px; }
.p8-foot__note { font-size: 18px; line-height: 1.7; }

/* カードの縦を詰める */
.p8-card { padding: 22px 20px 0; }
.p8-art { padding-top: 12px; }
.p8-checks { margin-bottom: 10px; padding: 12px 10px; gap: 8px; }
.p8-checks li { font-size: 13.5px; }

/* ヒーローを少し大きく（モック703 → 1.10倍で773） */
.p8-hero { max-width: 773px; }
.p8-top { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }

/* 08 イラスト領域の高さを固定（モック167px × 1.10 ≒ 185px） */
.p8-art { height: 190px; padding-top: 12px; display: flex; align-items: flex-end; }
.p8-art > img { width: auto; height: 100%; object-fit: contain; object-position: bottom center; margin: 0 auto; }
.p8-art--split { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 8px; align-items: end; height: 190px; }
.p8-art--split .p8-fig { width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: bottom left; margin: 0; }
.p8-checks { margin-bottom: 12px; align-self: end; }

/* 08 ヒーロー：コンテナ比を画像に合わせる（900/601） */
.p8-hero { aspect-ratio: 900 / 601; max-width: 700px; }
.p8-cal { display: none; }   /* 位置測定のため一旦隠す */

/* 08 カレンダー面の文字（実測 x中心51.8% / 赤帯下端32.7%） */
.p8-cal {
  display: grid; place-items: center; gap: 1cqw;
  left: 36.2%; width: 31.1%; top: 34%;
  text-align: center; line-height: 1; z-index: 3;
}
.p8-cal b { font-family: var(--fv-font-en); font-size: 12cqw; font-weight: 800; color: var(--fv-red); letter-spacing: -0.03em; line-height: .9; }
.p8-cal i { font-style: normal; font-family: var(--fv-font-en); font-size: 3.6cqw; font-weight: 700; letter-spacing: 0.16em; color: var(--fv-ink); }
.p8-cal u { text-decoration: none; font-family: var(--fv-font-en); font-size: 7cqw; font-weight: 800; color: var(--fv-ink); letter-spacing: -0.01em; }

/* 手書き注記をモックの濃さに */
.p8-hand { color: var(--fv-ink); font-weight: 500; right: 1%; top: 14%; font-size: 2.6cqw; }
.p8-hand::after { height: 2.5px; background: var(--fv-red); }
/* チップ位置 */
.p8-chip--a { left: 0; top: 13%; }
.p8-chip--b { right: 0; top: 46%; }

/* 08 ヒーロー：モックの比（703/380）に合わせる */
.p8-hero { aspect-ratio: 900 / 486; max-width: 730px; }
.p8-cal { top: 30%; }
.p8-chip--a { left: 0; top: 9%; }
.p8-chip--b { right: 0; top: 48%; }
.p8-hand { right: 1%; top: 8%; font-weight: 700; color: var(--fv-ink); }
/* 電球アイコン */
.p8-chip .bulb {
  position: relative; width: 3cqw; height: 3cqw; border-radius: 999px;
  background: var(--fv-yellow);
}
.p8-chip .bulb::after {
  content: ""; position: absolute; left: 50%; bottom: -0.7cqw;
  width: 1.4cqw; height: 0.7cqw; border-radius: 0 0 2px 2px;
  background: #d9a300; transform: translateX(-50%);
}

/* ============================================================
   08 カード内をモック実測に合わせる
   アイコン円 46→76px / アイコン 24→42px / チェック文字 13.5→19px
   人物 140x175 → 156x195 / チェックカード 160x145 → 179x162
   ============================================================ */
.p8-card__ic { width: 76px; height: 76px; background: rgba(255,255,255,.7); }
.p8-card__ic svg { width: 42px; height: 42px; }
.p8-card--s1 .p8-card__ic { background: #e3ecfb; }
.p8-card--s2 .p8-card__ic { background: #f6eddc; }
.p8-card--s3 .p8-card__ic { background: #e6eef6; }
.p8-card--s4 .p8-card__ic { background: #fbe4e6; }
.p8-card--s1 .p8-card__ic svg { color: #1b56cf; }
.p8-card--s2 .p8-card__ic svg { color: #3a4454; }
.p8-card--s3 .p8-card__ic svg { color: #1b56cf; }
.p8-card--s4 .p8-card__ic svg { color: #1b56cf; }
.p8-card__n { font-size: 40px; }

.p8-checks {
  gap: 11px; padding: 16px 14px; border-radius: 14px;
  background: var(--fv-white); box-shadow: 0 4px 14px rgba(27,28,32,.06);
}
.p8-checks li { gap: 10px; font-size: 17px; }
.p8-checks .ci { width: 20px; height: 20px; }

.p8-art { height: 200px; }
.p8-art--split { height: 200px; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 6px; }

/* 余白を詰めて高さを保つ */
.p8-card { padding: 20px 18px 0; }
.p8-card__title { margin-top: 10px; }
.p8-card__desc { margin-top: 7px; }
.p8-art { padding-top: 8px; }

/* 08 人物とチェックカードをモック実測に */
.p8-art, .p8-art--split { height: 215px; }
.p8-checks li { font-size: 18.5px; }
.p8-checks { padding: 17px 14px; gap: 12px; }
.p8-art--split { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); align-items: end; }
.p8-art--split .p8-fig { max-height: 200px; }

/* 08 チェックカードの地色をモックに合わせる（淡い青） */
.p8-checks { background: #f4f8ff; box-shadow: 0 3px 10px rgba(27,28,32,.05); }
.p8-card--s2 .p8-checks { background: #f2f7ff; }
/* イラストをカード下端まで使う */
.p8-art, .p8-art--split { height: 225px; padding-top: 6px; }
.p8-art--split .p8-fig { max-height: 218px; }
.p8-checks { margin-bottom: 8px; }

/* 08 03・04のイラストはカード幅いっぱいに */
.p8-art:not(.p8-art--split) > img { width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: bottom center; }

/* ============================================================
   精査で見つかった2点の修正（2026-09-13）
   ============================================================ */

/* 06 カード04：タグが right:-6cqw で card の外へ出ているが
   .pb-card が overflow:hidden のため右端で切れていた。
   カード内に収める。 */
#problem .pb-art-4 .pb-ng { right: 0; }
#problem .pb-art-4 .pb-ng li { padding-right: 2.4cqw; }

/* 02 左カラム（チャット図）が右カラムより 379px 短く、
   下に大きな空白ができていた。上下中央に寄せて偏りをなくす。 */
.how2-grid { align-items: center; }

/* ============================================================
   02 左カラムの作り直し（2026-09-13）
   縦一列＋巨大なBot → ハブ＆スポーク型へ。
   「ひとことの依頼で、複数のツールが同時に動く」を図で示す。
   ============================================================ */
.how2-stage {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 30px 24px 28px !important;
  background: #f5f8fd !important;
  border: 1px solid #dfe8f5 !important;
  border-radius: 22px !important;
  min-height: 0 !important;
}

/* --- 1. 依頼 --- */
.hs-ask {
  display: grid; justify-items: center; gap: 10px;
  padding: 16px 26px 18px;
  border-radius: 16px;
  background: var(--fv-white);
  box-shadow: 0 6px 20px rgba(27, 28, 32, .07);
  text-align: center;
}
.hs-ask__who {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px;
  background: #eef3fb;
  font-size: 12.5px; font-weight: 700; color: var(--fv-ink-3);
}
.hs-ask__who svg { width: 15px; height: 15px; }
.hs-ask__text {
  font-family: var(--fv-font-hand);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.6; color: var(--fv-ink);
}

/* --- 矢印 --- */
.hs-down {
  display: block; width: 2px; height: 26px;
  margin: 10px 0; border-radius: 2px;
  background: linear-gradient(#c9d6ea, #9fb4d4);
  position: relative;
}
.hs-down::after {
  content: ""; position: absolute; left: 50%; bottom: -3px;
  width: 9px; height: 9px;
  border-right: 2px solid #9fb4d4; border-bottom: 2px solid #9fb4d4;
  transform: translateX(-50%) rotate(45deg);
}

/* --- 2. ハブ --- */
.hs-hub {
  container-type: inline-size;
  position: relative;
  width: 100%; max-width: 460px;
  aspect-ratio: 1 / 1;
}
.hs-hub__ring {
  position: absolute; left: 50%; top: 50%;
  width: 62%; height: 62%;
  border: 1.5px dashed #c2d3ea; border-radius: 999px;
  transform: translate(-50%, -50%);
}
.hs-hub__ring--2 { width: 88%; height: 88%; border-color: #dde7f4; }
.hs-hub__core {
  position: absolute; left: 50%; top: 50%;
  display: grid; justify-items: center; gap: 6px;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hs-hub__core img { width: 21cqw; height: auto; }
.hs-hub__label {
  font-family: var(--fv-font-en);
  font-size: 2.5cqw; font-weight: 800; letter-spacing: .18em; color: var(--fv-ink-3);
}
.hs-node {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 1.5cqw;
  padding: 1.8cqw 2.6cqw; border-radius: 2.4cqw;
  background: var(--fv-white);
  box-shadow: 0 5px 16px rgba(27, 28, 32, .09);
  font-size: 2.7cqw; font-weight: 700; color: var(--fv-ink-2);
  white-space: nowrap;
}
.hs-node svg { width: 3.4cqw; height: 3.4cqw; color: var(--fv-blue); }
.hs-node--1 { left: 50%; top: 0; transform: translateX(-50%); }
.hs-node--2 { right: 0; top: 27%; }
.hs-node--3 { right: 3%; bottom: 20%; }
.hs-node--4 { left: 3%; bottom: 20%; }
.hs-node--5 { left: 0; top: 27%; }
.hs-hub__note {
  position: absolute; left: 50%; bottom: 1%;
  transform: translateX(-50%);
  font-size: 2.5cqw; line-height: 1.5; text-align: center; color: var(--fv-ink-3);
}
.hs-hub__note b { color: var(--fv-red); font-weight: 800; }

/* --- 3. 出口 --- */
.hs-outputs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; width: 100%;
}
.hs-out {
  display: grid; gap: 8px;
  padding: 16px 16px 14px; border-radius: 16px;
}
.hs-out small {
  font-family: var(--fv-font-en);
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
}
.hs-out p { font-size: 14px; font-weight: 700; line-height: 1.6; word-break: auto-phrase; }
.hs-out-deliv { background: #e9f1ff; }
.hs-out-deliv small { color: #2f6cf0; }
.hs-out-deliv p { color: #1b4bb5; }
.hs-out-human { background: #fff1e6; }
.hs-out-human small { color: #e06a12; }
.hs-out-human p { color: #b4530a; }
.hs-out__art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 92px; }
.hs-out__art i { display: block; width: 30px; border-radius: 4px; background: var(--fv-white); box-shadow: 0 3px 10px rgba(27,28,32,.10); }
.hs-out__art .d1 { height: 54px; }
.hs-out__art .d2 { height: 70px; }
.hs-out__art .d3 { height: 44px; background: #2f6cf0; }
.hs-out__art img { width: auto; height: 100%; }
.hs-out__check { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; }

@media (max-width: 1200px) {
  .how2-stage { padding: 24px 18px !important; }
  .hs-hub { max-width: 420px; }
}
@media (max-width: 720px) {
  .how2-stage { padding: 20px 14px !important; border-radius: 16px !important; }
  .hs-ask__text br { display: none; }
  .hs-outputs { grid-template-columns: minmax(0, 1fr); }
  .hs-out__art { height: 76px; }
}

/* 02 ハブ：立ち姿のBotと放射線 */
.hs-hub { aspect-ratio: 1 / 0.88; max-width: 470px; }
.hs-hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-hub__ring { display: none; }
.hs-hub__core img { width: auto; height: 34cqw; }
.hs-hub__label { font-size: 2.4cqw; }
.hs-node--1 { top: 2%; }
.hs-node--2 { right: 0; top: 24%; }
.hs-node--3 { right: 2%; bottom: 14%; }
.hs-node--4 { left: 2%; bottom: 14%; }
.hs-node--5 { left: 0; top: 24%; }
.hs-hub__note {
  margin-top: 10px;
  font-size: 13.5px; line-height: 1.6; color: var(--fv-ink-3); text-align: center;
}
.hs-hub__note b { color: var(--fv-red); font-weight: 800; }

/* 02 注記が絶対配置のままカードに重なっていたので解除 */
.hs-hub__note { position: static !important; transform: none !important; left: auto; bottom: auto; }
/* Botを少し大きく */
.hs-hub__core img { height: 38cqw; }

/* 02 ステージの固定高（782px）を解除して内容に合わせる */
.how2-stage { height: auto !important; overflow: visible !important; }
@media (max-width: 1440px) { .how2-stage { height: auto !important; } }
@media (max-width: 1200px) { .how2-stage { width: auto !important; height: auto !important; } }

/* 02 成果物カードの図 */
.hs-out__art--docs { align-items: flex-end; gap: 7px; }
.hs-out__art .da { height: auto; filter: drop-shadow(0 4px 10px rgba(27,28,32,.10)); }
.hs-out__art .da1 { width: 40px; transform: rotate(-4deg); }
.hs-out__art .da2 { width: 40px; }
.hs-out__art .da3 { width: 46px; margin-bottom: 4px; }

/* ============================================================
   08 45日PoC（sec-n8）2026-09-13 改版
   モック 1536px 実測：h2 47px / リード18px / ステップ見出し24px /
   ステップ説明15px / 計測見出し27px / 指標ラベル12px / ゴール文19px
   ============================================================ */
.sec-n8 { padding: 58px 0 52px; background: var(--fv-white); }
.n8-grid { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 26px; align-items: start; }

/* ---- 左：見出し＋ヒーロー ---- */
.n8-h2 {
  margin-top: 20px;
  font-size: clamp(1.9rem, 2.94vw, 2.94rem);
  font-weight: 900; line-height: 1.26; letter-spacing: -0.02em;
  color: var(--fv-ink); word-break: auto-phrase;
}
.n8-h2 em { font-style: normal; color: var(--fv-red); }
.n8-lead { margin-top: 18px; font-size: clamp(0.95rem, 1.13vw, 1.13rem); line-height: 1.85; color: var(--fv-ink-2); word-break: auto-phrase; }

.n8-hero { container-type: inline-size; position: relative; width: 100%; margin-top: 22px; aspect-ratio: 1560 / 925; }
.n8-hero > * { position: absolute; }
.n8-hero__scene { left: 0; top: 0; width: 100%; height: auto; }
.n8-think {
  left: 1%; top: 6%;
  padding: 1.6cqw 2.2cqw; border-radius: 1.8cqw;
  background: var(--fv-white); box-shadow: 0 5px 16px rgba(27,28,32,.10);
  font-size: 2.1cqw; font-weight: 700; line-height: 1.45; color: var(--fv-ink-2);
}
.n8-task {
  display: inline-flex; align-items: center; gap: 1cqw;
  padding: 1.2cqw 1.8cqw 1.2cqw 1.2cqw; border-radius: 1.6cqw;
  background: var(--fv-white); box-shadow: 0 5px 16px rgba(27,28,32,.10);
  font-size: 1.9cqw; font-weight: 700; color: var(--fv-ink-2); white-space: nowrap;
}
.n8-task img { width: 3.4cqw; height: auto; }
.n8-task--a { left: 21%; top: 9%; }
.n8-task--b { left: 42%; top: 12%; }
.n8-task--c { left: 24%; top: 26%; }
.n8-task--d { left: 52%; top: 27%; }
.n8-hand {
  font-family: var(--fv-font-hand);
  font-size: 2.3cqw; line-height: 1.65; color: var(--fv-ink);
}
.n8-hero .n8-hand { right: 2%; top: 2%; text-align: left; }
.n8-hero .n8-hand::after { content: ""; display: block; width: 92%; height: 2.5px; margin-top: 3px; border-radius: 2px; background: var(--fv-red); }

/* ---- 右：4ステップ ---- */
.n8-right { position: relative; padding-top: 46px; }
.n8-hand--top {
  position: absolute; right: 0; top: -6px;
  font-size: 17px; line-height: 1.6; text-align: right;
}
.n8-hand--top::after { content: ""; display: block; width: 100%; height: 2.5px; margin-top: 3px; border-radius: 2px; background: var(--fv-red); }
.n8-steps { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.n8-step {
  position: relative;
  display: grid; grid-template-columns: 74px 84px minmax(0, 1fr);
  gap: 14px; align-items: center;
  padding: 18px 22px; border-radius: 16px;
  background: var(--fv-white); border: 1px solid #e7edf6;
  box-shadow: 0 4px 16px rgba(27, 28, 32, .05);
}
.n8-step:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -24px;
  width: 9px; height: 9px;
  border-right: 2px solid #9fb6d6; border-bottom: 2px solid #9fb6d6;
  transform: translateX(-50%) rotate(45deg);
}
.n8-step__num {
  display: grid; justify-items: center; gap: 2px;
  font-family: var(--fv-font-en); font-size: 30px; font-weight: 800; color: #2f6cf0; line-height: 1;
}
.n8-step__num small { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #7d94b8; }
.n8-step__ic { display: grid; place-items: center; width: 84px; height: 72px; border-radius: 12px; background: #eef4fd; }
.n8-step__ic img { width: 54px; height: auto; }
.n8-step__body h3 { font-size: 24px; font-weight: 800; line-height: 1.3; color: var(--fv-ink); }
.n8-step__body p { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--fv-ink-2); word-break: auto-phrase; }

/* ---- 計測指標 ---- */
.n8-measure {
  display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 26px; align-items: center;
  margin-top: 24px; padding: 22px 28px;
  border-radius: 18px; background: var(--fv-white); border: 1px solid #e7edf6;
}
.n8-measure__head small { font-family: var(--fv-font-en); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--fv-muted); }
.n8-measure__head h3 { margin-top: 6px; font-size: 27px; font-weight: 800; line-height: 1.35; color: var(--fv-ink); }
.n8-measure__list {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px; margin: 0; padding: 0 0 0 26px; list-style: none;
  border-left: 1px solid var(--fv-line);
}
.n8-measure__list li { display: grid; justify-items: center; gap: 9px; text-align: center; }
.n8-m__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: #eaf1fd; }
.n8-m__ic img { width: 28px; height: auto; }
.n8-m__label { font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--fv-ink-2); }
.n8-m__label small { font-size: 11px; font-weight: 700; }

/* ---- ゴール ---- */
.n8-goal {
  display: grid; grid-template-columns: auto auto auto minmax(0, 1fr);
  gap: 16px; align-items: center;
  margin-top: 14px; padding: 20px 28px;
  border-radius: 18px; background: var(--fv-white); border: 1px solid #e7edf6;
}
.n8-goal__bot { width: 62px; height: auto; }
.n8-goal__bubble {
  padding: 12px 16px; border-radius: 12px; background: #f1f5fb;
  font-size: 14px; line-height: 1.6; color: var(--fv-ink-2);
}
.n8-goal__arrow { width: 11px; height: 11px; border-right: 2.4px solid #9fb6d6; border-bottom: 2.4px solid #9fb6d6; transform: rotate(-45deg); }
.n8-goal__text { font-size: 19px; font-weight: 800; line-height: 1.6; color: var(--fv-ink); word-break: auto-phrase; }
.n8-goal__text em { font-style: normal; color: var(--fv-red); }

/* ---- レスポンシブ ---- */
@media (max-width: 1440px) {
  .n8-step { grid-template-columns: 66px 76px minmax(0, 1fr); padding: 16px 18px; }
  .n8-step__body h3 { font-size: 22px; }
}
@media (max-width: 1200px) {
  .n8-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .n8-right { padding-top: 56px; }
  .n8-measure { grid-template-columns: minmax(0, 1fr); }
  .n8-measure__list { padding-left: 0; border-left: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .n8-goal { grid-template-columns: auto minmax(0, 1fr); }
  .n8-goal__arrow { display: none; }
  .n8-goal__text { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .sec-n8 { padding: 46px 0 38px; }
  .n8-h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .n8-h2 br, .n8-lead br { display: none; }
  .n8-step { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
  .n8-step__ic { display: none; }
  .n8-step__body h3 { font-size: 19px; }
  .n8-step__body p br { display: none; }
  .n8-measure__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n8-hand--top { position: static; text-align: left; margin-bottom: 12px; }
  .n8-right { padding-top: 0; }
  .n8-goal { padding: 16px 16px; }
  .n8-goal__text { font-size: 16px; }
}

/* 08 ヒーローの比をモック（780/390=2.0）に、右カラムを少し広げる */
.n8-hero { aspect-ratio: 2 / 1; }
.n8-grid { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); gap: 24px; }
/* 浮遊カードを人物の頭上に散らす（モックの配置） */
.n8-task--a { left: 24%; top: 4%; }
.n8-task--b { left: 47%; top: 8%; }
.n8-task--c { left: 27%; top: 26%; }
.n8-task--d { left: 56%; top: 24%; }
.n8-think { left: 0; top: 2%; }
.n8-hero .n8-hand { right: 1%; top: -2%; }

/* 08 ヒーローを左端までブリードさせる（モックと同じ） */
.n8-hero { margin-left: -44px; width: calc(100% + 44px); }
/* 浮遊カードを人物の頭の近くへ */
.n8-task--a { left: 27%; top: 8%; }
.n8-task--b { left: 49%; top: 12%; }
.n8-task--c { left: 30%; top: 29%; }
.n8-task--d { left: 57%; top: 27%; }
.n8-think { left: 2%; top: 5%; }
.n8-hero .n8-hand { right: 2%; top: 1%; font-size: 2.5cqw; }
/* 右上の手書きを大きく */
.n8-hand--top { font-size: 19px; }
/* ステップカードを少し厚く */
.n8-step { padding: 20px 22px; }
@media (max-width: 1200px) { .n8-hero { margin-left: -24px; width: calc(100% + 48px); } }
@media (max-width: 720px) { .n8-hero { margin-left: -16px; width: calc(100% + 32px); } }

/* ============================================================
   08 モック実測に合わせた補正（2026-09-13）
   カード 710→780 / アイコン枠 84x72→125x91 / ヒーロー 754x377→760x440
   計測帯 155→190 / 結論帯 111→138 / 番号 30→36
   ============================================================ */
.n8-grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 0; }

/* ヒーロー：左右にはみ出させて760x440に */
.n8-hero { aspect-ratio: 760 / 440; margin-left: -44px; width: calc(100% + 44px + 74px); }

/* ステップカード */
.n8-step { grid-template-columns: 92px 125px minmax(0, 1fr); gap: 16px; padding: 22px 24px; min-height: 135px; }
.n8-step__num { font-size: 36px; gap: 4px; }
.n8-step__num small { font-size: 12px; }
.n8-step__ic { width: 125px; height: 91px; border-radius: 14px; }
.n8-step__ic img { width: 78px; }
.n8-step__body h3 { font-size: 24px; }
.n8-step__body p { font-size: 15px; margin-top: 7px; }
.n8-steps { gap: 26px; }
.n8-step:not(:last-child)::after { bottom: -22px; }

/* 帯を厚く */
.n8-measure { padding: 30px 34px; margin-top: 26px; }
.n8-measure__head h3 { font-size: 28px; }
.n8-m__ic { width: 62px; height: 62px; }
.n8-m__ic img { width: 31px; }
.n8-m__label { font-size: 13px; }
.n8-goal { padding: 26px 32px; margin-top: 16px; }
.n8-goal__bot { width: 70px; }
.n8-goal__text { font-size: 20px; }

/* 右上の手書きが上端で切れていたので余白を確保 */
.n8-right { padding-top: 76px; }
.n8-hand--top { top: 4px; font-size: 20px; }

/* 08 帯の厚みとヒーローの最終補正 */
.n8-hero { width: calc(100% + 44px + 52px); }
.n8-measure { padding: 38px 34px; }
.n8-goal { padding: 33px 32px; }

/* ============================================================
   08 ヒーロー内の要素をモック座標に合わせる
   （ヒーロー 760x440 内の % で指定）
   ============================================================ */
.n8-think      { left: 9.9%;  top: 9.1%;  }
.n8-task--a    { left: 41.8%; top: 11.8%; }   /* 資料作成 */
.n8-task--b    { left: 61.2%; top: 11.4%; }   /* データ集計 */
.n8-task--c    { left: 49.7%; top: 28.4%; }   /* メール作成 */
.n8-task--d    { left: 77.0%; top: 24.5%; }   /* 情報収集 */
.n8-hero .n8-hand { left: 75.7%; right: auto; top: 0; }

/* 右上の手書きが右端で切れていたので内側へ */
.n8-hand--top { right: 3%; }

/* 縦を詰める（モック1005px に対し実装が長い） */
.n8-steps { gap: 22px; }
.n8-step:not(:last-child)::after { bottom: -19px; }
.n8-measure { margin-top: 20px; }
.n8-goal { margin-top: 12px; }
.sec-n8 { padding-bottom: 44px; }

/* ============================================================
   08 カラム配分をモック実測に合わせる
   モック: 左686px / 右779px / 右ブリード21px（content 1444基準）
   ============================================================ */
.n8-grid { grid-template-columns: minmax(0, 46.8fr) minmax(0, 53.2fr); gap: 0; }
.n8-right { margin-right: -30px; }
/* ヒーローが右カラムに潜り込んで手書きが隠れていたので前面へ */
.n8-hero { position: relative; z-index: 2; }
.n8-right { position: relative; z-index: 1; }
@media (max-width: 1200px) { .n8-right { margin-right: 0; } }

/* 08 ヒーロー幅と手書きの最終補正（772→760 / 手書きを左へ） */
.n8-hero { width: calc(100% + 44px + 40px); }
.n8-hero .n8-hand { left: 70%; font-size: 2.3cqw; }

/* ============================================================
   08 縦位置をモックに合わせる
   モック: ヒーロー y282 / カード1 y77 / 計測帯 y672（ヒーローに50px重なる）
   ============================================================ */
.sec-n8 { padding: 20px 0 12px; }
.n8-right { padding-top: 57px; }
.n8-measure { margin-top: -50px; position: relative; z-index: 3; }
.n8-goal { margin-top: 16px; }

/* 08 残差の微調整（ヒーロー-12px / 結論帯-31px / 全体-33px） */
.n8-hero { margin-top: 10px; }
.n8-goal { margin-top: -16px; }
.sec-n8 { padding-bottom: 10px; }

/* 08 右上の手書きがカードに隠れていたので、モックの位置（セクションy3）へ */
.n8-hand--top { top: -17px; }

/* ============================================================
   ユースケースページ（/use-cases/ · sec-uc2）
   モックを同じ内容幅（934px相当）に揃えて1:1で実測し、
   実装の内容幅1512pxへ ×1.6188 で換算した値。
   ブロック高さ（モック空間）: ヒーロー294 / タブ47 / カード行285 /
   帯107 / CTA226 ── 実装もこの比率に合わせている。
   ============================================================ */
.sec-uc2 { padding: 8px 0 60px; background: var(--fv-white); overflow-x: clip; }
.uc2-eyebrow {
  font-family: var(--fv-font-en); font-size: 17px; font-weight: 800;
  letter-spacing: .16em; color: var(--fv-red);
}

/* ---- ヒーロー ---- */
.uc2-top { display: grid; grid-template-columns: minmax(0, 49fr) minmax(0, 51fr); gap: 20px; align-items: center; margin-top: 18px; }
.uc2-h1 {
  margin-top: 14px;
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  font-weight: 900; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--fv-ink); word-break: auto-phrase;
}
.uc2-h1 em { font-style: normal; color: var(--fv-red); }
.uc2-lead { margin-top: 22px; font-size: clamp(0.95rem, 1.19vw, 1.19rem); line-height: 1.8; color: var(--fv-ink-2); word-break: auto-phrase; }
.uc2-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; }
.uc2-stats > div { padding: 0 34px; border-left: 1px solid var(--fv-line); }
.uc2-stats > div:first-child { padding-left: 0; border-left: 0; }
.uc2-stats dt { font-size: 18px; font-weight: 700; color: var(--fv-ink-3); }
.uc2-stats dd {
  margin-top: 6px;
  font-family: var(--fv-font-en); font-size: 50px; font-weight: 800; line-height: 1;
  color: var(--fv-red); letter-spacing: -0.02em;
}
.uc2-stats dd small { margin-left: 5px; font-family: var(--fv-font); font-size: 17px; font-weight: 700; color: var(--fv-ink-2); }

/* ヒーロー枠はモックの 490×294（=1.667）。絵は下寄せ、吹き出しはその上に重ねる */
.uc2-hero { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 490 / 294; margin-right: -44px; }
.uc2-hero > * { position: absolute; }
.uc2-hero__scene { left: 0; bottom: -2%; width: 89%; height: auto; }
.uc2-bub {
  display: inline-flex; align-items: center; gap: 1.2cqw;
  padding: 1.2cqw 2cqw; border-radius: 1.8cqw;
  background: var(--fv-white); box-shadow: 0 6px 20px rgba(27,28,32,.10);
  font-size: 2cqw; font-weight: 700; color: var(--fv-ink-2); white-space: nowrap;
}
.uc2-bub__ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 4.4cqw; height: 4.4cqw; border-radius: 1.1cqw;
}
.uc2-bub__ic svg { width: 2.9cqw; height: 2.9cqw; }
.uc2-bub__ic--blue { background: var(--fv-blue); color: #fff; }
.uc2-bub__ic--green { background: #16a34a; color: #fff; }
.uc2-bub__ic--soft { background: #eaf1fd; color: var(--fv-blue); }
.uc2-bub--a { left: 29%; top: 10%; }
.uc2-bub--b { right: 5.5%; top: 14%; }
.uc2-bub--c { right: 3.5%; top: 38%; }
.uc2-bub--d { left: 5.5%; top: 47.5%; }
.uc2-hand { font-family: var(--fv-font-hand); font-size: 3.2cqw; line-height: 1.6; color: var(--fv-ink); }
.uc2-sw { display: block; width: 88%; height: 2.6cqw; margin-top: .4cqw; color: var(--fv-red); }
.uc2-hand--1 { left: 0; top: 1.5%; }
.uc2-hand--2 { left: 72%; top: 68%; }
.uc2-hand--2 .uc2-sw { width: 96%; }

/* ---- タブ ---- */
.uc2-tabs {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 42px; padding: 12px;
  border-radius: 999px; background: var(--fv-white); border: 1px solid #e7ecf4;
}
.uc2-tab {
  flex: 1 1 auto; height: 48px; padding: 0 18px; border-radius: 999px;
  background: transparent; font-family: var(--fv-font);
  font-size: 15px; font-weight: 700; color: var(--fv-ink-2);
  white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.uc2-tab + .uc2-tab { border-left: 1px solid #eef1f6; }
.uc2-tab:hover { color: var(--fv-ink); }
.uc2-tab.is-on { background: var(--fv-red); color: var(--fv-white); border-left-color: transparent; }

/* ---- 見出し ---- */
.uc2-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 36px; }
.uc2-h2 { margin-top: 10px; font-size: clamp(1.5rem, 2.75vw, 2.75rem); font-weight: 900; line-height: 1.35; color: var(--fv-ink); word-break: auto-phrase; }
.uc2-sec-head__note { font-size: 15px; line-height: 1.85; color: var(--fv-ink-3); text-align: right; word-break: auto-phrase; }

/* ---- カード ---- */
.uc2-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 22px; row-gap: 26px; margin: 34px 0 0; padding: 0; list-style: none; }
.uc2-card {
  display: flex; flex-direction: column;
  padding: 12px 12px 16px; border-radius: 20px;
  background: var(--fv-white); border: 1px solid #e9eef6;
  box-shadow: 0 4px 18px rgba(27,28,32,.06);
}
.uc2-card[hidden] { display: none; }
/* モック実測: 絵は 208×110（=1.89）の横長。縦長の生成画像は cover で上寄せに切る */
.uc2-card__art { display: block; aspect-ratio: 1.89; border-radius: 14px; background: #f3f7fd; overflow: hidden; }
.uc2-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.uc2-card__title { margin-top: 14px; padding: 0 6px; font-size: clamp(1.15rem, 1.55vw, 1.55rem); font-weight: 800; line-height: 1.35; color: var(--fv-ink); }
.uc2-card__desc { margin-top: 10px; padding: 0 6px; font-size: clamp(0.88rem, 1.12vw, 1.12rem); line-height: 1.75; color: var(--fv-ink-2); word-break: auto-phrase; }
.uc2-card__foot { margin-top: auto; padding: 22px 6px 0; }
.uc2-card__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.uc2-card__tags span { padding: 7px 14px; border-radius: 999px; background: #eef3fb; font-size: 13px; font-weight: 700; color: #5a6b85; }
/* 詳細ページのないカードでも高さを揃えるため、矢印行は常に確保する */
.uc2-card__gorow { display: flex; justify-content: flex-end; min-height: 40px; margin-top: 12px; }
.uc2-card__go {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--fv-white); border: 1px solid var(--fv-line); color: var(--fv-ink-2);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.uc2-card__go svg { width: 18px; height: 18px; }
.uc2-card__go:hover { border-color: var(--fv-red); color: var(--fv-red); transform: translateX(2px); }

/* ---- 帯 ---- */
.uc2-band {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 30px; align-items: center;
  margin-top: 30px; padding: 29px 53px 34px;
  border-radius: 24px; background: #f7f9fc;
}
.uc2-band__art { position: relative; display: block; width: 168px; flex: 0 0 auto; }
.uc2-band__art::before {
  content: ""; position: absolute; left: 50%; top: 52%; translate: -50% -50%;
  width: 128%; height: 128%; border-radius: 999px;
  background: radial-gradient(circle, rgba(64,139,254,.13) 0%, rgba(64,139,254,0) 68%);
}
.uc2-band__art img { position: relative; display: block; width: 100%; height: auto; }
.uc2-band__text { font-size: clamp(0.95rem, 1.31vw, 1.31rem); font-weight: 700; line-height: 1.8; color: var(--fv-ink); word-break: auto-phrase; }
.uc2-band__stats { display: flex; gap: 0; }
.uc2-band__stats > div { padding: 0 32px; border-left: 1px solid #e2e8f1; text-align: center; }
.uc2-band__stats > div:first-child { border-left: 0; }
.uc2-band__stats > div:last-child { padding-right: 0; }
.uc2-band__stats dt { font-size: 15px; font-weight: 700; color: var(--fv-ink-3); }
.uc2-band__stats dd { margin-top: 8px; font-family: var(--fv-font-en); font-size: 46px; font-weight: 800; line-height: 1; color: var(--fv-red); }
.uc2-band__stats dd small { margin-left: 4px; font-family: var(--fv-font); font-size: 16px; font-weight: 700; color: var(--fv-ink-2); }
.uc2-band__note { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--fv-muted); word-break: auto-phrase; }

/* ---- CTA ---- */
.uc2-cta {
  position: relative; overflow: hidden;
  min-height: 384px; margin-top: 34px; padding: 39px 47px 42px;
  border-radius: 24px; background: #101a33; color: var(--fv-white);
}
.uc2-cta__body { position: relative; z-index: 2; max-width: 54%; }
.uc2-cta__eyebrow { font-family: var(--fv-font-en); font-size: 13px; font-weight: 800; letter-spacing: .18em; color: #8fa6d4; }
.uc2-cta__h { margin-top: 16px; font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 900; line-height: 1.3; word-break: auto-phrase; }
.uc2-cta__lead { margin-top: 18px; font-size: 16px; line-height: 1.85; color: #c7d3ea; word-break: auto-phrase; }
.uc2-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.uc2-cta__btns .btn { height: 63px; padding: 0 32px; border-radius: 999px; font-size: 16px; }
.uc2-cta__ghost { background: var(--fv-white); color: var(--fv-ink); }
.uc2-cta__art { position: absolute; right: 7%; bottom: 0; width: 40%; z-index: 1; }
.uc2-cta__art img { display: block; width: 100%; height: auto; }
.uc2-hand--3 {
  position: absolute; right: 2.5%; top: 6%; z-index: 3;
  font-family: var(--fv-font-hand); font-size: 26px; line-height: 1.62;
  color: var(--fv-white); text-align: left;
}
.uc2-hand--3 .uc2-sw { width: 108%; height: 22px; margin-top: 2px; }

/* ---- レスポンシブ ---- */
@media (max-width: 1200px) {
  .uc2-top { grid-template-columns: minmax(0, 1fr); }
  .uc2-hero { max-width: 760px; margin: 8px auto 0; }
  .uc2-tabs { border-radius: 20px; }
  .uc2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc2-sec-head { flex-direction: column; align-items: flex-start; }
  .uc2-sec-head__note { text-align: left; }
  .uc2-band { grid-template-columns: auto minmax(0, 1fr); gap: 22px 26px; padding: 26px 28px 30px; }
  .uc2-band__stats { grid-column: 1 / -1; justify-content: flex-start; }
  .uc2-band__stats > div:first-child { padding-left: 0; }
  .uc2-cta { min-height: 0; padding: 32px 32px 36px; }
  .uc2-cta__body { max-width: none; }
  .uc2-cta__art { position: static; width: min(420px, 100%); margin: 24px auto 0; }
  .uc2-hand--3 { position: static; margin-top: 16px; font-size: 22px; }
  .uc2-hand--3 .uc2-sw { width: 200px; }
}
@media (max-width: 720px) {
  .sec-uc2 { padding-bottom: 44px; }
  .uc2-h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .uc2-h1 br, .uc2-lead br, .uc2-card__desc br { display: none; }
  .uc2-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .uc2-stats > div { padding: 0 0 0 16px; border-left: 1px solid var(--fv-line); }
  .uc2-stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .uc2-stats dt { font-size: 13px; }
  .uc2-stats dd { font-size: 32px; }
  .uc2-tabs { flex-wrap: nowrap; overflow-x: auto; border-radius: 16px; padding: 8px; -webkit-overflow-scrolling: touch; }
  .uc2-tabs::-webkit-scrollbar { display: none; }
  .uc2-tab { flex: 0 0 auto; font-size: 13px; height: 42px; padding: 0 16px; }
  .uc2-tab + .uc2-tab { border-left: 0; }
  .uc2-cards { grid-template-columns: minmax(0, 1fr); }
  .uc2-card__title { font-size: 1.25rem; }
  .uc2-card__desc { font-size: 0.95rem; }
  .uc2-band { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 24px; }
  .uc2-band__art { width: 120px; }
  .uc2-band__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uc2-band__stats > div { padding: 0 8px; }
  .uc2-band__stats dt { font-size: 11px; line-height: 1.5; word-break: keep-all; }
  .uc2-band__stats dd { font-size: 30px; }
  .uc2-cta { padding: 28px 20px 30px; }
  .uc2-cta__btns .btn { width: 100%; justify-content: center; }
}

/* 生成イラストごとに縦横比が違うため、cover の切り取り位置を個別に調整する */
.uc2-card:nth-child(2) .uc2-card__art img { object-position: center 14%; }
.uc2-card:nth-child(3) .uc2-card__art img { object-position: center 20%; }
.uc2-card:nth-child(7) .uc2-card__art img { object-position: center 18%; }
.uc2-card:nth-child(8) .uc2-card__art img { object-position: center 22%; }

/* 1280/1366 のノートPC幅では h1 の2行目がカラム幅ぎりぎりになるため、少し縮めて
   3行に折り返さないようにする */
@media (min-width: 1201px) and (max-width: 1380px) {
  .uc2-h1 { font-size: 3.9vw; }
}

/* ============================================================
   ユースケース：カードのPOP UP（活用シーン解説）と
   xAI公式発表にもとづく「実際の使われ方」
   ============================================================ */

/* ---- カード全体をPOP UPのトリガーにする ---- */
.uc2-card { position: relative; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.uc2-card__hit {
  position: absolute; inset: 0; z-index: 2;
  border: 0; border-radius: inherit; background: transparent; cursor: pointer;
}
.uc2-card__hit:focus-visible { outline: 3px solid var(--fv-blue); outline-offset: 3px; }
.uc2-card:hover { border-color: #d5e0f2; box-shadow: 0 12px 30px rgba(27,28,32,.10); transform: translateY(-2px); }
.uc2-card:hover .uc2-card__go { border-color: var(--fv-red); color: var(--fv-red); }
.uc2-card__go { transition: border-color .16s ease, color .16s ease; }
.uc2-cards__hint { margin-top: 14px; font-size: 13px; color: var(--fv-muted); text-align: right; }

/* ---- 根拠バッジ ---- */
.uc2-b {
  display: inline-block; margin-right: 10px; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px;
}
.uc2-b--o { background: #fdeaec; color: #c8102e; }   /* 公式 */
.uc2-b--c { background: #e8f0fe; color: #1a56c4; }   /* 事例 */
.uc2-b--f { background: #eef1f6; color: #55627a; }   /* 機能 */

/* ---- POP UP ---- */
.ucm {
  width: min(880px, calc(100vw - 32px)); max-width: none;
  max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: 22px;
  background: var(--fv-white); color: var(--fv-ink);
  box-shadow: 0 30px 90px rgba(16,26,51,.28); overflow: hidden;
}
.ucm::backdrop { background: rgba(16,26,51,.55); }
.ucm__box { position: relative; max-height: min(86vh, 900px); overflow-y: auto; padding: 34px 38px 0; }
.ucm__close {
  position: absolute; right: 16px; top: 16px; z-index: 3;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--fv-line); border-radius: 999px;
  background: var(--fv-white); color: var(--fv-ink-2); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ucm__close:hover { border-color: var(--fv-red); color: var(--fv-red); }
.ucm__close svg { width: 18px; height: 18px; }

.ucm__head { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: center; padding-right: 44px; }
.ucm__art { display: block; border-radius: 14px; background: #f3f7fd; overflow: hidden; aspect-ratio: 1.4; }
.ucm__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.ucm__eyebrow { font-family: var(--fv-font-en); font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--fv-red); }
.ucm__title { margin-top: 6px; font-size: 30px; font-weight: 900; line-height: 1.3; color: var(--fv-ink); }
.ucm__lead { margin-top: 10px; font-size: 15px; line-height: 1.85; color: var(--fv-ink-2); word-break: auto-phrase; }

.ucm__body { margin-top: 26px; display: grid; gap: 16px; }
.ucm-scn { padding: 20px 22px; border: 1px solid #e9eef6; border-radius: 16px; background: #fbfcfe; }
.ucm-scn__head { font-size: 17px; font-weight: 800; color: var(--fv-ink); }
.ucm-ask {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: #eef3fb; font-size: 15px; font-weight: 700; color: #24365c; word-break: auto-phrase;
}
.ucm-ask__q {
  display: inline-block; margin-right: 10px; padding: 2px 8px; border-radius: 5px;
  background: var(--fv-white); font-size: 11px; font-weight: 800; color: var(--fv-ink-3); vertical-align: 1px;
}
.ucm-ask--auto { background: #f2f4f8; color: var(--fv-ink-2); }
.ucm-steps { margin: 14px 0 0; padding: 0 0 0 4px; list-style: none; counter-reset: s; }
.ucm-steps li {
  position: relative; padding: 0 0 0 34px; margin-top: 9px;
  font-size: 14.5px; line-height: 1.75; color: var(--fv-ink-2); counter-increment: s; word-break: auto-phrase;
}
.ucm-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 2px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
  background: var(--fv-blue); color: #fff;
  font-family: var(--fv-font-en); font-size: 12px; font-weight: 800;
}
.ucm-appr { margin-top: 14px; padding-top: 13px; border-top: 1px dashed #dde4ef; font-size: 14px; line-height: 1.7; color: var(--fv-ink); word-break: auto-phrase; }
.ucm-appr > span {
  display: inline-block; margin-right: 10px; padding: 3px 9px; border-radius: 6px;
  background: #fdeaec; font-size: 11.5px; font-weight: 800; color: #c8102e;
}
.ucm-appr--none { color: var(--fv-ink-3); }
.ucm-appr--none > span { background: #eef1f6; color: var(--fv-ink-3); }

.ucm-quote { margin: 4px 0 0; padding: 18px 22px; border-radius: 16px; background: #101a33; color: #e7edf9; }
.ucm-quote figcaption { font-family: var(--fv-font-en); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: #8fa6d4; }
.ucm-quote blockquote { margin: 8px 0 0; font-size: 15px; line-height: 1.85; word-break: auto-phrase; }

.ucm__foot {
  position: sticky; bottom: 0; margin-top: 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 18px 0 24px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0, var(--fv-white) 14px);
}
.ucm__foot .btn { height: 54px; padding: 0 26px; border-radius: 999px; }
.ucm-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--fv-ink-2); }
.ucm-more svg { width: 16px; height: 16px; }
.ucm-more:hover { color: var(--fv-red); }
html.is-ucm-open { overflow: hidden; }

/* ---- 実際の使われ方（xAI公式発表） ---- */
.uc2-sec-head--real { margin-top: 56px; }
.ucr-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; }
.ucr-item { padding: 20px 20px 22px; border-radius: 16px; background: #f7f9fc; border: 1px solid #edf1f7; }
.ucr-item__dept { font-size: 15px; font-weight: 800; color: var(--fv-ink); }
.ucr-item__dept::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 9px; border-radius: 2px; background: var(--fv-red); }
.ucr-item__tx { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--fv-ink-2); word-break: auto-phrase; }

.ucr-case {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  margin-top: 20px; padding: 30px 36px; border-radius: 20px;
  background: #101a33; color: var(--fv-white);
}
.ucr-case__label { font-size: 19px; font-weight: 800; }
.ucr-case__lead { margin-top: 12px; font-size: 15px; line-height: 1.85; color: #c7d3ea; word-break: auto-phrase; }
.ucr-case__human { margin-top: 14px; font-size: 14px; line-height: 1.7; color: #e7edf9; word-break: auto-phrase; }
.ucr-case__human > span {
  display: inline-block; margin-right: 10px; padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,.14); font-size: 11.5px; font-weight: 800; color: #fff;
}
.ucr-case__nums { display: flex; gap: 0; }
.ucr-case__nums > div { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.18); text-align: center; }
.ucr-case__nums > div:first-child { border-left: 0; }
.ucr-case__nums > div:last-child { padding-right: 0; }
.ucr-case__nums dt { font-size: 12.5px; font-weight: 700; color: #8fa6d4; white-space: nowrap; }
.ucr-case__nums dd { margin-top: 8px; font-family: var(--fv-font-en); font-size: 38px; font-weight: 800; line-height: 1; color: #fff; white-space: nowrap; }
.ucr-case__nums dd small { margin-left: 4px; font-family: var(--fv-font); font-size: 14px; font-weight: 700; color: #c7d3ea; }

.ucr-logos { margin-top: 20px; padding: 22px 28px; border: 1px solid #e9eef6; border-radius: 18px; background: var(--fv-white); }
.ucr-logos__label { font-size: 13px; font-weight: 800; color: var(--fv-ink-3); }
.ucr-logos ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.ucr-logos li { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px; border-radius: 12px; background: #f4f7fc; }
.ucr-logos li strong { font-family: var(--fv-font-en); font-size: 17px; font-weight: 800; color: var(--fv-ink); }
.ucr-logos li span { font-size: 12.5px; color: var(--fv-ink-3); }
.ucr-logos__note { margin-top: 14px; font-size: 12.5px; line-height: 1.8; color: var(--fv-muted); }
.ucr-logos__note a { color: var(--fv-ink-2); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1200px) {
  .ucr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ucr-case { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ucm__head { grid-template-columns: 132px minmax(0, 1fr); }
  .ucm__title { font-size: 26px; }
}
@media (max-width: 720px) {
  .uc2-cards__hint { text-align: left; }
  .ucr-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ucr-case { padding: 22px 20px; }
  .ucr-case__nums { flex-wrap: wrap; gap: 16px 0; }
  .ucr-case__nums > div { padding: 0 16px; }
  .ucr-case__nums > div:first-child { padding-left: 0; }
  .ucr-case__nums dd { font-size: 30px; }
  .ucr-logos { padding: 18px; }
  .ucm { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 20px 20px 0 0; margin: auto auto 0; }
  .ucm__box { max-height: 92vh; padding: 26px 18px 0; }
  .ucm__head { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-right: 0; }
  .ucm__art { max-width: 260px; }
  .ucm__title { font-size: 22px; }
  .ucm-scn { padding: 16px 16px 18px; }
  .ucm__foot .btn { width: 100%; justify-content: center; }
}

/* 帯の注記内リンク */
.uc2-band__note a { color: var(--fv-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.uc2-band__note a:hover { color: var(--fv-red); }
/* 「17／24件」のように分母を添える場合は少し詰める */
.uc2-band__stats dd small { white-space: nowrap; }

/* ============================================================
   モバイル（≤720px）レイアウト
   デスクトップのスクショを元に画像生成APIで起こしたモバイル案に合わせ、
   縦積みではなく「横並びの行」に組み替えて、縦の長さを詰める。
   ※ このファイルは上の方でメディアクエリのあとにも素の宣言が積まれており、
   　 旧デザイン（css/style.css）側にも .sec-xxx 付きの指定があるため、
   　 モバイル指定はファイル末尾のこのブロックにまとめ、必要な所だけ強さを上げる。
   ============================================================ */
@media (max-width: 720px) {

  /* ---- 01 about：5つの特徴を「番号｜アイコン｜見出し＋説明」の行に ---- */
  .feat-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .feat-card {
    display: grid; align-items: center; gap: 0 8px;
    grid-template-columns: 22px 88px minmax(0, 1fr);
    grid-template-areas: "no art h4" "no art tx";
    padding: 12px 14px; text-align: left;
  }
  .feat-no { position: static; grid-area: no; align-self: center; font-size: 17px; }
  .feat-art {
    grid-area: art; width: 156px; height: 100px; margin: 0;
    transform: scale(.56); transform-origin: left center;
  }
  .feat-card h4 {
    grid-area: h4; margin: 0; font-size: 14.5px; line-height: 1.45;
    white-space: normal; word-break: auto-phrase;
  }
  .feat-card p { grid-area: tx; margin: 3px 0 0; font-size: 12px; line-height: 1.6; word-break: auto-phrase; }
  .feat-card p br { display: none; }

  /* ---- 03 usecases：タブは縦積みのリストに ---- */
  .uc-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .uc-tab { width: 100%; justify-content: flex-start; height: 46px; padding: 0 16px; font-size: 14px; }
  .uc-tab[aria-selected="true"]::after { display: none; }

  /* ---- 05 fit：「番号＋見出し」左、イラスト右 ---- */
  .fit-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fit-card {
    display: grid; align-items: center; gap: 0 12px;
    grid-template-columns: minmax(0, 1fr) 128px;
    grid-template-areas: "no art" "title art";
    padding: 14px 14px 14px 16px;
  }
  .fc-no { grid-area: no; font-size: 20px; }
  .fc-title { grid-area: title; margin: 4px 0 0; font-size: 15px; word-break: auto-phrase; }
  .fc-art { grid-area: art; width: 128px; margin-top: 0; }

  /* ---- 06 problem：「番号＋見出し＋説明」左、イラスト右 ---- */
  .pb-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pb-card {
    display: grid; align-items: center; gap: 0 8px;
    grid-template-columns: minmax(0, 1fr) 136px;
    grid-template-areas: "head art" "desc art";
    padding: 14px 10px 14px 16px;
  }
  .pb-card-head { grid-area: head; gap: 9px; }
  .pb-card-head h4 { font-size: 15px; }
  .pb-card-head h4 br { display: none; }
  .pb-no { font-size: 19px; }
  .pb-desc { grid-area: desc; display: block; margin: 6px 0 0; font-size: 12px; line-height: 1.65; color: var(--fv-ink-2); word-break: auto-phrase; }
  .pb-desc br { display: none; }
  .pb-art { grid-area: art; width: 136px; margin-top: 0; padding-top: 0; transform: none; }

  /* ---- 07 support：8ステップを1列のリストに ---- */
  .sec-support .support-process__list {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  }
  .sec-support .support-process__card {
    display: grid; align-items: center; gap: 0 14px;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas: "art step" "art title";
    height: auto; min-height: 0; padding: 12px 16px; text-align: left;
  }
  .sec-support .support-process__card::after { display: none; }
  .sec-support .support-process__step { grid-area: step; margin: 0; font-size: 11px; letter-spacing: .1em; }
  .sec-support .support-process__illustration { grid-area: art; width: 46px; height: 46px; margin: 0; }
  .sec-support .support-process__illustration svg { width: 26px; height: 26px; }
  .sec-support .support-process__title {
    grid-area: title; height: auto; margin: 2px 0 0; font-size: 15px; line-height: 1.4; text-align: left;
  }

  /* ---- 08 poc：1カラムにして、カードは「番号｜本文」の2列に ---- */
  .n8-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .n8-right { padding-top: 0; margin-right: 0; }
  .n8-hero { margin-left: -16px; margin-top: 6px; width: calc(100% + 32px); aspect-ratio: 760 / 440; }
  .n8-hand--top { position: static; margin: 0 0 6px; text-align: right; font-size: 15px; }
  .n8-steps { gap: 14px; }
  .n8-step {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 0 12px; padding: 14px 16px; min-height: 0;
  }
  .n8-step__ic { display: none; }
  .n8-step__num { font-size: 26px; }
  .n8-step__num small { font-size: 10px; }
  .n8-step__body h3 { font-size: 17px; }
  .n8-step__body p { font-size: 12.5px; line-height: 1.65; }
  .n8-step__body p br { display: none; }
  .n8-step:not(:last-child)::after { bottom: -12px; }
  .n8-measure { position: static; margin-top: 18px; padding: 20px 18px; }
  .n8-goal { margin-top: 12px; padding: 18px 18px; }

  /* ---- 09 security：操作タイルは3列（1200px側の6列指定を打ち消す） ---- */
  .s9-level--approve .s9-tiles,
  .s9-level--never .s9-tiles,
  .s9-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .s9-tiles li { padding: 10px 6px; }
  .s9-tiles span { font-size: 11.5px; }
  .s9-tiles .ti { width: 24px; height: 24px; }

  /* ---- 10 flow：番号｜イラスト｜見出し｜フェーズ の1行に ---- */
  .sec-flow .timeline-arrow { padding: 20px 14px; }
  .sec-flow .timeline { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sec-flow .timeline::before { display: none; }
  .sec-flow .tl-item {
    display: grid; align-items: center; gap: 0 12px;
    grid-template-columns: 42px 58px minmax(0, 1fr) 62px;
    min-height: 0; padding: 8px 12px; border-radius: 14px; background: #fff;
    text-align: left;
  }
  .sec-flow .tl-item .dot { width: 42px; height: 42px; margin: 0; border-width: 2px; font-size: 15px; }
  .sec-flow .tl-illustration { grid-column: auto; width: 58px; height: 46px; margin: 0; }
  .sec-flow .tl-illustration img { width: 100%; height: 100%; object-fit: contain; }
  .sec-flow .tl-item .t { min-height: 0; margin: 0; font-size: 14.5px; line-height: 1.4; }
  .sec-flow .tl-item .t br { display: none; }
  .sec-flow .tl-item .ph { width: 62px; min-height: 26px; margin: 0; font-size: 10px; }

  /* ---- 04 adoption：導入企業は「ロゴ＋社名｜説明」、部門は2列に ---- */
  .ad-mid { gap: 24px; }
  .co-grid { gap: 10px; }
  .co-card { padding: 14px 16px; }
  .co-head { gap: 10px; }
  .co-head b { font-size: 19px; }
  .co-head svg { width: 30px; height: 30px; }
  .co-cat { margin-top: 4px; font-size: 11.5px; }
  .co-desc { margin-top: 6px; font-size: 12.5px; line-height: 1.6; }
  .co-desc br { display: none; }
  .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dept-grid li { height: 52px; padding: 0 8px 0 32px; gap: 7px; }
  .dept-grid .hole { left: 10px; width: 10px; height: 10px; box-shadow: inset 0 1.2px 2px rgba(27,28,32,.22), 0 0 0 2.5px #fff; }
  .dept-grid .ringclip { left: 1px; width: 23px; height: 23px; border-width: 3px; }
  .dept-grid li svg { width: 18px; height: 18px; flex: none; }
  .dept-grid li b { font-size: 12px; }
  .dept-grid li:nth-child(3) { grid-column: 1 / -1; }

  /* ---- 見出しの折り返し ---- */
  .sec-support .support-head h2,
  .sec-flow .flow-head h2,
  .ad-h3, .pb-h3 { word-break: auto-phrase; }

  /* ---- 08 ヒーロー内の手書きが吹き出しと重なるのを避ける ---- */
  .n8-hero .n8-hand { font-size: 2.9cqw; }
}

/* ============================================================
   モバイルUIの鉄則（ホーム／≤720px）
   1 水平  : 左右の余白は 20px。すべてのブロックの左端をそろえる
   2 縦    : セクションの上下パディングは 48px で固定
   3 文字  : H2=27px / カード見出し=16〜17px / 本文=13.5px 以上
   4 CTA   : 幅100% / 高さ56px以上 / 左端20px / 文字は折り返さない
   5 視認性: UIラベルは11px、イラスト内の文字は10pxを下限。
             それ未満になるカード内の吹き出しは出さない
   6 視線  : 中央寄せを使わない（イラスト内を除く）。番号・アイコンは左端
   セレクタはホームのセクションidで限定し、/use-cases/ に影響させない。
   ============================================================ */
@media (max-width: 720px) {

  /* ---- 鉄則2：セクションの縦リズムを48pxに統一 ---- */
  #about, #how, #usecases, #adoption, #fit, #problem,
  #support, #poc, #security, #flow, #faq, #contact {
    padding-top: 48px; padding-bottom: 48px;
  }

  /* ---- 鉄則1：左右20pxに統一 ---- */
  #support > .container, #flow > .container,
  #faq > .container, #contact > .container { padding-right: 20px; padding-left: 20px; }

  /* ---- 鉄則3：見出しのサイズを1つに ---- */
  #about h2, #how h2, #usecases h2, #adoption h2, #fit h2, #problem h2,
  #support h2, #poc h2, #security h2, #flow h2, #faq h2, #contact h2 {
    font-size: 27px; line-height: 1.34; word-break: auto-phrase;
  }
  #about h2 br, #how h2 br, #usecases h2 br, #adoption h2 br, #fit h2 br, #problem h2 br,
  #support h2 br, #poc h2 br, #security h2 br, #flow h2 br, #faq h2 br, #contact h2 br { display: none; }

  #about .cmp-head h3 { font-size: 21px; }
  #about .feat-head h3 { font-size: 20px; }
  #usecases .uc-title { font-size: 20px; }
  #problem .pb-h3 { font-size: 19px; }
  #adoption .ad-h3 { font-size: 17px; }
  #poc .n8-measure__head h3 { font-size: 19px; }

  /* ---- 鉄則4：CTAは幅100%・高さ56px・左端そろえ ---- */
  .fv .btn,
  #about .btn, #how .btn, #usecases .btn, #adoption .btn, #fit .btn, #problem .btn,
  #support .btn, #poc .btn, #security .btn, #flow .btn, #contact .btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 56px; height: auto;
    padding: 14px 18px; text-align: center;
  }
  .fv .btn br,
  #about .btn br, #how .btn br, #usecases .btn br, #adoption .btn br, #fit .btn br,
  #problem .btn br, #support .btn br, #poc .btn br, #security .btn br,
  #flow .btn br, #contact .btn br { display: none; }
  #security .s9-foot__cta { padding: 14px 18px; text-align: center; }

  /* ---- 鉄則5a：UIラベルの下限は11px ---- */
  #how .hs-out small, #how .hs-report small { font-size: 11px; }
  #how .hq-list .tag { font-size: 11px; padding: 5px 9px; }
  #adoption .co-cat { font-size: 12.5px; }
  #poc .n8-step__num small { font-size: 11px; }
  #flow .tl-item .ph { font-size: 11px; }

  /* ---- 鉄則5b：イラスト内の文字の下限は10px ---- */
  #how .hs-hub__label { font-size: 10px; }
  #usecases .uc-tag, #usecases .uc-scene .mini b { font-size: 10px; }
  #problem .pb-row, #problem .pb-slabs li { font-size: 10px; }
  #fit .fit-balloon, #fit .fit-hand span { font-size: 10.5px; }
  #security .s9-chip { font-size: 10.5px; }

  /* ---- 鉄則5c：カード内イラストの吹き出しは出さない（読めないため） ---- */
  #problem .pb-card .pb-mini,
  #problem .pb-card .pb-qm,
  #fit .fit-card .ghost-bubble,
  #fit .fit-card .ok-bubble { display: none; }

  /* ---- FAQ：質問文が1文字だけ折り返すのを防ぐ ---- */
  #faq .faq-item summary { word-break: auto-phrase; }

  /* ---- 縦幅：FVのツール一覧は390pxでも2列のまま ---- */
  .fv-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-card { padding: 10px 12px; gap: 8px; }
  .fv-card .lg { width: 26px; height: 26px; }
  .fv-card b { font-size: 13.5px; }
}

/* ============================================================
   鉄則8：縦が足りないぶんは横を使う（≤720px）
   スマホは縦が有限なので、並列に読むカード群は縦積みにせず
   「横スワイプ（スクロールスナップ）」に切り替える。
   ・カードは画面幅の 70〜86% にして、次のカードを必ず覗かせる
   ・左端は本文と同じ20pxにそろえる（margin -20px / padding 20px）
   ・スクロールバーは隠し、代わりに下に進捗バーを出す（js/main.js）
   ・キーボード操作のため js 側で tabindex/role を付与する
   ============================================================ */
@media (max-width: 720px) {

  #about .feat-grid,
  #fit .fit-cards,
  #problem .pb-grid,
  #adoption .co-grid,
  #security .s9-levels,
  #poc .n8-steps,
  #flow .timeline,
  #support .support-process__list,
  #usecases .uc-tabs {
    display: flex; flex-wrap: nowrap; gap: 12px;
    margin-right: -20px; margin-left: -20px;
    padding-right: 20px; padding-left: 20px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #about .feat-grid::-webkit-scrollbar,
  #fit .fit-cards::-webkit-scrollbar,
  #problem .pb-grid::-webkit-scrollbar,
  #adoption .co-grid::-webkit-scrollbar,
  #security .s9-levels::-webkit-scrollbar,
  #poc .n8-steps::-webkit-scrollbar,
  #flow .timeline::-webkit-scrollbar,
  #support .support-process__list::-webkit-scrollbar,
  #usecases .uc-tabs::-webkit-scrollbar { display: none; }

  #about .feat-grid > li,
  #fit .fit-cards > li,
  #problem .pb-grid > li,
  #adoption .co-grid > li,
  #security .s9-levels > div,
  #poc .n8-steps > li,
  #flow .timeline > li,
  #support .support-process__list > li,
  #usecases .uc-tabs > .uc-tab { flex: 0 0 auto; scroll-snap-align: start; }

  /* 進捗バー */
  .m-swipe__bar {
    height: 3px; margin: 14px 0 0; border-radius: 999px;
    background: rgba(27,28,32,.08); overflow: hidden;
  }
  .m-swipe__bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--fv-red); transition: transform .12s linear;
  }
  .m-swipe__bar[hidden] { display: none; }
  [data-swipe]:focus-visible { outline: 3px solid var(--fv-blue); outline-offset: 4px; border-radius: 14px; }

  /* ---- 01 主な特徴：カードは縦組みに戻す ---- */
  #about .feat-grid > li {
    width: min(70vw, 290px);
    display: block; padding: 34px 16px 20px; text-align: left;
  }
  #about .feat-no { position: absolute; left: 16px; top: 14px; font-size: 18px; }
  #about .feat-art {
    display: block; width: 156px; height: 100px; margin: 0 0 2px;
    transform: scale(.86); transform-origin: left center;
  }
  #about .feat-card h4 { font-size: 15.5px; }
  #about .feat-card p { font-size: 12.5px; }

  /* ---- 05 向いている企業 ---- */
  #fit .fit-cards > li {
    width: min(72vw, 300px);
    display: block; padding: 16px 16px 14px;
  }
  #fit .fc-no { font-size: 21px; }
  #fit .fc-title { margin-top: 6px; font-size: 16px; }
  #fit .fc-art { width: 100%; margin-top: 10px; }

  /* ---- 06 つまずきポイント ---- */
  #problem .pb-grid > li {
    width: min(80vw, 330px);
    display: block; padding: 18px 18px 0;
  }
  #problem .pb-card-head h4 { font-size: 16px; }
  #problem .pb-desc { margin-top: 10px; font-size: 12.5px; }
  #problem .pb-art { width: 100%; margin-top: 14px; }
  /* 横幅が戻るので吹き出しも読める。鉄則6の非表示を解除する */
  #problem .pb-card .pb-mini,
  #problem .pb-card .pb-qm { display: block; }
  #problem .pb-card .pb-mini { font-size: 10px; }

  /* ---- 04 主な導入企業 ---- */
  #adoption .co-grid > li { width: min(78vw, 320px); }

  /* ---- 09 権限の3段階 ---- */
  #security .s9-levels > div { width: min(86vw, 360px); }

  /* ---- 08 PoCの4ステップ ---- */
  #poc .n8-steps > li { width: min(86vw, 360px); }
  #poc .n8-step:not(:last-child)::after { display: none; }

  /* ---- 10 導入までの流れ ---- */
  #flow .timeline > li { width: min(74vw, 300px); }

  /* ---- 07 支援の8ステップ：2段 × 横スクロール ---- */
  #support .support-process__list {
    display: grid; grid-auto-flow: column;
    grid-template-columns: none; grid-template-rows: auto auto;
    grid-auto-columns: min(46vw, 200px);
    gap: 10px 12px;
  }

  /* パネルの内側にあるものは、親のパディング幅でブリードさせる */
  #about .feat-grid { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; scroll-padding-left: 16px; }
  #flow .timeline { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; scroll-padding-left: 14px; }

  /* ---- 03 タブは横スクロールに戻す ---- */
  #usecases .uc-tabs > .uc-tab { width: auto; }
}

/* ---- 鉄則8の続き：横に流せるものは全部横に ---- */
@media (max-width: 720px) {

  /* 01 従来の生成AI ／ Grok Bot の比較は、縦に積まずスワイプで見比べる */
  #about .cmp {
    display: flex; flex-wrap: nowrap; gap: 12px;
    margin-right: -20px; margin-left: -20px;
    padding-right: 20px; padding-left: 20px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #about .cmp::-webkit-scrollbar { display: none; }
  #about .cmp > .cmp-card { flex: 0 0 min(88vw, 340px); scroll-snap-align: start; }

  /* 05 業種のリストは横1行に流す */
  #fit .fb-inds {
    display: flex; flex-wrap: nowrap; gap: 10px;
    margin-right: -20px; margin-left: -20px;
    padding-right: 20px; padding-left: 20px;
    overflow-x: auto; scrollbar-width: none;
  }
  #fit .fb-inds::-webkit-scrollbar { display: none; }
  #fit .fb-inds > li { flex: 0 0 auto; }
  #fit .fb-label br { display: none; }

  /* 08 PoCの指標は4列に詰める */
  #poc .n8-measure__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  #poc .n8-m__ic { width: 44px; height: 44px; }
  #poc .n8-m__ic img { width: 24px; }
  #poc .n8-m__label { font-size: 11px; line-height: 1.4; }

  /* 04 xAI公開事例の流れも横に */
  #adoption .case-flow {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
    margin-right: -20px; margin-left: -20px;
    padding-right: 20px; padding-left: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    scrollbar-width: none;
  }
  #adoption .case-flow::-webkit-scrollbar { display: none; }
  #adoption .case-flow > * { flex: 0 0 auto; scroll-snap-align: start; }
  #adoption .flow-inputs { display: grid; gap: 8px; }
}

/* ---- 鉄則8：2つ並ぶだけのものは横2列に ---- */
@media (max-width: 720px) {
  #how .hs-outputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #how .hs-out { padding: 14px 12px; }
  #how .hs-out p { font-size: 12.5px; line-height: 1.6; }
  #how .hs-out p br { display: none; }
  #usecases .uc-checks, #usecases .uc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  #usecases .uc-checks li, #usecases .uc-results li { font-size: 12.5px; line-height: 1.55; word-break: auto-phrase; }
}

/* ============================================================
   鉄則9：余白は8ptグリッドの4段階だけ（≤720px）
   モバイルの標準的な縦リズムに合わせて、不要な縦幅を落とす。
     セクション上下 32px ／ ブロック間 24px
     見出し→リード 12px ／ リード→本体 20px
   （48px以上の余白はデスクトップの値がそのまま残っていたもの）
   ============================================================ */
@media (max-width: 720px) {

  /* セクション上下 48 → 32（セクション間は96px → 64px） */
  #about, #how, #usecases, #adoption, #fit, #problem,
  #support, #poc, #security, #flow, #faq, #contact {
    padding-top: 32px; padding-bottom: 32px;
  }

  /* FV */
  .fv-actions { margin-top: 20px; }
  .fv-stats { margin-top: 28px; }
  .fv-visual { margin-top: 28px; }

  /* 01 about ― 親がgridなので行間はgapで詰める */
  #about .about-top { row-gap: 24px; }
  #about .cmp { margin-top: 0; }
  #about .m-swipe__bar { margin-top: 0; }
  #about .feat-panel { margin-top: 24px; }
  #about .about-text { margin-top: 12px; }

  /* 02 how */
  #how .how2-grid { row-gap: 24px; }
  #how .how2-steps, #how .how2-stage { margin-top: 0; }

  /* 03 usecases */
  #usecases .uc-top { row-gap: 16px; }
  #usecases .uc-hero { margin-top: 0; }
  #usecases .uc-tabs { margin-top: 20px; }
  #usecases .uc-panel { margin-top: 20px; }

  /* 04 adoption */
  #adoption .ad-top { row-gap: 16px; }
  #adoption .ad-hero { margin-top: 0; }
  #adoption .ad-mid { margin-top: 24px; }
  #adoption .ad-case { margin-top: 24px; }

  /* 05 fit */
  #fit .fit-cards { margin-top: 20px; }
  #fit .fit-bar { margin-top: 24px; }

  /* 06 problem */
  #problem .pb-top { row-gap: 16px; }
  #problem .pb-hero { margin-top: 0; }
  #problem .pb-h3 { margin-top: 24px; }
  #problem .pb-cta { margin-top: 24px; }

  /* 07 support */
  #support .support-process { margin-top: 24px; }
  #support .support-copy { margin-top: 24px; }

  /* 09 security */
  #security .s9-levels { margin-top: 20px; }
  #security .s9-foot { margin-top: 24px; }

  /* 10 flow */
  #flow .timeline-arrow { margin-top: 20px; }
  #flow .timeline-legend { margin-top: 20px; }

  /* 11 faq */
  #faq .section-head { margin-bottom: 20px; }
  #faq .faq-grid { margin-top: 0; }

  /* 12 contact */
  #contact .contact-grid { row-gap: 24px; }
  #contact .contact-actions { margin-top: 20px; }
  #contact .contact-team { margin-top: 24px; }
  #contact .form-card { margin-top: 0; }

  /* スワイプの進捗バーは12px下に */
  .m-swipe__bar { margin-top: 12px; }
}

/* 鉄則9：本文の行送りは 1.7〜1.8（1.9は行間が空きすぎて縦を食う） */
@media (max-width: 720px) {
  #about .feat-lead, #how .how2-lead, #adoption .co-cat,
  #support .support-copy p, #security .s9-lead,
  #contact .lead, #contact .hint { line-height: 1.75; }
}

/* ============================================================
   鉄則10：横長パノラマのイラストはモバイル用に描き直す（≤720px）
   デスクトップのメインビジュアルは横長（比 1.7〜2.2）で、
   390pxまで縮むと人物もBotも小さくなり、重ねた文字が被って読めない。
   ・比 1.4〜1.6 のモバイル専用イラストに差し替える
   ・イラストに重ねていた文字（手書き・チップ・スラブ）は
     絶対配置をやめて通常フローに出し、12.5px以上で表示する
   ・重複する情報（下のカードと同じ内容の吹き出し）はモバイルでは出さない
   ============================================================ */
.s9-art__m, .pb-hero__m, .fit-hero__m { display: none; }

@media (max-width: 720px) {

  /* ---- 09 セキュリティ：手書き → イラスト → チップ2×2 ---- */
  #security .s9-art {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%; max-width: 100%;
    height: auto; aspect-ratio: auto;
    margin: 0; padding: 0;
    overflow: visible;
  }
  #security .s9-art__shield,
  #security .s9-art__person,
  #security .s9-art__bot { display: none; }
  #security .s9-art__m {
    position: static; display: block; order: 2; grid-column: 1 / -1;
    width: 100%; max-width: 400px; height: auto; margin: 0 auto;
  }
  #security .s9-hand {
    position: static; order: 1; grid-column: 1 / -1;
    width: auto; margin: 0;
    font-size: 14.5px; line-height: 1.7; text-align: center;
  }
  #security .s9-hand br { display: none; }
  #security .s9-hand::after { width: 128px; height: 2px; margin: 6px auto 0; }
  #security .s9-chip {
    position: static; order: 3;
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 10px 8px; border-radius: 10px;
    font-size: 12.5px; line-height: 1.4;
    box-shadow: 0 2px 10px rgba(27, 28, 32, 0.08);
  }

  /* ---- 06 課題：イラスト → まとめの一言 → 4つのスラブ ---- */
  #problem .pb-hero {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%; max-width: 100%;
    height: auto; aspect-ratio: auto;
    margin: 0; padding: 0;
  }
  #problem .pb-blob, #problem .pb-floor, #problem .pb-win,
  #problem .pb-row, #problem .pb-bub-1, #problem .pb-scr,
  #problem .pb-person, #problem .pb-books, #problem .pb-books2,
  #problem .pb-bluebox, #problem .pb-gb { display: none; }
  #problem .pb-hero__m {
    position: static; display: block; order: 1; grid-column: 1 / -1;
    width: 100%; max-width: 400px; height: auto; margin: 0 auto;
  }
  #problem .pb-bub-2 {
    position: static; order: 2; grid-column: 1 / -1;
    margin: 0; padding: 12px 14px; border-radius: 12px;
    font-size: 14px; line-height: 1.6; text-align: center;
  }
  #problem .pb-bub-2::after { display: none; }
  #problem .pb-bub-2 br:first-of-type { display: none; }
  #problem .pb-bub-2 em { border-bottom-width: 2px; padding-bottom: 2px; }
  #problem .pb-bub-2 .pb-tri { display: none; }
  #problem .pb-slabs {
    position: static; order: 3; grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    width: auto; margin: 0; padding: 0;
  }
  #problem .pb-slabs li {
    padding: 9px 8px;
    border-width: 1px; border-radius: 8px;
    box-shadow: 0 2px 0 #e2e7ef;
    font-size: 12.5px;
  }
  #problem .pb-slabs li + li { margin-top: 0; }

  /* ---- 05 向いている企業：イラスト → 手書き1行 ---- */
  #fit .fit-hero {
    position: static;
    display: grid; grid-template-columns: 1fr; gap: 10px;
    width: 100%; max-width: 100%;
    height: auto; aspect-ratio: auto;
    margin: 0; padding: 0;
  }
  #fit .fit-scene, #fit .fit-bot,
  #fit .fit-balloon, #fit .fit-hand-1 { display: none; }
  #fit .fit-hero__m {
    position: static; display: block; order: 1;
    width: 100%; max-width: 400px; height: auto; margin: 0 auto;
  }
  #fit .fit-hand-2 {
    position: static; order: 2;
    width: auto; margin: 0; transform: none;
    font-size: 15px; line-height: 1.6;
    text-align: center; white-space: normal;
  }
  #fit .fit-hand-2 br { display: none; }

  /* 絵の外に出した文字はコピーできるようにする（器のuser-select:noneを解除） */
  #problem .pb-hero, #fit .fit-hero { user-select: auto; }
  #fit .fit-hand-2 span { padding-left: 0.15em; font-size: 15px; }
}

/* ============================================================
   導入をご検討中の方へ（資料請求 / 無料相談）  #download
   モックに合わせた濃い青のフルブリード帯。§4「地色は透過」の
   例外だが、この帯だけはコンバージョン導線として意図的に分ける。
   色は --fv-blue を --fv-ink 側に寄せて作る（新しい色は足さない）。
   ============================================================ */
.sec-dl {
  --dl-deep: var(--fv-blue-deep);
  --dl-deep2: color-mix(in oklab, var(--fv-blue-deep) 76%, var(--fv-ink));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 88px 0 96px;
  background: var(--fv-blue-deep);
  background:
    radial-gradient(88% 116% at 46% -12%, color-mix(in oklab, var(--fv-blue-deep) 84%, var(--fv-white)) 0%, transparent 58%),
    linear-gradient(158deg, var(--fv-blue-deep) 0%, var(--dl-deep2) 100%);
  color: var(--fv-white);
}
/* 帯をベタ塗りに見せないための粒子。SVGのfeTurbulenceをdata URIで敷くだけで、
   ライブラリも画像ファイルも要らない。モック実測：粒の相関は
   lag1で0.79・lag3で0.12（粒の直径 約3px）、明度のばらつき σ≈4.2。
   baseFrequency 0.18 / opacity .7 で σ=3.4・相関 0.77/0.44/0.17 とほぼ一致する。 */
.sec-dl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.18' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
@media (prefers-reduced-transparency: reduce) {
  .sec-dl::before { display: none; }
}
.sec-dl > .fv-container { position: relative; z-index: 1; }

.dl-head { text-align: center; }
.dl-h2 {
  margin: 0;
  font-size: clamp(1.65rem, 1.9vw, 2.1rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.01em;
  word-break: auto-phrase;
  color: var(--fv-white);
}
.dl-rule {
  display: block;
  width: 88px; height: 3px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: var(--fv-white);
}

.dl-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 1120px;
  margin: 44px auto 0;
}

.dl-card {
  display: flex;
  flex-direction: column;
  padding: 44px 48px 44px;
  border-radius: 16px;
  background: var(--fv-white);
  box-shadow: 0 18px 44px rgba(12, 22, 52, 0.18);
  color: var(--fv-ink);
  text-align: center;
}
.dl-card__eyebrow {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--fv-ink-2);
  word-break: auto-phrase;
}
.dl-card__title {
  margin: 6px 0 0;
  font-size: clamp(1.25rem, 1.42vw, 1.6rem);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: var(--dl-deep);
  word-break: auto-phrase;
}

/* ---- 左：資料の表紙（文字はHTML側。画像に焼き込まない） ---- */
.dl-cover {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 372px;
  margin: 26px auto 0;
  aspect-ratio: 372 / 210;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #eef3fc 0%, #e3ebf8 100%);
  box-shadow: 0 8px 22px rgba(12, 22, 52, 0.12);
  text-align: left;
  user-select: none;
}
.dl-cover__sheet {
  position: absolute;
  right: -12%; bottom: -46%;
  width: 56%; height: 150%;
  border-radius: 14px;
  background: var(--fv-white);
  transform: rotate(-11deg);
}
.dl-cover__brand {
  position: absolute;
  right: 4.6cqw; top: 4.6cqw;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 3.1cqw; font-weight: 700; letter-spacing: 0.02em;
  color: var(--fv-ink-2);
}
.dl-cover__brand img { width: 1.5em; height: 1.5em; }
.dl-cover__brand b { color: var(--dl-deep); }
.dl-cover__badge {
  position: absolute;
  left: 5.4cqw; top: 8.6cqw;
  z-index: 3;
  padding: 1.1cqw 2.4cqw;
  border-radius: 1.4cqw;
  background: var(--dl-deep);
  font-size: 2.9cqw; font-weight: 700; letter-spacing: 0.04em;
  color: var(--fv-white);
}
.dl-cover__t {
  position: absolute;
  left: 5.4cqw; top: 19cqw;
  z-index: 3;
  margin: 0;
  font-size: 6.6cqw; font-weight: 800; line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
}
.dl-cover__t em {
  font-style: normal;
  color: var(--fv-red);
}
.dl-cover__s {
  position: absolute;
  left: 5.4cqw; top: 34cqw;
  z-index: 3;
  margin: 0;
  font-size: 3.1cqw; font-weight: 700; line-height: 1.6;
  color: var(--fv-ink-2);
}
.dl-cover__bot {
  position: absolute;
  right: 4cqw; bottom: 0;
  z-index: 4;
  width: 28cqw; height: auto;
}

/* ---- 右：オンライン相談 ---- */
.dl-meet {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 372px;
  margin: 26px auto 0;
  aspect-ratio: 372 / 210;
  user-select: none;
}
.dl-meet__pc {
  position: absolute;
  left: 50%; bottom: 2cqw;
  width: 78cqw; height: auto;
  transform: translateX(-50%);
}
.dl-meet__pc .lid  { fill: #cfd6e4; }
.dl-meet__pc .scr  { fill: #eef3fc; }
.dl-meet__pc .base { fill: #dee4ef; }
.dl-meet__pc .notch{ fill: #c4ccdc; }
.dl-meet__bot {
  position: absolute;
  left: 50%; bottom: 16.5cqw;
  z-index: 2;
  width: 20cqw; height: auto;
  transform: translateX(-50%);
}
.dl-meet__b1, .dl-meet__b2, .dl-meet__b3 {
  position: absolute;
  z-index: 2;
  border-radius: 1cqw;
  background: #ccd8ef;
}
.dl-meet__b1, .dl-meet__b2, .dl-meet__b3 { display: none; }

/* ---- 本文・チェックリスト・ボタン ---- */
.dl-card__lead {
  margin: 24px 0 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--fv-ink-2);
  text-align: left;
  word-break: auto-phrase;
}
.dl-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  text-align: left;
}
.dl-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
.dl-ck {
  width: 20px; height: 16px;
  margin-top: 5px;
  color: var(--dl-deep);
}
.dl-card__note {
  margin: 20px 0 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--fv-ink-3);
  text-align: left;
  word-break: auto-phrase;
}
.dl-card__foot {
  margin-top: auto;
  padding-top: 28px;
}
.dl-btn {
  width: 100%;
  min-height: 60px;
  padding-inline: 24px;
  font-size: 1.0625rem;
  white-space: normal;
}
.dl-ic { width: 18px; height: 18px; flex: none; }
.dl-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--dl-deep);
  text-decoration: none;
}
.dl-sub:hover { text-decoration: underline; }
.dl-sub .dl-ic { width: 14px; height: 12px; }
.dl-sub--static {
  color: var(--fv-muted);
  font-weight: 500;
}

@media (max-width: 1200px) {
  .sec-dl { padding: 72px 0 80px; }
  .dl-cards { gap: 24px; }
  .dl-card { padding: 36px 32px; }
}

/* デスクトップ用に作った帯。モバイルは縦に積むだけの最小対応 */
@media (max-width: 720px) {
  .sec-dl { padding: 32px 0; }
  .dl-h2 { font-size: 22px; line-height: 1.45; }
  .dl-rule { width: 64px; margin-top: 14px; }
  .dl-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  .dl-card { padding: 24px 20px; }
  .dl-card__eyebrow { font-size: 13px; }
  .dl-card__title { font-size: 19px; }
  .dl-cover, .dl-meet { margin-top: 16px; }
  .dl-card__lead { margin-top: 16px; font-size: 14px; line-height: 1.75; }
  .dl-list { margin-top: 16px; gap: 10px; }
  .dl-list li { font-size: 14px; }
  .dl-card__note { margin-top: 16px; font-size: 13px; line-height: 1.75; }
  .dl-card__foot { padding-top: 20px; }
  .dl-btn { min-height: 56px; font-size: 15px; }
}

/* ===== mobile-redesign 01 START ===== */
/* ============================================================
   01 Header ＋ FV ＋ 固定CTA（mobile-redesign）
   スマホのFVは「見出し・短い説明・相談ボタン」を主役にし、
   活用イメージは「依頼する → 準備する → 確認する」の3段だけにする。
   ・3項目の特長（.fv-stats）は07/08と重複するので隠す
   ・Grok Bot大アイコン＋6ツールのグリッド（.fv-visual）は02で説明するので隠す
   ・CTAはイラストより上。副CTAはテキストリンクに落とす
   ============================================================ */

/* モバイル専用の要素はデスクトップで出さない */
@media (min-width: 721px) {
  .fv .fv-lead__m,
  .fv .fv-note__m,
  .fv .fv-steps__m,
  .fv .fv-doc__m,
  .m-cta { display: none; }
}

@media (max-width: 720px) {

  /* ---- ヘッダー：ロゴ＋導入コンサル＋メニューだけ。高さを詰める ---- */
  :root { --header-h: 60px; }
  .site-header .header-inner { padding-right: 10px; padding-left: 16px; }
  .site-header .brand { font-size: 21px; }

  /* ---- FV：文字の階層 ---- */
  .fv > .fv-container { padding-right: 16px; padding-left: 16px; }
  .fv .fv-copy { padding-top: 28px; padding-bottom: 40px; }
  .fv .fv-tagline { font-size: 14px; gap: 8px; color: var(--fv-ink-2); }
  .fv .fv-tagline .mark { width: 12px; }
  .fv .fv-title {
    margin-top: 10px;
    font-size: clamp(32px, 9.4vw, 40px);
    line-height: 1.26;
  }
  .fv .fv-lead:not(.fv-lead__m) { display: none; }
  .fv .fv-lead__m {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--fv-ink-2);
    word-break: auto-phrase;
  }

  /* ---- 相談ボタン：主ボタン1つだけ ---- */
  .fv .fv-actions { margin-top: 24px; }
  .fv .fv-actions .btn-red-outline { display: none; }
  .fv .fv-actions .btn-red { min-height: 56px; font-size: 17px; font-weight: 700; gap: 10px; }
  .fv .fv-note__m {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fv-ink-3);
    text-align: center;
  }

  /* ---- 置き換えで隠すもの ---- */
  .fv .fv-stats,
  .fv .fv-visual { display: none; }

  /* ---- 活用イメージ 3段 ---- */
  .fv .fv-steps__m {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
  }
  .fv .fv-steps__m li {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    row-gap: 10px;
  }
  .fv .fv-steps__m img { display: block; width: 100%; height: auto; }
  .fv .fv-steps__m b {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fv-ink);
    white-space: nowrap;
  }
  /* コマの間の矢印（絵の縦中央） */
  .fv .fv-steps__m li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: var(--fv-steps-mid, 40%);
    right: -12px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--fv-muted);
    border-right: 2px solid var(--fv-muted);
    transform: translateY(-50%) rotate(45deg);
  }

  /* ---- 副CTA：テキストリンク ---- */
  .fv .fv-doc__m {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fv-red);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .fv .fv-doc__m .fv-arrow {
    width: 16px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---- 下部の固定CTA（js/main.js 9 が .is-on を付ける） ---- */
  .m-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--fv-white);
    border-top: 1px solid var(--fv-line);
    box-shadow: 0 -8px 24px rgba(27, 28, 32, 0.08);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .m-cta.is-on {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }
  .m-cta .m-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 700;
  }
  body.has-m-cta { padding-bottom: calc(73px + env(safe-area-inset-bottom)); }
}

/* #contact：ラジオの文言「無料の導入相談（オンライン30分）」は括弧の前で折り返す（全幅） */
#contact .choice .choice-sub { white-space: nowrap; }

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .m-cta,
  .m-cta.is-on { transition: none; }
}
/* ===== mobile-redesign 01 END ===== */

/* ===== mobile-redesign 02 START ===== */
/* 01 Grok Botとは：スマホでは「3行の比較表＋イラスト1点」と「特徴の縦リスト」に絞る。
   モバイル専用マークアップ（.about-m / .feat-list-m）はデスクトップでは出さない。 */
#about .about-m,
#about .feat-list-m { display: none; }

@media (max-width: 720px) {
  /* デスクトップの5段×5段の比較・特徴カードの横スワイプ（と進捗バー）は隠す */
  #about .cmp,
  #about .cmp + .m-swipe__bar,
  #about .feat-grid,
  #about .feat-grid + .m-swipe__bar,
  #about .feat-lead { display: none; }

  #about .about-m { display: block; }
  /* リード文の1〜2文字だけの改行を防ぐ */
  #about .about-text { word-break: auto-phrase; }

  /* イラスト1点：Grok Bot本体＋役割Bot */
  #about .about-m__art {
    position: relative;
    width: 264px; height: 150px;
    margin: 0 auto 20px;
  }
  #about .about-m__art img { position: absolute; height: auto; }
  #about .about-m__art .grok { left: 66px; top: 0; width: 140px; z-index: 1; }
  #about .about-m__art .bot-blue { left: 14px; top: 16px; width: 50px; }
  #about .about-m__art .bot-green { left: 0; top: 96px; width: 58px; z-index: 2; }
  #about .about-m__art .bot-orange { right: 6px; top: 20px; width: 52px; }
  #about .about-m__art .bot-brown { right: 0; top: 94px; width: 50px; z-index: 2; }

  /* 3行の比較表 */
  #about .cmp-m {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--fv-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--fv-white);
  }
  #about .cmp-m th,
  #about .cmp-m td {
    padding: 12px 10px 12px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
    letter-spacing: 0.01em;
    word-break: auto-phrase;
  }
  #about .cmp-m th {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--fv-ink-2);
    background: color-mix(in srgb, var(--fv-ink) 5%, var(--fv-white));
  }
  #about .cmp-m th + th {
    color: var(--fv-red);
    background: color-mix(in srgb, var(--fv-red) 8%, var(--fv-white));
  }
  #about .cmp-m td {
    border-top: 1px solid var(--fv-line);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--fv-ink-2);
  }
  #about .cmp-m td + td { font-weight: 700; color: var(--fv-ink); }
  #about .cmp-m th + th,
  #about .cmp-m td + td { border-left: 1px solid var(--fv-line); }

  /* 主な特徴：外枠パネルを外し、アイコン＋見出し＋1行の縦リストに */
  #about .feat-panel {
    margin-top: 40px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  #about .feat-list-m { display: block; margin-top: 8px; }
  #about .feat-list-m li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--fv-line);
  }
  #about .feat-list-m li:last-child { border-bottom: 0; padding-bottom: 0; }
  #about .feat-list-m img { width: 44px; height: 44px; object-fit: contain; }
  #about .feat-list-m h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--fv-ink);
    word-break: auto-phrase;
  }
  #about .feat-list-m p {
    margin: 2px 0 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--fv-ink-3);
    word-break: auto-phrase;
  }
}
/* ===== mobile-redesign 02 END ===== */

/* ===== mobile-redesign 03 START ===== */
/* 02 仕事の進め方（#how）
   スマホでは「依頼 → 調べる → 整える → つくる → 担当者が確認・承認」の1本の流れに統合する。
   円形のツール相関図・成果物/TO HUMANカード・7工程・完了報告は同じ流れの繰り返しなので隠し、
   7工程は <details> で必要な人だけ開けるようにする。 */
#how .how2-flow-m,
#how .how2-detail-m { display: none; }

@media (max-width: 720px) {
  #how { padding-top: 48px; padding-bottom: 56px; }
  #how .fv-container { padding-right: 16px; padding-left: 16px; }

  /* 見出し・リード：イラスト用に確保していた高さを解除 */
  #how .how2-kicker { margin-bottom: 16px; }
  #how .how2-head { min-height: 0; height: auto; }
  #how .how2-head h2 { margin-bottom: 12px; font-size: clamp(24px, 7vw, 28px); }
  #how .how2-lead { font-size: 15px; line-height: 1.75; word-break: auto-phrase; }
  #how .how2-lead br { display: none; }

  /* 繰り返しになる図・リストは隠す */
  #how .how2-head-art,
  #how .how2-stage,
  #how .hq-ask,
  #how .hq-list,
  #how .hq-report { display: none; }
  #how .how2-grid { margin-top: 24px; gap: 0; }
  #how .how2-steps { width: 100%; padding-top: 0; }

  /* ---- 1本の縦の流れ ---- */
  #how .how2-flow-m {
    display: block;
    padding: 16px 16px 20px;
    border-radius: 16px;
    background: var(--fv-band);
  }
  #how .h2m-ask {
    padding: 12px 16px 14px;
    border-radius: 12px;
    background: var(--fv-white);
    box-shadow: 0 4px 14px rgba(27, 28, 32, .06);
  }
  #how .h2m-ask__who {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: var(--fv-ink-3);
  }
  #how .h2m-ask__who svg { width: 16px; height: 16px; }
  #how .h2m-ask__text {
    margin: 4px 0 0;
    font-size: 18px; font-weight: 800; line-height: 1.5; color: var(--fv-ink);
    word-break: auto-phrase;
  }

  #how .h2m-steps { margin: 0; padding: 0; list-style: none; }
  #how .h2m-step {
    position: relative;
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px;
    align-items: start;
    padding-top: 30px;
  }
  /* 番号の中心を通る縦線と、各工程の手前の下向き矢印 */
  #how .h2m-step::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 19px;
    border-left: 2px dashed color-mix(in srgb, var(--fv-blue) 35%, var(--fv-white));
  }
  #how .h2m-step:last-child::before { bottom: auto; height: 30px; }
  #how .h2m-step::after {
    content: ""; position: absolute; top: 13px; left: 15px;
    width: 8px; height: 8px;
    border-right: 2px solid var(--fv-blue); border-bottom: 2px solid var(--fv-blue);
    transform: rotate(45deg);
  }
  #how .h2m-step__n {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--fv-blue); color: var(--fv-white);
    font-family: var(--fv-font-en); font-size: 14px; font-weight: 800;
  }
  #how .h2m-step__body { min-width: 0; padding-top: 7px; }
  #how .h2m-step__t {
    margin: 0;
    font-size: 18px; font-weight: 800; line-height: 1.45; color: var(--fv-ink);
  }
  #how .h2m-step__d {
    margin: 2px 0 0;
    font-size: 15px; line-height: 1.7; color: var(--fv-ink-3);
    word-break: auto-phrase;
  }
  /* 狭い幅でも「確認」だけが次の行に落ちないよう、句のまとまりで折り返す */
  #how .h2m-step__d span { display: inline-block; }
  #how .h2m-tools {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 10px 0 0; padding: 0; list-style: none;
  }
  #how .h2m-tools li {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 10px;
    border: 1px solid var(--fv-line); border-radius: 999px;
    background: var(--fv-white);
    font-family: var(--fv-font-en); font-size: 11px; font-weight: 700; letter-spacing: .06em;
    color: var(--fv-ink-2);
  }
  #how .h2m-tools svg { width: 14px; height: 14px; flex: none; }

  /* 最後は人：色と形（チェック）で機械の工程と区別する */
  #how .h2m-step__n--check { background: var(--fv-yellow); }
  #how .h2m-step__n--check::before {
    content: ""; width: 8px; height: 15px; margin-top: -4px;
    border-right: 3px solid var(--fv-ink); border-bottom: 3px solid var(--fv-ink);
    transform: rotate(45deg);
  }
  #how .h2m-step--human { align-items: center; }
  #how .h2m-step--human .h2m-step__body {
    justify-self: start;
    padding: 7px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fv-yellow) 24%, var(--fv-white));
  }
  #how .h2m-step--human .h2m-step__t { font-size: 17px; }

  /* ---- 詳しい処理（7工程） ---- */
  #how .how2-detail-m {
    display: block;
    margin-top: 16px;
    border: 1px solid var(--fv-line); border-radius: 12px;
    background: var(--fv-white);
  }
  #how .how2-detail-m summary {
    position: relative;
    display: flex; align-items: center;
    min-height: 52px; padding: 0 48px 0 16px;
    list-style: none; cursor: pointer;
    font-size: 15px; font-weight: 700; color: var(--fv-ink);
  }
  #how .how2-detail-m summary::-webkit-details-marker { display: none; }
  #how .how2-detail-m summary::before,
  #how .how2-detail-m summary::after {
    content: ""; position: absolute; top: 50%; right: 18px;
    width: 14px; height: 2px; margin-top: -1px; border-radius: 2px;
    background: var(--fv-ink-2);
  }
  #how .how2-detail-m summary::after { transform: rotate(90deg); }
  #how .how2-detail-m[open] summary::after { opacity: 0; }
  #how .how2-detail-m summary:focus-visible {
    outline: 2px solid var(--fv-blue); outline-offset: 2px; border-radius: 12px;
  }
  #how .h2m-detail {
    margin: 0; padding: 4px 16px 16px;
    border-top: 1px solid var(--fv-line);
    list-style: none;
  }
  #how .h2m-detail li {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; row-gap: 4px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--fv-line);
  }
  #how .h2m-detail li:last-child { padding-bottom: 0; border-bottom: 0; }
  #how .h2m-detail .n {
    grid-row: 1 / span 2;
    font-family: var(--fv-font-en); font-size: 13px; font-weight: 800; line-height: 1.7;
    color: var(--fv-blue);
  }
  #how .h2m-detail .t {
    font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--fv-ink);
    word-break: auto-phrase;
  }
  #how .h2m-detail .tag {
    grid-column: 2; justify-self: start;
    padding: 2px 8px;
    border: 1px solid var(--fv-line); border-radius: 999px;
    font-family: var(--fv-font-en); font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: var(--fv-ink-3);
  }

  /* ---- まとめの一文：流れと左端をそろえる ---- */
  #how .hq-statement {
    margin: 32px 0 0;
    padding: 2px 0 2px 16px;
    border-top: 0;
    font-size: 20px; line-height: 1.5;
    word-break: auto-phrase;
  }
  #how .hq-statement small { margin-top: 10px; font-size: 15px; line-height: 1.75; }
}
/* ===== mobile-redesign 03 END ===== */

/* ===== mobile-redesign 04 START ===== */
/* 03 ユースケース：スマホは「1行タブ」＋「依頼／任せること／受け取れるもの／人が行うこと／活用例」の統一パネル */
@media (min-width: 721px) {
  #usecases .uc-m { display: none; }
}
@media (max-width: 720px) {
  #usecases > .fv-container { padding-right: 16px; padding-left: 16px; }

  /* ---- タブ：横スクロールの1行。右端を見切れさせて続きがあることを示す ---- */
  #usecases .uc-tabs {
    display: flex; flex-wrap: nowrap; gap: 8px;
    margin: 24px -16px 0; padding: 0 16px 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  #usecases .uc-tabs::-webkit-scrollbar { display: none; }
  #usecases .uc-tabs > .uc-tab {
    position: relative;
    flex: 0 0 auto; width: auto; height: 44px;
    justify-content: center; gap: 6px;
    padding: 0 14px; border: 1.5px solid var(--fv-line); border-radius: 999px;
    background: var(--fv-white); color: var(--fv-ink-2);
    font-size: 14px; font-weight: 700; white-space: nowrap;
    scroll-snap-align: start;
  }
  #usecases .uc-tabs > .uc-tab .ti { width: 18px; height: 18px; }
  #usecases .uc-tabs > .uc-tab:last-child { scroll-snap-align: end; }
  /* 選択中：塗り＋下向きの三角（色だけに頼らず形でも示す） */
  #usecases .uc-tabs > .uc-tab[aria-selected="true"] {
    border-color: var(--fv-red); background: var(--fv-red); color: var(--fv-white);
  }
  #usecases .uc-tabs > .uc-tab[aria-selected="true"]::after {
    display: block; content: ""; position: absolute;
    left: 50%; bottom: -9px; transform: translateX(-50%);
    border: 8px solid transparent; border-top-color: var(--fv-red); border-bottom: 0;
  }
  #usecases .uc-tabs > .uc-tab:focus-visible { outline: 3px solid var(--fv-blue); outline-offset: 2px; }

  /* ---- パネル：外枠は1つだけ。デスクトップ用の中身は隠す ---- */
  #usecases .uc-panel {
    display: block; margin-top: 6px; padding: 20px 16px 8px;
    border-radius: 16px; background: #fdf3f3;
  }
  #usecases .uc-panel[hidden] { display: none; }
  #usecases .uc-panel > .uc-intro,
  #usecases .uc-panel > .uc-scene,
  #usecases .uc-panel > .uc-card { display: none; }

  #usecases .uc-m { display: block; }
  #usecases .uc-m__dept {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 20px; font-weight: 900; line-height: 1.4; color: var(--fv-ink);
  }
  #usecases .uc-m__di { width: 22px; height: 22px; flex: none; fill: var(--fv-red); color: var(--fv-red); }

  #usecases .uc-m__ask {
    display: flex; align-items: flex-start; gap: 8px;
    position: relative; margin: 14px 0 0; padding: 12px 16px 12px 14px;
    border-radius: 14px; background: var(--fv-white);
    font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--fv-ink);
    word-break: auto-phrase;
  }
  #usecases .uc-m__askl {
    flex: none; margin-top: 2px; padding: 1px 8px; border-radius: 999px;
    background: #fbd9d9; color: var(--fv-red-deep);
    font-size: 12px; font-weight: 700; line-height: 1.7;
  }

  #usecases .uc-m__rows { margin: 8px 0 0; }
  #usecases .uc-m__row { padding: 14px 0; border-top: 1px solid #f1d6d6; }
  #usecases .uc-m__row:first-child { border-top: 0; }
  #usecases .uc-m__row dt {
    margin: 0; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; color: var(--fv-red-deep);
  }
  #usecases .uc-m__row dd {
    margin: 6px 0 0; font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--fv-ink);
  }

  /* 任せること：「／」区切りの1段落（折り返しは項目単位） */
  #usecases .uc-m__tasks { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
  #usecases .uc-m__tasks li { white-space: nowrap; }
  #usecases .uc-m__tasks li:not(:last-child)::after { content: "／"; color: var(--fv-muted); }

  /* 受け取れるもの：チップ */
  #usecases .uc-m__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
  #usecases .uc-m__chips li {
    padding: 5px 12px; border-radius: 999px; background: var(--fv-white);
    font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--fv-ink); white-space: nowrap;
  }

  /* 人が行うこと */
  #usecases .uc-m__row--human dd { display: flex; align-items: flex-start; gap: 8px; word-break: auto-phrase; }
  #usecases .uc-m__hi { width: 20px; height: 20px; flex: none; margin-top: 3px; fill: var(--fv-red); }

  /* 活用例リンク（タップ領域44px） */
  #usecases .uc-m__link {
    display: flex; align-items: center; gap: 6px; min-height: 48px;
    border-top: 1px solid #f1d6d6;
    font-size: 15px; font-weight: 700; color: var(--fv-red-deep); text-decoration: none;
  }
  #usecases .uc-m__link:focus-visible { outline: 3px solid var(--fv-blue); outline-offset: 2px; border-radius: 4px; }
}
/* ===== mobile-redesign 04 END ===== */

/* ===== mobile-redesign 05 START ===== */
/* 07 導入支援：スマホでは8ステップの横スワイプをやめ、「何を支援するか」を4領域で見せる。
   08（45日PoC）の工程と「手順が2回続く」印象を避けるため、07＝支援範囲／08＝進め方に役割を分ける。 */
@media (min-width: 721px) {
  #support .support-bot-m,
  #support .support-lead-m,
  #support .support-areas-m,
  #support .support-note-m { display: none; }
}

@media (max-width: 720px) {
  /* デスクトップ用の絵・8ステップ・長い説明文はスマホで出さない（4領域と重複するため） */
  #support .support-hero-art,
  #support .support-process,
  #support .support-copy { display: none; }

  #support .support-top { display: block; min-height: 0; }
  #support .support-head { position: relative; padding: 0; }
  #support .eyebrow { margin-bottom: 14px; }

  /* 見出し横の小さなGrok Bot（主役にしない） */
  #support .support-bot-m {
    position: absolute; top: -8px; right: 0;
    width: 52px; height: auto;
  }

  #support .support-lead-m {
    margin: 12px 0 0;
    font-size: 16px; line-height: 1.75;
    color: var(--fv-ink-2);
    word-break: auto-phrase;
  }

  /* 4領域：外枠パネルを置かず、罫線区切りの1層だけにする */
  #support .support-areas-m {
    margin: 20px 0 0; padding: 0; list-style: none;
    border-top: 1px solid var(--fv-line);
  }
  #support .support-area-m {
    --area: var(--fv-red);
    --area-on: var(--fv-white);
    --area-tint: color-mix(in srgb, var(--fv-red) 10%, var(--fv-white));
    display: grid; align-items: start; gap: 0 14px;
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 16px 0;
    border-bottom: 1px solid var(--fv-line);
  }
  #support .support-area-m--2 {
    --area: var(--fv-yellow);
    --area-on: var(--fv-ink);
    --area-tint: color-mix(in srgb, var(--fv-yellow) 22%, var(--fv-white));
  }
  #support .support-area-m--3 {
    --area: var(--fv-blue);
    --area-tint: color-mix(in srgb, var(--fv-blue) 11%, var(--fv-white));
  }
  #support .support-area-m--4 {
    --area: var(--fv-ink);
    --area-tint: color-mix(in srgb, var(--fv-ink) 8%, var(--fv-white));
  }

  #support .support-area-m__icon {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--area); color: var(--area-on);
  }
  #support .support-area-m__icon svg { width: 24px; height: 24px; }
  #support .support-area-m__no {
    font-family: var(--fv-font-en);
    font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .04em;
  }

  #support .support-area-m__body { min-width: 0; }
  #support .support-area-m__title {
    margin: 0;
    font-size: 17px; font-weight: 800; line-height: 1.45;
    color: var(--fv-ink);
    word-break: auto-phrase;
  }
  #support .support-area-m__desc {
    margin: 4px 0 0;
    font-size: 14px; line-height: 1.7;
    color: var(--fv-ink-2);
    word-break: auto-phrase;
  }
  #support .support-area-m__out {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 10px 0 0;
  }
  #support .support-area-m__label {
    margin-right: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: var(--fv-ink-3);
  }
  #support .support-area-m__chip {
    display: inline-flex; align-items: center;
    min-height: 26px; padding: 3px 10px; border-radius: 999px;
    background: var(--area-tint);
    font-size: 12.5px; font-weight: 700; line-height: 1.4;
    color: var(--fv-ink);
    white-space: nowrap;
  }

  #support .support-note-m {
    margin: 16px 0 0;
    font-size: 13px; line-height: 1.7;
    color: var(--fv-ink-3);
    word-break: auto-phrase;
  }
}
/* ===== mobile-redesign 05 END ===== */

/* ===== mobile-redesign 06 START ===== */
/* ============================================================
   05 向いている企業 ＋ 06 導入時の課題（スマホ再設計）
   05：5枚の大カード（横スワイプ）→ 自己診断チェックリスト（<details>で開く）
   06：大イラスト＋4課題カード＋CTAカード → 見出し＋4課題1行ずつ＋07へつなぐ一文
   モバイル専用要素（*-m / *__m）はデスクトップで出さない。
   ============================================================ */
@media (min-width: 721px) {
  #fit .fit-check-m,
  #problem .pb-h2__m,
  #problem .pb-list-m,
  #problem .pb-next-m { display: none; }
}

@media (max-width: 720px) {

  /* ---- 05：カードと、実績に読める手書き文言はスマホで出さない ---- */
  #fit .fit-cards,
  #fit .fit-cards + .m-swipe__bar,
  #fit .fit-hand-2,
  #fit .fb-more { display: none; }

  #fit .fit-check-m { margin-top: 28px; }
  #fit .fit-check-m__title {
    margin: 0;
    font-size: 20px; font-weight: 900; line-height: 1.45;
    color: var(--fv-ink);
    word-break: auto-phrase;
  }
  #fit .fit-check-m__list { display: grid; gap: 8px; margin-top: 14px; }
  #fit .fit-check-m__item {
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--fv-band);
  }
  #fit .fit-check-m__item[open] { border-color: var(--fv-line); background: var(--fv-white); }
  #fit .fit-check-m__item summary {
    display: grid; align-items: center; gap: 12px;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    min-height: 56px;
    padding: 12px 14px 12px 16px;
    list-style: none; cursor: pointer;
    font-size: 16px; font-weight: 700; line-height: 1.5;
    color: var(--fv-ink);
    word-break: auto-phrase;
    -webkit-tap-highlight-color: transparent;
  }
  #fit .fit-check-m__item summary::-webkit-details-marker { display: none; }
  #fit .fit-check-m__item summary::after {
    content: "";
    justify-self: center;
    width: 8px; height: 8px; margin-top: -4px;
    border-right: 2px solid var(--fv-ink-3);
    border-bottom: 2px solid var(--fv-ink-3);
    transform: rotate(45deg);
  }
  #fit .fit-check-m__item[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
  #fit .fit-check-m__item summary:focus-visible { outline: 2px solid var(--fv-blue); outline-offset: 2px; border-radius: 12px; }
  #fit .fit-check-m__ck {
    display: block;
    width: 24px; height: 24px; padding: 5px;
    border-radius: 50%;
    background: var(--fv-red); color: var(--fv-white);
  }
  #fit .fit-check-m__item ul {
    margin: 0; padding: 0 16px 14px 52px;
    list-style: none;
  }
  #fit .fit-check-m__item li {
    position: relative;
    font-size: 14px; line-height: 1.7;
    color: var(--fv-ink-2);
    word-break: auto-phrase;
  }
  #fit .fit-check-m__item li + li { margin-top: 4px; }
  #fit .fit-check-m__item li::before {
    content: "";
    position: absolute; left: -13px; top: 0.72em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--fv-muted);
  }

  /* ---- 05：業種の帯は外枠を外し、チップを折り返す（横スクロールをやめる） ---- */
  #fit .fit-bar {
    display: block;
    margin-top: 28px; padding: 20px 0 0;
    border-top: 1px solid var(--fv-line);
    border-radius: 0; background: none; box-shadow: none;
  }
  #fit .fb-label {
    width: auto; padding: 0;
    font-size: 15px; font-weight: 700; line-height: 1.6;
    text-align: left; white-space: normal;
    word-break: auto-phrase;
  }
  #fit .fb-label br { display: inline; }
  #fit .fb-inds {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 12px 0 0; padding: 0;
    overflow: visible;
  }
  #fit .fb-inds > li {
    flex: 0 0 auto; flex-direction: row; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--fv-band);
    font-size: 13px; line-height: 1.4;
  }
  #fit .fb-inds svg { width: 16px; height: 16px; }
  #fit .fit-btn { margin-top: 20px; }

  /* ---- 06：見出しをスマホ用に、課題の説明・イラスト・CTAカードは出さない ---- */
  #problem .pb-h2__d,
  #problem .pb-lead,
  #problem .pb-hero,
  #problem .pb-h3,
  #problem .pb-grid,
  #problem .pb-grid + .m-swipe__bar,
  #problem .pb-cta { display: none; }
  #problem .pb-top { display: block; }
  /* 「業務と権限の設計」を行の途中で割らない */
  #problem .pb-h2__m em { display: inline-block; }

  #problem .pb-list-m {
    margin: 20px 0 0; padding: 0;
    list-style: none;
    border-top: 1px solid var(--fv-line);
  }
  #problem .pb-list-m li {
    display: grid; align-items: center;
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 56px; padding: 12px 0;
    border-bottom: 1px solid var(--fv-line);
    font-size: 16px; font-weight: 700; line-height: 1.5;
    color: var(--fv-ink);
  }
  #problem .pb-list-m__no {
    font-family: var(--fv-font-en);
    font-size: 15px; font-weight: 800;
    color: var(--fv-red);
  }
  #problem .pb-next-m { margin: 20px 0 0; }
  #problem .pb-next-m a {
    display: block;
    padding: 10px 0;
    font-size: 16px; font-weight: 700; line-height: 1.7;
    color: var(--fv-red);
    text-decoration: none;
    word-break: auto-phrase;
  }
  #problem .pb-next-m .fv-arrow {
    display: inline-block;
    width: 18px; height: 11px; margin-left: 6px;
    fill: none; stroke: currentColor;
    vertical-align: -0.02em;
  }
}
/* ===== mobile-redesign 06 END ===== */

/* ===== mobile-redesign 07 START ===== */
/* 08 45日PoC：スマホは「45日間の進め方」を縦タイムラインで見せる。
   07（支援範囲）と役割を分けるため、主役は日程つきの4工程。
   指標は3観点に束ね、注記は警告ではなく落ち着いた補足にする。 */
#poc .n8-cap-m,
#poc .n8-tl-m,
#poc .n8-measure__m { display: none; }

@media (max-width: 720px) {
  #poc.sec-n8 { padding: 48px 0 56px; }
  #poc .n8-h2 { font-size: 28px; line-height: 1.36; }
  /* 「1部署・」で割れないよう、1行目の改行だけは残す（2行目は文節で折り返す） */
  #poc .n8-h2 br { display: inline; }
  #poc .n8-lead { margin-top: 14px; font-size: 15px; line-height: 1.8; }
  #poc .n8-grid { gap: 0; }

  /* ヒーロー：吹き出し・タグ・手書き文字を外し、絵だけを小さく1点 */
  #poc .n8-hero { margin: 20px 0 0; width: 100%; aspect-ratio: 1560 / 780; }
  #poc .n8-hero .n8-think,
  #poc .n8-hero .n8-task,
  #poc .n8-hero .n8-hand,
  #poc .n8-hand--top { display: none; }

  /* 4工程：横スワイプのカードをやめ、縦のタイムラインに */
  #poc .n8-steps { display: none; }
  #poc .n8-cap-m {
    display: block; margin: 32px 0 0;
    font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--fv-ink);
  }
  #poc .n8-cap-m small {
    display: block; margin-bottom: 4px;
    font-family: var(--fv-font-en); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--fv-muted);
  }
  #poc .n8-tl-m { display: grid; margin: 20px 0 0; padding: 0; list-style: none; }
  #poc .n8-tl-m > li {
    position: relative;
    display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px;
    padding-bottom: 24px;
  }
  #poc .n8-tl-m > li:last-child { padding-bottom: 0; }
  #poc .n8-tl-m > li:not(:last-child)::before {
    content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px;
    width: 2px; border-radius: 2px; background: var(--fv-line);
  }
  #poc .n8-tl-m__n {
    grid-column: 1; grid-row: 1 / span 3; align-self: start;
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
    background: var(--fv-red); color: var(--fv-white);
    font-family: var(--fv-font-en); font-size: 14px; font-weight: 800; line-height: 1;
  }
  #poc .n8-tl-m__day {
    grid-column: 2; display: block;
    font-family: var(--fv-font-en); font-size: 12px; font-weight: 700; letter-spacing: .06em;
    line-height: 18px; color: var(--fv-muted);
  }
  #poc .n8-tl-m h4 { grid-column: 2; margin: 2px 0 0; font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--fv-ink); }
  #poc .n8-tl-m p { grid-column: 2; margin: 4px 0 0; font-size: 15px; line-height: 1.7; color: var(--fv-ink-2); word-break: auto-phrase; }

  /* 7指標：アイコンの均等並びをやめ、3つの観点に束ねる（項目は削らない） */
  #poc .n8-measure { gap: 0; margin-top: 40px; padding: 20px 16px 6px; }
  #poc .n8-measure__head h3 br { display: none; }
  #poc .n8-measure__list { display: none; }
  #poc .n8-measure__m { display: block; margin: 14px 0 0; }
  #poc .n8-mm__row {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start;
    padding: 14px 0; border-top: 1px solid var(--fv-line);
  }
  #poc .n8-mm__row dt { font-size: 15px; font-weight: 800; line-height: 32px; color: var(--fv-ink); }
  #poc .n8-mm__row dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  #poc .n8-mm__row dd span {
    display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--fv-blue) 8%, var(--fv-white));
    font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--fv-ink-2);
  }

  /* ゴール：Botと吹き出しを外し、注記は左罫の補足に。外枠は付けない */
  #poc .n8-goal { display: block; margin-top: 24px; padding: 0; border: 0; border-radius: 0; background: none; }
  #poc .n8-goal__bot,
  #poc .n8-goal__arrow { display: none; }
  #poc .n8-goal__bubble {
    display: block; padding: 12px 14px;
    border-left: 3px solid var(--fv-ph-2); border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--fv-ph) 30%, var(--fv-white));
    font-size: 13.5px; line-height: 1.75; color: var(--fv-ink-3); word-break: auto-phrase;
  }
  #poc .n8-goal__bubble br,
  #poc .n8-goal__text br { display: none; }
  #poc .n8-goal__text { margin-top: 20px; font-size: 18px; line-height: 1.65; }
}
/* ===== mobile-redesign 07 END ===== */

/* ===== mobile-redesign 08 START ===== */
/* 09 権限・承認：3レベルの境界を主役にする
   ・全幅：3レベルの直前に「運用ルールの例」である旨の注記
   ・≤720px：盾と人物の絵は非表示（4つの管理機能は下の .s9-feats と重複するため）
             3レベルは横スワイプをやめて縦に1ブロックずつ。
             色だけに頼らず「自動／要承認／対象外」のラベル＋形の違うアイコンを付ける。
             Botの顔と吹き出しは外し、操作はタイルでなくチップの折り返しに。 */
.s9-level__tag-m { display: none; }
.s9-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fv-ink-3);
  word-break: auto-phrase;
}
.s9-note__i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--fv-muted); }
.s9-note + .s9-levels { margin-top: 12px; }

@media (max-width: 720px) {
  #security .s9-art { display: none; }

  #security .s9-note { margin-top: 20px; gap: 6px; font-size: 13px; line-height: 1.7; }
  #security .s9-note__i { width: 16px; height: 16px; margin-top: 2px; }

  #security .s9-levels {
    display: flex; flex-direction: column; gap: 12px;
    margin: 10px 0 0; padding: 0;
    overflow: visible; scroll-snap-type: none;
  }
  #security .s9-levels > div { width: auto; }
  #security .s9-levels + .m-swipe__bar { display: none; }

  #security .s9-level {
    padding: 16px 16px 18px;
    border-radius: 14px;
    box-shadow: inset 4px 0 0 var(--lv);
  }
  #security .s9-level__top { display: block; }
  #security .s9-level__bot { display: none; }
  #security .s9-level__txt {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  }
  #security .s9-level__tag-m {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0; padding: 4px 11px 4px 7px;
    border: 1.5px solid var(--lv); border-radius: 999px;
    background: var(--fv-white);
    font-size: 13px; font-weight: 800; line-height: 1.3;
    color: var(--fv-ink);
  }
  #security .s9-level__tag-m svg { width: 16px; height: 16px; color: var(--lv); }
  #security .s9-level__k { margin-left: auto; font-size: 11px; letter-spacing: 0.12em; }
  #security .s9-level__k b { font-size: 15px; margin-left: 2px; }
  #security .s9-level__title { flex-basis: 100%; margin-top: 6px; font-size: 19px; line-height: 1.4; }
  #security .s9-level__desc { margin-top: 4px; font-size: 14px; line-height: 1.7; }

  #security .s9-tiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  #security .s9-tiles li {
    display: inline-flex; padding: 5px 11px; gap: 0;
    border-radius: 999px; background: var(--fv-white);
  }
  #security .s9-tiles .ti { display: none; }
  #security .s9-tiles span { font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--fv-ink-2); }
}
/* ===== mobile-redesign 08 END ===== */

/* ===== mobile-redesign 99 common START ===== */
/* ============================================================
   99 全セクション共通のモバイル仕様（≤720px のみ）
   01〜08 の再設計を統合したあと、セクションごとにばらついていた
   余白・文字サイズ・タップ領域をここで1つの基準にそろえる。
     左右の余白      16px（外枠パネルの内側は 16px まで）
     セクション上下  56px（接続詞UI .sec-bridge に接する側は 28px）
     見出し h2       28〜30px（clamp）/ word-break: auto-phrase
     本文            16px / 1.75
     補足・注記      13px 以上（英字の小さなUIラベルは除く）
     タップ領域      44px 以上
   旧デザインの .section / .contact は style.css 側に指定があるため #id で書く。
   ============================================================ */
@media (max-width: 720px) {

  /* ---- 1. セクション上下 ---- */
  #about, #how, #usecases, #adoption, #fit, #problem,
  #support, #security, #flow, #download, #faq, #contact,
  #poc.sec-n8 { padding-top: 56px; padding-bottom: 56px; }
  /* 接続詞UI（では、どんな仕事を… など）の前後は詰めて、前後のセクションとひと続きに見せる */
  #how, #fit, #poc.sec-n8 { padding-bottom: 28px; }
  #usecases, #problem, #security { padding-top: 28px; }
  .sec-bridge { padding: 8px 0; }

  /* ---- 2. 左右の余白 16px ---- */
  #about > .fv-container, #how > .fv-container, #usecases > .fv-container,
  #adoption > .fv-container, #fit > .fv-container, #problem > .fv-container,
  #poc > .fv-container, #security > .fv-container, #download > .fv-container,
  #support > .container, #flow > .container, #faq > .container, #contact > .container,
  .sec-bridge > .fv-container,
  .site-footer > .container { padding-right: 16px; padding-left: 16px; }

  /* 横スワイプのブリードも 16px に合わせる（20px のままだと 4px ビューポートを越える） */
  #adoption .co-grid,
  #adoption .case-flow { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; scroll-padding-left: 16px; }

  /* 外枠パネルの内側余白を 16px に（パネル＋カードで余白を重ねない） */
  #faq .faq-grid { padding: 4px 16px 8px; border-radius: 16px; }
  #faq .faq-item summary { gap: 10px; }
  #faq .faq-body { padding-left: 20px; }
  #contact .form-card { padding: 24px 16px; border-radius: 16px; }
  #adoption .ad-depts { padding: 16px; }
  #download .dl-card { padding: 24px 16px; }
  #security .s9-foot { padding: 20px 16px; }

  /* ---- 3. セクション見出し ---- */
  :is(#about, #how, #usecases, #adoption, #fit, #problem, #support, #poc, #security, #flow, #download, #faq, #contact):is(.sec, .section, .contact) h2 {
    font-size: clamp(28px, 7.4vw, 30px);
    line-height: 1.36;
    word-break: auto-phrase;
  }

  /* ---- 4. 本文（リード文・説明文） ---- */
  #about .about-text, #how .how2-lead, #usecases .uc-lead, #adoption .ad-lead,
  #fit .fit-lead, #poc .n8-lead, #security .s9-lead, #flow .flow-head .lead,
  #support .support-lead-m, #faq .faq-body, #faq .faq-body p, #contact .lead,
  #download .dl-card__lead {
    font-size: 16px;
    line-height: 1.75;
    word-break: auto-phrase;
  }
  #how .hq-statement small { font-size: 16px; }

  /* ---- 5. 補足・注記・小さな和文ラベルは 13px 以上 ---- */
  #adoption .co-cat, #adoption .co-desc, #adoption .ad-companies .ad-h3 small,
  #adoption .dept-grid b,
  #support .support-area-m__chip, #support .support-area-m__label,
  #poc .n8-tl-m__day,
  #usecases .uc-m__askl,
  #faq .faq-item summary .q { font-size: 13px; }
  #contact .field label .req { font-size: 11px; }
  .site-footer .brand-text small { font-size: 11px; }

  /* ---- 6. タップ領域 44px ---- */
  .site-header .brand { min-height: 44px; }
  #nav a:not(.btn) { display: flex; align-items: center; min-height: 44px; }
  .site-footer .brand { min-height: 44px; }
  .site-footer .footer-nav { gap: 0 20px; }
  .site-footer .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  #download .dl-sub { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---- 6b. 文字を大きくしても枠から欠けない（固定高さ → 最小高さ） ---- */
  /* ヘッダー：ロゴの和文が伸びたら省略し、メニューボタンを画面外に押し出さない */
  .site-header .header-inner { min-width: 0; }
  .site-header .brand { flex: 0 1 auto; min-width: 0; }
  .site-header .brand-jp { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .site-header .nav-toggle { flex: none; }
  #usecases .uc-tabs > .uc-tab { height: auto; min-height: 44px; }
  #faq .eyebrow .num, #contact .eyebrow .num { height: auto; min-height: 22px; }
  #how .how2-kicker, #how .how2-kicker .badge { height: auto; min-height: 28px; }

  /* ---- 6c. 10 導入の流れ：工程名が「無料相／談」のように1文字だけ落ちない ---- */
  #flow .timeline > li { width: min(80vw, 320px); }
  #flow .tl-item .t { word-break: auto-phrase; }
  #flow .tl-item .ph { width: auto; padding-right: 10px; padding-left: 10px; }
  /* ボタン：文字を大きくしたときは両端で切らずに折り返す（通常サイズでは1行に収まる） */
  :is(main, .m-cta) .btn { white-space: normal; word-break: auto-phrase; }
  /* 09 下部のボタンはカードの内側にあり、375px で2行に落ちていたので左右の余白を詰める */
  #security .s9-foot__cta { padding-right: 12px; padding-left: 12px; gap: 8px; }
  /* 04 地球儀の吹き出しは cqw で 8px まで縮むので、イラスト内文字の下限 10px を守る */
  #adoption .ad-tag { font-size: max(10px, 2.3cqw); }
  /* 12 のBot 5体：幅と高さを固定しているため横長のBotが縦に伸びていた。形を保って収める */
  #contact .contact-team .bot { object-fit: contain; object-position: center bottom; }

  /* 06 末尾のつなぎ文：430px で矢印だけが次の行に落ちないように */
  #problem .pb-next-m a { text-wrap: pretty; }

  /* ---- 7. フォーム：iOS の自動ズームを避けるため入力欄は 16px ---- */
  #contact .field input, #contact .field select, #contact .field textarea { font-size: 16px; }
  #contact .choice label { font-size: 15px; }

  /* ---- 8. ページ内リンク：固定ヘッダーの下に隠れないように ---- */
  #contact-form { scroll-margin-top: calc(var(--header-h) + 16px); }

  /* ---- 9. メニュー展開中は背面をスクロールさせない（js/main.js 1 が付ける）
     body にも overflow:hidden を付けると body がスクロールコンテナになり、
     sticky のヘッダー（とその中の固定メニュー）がページ上端に取り残されるので html だけ ---- */
  html.is-nav-open { overflow: hidden; }
}
/* ===== mobile-redesign 99 common END ===== */

/* ===== features-6 START ===== */
/* 01 Grok Botとは：主な特徴を6つに（デスクトップは3列×2段、見出しは全カード2行でそろえる）、
   特徴の注記、「仕事を任せる、4つのしくみ」の表（スマホはカード）。
   07 導入支援：スマホで見出し＋本文の最初の1文を4領域リストの上に出す。 */

/* ---- 主な特徴 6枚 ---- */
#about .feat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}
#about .feat-card { padding: 24px 32px 28px; }
#about .feat-card h4 {
  margin-top: 14px;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.5;
  white-space: normal;
  word-break: auto-phrase;
}
#about .feat-card p {
  max-width: 28em;
  margin: 10px auto 0;
  line-height: 1.75;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 01 説明文：1400px前後で「す。」だけが次の行に落ちないように */
#about .about-text { word-break: auto-phrase; }

/* 注記 */
#about .feat-notes { margin: 20px 0 0; padding: 0; list-style: none; }
#about .feat-notes li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 13px;
  line-height: 1.75;
  color: var(--fv-ink-3);
  word-break: auto-phrase;
}

/* ---- 仕事を任せる、4つのしくみ ---- */
#about .mech { margin-top: 56px; }
#about .mech-m { display: none; }
#about .mech-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}
#about .mech-head h3 {
  margin: 0;
  font-size: clamp(1.4rem, 1.95vw, 2.05rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
#about .mech-lead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--fv-ink);
  word-break: auto-phrase;
}
#about .mech-lead .line { flex: none; width: 56px; height: 2px; background: var(--fv-red); }

#about .mech-table {
  width: 100%;
  margin-top: 22px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--fv-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--fv-white);
}
#about .mech-table thead th:nth-child(1) { width: 26%; }
#about .mech-table thead th:nth-child(2) { width: 38%; }
#about .mech-table th,
#about .mech-table td {
  padding: 16px 28px;
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.6;
  word-break: auto-phrase;
}
#about .mech-table thead th {
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fv-ink-3);
  background: color-mix(in srgb, var(--fv-ink) 5%, var(--fv-white));
}
#about .mech-table tbody th,
#about .mech-table tbody td { border-top: 1px solid var(--fv-line); }
#about .mech-table tbody td { font-weight: 500; color: var(--fv-ink-2); }
#about .mech-table tbody td + td { color: var(--fv-ink); }
#about .mech-name {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--fv-ink);
}
#about .mech-name img { flex: none; width: 40px; height: 40px; object-fit: contain; }
#about .mech-name small,
#about .mech-m h4 small { font-size: 13px; font-weight: 500; color: var(--fv-ink-3); }
#about .mech-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fv-ink-3);
}

@media (max-width: 1440px) {
  #about .feat-card { padding: 22px 22px 26px; }
}

@media (max-width: 1200px) {
  #about .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  #about .feat-card { padding: 20px 14px 24px; }
  #about .feat-card h4 { font-size: 16px; }
  #about .mech-table th,
  #about .mech-table td { padding: 14px 16px; font-size: 15px; }
  #about .mech-table thead th:nth-child(1) { width: 30%; }
  #about .mech-table thead th:nth-child(2) { width: 36%; }
  #about .mech-name { gap: 10px; font-size: 16px; }
  #about .mech-name > span { min-width: 0; }
  #about .mech-name small { display: block; }
  #about .mech-name img { width: 34px; height: 34px; }
}

@media (min-width: 721px) {
  #support .support-copy-m { display: none; }
}

@media (max-width: 720px) {
  /* 注記：縦リストの下に */
  #about .feat-notes { margin-top: 16px; }

  /* 4つのしくみ：表をやめて1枚＝しくみ名＋ひとこと＋例のカードに */
  #about .mech { margin-top: 40px; }
  #about .mech-head { display: block; }
  #about .mech-head h3 { font-size: 1.35rem; }
  #about .mech-lead { display: block; margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--fv-ink-2); }
  #about .mech-lead .line { display: none; }
  #about .mech-table { display: none; }
  #about .mech-m { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
  #about .mech-m li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--fv-line);
    border-radius: 14px;
    background: var(--fv-white);
  }
  #about .mech-m img { width: 40px; height: 40px; object-fit: contain; }
  #about .mech-m h4 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.45; color: var(--fv-ink); }
  #about .mech-m p {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--fv-ink-2);
    word-break: auto-phrase;
  }
  #about .mech-m .mech-m__ex {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--fv-line);
    font-weight: 700;
    color: var(--fv-ink);
  }
  #about .mech-m .mech-m__ex span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--fv-ink-3);
  }

  /* 07 導入支援：見出し1行＋本文の最初の1文を、4領域リストの上に */
  #support .support-copy-m { margin: 24px 0 0; }
  #support .support-copy-m__big {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--fv-ink);
    word-break: auto-phrase;
  }
  #support .support-copy-m__text {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--fv-ink-2);
    word-break: auto-phrase;
  }
}
/* ===== features-6 END ===== */

/* ===== support-lead-dedupe START ===== */
/* スマホの07で「4つの領域で支援します」のリードと、新しい見出し＋一文が
   同じ内容を続けて述べていたため、リードを外して見出しから始める */
@media (max-width: 720px) {
  #support .support-lead-m { display: none; }
  #support .support-copy-m { margin-top: 16px; }
}
/* ===== support-lead-dedupe END ===== */

/* ===== how-app-ui START ===== */
/* 02 仕事の進め方（#how）左カラム
   相関図＋2カードを「営業準備Bot」のアプリ画面イメージに置き換える。
   1201px以上は左を固定（sticky）し、右の7工程だけが流れる。
   固定中に画面から切れないよう、高さは 100svh 基準で決め、
   余った高さ／足りない高さは「作業中の画面」プレビューが吸収する。
   既存の .how2-stage 指定（!important 付き）に負けないよう #how で詳細度を上げる。 */
#how .how2-stage {
  --ha-g: 10px;
  --ha-indent: 35px;
  --ha-accent: #2f6cf0;
  --ha-line: #e6eaf0;
  display: flex !important;
  flex-direction: column;
  justify-items: normal;
  gap: 0;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--fv-white) !important;
  border: 1px solid #dfe5ee !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(27, 28, 32, .07), 0 2px 6px rgba(27, 28, 32, .04);
  font-family: var(--fv-font);
  color: var(--fv-ink);
  text-align: left;
}
#how .how2-stage p { margin: 0; }
#how .how2-stage svg { display: block; flex: none; }

/* --- ウィンドウ上部 --- */
#how .ha-bar {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  height: var(--ha-bar, 44px); padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--ha-line);
  background: #fbfcfd;
}
#how .ha-dots { display: flex; gap: 6px; }
#how .ha-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
#how .ha-dots i:nth-child(2) { background: #febc2e; }
#how .ha-dots i:nth-child(3) { background: #28c840; }
#how .ha-title {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--fv-ink);
}
#how .ha-title img { width: 22px; height: 22px; }
#how .ha-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 4px 11px;
  border-radius: 999px; background: #eaf1fe;
  font-size: 11.5px; font-weight: 700; color: var(--ha-accent);
}
#how .ha-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* --- 会話エリア --- */
#how .ha-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: var(--ha-g);
  padding: calc(var(--ha-g) + 4px) 16px var(--ha-g);
}
#how .ha-user {
  flex: none; align-self: flex-end; max-width: 82%;
  padding: 7px 14px;
  border-radius: 14px 14px 4px 14px;
  background: #edf1f6;
  font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--fv-ink);
}
#how .ha-bot { flex: none; display: flex; align-items: flex-start; gap: 9px; }
#how .ha-bot img { flex: none; width: 26px; height: 26px; margin-top: 2px; }
#how .ha-bot p {
  padding: 7px 13px;
  border: 1px solid #e8ecf2; border-radius: 4px 14px 14px 14px;
  background: var(--fv-band);
  font-size: 13px; line-height: 1.55; color: var(--fv-ink-2);
  word-break: auto-phrase;
}

/* --- 進捗リスト --- */
#how .ha-tasks {
  flex: none;
  margin: 0 0 0 var(--ha-indent); padding: 3px 12px;
  list-style: none;
  border: 1px solid var(--ha-line); border-radius: 12px;
  background: var(--fv-white);
}
#how .ha-tasks li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  height: var(--ha-row, 30px);
  border-top: 1px solid #f0f2f6;
  font-size: 12.5px; line-height: 1.3;
}
#how .ha-tasks li:first-child { border-top: 0; }
#how .ha-tasks .ic {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px; background: #eef3fc;
}
#how .ha-tasks .ic svg { width: 14px; height: 14px; }
#how .ha-tasks .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--fv-ink-2); }
#how .ha-tasks .st {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--fv-ink-3);
}
#how .ha-tasks .st svg { width: 14px; height: 14px; }
#how .ha-tasks .is-done .st svg { color: var(--ha-accent); }
#how .ha-tasks .is-run {
  margin: 0 -12px; padding: 0 12px;
  background: #f3f7ff;
  border-top-color: transparent;
}
#how .ha-tasks .is-run + li { border-top-color: transparent; }
#how .ha-tasks .is-run .ic { background: var(--fv-white); }
#how .ha-tasks .is-run .t { font-weight: 700; color: var(--fv-ink); }
#how .ha-tasks .is-run .st { color: var(--ha-accent); }
#how .ha-tasks .is-wait .ic { background: #f2f3f5; color: #9aa1ad; }
#how .ha-tasks .is-wait .t { color: var(--fv-muted); }
#how .ha-tasks .is-wait .st { color: var(--fv-muted); }
@media (prefers-reduced-motion: no-preference) {
  #how .ha-tasks .spin { animation: ha-spin 1.1s linear infinite; }
}
@keyframes ha-spin { to { transform: rotate(360deg); } }

/* --- ラベル --- */
#how .ha-label { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; color: var(--fv-ink-3); }

/* --- 作業中の画面（ミニプレビュー。高さの調整役） --- */
#how .ha-work {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  margin-left: var(--ha-indent);
}
#how .ha-preview {
  flex: 1 1 0; min-height: 48px;
  display: flex; flex-direction: column;
  width: 78%;
  overflow: hidden;
  border: 1px solid #e1e6ed; border-radius: 10px;
  background: var(--fv-white);
}
#how .ha-preview__bar {
  flex: none; display: flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 8px;
  border-bottom: 1px solid #e8ebf0; background: #f1f3f6;
}
#how .ha-preview__bar i { width: 5px; height: 5px; border-radius: 50%; background: #cdd2da; }
#how .ha-preview__bar b { width: 38%; height: 8px; margin-left: 8px; border-radius: 4px; background: var(--fv-white); }
#how .ha-preview__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 20% minmax(0, 1fr); }
#how .ha-preview .side {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 9px;
  border-right: 1px solid #eef0f3; background: #f8f9fb;
}
#how .ha-preview .side i { height: 5px; border-radius: 3px; background: #e0e4ea; }
#how .ha-preview .side i:nth-child(2) { width: 80%; }
#how .ha-preview .side i:nth-child(4) { width: 65%; }
#how .ha-preview .main {
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 12px;
}
#how .ha-preview .main > i { flex: none; width: 70%; height: 5px; border-radius: 3px; background: #e3e7ed; }
#how .ha-preview .main > i.h { width: 46%; height: 8px; background: #d3d9e1; }
#how .ha-preview .main > i.s { width: 48%; }
#how .ha-preview .slide {
  flex: 1 1 auto; min-height: 22px; max-height: 150px;
  display: grid; grid-template-columns: minmax(0, 1fr) 34%; gap: 10px; align-items: center;
  padding: 8px 10px;
  border: 1px solid #edf0f4; border-radius: 6px; background: #fafbfc;
  overflow: hidden;
}
#how .ha-preview .lines { display: flex; flex-direction: column; gap: 6px; }
#how .ha-preview .lines i { height: 5px; border-radius: 3px; background: #dfe3e9; }
#how .ha-preview .lines i:nth-child(2) { width: 84%; }
#how .ha-preview .lines i:nth-child(3) { width: 92%; }
#how .ha-preview .lines i.caret { position: relative; width: 52%; }
#how .ha-preview .lines i.caret::after {
  content: ""; position: absolute; top: -3px; right: -5px;
  width: 2px; height: 11px; border-radius: 1px; background: var(--ha-accent);
}
#how .ha-preview .chart { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 100%; max-height: 64px; }
#how .ha-preview .chart i { width: 22%; height: 45%; border-radius: 2px 2px 0 0; background: #d9dee6; }
#how .ha-preview .chart i:nth-child(2) { height: 70%; }
#how .ha-preview .chart i:nth-child(3) { height: 100%; background: #c9d0da; }

/* プレビューが低いときは、切れて見える中身を段階的に省く */
#how .ha-preview { container: ha-preview / size; }
#how .ha-preview .slide { align-items: start; }
@container ha-preview (max-height: 130px) {
  #how .ha-preview .main > i:not(.h) { display: none; }
}
@container ha-preview (max-height: 96px) {
  #how .ha-preview .slide { display: none; }
  #how .ha-preview .main > i:not(.h) { display: block; }
}

/* --- 成果物 --- */
#how .ha-files { flex: none; display: flex; flex-direction: column; gap: 6px; margin-left: var(--ha-indent); }
#how .ha-files ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
#how .ha-files li {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px 0 9px;
  border: 1px solid #dfe4eb; border-radius: 8px; background: var(--fv-white);
  font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--fv-ink-2);
}
#how .ha-files li svg { width: 15px; height: 15px; color: var(--ha-accent); }

/* --- 承認カード --- */
#how .ha-approve {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  margin-left: var(--ha-indent); padding: 9px 10px 9px 11px;
  border: 1px solid #f3cfd0; border-left: 3px solid var(--fv-red); border-radius: 10px;
  background: #fff7f7;
}
#how .ha-approve__ic { width: 20px; height: 20px; color: var(--fv-red); }
#how .ha-approve p { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
#how .ha-approve b { display: block; font-size: 12.5px; font-weight: 700; color: var(--fv-red-deep); }
#how .ha-approve small { display: block; font-size: 11px; color: var(--fv-ink-3); word-break: auto-phrase; }
#how .ha-btn {
  flex: none;
  padding: 7px 12px; border-radius: 8px;
  background: var(--fv-red);
  font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--fv-white);
}

/* --- 入力欄 --- */
#how .ha-foot { flex: none; padding: 8px 14px 7px; border-top: 1px solid var(--ha-line); background: var(--fv-white); }
#how .ha-input {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 4px 0 12px;
  border: 1px solid #dfe4eb; border-radius: 10px;
  font-size: 12.5px; color: var(--fv-muted);
}
#how .ha-send {
  display: grid; place-items: center;
  width: 28px; height: 28px; margin-left: auto;
  border-radius: 7px; background: var(--ha-accent); color: var(--fv-white);
}
#how .ha-send svg { width: 14px; height: 14px; }
#how .ha-note { margin-top: 4px !important; font-size: 11px; line-height: 1.4; color: var(--fv-muted); }

/* --- 1201px以上：左を画面に固定し、ビューポートの高さに収める --- */
@media (min-width: 1201px) {
  #how .how2-grid { align-items: start; }
  #how .how2-stage {
    position: sticky;
    top: calc(var(--header-h, 72px) + 24px);
    height: min(calc(100svh - var(--header-h, 72px) - 48px), 800px) !important;
    /* 低い画面ほど要素間の余白を詰める（720px前後で6px、900px以上で12px） */
    --ha-g: clamp(6px, calc((100svh - 540px) / 30), 12px);
    /* 同じく低い画面では上部バーと進捗リストの行を少し詰める（文字サイズは変えない） */
    --ha-bar: clamp(38px, calc((100svh - 390px) / 10.5), 44px);
    --ha-row: clamp(27px, calc((100svh - 450px) / 10), 30px);
  }
}

/* --- 1200px以下：固定しない通常配置 --- */
@media (max-width: 1200px) {
  #how .how2-stage {
    position: static;
    width: 100% !important;
    max-width: 616px;
    height: auto !important;
    margin: 0 auto;
    --ha-indent: 0px;
  }
  #how .ha-work { flex: none; }
  #how .ha-preview { flex: none; width: 100%; height: 150px; }
}
/* --- 720px以下：スマホは .how2-flow-m を出すので従来どおり非表示 --- */
@media (max-width: 720px) {
  #how .how2-stage { display: none !important; }
}
/* ===== how-app-ui END ===== */

/* ===== desktop-overlap-fix START ===== */
/* デスクトップで人物イラストに他の素材・文字が重なり「ダブって」見えていた箇所の補正。
   スマホ（≤720px）の見た目は変えない：追加した要素は素の宣言で非表示にし、
   表示・配置の変更はすべて min-width: 721px の中で行う。 */
.art-3 .fc3-task,
.pb-art-4 .pb-p4d { display: none; }

@media (min-width: 721px) {
  /* FV：青い三角Botが見出しの「。」とWeb調査カードにかかっていた → メールカードの左・緑Botの上へ */
  .fv .fv-mini-blue { left: 0; top: 40.6cqw; width: 7.6cqw; height: 7.6cqw; }

  /* 03 ユースケース：人物がGrok Bot（grokbot-desk.png）の顔・胴の前にめり込み、
     ノートPCが2台重なって見えていた。吹き出しもBotの頭に被っていた
     → 人物は左、Botは右に並べて重ねない。吹き出しは人物の上、ミニカードはBotの上と机の下へ */
  #usecases .uc-scene .person     { left: -2cqw; top: 24cqw; width: 50cqw; height: 52cqw; z-index: 2; }
  #usecases .uc-scene .grok-desk  { left: 45cqw; top: 28cqw; width: 54cqw; height: auto; z-index: 1; }
  #usecases .uc-scene .uc-bubble  { left: 1cqw; top: 3cqw; }
  #usecases .uc-scene .rays       { left: 47cqw; top: 36cqw; }
  #usecases .uc-scene .m1         { left: 66cqw; top: 2cqw; }
  #usecases .uc-scene .m2         { left: 60cqw; top: 19.5cqw; }
  #usecases .uc-scene .m3         { left: 60cqw; top: 68cqw; }

  /* 05 カード03：3人が団子状に重なり、カード01/02と同じ人物も並んでいた
     → 人物は woman.png の1人にし、周りに書類・メール・グラフ・表を並べる */
  #fit .art-3 .p-think,
  #fit .art-3 .p-man { display: none; }
  #fit .art-3 .p-woman { left: 25cqw; top: 18cqw; width: 50cqw; z-index: 3; }
  #fit .art-3 .fc3-task {
    display: grid;
    z-index: 2;
    border-radius: 1.6cqw;
    background: var(--fv-white);
    box-shadow: 0 3px 12px rgba(27, 28, 32, 0.10);
  }
  #fit .art-3 .fc3-doc { left: 3cqw; top: 12cqw; width: 18cqw; height: 23cqw; align-content: center; gap: 2.2cqw; padding: 0 3.4cqw; }
  #fit .art-3 .fc3-doc i { display: block; height: 1.5cqw; border-radius: 0.8cqw; background: #d5dae3; }
  #fit .art-3 .fc3-doc i:nth-child(2) { width: 78%; }
  #fit .art-3 .fc3-doc i:nth-child(4) { width: 60%; }
  #fit .art-3 .fc3-mail { left: 22cqw; top: 2cqw; width: 17cqw; height: 14cqw; place-items: center; }
  #fit .art-3 .fc3-mail svg { width: 64%; height: auto; }
  #fit .art-3 .fc3-chart { left: 78cqw; top: 6cqw; width: 19cqw; height: 20cqw; place-items: center; background: #e3edfd; box-shadow: none; }
  #fit .art-3 .fc3-chart svg { width: 74%; height: 74%; }
  #fit .art-3 .fc3-sheet { left: 77cqw; top: 32cqw; width: 20cqw; height: 17cqw; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; padding: 2.4cqw; }
  #fit .art-3 .fc3-sheet i { display: block; border-radius: 0.5cqw; background: #d6e6fb; }
  #fit .art-3 .fc3-sheet i:nth-child(-n+3) { background: #9dc2fa; }
  #fit .art-3 .s1 { left: 37cqw; top: 9cqw; }
  #fit .art-3 .s2 { left: 67cqw; top: 6cqw; }

  /* 06 カード01・03：吹き出しが人物の髪にかかっていた
     → カード01は人物を右へ・吹き出しを上へ、カード03は人物を左へ・吹き出しを右へ離す */
  #problem .pb-art-1 .pb-p1 { left: 20cqw; }
  #problem .pb-art-1 .pb-mini { top: 1cqw; }
  #problem .pb-art-3 .pb-p3 { left: 20cqw; }
  #problem .pb-art-3 .pb-dots { left: 42cqw; }
  #problem .pb-art-3 .pb-mini { left: 55cqw; top: 1cqw; }

  /* 06 カード04：大イラスト・カード03と同じ think.png が3回並び、吹き出しが髪に重なっていた
     → 別の人物（assets/pb/p4-woman.png）にし、吹き出しの下に頭が来るよう下げる */
  #problem .pb-art-4 .pb-p4 { display: none; }
  #problem .pb-art-4 .pb-p4d { display: block; left: 0; top: 31cqw; width: 52cqw; height: auto; z-index: 2; }
  #problem .pb-art-4 .pb-mini { top: -1cqw; }

  /* 07：手書きの赤い下線が女性の髪に食い込んでいた → 線を短くする */
  #support .support-hand-note::after { width: 46%; }
  /* 07：「一緒にはじめましょう」の吹き出しが女性の髪（頭の右上）にかかっていた
     → 吹き出しを上端へ上げ、女性とGrok Botを少し左へ */
  #support .support-speech { top: 4px; }
  #support .support-person { right: calc(14% + 36px); }
  #support .support-bot { right: calc(1% + 36px); }

  /* 08：タグと吹き出しが人物の頭・Botに、手書きの下線が「データ集計」に重なっていた
     → 吹き出しは左上、手書きは右上、タグは頭とBotの間の空き帯へ */
  #poc .n8-hero .n8-think   { left: 2.6%;  top: 0; padding: 1.4cqw 2cqw; font-size: 1.9cqw; }
  #poc .n8-hero .n8-hand    { left: 72.5%; right: auto; top: 0; }
  #poc .n8-hero .n8-task--a { left: 47%;   top: 3%; }
  #poc .n8-hero .n8-task--b { left: 47%;   top: 16.5%; }
  #poc .n8-hero .n8-task--d { left: 67%;   top: 18.5%; }
  #poc .n8-hero .n8-task--c { left: 48%;   top: 30%; }

  /* 09：手書き注記が人物の肩に重なっていた → 人物を少し左へ、注記を細く */
  #security .s9-art__person { left: 41.5%; }
  #security .s9-hand { width: 104px; font-size: 11.5px; }
}
@media (min-width: 721px) and (max-width: 1200px) {
  /* 08：1200px以下はヒーローが左へ12pxはみ出すため、吹き出しを内側へ入れて少し上げる */
  #poc .n8-hero .n8-think { left: 3.9%; top: -2%; }
}
/* ===== desktop-overlap-fix END ===== */