@charset "UTF-8";

html * {
  visibility: hidden;
}
html.wf-active *{
    visibility: visible;
}

.fade-in {
  opacity:0;
  transition: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -webkit-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
  }

.position-r {
  position: relative;
}

body {
  font-family: "Noto Serif JP", serif;
}

video {
  filter: drop-shadow(0 0 0 transparent);
    }

.btn-light {
  background-color:#eee;
  padding:0.5vw 0;
  font-weight:700;
  color:#000;
  font-size:0.7vw;
}

.btn-light-xl {
  font-size:1.1vw;
  padding:1vw 0;
}

.btn-green {
  background-color: #2ab47c;
  color:#fff;
}

h3 {
  font-weight:900;
  font-size:2vw;
  margin-bottom:3rem;
}

h3 span {
  color:#ea5548;
  font-size:2.2vw;
}

.read p {
  line-height:170%;
  margin-bottom:2rem;
}

.nec {
  color:red;
  font-size: 0.6em;
	vertical-align: top;
}


/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
top: 0;
width:100%;
  height: 100vh;
}

/*丸の拡大*/
.circle-bg{
  position: fixed;
z-index:3;
  /*丸の形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ea5548;
  /*丸のスタート位置と形状*/
transform: scale(0);/*scaleをはじめは0に*/
right:-50px;
  bottom:-50px;
  transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
  display: none;/*はじめは表示なし*/
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav-list ul {
  padding-left:0;
  width:80vw;
}

#g-nav.panelactive #g-nav-list{
   display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
opacity: 0;/*はじめは透過0*/
  /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
  opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
text-align: center; 
list-style: none;
}

#g-nav li a{
color: #fff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}


/*========= ボタンのためのCSS ===============*/
.openbtn{
position:fixed;
bottom:0px;
right: 0px;
z-index: 1050;/*ボタンを最前面に*/
cursor: pointer;
  width: 100px;
  height:100px;
  background-color: #e71f1a;
  font-family: "Noto Sans JP", sans-serif;
}

/*×に変化*/	
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 35px;
  height: 4px;
  border-radius: 2px;
  background-color: #fff;
  width: 35%;
}

.openbtn span:nth-of-type(1) {
top:35px;	
}

.openbtn span:nth-of-type(2) {
top:43px;
}

.openbtn span:nth-of-type(3) {
top:51px;
}
.openbtn span:nth-of-type(4) {
top:59px;
color:#fff;
height: 0px;
left:29px;
font-weight:700;
}

.openbtn.active span:nth-of-type(1) {
background-color: #fff;
  top: 35px;
  left: 40px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
background-color: #fff;
  top: 47px;
  left: 40px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

.fix-sidetab {
  position: fixed;
  z-index: 2;
  right: -2px;
  top: 18%;
  width: 40px;
}

.fix-sidetab a {
text-decoration:none;
}

.fix-sidetab a:hover {
opacity:0.6;
transition: opacity .5s;
}

.gold-tab {
  position: relative;
letter-spacing: 0.1rem;
  margin-bottom: 0.3rem;
  padding: 3.5rem 1rem 2rem 0.5rem;
  background-color: #21b9df;
  border-radius: 10px 0 0 10px;
  font-weight: 600;
  font-size: 1rem;
  writing-mode: vertical-rl;
}

a .gold-tab,
a .violet-tab {
color: #fff;
}

.violet-tab {
  position: relative;
letter-spacing: 0.1rem;
margin-bottom: 0.3rem;
padding: 3.5rem 1rem 2rem 0.5rem;
  background-color: #2ab47c;
  border-radius: 10px 0 0 10px;
  writing-mode: vertical-rl;
  font-weight: 600;
  font-size: 1rem;
}

.gold-tab img,
.violet-tab img {
  width:23px;
  position: absolute;
  top:20px;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
opacity:0.65;
}

.btn.disabled.btn-light {
color:#666;
}

a.g-btn {
  position: relative;
}

a.g-btn img {
  width:15px;
  position: absolute;
  right:10px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.g-btn-caption-r {
  color: #f5a200;
  font-weight: 700;
  z-index: 1;
  position: absolute;
  right: 0.5rem;
  top: -0.7rem;
  font-size: 0.8rem;
}

section.contents-title-box {
  background-color:#ea5548;
}

.contents-title-main {
  margin-bottom:5rem;
  color:#fff;
}

.contents-title-main h1 {
font-weight:900;
font-size:3rem;
margin:4rem 0;
}

.contents-title-main ol.breadcrumb li{
  font-size:0.7rem;
  font-weight:700;
  color:#fff;
}

.contents-title-main ol.breadcrumb li a {
  color:#fff;
}

.contents-title-main ol.breadcrumb li a:hover {
  text-decoration:none;
}

.contents-general {
  padding-bottom:15rem;
}

.fv-copy {
  color:#666;
  position: fixed;
  left:0.5rem;
  bottom:0.5rem;
  font-size:0.6rem;
  z-index:99;
  font-family: "Noto Sans JP", sans-serif;
}

.fv-copy a {
  font-weight:200;
  display: block;
  margin-bottom:1rem;
  font-size:0.8rem;
  text-decoration:underline;
  color:#000;
}

.fv-copy a:hover {
  text-decoration:none;
}

.disabled-link {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-item {
  display: block;
  text-align: center;
}

.coming-soon {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6em;
  color: #ff0000;
  padding: 1px 3px;
  border-radius: 2px;
  white-space: nowrap;
}

.aboutus-name {
  font-weight:900;
  margin-bottom:0.7rem;
  font-size:1.5rem;
  text-align:center;
  padding:1rem;
}

.form-label {
  font-size:0.9rem;
}

.app-link {
  border:1px solid #ccc;
  padding:2rem;
  border-radius:20px;
}

.app-link ul {
  margin-top:2rem;
}

.app-link li {
  margin-bottom:1rem;
}

.app-link h4 {
  font-weight:700;
  text-align:center;
}

.schedule-box {
  margin-bottom: 3rem;
  margin-top: -5rem;
  padding: 3rem 0 2rem 0;
  background-color:#f2f2f2;
}
.schedule-con {
  font-weight:900;
  font-size:1.5vw;
  line-height:180%;
}

.schedule-con small {
  font-size:0.8vw;
}

.schedule-con span.sun {
  color:red;
}

.schedule-con span.sat {
  color:blue;
}





.movie-box {
  border-bottom:1px dotted #ccc;
  padding-bottom:3rem;
  margin-bottom:2rem;
}

.movie-title {
  border-bottom:1px solid #ccc;
  font-size:2vw;
  padding-bottom:0.7vw;
  margin-bottom:0.7vw;
}

.movie-time,
.movie-guest {
  font-size:1vw;
}

.movie-guest {
  line-height:150%;
  margin-bottom:1rem;
}

.movie-arasuji {
  font-size:0.9rem;
  line-height:150%;
  font-weight:normal;
}

.movie-spec {
  color:#666;
  margin-top:1vw;
  font-size:0.8rem;
  line-height:140%;
  font-weight:normal;
  margin-bottom:1vw;
}

.movie-copy {
  font-weight:normal;
  font-size:0.8rem;
  color:#999;
}

.message {
  font-weight:700;
  font-size:1.3vw;
  line-height:200%;
}

.message-sub {
  line-height:200%;
  font-weight:700;
  font-size:1vw;
}

.donations-main {
  height:70vh;
  background:url(../img/donations.jpg) no-repeat center center;
  background-size:cover;
}

.donations-main h3 {
  margin-bottom:0;
}

.c-t-height {
  height:30vh;
}

.business-box {
  font-weight:700;
  text-align:center;
  line-height:170%;
  background-color:#f2f2f2;
  border-radius:10px;
  padding:2rem;
  font-size:1.3rem;
}

.notice-list {
  border:1px solid #ccc;
  padding:2rem 2rem 1rem 2rem;
  margin-bottom:1rem;
  font-size:0.9rem;
  line-height:170%;
  border-radius:20px;
}

.kakitomesaki {
  border:1px solid #ccc;
  padding:1rem 2rem 1rem 2rem;
  margin-bottom:1rem;
  font-size:0.9rem;
  line-height:170%;
  border-radius: 20px;
}

.btn-reserve {
  display:inline-block;
  padding:11px 50px;
  line-height:1.4;
  border-radius:4px;
  background-color:#0073d9;
  font-family:Meiryo,'Hiragino Kaku Gothic Pro','MS PGothic';
  font-size:16px;
  text-align:center;
  color:#ffffff;
  text-decoration:none;
}

.btn-reserve-cs {
  display:inline-block;
  padding:11px 50px;
  line-height:1.4;
  border-radius:4px;
  background-color:#0073d9;
  font-family:Meiryo,'Hiragino Kaku Gothic Pro','MS PGothic';
  font-size:16px;
  text-align:center;
  color:#ffffff;
  text-decoration:none;
  opacity: 0.3;
}

.officialwebsite a {
  font-size:1rem;
  font-weight:normal;
  text-decoration:underline;
  color:#ea5548;
}

.officialwebsite a:hover {
  text-decoration:none;
}

.notice {
    background-color:#fff;
    padding:1rem;
    font-weight:normal;
    font-size:0.8rem;
    line-height:170%;
    margin-bottom:1rem;
    border:1px solid #ccc;
  }

  .notice-title {
    color:red;
    font-weight:700;
    margin-bottom:0.7rem;
    font-size:0.9rem;
  }


  /* ナビゲーション全体を画面を覆うオーバーレイにする */
#g-nav {
    /* 画面に固定して全体に広げる */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 背景色（少し透過させると背景が見えて良い） */
    background: rgba(255, 255, 255, 0.95);

    /* Flexboxで中身（ul）を上下左右中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 最初は非表示にしておく */
    opacity: 0;
    visibility: hidden;

    /* フェードイン・アウトのアニメーション設定 */
    transition: opacity 0.3s, visibility 0.3s;
}

/* ボタンが押されてpanelactiveクラスが付いた時 */
#g-nav.panelactive {
    /* 表示させる */
    opacity: 1;
    visibility: visible;
}

/* メニューのリンクのスタイル（例） */
#g-nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

#g-nav ul li a {
    display: block;
    padding: 15px 0;
    font-size: 20px;
    text-decoration: none;
    color: #333;
}




#youtubeModal .modal-dialog {
        max-width: 75vw; /* 幅を75%に変更 */
        width: 75vw;     /* 幅を75%に変更 */
        /* より確実に中央寄せするためのスタイル */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
      }
      #youtubeModal .modal-content {
        background: transparent;
        border: 0;
      }
      #youtubeModal .btn-close {
        position: absolute;
        top: -2.5rem; /* 位置を少し調整 */
        right: 0; /* 位置を調整して見やすくする */
        z-index: 1060;
        filter: invert(1) grayscale(100%) brightness(200%); 
      }


      


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

  .movie-time,
.movie-guest {
  font-size:1rem;
}

  .schedule-con small {
    font-size:0.7rem;
  }

  .movie-title {
    font-size:1.8rem;
    margin-bottom:0rem;
    padding-bottom:1rem;
  }

  .message-sub {
    font-size:1rem;
  }

  h3 span {
    font-size:1.5rem;
  }

  .donations-main {
    height:30vh;
    background:url(../img/donations.jpg) no-repeat center center;
    background-size:cover;
  }

  

  .message {
    font-size:1.2rem;
  }

  .schedule-con {
    font-size:1.3rem;
  }

  .btn-light {
    font-size:0.8rem;
    padding:0.5rem 0;
  }

  .btn-light-xl {
    font-size:1.3rem;
    padding:1rem 0;
  }
  
  .openbtn {
    font-size:0.7rem;
    width:10vw;
    height:10vw;
  }

  .openbtn span:nth-of-type(1) {
    top:30%;
  }

  .openbtn span:nth-of-type(2) {
    top:41%;
  }

  .openbtn span:nth-of-type(3) {
    top:52%;
  }

  .openbtn span:nth-of-type(4) {
    top:63%;
    left:28%;
  }

  .openbtn.active span:nth-of-type(1) {
    top:18px;
    left:26px;
  }

  .openbtn.active span:nth-of-type(3) {
    top:30px;
    left:26px;
  }

  .openbtn span {
    left:35%;
    height:3px;
    width:35%;
  }

  .fix-sidetab {
    left:0rem;
    display: flex;
    margin-bottom: 0;
    right: auto;
    top: auto;
    width: auto;
    bottom: 0;
  }

  .gold-tab {
    text-align:center;
    width:38vw;
    margin:0 0.5rem;
    writing-mode: horizontal-tb;
    border-radius:10px 10px 0 0;
    padding:1rem;
    font-size:2.5vw;
    padding:0.9rem 0.9rem 0.9rem 2.2rem;
  }

  .violet-tab {
    text-align:center;
    width:38vw;
    margin:0rem;
    writing-mode: horizontal-tb;
    border-radius:10px 10px 0 0;
    padding:1rem;
    font-size:2.5vw;
    padding:0.9rem 0.9rem 0.9rem 2.2rem;
  }

  .gold-tab img, .violet-tab img {
    top: 0.7rem;
    left: 0.7rem;
  }

  .contents-title-main h1 {
    font-size:2rem;
  }

  h3 {
    font-size:1.3rem;
    line-height:170%;
  }

  footer {
    margin-bottom:6rem;
  }

  .fv-copy {
    position: fixed;
    left:0.2rem;
    bottom:0.2rem;
  }

  .contents-general {
    padding-bottom:5rem;
  }

  .stripe-section {
    margin:2rem 0;
  }

  .schedule dt {
    border-bottom:1px solid #ccc;
    padding-bottom:1rem;
    margin-bottom:1rem;
  }

  .price dt {
    border-bottom:0px;
    padding-bottom:0rem;
    margin-bottom:0rem;
  }

  .business-box {
    font-size:1.2rem;
  }
}

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

.openbtn {
  width:17vw;
  height:17vw;
}

.contents-title-main h1 {
  font-size:1.5rem;
  line-height:170%;
}

}


.header {
        background-color:#f2f2f2;
        color:#666;
        font-size:0.8rem;
        font-family: "Noto Sans JP", sans-serif;
        font-weight:600;
      }
      .header-con {
        height:80px;
      }

      .fixed-bottom-bar {
      box-sizing: border-box; /* paddingを含めて幅を100%にするため */
      position: fixed; /* 画面に固定 */
      bottom: 0;       /* 画面の一番下に配置 */
      left: 0;
      width: 100%;     /* 幅を100%に */
      display: flex;   /* 中の要素を横並びにする */
      justify-content: flex-end; /* ★変更: 右寄せにする */
      align-items: center; /* 上下中央揃え */
      padding: 0;
      z-index: 1000;   /* 他の要素より手前に表示 */
      gap: 15px; /* ★追加: バナーとボタンの間の隙間 */
    }

    .fixed-banner {
      display: block;
      width: 230px; /* バナーの幅を指定 */
    }

      /* 元々 .openbtn に position: fixed が指定されている場合、それをリセット */
      .fixed-bottom-bar .openbtn {
        position: relative; /* ★変更: 線の崩れを修正するため static から relative へ */
        right:0;
        bottom:0;
      }

      /* 画面幅が小さい場合（スマホなど）の調整 */
      @media screen and (max-width: 480px) {
        .fixed-banner {
          width: 220px; /* スマホではバナーを少し小さくする */
        }
        .fixed-bottom-bar {
          padding: 0; /* 余白を少し詰める */
          gap: 10px; /* ★追加: スマホでは隙間を少し狭くする */
        }
      }
      /* --- 省略 --- */
      /* ↑↑↑ ここまで追加 ↑↑↑ */


      @media screen and (max-width: 768px) {
        .header-con {
        height:60px;
        text-align:right;
        font-size:0.6rem;
      }
      }

      /* 画面幅が991px以下の場合（スマホ・タブレット） */
      @media screen and (max-width: 991px) {
        .fixed-bottom-bar {
          justify-content: space-between; /* ★追加: 両端揃えに変更してバナーを左、メニューを右に配置 */
          padding: 0;
          gap: 0; /* ★追加: 両端揃えにしたのでgapは不要 */
        }
        .fixed-banner {
          width: 215px; /* ★変更: スマホでのバナー幅を調整 */
        }
      }

      .figure-caption {
        font-family: "Noto Sans JP", sans-serif;
        font-size:0.7rem;
        color:#666;
        padding-left:0.5rem;
      }


      /* --- ここからローディング画面のスタイルを追加 --- */

.loading {
  /* 画面全体を覆う設定 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; /* 背景色（サイトの背景色に合わせると良い） */
  z-index: 9999; /* 最前面に表示 */

  /* 中のスピナーを中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 非表示にするときのトランジション設定 */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s, visibility 0.6s;
}

/* ローディング画面を非表示にするためのクラス */
.loading.hide {
  opacity: 0;
  visibility: hidden;
}

/* スピナー（回転する円）のスタイル */
.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3; /* 円の薄い部分の色 */
  border-top: 4px solid #ea5548; /* 円の濃い部分の色（サイトのテーマカラーなどに） */
  border-radius: 50%;
  animation: spin 1s linear infinite; /* 1秒かけて回転し続ける */
}

/* 回転のアニメーション */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- ここまで追加 --- */