@charset "UTF-8";
/* メインビジュアル　キャッチ共通
--------------------------------------- */
/* なし */


/* 色反転パターン
--------------------------------------- */
/* なし */


/* 特定のhoverアニメーション処理
--------------------------------------- */
/* なし */


/* フィルター
--------------------------------------- */
.of--cmj-corporate-csr .mod-pnl.of--flip .flip-filter-block {
  padding-bottom: 47.5%;
}


/* メインビジュアル
--------------------------------------- */
.of--cmj-corporate-csr .mod--mv-block .mv--inner.pic-main {
  background-image: url(../Website/corporate/csr/images/img-top-001-sp.jpg);
  min-height: 480px;
  padding-bottom: 150%;
}

.of--cmj-corporate-csr .mv--heading .img[src$=".svg"] {
  width: auto;
}

.of--cmj-corporate-csr .mv--heading .img[src$=".svg"]:hover {
  transform: none;
}

.of--cmj-corporate-csr .mv--inner.pic-main .mv--heading .img {
  width: 100%;
}

@media screen and (min-width: 768px),
print {
  .of--cmj-corporate-csr .mod--mv-block .mv--inner.pic-main {
    background-image: url(../Website/corporate/csr/images/img-top-001.jpg);
    background-position: bottom;
    padding-bottom: calc(36.716rem + (144 - 10) * ((100vw - 48rem) / (1440 - 300)));
  }
  .of--cmj-corporate-csr .mv--inner.pic-main .mv--heading .img {
    height: calc(480px - 120px);
    width: auto;
  }
  .of--cmj-corporate-csr .mv--inner.pic-main .mv--heading {
    font-size: 3.2rem;
  }

  .of--cmj-corporate-csr .mv--inner.pic-main .mv--sub-description {
    font-size: 1.6rem;
  }
}



/* キャッチ
--------------------------------------- */
.of--cmj-corporate-csr .mod--catch-block .catch--img-block.pic-01 {
  background-image: url(../images/static/catch_cmj_corporate_csr_01_sp.jpg);
}

.of--cmj-corporate-csr .mod--catch-block .catch--img-block.pic-02 {
  background-image: url(../images/static/catch_cmj_corporate_csr_02_sp.jpg);
}

@media screen and (min-width: 768px),
print {
  .of--cmj-corporate-csr .mod--catch-block .catch--img-block.pic-01 {
    background-image: url(../images/static/catch_cmj_corporate_csr_01.jpg);
  }

  .of--cmj-corporate-csr .mod--catch-block .catch--img-block.pic-02 {
    background-image: url(../images/static/catch_cmj_corporate_csr_02.jpg);
  }
}


/* グローバルナビゲーション（SPのみ）
--------------------------------------- */
/* なし */


/* ボックスデザイン
--------------------------------------- */
.of--cmj-corporate-csr .mod-box-02.var-02 .mod-hdg-al4 {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0;
}

.of--cmj-corporate-csr .mod-box-02.var-02 .mod-link-list.of-horizontal-wide {
  margin-top: 20px;
}

.of--cmj-corporate-csr .mod-box-02.var-02+.mod-txt {
  margin-bottom: 30px;
}

.mod-link-list.of-horizontal-wide {
  margin-bottom: 0;
}

.mod-link-list.of-horizontal-wide[data-col=auto]>.inner {
  flex-basis: auto;
  width: auto;
  min-width: 0;
  max-width: none
}

.mod-link-list.of-horizontal-wide[data-col="1"]>.inner {
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%
}

.mod-link-list.of-horizontal-wide[data-col="2"]>.inner {
  flex-basis: 50%;
  min-width: 50%;
  max-width: 50%
}

.mod-link-list.of-horizontal-wide[data-col="3"]>.inner {
  flex-basis: 33.33333%;
  min-width: 33.33333%;
  max-width: 33.33333%
}

.mod-link-list.of-horizontal-wide[data-col="4"]>.inner {
  flex-basis: 25%;
  min-width: 25%;
  max-width: 25%
}

.mod-link-list.of-horizontal-wide[data-col="5"]>.inner {
  flex-basis: 20%;
  min-width: 20%;
  max-width: 20%
}

.mod-link-list.of-horizontal-wide[data-col="6"]>.inner {
  flex-basis: 16.66667%;
  min-width: 16.66667%;
  max-width: 16.66667%
}

@media screen and (min-width: 768px),
print {
  .of--cmj-corporate-csr .mod-box-02.var-02 .mod-hdg-al4 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .of--cmj-corporate-csr .mod-box-02.var-02+.mod-txt {
    margin-bottom: 0;
    margin-top: 40px;
  }

  .mod-link-list.of-horizontal-wide .list {
    margin-left: -20px;
  }

  .mod-link-list.of-horizontal-wide .list li::before {
    left: 10px;
  }

  .mod-link-list.of-horizontal-wide .list li {
    padding-left: 20px;
  }

  .mod-link-list.of-horizontal-wide[data-col-wide="auto"] .list li {
    flex-basis: auto;
    width: auto;
    min-width: 0;
    max-width: none
  }

  .mod-link-list.of-horizontal-wide[data-col-wide="1"] .list li {
    flex-basis: 100%;
    min-width: 100%;
    max-width: 100%
  }

  .mod-link-list.of-horizontal-wide[data-col-wide="2"] .list li {
    flex-basis: 50%;
    min-width: 50%;
    max-width: 50%
  }

  .mod-link-list.of-horizontal-wide[data-col-wide="3"] .list li {
    flex-basis: 33.33333%;
    min-width: 33.33333%;
    max-width: 33.33333%
  }

  .mod-link-list.of-horizontal-wide[data-col-wide="4"] .list li {
    flex-basis: 25%;
    min-width: 25%;
    max-width: 25%
  }

  .mod-link-list.of-horizontal-wide[data-col-wide="5"] .list li {
    flex-basis: 20%;
    min-width: 20%;
    max-width: 20%
  }

  .mod-link-list.of-horizontal-wide[data-col-wide="6"] .list li {
    flex-basis: 16.66667%;
    min-width: 16.66667%;
    max-width: 16.66667%
  }
}


/* パネルデザイン / IR情報　株価情報・注目ページTOP5
--------------------------------------- */

.stock-prices::before,
.featured-page::before {
  content: "";
  display: block;
  width: 100%;
  background-color: #ccc;
  height: 1px;
}

.stock-prices>.inner {
  background-color: #F4F4F4;
  border: 1px solid #ccc;
  padding: 20px ;
}

.stock-prices .of--market {
  text-align: center;
}

.stock-prices .of--market .market-name {
  font-size: 1.8rem;
}

.stock-prices .of--market .market-price {
  margin-top: 10px;
}

.stock-prices .of--market .market-tdb {
  margin-top: 10px;
}

.stock-prices .of--market .market-price .title::after,
.stock-prices .of--market .market-tdb .title::after {
  content: "";
  display: block;
  width: 100%;
  background-color: #ccc;
  height: 1px;
  margin: 10px 0;
}

.stock-prices .of--market .market-price .value {
  font-size: 1.8rem;
}

.stock-prices .of--market .market-price .value {
  font-weight: 700;
  font-size: 2.4rem;
}

.featured-page .list.of--number {
  counter-reset: number;
  font-size: 1.8rem;
}

.featured-page .list.of--number li::before {
  content: counter(number)".";
  counter-increment: number;
  display: block;
  margin-right: 10px;
}

.featured-page .list.of--number li::after {
  content: "";
  display: block;
  width: 100%;
  background-color: #ccc;
  height: 1px;
  margin: 12px 0;
}

.featured-page .list.of--number li:last-child::after {
  content: none;
}

.featured-page .mod-list-notice {
  margin-top: 20px;
  position: relative;
}

.featured-page .mod-list-notice .list,
.featured-page .mod-list-notice .list .content {
  width: auto;
}

.featured-page .mod-list-notice .list {
  margin: auto;
}

.mod-pnl.var-03 {
  margin-bottom: 0;
  margin-top: 40px;
}

.mod-pnl.var-03+* {
  margin-top: 0;
}

.mod-pnl.var-03[data-col=auto]>.inner {
  flex-basis: auto;
  width: auto;
  min-width: 0;
  max-width: none
}

.mod-pnl.var-03[data-col="1"]>.inner {
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%
}

.mod-pnl.var-03[data-col="2"]>.inner {
  flex-basis: 50%;
  min-width: 50%;
  max-width: 50%
}

.mod-pnl.var-03[data-col="3"]>.inner {
  flex-basis: 33.33333%;
  min-width: 33.33333%;
  max-width: 33.33333%
}

.mod-pnl.var-03[data-col="4"]>.inner {
  flex-basis: 25%;
  min-width: 25%;
  max-width: 25%
}

.mod-pnl.var-03[data-col="5"]>.inner {
  flex-basis: 20%;
  min-width: 20%;
  max-width: 20%
}

.mod-pnl.var-03[data-col="6"]>.inner {
  flex-basis: 16.66667%;
  min-width: 16.66667%;
  max-width: 16.66667%
}

.mod-pnl .pnl+.mod-link-list {
  margin-top: 14px;
}

.mod-pnl .pnl+.mod-link-list::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #E1E1E1;
  margin-bottom: 14px;
}

.mod-pnl .mod-link-list>.list>li>a::before {
  margin-top: 0;
  top: 3px;
}

.mod-pnl .mod-link-list>.list>li>a::after {
  margin-top: 0;
  top: 8px;
}

@media screen and (max-width: 767px),
print {
  .mod-pnl>.list>li .pnl+.mod-link-list,
  .mod-pnl>.list>li .pnl+.mod-link-list>.list>li {
    padding-left: 0;
  }
}

@media screen and (min-width: 768px),
print {
  .stock-prices .of--market+.mod-btn {
    margin-top: 40px;
  }

  .featured-page {
    padding-left: 40px;
  }
  .featured-page .list.of--number {
    line-height: 2;
  }

  .featured-page .list.of--number li::before {
    display: inline-block;
    margin-right: 60px;
  }

  .featured-page .mod-list-notice {
    margin-top: 40px;
  }

  .mod-pnl.var-03 {
    display: flex;
  }

  .mod-pnl.var-03[data-col-wide=auto]>.inner {
    flex-basis: auto;
    width: auto;
    min-width: 0;
    max-width: none
  }

  .mod-pnl.var-03[data-col-wide="1"]>.inner {
    flex-basis: 100%;
    min-width: 100%;
    max-width: 100%
  }

  .mod-pnl.var-03[data-col-wide="2"]>.inner {
    flex-basis: 50%;
    min-width: 50%;
    max-width: 50%
  }

  .mod-pnl.var-03[data-col-wide="3"]>.inner {
    flex-basis: 33.33333%;
    min-width: 33.33333%;
    max-width: 33.33333%
  }

  .mod-pnl.var-03[data-col-wide="4"]>.inner {
    flex-basis: 25%;
    min-width: 25%;
    max-width: 25%
  }

  .mod-pnl.var-03[data-col-wide="5"]>.inner {
    flex-basis: 20%;
    min-width: 20%;
    max-width: 20%
  }

  .mod-pnl.var-03[data-col-wide="6"]>.inner {
    flex-basis: 16.66667%;
    min-width: 16.66667%;
    max-width: 16.66667%
  }

  .mod-pnl>.list>li .pnl+.mod-link-list>.list>li>a {
    padding-left: 24px;
  }

  .mod-pnl .pnl+.mod-link-list {
    margin-top: 20px;
  }

  .mod-pnl .pnl+.mod-link-list::before {
    margin-bottom: 20px;
  }

  .mod-pnl .mod-link-list>.list>li>a::before {
    top: 7px;
  }

  .mod-pnl .mod-link-list>.list>li>a::after {
    top: 13px;
  }
}