@charset "utf-8";
@media screen and (max-width: 767px){
    .sp{
      display: block;
    }
    .pc{
      display: none;
    }
    #header-logo {
        margin-top: 24%;
    }
    #product h1{
        padding-top: 50%;
        margin: 0;
      }
      #product h2{
        font-size: clamp(14px, 4.5vw, 20px);
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 700;
        font-style: normal;
          color: black;
          margin-left: -5%;
          margin-top: -5%;
        }
        #product h2::first-letter{
          font-size: clamp(14px, 4.5vw, 20px);
          color: black;
          letter-spacing: -0.1rem;
        }
        #product-inner{
          position: relative;
          background-image: url(../images/bg_grid.png);
          padding-top: 10%;
          background-color: #B6B674;
        }
.caption{
    background-color: #D7D78A;
    margin-bottom: 20%;
 } 
 .tools,.tools2{
  background-color: #4374A5;
}
.material{
  background-color: #919BBF;
}
.tools,.tools2,.material{
  height: 45px;
  padding-left: 2px;
  padding-top:5px;
  color: #fff;
  font-size: min(3vw, 16px);
}
.size2,.size-cap2,.size3,.size-cap3,.size4,.size-cap4{
  height: 45px;
  padding-top:5px;
  padding-left: 2px;
  color: #fff;
  font-size: min(3vw, 16px);
}
.size2,.size3,.size4{
  /* height: 50%;
  padding: 0 0 5% 2%; */
  background-color: black;
  color: #fff;
  font-size: min(3vw, 20px);
}
.size-cap2,.size-cap3,.size-cap4{
  /* height: 50%;
  padding: 0 0 5% 2%; */
  background-color: #959595;
  color: #fff;
  font-size: min(3vw, 20px);
}
#doll-childDay .product-name,
#doll-childDay2-sp .product-name-s1,
#doll-childDay2-sp .product-name-s2,
#doll-childDay2-sp .product-name-s3{
background-color: #D7D78A;
height: 45px;
padding-left: 5px;
padding-top:5px;
}
#doll-childDay .product-caption{
  background-color: #D7D78A;
  padding-left: 5px;
  margin-top: -5%;
}
#doll-childDay,#doll-childDay2-sp{
  width: 90%;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* grid-template-rows: repeat(6, 1fr); */
  grid-column-gap: 0px;
  grid-row-gap: 10px;
  padding-bottom: 20%;
  }
  #butterCase{
    width: 90%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    padding-bottom: 20%;
    padding-top: 20%;
  }
  #butterCase-bg{
  background-color: #CFD2C6;
  background-image: url(../images/bg_grid.png);
  }
#doll-childDay .product-name { grid-area: 1 / 1 / 2 / 3; }
#doll-childDay .empty { grid-area: 1 / 3 / 2 / 7; }
#doll-childDay .product-caption { grid-area: 2 / 1 / 3 / 7; }
#doll-childDay .tools { grid-area: 3 / 1 / 4 / 3; }
#doll-childDay .material { grid-area: 3 / 3 / 4 / 5; } 
#doll-childDay .empty { grid-area: 3 / 4 / 4 / 7; }
#doll-childDay .date { grid-area: 4 / 1 / 5 / 2; }
#doll-childDay .date-cap{ grid-area: 4 / 2 / 5 / 7; } 

#doll-childDay2-sp.main-thumbnail { grid-area: 1 / 1 / 2 / 7; }
#doll-childDay2-sp .product-name-s1 { grid-area: 2 / 1 / 3 / 3; }
#doll-childDay2-sp .empty { grid-area: 2 / 3 / 3 / 7; }
#doll-childDay2-sp .size  { grid-area: 3 / 1 / 4 / 2; }
#doll-childDay2-sp .size-cap  { grid-area: 3 / 2 / 4 / 7; }
#doll-childDay2-sp .main-thumbnail-02 { grid-area: 4 / 1 / 5 / 7; }
#doll-childDay2-sp .product-name-s2{ grid-area: 5 / 1 / 6 / 3; }
#doll-childDay2-sp .empty { grid-area: 5 / 3 / 6 / 7; }
#doll-childDay2-sp .size2 { grid-area: 6 / 1 / 7 / 2; }
#doll-childDay2-sp .size-cap2  { grid-area: 6 / 2 / 7 / 7; }
#doll-childDay2-sp .size3{ grid-area: 7 / 1 / 8 / 2; }
#doll-childDay2-sp .size-cap3  { grid-area: 7 / 2 / 8 / 7; }
#doll-childDay2-sp .main-thumbnail-03{ grid-area: 8 / 1 / 9 / 7; }
#doll-childDay2-sp .product-name-s3 { grid-area: 9 / 1 / 10 / 3; }
#doll-childDay2-sp .empty { grid-area: 9 / 3 / 10 / 7; }
#doll-childDay2-sp .size4 { grid-area: 10 / 1 / 11 / 2; }
#doll-childDay2-sp .size-cap4  { grid-area: 10 / 2 / 11 / 7; } 

.main-thumbnail img,
.main-thumbnail-02 img,
.main-thumbnail-03 img{
  width: 80%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.main-thumbnail,
.main-thumbnail-02,
.main-thumbnail-03{
  margin-top: 20%;
}
#butterCase .product-name { grid-area: 1 / 1 / 2 / 4; }
#butterCase .empty { grid-area: 1 / 4 / 2 / 6; }
#butterCase .product-caption  { grid-area: 2 / 1 / 3 / 6; }
#butterCase .product-name-s1 { grid-area: 3 / 1 / 4 / 6;
  text-align: center; 
  margin-bottom: -15%;
  margin-top: 20%;}
#butterCase .main-thumbnail { grid-area: 4 / 1 / 5 / 6; }
#butterCase .product-name-s2 { grid-area: 5 / 1 / 6 / 6; 
  text-align: center;
  margin-bottom: -15%;
  margin-top: 20%;}
#butterCase .main-thumbnail-02 { grid-area: 6 / 1 / 7 / 6; }
#butterCase .tools { grid-area: 7 / 1 / 8 / 3; }
#butterCase .material  { grid-area: 7 / 3 / 8 / 5; }
#butterCase .empty{ grid-area: 7 / 5 / 8 / 6; }
#butterCase .size { grid-area: 8 / 1 / 9 / 2; }
#butterCase .size-cap { grid-area: 8 / 2 / 9 / 6; }
#butterCase .date { grid-area: 9 / 1 / 10 / 2; }
#butterCase .date-cap { grid-area: 9 / 2 / 10 / 6; } 
#butterCase .main-thumbnail img{
  width: 95%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
#butterCase .main-thumbnail-02 img{
  width: 100%;
  max-width: 600px;
}
}