/*
 * 新デザイン（/newdesign/ir）の IRニュースセクション用 iframe CSS。
 *
 * リセット/ベースは ../../css/style.css を流用し、ここでは xj-storage
 * （XJ_ir.js）が生成する s_eir* マークアップに新デザインの見た目を上書きする。
 * publicフォルダではSCSSが使えないため素の CSS。色値は新デザインのトークンと同値
 * （#1d1303 = $color-black / #c7c4c0 = $color-black3 / #fff = $color-white）。
 * 既存の ../../css/top.css は旧デザイン用で変更しないため、本ファイルで代替する。
 *
 * 大きさはページ側の fluid ヘルパー（src/_styles/_fluid.scss）と同じ考え方で、
 * 枠のデザイン幅を基準にした 100vw の割合で書く。枠の中では 100vw が枠の幅なので、
 * この枠（PC 1000 / SP 336）を基準にすると、ページ側の `fluid.pc()` と同じ実寸になる
 * （例: 14 / 1000 * 100vw ＝ ページの 14 / 1440 * 100vw）。
 */

/* 新デザインは字間を 0 に揃える（style.css の 0.07em を打ち消す）。 */
body {
  font-size: calc(14 / 1000 * 100vw);
  letter-spacing: normal;
}

.s_eirQuarterBlock {
  margin-bottom: 0;
}

/* 行：日付・カテゴリ・タイトルを1行に並べる。行間は罫線で区切る。
   縦は上下中央ではなく1行目の文字に合わせる。中央だと、タイトルが2行に
   折り返した行だけ日付とカテゴリが下がり、行をまたぐと縦位置が揃わない
   （デザインフィードバック「1350px 前後でカテゴリの縦軸が揃わない」）。 */
.s_eirList_item {
  align-items: baseline;
  border-top: 1px solid #c7c4c0;
  padding: calc(40 / 1000 * 100vw) calc(30 / 1000 * 100vw);
  position: relative;
}

.s_eirList_item:last-child {
  border-bottom: 1px solid #c7c4c0;
}

/* 日付（14px）。カテゴリバッジ開始位置（左端から約125px）に合わせて幅を確保。
   行は flex なので、幅を決めるだけでは足りない。タイトルが長い行では余白の
   奪い合いで日付だけが縮み、カテゴリバッジの左端が行ごとにずれる
   （デザインフィードバック「1350px 前後でカテゴリの縦軸が揃わない」）。
   縮まないようにして、あふれはタイトルの折り返しで吸わせる。 */
.s_eirModule_date {
  color: #1d1303;
  flex-shrink: 0;
  font-size: calc(14 / 1000 * 100vw);
  white-space: nowrap;
  width: calc(95 / 1000 * 100vw);
}

/* ニュース一覧ではサムネイル列は使わない。 */
.s_eirModule_thumbnail {
  display: none;
}

/* カテゴリバッジ（白地・枠#c7c4c0・角丸81px・約100x22・文字12px）。 */
.s_eirModule_category {
  min-width: calc(100 / 1000 * 100vw);
}

.s_eirModule_category_icon {
  background: #fff;
  border: 1px solid #c7c4c0;
  border-radius: 81px;
  color: #1d1303;
  display: inline-block;
  font-size: calc(12 / 1000 * 100vw);
  line-height: calc(20 / 1000 * 100vw);
  margin-left: 0;
  min-width: calc(100 / 1000 * 100vw);
  padding: 0 calc(10 / 1000 * 100vw);
  text-align: center;
}

/* タイトル（14px）＋ PDFアイコン＋サイズ表記。 */
.s_eirModule_titleBox {
  margin-left: calc(24 / 1000 * 100vw);
}

.s_eirModule_title,
.s_eirModule_title_link {
  color: #1d1303;
  font-size: calc(14 / 1000 * 100vw);
}

.s_eirModule_type_figure_image-pdf {
  height: calc(15 / 1000 * 100vw);
}

.s_eirModule_size {
  color: #1d1303;
  font-size: calc(14 / 1000 * 100vw);
}

/* SP（Figma: 335px 幅）。日付・カテゴリを1行目、タイトルを次行に折り返す。
   境目はページの 768 に対応する枠幅で判定する。この枠は PC 1000 / 1440 の割合で
   置かれるので 768 × 1000 / 1440 = 533。767 のままだと、枠幅が 767 になる
   ページ幅 1104 付近から、ページは PC のままここだけ SP の並びになる。 */
@media screen and (max-width: 533px) {
  /* この幅ではタイトルが次の行へ回るので、1行目に並ぶのは日付とカテゴリだけになる。
     文字に合わせる必要がなくなり、枠を持つカテゴリと日付は上下中央でそろえた方が
     原本（4519:12024 / 12025）に近い。 */
  body {
    font-size: calc(14 / 336 * 100vw);
  }

  .s_eirList_item {
    align-items: center;
    padding: calc(20 / 336 * 100vw) calc(16 / 336 * 100vw);
  }

  .s_eirModule_date {
    font-size: calc(14 / 336 * 100vw);
    width: auto;
  }

  .s_eirModule_category {
    min-width: auto;
  }

  .s_eirModule_category_icon {
    font-size: calc(12 / 336 * 100vw);
    line-height: calc(20 / 336 * 100vw);
    margin-left: calc(16 / 336 * 100vw);
    min-width: calc(100 / 336 * 100vw);
    padding: 0 calc(10 / 336 * 100vw);
  }

  .s_eirModule_titleBox {
    margin-left: 0;
    margin-top: calc(16 / 336 * 100vw);
    width: 100%;
  }

  .s_eirModule_title,
  .s_eirModule_title_link,
  .s_eirModule_size {
    font-size: calc(14 / 336 * 100vw);
  }

  .s_eirModule_type_figure_image-pdf {
    height: calc(15 / 336 * 100vw);
  }
}