:root {
  /* Colors */
  --color-primary: #002b60;
  --color-primary-dark: #001f47; /* 推測: 要確認 */
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-text-on-dark: #ffffff;
  --color-bg-base: #ffffff;
  --color-bg-hero: #fffcf5;
  --color-bg-section: #f6f6f7; /* 推測: 要確認 */
  --color-bg-section-rgb: 246, 246, 247; /* 推測: グラデーション用に --color-bg-section をRGB化。要確認 */
  --color-border: #e0e0e0;
  --color-gold-start: #ead9a2; /* 推測: 参考画像のgoldグラデーション。要確認 */
  --color-gold-end: #c7a75d; /* 推測: 参考画像のgoldグラデーション。要確認 */

  /* Typography */
  --font-en: "Cormorant", serif;
  --font-mincho: "Hiragino Mincho Pr6N", "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", system-ui, sans-serif;

  --font-size-h1: 40px;
  --font-size-h2: 32px; /* 推測: 要確認 */
  --font-size-h3: 24px; /* 推測: 要確認 */
  --font-size-body: 16px;
  --font-size-caption: 13px; /* 推測: 要確認 */
  --font-size-button: 16px;
  --font-size-hero-title: 67.2px;
  --font-size-hero-accent: 24px;
  --font-size-hero-particle: 40.8px;
  --font-size-hero-copy: 16px;
  --font-size-hero-lead: 24px;
  --font-size-hero-voice-body: 20px;
  --font-size-hero-voice-name: 14px;
  --hero-title-line-gap: 8px;
  --hero-image-scale: 1;
  --hero-image-position-x: 50%;
  --hero-image-position-y: -120px;
  --hero-image-fixed-width: 1920px; /* 推測: FV画像を固定配置して画面幅でトリミングする基準幅。要確認 */
  --hero-image-height: 100%;
  --hero-proof-image-height: 120px; /* 推測: バッジと実績画像の見え方を揃える高さ。要確認 */
  --hero-cta-width: 580px;
  --hero-cta-icon-size: 56px; /* 推測: cardboard.svgの表示サイズ。要確認 */
  --hero-cta-arrow-size: 14px; /* 推測: CTA右端三角アイコンサイズ。要確認 */
  --button-kit-icon-size: var(--hero-cta-icon-size); /* 推測: 無料配送キットCTAの箱アイコン基準サイズ。要確認 */
  --problem-title-emphasis-scale: 1.1;
  --problem-title-underline-width: 1px;
  --problem-heading-quote-size: clamp(40px, 4.2vw, 58px); /* 推測: 参考画像の見出し引用符サイズ。要確認 */
  --problem-bg-image-width: clamp(520px, 58vw, 780px); /* 推測: 右上背景画像の表示幅。要確認 */
  --problem-bg-image-height: clamp(220px, 26vw, 340px); /* 推測: 右上背景画像の表示高さ。要確認 */
  --problem-bg-image-opacity: 1;
  --problem-item-max-width: 400px;
  --problem-item-min-height: 98px; /* 推測: 参考画像のカード高さ。要確認 */
  --problem-item-shadow: 0 8px 20px rgba(49, 49, 50, 0.08); /* 推測: 参考画像の薄いカード影。要確認 */
  --problem-check-color: #b7c8cf; /* 推測: チェックアイコンの薄い青灰色。要確認 */
  --achievement-logo-bg-size: clamp(120px, 16vw, 210px); /* 推測: リピート率文言に重ねるロゴ透かしサイズ。要確認 */
  --achievement-company-width: min(100%, 544px); /* 推測: 参考画像の会社名白帯幅。要確認 */
  --achievement-frame-width: clamp(76px, 8vw, 112px); /* 推測: 月桂冠素材の表示幅。要確認 */
  --achievement-number-underline-height: 12px; /* 推測: 13万件下のゴールド線の太さ。要確認 */
  --achievement-watermark-size: clamp(72px, 13vw, 132px); /* 推測: TAKAMINE透かし文字サイズ。要確認 */
  --reasons-title-divider-color: #d9ebf2;
  --reasons-number-size: 14px;
  --reasons-number-title-gap: 4px;
  --reasons-rule-color: #e6e6e6; /* 推測: 参考画像の理由ブロック罫線色。要確認 */
  --reasons-rule-height: 1px;

  --line-height-base: 1.6;
  --line-height-button: 1;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-base: 0.08em; /* Photoshop VA 80 */

  /* Spacing */
  --section-padding-pc: 100px;
  --section-padding-sp: 64px; /* 推測: 要確認 */
  --container-max: 1100px;
  --container-padding: 24px;

  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 64px;
  --pc-gap-sm: var(--gap-sm);
  --pc-gap-md: var(--gap-md);
  --pc-gap-lg: var(--gap-lg);

  /* Button */
  --button-min-height-pc: 56px;
  --button-min-height-sp: 48px;
  --button-padding-y: 16px;
  --button-padding-x: 32px;
  --button-radius: 4px;
  --button-transition-bg: 200ms ease; /* 推測: 要確認 */
  --button-transition-transform: 100ms ease; /* 推測: 要確認 */
  --button-active-translate-y: 1px;
  --button-focus-outline-width: 2px;
  --button-focus-outline-offset: 2px;

  /* Layer */
  --z-index-header: 10; /* 推測: 要確認 */
  --z-index-menu: 20; /* 推測: 要確認 */
  --z-index-menu-toggle: 30; /* 推測: 要確認 */
  --shadow-hero-voice: 0 0 8px 4px rgba(49, 49, 50, 0.2); /* 推測: Photoshop指定のサイズ8%/スプレッド4%をCSS上は8px/4px相当で反映。要確認 */
  --shadow-voice-card: 0 var(--gap-sm) var(--gap-md) rgba(0, 43, 96, 0.12); /* 推測: 参考画像のカード影。要確認 */
  --voice-card-width: 496px; /* 推測: 参考画像のカード幅。要確認 */
  --voice-card-side-scale: 0.82; /* 推測: 左右のお客様の声カード縮小率。要確認 */
  --voice-card-side-offset: clamp(280px, 31vw, 420px); /* 推測: 3枚表示時の左右カード位置。要確認 */
  --voice-card-min-height: 384px; /* 推測: 参考画像のカード高さ。要確認 */
  --voice-card-height: clamp(560px, 50vw, 680px); /* 推測: お客様の声の文量差による高さ揺れを抑える固定表示高。要確認 */
  --voice-avatar-size: clamp(112px, 9vw, 136px); /* 推測: お客様の声の写真表示を大きく見せるサイズ。要確認 */
  --voice-arrow-size: 48px; /* 推測: カルーセル矢印サイズ。要確認 */
  --why-deco-size: 112px; /* 推測: 見出し背面の装飾サイズ。要確認 */
  --why-content-max: 1100px;
  --why-image-size: clamp(176px, 19vw, 240px); /* 推測: 工程写真の基準サイズ。要確認 */
  --why-media-width: clamp(280px, 34vw, 432px); /* 推測: 右側写真エリア幅。要確認 */
  --why-image-overlap: clamp(56px, 7vw, 96px); /* 推測: 写真の重なり量。要確認 */
  --why-image-width: 50%;
  --why-media-total-width: 100%;
  --why-image-offset-y: 16%;
  --comparison-content-max: 1100px; /* 推測: 他社比較導入セクションのコンテンツ幅。要確認 */
  --comparison-image-size: clamp(184px, 24vw, 320px); /* 推測: 他社比較導入セクションの写真サイズ。要確認 */
  --comparison-image-overlap: clamp(72px, 9vw, 128px); /* 推測: 写真の重なり量。要確認 */
  --comparison-image-width-ratio: 50%; /* 推測: 比較セクションの2枚写真を参考画像の比率で配置する幅比率。要確認 */
  --comparison-image-offset-y: 16%; /* 推測: p-why と同じ右写真の縦方向ずらし量。要確認 */
  --comparison-media-aspect-ratio: 1 / 1.18; /* 推測: 比較セクション写真エリア全体の縦横比。要確認 */
  --area-map-size: clamp(280px, 34vw, 420px); /* 推測: 対応エリアマップ画像サイズ。要確認 */
  --assessment-card-width: 184px; /* 推測: 金属カード幅。要確認 */
  --assessment-fee-width: 520px; /* 推測: 料金表幅。要確認 */
  --speed-content-max: 760px; /* 推測: 急ぎのお客様向けCTAの中央コンテンツ幅。要確認 */
  --speed-side-image-width: clamp(160px, 22vw, 280px); /* 推測: 左右装飾写真の幅。要確認 */
  --page-hero-height: clamp(220px, 27vw, 320px); /* 推測: 下層ページヒーロー高さ。要確認 */
  --page-hero-overlay: rgba(0, 31, 71, 0.58); /* 推測: 下層ページヒーロー写真の濃紺オーバーレイ。要確認 */
  --page-hero-overlay-deep: rgba(0, 31, 71, 0.72); /* 推測: 下層ページヒーロー左側の濃いオーバーレイ。要確認 */
  --first-intro-image-width: 50%;
  --first-intro-image-offset-y: 16%;
  --first-intro-image-size: clamp(220px, 25vw, 320px); /* 推測: 初めての方へ導入セクション画像サイズ。要確認 */
  --first-intro-media-width: clamp(320px, 42vw, 560px); /* 推測: 初めての方へ導入セクション画像エリア幅。要確認 */
  --first-band-height: clamp(180px, 19vw, 240px); /* 推測: 初めての方へ横長メッセージ帯高さ。要確認 */
  --first-case-sheet-width: clamp(320px, 40vw, 560px); /* 推測: 高額査定ケース帳票幅。要確認 */
  --first-strength-card-image-height: 190px;
  --first-strength-heading-en-size: clamp(48px, 5vw, 72px); /* 推測: 強みセクションの英字装飾サイズ。要確認 */
  --first-strength-divider-width: 176px; /* 推測: 強みカード見出し下線幅。要確認 */
  --first-strength-divider-height: 1px; /* 推測: 強みカード見出し下線の太さ。要確認 */
  --first-flow-content-max: 1100px; /* 推測: 買取の流れセクションの中央幅。要確認 */
  --first-flow-number-width: 72px; /* 推測: タイムライン番号エリア幅。要確認 */
  --first-flow-number-size: 40px;
  --first-flow-line-color: #d4ebf6; /* 推測: 参考画像の薄い水色ライン。要確認 */
  --first-flow-transition-line-width: 8px; /* 推測: 参考画像のステップ間ライン幅。要確認 */
  --first-flow-transition-line-start: 28px; /* 推測: 番号下から接続線を開始するための補正値。要確認 */
  --first-flow-transition-line-trim: 56px; /* 推測: 番号上下の余白をそろえるための線長補正。要確認 */
  --first-flow-card-bg: #f7f9fc; /* 推測: 参考画像のステップ背景色。要確認 */
  --first-purchase-content-max: 1100px; /* 推測: 買取例セクションの中央幅。要確認 */
  --first-purchase-card-image-height: clamp(128px, 14vw, 180px); /* 推測: 買取例カード画像高さ。要確認 */
  --first-purchase-heading-en-size: clamp(48px, 5vw, 72px); /* 推測: 買取例セクションの英字装飾サイズ。要確認 */
  --first-faq-content-max: 1100px; /* 推測: FAQセクションの中央幅。要確認 */
  --first-faq-heading-en-size: clamp(48px, 5vw, 72px); /* 推測: FAQセクションの英字装飾サイズ。要確認 */
  --first-faq-question-bg: #f7f9fc; /* 推測: 参考画像の質問背景色。要確認 */
  --first-faq-label-width: 40px; /* 推測: Q/Aラベル幅。要確認 */
  --flow-nationwide-min-height: clamp(560px, 52.986vw, 760px); /* 推測: 参考画像のセクション高さ。要確認 */
  --flow-nationwide-content-max: 680px; /* 推測: 左側本文幅。要確認 */
  --flow-nationwide-title-size: clamp(32px, 3.2vw, 46px); /* 推測: 参考画像の見出しサイズ。要確認 */
  --flow-nationwide-map-width: clamp(720px, 67vw, 1040px); /* 推測: 右側地図グラフィック幅。要確認 */
  --flow-nationwide-accent-bg: #f4f8fd; /* 推測: 右上背景面の薄い青。要確認 */
  --flow-nationwide-dot-color: rgba(78, 130, 214, 0.34); /* 推測: 地図未配置時の点描色。要確認 */
  --flow-usage-content-max: 980px; /* 推測: ご利用の流れセクションの中央幅。要確認 */
  --flow-usage-card-bg: #f7f9fc; /* 推測: STEP 01背景色。要確認 */
  --flow-usage-number-width: 104px; /* 推測: STEP番号エリア幅。要確認 */
  --flow-usage-divider-color: #9ec6dc; /* 推測: STEP横の縦線色。要確認 */
  --flow-usage-check-color: #2f89a3; /* 推測: チェックアイコン色。要確認 */
  --company-message-image-width: clamp(260px, 28vw, 360px); /* 推測: 代表メッセージ写真幅。要確認 */
  --company-message-heading-en-size: clamp(56px, 7vw, 96px); /* 推測: Message英字見出しサイズ。要確認 */
  --company-message-logo-size: clamp(180px, 24vw, 320px); /* 推測: 右下ロゴ透かしサイズ。要確認 */
  --company-message-content-max: 1040px; /* 推測: 代表メッセージセクション幅。要確認 */
  --company-info-content-max: 960px; /* 推測: 会社概要表の中央幅。要確認 */
  --company-info-label-width: 320px; /* 推測: 左側ラベル幅。要確認 */

  /* Header */
  --header-height: 72px;
  --header-container-max: 1400px;
  --header-button-font-size: 14px;
  --header-nav-font-size: 14px;
  --header-nav-font-weight: 500;
  --header-logo-width: 56px;
  --header-logo-height: 67px;
  --header-nav-divider-width: 1px;
}

@media (min-width: 1024px) {
  :root {
    --section-padding-pc: clamp(80px, 7.142857vw, 100px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --button-min-height-pc: clamp(48px, 4vw, 56px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --button-padding-x: clamp(24px, 2.285714vw, 32px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --font-size-hero-title: clamp(57.6px, 4.8vw, 67.2px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --font-size-hero-accent: clamp(20px, 1.714286vw, 24px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --font-size-hero-particle: 40.8px;
    --font-size-hero-copy: clamp(14px, 1.142857vw, 16px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --font-size-hero-lead: clamp(20px, 1.714286vw, 24px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --font-size-hero-voice-body: clamp(18px, 1.428571vw, 20px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --font-size-hero-voice-name: 14px;
    --hero-title-line-gap: clamp(4px, 0.571429vw, 8px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --hero-proof-image-height: clamp(96px, 8.571429vw, 120px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --header-height: clamp(64px, 5.142857vw, 72px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --header-button-font-size: clamp(13px, 1vw, 14px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --header-nav-font-size: clamp(13px, 1vw, 14px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --header-logo-width: clamp(48px, 4vw, 56px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --header-logo-height: clamp(57px, 4.785714vw, 67px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --pc-gap-sm: clamp(12px, 1.142857vw, 16px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --pc-gap-md: clamp(16px, 1.714286vw, 24px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
    --pc-gap-lg: clamp(32px, 2.857143vw, 40px); /* 推測: PC帯のみ1400px基準で制限付きリキッド化。要確認 */
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-base);
  text-rendering: optimizeLegibility;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  background: transparent;
}

a {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin: 0;
}

:where(ul, ol) {
  margin: 0;
  padding: 0;
}

:where(ul, ol)[class] {
  list-style: none;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(th, td) {
  padding: 0;
}

.l-main {
  background: var(--color-bg-base);
}

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

.l-section {
  padding-block: var(--section-padding-sp);
}

@media (min-width: 1024px) {
  .l-section {
    padding-block: var(--section-padding-pc);
  }
}

.c-section-title {
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.c-section-heading {
  display: grid;
  gap: 0;
}

.c-section-heading--center {
  justify-items: center;
  text-align: center;
}

.c-section-heading--left {
  justify-items: start;
  text-align: left;
}

.c-section-heading--right {
  justify-items: end;
  text-align: right;
}

.c-section-heading__en {
  margin: 0;
  color: var(--color-border);
  font-family: var(--font-en);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-button);
}

.c-section-heading__title {
  display: grid;
  justify-items: inherit;
  gap: var(--gap-sm);
  margin: 0;
}

.c-section-heading__title::after {
  display: block;
  width: calc(var(--gap-xl) + var(--gap-sm));
  height: var(--reasons-rule-height);
  background: var(--reasons-title-divider-color);
  content: "";
}

.c-section-title--sm {
  font-size: var(--font-size-h3);
}

.c-page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: var(--page-hero-height);
  margin-top: var(--header-height);
  overflow: hidden;
  background: var(--color-primary);
}

.c-page-hero__image,
.c-page-hero__overlay {
  position: absolute;
  inset: 0;
}

.c-page-hero__image {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.c-page-hero__overlay {
  z-index: 1;
  background: var(--page-hero-overlay);
}

.c-page-hero::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("../images/hero.png") center / cover no-repeat;
  content: "";
  opacity: 0.5; /* 推測: 「透明度0.5％」をCSS opacity 0.5として反映。要確認 */
  pointer-events: none;
}

.c-page-hero__overlay::before {
  position: absolute;
  inset: 0;
  background: var(--page-hero-overlay-deep);
  clip-path: polygon(0 0, 58% 0, 46% 100%, 0% 100%);
  content: "";
}

.c-page-hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}

.c-page-hero__title {
  margin: 0;
  color: var(--color-text-on-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.c-page-hero__title-sp {
  display: none;
}

.c-breadcrumb {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-base);
}

.c-breadcrumb__inner {
  padding-block: var(--gap-sm);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-base);
}

.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  color: var(--color-primary);
  content: ">";
}

.c-breadcrumb__link {
  color: var(--color-primary);
  text-decoration: none;
}

.c-breadcrumb__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.c-breadcrumb__current {
  color: var(--color-text-muted);
}

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-height: var(--button-min-height-sp);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-sans);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--button-transition-bg),
    box-shadow var(--button-transition-bg),
    color var(--button-transition-bg),
    transform var(--button-transition-transform);
  cursor: pointer;
}

.c-btn::after {
  display: inline-block;
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: calc(var(--hero-cta-arrow-size) * 0.72) solid transparent;
  border-bottom: calc(var(--hero-cta-arrow-size) * 0.72) solid transparent;
  border-left: var(--hero-cta-arrow-size) solid currentColor;
  content: "";
}

.c-btn:hover {
  background: var(--color-bg-base);
  box-shadow: inset 0 0 0 var(--button-focus-outline-width) var(--color-primary);
  color: var(--color-primary);
}

.c-btn--outline {
  outline: var(--button-focus-outline-width) solid var(--color-primary);
  outline-offset: calc(var(--button-focus-outline-width) * -1);
  background: var(--color-bg-base);
  color: var(--color-primary);
}

.c-btn--outline:hover {
  background: var(--color-primary);
  box-shadow: none;
  color: var(--color-text-on-dark);
}

.c-btn:active {
  transform: translateY(var(--button-active-translate-y));
}

.c-btn:focus-visible {
  outline: var(--button-focus-outline-width) solid var(--color-primary);
  outline-offset: var(--button-focus-outline-offset);
}

.c-btn__text {
  display: block;
}

.c-btn__text--sp {
  display: none;
}

@media (min-width: 1024px) {
  .c-btn {
    min-height: var(--button-min-height-pc);
  }
}

.u-text-center {
  text-align: center;
}

.u-mt-lg {
  margin-top: var(--gap-lg);
}

.u-show-480 {
  display: none;
}

.u-show-sp {
  display: none;
}

body.is-global-menu-open {
  overflow: hidden;
}

.l-site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-index-header);
  background: var(--color-bg-base);
  box-shadow: 0 2px 14px rgba(0, 43, 96, 0.08);
  color: var(--color-primary);
  transition:
    background-color var(--button-transition-bg),
    box-shadow var(--button-transition-bg);
}

.l-site-header--transparent {
  background: transparent;
  box-shadow: none;
}

.l-site-header.is-scrolled {
  background: var(--color-bg-base);
  box-shadow: 0 2px 14px rgba(0, 43, 96, 0.08);
}

.l-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  max-width: var(--header-container-max);
  min-height: var(--header-height);
  padding-right: 0;
  padding-block: 0;
}

.l-site-header__nav {
  display: flex;
  align-items: center;
}

.p-site-branding,
.p-site-branding__link {
  display: inline-flex;
  align-items: center;
  width: var(--header-logo-width);
  min-height: var(--header-logo-height);
}

.p-site-branding__link {
  text-decoration: none;
}

.p-site-branding__logo {
  display: block;
  width: var(--header-logo-width);
  height: var(--header-logo-height);
}

.p-header-actions {
  display: none;
}

.p-nav-toggle {
  --nav-toggle-line-gap: 5px;
  --nav-toggle-line-height: 1px;
  --nav-toggle-line-shift: calc(var(--nav-toggle-line-gap) + var(--nav-toggle-line-height));
  --nav-toggle-line-width: 24px;
  position: relative;
  z-index: var(--z-index-menu-toggle);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nav-toggle-line-gap);
  width: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--color-primary);
  cursor: pointer;
}

.p-nav-toggle__line {
  display: block;
  width: var(--nav-toggle-line-width);
  height: var(--nav-toggle-line-height);
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    opacity var(--button-transition-bg),
    transform var(--button-transition-bg);
}

body.is-global-menu-open .p-nav-toggle__line:nth-child(1) {
  transform: translateY(var(--nav-toggle-line-shift)) rotate(35deg);
}

body.is-global-menu-open .p-nav-toggle__line:nth-child(2) {
  opacity: 0;
}

body.is-global-menu-open .p-nav-toggle__line:nth-child(3) {
  transform: translateY(calc(var(--nav-toggle-line-shift) * -1)) rotate(-35deg);
}

.p-global-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-menu);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);
  padding: var(--gap-xl) var(--container-padding);
  background: var(--color-bg-base);
  color: var(--color-primary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(var(--gap-xs) * -1));
  transition:
    opacity var(--button-transition-bg),
    visibility var(--button-transition-bg),
    transform var(--button-transition-transform);
}

.p-global-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.p-global-nav__list {
  display: grid;
  gap: var(--gap-md);
  width: 100%;
  text-align: center;
}

.p-global-nav__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-decoration: none;
}

.p-global-nav__list .current-menu-item > a {
  color: var(--color-primary);
}

.p-global-nav__actions {
  display: grid;
  gap: var(--gap-sm);
  width: min(100%, 360px);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--color-border);
}

.p-global-nav__button {
  width: 100%;
  height: 72px;
  min-height: 72px;
  padding: 0 var(--gap-md);
  font-size: var(--header-nav-font-size);
  letter-spacing: var(--letter-spacing-base);
}

.p-global-nav__button-text {
  display: block;
  line-height: 1.35;
  text-align: center;
}

.p-global-nav__button--contact::before {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--gap-sm);
  height: var(--gap-sm);
  background: currentColor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%3E%3Crect%20width='20'%20height='16'%20x='2'%20y='4'%20rx='2'/%3E%3Cpath%20d='m22%207-10%206L2%207'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%3E%3Crect%20width='20'%20height='16'%20x='2'%20y='4'%20rx='2'/%3E%3Cpath%20d='m22%207-10%206L2%207'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.l-site-footer {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
}

.l-site-footer__inner {
  padding-block: var(--gap-xl) var(--gap-lg);
}

.p-site-info {
  display: grid;
  gap: var(--gap-lg);
}

.p-site-info__brand {
  display: grid;
  align-content: start;
}

.p-site-info__brand-main {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.p-site-info__logo-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}

.p-site-info__logo {
  display: block;
  width: 56px;
  height: auto;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.18));
}

.p-site-info__brand-text {
  display: grid;
  gap: var(--gap-xs);
}

.p-site-info__name,
.p-site-info__service,
.p-site-info__contact-title,
.p-site-info__contact-text,
.p-site-info__address p,
.p-site-info__copyright {
  margin: 0;
}

.p-site-info__name {
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-site-info__service,
.p-site-info__contact-text,
.p-site-info__address {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-site-info__address {
  display: grid;
  gap: calc(var(--gap-xs) / 2);
  margin-top: 14px;
}

.p-site-info__content {
  display: grid;
  gap: var(--gap-md);
  align-content: start;
}

.p-footer-nav__list {
  display: grid;
  justify-content: end;
  justify-items: end;
  gap: var(--gap-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-footer-nav__list a {
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--header-nav-font-size);
  font-weight: var(--header-nav-font-weight);
  line-height: var(--line-height-base);
  text-decoration: none;
}

.p-footer-nav__list a:hover {
  text-decoration: underline;
  text-underline-offset: var(--gap-xs);
}

.p-site-info__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  width: min(100%, 560px);
  justify-self: end;
}

.p-site-info__button {
  width: 100%;
  min-height: 72px;
  padding: var(--gap-sm);
  border: var(--button-focus-outline-width) solid rgba(255, 255, 255, 0.8);
  outline: 0;
  background: transparent;
  color: var(--color-text-on-dark);
  font-size: 14px;
  gap: var(--gap-xs);
  line-height: var(--line-height-base);
}

.p-site-info__button .c-btn__text {
  min-width: 0;
  white-space: nowrap;
}

.p-site-info__button-line {
  white-space: nowrap;
}

.p-site-info__button:hover {
  border-color: var(--color-text-on-dark);
  background: var(--color-text-on-dark);
  box-shadow: none;
  color: var(--color-primary);
}

.p-site-info__button--kit {
  border-color: var(--color-text-on-dark);
  background: var(--color-text-on-dark);
  color: var(--color-primary);
}

.p-site-info__button--kit:hover {
  background: transparent;
  color: var(--color-text-on-dark);
}

.p-contact-form-section {
  background: var(--color-bg-hero);
}

.p-estimate-intro,
.p-contact-simple {
  background: var(--color-bg-base);
}

.p-estimate-intro__inner,
.p-contact-simple__inner {
  display: grid;
  gap: var(--gap-lg);
  max-width: 960px;
}

.p-estimate-intro__heading,
.p-contact-simple__inner {
  text-align: center;
}

.p-estimate-intro__title,
.p-contact-simple__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-estimate-intro__title {
  font-size: 20px;
}

.p-estimate-intro__lead,
.p-contact-simple__body {
  display: grid;
  gap: var(--gap-sm);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-estimate-intro__lead {
  gap: 0;
}

.p-estimate-intro__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
  text-align: left;
}

.p-estimate-intro__card {
  display: grid;
  gap: var(--gap-sm);
  padding: var(--gap-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-section);
}

.p-estimate-intro__card--wide {
  grid-column: 1 / -1;
}

.p-estimate-intro__card-title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-estimate-intro__list,
.p-estimate-intro__steps {
  display: grid;
  gap: var(--gap-xs);
  margin: 0;
  padding-left: var(--gap-md);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-estimate-intro__list {
  list-style: disc;
}

.p-estimate-intro__steps {
  list-style: decimal;
}

.p-estimate-intro__list li::marker,
.p-estimate-intro__steps li::marker {
  color: var(--color-primary);
}

.p-contact-simple__actions {
  display: grid;
  justify-items: center;
}

.p-contact-simple__button {
  width: min(100%, var(--hero-cta-width));
}

.p-thanks__section {
  background: var(--color-bg-hero);
}

.p-thanks__inner {
  max-width: 880px;
}

.p-thanks__panel {
  display: grid;
  justify-items: center;
  gap: var(--gap-md);
  padding: var(--gap-xl) var(--gap-lg);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-voice-card);
  text-align: center;
}

.p-thanks__eyebrow {
  margin: 0;
  color: var(--color-gold-end);
  font-family: var(--font-en);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.p-thanks__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-thanks__body {
  display: grid;
  gap: var(--gap-sm);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-thanks__body p {
  margin: 0;
}

.p-thanks__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
  width: min(100%, var(--hero-cta-width));
  margin-top: var(--gap-sm);
}

.p-thanks__button {
  width: 100%;
}

.p-contact-form-section__inner {
  max-width: 960px;
}

.p-contact-form {
  display: grid;
  gap: var(--gap-lg);
}

.p-contact-form--simple {
  text-align: left;
}

.p-contact-form__fieldset {
  display: grid;
  gap: var(--gap-md);
  margin: 0;
  padding: var(--gap-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 8px 24px rgba(49, 49, 50, 0.06);
}

.p-contact-form__legend {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-contact-form__required {
  display: inline-flex;
  align-items: center;
  min-height: var(--gap-md);
  padding: 0 var(--gap-xs);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-sans);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-button);
}

.p-contact-form__asterisk,
.p-contact-form__label--required::after {
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
}

.p-contact-form__label--required::after {
  content: " *";
}

.p-contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
}

.p-contact-form__field {
  display: grid;
  gap: var(--gap-xs);
}

.p-contact-form__field--wide {
  grid-column: 1 / -1;
}

.p-contact-form__label {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-contact-form__input,
.p-contact-form__textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--button-radius);
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-contact-form__input {
  min-height: var(--button-min-height-pc);
  padding: 0 var(--gap-sm);
}

.p-contact-form__textarea {
  min-height: 120px;
  padding: var(--gap-sm);
  resize: vertical;
}

.p-contact-form__input:focus,
.p-contact-form__textarea:focus {
  border-color: var(--color-primary);
  outline: var(--button-focus-outline-width) solid rgba(0, 43, 96, 0.16);
  outline-offset: 0;
}

.p-contact-form__choices {
  display: grid;
  gap: var(--gap-sm);
}

.p-contact-form__choices--inline {
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
}

.p-contact-form__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-contact-form__choice input {
  accent-color: var(--color-primary);
}

.p-contact-form__method[hidden] {
  display: none;
}

.p-contact-form__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-base);
}

.p-contact-form__submit {
  display: grid;
  justify-items: center;
}

.p-contact-form__button {
  width: min(100%, var(--hero-cta-width));
  min-height: calc(var(--button-min-height-pc) + var(--gap-md));
  padding: var(--gap-md) var(--gap-lg);
}

.p-site-info__copyright {
  padding-top: var(--gap-md);
  border-top: var(--button-focus-outline-width) solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-base);
}

@media (min-width: 1024px) {
  body.is-global-menu-open {
    overflow: auto;
  }

  .p-nav-toggle {
    display: none;
  }

  .l-site-header__inner {
    gap: var(--pc-gap-md);
  }

  .l-site-header__nav {
    flex: 0 1 auto;
    justify-content: flex-start;
  }

  .p-global-nav {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .p-global-nav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    text-align: left;
  }

  .p-global-nav__list > li {
    border-right: var(--header-nav-divider-width) solid var(--color-gold-end);
  }

  .p-global-nav__list a {
    font-family: var(--font-sans);
    font-size: var(--header-nav-font-size);
    font-weight: var(--header-nav-font-weight);
    padding-inline: var(--pc-gap-md);
  }

  .p-global-nav__actions {
    display: none;
  }

  .p-header-actions {
    display: flex;
    align-items: stretch;
    gap: var(--pc-gap-sm);
    margin-left: auto;
    margin-right: calc(var(--container-padding) * -1);
  }

  .p-header-actions__button {
    min-height: var(--header-height);
    padding-inline: var(--pc-gap-md);
    font-size: var(--header-button-font-size);
    white-space: nowrap;
  }

  .p-header-actions__button-text {
    display: block;
    line-height: 1.35;
    text-align: center;
  }

  .p-header-actions__button--contact::before {
    display: inline-block;
    flex: 0 0 auto;
    width: var(--gap-sm);
    height: var(--gap-sm);
    background: currentColor;
    content: "";
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%3E%3Crect%20width='20'%20height='16'%20x='2'%20y='4'%20rx='2'/%3E%3Cpath%20d='m22%207-10%206L2%207'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%3E%3Crect%20width='20'%20height='16'%20x='2'%20y='4'%20rx='2'/%3E%3Cpath%20d='m22%207-10%206L2%207'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  }

  .p-site-info {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .p-site-info__content {
    justify-items: end;
  }

  .p-footer-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    justify-items: initial;
    gap: var(--gap-sm) var(--gap-md);
  }

  .p-site-info__copyright {
    grid-column: 1 / -1;
  }
}

.p-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-hero);
}

.p-hero__image {
  position: absolute;
  top: var(--hero-image-position-y);
  left: var(--hero-image-position-x);
  width: auto;
  max-width: none;
  height: var(--hero-image-height);
  object-fit: contain;
  object-position: center top;
  opacity: 1;
  transform: translateX(-50%) scale(var(--hero-image-scale));
  transform-origin: center top;
}

.p-hero__inner {
  position: relative;
  display: grid;
  gap: var(--gap-md);
  max-width: var(--container-max);
  padding-top: calc(var(--section-padding-sp) + var(--header-height) - (var(--gap-sm) * 2));
  padding-bottom: var(--section-padding-sp);
}

.p-hero__content {
  display: grid;
  gap: var(--gap-sm);
  max-width: calc(var(--container-max) - var(--section-padding-pc) - var(--section-padding-pc));
}

.p-hero__voice {
  position: relative;
  width: fit-content;
  padding: var(--gap-md) var(--gap-lg);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-hero-voice);
  color: var(--color-primary);
  border-radius: var(--button-radius);
  font-family: var(--font-mincho);
  font-size: var(--font-size-hero-copy);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-hero__voice::before,
.p-hero__voice::after {
  position: absolute;
  width: 20px; /* 推測: テキストにかぶらない引用符サイズ。要確認 */
  height: 16px; /* 推測: テキストにかぶらない引用符サイズ。要確認 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

.p-hero__voice::before {
  top: var(--gap-xs);
  left: var(--gap-xs);
  background-image: url("../images/top_quotation.svg");
}

.p-hero__voice::after {
  right: var(--gap-xs);
  bottom: var(--gap-xs);
  background-image: url("../images/under_Quotation.svg");
}

.p-hero__voice p:first-child {
  color: var(--color-primary);
  font-size: var(--font-size-hero-accent);
}

.p-hero__voice p:nth-child(2) {
  font-size: var(--font-size-hero-voice-body);
}

.p-hero__voice cite {
  display: block;
  margin-top: var(--gap-xs);
  color: var(--color-primary);
  font-size: var(--font-size-hero-voice-name);
  font-style: normal;
  font-weight: var(--font-weight-regular);
}

.p-hero__lead {
  display: inline-flex;
  width: fit-content;
  padding: var(--gap-xs) var(--gap-sm);
  background: linear-gradient(90deg, var(--color-gold-start), var(--color-gold-end));
  color: var(--color-text-on-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-hero-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-hero__title {
  display: grid;
  gap: var(--hero-title-line-gap);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-hero-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.7),
    1px 1px 0 rgba(255, 255, 255, 0.8),
    -1px -1px 0 rgba(255, 255, 255, 0.8),
    1px -1px 0 rgba(255, 255, 255, 0.8),
    -1px 1px 0 rgba(255, 255, 255, 0.8);
}

.p-hero__title-particle {
  font-size: var(--font-size-hero-particle);
}

.p-hero__title-line {
  display: inline-block;
  font-size: var(--font-size-hero-title);
  white-space: nowrap;
}

.p-hero__proof {
  display: grid;
  gap: 0;
  align-items: center;
  width: fit-content;
}

.p-hero__badge img {
  width: auto;
  height: var(--hero-proof-image-height);
}

.p-hero__stats {
  width: 100%;
}

.p-hero__stats img {
  width: 100%;
  height: var(--hero-proof-image-height);
  object-fit: contain;
}

.p-hero__stats-sp {
  display: none;
}

.p-hero__stats-sp img {
  display: block;
  width: 100%;
  height: auto;
}

.p-hero__cta {
  display: grid;
  justify-items: center;
  gap: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-hero-copy);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.p-hero__cta-free {
  position: relative;
  display: inline-flex;
  justify-content: center;
  gap: var(--gap-xs);
  margin: 0;
  padding-inline: calc(var(--gap-xl) + var(--gap-md));
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-hero__cta-free::before,
.p-hero__cta-free::after {
  position: absolute;
  top: 50%;
  width: var(--gap-xl);
  height: var(--first-strength-divider-height);
  background: var(--color-primary);
  content: "";
}

.p-hero__cta-free::before {
  left: 0;
  transform: rotate(45deg);
}

.p-hero__cta-free::after {
  right: 0;
  transform: rotate(-45deg);
}

.p-hero__cta-free span {
  background: linear-gradient(transparent 58%, var(--color-gold-start) 58%, var(--color-gold-start) 86%, transparent 86%);
}

.p-hero__button {
  display: grid;
  grid-template-columns: var(--hero-cta-icon-size) minmax(0, auto) var(--hero-cta-arrow-size);
  gap: var(--gap-md);
  align-items: center;
  justify-content: center;
  width: min(100%, var(--hero-cta-width));
  min-height: calc(var(--button-min-height-pc) + var(--gap-md));
  padding: var(--gap-md) var(--gap-lg);
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-button);
  line-height: var(--line-height-base);
}

.p-hero__button .c-btn__text {
  align-self: center;
  justify-self: center;
  text-align: center;
}

.p-hero__button::before,
.p-hero__button::after {
  display: block;
  content: "";
}

.p-hero__button::before {
  width: var(--hero-cta-icon-size);
  aspect-ratio: 82 / 61;
  background: currentColor;
  mask: url("../images/cardboard.svg") center / contain no-repeat;
  -webkit-mask: url("../images/cardboard.svg") center / contain no-repeat;
}

.p-hero__button::after {
  width: 0;
  height: 0;
  border-top: calc(var(--hero-cta-arrow-size) * 0.8) solid transparent;
  border-bottom: calc(var(--hero-cta-arrow-size) * 0.8) solid transparent;
  border-left: var(--hero-cta-arrow-size) solid currentColor;
}

.p-merit {
  background: var(--color-bg-base);
}

.p-merit picture {
  display: block;
}

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

.p-problem {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-section);
  padding-block: clamp(72px, 7vw, 96px); /* 推測: 参考画像の上下余白。要確認 */
}

.p-problem::before {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--problem-bg-image-width);
  height: var(--problem-bg-image-height);
  background: url("../images/problem_dr.png") top right / cover no-repeat;
  opacity: var(--problem-bg-image-opacity);
  pointer-events: none;
  content: "";
}

.p-problem::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--color-bg-section) 0%, rgba(var(--color-bg-section-rgb), 0.86) 44%, rgba(var(--color-bg-section-rgb), 0) 76%),
    linear-gradient(180deg, rgba(var(--color-bg-section-rgb), 0) 0%, var(--color-bg-section) 44%);
  pointer-events: none;
  content: "";
}

.p-problem__inner {
  position: relative;
  display: grid;
  gap: clamp(40px, 4.5vw, 56px); /* 推測: 見出しとカード群の間隔。要確認 */
  z-index: 2;
}

.p-problem__heading {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gap-xs);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--gap-lg);
  text-align: center;
}

.p-problem__heading::before,
.p-problem__heading::after {
  position: absolute;
  color: rgba(183, 214, 229, 0.42); /* 推測: 参考画像の薄い水色引用符。要確認 */
  font-family: var(--font-mincho);
  font-size: var(--problem-heading-quote-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.p-problem__heading::before {
  top: -0.05em;
  left: 0;
  content: "“";
}

.p-problem__heading::after {
  right: 0;
  bottom: -0.18em;
  content: "”";
}

.p-problem__sub {
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: clamp(24px, 2.5vw, 32px); /* 推測: 参考画像の見出し上段サイズ。要確認 */
  font-weight: var(--font-weight-bold);
  line-height: 1.45;
}

.p-problem__title {
  color: var(--color-text);
  font-size: clamp(28px, 2.9vw, 38px); /* 推測: 参考画像の見出し下段サイズ。要確認 */
  line-height: 1.35;
}

.p-problem__title-main {
  display: inline-block;
  border-bottom: var(--problem-title-underline-width) solid var(--color-primary);
  color: var(--color-primary);
}

.p-problem__title-emphasis {
  font-size: calc(1em * var(--problem-title-emphasis-scale));
}

.p-problem__list {
  display: grid;
  gap: var(--gap-sm);
  justify-content: center;
}

.p-problem__item {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: var(--gap-sm);
  width: min(100%, var(--problem-item-max-width));
  min-height: var(--problem-item-min-height);
  padding: var(--gap-md) var(--gap-lg);
  background: var(--color-bg-base);
  box-shadow: var(--problem-item-shadow);
  color: var(--color-text);
  border-radius: var(--button-radius);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: left;
}

.p-problem__check {
  flex: 0 0 auto;
  color: var(--problem-check-color);
  font-size: 26px; /* 推測: 参考画像のチェックサイズ。要確認 */
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.p-achievement {
  position: relative;
  overflow: hidden;
  background: url("../images/bg_voice01.png") center / cover no-repeat;
  text-align: center;
}

.p-achievement__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gap-md);
  z-index: 1;
}

.p-achievement__inner::before {
  position: absolute;
  top: calc(var(--gap-xl) * -1);
  left: 50%;
  z-index: -1;
  width: var(--achievement-logo-bg-size);
  aspect-ratio: 277 / 273;
  background: url("../images/logo_background.svg") center / contain no-repeat;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.p-achievement__lead,
.p-achievement__company {
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-achievement__lead {
  position: relative;
  z-index: var(--z-index-header);
  margin-bottom: calc(var(--gap-xs) * -1);
  font-size: var(--font-size-h3);
}

.p-achievement__company {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--gap-xs) var(--gap-md);
  background: var(--color-bg-base);
  font-size: clamp(28px, 3vw, 38px); /* 推測: 参考画像の会社名サイズ。要確認 */
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.p-achievement__title-wrap {
  position: relative;
  z-index: var(--z-index-header);
  display: grid;
  grid-template-columns: var(--achievement-frame-width) minmax(0, auto) var(--achievement-frame-width);
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  width: 100%;
}

.p-achievement__frame {
  width: 100%;
  height: auto;
}

.p-achievement__frame--right {
  transform: scaleX(-1);
}

.p-achievement__title {
  position: relative;
  z-index: var(--z-index-header);
  color: var(--color-text);
  font-size: clamp(28px, 3vw, 38px); /* 推測: 参考画像の実績見出しサイズ。要確認 */
  line-height: 1.8;
}

.p-achievement__title strong {
  position: relative;
  display: inline-block;
  color: var(--color-text);
  font-size: clamp(52px, 6vw, 72px); /* 推測: 参考画像の「13万件」サイズ。要確認 */
  line-height: 1.1;
}

.p-achievement__title strong::after {
  position: absolute;
  right: 0;
  bottom: 0.08em;
  left: 0;
  z-index: -1;
  height: var(--achievement-number-underline-height);
  background: linear-gradient(90deg, var(--color-gold-start), var(--color-gold-end));
  content: "";
}

.p-achievement__watermark {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 0;
  color: rgba(0, 43, 96, 0.08); /* 推測: 参考画像のTAKAMINE透かし色。要確認 */
  font-family: var(--font-mincho);
  font-size: var(--achievement-watermark-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
  opacity: 1;
  pointer-events: none;
}

.p-reasons {
  background: var(--color-bg-base);
}

.p-reasons__inner,
.p-voice__inner,
.p-why__inner {
  display: grid;
  gap: var(--gap-lg);
}

.p-reasons__heading,
.p-voice__heading,
.p-why__heading {
  display: grid;
  justify-items: center;
  gap: var(--gap-xs);
  text-align: center;
}

.p-reasons__heading {
  gap: 0;
}

.p-reasons__en {
  margin: 0;
  color: var(--color-border); /* 推測: 画像は白文字だが、白背景上で見える装飾色として既存トークンを使用。要確認 */
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
}

.p-reasons__title {
  display: grid;
  justify-items: center;
  gap: var(--gap-sm);
}

.p-reasons__title::after {
  display: block;
  width: calc(var(--gap-xl) + var(--gap-sm));
  height: var(--problem-title-underline-width);
  background: var(--color-border); /* 推測: 画像の下線色を既存トークンで代替。要確認 */
  content: "";
}

.p-reasons__title::after {
  background: var(--reasons-title-divider-color);
}

.p-reasons__list {
  display: grid;
  gap: var(--gap-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-reasons__item {
  position: relative;
  display: grid;
  gap: var(--gap-md);
  align-items: center;
}

.p-reasons__number {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--reasons-number-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-base);
}

.p-reasons__content {
  display: grid;
  align-content: start;
  gap: 0;
}

.p-reasons__rule {
  display: block;
  width: 100%;
  height: var(--reasons-rule-height);
  margin-top: var(--gap-sm);
  background: var(--reasons-rule-color);
}

.p-reasons__item-title {
  margin: var(--reasons-number-title-gap) 0 0;
  color: #000000;
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-reasons__text {
  display: grid;
  gap: var(--gap-sm);
  margin: var(--gap-sm) 0 0;
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-reasons__text p {
  margin: 0;
}

.p-reasons__media {
  margin: 0;
  background: var(--color-bg-section);
  box-shadow: 0 var(--gap-xs) var(--gap-md) rgba(49, 49, 50, 0.12);
}

.p-reasons__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.p-reasons__cta {
  display: grid;
  justify-items: center;
}

.p-reasons__button {
  grid-template-columns: minmax(0, auto) var(--hero-cta-arrow-size);
  margin-inline: auto;
}

.p-reasons__button::before {
  display: none;
}

.p-voice {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-section);
}

.p-voice::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-bg-base);
  content: "";
  opacity: 0.82; /* 推測: 参考画像に合わせた白被せ濃度。要確認 */
}

.p-voice__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.p-voice__inner {
  position: relative;
  z-index: 2;
}

.p-voice__heading {
  gap: 0;
}

.p-voice__en {
  margin: 0;
  color: var(--color-border);
  font-family: var(--font-en);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-button);
}

.p-voice__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-block: var(--gap-lg);
}

.p-voice__track {
  position: relative;
}

.p-voice__carousel {
  position: relative;
}

.p-voice__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: var(--voice-arrow-size);
  aspect-ratio: 1;
  border: var(--button-focus-outline-width) solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-bg-base);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    border-color var(--button-transition-bg),
    background-color var(--button-transition-bg),
    color var(--button-transition-bg),
    transform var(--button-transition-transform);
}

.p-voice__arrow:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
}

.p-voice__arrow:active {
  transform: translateY(calc(-50% + var(--button-active-translate-y)));
}

.p-voice__arrow--prev {
  left: 0;
}

.p-voice__arrow--next {
  right: 0;
}

.p-voice__cta {
  display: grid;
  justify-items: center;
}

.p-voice__button {
  width: min(100%, calc(var(--container-max) / 2));
  gap: var(--gap-sm);
  min-height: var(--button-min-height-sp);
  font-size: var(--font-size-caption);
}

.p-voice__button::before {
  display: inline-block;
  width: var(--font-size-h3);
  height: var(--font-size-h3);
  border: var(--button-focus-outline-width) solid currentColor;
  content: "";
  transform: rotate(-20deg);
}

.p-voice-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, var(--voice-card-width));
  gap: var(--gap-md);
  height: var(--voice-card-height);
  min-height: var(--voice-card-min-height);
  overflow: hidden;
  padding: var(--gap-md);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-voice-card);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--voice-card-side-scale));
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-voice-card.is-active {
  position: relative;
  top: auto;
  left: 50%;
  z-index: 3;
  width: 44%;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.p-voice-card.is-prev {
  z-index: 2;
  opacity: 0;
  transform: translate(calc(-50% - var(--voice-card-side-offset)), -50%) scale(var(--voice-card-side-scale));
}

.p-voice-card.is-next {
  z-index: 2;
  opacity: 0;
  transform: translate(calc(-50% + var(--voice-card-side-offset)), -50%) scale(var(--voice-card-side-scale));
}

.p-voice-card.is-hidden {
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--voice-card-side-scale));
}

.p-voice-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-sm);
  padding-bottom: var(--gap-sm);
  border-bottom: var(--button-focus-outline-width) solid var(--color-border);
}

.p-voice-card__avatar {
  width: var(--voice-avatar-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-bg-section);
  overflow: hidden;
}

.p-voice-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-voice-card__summary {
  display: grid;
  gap: var(--gap-xs);
}

.p-voice-card__headline {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-voice-card__body {
  display: grid;
  align-content: start;
  gap: var(--gap-sm);
  overflow: auto;
  padding-right: var(--gap-xs);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-voice-card__body p {
  margin: 0;
}

.p-voice-card__name {
  justify-self: start;
  display: inline-block;
  margin: 0;
  padding: calc(var(--gap-xs) / 2) var(--gap-sm);
  background: var(--color-primary);
  color: var(--color-bg-base);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.p-voice-card__name-break {
  display: none;
}

@keyframes tkmn-voice-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tkmn-voice-side-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-voice-card.is-active,
  .p-voice-card.is-prev,
  .p-voice-card.is-next {
    animation: none;
  }
}

.p-why {
  overflow: hidden;
  padding-bottom: calc(var(--section-padding-sp) * 1.2);
  background: var(--color-bg-base);
}

@media (min-width: 1024px) {
  .p-why {
    padding-bottom: calc(var(--section-padding-pc) * 1.2);
  }
}

.p-why__inner {
  justify-items: center;
}

.p-why__intro {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

.p-why__title::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: var(--why-deco-size);
  aspect-ratio: 277 / 273;
  background: url("../images/logo_background.svg") center / contain no-repeat;
  content: "";
  opacity: 0.42; /* 推測: 参考画像の薄い背面装飾。要確認 */
  transform: translate(-50%, -50%);
}

.p-why__title {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-why__reason {
  display: grid;
  justify-items: center;
  gap: var(--gap-xs);
  text-align: center;
}

.p-why__reason-label {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.p-why__reason-copy {
  display: grid;
  justify-items: center;
  gap: var(--gap-xs);
  margin: 0;
}

.p-why__highlight {
  display: inline-block;
  padding: var(--gap-xs) var(--gap-sm);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
}

.p-why__reason-line {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
}

.p-why__suffix {
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.p-why__divider {
  display: block;
  width: var(--button-focus-outline-width);
  height: var(--gap-lg);
  background: var(--color-border);
}

.p-why__content {
  display: grid;
  align-items: start;
  gap: var(--gap-sm);
  width: 100%;
  max-width: var(--why-content-max);
}

.p-why__body {
  display: grid;
  gap: var(--gap-md);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-why__body p {
  margin: 0;
}

.p-why__body strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.p-why__media {
  position: relative;
  justify-self: center;
  width: var(--why-media-total-width);
  max-width: none;
}

.p-why__image {
  position: absolute;
  display: block;
  width: var(--why-image-width);
  object-fit: cover;
}

.p-why__image--metal {
  top: 0;
  left: 0;
  z-index: 1;
}

.p-why__image--furnace {
  top: 0;
  right: 0;
  z-index: 2;
  transform: translateY(var(--why-image-offset-y));
}

.p-comparison {
  overflow: hidden;
  background: var(--color-bg-section) url("../images/water_bg.png") center / cover no-repeat;
}

.p-comparison__inner {
  display: grid;
  gap: var(--gap-lg);
  max-width: var(--comparison-content-max);
}

.p-comparison__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  justify-self: stretch;
  width: 100%;
}

.p-comparison__image {
  display: block;
  width: 100%;
  object-fit: cover;
}

.p-comparison__image--work {
  z-index: 2;
}

.p-comparison__image--report {
  z-index: 1;
  margin-top: var(--comparison-image-offset-y);
}

.p-comparison__content {
  display: grid;
  align-content: start;
  gap: var(--gap-md);
}

.p-comparison__title {
  display: grid;
  gap: var(--gap-sm);
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-comparison__title::after {
  display: block;
  width: 100%;
  height: var(--button-focus-outline-width);
  background: var(--color-border);
  content: "";
}

.p-comparison__body {
  display: grid;
  gap: var(--gap-md);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-comparison__body p {
  margin: 0;
}

.p-comparison__body strong {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.p-comparison__cta {
  display: grid;
  justify-items: center;
  margin-top: var(--gap-lg);
}

.p-comparison__button {
  width: min(100%, calc(var(--comparison-content-max) / 2));
}

.p-area {
  background: var(--color-bg-base);
}

.p-area__inner {
  display: grid;
  gap: var(--gap-xl);
  align-items: center;
}

.p-area__content {
  display: grid;
  gap: var(--gap-md);
}

.p-area__heading {
  display: grid;
  gap: var(--gap-xs);
}

.p-area__en {
  margin: 0;
  color: var(--color-bg-section);
  font-family: var(--font-mincho);
  font-size: calc(var(--font-size-h1) + var(--font-size-h2));
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
}

.p-area__title {
  display: grid;
  gap: var(--gap-sm);
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-area__title::after {
  display: block;
  width: calc(var(--gap-xl) + var(--gap-sm));
  height: var(--button-focus-outline-width);
  background: var(--color-bg-section);
  content: "";
}

.p-area__lead,
.p-area__prefectures {
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-area__lead p,
.p-area__free,
.p-area__box-title,
.p-area__prefectures,
.p-area__note {
  margin: 0;
}

.p-area__free,
.p-area__box-title,
.p-area__prefectures {
  font-weight: var(--font-weight-bold);
}

.p-area__box {
  display: grid;
  gap: var(--gap-xs);
  width: min(100%, calc(var(--container-max) / 2.1));
  padding: var(--gap-md);
  border: var(--button-focus-outline-width) solid var(--color-bg-section);
  background: var(--color-bg-base);
}

.p-area__box-title {
  color: var(--color-primary);
  font-size: var(--font-size-body);
}

.p-area__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-base);
}

.p-area__cta {
  display: grid;
}

.p-area__button {
  width: min(100%, calc(var(--container-max) / 2.25));
}

.p-area__map {
  display: grid;
  justify-items: center;
}

.p-area__map img {
  display: block;
  width: min(100%, var(--area-map-size));
  height: auto;
}

.p-area__map-placeholder {
  display: grid;
  place-items: center;
  width: min(100%, var(--area-map-size));
  aspect-ratio: 1;
  border: var(--button-focus-outline-width) solid var(--color-border);
  background:
    radial-gradient(circle at 58% 58%, #00a650 0 28%, transparent 29%),
    radial-gradient(circle at 47% 68%, #9dc233 0 12%, transparent 13%),
    var(--color-bg-section); /* 推測: map-kanto.svg 未配置時の仮表示。要確認 */
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.p-pricing {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-section) url("../images/market_pricebg.png") center / cover no-repeat;
}

.p-pricing::before,
.p-pricing::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.p-pricing::before {
  background:
    radial-gradient(circle at 45% 20%, rgba(255, 255, 255, 0.78) 0 18%, transparent 19%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent); /* 推測: 参考画像の淡い光背景。要確認 */
}

.p-pricing::after {
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(0, 43, 96, 0.08) 18.3%, transparent 18.6% 32%, rgba(199, 167, 93, 0.16) 32.3%, transparent 32.6% 50%, rgba(0, 43, 96, 0.08) 50.3%, transparent 50.6%),
    radial-gradient(circle at 36% 16%, rgba(0, 43, 96, 0.08) 0 1px, transparent 1.5px); /* 推測: 地図・相場線の代替装飾。要確認 */
  background-size: 100% 100%, var(--gap-sm) var(--gap-sm);
  opacity: 0.55; /* 推測: 背景装飾の薄さ。要確認 */
}

.p-pricing::before,
.p-pricing::after {
  content: none;
}

.p-pricing__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--gap-lg);
  text-align: center;
}

.p-pricing__title {
  display: grid;
  justify-items: center;
  gap: var(--gap-sm);
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-pricing__title::after {
  display: block;
  width: calc(var(--gap-xl) + var(--gap-sm));
  height: var(--reasons-rule-height);
  background: var(--reasons-title-divider-color);
  content: "";
}

.p-pricing__body {
  display: grid;
  gap: var(--gap-md);
  max-width: 720px; /* 推測: 参考画像の本文幅。要確認 */
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-pricing__body p {
  margin: 0;
}

.p-pricing__cta {
  display: grid;
  justify-items: center;
  width: 100%;
}

.p-pricing__button {
  width: min(100%, calc(var(--container-max) / 2.1));
}

.p-assessment {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-hero);
}

.p-assessment::after {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 28%;
  background: var(--color-bg-section) url("../images/water_bg.png") center / cover no-repeat;
  content: "";
}

.p-assessment__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--gap-lg);
  text-align: center;
}

.p-assessment__heading {
  display: grid;
  justify-items: center;
  gap: var(--gap-md);
}

.p-assessment__title {
  display: grid;
  justify-items: center;
  gap: var(--gap-sm);
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-assessment__title::after {
  display: block;
  width: calc(var(--gap-xl) + var(--gap-sm));
  height: var(--button-focus-outline-width);
  background: var(--color-primary);
  content: "";
}

.p-assessment__lead {
  display: grid;
  gap: var(--gap-sm);
  max-width: 760px; /* 推測: 参考画像のリード文幅。要確認 */
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-assessment__lead p {
  margin: 0;
}

.p-assessment__materials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
  width: 100%;
}

.p-assessment-material {
  display: grid;
  justify-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  background: var(--color-bg-base);
  box-shadow: 0 6px 18px rgba(49, 49, 50, 0.08);
}

.p-assessment-material__image {
  display: block;
  width: 100%;
  max-width: calc(var(--assessment-card-width) - var(--gap-lg));
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.p-assessment-material__name,
.p-assessment-material__en {
  margin: 0;
}

.p-assessment-material__name {
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.p-assessment-material__name::before {
  color: var(--color-primary);
  content: ">";
}

.p-assessment-material__en {
  color: var(--color-text-muted);
  font-family: var(--font-mincho);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-base);
}

.p-assessment__fee-heading {
  display: grid;
  gap: var(--gap-xs);
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-assessment__fee-heading p {
  margin: 0;
}

.p-assessment__fee-heading-underline {
  border-bottom: 1px solid var(--color-primary);
}

.p-assessment__fees {
  display: grid;
  width: min(100%, var(--assessment-fee-width));
  margin: 0;
  padding: var(--gap-md) var(--gap-lg);
  border: var(--button-focus-outline-width) solid var(--color-border);
  background: var(--color-bg-base);
}

.p-assessment__fee-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--gap-md);
  padding-block: var(--gap-sm);
  border-bottom: var(--button-focus-outline-width) solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

.p-assessment__fee-row:last-child {
  border-bottom: 0;
}

.p-assessment__fee-row dt,
.p-assessment__fee-row dd {
  margin: 0;
}

.p-assessment__fee-row dt {
  text-align: left;
}

.p-assessment__fee-row dd {
  color: var(--color-primary);
}

.p-assessment__fee-row strong {
  font-size: calc(var(--font-size-h1) + var(--font-size-h3));
  line-height: var(--line-height-button);
}

.p-assessment__message {
  display: grid;
  gap: var(--gap-md);
  max-width: 760px; /* 推測: 参考画像下部の本文幅。要確認 */
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-assessment__message p {
  margin: 0;
}

.p-assessment__message-title {
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}

.p-assessment__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.p-assessment__cta {
  display: grid;
  justify-items: center;
  width: 100%;
}

.p-assessment__button {
  width: min(100%, calc(var(--container-max) / 2.3));
}

.p-speed {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-base);
}

.p-speed__image {
  display: none;
}

.p-speed__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.p-speed__image--left {
  left: 0;
  transform: translateX(-18%);
}

.p-speed__image--right {
  right: 0;
  transform: translateX(18%);
}

.p-speed__inner {
  --speed-divider-message-gap: 16px;
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--gap-md);
  max-width: var(--speed-content-max);
  text-align: center;
}

.p-speed__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-speed__lead,
.p-speed__note,
.p-speed__message {
  display: grid;
  gap: var(--gap-xs);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-speed__note {
  gap: 0;
}

.p-speed__time {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-self: center;
  justify-items: center;
  gap: var(--gap-sm);
  width: 100%;
  min-height: clamp(240px, 28vw, 360px);
  padding: var(--gap-xl) var(--gap-md);
}

.p-speed__time::before {
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  background: url("../images/bg.png") center / 112% auto no-repeat;
  content: "";
  transform: translateX(-50%);
}

.p-speed__time > * {
  position: relative;
  z-index: 1;
}

.p-speed__lead p,
.p-speed__period p,
.p-speed__note p,
.p-speed__message p {
  margin: 0;
}

.p-speed__period {
  display: grid;
  gap: var(--gap-xs);
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-speed__period strong {
  color: var(--color-primary);
  font-size: var(--font-size-h2);
  text-decoration: underline;
  text-decoration-thickness: var(--button-focus-outline-width);
  text-underline-offset: var(--gap-xs);
}

.p-speed__divider {
  display: block;
  width: var(--font-size-h2);
  aspect-ratio: 1;
  margin-block: var(--gap-md) calc(var(--speed-divider-message-gap) - var(--gap-md));
  background: url("../images/warning.svg") center / contain no-repeat;
}

.p-speed__message {
  gap: var(--gap-md);
}

.p-speed__message p:nth-child(2) {
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

.p-speed__free {
  position: relative;
  display: inline-block;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

.p-speed__free::before,
.p-speed__free::after {
  position: absolute;
  top: 50%;
  width: var(--gap-lg);
  height: var(--button-focus-outline-width);
  background: var(--color-primary);
  content: "";
}

.p-speed__free::before {
  right: calc(100% + var(--gap-sm));
  transform: rotate(45deg);
}

.p-speed__free::after {
  left: calc(100% + var(--gap-sm));
  transform: rotate(-45deg);
}

.p-speed__cta {
  display: grid;
  justify-items: center;
  width: 100%;
}

.p-speed__button {
  width: min(100%, var(--hero-cta-width));
}

.p-first-intro {
  background: var(--color-bg-base);
}

.p-first-intro__inner {
  display: grid;
  gap: var(--gap-xl);
  align-items: start;
}

.p-first-intro__content {
  display: grid;
  gap: var(--gap-lg);
}

.p-first-intro__heading {
  display: grid;
  grid-template-columns: auto minmax(var(--gap-xl), 1fr);
  align-items: center;
  gap: var(--gap-md);
}

.p-first-intro__heading::after {
  align-self: end;
  display: block;
  height: var(--button-focus-outline-width);
  margin-bottom: calc(var(--font-size-h2) * 0.8);
  background: var(--color-border);
  content: "";
}

.p-first-intro__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-intro__body {
  display: grid;
  gap: var(--gap-md);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-first-intro__body p {
  margin: 0;
}

.p-first-intro__quotes {
  display: grid;
  gap: var(--gap-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.p-first-intro__quotes p {
  width: fit-content;
  border-bottom: var(--button-focus-outline-width) solid var(--color-primary);
}

.p-first-intro__media {
  position: relative;
  align-self: start;
  justify-self: center;
  width: 100%;
  min-height: clamp(320px, 36vw, 520px);
}

.p-first-intro__image {
  position: absolute;
  display: block;
  width: var(--first-intro-image-width);
  object-fit: cover;
}

.p-first-intro__image--metal {
  top: 0;
  left: 0;
  z-index: 2;
}

.p-first-intro__image--report {
  top: 0;
  right: 0;
  z-index: 1;
  transform: translateY(var(--first-intro-image-offset-y));
}

.p-first-process {
  background: var(--color-bg-base);
}

.p-first-process__inner {
  display: grid;
  gap: var(--gap-xl);
}

.p-first-process__heading {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gap-md);
  text-align: center;
}

.p-first-process__heading::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: clamp(160px, 16vw, 240px);
  aspect-ratio: 277 / 273;
  background: url("../images/logo_background.svg") center / contain no-repeat;
  content: "";
  opacity: 0.9; /* 推測: SVG内の透過込みで背景ロゴが視認できる濃度。要確認 */
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.p-first-process__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-process__heading p,
.p-first-process__body {
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-first-process__heading p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.p-first-process__content {
  display: grid;
  gap: var(--gap-xl);
  align-items: center;
}

.p-first-process__body {
  display: grid;
  gap: var(--gap-lg);
}

.p-first-process__body p {
  margin: 0;
}

.p-first-process__body strong {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.p-first-process__steps {
  position: relative;
  display: grid;
  gap: var(--gap-lg);
  margin: 0;
  padding: var(--gap-md) 0;
  list-style: none;
}

.p-first-process__steps::before {
  position: absolute;
  top: var(--gap-lg);
  bottom: var(--gap-lg);
  left: calc(var(--gap-lg) + (var(--gap-sm) / 2));
  width: var(--button-focus-outline-width);
  background: var(--color-border);
  content: "";
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.p-first-process__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--gap-xl) minmax(0, 1fr);
  align-items: center;
  width: min(94%, 520px);
  min-height: calc(var(--gap-xl) + var(--gap-md));
  padding: var(--gap-md) var(--gap-lg);
  background: var(--color-bg-section);
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.p-first-process__step,
.p-first-process__request {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--first-process-delay, 0s);
}

.p-first-process__steps li:nth-child(1) {
  --first-process-delay: 0.15s;
}

.p-first-process__steps li:nth-child(2) {
  --first-process-delay: 0.45s;
}

.p-first-process__steps li:nth-child(3) {
  --first-process-delay: 0.75s;
}

.p-first-process__steps li:nth-child(4) {
  --first-process-delay: 1.05s;
}

.p-first-process__inner.is-inview .p-first-process__steps::before {
  transform: scaleY(1);
}

.p-first-process__inner.is-inview .p-first-process__step,
.p-first-process__inner.is-inview .p-first-process__request {
  opacity: 1;
  transform: translateY(0);
}

.p-first-process__step--active {
  width: 100%;
  border: 1px solid #003f74;
  background: #e8f8ff;
}

.p-first-process__dot {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--gap-sm);
  aspect-ratio: 1;
  border: var(--button-focus-outline-width) solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-bg-base);
}

.p-first-process__request {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--gap-xl) minmax(0, 1fr);
  align-items: center;
  margin-block: calc(var(--gap-md) * -1);
  list-style: none;
}

.p-first-process__request strong {
  position: relative;
  width: fit-content;
  min-width: calc(var(--gap-xl) * 2.8);
  min-height: var(--button-min-height-sp);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
}

.p-first-process__request strong::before {
  position: absolute;
  top: 50%;
  right: 100%;
  border-top: var(--gap-sm) solid transparent;
  border-right: var(--gap-sm) solid var(--color-primary);
  border-bottom: var(--gap-sm) solid transparent;
  content: "";
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .p-first-process__steps::before {
    transform: scaleY(1) !important;
    transition: none !important;
  }

  .p-first-process__step,
  .p-first-process__request {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 767px) {
  .p-first-process__request {
    margin-block: 0;
  }
}

.p-first-band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--first-band-height);
  overflow: hidden;
  padding-block: 80px;
  background:
    url("../images/bg.png") center / cover no-repeat,
    url("../images/water_bg.png") center / cover no-repeat,
    var(--color-bg-base);
}

.p-first-band::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.58); /* 推測: 背景画像を見せつつ中央コピーを読ませる白被せ。要確認 */
  content: "";
}

.p-first-band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--gap-sm);
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: center;
}

.p-first-band__inner p {
  margin: 0;
}

.p-first-case {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-base);
}

.p-first-case::before {
  position: absolute;
  left: 0;
  top: 32%;
  width: min(46vw, calc((100vw - var(--container-max)) / 2 + (var(--container-max) * 0.46)));
  height: clamp(180px, 24vw, 280px);
  background: var(--color-bg-section);
  content: "";
  transform: translateY(-8%);
}

.p-first-case__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gap-xl);
  align-items: center;
}

.p-first-case__media {
  display: grid;
  justify-items: center;
}

.p-first-case__image,
.p-first-case__sheet {
  width: min(100%, var(--first-case-sheet-width));
  box-shadow: var(--shadow-voice-card);
}

.p-first-case__image {
  display: block;
  height: auto;
}

.p-first-case__sheet {
  display: grid;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border: var(--button-focus-outline-width) solid var(--color-text-muted);
  background: var(--color-bg-base);
}

.p-first-case__sheet p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.p-first-case__sheet span {
  display: block;
  height: var(--gap-md);
  border: var(--button-focus-outline-width) solid var(--color-border);
}

.p-first-case__content {
  display: grid;
  gap: var(--gap-md);
}

.p-first-case__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: left;
}

.p-first-case__title::after {
  display: inline-block;
  width: clamp(72px, 12vw, 160px);
  height: var(--button-focus-outline-width);
  margin-left: var(--gap-md);
  background: var(--color-border);
  content: "";
  vertical-align: middle;
}

.p-first-case__body {
  display: grid;
  gap: var(--gap-md);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-first-case__body p {
  margin: 0;
}

.p-first-case__cta {
  grid-column: 1 / -1;
  width: 100%;
}

.p-first-case__button {
  width: min(100%, var(--hero-cta-width));
}

.p-first-strengths {
  background: var(--color-bg-base);
}

.p-first-strengths__inner {
  display: grid;
  gap: var(--gap-xl);
}

.p-first-strengths__heading {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: var(--gap-xs);
  text-align: center;
}

.p-first-strengths__en {
  position: absolute;
  top: calc(var(--gap-sm) * -1);
  left: 50%;
  z-index: 0;
  margin: 0;
  color: var(--color-bg-section);
  font-family: var(--font-mincho);
  font-size: var(--first-strength-heading-en-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  opacity: 0.82; /* 推測: 参考画像の薄い英字見出し。要確認 */
  transform: translateX(-50%);
}

.p-first-strengths__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-strengths__grid {
  display: grid;
  gap: var(--gap-md);
}

.p-first-strength-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-voice-card);
}

.p-first-strength-card__image {
  display: block;
  width: 100%;
  height: var(--first-strength-card-image-height);
  object-fit: cover;
}

.p-first-strength-card__body {
  display: grid;
  align-content: start;
  gap: var(--gap-md);
  padding: var(--gap-lg) var(--gap-md);
}

.p-first-strength-card__title {
  position: relative;
  margin: 0;
  padding-bottom: var(--gap-md);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: center;
}

.p-first-strength-card__title::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(100%, var(--first-strength-divider-width));
  height: var(--first-strength-divider-height);
  background: var(--color-primary);
  content: "";
  transform: translateX(-50%);
}

.p-first-strength-card__text {
  display: grid;
  gap: var(--gap-sm);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-first-strength-card__text p {
  margin: 0;
}

.p-first-flow {
  background: var(--color-bg-base);
}

.p-first-flow__inner {
  display: grid;
  max-width: calc(var(--first-flow-content-max) + (var(--container-padding) * 2));
  gap: var(--gap-xl);
}

.p-first-flow__heading {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gap-xs);
  padding-top: var(--gap-xs);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  text-align: center;
}

.p-first-flow__en {
  position: absolute;
  top: calc(var(--gap-sm) * -1);
  left: 50%;
  z-index: 0;
  margin: 0;
  color: var(--color-bg-section);
  font-size: var(--first-strength-heading-en-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  opacity: 0.82; /* 推測: 強みセクションと同じ薄い英字見出し。要確認 */
  transform: translateX(-50%);
}

.p-first-flow__title,
.p-first-flow__lead {
  position: relative;
  z-index: 1;
  margin: 0;
}

.p-first-flow__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-flow__lead {
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-first-flow__list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--gap-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-first-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--first-flow-number-width) minmax(0, 1fr);
  min-height: 120px; /* 推測: 参考画像の1ステップ高さ。要確認 */
  padding: var(--gap-md);
  background: var(--first-flow-card-bg);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.p-first-flow__item::before,
.p-first-flow__item::after {
  position: absolute;
  left: calc(var(--gap-md) + (var(--first-flow-number-width) / 2));
  z-index: 3;
  width: var(--first-flow-transition-line-width);
  background: var(--first-flow-line-color);
  content: "";
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.35s;
}

.p-first-flow__item::before {
  display: none;
}

.p-first-flow__item::after {
  top: calc(50% + var(--first-flow-transition-line-start));
  height: calc(100% + var(--gap-md) - var(--first-flow-transition-line-trim));
}

.p-first-flow__item:last-child::after {
  display: none;
}

.p-first-flow__item.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.p-first-flow__item.is-inview::after {
  transform: translateX(-50%) scaleY(1);
}

.p-first-flow__number {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-family: var(--font-mincho);
  font-size: var(--first-flow-number-size);
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.p-first-flow__content {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--gap-xs);
  padding: var(--gap-md) var(--gap-lg) var(--gap-md) var(--gap-lg);
}

.p-first-flow__content::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--color-primary);
  content: "";
}

.p-first-flow__step-title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-flow__text {
  display: grid;
  gap: var(--gap-xs);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-first-flow__text p {
  margin: 0;
}

.p-first-flow__caution {
  margin: 0;
  padding: var(--gap-sm);
  border-left: calc(var(--button-focus-outline-width) * 2) solid var(--color-primary);
  background: var(--color-bg-section);
  color: var(--color-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-flow__item:nth-child(4) .p-first-flow__caution {
  background: var(--color-bg-base);
}

.p-first-purchase {
  background: var(--color-bg-base);
}

.p-first-purchase__inner {
  display: grid;
  max-width: calc(var(--first-purchase-content-max) + (var(--container-padding) * 2));
  gap: var(--gap-lg);
}

.p-first-purchase__heading {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gap-xs);
  padding-top: var(--gap-xs);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  text-align: center;
}

.p-first-purchase__en {
  position: absolute;
  top: calc(var(--gap-sm) * -1);
  left: 50%;
  z-index: 0;
  margin: 0;
  color: var(--color-bg-section);
  font-size: var(--first-purchase-heading-en-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  opacity: 0.82; /* 推測: 参考画像の薄い英字見出し。要確認 */
  transform: translateX(-50%);
}

.p-first-purchase__title,
.p-first-purchase__lead {
  position: relative;
  z-index: 1;
  margin: 0;
}

.p-first-purchase__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-purchase__lead {
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-first-purchase__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
}

.p-first-purchase-card {
  display: grid;
  overflow: hidden;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-voice-card);
}

.p-first-purchase-card__image {
  display: block;
  width: 100%;
  height: var(--first-purchase-card-image-height);
  object-fit: cover;
}

.p-first-purchase-card__body {
  display: grid;
  gap: var(--gap-xs);
  padding: var(--gap-sm);
  text-align: center;
}

.p-first-purchase-card__title {
  margin: 0;
  padding-bottom: var(--gap-xs);
  border-bottom: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-purchase-card__amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--gap-xs);
  margin: 0;
  color: var(--color-text);
  font-size: 20px;
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.p-first-purchase-card__amount-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

@media (min-width: 1024px) {
  .p-first-purchase-card__title {
    font-size: 20px;
  }

  .p-first-faq__question {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .p-first-purchase__grid {
    gap: var(--gap-sm);
  }

  .p-first-purchase-card__amount {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-xs) / 2);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
  }
}

.p-first-purchase__note {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  text-align: center;
}

.p-first-faq {
  background: var(--color-bg-base);
}

.p-first-faq__inner {
  display: grid;
  max-width: calc(var(--first-faq-content-max) + (var(--container-padding) * 2));
  gap: var(--gap-xl);
}

.p-first-faq__heading {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: var(--gap-xs);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  text-align: center;
}

.p-first-faq__en {
  position: absolute;
  top: calc(var(--gap-sm) * -1);
  left: 50%;
  z-index: 0;
  margin: 0;
  color: var(--color-bg-section);
  font-size: var(--first-faq-heading-en-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  opacity: 0.82; /* 推測: 参考画像の薄い英字見出し。要確認 */
  transform: translateX(-50%);
}

.p-first-faq__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-bottom: var(--gap-xs);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-faq__title::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--gap-lg);
  height: var(--first-strength-divider-height);
  background: var(--color-primary);
  content: "";
  transform: translateX(-50%);
}

.p-first-faq__list {
  display: grid;
  gap: var(--gap-lg);
}

.p-first-faq__item {
  display: grid;
  gap: var(--gap-sm);
}

.p-first-faq__question {
  display: grid;
  grid-template-columns: var(--first-faq-label-width) minmax(0, 1fr);
  align-items: center;
  min-height: var(--button-min-height-sp);
  margin: 0;
  padding: var(--gap-xs) var(--gap-md);
  background: var(--first-faq-question-bg);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-faq__answer {
  display: grid;
  grid-template-columns: var(--first-faq-label-width) minmax(0, 1fr);
  padding: 0 var(--gap-md);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-first-faq__label {
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-first-faq__label--answer {
  color: var(--color-gold-end);
}

.p-first-faq__answer-text {
  display: grid;
  gap: var(--gap-xs);
}

.p-first-faq__answer-text p {
  margin: 0;
}

.p-flow-nationwide {
  position: relative;
  display: grid;
  min-height: var(--flow-nationwide-min-height);
  overflow: hidden;
  background: var(--color-bg-base);
}

.p-flow-nationwide::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  height: 100%;
  background: var(--flow-nationwide-accent-bg);
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%);
  content: "";
}

.p-flow-nationwide__inner {
  position: relative;
  display: grid;
  align-items: center;
  width: 100%;
  min-height: inherit;
  max-width: var(--container-max);
}

.p-flow-nationwide__content {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: var(--flow-nationwide-content-max);
  gap: var(--gap-xl);
}

.p-flow-nationwide__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-flow-nationwide__body {
  display: grid;
  gap: var(--gap-lg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.p-flow-nationwide__body p {
  margin: 0;
}

.p-flow-nationwide__map,
.p-flow-nationwide__map-placeholder {
  position: absolute;
  top: 0;
  right: calc(var(--container-padding) * -1);
  z-index: 1;
  width: var(--flow-nationwide-map-width);
  height: 100%;
}

.p-flow-nationwide__map {
  object-fit: contain;
  object-position: right center;
}

.p-flow-nationwide__map-placeholder {
  background-image: radial-gradient(var(--flow-nationwide-dot-color) 1.4px, transparent 1.4px);
  background-position: center;
  background-size: var(--gap-xs) var(--gap-xs);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%); /* 推測: 地図画像未配置時の仮背景。要確認 */
  opacity: 0.62; /* 推測: 地図画像未配置時の仮背景濃度。要確認 */
}

.p-flow-nationwide__map-placeholder {
  background-image: url("../images/japan_bg.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
}

.p-flow-usage {
  background: var(--color-bg-base);
}

.p-flow-usage__inner {
  display: grid;
  max-width: var(--flow-usage-content-max);
  gap: var(--gap-xl);
}

.p-flow-usage__heading {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: var(--gap-xs);
  color: var(--color-primary);
  font-family: var(--font-mincho);
  text-align: center;
}

.p-flow-usage__en {
  position: absolute;
  top: calc(var(--gap-sm) * -1);
  left: 50%;
  z-index: 0;
  margin: 0;
  color: var(--color-bg-section);
  font-size: var(--first-faq-heading-en-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  opacity: 0.82; /* 推測: 参考画像の薄い英字見出し。要確認 */
  transform: translateX(-50%);
}

.p-flow-usage__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-flow-usage__title::after {
  display: block;
  width: var(--gap-lg);
  height: var(--first-strength-divider-height);
  margin: var(--gap-xs) auto 0;
  background: var(--color-primary);
  content: "";
}

.p-flow-usage__list {
  display: grid;
  gap: var(--gap-lg);
}

.p-flow-usage-step {
  display: grid;
  grid-template-columns: var(--flow-usage-number-width) minmax(0, 1fr);
  gap: var(--gap-lg);
  padding: var(--gap-xl);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.p-flow-usage-step:nth-child(odd) {
  background: var(--flow-usage-card-bg);
}

.p-flow-usage-step:nth-child(4) {
  background: var(--color-bg-section);
}

.p-flow-usage-step__number {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--gap-xs);
  color: var(--color-text);
  font-family: var(--font-mincho);
  line-height: 1;
  text-align: center;
}

.p-flow-usage-step__number::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--first-strength-divider-height);
  background: var(--flow-usage-divider-color);
  content: "";
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.35s;
}

.p-flow-usage-step.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.p-flow-usage-step:nth-child(4).is-inview {
  background: var(--color-bg-base);
}

.p-flow-usage-step.is-inview .p-flow-usage-step__number::after {
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .p-first-flow__item,
  .p-flow-usage-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .p-first-flow__item::after,
  .p-flow-usage-step__number::after {
    transform: translateX(-50%) scaleY(1) !important;
    transition: none !important;
  }

  .p-flow-usage-step__number::after {
    transform: scaleY(1) !important;
  }
}

.p-flow-usage-step__number span {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
}

.p-flow-usage-step__number strong {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
}

.p-flow-usage-step__content {
  display: grid;
  gap: var(--gap-md);
}

.p-flow-usage-step__title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-flow-usage-step__text {
  display: grid;
  gap: var(--gap-xs);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-flow-usage-step__text p {
  margin: 0;
}

.p-flow-usage-step__caution {
  position: relative;
  margin: 0;
  padding: var(--gap-md) var(--gap-lg);
  border-left: calc(var(--button-focus-outline-width) * 2) solid var(--color-primary);
  background: var(--color-bg-section);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-flow-usage-step:nth-child(3) .p-flow-usage-step__caution,
.p-flow-usage-step:nth-child(4) .p-flow-usage-step__caution {
  background: var(--color-bg-base);
}

.p-flow-usage-step:nth-child(4) .p-flow-usage-step__caution {
  background: var(--flow-usage-card-bg);
}

.p-flow-usage-step__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md) var(--gap-lg);
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  list-style: none;
}

.p-flow-usage-step__features li {
  position: relative;
  padding-left: calc(var(--gap-sm) + var(--gap-xs));
}

.p-flow-usage-step__features li::before {
  position: absolute;
  top: 0.35em;
  left: 0;
  width: var(--gap-sm);
  aspect-ratio: 1;
  border: var(--button-focus-outline-width) solid var(--flow-usage-check-color);
  border-radius: var(--button-radius);
  content: "";
}

.p-flow-usage-step__features li::after {
  position: absolute;
  top: 0.42em;
  left: 0.32em;
  width: 0.34em;
  height: 0.56em;
  border-right: var(--button-focus-outline-width) solid var(--flow-usage-check-color);
  border-bottom: var(--button-focus-outline-width) solid var(--flow-usage-check-color);
  content: "";
  transform: rotate(45deg);
}

.p-flow-usage-step__button {
  width: min(100%, 360px); /* 推測: 参考画像のCTA幅。要確認 */
}

.c-btn--kit::before {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--button-kit-icon-size);
  height: auto;
  aspect-ratio: 82 / 61;
  border: 0;
  background: currentColor;
  content: "";
  transform: none;
  mask: url("../images/cardboard.svg") center / contain no-repeat;
  -webkit-mask: url("../images/cardboard.svg") center / contain no-repeat;
}

.p-header-actions__button.c-btn--kit {
  --button-kit-icon-size: var(--gap-md);
}

.p-site-info__button.c-btn--kit {
  --button-kit-icon-size: var(--gap-md);
}

.p-reasons__button,
.p-voice__button,
.p-comparison__button,
.p-area__button,
.p-pricing__button,
.p-assessment__button,
.p-speed__button,
.p-first-case__button,
.p-flow-usage-step__button {
  width: min(100%, var(--hero-cta-width));
  min-height: calc(var(--button-min-height-pc) + var(--gap-md));
  padding: var(--gap-md) var(--gap-lg);
  font-size: var(--font-size-button);
  line-height: var(--line-height-base);
}

.p-flow-usage-step__package {
  display: grid;
  gap: var(--gap-sm);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-flow-usage-step__package p,
.p-flow-usage-step__package ul,
.p-flow-usage-step__note {
  margin: 0;
}

.p-flow-usage-step__package ul {
  display: grid;
  gap: var(--gap-xs);
  padding-left: var(--gap-md);
  font-weight: var(--font-weight-bold);
}

.p-flow-usage-step__package li::marker {
  color: var(--color-primary);
}

.p-flow-usage-step__bullets {
  display: grid;
  gap: var(--gap-xs);
  margin: 0;
  padding-left: var(--gap-md);
  list-style: disc;
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-flow-usage-step__bullets li::marker {
  color: var(--color-primary);
}

.p-flow-usage-step__note {
  color: var(--color-text);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-base);
}

.p-flow-usage-step__notes {
  display: grid;
  gap: var(--gap-xs);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-flow-usage-step__notes p {
  margin: 0;
}

.p-company-message {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-base);
}

.p-company-message::after {
  position: absolute;
  right: max(var(--container-padding), calc((100vw - var(--container-max)) / 2));
  bottom: var(--gap-xl);
  z-index: 0;
  width: var(--company-message-logo-size);
  aspect-ratio: 1;
  background: url("../images/logo_background.svg") center / contain no-repeat;
  content: "";
  opacity: 0.16; /* 推測: 参考画像のロゴ透かし濃度。要確認 */
}

.p-company-message__inner {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: var(--company-message-content-max);
  gap: var(--gap-xl);
}

.p-company-message__content {
  display: grid;
  gap: var(--gap-md);
}

.p-company-message__heading {
  position: relative;
  display: grid;
  align-items: end;
  min-height: calc(var(--company-message-heading-en-size) * 0.62);
}

.p-company-message__en {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  margin: 0;
  color: var(--color-bg-section);
  font-family: var(--font-mincho);
  font-size: var(--company-message-heading-en-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  opacity: 0.78; /* 推測: 参考画像の薄い英字見出し濃度。要確認 */
}

.p-company-message__title {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-md);
  width: fit-content;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.p-company-message__title::after {
  display: block;
  width: clamp(120px, 18vw, 240px); /* 推測: 見出し横線の長さ。要確認 */
  height: var(--first-strength-divider-height);
  background: var(--flow-usage-divider-color);
  content: "";
}

.p-company-message__body {
  display: grid;
  gap: var(--gap-md);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

.p-company-message__body p {
  margin: 0;
}

.p-company-message__figure {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: var(--gap-sm);
  margin: 0;
}

.p-company-message__figure::after {
  position: absolute;
  right: -34%;
  bottom: -32%;
  z-index: 0;
  width: clamp(320px, 40vw, 560px);
  aspect-ratio: 277 / 273;
  background: url("../images/logo_background.svg") center / contain no-repeat;
  content: "";
  opacity: 0.8;
  pointer-events: none;
  transform: translateY(30%);
}

@media (min-width: 1024px) {
  .p-company-message__figure::after {
    transform: translateY(70%);
  }
}

.p-company-message__photo,
.p-company-message__photo-placeholder {
  width: min(100%, var(--company-message-image-width));
  aspect-ratio: 0.72;
  box-shadow: var(--shadow-voice-card);
}

.p-company-message__photo {
  position: relative;
  z-index: 1;
  display: block;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

.p-company-message__photo-placeholder {
  background:
    linear-gradient(180deg, rgba(244, 246, 251, 0.08), var(--color-bg-section)),
    var(--color-bg-section); /* 推測: 代表写真未配置時の仮枠。要確認 */
}

.p-company-message__caption {
  position: relative;
  z-index: 1;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-base);
  text-align: center;
}

.p-company-info {
  background: var(--color-bg-base);
}

.p-company-info__inner {
  max-width: var(--company-info-content-max);
}

.p-company-info__list {
  display: grid;
  gap: var(--gap-sm);
  margin: 0;
}

.p-company-info__row {
  display: grid;
  gap: var(--gap-md);
}

.p-company-info__label {
  display: grid;
  place-items: center;
  min-height: var(--button-min-height-pc);
  padding: var(--gap-sm) var(--gap-md);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: center;
}

.p-company-info__value {
  display: grid;
  align-items: center;
  min-height: var(--button-min-height-pc);
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

[class*="__en"],
.p-achievement__watermark,
.p-reasons__en,
.p-voice__en,
.p-area__en,
.p-assessment-material__en,
.p-first-strengths__en,
.p-first-flow__en,
.p-first-purchase__en,
.p-first-faq__en,
.p-flow-usage__en,
.p-company-message__en {
  font-family: var(--font-en);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 767px) {
  .p-flow-nationwide {
    min-height: auto;
    padding: calc(var(--header-height) + var(--gap-xl)) 0 var(--gap-xl);
  }

  .p-flow-nationwide::before {
    width: 100%;
    opacity: 0.72; /* 推測: SP時の背景面濃度。要確認 */
  }

  .p-flow-nationwide__content {
    gap: var(--gap-lg);
  }

  .p-flow-nationwide__body {
    gap: var(--gap-md);
    font-size: 16px;
  }

  .p-flow-nationwide__map,
  .p-flow-nationwide__map-placeholder {
    right: -42%;
    width: 128%;
    opacity: 0.22; /* 推測: SP時に本文を邪魔しない地図濃度。要確認 */
  }

  .p-flow-usage-step {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--gap-lg) var(--gap-md);
  }

  .p-flow-usage-step__number {
    justify-items: start;
    border-right: 0;
    border-bottom: var(--first-strength-divider-height) solid var(--flow-usage-divider-color);
    padding-bottom: var(--gap-sm);
  }

  .p-company-message__title::after {
    width: var(--gap-xl);
  }

  .p-company-message__figure {
    order: -1;
  }

  .p-company-message__content {
    order: 0;
  }
}

@media (min-width: 768px) {
  .p-achievement__title-wrap {
    grid-template-columns:
      calc(var(--gap-xl) + var(--gap-lg))
      minmax(0, auto)
      calc(var(--gap-xl) + var(--gap-lg));
    gap: var(--gap-md);
  }

  .p-hero__proof {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  }

  .p-first-strengths__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-first-purchase__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-company-message__inner {
    grid-template-columns: minmax(0, 1fr) minmax(var(--company-message-image-width), 0.72fr);
    align-items: start;
  }

  .p-company-message__figure {
    padding-top: calc(var(--company-message-heading-en-size) * 0.45);
  }

  .p-company-info__row {
    grid-template-columns: var(--company-info-label-width) minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-lg);
  }

  .p-hero__stats {
    align-self: center;
  }

  .p-hero__badge img {
    width: auto;
  }

  .p-problem__list {
    grid-template-columns: repeat(2, minmax(0, var(--problem-item-max-width)));
    column-gap: var(--gap-lg);
    row-gap: var(--gap-md);
  }

  .p-voice-card.is-prev,
  .p-voice-card.is-next {
    opacity: 0.68; /* 推測: 左右カードを小さく控えめに見せる濃度。要確認 */
  }

  .p-voice-card {
    padding: var(--gap-lg);
  }

  .p-why__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: var(--why-content-max);
  }

  .p-comparison__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .p-comparison__cta {
    grid-column: 1 / -1;
  }

  .p-area__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  }

  .p-assessment__materials {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .p-first-intro__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .p-first-process__content {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .p-first-process__body br {
    display: none;
  }

  .p-first-case__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  }
}

@media (min-width: 1024px) {
  .p-voice-card {
    transition: none;
  }

  .p-voice-card.is-active {
    animation: tkmn-voice-fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .p-voice-card.is-prev,
  .p-voice-card.is-next {
    opacity: 0.68;
    animation: tkmn-voice-side-fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .p-hero__inner {
    min-height: calc(var(--section-padding-pc) * 4);
    align-content: center;
    padding-top: calc(var(--pc-gap-lg) + var(--header-height) - (var(--gap-sm) * 2));
    padding-bottom: var(--pc-gap-lg);
  }

  .p-hero__content {
    max-width: calc(var(--container-max) / 2);
  }

  .p-hero__voice {
    padding: var(--pc-gap-md) var(--pc-gap-lg);
  }

  .p-hero__proof {
    gap: 0;
  }

  .p-hero__cta {
    gap: var(--pc-gap-sm);
  }

  .p-reasons__list {
    gap: 80px;
  }

  .p-reasons__item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .p-reasons__item--reverse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-reasons__item--reverse .p-reasons__content {
    order: 2;
    padding-right: 0;
    padding-left: var(--gap-md);
  }

  .p-reasons__item--reverse .p-reasons__media {
    order: 1;
  }

  .p-reasons__item--reverse .p-reasons__number,
  .p-reasons__item--reverse .p-reasons__item-title,
  .p-reasons__item--reverse .p-reasons__text {
    padding-left: var(--gap-lg);
  }

  .p-reasons__content {
    position: relative;
    z-index: 2;
    align-self: stretch;
    align-content: start;
    padding-right: var(--pc-gap-lg);
  }

  .p-reasons__rule {
    width: calc(100% + var(--gap-xl));
  }

  .p-reasons__item--reverse .p-reasons__rule {
    margin-left: calc(var(--gap-xl) * -1);
  }

  .p-reasons__media img {
    aspect-ratio: 16 / 9;
  }

  .p-why__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: var(--why-content-max);
  }

  .p-first-strengths__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-first-strength-card__title {
    min-height: calc(20px * var(--line-height-base) * 3 + var(--gap-md));
  }
}

@media (max-width: 1023px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 30px;
    --font-size-h3: 22px;
    --font-size-hero-title: clamp(40px, 7vw, 56px);
    --font-size-hero-particle: clamp(28px, 5vw, 36px);
    --font-size-hero-accent: 22px;
    --font-size-hero-copy: 15px;
    --font-size-hero-lead: 22px;
    --font-size-hero-voice-body: 18px;
    --hero-image-position-y: -72px;
    --hero-proof-image-height: 96px;
    --hero-cta-icon-size: 48px;
    --hero-cta-arrow-size: 12px;
    --voice-card-side-offset: clamp(220px, 28vw, 320px);
    --page-hero-height: clamp(200px, 32vw, 280px);
  }

  html,
  body {
    overflow-x: hidden;
  }

  .l-site-header__inner {
    padding-right: var(--container-padding);
  }

  .p-hero__image {
    top: var(--hero-image-position-y);
    left: 58%;
    height: 88%;
    opacity: 0.64;
  }

  .p-hero__inner {
    padding-top: calc(var(--header-height) + var(--gap-xl));
  }

  .p-hero__content {
    width: min(100%, 560px);
    max-width: 100%;
  }

  .p-hero__proof,
  .p-hero__cta {
    width: min(100%, 680px);
  }

  .p-hero__stats img,
  .p-hero__badge img {
    max-width: 100%;
  }

  .p-voice-card.is-active {
    width: min(72%, var(--voice-card-width));
  }

  .p-assessment__materials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-why__content,
  .p-comparison__inner,
  .p-area__inner,
  .p-first-intro__inner,
  .p-first-process__content,
  .p-first-case__inner,
  .p-company-message__inner {
    gap: var(--gap-lg);
  }
}

@media (max-width: 767px) {
  .u-show-sp {
    display: block;
  }

  :root {
    --container-padding: 16px;
    --section-padding-sp: 56px;
    --header-height: 60px;
    --font-size-h1: 32px;
    --font-size-h2: 26px;
    --font-size-h3: 20px;
    --font-size-button: 15px;
    --font-size-hero-title: clamp(28px, 8.4vw, 40px);
    --font-size-hero-particle: clamp(20px, 5vw, 28px);
    --font-size-hero-accent: 20px;
    --font-size-hero-lead: 18px;
    --font-size-hero-voice-body: 17px;
    --hero-image-position-y: 0;
    --hero-sp-image-height: 100vh;
    --hero-sp-image-size: max(390px, 100vw) auto;
    --hero-sp-image-position-x: center;
    --hero-sp-image-position-y: 0;
    --hero-proof-image-height: 80px;
    --hero-cta-icon-size: 40px;
    --hero-cta-arrow-size: 10px;
    --problem-bg-image-width: 100%;
    --problem-bg-image-height: 260px;
    --achievement-frame-width: 48px;
    --achievement-number-underline-height: 8px;
    --voice-avatar-size: 128px;
    --voice-arrow-size: 40px;
    --first-flow-number-width: 56px;
    --first-flow-number-size: 32px;
    --first-flow-transition-line-width: 6px;
    --first-flow-transition-line-start: 20px;
    --first-flow-transition-line-trim: 40px;
  }

  .l-section {
    padding-block: var(--section-padding-sp);
  }

  .l-section.p-merit {
    padding-block: 20px;
  }

  .c-btn {
    width: 100%;
    min-height: var(--button-min-height-sp);
    padding: var(--gap-sm) var(--gap-md);
  }

  .p-global-nav__button {
    height: 72px;
    min-height: 72px;
    padding: 0 var(--gap-md);
  }

  .c-page-hero__overlay::before {
    clip-path: polygon(0 0, 78% 0, 62% 100%, 0% 100%);
  }

  .c-page-hero__title {
    font-size: var(--font-size-h1);
    text-align: center;
  }

  .p-global-nav__list a {
    font-size: var(--font-size-h3);
  }

  .p-contact-form-section__inner {
    max-width: 640px;
  }

  .p-estimate-intro__cards {
    grid-template-columns: 1fr;
  }

  .p-estimate-intro__card {
    padding: var(--gap-md);
  }

  .p-contact-form {
    gap: var(--gap-md);
  }

  .p-contact-form__fieldset {
    padding: var(--gap-md);
  }

  .p-contact-form__legend {
    flex-wrap: wrap;
    gap: var(--gap-xs);
  }

  .p-contact-form__grid {
    grid-template-columns: 1fr;
  }

  .p-contact-form__choices--inline {
    grid-template-columns: 1fr;
  }

  .p-thanks__actions {
    grid-template-columns: 1fr;
  }

  .l-site-header--transparent:not(.is-scrolled) {
    background: transparent;
    box-shadow: none;
  }

  .l-site-header__inner {
    padding-inline: var(--container-padding);
  }

  .p-site-branding {
    width: auto;
  }

  .p-site-branding__link {
    width: auto;
    min-height: var(--header-height);
  }

  .p-site-branding__link::after {
    content: none;
  }

  .p-site-branding__logo {
    width: 40px;
    height: auto;
  }

  .p-nav-toggle {
    --nav-toggle-line-gap: 5px;
    --nav-toggle-line-height: 1px;
    --nav-toggle-line-shift: calc(var(--nav-toggle-line-gap) + var(--nav-toggle-line-height));
    --nav-toggle-line-width: 24px;
    width: 36px;
    min-height: 36px;
  }

  .p-nav-toggle__line {
    width: var(--nav-toggle-line-width);
    height: var(--nav-toggle-line-height);
  }

  .p-hero {
    background:
      linear-gradient(180deg, transparent 0, transparent clamp(330px, 60vw, 520px), var(--color-bg-hero) clamp(330px, 60vw, 520px)),
      var(--color-bg-hero);
  }

  .p-hero::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--hero-sp-image-height);
    background-image: url("../images/mainvisual_sp.png?v=20260517111600");
    background-position: var(--hero-sp-image-position-x) var(--hero-sp-image-position-y);
    background-repeat: no-repeat;
    background-size: var(--hero-sp-image-size);
    content: "";
    pointer-events: none;
  }

  .p-hero__image {
    display: none;
  }

  .p-hero__inner {
    z-index: 1;
    gap: var(--gap-sm);
    padding-top: calc(var(--header-height) + var(--gap-md));
    padding-bottom: 20px;
  }

  .p-hero__content,
  .p-hero__proof,
  .p-hero__cta {
    width: 100%;
  }

  .p-hero__content {
    gap: var(--gap-sm);
    max-width: 100%;
  }

  .p-hero__voice {
    justify-self: start;
    width: min(100%, 410px);
    padding: var(--gap-sm) var(--gap-md);
    border-radius: 6px;
  }

  .p-hero__voice p:first-child {
    font-size: 16px;
  }

  .p-hero__title-line {
    white-space: nowrap;
  }

  .p-hero__lead {
    justify-self: start;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--gap-sm);
    padding: var(--gap-xs) var(--gap-sm);
    font-size: 16px;
    white-space: nowrap;
    text-align: center;
  }

  .p-hero__title {
    justify-items: start;
    margin-top: var(--gap-sm);
    letter-spacing: 0.03em;
    text-align: left;
  }

  .p-hero__proof {
    justify-items: center;
    margin-top: var(--gap-sm);
  }

  .p-hero__badge,
  .p-hero__stats {
    display: none;
  }

  .p-hero__stats-sp {
    display: block;
    width: min(100%, 420px);
  }

  .p-hero__badge img,
  .p-hero__stats img {
    width: auto;
    height: auto;
    max-height: var(--hero-proof-image-height);
  }

  .p-hero__cta-free {
    flex-wrap: wrap;
    width: 100%;
    padding-inline: var(--gap-lg);
    font-size: var(--font-size-h3);
  }

  .p-hero__cta-free::before,
  .p-hero__cta-free::after {
    width: var(--gap-md);
  }

  .p-hero__button {
    grid-template-columns: var(--hero-cta-icon-size) minmax(0, 1fr) var(--hero-cta-arrow-size);
    width: 100%;
    min-height: 64px;
    gap: var(--gap-sm);
    padding: var(--gap-sm);
    text-align: center;
  }

  .p-reasons__button {
    grid-template-columns: minmax(0, 1fr) var(--hero-cta-arrow-size);
  }

  .c-btn__text--desktop {
    display: none;
  }

  .c-btn__text--sp {
    display: block;
  }

  .p-hero__button .c-btn__text {
    align-self: center;
    justify-self: center;
    text-align: center;
  }

  .p-problem::before {
    background-image: url("../images/problem_dr_sp.png");
    top: 0;
    opacity: 1;
  }

  .p-problem::after {
    background:
      linear-gradient(180deg, rgba(var(--color-bg-section-rgb), 0) 0%, var(--color-bg-section) 66%),
      linear-gradient(90deg, rgba(var(--color-bg-section-rgb), 0.42) 0%, rgba(var(--color-bg-section-rgb), 0.34) 100%);
  }

  .p-problem__heading {
    width: 100%;
    padding-inline: var(--gap-xs);
  }

  .p-problem__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-problem__item {
    justify-self: stretch;
    width: 100%;
    justify-content: center;
    padding: var(--gap-sm) var(--gap-md);
    text-align: left;
  }

  .p-achievement__company {
    width: fit-content;
    white-space: normal;
  }

  .p-achievement__title-wrap {
    grid-template-columns: var(--achievement-frame-width) minmax(0, 1fr) var(--achievement-frame-width);
    gap: var(--gap-xs);
  }

  .p-reasons__list {
    gap: var(--gap-lg);
  }

  .p-reasons__media {
    order: 1;
  }

  .p-reasons__content {
    order: 2;
  }

  .p-reasons__media img {
    aspect-ratio: 16 / 9;
  }

  .p-reasons__button,
  .p-voice__button,
  .p-comparison__button,
  .p-area__button,
  .p-pricing__button,
  .p-assessment__button,
  .p-speed__button,
  .p-first-case__button,
  .p-flow-usage-step__button {
    width: 100%;
    min-height: 64px;
    padding: var(--gap-sm);
  }

  .p-voice__viewport {
    overflow: visible;
    padding-block: var(--gap-md);
  }

  .p-voice__track {
    height: var(--voice-card-height);
    min-height: var(--voice-card-height);
  }

  .p-voice-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: var(--voice-card-height);
    min-height: var(--voice-card-min-height);
    max-height: none;
  }

  .p-voice-card:not(.is-active) {
    display: grid;
  }

  .p-voice-card.is-active {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%) scale(1);
  }

  .p-voice-card.is-prev {
    opacity: 0;
    transform: translate(calc(-50% - 110%), -50%) scale(1);
  }

  .p-voice-card.is-next {
    opacity: 0;
    transform: translate(calc(-50% + 110%), -50%) scale(1);
  }

  .p-voice__arrow {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .p-voice__arrow:active {
    transform: translateY(calc(-50% + var(--button-active-translate-y)));
  }

  .p-voice__arrow--prev {
    left: calc(var(--voice-arrow-size) * -0.5);
  }

  .p-voice__arrow--next {
    right: calc(var(--voice-arrow-size) * -0.5);
  }

  .p-why__reason-line {
    flex-wrap: wrap;
    justify-content: center;
  }

  .p-why__content,
  .p-comparison__inner,
  .p-area__inner,
  .p-first-intro__inner,
  .p-first-process__content,
  .p-first-case__inner,
  .p-company-message__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-why__media,
  .p-first-intro__media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
  }

  .p-first-intro__media {
    position: static;
    max-width: 560px;
    margin-inline: auto;
  }

  .p-why__media {
    position: static;
    order: 1;
    max-width: 560px;
    margin-inline: auto;
  }

  .p-why__body {
    order: 2;
  }

  .p-why__image,
  .p-first-intro__image {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transform: none;
  }

  .p-why__image--furnace,
  .p-first-intro__image--report {
    margin-top: var(--gap-md);
  }

  .p-why__image--metal {
    z-index: 2;
  }

  .p-why__image--furnace {
    z-index: 1;
  }

  .p-comparison__media {
    max-width: 560px;
    margin-inline: auto;
  }

  .p-comparison__image--report {
    margin-top: var(--gap-md);
  }

  .p-area__cta {
    justify-items: stretch;
  }

  .p-area {
    overflow: hidden;
  }

  .p-area__inner {
    position: relative;
    overflow: visible;
    isolation: isolate;
    min-height: 520px;
  }

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

  .p-area__map {
    position: absolute;
    top: calc((var(--section-padding-sp) - 20px) * -1);
    right: calc(var(--container-padding) * -1);
    z-index: -1;
    width: clamp(150px, 48vw, 220px);
    --anim-to-opacity: 0.18;
    opacity: 0.18;
    pointer-events: none;
  }

  .p-area__map img {
    width: 100%;
  }

  .l-site-footer__inner {
    padding-block: var(--gap-lg);
  }

  .p-site-info,
  .p-site-info__content,
  .p-site-info__actions {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 420px);
    justify-self: center;
    justify-items: center;
    text-align: center;
  }

  .p-site-info__brand,
  .p-site-info__brand-main {
    justify-content: center;
  }

  .p-footer-nav__list {
    justify-content: center;
    justify-items: center;
  }

  .p-assessment__materials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-assessment__fees {
    padding: var(--gap-sm) var(--gap-md);
  }

  .p-assessment__fee-row {
    font-size: var(--font-size-h3);
  }

  .p-assessment__fee-row strong {
    font-size: var(--font-size-h1);
  }

  .p-speed__inner {
    --speed-bg-position-y: 19%;
    --speed-note-attention-gap: 16px;
    --speed-divider-message-gap: 8px;
    isolation: isolate;
  }

  .p-speed__inner::before {
    position: absolute;
    inset-block: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    opacity: 0.5;
    background: url("../images/bg_sp.png") center var(--speed-bg-position-y) / 100% auto no-repeat;
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  .p-speed__time {
    min-height: 0;
    margin-bottom: calc(var(--speed-note-attention-gap) - var(--gap-md));
    padding: var(--gap-md) 0 0;
  }

  .p-speed__time::before {
    content: none;
  }

  .p-speed__period {
    text-shadow:
      0 0 4px rgba(255, 255, 255, 1),
      0 0 8px rgba(255, 255, 255, 0.98),
      0 0 14px rgba(255, 255, 255, 0.95),
      0 0 22px rgba(255, 255, 255, 0.9),
      0 2px 5px rgba(255, 255, 255, 0.95);
  }

  .p-speed__divider {
    margin-block: 0 calc(var(--speed-divider-message-gap) - var(--gap-md));
  }

  .p-first-intro__heading {
    grid-template-columns: max-content minmax(var(--gap-xl), 1fr);
    align-items: center;
  }

  .p-first-intro__heading::after {
    width: auto;
    margin-bottom: calc(1em * 1.25);
  }

  .p-first-process__steps::before {
    left: calc(var(--gap-md) + (var(--gap-sm) / 2));
  }

  .p-first-process__step,
  .p-first-process__request {
    grid-template-columns: var(--gap-lg) minmax(0, 1fr);
  }

  .p-first-process__step {
    padding: var(--gap-sm) var(--gap-md);
  }

  .p-first-process__request strong {
    width: fit-content;
    min-width: calc(var(--gap-xl) * 2.8);
  }

  .p-first-band {
    padding-block: var(--gap-xl);
  }

  .p-first-case::before {
    left: 0;
    top: 18%;
    width: 74%;
    height: 220px;
    transform: none;
  }

  .p-first-flow__list {
    grid-auto-rows: auto;
  }

  .p-first-flow__item {
    grid-template-columns: var(--first-flow-number-width) minmax(0, 1fr);
    padding: var(--gap-sm);
  }

  .p-first-flow__item::before,
  .p-first-flow__item::after {
    left: calc(var(--gap-sm) + (var(--first-flow-number-width) / 2));
  }

  .p-first-flow__content {
    padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
  }

  .p-first-faq__question,
  .p-first-faq__answer {
    grid-template-columns: calc(var(--first-faq-label-width) - var(--gap-xs)) minmax(0, 1fr);
    padding-inline: var(--gap-sm);
  }

  .p-first-faq__question {
    font-size: var(--font-size-body);
  }

  .p-flow-usage-step {
    padding: var(--gap-md);
  }

  .p-flow-usage-step__features {
    gap: var(--gap-sm);
  }

  .p-company-message::after {
    right: var(--container-padding);
    bottom: var(--gap-lg);
    opacity: 0.1;
  }

  .p-company-message__title {
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --font-size-hero-title: clamp(40px, 7vw, 56px);
    --font-size-hero-particle: clamp(28px, 5vw, 36px);
    --font-size-hero-accent: 22px;
    --font-size-hero-copy: 15px;
    --font-size-hero-lead: 22px;
    --font-size-hero-voice-body: 18px;
    --hero-image-position-y: -72px;
    --hero-proof-image-height: 96px;
    --hero-cta-icon-size: 48px;
    --hero-cta-arrow-size: 12px;
  }

  .p-hero {
    background: var(--color-bg-hero);
  }

  .p-hero::before {
    content: none;
  }

  .p-hero__image {
    display: block;
    top: var(--hero-image-position-y);
    left: 58%;
    height: 88%;
    opacity: 0.64;
  }

  .p-hero__inner {
    gap: var(--gap-md);
    padding-top: calc(var(--header-height) + var(--gap-xl));
    padding-bottom: 20px;
  }

  .p-hero__content {
    width: min(100%, 560px);
    max-width: 100%;
  }

  .p-hero__voice {
    width: fit-content;
    padding: var(--gap-md) var(--gap-lg);
  }

  .p-hero__voice p:first-child {
    font-size: var(--font-size-hero-accent);
  }

  .p-hero__lead {
    margin-top: 0;
    padding: var(--gap-xs) var(--gap-sm);
    font-size: var(--font-size-hero-lead);
  }

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

  .p-hero__proof {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    justify-items: stretch;
    width: min(100%, 680px);
    margin-top: 0;
  }

  .p-hero__badge,
  .p-hero__stats {
    display: block;
  }

  .p-hero__stats-sp {
    display: none;
  }

  .p-hero__badge img,
  .p-hero__stats img {
    height: var(--hero-proof-image-height);
    max-height: none;
  }

  .p-hero__cta {
    width: min(100%, 680px);
  }

  .p-hero__cta-free {
    flex-wrap: nowrap;
    width: auto;
    padding-inline: calc(var(--gap-xl) + var(--gap-md));
    font-size: 20px;
  }

  .p-hero__button {
    grid-template-columns: var(--hero-cta-icon-size) minmax(0, auto) var(--hero-cta-arrow-size);
    width: min(100%, var(--hero-cta-width));
    min-height: calc(var(--button-min-height-pc) + var(--gap-md));
    gap: var(--gap-md);
    padding: var(--gap-md) var(--gap-lg);
    font-size: var(--font-size-button);
  }

  .p-reasons__button {
    grid-template-columns: minmax(0, 1fr) var(--hero-cta-arrow-size);
  }

  .p-reasons__button .c-btn__text {
    white-space: nowrap;
  }

  .p-hero__button .c-btn__text--desktop {
    display: block;
  }

  .p-hero__button .c-btn__text--sp {
    display: none;
  }

  .p-problem__title-main,
  .p-problem__title-emphasis,
  .p-achievement__company,
  .p-achievement__title,
  .p-reasons__title,
  .p-voice__title,
  .p-why__title,
  .p-comparison__title,
  .p-area__title,
  .p-pricing__title,
  .p-assessment__title,
  .p-assessment__message-title,
  .p-speed__title,
  .p-first-intro__title,
  .p-first-process__title,
  .p-first-case__title,
  .p-first-strengths__title,
  .p-first-purchase__title,
  .p-first-faq__title,
  .p-flow-usage__title,
  .p-company-message__title,
  .p-company-info__title {
    font-size: 24px;
    line-height: 1.5;
  }

  .p-problem__sub,
  .p-problem__title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
    --font-size-body: 14px;
    --font-size-h1: 30px;
    --font-size-h2: 24px;
    --font-size-h3: 19px;
    --font-size-hero-title: clamp(28px, 8.4vw, 40px);
    --font-size-hero-particle: clamp(20px, 5vw, 28px);
    --hero-cta-icon-size: 32px;
    --hero-cta-arrow-size: 9px;
    --voice-avatar-size: 112px;
    --first-flow-number-width: 44px;
    --first-flow-number-size: 28px;
  }

  .u-show-480 {
    display: block;
  }

  .c-page-hero__title {
    font-size: 20px;
  }

  .c-page-hero__title--has-sp-lines .c-page-hero__title-desktop {
    display: none;
  }

  .c-page-hero__title--has-sp-lines .c-page-hero__title-sp {
    display: block;
  }

  .p-problem__heading {
    padding-inline: 0;
  }

  .p-problem::before {
    top: 0;
    right: calc(var(--container-padding) * -1);
    width: min(72vw, 280px);
    height: 172px;
    background-position: top right;
    background-size: cover;
  }

  .p-hero__cta-free::before,
  .p-hero__cta-free::after {
    display: block;
    width: var(--gap-md);
  }

  .p-hero__cta-free {
    padding-inline: 0;
  }

  .p-thanks__panel {
    padding: var(--gap-lg) var(--gap-md);
  }

  .p-hero__voice {
    padding-inline: calc(var(--gap-md) + var(--gap-xs));
  }

  .p-hero__title {
    font-size: 34px;
    font-weight: var(--font-weight-bold);
  }

  .p-hero__button,
  .p-reasons__button,
  .p-voice__button,
  .p-comparison__button,
  .p-area__button,
  .p-pricing__button,
  .p-assessment__button,
  .p-speed__button,
  .p-first-case__button,
  .p-flow-usage-step__button {
    grid-template-columns: var(--hero-cta-icon-size) minmax(0, 1fr) var(--hero-cta-arrow-size);
    font-size: 14px;
    text-align: center;
  }

  .p-reasons__button {
    grid-template-columns: minmax(0, 1fr) var(--hero-cta-arrow-size);
  }

  .p-site-info__brand-main {
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .p-site-info__logo {
    width: 56px;
  }

  .p-footer-nav__list {
    gap: var(--gap-xs) var(--gap-sm);
  }

  .p-problem__title-main,
  .p-achievement__company,
  .p-achievement__title,
  .p-reasons__title,
  .p-voice__title,
  .p-why__title,
  .p-comparison__title,
  .p-area__title,
  .p-pricing__title,
  .p-assessment__title,
  .p-assessment__message-title,
  .p-speed__title,
  .p-first-intro__title,
  .p-first-process__title,
  .p-first-case__title,
  .p-first-strengths__title,
  .p-first-purchase__title,
  .p-first-faq__title,
  .p-flow-usage__title,
  .p-company-message__title,
  .p-company-info__title {
    font-size: 20px;
    line-height: 1.5;
  }

  .p-problem__sub,
  .p-problem__title {
    font-size: 20px;
  }

  .p-problem__item {
    justify-self: center;
    width: 100%;
  }

  .p-achievement__company {
    padding-inline: var(--gap-xs);
  }

  .p-achievement__title strong {
    font-size: 30px;
  }

  .p-first-process__body {
    text-align: center;
  }

  .p-first-band__inner p {
    font-size: 16px;
  }

  .p-first-case__title {
    text-align: left;
  }

  .p-company-info__value {
    justify-items: center;
    text-align: center;
  }

  .p-voice-card__head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .p-voice-card__name {
    justify-self: center;
    text-align: center;
  }

  .p-voice-card__name-break {
    display: block;
  }

  .p-assessment__materials,
  .p-why__media,
  .p-first-intro__media {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-why__media,
  .p-first-intro__media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-why__image--furnace,
  .p-first-intro__image--report {
    margin-top: var(--gap-sm);
  }

  .p-why__image--furnace {
    margin-top: var(--gap-md);
  }

  .p-first-intro__image--report {
    margin-top: var(--gap-md);
  }

  .p-first-flow__item {
    grid-template-columns: var(--first-flow-number-width) minmax(0, 1fr);
    padding: var(--gap-sm);
  }

  .p-first-flow__content {
    padding-left: var(--gap-sm);
  }

  .p-first-flow__item::after {
    height: calc(100% + var(--gap-md) - var(--gap-lg));
  }
}