/*
 * 新デザイン（/newdesign/ir/news）の IRニュース一覧 iframe 用 CSS。
 *
 * 配信元（xj-storage の main.css）が絞り込みタブを赤（#bf0000）の角丸で描くため、
 * 新デザインの IRライブラリーのタブ（白地・黒枠・角丸なし、現在地とホバーはオレンジ）に
 * 上書きする。値は src/app/newdesign/ir/components/libraryTabs の指定と同じ。
 * 旧デザインも同じ配信を ../news/index.html 経由で使っており、そちらは赤のままに
 * するため、HTML ごと分けてこのファイルを新デザイン側だけに読ませている。
 *
 * public 配下では SCSS が使えないため素の CSS。色は新デザインのトークンと同値
 * （#000 = Figma PROGRIT/Base/black / #f39800 = PROGRIT/primary/orange / #fff = $color-white）。
 */

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

/* タブは等分のグリッドで並べる。固定幅にすると配信元の flex-flow: wrap で
   幅が 1px 足りないだけでも折り返してしまうため、幅は列に任せる。 */
.s_eirTab {
  display: grid;
  gap: calc(10 / 335 * 100vw);
  grid-template-columns: repeat(2, 1fr);
  justify-content: initial;
}

/* 枠と地色は中の a が持つ。li は配信元の指定を落として器に徹する。 */
.s_eirTab li,
.s_eirTab li.active {
  background: none;
  border: none;
  border-radius: 0;
  width: auto;
}

.s_eirTab li a,
.s_eirTab li.active a,
.s_eirTab li:hover a {
  align-items: center;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  color: #000;
  display: flex;
  font-size: calc(14 / 335 * 100vw);
  font-weight: 700;
  height: calc(40 / 335 * 100vw);
  justify-content: center;
  line-height: 1.5;
  padding: 0;
  text-align: center;
}

/* 現在地。配信元は li.active に色を当てるため、中の a まで届かせる。 */
.s_eirTab li.active a {
  background: #f39800;
}

/* タッチ端末でホバーが固着しないよう囲う。 */
@media (any-hover: hover) {
  .s_eirTab li a:hover {
    background: #f39800;
  }
}

/*
 * PC は 4 つ横並び。列を 4 等分にするので、幅は枠に追従する
 * （枠が 1200 のとき 1 つ 285 = (1200 - 20 × 3) / 4 で原本の指定値に一致する）。
 *
 * 境界が 768 でなく 640 なのは、この @media が iframe の内側で評価される＝ページの
 * ビューポート幅ではなく iframe 自身の幅で切り替わるため。iframe の幅はページ側の
 * 指定（newsIframe の .frame）で PC が 1200/1440 = 83.333vw なので、ページの
 * PC / SP 境界 768px に対応する iframe 幅は 768 × 1200 / 1440 = 640px になる。
 * 768 のままだとビューポート 768〜922px でページは PC なのにタブだけ SP の 2 列になる。
 *
 * なお枠の式は SP 側だけ 335/375 = 89.333vw で PC 側と違うため、ページの境界を
 * iframe の幅ひとつで完全に言い当てることはできない（ビューポート 767 では枠が 685
 * になり、640 を超えるのでこの PC 用の指定が当たる）。ずれが残るのはビューポート
 * 約 717〜767 の帯だけで、そこでも枠 640〜685 に 4 つ入るため破綻はしない。
 * 逆に 768 を採ると、より一般的な 768〜922 の帯でページと食い違う。
 */
@media screen and (min-width: 640px) {
  .s_eirTab {
    gap: calc(20 / 1200 * 100vw);
    grid-template-columns: repeat(4, 1fr);
  }

  .s_eirTab li a,
  .s_eirTab li.active a,
  .s_eirTab li:hover a {
    font-size: calc(16 / 1200 * 100vw);
    height: calc(50 / 1200 * 100vw);
  }
}