@charset "utf-8";
/*
 * ねんDo! 特設の手直し（#384）。
 *
 * lib/ 配下の他の CSS は旧サーバーからの機械的な複製（rem 値を 4/3 倍にしただけ）なので、
 * 手で直したいものはこのファイルに書く。スナップショットの <link> で最後に読み込む。
 */

/* 「今月の技」の巻物から「◯月の技」がはみ出すのを直す。
 *
 * b0ab68b で em 指定を rem に揃えて**文字と箱の比率**は直っているが、縦位置が残っている。
 * 巻物 technique_month_bg.png（739x214）の枠は高さ 8%〜68%。旧CSSは月・技名それぞれに
 * 固定の top%（月 20%・技名 21%）を置いて中央に見せているが、「◯月<br>の技」は必ず
 * 2行になるので入らない。実測（PC 1476px・2026-08-19）: 月は枠上端から 47px〜177px、
 * 枠の底は約160px なので **17px はみ出して緑の枠線に文字が乗る**。
 * 比率で効く問題なので、幅を変えても同じだけはみ出す。
 *
 * 固定 top% を画面幅ごとに足していってもキリがないので、枠の中心（33.5%）に置いて
 * translateY(-50%) で引き戻す＝行数と文字サイズに依らず必ず中央に入る形にする。
 * 技名が1文字でも4文字でも、来月以降の入れ替えでそのまま効く。
 *
 * ⚠️ ここは旧サイトからの意図的な逸脱。旧サーバーの new_nendo_technique.css を直接読んで
 * 確認したが、旧サイトも同じ固定 top% で同じようにはみ出している。
 */
.special-legacy .month,
.special-legacy .wazatitle {
  top: 33.5%;
  transform: translateY(-50%);
  line-height: 1.2;
}

/* 「もりい ユカ」。本文が font-weight:800 なのに見出しだけ 400 で軽く見えていた。
   太さを本文に合わせ、左端も本文の字下げに揃える。 */
.teacher_name h4 {
  font-weight: 800;
  margin-left: 1.3333rem;
  margin-bottom: 0.6667rem;
  line-height: 1.2;
}

/* ねんざぶろうのセリフ（吹き出しの中の文字）がSPでずれるのを直す。
 *
 * 旧CSSは `top:28%` `left:30%` のような固定値で位置を作っており、さらに
 * 768px以下の指定だけ **font-size:2.3vw** とビューポート幅に直結していた。
 * 吹き出しの画像は rem スケールで縮むのに文字だけ別の基準で動くため、
 * 幅を変えるたびに位置関係が崩れる（2026-08-19 先方指摘。SPで左下にずれていた）。
 *
 * 吹き出し画像 technique_month_comment.png（710x187）の黄色い内側は
 * x 8.7%〜97.9% / y 21.9%〜75.9%、中心は x 53.3% / y 48.9%。
 * 固定値を足していってもキリがないので、月・技名（上の .month/.wazatitle）と
 * 同じく中心に置いて transform で引き戻す。行数にも文字数にも依らず収まる。
 */
.special-legacy .technique_comment_2l {
  position: relative;
}
.special-legacy .technique_comment_2l p {
  top: 48.9%;
  left: 53.3%;
  right: auto;
  width: 82%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.4;
}

/* vw をやめて rem に戻す。SPは root font-size が SP 基準で動くので、
   吹き出しの画像と同じ比率で縮む。 */
@media screen and (max-width: 768px) {
  .special-legacy .technique_comment_2l p {
    font-size: 1.2rem;
    /* 吹き出しの黄色い内側は画像高さの 54% しかない。3行入るよう行間を詰める */
    line-height: 1.2;
  }
}
@media screen and (max-width: 480px) {
  .special-legacy .technique_comment_2l p {
    font-size: 1.0667rem;
    line-height: 1.15;
  }
}