@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 検索UI */
.guild-search-box{
  margin-bottom:20px;
}

.guild-search-row{
  display:flex;
  gap:10px;
}

.guild-search-row input{
  flex:1;
  padding:10px;
  font-size:16px;
}

.btn-search{
  padding:10px 20px;
  font-size:16px;
  background:#2b7cff;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

.btn-search:hover{
  background:#1e63cc;
}

.guild-search-clear{
  margin-top:8px;
}

.guild-search-clear a{
  display:inline-block;
  padding:8px 16px;
  font-size:14px;
  background:#999;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
}

/* 操作ボタン */

.btn-edit{
  display:inline-block;
  padding:6px 14px;
  background:#2b7cff;
  color:#fff;
  border-radius:5px;
  text-decoration:none;
  font-size:14px;
}

.btn-delete{
  display:inline-block;
  padding:6px 14px;
  background:#e53935;
  color:#fff;
  border-radius:5px;
  text-decoration:none;
  font-size:14px;
}

.btn-edit:hover{
  background:#1e63cc;
}

.btn-delete:hover{
  background:#c62828;
}

.guild-search-clear button{
  padding:8px 18px;
  font-size:14px;
  background:#777;
  color:white;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

.guild-search-clear button:hover{
  background:#555;
}

/* 追加・更新ボタン */

input[type="submit"].btn-main-dc{
  display:inline-block !important;
  width:auto !important;
  padding:8px 16px;
  background-color:#16a81d !important;
  color:#ffffff !important;
  border:none;
  border-radius:6px;
  font-size:14px;
  font-weight:bold;
  cursor:pointer;
}

/* マウスオン */

input[type="submit"].btn-main-dc:hover{
  background-color:#27682a !important;
  color:#d32f2f !important;
}

/* VCランキングへ遷移するボタン */
.btn-ranking {
  display: inline-block;
  padding: 10px 15px;
  background-color: #5865F2;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}
.btn-ranking:hover {
  background-color: #4752C4;
}

/* =========================
タブ（今日・日・週・月）
========================= */
.ranking-tabs button.tab-btn{
  background:#e0e0e0 !important;
}

.ranking-tabs{
  display:flex;
  gap:8px;
  margin-bottom:15px;
}

.tab-btn{
  padding:8px 16px;
  border:none;
  background:#e0e0e0 !important;
  border-radius:6px;
  cursor:pointer;
  font-weight:bold;
}

.ranking-tabs button.tab-btn.active{
  background:#5865F2 !important;
  color:#fff !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.tab-btn:hover{
  background:#4752C4;
  color:#fff;
}

/* =========================
ソートボタン
========================= */
.sort-group button.sort-btn{
  background:#ccc !important;
}

.sort-group{
  margin:10px 0;
}

.sort-btn{
  padding:6px 14px;
  margin-right:8px;
  border:none;
  border-radius:6px;
  background:#ccc !important;
  cursor:pointer;
}

.sort-group button.sort-btn.active{
  background:#16a81d !important;
  color:#fff !important;
}

/* =========================
全選択 / 全解除
========================= */
.filter-group button.toggle-btn{
  background:#999 !important;
  color:#fff !important;
}

.toggle-btn{
  padding:6px 14px;
  margin-right:8px;
  border:none;
  border-radius:6px;
  background:#999 !important;
  color:#fff;
  cursor:pointer;
}

.filter-group button.toggle-btn.active{
  background:#2b7cff !important;
  color:#fff;
}

/* =========================
チャンネルフィルタ（チップUI）
========================= */
.channel-filter{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.channel-chip{
  position:relative;
  display:inline-block;
}

.channel-chip input{
  display:none;
}

.channel-chip span{
  display:inline-block;
  padding:6px 12px;
  border-radius:20px;
  background:#eee;
  cursor:pointer;
  font-size:13px;
}

.filter-group{
  margin-top:10px;
}

/* 選択中 */
.channel-chip input:checked + span{
  background:#5865F2;
  color:#fff;
}

/* ホバー */
.channel-chip span:hover{
  background:#4752C4;
  color:#fff;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}