/* =========================
   Base
========================= */
:root{
  --gap: 16px;
  --leftW: 260px;
  --rightW: 260px;
  --pad: 16px;

  --zOverlay: 1000;
  --zDrawer: 1001;
  --zBurger: 1002;
}

body{
  margin: 0;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* デバッグ背景（目視確認用） */
.shellDebug .left  { background: rgba(255, 230, 230, 0.9); }
.shellDebug .main  { background: rgba(230, 255, 230, 0.9); }
.shellDebug .right { background: rgba(230, 230, 255, 0.9); }
.shellDebug .drawer{ background: #fff; }

/* =========================
   3-col shell (PC)
========================= */
.shell{
  display: grid;
  grid-template-columns: var(--leftW) 1fr var(--rightW);
  gap: var(--gap);
  padding: var(--pad);
  max-width: 1200px;        /* ★ 大画面で3カラムが離れないよう制限 */
  margin: 0 auto;           /* ★ 画面中央にまとめる */
}

.leftTitle,.mainTitle,.rightTitle{
  font-size: 12px;
  opacity: .65;
  margin-bottom: 8px;
}

.leftInner, .rightBox{
  padding: 12px;
}
.main{
  padding: 12px;
  min-height: 60vh;
  min-width: 0;          /* ★ グリッド子要素の暗黙min-width:autoを解除 */
}

/* =========================
   Right sidebar content
========================= */
.rightBox{
  border: 1px solid #ddd;
  border-radius: 12px;
}
.social-icons{
  display:flex;
  gap:10px;
  padding: 8px 0 4px;
}
.social-icon{
  display:inline-flex;
  width: 34px;
  height: 34px;
  align-items:center;
  justify-content:center;
  border: 1px solid #ddd;
  border-radius: 10px;
  text-decoration:none;
  color:#111;
}
.rightNote{ font-size:12px; opacity:.7; padding-top:8px; }

/* =========================
   Burger / Overlay / Drawer
   ※表示制御は body.is-open のみ
========================= */
.burgerBtn{
  display: none; /* mobileで表示 */
  position: fixed;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid #ccc;
  background: #fff;
  z-index: var(--zBurger, 1002);
}
.burgerBtn span{
  display:block;
  height:2px;
  margin:6px 10px;
  background:#111;
}

.overlay{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: var(--zOverlay);
}

.drawer{
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  width: 280px;
  background: #fff;          /* ★ Session20修正復元: 透過防止 */
  transform: translateX(-110%);
  transition: transform .18s ease;
  z-index: var(--zDrawer);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow: auto;
}
.drawerHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #eee;
}
.drawerTitle{ font-weight: 700; }
.drawerClose{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 20px;
}
.drawerNav{ padding: 12px; }

/* open */
body.is-open .overlay{ display:block; }
body.is-open .drawer{ transform: translateX(0); }

/* =========================
   Tablet (<= 1023px)
   - 右を落とす（まず安定させる）
========================= */
@media (max-width: 1023px){
  .shell{
    grid-template-columns: var(--leftW) 1fr;
  }
  .right{
    display:block;
    grid-column: 1 / -1;
  }
}

/* =========================
   Mobile (<= 767px)
   - 左を隠してドロワーに寄せる
========================= */
@media (max-width: 767px){
  .shell{
    grid-template-columns: 1fr;
    padding-top: 64px; /* burger分 */
  }
  .left{ display:none; }
  .burgerBtn{ display:block; }
  .right{ display:block; }
}

/* =========================
   Small phone (<= 389px) 例: 360/375/390
   - ドロワー幅を少し狭く
========================= */
@media (max-width: 389px){
  .drawer{ width: 260px; }
}

/* =========================
   iPhone Pro/Pro Max級 (>= 430px) を意識
   - 430px前後は少し余裕があるのでドロワー幅を戻す
   ※ 430pxちょうどは Pro Max系のCSSピクセル幅でよく見かけます
========================= */
@media (min-width: 430px) and (max-width: 767px){
  .drawer{ width: 300px; }
}

/* MAINを「本文 + 下バー」に分割（安定版） */
#main.main{
  display:flex;
  flex-direction:column;
  min-height: 60vh;      /* 既存の最小高に合わせる。100vhはやりすぎ */
}

/* 本文部分：伸びる */
#main .mainBody{
  flex: 1 1 auto;
  min-height: 0;
}

/* 下バー：中央下に張り付き */
#main .mainFoot{
  position: sticky;
  bottom: var(--pad);
  z-index: 50;               /* 右サイン等よりは下でOK、burgerよりは低い */
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(4px);
}

/* =========================
   NAVI (index22寄せ / CSS-only)
   - underline無し
   - hover: 文字色＋背景色
   - 親項目間にスペース
   - 親項目名の下に赤い仕切り線（#dd3333）
========================= */

:root{
  /* index22と同じ赤をここでも使う（style.cssと一致） */
  --navi-primary: #dd3333;
}

.leftInner{
  background: #fafafa;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  padding: 1.5rem 1rem;              /* ★ design寄せ (元12px → 上下24px 左右16px) */
}

.mls-navi{
  font-size: 14px;
  line-height: 1.6;                   /* ★ design: body 1.7寄せ (元1.45) */
}

/* reset */
.mls-navi__list{ list-style:none; margin:0; padding:0; }
.mls-navi__item{ margin:0; padding:0; }

/* link base（下線なし） */
.mls-navi__link{
  display:block;
  text-decoration: none;
  color: #666;              /* index22: text-light 相当 */
  border-radius: 6px;       /* index22の丸み寄せ */
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

/* hover/focus（下線なし、色＋背景） */
.mls-navi__link:hover,
.mls-navi__link:focus-visible{
  text-decoration:none;
  background: rgba(221, 51, 51, 0.10);  /* index22と同じ薄赤背景 */
  color: var(--navi-primary);
  outline: none;
}

/* 親（depth-0）：見出し扱い */
.mls-navi__depth-0 > .mls-navi__item{
  margin-bottom: 2rem;     /* ★ design: sidebar-nav-section margin-bottom: 2rem */
}

/* 親リンク：太字＋「下に赤ライン」 */
.mls-navi__depth-0 > .mls-navi__item > .mls-navi__link{
  font-weight: 800;
  font-size: 1rem;                    /* ★ design */
  letter-spacing: 0.05em;             /* ★ design */
  color: #333;             /* index22: text-color 相当 */
  padding: 0 4px 0.5rem;              /* ★ design: padding-bottom: 0.5rem */
  border-radius: 0;        /* 親見出しは角丸しない方が締まる */
  background: transparent; /* 見出しは背景を付けない */
}

/* 親見出しの hover は「色だけ」変わる（背景は付けない） */
.mls-navi__depth-0 > .mls-navi__item > .mls-navi__link:hover,
.mls-navi__depth-0 > .mls-navi__item > .mls-navi__link:focus-visible{
  background: transparent;
  color: var(--navi-primary);
  padding-left: 4px; /* 動かさないならこの行と削除OK */
}

/* 親項目名の下に赤い仕切り線 */
.mls-navi__depth-0 > .mls-navi__item > .mls-navi__link::after{
  content:"";
  display:block;
  margin-top: 8px;
  border-bottom: 3px solid var(--navi-primary); /* index22と同じ太さ */
  opacity: 1;
}

/* 見出しのみ（is_clickable=0）— URL空欄 or クリック不可の項目 */
.mls-navi__label{
  cursor: default;
}
.mls-navi__label:hover,
.mls-navi__label:focus-visible{
  background: transparent;
  color: inherit;
  padding-left: inherit;
}
/* depth指定セレクタより高い優先度で上書き（specificity 0,4,0） */
.mls-navi__item > .mls-navi__link.mls-navi__label:hover,
.mls-navi__item > .mls-navi__link.mls-navi__label:focus-visible{
  background: transparent;
  color: inherit;
  padding-left: inherit;
  font-weight: inherit;
  cursor: default;
}

/* 子（depth-1） */
.mls-navi__depth-1{
  margin-top: 0.75rem;                  /* ★ design: margin-bottom: 0.75rem */
  margin-left: 0;          /* index22は「セクション内リスト」なのでインデント弱め */
}
.mls-navi__depth-1 > .mls-navi__item > .mls-navi__link{
  font-weight: 600;
  font-size: 0.9rem;       /* index22寄せ */
  letter-spacing: 0.02em;             /* ★ design */
  padding: 0.7rem 0.75rem; /* index22寄せ */
  color: #666;
  border-radius: 6px;
}

/* 子 hover：index22の「左に寄せる」漂出も再現 */
.mls-navi__depth-1 > .mls-navi__item > .mls-navi__link:hover,
.mls-navi__depth-1 > .mls-navi__item > .mls-navi__link:focus-visible{
  padding-left: 1.2rem;    /* index22寄せ */
  font-weight: 700;                   /* ★ design: hover時太字 */
}

/* =========================
   NAVI Logo (icon + text, index22 size)
========================= */

.naviLogo{
  display: flex;
  align-items: center;
  gap: 0.5rem;                       /* ★ design: 0.5rem */
  text-decoration: none;             /* <a> 化対応 */

  padding: 10px 4px 1rem;
  margin-bottom: 2.5rem;                 /* ★ design: ~3rem logo-section */

  height: 80px;                      /* ★ design: 80px */
}

/* 左の丸いアイコン（主役） */
.naviLogoIcon{
  height: 72px;                      /* ★ design比例 */
  width: auto;
  flex: 0 0 auto;
}

/* 右の文字ロゴ */
.naviLogoText{
  height: 44px;                      /* ★ design: 80%的な比率 */
  width: auto;
  flex: 0 0 auto;
}

/* 念のための安全策 */
.naviLogo img{
  max-height: 100%;
  display: block;
}

/* 中央本文の最大幅を制限（大画面で広がりすぎない） */
#main .mainBody{
  max-width: min(640px, 100%);   /* ★ index.php(500px)とのバランスを考慮し縮小 */
  margin: 0 auto;
  overflow-x: clip;        /* ★ auto→clip: スクロールは .mls-tableScroll に委譲 */
}

/* =========================
   Session23 fixes (2026-02-16)
   - ゴーストバー防止
   - サブページ モバイルロゴ
   - ドロワー CHU-NETリンク
========================= */

/* ★ ゴーストバー防止: 中身が空なら mainFoot を完全非表示 */
#main .mainFoot:empty {
  display: none;
}

/* ★ サブページ モバイルロゴ（≤767pxのみ） */
.mobileLogo {
  display: none;           /* PC: 非表示（.leftのナビロゴが担当） */
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: var(--zBurger, 1002);  /* バーガーと同じ層 */
  line-height: 0;          /* img下余白除去 */
}
.mobileLogoImg {
  height: 40px;            /* バーガーボタン(46px)とバランスを取る */
  width: auto;
}

@media (max-width: 767px) {
  .mobileLogo {
    display: block;        /* モバイルで表示 */
  }
}

/* ★ ドロワー内 CHU-NETログインリンク */
.drawer-login {
  display: block;
  margin-top: 1.5rem;
  padding: 14px 16px;
  background: #dd3333;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  text-align: center;
  transition: background .2s;
}
.drawer-login:hover {
  background: #c92121;
}
.drawer-login-text {
  display: block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
}
.drawer-login-sub {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.85;
}