.rakucore-lp {
  --rakucore-color-primary: #00a0e9;
  --rakucore-color-accent: #5ec8f2;
  --rakucore-color-cta: #fd6f01;
  --rakucore-color-dark: #0a1930;
  --rakucore-color-text: #1a1a1a;
  --rakucore-color-white: #ffffff;
  --rakucore-color-ink: #171d35;

  font-family: YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  color: var(--rakucore-color-text);
  background: var(--rakucore-color-white);
}

.rakucore-lp,
.rakucore-lp *,
.rakucore-lp *::before,
.rakucore-lp *::after {
  box-sizing: border-box;
}

.rakucore-lp img {
  display: block;
  max-width: 100%;
  height: auto;
}

.rakucore-lp a {
  color: inherit;
  text-decoration: none;
}

/* 現状は追従なしの通常表示。将来sticky/fixed化する際もこの要素だけを切り替えられるようにしている */
.rakucore-lp__topline {
  width: 100%;
  height: 6px;
  background: var(--rakucore-color-primary);
}

/* ---------------------------------
   FV
--------------------------------- */
.rakucore-lp__fv {
  position: relative;
  background: var(--rakucore-color-dark);
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

.rakucore-lp__fv-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 938;
  overflow: hidden;
}

.rakucore-lp__fv-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.rakucore-lp__fv-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
}

/*
 * PC版FVは1440px基準のFigma実測値(px)を「px ÷ 1440 × 100」でvwへ変換し、
 * 画面幅と連動して背景画像と同じ比率で拡大縮小するようにしている。
 * line-heightはできる限りunitless(font-sizeに対する比)にして、font-sizeのvwスケールに追従させる。
 */
.rakucore-lp__fv-container {
  width: 100%;
  padding: 10.2778vw 0 0;
}

.rakucore-lp__fv-content {
  margin-left: 4.1667vw; /* 60px */
  max-width: 46.6667vw; /* 672px */
}

.rakucore-lp__fv-heading {
  display: flex;
  flex-direction: column;
  gap: 1.3889vw; /* 20px */
  margin: 0 0 3.4722vw; /* 50px */
  font-size: 3.8194vw; /* 55px */
  font-weight: 700;
  line-height: 1.2;
  color: var(--rakucore-color-white);
}

.rakucore-lp__fv-service {
  margin: 0 0 4.8611vw; /* 70px */
  font-size: 4.8611vw; /* 70px */
  font-weight: 700;
  line-height: 0.7143; /* 50px / 70px */
  color: var(--rakucore-color-white);
}

.rakucore-lp__fv-description {
  margin: 0 0 6.25vw; /* 90px */
  font-size: 1.7361vw; /* 25px */
  line-height: 2; /* 50px / 25px */
  color: var(--rakucore-color-white);
}

.rakucore-lp__fv-cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

/*
 * CTAボタンが上すぎるとの指摘のため、ボタン自身の高さ分（14px×2 padding + 5px×2 border +
 * line-height50px = 88px）だけ下へ移動。直前の.rakucore-lp__fv-descriptionのmargin-bottomと
 * marginが相殺（collapse）して移動量が不定にならないよう、marginではなくpaddingで加算している。
 * 横位置・デザイン・SP版（position:absoluteで別途指定）に影響しないよう、
 * PC幅（769px以上）に限定して適用。
 */
@media (min-width: 769px) {
  .rakucore-lp__fv-cta {
    padding-top: 6.1111vw; /* 88px */
  }
}

.rakucore-lp__fv .rakucore-lp__fv-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9722vw; /* 14px */
  padding: 0.9722vw 4.1667vw; /* 14px / 60px */
  border: 0.3472vw solid var(--rakucore-color-white); /* 5px */
  border-radius: 6.9444vw; /* 100px */
  background: var(--rakucore-color-cta);
  color: var(--rakucore-color-white);
  font-size: 2.0833vw; /* 30px */
  line-height: 1.6667; /* 50px / 30px */
  transition: opacity 0.3s;
}

.rakucore-lp__fv .rakucore-lp__fv-cta-button:hover,
.rakucore-lp__fv .rakucore-lp__fv-cta-button:focus-visible,
.rakucore-lp__fv .rakucore-lp__fv-cta-button:visited {
  color: var(--rakucore-color-white);
}

.rakucore-lp__fv .rakucore-lp__fv-cta-text,
.rakucore-lp__fv .rakucore-lp__fv-cta-arrow {
  color: var(--rakucore-color-white);
}

.rakucore-lp__fv-cta-text--brand {
  font-weight: 700;
  letter-spacing: 0.0417vw; /* 0.6px */
}

.rakucore-lp__fv-cta-text--label {
  font-weight: 700;
  letter-spacing: 0.0625vw; /* 0.9px */
}

.rakucore-lp__fv-cta-arrow {
  font-weight: 900;
  letter-spacing: 0.0625vw; /* 0.9px */
}

.rakucore-lp__fv-cta-button:hover {
  opacity: 0.8;
}

.rakucore-lp__fv-cta-button:focus-visible {
  outline: 2px solid var(--rakucore-color-white);
  outline-offset: 3px;
}

/* ---------------------------------
   02_お悩み（PC版のみ）
--------------------------------- */
.rakucore-lp__problems {
  position: relative;
  background: var(--rakucore-color-white);
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

/*
 * 背景画像（problems-bg-pc.png）はFigma上の02_お悩みフレーム(1440×853)と
 * 完全に同じ比率(4320×2559 = 1440×853 の3倍)の透過PNGのため、
 * aspect-ratioで比率を固定してobject-fit: coverしてもトリミングは発生しない。
 * セクション全体の高さもこの853pxに一致させる（下記containerのpadding参照）。
 */
.rakucore-lp__problems-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1440 / 853;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.rakucore-lp__problems-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rakucore-lp__problems-inner {
  position: relative;
  z-index: 2;
}

/*
 * 上：140px（Figma実測）。下：853px（Figmaのセクション高さ）から
 * 140(上) + 50(見出し) + 90(見出し-リスト間) + 475(リスト6項目)を引いた残り98pxを基準に、
 * 実ブラウザ計測でのはみ出し分（約3px。見出しの実測行送りがline-height指定よりわずかに
 * 大きいことによる差）を差し引いた95pxに調整し、セクション総高さを背景画像(1440×853)に収めている。
 */
.rakucore-lp__problems-container {
  width: 100%;
  padding: 9.7222vw 0 6.5972vw; /* 140px / 95px */
}

.rakucore-lp__problems-content {
  width: 47.7778vw; /* 688px */
  margin: 0 auto;
}

.rakucore-lp__problems-heading {
  margin: 0 0 6.25vw; /* 90px */
  font-size: 2.4306vw; /* 35px */
  line-height: 3.4722vw; /* 50px */
  font-weight: 700;
  color: var(--rakucore-color-ink);
  text-align: center;
  letter-spacing: 0.0972vw; /* 1.4px */
}

.rakucore-lp__problems-heading-strong {
  font-size: 2.7778vw; /* 40px */
  letter-spacing: 0.1111vw; /* 1.6px */
}

.rakucore-lp__problems-list {
  display: flex;
  flex-direction: column;
  gap: 2.4306vw; /* 35px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.rakucore-lp__problems-item {
  display: flex;
  align-items: center;
  gap: 1.7361vw; /* 25px */
}

.rakucore-lp__problems-icon {
  flex: none;
  width: 3.3333vw; /* 48px */
  height: 3.3333vw; /* 48px */
}

.rakucore-lp__problems-text {
  margin: 0;
  font-size: 1.9444vw; /* 28px */
  line-height: 3.4722vw; /* 50px */
  font-weight: 700;
  color: var(--rakucore-color-ink);
  white-space: nowrap;
}

/*
 * 既存テーマ側の `.page p`（style_b.css）が margin-bottom:20px / line-height:1.7 を
 * 指定しており、詳細度（.page p = 0,1,1）がこのBEMクラス単体（0,1,0）より高いため
 * 本来のmargin/line-heightを上書きしてしまい、セクション高さが853px（Figma基準）を
 * 超えて崩れていた。PC幅に限定してセレクタの詳細度を上げ、本来の値に戻す。
 */
@media (min-width: 769px) {
  .rakucore-lp__problems-list .rakucore-lp__problems-text {
    margin: 0;
    line-height: 3.4722vw; /* 50px */
  }
}

/* ---------------------------------
   03_ベネフィット（PC版のみ）
--------------------------------- */
.rakucore-lp__benefit {
  background: #f8faff;
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

.rakucore-lp__benefit-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9.7222vw 0 5.9899vw; /* 140px / 86px（画像下の余白・Figma実測） */
}

.rakucore-lp__benefit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7778vw; /* 40px */
  width: 60.8333vw; /* 876px */
}

.rakucore-lp__benefit-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7639vw; /* 11px */
  margin: 0;
  font-size: 2.5vw; /* 36px */
  font-weight: 700;
  line-height: 3.4722vw; /* 50px */
  color: var(--rakucore-color-ink);
  text-align: center;
}

.rakucore-lp__benefit-description {
  margin: 0;
  font-size: 1.6667vw; /* 24px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため
     新規ウェイトを追加せず、視覚的に近い400（Regular）で代用している */
  font-weight: 400;
  line-height: 3.4722vw; /* 50px */
  color: var(--rakucore-color-ink);
  text-align: center;
}

/*
 * benefit-main.pngはFigma元アセットの外側透過余白を除去済みの完成画像のため、
 * Figma上のセクション高さではなく、画像自身の実比率（width基準・height:auto）で配置する。
 * margin-topは説明文からFigma上で実際に見えているグラフィックまでの距離の実測値。
 */
.rakucore-lp__benefit-visual {
  margin-top: 3.4313vw; /* 49px */
}

.rakucore-lp__benefit-image {
  width: 70.1146vw; /* 約1010px（Figma上で可視のグラフィック幅の実測） */
  height: auto;
}

/* ---------------------------------
   04_6つのコアモジュール（PC版のみ）
--------------------------------- */
.rakucore-lp__modules {
  background: var(--rakucore-color-white);
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

.rakucore-lp__modules-container {
  width: 90.9722vw; /* 1310px */
  margin: 0 auto;
  padding: 9.7222vw 0; /* 140px（Figma実測：上下とも） */
}

.rakucore-lp__modules-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1111vw; /* 16px */
  margin: 0 0 6.25vw; /* 90px（見出し〜カード群） */
  line-height: 3.4722vw; /* 50px */
  color: var(--rakucore-color-ink);
  text-align: center;
}

.rakucore-lp__modules-heading-line--normal {
  font-size: 2.4306vw; /* 35px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため、
     rakucore-lp__benefit-descriptionと同様に新規ウェイトを追加せず400で代用している */
  font-weight: 400;
}

.rakucore-lp__modules-heading-line--strong {
  font-size: 2.7778vw; /* 40px */
  font-weight: 700;
}

.rakucore-lp__modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 29.1667vw); /* 420px */
  grid-auto-rows: 29.1667vw; /* 420px */
  gap: 1.7361vw; /* 25px */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rakucore-lp__modules-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1111vw; /* 16px */
  padding: 2.7778vw 1.1111vw; /* 40px / 16px */
  background: #f8faff;
  border-radius: 0.3472vw; /* 5px */
  box-shadow: 0.4167vw 0.2778vw 1.0417vw rgba(0, 0, 0, 0.1); /* 6px 4px 15px */
}

.rakucore-lp__modules-card-title {
  margin: 0;
  font-size: 2.2917vw; /* 33px */
  line-height: 3.4722vw; /* 50px */
  font-weight: 700;
  color: #0745b4;
  text-align: center;
}

.rakucore-lp__modules-card-description {
  margin: 0;
  font-size: 1.25vw; /* 18px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 700;
  color: var(--rakucore-color-ink);
  text-align: center;
}

/*
 * 6画像はFigma上の表示領域(296×198)とほぼ同じ比率(888×594、ちょうど3倍)の完成画像のため、
 * object-fitでのトリミングは行わずwidth基準・height:autoで実寸比率のまま配置する。
 */
.rakucore-lp__modules-card-image {
  width: 20.5556vw; /* 296px */
  height: auto;
}

/* ---------------------------------
   05_業務がつながるから、二重入力がなくなる。（PC版のみ）
--------------------------------- */
.rakucore-lp__workflow {
  background: #f8faff;
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

.rakucore-lp__workflow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.1667vw; /* 60px（見出しブロック+上段カード → 中見出し → 下段カード、いずれもFigma実測60px） */
  width: 100%;
  padding: 9.7222vw 0; /* 140px（Figma実測：上下とも） */
}

.rakucore-lp__workflow-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.25vw; /* 90px（見出しブロック → 上段カード） */
  width: 100%;
}

.rakucore-lp__workflow-heading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7778vw; /* 40px */
  width: 73.0556vw; /* 1052px */
}

.rakucore-lp__workflow-heading {
  margin: 0;
  font-size: 2.7778vw; /* 40px */
  font-weight: 700;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
  text-align: center;
}

.rakucore-lp__workflow-lead {
  margin: 0;
  font-size: 1.6667vw; /* 24px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため
     rakucore-lp__benefit-descriptionと同様に新規ウェイトを追加せず400で代用している */
  font-weight: 400;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
  text-align: center;
}

.rakucore-lp__workflow-cards {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1111vw; /* 16px（Figma実測：カード間隔） */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rakucore-lp__workflow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20.8333vw; /* 300px */
  height: 32.5694vw; /* 469px（get_metadata実測：カード固定高さ） */
  padding-top: 1.5278vw; /* 22px（get_metadata実測） */
  gap: 1.7361vw; /* 25px */
  background: #fff;
  border: 0.1389vw solid #0745b4; /* 2px */
  border-radius: 0.3472vw; /* 5px */
  box-shadow: 0.2083vw 0.2778vw 0.5208vw rgba(102, 102, 104, 0.15); /* 3px 4px 7.5px */
}

.rakucore-lp__workflow-card-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5556vw; /* 80px */
  height: 5.5556vw; /* 80px */
  border-radius: 50%;
  background: #0745b4; /* Ellipse 8（Figma実測）のfill色 */
  font-size: 2.7778vw; /* 40px */
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.rakucore-lp__workflow-card-title {
  margin: 0;
  font-size: 2.2917vw; /* 33px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 700;
  color: #0745b4;
  text-align: center;
}

/*
 * 6画像は実寸比率が異なる完成画像でトリミングできないため、各カードとも
 * width基準・height:autoで実比率のまま表示し、position:absoluteでカード内の
 * 縦位置を個別指定している（in-flowの番号・タイトルの位置には影響しない）。
 * サイズ・位置は指示に基づく調整値：
 *   ①受注確定：カード下端から65px（1440px基準）の位置に配置
 *   ②〜④：①の画像と天地中央（垂直中心）を揃えて配置
 * いずれも従来表示の90%サイズに縮小（縦横比は維持）。
 */
.rakucore-lp__workflow-card-image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
}

.rakucore-lp__workflow-card--1 .rakucore-lp__workflow-card-image {
  width: 15.625vw; /* 225px（従来250pxの90%） */
  bottom: 4.5139vw; /* 65px：カード下端からの距離 */
}

.rakucore-lp__workflow-card--2 .rakucore-lp__workflow-card-image {
  width: 18.75vw; /* 270px（従来300pxの90%） */
  bottom: 6.1658vw; /* 88.79px：①画像との垂直中心を揃えた位置 */
}

.rakucore-lp__workflow-card--3 .rakucore-lp__workflow-card-image {
  width: 18.75vw; /* 270px（従来300pxの90%） */
  bottom: 6.5845vw; /* 94.82px：①画像との垂直中心を揃えた位置 */
}

.rakucore-lp__workflow-card--4 .rakucore-lp__workflow-card-image {
  width: 18.75vw; /* 270px（従来300pxの90%） */
  bottom: 6.5498vw; /* 94.32px：①画像との垂直中心を揃えた位置 */
}

.rakucore-lp__workflow-subheading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.875vw; /* 27px */
  width: 100%;
}

.rakucore-lp__workflow-subheading-line {
  flex: none;
  width: 15.9028vw; /* 229px */
  height: 0.0694vw; /* 1px */
  background: #b9cef3; /* Line 1（Figma実測）のstroke色 */
}

.rakucore-lp__workflow-subheading-text {
  margin: 0;
  font-size: 2.0833vw; /* 30px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 700;
  letter-spacing: 0.1042vw; /* 1.5px */
  color: var(--rakucore-color-ink);
  text-align: center;
  white-space: nowrap;
}

.rakucore-lp__workflow-related {
  display: flex;
  justify-content: center;
  gap: 2.0833vw; /* 30px（2枚の間隔） */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rakucore-lp__workflow-related-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 31.9444vw; /* 460px */
  padding: 1.5278vw 0 1.25vw; /* 22px top / 18px bottom（Figma実測：高さ185pxに近似） */
  gap: 0.9722vw; /* 14px */
  background: #fff;
  border-radius: 0.3472vw; /* 5px */
  box-shadow: 0.2778vw 0.2778vw 0.6944vw rgba(0, 0, 0, 0.15); /* 4px 4px 10px */
}

.rakucore-lp__workflow-related-labels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.0833vw; /* 30px */
}

.rakucore-lp__workflow-related-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.0833vw; /* 0 30px */
  border: 0.0694vw solid rgba(7, 69, 180, 0.18); /* 1px */
  border-radius: 6.9444vw; /* 100px */
  font-size: 1.25vw; /* 18px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 700;
  color: #0745b4;
  white-space: nowrap;
}

.rakucore-lp__workflow-related-pill--sm {
  font-size: 1.1111vw; /* 16px（「売上データを自動反映」のみFigma実測16px） */
}

/*
 * 下段2画像もFigma上の表示領域(392×139)とは実寸比率が異なる完成画像のため、
 * トリミングせずwidth基準・height:autoで実比率のまま配置している。
 */
.rakucore-lp__workflow-related-image {
  width: 22.05vw; /* 317.52px（352.8pxのさらに90%） */
  height: auto;
}

/* ---------------------------------
   06_12のAI機能（PC版のみ）
--------------------------------- */
.rakucore-lp__ai-features {
  position: relative;
  background: var(--rakucore-color-white);
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

/*
 * ai-features-bg-pc.pngはFigma上の06_12のAI機能フレーム(1440×1467)と
 * ほぼ同じ比率(4320×4401 = 1440×1467の3倍)の完成画像。
 * ただし実際のコンテンツ高さ(140+1011+60+136+140=1487px)はFigma上の
 * フレーム高さ(1467px)よりわずかに大きいため、aspect-ratioではなく
 * セクションの実高さいっぱい(height:100%)にobject-fit:coverで敷き詰め、
 * 四隅の装飾がずれないようにしている（差は約20px＝1.4%で視認上問題なし）。
 */
.rakucore-lp__ai-features-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.rakucore-lp__ai-features-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.rakucore-lp__ai-features-inner {
  position: relative;
  z-index: 2;
}

.rakucore-lp__ai-features-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.1667vw; /* 60px（6カード → その他AI機能、Figma実測） */
  width: 100%;
  padding: 9.7222vw 0; /* 140px（Figma実測：上下とも） */
}

.rakucore-lp__ai-features-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.25vw; /* 90px（見出しブロック → 6カード） */
  width: 100%;
}

.rakucore-lp__ai-features-heading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7778vw; /* 40px */
  width: 61.5278vw; /* 886px */
  color: var(--rakucore-color-ink);
  text-align: center;
}

.rakucore-lp__ai-features-heading {
  margin: 0;
  font-size: 2.7778vw; /* 40px */
  font-weight: 700;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
}

.rakucore-lp__ai-features-lead {
  margin: 0;
  font-size: 1.6667vw; /* 24px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため
     rakucore-lp__benefit-descriptionと同様に新規ウェイトを追加せず400で代用している */
  font-weight: 400;
  line-height: 2.7778vw; /* 40px */
  color: var(--rakucore-color-ink);
}

.rakucore-lp__ai-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 31.25vw); /* 450px */
  grid-auto-rows: 26.1806vw; /* 377px */
  column-gap: 1.1111vw; /* 16px（Figma実測：カード横間隔） */
  row-gap: 1.1806vw; /* 17px（Figma実測：段間） */
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * get_metadata実測：カード内は「上部220px固定 + gap25px + 区切り線 + gap25px + 下部38px固定」
 * で構成され、この合計(220+25+25+38=308)と上下パディング(34.5px×2=69)を足すと
 * ちょうどカード高さ377pxに一致する。上部ブロックの高さを固定することで、
 * タイトルが1行/2行いずれでも区切り線・下部行の位置が6カードで揃う。
 * 枠線グラデーション：Figmaのstroke設定はLinear Gradient・#0745b4(0%)→
 * #00bcd7(100%)の単純な2stopのみ（中間stopなし）。「色がランダムに入って
 * 見える」印象は多段stopではなく斜め方向のgradientTransformによるもののため、
 * 多段stopでの近似はせず、実際のgradientTransform
 * [[0.6037946,0.5503803,-0.0293906],[-0.5503803,0.3652584,0.5713766]]を
 * カード実寸450×377（6カード共通）に適用して求めた実角度（約52.6°、
 * 左下寄りは濃紺、右上寄りはシアンが強く出る向き）をそのまま数値角度で
 * 指定し、四辺での青・シアンの出方をFigmaに合わせている。
 */
.rakucore-lp__ai-features-card {
  display: flex;
  flex-direction: column;
  gap: 1.7361vw; /* 25px */
  padding: 2.3958vw 2.4306vw; /* 34.5px / 35px（get_metadata実測） */
  border: 0.3472vw solid transparent; /* 5px */
  border-radius: 0.3472vw; /* 5px */
  background:
    linear-gradient(#01194a, #01194a) padding-box,
    linear-gradient(52.6deg, #0745b4 0%, #00bcd7 100%) border-box;
}

.rakucore-lp__ai-features-card-top {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 1.25vw; /* 18px */
  width: 100%;
  height: 15.2778vw; /* 220px（get_metadata実測：固定） */
}

/*
 * 6アイコンはPC/SP共通の完成画像（正方形255×255）。Figma上は各カードで
 * 個別サイズのラフ配置になっているが、実際の見た目（スクリーンショット）は
 * どのカードも同じ「アイコン枠(85×85)」に揃っているため、その枠サイズ・位置
 * （カード内の左上・タイトル行と横並び）を基準にCSSで統一配置している。
 */
.rakucore-lp__ai-features-icon {
  flex: none;
  width: 5.9028vw; /* 85px */
  height: 5.9028vw; /* 85px */
}

.rakucore-lp__ai-features-card-text {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 1.3889vw; /* 20px */
  width: 19.1667vw; /* 276px（get_metadata実測：固定幅） */
}

/*
 * タイトルはget_metadata実測で高さ80px固定（1行/2行どちらでも同じ高さを確保）。
 * これにより説明文は常にタイトル開始位置から100px後ろで始まり、6カードで揃う。
 * 幅もFigma実測(289px)は説明文(276px)よりわずかに広く、余白側にはみ出しており、
 * 同じ余裕がないと「AIキャッシュフロー予測」の「ー」だけ次行に押し出されるため、
 * 右方向にわずかな負のmarginで同じ余白を再現している。
 */
.rakucore-lp__ai-features-card-title {
  flex: none;
  margin: 0 -0.9028vw 0 0; /* 13px（Figma実測：タイトル幅289px - 説明文幅276px） */
  height: 5.5556vw; /* 80px（get_metadata実測：固定） */
  font-size: 2.0833vw; /* 30px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 700;
  letter-spacing: 0.1042vw; /* 1.5px */
  color: #fff;
}

.rakucore-lp__ai-features-description {
  margin: 0;
  font-size: 1.25vw; /* 18px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 400;
  color: #fff;
}

/* 区切り線：Figma実測（stroke #fff・opacity 1・幅1px）どおり不透明白で再現 */
.rakucore-lp__ai-features-divider {
  display: block;
  flex: none;
  width: 100%;
  height: 0;
  border-top: 0.0694vw solid #fff; /* 1px */
}

.rakucore-lp__ai-features-card-bottom {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6944vw; /* 10px */
  height: 2.6389vw; /* 38px（get_metadata実測：固定） */
}

.rakucore-lp__ai-features-check {
  flex: none;
  width: 2.6389vw; /* 38px */
  height: 2.6389vw; /* 38px */
}

.rakucore-lp__ai-features-result {
  margin: 0;
  font-size: 1.25vw; /* 18px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため
     他セクション同様に新規ウェイトを追加せず400で代用している */
  font-weight: 400;
  line-height: 2.0833vw; /* 30px */
  color: #fff;
  white-space: nowrap;
}

.rakucore-lp__ai-features-other {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.0833vw; /* 30px（見出し → 6ボタン） */
  width: 92.9861vw; /* 1339px */
}

.rakucore-lp__ai-features-other-heading {
  margin: 0;
  font-size: 2.0833vw; /* 30px */
  /* Figma指定はfont-weight:900(Black)だが、既存テーマにBlackウェイトの読み込みがないため
     700（Bold）で代用している */
  font-weight: 700;
  line-height: 2.0833vw; /* 30px */
  letter-spacing: 0.1042vw; /* 1.5px */
  color: var(--rakucore-color-ink);
  text-align: center;
}

/*
 * 既存テーマ側の `.page p`（style_b.css）が margin-bottom:20px を指定しており、
 * 詳細度（.page p = 0,1,1）がこのBEMクラス単体（0,1,0）より高いため margin:0の指定が
 * 上書きされ、見出し下に意図しない20pxの余白（＋親.rakucore-lp__ai-features-otherの
 * gap:30px）が生まれ、6ボタン群が余分に押し下げられていた。PC幅に限定してセレクタの
 * 詳細度を上げ、本来のmargin:0に戻す（見出し文字位置・横位置・ボタン自体は変更しない）。
 */
@media (min-width: 769px) {
  .rakucore-lp__ai-features-other .rakucore-lp__ai-features-other-heading {
    margin-bottom: 0;
  }
}

.rakucore-lp__ai-features-other-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9722vw; /* 14px（Figma実測：ボタン間隔） */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * 枠線グラデーション：Figma実測どおり#0745b4(0%)→#00bcd7(100%)の単純な2stop、
 * 角度は約132.3deg（Figma上のgradient transformをCSS角度換算した実測値）を
 * 6ボタン共通で使用する。ボタンごとに角度やstopを変えているわけではなく、
 * 同一のgradientを幅169〜245pxと異なる横幅のボタンに適用することで、
 * Figmaと同様にボタンごとの青・シアンの見え方が自然に変わる。
 */
.rakucore-lp__ai-features-other-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.3889vw 2.0833vw; /* 20px 30px */
  border: 0.22vw solid transparent; /* 3px相当（vw換算の丸め誤差を見込みブラウザ実測3pxになる値を使用） */
  border-radius: 0.3472vw; /* 5px */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(132.3deg, #0745b4 0%, #00bcd7 100%) border-box;
  font-size: 1.7361vw; /* 25px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 700;
  letter-spacing: 0.0521vw; /* 0.75px */
  color: var(--rakucore-color-ink);
  white-space: nowrap;
}

/* ---------------------------------
   07_このような企業におすすめです（PC版のみ）
--------------------------------- */
/*
 * Figma上のセクション外枠(node 2023:6860)はwidth1440×height1067。
 * セクション自体にFigma実測の設計高さ(1067px＝1067/1440×100vw)を
 * min-heightとして持たせることで、コンテンツ量に関わらずセクション全体の
 * 高さがFigma基準に一致し、次セクションもこの位置から開始する。
 */
.rakucore-lp__recommend {
  position: relative;
  min-height: 74.0972vw; /* 1067px（Figma実測：セクション外枠高さ） */
  background: var(--rakucore-color-white);
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

/*
 * recommend-bg-pc.pngはFigma上のセクション外枠(1440×1067、左下の回路状
 * 装飾まで含む完成版)と完全に同じ比率(4320×3201 = 1440×1067の3倍)のため、
 * aspect-ratioをセクションと同じ1440/1067にしてinset:0で敷き詰めれば、
 * トリミングなしにセクション全体（min-heightと同じ高さ）にぴったり収まる。
 */
.rakucore-lp__recommend-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  aspect-ratio: 1440 / 1067;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.rakucore-lp__recommend-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rakucore-lp__recommend-inner {
  position: relative;
  z-index: 2;
}

/*
 * 左ブロック(x:181.5/w:391) と右ブロック(x:672.5/w:586)はFigma実測で
 * 左右余白がともに181.5pxの完全な左右対称（391+100+586=1077、
 * (1440-1077)/2=181.5）のため、コンテナ幅1077pxを中央寄せし、
 * 間隔100pxをgapで表現することでFigmaの絶対座標と一致させている。
 * 上下パディングは140px（Figma実測）で、左右ブロックの高さの違い
 * （右ブロック714px・左ブロックは内容量約220px）に関わらず
 * セクション総高さは背景画像基準の994pxに一致する。
 */
.rakucore-lp__recommend-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6.9444vw; /* 100px */
  width: 74.7917vw; /* 1077px */
  margin: 0 auto;
  padding: 9.7222vw 0; /* 140px（Figma実測：上下とも） */
}

.rakucore-lp__recommend-intro {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 2.7778vw; /* 40px（Figma実測：見出し→説明文） */
  width: 27.1528vw; /* 391px */
}

.rakucore-lp__recommend-heading {
  margin: 0;
  font-size: 2.7778vw; /* 40px */
  font-weight: 700;
  line-height: 3.8194vw; /* 55px */
  color: var(--rakucore-color-ink);
}

.rakucore-lp__recommend-description {
  margin: 0;
  font-size: 1.6667vw; /* 24px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため
     他セクション同様に新規ウェイトを追加せず400で代用している */
  font-weight: 400;
  line-height: 2.4306vw; /* 35px */
  color: var(--rakucore-color-ink);
}

/*
 * 右ブロックはFigma実測で「項目(高さ111px) + gap45px + 区切り線 + gap45px」の
 * 繰り返し（01 top:0 / 区切り線1:156px / 02 top:201px … の実測差分と一致）。
 * gap:45pxを列全体に適用し、区切り線をその間に挟むことで実測どおりのリズムを再現している。
 */
.rakucore-lp__recommend-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
  gap: 3.125vw; /* 45px */
  width: 40.6944vw; /* 586px */
}

/*
 * 項目の高さはタイトル(30px)+gap(21px)+説明文2行(60px)=111pxで、
 * 番号SVGの高さ(111px)と一致する。テキスト量に関わらず111px固定にすることで、
 * 区切り線・次項目の位置が実測どおりに揃うようにしている。
 */
.rakucore-lp__recommend-item {
  display: flex;
  align-items: flex-start;
  flex: none;
  gap: 2.0833vw; /* 30px（Figma実測：番号→テキスト） */
  width: 100%;
  height: 7.7083vw; /* 111px */
}

/*
 * 01〜04はFigma上「fill:transparent + グラデーションstroke」という
 * CSSでは再現できない特殊文字表現のため、書き出し済みのSVG（recommend-0X.svg）を
 * そのまま表示する。widthは指定せずheight基準（各SVGの実寸比率）で配置している。
 */
.rakucore-lp__recommend-number {
  flex: none;
  width: auto;
  height: 100%;
}

.rakucore-lp__recommend-item-body {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 1.4583vw; /* 21px */
  width: 31.25vw; /* 450px */
}

.rakucore-lp__recommend-title {
  margin: 0;
  font-size: 2.0833vw; /* 30px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 700;
  color: #0745b4;
  white-space: nowrap;
}

.rakucore-lp__recommend-text {
  margin: 0;
  width: 27.4306vw; /* 395px（Figma実測：説明文のみ本文幅より狭い） */
  font-size: 1.3889vw; /* 20px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 400;
  color: var(--rakucore-color-ink);
}

/*
 * 区切り線：画像ではなくCSSで実装。Figma実測はstroke=Linear Gradient
 * (#0745b4 0% → #00bcd7 100%)・opacity 0.3・幅571px・高さ1px。
 */
.rakucore-lp__recommend-divider {
  display: block;
  flex: none;
  width: 39.6528vw; /* 571px */
  height: 0.0694vw; /* 1px */
  background: linear-gradient(90deg, #0745b4 0%, #00bcd7 100%);
  opacity: 0.3;
}

/* ---------------------------------
   08_料金プラン（PC版のみ）
--------------------------------- */
/*
 * Figma上のセクション実測値：外枠1440×1810。
 * 内部フレーム(node 1:5835)はx=120/y=-65/1200×1876だが、これは元デザインに
 * 後からセクション外枠(1440×1810)を追加した際の名残で、上端65pxが
 * 外枠からはみ出して隠れている（1876-65=1811≒1810で下端はほぼ一致）。
 * そのためy=-65はそのまま再現せず、内部フレームの各要素のy座標から65pxを引いた
 * 値をセクション基準の実位置として採用している
 * （見出し75/カード265/表977/CTA1583、各ブロック間は一律90pxで揃う）。
 */
.rakucore-lp__pricing {
  position: relative;
  min-height: 125.6944vw; /* 1810px（Figma実測：セクション外枠高さ） */
  background: #ffffff; /* テーマ側article{background:#f5f5f5}等のグローバル指定を打ち消すための明示指定 */
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

.rakucore-lp__pricing-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.25vw; /* 90px（見出し→カード、カード→表、表→CTA、いずれも実測90px） */
  width: 83.3333vw; /* 1200px */
  min-height: 100%;
  margin: 0 auto;
  padding: 5.2083vw 0 9.6528vw; /* 75px（上） / 139px（下）：実測値 */
}

.rakucore-lp__pricing-heading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7778vw; /* 40px */
  max-width: 50.5556vw; /* 728px */
  text-align: center;
}

.rakucore-lp__pricing-heading {
  margin: 0;
  font-size: 2.7778vw; /* 40px */
  font-weight: 700;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
}

.rakucore-lp__pricing-lead {
  margin: 0;
  font-size: 1.6667vw; /* 24px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため
     他セクション同様に新規ウェイトを追加せず400で代用している */
  font-weight: 400;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
}

/*
 * カードはFigma実測で高さ622px固定（内容の実高さ450px＋余白）。
 * justify-content:centerで縦中央に配置することでFigmaの見た目（中央寄せ）を再現している。
 */
/*
 * 枠線グラデーション：border-imageは角丸との相性が悪いため、
 * transparent border + background の2層方式（padding-box/border-box）で実装。
 * Figmaのstroke align=INSIDEはborder-box指定で内側収まりを再現している。
 * 角度はFigma実測のgradientTransform([[0.6037946,0.5503803,-0.0293906],
 * [-0.5503803,0.3652584,0.5713766]])の方向ベクトル(a,c)=(0.6037946,-0.5503803)を
 * カード実寸1200×622（rakucore-lp__ai-features-cardと同じ行列だが本カードは
 * 実寸比率が異なるため角度も異なる）に適用して求めた実角度64.7°を使用。
 */
.rakucore-lp__pricing-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.1667vw; /* 60px */
  width: 100%;
  height: 43.1944vw; /* 622px（Figma実測：固定） */
  padding: 0 13.8889vw; /* 200px（左右） */
  border: 0.4167vw solid transparent; /* 6px */
  border-radius: 2.0833vw; /* 30px */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(64.7deg, #0745b4 0%, #00bcd7 100%) border-box;
}

.rakucore-lp__pricing-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.0833vw; /* 30px */
  text-align: center;
}

.rakucore-lp__pricing-card-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3889vw; /* 20px */
}

.rakucore-lp__pricing-card-badge {
  margin: 0;
  font-size: 1.3889vw; /* 20px */
  font-weight: 700;
  line-height: 2.0833vw; /* 30px */
  color: #0745b4;
}

.rakucore-lp__pricing-card-title {
  margin: 0;
  font-size: 2.4306vw; /* 35px */
  font-weight: 700;
  line-height: 2.0833vw; /* 30px */
  letter-spacing: 0.1458vw; /* 2.1px */
  color: #0745b4;
}

/*
 * SP版でbrによる強制改行をやめ自然な折り返しに変更したため、PC側も同じ1つの
 * 段落として自然折り返しさせる。max-width:560pxはFigma通りの2行（「...ご提案
 * いたします。」／「全機能を...」）になる幅を実測して指定している。
 */
.rakucore-lp__pricing-card-description {
  margin: 0;
  max-width: 38.8889vw; /* 560px */
  font-size: 1.25vw; /* 18px */
  font-weight: 400;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
}

.rakucore-lp__pricing-features {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3.125vw; /* 45px */
  width: 100%;
}

.rakucore-lp__pricing-features-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.3889vw; /* 20px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.rakucore-lp__pricing-feature {
  display: flex;
  align-items: center;
  gap: 0.3472vw; /* 5px */
}

/* チェックアイコンはai-features-check.svg（既存素材）を40×40基準で再利用 */
.rakucore-lp__pricing-feature-icon {
  flex: none;
  width: 2.7778vw; /* 40px */
  height: 2.7778vw; /* 40px */
}

.rakucore-lp__pricing-feature-text {
  font-size: 1.3889vw; /* 20px */
  font-weight: 400;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
  white-space: nowrap;
}

.rakucore-lp__pricing-fee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7778vw; /* 40px */
  width: 100%;
}

.rakucore-lp__pricing-fee-heading {
  margin: 0;
  font-size: 2.0833vw; /* 30px */
  font-weight: 700;
  line-height: 2.5vw; /* 36px */
  color: var(--rakucore-color-ink);
  text-align: center;
}

/*
 * 外枠線はtable/セル側では表現せず、ラッパー自身のborderで持たせる。
 * borderはラッパー自身のborder-radiusに沿って角丸に描画されるため、
 * 四隅でも途切れず連続した1本の枠線になる（table側のセル罫線をclipで
 * 角丸にする方式は、直角のセル罫線がclip境界で途切れて見えるため不採用）。
 */
.rakucore-lp__pricing-fee-table-wrap {
  box-sizing: border-box;
  width: 80vw; /* 1152px */
  margin: 0 auto;
  border: 0.0694vw solid #d9d9d9; /* 1px（Figma実測：外枠線） */
  border-radius: 1.0417vw; /* 15px */
  overflow: hidden;
}

/*
 * 外枠線をラッパー側に持たせたため、table側は内部の縦線・横線のみを担当する
 * （最初の行に上線・最初の列に左線を付けると外枠と二重線になるため除外）。
 * border-collapse:separateはborder-radius+overflow:hiddenのクリップと
 * 相性がよく、collapse時に起きる罫線のはみ出し（角の欠け）も避けられる。
 */
.rakucore-lp__pricing-fee-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.rakucore-lp__pricing-fee-table th,
.rakucore-lp__pricing-fee-table td {
  box-sizing: border-box;
  padding: 1.3889vw 0.6944vw; /* 20px / 10px */
  font-size: 1.3889vw; /* 20px */
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  color: var(--rakucore-color-ink);
}

/* 内部の横線：最初の行（見出し）以外の各行の上に1本 */
.rakucore-lp__pricing-fee-table tr:not(:first-child) th,
.rakucore-lp__pricing-fee-table tr:not(:first-child) td {
  border-top: 0.0694vw solid #d9d9d9; /* 1px */
}

/* 内部の縦線：最初の列（項目）以外の各列の左に1本 */
.rakucore-lp__pricing-fee-table th:not(:first-child),
.rakucore-lp__pricing-fee-table td:not(:first-child) {
  border-left: 0.0694vw solid #d9d9d9; /* 1px */
}

/* 列幅：項目300px / 料金250px / 内容600px（Figma実測） */
.rakucore-lp__pricing-fee-table th:nth-child(1),
.rakucore-lp__pricing-fee-table td:nth-child(1) {
  width: 20.8333vw; /* 300px */
}

.rakucore-lp__pricing-fee-table th:nth-child(2),
.rakucore-lp__pricing-fee-table td:nth-child(2) {
  width: 17.3611vw; /* 250px */
}

.rakucore-lp__pricing-fee-table th:nth-child(3),
.rakucore-lp__pricing-fee-table td:nth-child(3) {
  width: 41.6667vw; /* 600px */
}

.rakucore-lp__pricing-fee-table thead th {
  height: 5.5556vw; /* 80px */
  background: #f8faff;
  color: #000;
  border-bottom: 0.0694vw solid #d9d9d9; /* 1px（見出し行下の横罫線。tbody側の最初の行はtr:not(:first-child)の対象外のためthead側で付与） */
}

.rakucore-lp__pricing-fee-table tbody th,
.rakucore-lp__pricing-fee-table tbody td {
  height: 8.3333vw; /* 120px */
  background: var(--rakucore-color-white);
}

.rakucore-lp__pricing-fee-table tbody th {
  font-weight: 700;
  letter-spacing: 0.0417vw; /* 0.6px */
}

.rakucore-lp__pricing-fee-price-num {
  font-size: 1.7361vw; /* 25px */
  font-weight: 700;
}

.rakucore-lp__pricing-fee-price-unit {
  font-size: 1.3889vw; /* 20px */
  font-weight: 400;
}

/* CTAは既存FV CTA（.rakucore-lp__fv-cta-button）と同一の見た目・構造を流用している */
.rakucore-lp__pricing-cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

.rakucore-lp__pricing-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9722vw; /* 14px */
  padding: 0.9722vw 4.1667vw; /* 14px / 60px */
  border: 0.3472vw solid var(--rakucore-color-white); /* 5px */
  border-radius: 6.9444vw; /* 100px */
  background: var(--rakucore-color-cta);
  color: var(--rakucore-color-white);
  font-size: 2.0833vw; /* 30px */
  line-height: 1.6667; /* 50px / 30px */
  transition: opacity 0.3s;
}

.rakucore-lp__pricing-cta-button:hover,
.rakucore-lp__pricing-cta-button:focus-visible,
.rakucore-lp__pricing-cta-button:visited {
  color: var(--rakucore-color-white);
}

.rakucore-lp__pricing-cta-text,
.rakucore-lp__pricing-cta-arrow {
  color: var(--rakucore-color-white);
}

.rakucore-lp__pricing-cta-text--brand {
  font-weight: 700;
  letter-spacing: 0.0417vw; /* 0.6px */
}

.rakucore-lp__pricing-cta-text--label {
  font-weight: 700;
  letter-spacing: 0.0625vw; /* 0.9px */
}

.rakucore-lp__pricing-cta-arrow {
  font-weight: 900;
  letter-spacing: 0.0625vw; /* 0.9px */
}

.rakucore-lp__pricing-cta-button:hover {
  opacity: 0.8;
}

.rakucore-lp__pricing-cta-button:focus-visible {
  outline: 2px solid var(--rakucore-color-white);
  outline-offset: 3px;
}

/* ---------------------------------
   09_よくある質問（PC版のみ）
--------------------------------- */
.rakucore-lp__faq {
  background: #f8faff;
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

.rakucore-lp__faq-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.25vw; /* 90px（見出しブロック→FAQリスト、Figma実測） */
  padding: 9.7222vw 0; /* 140px（Figma実測：上下とも） */
}

.rakucore-lp__faq-heading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7778vw; /* 40px */
  width: 37.9167vw; /* 546px */
  text-align: center;
}

.rakucore-lp__faq-heading {
  margin: 0;
  font-size: 2.7778vw; /* 40px */
  font-weight: 700;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
}

.rakucore-lp__faq-lead {
  margin: 0;
  font-size: 1.3889vw; /* 20px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため
     他セクション同様に新規ウェイトを追加せず400で代用している */
  font-weight: 400;
  line-height: 2.7778vw; /* 40px */
  color: var(--rakucore-color-ink);
}

.rakucore-lp__faq-list {
  display: flex;
  flex-direction: column;
  gap: 2.0833vw; /* 30px（Figma実測：カード間隔） */
  width: 76.3889vw; /* 1100px */
}

.rakucore-lp__faq-item {
  width: 100%;
  padding: 3.4722vw 4.1667vw; /* 50px（上下） / 60px（左右） */
  background: #ffffff;
  border-radius: 0.3472vw; /* 5px */
}

.rakucore-lp__faq-question-heading {
  margin: 0;
}

/* Q部分全体をクリック可能にするための button。既存テーマの.accordion_header/.accordion_inner
   グローバルJSと衝突しないよう、rakucore-接頭辞の専用クラスのみを使用している。 */
.rakucore-lp__faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.7361vw; /* 25px */
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.rakucore-lp__faq-question-inner {
  display: flex;
  align-items: center;
  gap: 1.7361vw; /* 25px（Q→質問文、Figma実測） */
  min-width: 0;
}

/*
 * Q/Aは"Alte DIN 1451 Mittelschrift"がWeb環境（既存テーマのTypekitキット
 * pms3bjaは"paralucent-text"のみ配信）に存在せずCSSでは字形を再現できないため、
 * FigmaからアウトラインSVG（faq-q.svg / faq-a.svg）として書き出し画像化している。
 * サイズはSVGの元寸法（Figma上の45px文字のインク実測サイズ）をそのままvw換算。
 */
.rakucore-lp__faq-q-mark {
  flex: none;
  width: 1.8056vw; /* 26px */
  height: auto;
}

.rakucore-lp__faq-question-text {
  font-size: 1.7361vw; /* 25px */
  line-height: 2.0833vw; /* 30px */
  font-weight: 700;
  color: var(--rakucore-color-ink);
}

/*
 * ＋/－はCSS描画ではなく、Figmaと同じ「テキスト文字」として実装。
 * JS側でclick時にtextContentを＋⇔－へ差し替える（main.js参照）。
 * Figma本体にはこのアイコンのレイヤーが存在しなかったため、サイズ・フォントは
 * ユーザー指示値（Noto Sans JP Bold 25px / line-height 30px / #0745b4）をそのまま採用。
 * widthを固定し中央寄せすることで、＋/－の文字幅差によってボタン領域が変動しないようにしている。
 */
.rakucore-lp__faq-toggle {
  flex: none;
  width: 1.0417vw; /* 15px */
  height: 2.0833vw; /* 30px */
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  font-weight: 700;
  font-size: 1.7361vw; /* 25px */
  line-height: 2.0833vw; /* 30px */
  color: #0745b4;
  text-align: center;
}

/*
 * 開閉アニメーション：grid-template-rowsを0fr⇔1frで切り替える簡易手法。
 * 子要素の実高さを測るJSなしで、内容量が変わっても自然に展開・収縮できる。
 */
.rakucore-lp__faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.3s ease;
}

.rakucore-lp__faq-item.is-open .rakucore-lp__faq-panel {
  grid-template-rows: 1fr;
}

.rakucore-lp__faq-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 1.7361vw; /* 25px（区切り線→Aブロック） */
  min-height: 0;
  padding-top: 1.7361vw; /* 25px（Qブロック→区切り線） */
  overflow: hidden;
}

/* 区切り線：画像化せずCSSで実装。Figma実測 stroke #0745B4 / opacity 0.3 / 太さ1px */
.rakucore-lp__faq-divider {
  display: block;
  flex: none;
  width: 100%;
  height: 0;
  border-top: 0.0694vw solid rgba(7, 69, 180, 0.3); /* 1px */
}

.rakucore-lp__faq-answer {
  display: flex;
  align-items: flex-start;
  gap: 1.7361vw; /* 25px（A→回答文、Figma実測） */
  width: 100%;
}

.rakucore-lp__faq-a-mark {
  flex: none;
  width: 1.9444vw; /* 28px */
  height: auto;
}

.rakucore-lp__faq-answer-text {
  margin: 0;
  font-size: 1.3889vw; /* 20px */
  /* Figma指定はfont-weight:500だが、既存テーマにNoto Sans JP Mediumの読み込みがないため
     他セクション同様に新規ウェイトを追加せず400で代用している */
  font-weight: 400;
  line-height: 2.0833vw; /* 30px */
  color: var(--rakucore-color-ink);
}

/* ---------------------------------
   10_最終CTA（PC版のみ）
--------------------------------- */
.rakucore-lp__final-cta {
  position: relative;
  background: var(--rakucore-color-dark);
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

/*
 * 背景画像（final-cta-bg-pc.png）は右側の人物＋モニタービジュアルを含む完成素材。
 * Figma実測(1440×752)の比率でaspect-ratioを固定し、object-fit: coverで
 * 画面幅に応じて背景と左側テキスト・CTAが同じ比率で拡大縮小するようにしている。
 * トリミング・加工はせずそのまま使用。
 */
.rakucore-lp__final-cta-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 752;
  overflow: hidden;
}

.rakucore-lp__final-cta-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rakucore-lp__final-cta-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
}

/*
 * 左側コンテンツ枠（Figmaノード1:6008: x=156 / width=700）を
 * 1440px基準のvw換算で再現。右側ビジュアルはHTML側では作らず背景画像に委ねる。
 */
.rakucore-lp__final-cta-content {
  margin-left: 5.7639vw; /* 83px */
  width: 48.6111vw; /* 700px */
  padding-top: 9.7222vw; /* 140px */
}

.rakucore-lp__final-cta-heading {
  margin: 0 0 3.125vw; /* 45px */
  font-size: 3.4722vw; /* 50px */
  line-height: 1.5; /* 75px / 50px */
  font-weight: 700;
  color: var(--rakucore-color-white);
}

.rakucore-lp__final-cta-heading-brand {
  letter-spacing: 0.0333vw; /* 0.48px */
}

.rakucore-lp__final-cta-description {
  width: 39.7222vw; /* 572px */
  margin: 0 0 6.25vw; /* 90px */
  font-size: 1.6667vw; /* 24px */
  line-height: 2.0833; /* 50px / 24px */
  font-weight: 700;
  color: var(--rakucore-color-white);
}

/*
 * CTAボタンが上すぎるとの指摘のため、ボタン自身の高さ分（14px×2 padding + 5px×2 border +
 * line-height50px = 88px）だけ下へ移動。直前の.rakucore-lp__final-cta-descriptionの
 * margin-bottomとmarginが相殺（collapse）して移動量が不定にならないよう、marginではなく
 * paddingで加算している。SP版は.rakucore-lp__final-cta-actionを別途display:flexで
 * 上書きしているため、PC幅（769px以上）に限定して適用。
 */
@media (min-width: 769px) {
  .rakucore-lp__final-cta-action {
    padding-top: 6.1111vw; /* 88px */
  }
}

/* CTAは既存FV CTA（.rakucore-lp__fv-cta-button）と同一の見た目・構造を流用している */
.rakucore-lp__final-cta .rakucore-lp__final-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9722vw; /* 14px */
  padding: 0.9722vw 4.1667vw; /* 14px / 60px */
  border: 0.3472vw solid var(--rakucore-color-white); /* 5px */
  border-radius: 6.9444vw; /* 100px */
  background: var(--rakucore-color-cta);
  color: var(--rakucore-color-white);
  font-size: 2.0833vw; /* 30px */
  line-height: 1.6667; /* 50px / 30px */
  transition: opacity 0.3s;
}

.rakucore-lp__final-cta .rakucore-lp__final-cta-button:hover,
.rakucore-lp__final-cta .rakucore-lp__final-cta-button:focus-visible,
.rakucore-lp__final-cta .rakucore-lp__final-cta-button:visited {
  color: var(--rakucore-color-white);
}

.rakucore-lp__final-cta-button-text,
.rakucore-lp__final-cta-button-arrow {
  color: var(--rakucore-color-white);
  letter-spacing: 0.0625vw; /* 0.9px */
}

.rakucore-lp__final-cta-button-text {
  font-weight: 700;
}

.rakucore-lp__final-cta-button-arrow {
  font-weight: 900;
}

.rakucore-lp__final-cta-button:hover {
  opacity: 0.8;
}

.rakucore-lp__final-cta-button:focus-visible {
  outline: 2px solid var(--rakucore-color-white);
  outline-offset: 3px;
}

/* ===================================
   SP（max-width: 768px）
   IMPLEMENTATION.mdのSP実装ルールに準拠。
   基準幅390pxのFigma実測値(px)を「px ÷ 390 × 100」でvwへ変換し、
   390px未満でも同じ比率で縮小表示されるようにしている。
   375px/360px専用の個別調整は行わない。
=================================== */

/* ---------------------------------
   01_FV（SP）
--------------------------------- */
@media (max-width: 768px) {
  .rakucore-lp__fv-visual {
    aspect-ratio: 1170 / 1887; /* fv-main-sp.png の実寸比率 */
  }

  .rakucore-lp__fv .rakucore-lp__fv-image {
    display: none;
  }

  .rakucore-lp__fv-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/rakucore/fv/fv-main-sp.png");
    background-size: cover;
    background-position: top center;
  }

  .rakucore-lp__fv-inner {
    display: block;
  }

  .rakucore-lp__fv-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rakucore-lp__fv-content {
    position: absolute;
    left: 10.2564vw; /* 40px */
    top: 13.5385vw; /* 52.8px */
    max-width: 59.8077vw; /* 233.25px */
    margin: 0;
  }

  .rakucore-lp__fv-heading {
    gap: 1.7949vw; /* 7px */
    margin: 0 0 2.2564vw; /* 8.8px */
    font-size: 5.6410vw; /* 22px */
    line-height: 1.3;
  }

  .rakucore-lp__fv-service {
    margin: 0 0 2.2564vw; /* 8.8px */
    font-size: 6.7692vw; /* 26.4px */
    line-height: 1.6667; /* 44px / 26.4px */
  }

  .rakucore-lp__fv-description {
    max-width: 54.1667vw; /* 211.25px */
    margin: 0;
    font-size: 3.1538vw; /* 12.3px */
    line-height: 2.1463; /* 26.4px / 12.3px */
  }

  /* PC用の改行位置(br)を無効化し、SP幅で自然に折り返す */
  .rakucore-lp__fv-description br {
    display: none;
  }

  .rakucore-lp__fv-cta {
    position: absolute;
    left: 10.2564vw; /* 40px */
    top: 85.99%; /* 540.88px / 629px */
    right: 10.2564vw; /* 40px */
    width: auto;
  }

  .rakucore-lp__fv .rakucore-lp__fv-cta-button {
    width: 100%;
    gap: 1.5385vw; /* 6px */
    padding: 2.0513vw 4.1026vw; /* 8px / 16px */
    border-width: 0.6769vw; /* 2.64px（1.76pxの1.5倍） */
    border-radius: 999px;
    font-size: 3.6103vw; /* 14.08px */
    line-height: 1.3;
  }
}

/* ---------------------------------
   02_お悩み（SP）
--------------------------------- */
@media (max-width: 768px) {
  .rakucore-lp__problems-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .rakucore-lp__problems .rakucore-lp__problems-image {
    display: none;
  }

  .rakucore-lp__problems-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/rakucore/problems/problems-bg-sp.png");
    /*
     * coverだと画像比率(1170:1393)とセクション比率(390:379)の差でトリミングされるため使用しない。
     * このvisual要素自体が.rakucore-lp__problems（position:relative）にinset:0で
     * 完全一致しており、セクションが390×379のときvisualも390×379になる。
     * 100% 100%指定でその全面に画像全体をトリミングなく表示する。
     */
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .rakucore-lp__problems-container {
    /*
     * セクション総高さ390px幅で379pxに固定。
     * 上：52.812px（Figma実測のFrame65 padding-top）。
     * 下：66.386px。見出し-リスト間の余白を17px拡大した分を差し引き、
     * 合計（52.812 + 44.01 + 25.802 + 166.485 + 23.505 + 66.386）が379pxになるよう調整。
     */
    padding: 13.5415vw 0 17.0221vw; /* 52.812px / 66.386px */
  }

  .rakucore-lp__problems-content {
    width: 88.0195vw; /* 343.276px */
  }

  .rakucore-lp__problems-heading {
    margin: 0 0 6.6159vw; /* 25.802px（Figma見比べで見出し-リスト間を拡大） */
    font-size: 3.6110vw; /* 14.083px */
    line-height: 11.2846vw; /* 44.01px（Figma実測どおりの行高。テキストはこの行内で縦中央になる） */
    letter-spacing: normal;
  }

  .rakucore-lp__problems-heading-strong {
    font-size: 4.0621vw; /* 15.844px */
    letter-spacing: normal;
  }

  .rakucore-lp__problems-list {
    width: 65.2249vw; /* 254.377px */
    margin: 0 auto;
    gap: 3.7700vw; /* 14.703px（アイコン15.495px + このgapで縦ピッチ約30.2pxを再現） */
    padding-bottom: 6.0269vw; /* 23.505px。最終項目の下の余白（Figmaでは最終項目のみ行間が詰められていないため生じる） */
  }

  .rakucore-lp__problems-item {
    gap: 0.9933vw; /* 3.874px */
  }

  .rakucore-lp__problems-icon {
    width: 3.9731vw; /* 15.495px */
    height: 3.9731vw; /* 15.495px */
  }

  .rakucore-lp__problems-text {
    font-size: 2.3846vw; /* 9.3px */
    line-height: 1.3;
  }

  /*
   * PC版と同じ理由（既存テーマ`.page p`のmargin-bottom:20px/line-height:1.7が
   * 詳細度で上書きしてしまう）がSP版でも起きており、テキストのmargin-bottomが
   * チェックアイコンとの縦位置ズレ・行間の間延びの原因になっている。
   * PC版同様セレクタの詳細度を上げてmarginを打ち消す。
   */
  .rakucore-lp__problems-list .rakucore-lp__problems-text {
    margin: 0;
  }
}

/* ---------------------------------
   03_ベネフィット（SP）
--------------------------------- */
@media (max-width: 768px) {
  .rakucore-lp__benefit-container {
    padding: 13.5385vw 0 6.7692vw; /* 52.8px / 26.4px */
  }

  .rakucore-lp__benefit-content {
    gap: 4.5128vw; /* 17.6px */
    width: 65.6769vw; /* 256.14px */
  }

  .rakucore-lp__benefit-heading {
    gap: 0;
    font-size: 4.0626vw; /* 15.844px */
    line-height: 6.7708vw; /* 26.406px */
  }

  .rakucore-lp__benefit-description {
    font-size: 2.7082vw; /* 10.562px */
    line-height: 4.5138vw; /* 17.604px */
  }

  /*
   * benefit-main.pngは透過PNGで画像自体に背景色は含まれていない。
   * 画像は85%に縮小するが、画像を包む表示エリア自体はFigma実測の
   * 390×300.86px（aspect-ratio 350/270）を維持し、その中で85%画像を
   * flexで中央配置する（＝「画像を縮める」≠「表示エリアを縮める」）。
   * これによりセクション全体の高さがFigma仕様の約569.88pxに保たれる。
   * ラッパーの背景はtransparentにし、セクション背景#f8faffがそのまま見える状態にする。
   */
  .rakucore-lp__benefit-visual {
    width: 100%;
    aspect-ratio: 350 / 270; /* 約300.86px（Figma実測の画像表示エリア高さ） */
    margin-top: 3.3846vw; /* 13.2px */
    position: relative;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rakucore-lp__benefit-visual .rakucore-lp__benefit-image {
    width: 85%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/* ---------------------------------
   04_6つのコアモジュール（SP）
--------------------------------- */
@media (max-width: 768px) {
  .rakucore-lp__modules-container {
    width: 80.3462vw; /* 313.35px */
    padding: 15.3846vw 0; /* 60px（上下とも） */
  }

  .rakucore-lp__modules-heading {
    gap: 0;
    width: 38.8190vw; /* 151.394px */
    margin: 0 auto 4.5138vw; /* 17.604px（見出し〜カード群） */
  }

  /*
   * Figma上は2行ともline-height:44.01pxで確保されているが、
   * 1行目にmargin-bottom:-17.604pxを掛けて2行目を詰めて配置しているため、
   * 見た目に合わせて同じ手法で再現する。
   */
  .rakucore-lp__modules-heading-line--normal {
    margin-bottom: -4.5138vw; /* -17.604px */
    font-size: 3.6110vw; /* 14.083px */
    line-height: 11.2846vw; /* 44.01px */
  }

  .rakucore-lp__modules-heading-line--strong {
    font-size: 4.0626vw; /* 15.844px */
    line-height: 11.2846vw; /* 44.01px */
  }

  .rakucore-lp__modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 38.1418vw); /* 148.753px */
    grid-auto-rows: auto;
    gap: 2.7082vw; /* 10.562px */
  }

  .rakucore-lp__modules-card {
    border-radius: 3.3854vw; /* 13.203px */
  }

  /*
   * Figma実測ではカード幅・角丸は上段2枚・下4枚で共通だが、
   * 内部余白・影・文字サイズ・画像サイズは上段2枚（経営ダッシュボード、営業・顧客管理）と
   * 中段/下段4枚（在庫・物流管理〜人事・労務管理）で異なるため、
   * nth-childで区別してFigma実測値どおりに再現する。
   */
  .rakucore-lp__modules-card:nth-child(-n+2) {
    gap: 1.8056vw; /* 7.042px */
    padding: 2.2569vw 2.7082vw; /* 8.802px / 10.562px */
    box-shadow: 0.6772vw 0.9028vw 1.1285vw rgba(152, 150, 150, 0.15); /* 2.641px 3.521px 4.401px */
  }

  .rakucore-lp__modules-card:nth-child(n+3) {
    gap: 1.5892vw; /* 6.198px */
    padding: 1.9864vw 2.3838vw; /* 7.747px / 9.297px */
    box-shadow: 0.5959vw 0.7946vw 0.9933vw rgba(152, 150, 150, 0.15); /* 2.324px 3.099px 3.874px */
  }

  .rakucore-lp__modules-card:nth-child(-n+2) .rakucore-lp__modules-card-title {
    font-size: 3.0769vw; /* 12px */
    line-height: 11.2846vw; /* 44.01px */
  }

  .rakucore-lp__modules-card:nth-child(-n+2) .rakucore-lp__modules-card-description {
    font-size: 2.5641vw; /* 10px */
    line-height: 3.8462vw; /* 15px */
  }

  .rakucore-lp__modules-card:nth-child(n+3) .rakucore-lp__modules-card-title {
    font-size: 2.7077vw; /* 10.56px */
    line-height: 9.9326vw; /* 38.737px */
  }

  .rakucore-lp__modules-card:nth-child(n+3) .rakucore-lp__modules-card-description {
    font-size: 2.2564vw; /* 8.8px */
    line-height: 3.3854vw; /* 13.203px */
  }

  /*
   * 6画像はPC版同様に実寸比率のままのため、SPでもwidth基準・height:autoで
   * object-fitのトリミングなしに縮小表示する。カード内余白は上段2枚・下4枚で
   * 異なるが、画像サイズは上段2枚を基準に6枚とも統一する。
   */
  .rakucore-lp__modules-card:nth-child(-n+2) .rakucore-lp__modules-card-image,
  .rakucore-lp__modules-card:nth-child(n+3) .rakucore-lp__modules-card-image {
    width: 26.6315vw; /* 103.863px */
    height: auto;
  }

  /*
   * 「人事・労務管理」（6番目）だけ説明文が2行に収まり、
   * 3行になる左隣の「請求書管理」（5番目）よりテキスト塊が短くなる。
   * カードはjustify-content:centerで中身全体を縦中央寄せしているため、
   * 高さの差がそのままタイトル・画像の縦位置ズレになっている。
   * 説明文エリアに3行分のmin-heightを与えて中身全体の高さを揃え、
   * タイトル位置・画像位置を「請求書管理」と一致させる（他4枚・カード自体のサイズは変更しない）。
   */
  .rakucore-lp__modules-card:nth-child(6) .rakucore-lp__modules-card-description {
    min-height: 10.1562vw; /* 39.609px（13.203px × 3行） */
  }
}

/* ---------------------------------
   05_業務がつながるから、二重入力がなくなる。（SP）
--------------------------------- */
@media (max-width: 768px) {
  .rakucore-lp__workflow-container {
    gap: 4.5138vw; /* 17.604px（Figma実測：上段ブロック → 中見出し → 下段カード、いずれも共通） */
    padding: 15.3846vw 0; /* 60px（上下とも） */
  }

  .rakucore-lp__workflow-top {
    gap: 4.5138vw; /* 17.604px（見出しブロック → 4カード） */
    width: 79.9135vw; /* 311.663px（カード幅と同じ。align-items:centerで左右39.17pxが自動的に生まれる） */
  }

  .rakucore-lp__workflow-heading-block {
    gap: 4.5138vw; /* 17.604px（見出し → 説明文） */
    width: 61.6137vw; /* 240.293px */
  }

  .rakucore-lp__workflow-heading {
    font-size: inherit;
    line-height: inherit;
  }

  /*
   * PC版は単一テキストの1行見出しだが、SPはFigmaで2行・2サイズ指定のため、
   * 既存<h2>はそのまま残しspanを追加して行ごとにサイズを分ける
   * （spanはPCでは装飾なしのinlineのままなので、PC表示に影響しない）。
   */
  .rakucore-lp__workflow-heading-line {
    display: block;
  }

  .rakucore-lp__workflow-heading-line--1 {
    font-size: 3.6103vw; /* 14.08px */
    line-height: 6.7692vw; /* 26.4px */
  }

  .rakucore-lp__workflow-heading-line--2 {
    font-size: 4.0615vw; /* 15.84px */
    line-height: 6.7692vw; /* 26.4px */
  }

  .rakucore-lp__workflow-lead {
    font-size: 2.7077vw; /* 10.56px */
    /* Figma指定はfont-weight:500だが、rakucore-lp__benefit-descriptionと同様に
       Noto Sans JP Mediumが未読込のため400で代用している */
    font-weight: 400;
    line-height: 4.5128vw; /* 17.6px */
  }

  .rakucore-lp__workflow-cards {
    flex-direction: column;
    align-items: stretch;
    gap: 2.2569vw; /* 8.802px */
  }

  .rakucore-lp__workflow-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5641vw; /* 10px（番号丸とタイトルの間隔） */
    width: 100%;
    height: 18.0553vw; /* 70.416px */
    padding: 2.2564vw 4.5128vw; /* 8.8px / 17.6px */
    border-width: 0.6154vw; /* 2.4px（Figma仕様の2pxよりわずかに強く見せる） */
    border-radius: 2.2564vw; /* 8.8px */
    box-shadow: none;
  }

  .rakucore-lp__workflow-card-number {
    flex: none;
    width: 6.7707vw; /* 26.406px */
    height: 6.7707vw; /* 26.406px */
    font-size: 3.6103vw; /* 14.08px */
  }

  .rakucore-lp__workflow-card-title {
    font-size: 3.0769vw; /* 12px */
    line-height: 6.7692vw; /* 26.4px */
    text-align: left;
    white-space: nowrap;
  }

  .rakucore-lp__workflow-card-image {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: auto;
    height: auto;
    margin-left: auto;
    flex: none;
  }

  /*
   * Figmaと比べてイラストが右寄りだったため、margin-rightで左へ寄せている
   * （カード幅・パディングはそのまま。移動量はカードごとに微調整）。
   */
  .rakucore-lp__workflow-card--1 .rakucore-lp__workflow-card-image {
    width: 18.4615vw; /* 72px（実比率のまま縮小） */
    margin-right: 5.8974vw; /* 23px 左へ（前回13px + 追加10px） */
  }

  .rakucore-lp__workflow-card--2 .rakucore-lp__workflow-card-image,
  .rakucore-lp__workflow-card--4 .rakucore-lp__workflow-card-image {
    width: 22.5641vw; /* 88px（実比率のまま縮小） */
    margin-right: 5.6410vw; /* 22px 左へ（前回12px + 追加10px） */
  }

  .rakucore-lp__workflow-card--3 .rakucore-lp__workflow-card-image {
    width: 22.5641vw; /* 88px（実比率のまま縮小） */
    margin-right: 5.1282vw; /* 20px 左へ（前回10px + 追加10px） */
  }

  .rakucore-lp__workflow-subheading {
    gap: 2.2564vw; /* 8.8px（線とテキストの間隔） */
  }

  .rakucore-lp__workflow-subheading-line {
    width: 8.1282vw; /* 31.7px */
    height: 0.2564vw; /* 1px */
  }

  .rakucore-lp__workflow-subheading-text {
    font-size: 3.1590vw; /* 12.32px */
    line-height: 6.7692vw; /* 26.4px */
    letter-spacing: normal;
  }

  .rakucore-lp__workflow-related {
    flex-direction: column;
    align-items: center;
    gap: 2.9341vw; /* 11.443px */
    /*
     * コンテナのgap(17.604px)を「さらに、関連事業も自動で連携」との間隔に使っているため、
     * この要素だけ半分に打ち消してFigma実測の8.802pxに合わせる。
     */
    margin-top: -2.2569vw; /* -8.802px */
  }

  .rakucore-lp__workflow-related-card {
    width: 65.2249vw; /* 254.377px */
    /*
     * イラストを80%に縮小した分、高さがpadding-top+pill+画像の合計だけでは
     * 77.457pxに届かなくなるため、高さを固定してカードサイズを変えないようにする。
     */
    height: 19.8608vw; /* 77.457px（固定） */
    padding: 2.9338vw 0 0; /* 11.442px（上のみ） */
    gap: 0;
    border-radius: 1.1282vw; /* 4.4px */
    box-shadow: 0.8974vw 0.8974vw 2.2564vw rgba(0, 0, 0, 0.15); /* 3.5px / 3.5px / 8.8px */
  }

  .rakucore-lp__workflow-related-labels {
    gap: 5.1282vw; /* 20px */
  }

  .rakucore-lp__workflow-related-pill,
  .rakucore-lp__workflow-related-pill--sm {
    height: 4.5128vw; /* 17.6px */
    padding: 0 3.5897vw; /* 14px */
    border-width: 0.2256vw; /* 0.88px */
    border-radius: 22.5641vw; /* 88px */
    font-size: 2.7077vw; /* 10.56px（PC版のみに存在する--smとの差は付けない） */
    line-height: normal;
  }

  /*
   * イラストの実画像（矢印込みの1枚絵）はFigmaより大きかったため元サイズの70%に縮小。
   * カード自体の高さは固定済みなので、縮小した分はmargin-top/bottom:autoで
   * pillの下の余白内に中央寄せし、縦横比はwidth:autoのまま維持する。
   * .rakucore-lp imgのグローバルリセット（height:auto）より詳細度を上げるため
   * 親要素と組み合わせている。
   */
  .rakucore-lp__workflow-related-card .rakucore-lp__workflow-related-image {
    width: auto;
    height: 8.6908vw; /* 33.894px（48.42pxの70%） */
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* ---------------------------------
   06_12のAI機能（SP）
--------------------------------- */
@media (max-width: 768px) {
  /*
   * ai-features-bg-sp.pngは1170×3747（390×1249の3倍）。セクション実高さが
   * コンテンツフローでちょうど約1249pxになるよう下記で調整しているため、
   * problems-bg-spと同様にbackground-size:100% 100%で全面に敷き詰める。
   */
  .rakucore-lp__ai-features .rakucore-lp__ai-features-image {
    display: none;
  }

  .rakucore-lp__ai-features-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/rakucore/ai-features/ai-features-bg-sp.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .rakucore-lp__ai-features-container {
    width: 75.8322vw; /* 295.746px */
    margin: 0 auto;
    padding: 15.3846vw 0; /* 60px（上下とも） */
    gap: 5.1282vw; /* 20px（6カード → その他AI機能） */
  }

  .rakucore-lp__ai-features-top {
    gap: 5.1282vw; /* 20px（見出しブロック → 6カード） */
  }

  .rakucore-lp__ai-features-heading-block {
    gap: 4.5128vw; /* 17.6px */
    width: 55.0685vw; /* 214.767px */
  }

  /*
   * PC版の<h2>はspan追加前と同じ単一テキストのまま（spanは無装飾のinlineなので
   * PC表示に影響しない）。SPのみ2行に分け、「12のAI機能」だけ大きくする。
   */
  .rakucore-lp__ai-features-heading-line {
    display: block;
    font-size: 3.6103vw; /* 14.08px */
    line-height: 6.7692vw; /* 26.4px */
    font-weight: 700;
  }

  .rakucore-lp__ai-features-heading-strong {
    font-size: 4.0615vw; /* 15.84px */
  }

  .rakucore-lp__ai-features-lead {
    font-size: 2.7077vw; /* 10.56px */
    /* Figma指定はfont-weight:500だが、他セクション同様にNoto Sans JP Mediumが
       未読込のため400で代用している */
    font-weight: 400;
    line-height: 4.5128vw; /* 17.6px */
  }

  /* PC用の改行位置(br)を無効化し、SP幅で自然に折り返す（fv-descriptionと同じ手法） */
  .rakucore-lp__ai-features-lead br {
    display: none;
  }

  .rakucore-lp__ai-features-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    column-gap: 0;
    row-gap: 1.3538vw; /* 5.28px */
    width: 100%;
  }

  .rakucore-lp__ai-features-card {
    border-radius: 1.3538vw; /* 5.28px */
  }

  .rakucore-lp__ai-features-divider {
    border-top-width: 0.2564vw; /* 1px */
  }

  /*
   * 既存テーマ`.page p`のmargin-bottom:20px/line-height:1.7が詳細度で
   * 上書きしてしまい、チェックアイコンとテキストの縦位置ズレ・カード高さの
   * 間延びの原因になっている（02_お悩みと同じ問題）。セレクタの詳細度を上げて
   * marginを打ち消し、line-heightも確実にnormalへ戻す。
   */
  .rakucore-lp__ai-features-card-bottom .rakucore-lp__ai-features-result {
    margin: 0;
    line-height: normal;
  }

  /*
   * 1枚目「AI経営参謀」のみ他5枚と異なるレイアウト：
   * 「アイコン+タイトル」を横並び、その下に本文を全幅（アイコン左端に揃えて）
   * 配置するため、card-textをdisplay:contentsにしてcard-topを2行グリッド化する
   * （1行目：アイコン列+タイトル列、2行目：本文が両列にまたがる）。
   * カード自体の高さは本文量に応じて可変させるためheight:autoのまま。
   */
  .rakucore-lp__ai-features-card:first-child {
    height: auto;
    gap: 2.2564vw; /* 8.8px */
    padding: 3.3846vw 4.5128vw; /* 13.2px / 17.6px */
    border-width: 0.9949vw; /* 3.88px（下5枚と揃える） */
  }

  .rakucore-lp__ai-features-card:first-child .rakucore-lp__ai-features-card-top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center; /* アイコンは行内最大要素なので位置は変わらず、タイトルがその天地中央に揃う */
    column-gap: 2.2564vw; /* 8.8px（アイコンとタイトルの間隔） */
    row-gap: 2.2564vw; /* 8.8px（タイトル行と本文の間隔） */
    height: auto;
  }

  .rakucore-lp__ai-features-card:first-child .rakucore-lp__ai-features-icon {
    grid-column: 1;
    grid-row: 1;
    width: 10.1564vw; /* 39.61px */
    height: 10.1564vw;
  }

  .rakucore-lp__ai-features-card:first-child .rakucore-lp__ai-features-card-text {
    display: contents;
  }

  .rakucore-lp__ai-features-card:first-child .rakucore-lp__ai-features-card-title {
    grid-column: 2;
    grid-row: 1;
    height: auto;
    margin: 0;
    font-size: 3.6103vw; /* 14.08px */
    line-height: 6.7692vw; /* 26.4px */
    letter-spacing: normal;
  }

  .rakucore-lp__ai-features-card:first-child .rakucore-lp__ai-features-description {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 2.7077vw; /* 10.56px */
    line-height: 4.5128vw; /* 17.6px */
  }

  .rakucore-lp__ai-features-card:first-child .rakucore-lp__ai-features-card-bottom {
    height: auto;
    gap: 1.1282vw; /* 4.4px */
  }

  .rakucore-lp__ai-features-card:first-child .rakucore-lp__ai-features-check {
    width: 4.0615vw; /* 15.84px */
    height: 4.0615vw;
  }

  .rakucore-lp__ai-features-card:first-child .rakucore-lp__ai-features-result {
    font-size: 2.7077vw; /* 10.56px */
  }

  /*
   * 2,3,4,5,6枚目（共通スタイル）。1枚目と同じ「アイコン+タイトル → 本文 →
   * 区切り線 → チェック行」の縦構造に揃えるため、card-topを1枚目と同じ
   * グリッド化（card-textをdisplay:contentsにし、タイトルをアイコンと
   * 同じ行、本文をアイコン左端起点の全幅の行に配置）にする。
   * 高さは固定値をやめ、本文量に応じた自然な可変（height:auto）にする。
   */
  .rakucore-lp__ai-features-card:nth-child(n+2) {
    height: auto;
    gap: 1.9872vw; /* 7.75px */
    padding: 2.9795vw 3.9744vw; /* 11.62px / 15.5px */
    border-width: 0.9949vw; /* 3.88px（Figma実測1.94pxの約2倍） */
  }

  .rakucore-lp__ai-features-card:nth-child(n+2) .rakucore-lp__ai-features-card-top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center; /* アイコンは行内最大要素なので位置は変わらず、タイトルがその天地中央に揃う */
    column-gap: 1.9872vw; /* 7.75px（アイコンとタイトルの間隔） */
    row-gap: 1.9872vw; /* 7.75px（タイトル行と本文の間隔） */
    height: auto;
  }

  .rakucore-lp__ai-features-card:nth-child(n+2) .rakucore-lp__ai-features-icon {
    grid-column: 1;
    grid-row: 1;
    width: 8.9385vw; /* 34.86px */
    height: 8.9385vw;
  }

  .rakucore-lp__ai-features-card:nth-child(n+2) .rakucore-lp__ai-features-card-text {
    display: contents;
  }

  .rakucore-lp__ai-features-card:nth-child(n+2) .rakucore-lp__ai-features-card-title {
    grid-column: 2;
    grid-row: 1;
    height: auto;
    margin: 0;
    font-size: 3.1795vw; /* 12.4px */
    line-height: 5.9590vw; /* 23.24px */
    letter-spacing: normal;
  }

  /*
   * 「AIキャッシュフロー予測」（3枚目）のみPC用の<br>で2行になる。
   * SPでは改行を外して1行表示にする（brはこのタイトルにしかないため
   * カード全体を絞らずbrセレクタのみ無効化すればよい）。
   */
  .rakucore-lp__ai-features-card:nth-child(3) .rakucore-lp__ai-features-card-title br {
    display: none;
  }

  .rakucore-lp__ai-features-card:nth-child(n+2) .rakucore-lp__ai-features-description {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 2.3846vw; /* 9.3px */
    line-height: 3.9744vw; /* 15.5px */
  }

  .rakucore-lp__ai-features-card:nth-child(n+2) .rakucore-lp__ai-features-card-bottom {
    height: auto;
    gap: 1.1282vw; /* 4.4px */
  }

  .rakucore-lp__ai-features-card:nth-child(n+2) .rakucore-lp__ai-features-check {
    width: 3.5769vw; /* 13.95px */
    height: 3.5769vw;
  }

  .rakucore-lp__ai-features-card:nth-child(n+2) .rakucore-lp__ai-features-result {
    font-size: 2.3846vw; /* 9.3px */
  }

  .rakucore-lp__ai-features-other {
    width: 100%;
    gap: 1.1282vw; /* 4.4px（見出し→6ボタン、Figma実測） */
  }

  .rakucore-lp__ai-features-other-heading {
    font-size: 3.1590vw; /* 12.32px */
    line-height: 6.7692vw; /* 26.4px */
    letter-spacing: normal;
  }

  /*
   * PC版と同じ理由（既存テーマ`.page p`のmargin-bottom:20pxが詳細度で勝ってしまう）が
   * SP版でも起きており、見出し下に意図しない余白ができて6ボタン群が余分に
   * 押し下げられていた。PC版同様セレクタの詳細度を上げてmargin-bottomを打ち消す。
   */
  .rakucore-lp__ai-features-other .rakucore-lp__ai-features-other-heading {
    margin-bottom: 0;
  }

  .rakucore-lp__ai-features-other-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6771vw; /* 2.64px（列・行とも共通、Figma実測） */
    width: 100%;
  }

  .rakucore-lp__ai-features-other-button {
    height: 6.9485vw; /* 27.1px */
    padding: 0;
    border-width: 0.5962vw; /* 2.33px（Figma実測1.55pxの1.5倍） */
    border-radius: 1.1282vw; /* 4.4px */
    font-size: 2.3846vw; /* 9.3px */
    line-height: normal;
    letter-spacing: normal;
  }

  /* 1つ目「AIメール生成」のみ他5つよりわずかに大きい（Figma実測） */
  .rakucore-lp__ai-features-other-button:first-child {
    height: 7.8258vw; /* 30.52px */
    border-width: 0.6769vw; /* 2.64px（Figma実測1.76pxの1.5倍） */
    font-size: 2.7077vw; /* 10.56px */
  }
}

/* ---------------------------------
   07_このような企業におすすめです（SP）
--------------------------------- */
@media (max-width: 768px) {
  /*
   * Figma上のSPノード(node 2023:7094)はwidth390×height599。
   * セクションにこの実測高さ(599/390×100vw)をmin-heightとして持たせ、
   * PC用の背景画像・グラデーション装飾（1440×1067比率）はSPでは使わず
   * 背景色#fff（.rakucore-lp__recommendの既存background指定）のみにする。
   */
  .rakucore-lp__recommend {
    min-height: 153.5897vw; /* 599px */
  }

  /*
   * PC用visualはaspect-ratio:1440/1067固定のため、SP比率(390/599)のままだと
   * 装飾画像が正しく収まらない。position:absolute+inset:0+aspect-ratio:autoで
   * セクション実寸(390×599)に完全一致させる（02_お悩み(SP)と同じ手法）。
   */
  .rakucore-lp__recommend-visual {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .rakucore-lp__recommend .rakucore-lp__recommend-image {
    display: none;
  }

  /*
   * recommend-bg-sp.pngは1170×1797（390×599の3倍）とセクション実寸と完全に
   * 同じ比率のSP専用アセットのため、background-size:100% 100%で歪みなく
   * 全面に敷き詰められる。画像自体は右上寄りに水色の回路パターンが入るのみの
   * 白地(実質透過)PNGなので、全面表示してもテキスト部分の可読性は保たれる。
   */
  .rakucore-lp__recommend-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/rakucore/recommend/recommend-bg-sp.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }

  /*
   * PC版は左右2ブロックの横並びだが、SPは見出しブロック→一覧の縦積み。
   * コンテナ幅はFigma実測294.87px（左右余白がほぼ48pxずつになるため、
   * margin:0 autoで自然に再現できる）。
   */
  .rakucore-lp__recommend-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5.1282vw; /* 20px（見出しブロック→一覧） */
    width: 75.6077vw; /* 294.87px */
    margin: 0 auto;
    padding: 15.3846vw 0 0; /* 60px（Figma実測の上余白のみ。下は599px確保の余白として残す） */
  }

  .rakucore-lp__recommend-intro {
    gap: 4.5128vw; /* 17.6px（見出し→説明文） */
    width: 44.9128vw; /* 175.16px */
  }

  .rakucore-lp__recommend-heading {
    font-size: 4.0615vw; /* 15.84px */
    line-height: 6.7692vw; /* 26.4px */
  }

  .rakucore-lp__recommend-description {
    font-size: 2.7077vw; /* 10.56px */
    /* Figma指定はfont-weight:500だが、他セクション同様にNoto Sans JP Mediumが
       未読込のため400で代用している */
    font-weight: 400;
    line-height: 4.5128vw; /* 17.6px */
  }

  .rakucore-lp__recommend-list {
    width: 100%;
    gap: 4.1026vw; /* 16px（項目・区切り線の縦の等間隔） */
  }

  /*
   * 01は02〜04よりひと回り大きいレイアウト（Figma実測）。番号SVGは既存の
   * height:100%/width:autoのまま、itemのheightをタイトル+本文のテキスト
   * 総高さ（=Figma実測の番号の見た目の高さ）に合わせることで、SVGの
   * 縦横比を保ったまま自然に大小2パターンを再現している。
   */
  .rakucore-lp__recommend-item:first-child {
    gap: 4.5128vw; /* 17.6px（番号→テキスト） */
    height: 15.7949vw; /* 61.6px（タイトル26.4px＋本文2行17.6px×2） */
  }

  .rakucore-lp__recommend-item:not(:first-child) {
    gap: 3.9744vw; /* 15.5px（番号→テキスト） */
    height: 13.9077vw; /* 54.24px（タイトル23.24px＋本文2行15.5px×2） */
  }

  /*
   * グローバルリセット.rakucore-lp img{height:auto}（詳細度0,1,1）が単一クラスの
   * .rakucore-lp__recommend-number{height:100%}（詳細度0,1,0）より勝ってしまい、
   * 番号SVGが常に実寸(height:111px)で表示されてしまうため、item要素を含めた
   * 子孫セレクタ（詳細度0,2,0）でリセットに勝たせ、itemの高さ(=大小2パターン)に
   * 追従させる。
   */
  .rakucore-lp__recommend-item:first-child .rakucore-lp__recommend-number,
  .rakucore-lp__recommend-item:not(:first-child) .rakucore-lp__recommend-number {
    width: auto;
    height: 100%;
  }

  .rakucore-lp__recommend-item-body {
    gap: 0;
  }

  .rakucore-lp__recommend-item:first-child .rakucore-lp__recommend-item-body {
    width: 54.1667vw; /* 211.25px */
  }

  .rakucore-lp__recommend-item:not(:first-child) .rakucore-lp__recommend-item-body {
    width: 47.6769vw; /* 185.94px */
  }

  .rakucore-lp__recommend-title {
    white-space: normal;
  }

  .rakucore-lp__recommend-item:first-child .rakucore-lp__recommend-title {
    font-size: 3.6103vw; /* 14.08px */
    line-height: 6.7692vw; /* 26.4px */
  }

  .rakucore-lp__recommend-item:not(:first-child) .rakucore-lp__recommend-title {
    font-size: 3.1795vw; /* 12.4px */
    line-height: 5.9590vw; /* 23.24px */
  }

  .rakucore-lp__recommend-item:first-child .rakucore-lp__recommend-text {
    width: 52.5641vw; /* 205px */
    font-size: 2.7077vw; /* 10.56px */
    line-height: 4.5128vw; /* 17.6px */
  }

  .rakucore-lp__recommend-item:not(:first-child) .rakucore-lp__recommend-text {
    width: 46.2821vw; /* 180.5px */
    font-size: 2.3846vw; /* 9.3px */
    line-height: 3.9744vw; /* 15.5px */
  }

  .rakucore-lp__recommend-divider {
    width: 71.7692vw; /* 279.9px */
    height: 0.2564vw; /* 1px */
  }
}

/* ---------------------------------
   08_料金プラン（SP）
--------------------------------- */
@media (max-width: 768px) {
  /*
   * 当初はFigma実測の801px基準で組んでいたが、枠線のグラデーション化・
   * カード下部余白の拡大・段落の自然な折り返し・各ブロック間隔の拡大により
   * 実高さは約838pxになっている。801pxへ無理に詰めるより余白感を優先し、
   * 実測に合わせてmin-heightを更新している。
   */
  .rakucore-lp__pricing {
    min-height: 214.8718vw; /* 838px */
  }

  .rakucore-lp__pricing-container {
    gap: 0;
    width: 80.3462vw; /* 313.35px */
    padding: 15.3846vw 0 10.9393vw; /* 60px（上） / 42.66px（下） */
  }

  .rakucore-lp__pricing-heading-block {
    gap: 2.2564vw; /* 8.8px */
    width: 53.7154vw; /* 209.49px */
    margin-bottom: 7.6923vw; /* 30px（見出し→カード） */
  }

  .rakucore-lp__pricing-heading {
    font-size: 4.0615vw; /* 15.84px */
    line-height: 6.7692vw; /* 26.4px */
  }

  .rakucore-lp__pricing-lead {
    font-size: 2.7077vw; /* 10.56px */
    line-height: 4.5128vw; /* 17.6px */
  }

  /*
   * 既存テーマ`.page p`のmargin-bottom:20pxが詳細度で勝ってしまい、見出し下に
   * 意図しない余白ができてEnterpriseカードが余分に押し下げられていた。
   * セレクタの詳細度を上げてmargin-bottomを打ち消す。
   */
  .rakucore-lp__pricing-heading-block .rakucore-lp__pricing-lead {
    margin-bottom: 0;
  }

  /*
   * PC版と同じグラデーション枠（transparent border + 2層background）をSPにも
   * 流用する。枠線太さは調整前の2.64pxの約1.5倍（3.96px）にして存在感を出す。
   * カード高さは固定をやめ内容に応じたauto（padding-top20.24px／padding-bottom
   * 32pxで上下バランスを取る）にし、下部の余白不足を解消する。
   * カード下のmargin-bottomで「導入・運用にかかる費用」との間隔を確保する。
   */
  .rakucore-lp__pricing-card {
    justify-content: flex-start;
    gap: 4.5128vw; /* 17.6px */
    width: 100%;
    height: auto; /* PC版の43.1944vw固定（≒622px）を打ち消し内容に応じた高さにする */
    margin-bottom: 7.6923vw; /* 30px（カード→導入・運用にかかる費用） */
    padding: 5.1897vw 0 8.2051vw; /* 20.24px（上）/ 32px（下） */
    border: 1.0154vw solid transparent; /* 3.96px（2.64pxの約1.5倍） */
    border-radius: 4.5128vw; /* 17.6px */
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(64.7deg, #0745b4 0%, #00bcd7 100%) border-box;
  }

  .rakucore-lp__pricing-card-header {
    gap: 2.2564vw; /* 8.8px */
    width: 62.7410vw; /* 244.69px */
  }

  .rakucore-lp__pricing-card-name {
    gap: 1.1282vw; /* 4.4px */
  }

  .rakucore-lp__pricing-card-badge {
    font-size: 2.7077vw; /* 10.56px */
    line-height: 4.5128vw; /* 17.6px */
  }

  /* 既存テーマ`.page p`のmargin-bottom:20pxを詳細度を上げて打ち消す（他の.page p対策と同じ理由） */
  .rakucore-lp__pricing-card-name .rakucore-lp__pricing-card-badge {
    margin-bottom: 0;
  }

  .rakucore-lp__pricing-card-title {
    font-size: 4.0615vw; /* 15.84px */
    line-height: 6.7692vw; /* 26.4px */
    letter-spacing: 0.2436vw; /* 0.95px */
  }

  /*
   * PC版と同様brでの固定改行をやめ自然な折り返しにするため、段落自体に
   * 幅を与えてFigmaに近い3行程度の折り返しにする（header幅244.69pxより
   * 少し狭い240pxで実測調整）。
   */
  .rakucore-lp__pricing-card-description {
    max-width: none; /* PC版のmax-width:38.8889vw（560px）がSP幅では小さすぎるため打ち消す */
    width: 61.5385vw; /* 240px */
    font-size: 2.7077vw; /* 10.56px */
    line-height: 4.5128vw; /* 17.6px */
  }

  /*
   * 既存テーマ`.page p`のmargin-bottom:20pxが詳細度で勝ってしまい、説明文下に
   * 意図しない余白ができて下の機能一覧が余分に押し下げられていた。
   * セレクタの詳細度を上げてmargin-bottomを打ち消す。
   */
  .rakucore-lp__pricing-card-header .rakucore-lp__pricing-card-description {
    margin-bottom: 0;
  }

  .rakucore-lp__pricing-features {
    width: 65.8744vw; /* 256.91px */
    gap: 2.2564vw; /* 8.8px（2列の間隔） */
  }

  /* 2列×4行はFigmaどおり崩さず、flex:1で2列を均等割りにする */
  .rakucore-lp__pricing-features-col {
    flex: 1 1 0;
    min-width: 0;
    gap: 2.9897vw; /* 11.66px */
  }

  .rakucore-lp__pricing-feature {
    gap: 0.5641vw; /* 2.2px */
  }

  .rakucore-lp__pricing-feature-icon {
    width: 3.9744vw; /* 15.5px */
    height: 3.9744vw;
  }

  .rakucore-lp__pricing-feature-text {
    font-size: 1.9872vw; /* 7.75px */
    white-space: nowrap;
  }

  /* 1つ目（全コアモジュール）のみアイコン・テキストがひと回り大きい（Figma実測） */
  .rakucore-lp__pricing-features-col:first-child .rakucore-lp__pricing-feature:first-child .rakucore-lp__pricing-feature-icon {
    width: 4.5128vw; /* 17.6px */
    height: 4.5128vw;
  }

  .rakucore-lp__pricing-features-col:first-child .rakucore-lp__pricing-feature:first-child .rakucore-lp__pricing-feature-text {
    font-size: 2.2564vw; /* 8.8px */
  }

  /*
   * table-wrap（339px）はfee（313.35px）より幅広いため、fee自体をflexのままに
   * すると align-items:center が負の余白を0に丸めてしまい左寄りになる
   * （flexアイテムのcross軸autoマージンは正の余白しか吸収できない仕様）。
   * display:blockに切り替え、table-wrap側のmargin:0 auto（PC定義を流用）で
   * 中央揃えする。gapの代わりにfee-headingのmargin-bottomで見出し→表の間隔を保つ。
   */
  .rakucore-lp__pricing-fee {
    display: block;
    width: 100%;
    margin-bottom: 10.2564vw; /* 40px（表→CTA、従来15pxから+25px） */
  }

  .rakucore-lp__pricing-fee-heading {
    margin-bottom: 4.5128vw; /* 17.6px（見出し→表） */
    font-size: 3.6103vw; /* 14.08px */
    line-height: 6.0171vw; /* 23.47px */
  }

  /*
   * テーブル幅339pxはコンテンツ幅313.35pxより広く、Figmaどおり左右にはみ出す。
   * 390px画面内には収まるため、カード化はせず3列のテーブルのまま実装する。
   * 親要素より広い箱をmargin:0 auto（PC定義）だけで中央寄せしようとすると、
   * ブラウザはマイナスになるautoマージンを0に丸めてしまい左に寄る。
   * そのため左右に明示的なマイナスマージン（(339-313.35)/2=12.825px）を
   * 指定して確実に中央揃えにする。
   */
  .rakucore-lp__pricing-fee-table-wrap {
    width: 86.9231vw; /* 339px */
    margin-left: -3.2885vw; /* -12.825px */
    margin-right: -3.2885vw; /* -12.825px */
    border-width: 0.2256vw; /* 0.88px */
    border-radius: 3.3846vw; /* 13.2px */
  }

  /*
   * 既存テーマ`style_b.css`の @media (max-width: 480px) に汎用的な
   * `td, th { display: block; width: 100% }` があり、このテーブルのth/tdには
   * display指定がなかったため、詳細度に関係なく（本テーブル側にdisplayの
   * 指定が一切なかったため）テーマ側のdisplay:blockがそのまま適用され、
   * 3列表がセルごとに縦積みになっていた。本来のtable-cell表示を明示して戻す。
   */
  .rakucore-lp__pricing-fee-table th,
  .rakucore-lp__pricing-fee-table td {
    display: table-cell;
    font-size: 2.7077vw; /* 10.56px */
  }

  .rakucore-lp__pricing-fee-table tr:not(:first-child) th,
  .rakucore-lp__pricing-fee-table tr:not(:first-child) td {
    border-top-width: 0.2256vw; /* 0.88px */
  }

  .rakucore-lp__pricing-fee-table th:not(:first-child),
  .rakucore-lp__pricing-fee-table td:not(:first-child) {
    border-left-width: 0.2256vw; /* 0.88px */
  }

  .rakucore-lp__pricing-fee-table th:nth-child(1),
  .rakucore-lp__pricing-fee-table td:nth-child(1) {
    width: 24.8256vw; /* 96.82px */
  }

  .rakucore-lp__pricing-fee-table th:nth-child(2),
  .rakucore-lp__pricing-fee-table td:nth-child(2) {
    width: 28.2051vw; /* 110px */
  }

  .rakucore-lp__pricing-fee-table th:nth-child(3),
  .rakucore-lp__pricing-fee-table td:nth-child(3) {
    width: 33.8538vw; /* 132.03px */
  }

  /* 3列目「内容」はヘッダーのみ中央揃えのまま、本文（tbody）だけ左揃えにする */
  .rakucore-lp__pricing-fee-table tbody td:nth-child(3) {
    text-align: left;
  }

  .rakucore-lp__pricing-fee-table thead th {
    height: 11.2821vw; /* 44px */
    border-bottom-width: 0.2256vw; /* 0.88px */
  }

  /* 行高さはFigma実測どおり1行目52px・2,3行目53px */
  .rakucore-lp__pricing-fee-table tbody tr:nth-child(1) th,
  .rakucore-lp__pricing-fee-table tbody tr:nth-child(1) td {
    height: 13.3333vw; /* 52px */
  }

  .rakucore-lp__pricing-fee-table tbody tr:nth-child(2) th,
  .rakucore-lp__pricing-fee-table tbody tr:nth-child(2) td,
  .rakucore-lp__pricing-fee-table tbody tr:nth-child(3) th,
  .rakucore-lp__pricing-fee-table tbody tr:nth-child(3) td {
    height: 13.5897vw; /* 53px */
  }

  .rakucore-lp__pricing-fee-price-num {
    font-size: 3.1590vw; /* 12.32px */
  }

  .rakucore-lp__pricing-fee-price-unit {
    font-size: 2.7077vw; /* 10.56px */
  }

  .rakucore-lp__pricing-cta-button {
    width: 78.9923vw; /* 308.07px */
    height: 9.0282vw; /* 35.21px */
    gap: 1.1282vw; /* 4.4px */
    padding: 0;
    border-width: 0.6769vw; /* 2.64px（1.76pxの1.5倍） */
    border-radius: 999px;
    font-size: 3.6103vw; /* 14.08px */
    line-height: 1.3;
    white-space: nowrap;
  }
}

/* ---------------------------------
   09_よくある質問（SP）
--------------------------------- */
@media (max-width: 768px) {
  .rakucore-lp__faq-container {
    gap: 5.1282vw; /* 20px（見出しブロック→カード群、Figma実測） */
    padding: 15.3846vw 0; /* 60px（上下、Figma実測） */
  }

  /*
   * PC版の37.9167vw（546px）はSP幅では狭すぎ、リード文の<br>で分けた
   * 1行がさらに折り返してしまうため、Figma実測の288.7pxで上書きする。
   */
  .rakucore-lp__faq-heading-block {
    gap: 4.5128vw; /* 17.6px */
    width: 74.0256vw; /* 288.7px */
  }

  .rakucore-lp__faq-heading {
    font-size: 4.0615vw; /* 15.84px */
    line-height: 6.7692vw; /* 26.4px */
  }

  .rakucore-lp__faq-lead {
    font-size: 2.7077vw; /* 10.56px */
    line-height: 4.5128vw; /* 17.6px */
  }

  /* カード幅308.07pxで固定し、containerのalign-items:centerで中央寄せする */
  .rakucore-lp__faq-list {
    gap: 2.2564vw; /* 8.8px（カード間隔、Figma実測） */
    width: 78.9923vw; /* 308.07px */
  }

  /* 2枚目以降（その他）の値を基本とし、1枚目のみ後段で上書きする */
  .rakucore-lp__faq-item {
    padding: 5.9487vw 2.9744vw; /* 23.2px（上下） / 11.6px（左右） */
    border-radius: 1.1282vw; /* 4.4px */
  }

  .rakucore-lp__faq-question-inner {
    gap: 1.9872vw; /* 7.75px */
  }

  /*
   * Q/A文字はFigmaでは専用フォントの生テキストだが、Webにフォントが
   * 存在しないためPC版同様SVG画像化している（faq-q.svg / faq-a.svg）。
   * PC版のSVGはFigma上45px文字のインク実測サイズ(26×34 / 28×33)を
   * そのまま採用しているため、SP版のFigma実測Q/Aフォントサイズ
   * (19.37px)に同じ比率（26/45, 28/45）を掛けてwidthを算出している。
   */
  .rakucore-lp__faq-q-mark {
    width: 2.8702vw; /* 11.19px */
  }

  .rakucore-lp__faq-question-text {
    font-size: 2.3846vw; /* 9.3px */
    line-height: 5.9590vw; /* 23.24px */
    white-space: nowrap; /* Figma実測どおり単語途中での不自然な折り返しを防止 */
  }

  /*
   * トグル（＋／－）はFigma非掲載の独自要素のため、PC版の比率
   * （width:font-sizeの0.6倍、height=line-height）をSPフォントサイズに
   * 合わせて縮小する。
   */
  .rakucore-lp__faq-toggle {
    width: 1.4308vw; /* 5.58px */
    height: 5.9590vw; /* 23.24px */
    font-size: 2.3846vw; /* 9.3px */
    line-height: 5.9590vw; /* 23.24px */
  }

  .rakucore-lp__faq-panel-inner {
    gap: 2.9744vw; /* 11.6px */
    padding-top: 2.9744vw; /* 11.6px */
  }

  .rakucore-lp__faq-divider {
    border-top-width: 0.1974vw; /* 0.77px */
  }

  .rakucore-lp__faq-answer {
    gap: 1.9872vw; /* 7.75px */
  }

  .rakucore-lp__faq-a-mark {
    width: 3.0903vw; /* 12.05px */
  }

  .rakucore-lp__faq-answer-text {
    width: 57.4103vw; /* 223.9px */
    font-size: 2.3846vw; /* 9.3px */
    line-height: 3.9744vw; /* 15.5px */
  }

  /*
   * 既存テーマ`.page p`のmargin-bottom:20pxが詳細度で勝ってしまい、
   * 回答文下に意図しない余白ができていた（他の.page p対策と同じ理由）。
   * セレクタの詳細度を上げてmargin-bottomを打ち消す
   * （カード自体のgap/paddingはこの指定では変更されない）。
   */
  .rakucore-lp__faq-answer .rakucore-lp__faq-answer-text {
    margin-bottom: 0;
  }

  /* 1枚目のみ内部padding・フォントサイズがひと回り大きい（Figma実測） */
  .rakucore-lp__faq-item:first-child {
    padding: 6.7692vw 3.3846vw; /* 26.4px（上下） / 13.2px（左右） */
  }

  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-question-inner,
  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-answer {
    gap: 2.2564vw; /* 8.8px */
  }

  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-q-mark {
    width: 3.2593vw; /* 12.71px */
  }

  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-question-text {
    font-size: 2.7077vw; /* 10.56px */
    line-height: 6.7692vw; /* 26.4px */
  }

  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-toggle {
    width: 1.6246vw; /* 6.34px */
    height: 6.7692vw; /* 26.4px */
    font-size: 2.7077vw; /* 10.56px */
    line-height: 6.7692vw; /* 26.4px */
  }

  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-panel-inner {
    gap: 3.3846vw; /* 13.2px */
    padding-top: 3.3846vw; /* 13.2px */
  }

  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-divider {
    border-top-width: 0.2256vw; /* 0.88px */
  }

  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-a-mark {
    width: 3.5100vw; /* 13.69px */
  }

  .rakucore-lp__faq-item:first-child .rakucore-lp__faq-answer-text {
    width: 65.2256vw; /* 254.38px */
    font-size: 2.7077vw; /* 10.56px */
    line-height: 4.5128vw; /* 17.6px */
  }
}

/* ---------------------------------
   10_最終CTA（SP）
--------------------------------- */
@media (max-width: 768px) {
  /*
   * final-cta-bg-sp.png（1170×1782 = 390×594の3倍）はネイビー→ブルーのグラデーション、
   * ネットワーク装飾、下部イラストを含む完成素材。セクション比率(390:594)と画像比率が
   * 完全に一致するため、-visualのaspect-ratioを390/594に差し替えるだけでトリミングなく収まる。
   */
  .rakucore-lp__final-cta-visual {
    aspect-ratio: 390 / 594;
  }

  .rakucore-lp__final-cta .rakucore-lp__final-cta-image {
    display: none;
  }

  .rakucore-lp__final-cta-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/rakucore/cta/final-cta-bg-sp.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  /*
   * 以下はFigma実測値（テキスト＋CTAグループ: x=16.283/y=60.881/width=308.068/height=243.812、
   * コンテンツフレームx=23）を390px基準のvw換算（px ÷ 390 × 100）でそのまま反映している。
   * 画面左端からテキストブロック左端までは 23 + 16.283 = 39.283px。
   */
  .rakucore-lp__final-cta-content {
    margin-left: 10.0726vw; /* 39.283px */
    width: 78.9918vw; /* 308.068px */
    padding-top: 15.6105vw; /* 60.881px */
    text-align: left;
  }

  .rakucore-lp__final-cta-heading {
    margin: 0 0 4.5138vw; /* 17.604px（見出し→説明文のgap） */
    font-size: 5.6423vw; /* 22.005px */
    line-height: 1.6; /* 35.208px ÷ 22.005px */
  }

  .rakucore-lp__final-cta-heading-brand {
    letter-spacing: normal;
  }

  .rakucore-lp__final-cta-description {
    width: 65.6762vw; /* 256.137px。この幅の中で自然改行させる */
    margin: 0 0 10.2564vw; /* 40px（説明文→CTAのgap） */
    font-size: 3.1597vw; /* 12.323px */
    line-height: 2.1428; /* 26.406px ÷ 12.323px */
  }

  /*
   * CTAボタンの下げ過ぎとの指摘のため、PC版と同じ考え方（marginではなく
   * padding-topで加算し、直前の.rakucore-lp__final-cta-descriptionのmarginとの
   * 相殺を避ける）で、ボタン高さ35.208pxの約75%（26.406px）下げた位置に調整する。
   * 横位置・見出し・説明文・背景・ボタン自体のサイズは変更しない。
   */
  .rakucore-lp__final-cta-action {
    display: flex;
    justify-content: center;
    padding-top: 6.7708vw; /* 26.406px（ボタン高さ35.208pxの約75%） */
  }

  .rakucore-lp__final-cta .rakucore-lp__final-cta-button {
    width: 56.4228vw; /* 220.049px */
    height: 9.0277vw; /* 35.208px */
    padding: 0;
    gap: 1.5385vw; /* 6px */
    border-width: 0.6769vw; /* 2.64px（1.76pxの1.5倍） */
    border-radius: 999px;
    font-size: 3.6110vw; /* 14.083px */
    line-height: 1.3;
  }

  .rakucore-lp__final-cta-button-text,
  .rakucore-lp__final-cta-button-arrow {
    letter-spacing: normal;
  }
}