@charset "UTF-8";

.closet-box h4,
.sto-box h4,
.other-box h4 {
  margin-bottom: 5px;
}

figure {
  position: relative;
}

.closet-box figure,
.sto-box figure,
.other-box figure {
  margin-bottom: 20px;
}

.closet-box {
  gap: 6%;
}

.closet-box .box-left {
  width: 68%;
}

.closet-box .box-right {
  width: 27%;
}

.sto-box {
  gap: 3.33333333%;
  margin-top: 60px;
}

.sto-box-left {
  width: 36.7%;
}

.sto-box-md {
  width: 21.8%;
  flex-direction: column;
  justify-content: space-between;
}

.sto-box-right {
  width: 34.8%;
}

.other-box {
  gap: 3.33333333%;
  margin-top: 60px;
}

.other-item:nth-child(1) {
  width: 23.3%;
  flex-direction: column;
  justify-content: space-between;
}

.other-item:nth-child(2) {
  width: 22.5%;
}

.other-item:nth-child(3) {
  width: 25%;
}

.other-item:nth-child(4) {
  width: 19.2%;
}

.other-item:nth-child(4) .b-concent h4 {
  letter-spacing: 0;
}

.other-item:nth-child(4) div + div {
  margin-top: 20px;
}

.delete {
  opacity: 0;
}

/*---------------------------
sp
---------------------------*/
@media only screen and (max-width: 820px) {

  .closet-box {
    flex-wrap: wrap;
    gap: 3.33333333%;
  }

  .closet-box .box-left {
    width: 100%;
  }
  
  .closet-box .box-right {
    width: 100%;
  }

  .sto-box {
    flex-wrap: wrap;
    margin-top: 40px;
  }

  .sto-box-left {
    width: 100%;
  }
  
  .sto-box-md {
    width: 100%;
  }
  
  .sto-box-right {
    width: 100%;
  }

  .kasa-tate {
    margin-top: 40px;
  }

  .other-box {
    flex-wrap: wrap;
    margin-top: 40px;
  }

  .sentaku {
    margin-top: 40px;
  }

  .other-item:nth-child(1) {
    width: 100%;
  }
  
  .other-item:nth-child(2) {
    width: 100%;
  }
  
  .other-item:nth-child(3) {
    width: 100%;
  }
  
  .other-item:nth-child(4) {
    width: 100%;
  }

  .delete {
    display: none;
  }

  .other-item:nth-child(4) div + div {
    margin-top: 40px;
  }

}