/* ====== ヘッダー（series/right 用 完全版）====== */
/* ① ガター（左右余白）とロゴの微オフセット量を可変に */
:root{
  --header-gutter: clamp(8px, 3vw, 32px);  /* 通常時の左右余白 */
  --logo-edge-inset: 0px;                  /* ロゴを更に左へ寄せる量（初期0） */
}

/* 大型モニタで更に左へ寄せたい場合の調整 */
@media (min-width: 1440px){
  :root{
    --header-gutter: clamp(0px, 2vw, 24px); /* ガターをさらに絞る */
    --logo-edge-inset: 12px;                /* ロゴを12px左へ */
  }
}
@media (min-width: 1920px){
  :root{
    --header-gutter: 0px;   /* 4K等では左右余白ゼロも可 */
    --logo-edge-inset: 24px;/* ロゴを24px左へ（必要に応じて調整） */
  }
}

@media (min-width: 960px) {
  /* ② 上段：ロゴ/CTA、下段：ナビ の2段グリッド＋可変ガター */
  .l-header.-series.-series-right .l-header__inner.l-container {
    display: grid;
    grid-template-columns: 1fr auto;   /* 左=ロゴ 可変 / 右=CTA 内容幅 */
    grid-template-areas:
      "logo ctas"
      "nav  nav";
    align-items: center;
    gap: 8px 24px;
    /* ガター分も考慮して中央寄せを維持 */
    max-width: calc(1200px + var(--header-gutter) * 2);
    margin: 0 auto;
    padding-left: var(--header-gutter);
    padding-right: var(--header-gutter);
    overflow: visible;                 /* ロゴの“はみ出し”を許容 */
  }

  /* ③ ロゴは左寄せ＋大画面では更に左へ微オフセット */
  .l-header.-series.-series-right .l-header__logo {
    grid-area: logo;
    justify-self: start;
    transform: translateX(calc(-1 * var(--logo-edge-inset)));
  }

  /* ④ CTAは右寄せのまま */
  .l-header.-series.-series-right .w-header.pc_ {
    grid-area: ctas;
    justify-self: end;
  }

  /* ⑤ ナビは2行目フル幅 */
  .l-header.-series.-series-right #gnav.l-header__gnav {
    grid-area: nav;
    width: 100%;
    display: block;
    float: none !important;
    position: static !important;
    margin: 0;
    clear: both;
  }

  /* ⑥ ロゴテキストの縦積み防止 */
  .l-header__logo > .c-headLogo.-txt,
  .l-header__logo .c-headLogo__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
  }
}


/* ===== 下段ナビ：横一列・等幅ボタン風 ===== */
.l-header__gnav .c-gnav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.l-header__gnav .c-gnav > li {
  flex: 1 1 0;              /* 全部同じ幅にする */
  text-align: center;
  border-left: 1px solid #fff;  /* 区切り線（好みに合わせて） */
}

.l-header__gnav .c-gnav > li:first-child {
  border-left: none;        /* 先頭の線を消す */
}

.l-header__gnav .c-gnav a {
  display: flex;
  flex-direction: column;   /* アイコン上 / テキスト下 */
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  height: 100%;
  background: #2c665a;      /* ボタンの背景色（スクショの紫に合わせる） */
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: background 0.3s;
}

.l-header__gnav .c-gnav a:hover {
  background: #4ea896;      /* ホバー時の色（濃い紫） */
}

.l-header__gnav .c-gnav a .icon {
  font-size: 28px;          /* アイコンを大きめに */
  margin-bottom: 6px;
}


@media (min-width: 960px) {
  /* CTAブロックを横並びにして余白を調整 */
  .l-header .w-header .swell-block-columns__inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;  /* ← デフォルトは右寄せ */
    gap: 20px;                   /* ← ボタン・電話の間隔 */
    transform: translateX(-100px); /* ← 左に10pxずらす */

  }

  .l-header .w-header .swell-block-column {
    margin: 0 !important;
    flex: 0 0 auto;
  }

  /* CTAボタン */
  .l-header .w-header .swell-block-button.-size-s a {
    padding: .45em .9em;   /* ボタン内側余白 */
    line-height: 1.2;
    white-space: nowrap;
  }

  /* 電話番号 */
.l-header .w-header p {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.95em;
  line-height: 1.2;   /* ← 行間を詰める */
}

/* 営業時間（小さい文字部分）を電話番号に近づける */
.l-header .w-header p .u-fz-xs {
  display: inline-block;
  margin-top: 2px;    /* ← 電話番号との距離を微調整 */
}


  /* ===== 追加: 位置切り替え用クラス ===== */
  .l-header .w-header .swell-block-columns__inner.is-left {
    justify-content: flex-start !important;  /* 左寄せ */
  }
  .l-header .w-header .swell-block-columns__inner.is-center {
    justify-content: center !important;      /* 中央寄せ */
  }
  .l-header .w-header .swell-block-columns__inner.is-offset {
    justify-content: flex-end;
    margin-right: 40px; /* ← 数値で自由に調整 */
  }
}
  /* ===== ヘッダー固定===== */
.l-header {
  position: sticky;
  top: 0;
  z-index: 1000;   /* 他の要素より前に出す */
}

.l-header__bar,
.l-header__barInner {
  display: none !important;
}