@charset "UTF-8";
/*
Theme Name: Now And Then
Theme URI: https://lookat.co.jp
Author: Look At Inc.
Author URI: https://lookat.co.jp
Description: There will be an answer, let it be.
Version: 1.0.0
License: GNU General Public License v2 or later
*/

@import url("style-root.css");
@import url("style-nwmaster.css"); 
@import url("nightwave.css"); 

/* レスカードの文字数制限撤廃 */
.responsive-card .text-box p {display: block;}

/* タイトルエリア */
.title-area { background-position: bottom right;}


/*========= ふわ ===============*/
/*======================
アニメーション
======================*/
/* 場所はそのままでフェードイン */
.fade_in {
  opacity: 0;
  transition: all 1.5s ease;
  transition-delay: 1.0s;
}
.fade_iin {
  opacity: 0;
  transition: all 1.5s ease;
  transition-delay: 2.0s;
}
.fade_iiin {
  opacity: 0;
  transition: all 1.5s ease;
  transition-delay: 3.0s;
}
.fade_iiiin {
  opacity: 0;
  transition: all 1.5s ease;
  transition-delay: 4.0s;
}
.fade_iiiiin {
  opacity: 0;
  transition: all 1.5s ease;
  transition-delay: 5.0s;
}

.fade_in.scrollin,
.fade_iin.scrollin,
.fade_iiin.scrollin,
.fade_iiiin.scrollin,
.fade_iiiiin.scrollin {
  opacity: 1;
}

/* 時間差フェード */
.fuwa {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1.5s ease;
  transition-delay: 0.4s;
}

.ffuwa {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1.5s ease;
  transition-delay: 0.8s;
}

.fffuwa {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1.5s ease;
  transition-delay: 1.2s;
}

.fade04 {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1.5s ease;
  transition-delay: 1.6s;
}

.fade05 {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1.5s ease;
  transition-delay: 2.0s;
}

.fade06 {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1.5s ease;
  transition-delay: 2.4s;
}

@media screen and (max-width: 640px) {
  .fuwa,
  .ffuwa,
  .fffuwa,
  .fade04,
  .fade05,
  .fade06 {
	transition: all 1.5s ease;
	transition-delay: 0.4s;
  }
}

.fuwa.scrollin,
.ffuwa.scrollin,
.fffuwa.scrollin,
.fade04.scrollin,
.fade05.scrollin,
.fade06.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/* 右から出現 */
.fade_right {
  opacity: 0;
  transform: translate(20px, 0);
  transition: all 1.4s ease;
  transition-delay: 0.4s;
}

.fade_right.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/* 左から出現 */
.fade_left {
  opacity: 0;
  transform: translate(-20px, 0);
  transition: all 1.4s ease;
  transition-delay: 0.4s;
}

.fade_left.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}


/* hero画像 */
#hero {padding:0;}
#hero2 {padding:0;}

#hero2026 {
    background: linear-gradient(339deg, #311558, #1e3a7e, #2a6287, #0e0c36, #421676, #211e54);
    background-size: 1200% 1200%;
  
      -webkit-animation: AnimationName 30s ease infinite;
      -moz-animation: AnimationName 30s ease infinite;
      animation: AnimationName 30s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:24% 0%}
    50%{background-position:77% 100%}
    100%{background-position:24% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:24% 0%}
    50%{background-position:77% 100%}
    100%{background-position:24% 0%}
}
@keyframes AnimationName {
    0%{background-position:24% 0%}
    50%{background-position:77% 100%}
    100%{background-position:24% 0%}
}


#hero-images {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  padding:0;
}
#hero-images > * {grid-row: 1/-1;grid-column: 1/-1;}
.hero-bg {z-index: 1;}
.hero-charab {z-index: 2;}
.hero-charaa {z-index: 3;}
.hero-logoa {z-index: 5;}
.hero-logob {z-index: 4;}
.hero-rally {z-index: 4;}
.hero-makimono {z-index: 5;}
.hero-slogan {z-index: 4;}


/* .kabuse .image-box img {aspect-ratio: 3/2;filter: blur(0px) brightness(100%)} 
.kabuse .text-box {display:none;} */

h3 {margin-top:0;}


#outline .main-information {
  font-family: "Noto Sans JP", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
#outline .main-information {
  font-weight: 700;
}

#outline h4 {
  border-color:#FF4081; 
  background: linear-gradient(25deg, #18FFFF, #69F0AE, #FFFF00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size:1.4rem;
  padding-bottom:.5rem;
}  

@media (min-width: 641px) {
#outline .main-information {font-size: 1.5rem;text-align: center;}
#outline .main-information span {font-size: 2rem;margin-left:.75rem;}
#outline .main-information .date {font-size: 1.75rem;border-bottom:0px solid;margin-bottom: 1rem;}
#outline .main-information .date br {display: none;}
#outline .main-information .date span:not(.free) {font-size: 3rem;margin-left:.5rem;}
#outline .main-information .free {border:1px solid #fff;padding:.5rem 1rem;font-size: 2rem;}
#outline .introduction-np {margin-top:3rem;font-size: 1.125rem;}
#outline .main-information .place {margin-bottom: 2rem;}

}

@media (max-width: 640px) {
#outline .main-information {font-size: 1rem;text-align: center;}
#outline .main-information span {font-size: 1.25rem;margin-left:.75rem;}
#outline .main-information .date {font-size: 1.25rem;border-bottom:0px solid;margin-bottom: 1rem;line-height: 2;}
#outline .main-information .date span:not(.free) {font-size: 1.5rem;margin-left:.5rem;}
#outline .main-information .free {border:1px solid #fff;padding:.5rem 1rem;font-size: 1.25rem;}
#outline .introduction-np {margin-top:3rem;font-size: 1.125rem;}
#outline .main-information .place {margin-bottom: 2rem;}

}

#contents {padding-bottom: 0;}

.reveal {background: linear-gradient(30deg, #24243e, #302b63, #0f0c29);top:100px !important;}
@media (max-width: 640px) {.reveal {max-height:calc(100% - 100px);min-height: 80%;}}
.button.modal {padding:0;}
.button.modal:hover {background:rgba(255,255,255,.1);}
.button.modal:focus {background:transparent;}
.button.modal:hover img {opacity:.8;}
#contents .button.modal {margin-bottom: 0;border:none;}
#contents .button.modal p {color:#fff;margin-top:.25rem;margin-bottom: 0;font-weight: bold;}
#contents .button.modal:hover p {color:#FFEB3B;}
@media (max-width: 640px) {
  .reveal p {margin-top: 1rem;}
}
.reveal h4 {color:#00B0FF;}
.reveal h4 span {margin-left: 1rem;font-size:.875rem;color:#fff;}

#contents .present {
  display: flex; flex-direction: column; gap:1rem; padding: 2rem;align-self: center;justify-content: center;font-weight: bold;
}
#contents .present img {width:60px;}


#tuk-tuk p {text-align: center;}
@media (max-width: 640px) {
#tuk-tuk img {max-width:70vw;}
}

.food-menu {font-size: .875rem; line-height: 1.5;}

footer {padding-top:5rem;}
.logo-footer {width:50%;max-width:200px;margin-bottom: 1rem;}

.logo-drawer {margin:2rem auto 1rem;text-align: center;}
.logo-drawer img {width:200px;}
#bowa .simple-menu li a {color:#fff;}
#bowa .simple-menu li a:hover {color:#FFEB3B;}

.openbtn { 
right: 0;
display:none;
}

.accessbtn {
position: fixed;
z-index: 7;
top: 70px;
right: 0;
cursor: pointer;
width: 50px;
height: 100px;
background: var(--accent-color-dark);
writing-mode: vertical-rl;
display: grid;
place-content: center;
}
.accessbtn a {color:#fff;font-weight: bold;}

.instabtn {
position: fixed;
z-index: 7;
top: 190px;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background: #7B1FA2;
display: grid;
place-content: center;
}
.instabtn i {color:#fff;font-size: 2rem;margin:0;}

.shuttle-bus {text-align: center;}
.shuttle-bus tbody {background:transparent;}
.shuttle-bus tbody th {background:rgba(255,255,255,.2);text-align: center;}
.shuttle-bus tbody td {background:transparent;}

.faq.accordion a {background:#0D47A1; color:#fff;border-color:var(--main-color); }
.faq.accordion a:hover {color: #FFEB3B}
.faq.accordion .accordion-content{background:var(--main-color); border-color:var(--main-color);}
:last-child:not(.is-active)>.accordion-title {border-color:var(--main-color);}

#notice p a {text-decoration: underline;}

 /* 2026 開催決定 */
 
 #outline {
   background-image: url(https://nightpark-oarai.jp/wp-content/uploads/2024/09/nightwave-image3.jpg);
   background-size: cover; 
   background-position: center bottom;
 }
 
 .kaisai-kettei {
   font-size:8rem;
   line-height: 1.2;
   text-align: center;
   margin-top:6rem;
   margin-bottom:6rem;
     font-family: "Lexend", sans-serif;
     font-optical-sizing: auto;
     font-weight: 700;
     font-style: normal;
   
 }
 
@media (max-width: 640px) {
  .kaisai-kettei {
   font-size:4rem;
  }
  
}
 
 .kaisai-kettei span {
  display: inline-block;
  
background: #00c3ff;  /* fallback for old browsers */
  background: -webkit-linear-gradient(45deg, #ffff1c, #00c3ff);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(45deg, #ffff1c 25%, #00c3ff 75%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  
 }
  
 .main-information {
   margin-bottom: 10rem;
 }

#coming-soon .cell {text-align: center;
  display: grid;
  place-items: center;
  border:1px solid #777;
  border-radius:.5rem;
  paddinh:1rem 2rem;
  height:10rem;
}
#coming-soon .cell h3 {margin:0;padding:0;}