html {
  scrollbar-gutter: stable; /* Firefox用（補助） */
}
* {
      box-sizing: border-box !important;
    }

    .insta_container{
      max-width: 750px !important;
      margin: 0 auto !important;
      padding: 16px !important;
    }
    .insta_grid {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 2px 0 !important; /* 行間2px、列間なし */
    }
    .box1 {
      background: #fef7f4 !important;
      border: 1px solid #9e9087 !important;
      border-radius: 30px !important;
      width: 50% !important;
      position: relative !important;
      overflow: hidden !important;
      cursor: pointer !important;
       height: 600px !important; /* 例：300pxに固定 */
    }
.insta_header {
  display: flex !important;
  align-items: center !important;
padding: 4px 10px 1px 19px !important;
  float: left !important;
}
    .box1-header {
      height: 70px !important;
      display: flex !important;
      align-items: center !important;
      padding: 0 10px !important;
      position: relative !important;
    }
.insta_header .icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
}
.insta_header .aka {
  margin-left: 15px !important;
  font-size: 14px !important;
  font-weight:bold;

}
    .box1 .top-info {
      position: relative !important;
      height: 70px !important;
      padding-left: 50px !important;
    }


    .box1 img.main, .box1 video.main {
      width: calc(100% - 20px) !important;
      margin: 0 10px !important;
      height: auto !important;
      object-fit: cover !important;
    }
    .comment-layer {
      background: rgba(254, 247, 244, 0.9) !important;
      margin: 0 10px 10px !important;
      border-radius: 25px 20px 0 0 !important;
      padding: 0px 8px 8px 13px !important;
      position: relative !important;
            top:-100px !important;
    }
    .comment-layer::before {
      content: url('https://ce-parfait.jp/wls/lp/assets/images/contents/insta/heart_comment_icon.png') !important;
      display: block !important;
      margin-bottom:-7px !important;
    }
    .comment-text {
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 5 !important;
      -webkit-box-orient: vertical !important;
      position: relative !important;
      font-size:0.5em !important;
      letter-spacing:0.05em !important;
      line-height:1.8em !important;
        white-space: normal !important;
  word-break: break-word !important;

    }
    .comment-text::after {
      content: "" !important;
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      height: 1.5em !important;
      width: 100% !important;
      background: linear-gradient(to bottom, rgba(254,247,244,0), #fef7f4) !important;
    }
    .insta_more-button, .insta_close-button {
      background: none !important;
      border: none !important;
      margin: 40px auto !important;
      display: block !important;
      cursor: pointer !important;
    }
    .box2-overlay {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(0,0,0,0.2) !important;
      display: none !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 999 !important;
    }
    .box2-overlay.active {
  display: flex !important;
}

   #mediaContainer{position: inherit !important;
     margin-top: -52px !important;
     z-index:0 !important;
    border-radius: 30px !important;
  overflow: hidden !important;
    }
    .box2 {
      max-width: 600px !important;
      width: 95% !important;
      max-height: 90vh !important;
      background: #fff !important;
      border: 1px solid #9e9087 !important;
      border-radius: 30px !important;
      padding: 17px !important;
      box-shadow: 0 0 10px #e7c9bb !important;
      overflow: hidden !important;
      position: relative !important;
      margin:0 auto !important;
    }
      #box2Aka.aka {
      display: block !important;
        position: relative !important;  /* ← 必須!! */
      z-index: 999 !important;
      top: 18px !important;
      left: 83px !important;
      font-weight:bold;
      }

.box2 .close-x {
      display: flex !important; 
      justify-content: center !important;
      align-items: center !important;
      position: absolute !important;
      top: 39px !important;
      right: 34px !important;
      width: 48px !important;
      height: 48px !important;
      font-size: 40px !important;
      cursor: pointer !important;
      z-index: 1000 !important;
      background-color: transparent !important;
      pointer-events: auto !important; 
      font-weight: 900 !important;
      color: #666 !important;
      font-family: 'Noto Sans JP', sans-serif;
}

        .box2 .icon {
      width: 50px !important;
      height: 50px !important;
      border-radius: 50% !important;
      background-size: cover !important;
      background-position: center !important;
      z-index:9999 !important;
      position: absolute !important;
      margin: 20px !important;

    }


    .box2 img.main, .box2 video.main {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      margin: 0 !important;
    }
    .box2-comment {
      font-size:0.64em !important;
      line-height:1.8em !important;
      overflow-y: auto !important;
      max-height: 200px !important;
      padding:9px !important;
      margin: 10px !important;
      overflow-y: scroll !important;  /* ← 強制して確保 */
      scrollbar-color: #e7c9bb #f7ede8; /* Firefox対応 */
      scrollbar-width: thin; /* Firefox対応 */
      overscroll-behavior: contain;
    }
    .box2-comment::before {
      content: url('https://ce-parfait.jp/wls/lp/assets/images/contents/insta/heart_comment_icon.png') !important;
      display: block !important;
      margin-bottom: 5px !important;
      margin-top: -5px !important;
    }
/* WebKit系ブラウザ用カスタマイズ */
.box2-comment::-webkit-scrollbar {
  width: 8px !important;
}
.box2-comment::-webkit-scrollbar-thumb {
  background: #e1bdac !important;
  border-radius: 4px !important;
}
.box2-comment::-webkit-scrollbar-track {
  background: #f7ede8 !important;
  border-radius: 4px !important;
}
@media (max-width: 750px) {

   #mediaContainer{
   position: relative !important; !important;
  top: -34px !important;
  margin-top: 0 !important;
     z-index:0 !important;
  overflow: hidden !important;
    }
    .box1 {
      background: #fef7f4 !important;
      border: 1px solid #9e9087 !important;
      border-radius:20px !important;
      width: 50% !important;
      position: relative !important;
      overflow: hidden !important;
      cursor: pointer !important;
       height: 370px !important; /* 固定 */
    }
        .insta_container{
      max-width: 750px !important;
      margin: 0 auto !important;
      padding: 0px !important;
    }
      .insta_header {
      display: flex !important;
      align-items: center !important;
      padding: 9px 10px 6px 12px !important;
      float: left !important;
      }
    .insta_header .aka {
      margin-left: 5px !important;
      font-size: 0.8em !important;
      font-weight:bold;

      }
.insta_header .icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
}
    .insta_more-button img, .insta_close-button img{
    width:70% !important;
    margin:15px auto !important;
    }
    .comment-text{
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 5 !important;
      -webkit-box-orient: vertical !important;
      position: relative !important;
      font-size:0.7em !important;
      letter-spacing:0.05em !important;
      white-space: normal !important;
      word-break: break-word !important;
            line-height:1.4em !important;
    }
.comment-text br {
  display: block;
  line-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
        .comment-layer {
      background: rgba(254, 247, 244, 0.9) !important;
      margin: 0 10px 10px !important;
      border-radius: 12px 12px 0 0 !important;
      padding: 15px 0px 8px 3px !important;
      position: relative !important;
      top:-45px !important;
    }
    .comment-layer::before {
      content: url('https://ce-parfait.jp/wls/lp/assets/images/contents/insta/heart_comment_icon2.png') !important;
      display: block !important;
      margin: 0 0 4px 4px !important;
    }
    .box2 {
    max-width: 700px !important;
      width: 95% !important;
      max-height: 95vh !important;
      background: #fff !important;
      border: 1px solid #9e9087 !important;
      padding:24px 17px 5px 17px !important;
      box-shadow: 0 0 10px #e7c9bb !important;
      overflow: hidden !important;
      position: relative !important;
      margin:0 auto !important;
    }
#box2Aka.aka {
    display: block !important;
    position: relative !important;  /* ← 必須!! */
    z-index: 999 !important;
    top: 10px !important;
    left: 60px !important;
    font-weight:bold;
}

.box2 .close-x {
      display: flex !important; 
      justify-content: center !important;
      align-items: center !important;
      position: absolute !important;
      top:26px !important;
      right: 21px !important;
      width: 48px !important;
      height: 48px !important;
      font-size: 2em !important;
      cursor: pointer !important;
      z-index: 1000 !important;
      background-color: transparent !important;
      pointer-events: auto !important; 
      font-weight: 900 !important;
      color: #666 !important;
      font-family: 'Noto Sans JP', sans-serif;
}


    .box2 .icon {
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      background-size: cover !important;
      background-position: center !important;
      z-index:1 !important;      
      position: absolute !important;
      margin:7px auto 10px 13px !important;

    }

    .box2 img.main, .box2 video.main {
      width: 100% !important;
      height: auto !important;
      display: block !important;
    }
    .box2-comment {
      font-size: 14px !important;
      max-height: 200px !important;
      margin-top: -25px !important;
      line-height:2em !important;
    }

      .box2-comment br {
      display: block;
      line-height: 0 !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      }
      
    .box2-comment::before {
      content: url('https://ce-parfait.jp/wls/lp/assets/images/contents/insta/heart_comment_icon.png') !important;
      display: block !important;
      margin-bottom: 0px !important;
    }
    
/* WebKit系ブラウザ用カスタマイズ */
      .box2-comment::-webkit-scrollbar {
      width: 8px !important;
      }
      .box2-comment::-webkit-scrollbar-thumb {
      background: #e1bdac !important;
      border-radius: 4px !important;
      }
      .box2-comment::-webkit-scrollbar-track {
      background: #f7ede8 !important;
      border-radius: 4px !important;
      }
    .box2-comment::after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: 26px;
    width: 8px;
    height: 27%;
    background-color: rgba(247, 237, 232, 0.5);
    border-radius: 4px;
    pointer-events: none;
    z-index: 555;
    }

.fake-scroll-thumb {
  position: absolute;
  right: 2px;
  width: 8px;
  background-color: #e7c9bb;
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}
      .insta_more-button, .insta_close-button {
      background: none !important;
      border: none !important;
      margin: 20px auto !important;
      display: block !important;
      cursor: pointer !important;
    }
  }
    
    
/******もっと見るボタン開閉*****/
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

@keyframes fadeOut {
  from { opacity: 1 }
  to   { opacity: 0 }
}

/**video control**/
video.main::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}

video.main::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

video.main::-webkit-media-controls-start-playback-button {
  display: none !important;
}

video.main {
  object-fit: cover; /* 必要に応じて */
  background-color: transparent !important; /* 黒背景防止 */
}