.main-img {
  width: 100vw;
  /*  max-width: 1200px;*/
  height: 99vh;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  object-position: bottom;
}
/*about==========*/
.about > div {
  margin: 2em 0;
}
.about > div h1 {
  font-size: 130%;
  margin: 3em 0 1em 0;
}
.about p span {
  display: block;
  font-size: 80%;
}
.about ul {
  display: flex;
  flex-flow: row nowrap;
}
.about li {
  width: calc(100%/4);
}
.about li:not(:last-of-type) {
  margin-right: 1em;
}
.about li h2 {
  text-align: center;
  margin: 0.5em 0 0.5em 0;
}
@media screen and (min-width: 769px) {
  .about dl {
    display: none !important;
  }
}
/*salon==========*/
.salon{
  border-top: var(--border);
  border-bottom: var(--border);
  padding: 2em 1em;
}
.salon .btn{
  margin: 2em 0;
}
.salon .btn:hover{
  background-color: #fff;
}
.salon .btn img{
  width: 40%;
  max-width: 200px;
  margin-top: 10px;
}
/*product==========*/
.product ul {
  display: flex;
  flex-flow: row wrap;
  border-bottom: var(--border);
  margin-bottom: 2em;
}
.product li {
  margin-bottom: 2em;
  width: calc(100%/4 - 8px);
}
.product li:not(:nth-of-type(4n)) {
  margin-right: 10px;
}
/*sp==========*/
@media screen and (max-width: 768px) {
  .main-img {
    width: 100vw;
    height: 90vh;
    object-fit: cover;
  }
  /*about==========*/
  .about > div h1 {
    margin: 2em 0 1em 0;
  }
  .about ul {
    display: none;
  }
  /*product==========*/
  .product ul {
    flex-flow: row wrap;
  }
  .product li {
    width: calc(50% - 5px);
  }
  .product li:nth-of-type(2n-1) {
    margin-right: 5px;
  }
  .product li:nth-of-type(2n) {
    margin-right: 5px;
  }
}