@charset "UTF-8";
/*!
 * startup-loan.css
 * 創業融資支援LP（/services/startup-loan/）の追加スタイル（2026-08-01）
 *
 * style.css は SCSS からのコンパイル成果物のため、再ビルドで上書きされないよう
 * 本ファイルに分離している。読み込みは page-startup-loan.php を参照（このページ専用）。
 *
 * 内容
 *   1. ファーストビュー（m-subsidy-hero の寸法違いを吸収するモディファイア）
 *   2. PLAN（料金）セクション ※このページ独自コンポーネント
 *   3. COMPANY（事務所概要）セクション
 */

/* =========================================
   1. ファーストビュー
   レイアウトは助成金LPの FV（.m-subsidy-hero）と共通。
   Figma 上でズレる寸法だけをここで上書きする。

   ※ 人物イラストに mix-blend-mode は掛けない。
      freee導入支援LPで、合成の確定タイミングが画像のデコード完了に依存するため
      背面の白い線画が最前面に出る事故が起きた（[[piocal-freee-support-page]] 参照）。
      最初から z-index で重なり順を固定する。
   ========================================= */
.m-subsidy-hero--startup-loan .m-subsidy-hero__headline-sm--black {
  color: var(--color__black);
}

.m-subsidy-hero--startup-loan .m-subsidy-hero__card {
  inset-block-start: min(275 * 1rem / var(--font-size), 275 / 1440 * 100vw);
  inset-inline-start: min(825 * 1rem / var(--font-size), 825 / 1440 * 100vw);
  inline-size: min(370 * 1rem / var(--font-size), 370 / 1440 * 100vw);
}

.m-subsidy-hero--startup-loan .m-subsidy-hero__btn {
  margin-block-start: calc(32 * 1rem / var(--font-size));
}

/* MV（白い線画 + 人物イラスト） */
.m-subsidy-hero--startup-loan .m-subsidy-hero__mv {
  isolation: isolate;
  block-size: min(317 * 1rem / var(--font-size), 317 / 1440 * 100vw);
}

.m-subsidy-hero--startup-loan .m-subsidy-hero__mv-bg {
  z-index: 0;
  block-size: 76.0252365931%;
}

.m-subsidy-hero--startup-loan .m-subsidy-hero__mv-illu {
  z-index: 1;
  inset-block-start: 7.8864353312%;
  inset-inline-start: 22.2222222222%;
  inline-size: 55.5555555556%;
  block-size: 92.1135646688%;
  mix-blend-mode: normal;
}

/* ポイント3枚の間隔（Figma は 16px） */
.m-subsidy-hero--startup-loan .m-subsidy-hero__points {
  gap: calc(16 * 1rem / var(--font-size));
}

/* WORRIES のイラストは Figma では背景・電球込みの 1 枚（274 x 222）。
   会社設立LPのように 3 枚重ねにしないため、枠いっぱいに敷く。 */
.m-startup-loan-worries .m-incorporation-worries__illust-main {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* =========================================
   2. PLAN（料金）
   「着手金」「成功報酬」を黄色い円で見せるこのページ独自のレイアウト。
   他LPの料金セクション（表組み）とは別コンポーネント。
   ========================================= */
.m-startup-loan-plan {
  padding-block: calc(120 * 1rem / var(--font-size));
}

.m-startup-loan-plan__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.m-startup-loan-plan__body {
  position: relative;
  display: flex;
  justify-content: center;
  inline-size: 100%;
  margin-block-start: calc(40 * 1rem / var(--font-size));
}

.m-startup-loan-plan__illust {
  position: absolute;
  inset-block-start: calc(193 * 1rem / var(--font-size));
  inset-inline-start: calc(50% - 449 * 1rem / var(--font-size));
  inline-size: calc(155 * 1rem / var(--font-size));
  block-size: auto;
}

.m-startup-loan-plan__list {
  display: flex;
  justify-content: center;
  gap: calc(48 * 1rem / var(--font-size));
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

.m-startup-loan-plan__item {
  position: relative;
  inline-size: calc(280 * 1rem / var(--font-size));
  padding-block-start: calc(3 * 1rem / var(--font-size));
}

.m-startup-loan-plan__label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  z-index: 2;
  transform: translateX(-50%);
  inline-size: max-content;
  padding: calc(4 * 1rem / var(--font-size)) calc(32 * 1rem / var(--font-size));
  border-radius: calc(999 * 1rem / var(--font-size));
  background-color: var(--color__black);
  font-family: var(--font-family__zen);
  font-size: calc(24 * 1rem / var(--font-size));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color__white);
}

/* 吹き出しの三角（Figma: 16 x 8） */
.m-startup-loan-plan__label::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  transform: translateX(-50%);
  border-inline: calc(8 * 1rem / var(--font-size)) solid transparent;
  border-block-start: calc(8 * 1rem / var(--font-size)) solid var(--color__black);
}

.m-startup-loan-plan__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(20 * 1rem / var(--font-size));
  inline-size: calc(280 * 1rem / var(--font-size));
  block-size: calc(280 * 1rem / var(--font-size));
  padding-block-start: calc(40 * 1rem / var(--font-size));
  padding-inline: calc(24 * 1rem / var(--font-size));
  border-radius: 50%;
  background-color: var(--color__yellow);
}

.m-startup-loan-plan__price {
  --_dot-color: var(--color__white);
  --_dot-pitch: calc(10 * 1rem / var(--font-size));
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-family__zen);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color__black);
}

.m-startup-loan-plan__num {
  font-size: calc(34 * 1rem / var(--font-size));
}

.m-startup-loan-plan__unit {
  font-size: calc(20 * 1rem / var(--font-size));
}

.m-startup-loan-plan__note {
  font-family: var(--font-family__zen);
  font-size: calc(12 * 1rem / var(--font-size));
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color__black);
}

/* =========================================
   3. COMPANY（事務所概要）
   表と地図そのものは .m-top-company__*（style.css）を共用しているため、
   ここではセクションの余白・背景だけを定義する。
   前後の MESSAGE / FAQ と同じ gray100 背景で連続させる。
   ========================================= */
.m-startup-loan-access {
  padding-block: calc(60 * 1rem / var(--font-size)) calc(20 * 1rem / var(--font-size));
  background-color: var(--color__gray100);
}

.m-startup-loan-access__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 767px) {
  .m-subsidy-hero--startup-loan .m-subsidy-hero__card {
    inset: auto;
    inline-size: 100%;
  }

  .m-subsidy-hero--startup-loan .m-subsidy-hero__mv {
    block-size: calc(229 * 1rem / var(--font-size));
  }

  /* SP はカードの高さが内容に対して足りず、CTAボタンがカードの下にはみ出す。
     そのままだとポイント3枚がボタンに重なるので、ボタン分の余白をここで確保する。
     （Figma: SP_創業融資 / node 4707-25776 の間隔に合わせている） */
  .m-subsidy-hero--startup-loan .m-subsidy-hero__btn {
    margin-block-start: calc(24 * 1rem / var(--font-size));
  }

  .m-subsidy-hero--startup-loan .m-subsidy-hero__points {
    gap: calc(8 * 1rem / var(--font-size));
    margin-block-start: calc(56 * 1rem / var(--font-size));
  }

  .m-startup-loan-plan {
    padding-block: calc(60 * 1rem / var(--font-size));
  }

  .m-startup-loan-plan__body {
    margin-block-start: calc(24 * 1rem / var(--font-size));
  }

  .m-startup-loan-plan__list {
    flex-direction: column;
    align-items: center;
    gap: calc(32 * 1rem / var(--font-size));
  }

  .m-startup-loan-access {
    padding-block: calc(40 * 1rem / var(--font-size)) 0;
  }
}