/*
 * IRニュース一覧の iframe 用 CSS。行の並びと大きさを持つ。
 *
 * タブの見た目は ./tabs.css が持つ。ここは配信元（xj-storage の main.css）が描く
 * 行のうち、幅が変わったときの崩れだけを直す。
 *
 * 大きさは配信元が px で固定しているが、枠の中の文字は ../../css/fluid.css が
 * 枠幅に対する割合で拡縮する。そのままだと枠が広がるほどタイトルだけが伸び、
 * 日付・カテゴリ・PDFアイコンが元の大きさに取り残される。実測では枠 2133px
 * （画面 2560 相当）でタイトル 24.9px に対し日付は 14px のままだった。枠 1200px で
 * だけ両者が 14px で一致するので、そこから離れるほど差が開く（枠 640px では逆に
 * タイトル 7.5px に対し日付が 14px と大きい）。
 * そこで配信元の値をそのまま割合へ置き換える。基準は fluid.css と同じ枠のデザイン幅
 * （PC 1200 / SP 335）で、切り替えの境目も fluid.css に合わせる。デザイン幅では
 * 配信元と同じ実寸になり、そこから上下へ比例して伸縮する。
 * 出所はチケットのデザインフィードバック「ブラウザ倍率を変えたときにirframe内でも
 * 相対px指定ができている所とできていないところがある」。
 *
 * public 配下では SCSS が使えないため素の CSS。
 */

/* 日付の欄。配信元は幅を与えているが「縮まない」指定が無いため、行は横並びの
   箱で余白を奪い合う。タイトルが長い行ほど日付だけが縮み、その右に続くカテゴリの
   左端が行ごとに手前へ寄っていた（デザインフィードバック「ウィンドウ幅が 1350px
   前後で s_eirModule_category_icon の縦軸が揃わない」）。実測では枠が 1000px の
   とき最大 18px ずれる。縮まないようにして、あふれはタイトルの折り返しで吸わせる。 */
.s_eirModule_date {
  flex-shrink: 0;
  font-size: calc(14 / 1200 * 100vw);
  width: calc(78 / 1200 * 100vw);
}

.s_eirModule_category {
  min-width: calc(120 / 1200 * 100vw);
}

/* 日付とカテゴリの欄。中身をタイトル1行目の文字にそろえる。
   指定が無いと欄は行の高さまで引き伸ばされ、中のカテゴリバッジは配信元が与える
   行の高さと余白の分だけ下へずれる。枠が広いほど差が開き、実測で枠 1400px のとき
   3px、1600px のとき 5.5px 下がっていた。
   上下中央には寄せない。中央にするとタイトルが2行になる行だけ日付とバッジが下がり、
   行をまたぐと縦位置が揃わない。IRトップのニュース枠（../top/news.css）も同じ理由で
   文字の基準線にそろえている。
   対象は行の直下にある欄だけに絞る。配信元が同じクラス名を別の場所へ描いても
   巻き込まないようにするため。 */
.s_eirModule_eirItem > .s_eirModule_date,
.s_eirModule_eirItem > .s_eirModule_category {
  align-items: baseline;
  display: flex;
}

.s_eirModule_category_icon {
  border-radius: calc(16 / 1200 * 100vw);
  font-size: calc(12 / 1200 * 100vw);
  margin-left: calc(8 / 1200 * 100vw);
  min-width: calc(100 / 1200 * 100vw);
  padding: calc(1 / 1200 * 100vw) calc(10 / 1200 * 100vw);
}

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

/* 別ページへ飛ぶ行の末尾に付く矢印。配信元は擬似要素の箱を px で持ち、背景画像の
   大きさを指定していないため、箱を割合にすると絵だけ元の大きさで取り残される。
   箱に合わせて縮むように指定を足す。 */
.s_eirList_item-url a .s_eirModule_type::after,
.s_eirList_item-url .s_eirModule_title a::after {
  background-size: contain;
  height: calc(13 / 1200 * 100vw);
  width: calc(20 / 1200 * 100vw);
}

/* 行の余白と欄どうしの間隔は、配信元が狭い幅で別の値へ切り替えて縦積みの見た目を
   作っている。そちらの境目（枠 767px）と食い違うと、縦積みなのにタイトルだけ右へ
   ずれるので、ここは配信元と同じ境目で上書きする。
   欄どうしの間隔は配信元が行の直下すべてに同じ値で与えており、タイトルの手前だけ
   別の値を重ねている。片方だけ割合にすると枠が広いときに間隔が不揃いになるため
   （実測: 枠 2133px でタイトル手前 42.7px に対しカテゴリ手前 20px）、両方を置き換える。 */
@media screen and (min-width: 768px) {
  .s_eirList_item {
    padding: calc(40 / 1200 * 100vw) calc(30 / 1200 * 100vw);
  }

  .s_eirModule_eirItem > * {
    margin-left: calc(20 / 1200 * 100vw);
  }

  .s_eirModule_titleBox {
    margin-left: calc(24 / 1200 * 100vw);
  }
}

/* 枠の SP 幅 335 を基準にする。境目は fluid.css の本文と同じ 639px。
   この幅では配信元がタイトルを次の行へ送るため、タイトルの手前の間隔は 0 のままにする
   （行の直下すべてに与える間隔を割合にすると、そちらが勝って縦積みのタイトルが右へずれる）。
   枠 640〜767px は配信元も縦積みだが本文は PC 側の基準で拡縮するため、余白と間隔は
   配信元の値のままにして触らない。 */
@media screen and (max-width: 639px) {
  .s_eirList_item {
    padding: calc(20 / 335 * 100vw);
  }

  .s_eirModule_eirItem > * {
    margin-left: calc(20 / 335 * 100vw);
  }

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

  .s_eirList_item-url a .s_eirModule_type::after,
  .s_eirList_item-url .s_eirModule_title a::after {
    height: calc(13 / 335 * 100vw);
    width: calc(20 / 335 * 100vw);
  }

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

  .s_eirModule_category {
    min-width: calc(120 / 335 * 100vw);
  }

  .s_eirModule_category_icon {
    border-radius: calc(16 / 335 * 100vw);
    font-size: calc(12 / 335 * 100vw);
    margin-left: calc(8 / 335 * 100vw);
    min-width: calc(100 / 335 * 100vw);
    padding: calc(1 / 335 * 100vw) calc(10 / 335 * 100vw);
  }

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