@charset "UTF-8";

/* custom.css */

/* base */
html {
  scroll-padding-top: 70px;
  /*アンカーリンク対策*/
}

body {
  font-family:
    'Noto Sans JP', 'YuGothic', '游ゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', sans-serif;
  line-height: 1.6;
  background-color: #000;
  margin: var(--top-spacing) auto;
  /*アンカーリンク対策*/
}

/* webfont nomal */
@font-face {
    font-family:'Noto Sans JP';
    src: url('../font/NotoSansJP-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* webfont bold */
@font-face {
    font-family:'Noto Sans JP';
    src: url('../font/NotoSansJP-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* webfont en */
@font-face {
    font-family:'Oswald';
    src: url('../font/Oswald-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



a {
  color: #fff;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

a:hover {
  color: #d28a00;
}

header {
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000;
}

/* h1 h2 */
.fnt_en {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
}

h1.title {
  text-align: center;
  color: #fff;
  font-size: 3rem;
  line-height: 0.5;
}

h1.title span {
  font-size: 0.8rem;
}

h1.subtitle {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.1rem;
}

h2.subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: #fff;
}

h2.subtitle span {
  font-size: 0.9rem;
}


/* ローディングアニメーション */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #262222;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.spinner {
  width: 100px;
  height: 100px;
  margin: 50vh auto;
  background-color: #cccccc;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/* ロゴアニメーション */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
  }

  to {
    transform: scale(1);
  }
}

/* ロードでふわっと表示 */
.load-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}

.load-fade.is-show {
  opacity: 1;
  visibility: visible;
}

/* スクロールでふわっと表示 */
.scroll-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}

.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/* .navbar-dark */
.navbar-brand {
  margin-right: 0;
}

.navbar-dark .navbar-toggler {
  border-color: transparent;
}

.navbar-dark .navbar-toggler {
  color: rgba(0, 0, 0, 1);
  border-color: transparent;
}

.ct_bg-dark {
  background-color: #000 !important;
}

/* reserve */
ul.reserve {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
  display: flex;
}

ul.reserve li a {
  text-decoration: none;
  color: #000;
}

ul.reserve li {
  width: 50%;
  font-size: 0.8rem;
  text-align: center;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

ul.reserve li:first-child {
  background-color: #79D83D;
}

ul.reserve li:first-child:hover {
  background-color: #ccfeae;
}

ul.reserve li:nth-child(2) {
  background-color: #FFE764;
}

ul.reserve li:nth-child(2):hover {
  background-color: #fcf5cf;
}

ul.reserve li svg {
  vertical-align: middle;
}

/* video */
.wrap_video {
  position: relative;
  line-height: 0;
}

.wrap_video video {
  width: 100%;
  height: 100%;
}

.wrap_video h1 {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*上下左右中央寄せ*/
  text-align: center;
}

/* leadcopy */
.wrap_leadcopy_cont {
  width: 100%;
  margin: 0;
  position: relative;
}

.wrap_leadcopy_cont::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #262222;
  transform: skewY(7deg);
  z-index: -1;
}

.leadcopy_container {
  color: #fff;
}

.leadcopy_container h1 {
  text-align: center;
  font-size: 27px;
  font-weight: bold;
}

.leadcopy_container h1 span {
  color: #f79209
}

.leadcopy_container p {
  font-size: 14px;
  text-align: center;
}

.leadcopy_container p.close_info {
    color:#f79209;
}/* 終了告知 */

/* NEWS */
.wrap_news {
  color: #fff;
}

.wrap_news .news table {
  background-color: #fff;
}

.wrap_news .news table tr th,
.wrap_news .news table tr td {
  font-size: 0.8rem;
}

.wrap_news .news .news_cont {
  height: 198px;
  overflow: auto;
  border-radius: 0.3rem;
  background-color: #fff;
}

.wrap_news .news .news_cont .news_cont_inner {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.wrap_news .news table tr td .btn-link {
  padding: 0;
  font-size: 0.8rem;
  color: #212529;
  text-align: left;
}

.wrap_news .news table tr td .external-link {
  padding: 0;
  font-size: 0.8rem;
  color: #212529;
  text-align: left;
}


/* SELLING POINT */
.wrap_gallery_cont {
  width: 100%;
  margin: 0;
  padding: 100px 0;
  position: relative;
}

.wrap_gallery_cont::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #262222;
  transform: skewY(7deg);
  z-index: -1;
}

/* carousel/SELLING POINT */
.ct_carousel-caption h2,
.ct_carousel-caption p {
  font-weight: bold;
}

/* youtube/SELLING POINT */
.youtube_aspect-ratio {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube_aspect-ratio iframe {
  width: 100%;
  height: 100%;
}

#menu {
  width: 100%;
  margin: 0;
  position: relative;
  top: 0px;
  overflow: hidden;
}

#menu::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2c2c2c;
  transform: skewY(-7deg) translateY(120px);
  z-index: -1;
}

/* MENU/PRICE */
.wrap_price h1 {
  text-align: center;
  color: #fff;
  line-height: 0.5;
}

.wrap_price .atten {
  text-align: center;
}

.wrap_price .atten span {
  color: #fff;
}

.wrap_price .plan {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: #e5e5e5;
}

.wrap_price .plan h2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}

.wrap_price .plan p {
  text-align: center;
  color: #D02C2C;
}/* 終了告知 */

.wrap_price .plan h2>.skew_line {
  position: relative;
  z-index: 0;
  display: inline-block;
  line-height: 1.2em;
}

.skew_line::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -3px;
  z-index: -1;
  width: calc(100% + 3px);
  height: 0.5em;
  transform: skewX(-12deg);
  background-color: rgba(255, 137, 0, .7);
}

.wrap_price .plan .wrap_reserve_btn {
  text-align: center;
}

.wrap_price .plan .wrap_reserve_btn a.reserve_btn {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  background: #79d83d;
  /* 背景色 */
  color: #000;
  /* 文字色 */
  padding: 16px 40px;
  /* 上下の余白、左右の余白 */
  text-decoration: none;
  /* デフォルトで入るリンクの下線を消す */
  border-radius: 10px;
  /* 角を丸くする */
  transition: .4s;
  border: 3px solid #E3FCD3;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.wrap_price .plan .wrap_reserve_btn a.reserve_btn:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0);
  background: #a4f670;
}

.wrap_menu .header {
  font-size: 1.2rem;
  text-align: center;
  padding: 0.5rem 0 0.5rem 0.75rem;
  background-color: #ccc;
}

.wrap_menu .body {
  padding: 2rem 0.75rem;
}

.wrap_menu .body span {
  font-size: 1.3rem;
  font-weight: bold;
}

.wrap_menu .body em {
  font-style: normal;
  color: #D02C2C;
}

.wrap_menu .body ul {
  list-style-type: none;
  padding-left: 0;
}

.wrap_menu .body ul li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wrap_menu .body ul.menu_example li {
  padding-left: 1em;
  text-indent: -1em;
}


/* 体験内容 */
.wrap_detail h2>small {
  font-size: 0.875rem;
}

.wrap_detail .wrap_contact_btn {
  text-align: center;
}

.wrap_detail .wrap_contact_btn a.contact_btn {
  font-size: 1.4rem;
  display: inline-block;
  background: #FFE764;
  /* 背景色 */
  color: #000;
  /* 文字色 */
  padding: 16px 40px;
  /* 上下の余白、左右の余白 */
  text-decoration: none;
  /* デフォルトで入るリンクの下線を消す */
  border-radius: 10px;
  /* 角を丸くする */
  transition: .4s;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}

.wrap_detail .wrap_contact_btn a.contact_btn:hover {
  background-color: #fcf5cf;
}

/* accordion-button */
.wrap_detail .accordion-button,
.wrap_faq .accordion-button {
  color: #fff;
  background-color: #666;
  border: 1px solid #ccc;
}

.wrap_detail .accordion-button:not(.collapsed),
.wrap_faq .accordion-button:not(.collapsed) {
  color: #fff;
  background-color: #999;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.wrap_detail .wrap_detail .accordion-button:not(.collapsed)::after,
.wrap_faq .wrap_detail .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.wrap_detail .accordion-button:not(.collapsed)::after,
.wrap_faq .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.wrap_detail .accordion-button::after,
.wrap_faq .accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.wrap_detail .accordion-button:focus,
.wrap_faq .accordion-button:focus {
  z-index: 3;
  border-color: #fff;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(92, 92, 92, 0.5);
}

/* 特撮体験 画像切り替え */
.img-fluid_slide {
  display: none;
}

.img-fluid_slide.isShow {
  display: block;
  /* この下は例としてアニメーション入れてみました。不要であれば削除してください。 */
  animation: ExampleAnimation 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes ExampleAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ACCESS */
.wrap_access {
  background-color: rgba(0, 0, 0, 0.8);
}

.wrap_access h1 {
  text-align: center;
  color: #fff;
  font-size: 3rem;
  line-height: 0.5;
}

.wrap_access .access {
  color: #fff;
}

.wrap_access .access .header {
  font-size: 1.2rem;
  text-align: center;
  padding: 0.5rem 0 0.5rem 0.75rem;
  border: 1px solid #fff;
}

.wrap_access .access .body {
  padding: 2rem 0.75rem;
}

.wrap_access .access .body h2 {
  font-size: 1.2rem;
}

/* FAQ */
.wrap_faq_cont {
  background: rgb(2, 0, 36);
  background: linear-gradient(307deg, rgba(2, 0, 36, 1) 0%, rgba(153, 84, 49, 1) 0%, rgba(87, 35, 9, 1) 22%, rgba(0, 0, 0, 1) 100%);
}

.wrap_faq h1 {
  text-align: center;
  color: #fff;
  font-size: 3rem;
  line-height: 0.5;
}

.wrap_faq h1 span {
  font-size: 0.8rem;
}

.wrap_faq .accordion-item .accordion-button {
  padding: 2rem 1.25rem;
}

.wrap_faq .accordion-item a {
  color: #999999;
}

.wrap_faq .accordion-item a:hover {
  color: #d28a00;
}

.wrap_faq .accordion-flush .accordion-item ul li {
  list-style-type: none;
}

/* footer */

footer {
  position: relative;
  padding-top: 3rem;
}

footer .nav-link {
  color: #fff;
  font-size: 0.875rem;
}

footer .nav-link:hover {
  color: #d28a00;
}

footer a:hover svg {
  opacity: 0.8;
}

/* ---------------------------------------
    SP、Tab専用 max-width:767px ここから
---------------------------------------- */
@media(max-width:767px) {

  .sp_none {
    display: none !important;
  }

  main {
    padding-top: 114px;
    /* header隠れ防止 */
  }

  .navbar-nav {
    padding: 1rem 0;
    text-align: center;

  }

  .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    padding-left: 0;
    letter-spacing: 0.2rem;
  }

  .cont_bg {
    padding: 3rem 0 0.5rem 0;
  }

  /* nav */
  .navbar-nav .nav-link {
    padding-left: 2.5rem;
  }

  .navbar {
    padding-bottom: 0;
  }

  /* reserve */
  ul.reserve li {
    width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .wrap_reserve_cont {
    width: 100%;
  }

  /* SELLING POINT */
  .ct_carousel-caption h2 {
    font-size: 1rem;
  }

  .ct_carousel-caption p {
    font-size: 0.8rem;
  }
  
  .wrap_movie_pt {
      padding-top: 3rem;
  }

  /* MENU/PRICE */
  #menu {
    padding: 50px 0 0 0;
  }

  /* Q&A */
  .wrap_faq {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

}

/* ---------------------------------------
    SP、Tab専用 max-width:767px ここまで
---------------------------------------- */


/* -------------------------------
    Tab min-width:576px ここから
-------------------------------- */
@media(min-width:576px) {

  /* NENU/PRICE */
  .wrap_menu>.row {
    border-bottom: 1px solid #c9c9c9;
    align-items: center;
  }

  .wrap_menu {
    margin: 0 auto;
    width: 80%;
  }

  .wrap_menu>.row {
    border-bottom: 1px solid #c9c9c9;
    align-items: center;
  }

  .wrap_menu>.firstchild {
    border-top: 3px solid #c9c9c9;
  }

  .wrap_menu>.lastchild {
    border-bottom: 3px solid #c9c9c9;
  }

  .wrap_menu .header {
    background-color: transparent;
    text-align: left;
  }

  .wrap_menu .body {
    font-size: 1.1rem;
  }

  .wrap_menu .body ul li small {
    font-size: 0.9rem;
  }

  /* detail 体験内容 */
  .wrap_detail_cont .detail_option {
    padding-top: 3rem;
  }

  .wrap_detail_cont .detail_special {
    padding-top: 6rem;
  }

}

/* -------------------------------
    Tab min-width:576px ここまで
-------------------------------- */


/* -------------------------------
    Tab min-width:768px ここから
-------------------------------- */
@media(min-width:768px) {
  .pc_none {
    display: none !important;
  }

  .tab_none {
    display: none;
  }

  .cont_bg {
    padding: 100px 0 50px 0;
  }

  /* video */
  .wrap_video_cont>.container {
    position: relative;
    max-width: 100%;
    background-image: url("../img/bg_fv.png?20220915");
    background-size: 100%, 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: right 35% bottom 35%;
  }

  .wrap_video_cont>.container>.txt_line {
    position: absolute;
    top: 70%;
    left: 0;
    width: 100vw;
    height: 20vh;
    background-image: url("../img/txt_areyou.png");
    background-size: 40%;
    background-repeat: repeat-x;
    background-position: left 0% bottom 35%;
  }

  .wrap_video_cont h1 {
    position: absolute;
    top: 40%;
    left: 1%;
    width: 53.072vw;
    z-index: 997;
  }

  .wrap_video {
    padding-top: 70px;
  }

  .wrap_video>.column_video {
    display: flex;
    justify-content: flex-end;
  }

  .wrap_video>.column_video>.wrap_video_empty {
    width: 37.812%;
  }

  .wrap_video>.column_video>.wrap_video_item {
    width: 62.18%;
    max-width: 100%;
  }

  /* nav */
  .navbar {
    padding-bottom: 0;
    padding-top: 0;
    height: 70px;
  }

  .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 1);
    font-size: 0.9rem;
  }

  .wrap_navbar {
    position: relative;
    /*max-width: 1200px;
  width: calc(100% - 50px);*/
    margin: 0 auto;
  }

  .navbar .ct_nav_container {
    position: relative;
  }

  /* reserve */
  ul.reserve {
    display: block;
  }

  ul.reserve li {
    width: 160px;
    height: 35px;
    padding-top: 0.3rem;
  }

  ul.reserve li a {
    letter-spacing: .05em;
  }

  .wrap_reserve_cont {
    width: 160px;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
  }

  /* leadcopy */
  .leadcopy_container p {
    font-size: 1rem;
  }

  /* NEWS */
  .wrap_news_cont {
    /*background-color: #555;*/
  }

  .wrap_news {
    width: 800px;
  }

  /* SELLING POINT */
  .wrap_gallery {
    width: 800px;
  }

  .ct_carousel-caption p {
    font-size: 1.5rem;
  }

  .ct_carousel-caption h2 {
    font-size: 2.3rem;

  }

  /* MOVIE */
  .wrap_movie {
    width: 800px;
    padding-top: 150px;
  }

  /* MENU/PRICE */
  .wrap_price {
    width: 1200px;
  }

  .wrap_price .plan {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .wrap_price .plan h2 {
    font-size: 1.5rem;
  }

  .wrap_price .plan .wrap_reserve_btn a.reserve_btn {
    font-size: 1.4rem;
  }

  #menu {
    padding: 100px 0 0 0;
  }

  /* DETAIL 体験内容 */
  .wrap_detail {
    margin: 0 auto;
    padding: 0 35px;
    width: 800px;
  }

  /* ACCESS */
  #access {
    position: relative;
    max-width: 100%;
    background-image: url("../img/bg_access.jpg");
    background-size: 100%, 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: top left;
  }

  .wrap_access {
    width: 800px;
  }

  .access>.row {
    border-bottom: 1px solid #c9c9c9;
    align-items: center;
    letter-spacing: 0.07rem;
  }

  .access>.firstchild {
    border-top: 3px solid #ccc;
  }

  .access>.lastchild {
    border-bottom: 3px solid #c9c9c9;
  }

  .access .header {
    background-color: transparent;
    text-align: left;
  }

  .access .body ul li,
  .access .body {
    /*font-size: 1.2rem;*/
    line-height: 1.7;
  }

  .access .body ul li small {
    font-size: 0.9rem;
  }

  .wrap_access .access .header {
    border: none;
    text-align: left;
  }

  /* FAQ */
  .wrap_faq {
    margin: 0 auto;
    padding: 3rem 35px 5rem 35px;
    width: 800px;
  }

  /* footer */
  footer .nav-link {
    font-size: 0.875rem;
  }

}

/* -------------------------------
    Tab min-width:768px ここまで
-------------------------------- */


/* -------------------------------
    PC min-width:962px ここから
-------------------------------- */
@media(min-width:962px) {

  .navbar-dark .navbar-nav .nav-link {
    font-size: 1rem;
  }

}

/* -------------------------------
    PC min-width:962px ここまで
-------------------------------- */


/* -------------------------------
    PC min-width:1200px ここから
-------------------------------- */
@media(min-width:1200px) {

  /* h1 h2 */
  h1.title {
    font-size: 5rem;
  }

  h1.title span {
    font-size: 1.2rem;
  }

  h1.subtitle {
    font-size: 24px;
  }

  h2.subtitle {
    font-size: 1.2rem;
  }

  /* nav */
  ul.reserve {
    display: flex;
  }

  ul.reserve li {
    width: 180px;
    height: 70px;
    padding-top: 1.2rem;
  }

  ul.reserve li a {
    letter-spacing: .05em;
  }

  .wrap_reserve_cont {
    width: 360px;
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
  }

  .tab_none {
    display: inline;
  }

  /* video */
  .wrap_video_cont h1 {
    position: absolute;
    top: 40%;
    left: 5%;
  }

  .wrap_video_cont>.container>.txt_line {
    position: absolute;
    top: 80%;
    left: 0;
    height: 193px;
  }

  /* leadcopy */
  .leadcopy_container h1 {
    font-size: 40px;
  }

  .leadcopy_container p {
    font-size: 16px;
  }

  /* MENU/PRICE */
  .wrap_menu {
    margin: 0 auto;
    width: 800px;
  }

  .wrap_price h1 {
    font-size: 5rem;
    padding-bottom: 1.5rem;
  }

  .wrap_price h1 span {
    font-size: 1.2rem;
  }

}

/* -------------------------------
    PC min-width:1200px ここまで
-------------------------------- */