:root{
  --sec-subtitle-size: clamp(14px, 1.2vw, 16px);
}

/* =========================================================
   レイアウト：コンテナ / ヘッダー / ナビ / フッター / パンくず
   ========================================================= */

/* ---------- コンテナ ---------- */
.site-main__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
/* ===== Container（中央寄せの箱） ===== */
.l-container{
  width: 100%;
  max-width: 1100px;     /* 好みで 960〜1200 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ===== コンテナ：全幅バリエーション ===== */
.l-container--full{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px){
  .l-container--full{
    padding-left: 0;
    padding-right: 0;
  }
}


/* 取扱業務：セクション内側を中央の箱にする */
.top-service__inner,
.service-section__inner{
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---------- ヘッダー基本 ---------- */
.site-header{
  width: 100%;
  /* Customizer: ヘッダー背景色（未設定時は白） */
  background: var(--anchor-color-header-bg, #fff);
}

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}


/* ロゴ周り */
.site-branding{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  width: fit-content;
  max-width: max-content;
}

.site-branding a{
  font-weight: 700;
  text-decoration: none;
  color: #000000;
  text-decoration: none;
  font-size: 18px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  line-height: 1;
}

/* ロゴ画像（サイト基本情報 > ロゴ）
   大きい画像が入っても見た目が崩れないように、テーマ側で最大サイズを固定 */
.site-branding .custom-logo-link{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  line-height: 1;
}

.site-branding .custom-logo{
  width: auto;
  height: auto;
  max-width: 300px;
  max-height: 96px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}


.site-description{
  margin: 2px 0 0;
  font-size: 11px;
  color: #777;
}

/* 右側まとめ（PC: メニュー・電話・問合せ・検索） */
.site-header__right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- ヘッダー電話 / お問い合わせ ---------- */
.header-tel,
.header-contact{
  font-size: 12px;
}

.header-tel__link,
.header-contact__link{
  height: 64px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 8px;
  box-sizing: border-box;
  text-decoration: none;
}

/* 電話 */
.header-tel__link{
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
  text-decoration: none;
}

.header-tel__link:hover,
.header-tel__link:focus-visible{
  color: #000000;
  text-decoration: none;
}

/* 問合せ */
.header-contact__link{
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #000000;
}
.header-contact__link:hover,
.header-contact__link:focus-visible{
  background-color: #ffffff;
  border-color: #000000;
  color: #000000;
  text-decoration: none;
}

/* アイコン枠を統一 */
.header-tel__icon,
.header-contact__icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.header-tel__icon-img,
.header-contact__icon-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* テキスト中央寄せ */
.header-tel__texts,
.header-contact__texts{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.header-tel__label{
  font-size: 10px;
  color: inherit;
  white-space: nowrap;
}
.header-tel__number{
  font-size: 15px;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}
.header-tel__time{
  font-size: 10px;
  color: inherit;
  white-space: nowrap;
}

.header-contact__label{
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.header-contact__sub{
  font-size: 10px;
  opacity: .9;
  white-space: nowrap;
}

/* ---------- ヘッダー検索 ---------- */
.header-search{
  margin-left: 8px;
}

.header-search .search-form{
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-search .search-field{
  width: 140px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.header-search .search-submit{
  padding: 6px 12px;
  background: #328824;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.header-search .search-submit:hover{ opacity: .85; }

/* ---------- グローバルナビ（PC基本） ---------- */
.global-nav{
  display: block;
}

.global-nav__list{
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ナビ下線（PCのみ：hover/focus/currentで表示） */
@media (min-width: 1025px){
  .global-nav__list > li > a{
    position: relative;
  }

  /* ホバー時にリンク全体の文字色まで変わらないようにする（下線だけ色を変える） */
  .global-nav__list > li > a:hover,
  .global-nav__list > li > a:focus-visible{
    color: #333;
  }

  .global-nav__list > li > a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background-color: var(--anchor-color-link-hover-underline);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }

  .global-nav__list > li > a:hover::after,
  .global-nav__list > li > a:focus-visible::after,
  .global-nav__list > li.current-menu-item > a::after,
  .global-nav__list > li.current-menu-ancestor > a::after,
  .global-nav__list > li.current-menu-parent > a::after{
    transform: scaleX(1);
  }
}

/* PC: グローバル表示 / ドロワー非表示 */
.global-nav__list > li{
  position: relative;
}

.global-nav__list > li > a{
  font-size: 14px;
  text-decoration: none;
  color: #333;
  padding: 4px 0;
  position: relative;
  white-space: nowrap;
}

/* 下線ア===========================
   Header utility menu (optional)
============================== */
.header-utility-nav{
  display: flex;
  align-items: center;
}
.header-utility-nav__list{
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.header-utility-nav__list a{
  text-decoration: none;
  font-size: 13px;
}

/* ==============================
   フッターナビ
============================== */
.footer-nav{
  margin: 12px 0 18px;
}
.footer-nav__list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.footer-nav__list a{
  text-decoration: none;
  font-size: 13px;
}

/* CTAメニュー */
.global-nav__list > li.menu-item--cta > a{
  padding: 6px 16px;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  margin-left: 8px;
}
.global-nav__list > li.menu-item--cta > a::after{ display:none; }
.global-nav__list > li.menu-item--cta > a:hover{
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* ---------- ドロップダウン（PC） ---------- */
/* サブメニューの位置が下線と被らないように、少し下げる（PC） */
.global-nav__list > li.menu-item-has-children{ position: relative; }
.global-nav__list > li.menu-item-has-children::after{
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 8px; /* ホバー維持用の“橋” */
}
.global-nav .sub-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  min-width: 200px;
  padding: 8px 0;
  margin: 0;
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  border-radius: 6px;
  display: none;
  z-index: 1000;
}

.global-nav .sub-menu li{ display:block; }
.global-nav .sub-menu a{
  display:block;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  color: #333;
}

.global-nav__list > li:hover > .sub-menu,
.global-nav__list > li:focus-within > .sub-menu{
  display:block;
}

/* ---------- ハンバーガー（SPのみ） ---------- */
.nav-toggle{
  display: none; /* PCは非表示 */
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  position: relative;
  z-index: 2000;
}

.nav-toggle__bar{
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: #333;
  display: block;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2){
  opacity: 0;
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* メニューオープン中はスクロール停止 */
html.is-menu-open,
body.is-menu-open{
  overflow: hidden;
  height: 100%;
}

/* サブメニュー切り替え：PCは非表示 */
.submenu-toggle{ display:none; }

/* ---------- フッター ---------- */
.site-footer{
  background: #f7f2eb;
  padding: var(--footer-pad-y, 40px) 0;
  font-size: 14px;
  color: var(--color-text-base);
  margin-top: 0;
}

.footer-inner{
  /* レイアウト幅は .l-container で制御 */
}

.footer-columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* フッター：地図または事務所情報だけの場合（空カラムの隙間を避ける）
   - PC/タブレット/SPで配置が安定するよう flex を使う。
   - 外側コンテナはフッター幅いっぱいにし、内側ブロックには最大幅を設ける。 */
.footer-columns.footer-columns--single{
  grid-template-columns: 1fr;
  /*
    1カラムモードは、本当の1カラムレイアウトとして扱う。
    row flex + justify-content を使い、ブラウザやブレイクポイント差分でも
    ブロック全体を左/中央/右へ安定して寄せる。
  */
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: flex-start;
  justify-content: center; /* 初期値 */
}

/* --- 配置のフォールバック（一部レイアウトが flex の寄せを上書きする場合に備える） ---
   テーマ/プラグイン側の上書きで justify-content が効かない場合でも、
   子要素が width:100% に固定されていない限り、margin で
   1つだけ表示されるブロックを意図した方向へ寄せる。 */
.footer-columns.footer-columns--single.footer-columns--align-left > .footer-info,
.footer-columns.footer-columns--single.footer-columns--align-left > .footer-map{
  margin-right: auto;
  margin-left: 0;
}
.footer-columns.footer-columns--single.footer-columns--align-center > .footer-info,
.footer-columns.footer-columns--single.footer-columns--align-center > .footer-map{
  margin-left: auto;
  margin-right: auto;
}
.footer-columns.footer-columns--single.footer-columns--align-right > .footer-info,
.footer-columns.footer-columns--single.footer-columns--align-right > .footer-map{
  margin-left: auto;
  margin-right: 0;
}

/* 1カラム時の配置（地図または事務所情報のみ） */
.footer-columns.footer-columns--single.footer-columns--align-left{
  justify-content: flex-start;
}
.footer-columns.footer-columns--single.footer-columns--align-center{
  justify-content: center;
}
.footer-columns.footer-columns--single.footer-columns--align-right{
  justify-content: flex-end;
}

/* 1つだけ表示されるブロックが広がりすぎないよう最大幅を設定。
   - 事務所情報：タブレットでも右/中央寄せが分かるよう読みやすい幅を維持。
   - 地図：少し広めを許可。 */
.footer-columns.footer-columns--single .footer-info{
  /* 重要：
     ここで width:100% を強制しない。
     ブロック幅が100%だと、margin による左/中央/右寄せが効かない
     （margin設定に関係なく中央/全面表示のように見える）。
     代わりに、小さい画面で縮められる最大幅付きの幅を使う。 */
  width: auto;
  max-width: 560px;
  flex: 0 1 auto;
}
.footer-columns.footer-columns--single.footer-columns--align-center .footer-info{
  /* タブレットでも中央寄せに見えるようにする（標準より少し狭め） */
  max-width: 520px;
}
.footer-columns.footer-columns--single.footer-columns--align-right .footer-info{
  /* 読みやすい幅を保つ。配置は justify-content で制御 */
  max-width: 560px;
}
.footer-columns.footer-columns--single .footer-map{
  /* 1カラム表示時に地図ブロックの寄せが実際に効くようにする */
  width: auto;
  max-width: 860px;
  flex: 0 1 860px;
}


/* 1カラム時のテキスト配置 */
.footer-columns.footer-columns--single.footer-columns--align-left .footer-info,
.footer-columns.footer-columns--single.footer-columns--align-left ~ .footer-copy{
  text-align: left;
}
.footer-columns.footer-columns--single.footer-columns--align-center .footer-info,
.footer-columns.footer-columns--single.footer-columns--align-center ~ .footer-copy{
  text-align: center;
}

/* フッター：1カラム + 中央寄せ
   - SNSアイコンは flex アイテムのため、明示的に中央寄せする。 */
.footer-columns.footer-columns--single.footer-columns--align-center .footer-info .c-social-links__list{
  justify-content: center;
}
.footer-columns.footer-columns--single.footer-columns--align-right .footer-info{
  /* ブロック自体は右寄せにしつつ、事務所情報は読みやすく保つ */
  text-align: left;
}
.footer-columns.footer-columns--single.footer-columns--align-right ~ .footer-copy{
  text-align: right;
}


/* ==============================
   フッター：事務所情報の余白とSNSリンク配置
============================== */
/* 1) 事務所情報ブロックの上部に余白を追加 */
.footer-info{
  padding-top: 10px;
}

/* 2) 追加リンク（任意）を事務所情報から少し離す */

.footer-extra-link a{
  display: inline-block;
}

/* SNS（フッター内）の余白調整
   - info_top: SNSの下に余白
   - info_bottom / extra_bottom: 上に余白 */
.footer-info > .c-social-links--footer{
  margin: 0 0 14px;
}
.footer-info .footer-extra-link + .c-social-links--footer,
.footer-info p + .c-social-links--footer{
  margin-top: 14px;
}
.footer-info .c-social-links--footer{
  margin-bottom: 0;
}

/* 3) コピーライト直前のSNSはセンタリング */
.footer-inner > .c-social-links--footer{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.footer-inner > .c-social-links--footer .c-social-links__list{
  justify-content: center;
}

.footer-info p{
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.7;
}

.footer-info .footer-access{
  display: block;
  margin: 8px 0 4px;
  white-space: normal;
}

.footer-map__inner iframe{
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 10px;
}

.footer-map__placeholder{
  width: 100%;
  height: 260px;
  border-radius: 10px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #777;
}

.footer-copy{
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: #888;
}

/* ---------- パンくず ---------- */
.breadcrumb{
  padding: 8px 0;
  background: #f7f4ff;
  font-size: 12px;
}

.breadcrumb__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--anchor-color-breadcrumb-text, var(--color-text-base));
}

.breadcrumb__item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb__item + .breadcrumb__item::before{
  content: ">";
  display: inline-block;
  margin: 0 4px;
  color: var(--anchor-color-breadcrumb-separator, #999999);
}

.breadcrumb__item a{
  text-decoration: none;
  color: inherit;
}
.breadcrumb__item a:hover{
  text-decoration: underline;
  /* 下線色は「カラー設定 > リンクホバー下線色」に合わせる */
  text-decoration-color: var(--color-link-hover-underline);
}
.breadcrumb__item--current{
  font-weight: 600;
  color: inherit;
}

/* =========================================================
   レスポンシブ
   ========================================================= */

/* SP: ヘッダーを2段（ロゴ+ボタン / メニュー） */
@media (max-width: 1205px){
  .site-header__inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "branding right"
      "nav      nav";
    gap: 10px 12px;
    align-items: center;
  }

  .site-branding{ grid-area: branding; }

  .site-header__right{
    grid-area: right;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }

  .nav-toggle{
    display: flex;
    margin-left: 8px;
  }

  /* SP: 電話・問合せは非表示（必要ならここを消せば表示） */
  .header-tel,
  .header-contact{
    display: none;
  }

  /* SP: メニューは折りたたみ */
  .global-nav{
    grid-area: nav;
    width: 100%;
    display: none;
    margin-top: 8px;
  }
  .global-nav.is-open{ display: block; }

  /* SP: ドロワー用メニュー（割り当てがある時のみ）を表示 */
  .global-nav.has-drawer .global-nav.has-drawer .global-nav__list--drawer{ display: flex; }


  .global-nav__list{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .global-nav__list > li{
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.1);
  }

  /* Drawer: 末尾の区切り線は、後続ブロック（検索/SNS）側に寄せて二重線を防ぐ */
  .global-nav__list > li:last-child{
    border-bottom: none;
  }

  .global-nav__list > li > a{
    flex: 1;
    display: block;
    width: 100%;
    padding: 14px 12px;
  }

  /* SP: CTAメニュー */
  .global-nav__list > li.menu-item--cta > a{
    margin: 12px 0 0;
    width: 100%;
    text-align: center;
    padding: 10px 18px;
  }

  /* SP: サブメニュー展開ボタン */
  .submenu-toggle{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }

  .global-nav__list > li.has-submenu{
    flex-wrap: wrap;
    align-items: stretch;
  }

  .global-nav__list > li.has-submenu > a{
    min-width: 0;
  }

  .global-nav__list .sub-menu{
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 8px 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  .global-nav__list .sub-menu li{
    display: block;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.08);
  }

  .global-nav__list .sub-menu a{
    display: block;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    white-space: normal;
  }

  .global-nav__list li.is-open > .sub-menu{
    display: block;
  }

  /* フッターSP */
  .footer-columns{
    grid-template-columns: 1fr;
  }
  .footer-columns.footer-columns--single{
    display: flex;
    flex-direction: row;
  }
  .site-footer{
    padding: 28px 16px 16px;
  }
  .footer-map__inner iframe,
  .footer-map__placeholder{
    height: 220px;
  }
}

@media (min-width: 769px) and (max-width: 1024px){

  /* =========================
     ヘッダー（タブレット）
     - タッチ操作しやすいようハンバーガーナビを維持
     ========================= */
  .site-header__inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "branding right"
      "nav      nav";
    gap: 12px 16px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 24px;
    align-items: center;
  }

  .site-branding{ grid-area: branding; }

  .site-header__right{
    grid-area: right;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }

  .nav-toggle{
    display: flex;
    margin-left: 8px;
  }

  /* タブレット：SPと同じ折りたたみメニュー挙動 */
  .global-nav{
    grid-area: nav;
    width: 100%;
    display: none;
    margin-top: 6px;
  }
  .global-nav.is-open{ display: block; }

  /* タブレットでメニューを見やすくする */
  .global-nav__list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
  }

  .global-nav__list > li{
    border-bottom: 1px solid rgba(0,0,0,.1);
  }

  /* Drawer: 末尾の区切り線は、後続ブロック（検索/SNS）側に寄せて二重線を防ぐ */
  

  .global-nav__list > li > a{
    display: block;
    padding: 14px 12px;
  }

  /* サブメニュー：タップで開く */
  .global-nav__list > li.has-submenu{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .global-nav__list > li.has-submenu > a{
    flex: 1 1 auto;
    min-width: 0;
  }

  .global-nav__list .sub-menu{
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 8px 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  .global-nav__list .sub-menu li{
    display: block;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.08);
  }

  .global-nav__list .sub-menu a{
    display: block;
    width: 100%;
    padding: 12px 24px;
    white-space: normal;
  }

  .global-nav__list li.is-open > .sub-menu{
    display: block;
  }

  /* タブレットのCTAメニュー：セル内で幅いっぱいにする */
  .global-nav__list > li.menu-item--cta > a{
    width: 100%;
    text-align: center;
  }

  /* =========================
     フッター（タブレット）
     ========================= */
  .site-footer{
    padding: 36px 24px 20px;
  }

  .footer-columns{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .footer-columns.footer-columns--single{
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: row;
  }

  .footer-map__inner iframe,
  .footer-map__placeholder{
    height: 260px;
  }
}


/* 取扱業務：見出しを中央寄せ */
.top-service__head,
.service-section__head,
.top-service__title,
.service-section__title{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* 取扱業務：SERVICE（小見出し）を中央へ */
.top-service__subtitle,
.top-service__eyebrow,
.service-section__subtitle,
.front-section__eyebrow{
  display: block;          /* ← これが重要 */
  width: 100%;             /* ← 親幅いっぱいにする */
  text-align: center;      /* ← ここで中央 */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1025px){

  .site-header__inner{
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 20px;
  }

  /* ★重要：右側の箱を消して、中身を同じFlex列に参加させる */
  .site-header__right{
    display: contents;
  }

  /* 並び順を確定 */
  .site-branding{ order: 1; flex: 0 0 auto; }

  .global-nav{
    order: 2;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;   /* メニューを中央へ */
  }

  .header-tel{ order: 3; flex: 0 0 auto; }
  .header-contact{ order: 4; flex: 0 0 auto; }
  .header-search{ order: 5; flex: 0 0 auto; } /* あるなら */
}

/* ==============================
  安心のポイント：本文のセンタリング
============================== */
.top-features__text{
  text-align: center;
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
}

/* ==============================
  プロフィール：センタリング
============================== */
/*
  プロフィール：1カラム（SP）時のみセンタリング
  768px以上は2カラムレイアウトになるため、センタリングすると不自然になる
*/
@media (max-width: 767px){
  .top-profile__kicker,
  .top-profile__title{
    text-align: center;
  }
}
@media (max-width: 767px){
  .top-profile__text{
    text-align: center;
  }

  .top-profile__text ul{
    display: inline-block;
    text-align: left;   /* 行頭は左で揃える */
    margin: 0;
    padding-left: 1.2em;
  }
}

/* 代表挨拶：タブレットで上のProfileと“頭”を揃える */
@media (max-width: 1024px){
  .top-about__inner.l-container{
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}

.front-reasons__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}



/* ===============================
   ヘッダー右側：折り返し防止（SNS/電話/CTA）
   =============================== */
.site-header__right{
  flex-wrap: nowrap;
}



/* ===============================
   ヘッダーSNS位置：右側を維持
   =============================== */
.site-header__inner{
  justify-content: space-between;
}

.site-header__right{
  margin-left: auto;
  justify-content: flex-end;
}

.site-header__right .c-social-links--header{
  margin-left: auto;
  justify-self: end;
}

/* 右側ブロックが grid アイテムの場合（タブレット/SP）、末尾に寄るようにする */
@media (min-width: 769px){
  .site-header__right{ justify-self: end; }
}



/* ===============================
   ヘッダー：SNSのはみ出し防止のため左側を詰める
   =============================== */
@media (min-width: 769px){
  /* ヘッダー内の横幅を確保するためサイト説明文を非表示 */
  .site-header .site-description{
    display: none !important;
  }

  /* ブランドエリアが横幅を取りすぎないようにする */
  .site-branding{
    width: fit-content;
    max-width: 300px;
    min-width: 0;
  }

  .site-branding__link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  /* サイトタイトル表示時に右側グループを押し出さないようにする */
  .site-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* メニュー間隔を少し詰める */
  .global-nav__list{
    gap: 16px;
  }
}



/* ===============================
   ヘッダー検索：レスポンシブ時はハンバーガードロワー内へ移動
   =============================== */
@media (max-width: 1205px){
  .header-search--desktop{
    display: none !important;
  }
  .global-nav .header-search--drawer{
    display: block !important;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,.1);
  }
  .global-nav .header-search--drawer .search-form{
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .global-nav .header-search--drawer .search-field{
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}
@media (min-width: 1206px){
  .header-search--drawer{
    display: none !important;
  }
}



/* ===============================
   404ページレイアウト：左右余白と読みやすい幅を追加
   =============================== */
.error-404{
  width: 100%;
}

.error-404__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

@media (max-width: 1024px){
  .error-404__inner{
    padding: 24px 16px 56px;
  }
}

.error-404__content{
  min-width: 0;
}

/* 検索フォームの折り返し */
.error-404__search{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.error-404__search-input{
  flex: 1 1 220px;
  min-width: 180px;
}



/* ===============================
   404検索欄：幅を短めに調整
   =============================== */
.error-404__search-input{
  flex: 0 1 320px;   /* 最大でも約320px程度 */
  max-width: 320px;
  min-width: 180px;
}

@media (max-width: 480px){
  .error-404__search-input{
    flex: 1 1 100%;
    max-width: 100%;
  }
}



/* ===============================
   検索結果：下余白を追加
   =============================== */
.search .site-main__inner,
.search .site-content,
.search .content-area{
  width: 100%;
}

.search .site-main__inner{
  padding-bottom: 64px;
}

@media (max-width: 1024px){
  .search .site-main__inner{
    padding-bottom: 56px;
  }
}



/* 取扱業務：小見出し（サブタイトル）背景 */
.top-service__subtitle{
  display: block;
  margin: 0 auto 12px;
  background-color: var(--anchor-color-service-kicker-bg, var(--color-accent-soft));
}


/* Profile：小見出し（kicker）背景 */
.top-profile__kicker{
  display: block;
  margin: 0 0 10px;
  background-color: var(--anchor-color-profile-kicker-bg, var(--color-accent-soft));
}
@media (max-width: 767px){
  .top-profile__kicker{
    margin-left: auto;
    margin-right: auto;
  }
}

.c-secSubtitle,
.front-about__subtitle,
.front-service__subtitle,
.front-reasons__subtitle,
.front-voice__subtitle,
.front-cta__subtitle {
  font-size: var(--sec-subtitle-size);
  line-height: 1.6;
}

.front-about__role,
.front-about__shoulder {
}


/* --- fix: Drawerメニューの区切り線が一部消える（border-bottom: none の影響） --- */
@media (max-width: 1205px){
  .global-nav__list > li:last-child{
    border-bottom: 1px solid rgba(0,0,0,.1);
  }
  
}


/* drawer限定: 末尾2項目の区切り線を調整 */
@media (max-width: 1024px){
  
}


/* --- fix: グローバル下線をhover可能端末のみに限定 --- */
@media (hover: hover) and (pointer: fine){
  .global-nav__list--global > li > a{
    position: relative;
  }
  .global-nav__list--global > li > a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--color-link-hover-underline);
    transition: width .15s ease;
  }
  .global-nav__list--global > li > a:hover::after{
    width: 100%;
  }
}

/* タッチ端末では下線アニメを無効化 */
@media (hover: none){
  .global-nav__list--global > li > a::after{
    display: none !important;
  }
}


/* --- fix: current系下線をグローバル(PC)のみに限定 --- */
@media (hover: hover) and (pointer: fine){
  .global-nav__list--global .current-menu-item > a::after,
  .global-nav__list--global .current-menu-ancestor > a::after,
  .global-nav__list--global .current-menu-parent > a::after{
    width: 100%;
  }
}

/* ドロワーではcurrent系下線を無効化 */
@media (max-width: 1024px){
  .global-nav__list--drawer .current-menu-item > a::after,
  .global-nav__list--drawer .current-menu-ancestor > a::after,
  .global-nav__list--drawer .current-menu-parent > a::after{
    display: none !important;
    width: 0 !important;
  }
}


/* フッター：追加リンクを事務所情報と統一 */
.footer-info .footer-extra-link{
  margin: 0 0 4px;
}
.footer-info .footer-extra-link a{
  text-decoration: underline;
}

/* 追加リンクの下線色（ホバー時）はカスタマイザー「リンクホバー下線色」に追従 */
.footer-info .footer-extra-link a:hover,
.footer-info .footer-extra-link a:focus-visible{
  text-decoration-color: var(--color-link-hover-underline);
}


/* --- fix: PC表示でグローバル/ドロワー両方出る問題を防止 --- */
/* デフォルト(PC): グローバル表示 / ドロワー非表示 */
.global-nav__list--global{ display: flex; }
.global-nav__list--drawer{ display: none; }

/* タブレット/SP：has-drawer 時はドロワーのみ表示 */
@media (max-width: 1205px){
  .global-nav.has-drawer .global-nav__list--global{ display: none; }
  .global-nav.has-drawer .global-nav__list--drawer{ display: flex; }
}

@media (max-width: 1205px){
  .global-nav__list > li.has-submenu > a{
    cursor: pointer;
  }
}


/* --- fix: PCでサブメニューが display:none のままになる問題 ---
   どこかの display:none が勝っていても、PCでは hover/focus-within で確実に表示させる */
@media (min-width: 1206px){
  /* PCでは + ボタン不要 */
  .submenu-toggle{ display:none !important; }

  .global-nav__list--global .menu-item-has-children{ position: relative; }
  .global-nav__list--global .menu-item-has-children::after{
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 8px; /* ホバー維持用の“橋” */
  }
  .global-nav__list--global .sub-menu{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 9999;
  }
  .global-nav__list--global .menu-item-has-children:hover > .sub-menu,
  .global-nav__list--global .menu-item-has-children:focus-within > .sub-menu{
    display: block !important;
  }
}


/* --- fix: フッターSNS「事務所情報の上」選択時の余白調整 --- */
/* info_top のとき、SNSと事務所情報テキストの間に余白を作る */
.footer-info > .c-social-links--footer{
  margin-bottom: 16px;
}

/* テキストとの距離を明確化 */
.footer-info p:first-of-type{
  margin-top: 0;
}


/* --- fix: フッターMAPの左右配置でサイズが変わる問題 ---
   2カラム表示ではGridアイテムを stretch させ、auto margin で縮まないようにする */
.footer-columns:not(.footer-columns--single) > .footer-map,
.footer-columns:not(.footer-columns--single) > .footer-info{
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ===============================
   ヘッダーメニュー：グローバルメニュー2行表示モード（PC）
   - ヘッダー自体は従来の1段構成を維持
   - JSで上段/下段の間に改行用liを差し込み、グローバルメニューだけを2行化
   - Grid均等割りは使わず、各項目の自然幅 + gap で横位置のズレを防ぐ
   - 各メニュー名は途中で折り返さない
   - タブレット・スマホは既存のハンバーガー表示を優先
   =============================== */
.global-nav__line-break{
  display: none;
}

@media (min-width: 1206px){
  /* 初回表示時の一瞬だけ1行/不正な折り返しで見えるチラつきを防ぐ。
     JSが改行位置とgapを計算し終えたら is-two-row-menu-ready を付与して表示する。 */
  .site-header.header-menu-layout-two-row:not(.is-two-row-menu-ready) .global-nav__list--global{
    visibility: hidden;
  }

  .site-header.header-menu-layout-two-row .global-nav{
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global{
    /* 横gapはJSで「2行に収まる値」へ上書きする。初期値は保険。 */
    --anchor-global-menu-two-row-gap-x: 72px;
    --anchor-global-menu-two-row-gap-y: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: var(--anchor-global-menu-two-row-gap-x);
    row-gap: var(--anchor-global-menu-two-row-gap-y);
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global > li{
    flex: 0 0 auto;
    min-width: max-content;
  }


  /* カスタマイザーの編集ショートカットはメニュー項目として幅計算・折り返しに参加させない */
  .site-header.header-menu-layout-two-row .global-nav__list--global > .customize-partial-edit-shortcut{
    position: absolute !important;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global > li.global-nav__line-break{
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global > li > a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 0;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
  }

  .site-header.header-menu-layout-two-row .global-nav__list > li.menu-item--cta > a{
    margin-left: 0;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global .sub-menu{
    text-align: left;
  }
}



/* --- ヘッダー：カスタマイザー用レイアウト変数 --- */
.site-header__inner{
  padding-top: var(--anchor-header-padding-y, 12px);
  padding-bottom: var(--anchor-header-padding-y, 12px);
}

@media (max-width: 767px){
  .site-header__inner{
    padding-top: var(--anchor-header-padding-y-sp, 10px);
    padding-bottom: var(--anchor-header-padding-y-sp, 10px);
  }
}




/* --- ヘッダー固定（整理版） ---
   ・ヘッダー固定ON時は全デバイスでヘッダー全体を固定
   ・管理バー高さ +（PCのみ）ユーザー指定オフセットはJSで計算して --anchor-fixed-top に反映
   ・本文の潜り込みは --anchor-header-fixed-height と組み合わせて補正
*/
.site-header.is-fixed{
  position: fixed;
  top: var(--anchor-fixed-top, 0px);
  left: 0;
  right: 0;
  z-index: 1000;
}

body.has-fixed-header{
  padding-top: calc(var(--anchor-fixed-top, 0px) + var(--anchor-header-fixed-height, 0px));
}
@media (max-width: 768px){
  .site-header .site-description{
    display: none !important;
  }
}

/* ===============================
   ヘッダーメニュー2行表示：左右グループ間隔の均等化
   - グローバルメニューを中で伸ばして中央寄せすると、ロゴ側/CTA側の余白が不均等に見える。
   - 2行表示モードでは nav を内容幅ベースに戻し、ロゴ→メニュー、メニュー→CTA の外側余白を同じ値で管理する。
   =============================== */
@media (min-width: 1206px){
  .site-header.header-menu-layout-two-row .site-header__inner{
    --anchor-header-two-row-side-gap: clamp(56px, 6.4vw, 92px);
    justify-content: center;
    column-gap: 12px;
  }

  .site-header.header-menu-layout-two-row .site-branding{
    margin-right: var(--anchor-header-two-row-side-gap);
  }

  .site-header.header-menu-layout-two-row .global-nav{
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    margin-right: var(--anchor-header-two-row-side-gap);
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global{
    width: auto;
    max-width: none;
  }

  /* CTAが複数ある場合は、CTA同士の間隔だけ通常の小さめgapに戻す */
  .site-header.header-menu-layout-two-row .header-tel + .header-contact,
  .site-header.header-menu-layout-two-row .header-tel + .header-search,
  .site-header.header-menu-layout-two-row .header-contact + .header-search{
    margin-left: 0;
  }
}

@media (min-width: 1206px) and (max-width: 1320px){
  .site-header.header-menu-layout-two-row .site-header__inner{
    --anchor-header-two-row-side-gap: clamp(34px, 4.2vw, 64px);
  }
}

/* ===============================
   ヘッダーメニュー2行表示：ロゴ〜CTA間へ均等配置（2.8.69）
   - グローバルメニューの箱を、ロゴとCTAの間の残り幅いっぱいに広げる。
   - 各行のメニュー項目は space-between で左右いっぱいに散らし、横方向をゆったり見せる。
   - ロゴ→メニュー、メニュー→CTA の外側余白は flex gap で同じ値にする。
   - 縦ギャップは前バージョンのまま維持。
   =============================== */
@media (min-width: 1206px){
  .site-header.header-menu-layout-two-row .site-header__inner{
    --anchor-header-two-row-outer-gap: clamp(42px, 5.4vw, 78px);
    justify-content: flex-start;
    column-gap: var(--anchor-header-two-row-outer-gap);
  }

  .site-header.header-menu-layout-two-row .site-branding{
    margin-right: 0;
  }

  .site-header.header-menu-layout-two-row .global-nav{
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-right: 0;
    justify-content: stretch;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global{
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    /* space-between のため、JSが入れるgapは最小余白として使う。縦gapは変更しない。 */
    --anchor-global-menu-two-row-gap-x: clamp(72px, 8vw, 132px);
    --anchor-global-menu-two-row-gap-y: 5px;
  }
}

@media (min-width: 1206px) and (max-width: 1320px){
  .site-header.header-menu-layout-two-row .site-header__inner{
    --anchor-header-two-row-outer-gap: clamp(28px, 3.6vw, 48px);
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global{
    --anchor-global-menu-two-row-gap-x: clamp(48px, 5vw, 82px);
  }
}

/* ===============================
   ヘッダーメニュー：2段ヘッダー表示（2.8.70）
   - 上段：ロゴ / 電話・お問い合わせなどCTA
   - 下段：グローバルメニューを横一列で均等配置
   - 旧「グローバルメニューを2行折り返す」挙動は使わない
   =============================== */
@media (min-width: 1206px){
  .site-header.header-menu-layout-two-row .site-header__inner{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .site-header.header-menu-layout-two-row .site-branding{
    order: 1;
    flex: 0 0 auto;
    margin-right: 0;
  }

  .site-header.header-menu-layout-two-row .header-tel{
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .site-header.header-menu-layout-two-row .header-contact{
    order: 3;
    flex: 0 0 auto;
  }

  .site-header.header-menu-layout-two-row .header-search,
  .site-header.header-menu-layout-two-row .header-utility-nav{
    order: 4;
    flex: 0 0 auto;
  }

  .site-header.header-menu-layout-two-row .nav-toggle,
  .site-header.header-menu-layout-two-row .header-mobile-cta,
  .site-header.header-menu-layout-two-row .header-cta--mobile{
    order: 5;
  }

  .site-header.header-menu-layout-two-row .global-nav{
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(40px, 5vw, 72px);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global > li{
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global > li > a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 3px 0;
    line-height: 1.35;
    white-space: nowrap;
    word-break: keep-all;
    text-align: center;
  }

  .site-header.header-menu-layout-two-row .global-nav__line-break{
    display: none !important;
  }

  .site-header.header-menu-layout-two-row:not(.is-two-row-menu-ready) .global-nav__list--global{
    visibility: visible;
  }

  /* 2.8.71: 2段表示時の1行目/2行目背景色分離 */
  .site-header.header-menu-layout-two-row{
    background: var(--anchor-color-header-bg, #f3f3f3);
  }

  .site-header.header-menu-layout-two-row .global-nav{
    position: relative;
    z-index: 0;
  }

  .site-header.header-menu-layout-two-row .global-nav::before{
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--anchor-color-header-second-row-bg, var(--anchor-color-header-bg, #f3f3f3));
    pointer-events: none;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global{
    position: relative;
    z-index: 1;
  }

}

@media (min-width: 1206px) and (max-width: 1320px){
  .site-header.header-menu-layout-two-row .global-nav__list--global{
    gap: clamp(24px, 3.4vw, 48px);
  }
}


/* ===============================
   ヘッダー2段表示：2行目メニューの縦位置補正（2.8.72）
   - 2行目背景色設定時に文字が下寄りに見えないよう、上下余白を均等化。
   - リンクの行高・最小高さも揃えて、背景バー内で中央に見えるようにする。
   =============================== */
@media (min-width: 1206px){
  .site-header.header-menu-layout-two-row .global-nav__list--global{
    padding-top: 5px;
    padding-bottom: 5px;
    align-items: center;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global > li{
    display: flex;
    align-items: center;
  }

  .site-header.header-menu-layout-two-row .global-nav__list--global > li > a{
    min-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.4;
    align-items: center;
  }
}