@charset "utf-8";
@media screen and (min-width: 768px){
    .sp{
      display: none;
    }
    .pc{
      display: block;
    }
    #header-nav, #fixedIcon {
      transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  #header-nav.hidden, #fixedIcon.hidden {
      transform: translateX(100%);
      opacity: 0;
  }
    #illustration{
      background-position: -10% 0;
    }
    #illustration .scroll{
    margin-top:-17%;
   }
#illustration 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%;
  }
  #illustration h2::first-letter{
    font-size: clamp(16px, 1.7vw, 32px);
    color: black;
    letter-spacing: -0.1rem;
  }
  #illust-inner{
    position: relative;
    background-image: url(../images/bg_grid.png);
    margin-top: 0%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;

  }
  #illust-girl{
    margin-right: 0;
    margin-left: auto;
    width: 30%;
    max-width: 1600px;
  }
  #illust-girl img{
    width: 28%;
    position: absolute;
    top: -3%;
    left: 10%;
  }
  #illust-girl p{
    position: absolute;
    top: -2%;
    left: 12.5%;
    z-index: 1;
  }
  #illust-inner h3{
    text-align: left;
    padding-top: 20%;
    margin-left: 5%;
    margin-bottom: 5%;
  }
  #illust-inner h3 span{
    font-size: min(1vw, 20px);
    font-weight: 400;
  }
  .parent {
    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: 0;
    grid-row-gap: 10px;
    }
  #package-season .main-thumbnail{ grid-area: 1 / 1 / 2 / 8; }
  #package-season .product-name  { grid-area: 2 / 1 / 3 / 2;
  width: 95%; }
  #package-season .product-caption  { grid-area: 3 / 1 / 4 / 2; 
    width: 95%; }
  #package-season .empty{ grid-area: 4 / 1 / 5 / 2; }
  #package-season .tools{ grid-area: 2 / 2 / 3 / 4; 
    margin-left: 10%;}
  #package-season .illustrator { grid-area: 2 / 4 / 3 / 6; }
  #package-season .empty{ grid-area: 2 / 6 / 3 / 8; }
  #package-season .date  { grid-area: 3 / 2 / 4 / 3; 
    margin-left: 20%;}
  #package-season .date-cap { grid-area: 3 / 3 / 4 / 8; }
  #package-season .prepare{ grid-area: 4 / 2 / 5 / 8; 
  margin-top: -15%;} 
  #package-season .main-thumbnail{
    display: flex;
    flex-wrap: wrap;
    column-count: 2;
    justify-content: space-between;
  }

  #package-season .prepare ul{
    
    display: flex;
    width: 100%;
    margin-left: 3%;
    /* flex-direction: column; */
  }
  #package-season .prepare img{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  #package-season .prepare .talk{
    position: absolute;
    bottom: 43%;
    right: 9%;
    transform: rotate(23deg);
  }
  #package-season .main-thumbnail a{
    width: 48%;
  }
  #package-season .main-thumbnail img{
    width: 100%;
    margin-bottom: 5%;
  }
  .tools,.tools2{
  height: 40px;
  margin-right: 10px;
  padding-left: 5px;
  padding-top:8px;
  color: #fff;
  font-size: min(1.2vw, 20px);
  background-color: #4374A5;
}
#el .main-thumbnail { grid-area: 1 / 1 / 2 / 8; 
  display: flex;
  justify-content: space-between;}

#el .thumbnail_s { grid-area: 2 / 1 / 7 / 2; }
#el .thumbnail_ul { grid-area: 2 / 2 / 3 / 8; }
#el .product-name  { grid-area: 3 / 2 / 4 / 8; }
#el .product-caption  { grid-area: 4 / 2 / 5 / 8; }
#el .tools { grid-area: 5 / 2 / 6 / 4; }
#el .tools2 { grid-area: 5 / 4 / 6 / 6; }
#el .empty { grid-area: 5 / 6 / 6 / 8; }
#el .date { grid-area: 6 / 2 / 7 / 3; }
#el .date-cap  { grid-area: 6 / 3 / 7 / 8; }
#el .thumbnail_ul ul{
  display: flex;
  justify-content: space-between;
}
#el .main-thumbnail img{
  width: 95%;
  margin-bottom: 5%;
}
}