/* ============================================================
   top/style.css — TOPページ専用スタイル
   命名規則：.top-{section}-{element}
   PC：1240px設計でピクセルパーフェクト（Figma実寸 px 直書き）
   SP：335基準 min(calc(X / 335 * 100vw), Xpx)
   ============================================================ */

/* =============================================================
   FV
   ============================================================= */
.top-fv {
  position: relative;
  width: 100%;
  background-color: #fff;
  background-image: url(../../img/top/fv-bg_pc.png);
  background-size: 1722px;
  background-repeat: no-repeat;
  background-position: center top;
  /* background-size: cover;   幅いっぱいに敷き、左右ははみ出してクロップ */
  overflow: hidden;
}

.top-fv-inner {
  position: relative;
  z-index: 1;
  width: min(var(--container-w), calc(100% - var(--pc-gutter) * 2));
  margin-inline: auto;
  padding-block: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --- キャッチ --- */
.top-fv-catch {
  padding-bottom: 80px;
}

.top-fv-catch-lead {
  font-weight: 900;
  font-size: 42px;
  line-height: 62px;
  letter-spacing: 4.2px;
  color: var(--color-text);
}

.top-fv-catch-title {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* 黄色いライン（タイトル下半分にかかる） */
.top-fv-catch-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 62px;
  width: 620px;
  height: 14px;
  background: var(--color-gold-bg);
  z-index: 0;
}

.top-fv-catch-title-text {
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-size: 52px;
  line-height: 84px;
  color: var(--color-accent-red);
  white-space: nowrap;
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
}

.top-fv-catch-desc {
  font-weight: 700;
  font-size: 22px;
  line-height: 42px;
  color: var(--color-text);
  width: 680px;
}

/* --- CTA ボタン（共通 .common-btn-primary の上に微調整） --- */
.top-fv-cta {
  margin-bottom: 100px;
}

/* --- ベネフィット3点（チェック帯） --- */
.top-fv-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 140px;
  width: 100%;
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.top-fv-check-item {
  display: flex;
  align-items: center;
  padding-right: 20px;
  border-right: 1px dashed var(--color-border);
}
.top-fv-check-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.top-fv-check-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.top-fv-check-text {
  margin-left: 20px;
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-text);
  white-space: nowrap;
}

.top-fv-check-em {
  color: var(--color-red-deep);
}

/* --- SP 対応 --- */
@media (max-width: 749px) {
  .top-fv {
    background-image: url(../../img/top/fv-bg_sp.png);
    background-size: contain;
    background-position: right top;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .top-fv-inner {
    width: 100%;
    padding: var(--content-pad-sp);
    align-items: stretch;
  }
  /* --- キャッチ --- */
  .top-fv-catch {
    padding-bottom: min(calc(200 / 750 * 100vw), 200px);
  }
  .top-fv-catch-lead {
    font-size: min(calc(52 / 750 * 100vw), 52px);
    line-height: min(calc(72 / 750 * 100vw), 72px);
    letter-spacing: 0.1em;
  }
  /* SPはタイトルが2行に折り返す（訪日インバウンドの / ミカタ）。
     黄ラインは各行に1本ずつ（::before=1行目フル幅 / ::after=2行目「ミカタ」） */
  .top-fv-catch-title {
    display: block;
    width: 100%;
  }
  .top-fv-catch-title::before {
    top: min(calc(74 / 750 * 100vw), 74px);
    bottom: auto;
    left: 0;
    width: min(calc(660 / 750 * 100vw), 660px);
    height: min(calc(28 / 750 * 100vw), 28px);
  }
  .top-fv-catch-title::after {
    content: "";
    position: absolute;
    left: 0;
    top: min(calc(180 / 750 * 100vw), 180px);
    width: min(calc(214 / 750 * 100vw), 214px);
    height: min(calc(28 / 750 * 100vw), 28px);
    background: var(--color-gold-bg);
    z-index: 0;
  }
  .top-fv-catch-title-text {
    font-size: min(calc(72 / 750 * 100vw), 72px);
    line-height: min(calc(108 / 750 * 100vw), 108px);
    white-space: normal;
    -webkit-text-stroke: calc(6 / 750 * 100vw) #fff;
  }
  .top-fv-catch-desc {
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: min(calc(44 / 750 * 100vw), 44px);
    width: 100%;
  }
  /* --- CTA（フル幅・高さ70） --- */
  .top-fv-cta {
    width: 100%;
    height: min(calc(140 / 750 * 100vw), 140px);
    margin-bottom: 0;
  }
  /* --- チェック帯（白カード：border + radius30 + padding20、区切り線なし） --- */
  .top-fv-check {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    gap: min(calc(40 / 750 * 100vw), 40px);
    margin-top: min(calc(60 / 750 * 100vw), 60px);
    padding: min(calc(40 / 750 * 100vw), 40px);
    border: 1px solid var(--color-border);
    border-radius: calc(60 / 750 * 100vw);
    box-shadow: none;
  }
  .top-fv-check-item {
    width: auto;
    padding: 0;
    border: 0;
  }
  .top-fv-check-item:last-child {
    border: 0;
  }
  .top-fv-check-icon {
    width: min(calc(100 / 750 * 100vw), 100px);
    height: min(calc(100 / 750 * 100vw), 100px);
  }
  .top-fv-check-text {
    margin-left: min(calc(40 / 750 * 100vw), 40px);
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(56 / 750 * 100vw), 56px);
    white-space: nowrap;
  }
}

/* =============================================================
   optimal（最適な対策を探す）
   ============================================================= */
.top-optimal {
  background: #fff;
  padding-block: 60px;
}
.top-optimal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-optimal-title {
  margin-bottom: 80px;
}
.top-optimal-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 23px;
  width: 100%;
}
.top-optimal-card {
  background: #fff;
  border-radius: 30px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
  height: 281px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.top-optimal-card:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
}
.top-optimal-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 30px 10px 20px;
  text-decoration: none;
  color: inherit;
}
.top-optimal-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.top-optimal-card-icon img {
  width: 55px;
  height: auto;
}
.top-optimal-card-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-brand);
  margin: 0;
}
.top-optimal-card-desc {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 18px;
  line-height: 34px;
  color: var(--color-text);
  text-align: center;
  padding: 0 0 10px;
  margin: 0;
}
.top-optimal-card-arrow {
  display: block;
  width: 34px;
  height: 34px;
  margin-top: auto;
}

@media (max-width: 749px) {
  .top-optimal {
    padding-block: min(calc(80 / 750 * 100vw), 80px);
  }
  .top-optimal-title {
    margin-bottom: min(calc(80 / 750 * 100vw), 80px);
  }
  .top-optimal-cards {
    grid-template-columns: repeat(2, 1fr);
    row-gap: min(calc(40 / 750 * 100vw), 40px);
    column-gap: min(calc(20 / 750 * 100vw), 20px);
  }
  .top-optimal-card {
    height: auto;
    min-height: min(calc(520 / 750 * 100vw), 520px);
  }
  /* 5枚目（サービス種別）は2列ぶち抜き・低め */
  .top-optimal-card:last-child {
    grid-column: 1 / -1;
    min-height: min(calc(300 / 750 * 100vw), 300px);
  }
  .top-optimal-card-link {
    padding: min(calc(40 / 750 * 100vw), 40px) min(calc(20 / 750 * 100vw), 20px) min(calc(32 / 750 * 100vw), 32px);
  }
  .top-optimal-card-icon {
    margin-bottom: min(calc(20 / 750 * 100vw), 20px);
  }
  .top-optimal-card-icon img {
    width: min(calc(110 / 750 * 100vw), 110px);
  }
  .top-optimal-card-title {
    font-size: min(calc(44 / 750 * 100vw), 44px);
    line-height: 1.9;
  }
  .top-optimal-card-desc {
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(68 / 750 * 100vw), 68px);
  }
}

/* =============================================================
   nayami（悩み → 解決を統合）
   ============================================================= */

/* --- 悩みブロック（dark bg） --- */
.top-nayami-problem {
  --h2-color: #fff;
  --h2-em-color: #fcd34d;
  --h2-line-color: #fff;        /* ダーク背景：装飾線は白（Figma Vector17 stroke=white） */
  background: #333;
  padding-block: 60px;
  position: relative;
  z-index: 1;
}
/* 濃いグレーボックス下の▼（Figma Polygon1: 320×78, 同色#333） */
.top-nayami-problem::after {
  content: "";
  position: absolute;
  top: calc(100% - 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 78px;
  background: #333;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.top-nayami-problem-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-nayami-problem-title {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 80px;
}
.top-nayami-problem-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
  width: 100%;
}
.top-nayami-problem-card {
  position: relative;
  background: #fff;
  border-radius: 30px;
  height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 186px 16px 24px;   /* 上部はイラスト円分のスペースを確保 */
  overflow: visible;          /* 上にはみ出すイラストを見せる */
}
/* イラスト（ベージュ円＋人物）。画像は正方形 380×380。
   Figma：icon 229.5×328 / top:-20 相当。円径≈200px・上に約20pxはみ出す */
.top-nayami-problem-card-img {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
}
.top-nayami-problem-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.top-nayami-problem-card-desc {
  font-family: var(--font-jp);
  font-size: 18px;
  line-height: 34px;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 4px;
}
.top-nayami-problem-card-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-brand);
  text-align: center;
  margin: 0;
}

/* --- 解決ブロック（light gray-blue bg） --- */
.top-nayami-solution {
  /* 背景色と背景画像を同居：色は background-color、画像系は個別プロパティで指定
     （background ショートハンドは画像を none にリセットするため使わない） */
  background-color: #f8fafc;
  background-image: url(../../img/top/nayami-bg_pc.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  padding-top: 140px;
  position: relative;
}
.top-nayami-solution-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 「そのお悩み」badge */
.top-nayami-solution-badge {
  display: inline-block;
  margin: 0 0 30px;
  padding: 10px 50px;
  background: #b45309;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  border-radius: 100px;
  position: relative;
  white-space: nowrap;
}
.top-nayami-solution-badge::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;   /* 32.586幅 */
  border-right: 16px solid transparent;
  border-top: 21px solid #b45309;        /* 21高 */
}

/* キャッチ：ロゴ + 「で一緒に解決しませんか？」+ 下線+tail */
.top-nayami-solution-catch {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80px;
  position: relative;
}
.top-nayami-solution-catch-logo {
  display: block;
  width: 600px;
  height: 60px;
  margin-bottom: 20px;
  object-fit: contain;
}
.top-nayami-solution-catch-sub {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-text);
  margin-bottom: 10px;
  white-space: nowrap;
}
.top-nayami-solution-catch-underline {
  display: block;
  width: 600px;
  height: 0;
  border-top: 2px solid #b17612;   /* h2装飾と統一（ゴールド） */
  position: relative;
}
.top-nayami-solution-catch-underline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 31px;
  background: #b17612;
  border-radius: 1px;
  transform-origin: top center;
  transform: translateX(-50%) rotate(47.6deg);
}

/* Cards */
.top-nayami-solution-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.top-nayami-solution-card {
  position: relative;
  background: #fff;
  border-radius: 30px;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
}

/* Tag「見つかる」「比較できる」「相談できる」 */
.top-nayami-solution-card-tag {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  min-width: 150px;
  padding: 5px 30px;
  background: #b45309;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  border-radius: 100px;
  text-align: center;
  white-space: nowrap;
}
.top-nayami-solution-card-tag::after {
  content: "";
  position: absolute;
  bottom: -10px;               /* Figma: 矢印が pill 下に約10px突出 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;   /* 32.586幅 */
  border-right: 16px solid transparent;
  border-top: 21px solid #b45309;        /* 21高 */
}

/* Card photo（Figma: block 250 / p-20 → 画像 210） */
.top-nayami-solution-card-img {
  height: 210px;
  margin: 20px;
  overflow: hidden;
  border-radius: 12px;
}
.top-nayami-solution-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card body (title + desc) */
.top-nayami-solution-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0 20px;
}

/* Card title */
.top-nayami-solution-card-title {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px dashed #b45309;
}
.top-nayami-solution-card-title-icon {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
}
.top-nayami-solution-card-title-text {
  flex-grow: 1;
  padding-left: 10px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: #1a1a1a;
}
.top-nayami-solution-card-title-text .em {
  color: var(--color-brand);
}

/* Card description */
.top-nayami-solution-card-desc {
  font-family: var(--font-jp);
  font-size: 18px;
  line-height: 34px;
  color: #505050;
  padding: 20px 0 0;
}

/* Footer block: 締めのテキスト + 握手イラスト */
.top-nayami-solution-footer {
  width: 100%;
  text-align: center;
  padding-top: 60px;
}
.top-nayami-solution-footer-title {
  position: relative;
  display: inline-block;
  padding: 0 70px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-text);
}
.top-nayami-solution-footer-title .em {
  color: var(--color-brand);
}
/* 左右の装飾ブラケット（Figma Vector30/31：35×71 の斜線） */
.top-nayami-solution-footer-title::before,
.top-nayami-solution-footer-title::after {
  content: "";
  position: absolute;
  bottom: 6px;                 /* 下端を支点に上を外へ開く */
  width: 2px;
  height: 60px;
  background: #3c3c3c;
}
.top-nayami-solution-footer-title::before {
  left: 30px;
  transform-origin: bottom center;
  transform: rotate(-26deg);   /* 下支点・上が外（左）へ広がる */
}
.top-nayami-solution-footer-title::after {
  right: 30px;
  transform-origin: bottom center;
  transform: rotate(26deg);    /* 下支点・上が外（右）へ広がる */
}
/* 握手イラスト：背景に nayami-bg_pc（淡いピンクの光彩）を中央下に敷く。
   人物の下端は赤グラデラインに少し被せる（margin-bottom 負 + z-index） */
.top-nayami-solution-footer-img {
  margin-top: 16px;
  margin-bottom: -10px;        /* 赤ラインに少し被せる */
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.top-nayami-solution-footer-img img {
  position: relative;
  z-index: 1;
  width: 598px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* 下端の赤グラデライン（cv帯への繋ぎ）。握手より背面に */
.top-nayami-solution-gradient-line {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #c12638, #e64f50);
}

/* --- SP --- */
@media (max-width: 749px) {
  .top-nayami-problem {
    padding: calc(120 / 750 * 100vw) 0;
    margin-bottom: 0;
  }
  .top-nayami-solution {
    padding-top: calc(200 / 750 * 100vw);
    padding-bottom: 0;
    background-image: url(../../img/top/nayami-bg_sp.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
  }
  .top-nayami-problem::after {
    width: min(calc(640 / 750 * 100vw), 640px);
    height: min(calc(156 / 750 * 100vw), 156px);
    top:calc(100% - calc(10/750*100%))
  }
  /* 締めテキストの装飾ブラケット（回転擬似要素）が端で数px外へはみ出すのを抑止
     （x方向のみclip。握手の下方向はみ出し overlap は維持） */
  .top-nayami-solution {
    overflow-x: clip;
  }
  .top-nayami-problem-title {
    margin-bottom: calc(80 / 750 * 100vw);
  }
  .top-nayami-problem-cards,
  .top-nayami-solution-cards {
    grid-template-columns: 1fr;
    gap: calc(80 / 750 * 100vw);
  }
  /* 悩みカード：SPは横並び（左=円アイコン100px／右=desc小+赤タイトル左寄せ） */
  .top-nayami-problem-cards {
    gap: calc(40 / 750 * 100vw);
  }
  .top-nayami-problem-card {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: calc(20 / 750 * 100vw);
    padding: 8% 5%;
    overflow: hidden;
  }
  .top-nayami-problem-card-img {
    position: static;
    transform: none;
    grid-row: 1 / 3;
    align-self: center;
    width: calc(200 / 750 * 100vw);
    height: calc(200 / 750 * 100vw);
  }
  .top-nayami-problem-card-desc {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(52 / 750 * 100vw), 52px);
    margin: 0 0 calc(20 / 750 * 100vw);
  }
  .top-nayami-problem-card-title {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: min(calc(44 / 750 * 100vw), 44px);
    line-height: min(calc(56 / 750 * 100vw), 56px);
  }
  .top-nayami-solution-catch-logo {
    width: 100%;
    height: auto;
    margin-bottom: calc(40 / 750 * 100vw);
  }
  .top-nayami-solution-badge {
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(56 / 750 * 100vw), 56px);
    margin-bottom: calc(60 / 750 * 100vw);
    padding: calc(20 / 750 * 100vw) calc(100 / 750 * 100vw);
  }
  .top-nayami-solution-catch-sub {
    font-size: min(calc(56 / 750 * 100vw), 56px);
    line-height: min(calc(84 / 750 * 100vw), 84px);
    white-space: normal;
    letter-spacing: -0.05em;
  }
  .top-nayami-solution-catch-underline { width: 100%; }
  .top-nayami-solution-catch-underline::after {
    height: calc(42 / 750 * 100vw);
  }
  .top-nayami-solution-catch {
    padding-bottom: calc(160 / 750 * 100vw);
  }
  .top-nayami-solution-card {
    padding: calc(60 / 750 * 100vw) 0;
  }
  .top-nayami-solution-card-tag {
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(56 / 750 * 100vw), 56px);
    padding: calc(10 / 750 * 100vw) calc(60 / 750 * 100vw);
  }
  .top-nayami-solution-card-img {
    height: calc(420 / 750 * 100vw);
    margin: calc(40 / 750 * 100vw);
  }
  .top-nayami-solution-card-body {
    margin: 0 calc(40 / 750 * 100vw);
  }
  .top-nayami-solution-card-title {
    padding: calc(40 / 750 * 100vw) 0;
  }
  .top-nayami-solution-card-title-icon {
    width: calc(130 / 750 * 100vw);
    height: calc(130 / 750 * 100vw);
  }
  .top-nayami-solution-card-title-text {
    font-size: min(calc(44 / 750 * 100vw), 44px);
    line-height: min(calc(64 / 750 * 100vw), 64px);
    padding-left: calc(20 / 750 * 100vw);
  }
  .top-nayami-solution-card-desc {
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(68 / 750 * 100vw), 68px);
    padding: calc(40 / 750 * 100vw) 0 0;
  }
  .top-nayami-solution-footer {
    padding-top: calc(120 / 750 * 100vw);
  }
  .top-nayami-solution-footer-img {
    margin-top: calc(32 / 750 * 100vw);
  }
  /* 締めテキスト：左右余白を詰めて4行に収める（Figma：テキスト幅295/335） */
  .top-nayami-solution-footer-title {
    padding: 0 calc(48 / 750 * 100vw);
    font-size: min(calc(56 / 750 * 100vw), 56px);
    line-height: min(calc(84 / 750 * 100vw), 84px);
  }
  .top-nayami-solution-footer-title::before,
  .top-nayami-solution-footer-title::after {
    height: min(calc(112 / 750 * 100vw), 112px);
  }
  .top-nayami-solution-footer-title::before { left: min(calc(4 / 750 * 100vw), 4px); }
  .top-nayami-solution-footer-title::after { right: min(calc(4 / 750 * 100vw), 4px); }
}

/* =============================================================
   cv帯（共通CV）は common/style.css の .common-cv へ移設・昇格。
   TOP含む全ページ共通要素のためHTMLは class="common-cv …" を使用。
   ============================================================= */

@media (max-width: 749px) {
  .top-cv { padding: calc(120 / 750 * 100vw) calc(40 / 750 * 100vw); }
  /* SP（Figma CTA）はボタン右上の赤バースト装飾なし */
  .top-cv-btn-deco { display: none; }
  .top-cv-card {
    width: 100%;
    padding: calc(80 / 750 * 100vw) calc(30/ 750 * 100vw);
  }
  .top-cv-lead {
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(56 / 750 * 100vw), 56px);
  }
  .top-cv-title { font-size: min(calc(58 / 750 * 100vw), 58px); }
  .top-cv-title .em { font-size: min(calc(90 / 750 * 100vw), 90px);
    letter-spacing: 0;
  }
  /* CV帯カード内ボタン：SPはFigma準拠（カード内幅いっぱい 295px、高さ70px） */
  .top-cv-card .common-btn-primary {
    width: 100%;
    height: calc(140 / 750 * 100vw);
    font-size: min(calc(36 / 750 * 100vw), 36px);
    gap: calc(10 / 750 * 100vw);
    padding: 0 calc(50 / 750 * 100vw);
  }
  .top-cv-card .common-btn-primary-icon {
    width: calc(48 / 750 * 100vw);
    height: calc(48 / 750 * 100vw);
  }
  /* SP円弧：Figma Ellipse24 375×141、セクション底から30px重なり */
  .top-cv::after {
    width: 100vw;
    height: calc(282 / 750 * 100vw);
    top: calc(100% - calc(60 / 750 * 100vw));
  }
}

/* =============================================================
   comparison（比較表）
   ミカタ列を縦長の赤フレームで強調。ヘッダはテーブル上に飛び出し
   ============================================================= */
.top-comparison {
  background: #fef9e6 url('../../img/top/comparison-bg_pc.png') center 200px / 1460px 338px no-repeat;
  padding: 0 0 80px;
  position: relative;
  overflow: hidden;
}
.top-comparison-arrow {
  padding-top: 40px;
  margin-bottom: 60px;
  text-align: center;
}
.top-comparison-arrow-img {
  display: block;
  margin: 0 auto;
  width: 28px;
  height: auto;
}
.top-comparison-inner { text-align: center; }
.top-comparison-title {
  display: inline-block;
  margin: 0 auto 80px;
  text-align: center;
  --h2-em-color: var(--color-brand);
  /* テキストは既定の #1a1a1a、装飾線は既定の #B17612（Figma Vector17 stroke=#B17612） */
}
.top-comparison-title .common-h2-em { color: var(--color-brand); }

.top-comparison-table-wrap {
  width: 100%;                /* 親(.common-container)が余白を持つので100% */
  margin: 0 auto;
  padding-top: 0;             /* theadが140pxタブ領域をカバー */
  position: relative;
  background: url('../../img/top/table-bg_pc.png') no-repeat left top / 100% auto;
}
.top-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: transparent;
  position: relative;
  z-index: 1;
}
/* Figma PC列幅: label=490 / mikata=330 / other×2=210 (計1240px) */
.top-comparison-table col:nth-child(1) { width: 39.52%; }
.top-comparison-table col:nth-child(2) { width: 26.61%; }
.top-comparison-table col:nth-child(3) { width: 16.94%; }
.top-comparison-table col:nth-child(4) { width: 16.94%; }

/* ミカタ列フレーム：背景画像で描画するため非表示 */
.top-comparison-mikata-frame { display: none; }

/* ヘッダ全般 — Figma PC: 赤タブ140px / グレータブ80px(下揃え) */
.top-comparison-table thead th {
  height: 140px;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
  color: #fff;
}
.top-comparison-label-head { background: transparent !important; }

/* ミカタ列ヘッダ：背景画像が描画するため透明 */
.top-comparison-col-mikata-head {
  position: relative;
  background: transparent;
  font-size: 22px;
  line-height: 32px;
}
.top-comparison-col-mikata-head .em {
  display: inline-block;
  margin-block: 4px;
  color: #fcd34d;
  font-size: 32px;
  font-weight: 900;
  line-height: 38px;
}

/* 他列ヘッダ（グレー）：背景は画像で描画。80px高で下揃え */
.top-comparison-table thead .top-comparison-col-other-head {
  background: transparent;
  font-size: 12px;
  vertical-align: bottom;
  padding-bottom: 14px;
  padding: 50px 5px 12px;
}

/* tbody：罫線は背景画像で描画。Figma PC各行124px */
.top-comparison-table tbody th,
.top-comparison-table tbody td {
  height: 121px;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}
.top-comparison-label {
  text-align: left !important;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 42px;
  color: var(--color-text);
}

/* ミカタ列のセル：背景は画像で描画 */
.top-comparison-col-mikata {
  background: transparent;
  position: relative;
}


/* マーク画像のサイズ — Figma PC: ◎36px/lh56, ×△○18px/lh28 */
.top-comparison-table tbody td img {
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.top-comparison-table tbody td img[src*="mark-double"] {
  width: 36px;
  height: 56px;
}  /* ◎ */
.top-comparison-table tbody td img[src*="mark-circle"] {
  width: 18px;
  height: 28px;
}  /* ○ */
.top-comparison-table tbody td img[src*="mark-triangle"] {
  width: 18px;
  height: 28px;
}  /* △ */
.top-comparison-table tbody td img[src*="mark-cross"] {
  width: 18px;
  height: 28px;
}  /* × */
.top-comparison-cell-note {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 26px;
}
.top-comparison-col-mikata .top-comparison-cell-note {
  color: var(--color-brand);
}
.top-comparison-cell-free {
  display: inline-block;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 36px;
  line-height: 56px;
  color: var(--color-brand);
  letter-spacing: 0.05em;
}
.top-comparison-cell-plain {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
}

@media (max-width: 749px) {
  .top-comparison {
    background: #fef9e6 url('../../img/top/comparison-bg_sp.png') left top / 100% auto no-repeat;
    padding: 0 0 calc(200 / 750 * 100vw);
  }
  .top-comparison-arrow {
    padding-top: calc(20 / 750 * 100vw);
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .top-comparison-arrow-img {
    width: calc(56 / 750 * 100vw);
    height: calc(216 / 750 * 100vw);
  }
  .top-comparison-title { margin-bottom: calc(120 / 750 * 100vw); }
  .top-comparison-table-wrap {
    width: 100%;
    overflow-x: auto;
    padding: 0 calc(32 / 750 * 100vw) calc(32 / 750 * 100vw);
    margin-top: 0;
    background: none;
  }
  /* SP：テーブル枠は背景画像で描画 */
  .top-comparison-table-wrap { background: none; }
  .top-comparison-table {
    min-width: 660px;
    height: 808px;
    background: url('../../img/top/table-bg_sp.png') no-repeat left top / 660px 808px;
  }

  .top-comparison-table col:nth-child(1) { width: 210px; }
  .top-comparison-table col:nth-child(2) { width: 210px; }
  .top-comparison-table col:nth-child(3) { width: 120px; }
  .top-comparison-table col:nth-child(4) { width: 120px; }

  /* thead = タブ領域(120px)。背景画像のタブ描画と重なる */
  .top-comparison-table thead th {
    height: 120px;
    padding: 20px;
    vertical-align: bottom;
    font-size: 18px;
    line-height: 20px;
  }
  .top-comparison-col-mikata-head {
    vertical-align: middle;
    font-size: 18px;
    line-height: 27px;
  }
  .top-comparison-col-mikata-head .em {
    font-size: 28px;
    line-height: 33px;
  }
  .top-comparison-col-other-head {
    vertical-align: bottom;
    padding-bottom: 10px;
    border-radius: 0;
  }

  /* tbody：罫線は背景画像。PC height:121pxをリセットし、table height:808pxで均等配分 */
  .top-comparison-table tbody th,
  .top-comparison-table tbody td {
    height: auto;
    padding:0 20px;
    border: none;
  }
  .top-comparison-label {
    font-size: 18px;
    line-height: 24px;
    text-align: left;
  }
  /* マーク画像：Figmaはテキスト文字（◎36px/lh56, ×△○18px/lh28）。
     SVG画像の高さをline-heightに合わせて行高を背景画像と一致させる */
  .top-comparison-table tbody td img {
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }
  .top-comparison-table tbody td img[src*="mark-double"] {
    width: 36px;
    height: 56px;
  }
  .top-comparison-table tbody td img[src*="mark-circle"] {
    width: 18px;
    height: 28px;
  }
  .top-comparison-table tbody td img[src*="mark-triangle"] {
    width: 18px;
    height: 28px;
  }
  .top-comparison-table tbody td img[src*="mark-cross"] {
    width: 18px;
    height: 28px;
  }
  .top-comparison-cell-free {
    font-size: 36px;
    line-height: 56px;
  }
  .top-comparison-cell-note {
    font-size: 14px;
    line-height: 20px;
  }
  .top-comparison-col-mikata .top-comparison-cell-note { line-height: 26px; }
  .top-comparison-cell-plain {
    font-size: 18px;
    line-height: 28px;
  }
}

/* =============================================================
   flow（無料相談の流れ）
   ============================================================= */
.top-flow {
  --h2-color: var(--color-text-sub);
  --h2-em-color: var(--color-text-sub);
  background: linear-gradient(to bottom, #F4ECC8, #FF9A9A);
  padding: 80px 0 120px;
  position: relative;
  overflow: hidden;
}
.top-flow-bg {
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}
.top-flow-bg img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom;
}
.top-flow-inner {
  position: relative;
  z-index: 1;
  width: min(var(--container-w), calc(100% - var(--pc-gutter) * 2));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-flow-title { margin-bottom: 80px; }

.top-flow-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;                 /* Figma実測: カード間60px */
  width: 100%;
  /* 3カードを薄ベージュ箱で囲う（Figma: #fffbeb rounded-30 / padding 60）。SPは下のメディアクエリで上書き */
  background: #fffbeb;
  border-radius: 30px;
  padding: 60px;
}
.top-flow-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px 30px;
  position: relative;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* カード間の右向き黄色三角（PCのみ。SPは縦積みのため非表示） */
.top-flow-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 30px);   /* gap(60px) の中央 */
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16.3px 0 16.3px 21px;   /* Figma実測: 21 × 32.6px */
  border-color: transparent transparent transparent #ffb700;
  z-index: 2;
}

/* step バッジ：Figmaは黄色い円(80px)・カード左上角・黒文字「step / 01」 */
.top-flow-card-step {
  position: absolute;
  top: -10px;
  left: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(180deg, #fecb3e 0%, #ffb700 100%);
  color: #1a1a1a;
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  text-align: center;
  text-transform: lowercase;
  font-size: 18px;
  z-index: 2;
}
.top-flow-card-step .num {
  display: inline-block;
  margin-top: 2px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
}

/* 人物イラスト：カードに直接配置。STEP02/03は大きく、頭がカード上端から飛び出す（Figma実寸）。
   画像は absolute なので各カードでタイトル開始位置（=この枠の高さ分）が揃う。 */
.top-flow-card-img {
  position: relative;
  margin: 0 auto 16px;
  width: 100%;
  height: 220px;
}
.top-flow-card-img img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
}
/* card padding-top 28px 基準。top=11→カード上から39px(内側) / top=-48→カード上端より20px上(頭出し) */
.top-flow-card:nth-child(1) .top-flow-card-img img { width: 216px; top: 11px; }   /* 216×190 */
.top-flow-card:nth-child(2) .top-flow-card-img img { width: 221px; top: -48px; }  /* 221×276 頭出し */
.top-flow-card:nth-child(3) .top-flow-card-img img { width: 240px; top: -48px; }  /* 240×260 頭出し */

.top-flow-card-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-brand);
  margin-bottom: 16px;
}
.top-flow-card-desc {
  font-family: var(--font-jp);
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-text);
  text-align: left;
}

@media (max-width: 749px) {
  .top-flow {
    padding: calc(120 / 750 * 100vw) calc(40 / 750 * 100vw) calc(200 / 750 * 100vw);
    background: linear-gradient(to bottom, #F4ECC8 35%, #FF9A9A 100%);
  }
  .top-flow-inner { width: 100%; padding-inline: 0; }   /* PCの幅制約をSPでは解除（SP余白は .top-flow 側） */
  /* Figma SP flow h2: 36px/56px（共通h2の28px相当より大きい） */
  .top-flow-title {
    margin-bottom: calc(120 / 750 * 100vw);
    font-size: min(calc(72 / 750 * 100vw), 72px);
    line-height: min(calc(112 / 750 * 100vw), 112px);
  }
  /* SP：3カードをクリーム箱で囲う（Figma: #fffbeb rounded-30 px-20 py-60） */
  .top-flow-cards {
    grid-template-columns: 1fr;
    gap: calc(120 / 750 * 100vw);
    background: #fffbeb;
    border-radius: calc(60 / 750 * 100vw);
    padding: calc(120 / 750 * 100vw) calc(40 / 750 * 100vw);
  }
  .top-flow-card {
    min-height: 0;   /* 内容なりの高さに（固定高さによるカード下の余白を解消） */
    text-align: left;
    padding: 0;
    border-radius: calc(60 / 750 * 100vw);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    overflow: visible;
  }
  /* PC用のカード間三角はSPでは出さない */
  .top-flow-card:not(:last-child)::after { display: none; }
  /* 画像はflow配置（PCのabsoluteをSPで解除）。.top-flow-card はグリッドアイテム=BFCなので
     画像の負margin-topはカードに対して効き、はみ出し量＝margin-topの絶対値で直接調整できる。
     画像がflowに乗るのでテキストと重ならず、min-height撤去でカード下の余白も出ない。 */
  .top-flow-card-img {
    position: static;
    height: auto;
    margin: 0;
    display: flex;
    justify-content: center;
  }
  .top-flow-card-img img {
    position: static;
    transform: none;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .top-flow-card:nth-child(1) .top-flow-card-img img,
  .top-flow-card:nth-child(2) .top-flow-card-img img,
  .top-flow-card:nth-child(3) .top-flow-card-img img {
    width: 100%;
    top: auto;
    bottom: auto;
  }
  /* width＝画像サイズ(カード比) / margin-top＝頭出し量（負）/ margin-bottom＝タイトルとの間隔 */
  .top-flow-card:nth-child(1) .top-flow-card-img {
    width: 64%;
    margin: min(calc(102 / 750 * 100vw), 102px) auto min(calc(48 / 750 * 100vw), 48px);
  }
  .top-flow-card:nth-child(2) .top-flow-card-img {
    width: 70%;
    margin: calc(-60 / 750 * 100vw) auto min(calc(48 / 750 * 100vw), 48px);
  }
  .top-flow-card:nth-child(3) .top-flow-card-img {
    width: 78%;
    margin: calc(-40 / 750 * 100vw) auto min(calc(48 / 750 * 100vw), 48px);
  }
  .top-flow-card-title {
    font-size: min(calc(44 / 750 * 100vw), 44px);
    line-height: min(calc(64 / 750 * 100vw), 64px);
    text-align: left;
    letter-spacing: -0.04em;
    padding: 0 calc(40 / 750 * 100vw);
    margin-bottom: 0;
  }
  .top-flow-card-title--tight { letter-spacing: -0.08em; }
  .top-flow-card-step {
    width: calc(160 / 750 * 100vw);
    height: calc(160 / 750 * 100vw);
    top: calc(-20 / 750 * 100vw);
    left: calc(-20 / 750 * 100vw);
    font-size: min(calc(36 / 750 * 100vw), 36px);
  }
  .top-flow-card-step .num {
    font-size: min(calc(76 / 750 * 100vw), 76px);
  }
  .top-flow-card-desc {
    font-size: min(calc(34 / 750 * 100vw), 34px);
    line-height: min(calc(68 / 750 * 100vw), 68px);
    text-align: left;
    padding: calc(20 / 750 * 100vw) calc(40 / 750 * 100vw) calc(40 / 750 * 100vw);
  }
}

/* =============================================================
   article（お役立ち記事）
   ============================================================= */
.top-article {
  background: #fef9e6;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.top-article-bg {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 1460px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}
.top-article-bg img {
  width: 100%;
  height: auto;
}
.top-article-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-article-title { margin-bottom: 40px; }
.top-article-subtitle {
  font-family: var(--font-jp);
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 50px;
  font-weight: 700;
}
.top-article-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 23px;
  width: 100%;
  margin-bottom: 50px;
}
.top-article-card {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.top-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.top-article-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.top-article-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.top-article-card-thumb img {
  width:100%;
  height: auto;

}
/* WP: アイキャッチ画像はサムネ枠いっぱいにカバー */
.top-article-card-thumb-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.top-article-card-cat {
  display: inline-block;
  padding: 4px 14px;
  margin: 12px 12px 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  border-radius: 4px;
  align-self: flex-start;
}
.top-article-card-cat--nayami { background: var(--color-brand); }
.top-article-card-cat--industry { background: #16a34a; }
.top-article-card-cat--budget { background: #2563eb; }
.top-article-card-cat--subsidy { background: #b45309; }
.top-article-card-cat--type { background: #7c3aed; }
.top-article-card-heading {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  padding: 8px 16px 16px;
  flex-grow: 1;
  min-height: calc(1.6em * 4 + 8px + 16px);
}
.top-article-card-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px 8px;
  font-size: 12px;
  color: var(--color-text);
}
.top-article-card-tags img {
  width: 16px;
  height: 16px;
}
.top-article-card-tags span {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: 14px;
}
.top-article-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 16px;
  margin-top: auto;
}
.top-article-card-date {
  font-size: 14px;
  color: var(--color-text);
}
.top-article-card-arrow {
  width: 34px;
  height: 34px;
  background: url(../../img/common/link-arrow.svg) center / contain no-repeat;
}

.top-article-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 510px;
  height: 100px;
  border-radius: 200px;
  background: linear-gradient(to bottom, #ef4444, #b91c1c);
  border: 3px solid #fff;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: transform 0.2s;
}
.top-article-more:hover { transform: translateY(-2px); }
.top-article-more-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.top-article-more-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-brand);
  border-right: 2px solid var(--color-brand);
  transform: translate(-60%, -50%) rotate(45deg);
}

@media (max-width: 749px) {
  .top-article { padding: calc(200 / 750 * 100vw) calc(40 / 750 * 100vw); }
  .top-article-inner { padding-inline: 0; }
  .top-article-bg { display: none; }
  .top-article-subtitle {
    text-align: center;
    letter-spacing: -0.05em;
    font-size: min(calc(44 / 750 * 100vw), 44px);
    line-height: min(calc(84 / 750 * 100vw), 84px);
    margin-bottom: calc(60 / 750 * 100vw);
  }
  /* SP：1列・縦組みカード（記事一覧と共通の新「Blog post card」: 画像上→バッジ→見出し→タグ→日付）。
     旧の横並び（thumb左50%/content右50%）は廃止。値は記事一覧SPカードに合わせる。 */
  .top-article-cards {
    grid-template-columns: 1fr;
    gap: calc(64 / 750 * 100vw);   /* ≒32px（375時） */
  }
  .top-article-card {
    border-radius: 0;
    padding: 20px;
    box-shadow: 0 12px 8px rgba(16, 24, 40, 0.08), 0 4px 3px rgba(16, 24, 40, 0.03);
  }
  .top-article-card-link { display: flex; flex-direction: column; }
  .top-article-card-thumb {
    width: 100%;
    height: 166px;
    aspect-ratio: auto;
  }
  .top-article-card-cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 20px 0 0;
    padding: 0 10px;
    height: 23px;
    font-size: 14px;
    line-height: 22px;
    border-radius: 8px;
  }
  .top-article-card-heading {
    font-size: 18px;
    line-height: 28px;
    color: #101828;
    padding: 12px 0 0;
    min-height: calc(28px * 4 + 12px);
  }
  .top-article-card-tags {
    padding: 10px 0 0;
    font-size: 14px;
  }
  .top-article-card-tags span { font-size: 14px; padding: 0 10px; line-height: 26px; }
  .top-article-card-tags img { width: 25px; height: 25px; }
  .top-article-card-footer { padding: 10px 0 0; }
  .top-article-card-date { font-size: 14px; }
  .top-article-more {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: calc(36 / 750 * 100vw) calc(100 / 750 * 100vw);
    font-size: min(calc(36 / 750 * 100vw), 36px);
  }
}

/* =============================================================
   faq（よくあるご質問）
   ============================================================= */
.top-faq {
  --h2-color: var(--color-text-sub);
  --h2-em-color: var(--color-brand);
  background: #fff;
  padding: 80px 0;
}
.top-faq-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-faq-title { margin-bottom: 40px; }
.top-faq-subtitle {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 50px;
}
.top-faq-list {
  width: 100%;
  max-width: 800px;          /* Figma: FAQ list 800px 中央 */
  display: flex;
  flex-direction: column;
  border-top: 1px dashed #b45309;
}
.top-faq-item {
  border-bottom: 1px solid #b45309;
}
.top-faq-q {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px 0;
  background: transparent;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
  
}
.top-faq-q-mark {
  width: 36px;
  height: 36px;
  margin-right: 16px;
  flex-shrink: 0;
  object-fit: contain;
}
.top-faq-q-text { flex-grow: 1; }
.top-faq-q-toggle {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.3s ease;   /* 開く時くるっと90度回転 */
}
.top-faq-q-toggle::before,
.top-faq-q-toggle::after {
  content: "";
  position: absolute;
  background: #b45309;
  transition: opacity 0.3s ease;
}
.top-faq-q-toggle::before {
  top: 50%; left: 0;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}
.top-faq-q-toggle::after {
  left: 50%; top: 0;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}
/* 開：トグル全体を90度回転させ、横棒(::before)を消す
   → 回転後は縦棒(::after)が横向きになり「−」に。＋→（✕状を通って）−のスピン */
.top-faq-q[aria-expanded="true"] .top-faq-q-toggle {
  transform: rotate(90deg);
}
.top-faq-q[aria-expanded="true"] .top-faq-q-toggle::before {
  opacity: 0;
}
/* 回答：grid-template-rows 0fr→1fr で高さをなめらかに開閉 */
.top-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.top-faq-q[aria-expanded="true"] + .top-faq-a {
  grid-template-rows: 1fr;
}
.top-faq-a-body {
  overflow: hidden;
  min-height: 0;             /* grid item を 0 まで潰せるように */
}
.top-faq-a-text {
  margin: 0;
  padding: 0 50px 24px 52px;  /* 左52(Q下に揃え) / 右50(Figma px-50) / 下24 */
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}

@media (max-width: 749px) {
  .top-faq-inner { padding-inline: 0; }
}

/* =============================================================
   cv-form（フォーム本体）
   ============================================================= */
.top-cv-form {
  --h2-color: var(--color-text-sub);
  --h2-em-color: var(--color-text-sub);
  background: #fff;
  padding: 80px 0 120px;
}
.top-cv-form-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-cv-form-title { margin-bottom: 30px; }
.top-cv-form-lead {
  font-family: var(--font-jp);
  font-size: 18px;
  line-height: 32px;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 30px;
}

/* 3 check items row */
.top-cv-form-checks {
  display: flex;
  gap: 32px;
  margin-bottom: 30px;
}
.top-cv-form-checks li {
  display: flex;
  align-items: center;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}
.top-cv-form-check-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  flex-shrink: 0;
  object-fit: contain;
}

/* HubSpot 埋め込みフォーム用ラッパー（幅800px・中央） */
.top-cv-form-embed {
  width: 800px;
  max-width: 100%;
  margin: 40px auto 0;
}
.top-cv-form-note {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-text);
}

@media (max-width: 749px) {
  /* --- FAQ --- */
  .top-faq { padding: calc(200 / 750 * 100vw) calc(40 / 750 * 100vw); }
  .top-faq-title { margin-bottom: calc(90 / 750 * 100vw); }
  .top-faq-subtitle {
    font-size: min(calc(44 / 750 * 100vw), 44px);
    line-height: min(calc(56 / 750 * 100vw), 56px);
    white-space: nowrap;
    margin-bottom: calc(60 / 750 * 100vw);
  }
  .top-faq-list { padding: 0 ;
    width: calc(590/750*100vw);
   }
  .top-faq-q {
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(56 / 750 * 100vw), 56px);
    padding: calc(60 / 750 * 100vw) 0;
  }
  .top-faq-q-mark {
    width: calc(76 / 750 * 100vw);
    height: calc(76 / 750 * 100vw);
    margin-right: calc(20 / 750 * 100vw);
  }
  .top-faq-q-toggle {
    width: calc(38 / 750 * 100vw);
    height: calc(38 / 750 * 100vw);
    margin-left: calc(20 / 750 * 100vw);
  }
  .top-faq-a-text {
    font-size: min(calc(31.2 / 750 * 100vw), 31.2px);
    line-height: 1.54;
    padding: 0 calc(120 / 750 * 100vw) calc(48 / 750 * 100vw) calc(96 / 750 * 100vw);
    text-align: justify;
  }

  /* --- cv-form --- */
  .top-cv-form { padding: calc(160 / 750 * 100vw) calc(40 / 750 * 100vw); }
  .top-cv-form-title.common-h2 { font-size: min(calc(70 / 750 * 100vw), 70px);
    margin-bottom: calc(120 / 750 * 100vw);
   }
  .top-cv-form-inner { padding-inline: 0; }
  .top-cv-form-lead {
    text-align: justify;
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(68 / 750 * 100vw), 68px);
    margin-bottom:calc(60/750*100vw);
  }
  /* SP：3チェック横並び＋dashed区切り（Figma: justify-between, icon上+text下） */
  .top-cv-form-checks {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    margin-bottom: calc(40 / 750 * 100vw);
  }
  .top-cv-form-checks li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: calc(216 / 750 * 100vw);
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: min(calc(44 / 750 * 100vw), 44px);
  }
  .top-cv-form-checks li:first-child {
    border-right: 1px dashed var(--color-border);
    padding-right: calc(20 / 750 * 100vw);
  }
  .top-cv-form-checks li:last-child {
    border-left: 1px dashed var(--color-border);
    padding-left: calc(20 / 750 * 100vw);
  }
  .top-cv-form-check-icon {
    width: calc(76 / 750 * 100vw);
    height: calc(76 / 750 * 100vw);
    margin-right: 0;
    margin-bottom: calc(8 / 750 * 100vw);
  }
  .top-cv-form-embed { margin-top: calc(60 / 750 * 100vw); }
  .top-cv-form-note {
    font-size: min(calc(36 / 750 * 100vw), 36px);
    line-height: min(calc(68 / 750 * 100vw), 68px);
    text-align: left;
    margin-top: calc(60 / 750 * 100vw);
  }
  
}