h2{ border-top:4px solid #555; border-bottom:4px solid #555; padding:1% 0; margin:0 0 1% 0; text-align:center; }

/*キーイメージ-----------------------*/
.kv{ position:relative; width:100%; background:rgba(0,0,0,1) url("../_img/top/topBG.jpg") center top no-repeat; background-size:cover; }
.kv-inner{ position:relative; width:100%; max-width:1200px; margin:auto; padding:9% 0; }
.kv-logo{ width:50%; margin:auto; display:block; position:relative; z-index:2; }

/* キャラ（絶対配置＋左右パディング方式） */
.kv-char{ position:absolute; top:10%; z-index:1; }
.kv-left{ left:0; padding-right:29%; width:58.7%; } /* 左キャラ */
.kv-right{ right:0; padding-left:28%; width:57.1%; } /* 右キャラ */

.wrapper{ width:100%; max-width:1200px; min-width:360px; margin:auto; background-image:url("../_img/Bgimg.png"); background-position:center top; background-repeat:repeat-y; background-size:contain; }

/* メニュー -----------------------*/
.menu-overlay{ z-index:9999; }
.menu-inner{ z-index:10000; }
.hamburger{ z-index:10001; }

.main-menu{ position:sticky; top:0; width:100%; background:#000; z-index:5; }
.menu-inner{ overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
.menu-inner::-webkit-scrollbar{ display:none; }
.menu-inner ul{ display:flex; list-style:none; margin:0 auto; padding:0; justify-content:center; }
.menu-inner li{ white-space:nowrap; position:relative; }
.menu-inner li a{ display:block; width:100%; padding:1rem; background:#111; color:#fff; text-decoration:none; }/* ← background:#111 を追加 */
.menu-inner li a:hover,
.menu-inner li a:active{ background:#444; }


/* 準備中（PCメニュー用） */
.menu-inner li a.disabled{ position:relative; pointer-events:none; opacity:0.6; }
.menu-inner li a.disabled:hover::after{ content:"準備中"; position:absolute; right:10px; top:50%; transform:translateY(-50%); background:#333; color:#fff; padding:3px 8px; border-radius:4px; font-size:0.8rem; white-space:nowrap; z-index:20000; }

/* ハンバーガー本体（スマホのみ表示） */
.hamburger{ display:none; position:absolute; right:10px; top:10px; width:30px; height:24px; cursor:pointer; z-index:20; }
.hamburger span{ display:block; height:4px; background:#fff; margin:4px 0; border-radius:2px; transition:0.3s; }

/* メニュー開閉時のアニメーション */
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* スマホ用ハンバーガー -----------------------*/
@media(max-width:768px){

    .hamburger{ position:fixed; right:10px; top:10px; width:40px; height:40px; cursor:pointer; z-index:10001; background:rgba(0,0,0,0.6); border-radius:50%; display:block; padding:8px; box-sizing:border-box; }
    .hamburger span{ display:block; width:24px; height:3px; background:#fff; margin:4px auto; border-radius:2px; transition:0.3s; }

    .menu-overlay{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999; }
    .menu-overlay.open{ display:block; }

    .menu-inner{ display:none; position:fixed; top:0; left:0; width:100%; padding-top:80px; z-index:10000; }
    .menu-inner.open{ display:block; }

    .menu-inner ul{ flex-direction:column; padding:0; margin:0; }
    .menu-inner li{ width:100%; text-align:center; position:relative; }

    .menu-inner li a{ display:block; width:100%; padding:1.1rem 0; background:#111; color:#fff; text-decoration:none; font-size:1.1rem; }

    .menu-inner li a:hover,
    .menu-inner li a:active{ background:#444; }

}


/* バナー */
.team-banner{ display:flex; justify-content:center; gap:20px; padding:2% 0;  margin:1% 0;}


/* News -----------------------*/
#news{ background:rgba(255,255,255,0.8); padding:1% 0; margin:1% 0;}
/*#news h2{ border-top:4px solid #555; border-bottom:4px solid #555; padding:1% 0; margin:0 0 1% 0; text-align:center; }*/

/* カード型ニュース（画像4つ並び） -----------------------*/
#news .news-wrap{ display:flex; justify-content:space-between; gap:2%; padding:0 1%; }
#news .news-wrap .card{ width:calc(25% - 1.5%); }
#news .news-wrap .card img{ width:100%; height:auto; display:block; }

/* テキスト型ニュース（一般的なニュースリスト） -----------------------*/
#news .news-list{ list-style:none; margin:2% 0 0 0; padding:0 2%; }
#news .news-list li{ padding:1% 0; border-bottom:1px solid #000; }
#news .news-list li .date{ color:#000; margin-right:1%; }
#news .news-list li a{ color:#06F; text-decoration:none; }
#news .news-list li a:hover{ text-decoration:underline; }


/* 1カラムバナーエリア -----------------------*/
#info{ width:100%; margin:3% 0; position:relative; box-sizing:border-box; }
#info a{ display:block; position:relative; width:100%; text-decoration:none; }

/* テキストBOX（画像なし） */
#info .info-box{ padding:3% 4%; background:#f5f5f5; border:1px solid #ddd; border-radius:10px; position:relative; box-sizing:border-box; transition:0.3s; }
#info .info-title{ font-size:1.4rem; font-weight:bold; color:#000; margin-bottom:0.5rem; transition:0.3s; }
#info .info-text{ font-size:1rem; color:#333; transition:0.3s; }

/* ▼ ロールオーバーで info-box を透過させる */
#info a:hover .info-box{ background:rgba(0,0,0,0.6); border-color:rgba(0,0,0,0.6); }
#info a:hover .info-title{ color:#fff; }
#info a:hover .info-text{ color:#eee; }


#info .info-box.center{ padding:2% 4%; background:#f5f5f5; border:1px solid #ddd; border-radius:10px; position:relative; box-sizing:border-box; transition:0.3s; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#000; font-weight:bold; text-align:center; }
#info a:hover .info-box.center{ background:rgba(0,0,0,0.6); border-color:rgba(0,0,0,0.6); color:#fff; }



/* お知らせエリア  -----------------------*/
.info-box{ display:flex; gap:20px; padding:20px; border:2px solid #ccc; margin:20px; }
.info-col{ flex:1; }
@media(max-width:768px){ .info-box{ flex-direction:column; } }

/* Gameエリア -----------------------*/
#game{ position:relative; z-index:1; background:rgba(255,255,255,0.8); padding:2% 0 3% 0; }

#game h2{ margin-bottom:1.5%; }

#game .slick-list{ position:relative; z-index:1; }
#game .slick-track{ position:relative; z-index:1; }

#game .card{ padding:0 0.1%; }
#game .card img{ width:100%; height:auto; display:block; }
#game .slick-slide{ margin:0 5px; }

/* slick のデフォルト矢印は使わない */
.slick-prev{ display:none !important; }
.slick-next{ display:none !important; }

/* 自作の矢印 */
.slide-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:40px; height:40px; background:rgba(255,255,255,0.6); color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:bold; cursor:pointer; user-select:none; transition:background 0.2s; }
.slide-btn.prev{ left:10px; }
.slide-btn.next{ right:10px; }
.slide-btn:hover{ background:rgba(255,255,255,1); }

/* ▼ 数字ナビ（slick-dots）を上に配置＋デザイン */
#game .slick-dots{ position:absolute; top:-35px; left:0; width:100%; text-align:center; z-index:3; }
#game .slick-dots li{ display:inline-block; margin:0 4px; }
#game .slick-dots li button{ min-width:24px; height:24px; padding:0 6px; border-radius:12px; border:1px solid #ccc; background:#fff; color:#000; font-size:12px; line-height:24px; cursor:pointer; }
#game .slick-dots li.slick-active button{ background:#000; color:#fff; border-color:#000; }

/* ▼ 数字ナビを “ボタン風” にデザインする
#game .slick-dots{ position:relative; bottom:-20px; text-align:center; margin-top:10px; z-index:1; }
#game .slick-dots li{ display:inline-block; margin:0 4px; }
#game .slick-dots li button{ min-width:24px; height:24px; padding:0 6px; border-radius:12px; border:1px solid #ccc; background:rgba(255,255,255,0.9); color:#000; font-size:12px; line-height:24px; cursor:pointer; }
#game .slick-dots li.slick-active button{ background:#000; color:#fff; border-color:#000; }
*/



/* ▼ マーカーとカードの間に余白 */
#gameWrap{ margin-top:55px; }




/* フッターエリア -----------------------*/
#footer{ background:rgba(255,255,255,0.6); text-align:center; padding:20px 0; border-top:2px solid #ccc; margin-top:40px; }
#footer p{ margin:5px 0; color:#000; font-size:0.9rem; }