/* ==========================================================================
   グローバルリセット
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* ==========================================================================
   改行位置の調整（見出し・ボタン・カードなどの短い文）
   使い方: 改行してよい区切り（「、」「。」の後・文節の区切り）ごとに <span class="phrase"> で囲む。
   幅に収まらないときは span の境目で改行し、単語の途中や、行末の1〜2文字だけが次の行に落ちる改行を防ぐ。
   span 1つ分も収まらない幅のときだけ、span の中の <wbr> の位置（無ければどこでも）で改行する。
   長い本文の段落には使わない（ふつうの折り返しのまま）。
   ========================================================================== */
.phrase {
  display: inline-block;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   共通ヘッダー
   Figma: header-content / node-id 17:52（1920px）, node-id 139:864（1024px）,
          SP-header / node-id 90:1083（SP）
   使い方: common_header.php を各ページから <?php include 'common_header.php'; ?> で読み込む
   ブレークポイント: 1023px以下でSPレイアウト（ロゴ + ハンバーガーアイコン）に切り替え
   1024px〜1920pxの間は clamp()/vw で余白・フォントサイズ・要素サイズを滑らかに補間する。
   1920px超は上限値、1024px未満（SP版に切り替わる直前）は下限値で固定（clamp）。
   1920px超は、ロゴとメニューが画面の両端に離れすぎないよう、1920px時の幅（1780px）で中央に置く。
   ハンバーガーボタンで開くSPメニューは、下の「SPハンバーガーメニュー」ブロックに記載。
   ========================================================================== */
.header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 35px max(clamp(20px, calc(-37.14px + 5.58vw), 70px), calc((100% - 1780px) / 2));
  background-color: #ffffff;
}

.header__logo {
  display: block;
  flex-shrink: 0;
  width: clamp(331px, calc(261.29px + 6.81vw), 392px);
}

.header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ロゴの hover（ヘッダー・SPメニュー・CTA（フッター）のロゴ共通）
   hover対応デバイス（PC）のみ、マウスオーバー時に上へ3px浮き上がる（0.3秒・ease でゆっくり）。
   タップのみのデバイス（SP）は :hover が押下後も残るため付けない。
   キーボード操作用に :focus-visible でも同じように浮き上がる */
@media (hover: hover) {
  .header__logo,
  .sp-menu__logo,
  .cta-section__logo {
    transition: transform 0.3s ease;
  }

  .header__logo:hover,
  .sp-menu__logo:hover,
  .cta-section__logo:hover {
    transform: translateY(-3px);
  }
}

.header__logo:focus-visible,
.sp-menu__logo:focus-visible,
.cta-section__logo:focus-visible {
  transform: translateY(-3px);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(23px, calc(-23.86px + 4.58vw), 64px);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(23px, calc(-23.86px + 4.58vw), 64px);
}

.header__nav-item {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, calc(10.57px + 1.12vw), 32px);
  line-height: normal;
  letter-spacing: 0.15em;
  color: #04132f;
  text-decoration: none;
  white-space: nowrap;
}

.header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(11px, calc(4.14px + 0.67vw), 17px);
  padding: 30px clamp(26px, calc(-18.57px + 4.35vw), 65px);
  background-color: #d4af37;
  text-decoration: none;
  white-space: nowrap;
}

.header__cta-icon {
  flex-shrink: 0;
  width: clamp(30px, calc(18.57px + 1.12vw), 40px);
  height: clamp(30px, calc(18.57px + 1.12vw), 40px);
}

.header__cta-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, calc(19.71px + 0.22vw), 24px);
  line-height: normal;
  letter-spacing: 0.15em;
  color: #04132f;
}

/* --------------------------------------------------------------------------
   ヘッダーのhover（Figma: 文字リンク node-id 192:904 / CTAボタン node-id 104:1681）
   - 文字リンク: 文字色を #04132f → #4c78ca に変更（Figmaの#1a4492からお客様指定で変更）
   - CTAボタン: 背景を薄い色（#f2e6bf）に変更し、アイコンを白に、
     translateY(-4px)で浮き上がらせ、淡い影を付ける（文字色は変えない）。
     Figmaにある5pxの枠は、お客様指定で付けない。
     影は白背景になじむよう、紺系の低コントラストな色にしている。
     アイコン（紺色のSVG画像）は filter で白に変換する。
   - hoverアニメーションはPC版（1024px以上かつhover可能な端末）のみ。
     1023px以下はナビ・CTAボタン自体が非表示のため、SP用のタップ時スタイルは不要
     （SPメニュー内の項目・ボタンのタップ時スタイルは「SPハンバーガーメニュー」ブロックに記載）。
   -------------------------------------------------------------------------- */
.header__cta {
  box-shadow: 0 0 0 rgba(4, 19, 47, 0);
}

@media (hover: hover) and (min-width: 1024px) {
  .header__nav-item {
    transition: color 0.4s ease;
  }

  .header__nav-item:hover {
    color: #4c78ca;
  }

  .header__cta {
    transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  }

  .header__cta-icon {
    transition: filter 0.4s ease;
  }

  .header__cta:hover {
    background-color: #f2e6bf;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(4, 19, 47, 0.15);
  }

  .header__cta:hover .header__cta-icon {
    filter: brightness(0) invert(1);
  }
}

.header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 48px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.header__hamburger img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 1023px以下: SPレイアウト（ロゴ + ハンバーガーアイコン）に切り替え */
@media (max-width: 1023px) {
  .header {
    align-items: flex-end;
    gap: 0;
    padding: 0 16px;
  }

  .header__logo {
    width: 174px;
  }

  .header__actions {
    display: none;
  }

  .header__hamburger {
    display: flex;
  }
}

/* ==========================================================================
   SPハンバーガーメニュー（common_header.php内、ヘッダーの直後）
   Figma: menu-overlay-sp / node-id 103:1599（開いた状態）, node-id 197:926（メニュー項目タップ時）
   開閉: js/script.js で html に .is-sp-menu-open を付け外しする。
   - メニュー（.sp-menu）は画面上部に固定し、translateY(-100%) ⇔ 0 で上から下へスライド（300ms、ease-in）。
     閉じるときは同じtransitionで上へ戻る。
   - 背景のオーバーレイ（.sp-menu-overlay）はFigmaに指定が無いため、お客様指定の rgba(0, 0, 0, 0.4)。
     メニューと同じ300ms、ease-inでフェードする。
   - メニュー本体の背景色はFigmaに指定が無いため、SPヘッダーと同じ白（#ffffff）にしている。
   - 閉じている間は visibility: hidden でタップ・フォーカスできないようにする
     （閉じるアニメーションが終わってから hidden になるよう、visibility は300ms遅らせて切り替える）。
   - 1024px以上では表示しない（開いたまま画面幅を広げた場合はJS側でも閉じる）。
   コンテンツ幅はFigma（375px幅で左右27.5px）に合わせ、左右28pxの余白で画面幅いっぱいに広げる。
   メニュー項目の文字色 #030f26・区切り線は、Figmaの紺（#04132f）+ 黒20%の重ね合わせ。
   ========================================================================== */
.sp-menu-overlay,
.sp-menu {
  display: none;
}

@media (max-width: 1023px) {
  .sp-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in, visibility 0s linear 0.3s;
    -webkit-tap-highlight-color: transparent;
  }

  .sp-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    display: block;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #ffffff;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.3s ease-in, visibility 0s linear 0.3s;
  }

  .is-sp-menu-open .sp-menu-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in, visibility 0s linear 0s;
  }

  .is-sp-menu-open .sp-menu {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease-in, visibility 0s linear 0s;
  }

  /* メニューを開いている間は背面のページをスクロールさせない */
  html.is-sp-menu-open {
    overflow: hidden;
  }
}

.sp-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 12px 28px 23px;
}

.sp-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-menu__logo {
  display: block;
  flex-shrink: 0;
  width: 174px;
}

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

.sp-menu__close {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sp-menu__close img {
  display: block;
  width: 44px;
  height: 44px;
}

.sp-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 項目はタップしやすいよう、コンテナ幅いっぱいに広げる */
.sp-menu__nav-item {
  display: flex;
  align-items: center;
  gap: 17px;
  width: 100%;
  padding: 12px 0;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.sp-menu__nav-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
}

.sp-menu__nav-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #757575;
}

.sp-menu__nav-divider {
  display: block;
  width: 100%;
  height: 1px;
}

/* メニュー項目のタップ時（Figma: node-id 197:926）: 日本語 #3d60a2・英語 #a1b3d4 に変更 */
.sp-menu__nav-item:active .sp-menu__nav-title {
  color: #3d60a2;
}

.sp-menu__nav-item:active .sp-menu__nav-label {
  color: #a1b3d4;
}

.sp-menu__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-menu__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  border-radius: 5px;
  background-color: #d4af37;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* タップ時: ほかのCTAボタンのSP版（.cta-button:active）と同じく背景色を #f2e6bf に変更 */
.sp-menu__button:active {
  background-color: #f2e6bf;
}

.sp-menu__button-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
}

.sp-menu__button-icon {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.sp-menu__button-number {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  white-space: nowrap;
}

/* FigmaではRoboto SemiBold指定だが、Robotoに日本語の字形が無いため Noto Sans JP で表示する */
.sp-menu__button-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  white-space: nowrap;
}

.sp-menu__button-note {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sp-menu-overlay,
  .sp-menu,
  .is-sp-menu-open .sp-menu-overlay,
  .is-sp-menu-open .sp-menu {
    transition: none;
  }
}

/* ==========================================================================
   共通FV
   Figma: FV / node-id 17:3（1920px）, 140:821（1024px）, SP-FV / node-id 90:986（SP）
   使い方: top_fv.php を各ページから <?php include 'top_fv.php'; ?> で読み込む（$fv_variant/$fv_image/
          $fv_eyebrow/$fv_heading_lines は include 前に定義する）。
   ブレークポイント: 1023px以下でSPレイアウトに切り替え。1024px〜1920pxの間はheader同様、
   clamp()/vwで余白・フォントサイズ・要素サイズを滑らかに補間する（1920px超は上限値、
   1024px未満は下限値で固定）。
   高さは .fv--top（Topページ用）のみ定義。他ページを実装する際は高さ違いの修飾クラスを追加する。
   背景写真はFigma上でも1920px/1024px/SPそれぞれで異なる切り抜き位置になっているため、
   固定値のclampではなくobject-fit: cover + object-positionで再現する（任意の幅で正しく
   カバー表示されるため、デスクトップ域の中間サイズでも破綻しない）。
   ========================================================================== */
.fv {
  position: relative;
  overflow: hidden;
}

.fv--top {
  height: 600px;
}

.fv__photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 13.5% 34.34%;
}

.fv__overlay {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(601px, calc(215.86px + 37.61vw), 938px);
  background-color: rgba(4, 19, 47, 0.8);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.fv__content {
  position: absolute;
  top: 111px;
  left: clamp(40px, calc(-58.27px + 9.6vw), 126px);
  display: flex;
  flex-direction: column;
  gap: 41px;
  color: #ffffff;
}

.fv__eyebrow {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, calc(18.86px + 0.89vw), 36px);
  line-height: normal;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.fv__heading {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, calc(25.14px + 2.23vw), 68px);
  line-height: 1.4;
}

.fv__heading-line {
  display: block;
  white-space: nowrap;
}

.fv__heading-line--accent {
  color: #d4af37;
}

/* 1023px以下: SPレイアウトに切り替え（写真の切り抜き位置・オーバーレイ形状・文字サイズが変わる） */
@media (max-width: 1023px) {
  .fv__photo {
    object-position: 64.13% 0%;
  }

  .fv__overlay {
    width: 60.67%;
    clip-path: polygon(0 0, 100% 0, 30.07% 100%, 0 100%);
  }

  .fv__content {
    left: 0;
    width: 100%;
    padding: 0 16px;
    gap: 14px;
    box-sizing: border-box;
    text-shadow: 0 0 4.1px rgba(0, 0, 0, 0.3);
  }

  .fv__eyebrow {
    font-size: 20px;
  }

  .fv__heading {
    font-size: 36px;
  }
}

/* ==========================================================================
   下層ページ共通FV（Menu / About など。Topページ用の .fv とは別構造）
   Figma: Menuページ FV / node-id 46:235（1920px）, node-id 166:1462（1024px）,
          SP-FV / node-id 95:814（SP）
   使い方: common_page-fv.php を各ページから <?php include 'common_page-fv.php'; ?> で読み込む
          （$page_fv_image/$page_fv_label/$page_fv_title を include 前に定義する）。
   高さ・オーバーレイなどの装飾はページ共通で、写真・英字ラベル・日本語タイトルだけが変わる。
   文字位置は他セクションのコンテンツ幅（1400px）には合わせず、Figmaの配置どおり
   （左端からの絶対位置）にしている（PC版は意図的にコンテンツ幅の外側）。
   ブレークポイント: 1023px以下でSPレイアウトに切り替え。1024px〜1920pxの間は
   clamp()/vwで1920px時点と1024px時点の値の間を滑らかに補間する（1920px超は上限値で固定）。
   ========================================================================== */
.page-fv {
  position: relative;
  height: 360px;
  overflow: hidden;
}

.page-fv__photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.page-fv__overlay {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(601px, calc(347.27px + 24.78vw), 823px);
  background-color: rgba(4, 19, 47, 0.8);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.page-fv__content {
  position: absolute;
  top: 111px;
  left: clamp(40px, calc(-58.28px + 9.6vw), 126px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #ffffff;
}

.page-fv__label {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, calc(18.86px + 0.89vw), 36px);
  line-height: normal;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.page-fv__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, calc(29.71px + 1.79vw), 64px);
  line-height: 1.4;
  white-space: nowrap;
}

/* 1023px以下: SPレイアウトに切り替え（高さ200px・文字は上下中央・写真の切り抜きとオーバーレイ形状が変わる） */
@media (max-width: 1023px) {
  .page-fv {
    height: 200px;
  }

  .page-fv__photo {
    inset: 0.67% auto auto 0;
    width: 136%;
    height: auto;
    max-width: none;
  }

  .page-fv__overlay {
    width: 49.18%;
    clip-path: polygon(0 0, 100% 0, 71.24% 100%, 0 100%);
  }

  .page-fv__content {
    top: 50%;
    left: 0;
    width: 100%;
    padding: 0 16px;
    gap: 3px;
    transform: translateY(-50%);
    text-shadow: 0 0 4.1px rgba(0, 0, 0, 0.3);
  }

  .page-fv__label {
    font-size: 16px;
  }

  .page-fv__title {
    font-size: 24px;
  }

  /* Aboutページ: 写真（1376×768）は幅136%・上端揃えのため、画面幅が広がるほど写真の上部（窓）しか
     見えず、人物（ヘルメットが写真の上から約28%〜）が隠れてしまう。そこで400px〜1023pxの間で
     - 幅: 400px時点の136%（544px）→ 1023px時点の100%（1023px）へ線形に縮める
       （width = 76.89vw + 236.4px。400px未満は min() で136%のまま＝SPデザインどおり）
     - 位置: ヘルメット上端（写真の上から28%）が、400px時点の元の位置（FV上から約85px）から
       1023px時点でFV上端付近（約12px）へ来るよう、写真を上へずらす
       （top = 94.93px - 23.74vw。約395px未満は min() で元の0.67%のまま）
     1023px時点で写真の上から約26%〜61%（ヘルメット〜胸元）が表示され、右側の人物も横幅に収まる。 */
  .page-fv--about .page-fv__photo {
    top: min(0.67%, calc(94.93px - 23.74vw));
    width: min(136%, calc(76.89vw + 236.4px));
  }
}

/* ==========================================================================
   下層ページ共通パンくずリスト（Menu / About など）
   Figma: breadcrumb-container / node-id 47:280（1920px）, SP / node-id 95:869（SP）
   使い方: common_breadcrumb.php を common_page-fv.php の直後に <?php include 'common_breadcrumb.php'; ?> で読み込む
          （現在のページ名は $page_fv_title を流用するため、追加の変数定義は不要）。
   FVとの間隔はPC版50px・SP版0px。.breadcrumb（外側・白背景）のpadding-topで確保する。
   左端は下のセクションのコンテンツ幅（PC版1400px・1024px時点944px。1920px〜1024pxの間は
   announcement-bar__inner等と同じ式のclamp()）に揃えるため、.breadcrumb__innerを同じ幅で
   中央配置している。1024px版のデザインは無いため、文字サイズ・HOMEリンク幅は1920px時点の値を
   上限、SP版の値を下限とするclamp()で補間する。
   ブレークポイント: 1023px以下でSPレイアウト（幅100%・左右16px余白・高さ45px）に切り替え。
   ========================================================================== */
.breadcrumb {
  padding-top: 50px;
  background-color: #ffffff;
}

.breadcrumb__inner {
  display: flex;
  align-items: center;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  height: 33px;
  margin: 0 auto;
}

.breadcrumb__home {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: clamp(62px, calc(43.71px + 1.79vw), 78px);
  padding-left: 5.5px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, calc(13.86px + 0.11vw), 16px);
  line-height: normal;
  letter-spacing: 0.06em;
  color: #181c39;
  text-decoration: none;
  white-space: nowrap;
}

.breadcrumb__current {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
  white-space: nowrap;
}

/* 1023px以下: SPレイアウトに切り替え（FVとの間隔0px・幅100%・左右16px余白・高さ45px） */
@media (max-width: 1023px) {
  .breadcrumb {
    padding-top: 0;
  }

  .breadcrumb__inner {
    width: 100%;
    height: 45px;
    margin: 0;
    padding: 0 16px;
  }

  .breadcrumb__home {
    height: 100%;
    padding-left: 0;
  }
}

/* ==========================================================================
   service-menu-sectionセクション（Menuページ）
   Figma: service-menu-header-container / node-id 76:1134（1920px）, node-id 165:1195（1024px）,
          SP版 / node-id 96:879（SP）
   使い方: menu_service-menu-section.php を menu.php から common_breadcrumb.php の直後に
          <?php include 'menu_service-menu-section.php'; ?> で読み込む。
   ※ Topページのservice-section（.service-section〜）とは別セクションのため、クラス名は .service-menu-〜 で分けている。
   このセクションは「.service-menu-header-container」と、同じ<section>内でその下に置く「menu-card-container」（下の専用ブロックに記載）で構成する。
   .service-menu-section はパンくずリストとの間隔（PC版150px・SP版50px）をmargin-topで、
   次のセクション（process-section）との間隔（PC版150px・SP版80px）をpadding-bottomで持つ（他セクションと同じ、前セクション側が間隔を持つ運用）。
   紺色の背景は画面幅いっぱいに広がる帯（.service-menu-header-container）で、その中のコンテンツ
   （.service-menu-header-container__inner）をPC版1400px・1024px版944px（1920px〜1024pxの間は
   breadcrumb__inner等と同じ式のclamp()で滑らかに変化）・SP版343px（左右16px余白）で中央配置している。
   上下のpaddingはPC版80px・SP版60px、要素間の間隔はPC版・SP版とも55px。
   フォントサイズ・字間は1920px時点と1024px時点で同じ値（変化しない）ため固定値。letter-spacingは
   Figma上でフォントサイズの3%（導入文PC）・6%（英字）・8%（見出し・日本語ボタン名・導入文SP）で一定のためem指定。
   アンカーボタンはPC版が横5列、1024px版が3列×2行（1920px時点のボタン幅264pxは1400pxの5等分）。
   1920px〜1024pxの間は幅が縮み、最長の「バリアフリーリフォーム」（ボタン内側241px必要）が
   5列だと収まらなくなるため、1760px以上のときだけ5列、それ未満は3列にしている。
   ボタンの高さはFigma上のコンテナ高さ（149px）ではなく中身に合わせて自動（1920px時点で157px）。
   導入文の文中の改行（「該当箇所へ移動」の後）は、その行が収まる1200px以上のみ有効（PC版）。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.service-menu-section {
  margin-top: 150px;
  padding-bottom: 150px;
}

.service-menu-header-container {
  padding: 80px 0;
  background-color: #04132f;
}

.service-menu-header-container__inner {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
}

.service-menu-only--sp {
  display: none;
}

.service-menu-break--sp {
  display: none;
}

.service-menu-break--pc {
  display: none;
}

.service-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
}

.service-menu-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
}

.service-menu-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.service-menu-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.service-menu-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.service-menu-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #ffffff;
  white-space: nowrap;
}

.service-menu-intro {
  width: 100%;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.service-menu-anchors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.service-menu-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 15px 0;
  border: 1px solid #ffffff;
  background-color: #1d2a43;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}

.service-menu-anchor__label {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.service-menu-anchor__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* 「耐震・断熱リフォーム」はFigma上で「・」が20px（字間-6%）、「リフォーム」が23px（字間-5%）になっている */
.service-menu-anchor__name-dot {
  font-size: 20px;
  letter-spacing: -0.06em;
}

.service-menu-anchor__name-small {
  font-size: 23px;
  letter-spacing: -0.05em;
}

/* 「バリアフリーリフォーム」は文字数が多いため、全体が23px（字間-5%）になっている */
.service-menu-anchor--accessibility .service-menu-anchor__name {
  font-size: 23px;
  letter-spacing: -0.05em;
}

.service-menu-anchor__icon {
  display: block;
  width: 50px;
  height: 50px;
}

/* hover: 背景色を #1d2a43 → #04132f に変更（文字・▼アイコン・枠線の色は変えない）
   PC版（1024px以上かつhover可能な端末）のみ0.4s・easeで色を変化させる（CTAボタン等と同じ速度）。
   1023px以下はアニメーションせず、タップ中（:active）のみ背景色を切り替える（下のSP用@media内）。 */
@media (hover: hover) and (min-width: 1024px) {
  .service-menu-anchor {
    transition: background-color 0.4s ease;
  }

  .service-menu-anchor:hover {
    background-color: #04132f;
  }
}

/* 1760px以上: アンカーボタンが横5列に並ぶ（1920px時点のボタン幅は264px） */
@media (min-width: 1760px) {
  .service-menu-anchors {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* 1200px以上: 導入文の文中の改行が有効になる（それ未満はコンテンツ幅内で自然に折り返す） */
@media (min-width: 1200px) {
  .service-menu-break--pc {
    display: inline;
  }
}

/* 1023px以下: SPレイアウトに切り替え（見出しの文言・パンくずリストとの間隔・ボタンの大きさとフォントが変わる） */
@media (max-width: 1023px) {
  .service-menu-section {
    margin-top: 50px;
    padding-bottom: 80px;
  }

  .service-menu-header-container {
    padding: 60px 16px;
  }

  .service-menu-header-container__inner {
    width: 100%;
    margin: 0;
  }

  .service-menu-only--pc {
    display: none;
  }

  .service-menu-only--sp {
    display: inline;
  }

  .service-menu-space--pc {
    display: none;
  }

  .service-menu-break--sp {
    display: inline;
  }

  .service-menu-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .service-menu-header__title {
    font-size: 23px;
  }

  .service-menu-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .service-menu-header__divider {
    height: 1.2px;
  }

  .service-menu-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .service-menu-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .service-menu-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .service-menu-anchors {
    gap: 12px 8px;
  }

  .service-menu-anchor {
    gap: 5px;
    padding: 7px 0;
    -webkit-tap-highlight-color: transparent;
  }

  .service-menu-anchor:active {
    background-color: #04132f;
  }

  .service-menu-anchor__label {
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  .service-menu-anchor__name {
    font-size: 18px;
  }

  /* 「耐震・断熱リフォーム」「バリアフリーリフォーム」はSP版のみ、ラベル・ボタン名が小さく細いフォントになる */
  .service-menu-anchor--seismic .service-menu-anchor__label {
    font-size: 12px;
    letter-spacing: 0;
  }

  .service-menu-anchor--seismic .service-menu-anchor__name,
  .service-menu-anchor--accessibility .service-menu-anchor__name {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .service-menu-anchor__name-dot,
  .service-menu-anchor__name-small {
    font-size: inherit;
    letter-spacing: inherit;
  }

  .service-menu-anchor__icon {
    width: 28px;
    height: 32px;
  }
}

/* 380px以下: ボタン内の文字がはみ出すため、アンカーボタンが横2列×縦3段に切り替わる
   （ボタン幅は2列で均等・間隔はSP版と同じ。5つ目のボタンは3段目の左端に、他と同じ幅で並ぶ） */
@media (max-width: 380px) {
  .service-menu-anchors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   menu-card-container（Menuページ・service-menu-section内、service-menu-header-containerの下）
   Figma: menu-card-container / node-id 169:1488（1920px）, node-id 165:1234（1024px・水回りリフォームのカードのみ）,
          SP版 / node-id 99:577（SP）
   5枚のメニューカード（.menu-card）は同じクラスの共通デザイン。サブタイトル（.submenu-card__lead）や
   「まとめてお得」（.bundle-offer）が無いカードは、その要素を出力しないだけで配置ルールは共通。
   間隔はFigmaの数値ではなく指定値: service-menu-header-containerとの間隔 PC版150px・SP版80px、
   カード同士の間隔 PC版100px・SP版80px。カード下の余白（次セクションとの間隔）は .service-menu-section の
   padding-bottom（PC版100px・SP版80px）が持つ。
   コンテンツ幅はPC版1400px・1024px版944px（1920px〜1024pxの間は.service-menu-header-container__innerと同じ式のclamp()）、
   SP版はフレーム幅に対して左右12px余白（Figma上のSP版menu-card-containerは375pxフレームの351px幅）。
   1920px〜1024pxの間の値は、1920px時点と1024px時点のFigmaの値の間をclamp()で直線補間している（範囲外は上限・下限で固定）:
     カード見出し部の左右余白 35px→0px / 紹介文の幅 661px→582px / 写真の幅 561px→362px（1024px版は残り幅いっぱい）/
     見出し部内の要素間隔 41px→24px。文字サイズ・字間は両方で同じ値のため固定。
   サブメニューカードは、1920px時点は横4列（幅315px）、1024px版は横2列（2×2）。列数はclamp()で連続的に
   変えられないため、サブメニュー名（24px・折り返さない）が収まる幅の限界に近い1700px以上で4列、それ未満は2列に切り替える。
   「まとめてお得」も同じ1700px以上で横1行（ラベル＋本文）、それ未満は縦積み（1024px版）。
   1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.menu-card-container {
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 150px auto 0;
}

.menu-card-break--sp {
  display: none;
}

.menu-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-top: 1px solid #030f26;
}

.menu-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 313px;
  padding: 30px clamp(0px, calc(3.906vw - 40px), 35px);
}

.menu-card__header-text {
  display: flex;
  flex: 0 0 clamp(582px, calc(491.7px + 8.82vw), 661px);
  flex-direction: column;
  gap: clamp(24px, calc(4.57px + 1.897vw), 41px);
}

.menu-card__label {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
}

.menu-card__title-badge {
  padding: 7px 12px;
  background-color: #030f26;
}

.menu-card__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.menu-card__description p {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
}

.menu-card__photo {
  position: relative;
  flex: 0 0 clamp(362px, calc(134.6px + 22.21vw), 561px);
  align-self: stretch;
  overflow: hidden;
}

.menu-card__photo img,
.submenu-card__photo img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.menu-card__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  background-color: #030f26;
}

.menu-card__submenus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.submenu-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
  min-width: 0;
}

.submenu-card__header {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.submenu-card__title-wrapper {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 5px 0;
  border-bottom: 1px solid #ffffff;
}

.submenu-card__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
}

.submenu-card__lead {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.submenu-card__photo {
  position: relative;
  height: 143px;
  overflow: hidden;
}

.submenu-card__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 56px;
  padding: 0 10px;
  background-color: #ffffff;
}

.submenu-card__price-text {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
  text-align: right;
  white-space: nowrap;
}

/* 料金目安のあとの空白（PC版は全角スペース相当、SP版は改行） */
.submenu-card__price-label {
  margin-right: 1em;
}

.submenu-card__price-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.06em;
}

/* 「まとめてお得」: 1024px版は縦積み（ラベルの下に本文） */
.bundle-offer {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #d4af37;
}

.bundle-offer__label {
  display: flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  height: 40px;
  padding: 0 30px 0 23px;
  background-color: #ffffff;
}

.bundle-offer__icon {
  display: block;
  width: 40px;
  height: 40px;
}

.bundle-offer__label-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

.bundle-offer__text-wrapper {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 10px 25px;
  background-color: rgba(212, 175, 55, 0.17);
}

.bundle-offer__text {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

/* 1700px以上: サブメニューが横4列（1920px時点の幅315px・間隔は1920px時点26.67px→1700px時点20px）、
   「まとめてお得」が横1行（数字だけOswaldの大きい文字）になる */
@media (min-width: 1700px) {
  .menu-card__submenus {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(20px, calc(3.03vw - 31.5px), 26.67px);
  }

  .bundle-offer {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
  }

  .bundle-offer__label {
    align-self: auto;
    height: auto;
  }

  .bundle-offer__text-wrapper {
    height: auto;
  }

  .bundle-offer__text {
    font-size: 24px;
  }

  .bundle-offer__num {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: 0.06em;
  }

  .bundle-offer__num--first {
    font-weight: 600;
  }
}

/* 1023px以下: SP版デザインに切り替え（1列で縦積み・サブメニューは2列・文字サイズが小さくなる） */
@media (max-width: 1023px) {
  .menu-card-container {
    gap: 80px;
    width: auto;
    margin: 80px 12px 0;
  }

  .menu-card-break--sp {
    display: inline;
  }

  .menu-card__header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 15px;
    min-height: 0;
    padding: 12px 0 0;
  }

  .menu-card__header-text {
    flex: none;
    gap: 16px;
  }

  .menu-card__label {
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .menu-card__title {
    font-weight: 500;
    font-size: 24px;
  }

  .menu-card__description p {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .menu-card__photo {
    flex: none;
    align-self: auto;
    height: 150px;
  }

  .menu-card__content {
    gap: 15px;
    padding: 15px;
  }

  .menu-card__submenus {
    gap: 13px;
  }

  .submenu-card {
    gap: 15px;
  }

  .submenu-card__header {
    gap: 6px;
  }

  .submenu-card__title-wrapper {
    height: auto;
    padding: 2px 0;
  }

  .submenu-card__title {
    font-size: 18px;
  }

  /* 「浴室（ユニットバス）」は（ユニットバス）だけ13px */
  .submenu-card__title-small {
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  /* 「壁紙（クロス）張替え」は2列の幅に収めるため（クロス）だけ字間が詰まる */
  .submenu-card__title-narrow {
    letter-spacing: -0.07em;
  }

  /* 外装リフォームの2枚と「屋根裏の断熱強化」は、18pxのままだと幅に収まらないため文字サイズ・字間を調整 */
  .submenu-card__title--compact {
    font-size: 16px;
  }

  .submenu-card__title--tight {
    letter-spacing: 0.04em;
  }

  .submenu-card__lead {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .submenu-card__photo {
    height: 84px;
  }

  .submenu-card__price-text {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .submenu-card__price-label {
    display: block;
    margin-right: 0;
  }

  .submenu-card__price-num {
    font-weight: 400;
    font-size: 20px;
  }

  .bundle-offer {
    gap: 5px;
    padding: 10px 12px;
  }

  .bundle-offer__label {
    flex-direction: column;
    align-self: stretch;
    height: auto;
    padding: 3px 0 7px;
  }

  .bundle-offer__icon {
    width: 26px;
    height: 26px;
  }

  .bundle-offer__label-text {
    font-size: 18px;
  }

  .bundle-offer__text-wrapper {
    height: auto;
    min-height: 53px;
    padding: 0;
  }

  .bundle-offer__text {
    font-weight: 400;
    font-size: 14px;
    white-space: normal;
  }
}

/* 350px以下: サブメニューカード（2列）の幅が141.5px→320px時点126.5px まで狭くなるため、はみ出し・切れを防ぐ調整（351px以上は変更なし）
   カード幅 = (100vw - 67px) / 2（67px = カード外の左右12px×2 + カード内の左右15px×2 + 列の間隔13px）
   ・サブメニュー名: 文字サイズをカード幅に比例して小さくし（一番長い名前でも1行に収まる大きさ）、それでも収まらない場合はカード幅の中で折り返す
     （通常 = カード幅÷8.75（上限18px）／compact（外装2枚）= カード幅÷9.75（上限16px）／（ユニットバス）は通常の13/18。
      名前の長さは全角1文字 = 1em＋字間で、一番長いのは compact の「屋根塗装・葺き替え」約9.4em）
   ・料金バッジ: 一番長い「60万〜200万円」（14px・20px時の幅約117px）がバッジ内（カード幅 - 左右padding 20px）に収まるよう、文字サイズを比例縮小（折り返さない）
   ・線・写真の位置: 横に並ぶカード同士で「タイトル＋線」の段・「説明文」の段・「写真＋料金」の段の高さをそろえるため、
     カードを親グリッドのsubgrid（3段）にする。横に並ぶカードの説明文の行数が違っても、線・写真の位置がそろう。
     ※ カード自体もgridになるため、列を minmax(0, 1fr) で固定し、justify-content を初期値（normal）に戻している。
       元の flex 用の justify-content: flex-end が残るとgridの列が中身の幅で決まり右端に寄って、カードごとに写真の幅がバラバラになる。 */
@media (max-width: 350px) {
  .menu-card__submenus {
    row-gap: 0;
  }

  .submenu-card {
    display: grid;
    grid-row: span 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    justify-content: normal;
    gap: 0;
  }

  .submenu-card__header {
    display: contents;
  }

  /* 段の間隔は subgrid のgapではなくmarginで持つ（タイトル→説明文 6px・説明文（またはタイトル）→写真 15px・カード（段）同士 13px） */
  .submenu-card:nth-child(n + 3) .submenu-card__title-wrapper {
    margin-top: 13px;
  }

  .submenu-card__title-wrapper {
    grid-row: 1;
    align-items: flex-end;
  }

  .submenu-card__lead {
    grid-row: 2;
    margin-top: 6px;
  }

  .submenu-card__body {
    grid-row: 3;
    margin-top: 15px;
  }

  .submenu-card__title {
    min-width: 0;
    font-size: min(18px, calc((100vw - 67px) / 17.5));
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .submenu-card__title-small {
    font-size: min(13px, calc((100vw - 67px) / 24.23));
  }

  .submenu-card__title--compact {
    font-size: min(16px, calc((100vw - 67px) / 19.5));
  }

  .submenu-card__price-text {
    font-size: min(14px, calc((100vw - 115px) * 0.0598));
  }

  .submenu-card__price-num {
    font-size: min(20px, calc((100vw - 115px) * 0.0854));
  }
}

/* ==========================================================================
   process-sectionセクション（Menuページ）
   Figma: process-section / node-id 71:387（1920px）, node-id 173:1508（1024px）, SP版 / node-id 100:579（SP）
   使い方: menu_process-section.php を menu.php から menu_service-menu-section.php の直後に
          <?php include 'menu_process-section.php'; ?> で読み込む。
   灰色（#eaeaea）の背景は画面幅いっぱいに広がる帯（.process-section）で、その中のコンテンツ
   （.process-section__inner）をPC版1400px・1024px版944px（1920px〜1024pxの間は他セクションと同じ式のclamp()で
   滑らかに変化）・SP版343px（左右16px余白）で中央配置している。上下のpaddingはPC版80px・SP版60px。
   次のセクション（warranty-section）との間隔（PC版150px・SP版80px）は、背景色のある帯なので
   padding ではなく margin-bottom で持つ（前セクション側が間隔を持つ運用は他セクションと同じ）。
   ステップ4つは4等分のグリッド。列の間隔は1920px時点70px→1024px時点34.67px（Figmaは幅210pxのステップを
   justify-betweenで配置＝(944-210×4)÷3）をclamp()で補間している。ステップ幅は297.5px→210pxで自動的に変化する。
   文字サイズ・字間・アイコンサイズ・要素間隔は1920px時点と1024px時点で同じ値のため固定値。
   letter-spacingはFigma上でフォントサイズの3%（PC本文）・6%（英字・数字）・8%（日本語見出し・SP本文）で一定のためem指定。
   ▼タイムラインの線・点（色は #04132F の上に黒20%を重ねた #030f26 になる）
   Figma上は3本の線を1枚のSVGにして絶対配置しているが、説明文の長さでステップの高さが変わっても
   途切れたりずれたりしないよう、各ステップ内の .process-step__marker の疑似要素で描いている。
     ::after  = そのステップの点
     ::before = そのステップの点から「次のステップの点」までの線（最後のステップは線なし）
   PC/1024px版: markerは高さ0の行としてヘッダー（STEP・番号・アイコン）とボディの間に入り、上30px・下46px
   （＝Figmaのヘッダー〜ボディ間隔76px）。点・線はmarkerの上端に中心を合わせるため、ヘッダーの高さが変わっても
   アイコンからの距離は一定。線は「ステップ幅の半分の位置 → 次のステップの半分の位置」（幅 = 100% + 列の間隔）。
   SP版: markerはステップ全体を覆う絶対配置になり、点はステップ上端から56px・左端から65px、
   線はそこから「ステップの高さ + ステップ間隔30px」の分だけ下へ伸びて次のステップの点に届く。
   SP版のステップは最小高さ113px（Figmaの固定高さ）で、説明文が長い場合はその分だけ高くなる。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.process-section {
  margin-bottom: 150px;
  padding: 80px 0;
  background-color: #eaeaea;
}

.process-section__inner {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
}

.process-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
  background-color: #ffffff;
}

.process-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

.process-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.process-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.process-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.process-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  white-space: nowrap;
}

.process-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
}

.process-intro p {
  margin: 0;
}

.process-steps {
  --process-steps-gap: clamp(34.67px, calc(-5.71px + 3.943vw), 70px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--process-steps-gap);
  align-items: start;
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  color: #030f26;
}

.process-step__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.process-step__label,
.process-step__number {
  width: 116px;
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

.process-step__label {
  font-size: 20px;
  letter-spacing: 0.06em;
}

.process-step__number {
  font-size: 32px;
  letter-spacing: 0.06em;
}

.process-step__icon {
  display: block;
  width: 116px;
  height: 116px;
}

.process-step__marker {
  position: relative;
  align-self: stretch;
  height: 0;
  margin: 30px 0 46px;
}

.process-step__marker::before,
.process-step__marker::after {
  content: '';
  position: absolute;
  background-color: #030f26;
}

.process-step__marker::before {
  top: 0;
  left: 50%;
  width: calc(100% + var(--process-steps-gap));
  height: 2px;
  transform: translateY(-50%);
}

.process-step__marker::after {
  top: 0;
  left: 50%;
  width: 10.67px;
  height: 10.67px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.process-step:last-child .process-step__marker::before {
  display: none;
}

.process-step__body {
  display: flex;
  flex-direction: column;
  gap: 47px;
  align-self: stretch;
}

.process-step__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
  text-align: center;
}

.process-step__text {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
}

/* 1023px以下: SPレイアウトに切り替え（ステップが縦積みになり、タイムラインの線はステップの左側を縦に通る） */
@media (max-width: 1023px) {
  .process-section {
    margin-bottom: 80px;
    padding: 60px 16px;
  }

  .process-section__inner {
    gap: 40px;
    width: 100%;
    margin: 0;
  }

  .process-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .process-header__title {
    font-size: 23px;
  }

  .process-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .process-header__divider {
    height: 1.2px;
  }

  .process-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .process-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .process-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .process-steps {
    --process-steps-gap: 30px;
    display: flex;
    flex-direction: column;
    gap: var(--process-steps-gap);
  }

  .process-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    min-height: 113px;
  }

  .process-step__header {
    flex-shrink: 0;
    align-items: center;
    padding-right: 21px;
  }

  .process-step__label,
  .process-step__number {
    width: auto;
  }

  .process-step__label {
    width: 40px;
    height: 22px;
    font-size: 20px;
    line-height: 22px;
  }

  .process-step__number {
    font-size: 24px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .process-step__icon {
    width: 35px;
    height: 35px;
  }

  .process-step__marker {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
  }

  .process-step__marker::before {
    top: 56px;
    left: 65px;
    width: 1px;
    height: calc(100% + var(--process-steps-gap));
    transform: translateX(-50%);
  }

  .process-step__marker::after {
    top: 56px;
    left: 65px;
    width: 5.33px;
    height: 5.33px;
  }

  .process-step__body {
    flex: 1 0 0;
    gap: 11px;
    align-self: auto;
    min-width: 0;
  }

  .process-step__title {
    height: 22px;
    font-size: 18px;
    line-height: 22px;
    text-align: left;
  }

  .process-step__text {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   warranty-sectionセクション（Menuページ）
   Figma: warranty-section / node-id 73:1009（1920px）, node-id 174:1572（1024px）, SP版 / node-id 101:635（SP）
   使い方: menu_warranty-section.php を menu.php から menu_process-section.php の直後に
          <?php include 'menu_warranty-section.php'; ?> で読み込む。
   白背景のセクションで、コンテンツ（.warranty-section__inner）をPC版1400px・1024px版944px（1920px〜1024pxの間は
   他セクションと同じ式のclamp()で滑らかに変化）・SP版343px（左右16px余白）で中央配置している。
   前セクション（process-section）との間隔（PC版150px・SP版80px）は process-section 側の margin-bottom が持ち、
   次のセクション（faq-section）との間隔（PC版150px・SP版80px）はこのセクションの margin-bottom で持つ
   （前セクション側が間隔を持つ運用は他セクションと同じ）。要素間の間隔はPC版・SP版で55px・35px。
   見出し（.warranty-header）はprocess-sectionと同じ構造で、背景がマスタード（#d4af37）。
   letter-spacingはFigma上でフォントサイズの3%（PC本文）・6%（英字）・8%（日本語見出し・表の見出し・SP本文）で一定のためem指定。
   ▼保証の表（<table>）
   table-layout: fixed で列幅を固定し、「保証項目」「保証期間」の列幅をclamp()で補間している
   （保証項目 1920px時点192px→1024px時点150px、保証期間 415px→260px、内容は残り幅）。
   罫線はborder-collapseで1px（#030f26）に統一している。文字は列幅の中で自然に折り返す（空白での改行調整はしない）。
   SP版は列幅が保証項目79px・保証期間91px（内容は残り173px）、セル左右の余白が保証項目・保証期間列は4px、内容列は10px。
   保証期間列は word-break: auto-phrase（未対応ブラウザでは無視される）で文節単位の折り返しにしている。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.warranty-section {
  margin-bottom: 150px;
}

.warranty-section__inner {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
}

.warranty-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
  background-color: #d4af37;
}

.warranty-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

.warranty-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.warranty-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.warranty-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.warranty-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  white-space: nowrap;
}

.warranty-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
}

.warranty-intro p {
  margin: 0;
}

.warranty-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
  color: #030f26;
}

.warranty-table__col-item {
  width: clamp(150px, calc(102px + 4.6875vw), 192px);
}

.warranty-table__col-period {
  width: clamp(260px, calc(82.87px + 17.299vw), 415px);
}

.warranty-table th,
.warranty-table td {
  padding: 10px;
  border: 1px solid #030f26;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  text-align: left;
  vertical-align: middle;
}

.warranty-table thead th {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.warranty-table__period-sub {
  margin-left: 1em;
}

/* 1023px以下: SPレイアウトに切り替え */
@media (max-width: 1023px) {
  .warranty-section {
    margin-bottom: 80px;
    padding: 0 16px;
  }

  .warranty-section__inner {
    gap: 35px;
    width: 100%;
    margin: 0;
  }

  .warranty-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .warranty-header__title {
    font-size: 23px;
  }

  .warranty-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .warranty-header__divider {
    height: 1.2px;
  }

  .warranty-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .warranty-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .warranty-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .warranty-table__col-item {
    width: 79px;
  }

  .warranty-table__col-period {
    width: 91px;
  }

  .warranty-table th,
  .warranty-table td {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .warranty-table th:not(:last-child),
  .warranty-table td:not(:last-child) {
    padding: 10px 4px;
  }

  .warranty-table thead th {
    font-size: 15px;
  }

  .warranty-table__period {
    word-break: auto-phrase;
  }

  .warranty-table__period-sub {
    margin-left: 0;
  }
}

/* ==========================================================================
   faq-sectionセクション（Menuページ）
   Figma: faq-section / node-id 76:1300（1920px）, node-id 176:1706（1024px）, SP版 / node-id 175:1665（SP）
          開いた状態 / node-id 185:829（1920px）, node-id 185:838（SP）
   使い方: menu_faq-section.php を menu.php から menu_warranty-section.php の直後に
          <?php include 'menu_faq-section.php'; ?> で読み込む。開閉は js/script.js（FAQアコーディオン）。
   灰色（#eaeaea）の背景は画面幅いっぱいに広がる帯（.faq-section）で、その中のコンテンツ（.faq-section__inner）を
   PC版1400px・1024px版944px（1920px〜1024pxの間は他セクションと同じ式のclamp()で滑らかに変化）・
   SP版343px（左右16px余白）で中央配置している。上下のpaddingはPC版80px・SP版60px。
   前セクション（warranty-section）との間隔は warranty-section 側の margin-bottom が持ち、
   次のセクション（top-page-button）との間隔（PC版150px・SP版80px）は背景色のある帯なので margin-bottom で持つ。
   要素間の間隔はPC版55px・SP版35px、質問同士の間隔はPC版45px・SP版20px。
   文字サイズ・字間・アイコンサイズ・要素間隔は1920px時点と1024px時点で同じ値のため、幅以外は固定値。
   見出しの背景は #04132F の上に黒20%を重ねた #030f26。
   letter-spacingはFigma上でフォントサイズの3%（PC本文・SP回答）・6%（英字）・8%（日本語見出し・質問・SP本文）で一定のためem指定。
   ▼アコーディオン
   .faq-item に .is-open が付くと回答が開く。高さは grid-template-rows を 0fr ⇔ 1fr で切り替えて0.3秒で補間し、
   閉じている間は visibility: hidden で読み上げ対象からも外す（閉じるときは高さのアニメーション後に隠す）。
   開閉アイコンは上向き矢印のSVGを閉じた状態で180度回転（下向き）させ、開くと0度に戻す。
   開いた状態は「質問 → 間隔 → 区切り線 → 間隔 → 回答」で、間隔はPC版30px・SP版25px（Figmaの開いた状態の高さから算出）。
   区切り線はPC版2px（アイコン列の手前まで、右93px空ける＝Figmaの線1247px / 内側1340px）、SP版1px（内側いっぱい）。
   開いた状態の1024px版は用意されていないため、1920px版と同じ値で、回答文は幅に合わせて自然に折り返す。
   回答文の書体はPC/1024px版が Noto Sans JP DemiLight（350）16px・字間3%（Figmaは Bold だが、指示により DemiLight に変更）、
   SP版は Figma どおり Zen Kaku Gothic New Regular 14px・字間3%。
   角丸はPC/1024px版20px・SP版10px（PC/1024px版はFigmaのセクション上の配置ではインスタンスの上書きで角丸0になっているが、
   元のコンポーネント・開いた状態は20pxのため、こちらに合わせている）。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.faq-section {
  margin-bottom: 150px;
  padding: 80px 0;
  background-color: #eaeaea;
}

.faq-section__inner {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
}

.faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
  background-color: #030f26;
}

.faq-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
}

.faq-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.faq-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.faq-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.faq-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #ffffff;
  white-space: nowrap;
}

.faq-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
}

.faq-intro p {
  margin: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.faq-item {
  padding: 15px 30px;
  border-radius: 20px;
  background-color: #ffffff;
  color: #030f26;
}

.faq-item__heading {
  margin: 0;
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 47px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-item__question-text {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 47px;
  min-width: 0;
}

.faq-item__mark {
  flex-shrink: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  letter-spacing: 0.06em;
  text-align: center;
}

.faq-item__mark--answer {
  color: #b8b8b8;
}

.faq-item__question-label {
  min-width: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
}

.faq-item__icon {
  display: block;
  flex-shrink: 0;
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.faq-item__icon img {
  display: block;
  width: 47px;
  height: 45.116px;
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}

.faq-item__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-item__answer-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 47px;
  padding-top: 30px;
}

/* 区切り線（回答の上）。flex-wrap で1行分を占有させ、その下に「A」と回答文を並べる。
   flex-basis 100% ＋ margin-right 93px で行を1本占有させたまま、flex-shrink で線の長さを「100% - 93px」に縮める
   （線自体の幅を 100% - 93px にすると、右の空き93pxに「A」が入り込んでしまうため） */
.faq-item__answer-body::before {
  content: '';
  flex: 0 1 100%;
  height: 2px;
  margin-right: 93px;
  margin-bottom: 30px;
  background-color: #030f26;
}

.faq-item__answer-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
}

.faq-item__answer-text p {
  margin: 0;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(0deg);
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__icon,
  .faq-item__answer,
  .faq-item.is-open .faq-item__answer {
    transition: none;
  }
}

/* 1023px以下: SPレイアウトに切り替え */
@media (max-width: 1023px) {
  .faq-section {
    margin-bottom: 80px;
    padding: 60px 16px;
  }

  .faq-section__inner {
    gap: 35px;
    width: 100%;
    margin: 0;
  }

  .faq-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .faq-header__title {
    font-size: 23px;
  }

  .faq-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .faq-header__divider {
    height: 1.2px;
  }

  .faq-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .faq-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .faq-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .faq-list {
    gap: 20px;
  }

  .faq-item {
    padding: 15px 5px 15px 8px;
    border-radius: 10px;
  }

  .faq-item__question {
    gap: 22px;
  }

  .faq-item__question-text,
  .faq-item__answer-body {
    column-gap: 15px;
  }

  .faq-item__mark {
    font-weight: 400;
    font-size: 26px;
  }

  .faq-item__question-label {
    font-weight: 500;
    font-size: 16px;
  }

  .faq-item__icon img {
    width: 36px;
    height: 34.557px;
  }

  .faq-item__answer-body {
    padding-top: 25px;
  }

  .faq-item__answer-body::before {
    flex-basis: 100%;
    height: 1px;
    margin-right: 0;
    margin-bottom: 25px;
  }

  .faq-item__answer-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-size: 14px;
  }
}

/* ==========================================================================
   announcement-barセクション
   Figma: announcement-bar / node-id 25:43（1920px）, node-id 140:834（1024px）,
          SP-announcement-bar / node-id 90:1361（SP）
   使い方: top_announcement-bar.php を Topページ（index.php）から <?php include 'top_announcement-bar.php'; ?> で読み込む
   （可変値は無いため変数定義は不要）。
   前後セクション（FV / message-section）との間隔はPC版150px・SP版はFV側50px・message-section側100pxとするため、
   .announcement-bar（外側・白背景）のpadding-top/bottomをその値に固定し、紺色の帯自体
   （.announcement-bar__inner）はFigma通りの内側パディングを保つ2階層構成にしている。
   紺色の帯のコンテンツ幅はPC版1400px・1024px版944px・SP版343px（左右16px余白）で、
   1920px〜1024pxの間はcta-section__panelと同じ式のclamp()で滑らかに変化させつつ
   フレーム中央配置（width + margin: 0 auto）にする。1023px以下は幅100%＋外側の
   .announcement-barにleft/right 16pxパディングを付けることでSP版のコンテンツ幅343pxを再現する
   （固定375pxではなくSP版全般の16px余白の慣例に合わせ、任意のSP幅でも破綻しないようにしている）。
   ブレークポイント: 1023px以下でSPレイアウトに切り替え（内側要素が縦積みになる）。
   1024px〜1920pxの間は他セクション同様、clamp()/vwで帯内部の余白・要素間隔を滑らかに補間する
   （1920px超は上限値、1024px未満は下限値で固定）。letter-spacingはフォントサイズに対して
   一定比率のため、em単位で追従させる。
   背景色はFigma上ではrgba(0,0,0,0.2)の黒オーバーレイ + rgb(4,19,47)の重ね合わせだが、
   両者とも単色（グラデーションの開始・終了が同色）のため、合成後の単色 #030f26 として実装。
   ========================================================================== */
.announcement-bar {
  padding: 150px 0;
  background-color: #ffffff;
}

.announcement-bar__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(25px, calc(-34.43px + 5.8vw), 77px);
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
  padding: 40px clamp(20px, calc(-2.86px + 2.23vw), 40px);
  background-color: #030f26;
}

.announcement-bar__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 10px 50px;
  border: 1px solid #ffffff;
}

.announcement-bar__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

.announcement-bar__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 0;
  gap: 33px;
  padding: 25px clamp(25px, calc(7.86px + 1.67vw), 40px);
  border-left: 4px solid #ffffff;
}

.announcement-bar__text p {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.announcement-bar__break {
  display: none;
}

/* 1023px以下: SPレイアウトに切り替え（帯内部が縦積みになり、余白・文字サイズが固定値になる） */
@media (max-width: 1023px) {
  .announcement-bar {
    padding: 50px 16px 100px;
  }

  .announcement-bar__inner {
    width: 100%;
    margin: 0;
    flex-direction: column;
    gap: 19px;
    padding: 19px 16px;
  }

  .announcement-bar__label {
    padding: 7px 20px;
  }

  .announcement-bar__label-text {
    font-size: 20px;
  }

  .announcement-bar__text {
    gap: 25px;
    padding: 12px 0 12px 15px;
    border-left-width: 3px;
  }

  .announcement-bar__break {
    display: block;
  }
}

/* ==========================================================================
   message-sectionセクション
   Figma: message-section / node-id 27:58（1920px）, node-id 140:841（1024px）,
          SP-message-section / node-id 90:1369（SP）
   使い方: top_message-section.php を Topページ（index.php）から <?php include 'top_message-section.php'; ?> で読み込む
   （可変値は無いため変数定義は不要）。
   前セクション（announcement-bar）との間隔はannouncement-bar側のpadding-bottomで確定値（PC150px・
   SP100px）を担っているため、.message-sectionのpadding-topは0。次セクション（strengths-section）
   との間隔は.message-sectionのpadding-bottomでPC版150px・SP版100pxを確定値として持つ。
   コンテンツ幅はannouncement-bar__inner等と同じ式（PC版1400px・1024px版944px、1920px〜1024pxの
   間はclamp()で滑らかに変化）にし、width + margin:0 autoで中央配置する。
   見出し・前文・本文・署名ブロック（.message-signature-block）をまとめて1つの.message-text
   （display:flex; flex-direction:column; gap:62px）とし、.message-textをposition:relativeの
   基準にして.message-photoをposition:absolute + top:50% / transform:translateY(-50%)で
   .message-text全体に対して上下中央配置する。写真は絶対配置で高さに寄与しないため、Figma上の
   セクション高さ（＝写真の高さ653px）を.message-textのmin-heightで確保し、テキストは
   justify-content:centerで上下中央に置く（これが無いと写真が下の余白150pxにはみ出す）。
   .message-textには写真の分の余白をpadding-leftで確保する（値はannouncement-bar__inner等と同じ手法で1920px時点・
   1024px時点の実測値からclamp()を算出）。
   .message-photoは.message-signature-block（写真＋署名messages-nameをまとめたラッパー）の中に
   DOM上ネストされているが、PC版ではposition:absoluteで通常フローから外れるため、
   .message-signature-block内には実質.message-name（署名）だけが残り、右寄せの行として表示される。
   SP版では.message-photoをposition:staticに戻すことで、.message-signature-block内で写真と署名が
   横並び・中央揃えで表示され、グレー背景（#eaeaea）の帯の中に収まる（写真と署名の間隔は20px）。
   見出し・前文/本文・署名のフォントサイズはPC版では1024px〜1920pxの間で変化しない固定値のため
   clamp()を使わず、写真の左右余白と.message-textのpadding-leftのみ1920px時点・1024px時点の
   値をclamp()で滑らかに補間する。letter-spacingは見出し・署名がフォントサイズの8%、前文/本文が
   PC版3%・SP版8%で一定のため、em単位で追従させる（前文/本文はPC/SPで比率が異なるためSP側で
   上書きする）。
   前文・本文はwhite-space: pre-lineで原文の改行（本文中盤の空行を含む）をそのまま反映する。
   写真はimages/massege-photo.png（1264×843）を使用し、Figma上のfill配置（width/height/left/top
   のパーセンテージ）をそのままCSSへ移植して表示する（object-fit: coverでは再現できない拡大率の
   ため、Figma指定どおりの絶対配置を採用。imgタグにはグローバルリセットのmax-width:100%を打ち
   消すためmax-width: noneを指定する）。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.message-section {
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
  padding: 0 0 150px;
}

.message-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 62px;
  min-height: 653px;
  padding-left: clamp(225px, calc(23.86px + 19.64vw), 401px);
}

.message-heading {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
}

.message-intro,
.message-body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
  white-space: pre-line;
}

.message-signature-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 48px;
}

.message-photo {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0 clamp(0px, calc(-52.57px + 5.13vw), 46px);
}

.message-photo-image {
  position: relative;
  overflow: hidden;
  width: 225px;
  height: 653px;
}

.message-photo-image img {
  display: block;
  position: absolute;
  max-width: none;
  width: 473.41%;
  height: 108.63%;
  left: -195.51%;
  top: -8.63%;
}

.message-name {
  display: flex;
  align-items: center;
  gap: 48px;
}

.message-name-title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
  white-space: nowrap;
}

.message-name-signature {
  margin: 0;
  font-family: 'Yuji Boku', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
  text-align: center;
  white-space: nowrap;
}

/* 1023px以下: SPレイアウトに切り替え（写真・署名がグレー帯にまとまり、フォントが固定値になる） */
@media (max-width: 1023px) {
  .message-section {
    width: 100%;
    margin: 0;
    padding: 0 16px 100px;
  }

  .message-text {
    justify-content: flex-start;
    gap: 27px;
    min-height: 0;
    padding-left: 0;
  }

  .message-heading {
    font-size: 23px;
  }

  .message-intro,
  .message-body {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .message-signature-block {
    justify-content: center;
    gap: 20px;
    padding: 0 21px;
    background-color: #eaeaea;
    height: 149px;
  }

  .message-photo {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    padding: 0;
  }

  .message-photo-image {
    width: 110px;
    height: 149px;
  }

  .message-photo-image img {
    width: 442.09%;
    height: 217.67%;
    left: -170.97%;
    top: -17.97%;
  }

  .message-name {
    flex-direction: column;
    gap: 12px;
  }

  .message-name-title {
    font-size: 20px;
  }

  .message-name-signature {
    font-size: 32px;
  }
}

/* ==========================================================================
   strengths-sectionセクション
   Figma: strengths-section / node-id 20:136（1920px）, node-id 140:852（1024px）,
          SP-strengths-section / node-id 90:1417（SP）
   使い方: top_strengths-section.php を index.php から <?php include 'top_strengths-section.php'; ?> で読み込む
   （カード4枚の内容は top_strengths-section.php 内の配列にまとめている）。
   前セクション（message-section）との間隔はmessage-section側のpadding-bottomで確定値（PC150px・
   SP100px）を担っているため、.strengths-sectionのpadding-topは0。次セクション（service-section）
   との間隔は.strengths-sectionのpadding-bottomでPC版150px・SP版100pxを確定値として持つ。
   コンテンツ幅はannouncement-bar__inner等と同じ式（PC版1400px・1024px版944px、1920px〜1024pxの
   間はclamp()で滑らかに変化）にし、width + margin:0 autoで中央配置する。1023px以下は幅100%＋
   左右16pxパディングでSP版のコンテンツ幅343pxを再現する。
   カード（.strength-card）は「情報ブロック（.strength-card__info）＋写真（.strength-card__photo）」の
   縦積みで、PC版では4列グリッドに並べる（写真は全カードで同じ高さ138pxのため、情報ブロックを
   flex:1で伸ばすと、全カードの情報ブロックの高さ・写真の位置が揃う）。SP版は1列縦積み。
   1920px時点と1024px時点でFigma上の値が違うのはカードの左右padding（28px→16px）と、
   「アフターサービス」カードのタイトル（24px/字間0.08em → 20px/字間-0.02em）のみ。
   この2点だけclamp()で補間し、他のフォントサイズはPC版（1024px〜1920px）で固定値。
   写真はFigma上ではimgの拡大率・位置をパーセンテージ指定しているが、1024px時点でも1920px時点と
   同じ値のため画像が歪む（縦横比が変わる）。そのためobject-fit: coverで表示し、1920px時点の
   切り抜き位置（上から約33%）をobject-positionに反映している。
   カード内の背景色はFigma上ではrgba(0,0,0,0.2)の黒オーバーレイ + rgb(4,19,47)の重ね合わせだが、
   両者とも単色のため、合成後の単色 #030f26 として実装（announcement-barと同じ）。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.strengths-section {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
  padding: 0 0 150px;
}

.strengths-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
  background-color: #d4af37;
}

.strengths-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

.strengths-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.strengths-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.strengths-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.strengths-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  white-space: nowrap;
}

.strengths-intro {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
  white-space: pre-line;
}

.strengths-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.strength-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.strength-card__info {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 35px clamp(16px, calc(2.29px + 1.34vw), 28px);
  background-color: #030f26;
  color: #ffffff;
  text-align: center;
}

.strength-card__info > * {
  width: 100%;
  margin: 0;
}

.strength-card__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
}

/* 「アフターサービス」は文字数が多いため、1024px時点でのみ文字サイズ・字間が小さくなる */
.strength-card__title--long {
  font-size: clamp(20px, calc(15.43px + 0.45vw), 24px);
  letter-spacing: clamp(-0.4px, calc(-3.05px + 0.26vw), 1.92px);
}

/* 数値と単位で行の高さが変わらないよう、親のfont-sizeは0にして各spanのline-heightに任せる */
.strength-card__number {
  font-size: 0;
  line-height: 0;
}

.strength-card__value {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
}

.strength-card__unit {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.03em;
}

.strength-card__unit--percent {
  font-family: 'Oswald', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  letter-spacing: 2.16px;
}

.strength-card__unit--case {
  font-size: 20px;
}

.strength-card__lead,
.strength-card__body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
}

.strengths-break--sp {
  display: none;
}

.strength-card__photo {
  flex-shrink: 0;
  height: 138px;
  overflow: hidden;
}

.strength-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 33%;
}

/* 1023px以下: SPレイアウトに切り替え（カードが1列縦積みになり、フォント・余白が固定値になる） */
@media (max-width: 1023px) {
  .strengths-section {
    gap: 35px;
    width: 100%;
    margin: 0;
    padding: 0 16px 100px;
  }

  .strengths-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .strengths-header__title {
    font-size: 23px;
  }

  .strengths-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .strengths-header__divider {
    height: 1.2px;
  }

  .strengths-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .strengths-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .strengths-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

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

  .strength-card {
    gap: 0;
  }

  .strength-card__info {
    gap: 10px;
    padding: 15px 0;
  }

  .strength-card__title,
  .strength-card__title--long {
    font-size: 18px;
    letter-spacing: 0.08em;
  }

  .strength-card__value {
    font-size: 32px;
  }

  .strength-card__value--compact {
    font-weight: 500;
    font-size: 28px;
  }

  .strength-card__unit,
  .strength-card__unit--case {
    font-size: 16px;
  }

  .strength-card__unit--percent {
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.08em;
  }

  .strength-card__lead,
  .strength-card__body {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .strengths-break--pc {
    display: none;
  }

  .strengths-break--sp {
    display: inline;
  }

  .strength-card__photo img {
    object-position: 50% 28%;
  }
}

/* ==========================================================================
   service-sectionセクション
   Figma: service-section / node-id 30:117（1920px）, node-id 140:887（1024px）,
          SP-service-section / node-id 91:480（SP）
   使い方: top_service-section.php を index.php から <?php include 'top_service-section.php'; ?> で読み込む
   （カード5枚の内容は top_service-section.php 内の配列にまとめている）。
   紺色の背景は画面幅いっぱいに広がる帯で、その中のコンテンツ（.service-section__inner）を
   PC版1400px・1024px版944px（1920px〜1024pxの間はannouncement-bar__inner等と同じ式のclamp()で
   滑らかに変化）・SP版343px（左右16px余白）でフレーム中央配置している（width + margin: 0 auto。
   1920px超でも1400pxのまま中央に留まる）。上下のpaddingはPC版80px・SP版60px。
   前セクション（strengths-section）との間隔はstrengths-section側のpadding-bottomで確定値（PC150px・
   SP100px）を担っているため、本セクションの上側の余白は0。次セクション（Top-Page-button）との
   間隔は、背景が帯になっているためpaddingではなくmargin-bottomでPC版150px・SP版100pxを持つ。
   カード（.service-card）は「写真＋情報ブロック」の横並びで、PC版・1024px版では2列グリッド
   （枠線2px・内側padding26px・カード間40px）。1920px時点と1024px時点でFigma上の値が違うのは
   写真の幅（265px→185px）のみで、clamp()で補間する。カードの高さはテキスト量に応じて自動で
   決まり（1920px時点は写真の高さ158pxが下限）、写真はカード高さいっぱいに伸ばして
   object-fit: coverで表示する（1024px時点でFigma上のカード高さが189px/199pxになるのは
   テキストの折り返しが増えるためで、autoの高さで再現される）。
   SP版は1列縦積みで、写真93px×高さ158px以上・枠線内側padding20px 8px。
   フォントサイズ等はPC版（1024px〜1920px）内で変化しないため固定値。letter-spacingは
   Figma上でフォントサイズの3%（本文・CTA）・8%（見出し・カード見出し）で一定のためem指定。
   ※ 「内装リフォーム」の写真はFigma上でheight 143.76%・上寄せの指定だが、1024px・SP版では
     同じ値が使われて画像が歪むため、strengths-sectionの写真と同様にobject-fit: coverで表示し、
     1920px時点の切り抜き位置（上寄せ）をobject-positionに反映している。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.service-section {
  margin: 0 0 150px;
  padding: 80px 0;
  background-color: #030f26;
}

.service-section__inner {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
}

.service-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
}

.service-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
}

.service-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.service-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.service-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.service-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #ffffff;
  white-space: nowrap;
}

.service-intro {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #ffffff;
  white-space: pre-line;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding: 26px;
  border: 2px solid #ffffff;
}

.service-card {
  display: flex;
  align-items: center;
  gap: 27px;
  min-width: 0;
}

.service-card__photo {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: clamp(185px, calc(93.57px + 8.93vw), 265px);
  min-height: 158px;
  overflow: hidden;
}

.service-card__photo img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__photo--top img {
  object-position: 50% 0%;
}

.service-card__info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 27px;
  min-width: 0;
  color: #ffffff;
}

.service-card__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
}

.service-card__body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
}

.service-break--sp {
  display: none;
}

.service-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.service-cta__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  padding: 0 10px;
  color: #ffffff;
  text-decoration: none;
}

.service-cta__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.service-cta__arrow {
  display: block;
  flex-shrink: 0;
  width: 35px;
  height: 70px;
}

.service-cta__arrow--sp {
  display: none;
}

/* hover: 文字と矢印の色を #4c78ca に変更（ヘッダーメニュー・Top-page-buttonと共通の色）
   矢印はインラインSVG（fill="currentColor"）のため、リンクの color を切り替えるだけで文字と一緒に変わる。
   PC版（1024px以上かつhover可能な端末）のみ0.4sで色を変化させる。
   1023px以下はアニメーションせず、タップ中（:active）のみ色を切り替える（下のSP用@media内）。 */
@media (hover: hover) and (min-width: 1024px) {
  .service-cta__link {
    transition: color 0.4s ease;
  }

  .service-cta__link:hover {
    color: #4c78ca;
  }
}

/* 1023px以下: SPレイアウトに切り替え（カードが1列縦積みになり、フォント・余白が固定値になる） */
@media (max-width: 1023px) {
  .service-section {
    margin-bottom: 100px;
    padding: 60px 16px;
  }

  .service-section__inner {
    gap: 35px;
    width: 100%;
    margin: 0;
  }

  .service-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .service-header__title {
    font-size: 23px;
  }

  .service-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .service-header__divider {
    height: 1.2px;
  }

  .service-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .service-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .service-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .service-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 20px 8px;
  }

  .service-card {
    align-items: flex-start;
    gap: 13px;
  }

  .service-card__photo {
    width: 93px;
  }

  .service-card__info {
    gap: 10px;
  }

  .service-card__title {
    font-size: 18px;
  }

  .service-card__body {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .service-break--sp {
    display: inline;
  }

  .service-cta__link {
    gap: 16px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .service-cta__link:active {
    color: #4c78ca;
  }

  .service-cta__text {
    font-size: 18px;
  }

  .service-cta__arrow {
    width: 23px;
    height: 45px;
  }

  .service-cta__arrow--pc {
    display: none;
  }

  .service-cta__arrow--sp {
    display: block;
  }
}

/* 360px以下: CTAボタンが画面幅に収まらなくなるため、文字と矢印の間隔を16px→0pxへ画面幅に合わせて縮め
   （360px→344pxで1pxずつ）、それでも収まらない344px未満では文字サイズを画面幅に比例して縮める
   （344pxで18px。「施工メニュー・料金を詳しく見る」15文字＋矢印23px＋左右余白16pxに収まる係数） */
@media (max-width: 360px) {
  .service-cta__link {
    gap: clamp(0px, calc(100vw - 344px), 16px);
  }

  .service-cta__text {
    font-size: min(18px, calc((100vw - 55px) / 16.1));
  }
}

/* ==========================================================================
   works-sectionセクション
   Figma: works-section / node-id 35:173（1920px）, node-id 140:927（1024px）,
          SP-works-section / node-id 93:566（SP）
   使い方: top_works-section.php を index.php から <?php include 'top_works-section.php'; ?> で読み込む
   （カード3件の内容は top_works-section.php 内の配列にまとめている）。
   前セクション（service-section）との間隔はservice-section側のmargin-bottomで確定値（PC150px・
   SP100px）を担っているため、.works-sectionのpadding-topは0。次セクション（voices-section）との
   間隔は.works-sectionのpadding-bottomでPC版150px・SP版100pxを確定値として持つ。
   コンテンツ幅はannouncement-bar__inner等と同じ式（PC版1400px・1024px版944px、1920px〜1024pxの
   間はclamp()で滑らかに変化）にし、width + margin:0 autoで中央配置する。1023px以下は幅100%＋
   左右16pxパディングでSP版のコンテンツ幅343pxを再現する。
   カード（.work-card）は「写真＋情報ブロック」の横並びで、PC版・1024px版では偶数番目のカード
   （.work-card--reverse）だけ写真が右になる（DOM順は常に写真が先で、row-reverseで入れ替える）。
   SP版は全カード縦積み（写真が上）。
   1920px時点と1024px時点でFigma上の値が違うのは、写真の幅（573px→386px）・高さ（247px→230px）、
   本文ブロックの高さ（125px→自動）、ヘッダー（タイトル＋カテゴリータグ）の並びで、前3つはclamp()で
   補間する。ヘッダーの並びは、1920px時点はタイトル左・タグ右の横並び、1024px時点はタイトルの下に
   タグの縦積みなので、flex-wrapで「収まる幅なら横並び（space-between）、収まらなければ縦積み」に
   して滑らかに切り替える。本文ブロックは1920px時点で高さ125px固定（情報ブロックの上下の
   space-betweenで余白が決まる）のため、min-heightを125px→0pxでclamp()補間している。
   浴室の写真はFigma上でheight 198.84%・上寄せ気味の切り抜き指定だが、1024px・SP版では同じ値が使われて
   画像が歪むため、strengths/service-sectionの写真と同様にobject-fit: coverで表示し、
   1920px時点の切り抜き位置（画像の上から約69.6%）をobject-positionに反映している。
   letter-spacingはFigma上でフォントサイズの3%（本文・タグ）・8%（タイトル）で一定のためem指定。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.works-section {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
  padding: 0 0 150px;
}

.works-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
  background-color: #d4af37;
}

.works-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

.works-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.works-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.works-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.works-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  white-space: nowrap;
}

.works-cards {
  display: flex;
  flex-direction: column;
  gap: 65px;
}

.work-card {
  display: flex;
  align-items: center;
  gap: 51px;
}

.work-card--reverse {
  flex-direction: row-reverse;
}

.work-card__photo {
  position: relative;
  flex-shrink: 0;
  width: clamp(386px, calc(172.3px + 20.87vw), 573px);
  height: clamp(230px, calc(210.57px + 1.897vw), 247px);
  overflow: hidden;
}

.work-card__photo img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card__photo--crop img {
  object-position: 50% 69.6%;
}

.work-card__info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  align-self: stretch;
  min-width: 0;
  color: #030f26;
}

.work-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.work-card__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
}

.work-card__tag {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border: 1px solid #030f26;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.work-card__body {
  margin: 0;
  min-height: clamp(0px, calc(13.95vw - 142.86px), 125px);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
}

.work-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}

.work-card__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.work-card__divider img {
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  max-width: none;
}

.work-card__owner {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  text-align: right;
  white-space: nowrap;
}

.works-break--sp {
  display: none;
}

/* 1023px以下: SPレイアウトに切り替え（カードが縦積み・写真が上になり、フォント・余白が固定値になる） */
@media (max-width: 1023px) {
  .works-section {
    gap: 35px;
    width: 100%;
    margin: 0;
    padding: 0 16px 100px;
  }

  .works-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .works-header__title {
    font-size: 23px;
  }

  .works-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .works-header__divider {
    height: 1.2px;
  }

  .works-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .works-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .work-card,
  .work-card--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .work-card__photo {
    width: 100%;
    height: 156px;
  }

  .work-card__info {
    flex: none;
    align-self: auto;
    justify-content: flex-start;
  }

  .work-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .work-card__title {
    font-size: 18px;
  }

  .work-card__tag {
    padding: 4px 15px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .work-card__body {
    min-height: 0;
  }

  .works-break--sp {
    display: inline;
  }
}

/* ==========================================================================
   voices-sectionセクション
   Figma: voices-section / node-id 40:311（1920px）, node-id 140:968（1024px）,
          SP-voices-section / node-id 93:658（SP）
   使い方: top_voices-section.php を index.php から <?php include 'top_voices-section.php'; ?> で読み込む
   （カード3件の内容は top_voices-section.php 内の配列にまとめている）。
   グレー（#eaeaea）の背景は画面幅いっぱいに広がる帯で、その中のコンテンツ（.voices-section__inner）を
   PC版1400px・1024px版944px（1920px〜1024pxの間はannouncement-bar__inner等と同じ式のclamp()で
   滑らかに変化）・SP版343px（左右16px余白）でフレーム中央配置している（service-sectionと同じ構成）。
   上下のpaddingはPC版80px・SP版60px。
   前セクション（works-section）との間隔はworks-section側のpadding-bottomで確定値（PC150px・SP100px）を
   担っているため、本セクションの上側の余白は0。次セクション（Top-Page-button）との間隔は、背景が
   帯になっているためpaddingではなくmargin-bottomでPC版150px・SP版100pxを持つ。
   見出しはstrengths/works-sectionと同じ構成だが、背景が金色ではなく白（#ffffff）。
   カード（.voice-card）は「吹き出し（.voice-card__bubble）＋名前ラベル（.voice-card__name-label）」の縦積みで、
   Figma上のカード高さは422px（吹き出し300px＋名前ラベル122px）。文字量やカード幅によって吹き出しの
   テキストが増えても崩れないよう、吹き出しはmin-height 300pxでテキストに応じて伸びるようにし、
   同じ行のカードは高さが揃う（gridのstretch）。
   カードの並びはPC版（1920px時点）が3列、1024px版が2列（3枚目は2段目の左）、SP版が1列。
   フォントサイズ・余白・カード内の値は1920px時点と1024px時点で変わらないため固定値で、変わるのは
   コンテンツ幅（clamp）と列数のみ。列数は、3列のままだとカード幅が約346pxを下回る1380px未満で
   2列に切り替える（1920px時点のカード幅437pxは3列・gap44pxの1400pxから割り付けた値）。
   吹き出しのしっぽ（.voice-card__tail）は、Figma上の回転（-143.64deg）した三角形の位置を
   吹き出しの下端を基準にして再現している（left 107.6px／下端から-23.9px。カード高さが変わっても
   吹き出しの下端に追従する）。
   letter-spacingはFigma上でフォントサイズの3%（本文・タグ）・8%（見出し・カード見出し）で一定のためem指定。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.voices-section {
  margin: 0 0 150px;
  padding: 80px 0;
  background-color: #eaeaea;
}

.voices-section__inner {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
}

.voices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
  background-color: #ffffff;
}

.voices-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

.voices-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.voices-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.voices-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.voices-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  white-space: nowrap;
}

.voices-intro {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
}

.voices-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
}

.voice-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #030f26;
}

.voice-card__bubble {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 30px;
  min-height: 300px;
  padding: 30px 27px;
  background-color: #ffffff;
}

.voice-card__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.08em;
}

.voice-card__body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
}

.voice-card__tail {
  display: block;
  position: absolute;
  top: calc(100% - 23.9px);
  left: 107.6px;
  width: 46.7116px;
  height: 64.9671px;
  max-width: none;
  transform: rotate(-143.64deg);
}

.voice-card__name-label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}

.voice-card__user-icon {
  display: block;
  flex-shrink: 0;
  width: 122px;
  height: 122px;
}

.voice-card__name-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.voice-card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border: 1px solid #030f26;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.voice-card__owner {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  text-align: right;
  white-space: nowrap;
}

/* 1380px以上: カードが3列に並ぶ（1920px時点のカード幅は437px） */
@media (min-width: 1380px) {
  .voices-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 1023px以下: SPレイアウトに切り替え（カードが1列縦積みになり、フォント・余白が固定値になる） */
@media (max-width: 1023px) {
  .voices-section {
    margin-bottom: 100px;
    padding: 60px 16px;
  }

  .voices-section__inner {
    gap: 35px;
    width: 100%;
    margin: 0;
  }

  .voices-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .voices-header__title {
    font-size: 23px;
  }

  .voices-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .voices-header__divider {
    height: 1.2px;
  }

  .voices-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .voices-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .voices-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .voices-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .voice-card__title {
    font-size: 18px;
  }

  .voice-card__body,
  .voice-card__tag,
  .voice-card__owner {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  /* 画面幅が狭くタグが横一列に収まらないときだけ、<wbr>の位置（「バリアフリー／リフォーム」）で
     2行に折り返す（keep-allで<wbr>以外の文字間では折り返さない） */
  .voice-card__tag {
    white-space: normal;
    word-break: keep-all;
    text-align: center;
  }

  /* タグが2行になるカードは名前情報が縦に伸び、中央揃えのままだと上端が吹き出しのしっぽ
     （名前ラベル上端から最大約35px下まではみ出す）に重なるため、上揃え＋padding-top 40pxでしっぽより下に下げる */
  .voice-card__name-info--long {
    align-self: flex-start;
    padding-top: 40px;
  }
}

/* ==========================================================================
   Top-Page-buttonセクション
   Figma: Top-Page-button / node-id 90:738（1920px）, SP-Top-Page-button / node-id 93:725（SP）
   使い方: common_top-page-button.php を各ページから <?php include 'common_top-page-button.php'; ?> で読み込む
   1024px版は用意されていないため、1920px時点の値をベースに、アイコン幅・文字サイズを
   vw比率で比例縮小しつつ、SP版の値を下限にclamp()で固定する（letter-spacingは
   フォントサイズの6%で一定のため、em単位で追従させる）。gapは1920px/SP共に12pxで
   共通のため固定値のまま。
   ブレークポイント: 1023px以下でSP版デザインに切り替え（アイコン・文字サイズに加え、
   文字のフォントもRoboto MediumからOswald Regularへ切り替わる）
   ※ 前セクションとの間隔（padding-top）は0。Topページではannouncement-barが自身の
     padding-bottomでPC版150px・SP版100pxの間隔を担うため。announcement-barを挟まず
     FVの直後にこのセクションを配置するページを実装する場合は、そのページ用の間隔を
     別途調整すること（例: 修飾クラスの追加）。
   コンテンツ幅はannouncement-bar__innerと同じ式（PC版1400px・1024px版944px、
   1920px〜1024pxの間はclamp()で滑らかに変化）にし、width + margin:0 autoで中央配置した
   ボックスの右端にボタンを揃える（画面端基準のpaddingでは無いので注意）。1023px以下は
   幅100%＋外側にleft/right 16pxパディングを付け、SP版のコンテンツ幅343pxを再現する。
   ========================================================================== */
.top-page-button {
  display: flex;
  justify-content: flex-end;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
  padding: 0 0 150px;
}

.top-page-button__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.top-page-button__icon {
  display: block;
  flex-shrink: 0;
  width: clamp(20.78px, 1.49vw, 28.58px);
  height: auto;
  aspect-ratio: 28.5788 / 24.75;
  color: #181c39;
}

.top-page-button__text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 1.35vw, 26px);
  line-height: normal;
  letter-spacing: 0.06em;
  color: #181c39;
  white-space: nowrap;
}

/* hover: 文字と▲の色を #4c78ca に変更（Figma 文字リンク node-id 192:904 の#1a4492からお客様指定で変更）
   ▲はインラインSVG（fill="currentColor"）のため color で色を切り替える。
   PC版（1024px以上かつhover可能な端末）のみ0.4sで色を変化させる。
   1023px以下はアニメーションせず、タップ中（:active）のみ色を切り替える（下のSP用@media内）。 */
@media (hover: hover) and (min-width: 1024px) {
  .top-page-button__icon,
  .top-page-button__text {
    transition: color 0.4s ease;
  }

  .top-page-button__link:hover .top-page-button__icon,
  .top-page-button__link:hover .top-page-button__text {
    color: #4c78ca;
  }
}

/* 1023px以下: SPレイアウトに切り替え（アイコン・文字サイズが固定値になり、フォントもOswald Regularへ） */
@media (max-width: 1023px) {
  .top-page-button {
    width: 100%;
    padding: 0 16px 100px;
  }

  .top-page-button__link {
    -webkit-tap-highlight-color: transparent;
  }

  .top-page-button__link:active .top-page-button__icon,
  .top-page-button__link:active .top-page-button__text {
    color: #4c78ca;
  }

  .top-page-button__icon {
    width: 20.78px;
  }

  .top-page-button__text {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 20px;
  }
}

/* ==========================================================================
   CTA-section
   Figma: cta-section / node-id 90:182（1920px）, node-id 140:1089（1024px）,
          SP-cta-section / node-id 90:1279（SP）
   使い方: common_cta-section.php を各ページから <?php include 'common_cta-section.php'; ?> で読み込む
   （ページ間で内容が変わらないため変数化はしていない）。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。1024px〜1920pxの間は他セクション同様、
   clamp()/vwでパディング・フォントサイズ・要素サイズを滑らかに補間する（1920px超は上限値、
   1024px未満は下限値で固定）。letter-spacingはフォントサイズに対して一定比率のため、em単位で
   追従させる。
   背景写真はcta-bg.jpegをobject-fit: coverで表示し、上に紺色の半透明オーバーレイを重ねる。
   写真・オーバーレイはposition: absoluteで下に敷き、パネル・infoブロックはposition: relativeに
   することで、DOM順によりその上に重なって表示される（fvセクションと同じ手法）。
   cta-button--mailの内側余白（アイコン・見出しのmargin-bottom）は固定値7px。以前はvw依存の
   clamp()（10px→-17px）で補間していたが、幅が広がるほど負のマージンが大きくなり
   「24時間受付中」が見出しに重なる表示崩れが出たため、電話側ボタンと同様に固定値へ変更した。
   ボタン高さ（169px〜183px）に対し、1024px時点・1920px時点ともに中身が収まる値。
   ========================================================================== */
.cta-section {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 106px;
  padding: 80px clamp(40px, calc(-211.43px + 24.55vw), 260px);
}

.cta-section__photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.cta-section__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(4, 19, 47, 0.82);
}

.cta-section__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 66px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  padding: 62px clamp(50px, calc(-7.14px + 5.58vw), 100px);
  background-color: rgba(255, 255, 255, 0.8);
}

.cta-section__panel-title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, calc(22.29px + 1.34vw), 48px);
  line-height: normal;
  letter-spacing: 0.08em;
  color: #000000;
  text-align: center;
}

.cta-section__panel-title-break {
  display: none;
}

.cta-section__buttons {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.cta-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(400px, calc(234.29px + 16.18vw), 545px);
  height: clamp(169px, calc(153px + 1.56vw), 183px);
  padding: 22px 0;
  background-color: #d4af37;
  text-decoration: none;
  cursor: pointer;
}

.cta-button__icon {
  display: block;
  flex-shrink: 0;
}

.cta-button--phone .cta-button__icon {
  width: 49px;
  height: 49px;
  margin-bottom: -4px;
}

.cta-button--phone .cta-button__number {
  margin: 0 0 -4px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(36px, calc(20px + 1.56vw), 50px);
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  text-align: center;
}

.cta-button--mail .cta-button__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 7px;
}

.cta-button--mail .cta-button__heading {
  margin: 0 0 7px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, calc(19.43px + 1.23vw), 43px);
  line-height: normal;
  letter-spacing: -0.02em;
  color: #030f26;
  text-align: center;
}

.cta-button__note {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  text-align: center;
}

.cta-button__note-value {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
}

/* hover（Figma: cta-button バリアント2 / node-id 104:1681）
   背景を薄い色（#f2e6bf）に変更し、translateY(-4px)で浮き上がらせ、
   淡い影を付ける（文字色は変えない）。アイコンは元から白のSVGのため白のまま。
   Figmaにある5pxの枠は、お客様指定でhover時・SP版タップ時とも付けない。
   背景が濃い紺色のため、明るい影だと光って見えてしまう。黒系の低コントラストな影にしている。
   hoverアニメーションはPC版（1024px以上かつhover可能な端末）のみ。
   1023px以下はアニメーションせず、タップ中（:active）の背景色の切り替えのみ（SP用@media内）。 */
.cta-button {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

@media (hover: hover) and (min-width: 1024px) {
  .cta-button {
    transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  }

  .cta-button:hover {
    background-color: #f2e6bf;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }
}

/* 1920px超で左右が離れすぎないよう、最大幅を1400px（1920px時点の幅）にして中央に置く。
   1920px以下は元から1400px以下のため見た目は変わらない */
.cta-section__info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 1400px;
}

.cta-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(25px, calc(-4.71px + 2.9vw), 51px);
}

/* ロゴはTopページ（index.php）へのリンク。幅は<a>側で持ち、画像は<a>の幅いっぱいに表示する */
.cta-section__logo {
  display: block;
  width: clamp(305px, calc(205.57px + 9.71vw), 392px);
}

.cta-section__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.cta-section__message {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, calc(15.43px + 0.45vw), 24px);
  line-height: normal;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
}

.cta-section__address {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350; /* DemiLight（お客様指定でBoldから変更） */
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #ffffff;
  white-space: nowrap;
}

.cta-section__hours {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #ffffff;
}

.cta-section__timetable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: center;
}

.cta-section__row {
  display: flex;
  align-items: center;
  gap: clamp(15px, calc(5.86px + 0.89vw), 23px);
  padding: 0 clamp(0px, calc(-14.86px + 1.45vw), 13px);
  border-bottom: 1px solid #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, calc(15.43px + 0.45vw), 24px);
  line-height: normal;
  letter-spacing: 0.08em;
}

.cta-section__row--header {
  padding-bottom: 15px;
}

.cta-section__row--morning {
  padding-bottom: clamp(0px, calc(-12.57px + 1.23vw), 11px);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cta-section__cell {
  flex-shrink: 0;
  width: clamp(25px, calc(17px + 0.78vw), 32px);
}

.cta-section__cell--label {
  width: clamp(120px, calc(62.86px + 5.58vw), 170px);
  text-align: left;
}

.cta-section__cell--cross {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, calc(12.57px + 2.68vw), 64px);
  letter-spacing: 0.06em;
}

.cta-section__closed {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350; /* DemiLight（お客様指定でBoldから変更） */
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  text-align: right;
}

/* 1023px以下: SPレイアウトに切り替え（パネル・ボタンが縦積みになり、フォント・余白が固定値になる） */
@media (max-width: 1023px) {
  .cta-section {
    gap: 67px;
    padding: 45px 16px;
  }

  .cta-section__photo {
    object-position: 75% 20%;
  }

  .cta-section__panel {
    width: 100%;
    gap: 18px;
    padding: 30px 27px;
  }

  /* 1行に収まらない幅（359px以下）では「お気軽に／ご相談ください」の間で改行する（.phrase） */
  .cta-section__panel-title {
    font-size: 23px;
  }

  .cta-section__panel-title-break {
    display: block;
  }

  .cta-section__buttons {
    flex-direction: column;
    gap: 18px;
    width: 100%;
  }

  .cta-button {
    width: 100%;
    height: auto;
    padding: 14px 0;
    -webkit-tap-highlight-color: transparent;
  }

  .cta-button:active {
    background-color: #f2e6bf;
  }

  .cta-button--phone {
    gap: 5px;
  }

  .cta-button--mail {
    gap: 7px;
  }

  .cta-button--phone .cta-button__icon,
  .cta-button--mail .cta-button__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
  }

  .cta-button--phone .cta-button__number {
    margin: 0;
    font-size: 20px;
  }

  .cta-button--mail .cta-button__heading {
    margin: 0;
    font-size: 20px;
  }

  .cta-section__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 39px;
  }

  .cta-section__content {
    width: 100%;
    gap: 35px;
  }

  .cta-section__logo {
    width: min(343px, 100%);
    align-self: center;
  }

  .cta-section__message,
  .cta-section__address {
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: normal;
  }

  .cta-section__hours {
    width: 100%;
    gap: 7px;
  }

  .cta-section__timetable {
    align-items: stretch;
    width: 100%;
  }

  .cta-section__row {
    gap: 0;
    padding: 0;
    font-size: 14px;
  }

  .cta-section__row--header {
    padding-bottom: 14px;
  }

  .cta-section__row--morning {
    padding-bottom: 0;
    font-size: 14px;
  }

  .cta-section__cell {
    flex: 1 0 0;
    width: auto;
  }

  .cta-section__cell--label {
    flex: none;
    width: 80px;
  }

  .cta-section__cell--dot {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 14px;
  }

  .cta-section__cell--cross {
    font-size: 32px;
    font-weight: 300;
  }

  .cta-section__closed {
    font-size: 14px;
  }
}

/* ==========================================================================
   Footer-section
   Figma: footer-section / node-id 90:252（1920px）, SP-footer-section / node-id 93:730（SP）
   使い方: common_footer-section.php を各ページから <?php include 'common_footer-section.php'; ?> で読み込む
   （コピーライト表記のみのシンプルなデザインのため変数化はしていない）。
   1024px版は用意されていないため、top-page-buttonセクション同様、1920px時点のfont-sizeを
   基準にvw比率で比例縮小しつつ、SP版の値を下限にclamp()で固定する（letter-spacingは
   PC/SP共にフォントサイズの3%で一定のため、em単位で追従させ、切り替えを不要にしている）。
   paddingとfont-weightはPC/SPで値の構造自体が変わるため、ブレークポイントで固定値を切り替える。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.footer-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #ffffff;
}

.footer-section__text {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350; /* DemiLight（お客様指定でBoldから変更。SP版と共通） */
  font-size: clamp(10px, 0.68vw, 13px);
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
  white-space: nowrap;
}

/* 1023px以下: SPレイアウトに切り替え（paddingが固定値になる） */
@media (max-width: 1023px) {
  .footer-section {
    padding: 5px 10px;
  }
}

/* ==========================================================================
   about-sectionセクション（Aboutページ）
   Figma: about-section / node-id 82:335（1920px）, node-id 176:1961（1024px）, SP版 / node-id 102:1407（SP）
   使い方: about_about-section.php を about.php から common_breadcrumb.php の直後に
          <?php include 'about_about-section.php'; ?> で読み込む。
   白背景のセクションで、コンテンツ（.about-section__inner）をPC版1400px・1024px版944px（1920px〜1024pxの間は
   他セクションと同じ式のclamp()で滑らかに変化）・SP版343px（左右16px余白）で中央配置している。
   パンくずリストとの間隔（PC版80px・SP版50px）はmargin-topで、次のセクション（area-section）との間隔（Topページの
   セクション間と同じPC版150px・SP版100px）は
   margin-bottomで持つ（前セクション側が間隔を持つ運用は他セクションと同じ）。要素間の間隔はPC版・SP版で55px・35px。
   見出し（.about-header）はwarranty-sectionと同じ構造で、背景がマスタード（#d4af37）。
   letter-spacingはFigma上でフォントサイズの3%（PC本文）・6%（英字）・8%（日本語見出し・表の見出し・SP本文）で一定のためem指定。
   ▼表と地図（.about-content）
   表と地図を横並びにし、地図（Googleマップの埋め込みiframe）は表の高さに合わせて伸ばす。
   1920px〜1024pxの間はclamp()で補間する（表と地図の間隔 80px→28px、地図の幅 594px→401px、
   表の「項目」列の幅 140px→122px。表の幅・「内容」列の幅は残り幅）。
   罫線は各行の下に1px（#b8b8b8）。「内容」の文字は列幅の中で自然に折り返す。
   SP版は表の下に地図（幅100%・高さ400px）を縦積みにし、「項目」列の幅は100px。
   ▼アクセス（.about-access）
   PC版は各行の高さ29px・間隔10px、SP版は「お客様」の後で改行し、間隔20px。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.about-section {
  margin-top: 80px;
  margin-bottom: 150px;
}

.about-section__inner {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
}

.about-break--sp {
  display: none;
}

.about-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 20px;
  background-color: #d4af37;
}

.about-header__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: normal;
  letter-spacing: 0.08em;
  color: #030f26;
  white-space: nowrap;
}

.about-header__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 21px;
  width: 405px;
}

.about-header__divider {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 0;
}

.about-header__divider img {
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  max-width: none;
}

.about-header__label-text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: normal;
  letter-spacing: 0.06em;
  color: #030f26;
  white-space: nowrap;
}

.about-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
}

.about-intro p {
  margin: 0;
}

.about-content {
  display: flex;
  gap: clamp(28px, calc(-31.43px + 5.8036vw), 80px);
}

.about-table {
  flex: 1 0 0;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
  color: #030f26;
}

.about-table__col-item {
  width: clamp(122px, calc(101.43px + 2.0089vw), 140px);
}

.about-table th,
.about-table td {
  padding: 10px;
  border-bottom: 1px solid #b8b8b8;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  text-align: left;
  vertical-align: middle;
}

.about-table tbody th {
  white-space: nowrap;
}

.about-table thead th {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.08em;
}

/* 1行に収まらない幅（1024px付近）では、単語の途中ではなく「・」の後で改行する */
.about-table__phrase {
  display: inline-block;
  word-break: keep-all;
}

.about-map {
  position: relative;
  flex-shrink: 0;
  width: clamp(401px, calc(180.43px + 21.54vw), 594px);
}

.about-map iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.about-access {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
}

.about-access p {
  display: flex;
  align-items: center;
  min-height: 29px;
  margin: 0;
}

/* 1023px以下: SPレイアウトに切り替え（表と地図が縦積みになり、フォント・余白が固定値になる） */
@media (max-width: 1023px) {
  .about-section {
    margin-top: 50px;
    margin-bottom: 100px;
    padding: 0 16px;
  }

  .about-section__inner {
    gap: 35px;
    width: 100%;
    margin: 0;
  }

  .about-break--sp {
    display: inline;
  }

  .about-header {
    gap: 35px;
    justify-content: flex-start;
    height: auto;
    padding: 5px 7px;
  }

  .about-header__title {
    font-size: 23px;
  }

  .about-header__label {
    flex: 1 0 0;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .about-header__divider {
    height: 1.2px;
  }

  .about-header__divider img {
    top: -1.4px;
    height: 2.6px;
  }

  .about-header__label-text {
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .about-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .about-content {
    flex-direction: column;
    gap: 27px;
  }

  .about-table {
    flex: none;
    width: 100%;
  }

  .about-table__col-item {
    width: 100px;
  }

  .about-table th,
  .about-table td {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .about-table thead th {
    font-weight: 500;
    font-size: 18px;
  }

  .about-table__phrase {
    display: block;
  }

  .about-table__paren {
    display: none;
  }

  .about-map {
    width: 100%;
    height: 400px;
  }

  .about-access {
    gap: 20px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .about-access p {
    display: block;
    min-height: 0;
  }
}

/* ==========================================================================
   area-sectionセクション（Aboutページ）
   Figma: area-section / node-id 84:343（1920px）, node-id 176:2030（1024px）, SP版 / node-id 102:1483（SP）
   使い方: about_area-section.php を about.php から about_about-section.php の直後に
          <?php include 'about_area-section.php'; ?> で読み込む。
   グレー背景（#eaeaea）のセクションで、上下の内側余白はPC版・SP版とも80px・110px。
   コンテンツ（.area-section__inner）は他セクションと同じ式のclamp()でPC版1400px・1024px版944px、SP版343px（左右16px余白）。
   about-sectionとの間隔はabout-section側のmargin-bottom、次のセクション（top-page-button）との間隔（PC版150px・SP版80px）は
   margin-bottomで持つ。要素間の間隔はPC版・SP版とも55px。
   見出しはabout-sectionの .about-header をそのまま使い、モディファイア .about-header--area で背景を白にしている。
   ▼地図と対応エリアの枠（.area-content）
   PC/1024px版は高さ482pxの中で、地図（.area-map）を左上に、対応エリアの枠（.area-list）を右端・上下中央に配置する
   （1024px版は地図の右端が枠の下に少し重なる）。1920px〜1024pxの間はclamp()で補間する
   （地図の幅 945.3px→640px、枠の幅 572px→385px、枠の左右padding 63px→36px）。
   地図画像はトリミングせず、幅に合わせて縦横比を保ったまま縮小する（1024px版のFigmaは地図が横に引き伸ばされているため、
   PC版と同じ縦横比のまま、Figmaの地図の横幅640pxに合わせている）。
   地図上の丸（.area-map__highlight）は .area-map を基準に、地図画像の幅・高さに対する割合（%）で位置・大きさを指定する。
     PC/1024px版（Figma 1920px時点: 地図 945.3×467.7px、丸 left 243px・top 153px・302px）
       left 25.70% / top 32.71% / 幅 31.95% / 高さ 64.57%
     SP版（Figma: 地図 343×353.9px、丸 left 122px・top 141px・172px）
       left 35.57% / top 39.84% / 幅 50.15% / 高さ 48.60%
   SP版は地図（幅100%）の下に枠を置き、枠を地図の下端に41px重ねる（Figmaの重なり量）。
   letter-spacingはFigma上でフォントサイズの3%（PC本文）・8%（見出し・SP本文）で一定のためem指定。
   ブレークポイント: 1023px以下でSP版デザインに切り替え。
   ========================================================================== */
.area-section {
  margin-bottom: 150px;
  padding: 80px 0 110px;
  background-color: #eaeaea;
}

.area-section__inner {
  display: flex;
  flex-direction: column;
  gap: 55px;
  width: clamp(944px, calc(422.86px + 50.89vw), 1400px);
  margin: 0 auto;
}

.area-break--sp {
  display: none;
}

/* 見出し: 共通パーツ（.about-header）の背景色だけを白に変更 */
.about-header--area {
  background-color: #fff;
}

.area-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
}

.area-intro p {
  margin: 0;
}

.area-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 482px;
}

.area-map {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(640px, calc(291.08px + 34.074vw), 945.3px);
}

.area-map__image {
  display: block;
  width: 100%;
  height: auto;
}

.area-map__highlight {
  display: block;
  position: absolute;
  top: 32.71%;
  left: 25.70%;
  width: 31.95%;
  height: 64.57%;
  max-width: none;
}

.area-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 39px;
  width: clamp(385px, calc(171.29px + 20.871vw), 572px);
  padding: 31px clamp(36px, calc(5.14px + 3.0134vw), 63px);
  border: 1px solid #030f26;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: normal;
  color: #030f26;
}

.area-list__title {
  margin: 0;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.area-list__body {
  font-weight: 350;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.area-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* リストと補足文の間はFigmaどおり1行分空ける */
.area-list__note {
  margin: 1lh 0 0;
}

/* 1023px以下: SPレイアウトに切り替え（地図の下に枠を縦積みにし、フォント・余白が固定値になる） */
@media (max-width: 1023px) {
  .area-section {
    margin-bottom: 80px;
    padding: 80px 16px 110px;
  }

  .area-section__inner {
    width: 100%;
    margin: 0;
  }

  .area-break--sp {
    display: inline;
  }

  .area-intro {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .area-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
  }

  .area-map {
    position: relative;
    width: 100%;
  }

  .area-map__highlight {
    top: 39.84%;
    left: 35.57%;
    width: 50.15%;
    height: 48.60%;
  }

  .area-list {
    gap: 10px;
    width: auto;
    margin-top: -41px;
    padding: 12px 22px;
  }

  .area-list__title {
    font-size: 18px;
  }

  .area-list__body {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   SP版セクション見出し共通調整（374px以下）
   対象: Topページ（strengths / service / works / voices）・Menuページ（service-menu / process / warranty / faq）・
         Aboutページ（about / area（.about-header--area））の
         各 〜-header（日本語タイトル ＋ 「線＋英語タイトル」）。375px以上は変更なし。
   375px時点の幅は 見出し内側 = 375 - 左右余白32px - header左右padding14px = 329px。
   374px以下では、日本語タイトル（23px）は変更せず、足りない幅を次の順に吸収する。
     1. 日本語タイトルと「線＋英語タイトル」の間隔を狭める（375px時点35px → 最小15px）
     2. 線を短くする（375px時点の長さ --header-line-w から縮む。英語タイトルの文字サイズはそのまま）
     3. 線が18pxを保てなくなったら線を非表示にし、英語タイトルだけを右端に表示する（見出しごとの @media で切り替え）
     4. それでも入らなくなったら英語タイトルの文字サイズを縮小する（日本語タイトルとの間隔15pxを保つ大きさ）
   1・2は flexbox で自動的に行われる（header の gap 15px ＋ space-between、線は flex-basis --header-line-w で縮む）。
   ※ 線の長さ・線を消す画面幅・英語を縮小する画面幅は見出しの文言ごとに違うため、固定値で持っている（文言を変えたら再計算が必要）。
     J = 日本語タイトルの幅（文字数 × 23px × 1.08）、E = 英語タイトルの幅（13px・字間0.02em時）として
     --header-line-w  = 375px時点の線の長さ = 329px - J - 35px - 6px - E
     線を消す画面幅   = J + E + 46px + 15px + 6px + 18px（375px時点で線が18px未満の見出しは、線が縮み始める J + E + 67px + 線の長さ）未満
     --header-label-a = J + 46px + 15px（英語タイトルに使える幅 = 画面幅 - a）
     --header-label-k = 13 ÷ E。文字サイズ = (画面幅 - a) × k（13pxを上限）
   ========================================================================== */
@media (max-width: 374px) {
  .strengths-header,
  .service-header,
  .works-header,
  .voices-header,
  .service-menu-header,
  .process-header,
  .warranty-header,
  .faq-header,
  .about-header {
    gap: 15px;
    justify-content: space-between;
  }

  .strengths-header__label,
  .service-header__label,
  .works-header__label,
  .voices-header__label,
  .service-menu-header__label,
  .process-header__label,
  .warranty-header__label,
  .faq-header__label,
  .about-header__label {
    flex: 0 1 auto;
  }

  .strengths-header__divider,
  .service-header__divider,
  .works-header__divider,
  .voices-header__divider,
  .service-menu-header__divider,
  .process-header__divider,
  .warranty-header__divider,
  .faq-header__divider,
  .about-header__divider {
    flex: 0 1 var(--header-line-w);
  }

  .strengths-header__label-text,
  .service-header__label-text,
  .works-header__label-text,
  .voices-header__label-text,
  .service-menu-header__label-text,
  .process-header__label-text,
  .warranty-header__label-text,
  .faq-header__label-text,
  .about-header__label-text {
    flex-shrink: 0;
    font-size: clamp(6px, calc((100vw - var(--header-label-a)) * var(--header-label-k)), 13px);
  }

  /* 「選ばれる理由 / WHY CHOOSE US」 J=149.04 E=85.02 → 線を消す: 319px以下 / 英語縮小: 295px以下 */
  .strengths-header {
    --header-line-w: 54px;
    --header-label-a: 210.04px;
    --header-label-k: 0.1529;
  }

  /* 「対応工事メニュー / OUR SERVICES」（Topページ・Menuページで同じ文言）
     J=198.72 E=72.99 → 線を消す: 354px以下（375px時点で線が16.3pxのため、線が縮み始める時点で消す） / 英語縮小: 332px以下 */
  .service-header,
  .service-menu-header {
    --header-line-w: 16.3px;
    --header-label-a: 259.72px;
    --header-label-k: 0.1781;
  }

  /* 「施工事例 / OUR WORKS」 J=99.36 E=61.85 → 線を消す: 246px以下 / 英語縮小: 222px以下 */
  .works-header {
    --header-line-w: 126.8px;
    --header-label-a: 160.36px;
    --header-label-k: 0.2102;
  }

  /* 「お客様の声 / CUSTOMER VOICES」 J=124.2 E=94.61 → 線を消す: 303px以下 / 英語縮小: 279px以下 */
  .voices-header {
    --header-line-w: 69.2px;
    --header-label-a: 185.2px;
    --header-label-k: 0.1374;
  }

  /* 「施工の流れ / OUR PROCESS」 J=124.2 E=70.81 → 線を消す: 280px以下 / 英語縮小: 256px以下 */
  .process-header {
    --header-line-w: 93px;
    --header-label-a: 185.2px;
    --header-label-k: 0.1836;
  }

  /* 「保証について / OUR WARRANTY」 J=149.04 E=80.80 → 線を消す: 314px以下 / 英語縮小: 290px以下 */
  .warranty-header {
    --header-line-w: 58.2px;
    --header-label-a: 210.04px;
    --header-label-k: 0.1609;
  }

  /* 「よくあるご質問 / FAQ」 J=173.88 E=19.8 → 線を消す: 278px以下 / 英語縮小: 254px以下 */
  .faq-header {
    --header-line-w: 94.3px;
    --header-label-a: 234.88px;
    --header-label-k: 0.6566;
  }

  /* 「会社概要 / ABOUT US」 J=99.36 E=51.0 → 線を消す: 235px以下 / 英語縮小: 211px以下 */
  .about-header {
    --header-line-w: 137.6px;
    --header-label-a: 160.36px;
    --header-label-k: 0.2549;
  }

  /* 「対応エリア / SERVICE AREA」（area-section。.about-header の文言違いのためモディファイアで上書き）
     J=124.2 E=70.89 → 線を消す: 280px以下 / 英語縮小: 256px以下 */
  .about-header--area {
    --header-line-w: 92.9px;
    --header-label-a: 185.2px;
    --header-label-k: 0.1834;
  }
}

/* SP版セクション見出し: 線が18pxを保てなくなる画面幅で線を非表示にする（画面幅は上のコメント参照） */
@media (max-width: 354px) {
  .service-header__divider,
  .service-menu-header__divider {
    display: none;
  }
}

@media (max-width: 319px) {
  .strengths-header__divider {
    display: none;
  }
}

@media (max-width: 314px) {
  .warranty-header__divider {
    display: none;
  }
}

@media (max-width: 303px) {
  .voices-header__divider {
    display: none;
  }
}

@media (max-width: 280px) {
  .process-header__divider,
  .about-header--area .about-header__divider {
    display: none;
  }
}

@media (max-width: 278px) {
  .faq-header__divider {
    display: none;
  }
}

@media (max-width: 246px) {
  .works-header__divider {
    display: none;
  }
}

@media (max-width: 235px) {
  .about-header__divider {
    display: none;
  }
}

/* ==========================================================================
   スクロール表示アニメーション（Top・Menu・Aboutページ共通）
   使い方: 動かしたい要素に class="reveal" を付ける（各セクションのPHPで指定済み）。
   <html> の .js-reveal は common_scroll-reveal.php（head）で付け、
   画面に入ったときの .is-revealed の付与は js/script.js の「スクロール表示アニメーション」で行う。
   画面に入ると、下から --reveal-distance 分浮き上がりながらフェードインする。一度表示したら元に戻さない。
   同じタイミングで画面に入った要素（カードの並びなど）は、上→下・左→右の順に --reveal-stagger ずつ遅らせて表示する。
   雰囲気: 誠実で落ち着いた工務店の印象に合わせ、移動は控えめ・動き出しは素早く、止まる直前はゆっくり（ease-out系）。
   対象: 各セクションの中身（見出し・文章・画像・カード・表など）のみ。FV・パンくず・Page Topボタン・
   ヘッダー・フッター、セクションの背景（紺・グレー等の帯）は動かさない。
   ※ transform を使うため、子要素を position:absolute で配置している要素の親（例: .message-signature-block）や、
     自前の transform / transition を持つ要素（例: .cta-button, .message-photo）には付けないこと。
   ※ 距離・速さ・遅延はすべて仮の値。
   ========================================================================== */
.js-reveal {
  --reveal-distance: 30px;
  --reveal-duration: 0.8s;
  --reveal-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --reveal-stagger: 0.15s;
}

/* 「動きを減らす」設定の人には隠さず最初から表示する */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
      opacity var(--reveal-duration) var(--reveal-easing),
      transform var(--reveal-duration) var(--reveal-easing);
    transition-delay: calc(var(--reveal-order, 0) * var(--reveal-stagger));
  }

  .js-reveal .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   sample-site-barセクション（サービスLPに戻るための追従ボタン）
   Figma: sample-site-bar / PC node-id 207:825, SP node-id 204:823
   使い方: common_sample-site-bar.php を各ページの common_footer-section.php の後ろから
   <?php include 'common_sample-site-bar.php'; ?> で読み込む
   仕組みはテンプレAと同じ。表示位置（下の余白16px）:
     PC版(1024px〜) 386×110px。Figmaでは中央だが、テンプレAと同じく画面の右下に固定（右の余白16px）
     SP版(〜1023px) 343×75px。画面の下・横中央に固定（左右は最低16pxあける）
   色・フォントはテンプレCの配色（紺 #04132f・マスタード #d4af37・hover #4c78ca）に合わせている。
   矢印アイコンはインラインSVG（stroke="currentColor"）。色は常に白（.sample-site-bar__button-icon の color）。
   重なり対策:
     - テンプレCの固定要素はSPメニュー（.sp-menu-overlay / z-index: 1000、.sp-menu / 1001）のみ。
       z-index をそれより下の900にして、メニューが開いている間はメニューを上に表示する
     - iPhoneのセーフエリア（画面下のバー）がある場合は、その分だけ上にずらす
       （env(safe-area-inset-bottom)。セーフエリアがない端末では 0）
     - 帯でページの一番下（フッターのコピーライト）が隠れないよう、footer-section が画面に入ったら
       帯をふわっと隠す（js/script.js で .is-hidden を付け外しする。少し上に戻ると再び表示）。
       サービスLPの追従ボタンと同じ考え方で、フッターの下に余白は足さない
   ========================================================================== */
:root {
  --sample-site-bar-height: 110px;
  --sample-site-bar-bottom: 16px;
}

.sample-site-bar {
  position: fixed;
  right: 16px;
  bottom: calc(var(--sample-site-bar-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 386px;
  height: var(--sample-site-bar-height);
  padding: 9px 0;
  border: 2px solid #04132f;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(4, 19, 47, 0.15);
  text-decoration: none;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* footer-section が画面に入っている間は隠す（visibility: hidden でキーボード操作の対象からも外す） */
.sample-site-bar.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.sample-site-bar__button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  background-color: #04132f;
  color: #ffffff;
  font-size: 22px;
}

.sample-site-bar__button-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: normal;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.sample-site-bar__button-icon {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #ffffff;
}

.sample-site-bar__note {
  flex-shrink: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: #030f26;
  text-align: center;
  white-space: nowrap;
}

/* hover: 枠全体（.sample-site-bar）がリンクのため、hoverは枠に付ける。
   他のボタン（.cta-button）と同じく、PC版（1024px以上かつhover可能な端末）のみ0.4s・easeで、
   枠全体を translateY(-4px) で浮き上がらせ、暗めの影を付ける。
   内側のボタンの背景色は、枠にマウスを乗せたときに変える。
   1023px以下はアニメーションせず、タップ中（:active）のボタンの背景色の切り替えのみ（SP用@media内）。 */
@media (hover: hover) and (min-width: 1024px) {
  .sample-site-bar {
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.3s ease, visibility 0.3s ease;
  }

  .sample-site-bar__button {
    transition: background-color 0.4s ease;
  }

  .sample-site-bar:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }

  .sample-site-bar:hover .sample-site-bar__button {
    background-color: #4c78ca;
  }
}

@media (max-width: 1023px) {
  :root {
    --sample-site-bar-height: 75px;
  }

  /* SP版は画面下の横中央（左右は最低16pxあける） */
  .sample-site-bar {
    left: 16px;
    gap: 4px;
    width: auto;
    max-width: 343px;
    margin: 0 auto;
    padding: 6px 0;
    -webkit-tap-highlight-color: transparent;
  }

  .sample-site-bar__button {
    gap: 10px;
    padding: 6px 20px;
    font-size: 16px;
  }

  .sample-site-bar:active .sample-site-bar__button {
    background-color: #4c78ca;
  }

  .sample-site-bar__button-icon {
    width: 16px;
    height: 16px;
  }

  .sample-site-bar__note {
    font-size: 12px;
  }
}

/* ==========================================================================
   SP版の広い画面（856pxなど）での幅の上限（全ページ共通）
   SP版（1023px以下）で画面の幅が広いときに、中身の広がり方がばらばらにならないよう、
   - 各セクションの中身（見出し・文章・画像・カードなど）は最大600pxで中央に置く
   - 写真は最大480pxで中央に置く（FV・CTA-sectionの背景写真は画面いっぱいのまま対象外）
   - 電話番号・フォームのボタンは最大480pxで中央に置く（高さは中身で決まるため、幅が広がっても大きくならない）
   背景の色・帯・装飾は画面いっぱいのまま。375px・320pxでは中身が600px・480pxより狭いため、見た目は変わらない。
   各セクションのSP用@mediaの margin: 0 などを上書きするため、ファイルの最後に置いている。
   ヘッダー（ロゴ＋ハンバーガー）はセクションではないため対象外（画面の両端のまま）。
   ========================================================================== */
:root {
  --sp-content-max: 600px; /* SP：各セクションの中身の最大幅 */
  --sp-photo-max: 480px; /* SP：写真・ボタンの最大幅 */
}

@media (max-width: 1023px) {
  /* 中身を包む要素（左右16pxの余白は外側のセクションが持つ） */
  .announcement-bar__inner,
  .service-section__inner,
  .voices-section__inner,
  .service-menu-header-container__inner,
  .process-section__inner,
  .warranty-section__inner,
  .faq-section__inner,
  .about-section__inner,
  .area-section__inner,
  .cta-section__panel,
  .cta-section__info {
    max-width: var(--sp-content-max);
    margin-right: auto;
    margin-left: auto;
  }

  /* 要素自体が左右16pxの余白も持つもの（余白の分を足す） */
  .breadcrumb__inner,
  .message-section,
  .strengths-section,
  .works-section,
  .top-page-button {
    max-width: calc(var(--sp-content-max) + 32px);
    margin-right: auto;
    margin-left: auto;
  }

  /* menu-card-container は左右12pxの余白（Figma）を margin で持つ */
  .menu-card-container {
    margin-right: max(12px, (100% - var(--sp-content-max)) / 2);
    margin-left: max(12px, (100% - var(--sp-content-max)) / 2);
  }

  /* FVの文字は背景写真の上に絶対配置のため、左右の余白で中身の幅にそろえる */
  .fv__content,
  .page-fv__content {
    padding-right: max(16px, (100% - var(--sp-content-max)) / 2);
    padding-left: max(16px, (100% - var(--sp-content-max)) / 2);
  }

  /* 写真: strengths・works のカードは写真と文字が一体のため、カードごと480pxにそろえる。
     対応エリアの地図も、枠（.area-list）が地図の左下に重なる形を保つため、まとめて480pxにする */
  .strength-card,
  .work-card,
  .menu-card__photo,
  .area-content {
    width: 100%;
    max-width: var(--sp-photo-max);
    margin-right: auto;
    margin-left: auto;
  }

  /* ボタン */
  .cta-section__buttons {
    align-items: center;
  }

  .cta-button {
    max-width: var(--sp-photo-max);
  }

  .sp-menu__button {
    width: 100%;
    max-width: var(--sp-photo-max);
    align-self: center;
  }

  /* SPハンバーガーメニュー: 白い背景（.sp-menu）は画面いっぱいのまま、
     ロゴ・メニューの文字と線を電話・フォームのボタンと同じ最大480pxにまとめて中央に置く
     （.sp-menu__inner は左右28pxの余白を持つため、その分を足す） */
  .sp-menu__inner {
    max-width: calc(var(--sp-photo-max) + 56px);
    margin-right: auto;
    margin-left: auto;
  }
}