/* ============================================================
  0. リセット & ベース
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ============================================================
  1. CSS変数（デザイントークン）
============================================================ */
:root {
  /* ★カスタマイズ: Figmaデザインの基準幅 */
  --base-pc: 1366;
  --base-sp: 390;

  /*
    --vw: JS が window.innerWidth を --vw-max でクランプして設定する (px単位)
    フォールバック（JS未実行時）: 100vw
  */
  --vw: 100vw;

  /* ===== カラーパレット ===== */
  --color-primary:   #ddff00;   /* 黄色 CTA */
  --color-black:     #2b3655;   /* テキスト黒 */
  --color-white:     #ffffff;   /* 白 */
  --color-footer:    #424242;   /* フッター背景 */

  /* ===== フォント ===== */
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Montserrat', sans-serif;
}

/* ============================================================
  2. ベーススタイル
============================================================ */
html {
  font-family: var(--font-ja);
  color: var(--color-black);
}

body {
  width: 100%;
  overflow-x: hidden;
  background-color: var(--color-white);
}

/* 1920px超の場合は中央寄せ */
body.is-capped {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============================================================
  3. ヘッダー
  Figma参照 (PC / 1366px):
    height: 100px
    ロゴ: 96×57.57px / left: 24px / top: 22px
    タグライン: left: 147px (gap: 27px) / font: 14px bold / tracking: 0.42px
    ナビ: 水平中央 / top: 45px / gap: 36px / font: 16px medium
    CTA: left: 1058px(right: 40px) / 268×68px / radius: 50px / font: 20px bold
============================================================ */
.site-header {
  --pc-h: 100;   /* Figma PC: ヘッダー高さ */

  position: sticky;
  top: 0;
  left: 0;
  width: 100%;          /* body.is-capped(flex)のとき幅を保持する */
  align-self: stretch;  /* align-items:center による幅縮みを防ぐ */
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
  background-color: var(--color-white);
  z-index: 100;
}

.header-inner {
  position: relative;
  height: 100%;
}

/* -- ロゴ + タグライン -- */
.header-logo-group {
  --pc-left: 24;   /* Figma PC: ロゴ left */

  position: absolute;
  left: calc(var(--pc-left) * var(--vw) / var(--base-pc));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: calc(27 * var(--vw) / var(--base-pc));   /* ロゴ右端(120px) → タグライン(147px): 27px */
}

.header-logo__img {
  --pc-w: 96;        /* Figma PC: ロゴ幅 */
  --pc-h: 57.571;    /* Figma PC: ロゴ高さ */

  width:  calc(var(--pc-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
}

.header-tagline {
  --pc-size: 14;   /* Figma PC: 14px */

  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: 0.03em;   /* 0.42px ÷ 14px */
  line-height: 1.643;       /* ~23px ÷ 14px */
}

/* -- グローバルナビゲーション -- */
.header-nav {
  --pc-top: 45;   /* Figma PC: ナビ top（中央あたり） */

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: calc(36 * var(--vw) / var(--base-pc));   /* Figma PC: アイテム間ギャップ 36px */
}

.header-nav__link {
  --pc-size: 16;   /* Figma PC: 16px */

  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 500;
  color: var(--color-black);
  white-space: nowrap;
  transition: opacity 0.2s;
}

.header-nav__link:hover {
  opacity: 0.6;
}

/* -- CTA ボタン -- */
.header-cta {
  --pc-right:  40;    /* Figma PC: right(1366-1058-268)=40px */
  --pc-w:     268;    /* Figma PC: ボタン幅 */
  --pc-h:      68;    /* Figma PC: ボタン高さ */
  --pc-size:   20;    /* Figma PC: フォントサイズ */
  --pc-icon-w: 20;    /* Figma PC: アイコン幅 */
  --pc-icon-h: 15;    /* Figma PC: アイコン高さ */

  position: absolute;
  right: calc(var(--pc-right) * var(--vw) / var(--base-pc));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--vw) / var(--base-pc));   /* アイコン右端(20px)→テキスト開始(30px): 10px */
  width:  calc(var(--pc-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
  background-color: var(--color-primary);
  border-radius: 50px;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: 0.03em;   /* 0.6px ÷ 20px */
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.header-cta:hover {
  background-color: #2b3655;
  color: #ffffff;
}

.header-cta:hover .header-cta__icon {
  /* black SVG → #FFFFFF */
  filter: brightness(0) invert(1);
}

.header-cta__icon {
  width:  calc(var(--pc-icon-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-icon-h) * var(--vw) / var(--base-pc));
  flex-shrink: 0;
}

/* -- SP専用要素（PCでは非表示） -- */
.header-sp-cta  { display: none; }
.header-hamburger { display: none; }

/* ============================================================
  3-SP. SP_ヘッダー
  Figma参照 (SP / 390px):
    height: 60px
    ロゴ: left:16px / 縦中央 / 64×38px
    CTAボタン: left:212px / 縦中央 / 118×40px / 16px bold / radius:50px
    ハンバーガー: right:0 / 60×60px / SVG 24×16px
============================================================ */
@media (max-width: 1024px) {
  .site-header {
    height: calc(60 * 100vw / var(--base-sp));
  }

  /* PC専用要素を非表示 */
  .header-tagline { display: none; }
  .header-nav     { display: none; }
  .header-cta     { display: none; }

  /* SP: ロゴグループ左位置 */
  .header-logo-group {
    left: calc(16 * 100vw / var(--base-sp));
  }

  /* SP: ロゴサイズ */
  .header-logo__img {
    width:  calc(64 * 100vw / var(--base-sp));
    height: calc(38 * 100vw / var(--base-sp));
  }

  /* SP: 無料相談ボタン */
  .header-sp-cta {
    --sp-left:  212;   /* Figma SP: CTA left */
    --sp-w:     118;   /* Figma SP: CTA 幅 */
    --sp-h-btn:  40;   /* Figma SP: CTA 高さ */

    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left:   calc(var(--sp-left)  * 100vw / var(--base-sp));
    top: 50%;
    transform: translateY(-50%);
    width:  calc(var(--sp-w)     * 100vw / var(--base-sp));
    height: calc(var(--sp-h-btn) * 100vw / var(--base-sp));
    background-color: var(--color-primary);
    border-radius: 50px;
    font-size:   calc(16 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-black);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  /* SP: ハンバーガーボタン */
  .header-hamburger {
    --sp-w: 60;   /* Figma SP: ハンバーガーエリア幅 */

    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width:  calc(var(--sp-w) * 100vw / var(--base-sp));
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .header-hamburger svg {
    width:  calc(24 * 100vw / var(--base-sp));
    height: calc(16 * 100vw / var(--base-sp));
  }
}

/* ============================================================
  3-SP-MENU. SP_メニュー
  Figma参照 (SP / 390px):
    全画面白背景オーバーレイ
    ヘッダー行: 60px（ロゴ left:16px / CTA left:212px / ×ボタン right:0 60×60px）
    ×アイコン: 22×22px
    ヘッダー〜ナビ間: 56px
    ナビ: center / 20px medium / gap:42px
    下パディング: 56px
============================================================ */
.sp-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--color-white);
  flex-direction: column;
  overflow-y: auto;
}

.sp-menu.is-open {
  display: flex;
}

/* SP メニュー ヘッダー行 */
.sp-menu__header {
  position: relative;
  flex-shrink: 0;
  height: calc(60 * 100vw / var(--base-sp));
  background-color: var(--color-white);
}

/* SP メニュー ロゴ */
.sp-menu__logo {
  position: absolute;
  left: calc(16 * 100vw / var(--base-sp));
  top: 50%;
  transform: translateY(-50%);
}

.sp-menu__logo-img {
  width:  calc(64 * 100vw / var(--base-sp));
  height: calc(38 * 100vw / var(--base-sp));
}

/* SP メニュー CTA */
.sp-menu__cta {
  --sp-left:  212;
  --sp-w:     118;
  --sp-h-btn:  40;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left:   calc(var(--sp-left)  * 100vw / var(--base-sp));
  top: 50%;
  transform: translateY(-50%);
  width:  calc(var(--sp-w)     * 100vw / var(--base-sp));
  height: calc(var(--sp-h-btn) * 100vw / var(--base-sp));
  background-color: var(--color-primary);
  border-radius: 50px;
  font-size:   calc(16 * 100vw / var(--base-sp));
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* SP メニュー 閉じる（×）ボタン */
.sp-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width:  calc(60 * 100vw / var(--base-sp));
  height: calc(60 * 100vw / var(--base-sp));
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.sp-menu__close svg {
  width:  calc(22 * 100vw / var(--base-sp));
  height: calc(22 * 100vw / var(--base-sp));
}

/* SP メニュー ナビ */
.sp-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:            calc(42 * 100vw / var(--base-sp));
  padding-top:    calc(56 * 100vw / var(--base-sp));
  padding-bottom: calc(56 * 100vw / var(--base-sp));
}

.sp-menu__link {
  font-size:   calc(20 * 100vw / var(--base-sp));
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.sp-menu__link:hover {
  opacity: 0.6;
}

/* ============================================================
  4. メインコンテンツ
============================================================ */
main {
  width: 100%;          /* body.is-capped(flex)のとき幅を保持する */
  align-self: stretch;  /* align-items:center による幅縮みを防ぐ */
  --vw: 100vw;          /* 全セクション共通: 1920pxキャップを無効化し常に全幅スケール */
}

/* ============================================================
  5. PC_MV（メインビジュアル）
  Figma参照 (PC / 1366px):
    セクション: 1366×668px
    背景: left:40 / top:0 / 1286×628px / radius:20px（グラデーションJPEG）
    右イラスト外: left:789 / top:57 / 520×514px
    右イラスト内: left:848 / top:117 / 347×381px
    見出し1行目: left:96 / top:89 / 50px bold / lh:74px
    見出し2〜3行目: 60px black(900) / lh:74px
    白カード: left:96 / top:332 / 605×197px / radius:20px
    カードテキスト: left:126 / top:365 / 24px bold / lh:38px
    タグ行: left:126 / top:435 / 24px bold
    下テキスト: left:126 / top:480 / 24px bold / lh:38px
    モニター枠: left:551 / top:361 / 211×157px
    動画サムネ: left:554 / top:364 / 205×115px / border:4px #e0ebf3
    再生ボタン: left:643 / top:409 / 27×27px
    書類(奥): left:465 / top:406 / 116×175px / rotate:-8.16deg
    書類(前): left:445 / top:400 / 116×175px / rotate:-13.21deg
============================================================ */
.pc-mv {
  position: relative;
  width: 100%;
  height: calc(668 * var(--vw) / var(--base-pc));
  overflow: hidden;
  padding-left:  calc(40 * var(--vw) / var(--base-pc));
  padding-right: calc(40 * var(--vw) / var(--base-pc));
}

/* -- 背景グラデーション -- */
.mv__bg {
  position: absolute;
  left:  calc(40 * var(--vw) / var(--base-pc));
  right: calc(40 * var(--vw) / var(--base-pc));
  top: 0;
  width: auto;
  height: calc(628  * var(--vw) / var(--base-pc));
  border-radius: calc(20 * var(--vw) / var(--base-pc));
  overflow: hidden;
}

.mv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- 右イラスト 外側リング -- */
.mv__illust-outer {
  position: absolute;
  left: calc(789   * var(--vw) / var(--base-pc));
  top:  calc(56.88 * var(--vw) / var(--base-pc));
  width:  calc(520     * var(--vw) / var(--base-pc));
  height: calc(513.603 * var(--vw) / var(--base-pc));
  pointer-events: none;
}

/* -- 右イラスト 内側セミナーシーン -- */
.mv__illust-inner {
  position: absolute;
  left: calc(848.4  * var(--vw) / var(--base-pc));
  top:  calc(117.19 * var(--vw) / var(--base-pc));
  width:  calc(347.276 * var(--vw) / var(--base-pc));
  height: calc(381.09  * var(--vw) / var(--base-pc));
  pointer-events: none;
}

/* -- キャッチコピー -- */
.mv__heading {
  margin: 0;
  position: absolute;
  left: calc(96 * var(--vw) / var(--base-pc));
  top:  calc(89 * var(--vw) / var(--base-pc));
  color: var(--color-black);
}

.mv__heading-line1 {
  --pc-size: 50;   /* Figma PC: 50px bold */

  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 700;
  line-height: calc(74 * var(--vw) / var(--base-pc));   /* Figma PC: lh:74px */
}

.mv__heading-line2 {
  --pc-size: 60;   /* Figma PC: 60px black */

  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 900;
  line-height: calc(74 * var(--vw) / var(--base-pc));   /* Figma PC: lh:74px */
}

/* -- 白いカード背景 -- */
.mv__card {
  position: absolute;
  left: calc(96  * var(--vw) / var(--base-pc));
  top:  calc(332 * var(--vw) / var(--base-pc));
  width:  calc(605 * var(--vw) / var(--base-pc));
  height: calc(220 * var(--vw) / var(--base-pc));
  background-color: var(--color-white);
  border-radius: calc(20 * var(--vw) / var(--base-pc));
}

/* -- カードテキスト + タグ（h2見出しラッパー、各子要素が個別にposition:absoluteのため自身はスタイル不要） -- */
.mv__card-content {
  margin: 0;
}

/* -- カードテキスト上段 -- */
.mv__card-desc {
  --pc-size: 24;   /* Figma PC: 24px bold / lh:38px */

  position: absolute;
  left:  calc(126 * var(--vw) / var(--base-pc));
  top:   calc(360 * var(--vw) / var(--base-pc));
  width: calc(516 * var(--vw) / var(--base-pc));
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: calc(38 * var(--vw) / var(--base-pc));
}

/* -- タグ行（抄録集 ＋ 動画 にして） -- */
.mv__tags {
  position: absolute;
  left: calc(126 * var(--vw) / var(--base-pc));
  top:  calc(442 * var(--vw) / var(--base-pc));
  display: flex;
  align-items: center;
  gap: calc(2 * var(--vw) / var(--base-pc));   /* Figma PC: 各要素間 2px */
}

.mv__tag {
  --pc-size:    24;   /* Figma PC: 24px bold */
  --pc-pad:      8;   /* Figma PC: padding 8px */

  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--pc-pad) * var(--vw) / var(--base-pc));
  background-color: var(--color-primary);
  border-radius: 4px;   /* 4px以下はpx固定 */
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: calc(22 * var(--vw) / var(--base-pc));   /* Figma PC: lh:22px */
  white-space: nowrap;
}

.mv__plus,
.mv__suffix {
  --pc-size: 24;   /* Figma PC: 24px bold */

  align-self: center;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: calc(38 * var(--vw) / var(--base-pc));   /* Figma PC: lh:38px */
  white-space: nowrap;
}

/* -- カードテキスト下段 -- */
.mv__card-bottom {
  --pc-size: 24;   /* Figma PC: 24px bold */

  position: absolute;
  left: calc(126 * var(--vw) / var(--base-pc));
  top:  calc(484 * var(--vw) / var(--base-pc));
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: calc(38 * var(--vw) / var(--base-pc));
  white-space: nowrap;
}

/* -- モニターフレーム画像 -- */
.mv__monitor-frame {
  position: absolute;
  left: calc(551     * var(--vw) / var(--base-pc));
  top:  calc(361     * var(--vw) / var(--base-pc));
  width:  calc(211.212 * var(--vw) / var(--base-pc));
  height: calc(157.297 * var(--vw) / var(--base-pc));
  pointer-events: none;
}

/* -- 動画サムネイル（モニター内スクリーン） -- */
.mv__monitor-screen {
  position: absolute;
  left: calc(553.78  * var(--vw) / var(--base-pc));
  top:  calc(364.33  * var(--vw) / var(--base-pc));
  width:  calc(205.098 * var(--vw) / var(--base-pc));
  height: calc(115.055 * var(--vw) / var(--base-pc));
  border: 4px solid #e0ebf3;
  border-radius: 3px;
  overflow: hidden;
}

.mv__monitor-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 動画上の半透明暗幕 */
.mv__monitor-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* -- 再生ボタン -- */
.mv__play-btn {
  position: absolute;
  left: calc(643.27  * var(--vw) / var(--base-pc));
  top:  calc(408.8   * var(--vw) / var(--base-pc));
  width:  calc(26.679 * var(--vw) / var(--base-pc));
  height: calc(26.679 * var(--vw) / var(--base-pc));
  pointer-events: none;
}

/* -- 抄録集ドキュメント（共通） -- */
.mv__doc {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mv__doc img {
  --pc-doc-w: 116.477;   /* Figma PC: 書類幅 */
  --pc-doc-h: 174.715;   /* Figma PC: 書類高さ */

  width:  calc(var(--pc-doc-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-doc-h) * var(--vw) / var(--base-pc));
  object-fit: cover;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* 奥の書類（左寄り / rotate:-8.16deg） */
.mv__doc--back {
  left: calc(464.97  * var(--vw) / var(--base-pc));
  top:  calc(405.91  * var(--vw) / var(--base-pc));
  width:  calc(140.084 * var(--vw) / var(--base-pc));
  height: calc(189.472 * var(--vw) / var(--base-pc));
}

.mv__doc--back img {
  transform: rotate(-8.16deg);
}

/* 手前の書類（更に左寄り / rotate:-13.21deg） */
.mv__doc--front {
  left: calc(445.45  * var(--vw) / var(--base-pc));
  top:  calc(399.89  * var(--vw) / var(--base-pc));
  width:  calc(153.31  * var(--vw) / var(--base-pc));
  height: calc(196.704 * var(--vw) / var(--base-pc));
}

.mv__doc--front img {
  transform: rotate(-13.21deg);
}

/* ============================================================
  5-SP. SP_MV（メインビジュアル）
  Figma参照 (SP / 390px) ※2026-05-26更新
    セクション: 390×540px / padding:0 24px
    背景: left:24 / top:0 / 342×513px / radius:10px
    見出し1行目: left:24 / top:41 / 24px bold / lh:39px
    見出し2〜3行目: 30px black(900) / lh:39px
    白カード: left:48 / top:190 / 294×306px / radius:10px
    カードテキスト: left:67 / top:214 / w:256 / 16px bold / lh:24px / flex-col gap:7px
    タグ: 16px bold / padding:8px / radius:4px
    合成画像(抄録集+モニター): left:24 / top:320 / 324×202px
============================================================ */

/* PC: SP_MVは非表示 */
.sp-mv {
  display: none;
}

@media (max-width: 1024px) {
  /* PC_MVを非表示、SP_MVを表示 */
  .pc-mv { display: none; }

  .sp-mv {
    display: block;
    position: relative;
    width: 100%;
    height: calc(540 * 100vw / var(--base-sp));
    overflow: hidden;
  }

  /* -- 背景グラデーション（342×513 / radius:10） -- */
  .sp-mv__bg {
    position: absolute;
    left:   calc(24  * 100vw / var(--base-sp));
    top: 0;
    width:  calc(342 * 100vw / var(--base-sp));
    height: calc(513 * 100vw / var(--base-sp));
    border-radius: calc(10 * 100vw / var(--base-sp));
    overflow: hidden;
  }

  .sp-mv__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* -- キャッチコピー（left:24 / top:41） -- */
  .sp-mv__heading {
    margin: 0;
    position: absolute;
    left: calc(50 * 100vw / var(--base-sp));
    top:  calc(30 * 100vw / var(--base-sp));
    color: var(--color-black);
  }

  .sp-mv__heading-line1 {
    font-size:   calc(24 * 100vw / var(--base-sp));   /* Figma SP: 24px bold / lh:39px */
    font-weight: 700;
    line-height: calc(39 * 100vw / var(--base-sp));
  }

  .sp-mv__heading-line2 {
    font-size:   calc(30 * 100vw / var(--base-sp));   /* Figma SP: 30px black / lh:39px */
    font-weight: 900;
    line-height: calc(39 * 100vw / var(--base-sp));
  }

  /* -- 白カード背景（left:48 / top:190 / 294×306 / radius:10） -- */
  .sp-mv__card {
    position: absolute;
    left:   calc(48  * 100vw / var(--base-sp));
    top:    calc(160 * 100vw / var(--base-sp));
    width:  calc(294 * 100vw / var(--base-sp));
    height: calc(306 * 100vw / var(--base-sp));
    background-color: var(--color-white);
    border-radius: calc(10 * 100vw / var(--base-sp));
  }

  /* -- カードテキスト + タグ（left:67 / top:214 / w:256 / flex-col gap:7） -- */
  .sp-mv__card-content {
    margin: 0;
    position: absolute;
    left:  calc(67  * 100vw / var(--base-sp));
    top:   calc(180 * 100vw / var(--base-sp));
    width: calc(256 * 100vw / var(--base-sp));
    display: flex;
    flex-direction: column;
    gap: calc(0 * 100vw / var(--base-sp));
  }

  .sp-mv__card-desc,
  .sp-mv__card-bottom {
    font-size:   calc(16 * 100vw / var(--base-sp));   /* Figma SP: 16px bold / lh:24px */
    font-weight: 700;
    color: var(--color-black);
    line-height: calc(24 * 100vw / var(--base-sp));
  }

  /* -- タグ行（抄録集 ＋ 動画 にして） -- */
  .sp-mv__tags {
    display: flex;
    align-items: center;
    gap: calc(2 * 100vw / var(--base-sp));
  }

  .sp-mv__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(3 * 100vw / var(--base-sp));
    background-color: var(--color-primary);
    border-radius: 4px;
    font-size:   calc(16 * 100vw / var(--base-sp));   /* 16px bold */
    font-weight: 700;
    color: var(--color-black);
    line-height: calc(22 * 100vw / var(--base-sp));
    white-space: nowrap;
  }

  .sp-mv__plus,
  .sp-mv__suffix {
    font-size:   calc(16 * 100vw / var(--base-sp));   /* 16px bold */
    font-weight: 700;
    color: var(--color-black);
    line-height: calc(38 * 100vw / var(--base-sp));
    white-space: nowrap;
  }

  /* -- 抄録集+モニター合成画像（left:24 / top:320 / 324×202） -- */
  .sp-mv__media-image {
    position: absolute;
    left:   calc(24  * 100vw / var(--base-sp));
    top:    calc(298 * 100vw / var(--base-sp));
    width:  calc(324 * 100vw / var(--base-sp));
    height: calc(202 * 100vw / var(--base-sp));
    pointer-events: none;
  }
}

/* ============================================================
  6-SP. SP_お悩み
  Figma参照 (SP / 390px):
    セクション: py:60 / flex-col / gap:25 / items-center
    タイトル: "Concerns" 20px Inter Medium グラデ / タイトル 24px bold / gap:16 text-center
    バブル×6: w:full / pl:18 pr:15 py:24 / gap:17 / グラデ(#a7d8f8→#edf0fd→#f8d7ec)
      border-radius: tl:50 tr:30 br:0 bl:50
      アイコン: 40×40px / テキスト: 20px bold #1a1a1a / w:252
    バブル間gap: 14px / バブル→イラスト: 20px / イラスト→矢印: 25px
    イラスト: 227×216px / 矢印: 146×81px
    ボトムテキスト: 24px bold text-center / lh:34px / whitespace-nowrap
      黄色バー: w:301 h:8 mt:47（スタッキングでテキストの後ろ）
      "、" letter-spacing: -11.04px
============================================================ */

/* PC: SP_Concernsは非表示 */
.sp-concerns {
  display: none;
}

@media (max-width: 1024px) {
  /* PC_Concernsを非表示、SP_Concernsを表示 */
  .pc-concerns { display: none; }

  .sp-concerns {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top:   calc(60 * 100vw / var(--base-sp));
    padding-left:  calc(24 * 100vw / var(--base-sp));
    padding-right: calc(24 * 100vw / var(--base-sp));
    gap: calc(20 * 100vw / var(--base-sp));
  }

  /* -- セクションタイトル（flex-col gap:16 text-center） -- */
  .sp-concerns__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: calc(10 * 100vw / var(--base-sp));
  }

  .sp-concerns__en {
    font-family: 'Inter', sans-serif;
    font-size:   calc(20 * 100vw / var(--base-sp));
    font-weight: 500;
    background: linear-gradient(90.01deg, rgb(120, 200, 252) 0%, rgb(246, 157, 214) 94.79%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
  }

  .sp-concerns__title {
    margin: 0;
    font-size:   calc(24 * 100vw / var(--base-sp));   /* Figma SP: 24px bold */
    font-weight: 700;
    color: var(--color-black);
  }

  /* -- バブルリスト（flex-col gap:14 w:full） -- */
  .sp-concerns__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap:   calc(14 * 100vw / var(--base-sp));
    width: 100%;
    margin-bottom: calc(20 * 100vw / var(--base-sp));   /* リスト→イラスト間 gap:20 */
  }

  /* バブルアイテム */
  .sp-concerns__item {
    display: flex;
    align-items: center;
    gap:            calc(17 * 100vw / var(--base-sp));
    padding-left:   calc(18 * 100vw / var(--base-sp));
    padding-right:  calc(15 * 100vw / var(--base-sp));
    padding-top:    calc(14 * 100vw / var(--base-sp));
    padding-bottom: calc(14 * 100vw / var(--base-sp));
    background: linear-gradient(90deg, #a7d8f8 0%, #edf0fd 49.041%, #f8d7ec 100%);
    border-radius:
      calc(50 * 100vw / var(--base-sp))   /* top-left */
      calc(30 * 100vw / var(--base-sp))   /* top-right */
      0                                   /* bottom-right（tail） */
      calc(50 * 100vw / var(--base-sp));  /* bottom-left */
  }

  /* バブルアイコン（40×40px） */
  .sp-concerns__item-icon {
    flex-shrink: 0;
    width:  calc(40 * 100vw / var(--base-sp));
    height: calc(40 * 100vw / var(--base-sp));
  }

  .sp-concerns__item-icon img {
    width: 100%;
    height: 100%;
  }

  /* バブルテキスト（20px bold #1a1a1a w:252） */
  .sp-concerns__item-text {
    margin: 0;
    font-size:   calc(20 * 100vw / var(--base-sp));
    font-weight: 700;
    color: #1a1a1a;
    line-height: normal;
    width: calc(252 * 100vw / var(--base-sp));
    flex-shrink: 0;
  }

  /* -- 人物イラスト（227×216px） -- */
  .sp-concerns__illust {
    width:  calc(227 * 100vw / var(--base-sp));
    height: calc(216 * 100vw / var(--base-sp));
    margin-bottom: calc(25 * 100vw / var(--base-sp));   /* イラスト→矢印 gap:25 */
  }

  /* -- 矢印（146×81px） -- */
  .sp-concerns__arrows {
    width:  calc(146 * 100vw / var(--base-sp));
    height: calc(81  * 100vw / var(--base-sp));
  }

  /* -- ボトムテキスト（stacking: 黄色バー + テキスト） -- */
  .sp-concerns__bottom {
    position: relative;
    display: flex;
    justify-content: center;
  }

  /* 黄色バー（w:301 / h:8 / mt:47）テキストの後ろに重ねる */
  .sp-concerns__bottom-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:    calc(54 * 100vw / var(--base-sp));
    width:  calc(301 * 100vw / var(--base-sp));
    height: calc(8   * 100vw / var(--base-sp));
    background-color: var(--color-primary);
    z-index: 0;
  }

  .sp-concerns__bottom-text {
    position: relative;
    z-index: 1;
    font-size:   calc(24 * 100vw / var(--base-sp));   /* Figma SP: 24px bold / lh:34px */
    font-weight: 700;
    color: var(--color-black);
    text-align: center;
    line-height: calc(34 * 100vw / var(--base-sp));
    white-space: nowrap;
  }

  /* "、" の字間を詰める（Figma SP: tracking -11.04px） */
  .sp-concerns__comma {
    letter-spacing: calc(-11.04 * 100vw / var(--base-sp));
  }
}

/* ============================================================
  6. PC_お悩み
  Figma参照 (PC / 1366px):
    セクション: pt:76 px:40 / flex col items-center
    コンテンツラッパー: w:1174 / flex col gap:40
    セクションヘッダー: w:624 / flex col gap:32 / "Concerns" 32px Inter Medium gradient / タイトル 48px bold
    バブルグリッド: w:1174 h:631 / position:relative
      バブル6個: h:93 / gradient #a7d8f8→#edf0fd(49%)→#f8d7ec / icon:40×40 / text:24px bold
        左バブル border-radius: 50px 50px 0 50px（tail 右下）
        右バブル border-radius: 50px 50px 50px 0（tail 左下）
        R1L: left:100 top:0 w:502 / R1R: left:643 top:0 w:384
        R2L: left:0 top:133 w:384 / R2R: left:742 top:133 w:432
        R3L: left:0 top:266 w:408 / R3R: left:802 top:266 w:312
      イラスト: left:431.31 top:144 w:305 h:290
        人物画像: top:0 w:305 h:290 / 水平線: top:267.86 w:299.27 h:21.81
      矢印: left:467 top:497 w:240 h:134 / scaleY(-1) / mix-blend-multiply（SVG内蔵）
    ボトムテキスト: flex flow / 48px bold lh:76px / "、" letter-spacing:-7.36px
    黄色下線: position:absolute / section座標 left:631.5 top:939 w:595 h:12
============================================================ */

/* セクション本体: flex col でコンテンツ自然高さ */
.pc-concerns {
  width: 100%;
  padding-top:    calc(76 * var(--vw) / var(--base-pc));
  padding-left:   calc(40 * var(--vw) / var(--base-pc));
  padding-right:  calc(40 * var(--vw) / var(--base-pc));
  padding-bottom: calc(76 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-white);
}

/* -- コンテンツラッパー（w:1174 / flex col gap:40 items-center） -- */
.concerns__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--vw) / var(--base-pc));
  width: calc(1174 * var(--vw) / var(--base-pc));
}

/* -- 上部エリア（flex col gap:70 items-center w:full） -- */
.concerns__upper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(70 * var(--vw) / var(--base-pc));
  width: 100%;
}

/* -- セクションヘッダー（w:624 / flex col gap:32 items-center） -- */
.concerns__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--vw) / var(--base-pc));
  width: calc(624 * var(--vw) / var(--base-pc));
  text-align: center;
}

.concerns__header-en {
  /* Figma PC: Inter Medium 32px / gradient #78c8fc→#f69dd6 */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: calc(32 * var(--vw) / var(--base-pc));
  background: linear-gradient(90.01deg, #78c8fc 0%, #f69dd6 94.79%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.concerns__header-title {
  margin: 0;
  /* Figma PC: Noto Sans JP 48px bold / color:#2b3655 */
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: calc(48 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  white-space: nowrap;
}

/* -- バブル + イラスト グリッド（position:relative / w:1174 / h:631） -- */
.concerns__bubble-grid {
  position: relative;
  width: 100%;
  height: calc(631 * var(--vw) / var(--base-pc));   /* 矢印 top:497 + h:134 */
}

/* -- お悩みバブル 共通 -- */
.concerns__bubble {
  position: absolute;
  height: calc(93 * var(--vw) / var(--base-pc));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--vw) / var(--base-pc));
  padding-left:  calc(30 * var(--vw) / var(--base-pc));
  padding-right: calc(36 * var(--vw) / var(--base-pc));
  background: linear-gradient(90deg, #a7d8f8 0%, #edf0fd 49.041%, #f8d7ec 100%);
}

/* 左バブル（底面右角が角張る = speech bubble tail 右下） */
.concerns__bubble--left {
  border-radius:
    calc(50 * var(--vw) / var(--base-pc))
    calc(50 * var(--vw) / var(--base-pc))
    0
    calc(50 * var(--vw) / var(--base-pc));
}

/* 右バブル（底面左角が角張る = speech bubble tail 左下） */
.concerns__bubble--right {
  border-radius:
    calc(50 * var(--vw) / var(--base-pc))
    calc(50 * var(--vw) / var(--base-pc))
    calc(50 * var(--vw) / var(--base-pc))
    0;
}

/* バブル個別位置（bubble grid 座標系 / h:93px 共通） */
.concerns__bubble--r1l {
  left:  calc(100 * var(--vw) / var(--base-pc));
  top:   0;
  width: calc(502 * var(--vw) / var(--base-pc));
}
.concerns__bubble--r1r {
  left:  calc(643 * var(--vw) / var(--base-pc));
  top:   0;
  width: calc(384 * var(--vw) / var(--base-pc));
}
.concerns__bubble--r2l {
  left:  0;
  top:   calc(133 * var(--vw) / var(--base-pc));
  width: calc(384 * var(--vw) / var(--base-pc));
}
.concerns__bubble--r2r {
  left:  calc(742 * var(--vw) / var(--base-pc));
  top:   calc(133 * var(--vw) / var(--base-pc));
  width: calc(432 * var(--vw) / var(--base-pc));
}
.concerns__bubble--r3l {
  left:  0;
  top:   calc(266 * var(--vw) / var(--base-pc));
  width: calc(408 * var(--vw) / var(--base-pc));
}
.concerns__bubble--r3r {
  left:  calc(802 * var(--vw) / var(--base-pc));
  top:   calc(266 * var(--vw) / var(--base-pc));
  width: calc(312 * var(--vw) / var(--base-pc));
}

/* バブルアイコン（Figma PC: 40×40px） */
.concerns__bubble-icon {
  flex-shrink: 0;
  width:  calc(40 * var(--vw) / var(--base-pc));
  height: calc(40 * var(--vw) / var(--base-pc));
}

.concerns__bubble-icon img {
  width: 100%;
  height: 100%;
}

/* バブルテキスト（Figma PC: 24px bold / color:#1a1a1a） */
.concerns__bubble-text {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: calc(24 * var(--vw) / var(--base-pc));
  color: #1a1a1a;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: normal;
}

/* -- イラスト（left:431.31 / top:144 / w:305 / h:290） -- */
.concerns__illust {
  position: absolute;
  left:   calc(431.31 * var(--vw) / var(--base-pc));
  top:    calc(144    * var(--vw) / var(--base-pc));
  width:  calc(305    * var(--vw) / var(--base-pc));
  height: calc(290    * var(--vw) / var(--base-pc));
}

/* 人物イラスト画像（Figma PC: ml:0.19 top:0 w:305 h:290） */
.concerns__illust-img {
  position: absolute;
  left:   0;
  top:    0;
  width:  100%;
  height: 100%;
  object-fit: cover;
}

/* 水平線（Figma PC: top:267.86 within illust / w:299.27 / h:21.81） */
.concerns__illust-hline {
  position: absolute;
  left:   0;
  top:    calc(267.86 * var(--vw) / var(--base-pc));
  width:  calc(299.27 * var(--vw) / var(--base-pc));
  height: calc(21.81  * var(--vw) / var(--base-pc));
}

/* -- 矢印（left:467 / top:497 / w:240 / h:134） -- */
.concerns__arrows {
  position: absolute;
  left:   calc(467 * var(--vw) / var(--base-pc));
  top:    calc(497 * var(--vw) / var(--base-pc));
  width:  calc(240 * var(--vw) / var(--base-pc));
  height: calc(134 * var(--vw) / var(--base-pc));
}

.concerns__arrows img {
  width: 100%;
  height: 100%;
  display: block;
}


/* -- ボトムテキスト（flex flow / 48px bold / lh:76px） -- */
.concerns__bottom {
  text-align: center;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(48 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  line-height: calc(76 * var(--vw) / var(--base-pc));
  white-space: nowrap;
}

/* 「活かしきれてない状態です。」の黄色アンダーライン（Figma: h:12 / テキスト下端に重ねる） */
.concerns__bottom-underline {
  position: relative;
  isolation: isolate;   /* ::after が span内の stacking context に収まるよう */
}

.concerns__bottom-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* line-height:76 / font-size:48 → half-leading=14px / underline h:12 → 半分(6px)がはみ出す位置: 14-6=8px */
  bottom: calc(8 * var(--vw) / var(--base-pc));
  height: calc(12 * var(--vw) / var(--base-pc));
  background-color: var(--color-primary);
  z-index: -1;   /* テキストの後ろに配置 */
}

/* "、" だけ字間を詰める（Figma: letter-spacing -7.36px） */
.concerns__bottom-comma {
  letter-spacing: calc(-7.36 * var(--vw) / var(--base-pc));
}

/* ============================================================
  7-SP. SP_なぜ
  Figma参照 (SP / 390px):
    card-bg: px:24 py:50 radius:10 / content flex-col gap:30 items-center
    tag pill: px:38 py:18 radius:50 / 24px bold gradient (#78c8fc→#f69dd6) / 2行
    arrow: rotate:180 / 31×18px
    heading: 20px bold lh:30 / yellow bar w:114 h:8 ml:146 mt:41
    body: 14px medium lh:22
    cards: flex-col gap:20 / pt:16 pb:24 px:24 gap:6 / icon 56×56
    bottom: 20px bold lh:30 / yellow bar w:188 h:8 ml:29 mt:71
============================================================ */

/* デフォルト（PC時）は非表示 */
.sp-naze { display: none; }

@media (max-width: 1024px) {
  .pc-naze { display: none; }

  /* セクション外枠（card を左右 24px 内側に収める） */
  .sp-naze {
    display: block;
    width: 100%;
    padding: calc(50 * 100vw / var(--base-sp)) calc(24 * 100vw / var(--base-sp));
  }

  /* 背景カード（bg-img + rounded corners） */
  .sp-naze__card-bg {
    position: relative;
    border-radius: calc(10 * 100vw / var(--base-sp));
    overflow: hidden;
    padding: calc(50 * 100vw / var(--base-sp)) calc(24 * 100vw / var(--base-sp));
  }

  /* 背景画像（inset:0 / object-fit:cover） */
  .sp-naze__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* コンテンツカラム（position:relative / flex-col gap:30 items-center） */
  .sp-naze__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * 100vw / var(--base-sp));
  }

  /* タグ + 矢印ラッパー（flex-col items-center） */
  .sp-naze__tag-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* タグ pill（px:38 py:18 radius:50 / white bg） */
  .sp-naze__tag {
    display: inline-flex;
    padding: calc(18 * 100vw / var(--base-sp)) calc(38 * 100vw / var(--base-sp));
    border-radius: calc(50 * 100vw / var(--base-sp));
    background-color: var(--color-white);
  }

  /* タグテキスト（24px bold / gradient text / text-center） */
  .sp-naze__tag-text {
    margin: 0;
    font-size: calc(24 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(36 * 100vw / var(--base-sp));
    text-align: center;
    background: linear-gradient(90deg, #78c8fc 0%, #f69dd6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* 矢印（rotate:180 / 31×18px） */
  .sp-naze__arrow {
    width: calc(31 * 100vw / var(--base-sp));
    height: calc(18 * 100vw / var(--base-sp));
    transform: rotate(180deg);
  }

  /* 見出しラッパー（position:relative / w:full） */
  .sp-naze__heading-wrap {
    position: relative;
    width: 100%;
  }

  /* 黄色バー（position:absolute / w:114 h:8 / left:146 top:41） */
  .sp-naze__heading-bar {
    position: absolute;
    left: calc(79 * 100vw / var(--base-sp));
    top: calc(47 * 100vw / var(--base-sp));
    width: calc(114 * 100vw / var(--base-sp));
    height: calc(8 * 100vw / var(--base-sp));
    background-color: var(--color-primary);
    z-index: 0;
  }

  /* 見出しテキスト（20px bold / lh:30 / text-center） */
  .sp-naze__heading {
    position: relative;
    z-index: 1;
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(30 * 100vw / var(--base-sp));
    text-align: center;
    color: var(--color-black);
  }

  /* 本文（14px medium / lh:22） */
  .sp-naze__body {
    font-size: calc(14 * 100vw / var(--base-sp));
    font-weight: 500;
    line-height: calc(22 * 100vw / var(--base-sp));
    color: var(--color-black);
    width: 100%;
  }

  /* カードコンテナ（flex-col gap:20） */
  .sp-naze__cards {
    display: flex;
    flex-direction: column;
    gap: calc(20 * 100vw / var(--base-sp));
    width: 100%;
  }

  /* 個別カード（white bg / drop-shadow / radius:6 / pt:16 pb:24 px:24 gap:6 items-center） */
  .sp-naze__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6 * 100vw / var(--base-sp));
    padding-top:    calc(16 * 100vw / var(--base-sp));
    padding-bottom: calc(24 * 100vw / var(--base-sp));
    padding-left:   calc(24 * 100vw / var(--base-sp));
    padding-right:  calc(24 * 100vw / var(--base-sp));
    background-color: var(--color-white);
    border-radius: calc(6 * 100vw / var(--base-sp));
    filter: drop-shadow(0 0 calc(10 * 100vw / var(--base-sp)) rgba(152, 118, 183, 0.25));
  }

  /* カードアイコン（56×56px） */
  .sp-naze__card-icon {
    width:  calc(56 * 100vw / var(--base-sp));
    height: calc(56 * 100vw / var(--base-sp));
  }

  /* カードタイトル行（flex items-end） */
  .sp-naze__card-title-row {
    display: flex;
    align-items: flex-end;
  }

  /* 「資産」「集客」「営業」24px bold */
  .sp-naze__card-title-lg {
    font-size: calc(24 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-black);
  }

  /* に変える / を広げる / を強くする 20px bold */
  .sp-naze__card-title-sm {
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-black);
  }

  /* カード説明文（14px medium / lh:22 / text-center） */
  .sp-naze__card-desc {
    margin: 0;
    font-size: calc(14 * 100vw / var(--base-sp));
    font-weight: 500;
    line-height: calc(22 * 100vw / var(--base-sp));
    text-align: center;
    color: var(--color-black);
  }

  /* ボトムテキストラッパー（position:relative / w:full） */
  .sp-naze__bottom-wrap {
    position: relative;
    width: 100%;
    text-align: center;
  }

  /* 黄色バー（position:absolute / w:188 h:8 / left:29 top:71） */
  .sp-naze__bottom-bar {
    position: absolute;
    left: calc(30 * 100vw / var(--base-sp));
    top:  calc(76 * 100vw / var(--base-sp));
    width:  calc(188 * 100vw / var(--base-sp));
    height: calc(8   * 100vw / var(--base-sp));
    background-color: var(--color-primary);
    z-index: 0;
  }

  /* ボトムテキスト（20px bold / lh:30 / text-center） */
  .sp-naze__bottom-text {
    position: relative;
    z-index: 1;
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(30 * 100vw / var(--base-sp));
    text-align: center;
    color: var(--color-black);
  }
}

/* ============================================================
  7. PC_なぜ
  Figma参照 (PC / 1366px):
    section: flex-col items-end / pt:116 px:40
    bg-card: w:1286 py:70 px:50 radius:20 mb:-803 / position:relative overflow:hidden
      bg-img: position:absolute inset:0 object-fit:cover
      content: position:relative w:1174 flex-col gap:54 items-center
        upper: flex-col gap:54 items-center w:full
          header: flex-col gap:34 items-center w:full
            tag-wrap: inline-block position:relative
              tag pill: px:38 py:24 radius:50px bg:white
              tag text: 32px bold lh:72 gradient(120,200,252→246,157,214)
              arrow: absolute top:100% left:50% translateX(-50%) rotate(180deg) w:44 h:18
            heading-body: flex-col items-center w:full
              heading: 32px bold whitespace-nowrap text-center
              body: 16px medium lh:28 text-center mt:19px
          cards: flex gap:20 items-center w:full
            card: w:378 pt:37 pb:43 px:34 gap:20 radius:6 shadow:0 0 10px #9876B740
              icon: 85×85 single PNG / title: 「○○」32px + テキスト24px / desc: 16px medium lh:28
        bottom: text-center 32px bold lh:46 whitespace-nowrap
    illust-frame: h:803 pt:23 pb:85 px:54 / overflow:hidden
      illust-img: w:276 h:178 object-fit:cover
============================================================ */

/* セクション: flex-col items-end / pt:116 px:40 / position:relative（illust絶対配置の基準） */
.pc-naze {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top:   calc(0 * var(--vw) / var(--base-pc));
  padding-left:  calc(40  * var(--vw) / var(--base-pc));
  padding-right: calc(40  * var(--vw) / var(--base-pc));
  width: 100%;
  overflow: hidden;
}

/* -- bg-card: 背景画像 + コンテンツを内包 -- */
/* w:1286 py:70 px:50 radius:20 */
.naze__card-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width:          100%;
  padding-top:    calc(70   * var(--vw) / var(--base-pc));
  padding-bottom: calc(70   * var(--vw) / var(--base-pc));
  padding-left:   calc(50   * var(--vw) / var(--base-pc));
  padding-right:  calc(50   * var(--vw) / var(--base-pc));
  border-radius:  calc(20   * var(--vw) / var(--base-pc));
  overflow: hidden;
}

/* 背景画像（position:absolute / inset:0 / object-fit:cover） */
.naze__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- コンテンツカラム（position:relative / w:1174 / flex col gap:54 items-center） -- */
.naze__content {
  position: relative;
  width: calc(1174 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(54 * var(--vw) / var(--base-pc));
}

/* 上部グループ */
.naze__upper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(54 * var(--vw) / var(--base-pc));
  width: 100%;
}

/* ヘッダーグループ */
.naze__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(34 * var(--vw) / var(--base-pc));
  width: 100%;
}

/* -- タグ + 矢印（position:relative / inline-block） -- */
.naze__tag-wrap {
  position: relative;
  display: inline-block;
}

.naze__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* サンプル参照: 天地パディングを縮小 / 左右はFigma値維持 */
  padding-top:    calc(8  * var(--vw) / var(--base-pc));
  padding-bottom: calc(8  * var(--vw) / var(--base-pc));
  padding-left:   calc(38 * var(--vw) / var(--base-pc));
  padding-right:  calc(38 * var(--vw) / var(--base-pc));
  border-radius: calc(50 * var(--vw) / var(--base-pc));
  background-color: var(--color-white);
}

.naze__tag-text {
  margin: 0;
  font-size:   calc(32 * var(--vw) / var(--base-pc));
  font-weight: 700;
  line-height: calc(72 * var(--vw) / var(--base-pc));
  white-space: nowrap;
  /* Figma gradient: 90.04deg, rgb(120,200,252) → rgb(246,157,214) */
  background: linear-gradient(90.04deg, rgb(120, 200, 252) 0%, rgb(246, 157, 214) 94.79%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 矢印（タグpill底辺の直下中央 / 下向き白三角 = 吹き出しの尻尾） */
.naze__arrow {
  position: absolute;
  top:  100%;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  width:  calc(44 * var(--vw) / var(--base-pc));
  height: calc(18 * var(--vw) / var(--base-pc));
}

/* -- 見出し + 本文エリア -- */
.naze__heading-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 見出し（32px bold / whitespace-nowrap / text-center） */
.naze__heading {
  font-size:   calc(32 * var(--vw) / var(--base-pc));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  text-align: center;
  color: var(--color-black);
}

/* 「、」letter-spacing:-5.92px */
.naze__heading-comma {
  letter-spacing: calc(-5.92 * var(--vw) / var(--base-pc));
}

/* 「で」letter-spacing:-6.4px */
.naze__heading-de {
  letter-spacing: calc(-6.4 * var(--vw) / var(--base-pc));
}

/* 「複数の成果」黄色アンダーライン */
.naze__heading-mark {
  position: relative;
  isolation: isolate;
}

.naze__heading-mark::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(7 * var(--vw) / var(--base-pc));
  height: calc(12 * var(--vw) / var(--base-pc));
  background-color: var(--color-primary);
  z-index: -1;
}

/* 「」」letter-spacing:-5.12px（heading-mark内） */
.naze__heading-bracket {
  letter-spacing: calc(-5.12 * var(--vw) / var(--base-pc));
}

/* 本文（mt:19px / 16px medium / lh:28 / text-center） */
.naze__body {
  margin-top: calc(19 * var(--vw) / var(--base-pc));
  font-size:   calc(16 * var(--vw) / var(--base-pc));
  font-weight: 500;
  line-height: calc(28 * var(--vw) / var(--base-pc));
  text-align: center;
  color: var(--color-black);
}

/* -- カード3枚（flex gap:20 items-center w:full） -- */
.naze__cards {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--vw) / var(--base-pc));
  width: 100%;
}

/* 個別カード（w:378 / pt:37 pb:43 px:34 / gap:20 / radius:6） */
.naze__card {
  width:  calc(378 * var(--vw) / var(--base-pc));
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top:    calc(37 * var(--vw) / var(--base-pc));
  padding-bottom: calc(43 * var(--vw) / var(--base-pc));
  padding-left:   calc(34 * var(--vw) / var(--base-pc));
  padding-right:  calc(34 * var(--vw) / var(--base-pc));
  gap: calc(20 * var(--vw) / var(--base-pc));
  background-color: var(--color-white);
  border-radius: calc(6 * var(--vw) / var(--base-pc));
  box-shadow: 0 0 calc(10 * var(--vw) / var(--base-pc)) 0 rgba(152, 118, 183, 0.25);
}

/* カードアイコンコンテナ（85×85px / single PNG） */
.naze__card-icon {
  width:  calc(85 * var(--vw) / var(--base-pc));
  height: calc(85 * var(--vw) / var(--base-pc));
  flex-shrink: 0;
}

.naze__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カードタイトル行（flex items-end / h:23px / whitespace-nowrap） */
.naze__card-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(23 * var(--vw) / var(--base-pc));
  white-space: nowrap;
  color: var(--color-black);
  font-weight: 700;
  line-height: normal;
}

/* 「資産」「集客」「営業」32px / mr:-11px */
.naze__card-title-lg {
  font-size: calc(32 * var(--vw) / var(--base-pc));
  margin-right: calc(-11 * var(--vw) / var(--base-pc));
}

/* に変える / を広げる / を強くする 24px */
.naze__card-title-sm {
  font-size: calc(24 * var(--vw) / var(--base-pc));
}

/* カード説明文（16px medium / lh:28 / text-center） */
.naze__card-desc {
  margin: 0;
  font-size:   calc(16 * var(--vw) / var(--base-pc));
  font-weight: 500;
  line-height: calc(28 * var(--vw) / var(--base-pc));
  text-align: center;
  color: var(--color-black);
}

/* -- ボトムテキスト（32px bold / lh:46 / whitespace-nowrap） -- */
.naze__bottom {
  text-align: center;
}

.naze__bottom-text {
  font-size:   calc(32 * var(--vw) / var(--base-pc));
  font-weight: 700;
  line-height: calc(46 * var(--vw) / var(--base-pc));
  white-space: nowrap;
  color: var(--color-black);
}

/* 「1回の投資を最大化」黄色アンダーライン */
.naze__bottom-mark {
  position: relative;
  isolation: isolate;
}

.naze__bottom-mark::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(7 * var(--vw) / var(--base-pc));
  height: calc(12 * var(--vw) / var(--base-pc));
  background-color: var(--color-primary);
  z-index: -1;
}

/* 「、」letter-spacing:-5.44px */
.naze__bottom-comma {
  letter-spacing: calc(-5.44 * var(--vw) / var(--base-pc));
}

/* -- illust-frame: セクション基準で絶対配置（サンプル参照） -- */
/* top: section pt と同値（bg-cardトップ） / right: section px と同値（bg-card右端） */
.naze__illust-frame {
  position: absolute;
  top:   calc(60 * var(--vw) / var(--base-pc));
  right: calc(80  * var(--vw) / var(--base-pc));
}

/* イラスト画像（w:276 / h:178 / object-fit:cover） */
.naze__illust-img {
  width:  calc(276 * var(--vw) / var(--base-pc));
  height: calc(178 * var(--vw) / var(--base-pc));
  object-fit: cover;
  display: block;
}

/* ============================================================
  8-SP. SP_制作サンプル
  Figma参照 (SP / 390px):
    section: py:50 gap:30 items-center / rounded:10 / bg-img
    header: flex-col gap:16 items-center / w:342
      "Production Samples": 20px Inter Medium gradient (#78c8fc→#f69dd6)
      "制作サンプル": 24px bold #2b3655
    scroll-wrap: w:342 h:299 overflow-x:auto
      cards: padding-left:54 padding-top:14 / gap:24
      card: w:242 h:242 white radius:10 shadow(rgba 152,118,183 0.25)
        抄録集img: w:143 h:199 border:#d8d8d8
        動画img: w:190 h:142
      label: 16px bold lh:22 #2b3655 whitespace-nowrap
    dots: gap:24 / dot r:6 #2b3655
============================================================ */

/* デフォルト（PC時）は非表示 */
.sp-sample { display: none; }

@media (max-width: 1024px) {
  .pc-sample { display: none; }

  /* セクション本体（flex-col / rounded:10 / bg-img） */
  .sp-sample {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * 100vw / var(--base-sp));
    padding-top:    calc(50 * 100vw / var(--base-sp));
    padding-bottom: calc(50 * 100vw / var(--base-sp));
    margin-left:  calc(24 * 100vw / var(--base-sp));
    margin-right: calc(24 * 100vw / var(--base-sp));
    position: relative;
    border-radius: calc(10 * 100vw / var(--base-sp));
    overflow: hidden;
  }

  /* 背景画像（absolute inset:0 / object-fit:cover） */
  .sp-sample__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .sp-sample__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* セクションヘッダー（flex-col gap:16 items-center / w:342） */
  .sp-sample__header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * 100vw / var(--base-sp));
    width: calc(342 * 100vw / var(--base-sp));
  }

  /* "Production Samples"（20px Inter Medium / gradient text） */
  .sp-sample__en {
    font-family: 'Inter', sans-serif;
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 500;
    background: linear-gradient(90.02deg, #78c8fc 0%, #f69dd6 94.79%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
  }

  /* "制作サンプル"（24px bold） */
  .sp-sample__title {
    margin: 0;
    font-size: calc(24 * 100vw / var(--base-sp));
    font-weight: 700;
    color: #2b3655;
  }

  /* スクロールエリア（w:342 h:299 / overflow-x:auto） */
  .sp-sample__scroll-wrap {
    position: relative;
    z-index: 1;
    width:  calc(342 * 100vw / var(--base-sp));
    height: calc(299 * 100vw / var(--base-sp));
    overflow-x: auto;
    overflow-y: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sp-sample__scroll-wrap::-webkit-scrollbar {
    display: none;
  }

  /* カードコンテナ（flex row / padding-left:54 padding-top:14 / gap:24） */
  .sp-sample__cards {
    display: flex;
    gap: calc(24 * 100vw / var(--base-sp));
    padding-left:  calc(54 * 100vw / var(--base-sp));
    padding-right: calc(54 * 100vw / var(--base-sp));
    padding-top:   calc(14 * 100vw / var(--base-sp));
  }

  /* カードグループ（flex-col / shrink:0 / w:242） */
  .sp-sample__card-group {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: calc(17 * 100vw / var(--base-sp));
    width: calc(242 * 100vw / var(--base-sp));
  }

  /* カード背景（white / rounded:10 / shadow / flex center） */
  .sp-sample__card-bg {
    width:  calc(242 * 100vw / var(--base-sp));
    height: calc(242 * 100vw / var(--base-sp));
    background-color: var(--color-white);
    border-radius: calc(10 * 100vw / var(--base-sp));
    box-shadow: 0 0 calc(20 * 100vw / var(--base-sp)) 0 rgba(152, 118, 183, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 抄録集カード画像（w:143 h:199 / border:#d8d8d8） */
  .sp-sample__card-img {
    width:  calc(143 * 100vw / var(--base-sp));
    height: calc(199 * 100vw / var(--base-sp));
    object-fit: cover;
    border: 1px solid #d8d8d8;
    display: block;
  }

  /* 動画カード画像（w:190 h:142） */
  .sp-sample__card-video-img {
    width:  calc(190 * 100vw / var(--base-sp));
    height: calc(142 * 100vw / var(--base-sp));
    object-fit: cover;
    display: block;
  }

  /* カードラベル（16px bold / lh:22 / whitespace-nowrap） */
  .sp-sample__card-label {
    margin: 0;
    font-size:   calc(16 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(22 * 100vw / var(--base-sp));
    color: #2b3655;
    white-space: nowrap;
  }

  /* ドットコンテナ */
  .sp-sample__dots {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: calc(24 * 100vw / var(--base-sp));
  }

  /* ドット（r:6 / #2b3655） */
  .sp-sample__dot {
    width:  calc(12 * 100vw / var(--base-sp));
    height: calc(12 * 100vw / var(--base-sp));
    border-radius: 50%;
    background-color: rgba(43, 54, 85, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
  }

  .sp-sample__dot.is-active {
    background-color: #2b3655;
  }
}

/* ============================================================
  8. PC_制作サンプル
  Figma参照 (PC / 1366px):
    section: h:1027 (pt:116 + grid:911) / position:relative
    bg: left:40 top:116 w:1286 h:911 radius:20 scaleX(-1)
    header: left:371 top:196 w:624 flex-col gap:32 text-center
      "Production Samples": Inter Medium 32px gradient #78c8fc→#f69dd6
      "制作サンプル": Noto Sans JP Bold 48px #2b3655
    cards-wrap: left:40 top:347 w:1286 h:536 overflow-x:auto overflow-y:clip
      cards: padding-left:56 padding-top:20 flex gap:40 items-center
        card: 458×512(+label) radius:10 shadow:0 0 20px rgba(152,118,183,0.25)
          抄録集: img ml:93 mt:41 w:271 h:376 border:1px #d8d8d8
          動画: video ml:39 mt:92 w:380 h:283 / screen ml:5 mt:6 w:369 h:207 border:4px #e0ebf3
        label: ml:1 mt:490 font:20 bold lh:22 whitespace-nowrap
    dots: left:605 top:935 w:156 h:12
============================================================ */

.pc-sample {
  position: relative;
  width: 100%;
  height: calc(1027 * var(--vw) / var(--base-pc));
  overflow: hidden;
  padding-left:  calc(40 * var(--vw) / var(--base-pc));
  padding-right: calc(40 * var(--vw) / var(--base-pc));
}

/* -- 背景画像（left:40 / top:116 / 1286×911 / radius:20 / scaleX(-1)） -- */
.sample__bg {
  position: absolute;
  left:  calc(40  * var(--vw) / var(--base-pc));
  right: calc(40  * var(--vw) / var(--base-pc));
  top:   calc(116 * var(--vw) / var(--base-pc));
  width: auto;
  height: calc(911  * var(--vw) / var(--base-pc));
  border-radius: calc(20 * var(--vw) / var(--base-pc));
  overflow: hidden;
}

.sample__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

/* -- セクションヘッダー（left:371 / top:196 / w:624） -- */
.sample__header {
  position: absolute;
  left:  calc(371 * var(--vw) / var(--base-pc));
  top:   calc(196 * var(--vw) / var(--base-pc));
  width: calc(624 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--vw) / var(--base-pc));
  text-align: center;
}

.sample__header-en {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: calc(32 * var(--vw) / var(--base-pc));
  background: linear-gradient(90.02deg, #78c8fc 0%, #f69dd6 94.79%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.sample__header-title {
  margin: 0;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: calc(48 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  white-space: nowrap;
}

/* -- カードスクロールエリア（left:40 / top:347 / w:1286 / h:536） -- */
.sample__cards-wrap {
  position: absolute;
  left:   calc(40   * var(--vw) / var(--base-pc));
  top:    calc(347  * var(--vw) / var(--base-pc));
  width:  calc(1286 * var(--vw) / var(--base-pc));
  height: calc(536  * var(--vw) / var(--base-pc));
  overflow-x: auto;
  overflow-y: clip;
  scrollbar-width: none;   /* Firefox */
}

.sample__cards-wrap::-webkit-scrollbar {
  display: none;   /* Chrome / Safari */
}

/* カード列（padding-left:56 padding-top:20 / flex gap:40 items-center） */
.sample__cards {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--vw) / var(--base-pc));
  padding-top:  calc(20 * var(--vw) / var(--base-pc));
  padding-left: calc(56 * var(--vw) / var(--base-pc));
  width: max-content;
}

/* -- 共通カード（w:458 / h:512 = 白カード458 + ラベル領域54） -- */
.sample__card {
  position: relative;
  flex-shrink: 0;
  width:  calc(458 * var(--vw) / var(--base-pc));
  height: calc(512 * var(--vw) / var(--base-pc));
}

/* 白カード背景（458×458 / radius:10 / shadow） */
.sample__card-bg {
  position: absolute;
  top:  0;
  left: 0;
  width:  calc(458 * var(--vw) / var(--base-pc));
  height: calc(458 * var(--vw) / var(--base-pc));
  background-color: var(--color-white);
  border-radius: calc(10 * var(--vw) / var(--base-pc));
  box-shadow: 0 0 calc(20 * var(--vw) / var(--base-pc)) 0 rgba(152, 118, 183, 0.25);
}

/* カードラベル（ml:1 / mt:490 / 20px bold / lh:22 / whitespace-nowrap） */
.sample__card-label {
  margin: 0;
  position: absolute;
  left: calc(1   * var(--vw) / var(--base-pc));
  top:  calc(490 * var(--vw) / var(--base-pc));
  font-family: var(--font-ja);
  font-size:   calc(20 * var(--vw) / var(--base-pc));
  font-weight: 700;
  line-height: calc(22 * var(--vw) / var(--base-pc));
  white-space: nowrap;
  color: var(--color-black);
}

/* -- 抄録集カード: 画像フレーム（ml:93 / mt:41 / w:271 / h:376 / border:1px #d8d8d8） -- */
.sample__card-img-wrap {
  position: absolute;
  left:   calc(93  * var(--vw) / var(--base-pc));
  top:    calc(41  * var(--vw) / var(--base-pc));
  width:  calc(271 * var(--vw) / var(--base-pc));
  height: calc(376 * var(--vw) / var(--base-pc));
  border: 1px solid #d8d8d8;
  overflow: hidden;
}

/* 画像（Figma: 100.05% × 101.9% / left:-0.02% top:0） */
.sample__card-img {
  position: absolute;
  left:   -0.02%;
  top:    0;
  width:  100.05%;
  height: 101.9%;
  object-fit: cover;
}

/* -- 動画カード: モニターコンテナ（ml:39 / mt:92 / w:380 / h:283） -- */
.sample__card-video {
  position: absolute;
  left:   calc(39  * var(--vw) / var(--base-pc));
  top:    calc(92  * var(--vw) / var(--base-pc));
  width:  calc(380 * var(--vw) / var(--base-pc));
  height: calc(283 * var(--vw) / var(--base-pc));
}

/* モニター外枠画像（380×283 / object-fit:cover） */
.sample__card-monitor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* モニタースクリーン（ml:5 / mt:6 / w:369 / h:207 / border:4px #e0ebf3 / radius:3） */
.sample__card-screen {
  position: absolute;
  left:   calc(5   * var(--vw) / var(--base-pc));
  top:    calc(6   * var(--vw) / var(--base-pc));
  width:  calc(369 * var(--vw) / var(--base-pc));
  height: calc(207 * var(--vw) / var(--base-pc));
  border: 4px solid #e0ebf3;
  border-radius: calc(3 * var(--vw) / var(--base-pc));
  overflow: hidden;
}

.sample__card-screen-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -- ページネーションドット（left:605 / top:935 / r:6 / #2B3655 / center間隔:36px） -- */
.sample__dots {
  position: absolute;
  left: calc(605 * var(--vw) / var(--base-pc));
  top:  calc(935 * var(--vw) / var(--base-pc));
  display: flex;
  align-items: center;
  gap: calc(24 * var(--vw) / var(--base-pc));   /* center間隔36 - diameter12 = gap24 */
}

.sample__dot {
  display: block;
  width:  calc(12 * var(--vw) / var(--base-pc));
  height: calc(12 * var(--vw) / var(--base-pc));
  border-radius: 50%;
  background-color: #2b3655;
  opacity: 0.3;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.sample__dot.is-active {
  opacity: 1;
}

/* ============================================================
  9-SP. SP_サービス紹介
  Figma参照 (SP / 390px):
    section: pt:60 flex-col gap:10 / 左右margin:24
    header: flex-col gap:36 items-center
      title: flex-col gap:16 text-center / "Service" 20px gradient / "サービス紹介" 24px bold
      subhead: 20px bold lh:30 / yellow bar w:96 h:8 left:66 top:39
    desc: flex-col gap:11 items-center w:259
      lead/tail: 16px bold lh:28 / tags: yellow p:5 20px bold lh:36
    panel: pl:24 pr:21 py:56 rounded:20 / bg-img / content flex-col gap:14 w:297
      header: flex-col gap:30 / title 24px / desc 14px medium lh:22
      steps: flex-col gap:10 / step: white rounded:50 pl:16 pr:20 py:12
        circle: 26px / num: Inter bold 14px white / text: 14px bold lh:20
    bottom-bar: white drop-shadow rounded:20 py:30 / text 24px bold lh:34
============================================================ */

/* デフォルト（PC時）は非表示 */
.sp-service { display: none; }

@media (max-width: 1024px) {
  .pc-service { display: none; }

  /* セクション本体（flex-col gap:10 pt:60 / 左右margin:24） */
  .sp-service {
    display: flex;
    flex-direction: column;
    gap: calc(10 * 100vw / var(--base-sp));
    padding-top: calc(60 * 100vw / var(--base-sp));
    margin-left:  calc(24 * 100vw / var(--base-sp));
    margin-right: calc(24 * 100vw / var(--base-sp));
  }

  /* セクションヘッダー（flex-col gap:36 items-center） */
  .sp-service__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(36 * 100vw / var(--base-sp));
    width: 100%;
    margin-bottom: calc(10 * 100vw / var(--base-sp));
  }

  /* タイトルブロック（flex-col gap:16 text-center） */
  .sp-service__title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * 100vw / var(--base-sp));
    width: 100%;
  }

  /* "Service"（20px Inter Medium / gradient） */
  .sp-service__en {
    font-family: 'Inter', sans-serif;
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 500;
    background: linear-gradient(90deg, #78c8fc 0%, #f69dd6 94.79%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
  }

  /* "サービス紹介"（24px bold） */
  .sp-service__title {
    margin: 0;
    font-size: calc(24 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-black);
  }

  /* サブヘッドラッパー（position:relative / text-center） */
  .sp-service__subhead {
    position: relative;
    text-align: center;
  }

  /* 黄色バー（w:96 h:8 / left:66 top:39） */
  .sp-service__subhead-bar {
    position: absolute;
    left: calc(66 * 100vw / var(--base-sp));
    top:  calc(46 * 100vw / var(--base-sp));
    width:  calc(96 * 100vw / var(--base-sp));
    height: calc(8  * 100vw / var(--base-sp));
    background-color: var(--color-primary);
    z-index: 0;
  }

  /* サブヘッドテキスト（20px bold / lh:30 / whitespace-nowrap） */
  .sp-service__subhead-text {
    position: relative;
    z-index: 1;
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(30 * 100vw / var(--base-sp));
    white-space: nowrap;
    color: var(--color-black);
  }

  /* 「」の字詰め（tracking:-7.2px） */
  .sp-service__subhead-bracket {
    letter-spacing: calc(-7.2 * 100vw / var(--base-sp));
  }

  /* 説明エリア（flex-col items-center / w:259 / 左右センター / 下40px） */
  .sp-service__desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: calc(259 * 100vw / var(--base-sp));
    margin-bottom: calc(40 * 100vw / var(--base-sp));
  }

  /* "録音・録画データから"（16px bold lh:28 text-center） */
  .sp-service__desc-lead,
  .sp-service__desc-tail {
    font-size: calc(16 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(28 * 100vw / var(--base-sp));
    text-align: center;
    color: var(--color-black);
    white-space: nowrap;
  }

  /* タグコンテナ（flex-col gap:5 items-center） */
  .sp-service__tags {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(5 * 100vw / var(--base-sp));
  }

  /* 黄色タグ（20px bold / whitespace-nowrap） */
  .sp-service__tag {
    display: inline-flex;
    background-color: var(--color-primary);
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-black);
    white-space: nowrap;
  }

  /* 「集」の字詰め（tracking:-11px） */
  .sp-service__tag-shu {
    letter-spacing: calc(-11 * 100vw / var(--base-sp));
  }

  /* フローカード（relative / pl:24 pr:21 py:56 rounded:20 / overflow:hidden） */
  .sp-service__panel {
    position: relative;
    border-radius: calc(20 * 100vw / var(--base-sp));
    overflow: hidden;
    padding-left:   calc(24 * 100vw / var(--base-sp));
    padding-right:  calc(21 * 100vw / var(--base-sp));
    padding-top:    calc(56 * 100vw / var(--base-sp));
    padding-bottom: calc(56 * 100vw / var(--base-sp));
    width: 100%;
    box-sizing: border-box;
  }

  /* 背景画像（absolute inset:0 / 画像は left:-53.39% w:279%） */
  .sp-service__panel-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: calc(20 * 100vw / var(--base-sp));
    pointer-events: none;
  }

  .sp-service__panel-bg img {
    position: absolute;
    height: 100%;
    width: 279%;
    left: -53.39%;
    top: 0;
    max-width: none;
  }

  /* カード内コンテンツ（relative / flex-col gap:14 / w:297） */
  .sp-service__panel-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: calc(14 * 100vw / var(--base-sp));
    width: calc(297 * 100vw / var(--base-sp));
  }

  /* カードヘッダー（flex-col gap:30 items-center） */
  .sp-service__panel-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * 100vw / var(--base-sp));
    width: 100%;
    color: var(--color-black);
  }

  /* フロータイトル（24px bold text-center） */
  .sp-service__panel-title {
    margin: 0;
    font-size: calc(24 * 100vw / var(--base-sp));
    font-weight: 700;
    text-align: center;
    width: 100%;
  }

  /* フロー説明文（14px medium lh:22） */
  .sp-service__panel-desc {
    font-size: calc(14 * 100vw / var(--base-sp));
    font-weight: 500;
    line-height: calc(22 * 100vw / var(--base-sp));
    width: 100%;
  }

  /* ステップリスト（flex-col gap:10） */
  .sp-service__steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: calc(10 * 100vw / var(--base-sp));
    width: 100%;
  }

  /* 各ステップ（white / rounded:50 / pl:16 pr:20 py:12 / flex items-center） */
  .sp-service__step {
    display: flex;
    align-items: center;
    gap: calc(8 * 100vw / var(--base-sp));
    padding-left:   calc(16 * 100vw / var(--base-sp));
    padding-right:  calc(20 * 100vw / var(--base-sp));
    padding-top:    calc(12 * 100vw / var(--base-sp));
    padding-bottom: calc(12 * 100vw / var(--base-sp));
    background-color: var(--color-white);
    border-radius: calc(50 * 100vw / var(--base-sp));
    width: 100%;
    box-sizing: border-box;
  }

  /* ステップ番号ラッパー（CSS製サークル / 26×26px / #2B3655） */
  .sp-service__step-num-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:  calc(26 * 100vw / var(--base-sp));
    height: calc(26 * 100vw / var(--base-sp));
    border-radius: 50%;
    background-color: #2b3655;
  }

  /* ステップ番号テキスト（Inter bold 14px white） */
  .sp-service__step-num {
    font-family: 'Inter', sans-serif;
    font-size: calc(14 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
  }

  /* ステップテキスト（14px bold lh:20 / w:220） */
  .sp-service__step-text {
    font-size: calc(14 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(20 * 100vw / var(--base-sp));
    color: var(--color-black);
    width: calc(220 * 100vw / var(--base-sp));
  }

  /* ボトムバー（white / drop-shadow / rounded:20 / py:30 / flex center） */
  .sp-service__bottom-bar {
    background-color: var(--color-white);
    border-radius: calc(20 * 100vw / var(--base-sp));
    filter: drop-shadow(0 0 calc(10 * 100vw / var(--base-sp)) rgba(152, 118, 183, 0.25));
    padding-top:    calc(30 * 100vw / var(--base-sp));
    padding-bottom: calc(30 * 100vw / var(--base-sp));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* ボトムテキスト（24px bold lh:34 text-center） */
  .sp-service__bottom-text {
    font-size: calc(24 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(34 * 100vw / var(--base-sp));
    text-align: center;
    color: var(--color-black);
  }
}

/* ============================================================
  9. PC_サービス紹介
  Figma参照 (PC / 1366px):
    section: pt:116 px:96 / content w:1174 flex-col gap:69
    top: w:765 flex-col gap:54 items-center
      header: w:624 flex-col gap:70 items-center
        "Service": Inter Medium 32px gradient #78c8fc→#f69dd6
        "サービス紹介": Noto Bold 48px #2b3655
      subhead: inline-grid overlap / yellow-bar ml:400 mt:19 w:160 h:12 / text 32px Bold center
      desc: flex-col gap:17 / lead,tail 20px Bold lh:28 / tags flex gap:10 p:5 24px Bold
    flow: w:1174 h:815 (position:relative + flex for panels)
      panel: w:577 h:815 radius:20 overflow:hidden
        bg: left:-53.39% w:279% scaleX(-1)
        title: left:145(抄録集)/161(動画) top:56 32px Bold
        desc: left:46 top:121 w:485 16px Medium lh:28 center
        steps: left:46 top:203 flex-col gap:13 / pill w:485 h:48 px:20 py:10 radius:50 bg:white
          step-circle: 31×31 relative / step-num: centered Inter Bold 16px white
          step-text: ml:9 16px Bold lh:28 nowrap
      bottom-bar: absolute left:46 top:676 w:1082 py:30 px:269 bg:white radius:20 shadow
        text: 32px Bold center w:544
============================================================ */

.pc-service {
  width: 100%;
  padding-top:    calc(116 * var(--vw) / var(--base-pc));
  padding-bottom: 0;
  padding-left:   calc(96  * var(--vw) / var(--base-pc));
  padding-right:  calc(96  * var(--vw) / var(--base-pc));
  background-color: var(--color-white);
}

.service__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(69 * var(--vw) / var(--base-pc));
  width: calc(1174 * var(--vw) / var(--base-pc));
  margin: 0 auto;
}

/* -- 上部 -- */

/* Figma 264:1924: w:765 flex-col gap:54 → header-groupとdescの間 */
.service__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(54 * var(--vw) / var(--base-pc));
  width: calc(765 * var(--vw) / var(--base-pc));
}

/* Figma 264:1923: w:624 flex-col gap:70 → (Service+タイトル) と サブヘッドの間 */
.service__header-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(70 * var(--vw) / var(--base-pc));
  width: calc(624 * var(--vw) / var(--base-pc));
}

/* Figma 264:1833: flex-col gap:32 text-center */
.service__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--vw) / var(--base-pc));
  width: 100%;
  text-align: center;
}

.service__en {
  font-family: 'Inter', sans-serif;
  font-size: calc(32 * var(--vw) / var(--base-pc));
  font-weight: 500;
  background-image: linear-gradient(90deg, #78c8fc 0%, #f69dd6 94.79%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.service__title {
  margin: 0;
  font-family: var(--font-ja);
  font-size: calc(48 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: normal;
}

/* -- サブヘッド（黄色アンダーライン） -- */
.service__subhead {
  display: inline-block;   /* コンテンツ幅に縮める → 黄色バーがテキストに正確に追従 */
  position: relative;
  isolation: isolate;
}

.service__subhead-bar {
  position: absolute;
  left:   calc(400 * var(--vw) / var(--base-pc));
  bottom: calc(7   * var(--vw) / var(--base-pc));   /* 他セクションと同様：文字底辺に合わせる */
  width:  calc(160 * var(--vw) / var(--base-pc));
  height: calc(12  * var(--vw) / var(--base-pc));
  background-color: var(--color-primary);
  z-index: -1;
}

.service__subhead-text {
  font-family: var(--font-ja);
  font-size: calc(32 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
  line-height: normal;
  position: relative;
}

/* -- 説明テキスト -- */
.service__desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(17 * var(--vw) / var(--base-pc));
  width: 100%;
}

.service__desc-lead,
.service__desc-tail {
  font-family: var(--font-ja);
  font-size: calc(20 * var(--vw) / var(--base-pc));
  font-weight: 700;
  line-height: calc(28 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  text-align: center;
  width: 100%;
}

.service__tags {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--vw) / var(--base-pc));
}

.service__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(5 * var(--vw) / var(--base-pc));
  background-color: var(--color-primary);
  font-family: var(--font-ja);
  font-size: calc(24 * var(--vw) / var(--base-pc));
  font-weight: 700;
  line-height: calc(36 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  white-space: nowrap;
}

/* 「集」の letter-spacing -11px */
.service__tag-shu {
  letter-spacing: calc(-11 * var(--vw) / var(--base-pc));
}

/* -- フロー -- */
.service__flow {
  position: relative;
  display: flex;
  gap: calc(20 * var(--vw) / var(--base-pc));
  width: calc(1174 * var(--vw) / var(--base-pc));
  height: calc(815 * var(--vw) / var(--base-pc));
}

/* -- パネル共通 -- */
.service__panel {
  position: relative;
  flex-shrink: 0;
  width: calc(577 * var(--vw) / var(--base-pc));
  height: calc(815 * var(--vw) / var(--base-pc));
  border-radius: calc(20 * var(--vw) / var(--base-pc));
  overflow: hidden;
}

.service__panel-bg-wrap {
  position: absolute;
  inset: 0;
  background-image: url('../img/service/bg.webp');
  background-size: cover;
  background-position: center;
  transform: scaleX(-1);   /* Figmaの rotate(180deg)scaleY(-1) と等価：グラデーション方向を反転 */
}

.service__panel-title {
  margin: 0;
  position: absolute;
  top: calc(56 * var(--vw) / var(--base-pc));
  font-family: var(--font-ja);
  font-size: calc(32 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: normal;
  white-space: nowrap;
}

.service__panel--left .service__panel-title {
  left: calc(145 * var(--vw) / var(--base-pc));
}

.service__panel--right .service__panel-title {
  left: calc(161 * var(--vw) / var(--base-pc));
}

.service__panel-desc {
  position: absolute;
  left:  calc(46  * var(--vw) / var(--base-pc));
  top:   calc(121 * var(--vw) / var(--base-pc));
  width: calc(485 * var(--vw) / var(--base-pc));
  font-family: var(--font-ja);
  font-size: calc(16 * var(--vw) / var(--base-pc));
  font-weight: 500;
  line-height: calc(28 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  text-align: center;
}

/* -- ステップリスト -- */
.service__steps {
  position: absolute;
  left:    calc(46  * var(--vw) / var(--base-pc));
  top:     calc(203 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  gap:     calc(13  * var(--vw) / var(--base-pc));
  list-style: none;
  margin: 0;
  padding: 0;
}

.service__step {
  display: flex;
  align-items: center;
  width:  calc(485 * var(--vw) / var(--base-pc));
  height: calc(48  * var(--vw) / var(--base-pc));
  padding-left:  calc(20 * var(--vw) / var(--base-pc));
  padding-right: calc(20 * var(--vw) / var(--base-pc));
  border-radius: calc(50 * var(--vw) / var(--base-pc));
  background-color: var(--color-white);
}

.service__step-circle {
  position: relative;
  flex-shrink: 0;
  width:  calc(31 * var(--vw) / var(--base-pc));
  height: calc(31 * var(--vw) / var(--base-pc));
  border-radius: 50%;
  background: linear-gradient(135deg, #3b4a6b 0%, #2b3655 100%);
}

.service__step-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: calc(16 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.service__step-text {
  margin-left: calc(9 * var(--vw) / var(--base-pc));
  font-family: var(--font-ja);
  font-size: calc(16 * var(--vw) / var(--base-pc));
  font-weight: 700;
  line-height: calc(28 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  white-space: nowrap;
}

/* -- ボトムバー -- */
.service__bottom-bar {
  position: absolute;
  left:  calc(46   * var(--vw) / var(--base-pc));
  top:   calc(670  * var(--vw) / var(--base-pc));
  width: calc(1082 * var(--vw) / var(--base-pc));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:    calc(20  * var(--vw) / var(--base-pc));
  padding-bottom: calc(20  * var(--vw) / var(--base-pc));
  padding-left:   calc(269 * var(--vw) / var(--base-pc));
  padding-right:  calc(269 * var(--vw) / var(--base-pc));
  border-radius: calc(20 * var(--vw) / var(--base-pc));
  background-color: var(--color-white);
  box-shadow: 0 0 calc(10 * var(--vw) / var(--base-pc)) 0 rgba(152, 118, 183, 0.25);
  z-index: 1;
}

.service__bottom-text {
  font-family: var(--font-ja);
  font-size: calc(32 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  text-align: center;
  line-height: normal;
  width: calc(544 * var(--vw) / var(--base-pc));
}

/* ============================================================
  10-SP. SP_料金プラン
  Figma参照 (SP / 390px):
    pt:60 pb:60 / px:24 / bg:var(--color-bg-gray) / flex-col items-center gap:36
    タイトル: "Plan" Inter Medium 20px gradient #78c8fc→#f69dd6 / "料金プラン" 24px Bold #2b3655
    カードコンテナ: flex-col gap:10 w:342
    各カード: white / drop-shadow(0 0 10px rgba(152,118,183,0.25)) / rounded:10 / p:24 / flex-col gap:32 items-center
      タイトルバー: bg:#2b3655 rounded:20 py:14 w:full / text 20px Bold white center
      行: flex items-end justify-between w:294 / label 16px Medium lh:34 / amount Inter Bold 30px + unit 14px Medium
      区切り線: w:294 border-top rgba(152,118,183,0.4)
      注記: 12px Medium text-right w:294
      注意書き: 12px Medium w:294 mt:-28（gap:32を4pxに圧縮）
============================================================ */
.sp-plan { display: none; }

@media (max-width: 1024px) {
  .pc-plan { display: none; }

  .sp-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(36 * 100vw / var(--base-sp));
    padding-top:    calc(60 * 100vw / var(--base-sp));
    padding-bottom: calc(60 * 100vw / var(--base-sp));
    padding-left:   calc(24 * 100vw / var(--base-sp));
    padding-right:  calc(24 * 100vw / var(--base-sp));
    background-color: var(--color-bg-gray);
  }

  .sp-plan__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * 100vw / var(--base-sp));
    width: 100%;
  }

  .sp-plan__en {
    font-family: 'Inter', sans-serif;
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 500;
    background: linear-gradient(90deg, #78c8fc 0%, #f69dd6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .sp-plan__title {
    margin: 0;
    font-size: calc(24 * 100vw / var(--base-sp));
    font-weight: 700;
    color: #2b3655;
    text-align: center;
  }

  .sp-plan__cards {
    display: flex;
    flex-direction: column;
    gap: calc(10 * 100vw / var(--base-sp));
    width: calc(342 * 100vw / var(--base-sp));
  }

  .sp-plan__card {
    background-color: var(--color-white);
    border-radius: calc(10 * 100vw / var(--base-sp));
    filter: drop-shadow(0 0 calc(10 * 100vw / var(--base-sp)) rgba(152, 118, 183, 0.25));
    padding: calc(24 * 100vw / var(--base-sp));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * 100vw / var(--base-sp));
  }

  .sp-plan__card-bar {
    background-color: #2b3655;
    border-radius: calc(20 * 100vw / var(--base-sp));
    padding-top:    calc(14 * 100vw / var(--base-sp));
    padding-bottom: calc(14 * 100vw / var(--base-sp));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sp-plan__card-bar-text {
    margin: 0;
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
  }

  .sp-plan__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: calc(294 * 100vw / var(--base-sp));
  }

  .sp-plan__row-label {
    font-size: calc(16 * 100vw / var(--base-sp));
    font-weight: 500;
    line-height: calc(34 * 100vw / var(--base-sp));
    color: var(--color-black);
  }

  .sp-plan__row-label--bold {
    font-weight: 700;
  }

  .sp-plan__row-amount {
    display: flex;
    align-items: flex-end;
  }

  .sp-plan__row-num {
    font-family: 'Inter', sans-serif;
    font-size: calc(30 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-black);
    line-height: 1;
  }

  .sp-plan__row-unit {
    font-size: calc(14 * 100vw / var(--base-sp));
    font-weight: 500;
    color: var(--color-black);
    line-height: calc(30 * 100vw / var(--base-sp));
  }

  .sp-plan__divider {
    width: calc(294 * 100vw / var(--base-sp));
    height: 0;
    border-top: 1px solid rgba(152, 118, 183, 0.4);
  }

  .sp-plan__note {
    width: calc(294 * 100vw / var(--base-sp));
    font-size: calc(12 * 100vw / var(--base-sp));
    font-weight: 500;
    color: var(--color-black);
    text-align: right;
  }

  .sp-plan__caution {
    width: calc(294 * 100vw / var(--base-sp));
    font-size: calc(12 * 100vw / var(--base-sp));
    font-weight: 500;
    color: var(--color-black);
    margin-top: calc(-15 * 100vw / var(--base-sp));   /* gap:20 を 5px に圧縮 */
  }
}

/* ============================================================
  10. 料金プラン
  Figma参照 (PC / 1366px):
    pt: 116px / px: 96px / bg: #f3f2f0
    コンテンツ幅: 1174px / gap: 70px / items-center
    ヘッダー: w:624 / gap:32 / center
      "Plan": Inter Medium 32px / グラデーション #78c8fc→#f69dd6 (90deg)
      "料金プラン": Noto Bold 48px #2b3655
    左カード: w:577 py:56 px:42 gap:32 / white / rounded:10 / shadow:0 0 10px rgba(152,118,183,0.25)
      タイトルバー: w:full h:58 bg:#2b3655 rounded:20
      行: w:448 / ラベル:Noto Medium 20px lh:34 / 数値:Inter Bold 36px / 単位:Noto Medium 16px
      合計: 数値 Inter Bold 42px
      区切り線: w:493 border-top
    右カード: w:577 h:541 / white / rounded:10 / shadow / 全子要素 position:absolute
      タイトルバー: left:42 top:56 right:42 h:58
      行: left:64.5 w:448 / top: 146 / 204 / 262 / 410 / 473
      区切り線: left:42 top:378 w:493
      注記: left:64.5 top:238 / Noto Regular 14px
============================================================ */
.pc-plan {
  background-color: var(--color-bg-gray);
  padding-top: calc(116 * var(--vw) / var(--base-pc));
  padding-bottom: 0;
  padding-left: calc(96 * var(--vw) / var(--base-pc));
  padding-right: calc(96 * var(--vw) / var(--base-pc));
}

.plan__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(70 * var(--vw) / var(--base-pc));
  width: calc(1174 * var(--vw) / var(--base-pc));
}

/* -- ヘッダー -- */
.plan__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--vw) / var(--base-pc));
  width: calc(624 * var(--vw) / var(--base-pc));
  text-align: center;
}

.plan__en {
  font-family: 'Inter', sans-serif;
  font-size: calc(32 * var(--vw) / var(--base-pc));
  font-weight: 500;
  background-image: linear-gradient(90deg, #78c8fc 0%, #f69dd6 94.79%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.plan__title {
  margin: 0;
  font-size: calc(48 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: normal;
}

/* -- カード行 -- */
.plan__cards {
  display: flex;
  align-items: stretch;   /* 両カードを同じ高さに揃える */
  justify-content: space-between;
  width: 100%;
}

/* 共通カードスタイル */
.plan__card {
  flex-shrink: 0;
  background-color: var(--color-white);
  border-radius: calc(10 * var(--vw) / var(--base-pc));
  box-shadow: 0 0 calc(10 * var(--vw) / var(--base-pc)) 0 rgba(152, 118, 183, 0.25);
}

/* タイトルバー共通 */
.plan__card-bar {
  background-color: var(--color-black);
  border-radius: calc(20 * var(--vw) / var(--base-pc));
  height: calc(58 * var(--vw) / var(--base-pc));
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan__card-bar-text {
  margin: 0;
  font-size: calc(24 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-white);
  white-space: nowrap;
  line-height: normal;
}

/* -- 左カード（抄録集 A4両面）-- */
.plan__card--left {
  width: calc(577 * var(--vw) / var(--base-pc));
  padding: calc(56 * var(--vw) / var(--base-pc)) calc(42 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--vw) / var(--base-pc));
}

.plan__card--left .plan__card-bar {
  width: 100%;
}

/* 料金行コンテナ */
.plan__row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: calc(448 * var(--vw) / var(--base-pc));
}

/* 行内フレックス：ラベル左端・金額右端 */
.plan__row-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: calc(16 * var(--vw) / var(--base-pc));
}

/* 備考行は右端に寄せる */
.plan__row-inner--end {
  justify-content: flex-end;
}

/* ラベル */
.plan__row-label {
  font-size: calc(20 * var(--vw) / var(--base-pc));
  font-weight: 500;
  color: var(--color-black);
  line-height: calc(34 * var(--vw) / var(--base-pc));
  white-space: nowrap;
}

.plan__row-label--bold {
  font-weight: 700;
}

/* 金額グループ：flex-shrink:0 で縮まず右端に固定 */
.plan__row-amount {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

/* 数字（Inter Bold） */
.plan__row-num {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: calc(36 * var(--vw) / var(--base-pc));
  color: var(--color-black);
}

.plan__row-num--lg {
  font-size: calc(42 * var(--vw) / var(--base-pc));
}

/* 単位 */
.plan__row-unit {
  font-size: calc(16 * var(--vw) / var(--base-pc));
  font-weight: 500;
  color: var(--color-black);
}

/* 区切り線 */
.plan__divider {
  flex-shrink: 0;
  width: calc(493 * var(--vw) / var(--base-pc));
  height: 0;
  border-top: 1px solid rgba(152, 118, 183, 0.4);
}

/* 備考テキスト */
.plan__note-text {
  font-size: calc(16 * var(--vw) / var(--base-pc));
  font-weight: 500;
  color: var(--color-black);
  line-height: calc(34 * var(--vw) / var(--base-pc));
  white-space: nowrap;
}

/* -- 右カード（動画）-- */
.plan__card--right {
  width: calc(577 * var(--vw) / var(--base-pc));
  padding: calc(56 * var(--vw) / var(--base-pc)) calc(42 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--vw) / var(--base-pc));
}

.plan__card--right .plan__card-bar {
  width: 100%;
}

/* 注記（編集内容により変更がございます）
   右カード flex-col 内の独立アイテム。
   直上の flex gap (32px) を相殺して 編集料行のすぐ下に寄せる。
   直下の gap は標準 32px → 150,000〜250,000 間と同じ見た目 */
.plan__caution {
  width: calc(448 * var(--vw) / var(--base-pc));   /* plan__row と揃える */
  margin-top: calc(-28 * var(--vw) / var(--base-pc)); /* gap:32 を 4px に圧縮 */
  font-size: calc(14 * var(--vw) / var(--base-pc));
  font-weight: 400;
  color: var(--color-black);
  line-height: calc(34 * var(--vw) / var(--base-pc));
  white-space: nowrap;
}

/* 右カードの営業管理行を左カードと同じ高さに揃える
   margin-top:auto で上の余白を吸収し、divider も連動して同位置に揃う */
.plan__row--push {
  margin-top: auto;
}

/* ============================================================
  11-SP. SP_よくあるご質問
  Figma参照 (SP / 390px):
    py:60 / px:24 / bg:var(--color-bg-gray) / flex-col items-center gap:40
    タイトル: "FAQ" Inter Medium 20px gradient / "よくあるご質問" 24px Bold #2b3655 / gap:16
    カードリスト: flex-col gap:16 w:342
    各カード: white / drop-shadow(0 0 10px rgba(152,118,183,0.25)) / rounded:10 / p:24 / flex-col gap:16
      質問ブロック: flex-col gap:16 w:294
        Qアイコン: 30×30 rounded:50% bg:#2b3655 / "Q" Inter Medium 16px white
        質問テキスト: Noto Bold 16px lh:24 #2b3655
      区切り線: w:full border-top rgba(152,118,183,0.4)
      回答テキスト: Noto Medium 14px lh:22 #2b3655
============================================================ */
.sp-faq { display: none; }

@media (max-width: 1024px) {
  .pc-faq { display: none; }

  .sp-faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40 * 100vw / var(--base-sp));
    padding-bottom: calc(60 * 100vw / var(--base-sp));
    padding-left:   calc(24 * 100vw / var(--base-sp));
    padding-right:  calc(24 * 100vw / var(--base-sp));
    background-color: var(--color-bg-gray);
  }

  .sp-faq__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * 100vw / var(--base-sp));
    width: 100%;
  }

  .sp-faq__en {
    font-family: 'Inter', sans-serif;
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 500;
    background-image: linear-gradient(90deg, #78c8fc 0%, #f69dd6 94.79%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
  }

  .sp-faq__title {
    margin: 0;
    font-size: calc(24 * 100vw / var(--base-sp));
    font-weight: 700;
    color: #2b3655;
    text-align: center;
  }

  /* -- カードリスト -- */
  .sp-faq__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: calc(16 * 100vw / var(--base-sp));
    width: calc(342 * 100vw / var(--base-sp));
  }

  /* -- 各カード -- */
  .sp-faq__item {
    background-color: var(--color-white);
    border-radius: calc(10 * 100vw / var(--base-sp));
    filter: drop-shadow(0 0 calc(10 * 100vw / var(--base-sp)) rgba(152, 118, 183, 0.25));
    padding: calc(24 * 100vw / var(--base-sp));
    display: flex;
    flex-direction: column;
    gap: calc(16 * 100vw / var(--base-sp));
  }

  /* -- 質問ブロック（Qアイコン行 + 区切り線） -- */
  .sp-faq__question-block {
    display: flex;
    flex-direction: column;
    gap: calc(16 * 100vw / var(--base-sp));
    width: 100%;
  }

  /* -- Q行（アイコン + テキスト） -- */
  .sp-faq__question-row {
    display: flex;
    align-items: flex-start;
    gap: calc(14 * 100vw / var(--base-sp));
    width: 100%;
  }

  /* Q アイコン（CSSで実装） */
  .sp-faq__q-icon {
    flex-shrink: 0;
    width:  calc(30 * 100vw / var(--base-sp));
    height: calc(30 * 100vw / var(--base-sp));
    border-radius: 50%;
    background-color: #2b3655;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sp-faq__q-letter {
    font-family: 'Inter', sans-serif;
    font-size: calc(16 * 100vw / var(--base-sp));
    font-weight: 500;
    color: var(--color-white);
    line-height: 1;
  }

  /* 質問テキスト */
  .sp-faq__question-text {
    margin: 0;
    font-size: calc(16 * 100vw / var(--base-sp));
    font-weight: 700;
    line-height: calc(24 * 100vw / var(--base-sp));
    color: #2b3655;
  }

  /* -- 区切り線 -- */
  .sp-faq__divider {
    width: 100%;
    height: 0;
    border-top: 1px solid rgba(152, 118, 183, 0.4);
  }

  /* -- 回答テキスト -- */
  .sp-faq__answer {
    font-size: calc(14 * 100vw / var(--base-sp));
    font-weight: 500;
    line-height: calc(22 * 100vw / var(--base-sp));
    color: #2b3655;
  }
}

/* ============================================================
  11. よくあるご質問（FAQ）
  Figma参照 (PC / 1366px):
    pt: 116px / px: 96px / pb: 116px / bg: #f3f2f0
    内コンテナ幅: 1174px / position:relative
    ヘッダー: 絶対配置 left:275 top:0 / w:624 / flex-col gap:32 / center
      "FAQ": Inter Medium 32px / グラデーション #78c8fc→#f69dd6
      "よくあるご質問": Noto Bold 48px #2b3655
    カードリスト: pt:160 / flex-col gap:24
    各カード: w:full px:60 py:50 / bg:white / rounded:10
               shadow:0 0 10px rgba(152,118,183,0.25)
      内部 flex-col gap:24
      質問行: flex gap(9) / Qアイコン35×35 + 質問テキスト(mt:9) Noto Bold 24px
      区切り線: w:full border-top
      回答: Noto Medium 16px lh:24 tracking:0.48px
============================================================ */
.pc-faq {
  background-color: var(--color-bg-gray);
  padding-top:    calc(116 * var(--vw) / var(--base-pc));
  padding-bottom: 0;
  padding-left:   calc(96  * var(--vw) / var(--base-pc));
  padding-right:  calc(96  * var(--vw) / var(--base-pc));
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(1174 * var(--vw) / var(--base-pc));
}

/* -- セクションヘッダー -- */
.faq__header {
  width: calc(624 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--vw) / var(--base-pc));
  text-align: center;
  margin-bottom: calc(70 * var(--vw) / var(--base-pc));
}

.faq__en {
  font-family: 'Inter', sans-serif;
  font-size: calc(32 * var(--vw) / var(--base-pc));
  font-weight: 500;
  background-image: linear-gradient(90deg, #78c8fc 0%, #f69dd6 94.79%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.faq__title {
  margin: 0;
  font-size: calc(48 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: normal;
}

/* -- カードリスト -- */
.faq__list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--vw) / var(--base-pc));
}

/* -- 各カード -- */
.faq__item {
  background-color: var(--color-white);
  border-radius: calc(10 * var(--vw) / var(--base-pc));
  box-shadow: 0 0 calc(10 * var(--vw) / var(--base-pc)) 0 rgba(152, 118, 183, 0.25);
  padding: calc(50 * var(--vw) / var(--base-pc)) calc(60 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--vw) / var(--base-pc));
}

/* -- 質問行 -- */
.faq__question-row {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--vw) / var(--base-pc));
  width: 100%;
}

/* Q アイコン（CSSで実装）*/
.faq__q-icon {
  flex-shrink: 0;
  width:  calc(35 * var(--vw) / var(--base-pc));
  height: calc(35 * var(--vw) / var(--base-pc));
  border-radius: 50%;
  background: linear-gradient(135deg, #3b4a6b 0%, #2b3655 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq__q-letter {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: calc(18 * var(--vw) / var(--base-pc));
  color: var(--color-white);
  line-height: 1;
  text-transform: uppercase;
}

/* 質問テキスト */
.faq__question-text {
  margin: 0;
  font-size: calc(24 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-black);
  line-height: normal;
  width: calc(828 * var(--vw) / var(--base-pc));
}

/* -- 区切り線 -- */
.faq__divider {
  width: 100%;
  height: 0;
  border-top: 1px solid rgba(152, 118, 183, 0.4);
  flex-shrink: 0;
}

/* -- 回答テキスト -- */
.faq__answer {
  font-size: calc(16 * var(--vw) / var(--base-pc));
  font-weight: 500;
  color: var(--color-black);
  line-height: calc(24 * var(--vw) / var(--base-pc));
  letter-spacing: 0.48px;
  width: 100%;
}

/* ============================================================
  12-SP. SP_CTA
  Figma参照 (SP / 390px):
    section: py:50 px:9 / position:relative / flex-col items-center
    ダークカード: absolute top:0 left:0 right:0 h:347 bg:#2b3655 rounded:20
    コンテンツ: relative z-1 / flex-col gap:30 items-center w:324
      タイトル: 30px Bold white / "資産化" color:--color-primary
      ボディ: 16px Medium white lh:24 center
      ボタン: bg:--color-primary h:66 w:294 rounded:50 / flex items-center gap
        アイコン: img/cta/cta_mail.svg 23×17
        テキスト: 20px Bold #2b3655 tracking:0.6px nowrap
============================================================ */
.sp-cta { display: none; }

@media (max-width: 1024px) {
  .pc-cta { display: none; }

  .sp-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:    calc(50 * 100vw / var(--base-sp));
    padding-bottom: calc(50 * 100vw / var(--base-sp));
    padding-left:   calc(9 * 100vw / var(--base-sp));
    padding-right:  calc(9 * 100vw / var(--base-sp));
    margin-left:  calc(24 * 100vw / var(--base-sp));
    margin-right: calc(24 * 100vw / var(--base-sp));
  }

  /* ダークカード（絶対配置・セクション全体を覆う） */
  .sp-cta__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2b3655;
    border-radius: calc(20 * 100vw / var(--base-sp));
  }

  /* コンテンツ */
  .sp-cta__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * 100vw / var(--base-sp));
    width: calc(324 * 100vw / var(--base-sp));
  }

  .sp-cta__title {
    font-size: calc(30 * 100vw / var(--base-sp));
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
    line-height: normal;
  }

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

  .sp-cta__body {
    font-size: calc(16 * 100vw / var(--base-sp));
    font-weight: 500;
    line-height: calc(24 * 100vw / var(--base-sp));
    color: var(--color-white);
    text-align: center;
  }

  .sp-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * 100vw / var(--base-sp));
    background-color: var(--color-primary);
    border-radius: calc(50 * 100vw / var(--base-sp));
    height: calc(66 * 100vw / var(--base-sp));
    width: calc(294 * 100vw / var(--base-sp));
    text-decoration: none;
  }

  .sp-cta__btn-icon {
    flex-shrink: 0;
    width:  calc(23 * 100vw / var(--base-sp));
    height: calc(17 * 100vw / var(--base-sp));
  }

  .sp-cta__btn-text {
    font-size: calc(20 * 100vw / var(--base-sp));
    font-weight: 700;
    color: #2b3655;
    letter-spacing: 0.6px;
    white-space: nowrap;
  }
}

/* ============================================================
  12. CTA
  Figma参照 (PC / 1366px):
    section: pt:163 pb:116 px:40 / bg: --color-bg-gray
    card: 1286×517 rounded:20 bg:#2b3655 / px:280 py:116
    illust: absolute right:0 top:0 w:609 h:517 mix-blend-multiply
    content-width: 726 / gap: 54
    title: 48px bold white / accent: #ddff00
    body: 24px medium white lh:34
    btn: 528×90 bg:#ddff00 rounded:50px
    btn-text: 32px bold #2b3655 tracking:0.96px
    btn-icon: 31×23px
============================================================ */
.pc-cta {
  background-color: var(--color-bg-gray);
  padding-top:    calc(163 * var(--vw) / var(--base-pc));
  padding-bottom: calc(116 * var(--vw) / var(--base-pc));
  padding-left:   calc(40  * var(--vw) / var(--base-pc));
  padding-right:  calc(40  * var(--vw) / var(--base-pc));
}

.cta__card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(517 * var(--vw) / var(--base-pc));
  background-color: #2b3655;
  border-radius: calc(20 * var(--vw) / var(--base-pc));
  display: flex;
  align-items: center;
  padding-left:  calc(280 * var(--vw) / var(--base-pc));
  padding-right: calc(280 * var(--vw) / var(--base-pc));
}

/* -- イラスト（右側絶対配置 / mix-blend-multiply） -- */
.cta__illust {
  position: absolute;
  right: 0;
  top: 0;
  width:  calc(609 * var(--vw) / var(--base-pc));
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cta__illust img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left center;
}

/* -- コンテンツ（テキスト＋ボタン） -- */
.cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(54 * var(--vw) / var(--base-pc));
  width: calc(726 * var(--vw) / var(--base-pc));
}

.cta__texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(54 * var(--vw) / var(--base-pc));
  text-align: center;
  width: 100%;
}

/* -- タイトル -- */
.cta__title {
  font-family: var(--font-ja);
  font-size: calc(48 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-white);
  line-height: normal;
  white-space: nowrap;
}

.cta__title--accent {
  color: var(--color-primary);   /* #dcfe00 */
}

/* -- ボディテキスト -- */
.cta__body {
  font-family: var(--font-ja);
  font-size: calc(24 * var(--vw) / var(--base-pc));
  font-weight: 500;
  color: var(--color-white);
  line-height: calc(34 * var(--vw) / var(--base-pc));
}

/* -- CTAボタン -- */
.cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(13 * var(--vw) / var(--base-pc));
  width:  calc(528 * var(--vw) / var(--base-pc));
  height: calc(90  * var(--vw) / var(--base-pc));
  background-color: var(--color-primary);   /* #dcfe00 */
  border-radius: calc(50 * var(--vw) / var(--base-pc));
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.cta__btn:hover {
  background-color: #ffffff;
}

.cta__btn-icon {
  width:  calc(31 * var(--vw) / var(--base-pc));
  height: calc(23 * var(--vw) / var(--base-pc));
  display: block;
  flex-shrink: 0;
}

.cta__btn-text {
  font-family: var(--font-ja);
  font-size: calc(32 * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: #2b3655;
  letter-spacing: 0.96px;
  white-space: nowrap;
  line-height: 1;
}

/* ============================================================
  13. フッター
  Figma参照 (PC / 1366px):
    height: 96px / bg: #424242
    padding: 19px 121px 19px 128px（内側コンテナ幅: 1117px）
    ロゴ: 96×57.57px（左端）
    リンク: 16px bold / gap: 48px / color: white / underline
    コピーライト: 14px regular / color: white / tracking: 0.42px
    右側グループ: gap縦 23px / align: right
============================================================ */
.site-footer {
  --pc-h: 96;   /* Figma PC: フッター高さ */

  background-color: var(--color-footer);
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
  width: 100%;          /* is-capped 時もflex子要素として伸ばす */
  align-self: stretch;  /* body.is-capped(flex)のとき背景を画面端まで伸ばす */
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-inner {
  --pc-inner-w: 1117;   /* Figma PC: 内側コンテナ幅 */

  width: calc(var(--pc-inner-w) * var(--vw) / var(--base-pc));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo img {
  --pc-logo-w: 96;        /* Figma PC: ロゴ幅 */
  --pc-logo-h: 57.571;    /* Figma PC: ロゴ高さ */

  width:  calc(var(--pc-logo-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-logo-h) * var(--vw) / var(--base-pc));
}

.footer-right {
  --pc-right-w: 282;   /* Figma PC: 右グループ幅 */

  width: calc(var(--pc-right-w) * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(23 * var(--vw) / var(--base-pc));   /* Figma PC: リンク行とコピーライト間 23px */
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: calc(48 * var(--vw) / var(--base-pc));   /* Figma PC: リンク間ギャップ 48px */
}

.footer-nav__link {
  --pc-size: 16;   /* Figma PC: 16px bold */

  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 700;
  color: var(--color-white);
  text-decoration: underline;
  letter-spacing: 0.03em;   /* 0.48px ÷ 16px */
  white-space: nowrap;
  transition: opacity 0.2s;
}

.footer-nav__link:hover {
  opacity: 0.7;
}

.footer-copyright {
  --pc-size: 14;   /* Figma PC: 14px regular */

  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.03em;   /* 0.42px ÷ 14px */
  white-space: nowrap;
}

/* ============================================================
  SP_フッター
  Figma参照 (SP / 390px):
    outer: pt:60（上の余白）
    footer: bg:#424242 px:24 py:30 / flex-col items-center w:full
      コンテンツ: flex-col gap:20 items-center w:342
        ロゴ: 96×57.571 (img/logo-white.svg)
        テキストブロック: flex-col gap:23 items-center w:282
          nav: flex gap:48 / 16px Bold white underline tracking:0.48px
          copyright: 12px Regular white text-center tracking:0.36px
============================================================ */
@media (max-width: 1024px) {
  /* フッター全体: 透明 + 上余白60px（ダーク背景はfooter-innerへ移動） */
  .site-footer {
    background-color: transparent;
    height: auto;
    padding-top: calc(60 * 100vw / var(--base-sp));
    padding-left: 0;
    padding-right: 0;
    align-items: stretch;
    flex-direction: column;
  }

  /* フッター内: ダーク背景・縦並びレイアウト */
  .footer-inner {
    background-color: var(--color-footer);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(20 * 100vw / var(--base-sp));
    width: 100%;
    padding: calc(30 * 100vw / var(--base-sp)) calc(24 * 100vw / var(--base-sp));
    box-sizing: border-box;
  }

  .footer-logo img {
    width:  calc(96 * 100vw / var(--base-sp));
    height: calc(57.571 * 100vw / var(--base-sp));
  }

  .footer-right {
    width: calc(282 * 100vw / var(--base-sp));
    align-items: center;   /* PC: flex-end → SP: center */
    gap: calc(23 * 100vw / var(--base-sp));
  }

  .footer-nav {
    gap: calc(48 * 100vw / var(--base-sp));
    justify-content: center;
  }

  .footer-nav__link {
    font-size: calc(16 * 100vw / var(--base-sp));
  }

  .footer-copyright {
    font-size: calc(12 * 100vw / var(--base-sp));
    text-align: center;
    white-space: normal;
    letter-spacing: 0.03em;   /* 0.36px ÷ 12px */
  }
}

/* ============================================================
  SP未実装セクション — SP表示時は非表示
  ★SP版実装時にこのルールを削除して sp-xxx / pc-xxx の切り替えへ移行する
============================================================ */
@media (max-width: 1024px) {
  .pc-concerns    { display: none; }
  .naze__card-bg  { display: none; }
}