@charset "UTF-8";


.video-background-container {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* はみ出し部分を隠す */
    z-index: 1;    /* コンテンツより後ろ、かつオーバーレイより後ろ */
}

#youtube-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw; /* ビューポート幅に合わせる */
    height: 56.25vw; /* 16:9のアスペクト比 (9 / 16 * 100) */
    min-width: 177.77vh; /* 16:9のアスペクト比 (16 / 9 * 100) */
    min-height: 100vh; /* ビューポート高さに合わせる */
    transform: translate(-50%, -50%); /* 中央に配置 */
    pointer-events: none; /* 動画に対するマウスイベントを無効化 */
}

.video-overlay {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* 半透明の黒 (0.5の部分で透明度を調整) */
    z-index: 2; /* 動画の上、コンテンツの下 */
}

.content-container {
    position: relative; /* z-indexを有効にするため */
    z-index: 3; /* オーバーレイより手前 */
    padding-top: 5rem; /* ヘッダーなどがある場合の調整用 (任意) */
    padding-bottom: 5rem; /* フッターなどがある場合の調整用 (任意) */
    min-height: 100svh;
}

.logo-box {
  position: absolute;
  top:1rem;
  left:0rem;
}

.logo-box img {
  width:10vw;
}

.btnbtn-box {
  position: absolute;
  bottom:0;
  right:0;
}

.btnbtn-box a {
  text-decoration: none;
}

.btnbtn {
  background-color: #fff;
  width:5vw;
  height:5vw;
  color:#000;
  font-size:0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  box-sizing: border-box;
  padding: 0.2vw;
}

.btnbtn img{
  width:2.5vw;
  max-height: 40%;
  margin-bottom: 0.5vw;
}

.btnbtn span {
  display: block;
  font-size: 0.6vw;
  line-height: 1.2;
}


/* スマートフォンなど縦長の画面での調整例 */
@media (orientation: portrait) {
    #youtube-background {
        /* 縦長画面では横幅基準で高さを決める方が安定しやすい場合があります */
        /* 必要に応じて調整してください */
    }
}

@media screen and (max-width:599px) {
  .logo-box img {
  width:30vw;
  }

  .btnbtn {
    height:20vw;
    width:20vw;
  }

  .btnbtn img {
    width:10vw;
    margin-bottom:2vw;
  }

  .btnbtn span {
  display: block;
  font-size: 0.6rem;
  line-height: 1.2;
}
}