@charset "UTF-8";
/* =========================================================
   NEWS 詳細（9HP news details.pdf）
   各 top 値は「PDF上のY座標 − セクション開始Y」
   ========================================================= */

.page-news-detail .ttl__en { letter-spacing: .25em; }
.page-news-detail .ttl__en::before { background: #5dc8f5; }

/* ---------- 詳細 (y66–) ---------- */
/* フッターの文字位置はデザインでは帯の開始より12px上から始まるため、白地のセクションを12px重ねる */
.nd { height: auto; background: #fff; z-index: 1; }
.nd .inner { padding: 385px 0 85px; }
.nd__wm { left: 108px; top: -25px; color: #f1f1f1; }
.nd__en { left: 103px; top: 58px; color: var(--c-text2); }
.nd__cat { left: 99px; top: 99px; line-height: 45px; letter-spacing: 0; color: var(--c-text2); white-space: nowrap; }
.nd__hero { left: 665px; top: 63px; width: 353px; height: 257px; overflow: hidden; --cx: 25px; --cy: 34px; }
.nd__hero img { position: absolute; left: 0; top: -2px; width: 387px; height: 259px; }

/* 記事（MT エントリー）：通常フロー。タイトル・本文は長さに応じて自然に折り返し、下の要素は自動で送られる */
.nd__article { position: relative; width: 610px; margin-left: 249px; }
.nd__meta { display: flex; align-items: center; }
.nd__date { flex: none; width: 89px; font-size: 12px; line-height: 20px; letter-spacing: .06em; color: var(--c-sub2); }
.nd__tag { flex: none; width: 89px; height: 24px; letter-spacing: .06em; transition: opacity .2s; --cx: 7px; --cy: 10px; } /* カテゴリ（MT のベースネームを tag-- に出力）。一覧の該当カテゴリへのリンク */
.nd__tag:hover { opacity: .7; }
.nd__meta .tag--press { background: #5dc8f5; }
.nd__meta .tag--media { background: #eb6d60; }
.nd__meta .tag--daily { background: #d1ed95; }
.nd__meta .tag--award { background: #b3c1f9; }
.nd__meta .tag--sustainability { background: #58c185; }
.nd__meta .tag--info { background: #e3e3e3; }
.nd__ttl { margin-top: 41px; font-size: 30px; font-weight: 700; line-height: 1.6; letter-spacing: 0; color: var(--c-text2); }
.nd__img { position: relative; width: 584px; height: 257px; margin: 43px 0 0 5px; overflow: hidden; --cx: 29px; --cy: 40px; }
.nd__img img { position: absolute; left: 0; top: -92px; width: 584px; height: 390px; }

/* 本文：MT のリッチテキスト（p / h2 / h3 / ul / ol / img / a）をそのまま受ける汎用スタイル。行間は現行サイト基準（本文 1.8・見出し 1.6） */
.nd__body { display: flow-root; max-width: 604px; margin: 46px 0 0 1px; font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: var(--c-text2); overflow-wrap: anywhere; }
.nd__body > * + * { margin-top: 27px; }
.nd__body h2 { margin-top: 54px; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: .06em; }
.nd__body h3 { margin-top: 40px; font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: .06em; }
.nd__body h2 + *, .nd__body h3 + * { margin-top: 19px; }
.nd__body > :first-child { margin-top: 0; }
.nd__body p { display: flow-root; } /* 回り込み画像を段落内で完結させる */
.nd__body ul, .nd__body ol { padding-left: 1.5em; }
.nd__body ul { list-style: disc; }
.nd__body ol { list-style: decimal; }
.nd__body strong, .nd__body b { font-weight: 700; }
.nd__body a { text-decoration: underline; text-decoration-color: #919191; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: opacity .2s; }
.nd__body a:hover { opacity: .6; }
.nd__body img { display: inline; max-width: 100%; height: auto; margin: 10px 0; vertical-align: top; }
.nd__body .mt-image-center { display: block; margin: 10px auto; }
.nd__body .mt-image-left { float: left; margin: 0 20px 20px 0; }
.nd__body .mt-image-right { float: right; margin: 0 0 20px 20px; }

/* 関連タグ（MT のループで出力）：幅は文字数なり */
.nd__chips { display: flex; flex-wrap: wrap; gap: 11px; width: 597px; margin: 46px 0 0 -4px; padding: 33px 0 0 7px; border-top: 1px solid #eeeeee; }
.nd__chips a, .nd__chips span {
  display: flex; align-items: center; justify-content: center; height: 37px; padding: 0 18px; background: #f1f1f1;
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .08em; color: var(--c-text); white-space: nowrap;
  transition: opacity .2s;
}
.nd__chips a:hover { opacity: .7; }
.nd__chips .nd__chip--sustainability { background: #f0988f; } /* サステナビリティのカテゴリは強調（デザインの「サステナ連動」チップ） */

.nd__back { display: flex; align-items: center; gap: 20px; width: fit-content; margin: 57px 0 0 250px; font-size: 12px; font-weight: 700; line-height: 20px; letter-spacing: .04em; color: var(--c-text2); white-space: nowrap; transition: opacity .2s; }
.nd__back:hover { opacity: .6; }
.nd__back .arrow { width: 30px; height: 30px; transform: scaleX(-1); }

/* =========================================================
   SP（〜767px）　※SPデザインなし：TOP/about の SP 作法に揃えて1カラム化
   ========================================================= */
@media (max-width: 767px) {
  .page-news-detail main .abs { position: relative; left: auto; top: auto !important; }
  .nd .inner { padding: 40px 0 70px; }
  .page-news-detail main .nd__wm { position: absolute; left: 18px; top: 10px !important; font-size: 60px; }
  .nd__en { margin-left: 14px; }
  .nd__cat { display: block; margin: 10px 20px 0; line-height: 43px; }
  .nd__hero { display: block; width: auto; height: auto; aspect-ratio: 353 / 257; margin: 26px 20px 0; }
  .nd__hero img { left: 0; top: -.8%; width: 109.6%; height: 100.8%; }

  .nd__article { width: auto; margin-left: 0; }
  .nd__meta { margin: 50px 20px 0; }
  .nd__date { width: auto; }
  .nd__tag { margin-left: 21px; }
  .nd__ttl { margin: 18px 20px 0; font-size: 22px; }
  .nd__img { width: auto; height: auto; aspect-ratio: 584 / 257; margin: 28px 20px 0; --cx: 20px; --cy: 28px; }
  .nd__img img { top: -35.8%; width: 100%; height: auto; }

  .nd__body { max-width: none; margin: 30px 20px 0; letter-spacing: .04em; }
  .nd__body > * + * { margin-top: 20px; }
  .nd__body h2, .nd__body h3 { margin-top: 40px; }
  .nd__body h2 + *, .nd__body h3 + * { margin-top: 12px; }
  .nd__body > :first-child { margin-top: 0; }
  .nd__body .mt-image-left, .nd__body .mt-image-right { float: none; display: block; margin: 0 0 20px; }

  .nd__chips { width: auto; margin: 40px 20px 0; padding: 28px 0 0; gap: 10px; }

  .nd__back { margin: 44px 0 0 20px; }
}