/* === TSUNO override (safe hotfix) =========================
   目的：
   - CASES の横スクロール無限ループを復活
   - ボタンを最終版の黒系グラデに戻す
   - SERVICE のカードを PC3/Tab2/SP1 で横並び固定
   - 既存CSSを壊さないよう scope + !important で“後勝ち”
   ======================================================= */

/* 1) Buttons：最終の黒〜グレー系グラデを強制 */
:root{
  --btn-g-from:#9aa3ad; --btn-g-mid:#4a515b; --btn-g-to:#0b0d10;
}
:is(.btn,.btn-primary,.btn-secondary,#service .card .cta .btn,#cases .btn,.hero .btn){
  color:#fff !important;
  background-image:linear-gradient(135deg,var(--btn-g-from) 0%,var(--btn-g-mid) 46%,var(--btn-g-to) 100%) !important;
  background-size:140% 140% !important;
  background-position:0 0 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px rgba(0,0,0,.25) !important;
  transition: background-position .35s ease, filter .15s ease, box-shadow .15s ease !important;
}
:is(.btn,.btn-primary,.btn-secondary,#service .card .cta .btn,#cases .btn,.hero .btn):hover{
  background-image:linear-gradient(135deg,#c5ced8 0%, #6b7480 40%, #000 100%) !important;
  background-position:100% 0 !important;
  filter:brightness(1.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px rgba(0,0,0,.30) !important;
}
/* ヘッダーナビの一番右のCTAも同じトーンに */
.gnav > li:last-child > a{
  color:#fff !important;
  background-image:linear-gradient(135deg,var(--btn-g-from) 0%,var(--btn-g-mid) 46%,var(--btn-g-to) 100%) !important;
  background-size:140% 140% !important; background-position:0 0 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px rgba(0,0,0,.25) !important;
}

/* 2) CASES：横スクロール無限ループ */
#cases .loop-cases, .loop-cases{ --speed:30s; overflow:hidden; }
#cases .loop-track, .loop-track{
  display:flex; width:max-content; gap:12px;
  animation:cases-marquee var(--speed) linear infinite;
}
#cases .loop-group, .loop-group{ display:flex; gap:12px; }
#cases .loop-cases:hover .loop-track, .loop-cases:hover .loop-track{
  animation-play-state:paused;
}
@keyframes cases-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* 3) SERVICE：カードを横並び（PC3/Tab2/SP1）に固定 */
#service .cards{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px,3vw,28px);
}
@media (max-width:1024px){
  #service .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  #service .cards{ grid-template-columns:1fr; }
}

/* 4) SERVICE：背景画像カードの可読性（うっすら暗幕）＋白字強調（巻き込み防止で scope） */
#service .cards .card[style*="background-image"]{ position:relative; overflow:hidden; }
#service .cards .card[style*="background-image"]::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
#service .cards .card > *{ position:relative; z-index:1; }
#service .cards .card .h4{
  color:#fff !important; font-weight:900 !important; font-size:20px; text-shadow:0 2px 12px rgba(0,0,0,.45);
}
#service .cards .card p{
  color:#fff !important; font-weight:700 !important; font-size:15px; text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* 5) （任意）見出しの赤い下線アニメを使っている場合の最小セット */
:root{ --ink-red-from:#ff3b3b; --ink-red-to:#b30020; }
#mission .h2, #service .h2:nth-of-type(1), #service .h2:nth-of-type(2){
  position:relative; padding-bottom:.5em;
}
#mission .h2::after, #service .h2:nth-of-type(1)::after, #service .h2:nth-of-type(2)::after{
  content:""; position:absolute; left:0; bottom:.1em; width:100%; height:.22em;
  background:linear-gradient(90deg,var(--ink-red-from),var(--ink-red-to));
  border-radius:999px; transform-origin:0 50%;
  transform:scaleX(0) skewX(-16deg); transition:transform .9s cubic-bezier(.2,.65,.2,1);
}
#mission .h2.ink-inview::after, #service .h2:nth-of-type(1).ink-inview::after, #service .h2:nth-of-type(2).ink-inview::after{
  transform:scaleX(1) skewX(-16deg);
}


/* === SERVICE「相談する」ボタン：見た目が混ざる不具合の修正 === */
#service .cards .card .cta .btn{
  /* まず背景系を全消ししてから、1枚のグラデを指定 */
  background: none !important;                      /* ← 重なりをリセット */
  background-image: linear-gradient(
    135deg, #cbd3dc 0%, #4b5563 46%, #0b0d10 100%
  ) !important;
  background-size: 160% 160% !important;
  background-position: 0 0 !important;

  color:#fff !important; -webkit-text-fill-color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 10px 22px rgba(0,0,0,.25) !important;

  /* 形・サイズ（必要なら調整OK） */
  width: clamp(240px, 86%, 540px) !important;
  padding: 10px 34px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  border-radius: 999px !important;

  /* 他のルールからの transform / filter を無効化 */
  transform: none !important;
  filter: none !important;
}

#service .cards .card .cta .btn:hover{
  background-image: linear-gradient(
    135deg, #e5ecf3 0%, #6b7480 40%, #000 100%
  ) !important;
  background-position: 100% 0 !important;
  filter: brightness(1.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35),
              0 12px 28px rgba(0,0,0,.30) !important;
}


/* === TSUNO OVERRIDE: 最終上書きだけを集約（style.css を壊さない） === */

/* ---- tokens ---- */
:root{
  --label-grad-from:#111111;
  --label-grad-to:#8b8f96;
  --ink-red-from:#ff3b3b;
  --ink-red-to:#b30020;
  --btn-hover-black:#000;
  --btn-active-black:#111;
}

/* ========================================
   ラベル（MISSION / SERVICE / CASES / ABOUT / CONTACT）
   ・中央・大きめ・文字グラデ
   ・下の黒線やアニメはOFF
======================================== */
#mission .block-title,
#service .block-title,
#cases  .block-title,
#about  .block-title,
#contact .block-title,
[id^="contact"] .block-title{
  display:inline-block;
  margin:0 auto 12px !important;
  text-align:center !important;
  font-weight:900 !important;
  letter-spacing:.30em !important;
  font-size:clamp(16px, 2.4vw, 22px) !important;
  background:linear-gradient(90deg,var(--label-grad-from),var(--label-grad-to)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
#mission .block-title::after,
#service .block-title::after,
#cases  .block-title::after,
#about  .block-title::after,
#contact .block-title::after,
[id^="contact"] .block-title::after{
  content:none !important;
}



/* ========================================
   CONTACT セクション：中央寄せ（IDゆれも拾う）
======================================== */
#contact .container,
section#contact .container,
section[id*="contact" i] .container,
section[class*="contact" i] .container{
  display:grid !important;
  justify-items:center !important;
  text-align:center !important;
}

/* ========================================
   CASES 無限ループ（必要最小限）
======================================== */
.loop-cases{ --speed:30s; overflow:hidden; }
.loop-track{ display:flex; width:max-content; gap:12px; animation:cases-marquee var(--speed) linear infinite; }
.loop-group{ display:flex; gap:12px; }
.loop-cases:hover .loop-track{ animation-play-state:paused; }
@keyframes cases-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ========================================
   Buttons：全ボタンのホバーは“真っ黒”に統一
   ・擬似要素の光沢/影も完全停止
   ・「相談する」も同じ挙動で固定
======================================== */
:is(.btn, .btn-primary, .btn-secondary,
    #service .cards .card .cta .btn,
    #cases .btn,
    .hero .btn,
    .gnav > li:last-child > a):hover::before,
:is(.btn, .btn-primary, .btn-secondary,
    #service .cards .card .cta .btn,
    #cases .btn,
    .hero .btn,
    .gnav > li:last-child > a):hover::after{
  content:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}
:is(.btn, .btn-primary, .btn-secondary,
    #service .cards .card .cta .btn,
    #cases .btn,
    .hero .btn,
    .gnav > li:last-child > a):hover{
  background-color:var(--btn-hover-black) !important;
  background-image:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
:is(.btn, .btn-primary, .btn-secondary,
    #service .cards .card .cta .btn,
    #cases .btn,
    .hero .btn,
    .gnav > li:last-child > a):active{
  background-color:var(--btn-active-black) !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* 『相談する』の平常時は既存の見た目を尊重、ホバー時のみ黒で潰す */
#service .cards .card .cta .btn{
  /* 影/浮きが残っていれば無効化 */
  text-shadow:none !important;
  transform:none !important;
}

/* ===== Spacing: Section labels -> content (ABOUT/CASES/SERVICE/MISSION) ===== */
/* 1カ所の数値で全体を調整できるようトークン化 */
:root{
  --label-gap: clamp(28px, 3.6vw, 64px);  /* ラベル(.block-title)の下の余白 */
  --h2-gap:    clamp(32px, 5vw, 88px);    /* H2の下の余白（SERVICE/MISSION用） */
}

/* ラベル（英字小見出し）の下を広げる */
#about  .block-title,
#cases  .block-title,
#service.block .block-title, /* 念のための保険（idにclassが付くパターン） */
#service .block-title,
#mission .block-title{
  margin-bottom: var(--label-gap) !important;
}

/* MISSION の日本語H2（「挑戦者の価値を…」）の下も広げる */
#mission .h2{
  margin-bottom: var(--h2-gap) !important;
}

/* SERVICE のH2（Web Design / Marketing）の下を広げる */
#service .h2:nth-of-type(1),
#service .h2:nth-of-type(2){
  margin-bottom: var(--h2-gap) !important;
}

/* （フロントのABOUTがバナー2枚のグリッドなら、開始マージンも少しだけ増強） */
.home #about .split{
  margin-top: calc(var(--label-gap) - 8px) !important; /* 好みで±調整OK */
}

/* 既存の“ラベル下に黒線を描く”系の古い指定が残っていて詰まる場合の保険。
   これで余白を殺す position / transform を無効化して margin を効かせる */
#about  .block-title::after,
#cases  .block-title::after,
#service .block-title::after,
#mission .block-title::after{
  position: static !important;
  transform: none !important;
  margin-top: 8px !important; /* ラベル直下の線と文字が近すぎる場合はここを調整 */
}

/* =============================
   TSUNO – ボタン調整パッチ
   ・「相談する」… もう少し“長く”（横長）
   ・「実績をもっと見る」「お問い合わせ」「資料ダウンロード」… 少し“太く”（高さ）
   ============================= */

/* ノブ（数値だけで微調整できる） */
:root{
  /* 相談する（横幅） */
  --consult-min: 300px;     /* 最小幅（元: 240〜260px 付近） */
  --consult-fit: 92%;       /* カードに対する相対幅（元: 86%） */
  --consult-max: 640px;     /* 最大幅（元: 540〜600px） */

  /* “太く”するときの縦パディング */
  --btn-thicker-pad-y: 14px; /* 元は 10〜12px */
}

/* 相談する：もう少し長く（横だけ） */
#service .cards .card .cta .btn{
  width: clamp(var(--consult-min), var(--consult-fit), var(--consult-max)) !important;
  /* 高さは据え置き（薄めのまま） */
}

/* ── 以下、「実績をもっと見る」「お問い合わせ」「資料DL」を“少し太く” ── */

/* 1) CASES セクションの「実績をもっと見る」想定 */
#cases .btn{
  padding-top: var(--btn-thicker-pad-y) !important;
  padding-bottom: var(--btn-thicker-pad-y) !important;
  font-weight: 900 !important;
}

/* 2) お問い合わせ（Contact）想定
      - Contact セクション内のボタン
      - かつ、href に contact を含む .btn（ヘッダーのナビは .btn じゃない想定で除外される） */
#contact .btn,
section[id*="contact" i] .btn,
section[class*="contact" i] .btn,
a.btn[href*="contact"]{
  padding-top: var(--btn-thicker-pad-y) !important;
  padding-bottom: var(--btn-thicker-pad-y) !important;
  font-weight: 900 !important;
}

/* 3) 資料ダウンロード（PDF/download属性/専用クラス） */
.btn--download,
a.btn[download],
a.btn[href$=".pdf"],
a.btn[href*="download"]{
  padding-top: var(--btn-thicker-pad-y) !important;
  padding-bottom: var(--btn-thicker-pad-y) !important;
  font-weight: 900 !important;
}

/* ── 保険：サービス内の「相談する」は“太く”を適用しない（横だけ長く） ──
   上の contact マッチで拾われても、ここで高さを元に戻す */
#service .cards .card .cta .btn{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  /* 横は上の clamp 指定が生きる */
}

/* =========================
   TSUNO – 相談する 長くする（確実版）
   仕組み：width:100% が残っていても max-width で上限を握って中央寄せ
   ========================= */

/* ノブ（ここだけ好みで調整） */
:root{
  --consult-max-min: 320px; /* 最短長さ（px） */
  --consult-max-fit: 92%;   /* カードに対する比率 */
  --consult-max-max: 680px; /* 最長長さ（px） */
  --consult-pad-y: 10px;    /* 高さ（薄めをキープ） */
  --consult-pad-x: 36px;    /* 横の左右余白 */
}

/* a.btn / button.btn の両方を面倒見ます */
#service .cards .card .cta :is(a.btn, button.btn){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  /* 幅は“100%でもOK”。上限は max-width が握る */
  width: 100% !important;
  max-width: clamp(var(--consult-max-min), var(--consult-max-fit), var(--consult-max-max)) !important;
  margin-inline: auto !important; /* 中央寄せ */

  padding: var(--consult-pad-y) var(--consult-pad-x) !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

/* .btn--full 等が付いていても同じ最大幅に収める */
#service .cards .card .cta :is(a.btn.btn--full, button.btn.btn--full){
  max-width: clamp(var(--consult-max-min), var(--consult-max-fit), var(--consult-max-max)) !important;
}

/* もしどこかに “min-width: 260px 以上” が居座っていて形が崩れる時の保険 */
#service .cards .card .cta .btn{
  min-width: 0 !important; /* max-width 制御を優先 */
}

/* 影や擬似要素が見た目を変えるのを止める（既出の影トラブル対策） */
#service .cards .card .cta .btn::before,
#service .cards .card .cta .btn::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

section#service .cards .card .cta a.btn,
section#service .cards .card .cta button.btn{
  width:100% !important;
  max-width:clamp(320px,92%,680px) !important;
  min-width:0 !important;
}


/* === TSUNO: spacing + consult width + thicker CTAs (append at EOF of assets/tsuno-override.css) === */
:root{
  /* ラベル下余白／H2下余白（必要なら数値だけ調整） */
  --label-gap: clamp(36px, 5vw, 88px);
  --h2-gap:    clamp(32px, 5vw, 88px);

  /* 相談する の横長ノブ */
  --consult-max-min: 340px;
  --consult-max-fit: 94%;
  --consult-max-max: 720px;

  /* “太く”する縦パディング */
  --btn-thicker-pad-y: 14px;
}

/* 1) ラベル（ABOUT/CASES/SERVICE/MISSION）下の余白を拡張 */
html body :is(#about,#cases,#service,#mission) .block-title{
  margin-bottom: var(--label-gap) !important;
}
/* 下線疑似要素が余白を潰している場合の保険 */
html body :is(#about,#cases,#service,#mission) .block-title::after{
  position: static !important;
  transform: none !important;
  margin-top: 8px !important;
}

/* H2の下も広げる（MISSIONの日本語H2、SERVICEの2見出し） */
html body #mission .h2{
  margin-bottom: var(--h2-gap) !important;
}
html body #service .h2:nth-of-type(1),
html body #service .h2:nth-of-type(2){
  margin-bottom: var(--h2-gap) !important;
}

/* 2) 「相談する」をもっと横長に（横=100%、上限は max-width で握る） */
html body #service .cards .card .cta :is(a.btn,button.btn){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width: 100% !important;
  max-width: clamp(var(--consult-max-min), var(--consult-max-fit), var(--consult-max-max)) !important;
  min-width: 0 !important;                 /* 以前の min-width クランプを打ち消す */
  margin-inline: auto !important;
  padding: 10px 36px !important;            /* 高さは薄めのまま */
  line-height: 1 !important;
  border-radius: 999px !important;
}
/* .btn--full 等が付いても同じ最大幅に収める */
html body #service .cards .card .cta :is(a.btn.btn--full,button.btn.btn--full){
  max-width: clamp(var(--consult-max-min), var(--consult-max-fit), var(--consult-max-max)) !important;
}

/* 3) 「実績をもっと見る／お問い合わせ／資料DL」を少し太く */
html body #cases .btn,
html body #contact .btn,
html body section#contact .btn,
html body section[id*="contact" i] .btn,
html body section[class*="contact" i] .btn,
html body a.btn[href*="contact"],
html body .btn--download,
html body a.btn[download],
html body a.btn[href$=".pdf"],
html body a.btn[href*="download"]{
  padding-top: var(--btn-thicker-pad-y) !important;
  padding-bottom: var(--btn-thicker-pad-y) !important;
  font-weight: 900 !important;
}

/* サービス内の「相談する」は“太く”は適用せず（横だけ長く） */
html body #service .cards .card .cta .btn{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* もしグローバルで .btn に大きめの min-width が残っていて邪魔する場合の保険 */
html body :is(.btn,.btn-primary,.btn-secondary){
  min-width: 0 !important;
}

/* === TSUNO: 強制最終パッチ（EOFに追加）========================
   - ラベル下余白：すでにOKなので触らない
   - 「相談する」を横長：.btn 以外に .wp-block-button__link も捕捉
   - 「実績をもっと見る／お問い合わせ／資料DL」を太く：各パターンを網羅
   ============================================================ */

/* 相談する：ラッパが Gutenberg の場合も含め“確実に横長” */
#service .cards .card .cta .wp-block-buttons,
#service .cards .card .cta .wp-block-button{
  width: 100% !important;
  display: block !important;
}

#service .cards .card .cta a,
#service .cards .card .cta button,
#service .cards .card .cta .wp-block-button__link,
#service .cards .card .cta a[class*="btn" i]{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* 横長化：幅は100%、上限は max-width が握る */
  width: 100% !important;
  max-width: clamp(340px, 94%, 720px) !important;
  min-width: 0 !important;            /* 以前の min-width を無効化 */
  margin-inline: auto !important;

  /* 高さは薄めのまま（デザイン維持） */
  padding: 10px 36px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

/* 既存の「相談する」専用幅指定を無効化（念のため） */
#service .cards .card .cta .btn{
  width: auto !important; /* ↑の width:100% が勝つが、古い clamp 幅を潰す保険 */
  min-width: 0 !important;
}

/* 「実績をもっと見る」想定：CASES内のボタンを少し太く */
#cases a[class*="btn" i],
#cases .wp-block-button__link{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  font-weight: 900 !important;
}

/* 「お問い合わせ」想定：Contact系のボタンを少し太く（ID/クラス名ゆれ全部拾う） */
#contact .wp-block-button__link,
section#contact .wp-block-button__link,
section[id*="contact" i] .wp-block-button__link,
section[class*="contact" i] .wp-block-button__link,
#contact a[class*="btn" i],
section#contact a[class*="btn" i],
section[id*="contact" i] a[class*="btn" i],
section[class*="contact" i] a[class*="btn" i],
a.btn[href*="contact"]{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  font-weight: 900 !important;
}

/* 「資料DL」想定：download/PDF/命名済みクラスを少し太く */
.btn--download,
a.btn[download],
a.btn[href$=".pdf"],
a.btn[href*="download"],
.wp-block-button__link[download],
.wp-block-button__link[href$=".pdf"],
.wp-block-button__link[href*="download"]{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  font-weight: 900 !important;
}

/* グローバル保険：.btn / Gutenberg ボタンの最小幅が残っていたら解除 */
:is(.btn,.btn-primary,.btn-secondary,.wp-block-button__link){
  min-width: 0 !important;
}

/* === TSUNO: ボタン幅/太さ・確実版（最終行に追加）================= */
/* 相談する：幅100%＋上限で“横長”。Gutenbergクラスも全部拾う */
#service .cards .card .cta :is(a.btn, button.btn, .wp-block-button__link, .wp-element-button){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;                                     /* ← 幅を確定 */
  max-width: clamp(360px, 94%, 760px) !important;            /* ← 横長の上限 */
  min-width: 0 !important;
  margin-inline:auto !important;

  padding:10px 36px !important; /* 高さは薄めのまま（要望どおり） */
  line-height:1 !important;
  border-radius:999px !important;
}
/* “悪さしてた width:auto” を打ち消す（同じセレクタで再指定） */
#service .cards .card .cta .btn{
  width:100% !important;
  max-width: clamp(360px, 94%, 760px) !important;
  min-width:0 !important;
}

/* 実績をもっと見る／お問い合わせ／資料DL：少し“太く” */
/* CASES の「実績をもっと見る」 */
#cases :is(.btn, .wp-block-button__link, .wp-element-button){
  padding-top:14px !important;
  padding-bottom:14px !important;
  font-weight:900 !important;
}
/* お問い合わせ（Contact 系を網羅） */
:is(#contact, section#contact, section[id*="contact" i], section[class*="contact" i])
  :is(.btn, .wp-block-button__link, .wp-element-button),
a.btn[href*="contact"]{
  padding-top:14px !important;
  padding-bottom:14px !important;
  font-weight:900 !important;
}
/* 資料DL（download/PDF/命名クラス） */
.btn--download,
a.btn[download],
a.btn[href$=".pdf"],
a.btn[href*="download"],
.wp-block-button__link[download],
.wp-block-button__link[href$=".pdf"],
.wp-block-button__link[href*="download"],
.wp-element-button[download]{
  padding-top:14px !important;
  padding-bottom:14px !important;
  font-weight:900 !important;
}
/* Gutenberg のアウトラインスタイルにも適用（特に高さ） */
.wp-block-button.is-style-outline .wp-block-button__link{
  padding-top:14px !important;
  padding-bottom:14px !important;
}

/* ==== TSUNO: CTA サイズ微調整（最後に追加） ===================== */
/* ノブ（ここだけ変えれば微調整OK） */
:root{
  /* 相談する：ほどよい横長（90% ≒ ちょい余白） */
  --consult-w-min: 280px;
  --consult-w-fit: 90%;
  --consult-w-max: 620px;

  /* 大きめボタン（実績もっと見る／お問い合わせ／資料DL） */
  --btn-lg-pad-y: 16px;                   /* 高さUP */
  --btn-lg-pad-x: 38px;
  --btn-lg-font: clamp(14px, 1.2vw, 16px);/* 文字サイズUP */
  --btn-lg-minw: clamp(260px, 32vw, 380px); /* 最小〜程よい横幅 */
}

/* 相談する：親幅ベースだけど“少し短め”に（＝max-widthで調整） */
#service .cards .card .cta{ width:100% !important; }
#service .cards .card .cta :is(a.btn, button.btn, .wp-block-button__link, .wp-element-button){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  max-width: clamp(var(--consult-w-min), var(--consult-w-fit), var(--consult-w-max)) !important;
  min-width: 0 !important;
  margin-inline: auto !important;

  padding: 12px 36px !important;       /* “相談する”は薄めのまま */
  line-height: 1 !important;
  border-radius: 999px !important;

  outline: none !important;            /* デバッグ枠OFF */
}

/* ── ここから“大きくする”系（実績もっと見る／お問い合わせ／資料DL）── */

/* CASES：「実績をもっと見る」想定（#cases配下のボタン） */
#cases :is(a.btn, .btn, .wp-block-button__link, .wp-element-button){
  padding: var(--btn-lg-pad-y) var(--btn-lg-pad-x) !important;
  font-size: var(--btn-lg-font) !important;
  font-weight: 900 !important;
  min-width: var(--btn-lg-minw) !important;
}

/* お問い合わせ（Contact全域＆フッターCTA） */
:is(#contact, section#contact, section[id*="contact" i], section[class*="contact" i], .footer-cta)
  :is(a.btn, .btn, .wp-block-button__link, .wp-element-button),
a.btn[href*="contact" i],
.wp-block-button__link[href*="contact" i],
.wp-element-button[href*="contact" i]{
  padding: var(--btn-lg-pad-y) var(--btn-lg-pad-x) !important;
  font-size: var(--btn-lg-font) !important;
  font-weight: 900 !important;
  min-width: var(--btn-lg-minw) !important;
}

/* 資料ダウンロード（download/PDF/“download”含むリンク） */
.btn--download,
a.btn[download],
a.btn[href$=".pdf" i],
a.btn[href*="download" i],
.wp-block-button__link[download],
.wp-block-button__link[href$=".pdf" i],
.wp-block-button__link[href*="download" i],
.wp-element-button[download]{
  padding: var(--btn-lg-pad-y) var(--btn-lg-pad-x) !important;
  font-size: var(--btn-lg-font) !important;
  font-weight: 900 !important;
  min-width: var(--btn-lg-minw) !important;
}

/* 相談するは“太く”を適用しない（上の拡張に巻き込まれても戻す） */
#service .cards .card .cta :is(a.btn, button.btn, .wp-block-button__link, .wp-element-button){
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* TSUNO: 相談する を現状の約90%に */
:root{
  /* 90%（= もとの 0.9倍） → 81%にダウン（0.9 × 0.9） */
  --consult-w-fit: 81%;
  /* もし上限に当たっていた場合にも効くように、maxも少し下げる */
  --consult-w-max: 560px;
}
/* 念のため、minは据え置きでOK（必要なら下げて） */
/* :root{ --consult-w-min: 280px; } */

/* ==== TSUNO: FINAL PATCH (append at EOF) ===================== */

/* 1) 「実績をもっと見る／お問い合わせ／資料DL」を“太く” */
#cases :is(.btn,.wp-block-button__link,.wp-element-button),
:is(#contact, section#contact, section[id*="contact" i], section[class*="contact" i], .footer-cta)
  :is(.btn,.wp-block-button__link,.wp-element-button),
.btn--download,
a.btn[download],
a.btn[href$=".pdf" i],
a.btn[href*="download" i],
.wp-block-button__link[download],
.wp-block-button__link[href$=".pdf" i],
.wp-block-button__link[href*="download" i],
.wp-element-button[download]{
  padding-block:16px !important;                  /* ← 太く */
  font-weight:900 !important;
  min-width:clamp(260px,32vw,380px) !important;   /* ← 小さ過ぎ防止 */
}

/* 2) 「相談する」を“今の約90%”に（横長は維持しつつ短く） */
#service .cards .card .cta :is(a.btn,button.btn,.wp-block-button__link,.wp-element-button){
  width:100% !important;
  max-width:clamp(300px,90%,560px) !important;    /* ← 94%/760px を 90%/560px に短縮 */
  min-width:0 !important;
  margin-inline:auto !important;
  /* “相談する”は高さを薄めキープ（↑の太くルールに勝つように後置） */
  padding-block:12px !important;
}

/* ==== TSUNO: FINAL — buttons sizing (append at EOF) ================= */

/* 相談する：Service のカード内だけ今の約90%の長さに（横長は維持） */
#service .cards .card .cta .wp-block-buttons,
#service .cards .card .cta .wp-block-button{
  width:100% !important; display:block !important;
}
#service .cards .card .cta :is(a.btn, button.btn, .wp-block-button__link, .wp-element-button){
  width:100% !important;
  max-width:clamp(300px, 90%, 560px) !important; /* ← “今より少し短い” */
  min-width:0 !important;
  margin-inline:auto !important;
  padding-block:12px !important;                 /* ← 薄めキープ */
  border-radius:999px !important;
}

/* CASES：「実績をもっと見る」を“太く & 小さ過ぎ防止” */
#cases :is(a.btn, .btn, .wp-block-button__link, .wp-element-button){
  padding-block:18px !important;
  font-size:clamp(14px,1.2vw,16px) !important;
  font-weight:900 !important;
  min-width:clamp(280px, 36vw, 420px) !important;
}

/* お問い合わせ／資料DL を“太く”に（セクション & フッターも網羅） */
:is(#contact, section#contact, section[id*="contact" i], section[class*="contact" i], .footer-cta)
  :is(a.btn, .btn, .wp-block-button__link, .wp-element-button),
a.btn[href*="contact" i],
.wp-block-button__link[href*="contact" i],
.wp-element-button[href*="contact" i],
.btn--download,
a.btn[download],
a.btn[href$=".pdf" i],
a.btn[href*="download" i],
.wp-block-button__link[download],
.wp-block-button__link[href$=".pdf" i],
.wp-block-button__link[href*="download" i],
.wp-element-button[download]{
  padding-block:18px !important;
  font-size:clamp(14px,1.2vw,16px) !important;
  font-weight:900 !important;
  min-width:clamp(280px, 36vw, 420px) !important;
}

/* 保険：グローバルで min-width / width:auto が邪魔しないように */
:is(.btn, .btn-primary, .btn-secondary, .wp-block-button__link, .wp-element-button){
  min-width:0 !important;
}

/* === TSUNO: final sizing patch (EOF) =========================
   - 相談する：今の長さの ≒90%
   - 実績をもっと見る／お問い合わせ／資料DL：少し大きく（太く＆最小幅確保）
   =========================================================== */

/* 相談する：親幅100%のまま、上限だけ下げて“約90%”に */
#service .cards .card .cta :is(a.btn, button.btn, .wp-block-button__link, .wp-element-button){
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important;
  max-width: clamp(320px, 85%, 620px) !important;  /* ← ここが“約90%” */
  min-width: 0 !important;
  margin-inline:auto !important;
  padding-block:12px !important;  /* 相談するは薄めキープ */
  padding-inline:36px !important;
  border-radius:999px !important;
}
/* 古い幅指定に必ず勝つ保険 */
#service .cards .card .cta .btn{ width:100% !important; min-width:0 !important; }

/* 実績をもっと見る（#cases 配下）— 太く＆最小幅を持たせる */
#cases :is(.wp-block-button__link, .wp-element-button, a.btn, .btn){
  padding-block:18px !important;
  padding-inline:40px !important;
  font-size:clamp(15px, 1.2vw, 17px) !important;
  font-weight:900 !important;
  min-width: clamp(240px, 62vw, 420px) !important; /* モバイルでも小さすぎない */
}

/* お問い合わせ／資料DL（Contact全域＋フッターCTA）— 太く＆最小幅 */
:is(#contact, section#contact, section[id*="contact" i], section[class*="contact" i], .footer-cta)
  :is(.wp-block-button__link, .wp-element-button, a.btn, .btn),
.btn--download,
a.btn[download],
a.btn[href$=".pdf" i],
a.btn[href*="download" i],
.wp-block-button__link[download],
.wp-block-button__link[href$=".pdf" i],
.wp-block-button__link[href*="download" i],
.wp-element-button[download]{
  padding-block:18px !important;
  padding-inline:40px !important;
  font-size:clamp(15px, 1.2vw, 17px) !important;
  font-weight:900 !important;
  min-width: clamp(240px, 62vw, 420px) !important;
}

/* グローバル保険：どこかに残ってる min-width を解除して上の指定に勝たせる */
:is(.btn, .btn-primary, .btn-secondary, .wp-block-button__link, .wp-element-button){
  min-width:0 !important;
}

/* ==== TSUNO: HARD FINAL SIZING PATCH (EOF) ================== */
/* 1) 相談する：横長は維持しつつ “今より約90%” に短縮 */
#service .cards .card .cta :is(a.btn,button.btn,.wp-block-button__link,.wp-element-button){
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important;
  max-width: clamp(300px, 90%, 680px) !important; /* ← 90%基準。上限は680px */
  min-width:0 !important;
  margin-inline:auto !important;
  padding-block:12px !important; /* 相談するは薄めキープ */
  border-radius:999px !important;
}
/* 古い width 指定に勝つ保険（過去の clamp/auto を無効化） */
#service .cards .card .cta .btn{ width:100% !important; min-width:0 !important; }

/* 2) 実績をもっと見る／お問い合わせ／資料DL：少し“太く & 大きく” */
#cases :is(a.btn,.btn,.wp-block-button__link,.wp-element-button),
:is(#contact,section#contact,section[id*="contact" i],section[class*="contact" i],.footer-cta)
  :is(a.btn,.btn,.wp-block-button__link,.wp-element-button),
.btn--download,
a.btn[download], a.btn[href$=".pdf" i], a.btn[href*="download" i],
.wp-block-button__link[download],
.wp-block-button__link[href$=".pdf" i],
.wp-block-button__link[href*="download" i],
.wp-element-button[download]{
  padding-block:16px !important;     /* 高さUP */
  padding-inline:40px !important;    /* 横の余白UP */
  font-size:clamp(15px,1.2vw,17px) !important;
  font-weight:900 !important;
  min-width:clamp(260px, 36vw, 420px) !important; /* 小さすぎ防止 */
}
/* Gutenbergのアウトラインボタンにも太さ適用 */
.wp-block-button.is-style-outline .wp-block-button__link{
  padding-block:16px !important;
}


/* ===== TSUNO: PINPOINT OVERRIDES (put at the very end) ===== */

/* 1) SERVICE「相談する」= 今より約90%の長さに（カード内だけ） */
section#service .cards.cards--square .card .cta > a.btn.btn-secondary.btn-long.btn-grad-strong{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important;
  max-width: clamp(300px, 90%, 560px) !important; /* ← 90% ＋ 上限560px */
  min-width: 0 !important;
  margin-inline:auto !important;
  padding-block:12px !important; /* 薄めキープ */
  border-radius:999px !important;
}

/* 2) CASES「実績をもっと見る」= 太く＆最小幅を確保 */
section#cases a.btn.btn-secondary.btn-grad-strong{
  padding:18px 40px !important;
  font-size:clamp(15px,1.2vw,17px) !important;
  font-weight:900 !important;
  min-width:clamp(280px,36vw,420px) !important;
}

/* 3) お問い合わせ／資料DL（ContactやフッターCTA）= 太く＆最小幅 */
.footer-cta .cta-buttons a,
section#contact a.btn,
section[class*="contact" i] a.btn,
section[id*="contact" i] a.btn{
  padding:18px 40px !important;
  font-size:clamp(15px,1.2vw,17px) !important;
  font-weight:900 !important;
  min-width:clamp(280px,36vw,420px) !important;
}

/* 4) HEROの「資料ダウンロード」= 小さくなった対策として大きめに固定 */
.hero .btn-primary{
  padding:18px 40px !important;
  font-size:clamp(16px,1.6vw,20px) !important;
  min-width:clamp(260px,42vw,380px) !important;
}


/* === INK: bounce overshoot === */
@keyframes ink-bounce {
  0%   { transform: scaleX(0)    skewX(-16deg); }
  80%  { transform: scaleX(1.08) skewX(-16deg); }
  100% { transform: scaleX(1)    skewX(-16deg); }
}
html body #mission .h2::after,
html body #service .h2:nth-of-type(1)::after,
html body #service .h2:nth-of-type(2)::after{
  transform-origin: 0 50% !important;              /* 基点は左のまま */
}
html body #mission .h2.ink-inview::after,
html body #service .h2:nth-of-type(1).ink-inview::after,
html body #service .h2:nth-of-type(2).ink-inview::after{
  animation: ink-bounce .9s cubic-bezier(.2,.65,.2,1) both !important;
}





/* === PCヘッダー：コンテナをブレイクしてロゴを限界まで左へ ================= */
@media (min-width:1025px){
  /* .container を相殺して 100vw に広げ、画面中央に合わせ直す */
  .site-header .container.header-bar{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;        /* ← 左の余白ゼロ */
    /* 右はお好みで調整（完全に端までなら 0） */
    padding-right: clamp(8px, 1.8vw, 24px) !important;
  }

  /* ロゴ周りに仕込まれてる可能性のある余白を全カット */
  .site-header .logo,
  .site-header .logo .custom-logo-link,
  .site-header .logo img{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}




/* === PCヘッダー：ロゴを少しだけ右へ（左パディングを戻す） =============== */
:root{
  /* ← 好みで 8〜40px くらいに調整してOK */
  --hdr-left-pad: clamp(56px, 3.2vw, 68px);
}
@media (min-width:1025px){
  .site-header .container.header-bar{
    /* 先に入れた padding-left:0 を上書き */
    padding-left: var(--hdr-left-pad) !important;
  }
  /* 念のためロゴ側の余白はゼロ維持（左右の効きが混ざらないように） */
  .site-header .logo,
  .site-header .logo .custom-logo-link,
  .site-header .logo img{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}



/* === PCメニューの文字を少し大きく（ヘッダー高さも余裕少し） === */
@media (min-width:1025px){
  .site-header{
    /* 以前の --nav-font を上書き */
    --nav-font: clamp(16px, 1.15vw, 18px);
    --nav-pad-y: 12px;  /* 文字が大きくなった分だけ上下パディングを少しだけ増やす */
  }

  /* トップレベル */
  .site-header .gnav > li > a{
    font-size: var(--nav-font) !important;
    line-height: 1.3 !important;
  }

  /* ドロップダウン（必要なら少しだけUP） */
  .site-header .gnav > li .sub-menu a{
    font-size: clamp(14px, 1vw, 16px) !important;
  }

  /* 右端のCTAもバランス調整（任意） */
  .site-header .gnav > li:last-child > a{
    font-size: clamp(15px, 1.1vw, 17px) !important;
    padding-block: 10px !important;
  }
}



/* === PCだけ：メガメニューの「WEBサイト制作」「マーケティング」の文字を大きく === */
@media (min-width: 1025px){
  .site-header .gnav > li.mega > ul.sub-menu > li.thumb-web > a,
  .site-header .gnav > li.mega > ul.sub-menu > li.thumb-mkt > a{
    font-size: clamp(20px, 1.2vw, 24px) !important; /* ←好みで数値調整OK */
    line-height: 1.15 !important;                   /* タイルの高さはそのまま */
    letter-spacing: .02em !important;               /* 読みやすく少し詰める */
  }
}




/* === Mobile Mega: “親の直下”だけ出す／兄弟方向は殺す（FINAL） === */
@media (max-width:1024px){
  /* 兄弟＆差し込みスロットは常に非表示 */
  .site-header .gnav > li.mega.is-open + ul.sub-menu,
  .site-header .gnav > li.mega.is-open + #services-sub-slot,
  .site-header .gnav > #services-sub-slot{
    display: none !important;
  }

  /* 本命：親<li.mega> の “中” のサブメニューだけ表示 */
  .site-header .gnav > li.mega{ position: static !important; }
  .site-header .gnav > li.mega > ul.sub-menu{
    position: static !important;     /* ← 絶対配置を殺す */
    display: none !important;        /* 既定は閉じる */
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{
    display: block !important;       /* ← 開いた時に“直下”だけ出す */
  }

  /* パネルは縦スク可能に（見切れ防止） */
  .site-header .gnav{
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100svh - var(--hdr-h)) !important;
    overflow: auto !important;
  }
  /* もし order を触ってる指定が残っててもリセット */
  .site-header .gnav > *{ order: 0 !important; }
}



/* ===== Mobile nav: 1列固定・折り返し無し・直下表示 ===== */
@media (max-width:1024px){
  .site-header .gnav{
    display:flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;      /* ← 2列化を禁止 */
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: hidden !important;      /* ← 横ズレ防止 */
  }
  .site-header .gnav > li{ width:100% !important; }
  .site-header .gnav > li > a{
    display:block !important;
    width:100% !important;
  }

  /* サービス一覧のサブメニューは“親の直下に100%幅”で出す */
  .site-header .gnav > li.mega{ position:static !important; }
  .site-header .gnav > li.mega > ul.sub-menu{
    position:static !important;
    width:100% !important;
    min-inline-size:0 !important;
    display:none !important;
    margin:8px 0 0 !important;
    box-shadow:none !important;
    transform:none !important;          /* ← 変形でズレないように */
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{
    display:block !important;
  }

  /* 念のため：兄弟側に出す古い指定は封じる */
  .site-header .gnav > li.mega.is-open + ul.sub-menu,
  .site-header .gnav > li.mega.is-open + #services-sub-slot,
  .site-header .gnav > #services-sub-slot{
    display:none !important;
  }
}


/* ===== Mobile nav: ラベル中央寄せ＋短い区切り線 ===== */
@media (max-width:1024px){
  /* 文字は中央に。ボーダー線は消して擬似要素で短い線を描く */
  .site-header .gnav > li > a{
    text-align: center !important;
    border-bottom: 0 !important;         /* ← 端までの線を消す */
    padding: 16px 0 !important;
  }
  .site-header .gnav > li > a::after{
    content: "";
    display: block;
    width: 64%;                           /* ← 線の長さ（お好みで 50–70%） */
    height: 1px;
    margin: clamp(8px,1.8vw,10px) auto 0; /* ← 中央寄せ */
    background: currentColor;             /* 文字色に追従（白） */
    opacity: .28;                         /* 濃さはお好みで */
  }

  /* 「お問い合わせ」の丸ボタンは線ナシ＆中央配置 */
  .site-header .gnav > li:last-child > a{
    align-self: center !important;        /* 左寄せ→中央に */
  }
  .site-header .gnav > li:last-child > a::after{
    content: none !important;             /* 線は出さない */
  }

  /* サービス一覧のタイル内テキストも念のため中央に固定 */
  .site-header .gnav > li.mega > ul.sub-menu > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}


/* override.css の末尾に追加 */
@media (max-width:1024px){
  .site-header .gnav{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;    /* ← wrap を無効化 */
  }
  .site-header .gnav > li{ width:100%; }

  /* サブメニューは“親liの直下”で開閉 */
  .site-header .gnav > li.mega > ul.sub-menu{
    position:static !important;
    display:none !important;
    padding-top:8px;
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{
    display:block !important;
  }

  /* 以前入れていた「+ ul.sub-menu」系（兄弟セレクタ）は不要なので削除 or 放置でもOK、
     ただし勝ってしまうならコメントアウトしてください */
}


/* 保険：旧 overflow:hidden ロックを無効化（iOSでstickyが消えるのを防ぐ） */
html.nav-lock, body.nav-lock { overflow: visible !important; }


/* ==== Mobile nav icon：右端のアイコンを少し小さく ==== */
@media (max-width:1024px){
  .header-bar{ grid-template-columns:auto 1fr auto !important; }
  .nav-toggle{
    order:2; justify-self:end;
    width:54px !important;              /* ← 60px → 54px に */
    height:54px !important;
    margin-right: max(4px, env(safe-area-inset-right)) !important;
  }
  .nav-toggle .b1,
  .nav-toggle .b2,
  .nav-toggle .b3{
    left:11px !important;               /* 線の左右マージン */
    right:11px !important;
    height:3px !important;              /* 線も少し細く */
    border-radius:2px !important;
  }
  .nav-toggle .b1{ top:16px !important; }
  .nav-toggle .b2{ top:27px !important; }
  .nav-toggle .b3{ top:38px !important; bottom:auto !important; }

  /* ×状態の位置合わせ */
  .is-menu-open .nav-toggle .b1{ top:27px !important; transform:rotate(45deg) !important; }
  .is-menu-open .nav-toggle .b2{ opacity:0 !important; }
  .is-menu-open .nav-toggle .b3{ top:27px !important; transform:rotate(-45deg) !important; }
}


/* SP時：li直下でも liの直後でも、is-open なら表示する */
@media (max-width:1024px){
  .site-header .gnav > li.mega.is-open > ul.sub-menu,
  .site-header .gnav > li.mega.is-open + ul.sub-menu{
    display:block !important;
  }
}


/* ==== SPメニュー：直下表示を確定（古い指定に勝つ） ==== */
@media (max-width:1024px){
  .site-header .gnav{
    position: fixed !important;
    top: var(--hdr-h,64px) !important;   /* JSで実寸を注入 */
    left: 0; right: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1001 !important;
    max-height: calc(100svh - var(--hdr-h,64px)) !important;
    overflow: auto !important;           /* ← 最下部でも見える */
  }

  /* 直下の sub-menu だけ出す（display: none の上書き） */
  .site-header .gnav > li.mega > ul.sub-menu{
    position: static !important;
    width: 100% !important;
    margin-top: 8px !important;
    display: none !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{
    display: block !important;
  }

  /* 兄弟UL方式を使っていた過去CSSを無効化（左に飛ぶのを防ぐ） */
  .site-header .gnav > li.mega.is-open + ul.sub-menu{
    display: none !important;
  }
}

/* ==== ハンバーガー：少しだけ小さく＆完全に右端へ ==== */
@media (max-width:1024px){
  .header-bar{ grid-template-columns:auto 1fr auto !important; padding-inline: clamp(4px,1.6vw,10px) !important; }
  .nav-toggle{
    width: 48px !important; height: 48px !important;
    justify-self: end !important; margin-right: 0 !important;
  }
  .nav-toggle .b1,.nav-toggle .b2,.nav-toggle .b3{
    left: 12px; right: 12px; height: 3px; border-radius: 3px;
  }
  .nav-toggle .b1{ top: 14px; }
  .nav-toggle .b2{ top: 22px; }
  .nav-toggle .b3{ top: 30px; }
  .is-menu-open .nav-toggle .b1{ top: 22px; transform: rotate(45deg); }
  .is-menu-open .nav-toggle .b2{ opacity: 0; }
  .is-menu-open .nav-toggle .b3{ top: 22px; transform: rotate(-45deg); }
}



/* ==== SPメニュー：直下表示を確定（古い指定に勝つ） ==== */
@media (max-width:1024px){
  .site-header .gnav{
    position: fixed !important;
    top: var(--hdr-h,64px) !important;   /* JSで実寸を注入 */
    left: 0; right: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1001 !important;
    max-height: calc(100svh - var(--hdr-h,64px)) !important;
    overflow: auto !important;           /* ← 最下部でも見える */
  }

  /* 直下の sub-menu だけ出す（display: none の上書き） */
  .site-header .gnav > li.mega > ul.sub-menu{
    position: static !important;
    width: 100% !important;
    margin-top: 8px !important;
    display: none !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{
    display: block !important;
  }

  /* 兄弟UL方式を使っていた過去CSSを無効化（左に飛ぶのを防ぐ） */
  .site-header .gnav > li.mega.is-open + ul.sub-menu{
    display: none !important;
  }
}

/* ==== ハンバーガー：少しだけ小さく＆完全に右端へ ==== */
@media (max-width:1024px){
  .header-bar{ grid-template-columns:auto 1fr auto !important; padding-inline: clamp(4px,1.6vw,10px) !important; }
  .nav-toggle{
    width: 48px !important; height: 48px !important;
    justify-self: end !important; margin-right: 0 !important;
  }
  .nav-toggle .b1,.nav-toggle .b2,.nav-toggle .b3{
    left: 12px; right: 12px; height: 3px; border-radius: 3px;
  }
  .nav-toggle .b1{ top: 14px; }
  .nav-toggle .b2{ top: 22px; }
  .nav-toggle .b3{ top: 30px; }
  .is-menu-open .nav-toggle .b1{ top: 22px; transform: rotate(45deg); }
  .is-menu-open .nav-toggle .b2{ opacity: 0; }
  .is-menu-open .nav-toggle .b3{ top: 22px; transform: rotate(-45deg); }
}


/* ==== SPメニュー：直下表示を強制（旧CSSを無効化） ==== */
@media (max-width:1024px){
  /* パネルは常にヘッダー直下＋自前スクロール */
  .site-header .gnav{
    position: fixed !important;
    top: var(--hdr-h,64px) !important;
    left: 0; right: 0;
    z-index: 1001 !important;
    max-height: calc(100svh - var(--hdr-h,64px)) !important;
    overflow: auto !important;
  }

  /* 子UL（直下）だけを使う */
  .site-header .gnav > li.mega > ul.sub-menu{
    position: static !important;
    width: 100% !important;
    margin-top: 8px !important;
    display: none !important; /* デフォ閉 */
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{
    display: block !important; /* 開いたときだけ見せる */
  }

  /* ← これが残ってると“左に飛ぶ”。兄弟UL方式は完全停止 */
  .site-header .gnav > li.mega.is-open + ul.sub-menu{
    display: none !important;
  }
}

/* ハンバーガー：少し小さめ＆完全右端 */
@media (max-width:1024px){
  .header-bar{ grid-template-columns:auto 1fr auto !important; padding-inline: clamp(4px,1.6vw,10px) !important; }
  .nav-toggle{
    width: 48px !important; height: 48px !important;
    justify-self: end !important; margin-right: 0 !important;
  }
  .nav-toggle .b1,.nav-toggle .b2,.nav-toggle .b3{
    left: 12px; right: 12px; height: 3px; border-radius: 3px;
  }
  .nav-toggle .b1{ top: 14px; }
  .nav-toggle .b2{ top: 22px; }
  .nav-toggle .b3{ top: 30px; }
  .is-menu-open .nav-toggle .b1{ top: 22px; transform: rotate(45deg); }
  .is-menu-open .nav-toggle .b2{ opacity: 0; }
  .is-menu-open .nav-toggle .b3{ top: 22px; transform: rotate(-45deg); }
}



/* ==== SP：直下表示を強制／兄弟UL方式は完全停止 ==== */
@media (max-width:1024px){
  .site-header .gnav{
    position: fixed !important;
    top: var(--hdr-h,64px) !important;
    left: 0; right: 0;
    z-index: 1001 !important;
    max-height: calc(100svh - var(--hdr-h,64px)) !important;
    overflow: auto !important;
  }
  .site-header .gnav > li.mega > ul.sub-menu{
    position: static !important;
    width: 100% !important;
    margin-top: 8px !important;
    display: none !important; /* デフォ閉 */
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{
    display: block !important;
  }
  /* ← これが残ってると“左へ飛ぶ”。兄弟ULは殺す */
  .site-header .gnav > li.mega.is-open + ul.sub-menu{
    display: none !important;
  }
}

/* ==== PC：ドロップが隠れないように“元の挙動”へ戻す ==== */
@media (min-width:1025px){
  .site-header .gnav{
    position: static !important;
    max-height: none !important;
    overflow: visible !important;  /* ここが重要：PCでクリップさせない */
  }
  /* 既存テーマの hover 表示を活かす（必要最小限） */
  .site-header .gnav > li.mega > ul.sub-menu{
    position: absolute !important;
  }
}