@charset "UTF-8";

.style-area{
  padding: 0 35px;
}

.style-area-btn-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.style-btn{
  padding: 15px 0;
  width: calc((100% - 30px) / 2);
  text-align: center;
  color: #d9aacd;
  border: #d9aacd 1px solid;
  cursor: pointer;
}

.style-btn:hover{
  background-color: #d9aacd;
  color: #fff;
}

.semi-long-btn,
.long-btn,
.all-btn{
  margin-top: 20px;
}

.style-area-pic{
  margin-top: 50px;
}

.style-area-pic-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-pic{
  width: calc((100% - 20px) / 2);
  object-fit: contain;
}

.medium,.semi-long,
.long,.all{
  display: none;
}

.all .image-pic{
  margin-top: 20px;
}

/* PCディスプレイ */

@media(min-width:550px){

  .style-area{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
  }
  
  .style-btn{
    width: 45%;
    font-size: 1.2rem;
  }

}