@charset "UTF-8";

.fv {
  height:100vh;
}

.event-info-con {
  height:100vh;
}

.swiper-slide {
    position: relative;
    overflow: hidden; /* はみ出した動画を隠す */
  }
  .slide-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* アスペクト比を保ったまま全体をカバー */
  }

.chusen {
  background-color:#6eba44;
  border-radius:20px;
  color:#fff;
  font-weight:700;
  font-size:0.9rem;
  padding:0.2rem 0.7rem;
  text-align:center;
  margin-bottom:1rem;
}

.morenaku {
  background-color:#e71f1a;
  border-radius:20px;
  color:#fff;
  font-weight:700;
  font-size:0.9rem;
  padding:0.2rem 0.7rem;
  text-align:center;
  margin-bottom:1rem;
}



.main-catch {
  font-size:0.7vw;
  line-height:170%;
}

.main-catch h1 {
  font-weight:900;
  font-size:2rem;
  line-height:140%;
  margin-bottom:3rem;
  margin-top:3rem;
}

.main-catch img.logo {
  width:11vw;
}

video.main-video {
  width:100%;
}

.fv-main-row-box,
.fv-main-row {
  height:100%;
}

.fv-mainmain {
  height:auto;
  width:100%;
  overflow: hidden;
}



/*スクロールダウン全体の場所*/
.scrolldown2{
  /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:0px;
  left:50%;
  z-index:999;
  }
  
  /*Scrollテキストの描写*/
  .scrolldown2 span{
  /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
  /*テキストの形状*/
  color: #333;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  }
  
  /* 丸の描写 */
  .scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-4px;
  /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#333;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
  }
  
  /*下からの距離が変化して丸の全体が上から下に動く*/
  @keyframes circlemove{
  0%{bottom:45px;}
  100%{bottom:-5px;}
  }
  
  /*上から下にかけて丸が透過→不透明→透過する*/
  @keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
  }
  
  /* 線の描写 */
  .scrolldown2:after{
  content:"";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
  /*線の形状*/
  width:2px;
  height: 50px;
  background:#333;
  }




  @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

      .scroll_down{
        position:absolute;
        bottom:9vh;
        left:10%;
        animation: arrowmove 1s ease-in-out infinite;
      }

      .scroll_down a{
        position: absolute;
        left: -24px;
        bottom: 30px;
        color: #000;
        font-size: 14px;
        font-family: 'Josefin Sans', sans-serif;
        letter-spacing: .2em;
        text-transform: uppercase;
        width: 24px;
        height: 24px;
        text-decoration: none;
      }

      .text {
        display: block;
        margin-top: 70px;
        margin-left: -14px;
        font-size: 12px;
        color: #000;
        text-transform: uppercase;
        white-space: nowrap;
        letter-spacing: 2px;
      }

      .arrow {
        position: absolute;
        width: 28px;
        height: 3px;
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5);
        animation: move 3s ease-out infinite;
      }

      .arrow:first-child {
        animation: move 3s ease-out 1s infinite;
      }

      .arrow:nth-child(2) {
        animation: move 3s ease-out 2s infinite;
      }

      .arrow:before,
      .arrow:after {
        content: ' ';
        position: absolute;
        top: 0;
        height: 100%;
        width: 51%;
        background: #000;
      }

      .arrow:before {
        left: 0;
        transform: skew(0deg, 30deg);
      }

      .arrow:after {
        right: 0;
        width: 50%;
        transform: skew(0deg, -30deg);
      }

      @keyframes move {
        25% { opacity: 1; }
        33% { opacity: 1; transform: translateY(30px); }
        67% { opacity: 1; transform: translateY(40px); }
        100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
      }




      #trailerModal .modal-content {
        border: none;
        border-radius: 0;
        box-shadow: none;
        background-color: transparent !important; /* 背景色を透明に設定 */
    }
    #trailerModal .modal-dialog {
        max-width: 70vw;
    }

    #trailerModal .modal-header {
        background-color: transparent !important; /* 背景色を透明に設定 */
        border-bottom: none; /* 必要に応じて下部のボーダーも削除 */
    }

    #trailerModal .modal-body {
      padding:0;
    }

    #trailerModal .modal-title {
      font-size:0.9rem;
    }

    .btn-on-trailer {
      height:100px;
      background-color:#21b9df;
      border-radius:0px 20px 0 0;
      color:#fff;
      font-size:1.3rem;
      font-weight:700;
      text-align:center;
      padding:0 2rem;
    }

    .btn-on-trailer-title {
      font-size:0.9rem;
      font-weight:200;
    }


    .fv-mainmain {
      width: 100%;
margin: auto;
  }
  
  .swiper {
    width: 100%;
height: 100%;
  }
  
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background-color: #fff;
  }



  .video-background {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.video-background .ratio {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw; /* ビューポート幅 */
height: 56.25vw; /* アスペクト比16:9 (9/16 * 100) */
transform: translate(-50%, -50%);

/* 黒帯防止のため、必要に応じて拡大 */
min-width: 100%;
min-height: 100%;
z-index: 1; /* 背景として設定 */
pointer-events: none; /* 動画の操作を無効化 */
}

.overlay-content {
position: relative;
z-index: 2; /* 動画より前面に表示 */
color:#000;
text-align: center;
background-color:#fff;
width:10vw;
height:10vw;
left:0;
top:0;
border-radius:0 0 20px 0;
}


/* 黒のオーバーレイ */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
z-index: 2; /* 動画より前面に表示 */
}

/* 中央のコンテンツ（ボタンなど） */

.date {
position: absolute;
top: 0;
left: 0%;
transform: translate(0%, 0);
z-index: 2; /* オーバーレイより前面に表示 */
}

.title {
position: absolute;
top: 0;
right: 0%;
transform: translate(0%, 0);
z-index: 2; /* オーバーレイより前面に表示 */
}

.content {
position: absolute;
bottom: 0;
left: 0%;
transform: translate(0%, 0);
z-index: 2; /* オーバーレイより前面に表示 */
}

.content a{
display: block;
text-decoration:none;
}

.content .btn {
font-size: 1.5rem;
}


.mySwiper {
  height: 100vh; /* ←希望するスライダーの高さに設定 */
}



.fv-main-title h1 {
font-size:2.7vw;
font-weight:200;
}

.fv-main-title h2 {
  font-size:1.2vw;
  margin-top:1.5vw;
  line-height:150%;
}

.fv-main-logo h3 {
  font-size:0.8rem;
  margin-top:2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight:600;
  color:#666;
}

.fv-main-logo-con {
height:50vh;
}

.fv-main-logo-con img {
  width:13vw;
}

.fv-main-banner {
  height:50vh;
  background-color:#f2f2f2;
  position: relative;
}

.fv-main-banner-con {
  position: absolute;top: 30%;
  left: 0%;
  transform: translateY(-30%);
  -webkit-transform: translateY(-30%);
  -ms-transform: translateY(-30%);
}

.fv-main-title h1 a{
  color:#000;
  text-decoration:none;
}

.fv-main-title h1 a:hover {
  text-decoration: none;
}
.fv-main-title h2 a{
  text-decoration:none;
  color:#000;
}

.fv-main-title h2 a:hover{
  text-decoration: none;
}

.fv-main-title h2 img {
  width:130px;
  margin-bottom:0.5rem;
}

.fv-main-title h2 small{
  font-size:0.8vw;
}

.slide001 {
  background-image:url(../img/index/swiper/001.jpg); background-size:cover; background-position: center center;
}
.slide002 {
  background-image:url(../img/index/swiper/002.jpg); background-size:cover; background-position: center center;
}
.slide003 {
  background-image:url(../img/index/swiper/003.jpg); background-size:cover; background-position: center center;
}
.slide004 {
  background-image:url(../img/index/swiper/004.jpg); background-size:cover; background-position: center center;
}
.slide005 {
  background-image:url(../img/index/swiper/005.jpg); background-size:cover; background-position: center center;
}
.slide006 {
  background-image:url(../img/index/swiper/006.jpg); background-size:cover; background-position: center center;
}
.slide007 {
  background-image:url(../img/index/swiper/007.jpg); background-size:cover; background-position: center center;
}
.slide008 {
  background-image:url(../img/index/swiper/008.jpg); background-size:cover; background-position: center center;
}
.slide009 {
  background-image:url(../img/index/swiper/009.jpg); background-size:cover; background-position: center center;
}
.slide010 {
  background-image:url(../img/index/swiper/010.jpg); background-size:cover; background-position: center center;
}
.slide011 {
  background-image:url(../img/index/swiper/011.jpg); background-size:cover; background-position: center center;
}

.event-info h4 {
        font-size:1.6vw;
        line-height:150%;
      }

      .event-info h4 span {
        font-size:1.5rem;
      }

      .event-info dl {
        margin-top:1rem;
        font-family: "Noto Sans JP", sans-serif;
      }

      .event-info dd {
        margin-bottom:0.5rem;
      }

      .nittei span {
        font-size:2rem;
        font-weight:700;
      }

      .btn-outline-danger {
        border-radius: 0;
        font-size:0.8rem;
        font-family: "Noto Sans JP", sans-serif;
      }

      /* --- スクロールダウン(テキスト+矢印) --- */

      /* 全体を囲むコンテナのスタイル */
      .scroll-down-container {
        position: absolute; /* 画面下部へ配置 */
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index:9;
        
        display: flex; /* Flexboxで中の要素を整列 */
        flex-direction: column; /* 縦に並べる */
        align-items: center;  /* 水平方向中央に */
        
        cursor: pointer;
        text-decoration: none; /* aタグのデフォルト下線を消す */
        transition: opacity 0.3s ease-out; /* 消えるときのアニメーション */
      }

      /* "Scroll"テキストのスタイル */
      .scroll-text {
        font-family: "Noto Sans JP", sans-serif;
        color: #e71f1a; /* 文字色 */
        font-size: 12px;
        letter-spacing: 0.1em; /* 文字間隔を少し広げる */
        margin-bottom: 0px; /* テキストと矢印の間隔 */
      }

      /* 矢印のスタイル */
      .scroll-down-arrow {
        width: 20px;
        height: 20px;
        border-left: 2px solid #e71f1a; /* 矢印の色 */
        border-bottom: 2px solid #e71f1a; /* 矢印の色 */
        transform: rotate(-45deg);
      }

      /* コンテナ全体をアニメーションさせる */
      .scroll-down-container {
        animation: bounce 2s infinite;
      }

      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
          transform: translate(-50%, 0);
        }
        40% {
          transform: translate(-50%, -15px);
        }
        60% {
          transform: translate(-50%, -8px);
        }
      }

      /* スクロール後に隠すためのクラス */
      .scroll-down-container.is-hidden {
        opacity: 0;
        visibility: hidden;
      }


@media screen and (max-width: 768px) {

  .event-info-con {
  height:auto;
  margin-bottom:2rem;
}
  .btn-outline-danger {
          font-size:0.7rem;
        }
        .event-info h4 {
        font-size:1.3rem;
        line-height:150%;
      }

      .event-info h4 span {
        font-size:0.8rem;
      }

      .event-info dt {
        margin-bottom:1rem;
      }

      .event-info dl {
        margin-top:1rem;
      }

      .event-info dd {
        padding-left:3rem;
        margin-bottom:3rem !important;
      }

  .slide001 {
  background-image:url(../img/index/swiper/001.jpg); background-size:cover; background-position: center top;
}

  .slide011 {
  background-image:url(../img/index/swiper/011.jpg); background-size:cover; background-position: center top;
}

  .modal-dialog {
    max-width: 100vw;
}
#trailerModal .modal-dialog {
  max-width: 100vw;
}
  .fv-mainmain {
    max-height:40svh;
  }
  .fv-main-row-box,
  .fv-main-row {
    height:auto;
  }

  .main-catch img.logo {
    width:20vw;
  }

  .main-catch h1 {
    line-height: 160%;
    font-size: 0.9rem;
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
  }

  .main-catch {
    font-size:0.8rem;
  }


  .mySwiper {
  height: 40svh; /* ←希望するスライダーの高さに設定 */
}

.fv-main-banner{
  height:25svh;
}
.fv-main-logo-con {
  height:auto;
}

.fv {
  height:100svh;
}

.fv-main-title,
.fv-main-logo-con {
  height:15svh;
}

.fv-main-title h1 {
font-size:1.7rem;
}

.fv-main-title h2 {
  font-size:0.7rem;
  margin-top:1.5vh;
}

.fv-main-title h2 small{
  font-size:0.6rem;
}

.fv-main-logo-con img {
  width:8rem;
}

.fv-main-logo h3 {
  font-size:1.5vh;
  margin-top:1rem;
  margin-bottom:0;
}

.fv-main-title h2 img {
  width:60px;
  margin-bottom:0.1rem;
}
  
}

@media screen and (max-width: 599px) {

  .event-info {
    margin-top:3rem;
  }
.main-catch img.logo {
  width:40vw;
}

.sp-fv-text {
  padding: 0 0 3rem 0;
  font-weight:700;
  font-size:1.1rem;
  line-height:180%;
}

.btn-on-trailer {
  height:40px;
  font-size:0.8rem;
  padding:1.5rem 1rem;
}

.btn-on-trailer-title {
  font-size:0.7rem;
}

.video-background {
  margin-bottom:5rem;
  height: calc((100vw / 16) * 9);
}

.sp-title-box {
  height:50svh;
  width:100%;
}

.index-banner {
  position: absolute;
  bottom:0;
  left:0;
  width:80vw;
  height:30svh;
  background-color:#f2f2f2;
  padding:1rem 0;
}
}