@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%);
  }
#portrait{
    margin-top: 0;
      }
#portrait .scroll{
    margin-top:30%;
   }
   #portrait .scroll p{
    color: #1C8A5E;
   }
#portrait .scroll img{
    width: 1.5%;
  }
  #portrait .title{
    margin-left: -3%;
  }
  #portrait-sample .caption span{
    font-size: min(1vw,16px);
  }
   #portrait h1{
    width: 100%;
    color: #1C8A5E;
    font-size: min(8vw,146px);
    padding-top: 3%;
    margin-left: -25%;
    font-family: "altesse-std-64pt", sans-serif;
font-weight: 400;
font-style: normal;
   }
   #portrait-inner h2{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(16px, 1.7vw, 32px);
    color: black;
    padding-left: 5%;
    margin-top: -5%;
    padding-top: 5%;
  }
  #portrait-inner h2::first-letter{
    font-size: clamp(16px, 1.7vw, 32px);
    color: black;
    letter-spacing: -0.1rem;
  }
#portrait-inner{
    position: relative;
    background-image: url(../images/bg_grid.png);
    margin-top: -9%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    background-color: #CFD5EB;
    padding-bottom: 0%;
  }
#portrait-sample{
  padding-top: 10%;
  }
#portrait-sample .main-thumbnail{ grid-area: 1 / 1 / 5 / 2; }
#portrait-sample .caption{ grid-area: 1 / 2 / 2 / 8; 
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
margin-top: 0;}
#portrait-sample .tools { grid-area: 2 / 2 / 3 / 4; }
#portrait-sample .material{ grid-area: 2 / 4 / 3 / 6; }
#portrait-sample .empty{ grid-area: 2 / 6 / 3 / 8; }
#portrait-sample .size{ grid-area: 3 / 2 / 4 / 3; }
#portrait-sample .size-cap{ grid-area: 3 / 3 / 4 / 8; }
#portrait-sample .date{ grid-area: 4 / 2 / 5 / 3; }
#portrait-sample .date-cap { grid-area: 4 / 3 / 5 / 8; } 
.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;
  }
  #portrait-thumbnails{
    width: 90%;
    max-width: 1600px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
  }
  #portrait-thumbnails ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-top: -5%;
  }
  #portrait-thumbnails ul li{
    width: 30%;
  }
  #portrait-thumbnails ul li img{
    width: 100%;
  }
  #minne-link{
    display: block;
    background-color: #FDF1B7;
    padding: 2%;
    border-radius: 1rem;
    border-style: solid;
    border-color: black;
    border-width: 0.2rem;
    width: 25%;
    text-align: center;
    color: #1C8A5E;
    font-size: min(1.5vw,24px);
    margin-left: auto;
    margin-right: 5%;
    margin-top: 3%;
  }
  #minne-link:hover{
    background-color: #919BBF;
    transform: translate(2px,2px);
    transition: all 0.3s ease 0s;
  }  
  #minne-review{
    background-color: #FDF1B7;
    width: 85%;
    border-radius: 2rem 0 0 2rem;
    margin-right: 0;
    margin-left: auto;
    max-width: 1600px;
    margin-bottom:-10%;
  }
  /* .splide__track{
      margin-left: auto;
    margin-right: 0;
  } */
  /* #minne-review 要素に対して、オーバーフローを隠す */
#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(1vw, 16px);
  }
 #minne-sup-01, #minne-sup-02{
  color: #5D5D5D;
 }
 #minne-sup-01{
  margin-left: 20%;
  width: 35%;
 padding-top: 8%;
  font-size: min(1vw, 16px);
 }
 #minne-sup-02{
  margin-left: auto;
  margin-right: 0%;
 margin-top: 1%;
  font-size: min(1vw, 16px);
 }
 #portrait_illust{
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
 }
#portrait_illust img{
  position: absolute;
  left: 0;
  bottom: 0%;
  width: 20%;
  z-index: 0;
}
#portrait_illust p{
  position: absolute;
  left: 11%;
  bottom: 13.5%;
  z-index: 1;
}
}