@charset "utf-8";
@media screen and (min-width: 768px){
    .sp{
      display: none;
    }
    .pc{
      display: block;
    }
    #header-inner{
      margin-top: 2.5%;
    }
    #header-nav{
      /* background-color: #FDF1B7; */
      width: 70%;
      background-color: rgba(253, 241, 183, 0.7);
      background-repeat: no-repeat;
      background-position: 0 90%;
      background-size: 100%;
      padding-bottom: 2%;
      margin-right: 5%;
      border-radius:0 0 1rem 1rem;
      position: absolute;
      top:-40%;
      right: 0;
    transition: transform 1s;
  }
  #header-nav.hidden {
    transform: translateX(250%);
  }
    #product ul{
    padding-top: 5%;
      }
    #product .scroll{
    margin-top:-2%;
   }
   #product h2{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(16px, 1.7vw, 32px);
    color: black;
    margin-left: -5%;
    margin-top: -5%;
    padding-top: 5%;
  }
  #product h2::first-letter{
    font-size: clamp(16px, 1.7vw, 32px);
    color: black;
    letter-spacing: -0.1rem;
  }
  #product-inner{
    position: relative;
    background-image: url(../images/bg_grid.png);
    margin-top: 0%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    background-color: #B6B674;
  }
  #butterCase-bg{
    background-image: url(../images/bg_grid.png);
    margin-top: 0%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    background-color: #CFD2C6;
    padding-top: 5%;
    padding-bottom: 10%;
  }
  #product-inner h3{
    text-align: left;
    padding-top: 20%;
    margin-left: 5%;
    margin-bottom: 5%;
  }
  #product-inner h3 span{
    font-size: min(1vw, 20px);
    font-weight: 400;
  }
  #doll-childDay .product-name  { grid-area: 1 / 1 / 2 / 3; }
  #doll-childDay .empty { grid-area: 1 / 3 / 2 / 6; }
  #doll-childDay .product-caption { grid-area: 2 / 1 / 3 / 6; }
  #doll-childDay .tools { grid-area: 1 / 6 / 2 / 8; }
  #doll-childDay .material { grid-area: 1 / 8 / 2 / 9; }
  #doll-childDay .empty{ grid-area: 1 / 9 / 2 / 10; }
  #doll-childDay .date{ grid-area: 2 / 6 / 3 / 7; }
  #doll-childDay .date-cap{ grid-area: 2 / 7 / 3 / 10; }
  #doll-childDay .main-thumbnail { grid-area: 3 / 1 / 4 / 10; } 
  #doll-childDay .main-thumbnail ul{
    margin-left:auto ;
    margin-right: auto;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  }
    #doll-childDay{
      width: 90%;
    max-width: 1600px;
    padding-top: 10%;
    margin-left: auto;
    margin-right: auto;
      display: grid;
      /* grid-template-rows: repeat(5, 1fr); */
      grid-column-gap: 0;
      grid-row-gap: 10px;
      }
      
    #doll-childDay2{
      width: 90%;
      max-width: 1600px;
      margin-top: 10%;
      margin-left: auto;
      margin-right: auto;
      display: grid;
      grid-column-gap: 0px;
      grid-row-gap: 10px;
      padding-bottom: 20%;
      } 
   
        #doll-childDay2 .product-name-s1 { grid-area: 1 / 1 / 2 / 3; }
        #doll-childDay2 .empty { grid-area: 1 / 3 / 2 / 4; }
        #doll-childDay2 .size { grid-area: 2 / 1 / 3 / 2; }
        #doll-childDay2 .size-cap { grid-area: 2 / 2 / 3 / 4; }
        #doll-childDay2 .empty  { grid-area: 3 / 1 / 4 / 4; }
        #doll-childDay2 .product-name-s2{ grid-area: 1 / 4 / 2 / 6; }
        #doll-childDay2 .empty { grid-area: 3 / 7 / 4 / 10; }
        #doll-childDay2 .size2  { grid-area: 2 / 4 / 3 / 5; }
        #doll-childDay2 .size-cap2 { grid-area: 2 / 5 / 3 / 7; }
        #doll-childDay2 .size3 { grid-area: 3 / 4 / 4 / 5; }
        #doll-childDay2 .size-cap3  { grid-area: 3 / 5 / 4 / 7; }
        #doll-childDay2 .product-name-s3 { grid-area: 1 / 7 / 2 / 9; }
        #doll-childDay2 .empty  { grid-area: 1 / 9 / 2 / 10; }
        #doll-childDay2 .size4  { grid-area: 2 / 7 / 3 / 8; }
        #doll-childDay2 .size-cap4  { grid-area: 2 / 8 / 3 / 10; }
        #doll-childDay2 .empty { grid-area: 3 / 7 / 4 / 10; }

#doll-childDay .main-thumbnail img{
    width: 100%;
    margin-top: 20%;
    margin-bottom: -20%;
    margin-left: auto;
    margin-right: auto;
  }
  .tools,.tools2{
  background-color: #4374A5;
}
.tools,.tools2,.material{
  height: 40px;
  margin-right: 10px;
  padding-left: 5px;
  padding-top:8px;
  color: #fff;
  font-size: min(1.2vw, 20px);
}
.material{
  background-color: #919BBF;
}

#doll-childDay .product-name,#doll-childDay .product-caption,
#doll-childDay2 .product-name-s1,#doll-childDay2 .product-name-s2,#doll-childDay2 .product-name-s3{
background-color: #D7D78A;
}
.size2,.size3,.size4{
  /* height: 50%;
  padding: 0 0 5% 2%; */
  background-color: black;
  color: #fff;
  font-size: min(1.2vw, 20px);
}
.size-cap2,.size-cap3,.size-cap4,.date-cap{
  /* height: 50%;
  padding: 0 0 5% 2%; */
  background-color: #959595;
}
.size2,.size3,.size4,.size-cap2,.size-cap3,.size-cap4,.product-name-s1,.product-name-s2,.product-name-s3{
  height: 40px;
  padding-top:8px;
  padding-left: 5px;
  color: #fff;
  font-size: min(1.2vw, 20px);
}
.product-name-s1,.product-name-s2,.product-name-s3,.size-cap,.size-cap2,.size-cap3,.size-cap4{
  height: 40px;
  margin-right: 20px;
  padding-left: 5px;
  padding-top:8px;
  color: #fff;
  font-size: min(1.2vw, 20px);
}
.product-name,.product-caption{
  padding-left: 5px;
  padding-top:8px;
  margin-right: 20px;
}
.product-name-s1,.product-name-s2,.product-name-s3{
  font-size: min(1.5vw, 24px);
  color: black;
}
.size-cap,.size-cap2,.size-cap3,.size-cap4{
  background-color: #959595;
}
#butterCase {
  width: 90%;
  max-width: 1600px;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 50% repeat(6, 1fr);
  /* grid-template-rows: repeat(5, 1fr); */
  grid-column-gap: 0px;
  grid-row-gap: 10px;
  }
  
  #butterCase .product-name { grid-area: 1 / 1 / 2 / 2; }
  #butterCase .product-caption { grid-area: 2 / 1 / 4 / 2; } 
  #butterCase .tools{ grid-area: 1 / 2 / 2 / 4; }
  #butterCase .material { grid-area: 1 / 4 / 2 / 6; }
  #butterCase .empty { grid-area: 1 / 6 / 2 / 8; }
  #butterCase .size { grid-area: 2 / 2 / 3 / 3; }
  #butterCase .size-cap { grid-area: 2 / 3 / 3 / 8; }
  #butterCase .date { grid-area: 3 / 2 / 4 / 3; }
  #butterCase .date-cap { grid-area: 3 / 3 / 4 / 8; 
    margin-right: 20px;}
  #butterCase .product-name-s1 { grid-area: 4 / 1 / 5 / 2; 
  text-align: center;
  margin-top: 10%;}
  #butterCase .product-name-s2{ grid-area: 4 / 2 / 5 / 8; 
  text-align: center;
  margin-top: 10%;}
  #butterCase .main-thumbnail { grid-area: 5 / 1 / 6 / 8; 
  display: flex;
justify-content: space-between;
width: 90%;
max-width: 1600px;
margin-left: auto;
margin-right: auto;}
#butterCase .main-thumbnail img{
  width: 45%;
}
  
}