:root{ --ink:#111; --shadow:#000; }

    /* ===== 上部メタ情報（横一列/枠なし） ===== */
    .meta {
      max-width: 700px; margin: 18px auto 8px;
      display:flex; flex-wrap:wrap; gap:14px;
      font-weight: 1200; line-height:1.6;
      justify-content: flex-start !important; /* 中央→左寄せ */
  　　text-align: left;                       /* 念のため */
    }
    .meta small{ font-weight:900; opacity:.8; }

    /* ===== ステージ（700×400固定 / 中央寄せ） ===== */
    .stage-wrap{ display:flex; justify-content:center; margin:12px 0 10px; }
    .stage{
      width:700px; height:400px;
      background:url("/images/stage.png") center/cover no-repeat;
      overflow:hidden;
    }
    @media (max-width:740px){
      .stage{ width:100%; height:auto; aspect-ratio:7/4; background-image:url("/images/stage_sp.png"); }
    }

    /* 俳優（元画像サイズのまま。CSSでサイズ指定しない） */
    .actor{ position:absolute; image-rendering:auto; }
    /* 位置（必要なら微調整OK） */
    .actor-boke{ left:235px; bottom:75px; }
    .actor-tsuk { right:240px; bottom:75px; }

    /* ===== 吹き出し（縦に2つ：上がボケ、下がツッコミ） ===== */
    .bubble-card{ max-width:700px; margin:10px auto; }
    .bubble-head{ margin:0 0 6px 2px; }
    .badge{
      display:inline-block; font-weight:900; padding:4px 10px; border:3px solid #111;
      border-radius:999px; background:#fff; box-shadow:3px 3px 0 #000; font-size:14px;
    }

    .bubble{
      position:relative; border:3px solid #111; border-radius:14px;
      padding:12px 14px; background:#fff; font-weight:900; box-shadow:6px 6px 0 #000;
    }

    /* テキスト（左→右にタイプ表示。折り返しOK） */
    .line{ min-height:1.9em; white-space:normal; word-break:break-word; }

    /* ===== コントロール・SNS ===== */
    .controls{ max-width:700px; margin:12px auto 0; display:flex; gap:12px; flex-wrap:wrap; }
    .btn{
      padding:10px 16px; border:3px solid #111; border-radius:12px; font-weight:900;
      background:#fff; color:#111;
      box-shadow:4px 4px 0 #000; transition:background .15s, color .15s, filter .15s;
    }
    .btn:hover{ background:#111; color:#fff; filter:brightness(1.05); }

    .share{ max-width:700px; margin:10px auto 24px; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start; }
    .sns{
      display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
      border:3px solid #111; border-radius:12px; background:#fff; color:#111; font-weight:900; text-decoration:none;
      box-shadow:4px 4px 0 #000; transition:background .15s, color .15s, filter .15s;
    }
    .sns:hover{ background:#111; color:#fff; filter:brightness(1.05); }
    .bubble.boke::after,
.bubble.tsuk::after,
.bubble.boke::before,
.bubble.tsuk::before{
  content: none !important;
  display: none !important;
  border: none !important;
}
/* === カラオケ風：右→左に全体が現れる（最初は非表示） === */
/* === カラオケ風：左→右に一文字ずつ“ふわっ”と表示 === */
.line{ position:relative; overflow:hidden; }
.line .char{
  opacity:0;
  display:inline-block;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
.line .char.on{
  opacity:1;
  transform: translateY(0);
}

/* 念のため：メタ情報 左寄せ（既に指定済みなら不要） */
.meta{ justify-content:flex-start !important; text-align:left !important; }

/* 吹き出し▽を完全に消す（既に対応済みなら不要） */
.bubble.boke::after, .bubble.tsuk::after, .bubble.boke::before, .bubble.tsuk::before{
  content:none !important; display:none !important; border:none !important;
}
/* === セリフ：一文字ずつ“ふわっ”と出す（左→右）=== */
.line{ position:relative; overflow:hidden; padding:0 !important; }  /* ← 内側の余白を打ち消す */
.line .char{
  opacity:0;
  display:inline-block;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
  margin:0; padding:0;                /* ← 文字ごとの余白もゼロ */
}
.line .char.on{
  opacity:1;
  transform: translateY(0);
}

/* もし .bubble 側にパディングがあるせいで左右に空いて見える場合は最小限だけ残すなど調整してください */
.bubble{ box-sizing:border-box; }     /* ← 計算しやすく */
.bubble .line{ padding:0 !important; }/* ← 念のため二重指定 */

/* 既出の指定（必要に応じて一緒に維持） */
.meta{ justify-content:flex-start !important; text-align:left !important; }
.bubble.boke::after, .bubble.tsuk::after, .bubble.boke::before, .bubble.tsuk::before{
  content:none !important; display:none !important; border:none !important;
}




/* ===== スマホ時のステージとキャラ配置を最適化（サイズは高さ基準で統一） ===== */
@media (max-width:740px){
  .stage{
    background-size: cover;
    background-position: center;
  }

  /* 高さで統一：左右どちらも同じ見た目サイズに */
  .actor{
    height: clamp(90px, 30vw, 150px) !important; /* ← 高さ基準で同じにする */
    width: auto !important;                       /* ← 幅指定は無効化 */
    bottom: 18%;
  }

  /* 位置：幅依存の計算をやめ、中央基準の%とtranslateで安定配置 */
  .actor-boke{
    left: 44%;
    transform: translateX(-100%); /* 右端を中央寄りに */
  }
  .actor-tsuk{
    left: 56%;
    right: auto;
    transform: translateX(0);
  }
}



.like-count{ display:inline-block; padding:8px 10px; border:3px solid #111; border-radius:10px; background:#fff; box-shadow:4px 4px 0 #000; }
.more-card{
  border:3px solid #111; border-radius:12px; background:#fff; box-shadow:6px 6px 0 #000; overflow:hidden;
}
.more-head{ display:flex; flex-direction:column; gap:.25rem; border-bottom:3px solid #111; padding:.5rem .6rem; background:#f8f8f8; }
.more-date{ font-size:.85rem; font-weight:900; }
.more-unit{ font-size:.95rem; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.more-body{ padding:.6rem; display:flex; flex-direction:column; gap:.5rem; }
.more-chars{ display:flex; gap:.5rem; align-items:center; }
.more-char{ display:flex; align-items:center; gap:.35rem; border:1px solid #ddd; border-radius:8px; padding:.3rem .4rem; }
.more-char .role{ font-size:.7rem; background:#666; color:#fff; border-radius:999px; padding:.05rem .4rem; }
.more-char img{ width:38px; height:38px; object-fit:contain; }
.more-char .nick{ font-weight:900; max-width:6.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.85rem; }
.more-excerpt{ border:1px dashed #ddd; border-radius:8px; padding:.45rem .55rem; font-size:.9rem; }
.more-foot{ padding:.55rem .6rem; border-top:1px solid #eee; display:flex; justify-content:flex-end; }
.more-foot .btn{ padding:.4rem .7rem; }
@media (max-width:740px){
  .grid-3{ grid-template-columns:1fr; }
}
/* スマホでは「他の作品も見る」を1列に強制 */
@media (max-width: 960px){
  #moreList{ grid-template-columns: 1fr !important; }
}


/* いいねボタン内のカウント表示 */
.like-btn .count{
  display:inline-block;
  margin-left:6px;
  padding:4px 8px;
  border-radius:10px;
  background:#fff;
  font-weight:900;
  line-height:1;
}
/* 他の作品カード：役ごとのブロックを縦並び（ラベル→画像→ニックネーム） */
.more-chars{ display:flex; gap:.6rem; justify-content:space-between; }
.more-char{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:48%;
  border:1px solid #ddd; border-radius:8px; padding:.35rem .4rem;
}
.more-char .role{
  font-size:.72rem; background:#666; color:#fff;
  border-radius:999px; padding:.05rem .4rem; margin-bottom:.25rem;
}
.more-char img{ width:42px; height:42px; object-fit:contain; }
.more-char .nick{
  margin-top:.25rem;
  font-weight:900;
  font-size:clamp(11px, 2.6vw, 13px);  /* 収まり優先で自動調整 */
  max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* スマホは1カラムで高さに余裕を作る */
@media (max-width:740px){
  .grid-3{ grid-template-columns:1fr; }
  .more-char img{ width:46px; height:46px; }
  .more-char .nick{ font-size:clamp(12px, 3.4vw, 14px); }
}

/* いいねボタンのカウント数字の色を固定 */
#likeBtn .count {
  color: #111;   /* 通常時の色（背景黒に映えるよう黒系推奨） */
  font-weight: bold;
  margin-left: 4px;
}

/* hover 時にも数字の色を変えない */
#likeBtn:hover .count {
  color: #111;   /* hover 時も維持 */
}

/* コンビ名枠 */
.unit-name-box {
  position: absolute;
  top: -28px;           /* ステージより少し上 */
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 3px solid #111;
  border-radius: 4px;
  padding: 4px 16px;
  font-weight: 900;
  font-size: 20px;
  z-index: 5;
}

/* ニックネーム */
.bubble-head .nickname {
  margin-left: 8px;
  font-weight: bold;
  font-size: 14px;
}
/* ステージを基準に絶対配置 */
.stage-wrap { position: relative; }

/* コンビ名の枠（画像の見本風：白地/黒枠/太字） */
.unit-name-box{
  position:absolute; 
  top:50px;                 /* ステージの上に少し飛び出す */
  left:50%; transform:translateX(-50%);
  background:#fff;
  border:3px solid #111;
  border-radius:6px;
  padding:6px 18px;
  font-weight:900;
  font-size:20px;
  z-index:5;
}

/* ニックネーム（バッジの右隣に太字で） */
.bubble-head .nickname{
  margin-left:8px;
  font-weight:700;
  font-size:14px;
}

/* スマホでコンビ名枠をもっと上へ */
@media (max-width: 768px){
  .unit-name-box{
    top: 0px;    /* 既存 -28px からさらに上げる */
  }
}
@media (max-width: 480px){
  .unit-name-box{
    top: 0;    /* 小さい画面ではさらに上げる */
    font-size: 16px;   /* 枠内文字を少し縮小（任意） */
    padding: 4px 12px; /* 余白も少しだけ詰める（任意） */
  }
}

/* 念のため（親がはみ出しを隠さないように） */
.stage-wrap{ overflow: visible; }

/* 中央配置の基準にする */
.stage { position: relative; }

/* 丸い再生ボタン（中央固定） */
.stage-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 9999px;
  border: 4px solid #111;
  background: rgba(255,255,255,0.95);
  color: #111;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 #111, 0 10px 18px rgba(0,0,0,.15);
  cursor: pointer;
  z-index: 6;              /* ステージの画像より前面 */
  transition: transform .08s ease, box-shadow .08s ease, background .2s ease;
}
.stage-play:active{ transform: translate(-50%,-50%) scale(.97); box-shadow: 0 3px 0 #111, 0 6px 12px rgba(0,0,0,.2); }

/* スマホでも必ず中央に */
@media (max-width: 480px){
  .stage-play{ width: 72px; height: 72px; font-size: 24px; border-width: 3px; }
}

/* ホバー時は黒地＋白文字に */
.stage-play:hover,
.stage-play:focus-visible{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* タッチ端末でも押下中は黒に（見た目統一） */
.stage-play:active{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* 他の作品も見る：PCは3列、スマホは1列 */
#moreList.grid-3{
  display: grid;                   /* 既にstyle属性で指定済みでも保険で明示 */
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* ← PC：3カラム */
  gap: 12px;
}

/* スマホ（～960px）は縦並び1列に強制 */
@media (max-width: 960px){
  #moreList.grid-3{
    grid-template-columns: 1fr !important;          /* 競合対策 */
  }
}

/* === コンビ名：小さく・グレー・中央揃え（位置は変更しない） === */
.unit-name-box{
  text-align: center !important;   /* 文字を中央揃え */
}

/* 「コンビ名」ラベル */
.unit-name-box small{
  font-size: 0.7rem !important;    /* 登録日の small 相当の小さめ */
  color: #666 !important;          /* グレー */
  font-weight: 900;                /* 見出しとして少し太め（調整可） */
}

/* 実際のコンビ名テキスト */
.unit-name-box #metaUnitName{
  font-size: 1rem !important;      /* 大きすぎた 20px を小さく */
  color: #000 !important;          /* グレー */
  font-weight: 900;                /* お好みで 600〜700 でもOK */
}

/* === コンビ名：スマホ時も改行させない（長文は省略） === */
.unit-name-box{
  white-space: nowrap !important;      /* 改行しない */
  overflow: hidden;                    /* はみ出し部分を隠す */
  text-overflow: ellipsis;             /* …で省略表示 */
  max-width: 90%;                      /* スマホ画面で左右に収まるように制限 */
  margin: 0 auto;                      /* 中央寄せ */
}
/* === スマホ時：コンビ名枠を内容幅に合わせ、改行させない === */
@media (max-width: 740px){
  .unit-name-box{
    /* 枠幅の固定を解除して内容幅にフィット */
    width: fit-content !important;     /* 主要ブラウザ */
    max-width: none !important;
    /* 旧ブラウザ対策（無視されても支障なし） */
    inline-size: max-content;

    /* 改行禁止＋中央揃え（位置は既存の absolute+left50% を活かす） */
    white-space: nowrap !important;
    text-align: center !important;

    /* 省略記号は出さず、はみ出しも許容（折り返さないのが要件のため） */
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* 子要素側にも念のため nowrap を付与 */
  .unit-name-box small,
  .unit-name-box #metaUnitName{
    white-space: nowrap !important;
  }
}
/* === コンビ名：スマホでも一行表示で改行禁止 === */
.unit-name-box {
  display: inline-block !important; /* 枠を内容幅に合わせる */
  white-space: nowrap !important;   /* 改行禁止 */
  text-align: center !important;    /* 中央揃え */
  max-width: 100% !important;       /* 画面幅に収める */
  overflow: hidden !important;      /* はみ出しは非表示 */
  text-overflow: ellipsis !important; /* 長い場合は … で省略 */
}

.unit-name-box small,
.unit-name-box #metaUnitName {
  white-space: nowrap !important;   /* 子要素も改行させない */
}
/* === コンビ名：Android Chromeでも絶対に改行させない（位置はそのまま） === */
.unit-name-box{
  /* レイアウト */
  display: inline-flex !important;   /* 子要素を同一行に固定 */
  align-items: center !important;
  justify-content: center !important;
  gap: .25em !important;

  /* 改行抑止（CJK向けも含むフルセット） */
  white-space: nowrap !important;        /* 通常の改行禁止 */
  flex-wrap: nowrap !important;          /* flexの折り返し禁止 */
  word-break: keep-all !important;       /* CJKの任意改行を抑止 */
  overflow-wrap: normal !important;      /* 旧: word-wrap */
  line-break: strict !important;         /* CJKの禁則を厳しめに */
  -webkit-line-break: after-white-space !important; /* Chrome系補助 */

  /* 省略記号は使わず、はみ出しも許容（“一行死守”が要件のため） */
  overflow: visible !important;
  text-overflow: clip !important;

  /* 以前の max-width 指定などを無効化して枠幅の固定化を防ぐ */
  width: auto !important;
  max-width: none !important;
  inline-size: auto !important;

  /* 見た目（ご希望の小さめ・グレー・中央） */
  text-align: center !important;
}
.unit-name-box small,
.unit-name-box #metaUnitName{
  white-space: inherit !important;
  word-break: inherit !important;
  overflow-wrap: inherit !important;
}

/* 念のため：<br> が混入している環境でも折り返さない */
.unit-name-box br{ display:none !important; }

  .binge-link {
    display:inline-block;
    padding:12px 24px;
    border:3px solid #000;
    border-radius:9999px;
    background:#fff;
    font-weight:900;
    box-shadow:4px 4px 0 #000;
    text-decoration:none;
    color:#000;
    transition:all 0.25s ease;
  }
  .binge-link:hover {
    background:#000;
    color:#fff;
  }

  .post-reply{
  max-width:700px;
  margin:0 auto 28px;  /* 下に少しゆとり */
}