/**
 * Base — mainコンテンツの基本タイポグラフィ既定値。
 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap");

:root {
  --color-site-primary: #00689f;
  --color-site-black: #4e4e4e;
  --color-site-white: #ffffff;
  --color-site-border: #cbdde6;
  --color-page-hero-bg: #08acd0;
}

/* link_jpgクラス付きのページ内リンク(common.jsの独自スクロールをスキップし
   ブラウザ標準のアンカー遷移に任せるもの)をふわっと動かすため */
html {
  scroll-behavior: smooth;
}

main {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  color: var(--color-site-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

/* header.css のレイヤー無し `b, strong { font-weight: bolder }` を打ち消す。
   @layer 内だとレイヤー無しに必ず負けるため、ここ（レイヤー無し）に置く。 */
main b,
main strong {
  font-weight: inherit;
}

/* このファイル全体を@layer baseに入れている。
   Tailwindのユーティリティは@layer utilitiesに入っており、レイヤー無しの通常CSSは
   詳細度に関係なく常にどのレイヤーよりも勝ってしまうため、base.cssをレイヤー無しのままにすると
   mt-◯等のTailwindユーティリティがここに負けて効かなくなる事故が起きる。
   また、profile.css・top.css・csr.css・footer_v2.css等の各ページ固有CSSも同じ@layer base
   に入れて揃えているため、base.cssだけレイヤー無しのままだと今度はページ固有CSS側の
   上書き（例: main .common-table td[data-label="..."]のtext-align指定）がこのファイルの
   共通ルール（例: main .common-table th, td のtext-align:left）に詳細度に関係なく
   負けてしまう事故が起きる。
   base.cssは各ページで他のCSSより先に読み込まれるため、このレイヤー宣言が
   tailwind.css側の`@layer theme, utilities;`より先に評価され、base → theme → utilities の
   順（後ろほど優先）で並ぶ。同じ「base」レイヤーを共有するページ固有CSSとの間は
   通常通り詳細度・読み込み順で決まる。 */
@layer base {
  /* 下層ページ共通: #HD(固定ヘッダー)分をbodyのpadding-topで確保する。
     ヘッダーの高さはブレークポイントごとに異なる(header.cssの#HD .hd_wrpに合わせる)ため、
     980px/640pxでも値を上書きする。トップページのみ全画面ヒーローにするため
     top.cssでpadding-top:0に戻している。
     header.css側にレイヤー無しの`body{padding:0}`があり、詳細度に関係なく
     レイヤー内(このファイル)の指定に勝ってしまうため、!importantで確実に上書きする
     (header.cssは改変禁止のため、こちら側で吸収する)。 */
  body {
    padding-top: 120px !important;
  }

  /* main配下のu-horizontal-scroll(SP全幅化)がwidth:100vwで
     スクロールバー分の余剰幅を含み、main自体に横スクロールバーが
     出てしまうのを防ぐ。overflow-yには触れないことで
     .mainvisual/.profile-history__nav等のposition:stickyには影響しない
     (clipはoverflow-yをvisibleのまま維持できる、spec上の例外)。 */
  main {
    overflow-x: clip;
  }

  main p,
  main ul,
  main ol {
    margin: 0;
  }

  main p {
    line-height: 2.25;
  }

  main p,
  main a,
  main h1,
  main h2,
  main h3,
  main h4,
  main h5,
  main h6 {
    letter-spacing: 0.1em;
  }

  /* ブラウザ既定の見出しboldを打ち消し、mainのfont-weight(500)を継承させる。
     太字にしたい見出しは .section-heading 等で個別に700を指定する。 */
  main h1,
  main h2,
  main h3,
  main h4,
  main h5,
  main h6 {
    font-weight: inherit;
  }

  main ul,
  main ol {
    line-height: 1.8;
  }

  main table {
    line-height: 1.8;
  }

/* 共通コンテンツ幅。中央寄せして使う（下層ページ既定） */
main .base_width {
  width: 92%;
  max-width: 1500px;
  margin-inline: auto;
}

/* 本文など、base_widthより狭い共通コンテンツ幅 */
main .base_width_s {
  width: 92%;
  max-width: 926px;
  margin-inline: auto;
}

/* base_widthより狭く、base_width_sより広い共通コンテンツ幅 */
main .base_width_l {
  width: 92%;
  max-width: 1200px;
  margin-inline: auto;
}

/* より広い幅が必要なセクション用（下層ページ既定） */
main .base_width_xl {
  width: 95%;
  max-width: 1600px;
  margin-inline: auto;
}

/* トップページ専用コンテンツ幅 */
body.top main .base_width {
  max-width: 1140px;
}

body.top main .base_width_xl {
  max-width: 1500px;
}

/* 下層ページ共通情報テーブル */
main .info-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #cbdde6;
  font-size: 16px;
  letter-spacing: 0.1em;
}

main .info-table th,
main .info-table td {
  padding-block: 24px;
  border-bottom: 1px solid #cbdde6;
  text-align: left;
  vertical-align: top;
}

main .info-table th {
  width: 34%;
  padding-right: 25px;
  color: var(--color-site-primary);
  font-weight: inherit;
}

main .info-table td {
  color: #333333;
}

/* 下層ページ共通: 枠線付きデータテーブル（人的資本・ESGデータ等）。
   ページ固有の列幅・ハイライト・SPカード化は各ページCSSへ。 */
main .common-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  letter-spacing: 0.1em;
}

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

main .common-table thead th {
  padding-block: 16px;
  background-color: #37D1F3;
  color: var(--color-site-white);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  /* 見出しセルは全て同色のため、セル間(縦)の罫線だけ白にする。
     両端(テーブル外枠)は下のfirst-child/last-childで元のグレーに戻す。 */
  border-left-color: white;
  border-right-color: white;
}

main .common-table thead th:first-child {
  border-left-color: #bababa;
}

main .common-table thead th:last-child {
  border-right-color: #bababa;
}

/* 着色行(--highlight/--total)どうしが隣接する境界だけ白にする。
   theadの直後が着色行の場合も対象(theadも着色のため)。 */
main .common-table thead + tbody tr:first-child.common-table__row--highlight td,
main .common-table thead + tbody tr:first-child.common-table__row--total td,
main .common-table tr.common-table__row--highlight + tr.common-table__row--highlight td,
main .common-table tr.common-table__row--highlight + tr.common-table__row--total td,
main .common-table tr.common-table__row--total + tr.common-table__row--highlight td,
main .common-table tr.common-table__row--total + tr.common-table__row--total td {
  border-top-color: white;
}

/* .common-tableと併用するモディファイア: 上下paddingだけ10pxに詰める（左右はcommon-table既定のまま） */
main .common-table--sm th,
main .common-table--sm td {
  padding-block: 7px;
}

main .common-table--sm thead th {
  padding-block: 8px;
}

main .common-table__note {
  margin-top: 16px;
  padding-left: 15px;
  text-indent: -15px;
  font-size: 13px;
  line-height: 1.8;
}

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

main .common-table__row--total td {
  background-color: #F0F9FE;
  color: #00689F;
}

/* 下層ページ共通: セクション区切り罫線（<hr class="section_hr">） */
main .section_hr {
  display: block;
  width: 100%;
  height: 0;
  margin-block: 0;
  margin-inline: auto;
  border: 0;
  border-top: 1px solid var(--color-site-border);
}

/* 下層ページ共通セクション見出し（h2のみ） */
main .section-heading {
  color: var(--color-site-primary);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 下層ページ共通サブセクション見出し（h3のみ。余白はページ固有CSSへ） */
main .subsection-heading {
  color: var(--color-site-primary);
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

/* 下層ページ共通: サブセクション見出しよりさらに小さい見出し（h4想定。余白はページ固有CSSへ） */
main .minor-heading {
  color: var(--color-site-primary);
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.1em;
}

/* 下層ページ共通: グレー背景ボックス（環境方針・健康宣言・安全衛生宣言等）。
   内側のテキスト幅は箱の中に.base_width_sの入れ子（例: __inner base_width_s）で926pxにキャップする。
   margin・text-alignなどページごとに異なる余白はページ固有CSSへ。 */
main .declaration-box {
  padding: 60px 10px;
  background-color: #f5f6f7;
}

main .declaration-box__heading {
  margin: 0 0 50px;
  color: var(--color-site-primary);
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}

main .declaration-box__list {
  padding-left: 0;
  list-style: none;
  letter-spacing: 0.1em;
}

main .declaration-box__list li {
  display: flex;
  gap: 12px;
}

main .declaration-box__num {
  flex-shrink: 0;
}

/* 下層ページ共通メインビジュアル */
main .page-hero {
  height: calc(100vh - 120px);
  color: var(--color-site-white);
  background-color: var(--color-page-hero-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

main .page-hero__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

main .page-hero__heading {
  margin: 0;
}

main .page-hero__icon {
  display: block;
  width: 114px;
  height: auto;
}

main .page-hero__title {
  display: block;
  margin-top: 20px;
  font-family: "clarendon-text-pro", serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
}

main .page-hero__subtitle {
  display: block;
  margin-top: 15px;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

/* 下層ページ共通メインビジュアル（高さ低め版）。中身は.page-hero__innerなどをそのまま使う */
main .page-hero-compact {
  height: 460px;
  color: var(--color-site-white);
  background-color: var(--color-page-hero-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

main .page-hero-compact .page-hero__icon {
  width: 65px;
}

main .parallax-section {
  position: relative;
  height: 250px;
  margin-bottom: 100px;
  overflow: hidden;
  color: var(--color-site-white);
}

main .parallax-section__bg {
  display: block;
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: calc(100% + 80px);
  object-fit: cover;
  object-position: center;
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

main .parallax-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

main .parallax-section__badge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

main .parallax-section__badge::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: rgba(128, 213, 255, 0.2);
  filter: blur(20px);
  content: "";
}

main .parallax-section__icon {
  display: block;
  width: 60px;
  height: auto;
}

main .parallax-section__heading {
  margin: 5px 0 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 26px;
  font-weight: 700;
}

/* 共通: 画像＋英語見出し＋日本語見出しのリンクカード（トップページの企業情報カードと
   サステナビリティページのリンク集で共用）。グリッド配置や画像URLはページごとに異なるため
   各ページCSS側で用意し、カード自体の見た目のみここで持つ。 */
main .link-card {
  display: block;
  color: var(--color-site-primary);
  text-decoration: none;
}

main .link-card--large .link-card__en,
main .link-card--large .link-card__jp {
  padding-left: 70px;
}

main .link-card__en {
  display: block;
  font-family: "clarendon-text-pro", serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: normal;
}

main .link-card__jp {
  display: block;
  margin-top: 12px;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

main .link-card__image {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 260px;
  margin-top: 36px;
  background-color: #e0f4fc;
}

main .link-card__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* PC〜SPで画像上余白を17pxに固定する（グループ拠点・あゆみ・公表事項など） */
main .link-card__image.link-card__image--tight {
  margin-top: 17px;
}

/* 下層ページ共通: ページ内アンカーリンクのピル型タブ導線。
   間隔(margin-top等)はページごとに異なるためTailwindユーティリティで個別指定する。 */
main .anchor-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 16px;
}

main .anchor-nav__item {
  display: flex;
  flex: 0 0 calc((100% - 32px) / 3);
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 13px 20px;
  border: 1px solid #008dcc;
  border-radius: 999px;
  color: #007eb8;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

main .anchor-nav__item::after {
  position: absolute;
  top: 48%;
  right: 15px;
  width: 7px;
  height: 7px;
  border-right: 1px solid #007eb8;
  border-bottom: 1px solid #007eb8;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

/* 下層ページ共通: ページ内アンカーリンクの着地位置調整用ダミー要素。
   セクション本体ではなくこの空divにidを振り、直前に配置する。
   固定ヘッダー(#HD)の「スクロール時」の高さ分だけpadding-topを確保し、
   同値のマイナスmarginで打ち消すことでレイアウト上の余白は発生させず、
   アンカー着地時だけヘッダー分の高さが自然に空くようにする。 */
main .anchor-point {
  display: block;
  height: 0;
  /* ヘッダーの高さ(スクロール時)+50pxを着地位置の余白として確保する */
  padding-top: 100px;
  margin-top: -100px;
  visibility: hidden;
}

/* header.htmlの「グループ拠点紹介（アクセス）」等、他ページ/URL直打ちから
   #CMP_〜でこのページへ遷移してくるリンク専用。common.js側にcommon.js改変禁止のため
   打ち消せない$(window).on('load', ...)処理があり、ハッシュ付きURLでのページ読み込み時に
   対象要素のoffset().topからPC/タブレットは120px、SPは80px余分に差し引いてスクロールし直して
   しまう(a[href^='#']クリックハンドラの独自オフセットとは別の、ページロード時専用の処理)。
   同一ページ内クリック(link_jpg経由の.anchor-nav__item等)はページ再読み込みを伴わないため
   このload処理自体が発火せず影響を受けない。position:relative+topでこの要素の
   offset().topだけを先に120px(SP:80px)分押し下げておくことで、load時に差し引かれる分を
   相殺し、通常の.anchor-pointと同じ着地位置になるようにする
   (topによる移動は後続要素のレイアウトには影響しない)。 */
main .anchor-point--cmp {
  margin-top: 0;
  padding-top: 0;
}

/* 下層ページ共通: 各ページ冒頭の単独イントロセクション（リード文+anchor-nav）。
   個別クラスに併用して余白を共通化する。ページ固有の上下余白差はそのページ固有クラスへ。 */
main .section-intro {
  margin-block: 130px;
}

main .section-intro .anchor-nav {
  margin-top: 90px;
}

/* 下層ページ共通: 上記イントロセクション内の単独リード文（p）。SPのみ本文既定の15pxに合わせる。 */
main .section-intro__text {
  font-size: 18px;
}

/* スクロールで要素がふわっと上に浮き出るアニメーション。
   対象要素に .js-fade-up を付けるだけで有効化される(JSがIntersectionObserverで.is-inviewを付与)。
   100%幅のフルブリードセクション(わたしたちについて等)には使用しない。 */
main .js-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

main .js-fade-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* 下層ページ共通: TOPICSセクション（バッジ付きカードの繰り返し）。
   ページ固有の要素（表・注釈・画像バリエーション等）は各ページCSSへ。 */
main .topics {
  margin-top: 140px;
  padding-block: 100px 120px;
  background-color: #D6EBF7;
}

main .topics__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 48px;
  color: var(--color-site-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 700;
}

main .topics__heading-icon {
  display: block;
  width: 60px;
  height: auto;
  margin-bottom: 12px;
}

main .topic {
  position: relative;
  padding-block: 60px;
  background-color: rgba(255, 255, 255, 0.8);
}

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

main .topic__title {
  margin: 0 0 24px;
  color: var(--color-site-primary);
  font-size: 18px;
  line-height: 2;
}

main .topic__row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

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

main .topic__text {
  margin: 0;
}

main .topic__image {
  display: block;
  flex: 4 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
}

main .topic__badge {
  position: absolute;
  top: 25px;
  left: 25px;
  margin: 0;
  line-height: 0.5;
  color: var(--color-site-primary);
  font-family: "Montserrat", sans-serif;
}

main .topic__badge span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 500;
}

main .topic__badge strong {
  display: block;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
}

/* 下層ページ共通: 見出し＋本文＋画像の横並びブロック。
   gap 65px が正。イレギュラー（ギャラリー・図表・装飾）は要素クラスで残す。 */
main .feature {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

main .feature__body {
  flex: 1 1 auto;
  min-width: 0;
}

main .feature__photo {
  display: block;
  flex-shrink: 0;
  width: 330px;
  max-width: 330px;
  object-fit: cover;
}

main .feature__chart {
  display: block;
  flex-shrink: 0;
  width: 330px;
  max-width: 330px;
  height: auto;
}

main .feature__gallery {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  width: 330px;
}

main .feature__gallery-photo {
  display: block;
  width: 100%;
  object-fit: cover;
}

main .feature__decoration {
  display: block;
  width: 140px;
  margin: 24px 0 0 auto;
}

/* 下層ページ共通: セクション内の見出し付きブロック間隔。
   前後余白の差は呼び出し側の Tailwind 等で調整する。 */
main .content-block {
  margin-top: 100px;
}

/* SP（640px以下）でのみ改行させたい箇所に付ける<br>用ユーティリティ */
main .sp-break {
  display: none;
}

/* PC（980px超）でのみ改行させたい箇所に付ける<br>用ユーティリティ。sp-breakの逆 */
main .pc-break {
  display: inline;
}

/* 汎用: 薄い水色(#eaf4f8)の方眼柄背景。パネル状の装飾に使う（複数ページで使用）。
   線幅1px・16pxピッチの格子をbackground-imageで描画するのみで、
   width/height/paddingなどのレイアウトは呼び出し側のクラスで指定する。
   0.5px指定だとブラウザがサブピクセルを切り捨てて描画されないため、最低でも1pxにする。
   縦線・横線それぞれ別レイヤーのため、隙間はtransparentにする(不透明色にすると
   先に書いた縦線レイヤーが下の横線レイヤーを覆い隠してしまう)。呼び出し側の要素は
   白背景の上に置く前提。 */
main .u-grid-bg {
  background-image:
    linear-gradient(to right, #eaf4f8 1px, transparent 1px),
    linear-gradient(to bottom, #eaf4f8 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -8px -8px;
}

/* 汎用: 同じ要素に付けた base_width / base_width_xl の width(%指定分の余白)のみを打ち消し、
   常時100%幅にする。max-widthはbase_width/base_width_xl側の値をそのまま活かすため上書きしない。
   PC/タブレット/SP問わず全幅で有効。上のレスポンシブブロックより後に置き、base_width_xlの
   640px時の指定より確実に後勝ちさせる。
   例: class="base_width_xl u-full-bleed-md" */
main .u-full-bleed-md {
  width: 100%;
  margin-inline: auto;
}

/* 汎用: リード文（太字の小見出し的なテキスト）＋直後に置くリストのドット色。
   テーブルセル内や本文中で「太字リード＋箇条書き」を組む際に使う（複数ページで使用）。
   例: class="u-lead-text" のpタグ＋class="u-list-dot" のul */
main .u-lead-text {
  margin: 0 0 8px;
  color: #008ED8;
}

main .u-list-dot li::marker {
  color: #1A96D5;
}

/* 汎用: アウトライン角丸ボタン（右向きシェブロン付き）。PDFリンクや問い合わせ導線など、
   複数ページで使用するCTAボタン。 */
main .u-pill-button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 14px 40px;
  border: 1px solid #008dcc;
  border-radius: 999px;
  color: #007eb8;
  font-size: 15px;
  text-decoration: none;
}

main .u-pill-button::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 7px;
  height: 7px;
  border-right: 1px solid #007eb8;
  border-bottom: 1px solid #007eb8;
  content: "";
  transform: translateY(-50%) rotate(-45deg);
}

/* 汎用: 下線付きテキストリンク（右向き矢印付き）。PDFダウンロードなど。 */
main .u-underline-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 300px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-site-primary);
  color: var(--color-site-primary);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}

main .u-underline-link__icon {
  display: block;
  flex-shrink: 0;
  width: 13px;
  height: 11px;
}

/* 汎用: main要素の下端の余白(フッター直前の間隔)。ページごとに量が異なるため、
   mainにページ固有のmodifierクラスを付けて値を管理する（複数ページで使用）。
   例: class="page-main--profile-top" */
main.page-main--profile-top {
  margin-bottom: 160px;
}

main.page-main--disclosure {
  margin-bottom: 220px;
}

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

/* TOPICSバッジと見出しの重なり回避（1200px以下〜タブレット超） */
@media only screen and (max-width: 1200px) and (min-width: 981px) {
  main .topic {
    padding-block: 80px 60px;
  }
}

@media only screen and (max-width: 980px) {
  body {
    padding-top: 100px !important;
  }

  main .page-hero-compact {
    height: 460px;
  }

  main .pc-break {
    display: none;
  }

  main .anchor-nav__item {
    flex: 0 0 calc((100% - 16px) / 2);
  }

  main .declaration-box {
    padding: 48px 24px;
  }

  main .topics {
    margin-top: 100px;
    padding-block: 80px 100px;
  }

  main .topic {
    padding-block: 48px;
  }

  main .topic__badge {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
  }

  main .topic__badge strong {
    font-size: 32px;
  }

  main .topic__title {
    text-align: center;
  }

  main .topic__row {
    gap: 32px;
  }

  main .feature {
    gap: 32px;
  }

  main .feature__photo {
    width: 260px;
    max-width: 260px;
  }

  main .feature__chart {
    width: 260px;
    max-width: 260px;
  }

  main .feature__gallery {
    width: 260px;
  }

  main .content-block {
    margin-top: 80px;
  }

  main .page-hero {
    height: calc(100vh - 100px);
  }

  main .page-hero__title {
    font-size: 40px;
  }

  main .section-heading {
    font-size: 26px;
  }

  main .anchor-point {
    padding-top: 115px;
    margin-top: -115px;
  }

  main .link-card--large .link-card__en,
  main .link-card--large .link-card__jp {
    padding-left: 4%;
  }

  /* グループ拠点・あゆみ沿革・公表事項も大きいカードと同様に4%分インセットする */
  main .link-card__jp {
    padding-left: 4%;
  }

  main .link-card__image {
    min-height: 220px;
    margin-top: 26px;
  }

  main .parallax-section {
    height: 200px;
    margin-bottom: 80px;
  }

  main.page-main--profile-top {
    margin-bottom: 120px;
  }

  main.page-main--disclosure {
    margin-bottom: 165px;
  }

  main .section-intro {
    margin-block: 100px 110px;
  }

  main .section-intro .anchor-nav {
    margin-top: 70px;
  }
}

@media only screen and (max-width: 640px) {
  main p {
    line-height: 2.13;
  }

  main ul,
  main ol {
    line-height: 1.6;
  }

  body {
    padding-top: 46px !important;
  }

  main .declaration-box {
    padding: 40px 0;
  }

  main .declaration-box__heading {
    margin: 0 0 30px;
  }

  main .declaration-box__list {
    letter-spacing: 0.05em;
  }

  main .topics {
    margin-top: 60px;
    padding-block: 55px 80px;
  }

  main .topics__heading {
    margin-bottom: 35px;
    font-size: 20px;
  }

  main .topics__heading-icon {
    width: 48px;
  }

  main .topic {
    padding-block: 40px;
  }

  main .topic__badge strong {
    font-size: 24px;
  }

  main .topic__row {
    flex-direction: column;
    gap: 24px;
  }

  main .topic__body {
    width: 100%;
  }

  main .topic__image {
    width: 100%;
  }

  main .feature {
    flex-direction: column;
    gap: 40px;
  }

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

  main .feature__chart {
    width: 100%;
    max-width: none;
  }

  main .feature__gallery {
    flex-direction: column;
    width: 100%;
  }

  main .feature__decoration {
    display: none;
  }

  main .content-block {
    margin-top: 100px;
  }

  main .page-hero {
    height: 630px;
  }

  /* 基本フォントサイズ: PC 16px / スマホ 15px */
  main {
    font-size: 15px;
  }

  main .base_width,
  main .base_width_s,
  main .base_width_l {
    width: 85%;
    max-width: 100%;
  }

  /* TOPICSセクション(.topics__inner base_width)のみSPは90%幅にする */
  main .topics .base_width {
    width: 90%;
  }

  /* declaration-box(環境方針・健康宣言等)自体をSPは90%幅にする(親基準)。
     environment/index.htmlの環境方針のようにdeclaration-boxとbase_widthが同一要素に
     併記されているケースがあるため、詳細度が同じmain .base_widthより後ろに置いて確実に勝たせる。 */
  main .declaration-box {
    width: 90%;
    margin-left: 5%;
  }

  main .base_width_xl {
    width: 90%;
    max-width: 100%;
  }

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

  main .info-table tr {
    padding-block: 20px;
    border-bottom: 1px solid #cbdde6;
  }

  main .info-table th,
  main .info-table td {
    padding: 0;
    border-bottom: 0;
  }

  main .info-table td {
    margin-top: 8px;
  }

  main .common-table th,
  main .common-table td {
    padding: 8px;
  }

  main .common-table thead th {
    padding-block: 8px;
  }

  main .u-full-bleed-sm {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  main .anchor-point {
    padding-top: 96px;
    margin-top: -96px;
  }

  main .anchor-point--cmp {
    top: 50px;
  }

  main .link-card--large .link-card__en,
  main .link-card--large .link-card__jp {
    padding-left: 15px;
  }

  /* グループ拠点・あゆみ沿革・公表事項も大きいカードと同様に4%分インセットする */
  main .link-card__jp {
    padding-left: 4%;
  }

  main .link-card__image {
    min-height: 220px;
    margin-top: 17px;
  }

  main .page-hero-compact {
    height: 500px;
  }

  main .page-hero-compact .page-hero__inner {
    align-items: flex-end;
  }

  main .page-hero-compact .page-hero__icon {
    width: 73px;
  }

  main .parallax-section {
    height: 250px;
    margin-bottom: 60px;
  }

  main .parallax-section__icon {
    width: 48px;
  }

  main .parallax-section__heading {
    font-size: 20px;
  }

  main .anchor-nav {
    flex-direction: column;
    width: 100%;
    margin-inline: 0;
  }

  main .anchor-nav__item {
    flex-basis: 100%;
    padding: 15px 20px;
  }

  main .sp-break {
    display: inline;
  }

  main .page-hero__heading {
    transform: translateY(-50px);
  }

  main .page-hero__icon {
    width: 80px;
  }

  main .page-hero__title {
    margin-top: 15px;
    font-size: 32px;
    line-height: 1.4;
  }

  main .page-hero__subtitle {
    margin-top: 0;
    font-size: 18px;
  }

  main .section-heading {
    font-size: 22px
  }

  main .subsection-heading {
    font-size: 20px;
  }

  /* 汎用: 横幅に収まらないコンテンツ(図表・チャート等)をSPで横スクロールさせる。
     子要素側で幅(width)をビューポートより広い値に固定し、はみ出させることで
     このラッパーがスクロール可能になる。/profile/ で使用しているものと同じ仕組み。 */
  main .u-horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }

  main .u-horizontal-scroll::-webkit-scrollbar {
    height: 6px;
  }

  main .u-horizontal-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
  }

  main .u-horizontal-scroll::-webkit-scrollbar-thumb {
    background-color: #0098cc;
    border-radius: 999px;
  }

  /* 既定: SPは親コンテナ(base_width_s等)の幅を突き破りビューポート全幅(edge-to-edge)にする。
     .topic(TOPICSカード)にネストされている場合や、要素自身にbase_width系クラスが
     併記されている場合(自前で幅管理済みのため)は直後のルールで打ち消し、
     コンテナ内に収まる現状表示を維持する。.u-grid-bg(方眼パネル)は対象外
     (網掛け背景パネルはグラフ・図表ごと画面幅いっぱいにしたいため、ここでは除外しない)。
     transformではなくcalc()によるmargin-leftブレイクアウトを使う。.js-fade-up等
     transformを使うクラスと併用された場合、同じtransformプロパティが後勝ちで
     丸ごと上書きされ消えてしまう事故を避けるため(.declaration-boxで実際に発生した)。 */
  main .u-horizontal-scroll {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-inline: 15px;
  }

  main .topic .u-horizontal-scroll,
  main .u-horizontal-scroll.base_width,
  main .u-horizontal-scroll.base_width_s,
  main .u-horizontal-scroll.base_width_l,
  main .u-horizontal-scroll.base_width_xl {
    width: 100%;
    margin-left: 0;
    padding-inline: 0;
  }

  main .u-pill-button {
    padding: 14px 30px;
  }

  main.page-main--profile-top {
    margin-bottom: 80px;
  }

  main.page-main--disclosure {
    margin-bottom: 110px;
  }

  main .section-intro {
    margin-block: 70px 80px;
  }

  main .section-intro .anchor-nav {
    margin-top: 45px;
  }

  main .section-intro__text {
    font-size: 15px;
  }
}

}