.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding-block:60px}
.section--gray{background:var(--c-gray)}
.section--dark{background:var(--c-bg-dark);color:var(--c-text-inv)}


/* Header */
.site-header{background:var(--c-bg-dark);color:#fff;position: static;z-index: 3000;}
body.menu-open {
  overflow: hidden;
  padding-right: 17px; /* ← スクロールバーぶん補正 */
}

/* メニュー表示中のみ固定化（最前面） */
body.menu-open .site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3000;
}
/* スペーサー（JSで高さを入れる） */
.header-spacer{
  width: 100%;
  height: 0;           /* JSで動的に上書き */
}

.site-header .bar{display:flex;align-items:center;justify-content:end;height:80px}
.brand{font-weight:700}
.official-link{display:flex;align-items:center;gap:20px;}
.official-link img{height:30px}
.official-link a{border:2px solid #fff;border-radius:999px;padding:5px 20px;transition: .2s;}
.official-link a:hover{background-color: #fff;color: #111;}
.sns-links{display:flex;gap:25px;align-items:center;margin-left:35px;}
.sns-links img{height:30px;width:auto;transition:opacity .2s}
.sns-links img:hover{opacity:0.7}

.fixed-ui{position:fixed;top:19px;left:60px;z-index:4000;display:flex;flex-direction:row;align-items:center;gap:20px;}
.menu-btn{position: relative;z-index: 4100;width: 100px;height:45px;background:rgba(255 255 255/.9);color:#111;border:2px solid #333;border-radius:999px;padding:8px 6px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.15);transition:background .2s ease,color .2s ease;}
.menu-btn:hover{opacity: .8;}
.logo-fixed img{height:38px;display:block;opacity: 0.9;}

/* ===== Global Menu Overlay ===== */
/* 全画面黒暗転（ヘッダーより下）＋中身スクロール可 */
.gm{
  position: fixed;
  inset: 0;
  background:#000;
  color:#fff;
  z-index: 2000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease;

  display: grid;
  justify-items: center;
  align-items: flex-start;
  padding-top: 96px;

  /* ここを書き換え */
  /* overflow: hidden; は削除 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* スマホ慣性スクロール */
}


.gm.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gm__inner{
  box-sizing: border-box;
  width: clamp(320px, 92vw, 880px);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
  padding-block: clamp(24px, 4vh, 48px);

  /* ↓ これらは PC 優先にしたいので、あとで SP で打ち消す */
  max-height: calc(100vh - 96px - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  scrollbar-width: none;
}
.gm__inner::-webkit-scrollbar{
  display: none;
}

.gm__inner::-webkit-scrollbar{
  display: none;                    /* Chrome / Safari / Edge */
}




/* リンク（下線ホバー） */
.gm__list{
  list-style:none;
  margin:0 auto;
  padding:0;
}

/* デフォルトは縦並び（スマホなど） */
.gm__list > li{
  margin:20px 0;
}

.gm__link,
.gm__label{
  position: relative;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.7; color:#fff; text-decoration:none;
}

/* ★ 日本語＋英語 2行レイアウト */
.gm__link{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.gm__label-ja{
  font-size: 0.75em;           /* 元のサイズそのまま */
}

.gm__label-en{
  font-size: 0.55em;        /* 下の英語は少し小さく */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* 下線アニメーション（日本語＋英語まとめて下） */
.gm__link::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:0%; height:2px; background:#fff; transition: width .25s ease;
}
.gm__link:hover::after{ width:100%; }

/* 使えないリンク（index の HOME） */
.gm__link.is-disabled {
  cursor: default;
  pointer-events: none;
  opacity: .4;  /* 押せない感じを出す */
}

/* 現在地リンク */
.gm__link.is-current {
  font-weight: 700;
  padding-left: 1.5em;
}

/* 左に丸マーカー */
.gm__link.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .5em;
  height: .5em;
  border-radius: 999px;
  background: #ffd95e; /* 黄色の現在地マーカー */
  transform: translateY(-50%);
}

/* 右側にバッジ（※中身テキスト不要なら空のままでOK） */
.gm__link.is-current::after {
  content: "";
  font-size: .7rem;
  letter-spacing: .06em;
  padding: .1em .5em;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  color: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


.gm__sub{ list-style:none; padding:12px 20px 0; margin:0; }
.gm__sub li{ margin:10px 0; }
.gm__sub .gm__link{ font-size: clamp(15px, 1.8vw, 18px); color:#ccc; }
.gm__sub .gm__link::after{ background:#ccc; }
.gm__sub .gm__link:hover{ color:#fff; }
.gm__sub .gm__link:hover::after{ background:#fff; width:100%; }

.gm__list li .sns-links { display: none; }









/* 背景固定 */
body.menu-open{ overflow: hidden; }

/* Footer */
.site-footer{background:var(--c-bg-dark);color:#fff}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:40px;max-width: 450px;}
.footer-copy{opacity:.8;text-align:center;}

/* ★ 横幅のある画面では「段組」で2カラムにする（空白が出にくいレイアウト） */
@media (min-width: 960px){
  .gm__list{
    /* 段組レイアウト：左列→右列の順に自動で詰めてくれる */
    column-count: 2;
    column-gap: 40px;
  }

  .gm__list > li{
    /* 段の途中で分割されないようにする（親＋サブメニューを一塊に） */
    break-inside: avoid;
    margin: 0 0 24px;
    width: auto; /* 以前の calc(50% - 20px) を解除 */
  }
}

/* スマホは上寄せ */
@media (max-width: 767px){
  .fixed-ui{top:18px;left:20px;}

  .gm{
    align-items: flex-start;
    padding-top: 96px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));

    /* ★ SP では .gm がスクロール担当 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gm__inner{
    width: min(100%, 880px);
    padding: 0 8px;
    justify-content: flex-start;
    gap: 24px;

    /* ★ SP では高さ制限と内部スクロールを解除 */
    max-height: none;
    overflow-y: visible;
  }

  .gm__list li .sns-links {
    display: flex;
    margin: 50px 0 0;
  }

  header .sns-links{display:none;}

  .footer-top{display:block;margin-bottom: 40px;}
  .footer-top .official-link{justify-content:center;margin-bottom: 28px;}
  .footer-top .sns-links{justify-content:center;margin:0;}

  .gm__label-ja{
  font-size: 0.75em;           /* 元のサイズそのまま */
}

}



/* 追記・上書き用（既存CSSの末尾に追加） */

/* メニュー：ボタン内左にハンバーガーアイコン追加（それ以外の仕様は変更しない） */
.menu-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.menu-btn__icon{
  width: 18px;
  height: 2px;
  background: #111;
  border-radius: 999px;
  position: relative;
  display: inline-block;
}

.menu-btn__icon::before,
.menu-btn__icon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #111;
  border-radius: 999px;
}

.menu-btn__icon::before{ top: -6px; }
.menu-btn__icon::after{ top:  6px; }

/* TZロゴ右のテキスト「公式サイト」を ↗ に変更（白ボーダー内に収める） */
/* 既存の .official-link a の見た目は維持し、文字だけが↗になる前提 */
.official-link a{
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ================================
   menu-btn 改行対策 + アイコン整形（追記）
   - 既存セレクタ維持
   - 位置調整以外は触らない
================================ */

/* 改行させない（最重要） */
.menu-btn{
  white-space: nowrap;          /* テキスト改行禁止 */
  justify-content: center;      /* 中身を中央寄せ */
  padding-inline: 12px;         /* 横paddingを少し確保 */
  gap: 10px;                    /* アイコンと文字の間隔 */
}

/* A案：ボタン幅を伸ばして1行固定（推奨） */
.menu-btn{
  width: 118px;                 /* 100px → 118px（必要最低限） */
}

/* B案：幅を変えずに文字を小さくしたい場合（上の width を使わないならこちら） */
/*
.menu-btn{
  font-size: 14px;              // 15px → 14px（1段下げるだけ）
}
*/

/* 文字側：崩れにくく */
.menu-btn__text{
  line-height: 1;               /* 変な行高でズレない */
}

/* アイコン：丁寧に配置（3本線の中央揃え・間隔一定） */
.menu-btn__icon{
  width: 18px;
  height: 2px;
  border-radius: 999px;
  position: relative;
  display: inline-block;

  top: -0.5px;                  /* 視覚的な中央合わせ（微調整） */
  flex: 0 0 auto;               /* つぶれ防止 */
}

.menu-btn__icon::before,
.menu-btn__icon::after{
  width: 18px;
  height: 2px;
  border-radius: 999px;
  left: 0;
}

/* 線間隔を少し丁寧に（好みで 5〜6px 調整可） */
.menu-btn__icon::before{ top: -5px; }
.menu-btn__icon::after{  top:  5px; }


/* ================================
   公式サイトボタン：白ボーダー内に TZロゴ＋↗（追記/上書き）
   - 既存セレクタ維持（.official-link / .official-link a）
   - 位置調整などはしない（ボタン内部のみ整える）
================================ */

/* 以前の .official-link 直下img（ボタン外ロゴ）は使わないので無効化 */
.official-link > img{ display:none; }

/* ボタン内レイアウトを整える */
.official-link a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* 既存の枠（border等）は維持しつつ、見た目だけ微調整 */
  padding: 6px 14px;
  min-width: 44px;         /* タップ領域 */
  height: 40px;            /* 収まりを安定化 */
  line-height: 1;
}

/* TZロゴ：ボタン内に収まるサイズへ */
.official-link a img{
  height: 20px;
  width: auto;
  display: block;
}

/* ↗：視認性と整列を調整 */
.official-link__arrow{
  font-size: 18px;
  font-weight: 700;
  display: inline-block;
  transform: translateY(-1px); /* 視覚的な中央合わせ */
}


/* ロゴ直置きは使わない（ボタン内に統一） */
.official-link > img{ display:none; }

/* ボタン内レイアウト */
.official-link a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height:40px;
  padding:6px 14px;
  min-width:44px;
  line-height:1;
}

/* 通常：TZロゴ表示 */
.official-link__logo img{
  height:20px;
  width:auto;
  display:block;
}

/* 通常：テキストは隠す（ロゴ位置に出すため） */
.official-link__label{
  display:none;
  font-size:12px;
  line-height:1.05;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
  min-width:28px; /* 公式/サイトでガタつかないための保険 */
}

/* ↗ */
.official-link__arrow{
  font-size:18px;
  font-weight:700;
  display:inline-block;
  transform:translateY(-1px);
}

/* hover/focus：ロゴを隠して「公式↵サイト」を表示 */
.official-link a:hover .official-link__logo,
.official-link a:focus-visible .official-link__logo{
  display:none;
}
.official-link a:hover .official-link__label,
.official-link a:focus-visible .official-link__label{
  display:inline-block;
}

/* ハンバーガー位置を固定（テキストが変わっても動かない） */
.menu-btn{
  position: relative;
  display: inline-flex;
  align-items: center;

  /* アイコン用の固定スペースを先に確保 */
  padding-left: 39px;          /* ←ここでアイコンの“居場所”を確保 */
  justify-content: flex-start; /* 左基準 */
  white-space: nowrap;
}

/* アイコンをボタン内の固定座標へ */
.menu-btn__icon{
  position: absolute;
  left: 14px;                  /* ←常にこの位置 */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* テキストはアイコンの確保分以降に並ぶだけ */
.menu-btn__text{
  line-height: 1;
}