@charset "UTF-8";

/* ============================================
   Variables
============================================ */
:root {
  /* Figma準拠カラー */
  --color-primary: #3164FF;       /* CTAボタン青 */
  --color-primary-dot: #3A68E6;   /* ロゴの「.」 */
  --color-primary-text: #154CF3;  /* CTAボタン内テキスト青 */
  --color-primary-dark: #1E3FAF;
  --color-primary-darker: #142B7A;
  --color-accent: #FF5E00;        /* 「無料」橙 */
  --color-accent-soft: #FFE8D6;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F5F7FB;
  --color-bg-dark: #0B1639;       /* ダーク背景・テキスト */
  --color-text: #0B1639;          /* メイン文字色 */
  --color-text-logo: #353535;     /* ロゴ文字色 */
  --color-text-sub: #5A6478;
  --color-text-light: #FFFFFF;
  --color-border: #E3E3E3;        /* Figma準拠 */
  --color-yellow: #FFFF3A;        /* 吹き出し黄色 */

  --container: 1080px;
  --container-wide: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(16, 24, 64, 0.06);
  --shadow-md: 0 6px 24px rgba(16, 24, 64, 0.10);
  --shadow-lg: 0 12px 40px rgba(16, 24, 64, 0.14);

  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Inter", "Noto Sans JP", sans-serif;
}

/* ============================================
   Base
============================================ */
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding: 88px 0;
}
.section-dark {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}
.section-soft {
  background: var(--color-bg-soft);
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.section-lead {
  text-align: center;
  font-size: 16px;
  color: var(--color-text-sub);
  margin-bottom: 56px;
}
.section-dark .section-lead { color: rgba(255,255,255,.8); }

.text-accent { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }

/* ============================================
   Buttons
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-cta {
  background: #fff;
  color: var(--color-primary);
  padding: 18px 36px;
  box-shadow: var(--shadow-md);
  font-size: 17px;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-cta .badge {
  background: var(--color-yellow);
  color: #1A1A1A;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  margin-right: 8px;
}

/* ============================================
   Header (Figma準拠)
============================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  background: #fff;
  color: var(--color-text-logo);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
  display: flex;
  align-items: center;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 24px;
  gap: 16px;
}

/* ロゴ: Futura Bold 20px / "." だけ青 */
.site-header__logo {
  font-family: "Futura", "Inter", var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--color-text-logo);
  line-height: 1.5;
  white-space: nowrap;
}
.site-header__logo .dot { color: var(--color-primary-dot); }

/* PCナビ */
.site-header__nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.site-header__nav a {
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-bg-dark);
  line-height: 20px;
  transition: opacity .2s;
}
.site-header__nav a:hover { opacity: .7; }

/* PCヘッダーCTA: 青背景白文字 + 「無料」黄色 + カレンダーアイコン */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 35px;
  padding: 8px 16px 10px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity .2s;
}
.site-header__cta:hover { opacity: .9; }
.site-header__cta .icon {
  display: inline-flex;
  width: 24px; height: 24px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.site-header__cta .icon img { width: 24px; height: 24px; }
.site-header__cta .free { color: var(--color-yellow); }

.site-header .hamburger { display: none; }

main { padding-top: 56px; }

/* ============================================
   Hero (Figma: 146:2582 / 1440x590)
============================================ */
.hero {
  position: relative;
  background-color: #fff;
  overflow: hidden;
}
/* 背景画像: Figma 準拠で左/右レイヤー、サイズ固定 */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 12;
  width: 392px;
  height: 590px;
  background: url("../images/hero-bg-left.png") no-repeat left bottom / 392px 590px;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 908px;
  height: 589px;
  background: url("../images/hero-bg-right.png") no-repeat right top / 908px 589px;
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  max-width: 1440px;
  margin-inline: auto;
  padding: 75px 91px 74px;
  min-height: 606px;
  box-sizing: border-box;
  gap: 0;
}

/* テキストカラム (Figma準拠: width 590px 固定) */
.hero__copy {
  position: relative;
  z-index: 2;
  width: 590px;
  max-width: 100%;
}

/* sub_title (15:1087): Noto Sans CJK JP Bold 20px / #0B1639 / line-height 1.5 */
.hero__subtitle {
  display: inline-block;
  font-family: "Noto Sans CJK JP", var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-bg-dark);
  line-height: 1.5;
  padding: 6px 0 5px 6px;
  margin-bottom: 4px;
}

/* h1 (15:1091): Noto Sans JP ExtraBold 59px / line-height 1.3
   line1 (3:3) #0B1639 / line2 (3:4) #154CF3
   clamp で 360px→1440px の範囲を可変 (SP 30px ⇔ PC 59px) */
.hero__copy h1 {
  font-family: var(--font-jp);
  font-size: clamp(30px, 4.1vw, 59px);
  line-height: 1.3;
  font-weight: 800;
  color: var(--color-bg-dark);
  margin-bottom: 24px;
}
.hero__copy h1 .line1 { color: var(--color-bg-dark); display: block; white-space: nowrap; }
.hero__copy h1 .line2 { color: var(--color-primary-text); display: block; white-space: nowrap; }

/* lead (3:22): Noto Sans JP Medium 17px / #4C596E
   「2ヶ月」だけ Bold #3164FF */
.hero__lead {
  font-family: var(--font-jp);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
  color: #4C596E;
  margin: 24px 0 40px;
}
.hero__lead .em {
  font-weight: 700;
  color: var(--color-primary);
}

/* ヒーローCTA (btn_cta 194:5244): #3164FF / pt-15 pb-16 px-32 / gap 16 / rounded 999
   shadow 0 2px 6px rgba(0,0,0,.1) / 16px Bold white / 「無料」#FFFF3A */
.hero__cta { position: relative; display: inline-block; }
.hero__cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  padding: 15px 32px 16px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 27.2px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.hero__cta-btn .icon {
  display: inline-flex;
  width: 24px; height: 24px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero__cta-btn .icon img { width: 24px; height: 24px; fill: #fff; }
.hero__cta-btn .free { color: var(--color-yellow); }

/* lead 強調文 (19:1166): 40px chart icon + 月16px#0B1639 / 100〜300 38.4px#FF5E00 Outfit / 時間16px#FF5E00 / の業務削減を実現 16px#0B1639 */
.hero__highlight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--color-bg-dark);
}
.hero__highlight .icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero__highlight .icon img { width: 100%; height: 100%; }
.hero__highlight .text-set {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.hero__highlight .tx { font-size: 16px; line-height: 1.5; color: var(--color-bg-dark); }
.hero__highlight .tx-accent { font-size: 16px; line-height: 1.5; color: var(--color-accent); }
.hero__highlight .em {
  font-family: "Outfit", var(--font-en), var(--font-jp);
  font-size: 38.4px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-accent);
}

/* イラストカラム (Figma準拠: 698px 固定、テキストと30px overlap) */
.hero__visual {
  position: relative;
  flex: 0 0 698px;
  width: 698px;
  margin-left: -30px;  /* テキスト列とオーバーラップ */
  z-index: 1;
}
.hero__visual-illust {
  display: block;
  width: 698px;       /* 固定サイズ */
  height: auto;
}
/* 吹き出し: イラスト上端に absolute で重ねる (Figma: container内 left:190, top:0, width:380 固定) */
.hero__visual-popup {
  position: absolute;
  top: -10px;
  left: 169px;
  width: 420px;    /* 固定幅 */
  height: auto;
  z-index: 3;
}

/* ============================================
   Benefit (Figma: 146:2583)
   フル幅ダーク背景 + タブがヒーローに食い込む
============================================ */
.benefit {
  position: relative;
  background: linear-gradient(to right, #0d1c33 0%, #123e7a 100%);
  padding: 32px 24px 32px;
  margin-top: -24px;            /* ヒーローに少し食い込む */
  z-index: 1;
}
.benefit::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 230px;
    height: 85%;
  max-width: 16%;
  background: url("../images/benefit-decoration.png") no-repeat center right / contain;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

/* head タブ (194:3): ダーク背景より上に出てヒーローへ食い込む */
.benefit__tab {
  position: absolute;
  left: 50%;
  top: -17px;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, #0E1E37 0%, #113464 100%);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  padding: 8px 32px 0;
  border-radius: 12px 12px 0 0;
  white-space: nowrap;
  z-index: 2;
}
.benefit__tab .em {
  color: var(--color-yellow);
  margin: 0 4px;
}

.benefit__container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  z-index: 1;
}

.benefit__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  z-index: 1;
}

.benefit__item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.benefit__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.benefit__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #EFF6FF;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.benefit__icon img {
  width: 24px;
  height: 24px;
}
.benefit__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-bg-dark);
}

.benefit__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.benefit__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: var(--color-primary-text);
  font-weight: 700;
}
.benefit__value .num {
  font-family: "Outfit", var(--font-en), var(--font-jp);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
}
.benefit__value .pct {
  font-family: "Outfit", var(--font-en), var(--font-jp);
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
}
.benefit__value .unit {
  font-family: var(--font-jp);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.benefit__caption {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.5;
  color: #4C596E;
  text-align: center;
}

/* ============================================
   Problem (Figma: 38:46860) なぜAI導入は失敗するのか
============================================ */
.problem {
  position: relative;
  padding: 64px 24px 80px;
  background: linear-gradient(to bottom, #fff 0%, #fff 58%, #e5eeff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.problem__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
}
.problem__title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.4;
  color: var(--color-bg-dark);
  text-align: center;
}
/* SP 専用 改行: PC では非表示 */
.br-sp { display: none; }
.problem__title .em {
  color: var(--color-primary-text);
  margin: 0 8px;
}
.problem__arrow {
  width: 294px;
  height: 40px;
  display: block;
}

/* Highlight box: 最大の原因は... (Figma: 213:6452, w=772 centered) */
.problem__highlight {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 40px;
  background: #e6eeff;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 772px;
}
/* 装飾: 右上の曲線+ドット+ライン (KV と同様: PNG固定サイズ) */
.problem__highlight::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 234px;
  height: 119px;
  background: url("../images/problem-bg-right-top.png") no-repeat right top / 234px 119px;
  border-top-right-radius: 12px;
  pointer-events: none;
  z-index: 0;
}
/* 装飾: 左下の + パターン (PNG固定サイズ) */
.problem__highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 146px;
  height: 106px;
  background: url("../images/problem-bg-left-bottom.png") no-repeat left bottom / 146px 106px;
  pointer-events: none;
  z-index: 0;
}
.problem__highlight-img {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}
.problem__highlight-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 540px;
  max-width: 100%;
}
.problem__highlight-lead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.4;
}
.problem__highlight-lead .tx {
  font-size: 20px;
  color: var(--color-bg-dark);
}
.problem__highlight-lead .em {
  font-size: 28px;
  color: var(--color-accent);
}
.problem__highlight-note {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #4C596E;
}

/* 4 cards (Figma: 38:46875, 1200/4=282 each + 24 gap) */
.problem__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.problem__card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.problem__card-title { margin-top: 24px; }
.problem__card-text  { margin-top: 16px; }
.problem__card-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.problem__card-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #0b1639;
  text-align: center;
}
.problem__card-text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
  width: 100%;
}

/* 下のメッセージ */
.problem__conclusion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}
.problem__conclusion-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.problem__conclusion-text {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 24px;
  color: var(--color-bg-dark);
  line-height: 1.4;
}
.problem__conclusion-text .em {
  color: var(--color-primary-text);
}
.problem__conclusion-border {
  width: 573px;
  max-width: 100%;
  height: 2px;
  background: var(--color-bg-dark);
}

/* チェックマーク (青丸 + 白チェック) */
.check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-primary-text);
  border-radius: 50%;
  flex-shrink: 0;
}
.check-mark img {
  width: 13px;
  height: 11px;
  fill: #fff;
}

/* ダーク CTA バナー (38:46902 / 213:12845) */
.problem__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 40px;
  background: linear-gradient(to right, #0d1c33 0%, #143c70 100%);
  border-radius: 16px;
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
}
/* 装飾パターン画像 (ROI と同じ画像を再利用) */
.problem__cta::before {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -2px;
  width: 250px;
  height: 250px;
  background: url("../images/roi-pattern.png") no-repeat left top / 100% 100%;
  pointer-events: none;
  z-index: 0;
}
.problem__cta-inner,
.problem__cta-divider,
.problem__cta-list { position: relative; z-index: 1; }
.problem__cta-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
/* テキストグループ (見出し + 本文) */
.problem__cta-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 見出しグループ (subtitle + title) */
.problem__cta-hgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.problem__cta-subtitle {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: #a3a3a3;
}
.problem__cta-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  color: #fff;
}
.problem__cta-title .em {
  color: var(--color-yellow);
}
.problem__cta-note {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  max-width: 637px;
}

/* ダーク CTA 内のボタン (ヒーローCTAと共通スタイル) */
.problem__cta .hero__cta-btn { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }

.problem__cta-divider {
  width: 2px;
  height: 222px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.problem__cta-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.problem__cta-list .item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  line-height: 1.4;
}

/* ============================================
   Reason (Figma: 37:34835) 企業がDifyを導入する理由
============================================ */
.reason {
  padding: 80px 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.reason__inner {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.reason__title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.4;
  color: var(--color-bg-dark);
  text-align: center;
}
.reason__title .em {
  color: var(--color-primary-text);
}

/* ハイライト box (Figma: 37:34977 / 212:6303): Dify基盤の説明 + 4機能 */
.reason__highlight {
  position: relative;
  width: 100%;
  background-color: #E8EFFA;
  background-image: url("../images/reason-inner-bg-pc.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 16px;
  padding: 40px;
  overflow: hidden;
}

/* 上段: Dify画像 + テキスト 横並び */
.reason__highlight-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 18px;
}

.reason__dify-logo {
}
.reason__dify-logo img {
  width: 164px;
  height: 164px;
  object-fit: contain;
}

.reason__highlight-text {
  flex: 1;
  text-align: left;
}
.reason__highlight-text .sub {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  color: #4C596E;
  margin-bottom: 8px;
  line-height: 1.6;
}
.reason__highlight-text .lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-bg-dark);
}
.reason__highlight-text .lead .em {
  color: var(--color-primary-text);
}

/* コネクタ: 下向きダブル矢印 + テキスト (左寄せ) */
.reason__connector {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.reason__connector-icon {
  width: 15px;
  height: 18px;
  flex: 0 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reason__connector-icon img {
  width: 18px;
  height: 15px;
  transform: rotate(90deg);
  display: block;
}
.reason__connector-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-primary-text);
}

.reason__features {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.reason__feature {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: left;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reason__feature-icon {
  width: 48px;
  height: 48px;
  background: #eff6ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.reason__feature-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.reason__feature-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: #1e293b;
  line-height: 1.5;
}
.reason__feature-text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

/* 比較表 */
.reason__compare {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.reason__compare-head {
  text-align: center;
}
.reason__compare-head .title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 28px;
  color: var(--color-bg-dark);
  line-height: 1.4;
  margin-bottom: 12px;
}
.reason__compare-head .note {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  color: #4C596E;
}

/* 比較表 (div + CSS Grid ベース、Figma 37:35124 準拠) */
.reason__table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* ヘッダーとボディ行で同じグリッドを使い、列幅を完全一致させる */
.reason__table-header,
.reason__table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  width: 100%;
}
/* ヘッダーはラベル列の上を空け、2列目と3列目にだけ配置 */
.reason__table-th {
  padding: 12px 10px;
  border-radius: 12px 12px 0 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
.reason__table-th--chatgpt { background: #2563eb; grid-column: 2; }
.reason__table-th--dify    { background: var(--color-accent); grid-column: 3; }

/* ボディ */
.reason__table-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.reason__table-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.reason__table-cell--label {
  justify-content: flex-start;
  padding: 10px 24px;
  background: #f2f2f2;
  color: #0b1639;
  text-align: left;
}
.reason__table-cell--chatgpt {
  background: #eff6ff;
  color: #0b1639;
}
.reason__table-cell--dify {
  background: #ffebdf;
  color: #de5200;
}

/* 4隅の角丸 */
.reason__table-row:first-child .reason__table-cell--label  { border-top-left-radius: 12px; }
.reason__table-row:last-child  .reason__table-cell--label  { border-bottom-left-radius: 12px; }
.reason__table-row:last-child  .reason__table-cell--dify   { border-bottom-right-radius: 12px; }

/* マーク (X / ○) */
.reason__table-mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reason__table-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* このような企業様におすすめです (Figma: 49:48591) */
.reason__target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.reason__target-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  color: #0b1639;
  text-align: center;
  line-height: 1.4;
  width: 100%;
}
.reason__target-title .em {
  color: #2563eb;
}
.reason__target-grid {
  position: relative;
  width: 100%;
  background: #e6eeff;
  border-radius: 12px;
  padding: 32px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  overflow: hidden;
}
/* 装飾: 右上の曲線+ドット画像 */
.reason__target-grid::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 267px;
  height: 136px;
  background: url("../images/reason-target-bg-right.svg") no-repeat right top / contain;
  pointer-events: none;
  z-index: 0;
}
/* 装飾: 左下の曲線+ドット画像 */
.reason__target-grid::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 215px;
  height: 147px;
  background: url("../images/reason-target-bg-left.svg") no-repeat left bottom / contain;
  pointer-events: none;
  z-index: 0;
}
.reason__target-item {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.reason__target-item .check-mark {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: var(--color-primary-text);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reason__target-item .check-mark img {
  width: 12px;
  height: 9px;
  fill: #fff;
}
.reason__target-item-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reason__target-item-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  color: #0b1639;
  line-height: 1.5;
}
.reason__target-item-text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  color: #4c596e;
  line-height: 1.5;
}

/* ============================================
   Reason - SP (Figma: 244:380)
============================================ */
@media (max-width: 768px) {
  .reason {
    padding: 48px 12px 0;
    gap: 40px;
  }
  .reason__title {
    font-size: 24px;
  }
  .reason__inner {
    gap: 24px;
  }

  /* Container 1: Difyハイライト */
  .reason__highlight {
    padding: 24px 16px;
    border-radius: 12px;
    /* SP は背景画像を right-top / left / bottom-left の 3 レイヤーで配置
       (Figma node 244:384 のレイヤー構成に準拠) */
    background-image:
      url("../images/reason-inner-bg-sp-top.png"),
      url("../images/reason-inner-bg-sp-left.svg"),
      url("../images/reason-inner-bg-sp-bottom.png");
    background-position: right top, 0 120px, left bottom;
    background-size: 265px 144px, 29px 160px, 277px 158px;
    background-repeat: no-repeat;
  }
  .reason__highlight-head {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }
  .reason__dify-logo {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .reason__dify-logo img {
    width: 120px;
    height: 120px;
}

  .reason__highlight-text {
    text-align: center;
  }
  .reason__highlight-text .sub {
    text-align: left;
    font-size: 14px;
  }
  .reason__highlight-text .lead {
    font-size: 20px;
    line-height: 1.7;
    text-align: left;
  }
  .reason__connector {
    margin-bottom: 16px;
  }
  .reason__connector-text {
    font-size: 16px;
  }
  /* 4機能: 縦並び */
  .reason__features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .reason__feature {
    padding: 20px;
  }
  .reason__feature-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
  .reason__feature-icon img {
    width: 20px;
    height: 20px;
  }
  .reason__feature-title {
    font-size: 16px;
  }
  .reason__feature-text {
    font-size: 14px;
  }

  /* Container 2: 比較表 */
  .reason__compare-head .title {
    font-size: 28px;
  }
  .reason__compare-head .note {
    font-size: 14px;
    text-align: left;
  }
  .reason__table-th {
    padding: 10px 6px;
    font-size: 13px;
  }
  .reason__table-cell {
    padding: 10px 6px;
    font-size: 12px;
    gap: 6px;
  }
  .reason__table-cell--label {
    padding: 10px 8px;
  }
  .reason__table-mark {
    width: 18px;
    height: 18px;
  }

  /* Container 3: おすすめ企業 */
  .reason__target-title {
    font-size: 28px;
  }
  .reason__target-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 12px;
  }
  .reason__target-item {
    padding: 20px;
    gap: 8px;
  }
  .reason__target-item-title {
    font-size: 20px;
  }
  .reason__target-item-text {
    font-size: 14px;
  }
}

/* ============================================
   Plan / Pricing (Figma: 38:45490 / 234:707) サービスプラン
============================================ */
.plan {
  background: #fff;
  padding: 80px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.plan__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  width: 100%;
}
.plan__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: #0b1639;
}
.plan__title .line1,
.plan__title .line2 { display: block; }
.plan__title .line2 { color: var(--color-primary-text); }
.plan__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #4c596e;
}

/* リスト */
.plan__list {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* カード共通 */
.plan-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.plan-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  border-radius: 12px 12px 0 0;
}
.plan-card__name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #fff;
}
.plan-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: 0 0 12px 12px;
  flex: 1 1 auto;
}
.plan-card__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.plan-card__price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.plan-card__price-value {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-text);
}
.plan-card__price-value .from { font-family: var(--font-en); font-size: 20px; }
.plan-card__price-value .num { font-family: var(--font-en); font-size: 36px; }
.plan-card__price-value .unit { font-family: var(--font-jp); font-size: 16px; }
.plan-card__price-desc {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
}
.plan-card__divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}
.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-card__features li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #1e293b;
}

/* ボタン (border-only) */
.plan-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px 13px;
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: 38px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 27.2px;
  color: var(--color-primary);
  white-space: nowrap;
  width: 100%;
  margin-top: 16px;
}

/* LIGHT / PREMIUM (グレーヘッダー + 薄青本体) */
.plan-card--light .plan-card__head,
.plan-card--premium .plan-card__head {
  background: #4f6077;
}
.plan-card--light .plan-card__body,
.plan-card--premium .plan-card__body {
  background: #eef4ff;
}

/* STANDARD (オレンジ強調) */
.plan-card--standard {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.plan-card--standard .plan-card__head {
  background: var(--color-accent);
  padding: 13px 24px;
}
.plan-card--standard .plan-card__name {
  font-size: 30px;
  line-height: 1.5;
}
.plan-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px 3px;
  background: #fff;
  border-radius: 100px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.5;
  color: #0b1639;
}
.plan-card--standard .plan-card__body {
  background: #fff;
  border: 2px solid var(--color-accent);
  border-top: 0;
  gap: 40px;
}
.plan-card--standard .plan-card__price-value {
  color: var(--color-accent);
  gap: 1px;
}
.plan-card--standard .plan-card__price-value .from { font-size: 24px; }
.plan-card--standard .plan-card__price-value .num { font-size: 40px; }
.plan-card--standard .plan-card__price-value .unit { font-size: 20px; }

/* オレンジ check-mark バリアント */
.check-mark.check-mark--accent { background: var(--color-accent); }

/* STANDARD CTAボタン (青背景 + 黄色ポップアップ) */
.plan-card__btn-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 15px 32px 16px;
  background: var(--color-primary);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 27.2px;
  color: #fff;
  width: 100%;
  margin-top: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

/* ============================================
   Solutions (Figma: 38:35232 / 223:249) Difyで実現できる業務AI
============================================ */
.solutions {
  background: #fff;
  padding: 0 120px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.solutions__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.solutions__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}
.solutions__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.5;
  color: #0b1639;
}
.solutions__title .em { color: var(--color-primary-text); }
.solutions__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #4c596e;
}
.solutions__list {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.solution-card {
  flex: 1 0 0;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.solution-card__image {
  width: 100%;
  aspect-ratio: 936 / 588;
  overflow: hidden;
  border-radius: 8px;
}
.solution-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solution-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.solution-card__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #1e293b;
}
.solution-card__desc {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
}
.solution-card__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.solution-card__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  color: #1e293b;
}

/* check-mark の小サイズ (16px) */
.check-mark.check-mark--sm {
  width: 16px;
  height: 16px;
}
.check-mark.check-mark--sm img {
  width: 9px;
  height: 7px;
}

/* ============================================
   Voice / Cases (Figma: 38:35495 / 223:379) 導入企業のリアルな声
============================================ */
.voice {
  background: #eef4ff;
  padding: 80px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.voice__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  width: 100%;
}
.voice__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: #0b1639;
}
.voice__title .em { color: var(--color-primary-text); }
.voice__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #4c596e;
}
.voice__list {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.voice-card {
  flex: 1 0 0;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.voice-card__head {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.voice-card__avatar {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
}
.voice-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice-card__meta {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-card__name {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #1e293b;
}
.voice-card__profile {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
}
.voice-card__quote {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  position: relative;
}
.voice-card__quote::before {
  content: "";
  flex-shrink: 0;
  width: 2px;
  background: var(--color-primary-text);
}
.voice-card__quote p {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: #4c596e;
}
.voice-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px 6px;
  border: 1px solid var(--color-primary-text);
  border-radius: 100px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-primary-text);
  white-space: nowrap;
}

/* ============================================
   ROI (Figma: 38:35854 / 223:418) AI導入は投資回収型のDX
============================================ */
.roi {
  position: relative;
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: linear-gradient(to right, #0d1c33 0%, #143c70 100%);
  color: #fff;
  overflow: hidden;
}
.roi__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.roi__bg img {
  position: absolute;
  bottom: -20px;
  right: -10px;
  width: 350px;
  height: 350px;
  max-width: none;
  opacity: 1;
}
.roi__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding: 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.roi__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  width: 100%;
}
.roi__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: #fff;
}
.roi__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.roi__container {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
}

/* 1000px 以下: シミュレーションカード + リスト を縦並びに */
@media (max-width: 1000px) and (min-width: 769px) {
  .roi__container {
    flex-direction: column;
    gap: 32px;
  }
  .roi__sim {
    width: 100%;
    max-width: 459.5px;
    flex-shrink: 1;
  }
  .roi__list {
    width: 100%;
    max-width: 459.5px;
    flex: 0 1 auto;
  }
}

/* シミュレーションカード */
.roi__sim {
  width: 100%;
  max-width: 460px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.roi__sim-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  background: var(--color-primary);
  border-radius: 12px 12px 0 0;
}
.roi__sim-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #fff;
}
.roi__sim-icon img { width: 24px; height: 24px; }
.roi__sim-title {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
}
.roi__sim-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.roi__sim-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roi__sim-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  position: relative;
}
.roi__sim-list li .label { color: rgba(255, 255, 255, 0.7); }
.roi__sim-list li .value {
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
.roi__sim-list li + li { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.roi__sim-list li:last-child {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.roi__sim-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-radius: 8px;
  width: 100%;
}
.roi__sim-total-label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.24;
  color: #fff;
}
.roi__sim-total-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
  line-height: 1;
}
.roi__sim-total-value .yen {
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--color-yellow);
}
.roi__sim-total-value .num {
  font-family: var(--font-en);
  font-size: 36px;
  color: var(--color-yellow);
}
.roi__sim-total-value .unit {
  font-family: var(--font-jp);
  font-size: 16px;
  color: #fff;
}
.roi__sim-note {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  width: 100%;
}

/* 右リスト */
.roi__list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.roi__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.roi__item-head {
  display: flex;
  gap: 8px;
  align-items: center;
}
.roi__item-head h3 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}
.roi__list li > p {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* ROI 内 CTA ボタン (ヒーローCTAと共通スタイル) */
.roi .hero__cta-btn { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }

/* ============================================
   Flow (Figma: 38:36133 / 223:514) 導入までの流れ
============================================ */
.flow {
  background: #eef4ff;
  padding: 80px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.flow__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  width: 100%;
}
.flow__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: #0b1639;
}
.flow__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #4c596e;
}
.flow__list {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* ステップ間の青いライン */
.flow__list::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 126px;
  right: 126px;
  height: 2px;
  background: #c8dcff;
  z-index: 0;
}
.flow-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.flow-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.flow-step__card {
  width: 100%;
  flex: 1 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.flow-step__head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.flow-step__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eff6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.flow-step__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.flow-step__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: #0b1639;
  text-align: center;
}
.flow-step__text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
  width: 100%;
}

/* 下部バッジ「最短導入期間：2ヶ月〜」 */
.flow__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fff;
  border-radius: 10px;
  padding: 12px 32px;
}
/* icon + heading を 1 グループに */
.flow__badge-main {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.flow__badge-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eff6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.flow__badge-icon img { width: 24px; height: 24px; }
.flow__badge-heading {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-jp);
  text-align: center;
  white-space: nowrap;
}
.flow__badge-label {
  font-weight: 700;
  font-size: 20px;
  color: #0b1639;
}
.flow__badge-value {
  font-weight: 700;
  font-size: 28px;
  color: var(--color-accent);
}
.flow__badge-note {
  font-weight: 400;
  font-size: 11px;
  color: #4c596e;
  margin-left: 4px;
}

/* ============================================
   FAQ (Figma: 49:47716 / 234:1328) よくある質問
============================================ */
.faq {
  background: #eef4ff;
  padding: 80px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.faq__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  width: 100%;
}
.faq__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: #0b1639;
}
.faq__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #4c596e;
}
.faq__inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
}

/* 左サイドカード */
.faq__aside {
  position: relative;
  flex-shrink: 0;
  width: 400px;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.faq__aside-top {
  display: flex;
  gap: 24px;
  align-items: center;
}
.faq__aside-illust {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}
.faq__aside-illust img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.faq__aside-heading {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #0b1639;
}
.faq__aside-text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
}
.faq__aside-card {
  background: #e6eeff;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq__aside-card-head {
  display: flex;
  gap: 16px;
  align-items: center;
}
.faq__aside-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.faq__aside-card-icon img {
  width: 13px;
  height: 22px;
}
.faq__aside-card-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: #0b1639;
}
.faq__aside-card-text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
}

/* CTAボタン部 (上にポップアップ) */
/* 吹き出し: カード上端(イラスト付近)に配置 */
.faq__aside-popup {
  position: absolute;
  top: -20px;
  left: 94px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--color-primary);
  border-radius: 40px;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.faq__aside-popup::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 90%;
  width: 15.5px;
  height: 14.5px;
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.faq__aside-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px 16px;
  background: var(--color-primary);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 27.2px;
  color: #fff;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 右FAQリスト */
.faq__list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-item {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.faq-item__q {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.faq-item__q-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: 4px;
}
.faq-item__q-mark img {
  width: 20px;
  height: 20px;
}
.faq-item__q-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: #0b1639;
}
.faq-item__divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}
.faq-item__a {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
}

/* ============================================
   Company (Figma: 49:48217 / 234:1478) 運営会社情報
============================================ */
.company {
  padding: 80px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: #fff;
}
.company__heading {
  width: 100%;
}
.company__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: #0b1639;
  text-align: center;
}
.company__inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
}

/* 左: 代表者プロフィール */
.company__profile {
  flex-shrink: 0;
  width: 400px;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.company__profile-avatar {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  overflow: hidden;
}
.company__profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.company__profile-name {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.5;
  color: #0b1639;
}
.company__profile-role {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
}
.company__profile-text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
  width: 100%;
}

/* 右: stats + logos */
.company__right {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* 実績数値 */
.company__stats {
  background: #e6eeff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.company__stats-row {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
}
.company__stat {
  flex: 1 0 0;
  min-width: 0;
  min-height: 96px;
  padding: 24px 16px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.company__stat-head {
  display: flex;
  gap: 16px;
  align-items: center;
}
.company__stat-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eff6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.company__stat-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.company__stat-label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: #0b1639;
}
.company__stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-primary-text);
  white-space: nowrap;
}
.company__stat-value .num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
}
.company__stat-value .unit {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}

/* 過去支援実績ロゴ */
.company__logos {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.company__logos-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: #0b1639;
}
.company__logos-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}
.company__logos-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.company__logos-grid li {
  width: 100%;
  height: auto;
  aspect-ratio: 160 / 80;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.company__logos-grid li img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
}

/* ============================================
   Company - 1200px 以下の中間ブレークポイント (PC レイアウト崩れ防止)
============================================ */
@media (max-width: 1200px) and (min-width: 769px) {
  .company__inner {
    flex-direction: column;
    gap: 32px;
  }
  .company__profile {
    width: 100%;
    flex-shrink: 1;
  }
  .company__right {
    width: 100%;
  }
  /* stats 行: そのまま 2列キープ (横幅広いので2列でOK) */
  .company__logos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   CTA Pattern B (Figma: 49:48444 / 234:1565) AIで成果が出るか、60分で明確に
============================================ */
.cta-b {
  position: relative;
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: linear-gradient(to right, #0d1c33 0%, #143c70 100%);
  color: #fff;
  overflow: hidden;
}
.cta-b__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cta-b__bg img {
  position: absolute;
  bottom: -20px;
  right: -10px;
  width: 350px;
  height: 350px;
  max-width: none;
}
.cta-b__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.cta-b__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  width: 100%;
}
.cta-b__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: #fff;
}
.cta-b__title .em { color: var(--color-yellow); }
.cta-b__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

/* 4カードリスト */
.cta-b__list {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 1000px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cta-b__card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.cta-b__card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eff6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cta-b__card-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.cta-b__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.cta-b__card-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}
.cta-b__card-text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* セクション内 CTAボタン (ヒーローCTAと共通) */
.cta-b .hero__cta-btn {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Assessment (Figma: 49:48491 / 234:1611) あなたの会社はAI導入に向いていますか?
============================================ */
.assess {
  position: relative;
  isolation: isolate;          /* 子の負 z-index を内包する stacking context */
  background: #3561e8;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
/* 装飾葉っぱ: .assess__main::before に統合 (PNG 1枚で配置) */
/* ロボット + 「1分で簡単診断♪」吹き出し (右上) */
.assess__robot {
  position: absolute;
  top: 49px;
  right: 56px;
  width: 192px;
  height: 179px;
  z-index: 1;
}
.assess__robot img {
  position: absolute;
  width: 192px;
  height: 179px;
  object-fit: contain;
  right: 0;
  top: 0;
}
.assess__robot-popup {
  position: absolute;
  top: 0;
  left: -70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: #fff;
  border-radius: 40px;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-primary-text);
  white-space: nowrap;
  z-index: 2;
}
.assess__robot-popup::after {
  content: "";
  position: absolute;
  right: 21px;
  top: 95%;
  width: 16px;
  height: 14px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* タイトル */
.assess__title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  max-width: 806px;
  position: relative;
  z-index: 1;
}

/* メインコンテナ (中央吹き出し + チェックリスト + CTA) */
.assess__main {
  position: relative;
  margin-top: 145px;
  background: #e6eeff;
  border-radius: 12px;
  padding: 64px 32px 48px;
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
/* 装飾葉 (1枚PNG): assess__main の左上から少しはみ出して配置 */
.assess__main::after {
  content: "";
  position: absolute;
  top: -130px;
  left: -114px;
  width: 177px;
  height: 284px;
  background: url("../images/assess-leaves.png") no-repeat left top / 177px 284px;
  pointer-events: none;
  z-index: -2;
}

/* 中央吹き出し: チェックリストに 3つ 以上... */
.assess__highlight {
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1f48c5;
  /* 背景の虫眼鏡アイコン (PC: left:26px / bottom:0 / 150x122) */
  background-image: url("../images/assess-popup-bg.svg");
  background-repeat: no-repeat;
  background-position: 26px bottom;
  background-size: 150px 122px;
  border-radius: 12px;
  padding: 8px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.assess__highlight::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  width: 44px;
  height: 22px;
  background: #1f48c5;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.assess__highlight-lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
.assess__highlight-lead .num {
  color: var(--color-yellow);
  font-size: 46px;
  font-family: var(--font-en);
}
.assess__highlight-lead .unit {
  color: var(--color-yellow);
}
.assess__highlight-sub {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

/* チェックリスト */
.assess__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  width: 100%;
}
.assess-item {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.assess-item::after {
  content: attr(data-num);
  position: absolute;
  top: 8px;
  right: 24px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.05);
}
.assess-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.assess-item__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: #0b1639;
}
.assess-item__text {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
}

/* 下部 CTA ボックス */
.assess__cta {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.assess__cta-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.assess__cta-lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-primary-text);
  text-align: center;
  white-space: nowrap;
}
.assess__cta-sub {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #4c596e;
  text-align: center;
}
.assess__cta .hero__cta-btn { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }

/* ============================================
   CTA Pattern C (Figma: 49:48574 / 234:1937) AIの力で、あなたの業務をもっとシンプルに
============================================ */
.cta-c {
  position: relative;
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: linear-gradient(to right, #0d1c33 0%, #143c70 100%);
  color: #fff;
  overflow: hidden;
}
.cta-c__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cta-c__bg img {
  position: absolute;
  bottom: -20px;
  right: -10px;
  width: 350px;
  height: 350px;
  max-width: none;
}
.cta-c__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
}
.cta-c__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
.cta-c__lead {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* 限定5社ハイライトボックス */
.cta-c__limit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-yellow);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.cta-c__limit-label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}
.cta-c__limit-label .em { color: var(--color-yellow); }
.cta-c__limit-divider {
  display: block;
  width: 1px;
  align-self: stretch;
  background: #fff;
}
.cta-c__limit-note {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #e8f0ff;
  white-space: nowrap;
}

/* CTAボタン (バルーンなし、ヒーローCTAと共通スタイル) */
.cta-c__btn {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Footer (Figma: 49:48587 / 234:1958)
============================================ */
.site-footer {
  background: #fff;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer__logo {
  font-family: "Futura", var(--font-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--color-text-logo);
  white-space: nowrap;
}
.site-footer__logo .dot { color: var(--color-primary); }
.site-footer__copy {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.site-footer__copy .text { color: #3d5478; }
.site-footer__copy .url { color: #3b82f6; }

/* ============================================
   SP Menu Overlay (Figma準拠)
============================================ */
.sp-menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-primary);
  color: #fff;
  z-index: 200;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}
.sp-menu-overlay.is-open { visibility: visible; opacity: 1; }

/* メニュー上部ヘッダー: 56px / px-12 / 青背景 */
.sp-menu-overlay__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  padding: 8px 12px;
  flex-shrink: 0;
}
.sp-menu-overlay__logo {
  font-family: "Futura", "Inter", var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.sp-menu-overlay__close {
  width: 40px; height: 40px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sp-menu-overlay__close img {
  width: 16px; height: 16px;
}

/* ナビ: gap 40px / 18px bold white / 中央 */
.sp-menu-overlay__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 24px 10px;
}
.sp-menu-overlay__nav a {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  line-height: 20px;
  text-align: center;
}

/* CTA部 */
.sp-menu-overlay__cta {
  padding: 32px 24px;
  flex-shrink: 0;
  position: relative;
}
.sp-menu-overlay__cta .cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  background: #fff;
  border-radius: 999px;
  padding: 15px 32px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary-text);
  line-height: 27.2px;
}
.sp-menu-overlay__cta .cta-btn .free { color: var(--color-accent); }
.sp-menu-overlay__cta .cta-btn .icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-menu-overlay__cta .cta-btn .icon img {
  width: 18px; height: 20px;
  fill: var(--color-primary-text);
}

/* 吹き出し: 上に黄色のラベル + 下向き三角 */
.cta-balloon {
  position: absolute;
  left: 50%;
  top: -17px;
  transform: translateX(-50%);
  background: var(--color-yellow);
  color: var(--color-bg-dark);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  padding: 3px 16px;
  border-radius: 40px;
  white-space: nowrap;
  height: 24px;
  display: inline-flex;
  align-items: center;
}
.cta-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--color-yellow);
}

/* ============================================
   Responsive (≤ 768px)
============================================ */
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section-title { font-size: 24px; }
  .container, .container-wide { padding-inline: 20px; }

  /* SPヘッダー: 白背景 / px-12 py-8 / ロゴ16px / 青丸ハンバーガー */
  .site-header__inner { padding: 8px 12px; }
  .site-header__logo { font-size: 16px; }
  .site-header__nav,
  .site-header__cta { display: none; }

  .site-header .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--color-primary);
    border-radius: 50%;
    padding: 0;
  }
  .site-header .hamburger__lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 16px;
  }
  .site-header .hamburger__lines span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 3px;
  }

  main { padding-top: 56px; }

  /* Hero SP (Figma: 213:11740) */
  /* PC用 ::before/::after bgレイヤーを SP では無効化 */
  .hero::before,
  .hero::after { display: none; }
  /* SP は背景を3分割 (top-left + top-right + bottom) */
  .hero {
    min-height: auto;
    background-color: #fff;
    background-image:
      url("../images/hero-bg-sp-top-left.png"),
      url("../images/hero-bg-sp-top.png"),
      url("../images/hero-bg-sp-bottom.png");
    background-position:
      left top,
      right top,
      left bottom;
    background-size:
      27px 45px,
      227px 121px,
      360px 235px;
    background-repeat: no-repeat;
  }
  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 48px 12px 64px;
    text-align: left;
    min-height: auto;
  }
  /* テキスト列: コンテンツに応じた高さ */
  .hero__copy {
    flex: 0 0 auto;       /* PC の flex:0 0 590px を打ち消す */
    width: 100%;
    height: auto;
    text-align: left;
  }
  .hero__subtitle { font-size: 16px; margin-bottom: 8px; padding: 0; }
  /* SP: clamp で 360px→444px の範囲を可変 (min 33px / max 40px) */
  .hero__copy h1 { font-size: clamp(33px, 9vw, 40px); line-height: 1.5; margin-bottom: 16px; }
  .hero__copy h1 .line1,
  .hero__copy h1 .line2 { white-space: normal; }
  .hero__lead { font-size: 14px; margin: 0 0 40px; }
  .hero__cta { display: block; width: 100%; text-align: center;}
  .hero__cta-btn {
    justify-content: center;
    padding: 14px 24px;
    font-size: 16px;
    width: 296px;
  }
  /* CTAボタンの下 (highlight) のマージン: 24px */
  .hero__highlight {
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    margin-top: 24px;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
  }
  /* チャートアイコンを 40px → 24px に縮小 */
  .hero__highlight .icon {
    width: 24px;
    height: 24px;
  }
  .hero__highlight .tx,
  .hero__highlight .tx-accent { font-size: 16px; }
  .hero__highlight .em { font-size: 26px; }
  /* イラスト + 吹き出し: テキストの下に縦並び、吹き出しはイラスト上端に重なる */
  .hero__visual {
    position: relative;
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-top: 48px;       /* 吹き出し (top:-30) のために余白確保 */
  }
  .hero__visual-illust {
    width: 100%;
    height: auto;
  }
  /* 吹き出し: イラスト上端より -30 上、左右中央 */
  .hero__visual-popup {
    position: absolute;
    top: -39px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 328px;
    height: auto;
    z-index: 3;
  }

  /* Problem SP */
  .br-sp { display: inline; }
  .problem { padding: 64px 12px 48px; gap: 40px; }
  .problem__title { font-size: 28px; }
  .problem__arrow { width: 200px; height: auto; }
  .problem__highlight {
    flex-direction: column;
    padding: 24px 16px;
    gap: 12px;
    text-align: center;
  }
  .problem__highlight-img { width: 100px; height: 100px; }
  .problem__highlight-lead { justify-content: center; flex-direction: column; gap: 4px; }
  .problem__highlight-lead .tx { font-size: 18px; }
  .problem__highlight-lead .em { font-size: 26px; }
  .problem__highlight-note { font-size: 16px; text-align: left; }
  /* SP: cards 1 column */
  .problem__cards { grid-template-columns: 1fr; gap: 16px; }
  .problem__card { padding: 24px; }
  .problem__card-title { font-size: 16px; }
  .problem__card-text { font-size: 14px; }
  /* SP conclusion: 縦並び (check 上 + テキスト下), border なし, 見出しはマージン分離なし */
  .problem__conclusion {
    width: 100%;
    align-items: center;
    gap: 0;
    padding-top: 12px;
  }
  .problem__conclusion-line {
    flex-direction: column;
    gap: 12px;
    width: 337px;
    max-width: 100%;
  }
  .problem__conclusion-text {
    font-size: 20px;
    text-align: center;
    word-break: break-word;
  }
  .problem__conclusion-border {
    display: none;
  }

  .problem__cta-inner .hero__cta-btn {
    width: 100%;
  }

  .problem__cta {
    flex-direction: column;
    align-items: stretch;
    padding: 32px 24px;
    gap: 24px;
  }
  /* SP: 装飾パターンを 150x150 に縮小 */
  .problem__cta::before {
    width: 150px;
    height: 150px;
  }
  /* SP: テキストグループ内 見出し ↔ 本文 のマージン 16px */
  .problem__cta-text {
    gap: 16px;
  }
  .problem__cta-divider { width: 100%; height: 2px; }
  .problem__cta-title { font-size: 28px; }
  .problem__cta-note { font-size: 16px; }
  .problem__cta-list { gap: 16px; }
  .problem__cta-list .item { font-size: 16px; }

  /* Benefit SP (Figma: 213:12626) 2列×2行、icon上 / title下(左寄せ) */
  .benefit { padding: 0 0 0; margin-top: 0; }
  .benefit__container {
    padding: 32px 12px;
    margin-top: 0;
  }
  .benefit__tab {
    top: -16px;
    font-size: 14px;
    padding: 12px 12px 0;
    white-space: nowrap;
    text-align: center;
    max-width: none;
  }
  .benefit__tab .em {
    white-space: nowrap;
    margin: 0 2px;
  }
  .benefit__list {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .benefit__item {
    padding: 16px 12px;
    gap: 8px;
  }
  /* head: icon を上、title を下、左寄せ */
  .benefit__head {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    width: 100%;
  }
  .benefit__title { font-size: 14px; }
  /* SP は HTML 内の <br> を解除して自然折り返しに */
  .benefit__title br { display: none; }
  .benefit__value .num { font-size: 32px; }
  .benefit__value .pct { font-size: 24px; }
  .benefit__value .unit { font-size: 20px; }
  .benefit__caption { font-size: 11px; text-align: left; }

  /* Solutions SP (Figma: 223:249) Difyで実現できる業務AI */
  .solutions {
    padding: 64px 12px;
    gap: 32px;
  }
  .solutions__container {
    gap: 32px;
  }
  .solutions__heading {
    gap: 16px;
  }
  .solutions__title { font-size: 28px; }
  .solutions__lead { font-size: 16px; }
  .solutions__list {
    flex-direction: column;
    gap: 24px;
  }
  .solution-card {
    flex: none;
    width: 100%;
  }

  /* Voice / Cases SP (Figma: 223:379) 導入企業のリアルな声 */
  .voice {
    padding: 64px 12px;
    gap: 32px;
  }
  .voice__heading {
    gap: 16px;
  }
  .voice__title { font-size: 28px; }
  .voice__lead { font-size: 16px; }
  .voice__list {
    flex-direction: column;
    gap: 16px;
  }
  .voice-card {
    flex: none;
    width: 100%;
  }

  /* Flow SP (Figma: 223:514) 導入までの流れ */
  .flow {
    padding: 64px 12px;
    gap: 32px;
  }
  .flow__heading {
    gap: 16px;
  }
  .flow__title { font-size: 28px; }
  .flow__lead { font-size: 16px; }
  /* リスト: 横並び → 縦並び (各itemはアイテム単位で row 並び) */
  .flow__list {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  /* 横ラインを削除し、左に縦ラインを描く */
  .flow__list::before {
    top: 20px;
    bottom: 20px;
    left: 19px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .flow-step {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  .flow-step__num {
    flex-shrink: 0;
  }
  .flow-step__card {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px;
    gap: 16px;
  }
  .flow-step__head {
    gap: 16px;
    justify-content: flex-start;
  }
  .flow-step__title { text-align: left; }
  /* 下部バッジ: 1行目 icon+heading グループ / 2行目 note */
  .flow__badge {
    flex-direction: column;
    align-items: left;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
  }
  .flow__badge-main {
    gap: 16px;
  }
  .flow__badge-label { font-size: 18px; }
  .flow__badge-value { font-size: 24px; }
  .flow__badge-note {
    margin-left: 0;
    font-size: 11px;
    text-align: center;
  }

  /* Company SP (Figma: 234:1478) 運営会社情報 */
  .company {
    padding: 64px 12px;
    gap: 32px;
  }
  .company__title { font-size: 28px; }
  /* 2カラム → 縦並び */
  .company__inner {
    flex-direction: column;
    gap: 32px;
  }
  /* 左プロフィール: 400固定 → 全幅 */
  .company__profile {
    width: 100%;
    flex-shrink: 1;
  }
  /* 右コンテナ: stats + logos */
  .company__right {
    gap: 32px;
    width: 100%;
  }
  /* stats: padding 24 → 16、各行は縦並び (1カード/行) */
  .company__stats {
    padding: 16px;
    gap: 16px;
  }
  .company__stats-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  /* stat card: 固定96 → h auto、padding 縮小、幅は100% */
  .company__stat {
    flex: none;
    width: 100%;
    height: auto;
    padding: 12px 16px;
  }
  .company__stat-head {
    gap: 8px;
  }
  .company__stat-label {
    font-size: 14px;
  }
  .company__stat-value .num { font-size: 20px; }
  .company__stat-value .unit { font-size: 14px; }
  /* logos: padding 縮小 + 2カラム */
  .company__logos {
    padding: 16px;
  }
  .company__logos-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .company__logos-grid li {
    width: 100%;
    height: auto;
    aspect-ratio: 160 / 80;
  }

  /* FAQ SP (Figma: 234:1328) よくある質問 */
  .faq {
    padding: 64px 12px;
    gap: 40px;
  }
  .faq__heading {
    gap: 16px;
  }
  .faq__title { font-size: 28px; }
  .faq__lead { font-size: 16px; }
  /* 2カラム → 縦並び */
  .faq__inner {
    flex-direction: column;
    gap: 32px;
  }
  /* 左サイドカード: 400px固定 → 100%幅 */
  .faq__aside {
    width: 100%;
    flex-shrink: 1;
    padding: 24px;
  }
  .faq__aside-top {
    gap: 16px;
  }
  .faq__aside-illust {
    width: 100px;
    height: 100px;
  }
  .faq__aside-heading { font-size: 18px; }
  /* 吹き出し位置: top:-20 left:94 → top:-18 left:68 (SP仕様) */
  .faq__aside-popup {
    top: -18px;
    left: 68px;
  }
  /* FAQ リスト: 全幅 */
  .faq__list { width: 100%; }

  /* Assessment SP (Figma: 234:1611) あなたの会社はAI導入に向いていますか? */
  .assess {
    padding: 64px 12px;
  }
  /* SP では装飾葉 (assess__main::after) / ロボットを非表示 */
  .assess__main::after { display: none; }
  .assess__robot { display: none; }
  .assess__title { font-size: 28px; }
  /* メインコンテナ: 上に吹き出しが乗る分のスペースを確保 (top: 180px) */
  .assess__main {
    margin-top: 169px;
    padding: 48px 16px 24px;
    gap: 32px;
  }
  /* 中央吹き出し: 位置調整 (SP: top: 180 - main-margin-top の差分) */
  .assess__highlight {
    top: -148px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 303px;
    padding: 8px 12px 24px;
    gap: 8px;
    /* 背景の虫眼鏡アイコン (SP: left:7px / bottom:0 / 104x85) */
    background-position: left 7px bottom 0;
    background-size: 104px 85px;
  }
  .assess__highlight-lead {
    white-space: normal;
    font-size: 22px;
  }
  .assess__highlight-lead .num { font-size: 34px; }
  .assess__highlight-lead .unit { font-size: 28px; }
  .assess__highlight-sub {
    white-space: normal;
    font-size: 14px;
  }
  /* リスト: 2列 → 1列 */
  .assess__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .assess-item {
    padding: 16px;
  }
  .assess-item__title { font-size: 16px; }
  .assess-item::after {
    right: 16px;
    top: 16px;
  }
  /* 下部 CTA */
  .assess__cta {
    padding: 24px 16px;
    gap: 32px;
  }
  .assess__cta-text {
    gap: 16px;
    width: 100%;
  }
  .assess__cta-lead {
    white-space: normal;
    text-align: left;
  }
  .assess__cta-sub {
    text-align: left;
  }
  .assess__cta .hero__cta-btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer SP (Figma: 234:1958) */
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 12px;
    gap: 16px;
    flex-wrap: nowrap;
  }
  .site-footer__copy {
    white-space: normal;
  }

  /* CTA Pattern C SP (Figma: 234:1937) AIの力で、あなたの業務をもっとシンプルに */
  .cta-c {
    padding: 64px 12px;
    gap: 32px;
  }
  /* 装飾パターン: SP は右下 (200x200 固定) */
  .cta-c__bg img {
    top: auto;
    left: auto;
    right: -10px;
    width: 200px;
    height: 200px;
  }
  .cta-c__inner {
    gap: 24px;
    align-items: stretch;
  }
  .cta-c__title {
    font-size: 28px;
    text-align: left;
  }
  .cta-c__lead { text-align: left; }
  /* 限定枠: 横並び → 縦並び */
  .cta-c__limit {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
    width: 100%;
  }
  /* 縦線 → 横線 (42px) */
  .cta-c__limit-divider {
    width: 42px;
    height: 1px;
    align-self: center;
  }
  .cta-c__limit-note { white-space: normal; }
  /* CTAボタン: w-full */
  .cta-c__btn {
    width: 100%;
    justify-content: center;
  }

  /* CTA Pattern B SP (Figma: 234:1565) AIで成果が出るか、60分で明確に */
  .cta-b {
    padding: 64px 12px;
    gap: 32px;
  }
  /* 装飾パターン: SP は右下 (200x200 固定) */
  .cta-b__bg img {
    top: auto;
    left: auto;
    right: -10px;
    width: 200px;
    height: 200px;
  }
  .cta-b__inner {
    gap: 32px;
  }
  .cta-b__heading {
    gap: 16px;
    text-align: left;
  }
  .cta-b__title { 
    text-align: center;
    font-size: 28px; 
  }
  .cta-b__lead { text-align: left; }
  /* 4カード横並び → 2×2 グリッド */
  .cta-b__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cta-b__card {
    padding: 16px;
  }
  /* CTAボタン: w-full */
  .cta-b .hero__cta-btn {
    width: 100%;
    justify-content: center;
  }

  /* Plan / Pricing SP (Figma: 234:707) サービスプラン */
  .plan {
    padding: 64px 12px;
    gap: 32px;
  }
  .plan__heading {
    gap: 16px;
  }
  .plan__title { font-size: 28px; }
  .plan__lead { font-size: 16px; }
  .plan__list {
    flex-direction: column;
    gap: 16px;
  }
  .plan-card {
    flex: none;
    width: 100%;
  }
  /* LIGHT / PREMIUM ヘッダー: padding 縮小 + name 18px */
  .plan-card__head {
    padding: 8px 16px;
  }
  .plan-card__name { font-size: 18px; }
  /* body padding 24 → 16 */
  .plan-card__body {
    padding: 16px;
  }
  /* STANDARD は特別パディング */
  .plan-card--standard .plan-card__head {
    padding: 13px 16px;
  }
  .plan-card--standard .plan-card__name {
    font-size: 18px;
  }
  /* PREMIUM body のgap=32px */
  .plan-card--premium .plan-card__body { gap: 32px; }

  /* ROI / CTA Pattern A SP (Figma: 223:418) AI導入は投資回収型のDX */
  .roi {
    padding: 64px 12px;
    gap: 48px;
  }
  /* 装飾パターン: SP は右下 (200x200 固定) */
  .roi__bg img {
    top: auto;
    left: auto;
    right: -10px;
    width: 200px;
    height: 200px;
  }
  .roi__inner {
    padding: 0;
    gap: 32px;
  }
  .roi__heading { gap: 16px; }
  .roi__title { font-size: 28px; }
  /* メインコンテナ: 2カラム → 縦並び */
  .roi__container {
    flex-direction: column;
    gap: 32px;
  }
  .roi__sim {
    width: 100%;
    flex-shrink: 1;
  }
  .roi__sim-head {
    gap: 8px;
  }
  .roi__sim-title { font-size: 16px; }
  .roi__sim-body { padding: 16px; }
  /* total: 縦並び center → 縦並び start (number行は右寄せ) */
  .roi__sim-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 0 0;
  }
  .roi__sim-total-value {
    width: 100%;
    justify-content: flex-end;
  }
  /* 右リスト: 縦並び維持(SP も縦並び) */
  .roi__list { gap: 24px; }
  /* CTA: 100% 幅 */
  .roi .hero__cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   吹き出し / Popup フェードアップ (スクロール in 時)
============================================ */
/* 共通: 初期非表示 + transition */
.cta-balloon,
.hero__visual-popup,
.faq__aside-popup,
.assess__robot-popup,
.assess__highlight {
  opacity: 0;
  transition: opacity 0.6s ease, transform 1s ease;
  will-change: opacity, transform;
}
.cta-balloon.is-visible,
.hero__visual-popup.is-visible,
.faq__aside-popup.is-visible,
.assess__robot-popup.is-visible,
.assess__highlight.is-visible {
  opacity: 1;
}

/* .cta-balloon: translateX(-50%) を維持 + translateY 追加 */
.cta-balloon { transform: translate(-50%, 20px); }
.cta-balloon.is-visible { transform: translate(-50%, 0); }

/* .hero__visual-popup: PC 変形なし / SP は translateX(-50%) */
.hero__visual-popup { transform: translateY(20px); }
.hero__visual-popup.is-visible { transform: translateY(0); }
@media (max-width: 768px) {
  .hero__visual-popup { transform: translate(-50%, 20px); }
  .hero__visual-popup.is-visible { transform: translate(-50%, 0); }
}

/* .faq__aside-popup: 変形なし */
.faq__aside-popup { transform: translateY(20px); }
.faq__aside-popup.is-visible { transform: translateY(0); }

/* .assess__robot-popup: 変形なし */
.assess__robot-popup { transform: translateY(20px); }
.assess__robot-popup.is-visible { transform: translateY(0); }

/* .assess__highlight: translateX(-50%) を維持 */
.assess__highlight { transform: translate(-50%, 20px); }
.assess__highlight.is-visible { transform: translate(-50%, 0); }

.material-symbols-outlined { line-height: 1; font-size: 24px; }
.site-header__cta .icon .material-symbols-outlined { font-size: 24px; color: #fff; }
.hero__cta-btn .icon .material-symbols-outlined { font-size: 24px; color: #fff; }
.benefit__icon .material-symbols-outlined { font-size: 24px; color: #154CF3; }
.reason__connector-icon .material-symbols-outlined { font-size: 20px; color: #154CF3; }
.reason__feature-icon .material-symbols-outlined { font-size: 24px; color: #154CF3; }
.reason__table-mark .material-symbols-outlined { font-size: 24px; }
.reason__table-mark--x .material-symbols-outlined { color: #154CF3; }
.reason__table-mark--circle .material-symbols-outlined { color: #FF5E00; }
.flow-step__icon .material-symbols-outlined { font-size: 24px; color: #154CF3; }
.flow__badge-icon .material-symbols-outlined { font-size: 24px; color: #154CF3; }
.company__stat-icon .material-symbols-outlined { font-size: 24px; color: #154CF3; }
.cta-b__card-icon .material-symbols-outlined { font-size: 24px; color: #154CF3; }
.sp-menu-overlay__close .material-symbols-outlined { font-size: 16px; color: #3164FF; }
.sp-menu-overlay__cta .cta-btn .icon .material-symbols-outlined { font-size: 20px; color: var(--color-primary-text); }

/* ============================================
   ページロード フェードイン
============================================ */
body {
  opacity: 0;
  animation: pageFadeIn 0.6s ease 0.1s forwards;
}
@keyframes pageFadeIn {
  to { opacity: 1; }
}