@charset "UTF-8";

@media (min-width: 1231px) {
  #mv::before {
    position: absolute;
    display: block;
    content: "";
    width: 30%;
    height: 35%;
    bottom: 0px;
    right: 20px;
    z-index: 10;
    opacity: 1;
    background-image: url(/common/upload_data/mizumawari-miecojp/image/20251219162857.png);
    background-repeat: no-repeat;
    background-size: 90% auto;
    background-position: center;
  }
}
@media (min-width: 1415px) {
  #mv::before {
    position: absolute;
    display: block;
    content: "";
    width: 30%;
    height: 40%;
    bottom: 0px;
    right: 20px;
    z-index: 10;
    opacity: 1;
    background-image: url(/common/upload_data/mizumawari-miecojp/image/20251219162857.png);
    background-repeat: no-repeat;
    background-size: 90% auto;
    background-position: center;
  }
}
@media (min-width: 1800px) {
  #mv::before {
    position: absolute;
    display: block;
    content: "";
    width: 30%;
    height: 50%;
    bottom: 0px;
    right: 20px;
    z-index: 10;
    opacity: 1;
    background-image: url(/common/upload_data/mizumawari-miecojp/image/20251219162857.png);
    background-repeat: no-repeat;
    background-size: 90% auto;
    background-position: center;
  }
}


/* スマホ用（〜800px） */
@media (max-width: 800px) {
  #mv::before {
    position: absolute;
    display: block;
    content: "";
    width: 80%;          /* スマホは横幅広め */
    height: 40%;
    bottom: 120px;        /* 必要なら調整 */
    left: 50%;
    right: auto;         /* ← PC指定を打ち消す */
    transform: translateX(-50%);
    z-index: 10;
    opacity: 1;
    background-image: url(/common/upload_data/mizumawari-miecojp/image/20251219162857.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}








#mv{
  position: relative;
}

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

  /* 均一ストライプ（1セットを明示的に定義） */
  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)
  );

  /* ここが肝：1周期を“完全に固定” */
  background-size: 4px 4px;

  mix-blend-mode: overlay;
  opacity: 0.55;
}


#mv .mv_text.t_align_center{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;

  transform: translateY(50px); /* ← ここで下げる */
}

#mv .mv_text.t_align_center > div{
  margin-left: auto;
  margin-right: auto;
}


/* スマホ */
@media (max-width: 800px) {
  #mv .mv_text.t_align_center{
    transform: translateY(0px);
  }
}