/*
 Theme Name: Cocoon Child (Neppa KB)
 Template: cocoon-master
 Version: 1.0
*/



/* 技ページのタグ非表示 */
.single-waza .tag {
  display: none !important;
}

/* 基本情報テーブルの調整 */
.waza-spec {
  width: 100%;
  max-width: 500px;
  margin: 0 0 0 20px;
  border-collapse: collapse;
}

.waza-spec th,
.waza-spec td {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
}

.waza-spec th {
  width: 35%;
  text-align: left;
  white-space: nowrap;
}

.waza-spec td {
  width: 65%;
}

/* タイトル下のピル（両手技・シングル 等）を非表示 */
.waza-single .ws-meta { display: none !important; }

/* WPタグ表示も技ページでは消す */
.waza-single .entry-tags,
.waza-single .tag,
.waza-single .post-tag,
.waza-single .tagcloud { display: none !important; }


/* タイトル・キャッチコピー・ナビを同じフォントに統一 */
.site-tagline-center, /* キャッチコピー */
.kb-bar .kb-link { /* ナビリンク */
  font-family: "Reggae One", cursive !important; /* タイトルと同じフォントを継承 */
	 font-size: 20px; 
}



/* サイトタイトルに Reggae One を適用（Cocoonの複数パターンを網羅） */
/* ===== タイトルのサイズを強制上書き（Cocoon全パターン網羅） ===== */
#header .logo .site-name-text,
#header .logo .site-name-text-link,
#header .logo .site-name a,
#header .logo .site-title a,
.l-header .logo .site-name-text,
.l-header .logo .site-name-text-link,
.l-header .logo .site-name a,
.l-header .logo .site-title a {
  font-family: "Reggae One", cursive !important;
  font-weight: 500 !important;
  font-size: clamp(25px, 5.0vw, 50px) !important; /* ←好みで調整 */
  line-height: 1.06 !important;
  display: inline-block !important;
  text-align: center !important;
}

/* 親ブロック側のサイズ/スケール/幅制約を解除 */
#header .logo,
.l-header .logo {
  transform: none !important;
  max-width: none !important;
  width: 100% !important;
  text-align: center !important;
}
#header .logo .site-name,
#header .logo .site-title,
.l-header .logo .site-name,
.l-header .logo .site-title {
  font-size: inherit !important;   /* 親が勝っている場合に継承 */
}

/* ---- 共通ベース ---- */
html, body { height: 100%; margin: 0; padding: 0; }

/* body を縦フレックス親に */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Cocoonの最上位ラッパー(#container)もフレックス親にして中身を縦積み */
#container {
  flex: 1 0 auto;              /* body内で残り高さを受け取る */
  display: flex;
  flex-direction: column;
  min-height: inherit;         /* 100vh を引き継ぐ */
}

/* メイン領域に伸びてもらう（存在するものが効けばOK） */
#wrap,
#contents,
#content,
#main,
.site-main,
.l-main,
.content {
  flex: 1 0 auto;
}

/* フッターは普通のブロックでOK（押し下げは上の flex:1 が担当） */
#footer, .l-footer, .footer { flex: 0 0 auto; }


/* ===== タイトル直下のタブ（和風） ===== */
.kb-tabs{
  background: var(--wafu-bg);
  border-bottom: 1px solid var(--wafu-line);
  margin-top: 6px;           /* タイトルとの間 */
}
.kb-tabs__inner{
  max-width: 1100px;         /* サイト幅に合わせて調整 */
  margin: 0 auto;
  padding: 8px 12px 0;
  display: flex;
  gap: 10px;
  justify-content: center;   /* 中央寄せ */
  flex-wrap: wrap;
}
.kb-tab{
  display: inline-block;
  padding: 8px 14px;
  background: var(--wafu-paper);
  border: 1px solid var(--wafu-line);
  border-bottom-color: transparent;
  border-radius: 10px 10px 0 0;
  color: var(--wafu-ink);
  text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.kb-tab:hover{
  background: #fff;
  color: var(--wafu-deepgreen);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--wafu-shadow);
}
.kb-tab.is-active{
  background: #fff;
  color: var(--wafu-deepgreen);
  font-weight: 700;
  border-color: var(--wafu-deepgreen) var(--wafu-deepgreen) transparent var(--wafu-deepgreen);
}

/* モバイル調整 */
@media (max-width: 768px){
  .kb-tabs__inner{ gap: 6px; padding-top: 6px; }
  .kb-tab{ padding: 7px 12px; border-radius: 8px 8px 0 0; }
}


/* ===== Mercari風ピルナビ（タイトル直下） ===== */
.kb-bar{
  background: var(--wafu-bg);
  border-bottom: 1px solid var(--wafu-line);
  margin-top: 6px; /* タイトルとの間 */
}
.kb-bar__scroll{
  max-width: 1100px; margin: 0 auto;
  padding: 10px 12px;
  display: flex; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.kb-bar__scroll::-webkit-scrollbar{ height: 6px; }
.kb-bar__scroll::-webkit-scrollbar-thumb{
  background: #ddd; border-radius: 999px;
}

/* ピル */
.kb-pill{
  scroll-snap-align: start;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--wafu-line);
  border-radius: 999px;
  background: var(--wafu-paper);
  color: var(--wafu-ink);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  transition: background .15s, color .15s, box-shadow .15s, transform .05s, border-color .15s;
}
.kb-pill:hover{
  background: #fff;
  color: var(--wafu-deepgreen);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.kb-pill.is-active{
  border-color: var(--wafu-deepgreen);
  color: var(--wafu-deepgreen);
  background: #fff;
}

/* モバイル余白調整 */
@media (max-width: 768px){
  .kb-bar__scroll{ padding: 8px 10px; gap: 6px; }
  .kb-pill{ padding: 7px 12px; }
}

/* ===== タイトル直下タブ：追従（sticky）設定 ===== */
/* タブをヘッダー直下で吸着。上に管理バーがある時は高さを自動調整 */
.kb-tabs{
  position: sticky;
  top: var(--kb-stick-top, 0);   /* WP管理バーがある時に上ズレしないようCSS変数で制御 */
  z-index: 1000;                /* カードや広告よりも手前に */
  backdrop-filter: saturate(120%) blur(2px);
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* 管理バーあり（ログイン中） */
body.admin-bar .kb-tabs{ --kb-stick-top: 32px; }
@media (max-width: 782px){           /* 管理バーが高くなるブレークポイント */
  body.admin-bar .kb-tabs{ --kb-stick-top: 46px; }
}

/* 貼り付いた時の視覚フィードバック（JS で .is-stuck を付ける） */
.kb-tabs.is-stuck{
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-bottom-color: rgba(0,0,0,.08);
}

/* タブ行が1行で溢れるときの安全策（横に伸びず折り返し） */
.kb-tabs__inner{
  overflow: visible;  /* 既存のflex-wrapで複数行に自然に折れる */
}

/* もし“上に常時固定ヘッダー”を使う場合は、ここで足してください
.header-fixed .kb-tabs { top: calc(var(--kb-stick-top, 0) + 56px); }
*/




/* ====== 共通ベース（中央寄せ＆幅） ====== */
.kb-bar{
  position: sticky;
  top: var(--kb-stick-top, 0);
  z-index: 1000;
  background: var(--wafu-bg);
  border-bottom: 1px solid var(--wafu-line);
  backdrop-filter: saturate(120%) blur(2px);
  margin-top: 6px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
body.admin-bar .kb-bar{ --kb-stick-top: 32px; }
@media (max-width: 782px){ body.admin-bar .kb-bar{ --kb-stick-top: 46px; } }

.kb-bar.is-stuck{
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-bottom-color: rgba(0,0,0,.08);
}

.kb-bar__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;            /* 折り返してもOK */
}

/* リンク共通 */
.kb-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--wafu-ink);
  font-weight: 600;
  transition: background .15s, color .15s, box-shadow .15s, transform .05s, border-color .15s;
  padding: 8px 14px; /* スタイルごとに上書きあり */
}

/* ====== スタイル 1) ピル（今までの見た目） ====== */
.kb-style--pill .kb-link{
  border: 1px solid var(--wafu-line);
  border-radius: 999px;
  background: var(--wafu-paper);
}
.kb-style--pill .kb-link:hover{
  background:#fff; color: var(--wafu-deepgreen);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.kb-style--pill .kb-link.is-active{
  border-color: var(--wafu-deepgreen);
  color: var(--wafu-deepgreen);
  background:#fff;
}

/* ====== スタイル 2) アンダーライン（メルカリ上部っぽい） ====== */
.kb-style--underline .kb-link{
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 12px;
}
.kb-style--underline .kb-link:hover{
  color: var(--wafu-deepgreen);
  border-bottom-color: var(--wafu-line);
}
.kb-style--underline .kb-link.is-active{
  color: var(--wafu-deepgreen);
  border-bottom-color: var(--wafu-deepgreen);
}

/* ====== スタイル 3) セグメント（カプセル切替） ====== */
.kb-style--segment .kb-bar__inner{
  background: var(--wafu-paper);
  border: 1px solid var(--wafu-line);
  border-radius: 12px;
  padding: 6px;
  gap: 6px;
}
.kb-style--segment .kb-link{
  border-radius: 10px;
  padding: 8px 12px;
}
.kb-style--segment .kb-link:hover{ background:#fff; }
.kb-style--segment .kb-link.is-active{
  background:#fff;
  color: var(--wafu-deepgreen);
  box-shadow: 0 4px 12px rgba(0,0,0,.05) inset;
}

/* ====== 整列オプション ====== */
/* 中央寄せ（均等幅にしない） */
.kb-align--center .kb-bar__inner{ justify-content: center; }

/* 左右にバランス良く配置（端と端にも寄せる） */
.kb-align--spread .kb-bar__inner{ justify-content: space-between; }

/* 各ボタンを同じ幅で均等割り（“バランスよく揃って見える”） */
.kb-align--full .kb-bar__inner{ justify-content: stretch; }
.kb-align--full .kb-link{ flex: 1 1 0; text-align: center; }

/* モバイル微調整 */
@media (max-width: 768px){
  .kb-bar__inner{ padding: 8px 10px; gap: 8px; }
  .kb-style--segment .kb-bar__inner{ padding: 6px; }
  .kb-link{ padding: 8px 12px; }
}


/* === スマホでナビが溢れたときは横スクロールにする === */
@media (max-width: 768px){

  /* 中央寄せ/均等割りの指定をスマホでは無効化して、左→右に並べる */
  .kb-align--center .kb-bar__inner,
  .kb-align--full .kb-bar__inner,
  .kb-align--spread .kb-bar__inner{
    justify-content: flex-start;
  }

  /* 折り返さず1行に。横にスワイプでスクロール */
  .kb-bar__inner{
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 10px;
    /* 端の切れ目を目立たなくするグラデマスク（iOS対応） */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }

  /* リンクは可変幅でOK（均等割りを解除） */
  .kb-link{
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 15px;  /* 文字が大きすぎるときは 14px に調整可 */
  }

  /* 下線スタイルの見た目が崩れないように */
  .kb-style--underline .kb-link{
    border-bottom-width: 2px;
  }

  /* スクロールバーの見た目（任意） */
  .kb-bar__inner::-webkit-scrollbar{ height: 6px; }
  .kb-bar__inner::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.18);
    border-radius: 999px;
  }
}

/* 1) stickyナビの優先度を下げる（スマホ時） */
@media (max-width: 834px){
  .kb-bar{ z-index: 20; }  /* 以前 1000 にしていたなら下げる */
}

/* 2) サイドバーまわりを必ず最前面に */
#navi,
#navi-in,
.menu-close,
.drawer-nav,
.mobile-menu,
.sidebar-menu{
  z-index: 2000 !important;
}

/* 3) サイドバー表示中はナビを“通常フロー”に落とす（保険） */
body.navi-open .kb-bar,
body.drawer-open .kb-bar,
body.menu-open .kb-bar,
body.sidebar-open .kb-bar{
  position: static;   /* stickyを一時解除 */
  z-index: 0;
}

/* ── サイドバーを最前面に出す（Cocoon の代表的な要素を網羅） ── */
#navi,
#navi-in,
.navi,               /* Cocoon のナビ本体 */
.menu-close,         /* 閉じるオーバーレイ */
#navi-overlay,
.drawer-nav,
.mobile-menu,
.sidebar-menu,
.overlay,
#drawer,
#slide-in,
.sp-visible,
.l-drawer,
.l-drawer__inner {
  z-index: 9999 !important;
}

/* ── sticky ナビは通常は下げておく（被り防止） ── */
.kb-bar { z-index: 10; }

/* サイドバー表示中は sticky を一時解除（重なりを根本回避） */
body.menu-open .kb-bar,
body.navi-open .kb-bar,
body.drawer-open .kb-bar,
body.drawer-on  .kb-bar {     /* ← 後述のJSが付ける保険クラス */
  position: static !important;
  z-index: 0 !important;
}

.wz-empty-hint{
  background: var(--wafu-paper);
  border: 1px dashed var(--wafu-line);
  color: #555;
  padding: 16px 18px;
  border-radius: 10px;
  max-width: 780px;
}
/* === タイトル直下の最終確定レイアウト === */

.site-tagline-center{
  text-align:center;
  font-size: 1.05rem;
  color:#4a4a4a;
  margin: 6px auto 8px; /* タイトルとの間 */
  line-height: 1.6;
}

.kb-bar{
  position: static !important;  /* 追従させない */
  margin-top: 6px;              /* キャッチコピーとの間 */
  z-index: 1;
}

/* Cocoonがflexを使っていて order が効いてしまう場合に備えて親も初期化 */
.header-container,
.l-header,
#header,
.header {
  display: block !important;   /* 念のため。Cocoonのflex影響を切る */
	
	/* ヘッダー内の並びを“縦積み＋順序固定”にする */
#header .header-in{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 1) タイトル（ロゴ）を先頭に固定 */
#header .header-in .logo{
  order: 1 !important;
}

/* 2) キャッチコピーを2番目に固定 */
#header .header-in .site-tagline-center{
  order: 2 !important;
  margin: 6px 0 8px !important;
}

/* 3) カスタムナビを3番目に固定 */
#header .header-in .kb-bar{
  order: 3 !important;
  position: static !important;   /* 念のため sticky を無効 */
  margin-top: 6px !important;
  z-index: 1 !important;
}

/* もし親テーマが .header-in の display を上書きする場合に備えて保険 */
.header-in.wrap.cf { display: flex !important; }
}

@media (max-width: 768px) {
  .kb-bar .kb-link {
    font-size: 16px; /* スマホ用に調整 */
  }
}

/* ===== スマホではナビを横スクロールにする ===== */
@media (max-width: 768px){
  /* 行を折り返さず1行に固定して横スクロール */
  .kb-bar__inner{
    display: flex;
    flex-wrap: nowrap;                 /* ← 折り返し禁止 */
    overflow-x: auto;                  /* ← 横スクロールON */
    overscroll-behavior-x: contain;    /* iOSの跳ね返りを抑える */
    -webkit-overflow-scrolling: touch; /* 慣性スクロール */
    gap: 10px;
    padding: 10px 12px;
    /* 端が自然に見えるフェード（iOS対応） */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  /* 各リンクは可変幅（均等割りしない）にしてはみ出しOK */
  .kb-bar .kb-link{
    flex: 0 0 auto;        /* ← 幅は中身に合わせる */
    white-space: nowrap;   /* 折り返しなし */
    font-size: 18px;       /* スマホ時の大きめサイズ（調整可） */
    padding: 8px 14px;
  }

  /* スクロールバーの見た目（任意） */
  .kb-bar__inner::-webkit-scrollbar{ height: 6px; }
  .kb-bar__inner::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.18);
    border-radius: 999px;
  }
}

/* ====== スマホ時：ナビを横スクロールに“強制” ====== */
@media (max-width: 768px){

  /* 親がはみ出しを隠しているとスクロール不可なので可視化 */
  .header-container,
  .header-container-in,
  .kb-bar{
    overflow: visible !important;
  }

  /* ナビの内側：1行固定＋横スクロールを強制 */
  .kb-bar__inner{
    display: flex !important;
    flex-wrap: nowrap !important;          /* ← 折り返し禁止 */
    overflow-x: auto !important;           /* ← 横スクロールON */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 10px 12px;
    /* 端のフェード */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    touch-action: pan-x;                    /* 横スクロールを優先（iOS対策） */
  }

  /* 均等割り等の整列指定を打ち消して左から並べる */
  .kb-align--center .kb-bar__inner,
  .kb-align--full .kb-bar__inner,
  .kb-align--spread .kb-bar__inner{
    justify-content: flex-start !important;
  }

  /* 各リンクは可変幅に（折り返し禁止） */
  .kb-bar .kb-link{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 18px;        /* ここで大きさも調整可 */
    padding: 8px 14px;
  }

  /* スクロールバーの見た目（任意） */
  .kb-bar__inner::-webkit-scrollbar{ height: 6px; }
  .kb-bar__inner::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.18);
    border-radius: 999px;
  }
}

/* ===== スマホ時：ナビを確実に横スクロール化（inline-block方式） ===== */
@media (max-width: 768px){
  /* 祖先で overflow を隠していないか保険 */
  .header-container,
  .header-container-in,
  .kb-bar{
    overflow: visible !important;
  }

  /* フレックスの影響を断ち切り、横スクロール可能に */
  .kb-bar__inner{
    display: block !important;                /* ← flexをやめる */
    white-space: nowrap !important;           /* ← 改行させない */
    overflow-x: auto !important;              /* ← 横スクロールON */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;        /* ← iOS慣性 */
    padding: 10px 12px !important;
    gap: 0 !important;                        /* flex-gap無効のため */
    scroll-snap-type: x proximity;
  }

  /* 各リンクは行内ブロックで横に並べる */
  .kb-bar__inner .kb-link{
    display: inline-block !important;
    white-space: nowrap !important;
    margin-right: 10px;                       /* 擬似gap */
    flex: none !important;                    /* 念のため無効化 */
    font-size: 18px;                          /* ←大きくする */
    padding: 8px 14px;
    vertical-align: top;
  }

  /* 端のフェード（任意） */
  .kb-bar__inner{
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  /* スクロールバー見た目（任意） */
  .kb-bar__inner::-webkit-scrollbar{ height: 6px; }
  .kb-bar__inner::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 999px; }
}

/* === ナビだけ横スクロール（確実版）=== */
/* 祖先ははみ出しを隠さない */
.header-container,
.header-container-in,
#header,
.kb-bar {
  overflow: visible !important;
}

/* 枠は通常フロー。スクロールは内側だけ */
.kb-bar {
  position: static !important;
  width: 100% !important;
}

/* 内側を “1行固定 + 横スクロール” に強制 */
@media (max-width: 768px){
  .kb-bar__inner{
    display: flex !important;
/*     flex-wrap: nowrap !important;      /* 改行禁止 */ */
    overflow-x: auto !important;       /* 横スクロール */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch; /* iOS慣性 */
    gap: 10px !important;
    padding: 10px 12px !important;
    scroll-snap-type: x proximity;
    /* 端フェード（任意） */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important;
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important;
  }
  /* 各リンクは可変幅。均等割り・折返し無効 */
  .kb-bar__inner .kb-link{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
  }

  /* “中央寄せ/均等割り” 指定をスマホでは打ち消す */
  .kb-align--center .kb-bar__inner,
  .kb-align--full   .kb-bar__inner,
  .kb-align--spread .kb-bar__inner{
    justify-content: flex-start !important;
  }
}

/* === ナビとキャッチコピーのフォントサイズ調整 === */

/* ナビゲーションバー（PC用） */
.kb-bar .kb-link {
  font-size: 18px !important; /* ←今20pxくらいなので少し下げる */
}

/* ナビゲーションバー（スマホ用） */
@media (max-width: 768px) {
  .kb-bar .kb-link {
    font-size: 15px !important; /* ←スマホではもう少し小さく */
  }
}

/* キャッチフレーズ */
.site-tagline-center {
  font-size: 0.9rem !important; /* 今より少し小さめ */
  color: #555;                  /* 見やすい落ち着いた色 */
  margin: 4px auto 6px !important; /* タイトルとの間隔も少し詰める */
}

/* --- スマホでは既存のナビ (.kb-bar) を隠す --- */
@media (max-width: 768px){
  .kb-bar{ display: none !important; }
}

/* --- ハンバーガーボタン --- */
.kb-hamburger{
  position: absolute;
  right: 12px;
  top: 10px;
  width: 42px; height: 42px;
  display: none;                 /* PCでは非表示 */
  align-items: center; justify-content: center;
  border: 1px solid var(--wafu-line);
  border-radius: 10px;
  background: var(--wafu-paper);
  z-index: 10010;
}
.kb-hamburger span{
  display: block; width: 22px; height: 2px; background: #333; margin: 3px 0;
}
@media (max-width: 768px){
  .kb-hamburger{ display: inline-flex; }
  /* 親が相対配置でないと right/top が効かないので保険 */
  #header, .header-in{ position: relative; }
}

/* --- モバイルメニュー本体 --- */
.kb-mobile-menu{
  position: fixed; inset: 0 0 0 auto;   /* 右側から出す */
  width: min(82vw, 360px);
  transform: translateX(100%);
  transition: transform .25s ease;
  background: #fff;
  z-index: 10020;
  box-shadow: -12px 0 30px rgba(0,0,0,.14);
}
.kb-mobile-menu__inner{
  padding: 16px 16px 24px;
}
.kb-m-link{
  display: block;
  padding: 14px 10px;
  border-bottom: 1px solid #eee;
  color: #222; text-decoration: none; font-weight: 600;
}
.kb-menu-close{
  display: inline-block;
  font-size: 22px; line-height: 1;
  border: 1px solid #ddd; border-radius: 8px;
  background: #fafafa; padding: 6px 10px; margin-bottom: 8px;
}

/* --- 背景の半透明幕 --- */
.kb-menu-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 10015;
  opacity: 0; transition: opacity .2s ease;
}

/* --- オープン時の状態 --- */
body.kb-menu-open{
  overflow: hidden; /* 背景スクロール防止 */
}
body.kb-menu-open .kb-mobile-menu{
  transform: translateX(0);
}
body.kb-menu-open .kb-menu-backdrop{
  opacity: 1;
}

/* PCではメニューUIを完全に無効化 */
@media (min-width: 769px){
  .kb-mobile-menu, .kb-menu-backdrop{ display:none !important; }
}

/* ============ ハンバーガー ============ */
.kb-hamburger{
  display:none;                     /* PCは非表示 */
  position:absolute;
  right:12px;                       /* タイトル右側に配置 */
  top:50%;
  transform: translateY(-50%);
  width:40px; height:40px;
  padding:0; border:0; background:transparent;
  color:#333; cursor:pointer;
}
.kb-hamburger svg{ width:26px; height:26px; }

/* ============ ドロワー ============ */
.kb-drawer{
  position:fixed; inset:0;
  background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:4000;
}
.kb-drawer.is-open{ opacity:1; pointer-events:auto; }

.kb-drawer__panel{
  position:absolute; top:0; right:0; height:100%;
  width:86vw; max-width:420px;
  background:#fff;
  transform:translateX(100%);
  transition:transform .25s ease;
  padding:18px 16px 24px;
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
}
.kb-drawer.is-open .kb-drawer__panel{ transform:none; }

.kb-drawer__close{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:#333; cursor:pointer;
  margin:-4px 0 6px -4px;
}
.kb-drawer__close svg{ width:24px; height:24px; }

/* モバイルメニューの “ホームのタブと同じ雰囲気（下線）” */
.kb-drawer__nav{
  margin-top:6px;
  display:flex; flex-direction:column; gap:4px;
}
.kb-drawer__link{
  font-family: "Reggae One", cursive;
  font-size: 20px;
  text-decoration:none;
  color:#222;
  padding:14px 6px 12px;
  border-bottom: 2px solid #eee;      /* 下線 */
  letter-spacing:.02em;
}
.kb-drawer__link:hover{
  color: var(--wafu-deepgreen);
  border-bottom-color: var(--wafu-line);
}
.kb-drawer__link.is-active{
  color: var(--wafu-deepgreen);
  border-bottom-color: var(--wafu-deepgreen);
}

/* ドロワー表示中は背面スクロール禁止 */
body.kb-drawer-open{ overflow:hidden; }

/* ============ 表示切り替え（ブレークポイント） ============ */
/* モバイル：ハンバーガー表示、デスクトップナビは非表示 */
@media (max-width: 834px){
  .kb-hamburger{ display:inline-flex; }
  .kb-bar{ display:none !important; }           /* 既存の横並びナビを隠す */
  /* タイトルとの位置関係が崩れる場合はここで微調整 */
  #header .header-in{ position:relative; }
}

/* モバイルだけキャッチフレーズ非表示 */
@media (max-width: 768px) {
  .site-tagline-center {
    display: none !important;
  }
}

/* 道場についてのページだけ全体をタイトルと同じフォントに */
.page-id-418 {
  font-family: "Reggae One", cursive !important;
	font-weight: 100 ;
}

/* PCでもナビを1行固定・中央寄せにして崩れ防止（長い文言でもOK） */
@media (min-width: 769px){
  .kb-bar__inner{
    flex-wrap: nowrap !important;        /* ← 折り返し禁止 */
    justify-content: center !important;  /* ← 中央寄せ */
    overflow-x: auto;                    /* ← 万一狭い画面でも横スクロールで逃がす */
    -webkit-overflow-scrolling: touch;
    gap: 12px;                           /* 余白は少しだけ確保（お好みで） */
    padding: 10px 12px;
  }
  .kb-bar .kb-link{
    flex: 0 0 auto;                      /* 可変幅のまま1行に並べる */
    line-height: 1;                      /* ベースライン揃え */
    align-items: center;                 /* 縦位置を中央に */
    padding: 8px 12px;                   /* 文字が増えても高さが暴れない */
    font-size: 17px;                     /* （任意）PC時フォント少し抑える */
  }
}

/* 下線スタイルの見た目を安定させる（任意） */
.kb-style--underline .kb-link{
  border-bottom-width: 2px;
  padding-bottom: 10px;                  /* 下線との距離を一定に */
}

/* PCナビ：長い項目が来たら自然に折り返す */
@media (min-width: 769px){
  .kb-bar__inner{
    flex-wrap: wrap !important;   /* ← ここをwrapに */
    gap: 16px;                    /* ちょい詰め */
  }
  .kb-bar .kb-link{
    white-space: normal !important;  /* ← 折り返し許可 */
    height: auto;                     /* 固定高さを解除 */
    padding: 8px 12px !important;     /* 行が増えても窮屈に見えないように */
  }
}

/* === PCナビずれ防止（長い文言でも1行固定 + 中央寄せ）=== */
@media (min-width: 769px){
  .kb-bar__inner{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;   /* ← 折り返し禁止 */
    gap: 18px !important;
    overflow-x: auto;               /* 画面が狭いPCでも横スクロールで逃がす */
    -webkit-overflow-scrolling: touch;
  }
  .kb-bar .kb-link{
    display: flex !important;
    align-items: center !important;
    height: 48px !important;        /* 全部同じ高さに */
    line-height: 1.2 !important;
    white-space: nowrap !important; /* 途中改行させない */
    padding: 0 14px !important;     /* 高さ固定のため上下の余白は0 */
  }
  /* 下線スタイルの下線位置が暴れないように */
  .kb-style--underline .kb-link{
    border-bottom-width: 2px !important;
    padding-bottom: 10px !important;
  }
}

/* ドロワーのタップ無効化を防ぐ＆下端の安全域 */
.kb-drawer__panel{
  overflow-y: auto;                       /* 中身をスクロール */
  padding-bottom: max(24px, env(safe-area-inset-bottom)); /* iOS下端の被り回避 */
}
.kb-drawer__link{
  display: block;
  position: relative;
  pointer-events: auto !important;        /* 何かに上書きされていても有効化 */
  z-index: 1;                             /* 背景や罫線に負けないように */
}

/* ===== Home Hero (front page) ===== */
.home-hero{
  background: var(--wafu-bg, #f6f1e9);
  border-bottom: 1px solid var(--wafu-line, #e6dfd5);
}
.home-hero__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 30px;
  text-align: center;
}
.home-hero__title{
  font-family: "Reggae One", cursive;
  font-size: clamp(22px, 4.6vw, 40px);
  line-height: 1.15;
  margin: 0 0 8px;
}
.home-hero__lead{
  font-size: clamp(15px, 2.8vw, 18px);
  color: #444;
  margin: 0 auto 18px;
}
.home-hero__lead .nowrap{ white-space: nowrap; }

.home-hero__cta{ margin: 10px 0 16px; }

/* Button */
.kb-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.kb-btn--primary{
  background: #164e3f; color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.kb-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

/* ポイントの箇条書き（任意） */
/* ホームのポイントをリスト風に */
.home-hero__points{
  list-style: none;
  margin: 32px auto 0;       /* 上の見出しとの距離を広めに */
  padding: 0;
  max-width: 720px;          /* 横幅も少し広め */
}

.home-hero__points li{
  border-left: 4px solid #164e3f; /* 道場っぽい柱 */
  padding: 16px 18px;             /* 中の余白をしっかり */
  margin: 18px 0;                 /* 各リスト間にゆとり */
  background: #fffefb;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;               /* 行間も広げる */
  box-shadow: 0 3px 8px rgba(0,0,0,.06);
  border-radius: 6px;             /* 角をほんのり丸く */
}

/* モバイル微調整 */
@media (max-width: 768px){
  .home-hero__inner{ padding: 24px 14px 26px; }
}

/* 技データベース（wazaカテゴリー）のみ中央寄せ＆幅制限 */
body.category-waza #main {
  max-width: 1100px;   /* 全体の幅 */
  margin: 0 auto;      /* 中央寄せ */
  padding: 0 20px;     /* 左右余白 */
  box-sizing: border-box;
}

/* 検索フォームのボックスを中央に */
body.category-waza .entry-content {
  max-width: 700px;   /* ← ここを調整（例: 600〜750pxくらい好みで） */
  margin: 0 auto 2em auto;
}

/* カード一覧も中央に寄せて横幅を調整 */
body.category-waza .entry-card-wrap {
  max-width: 1000px;
  margin: 0 auto;
}