/* --- リセット・基本 --- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;font-family:'Noto Sans JP',sans-serif;background:#fff;overflow-x:hidden !important}

/* --- レイアウト --- */
.container{display:flex;min-height:100vh;max-width:1380px;margin:0 auto;gap:20px;position: relative; /* 背景をこの中で制御 */
  z-index: 0;         /* 基準を作る */
}
.container-bg{
  position: absolute; /* 絶対位置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/zerofount/index/wallpaper_00018.jpg');
    background-repeat: repeat;       /* 横・縦ともに繰り返す */
    background-size: 30% 30%;       /* 半分サイズで2x2 */
    background-position: top left;  /* 左上基準で繰り返す */
    z-index: 0; /* カードや文字の後ろ */
}
.sidebar{width:240px;flex-shrink:0;background:#fff;border-right:1px solid #ddd;padding:20px 20px 20px 0;overflow:hidden;word-break:break-word}
.sidebar-menu ul{list-style:none}
.sidebar-menu li{margin:8px 0}
.sidebar-menu li a{display:block;padding:6px 10px;color:#333;font-weight:500;text-decoration:none;border-radius:4px;transition:background-color .2s;white-space:normal}
.sidebar-menu li a:hover{background:#eee}
.sidebar-menu li.separator{height:20px}
.main{z-index: 1; flex:1;padding:20px;display:flex;flex-direction:column;gap:20px}

/* --- トップメニュー --- */
.top-menu{display:flex;width:50vw;background:#fff;border-bottom:1px solid #ddd;border-radius:6px;overflow:hidden;margin-bottom:12px}
.top-menu a{flex:1;text-align:center;padding:12px 0;color:#333;font-weight:500;text-decoration:none;position:relative}
.top-menu a.active{font-weight:700}
.top-menu a.active::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background-color:#0c8}

/* --- 検索バー --- */
.search-bar{display:flex;width:100%;max-width:600px;margin-bottom:16px}
.search-bar input{flex:1;padding:10px 16px;border:1px solid #ccc;border-radius:8px 0 0 8px;background:#f5f5f5;color:#333;font-size:14px;transition:all .2s}
.search-bar input:focus{outline:none;border-color:#999;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.search-bar button{padding:10px 20px;border:none;border-radius:0 8px 8px 0;background:#666;color:#fff;font-weight:500;cursor:pointer;transition:background .2s,transform .1s}
.search-bar button:hover{background:#444;transform:translateY(-1px)}


/* --- レスポンシブ共通 --- */
@media(max-width:1024px){
  .container{flex-direction:column}
  .sidebar{width:100%;border-right:none;border-bottom:1px solid #ddd;padding:15px;display:block}
  .main{padding:15px}
  .top-menu{width:100%;flex-wrap:wrap;flex-direction:column;border-radius:6px}
  .top-menu a{padding:10px 0;font-size:13px}
  .search-bar{max-width:100%;flex-direction:column;gap:6px}
  .search-bar input,.search-bar button{width:100%;border-radius:8px;margin-bottom:6px}
}
/* --- サイドバー・トップメニュー・ナビバーの表示/非表示 --- */
@media(max-width:1024px){
  .sidebar{display:none}
  .top-menu{display:none}
}

@media(min-width:1025px){
  nav.navbar{display:none}
}
@media(max-width:1024px){
  nav.navbar{
    position:sticky;
    top:0;
    width:100%;
    background:white;
    border-bottom:1px solid #ddd;
    z-index:1000;
    transition:transform 0.3s ease;
  }
  nav.navbar.hidden{transform:translateY(-100%)}
  nav.navbar .nav-inner{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:8px 15px;
    gap:1rem;
    flex-wrap:wrap;
  }
  nav.navbar .logo{height:36px;margin-right:0.5rem}
  nav.navbar a{font-size:0.85rem;color:#333;text-decoration:none}
  nav.navbar a:hover{text-decoration:underline}
}