@charset "UTF-8";

#mv::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;

  /* ストライプ模様 */
  background-image: linear-gradient(
    135deg,
    rgba(6,12,32,0.26) 25%,
    rgba(6,12,32,0) 25%,
    rgba(6,12,32,0) 50%,
    rgba(6,12,32,0.22) 50%,
    rgba(6,12,32,0.22) 75%,
    rgba(6,12,32,0) 75%,
    rgba(6,12,32,0)
  );

  /* ストライプの細かさ */
  background-size: 6px 6px;

  mix-blend-mode: overlay;
  opacity: 0.75;
}
/* 親要素を基準位置とする (既に relative が設定されている可能性もありますが、念の為記述します) */
#mv {
  position: relative;
}

#mv::before {
  content: "";
  position: absolute;
  
  /* ▼ 画面中央に配置するための設定 ▼ */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* ▼ レスポンシブ対応のサイズ設定 ▼ */
  /* 画面幅に応じてサイズが変わり、大きくなりすぎたり小さくなりすぎたりするのを防ぎます */
  width: clamp(400px, 50vw, 800px); 
  height: clamp(400px, 50vw, 800px); 
  
  background-image: url('/common/upload_data/kabi-mistcom/image/20260806180341.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  pointer-events: none;
  z-index: 10;
}
@media (max-width: 900px) {
  #mv::before {
    content: "";
    position: absolute;
    
    /* 画面の中央に配置 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* スマホ画面に合わせて幅を調整（はみ出しを防ぐ） */
    width: 80vw;
    
    /* 画像の縦横比に合わせて高さを設定（※実際の画像の縦横比に合わせて数値を変更してください） */
    /* 例として横長画像ルールの「16 / 9」を指定しています */
    aspect-ratio: 16 / 9; 
    
    background-image: url('/common/upload_data/kabi-mistcom/image/20260806180341.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    pointer-events: none;
    z-index: 10;
  }
}