@charset "UTF-8";

/* ============================================================
 * 🛠️ utilities.css
 * ============================================================
 *
 * 単一目的の atomic class を集約。
 * 元 common.css / common-new.css に分散していた utility 群を分離。
 *
 * 含まれる種別:
 *   - 文字色(.color-*, .fc-*)
 *   - 太字+色(.red_b)
 *   - アスペクト比(.aspect_*)
 *   - 表示制御(.pc-only, .sp-only, .pc-none, .sp-none)
 *   - 余白ヘルパー(.summarize, .summarize50)
 *
 * 注意: breakpoint は元の挙動を完全保持(768px のまま)。
 *      プロジェクト規約 750px への統一は別タスクで実施予定。
 * ============================================================ */


/* -----------------------------
 * 文字色
 * ----------------------------- */
.color-red {
  color: #e04646;
}

.fc-e04646 {
  color: #e04646;
}

.fc-f6f789 {
  color: #f6f789;
}

.fc-ff8080 {
  color: #ff8080;
}


/* -----------------------------
 * 太字+色装飾
 * ----------------------------- */
.red_b {
  color: #e04646;
  font-weight: bold;
}


/* -----------------------------
 * アスペクト比
 * ----------------------------- */
.aspect_5-3 {
  aspect-ratio: 5 / 3;
}

.aspect_5-4 {
  aspect-ratio: 5 / 4;
}

.aspect_15-8 {
  aspect-ratio: 15 / 8;
}


/* -----------------------------
 * レスポンシブ表示制御
 * - .pc-only → 768px 以上で表示、未満で非表示(元 common-new.css)
 * - .sp-only → 768px 未満で表示、以上で非表示(元 common-new.css)
 * - .pc-none → PC で常に非表示(元 pc/style.css、PCのみロード)
 * - .sp-none → SP で常に非表示(元 sp/base.css、SPのみロード)
 *
 * 注意: 768px と 750px の breakpoint 混在は元コードのまま。
 *      タブレット中間帯(751-767px)の挙動を変えないため保持。
 * ----------------------------- */
.pc-only {
  display: none;
}

.sp-only {
  display: block;
}

@media (min-width: 768px) {
  .pc-only {
    display: block;
  }

  .sp-only {
    display: none;
  }
}

.sp-none {
  display: block;
}

@media print, screen and (max-width: 750px) {
  .sp-none {
    display: none !important;
  }
}

.pc-none {
  display: block;
}

@media print, screen and (min-width: 751px) {
  .pc-none {
    display: none !important;
  }
}


/* -----------------------------
 * 余白ヘルパー
 * ----------------------------- */
.summarize {
  width: 100%;
  margin-bottom: 20px;
}

.summarize50 {
  margin-bottom: 50px;
}