/* --------------------------------------------------
   File: site.base-header.css
   担当:
   - :root 変数、共通リセット
   - 固定ヘッダー、ナビ、モバイルメニュー
   - サイト共通の基本トーン（色/影/余白の基礎）
-------------------------------------------------- */

    :root {
      --bg: #ffffff;
      --theme-sage-dark: #8faf9a;
      --header-bg: #ffffff;
      --hero-feature-tile-bg: #ffffff;
      --hero-feature-tile-text: #45454d;
      --hero-feature-tile-text-muted: #676970;
      --header-border: rgba(0, 0, 0, 0.09);
      --header-nav-divider: rgba(0, 0, 0, 0.12);
      --header-text: #45454d;
      --header-text-muted: #676970;
      --header-announce-bg: var(--theme-sage-dark);
      --ui-hover-underline-color: var(--header-announce-bg);
      --ui-hover-underline-thickness: 2px;
      --ui-hover-amber-bg: var(--header-announce-bg);
      --ui-hover-amber-border: color-mix(in srgb, var(--header-announce-bg) 72%, #000000);
      --ui-hover-amber-text: var(--header-announce-text);
      --header-announce-text: #ffffff;
      /* フッター：暗背景に白文字 */
      --footer-bg: #2a2a2e;
      --footer-text: #ffffff;
      --footer-text-muted: rgba(255, 255, 255, 0.74);
      --footer-text-faint: rgba(255, 255, 255, 0.5);
      --footer-line: rgba(255, 255, 255, 0.22);
      --header-glass-blur: 14px;
      --header-glass-saturate: 1.18;
      --header-glass-fill: 88%;
      --header-announce-glass-fill: 86%;
      /* gridpaper 系背景画像のレイヤー不透明度（お悩みタイル SVG エリア） */
      --gridpaper-layer-opacity: 0.6;
      /* ヒーロー：画像下の表示・moonlight copper */
      --hero-bg: #ede0d7;
      /* セクションアクセント（セージグリーン） */
      --section-bg: var(--theme-sage-dark);
      --text: #262626;
      --muted: #444444;
      --line: #d2d2d7;
      --line-cta: #06c755;
      /* カード・パネル・枠線の角丸（サイト統一） */
      --radius: 2px;
      /* 押せるボタン・CTA の角丸 */
      --radius-button: calc(10px * var(--site-scale));
      /* 写真の角丸（カルーセル・モーダル共通） */
      --radius-photo: 14px;
      /* LINE・フォーム等の目立つボタン（ヘッダー CTA・モバイル下部バーで共通） */
      --header-cta-radius: var(--radius-button);
      /* 本文 960px / ヘッダー 1200px（ヘッダーのスマホ切替も 1200px） */
      --header-shell-radius: var(--radius);
      --site-content-max: 960px;
      --site-header-max: 1200px;
      /* セクション背景の縦ライン：ヘッダー左右より 20px 外側 */
      --section-rail-outset: 20px;
      --section-rail-span: calc(var(--site-header-max) + 2 * var(--section-rail-outset));
      --site-scale: calc(960 / 1080);
      --site-inner-440: calc(440px * var(--site-scale));
      --site-inner-560: calc(560px * var(--site-scale));
      --site-inner-650: calc(650px * var(--site-scale));
      --site-inner-720: calc(720px * var(--site-scale));
      --site-inner-760: calc(760px * var(--site-scale));
      --site-inner-800: calc(800px * var(--site-scale));
      --site-inner-820: calc(820px * var(--site-scale));
      --site-inner-1000: calc(1000px * var(--site-scale));
      --site-inner-1720: calc(1720px * var(--site-scale));
      --section-block-gap: clamp(
        calc(28px * var(--site-scale)),
        calc(4vw * var(--site-scale)),
        calc(40px * var(--site-scale))
      );
      --header-pad-x: max(calc(16px * var(--site-scale)), env(safe-area-inset-left));
      --header-pad-x2: max(calc(16px * var(--site-scale)), env(safe-area-inset-right));
      --top-sticky-prelude: 0px;
      /* 固定ヘッダー分（ティッカー＋ロゴ・ナビ・CTA 横一列） */
      --top-header-fixed-offset: clamp(5.5rem, 6.25rem, 6.75rem);
      /* メインメニュー（.site-subnav-list）と揃える本文サイズ */
      --font-size-menu: 0.85rem;
      /* ヒーロータイル（本文と同じ BIZ UD ゴシック系） */
      --font-hero-tile: "BIZ UDGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
      --hero-tile-title-aqua: #38b6df;
      /* 料金セクション見出しと同スケール（主要セクション見出しで共通利用） */
      --section-heading-price-size: clamp(
        1.25rem,
        calc(3vw * var(--site-scale)),
        1.75rem
      );
      /* 「こんなお悩み…」左右イラストと About ロゴの横幅を揃える */
      --heading-emblem-width: clamp(
        calc(104px * var(--site-scale)),
        calc(28vw * var(--site-scale)),
        calc(192px * var(--site-scale))
      );
      /* サイト共通の box-shadow（基準：固定ヘッダー .site-header-group。濃さは現行のまま） */
      --shadow-header: 0 4px 14px rgba(0, 0, 0, 0.07), 0 2px 5px rgba(0, 0, 0, 0.05);
      --shadow-header-hover: 0 6px 18px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    @media (max-width: 960px) {
      :root {
        --top-header-fixed-offset: 6.25rem;
        --section-block-gap: clamp(
          calc(22px * var(--site-scale)),
          calc(5vw * var(--site-scale)),
          calc(32px * var(--site-scale))
        );
      }
    }

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

    html {
      font-size: calc(100% * var(--site-scale));
      -webkit-text-size-adjust: 100%;
      overscroll-behavior-y: none;
      scroll-padding-top: var(--top-header-fixed-offset, 7rem);
      background-color: var(--bg);
    }

    body {
      margin: 0;
      font-family: "BIZ UDGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
      font-size: 1rem;
      line-height: 1.6;
      letter-spacing: 0.02em;
      color: var(--text);
      background-color: var(--bg);
      overscroll-behavior-y: none;
      padding-top: var(--top-header-fixed-offset, 7rem);
    }

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

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

    .container {
      width: min(100%, var(--site-content-max));
      max-width: min(100%, var(--site-content-max));
      margin: 0 auto;
      padding: 0 var(--header-pad-x) 0 var(--header-pad-x2);
      box-sizing: border-box;
    }

    /* トップ：ヒーロー・ヘッダー外枠と内容の端を揃える（狭い画面のみ container 横パディング） */
    @media (min-width: 961px) {
      body.page-index main .container {
        padding-left: 0;
        padding-right: 0;
      }
    }

    /* ヘッダー全体：全幅（中身は最大 1200px） */
    .site-header-group {
      position: fixed;
      top: var(--top-sticky-prelude, 0px);
      left: 0;
      right: 0;
      width: 100%;
      max-width: none;
      margin-inline: 0;
      box-sizing: border-box;
      z-index: 110;
      background: transparent;
      border-bottom: none;
      box-shadow: var(--shadow-header);
      border-radius: var(--header-shell-radius);
      overflow: hidden;
      padding-top: max(0px, env(safe-area-inset-top));
      padding-bottom: 0;
    }

    body.page-sub .site-header-group {
      padding-top: 0;
    }

    .site-header {
      background: color-mix(in srgb, var(--header-bg) var(--header-glass-fill), transparent);
      backdrop-filter: blur(var(--header-glass-blur)) saturate(var(--header-glass-saturate));
      -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(var(--header-glass-saturate));
      border-bottom: none;
      padding-bottom: 0;
    }

    .site-header-announce {
      box-sizing: border-box;
      width: 100%;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      background: color-mix(
        in srgb,
        var(--header-announce-bg) var(--header-announce-glass-fill),
        transparent
      );
      backdrop-filter: blur(var(--header-glass-blur)) saturate(var(--header-glass-saturate));
      -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(var(--header-glass-saturate));
    }

    .site-header-announce__bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.35rem 0.65rem;
      width: min(100%, var(--site-header-max));
      max-width: min(100%, var(--site-header-max));
      margin: 0 auto;
      padding: 0.72rem max(16px, var(--header-pad-x)) 0.72rem max(16px, var(--header-pad-x2));
      color: var(--header-announce-text);
      font-size: clamp(0.6875rem, 1.55vw, 0.8125rem);
      font-weight: 700;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: center;
    }

    .site-header-announce__lead {
      margin: 0;
    }

    .site-header-announce__lead-link {
      margin-left: 0.6em;
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.2em;
      font-weight: 700;
      white-space: nowrap;
    }

    .site-header-announce__lead-link:hover,
    .site-header-announce__lead-link:focus-visible {
      opacity: 0.75;
    }

    .site-header-announce-board__link {
      margin-left: 0.4em;
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.2em;
      font-weight: 700;
      white-space: nowrap;
    }

    .site-header-announce-board__link:hover,
    .site-header-announce-board__link:focus-visible {
      opacity: 0.75;
    }

    .site-header-announce__toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      width: auto;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      line-height: inherit;
      text-align: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    .site-header-announce__toggle:hover,
    .site-header-announce__toggle:active,
    .site-header-announce__toggle:focus,
    .site-header-announce__toggle:focus-visible {
      background: transparent;
      color: inherit;
      opacity: 1;
      outline: none;
      box-shadow: none;
    }

    .site-header-announce__toggle-label {
      user-select: none;
    }

    .site-header-announce__toggle-underline {
      text-decoration: underline;
      text-underline-offset: 0.16em;
      text-decoration-thickness: 1px;
    }

    .site-header-announce__toggle-icon {
      flex-shrink: 0;
      width: 0.55rem;
      height: 0.55rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg) translateY(-0.12em);
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .site-header-announce.is-open .site-header-announce__toggle-icon {
      transform: rotate(225deg) translateY(0.08em);
    }

    .site-header-announce__panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .site-header-announce.is-open .site-header-announce__panel {
      grid-template-rows: 1fr;
    }

    .site-header-announce.is-reduced-motion .site-header-announce__panel {
      transition-duration: 0.01ms;
    }

    .site-header-announce__panel-inner {
      overflow: hidden;
      min-height: 0;
    }

    .site-header-announce-board {
      box-sizing: border-box;
      width: min(100%, var(--site-header-max));
      max-width: min(100%, var(--site-header-max));
      margin: 0 auto;
      padding: 0 max(16px, var(--header-pad-x)) clamp(14px, 2.4vw, 18px)
        max(16px, var(--header-pad-x2));
    }

    .site-header-announce-board__heading {
      margin: 0;
      padding: 0.55rem 0.85rem;
      background: var(--header-announce-bg);
      border: 2px solid color-mix(in srgb, var(--header-announce-bg) 72%, #000000);
      border-bottom: 0;
      border-radius: var(--radius) var(--radius) 0 0;
      color: var(--header-announce-text);
      font-size: clamp(0.875rem, 1.8vw, 1rem);
      font-weight: 800;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: center;
    }

    .site-header-announce-board__heading-en {
      font-size: 0.72em;
      font-weight: 700;
      letter-spacing: 0.08em;
      opacity: 0.92;
    }

    .site-header-announce-board__list {
      margin: 0;
      padding: clamp(10px, 1.8vw, 14px) clamp(12px, 2vw, 16px);
      list-style: none;
      background: #ffffff;
      border: 2px solid color-mix(in srgb, var(--header-announce-bg) 72%, #000000);
      border-top: 0;
      border-radius: 0 0 var(--radius) var(--radius);
    }

    .site-header-announce-board__item + .site-header-announce-board__item {
      margin-top: 0.55rem;
      padding-top: 0.55rem;
      border-top: 1px dashed rgba(0, 0, 0, 0.12);
    }

    .site-header-announce-board__line {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.35rem 0.5rem;
      margin: 0;
      color: var(--text);
      font-size: clamp(0.8125rem, 1.6vw, 0.9375rem);
      font-weight: 700;
      line-height: 1.55;
    }

    .site-header-announce-board__bullet {
      flex-shrink: 0;
      align-self: center;
      color: var(--header-announce-bg);
      font-size: 1.6em;
      font-weight: 700;
      line-height: 1;
    }

    .site-header-announce-board__date {
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .site-header-announce-board__body {
      flex: 1 1 12rem;
      min-width: 0;
    }

    /* ヒーロー（角丸ラッパー） */
    .hero-stage {
      position: relative;
      width: min(100%, var(--site-content-max));
      max-width: min(100%, var(--site-content-max));
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

    body.page-index .hero-stage {
      --hero-stage-gap: clamp(
        calc(16px * var(--site-scale)),
        calc(2.8vw * var(--site-scale)),
        calc(28px * var(--site-scale))
      );
      --hero-stage-inset-x: clamp(
        calc(12px * var(--site-scale)),
        calc(2.4vw * var(--site-scale)),
        calc(20px * var(--site-scale))
      );
      margin-top: var(--hero-stage-gap);
      width: min(
        calc(100% - 2 * var(--hero-stage-inset-x)),
        var(--site-content-max)
      );
      max-width: min(
        calc(100% - 2 * var(--hero-stage-inset-x)),
        var(--site-content-max)
      );
      border-radius: 0;
      overflow: hidden;
      box-shadow: var(--shadow-header);
    }

    .hero-stage .hero {
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    /* ヘッダー：アンバー下線スライド */
    .site-nav-item__label,
    .site-header-cta__label {
      position: relative;
      display: inline-block;
      padding-bottom: 1px;
    }

    .site-nav-item__label::after,
    .site-header-cta__label::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: var(--ui-hover-underline-thickness);
      background-color: var(--ui-hover-underline-color);
      transform: scaleX(0);
      transform-origin: center center;
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .site-header-inline-list a:hover .site-nav-item__label::after,
    .site-header-inline-list a:focus-visible .site-nav-item__label::after,
    .mobile-menu-list a:hover .site-nav-item__label::after,
    .mobile-menu-list a:focus-visible .site-nav-item__label::after,
    .site-header-cta__btn:hover .site-header-cta__label::after,
    .site-header-cta__btn:focus-visible .site-header-cta__label::after {
      transform: scaleX(1);
    }

    /* ヘッダー以外のボタン：セージグリーンでハイライト */
    .hero-feature-tile__btn:not(.hero-feature-tile__btn--line):not(.hero-feature-tile__btn--form),
    .mobile-action-bar__btn,
    .price-menu-cta__btn,
    .site-sidebar__btn,
    .services-page-categories__btn {
      transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;
    }

    .hero-feature-tile__btn:not(.hero-feature-tile__btn--line):not(.hero-feature-tile__btn--form):hover,
    .hero-feature-tile__btn:not(.hero-feature-tile__btn--line):not(.hero-feature-tile__btn--form):focus-visible,
    .mobile-action-bar__btn:hover,
    .mobile-action-bar__btn:focus-visible,
    .price-menu-cta__btn:hover,
    .price-menu-cta__btn:focus-visible,
    .site-sidebar__btn:hover,
    .site-sidebar__btn:focus-visible,
    .services-page-categories__btn:hover,
    .services-page-categories__btn:focus-visible {
      background-color: var(--ui-hover-amber-bg);
      border-color: var(--ui-hover-amber-border);
      color: var(--ui-hover-amber-text);
      box-shadow: var(--shadow-header-hover);
    }

    .trouble-tile:hover .trouble-tile__viz,
    .trouble-tile:focus-visible .trouble-tile__viz {
      background-color: var(--ui-hover-amber-bg);
      border-color: color-mix(in srgb, var(--header-text) 32%, var(--line));
      box-shadow: var(--shadow-header-hover);
    }

    @media (prefers-reduced-motion: reduce) {
      .site-nav-item__label::after,
      .site-header-cta__label::after {
        transition-duration: 0.01ms;
      }
    }

    /* ヘッダー：左（ロゴ）| 中央（ナビ）| 右（LINE・メール） */
    .site-header-main {
      width: 100%;
      max-width: min(100%, var(--site-header-max));
      margin: 0 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: clamp(0.5rem, 1.5vw, 1.25rem);
      padding-top: 0.45rem;
      padding-bottom: 0.45rem;
      box-sizing: border-box;
    }

    .site-header-brand-row {
      grid-column: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      justify-self: start;
      width: auto;
      min-width: 0;
    }

    .site-header-brand-row .brand-link {
      width: auto;
      margin-inline: 0;
      line-height: 0;
    }

    .site-header-brand-row .brand-logo {
      display: block;
      width: auto;
      height: 38px;
      max-width: min(284px, 42vw);
      aspect-ratio: 2640 / 354;
    }

    .site-header-cta {
      grid-column: 3;
      display: flex;
      width: auto;
      min-width: 0;
      justify-self: end;
      margin-inline: 0;
    }

    .site-header-cta--center .site-header-cta__actions {
      justify-content: flex-end;
      align-items: stretch;
    }

    .site-header-cta__actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 8px 10px;
      min-width: 0;
      max-width: 100%;
    }

    .site-header-cta__actions .site-header-cta__btn {
      width: 100%;
      min-width: 0;
      white-space: nowrap;
      max-width: none;
    }

    .site-header-cta__btn {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      box-sizing: border-box;
      min-width: 0;
      /* 当初のコンパクト版（34px / 0.75rem）の約 1.3 倍 */
      min-height: calc(34px * 1.3);
      padding: calc(6px * 1.3) calc(10px * 1.3);
      font-size: calc(0.75rem * 1.3);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: 0.02em;
      text-align: center;
      text-decoration: none;
      border-radius: var(--header-cta-radius);
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .site-header-cta__icon {
      display: block;
      width: calc(1.125rem * 1.3);
      height: calc(1.125rem * 1.3);
      flex-shrink: 0;
      object-fit: contain;
    }

    .site-header-cta__label {
      display: inline-block;
    }

    .site-header-cta__btn--line {
      color: #ffffff;
      background: #06c755;
      border: 1px solid #06c755;
      box-shadow: var(--shadow-header);
    }

    .site-header-cta__btn--line:hover,
    .site-header-cta__btn--line:focus-visible {
      background-color: var(--ui-hover-amber-bg);
      border-color: var(--ui-hover-amber-border);
      color: var(--ui-hover-amber-text);
      box-shadow: var(--shadow-header-hover);
    }

    .site-header-cta__btn--form {
      color: #262626;
      background: #ffffff;
      border: 1px solid #1d1d1f;
      box-shadow: var(--shadow-header);
    }

    .site-header-cta__btn--form:hover,
    .site-header-cta__btn--form:focus-visible {
      background-color: var(--ui-hover-amber-bg);
      border-color: var(--ui-hover-amber-border);
      color: var(--ui-hover-amber-text);
      box-shadow: var(--shadow-header-hover);
    }

    .site-header-inline-nav {
      grid-column: 2;
      grid-row: 1;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      justify-self: stretch;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .site-header-inline-nav::-webkit-scrollbar {
      display: none;
    }

    .site-header-inline-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: center;
      gap: 0;
      width: max-content;
      max-width: 100%;
      min-width: 0;
      margin-inline: auto;
    }

    .site-header-inline-list .site-nav-item--soon {
      display: inline-grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 6px;
      row-gap: 0.12em;
      min-height: 36px;
      padding: 2px 7px;
      font-size: calc(0.875rem + 2px);
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--header-text-muted);
      cursor: not-allowed;
      pointer-events: none;
      user-select: none;
    }

    .site-header-inline-list .site-nav-item--soon .site-nav-item__label {
      display: contents;
    }

    .site-header-inline-list .site-nav-item--soon .site-nav-label-en {
      grid-row: 2;
      grid-column: 1;
      justify-self: end;
    }

    .site-header-inline-list .site-nav-item--soon .site-nav-soon-badge {
      grid-row: 1;
      grid-column: 2;
    }

    .site-header-inline-list li {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
    }

    .site-header-inline-list li + li {
      border-left: 1px solid var(--header-nav-divider);
      margin-left: clamp(10px, 1.4vw, 18px);
      padding-left: clamp(10px, 1.4vw, 18px);
    }

    .site-nav-label-en {
      align-self: flex-end;
      font-size: 0.72em;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 1;
      opacity: 0.9;
    }

    .site-header-inline-list a {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0.12em;
      min-height: 36px;
      padding: 2px 7px;
      font-size: calc(0.875rem + 2px);
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--header-text);
      border-radius: 0;
      white-space: nowrap;
    }

    .site-header-inline-list a:hover,
    .site-header-inline-list a:focus-visible {
      color: var(--header-text);
    }

    .brand-link {
      display: inline-flex;
      width: clamp(140px, min(22vw, 24dvh), 220px);
      flex: 0 0 auto;
    }

    .brand-logo {
      width: 100%;
      height: auto;
      display: block;
    }

    .brand-link:focus-visible,
    .mobile-menu-toggle:focus-visible,
    .mobile-menu-list a:focus-visible,
    .site-header-inline-list a:focus-visible,
    .site-header-cta__btn:focus-visible {
      outline: 2px solid var(--header-text);
      outline-offset: 2px;
    }

    .site-header-menu-mobile {
      display: none;
    }

    .site-header-desktop {
      display: block;
      width: min(100%, var(--site-header-max));
      max-width: min(100%, var(--site-header-max));
    }

    @media (min-width: 1201px) {
      .site-header-desktop.container {
        padding-left: 0;
        padding-right: 0;
      }
    }

    /* ヘッダー：1200px以下はハンバーガー（本文のスマホ切替は 960px のまま） */
    @media (max-width: 1200px) {
      .site-header-group {
        top: 0;
      }

      .site-header {
        border-bottom: 0;
      }

      .site-header-desktop,
      .site-header-main {
        display: none;
      }

      .site-header-menu-mobile {
        display: block;
        border-bottom: none;
      }

      .site-header-menu-mobile .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
      }

      .site-header-menu-mobile .mobile-menu-panel-inner {
        padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
      }

      body.page-index .site-header-menu-mobile {
        border-bottom: none;
      }
    }

    .site-header-mobile-bar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
      align-items: stretch;
      min-height: 56px;
    }

    .site-header-mobile-bar .brand-link {
      grid-column: 1;
      justify-self: start;
    }

    .site-header-mobile-bar .mobile-menu-toggle {
      grid-column: 3;
      justify-self: end;
    }

    .site-header-mobile-bar:not(:has(.brand-link)) {
      grid-template-columns: 1fr;
    }

    .site-header-mobile-bar:not(:has(.brand-link)) .mobile-menu-toggle {
      grid-column: 1;
      justify-self: end;
      margin-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .site-header-mobile-bar .brand-link {
      flex: initial;
      display: flex;
      align-items: center;
      min-width: 0;
      padding: 8px max(12px, env(safe-area-inset-left));
      line-height: 0;
    }

    .site-header-mobile-bar .brand-link .brand-logo {
      display: block;
      width: auto;
      height: clamp(42px, 10vw, 54px);
      max-width: min(403px, 85vw);
      aspect-ratio: 2640 / 354;
    }

    .site-header-mobile-bar .mobile-menu-toggle {
      flex: initial;
    }

    .mobile-menu-toggle {
      display: inline-flex;
      flex: 0 0 auto;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-sizing: border-box;
      width: auto;
      min-width: 72px;
      min-height: 56px;
      height: auto;
      padding: 8px max(14px, env(safe-area-inset-right));
      margin: 0;
      font-family: inherit;
      font-weight: 700;
      line-height: 1.15;
      font-size: clamp(0.75rem, 2.6vw, 0.875rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--header-text);
      background: transparent;
      border: none;
      border-left: 1px solid var(--header-border);
      border-radius: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background-color 0.2s ease, filter 0.2s ease;
    }

    .mobile-menu-toggle-text {
      display: inline-block;
      font-size: inherit;
      letter-spacing: inherit;
      text-align: center;
    }

    .mobile-menu-toggle:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .mobile-menu-toggle-bars {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 1.5rem;
      height: auto;
      flex-shrink: 0;
    }

    .mobile-menu-toggle-bars span {
      display: block;
      width: 100%;
      height: 2.5px;
      border-radius: 1px;
      background: currentColor;
      transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.25s ease;
      transform-origin: center;
    }

    .mobile-menu-toggle.is-open .mobile-menu-toggle-bars span:nth-child(1) {
      transform: translateY(7.5px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open .mobile-menu-toggle-bars span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    .mobile-menu-toggle.is-open .mobile-menu-toggle-bars span:nth-child(3) {
      transform: translateY(-7.5px) rotate(-45deg);
    }

    .mobile-menu-panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.35s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .mobile-menu-panel.is-open {
      grid-template-rows: 1fr;
    }

    .mobile-menu-panel-inner {
      min-height: 0;
      overflow: hidden;
    }

    .mobile-menu-list {
      /* 「準備中」バッジを整列線の外（右側）に出すための予約幅 */
      --mobile-menu-badge-reserve: 56px;
      list-style: none;
      margin: 0;
      padding: 4px 0 0;
      text-align: right;
    }

    .mobile-menu-list li {
      margin: 0;
      border-top: 1px solid var(--header-border);
      display: flex;
      justify-content: flex-end;
    }

    .mobile-menu-list a {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 0.12em;
      width: max-content;
      max-width: 100%;
      margin-inline: 0;
      min-height: 46px;
      padding: 10px calc(4px + var(--mobile-menu-badge-reserve)) 10px 4px;
      text-align: right;
      font-size: 0.9375rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--header-text);
    }

    .mobile-menu-list a:hover,
    .mobile-menu-list a:focus-visible {
      color: var(--header-text);
    }

    .site-header .site-nav-soon-badge,
    .site-header-group .site-nav-soon-badge {
      color: var(--header-text-muted);
      background: rgba(0, 0, 0, 0.06);
      border: 1px solid var(--header-border);
    }

    .site-nav-soon-badge {
      flex-shrink: 0;
      padding: 0.22em 0.55em;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      line-height: 1.2;
      color: #4a4a50;
      background: rgba(29, 29, 31, 0.06);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      white-space: nowrap;
    }

    .mobile-menu-list .site-nav-item--soon .site-nav-item__label {
      display: contents;
    }

    .mobile-menu-list .site-nav-item--soon {
      display: inline-grid;
      /* ラベルの右端を他項目と揃え、バッジは予約幅の中で右に張り出させる */
      grid-template-columns: auto var(--mobile-menu-badge-reserve);
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 0;
      row-gap: 0.12em;
      min-height: 46px;
      padding: 10px 4px;
      text-align: right;
      font-size: 0.9375rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--header-text-muted);
      cursor: not-allowed;
      pointer-events: none;
      user-select: none;
    }

    .mobile-menu-list .site-nav-item--soon .site-nav-label-en {
      grid-row: 2;
      grid-column: 1;
      justify-self: end;
    }

    .mobile-menu-list .site-nav-item--soon .site-nav-soon-badge {
      grid-row: 1;
      grid-column: 2;
      justify-self: end;
    }

    @media (min-width: 1201px) {
      .site-header-main {
        column-gap: clamp(0.35rem, 1vw, 0.75rem);
      }

      .site-header-inline-list li + li {
        margin-left: clamp(8px, 0.9vw, 14px);
        padding-left: clamp(8px, 0.9vw, 14px);
      }

      .site-header-inline-list a {
        font-size: calc(0.8125rem + 2px);
        padding: 0 5px;
      }

      .site-header-cta__btn {
        min-height: calc(34px * 1.15);
        padding: calc(6px * 1.15) calc(10px * 1.15);
        font-size: calc(0.75rem * 1.15);
        gap: 0.4rem;
      }

      .site-header-cta__icon {
        width: calc(1.125rem * 1.15);
        height: calc(1.125rem * 1.15);
      }
    }

    body.page-index .site-header {
      border-bottom: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .mobile-menu-panel {
        transition: grid-template-rows 0.01s linear;
      }

      .mobile-menu-toggle-bars span {
        transition: none;
      }
    }

    /* ヒーロー：写真・半透明帯とも最大 960px（.container と同じ上限） */
    .hero {
      --hero-scale: 0.667;
      --hero-font-scale: 0.78;
      --hero-min-height: clamp(
        calc(300px * var(--hero-scale) * var(--site-scale)),
        calc(46vh * var(--hero-scale)),
        calc(580px * var(--hero-scale) * var(--site-scale))
      );
      --hero-strip-offset: clamp(
        calc(24px * var(--hero-scale)),
        calc(5vw * var(--hero-scale)),
        calc(56px * var(--hero-scale))
      );
      position: relative;
      isolation: isolate;
      width: min(100%, var(--site-content-max));
      max-width: min(100%, var(--site-content-max));
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      padding: var(--hero-strip-offset) 0;
      min-height: var(--hero-min-height);
      border: none;
      background-color: transparent;
      overflow: hidden;
      min-width: 0;
    }

    @keyframes hero-drop-in {
      from {
        opacity: 0;
        transform: translate3d(0, -88px, 0);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes hero-text-slide-in {
      from {
        opacity: 0;
        transform: translate3d(-56px, 0, 0);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      body.page-index .hero__visual {
        opacity: 0;
        transform: translate3d(0, -88px, 0);
      }

      body.page-index .hero-tagline,
      body.page-index .hero-title-box,
      body.page-index .hero-text-strip .hero-lead-box {
        opacity: 0;
        transform: translate3d(-56px, 0, 0);
      }

      body.page-index .hero-stage.is-hero-in .hero__visual {
        animation: hero-drop-in 0.56s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      body.page-index .hero-stage.is-hero-in .hero-tagline {
        animation: hero-text-slide-in 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
      }

      body.page-index .hero-stage.is-hero-in .hero-title-box {
        animation: hero-text-slide-in 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.78s forwards;
      }

      body.page-index .hero-stage.is-hero-in .hero-text-strip .hero-lead-box {
        animation: hero-text-slide-in 0.52s cubic-bezier(0.16, 1, 0.3, 1) 1.14s forwards;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body.page-index .hero__visual,
      body.page-index .hero-tagline,
      body.page-index .hero-title-box,
      body.page-index .hero-text-strip .hero-lead-box {
        opacity: 1;
        transform: none;
      }
    }

    .hero__visual {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      background-color: var(--hero-bg);
      pointer-events: none;
    }

    .hero__visual-half {
      overflow: hidden;
      min-width: 0;
    }

    .hero__visual-half img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .hero__visual-half--desktop img {
      object-position: 42% center;
    }

    .hero__visual-half--laptop img {
      object-position: 58% center;
    }

    /* ヒーロー：テキスト位置用ラッパー（背景は .hero-inner のボックス） */
    .hero-text-strip {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      background-color: transparent;
      margin-top: 0;
      --hero-text-strip-pad-y: clamp(
        calc(24px * var(--hero-scale, 0.667)),
        calc(4vw * var(--hero-scale, 0.667)),
        calc(40px * var(--hero-scale, 0.667))
      );
      padding-top: var(--hero-text-strip-pad-y);
      padding-bottom: var(--hero-text-strip-pad-y);
      margin-bottom: 0;
    }

    .hero-title-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(0.45rem, 1.2vw, 0.65rem);
      margin: 0;
      width: fit-content;
      max-width: 100%;
    }

    .hero-tagline {
      flex: 0 0 auto;
      width: fit-content;
      max-width: 100%;
      margin: 0;
      padding-top: calc(12px * var(--hero-scale, 0.667));
      padding-bottom: calc(12px * var(--hero-scale, 0.667));
      padding-left: var(--hero-inner-pad-x);
      padding-right: var(--hero-inner-pad-x);
      background-color: color-mix(in srgb, #ffffff 88%, transparent);
      color: var(--text);
      font-size: calc(0.9375rem * 1.3 * var(--hero-font-scale, 0.78));
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: 0.02em;
      white-space: nowrap;
      box-sizing: border-box;
    }

    .hero-text-strip .hero-title-box {
      display: block;
      width: fit-content;
      max-width: 100%;
      box-sizing: border-box;
      background-color: color-mix(in srgb, #ffffff 88%, transparent);
      border: none;
      border-radius: 0;
      padding-top: var(--hero-inner-pad-y);
      padding-bottom: var(--hero-inner-pad-y);
      padding-left: var(--hero-inner-pad-x);
      padding-right: var(--hero-inner-pad-x);
      margin: 0;
      transform: none;
    }

    .hero-text-strip #hero-title {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      color: var(--text);
      margin: 0;
      padding: 0;
      line-height: 1.28;
      text-shadow: none;
      white-space: nowrap;
      text-align: right;
    }

    .hero-text-strip #hero-title .hero-title-sub {
      display: block;
      margin-top: 0.12em;
      font-size: 0.58em;
      font-weight: 700;
      letter-spacing: 0.04em;
      line-height: 1.3;
      text-align: right;
    }

    .hero-text-strip .container {
      --hero-inner-pad-y: calc(20px * var(--hero-scale, 0.667));
      --hero-inner-pad-x: clamp(
        calc(16px * var(--hero-scale, 0.667)),
        calc(2.8vw * var(--hero-scale, 0.667)),
        calc(24px * var(--hero-scale, 0.667))
      );
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }

    .hero-text-strip .hero-lead-box {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: calc(0.5em * var(--hero-scale, 0.667));
      width: fit-content;
      max-width: min(100%, var(--site-inner-1000));
      margin: 0;
      margin-right: auto;
      padding-top: var(--hero-inner-pad-y);
      padding-bottom: var(--hero-inner-pad-y);
      padding-left: var(--hero-inner-pad-x);
      padding-right: var(--hero-inner-pad-x);
      background-color: color-mix(in srgb, #ffffff 88%, transparent);
    }

    .hero-text-strip .hero-lead {
      color: var(--text);
      text-shadow: none;
    }

    body.page-index .site-header-group,
    body.page-index .site-header {
      border-bottom: none;
    }

    .hero-inner {
      width: 100%;
      max-width: min(100%, var(--site-inner-820));
      margin: 0 auto;
      box-sizing: border-box;
      padding-left: clamp(14px, 2.5vw, 20px);
      padding-right: clamp(14px, 2.5vw, 20px);
      text-align: left;
    }

    /* 見出し行：タグライン（小）→ H1（大）— 帯の左端をヒーロー左端に揃える */
    .hero-text-strip .hero-inner {
      max-width: 100%;
      width: 100%;
      margin: 0 0 calc(0.72rem * var(--hero-scale, 0.667));
      box-sizing: border-box;
      background-color: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
    }

    .hero-text-strip .hero-title-row {
      margin: 0;
    }

    .hero-title-box {
      display: inline-block;
      max-width: 100%;
      box-sizing: border-box;
      background: #ffffff;
      border: 1px solid #d2d2d7;
      border-radius: var(--radius);
      padding: 0.6em 0.85em 0.65em;
      margin: 0 0 calc(1rem * var(--hero-scale, 0.667));
    }

    .hero-title-row .hero-title-box {
      margin: 0;
    }

    .hero h1 {
      margin: 0;
      font-size: clamp(
        calc(1.755rem * var(--hero-font-scale, 0.78)),
        calc(5.46vw * var(--hero-font-scale, 0.78)),
        calc(2.6rem * var(--hero-font-scale, 0.78))
      );
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.02em;
      color: var(--text);
      text-shadow: none;
    }

    .hero-lead {
      margin: 0;
      font-size: calc(0.9375rem * 1.3 * var(--hero-font-scale, 0.78));
      line-height: 1.6;
      font-weight: 700;
      color: var(--text);
      text-shadow: none;
    }

    /* 特徴タイルのレイアウトは site.hero-request.css */

    @media (prefers-reduced-transparency: reduce) {
      .site-header,
      .site-header-announce {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .site-header {
        background: var(--header-bg);
      }

      .site-header-announce {
        background: var(--header-announce-bg);
      }
    }

    @media (max-width: 1200px) {
      .site-header-announce__bar {
        padding-block: 0.62rem;
        font-size: clamp(0.65625rem, 2.65vw, 0.75rem);
      }

      .site-header-announce-board {
        padding-inline: max(12px, var(--header-pad-x)) max(12px, var(--header-pad-x2));
      }

      .site-header-announce-board__line {
        font-size: clamp(0.75rem, 3.2vw, 0.875rem);
      }
    }

    /* セクション枠線：縦はヘッダー幅 + 左右 20px、横は各セクション境目 */
    body.page-index main,
    main > section:not(.hero),
    .subpage-main,
    .repair-hub-sector,
    .site-footer {
      position: relative;
    }

    body.page-index main > section:not(.troubles):not(.hero-features):not(.common-consult)::after,
    .site-footer::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: min(100%, var(--section-rail-span));
      border-top: 1px solid var(--line);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .site-footer::after {
      border-top-color: var(--footer-line);
    }

    @media (min-width: 1240px) {
      body.page-index main::before,
      main > section:not(.hero):not(.hero-features)::before,
      .subpage-main::before,
      .repair-hub-sector::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: var(--section-rail-span);
        box-sizing: border-box;
        border-left: 1px solid var(--line);
        border-right: 1px solid var(--line);
        transform: translateX(-50%);
        pointer-events: none;
      }
    }