@charset "utf-8";
@media screen and (max-width: 767px){
    .sp{
      display: block;
    }
    .pc{
      display: none;
    }

    #portrait .title{
        padding-top: 10%;
    }
    #portrait h1{
      padding-top: 20%;
      font-family: "altesse-std-64pt", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    #portrait .scroll{
    margin-top: 32%;
    margin-left: 45%;
    }
    #portrait .scroll p{
    color: #1C8A5E;
    }
    .caption 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: 0;
        margin-top: 0;
      }
      .caption span{
        font-size: min(3vw, 20px);
        font-weight: 400;
        padding-left: 5%;
      }
      #portrait-inner h2::first-letter{
        font-size: clamp(14px, 4.5vw, 20px);
        color: black;
        letter-spacing: -0.1rem;
      }
      #portrait-inner{
        position: relative;
        background-image: url(../images/bg_grid.png);
        padding-top: 10%;
        background-color: #CFD5EB;
      }
      .parent {
        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;
        }
        .caption{ grid-area: 1 / 1 / 2 / 7;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5%;
        margin-top: 0; }
      #portrait-sample .main-thumbnail { grid-area: 2 / 1 / 3 / 7; }
      #portrait-sample .tools  { grid-area: 3 / 1 / 4 / 3; }
      #portrait-sample .material { grid-area: 3 / 3 / 4 / 5; }
      #portrait-sample .empty { grid-area: 3 / 5 / 4 / 7; }
      #portrait-sample .size { grid-area: 4 / 1 / 5 / 2; }
      #portrait-sample .size-cap{ grid-area: 4 / 2 / 5 / 7; }
      #portrait-sample .date{ grid-area: 5 / 1 / 6 / 2; }
      #portrait-sample .date-cap  { grid-area: 5 / 2 / 6 / 7; }
    .size-cap,.date-cap{
        background-color: #959595;
    }
    #portrait-thumbnails ul{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      margin-top: 5%;
    }
    #portrait-thumbnails ul li{
      width: 90%;
      margin-bottom: 5%;
    }
    #portrait-thumbnails ul li img{
      width: 60%;
      margin-left: auto;
      margin-right: auto;
    }
    #minne-review{
      background-color: #FDF1B7;
      width: 90%;
      border-radius: 2rem 0 0 2rem;
      margin-right: 0;
      margin-left: auto;
      margin-bottom:-10%;
      margin-top: 60%;
    }
    #minne-review {
      overflow: hidden; /* 親要素で内容のはみ出しを隠す */
    }
    
    /* #minne-review 内の .splide__track 要素に対して、はみ出しを表示 */
    #minne-review .splide__track {
      overflow: visible; /* 子要素である .splide__track のはみ出しを表示 */
    }
    .review-text{
      width: 100%;
    }
    .review-text img{
      position: relative;
      width: 100%;
    }
    .review-text p{
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      color: #919BBF;
      font-size: min(3vw, 13px);
    }
    #portrait_illust{
      width: 90%;
      margin-left: auto;
      margin-right: auto;
     }
    #portrait_illust img{
      position: absolute;
      left: 0;
      bottom: 20%;
      width: 70%;
      z-index: 0;
    }
    #portrait_illust p{
      position: absolute;
      left: 55%;
      bottom: 24.5%;
      font-size: 2.5vw;
      z-index: 1;
    }
    #minne-sup-01, #minne-sup-02{
      color: #5D5D5D;
     }
     #minne-sup-01{
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      width: 83%;
     padding-top: 8%;
      font-size: min(3vw, 13px);
     }
     #minne-sup-02{
      margin-left: auto;
      margin-right: auto;
      text-align: center;
     margin-top: 1%;
      font-size: min(3vw, 13px);
     }
     #minne-link{  
    display: block;
    background-color: #FDF1B7;
    padding: 2%;
    border-radius: 0.8rem;
    border-style: solid;
    border-color: black;
    border-width: 0.1rem;
    width: 40%;
    text-align: left;
    color: #1C8A5E;
    font-size: min(3vw,30px);
    margin-top: 4%;
    margin-left: auto;
    margin-right: auto;
  }
  #minne-link:hover{
    background-color: #919BBF;
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;

  }
  }