@charset "UTF-8";

h4 .hitachi {
  width: 135px;
}

.block01 figure.k13 {
  margin-bottom: 10px;
}

.block01 figure.k14 {
  margin-top: 50px;
}

.k-flex01 {
  justify-content: space-between;
  flex-wrap: wrap;
}

.k-flex01 .txt {
  width: 44%;
}

.k-flex01 div.image {
  width: 52%;
}

.block01 figure.k15 {
  margin-bottom: 10px;
}

.block01 figure.k17 {
  margin-top: 20px;
}

.block01 .plate {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}

.block01 .plate figure:nth-of-type(1) {
  width: 37.931%;
}

.block01 .plate figure:nth-of-type(2) {
  width: 59%;
}

.safety {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}

.safety li:nth-of-type(1),
.safety li:nth-of-type(2),
.safety li:nth-of-type(3),
.safety li:nth-of-type(4) {
  width: calc((100% - 9.99%) / 4);
}

.safety li:nth-of-type(5),
.safety li:nth-of-type(6),
.safety li:nth-of-type(7) {
  width: calc((100% - 6.66%) / 3);
  margin-top: 30px;
}

.safety-ttl {
  font-size: 20px;
  color: #45584f;
  background: rgba(66, 86, 77, .2);
  text-align: center;
  padding: 15px 0;
  margin-bottom: 10px;
}

h4 .from {
  width: 143px;
}

.video-item {
  margin-top: 20px;
}

.js-modal-open {
  transition: all .5s;
}

.js-modal-open:hover {
  opacity: 0.7;
}

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

.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.modal__content {
  left: 50%;
  padding: 0 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

.modal__content a {
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 15px;
  letter-spacing: 4px;
  border: solid 1px #fff;
  padding: 10px 20px 10px 25px;
}

.modal__content video {
  width: 100%;
}

.block01 figure.k21 {
  margin-top: 20px;
}

.block01 figure.k22 {
  margin-bottom: 10px;
}

.block01 figure.k23 {
  margin-top: 20px;
}

.red.attention {
  font-size: 14px;
  color: #dd2025;
  text-align: center;
}

.disposer h4 {
  text-align: center;
}

.disposer-flex {
  justify-content: space-between;
  flex-wrap: wrap;
}

.disposer-flex li {
  width: calc((100% - 48px) / 5);
  font-size: 15px;
  color: #fff;
  line-height: 1.5;
  text-align: center;
  background: #44574e;
  padding: 22px 0;
}

.tab-only {
  display: none;
}

/*---------------------------
tab
---------------------------*/
@media only screen and (max-width: 1180px) {
  .tab-only {
    display: block;
  }
  .modal__content {
    width: 94%;
  }
}

/*---------------------------
sp
---------------------------*/
@media only screen and (max-width: 820px) {
  .tab-only {
    display: none;
  }
  h4 .f-text {
    font-size: 18px;
  }

  h4 .hitachi {
    width: 115px;
  }

  .modal__content {
    padding: 0 0;
    width: 100%;
  }

  .modal__content video {
    width: 100%;
  }

  .modal__content a {
    top: -55px;
    left: auto;
    right: 0;
    font-size: 50px;
    border: none;
    padding: 0;
    transform: none;
  }

  .k-flex01 .txt {
    width: 100%;
  }

  .k-flex01 div.image {
    width: 100%;
    margin-top: 10px;
  }

  .block01 figure.k14 {
    margin-top: 10px;
  }

  .block01 .plate figure:nth-of-type(1) {
    width: 100%;
  }

  .block01 .plate figure:nth-of-type(2) {
    width: 100%;
  }

  .safety-ttl {
    font-size: 16px;
    padding: 10px 0;
  }

  .safety li:nth-of-type(1), .safety li:nth-of-type(2), .safety li:nth-of-type(3), .safety li:nth-of-type(4) {
    width: 100%;
  }

  .safety li:nth-of-type(5), .safety li:nth-of-type(6), .safety li:nth-of-type(7) {
    width: 100%;
    margin-top: 0;
  }

  .safety li:nth-of-type(n+2) {
    margin-top: 30px;
  }

  .block01 .video-item figure {
    margin-bottom: 0;
  }

  h4 .from {
    width: 103px;
  }

  .disposer-flex li {
    width: 100%;
    padding: 10px 0;
  }

  .disposer-flex li:nth-of-type(n+2) {
    margin-top: 10px;
  }

}