@charset "utf-8";
@media screen and (max-width: 767px){
    .sp{
      display: block;
    }
    .pc{
      display: none;
    }
    #illustration h1{
      padding-top: 10%;
    }
    #illustration .scroll{
      margin-top: 30%;
    }
    #illust-inner 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%;
      }
      #illust-inner h2::first-letter{
        font-size: clamp(14px, 4.5vw, 20px);
        color: black;
        letter-spacing: -0.1rem;
      }
      #illust-inner{
        position: relative;
        background-image: url(../images/bg_grid.png);
        padding-top: 10%;
 
      }
      #illust-girl{
        margin-right: 0;
        margin-left: auto;
        width: 90%;
      }
      #illust-inner .caption{
        margin-bottom: 110%;

      }
      #illust-girl img{
      width: 90%;
      position: absolute;
      top: 11%;
      left: 9%;
      }
      #illust-girl p{
        position: absolute;
        top: 12%;
        right: 73%;
        z-index: 1;
      }
      #illust-inner h3{
        width: 90%;
        text-align: left;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 5%;
      }
      #illust-inner h3 span{
        font-size: min(3vw, 20px);
        font-weight: 400;
        padding-left: 5%;
      }
      #illust-inner .caption h2{
        padding-top: 5%;
        margin-left: 2%;
      }
#package-season .tools{ grid-area: 4 / 1 / 5 / 3; }
#package-season .illustrator  { grid-area: 4 / 3 / 5 / 5; }
#package-season.empty { grid-area: 4 / 5 / 5 / 7; }
#package-season .date { grid-area: 5 / 1 / 6 / 2; }
#package-season .date-cap { grid-area: 5 / 2 / 6 / 7; }
#package-season .prepare { grid-area: 6 / 1 / 7 / 7; } 

    #package-season .main-thumbnail{
      display: flex;
      flex-wrap: wrap;
      column-count: 2;
      justify-content: space-between;
    }
  
    #package-season .prepare ul{
      
      display: flex;
      width: 100%;
      /* flex-direction: column; */
    }
    #package-season .prepare img{
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      position: relative;
    }
    #package-season .prepare .talk{
      position: absolute;
      bottom: 29%;
      right: 11%;
      transform: rotate(23deg);
    }
    #package-season .main-thumbnail a{
      width: 48%;
    }
    #package-season .main-thumbnail img{
      width: 100%;
      margin-bottom: 5%;
    }
    /* .tools,.tools2{
      height: 45px;
      margin-right: 10px;
      padding-left: 2px;
      padding-top:5px;
      color: #fff;
      font-size: min(3vw, 16px);
    background-color: #4374A5;
  } */
  #el .main-thumbnail { grid-area: 1 / 1 / 2 / 7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;}
  #el .thumbnail_s { grid-area: 2 / 1 / 3 / 7; }
  #el .thumbnail_ul{ grid-area: 3 / 1 / 4 / 7; }
  #el .product-name { grid-area: 4 / 1 / 5 / 7; }
  #el .product-caption { grid-area: 5 / 1 / 6 / 7; }
  #el .tools { grid-area: 6 / 1 / 7 / 3; }
  #el .tools2 { grid-area: 6 / 3 / 7 / 5; }
  #el .empty { grid-area: 6 / 5 / 7 / 7; }
  #el .date { grid-area: 7 / 1 / 8 / 2; }
  #el .date-cap  { grid-area: 7 / 2 / 8 / 7; } 

  #el .thumbnail_ul ul{
    display: flex;
    justify-content: space-between;
  }
  #el .thumbnail_ul ul img{
    width: 93%;
  }
  #el .main-thumbnail img{
    width: 80%;
    margin-bottom: 5%;
  }
  .thumbnail_s a{
    width: 100%;
    margin-top: -5%;
  }
}