@charset "UTF-8";



/*///////////////////////////////
	共通パーツ
///////////////////////////////*/

html{
    scroll-padding-top: 150px;
    overflow-x: hidden; /* 横スクロールを防止 */
}

body {
    margin:0px;
	padding:0px;
	color:#fff;
    font-family:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    background-color: #030029;
    text-align: left;
    position:relative;
    overflow-x: hidden; /* 横スクロールを隠す */
}
@media (max-width: 760px) {
    body{
        font-size: 80%; 
    }    
}

.inner { 
    display:block; 
    max-width: 1280px;
    margin: auto;
}
@media (max-width: 760px) {
    .inner{
        padding:0 20px; 
    }    
}

img{
    width: 100%;
}

.hero-header {
  min-height: 100vh; /* Fallback */
  min-height: calc(var(--vh, 1vh) * 100);
}

a{
    text-decoration: none;
    color: #000;
}

.a_click{
    display: block;
}

h1{
    font-size: 18px;
    font-weight: 400;
    margin:5px 0 ;
}

h1 .h1_top{
    padding-bottom:26px;
    display: block;
    line-height: 1.7em;

}

h1 .h1_bottom{
    font-size:65%;
    
}

h2{
    text-align:center;
    margin:5px 0 !important;
    font-size:22px; 
    font-family: "Noto Serif JP", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-bottom: 20px !important;
}
@media (min-width: 760px) {
    h2{
        font-size: 190%;
        margin-bottom: 10px;
    }    
}

h2 span{
    color: #CD9B59;
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid #CD9B59;
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
    margin: auto;
    margin-bottom: 10px;
    letter-spacing: 0em;
}
@media (min-width: 760px) {
    h2 span {
        display: flex;
        align-content: space-between;
        justify-content: center;
        align-items: center;
    }   
}


h2 .h2_bottom{
    font-size: 70%;
    color: #fff;
}


h3{
    font-weight: 400;
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.2em;
    line-height: 1.5em;
    margin-bottom: 60px !important;
}
.oneten h3{
    text-align: left;
    margin-bottom: 6px !important;
}
@media (min-width: 760px) {
    h3{
        font-size: 130%; 
    }    
}


p{
    font-size: 13.5px; 
    font-weight: 300;
    line-height: 2.3em;
    letter-spacing: 0.15em;
}
@media (min-width: 760px) {
    p{
        font-size: 15px; 
        line-height: 2em;
    }    
}

p .worning{
    font-size: 10px;
    font-weight: 100;
    letter-spacing: 0;
}

.pc_vis{
    display:block ;
}
@media (max-width: 760px) {
    .pc_vis{
        display: none;
    } 
    
}

.pc_vis_vis{
    display: inline-block;
}
@media (max-width: 760px) {
    .pc_vis_vis{
        display: none;
    } 
    
}


.sp_vis{
    display: none ;
}
@media (max-width: 760px) {
    .sp_vis{
        display: block;
    } 

}

.sp_vis_vis{
    display: none;
}
@media (max-width: 760px) {
    .sp_vis_vis{
        display: inline-block;
    } 
    
}


.fontBold{
    font-weight: bold;
}

.wrapper{
    margin: auto;
}
@media (min-width: 760px) {
    .wrapper{
    } 

}


.inner{
    padding:0 20px;
}



/*** ページ前動画 ***/

.sp_movie{
    display: none;
}
@media (max-width: 794px) {
   .sp_movie{
        display: block;
    }
   
}


.pc_movie{
    display: block;
}
@media (max-width: 794px) {
   .pc_movie{
        display: none;
    }
   
}

 #video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
}
#intro-video {
        width: 100%;
        height: 100%;
    object-fit: cover!important;
}

.preview{
    background-color: rgb(14, 14, 14);
}

/*///////////////////////////////
	葉っぱ
///////////////////////////////*/

.leaf_cover {
  position: absolute;
  z-index: 19;
      width: 100%;
  height: 100%;
    pointer-events: none; /* これでタップを無効化 */

}

.leaf {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leaf h1 {
  font-size: 5rem;
  color: #8c7851;
}

.leaf li{
  position: absolute;
  list-style: none;
  top: -50px;
  border-radius: 0% 70%;
    width: 100%;
}


@keyframes fall {
  0% {
    top: 0;
    -webkit-transform: translateX(0px); /* Safari用 */
    transform: translateX(0px);
    opacity: 1; 
  }
  98% {
    opacity: 1; 
  }
  100% {
    top: 100%;
    -webkit-transform: translateX(200px); /* Safari用 */
    transform: translateX(200px);
    opacity: 0; 
  }
}

@-webkit-keyframes fall {
  0% {
    top: 0;
    -webkit-transform: translateX(0px); 
    transform: translateX(0px);
    opacity: 1; 
  }
  98% {
    opacity: 1; 
  }
  100% {
    top: 100%;
    -webkit-transform: translateX(200px); 
    transform: translateX(200px);
    opacity: 0; 
  }
}


@keyframes fall2 {
  0% {
    top: 0;
    transform: translateX(0px);
    opacity: 1; /* 開始時は完全に不透明 */
  }
  90% {
    opacity: 1; /* 60%までは不透明を維持 */
  }
  100% {
    top: 100vh;
    transform: translateX(200px);
    opacity: 0; /* 最後に透明になる */
  }
}

@-webkit-keyframes fall2 {
  0% {
    top: 0;
    transform: translateX(0px);
    opacity: 1; /* 開始時は完全に不透明 */
  }
  90% {
    opacity: 1; /* 60%までは不透明を維持 */
  }
  100% {
    top: 100vh;
    transform: translateX(200px);
    opacity: 0; /* 最後に透明になる */
  }
}


@keyframes sway1 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(100px) rotate(-35deg); /* 右への移動距離を増加 */
  }
}

@keyframes sway2 {
  from {
    transform: translateX(100px) rotate(-35deg);
  }
  to {
    transform: translateX(0px) rotate(0deg);
  }
}

.leaf li:nth-child(1){
  left: 0%;
  top: -200px;
  width: 20px;
  height: auto;
  animation: fall 110s linear infinite,
             sway1 3s ease-in-out infinite alternate;
  animation-delay: 17s;
}

.leaf li:nth-child(2){
  left: 5%;
  top: -100px;
  width: 10px;
  height: auto;
  animation: fall2 12s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 28s;
}

.leaf li:nth-child(3){
  left: 15%;
  top: -80px;
  width: 20px;
  height: auto;
  animation: fall2 10s linear infinite,
             sway1 3.5s ease-in-out infinite alternate;
  animation-delay: 1.5s;
}

.leaf li:nth-child(4){
  left: 30%;
  top: -100px;
  width: 15px;
  height: auto;
  animation: fall2 10s linear infinite,
             sway2 4s ease-in-out infinite alternate;
  animation-delay: 4.5s;
}
.leaf li:nth-child(5){
  left: 40%;
  top: -90px;
  width: 16px;
  height: auto;
  animation: fall2 12s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 5.8s;
}
.leaf li:nth-child(6){
  left: 55%;
  top: -80px;
  width: 24px;
  height: auto;
  animation: fall2 15s linear infinite,
             sway2 3s ease-in-out infinite alternate;
  animation-delay: 23s;
}
.leaf li:nth-child(7){
  left: 25%;
  top: -70px;
  width: 24px;
  height: auto;
  animation: fall 120s linear infinite,
             sway2 3.5s ease-in-out infinite alternate;
  animation-delay: 35s;
}
.leaf li:nth-child(8){
  left: 50%;
  top: -90px;
  width: 13px;
  height: auto;
  animation: fall2 18s linear infinite,
             sway1 3s ease-in-out infinite alternate;
  animation-delay: 42s;
}
.leaf li:nth-child(9){
  left: 80%;
  top: -100px;
  width: 21px;
  height: auto;
  animation: fall 130s linear infinite,
             sway2 3s ease-in-out infinite alternate;
  animation-delay: 8s;
}

.leaf li:nth-child(10){
  left: 10%;
  top: -120px;
  width: 24px;
  height: auto;
  animation: fall 140s linear infinite,
             sway1 3.5s ease-in-out infinite alternate;
  animation-delay: 43s;
}

.leaf li:nth-child(11){
  left: 20%;
  top: -130px;
  width: 13px;
  height: auto;
  animation: fall 120s linear infinite,
             sway1 2.5s ease-in-out infinite alternate;
  animation-delay: 32s;
}

.leaf li:nth-child(12){
  left: 35%;
  top: -110px;
  width: 20px;
  height: auto;
  animation: fall 110s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 20s;
}

.leaf li:nth-child(13){
  left: 45%;
  top: -130px;
  width: 26px;
  height: auto;
  animation: fall 120s linear infinite,
             sway2 4.5s ease-in-out infinite alternate;
  animation-delay: 11s;
}
.leaf li:nth-child(14){
  left: 60%;
  top: -120px;
  width: 16px;
  height: auto;
  animation: fall 150s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 19s;
}
.leaf li:nth-child(15){
  left: 75%;
  top: -110px;
  width: 24px;
  height: auto;
  animation: fall 150s linear infinite,
             sway2 4s ease-in-out infinite alternate;
  animation-delay: 0s;
}
.leaf li:nth-child(16){
  left: 65%;
  top: -100px;
  width: 16px;
  height: auto;
  animation: fall 110s linear infinite,
             sway2 4.5s ease-in-out infinite alternate;
  animation-delay: 14s;
}
.leaf li:nth-child(17){
  left: 70%;
  top: -120px;
  width: 23px;
  height: auto;
  animation: fall 110s linear infinite,
             sway1 4s ease-in-out infinite alternate;
  animation-delay: 17s;
}
.leaf li:nth-child(18){
  left: 85%;
  top: -130px;
  width: 16px;
  height: auto;
  animation: fall 140s linear infinite,
             sway2 2s ease-in-out infinite alternate;
  animation-delay: 33s;
}

.leaf li:nth-child(19){
  left: 75%;
  top: -110px;
  width: 14px;
  height: auto;
  animation: fall 110s linear infinite,
             sway2 4s ease-in-out infinite alternate;
  animation-delay: 9s;
}
.leaf li:nth-child(20){
  left: 65%;
  top: -140px;
  width: 16px;
  height: auto;
  animation: fall 110s linear infinite,
             sway2 4.5s ease-in-out infinite alternate;
  animation-delay: 6.5s;
}
.leaf li:nth-child(21){
  left: 70%;
  top: -150px;
  width: 20px;
  height: auto;
  animation: fall 150s linear infinite,
             sway1 4s ease-in-out infinite alternate;
  animation-delay: 11.5s;
}
.leaf li:nth-child(22){
  left: 85%;
  top: -170px;
  width: 16px;
  height: auto;
  animation: fall 110s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 53s;
}


/*///////////////////////////////
	header
///////////////////////////////*/

header{
  
}

.mv{
    position: relative;
    width: 100%;
  min-height: 100vh;
}

.video-background {
    position: fixed; /* 動画を固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -50; /* 背景に配置 */
}

.main_in {
    position: relative;
    z-index: 1; /* コンテンツが動画の上に表示されるように */
}

 /* 背景色を変えるための div */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* 初期は透明 */
    -webkit-backdrop-filter: blur(0px); /* Safari用のぼかし */
    backdrop-filter: blur(0px); /* 他のブラウザ用のぼかし */
    transition: background 0.1s ease, -webkit-backdrop-filter 0.1s ease, backdrop-filter 0.1s ease;
    z-index: -1; /* 背景に配置 */
}


.top_up{
    position: absolute;
    top: 15px;
    left: 15px;
    width: 7%;
}

.top_center{
    position: absolute;
    left: 50%; /* 水平方向にも中央揃えしたい場合 */
    top: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    width: 50%;
}

.top_center div{
    margin: auto;
    width: 65%;
    text-align: center;
    margin-top: -20px;
}


.top_bottom{
    position: absolute;
    bottom: 10px;
    left: 40px;
    width: 40%;
}

.top_left{
    position: absolute;
    left: 40px;
    width: 8.5%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.middle_bottom{
    position: absolute;
    width: 80%;
    bottom: 80px;
    left: 50%; /* 水平方向にも中央揃えしたい場合 */
    transform: translateX(-50%);
    z-index: 20;
}

.middle_bottom img{
    padding: 5px 0;
}

/* モーダルウィンドウのスタイル */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
    
}

/* モーダル内の画像 */
.modal-content {
  margin: auto;
  width: 100%; /* 必要に応じて100%に調整 */
  height: auto; /* アスペクト比を保つ */
    max-width: 286px;
}


/* 閉じるボタン */
.close {
  position: absolute;
  top: 20%;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: 100;
  cursor: pointer;
}

@media (min-width: 760px) {
   .middle_bottom{
        position: absolute;
        width: 23%;
        bottom: 171px;
       left: auto; 
       right: 0;
        transform: none;
    }

    /* モーダルウィンドウのスタイル */
    .modal {
      display: none; 
      position: fixed; 
      z-index: 1000; 
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%; 
      background-color: rgba(0, 0, 0, 0.7);
      align-items: center; /* 縦方向の中央揃え */
      justify-content: center; /* 横方向の中央揃え */

    }
    
    .modal-content-wrapper {
      position: relative;
      display: inline-block;
    }

    /* 閉じるボタン */
    .close {
      position: absolute;
      top: -44px;
        right: -6px;
      color: #fff;
      font-size: 30px;
      font-weight: 200;
      cursor: pointer;
      z-index: 1001;
    }

    /* モーダル内の画像 */
    .modal-content {
      margin: auto;
      width: 100%; /* 必要に応じて100%に調整 */
      height: auto; /* アスペクト比を保つ */
        max-width: 400px;
    }

}

.top_language{
    position: absolute;
    width: 19px;
    right: 70px;
    top: 11px;
}

.top-image-main{
    min-width: 100%;
    min-height: 100vh;
    object-fit: cover;
}

.menu-container {
    position: relative;
    padding: 0.8rem 0;
}

.menu-icon {
    cursor: pointer;
}

.menu {
    position: absolute;
    right: -53px;
    font-size: 10px;
    text-align: center;
    width: 130px;
    background-color: rgba(0,0,0,0.5);
    transition: max-height 0.3s ease; /* トランジションの設定 */
    ax-height: 0; /* 初期状態で非表示 */
    overflow: hidden; /* 内容がはみ出ないようにする */
    z-index: 999;
}

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    padding: 10px;
}

.menu ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
}

.menu ul li:last-child {
    border-bottom: none;
}

.menu.hidden {
    max-height: 0; /* 非表示時 */
}

.menu:not(.hidden) {
    max-height: 500px; /* 最大高さを設定（必要に応じて調整） */
}


@media (max-width: 768px) {
    .top_center{
        margin: auto;
        width: 70%;
    }

    .top_bottom{
        bottom: 185px;
        left: 70%;
        width: 24%;
        
    }
    
    .top_up{
        top: 54px;
        left: 33px;
        width: 10%;
    }

}
@media (min-width: 760px) {
    .top_center{
        width: 40%;
    }
    
    .top_center div{
    }
    
    .top_left{
        width: 3.5%;
    }
    
    .top_up {
        top: 60px;
        left: 40px;
        width: 3.5%;
    }
    
    .top_bottom {
        width: 8%;
    }

}



/*///////////////////////////////
	固定
///////////////////////////////*/

 /*** ナビゲーション ***/
nav{
    padding: 0;
}
    
.navIn{
    display: none;
}  

/* ハンバーガーボタンのデザイン */
.drawer__button{
    position: fixed;
    right: 10px;
    top: 10px;
}

.drawer__button,
.drawer__nav{
    display:block;
}
    
.drawer__button {
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 9999; /* メニューを開いている時もクリックできるよう設定 */
}

/* ハンバーガーボタン内の線 */
.drawer__button > span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.8rem;
    height: 1px;
    background-color:#CD9B59;
    transform: translateX(-50%);
}

.drawer__button > span:first-child {
    transform: translate(-50%, calc(-50% - 0.5rem));
    transition: transform 0.3s ease;
}

.drawer__button > span:nth-child(2) {
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.drawer__button > span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 0.5rem));
    transition: transform 0.3s ease;
}

.drawer__button .menu{
    font-size: 80%;
    background-color: transparent;
    transform: translate(-50%, calc(-50% + 1rem));
    transition: transform 0.3s ease;
    width: 4rem;
    text-align: center;
    color: #0086D1;
}

/* 展開時のデザイン */
.drawer__button.active > span:first-child {
    transform: translate(-50%, -50%) rotate(-45deg);
    background:#CD9B59;
}

.drawer__button.active > span:nth-child(2) {
    opacity: 0;
}

.drawer__button.active > span:nth-child(3){
    transform: translate(-50%, -50%) rotate(45deg);
    background:#CD9B59;
}

/* メニューのデザイン */
.drawer__nav {
    position: fixed; /* 追従ヘッダーなどでも表示できるよう設定しておく */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    transition: opacity 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.drawer__nav.active {
    opacity: 1;
    visibility: visible;
}

.drawer__nav__inner {
    position: relative;
    z-index: 99999;
    width: 50%;
    height: 100%;
    margin: 0 0 0 auto;
    overflow: scroll;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    max-width: 800px;
    background-color: #030029;
    padding-top: 70px;
}

.menu-toggle:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 8px;
    background-image: url("image/toggle.webp");
    background-size: cover;
    background-repeat: no-repeat;
    top: 21px;
    left: 64px;
    transition: transform 0.3s ease-in-out;
}

.menu-container {
    position: relative;
    display: inline-block;
    padding-bottom: 0;
}

.menu-toggle {
    cursor: pointer;
    user-select: none;
}

.menu.hidden_in {
    max-height: 0; /* 初期状態で非表示 */
    overflow: hidden; /* 内容がはみ出ないようにする */
    transition: max-height 0.3s ease-out;
}

.menu_in {
    position: absolute;
    top: 100%;
    left: 0;
    border-radius: 5px;
    max-height: 0; /* 初期状態で非表示 */
    overflow: hidden; /* 内容がはみ出ないようにする */
    transition: max-height 0.3s ease-out;
    width: 200px;
    color: #fff;
}

.menu_in a{
    color: #fff;
}

.menu_in ul{
    padding-left: 0;
}

.menu_in li{
   list-style-type: none;
}

.menu_in:not(.hidden_in) {
    max-height: 300px; /* メニューの高さに応じて調整 */
}

.menu-toggle.active::after {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out; /* 回転のアニメーション */
}

@media (max-width: 760px) {
    .drawer__nav__inner{
        width: 100%;
    }   
}

.drawer__nav.active .drawer__nav__inner {
    transform: translateX(0);
}

.drawer__nav__menu {
    list-style: none;
    padding-left: 2em;
    padding-top: 30px;
}
@media (max-width: 760px) {
    .drawer__nav__menu{
        padding-top: 0px;
    }   
}

.drawer__nav__link {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 0;
    font-weight: 400;
    font-size: 15px;
}
    
.drawer__nav  .header_logo{
    margin: auto
}

.drawer__nav__item{
    background-size: 4%;
    letter-spacing: 0.1em;
}


.drawer__nav__item:hover{
    opacity: 0.3;
}

.drawer__nav__item_last:hover{
    opacity: 1;
}

.drawer__nav__item span{
    font-size: 15px;
}

.item_title{
    font-size: 150%;
    margin-top:30px;
}

.nav_logo{
    width: 140px;
    margin: auto;
}


.sns{
    display: flex;
    position: absolute;
    right: 20px;
    bottom: 30%;
}

.sns div{
    width: 30px;
   
}

.sns div:first-child{
    width: 24px;
    margin-right:13px;
}

.sns div:hover{
    opacity: 0.6;
   
}

.nav_logo_bottom{
    width: 136px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* X方向だけ中央揃えにする */
    bottom: 10%;
}

nav p{
    background: #FFFFFF;
    color:#CD9B59;
    text-align: center;
    margin: 20px 25px;
    padding: 0;
    font-weight: 400;
    font-size: 15px;
    -webkit-transition: all .3s;
    transition: all 1s;
}


nav p a{
    color:#CD9B59;
}


nav p:hover{
    background:#CD9B59;
     color:#fff;
}
nav p a:hover{
     color:#fff;
}

@media (max-width: 760px) {
    .ticket{
    display: flex;
    position: fixed;
    bottom: 0;
    background-color: #CD9B59;
    width: 100%;
    justify-content: center;
    align-items: center;
    -webkit-transition: all .3s;
    transition: all 1s;
    z-index: 20;
    
} 
}

@media (min-width: 760px) {
    .nav_logo{
        width: 40%;
        margin-bottom: 40px;
    }
    
    .drawer__nav__inner {
        padding-top: 40px;
    }
    
    nav p {
        margin: 20px 60px;
        
    }
    
    .drawer__nav__menu {
        padding-top: 10px;
    }
    
    .sns {
        padding-left: 55px;
        padding-top: 20px;
    }
    
    .sns div{
        width: 45px;
        display: flex;
        align-items: center;
    }

    .sns div:first-child{
        width: 40px;
    }
    .nav_logo_bottom {
        width: 30%;

    }
    
}


.ticket:hover{
    background-color: #E8D387;
    cursor: pointer;
    
}

.ticket div{
    width: 100px;
    padding-right: 10px;
    padding-top: 4px;
}

.ticket a{
    color: #fff;
}

.ticket p{
    font-size: 15px;
    font-weight: 400;
    padding-left: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.ticket_sp{
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #CD9B59;
    width: 25%;
    justify-content: center;
    align-items: center;
    -webkit-transition: all .3s;
    transition: all 1s;
    z-index: 20;
    margin-bottom: 40px;
    text-align: center;
    padding-right:20px;
}

.ticket_sp:hover{
    background-color: #E8D387;
    cursor: pointer;
    
}

.ticket_sp div{
    width: 150px;
    margin: auto;
    padding-top:15px;
    padding-bottom: 5px;
}

.ticket_sp a{
    color: #fff;
}

.ticket_sp p{
    font-size: 100%;
    font-weight: 400;
    padding-left: 10px;
    margin-top: 0;
}



/*///////////////////////////////
	main
///////////////////////////////*/

/*** content ***/

.content_top{
    margin: 70px 0;
}

.content_in{
    margin:60px 0;
}
.content_in p{
    margin-top: 15px;
    
}
@media (min-width: 760px) {
    .content_in{
        margin:174px 0;
        display: flex;
    }
    
    .content_in:nth-child(even){
        flex-direction: row-reverse;
    }
    
    .content_top{
        margin: 100px auto;
        margin-top: 150px;
    }
    
    .content_top_flex{
        margin:120px auto;
        display: flex;
        
    }
    
    .flex_left{
        width: 90%;
    }
    
    .flex_right{
        margin-left: 50px;
    }
    
    .content_in:nth-child(even) .flex_right{
        margin-left: 0px;
        margin-right: 50px;
    }
    
    .content_in .rounded-text {
        width: 100px;
        margin: 8px auto;
        padding: 2px 20px;
        border: 1px solid #fff;
        border-radius: 9999px;
        font-size: 10px;
        text-align: center;
    }
    
    .content_in_four h3{
        margin-bottom: 0 !important;
    }
    
    
}

.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2px;
    margin-bottom: 132px;
}

.photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.photo_a{
    grid-row: 1 /3;      /* 行の領域 */
    grid-column: 1 / 2;   /* 列の領域 */
}

.photo_b{
    grid-row:1 / 2;      /* 行の領域 */
    grid-column: 2 /3;   /* 列の領域 */
}

.photo_c{
    grid-row:2 / 3;      /* 行の領域 */
    grid-column:2 / 3;   /* 列の領域 */
}

.photo_d{
    grid-column:1/ 3;   /* 列の領域 */
}

.photo_h{
    grid-column:1/ 2;   /* 列の領域 */
    grid-row:6 / 8;      /* 行の領域 */
}


.photo_i{
    grid-column:2/ 2;   /* 列の領域 */
    grid-row:5/ 8;      /* 行の領域 */
}

.photo_j{
    grid-column:1/ 2;   /* 列の領域 */
    grid-row:8 / 8;      /* 行の領域 */
}


.photo_k{
    grid-column:2/ 3;   /* 列の領域 */
    grid-row:8 / 8;      /* 行の領域 */
}


@media (min-width: 760px) {
    .photo-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .photo_a{
        grid-row: 1 / 3;      /* 行の領域 */
        grid-column: 1 / 3;   /* 列の領域 */
    }

    .photo_b{
        grid-row:1 / 2;      /* 行の領域 */
        grid-column: 3 /4;   /* 列の領域 */
    }

    .photo_c{
        grid-row:2 / 3;      /* 行の領域 */
        grid-column:3 / 4;   /* 列の領域 */
    }
    
    .photo_e{
        grid-column:1/ 3;   /* 列の領域 */
    }

    .photo_d{
        grid-column:1/ 4;   /* 列の領域 */
    }

    .photo_i{
        grid-column: 2 / 4;
        grid-row: 5 / 7;
    }


    .photo_k{
        grid-column:2/ 4;   /* 列の領域 */
        grid-row:7 / 8;      /* 行の領域 */
    }  
    
    .photo_j{
        grid-column:1/ 2;   /* 列の領域 */
        grid-row:7 / 8;      /* 行の領域 */
    }
    
    .pc_grid{
        -webkit-padding-after: 120px;
        padding-block-end: 120px;
        padding-inline:120px;
    }
    
    .content_top{
        padding-inline:15%;
        margin-top: 350px;
        
    }
    

    
}



.oneten{
    margin-top: 100px;
}

.oneten div{
    width: 80px;    
}


.oneten p{ 
    letter-spacing: 0.2em;
}

.oneten a{
    color: #fff;    
}
.oneten a:hover{
    text-decoration: underline;  
}

@media (max-width: 760px) {
    .content_top{
        margin: 80px 0;
        
    }

    .content_in{
        margin:93px 0;
    }
    
    .content_in .rounded-text{
        width: 100px;
        margin:8px auto;
        padding: 2px 20px; /* テキストの周りに余白を追加 */
        border: 1px solid #fff; /* 枠線の太さと色 */
        border-radius: 9999px; /* 角を丸くする半径 */
        font-size: 10px; /* 文字サイズ */
        text-align: center;
        
    }
    
    .content_in_four h3{
        margin-bottom: 5px !important;
    }

    .oneten{
        margin-top:189px;
        margin-bottom: 75px;
    }

    
    .oneten div{
        width: 68px;    
    }
}


/*** detail ***/
#detail{
    text-align: center;
    background-color: #C0CBD0;
    padding: 10px 0 ;
}

#detail p{
    color: #000;
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.7em;
    letter-spacing: 0.1em;
    margin-top: 20px;
}

.detail_in{
    margin: 60px auto;
}
@media (min-width: 760px) {
    .detail_in{
        margin: 100px auto;
    }
    
    #time p{
        display: inline-block;
        margin: auto;
    }
    
    .oneten{
        margin-top: 0px;
        margin: 0px auto;
        display: block;
        padding-inline: 15%;
        margin-bottom: 350px;
    }
    
}


.detail_flex{
    display: flex;
    justify-content: space-between;
}

#detail .detail_flex p{
    font-size: 15px;
    margin-top: 15px;
}

#detail .detail_plan_in{
    margin-top: 0;
    letter-spacing: 0.05em;
}

#detail h4{
    font-weight: 400;
    font-family: "Noto Serif JP", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #000;
    font-size: 17.5px;
    border: 1px solid #000;
    margin: auto;
    margin-bottom: 10px;
    position: relative;
    padding: 2px 0;
}
@media (min-width: 760px) {
    #detail h4{;
        width: 400px;
        margin-bottom: 40px;
    }
    
    .detail_last{
        margin-bottom: 80px;
    }
}

.night h4:after{
    content: '';
    position: absolute;
    width: 20px; /* 画像の幅を指定 */
    height: 20px; /* 画像の高さを指定 */
    background-image: url('image/icon.webp');
    background-size: cover; /* 画像を要素全体にフィットさせる */
    background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
}

.night div{
    margin-top: 30px;
}

@media (max-width: 760px) {
    .night h4:after{
      margin-top: -22px;
      margin-left: 54px;
    }
    

}

@media (min-width: 760px) {
    .night h4:after{
        content: '';
        position: absolute;
        width: 20px; /* 画像の幅を指定 */
        height: 20px; /* 画像の高さを指定 */
        background-image: url('image/icon.webp');
        background-size: cover; /* 画像を要素全体にフィットさせる */
        background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
    }
    .night h4:after{
      margin-top: -22px;
      margin-left: 54px;
    }
    
    .night{
        margin-top: 200px;
    }
    
    .night div {
        max-width: 1200px;
        margin: auto;
    }


}




.detail_plan{
    border-bottom: solid 0.5px #000;
    padding-bottom: 5px;
}

.detail_plan p{
    margin: 2px 0;
    
}

.detail_ticket{
    width: 100%;
    transition: all 1s;
    background-color: #030029;
    font-size: 140%;
    font-weight: 600;
    text-align: center;
}

#detail .detail_ticket p{
    text-align: center !important;
    font-size: 15px;
}

.detail_ticket p a{
    color: #fff;
}

.detail_ticket:hover {
    background-color: #E8D387;
    cursor: pointer;
}

#detail .attention{
    font-size: 12px;
    color: #030029;
    font-weight: 400;
    margin-bottom: 70px;
}

@media (max-width: 760px) {
    #detail h4{

    }

    #detail .night h4{
        margin: 0 20px;
    }

}


/*///////////////////////////////
	footer
///////////////////////////////*/

footer{
}

footer .footer_in{

}

footer .insta{
    max-width: 30px;
    margin: auto;
    margin-top: 80px;
    position: absolute;
    top: 0;
    left: 50%; /* 水平方向にも中央揃えしたい場合 */
    transform: translate(-50%, -50%);
}

.glover{
    max-width: 136px;
    margin: auto;
    margin-top: 65px;
    margin-bottom: 20px;
}

.footer_logo{
    margin: auto;
    max-width: 500px;
    position: relative;
}

.left_zero p{
    font-size: 13px;
    line-height: 1.5em;
}

.left_zero .footer_write{
    font-size: 11px;
    line-height: 1.9em;
}

.copyright{
    text-align: center;
    padding-bottom: 38px;
    background-color: #fff;
}

.copyright p{
    font-size: 12px;
    color: #000;
    padding-top: 6px;
}

.google {
    position: relative;
    padding-bottom: 45%;
    height: 0;
    overflow: hidden;
}
.google iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
}

.contact{
    text-align: center;
    border:solid 0.5px #fff;
    padding: 0px 10px;
    width: 128px;
    margin-bottom: 40px;
    font-family: "Noto Serif JP", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin-top: 30px;
}

.contact a{
    color: #fff;
    display: block;
    font-size: 14px;
}

.contact:hover{
    background-color: #fff;
}

.contact a:hover{
    color: #000;
    
}


.contact a:hover{
    color: #000;
    background-color: #fff;
}


@media (max-width: 760px) {
    .google {
        padding-bottom: 65%;
    }
    
    .detail_plan,
    .detail_ticket{
        max-width: 1200px;
        margin: auto;
    }

}
@media (min-width: 760px) {
    .copyright{
        padding-bottom: 20px;
    }
    
    .footer_write{
        margin: auto;
        display: inline-block;
    }
    
    footer .contact{
        margin: 60px auto;
        padding: 15px 10px;
    }

    footer .footer_in{
    }
    
    .footer_logo {
        margin: auto;
        max-width:100%;
        position: relative;
    }
    
    footer .insta {
        max-width: 40px;
        margin: auto;
        top: 173px;
    }
    
    footer .left_zero {
        text-align: center;
    }
    
    .footer_logo {
      position: relative;
      display: inline-block;
        width: 100%;
    }

    .footer_logo img {
      display: block;
      width: 100%; /* 必要に応じて調整 */
      height: auto; /* 必要に応じて調整 */
    }

    .footer_logo::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 50%; /* グラデーションの高さを調整 */
      background: linear-gradient(to bottom, rgba(3, 0, 34, 0) 70%, rgba(3, 0, 34, 1) 100%);
      pointer-events: none;
    }



}
@media (min-width: 1060px) {
    footer .left_zero{
        padding-left: 0px;
    }

}

@media (max-width: 1060px) {
    .content_in {
        margin: 174px 0;
        display: block;
    }
    .flex_left {
        width: 100%;
    }
    
    .flex_right {
        margin-left: 0px;
    }
}

.videoContainer {
    position: relative; /* 位置指定をする場合 */
    width: 100%; /* 幅を100%に */
    overflow: hidden; /* コンテンツがはみ出さないようにする */
}

.videoContainer img {
    width: 100%; /* サムネイルの幅を100%に */
    height: auto; /* アスペクト比を保つ */
}

.videoContainer iframe {
        position: absolute; /* 親要素の中での位置指定 */
    top: 0; /* 上に揃える */
    left: 0; /* 左に揃える */
    width: 100%; /* 幅を100%に */
    height: 100%; /* 高さを100%に */
    border: none; /* 枠線を消す */

}
.videoContainer.iframe-active {
    padding-bottom: 67.44%; /* アスペクト比43:29を維持 */
}

@media(max-width:750px){
    .videoContainer {
    position: relative; /* 位置指定をする場合 */
    width: 100%; /* 幅を100%に */
    overflow: hidden; /* コンテンツがはみ出さないようにする */
}

    .videoContainer.iframe {
    padding-bottom: 67.39%; /* アスペクト比46:31を維持 */
}

    
.videoContainer img {
    width: 100%; /* サムネイルの幅を100%に */
    height: auto; /* アスペクト比を保つ */
}

.videoContainer iframe {
    position: absolute; /* 親要素の中での位置指定 */
    top: 0; /* 上に揃える */
    left: 0; /* 左に揃える */
    width: 100%; /* 幅を100%に */
    height: 100%; /* 高さを100%に */
    border: none; /* 枠線を消す */
}
}

/*///////////////////////////////
	goods
///////////////////////////////*/
.goods_mv{
    min-height: auto;
}

.goods_body{
    background: #fff;
    color: #000;
}

.goods{
    font-size: 15px;
    width: 532px;
    padding-top:144px;
    padding-bottom:276px;
    margin: auto ;
}

.goods table {
    font-size: 15px;
  border-collapse: collapse;
  text-align: left;
    margin-bottom: 50px;
}

.goods .price {
  padding-left: 30px; /* 値段の部分だけ左に隙間を開ける */
} 

.goods_second{
    margin-bottom: 45px;
}

.goods_top{
    border-bottom: 0.7px solid #000;
    padding-bottom: 23px;
}

.goods_last{
    margin-bottom: 94px;
}
@media(max-width:750px){
    .goods{
        width: auto;
        padding-top:52px ;
        padding-bottom:102px;
    }
    .goods_last{
        margin-bottom:37px;
    }
    .goods_second{
        margin-bottom: 43px;
    }
    .goods table {
        margin-bottom:43px;
    }
    .goods table {
        margin-bottom: 45px;
    }

}