@charset "utf-8";

/* CSS Document */
/*--common--*/
main {
  z-index: 10;
  overflow: hidden;
}

.sp-only {
  display: none;
}

small {
  font-size: 80%;
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -.5em;
}

.l-section__inner> :first-child {
  margin-top: 0;
}

.wrp-contents {
  max-width: 1320px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  padding: 50px 16px;
}

#service-about .wrp-contents,
#service-reason .wrp-contents,
#suggestion .wrp-contents,
#iso-acquisition .wrp-contents {
  padding-top: 70px;
  padding-bottom: 70px;
}

.contact {
  .content-title {
    font-size: 24px;
  }
}
.txt-size13{
  font-size: 13px;
}

@media screen and (min-width: 1024px) {
  .flex-pc-only {
    display: flex;
  }
}

/*--contents--*/
.l-section {
  padding: 0 0 40px;
}

/*** box-title ***/
.box-title {
  background-color: #033395;
  color: #ffffff;

  sup {
    font-size: 60%;
  }
}

@media screen and (min-width: 1440px) {
  .box-title {
    background: url(/resource/images/customization/mv-pc.jpg) no-repeat bottom -130px center / cover;
  }
}

@media screen and (max-width: 1439px) and (min-width: 1350px) {
  .box-title {
    background: url(/resource/images/customization/mv-pc.jpg) no-repeat bottom -130px right / 1440px auto;
  }
}

@media screen and (max-width:1349px) and (min-width:768px) {
  .box-title {
    background: url(https://product.minebeamitsumi.com/resource/images/customization/mv-tb.jpg)no-repeat bottom 0px right / cover;
  }

  .wrp-contents {
    padding-bottom: 100px;
  }
}



@media screen and (min-width: 768px) {
  .box-title {
    .wrp-contents {
      padding: 20px 35px 270px 35px;
    }

    small {
      font-size: 24px;
      text-shadow: #000000 0 0 10px;
    }

    .mv-title {
      font-size: 42px;
      margin-left: -0.5em;
      margin-top: 7px;
      text-shadow: #000000 0 0 10px;

      .mv-title-01 {
        padding-right: 12px;
      }
    }

    .mv-caption {
      font-size: 17px;
      margin-top: 20px;
      text-shadow: #000000 0 0 10px;

      p {
        margin-bottom: 12px;
      }

      small {
        font-size: 12px;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .box-title {
    background: url(/resource/images/customization/mv-sp.jpg)no-repeat bottom center / cover;
    background-color: #033395;

    .wrp-contents {
      padding: 25px 15px 395px;
    }

    small {
      font-size: 18px;
    }

    .mv-title {
      font-size: 24px;
      margin: 10px 0 15px;
      text-indent: -0.5em;
      text-shadow: #000000 0 0 10px;
    }
  }

  .mv-caption {
    font-size: 15px;
    text-shadow: #000000 0 0 10px;

    p {
      margin-bottom: 10px;
    }

    small {
      font-size: 12px;
    }
  }


  .contact {
    .content-title {
      font-size: 18px;
      margin-bottom: 15px;
    }
  }

}


/*** nav ***/
.ems-nav-box .wrp-contents {
  padding: 50px 0;
}

.ems-nav-box .ems-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ems-nav-box .ems-nav li {
  position: relative;
}

@media screen and (min-width: 768px) {
  .ems-nav-box .ems-nav li {
    width: calc(100% / 4);
    font-size: 15px;
    border-right: 1px solid #cccccc;
  }

  .ems-nav-box .ems-nav li:first-child,
  .ems-nav-box .ems-nav li:nth-child(5) {
    border-left: 1px solid #cccccc;
  }

  .ems-nav-box .ems-nav li:nth-child(-n+4) {
    margin-bottom: 20px;
  }

  .ems-nav-box .ems-nav li a {
    text-align: center;
    padding: 20px 30px;
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .ems-nav-box .ems-nav li {
    width: calc((100% - 10px) / 2);
    font-size: 15px;
    border-bottom: 1px solid #cccccc;
    display: flex;
  }

  .ems-nav-box .ems-nav li:first-child,
  .ems-nav-box .ems-nav li:nth-child(2) {
    border-top: 1px solid #cccccc;
  }


  .ems-nav-box .ems-nav li a {
    align-self: center;
    width: 100%;
    font-size: 14px;
    padding: 15px 20px 15px 0;

    &.arrow-bottom:after {
      right: 8px;
    }
  }
}

.ems-nav-box .ems-nav a,
.ems-nav-box .ems-nav a:visited {
  text-decoration: none;
  color: #004ea8;
}

.ems-nav-box .ems-nav a:hover {
  text-decoration: underline;
}

a.arrow-bottom:after {
  top: calc(50% - 3px);
  right: 20px;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #004EA8;
  border-right: 2px solid #004EA8;
  content: "";
  display: block;
  position: absolute;
  transform: translateY(-50%);
  rotate: 45deg;
}

/*** service-point ***/

#service-point .point-flex .flex-box {
  text-align: center;
  background-color: #EAF7FF;
}

#service-point .point-flex .flex-box p {
  line-height: 150%;
  color: #004EA8;
}

@media screen and (min-width: 768px) {
  #service-point {
    .wrp-contents {
      padding-top: 60px;
      padding-bottom: 70px;
    }

    .point-flex {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;

      .flex-box {
        width: 280px;
        min-height: 280px;
        padding: 75px 0 0;
        margin-right: 10px;
        border-radius: 240px;

        &:last-of-type {
          margin-right: 0;
        }
      }

      img {
        height: 26px;
        width: auto;
      }

      p {
        font-size: 18px;
        margin-top: 15px;
        padding: 0 10px 20px;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  #service-point {
    .wrp-contents {
      padding-top: 45px;
      padding-bottom: 45px;
    }

    .point-flex {
      .flex-box {
        border-radius: 150px;
        padding: 15px 0;
        margin-bottom: 15px;
        background-color: #EAF7FF;

        &:last-of-type {
          margin-bottom: 0;
        }

        h3 {
          padding-top: 0px;
          padding-bottom: 0px;
          margin-bottom: 0px;
        }

        img {
          height: 19px;
          width: auto;
        }

        p {
          font-size: 15px;
          margin-top: 5px;
        }
      }
    }
  }

  .m-heading-level2 {
    font-size: 22px;
  }
}


/*** service-str ***/
#service-str {
  background-color: #FFEDEF;

  .wrp-contents {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

.str-flex .flex-box {
  background-color: #ffffff;
}

.str-box-title {
  background-color: #C00D1E;
  display: flex;
  justify-content: center;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  width: 100%;

  .str-box-title-no {
    border-right: 1px solid #ffffff;
  }
}

@media screen and (min-width: 768px) {
  #service-str {
    .wrp-contents {
      padding-top: 70px;
      padding-bottom: 70px;
    }

    .str-flex {
      display: flex;
      flex-wrap: nowrap;
      margin-top: 40px;
      justify-content: space-between;

      .flex-box {
        width: calc((100% - (30px*2)) / 3);

        .str-box-title {
          padding: 20px 10px;
          font-size: 22px;
          border-bottom: 5px solid #BFBFBF;

          .str-box-title-no {
            padding-right: 15px
          }

          .str-box-title-txt {
            padding-left: 15px
          }
        }

        .str-box-content {
          padding: 25px;
          font-size: 16px;
          text-align: center;

          img {
            width: 355px;
            height: auto;
          }

          p {
            margin-top: 23px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  #service-str .wrp-contents {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .str-flex {
    margin-top: 25px;
    justify-content: space-between;

    .flex-box {
      margin-bottom: 20px;

      &:last-of-type {
        margin-bottom: 0;
      }

      .str-box-title {
        padding: 20px 10px;
        font-size: 20px;
        border-bottom: 5px solid #BFBFBF;

        .str-box-title-no {
          padding-right: 10px
        }

        .str-box-title-txt {
          padding-left: 10px
        }
      }

      .str-box-content {
        padding: 15px;
        text-align: center;

        img {
          width: 100%;
          height: auto;
        }

        p {
          font-size: 14px;
          margin-top: 15px;
        }
      }
    }
  }

}

/*** owned-tech ***/
.tech-box {
  border: 1px solid #215BA5;

  h3 {
    background-color: #004EA8;
    color: #ffffff;
    text-align: center;
  }

  b {
    display: block;
    background-color: #DAE5F2;
    text-align: center;
  }

  &:nth-last-child(-n+2) {
    .flex-box:last-of-type {
      flex-grow: 3;
    }
  }
}

@media screen and (min-width: 768px) {
  #owned-tech .wrp-contents {
    padding: 70px 0;

    h2 {
      margin-top: 0;
    }
  }

  .tech-box {
    margin-bottom: 20px;

    h3 {
      font-size: 20px;
      padding: 10px;
    }

    b {
      font-size: 16px;
      padding: 5px 10px;
      border-radius: 50px;
      font-weight: 700;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    img {
      max-width: 180px;
    }

    .tech-flex {
      display: flex;
      padding: 10px;
      flex-wrap: nowrap;

      .flex-box {
        padding: 20px;
      }

      .tech-list {
        display: flex;
        flex-wrap: wrap;

        li {
          width: calc((100% - (30px*2)) / 3);
          margin: 0 30px 10px 0;

          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }

        p {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }

    &:nth-last-child(-n+2) {
      .flex-box:last-of-type {
        flex-grow: 3;
      }
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

@media screen and (max-width: 767px) {
  #owned-tech .wrp-contents {
    padding: 0 0 45px;

    h2 {
      margin-top: 40px;
    }
  }

  .tech-box {
    margin-bottom: 20px;

    h3 {
      font-size: 15px;
      padding: 10px;
    }

    img {
      width: auto;
      height: 110px;
    }

    b {
      font-size: 14px;
      padding: 5px;
      border-radius: 50px;
    }

    .tech-flex {
      padding: 15px 15px 0;
      flex-wrap: wrap;

      .flex-box {
        &:first-of-type {
          text-align: center;
          background-color: #F4F9FD;
          margin-bottom: 15px;
        }
      }

      p {
        margin: 10px 0 11px;
        font-size: 13px;
      }
    }
  }

  &:nth-last-child(-n+2) {
    .tech-list {
      p {
        padding: 5px;
        font-size: 14px;
        border-radius: 50px;
      }
    }
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}

/*** service-about ***/
#service-about {
  background-color: #E8F5FD;

  h3 {
    font-size: 20px;
  }

  .flow-caption {
    position: relative;
    color: #004EA8;
    background-color: #ffffff;

    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 96px;
      height: 90px;
      background: url(/resource/images/customization/illust-01.png) no-repeat center center / contain;
      transform: translateY(-50%);
    }
  }

  .flow-detail .flow-detail-box {
    z-index: 0;
    text-align: center;

    img {
      width: 165px;
      height: auto;
    }

    &:nth-of-type(n+3) .step-title {
      color: #ffffff;
      background-color: #4EA3EB;
      position: relative;
    }

    &:nth-of-type(1) .step-title {
      background-color: #C1E3EC;
    }

    &:nth-of-type(2) .step-title {
      background-color: #8CCBEA;
    }

    &:nth-of-type(3) .step-title {
      background-color: #4EA3EB;
    }

    &:nth-of-type(4) {
      .flow-step-title {
        position: relative;
      }

      .step-title {
        background-color: #1771D9;
      }
    }

    &:nth-of-type(5) .step-title {
      background-color: #1771D9;
    }

    &:nth-of-type(6) .step-title,
    &:nth-of-type(7) .step-title {
      background-color: #4EA3EB;
    }

    &:nth-of-type(8) .step-title {
      background-color: #005EC9;
    }

    &:nth-of-type(9) {
      .flow-step-title:before {
        z-index: 1;
        width: 50%;
        right: auto;
        left: -10px;
      }

      .step-title {
        background-color: #004EA5;
      }

      .flex-box:last-of-type {
        border: none;
      }
    }

    .flex-box:last-of-type {
      color: #444444;
    }

    .flow-step-title {
      text-align: center;
      position: relative;
      z-index: 0;

      span {
        display: inline-block;
      }

      .step-title {
        text-align: center;
        position: relative;
        z-index: 2;
      }

      &:before,
      &:after {
        content: "";
        position: absolute;
        display: block;
      }

      &:before {
        height: 2px;
        background-color: #222222;
        right: 0;
        left: 0;
        top: 55px;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  #service-about {
    .wrp-contents {
      padding-top: 70px;
      padding-bottom: 70px;
    }

    h3+p {
      margin-bottom: 30px;
    }

    .about-flow-img-box {
      text-align: center;

      img {
        width: 100%;
        height: auto;
      }
    }

    .flow-section {
      margin-top: 70px;

      h3 {
        margin-bottom: 35px;
      }
    }

    .flow-caption {
      text-align: center;
      font-size: 24px;
      border-radius: 50px;
      padding: 10px 80px;

      &:after {
        right: 20px;
        top: 50%;
      }
    }

    .flow-detail {
      .flow-detail-box {
        width: calc(100% / 5);
        display: flex;
        flex-direction: column;

        p {
          font-size: 18px;
        }

        >.flex-box {
          &:last-of-type {
            flex-grow: 1;
            margin-top: 35px;
            padding-bottom: 18px;
            color: #444444;
            border-right: 1px solid #D0D4D9;
            display: flex;
            flex-direction: column;
            align-items: center;

            &>p {
              display: flex;
              align-items: center;
              flex-grow: 1;
            }
          }
        }

        &:nth-of-type(-n+5) {
          margin-bottom: 50px;
        }

        &:nth-of-type(1) .flow-step-title:before {
          z-index: 1;
          width: 50%;
          right: 0;
          left: auto;
        }

        &:nth-of-type(4) .flow-step-title:after {
          content: "";
          display: block;
          z-index: -1;
          height: 51px;
          position: absolute;
          background-color: #C6DAF7;
          right: 0;
          bottom: -7px;
          border-radius: 50px 0 0 50px;
        }

        &:nth-of-type(5) {
          .flex-box:last-of-type {
            border: none;
          }

          .flow-step-title {
            &:before {
              z-index: 1;
              width: 50%;
              right: auto;
              left: 0;
            }

            &:after {
              content: "";
              display: block;
              z-index: -1;
              width: 130%;
              height: 51px;
              position: absolute;
              background-color: #C6DAF7;
              bottom: -7px;
            }
          }
        }

        &:nth-of-type(6) .flow-step-title {
          &:before {
            z-index: 1;
            width: 50%;
            right: 0;
            left: auto;
          }

          &:after {
            content: "";
            display: block;
            z-index: -1;
            width: 130%;
            height: 51px;
            position: absolute;
            background-color: #C6DAF7;
            bottom: -7px;
            right: 0;
          }
        }

        &:nth-of-type(7) .flow-step-title:after {
          content: "";
          display: block;
          z-index: -1;
          height: 51px;
          position: absolute;
          background-color: #C6DAF7;
          left: 0;
          bottom: -7px;
          border-radius: 0 50px 50px 0;
        }
      }

      .flow-step-title {
        .step-no {
          width: 100%;
          font-size: 20px;
          margin-bottom: 10px;
        }

        .step-title {
          width: 81.5%;
          max-width: 160px;
          border-radius: 50px;
          padding: 8px;
          margin: 0 10px;
          font-size: 16px;
        }
      }
    }

    .flow-annotation {
      font-size: 13px;
    }
  }
}

@media screen and (min-width:976px) {
  .flow-detail-box {

    &:nth-of-type(7) .flow-step-title:after,
    &:nth-of-type(4) .flow-step-title:after {
      width: calc(180px + (100% - 180px) / 2);
    }
  }
}

@media screen and (max-width:975px) and (min-width:768px) {
  .flow-detail-box {

    &:nth-of-type(7) .flow-step-title:after,
    &:nth-of-type(4) .flow-step-title:after {
      width: 100%;
    }
  }
}

@media screen and (max-width: 767px) {
  #service-about {
    .wrp-contents {
      padding-top: 45px;
      padding-bottom: 45px;
    }

    h3+p {
      font-size: 14px;
      margin-bottom: 30px;
    }

    .about-flow-img-box {
      text-align: center;

      img {
        width: 100%;
        height: auto;
      }
    }

    .glossary-section {
      margin-top: 20px;
    }

    .glossary-box {
      background-color: #ffffff;
      padding: 15px 20px;
      margin: 10px 0;

      h4 .glossary01 {
        font-size: 16px;
      }

      h4 .glossary02 {
        font-size: 14px;
      }

      p {
        font-size: 14px;
        margin-top: 5px;
      }
    }

    .flow-section {
      margin-top: 40px;

      h3 {
        margin-bottom: 35px;
      }
    }

    .flow-caption {
      text-align: left;
      font-size: 16px;
      border-radius: 50px;
      padding: 12px 100px 15px 30px;
      margin-bottom: 20px;

      &:after {
        transform: translateY(-50%);
        right: 10px;
        top: 25%;
      }
    }

    .flow-detail .flow-detail-box {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;

      img {
        width: 128px;
        height: auto;
      }

      >.flex-box {
        &:first-of-type {
          width: 130px;
          margin-right: 20px;
        }

        &:last-of-type {
          min-width: 190px;
          padding: 10px 10px;
          font-size: 14px;
          color: #444444;
          border-bottom: 1px solid #D0D4D9;
        }
      }

      .flow-step-title {
        &:before {
          z-index: 0;
          width: 1px;
          height: 70px;
          top: auto;
          bottom: -85px;
          right: 0;
          left: 0;
          margin: auto;
        }

        .step-no {
          font-size: 16px;
          margin-bottom: 10px;
        }

        .step-title {
          font-size: 15px;
          border-radius: 50px;
          padding: 5px;
          width: 130px;
        }
      }

      &:last-of-type .flow-step-title:before {
        content: none;
      }

      &:nth-of-type(3) .flow-step-title:before,
      &:nth-of-type(8) .flow-step-title:before {
        height: 60px;
        bottom: -75px;
      }

      &:nth-of-type(4) .flow-step-title:before,
      &:nth-of-type(5) .flow-step-title:before,
      &:nth-of-type(6) .flow-step-title:before,
      &:nth-of-type(7) .flow-step-title:before {
        height: 50px;
        bottom: -65px;
      }

      &:nth-of-type(4) .flow-step-title:after,
      &:nth-of-type(5) .flow-step-title:after,
      &:nth-of-type(6) .flow-step-title:after,
      &:nth-of-type(7) .flow-step-title:after {
        content: "";
        display: block;
        z-index: -1;
        width: 30px;
        height: 150px;
        position: absolute;
        background-color: #C6DAF7;
        bottom: -135px;
        right: 0;
        left: 0;
        margin: auto;
      }
    }

    .flow-annotation {
      font-size: 12px;
      margin-left: 15px;
    }
  }
}

/*** service-reason ***/

#service-reason {
  .m-heading-level3 {
    margin-top: 0;
  }


  .m-link {
    margin-top: 0;
  }

  .customs05-info {
    margin-bottom: 25px;
  }

  table {
    border-collapse: collapse;

    &,
    th,
    td {
      border: 1px solid #D9D9D9;
    }

    th {
      background-color: #004EA8;
      color: #ffffff;
      font-weight: 700;
      padding: 8.5px 10px 6px;
    }
  }

  .lock-link-block {
    a {
      color: #444444;
      padding-right: 25px;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .list-hyphen {
    margin-left: 1em;

    li {
      position: relative;

      &:before {
        content: "-";
        display: inline-block;
        padding-right: 5px;
        position: relative;
        font-size: 14px;
        top: 0px;
        margin-right: 0px;
        transform: none;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  #service-reason .wrp-contents {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  #service-reason .flex-pc-only {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;

    .flex-box:first-of-type {
      margin-right: 20px;
    }
  }

  .lock-link-block {
    a {
      color: #222222;
      display: inline-block;
      font-size: 20px;
    }

    +p {
      margin-bottom: 35px;
      font-size: 16px;
    }
  }

  .lock-img-box {
    img {
      width: 100%;
      height: auto;
    }
  }

  .contents-edit table td {
    padding: 8.5px 10px 6px;
    text-align: left;
  }

  .contents-edit table tr {
    padding: 8.5px 10px 6px;
    text-align: center;
  }

  .pc-reason-table {
    font-size: 14px;

    th,
    td {
      padding: 8.5px 10px 6px;
    }
  }

  .lock-box {
    width: 100%;
    margin-top: 20px;


    img {
      width: 120px;
      height: auto;
    }

    table {


      th,
      td {
        padding: 8.5px 10px 6px;
      }

      th {
        font-size: 15px;
        font-weight: 700;
      }

      td {
        font-size: 16px;
      }

      td:first-child {
        width: 70%;
      }
    }

    .flex-pc-only,
    .flex-wrapper {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      flex-wrap: nowrap;

      .flex-box:first-of-type {
        margin-right: 15px;
      }
    }

    .flex-pc-only .flex-box:first-of-type {
      flex-grow: 3;

    }
  }

  .flow-section {
    .flex-pc-only {
      display: flex;
      flex-wrap: wrap;
    }
  }
}

@media screen and (max-width: 767px) {
  #service-reason .wrp-contents {
    padding-top: 40px;
    padding-bottom: 40px;

    h4 {
      font-size: 16px;
    }

    .flex-box .pc-only {
      display: none;
    }

    .flex-box {
      display: block;
    }
  }

  .sp-only {
    display: block;
    width: 100%;
  }


  .lock-link-block {
    margin-bottom: 15px;

    a {
      font-size: 16px;
      color: #222222;
      display: inline-block;
    }

    +p {
      font-size: 15px;
      margin-bottom: 10px;
    }
  }

  .lock-img-box {
    text-align: center;
    margin-bottom: 35px;

    img {
      width: 100%;
      height: auto;
    }
  }

  .sp-reason-table {
    width: 100%;
    table-layout: auto;
    font-size: 14px;
    margin-bottom: 15px;

    &:first-of-type td {
      text-align: left;
    }

    th,
    td {
      padding: 5px;
    }

    td:first-child {
      width: 75px;
      text-align: center;
    }
  }

  .lock-box {
    img {
      width: 282px;
      height: auto;
    }

    table {
      width: 100%;

      th,
      td {
        padding: 10px;
      }

      th {
        padding: 5px;
        font-size: 15px;
      }

      td {
        font-size: 15px;
        text-align: center;
      }
    }

    .flex-wrapper {
      margin-top: 10px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;

      .flex-box {
        width: 152px;

        img {
          width: 100%;
          height: auto;
        }
      }

      .flex-box:first-of-type {
        margin-right: 15px;
      }
    }
  }
}

/*** achievements ***/
#achievements {
  background-color: #E8F5FD;

  .flex-box {
    background-color: #ffffff;
    border: 1px solid #B3B3B3;
    text-align: center;
  }

  .product-link-box {
    button {
      color: #004EA8;
      width: 100%;
      border: 1px solid #004EA8;
      background: url(/resource/images/customization/icon-modal.png)no-repeat center right 20px, #ffffff;

      &:hover {
        background: url(/resource/images/customization/icon-modal.png)no-repeat center right 20px, #e6f2ff;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  #achievements {
    .wrp-contents {
      padding-top: 70px;
      padding-bottom: 70px;
    }

    h3 {
      font-size: 20px;
    }

    p {
      font-size: 18px;

      &.txt-left {
        font-size: 16px;
      }
    }

    .flex-pc-only {
      display: flex;
      justify-content: space-between;
    }

    .flex-box {
      width: calc((100% - (25px*2)) /3);
      padding: 25px 20px;
      position: relative;

      img {
        margin: 30px 0;
        height: auto;
      }

      h3 {
        margin-bottom: 10px;
      }
    }
  }

  .product-link-box button {
    margin-top: 20px;
    padding: 20px 40px;
    border-radius: 6px;
    font-size: 16px;
  }

}

@media screen and (max-width: 767px) {
  #achievements {
    .flex-pc-only {
      flex-wrap: wrap;
    }

    .wrp-contents {
      padding-top: 35px;
      padding-bottom: 35px;
    }

    .flex-box {
      padding: 20px 15px;
      margin-bottom: 15px;
      width: 100%;

      &:last-of-type {
        margin-bottom: 0;
      }

      p {
        font-size: 14px;
      }

      p:first-of-type {
        font-size: 18px;
      }

      img {
        width: 170px;
        height: auto;

        margin: 15px 0;
      }

      h3 {
        font-size: 15px;
        margin-bottom: 10px;
      }
    }
  }

  .product-link-box button {
    margin-top: 20px;
    padding: 15px 40px;
    border-radius: 6px;
    font-size: 16px;
  }

}

/*** suggestion ***/
#suggestion {
  .factory-info-box {
    border: 2px solid #004EA8;
    background-color: #ffffff;
  }

  h3 {
    color: #004EA8;
    display: flex;
    align-items: top;
    border-bottom: 1px solid #C1C1C1;

    span {
      align-self: flex-start;
      display: inline-block;
    }

    .fac-no {
      background-color: #215BA5;
      color: #ffffff;
    }
  }

  .factory-info-box {

    ul,
    li {
      list-style-type: disc;
    }

    ul {
      margin-left: 20px;
    }
  }

  .factory-photo-box {
    text-align: center;

    >p {
      background-color: #E2EFFF;
    }
  }
}

@media screen and (min-width: 768px) {
  #suggestion {
    .wrp-contents {
      padding-top: 70px;
      padding-bottom: 70px;
    }

    .factory-map-box {
      position: relative;
      height: 650px;
    }

    .map-box {
      text-align: right;
      margin-right: -100px;
      padding-left: 50px;

      img {
        min-width: 900px;
        height: auto;
      }
    }

    .info-box {
      position: absolute;
      width: 100%;
      top: 60px;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;

      &>.flex-box:first-of-type {
        margin-right: 7vw;
      }

      &>.flex-box:last-of-type {
        margin-left: 15vw;
      }
    }

    .factory-info-box {
      padding: 20px;
      border: 2px solid #004EA8;
      border-radius: 4px;

      img {
        width: 153px;
        height: auto;
      }

      &.factory-02 {
        margin-top: 20px;
      }

      &.factory-03 {
        img {
          width: 137px;
          height: auto;
        }
      }

      &.factory-04 {
        margin-top: 40px;
      }

      &>.flex-wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;

        ul {
          font-size: 14px;
        }

        .flex-box {
          &:first-of-type {
            min-width: 180px;
          }

          &:last-of-type {
            margin-left: 20px;
          }

          h3 {
            padding-bottom: 10px;
            margin-bottom: 10px;

            .fac-no {
              font-size: 14px;
              padding: 8px 6px 5px;
              border-radius: 50px;
            }

            .fac-name {
              margin: 5px 0 0 10px;
              font-size: 18px;
            }
          }
        }
      }
    }

    .factory-photo-box {
      margin-top: 10px;

      >p {
        font-size: 16px;
        padding: 10px;
      }

      img {
        width: 100%;
        height: auto;
      }

      .flex-wrapper {
        display: flex;
        flex-wrap: nowrap;

        .flex-box {
          width: 50%;
          max-width: 180px;
          margin-left: 0px !important;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  #suggestion {
    .wrp-contents {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .factory-map-box {
      position: relative;
    }

    .map-box {
      text-align: center;
      margin-right: -15px;
      margin-left: -15px;

      img {
        width: 100%;
        height: auto;
      }
    }

    .info-box {
      margin-top: -100px;
      position: relative;
    }

    .factory-info-box {
      width: 100%;
      padding: 15px;
      border: 1px solid #004EA8;
      border-radius: 4px;
      margin-bottom: 15px;

      img {
        width: 120px;
        height: auto;
      }

      &>.flex-wrapper {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: top;

        &>.flex-box:first-of-type {
          flex-grow: 2;
          margin-right: 10px;
        }
      }
    }

    ul {
      font-size: 14px;
    }

    .flex-box {
      h3 {
        padding-bottom: 10px;
        margin-bottom: 10px;

        .fac-no {
          font-size: 14px;
          padding: 8px 6px 5px;
          border-radius: 50px;
        }

        .fac-name {
          margin: 5px 0 0 10px;
          font-size: 14px;
        }
      }
    }

    .factory-photo-box {
      margin-top: 10px;

      >p {
        padding: 10px;
        font-size: 12px;
      }

      .flex-wrapper {
        display: flex;
        flex-wrap: nowrap;
      }

      .flex-box {
        width: 50%;
        margin-left: 0px !important;

        img {
          width: 100%;
        }
      }
    }
  }
}


/*** iso-acquisition ***/
#iso-acquisition {
  background-color: #E8F5FD;

  h3 {
    font-size: 20px;
  }
}

.certificate-list button {
  color: #004EA8;
  width: 100%;
  border: 1px solid #004EA8;
  background: url(/resource/images/customization/icon-modal.png)no-repeat center right 20px, #ffffff;

  .btn-inner {
    display: inline-block;
    width: 100%;
    text-align: left;
    background: url(/resource/images/customization/icon-file.png)no-repeat center left;
  }

  &:hover {
    background: url(/resource/images/customization/icon-modal.png)no-repeat center right 20px, #e6f2ff;

    .btn-inner {
      background: url(/resource/images/customization/icon-file.png)no-repeat center left;
    }
  }
}

.certificate-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #ffffff;
  text-align: center;

  th {
    background-color: #004EA8;
    color: #ffffff;
    padding: 22px 10px;
    border: 1px solid #D9D9D9;
  }

  tr,
  td {
    height: 3em;
    padding: 22px 10px;
    border: 1px solid #D9D9D9;
  }
}


@media screen and (min-width: 768px) {
  #iso-acquisition .wrp-contents {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  #iso-acquisition h3 {
    margin: 30px 0 35px;
  }

  .certificate-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;

    li {
      width: calc((100% - (40px*2)) / 3);
    }
  }

  .certificate-list button {
    margin-top: 20px;
    padding: 20px 50px 20px 40px;
    border-radius: 6px;
    font-size: 18px;
    display: flex;
    align-items: center;

    .btn-inner {
      padding: 3px 0 0 40px;
    }
  }

  .certificate-table {
    font-size: 15px;

    th,
    td {
      font-size: 20px;
      padding: 22px 10px;
    }

    th {
      font-size: 15px;
    }

    tr>td:first-of-type {
      text-align: left;
      font-size: 15px;
    }

    tr:last-of-type>td:last-of-type {
      padding: 12px;
      font-size: 14px;
      text-align: left;
      line-height: 110%;
    }
  }
}

@media screen and (max-width: 767px) {
  #iso-acquisition .wrp-contents {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #iso-acquisition h3 {
    margin: 30px 0 20px;
    font-size: 16px;
  }

  .certificate-list {
    margin-bottom: 60px;
  }

  .certificate-list button {
    margin-top: 15px;
    padding: 15px 40px;
    border-radius: 6px;
    font-size: 16px;

    .btn-inner {
      padding: 3px 0 0 40px;
    }
  }

  .certificate-table-box {
    position: relative;
    overflow-x: auto;

    .certificate-table {
      font-size: 15px;
      table-layout: fixed;

      th,
      td {
        padding: 10px;
        width: 140px;
        font-size: 20px;
      }

      th {
        padding: 10px 0;
        font-size: 12px;
        text-align: center;
      }

      th:first-child,
      td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 115px;
        font-size: 15px;
        padding: 10px 0 10px 10px;
        border-left: none;
        border-right: none;
      }

      th:first-child:before,
      td:first-child:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-left: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9;
        z-index: 1;
      }

      td:first-of-type {
        background-color: #ffffff;
      }

      tr>td:first-of-type {
        text-align: left;
      }

      th:nth-child(2),
      td:nth-child(2) {
        border-left: none;
      }

      th:last-child,
      td:last-child {
        width: 160px;
      }

      tr:last-of-type>td:last-of-type {
        padding: 12px;
        font-size: 14px;
        text-align: left;
        line-height: 110%;
      }
    }

    .scroll-hint-icon-wrap {
      z-index: 10;
    }
  }

}

/*** sdgs-attempt ***/
#sdgs-attempt {
  .m-heading-level2 {
    font-size: 28px;
    margin-bottom: 25px;
  }

  a {
    display: inline;

    &:hover {
      text-decoration: underline;
    }
  }

  .sdgs-img-box {
    img {
      height: auto;
    }
  }
}

#sdgs-attempt .flex-pc-only .flex-box {
  &:last-of-type {
    text-align: center;
  }
}

@media screen and (min-width: 768px) {
  #sdgs-attempt {
    .wrp-contents {
      padding-top: 70px;
      padding-bottom: 70px;
      font-size: 16px;
    }

    a {
      padding-right: 25px;
    }

    .flex-pc-only {
      display: flex;
      justify-content: space-between;
    }

    .flex-pc-only .flex-box {
      width: calc(50% - 20px);

      &:first-of-type {
        >p {
          margin-bottom: 10px;
        }
      }

      &:last-of-type {
        background-color: #DFEBF2;

        >p {
          padding: 5px 0 10px;
        }
      }
    }

    .sdgs-img-box {
      &+p {
        font-size: 14px;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  #sdgs-attempt {
    .wrp-contents {
      padding-top: 70px;
      padding-bottom: 70px;
      font-size: 15px;
    }

    a {
      padding-right: 25px;
    }

    .flex-box {
      &:first-of-type {
        >p {
          margin-bottom: 10px;
        }
      }

      &:last-of-type {
        margin-top: 20px;
        background-color: #DFEBF2;

        >p {
          font-size: 14px;
          padding: 5px 0 10px;
        }
      }
    }
  }
}


/*** annotation ***/
.annotation .wrp-contents {
  padding-top: 0;

  .annotation-list {
    text-indent: -1.4em;
    padding-left: 1.4em;
  }
}

@media screen and (min-width: 768px) {
  .annotation {
    font-size: 13px;
  }
}

@media screen and (max-width: 767px) {
  .annotation {
    font-size: 12px;
  }
}


/*** contact ***/

.product .contact {
  margin-bottom: 0;
}

.contact {
  background: rgb(214, 236, 255);
  background: linear-gradient(135deg, rgba(214, 236, 255, 1) 40%, rgba(167, 206, 255, 1) 100%);
  text-align: center;

  a {
    color: #ffffff;
    margin: 0 auto;
  }
}

.download-link {
  a {
    border: 1px solid #0E4399;
    background-color: #0E4399;

    &:hover {
      color: #0E4399;
      background-color: #ffffff;
    }
  }
}

.contact-link {
  a {
    border: 1px solid #C00D1E;
    background-color: #C00D1E;

    &:hover {
      color: #C00D1E;
      background-color: #ffffff;
    }
  }
}

@media screen and (min-width: 768px) {
  .content-title {
    margin-bottom: 15px;
  }

  .content-txt {
    margin-bottom: 20px;
  }

  .download-link,
  .contact-link {
    margin: 20px;

    a {
      display: block;
      width: 400px;
      padding: 25px;
      border-radius: 6px;
      font-size: 20px;
      text-decoration: none;

      &.arrow-right:after {
        right: 20px;
        width: 8px;
        height: 8px;
        border-top: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
      }
    }
  }

  .download-link {
    a:hover::after {
      border-top-color: #0E4399;
      border-right-color: #0E4399;
    }

    >p {
      font-size: 12px;
      margin-top: 15px;
    }
  }

  .contact-link {
    a:hover::after {
      border-top-color: #C00D1E;
      border-right-color: #C00D1E;
    }
  }

  .contact .flex-pc-only {
    justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .contact .wrp-contents {
    padding: 45px 15px;
  }

  .content-title {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .content-txt {
    margin-bottom: 20px;
    font-size: 15px;
  }

  .download-link,
  .contact-link {
    a {
      display: block;
      padding: 15px;
      border-radius: 6px;
      font-size: 15px;
      text-decoration: none;

      &.arrow-right:after {
        right: 20px;
        width: 8px;
        height: 8px;
        border-top: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
      }
    }
  }

  .download-link {
    margin-bottom: 30px;

    >p {
      font-size: 12px;
      margin-top: 15px;

      br {
        display: none;
      }
    }
  }

  .contact .flex-pc-only {
    justify-content: center;
  }
}



/*** modal ***/
.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

.modal-bg {
  background: rgba(0, 0, 0, 0.6);
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: 10;
  margin: auto;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

.modal-contents {
  background: #fff;
  left: 50%;
  position: absolute;
  z-index: 99;
  top: 45%;
  transform: translate(-50%, -50%);
}

.modal-contents-inner {
  overflow-x: auto;
  position: relative;

  h2 {
    border: none;
    padding: 0;
  }

  .achievements-detail-box {
    border-top: 1px solid #E6E6E6;
  }

  .detail-list {
    &>li {
      border-bottom: 1px solid #E6E6E6;

      &:last-child {
        border: none;
      }
    }

    dl {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .modal-tech-list {
    list-style-type: disc;
    margin-left: 20px;

    & li {
      list-style-type: disc;
    }
  }
}

@media screen and (min-width: 768px) {
  .modal-close.pc-only {
    display: inline-block;
    color: #000000;
    background: url(/resource/images/customization/icon-close.png)no-repeat left center / contain;
    padding: 4px 0 4px 44px;
    font-size: 16px;
    position: absolute;
    top: auto;
    right: 20px;
    z-index: 1;
  }

  .modal-contents {
    padding: 10px;
    border-radius: 8px;
  }

  .modal-contents-inner {
    padding: 30px;
    max-width: 780px;
    min-width: 600px;
    max-height: 75vh;

    h2 {
      font-size: 22px;
      margin-bottom: 15px;

      &+p {
        font-size: 15px;
        margin-bottom: 20px;
      }
    }

    dt {
      max-width: 260px;
      flex-grow: 2;

      p {
        font-size: 20px;
        padding: 2px 10px;
        border-left: 5px solid #004EA8;
      }
    }

    dd {
      font-size: 15px;
      width: 60%;
    }
  }
}

@media screen and (max-width: 767px) {
  .modal-close.pc-only {
    display: none;
  }

  .modal-close.sp-only {
    display: block;
    top: -25px;
    right: -15px;
    width: 36px;
    height: 36px;
    position: absolute;
    background: rgba(0, 0, 0, 0);
  }

  .modal-contents {
    width: 90%;
    padding: 10px;
    border-radius: 6px;
    top: 44%;
    position: relative;
  }

  .modal-contents-inner {
    padding: 10px;
    top: 47%;
    max-height: 73vh;

    h2 {
      margin-bottom: 15px;

      &+p {
        margin-bottom: 20px;
      }
    }

    dt {
      width: 100%;

      p {
        font-size: 15px;
        padding: 0px 10px;
        border-left: 3px solid #004EA8;
        margin-bottom: 15px;
      }
    }

    dd {
      font-size: 14px;
      width: 100%;
    }
  }
}

/** achievements-modal **/

#achievements-modal01,
#achievements-modal02,
#achievements-modal03 {
  .detail-img-box {
    text-align: center;
    background-color: #F7F7F7;
  }

  .flex-wrapper {
    text-align: center;

    .flex-box {
      width: calc(50% - 5px);

      img {
        object-fit: contain;
      }
    }
  }

  .sensor-unit-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    li {
      text-align: center;
    }
  }
}

@media screen and (min-width: 768px) {

  #achievements-modal01,
  #achievements-modal02,
  #achievements-modal03 {
    .achievements-detail-box {
      padding: 20px 0 0;

      .sensor-unit-list {
        margin-bottom: 10px;
      }
    }

    .sensor-unit-list {
      display: flex;
      justify-content: center;

      li {
        width: calc(100% / 3);
        border: 1px solid #D9D9D9;
        border-right: none;

        &:nth-child(3),
        &:last-child {
          border-right: 1px solid #D9D9D9;
        }

        &:nth-child(n+4) {
          border-top: none;
        }

        img {
          width: 190px;
        }
      }
    }

    .sensor-unit-box {
      padding: 10px 15px;

      p {

        margin-top: 10px;
      }
    }

    .iot-img-box {
      justify-content: space-between;
    }

    .detail-list {
      &>li {
        padding: 20px 0;
      }
    }
  }
}

@media screen and (max-width: 767px) {

  #achievements-modal01,
  #achievements-modal02,
  #achievements-modal03 {
    .achievements-detail-box {
      padding: 20px 0 0;

      .sensor-unit-list {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        font-size: 13px;

        li {
          width: calc(100% / 2);
          border: 1px solid #D9D9D9;
          border-bottom: none;

          &:nth-child(even) {
            border-left: none;
          }

          &:nth-child(n+5) {
            border-bottom: 1px solid #D9D9D9;
          }
        }
      }

      .sensor-unit-box {
        padding: 10px 15px;

        p {
          margin-top: 10px;
        }
      }

      .detail-list {
        &>li {
          padding: 20px 0;
        }
      }

      .iot-img-box {
        justify-content: space-between;
      }

      .flex-wrapper {
        justify-content: space-between;

        .detail-img-box {
          width: calc(50% - 5px);
        }
      }
    }
  }
}

/** certificate-modal **/

#certificate-modal01,
#certificate-modal02,
#certificate-modal03 {
  .certificate-img-box {
    text-align: center;
  }
}

@media screen and (min-width: 768px) {

  #certificate-modal01,
  #certificate-modal02,
  #certificate-modal03 {
    .certificate-img-box {
      margin-top: 30px;

      img {
        width: 80%;
        height: auto;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

@media screen and (max-width: 767px) {

  #certificate-modal01,
  #certificate-modal02,
  #certificate-modal03 {
    .modal-contents-inner {
      padding: 10px 5px;
      max-height: 75vh;
    }

    .certificate-img-box {
      img {
        width: 100%;
        height: auto;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

/*** bottom-popup ***/


.bottom-popup {
  position: fixed;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 11;
  border: 1px solid #004EA8;
  background-color: #fff;

  a {
    display: block;
    border: 1px solid #004EA8;
    background-color: #004EA8;
    color: #ffffff;
    position: relative;

    &:hover {
      color: #004EA8;
      background-color: #ffffff;

      &::after {
        border-top-color: #004EA8;
        border-right-color: #004EA8;
      }
    }
  }
}

.popup-closebtn {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 36px !important;
  height: 36px;
  background: rgba(0, 0, 0, 0);
}

.bottom-popup a,
.bottom-popup p {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .bottom-popup {
    position: fixed;
    bottom: 260px;
    right: 40px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 11;
    border-radius: 4px;
    padding: 15px;

    .flex-pc-only {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
    }

    .flex-box {
      img {
        height: 96px;
        width: auto;
        vertical-align: bottom;
      }

      &:first-of-type {
        margin-right: 20px;
      }
    }
  }

  .bottom-popup a {
    position: relative;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;

    &:after {
      position: absolute;
      content: "";
      display: block;
      top: calc(50% - 1px);
      right: 20px;
      width: 8px;
      height: 8px;
      border-top: 2px solid #ffffff;
      border-right: 2px solid #ffffff;
      transform: translateY(-50%);
      rotate: 45deg;
    }
  }

}

@media screen and (max-width: 767px) {
  .bottom-popup {
    position: fixed;
    bottom: 160px;
    right: 20px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 11;
    border-radius: 4px;
    padding: 10px;
    width: 70%;

    .pc-only {
      display: none;
    }
  }

  .popup-closebtn {
    position: absolute;
    width: 36px;
    height: 36px;
    top: -20px;
    right: -20px;
  }

  .bottom-popup a,
  .bottom-popup p {
    text-align: center;
    font-size: 12px;
  }

  .bottom-popup a {
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;

    &:after {
      position: absolute;
      content: "";
      display: block;
      top: calc(50% - 1px);
      right: 15px;
      width: 8px;
      height: 8px;
      border-top: 2px solid #ffffff;
      border-right: 2px solid #ffffff;
      transform: translateY(-50%);
      rotate: 45deg;
    }
  }
}