@charset "UTF-8";

/* ==========================================================================
   KDDI Market Compass LP
   Figma: KDDI Market Compass_260716_A (node 351:1826 / 幅 1366px)
   ・ページ背景(メッシュ)は共通の .l-main-container__deco(container_bg01〜03)
     + 既定の --bg-color(#EEF2F3)を使う。deco 要素は blade 側でヘッダー前に配置。
   ・共通トークンは common.css の :root を再利用

   【単位について】
   本サイトは html { font-size: calc(16 / 1800 * 100vw) }(SP は 414 基準)で
   ビューポート幅に追従する。他ページ(service/*.css)と同様に、寸法はすべて
   calc(N / var(--font-size) * 1rem) で書き、固定 px は使わない。
   固定 px にすると背景メッシュ(幅 100% + aspect-ratio で流体)だけが伸縮し、
   コンテンツとの位置がワイド画面でずれる。

   PC の N は Figma 実寸(1366px 基準)を 1800/1366 = 1.3177 倍した値。
     例)Figma 990px → N = 1304.5 / Figma 456px → N = 600.9
   各宣言のコメントに Figma 実寸を併記している。
   SP の N は 414px 基準の実寸そのまま(共通 CSS と同じ)。
   ========================================================================== */

/* ヘッダー直下の隙間をなくす:共通 .l-header は padding-top 140(≈106px)確保だが、
   このページは hero を詰めるため 127(≈96px=バー高)に上書きする。
   header.css は全ページ共通なので触らず、このページ限定で :has(.mc) スコープで上書き。 */
@media (min-width: 768px) {
  .l-main-container:has(.mc) .l-header {
    padding-top: calc(127 / var(--font-size) * 1rem);
  }

  .l-main-container__deco > span:nth-child(3) {
    margin-top: calc((2487 - 206) / var(--font-size) * 1rem);
  }
}
/* SP も同様。共通は padding-top 110 だがバー(.l-header__inner)の実高は 82 なので、
   差の 28 が白い帯になり hero 上端(六角形の切り口)との境に線として見えてしまう。 */
@media (max-width: 767px) {
  .l-main-container:has(.mc) .l-header {
    padding-top: calc(82 / var(--font-size) * 1rem);
  }
}

/* ==========================================================================
   PC
   ========================================================================== */
@media all and (min-width: 768px), print {
  .mc {
    --mc-marker: #faffae;      /* マーカー(黄) */
    --mc-ghost: #f8fafa;       /* 装飾番号(薄グレー) */
    --mc-mv-text: #5d5e6b;     /* MVリード文 */
    --mc-inner: calc(1304.5 / var(--font-size) * 1rem);   /* Figma 990 コンテンツ標準幅 */

    position: relative;
    width: 100%;
    z-index: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt" 1;
    color: var(--black-color);
  }

  .mc > section {
    position: relative;
    z-index: 1;
  }

  /* ------------------------------------------------------------------------
     共通パーツ
     ------------------------------------------------------------------------ */

  /* 見出し(下線付き) */
  .mc-ttl {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding-bottom: calc(13.4 / var(--font-size) * 1rem);   /* Figma 10.2 */
    /* Figma: 下線は #2763FF(lightblue/500)。太さ 1.7・テキストとの間隔 10.2 */
    border-bottom: calc(2.2 / var(--font-size) * 1rem) solid var(--primary-color-300);
    color: var(--primary-color-500);
    font-size: calc(44.8 / var(--font-size) * 1rem);        /* Figma 34 */
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  /* マーカー(インライン) */
  .mc-mark {
    background: linear-gradient(
      to top,
      var(--mc-marker) calc(10.5 / var(--font-size) * 1rem),
      transparent calc(10.5 / var(--font-size) * 1rem)
    );                                                      /* Figma 8 */
    color: inherit;
  }

  /* ボタン */
  .mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(42.2 / var(--font-size) * 1rem);    /* Figma 32 */
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    /* 共通ボタン .c-btn__inner と同じ。枠線は通常時は背景と同色で見えないが、
       ホバーで背景が白に反転したときに輪郭として残る(共通ボタンと同じ挙動)。 */
    border: calc(2 / var(--font-size) * 1rem) solid transparent;
    transition: all .2s;
    padding: calc(26.3 / var(--font-size) * 1rem) calc(40.5 / var(--font-size) * 1rem); /* Figma 19.992 / 30.758 */
  }

  /* 塗りボタン(オレンジ)。他ページの .c-btn--secondary と同じ「反転」ホバーに揃える
     (共通:背景→白 / 文字→枠線色)。opacity フェードはこのサイトの流儀ではない。 */
  .mc-btn--primary,
  .mc-btn--mv {
    background-color: var(--secondary-color-500);
    border-color: var(--secondary-color-500);
    color: var(--white-color);
  }
  .mc-btn--primary:hover,
  .mc-btn--mv:hover {
    background-color: var(--white-color);
    color: var(--secondary-color-500);
  }

  .mc-btn--primary {
    width: calc(347.9 / var(--font-size) * 1rem);           /* Figma 264 */
    height: calc(84.3 / var(--font-size) * 1rem);           /* Figma 64 */
    font-size: calc(22.4 / var(--font-size) * 1rem);        /* Figma 17 */
  }
  .mc-btn--mv {
    width: calc(267.5 / var(--font-size) * 1rem);           /* Figma 203 */
    height: calc(64.8 / var(--font-size) * 1rem);           /* Figma 49.21 */
    /* Figma btn_L は角丸 24.61(= 高さ 49.21 の半分)。.mc-btn 既定の 32 は
       高さ 64 の .mc-btn--primary 用なのでここで上書きする。 */
    border-radius: calc(32.4 / var(--font-size) * 1rem);    /* Figma 24.61 */
    font-size: calc(17.2 / var(--font-size) * 1rem);        /* Figma 13.072 */
    line-height: 130%;
    font-weight: 700;
  }

  /* ロゴロックアップ(KDDI + Market Compass) ※（ダミー）込みの1枚画像 */
  .mc-logo__img { display: block; }

  /* ------------------------------------------------------------------------
     メインビジュアル
     ------------------------------------------------------------------------ */
  .mc-mv { position: relative; }

  .mc-mv__inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: calc(600.9 / var(--font-size) * 1rem);          /* Figma 456 */
    margin-inline: auto;
    overflow: hidden;
  }

  /* MVビジュアルは 2 レイヤー。
     ・mc-mv__bg    = Figma "bg" 351:1833(六角形の面)。MV 枠でクリップされた実寸 679×456 を
                      書き出したものなので、右端に貼れば Figma と一致する。
     ・mc-mv__illust = Figma "illust" 351:1837(コンパス)。x=917 / y=89.46 / 幅 289.15。
     高さは natural aspect に任せる(height:auto)ことで拡大縮小しても歪まない。 */
  .mc-mv__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(894.7 / var(--font-size) * 1rem);           /* Figma 679 */
    height: auto;
    pointer-events: none;
  }
  .mc-mv__illust {
    position: absolute;
    top: calc(117.9 / var(--font-size) * 1rem);             /* Figma 89.46 */
    left: calc(1208.3 / var(--font-size) * 1rem);           /* Figma 917 */
    width: calc(381 / var(--font-size) * 1rem);             /* Figma 289.15 */
    height: auto;
    pointer-events: none;
  }

  .mc-mv__content { position: static; }

  .mc-logo {
    position: absolute;
    left: calc(336 / var(--font-size) * 1rem);              /* Figma 255 */
    top: calc(118.6 / var(--font-size) * 1rem);             /* Figma 90 */
  }
  .mc-mv .mc-logo__img {
    position: relative;
    z-index: 1;
    width: calc(506 / var(--font-size) * 1rem);             /* Figma 384 */
    height: calc(45 / var(--font-size) * 1rem);             /* Figma 34.18 */
  }
  /* ロゴ背面の白いぼかし(/domestic の .service-mv-logo-img::before と同じ手法)。
     Figma はロゴ 384×34.18 に対しグロー 447.7×91.3 が同心に重なる
       → 幅 447.7/384 = 116.6% / 高さ 91.3/34.18 = 267%
     % 指定なので PC・SP どちらもロゴサイズに自動追従する。 */
  .mc-mv .mc-logo::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116.6%;
    height: 267%;
    transform: translate(-50%, -50%);
    background-color: var(--white-color);
    filter: blur(calc(36.2 / var(--font-size) * 1rem));     /* Figma 27.5 */
    z-index: 0;
  }

  .mc-mv__lead {
    position: absolute;
    top: calc(237.2 / var(--font-size) * 1rem);             /* Figma 180 */
    left: calc(317.6 / var(--font-size) * 1rem);            /* Figma 241 */
  }

  .mc-mv__lead p {
    color: var(--mc-mv-text);
    font-size: calc(32.9 / var(--font-size) * 1rem);        /* Figma 25 */
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.9;
    white-space: nowrap;
  }

  /* SP でイラストを挟むため CTA は .mc-mv__lead の外に出した。PC は絶対配置で従来位置を維持。
     top は「リード上端 180 + <p> 高さ 95 + 間隔 72.5 = 347.5」。
     Figma の間隔 86 はテキスト tight box(Cap height trim = baseline)基準で、
     CSS の line-height:1.9 では <p> の box 下端が最終行 baseline より 13.5 下にあるため
     86 − 13.5 = 72.5 としている(実測:box下端371.38 − 最終行baseline357.88)。 */
  .mc-mv__btn {
    position: absolute;
    top: calc(457.7 / var(--font-size) * 1rem);             /* Figma 347.5 */
    left: calc(317.6 / var(--font-size) * 1rem);            /* Figma 241 */
  }

  /* ------------------------------------------------------------------------
     今までの課題
     ------------------------------------------------------------------------ */
  .mc-kadai {
    position: relative;
    padding-bottom: calc(105.4 / var(--font-size) * 1rem);  /* Figma 80 */
  }

  /* Figma: このセクションの見出し下線だけ #00A6C8(blueGreen/500)。他の .mc-ttl は lightblue */
  .mc-kadai .mc-ttl {
    border-bottom-color: var(--blueGreen-color-500);
  }

  /* 上段:タイトル + クラウド(3種) + 課題テキスト(画像)。下端は下向き三角形。
     Figma group 351:2570 は 445 高。内部の絶対位置は
       タイトル y=80 / クラウド y=139〜343 / これらの課題を解決する y=349(tight box 21)
     CSS は line-height により box が tight box より縦に大きいため、gap は使わず
     子要素の margin で Figma の絶対位置に合わせる(下記コメント参照)。 */
  .mc-kadai__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.5);
    /* Figma: Background blur 85 → 背面(deco グリッド)をぼかしてメッシュ透けを緩和 */
    -webkit-backdrop-filter: blur(calc(112 / var(--font-size) * 1rem));
    backdrop-filter: blur(calc(112 / var(--font-size) * 1rem));
    padding:
      calc(105.4 / var(--font-size) * 1rem)                 /* Figma 80 */
      calc(168.7 / var(--font-size) * 1rem)                 /* Figma 128 */
      calc(85 / var(--font-size) * 1rem);                   /* Figma 64.5(下端を 445 に合わせる) */
    /* Figma: 下向きシェブロンの深さ 130(Vector 1366×130、角度 ≈ atan(130/683)) */
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - calc(171.3 / var(--font-size) * 1rem)),
      50% 100%,
      0 calc(100% - calc(171.3 / var(--font-size) * 1rem))
    );
  }

  /* クラウド 3 枚。書き出し画像の bbox は各フレーム内の Vector(雲の形)なので、
     配置座標は「フレーム位置 + Vector オフセット − 白パネル左端 120.53」で求めた
     ページ座標を使う。枠の高さ 204 は Figma のフレーム群の外接矩形(y=139〜343)で、
     これを保つことで .mc-kadai__top = 445 と背景メッシュの位置が変わらない。 */
  .mc-kadai__clouds {
    position: relative;
    width: 100%;
    height: calc(268.8 / var(--font-size) * 1rem);          /* Figma 204 */
    /* Figma: タイトル下端(CSS box) → クラウド枠上端 y=139 */
    margin-top: calc(18.2 / var(--font-size) * 1rem);
  }
  .mc-kadai__cloud {
    position: absolute;
    height: auto;
  }
  /* left / top は枠(ページ x=128, y=139)からの相対値 */
  .mc-kadai__cloud--1 {
    left: calc(108.1 / var(--font-size) * 1rem);            /* Figma 82  (page 210) */
    top: calc(23.7 / var(--font-size) * 1rem);              /* Figma 18  (page 157) */
    width: calc(382.1 / var(--font-size) * 1rem);           /* Figma 290 */
  }
  .mc-kadai__cloud--2 {
    left: calc(550.7 / var(--font-size) * 1rem);            /* Figma 417.9 (page 545.9) */
    top: calc(30.7 / var(--font-size) * 1rem);              /* Figma 23.3  (page 162.3) */
    width: calc(360.2 / var(--font-size) * 1rem);           /* Figma 273.36 */
  }
  .mc-kadai__cloud--3 {
    left: calc(972.3 / var(--font-size) * 1rem);            /* Figma 737.89 (page 865.89) */
    top: calc(16.7 / var(--font-size) * 1rem);              /* Figma 12.69  (page 151.69) */
    width: calc(411.1 / var(--font-size) * 1rem);           /* Figma 312 */
  }

  .mc-kadai__sub-ttl {
    /* Figma の tight box(y=349〜370)の中心に CSS の line box を合わせる。
       クラウド下端 343 に対し box 上端は 338.5 なので負の margin になる。 */
    margin-top: calc(-5.9 / var(--font-size) * 1rem);       /* Figma -4.5 */
    font-size: calc(36.9 / var(--font-size) * 1rem);        /* Figma 28 */
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: #000000;
  }

  /* 下段:解決策。Figma 351:2591 は gap 32 で
     ロゴ枠 / 説明文 / サービス概要 / 矢印 / おすすめ を並べる
     (説明文を包む 351:2597 の gap 48 は流し込み対象が 1 つだけなので効かない)。 */
  .mc-kadai__solution {
    width: var(--mc-inner);
    max-width: 100%;
    margin: calc(31.6 / var(--font-size) * 1rem) auto 0;    /* Figma 24 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(42.2 / var(--font-size) * 1rem);              /* Figma 32 */
  }

  /* ロゴ枠 */
  .mc-logo-box {
    position: relative;
    padding:
      calc(34.3 / var(--font-size) * 1rem)                  /* Figma 26 */
      calc(65.9 / var(--font-size) * 1rem)                  /* Figma 50 */
      calc(33.8 / var(--font-size) * 1rem);                 /* Figma 25.67 */
  }
  .mc-logo-box .mc-logo__img {
    width: calc(404.5 / var(--font-size) * 1rem);           /* Figma 307 */
    height: calc(36 / var(--font-size) * 1rem);             /* Figma 27.33 */
    margin: 0 auto;
  }

  .mc-kadai__desc {
    width: 100%;
    color: var(--black-color);
    font-weight: 700;
    /* Figma は行送り 1.8em を「ノードの基準 fontSize 18」で算出するため全行 32.4。
       CSS の line-height:1.8 は各 span の font-size 基準になり 32.4/36/43.2 と伸びるので、
       長さ指定で Figma と揃える。 */
    line-height: calc(42.7 / var(--font-size) * 1rem);      /* Figma 32.4 = 18 × 1.8 */
    letter-spacing: 0.02em;
    text-align: center;
    color:#000000;
  }

  .mc-kadai__desc .l1,
  .mc-kadai__desc .l3s { font-size: calc(23.7 / var(--font-size) * 1rem); }  /* Figma 18 */
  .mc-kadai__desc .l2b { font-size: calc(26.4 / var(--font-size) * 1rem); }  /* Figma 20 */
  .mc-kadai__desc .l3b {
    font-size: calc(31.6 / var(--font-size) * 1rem);        /* Figma 24 */
    color: var(--primary-color-300);
  }

  /* サービス概要ボックス */
  .mc-about {
    display: flex;
    align-items: center;
    gap: calc(26.4 / var(--font-size) * 1rem);              /* Figma 20 */
    width: 100%;
    padding: calc(46.1 / var(--font-size) * 1rem) calc(39.5 / var(--font-size) * 1rem); /* Figma 35 / 30 */
    background-color: var(--white-color);
  }
  .mc-about__figure {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(329.4 / var(--font-size) * 1rem);           /* Figma 250 */
    height: calc(289.9 / var(--font-size) * 1rem);          /* Figma 220 */
  }
  .mc-about__figure img {
    width: calc(289.9 / var(--font-size) * 1rem);           /* Figma 220 */
    height: calc(289.9 / var(--font-size) * 1rem);          /* Figma 220 */
  }
  .mc-about__body {
    flex: 1 0 0;
    min-width: 0;
    font-size: calc(23.7 / var(--font-size) * 1rem);        /* Figma 18 */
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color:#000000;
  }

  .mc-about__body p + p { margin-top: 1.8em; }

  .mc-arrow {
    width: calc(303.5 / var(--font-size) * 1rem);           /* Figma 230.35 */
    height: calc(25.8 / var(--font-size) * 1rem);           /* Figma 19.55 */
  }

  /* こんなお客様におすすめ */
  .mc-recommend {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: calc(1.3 / var(--font-size) * 1rem) solid var(--primary-color-500);
    background-color: var(--white-color);
  }
  .mc-recommend__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-inline: calc(52.7 / var(--font-size) * 1rem);   /* Figma 40 */
    background-color: var(--primary-color-500);
  }
  .mc-recommend__ttl {
    color: var(--white-color);
    font-size: calc(36.9 / var(--font-size) * 1rem);        /* Figma 28 */
    font-weight: 700;
    letter-spacing: 0.05em;                                 /* Figma 5% */
    line-height: 1.5;
  }
  .mc-recommend__list {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: calc(19.8 / var(--font-size) * 1rem);              /* Figma 15 */
    min-width: 0;
    padding: calc(39.5 / var(--font-size) * 1rem) calc(52.7 / var(--font-size) * 1rem); /* Figma 30 / 40 */
    list-style: none;
  }
  .mc-recommend__item {
    display: flex;
    align-items: center;
    gap: calc(19.8 / var(--font-size) * 1rem);              /* Figma 15 */
    font-size: calc(19.8 / var(--font-size) * 1rem);        /* Figma 15 */
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }

  .mc-recommend__item__ico {
    width: calc(23.5 / var(--font-size) * 1rem);            /* Figma 17.85 */
    height: calc(21.3 / var(--font-size) * 1rem);           /* Figma 16.15 */
  }

  /* ------------------------------------------------------------------------
     主な特徴
     ------------------------------------------------------------------------ */
  /* Figma のパネルは白 50%。ベタで敷くと背面の装飾メッシュが完全に消えてしまうので、
     左上だけ透過させて .mc-kadai の右側と同じ「メッシュが覗く」抜け感を作る
     (kadai は白パネルが無い領域でメッシュが見えている)。 */
  .mc-feature {
    max-width: 100%;
    background: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.5) calc(420 / var(--font-size) * 1rem)
    );
    padding-bottom: calc(105.4 / var(--font-size) * 1rem);  /* Figma 80 */
  }
  .mc-feature__inner {
    width: var(--mc-inner);
    margin: 0 auto;
    max-width: 100%;
  }
  .mc-feature__head {
    padding-top: calc(79.1 / var(--font-size) * 1rem);      /* Figma 60 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(52.7 / var(--font-size) * 1rem);              /* Figma 40 */
  }
  .mc-feature__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(39.5 / var(--font-size) * 1rem);              /* Figma 30 */
    width: 100%;
    list-style: none;
  }
  .mc-feature__item {
    display: flex;
    position: relative;
    align-items: center;
    gap: calc(39.5 / var(--font-size) * 1rem);              /* Figma 30 */
    min-height: calc(237.2 / var(--font-size) * 1rem);      /* Figma 180 */
    padding:
      calc(46.1 / var(--font-size) * 1rem)                  /* Figma 35 */
      calc(39.5 / var(--font-size) * 1rem)                  /* Figma 30 */
      calc(39.5 / var(--font-size) * 1rem);                 /* Figma 30 */
    overflow: hidden;
    background-color: var(--white-color);
  }
  .mc-feature__num {
    position: absolute;
    right: calc(13.2 / var(--font-size) * 1rem);            /* Figma 10 */
    bottom: calc(-26.4 / var(--font-size) * 1rem);          /* Figma -20 */
    width: calc(162.1 / var(--font-size) * 1rem);           /* Figma 123 */
    color: var(--mc-ghost);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: calc(158.1 / var(--font-size) * 1rem);       /* Figma 120 */
    font-weight: 800;
    line-height: 1;
    text-align: right;
    pointer-events: none;
  }
  .mc-feature__ico {
    flex-shrink: 0;
    width: calc(151.5 / var(--font-size) * 1rem);           /* Figma 115 */
    height: calc(151.5 / var(--font-size) * 1rem);          /* Figma 115 */
  }
  .mc-feature__body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: calc(21.1 / var(--font-size) * 1rem);              /* Figma 16 */
    position: relative;
    min-width: 0;
  }
  .mc-feature__ttl {
    color: var(--primary-color-300);
    font-size: calc(26.4 / var(--font-size) * 1rem);        /* Figma 20 */
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }
  .mc-feature__text {
    font-size: calc(19.8 / var(--font-size) * 1rem);        /* Figma 15 */
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.8;
    color: #000000;
  }

  /* 主な特徴と機能一覧の区切り線 */
  .mc-feature__divider {
    width: 100%;
    height: calc(1.3 / var(--font-size) * 1rem);            /* Figma 1 */
    margin: calc(84.3 / var(--font-size) * 1rem) 0 0;       /* Figma 64 */
    border: 0;
    /* Figma: gray/300 #CDD2D9 */
    background-color: var(--gray-color-300);
  }

  /* --- 機能一覧 --- */
  .mc-func { margin-top: calc(63.3 / var(--font-size) * 1rem); }  /* Figma 48 */
  .mc-func__ttl {
    color: var(--primary-color-500);
    font-size: calc(26.9 / var(--font-size) * 1rem);        /* Figma 20.4 */
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }
  .mc-func__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(39.5 / var(--font-size) * 1rem);              /* Figma 30 */
    width: calc(1093.7 / var(--font-size) * 1rem);          /* Figma 830 */
    max-width: 100%;
    margin: calc(39.5 / var(--font-size) * 1rem) auto 0;    /* Figma 30 */
    list-style: none;
  }
  .mc-func__item {
    display: flex;
    flex-direction: column;
    gap: calc(26.4 / var(--font-size) * 1rem);              /* Figma 20 */
    padding:
      calc(26.4 / var(--font-size) * 1rem)                  /* Figma 20 */
      calc(26.4 / var(--font-size) * 1rem)                  /* Figma 20 */
      calc(39.5 / var(--font-size) * 1rem);                 /* Figma 30 */
    background-color: var(--white-color);
  }
  /* ※Figma上は画像未確定のためグレーのプレースホルダー */
  .mc-func__thumb {
    width: 100%;
    height: calc(266.2 / var(--font-size) * 1rem);          /* Figma 202 */
    border: calc(1.3 / var(--font-size) * 1rem) solid var(--gray-color-300);
    overflow: hidden;
  }
  .mc-func__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .mc-func__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(52.7 / var(--font-size) * 1rem);           /* Figma 40 */
    padding: 0 calc(15.8 / var(--font-size) * 1rem);        /* Figma 12 */
    background-color: var(--primary-color-300);
    color: var(--white-color);
    font-size: calc(29 / var(--font-size) * 1rem);          /* Figma 22 */
    font-weight: 700;
    letter-spacing: 0.05em;                                 /* Figma 5% */
    line-height: 1;
    text-align: center;
  }
  .mc-func__text {
    font-size: calc(18.4 / var(--font-size) * 1rem);        /* Figma 14 */
    font-weight: 500;
    letter-spacing: 0.05em;                                 /* Figma 5% */
    line-height: 1.5;
    color: #000000; /* Figma: #000000(.mc の既定 #1E1E1E を上書き) */
  }

  /* ------------------------------------------------------------------------
     導入の3つのメリット
     ------------------------------------------------------------------------ */
  .mc-merit {
    width: var(--mc-inner);
    max-width: 100%;
    margin: calc(105.4 / var(--font-size) * 1rem) auto 0;   /* Figma 80 */
  }
  .mc-merit__lead {
    margin-top: calc(52.7 / var(--font-size) * 1rem);       /* Figma 40 */
    color: var(--primary-color-500);
    font-size: calc(26.9 / var(--font-size) * 1rem);        /* Figma 20.4 */
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }
  .mc-merit__list {
    display: flex;
    gap: calc(52.7 / var(--font-size) * 1rem);              /* Figma 40 */
    justify-content: space-between;
    margin-top: calc(52.7 / var(--font-size) * 1rem);       /* Figma 40 */
    list-style: none;
  }
  .mc-merit__item {
    position: relative;
    width: calc(395.3 / var(--font-size) * 1rem);           /* Figma 300 */
    padding-top: calc(65.9 / var(--font-size) * 1rem);      /* Figma 50 */
  }
  .mc-merit__num {
    position: absolute;
    right: 0;
    top: calc(-29 / var(--font-size) * 1rem);               /* Figma -22 */
    color: var(--white-color);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: calc(158.1 / var(--font-size) * 1rem);       /* Figma 120 */
    font-weight: 800;
    letter-spacing: 0.05em;                                 /* Figma 5% */
    line-height: 1;
    opacity: .6;
    pointer-events: none;
  }
  .mc-merit__circle {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(39.5 / var(--font-size) * 1rem);              /* Figma 30 */
    width: calc(395.3 / var(--font-size) * 1rem);           /* Figma 300 */
    height: calc(395.3 / var(--font-size) * 1rem);          /* Figma 300 */
    padding-bottom: calc(26.4 / var(--font-size) * 1rem);   /* Figma 20 */
    border-radius: 50%;
    background-color: var(--white-color);
  }
  .mc-merit__ico {
    width: calc(237.2 / var(--font-size) * 1rem);           /* Figma 180 */
    height: calc(131.8 / var(--font-size) * 1rem);          /* Figma 100 */
    object-fit: contain;
  }
  .mc-merit__text {
    color: var(--primary-color-500);
    font-size: calc(23.7 / var(--font-size) * 1rem);        /* Figma 18 */
    font-weight: 900;
    line-height: 1.5;
    text-align: center;
  }

  /* ------------------------------------------------------------------------
     CTA
     ------------------------------------------------------------------------ */
  .mc-last {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(63.3 / var(--font-size) * 1rem);              /* Figma 48 */
    width: var(--mc-inner);
    max-width: 100%;
    margin: 0 auto;
    margin-top: calc(105.4 / var(--font-size) * 1rem);      /* Figma 80 */
    /* 共通フッターの .l-footer-cv は translateY(-94) で上に食い込む(2色の境界に重ねる意図)。
       その分を打ち消しつつ Figma 指定の 104(=N 137)を確保 → CTAボタンと CV の間隔を常に 104 にする */
    padding-bottom: calc((137 + 94) / var(--font-size) * 1rem);
  }
  .mc-last__ttl {
    color: var(--primary-color-500);
    font-size: calc(34.1 / var(--font-size) * 1rem);        /* Figma 25.882 */
    font-weight: 700;
    letter-spacing: 0.05em;                                 /* Figma 5% */
    line-height: 1.5;
    text-align: center;
  }
  .mc-last__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(21.1 / var(--font-size) * 1rem);              /* Figma 16 */
  }
}

/* ==========================================================================
   SP(414px 基準)
   Figma に SP デザインが無いため、他サービスページ(/kld・/domestic・/inbound)の
   SP 実装に倣って 1カラム化する。PC の情報量・順序は変えない。
   ========================================================================== */
@media all and (max-width: 767px), print {
  .mc {
    --mc-marker: #faffae;
    --mc-ghost: #f8fafa;
    --mc-mv-text: #5d5e6b;
    --mc-side: calc(24 / var(--font-size) * 1rem);   /* 左右の共通余白 */

    position: relative;
    width: 100%;
    z-index: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt" 1;
    color: var(--black-color);
  }

  .mc > section {
    position: relative;
    z-index: 1;
  }

  /* ------------------------------------------------------------------------
     共通パーツ
     ------------------------------------------------------------------------ */
  .mc-ttl {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding-bottom: calc(8 / var(--font-size) * 1rem);
    border-bottom: calc(2 / var(--font-size) * 1rem) solid var(--primary-color-300);
    color: var(--primary-color-500);
    font-size: calc(24 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .mc-mark {
    background: linear-gradient(
      to top,
      var(--mc-marker) calc(6 / var(--font-size) * 1rem),
      transparent calc(6 / var(--font-size) * 1rem)
    );
    color: inherit;
  }

  .mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(28 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    /* SP の共通 .c-btn__inner は枠線 1。PC と同じく反転ホバー用に確保しておく */
    border: calc(1 / var(--font-size) * 1rem) solid transparent;
    transition: all .2s;
    padding: calc(12 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
  }

  /* 塗りボタン(オレンジ)は PC と同じ「反転」ホバー */
  .mc-btn--primary,
  .mc-btn--mv {
    background-color: var(--secondary-color-500);
    border-color: var(--secondary-color-500);
    color: var(--white-color);
  }
  .mc-btn--primary:hover,
  .mc-btn--mv:hover {
    background-color: var(--white-color);
    color: var(--secondary-color-500);
  }

  .mc-btn--primary {
    width: calc(280 / var(--font-size) * 1rem);
    height: calc(56 / var(--font-size) * 1rem);
    font-size: calc(15 / var(--font-size) * 1rem);
  }
  /* MV の CTA は他サービスページ(/domestic 等)の SP と同じ大きさに揃える
     (PC の 203×49.21 をそのまま縮めると小さすぎて押しにくい) */
  .mc-btn--mv {
    width: calc(262 / var(--font-size) * 1rem);
    height: calc(64 / var(--font-size) * 1rem);
    border-radius: calc(32 / var(--font-size) * 1rem);
    font-size: calc(15 / var(--font-size) * 1rem);
    line-height: 130%;
    font-weight: 700;
  }

  .mc-logo__img { display: block; }

  /* ------------------------------------------------------------------------
     メインビジュアル:PC は hero 画像の上に絶対配置。SP は縦積みにし、
     hero(コンパス)はテキストの下にフルブリードで置く。
     ------------------------------------------------------------------------ */
  .mc-mv { position: relative; }

  /* SP は DOM 順のまま縦積み(ロゴ → リード → イラスト → CTA)。
     余白は /domestic の SP と同じリズム(MV 高さ ≈580、要素間 32)に合わせる。 */
  .mc-mv__inner {
    position: relative;
    width: 100%;
    height: auto;
    padding-block: calc(40 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
    overflow: hidden;
  }

  /* bg(六角形)は PC と同じく右上。絶対配置のまま背景として効かせる */
  .mc-mv__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(280 / var(--font-size) * 1rem);
    height: auto;
    pointer-events: none;
  }
  /* illust(コンパス)はリードと CTA の間に中央寄せで積む */
  .mc-mv__illust {
    display: block;
    position: static;
    width: calc(250 / var(--font-size) * 1rem);
    height: auto;
    margin: calc(32 / var(--font-size) * 1rem) auto 0;
    pointer-events: none;
  }

  /* 他サービスページの SP に合わせ、ロゴ・リード文・CTA をすべて中央寄せ */
  .mc-mv__content {
    position: relative;
    z-index: 1;
    padding-inline: var(--mc-side);
    text-align: center;
  }

  /* ロゴ背面の白いぼかしは /domestic 等の SP と同様に残す。
     PC(Figma)の比率 ロゴ384 : グロー447.7×91.3 を SP のロゴ 260 に当てはめて
     303×63、中央にロゴを重ねる(ロゴ高 ≈24 なので top = (24 − 63) / 2 ≈ −20)。 */
  /* ロゴは中央寄せ。::before のグローは PC と同じ % 指定なのでサイズ追従する。
     ぼかし量だけ /domestic の SP(blur 11 / PC 27)に倣って弱める。 */
  /* PC は position:absolute で shrink-to-fit されるが、SP は block なので
     fit-content でロゴ画像を包む(そうしないと ::before が親幅基準で広がる)。 */
  .mc-logo {
    position: relative;
    width: fit-content;
    margin-inline: auto;
  }
  .mc-mv .mc-logo__img {
    position: relative;
    z-index: 1;
    width: calc(340 / var(--font-size) * 1rem);   /* /domestic の SP ロゴ幅に合わせる */
    height: auto;
  }
  .mc-mv .mc-logo::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116.6%;
    height: 267%;
    transform: translate(-50%, -50%);
    background-color: var(--white-color);
    filter: blur(calc(18 / var(--font-size) * 1rem));
    z-index: 0;
  }

  .mc-mv__lead {
    position: static;
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .mc-mv__lead p {
    color: var(--mc-mv-text);
    font-size: calc(15 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.8;
    white-space: normal;
    text-align: center;
  }
  /* PC 用の改行は SP では折り返しに任せる */
  .mc-mv__lead p br { display: none; }

  /* PC の絶対配置を打ち消し、イラストの下に通常フローで置く */
  .mc-mv__btn {
    position: static;
    margin-top: calc(32 / var(--font-size) * 1rem);
  }

  /* ------------------------------------------------------------------------
     今までの課題
     ------------------------------------------------------------------------ */
  .mc-kadai {
    position: relative;
    padding-bottom: calc(40 / var(--font-size) * 1rem);
  }
  .mc-kadai .mc-ttl { border-bottom-color: var(--blueGreen-color-500); }

  .mc-kadai__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 / var(--font-size) * 1rem);
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(calc(40 / var(--font-size) * 1rem));
    backdrop-filter: blur(calc(40 / var(--font-size) * 1rem));
    padding:
      calc(40 / var(--font-size) * 1rem)
      var(--mc-side)
      calc(56 / var(--font-size) * 1rem);
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - calc(40 / var(--font-size) * 1rem)),
      50% 100%,
      0 calc(100% - calc(40 / var(--font-size) * 1rem))
    );
  }
  /* PC の絶対配置を解除し、3 枚を縦積みで中央寄せ */
  .mc-kadai__clouds {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 / var(--font-size) * 1rem);
    width: 100%;
    height: auto;
    margin-top: 0;
  }
  .mc-kadai__cloud {
    position: static;
    width: calc(300 / var(--font-size) * 1rem);
    height: auto;
  }
  /* PC ではこの一文が雲の中の文字(18)より大きく(28、約1.56倍)、次のセクションへの
     引きになっている。SP は雲を 300 幅で出すため中の文字が約 18.6 相当に拡大され、
     18 のままだと同じか小さく見えてしまうので 24 に上げて主従を保つ。 */
  .mc-kadai__sub-ttl {
    margin-top: 0;
    font-size: calc(24 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: #000000;
  }

  .mc-kadai__solution {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-inline: var(--mc-side);
    margin-top: calc(24 / var(--font-size) * 1rem);
    gap: calc(24 / var(--font-size) * 1rem);
  }

  .mc-logo-box {
    position: relative;
    padding: calc(16 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
  }
  .mc-logo-box .mc-logo__img {
    width: calc(230 / var(--font-size) * 1rem);
    height: auto;
    margin: 0 auto;
  }

  .mc-kadai__desc {
    width: 100%;
    color: var(--black-color);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-align: center;
    color:#000000;
  }
  /* PC 用の改行位置は SP では折り返しに任せる */
  .mc-kadai__desc br { display: none; }
  .mc-kadai__desc .l1,
  .mc-kadai__desc .l3s { font-size: calc(14 / var(--font-size) * 1rem); }
  .mc-kadai__desc .l2b { font-size: calc(15 / var(--font-size) * 1rem); }
  .mc-kadai__desc .l3b {
    font-size: calc(17 / var(--font-size) * 1rem);
    color: var(--primary-color-300);
  }

  .mc-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 / var(--font-size) * 1rem);
    width: 100%;
    padding: calc(24 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
    background-color: var(--white-color);
  }
  .mc-about__figure {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(170 / var(--font-size) * 1rem);
    height: calc(170 / var(--font-size) * 1rem);
  }
  .mc-about__figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .mc-about__body {
    width: 100%;
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color:#000000;
  }
  .mc-about__body br { display: none; }
  .mc-about__body p + p { margin-top: 1.5em; }

  .mc-arrow {
    width: calc(150 / var(--font-size) * 1rem);
    height: auto;
  }

  /* こんなお客様におすすめ:PC は横 2 分割、SP は縦積み */
  .mc-recommend {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--primary-color-500);
    background-color: var(--white-color);
  }
  .mc-recommend__head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(12 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    background-color: var(--primary-color-500);
  }
  .mc-recommend__ttl {
    color: var(--white-color);
    font-size: calc(17 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
    text-align: center;
  }
  /* SP は 1 行に収める */
  .mc-recommend__ttl br { display: none; }
  .mc-recommend__list {
    display: flex;
    flex-direction: column;
    gap: calc(12 / var(--font-size) * 1rem);
    padding: calc(20 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    list-style: none;
  }
  .mc-recommend__item {
    display: flex;
    align-items: flex-start;
    gap: calc(10 / var(--font-size) * 1rem);
    font-size: calc(13 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.6;
  }
  .mc-recommend__item__ico {
    flex-shrink: 0;
    width: calc(15 / var(--font-size) * 1rem);
    height: calc(14 / var(--font-size) * 1rem);
    margin-top: calc(3 / var(--font-size) * 1rem);
  }

  /* ------------------------------------------------------------------------
     主な特徴
     ------------------------------------------------------------------------ */
  /* PC と同じく左上だけ透過させて背面のメッシュを覗かせる */
  .mc-feature {
    max-width: 100%;
    background: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.5) calc(120 / var(--font-size) * 1rem)
    );
    padding-bottom: calc(40 / var(--font-size) * 1rem);
  }
  .mc-feature__inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-inline: var(--mc-side);
  }
  .mc-feature__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(40 / var(--font-size) * 1rem);
    gap: calc(24 / var(--font-size) * 1rem);
  }
  .mc-feature__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(16 / var(--font-size) * 1rem);
    width: 100%;
    list-style: none;
  }
  .mc-feature__item {
    display: flex;
    position: relative;
    align-items: center;
    gap: calc(16 / var(--font-size) * 1rem);
    min-height: 0;
    padding: calc(20 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    overflow: hidden;
    background-color: var(--white-color);
  }
  .mc-feature__num {
    position: absolute;
    right: calc(6 / var(--font-size) * 1rem);
    bottom: calc(-14 / var(--font-size) * 1rem);
    width: calc(80 / var(--font-size) * 1rem);
    color: var(--mc-ghost);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: calc(76 / var(--font-size) * 1rem);
    font-weight: 800;
    line-height: 1;
    text-align: right;
    pointer-events: none;
  }
  .mc-feature__ico {
    flex-shrink: 0;
    width: calc(80 / var(--font-size) * 1rem);
    height: calc(80 / var(--font-size) * 1rem);
  }
  .mc-feature__body {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: calc(8 / var(--font-size) * 1rem);
    position: relative;
    min-width: 0;
  }
  .mc-feature__ttl {
    color: var(--primary-color-300);
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.5;
  }
  .mc-feature__text {
    font-size: calc(13 / var(--font-size) * 1rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.7;
    color: #000000;
  }
  .mc-feature__text br { display: none; }

  .mc-feature__divider {
    width: 100%;
    height: 1px;
    margin: calc(32 / var(--font-size) * 1rem) 0 0;
    border: 0;
    background-color: var(--gray-color-300);
  }

  /* --- 機能一覧 --- */
  .mc-func { margin-top: calc(28 / var(--font-size) * 1rem); }
  .mc-func__ttl {
    color: var(--primary-color-500);
    font-size: calc(18 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }
  .mc-func__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(16 / var(--font-size) * 1rem);
    width: 100%;
    max-width: 100%;
    margin: calc(20 / var(--font-size) * 1rem) auto 0;
    list-style: none;
  }
  .mc-func__item {
    display: flex;
    flex-direction: column;
    gap: calc(14 / var(--font-size) * 1rem);
    padding:
      calc(16 / var(--font-size) * 1rem)
      calc(16 / var(--font-size) * 1rem)
      calc(20 / var(--font-size) * 1rem);
    background-color: var(--white-color);
  }
  .mc-func__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 366 / 202;
    border: 1px solid var(--gray-color-300);
    overflow: hidden;
  }
  .mc-func__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .mc-func__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(34 / var(--font-size) * 1rem);
    padding: 0 calc(10 / var(--font-size) * 1rem);
    background-color: var(--primary-color-300);
    color: var(--white-color);
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
  }
  .mc-func__text {
    font-size: calc(13 / var(--font-size) * 1rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.7;
    color: #000000;
  }

  /* ------------------------------------------------------------------------
     導入の3つのメリット
     ------------------------------------------------------------------------ */
  .mc-merit {
    width: 100%;
    max-width: 100%;
    margin: calc(40 / var(--font-size) * 1rem) auto 0;
    padding-inline: var(--mc-side);
  }
  .mc-merit__lead {
    margin-top: calc(20 / var(--font-size) * 1rem);
    color: var(--primary-color-500);
    font-size: calc(15 / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }
  .mc-merit__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(32 / var(--font-size) * 1rem);
    margin-top: calc(28 / var(--font-size) * 1rem);
    list-style: none;
  }
  .mc-merit__item {
    position: relative;
    width: calc(240 / var(--font-size) * 1rem);
    padding-top: calc(34 / var(--font-size) * 1rem);
  }
  .mc-merit__num {
    position: absolute;
    right: 0;
    top: calc(-14 / var(--font-size) * 1rem);
    color: var(--white-color);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: calc(80 / var(--font-size) * 1rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    opacity: .6;
    pointer-events: none;
  }
  .mc-merit__circle {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(20 / var(--font-size) * 1rem);
    width: calc(240 / var(--font-size) * 1rem);
    height: calc(240 / var(--font-size) * 1rem);
    padding-bottom: calc(14 / var(--font-size) * 1rem);
    border-radius: 50%;
    background-color: var(--white-color);
  }
  .mc-merit__ico {
    width: calc(140 / var(--font-size) * 1rem);
    height: calc(74 / var(--font-size) * 1rem);
    object-fit: contain;
  }
  .mc-merit__text {
    color: var(--primary-color-500);
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 900;
    line-height: 1.5;
    text-align: center;
  }

  /* ------------------------------------------------------------------------
     CTA
     ------------------------------------------------------------------------ */
  .mc-last {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(28 / var(--font-size) * 1rem);
    width: 100%;
    max-width: 100%;
    margin: calc(40 / var(--font-size) * 1rem) auto 0;
    padding-inline: var(--mc-side);
    /* PC と同じく .l-footer-cv の translateY(-94) を打ち消したうえで余白を確保 */
    padding-bottom: calc((56 + 94) / var(--font-size) * 1rem);
  }
  .mc-last__ttl {
    color: var(--primary-color-500);
    font-size: calc(17 / var(--font-size) * 1rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.6;
    text-align: center;
  }
  .mc-last__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12 / var(--font-size) * 1rem);
  }
}