:root {
  --content-width: 74%;
}
.nano {
  width: 100%;
  background-color: #fff;
}
.nano .title {
  font-family: 'Montserrat';
  margin: 0;
  color: #000;
  line-height: 1.3;
  font-size: 2.1875vw;
  font-weight: 100;
  text-transform: uppercase;
}
.nano h2,
.nano h3 {
  font-family: 'Montserrat';
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0;
  margin-bottom: 0.5em;
}
.nano b {
  font-family: 'MontserratBold';
  font-weight: bold;
}
.nano p {
  font-family: 'Montserrat';
  margin: 0;
  color: #000;
  line-height: 1.4;
}
.nano .text-18 {
  font-size: 0.9375vw;
}
.nano .text-20 {
  font-size: 1.04166667vw;
}
.nano .text-26 {
  font-size: 1.35416667vw;
}
.nano .text-30 {
  font-size: 1.5625vw;
}
.nano .flex {
  display: flex;
}
.nano img {
  width: 100%;
}
.nano .content {
  width: var(--content-width);
  margin: 0 auto;
}
.nano-1 {
  width: 100%;
}
.nano-2 {
  padding: 10.41666667vw 0 6.66666667vw;
}
.nano-2 .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.nano-2 .content .nano-2-1 {
  width: 49.5%;
  padding-bottom: 1%;
  position: relative;
}
.nano-2 .content .nano-2-1 img {
  width: 100%;
}
.nano-2 .content .nano-2-1 h3 {
  position: absolute;
  left: 5%;
  top: 10%;
  letter-spacing: 0.05em;
}
.nano-2 .content .nano-2-1-2 h3 {
  color: #fff;
}
.nano-3 {
  position: relative;
}
.nano-3 img {
  width: 100%;
}
.nano-3 .nano-3-1 {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
}
.nano-3 .nano-3-1 h2 {
  color: #fff;
  text-align: center;
}
.nano-3 .nano-3-1 p {
  color: #fff;
  text-align: center;
}
.nano-4 {
  width: 100%;
  padding: 7.8125vw 0 7.8125vw;
  background-color: #f8f5f1;
}
.nano-4 .nano-4-1 {
  display: flex;
  justify-content: space-between;
}
.nano-4 .nano-4-1 .nano-4-1-1 {
  width: 49%;
  padding-bottom: 2%;
}
.nano-4 .nano-4-1 .nano-4-1-1 .nano-4-1-text {
  padding: 5% 8% 10%;
  background-color: #fff;
}
.nano-4 .nano-4-2 {
  position: relative;
}
.nano-4 .nano-4-2 h3 {
  position: absolute;
  left: 55%;
  top: 50%;
  color: #fff;
}
.nano-6 {
  width: 100%;
  padding: 6.25vw 0 6.25vw;
  text-align: center;
}
.nano-6 h2 {
  padding-bottom: 1.2em;
}
.nano-6 img {
  width: 100%;
}
.nano-7 {
  background-color: #f8f5f1;
  width: 100%;
  padding: 6.25vw 0 10.41666667vw;
  text-align: center;
}
.nano-7 h2 {
  padding-bottom: 1.2em;
}
.nano-7 img {
  width: 100%;
}
.nano-8 {
  width: 100%;
  position: relative;
}
.nano-8 img {
  width: 100%;
}
.nano-8 .nano-8-1 {
  position: absolute;
  top: 13%;
  left: 59.375vw;
  text-align: left;
}
.nano-8 .nano-8-1 h2 {
  color: #181818;
}
.nano-8 .nano-8-1 ul {
  color: #181818;
}
.nano-8 .nano-8-1 ul li {
  list-style: none;
  border-bottom: solid 1px #181818;
  padding: 0.8em 0;
}
.nano-8 .nano-8-1 ul .noborder {
  border-bottom: none;
}
.nano-8 .nano-8-1 .nano-8-ul-1 {
  padding-bottom: 3em;
  width: 20em;
  padding-left: 0;
}
.nano-8 .nano-8-1 .nano-8-ul-2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 25em;
}
.nano-8 .nano-8-1 .nano-8-ul-2 li {
  width: 48%;
}
.nano-9 {
  background-color: #f8f5f1;
  width: 100%;
  padding: 5.20833333vw 0 5.72916667vw;
  text-align: center;
}
.nano-9 .content {
  background-color: #fff;
  padding-top: 3%;
  text-align: center;
}
.nano-9 .content h2 {
  padding-bottom: 0.5em;
}
@media (max-width: 767px) {
  :root {
    --content-width: 86%;
  }
  .nano .title {
    font-size: 5.46875vw;
    font-weight: bold;
  }
  .nano .text-18 {
    font-size: 2.34375vw;
  }
  .nano .text-20 {
    font-size: 2.60416667vw;
  }
  .nano .text-26 {
    font-size: 3.125vw;
  }
  .nano .text-30 {
    font-size: 3.90625vw;
  }
  .nano h2,
  .nano h3 {
    margin-bottom: 0.3em;
    letter-spacing: 0;
  }
  .nano-2 .content .nano-2-1 {
    width: 100%;
  }
  .nano-2 .content .nano-2-1 .text-26 {
    font-size: 2.60416667vw;
    top: 1em;
    left: 1em;
    letter-spacing: 0;
  }
  .nano-2 .content .nano-2-1-5 {
    width: 49.5%;
  }
  .nano-2 .content .nano-2-1-5 .nano-2-1-3 {
    padding-bottom: 2%;
  }
  .nano-2 .content .nano-2-1-4 {
    width: 49.5%;
  }
  .nano-4 {
    padding: 0;
  }
  .nano-4 .content {
    width: 100%;
  }
  .nano-4 .text-30 {
    font-size: 5.46875vw;
    font-weight: bold;
  }
  .nano-4 .nano-4-1 {
    flex-wrap: wrap;
  }
  .nano-4 .nano-4-1 .nano-4-1-1 {
    width: 100%;
    position: relative;
    padding-bottom: 0;
  }
  .nano-4 .nano-4-1 .nano-4-1-1 .nano-4-1-text {
    position: absolute;
    background: transparent;
    padding-bottom: 0;
    bottom: 8%;
    width: 100%;
    left: 0;
    text-align: center;
  }
  .nano-4 .nano-4-1 .nano-4-1-2 h3 {
    color: #163a5d;
  }
  .nano-4 .nano-4-1 .nano-4-1-2 p {
    color: #2d2d2d;
  }
  .nano-4 .nano-4-2 h3 {
    width: 100%;
    left: 0;
    top: 10%;
    text-align: center;
  }
  .nano-7 {
    padding-top: 10%;
  }
  .nano-7 h2 {
    padding-bottom: 0.8em;
  }
  .nano-8 .nano-8-1 {
    top: 7%;
    left: 5%;
    width: 92%;
    display: flex;
    justify-content: space-between;
  }
  .nano-8 .nano-8-1 .nano-8-1-1 {
    width: 36%;
  }
  .nano-8 .nano-8-1 .nano-8-1-2 {
    width: 60%;
  }
  .nano-8 .nano-8-1 .nano-8-ul-1 {
    width: 100%;
  }
  .nano-8 .nano-8-1 .nano-8-ul-1 li:last-child {
    border-bottom: none;
  }
  .nano-8 .nano-8-1 .nano-8-ul-2 {
    width: 100%;
  }
  .nano-8 .nano-8-1 h2 {
    text-transform: none;
    letter-spacing: 0;
    font-size: 3.25520833vw;
  }
  .nano-8 .nano-8-1 ul li {
    padding: 0.5em 0;
  }
  .nano-9 {
    background-color: #fff;
  }
}