/*
	Theme Name: diver_child
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */
/* ---------------------------------------------
   DIVER機能：ランキング0の時の見た目を整える
   --------------------------------------------- */
.rank_h.\30::before {
    width: 0px; /* ::beforeの横幅を0にして表示を消す */
}

/* reCAPTCHA 非表示 */
.grecaptcha-badge { visibility: hidden; }

/******************************
 セクションタイトル装飾
******************************/
.content h5 {
  display: inline;
  background: linear-gradient(transparent 50%, #ffddee 50%);
}
/******************************
 サイドバー
******************************/
/* サイドバー */
.sidebar-text {
  font-size: 14px;
}
/* リンクごとに横線追加 */
.sidebar-text li a {
  display: block;
  padding: 2px 0;
  border-bottom: 1px solid #ddd !important;
  text-decoration: none;
  color: #333;
}

/* 最後のリンクだけ線を消す */
.sidebar-text li:last-child a {
  border-bottom: none !important;
}

/* =============================
   TOC追従サイドバー
   ============================= */
/* TOC追従サイドバーのH3タグのフォントサイズ */
/* 第1階層のリンクのフォントサイズと行間 */
.toc_widget_list > li > a {
  font-size: 93%;  /* お好みで 100% → 105% や 1.1em などに変更可能 */
}

/* 第2階層のリンクのフォントサイズと行間（既存と統合） */
.toc_widget_list > li > ul > li > a {
  font-size: 90%;
}
.toc_widget_list > li > ul > li {
  padding: 2.5px 5px !important;
}

/******************************
 期別メンバー表示（ラベル付きリスト）
******************************/
.member-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.member-list li {
  position: relative;
  padding-left: 4.5em;
  text-indent: 0;
}

.member-list li::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/******************************
 セットリスト関連
******************************/

/* 共通：セットリストの基本設定（リストマーク除去など） */
ol.setlist {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: main-counter; /* 本編用カウンター初期化 */
}

/* 本編リスト */
ol.setlist.main {
  padding-left: 20px;
  counter-reset: main-counter;
}

ol.setlist.main li {
  line-height: 1.6;
  margin: 5px 0;
}

/* アンコールリスト */
ol.setlist.encore {
  padding-left: 20px;
  counter-reset: encore-counter;
}

ol.setlist.encore li {
  line-height: 1.6;
  margin: 5px 0;
}

/* ダブルアンコールリスト */
ol.setlist.double {
  padding-left: 20px;
  counter-reset: double-counter;
}

ol.setlist.double li {
  line-height: 1.6;
  margin: 5px 0;
}

/* 曲番号の表示設定 */
ol.setlist.main li::before {
  content: "M" counter(main-counter, decimal-leading-zero) ".";
  counter-increment: main-counter;
  margin-right: 10px;
}

ol.setlist.encore li::before {
  content: "EN" counter(encore-counter, decimal) ".";
  counter-increment: encore-counter;
  margin-right: 10px;
}

ol.setlist.double li::before {
  content: "WEN" counter(double-counter, decimal) ".";
  counter-increment: double-counter;
  margin-right: 10px;
}


/* MC項目（番号なし） */
ol.setlist li.mc {
  position: relative;
  padding-left: 51px;
  list-style: none;
  color: #808080;
}

ol.setlist li.mc::before {
  content: "";
  position: absolute;
  left: 0;
  width: 51px;
  counter-increment: main-counter 0;
}

/* M00 表記（カウントなしの見た目だけ） */
ol.setlist.main li.m00::before {
  content: "M00.";
  counter-increment: none;
  margin-right: 10px;
}

/* ---------------------------------------------
   スマホ表示用のレスポンシブ対応
   .mobilenone クラスを持つ要素はスマホでは非表示にする
   --------------------------------------------- */
@media (max-width: 599px) {
  .mobilenone,
  .toc_widget	{
    display: none; /* スマホでは非表示 */
  }
}

/*****************
ペンライトカラー
*****************/

/* カラースタイル */
.color-cell {
  text-align: left;
  font-weight: bold;
  border-radius: 4px;
}

.color-ホワイト          { background-color: #ffffff; color: #000000; }
.color-サクラピンク      { background-color: #ffc0cb; color: #000000; }
.color-グリーン          { background-color: #28a745; color: #ffffff; }
.color-イエロー          { background-color: #ffeb3b; color: #000000; }
.color-レッド            { background-color: #ff0000; color: #ffffff; }
.color-パステルブルー    { background-color: #a2d4f3; color: #000000; }
.color-パープル          { background-color: #800080; color: #ffffff; }
.color-ピンク            { background-color: #ffb6c1; color: #000000; }
.color-エメラルドグリーン { background-color: #00c9a7; color: #ffffff; }
.color-ライトグリーン    { background-color: #90ee90; color: #000000; }
.color-バイオレット      { background-color: #8a2be2; color: #ffffff; }
.color-パールグリーン    { background-color: #98ff98; color: #000000; }
.color-パッションピンク  { background-color: #ff69b4; color: #ffffff; }
.color-オレンジ          { background-color: #ffa500; color: #ffffff; }
.color-ブルー            { background-color: #007bff; color: #ffffff; }
.color-消灯              { background-color: #464646; color: #ffffff; font-style: italic; }

/* フィルター全体のコンテナ設定 */
#filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
}

/* チェックラベルの基本スタイル */
.filter-label {
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 14px;
  transition: all 0.3s;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

/* チェックボックスを非表示にする */
.filter-label input[type="checkbox"] {
  display: none;
}

/* チェック状態のラベル全体を装飾（:has を使う！） */
.filter-label:has(input[type="checkbox"]:checked) {
  background-color: #cce5ff;
  color: #0056b3;
  font-weight: bold;
}

#penlight-table {
  margin-top: 6px !important;
}

/* 通常（PCサイズなど） */
#penlight-table tbody td {
  padding: 12px 8px;
  line-height: 1.2 !important; 
}

/* 600px以下のとき */
@media (max-width: 600px) {
  #penlight-table tbody td {
    padding: 10px 4px !important;
    font-size: 90%;
  }

  #penlight-table .color-エメラルドグリーン {
    font-size: 70% !important;
  }

  #penlight-table .color-パッションピンク {
    font-size: 80% !important;
  }
}

/* 410px以下のとき */
@media (max-width: 410px) {
  #penlight-table .color-エメラルドグリーン {
    font-size: 65% !important;
  }
  #penlight-table .color-パッションピンク {
    font-size: 73% !important;
  }
  #penlight-table .color-パステルブルー {
    font-size: 80% !important;
  }
  #penlight-table .color-パールグリーン {
    font-size: 80% !important;
  }
}
/* DataTables 検索ボックスのレイアウト調整 */
#penlight-table_filter {
  float: none !important;
  text-align: right;
}
/* DataTables 検索ボックスのサイズ調整 */
#penlight-table_filter input[type="search"] {
  width: 200px;      /* ← 好きな幅に変更してOK */
  max-width: 60%;    /* スマホで大きくなり過ぎるのを防止 */
  height: 30px;      /* 高さも少し低めに */
  box-sizing: border-box;
}

/* =====================================================================
   s46c-plnav
   Sakamichi46 Cheer - PenLight Navigation (namespace)

   目的:
   - ペンライトカラー関連記事への導線カード（2枚/3枚などのカードナビ）
   - 既存テーマのCSSと衝突しないよう、`s46c-` を名前空間として使用

   主な構造（BEM）:
   - .s46c-plnav                 : ラッパー
     - .s46c-plnav__grid         : カード並び（grid）
       - a.s46c-plnav__card      : カード本体（リンク）
         - .s46c-plnav__badge    : バッジ（グループ名など）
         - .s46c-plnav__title    : タイトル

   テーマ（グループ別の薄い色味）:
   - .s46c-plnav__card--sakura / --nogi / --hina
   - .s46c-plnav__badge--sakura / --nogi / --hina
===================================================================== */


/* ---------------------------------------------------------------------
   1) Layout (wrapper / grid)
--------------------------------------------------------------------- */

/* Wrapper: 全体の余白 */
.s46c-plnav{
  margin: 16px 0 20px;
}

/* Grid: 基本は2枚導線を想定して2カラム */
.s46c-plnav__grid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ---------------------------------------------------------------------
   2) Card (base)
   - aタグでもdivでも破綻しない前提のデザイン
--------------------------------------------------------------------- */

.s46c-plnav__card{
  display: block;
  padding: 12px 12px 10px;
  border: 2px solid rgba(0,0,0,.14);
  border-radius: 14px;
  text-decoration: none;
  background: #fff;

  /* hover演出（軽め） */
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background-color .12s ease;
}

.s46c-plnav__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.14);
}


/* ---------------------------------------------------------------------
   3) Card parts (badge / title)
--------------------------------------------------------------------- */

/* Badge: グループ名などの小さなラベル */
.s46c-plnav__badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  margin-bottom: 10px;

  border: 1px solid rgba(0,0,0,.10);
  color: #111;
  background: rgba(0,0,0,.03);
}

/* Title: カード内の主見出し */
.s46c-plnav__title{
  display: block;
  margin: 0;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #111;
}


/* ---------------------------------------------------------------------
   4) Group Theme (VERY light)
   - カード背景は「薄く」: 文字/枠線の可読性優先
   - hover時のみ少し濃くして“押せる感”を出す
--------------------------------------------------------------------- */

/* --- Sakura (櫻) --------------------------------------------------- */
.s46c-plnav__card--sakura{
  background: rgba(241, 157, 181, .05);
  border-color: rgba(241, 157, 181, .35);
}
.s46c-plnav__card--sakura:hover{
  background: rgba(241, 157, 181, .09);
  border-color: rgba(241, 157, 181, .55);
}
.s46c-plnav__badge--sakura{
  background: rgba(241, 157, 181, .12);
  border-color: rgba(241, 157, 181, .26);
}

/* --- Nogi (乃木) --------------------------------------------------- */
.s46c-plnav__card--nogi{
  background: rgba(136, 0, 204, .02);
  border-color: rgba(136, 0, 204, .16);
}
.s46c-plnav__card--nogi:hover{
  background: rgba(136, 0, 204, .06);
  border-color: rgba(136, 0, 204, .22);
}
.s46c-plnav__badge--nogi{
  background: rgba(136, 0, 204, .08);
  border-color: rgba(136, 0, 204, .22);
}

/* --- Hina (日向) --------------------------------------------------- */
.s46c-plnav__card--hina{
  background: rgba(112, 184, 241, .05);
  border-color: rgba(112, 184, 241, .30);
}
.s46c-plnav__card--hina:hover{
  background: rgba(112, 184, 241, .09);
  border-color: rgba(112, 184, 241, .50);
}
.s46c-plnav__badge--hina{
  background: rgba(112, 184, 241, .12);
  border-color: rgba(112, 184, 241, .25);
}


/* ---------------------------------------------------------------------
   5) Responsive (<= 768px)
   - スマホでは1カラムにして読みやすさ優先
--------------------------------------------------------------------- */

@media (max-width: 768px){
  /* Grid: 1カラム化 */
  .s46c-plnav__grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Card: 角丸を少し控えめに */
  .s46c-plnav__card{
    padding: 12px 12px 10px;
    border-radius: 12px;
  }

  /* Title: 少し大きくしてタップ前提に */
  .s46c-plnav__title{
    font-size: 15px;
  }
}