@charset "UTF-8";

/* ==========================================================================
 * サステナビリティ
 * /company/sustainability.html
 *
 * /ir/sustainability.html からの移設ページ。
 * company-lower.css（会社情報下層の共通バンドル）の「後」に読み込む追加スタイル。
 * company-lower.css 側は一切変更せず、このファイルだけで完結させる。
 *
 * ＊ company-lower.css は 2026/9/18 時点で profile.css と同一内容。
 *   （それまでの company-lower.css は .sp-header / SP サイドナビモーダル等を
 *    欠いた未使用の旧ビルドだったため、profile.css の内容で置き換えた）
 *   以下のコメント中の「profile.css」は、この共通バンドルを指す。
 *
 * 値はすべて ir.css からの移植（minify を解いた状態）。
 * ir.css の `.ir-sustainability` スコープは `.sustainability-content` に
 * リネームしている（KV 側の `.c-sp-kv-wrap.sustainability` /
 * `.c-service-mv.sustainability` は ir.css と同じ命名のまま）。
 *
 * ── ir.css にあるがこのファイルに載せていないもの ────────────────
 *  .content_leading / .content_leading-s / .area.area-01（SP の padding）/
 *  .column-content-body / .column-content-list / .column-content_heading /
 *  .column-content-lead-wrap（PC）/ .column-content-heading_wrap（PC）/
 *  .c-heading / .c-heading.en / table・td・th のリセット
 *      … company-lower.css に完全同値の定義があり、そのまま効くため。
 *  #ir-sustainability .content-body_text-wrap（角丸 2rem・top -1.6rem）
 *      … ir.css は基底で角丸を打ち消したうえでこの指定で戻している。
 *        company-lower.css は打ち消していないので不要。
 *  #ir-sustainability .c-service-mv__desc { display: none }（SP）
 *  #ir-sustainability .c-service-mv__texts { bottom: 3.5rem }（SP）
 *      … company-lower.css では全ページ共通の既定値になっているため不要。
 *  .ir-sustainability .content_note-wrap .note01
 *      … このページでは note02 しか使っていないため。
 * ========================================================================== */

/* ==========================================================================
 * 1. メインビジュアル
 *    ir.css の .c-sp-kv-wrap.sustainability / .c-service-mv.sustainability:after 相当。
 *
 *    profile.css は `.c-sp-kv-wrap.<ページ名>` を列挙して PC で背景画像を
 *    打ち消しているが、その一覧に .sustainability は含まれないため
 *    PC 用の打ち消しもここで併せて指定する。
 *
 *    画像は /ir/ 配下から /assets/img/company/sustainability/ へコピー済み。
 *    IR 閉鎖時に /assets/img/ir/sustainability/ を削除しても影響しない。
 * ========================================================================== */
.c-sp-kv-wrap.sustainability {
  background-image: url(../img/company/sustainability/mv_sp.jpg);
}

@media screen and (min-width: 992px) {
  .c-sp-kv-wrap.sustainability {
    background-image: none;
  }

  .c-service-mv.sustainability:after {
    background-image: url(../img/company/sustainability/mv.jpg);
  }
}

/* ==========================================================================
 * 2. 本文まわりの余白
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 2-1. 本文ブロックの天地
 *      profile.css は `.kv-none` のページにしか .content-body_text-wrap の
 *      padding-top（9.4rem）を与えていない。このページは KV ありなので
 *      ir.css と同じくラッパーの margin-top で確保する。
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .sustainability-content {
    margin-top: 9.4rem;
  }

  .sustainability-content .area.area-01 {
    margin-top: -0.6rem;
  }

  /* profile.css は .column-content-body の margin-top を 9.5rem → 0 と
     二段階で上書きしている。会社概要のようにリード文の下に .page-nav があり
     そちらの margin-bottom（10.2rem）で間隔が取れるページ向けの 0 なので、
     .page-nav を持たないこのページでは 9.5rem（ir.css と同値）に戻す。 */
  .sustainability-content .column-content-body {
    margin-top: 9.5rem;
  }
}

/* --------------------------------------------------------------------------
 * 2-2. 冒頭リード文
 *      会社情報テンプレートと最も差が出る箇所。profile.css は
 *        ・`.area.area-01 .content_leading` を 1.3rem まで落とし
 *        ・PC（992px 以上）では `.area .content_leading` を display: none
 *      にしている。会社概要などはこのリード文が KV の `.c-service-mv__desc`
 *      と同じ一文で、PC では KV 側に出るため本文側を消す作りになっているため。
 *
 *      このページの KV 文（「データ活用の促進を通じて〜」）と本文リード
 *      （「ブレインパッドは、2004年の創業当時から〜」3 段落）は別内容なので、
 *      PC でも本文リードを表示し、サイズも ir.css の汎用 .content_leading
 *      の値に戻す。
 * -------------------------------------------------------------------------- */
.sustainability-content .area.area-01 .content_leading {
  font-size: 1.4rem;
  line-height: 1.7857142857;
}

@media screen and (min-width: 992px) {
  .sustainability-content .area .content_leading {
    display: block;
  }

  .sustainability-content .area.area-01 .content_leading {
    line-height: 1.8571428571;
  }
}

/* --------------------------------------------------------------------------
 * 2-3. 中見出し／リード文ブロック
 *      SP の値は profile.css に無いので ir.css から移植。
 *      PC の値は profile.css と同値だが、SP 側をこのスコープ（詳細度 0,2,0）で
 *      書くと profile.css の素のクラス（0,1,0）より強くなり PC まで
 *      引きずってしまうため、PC も同スコープで明示しておく。
 * -------------------------------------------------------------------------- */
.sustainability-content .column-content-heading_wrap {
  margin-bottom: 2rem;
  margin-top: 3.75rem;
}

.sustainability-content .column-content-lead-wrap {
  margin-bottom: 2.5rem;
  margin-top: 1.75rem;
}

@media screen and (min-width: 992px) {
  .sustainability-content .column-content-heading_wrap {
    margin-bottom: 2.8rem;
    margin-top: 4.8rem;
  }

  .sustainability-content .column-content-lead-wrap {
    margin-bottom: 4.6rem;
    margin-top: 3.3rem;
    padding-left: 0.5rem;
  }
}

/* ==========================================================================
 * 3. 追加コンポーネント
 *    profile.css に存在しないパーツ。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 3-1. 更新日
 *      ir.css の .ir-sustainability .content_update 相当。
 *      .column-content-list（position: relative）に対する絶対配置で
 *      見出しの右肩に置く。
 *
 *      SP の top だけ ir.css の 3.45rem → 4.15rem に変えている。
 *      ir.css の .column-content-list は SP の padding-top が 2.8rem、
 *      profile.css は 3.5rem（+0.7rem）で、見出しの開始位置がその分下がるため。
 *      PC はどちらも padding-top 4rem なので ir.css の値のまま。
 * -------------------------------------------------------------------------- */
.sustainability-content .content_update {
  position: absolute;
  right: 4%;
  top: 4.15rem;
  font-size: 1.1rem;
}

@media screen and (min-width: 992px) {
  .sustainability-content .content_update {
    right: 0;
    top: 5.15rem;
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
 * 3-2. 注記（※付きテキスト）
 *      ir.css の .ir-sustainability .content_note-wrap / .note02 相当。
 *      note02 は「※１　」のように全角スペースを含む行頭なので
 *      ぶら下げ幅を 2.75em にしている。
 * -------------------------------------------------------------------------- */
.sustainability-content .content_note-wrap {
  margin-top: 1.5rem;
}

.sustainability-content .content_note-wrap .note02 {
  margin-left: 2.75em;
  text-indent: -2.75em;
}

@media screen and (max-width: 991px) {
  .sustainability-content .content_note-wrap .note02 + .note02 {
    margin-top: 1rem;
  }
}

@media screen and (min-width: 992px) {
  .sustainability-content .content_note-wrap {
    margin-top: 2rem;
  }
}

/* --------------------------------------------------------------------------
 * 3-3. 横スクロールテーブル（.scroll-white / .table-wrap-v2 / *-v2）
 *      ir.css の .ir-sustainability 配下のテーブル一式。
 *      profile.css の .table-wrap / .th / .td（定義リスト型の 2 カラム表）とは
 *      別物なので、クラス名も ir.css の `-v2` のまま持ってきている。
 *
 *      SP（〜767px）は .scroll-white を画面右端まで伸ばして（margin-right の
 *      ネガティブ計算）テーブルを 63rem 固定幅で横スクロールさせ、
 *      右端に白のグラデーションを重ねてスクロール可能なことを示す。
 *      768px 以上はテーブルが収まるので、はみ出しもグラデーションも解除する。
 * -------------------------------------------------------------------------- */
.sustainability-content table,
.sustainability-content td,
.sustainability-content th {
  border: 1px solid #e5e3e3;
}

.sustainability-content .scroll-white {
  position: relative;
  margin-top: 2.5rem;
  margin-right: calc(50% - 50vw);
}

.sustainability-content .scroll-white:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4.5rem;
  height: 26rem;
  background: #fff;
  background: linear-gradient(270deg, #fff 30%, hsla(0, 0%, 100%, 0));
}

.sustainability-content .table-wrap-v2 {
  overflow: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
}

.sustainability-content .table-wrap-v2::-webkit-scrollbar {
  display: none;
}

.sustainability-content .table {
  width: 63rem;
}

.sustainability-content .th-v2 {
  background-color: #f7f5f5;
  vertical-align: middle;
}

.sustainability-content .td-v2,
.sustainability-content .th-v2 {
  padding: 0.8rem 1rem;
  font-size: 1.1rem;
}

.sustainability-content .tr-v2:nth-of-type(n + 2) .td-v2,
.sustainability-content .tr-v2:nth-of-type(n + 2) .th-v2 {
  line-height: 1.3636363636;
}

@media screen and (min-width: 768px) {
  .sustainability-content .scroll-white {
    margin-right: 0;
  }

  .sustainability-content .scroll-white:before {
    content: none;
  }

  .sustainability-content .table {
    width: 100%;
  }
}

@media screen and (min-width: 992px) {
  .sustainability-content .scroll-white {
    margin-top: 2.8rem;
  }

  .sustainability-content .td-v2,
  .sustainability-content .th-v2 {
    padding: 2.2rem;
    font-size: 1.4rem;
  }

  .sustainability-content .tr-v2:nth-of-type(n + 2) .td-v2:nth-of-type(2),
  .sustainability-content .tr-v2:nth-of-type(n + 2) .td-v2:nth-of-type(3) {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    line-height: 1.5714285714;
  }
}