/* TOPページ　共有　はじまり */
    body { margin: 0; font-family: 'Comic Sans MS', cursive, sans-serif; background: #fdf8ec; color:#111; }
    header {
      position: fixed; top: 0; width: 98%;
      background: #ff0033; color: white; display: flex; flex-wrap: wrap;
      align-items: center; justify-content: space-between; padding: 10px 20px; z-index: 1000;
    }
    .logo-area { display: flex; align-items: center; gap: 10px; text-decoration:none; color:inherit; }
    .logo-area img { height: 60px; }
    .logo-area span { font-size: 22px; font-weight: bold; }
    nav { display: flex; flex-wrap: wrap; gap: 15px; }
    nav a { color: #fff; text-decoration: none; font-weight: bold; background: #000; padding: 6px 12px; border-radius: 5px; }

    .section { padding: 10px 20px 40px; max-width: 1000px; margin: auto; }
    .section:first-of-type { margin-top: 100px; }
    h2 { font-size: 26px; margin-bottom: 10px; border-left: 8px solid #ff0033; padding-left: 10px; background: #fff3f3; display: inline-block; }
    #meta { font-size:14px; color:#333; margin: 6px 0 12px; }
    .description-box { position: relative; background: #fff; border-radius: 10px; padding: 30px; overflow: hidden; }
    .description-box img { position: absolute; right: 10px; bottom: 10px; width: 200px; opacity: 0.6; z-index: 0; }
    .description { font-size: 18px; position: relative; z-index: 1; text-align: left; line-height: 1.8; }

    /* セクション見出し行（右にもっと見る） */
    .section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .more-link {
      display:inline-flex; align-items:center; gap:6px;
      background:#ffcc00; color:#000; text-decoration:none; font-weight:700;
      border:2px solid #000; border-radius:999px; padding:6px 12px; box-shadow:3px 3px 0 #000;
      white-space:nowrap;
    }
    .more-link:hover{ filter:brightness(.95); }

    /* カードレイアウト（共通） */
    .videos { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
    .video-box {
      width: 300px; background: white; border: 4px solid #000; border-radius: 10px;
      box-shadow: 4px 4px 0 #000; overflow: hidden; text-align: center;
    }
    .thumb { width:100%; background:#000; }
    .thumb iframe, .thumb video { width: 100%; height: 170px; border: none; display:block; }
    .box-title { font-weight: 900; padding: 8px 10px 0; }
    .box-meta  { font-size: 13px; color:#555; padding: 0 10px 8px; }
    .video-box button {
      width: 100%; padding: 12px; border: none; background: #ffcc00; color: #000;
      font-weight: bold; font-size: 16px; cursor: pointer; border-top: 2px solid #000;
    }

    footer { text-align: center; padding: 20px; background: #222; color: #fff; font-size: 14px; }

    @media screen and (max-width: 600px) {
      nav { justify-content: center; width: 100%; margin-top: 10px; }
      .videos { flex-direction: column; align-items: center; }
      .video-box { width: 100%; max-width: 520px; }
      .section-head { flex-direction:column; align-items:flex-start; gap:6px; }
    }

    /* ==== 説明ページ専用：吹き出しレイアウト ==== */
    .speech { display: flex; align-items: flex-start; gap: 24px; margin: 28px 0; }
    .speech.right { flex-direction: row-reverse; }
    .avatar { display: grid; justify-items: center; text-align: center; min-width: 160px; }
    .avatar img { width: 140px; height: 140px; }
    .avatar figcaption { margin-top: 6px; font-weight: 700; }
    .bubble {
      background: #fff; border: 4px solid #000; border-radius: 10px;
      box-shadow: 6px 6px 0 #000; padding: 18px 20px;
      line-height: 1.8; font-size: 18px; position: relative; flex: 1;
    }
    .speech.left .bubble:before{
      content:""; position:absolute; left:-18px; top:38px;
      border-right:18px solid #000; border-top:12px solid transparent; border-bottom:12px solid transparent;
    }
    .speech.left .bubble:after{
      content:""; position:absolute; left:-14px; top:40px;
      border-right:18px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;
    }
    .speech.right .bubble:before{
      content:""; position:absolute; right:-18px; top:38px;
      border-left:18px solid #000; border-top:12px solid transparent; border-bottom:12px solid transparent;
    }
    .speech.right .bubble:after{
      content:""; position:absolute; right:-14px; top:40px;
      border-left:18px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;
    }

.video-box .starter .bigplay,
.video-box .overlay .replay-btn {
  width: auto !important;
  min-width: unset !important;
  padding: 6px 12px; /* 好みで */
}

  /* ランキングの簡易スタイル（既存CSSと共存可） */
  .rankings { display:grid; gap:16px; margin-top:8px; }
  @media (min-width: 860px){
    .rankings { grid-template-columns: 1fr 1fr; }
  }
  .rank-card { background:#fff; border:1px solid #ddd; border-radius:12px; overflow:hidden; }
  .rank-card .head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#f7f7f7; }
  .rank-card h3 { margin:0; font-size:18px; }
  .rank-card .note { font-size:12px; opacity:.7; }
  .rank-list { list-style:none; margin:0; padding:0; }
  .rank-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-top:1px solid #eee; }
  .rank-item:first-child { border-top:none; }
  .rank-left { display:flex; align-items:center; gap:10px; min-width:0; }
  .rank-no { width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:#000; color:#fff; font-weight:700; font-size:13px; flex:0 0 auto; }
  .rank-no.top3 { background:#ff0033; }
  .user-link { background:none; border:none; padding:0; color:#0b63d8; cursor:pointer; text-decoration:underline; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rank-val { font-variant-numeric:tabular-nums; color:#333; }
  /* ユーザー作品モーダル */
  .modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:9999; }
  .modal{ width:min(860px,92vw); max-height:88vh; overflow:auto; background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
  .modal .modal-head{ position:sticky; top:0; background:#fff; padding:12px 16px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; gap:12px;}
  .modal .modal-head h3{ margin:0; font-size:18px; }
  .modal .modal-body{ padding:12px 16px; display:grid; gap:12px; }
  .works-list{ display:grid; gap:10px; }
  .work-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid #eee; border-radius:8px; }
  .work-title{ font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .work-meta{ font-size:12px; opacity:.7; }
  .modal-actions{ display:flex; gap:10px; justify-content:flex-end; padding:12px 16px; border-top:1px solid #eee; }
  .btn{ padding:8px 12px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer; }
  .btn.primary{ background:#111; color:#fff; border-color:#111; }  


  /* ===== 共通カードUI（caption_post_list と合わせる） ===== */
  .home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
  .work-card{background:#fff;border:3px solid #111;border-radius:18px;box-shadow:0 6px 0 #111;overflow:hidden}
  .work-card .video-box{position:relative;width:100%;padding-top:56.25%;background:#000}
  .work-card .video-box iframe,
  .work-card .video-box video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  .video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);transition:opacity .18s ease;z-index:2}
  .video-overlay.hidden{opacity:0;pointer-events:none}
  .play-btn{background:#e60012;color:#fff;border:3px solid #111;border-radius:9999px;padding:14px 22px;font-weight:800;font-size:18px;box-shadow:0 4px 0 #111}
  .video-overlay.replay .play-btn{background:#1c46b5}
  .work-card .body{padding:12px 14px 0}
  .work-card h3{margin:6px 0 8px;font-size:18px}
  .work-card .meta{font-size:12px;line-height:1.6;color:#333;margin:8px 0}
  .work-card .caption-line{font-size:14px;margin:8px 0 0;color:#111;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .work-card .actions{display:flex;justify-content:center;padding:12px 14px 16px}
  .btn-post{color:#fff;border:3px solid #111;border-radius:12px;padding:12px 16px;font-weight:800;text-decoration:none;box-shadow:0 4px 0 #111;display:inline-flex;gap:8px;align-items:center}
  .btn-post + .btn-post{margin-left:8px}
  /* 色指定：見る（青）・いいね（ピンク） */
  .btn-post.btn-view{background:#007BFF}
  .btn-post.btn-like{background:#ff4081}
  .btn-post:hover{filter:brightness(.95)}
  .btn-post:disabled{opacity:.5;pointer-events:none}

    .btn-like-mini{
    display:inline-block;
    margin-left:8px;
    background:#ff4081;
    color:#fff;
    border:3px solid #111;
    border-radius:12px;
    padding:8px 12px;
    font-weight:800;
    box-shadow:0 3px 0 #111;
    cursor:pointer;
  }
  .btn-like-mini.disabled{ opacity:.55; pointer-events:none; }
/* TOPページ　共有　終わり */

/* movie_post　はじまり */
  .card{background:#fff;border:4px solid #000;border-radius:10px;box-shadow:4px 4px 0 #000;padding:20px}
  .form-row{margin-bottom:14px}
  .form-row label{display:block;font-weight:bold;margin-bottom:6px}
  .input{width:100%;box-sizing:border-box;padding:10px 12px;border:2px solid #000;border-radius:8px;background:#fff;font-size:16px}
  .btn-primary{padding:12px 16px;border:none;background:#ffcc00;color:#000;font-weight:bold;font-size:16px;cursor:pointer;border-top:2px solid #000;border-radius:8px}
  .btn-primary:hover{filter:brightness(.95)}
  .muted{opacity:.7;font-size:13px}
  .error{color:#b00020;font-weight:700;margin-top:6px}

  /* プレビュー */
  .preview{margin-top:18px}
  .preview iframe,.preview video{width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000}

  /* コントロール一式 */
  .range-ui{margin-top:12px;display:grid;gap:12px}
  .pillset{display:flex;gap:8px;flex-wrap:wrap}
  .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:2px solid #000;border-radius:999px;background:#ffcc00;box-shadow:3px 3px 0 #000;font-weight:700}
  .pill .v{font-variant-numeric:tabular-nums}
  .row-sliders{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
  /* Comic 風スライダー */
  input[type=range]{-webkit-appearance:none;width:100%;height:10px;background:#eee;border:2px solid #000;border-radius:999px;box-shadow:inset 2px 2px 0 #0003}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#000;border:2px solid #fff;box-shadow:2px 2px 0 #0003;cursor:pointer}
  input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:#000;cursor:pointer}

  /* タイムライン＋選択帯＋メモリ */
  .timeline-wrap{display:grid;gap:6px}
  .timeline{position:relative;height:18px;background:#fff;border:2px solid #000;border-radius:10px;overflow:hidden;box-shadow:2px 2px 0 #0003 inset;user-select:none;touch-action:none}
  .selection{position:absolute;top:0;bottom:0;background:rgba(255,204,0,.65);border-left:2px solid #000;border-right:2px solid #000;cursor:grab}
  .ruler{position:relative;height:18px}
  .tick{position:absolute;bottom:0;width:1px;background:#0003}
  .tick.major{height:18px;background:#000}
  .tick.minor{height:10px}
  .tick-label{position:absolute;bottom:18px;transform:translateX(-50%);font-size:12px}
/* movie_post　終わり */


/* caption　はじまり */
    main { max-width:1000px; margin:100px auto 60px; padding: 0 20px; }
    .video-frame {
      position: relative; border: 6px solid #000; border-radius: 12px;
      box-shadow: 6px 6px 0 #000; background:#000; overflow: hidden; margin-bottom: 14px;
    }
    .video-frame iframe, .video-frame video { width:100%; height:300px; border:0; display:block; }
    @media (max-width: 600px){ .video-frame iframe, .video-frame video { height:180px; } }
    .overlay { position:absolute; inset:0; background: rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:#fff; }
    .overlay .replay-btn { padding: 12px 24px; font-size:18px; font-weight:700; background:#ffcc00; color:#000; border:none; border-radius:10px; box-shadow: 3px 3px 0 #000; cursor:pointer; }

    .caption-card { background:#fff; border: 6px solid #000; border-radius: 12px; box-shadow: 6px 6px 0 #000; padding: 16px; }
    .caption-title { display:inline-block; background:#ffcc00; border: 3px solid #000; border-radius: 8px; padding: 6px 10px; font-weight:900; font-size:18px; transform: rotate(-2deg); box-shadow: 3px 3px 0 #000; margin-bottom:10px; }
    #captionText { width:95%; font-size:20px; padding:14px 16px; border: 3px solid #000; border-radius: 10px; box-shadow: inset 4px 4px 0 #00000022; outline: none; background:#fffdf2; }
    #captionText:focus { box-shadow: inset 4px 4px 0 #00000022, 0 0 0 4px #ffcc00; }
    .hint { font-size:13px; opacity:.8; margin-top:6px; }

    .voice-options { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
    .voice-options label{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:2px solid #000; border-radius:999px; background:#ffcc00; box-shadow:3px 3px 0 #000; font-weight:700; }

    .button-row { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
    .btn { display:inline-block; padding: 12px 22px; font-size:18px; background:#007BFF; color:#fff; border:none; border-radius:10px; cursor:pointer; box-shadow: 3px 3px 0 #000; }
    .btn:hover { filter: brightness(0.95); }
    .btn.secondary { background:#00c853; }


/* ==== 声のタイプ（黄色・角丸は維持） ==== */
.voice-options{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

/* ラベル本体はテキストを1行＆…省略で枠内に収める */
.voice-options label{
  position: relative;            /* ← ラジオを絶対配置するため */
  display: inline-block;
  width: 240px;                  /* 枠幅を統一（調整可） */
  height: 48px;
  line-height: 48px;             /* テキスト縦位置中央 */
  padding: 0 14px 0 36px;        /* 左にラジオ分の余白を確保 */
  box-sizing: border-box;

  white-space: nowrap;           /* 折り返しなし */
  overflow: hidden;              /* はみ出し隠す */
  text-overflow: ellipsis;       /* … 表示 */

  border-radius: 999px;
  background: #ffcc00;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-weight: 900;
  color: #000;
}

/* ラジオは左に固定配置＝幅を“取らない”のでテキストが消えない */
.voice-options label > input[type="radio"]{
  position: absolute;
  left: 12px;                    /* ラベル左からの位置 */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 16px; height: 16px;     /* 見た目サイズ */
  accent-color: #000;            /* 対応ブラウザで色 */
  pointer-events: auto;
}

/* 既存の強い指定を上書きするための保険 */
.voice-options label,
.voice-options label > input[type="radio"]{
  background: #ffcc00 !important;
  border-color: #000 !important;
}

/* スマホ最適化：2列にしつつ、同じ挙動を維持 */
@media (max-width: 600px){
  .voice-options{ gap:10px; }
  .voice-options label{
    width: calc(50% - 10px);
    height: 44px;
    line-height: 44px;
    padding-left: 34px;
    font-size: 13px;
  }
  .voice-options label > input[type="radio"]{
    left: 10px;
    width: 15px; height: 15px;
  }
}







/* caption　終わり */


/* caption_post_list　はじまり */
    .filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
    .pill{display:inline-block;background:#ffcc00;border:2px solid #000;border-radius:999px;padding:6px 10px;font-weight:700;cursor:pointer}
    .pill.active{filter:brightness(.95)}

    /* ▼ list.html と幅を完全一致（カード幅 300 / 1列あたり min 300） */
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;justify-items:center}
    .video-box{
      width:100%;
      max-width:300px;
      background:#fff;border:4px solid #000;border-radius:12px;box-shadow:6px 6px 0 #000;
      overflow:hidden;text-align:center;display:flex;flex-direction:column
    }
    .media-wrap{position:relative;background:#000}
    .media-wrap iframe,.media-wrap video{width:100%;height:180px;border:0;display:block} /* ← 180px に統一 */

    .starter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#fff;background:rgba(0,0,0,.35);z-index:10}
    .overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#fff;background:rgba(0,0,0,.9);z-index:10}
    .bigplay,.replay-btn{padding:12px 24px;font-size:18px;font-weight:900;background:#ffcc00;color:#000;border:none;border-radius:10px;cursor:pointer;box-shadow:3px 3px 0 #000}

    .box-body{padding:10px;text-align:left}
    .title{margin:6px 0;font-weight:900}
    .serif{font-size:14px;line-height:1.6;margin:6px 0}
    .serif .icon{margin-right:6px}
    .meta{font-size:13px;color:#555;margin:4px 0}
    .likes-row{font-size:13px;color:#111;margin-top:2px}

    .ops{display:flex;justify-content:center;gap:8px;padding:10px}
    .btn-primary{padding:10px 14px;border:none;background:#007bff;color:#fff;border-radius:10px;font-weight:700;box-shadow:3px 3px 0 #000;cursor:pointer}
    .btn-primary:hover{filter:brightness(.95)}
    .btn-like{padding:10px 14px;border:none;background:#ff4081;color:#fff;border-radius:10px;font-weight:700;box-shadow:3px 3px 0 #000;cursor:pointer}
    .btn-like[disabled]{opacity:.6;cursor:not-allowed}
    .btn-danger{display:none;padding:10px 14px;border:none;background:#dc3545;color:#fff;border-radius:10px;font-weight:700;box-shadow:3px 3px 0 #000;cursor:pointer}

    .admin-badge{display:none;margin-left:8px;padding:2px 8px;font-size:12px;background:#00c853;color:#fff;border:2px solid #000;border-radius:999px;font-weight:700}

    .modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center}
    .modal{background:#fff;border:4px solid #000;border-radius:12px;box-shadow:6px 6px 0 #000;padding:16px;max-width:360px;width:90%}
    .modal h3{margin:0 0 10px}
    .modal .row{margin:8px 0}
    .modal input{width:100%;padding:10px;border:2px solid #000;border-radius:8px}
    .modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
    .modal button{padding:8px 12px;border:2px solid #000;border-radius:8px;font-weight:700;cursor:pointer}
    .modal .primary{background:#ffcc00}


/* 再生ボタンの横幅調整 */
.bigplay.play-xl {
    padding: 12px 20px;  /* 横幅縮小 */
    font-size: 18px;
}

/* 再生ページへボタン */
.view-page-btn {
    background-color: #007BFF;
    color: #fff;
}
.view-page-btn:hover {
    background-color: #0056b3;
}


.play-xl { padding:16px 28px; font-size:22px; }
.btn-xl   { padding:14px 22px; font-size:18px; }
.btn-wide { min-width: 150px; }
.like-lg  { padding:12px 16px; font-size:18px; }

/* 再生ボタンの横幅・色調整 */
.bigplay.play-xl {
    padding: 10px 16px; /* 横幅縮小 */
    font-size: 18px;
    background-color: #ffcc00; /* 元の黄色を維持 or 好みで変更可 */
    color: #000;
    border: none;
    border-radius: 10px;
    font-weight: 900;
    box-shadow: 3px 3px 0 #000;
}

/* 再生ページへボタン（常時色適用） */
.view-page-btn {
    background-color: #007BFF !important;
    color: #fff !important;
}

/* いいねボタン（常時色適用） */
.like-btn {
    background-color: #ff4081 !important;
    color: #fff !important;
}

/* caption_post_list　終わり */


/* list　はじまり */
    .filter-buttons{text-align:center;margin-bottom:1.5em}
    .filter-buttons button{margin:.2em;padding:.5em 1em;font-size:1em;border-radius:8px;border:2px solid #000;background:#ffcc00;cursor:pointer;font-weight:700}
    .filter-buttons button.active{filter:brightness(.9)}

    /* index.html のカードデザイン */
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;justify-items:center}
    @media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:600px){.grid{grid-template-columns:1fr}}

    .video-box{
      width:300px;background:#fff;border:4px solid #000;border-radius:10px;box-shadow:4px 4px 0 #000;
      overflow:hidden;text-align:center;display:flex;flex-direction:column
    }
    .media-wrap{position:relative;background:#000}
    .media-wrap iframe,.media-wrap video{width:100%;height:170px;border:0;display:block}

    /* 再生終了オーバーレイ＆リプレイ */
    .overlay{position:absolute;inset:0;display:none;background:rgba(0,0,0,.9);color:#fff;align-items:center;justify-content:center;flex-direction:column;gap:10px}
    .replay-btn{padding:12px;border:none;background:#ffcc00;color:#000;font-weight:bold;font-size:16px;cursor:pointer;border-top:2px solid #000}

    .box-body{padding:10px;text-align:left}
    .title{margin:6px 0;font-weight:900}
    .meta{font-size:13px;color:#555;margin:4px 0}

    /* index.html と同じ投稿ボタン */
    .btn-index{width:100%;padding:12px;border:none;background:#ffcc00;color:#000;font-weight:bold;font-size:16px;cursor:pointer;border-top:2px solid #000}

    /* 管理表示 */
    .admin-badge{display:none;margin-left:8px;padding:2px 8px;font-size:12px;background:#00c853;color:#fff;border:2px solid #000;border-radius:999px;font-weight:700}
    .btn-danger{
      display:none; /* ←管理モードで表示に切替 */
      margin:10px auto 12px; width:92%;
      background:#dc3545;color:#fff;border:none;border-radius:10px;box-shadow:3px 3px 0 #000;cursor:pointer;font-weight:900;padding:10px 12px
    }
     /* 管理用モーダル */
    .modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center}
    .modal{background:#fff;border:4px solid #000;border-radius:12px;box-shadow:6px 6px 0 #000;padding:16px;max-width:360px;width:90%}
    .modal h3{margin:0 0 10px}
    .modal .row{margin:8px 0}
    .modal input{width:100%;padding:10px;border:2px solid #000;border-radius:8px}
    .modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
    .modal button{padding:8px 12px;border:2px solid #000;border-radius:8px;font-weight:700;cursor:pointer}
    .modal .primary{background:#ffcc00}
    .overlay {     
  position: absolute;
  inset: 0;
  display: none; /* 再生終了時にJSでflexに変更 */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0,0,0,0.9);
  z-index: 9999; /* ← iframeより前面に表示 */
}

.starter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.45));
  color: #fff;
  z-index: 10000; /* 再生ボタンはさらに上 */
}

    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 16px; }
    .card { background:#fff; border:1px solid #ddd; border-radius:10px; overflow:hidden; position:relative; }
    .thumb { position: relative; background:#000; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
    .thumb video, .thumb iframe { width:100%; height:100%; display:block; }
    .title { padding: 10px 12px; font-weight: 700; }
    .controls { padding: 10px 12px; display:flex; gap:8px; align-items:center; }
    .play-btn, .replay-btn {
      padding:8px 12px; border:none; border-radius:8px; font-weight:700; cursor:pointer;
    }
    .play-btn { background:#111; color:#fff; }
    .replay-btn { background:#ff0033; color:#fff; }

    .overlay {
      position:absolute; inset:0; background:rgba(0,0,0,0.78);
      color:#fff; display:none; align-items:center; justify-content:center;
      flex-direction:column; gap:12px; text-align:center; padding:20px;
    }
    .chip { font-size:12px; opacity:0.9; }

/* 16:9でカード幅いっぱいに動画を収める */
.video-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}
.video-wrap iframe,
.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

    
/* list　終わり */


/* play　はじまり */
    /* オーバーレイ（終了時） */
    .overlay {
      position:absolute; inset:0;
      background: rgba(0,0,0,0.9);
      display:none; align-items:center; justify-content:center;
      flex-direction:column; gap:14px; color:#fff; z-index:10;
    }
    .overlay .replay-btn {
      padding: 12px 24px; font-size:18px; font-weight:700;
      background:#ffcc00; color:#000; border:none; border-radius:10px;
      box-shadow: 3px 3px 0 #000; cursor:pointer;
    }

    /* スターター（最初に出すダミー再生） */
    .starter {
      position:absolute; inset:0; z-index:11;
      display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
      background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
      color:#fff;
    }
    .starter .bigplay {
      padding:14px 28px; font-size:22px; font-weight:900;
      background:#eb3232; color:#fff; border:none; border-radius:12px; cursor:pointer;
      box-shadow:4px 4px 0 #000;
    }

    /* カード */
    .card { background:#fff; border:6px solid #000; border-radius:12px; box-shadow:6px 6px 0 #000; padding:16px; }
    .caption { font-size:20px; font-weight:900; margin: 6px 0 4px; }
    .controls { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .btn {
      display:inline-block; padding: 12px 22px; font-size:18px;
      background:#007BFF; color:#fff; border:none; border-radius:10px; cursor:pointer;
      box-shadow: 3px 3px 0 #000;
    }
    .btn:hover { filter: brightness(0.95); }
    .btn.like { background:#ff4081; }
    .share { margin-top:12px; display:flex; flex-wrap:wrap; gap:10px; }
    .share a { display:inline-block; padding:10px 16px; border-radius:8px; text-decoration:none; color:#fff; font-weight:700; box-shadow: 3px 3px 0 #000; }
    .x-share{ background:#1DA1F2; } .facebook-share{ background:#3b5998; } .line-share{ background:#00c300; }

    .pill { display:inline-block; background:#ffcc00; border:2px solid #000; border-radius:999px; padding:4px 10px; font-weight:700; margin-right:6px; }

    /* 他の作品 */
    .more-section { margin-top:26px; }
    .more-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
    .more-card {
      background:#fff; border:4px solid #000; border-radius:12px; box-shadow:4px 4px 0 #000; overflow:hidden;
    }
    .more-card .thumb { background:#000; }
    .more-card .thumb iframe, .more-card .thumb video { width:100%; height:140px; border:0; display:block; }
    .more-card .title { font-weight:900; padding:8px 10px 0; }
    .more-card .meta  { font-size:13px; color:#555; padding: 0 10px 10px; }
    .more-card .go { width:100%; padding:10px; border:none; border-top:2px solid #000; background:#ffcc00; font-weight:700; cursor:pointer; }
/* play　終わり */


/* login　はじまり */
  input{width:100%;padding:12px;border:2px solid #000;border-radius:8px;font-size:16px}
  button{padding:12px 16px;border:2px solid #000;border-radius:10px;background:#ffcc00;font-weight:700;cursor:pointer}
  .note{font-size:14px;opacity:.8;margin-top:10px}
  .result{margin-top:12px;padding:10px;background:#fff3f3;border:2px dashed #000;border-radius:8px;word-break:break-all}
  .result code{background:#000;color:#fff;padding:2px 6px;border-radius:6px}
/* login　終わり */


/* mypage　はじまり */
  table{width:100%;border-collapse:collapse}
  th,td{border-bottom:1px dashed #000;padding:8px;text-align:left}
  .right{display:flex;gap:8px;justify-content:flex-end}
/* mypage　終わり */


/* ranking　はじまり */
  .rank{font-weight:900}
/* ranking　終わり */