/* ===================================================
   共通: 本文テキスト（Noto Sans JP を使用する長文の説明・description文）
   見出し・ボタン・ラベル類は --font-ja（Zen Maru Gothic）のまま
   =================================================== */

.privacy__intro,
.privacy__text,
.contact__privacy-text,
.ceo__text,
.company-table__desc,
.area__description,
.reasons__card-text,
.business__card-text,
.works__card-text,
.voice__card-text {
  font-family: var(--font-ja-sub);
}

/* ===================================================
   PAGE: TOP - hero（FV）
   =================================================== */

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

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.hero__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  padding: calc(var(--header-height-pc) + var(--space-10)) var(--space-10) var(--space-12)
    var(--container-pad-pc);
}

.hero__photo {
  aspect-ratio: 1698 / 960; /* top-fv-rectangle.png の実寸比 */
  overflow: hidden;
  border-radius: var(--radius-md);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.hero__copy-mark {
  align-self: center;
  width: 9rem;
}

.hero__copy .eyebrow {
  align-self: center;
}

.hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.3;
}

.hero__title-text {
  min-width: 0;
}

.hero__title-badge {
  padding: 0.2em;
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: 0.62em;
}

.hero__lead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.hero__lead-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.hero__lead-text {
  min-width: 0;
}

.hero__gallery {
  position: relative;
  min-height: 26rem;
}

.hero__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__banner {
  background-image: url("../images/top/top-fv-tile-pc.png");
  background-size: cover;
  background-position: center;
  padding-block: var(--space-10);
  text-align: center;
}

.hero__banner-text {
  color: var(--color-white);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.7;
}

@media (max-width: 768px) {
  /* 相談文（.hero__lead）専用: Zen Maru Gothic Medium(500)をテキスト分だけサブセット取得
     （既存の "Zen Maru Gothic" ファミリーは変更せず、他要素に影響しないよう別名で限定読み込み） */
  @font-face {
    font-family: "Zen Maru Gothic SP Lead";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/l/font?kit=o-0XIpIxzW5b-RxT-6A8jWAtCp-cGWtCOYLK1e-k0SHW1K38aKGxo37XKtZ9LuLJLTI9FRoBj5f2CwV--DA_Ex8dCfzihQ__cyhkMEtoLlGLwzbJJE4kKIop34XwQYW_I9AqdrkiEhaQ1V2n9x9i&skey=9ab5b55f58ce8049&v=v19) format("woff2");
    unicode-range: U+20, U+46, U+59, U+6f, U+72, U+75, U+3001, U+3044, U+304a, U+304f-3050, U+3053-3056,
      U+3059-305a, U+305f-3060, U+3068-3069, U+306b, U+306e-3070, U+307e, U+308a, U+3099, U+4f4f, U+56f0,
      U+76f8, U+8ac7;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__main {
    padding: 146px var(--container-pad-sp) 55px; /* Figma実測: 写真上端=ヘッダー実測下端+37px、相談文下端→3枚画像上端=55.4px */
    gap: 21px; /* Figma実測: 写真下端→シルエット上端 */
  }

  .hero__photo {
    width: 341px; /* Figma実測 */
    margin-inline: auto;
    aspect-ratio: 1023 / 561; /* top-main-sp.png の実寸比 */
    border-radius: 8px; /* Figma実測 */
  }

  .hero__copy {
    text-align: center;
    gap: 0; /* 一律gapではなく各要素のmargin-topで実測値通りに制御 */
  }

  .hero__copy-mark {
    width: 61px; /* Figma実測（高さは画像比率で自動追従） */
  }

  .hero__copy .eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Figma実測: 見出し下端→点線 */
    margin-top: 20px; /* Figma実測: シルエット下端→見出し上端 */
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 13px; /* Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium: Figma実測 */
    line-height: 1; /* Figma実測 */
    letter-spacing: normal; /* Figma実測 */
  }

  .page-top .hero__copy .eyebrow {
    font-weight: 700;
  }

  .hero__copy .eyebrow::after {
    content: "";
    width: 224px; /* Figma実測 */
    height: 3px;
    background-image: radial-gradient(circle, var(--color-accent) 1.4px, transparent 1.5px); /* 目視調整: 丸点を少し大きい真円に */
    background-repeat: repeat-x;
    background-position: left center;
    background-size: 7px 3px; /* 目視調整: 点の間隔を少し狭く */
  }

  .hero__title {
    justify-content: center;
    gap: 4px; /* Figma実測: タイトル本文と「医」バッジの間隔 */
    margin-top: 18px; /* Figma実測: 点線下端→タイトル上端 */
    font-size: 30px; /* Figma実測 */
    line-height: 1; /* Figma実測 */
  }

  .hero__title-badge {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    width: 36px; /* Figma実測 */
    height: 36px;
    padding: 0;
    background-color: transparent; /* 背景は::beforeへ分離し、文字とは独立して位置調整する */
    border-radius: 4px; /* Figma実測 */
    font-size: 30px; /* Figma実測 */
    line-height: 1;
  }

  .hero__title-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 36px;
    height: 36px;
    background-color: #6fa9d0;
    border-radius: 4px; /* Figma実測 */
    z-index: 0;
    transform: translateY(2px); /* 目視調整: 青い四角の背景だけを「医」の字面中央へ */
  }

  .hero__title-badge-text {
    display: inline-block;
    position: relative;
    z-index: 1;
    line-height: 1;
    transform: translateX(-1px); /* 「医」の字面が右へ寄って見えるための補正（青い四角・周囲の見出しには影響させない） */
  }

  .hero__lead {
    text-align: left;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px; /* Figma実測 約8.24px */
    margin-top: 7px; /* Figma実測: タイトル下端→相談文上端 */
    font-family: "Zen Maru Gothic SP Lead", var(--font-ja); /* 目視調整: 現状より1段階太いMediumを実体として反映 */
    font-size: 12px; /* Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium: Figma実測 */
    line-height: 1; /* Figma実測 */
  }

  .page-top .hero__lead {
    font-weight: 700;
  }

  .hero__lead-icon {
    flex-shrink: 0;
    width: 20.76px; /* Figma実測 */
    height: 20.76px;
    transform: translateY(2px); /* 目視調整: 相談文の天地中央へ */
  }

  .hero__gallery {
    min-height: 0;
    aspect-ratio: 3 / 1;
  }

  .hero__banner {
    background-image: linear-gradient(rgba(111, 169, 208, 0.3), rgba(111, 169, 208, 0.3)),
      url("../images/top/top-fv-tile-sp.png"); /* Figma実測: タイル画像 + accent色30%オーバーレイ */
    padding-block: 16px 28px; /* Figma実測: リード文帯 高さ122px相当 */
  }

  .hero__banner-text {
    max-width: 266px; /* Figma実測 */
    margin-inline: auto;
    font-size: 20px; /* Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium: Figma実測 */
    line-height: 1.3; /* Figma実測 */
    text-shadow: 0 0 9px rgba(63, 102, 128, 0.9); /* Figma実測 */
  }
}

@media (max-width: 360px) {
  .hero__photo {
    width: min(341px, 100%); /* 360px幅で右端が1pxはみ出すのを防止（aspect-ratio/object-fit/角丸/左寄せ位置は変更しない） */
  }

  .hero__lead {
    gap: 6px; /* 360px幅でアイコン+文言が2行に折り返すのを防止（アイコンサイズ・上下位置・中央揃えは変更しない） */
  }
}

@media (min-width: 769px) {
  .hero__main {
    padding-top: 131px; /* Figma実測: 写真上端Y=131（写真+コピー全体を上へ） */
    gap: 29px; /* 写真top短縮分(29px)をコピーグループ側で吸収し、コピー位置を維持 */
    padding-bottom: 0;
  }

  .hero__photo {
    width: 94.33%; /* Figma実測 566px（左カラム内幅600px基準、1440px時） */
    margin-inline: auto;
    border-radius: 8px; /* Figma実測（--radius-mdは他要素と共有のため個別指定） */
  }

  .hero__copy-mark {
    width: 82px; /* Figma実測 82×43.11px */
  }

  .hero__copy {
    gap: var(--space-3);
    align-items: center;
  }

  .hero__copy .eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 1.25rem; /* 20px */
  }

  .hero__copy .eyebrow::after {
    content: "";
    width: 297px;
    height: 3px;
    background-image: radial-gradient(circle, var(--color-accent) 1.2px, transparent 1.3px);
    background-repeat: repeat-x;
    background-position: left center;
    background-size: 8px 3px;
  }

  .hero__title {
    justify-content: center;
    font-size: 2.875rem; /* 46px */
  }

  .hero__title-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 53px; /* Figma実測 枠53×53px */
    height: 53px;
    padding: 0;
    border-radius: 4px;
    font-size: 2.875rem; /* Figma実測 46px */
    line-height: 1;
  }

  .hero__title-badge-text {
    display: inline-block;
    transform: translate(-1px, -2.5px); /* フォント字面の重心補正（可視インク実測ベース） */
  }

  .hero__lead {
    justify-content: center;
    text-align: center;
    font-size: 1.1875rem; /* 19px */
  }

  .hero__banner {
    padding-block: 23px 24px; /* Figma実測: FV下エリア上下余白 */
  }

  .hero__grid,
  .hero__banner {
    max-width: 1440px;
    margin-inline: auto;
  }

  .hero__banner {
    max-width: none; /* 背景をビューポート幅いっぱいに広げる */
  }

  .hero__banner-text {
    max-width: 1440px;
    margin-inline: auto; /* 背景は全幅、テキストのみ中央1440px幅に収める */
    font-size: 2.25rem; /* Figma実測 36px */
    line-height: 1.4; /* Figma実測 */
    text-shadow: 0 0 9px rgba(63, 102, 128, 0.9); /* Figma実測: 柔らかい影 */
  }
}

/* ===================================================
   PAGE: TOP - trouble（こんなお困りごとはありませんか？）
   =================================================== */

.trouble {
  background-color: var(--color-bg-cream);
  padding-block: var(--space-16);
}

.trouble__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}

.trouble__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-navy);
}

.trouble__heading-icon {
  width: 2.3125rem;
  height: auto;
}

.trouble__heading-text {
  background-color: var(--color-highlight);
  color: inherit;
  padding: 0.125rem 0.25rem;
}

@media (max-width: 768px) {
  .trouble__heading-text {
    position: relative;
    z-index: 0;
    background: none; /* テキスト幅依存のlinear-gradientをやめ、疑似要素へ分離 */
    padding: 0;
  }

  .trouble__heading-text::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -2px; /* Figma実測(node 2036:526): テキスト枠より2px左 */
    right: -3px; /* Figma実測: テキスト枠より3px右（帯幅346px・テキスト幅341pxの差分） */
    bottom: -5px; /* Figma実測: テキスト枠下端より5px下 */
    height: 18px; /* Figma実測 */
    background-color: var(--color-highlight);
  }
}

.trouble__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: 75rem;
}

.trouble__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgb(33 52 89 / 8%);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
}

.trouble__item-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.trouble__conclusion {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-8);
}

.trouble__bubble {
  position: relative;
  z-index: 1;
  padding: var(--space-6) var(--space-10);
  background-color: var(--color-bubble);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.trouble__emphasis {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.trouble__emphasis::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  width: 100%;
  height: 3px;
  background: radial-gradient(circle, #fff 1.2px, transparent 1.3px) center / 33.333% 100% repeat-x;
  pointer-events: none;
}

@media (max-width: 768px) {
  .trouble__emphasis::before {
    top: -3px; /* 目視調整: 傍点だけを下へ6px */
  }
}

@media (min-width: 769px) {
  .trouble__emphasis::before {
    top: -1px; /* 目視調整: 傍点だけを下へ8px */
  }
}

.trouble__bubble::before,
.trouble__bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: var(--color-bubble);
  border-radius: 50%;
}

.trouble__bubble::before {
  right: -2rem;
  width: 1rem;
  height: 1rem;
}

.trouble__bubble::after {
  right: -3rem;
  width: 0.5rem;
  height: 0.5rem;
}

.trouble__figure img {
  width: 12rem;
  height: auto;
}

@media (max-width: 768px) {
  .trouble {
    padding-top: 70px; /* Figma実測: 背景上端→見出し上端 */
    padding-bottom: 0; /* イラスト下端がセクション下端に一致するため付加パディング無し */
  }

  .page-top .trouble {
    background-color: #fefbf5; /* Figma実測（PC同値） */
    overflow-x: clip; /* .trouble__bubble疑似要素のはみ出しを画面端でクリップ（意匠・位置は維持） */
  }

  .trouble__inner {
    gap: 0; /* 一律gapではなく各要素のmargin-topで実測値通りに制御 */
  }

  .trouble__heading {
    position: relative; /* 3本線アイコンのabsolute配置の基準 */
    gap: var(--space-2);
    color: var(--color-accent); /* Figma実測 #6FA9D0 */
    font-size: 20px; /* Figma実測 */
    text-align: center;
  }

  .trouble__heading-icon {
    position: absolute; /* テキストの中央計算(flex)から外す。.trouble__heading(position:relative)を基準にテキスト枠と同じ親要素内で相対配置 */
    left: -10px; /* 360px基準の相対位置(旧360px限定transform)を375px/390pxにも統一適用 */
    top: -6px; /* Figma実測: 見出しテキスト枠上端より6px上 */
    width: 14px; /* Figma実測 */
    height: 15px;
  }

  .trouble__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px; /* Figma実測 */
    row-gap: 10px; /* Figma実測 */
    width: min(340px, 100%); /* Figma実測340px。375px等でも左右にはみ出さない */
    max-width: none;
    margin-top: 30px; /* Figma実測: 見出し下端→1件目カード */
    margin-inline: auto;
  }

  .trouble__item:nth-child(1),
  .trouble__item:nth-child(2),
  .trouble__item:nth-child(3),
  .trouble__item:nth-child(8),
  .trouble__item:nth-child(9) {
    grid-column: 1 / -1;
  }

  .trouble__item {
    height: 43px; /* Figma実測 */
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-inline: 8px; /* 2列カードでテキストが折り返さないよう確保 */
    padding-block: 0;
    font-size: 12px; /* Figma実測 */
    font-weight: 700; /* 目視調整: Zen Maru Gothic Bold */
    line-height: 1.5; /* Figma実測 */
    color: #000; /* Figma実測 */
    box-shadow: 4px 2px 7px rgba(232, 225, 207, 0.6); /* Figma実測（PC同値） */
  }

  .trouble__item-icon {
    flex-shrink: 0;
    object-fit: contain;
  }

  .page-top .trouble__item:nth-child(2) .trouble__item-icon {
    width: 30px; /* Figma実測 約30.4×21.7 */
    height: auto;
  }
  .page-top .trouble__item:nth-child(3) .trouble__item-icon {
    width: 26px; /* Figma実測 約26×25.4 */
    height: auto;
  }
  .page-top .trouble__item:nth-child(4) .trouble__item-icon {
    width: 34px; /* Figma実測 約34.2×28.8 */
    height: auto;
  }
  .page-top .trouble__item:nth-child(5) .trouble__item-icon {
    width: 28px; /* Figma実測 約28×26 */
    height: auto;
  }
  .page-top .trouble__item:nth-child(6) .trouble__item-icon {
    width: 30px; /* Figma実測 約30×24 */
    height: auto;
  }
  .page-top .trouble__item:nth-child(7) .trouble__item-icon {
    width: 26px; /* Figma実測 約26.2×28.8 */
    height: auto;
  }
  .page-top .trouble__item:nth-child(9) {
    gap: 7px; /* Figma実測 約6.5px */
  }
  .page-top .trouble__item:nth-child(9) .trouble__item-icon {
    width: 25px; /* Figma実測 25×25.71（top-trouble-cost.pngを維持、非表示にしない） */
    height: auto;
  }

  .trouble__conclusion {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%; /* .trouble__bubbleの%指定が循環参照にならないよう明示 */
    margin-top: 42px; /* Figma実測: カード一覧下端→CTA */
  }

  .trouble__bubble {
    box-sizing: border-box;
    width: min(340px, 100%); /* Figma実測340px */
    height: 46px; /* Figma実測 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 17px; /* Figma実測 */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.12); /* Figma実測 */
  }

  .page-top .trouble__bubble::before {
    right: auto;
    left: 28px; /* Figma実測: 大きい丸（CTAに近い側） */
    bottom: -25px;
    width: 16px;
    height: 16px;
  }

  .page-top .trouble__bubble::after {
    right: auto;
    left: 42px; /* Figma実測: 小さい丸（大きい丸の下・やや右） */
    bottom: -36px;
    width: 9px;
    height: 9px;
  }

  .trouble__figure {
    margin-top: 20px; /* Figma実測: CTA下端→イラスト上端 */
  }

  .trouble__figure img {
    width: 266px; /* Figma実測 265.74 */
    max-width: 100%; /* 375px等でコンテナからはみ出さない */
    height: auto;
    margin-inline: auto;
  }
}

@media (max-width: 380px) {
  .trouble__heading {
    font-size: 19px; /* 375px等の狭い幅で見出しが2行に折り返すのを防ぐ最小限の調整 */
  }
}

@media (max-width: 360px) {
  .trouble__item:nth-child(6) {
    padding-inline: 4px; /* 「和室を洋室にしたい」のみ360pxで2行に折り返すため縮小（他の項目には影響させない） */
  }

  .trouble__item:nth-child(6) .trouble__item-text {
    white-space: nowrap;
  }

  .trouble__item:nth-child(7) {
    padding-inline: 6px; /* 「給湯器が急に壊れた」のみ360pxで2行に折り返すため縮小（他の項目には影響させない） */
  }
}

@media (min-width: 769px) {
  .page-top .trouble {
    background-color: #fefbf5; /* Figma実測（--color-bg-creamとは別値） */
  }

  .page-top .trouble__inner {
    align-items: stretch; /* 見出し/一覧/下段それぞれの内部justify-contentを効かせるため */
  }

  .page-top .trouble__heading {
    justify-content: center; /* 中央位置を維持 */
    align-items: flex-start; /* 3本線装飾を見出し文字の左上寄りに */
    gap: 1rem; /* 見出しに近づけすぎないよう間隔を確保 */
    color: var(--color-accent); /* Figma実測 #6fa9d0（--color-accentと同値） */
    font-size: 1.875rem; /* Figma実測 30px */
  }

  .page-top .trouble__heading-icon {
    transform: translate(13px, -18px); /* カンプに合わせて右上へ（目視調整: 右へ3px・上へ6px追加、レイアウトに影響しない見た目上の移動のみ） */
  }

  .page-top .trouble__heading-text {
    position: relative;
    z-index: 0;
    background: none; /* 文字全体を覆う塗りつぶしをやめる */
    padding-inline: 0;
  }

  .page-top .trouble__heading-text::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -6px;
    right: -6px;
    bottom: 6px; /* Figma実測: 文字下部寄りに配置 */
    height: 18px; /* Figma実測 */
    background-color: #fff4b5; /* Figma実測 */
  }

  .page-top .trouble__list {
    justify-content: flex-start; /* 中央寄せを解除 */
    margin-left: 52px; /* Figma実測x=132に合わせる（コンテナ左端80pxからの差分） */
    gap: 18px 10px; /* Figma実測: 縦18px 横9-10px */
  }

  .page-top .trouble__item {
    height: 59px; /* Figma実測 */
    padding-block: 0;
    padding-inline: 12px; /* Figma実測の各項目幅内でテキストが折り返さないよう調整 */
    justify-content: flex-start;
    font-size: 1.25rem; /* Figma実測 20px */
    font-weight: 500; /* Figma実測 Medium */
    box-shadow: 4px 2px 7px rgba(232, 225, 207, 0.6); /* Figma実測 */
  }

  .page-top .trouble__item:nth-child(2) { gap: 15px; } /* Figma実測: アイコン-文字間 */
  .page-top .trouble__item:nth-child(3) { gap: 8px; }
  .page-top .trouble__item:nth-child(4) { gap: 15px; }
  .page-top .trouble__item:nth-child(5) { gap: 15px; }
  .page-top .trouble__item:nth-child(6) { gap: 12px; }
  .page-top .trouble__item:nth-child(7) { gap: 22px; }
  .page-top .trouble__item:nth-child(9) { gap: 15px; }

  .page-top .trouble__list > .trouble__item:nth-child(1) {
    width: 413px;
    flex-shrink: 0;
  }
  .page-top .trouble__list > .trouble__item:nth-child(2) {
    width: 373px;
    flex-shrink: 0;
  }
  .page-top .trouble__list > .trouble__item:nth-child(3) {
    width: 370px;
    flex-shrink: 0;
  }
  .page-top .trouble__list > .trouble__item:nth-child(4) {
    width: 274px;
    flex-shrink: 0;
  }
  .page-top .trouble__list > .trouble__item:nth-child(5) {
    width: 273px;
    flex-shrink: 0;
  }
  .page-top .trouble__list > .trouble__item:nth-child(6) {
    width: 294px;
    flex-shrink: 0;
  }
  .page-top .trouble__list > .trouble__item:nth-child(7) {
    width: 305px;
    flex-shrink: 0;
  }
  .page-top .trouble__list > .trouble__item:nth-child(8) {
    width: 438px;
    flex-shrink: 0;
  }
  .page-top .trouble__list > .trouble__item:nth-child(9) {
    width: 348px;
    flex-shrink: 0;
  }

  .page-top .trouble__item:nth-child(2) .trouble__item-icon {
    width: 42px;
    height: 30px;
  }
  .page-top .trouble__item:nth-child(3) .trouble__item-icon {
    width: 36px;
    height: 35px;
  }
  .page-top .trouble__item:nth-child(4) .trouble__item-icon {
    width: 47px;
    height: 40px;
  }
  .page-top .trouble__item:nth-child(5) .trouble__item-icon {
    width: 42px;
    height: 40px;
  }
  .page-top .trouble__item:nth-child(6) .trouble__item-icon {
    width: 49px;
    height: 39px;
  }
  .page-top .trouble__item:nth-child(7) .trouble__item-icon {
    width: 36px;
    height: 40px;
  }
  .page-top .trouble__item:nth-child(9) .trouble__item-icon {
    width: 39px;
    height: 40px;
  }

  .page-top .trouble__conclusion {
    justify-content: flex-end; /* 中央寄せを解除し右側へ */
    padding-right: 81px; /* Figma実測: イラスト右端とコンテナ右端の差分 */
    gap: 36px; /* Figma実測: 吹き出し右端からイラスト左端まで約35.8px */
    margin-top: -61px; /* Figma実測: イラストY=1204へ引き上げ（ピル一覧の位置は不変） */
  }

  .page-top .trouble__bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start; /* イラストの下端基準ではなく独立して位置調整 */
    margin-top: 60px; /* カンプに合わせてさらに少し上へ */
    width: 525px; /* Figma実測 524.72px */
    height: 76.5px;
    padding: 0;
    font-size: 1.75rem; /* Figma実測 28px */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.12); /* Figma実測 */
    border-radius: 52px; /* Figma実測 */
  }

  .page-top .trouble__figure img {
    width: 266px; /* Figma実測 265.74px（高さはaspect比で約260pxに追従） */
    height: auto;
  }

  .page-top .trouble__bubble::before {
    right: -14px;
    bottom: -8px;
    width: 16px;
    height: 16px;
  }

  .page-top .trouble__bubble::after {
    right: -28px;
    bottom: -18px;
    width: 9px;
    height: 9px;
  }
}

/* ===================================================
   PAGE: TOP - area（地域を知る私たちだからできるご提案）
   =================================================== */

.area {
  padding-block: var(--space-16);
}

.area__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.area__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy);
}

.area__heading-icon {
  width: 2.5rem;
  height: auto;
}

.area__heading-text {
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-navy);
}

.area__coverage {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.area__coverage-icon {
  width: 1.25rem;
  height: auto;
}

.area__coverage-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
}

.area__coverage-list li:not(:last-child)::after {
  content: "・";
}

.area__content {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  max-width: 75rem;
}

.area__map img {
  width: 100%;
  height: auto;
}

.area__description {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--color-navy);
}

@media (max-width: 768px) {
  .area {
    padding-top: 70px; /* Figma実測: セクション上端→見出し上端 */
    padding-bottom: 39px; /* Figma実測: 本文下端→セクション下端 */
  }

  .area__inner {
    gap: 0; /* 一律gapではなく各要素のmargin-topで実測値通りに制御 */
  }

  .area__heading {
    justify-content: center;
    width: min(340px, 100%); /* Figma実測340px。375px等でも左右にはみ出さない */
    margin-inline: auto;
    gap: 3px; /* Figma実測 */
    padding-bottom: 0;
    border-bottom: 1px solid var(--color-navy); /* 390px/375px/360pxで同じ細さに統一（旧2pxはSP版としては太すぎたため） */
    font-size: 17px; /* Figma実測 */
  }

  .area__heading-icon {
    flex-shrink: 0;
    width: 1.75rem; /* Figma実測とほぼ一致のため維持 */
    transform: translateX(-10px); /* 目視調整: アイコン左端を下線左端に揃える（文字・下線は動かさない） */
  }

  .area__heading-text {
    padding-bottom: 0;
    border-bottom: none; /* 下線は親要素(.area__heading)側へ移動 */
  }

  .area__coverage {
    gap: 5px; /* Figma実測 */
    margin-top: 27px; /* Figma実測: 見出し下端→所在地上端 */
  }

  .area__coverage-icon {
    flex-shrink: 0;
    width: 12px; /* Figma実測 約12×18px（元画像比率20:30と一致） */
  }

  .area__coverage-list {
    font-size: 13px; /* Figma実測 */
    font-weight: 400; /* Figma実測 */
    line-height: 1; /* Figma実測 */
    text-align: center;
  }

  .area__coverage-list li:nth-last-child(2)::after {
    content: "、"; /* Figma実測: 「三朝町」の後だけ読点（PC版と同じ考え方） */
  }

  .area__content {
    grid-template-columns: 1fr;
    width: min(340px, 100%); /* Figma実測340px。375px等でも左右にはみ出さない */
    margin-inline: auto;
    margin-top: 46px; /* Figma実測: 所在地下端→地図上端 */
    gap: 46px; /* Figma実測: 地図下端→本文上端 */
  }

  .area__description {
    font-size: 1rem;
    line-height: 1.8;
  }
}

@media (max-width: 380px) {
  .area__heading-icon {
    transform: translateX(-7.5px); /* 目視調整: 375px幅では見出し幅が可変のためアイコン左端の補正量が異なる */
  }
}

@media (max-width: 360px) {
  .area__heading {
    border-bottom-width: 1px; /* 下線を細く */
  }

  .area__heading-icon {
    transform: translateX(-7.5px) translateY(1px); /* アイコン下端を下線の下端に揃える（サイズ・左端位置は変更しない） */
  }

  .area__coverage-list {
    font-size: 12px; /* 360px幅で「倉吉市」だけ2行目に落ちるのを防止（アイコンサイズ・上下位置は変更しない） */
  }
}

@media (min-width: 769px) {
  .page-top .area__heading {
    height: 58px; /* border-box: テキスト由来の行高(48)+padding-bottom(8)+border(2)を固定し、アイコン拡大時も下線位置が動かないようにする */
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-navy); /* Figma実測: アイコン+テキスト全体に連続する下線（線幅563pxはテキスト幅530pxより長い） */
    font-size: 30px; /* Figma実測 */
  }

  .page-top .area__heading-text {
    padding-bottom: 0;
    border-bottom: none; /* 下線は親要素(.area__heading)側へ移動 */
  }

  .page-top .area__heading-icon {
    width: 50px; /* Figma実測: 見出し文字より少し高く見えるサイズへ拡大（比率は height:auto で維持） */
    transform: translateY(7.5px); /* アイコン下端を下線下端に揃える（サイズ変更に伴い再計算） */
  }

  .page-top .area__coverage-list {
    font-size: 24px; /* Figma実測 */
    font-weight: 400; /* Figma実測: Regular */
  }

  .page-top .area__coverage-list li:nth-last-child(2)::after {
    content: "、"; /* Figma実測: 最後の区切りのみ読点 */
  }

  .page-top .area__content {
    max-width: 1143px; /* Figma実測 */
    grid-template-columns: 683fr 421fr; /* Figma実測比率（地図683px:説明文421px） */
  }

  .page-top .area__description {
    font-size: 20px; /* Figma実測 */
    line-height: 2; /* Figma実測 */
    transform: translateY(-32px); /* Figma実測: 行内でのテキスト開始位置(地図行top+54px相当)に合わせて上へ移動。横位置・幅・gapは変更しない */
  }
}

/* ===================================================
   PAGE: TOP - reasons（For Youが選ばれる3つの理由）
   =================================================== */

.reasons {
  background-color: var(--color-bg-cream);
  padding-block: var(--space-16);
}

.reasons__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.reasons__heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy);
}

.reasons__heading-number {
  color: var(--color-accent);
  font-size: 1.5em;
}

.reasons__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  width: 100%;
  max-width: 75rem;
}

.reasons__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6) var(--space-8);
  background-color: var(--color-reason-1-soft);
  border-radius: var(--radius-md);
  text-align: center;
}

.reasons__card:nth-child(2) {
  background-color: var(--color-reason-2-soft);
}

.reasons__card:nth-child(3) {
  background-color: var(--color-reason-3-soft);
}

.reasons__card-badge {
  position: absolute;
  top: 0;
  left: var(--space-6);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--color-reason-1);
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 700;
}

.reasons__card:nth-child(2) .reasons__card-badge {
  background-color: var(--color-reason-2);
}

.reasons__card:nth-child(3) .reasons__card-badge {
  background-color: var(--color-reason-3);
}

.reasons__card-icon {
  width: 8rem;
  height: auto;
}

.reasons__card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-navy);
}

.reasons__card-text {
  align-self: stretch;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-navy);
  text-align: left;
}

@media (max-width: 768px) {
  .page-top .reasons {
    background-color: #fefbf5; /* Figma実測 */
    padding-top: 70px; /* Figma実測 */
    padding-bottom: 81px; /* Figma実測 */
  }

  .reasons__inner {
    gap: 0; /* 一律gapではなく各要素のmargin-topで実測値通りに制御 */
  }

  .reasons__heading {
    width: min(340px, 100%); /* Figma実測340px */
    margin-inline: auto;
    font-size: 24px; /* Figma実測 */
    font-weight: 700;
    line-height: 53px; /* Figma実測 */
    color: #205287; /* Figma実測 */
    text-align: center;
  }

  .reasons__heading-number {
    position: relative; /* leftで左右のみ移動（inline要素はtransform対象外のためleftを使用） */
    left: -4px; /* 目視調整: 左右の空きを揃えるため左へ移動（上下位置は変更しない） */
    font-size: 40px; /* Figma実測 */
    font-weight: 700;
    line-height: 53px; /* Figma実測（本文と共通） */
    color: #6fa9d0; /* Figma実測 */
  }

  .reasons__list {
    grid-template-columns: 1fr;
    gap: 46px; /* 見た目の余白20px + バッジ上方はみ出し26px */
    width: min(337px, 100%); /* Figma実測337px。375px等でも左右にはみ出さない */
    max-width: none;
    margin-inline: auto;
    margin-top: 72px; /* Figma実測: 見出し下端→カード背景上端 */
  }

  .reasons__card {
    gap: 0; /* 一律gapではなく各要素のmargin-topで実測値通りに制御 */
    box-sizing: border-box;
    width: 100%;
    height: 312px; /* Figma実測 */
    padding-top: 20px; /* Figma実測: 01/02のカード上端→イラスト上端 */
    padding-inline: 16px;
    padding-bottom: 20px; /* Figma実測 */
    border-radius: 12px; /* Figma実測 */
    overflow: visible;
  }

  .reasons__card:nth-child(3) {
    padding-top: 45px; /* Figma実測: 03はイラスト開始位置が他より低い */
  }

  .page-top .reasons__card:nth-child(1) {
    background-color: #eff3f8; /* Figma実測 */
  }

  .page-top .reasons__card:nth-child(2) {
    background-color: #f3f6ec; /* Figma実測 */
  }

  .page-top .reasons__card:nth-child(3) {
    background-color: #fcf6e7; /* Figma実測 */
  }

  .reasons__card-badge {
    top: -26px; /* Figma実測 */
    left: -3px; /* Figma実測 */
    transform: none; /* 旧: top:0 + translateY(-50%)による50%位置を解除 */
    display: grid;
    place-items: center;
    width: 80px; /* Figma実測 */
    height: 82px; /* Figma実測 */
    font-family: "Poppins", sans-serif; /* Figma実測 */
    font-size: 40px; /* Figma実測 */
    font-weight: 600; /* Figma実測: SemiBold */
    line-height: 1;
  }

  .reasons__card:nth-child(1) .reasons__card-icon {
    width: 126.3px; /* Figma実測 */
  }

  .reasons__card:nth-child(2) .reasons__card-icon {
    width: 135.6px; /* Figma実測 */
  }

  .reasons__card:nth-child(3) .reasons__card-icon {
    width: 112.1px; /* Figma実測 */
  }

  .reasons__card-title {
    margin-top: 6px; /* Figma実測: 01/02共通のイラスト下端→タイトル */
    max-width: 308px; /* Figma実測: 01 */
    font-size: 20px; /* Figma実測 */
    font-weight: 600; /* Figma実測: SemiBold */
    line-height: 1.6; /* Figma実測 */
    color: #21355a; /* Figma実測 */
  }

  .reasons__card:nth-child(2) .reasons__card-title {
    max-width: 317px; /* Figma実測 */
  }

  .reasons__card:nth-child(3) .reasons__card-title {
    margin-top: 12px; /* Figma実測: 03のみ間隔が広い */
    max-width: 246px; /* Figma実測 */
  }

  .reasons__card-text {
    align-self: center; /* stretch解除。文字はtext-align:leftのまま、塊としては中央配置 */
    margin-top: 11px; /* Figma実測: タイトル下端→本文上端の共通値 */
    max-width: 300px; /* Figma実測 */
    font-size: 14px; /* Figma実測 */
    font-weight: 400;
    line-height: 1.6; /* Figma実測 */
    color: #000; /* Figma実測 */
  }
}

@media (max-width: 360px) {
  .reasons__heading {
    letter-spacing: -0.4px; /* 360px幅で末尾の「由」だけ2行目に落ちるのを防止（フォントサイズ/行高/中央揃えは変更しない） */
  }

  .reasons__list > li:nth-child(1) .reasons__card-title {
    letter-spacing: -0.8px; /* 360px幅で1枚目タイトルの1行目が2行に折り返すのを防止（フォントサイズ・改行位置は変更しない） */
  }
}

@media (min-width: 769px) {
  .page-top .reasons__inner {
    gap: 60px; /* Figma実測: 見出し下端〜カード上端 */
  }

  .page-top .reasons__heading {
    font-size: 40px; /* Figma実測 */
    font-weight: 700;
    line-height: 53px; /* Figma実測 */
    color: #205287; /* Figma実測 */
    text-align: center;
  }

  .page-top .reasons__heading-number {
    font-size: 60px; /* Figma実測 */
    line-height: 53px; /* Figma実測（本文と共通） */
    color: #6fa9d0; /* Figma実測 */
    vertical-align: 0; /* 「3」が浮いて見える見た目を補正 */
  }

  .page-top .reasons__list {
    max-width: 1175px; /* Figma実測: カード幅約379pxを維持したままgapを縮小するため調整 */
    gap: 19px; /* Figma実測 */
  }

  .page-top .reasons__card {
    gap: 13px; /* Figma実測: タイトル-本文間の間隔を基準 */
    padding: 23px 20px 24px; /* Figma実測: 上23px・左右20px・下24px */
    border-radius: 12px; /* Figma実測 */
  }

  .page-top .reasons__card:nth-child(2) {
    background-color: #f3f6ec; /* Figma実測 */
  }

  .page-top .reasons__card-badge {
    top: -28.4px; /* Figma実測: 円の約31%がカード上側にはみ出す位置 */
    left: -5px; /* Figma実測: カード左端よりわずかに外側 */
    transform: none; /* 旧: top:0+translateY(-50%)による50/50配置を解除 */
    width: 90px; /* Figma実測 */
    height: 93px; /* Figma実測 */
    font-size: 50px; /* Figma実測 */
    font-weight: 600; /* Figma実測: Poppins SemiBold */
    font-family: "Poppins", sans-serif; /* Figma実測 */
  }

  .page-top .reasons__card:nth-child(1) .reasons__card-icon {
    width: 142px; /* Figma実測 */
  }

  .page-top .reasons__card:nth-child(2) .reasons__card-icon {
    width: 154.5px; /* Figma実測 */
  }

  .page-top .reasons__card:nth-child(3) .reasons__card-icon {
    width: 126px; /* Figma実測 */
  }

  .page-top .reasons__card:nth-child(3) .reasons__card-title {
    margin-top: 12px; /* 03のイラストが他より低いため、タイトル行の高さを他カードと揃える */
  }

  .page-top .reasons__card-title {
    font-size: 22px; /* Figma実測 */
    font-weight: 600; /* Figma実測 */
    line-height: 1.6; /* Figma実測 */
  }

  .page-top .reasons__card-text {
    font-size: 16px; /* Figma実測 */
    font-weight: 400;
    line-height: 1.6; /* Figma実測 */
  }
}

/* ===================================================
   PAGE: TOP - business（事業内容）
   =================================================== */

.business {
  padding-block: var(--space-16);
}

.business__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}

.business__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  background-color: var(--color-bubble);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: 1.75rem;
  font-weight: 700;
}

.business__banner-icon {
  width: 2.5rem;
  height: auto;
}

.business__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  width: 100%;
}

.business__card-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.business__card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 9;
  object-fit: cover;
}

.business__card-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-4) var(--space-4) var(--space-6);
  text-align: center;
}

.business__card-title {
  margin-bottom: var(--space-2);
  color: var(--color-white);
  font-size: 1.1875rem;
  font-weight: 700;
}

.business__card-text {
  color: var(--color-white);
  font-size: 0.875rem;
  line-height: 1.6;
}

.business__button {
  align-self: flex-end;
}

@media (max-width: 768px) {
  .page-top .business {
    background-color: #fffffb; /* Figma実測 */
    padding-top: 67px; /* Figma実測: セクション上端→見出し帯上端 */
    padding-bottom: 73px; /* Figma実測: ボタン下端→セクション下端 */
  }

  .business__inner {
    gap: 0; /* 一律gapではなく各要素のmargin-topで実測値通りに制御 */
  }

  .business__banner {
    width: min(340px, calc(100% - 50px)); /* Figma実測340px */
    height: 53px; /* Figma実測 */
    box-sizing: border-box;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Figma実測 */
    padding: 0;
    border-radius: 12px; /* Figma実測 */
    font-size: 1.25rem;
  }

  .business__banner-icon {
    flex-shrink: 0;
    width: 29px; /* Figma実測 */
    height: auto;
  }

  .business__banner-text {
    font-size: 26px; /* Figma実測 */
    font-weight: 700;
    line-height: 1; /* Figma実測 */
  }

  .business__list {
    grid-template-columns: 1fr;
    gap: 18px; /* Figma実測: カード間gap */
    width: min(342px, 100%); /* Figma実測342px。375px等でも左右にはみ出さない */
    margin-inline: auto;
    margin-top: 39px; /* Figma実測: 見出し帯下端→1枚目カード上端 */
  }

  .business__card-figure {
    border-radius: 8px; /* Figma実測 */
    box-sizing: border-box;
  }

  .business__card-caption {
    box-sizing: border-box;
    height: 94.4px; /* Figma実測: 青帯相当領域 */
    padding: 0 var(--space-4);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px; /* 目視調整: 現在値3px+4px */
  }

  .business__card-title {
    margin-bottom: 0;
    font-size: 20px; /* Figma実測 */
    font-weight: 700;
    line-height: 1; /* Figma実測 */
    white-space: nowrap;
  }

  .business__card-text {
    font-size: 14px; /* Figma実測 */
    font-weight: 500;
    line-height: 1.5; /* Figma実測 */
  }

  .page-top .business__card-text {
    margin-top: 2px; /* 目視調整: 本文だけをさらに2px下へ（累計） */
  }

  .business__button {
    margin-top: 36px; /* Figma実測: 6枚目カード下端→ボタン上端 */
  }

  .page-top .business__button {
    width: 261px; /* Figma実測 */
    max-width: calc(100% - 50px);
    height: 52px; /* Figma実測 */
    min-height: 0;
    box-sizing: border-box;
    margin-inline: auto;
    position: relative;
    background-color: #205287; /* Figma実測 */
    border-radius: 44px; /* Figma実測 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-top .business__button .btn__text {
    font-size: 20px; /* Figma実測 */
    font-weight: 700;
    line-height: 1; /* Figma実測 */
  }

  .page-top .business__button .btn__dot {
    position: absolute;
    top: 50%;
    right: 24px; /* Figma実測 */
    transform: translateY(-50%);
    width: 9px; /* Figma実測 */
    height: 9px; /* Figma実測 */
    background-color: #fff; /* Figma実測 */
  }
}

@media (max-width: 360px) {
  .business__card-title,
  .business__card-text {
    transform: translateY(2px); /* 6カード共通の光学補正: justify-content:centerによる構造上の中央揃えは維持したまま、テキストグループ全体を2px下へ（gap・水平位置・青帯/画像は変更しない） */
  }

  .business__list > li:nth-child(6) .business__card-title {
    font-size: 18px; /* 6枚目のみ左右に余白を確保（他5枚のタイトルサイズ・本文サイズは変更しない） */
  }
}

@media (min-width: 769px) {
  .page-top .business__inner {
    gap: 0; /* 見出し帯/カード/ボタン間は個別marginで管理するため共通gapを無効化 */
  }

  .page-top .business__banner {
    max-width: 1175px; /* Figma実測 */
    height: 72px; /* Figma実測 */
    padding-block: 11.5px; /* アイコン49pxを基準に上下中央（72-49）/2 */
    margin-bottom: 31px; /* Figma実測: 見出し帯下端〜カード上端 */
    border-radius: 12px; /* Figma実測 */
    gap: 25px; /* Figma実測 */
    font-size: 40px; /* Figma実測 */
    line-height: 1; /* Figma実測 */
  }

  .page-top .business__banner-icon {
    width: 48px; /* Figma実測（height:autoで49pxへ自動追従） */
  }

  .page-top .business__list {
    max-width: 1175px; /* Figma実測 */
    row-gap: 22px; /* Figma実測 */
    column-gap: 17.5px; /* Figma実測: カード幅380pxを維持するための値 */
  }

  .page-top .business__card-figure {
    border-radius: 8px; /* Figma実測 */
  }

  .page-top .business__card-title {
    font-size: 22px; /* Figma実測 */
    letter-spacing: -0.3px; /* 最長タイトル（おうちに関する資金相談・土地探し）が2行に折り返さないよう6カード共通で微調整 */
  }

  .page-top .business__card-text {
    font-size: 16px; /* Figma実測 */
    line-height: 1.5; /* Figma実測 */
  }

  .page-top .business__card-caption {
    transform: translateY(12px); /* タイトル・説明文ブロック全体を青帯の縦中央へ寄せる */
  }

  .page-top .business__button {
    margin-top: 62px; /* Figma実測: カード下端〜ボタン上端 */
    margin-right: calc((100% - 1175px) / 2 + 11px); /* Figma実測: 1175px幅コンテナ右端から11px内側 */
    width: 290px; /* Figma実測 */
    padding-block: 17px; /* 高さ58pxに収まるよう調整 */
    font-size: 24px; /* Figma実測（.btn__textへ継承） */
  }

  .page-top .business__button .btn__text {
    font-size: 24px; /* Figma実測 */
    line-height: 1;
  }

  .page-top .business__button .btn__dot {
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    right: 27px; /* Figma実測: 右端からドット中心まで32px */
  }
}

/* ===================================================
   PAGE: TOP - voice（お客様の声）
   =================================================== */

.voice {
  padding-block: var(--space-16);
}

.voice__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}

.voice__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy);
}

.voice__heading-icon {
  display: block;
  width: 2.5rem;
  height: 2rem;
  object-fit: contain;
}

.voice__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  width: 100%;
}

.voice__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgb(33 52 89 / 8%);
}

.voice__card-figure {
  width: 100%;
  aspect-ratio: 2481 / 3509;
}

.voice__card-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.voice__card-name {
  font-weight: 700;
  color: var(--color-navy);
}

.voice__card-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-navy);
}

.voice__button {
  align-self: flex-end;
}

.voice__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .voice {
    padding-block: var(--space-10);
  }

  .voice__inner {
    gap: var(--space-6);
  }

  .voice__heading {
    font-size: 1.375rem;
  }

  .voice__list {
    gap: var(--space-3);
  }

  .voice__card {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .voice__card-name {
    font-size: 0.8125rem;
  }

  .page-top .voice__card-text {
    display: none;
  }

  .voice__actions {
    width: 100%;
    gap: var(--space-4);
  }

  /* TOP専用（.voice__*はvoice.htmlと共有のため、必ず.page-topスコープで上書きする） */

  .page-top .voice {
    padding-top: 43px; /* Figma実測: セクション上端→見出し上端 */
    padding-bottom: 55px; /* Figma実測: ボタン下端→セクション下端 */
  }

  .page-top .voice__inner {
    gap: 0; /* 一律gapではなく各要素のmargin-topで実測値通りに制御 */
  }

  .page-top .voice__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* Figma実測 */
    font-size: 26px; /* Figma実測 */
    font-weight: 700;
    line-height: 1; /* Figma実測 */
    color: #205287; /* Figma実測 */
  }

  .page-top .voice__heading-graphic {
    flex-shrink: 0; /* アイコンが縮んで見出しが折り返す不具合を防止 */
    width: 36px; /* Figma実測 */
    height: 29px; /* Figma実測 */
  }

  .page-top .voice__heading-text {
    white-space: nowrap; /* 「お客様の声」を1行に固定 */
  }

  .page-top .voice__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px; /* Figma実測 */
    width: min(340px, 100%); /* Figma実測340px。375px等でも左右にはみ出さない */
    margin-inline: auto;
    margin-top: 45px; /* Figma実測: 見出し下端→画像列上端 */
  }

  .page-top .voice__card {
    padding: 0; /* 白い額縁paddingを解除 */
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .page-top .voice__card-figure {
    width: 100%;
    aspect-ratio: 81 / 98; /* Figma実測 */
    border-radius: 4px; /* Figma実測 */
    overflow: hidden;
    box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.18); /* Figma実測 */
  }

  .page-top .voice__card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .page-top .voice__card:nth-child(1) .voice__card-figure img {
    opacity: 0.8; /* Figma実測: 1枚目のみ */
  }

  .page-top .voice__card:nth-child(2) .voice__card-figure img {
    object-fit: contain; /* PC版の個別調整を踏襲: 用紙全体が切れずに収まるよう変更 */
    transform: scale(1.03);
  }

  .page-top .voice__card:nth-child(3) .voice__card-figure img {
    object-fit: contain; /* PC版の個別調整を踏襲 */
    transform: scale(1.08);
  }

  .page-top .voice__button {
    width: 261px; /* Figma実測 */
    max-width: 100%;
    height: 58px; /* Figma実測 */
    box-sizing: border-box;
    margin-top: 35px; /* Figma実測: 画像列下端→ボタン上端 */
    margin-inline: auto;
    align-self: center;
    position: relative;
    background-color: #205287; /* Figma実測 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-top .voice__button .btn__text {
    font-size: 20px; /* Figma実測 */
    font-weight: 700;
    line-height: 1;
  }

  .page-top .voice__button .btn__dot {
    position: absolute;
    top: 50%;
    right: 26px; /* Figma実測 */
    transform: translateY(-50%);
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    background-color: #fff; /* Figma実測 */
  }
}

@media (min-width: 769px) {
  .page-top .voice__inner {
    gap: 0; /* 見出し/画像列/ボタン間は個別marginで管理するため共通gapを無効化 */
  }

  .page-top .voice__heading {
    margin-bottom: 56px; /* Figma実測: 見出し下端〜画像列上端 */
    gap: 8px; /* Figma実測 */
    font-size: 40px; /* Figma実測 */
    font-weight: 700;
    line-height: 1; /* Figma実測 */
    color: #205287; /* Figma実測 */
  }

  .page-top .voice__heading-graphic {
    width: 59px; /* Figma実測 */
    height: 48px; /* Figma実測 */
  }

  .page-top .voice__list {
    max-width: 1176px; /* Figma実測 */
    gap: 16px; /* Figma実測 */
  }

  .page-top .voice__card {
    padding: 0; /* 白い額縁カードを解除 */
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .page-top .voice__card-figure {
    overflow: hidden;
    aspect-ratio: 281.5 / 352; /* Figma実測 */
    border-radius: 8px; /* Figma実測 */
    box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.18); /* Figma実測 */
  }

  .page-top .voice__card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Figma実測 */
    object-position: center; /* 1・4枚目: 中央基準 */
  }

  .page-top .voice__card:nth-child(2) .voice__card-figure img,
  .page-top .voice__card:nth-child(3) .voice__card-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 2・3枚目: 用紙全体が切れずに収まるよう変更 */
    object-position: center;
    transform-origin: center center;
  }

  .page-top .voice__card:nth-child(2) .voice__card-figure img {
    transform: scale(1.03); /* 画像解析実測: 元画像の余白がごく僅かなため安全域内で最小限拡大 */
  }

  .page-top .voice__card:nth-child(3) .voice__card-figure img {
    transform: scale(1.08); /* 画像解析実測: 1枚目とタイトル・内容サイズを揃える拡大率 */
  }

  .page-top .voice__button {
    margin-top: 46px; /* Figma実測: 画像列下端〜ボタン上端 */
    margin-right: calc((100% - 1176px) / 2); /* Figma実測: 画像列右端とほぼ揃える */
    width: 266px; /* Figma実測 */
    height: 58px; /* Figma実測 */
  }

  .page-top .voice__button .btn__text {
    font-size: 24px; /* Figma実測 */
    line-height: 1;
  }

  .page-top .voice__button .btn__dot {
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    right: 27px; /* Figma実測: 右端からドット中心まで32px */
  }
}

/* ===================================================
   PAGE: VOICE - letters（お客様からのお手紙）
   =================================================== */

.letters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-10);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-md);
}

.letters__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.letters__heading-icon {
  width: 2rem;
  height: auto;
}

.letters .voice__card {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.letters .voice__card-figure {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgb(33 52 89 / 8%);
}

@media (max-width: 768px) {
  .letters {
    gap: var(--space-6);
    padding: var(--space-6) var(--space-4);
  }

  .letters__heading {
    font-size: 1.25rem;
  }

  .letters .voice__list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .letters .voice__card-name {
    font-size: 1rem;
  }

  .letters .voice__card-text {
    font-size: 0.9375rem;
  }
}

/* ===================================================
   PAGE: VOICE - google-reviews（Google口コミ）
   =================================================== */

.google-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}

.google-reviews__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.google-reviews__item img {
  width: 100%;
  height: auto;
}

.google-reviews__button {
  align-self: flex-end;
}

@media (max-width: 768px) {
  .google-reviews {
    gap: var(--space-6);
  }
}

/* ===================================================
   PAGE: VOICE - page-voice（SP専用スコープ／TOPと共有するクラスはここでのみ上書き）
   =================================================== */

@media (max-width: 768px) {
  .page-voice .voice {
    padding-top: 31px; /* .page-hero下端からボタン群上端まで : Figma実測 */
    padding-bottom: 100px; /* もっと見るボタン下端〜フッターまで : Figma実測 */
  }

  .page-voice .voice__inner {
    gap: 0; /* 個別margin-topで配置するため一律gapは廃止 */
  }

  .page-voice .voice__actions {
    gap: 12px; /* ボタン間隔 : Figma実測 */
  }

  .page-voice .voice__button {
    position: relative;
    align-self: center; /* 共通.voice__buttonのalign-self:flex-endを解除 */
    width: 261px; /* Figma実測 */
    height: 52px; /* Figma実測 */
    padding: 0;
  }

  .page-voice .voice__button .btn__text {
    font-size: 20px; /* Figma実測 */
    font-weight: 700;
  }

  .page-voice .voice__button:not(.btn--outline) .btn__dot {
    position: absolute;
    top: 50%;
    right: 24.5px; /* 右端から中心まで約29px : Figma実測 */
    transform: translateY(-50%);
    width: 9px; /* Figma実測 */
    height: 9px; /* Figma実測 */
    background-color: #FFF; /* Figma実測 */
  }

  .page-voice .voice__button.btn--outline {
    border-color: #6FA9D0; /* Figma実測 */
    color: #21355A; /* Figma実測 */
    /* 光学調整: 右側の点(right:23.5px + width:9px の中心=28px)までを基準領域とし、
       そこまでの右パディングでjustify-content:centerの中心を左へ寄せる。
       ボタン幅が変わっても点の位置基準からの相対関係を維持する。 */
    padding-right: calc(23.5px + 9px / 2);
  }

  .page-voice .voice__button.btn--outline .btn__dot {
    position: absolute;
    top: 50%;
    right: 23.5px; /* 右端から中心まで約28px : Figma実測 */
    transform: translateY(-50%);
    width: 9px; /* Figma実測 */
    height: 9px; /* Figma実測 */
    background-color: #6FA9D0; /* Figma実測（画素サンプリングで確認） */
  }

  .page-voice .voice__actions .btn__icon {
    width: 33px; /* Figma実測 */
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
  }

  .page-voice .letters {
    width: calc(100% - 10px); /* 左右余白を約25pxにするための微調整 */
    margin-inline: auto;
    margin-top: 30px; /* 上部ボタン群下端からletters上端まで : Figma実測 */
    padding: 36px 40px 44px; /* 上/左右/下 : Figma実測 */
    gap: 42px; /* 見出し下端からカード列上端まで : Figma実測 */
    background-color: #F0F5F7; /* Figma実測 */
    border-radius: 18px; /* Figma実測 */
  }

  .page-voice .letters__heading {
    gap: 14px; /* アイコンと文字のgap : Figma実測 */
    margin-inline: -12px; /* letters側の左右padding(40px)内で見出し行だけ幅を広げ、1行表示を維持 */
    font-size: 24px; /* 26px指定だが実書体幅とcards用paddingの両立のため24pxへ微調整 */
  }

  .page-voice .letters__heading-icon {
    width: 29px; /* Figma実測 */
    height: 28px; /* Figma実測 */
  }

  .page-voice .letters .voice__list {
    gap: 26px; /* カード間 : Figma実測 */
  }

  .page-voice .letters .voice__card {
    gap: 0; /* 画像→氏名、氏名→コメントで間隔が異なるため個別marginに切り替え */
  }

  .page-voice .letters .voice__card-figure {
    border-radius: 8px; /* Figma実測 */
    box-shadow: 2px 4px 9px rgba(0, 0, 0, 0.15); /* Figma実測 */
  }

  .page-voice .letters .voice__card-name {
    margin-top: 11px; /* 画像下端から氏名上端まで : Figma実測 */
    font-weight: 400; /* Zen Maru Gothic Regular : Figma実測 */
    color: #000; /* Figma実測 */
    line-height: 1.5; /* Figma実測 */
  }

  .page-voice .letters .voice__card-text {
    margin-top: 1px; /* 氏名下端からコメント上端まで（25pxではない） : Figma実測 */
    font-family: var(--font-ja); /* Zen Maru Gothic : グローバルなNoto Sans JP適用リストを上書き */
    font-size: 13px; /* Figma実測 */
    font-weight: 400;
    color: #000; /* Figma実測 */
    line-height: 1.4; /* Figma実測（1.3〜1.5の範囲） */
  }

  .page-voice .google-reviews {
    margin-top: 110px; /* お手紙セクション下端からGoogle口コミ見出しまで : Figma実測 */
  }

  .page-voice .voice__heading {
    gap: 13px; /* アイコンと文字のgap : Figma実測 */
    font-size: 26px; /* Figma実測 */
  }

  .page-voice .voice__heading-icon {
    width: 33px; /* Figma実測 */
    height: 26px; /* Figma実測 */
  }

  .page-voice .google-reviews__item img {
    max-width: 339px; /* Figma実測。width:100%;height:autoは既存のまま維持し縦横比を保つ */
  }

  .page-voice .google-reviews__button {
    position: relative;
    align-self: center; /* 共通.google-reviews__buttonのalign-self:flex-endを解除 */
    width: 266px; /* Figma実測 */
    height: 58px; /* Figma実測 */
    padding: 0;
    background-color: #205287; /* Figma実測 */
  }

  .page-voice .google-reviews__button .btn__text {
    font-size: 24px; /* Figma実測 */
    font-weight: 700;
  }

  .page-voice .google-reviews__button .btn__dot {
    position: absolute;
    top: 50%;
    right: 27px; /* 右端から中心まで約32px : Figma実測 */
    transform: translateY(-50%);
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    background-color: #FFF; /* Figma実測 */
  }
}

@media (max-width: 360px) {
  .page-voice .letters__heading {
    gap: 8px; /* 360px幅で「お客様からのお手紙」が2行に折り返すのを防止（フォントサイズ24px/字間/アイコンサイズは変更しない） */
  }
}

/* ===================================================
   PAGE: VOICE - page-voice（PC専用スコープ／TOPと共有するクラスはここでのみ上書き）
   =================================================== */

@media (min-width: 769px) {
  .page-voice .voice__inner {
    max-width: 1176px; /* Figma実測 */
    margin-inline: auto;
    gap: 0;
    padding-bottom: 256px; /* 最終要素〜フッター上端 : .voiceセクション自体のpadding-bottom(64px)と合算して320pxになるよう調整 */
  }

  .page-voice .voice__actions {
    gap: 12px; /* Figma実測 */
  }

  .page-voice .voice__button {
    align-self: center;
    width: 292px; /* Figma実測 */
    height: 58px; /* Figma実測 */
  }

  .page-voice .voice__button .btn__text {
    font-size: 24px; /* Figma実測 */
  }

  .page-voice .voice__button:not(.btn--outline) {
    background-color: #205287; /* Figma実測 */
  }

  .page-voice .voice__button:not(.btn--outline) .btn__dot {
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    right: 29px; /* Figma実測: 右端からドット中心まで34px（他ボタンより2px内側） */
  }

  .page-voice .voice__button.btn--outline {
    border-color: #6fa9d0; /* Figma実測 */
  }

  .page-voice .voice__button.btn--outline .btn__dot {
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    right: 27px; /* Figma実測: 右端からドット中心まで32px */
  }

  .page-voice .voice__actions .btn__icon {
    width: 33px; /* Figma実測、元画像177×144px(比1.229)の比率をheight:autoで維持 */
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
  }

  .page-voice .letters {
    margin-top: 49px; /* 上部ボタン〜お手紙ブロック : Figma実測 */
    width: 1175px; /* Figma実測 */
    background-color: #f0f5f7; /* Figma実測 */
    border-radius: 18px; /* Figma実測 */
    padding: 34px 33px 105px; /* Figma実測（上部は見出し込みでブラウザ実測により調整） */
    gap: 24px;
  }

  .page-voice .letters__heading {
    font-size: 30px; /* Figma実測 */
    font-weight: 700;
  }

  .page-voice .letters__heading-icon {
    width: 39px; /* Figma実測 */
    height: 38px; /* Figma実測 */
  }

  .page-voice .voice__list {
    gap: 29px 24px; /* 画像下端〜次行画像上端が110pxになるよう、氏名・本文分を差し引いて調整 : 列間24px はFigma実測 */
  }

  .page-voice .letters .voice__card {
    gap: 8px; /* Figma実測に合わせて詰める */
  }

  .page-voice .letters .voice__card-figure {
    border-radius: 8px; /* Figma実測 */
    box-shadow: 2px 4px 9px rgba(0, 0, 0, 0.15); /* Figma実測 */
  }

  .page-voice .letters .voice__card-name,
  .page-voice .letters .voice__card-text {
    color: #000; /* Figma実測 */
  }

  .page-voice .letters .voice__card-text {
    font-size: 13px; /* Figma実測 */
  }

  .page-voice .google-reviews {
    margin-top: 122px; /* お手紙ブロック〜Google口コミ見出し : Figma実測 */
    width: 1176px; /* width:100%がflex子要素で正しく展開されないため明示指定 */
  }

  .page-voice .voice__heading {
    font-size: 30px; /* Figma実測 */
  }

  .page-voice .voice__heading-icon {
    width: 59px; /* Figma実測 */
    height: 48px; /* Figma実測 */
  }

  .page-voice .google-reviews__list {
    gap: 15px; /* Figma実測 */
  }

  .page-voice .google-reviews__button {
    width: 265.5px; /* Figma実測 */
    height: 58px; /* Figma実測 */
    background-color: #205287; /* Figma実測 */
  }

  .page-voice .google-reviews__button .btn__text {
    font-size: 24px; /* Figma実測 */
  }

  .page-voice .google-reviews__button .btn__dot {
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    right: 27px; /* Figma実測: 右端からドット中心まで32px */
  }
}

/* ===================================================
   PAGE: TOP - ceo（代表挨拶）
   =================================================== */

.ceo {
  padding-block: var(--space-16);
}

.ceo__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--space-16);
}

.ceo__photo-wrap {
  position: relative;
}

.ceo__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 1539 / 1593; /* photo-representative.png の実寸比 */
  overflow: hidden;
  border-radius: var(--radius-md);
}

.ceo__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.ceo__photo-penguin {
  position: absolute;
  right: -1rem;
  bottom: -3.5rem;
  z-index: 2;
  width: 8rem;
  height: auto;
}

.ceo__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ceo__heading {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy);
}

.ceo__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-accent-soft);
}

.ceo__text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-navy);
}

.ceo__signature {
  align-self: flex-end;
  font-weight: 700;
  color: var(--color-navy);
}

@media (max-width: 768px) {
  .ceo__signature-name {
    display: block;
  }
}

@media (max-width: 768px) {
  .ceo {
    padding-block: var(--space-10);
  }

  .ceo__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .ceo__photo-wrap {
    max-width: 20rem;
    margin-inline: auto;
    transform: translateX(-0.5rem);
  }

  .ceo__heading {
    font-size: 1.375rem;
  }

  .ceo__text {
    font-size: 0.9375rem;
    line-height: 1.8;
  }

  /* TOP専用（Figma node-id=2001:1551） */

  .page-top .ceo {
    padding-top: 67px; /* Figma実測: セクション上端→写真上端 */
    padding-bottom: 40px; /* 署名下端→ボタン上端85pxのうち、ceo側の内訳（cta側padding-topと合わせて85px） */
  }

  .page-top .ceo__inner {
    gap: 60px; /* Figma実測: 写真合成領域下端→見出し上端 */
  }

  .page-top .ceo__photo-wrap {
    max-width: 100%; /* 既存の20rem(320px)上限を解除 */
    width: min(324px, 100%); /* Figma実測: 写真＋背景板の合成表示領域 */
    margin-inline: auto;
    transform: translateX(-8px); /* Figmaのわずかな左寄せに近似 */
  }

  .page-top .ceo__photo {
    width: 100%;
    height: 328px; /* Figma実測 */
    border-radius: 0; /* 画像に角丸・水色背景板が合成済みのため重ねない */
    overflow: visible;
  }

  .page-top .ceo__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 合成済み画像を歪ませずそのまま表示 */
    object-position: center;
  }

  .page-top .ceo__photo-penguin {
    width: 92px; /* Figma実測 */
    height: 92px; /* Figma実測 */
    right: -13px; /* Figma実測: 写真＋背景板の合成領域右端からの位置 */
    bottom: -58px; /* 微調整: 頭を写真下部へ近づけるため-66pxから8px上へ */
  }

  .page-top .ceo__content {
    width: min(341px, 100%); /* Figma実測。375px等でコンテナからはみ出さない */
    margin-inline: auto;
    gap: 0; /* 一律gapではなく各要素のmargin-topで実測値通りに制御 */
  }

  .page-top .ceo__heading {
    display: block;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    white-space: nowrap;
    font-size: 32px; /* Figma実測 */
    font-weight: 700;
    line-height: 1; /* Figma実測 */
    color: #205287; /* Figma実測 */
  }

  .page-top .ceo__heading::after {
    display: none; /* SP版TOPは区切り線なし（PC版の区切り線は変更しない） */
  }

  .page-top .ceo__heading + .ceo__text {
    margin-top: 36px; /* Figma実測: 見出し下端→本文上端 */
  }

  .page-top .ceo__text {
    font-size: 14px; /* Figma実測 */
    font-weight: 400;
    line-height: 1.8; /* Figma実測 */
    color: #000;
  }

  .page-top .ceo__text + .ceo__text {
    margin-top: 25px; /* Figma実測: 段落間の空白行相当 */
  }

  .page-top .ceo__signature {
    margin-top: 42px; /* Figma実測: 本文下端→署名上端 */
    text-align: right;
    font-size: 18px; /* Figma実測 */
    font-weight: 700;
    line-height: 1.3; /* Figma実測 */
    color: #000;
  }

  .page-top .ceo__signature-brand {
    display: block; /* 1行目「サポートサービスFor You」を独立させる */
  }

  .page-top .ceo__signature-name {
    display: inline; /* 「代表　」と同じ2行目へ配置 */
  }
}

@media (min-width: 769px) {
  .page-top .ceo {
    padding-bottom: 97px; /* Figma実測: 写真/文章ブロック下端〜CTA上端(161px)のうち、.cta側の既存padding-top(64px)を差し引いた分 */
  }

  .page-top .ceo__inner {
    grid-template-columns: 513px 617px; /* Figma実測 */
    column-gap: 48px; /* Figma実測 */
    justify-content: center; /* コンテンツ幅1178pxを1280px幅の中で中央配置 */
  }

  .page-top .ceo__photo-wrap {
    margin-top: 20px; /* Figma実測: 見出し上端より写真上端を下げる */
  }

  .page-top .ceo__photo {
    border-radius: 0; /* photo-representative.png に角丸・背景ボックスが合成済みのため重ねない */
    overflow: visible;
  }

  .page-top .ceo__photo img {
    object-fit: contain; /* 合成済み画像をトリミングせずそのまま表示 */
    object-position: center;
  }

  .page-top .ceo__photo-penguin {
    width: 134px; /* Figma実測 */
    height: 134px; /* Figma実測 */
    right: -20px; /* 写真にさらに近づけるため微調整（元-45px、顔が写真に少しかかる位置へ） */
    bottom: -40px; /* 写真にさらに近づけるため微調整（元-65px） */
  }

  .page-top .ceo__heading {
    margin-bottom: 16px; /* 既存gap24pxと合わせて見出し下端〜本文上端を約40pxへ */
    gap: 27px; /* Figma実測 */
    font-size: 40px; /* Figma実測 */
    color: #205287; /* Figma実測 */
  }

  .page-top .ceo__heading::after {
    flex: 0 0 428px; /* Figma実測: 固定幅428px */
  }

  .page-top .ceo__text {
    line-height: 1.8; /* Figma実測 */
    color: #1a1a1a; /* Figma実測に近い黒系 */
  }

  .page-top .ceo__signature {
    margin-top: -16px; /* 既存gap24pxを差し引いて本文最終行との距離を約8pxへ */
    font-size: 24px; /* 「代表 澤田悠樹」部分を少し大きく */
    font-weight: 700; /* 「代表 澤田悠樹」部分を太く */
    color: #1a1a1a; /* 本文と同じ黒系 */
  }

  .page-top .ceo__signature-brand {
    font-size: 21px; /* 「サポートサービスFor You」部分はサイズ維持 */
    font-weight: 700; /* 太く */
  }
}

/* ===================================================
   PAGE: TOP - cta（お問い合わせはこちら）
   =================================================== */

.cta {
  padding-block: var(--space-16);
}

.cta__inner {
  display: flex;
  justify-content: center;
}

.cta__button {
  padding: var(--space-6) var(--space-20);
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .cta {
    padding-block: var(--space-10);
  }

  .cta__button {
    padding: var(--space-5) var(--space-6);
    font-size: 1.25rem;
  }

  /* TOP専用（Figma node-id=2001:1551） */

  .page-top .cta {
    padding-top: 45px; /* 署名下端→ボタン上端85pxのうち、cta側の内訳（ceo側padding-bottomと合わせて85px） */
    padding-bottom: 103px; /* Figma実測: ボタン下端→全体下端 */
  }

  .page-top .cta__button {
    width: 286px; /* Figma実測 */
    max-width: 100%;
    height: 58px; /* Figma実測 */
    padding: 0;
    margin-inline: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #205287; /* Figma実測 */
  }

  .page-top .cta__button .btn__text {
    font-size: 20px; /* Figma実測 */
    font-weight: 700;
    line-height: 1;
  }

  .page-top .cta__button .btn__dot {
    position: absolute;
    top: 50%;
    right: 26px; /* Figma実測 */
    transform: translateY(-50%);
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    background-color: #fff; /* Figma実測 */
  }
}

@media (min-width: 769px) {
  .page-top .cta {
    padding-top: 150px;
    padding-bottom: 200px;
  }

  .page-top .cta__button {
    width: 628px; /* Figma実測 */
    height: 92px; /* Figma実測80pxより上下にゆとりを持たせる */
  }

  .page-top .cta__button .btn__text {
    font-size: 33px; /* Figma実測 */
    line-height: 1;
  }

  .page-top .cta__button .btn__dot {
    width: 12px; /* Figma実測 */
    height: 12px; /* Figma実測 */
    right: 41px; /* Figma実測: 右端からドット中心まで47px */
  }
}

/* ===================================================
   PAGE: COMPANY - company（会社概要）
   =================================================== */

.company__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-block: var(--space-10) var(--space-16);
}

.company__heading {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-navy);
}

.company__note {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
}

.company__map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.company__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.company-table {
  display: grid;
  grid-template-columns: 12rem 1fr;
  align-items: center;
}

.company-table__term,
.company-table__desc {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-accent-soft);
}

.company-table__term {
  font-weight: 700;
  color: var(--color-navy);
}

.company-table__desc {
  color: var(--color-navy);
}

.company-table__desc a {
  color: inherit;
}

.company-table__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@media (min-width: 769px) {
  .company__inner {
    max-width: 1216px; /* Figma実測1176pxから拡張: 「主要商品」を1行に収めるため実測ベースで調整 */
    margin-inline: auto;
    padding-bottom: 183px; /* 地図下端〜フッター上端の余白をブラウザ実測で183pxに調整 */
  }

  .company__heading {
    font-size: 1.875rem; /* 30px : Figma実測 */
  }

  .company__note {
    font-size: 1.4375rem; /* 23px : Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium : Figma実測 */
  }

  .company__map {
    width: 963px; /* Figma実測 */
    aspect-ratio: 963 / 519; /* Figma実測 */
    margin-inline: auto;
    border-radius: 0; /* Figma実測：角丸なし */
  }

  .company-table {
    grid-template-columns: 340px 1fr; /* Figma実測 */
    align-items: stretch;
  }

  .company-table__term,
  .company-table__desc {
    font-size: 1.25rem; /* 20px : Figma実測 */
    margin: 0;
  }

  .company-table__term {
    display: flex;
    align-items: center;
  }

  .company-table__desc {
    color: #000; /* Figma実測 */
  }
}

@media (max-width: 768px) {
  .company__inner {
    gap: 0; /* 個別marginで配置するため一律gapは廃止 : Figma実測 */
    padding-top: 44px; /* .page-hero下端から「会社概要」上端まで : Figma実測 */
    padding-bottom: 101px; /* 地図下端〜フッターまで : Figma実測 */
  }

  .company__heading {
    font-size: 1.625rem; /* 26px : Figma実測 */
    line-height: 1;
  }

  .company-table {
    margin: 81px 0 0; /* dlのUAデフォルトmargin-bottomを打ち消し、上端のみ「会社概要」下端から一覧上端まで : Figma実測 */
    grid-template-columns: 102px 1fr; /* Figma実測 ラベル列幅 */
    align-items: stretch; /* dt/ddのセル高さを行の高さに揃え、border-bottomを左右で同じy座標にする */
    column-gap: 0; /* 内容列の開始位置=ラベル列幅とするため : Figma実測 */
  }

  .company-table__term,
  .company-table__desc {
    display: flex;
    align-items: center; /* セル内でラベル・内容を垂直中央に */
    padding-block: 20px; /* Figma実測 */
  }

  .company-table__term {
    font-size: 1rem; /* 16px : Figma実測 */
  }

  .company-table__term:last-of-type {
    line-height: 1.3; /* 「対応内容・対応箇所」2行分 : Figma実測 */
  }

  .company-table__desc {
    margin: 0; /* dd要素のUAデフォルトmargin-inline-start:40pxを打ち消す */
    font-family: var(--font-ja); /* Zen Maru Gothic : Figma実測（共通のNoto Sans JP適用リストを上書き） */
    font-size: 0.875rem; /* 14px : Figma実測 */
    font-weight: 400;
    color: #000; /* Figma実測 */
    line-height: 1.4; /* Figma実測 */
  }

  .company-table__list {
    gap: 0; /* 項目間の追加gapなし : Figma実測 */
  }

  .company__note {
    margin-top: 6px; /* 対応内容リスト最終行からメッセージまで約27px（行のpadding-bottom20px+border1pxを差し引き） : Figma実測 */
    font-size: 0.875rem; /* 14px : Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium : Figma実測 */
  }

  .company__map {
    margin-top: 41px; /* メッセージから地図まで : Figma実測 */
    aspect-ratio: 340 / 183.24; /* Figma実測 */
    border-radius: 0;
    overflow: visible;
  }

  .company__map iframe {
    border-radius: 0;
  }
}

/* ===================================================
   PAGE: PRIVACY - privacy（プライバシーポリシー）
   =================================================== */

.privacy__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: calc(var(--header-height-pc) + var(--space-10)) 0 var(--space-16);
}

.privacy__title {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-navy);
}

.privacy__intro {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-navy);
}

.privacy__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.privacy__section-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
}

.privacy__text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-navy);
}

.privacy__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-navy);
}

.privacy__list li::before {
  content: "・";
}

.privacy__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.privacy__address {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@media (min-width: 769px) {
  .privacy__inner {
    max-width: 70.3125rem; /* 1125px : Figma実測 */
    margin-inline: auto;
    gap: 0;
    padding-bottom: 145px; /* 本文最終行〜フッター上端 : Figma実測（ブラウザ実測後に調整） */
  }

  .privacy__title {
    font-size: 3.125rem; /* 50px : Figma実測 */
    margin-top: 69px; /* セクション開始位置からタイトルまで : Figma実測 */
  }

  .privacy__intro {
    margin-top: 68px; /* タイトル下端から冒頭文まで : Figma実測 */
  }

  .privacy__intro,
  .privacy__text,
  .privacy__list {
    font-size: 1.125rem; /* 18px : Figma実測 */
    line-height: 2; /* Figma実測 */
    color: #333; /* Figma実測 */
  }

  .privacy__section {
    gap: 0; /* 見出し直下に追加gapなし : Figma実測 */
    margin-top: 36px; /* セクション間 : Figma実測 */
  }

  .privacy__section-heading {
    color: #333; /* Figma実測 */
  }

  .privacy__list {
    display: block;
    list-style: disc outside;
    padding-left: 27px; /* 18px×1.5 : Figma実測インデント */
    margin: 0;
  }

  .privacy__list li::before {
    content: none; /* PC版はネイティブdiscマーカーに切り替え */
  }

  .privacy__contact {
    gap: 0;
    margin-top: 72px; /* お問い合わせ窓口前：通常セクション間の倍 : Figma実測 */
  }

  .privacy__address {
    gap: 0;
  }
}

@media (max-width: 768px) {
  .privacy__inner {
    gap: 0; /* 個別marginで配置するため一律gapは廃止 : Figma実測 */
    padding-top: 192px; /* 共通ヘッダー範囲109px + ヘッダー下端からタイトル上端83px : Figma実測 */
    padding-bottom: 101px; /* 本文最終行〜フッターまで : Figma実測 */
    padding-inline: 24px; /* 本文左右余白 約24.5px : Figma実測 */
  }

  .privacy__title {
    font-size: 1.875rem; /* 30px : Figma実測 */
    line-height: 1.4;
    margin: 0;
  }

  .privacy__intro {
    margin-top: 58px; /* タイトル下端から本文冒頭まで : Figma実測 */
  }

  .privacy__intro,
  .privacy__text,
  .privacy__list {
    font-size: 0.75rem; /* 12px : Figma実測 */
    line-height: 2; /* Figma実測 */
    color: #333; /* Figma実測 */
  }

  .privacy__section {
    gap: 0; /* 見出し直下に追加gapなし : Figma実測 */
    margin-top: 36px; /* セクション間 : Figma実測 */
  }

  .privacy__section-heading {
    font-size: 1rem; /* 16px : Figma実測 */
    font-family: var(--font-ja-sub); /* Noto Sans JP : Figma実測 */
    color: #333; /* Figma実測 */
  }

  .privacy__list {
    display: block;
    list-style: disc outside;
    padding-left: 18px; /* 12px×1.5 : Figma実測インデント */
    margin: 0;
    font-family: var(--font-ja-sub); /* Noto Sans JP : Figma実測 */
  }

  .privacy__list li::before {
    content: none; /* ネイティブdiscマーカーに切り替え : Figma実測 */
  }

  .privacy__contact {
    gap: 0;
    margin-top: 72px; /* お問い合わせ窓口前：通常セクション間の倍 : Figma実測 */
  }

  .privacy__address {
    gap: 0;
  }
}

/* ===================================================
   PAGE: CONTACT - contact（お問い合わせ）
   =================================================== */

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: calc(var(--header-height-pc) + var(--space-10)) 0 var(--space-16);
}

.contact__title {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-navy);
}

.contact__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.contact__phone-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact__phone-icon {
  width: 2rem;
  height: auto;
}

.contact__phone-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.contact__privacy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 40rem;
}

.contact__privacy-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
}

.contact__privacy-text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-navy);
}

@media (min-width: 769px) {
  .contact__inner {
    gap: 0;
    padding-bottom: 180px; /* 本文最終行〜フッター上端 : Figma実測（ブラウザ実測後に調整） */
  }

  .contact__title {
    font-size: 3.125rem; /* 50px : Figma実測 */
    margin-top: 42px; /* セクション開始位置からタイトルまで : Figma実測 */
  }

  .contact__phone {
    margin-top: 68px; /* タイトル下端から電話案内文まで : Figma実測 */
  }

  .contact__phone .eyebrow {
    font-size: 26px; /* Figma実測 */
    font-weight: 400; /* Figma実測：Regular */
    color: #000; /* Figma実測 */
  }

  .contact__phone-link {
    gap: 25px; /* アイコンと電話番号の間隔 : Figma実測 */
  }

  .contact__phone-icon {
    width: 41px; /* Figma実測（高さは自動比率で約44px） */
  }

  .contact__phone-number {
    font-size: 60px; /* Figma実測 */
  }

  .form {
    margin-top: 50px; /* 電話ブロックからフォームまで : Figma実測 */
  }

  .contact__privacy {
    max-width: 682px; /* フォームと同幅 : Figma実測 */
    margin-top: 69px; /* 送信ボタンから個人情報保護部分まで : Figma実測 */
  }

  .contact__privacy-heading {
    color: #274b66; /* Figma実測 */
  }

  .contact__privacy-text {
    color: #403d3d; /* Figma実測 */
    line-height: 1.5; /* Figma実測 */
  }
}

@media (max-width: 768px) {
  .contact__inner {
    gap: 0; /* 個別marginで配置するため一律gapは廃止 : Figma実測 */
    padding-top: 194px; /* 共通ヘッダー109px + CONTACTタイトルまで85px : Figma実測(node 2021:713) */
    padding-bottom: 100px; /* 個人情報保護ブロック下端〜フッターまで : Figma実測 */
    padding-inline: 25px; /* 左右余白 : Figma実測 */
  }

  .contact__title {
    font-size: 1.875rem; /* 30px : Figma実測 */
    line-height: 1;
    margin: 0;
  }

  .contact__phone {
    margin-top: 71px; /* タイトル下端から電話案内ブロックまで : Figma実測 */
    gap: 19px; /* 破線からアイコン上端まで24px相当（電話番号の行高中央寄せ分を差し引き） : Figma実測 */
  }

  .contact__phone .eyebrow {
    width: 309px; /* 文字幅ではなく指定幅の破線として表示 : Figma実測 */
    margin-inline: auto; /* コンテナ自体を中央配置 */
    padding-bottom: 7px; /* 案内文下端から破線まで : Figma実測 */
    font-size: 17px; /* 18px指定だが実書体幅に合わせ17pxへ微調整 */
    font-weight: 400; /* Zen Maru Gothic Regular : Figma実測 */
    color: #000; /* Figma実測 */
    line-height: 1.5; /* Figma実測 */
    letter-spacing: normal; /* 共通.eyebrowの0.05em文字間隔を打ち消し、309px幅に収める */
    text-align: center;
    white-space: nowrap;
  }

  .contact__phone-icon {
    width: 31px; /* Figma実測 */
  }

  .contact__phone-number {
    font-size: 2.75rem; /* 44px : Figma実測 */
    line-height: 1; /* Figma実測（leading-none） */
  }
}

/* ===================================================
   COMPONENT: form（お問い合わせフォーム／CF7移行を想定）
   =================================================== */

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 40rem;
}

.form__group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 0;
  margin: 0;
  padding: 0;
}

.form__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--color-navy);
}

.form__required {
  padding: 0.125rem var(--space-2);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.form__name-group {
  display: flex;
  gap: var(--space-4);
}

.form__input,
.form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-navy);
}

.form__textarea {
  min-height: 12rem;
  resize: vertical;
}

.form__submit {
  align-self: center;
}

@media (min-width: 769px) {
  .form {
    max-width: 682px; /* Figma実測 */
    gap: 30px; /* 各フォーム項目間 : Figma実測 */
  }

  .form__group {
    gap: 10px; /* ラベルと入力欄の間 : Figma実測 */
  }

  .form__label {
    gap: 20px; /* ラベルと必須バッジの間隔 : Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium : Figma実測 */
  }

  .form__required {
    background-color: #6fa9d0; /* Figma実測 */
    color: #fff; /* Figma実測 */
    border-radius: 2px; /* Figma実測 */
  }

  .form__name-group {
    gap: 20px; /* カラム間隔 : Figma実測 */
  }

  .form__name-group .form__input {
    width: 330px; /* Figma実測 */
    flex: none;
  }

  .form__input,
  .form__textarea {
    border: 1px solid #b1d2e3; /* Figma実測 */
    border-radius: 3px; /* Figma実測 */
    font-family: "Roboto", "Noto Sans JP", sans-serif; /* Figma実測 */
  }

  .form__input::placeholder,
  .form__textarea::placeholder {
    color: #b2b8bf; /* Figma実測 */
  }

  .form__input {
    height: 46px; /* Figma実測 */
  }

  .form__textarea {
    height: 296px; /* Figma実測 */
  }

  .form__submit {
    width: 265.5px; /* Figma実測 */
    height: 58px; /* Figma実測 */
    background-color: #205287; /* Figma実測 */
    font-size: 24px; /* Figma実測 */
  }

  .form__submit .btn__dot {
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    right: 27px; /* Figma実測: 右端からドット中心まで32px */
  }
}

@media (max-width: 768px) {
  .form {
    gap: 30px; /* 各フォーム項目間 : Figma実測 */
    margin-top: 62px; /* 電話案内ブロック下端からフォームまで : Figma実測 */
  }

  .form__group {
    gap: 10px; /* ラベルから入力欄まで : Figma実測 */
  }

  .form__name-group {
    flex-direction: column;
    gap: 20px; /* 姓名・フリガナの入力欄間 : Figma実測 */
    margin-top: 10px; /* legend→入力欄。fieldset内はgapが効かないためmargin-topで10pxに統一 */
  }

  .form__label {
    gap: 20px; /* ラベルと必須バッジの横gap : Figma実測 */
    font-size: 1rem; /* 16px : Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium相当 : Figma実測 */
    line-height: 1; /* Figma実測 */
  }

  .form__required {
    background-color: #6FA9D0; /* Figma実測 */
    color: #FFF; /* Figma実測 */
    font-family: "Roboto", sans-serif; /* Figma実測 */
    font-size: 0.75rem; /* 12px : Figma実測 */
    font-weight: 400; /* Roboto Regular : Figma実測 */
    padding: 3px 5px; /* Figma実測 */
    border-radius: 2px; /* Figma実測 */
    line-height: 1; /* Figma実測 */
  }

  .form__input,
  .form__textarea {
    background-color: #FFF; /* Figma実測 */
    border: 1px solid #B1D2E3; /* Figma実測 */
    border-radius: 3px; /* Figma実測 */
    padding: 15px; /* Figma実測 */
    font-family: "Roboto", "Noto Sans JP", sans-serif; /* Figma実測 */
    font-size: 0.875rem; /* 14px : Figma実測 */
    box-sizing: border-box;
  }

  .form__input::placeholder,
  .form__textarea::placeholder {
    color: #B2B8BF; /* Figma実測 */
  }

  .form__textarea::placeholder {
    letter-spacing: -0.2px; /* 375px幅のtextarea内側293pxに1行で収めるための微調整 */
  }

  .form__textarea {
    height: 296px; /* Figma実測 */
    resize: vertical;
  }

  .form__submit {
    position: relative; /* .btn__dotの絶対配置基点 */
    width: 261px; /* Figma実測 */
    height: 52px; /* Figma実測 */
    margin-inline: auto; /* 中央配置 : Figma実測 */
    padding: 0;
    background-color: #205287; /* Figma実測 */
    font-size: 1.25rem; /* 20px : Figma実測 */
  }

  .form__submit .btn__dot {
    position: absolute;
    top: 50%;
    right: 24.5px; /* ボタン右端から中心まで約29px : Figma実測 */
    transform: translateY(-50%);
    width: 9px; /* Figma実測 */
    height: 9px; /* Figma実測 */
    background-color: #FFF; /* Figma実測 */
  }

  .contact__privacy {
    margin-top: 30px; /* 送信ボタン下端から個人情報保護ブロックまで : Figma実測 */
  }

  .contact__privacy-heading {
    font-size: 1rem; /* 16px : Figma実測 */
    color: #274B66; /* Figma実測 */
    line-height: 1.5; /* Figma実測 */
  }

  .contact__privacy-text {
    font-size: 0.875rem; /* 14px : Figma実測 */
    color: #403D3D; /* Figma実測 */
    line-height: 1.5; /* Figma実測 */
  }
}

/* ===================================================
   PAGE: WORKS - works（施工事例）
   =================================================== */

.works__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: var(--space-16);
}

.works__intro {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-navy);
}

.works__categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: 60rem;
}

.works__category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--color-navy);
}

.works__category--active {
  background-color: var(--color-footer-bg);
  border-color: var(--color-footer-bg);
}

.works__category-icon {
  font-size: 0.75rem;
}

.works__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.works__card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.works__card-media {
  display: flex;
  gap: 0;
}

.works__card-figure {
  flex: 1;
  min-width: 0;
}

.works__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.works__card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
}

.works__card-meta {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-accent-soft);
  color: var(--color-navy);
}

.works__card-meta-label {
  font-weight: 700;
}

.works__card-text {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-navy);
}

.works__card-link {
  display: inline-block;
  width: fit-content;
  color: var(--color-button);
  font-weight: 700;
  text-decoration: underline;
}

.works__pagination {
  display: flex;
  justify-content: center;
  width: 100%;
}

.works__pagination-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.works__pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--color-navy);
}

a.works__pagination-link:hover {
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
}

.works__pagination-link--active {
  background-color: var(--color-footer-bg);
  border-color: var(--color-footer-bg);
}

.works__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

@media (min-width: 769px) {
  .works__inner {
    max-width: 1176px; /* Figma実測 */
    margin-inline: auto;
    gap: 0;
    padding-bottom: 180px; /* CTA最終要素〜フッター上端 : Figma実測（ブラウザ実測により調整） */
  }

  .works__intro {
    font-size: 1.875rem; /* 30px : Figma実測 */
    margin-top: 0;
  }

  .works__categories {
    margin-top: 57px; /* 導入文〜カテゴリボタン : Figma実測 */
    gap: 19px 26px; /* 行間19px・列間26px : Figma実測 */
  }

  .works__category {
    height: 50px; /* Figma実測 */
    box-sizing: border-box;
    border: 2px solid #b1d2e3; /* Figma実測 */
    background-color: #fff; /* Figma実測 */
    font-size: 21px; /* Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium : Figma実測 */
    color: #21355a; /* Figma実測 */
  }

  .works__category--active {
    background-color: #b1d2e3; /* Figma実測 */
    border-color: #b1d2e3; /* Figma実測 */
    color: #fff; /* Figma実測 */
  }

  .works__category-icon {
    font-size: 1rem; /* 19×15px相当（テキスト矢印のため近似） : Figma実測 */
  }

  .works__voice-button {
    margin-top: 33px; /* カテゴリボタン〜ボタン : Figma実測 */
    width: 290px; /* Figma実測 */
    height: 58px; /* Figma実測 */
    background-color: #205287; /* Figma実測 */
  }

  .works__voice-button .btn__text {
    font-size: 24px; /* Figma実測 */
  }

  .works__voice-button .btn__dot {
    width: 10px; /* Figma実測 */
    height: 10px; /* Figma実測 */
    right: 27px; /* Figma実測: 右端からドット中心まで32px */
  }

  .works__list {
    margin-top: 75px; /* ボタン〜施工事例一覧 : Figma実測 */
    gap: 128px; /* 各事例間 : Figma実測 */
  }

  .works__card-inner {
    gap: 0;
  }

  .works__card-figure {
    aspect-ratio: 340 / 230; /* SP版と同じ縦横比。Before/Afterを均等2分割し(基本ルールのflex:1を継続適用)、画像自体の縦横比差を表示上のクロップで吸収する */
    overflow: hidden;
  }

  .works__card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .works__card-body {
    margin-top: 31px; /* 画像列〜タイトル : Figma実測 */
  }

  .works__card-title {
    font-size: 22px; /* Figma実測 */
    color: #000; /* Figma実測 */
  }

  .works__card-meta {
    font-size: 18px; /* Figma実測 */
    font-weight: 700; /* 値部分も含めてBold : Figma実測 */
    font-family: "Noto Sans JP", sans-serif; /* Figma実測 */
    line-height: 1.8; /* Figma実測 */
    color: #000; /* Figma実測 */
    padding-block: 8px;
    border-bottom: none;
  }

  .works__card-meta:nth-of-type(1) {
    border-top: 1px solid var(--color-accent-soft); /* Figma実測：施工内容の上 */
  }

  .works__card-meta:nth-of-type(2) {
    border-bottom: 1px solid var(--color-accent-soft); /* Figma実測：施工場所の下 */
  }

  .works__card-text {
    font-size: 18px; /* Figma実測 */
    font-weight: 500; /* Noto Sans JP Medium : Figma実測 */
    line-height: 1.8; /* Figma実測 */
    color: #000; /* Figma実測 */
  }

  .works__card-link {
    margin-top: 8px;
    font-size: 16px;
  }

  .works__pagination {
    margin-top: 48px; /* 一覧〜ページネーション */
  }

  .works__pagination-link {
    font-size: 18px;
  }

  .works__cta {
    margin-top: 128px; /* 施工事例一覧〜CTA : Figma実測 */
    width: 1176px; /* width:100%がflex子要素で正しく展開されないため明示指定 */
  }

  .works__cta-item {
    display: block;
    width: 100%; /* flex子要素でwidth:100%が正しく展開されないケースがあるため明示指定 */
    border-radius: 8px; /* Figma実測 */
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .page-works .works__inner {
    gap: 0; /* 個別margin-topで配置するため一律gapは廃止 */
    padding-top: 35px; /* .page-hero下端から導入文まで : Figma実測 */
    padding-bottom: 101px; /* CTA下端〜フッターまで : Figma実測 */
  }

  .page-works .works__intro {
    width: min(340px, 100%);
    margin-inline: auto;
    font-size: 17px; /* Figma実測 */
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.4px; /* 375px幅で明示改行の各行が1行に収まるよう微調整 */
    color: #21355A; /* Figma実測 */
  }

  .page-works .works__categories {
    width: min(327px, 100%); /* Figma実測 */
    margin-inline: auto;
    margin-top: 31px; /* 導入文下端からカテゴリまで : Figma実測 */
    row-gap: 10px; /* Figma実測 */
    column-gap: 8px; /* Figma実測 */
  }

  .page-works .works__categories > li {
    display: flex; /* liのインラインフォーマッティングによる余分な高さ(strut)を解消 */
    flex: 0 1 auto; /* 内容幅で自動サイズし、カテゴリ数が増減しても折り返して表示する */
  }

  .page-works .works__category {
    display: flex;
    height: 40px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 8px; /* カテゴリ名と三角アイコンの間隔 : スクリーンショット目視で調整 */
    padding-inline: 8px; /* 「文字＋三角」ひとまとまりが中央に収まる範囲で最小限に */
    border: 2px solid #B1D2E3; /* Figma実測 */
    border-radius: 8px; /* Figma実測 */
    background-color: #FFF; /* Figma実測 */
    font-size: 14px; /* Figma実測 */
    font-weight: 500; /* Zen Maru Gothic Medium : Figma実測 */
    color: #21355A; /* Figma実測 */
    text-align: center;
  }

  .page-works .works__category-icon {
    flex-shrink: 0; /* 通常のflexアイテムに戻し、文字とひとまとまりで中央配置 */
  }

  .page-works .works__category--active {
    background-color: #B1D2E3; /* Figma実測 */
    border-color: #B1D2E3; /* Figma実測 */
    color: #FFF; /* Figma実測 */
    font-weight: 700; /* Figma実測 */
  }

  .page-works .works__voice-button {
    position: relative;
    width: 261px; /* Figma実測 */
    height: 52px; /* Figma実測 */
    margin-top: 28px; /* カテゴリ下端からボタンまで : Figma実測 */
    padding: 0;
    background-color: #205287; /* Figma実測 */
  }

  .page-works .works__voice-button .btn__text {
    font-size: 20px; /* Figma実測 */
    font-weight: 700;
  }

  .page-works .works__voice-button .btn__dot {
    position: absolute;
    top: 50%;
    right: 24.5px; /* 右端から中心まで約29px : Figma実測 */
    transform: translateY(-50%);
    width: 9px; /* Figma実測 */
    height: 9px; /* Figma実測 */
    background-color: #FFF; /* Figma実測 */
  }

  .page-works .works__list {
    width: min(340px, 100%); /* Figma実測 */
    margin-inline: auto;
    margin-top: 71px; /* ボタン下端から一覧まで : Figma実測 */
    gap: 80px; /* カード間 : Figma実測 */
  }

  .page-works .works__card-inner {
    gap: 0; /* 個別margin-topに切り替え */
  }

  .page-works .works__card-media {
    flex-direction: column;
  }

  .page-works .works__card-figure {
    flex: none; /* aspect-ratio指定を有効にするためflex:1を解除 */
    aspect-ratio: 340 / 230; /* Figma実測 */
    overflow: hidden;
    border-radius: 0; /* Figma実測 */
  }

  .page-works .works__card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Figma実測 */
    object-position: center;
  }

  .page-works .works__card-body {
    gap: 0; /* 個別margin-topに切り替え */
    margin-top: 17px; /* 画像下端からタイトルまで : Figma実測 */
  }

  .page-works .works__card-title {
    font-size: 20px; /* 全カード共通 : Figma実測（20px/22pxの揺れを統一） */
    font-weight: 700;
    color: #000; /* Figma実測 */
    line-height: 1.8; /* Figma実測 */
  }

  .page-works .works__card-meta,
  .page-works .works__card-meta-label {
    font-family: var(--font-ja-sub); /* Noto Sans JP : Figma実測 */
    font-weight: 700; /* Figma実測 */
    color: #000; /* Figma実測 */
  }

  .page-works .works__card-meta {
    margin-top: 0;
    padding-bottom: 14px; /* 文字下端から罫線まで : Figma実測 */
    padding-left: 8px; /* 左インデント : Figma実測 */
    border-bottom: 1px solid var(--color-accent-soft);
    font-size: 14px; /* Figma実測 */
    line-height: 1.8; /* Figma実測 */
  }

  .page-works .works__card-meta:nth-of-type(1) {
    margin-top: 24px; /* タイトル下端から施工内容まで : Figma実測 */
  }

  .page-works .works__card-meta:nth-of-type(2) {
    margin-top: 7px; /* 罫線から施工場所まで : Figma実測 */
  }

  .page-works .works__card-text {
    margin-top: 14px; /* 罫線から説明文まで : Figma実測 */
    font-family: var(--font-ja-sub); /* Noto Sans JP : Figma実測 */
    font-size: 14px; /* Figma実測 */
    font-weight: 500; /* Noto Sans JP Medium : Figma実測 */
    line-height: 1.8; /* Figma実測 */
    color: #000; /* Figma実測 */
  }

  .page-works .works__card-link {
    margin-top: 8px;
    font-size: 14px;
  }

  .page-works .works__pagination {
    margin-top: 32px; /* 一覧〜ページネーション */
  }

  .page-works .works__pagination-link {
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: 13px;
  }

  .page-works .works__cta {
    margin-top: 80px; /* 一覧下端からCTAまで : Figma実測 */
    gap: 21px; /* Figma実測 */
  }

  .page-works .works__cta-item {
    display: block;
    border-radius: 8px; /* Figma実測 */
    overflow: hidden;
  }
}

/* ===================================================
   PAGE: 404 - error-404（ページが見つかりません）
   =================================================== */

.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 100vh;
  padding-top: calc(var(--header-height-pc) + var(--space-10));
  padding-bottom: var(--space-16);
  text-align: center;
}

.error-404__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.error-404__code {
  font-size: 6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-accent);
}

.error-404__label {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.error-404__text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-navy);
}

.error-404__button {
  margin-top: var(--space-4);
}

@media (min-width: 769px) {
  .error-404__button .btn__dot {
    right: var(--space-2); /* 右paddingの内側、テキストと重ならない位置へ明示配置（他ページのbtn__dot実装踏襲） */
  }
}

@media (max-width: 768px) {
  .error-404__inner {
    padding-top: calc(109px + var(--space-8)); /* 実測ヘッダー高さ109px : style.css .header__inner min-height（SP）に準拠 */
    padding-bottom: var(--space-10);
    padding-inline: var(--container-pad-sp);
  }

  .error-404__code {
    font-size: 3.75rem;
  }

  .error-404__label {
    font-size: 1.125rem;
  }

  .error-404__text {
    font-size: 0.875rem;
  }

  .error-404__button {
    max-width: 20rem;
  }
}

@media (max-width: 360px) {
  .page-works .works__intro {
    font-size: 16px; /* 360px幅で明示改行(3行)の各行が収まるよう縮小。letter-spacing:-0.4pxは維持 */
  }
}