@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Roboto:wght@500;700&display=swap");
.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;
        border-color: #c2c4cc; } }
    @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) {
      background-color: rgba(156, 111, 222, 0.1);
      border-color: #9c6fde; }
      @media screen and (max-width: 640px) {
        .relation-item:nth-of-type(3) {
          border-left-color: #9c6fde !important;
          border-width: 2px; } }
      .relation-item:nth-of-type(3) .relation-item__title {
        color: #9c6fde; }
    .relation-item:nth-of-type(4) {
      border-top-color: #e6983c; }
      @media screen and (max-width: 640px) {
        .relation-item:nth-of-type(4) {
          border-top-color: #c2c4cc;
          border-left-color: #e6983c; } }
      .relation-item:nth-of-type(4) .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; }

.m-title-borderleft .label,
.m-title-borderbottom .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; }

/***********************
日新電機グループ企業行動憲章
***********************/
#csr_governance_charter .seitei-txt {
  font-size: 14px;
  font-size: calc($size / 16)rem; }
#csr_governance_charter .dot-indent {
  text-indent: -2.6em;
  padding-left: 2.6em; }
#csr_governance_charter #sec02 .m-h4 {
  margin-top: 40px; }
  @media screen and (max-width: 640px) {
    #csr_governance_charter #sec02 .m-h4 {
      margin-top: 30px; } }

/***********************
コンプライアンス
***********************/
#csr_governance_compliance .m-pagehead-nav {
  border-image-source: linear-gradient(#fafafa, #fafafa);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw 0 100vw; }
#csr_governance_compliance .m-section {
  padding-top: unset; }
#csr_governance_compliance .relation-item:nth-of-type(3) {
  padding: 0; }
  #csr_governance_compliance .relation-item:nth-of-type(3) a {
    width: 215px;
    display: block;
    padding: 20px 10px; }
    @media screen and (max-width: 640px) {
      #csr_governance_compliance .relation-item:nth-of-type(3) a {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 20px 10px;
        gap: 15px; } }
    #csr_governance_compliance .relation-item:nth-of-type(3) a:hover {
      text-decoration: none; }
      #csr_governance_compliance .relation-item:nth-of-type(3) a:hover img {
        opacity: 1; }
    #csr_governance_compliance .relation-item:nth-of-type(3) a .relation-item__title {
      color: #9c6fde; }

/***********************
リスク管理
***********************/
#csr_governance_risk .m-pagehead-nav {
  border-image-source: linear-gradient(#fafafa, #fafafa);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw 0 100vw; }
#csr_governance_risk .m-section {
  padding-top: unset; }
#csr_governance_risk .relation {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: 30px; }
  @media screen and (max-width: 640px) {
    #csr_governance_risk .relation {
      flex-direction: column;
      gap: 15px;
      padding-top: 20px; } }
  #csr_governance_risk .relation-item:nth-of-type(3) {
    background-color: #fff;
    border-color: #c2c4cc;
    border-top-color: #9c6fde; }
    @media screen and (max-width: 640px) {
      #csr_governance_risk .relation-item:nth-of-type(3) {
        border-top-color: #c2c4cc;
        border-width: 1px; } }
  #csr_governance_risk .relation-item:nth-of-type(5) {
    padding: 0;
    background-color: #ffedf7;
    border-color: #e68abc; }
    @media screen and (max-width: 640px) {
      #csr_governance_risk .relation-item:nth-of-type(5) {
        border-left-color: #e68abc;
        border-width: 2px; } }
    #csr_governance_risk .relation-item:nth-of-type(5) a {
      width: 215px;
      display: block;
      padding: 20px 10px; }
      @media screen and (max-width: 640px) {
        #csr_governance_risk .relation-item:nth-of-type(5) a {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 20px 10px;
          gap: 15px; } }
      #csr_governance_risk .relation-item:nth-of-type(5) a:hover {
        text-decoration: none; }
        #csr_governance_risk .relation-item:nth-of-type(5) a:hover img {
          opacity: 1; }
      #csr_governance_risk .relation-item:nth-of-type(5) a .relation-item__title {
        color: #e68abc; }