/*キーイメージ-----------------------*/
.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:12% 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; }

/* メニュー -----------------------*/
.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; }/* 横並び（flex）は menu-scroll 内の ul に適用 */
.menu-inner li{ padding:1% 2%; white-space:nowrap; }/* li の余白は％で可変 */
.menu-inner li a{ color:#fff; text-decoration:none; }

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


/* News -----------------------*/
#news{ background:rgba(0,0,0,0.2); padding:0 0 1% 0; margin:0 0 3% 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:#000; text-decoration:none; }
#news .news-list li a:hover{ text-decoration:underline; }


/* お知らせエリア */
.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{ background:rgba(0,0,0,0.2); padding:1% 0; }
#game h2{ border-top:4px solid #555; border-bottom:4px solid #555; padding:1% 0; margin:0 0 1% 0; text-align:center; }

/* slick 用に scroll-wrap は “ただの入れ物” にする */
#game{ position:relative; background:rgba(0,0,0,0.2); padding:1% 0; }

#game .card{ padding:0 0.1%; }/* カード画像 */
#game .card img{ width:100%; height:auto; display:block; }

.slick-prev{ display:none !important; }
.slick-next{ display:none !important; }/* slick のデフォルト矢印は非表示 */

/* 矢印デザイン */
.slide-btn{ position:absolute; top:80%; transform:translateY(-50%); z-index:10; 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); }


/* フッターエリア -----------------------*/
#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; }