@charset "UTF-8";
/* =========================================================
   SUSTAINABILITY（5HP sustainability.pdf）
   各 top 値は「PDF上のY座標 − セクション開始Y」
   各セクションは「上部＝絶対配置（.abs）／その下＝フロー配置（RELATED NEWS・バナー）」。
   RELATED NEWS（最上段のみ）は MT のニュース記事ループ（サステナビリティのカテゴリ）で出力する前提なので、
   件数・タイトルの長さで高さが変わっても、後続（MORE・セクションの高さ）が自動で下へずれるようにしている。
   各テーマ（社会課題・環境・働く人・地域社会・防災）には RELATED NEWS を置かない。
   行間は現行サイト基準（本文 1.8）。行間変更で文章ブロックの高さが変わった分は、後続要素の top と
   RELATED NEWS の開始位置（.inner の padding-top）を詰めて「ブロック下端〜次の要素」の余白を保っている。
   ========================================================= */

.page-sustain .ttl__en { color: #424242; letter-spacing: .25em; }
.page-sustain .ttl__en::before { width: 20px; background: #68cff6; }
.page-sustain .ttl__ja { line-height: 45px; letter-spacing: 0; color: #424242; }
.page-sustain .ttl__bg { color: #f4f4f4; }

.sus-lead { font-size: 12px; line-height: 1.8; color: #7c7c7c; white-space: nowrap; }

/* 画像（右下カット） */
.sus-img { width: 354px; height: 258px; overflow: hidden; --cx: 30px; --cy: 40px; }
.sus-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sus-img--environment img { object-position: 50% 85.3%; }
.sus-img--wellbeing img { object-position: 50% 40.9%; }
.sus-img--community img { object-position: 50% 58.6%; }

/* 箇条書き */
.sus-list { width: 478px; }
.sus-list li {
  position: relative; display: flex; align-items: center; padding-left: 26px; border-bottom: 1px solid #e7e7e7;
  font-size: 12px; line-height: 1.8; color: #3a3a3a; white-space: nowrap;
}
.sus-list li::before { content: ""; position: absolute; left: 3px; top: calc(50% - 4px); width: 7px; height: 7px; background: #68cff6; }
.sus-list li.l2::before { top: calc(50% - 14.8px); } /* 1行目の中央 */

/* ---------- RELATED NEWS（見出しラベル＋ニュース行＋一覧リンク） ----------
   ニュース行は全行共通ルールのみ（行ごとの位置指定なし）。日付・カテゴリ・タイトル・矢印を横並びにし、
   タイトルが長い場合は矢印の手前で自然に折り返して行が高くなる。MORE はリスト右端に揃えてリストの下へ */
.sus-related { position: relative; display: flex; flex-direction: column; width: 916px; }
.sus-news { margin-top: 28px; }
.sus-news li { border-bottom: 1px solid #ececec; }
.sus-news a { position: relative; display: flex; align-items: flex-start; padding: 30px 10px 25px 8px; }
.sus-news time { flex: none; width: 121px; margin-top: 2px; font-size: 12px; line-height: 20px; letter-spacing: .06em; color: #7c7c7c; }
.sus-news__tag { flex: none; width: 88px; height: 24px; margin-right: 47px; letter-spacing: .05em; color: #3a3a3a; }
.sus-news__tag--press { background: #68cff6; } /* カテゴリ：プレスリリース */
.sus-news__tag--media { background: #ee786b; } /* カテゴリ：メディア掲載 */
.sus-news__tag--daily { background: #d1ed95; } /* カテゴリ：現場の日常 */
.sus-news__tag--award { background: #b3c1f9; } /* カテゴリ：表彰・認定 */
.sus-news__tag--sustainability { background: #58c185; } /* カテゴリ：サステナビリティ（メインカテゴリの場合） */
.sus-news__tag--info { background: #e3e3e3; } /* カテゴリ：お知らせ */
.sus-news__ttl { flex: 1 1 0; min-width: 0; margin: 1.2px 40px 0 0; font-size: 12px; font-weight: 500; line-height: 1.8; letter-spacing: .06em; color: #424242; }
/* PC：行全体の色変化はなし。矢印のみ控えめに反応 */
.sus-news .arrow { flex: none; transition: transform .2s; }
.sus-news a:hover .arrow { transform: translateX(3px); }
.sus-more { align-self: flex-end; margin-top: 20px; gap: 19px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #424242; white-space: nowrap; }

/* ---------- INTRO + RELATED NEWS ---------- */
.sus-a .inner { padding: 480px 0 70px; } /* padding-top＝RELATED NEWS の位置（写真の下端 417px から約 60px） */
.sus-a__wm { left: -10px; top: -9px; font-size: 110px; line-height: 110px; writing-mode: vertical-rl; }
.sus-a__en { left: 106px; top: 57px; }
.sus-a__ja { left: 101px; top: 99px; }
.sus-lead--intro { left: 101px; top: 169px; }
.sus-img--intro { left: 667px; top: 63px; height: 354px; --cy: 39px; }
.sus-img--intro img { left: -79px; top: -5px; width: 539px; height: 360px; }
.sus-a .sus-related { margin-left: 103px; }

.sus-anchor { left: 100px; top: 269px; width: 496px; height: 101px; border-top: 1px solid #def4f8; border-bottom: 1px solid #bce8f0; }
.sus-anchor a {
  position: absolute; display: flex; align-items: center; gap: 16px; height: 20px;
  font-size: 12px; line-height: 20px; letter-spacing: .06em; color: #3a3a3a; white-space: nowrap; transition: opacity .2s;
}
.sus-anchor a::before { content: ""; width: 18px; height: 18px; background: url("../img/common/arrow-down.svg") center / 100% 100% no-repeat; }
.sus-anchor a:hover { opacity: .6; }
.sus-anchor a:nth-child(1) { left: 5px; top: 17px; }
.sus-anchor a:nth-child(2) { left: 188px; top: 17px; }
.sus-anchor a:nth-child(3) { left: 5px; top: 64px; }
.sus-anchor a:nth-child(4) { left: 159px; top: 64px; }


/* ---------- SOCIAL INNOVATION（旧 INTRO セクションの後半を分割。各 top は旧値 −423） ---------- */
.sus-s .inner { padding: 387px 0 90px; } /* 写真の下端まで＋下余白 */
.sus-s__wm { left: 96px; top: 8px; font-size: 100px; }
.sus-s__en { left: 104px; top: 78px; }
.sus-s__ja { left: 100px; top: 119px; }
.sus-lead--social { left: 105px; top: 191px; }
.sus-list--social { left: 105px; top: 255px; }
.sus-list--social li:nth-child(1) { height: 53px; }
.sus-list--social li:nth-child(2) { height: 36px; }
.sus-list--social li:nth-child(3) { height: 34px; }
.sus-img--social { left: 665px; top: 129px; }

/* ---------- ENVIRONMENT (y1516–2319) ---------- */
.sus-b { background: #f3f3f3; }
.sus-b .inner { padding: 398px 0 90px; } /* 写真の下端まで＋下余白 */
.sus-b__wm { left: 284px; top: -13px; font-size: 110px; color: #fff !important; }
.sus-b .sus-news li { border-bottom-color: #e2e2e2; }
.sus-b__en { left: 110px; top: 88px; }
.sus-b__ja { left: 106px; top: 130px; }
.sus-lead--environment { left: 110px; top: 202px; }
.sus-list--environment { left: 110px; top: 292px; width: 479px; }
.sus-list--environment li:nth-child(1) { height: 32px; }
.sus-list--environment li:nth-child(2) { height: 36px; }
.sus-list--environment li:nth-child(3) { height: 34px; }
.sus-img--environment { left: 670px; top: 140px; }

/* ---------- WELL-BEING (y2319–3377) ---------- */
.sus-c .inner { padding: 443px 0 63px; } /* padding-top＝リストの下端（この下にバナー） */
.sus-c__wm { left: 431px; top: -21px; font-size: 110px; }
.sus-c__en { left: 101px; top: 78px; }
.sus-c__ja { left: 97px; top: 120px; }
.sus-lead--wellbeing { left: 102px; top: 192px; }
.sus-list--wellbeing { left: 105px; top: 274px; }
.sus-list--wellbeing li:nth-child(1) { height: 65px; margin-left: -4px; margin-right: 4px; }
.sus-list--wellbeing li:nth-child(2) { height: 66px; }
.sus-list--wellbeing li:nth-child(3) { height: 38px; padding-bottom: 6px; }
.sus-img--wellbeing { left: 662px; top: 130px; width: 353px; }

/* Well-being・健康経営バナー（リストの下にフロー配置） */
.sus-banner { position: relative; width: 943px; height: 147px; margin: 71px 0 0 94px; background: #f3f3f3; --cx: 23px; --cy: 31px; }
.sus-banner > * { position: absolute; white-space: nowrap; }
.sus-banner__ttl { left: 64px; top: 41px; font-size: 18px; font-weight: 700; line-height: 30px; letter-spacing: .02em; color: #424242; }
.sus-banner__txt { left: 62px; top: 76px; font-size: 12px; line-height: 20px; letter-spacing: .04em; color: #7c7c7c; }
.sus-banner__btn {
  left: 642px; top: 36px; width: 252px; height: 70px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px 0 31px; background: #68cff6; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .06em; color: #424242;
  --cx: 17px; --cy: 22px; transition: opacity .2s;
}
.sus-banner__btn:hover { opacity: .8; }
.sus-banner__btn .arrow { width: 27px; height: 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23fff'/%3E%3Cpath d='M8.5 14h11' stroke='%23424242' stroke-width='.8'/%3E%3Cpath d='M17 11.8 19.8 14 17 16.2' fill='none' stroke='%23424242' stroke-width='.8'/%3E%3C/svg%3E"); }

/* ---------- COMMUNITY & SAFETY (y3377–4133) ---------- */
.sus-d .inner { padding: 388px 0 90px; } /* 写真の下端まで＋下余白 */
.sus-d__wm { left: -6px; top: 19px; font-size: 100px; }
.sus-d__en { left: 102px; top: 78px; }
.sus-d__ja { left: 97px; top: 120px; }
.sus-lead--community { left: 102px; top: 192px; }
.sus-list--community { left: 102px; top: 282px; }
.sus-list--community li:nth-child(1) { height: 31px; }
.sus-list--community li:nth-child(2) { height: 36px; }
.sus-list--community li:nth-child(3) { height: 34px; }
.sus-img--community { left: 662px; top: 130px; }

/* ---------- FOOTER ---------- */

/* =========================================================
   SP（〜767px）… SPデザインなし。well-being / TOP の SP 作法に合わせて1カラム化
   各セクションの .inner を縦フレックスにし、order で「見出し→リード→写真→リスト→関連ニュース→MORE」の順に並べ替え
   ========================================================= */
@media (max-width: 767px) {
  .page-sustain main .inner { display: flex; flex-direction: column; }
  .page-sustain main .inner > .abs { position: relative; left: auto !important; top: auto !important; flex: none; }
  .page-sustain .ttl__en { z-index: 1; margin: 0 0 0 20px; }
  .page-sustain .ttl__ja { line-height: 43px; margin: 8px 20px 0 18px; z-index: 1; }
  .page-sustain .sus-lead { margin: 15px 20px 0; white-space: normal; }
  .page-sustain .sus-lead br, .sus-list br { display: none; }

  /* 透かし英字：高さ0のフロー要素として見出しラベルの直前に置く（ラベルの左上に重なる） */
  .page-sustain main .inner > .ttl__bg { height: 0; min-height: 0; overflow: visible; font-size: 60px; line-height: 60px; z-index: 0; }
  .page-sustain main .inner > .ttl__bg:not(.sus-a__wm) { top: -25px !important; }

  /* 写真 */
  .page-sustain .sus-img { width: auto; height: auto; aspect-ratio: 335 / 240; margin: 25px 20px 0; --cx: 28px; --cy: 38px; }
  .page-sustain .sus-img img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

  /* 箇条書き */
  .page-sustain .sus-list { width: auto; margin: 25px 20px 0; }
  .page-sustain .sus-list li { height: auto; margin: 0; padding: 12px 0 12px 22px; white-space: normal; display: block; }
  .page-sustain .sus-list li::before, .page-sustain .sus-list li.l2::before { top: 19px; }

  /* 関連ニュース（TOP SP の NEWS 行：1行目 日付＋タグ／2行目 タイトル、矢印は右上） */
  .page-sustain .sus-related { width: auto; margin: 0; }
  .page-sustain .sus-rel { margin-top: 50px; }
  .page-sustain .sus-news { margin: 20px 20px 0; border-top: 1px solid #e3e3e3; }
  .page-sustain .sus-news li { border-bottom-color: #e3e3e3; }
  .page-sustain .sus-news a { flex-wrap: wrap; align-items: center; padding: 17px 7px 13px; }
  .page-sustain .sus-news time { width: auto; margin-top: 0; line-height: 24px; }
  .page-sustain .sus-news__tag { width: 89px; margin: 0 0 0 19px; }
  .page-sustain .sus-news__ttl { flex: 0 0 100%; margin: 9px 0 0; }
  .page-sustain .sus-news .arrow { position: absolute; right: 1px; top: 19px; width: 20px; height: 20px; }
  .page-sustain .sus-more { margin: 20px 20px 0 0; gap: 16px; }

  /* ---------- INTRO + RELATED NEWS ---------- */
  .sus-a .inner { padding: 17px 0 60px; }
  .page-sustain main .inner > .sus-a__wm { left: auto !important; right: -1.5px; top: 2px !important; font-size: 60px; line-height: 60px; transform: rotate(180deg); position: absolute !important; height: auto; }
  .sus-anchor { width: auto; height: 105px; margin: 32px 20px 0; }
  .sus-anchor a:nth-child(1) { left: 6px; top: 23px; }
  .sus-anchor a:nth-child(2) { left: 184px; top: 23px; }
  .sus-anchor a:nth-child(3) { left: 6px; top: 60px; }
  .sus-anchor a:nth-child(4) { left: 184px; top: 60px; }
  .page-sustain .sus-img--intro { margin-top: 40px; }

  /* ---------- SOCIAL / ENVIRONMENT / WELL-BEING / COMMUNITY & SAFETY（見出し→リード→写真→リスト） ---------- */
  .sus-s .inner { padding: 0 0 70px; }
  .sus-b .inner { padding: 0 0 70px; }
  .sus-c .inner { padding: 0; }
  .sus-d .inner { padding: 0 0 80px; }
  .sus-img--social, .sus-img--environment, .sus-img--wellbeing, .sus-img--community { order: 1; }
  .sus-list--social, .sus-list--environment, .sus-list--wellbeing, .sus-list--community, .sus-banner { order: 2; }
  .sus-s__wm { margin-top: 70px; left: -3px !important; }
  .sus-b__wm { margin-top: 70px; left: 120px !important; }
  .sus-c__wm { margin-top: 70px; left: 110px !important; }
  .sus-d__wm { margin-top: 80px; left: -4px !important; }

  .sus-banner { width: auto; height: auto; margin: 60px 20px 0; padding: 30px 24px 34px; --cx: 20px; --cy: 28px; }
  .sus-banner > * { position: static; white-space: normal; }
  .sus-banner__txt { margin-top: 6px; line-height: 1.8; }
  .sus-banner__btn { width: 100%; height: 60px; margin-top: 20px; padding: 0 24px 0 24px; }

  /* ---------- FOOTER ---------- */
}