@charset "UTF-8";

/* ============================================================
   サステナビリティ 5ページ共通スタイル（土台）
   ------------------------------------------------------------
   読み込み順: reset.css → common.css → style.css → nav_dropdown.css → sustainability.css
   既存の common.css / style.css / under.css / service.css は変更しない。

   ■ 値の出典
     ・寸法・色・余白・級数は Figma（fileKey 4ghb3kXLF0gzVjJ5gAmgS4）実測
   ■ 前提
     ・html { font-size: 62.5% } により 1rem = 10px
     ・CSS変数の :root 定義はサイトに存在しない。var() は必ずフォールバック付きで書く
     ・letter-spacing はサイト全体で未使用（指定しない）
   ■ クラス命名
     ・sus_ プレフィックス（既存の独自スネークケースに合わせる）
   ============================================================ */

/* ------------------------------------------------------------
   1. 基本トークン（Figma実測値。:root 変数は使わず直値で持つ）
   ------------------------------------------------------------
   Primary（アクセント）      #8F76D6
   gradation main             linear-gradient(90deg, #8F76D6 0%, #D75FEC 100%)
   text/body                  #222222
   text/sub                   #777777
   dark gray（カード説明文）   #333333
   セクション地               #F8F7F5
   カード枠線（淡パープル）    #D0C0FD
   ニュートラル枠線           #E2E2E2
   角丸                       60px（帯） / 24px（カード・画像） / 20px / 14px
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   2. レイアウト土台
   ------------------------------------------------------------ */

/* ページ全体のラッパー。
   ここは「固定ヘッダーの逃げ」だけを持たせる＝ヘッダー下端と同じ値にする。
     .head_cont は position:fixed / top:22px / height:80px（style.css）→ 下端 102px
   Figmaでもコンテンツフレームはヘッダー下端に接して始まり（Society PC #3981:9563 が y=102）、
   見出しまでの余白は .sus_hero 自身の padding-top（80px）が持っている。
   ⚠️ ここに「ヘッダー下端＋ヒーロー余白」を入れると .sus_hero の padding と二重計上になる
      （2026-08-08 修正。PC 182→102 / SP 142→82） */
.sus_page {
  padding-top: 102px;
}

/* ページ内アンカーの着地位置。
   ヘッダーは position:fixed / top:22px / height:80px（style.css .head_cont）なので
   下端は 102px。見出しが隠れないよう 120px 逃がす（SPは高さ60px → 下端82px → 100px）。
   URL直打ち（/…/#physical）のネイティブジャンプはこの scroll-margin-top が効く。
   ページ内クリックは common_re.js のスムーススクロールがオフセットを持たないため、
   sustainability.js 側で scrollIntoView に差し替えている（同じ値が効く）。 */
.sus_page [id] {
  scroll-margin-top: 120px;
}

/* セクション内のコンテンツ幅。Figma: 1280 - 左右90px = 1100 */
.sus_inner {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}

/* 本文テキストブロックの可読幅（Figma: 宣言文ブロック 846px） */
.sus_inner_narrow {
  max-width: 846px;
  width: 90%;
  margin: 0 auto;
}

/* セクションの縦リズム（Figma: 80px 90px / 100px 90px を基本とする） */
.sus_section {
  padding: 80px 0;
}

.sus_section_lg {
  padding: 100px 0;
}

/* 地色つきの帯セクション */
.sus_section_bg {
  border-radius: 60px;
  background: #F8F7F5;
}

/* ------------------------------------------------------------
   3. 見出し（日英併記パターン）
   ------------------------------------------------------------
   構造は現行サイトの規約に従う:
     <span class="sus_label roboto">（Our Initiatives）</span>
     <h2 class="sus_h2">Queryの取り組み</h2>
   英字大見出しにスクロール演出を付ける場合は既存の
     <h2 class="title_txt ... roboto"><p class="char2">…</p></h2>
   構造を使う（発火は各ページ末尾のインラインscript）。
   ------------------------------------------------------------ */

/* セクション見出しのラベル。
   Figmaは「ラベル → 見出し」を gap 4px の入れ子フレームで組んでいる
   （#3981:9354 / #3981:9366 / #3981:9419 / #3981:9700 / #3981:9785 / #3981:9870、
     SPも #3981:10146 / #3981:10750 / #3981:10885 と同値）。
   実装は平坦なので、その 4px を margin で持たせる。
   宣言ブロックだけは Figma が 16px（#3981:9865 ほか）で、
   下の .sus_statement .sus_label が上書きする。 */
.sus_label {
  display: block;
  margin-bottom: 4px;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.2rem;
  color: #8F76D6;
}

/* 扉ページ Our Pillars だけ別のh2コンポーネント（Figma #3981:9314）を使っており、
   小見出しの行送りが 32px 指定されている。実装は行送り未指定で16.1pxになり、
   ブロックが 96px → 80px と16px低くなっていた。
   ⚠️ .rec_head_sub は関連バナー（.sus_relation_head 配下）でも使う。
      そちらは 2026-08-13 にFigmaと一致させたばかりなので波及させない。
      セレクタを .sus_block_head 配下に限定すること。 */
.sus_block_head .rec_head_sub {
  line-height: 3.2rem;
  color: #333;            /* Figma #I3981:9314;389:409 = dark gray */
}

/* ヒーローの小見出しは Figma が #000000（扉 #3981:9303 / 柱 #I3981:9948;858:1964）。
   既存 common.css の既定色 #222222 を、サステナビリティ配下だけ上書きする。 */
.sus_hero_head .rec_head_sub {
  color: #000;
}

.sus_h2 {
  font-size: 3rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7;
  color: #000;
}

/* Figma テキストスタイル "H3 s"（#3981:9423 実測）: 20px / Medium 500 / 1.8em / #000。
   PCだけ 2.8rem / 1.5 / #222 になっていた（SPは既に 2rem / 1.8 で正しい）。
   使用箇所はウェルビーイングの3見出しのみ。 */
.sus_h3 {
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8;
  color: #000;
}

/* ------------------------------------------------------------
   4. 本文
   ------------------------------------------------------------
   ※ Figma実測は 17px / line-height 2em。現行サイトの本文標準（1.8rem / 200%）
      とは 1px 差があるが、寸法はFigmaを正とする規約に従い 1.7rem を採用する。
   ------------------------------------------------------------ */

.sus_txt {
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2;
  color: #333;
}

/* リード文（Figma: ヒーロー右カラム 484px / 16px / 1.9em） */
.sus_lead {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.9;
  color: #222;
}

/* ------------------------------------------------------------
   5. カード土台
   ------------------------------------------------------------ */

/* 淡パープル枠のカード（Wellbeing 概要カード等） */
.sus_card {
  border: 2px solid #D0C0FD;
  border-radius: 24px;
  background: #FFF;
}

/* ニュートラル枠のカード（認証バッジ・アコーディオン等） */
.sus_card_plain {
  border: 2px solid #E2E2E2;
  border-radius: 20px;
  background: #FFF;
}

/* KV画像（Figma: 1240×400 / radius 24px） */
.sus_kv {
  overflow: hidden;
  border-radius: 24px;
}

.sus_kv img {
  width: 100%;
  height: 400px;          /* Figma 柱ページ: 1240×400 */
  object-fit: cover;
}

/* 扉ページのKVだけ 1248×480（Figma #3981:9308）。左右16px・上100px */
.sus_kv_wrap--top .sus_kv img {
  height: 480px;
}

/* ------------------------------------------------------------
   5-1. ヒーロー / KV（全5ページ共通）
   ------------------------------------------------------------
   Figma: ラッパー padding 80px 52px 0 / 内側1176 / コンテンツ1100
   ------------------------------------------------------------ */

/* Figma の柱ページのヒーローは「高さ497px固定」のフレーム
   （#3981:9391 / #3981:9563 / #3981:9767 / #3981:9943 いずれも y=102・h=497）で、
   その下端(599)から80px空けてKV(y=679)が始まる。
   実装は中身なりの高さ(473.6px)だったため、KVが43px上がっていた。
   扉ページのヒーローは623pxあるので min-height の影響を受けない。 */
.sus_hero {
  min-height: 497px;
  padding: 80px 52px 0;
}

.sus_hero_inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 72px;
  max-width: 1100px;
  margin: 0 auto;
}

.sus_hero_head {
  align-self: stretch;
}

.sus_hero_tit {
  margin-top: 20px;
  font-size: 8.8rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.1;
  color: #000;
}

.sus_hero_body {
  width: 540px;
}

.sus_hero_catch {
  font-size: 3.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7;
  color: #000;
}

.sus_hero_lead {
  margin-top: 36px;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  color: #000;
}

/* KV（Figma: 1248×480 / radius 24 / ページ幅1280に対し左右16px） */
/* 既定は4柱ページ（Figma: 1240×400 / 左右20px）
   上の余白80pxは「ヒーロー枠の下端599 → KV上端679」の実測。 */
.sus_kv_wrap {
  padding: 80px 20px 0;
}

.sus_kv_wrap .sus_kv {
  max-width: 1240px;
  margin: 0 auto;
}

/* --- KV写真のトリミング ---
   柱ページのKVは、Figmaから枠サイズ（PC 1240×400 / SP 335×300）でトリミング済みに
   書き出した素材を使っている（@2x）。枠と同じ縦横比なので object-fit:cover のままで
   Figmaと一致する。
   以前は元素材＋ object-position（正規化相互相関で逆算した値）で寄せていたが、
   PCとSPでFigmaのクロップが別物（例: ウェルビーイングは PC 1.04倍 / SP 1.56倍）で
   1枚の素材では両立できなかったため、4柱カード・関連バナーと同じ書き出し方式に統一した。 */

/* 扉ページ（Figma #3981:9297 gap100 → #3981:9308 が 1248×480 / 左右16px）*/
.sus_kv_wrap--top {
  padding: 100px 16px 0;
}

.sus_kv_wrap--top .sus_kv {
  max-width: 1248px;
}

/* ------------------------------------------------------------
   5-1b. パーパスと4つの柱（扉ページ Block2）
   ------------------------------------------------------------ */

.sus_pillars {
  padding: 120px 0 160px;
}

.sus_pillars_flex {
  display: flex;
  align-items: flex-end;
  gap: 92px;
}

.sus_pillars_txt {
  flex: 0 1 472px;
}

.sus_pillars_body {
  margin-top: 100px;
}

.sus_pillars_body .sus_txt {
  margin-top: 32px;
  font-weight: 500;
}

/* 英字中見出し（Figma: Roboto Light 44 / line-height 1em） */
.sus_h2_en {
  margin-top: 20px;
  font-size: 4.4rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  color: #333;
}

/* --- パーパス図（536×536） --- */

.sus_diagram {
  flex: 0 0 536px;
  width: 536px;
  height: 536px;
}

.sus_diagram img {
  display: block;
  width: 100%;
  height: 100%;
}

.sus_diagram_ring {
  position: absolute;
  top: 84px;
  left: 84px;
  width: 368px;
  height: 368px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--gradation-sub, linear-gradient(90deg, #4A00E8 0%, #CC2AE7 100%)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.sus_diagram_core {
  position: absolute;
  top: 168px;
  left: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #8F76D6;
  text-align: center;
}

.sus_diagram_core_en {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  color: #FFF;
}

.sus_diagram_core_jp {
  font-size: 2.3rem;
  font-style: normal;
  font-weight: 700;
  color: #FFF;
}

.sus_diagram_node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 148px;
  height: 148px;
  padding: 0 14px;
  border: 1px solid #000;
  border-radius: 50%;
  background: #FFF;
  text-align: center;
}

.sus_diagram_node--top    { top: 0;     left: 194px; }
.sus_diagram_node--left   { top: 194px; left: 0; }
.sus_diagram_node--right  { top: 194px; left: 388px; }
.sus_diagram_node--bottom { top: 388px; left: 194px; }

.sus_diagram_en {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  background: var(--gradation-main, linear-gradient(90deg, #8F76D6 0%, #D75FEC 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sus_diagram_jp {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  color: #222;
}

/* Figmaのノードは4つとも1行。ラベル枠（#3981:9334 ほか）は円の内側パディングを
   はみ出して確保されており、Well-being だけ 134px（他は 120px）に広げてある。
   実装ではラベルを折り返さないことで同じ見え方にする（円 148px には収まる）。 */
.sus_diagram_en,
.sus_diagram_jp {
  white-space: nowrap;
}

/* ------------------------------------------------------------
   5-1c. Pillar Nav Card（扉ページ Block3 / 各柱ページ Block7 共通）
   ------------------------------------------------------------ */

.sus_initiatives {
  padding: 120px 0 80px;
}

/* Block3「Queryの取り組み」は 見出し部 → カード群 が Figma #3981:9353 の gap 48 */
.sus_initiatives .sus_block_head {
  margin-bottom: 48px;
}

/* Block4「SDGsへの取り組み」は入れ子が1段深い（Figma #3981:9364）。
     ブロック gap 48 ─ [ #3981:9365 gap 20 ─ 見出し部 / リード文 ] / 画像
   つまり 見出し部→リード文は 20px、リード文→画像が 48px。
   実装は平坦なので 48 が見出し→リード文に効いていた（+28px）。 */
.sus_sdgs .sus_block_head {
  margin-bottom: 20px;
}

.sus_pillar_cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.sus_pillar_card {
  display: block;
  flex: 1 1 calc(50% - 12px);
  min-width: 0;
  padding-bottom: 24px;
  border-radius: 24px;
  background: #FFF;
}

.sus_pillar_card_img {
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #ECECEC;
}

.sus_pillar_card_img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: .3s ease-in-out;
}

.sus_pillar_card:hover .sus_pillar_card_img img {
  transform: scale(1.2);
}

.sus_pillar_card_body {
  padding: 32px 28px 0;
}

.sus_pillar_card_en {
  display: block;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  background: var(--gradation-main, linear-gradient(90deg, #8F76D6 0%, #D75FEC 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sus_pillar_card_jp {
  display: block;
  margin-top: 6px;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  color: #222;
}

.sus_pillar_card_catch {
  margin-top: 24px;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  color: #222;
}

.sus_pillar_card_txt {
  margin-top: 6px;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  color: #222;
}

/* テーマタグ（Figma #I3981:9359;3871:3806 = padding 5/12 / 1px Primary / radius 20 / 12px）
   Figmaの枠線は内側に描かれるため、チップ幅は「padding + テキスト」だけになる
   （実測: 4文字チップ 72px = 24 + 48）。CSSの border は箱の外に足されるので、
   同じ padding を書くと 1辺ずつ太って 74px になり、2つ目以降が右へ累積してずれる。
   境界線ぶんを padding から引いて相殺する。文字送りはFigmaと完全一致していた（12px×文字数）。 */
.sus_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.sus_tags li {
  padding: 4px 11px;
  border: 1px solid #8F76D6;
  border-radius: 20px;
  background: #FFF;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  color: #8F76D6;
}

.sus_pillar_card .service_btn {
  margin: 14px 0 0 auto;
}

/* 既存 .service_btn の親hover連動を、新規カードにも同じ規約で適用する
   （style.css の .service_top_link:hover .service_btn::before 等と同等） */
.sus_pillar_card:hover .service_btn::before,
.sus_relation_card:hover .service_btn::before {
  opacity: 0;
}

.sus_pillar_card:hover .service_btn::after,
.sus_relation_card:hover .service_btn::after {
  opacity: 1;
}

.sus_pillar_card:hover .service_btn img,
.sus_relation_card:hover .service_btn img {
  left: 60%;
}

/*
   矢印の色。Figma（buttun arrow #397:469）の矢印は 24×10・Black。
   .service_btn は ::before が白地・::after がブランドグラデーションの二層構造で、
   ホバーで地色が白→グラデーションに変わる。したがって
     rest  = 白いボタン → 黒矢印（link_arrow_b.svg）
     hover = グラデーション → 白矢印
   が正しい。これは既存の .contents_link_btn（base=link_arrow_b / hover=link_arrow）と同じ考え方。
   ただし .service_btn は背景画像ではなく <img> なので src を差し替えられないため、
   純黒の図形であることを利用して filter で反転させる。
   ※ .service_btn.white（暗い写真の上に置くバナー用）は rest から白矢印なので対象外。
*/
.sus_pillar_card:hover .service_btn:not(.white) img,
.sus_relation_card:hover .service_btn:not(.white) img {
  filter: invert(1);
}

.sus_pillar_card:hover .service_btn,
.sus_relation_card:hover .service_btn {
  border: none;
}

/* ------------------------------------------------------------
   5-1d. SDGs（扉ページ Block4）
   ------------------------------------------------------------ */

.sus_sdgs {
  padding: 120px 0 160px;
}

.sus_sdgs_txt {
  max-width: 700px;
}

/* Figma の SDGs ブロックは親フレームが alignItems:center で、
   ロゴ＋17アイコンのマップだけが中央に置かれる（見出し・本文は左揃えのまま）。
   実装は max-width だけで中央寄せが無く、約202px 左に寄っていた。
   ※ SP版は元から一致しているので、この指定はPC/SP共通で問題ない。 */
.sus_sdgs_img {
  margin-top: 48px;      /* Figma #3981:9364 のブロック gap 48（リード文→画像） */
  text-align: center;
}

.sus_sdgs_img img {
  width: 100%;
  max-width: 696px;
  height: auto;
}

/* ------------------------------------------------------------
   5-1e. 関連導線カード（扉ページ Block5）
   ------------------------------------------------------------ */

.sus_relation {
  padding: 0 16px 120px;
}

.sus_relation_inner {
  display: flex;
  gap: 16px;
  max-width: 1248px;
  margin: 0 auto;
}

.sus_relation_card {
  position: relative;
  display: block;
  flex: 1 1 50%;
  height: 360px;
  overflow: hidden;
  border-radius: 24px;
  background: #F4F4F4;
}

.sus_relation_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s ease-in-out;
}

.sus_relation_card:hover .sus_relation_bg {
  transform: scale(1.1);
}

/* 関連バナー・4柱カードの写真は、Figmaからトリミング済みで書き出した画像を
   使っている（枠と同じ縦横比）。そのため object-fit:cover のままで一致する。
   以前あった object-position / transform によるクロップ補正は不要になったので削除した。 */

/* 画像の上に白文字を載せるための暗幕（Figma: 下方向のグラデーション）。
   Figmaは暗幕を Service にしか掛けていない（About = #3981:9374 / #3981:10152 に
   暗幕のノードが無い）ため、About には出さない。
   PCの値は #3981:9384 = 616x201 を枠下端に配置・opacity 0.5。SPは別値（下部の @media 参照）。 */
/* ここは「素のまま重ねる fallback」を先に置き、blend が使える環境だけを
   下の @supports で Figma 合わせに差し替える二段構成にしている。
   mix-blend-mode を1つのルールに混ぜて書くと、blend が効かない環境で
   multiply 前提の薄いグラデーションだけが残り、白文字が読みにくくなる。 */
.sus_relation_card--service::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 201px;
  /* fallback（blend非対応時）。multiply で暗くなるぶんを色の濃さで補う。
     テキスト背面のコントラスト比 最小1.72 → 2.24（実測）。 */
  background: linear-gradient(180deg, rgba(140, 140, 140, 0) 12%, rgba(70, 70, 70, 0.6) 39%, rgba(12, 12, 12, 1) 78%);
  opacity: .7;
  content: '';
}

@supports (mix-blend-mode: multiply) {
  /* Figmaの暗幕は blendMode: LINEAR_BURN（#3981:9384）。REST APIの生データで判明した
     （MCPの get_figma_data はこのフィールドを返さない）。
     CSSに linear-burn は無く、plus-darker はChromium未対応（指定しても無視される）。
     実測で最も近いのが multiply だった（PC MAE 9.6 → 6.7）。
     不透明度はFigmaの 0.5 ではなく、合成方式が違うぶん実測で 0.6 が最良。 */
  .sus_relation_card--service::after {
    background: linear-gradient(180deg, rgba(185, 185, 185, 0) 12%, rgba(108, 108, 108, 0.6) 39%, rgba(34, 34, 34, 1) 78%);
    mix-blend-mode: multiply;
    opacity: .6;
  }
}

/* Figma PC #3981:9378 / #3981:9385: テキストブロックは枠(616x360)の左46 / 上241。
   ブロック高は 小見出し32 + gap12 + 見出し44 = 88 なので、下端は 241+88=329 →
   bottom は 360-329 = 31px。矢印(#3981:9379 = 右46/下39)とは下端をほぼ揃える設計。 */
.sus_relation_head {
  position: absolute;
  bottom: 31px;
  left: 46px;
  z-index: 1;
  display: block;
}

/* 改行のビューポート出し分け。
   FigmaはPCとSPで改行位置が違う。br に display:none を当てると改行そのものが無効になる。
     .sus_br_sp … SPだけ改行する（PCでは無効）
     .sus_br_pc … PCだけ改行する（SPでは無効）
   クラスの無い素の <br> は PC/SP 共通の改行。 */
.sus_br_sp {
  display: none;
}

.sus_br_pc {
  display: inline;
}

.sus_relation_head .rec_head_sub {
  display: block;
  color: #FFF;
}

.sus_relation_en {
  display: block;
  margin-top: 12px;
  font-size: 4.4rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  color: #FFF;
}

.sus_relation_card .service_btn {
  position: absolute;
  right: 46px;
  bottom: 39px;
  z-index: 1;
}

/* ------------------------------------------------------------
   5-1f. 4柱ページ共通パーツ
   ------------------------------------------------------------ */

/* --- ヒーロー（柱ページ）: 左に見出し＋キャッチ、右にリード文484px --- */

.sus_hero_inner--pillar {
  gap: 28px;
}

.sus_hero_tit--pillar {
  font-size: 7.2rem;
  line-height: 1.2;
}

.sus_hero_catch--pillar {
  margin-top: 40px;
  font-size: 2.4rem;
  line-height: 1.7;
}

.sus_hero_lead--pillar {
  width: 484px;
  margin-top: 0;
  font-size: 1.6rem;
  line-height: 1.9;
  color: #222;
}

/* --- 宣言ブロック（Block2。846px幅・中央寄せ） --- */

.sus_statement {
  padding: 80px 0;
}

.sus_statement .sus_block_head {
  margin-bottom: 20px;
}

.sus_statement .sus_label {
  margin-bottom: 16px;
}

/* --- ブロック導入（見出し＋リード） --- */

.sus_block_intro {
  margin-bottom: 40px;
}

.sus_block_intro .sus_body {
  margin-top: 12px;
}

/* 本文（16px / 1.9em / #444。Figmaのブロック導入文） */
.sus_body {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.9;
  color: #444;
}

.sus_h2--tight {
  line-height: 1.5;
}

.sus_h2--tight + * {
  margin-top: 40px;       /* Figma #3981:9411 gap20 ＋ カード行 padding-top20 */
}

/* 本文中のテキストリンク（既存サイト規約: #8F76D6 + underline） */
.sus_link {
  color: #8F76D6;
  text-decoration: underline;
}

/* --- 概要カード（WB Overview Card / Society 取り組みの全体像） --- */

.sus_wb_cards {
  display: flex;
  gap: 24px;
}

/* Figma "WB Overview Card" #3568:1861 は3階層のフレーム構造を持つ。
     カード(gap 24) ─ アイコン / テキスト枠(gap 16) / シェブロン
     テキスト枠(gap 16) ─ ラベル枠(gap 8) / 本文
     ラベル枠(gap 8) ─ 英字 / 和文
   実装はこれを1段のflexに平坦化しているため、カードの gap がそのまま
   内側の間隔にも乗ってしまい、実測で 英字→和文 32px（正 8px）/
   和文→本文 40px（正 16px）になっていた。
   平坦のまま実効値を合わせるため、gap を最小値の 8px にして
   各要素の margin-top で差分を足す。 */
.sus_wb_card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 22px;     /* Figma #3981:9414 の 28/24 − 枠線2 */
  border: 2px solid #D0C0FD;
  border-radius: 24px;
  background: #FFF;
  text-align: center;
}

/* Society Block3 は同じ見た目のカードだが中身が違う（英字が無く、間隔も別値）。
   Figma #3981:9580 = padding 28（左右も28）/ gap 24 / テキスト枠 gap 10。
   平坦化の都合で base の gap 8 に margin を足して実効値を作る。 */
.sus_wb_card--static {
  padding: 26px;          /* Figma 28 − 枠線2 */
}

.sus_wb_card--static .sus_wb_card_jp {
  margin-top: 16px;       /* gap 8 + 16 = アイコン→和文 24px */
  /* Figmaの行送りは auto（＝フォント本来の値）。destyle.css が html に 1.15 を
     敷いているぶん実装だけ行箱が低く、カードが6px縮んでいた。normal で揃える。 */
  line-height: normal;
}

.sus_wb_card--static .sus_wb_card_txt {
  margin-top: 2px;        /* gap 8 + 2 = 和文→本文 10px */
  color: #555;            /* Figma #3981:9584 = #555555 */
}

.sus_wb_card_icon {
  width: 90px;
  height: 90px;
}

.sus_wb_card_en {
  margin-top: 16px;       /* gap 8 + 16 = アイコン→英字 24px */
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 300;
  color: #777;
}

.sus_wb_card_jp {
  margin-top: 0;          /* gap 8 のみ = 英字→和文 8px */
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 500;
  color: #8F76D6;
}

.sus_wb_card_txt {
  margin-top: 8px;        /* gap 8 + 8 = 和文→本文 16px */
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
  text-align: left;
}

/* 概要カード内の下向き矢印（アンカーリンクの合図） */
.sus_wb_card_arrow {
  position: relative;
  display: block;
  width: 24px;
  height: 12px;
  /* gap 8 + 16 = 本文→シェブロン 24px。
     Figmaのカードは vertical:fill だが中身は上詰めなので、
     下端に貼り付ける margin-top:auto ではなく固定値にする。 */
  margin-top: 16px;
}

/* Figma #I3981:9414;3917:3887 は 24×12 のV字パス（strokeWeight 2 / strokeAlign CENTER）。
   V字は枠いっぱい、つまり (0,0)→(12,12)→(24,0) を通る。
   45°の腕で幅24pxを埋めるには 12 ÷ cos45° ≒ 17px の長さが要る。
   14pxだと実幅が約19pxにしかならず、枠より4px狭く見えていた。
   中心を (6,6) と (18,6) に置くため left は -2.5 / 9.5、top は 5。 */
.sus_wb_card_arrow::before,
.sus_wb_card_arrow::after {
  position: absolute;
  top: 5px;
  width: 17px;
  height: 2px;
  background: #000;
  content: '';
  transition: .3s ease-in;
}

.sus_wb_card_arrow::before { left: -2.5px; transform: rotate(45deg); }
.sus_wb_card_arrow::after  { left: 9.5px;  transform: rotate(-45deg); }

.sus_wb_card[href]:hover .sus_wb_card_arrow {
  transform: translateY(4px);
}

/* --- 数値カード --- */

.sus_stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.sus_stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border: 2px solid #E2E2E2;
  border-radius: 20px;
  background: #FFF;
}

.sus_stat_num {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-size: 5.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  background: var(--gradation-main, linear-gradient(90deg, #8F76D6 0%, #D75FEC 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sus_stat_unit {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
}

.sus_stat_label {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  color: #777;
}

/* --- 施策カード（Measure Card） --- */

.sus_measures {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

/* Figma "Measure Card (施策)" #3568:1856 は2階層。
     カード(padding 22 / gap 20) ─ アイコン / テキスト枠(gap 8)
   実装は1段のflexに平坦化しているため、gap 20 が見出し→本文にも乗り、
   実効 28px（正 8px）になっていた。gap を 0 にして margin で組み直す。
   padding は「Figmaの padding − 枠線」。Figmaの枠線は内側に描かれてレイアウトを
   広げないが、CSSの border は箱の外に足されるため、そのぶん引いて相殺する。 */
.sus_measure {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0;
  padding: 20px;          /* Figma 22 − 枠線2 */
  border: 2px solid #E2E2E2;
  border-radius: 20px;
  background: #FFF;
}

.sus_measure_icon {
  width: 72px;
  height: 72px;
}

.sus_measure_tit {
  margin-top: 20px;       /* Figma: アイコン→テキスト枠 20px */
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
}

.sus_measure_txt {
  margin-top: 8px;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7;
  color: #777;
}

/* --- 認証バッジ（横長・ロゴ左＋テキスト右） --- */

/* Figma #3981:9442 = padding 24/64・内側の行 gap 21・枠線2px（内側）。
   padding は枠線ぶん引く（.sus_measure と同じ理由）。 */
.sus_cert {
  display: flex;
  gap: 21px;
  padding: 22px 62px;
  border: 2px solid #E2E2E2;
  border-radius: 20px;
  background: #FFF;
}

.sus_cert_logo {
  flex: 0 0 83px;
  width: 83px;
  height: 83px;
}

.sus_cert_tit {
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  color: #222;
}

.sus_cert_txt {
  margin-top: 10px;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7;
  color: #555;
}

/* 認証バッジの半幅2枚並び（Figma #4106:2410「両立ブロック」）。
   親フレーム gap 16 / カード 542x131（1100 = 542 + 16 + 542）。
   カードの見た目は .sus_cert と同一なので、並びと幅だけを足す。
   直前の .sus_measures が margin-bottom:24px を持つ（Figma の gap 24）。
   隣接マージンで足りるので、ここに margin-top は付けない。 */
.sus_certs_half {
  display: flex;
  gap: 16px;
}

.sus_cert--half {
  flex: 1 1 calc(50% - 8px);
}

/* 全幅・横長バナーの認証バッジ（Figma #3981:9507「女性活躍」）。
   Figma #3981:9508 は counterAxisAlignItems=CENTER で、既存の .sus_cert（上揃え）と
   ここだけ揃えが違う。 */
.sus_cert--wide {
  align-items: center;
  margin-top: 24px;     /* Figma #3981:9485 の gap 24（えるぼしカードとの間） */
}

/* バナーは 179x49 の横長。既存の .sus_cert_logo（83x83の正方形）は使えない。
   ⚠ flex-basis は主軸方向に効くため、SPで .sus_cert が column になると
      「高さ」の指定になってしまう。width/height を明示したうえで
      flex:none にし、方向に依存させない。 */
.sus_cert_bnr {
  flex: none;
  width: 179px;
  height: 49px;
}

/* --- 施策カード（Planet / Society の3〜4件並び） --- */

.sus_actions {
  display: flex;
  gap: 24px;
}

/* Figma #3981:9705（Society）= padding 28 / gap 12 / 枠線2px（内側）。
   実装の構造（アイコン・見出し・本文の1段flex）はFigmaと同じなので gap はそのまま。
   padding だけ枠線ぶん引く。 */
.sus_action {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  padding: 26px;          /* Figma 28 − 枠線2 */
  border: 2px solid #E2E2E2;
  border-radius: 16px;
  background: #FFF;
}

/* Planet 4連（Figma #3981:9790 = padding 22 / gap 10 / radius 14 / #E8E8E8） */
.sus_actions--4 .sus_action {
  gap: 10px;
  padding: 20px;          /* Figma 22 − 枠線2 */
  border-color: #E8E8E8;
  border-radius: 14px;
}

.sus_action_icon {
  width: 72px;
  height: 72px;
}

.sus_action_tit {
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
}

.sus_action_txt {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;       /* Figma Society #3981:9708 = 1.8em */
  color: #555;
}

.sus_actions--4 .sus_action_txt {
  line-height: 1.7;       /* Figma Planet #3981:9794 = 1.7em */
}

/* --- 認証カード（Governance Block3） --- */

.sus_certs {
  display: flex;
  gap: 24px;
}

/* Figma "Cert Badge" #3981:9875 は2階層。
     カード(padding 24 / gap 16) ─ ロゴ / 規格名 / テキスト枠(gap 10)
   実装は平坦なので gap 16 が見出し→本文にも乗り、実効 26px（正 10px）だった。
   gap を 0 にして margin で組み直し、padding は枠線ぶん引く。 */
.sus_cert_card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0;
  padding: 22px;          /* Figma 24 − 枠線2 */
  border: 2px solid #E6E6E6;
  border-radius: 16px;
  background: #FFF;
}

/* ロゴ枠はFigma実測どおり3枚それぞれ別寸。PC/SPとも同値。
     ISO 27001 = 112×60 (#3981:9876 / #3981:10892)
     ISO 9001  = 110×60 (#3981:9882 / #3981:10900)
     Pマーク    =  63×60 (#3981:9888 / #3981:10908)
   width は各 <img> の width 属性（＝上記のFigma実寸）に任せる。
   ここで width を指定すると属性を打ち消して3枚が同寸になり、
   SPではロゴ列の幅＝テキスト列の開始位置がFigmaとずれる（G-05と同じ壊れ方）。
   素材の実寸比（220×120 / 220×118 / 120×120）はFigmaの枠比と一致しないため、
   contain で比率を保ち、上下センター・左揃えに置く。 */
.sus_cert_card_logo {
  height: 60px;
  object-fit: contain;
  object-position: left center;
}

.sus_cert_card_std {
  margin-top: 16px;       /* Figma: ロゴ→規格名 16px */
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  color: #8F76D6;
}

.sus_cert_card_tit {
  margin-top: 16px;       /* Figma: 規格名→テキスト枠 16px */
  line-height: normal;    /* Figmaは auto。destyle の 1.15 だと5px低い */
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  color: #222;
}

.sus_cert_card_txt {
  margin-top: 10px;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  color: #555;
}

/* --- 主導線バナー（Governance Block4） --- */

.sus_gov_banner_sec {
  padding: 48px 0;
}

.sus_gov_banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 44px;
  border-radius: 20px;
  background: #F9F9F9;
}

/* 主導線ボタン。既存 .contents_link_btn（230px / padding 20px 25px）を再利用しつつ
   Figma #3981:9897 の実測に合わせる:
     左右padding 19px ＋ テキスト枠171px ＋ gap 20px ＋ 矢印24px = 253px
   ※ 高さ44px・角丸（22px＝44の半分でピル）・線1px・級数14px は既存クラスと一致するため触らない。
     矢印は .contents_link_btn p::after が p（＝コンテンツ幅）の right:0 に付くので、
     padding を 19px にすれば矢印右端も Figma どおり枠から19pxになる。 */
.sus_gov_banner .contents_link_btn {
  width: 253px;
  padding: 0 19px;
}

.sus_gov_banner_txt {
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  color: #222;
}

/* --- 関連情報への導線（Block7） --- */

/* Society Block4 寄付金制度は下だけ60px（Figma #3981:9590 padding 100px 90px 60px）*/
#donation {
  padding-bottom: 60px;
}

/* Figma: Society/Planet/Governance は 100px 90px、Wellbeing のみ 40px 90px 100px */
.sus_related {
  padding: 100px 0;
}

.sus_related--wb {
  padding: 40px 0 100px;
}

.sus_related_tit {
  margin-bottom: 32px;
  font-size: 2.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  color: #222;
  /* Figma #3981:9817 は sizing.horizontal:fill かつ textAlignHorizontal:LEFT */
  text-align: left;
}

.sus_pillar_cards--3 {
  gap: 25px;              /* Figma: 25px（4柱カードの24pxとは別値）*/
}

.sus_pillar_cards--3 .sus_pillar_card {
  flex: 1 1 calc(33.333% - 17px);
}

/* --- 柱ページ Block7「Queryのサステナビリティ」カードの意匠 ---
   Figma "Pillar Nav Card" #3981:9819 の実測値。
     カード      350px幅 / padding 0 0 28px / gap 28px / #FFF / stroke #E2E2E2 1px / radius 24
     画像        350×200 / radius 24 24 0 0
     本文枠      padding 0 28px / gap 14px
     内側        align-items:flex-end / gap 24px（＝矢印が右寄せ）
     柱名枠      gap 6px
       英字      Roboto Light 300 / 28px / #222222
       和文      Noto Sans JP Medium 500 / 13px / #777777
     キャッチ    Medium 500 / 20px / 1.6em / #222222
     矢印        68×34 / radius 100 / stroke 1px

   扉ページの4柱カード（.sus_pillar_cards）は英字が小・和文が大の別デザインで、
   実装はそちらを流用してしまっていた。扉に影響させないため --3 スコープで上書きする。
   ※ 実装にある説明文 .sus_pillar_card_txt はFigmaに存在しない。 */

.sus_pillar_cards--3 .sus_pillar_card {
  padding-bottom: 28px;
  border: 1px solid #E2E2E2;
}

.sus_pillar_cards--3 .sus_pillar_card_body {
  padding-top: 28px;      /* 画像→本文の gap 28px */
}

.sus_pillar_cards--3 .sus_pillar_card_en {
  font-size: 2.8rem;
  font-weight: 300;
  color: #222;
  /* 扉カードのグラデーション文字を打ち消す */
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.sus_pillar_cards--3 .sus_pillar_card_jp {
  margin-top: 6px;        /* 柱名枠の gap 6px */
  font-size: 1.3rem;
  font-weight: 500;
  color: #777;
}

.sus_pillar_cards--3 .sus_pillar_card_catch {
  margin-top: 14px;       /* 柱名枠→キャッチの gap 14px */
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  color: #222;
}

.sus_pillar_cards--3 .sus_pillar_card .service_btn {
  width: 68px;            /* 既存 .service_btn は 88×44。柱カードは別サイズ */
  height: 34px;
  border-radius: 17px;
  margin-top: 24px;
}

/* ------------------------------------------------------------
   5-2. ブロック見出し・総額サマリー（Society Block4）
   ------------------------------------------------------------ */

/* 見出し部 → 次要素 の間隔。
   Figmaはブロックごとに gap が違うので「既定＋例外」で持つ。
   既定 24px の根拠（最頻値）:
     ウェルビーイング 身体/心/社会的 #3981:9418・#3981:10234 = 24
     社会との共生 寄付金制度        #3981:9595・#3981:10514 = 24
     環境・社会のSP                 #3981:10749・#3981:10619 = 24
   ほかの既定外は下の例外と .sus_statement / .sus_initiatives / .sus_sdgs で上書き。 */
.sus_block_head {
  margin-bottom: 24px;
}

/* 社会との共生 Block5「社会貢献活動」 PCのみ 32（#3981:9699）。SPは既定24（#3981:10619） */
.sus_block_head--activities {
  margin-bottom: 32px;
}

/* 環境 Block3「取り組み」 PC 12（#3981:9784）／SPは既定24（#3981:10749）
   ガバナンス Block3「認証」 PC/SPとも 12（#3981:9869・#3981:10884） */
.sus_block_head--actions,
.sus_block_head--certs {
  margin-bottom: 12px;
}

/* リード文 → 次要素。
   既定 32px の根拠: 環境・ガバナンス・社会Block5 のPCがいずれも 32
   （ブロックgap 12＋カード枠の padding-top 20、または gap 32）。 */
.sus_block_lead {
  margin-bottom: 32px;
}

/* 社会との共生 Block4 は総額サマリーが続き、Figmaは 28（#3981:9590・#3981:10509）。
   このブロックだけリード文が .sus_lead なので、それを手掛かりにする。 */
.sus_lead.sus_block_lead {
  margin-bottom: 28px;
}

/* 総額サマリー（Figma: padding 32px 0 / 地 #F8F7F5 / radius 20px） */
.sus_total {
  padding: 32px 0;
  border-radius: 20px;
  background: #F8F7F5;
  text-align: center;
}

.sus_total_label {
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  color: #222;
}

.sus_total_amount {
  margin-top: 6px;
  font-size: 6rem;
  font-style: normal;
  font-weight: 500;
  background: var(--gradation-main, linear-gradient(90deg, #8F76D6 0%, #D75FEC 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sus_total_period {
  margin-top: 6px;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  color: #777;
}

.sus_total_note {
  margin-top: 8px;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  color: #777;
}

/* ------------------------------------------------------------
   5-3. 寄付実績アコーディオン（Society Block4）
   ------------------------------------------------------------
   仕様: デフォルト全閉／最新4年表示／「もっと見る」で全年度展開／
   展開後に閉じるボタンは無し（リロードで復帰）
   ------------------------------------------------------------ */

.sus_acc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}

/* Figma #3981:9611 は padding 0/28・枠線2px（内側）。
   枠線ぶんを引いて 26px にする（枠線は外側に足されるため）。 */
.sus_acc_item {
  padding: 0 26px;
  border: 2px solid #E2E2E2;
  border-radius: 14px;
  background: #FFF;
}

.sus_acc_head {
  font-size: inherit;
  font-weight: inherit;
}

.sus_acc_btn {
  display: flex;
  align-items: baseline;   /* Figma「年度合計」は baseline 揃え */
  justify-content: flex-start;
  gap: 24px;               /* Figma: 年度 →24px→ 合計 */
  width: 100%;
  padding: 20px 0;
  border: none;
  background: none;
  font-family: inherit;
  color: #222;
  text-align: left;
  cursor: pointer;
}

/* Figma #3981:9614: 20px Medium #333。365px固定は「年度＋合計」グループの幅であり
   年度ラベル単体の幅ではない。近接配置にするため固定幅は持たせない */
.sus_acc_year {
  flex: 0 0 auto;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  color: #333;
}

/* Figma #3981:9615: 「合計」16px ＋ 金額28px、いずれも Primary #8F76D6 Bold */
.sus_acc_sum {
  flex: 0 0 auto;
  font-size: 2.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #8F76D6;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.sus_acc_sum_label {
  margin-right: .5em;
  font-size: 1.6rem;
  font-weight: 700;
}

/* アイコン（Figma #3981:9616 / #3981:9662 実測）
     31×31 の白丸＋1.4px #222 の枠。閉=＋ / 開=×（＋を45°回すと×になる）
     アイコンだけ右端へ寄せる（ヘッダーは flex-start ＋ gap 24px のため） */
.sus_acc_icon {
  position: relative;
  flex: 0 0 31px;
  align-self: center;
  margin-left: auto;
  width: 31px;
  height: 31px;
  border: 1.4px solid #222;
  border-radius: 50%;
  background: #FFF;
  transition: transform .3s ease-in-out;
}

.sus_acc_btn[aria-expanded="true"] .sus_acc_icon {
  transform: rotate(45deg);   /* ＋ → × */
}

.sus_acc_icon::before,
.sus_acc_icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11.6px;             /* Figma: 21.3 - 9.7 */
  height: 1.4px;
  border-radius: 1px;
  background: #222;
  content: '';
  transform: translate(-50%, -50%);
}

.sus_acc_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* --- 明細 --- */

/* 開閉は sustainability.js が height を 0 ⇄ 実寸 で切り替える。
   高さをアニメーションさせるため、余白はパネルではなく内側の dl に持たせる
   （パネル自身に padding があると height:0 でも余白が残ってしまうため）。
   .is-animating が付いている間だけ transition を有効にし、
   開き切ったあとは height:auto に戻して内容の増減に追従できるようにする。 */
.sus_acc_panel {
  overflow: hidden;
}

.sus_acc_panel.is-animating {
  transition: height .4s cubic-bezier(0.76, 0, 0.24, 1);
}

.sus_acc_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 32px;
}

.sus_acc_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E3E3E3;
}

.sus_acc_row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.sus_acc_row dt {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;         /* Figma #3981:9623: 15px Medium #333 */
  line-height: 1.8;
  color: #333;
}

.sus_acc_row dd {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 6px;                 /* Figma #3981:9624 */
  text-align: right;
}

/* 金額は右寄せで桁を揃える（実装ルール） */
.sus_acc_amount {
  min-width: 8em;
  font-size: 2rem;          /* Figma #3981:9625: 20px Bold #222 */
  font-style: normal;
  font-weight: 700;
  color: #222;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.sus_acc_note {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;         /* Figma #3981:9626: 13px Medium #777 */
  color: #777;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- 「もっと見る」 --- */

.sus_acc_more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* 「もっと見る」押下後にボタンが消えない問題への対応。
   JS は `moreBtn.parentNode.hidden = true` で hidden 属性を付けるが、
   reset.css の `[hidden]{display:none}`（詳細度 0,1,0）を、上の
   `.sus_acc_more{display:flex}`（同じ 0,1,0・後読み）が上書きしてしまい、
   属性は付いているのに表示され続けていた。
   属性セレクタを足して詳細度を 0,2,0 に上げ、確実に隠す。 */
.sus_acc_more[hidden] {
  display: none;
}

.sus_acc_more_btn {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 44px;
  padding: 0 19px;
  border: 1px solid #222;
  border-radius: 80px;
  background: none;
  font-family: inherit;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  color: #222;
  cursor: pointer;
  transition: .3s ease-in-out;
}

/* 既存サイトのボタン規約（::before/::after 二層背景 + opacity切替） */
.sus_acc_more_btn::before,
.sus_acc_more_btn::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 80px;
  content: '';
  transition: .3s ease-in-out;
}

.sus_acc_more_btn::before {
  z-index: -1;
  background: #FFF;
}

.sus_acc_more_btn::after {
  z-index: -2;
  background: var(--gradation-main, linear-gradient(90deg, #8F76D6 0%, #D75FEC 100%));
}

.sus_acc_more_btn:hover {
  border-color: transparent;
  color: #FFF;
}

.sus_acc_more_btn:hover::before {
  opacity: 0;
}

.sus_acc_btn:focus-visible,
.sus_acc_more_btn:focus-visible {
  outline: 2px solid #8F76D6;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .sus_acc_panel.is-animating,
  .sus_acc_icon::before,
  .sus_acc_icon::after,
  .sus_acc_more_btn,
  .sus_acc_more_btn::before,
  .sus_acc_more_btn::after {
    transition: none;
  }
}

/* ------------------------------------------------------------
   5-x. 中間幅（769〜1222px）
   ------------------------------------------------------------
   FigmaのアートボードはPC1280 / SP375の2枚しか無いため、この帯は設計が存在しない。
   一方 .sus_inner は max-width:1100px / width:90% なので **1222px未満で縮み始め**、
   固定幅の要素（パーパス図536px など）との組み合わせで破綻・窮屈が起きる。

   方針: 1280px / 375px の現状（Figma一致）は一切変えず、この帯だけを調整する。
   切替値は既存サイト（style.css）で実際に使われている 1200px / 1024px を流用し、
   サイト全体で挙動が揃うようにした。
     ・1200px … 本番では .service_bottom_head_tit で使用
     ・1024px … 本番では .news_wrap の2カラム崩しで使用
   本番の作法（2カラムを 960〜1240px のどこかで縦積みにする）に合わせている。
   ------------------------------------------------------------ */

/* --- 1200px: 2カラムの「パーパスと4つの柱」を縦積みにする ---------------
   .sus_pillars_txt(472px) + gap 92px + .sus_diagram(536px固定) = 1100px。
   図が固定幅なので、内側が縮むとテキスト側だけが痩せる。
   実測: 1024pxで294px / 900pxで182px / 769pxでは図がはみ出す（右端784px）。 */
@media screen and (max-width: 1200px) {
  .sus_pillars_flex {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .sus_pillars_txt {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* --- 1024px: 横並びカードの列数を落とす ---------------------------------
   4列は1024pxで212px、769pxで155pxまで痩せる（アイコン72pxを含む）。
   3列も769pxで215pxになるため、いずれも2列へ。 */
@media screen and (max-width: 1024px) {
  /* 4列 → 2列（Wellbeingの施策 / Planetの施策） */
  .sus_measures,
  .sus_actions {
    flex-wrap: wrap;
  }

  .sus_measure {
    flex: 0 1 calc(50% - 8px);    /* .sus_measures は gap 16px */
  }

  .sus_action {
    flex: 0 1 calc(50% - 12px);   /* .sus_actions は gap 24px */
  }

  /* 両立カード2枚 → 1カラム。
     Figmaに中間幅の設計は無い。2カラムのまま 769px まで下ろすと
     カード内の本文が106pxまで潰れるため、ここで縦積みへ落とす
     カード内は「マーク左＋テキスト右」のまま。
     ⚠ flex-basis は主軸方向に効く。column にすると calc(50% - 8px) が
        「高さ」の指定になってしまうので basis を殺す。 */
  .sus_certs_half {
    flex-direction: column;
  }

  .sus_cert--half {
    flex: 0 0 auto;
  }

  /* 3列 → 2列（WB概要カード / 認証カード / Block7の柱カード）
     3枚目は1枚だけ左に残る。grow させないので幅は他と揃う */
  .sus_wb_cards,
  .sus_certs {
    flex-wrap: wrap;
  }

  .sus_wb_card,
  .sus_cert_card,
  .sus_pillar_cards--3 .sus_pillar_card {
    flex: 0 1 calc(50% - 12px);
  }

  /* Governance 主導線バナー: テキストとボタンが競合して
     Figma実測の253pxボタンが234pxまで潰れるため、SPと同じ縦積みにする */
  .sus_gov_banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .sus_gov_banner .contents_link_btn {
    flex-shrink: 0;               /* どの幅でも253pxを維持する保険 */
  }
}

/* ------------------------------------------------------------
   6. SP（既存規約: SP切替 768px）
   ------------------------------------------------------------
   ※ 本節はフェーズDで実装する。ここでは左右余白と先頭の逃げのみ土台を置く。
      FigmaのSP版フレームは375px基準（左右余白20px / コンテンツ335px）。
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {
  /* SPも同じ考え方で、固定ヘッダーの下端と同じ値だけを逃がす。
       .head_cont は SP で height:60px（top:22px は共通）→ 下端 82px
     Figmaでもコンテンツフレームはヘッダー下端に接して始まり（Governance SP #3981:10863 が y=78）、
     見出しまでの60pxは .sus_hero 自身の padding-top が持っている。
     ※ ヘッダー自体の top（Figma 18px / 実装 22px）の差は共通部 style.css 由来で、
        ナビ以外は改変しない規約に従い合わせていない。そのため絶対座標は 138 → 142 と
        4pxずれるが、「ヘッダー下端からの距離 60px」はFigmaどおりになる（判断待ち#9）。 */
  .sus_page {
    padding-top: 82px;
  }

  /* SPのヘッダーは高さ60px（top22px → 下端82px）。PCより逃げを小さくする */
  .sus_page [id] {
    scroll-margin-top: 100px;
  }

  .sus_inner,
  .sus_inner_narrow {
    width: auto;
    margin: 0 20px;
  }

  /* Figma SP: 各ブロックの縦パディングは 80px で統一（Block2〜Block6） */
  .sus_section,
  .sus_section_lg {
    padding: 80px 0;
  }

  .sus_section_bg {
    border-radius: 40px;
  }

  /* 見出しはFigma SPで役割ごとに級数が違う（すべて .sus_h2 だが値は別） */
  .sus_h2 {                       /* セクション見出し（例: 身体のウェルビーイング）27px/1.7em */
    font-size: 2.7rem;
    line-height: 1.7;
  }

  .sus_statement .sus_h2 {        /* 宣言ブロックの見出し 30px/1.7em */
    font-size: 3rem;
  }

  .sus_h2--tight {                /* 概要ブロックの見出し 30px/1.5em */
    font-size: 3rem;
    line-height: 1.5;
  }

  /* Figmaのテキストスタイル "H2 s" = 30px/1.7em を当てる見出し。
     SPの見出しは 30px が既定で、27px（上の .sus_h2）は柱ページの柱名
     （例 #3981:10237「身体のウェルビーイング」）に使われる別スタイル。
     30px 側に該当するのは以下。いずれもFigmaのノードで実測済み。
       扉 #3981:10016「4つの視点で推進する、持続可能な社会。」
       扉 #3981:10056「Queryの取り組み」
       扉 #3981:10148「SDGsへの取り組み」
       ガバナンス Block3 の認証見出し（他の柱ページの同位置は27px） */
  .sus_h2--lg {
    font-size: 3rem;
  }

  .sus_h3 {                       /* サブ見出し 20px/1.8em */
    font-size: 2rem;
    line-height: 1.8;
  }

  /* ヒーロー（Figma SP #3981:9998 / #3981:10209）
       padding 60px 20px 0
       ラベル14px/32px →20px→ 英字見出し56px/1.1em →48px→ キャッチ →32px→ KV →32px→ リード */
  .sus_hero {
    padding: 60px 20px 0;
  }

  /* 扉ページ: hero_head（ラベル＋英字見出し）と hero_body（キャッチ＋KV＋リード）の間＝48px */
  .sus_hero_inner {
    gap: 48px;
  }

  /* ヒーローのラベルは style.css の .rec_head_sub（SP 1.2rem）が効くため、
     ページ内に限って Figma値（14px / line-height 32px）へ上書きする */
  .sus_page .rec_head_sub {
    font-size: 1.4rem;
    line-height: 32px;
    margin-bottom: 0;
  }

  .sus_hero_tit {
    margin-top: 20px;
    font-size: 5.6rem;
  }

  .sus_hero_body {
    width: auto;
  }

  .sus_hero_catch {
    font-size: 3rem;             /* 扉ページ 30px/1.7em */
  }

  .sus_hero_lead {
    margin-top: 32px;
    font-size: 1.6rem;
    line-height: 1.8;
  }

  /* SP版のKV（Figma: 335×300 / radius 24 / キャッチとリードの間）
     4柱ページでは .sus_hero_inner（flex / gap 32px）の直下なので margin は持たせない。
     扉ページでは .sus_hero_body 内の通常フローなので 32px を自前で持つ。 */
  .sus_kv_sp {
    margin-top: 0;
    /* SP版KVの幅:
       4柱ページの .sus_kv_sp は .sus_hero_inner（縦flex・align-items:flex-end）の
       直下にあるため shrink-to-fit になり、中の img の width:100% が循環参照で
       intrinsic 扱いになって「高さ300px × 縦横比 = 335px」で確定していた。
       さらに flex-end で右に寄る。375px幅の端末でだけ偶然正しく見えていた
       （375 − 左右20px = 335 と一致するため）。
       交差軸を伸ばして親の幅に追従させる。扉ページは .sus_hero_body 内の
       通常フローなので、この指定があっても影響しない。 */
    align-self: stretch;
  }

  .sus_hero_body .sus_kv_sp {
    margin-top: 32px;
  }

  .sus_kv_sp img {
    width: 100%;
    height: 300px;
    border-radius: 24px;
    object-fit: cover;
  }

  /* 扉ページ Block2「パーパスと、4つの柱」 Figma SP #3981:10011: padding 100px 20px */
  .sus_pillars {
    padding: 100px 0;
  }

  .sus_pillars_flex {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .sus_pillars_body {
    margin-top: 40px;
  }

  /* ⚠️ SPも 44px。Figma SP #I3981:10014;389:408 は PC と同じ Roboto Light 44px/1em。
     32px にしていたのは誤り（char分解のアニメーションテキストのため
     画素差分の検出網から漏れていた。2026-08-14 staging目視で発覚）。 */
  .sus_h2_en {
    font-size: 4.4rem;
  }

  /* 関連バナーの英字見出しは Figma SP #I3981:10157;389:408 が 40px/1em。
     Service だけ2行なので line-height 1.2em（#I3981:10164;389:408）。 */
  .sus_relation_en {
    font-size: 4rem;
  }

  .sus_relation_card--service .sus_relation_en {
    line-height: 1.2;
  }

  .sus_br_sp {
    display: inline;
  }

  .sus_br_pc {
    display: none;
  }

  /* パーパス図は 536px 固定のため、SPでは縮小して収める */
  .sus_diagram {
    flex: 0 0 auto;
    width: 100%;
    max-width: 335px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }


  .sus_diagram_ring   { top: 15.7%; left: 15.7%; width: 68.6%; height: 68.6%; }
  .sus_diagram_core   { top: 31.3%; left: 31.3%; width: 37.4%; height: 37.4%; }
  .sus_diagram_node   { width: 27.6%; height: 27.6%; padding: 0 6px; }
  .sus_diagram_node--top    { top: 0;     left: 36.2%; }
  .sus_diagram_node--left   { top: 36.2%; left: 0; }
  .sus_diagram_node--right  { top: 36.2%; left: 72.4%; }
  .sus_diagram_node--bottom { top: 72.4%; left: 36.2%; }

  .sus_diagram_core_en,
  .sus_diagram_en,
  .sus_diagram_jp {
    font-size: 1.1rem;
  }

  .sus_diagram_core_jp {
    font-size: 1.5rem;
  }

  /* 扉ページ Block3「Queryの取り組み」 Figma SP #3981:10053: padding 120px 20px 80px / gap 48 */
  .sus_initiatives {
    padding: 120px 0 80px;
  }

  /* SPはブロックの組み方が変わる箇所がある（PCの例外がSPでは既定に戻る）。
       環境 Block3   #3981:10749 = 24（PCは12）
       社会 Block5   #3981:10619 = 24（PCは32）
       ガバナンス Block3 #3981:10884 = 12（PCと同じ。ここは指定不要） */
  .sus_block_head--activities,
  .sus_block_head--actions {
    margin-bottom: 24px;
  }

  /* リード文→カード群は、環境と社会Block5のSPだけ 48
     （ブロックgap 48。#3981:10748 / #3981:10618）。ガバナンスSPは 32 で既定どおり */
  .sus_block_lead--activities,
  .sus_block_lead--actions {
    margin-bottom: 48px;
  }

  /* 扉ページ Block4「SDGsへの取り組み」 Figma SP #3981:10144: padding 100px 20px / gap 48 */
  .sus_sdgs {
    padding: 100px 0;
  }

  /* SPも入れ子構造は同じ（Figma #3981:10144 = ブロックgap48 ／ #3981:10145 = gap20） */
  .sus_initiatives .sus_block_head {
    margin-bottom: 48px;
  }

  .sus_sdgs .sus_block_head {
    margin-bottom: 20px;
  }

  .sus_pillar_card {
    flex: 1 1 100%;
  }

  .sus_relation {
    padding: 0 20px 80px;
  }

  /* 扉ページ Block5 関連導線 Figma SP #3981:10151: カード335×335 / radius24 / 縦積み gap20 */
  .sus_relation_inner {
    flex-direction: column;
    gap: 20px;
  }

  /* PCの flex: 1 1 50% は縦積みでは flex-basis が高さになり潰れるので固定に戻す */
  .sus_relation_card {
    flex: 0 0 335px;
    height: 335px;
    border-radius: 24px;
  }

  /* SPの暗幕は Figma #3981:10163 が PC と別値。枠(335x335)の全面・opacity 0.8 で、
     グラデーションの停止位置と色もPCより濃い。Aboutは SP も暗幕なし。
     PCと同じく fallback → @supports の二段構成にする。 */
  .sus_relation_card--service::after {
    height: 100%;
    /* fallback（blend非対応時）。コントラスト比 最小2.35 → 3.07（実測）。 */
    background: linear-gradient(180deg, rgba(140, 140, 140, 0) 3%, rgba(60, 60, 60, 0.65) 41%, rgba(24, 24, 24, 1) 84%);
    opacity: .9;
  }

  @supports (mix-blend-mode: multiply) {
    /* SPも LINEAR_BURN（#3981:10163）。multiply 近似で SP MAE 22.8 → 16.0。
       不透明度はFigmaの 0.8 に対し実測で 0.9 が最良。 */
    .sus_relation_card--service::after {
      background: linear-gradient(180deg, rgba(185, 185, 185, 0) 3%, rgba(90, 90, 90, 0.6) 41%, rgba(60, 60, 60, 1) 84%);
      mix-blend-mode: multiply;
      opacity: .9;
    }
  }

  /* Figma SP（枠 335x335）実測
       テキストブロック左端 x=20（#3981:10157 / #3981:10164）
       About   上端 y=181・ブロック高 32+12+40 = 84 → 下端265 → bottom 70
       Service 上端 y=131・ブロック高 32+12+(40x1.2x2=96) = 140 → 下端271 → bottom 64
       矢印    x=227 y=271 / 88x44 → 右20・下20（#3981:10158 / #3981:10165）
     Service はテキスト下端(271)と矢印上端(271)が接する配置になっており、
     1行のままだと矢印に重なる。上の SP用 <br> で2行にしている。 */
  .sus_relation_head {
    left: 20px;
  }

  .sus_relation_card--about .sus_relation_head {
    bottom: 70px;
  }

  .sus_relation_card--service .sus_relation_head {
    bottom: 64px;
  }

  .sus_relation_card .service_btn {
    right: 20px;
    bottom: 20px;
  }

  /* --- 4柱ページ共通パーツ（SP） --- */
  /* 4柱ページのヒーロー（Figma SP #3981:10210 ほか）
       ラベル14px/32px →20px→ 英字見出し56px/1.1em →48px→ キャッチ24px/1.7em
       hero_inner の gap 32px が「キャッチ→KV」「KV→リード」を担う */
  .sus_hero_inner--pillar {
    gap: 32px;
  }

  .sus_hero_tit--pillar {
    font-size: 5.6rem;
    line-height: 1.1;
  }

  .sus_hero_catch--pillar {
    margin-top: 48px;
    font-size: 2.4rem;
  }

  .sus_hero_lead--pillar {
    width: auto;
    margin-top: 0;
  }

  /* Figma SP: 宣言ブロックは padding 80px 20px */
  .sus_statement {
    padding: 80px 0;
  }

  .sus_wb_cards,
  .sus_measures,
  .sus_actions,
  .sus_certs {
    flex-direction: column;
  }

  /* Figma SP の数値カードは縦積みではなく「2枚横並び＋余りは全幅」。
       身体   #3981:10242 = row / gap 12px（2枚）
       社会的 #3981:10343 = row / gap 12px（2枚）＋ #3981:10354 が単独で全幅
     flex-basis を 50% にして grow を効かせると、3枚目だけが次行で全幅に伸びる。 */
  .sus_stats {
    flex-wrap: wrap;
    gap: 12px;
  }

  .sus_stat {
    flex: 1 1 calc(50% - 6px);
  }

  /* 施策カードの並びは Figma SP も縦積みで正しい（#3981:10253 column）。
     間隔だけ PC の 16px を引きずっていたので 12px にする。 */
  .sus_measures {
    gap: 12px;
  }

  /* Figma SP #3981:10346 は Roboto Medium 52px（PCは56px・#3981:9489）。
     ラベルも SP だけ 13px（#3981:10348。PCは14px・#3981:9491）。 */
  /* 行高がFigmaより詰まっており、数値とラベルが接触して見えていた。
     カードの padding（16px 0）と gap（8px）はFigmaと一致しているので、
     原因は余白ではなく line-height。destyle の既定 1.15 が残っていた箇所がある。
       数値  Figma 60.9375 / 52   = 1.171875（実装は 1）
       単位% Figma 19.2    / 16   = 1.2      （実装は 1.6）
       ラベル Figma 18.824  / 13   = 1.448    （実装は 1.15＝destyle既定） */
  .sus_stat_label {
    font-size: 1.3rem;
    line-height: 1.448;
  }

  .sus_stat_num {
    font-size: 5.2rem;
    line-height: 1.171875;
  }

  .sus_stat_unit {
    line-height: 1.2;
  }

  /* Planet の施策カード・Governance の認証カードは
     SPでは「縦積み＋カード内は横並び（アイコン左＋テキスト右）」に変わる */
  /* Planet の施策カード（Figma SP「Measure Card (施策)」#3981:10757）
       padding 22px / 枠2px #E2E2E2 / radius 20 / 内側は row gap 20px
       アイコン72×72 ＋ 右カラム(gap 8px)[タイトル18px・本文14px/1.7em #777]
     ⚠️ PC版（#3981:9790）は 枠 #E8E8E8 / radius 14 / 本文 #555 で、
        Figma上でPCとSPの意匠が意図的に分かれている。両方そのまま実装している。 */
  /* Society の社会貢献活動カード（#3981:10627）も同じ Measure Card 構造で、
     内側 #3981:10628 が row / gap 20px。--4 の有無にかかわらず同じ組み方になる。 */
  .sus_action {
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "icon title"
      "icon text";
    align-items: center;
    column-gap: 20px;
    row-gap: 8px;
    padding: 20px;          /* Figma SP 22 − 枠線2 */
    border-color: #E2E2E2;
    border-radius: 20px;
  }

  /* ⚠️ PC用の .sus_actions--4 .sus_action（14px / #E8E8E8 / padding 20）は
     詳細度が上なのでSPでも勝ってしまう。SPは環境も他と同じ意匠なので打ち消す。
     Figma SP #3981:10757 = radius 20 / 枠 #E2E2E2 / padding 22。 */
  .sus_actions--4 .sus_action {
    padding: 20px;          /* Figma SP 22 − 枠線2 */
    border-color: #E2E2E2;
    border-radius: 20px;
  }

  /* ウェルビーイングの施策カードも、SPでは同じく「アイコン左＋テキスト右」。
     Figma SP「Measure Card (施策)」#3981:10254 の内側 #3981:10255 が row / gap 20px で、
     アイコン72×72 ＋ 右カラム（#3981:10257 column / gap 8px）という構造。
     実装は平坦なflexのままだったのでアイコンが1行を占有し、カード1枚あたり
     100px以上高くなっていた（12枚ぶんで1,000px超）。
     .sus_actions--4 と同じ組み方に揃える。級数（見出し18px Bold / 本文14px 1.7em #777）は
     もともとFigmaと一致している。 */
  .sus_measure {
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "icon title"
      "icon text";
    /* Figma の アイコン行（#3981:10254 内 Frame 629486）は
       counterAxisAlignItems が未指定＝MIN、つまり **上揃え**。
       アイコンとテキスト枠がともに同じ y から始まっている。
       center だとアイコンが約31px下がり、Figmaより低い位置に見えていた。 */
    align-items: start;
    column-gap: 20px;
    row-gap: 8px;
  }

  .sus_measure_icon { grid-area: icon; }

  .sus_measure_tit {
    grid-area: title;
    margin-top: 0;      /* PCの「アイコン→見出し20px」はSPの横並びでは不要 */
  }

  .sus_measure_txt {
    grid-area: text;
    margin-top: 0;      /* row-gap 8px が担う */
  }

  /* Governance の認証バッジ（Figma SP「Cert Badge (認証バッジ)」#3981:10890）
       padding 24px / 枠2px #E6E6E6 / radius 16（PC版と同値）
       内側は row gap 16px。ロゴ幅112px ＋ 右カラム[規格名 →16px→ 見出し →10px→ 本文] */
  /* G-05: Figma の認証カードは3枚とも同一構造（pad24 / gap16 → 横並び gap16）で、
     3枚目だけ別レイアウトということはない。違うのは **ロゴの実寸** だけ。
       ISO 27001 = 112 ／ ISO 9001 = 110 ／ プライバシーマーク = 63
     Figmaはロゴ幅ぶんだけテキスト列が右に寄るので、3枚目の見出し開始位置は
     カード左から 103px（1枚目は 152px）になる。
     実装はロゴ列を 112px 固定にしていたため3枚目だけ 49px 右へずれていた。
     例外指定を足すのではなく、**列をロゴの実寸に追従させる**のが構造的な直し方。 */
  .sus_cert_card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo std"
      "logo title"
      "logo text";
    align-items: start;
    align-content: start;
    column-gap: 16px;
    row-gap: 0;
  }

  .sus_action_icon {
    grid-area: icon;
  }

  .sus_action_tit {
    grid-area: title;
  }

  .sus_action_txt {
    grid-area: text;
    line-height: 1.7; /* Figma SP #3981:10757 系は 1.7em（PC Society だけ 1.8em） */
    color: #777;      /* Figma SP は本文 #777（PCの #555 とは別値） */
  }

  .sus_cert_card_logo {
    grid-area: logo;
  }

  .sus_cert_card_std {
    grid-area: std;
    margin-top: 0;      /* PCの「ロゴ→規格名16px」はSPの横並びでは不要 */
  }

  .sus_cert_card_tit {
    grid-area: title;
    margin-top: 16px;
  }

  .sus_cert_card_txt {
    grid-area: text;
    margin-top: 10px;
  }

  /* Figma SP「Cert Badge（認証バッジ）」: padding 24px 20px / 枠2px（内側）/ radius 20
     → 枠線ぶんを引いて 22px 18px */
  .sus_cert {
    flex-direction: column;
    padding: 22px 18px;
  }

  /* Figma SP #4109:2422「両立ブロック」: カード2枚は縦積みだが、
     カード内は「マーク左＋タイトル/本文右」の横並びを維持する。
     上の .sus_cert の column を、このバリエーションだけ戻す。 */
  .sus_cert--half {
    flex-direction: row;
  }

  /* Figma SP #4109:2443「女性活躍」: バナー上 → タイトル → 本文の縦積み。
     バナーは左寄せ（親は primaryAxisAlignItems=CENTER だが縦方向の指定で、
     横は既定の左揃え）。PCの align-items:center をここで戻す。 */
  .sus_cert--wide {
    align-items: flex-start;
  }

  /* Figma SP #3981:10914: Block4 は padding 48px 20px 0 */
  .sus_gov_banner_sec {
    padding: 48px 0 0;
  }

  /* Figma SP #3981:10915 の主導線バナーは padding 28px 44px だが、
     44px だとコンテンツ幅247pxに対して253pxのボタンがはみ出す（Figma側の不整合）。
     ここは左右24px（ボタンが収まる最小の妥当値）。 */
  .sus_gov_banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }

  /* common.css は SP（≤768px）で .contents_link_btn を
     position:absolute / bottom:10% / right:5% にする（サービスページのバナー用）。
     このページではバナー内に置くため、ページ内スコープで通常フローに戻す。
     ※ common.css 自体は変更しない（共通CSSは触らない規約） */
  .sus_gov_banner .contents_link_btn {
    position: relative;
    right: auto;
    bottom: auto;
  }

  /* Figma SP #3981:10393: padding 80px 20px 100px / gap 32px / 見出し28px・1.5em */
  .sus_related {
    padding: 80px 0 100px;
  }

  .sus_related_tit {
    font-size: 2.8rem;
    line-height: 1.5;
  }

  /* Figma SP「Pillar Nav Card」#3981:10396: 画像335×192 / 下パディング28px / 縦積み gap25 */
  .sus_pillar_cards--3 {
    gap: 25px;
  }

  .sus_pillar_cards--3 .sus_pillar_card {
    flex: 1 1 100%;
  }

  .sus_pillar_cards--3 .sus_pillar_card {
    padding-bottom: 28px;
  }

  .sus_pillar_cards--3 .sus_pillar_card_img img {
    height: 192px;
  }

  /* Figma SP #3981:10521 は Roboto Medium 46px（PCは60px・#3981:9602） */
  .sus_total_amount {
    font-size: 4.6rem;
  }

  /* S-03: Figma の注記は「総額サマリー」直下の Frame 629496（幅271・カード内で中央配置）に入り、
       「2008年〜累計」   HUG幅101 を CENTER 配置 → **中央に見える**
       「15年以上にわたり〜」幅271いっぱい・textAlignHorizontal=LEFT → **左寄せ**
     実装は2つとも 335px 全幅 ＋ text-align:center で、下段まで中央寄せになっていた。
     行高も destyle 既定（1.15）のままだったので Figma 値に戻す。
       2008年〜累計   19.2 / 16 = 1.2
       15年以上〜     22.5 / 15 = 1.5 */
  .sus_total_period {
    line-height: 1.2;
  }

  .sus_total_note {
    width: 271px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.5;
    text-align: left;
  }

  /* Figma SP #3981:10530 は padding 0/20・枠線2px（内側）→ 18px */
  .sus_acc_item {
    padding: 0 18px;
  }

  /* Figma SP #3981:10578「年度合計」は column / gap 4px で、年度と合計が縦積み。
     級数はPCと同じ（年度 20px #333 / 「合計」16px / 金額 28px Bold Primary）で、
     変わるのは並びだけ。実装は flex-wrap で折り返したうえ級数まで縮めており、
     金額(14px)が「合計」ラベル(16px)より小さいという主従逆転になっていた。
     DOMが平坦なので、grid で「左に縦積み・右にアイコン」を組む。 */
  .sus_acc_btn {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
  }

  .sus_acc_year {
    grid-column: 1;
    grid-row: 1;
    font-size: 2rem;
  }

  .sus_acc_sum {
    grid-column: 1;
    grid-row: 2;
    font-size: 2.8rem;
  }

  .sus_acc_icon {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  /* S-04: SPの明細は Figma（#3981:10435 内「明細」）では
       団体名 → 金額 → 内訳 の縦積みで、**3つとも左寄せ**。
     PC（#3981:9559）は SPACE_BETWEEN の横並びで金額が右端に来る別構造なので、
     「金額は右寄せで桁を揃える」の実装ルールは **PCの規約**として維持し、
     ここでは SP だけ Figma の縦積み・左寄せに合わせる。
       団体名→金額ブロック  gap 8   （実装は 4）
       金額→内訳            gap 6   （Figmaどおり dd に既定済み）
       罫線の上下           16 / 16 （実装は 10 / 10）
       行高は3つとも 1.448（21.72/15・28.96/20・18.824/13） */
  .sus_acc_list {
    gap: 16px;
  }

  .sus_acc_row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-bottom: 16px;
  }

  .sus_acc_row dt {
    line-height: 1.448;
  }

  .sus_acc_row dd {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .sus_acc_amount {
    min-width: 0;
    line-height: 1.448;
    text-align: left;
  }

  .sus_acc_note {
    white-space: normal;
    line-height: 1.448;
    text-align: left;
  }
}