/* =========================================
   必要◎ トークン & 変数（1箇所に集約）
   ========================================= */
:root{
  /* Brand tokens */
  --brand:#a5a5a5;
  --accent:#000000;
  --ink:#1E1E1E;
  --muted:#6B6460;

  /* Mobile menu (hamburger) */
  --mb-bg:#f08c3b;     /* 非アクティブ時 背景 */
  --mb-scale:0.96;     /* 縮小率 */
  --mb-left:50%;       /* ハンバーガー中央寄せ */
  --mb-top:16.5px;     /* 上段バーY位置（最終値） */
  --ln-w:28px;         /* 線の長さ */
  --ln-h:3px;          /* 線の太さ */
  --ln-gap:9px;        /* 線間隔 */
  --ln-color:#464646;  /* 線色 */

  /* Mobile menu font/tap sizes */
  --mm-font:22px;      /* 親メニューの文字 */
  --mm-sub:20px;       /* サブの文字 */
  --mm-vpad:18px;      /* 上下余白 */
  --mm-hpad:22px;      /* 左右余白 */

  /* Mobile menu icon/hit */
  --mm-icon:32px;        /* ＋/矢印サイズ */
  --mm-icon-scale:1.25;  /* 疑似要素の拡大率 */
  --mm-hit:52px;         /* 右端ボタンのタップ幅 */
}

/* ▼ スマホメニュー（mmenu系） */
@media (max-width:720px){
  /* 親メニュー行 */
  .mm-menu .mm-listview > li > a,
  .mm-menu .mm-listitem__text,
  .mm-menu .mm-navbar__title{
    font-size: var(--mm-font) !important;
    line-height: 1.4;
    padding: var(--mm-vpad) var(--mm-hpad) !important;
  }

  /* サブメニュー行 */
  .mm-menu .mm-listview .mm-listitem .mm-listview > li > a{
    font-size: var(--mm-sub) !important;
    line-height: 1.4;
    padding: calc(var(--mm-vpad) - 2px) var(--mm-hpad) !important;
  }

  /* 右端の開閉（＋/矢印）を大きく＆押しやすく */
  .mm-menu .mm-btn,
  .mm-menu .mm-btn_next,
  .mm-menu .mm-btn_prev{
    width: var(--mm-hit) !important;
    min-width: var(--mm-hit) !important;
  }

  /* フォント/疑似要素アイコン型 */
  .mm-menu .mm-btn_next::after,
  .mm-menu .mm-btn_prev::before{
    font-size: var(--mm-icon) !important;
    transform: scale(var(--mm-icon-scale));
  }

  /* （必要なら有効化）背景画像アイコン型の拡大 */
  /* .mm-menu .mm-btn_next{ background-size: var(--mm-icon) var(--mm-icon) !important; } */
}


/*************
 必要◎モバイルメニュー（ハンバーガー/ドロワー）
**********************/

/* 右上固定＆既存アイコン無効化 */
#header a.menu_button{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  border-left: none !important;
}
#header a.menu_button:not(.active){
  background: var(--mb-bg) !important;
  border-radius: 0 !important;
  transform: scale(var(--mb-scale));
  position: relative;
}
#header a.menu_button:before{
  content: none !important;
}

/* CSSで三本線を描画（中央寄せ） */
#header a.menu_button::before,
#header a.menu_button::after,
#header a.menu_button span{
  content: "" !important;
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--ln-w);
  height: var(--ln-h);
  background: var(--ln-color);
  border-radius: 1px;
}

/* === ハンバーガー：ヘッダー高にフィット＆常に中央（正方形） === */
@media (max-width:1180px){
  /* 親を基準にする */
  #header{ position: relative; }

  /* 右上に貼り付け：高さ＝ヘッダー高、幅＝高さ（正方形） */
  #header a.menu_button{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;                 /* ← 高さは top/bottom で決まる */
    aspect-ratio: 1 / 1;       /* ← 幅＝高さ */
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;          /* 角丸いらなければ0（お好み） */
    background: var(--mb-bg);
    z-index: 60;               /* 9999は過剰なので抑制 */
  }

  /* 三本線：常に“ボタンのど真ん中”へ。mb-top不要 */
  #header a.menu_button::before{
    top: calc(50% - (var(--ln-gap) + 1.5 * var(--ln-h)));
  }
  #header a.menu_button > span{
    top: calc(50% - .5 * var(--ln-h));
  }
  #header a.menu_button::after{
    top: calc(50% + (var(--ln-gap) + .5 * var(--ln-h)));
  }
}

/* aspect-ratio 非対応ブラウザ用フォールバック */
@supports not (aspect-ratio: 1 / 1){
  #header a.menu_button{
    width: 48px;
    height: 48px;
  }
}



/* ==== モバイルメニューの文字サイズ（mmenu & TCDドロワー対応） ==== */
@media (max-width:960px){
  /* 調整ノブ（ここだけ変えればOK） */
  :root{
    --mm-font: 20px;   /* 親メニューの文字サイズ */
    --mm-sub: 18px;    /* サブメニューの文字サイズ */
    --mm-line: 1.5;    /* 行間 */
    --mm-vpad: 14px;   /* 上下余白 */
    --mm-hpad: 18px;   /* 左右余白 */
    --mm-hit: 52px;    /* →ボタンのタップ幅（mmenu） */
    --mm-icon: 28px;   /* →/＋アイコンのフォントサイズ */
  }

  /* ★ mmenu（プラグイン） */
  .mm-menu .mm-listview > li > a,
  .mm-menu .mm-listitem__text,
  .mm-menu .mm-navbar__title{
    font-size: var(--mm-font) !important;
    line-height: var(--mm-line);
    padding: var(--mm-vpad) var(--mm-hpad) !important;
  }
  .mm-menu .mm-listview .mm-listitem .mm-listview > li > a{
    font-size: var(--mm-sub) !important;
    line-height: var(--mm-line);
    padding: calc(var(--mm-vpad) - 2px) var(--mm-hpad) !important;
  }
  .mm-menu .mm-btn,
  .mm-menu .mm-btn_next,
  .mm-menu .mm-btn_prev{
    width: var(--mm-hit) !important;
    min-width: var(--mm-hit) !important;
  }
  .mm-menu .mm-btn_next::after,
  .mm-menu .mm-btn_prev::before{
    font-size: var(--mm-icon) !important;
  }

  /* ★ TCD標準のドロワー（クラス名が違っても広く拾う） */
  :where(.drawer,.sp-nav,#global-nav,.gNav,#global_menu,.global_menu) a{
    font-size: var(--mm-font) !important;
    line-height: var(--mm-line);
    padding: var(--mm-vpad) var(--mm-hpad);
  }
  :where(.drawer,.sp-nav,#global-nav,.gNav,#global_menu,.global_menu) li li > a{
    font-size: var(--mm-sub) !important;
  }
}


/* ==== モバイル時のロゴ拡大（TCD MONOLITH向け広めセレクタ） ==== */
@media (max-width:1180px){
  /* 調整ノブ：数値だけ変えればOK */
  :root{
    --logo-w: 250px;      /* ロゴの理想幅 */
    --logo-max-h: 56px;   /* ロゴの最大高さ（ヘッダー内で潰れない範囲） */
    --menu-btn-w: 64px;   /* 右上ハンバーガーの幅（重ならない余白確保用） */
  }

  /* 1) 画像ロゴのサイズアップ（テーマの固定高さを打ち消す） */
  #header .logo img,
  #header #logo img,
  #header .site-logo img,
  #header .site-title img,
  #header .header_logo img,
  .site-header .site-logo img{
    width: var(--logo-w) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--logo-max-h) !important;
    object-fit: contain;
  }

  /* 2) テキストロゴの場合（サイトタイトル） */
  #header .logo a,
  #header #logo a,
  #header .site-title a,
  .site-header .site-title a{
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* 3) 右上のハンバーガーと重ならないよう右側に余白を確保 */
  #header,
  #header .inner,
  #header .header_inner,
  .site-header__inner{
    padding-right: var(--menu-btn-w) !important;
  }

  /* 4) ロゴの縦中央揃え（揺れる場合の保険） */
  #header .logo,
  #header #logo,
  .site-header .site-logo,
  .site-header .site-title{
    display: inline-flex;
    align-items: center;
  }
}


/* ==== Footer Menu Font: 強制オーバーライド（TCD MONOLITH向け広域セレクタ） ==== */

/* 調整ノブ（お好みで） */
:root{
  --ftm-sp: 16px;   /* スマホ */
  --ftm-pc: 14px;   /* PC */
  --ftm-line: 1.1;  /* 行間 */
  --ftm-pad-v: 2px; /* 上下余白 */
  --ftm-pad-h: 2px;/* 左右余白 */
}

/* スマホ（～980px） */
@media (max-width:980px){
  :where(#footer, #footer_widget, #footer_bottom, .footer, .site-footer, .l-footer, .p-footer, [class*="footer"])
  :where(nav, .menu, .footer_menu, .menu-footer, .footer-nav, .menu-footer-container, .widget_nav_menu .menu) a{
    font-size: var(--ftm-sp) !important;
    line-height: var(--ftm-line) !important;
    padding: var(--ftm-pad-v) var(--ftm-pad-h) !important;
    display:inline-block !important;
  }
}

/* PC（981px～） */
@media (min-width:981px){
  :where(#footer, #footer_widget, #footer_bottom, .footer, .site-footer, .l-footer, .p-footer, [class*="footer"])
  :where(nav, .menu, .footer_menu, .menu-footer, .footer-nav, .menu-footer-container, .widget_nav_menu .menu) a{
    font-size: var(--ftm-pc) !important;
    line-height: var(--ftm-line) !important;
    padding: 6px 10px !important; /* クリック余白（必要なら変更） */
    display:inline-block !important;
    white-space: nowrap; /* 1行で並べたいときは残す／折返したいなら削除 */
  }
}

/* サブメニュー（ある場合のみ少し小さく） */
:where(#footer, .footer, .site-footer) .sub-menu a{
  font-size: .92em !important;
}



/* 任意：リンク色や下線の調整（必要なければ削除） */
:where(#footer,.footer,.site-footer) .menu a{
  text-underline-offset: 3px;
}