@charset "UTF-8";

/* ==========================================================================
   KURUYO KOREA - TOP(LP) スタイル
   SP設計幅 750 / PC設計幅 1200 / ブレイクポイント 768px
   PCファーストで書く。base が PC の見た目で、末尾の
   @media screen and (max-width: 768px) に SP のプロパティを置く。
   base に残っている min(calc(N / 750 * 100vw), Npx) は SP・PC 共通の寸法。
   768px 以上では常に上限の Npx に張り付くので PC の実寸としても正しい。
   ========================================================================== */
/* ==========================================================================
   FV
   ========================================================================== */
/* 装飾画像は 1920px のデザイン幅から 3000px へ横に伸ばしてある
   （斜めバンドの向きに沿って端の断面を延長。ワイド画面で線が切れないようにするため） */
.p-fv {
  position: relative;
  overflow: hidden;
  background-color: var(--c-bg);
  background-image: url("../../common/img/deco_fv_pc.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 3000px auto;
}

.p-fv__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 70px 0 66px;
  text-align: left;
}

/* 月額料金は不要！ …／／ で挟む見出し */
.p-fv__lead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding-left: 18px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* 左は ＼＼、右は ／／（デザイン実測: 線幅2px・間隔8px・高さ34px、文字の左右6px） */
.p-fv__lead::before,
.p-fv__lead::after {
  content: "";
  width: 2px;
  height: 30px;
  background: var(--c-text);
  box-shadow: 8px 0 0 var(--c-text);
  transform: skewX(-22deg);
}

.p-fv__lead::before {
  box-shadow: -8px 0 0 var(--c-text);
  transform: skewX(22deg);
}

/* デザインは1行。行送りを 1 にして、字面上端がデザインの y=256 に来る位置まで詰める */
.p-fv__sub {
  margin-top: 11px;
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.023em;
}

/* 助詞（「の」「なら」）はデザインでは本体（50px）の70% */
.p-fv__subSmall { font-size: 35px; }

/* デザインの字面は KURUYO 580x105 / KOREA! 515x107、行のピッチ 136。
   136px + line-height 1 で高さとピッチが一致する。字間はデザインの Noto Sans CJK JP の
   ラテンが 3% ほど広いぶんを letter-spacing で埋めている（0.025em で 578 / 518） */
.p-fv__title {
  margin-top: 5px;
  font-size: 134.85px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.025em;
}

/* PC も KURUYO KOREA! の中央に置く（AUN m5783j #2）。デザイン v6 の字面中心は x=658、
   .p-fv__body（590px）の中央は 655 なので 6px 右へ寄せる */
.p-fv__ruby {
  margin-top: 12px;
  padding-left: 6px;
  font-size: 21px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
}

/* 実績サークル3つ。PC は 178px径・間隔14px で左端がコンテンツ左に揃う
   （SP は中央寄せで、サークル上端がデザインの y=628） */
.p-fv__stats {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 23px;
}

/* サークルの中身（縁・ラベル・数字・アイコン）はデザイン実測が SP とほぼ同じなので
   ベースの値をそのまま使う。PC で変えるのは横並びの起点と間隔だけ */
.p-fv__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 178px;
  height: 178px;
  padding-top: min(calc(6 / 750 * 100vw), 6px);
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: inset 0 0 0 min(calc(7 / 750 * 100vw), 7px) var(--c-white), inset 0 0 0 min(calc(10 / 750 * 100vw), 10px) var(--c-bg);
}

.p-fv__statLabel {
  font-size: min(calc(19 / 750 * 100vw), 19px);
  line-height: 1.17;
  text-align: center;
}

/* デザインは1行目の本文（Naver / 韓国）だけをサークル中央に置き、※印はその右へ出している。
   右マージンで ※ の幅と左の空きを打ち消して、中央揃えの計算から外す。
   ※ はベースライン揃え（デザイン実測: 字面 18x10・上付きではない） */
.p-fv__statLabel sup {
  margin-right: -2.05em;
  margin-left: .5em;
  font-size: 12px;
  vertical-align: bottom;
}

/* デザイン実測: 「280」の字面 63x29（PSD の letterSpacing -50 込み）。42px では1割大きい */
.p-fv__statNum {
  font-size: min(calc(36.5 / 750 * 100vw), 36.5px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
}

/* デザイン実測: 「名」の字面 16x17 */
.p-fv__statNum i {
  font-size: min(calc(17 / 750 * 100vw), 17px);
  letter-spacing: normal;
}

.p-fv__statIcon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: min(calc(38 / 750 * 100vw), 38px);
  margin-top: min(calc(6 / 750 * 100vw), 6px);
}

.p-fv__statIcon img {
  width: auto;
  height: min(calc(38 / 750 * 100vw), 38px);
}

/* デザイン v4 実測: 鉛筆 45x30 / カメラ 41x28 / ピン 23x36（PNG は 2x で書き出し） */
.p-fv__stat:nth-child(1) .p-fv__statIcon img { height: min(calc(30 / 750 * 100vw), 30px); }
.p-fv__stat:nth-child(2) .p-fv__statIcon img { height: min(calc(28 / 750 * 100vw), 28px); }

/* CTA。デザイン実測 PC x=360 y=802 400x105 / SP はピル上端 y=858 */
.p-fv__cta {
  margin-top: 26px;
}

/* デザイン: 黄色のピル 400x105、右下に影。「相談無料」は白地＋青枠のピルで上辺にまたがる。
   字面の上端はピル上端から 41px（PSD: ピル top 856 / 文字 top 898） */
.p-fv__cta a {
  /* 影の量は --sh-* に持たせ、押し込みで同じ量だけ動かす（common.css の .c-btn と同じ仕組み） */
  --sh-x: 8px;
  --sh-y: 8px;
  --sh-c: rgba(0, 0, 0, .22);
  position: relative;
  display: inline-block;
  width: 400px;
  padding: 39px 0 38px;
  border-radius: 999px;
  background: var(--c-yellow);
  box-shadow: var(--sh-x) var(--sh-y) 0 var(--sh-c);
  font-size: 28.5px;
  /* デザインのボタン文字は Medium。700 だと明らかに太い（ink密度 実測 0.25 対 0.32）。
     palt を切って letter-spacing を足すのは、この文字列の字面がデザインで 280px 幅だから
     （palt有り 265px・palt無し 273px・palt無し+0.03em 280px） */
  font-weight: 500;
  font-feature-settings: normal;
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
  transition: transform .1s ease, box-shadow .1s ease;
}

/* 押し込み（common.css の .c-btn と同じ。影のぶんだけ右下へ動かして影を消す） */
@media (hover: hover) {
  .p-fv__cta a:hover {
    transform: translate(var(--sh-x), var(--sh-y));
    box-shadow: 0 0 0 var(--sh-c);
  }
}

.p-fv__cta a:active {
  transform: translate(var(--sh-x), var(--sh-y));
  box-shadow: 0 0 0 var(--sh-c);
}

/* デザイン実測: 枠込み 129x43、ピル上辺から 15px 食い出す */
.p-fv__cta i {
  position: absolute;
  top: -15px;
  left: 50%;
  display: inline-block;
  padding: 7px 15px;
  border: min(calc(2 / 750 * 100vw), 2px) solid var(--c-blue);
  border-width: 2px;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-blue);
  font-size: 22.5px;
  /* バッジはデザインでも太字。親の letter-spacing は受けない（字面 93px ちょうど） */
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* 韓国人旅行者のイラスト。PC は PSD v6 x=958 y=328 600x561 でコンテンツ右端に揃う
   実装は左カラムの字面がデザインより 8px 高いので、「クルヨ コリア」との上下関係（イラスト上端が 247px 上）で合わせる。
   SP は 260928 版 x=30 y=1032 690x646 で inner の内容幅ちょうど。画像は SP の 690 幅で書き出してある */
.p-fv__visual {
  width: 600px;
  margin-top: 106px;
  margin-left: auto;
}

.p-fv__visual img {
  width: 600px;
  margin-inline: auto;
}

/* 注釈は左右カラムの下にフル幅（PC は PSD x=363 y=934 w=1138 / SP は 688x113・18px）。
   letterSpacing -45（= -0.045em）を入れないと「※2 …韓国MEO実績数」が折り返して
   7行になり、デザインの 5行に収まらない */
.p-fv__note {
  width: 100%;
  max-width: 1140px;
  margin-top: 23px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.21;
  letter-spacing: -0.045em;
  text-align: left;
}

.p-fv__body { width: 590px; }

/* ==========================================================================
   最新実績帯
   ========================================================================== */
.p-result {
  background: var(--c-blue);
  color: var(--c-white);
}

.p-result__inner {
  padding: 76px 0 68px;
  text-align: center;
}

.p-result__label {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-blue);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.p-result__caption {
  display: inline;
  margin-left: 0;
  font-size: 25px;
  font-weight: 400;
  vertical-align: middle;
}

/* デザインはキャプションの字面と 6% / 22% の下端が同じ線に乗る */
.p-result__body {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 12px;
}

/* PC はキャプションと数値を1行にまとめる。
   数字はベースラインで揃える（6% 〉〉 22% の下端が揃う） */
.p-result__figures {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: 0;
  margin-left: 14px;
  font-weight: 700;
  line-height: 1;
}

/* デザインは倍率ピルの「下端」が数字のベースラインに乗っている
   （SP: ピル下端 2144 / ベースライン 2145、PC: 1206 / 1204）。
   align-self: baseline だとピルの文字のベースラインが揃うので、
   ピル下端はベースラインより下（下padding ＋ ディセンダ分）に落ちる。その分だけ引き上げる */
.p-result__figures .p-result__badge {
  position: relative;
  bottom: 4px;
  align-self: baseline;
}

/* デザイン実測: PC は before 41px・after 66px（単位 0.62em）・矢印 34px。
   SP は before の字面 114x59（78px 相当）・after の数字 144x99（137px 相当）・矢印 43x49（48px 相当） */
.p-result__before {
  font-size: 41px;
}

.p-result__arrow {
  font-size: 34px;
}

.p-result__after {
  color: var(--c-yellow-lt);
  font-size: 66px;
  letter-spacing: -0.03em;
}

/* 単位（%）は数字（66px）の 0.6 倍 */
.p-result__after small { font-size: 40px; }

.p-result__badge {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--c-red);
  font-size: 23.5px;
}

/* 実績5件のフェード切り替え（デザイン v4）。ドットはデザイン実測 9px・中心間 34px、
   現在位置が赤、他は白。数字の下・リンクの上に置く */
.p-result__slider { overflow: hidden; }

.p-result__dots {
  position: static;
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 22px;
  line-height: 0;
}

.p-result__dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0;
  background: var(--c-white);
  opacity: 1;
}

.p-result__dots .swiper-pagination-bullet-active { background: var(--c-red); }

.p-result__link {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 400;
}

/* AUN指示（2026-09-07）で追記した免責の注釈。帯が濃紺なので白抜き */
.p-result__note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* ==========================================================================
   導入事例
   ========================================================================== */
/* SPデザイン: 上端は薄青→白の波形。左端で約184px、右端で約64px の高さの曲線。右下に青い三角形の装飾 */
.p-case {
  position: relative;
  overflow: hidden;
  background-color: var(--c-bg);
  background-image: url("../img/blob_case_pc.png");
  background-repeat: no-repeat;
  background-position: calc(50% - 11px) 74px;
  background-size: 1475px auto;
}

/* 旧: SP 右下の青い三角を ::after で描いていたが、実体は「なぜ今」の装飾がブロブの裏に回り込んだもの。
   ブロブの上に描くと白に食い込むので廃止し、SP の .p-case 背景の下レイヤーで装飾画像を敷く */

/* ブロブは 1260px 高。上端 74px から置くので、セクションの高さが 1334px 以上ないと下端が切れる。
   デザインはブロブ下端から次セクションのラベル字面まで 165px 空いているので、その余白もここで持つ */
/* デザイン: カード幅629px（左右60px余白）／写真528x461／カード内padding 50px */
/* デザイン: セクション上端からラベルまで約230px（上部の波形背景ぶんの余白） */
.p-case__inner {
  padding: 236px 0 218px;
}

/* デザインは 60px 内側なのはカードだけで、見出しと注釈は 30px。
   スライダーの矢印位置を動かさないよう、見出しと注釈を負マージンで外へ出す */
.p-case__inner > .c-secTitle,
.p-case__inner > .c-note {
  margin-inline: max(calc(-30 / 750 * 100vw), -30px);
}

.p-case__card {
  padding: 30px;
  border-radius: 20px;
  background: var(--c-blue);
  box-shadow: min(calc(9 / 750 * 100vw), 9px) min(calc(9 / 750 * 100vw), 9px) 0 rgba(1, 75, 163, .35);
  color: var(--c-white);
}

/* デザイン: 店名 25px / 説明 20px（bounds 実測） */
.p-case__name {
  margin-top: 24px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.p-case__desc {
  margin-top: 10px;
  font-size: 20.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* PC は絶対にカルーセルにしない。デザイン通り3枚を横並びにする
   （カード 371px ×3 ＋ 間隔 44px ×2 ＝ 1201px。1200px 幅を3等分すると 370.7px でほぼ同値）。
   WordPress 化したときは新着3件をここに出す想定なので、grid のまま件数だけ差し替えればよい。
   カルーセルは SP だけ。Swiper のラッパーをグリッドで上書きし、PC では初期化もしない（script.js）。
   Swiper が触る transform / width も念のため打ち消しておく */
.p-case .swiper { overflow: visible; }

.p-case .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  transform: none;
}

.p-case .swiper-slide { width: auto; }

.p-case .c-slider__prev, .p-case .c-slider__next { display: none; }

/* ==========================================================================
   なぜ今、韓国か
   ========================================================================== */
/* デザインは装飾ストライプの上端が「WHY KOREA, WHY NOW」の字面より 13px 下から始まる
   （デザイン実測: ストライプ上端 2820 / ラベル字面上端 2807）。
   ラベルはセクション上端から 108px（padding 100 ＋ 字面 8）なので 121px 下げる */
.p-why {
  background-color: var(--c-bg);
  background-image: url("../../common/img/deco_sec02_pc.png");
  background-repeat: no-repeat;
  background-position: center 121px;
  background-size: 3000px auto;
}

/* PSD 実測(PC): リード 28px（幅1036）、カード 560px×2（間 80）、カード見出し 43px、本文 27.5px/48。
   SP はカードが幅690（左右30px）で、リード文と注釈だけ左右60px内側 */
.p-why__inner {
  padding: 100px 0 120px;
}

.p-why__lead,
.p-why__inner > .c-note {
  margin-inline: min(calc(30 / 750 * 100vw), 30px);
}

.p-why__inner > .c-note {
  width: 1036px;
  margin: 12px auto 0;
}

.p-why__lead {
  width: 1036px;
  margin: 34px auto 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.05em;
  text-align: left;
}

/* ※ は本文（28px）の 0.6 倍 */
.p-why__lead sup { font-size: 17px; }

.p-why__cards {
  display: grid;
  grid-template-columns: repeat(2, 560px);
  justify-content: center;
  gap: 50px 80px;
  margin-top: 51px;
}

/* デザイン v4 の影は右下に伸びる。PNG 実測（カード1の四辺）: 左 11 / 右 23 / 上 9 / 下 25 →
   オフセット (6, 8)・ぼかし 17。端の色 (185,209,237) から α ≒ .24（他のカードと同値） */
.p-why__card {
  padding: 0 0 42px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--c-white);
  box-shadow: 6px 7px 18px rgba(1, 75, 163, .24);
}

.p-why__card + .p-why__card {
  margin-top: 0;
}

.p-why__cardTitle {
  padding: 25px 20px;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 44.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
}

.p-why__fig {
  margin-top: 6px;
}

.p-why__fig img {
  height: auto;
  margin-inline: auto;
}

/* デザインはグラフを書き出しサイズのまま置いている（645pxに引き伸ばすと2割大きくなる） */
/* PCデザインはドーナツ（1枚目）だけ小さく置いている（字面 422x485 = 435px幅相当） */
.p-why__card:nth-child(n) .p-why__fig img { width: 480px; }
.p-why__card:nth-child(1) .p-why__fig img { width: 435px; }

/* 4枚目のグラフは左隣（3枚目）より 72px 低いので、そのままだと本文の上端が揃わない。
   差を画像の上下に半分ずつ振り分ける。下側は本文の margin-top 11px と相殺されるので、
   その分（36 ＋ 11）を margin-bottom に持たせる */
.p-why__card:nth-child(4) .p-why__fig {
  margin-top: 42px;
  margin-bottom: 47px;
}

.p-why__text,
.p-why__card .c-note {
  margin-inline: 38px;
}

/* デザイン実測(SP): 27.5px・箱幅 573〜585。SP だけ 30px・箱幅 590 になっていた。
   字間は PSD の値が 0.03em だが、デザインは両端揃えで行を箱幅まで引き伸ばしていて
   見た目の送りはもっと広い。4カードすべての行数と折り返しが合う 0.07em を採る */
.p-why__text {
  width: auto;
  margin-top: 11px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .03em;
  text-align: justify;
}

/* PCデザイン: 薄青の地に白い角丸パネル（1200幅）。見出しバーはパネル上端、カードは 511px×2（間 67） */
.p-why__card .c-note { margin-top: 15px; }

/* ==========================================================================
   韓国人が決めるまで（アコーディオン）
   ========================================================================== */
/* 「なぜ今」の装飾ストライプがこのセクションまで続くので、装飾画像の下部（deco_scene_*）を敷く */
.p-scene {
  background-color: var(--c-bg);
  background-image: url("../../common/img/deco_scene_pc.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 3000px auto;
}

.p-scene__inner {
  padding: 60px 0 60px;
}

/* PSD実測: PC はバー 1200x150・角丸26でアイコンは左端から 52px、文字までは 33px。
   SP はバー 693x220 で上下padding 46 で高さを合わせる */
.p-scene__trigger {
  display: flex;
  align-items: center;
  gap: 33px;
  width: 100%;
  padding: 40px 52px;
  border: 0;
  border-radius: 26px;
  background: var(--c-blue-scene);
  color: var(--c-white);
  text-align: left;
  cursor: pointer;
}

/* 閉じているときは＋、開いているときは×（デザインは開状態） */
.p-scene__icon {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c-white);
}

.p-scene__icon::before,
.p-scene__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 3px;
  background: var(--c-blue-scene);
  transition: transform .3s;
}

.p-scene__icon::before { transform: translate(-50%, -50%); }
.p-scene__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.p-scene__trigger.is-open .p-scene__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.p-scene__trigger.is-open .p-scene__icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* デザインは「もっと詳しく」と本文の字間が 14px 空く（行送りを詰めると 9px になる） */
.p-scene__headSub {
  display: block;
  font-size: 22.5px;
  font-weight: 400;
  line-height: 1.55;
}

.p-scene__headText {
  font-size: 34.5px;
  font-weight: 500;
  line-height: 1.3;
}

/* リードの margin-top がパネル外に抜けると、白パネルの開始位置が見出しバーから
   離れてしまう。flow-root でマージンの相殺を止めてパネル内に収める */
/* バーの下端の角丸のぶんだけ上にめり込ませる（開いた瞬間に継ぎ目が見えないように）。
   バーは position: relative ＋ z-index: 1 でパネルより前に描かれるので、
   重ねたぶんは角丸の内側にだけ白として出る。下げたぶんは .p-scene__lead の margin-top で戻す */
.p-scene__panel {
  display: flow-root;
  margin-top: -26px;
  padding: 0 86px 50px;
  border-radius: 0 0 30px 30px;
  background: var(--c-white);
}

/* 段落の箱はデザイン実測(SP) 625px。パネル幅(690)いっぱいに広げると
   1行が4文字多く入り、4行のはずが3行になる */
/* 40 ＋ パネルを上げた 26 ＝ 66（字面の位置はデザインのまま） */
.p-scene__lead {
  width: auto;
  margin-inline: auto;
  margin-top: 66px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.75;
  text-align: left;
}

.p-scene__item {
  position: relative;
  margin-top: 0;
  padding: 48px 40px 40px;
  border: 2px solid var(--c-blue-scene);
  border-radius: 20px;
  /* 斜めストライプはデザイン実測で左上→右下（＼）向き。水平方向の周期 10px・白と
     #ebf7ff が半々なので、45deg の垂直周期は 10 / √2 ≒ 7.07px。SP・PC で同じ太さ */
  background: repeating-linear-gradient(45deg, #fff 0 3.54px, #ebf7ff 3.54px 7.07px);
}

.p-scene__step {
  position: absolute;
  top: -24px;
  left: 50%;
  padding: 10px 30px;
  border-radius: 12px;
  background: var(--c-blue-scene);
  color: var(--c-white);
  font-size: 25.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* デザインは「｜1」だけ一段大きい（PC 実測 29px / SP 36px、本文は 25.5 / 30.5） */
.p-scene__step i {
  font-size: 29px;
  font-weight: 700;
}

.p-scene__body {
  display: flex;
  gap: 30px;
}

.p-scene__label { flex: 0 0 auto; }

/* 縦積みラベル（知る／確かめる／行く／来店・宿泊後）。
   PSD実測: PC は箱 81x81 を 4px 間隔・角丸10・文字 63px。
   SP は箱 96x97 を 7px 間隔・角丸12・文字 75px・#fff99d、地は #124798。
   もとは1枚のPNGだったが、書き出しが文字ごとの外接矩形だったため箱の幅が揃わず
   ガタガタになっていた。箱を1文字ずつCSSで組んで幅を固定する */
.p-scene__labelText {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-scene__labelText b {
  display: grid;
  place-items: center;
  width: 81px;
  height: 81px;
  border-radius: 10px;
  background: var(--c-blue-scene);
  /* デザインでは箱の右下にやわらかい影が入る */
  box-shadow: 2px 3px 7px rgba(18, 71, 152, .22);
  color: var(--c-yellow-lt);
  font-size: 63px;
  font-weight: 600;
  /* 1文字を箱の中央に置くだけなので詰め組みは効かせない */
  font-feature-settings: normal;
  line-height: 1;
}

/* 「来店・宿泊後」の「・」は箱に入れず、小さい青い点だけを置く。
   デザイン実測(PC): 店の箱下端→宿の箱上端 32px、点の直径 約 9px。
   gap 4px を上下に残すと点の枠は高さ 24px。
   「・」のグリフは仮想ボディの中心より下に点が描かれて枠の中央に来ないので、
   文字は見えない大きさにして ::before の円で描く（文字自体は残すので読み上げは「来店・宿泊後」のまま） */
.p-scene__labelText b.p-scene__labelDot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  background: none;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

.p-scene__labelText b.p-scene__labelDot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-blue-scene);
}

/* 字面実測: 媒体名 PC 20.5px / SP 24.5px、本文 PC 20px / SP 24px（行送りはどちらも 1.75） */
.p-scene__media {
  color: var(--c-red);
  font-size: 20.5px;
  font-weight: 600;
}

.p-scene__desc {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.75;
}

/* デザインは整数部と小数部で大きさが違う二段組み。
   デザインPNGの字面実測（PC）: 整数部の高さ 69px・小数部 49px（比 0.71）。
   SP は 85px / 60px で同じ比。整数部を基準サイズにして小数部を small で落とす */
.p-scene__num {
  margin-top: 0px;
  color: var(--c-blue-scene);
  font-size: 91px;
  font-weight: 700;
  line-height: 1;
}

.p-scene__num small {
  font-size: 65px;
  font-weight: inherit;
}

/* ※ はデザインでは小さく右肩に付く。PSD の字間比（6.2 / 47.35 = 0.131）どおり 91 × 0.13 ≒ 12px。
   小数部の字面上端に頭を合わせる（持ち上げ幅は ※ の字の 3.2 倍） */
.p-scene__num sup {
  position: relative;
  top: -38px;
  font-size: 12px;
  vertical-align: baseline;
}

.p-scene__rank {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  background: var(--c-red);
  color: var(--c-yellow-lt);
  font-size: 20.5px;
  font-weight: 500;
  line-height: 1.3;
}

/* 「ここでやること」の罫線は、ラベルの上を通ってから右へ一段下がる折れ線。
   PSD実測(PC): 上線 x0→143 / 斜線 dx16・dy27 / 下線 x159→カード右端、線は2px。
   SPは同じ形を 1.197 倍したもの（上線 171・斜線 dx19・dy32）。
   border＋skew では段差の角度が出せないので、折れ部分だけSVGで描き、
   右へ伸びる直線は ::after で伸縮させる */
.p-scene__todo {
  position: relative;
  margin-top: 28px;
  padding-top: 14px;
}

.p-scene__todo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 159px;
  height: 29px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='159' height='29' viewBox='0 0 159 29'%3E%3Cpath d='M0 1H143L159 28' fill='none' stroke='%23124798' stroke-width='2'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

/* 下線はカードの左右paddingを越えて枠線まで伸びる（デザインは card の右枠に接する） */
.p-scene__todo::after {
  content: "";
  position: absolute;
  top: 27px;
  right: -40px;
  left: 159px;
  height: 2px;
  background: var(--c-blue-scene);
}

/* デザインでは「ここでやること」の字面が上の罫線のすぐ下（約3px）に付く。
   行送りぶんの余白を負マージンで詰める（padding-top 14 − 9 ＝ 5px 相当） */
.p-scene__todoTitle {
  margin-top: -11px;
  color: var(--c-blue-scene);
  font-size: min(calc(24.5 / 750 * 100vw), 24.5px);
  font-weight: 700;
}

.p-scene__todoText {
  margin-top: 6px;
  font-size: min(calc(24.5 / 750 * 100vw), 24.5px);
  font-weight: 600;
  line-height: 1.5;
}

/* デザインでは見出しバーの上下に白は無い。バーは薄青の地に直接乗り、
   白パネルはバーの下から始まる（バーの角丸の内側に白がのぞく） */
.p-scene__head {
  position: relative;
  z-index: 1;
  padding: 0;
}

/* バーの角丸から下の白パネルをのぞかせる。パネル自体に負のマージンを付けると
   開閉アニメーションの height に混ざるので、見出し側から白を敷く */
.p-scene__head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 40px;
  background: var(--c-white);
}

.p-scene__head:has(.p-scene__trigger[aria-expanded="false"])::after { display: none; }

.p-scene__list {
  display: grid;
  grid-template-columns: repeat(2, 511px);
  justify-content: center;
  gap: 70px 50px;
  margin-top: 70px;
}

.p-scene__todoTitle, .p-scene__todoText { font-size: 20.5px; }

.p-scene__panel > .c-note { margin-top: 40px; }

/* ==========================================================================
   よくある失敗
   ========================================================================== */
/* デザイン: セクション背景は薄青 */
.p-pitfall {
  background: var(--c-bg);
}

/* PSD 実測: カード 1200 幅・番号ボックス 102×102（左 37px）・本文 28px/48、カード間 50px */
.p-pitfall__inner {
  padding: 128px 0 145px;
}

.p-pitfall__lead {
  margin-top: 36px;
  font-size: 28.5px;
  font-weight: 500;
  text-align: center;
}

.p-pitfall__list {
  margin-top: 70px;
}

/* 白カード＋左端の濃紺の番号ブロック（デザインでは角丸なしの矩形） */
.p-pitfall__item {
  display: flex;
  align-items: center;
  gap: 23px;
  padding: 30px 40px 30px 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--c-white);
  /* デザイン v4 のドロップシャドウはぼかし付き。PNG 実測: 影の伸びが 左 12 / 右 24 / 上 10 / 下 25px
     → オフセット (6, 7)・ぼかし 18。カード端の色 (185,209,237) を青 (1,75,163) で逆算すると α≈.24 */
  box-shadow: min(calc(6 / 750 * 100vw), 6px) min(calc(7 / 750 * 100vw), 7px) min(calc(18 / 750 * 100vw), 18px) rgba(1, 75, 163, .24);
}

.p-pitfall__item + .p-pitfall__item {
  margin-top: 30px;
}

.p-pitfall__num {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 102px;
  height: 102px;
  margin-left: 37px;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}

.p-pitfall__item p {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.07em;
}

/* この見出しはデザイン上、行間が広い（2行で153px） */
.p-pitfall .c-secTitle {
  line-height: 1.35;
}

/* まとめ: 赤い角丸ボックスが青セクションの上辺にまたがる。
   PCデザイン: 赤ボックス 1200x180、上端から 60px 下で青が始まる。
   SPデザイン: 赤ボックス上端から 53px 下で青が始まる。ボックス 690x290 */
.p-pitfall__conclusion {
  position: relative;
  padding: 0 0 70px;
  overflow: hidden;
  /* 青い領域は background-color。上 60px だけ薄青の帯を重ねて赤ボックスがまたぐようにする
     （デザイン実測 PC: 赤ボックス上端 8528 に対し濃紺の上端 8588） */
  background-color: var(--c-blue);
  background-image: linear-gradient(to bottom, var(--c-bg) 0 60px, transparent 60px);
  color: var(--c-white);
  text-align: center;
}

/* PCデザインでは下端は直線 */
/* SPデザイン: 青セクションの下端右側に、45度に傾いた濃紺と半透明青のバンドが薄青へ食い込む */
.p-pitfall__conclusion::before,
.p-pitfall__conclusion::after {
  content: "";
  position: absolute;
  bottom: 0;
  display: none;
  width: min(calc(104 / 750 * 100vw), 104px);
  height: min(calc(52 / 750 * 100vw), 52px);
  transform: skewX(-45deg);
  transform-origin: top left;
}

.p-pitfall__conclusion::before {
  right: min(calc(10 / 750 * 100vw), 10px);
  background: rgba(1, 75, 163, .5);
}

.p-pitfall__conclusion::after {
  right: max(calc(-70 / 750 * 100vw), -70px);
  background: var(--c-blue);
}

.p-pitfall__box {
  padding: 34px 40px 36px;
  border-radius: 24px;
  background: var(--c-red);
}

.p-pitfall__ruby {
  font-size: 28.5px;
  font-weight: 400;
  line-height: 1;
}

/* 「実は、」「の」「だけでは」は小さめ、「一つ」「施策」「成功しません。」は大きく太く */
.p-pitfall__title {
  margin-top: 10px;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.p-pitfall__title b {
  font-size: 72px;
  font-weight: 900;
}

/* ブラウザ既定の small を打ち消して本体（50px）と同じにする */
.p-pitfall__title small {
  font-size: 50px;
}

/* 段落の箱はデザイン実測(SP) 629px。セクション幅(690)だと5行が4行になる。
   この段落はデザインの約物が詰まっていないので palt も切る（切ると1行目22文字でデザインと一致） */
.p-pitfall__text {
  width: 1040px;
  margin: 44px auto 0;
  font-size: 27.5px;
  font-weight: 400;
  font-feature-settings: normal;
  line-height: 1.7;
  letter-spacing: normal;
  text-align: justify;
}

.p-pitfall__conclusion .c-note {
  width: 1030px;
  margin: 20px auto 0;
  text-align: left;
}

/* ==========================================================================
   選ばれる理由
   ========================================================================== */
.p-reason {
  background-color: var(--c-bg);
  background-image: url("../../common/img/deco_sec04_pc.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 3000px auto;
}

/* PSD 実測: カード 1200 幅・青枠 4px・内側 80px、番号 102×102 ＋ タイトル 27.5px 横並び、本文 28px/48、
   数字ピル 204×67（間 26）、小見出し 24px、小本文 20px の3カラム（203px）、右に画像 340px */
.p-reason__inner {
  padding: 140px 0 50px;
}
.p-reason .c-secTitle{
  margin-top: 0;
}
.p-reason__catch {
  margin-top: 44px;
  font-size: 38px;
  font-weight: 700;
  text-align: center;
}

/* デザイン実測: 見出しの字面下からカード1の上端まで SP 58px / PC 72px */
.p-reason__list > .p-reason__item:first-child {
  margin-top: 66px;
}

/* カードは白地に青枠 2px。番号ボックスはカード内の上部中央（SP） */
.p-reason__item {
  position: relative;
  margin-top: 50px;
  padding: 75px 80px 60px;
  border: 2px solid var(--c-blue);
  border-width: 4px;
  border-radius: 30px;
  background: var(--c-white);
  /* デザイン v4 のカードにも青いドロップシャドウ。PNG 実測の伸び 左 12 / 右 24 / 上 10 / 下 25 →
     (6, 7)・ぼかし 18・α .24（ピル・よくある失敗カードと同じ値） */
  box-shadow: 6px 7px 18px rgba(1, 75, 163, .24);
}

.p-reason__head { display: flex; align-items: center; gap: 36px; text-align: left; }

.p-reason__num {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 102px;
  height: 102px;
  margin: 0;
  /* デザインの番号ボックスは角丸なし（SP・PC とも隅がベタで抜けていない） */
  border-radius: 0;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}

/* デザイン実測: 字面の高さ SP 43 / PC 42（= 46px 相当）。SP・PC で同じ大きさ */
.p-reason__title {
  margin-inline: max(calc(-12 / 750 * 100vw), -12px);
  font-size: min(calc(45 / 750 * 100vw), 45px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: .01em;
  text-align: left;
}

/* ※ は見出し（46px）の 0.6 倍 */
.p-reason__title sup { font-size: min(calc(26/ 750 * 100vw), 27.5px); }

.p-reason__text {
  margin-top: 13px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.71;
  text-align:justify;
}

.p-reason__text small { font-size: 20px; }

/* PCデザインは表を書き出しサイズ（1070px）で置いていて、カードの内側 padding より外に出る */
.p-reason__table {
  margin-inline: -19px;
  margin-top: 44px;
}

.p-reason__table img {
  width: 1070px;
  height: auto;
  margin-inline: auto;
}

/* 数字3点セット: 吹き出し型の青いピル（下中央に三角）＋黒いラベル。数字と単位は baseline で揃える */
/* デザイン v4 実測(PC): ピル 208x105・間 24・角丸 14・下の三角 高さ約 22。
   ラベル行が無くなったぶんピルが縦に大きくなり、数字は約 40px */
.p-reason__stats {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  margin-top: 0;
  text-align: center;
}

.p-reason__stats > li { flex: 0 0 208px; min-width: 0; }

/* 数字と単位（名・+・※）は baseline で揃えたいが、flex の baseline 揃えは行が上端に張り付く。
   grid にして align-content で行そのものを縦中央に置き、行の中は baseline で揃える */
.p-reason__stats b {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  align-content: center;
  align-items: baseline;
  justify-content: center;
  min-height: 105px;
  padding: 14px 6px;
  border-radius: 14px;
  background: var(--c-blue);
  color: var(--c-yellow-lt);
  font-size: 43px;
  font-weight: 700;
  line-height: 1;
  /* letter-spacing: -0.03em; */
  white-space: nowrap;
  /* デザイン v4 のピルには青いドロップシャドウ。PNG 実測の伸び 左 12 / 右 24 / 上 10 / 下 25 → (6, 7)・ぼかし 18、
     端の色 (206,220,237) から α≈.24（よくある失敗カードと同じ値） */
  box-shadow: 6px 7px 18px rgba(1, 75, 163, .24);
}

.p-reason__stats b::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  border-width: 16px 13px 0;
  border-style: solid;
  border-color: var(--c-blue) transparent transparent;
  transform: translateX(-50%);
}

/* 単位（名・枠・%）は数字（40px）の 0.6 倍、※ は 0.4 倍 */
.p-reason__stats b i { font-size: 24px; }

.p-reason__stats b sup {
  align-self: flex-start;
  font-size: 12px;
  line-height:3;
  vertical-align: top;
  margin-left: -10px;
}

/* 数字ではなく語句が入るピル（KW1位多数／NAP情報最適化／初期費用ゼロ など）。
   デザインは強調部が約34px、助詞や前置き（業態／全て／初期費用）が約0.7倍の小さい字。
   字面幅の実測: 業態問わない 180 / 全て丸投げOK 186 / 成果報酬型 173 → 34px、
   NAP情報最適化 185（7文字）だけ収まらないので --sm で 30px */
.p-reason__stats b.p-reason__statText {
  align-items: baseline;
  font-size: 34px;
  line-height: 1.15;
}

.p-reason__stats b.p-reason__statText small { font-size: 24px; }

.p-reason__stats b.p-reason__statText--sm { font-size: 30px; }

.p-reason__stats b.p-reason__statText--sm small { font-size: 21px; }

.p-reason__stats span {
  display: block;
  margin-top: 18px;
  color: var(--c-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

/* 理由6（--wide）: デザイン実測 ピル 249px ×4・間 16。カード内幅 1032（1200 − 枠 4×2 − padding 80×2）に
   収めるため 250 ×4 ＋ 10 ×3 ＝ 1030 */
.p-reason__stats--4col { flex-wrap: wrap; gap: 26px 10px; }
.p-reason__stats--4col > li { flex: 0 0 250px; }

/* 理由6 は本文とピルの間を 25px 空ける（指示: 2026-09-11。最初 50 で入れて 25 に変更） */
.p-reason__item--wide .p-reason__text { margin-bottom: 25px; }

/* dt/dd を列方向に流して 3 カラムにする */
/* 列幅はピル（208）に揃える。デザイン実測: ピル下端→見出し字面 約 50px */
.p-reason__points {
  display: grid;
  grid-template-columns: repeat(3, 208px);
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  gap: 0 24px;
  margin-top: 50px;
}

.p-reason__points dt {
  color: #124798;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

/* 「DAU（1日の閲覧者数）を」を1行に収める。デザイン実測: 字面幅 196px → 括弧内は 25 × 0.55 ≒ 14px */
.p-reason__points dt small { font-size: 14px; }

/* 「1〜50万フォロワーまで／予算・目的別で選定」は列幅 208 に収めるため字送りを詰める。
   他の小見出し（24px）より小さいと指摘があり（AUN e5x66e）、20px → 24px・字送り -0.05em に（2026-09-16 ユーザー調整）。
   ※ 「1万〜50万」（AUN 44）か「1〜50万」（PC v4）かは表記が揺れたまま返答が無く、いまは「1〜50万」。クライアント確認中 */
.p-reason__points dt.p-reason__pointTitle--tight {
  font-size: 24px;
  letter-spacing: -0.05em;
}
.p-reason__points dt.p-reason__pointTitle--tight small { font-size: 16px; }

/* 「最新DAU（1日の閲覧者数）を／毎日取得」（AUN 38 優先で「最新」付き）。1行目を 208 に収めるため
   字送り -0.05em・括弧内 13px（20px → 24px、2026-09-16 ユーザー調整） */
.p-reason__points dt.p-reason__pointTitle--dau {
  font-size: 24px;
  letter-spacing: -0.05em;
}
.p-reason__points dt.p-reason__pointTitle--dau small { font-size: 13px; }

.p-reason__points dd {
  margin-top: 12px;
  font-size: 20.71px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.025em;
  word-break: break-all;
  text-align: justify;
}

.p-reason__points dd + dt {
  margin-top: 0;
}

.p-reason__fig {
  margin-inline: max(calc(-4 / 750 * 100vw), -4px);
  margin-top: 40px;
}

.p-reason__fig img {
  width: min(calc(633 / 750 * 100vw), 633px);
  height: auto;
  margin-inline: auto;
}

/* 対応範囲: 罫線付きの表組み（項目名 184px ＋ 縦罫 ＋ 内容） */
.p-reason__scope {
  margin-top: 44px;
}

/* 見出しの下に青い罫線 */
.p-reason__scopeTitle {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--c-blue);
  color: #124798;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* デザイン v4 実測(PC): 罫線はすべて 2px の青。行ピッチ 112（本文2行 71 ＋ 上下 padding 20）。
   左列は見出し字面 184 ＋ 右 padding 26 で 210、縦罫の右 21px から本文（x 675）。最終行の下に罫線は無い */
.p-reason__scopeList {
  display: grid;
  grid-template-columns: 210px 1fr;
  /* 行の高さは固定 116px（指示: 2026-09-11）。中身は dt / dd の align-content で上下中央 */
  grid-auto-rows: 116px;
  margin-top: 0;
}

/* 罫線・余白・字送りは dt / dd 共通。横罫は dt と dd の border-bottom を隙間なく繋げる（column-gap は使わず
   dd の padding-left で間隔を取る）。中身はブロックのまま align-content で上下中央
   （display: grid にすると ::first-line が効かなくなるので block のまま。align-content はブロックにも効く） */
.p-reason__scopeList dt,
.p-reason__scopeList dd {
  display: block;
  align-content: center;
  padding: 20px 0;
  border-bottom: 2px solid var(--c-blue);
  font-size: 20.7px;
  line-height: 1.7;
}

/* 項目名は両端揃え（デザインは文字間が均等に開く）。
   縦罫は border ではなく ::after の 2x52px の線を上下中央に置く（行の上下に余白が残る） */
.p-reason__scopeList dt {
  position: relative;
  padding-right: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: justify;
  text-align-last: justify;
  /* 「SNS・コンテンツ運用」が 188px で列幅 184 を 4px 超えて折れる。デザインは1行なので折り返さない
     （はみ出しは右 padding 26 の中に収まる） */
  white-space: nowrap;
}

.p-reason__scopeList dt::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: 52px;
  background: var(--c-blue);
  transform: translateY(-50%);
}

.p-reason__scopeList dd {
  padding-left: 21px;
  font-weight: 400;
}

/* ※ 「本文の1行目だけ line-height 1」は入れていない。Chrome は ::first-line の line-height を行ボックスに
   反映しない（標準モードで検証: 行送りはブロック側の 1.7 のまま）。行の高さは grid-auto-rows 116 で固定し、
   中身は align-content で上下中央にしている。1行目の上の余白だけ詰めたいなら dd に margin-top: -7px */

.p-reason__scopeList dd + dt {
  margin-top: 0;
}

.p-reason__scopeList dt:nth-last-child(2),
.p-reason__scopeList dd:last-child {
  border-bottom: 0;
}

.p-reason__cols {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 40px;
}

.p-reason__main {
  flex: 1;
  min-width: 0;
}

.p-reason__cols .p-reason__fig {
  flex: 0 0 340px;
  margin-top: 0;
}

.p-reason__cols .p-reason__fig img { width: 340px; }

.p-reason__points--2col {
  grid-template-columns: repeat(2, 471px);
  gap: 0 88px;
  margin-top: 20px;
}

/* 図版の無い理由2・4・5（AUN m5783j #5 #8 #9）。PSD v6 実測: ピル 約326x105 ×3・間 30 で
   カード内幅 1032 いっぱい。小見出しと本文の大きさは理由3と同じで、列幅だけ広がる。
   SP はもともと1カラムなので PC だけに効かせる */
@media screen and (min-width: 769px) {
  .p-reason__item--noFig .p-reason__stats { gap: 30px; }

  .p-reason__item--noFig .p-reason__stats > li { flex: 1 1 0; }

  /* ピルが広くなったので「NAP情報最適化」も他と同じ 34px（v6 実測 字面幅 244） */
  .p-reason__item--noFig .p-reason__stats b.p-reason__statText--sm { font-size: 34px; }

  .p-reason__item--noFig .p-reason__stats b.p-reason__statText--sm small { font-size: 34px; }

  .p-reason__item--noFig .p-reason__points {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 30px;
  }

  /* 理由4 は2行と1行の小見出しが並ぶ。v6 では1行のもの（投稿・写真まで運用代行）が行の縦中央にある。
     v6 は小見出しが1行（「日本でも珍しい変動金額を採用」14字で字面 322px）なので字送りを詰める */
  .p-reason__item--noFig .p-reason__points dt {
    align-self: center;
    letter-spacing: -0.04em;
  }

  /* 本文の字送りは PSD の値（-10 = -0.01em）。理由3 の .025em のままだと v6 より1行多く折り返す */
  .p-reason__item--noFig .p-reason__points dd { letter-spacing: -0.01em; }
}

.p-reason__item .c-note { margin-top: 0; }

/* 理由4 だけ注釈が3列の本文の直下に付くので 20px 空ける（指示: 2026-09-11） */
.p-reason__item:nth-child(4) .c-note { margin-top: 20px; }

/* ==========================================================================
   実績まとめ
   ========================================================================== */
/* デザイン: 薄青の地に濃青の角丸パネル（x=30〜720）が乗る構造 */
.p-proof {
  padding-inline: 0;
  background: var(--c-bg);
  color: var(--c-white);
}

/* デザイン v4 実測(PC): カード 1200x646、中身の左端 x=442（padding 82）、ピル上端まで 66、ボタン下から 64 */
.p-proof__inner {
  padding: 66px 82px 64px;
  border-radius: 30px;
  background: var(--c-blue);
}

/* 「だから」は薄青の角丸バッジに濃紺文字 */
.p-proof__ruby {
  width: fit-content;
  margin-inline: auto;
  padding: 8px 38px;
  border-radius: 100px;
  background: #fff;
  color: var(--c-blue);
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

/* デザイン実測: ピル下端 → 見出し字面 20px（font 28・行送り 1） */
.p-proof__title {
  margin-top: 18px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}

/* PCデザインには横の点線がなく、列のあいだの縦の点線だけ（白 4px ＋ 空き 4px・幅2px） */
/* 区切りの点線はデザイン実測で「白 4px ＋ 空き 4px、太さ 3px」。
   CSS の dotted は丸くて細いので、繰り返しグラデーションで作る。
   PC は横の点線がなく、列のあいだの縦の点線だけになる */
/* 3列はデザインどおり内容幅で不均等: 列1 340 / 列2 368 / 列3 残り（点線は x=782 と 1150）。
   見出し字面下 → 日付字面上 58px。列の上 padding 13 のぶんを引いて 41 */
.p-proof__list {
  display: grid;
  grid-template-columns: 340px 368px 1fr;
  gap: 0;
  margin-top: 44px;
  padding-top: 0;
  background: none;
}

/* 各行は点線で区切る */
.p-proof__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  /* 点線の右 28px から文字（デザイン 811 − 784）。上 padding 13 は赤丸（86px）を点線の上に
     はみ出させないための逃げ（デザインでは 11px はみ出している） */
  padding: 13px 0 0 28px;
  background: repeating-linear-gradient(to bottom, var(--c-white) 0 4px, transparent 4px 8px) top left / 2px 100% repeat-y;
  text-align: left;
}

.p-proof__item + .p-proof__item {
  margin-top: 0;
}

/* 「約3.7倍」バッジ。PC は1件目の日付の右隣（列頭から 234px、径 72px）、
   SP は1項目目の右上に飛び出す */
.p-proof__item .p-proof__badge {
  /* デザイン実測: 直径 86、左端は列の文字左端から 231px。上端は列の上端（点線の上に出さない） */
  position: absolute;
  top: 0;
  right: auto;
  left: 231px;
  width: 86px;
  height: 86px;
  font-size: 22px;
}

/* 字面実測: 日付「2026.07 大阪・和食店」の字面幅 223px → 24px */
.p-proof__date {
  display: block;
  font-size: 24px;
  line-height: 1;
}

/* 「韓国語検索での表示順位」を1行に収める（デザインは1行・幅301px） */
.p-proof__kpi {
  display: block;
  /* 日付字面下 → 見出し字面上 11px */
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  /* 列3「NAVERブログでの言及数」はデザインでも右 padding に 11px 食い込んで1行。折り返さない */
  white-space: nowrap;
}

.p-proof__figures {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  /* 見出し字面下 → 数字字面上 19px。行送りを 0.74 にして行boxを字面（98 × 0.73 ≒ 71）に合わせ、
     点線の長さがデザイン（日付の 4px 上 → 数字の 3px 下 = 155px）に揃うようにする */
  margin-top: 13px;
  font-weight: 700;
  line-height: 0.74;
  white-space: nowrap;
}

.p-proof__meta { flex: 0 0 auto; }

/* 字面実測(PC v4): 前値の数字 44px 高 → 60px、前値の単位（位・件）35px 高 → 40px、
   後値の数字 71px 高 → 98px、後値の単位（%・位・件）約 40px 高 → 50px、矢印 39px 高 → 48px */
.p-proof__before { font-size: 60px; }
.p-proof__before small { font-size: 40px; }
.p-proof__arrow { font-size: 48px; font-weight: 400; }

.p-proof__after {
  color: var(--c-yellow-lt);
  /* 字面実測: 「22%」幅 140・数字高 71 → 94px */
  font-size: 94px;
  letter-spacing: -0.03em;
}

/* 単位（%・位・件）は数字（105px）の 0.6 倍 */
.p-proof__after small { font-size: 46px; }

.p-proof__badge {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-bg);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

/* 注釈字面下 → ボタン上 37px */
.p-proof .c-btn { margin-top: 15px; }

.p-proof__item:first-child {
  padding-left: 0;
  background: none;
}

/* 数字字面下 → 注釈字面上 48px */
.p-proof .c-note {
  margin-top: 47px;
  text-align: left;
}

/* 折り返し行を「※ 」の後ろに揃えるぶら下げ（※ 14.5 ＋ 半角スペース ≒ 18px）。
   text-indent は最初の行にしか効かないので、行ごとの span を block にして各行に効かせる */
.p-proof .c-note > span {
  display: block;
  padding-left: 18px;
  text-indent: -18px;
}

/* ==========================================================================
   施策実施までの流れ
   ========================================================================== */
.p-flow {
  background: var(--c-bg);
}

/* デザインはセクション上端からラベルの字面まで144px */
.p-flow__inner {
  padding: 135px 0 100px;
}

.p-flow__lead {
  margin-top: 36px;
  font-size: 28px;
  text-align: center;
}

.p-flow__list {
  display: grid;
  grid-template-columns: repeat(5, 222px);
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  margin-top: 60px;
}

.p-flow__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.p-flow__item + .p-flow__item {
  margin-top: 0;
}

/* 番号は極太の大きい数字（実測高 97px ≒ 0.72em → 130px）。
   SP はカードが番号に少し重なる */
.p-flow__num {
  flex: 0 0 auto;
  width: auto;
  margin: 0 0 4px;
  color: var(--c-blue);
  font-size: 130px;
  font-weight: 900;
  line-height: 0.8;
  text-align: center;
}

.p-flow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  border-radius: 20px;
  background: var(--c-blue);
  /* PSD v6: ドロップシャドウ #014ba3・距離 (6, 8)・ぼかし 20（PSD の x は -6 と出るが、PNG 実測では
     影は右 26px・下 28px・左 10px に伸びていて右下向き）。不透明度は PSD から取れないので、
     カード端の色 (156,188,226) に合わせて .48。SP の 260928 版も同じ見え方 */
  box-shadow: 6px 8px 20px rgba(1, 75, 163, .48);
}

.p-flow__title {
  padding: 12px 8px 10px;
  color: var(--c-white);
  font-size: 32.5px;
  font-weight: 500;
  text-align: center;
}

.p-flow__text {
  flex: 1;
  margin: 0 4px 4px;
  padding: 24px 30px 30px;
  border-radius: 16px;
  background: var(--c-white);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.54;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   料金プラン（デザイン v6 で追加）
   PSD v6 実測: 流れのカード下端 → 「PLAN」の字面 164px、カード 560 ×2・間 80、
   赤枠 4px・角丸 30、見出し帯 100px、カード下端 → FAQ 166px
   ========================================================================== */
.p-plan {
  background: var(--c-bg);
}

.p-plan__inner {
  padding: 60px 0 166px;
}

/* 見出しは1行で字面 1140px（v6 実測）。他のセクションと同じ 50 / 74px で収まる */
.p-plan .c-secTitle { margin-top: 46px; }

.p-plan__lead {
  margin-top: 20px;
  font-size: 28px;
  line-height: 48px;
  text-align: center;
}

.p-plan__list {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.p-plan__item {
  display: flex;
  flex-direction: column;
  width: 560px;
}

/* 英字のプラン名はカードの上辺に乗る（字面の下端がカード上端とほぼ同じ高さ） */
.p-plan__en {
  position: relative;
  z-index: 1;
  margin-bottom: -9px;
  color: var(--c-red);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.p-plan__card {
  flex: 1;
  overflow: hidden;
  border: 4px solid var(--c-red);
  border-radius: 30px;
  background: var(--c-white);
  box-shadow: 6px 7px 18px rgba(1, 75, 163, .24);
}

.p-plan__name {
  padding: 34px 36px 32px;
  background: var(--c-red);
  color: var(--c-white);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.075em;
}

.p-plan__body {
  padding: 27px 36px 40px;
}

.p-plan__catch {
  color: #0c244a;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

/* 「1名」「円〜」は金額の 0.6 倍 */
.p-plan__price {
  margin-top: 14px;
  padding-bottom: 30px;
  border-bottom: 2px solid #aaa;
  color: var(--c-red);
  font-size: 45px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

.p-plan__price b {
  font-size: 76px;
  letter-spacing: -0.04em;
}

/* 金額のカンマは数字と同じ大きさだと目立ちすぎるので、「1名」「円〜」と同じ大きさにする */
.p-plan__price .p-plan__comma { font-size: 45px; }

.p-plan__cond {
  margin-top: 30px;
  font-size: 21px;
  letter-spacing: -0.01em;
  font-weight: 500;
  line-height: 1.75;
}

/* 項目のあいだはデザインでは空行ひとつぶん（35px） */
.p-plan__points {
  margin-top: 24px;
  padding-bottom: 28px;
  border-bottom: 2px solid #aaa;
}

/* 本文の幅はデザインで 432px（右に 8px 余る） */
.p-plan__points li {
  position: relative;
  padding-right: 8px;
  padding-left: 40px;
  font-size: 21px;
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1.75;
}

.p-plan__points li + li { margin-top: 35px; }

.p-plan__points li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 33px;
  height: 33px;
  background: url("../img/icon_check.png") no-repeat center / contain;
}

.p-plan__points small {
  display: block;
  font-size: 13px;
  line-height: 1.6;
}

.p-plan__rank {
  margin-top: 22px;
  font-size: 21px;
  letter-spacing: -0.01em;
  font-weight: 500;
  line-height: 1.75;
}

/* ==========================================================================
   実績まとめ〜料金プランの背景（PC）
   v6 では「選ばれる理由」の斜線が実績まとめ・流れ・料金プランの左右まで続く。
   画像は PSD v6 の y=16176（実績まとめのパネル上端）〜19615（FAQ 上端）を合成画像から切り出し、
   パネル・カード・見出しの下は白ストライプのレイヤーを合成して埋めたもの。FV と同じく 3000px に延長。
   3セクション合計の高さは実装とデザインで 14px しか違わないので上端基準で置く。
   SP のデザインにはこの範囲の斜線が無い
   ========================================================================== */
.p-lowerBg {
  background: var(--c-bg) url("../../common/img/deco_lower_pc.png") no-repeat top center / 3000px auto;
}

.p-lowerBg .p-proof,
.p-lowerBg .p-flow,
.p-lowerBg .p-plan { background: none; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.p-faq {
  background: var(--c-blue);
}

/* デザインはセクション上端からラベルの字面まで151px（実装は80pxの padding で87px だった） */
.p-faq__inner {
  padding: 146px 0 100px;
}

.p-faq__list {
  margin-top: 60px;
}

.p-faq__item + .p-faq__item {
  margin-top: 44px;
}

/* デザインはQとAが1枚の白カードに入り、Qの行だけ薄青の帯になる。
   帯の角丸はカード側の overflow で落とす。
   PSD実測: PC はカード 1200幅・角丸24／Q帯 117高さ（丸57＋上下30）で、
   丸は左端から82px、質問文までは18px、トグルは右端から74px。SP はカード 690幅・Q帯 174高さ */
.p-faq__item {
  overflow: hidden;
  border-radius: 24px;
  background: var(--c-white);
}

.p-faq__q {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 30px 74px 30px 82px;
  border: 0;
  background: var(--c-bg);
  text-align: left;
  cursor: pointer;
}

.p-faq__mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 57px;
  height: 57px;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 32.5px;
  font-weight: 500;
  line-height: 1;
}

/* デザインではAアイコンも濃紺（赤ではない） */
.p-faq__mark--a { background: var(--c-blue); }

/* 質問文は青の太字。PSD実測(SP) 30px＝2行で字面 80px、Q帯 174px に収まる */
.p-faq__qText {
  flex: 1;
  color: var(--c-blue);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.03em;
}

/* 閉＝＋ / 開＝×。デザインでは薄い青の丸の中に濃紺の記号 */
.p-faq__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #accef7;
}

.p-faq__toggle::before,
.p-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 3px;
  background: var(--c-blue);
  transition: transform .3s;
}

.p-faq__toggle::before { transform: translate(-50%, -50%); }
.p-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.p-faq__q.is-open .p-faq__toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
.p-faq__q.is-open .p-faq__toggle::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Aは同じカードの続きなので、上のマージンと角丸は持たせない */
.p-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 74px 44px 82px;
}

.p-faq__aText {
  flex: 1;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.57;
}

.p-faq__aText p + p { margin-top: 0; }
.p-faq__aText .c-note { margin-top: 12px; }

/* ==========================================================================
   韓国人集客ラボ
   ========================================================================== */
.p-lab {
  background: var(--c-bg);
}

/* スライダーの矢印を収めるため、導入事例と同じ左右60pxにする */
/* デザインはセクション上端からラベルの字面まで144px */
.p-lab__inner {
  padding: 135px 0 110px;
}

.p-lab__lead {
  width: 1034px;
  margin: 40px auto 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
}

.p-lab__card {
  padding: 28px 28px 34px;
  border-radius: 24px;
  background: var(--c-white);
  box-shadow: 8px 8px 0 rgba(1, 75, 163, .12);
}

/* デザイン実測: 「データ」の字面 85x27（= 29px 相当） */
.p-lab__cat {
  margin-top: 26px;
  font-size: 24.5px;
  font-weight: 400;
}

.p-lab__title {
  margin-top: 10px;
  font-size: 20.5px;
  font-weight: 400;
  line-height: 1.5;
}

.p-lab .c-slider { margin-top: 60px; }

/* PC は絶対にカルーセルにしない。デザイン通り 3×2 の6枚グリッド。カルーセルは SP だけ */
.p-lab .swiper { overflow: visible; }

.p-lab .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 365px);
  justify-content: center;
  gap: 46px 49px;
  transform: none;
}

.p-lab .swiper-slide { width: auto; }

.p-lab .c-slider__prev, .p-lab .c-slider__next { display: none; }

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.p-contact {
  background: var(--c-blue);
  color: var(--c-white);
}

/* デザインはセクション上端からラベルの字面まで153px */
.p-contact__inner {
  padding: 150px 0 160px;
}

/* デザイン実測: 字面の高さ 54（= 58px 相当）。SP・PC で同じ大きさ */
.p-contact__title {
  margin-top: 60px;
  font-size: min(calc(58 / 750 * 100vw), 58px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .075em;
  text-align: center;
}

/* HubSpot 埋め込みフォームの受け皿。幅と上余白は自前フォームだったときの値（1046 / 58）に合わせる。
   フォームの中身（.hs-form）は HubSpot 側の描画なので、ここでは触らない */
.p-contact__hs {
  max-width: 800px;
  margin-inline: auto;
  margin-top: 58px;
}

.p-contact__hs + .p-contact__note { margin-top: 24px; }

/* 以下 .p-contact__form 〜 .p-contact__textarea は自前フォームだったときの指定。
   HubSpot に差し替えたので現在は未使用（raw HTML 埋め込みに切り替えたときの参考に残している） */
/* PSD 実測: フォーム幅 1046（2列・間 46）、ラベル 24px、入力欄高 72、行間 38 */
.p-contact__form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 38px 46px;
  max-width: 1046px;
  margin-inline: auto;
  margin-top: 58px;
}

.p-contact__row + .p-contact__row {
  margin-top: 0;
}

.p-contact__label {
  display: block;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 350;
}

/* デザイン: 入力欄の高さは約77px */
.p-contact__input,
.p-contact__textarea {
  width: 100%;
  padding: 20px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--c-white);
  color: var(--c-text);
  font-family: inherit;
  font-size: 22px;
  line-height: 1.4;
}

.p-contact__textarea { min-height: 210px; resize: vertical; }

.p-contact__note {
  margin-top: -10px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

.p-contact__row:nth-last-child(3) { grid-column: 1 / -1; }

.p-contact__form .c-btn, .p-contact__note { grid-column: 1 / -1; }

.p-contact__form .c-btn { margin-top: 20px; }

/* ==========================================================================
   SP (max-width: 768px)
   寸法は min(calc(N / 750 * 100vw), Npx)。設計幅 750px 基準の可変値
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* ----- FV -----
     SP は1カラム。装飾画像は 750px 幅の切り出し（デザインの y=7 が画像の 0） */
  .p-fv__inner {
    display: block;
    padding: min(calc(72 / 750 * 100vw), 72px) min(calc(30 / 750 * 100vw), 30px) min(calc(65 / 750 * 100vw), 65px);
    text-align: center;
  }

  .p-fv__lead {
    justify-content: center;
    gap: min(calc(6 / 750 * 100vw), 6px);
    padding-left: 0;
    font-size: min(calc(24.5 / 750 * 100vw), 24.5px);
    letter-spacing: 0.05em;
  }

  .p-fv__lead::before, .p-fv__lead::after {
    width: min(calc(2 / 750 * 100vw), 2px);
    height: min(calc(34 / 750 * 100vw), 34px);
    box-shadow: min(calc(8 / 750 * 100vw), 8px) 0 0 var(--c-text);
  }

  .p-fv__lead::before { box-shadow: max(calc(-8 / 750 * 100vw), -8px) 0 0 var(--c-text); }

  .p-fv__sub {
    margin-top: min(calc(16 / 750 * 100vw), 16px);
    font-size: min(calc(47.5 / 750 * 100vw), 47.5px);
    line-height: 1;
    letter-spacing: 0.025em;
  }

  .p-fv__subSmall { font-size: min(calc(33 / 750 * 100vw), 33px); }

  .p-fv__title {
    margin-top: -2px;
    font-size: min(calc(141.5 / 750 * 100vw), 141.5px);
    line-height: 1;
    letter-spacing: 0.025em;
  }

  .p-fv__ruby {
    margin-top: min(calc(14 / 750 * 100vw), 14px);
    padding-left: 0;
    font-size: min(calc(20 / 750 * 100vw), 20px);
    line-height: 1;
    letter-spacing: normal;
  }

  .p-fv__stats {
    justify-content: center;
    gap: min(calc(18 / 750 * 100vw), 18px);
    margin-top: min(calc(24 / 750 * 100vw), 24px);
  }

  .p-fv__stat {
    width: min(calc(178 / 750 * 100vw), 178px);
    height: min(calc(178 / 750 * 100vw), 178px);
  }

  /* 260928 版実測: ピル上端 y=908。52px のときは 867 で 41px 高かった */
  .p-fv__cta { margin-top: min(calc(93 / 750 * 100vw), 93px); }

  .p-fv__cta a {
    --sh-x: min(calc(5 / 750 * 100vw), 5px);
    --sh-y: min(calc(8 / 750 * 100vw), 8px);
    --sh-c: rgba(0, 0, 0, .2);
    width: min(calc(400 / 750 * 100vw), 400px);
    padding: min(calc(39 / 750 * 100vw), 39px) 0 min(calc(38 / 750 * 100vw), 38px);
    font-size: min(calc(28.5 / 750 * 100vw), 28.5px);
  }

  .p-fv__cta i {
    top: max(calc(-15 / 750 * 100vw), -15px);
    padding: min(calc(7 / 750 * 100vw), 7px) min(calc(15 / 750 * 100vw), 15px);
    border-width: min(calc(2 / 750 * 100vw), 2px);
    font-size: min(calc(22.5 / 750 * 100vw), 22.5px);
  }

  /* 260928 版実測: ピル下端 y=1013 → イラスト上端 y=1032 */
  .p-fv__visual { width: auto; margin-top: min(calc(18 / 750 * 100vw), 18px); }

  .p-fv__visual img { width: min(calc(690 / 750 * 100vw), 690px); }

  .p-fv__note {
    width: auto;
    max-width: none;
    margin-top: min(calc(26 / 750 * 100vw), 26px);
    font-size: min(calc(18 / 750 * 100vw), 18px);
    line-height: 1.32;
    text-align: left;
  }

  /* ----- 最新実績帯 -----
     SP は「最新実績」バッジとキャプションが横並び、数値は次の行 */
  .p-result__inner { padding: min(calc(44 / 750 * 100vw), 44px) min(calc(30 / 750 * 100vw), 30px); }

  .p-result__label {
    display: inline-block;
    width: auto;
    margin-inline: 0;
    padding: min(calc(8 / 750 * 100vw), 8px) min(calc(24 / 750 * 100vw), 24px);
    font-size: min(calc(23 / 750 * 100vw), 23px);
  }

  .p-result__caption {
    display: inline-block;
    margin-left: min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(25.5 / 750 * 100vw), 25.5px);
  }

  .p-result__figures {
    display: flex;
    gap: min(calc(16 / 750 * 100vw), 16px);
    margin-top: min(calc(20 / 750 * 100vw), 20px);
    margin-left: 0;
  }

  .p-result__body { display: contents; align-items: normal; justify-content: normal; margin-top: 0; }

  .p-result__figures .p-result__badge { bottom: min(calc(12 / 750 * 100vw), 12px); }

  .p-result__before { font-size: min(calc(78 / 750 * 100vw), 78px); }

  .p-result__arrow { font-size: min(calc(48 / 750 * 100vw), 48px); }

  .p-result__after { font-size: min(calc(137 / 750 * 100vw), 137px); }

  .p-result__after small { font-size: min(calc(82 / 750 * 100vw), 82px); }

  .p-result__badge {
    padding: min(calc(10 / 750 * 100vw), 10px) min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(27 / 750 * 100vw), 27px);
  }

  .p-result__dots {
    gap: min(calc(40 / 750 * 100vw), 40px);
    margin-top: min(calc(26 / 750 * 100vw), 26px);
  }

  .p-result__dots .swiper-pagination-bullet {
    width: min(calc(12 / 750 * 100vw), 12px);
    height: min(calc(12 / 750 * 100vw), 12px);
  }

  .p-result__link {
    margin-top: min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(26/ 750 * 100vw), 27.5px);
  }

  .p-result__note {
    margin-top: min(calc(24 / 750 * 100vw), 24px);
    font-size: min(calc(16 / 750 * 100vw), 16px);
    text-align: left;
  }

  /* ----- 導入事例 -----
     SP は上端が薄青→白の波形（インラインSVG）。右下に青い三角形の装飾 */
  /* SP の白ブロブは PSD（sec_01/長方形 1304）から書き出した blob_case_sp.png（750x1665・透過）。
     デザインではセクション上端（実績帯の下端 2480）から 59px 下に画像の上端が来る（PNG の白の始まり x0/375/749 = 2668/2597/2575 と画像の不透明開始 130/58/37 の差）。
     地色は薄青にして、画像の上の波形と左右の角に薄青がのぞくようにする */
  /* 右下に見える青い斜線は「なぜ今」の装飾（deco_sec02_sp.png）がブロブの裏に回り込んでいるもの。
     ブロブの丸い角の外にだけ見えるので、同じ装飾画像をブロブの下のレイヤーとして敷く。
     デザイン: 装飾の見え始めは x=745 で「なぜ今」上端の 56px 上。画像側は同じ縞が上から 192px にあるので
     画像上端 = セクション下端 − 248 → bottom 基準で −(5690 − 248) = −5442 */
  .p-case {
    background-color: var(--c-bg);
    background-image: url("../img/blob_case_sp.png");
    background-repeat: no-repeat;
    background-position: center min(calc(59 / 750 * 100vw), 59px);
    background-size: 100% auto;
  }

  /* デザインでは縞がブロブの白の上にも少し乗るので、装飾画像はブロブの背景ではなく ::before で前面に敷く
     （中身より下）。位置は「なぜ今」側の画像と連続するように 画像上端 = セクション下端 − 244 */
  .p-case::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../../common/img/deco_sec02_sp.png") no-repeat center bottom max(calc(-5446 / 750 * 100vw), -5446px) / 100% auto;
    pointer-events: none;
  }

  .p-case__inner {
    position: relative;
    z-index: 1;
  }

  .p-case__inner { padding: min(calc(228 / 750 * 100vw), 228px) min(calc(60 / 750 * 100vw), 60px) min(calc(140 / 750 * 100vw), 140px); }

  .p-case__card {
    padding: min(calc(70 / 750 * 100vw), 70px) min(calc(50 / 750 * 100vw), 50px) min(calc(90 / 750 * 100vw), 90px);
    border-radius: min(calc(30 / 750 * 100vw), 30px);
  }

  .p-case__name {
    margin-top: min(calc(40 / 750 * 100vw), 40px);
    font-size: min(calc(31 / 750 * 100vw), 31px);
  }

  .p-case__desc {
    margin-top: min(calc(14 / 750 * 100vw), 14px);
    font-size: min(calc(24.5 / 750 * 100vw), 24.5px);
  }

  /* ----- なぜ今、韓国か ----- */
  /* 装飾画像はデザインよりセクション上端が約 244px 分下にずれていたので上へ寄せる
     （デザインの縞の見え始め 4156 に対し、なぜ今の上端 4212 ＋ 画像内の縞位置 192。
     左右端の縞 8 本の位置をデザインと照合して −244 で ±1px） */
  .p-why {
    background-image: url("../../common/img/deco_sec02_sp.png");
    background-position: center max(calc(-244 / 750 * 100vw), -244px);
    background-size: 100% auto;
  }

  .p-why__inner { padding: min(calc(120 / 750 * 100vw), 120px) min(calc(30 / 750 * 100vw), 30px) min(calc(100 / 750 * 100vw), 100px); }

  .p-why__lead {
    width: auto;
    margin: min(calc(24 / 750 * 100vw), 24px) min(calc(30 / 750 * 100vw), 30px) 0;
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: 1.72;
    text-align: start;
  }

  .p-why__lead sup { font-size: min(calc(17 / 750 * 100vw), 17px); }

  .p-why__cards { display: block; margin-top: min(calc(40 / 750 * 100vw), 40px); }

  .p-why__card {
    padding-bottom: min(calc(50 / 750 * 100vw), 50px);
    border-radius: min(calc(30 / 750 * 100vw), 30px);
    box-shadow: min(calc(6 / 750 * 100vw), 6px) min(calc(7 / 750 * 100vw), 7px) min(calc(18 / 750 * 100vw), 18px) rgba(1, 75, 163, .24);
  }

  .p-why__card + .p-why__card { margin-top: min(calc(50 / 750 * 100vw), 50px); }

  .p-why__cardTitle {
    padding: min(calc(30 / 750 * 100vw), 30px) min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(53.5 / 750 * 100vw), 53.5px);
  }

  .p-why__fig { margin-top: min(calc(8 / 750 * 100vw), 8px); }

  /* SP はカードが縦並びで隣と揃える必要がないので、PC 用の上下 margin を戻す */
  .p-why__card:nth-child(4) .p-why__fig {
    margin-top: min(calc(8 / 750 * 100vw), 8px);
    margin-bottom: 0;
  }

  .p-why__card:nth-child(1) .p-why__fig img { width: min(calc(528 / 750 * 100vw), 528px); }
  .p-why__card:nth-child(2) .p-why__fig img { width: min(calc(592 / 750 * 100vw), 592px); }
  .p-why__card:nth-child(3) .p-why__fig img { width: min(calc(592 / 750 * 100vw), 592px); }
  .p-why__card:nth-child(4) .p-why__fig img { width: min(calc(594 / 750 * 100vw), 594px); }

  .p-why__text {
    width: min(calc(584 / 750 * 100vw), 584px);
    margin-top: min(calc(14 / 750 * 100vw), 14px);
    font-size: min(calc(30 / 750 * 100vw), 30px);
    line-height: 1.75;
    letter-spacing: 0;
  }

  .p-why__text, .p-why__card .c-note { margin-inline: min(calc(50 / 750 * 100vw), 50px); }

  /* ----- 韓国人が決めるまで -----
     デザイン（SP v3）はセクション地色が薄青で、前後の「なぜ今」「よくある失敗」と地続き。
     白はアコーディオンのパネルだけ（実測: パネル x 30..720・下端の角丸 30・カードは内側 30px） */
  .p-scene {
    background-color: var(--c-bg);
    background-image: url("../../common/img/deco_scene_sp.png");
    background-size: 100% auto;
  }

  .p-scene__inner { padding: min(calc(60 / 750 * 100vw), 60px) min(calc(30 / 750 * 100vw), 30px); }

  .p-scene__trigger {
    gap: min(calc(24 / 750 * 100vw), 24px);
    padding: min(calc(46 / 750 * 100vw), 46px) min(calc(36 / 750 * 100vw), 36px);
    border-radius: min(calc(24 / 750 * 100vw), 24px);
  }

  .p-scene__icon {
    width: min(calc(56 / 750 * 100vw), 56px);
    height: min(calc(56 / 750 * 100vw), 56px);
  }

  .p-scene__icon::before, .p-scene__icon::after {
    width: min(calc(26 / 750 * 100vw), 26px);
    height: min(calc(4 / 750 * 100vw), 4px);
  }

  .p-scene__headSub { font-size: min(calc(24.5 / 750 * 100vw), 24.5px); line-height: 1.4; }

  .p-scene__headText {
    font-size: min(calc(34.5 / 750 * 100vw), 34.5px);
    line-height: 1.4;
  }

  /* 40 ＋ パネルを上げた 24 ＋ デザイン合わせの 6 ＝ 70
     （デザイン実測: バー下端 9507 → リードの字面 9554 で 47px） */
  .p-scene__lead {
    width: min(calc(625 / 750 * 100vw), 625px);
    margin-top: min(calc(70 / 750 * 100vw), 70px);
    font-size: min(calc(27.5 / 750 * 100vw), 27.5px);
    line-height: 1.7;
    text-align: start;
  }

  /* 左右 padding はデザイン実測 42（カードの枠 61..689 に対しラベル箱の左端 105） */
  .p-scene__item {
    margin-top: min(calc(50 / 750 * 100vw), 50px);
    padding: min(calc(50 / 750 * 100vw), 50px) min(calc(42 / 750 * 100vw), 42px) min(calc(40 / 750 * 100vw), 40px);
    border-radius: min(calc(24 / 750 * 100vw), 24px);
  }

  .p-scene__step {
    top: max(calc(-24 / 750 * 100vw), -24px);
    padding: min(calc(10 / 750 * 100vw), 10px) min(calc(30 / 750 * 100vw), 30px);
    border-radius: min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(30.5 / 750 * 100vw), 30.5px);
  }

  .p-scene__step i { font-size: min(calc(36 / 750 * 100vw), 36px); }

  /* ラベル箱の右端 197 → 本文の左端 251（デザイン実測） */
  .p-scene__body { gap: min(calc(54 / 750 * 100vw), 54px); }

  .p-scene__labelText { gap: min(calc(7 / 750 * 100vw), 7px); }

  .p-scene__labelText b {
    width: min(calc(96 / 750 * 100vw), 96px);
    height: min(calc(97 / 750 * 100vw), 97px);
    border-radius: min(calc(12 / 750 * 100vw), 12px);
    font-size: min(calc(75 / 750 * 100vw), 75px);
  }

  .p-scene__labelText b.p-scene__labelDot { height: min(calc(29 / 750 * 100vw), 29px); }

  .p-scene__labelText b.p-scene__labelDot::before {
    width: min(calc(11 / 750 * 100vw), 11px);
    height: min(calc(11 / 750 * 100vw), 11px);
  }


  .p-scene__media { font-size: min(calc(24.5 / 750 * 100vw), 24.5px); }

  .p-scene__desc {
    margin-top: min(calc(8 / 750 * 100vw), 8px);
    font-size: min(calc(24 / 750 * 100vw), 24px);
    line-height: 1.6;
  }

  /* SP も二段組み。デザイン字面実測 整数部 85px / 小数部 60px（比は PC と同じ 0.71） */
  .p-scene__num {
    margin-top: min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(112 / 750 * 100vw), 112px);
  }

  .p-scene__num small { font-size: min(calc(80 / 750 * 100vw), 80px); }

  .p-scene__num sup {
    top: max(calc(-46 / 750 * 100vw), -46px);
    font-size: min(calc(14.5 / 750 * 100vw), 14.5px);
  }

  .p-scene__rank {
    margin-top: min(calc(14 / 750 * 100vw), 14px);
    padding: min(calc(8 / 750 * 100vw), 8px) min(calc(18 / 750 * 100vw), 18px);
    font-size: min(calc(24.5 / 750 * 100vw), 24.5px);
  }

  .p-scene__todo {
    margin-top: min(calc(30 / 750 * 100vw), 30px);
    padding-top: min(calc(17 / 750 * 100vw), 17px);
  }

  .p-scene__todo::before {
    width: min(calc(190 / 750 * 100vw), 190px);
    height: min(calc(34 / 750 * 100vw), 34px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='34' viewBox='0 0 190 34'%3E%3Cpath d='M0 1H171L190 33' fill='none' stroke='%23124798' stroke-width='2'/%3E%3C/svg%3E");
  }

  .p-scene__todo::after {
    top: min(calc(32 / 750 * 100vw), 32px);
    /* カードの枠の内側まで伸ばす（カード padding 50 → 42 に合わせて 52 → 44） */
    right: max(calc(-44 / 750 * 100vw), -44px);
    left: min(calc(190 / 750 * 100vw), 190px);
  }

  .p-scene__todoTitle { margin-top: max(calc(-11 / 750 * 100vw), -11px); }

  .p-scene__todoText {
    margin-top: min(calc(8 / 750 * 100vw), 8px);
    line-height: 1.5;
  }

  /* ----- よくある失敗 ----- */
  .p-pitfall__inner { padding: min(calc(140 / 750 * 100vw), 140px) min(calc(30 / 750 * 100vw), 30px) min(calc(90 / 750 * 100vw), 90px); }

  .p-pitfall__lead {
    margin-top: min(calc(30 / 750 * 100vw), 30px);
    font-size: min(calc(28.5 / 750 * 100vw), 28.5px);
  }

  .p-pitfall__list { margin-top: min(calc(60 / 750 * 100vw), 60px); }

  .p-pitfall__item {
    gap: min(calc(30 / 750 * 100vw), 30px);
    padding: min(calc(30 / 750 * 100vw), 30px) min(calc(30 / 750 * 100vw), 30px) min(calc(30 / 750 * 100vw), 30px) 0;
    border-radius: min(calc(30 / 750 * 100vw), 30px);
  }

  .p-pitfall__item + .p-pitfall__item { margin-top: min(calc(30 / 750 * 100vw), 30px); }

  .p-pitfall__num {
    width: min(calc(105 / 750 * 100vw), 105px);
    height: min(calc(105 / 750 * 100vw), 105px);
    margin-left: min(calc(30 / 750 * 100vw), 30px);
    font-size: min(calc(46 / 750 * 100vw), 46px);
  }

  .p-pitfall__item p {
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: 1.55;
  }

  /* 下端の薄青の帯（斜めバンドの受け皿 52px）と斜めバンドは廃止（2026-09-14）。
     青い領域はデザイン実測に合わせる: 注釈の字面下 → 領域の下端 91px（旧 140 は下げすぎ） */
  .p-pitfall__conclusion {
    padding: 0 min(calc(30 / 750 * 100vw), 30px) min(calc(92 / 750 * 100vw), 92px);
    background-image: linear-gradient(to bottom,
      var(--c-bg) 0 min(calc(58 / 750 * 100vw), 58px),
      transparent min(calc(58 / 750 * 100vw), 58px));
  }

  .p-pitfall__box {
    padding: min(calc(40 / 750 * 100vw), 40px) min(calc(30 / 750 * 100vw), 30px) min(calc(38 / 750 * 100vw), 38px);
    border-radius: min(calc(24 / 750 * 100vw), 24px);
  }

  .p-pitfall__ruby { font-size: min(calc(28.5 / 750 * 100vw), 28.5px); }

  .p-pitfall__title {
    margin-top: min(calc(18 / 750 * 100vw), 18px);
    font-size: min(calc(40 / 750 * 100vw), 40px);
    line-height: 1.35;
  }

  .p-pitfall__title b { font-size: min(calc(54 / 750 * 100vw), 54px); }

  .p-pitfall__title small { font-size: min(calc(40 / 750 * 100vw), 40px); }

  .p-pitfall__text {
    width: min(calc(629 / 750 * 100vw), 629px);
    margin: min(calc(44 / 750 * 100vw), 44px) auto 0;
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: 1.75;
  }

  .p-pitfall__conclusion .c-note { width: auto; margin: min(calc(30 / 750 * 100vw), 30px) 0 0; text-align: left; }

  /* ----- 選ばれる理由 ----- */
  .p-reason {
    background-image: url("../../common/img/deco_sec04_sp.png");
    background-size: 100% auto;
  }

  /* 上は 140（デザイン実測: 結論ブロックの青い領域の下端 → 「COMMON PITFALLS」の字面まで 140px） */
  .p-reason__inner { padding: min(calc(140 / 750 * 100vw), 140px) min(calc(30 / 750 * 100vw), 30px) min(calc(80 / 750 * 100vw), 80px); }

  .p-reason__catch {
    margin-top: min(calc(40 / 750 * 100vw), 40px);
    font-size: min(calc(32 / 750 * 100vw), 32px);
  }

  .p-reason__item {
    margin-top: min(calc(31 / 750 * 100vw), 31px);
    padding: min(calc(44 / 750 * 100vw), 44px) min(calc(26 / 750 * 100vw), 26px) min(calc(40 / 750 * 100vw), 40px);
    border-width: 2px;
    border-radius: min(calc(30 / 750 * 100vw), 30px);
    box-shadow: min(calc(6 / 750 * 100vw), 6px) min(calc(7 / 750 * 100vw), 7px) min(calc(18 / 750 * 100vw), 18px) rgba(1, 75, 163, .24);
  }

  .p-reason__list > .p-reason__item:first-child { margin-top: min(calc(52 / 750 * 100vw), 52px); }

  .p-reason__head { display: block; align-items: normal; gap: normal; text-align: center; }

  .p-reason__num {
    flex: 0 1 auto;
    width: min(calc(72 / 750 * 100vw), 72px);
    height: min(calc(72 / 750 * 100vw), 72px);
    margin: 0 auto min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(40 / 750 * 100vw), 40px);
  }

  .p-reason__title {
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-align: center;
  }

  .p-reason__text {
    margin-top: min(calc(34 / 750 * 100vw), 34px);
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: 1.7;
  }

  .p-reason__text small { font-size: min(calc(20 / 750 * 100vw), 20px); }

  .p-reason__table {
    margin-inline: max(calc(-8 / 750 * 100vw), -8px);
    margin-top: min(calc(59 / 750 * 100vw), 59px);
  }

  .p-reason__table img { width: min(calc(650 / 750 * 100vw), 650px); }

  .p-reason__stats {
    justify-content: normal;
    gap: min(calc(10 / 750 * 100vw), 10px);
    margin-top: min(calc(40 / 750 * 100vw), 40px);
  }

  .p-reason__stats > li { flex: 1; }

  /* SP デザイン v3: ピル 約200x105（750基準）、数字 約38px、語句 約32px */
  .p-reason__stats b {
    min-height: min(calc(105 / 750 * 100vw), 105px);
    padding: min(calc(14 / 750 * 100vw), 14px) min(calc(6 / 750 * 100vw), 6px);
    border-radius: min(calc(14 / 750 * 100vw), 14px);
    font-size: min(calc(38 / 750 * 100vw), 38px);
    box-shadow: min(calc(6 / 750 * 100vw), 6px) min(calc(7 / 750 * 100vw), 7px) min(calc(18 / 750 * 100vw), 18px) rgba(1, 75, 163, .24);
  }

  .p-reason__stats b::after {
    bottom: max(calc(-15 / 750 * 100vw), -15px);
    border-width: min(calc(16 / 750 * 100vw), 16px) min(calc(13 / 750 * 100vw), 13px) 0;
  }

  .p-reason__stats b i { font-size: min(calc(23 / 750 * 100vw), 23px); }

  .p-reason__stats b sup { font-size: min(calc(15 / 750 * 100vw), 15px);
    margin-left:0; 
  }

  .p-reason__stats b.p-reason__statText { font-size: min(calc(32 / 750 * 100vw), 32px); }

  .p-reason__stats b.p-reason__statText small { font-size: min(calc(22 / 750 * 100vw), 22px); }

  .p-reason__stats b.p-reason__statText--sm { font-size: min(calc(28 / 750 * 100vw), 28px); }

  .p-reason__stats b.p-reason__statText--sm small { font-size: min(calc(20 / 750 * 100vw), 20px); }

  .p-reason__stats span {
    margin-top: min(calc(22 / 750 * 100vw), 22px);
    font-size: min(calc(22.5 / 750 * 100vw), 22.5px);
  }

  .p-reason__stats--4col { gap: min(calc(30 / 750 * 100vw), 30px) min(calc(20 / 750 * 100vw), 20px); }

  .p-reason__stats--4col > li { flex: 0 0 calc(50% - min(calc(10 / 750 * 100vw), 10px)); }

  .p-reason__points { display: block; margin-top: min(calc(48 / 750 * 100vw), 48px); }

  .p-reason__points dt {
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: 1.4;
  }

  .p-reason__points dt small { font-size: min(calc(15 / 750 * 100vw), 15px); }

  /* SP は PC 用の縮小を戻す（small も本体と同じ大きさ。DAU の括弧内だけ他の dt と同じ 15） */
  .p-reason__points dt.p-reason__pointTitle--tight,
  .p-reason__points dt.p-reason__pointTitle--dau {
    font-size: min(calc(28 / 750 * 100vw), 28px);
    letter-spacing: normal;
  }
  .p-reason__points dt.p-reason__pointTitle--tight small { font-size: min(calc(28 / 750 * 100vw), 28px); }
  .p-reason__points dt.p-reason__pointTitle--dau small { font-size: min(calc(15 / 750 * 100vw), 15px); }

  .p-reason__points dd {
    margin-top: min(calc(6 / 750 * 100vw), 6px);
    font-size: min(calc(24 / 750 * 100vw), 24px);
    line-height: 1.67;
  }

  .p-reason__points dd + dt { margin-top: min(calc(28 / 750 * 100vw), 28px); }

  .p-reason__fig { margin-top: min(calc(40 / 750 * 100vw), 40px); }

  .p-reason__scope { margin-top: min(calc(40 / 750 * 100vw), 40px); }

  .p-reason__scopeTitle {
    padding-bottom: min(calc(12 / 750 * 100vw), 12px);
    font-size: min(calc(29 / 750 * 100vw), 29px);
    letter-spacing: normal;
  }

  .p-reason__scopeList { display: block; margin-top: min(calc(20 / 750 * 100vw), 20px); }

  .p-reason__scopeList dt,
  .p-reason__scopeList dd {
    padding: 0;
    border-bottom: 0;
    font-size: min(calc(24 / 750 * 100vw), 24px);
    line-height: 1.5;
  }

  .p-reason__scopeList dt {
    display: block;
    padding-right: 0;
    letter-spacing: normal;
    text-align: start;
    text-align-last: auto;
    white-space: normal;
  }

  /* SP は縦積みなので縦罫は出さない */
  .p-reason__scopeList dt::after { display: none; }

  .p-reason__scopeList dd {
    display: block;
    padding-bottom: min(calc(11 / 750 * 100vw), 11px);
    padding-left: 0;
    border-bottom: 1px solid #d6e2f2;
  }

  .p-reason__scopeList dd + dt { margin-top: min(calc(11 / 750 * 100vw), 11px); }

  /* ----- 実績まとめ -----
     SP は1列を横の点線で区切る（PC は3列＋縦の点線） */
  .p-proof { padding-inline: min(calc(30 / 750 * 100vw), 30px); }

  .p-proof__inner {
    padding: min(calc(54 / 750 * 100vw), 54px) min(calc(30 / 750 * 100vw), 30px) min(calc(80 / 750 * 100vw), 80px);
    border-radius: min(calc(30 / 750 * 100vw), 30px);
  }

  .p-proof__ruby {
    padding: min(calc(10 / 750 * 100vw), 10px) min(calc(28 / 750 * 100vw), 28px);
    font-size: min(calc(24 / 750 * 100vw), 24px);
    margin-bottom:3%;
  }

  .p-proof__title {
    margin-top: min(calc(8 / 750 * 100vw), 8px);
    font-size: min(calc(28 / 750 * 100vw), 28px);
  }

  .p-proof__list {
    display: block;
    gap: normal;
    margin-top: min(calc(50 / 750 * 100vw), 50px);
    padding-top: min(calc(3 / 750 * 100vw), 3px);
    background: repeating-linear-gradient(to right, var(--c-white) 0 min(calc(4 / 750 * 100vw), 4px), transparent min(calc(4 / 750 * 100vw), 4px) min(calc(8 / 750 * 100vw), 8px)) top left / 100% min(calc(3 / 750 * 100vw), 3px) repeat-x;
  }

  .p-proof__item {
    flex-direction: row;
    align-items: center;
    gap: min(calc(20 / 750 * 100vw), 20px);
    /* デザイン行高 129px = 数字の行box 105px ＋ 上下 12px */
    padding: min(calc(12 / 750 * 100vw), 12px) 0;
    background: repeating-linear-gradient(to right, var(--c-white) 0 min(calc(4 / 750 * 100vw), 4px), transparent min(calc(4 / 750 * 100vw), 4px) min(calc(8 / 750 * 100vw), 8px)) bottom left / 100% min(calc(3 / 750 * 100vw), 3px) repeat-x;
    text-align: start;
  }

  .p-proof__item + .p-proof__item { margin-top: 0; }

  .p-proof__item .p-proof__badge {
    top: max(calc(-30 / 750 * 100vw), -30px);
    right: 0;
    left: auto;
    width: min(calc(70 / 750 * 100vw), 70px);
    height: min(calc(70 / 750 * 100vw), 70px);
    font-size: min(calc(18 / 750 * 100vw), 18px);
  }

  .p-proof__date { font-size: min(calc(23 / 750 * 100vw), 23px); }

  /* SP は見出しが2行になるので行送りを戻す。meta を伸ばして数字を右端に寄せる */
  .p-proof__kpi { font-size: min(calc(26 / 750 * 100vw), 26px); line-height: 1.3; white-space: normal; }

  .p-proof__meta { flex: 1 1 auto; }

  .p-proof__figures {
    justify-content: flex-end;
    gap: min(calc(8 / 750 * 100vw), 8px);
    margin-top: 0;
    line-height: 1;
  }

  .p-proof__before { font-size: min(calc(63 / 750 * 100vw), 63px); }

  .p-proof__before small { font-size: min(calc(42 / 750 * 100vw), 42px); }

  .p-proof__arrow { font-size: min(calc(48 / 750 * 100vw), 48px); }

  .p-proof__after { font-size: min(calc(100 / 750 * 100vw), 100px); }

  .p-proof__after small { font-size: min(calc(60 / 750 * 100vw), 60px); }

  .p-proof__badge {
    width: min(calc(78 / 750 * 100vw), 78px);
    height: min(calc(78 / 750 * 100vw), 78px);
    font-size: min(calc(22 / 750 * 100vw), 22px);
  }

  /* ----- 施策実施までの流れ -----
     SP は番号とカードを横並び（PC は 222px×5 のグリッドで縦積み） */
  .p-flow__inner { padding: min(calc(135 / 750 * 100vw), 135px) min(calc(30 / 750 * 100vw), 30px) min(calc(110 / 750 * 100vw), 110px); }

  .p-flow__lead {
    margin-top: min(calc(24 / 750 * 100vw), 24px);
    font-size: min(calc(28 / 750 * 100vw), 28px);
  }

  .p-flow__list { display: block; align-items: normal; justify-content: normal; gap: normal; margin-top: min(calc(50 / 750 * 100vw), 50px); }

  .p-flow__item {
    flex-direction: row;
    align-items: center;
    gap: min(calc(40 / 750 * 100vw), 40px);
  }

  .p-flow__item + .p-flow__item { margin-top: min(calc(30 / 750 * 100vw), 30px); }

  .p-flow__num {
    width: min(calc(100 / 750 * 100vw), 100px);
    margin: 0 max(calc(-20 / 750 * 100vw), -20px) 0 0;
    font-size: min(calc(130 / 750 * 100vw), 130px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }

  .p-flow__card {
    display: block;
    flex-direction: row;
    border-radius: min(calc(24 / 750 * 100vw), 24px);
    box-shadow: min(calc(6 / 750 * 100vw), 6px) min(calc(8 / 750 * 100vw), 8px) min(calc(20 / 750 * 100vw), 20px) rgba(1, 75, 163, .48);
  }

  .p-flow__title {
    padding: min(calc(16 / 750 * 100vw), 16px) min(calc(24 / 750 * 100vw), 24px);
    font-size: min(calc(34 / 750 * 100vw), 34px);
    text-align: start;
  }

  .p-flow__text {
    flex: 0 1 auto;
    margin: 0 min(calc(6 / 750 * 100vw), 6px) min(calc(6 / 750 * 100vw), 6px);
    padding: min(calc(20 / 750 * 100vw), 20px);
    border-radius: min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(26 / 750 * 100vw), 26px);
    line-height: 1.6;
    letter-spacing: normal;
  }

  .p-lowerBg { background-image: none; }

  /* ----- 料金プラン -----
     260928 版実測: 流れのカード下端 → 「PLAN」の字面 154px、カード 690 幅・間 約67、
     見出し帯 120px。カードまわりの字は PC の約1.25倍（本文 26px）、リードは PC と同じ大きさ。
     見出しは3行で通常部 47px・強調部 70px */
  .p-plan__inner { padding: min(calc(40 / 750 * 100vw), 40px) min(calc(30 / 750 * 100vw), 30px) min(calc(100 / 750 * 100vw), 100px); }

  .p-plan .c-secTitle {
    margin-top: min(calc(56 / 750 * 100vw), 56px);
    font-size: min(calc(47 / 750 * 100vw), 47px);
  }

  .p-plan .c-secTitle b { font-size: min(calc(70 / 750 * 100vw), 70px); }

  .p-plan .c-secTitle small { font-size: min(calc(47 / 750 * 100vw), 47px); }

  /* リードの最長行はデザインで 696px あり、内容幅 690 に収まらないので左右に 3px ずつはみ出させる */
  .p-plan__lead {
    margin-inline: max(calc(-3 / 750 * 100vw), -3px);
    margin-top: min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: min(calc(48 / 750 * 100vw), 48px);
  }

  .p-plan__list { display: block; margin-top: min(calc(50 / 750 * 100vw), 50px); }

  .p-plan__item { width: auto; }

  .p-plan__item + .p-plan__item { margin-top: min(calc(57 / 750 * 100vw), 57px); }

  .p-plan__en {
    margin-bottom: max(calc(-11 / 750 * 100vw), -11px);
    font-size: min(calc(70 / 750 * 100vw), 70px);
  }

  .p-plan__card {
    border-width: min(calc(4 / 750 * 100vw), 4px);
    border-radius: min(calc(30 / 750 * 100vw), 30px);
    box-shadow: min(calc(6 / 750 * 100vw), 6px) min(calc(7 / 750 * 100vw), 7px) min(calc(18 / 750 * 100vw), 18px) rgba(1, 75, 163, .24);
  }

  .p-plan__name {
    padding: min(calc(44 / 750 * 100vw), 44px) min(calc(45 / 750 * 100vw), 45px) min(calc(36 / 750 * 100vw), 36px);
    font-size: min(calc(38 / 750 * 100vw), 38px);
  }

  .p-plan__body { padding: min(calc(40 / 750 * 100vw), 40px) min(calc(46 / 750 * 100vw), 46px) min(calc(48 / 750 * 100vw), 48px); }

  .p-plan__catch { font-size: min(calc(28 / 750 * 100vw), 28px); }

  .p-plan__price {
    margin-top: min(calc(17 / 750 * 100vw), 17px);
    padding-bottom: min(calc(36 / 750 * 100vw), 36px);
    border-bottom-width: min(calc(2 / 750 * 100vw), 2px);
    font-size: min(calc(54 / 750 * 100vw), 54px);
  }

  .p-plan__price b { font-size: min(calc(92 / 750 * 100vw), 92px); }

  .p-plan__price .p-plan__comma { font-size: min(calc(54 / 750 * 100vw), 54px); }

  .p-plan__cond {
    margin-top: min(calc(38 / 750 * 100vw), 38px);
    font-size: min(calc(26 / 750 * 100vw), 26px);
  }

  .p-plan__points {
    margin-top: min(calc(30 / 750 * 100vw), 30px);
    padding-bottom: min(calc(32 / 750 * 100vw), 32px);
    border-bottom-width: min(calc(2 / 750 * 100vw), 2px);
  }

  .p-plan__points li {
    padding-right: min(calc(14 / 750 * 100vw), 14px);
    padding-left: min(calc(46 / 750 * 100vw), 46px);
    font-size: min(calc(26 / 750 * 100vw), 26px);
  }

  .p-plan__points li + li { margin-top: min(calc(44 / 750 * 100vw), 44px); }

  .p-plan__points li::before {
    top: min(calc(2 / 750 * 100vw), 2px);
    left: min(calc(4 / 750 * 100vw), 4px);
    width: min(calc(39 / 750 * 100vw), 39px);
    height: min(calc(39 / 750 * 100vw), 39px);
  }

  .p-plan__points small { font-size: min(calc(16 / 750 * 100vw), 16px); }

  .p-plan__rank {
    margin-top: min(calc(26 / 750 * 100vw), 26px);
    font-size: min(calc(26 / 750 * 100vw), 26px);
  }

  /* ----- FAQ ----- */
  .p-faq__inner { padding: min(calc(144 / 750 * 100vw), 144px) min(calc(30 / 750 * 100vw), 30px) min(calc(160 / 750 * 100vw), 160px); }

  .p-faq__list { margin-top: min(calc(80 / 780 * 100vw), 50px); }

  .p-faq__item + .p-faq__item { margin-top: min(calc(30 / 750 * 100vw), 30px); }

  .p-faq__item { border-radius: min(calc(30 / 750 * 100vw), 30px); }

  .p-faq__q {
    gap: min(calc(18 / 750 * 100vw), 18px);
    padding: min(calc(43 / 750 * 100vw), 43px) min(calc(30 / 750 * 100vw), 30px) min(calc(43 / 750 * 100vw), 43px) min(calc(33 / 750 * 100vw), 33px);
  }

  .p-faq__mark {
    width: min(calc(57 / 750 * 100vw), 57px);
    height: min(calc(57 / 750 * 100vw), 57px);
    font-size: min(calc(32.5 / 750 * 100vw), 32.5px);
  }

  .p-faq__qText {
    font-size: min(calc(32 / 750 * 100vw), 32px);
    letter-spacing: -0.01em;
  }
  .p-faq__qText.narrow {
    letter-spacing: -0.05em;
    font-size:min(calc(31 / 750 * 100vw), 31px);
  }

  .p-faq__toggle {
    width: min(calc(54 / 750 * 100vw), 54px);
    height: min(calc(54 / 750 * 100vw), 54px);
  }

  .p-faq__toggle::before, .p-faq__toggle::after {
    width: min(calc(26 / 750 * 100vw), 26px);
    height: min(calc(4 / 750 * 100vw), 4px);
  }

  .p-faq__a {
    gap: min(calc(18 / 750 * 100vw), 18px);
    padding: min(calc(44 / 750 * 100vw), 44px) min(calc(30 / 750 * 100vw), 30px) min(calc(57 / 750 * 100vw), 57px) min(calc(33 / 750 * 100vw), 33px);
  }

  .p-faq__aText {
    font-size: min(calc(30 / 750 * 100vw), 30px);
    line-height: 1.6;
  }

  .p-faq__aText p + p { margin-top: 0; }

  .p-faq__aText .c-note { margin-top: min(calc(16 / 750 * 100vw), 16px); }

  /* ----- 韓国人集客ラボ -----
     SP は Swiper のスライダー（PC は 3×2 の固定グリッドで Swiper を初期化しない） */
  .p-lab__inner { padding: min(calc(135 / 750 * 100vw), 135px) min(calc(60 / 750 * 100vw), 60px) min(calc(100 / 750 * 100vw), 100px); }

  .p-lab__lead {
    width: auto;
    margin: min(calc(40 / 750 * 100vw), 40px) 0 0;
    font-size: min(calc(28 / 750 * 100vw), 28px);
    line-height: 1.7;
    text-align: start;
  }

  .p-lab__card {
    padding: min(calc(50 / 750 * 100vw), 50px);
    border-radius: min(calc(30 / 750 * 100vw), 30px);
    box-shadow: none;
  }

  .p-lab__cat {
    margin-top: min(calc(40 / 750 * 100vw), 40px);
    font-size: min(calc(30.5 / 750 * 100vw), 30.5px);
  }

  .p-lab__title {
    margin-top: min(calc(14 / 750 * 100vw), 14px);
    font-size: min(calc(28.5 / 750 * 100vw), 28.5px);
  }

  /* ----- お問い合わせ ----- */
  .p-contact__inner { padding: min(calc(147 / 750 * 100vw), 147px) min(calc(30 / 750 * 100vw), 30px) min(calc(80 / 750 * 100vw), 80px); }

  .p-contact__title {
    margin-top: min(calc(60 / 750 * 100vw), 60px);
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  .p-contact__hs { max-width: none; margin-inline: 0; margin-top: min(calc(50 / 750 * 100vw), 50px); }

  .p-contact__hs + .p-contact__note { margin-top: min(calc(24 / 750 * 100vw), 24px); }

  .p-contact__form { display: block; gap: normal; max-width: none; margin-inline: 0; margin-top: min(calc(50 / 750 * 100vw), 50px); }

  .p-contact__row + .p-contact__row { margin-top: min(calc(14 / 750 * 100vw), 14px); }

  .p-contact__label {
    margin-bottom: min(calc(8 / 750 * 100vw), 8px);
    font-size: min(calc(24 / 750 * 100vw), 24px);
  }

  .p-contact__input, .p-contact__textarea {
    padding: min(calc(18 / 750 * 100vw), 18px) min(calc(20 / 750 * 100vw), 20px);
    border-radius: min(calc(12 / 750 * 100vw), 12px);
    font-size: min(calc(24 / 750 * 100vw), 24px);
    line-height: 1.5;
  }

  .p-contact__note {
    margin-top: min(calc(20 / 750 * 100vw), 20px);
    font-size: min(calc(18 / 750 * 100vw), 18px);
  }

  /* ----- PC用のレイアウト指定を SP で戻す -----
     base に PC 用の display / grid / flex / 幅を置いているため、
     SP ではそれぞれ元の値へ明示的に戻す */
  /* 左右の余白はパネルの padding で持つ（カードはパネルの内容幅いっぱい） */
  .p-scene__list { display: block; margin-top: 0; }
  .p-reason__cols { display: block; margin-top: 0; }
  .p-lab .swiper-wrapper { display: flex; grid-template-columns: none; justify-content: normal; gap: normal; transform: translate3d(0, 0, 0); }
  .p-lab .swiper { overflow: hidden; }
  .p-lab .swiper-slide { width: 100%; }
  .p-lab .c-slider__prev, .p-lab .c-slider__next { display: block; }
  .p-case .swiper-wrapper { display: flex; grid-template-columns: none; gap: normal; transform: translate3d(0, 0, 0); }
  .p-case .swiper { overflow: hidden; }
  .p-case .swiper-slide { width: 100%; }
  .p-case .c-slider__prev, .p-case .c-slider__next { display: block; }
  /* バーの下端の角丸の内側にパネルの白をのぞかせる（地色が薄青になったので SP でも必要） */
  .p-scene__head::after { height: min(calc(40 / 750 * 100vw), 40px); }
  .p-reason__main {
    flex: 0 1 auto;
    min-width: auto;
  }
  .p-contact__textarea { min-height: auto; }
  .p-fv {
    background-image: url("../../common/img/deco_fv_sp.png");
    background-position: center max(calc(-122 / 750 * 100vw), -122px);
    background-size: 100% auto;
  }
  .p-why__inner > .c-note {
    width: auto;
    margin: min(calc(8 / 750 * 100vw), 8px) min(calc(30 / 750 * 100vw), 30px) 0;
  }
  .p-why__card .c-note { margin-top: min(calc(24 / 750 * 100vw), 24px); }
  /* パネルの白。左右 30・下 72（デザイン実測: 注釈の字面下からパネル下端まで 81px）。
     下端だけ角丸（上端はバーの下に潜り込む） */
  /* SP のバーの角丸は 24 */
  .p-scene__panel {
    margin-top: max(calc(-24 / 750 * 100vw), -24px);
    padding: 0 min(calc(30 / 750 * 100vw), 30px) min(calc(72 / 750 * 100vw), 72px);
    border-radius: 0 0 min(calc(30 / 750 * 100vw), 30px) min(calc(30 / 750 * 100vw), 30px);
  }
  .p-scene__todoTitle, .p-scene__todoText { font-size: min(calc(24.5 / 750 * 100vw), 24.5px); }
  .p-scene__panel > .c-note { margin-top: min(calc(24 / 750 * 100vw), 24px); }
  .p-reason__cols .p-reason__fig {
    flex: 0 1 auto;
    margin-top: min(calc(40 / 750 * 100vw), 40px);
  }
  .p-proof__item {
    padding: 3% 0 4%;
    align-items:flex-end;    
  }  
  .p-reason__item .c-note,
  .p-reason__item:nth-child(4) .c-note { margin-top: min(calc(24 / 750 * 100vw), 24px); }
  .p-proof__item:first-child {
    background: repeating-linear-gradient(to right, var(--c-white) 0 min(calc(4 / 750 * 100vw), 4px), transparent min(calc(4 / 750 * 100vw), 4px) min(calc(8 / 750 * 100vw), 8px)) bottom left / 100% min(calc(3 / 750 * 100vw), 3px) repeat-x;
  }
  .p-proof .c-btn { margin-top: min(calc(48 / 750 * 100vw), 48px); }
  .p-proof .c-note {
    margin-top: min(calc(24 / 750 * 100vw), 24px);
    text-align: start;
  }

  .p-proof .c-note > span {
    padding-left: min(calc(23 / 750 * 100vw), 23px);
    text-indent: max(calc(-23 / 750 * 100vw), -23px);
  }
  .p-lab .c-slider { margin-top: min(calc(60 / 750 * 100vw), 60px); }
  .p-contact__row:nth-last-child(3) { grid-column: auto; }
  .p-contact__form .c-btn, .p-contact__note { grid-column: auto; }
  .p-contact__form .c-btn { margin-top: min(calc(48 / 750 * 100vw), 48px); }
  /* 地色が白だった頃は白帯が不要で position: static に戻していたが、
     薄青になったのでバーの角丸の内側に白をのぞかせる必要がある。
     ::after の基準にするため base の position: relative / z-index: 1 をそのまま使う */
  /* 図版は理由3の写真だけになった。260928 版では縦長 354x435 で中央 */
  .p-reason__cols .p-reason__fig img { width: min(calc(354 / 750 * 100vw), 354px); }
  .p-fv__body { width: auto; }
}


/*-- 追加スタイル --*/