/* ============================ */
/* Sidebar - BowLink */
/* ============================ */

#sidebar{
  position:fixed; top:0; left:-300px; width:250px; bottom:0;
  padding:60px 20px calc(56px + env(safe-area-inset-bottom));
  background:#000000; color:#E5E7EB; text-align:left;
  box-shadow:4px 0 15px rgba(0,0,0,.6);
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  transition:left .3s ease, background .3s ease; z-index:2000;
  border-right:1px solid rgba(255,255,255,.08);
}
#sidebar.active{ left:0; }
#sidebar::after{ content:""; display:block; height:16px; }

/* メニュー */
.sidebar-menu{ padding:0; margin:0; list-style:none; }
.sidebar-menu li{
  display:block; /* flexからblockに変更してaタグが全領域をカバー */
  padding:0; 
  border-radius:12px;
  color:#E5E7EB; 
  font-size:16px; 
  font-weight:500;
  transition:background .25s, color .2s;
}
.sidebar-menu li:hover{ 
  background:rgba(0,229,255,.08); 
  color:#fff; 
}
.sidebar-menu li:hover a{
  color:#fff;
}

.sidebar-menu li img {
  width:22px;
  height:22px;
  margin-right:10px;
  opacity:.9;
  transition:filter .3s;
  filter: brightness(2.5) contrast(1.2);
  flex-shrink: 0;
}

.sidebar-menu li:hover img{ filter:drop-shadow(0 0 6px #00e5ff); }
.sidebar-menu li span{ 
  flex:1; 
  text-align:left; 
  }
.sidebar-menu li a{ 
  display:flex; 
  align-items:center; 
  justify-content:flex-start; 
  width:100%; 
  min-height: 100%; /* liの高さを確実にカバー */
  padding:12px 14px; /* liのpaddingをaタグに移動 */
  color:inherit; 
  text-decoration:none;
  cursor: pointer; /* カーソルをポインターに */
  position: relative; /* ::before疑似要素の基準点 */
  z-index: 2001; /* サイドバー(2000)とオーバーレイ(1999)より上に表示 */
  -webkit-tap-highlight-color: transparent; /* モバイルでのタップハイライトを無効化 */
  box-sizing: border-box; /* paddingを含めたサイズ計算 */
  transition: transform .2s ease, color .2s; /* トランジションを追加 */
  border-radius: 12px; /* liのborder-radiusを継承 */
  pointer-events: auto !important; /* クリックイベントを確実に有効化 */
}
.sidebar-menu li a:hover {
  transform: translateX(4px); /* hover時の移動をaタグに適用 */
}


/* バナー共通 */
.sidebar-banner {
  position: relative;
  margin: 0 0 16px;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.sidebar-banner-featured {
  margin-bottom: 20px;
}

.sidebar-banner-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  text-indent: -9999px;
  background: transparent;
  max-width: 100%;
}

/* バナー内のリンクと画像を親要素の幅に合わせる */
.sidebar-banner a {
  max-width: 100%;
  display: block;
}


/* バナー画像：a直下のimgだけを対象にする（1x1トラッキングは除外） */
.sidebar-banner img:not([width="1"]):not([height="1"]){
  width:100%; 
  max-width: 100%;
  height:auto; 
  display:block;
  border-radius:12px; 
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:transform .3s ease, box-shadow .3s ease;
}

.sidebar-banner a:hover > img:not([width="1"]):not([height="1"]),
.sidebar-banner:hover img:not([width="1"]):not([height="1"]){ 
  transform:scale(1.03); 
  box-shadow:0 8px 24px rgba(0,229,255,.2);
}

/* 1x1 トラッキング画像は表示しない */
.sidebar-banner img[width="1"][height="1"],
.sidebar-banner img[width="1"][height="1"][alt]{
  display:none !important;
}

/* 動画バナー */
.sidebar-banner video{
  display:block; width:100%; height:auto; object-fit:cover;
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:transform .3s ease;
}
/* 小画面では動画の見切れ対策 */
@media (max-width: 720px){
  .sidebar-banner video{ max-height:180px; }
}
/* 動画のフォールバック画像だけ非表示 */
.sidebar-banner video + img{ display:none; }

/* スクロールバー */
#sidebar::-webkit-scrollbar{ width:8px; }
#sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:10px; }
#sidebar::-webkit-scrollbar-track{ background:transparent; }

/* Logo */
#sidebar .bl-logo{
  display:block;
  padding:6px 12px;        /* 余白を最小化 */
  margin:6px 0;            /* 上下のマージンも詰める */
  border-bottom:1px solid rgba(255,255,255,.12);
  text-decoration:none;
}
#sidebar .bl-mark{ display:block; width:180px; height:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
#sidebar .bl-word{
  font:800 22px/1.1 "Outfit","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.5px; fill:url(#bl-grad); paint-order:stroke; stroke:rgba(0,0,0,.7); stroke-width:1.5px;
}
#sidebar .bl-logo:hover .bl-mark{ filter:drop-shadow(0 0 14px rgba(0,229,255,.25)); transform:translateX(2px); transition:.2s ease; }
#sidebar .bl-logo circle{ fill:url(#bl-grad); filter:drop-shadow(0 0 6px rgba(0,229,255,.6)); }
#sidebar .bl-logo .bl-mark path[stroke="#0B1A2A"]{ stroke:#E5E7EB; filter:drop-shadow(0 0 4px rgba(255,255,255,.3)); }

/* Toggle Button */
#menuToggle{
  position:fixed;
  top:15px;
  left:15px;
  width:50px;
  height:50px;
  border:none;
  border-radius:12px;
  background:rgba(18, 75, 135, 0.9);
  backdrop-filter: blur(10px);
  box-shadow:0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
  z-index:2100;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:all 0.3s ease;
}

#menuToggle:hover{
  background:rgba(18, 75, 135, 1);
  box-shadow:0 6px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,229,255,0.3);
  transform:scale(1.05);
}

#menuToggle.active{
  background:rgba(0, 0, 0, 0.6);
  border:1px solid rgba(255,255,255,0.2);
}

#menuToggle.active:hover{
  background:rgba(0, 0, 0, 0.8);
}

#menuToggle span{
  display:block;
  width:26px;
  height:3px;
  border-radius:2px;
  background:#fff;
  transition:transform .35s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity .25s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

#menuToggle.active span:nth-child(1){ 
  transform:translateY(8px) rotate(45deg); 
}
#menuToggle.active span:nth-child(2){ 
  opacity:0; 
  transform:scaleX(0);
}
#menuToggle.active span:nth-child(3){ 
  transform:translateY(-8px) rotate(-45deg); 
}

/* A8の1x1トラッキング画像は非表示にする */
.sidebar-banner img[width="1"][height="1"] {
  display: none !important;
}

/* ユーザー名表示 */
.sidebar-user-greeting {
  padding: 16px 14px;
  margin: 8px 0;
  font-weight: 600;
  font-size: 15px;
  color: #E5E7EB;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%);
  border-left: 3px solid #00E5FF;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

/* 区切り線 */
.sidebar-menu hr {
  margin: 16px 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
}

/* セクションタイトル */
.menu-section-title {
  padding: 12px 14px 8px;
  font-weight: 700;
  font-size: 13px;
  margin-top: 8px;
  color: #00E5FF;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
  position: relative;
}

.menu-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, #00E5FF 0%, #22C55E 100%);
  border-radius: 2px;
  transform: translateY(-50%);
}

/* ネストされたサブメニュー */
.sidebar-submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0 8px 24px;
  border-left: 2px solid rgba(0, 229, 255, 0.2);
  position: relative;
}

.sidebar-submenu::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 229, 255, 0.3) 50%, transparent 100%);
}

.sidebar-submenu li {
  padding: 10px 14px;
  margin: 2px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.25s ease;
}

.sidebar-submenu li:hover {
  background: rgba(0, 229, 255, 0.1);
  transform: translateX(4px);
  padding-left: 18px;
}

.sidebar-submenu li a {
  color: #B0B8C4;
  text-decoration: none;
  display: block;
  transition: color 0.2s;
  cursor: pointer;
  width: 100%;
  padding: 0;
}

.sidebar-submenu li:hover a {
  color: #00E5FF;
}

/* ロゴのマージン調整 */
#sidebar .bl-logo {
  margin-top: 50px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

/* メニューアイテムのアニメーション強化 */
.sidebar-menu li {
  position: relative;
  overflow: hidden; /* border-radiusを維持 */
}

.sidebar-menu li:hover a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.15) 0%, transparent 100%);
  transition: width 0.3s ease;
  pointer-events: none !important; /* クリックイベントを確実にブロックしない */
  z-index: -1; /* リンクの後ろに配置 */
  border-radius: 12px; /* border-radiusを追加 */
}

/* 画面の右側タップで閉じる用オーバーレイ */
#sidebar-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 1999; /* サイドバー(2000)より下、ページより上 */
  backdrop-filter: blur(2px);
}
/* サイドバーが開いている時だけ有効化 */
#sidebar.active ~ #sidebar-overlay{
  opacity: 1;
  pointer-events: auto;
}
/* モバイルではオーバーレイがサイドバーの上に重ならないようにする */
@media (max-width:1024px){
  #sidebar.active ~ #sidebar-overlay{
    left: 250px; /* サイドバーの幅分右にずらす */
  }
}
/* PCでは暗転もクリック遮断も無し */
@media (min-width:1025px){
  #sidebar-overlay{
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #sidebar.active ~ #sidebar-overlay{
    opacity: 0 !important;
    pointer-events: none !important;
  }
}