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


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

:root {

	--color-primary: #c69c6d;
	--color-secondary: #e7c7a9;
	--color-accent: #e8ce7b;
	--color-base: #fff;
	--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;
}



#nightshow {
	background: #000;
	color: #fff;
}

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

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

@media screen and (max-width: 768px) {
	#nightshow .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%;
}
#fv .page__kv:before {
	content: "";
	background: #1A1E34;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 2;
}
#fv .page__kv img{
  max-width: 1240px;
}
@media screen and (min-width: 1024px) {
	#fv .page__kv > div{
		background: url(../img/index/fv/pc.webp);
		background-size: cover;
		background-position: center;
	}
	#fv .page__kv figure:before{
	content: "";
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}

}


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

#term {
	color:var(--color-primary);
	margin-top: -100px;
	position: relative;
	z-index: 2;
}
#term .section {
  padding: 0 0 var(--space-section);
}

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

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

#term  .term-txt:before {
	content: "";
	background: url(../img/index/term/bg.webp);
	width: 100%;
	height: 70%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: -1;
	opacity: 0.7;
}


#term .term-catch {
	font-weight: 800;
	line-height: 140%;
}
#term .term-title {
  font-weight: 300;
  line-height: 1;
	color:var(--color-secondary);
}

#term time {
	font-size: var(--font-size-xl);
	font-weight: 300;
	line-height: 120%;
	margin: 0 auto;
	text-align: center;
	display: block;
	color:var(--color-secondary);
}
#term time em{
	font-size:180%;
}
#term time em:last-child{
	font-size:130%;
}

#term p{
	color:#fff;
	text-align: left;
	max-width: 640px;
	font-size: calc(var(--font-size-base) * 1.2);
	line-height: 180%;
}


.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(--scard-font-size) * 1);
}
.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: 140%;
}
.date dl dd small{
  font-size: 90%;
}

.btn {
  background-color: var(--color-htb-orange);
  background: var(--color-primary);
}

@media screen and (min-width: 1024px) {
	article#fv {
	}
	#term {
	  margin-top: 0;
	  position: relative;
	}
	#cover{

	  position: relative;
	}
	#cover:before{
		content: "";
		margin-top: 0;
		background: rgb(0 0 0 / 60%);
		position: relative;
		backdrop-filter: blur(8px);
		width: 100%;
		height:100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#term .section {
	  padding: 0 0 var(--space-section);
	}
	#term .term-title {
	  font-size: calc(var(--font-size-2xl) * 1.5);
	}
}

/* =============================================
   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{}

#highlights .c-card__txt {
	justify-content: flex-start;
	background: #333;
	background: linear-gradient(179deg, rgba(51, 51, 51, 1) 0%, rgba(0, 0, 0, 1) 100%);
	margin-right: 3rem;
	padding-left:3rem;
	padding-right:3rem;
}
#highlights .c-card-group .c-card:nth-child(even) .c-card__txt {
	margin-right: 0rem;
	margin-left: 3rem;
}
#highlights .c-card-group .c-card .c-card__img img {
	margin-right: 0rem;
	margin-left: 3rem;
}
#highlights .c-card-group .c-card .c-card__img:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 30%;
	background: #333;
	display: block;
}
#highlights .c-card-group .c-card .c-card__img:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30%;
  background: #333;
  background: linear-gradient(0deg, #333 0%, rgb(51 51 51 / 0%) 100%);
	display: block;
}

#highlights .c-card-group .c-card:nth-child(even) .c-card__img {
	margin-right: 3rem;
	margin-left: 0rem;
}

#highlights .c-card__catch {
  font-size: calc(var(--card-font-size) * 1.4);
  font-weight: 300;
  line-height: 140%;
}
#highlights.rtb .c-card {
  overflow: visible;
}
[data-number]:before {
	content: attr(data-number);
	position: absolute;
	z-index: 2;
	top: -50px;
	right: 0;
	font-size: 16vw;
	line-height: 1;
	color: #ab937c;
	font-family: "Oswald", sans-serif;
	font-weight: 200;
	border-bottom: 1px solid var(--color-secondary);
}
[data-number].left:before {
	left: 0;
	right:auto;
}

@media screen and (min-width: 1024px) {


	#highlights .c-card-group {
	    max-width: 1100px;
	}
	#highlights .c-card-group .c-card .c-card__img img {
	  margin: 0 auto;
	}
	#highlights .c-card-group:first-child  {
	  flex-direction: row;
	  gap: calc(var(--card-gap) * 0.8);
	  width: 100%;
	    max-width: 1100px;
	}
	#highlights .c-card-group:first-child .c-card__txt {
	  margin:0 auto;
	  width: 100%;
	}
	#highlights .c-card-group .c-card:nth-child(even) .c-card__txt {
	   margin:0 auto;
	}
	#highlights .c-card-group>.c-card {
	  align-items: stretch;
	}
	#highlights .c-card__txt{
	  min-height: 100%;
	    align-content: center;
	}
	#highlights {
	  position: relative;
	}
	#highlights:before {
		content: "";
		background: url(../img/index/term/bg02.webp);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: -1;
		opacity: 0.5;
	}
	[data-number]:before {
		top: -30px;
		font-size:6rem;
	}
	[data-number].left:before {
	  left: auto;
	  right:0;
	}
}



/* =============================================
   #hspecial
============================================= */
#special{}

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

#special .c-card__txt {
	padding: calc(var(--card-padding) * 1.5) 0;
}

#special .c-card__catch {
  text-align: center;
  font-weight: 700;
}

#special .c-card__title {
	text-align: center;
	font-weight: 300;
	color: var(--color-accent);
}
	#special .c-card{
	  position: relative;
	}
	#special .c-card:before {
		content: "";
		background: url(../img/index/special/hanabi.webp);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		/* z-index: -1; */
		opacity: 0.5;
		mix-blend-mode: overlay;
	}
@media screen and (min-width: 1024px) {
	#special .c-card__txt {
		padding: calc(var(--card-padding) * .5);
		/* padding-right: 0; */
		width: 100%;
		    gap: calc(var(--card-gap) * 0.5);
	}


}


/* =============================================
   #nightshowmap
============================================= */
#nightshowmap{}

#nightshowmap h3{
color: var(--color-accent);
}