@charset "UTF-8";


.text {
  position: absolute;
  color: #00346C;
}

/* --- 背景 --- */
body {
  background-image: url("../../../images/goods/oridoji/background.png");
  background-position: top center;
  background-repeat: repeat;
/*
  background-attachment: fixed;
  background-color: #FFF1E0;
  background-size: 100%;
*/
}

/* kv */
#frame-kv {
}
.kv {
}

/* 動画 */
#frame-video {
  margin-top: 30px;
  margin-bottom: 30px;
}
.gallery {
  --width-gallery: 100;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--width-gallery) * 1px);
}
/* サムネイル */
.thumbnail {
  --width-thumbnail: 360;

  position: relative;
  width: calc(var(--width-thumbnail) * 1px);
}
.thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.frame-play {
  position: relative; /* 子要素の基準点にする */
  display: grid;
  place-items: center; /* これだけで中身が上下左右中央になります */
  /* 必要に応じて width や height を指定 */
}

.play {
  --width-play: 100;
  --height-play: 100;

   position: absolute;
   top: 50%; 
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(0,0,0,0.6);
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;

   width: calc(var(--width-play) * 1px);
   height: calc(var(--height-play) * 1px);
   font-size: 32px;

}

/* --- 動画モーダル --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 10;
  
  /* 動画を中央配置 */
  display: flex;
  justify-content: center;
  align-items: center; 

  display: none; /* 最初は隠す。位置注意 */

}
.modal-overlay video {
  max-width: 90%;
  max-height: 80vh;
  
  object-fit: contain; 
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
#button-close {
  position: absolute;

  top: 10px;
  right: 30px;

  color: #fff;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 11;

  font-size: 72px;
}

/* ORI NAZO 世界一周 */
#frame-orinazo {
  position: relative;
}
.orinazo {
}
.text-orinazo {
  --offset-text-orinazo: (-20);

  top: 25%;

  text-align: left;
  font-weight: bold;

  left: calc(50% + var(--offset-text-orinazo) * 1px);
  font-size: 24px;
}

/* ドジな勇者は26回脱出する */
#frame-dojiyusha {
  position: relative;
}
.dojiyusha {
}
.text-dojiyusha {
  --offset-text-dojiyusha: (-40);

  top: 16%;

  text-align: left;
  font-weight: bold;

  left: calc(50% + var(--offset-text-dojiyusha) * 1px);
  font-size: 23px;
}
.button-trial {
  --width-button-trial: 618;

  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 17%;
}

/* ショップ */
#frame-shop {
  position: relative;
}
.shop {
}
.button-classic {
  --offset-button-classic: 48;
  --width-button-classic: 402;

  right: calc(50% + var(--offset-button-classic) * 1px);
  top: 19%;
}
.button-hole {
  --offset-button-hole: 50;
  --width-button-hole: 394;

  right: calc(50% + var(--offset-button-hole) * 1px);
  top: 39%;
}
.button-escape {
  --offset-button-escape: 72;
  --width-button-escape: 349;

  right: calc(50% + var(--offset-button-escape) * 1px);
  top: 60%;
}

.logo {
  --width-logo: 245;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 7%;
}

/* 1000x未満 */
@media screen and (max-width: 1000px) {
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-video {
  }
  .gallery {
    gap: calc(var(--width-gallery) / 1000 * 100vw);
  }
  .thumbnail {
    width: calc(var(--width-thumbnail) / 1000 * 100vw);
  }
  .thumbnail video {
  }
  .play {
     width: calc(var(--width-play) / 1000 * 100vw);
     height: calc(var(--height-play) / 1000 * 100vw);
     font-size: 7vw;
  }
  .modal-overlay {
  }
  .modal-overlay video {
  }
  #button-close {
    font-size: 8vw;
  }
  #frame-orinazo {
  }
  .orinazo {
    width: 100vw;
  }
  .text-orinazo {
    left: calc(50% + var(--offset-text-orinazo) / 1000 * 100vw);
    font-size: 2.4vw;
  }
  #frame-dojiyusha {
  }
  .dojiyusha {
    width: 100vw;
  }
  .text-dojiyusha {
    left: calc(50% + var(--offset-text-dojiyusha) / 1000 * 100vw);
    font-size: 2.3vw;
  }
  .button-trial {
    width: calc(var(--width-button-trial) / 1000 * 100vw);
  }
  #frame-shop {
  }
  .shop {
    width: 100vw;
  }
  .button-classic {
    right: calc(50% + var(--offset-button-classic) / 1000 * 100vw);
    width: calc(var(--width-button-classic) / 1000 * 100vw);
  }
  .button-hole {
    right: calc(50% + var(--offset-button-hole) / 1000 * 100vw);
    width: calc(var(--width-button-hole) / 1000 * 100vw);
  }
  .button-escape {
    right: calc(50% + var(--offset-button-escape) / 1000 * 100vw);
    width: calc(var(--width-button-escape) / 1000 * 100vw);
  }
  .logo {
    width: calc(var(--width-logo) / 1000 * 100vw);
  }
}