@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==============================
   YouTuber Gate Rating UI
   ============================== */

/* 旧デザインの疑似要素を完全無効化（謎の色対策） */
.yt-rating-block::before,
.yt-rating-block::after{
  content:none !important;
}

/* 全体カード：白ベース */
.yt-rating-block{
  max-width: 920px;
  margin: 3rem auto 4rem;
  padding: 2.4rem 2.8rem 2.6rem;
  border-radius: 30px;
  position: relative;
  background:#ffffff;
  box-shadow:
    0 18px 44px rgba(15,23,42,.10),
    0 0 0 1px rgba(229,231,235,.9);
  color:#111827;
}

/* 見出しバー：青ベタ＋白文字（テーマ側の藍色を完全に殺す） */
.yt-rating-title{
  margin:0 0 2.2rem;
  padding:1rem 1.8rem;
  border-radius:999px;

  background:#2563eb !important;
  border:1px solid #2563eb !important;
  color:#ffffff !important;

  font-size:1.05rem;
  font-weight:700;
  text-align:center;
  letter-spacing:.10em;
  box-shadow:none !important;
}
.yt-rating-title::before,
.yt-rating-title::after{
  content:none !important;
}

/* セクション */
.yt-rating-section{
  padding:1.4rem 0 1.6rem;
}
.yt-rating-section + .yt-rating-section{
  border-top:1px solid #e5e7eb;
}

/* ==============================
   指標ラベル＋スライダー
   ============================== */

/* 1行に「ラベル / スライダー / 数値」 */
.yt-rating-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.8rem;
  margin-bottom:1.4rem;
}

/* ラベル：
   Momentum   /   推進力
   Influence  /   影響力
   …のように、左端も / も「ほぼ縦に揃う」レイアウト */
.yt-rating-label{
  flex:0 0 40%;
  display:flex;
  align-items:center;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.04em;
  color:#111827;
}

/* ★ラベルの見た目をいじりたいときはここだけ数値を触る */

/* 英語列：固定幅＋左寄せ */
.yt-label-en{
  flex:0 0 110px;           /* ← 英語ブロックの横幅（大きくすると / が右へ動く） */
  text-align:left;
  white-space:nowrap;
  margin-right:.40rem;      /* ← 英語と / の距離 */
}

/* スラッシュ列：左右非対称で、日本語側の距離を長くして JA をスライダー寄りへ */
.yt-label-sep{
  flex:0 0 auto;
  margin-left:.10rem;       /* ← EN 側の隙間（小さくすると EN に近づく） */
  margin-right:2.70rem;     /* ← / から日本語までの距離（大きくすると JA が右に寄る） */
  opacity:.75;
}

/* 日本語列：「〜力」の列をほぼ縦に揃える */
.yt-label-ja{
  flex:0 0 auto;
  min-width:4em;            /* ← 「〜力」の縦揃え用。文字が食い込むなら 4.2em などに増やす */
  text-align:left;
  white-space:nowrap;
}

/* スライダー＋数値（横並びコンテナ） */
.yt-rating-row > div{
  display:flex;
  align-items:center;
  flex:1 1 auto;

  /* ★スライダーの端の「余り」が気になる場合はこの値をいじる */
  padding-inline: 2;        /* ← 2px, 4px… と増やすと両端が少し内側に縮む */
}

/* スライダー本体 */
.yt-rating-slider{
  flex:1 1 auto;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:999px;
  background:#e5e7eb;
  outline:none;
  margin:0;
}

/* トラック（Chrome / Safari） */
.yt-rating-slider::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:#e5e7eb;
}

/* トラック（Firefox） */
.yt-rating-slider::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:#e5e7eb;
}

/* つまみ：トラック中央にきちんと乗せる */
.yt-rating-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #ffffff;
  background:#1d4ed8;
  box-shadow:0 3px 6px rgba(15,23,42,.35);
  cursor:pointer;
  margin-top:-6px;          /* ← つまみ高さ 18px とトラック 6px の半分差分 */
}
.yt-rating-slider::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #ffffff;
  background:#1d4ed8;
  box-shadow:0 3px 6px rgba(15,23,42,.35);
  cursor:pointer;
}

/* 数値入力 */
.yt-rating-number{
  width:3.1rem;
  margin-left:.5rem;
  padding:.25rem .35rem;
  border-radius:.55rem;
  border:1px solid #d1d5db;
  background:#ffffff;
  color:#111827;
  font-size:.8rem;
  font-weight:600;
  text-align:center;
}

/* ==============================
   チャンネル登録セクション（下部）
   ============================== */

.yt-rating-section--subscribe{
  padding-top:2.2rem;
  border-top:1px solid #e5e7eb;
}

.yt-rating-subscribe{
  display:flex;
  justify-content:center;
  gap:1.6rem;
}

/* 「登録中」「未登録」ボタン */
.yt-rating-option{
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;

  height:52px;
  padding:0 2.4rem;
  min-width:9.5rem;

  border-radius:999px;
  border:1px solid #1f2937;
  background:#ffffff;
  color:#111827;

  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1;

  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

/* input は全面に透明で敷く */
.yt-rating-option input[type="radio"]{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
}

/* 選択時：ボタン＝黄 */
.yt-rating-option:has(input[type="radio"]:checked){
  background:#facc15;
  border-color:#eab308;
  color:#111827;
  box-shadow:0 14px 34px rgba(15,23,42,0.25);
}

/* ==============================
   「みんなの評価をチェック！」ボタン
   ============================== */

.yt-rating-submit{
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;

  margin:2.4rem auto 0;
  height:56px;
  min-width:320px;
  padding:0 4.2rem;

  border:none;
  border-radius:999px;
  background:#facc15;
  color:#111827;

  font-size:1.0rem;
  font-weight:700;
  letter-spacing:.11em;
  line-height:1;
  text-align:center;

  cursor:pointer;
  box-shadow:
    0 20px 46px rgba(15,23,42,0.25),
    0 0 0 1px rgba(250,250,250,0.8);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

.yt-rating-submit:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:
    0 22px 52px rgba(15,23,42,0.30),
    0 0 0 1px rgba(250,250,250,0.9);
}
.yt-rating-submit:active{
  transform:translateY(0);
  box-shadow:
    0 12px 28px rgba(15,23,42,0.28),
    0 0 0 1px rgba(250,250,250,0.8);
}

/* ボタン内テキスト（JSで .yt-btn-text を仕込んでいる） */
.yt-btn-text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  margin:0;
  padding:0;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
}
.yt-rating-submit .yt-btn-text{
  font-weight:700;
  letter-spacing:.11em;
}

/* メッセージ */
.yt-rating-message{
  margin-top:.8rem;
  font-size:.8rem;
  color:#4b5563;
  text-align:center;
}

/* ============== レスポンシブ ============== */

@media (max-width: 960px){
  .yt-rating-block{
    margin:2.4rem 1rem 3rem;
    padding:2rem 1.4rem 2.2rem;
    border-radius:24px;
  }

  /* ラベル → スライダーを縦並びに */
  .yt-rating-row{
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
  }
  .yt-rating-label{
    flex:0 0 auto;
  }

  .yt-rating-subscribe{
    flex-direction:column;
    align-items:stretch;
  }
  .yt-rating-option{
    width:100%;
  }
  .yt-rating-submit{
    width:100%;
    min-width:0;
    padding:0 1.8rem;
  }
}
/* ==============================
   みんなの評価（集計）表示
   ============================== */

.yt-stats-block{
  max-width:920px;
  margin:1.8rem auto 0;
  padding:1.4rem 1.8rem 1.6rem;
  border-radius:20px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#111827;
  font-size:.9rem;
  box-shadow:0 10px 30px rgba(15,23,42,0.06);
}

.yt-stats-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
}

.yt-stats-title{
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.08em;
}

.yt-stats-count{
  font-size:.8rem;
  color:#6b7280;
}

.yt-stats-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.6rem 1.4rem;
}

.yt-stats-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.yt-stats-label{
  font-size:.85rem;
  color:#4b5563;
}

.yt-stats-value{
  font-size:.95rem;
  font-weight:700;
}

.yt-stats-footer{
  margin-top:1rem;
  text-align:right;
  font-size:.85rem;
  color:#374151;
}

.yt-stats-sub{
  font-weight:600;
}

/* スマホで1列に落とす */
@media (max-width: 960px){
  .yt-stats-block{
    margin:1.6rem 1rem 0;
    padding:1.2rem 1.2rem 1.4rem;
  }
  .yt-stats-grid{
    grid-template-columns:1fr;
  }
}