/**
 * サステナビリティページ固有スタイル。
 * 全体を@layer base（base.cssと同じレイヤー）に入れている。
 * Tailwindのユーティリティは@layer utilitiesに入っており、レイヤー無しの通常CSSは
 * 詳細度に関係なく常にどのレイヤーよりも勝ってしまうため、このファイルをレイヤー無しのままにすると
 * 同じ要素にTailwindクラス（mt-◯等）を併用しても効かない事故が起きる。
 * base.cssが各ページでこのファイルより先に読み込まれ@layer baseを宣言しているため、
 * ここで同じ名前のレイヤーを使うことで base → theme → utilities の順（後ろほど優先）に揃う。
 */
@layer base {

main .page-hero--csr {
  background-image: url("/csr/img/main_pc_bg.jpg");
  background-position: center;
}

/* CSRトップページのみPC時の上下余白を115pxに（タブレット/SPは.section-intro共通値のまま） */
main .csr-intro {
  margin-block: 115px;
}

/* マテリアリティページのみ上下余白を80pxに（SPは640pxブロックで60pxに上書き） */
main .materiality-esg-intro {
  margin-block: 80px;
}

/* 人的資本ページ「階層に応じた人材育成」イントロのみ上100px・下50pxに */
main .capital-career-intro {
  margin-block: 100px 50px;
}

main .csr-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 120px 34px;
  padding-bottom: 120px;
}

/* PC限定: リンクカードの画像をマウスオーバーでズーム（.top_service__cardと同じ0.4s ease/1.08倍を採用） */
main .csr-links .link-card__image::before {
  transition: transform 0.4s ease;
}

main .csr-links .link-card:hover .link-card__image::before {
  transform: scale(1.08);
}

main .link-card__image--mission::before {
  background-image: url("/csr/img/mission_bg.jpg");
}

main .link-card__image--environment::before {
  background-image: url("/csr/img/environment_bg.jpg");
}

main .link-card__image--human-capital::before {
  background-image: url("/csr/img/human_capital_bg.jpg");
}

main .link-card__image--social::before {
  background-image: url("/csr/img/social_bg.jpg");
}

main .link-card__image--governance::before {
  background-image: url("/csr/img/governance_bg.jpg");
}

main .link-card__image--esg-data::before {
  background-image: url("/csr/img/esg_data_bg.jpg");
}

/**
 * マテリアリティページ（/csr/materiality/）固有スタイル。
 */

main .materiality-hero {
  background-image: url("/csr/materiality/img/main_pc_bg.jpg");
  background-position: center;
}

main .materiality-message {
  padding-block: 120px;
}

main .materiality-message__lead {
  margin: 0;
  font-size: 30px;
  line-height: 2;
}

main .materiality-message__body {
  margin-top: 48px;
}

main .materiality-message__sign {
  margin: 60px 0 0;
}

main .materiality-message__name {
  font-size: 20px;
}

main .materiality-policy {
  margin-top: 100px;
  margin-bottom: 200px;
}

main .materiality-policy h3 {
  margin: 45px 0 20px;
}

main .materiality-esg-diagram {
  margin-block: 80px 120px;
}

main .materiality-esg-diagram__image {
  display: block;
  width: 100%;
  height: auto;
}

main .materiality-table {
  padding-bottom: 120px;
}

main .materiality-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

main .materiality-table th,
main .materiality-table td {
  padding: 20px;
  border: 1px solid #bababa;
  text-align: left;
  vertical-align: middle;
}

main .materiality-table thead th {
  border-top: none;
  color: #333333;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}

main .materiality-table thead th:first-child {
  border-left: none;
}

main .materiality-table thead th:last-child {
  white-space: nowrap;
}

main .materiality-table__category {
  width: 130px;
  color: var(--color-site-white);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* 区分セルは常に着色されているため、区分セルどうしが隣接する境界は白にする。
   border-collapseでは隣接セルの上下ボーダーが競合するため、片側だけでなく
   両方(border-top/border-bottom)を白にしておく必要がある(片側だけだと
   もう片方に残ったグレーとの衝突解決でグレー側が勝つ場合がある)。
   thead直後(非着色)の最初の区分セルの上、テーブル最下端になる最後の区分セルの下、
   それぞれだけ直後のルールで元のグレーに戻す。
   main .materiality-table td(詳細度0,1,2)に勝つため、td.を明記して詳細度を上げる。 */
main .materiality-table td.materiality-table__category {
  border-top-color: white;
  border-bottom-color: white;
}

main .materiality-table tbody tr:first-child td.materiality-table__category {
  border-top-color: #bababa;
}

/* rowspanで最後の区分を持つ行を特定し、その下ボーダーだけ元のグレーに戻す
   (区分セルを持つ行の中で、後ろに区分セルを持つ行が無いもの=最後の区分) */
main .materiality-table tr:has(td.materiality-table__category):not(:has(~ tr td.materiality-table__category)) td.materiality-table__category {
  border-bottom-color: #bababa;
}

/* 先頭列(環境/社会/ガバナンス区分)のみ、全体のvertical-align:middle上書きより
   詳細度を上げて元のtopを維持する(main .materiality-table tdとの詳細度差を埋めるためtdを明記) */
main .materiality-table td.materiality-table__category {
  vertical-align: top;
}

main .materiality-table__category span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

main .materiality-table__category small {
  display: block;
  margin-top: 12px;
  font-size: 12px;
}

main .materiality-table__category--environment {
  background-color: #37D1F3;
}

main .materiality-table__category--social {
  background-color: #5EB6F6;
}

main .materiality-table__category--governance {
  background-color: #009DF0;
}

main .materiality-table td[data-label="テーマ"] {
  color: #5EB6F6;
  line-height: 2;
}

main .materiality-table td.materiality-table__theme--environment {
  color: #37D1F3;
}

main .materiality-table td.materiality-table__theme--governance {
  color: #009DF0;
}

main .materiality-table ul {
  padding-left: 1.2em;
}

main .materiality-table ul li + li {
  margin-top: 8px;
}

main .materiality-table td[data-label="主な取り組み"] li::marker {
  content: "- ";
}

main .materiality-table td[data-label="重要項目"] li::marker {
  color: var(--color-site-primary);
}

main .materiality-table__sdgs {
  width: 100px;
}

main .materiality-table__sdgs img {
  display: block;
  width: 70px;
  height: 70px;
  margin: 0 auto 8px;
}

/**
 * 環境ページ（/csr/environment/）固有スタイル。
 * SPデザインは追って対応のため、現時点ではPC向けのスタイルのみ定義する。
 */

main .environment-hero {
  background-image: url("/csr/environment/img/main_pc_bg.jpg");
  background-position: center;
}

main .environment-policy {
  margin-top: 100px;
}

main .environment-policy .declaration-box__list {
  margin-top: 40px;
}

main .environment-policy .declaration-box__list li + li {
  margin-top: 16px;
}

main .environment-policy__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30px;
}

main .environment-policy__date,
main .environment-policy__sign {
  margin: 0;
}

main .environment-policy__sign {
  text-align: right;
}

main .environment-management {
  margin-top: 110px;
  margin-bottom: 200px;
}

main .environment-management__chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 56px;
}

main .environment-co2 {
  margin-top: 100px;
}

main .environment-co2__chart-panel {
  margin-top: 56px;
  padding-block: 64px;
}

main .environment-co2__chart-inner {
  width: 90%;
  max-width: 670px;
  margin-inline: auto;
}

main .environment-co2__chart-head {
  display: flex;
  justify-content: space-between;
}

main .environment-co2__chart-title {
  margin: 0;
  color: var(--color-site-primary);
  font-size: 20px;
}

main .environment-co2__chart-note {
  margin: 0;
  color: #666666;
  font-size: 13px;
  text-align: right;
}

main .environment-co2__chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 40px;
}

main .environment-co2__scope {
  margin: 32px 0 0;
}

main .environment-co2__scope-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

main .environment-co2__scope-item + .environment-co2__scope-item {
  margin-top: 16px;
}

main .environment-co2__scope-item dt {
  flex-shrink: 0;
  width: 82px;
  font-weight: 500;
  font-size: 14px;
}

main .environment-co2__scope-item dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

main .environment-co2__scope-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 2px;
}

main .environment-co2__scope-dot--1 {
  background-color: #009DF0;
}

main .environment-co2__scope-dot--2 {
  background-color: #37D1F3;
}

main .environment-energy,
main .environment-resource {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

main .environment-energy {
  margin-top: 100px;
}

main .environment-resource {
  margin-top: 80px;
}

main .environment-energy__body,
main .environment-resource__body {
  flex: 1 1 auto;
}

main .environment-energy__body h4,
main .environment-resource__body h4 {
  margin-top: 0;
}

main .environment-energy__photo {
  display: block;
  flex-shrink: 0;
  width: 330px;
  max-width: 330px;
  height: 280px;
  object-fit: cover;
}

main .environment-resource__figure {
  flex-shrink: 0;
  width: 330px;
  max-width: 330px;
  margin: 0;
}

main .environment-resource__photo {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}

main .environment-resource__caption {
  margin-top: 8px;
  color: #666666;
  font-size: 12px;
  line-height: 1.6;
}

main .environment-resource-charts {
  margin-top: 80px;
  padding: 64px ;
}

main .environment-resource-charts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

main .environment-resource-charts__title {
  margin: 0;
  color: var(--color-site-primary);
  font-size: 20px;
}

main .environment-resource-charts__chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

/**
 * TOPICSセクションの共通スタイルは base.css（.topics / .topic）へ移設済み。
 * 以下は環境ページ固有の要素のみ。
 */

main .topic__logo {
  display: inline-block;
  height: 22px;
  width: auto;
  margin-left: 12px;
  vertical-align: middle;
}

main .topic__image--cover {
  height: 260px;
  object-fit: cover;
}

main .topic__table {
  flex: 4 1 0%;
  min-width: 0;
  height: fit-content;
  border-collapse: collapse;
  font-size: 14px;
}

main .topic__table th,
main .topic__table td {
  padding: 12px 16px;
  border: 1px solid #bababa;
  text-align: left;
  vertical-align: middle;
}

main .topic__table th {
  color: var(--color-site-primary);
  font-weight: 500;
  text-align: center;
}

main .topic__diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 40px;
}

main .u-horizontal-scroll {
  margin-top: 40px;
}

main .u-horizontal-scroll .topic__diagram,
main .u-horizontal-scroll .environment-co2__chart,
main .u-horizontal-scroll .capital-career__matrix,
main .u-horizontal-scroll .capital-career__diagram,
main .u-horizontal-scroll .common-table,
main .u-horizontal-scroll .governance-diagram {
  margin-top: 0;
}

main .topic__note {
  margin: 24px 0 0;
  padding-left: 98px;
  text-indent: -98px;
  font-size: 13px;
}

main .topic__ref {
  margin: 24px 0 0;
  overflow-wrap: break-word;
  font-size: 13px;
}

main .topic__ref a {
  color: #007eb8;
}

/**
 * 人的資本ページ（/csr/human_capital/）固有スタイル。
 */

main .capital-hero {
  background-image: url("/csr/human_capital/img/main_pc_bg.jpg");
  background-position: center;
}

main .capital-career,
main .capital-workplace,
main .capital-diversity,
main .capital-health,
main .capital-safety,
main .capital-human-rights {
  margin-bottom: 200px;
}

/* capital-health/capital-safetyはbase_widthの中でさらに幅を絞るため、
   base_width_s(%指定であるため入れ子にすると二重に縮んでしまう)は使わず、
   max-width指定のみで926px幅を再現する。 */
main .capital-section-inner,
main .capital-declaration__inner {
  max-width: 926px;
  margin-inline: auto;
}

main .capital-career__diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 20px;
}

main .capital-image-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  max-width: 740px;
  margin-top: 64px;
  margin-inline: auto;
}

main .capital-persona-panel {
  padding: 50px 20px;
}

main .capital-persona-panel__image {
  display: block;
  width: 100%;
  height: auto;
}

main .capital-diagram-panel {
  padding: 50px 40px;
}

main .capital-diagram-panel__image {
  display: block;
  width: 100%;
  height: auto;
}

main .capital-image-row__image {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
}

main .capital-career__block {
  margin-top: 110px;
}

main .capital-career__matrix {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 40px;
}

/* common-table の基本スタイルは base.css。以下は人的資本テーブル固有。 */

main .common-table td[data-label="研修・教育"],
main .common-table td[data-label="取り組み"] {
  width: 22%;
  text-align: center;
  color: var(--color-site-primary);
  vertical-align: middle;
}

main .common-table td[data-label="表彰区分"] {
  text-align: center;
  color: var(--color-site-primary);
}

main .common-table td[data-label="頻度"] {
  width: 12%;
  white-space: nowrap;
}

main .common-table td[data-label="No"] {
  width: 8%;
}

main .capital-plan__period {
  margin-top: 8px;
  font-size: 14px;
}

main .capital-note-inline {
  margin-left: 12px;
  color: #666666;
  font-size: 13px;
}

main .capital-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

main .capital-gallery--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

main .capital-gallery__photo {
  display: block;
  width: 100%;
  object-fit: cover;
}

main .capital-declaration {
  margin-top: 100px;
}

main .capital-declaration p {
  margin-top: 24px;
}

main .capital-declaration .declaration-box__list {
  margin-top: 24px;
  text-align: left;
}

main .capital-declaration .declaration-box__list li + li {
  margin-top: 8px;
}

main .capital-declaration__sign {
  margin-top: 40px;
  text-align: right;
}

main .capital-badge-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-left: 0;
  list-style: none;
}

main .capital-badge-list__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 24px;
  background-color: #f0f9fe;
  border-radius: 8px;
}

main .capital-badge-list__icon {
  display: block;
  flex-shrink: 0;
  width: 80px;
  height: 73px;
}

main .capital-badge-list__text {
  margin: 0;
}

main .capital-qualification {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  margin-top: 100px;
}

main .capital-qualification__body {
  flex: 6 1 0%;
  min-width: 0;
}

main .capital-qualification__body h4 {
  margin-top: 0;
}

main .capital-qualification__note {
  margin-top: 16px;
  padding-left: 15px;
  text-indent: -15px;
  color: #666666;
  font-size: 13px;
  line-height: 1.8;
}

main .capital-qualification__visual {
  flex: 4 1 0%;
  min-width: 0;
}

main .capital-qualification__image {
  display: block;
  width: 100%;
  height: auto;
}

main .capital-qualification__caption {
  margin-top: 12px;
  color: #666666;
  font-size: 13px;
  text-align: left;
}

/**
 * TOPICS共通は base.css。以下は人的資本ページ固有。
 */

main .topic__row + .topic__row {
  margin-top: 40px;
}

main .topic__subheading {
  margin: 0 0 16px;
  padding-left: 20px;
  text-indent: -20px;
  color: #008ED8;
  font-size: 16px;
}

main .topic__subheading::before {
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: 8px;
  background-color: #008ED8;
  content: "";
  vertical-align: middle;
}

/* SP用画像を<picture><source>で切り替える場合、flexアイテムになるのはpicture自身のため
   中のimgのwidth指定(base.cssの.topic__image)だけでは効かない。pictureにも同じflex比率を
   直接持たせて揃える(--asideの固定幅は下の専用ルールで上書きされる)。 */
main .topic__row picture:has(> .topic__image) {
  flex: 4 1 0%;
  min-width: 0;
  width: 100%;
}

main .topic__image--aside {
  flex: none;
  flex-shrink: 0;
  width: 330px;
  height: auto;
}

/* SP用画像を<picture><source>で切り替える場合、flexアイテムになるのはpicture自身のため
   中のimgのwidth指定だけでは効かない。pictureにも同じ幅指定を直接持たせて揃える。 */
main .topic__row picture:has(> .topic__image--aside) {
  flex: none;
  flex-shrink: 0;
  width: 330px;
}

main .topic__image--full {
  width: 100%;
}

main .topic__row .common-table {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  margin-top: 0;
}

main .topic__row--55-45 .common-table {
  flex: 4.5 1 0%;
}

main .topic__row--7-3 .common-table {
  flex: 7 1 0%;
}

main .topic__row--55-45 .topic__image {
  flex: 5.5 1 0%;
}

main .topic__row--7-3 .topic__image {
  flex: 3 1 0%;
}

/* TOPICS(健康経営優良法人)の「現状」「2029年度目標」列のみ中央寄せ。common-table既定のtext-align:leftを上書き */
main .common-table td[data-label="現状"],
main .common-table td[data-label="2029年度目標"] {
  text-align: center;
}

main .topic__icon {
  position: absolute;
  right: 50px;
  bottom: 0;
  width: 110px;
  height: auto;
}

/**
 * 社会貢献ページ（/csr/social/）固有スタイル。
 */

main .social-hero {
  background-image: url("/csr/social/img/main_pc_bg.jpg");
  background-position: center;
}

main .social-education,
main .social-community,
main .social-culture {
  padding-bottom: 120px;
}

main .social-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  letter-spacing: 0.1em;
}

main .social-table th,
main .social-table td {
  padding: 16px;
  border: 1px solid #BABABA;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

main .social-table td[data-label="概要"] {
  white-space: normal;
}

main .social-table td[data-label="入館者数"] {
  text-align: center;
}

main .social-table thead th {
  padding-block: 16px;
  border-top: none;
  color: #333333;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}

main .social-table thead th:first-child {
  border-left: none;
}

main .social-table__category {
  padding: 0 36px;
  background-color: #37D1F3;
  color: var(--color-site-white);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* 区分セルは常に着色されているため、区分セルどうしが隣接する境界は白にする。
   thead直後(非着色)の最初の区分セルだけ直後のルールで元のグレーに戻す。
   main .social-table td(詳細度0,1,2)に勝つため、td.を明記して詳細度を上げる。 */
main .social-table td.social-table__category {
  border-top-color: white;
  border-bottom-color: white;
}

main .social-table tbody tr:first-child td.social-table__category {
  border-top-color: #BABABA;
}

/* rowspanで最後の区分(特別展等)を持つ行を特定し、その下ボーダーだけ元のグレーに戻す
   (区分セルを持つ行の中で、後ろに区分セルを持つ行が無いもの=最後の区分) */
main .social-table tr:has(td.social-table__category):not(:has(~ tr td.social-table__category)) td.social-table__category {
  border-bottom-color: #BABABA;
}

main .social-table tr[data-category="特別展"] td.social-table__category {
  background-color: #54B5F6;
}

/**
 * 社会貢献ページ TOPICS は base.css（.topics / .topic）を使用。ページ固有の上書きなし。
 */

/**
 * ESGデータ/レポートページ（/csr/esg_data/）固有スタイル。
 */

main .esg-hero {
  background-image: url("/csr/esg_data/img/main_pc_bg.jpg");
  background-position: center;
}

main .esg-intro {
  padding-block: 80px 40px;
}

main .esg-data {
  padding-block: 40px 120px;
}

main .esg-block + .esg-block {
  margin-top: 64px;
}

/* common-table の基本スタイルは base.css。以下は ESGデータページ固有。 */

main .esg-data .common-table {
  font-size: 15px;
}

main .esg-data .common-table th,
main .esg-data .common-table td {
  padding: 16px;
  vertical-align: middle;
}

main .esg-data .common-table th:first-child,
main .esg-data .common-table td:first-child {
  width: 31%;
}

main .esg-data .common-table th:not(:first-child),
main .esg-data .common-table td:not(:first-child) {
  width: 23%;
}

main .esg-data .common-table td:first-child {
  color: var(--color-site-primary);
}

main .esg-data .common-table small {
  font-size: 13px;
}

main .common-table__row--highlight {
  background-color: #eef7fd;
}

main .esg-data .common-table__row--child td:first-child {
  color: #333333;
}

main .common-table__label-note {
  display: block;
  margin-top: 4px;
  color: var(--color-site-primary);
  font-size: 12px;
}

main .esg-report-banner {
  position: relative;
  height: 400px;
  overflow: hidden;
  color: var(--color-site-white);
}

main .esg-report-banner__bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main .esg-report-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

main .esg-report-banner__heading {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
}

main .esg-report-banner__button {
  display: inline-flex;
  position: relative;
  align-items: center;
  min-width: 390px;
  width: fit-content;
  margin-top: 32px;
  padding: 15px 52px 15px 32px;
  border: 1px solid var(--color-site-white);
  color: var(--color-site-white);
  text-decoration: none;
}

main .esg-report-banner__button-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 13px;
  height: 11px;
  transform: translateY(-50%);
}

main .esg-archive {
  padding-block: 60px 120px;
}

main .esg-archive__heading {
  margin: 0;
  padding: 16px 24px;
  background-color: #f5f6f7;
  color: var(--color-site-primary);
  font-size: 16px;
  font-weight: 700;
}

main .esg-archive__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  margin-top: 32px;
}

main .esg-archive__year {
  margin: 0;
  padding-left: 15px;
  color: var(--color-site-primary);
  font-size: 22px;
  line-height: 1.4;
}

main .esg-archive__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}

/**
 * ガバナンスページ（/csr/governance/）固有スタイル。
 */

main .governance-hero {
  background-image: url("/csr/governance/img/main_pc_bg.jpg");
  background-position: center;
}

main .governance-compliance,
main .governance-internal-control,
main .governance-quality,
main .governance-bcm,
main .governance-infosec {
  margin-bottom: 160px;
}

main .governance-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 40px;
}

main .governance-pillars {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

main .governance-pillars__item {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 240px;
}

main .governance-pillars__image {
  display: block;
  width: 100%;
  height: auto;
}

main .governance-declaration__sublist {
  margin: 12px 0 0;
  padding-left: 1.5em;
  list-style: none;
}

main .governance-declaration__sublist li {
  display: flex;
  gap: 8px;
}

main .governance-declaration__sublist li + li {
  margin-top: 8px;
}

main .governance-declaration__marker {
  flex-shrink: 0;
}

main .governance-cert-list {
  margin: 24px 0 0;
  font-size: 14px;
}

main .governance-cert-list__row {
  display: flex;
  gap: 24px;
  padding-block: 16px;
  border-bottom: 1px solid #bababa;
}

main .governance-cert-list__row:first-child {
  border-top: 1px solid #bababa;
}

main .governance-cert-list__term {
  flex: 5 1 0%;
  min-width: 0;
  margin: 0;
  padding-left: 20px;
  color: var(--color-site-primary);
}

main .governance-cert-list__desc {
  flex: 4 1 0%;
  min-width: 0;
  margin: 0;
}

main .governance-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

main .governance-chart-grid__title {
  margin: 0;
  color: var(--color-site-primary);
  font-size: 16px;
  font-weight: 700;
}

main .governance-chart-grid__image {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
}

/**
 * ガバナンスページ TOPICS は base.css（.topics / .topic）を使用。ページ固有の上書きなし。
 */

/* 人的資本ページ common-table セル中央寄せ・右寄せ */
main .common-table td[data-label="頻度"],
main .common-table td[data-label="No"],
main .common-table td[data-label="件数"] {
  text-align: center;
}

main .common-table td[data-label="賞金（円）"] {
  text-align: right;
}

/* ガバナンスページ専用のanchor-nav上書き */
main .governance-intro .anchor-nav {
  justify-content: flex-start;
}

main .governance-intro .anchor-nav__item {
  min-height: 64px;
}

/* ESG数値セル中央寄せ */
main .esg-data .common-table th:first-child,
main .esg-data .common-table td:first-child {
  text-align: left;
}

main .esg-data .common-table th:not(:first-child),
main .esg-data .common-table td:not(:first-child) {
  text-align: center;
}

main .esg-data .common-table th,
main .esg-data .common-table td{
  padding: 12px 20px;
  line-height: 1.4;
}

/* =====================================================================
   レスポンシブ（すべてここにまとめる。ブレークポイントは 980px / 640px）
   ===================================================================== */

@media only screen and (max-width: 980px) {
  main .csr-links {
    gap: 90px 40px;
    padding-bottom: 100px;
  }

  main .materiality-message {
    padding-block: 80px 60px;
  }

  main .materiality-message__lead {
    font-size: 26px;
  }

  main .materiality-message__body {
    margin-top: 36px;
  }

  main .materiality-message__name {
    font-size: 19px;
  }

  main .materiality-policy {
    margin-top: 80px;
    margin-bottom: 140px;
  }

  main .materiality-esg-diagram {
    margin-block: 60px 100px;
  }

  main .materiality-table {
    padding-bottom: 100px;
  }

  main .materiality-table table,
  main .materiality-table tbody,
  main .materiality-table tr,
  main .materiality-table th,
  main .materiality-table td {
    display: block;
    width: 100%;
  }

  main .materiality-table thead {
    display: none;
  }

  main .materiality-table tr + tr {
    margin-top: 50px;
  }

  main .materiality-table tr:not(:has(.materiality-table__category)) {
    margin-top: 20px;
  }

  main .materiality-table td {
    border: none;
  }

  main .materiality-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 12px;
    color: #333333;
  }

  main .materiality-table td[data-label] {
    padding: 30px 0;
    border-bottom: 1px solid #bababa;
  }

  main .materiality-table td[data-label="関連するSDGs"] {
    border-bottom: none;
  }

  main .materiality-table__category {
    width: 100%;
    padding: 32px;
    text-align: left;
  }

  /* PC時の白罫線に対応する、縦積みカード時の区分ブロック区切り(グレー)。
     main .materiality-table td { border: none; }(詳細度0,1,2)に勝つため、td.を明記する。 */
  main .materiality-table td.materiality-table__category {
    border-bottom: 1px solid #bababa;
  }

  main .materiality-table__category span {
    display: inline-block;
    margin-top: 0;
    margin-left: 8px;
  }

  main .materiality-table__category small {
    font-size: 14px;
  }

  main .materiality-table__sdgs img {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 0;
  }

  main .environment-management {
    margin-top: 90px;
    margin-bottom: 160px;
  }

  main .environment-co2 {
    margin-top: 80px;
  }

  main .environment-energy {
    margin-top: 110px;
  }

  main .environment-resource {
    margin-top: 90px;
  }

  main .environment-resource-charts {
    margin-top: 60px;
  }

  main .environment-policy {
    margin-top: 80px;
  }

  main .environment-co2__chart-panel {
    margin-top: 48px;
    padding-block: 48px;
  }

  main .topic__note {
    padding-left: 0;
    text-indent: 0;
  }

  main .topic__note-break {
    display: none;
  }

  main .environment-resource-charts__grid {
    width: 92%;
    max-width: 926px;
    margin-inline: auto;
  }

  main .capital-career,
  main .capital-workplace,
  main .capital-diversity,
  main .capital-health,
  main .capital-safety,
  main .capital-human-rights {
    margin-bottom: 160px;
  }

  main .capital-career__diagram {
    margin-top: 48px;
  }

  main .capital-image-row {
    margin-top: 48px;
  }

  main .capital-career__block {
    margin-top: 80px;
  }

  main .capital-qualification {
    gap: 40px;
    margin-top: 80px;
  }

  main .capital-declaration {
    margin-top: 80px;
  }

  main .topic__image--aside {
    width: 260px;
  }

  main .topic__row picture:has(> .topic__image--aside) {
    width: 260px;
  }

  main .topic__image--full {
    width: 100%;
  }

  main .social-education,
  main .social-community,
  main .social-culture {
    padding-bottom: 100px;
  }

  main .social-table,
  main .social-table tbody,
  main .social-table tr,
  main .social-table th,
  main .social-table td {
    display: block;
    width: 100%;
  }

  main .social-table thead {
    display: none;
  }

  main .social-table tr + tr {
    margin-top: 40px;
    border-top: 1px solid #BABABA;
  }

  main .social-table tr:has(td.social-table__category) {
    border-top: none;
  }
  main .social-table{
    letter-spacing: 0.05em;
  }

  main .social-table td {
    border: none;
    white-space: normal;
  }

  main .social-table td[data-label]:not(.social-table__category) {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #BABABA;
  }

  main .social-table td[data-label="入館者数"] {
    text-align: left;
  }

  main .social-table td[data-label]:not(.social-table__category)::before {
    content: attr(data-label);
    display: flex;
    align-items: center;
    flex: 0 0 80px;
    margin-block: -16px;
    border-right: 1px solid #BABABA;
    color: #333333;
    font-weight: 700;
  }

  main .social-table td.social-table__category {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background-color: #37D1F3;
    color: var(--color-site-white);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
  }

  main .social-table tr:first-child td.social-table__category {
    margin-top: 0;
  }

  /* PC時の白罫線に対応する、縦積みカード時の区分ブロック区切り(グレー)。
     最初の区分ブロックはtheadとの境界(非着色)にあたるため対象外 */
  main .social-table tr:not(:first-child) td.social-table__category {
    border-top: 1px solid #BABABA;
  }

  main .social-table td.social-table__category + td[data-label] {
    border-top: 1px solid #BABABA;
  }

  main .esg-intro {
    padding-block: 60px 32px;
  }

  main .esg-data {
    padding-block: 32px 100px;
  }

  main .esg-block + .esg-block {
    margin-top: 48px;
  }

  main .esg-report-banner {
    height: 320px;
  }

  main .esg-report-banner__heading {
    font-size: 26px;
  }

  main .esg-report-banner__button {
    min-width: 315px;
  }

  main .governance-compliance,
  main .governance-internal-control,
  main .governance-quality,
  main .governance-bcm,
  main .governance-infosec {
    margin-bottom: 120px;
  }

  main .governance-pillars {
    gap: 24px;
  }

  main .governance-pillars__item {
    max-width: 200px;
  }

  main .governance-chart-grid {
    gap: 24px;
  }

  main .governance-cert-list__term {
    padding-left: 0;
  }

  /* 網目パネルのタブレット以下フルブリード用 */
  main .environment-co2__chart-panel,
  main .environment-resource-charts,
  main .capital-persona-panel,
  main .capital-diagram-panel {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* CSRリンク一覧専用の上書き */
  main .csr-links .link-card__en {
    font-size: 23px;
  }
}

@media only screen and (max-width: 640px) {
  main .materiality-esg-intro {
    margin-block: 60px;
  }

  main .page-hero--csr {
    background-image: url("/csr/img/main_sp_bg.jpg");
  }

  main .link-card__image--mission::before {
    background-image: url("/csr/img/mission_bg_sp.jpg");
  }

  main .link-card__image--environment::before {
    background-image: url("/csr/img/environment_bg_sp.jpg");
  }

  main .link-card__image--human-capital::before {
    background-image: url("/csr/img/human_capital_bg_sp.jpg");
  }

  main .link-card__image--social::before {
    background-image: url("/csr/img/social_bg_sp.jpg");
  }

  main .link-card__image--governance::before {
    background-image: url("/csr/img/governance_bg_sp.jpg");
  }

  main .link-card__image--esg-data::before {
    background-image: url("/csr/img/esg_data_bg_sp.jpg");
  }

  main .csr-links .link-card:hover .link-card__image::before {
    transform: none;
  }

  main .csr-links {
    grid-template-columns: 1fr;
    gap: 60px;
    padding-bottom: 64px;
  }

  main .materiality-hero {
    background-image: url("/csr/materiality/img/main_sp_bg.jpg");
  }

  main .materiality-message {
    padding-block: 48px 40px;
  }

  main .materiality-message__lead {
    font-size: 20px;
  }

  main .materiality-message__body {
    margin-top: 28px;
  }

  main .materiality-message__sign {
    margin-top: 40px;
  }

  main .materiality-message__name {
    font-size: 18px;
  }

  main .materiality-policy {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  main .materiality-policy h3 {
    margin: 32px 0 16px;
  }

  main .materiality-esg-diagram {
    margin-block: 40px 64px;
  }

  main .materiality-table {
    padding-bottom: 64px;
  }

  main .materiality-table td[data-label]::before {
    font-size: 16px;
  }

  main .materiality-table td.materiality-table__category {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    height: 120px;
  }

  main .materiality-table__category small {
    flex-basis: 100%;
  }

  main .environment-policy {
    margin-top: 48px;
  }

  main .environment-policy .declaration-box__heading {
    font-size: 18px;
  }

  main .environment-policy__meta {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  main .environment-management {
    margin-top: 80px;
    margin-bottom: 120px;
  }

  main .environment-co2 {
    margin-top: 64px;
  }

  main .environment-co2__chart-panel {
    margin-top: 40px;
    padding-block: 40px;
  }

  main .environment-co2__scope-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  main .environment-co2__chart-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  main .environment-co2__chart-note {
    text-align: left;
  }

  main .environment-energy,
  main .environment-resource {
    flex-direction: column;
    gap: 40px;
  }

  main .environment-energy {
    margin-top: 120px;
  }

  main .environment-resource {
    margin-top: 100px;
  }

  main .environment-energy__photo,
  main .environment-resource__figure {
    max-width: none;
    width: 100%;
  }

  main .environment-resource-charts {
    margin-top: 48px;
    padding: 40px 24px;
  }

  main .environment-resource-charts__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  main .u-horizontal-scroll .topic__diagram {
    width: 640px;
    max-width: none;
  }

  main .u-horizontal-scroll .governance-diagram {
    width: 860px;
    max-width: none;
  }

  main .u-horizontal-scroll .capital-career__matrix {
    width: 940px;
    max-width: none;
  }

  main .u-horizontal-scroll .capital-career__diagram {
    width: 940px;
    max-width: none;
  }

  main .u-horizontal-scroll .common-table {
    width: 760px;
    max-width: none;
  }

  main .u-horizontal-scroll .environment-co2__chart {
    width: 720px;
    max-width: none;
  }

  main .topic__image--cover {
    width: 100%;
    max-width: none;
    height: auto;
  }

  main .topic__table {
    width: 100%;
  }

  main .topic__table th,
  main .topic__table td {
    padding: 12px 8px;
  }

  main .environment-hero {
    background-image: url("/csr/environment/img/main_sp_bg.jpg");
  }

  main .capital-hero {
    background-image: url("/csr/human_capital/img/main_sp_bg.jpg");
  }

  main .social-hero {
    background-image: url("/csr/social/img/main_sp_bg.jpg");
  }

  main .esg-hero {
    background-image: url("/csr/esg_data/img/main_sp_bg.jpg");
  }

  main .governance-hero {
    background-image: url("/csr/governance/img/main_sp_bg.jpg");
  }

  main .capital-career,
  main .capital-workplace,
  main .capital-diversity,
  main .capital-health,
  main .capital-safety,
  main .capital-human-rights {
    margin-bottom: 120px;
  }

  main .capital-career__diagram {
    margin-top: 40px;
  }

  main .capital-image-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
  }

  main .capital-image-row__image {
    max-width: 230px;
  }

  main .capital-declaration {
    margin-top: 48px;
  }

  main .capital-persona-panel {
    padding: 32px 0;
  }

  main .capital-persona-panel__image {
    width: 85%;
    max-width: 100%;
    margin-inline: auto;
  }

  main .capital-diagram-panel {
    padding: 32px 24px;
  }

  main .capital-diagram-panel__image {
    max-width: 300px;
    margin-inline: auto;
  }

  main .capital-qualification {
    flex-direction: column;
    gap: 40px;
    margin-top: 56px;
  }

  main .capital-gallery {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  main .capital-badge-list {
    grid-template-columns: 1fr;
  }

  main .capital-badge-list__item:nth-child(1) {
    order: 1;
  }

  main .capital-badge-list__item:nth-child(2) {
    order: 4;
  }

  main .capital-badge-list__item:nth-child(3) {
    order: 2;
  }

  main .capital-badge-list__item:nth-child(4) {
    order: 5;
  }

  main .capital-badge-list__item:nth-child(5) {
    order: 3;
  }

  main .capital-badge-list__item:nth-child(6) {
    order: 6;
  }

  main .topic__row .common-table {
    width: 100%;
  }

  /* 階層別研修の全体イメージ等: 「研修・教育」セルのみSPは左揃えにする */
  main .common-table td[data-label="研修・教育"] {
    text-align: left;
  }

  /* 上記テーブルの見出しセル(thead th)にはdata-labelがないため、
     このテーブル専用のcommon-table--training修飾クラスで見出しだけ左揃えに合わせる */
  main .common-table--training thead th:first-child {
    text-align: left;
  }

  main .topic__icon {
    right: 20px;
    width: 70px;
  }

  main .topic__image--aside {
    width: 100%;
  }

  main .topic__row picture:has(> .topic__image--aside) {
    width: 100%;
  }

  main .social-education,
  main .social-community,
  main .social-culture {
    padding-bottom: 64px;
  }

  main .social-table tr + tr {
    margin-top: 24px;
  }

  main .social-table td.social-table__category {
    margin-top: 50px;
  }

  main .esg-report-banner {
    height: 525px;
  }

  main .esg-report-banner__inner {
    justify-content: flex-start;
    padding-top: 15%;
  }

  main .esg-report-banner__heading {
    font-size: 20px;
    text-align: center;
  }

  main .esg-report-banner__button {
    width: 100%;
    min-width: 315px;
    padding: 15px 52px 15px 24px;
  }

  main .esg-archive {
    padding-block: 40px 64px;
  }

  main .esg-archive__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  main .esg-archive__year {
    padding-left: 0;
  }

  main .esg-archive__links {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
  }

  main .esg-archive__links .u-underline-link {
    width: 100%;
  }

  main .governance-compliance,
  main .governance-internal-control,
  main .governance-quality,
  main .governance-bcm,
  main .governance-infosec {
    
  }

  main .governance-pillars {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  main .governance-pillars__item {
    max-width: 230px;
  }

  main .governance-declaration__item-body {
    padding-left: 0;
  }

  main .governance-cert-list__row {
    padding-block: 10px;
  }

  main .governance-chart-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* スマホのみ: 先頭列を広め、年度列を狭くする */
  main .esg-data .common-table {
    font-size: 14px;
    letter-spacing: 0;
  }

  main .esg-data .common-table th:first-child,
  main .esg-data .common-table td:first-child {
    width: 33%;
    padding: 8px 10px;
  }

  main .esg-data .common-table th:not(:first-child),
  main .esg-data .common-table td:not(:first-child) {
    width: 16%;
    padding-inline: 4px;
  }

  main .esg-data .common-table small {
    font-size: 12px;
  }

  main .csr-links .link-card__en {
    font-size: 22px;
  }

  /* SP限定: 335:260の比率にする(PCは630:260) */
  main .csr-links .link-card__image {
    aspect-ratio: 335 / 260;
    min-height: 0;
  }
}

/* PC限定: 630:260の比率にする(タブレット/SPは共通のmin-height指定のまま) */
@media only screen and (min-width: 981px) {
  main .csr-links .link-card__image {
    aspect-ratio: 630 / 260;
    min-height: 0;
  }
}

/* 「一般事業主行動計画」「行動計画」テーブルのみ: 目標・対策(または取組内容・実施時期)列を
   同じ幅にする(PC・タブレット限定)。それぞれ他のテーブルにないラベルのため、
   :has()で該当テーブルのみに絞る */
@media only screen and (min-width: 641px) {
  main .common-table:has(td[data-label="対策"]) td[data-label="目標"],
  main .common-table td[data-label="対策"],
  main .common-table:has(td[data-label="取組内容・実施時期"]) td[data-label="目標"],
  main .common-table td[data-label="取組内容・実施時期"] {
    width: 46%;
  }
}

/* PCのみ: main .materiality-table__category は980px以下でカード表示用に
   padding: 32px へ上書きされるため、通常テーブル表示のPC幅に限定して適用する
   (td.を付けて詳細度を上げている都合上、max-widthの後勝ちに頼れないためmin-widthで区切る) */
@media only screen and (min-width: 981px) {
  main .materiality-table td.materiality-table__category {
    padding: 50px 20px;
  }
}

}