@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- news_monitor :モニター記事の本文部品の補正（段階04でWP用に追加）

静的原本 news/detail/index.html の商品画像は、見本画像（1923×1478）に合わせて
width/height を％で固定し、枠（626:329）で上下を切り抜いている。
WPの商品画像（gaito_syohin_img）は実データに 1920×1477 以外（正方形・横長など）もあるため、
object-fit で縦横比を保つ。見本と同じ比率の画像では表示は変わらない。

- 読込はモニター記事の詳細だけ（inc/monitor.php）。通常記事・TOP・一覧・ACCへ出さない。
- 支給の news_detail.css は作り直さない。
- 生成：asset/scss で `node build.cjs news_monitor`（news_monitor.css を出力）。
-------------------------*/
.news-detail__product .news-detail__product-img--fit {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.news-detail__product {
  /* 長い商品名・英数字の連続で枠からはみ出さない */
}
.news-detail__product .news-detail__product-name--wrap {
  overflow-wrap: anywhere;
  /* PC：支給CSSは line-height 1（1行の見本）で、2行になると行が接する。
     行送りを 27px にし、増えた上下の余白（各4.5px）を margin で相殺して、1行のときの位置は見本と同じにする */
}
@media screen and (min-width: 769px) {
  .news-detail__product .news-detail__product-name--wrap {
    margin-top: 11.9px; /* 16.4 − 4.5 */
    margin-bottom: -4.5px;
    line-height: 27px;
  }
}