@charset "utf-8";

/* =====================================================================
   もらえる給付金サポート LP
   共通スタイル

   設計方針：モバイルファースト＋PC分岐
   - 指定のないスタイル = スマホ表示（SPデザイン準拠）
   - @media (min-width: 1000px) 以降 = PCデザイン（Figmaの1440px版）
   - 1000px未満はSPレイアウトを最大640pxで中央寄せ（タブレット想定）
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. リセット
   ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* SPメニューからのアンカー遷移で見出しが隠れないように */
[id] { scroll-margin-top: 16px; }

body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; height: auto; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* ---------------------------------------------------------------------
   2. デザイントークン（Figma変数「もらえる/」をそのまま写しています）
   ------------------------------------------------------------------ */
:root {
  /* 色 */
  --c-green-dark:   #00852f;   /* もらえる/green-dark   … FV・CTA背景 */
  --c-green-middle: #3cbe91;   /* もらえる/green-middle … バッジ枠線・下線 */
  --c-logo-green:   #50b146;   /* もらえる/logo-green   … 吹き出し文字 */
  --c-yellow:       #ffef0d;   /* もらえる/yellow       … 「300万円」 */
  --c-black:        #4b4b4b;   /* もらえる/black        … 本文・フッター背景 */
  --c-gray-middle:  #cecece;   /* もらえる/gray-middle  … 見出しの英字・罫線 */
  --c-gray-dark:    #73849f;   /* もらえる/gray-dark    … 棒グラフの枠線 */
  --c-gray-bg:      #f8f8f8;   /* もらえる/gray-bg      … 流れのステップ背景 */
  --c-green-light-bg: #ecfbf3; /* もらえる/green-light-bg … 比較カード・お悩み解決以降の背景 */
  --c-blue-middle:  #167bcb;   /* もらえる/blue-middle  … 「解決します！」バナー */
  --c-blue-light:   #ecfafb;   /* もらえる/blue-light   … メリットの図パネル背景 */
  --c-white:        #ffffff;   /* もらえる/white */

  /* ボタン（もらえる/btn-yellow） */
  --g-btn:      linear-gradient(180deg, #ffc300 0%, #ff7700 100%);
  --shadow-btn: 0 8px 12px rgba(40, 103, 127, .2);

  /* 書体 */
  --font-base:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-round: "M PLUS Rounded 1c", "Noto Sans JP", "Hiragino Maru Gothic ProN", sans-serif;
  --font-en:    "Poppins", var(--font-base);

  /* レイアウト */
  --gutter:      16px;    /* 左右の余白 */
  --content-max: 640px;   /* コンテンツ最大幅（PCでは上書き） */
  --radius-box:  12px;
}


/* ---------------------------------------------------------------------
   3. ベース
   ------------------------------------------------------------------ */
body {
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-black);
  background: var(--c-white);
  font-feature-settings: "palt";
}

.l-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* SPだけで効かせる改行（PCでは1行に戻す） */
.u-sp-br { display: inline; }

/* フレックス内で強制的に折り返すための空要素（<br>は効かないため） */
.u-flex-break { flex-basis: 100%; height: 0; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid #ffc300;
  outline-offset: 2px;
}


/* ---------------------------------------------------------------------
   4. ヘッダー
   SP … 白いバー＋角丸、カラーロゴ、緑のハンバーガー
   PC … FVに重なる透過ヘッダー、白ロゴ、LINEボタンあり
   ------------------------------------------------------------------ */
.l-header {
  position: relative;
  z-index: 100;
  background: var(--c-green-dark);
}

.l-header__bar {
  background: var(--c-white);
  border-radius: 0 0 20px 20px;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding-block: 8px;
}

/* SP用カラーロゴ（元PNGに余白があるため表示領域を切り抜き） */
.l-header__logo { display: block; }

.l-header__logo-sp {
  position: relative;
  display: block;
  width: clamp(140px, 40vw, 190px);
  aspect-ratio: 172 / 56;
  overflow: hidden;
  flex-shrink: 0;
}

.l-header__logo-sp img {
  position: absolute;
  left: 0;
  top: -63.74%;
  width: 100%;
  height: 229.96%;
  max-width: none;
}

/* PC用白ロゴ */
.l-header__logo-pc { display: none; }

/* PC用のLINEボタン */
.l-header__cta {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 12px 24px 13px;
  border-radius: 100px;
  background: var(--g-btn);
  box-shadow: var(--shadow-btn);
  color: var(--c-white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
}

.l-header__cta img { width: 15px; height: 14px; }

/* ハンバーガー */
.l-header__menu {
  display: grid;
  place-content: center;
  gap: 8px;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  flex-shrink: 0;
}

.l-header__menu span {
  display: block;
  width: 34px;
  height: 4px;
  background: var(--c-green-dark);
  border-radius: 2px;
}


/* ---------------------------------------------------------------------
   4b. SPメニュー（Figmaの「SP menu」に準拠）
   ヘッダーのハンバーガーで開く全画面オーバーレイ
   ------------------------------------------------------------------ */
.l-spmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--c-blue-middle);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.l-spmenu[hidden] { display: none; }

/* 上部の白いバー（通常ヘッダーと同じ見た目） */
.l-spmenu__bar {
  background: var(--c-white);
  border-radius: 0 0 20px 20px;
  flex-shrink: 0;
}

.l-spmenu__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding-block: 8px;
}

.l-spmenu__logo {
  position: relative;
  display: block;
  width: clamp(140px, 40vw, 190px);
  aspect-ratio: 172 / 56;
  overflow: hidden;
  flex-shrink: 0;
}

.l-spmenu__logo img {
  position: absolute;
  left: 0;
  top: -63.74%;
  width: 100%;
  height: 229.96%;
  max-width: none;
}

/* ×ボタン */
.l-spmenu__close {
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  flex-shrink: 0;
}

.l-spmenu__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 4px;
  margin-left: -16px;
  background: var(--c-green-dark);
  border-radius: 2px;
}

.l-spmenu__close span:first-child { rotate:  45deg; }
.l-spmenu__close span:last-child  { rotate: -45deg; }

/* ナビ本体 */
.l-spmenu__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  padding: 32px var(--gutter) 40px;
}

.l-spmenu__nav ul {
  display: grid;
  gap: clamp(20px, 6vw, 36px);
  text-align: center;
}

.l-spmenu__nav a {
  display: block;
  padding: 4px;
  color: var(--c-white);
  font-weight: 700;
  font-size: clamp(15px, 4.4vw, 20px);
  line-height: 1.4;
  letter-spacing: .05em;
}

/* 共通ボタン（.c-btn-line）を流用し、幅と余白だけ上書き
   ※ .c-btn-line より前に書いているため、親を含めた指定にして確実に勝たせる */
.l-spmenu .l-spmenu__cta {
  width: min(340px, 100%);
  margin: clamp(28px, 8vw, 56px) auto 0;
  padding: 22px 24px;
  flex-shrink: 0;
}

.l-spmenu .l-spmenu__cta .c-btn-line__main { margin-top: 0; }


/* ---------------------------------------------------------------------
   5b. セクション見出し（What is / Trouble / Merit / Flow …で共通）
   英字ラベル＋日本語タイトルの2段組み
   ------------------------------------------------------------------ */
.c-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.c-section-head__en {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1;
  color: var(--c-gray-middle);
}

.c-section-head__ja {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.3;
  color: var(--c-green-dark);
}

/* タイトル末尾の「とは」など、小さく黒い添え字 */
.c-section-head__ja .is-sub {
  font-size: .8em;
  color: var(--c-black);
}


/* ---------------------------------------------------------------------
   5. LINEボタン（ページ内で共通利用）
   ------------------------------------------------------------------ */
.c-btn-line {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px 40px 14px;
  border-radius: 50px;
  background: var(--g-btn);
  box-shadow: var(--shadow-btn);
  color: var(--c-white);
  text-align: center;
}

.c-btn-line__lead {
  display: block;
  font-weight: 700;
  font-size: clamp(11px, 3.2vw, 16px);
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* SPで折り返さないよう、字送りを詰めて nowrap を明示 */
.c-btn-line__main {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  font-weight: 700;
  font-size: clamp(16px, 5vw, 32px);
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}

.c-btn-line__main img {
  width: .9em;
  height: auto;
  flex-shrink: 0;
}

/* 右端の矢印。画像に頼らずCSSで描いています（白い丸＋オレンジの山括弧） */
.c-btn-line__arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: clamp(22px, 5.5vw, 24px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-white);
}

.c-btn-line__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 45%;
  width: 26%;
  height: 26%;
  border-top: 2px solid #ff7700;
  border-right: 2px solid #ff7700;
  translate: -50% -50%;
  rotate: 45deg;
}


/* ---------------------------------------------------------------------
   6. ファーストビュー
   ------------------------------------------------------------------ */
.p-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 20px 28px;
  background: var(--c-green-dark);
}

/* 背景テクスチャ（Figmaのmix-blend-mode: color-burnを再現） */
.p-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/bg-hero.png") center / cover no-repeat;
  mix-blend-mode: color-burn;
  pointer-events: none;
}

.p-hero__inner { position: relative; }

/* SPでは人物写真の位置基準になる */
.p-hero__main { position: relative; }

/* テキスト類は必ず人物写真より前面に */
.p-hero__main > *:not(.p-hero__photo) {
  position: relative;
  z-index: 1;
}

/* --- 吹き出しバッジ「失業保険の給付金受給」 ---
   ※ grid / flex の直下に生のテキストを置くと、ブラウザが文字のかたまりごとに
     別々の項目として扱い改行されてしまう。必ず span でひとまとめにすること。 */
.p-hero__badge {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 559 / 84;
  grid-template-rows: 71fr 13fr;     /* 本体と尻尾の比。%パディングは幅基準になるため使わない */
  background: url("img/badge-hero.svg") center / 100% 100% no-repeat;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(21px, 7.2vw, 48px);
  line-height: 1.3;
  color: var(--c-white);
  white-space: nowrap;
}

.p-hero__badge > span { grid-row: 1; }

.p-hero__badge .is-small { font-size: .83em; }   /* 「の」だけ小さい */

.p-hero__badge u {
  text-decoration: underline;
  text-decoration-color: var(--c-green-middle);
  text-decoration-thickness: .2em;
  text-underline-offset: -.08em;
  text-decoration-skip-ink: none;
}

/* --- 「最大300万円を」 --- */
.p-hero__amount {
  display: flex;
  align-items: flex-end;
  margin-top: 10px;
  font-family: var(--font-round);
  font-weight: 700;
  line-height: 1;
  color: var(--c-yellow);
}

.p-hero__amount-max {
  display: flex;
  flex-direction: column;
  font-size: clamp(22px, 6.4vw, 40px);
  line-height: 1;
  letter-spacing: -.07em;
}

.p-hero__amount-num {
  font-size: clamp(58px, 17vw, 108px);
  letter-spacing: -.03em;
}

.p-hero__amount-unit {
  font-size: clamp(44px, 12.8vw, 80px);
  letter-spacing: -.07em;
}

.p-hero__amount-wo {
  font-size: clamp(22px, 6.4vw, 40px);
  color: var(--c-white);
}

/* --- 「プロがしっかりサポート」 --- */
.p-hero__title {
  margin-top: 2px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(34px, 10.4vw, 54px);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--c-white);
}

.p-hero__title .is-small { font-size: .75em; }   /* 「が」だけ小さい */

/* --- リード文（PCデザインのみに存在） --- */
.p-hero__lead { display: none; }

/* --- 3つの実績バッジ --- */
.p-hero__features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
}

.p-hero__features li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border: 2px solid var(--c-green-middle);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-black);
  font-weight: 700;
  font-size: clamp(14px, 4.2vw, 20px);
  line-height: 1.2;
  white-space: nowrap;
}

.p-hero__features img {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

.p-hero__features em {
  font-style: normal;
  color: var(--c-green-dark);
}

/* --- 注釈 --- */
.p-hero__note {
  margin-top: 12px;
  font-size: clamp(11px, 3.2vw, 14px);
  line-height: 1.5;
  color: var(--c-white);
}

/* --- 人物写真（テキストの背面、右端まで裁ち落とし） --- */
.p-hero__photo {
  position: absolute;
  z-index: 0;
  right: calc(var(--gutter) * -1);
  bottom: 0;
  width: 52%;
  aspect-ratio: 388 / 624;
  overflow: hidden;
  pointer-events: none;
}

.p-hero__photo img {
  position: absolute;
  left: -141.81%;
  top: -.07%;
  width: 295.35%;
  height: 100.14%;
  max-width: none;
}

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


/* ---------------------------------------------------------------------
   6b. What is（もらえる給付金サポートとは／受給期間の比較）
   ------------------------------------------------------------------ */
.p-whatis { padding-block: 48px; }

.p-whatis__lead {
  margin-top: 24px;
  font-weight: 500;
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
}

/* 「受給期間は最長10~20ヶ月間になるケースもあります。」 */
.p-whatis__catch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 0;
  margin-top: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}

.p-whatis__catch-md { font-size: clamp(13px, 3.5vw, 24px); }

.p-whatis__catch-sm {
  font-weight: 500;
  font-size: clamp(12px, 3.4vw, 16px);
}

.p-whatis__strong {
  display: flex;
  align-items: center;
  color: var(--c-green-dark);
  line-height: 1;
}

.p-whatis__strong .u-jp { font-size: clamp(20px, 5.9vw, 40px); letter-spacing: .05em; }

.p-whatis__strong .u-num {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(30px, 9.4vw, 64px);
}

/* --- 比較カード ---
   PC … Figmaの書き出し画像1枚
   SP … ラベルとロゴを帯の上に出し、帯を横幅いっぱいに使う専用レイアウト */
.p-compare {
  position: relative;
  margin-top: 32px;
  padding: 40px 8px 16px;
  border-radius: var(--radius-box);
  background: var(--c-green-light-bg);
}

.p-compare__img { display: none; }

.p-compare__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(384px, 80%);
  height: auto;
}

.p-compare__chart {
  display: grid;
  gap: 12px;
  padding: 12px 8px;
  border-radius: var(--radius-box);
  background: var(--c-white);
}

.p-compare__row { display: grid; gap: 6px; }

.p-compare__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.p-compare__rowlabel {
  display: grid;
  place-items: center;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--c-black);
  color: var(--c-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .05em;
}

.p-compare__logo {
  position: relative;
  display: block;
  width: 116px;
  aspect-ratio: 172 / 56;
  overflow: hidden;
  flex-shrink: 0;
}

.p-compare__logo img {
  position: absolute;
  left: 0;
  top: -63.74%;
  width: 100%;
  height: 229.96%;
  max-width: none;
}

.p-compare__badge { width: 104px; height: auto; flex-shrink: 0; }

.p-compare__bars { display: flex; }

/* 帯の幅はFigmaの比率（申請84.7 / 制限期間147 / 受給期間207 / 緑680 を765で割った値） */
.p-compare__bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 0;
  height: 54px;
}

.p-compare__bar > img { position: absolute; inset: 0; width: 100%; height: 100%; }

.p-compare__bar--apply { width: 11.07%; padding-right: 5px; }
.p-compare__bar--limit { width: 19.23%; }
.p-compare__bar--term  { width: 27.06%; }
.p-compare__bar--green { width: 88.89%; }

/* 「制限期間」は図形の左辺にも点線がある。
   Figmaでは申請の矢印と重なって見えないため、左端を隠して同じ見え方にする */
.p-compare__bar--limit { overflow: hidden; }

.p-compare__bar--limit > img { left: -7%; right: auto; width: 107%; }

.p-compare__cap,
.p-compare__num { position: relative; }

.p-compare__cap {
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .05em;
  white-space: nowrap;
}

.p-compare__num {
  display: flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
}

.p-compare__num .u-num { font-family: var(--font-en); font-weight: 500; font-size: 17px; }
.p-compare__num .u-jp  { font-weight: 500; font-size: 11px; letter-spacing: -.1em; }

.is-white { color: var(--c-white); }

/* 帯どうしをつなぐ緑の破線 */
.p-compare__link {
  display: block;
  width: 100%;
  height: 20px;
  margin-block: -3px;
}

.p-compare__link line {
  stroke: #45ac52;
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.p-compare__note {
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: right;
}

/* 上辺に重なる緑のリボン見出し（文字込みの書き出し画像） */
.p-compare__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(384px, 80%);
  height: auto;
}

/* 「さらに」バッジ：カードの下辺にまたがる（文字込みの書き出し画像） */
/* 「さらに」の吹き出し
   ※書き出し画像だと背景に白が入るため、枠と尻尾をCSSで作っています。
     カードの下辺に半分またがる位置に置きます。 */
.p-compare__more {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 50%;
  display: grid;
  place-items: center;
  width: clamp(130px, 12vw, 175px);
  height: clamp(38px, 3.2vw, 46px);
  border: 2px solid var(--c-logo-green);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-logo-green);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1;
  letter-spacing: .05em;
}

/* 尻尾。緑の三角の上に白い三角を重ねて、縁だけ見せる */
.p-compare__more::before,
.p-compare__more::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  translate: -50% 0;
}

.p-compare__more::before {
  top: calc(100% + 2px);
  border-width: 12px 10px 0;
  border-top-color: var(--c-logo-green);
}

.p-compare__more::after {
  top: 100%;
  border-width: 10px 8px 0;
  border-top-color: var(--c-white);
}

/* --- 「通常申請金額と比較して 約3.3倍受け取れる」 --- */
.p-whatis__result {
  position: relative;
  margin-top: 58px;   /* 吹き出しと尻尾が下にはみ出すぶんを確保 */
}

.p-whatis__compare {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 24px);
  line-height: 1;
  letter-spacing: .05em;
}

.p-whatis__compare img { width: clamp(15px, 4.2vw, 24px); height: auto; }

.p-whatis__compare img:last-child { scale: -1 1; }

/* 折り返したときに行が重ならないよう row-gap を確保 */
.p-whatis__ratio {
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 12px 6px;
  margin-top: 24px;
  font-weight: 700;
  line-height: 1;
}

.p-whatis__ratio-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 黄色いマーカー */
.p-whatis__ratio-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 -2px;
  height: .28em;
  background: var(--c-yellow);
}

.p-whatis__ratio-main .u-jp { font-size: clamp(32px, 8.9vw, 64px); letter-spacing: .05em; }

.p-whatis__ratio-main .u-num {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(48px, 13.3vw, 96px);
}

.p-whatis__ratio-md { font-size: clamp(20px, 5vw, 36px); letter-spacing: .05em; }

.p-whatis__ratio-sm { font-size: clamp(14px, 3.4vw, 24px); letter-spacing: .05em; }

.p-whatis__illust {
  position: relative;
  display: block;
  width: clamp(96px, 26vw, 167px);
  aspect-ratio: 167 / 180;
  margin: 16px auto 0;
  overflow: hidden;
}

.p-whatis__illust img {
  position: absolute;
  left: -326.49%;
  top: -4.79%;
  width: 426.49%;
  height: 231.64%;
  max-width: none;
}


/* ---------------------------------------------------------------------
   6c. Trouble（こんなお悩みありませんか？）
   ------------------------------------------------------------------ */
.p-trouble { padding-block: 24px 0; }

/* 吹き出しと人物イラスト
   SP … グリッドで縦積み ／ PC … Figmaどおり重ねて配置 */
.p-trouble__stage {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  margin-top: 24px;
}

.p-trouble__illust {
  order: 4;
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 220;
  overflow: hidden;
}

.p-trouble__illust img {
  position: absolute;
  left: -3.78%;
  top: -35.6%;
  width: 107.56%;
  height: 173.02%;
  max-width: none;
}

/* --- 吹き出し（文字込みの書き出し画像） --- */
.p-trouble__balloon { display: block; width: 100%; height: auto; }

.p-trouble__balloon--center { order: 1; grid-column: 1 / -1; width: min(280px, 100%); margin-inline: auto; }
.p-trouble__balloon--left   { order: 2; }
.p-trouble__balloon--right  { order: 3; }


/* ---------------------------------------------------------------------
   6d. 薄緑の背景ゾーン（お悩み解決バナー〜メリット）
   上辺がゆるくカーブした背景をFigmaの書き出しSVGで敷いています
   ------------------------------------------------------------------ */
.l-mint {
  position: relative;
  z-index: 0;
  margin-top: 48px;
  padding-bottom: 60px;
  background: url("img/bg-mint-curve.svg") center top / 134.72% auto no-repeat;
}

/* SVGの高さが足りない場合の塗り足し（カーブより下はベタ塗り） */
.l-mint::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16vw 0 0;
  background: var(--c-green-light-bg);
}


/* ---------------------------------------------------------------------
   6e. お悩み解決バナー
   ------------------------------------------------------------------ */
.p-solution { padding-top: clamp(40px, 8vw, 116px); }

.p-solution__arrow {
  display: block;
  width: clamp(96px, 12vw, 175px);
  margin-inline: auto;
}

.p-solution__band {
  max-width: 860px;
  margin: 8px auto 0;
  padding: 24px 16px;
  border-radius: 8px;
  background: var(--c-blue-middle);
  text-align: center;
}

.p-solution__label {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  color: var(--c-white);
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 24px);
  line-height: 1;
  letter-spacing: .05em;
}

.p-solution__label img { width: clamp(15px, 4.2vw, 24px); height: auto; }

.p-solution__label img:last-child { scale: -1 1; }

.p-solution__title {
  margin-top: 14px;
  color: var(--c-yellow);
  font-weight: 700;
  font-size: clamp(19px, 5.4vw, 32px);
  line-height: 1.3;
}


/* ---------------------------------------------------------------------
   6f. Merit（3つのメリット）
   ------------------------------------------------------------------ */
.p-merit { padding-top: 48px; }

.p-merit__list {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

/* タブは絶対配置なので、本文側にその高さぶんの余白を持たせる
   （タブ = top24px + 高さ約42px → 66px。そこから約26px空ける） */
.p-merit__card {
  position: relative;
  padding: 24px 16px 32px;
  border: 2px solid var(--c-green-dark);
  border-radius: var(--radius-box);
  background: var(--c-white);
}

.p-merit__text { padding-top: 68px; }

/* 左端に食い込む「Merit 01」タブ */
.p-merit__tab {
  position: absolute;
  left: -2px;
  top: 24px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 140px;
  padding: 8px 16px;
  border-radius: 0 23px 23px 0;
  background: var(--c-green-dark);
  color: var(--c-white);
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1;
}

.p-merit__tab .is-en { font-size: clamp(17px, 4.6vw, 24px); }
.p-merit__tab .is-no { font-size: clamp(25px, 6.9vw, 36px); }

.p-merit__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 0;
  color: var(--c-green-dark);
  font-weight: 700;
  line-height: 1.2;
}

.p-merit__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.p-merit__title .is-jp  { font-size: clamp(22px, 6.2vw, 32px); letter-spacing: .05em; }
.p-merit__title .is-jp2 { font-size: clamp(27px, 7.7vw, 40px); letter-spacing: -.02em; }

.p-merit__title .is-num {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(36px, 10vw, 52px);
}

.p-merit__title .is-sub {
  color: var(--c-black);
  font-size: clamp(16px, 4.6vw, 24px);
  letter-spacing: .05em;
}

.p-merit__desc {
  margin-top: 20px;
  font-weight: 500;
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.8;
  letter-spacing: .05em;
}

.p-merit__panel {
  margin-top: 24px;
  border-radius: var(--radius-box);
  background: var(--c-blue-light);
}

/* 図はFigmaの書き出し画像1枚。SPではカード幅いっぱいまで広げる */
.p-merit__panel--chart {
  margin-inline: -16px;
  background: none;
}

.p-merit__panel--chart img { width: 100%; height: auto; }

/* --- Merit 03 の4項目（2×2グリッド） --- */
.c-support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  padding: 16px 8px;
}

.c-support__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px 8px;
  text-align: center;
}

.c-support__item:nth-child(-n + 2) { border-bottom: 1px solid var(--c-gray-middle); }
.c-support__item:nth-child(odd)    { border-right: 1px solid var(--c-gray-middle); }

.c-support__item img { width: clamp(52px, 15vw, 80px); height: auto; }

.c-support__item p {
  font-weight: 700;
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.2;
  letter-spacing: .05em;
}


/* ---------------------------------------------------------------------
   6g. Flow（ご利用の流れ）
   ------------------------------------------------------------------ */
.p-flow { padding-block: 48px; }

.p-flow__list {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.p-flow__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 8px;
  background: var(--c-gray-bg);
  overflow: hidden;
}

/* 左端の緑ブロック（SPでは上部に横一杯） */
.p-flow__no {
  display: grid;
  place-items: center;
  flex: 0 0 100%;
  padding: 8px;
  background: var(--c-green-dark);
  color: var(--c-white);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(17px, 4.6vw, 24px);
  line-height: 1;
}

.p-flow__arrow { display: none; }

.p-flow__icon {
  width: clamp(52px, 15vw, 80px);
  height: auto;
  margin: 16px;
  flex-shrink: 0;
}

.p-flow__body { flex: 1 1 0; padding: 16px 16px 16px 0; }

.p-flow__body h3 {
  font-weight: 700;
  font-size: clamp(17px, 4.6vw, 24px);
  line-height: 1.6;
  letter-spacing: .05em;
}

.p-flow__body p {
  margin-top: 2px;
  font-weight: 500;
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.6;
  letter-spacing: .05em;
}


/* ---------------------------------------------------------------------
   6h. こんな方にご利用いただけます
   ------------------------------------------------------------------ */
.p-target { padding-block: 28px 48px; }

.p-target__card {
  position: relative;
  padding: 40px 16px 16px;
  border-radius: var(--radius-box);
  background: var(--c-green-light-bg);
}

/* 上辺に重なる緑の帯 */
.p-target__ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: min(461px, 92%);
  aspect-ratio: 461 / 56;
  background: url("img/ribbon-target.svg") center / 100% 100% no-repeat;
  color: var(--c-white);
  font-weight: 700;
  font-size: clamp(14px, 3.8vw, 24px);
  line-height: 1;
  letter-spacing: .05em;
}

.p-target__inner {
  padding: 24px 16px;
  border-radius: var(--radius-box);
  background: var(--c-white);
}

.p-target__list {
  display: grid;
  gap: 12px;
}

.p-target__list li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-weight: 500;
  font-size: clamp(14px, 4vw, 20px);
  line-height: 1.6;
  letter-spacing: .05em;
}

.p-target__list img {
  width: 1.2em;
  height: 1.2em;
  margin-top: .2em;
  flex-shrink: 0;
}

.p-target__illust {
  position: relative;
  display: block;
  width: clamp(140px, 40vw, 252px);
  aspect-ratio: 252 / 236;
  margin: 8px auto 0;
  overflow: hidden;
}

.p-target__illust img {
  position: absolute;
  left: -144.9%;
  top: -136.78%;
  width: 343.92%;
  height: 259.25%;
  max-width: none;
}


/* ---------------------------------------------------------------------
   6i. Case（受給事例）
   ------------------------------------------------------------------ */
.p-case {
  position: relative;
  padding-block: 48px;
  background: var(--c-logo-green);
}

/* 背景の格子柄（Figmaでは約34px間隔の細線が並んだレイヤー） */
.p-case::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .18) 0 1px, transparent 1px 35.04px),
    repeating-linear-gradient(to right,  rgba(255, 255, 255, .18) 0 1px, transparent 1px 33.69px);
}

.p-case > * { position: relative; }

.p-case .c-section-head__en { color: rgba(255, 255, 255, .7); }

.p-case .c-section-head__ja { color: var(--c-white); }

.p-case__list {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.p-case__card {
  display: grid;
  justify-items: center;
  padding: 16px;
  border-radius: var(--radius-box);
  background: var(--c-white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
  text-align: center;
}

.p-case__badge {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 7px 32px 5px;
  border-radius: 100px;
  background: var(--c-green-dark);
  color: var(--c-white);
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1;
}

.p-case__badge .is-en { font-size: clamp(16px, 4.4vw, 20px); }
.p-case__badge .is-no { font-size: clamp(19px, 5.2vw, 24px); }

.p-case__income {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 20px;
  color: var(--c-green-dark);
  font-weight: 700;
  line-height: 1;
}

.p-case__income .is-jp  { font-size: clamp(16px, 4.4vw, 20px); }
.p-case__income .is-num { font-family: var(--font-en); font-weight: 500; font-size: clamp(26px, 7vw, 32px); }

.p-case__person {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1;
}

.p-case__line {
  width: 100%;
  height: 0;
  margin: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--c-gray-middle);
}

.p-case__normal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--c-black);
  font-weight: 700;
  line-height: 1;
}

.p-case__tag {
  padding: 8px 13px;
  border-radius: 4px;
  background: var(--c-black);
  color: var(--c-white);
  font-size: clamp(13px, 3.5vw, 16px);
  letter-spacing: .05em;
  white-space: nowrap;
}

.p-case__normal .is-jp  { font-size: clamp(18px, 5vw, 24px); }
.p-case__normal .is-num { font-family: var(--font-en); font-weight: 500; font-size: clamp(34px, 9.5vw, 48px); letter-spacing: -.05em; }

.p-case__arrow { width: 56px; height: auto; margin-top: 8px; }

.p-case__result {
  width: 100%;
  margin-top: 4px;
  padding: 16px;
  border-radius: 6px;
  background: var(--c-blue-light);
  display: grid;
  justify-items: center;
}

.p-case__result-badge {
  width: min(216px, 100%);
  max-width: 100%;
  height: auto;
}

.p-case__total {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 12px;
  color: var(--c-green-dark);
  font-weight: 700;
  line-height: 1;
}

.p-case__total .is-jp  { font-size: clamp(18px, 5vw, 24px); }
.p-case__total .is-num { font-family: var(--font-en); font-weight: 500; font-size: clamp(44px, 12vw, 64px); letter-spacing: -.05em; }


/* ---------------------------------------------------------------------
   6j. Voice（お客様の声）
   カードは左右交互に画面端まで抜ける（PC）
   ------------------------------------------------------------------ */
.p-voice { padding-block: 48px; }

.p-voice__list {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.p-voice__item {
  display: grid;
  gap: 16px;
  padding: 24px 16px;
  border-radius: 8px;
  background: var(--c-blue-light);
}

.p-voice__quote { width: clamp(40px, 11vw, 70px); height: auto; }

.p-voice__text {
  margin-top: -8px;
  font-weight: 700;
  font-size: clamp(18px, 5.2vw, 32px);
  line-height: 1.5;
  letter-spacing: .05em;
}

.p-voice__data {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  margin-top: 8px;
}

.p-voice__data dt {
  display: grid;
  place-items: center;
  width: clamp(96px, 26vw, 150px);
  padding: 4px;
  border: 2px solid var(--c-green-dark);
  border-radius: 100px;
  background: var(--c-white);
  color: var(--c-green-dark);
  font-weight: 700;
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.4;
  letter-spacing: .05em;
}

.p-voice__data dd {
  margin: 0;
  font-weight: 700;
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.6;
  letter-spacing: .05em;
}

/* 受給金額だけ、緑＋数字を大きくして目立たせる */
.p-voice__data dd.is-amount {
  isolation: isolate;
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--c-green-dark);
  line-height: 1.2;
}

/* 数字の下に黄色のラインを敷いてさらに強調 */
.p-voice__data dd.is-amount .u-num {
  position: relative;
  z-index: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(26px, 7.4vw, 34px);
  letter-spacing: -.02em;
}

.p-voice__data dd.is-amount .u-num::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3px;
  right: -3px;
  bottom: .04em;
  height: .26em;
  background: var(--c-yellow);
}

.p-voice__figure {
  position: relative;
  width: clamp(180px, 52vw, 304px);
  margin: 8px auto 0;
}

.p-voice__photo {
  position: relative;
  display: block;
  aspect-ratio: 304 / 375;
  overflow: hidden;
}

.p-voice__photo img { position: absolute; max-width: none; }

.p-voice__photo--a img { left: -46.7%; top: -17.03%; width: 192.4%; height: 117.03%; }
.p-voice__photo--b img { left: -85%;   top: -47.29%; width: 249.23%; height: 147.31%; }
.p-voice__photo--c img { left: -46.59%; top: -19.46%; width: 184.13%; height: 119.46%; }

/* 円形の名前バッジ */
.p-voice__person {
  position: absolute;
  right: 16.1%;
  bottom: 4%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 32.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-green-dark);
  color: var(--c-white);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.p-voice__person .is-name { font-size: clamp(14px, 3.6vw, 20px); }
.p-voice__person .is-age  { font-size: clamp(10px, 2.5vw, 14px); }


/* ---------------------------------------------------------------------
   6k. FAQ（よくある質問）
   ------------------------------------------------------------------ */
.p-faq { padding-block: 28px 48px; }

.p-faq__list {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.p-faq__item {
  padding: 20px 16px;
  border-radius: 8px;
  background: var(--c-gray-bg);
}

.p-faq__q,
.p-faq__a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

/* Q・Aの丸印
   ※Figmaの書き出しSVGでは文字がテキストレイヤーのため落ちてしまうので、
     円と文字をコードで作っています */
.p-faq__mark {
  display: grid;
  place-items: center;
  width: clamp(34px, 9vw, 47px);
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(15px, 4vw, 21px);
  line-height: 1;
}

.p-faq__mark--q {
  background: var(--c-green-dark);
  color: var(--c-white);
}

.p-faq__mark--a {
  border: 2px solid var(--c-green-dark);
  background: var(--c-white);
  color: var(--c-green-dark);
}

/* 質問文（丸印は .p-faq__mark なので除外する） */
.p-faq__q p:not(.p-faq__mark) {
  align-self: center;
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 20px);
  line-height: 1.6;
  letter-spacing: .05em;
}

.p-faq__a {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--c-white);
}

/* 回答文 */
.p-faq__a p:not(.p-faq__mark) {
  font-weight: 500;
  font-size: clamp(14px, 3.9vw, 18px);
  line-height: 1.6;
  letter-spacing: .05em;
}


/* ---------------------------------------------------------------------
   6l. Company（運営会社）
   ------------------------------------------------------------------ */
.p-company {
  padding-block: 48px;
  background: var(--c-gray-bg);
}

.p-company__table {
  display: grid;
  margin-top: 32px;
  border-top: 1px solid var(--c-gray-middle);
}

.p-company__table div {
  display: grid;
  gap: 2px 24px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--c-gray-middle);
}

.p-company__table dt {
  color: var(--c-green-dark);
  font-weight: 700;
  font-size: clamp(14px, 3.9vw, 16px);
  line-height: 1.6;
  letter-spacing: .05em;
}

.p-company__table dd {
  margin: 0;
  font-weight: 500;
  font-size: clamp(14px, 3.9vw, 16px);
  line-height: 1.6;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}

.p-company__table a { text-decoration: underline; text-underline-offset: 2px; }


/* ---------------------------------------------------------------------
   7. CTAブロック（ページ内に4回登場）
   ------------------------------------------------------------------ */
.p-cta { padding-block: 32px; }

.p-cta__box {
  position: relative;
  isolation: isolate;
  padding: 24px 16px 28px;
  border-radius: var(--radius-box);
  background: var(--c-green-dark);
  overflow: hidden;
}

.p-cta__box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/bg-cta.png") center / cover no-repeat;
  mix-blend-mode: color-burn;
  pointer-events: none;
}

/* 吹き出し本体47 : 尻尾9 の比で行を分け、文字を本体側の中央に置く
   （%パディングは幅基準になるため使わない） */
.p-cta__balloon {
  display: grid;
  grid-template-rows: 47fr 9fr;
  place-items: center;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 470 / 56;
  margin-inline: auto;
  background: url("img/balloon-cta.svg") center / 100% 100% no-repeat;
  color: var(--c-logo-green);
  font-weight: 700;
  font-size: clamp(11px, 3.5vw, 20px);
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
}

.p-cta__balloon > span { grid-row: 1; }

.p-cta__title {
  margin-top: 16px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(20px, 5.6vw, 36px);
  line-height: 1.3;
  color: var(--c-white);
  text-align: center;
}

.p-cta__photo { margin-top: 20px; }

.p-cta__photo img {
  width: 100%;
  aspect-ratio: 1920 / 1280;
  object-fit: cover;
  border-radius: 8px;
}

.p-cta__merits {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
}

.p-cta__merits li {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-white);
  font-weight: 500;
  font-size: clamp(14px, 4vw, 20px);
  line-height: 1.4;
}

.p-cta__merits img {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

.p-cta .c-btn-line { margin-top: 24px; }

@media (min-width: 480px) {
  .p-cta__merits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
}


/* ---------------------------------------------------------------------
   8. フッター
   ------------------------------------------------------------------ */
.l-footer {
  background: var(--c-black);
  color: var(--c-white);
  padding-block: 32px;
}

.l-footer__inner {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.l-footer__logo img { width: 150px; }

.l-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  font-size: 13px;
  line-height: 1;
}

.l-footer__nav a { padding-block: 4px; }

.l-footer__copyright {
  font-size: 11px;
  line-height: 1.4;
  opacity: .8;
}


/* =====================================================================
   PCデザイン（1000px以上）
   FigmaのPC版（1440px）レイアウトに切り替えます。
   文字サイズは vw 基準なので、1440px幅のときFigmaの実寸になります。
   ===================================================================== */
@media (min-width: 1000px) {

  :root { --content-max: 1180px; --gutter: 40px; }

  body { font-size: 16px; }

  /* --- ヘッダー：FVに重ねる --- */
  .l-header {
    position: absolute;
    inset: 0 0 auto;
    background: transparent;
  }

  .l-header__bar { background: transparent; border-radius: 0; }

  /* Figmaどおり1440px全幅。ロゴは左端、LINEボタンとハンバーガーは右端に寄せる */
  .l-header__inner {
    max-width: none;
    min-height: 88px;
    padding-inline: 24px 12px;
    gap: 12px;
    justify-content: flex-start;
  }

  .l-header__logo-sp { display: none; }

  .l-header__logo-pc { display: block; width: 183px; }

  .l-header__cta { display: inline-flex; margin-left: auto; }

  .l-header__menu { width: 64px; height: 64px; margin-right: 0; }

  .l-header__menu span { width: 40px; background: var(--c-white); }

  /* --- メニュー：PCでも同じ全画面オーバーレイを使う（寸法だけ拡大） --- */
  .l-spmenu__bar { border-radius: 0 0 24px 24px; }

  .l-spmenu__inner { min-height: 88px; padding-inline: 24px 12px; }

  .l-spmenu__logo { width: 183px; }

  .l-spmenu__close { width: 64px; height: 64px; margin-right: 0; }

  .l-spmenu__close span { width: 40px; height: 4px; margin-left: -20px; }

  .l-spmenu__nav { padding: 56px 40px 64px; }

  .l-spmenu__nav ul { gap: 32px; }

  .l-spmenu__nav a { font-size: 24px; }

  .l-spmenu .l-spmenu__cta {
    width: min(400px, 100%);
    margin-top: 56px;
    padding: 24px 32px;
  }

  .l-spmenu .l-spmenu__cta .c-btn-line__main { font-size: 26px; }

  /* SP専用の改行はPCでは無効化 */
  .u-sp-br { display: none; }
  .u-flex-break { display: none; }

  /* FAQのカード間隔はFigmaどおり16px */
  .p-faq__list { gap: 16px; }

  /* --- LINEボタン（Figmaの実寸に戻す） --- */
  .c-btn-line { padding: 21px 56px 23px; }

  .c-btn-line__main { margin-top: 12px; letter-spacing: .05em; }

  .c-btn-line__main img { width: 29px; height: auto; }

  .c-btn-line__arrow { right: 24px; width: 24px; }

  /* --- ファーストビュー --- */
  /* 下の余白を0にして、人物写真の下端とFVの下端を揃える
     （余白があると写真の切れ目が緑の中に浮いて見えるため） */
  .p-hero {
    display: flex;
    align-items: stretch;
    min-height: 700px;
    padding-block: 108px 0;
  }

  /* 内側を縦いっぱいに伸ばし、テキストは中央、写真は下端に固定する */
  .p-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-bottom: 40px;
  }

  /* 人物写真の基準を .p-hero__inner に移し、ボタンの下まで写真を伸ばす */
  .p-hero__main {
    position: static;
    width: 64%;
    text-align: center;
  }

  .p-hero__badge {
    max-width: 559px;
    margin-inline: auto;
    font-size: clamp(30px, 3.33vw, 48px);
  }

  .p-hero__amount {
    justify-content: center;
    margin-top: 16px;
  }

  .p-hero__amount-max { font-size: clamp(30px, 3.33vw, 48px); }

  .p-hero__amount-num { font-size: clamp(80px, 8.9vw, 128px); }

  .p-hero__amount-unit { font-size: clamp(60px, 6.67vw, 96px); }

  .p-hero__amount-wo { font-size: clamp(30px, 3.33vw, 48px); }

  .p-hero__title { font-size: clamp(40px, 4.44vw, 64px); white-space: nowrap; }

  .p-hero__title br { display: none; }        /* PCは1行 */

  .p-hero__lead {
    display: block;
    max-width: 560px;
    margin: 16px auto 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-white);
  }

  .p-hero__features {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }

  .p-hero__features li { padding: 12px; font-size: clamp(15px, 1.4vw, 20px); }

  .p-hero__note { margin-top: 10px; text-align: left; font-size: 12px; }

  /* ボタンは .p-hero__main の外側にあるので、左カラムの中央に来るよう寄せる */
  .p-hero .c-btn-line {
    max-width: 690px;
    margin: 20px 0 0 max(0px, calc(32% - 345px));
    padding: 21px 56px 23px;
  }

  /* 内側の下パディングを打ち消し、FVの下端まで写真を下ろす */
  .p-hero__photo {
    right: 0;
    bottom: -40px;
    width: 33%;
    max-width: 388px;
  }

  /* --- What is --- */
  .p-whatis { padding-block: 100px 0; }

  .p-whatis__lead { margin-top: 48px; }

  .p-whatis__catch { margin-top: 8px; }

  .p-compare { margin-top: 32px; padding: 0; background: none; }

  .p-compare__img { display: block; width: 100%; height: auto; }

  .p-compare__sp { display: none; }

  .p-whatis__result { margin-top: 76px; }

  /* イラストは右端に絶対配置 */
  .p-whatis__illust {
    position: absolute;
    right: 6px;
    top: 56px;
    margin: 0;
  }

  /* --- Trouble / お悩み解決 --- */
  .p-trouble { padding-block: 80px 0; }

  /* PCはFigmaの1080×363どおり重ねて配置 */
  .p-trouble__stage {
    display: block;
    position: relative;
    margin-top: 48px;
    aspect-ratio: 1080 / 363;
  }

  .p-trouble__stage > * { position: absolute; }

  /* 人物を吹き出しより前面に置き、頭に被らないようにする */
  .p-trouble__illust { left: 26.852%; top: 39.394%; width: 46.296%; z-index: 1; }

  .p-trouble__balloon { z-index: 0; }

  /* Figmaの実寸どおりに配置（外枠フレームではなく、透明余白を除いた実サイズ） */
  .p-trouble__balloon--center { left: 36.759%; top:  0;       width: 26.481%; margin-inline: 0; }
  .p-trouble__balloon--left   { left: 14.722%; top:  9.917%;  width: 21.546%; }
  .p-trouble__balloon--right  { left: 64.056%; top: 12.231%;  width: 20.639%; }

  .l-mint { margin-top: 0; padding-bottom: 80px; }

  .p-solution__band { margin-top: -16px; }

  /* --- Merit --- */
  .p-merit { padding-top: 80px; }

  .p-merit__list { gap: 32px; margin-top: 48px; }

  /* 左テキスト440px ／ 右パネル530px、余白40px（Figmaの1080幅どおり） */
  .p-merit__card {
    display: grid;
    grid-template-columns: 44fr 53fr;
    column-gap: 30px;
    padding: 40px;
  }

  .p-merit__tab { top: 38px; padding: 12px 20px; min-width: 175px; }

  .p-merit__text { padding-top: 72px; }

  .p-merit__panel { margin-top: 0; }

  .p-merit__panel--chart { margin-inline: 0; background: none; }

  /* --- Flow：Figmaの960×148の横並びに戻す --- */
  .p-flow { padding-block: 100px; }

  .p-flow__list { margin-top: 48px; }

  .p-flow__item { flex-wrap: nowrap; min-height: 148px; }

  .p-flow__no {
    flex: 0 0 172px;
    align-self: stretch;
    padding: 0;
    font-size: 24px;
  }

  .p-flow__arrow { display: block; width: 25px; height: auto; margin-left: 20px; flex-shrink: 0; }

  .p-flow__icon { width: 80px; margin: 0 0 0 0; }

  .p-flow__body { padding: 0 32px 0 32px; }

  /* --- こんな方に --- */
  .p-target { padding-block: 100px; }

  .p-target__card { padding: 40px; }

  .p-target__inner { padding: 40px; padding-right: 260px; }

  /* イラストはカード右下に絶対配置 */
  .p-target__illust {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
  }

  /* --- 受給事例：3カラム --- */
  .p-case { padding-block: 0 100px; }

  .p-case__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
  }

  .p-case__card { padding: 16px 16px 32px; }

  /* --- Voice：カードが左右交互に画面端まで抜ける --- */
  .p-voice { padding-block: 100px 0; }

  .p-voice__list { gap: 72px; margin-top: 48px; }

  /* Figmaでは写真の外側に131pxの余白がある（カード1080 / 写真は645〜949の位置） */
  .p-voice__item {
    grid-template-columns: minmax(0, 1fr) 304px;
    align-items: center;
    column-gap: 24px;
    width: min(1080px, 100%);
    min-height: 327px;
    margin-left: auto;
    padding: 0 12.1% 0 4%;
    border-radius: 8px 0 0 8px;
  }

  .p-voice__item--left {
    grid-template-columns: 304px minmax(0, 1fr);
    margin-left: 0;
    margin-right: auto;
    padding: 0 4% 0 12.1%;
    border-radius: 0 8px 8px 0;
  }

  .p-voice__item--left .p-voice__body   { order: 2; }
  .p-voice__item--left .p-voice__figure { order: 1; }

  .p-voice__body { padding-block: 35px; }

  .p-voice__quote { width: 70px; }

  .p-voice__data { grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; margin-top: 12px; }

  .p-voice__data dt { width: 150px; padding: 5px; }

  /* 写真はカード上辺からはみ出し、下辺で揃える */
  .p-voice__figure { width: 304px; align-self: end; margin-inline: 0; }

  /* --- FAQ --- */
  .p-faq { padding-block: 100px; }

  .p-faq__list { gap: 24px; margin-top: 48px; }

  .p-faq__item { padding: 24px; }

  .p-faq__q, .p-faq__a { gap: 16px; }

  /* --- Company --- */
  .p-company { padding-block: 80px; }

  .p-company__table { margin-top: 48px; }

  /* Figmaどおり ラベル／内容の2カラム */
  .p-company__table div {
    grid-template-columns: 300px minmax(0, 1fr);
    padding: 20px 36px;
  }

  /* --- CTAブロック：左テキスト／右写真の2カラム ---
     Figmaの1420×484どおり。テキスト764 : 写真445 の比率。
     ※行を明示しないと grid-row: 1 / -1 が効かず写真が1行目だけになるので注意 */
  .p-cta { padding-block: 60px; }

  .p-cta__box {
    display: grid;
    max-width: 1420px;
    grid-template-columns: minmax(0, 694fr) minmax(0, 606fr);
    grid-template-rows: repeat(4, auto);
    align-items: start;
    column-gap: 0;
    padding: 40px 40px 40px 80px;
  }

  .p-cta__balloon { grid-area: 1 / 1; margin-inline: 0; }

  .p-cta__title { grid-area: 2 / 1; margin-top: 24px; font-size: 36px; text-align: left; }

  /* Figmaではカード1420pxに対して100〜682pxの位置。
     見出しと同じ幅に収め、左に少しだけ寄せる */
  .p-cta__merits {
    grid-area: 3 / 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    width: 84%;
    margin-top: 24px;
    margin-left: 2.9%;
    padding: 14px 24px;
  }

  .p-cta__merits li { font-size: 18px; }

  .p-cta .c-btn-line { grid-area: 4 / 1; margin-top: 28px; max-width: 500px; }

  /* 写真は右カラムで全行にまたがり、上下中央 */
  .p-cta__photo {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    margin-top: 0;
  }

  .p-cta__photo img { aspect-ratio: 606 / 404; }

  /* --- フッター --- */
  .l-footer { padding-block: 50px; }

  .l-footer__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 12px 40px;
    text-align: left;
  }

  .l-footer__logo { grid-row: 1 / 3; }

  .l-footer__logo img { width: 183px; }

  .l-footer__nav { justify-content: flex-end; width: 100%; font-size: 14px; }

  .l-footer__copyright { justify-self: end; font-size: 14px; }
}


/* =====================================================================
   9. モーション
   - 使うのは transform / opacity のみ（描画負荷が低く、カクつきにくい）
   - スクロール検知は IntersectionObserver。一度出たら監視を解除
   - JSが動かない環境では .js-motion が付かず、全て通常表示になる
   ===================================================================== */

/* --- スクロールで下からふわっと出す --- */
.js-motion :is(
  .c-section-head,
  .p-whatis__lead, .p-whatis__catch, .p-compare, .p-whatis__result,
  .p-trouble__stage, .p-solution__band,
  .p-merit__card, .p-flow__item, .p-target__card,
  .p-case__card, .p-voice__item, .p-faq__item,
  .p-company__table, .p-cta__box
) {
  opacity: 0;
  translate: 0 20px;
  transition: opacity .7s ease, translate .7s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, translate;
}

.js-motion .is-inview {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

/* 並んだ要素は少しずつ遅らせて、順に出す */
.js-motion .p-flow__item:nth-child(2),
.js-motion .p-case__card:nth-child(2),
.js-motion .p-faq__item:nth-child(2) { transition-delay: .08s; }

.js-motion .p-flow__item:nth-child(3),
.js-motion .p-case__card:nth-child(3),
.js-motion .p-faq__item:nth-child(3) { transition-delay: .16s; }

.js-motion .p-flow__item:nth-child(4),
.js-motion .p-faq__item:nth-child(4) { transition-delay: .24s; }

.js-motion .p-flow__item:nth-child(5),
.js-motion .p-faq__item:nth-child(5) { transition-delay: .32s; }

/* --- 遷移ボタン：数秒おきに軽く跳ねて視線を集める --- */
@keyframes cta-beat {
  0%, 62%, 100% { transform: scale(1); }
  70%           { transform: scale(1.028); }
  78%           { transform: scale(.994); }
  86%           { transform: scale(1.012); }
}

@keyframes cta-arrow {
  0%, 62%, 100% { translate: 0 -50%; }
  70%           { translate: 4px -50%; }
  86%           { translate: 1px -50%; }
}

/* メニュー内のボタンは動かさない（開いている間ずっと動くのを避ける） */
.c-btn-line:not(.l-spmenu__cta) {
  animation: cta-beat 4s ease-in-out infinite;
  transition: box-shadow .25s ease, filter .25s ease;
}

.c-btn-line:not(.l-spmenu__cta) .c-btn-line__arrow {
  animation: cta-arrow 4s ease-in-out infinite;
}

.c-btn-line:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 20px rgba(40, 103, 127, .3);
}

.c-btn-line:active { filter: brightness(.97); }

/* --- 触れる要素のさりげない反応 --- */
.l-footer__nav a,
.l-spmenu__nav a,
.p-company__table a {
  transition: opacity .2s ease;
}

.l-footer__nav a:hover,
.l-spmenu__nav a:hover,
.p-company__table a:hover { opacity: .7; }

.l-header__menu span,
.l-spmenu__close span { transition: opacity .2s ease; }

.l-header__menu:hover span,
.l-spmenu__close:hover span { opacity: .6; }

/* --- メニューの開閉 --- */
@keyframes menu-in {
  from { opacity: 0; translate: 0 -12px; }
  to   { opacity: 1; translate: 0 0; }
}

.js-motion .l-spmenu:not([hidden]) { animation: menu-in .28s ease-out; }

.js-motion .l-spmenu:not([hidden]) .l-spmenu__nav > * {
  animation: menu-in .4s ease-out backwards;
  animation-delay: .1s;
}

.js-motion .l-spmenu:not([hidden]) .l-spmenu__cta { animation-delay: .18s; }

/* --- 動きを控える設定にしている人には出さない --- */
@media (prefers-reduced-motion: reduce) {
  .js-motion :is(
    .c-section-head,
    .p-whatis__lead, .p-whatis__catch, .p-compare, .p-whatis__result,
    .p-trouble__stage, .p-solution__band,
    .p-merit__card, .p-flow__item, .p-target__card,
    .p-case__card, .p-voice__item, .p-faq__item,
    .p-company__table, .p-cta__box
  ) {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }

  .c-btn-line:not(.l-spmenu__cta),
  .c-btn-line:not(.l-spmenu__cta) .c-btn-line__arrow,
  .js-motion .l-spmenu:not([hidden]),
  .js-motion .l-spmenu:not([hidden]) .l-spmenu__nav > * {
    animation: none;
  }
}