@charset "UTF-8";
/*
 * nightshow.css — 特定LP固有のCSS
 *
 * 役割: このLPだけで必要なテーマ配色・
 *       CSS変数オーバーライド・LP固有のスタイル調整
 * スコープ: このLPのみ（他LPには影響しない）
 */


/* =============================================
   秋テーマ変数
============================================= */

:root {

	--color-primary: #be94ff;
	--color-secondary: #c7b277;
	--color-accent: #e0f4fb;
	--color-base: #503584;
	--corner-radius: 1.6rem;
}


/* =============================================
   テーマ全体
============================================= */

.htb-pagetop {
	opacity: 1;
	visibility: visible;
}

figure.kari:before {
	content: "仮";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 2rem;
	line-height: 1;
	background: #fff;
	color: red;
	padding: 2rem;
	border: 1px solid;
}



#haunted {
	background: #261b3d;
	color: #fff;
}

#haunted h3,
#haunted h4,
#haunted h5,
#haunted h6 {
	letter-spacing: 0;
}

#haunted main {
	font-family: var(--font-family-Zen-Go);
	font-weight: 500;
}
#haunted .c-nav{
	background-color: transparent;
	padding: 0;
	border: 0;
}
#haunted .c-nav__menu-toggle{
	background-color:var(--color-primary);
	padding: 10px;
	  width: 90px;
}
#haunted .js-dialog-menu {
	width: 90%;
	max-width:480px;
	background-color:var(--color-primary);
}
#haunted .text-wrap {
	text-wrap: pretty;
	word-break: auto-phrase;
}
.dialog-menu-btn span {
  width: 28px;
  height: 2px;
}

@media screen and (max-width: 768px) {
	#haunted .c-nav__menu-toggle{
		padding: 10px;
		  width: 60px;
	}
	.dialog-menu-btn span {
	  height: 1px;
	}
}

/* =============================================
   ヘッダーCTA位置調整
============================================= */

@media screen and (max-width: 768px) {
	.h-header__cta.sp-side {
		transition: all 0.4s;
	}

	body.scroll .h-header__cta.sp-side {
		bottom: 40%;
		transition: all 0.4s;
	}

	body.upfixed .h-header__cta.sp-side {
		bottom: 35%;
	}

}

@media screen and (max-width: 1024px) {
	body.scroll .h-header__cta.sp-side {
		right: 0;
		background: transparent;
		padding: 0;
		width: 4rem;
		transform: scale(0.8);
		transform-origin: right;
		top: calc(var(--current-header-h, 80px) + 100px);
		top: 30%;
	}

	body.scroll .h-header__cta.sp-side a:before {
		margin: 0 auto;
		width: 100%;
		height: 20px;
	}

	body.scroll .h-header__cta.sp-side a.cta__ticket span,
	body.scroll .h-header__cta.sp-side a.cta__hotel span {
		width: auto;
		writing-mode: vertical-rl;
		letter-spacing: 3px;
	}
}



/* =============================================
   　#fv
============================================= */

#fv picture{
  width: 100%;
}

/* =============================================
   　#term
============================================= */

#term {
	color:var(--color-primary);
	position: relative;
	z-index: 2;
}
#term .section {
  overflow: hidden;
  position: relative;
}
#term .term-txt:before {
  content: "";
  background: #261B3D;
  background: radial-gradient(circle,rgba(156, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 70%);
  position: absolute;
  background-size: contain;
  bottom: 0;
  left: -10%;
  width: 120%;
  z-index: -1;;
  aspect-ratio: 1 / 1;
    opacity: 0.5;
}


#term .page__body__inner--full {
  gap: 1.6rem;
  max-width: 1100px;
}


#term .term-logo img {
  max-width: 640px;
}

#term  .term-txt {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

#term:before {
	content: "";
	background: url(../img/index/term/bg.webp);
	width: 100%;
	height: 250px;
	position: absolute;
	top: 0;
	left: 0;
	background-size:auto;
	background-repeat: no-repeat;
	background-position: top;
	z-index: -1;
	opacity: 1;
}
#term:after {
	content: "";
	background: #261B3D;
	background: linear-gradient(180deg,rgba(38, 27, 61, 0) 60%, rgba(38, 27, 61, 1) 100%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 250px;
	z-index: 0;
}
#term time {
	font-size: var(--font-size-lg);
	font-weight: 500;
	line-height: 130%;
	margin: 0 auto;
	text-align: center;
	display: block;
	color:#fff;
}
#term time em{
	font-size:220%;
}
#term time small{
	font-size:60%;
}

.date {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
.date dl {
  display: grid;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  gap: 10px;
  grid-template-columns: auto 1fr;
  width: auto;
  font-size: calc(var(--font-size-base) * 1.2);
}
.date dl dt {
  display: flex;
  justify-content: center;
  align-items: center;
  background:var(--color-secondary);
  color:#000;
  border-radius: 5px;
  padding: 3px 10px;
  line-height: 1.2;
  text-align: center;
  max-width: 100px;
  font-size: 85%;
}
.date dl dd {
	text-align: left;
	color:var(--color-secondary);
	line-height: 130%;
}
.date dl dd small{
	font-size:85%;
}

#term .term-catch {
  font-weight: 800;
  line-height: 140%;
  width: 100%;
  position: relative;
  margin-top:4rem;
}

#term .term-read{
	color:#fff;
	text-align: left;
	line-height:200%;
}
#term .btn {
  color:#000;
  background:#fff;
}

#term .term-catch:before {
  content: "";
  background: url(../img/index/mask-text01.svg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 1;
  opacity: 1;
  display:none;
}

#term .movie{
  margin-top:3rem;
}

@media screen and (min-width: 1024px) {
	#term:before,
	#term:after {
		height: 400px;
		background-size: cover;
	}
	#term .term-catch {
	  font-size: calc(var(--font-size-2xl) * 1.4);
	  width: auto;
	}
	#term .term-catch:before {
	  background-size: 120%;
	}
	#term .term-txt:before {
	  content: "";
	  display:none;
	}
}
/* =============================================
   RTB共通
============================================= */



.rtb .section {
	border-radius:0;
}

.rtb .c-card {
	border-radius: 0;
	width: 100%;
	max-width: 1440px;
}
.rtb .c-card__catch {
	border: 0;
	color: var(--color-accent);
	font-weight: 300;
	text-align: left;
}

.rtb .c-card__catch:after {
	display: none;
}

.rtb .c-card__img {
	width: 100%;
}

.rtb .s-card__label {
	position: relative;
	top: auto;
}

.rtb .s-card .s-card__txt {
	gap: calc(var(--scard-gap) * 1.2);
	padding: calc(var(--scard-padding) * 1) calc(var(--scard-padding) * 0);
}

/* =============================================
   #highlights
============================================= */
#highlights{}

.deathking{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	  z-index: 2;
}
.deathking:before {
  content: "";
  background: #261B3D;
  background: radial-gradient(circle, rgba(156, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 60%);
  position: absolute;
  background-size: contain;
  bottom: 0;
  left: -10%;
  width: 120%;
  z-index: 0;
  aspect-ratio: 1 / 1;
    opacity: 0.5;
}
.deathking:after{
  content: "";
  background: url(../img/index/highlights/deathking02.webp);
  width: 100%;
  height: 60%;
  position: absolute;
  bottom: -30%;
  left: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 2;
  opacity: 1;
}
.deathking-name{
	display: flex;
	align-items: center;
	gap: 1rem;
	position: relative;
}
.deathking-name:before,
.deathking-name:after{
	content:"";
	width:50px;
	height:1px;
	background:var(--color-secondary);
}
.deathking-name span{
	text-align:center;
	color: var(--color-secondary);
	line-height: 120%;
	font-weight: 800;
	font-size: var(--font-size-xl);
	display: block;
	white-space: nowrap;
	position: relative;
}
.deathking-name span small{
	font-size:80%
}
.deathking-name span:before {
/*
  content: "";
  background: url(../img/index/mask-text02.svg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 1;
  opacity: 1;
*/
}

#highlights .c-card-group {
	border:1px solid #808080;
	margin:0 1.6rem;
	width: auto;
	position: relative;
	gap: 0;
}
#highlights .c-card-group:before {
  content: "";
  background: url(../img/index/highlights/bg.webp);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 0;
  opacity: 0.4;
}

.highlights-title{
  font-size: calc(var(--font-size-xl) * 1.2);
  font-weight: 900;
  position: relative;
  text-align: center;
  	color: var(--color-secondary);
}
.highlights-title em{
  font-size:150%;
}
.highlights-title:before {
/*
  content: "";
  background: url(../img/index/mask-text03.svg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size:120%;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 1;
  opacity: 1;
*/
}


#highlights .c-card__header {
}

#highlights .c-card__catch {
  font-size: calc(var(--card-font-size) * 2);
  font-weight: 700;
  line-height: 140%;
  color:#fff;
}
#highlights .c-card__title {
	font-size: calc(var(--card-font-size) * 1.6);
	text-align: left;
	line-height: 140%;
	color: var(--color-primary);
}
#highlights .c-card__body {
  position: relative;
  padding-bottom:4rem;
}
#highlights .c-card__body:before {
  content: "";
  background: url(../img/index/line.svg);
  width: 100%;
  height:10px;
  background-size:120%;
  background-repeat: no-repeat;
  background-position: top;
  display: block;
}


#highlights .page__body__inner--full {
	gap:0;
}

.c-card.areamap {
  width: auto;
  margin: 3.6rem 0em 1.6rem;
  position: relative;
  z-index: 3;
  overflow: visible;
}
.c-card.areamap  figure {
  flex-direction: column;
  align-items: center;
}
.c-card.areamap  figure div{
	background-color: var(--color-base);
	color: #fff;
	padding: 0.8rem 4rem;
	border-radius: 9999px;
	display: table;
	font-size: calc(var(--card-font-size) * 1);
	position: absolute;
	z-index: 2;
	margin-top: -2rem;
}

.c-card.areamap  figure figcaption {
  position: relative;
  top: 5px;
  bottom: auto;
}

@media screen and (min-width: 1024px) {
	#highlights .page__body__inner--full {
	  gap: var(--space-y);
	}
	#highlights .c-card-group {
		margin: 0 auto;
		width: auto;
		padding: calc(var(--card-gap) * 1);
		gap: calc(var(--card-gap) * 1.4);
		align-items: center;
		margin-top: -8rem;
	}

	.deathking {
	max-width: 640px;
	}
	.deathking:before {
		  bottom: -60%;
		  left: -25%;
		  width: 150%;
	}
	.deathking-name span{
	  font-size: calc(var(--font-size-xl) * 1.2);
	}
	
	.highlights-title {
	  font-size: calc(var(--font-size-xl) * 1.5);
	}
	#highlights .c-card__header {
		gap: calc(var(--card-gap) * 0.5);
	}
	#highlights .c-card__catch {
	  font-size: calc(var(--card-font-size) * 2);
	}
	#highlights .c-card__title {
	  font-size: calc(var(--card-font-size) * 1.7);
	    line-height: 120%;
	}
	#highlights .c-card-group:before {
	  opacity: 0.2;
	}


}



/* =============================================
   #cruise
============================================= */
#cruise{
  position: relative;
}
#cruise:before{
  content: "";
  background: url(../img/index/cruise/bg.webp);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 0;
  opacity: 0.5;
  transform: rotate(180deg);
}

#special .c-card {
	border-radius: 0;
	width: 100%;
	max-width: 1100px;
	background: #332603;
	border: 1px solid var(--color-accent);
	padding: 2rem;
}

#cruise .c-card__txt {
}

#cruise .c-card__catch {
  font-size: calc(var(--card-font-size) * 2);
  font-weight: 700;
  line-height: 140%;
  color: #fff;
}

#cruise  .c-card__title {
text-align: left;
  font-size: calc(var(--card-font-size) * 2.4);
  font-weight: 700;
  color: #e0f4fb;
  text-shadow: 0px 0px 10px #000;
  line-height: 120%;
}
#cruise .c-card__body {
  position: relative;
  padding-bottom: 0rem;
}
#cruise .c-card__body:before {
  content: "";
  background: url(../img/index/line02.svg);
  width: 100%;
  height: 10px;
  background-size: 120%;
  background-repeat: no-repeat;
  background-position: top;
  display: block;
}
#cruise  .date {
font-size: calc(var(--card-font-size) * 1);
  align-items: flex-start;
}
#cruise  .date dl dt {
  background:#fff;
  color: #000;
}
#cruise  .date dl dd {
  color: #fff;
}

#cruise  .btn {
  color: #000;
  background: #fff;
}
#cruise .expresspass{
	padding: 0 calc(var(--space-x) * 1);
	gap: calc(var(--card-gap) * 1);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}


#cruise .c-card.hero .date dl dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 1023px) {
	#cruise .page__body__inner {
	  padding: 0 calc(var(--space-x) * 0);
	}
}


@media screen and (min-width: 1024px) {
	#cruise .page__body__inner {
	  gap: calc(var(--space-y) * 0.5);
	}
	#cruise .c-card__txt {
	  padding: calc(var(--card-padding) * 1.5);
	}
	#cruise .c-card.hero {
	  display: flex;
	  flex-direction: column;
	}
	#cruise .c-card-group>.c-card.hero>.c-card__img,
	#cruise .c-card-group>.c-card.hero>.c-card__txt {
	width: 100%;
	}

	#cruise .c-card.hero .c-card__title {
	  text-align: center;
	}
	#cruise .date {
	 align-content: center;
	}
	#cruise .c-card.hero .date dl {
	  grid-template-columns: auto 1fr auto 1fr;
	  font-size: calc(var(--font-size-base) * 1.2);
	}
	#cruise .c-card.hero .c-card__body {
	  max-width: 780px;
	}
}


/* =============================================
   .expresspass
============================================= */

#highlights .expresspass-box .c-card__body:before,
#highlights .info-ticket .c-card__body:before{
	display:none!important;
}

#highlights .info-ticket {
  border: 1px solid #666;
  padding: calc(var(--card-padding) * 1.5);
  text-align: center;
  width: 100%;
  max-width: 640px!important;
}

#highlights .expresspass-box {
	position: relative;
	border: 1px solid #666;
	padding: calc(var(--card-padding) * 1.2);
	text-align: center;
	max-width: 640px;
	background: rgb(0 0 0 / 18%)!important;
	margin: 0 1.6rem 2.4rem;
	width: auto;
}

#highlights .expresspass-box .c-card__body {
	align-items: center;
	text-align: center;
	gap: calc(var(--card-gap) * 0.4);
	padding-bottom: 0;
}


/* 右上アクセントライン */
#highlights .expresspass-box::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 12px;
	background-color:var(--color-primary);
}

#highlights .expresspass-box .c-card__title {
  font-size: 140%;
  font-weight: 500;
  text-align: center;
}

#highlights .expresspass-box .c-card__catch {
  font-size: 240%;
  line-height: 100%;
  text-align: center;
}
.expresspass-box .c-card__catch small{
  font-size: 60%;
}
#highlights .expresspass-box .c-card__catch:after {
  display:none;
}
#highlights .expresspass-box .c-card__body .notice {
  font-size: 80%;
    text-align: left;
}

#highlights .expresspass-box.c-card dl{
  padding-top:calc(var(--card-gap) * 0.8);
}

#highlights .expresspass-box.c-card dt {
  background: #fff;
  color: #000;
  border-radius:0px;
}
#highlights .expresspass-box.c-card dd {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	line-height: 1;
}

#highlights .expresspass-box.c-card dd small{
	font-size:80%;
}


#highlights .expresspass-box .btn {
	background-color:#62246c;
	color: #fff;
	border-radius: 0;
	max-width: 320px;
}

@media screen and (min-width: 1024px) {
	#highlights .expresspass-box {
	   margin:0 auto;
	  width: 100%;
	}
}





#cruise .expresspass-box .c-card__body:before,
#cruise .info-ticket .c-card__body:before{
	display:none!important;
}

#cruise .info-ticket {
  border: 1px solid #666;
  padding: calc(var(--card-padding) * 1.5);
  text-align: center;
  width: 100%;
  max-width: 640px!important;
}

#cruise .expresspass-box {
	position: relative;
	border: 1px solid #666;
	padding: calc(var(--card-padding) * 1.2);
	text-align: center;
	max-width: 640px;
	background: rgb(0 0 0 / 18%)!important;
}

#cruise .expresspass-box .c-card__body {
	align-items: center;
	text-align: center;
	gap: calc(var(--card-gap) * 1);
	padding-bottom: 0;
}


/* 右上アクセントライン */
#cruise .expresspass-box::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 12px;
	background-color: var(--color-accent);
}

#cruise .expresspass-box .c-card__title {
  font-size: 140%;
  font-weight: 500;
  text-align: center;
}

#cruise .expresspass-box .c-card__catch {
  font-size: 240%;
  line-height: 100%;
  text-align: center;
}
.expresspass-box .c-card__catch small{
  font-size: 60%;
}
#cruise .expresspass-box .c-card__catch:after {
  display:none;
}
#cruise .expresspass-box .c-card__body .notice {
  font-size: 80%;
    text-align: left;
}

#cruise .expresspass-box.c-card dl{
  padding-top:calc(var(--card-gap) * 0.8);
}

#cruise .expresspass-box.c-card dt {
  background: #fff;
  color: #000;
  border-radius:0px;
}
#cruise .expresspass-box.c-card dd {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	line-height: 1;
}

#cruise .expresspass-box .btn {
	background-color:#1f85a8;
	color: #fff;
	border-radius: 0;
	max-width: 320px;
}



#schedule-container {
	display: flex; /* 子要素（dl）を横並びにします */
	overflow-x: auto; /* 横方向にはみ出た場合にスクロールバーを表示します */
	gap: 5px; /* 各リストの間の隙間を16pxに設定 */
	padding: 1em; /* 内側に余白を追加 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto !important;
}

/* 横スクロール内のdl要素のスタイル */
#schedule-container > dl {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-content: center;
	align-items: center;
	overflow: hidden;
	width: 85px;
	margin: 0;
	font-size: 14px;
	font-family: "Hind", sans-serif;
	font-weight: 500;
	font-style: normal;
	  user-select: none;
}

#schedule-container > dl dt {
	line-height: 1;
	font-size: 16px;
	aspect-ratio: 2 / 1;
	padding:6px 10px 4px;
	background: #62246c;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	margin-bottom:5px;
	  width: 100%;
}
#schedule-container > dl dd {
	padding:0 10px;
	margin: 0; 
	color: #fff;
	text-align: center;
}


/* --- アコーディオン全体のスタイル --- */
.crowd-condition {
	border: 1px solid #c8B172;
	border-radius: 8px;
	overflow: hidden;
	margin: 20px auto;
	width: 100%;
	min-width: 0;
	max-width: 530px;
	box-sizing: border-box;
}

.crowd-condition_header {
  padding: 8px;
  background-color:#c8B172;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  text-align: center;
  color: #000;
      position: relative;
}
/* ヘッダーの末尾にアイコンを追加するためのスタイル */
.crowd-condition_header::after {
  position: absolute;
  right: 5px;
  font-size: 16px;
  font-weight: bold;
  width: 1em;
  text-align: center;
  transition: transform 0.3s;
  top: 50%;
  transform: translateY(-50%);
}

/* [閉じた状態] のアイコン */
.crowd-condition.is-closed .crowd-condition_header::after {
    content: '+'; /* プラスアイコンを表示 */
}

/* [開いた状態] のアイコン */
.crowd-condition.is-open .crowd-condition_header::after {
    content: '−'; /* マイナスアイコンを表示 */
    transform:translateY(-50%) rotate(180deg); /* アイコンを少し回転させて動きを出す */
}

/* --- ドラッグスクロール用のカーソルスタイル --- */
#schedule-container {
    cursor: grab; /* 通常時のカーソルを「掴む手」に */
}

#schedule-container.active {
    cursor: grabbing; /* ドラッグ中のカーソルを「掴んでいる手」に */
}
.crowd-condition_body {
    transition: max-height 0.4s ease-in-out;
    overflow: hidden;
}

/* --- ここからが重要な変更点 --- */

/* [閉じた状態] のスタイル */
.crowd-condition.is-closed .crowd-condition_body {
    /* dtとスクロールバーが見えるくらいの高さに設定 */
    max-height:75px; 
}
.crowd-condition.is-closed #schedule-container dd {
    /* dd要素（時間）を非表示にする */
    display: none;
}

/* [開いた状態] のスタイル */
.crowd-condition.is-open .crowd-condition_body {
    /* コンテンツ全体が見える十分な高さを設定 */
    max-height: 500px;
}
.crowd-condition .note {
	font-size: 13px;
	color: #fff;
	text-align: center;
	padding: 10px;
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
}


/* Firefox用のシンプルなスクロールバー */
#schedule-container {
    scrollbar-width: thin; /* スクロールバーを細くする */
    scrollbar-color: #a9a9a9 #e9e9e9; /* (つまみ色 トラック色) */
}

/* Chrome, Safari, Edge用の詳細なスクロールバースタイル */
/* スクロールバー全体のスタイル */
#schedule-container::-webkit-scrollbar {
    height: 12px; /* 横スクロールバーの高さ */
}

/* スクロールバーのトラック（背景）のスタイル */
#schedule-container::-webkit-scrollbar-track {
    background: #e9e9e9; /* トラックの背景色 */
    border-radius: 10px;
}

/* スクロールバーのサム（つまみ）のスタイル */
#schedule-container::-webkit-scrollbar-thumb {
    background-color: #a9a9a9; /* つまみの色 */
    border-radius: 10px;
    border: 3px solid #e9e9e9; /* トラック色で縁取りして、つまみを細く見せる効果 */
}

/* つまみにマウスを乗せたときのスタイル */
#schedule-container::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* ホバー時のつまみの色 */
}


/* 混雑状況に応じて色を変えるスタイル */
.crowd-condition .congested {
    color: red!important;
}
.crowd-condition .moderate {
    color: orange!important;
}