/* ========= Base ========= */
:root{
  --bg:#0f0f12; --ink:#fff; --accent:#ff0066; --pop:#ffee00;
  --card:#1a1b22; --muted:#9aa0a6; --line:#2a2f40;
}
*{box-sizing:border-box}
html,body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Arial Black",Impact,system-ui,-apple-system,"Segoe UI",Roboto,
              "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
a{color:inherit;text-decoration:none}
main{max-width:1100px;margin:28px auto;padding:0 14px}
h1{margin:0;font-size:clamp(20px,4vw,34px)}
h2{margin:0 0 12px;font-size:20px}
.hint{color:var(--muted);font-size:12px}
.input,textarea,select{
  width:100%;padding:12px 14px;border-radius:12px;border:2px solid #303341;
  background:#11131a;color:#eaeef7;font-size:14px;outline:none
}
.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--pop);color:#111;
  font-weight:900;border:none;cursor:pointer;padding:10px 14px;border-radius:14px;
  box-shadow:3px 3px 0 var(--accent);transition:transform .05s
}
.btn:hover{transform:translate(-1px,-1px)}
.btn.secondary{background:#222;color:#fff;box-shadow:3px 3px 0 #555;border:1px solid #444}

/* ========= Header ========= */
.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:repeating-linear-gradient(90deg,#ff0066, #ff0066 60px, #ffee00 60px, #ffee00 120px);
  padding:20px 24px;
}
.brand{display:flex;align-items:center;gap:10px}
.logo-img{height:72px;width:auto;display:block}
.logo-tag{
  font-family:"M PLUS Rounded 1c","Noto Sans JP",sans-serif;font-weight:900;
  font-size:20px;letter-spacing:1px;color:#111;background:#ffee00;
  padding:6px 12px;border-radius:12px;box-shadow:3px 3px 0 #111;
}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav .btn{
  background:rgba(255,255,255,.9);color:#111;font-weight:700;border-radius:6px;
  padding:6px 12px;box-shadow:2px 2px 0 #111;transition:transform .1s
}
.nav .btn:hover{transform:scale(1.05)}
@media (max-width:640px){
  .site-header{flex-wrap:wrap;gap:10px}
  .nav{width:100%;justify-content:flex-start}
  .logo-img{height:46px}
  .logo-tag{font-size:16px}
}


/* ====== HERO (Main Visual) ====== */
.hero{
  background:
    radial-gradient(rgba(255,255,255,.18) 2px, transparent 2px) 0 0 / 22px 22px,
    radial-gradient(rgba(255,255,255,.10) 3px, transparent 3px) 11px 11px / 44px 44px,
    radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.5px) 0 0 / 12px 12px,
    linear-gradient(180deg,#141722, #0f111a);
  border-bottom: 2px solid var(--line);
}

.hero__inner{
  max-width:1100px; margin:0 auto; padding:32px 14px 44px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center;
}

.hero__kicker{
  display:inline-block; font-weight:900; letter-spacing:.08em;
  background:#111; color:#fff; border:1px solid #333;
  padding:6px 10px; border-radius:999px; font-size:12px; margin:0 0 14px;
}

/* --- タイトル行：それぞれ一行。行間（段落間）を広めに --- */
.hero__title1{
  font-family:"M PLUS Rounded 1c","Noto Sans JP",sans-serif;
  font-weight:900; line-height:1.15;
  font-size:clamp(26px,3.3vw,42px);
  margin:0 0 14px;
  white-space:nowrap;         /* 折り返し禁止 */
  letter-spacing:.02em;
}
.hero__title2{
  font-family:"M PLUS Rounded 1c","Noto Sans JP",sans-serif;
  font-weight:900; line-height:1.15;
  font-size:clamp(22px,2.8vw,34px);  /* 1サイズ小さく */
  margin:0 0 16px;                   /* 行間を広めに */
  white-space:nowrap;                 /* 折り返し禁止 */
  display:inline-block;
  background:var(--pop); color:#111; padding:0 .25em;
  border-radius:.22em; box-shadow:3px 3px 0 var(--accent);
}

.hero__lead{
  color:#dfe3ee; margin:0 0 18px;    /* タイトルとの行間をさらに空ける */
  font-size:clamp(14px,2.4vw,16px);
  line-height:1.7;
}

/* CTA（First time usersのみ） */
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-block; font-weight:700; text-decoration:none;
  color:#111; background:#ffe600; border:2px solid #111;
  padding:10px 16px; border-radius:999px;
  box-shadow:3px 3px 0 #111;
}
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 #111; }

/* 右側画像：半分サイズ */
.hero__visual img{
  width:70%;   /* 指示どおり半分に */
  height:auto;
  display:block;
  margin:0 auto;
  filter: drop-shadow(0 12px 0 var(--accent)) drop-shadow(0 24px 30px rgba(0,0,0,.45));
  transform: rotate(-2deg);
}

/* スマホ最適化 */
@media (max-width: 820px){
  .hero__inner{ grid-template-columns:1fr; gap:18px; }
  .hero__visual{ order:-1; max-width:420px; margin:0 auto; }
  .hero__visual img{ width:58%; } /* モバイルは少し大きめに */
  .hero__title1{ font-size:clamp(22px,6.2vw,36px); }
  .hero__title2{ font-size:clamp(20px,5.6vw,30px); }
}

/* さらに小さい端末向け微調整 */
@media (max-width: 420px){
  .hero__visual{ max-width:330px; }
  .hero__visual img{ width:64%; }
}


/* ==== RANKING ==== */
.rank-grid{max-width:1100px;margin:12px auto 30px;padding:0 14px;display:grid;gap:16px}
@media(min-width:900px){.rank-grid{grid-template-columns:1fr 1fr}}
.rank-col{background:var(--card);border:2px dashed var(--accent);border-radius:14px;padding:12px}
.rank-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rank-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#11131a;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.rank-no{font-weight:900;background:#ffee00;color:#111;border-radius:999px;padding:2px 8px;min-width:2.2em;text-align:center}
.rank-user{background:transparent;border:none;color:#eaeef7;font-weight:900;cursor:pointer;text-align:left}
.rank-meta{color:#cfd6ff;font-size:12px}

/* ==== MODAL ==== */
.modal{position:fixed;inset:0;display:none;z-index:2000}
.modal.show{display:block}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal__dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1000px,92vw);max-height:82vh;background:#0f111a;border:2px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.modal__header h3{margin:0;font-size:18px}
.modal__close{background:#222943;color:#cfd6ff;border:1px solid #2f3a56;border-radius:8px;padding:6px 10px;cursor:pointer}
.modal__body{padding:12px;max-height:calc(82vh - 54px);overflow:auto}
.modal__grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:10px}
@media(min-width:800px){.modal__grid{grid-template-columns:repeat(3,1fr)}}
.work-card{background:#11131a;border:1px solid var(--line);border-radius:12px;padding:12px}
.work-title{font-weight:900;margin:0 0 6px;color:#ff4c94}
.work-snippet{font-size:12px;color:#dfe3ee}
.work-like{font-size:12px;color:#ff9abc;margin:6px 0}
.work-btn{display:inline-block;margin-top:8px;background:#34b3ff;color:#111;font-weight:900;padding:8px 12px;border-radius:8px;box-shadow:2px 2px 0 #0b4a66}


/* ========= Footer ========= */
.site-footer{
  background:#0c0f18;
  border-top:1px solid var(--line);
  margin-top:40px;
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:18px 14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
}
.footer-nav a{
  color:#cfd6ff;
  font-size:13px;
  padding:6px 0;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-nav a:hover{
  color:#ffffff;
  border-color:#ffffff33;
}
.footer-copy{
  color:var(--muted);
  font-size:12px;
}
@media (max-width:640px){
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .footer-copy{ margin-top:4px; }
}

/* ===== SmartPhone tweaks (index) ===== */

/* 1) ヒーロー右側のカエル画像をスマホで非表示 */
@media (max-width: 640px){
  .hero__visual{ display:none !important; }
}

/* 2) トップページのカードを「動画→タグ→本文」の順に並べ替えできるようにする */
.index-section .post-card,
.index-section .song-card{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas:
    "left right"
    "tags right";          /* タグを動画の下に差し込む領域を用意 */
}

/* グリッド領域の割当て */
.index-section .post-card .left,
.index-section .song-card .left{ grid-area:left; }

.index-section .post-card .right,
.index-section .song-card .right{ grid-area:right; }

/* JS が生成する「タグの差し込み」用領域 */
.index-section .post-card .tags-under,
.index-section .song-card .tags-under{
  grid-area:tags;
  margin:6px 0 0;
  display:flex; flex-wrap:wrap; gap:8px;
}

/* スマホでは 1 カラム化（動画→タグ→本文） */
@media (max-width: 900px){
  .index-section .post-card,
  .index-section .song-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "tags"
      "right";
  }
}



/* ========= Cards / Grid ========= */
.card{background:var(--card);border:2px dashed var(--accent);padding:16px;border-radius:16px;box-shadow:3px 3px 0 var(--accent)}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:700px){.grid.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid.cards{grid-template-columns:repeat(3,1fr)}}

/* ========= YouTube common ========= */
.player{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:10px; overflow:hidden; background:#000;
}
.player iframe{width:100%;height:100%;border:0;display:block}

/* --- Overlay (動画中央ボタン + 薄黒幕) --- */
.overlay-dim{
  position:absolute; inset:0; background:rgba(0,0,0,.28);
  display:none; z-index:10;
}
.overlay-center{
  position:absolute; inset:0; display:none; z-index:11;
  display:grid; place-items:center; pointer-events:none;
}
.overlay-btn{
  pointer-events:auto; background:#ffee00; color:#000; font-weight:900;
  border:none; border-radius:999px; padding:8px 14px; line-height:1;
  font-size:16px; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.35);
  cursor:pointer; user-select:none; width:auto; height:auto;
}
.overlay-btn.replay{ background:#19c3e2; }
.overlay-show .overlay-dim{display:block}
.overlay-show .overlay-center{display:grid}

/* ========= song_register ========= */
.range-wrap{margin-top:10px;background:#11131a;border:1px solid var(--line);border-radius:12px;padding:12px}
.range-row{display:flex;align-items:center;gap:12px;margin:10px 0}
.range-row label{min-width:160px;color:#cfd6ff;font-weight:700}
.range-row input[type="range"]{flex:1;accent-color:#ff0066}
.tags-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;margin-top:6px}
.tags-grid label{
  display:flex;align-items:center;gap:8px;background:#11131a;border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;color:#eaeef7;font-size:13px;
}
@media(max-width:700px){.tags-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ========= parody_post_list / play_list のカード ========= */
.section-title{max-width:1100px;margin:16px auto 6px;padding:0 14px}
.song-list,.post-list{max-width:1100px;margin:24px auto;padding:0 14px;display:grid;gap:22px}
@media(min-width:900px){ .song-list,.post-list{grid-template-columns:1fr 1fr} }
.song-card,.post-card{
  display:grid; grid-template-columns:1.05fr .95fr; gap:16px;
  background:#1a1b22; border:2px dashed #ff2f82; border-radius:14px; padding:14px;
}
.song-card .left .thumb,
.post-card .left .thumb{
  position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000; border:1px solid var(--line);
}
.song-card .right .title,
.post-card  .right .title{color:#ff4c94;font-weight:900;font-size:22px;margin:4px 0 8px}
.song-meta,.meta{font-size:12px;color:#dfe3ee;line-height:1.6}
.tagline,.tags{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.tag{background:#ffee00;color:#111;font-weight:900;border-radius:6px;padding:4px 8px;font-size:12px}
.btn-wide{display:block;text-align:center;margin-top:12px;background:#34b3ff;color:#111;font-weight:900;padding:10px 14px;border-radius:8px;box-shadow:2px 2px 0 #0b4a66}
.btn-ghost{display:block;text-align:center;margin-top:8px;background:#222943;color:#cfd6ff;border:1px solid #2f3a56;font-weight:900;padding:10px 14px;border-radius:8px}

/* ========= parody_post（カラオケ） ========= */
/* 替え歌のカラオケ風ハイライト */
.lyrics-karaoke{
  margin-top:10px;padding:12px 14px;background:#0c0f18;border:1px solid var(--line);
  border-radius:10px;color:#eaeef7;font-size:18px;line-height:1.8;word-break:break-word;min-height:48px;
}
.kchar{opacity:.35;transition:opacity .12s linear,color .12s linear}
.kchar.active{opacity:1;color:#ffe605;text-shadow:0 0 6px #ffe60580}

/* ========= play（詳細ページの細部） ========= */
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.meta-list{font-size:13px;color:#dfe3ee;line-height:1.8;margin-top:6px}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.share a{display:inline-flex;align-items:center;gap:6px;background:#222943;border:1px solid #2f3a56;color:#cfd6ff;padding:8px 12px;border-radius:10px}
.share a:hover{transform:translateY(-1px)}
.related{margin-top:22px}
.related-grid{display:grid;gap:16px}
@media(min-width:760px){ .related-grid{grid-template-columns:repeat(3,1fr)} }
.related-card{background:#1a1b22;border:2px dashed #ff2f82;border-radius:12px;padding:10px}
.related-card .thumb{aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.related-title{color:#ff4c94;font-weight:900;margin:8px 0 4px}

/* ========= playlist ========= */
.playerBox .overlay-dim{
  background: rgba(0,0,0,0.18) !important;
}

/* ===== 説明ページ ===== */
/* === 説明ページ 共通 === */
.ex-wrap{max-width:1100px;margin:28px auto;padding:0 14px;}
.ex-item + .ex-item{margin-top:24px}
.ex-title{
  font-weight:900; font-size:26px; color:#fff; margin:0 0 10px;
}
.ex-row{
  display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:start;
}

/* 画像：前回の半分サイズ（目安） */
.ex-img img{
  max-width:160px; width:100%; height:auto; display:block; border-radius:50%;
}

/* 吹き出し */
.speech{
  position:relative; background:#fff; color:#111;
  border-radius:20px; padding:18px 20px; box-shadow:0 4px 12px rgba(0,0,0,.12);
  line-height:1.85;
}
.speech::before{
  content:""; position:absolute; left:-18px; top:28px;
  border-width:10px 18px 10px 0; border-style:solid;
  border-color:transparent #fff transparent transparent;
}
.speech p{margin:0 0 8px}
.speech ul{margin:0 0 0 1.2em}
.speech li{margin:0 0 6px}

/* スマホ：縦並び（上：画像、下：吹き出し） */
@media (max-width:820px){
  .ex-row{ grid-template-columns:1fr; gap:12px; }
  .ex-img{ display:flex; justify-content:center; }
  .ex-img img{ max-width:160px; }
  .speech::before{
    left:40px; top:-18px;
    border-width:0 10px 18px 10px; border-color:transparent transparent #fff transparent;
  }
}

/* explanation */
    .ex-wrap{max-width:1100px;margin:28px auto;padding:0 14px;}
    .ex-item + .ex-item{margin-top:36px}
    .ex-title{font-weight:900; font-size:26px; color:#fff; margin:0 0 14px;}
    .ex-row{display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:start;}
    .ex-img{display:flex;justify-content:center}
    .ex-img img{max-width:160px;width:100%;height:auto;border-radius:50%;display:block}
    .speech{
      position:relative;background:#fff;border-radius:20px;padding:20px 22px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#111;line-height:1.9;
    }
    .speech::before{
      content:"";position:absolute;left:-18px;top:40px;border-width:10px 18px 10px 0;border-style:solid;border-color:transparent #fff transparent transparent;
    }
    .speech p{font-size:15px;margin:0 0 12px;}
    .speech ul{margin:6px 0 12px 1.2em}
    .speech li{margin:0 0 8px}
    @media (max-width:820px){
      .ex-row{grid-template-columns:1fr;gap:16px;}
      .ex-img{margin-bottom:12px;}
      .speech::before{left:40px;top:-18px;border-width:0 10px 18px 10px;border-color:transparent transparent #fff transparent;}
    }

/* ===== Sticky Header (follow on scroll) ===== */
:root {
  --header-h: 64px;       /* ヘッダーの高さ（必要に応じて調整） */
  --header-bg: rgba(255,255,255,0.9);
}
@media (max-width: 640px){
  :root { --header-h: 56px; }
}

/* 既存 .site-header の見た目は維持しつつ “追従” を付与 */
.site-header { position: sticky; top: 0; z-index: 1000; }

/* スクロールで影を付与（視認性UP） */
.site-header.stuck {
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Fallback: 古いブラウザで position: sticky が効かない場合は fixed に切替 */
body.header-fixed .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
}

/* fixed の時だけ下にスペーサーを挿入（JSが追加）して押し出し */
.site-header-spacer { height: var(--header-h); }

/* ヘッダー内の縦中央揃えを安定 */
.site-header .brand,
.site-header .nav {
  min-height: var(--header-h);
  display: flex; align-items: center;
}


/* ===== Mobile Hamburger (no double render) ===== */
.hamburger { display: none; }

@media (max-width: 768px){
  .hamburger {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:auto;
    background:transparent; border:0; cursor:pointer;
  }
  .hamburger .hamburger-lines,
  .hamburger .hamburger-lines::before,
  .hamburger .hamburger-lines::after {
    content:""; display:block; width:22px; height:2px; background:#111;
    transition:transform .2s ease, opacity .2s ease;
  }
  .hamburger .hamburger-lines::before { transform: translateY(-6px); }
  .hamburger .hamburger-lines::after  { transform: translateY( 6px); }

  /* 開いた時は「×」表示 */
  .site-header.open .hamburger .hamburger-lines { background:transparent; }
  .site-header.open .hamburger .hamburger-lines::before { transform: rotate(45deg); }
  .site-header.open .hamburger .hamburger-lines::after  { transform: rotate(-45deg); }

  /* ここがポイント：スマホでは閉じている間はナビを非表示にする */
  .site-header > .nav {
    display: none;                 /* ←閉じている間は消す（2重防止） */
    position: fixed; inset: 0;     /* 開いたら全画面オーバーレイ */
    background: #fff;
    padding: 72px 16px 24px;
    z-index: 999;
    flex-direction: column; gap: 12px;
  }
  .site-header.open > .nav {
    display: flex;                 /* ←開いたときだけ表示 */
  }

  body.menu-open { overflow: hidden; } /* 背景スクロール抑止 */
}

/* ===== Prevent duplicate nav on desktop ===== */
@media (min-width: 769px){
  /* PCは従来どおり表示 */
  .site-header > .nav { display: flex; }

  /* 2個目以降の .nav は非表示（重複ガード） */
  .site-header > .nav:not(:first-of-type){
    display: none !important;
  }

  /* ハンバーガーはPCでは必ず非表示 */
  .hamburger{ display: none !important; }

  /* PCでは open クラスの影響を無効化（保険） */
  .site-header.open > .nav{
    transform: none !important;
  }
}

@media (max-width: 768px){
  /* ハンバーガーが確実に最前面でクリックできるようにする */
  .site-header .hamburger{
    position: relative;
    z-index: 1001; /* nav(999) より上 */
  }
  /* 念のため nav オーバーレイがヘッダーを覆わないように */
  .site-header > .nav{
    z-index: 999;
  }
}


  /* ===== Columns on index (Dark Style) ===== */
  .ut-columns {
    max-width: 1100px;
    margin: 32px auto;
    padding: 24px 16px;
    background: #1a1b22;       /* 背景をダークに */
    color: #fff;               /* 全体の文字を白に */
    border-radius: 14px;
  }
  .ut-columns__head {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .ut-columns__title {
    margin: 0;
    font-size: 24px;
    color: #fff;
  }
  .ut-columns__more {
    font-weight: 700;
    text-decoration: none;
    color: #fff;
  }
  .ut-columns__more:hover { text-decoration: underline; }

  .ut-columns__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media (max-width: 1024px) {
    .ut-columns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .ut-columns__grid { grid-template-columns: 1fr; }
  }

  .ut-colcard {
    border: 1px solid #333;   /* ダーク背景に馴染む枠色 */
    border-radius: 14px;
    background: #2a2b33;      /* カード自体は少し明るいグレー */
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ut-colcard h3 { margin: 0 0 2px; font-size: 18px; line-height: 1.4; }
  .ut-colcard h3 a { color: #fff; text-decoration: none; }
  .ut-colcard h3 a:hover { text-decoration: underline; }
  .ut-colcard p { margin: 0; color: #ddd; }
  .ut-colcard__actions { margin-top: 6px; }
  .ut-colcard__actions .cta-yellow {
    display: inline-block;
    background: #ffcc00;
    color: #000;
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
  }
  .ut-colcard__actions .cta-yellow:hover { opacity: 0.9; }