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


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

:root {

	--color-primary: #e65d28;
	--color-secondary: #fff3da;
	--color-accent: #d34b16;
	--color-base: #ffe7c5;
	--color-miffy-yellow: #ffc80b;
	--color-miffy-orange: #f26522;
	--color-miffy-green: #247033;
	--color-miffy-blue: #005599;
	--color-miffy-brown: #917f70;




	--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;
}



#miffyxmas {
	background:var(--color-miffy-green);
	color: #000;
}

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

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

#miffyxmas  #page__footer{
	color:#fff;
}

@media screen and (max-width: 768px) {
	#miffyxmas .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 figure figcaption{
	color: #fff!important;
	position: relative;
	bottom: -5px;
	text-align: right;
}
/* =============================================
   　#term
============================================= */

#term {
	color:#fff;
}

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

#term .term-txt{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	gap: 1.6rem;
	width: 100%;
	margin: 0 auto;
}


#term .term-txt .text-logo {
	font-size: calc(var(--font-size-base) * 2);
	font-weight: 600;
	line-height: 140%;
	text-align: center;
}
#term .term-txt .text-logo-read{
	font-size: calc(var(--font-size-base) * 1.2);
	font-weight: 600;
	line-height: 140%;
	text-align: center;
}
#term .term-txt .text-date{
	font-size: calc(var(--font-size-base) * 1.4);
	font-weight: 600;
	line-height: 140%;
	text-align: center;
}
#term .term-txt .text-date em{
font-size: 160%;
}

@media screen and (min-width: 1024px) {
	#term .term-txt .text-logo-read {
	  font-size: calc(var(--font-size-base) * 1.6);
	}
	#term .term-txt .text-logo {
		font-size: calc(var(--font-size-base) * 3.2);
	}
	#term .term-txt .text-date{
		font-size: calc(var(--font-size-base) * 2);
	}
}

/* =============================================
  news
============================================= */

.news {
	background: rgb(0 0 0 / 20%);
	font-size: calc(var(--font-size-base) * 1);
	font-weight:500;
	padding-bottom: 0.4rem;
}
.news dt{
	background: var(--color-miffy-orange);
	color: #fff;
	text-align: center;
	display: table;
	padding: 0.8rem 1rem;
	line-height: 100%;
	font-size: 80%;
}
.news dd{
  padding: 0.8rem 1.6rem;
  color: #fff;
	font-size: 85%;
}
.news dd a{
  color: #fff;
}

@media screen and (min-width: 1024px) {
	.news dd{
	  padding: 1.6rem 2rem;
	}
}
/* =============================================
   page__******
============================================= */
.rtb .page__header{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: calc(var(--space-x) * 1) var(--space-x);
	gap: var(--space-y);
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	background: #000;
	color:#fff;
}
.rtb .page__header .page__header-headding{
	font-size: calc(var(--font-size-base) * 1.8);
	font-weight: 600;
	line-height: 140%;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.rtb .page__header{
		padding: calc(var(--space-x-sm) * 2) 0 calc(var(--space-x-sm) * 2);
	}
	.rtb .page__header .page__header-headding{
		font-size: calc(var(--font-size-base) * 2.4);
	}
}

/* =============================================
  .c-card
============================================= */

.c-card__body {
  gap: calc(var(--card-gap) * 1.2);
}

.c-card dl::before,
.c-card dl::after {
	content: '';
	width: 1.2rem;
	height: 100%;
	position: absolute;
}

.c-card dl, .s-card dl {
  padding:0.8rem 1.4rem;
}
.c-card dl::before {
	border-left: solid 1px #000000;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #000000;
	top: 0;
	left: 0;
}
.c-card dl::after {
	border-right: solid 1px #000000;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #000000;
	top: 0;
	right: 0;
}
.c-card dl dt{
	background:transparent;
	color:#000;
	align-items: flex-start;
	padding:0.5rem 0 0 0;
}
.c-card__img.multiple {
	display: grid;
	grid-template-columns: 1fr 1fr;
	  gap: calc(var(--card-gap) * 0.5);
}

/* =============================================
  .js-json .c-dialog-modal
============================================= */

.js-json-open {
	cursor: pointer;
	display: block;
	-webkit-tap-highlight-color: transparent;
}

.js-json-open figure picture:before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: var(--color-primary);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.js-json-open .marks {
	position: absolute;
	width: auto;
	left: 0;
	top: 0;
	z-index: 2;
	border-radius: 0;
	background:var(--color-miffy-yellow);
	color: #000;
}
.js-json-open figure:before ,
.c-dialog-modal__body figure: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;
*/
}
.js-json-open figure {
  flex-direction: column;
}
.js-json-open figure figcaption {
	position: relative;
	width: 100%;
	bottom: auto;
	right: 0;
	color: #000;
	text-align: center;
	text-decoration: underline;
	font-size: calc(var(--font-size-base) * 0.9);
	margin:0.5rem auto 0;
}
.js-json-open figure picture{
  border: 2px #ffffff solid;
}

.c-dialog-modal__body{
  font-family: var(--font-family-Zen-Maru-Go);
  font-weight: 500;
}


.c-dialog-modal__marks {
	position: absolute;
	width: auto;
	left: 0;
	top: 0;
	z-index: 2;
	border-radius: 0;
	background:var(--color-miffy-yellow);
	color: #000;
}
.c-dialog-modal__txt {
	align-items: center;
	font-size: calc(var(--font-size-base) * 1);
	gap: 1.4rem;
}
.c-dialog-modal__name, .c-dialog-modal__header h3 {
  font-size: 150%;
  text-align: center;
}
.c-dialog-modal__point {
  font-size: 130%;
}
.c-dialog-modal__desc, .c-dialog-modal__content p{
  font-size: 110%;
}
.c-dialog-modal__links a.btn {
  color: #fff;
  background:var(--color-miffy-green);
}

.js-json-open {
  width: calc(100% / 2 - 1rem);
}
.c-card__img.multiple {
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--card-gap) * 0.5);
  flex-wrap: wrap;
  align-items: flex-start;
}
.js-json-open picture:hover {
	animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* =============================================
   RTB共通
============================================= */



.rtb .section {
	border-radius: 0 calc(var(--corner-radius) * 6) 0 0;
	background: #fff;
	padding: 0;
	padding-bottom: var(--space-section);
	overflow: hidden;
}
.rtb.last .section {
	margin-bottom:0;
}

.rtb .c-card {
	border-radius: 0;
	max-width: 1440px;
}

.rtb .s-card__title,
.rtb .c-card__catch {
	border: 0;
}

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

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

.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);
}

.rtb .c-card__link {
	gap: calc(var(--card-gap) * 1);
}

.rtb .c-card__link .btn {
  background-color: var(--color-miffy-green);
    min-width: 260px;
}

@media screen and (min-width: 1024px) {
	.rtb .c-card__link {
		gap: calc(var(--card-gap) * 0.5);
	}
}

/* =============================================
  rtb.miffyxmas
============================================= */

.rtb.miffyxmas {
}

.rtb.miffyxmas .page__header {
	background-color: var(--color-miffy-yellow);
}

.rtb.miffyxmas .page__body:before{
	content: "";
	background-color: var(--color-miffy-yellow);
	position: absolute;
	width: 100%;
	height: 180px;
	top: 0;
	left: 0;
}
.rtb.miffyxmas .c-card__txt {
	padding: calc(var(--card-padding) * 1.5) calc(var(--card-padding) * 0);
}

.rtb.miffyxmas .c-card__catch {
  color:var(--color-miffy-yellow);
  font-size:calc(var(--card-font-size) * 1.5);
}

.rtb.miffyxmas .c-card__img picture{
  border-radius: var(--corner-radius);
  overflow: hidden;
    position: relative;
}
.rtb.miffyxmas .c-card dl::before,
.rtb.miffyxmas .c-card dl::after {
	border-style: dotted!important;
	border-width:2px!important;
}
.rtb.miffyxmas .c-card dl::before{
	border-right:0!important;
}
.rtb.miffyxmas .c-card dl::after {
	border-left:0!important;
}

#miffyxmas-event.rtb.miffyxmas .page__header,
#miffyxmas-event.rtb.miffyxmas .page__body:before {
	background-color: var(--color-miffy-yellow);
}
#miffyxmas-event.rtb.miffyxmas .c-card__catch,
#miffyxmas-event.rtb.miffyxmas .c-card__title {
  color:var(--color-miffy-yellow);
}

#miffyxmas-event .c-card dl::before,
#miffyxmas-event .c-card dl::after {
	border-color:var(--color-miffy-yellow)!important;
}

#miffyxmas-event.rtb .c-card__link .btn {
  background-color: var(--color-miffy-yellow);
}

#miffyxmas-gourmet{
	background-color:#fff;
}

#miffyxmas-gourmet.rtb.miffyxmas .page__header,
#miffyxmas-gourmet.rtb.miffyxmas .page__body:before {
	background-color: var(--color-miffy-orange);
}
#miffyxmas-gourmet.rtb.miffyxmas .c-card__catch,
#miffyxmas-gourmet.rtb.miffyxmas .c-card__title {
  color:var(--color-miffy-orange);
}
#miffyxmas-gourmet .c-card dl::before,
#miffyxmas-gourmet .c-card dl::after {
	border-color:var(--color-miffy-orange)!important;
}
#miffyxmas-gourmet.rtb .c-card__link .btn,
[data-json-group="gourmet"] .btn  {
  background-color: var(--color-miffy-orange)!important;
}


#miffyxmas-goods.rtb.miffyxmas .page__header,
#miffyxmas-goods.rtb.miffyxmas .page__body:before {
	background-color: var(--color-miffy-blue);
}
#miffyxmas-goods.rtb.miffyxmas .c-card__catch,
#miffyxmas-goods.rtb.miffyxmas .c-card__title {
  color:var(--color-miffy-blue);
}
#miffyxmas-goods .c-card dl::before,
#miffyxmas-goods .c-card dl::after {
	border-color:var(--color-miffy-blue)!important;
}
#miffyxmas-goods.rtb .c-card__link .btn{
  background-color: var(--color-miffy-blue);
}



@media screen and (min-width: 1024px) {
	.rtb.miffyxmas .c-card {
		gap: calc(var(--card-gap) * 1.2);
		align-items: flex-start;
	}
	.rtb.miffyxmas .c-card__txt{
		background: #fff;
		padding: calc(var(--card-padding) * 1.5) calc(var(--card-padding) * 1.5);
	}
	.rtb.miffyxmas .c-card__img picture,
	.rtb.miffyxmas .c-card__txt{
	  border-radius: calc(var(--corner-radius)* 2);
	}
}



/* =============================================
  #other-events
============================================= */

#other-events .c-card {
  align-items: normal;
}

#other-events picture {
  height: 100%;
  display: flex;
}
#other-events .c-card__txt {
  align-content: center;
}
#other-events .c-card,
#other-events .c-card dl dt {
	color:var(--color-white)!important;
}
#other-events .c-card dl::before,
#other-events .c-card dl::after {
	border-color:var(--color-white)!important;
}


@media screen and (max-width: 768px) {
.c-card__catch {
  font-size: calc(var(--card-font-size) * 1.3);
}
}



/*************************************************************

.component__tab

**************************************************************/

.component__tab{
  margin: 0 auto;
}


.component__tab:after {
  content: "";
  height: 1px;
  background: var(--color-primary);
  margin: 0 calc(50% - 50vw);
}


.component__tab > ul.component__tab__menu {
	position: relative;
	max-width: 1100px;
	margin: 4rem auto 2rem;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
}

.component__tab > ul.component__tab__menu li {
	width: 100%;
	display: flex;
	align-items: stretch;
	cursor: pointer;
}
.component__tab > ul.component__tab__menu li:last-child {
	  margin: 0 0px 0 0;
}
.component__tab > ul.component__tab__menu li a {
	font-size: 22px;
	font-size: 17px;
	  line-height: 1.2;
	font-weight: 600;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.6em 0.6em 0 0;
	border: 1px var(--color-primary) solid;
	border-bottom: 0!important;
	padding:2rem 0;
	transition: .2s;
	color: #fff;
	background: var(--color-primary);
	text-align: center;
	width: 100%;
}


.component__tab > ul.component__tab__menu li.select a,
.component__tab > ul.component__tab__menu li:hover a{
	color: var(--color-primary);
	background:#fff;
}

.component__tab > .component__tab__menu li.select:after {
  content: "";
  height: 1px;
  background: var(--color-primary);
  width: 150%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.content_area.hide {
  display: none;
}
@media screen and (max-width: 736px) {
	.component__tab {
		margin: 0 auto 55px;
		overflow: hidden;
	}
	.component__tab > ul.component__tab__menu {
	  margin:2rem auto 2rem;
	  
	  gap: 4px;
	}
	.component__tab > ul.component__tab__menu li {
	  margin: 0;
	}
	.component__tab > ul.component__tab__menu li a {
	  font-size: 2.6vw;
	      font-size: 14px;
	  padding: 10px 3px;
	}
}



/* =============================================
   ABテスト（ステージング用 — 本番時は削除）
   B案: SP時 #haunted, #miffyhalloween の
        swiper を縦並びに変換
============================================= */

/* --- 切り替えボタンUI --- */
.ab-toggle {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 99999;
	display: flex;
	gap: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	font-family: sans-serif;
	font-size: 13px;
}
.ab-toggle button {
	padding: 8px 16px;
	border: none;
	cursor: pointer;
	font-weight: 700;
	transition: all 0.2s;
}
.ab-toggle button[data-variant="A"] {
	background: #ccc;
	color: #333;
}
.ab-toggle button[data-variant="B"] {
	background: #ccc;
	color: #333;
}
.ab-toggle button.is-active[data-variant="A"] {
	background: #2563eb;
	color: #fff;
}
.ab-toggle button.is-active[data-variant="B"] {
	background: #dc2626;
	color: #fff;
}

/* --- B案: SP時 swiper → 縦並び（ネストされたfade swiperは除外） --- */
@media screen and (max-width: 1024px) {
	body.ab-vertical :is(#haunted, #miffyhalloween, #tastekyushu) .js-swiper:not(.js-swiper-fade) {
		overflow: visible !important;
	}
	body.ab-vertical :is(#haunted, #miffyhalloween, #tastekyushu) .js-swiper:not(.js-swiper-fade) > .swiper-wrapper {
		flex-direction: column !important;
		transform: none !important;
		gap: 1.6rem;
	}
	body.ab-vertical :is(#haunted, #miffyhalloween, #tastekyushu) .js-swiper:not(.js-swiper-fade) > .swiper-wrapper > .swiper-slide {
		width: 100% !important;
		margin-right: 0 !important;
	}
	body.ab-vertical :is(#haunted, #miffyhalloween, #tastekyushu) .js-swiper:not(.js-swiper-fade) > .swiper-button-next,
	body.ab-vertical :is(#haunted, #miffyhalloween, #tastekyushu) .js-swiper:not(.js-swiper-fade) > .swiper-button-prev {
		display: none !important;
	}
	body.ab-vertical #tastekyushu .js-swiper:not(.js-swiper-fade) > .swiper-wrapper {
		gap: 3.6rem;
	}
	body.ab-vertical :is(#haunted, #miffyhalloween, #tastekyushu) .s-card__logo{
		min-height: auto;
	}
}


figure.caption-miffy {
  flex-direction: column;
}
.caption-miffy figcaption{
	color: #000 !important;
	position: relative;
	bottom: 0;
	text-align: right;
	padding: 2px 0;
}