@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Roboto:wght@500;700&display=swap");
.m-pagehead-nav {
  border-image-source: linear-gradient(#fafafa, #fafafa);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw 0 100vw; }

.m-section {
  padding-top: unset; }

.materiality {
  padding-block: 55px;
  border-image-source: linear-gradient(#fafafa, #fafafa);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw 0 100vw; }
  @media screen and (max-width: 640px) {
    .materiality {
      padding-block: 50px; } }
  .materiality .m-title-borderleft {
    margin-top: unset; }

.relation {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: 30px; }
  @media screen and (max-width: 640px) {
    .relation {
      flex-direction: column;
      gap: 15px;
      padding-top: 20px; } }
  .relation-item {
    flex: 1;
    text-align: center;
    font-weight: bold;
    border: 2px solid #c2c4cc;
    border-top: 7px solid #000;
    background-color: #fff;
    padding: 20px 10px; }
    @media screen and (max-width: 640px) {
      .relation-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        text-align: left;
        border-width: 1px;
        border-left-width: 7px !important; } }
    @media screen and (max-width: 640px) {
      .relation-item img {
        width: 43px; } }
    .relation-item__title {
      font-size: 20px;
      font-size: calc($size / 16)rem;
      letter-spacing: 0.06em;
      padding-top: 10px; }
      @media screen and (max-width: 640px) {
        .relation-item__title {
          width: 3.5em;
          font-size: 17px;
          font-size: calc($size / 16)rem;
          padding-top: unset; } }
    .relation-item__text {
      font-size: 14px;
      font-size: calc($size / 16)rem;
      letter-spacing: 0.06em;
      line-height: calc($lin / $fontsize); }
      @media screen and (max-width: 640px) {
        .relation-item__text {
          flex: 1; } }
    .relation-item:nth-of-type(1) {
      border-top-color: #31a85c; }
      @media screen and (max-width: 640px) {
        .relation-item:nth-of-type(1) {
          border-top-color: #c2c4cc;
          border-left-color: #31a85c; } }
      .relation-item:nth-of-type(1) .relation-item__title {
        color: #31a85c; }
    .relation-item:nth-of-type(2) {
      border-top-color: #008cd6; }
      @media screen and (max-width: 640px) {
        .relation-item:nth-of-type(2) {
          border-top-color: #c2c4cc;
          border-left-color: #008cd6; } }
      .relation-item:nth-of-type(2) .relation-item__title {
        color: #008cd6; }
    .relation-item:nth-of-type(3) {
      border-top-color: #9c6fde; }
      @media screen and (max-width: 640px) {
        .relation-item:nth-of-type(3) {
          border-top-color: #c2c4cc;
          border-left-color: #9c6fde; } }
      .relation-item:nth-of-type(3) .relation-item__title {
        color: #9c6fde; }
    .relation-item:nth-of-type(4) {
      padding: 0;
      background-color: rgba(230, 152, 60, 0.1);
      border-color: #e6983c; }
      @media screen and (max-width: 640px) {
        .relation-item:nth-of-type(4) {
          border-width: 2px; } }
      .relation-item:nth-of-type(4) a {
        width: 215px;
        display: block;
        padding: 20px 10px; }
        @media screen and (max-width: 640px) {
          .relation-item:nth-of-type(4) a {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 20px 10px;
            gap: 15px; } }
        .relation-item:nth-of-type(4) a:hover {
          text-decoration: none; }
          .relation-item:nth-of-type(4) a:hover img {
            opacity: 1; }
        .relation-item:nth-of-type(4) a .relation-item__title {
          color: #e6983c; }
    .relation-item:nth-of-type(5) {
      border-top-color: #e68abc; }
      @media screen and (max-width: 640px) {
        .relation-item:nth-of-type(5) {
          border-top-color: #c2c4cc;
          border-left-color: #e68abc; } }
      .relation-item:nth-of-type(5) .relation-item__title {
        color: #e68abc; }

.label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  color: #fff;
  font-size: 11px;
  font-size: calc($size / 16)rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  background-color: #01709a;
  padding: 2px 5px 0; }

.figure-center-box {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%); }
  .figure-center-box .m-list-attention {
    text-align: left; }

/***********************
ダイバーシティ＆インクルージョン
***********************/
/***********************
働きやすさ・働きがい向上
***********************/
#csr_social_work-environment .ikukyu-table td {
  text-align: center; }

/***********************
安全衛生・健康経営
***********************/
/***********************
人材育成
***********************/
#csr_social_human-resource .m-pagehead-nav {
  border-image-source: linear-gradient(#fff, #fff); }
@media screen and (max-width: 640px) {
  #csr_social_human-resource #sec01 .m-column--col2-item .spMt20 {
    margin-top: 20px; } }