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


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

:root {

	--color-primary: #e65d28;
	--color-secondary: #fff3da;
	--color-accent: #d34b16;
	--color-base: #ffe7c5;
	--color-miffy: #ffc80b;
	--color-haunted: #352359;
	--color-tastekyushu: #c69c6d;

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



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

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

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

@media screen and (max-width: 768px) {
	#autumn .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 {
	background-color: var(--color-secondary);
	color:var(--color-primary);
	font-weight: 600;
}

#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: 2rem;
	width: 100%;
	margin: 0 auto;
}


#term .term-txt h2 {
	font-weight: 600;
	line-height: 140%;
}
#term .term-txt p{
	font-weight: 600;
	line-height: 160%;
}

.term-nav{
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
  padding: 0 1.6rem;
  flex-wrap: wrap;
}
.term-nav a{
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: calc(var(--font-size-sm) * 0.85);
	color:#000;
	line-height: 125%;
	width: calc(100% / 2.3 - 0.5rem);
}
.term-nav a:nth-child(n+3){
	width: calc(100% / 2.3 - 0.5rem);
}
.term-nav figure {
  flex-direction: column;
    gap: 0.3rem;
}
.term-nav figure.kari:before {
  top: 30%;
  left: 50%;
  font-size: 1.4rem;
  padding: 0.5rem;
}

.term-nav figure picture {
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  overflow: hidden;
  border: 3px solid;
  
    border-radius: 2rem;
}
.term-nav figure picture img {
  outline: 3px solid var(--color-secondary);
  outline-offset: -3px;
  border-radius: 999px;
    border-radius: 2rem;
}

.term-nav a[href$="#miffyhalloween"] figure picture {
  border-color:var(--color-miffy);
}
.term-nav a[href$="#tastekyushu"] figure picture {
  border-color:var(--color-tastekyushu);
}
.term-nav a[href$="#winefes"] figure picture {
  border-color:#b23f6e;
}
.term-nav a[href$="#nightshow"] figure picture {
  border-color:#352359;
}
.term-nav a[href$="#nightwalk"] figure picture {
  border-color:#ff8800;
}
.term-nav a[href$="#wakuwaku"] figure picture {
  border-color:var(--color-miffy);
}

.term-nav__scroll {
	overflow-x: auto;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	padding: 0 4.8rem;
	padding-bottom: 0.5rem;
	justify-content: flex-start;
	justify-content: center
}

.term-nav__scroll::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.term-nav__scroll a {
	flex-shrink: 0;
}
@media screen and (min-width: 1024px) {
	#term .text-md{
		font-size: calc(var(--font-size-md) * 1.3);
	}

	#term .term-txt h2 {
		font-size: calc(var(--font-size-xl) * 1.2);
	}
	#term .term-txt p{
		font-size: calc(var(--font-size-base) * 1.2);
		font-size: calc(var(--font-size-md) * 1.2);
	}


	.term-nav {
		gap: 2rem;
		max-width: 960px;
		flex-wrap: nowrap;
	}
	.term-nav__scroll {
		flex-wrap: nowrap;
		overflow-x: visible;
	  max-width:1100px;
	  max-width: 600px;
	}
	.term-nav__scroll a {
	  flex-shrink: unset;
	}
	.term-nav a {
	  width: calc(100% / 1)!important;
	}
}

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



.rtb .section {
	border-radius: calc(var(--corner-radius) * 8) 0 0 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);
}
/* =============================================
   ホーンテッドハロウィン　#haunted
============================================= */

#haunted {
	background-color: var(--color-secondary);
	color:#fff;
}
#haunted .s-card__text,
#haunted dl,
#haunted .text{
	font-family: var(--font-family-Zen-Go);
}

#haunted .section {
	background-color: var(--color-haunted);
}

#haunted dl dt {
	background-color: #fff;
	color: var(--color-haunted);
	border: 1px solid;
}

#haunted .haunted-pickup {
	display: grid;
	gap: 3rem;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

#haunted .haunted-pickup .s-card .s-card__txt {
	padding-top: calc(var(--scard-padding) * 0);
}

#haunted .haunted-pickup .s-card {
	background-color:#fff;
	color:#000;
	gap: 1.6rem;
}

#haunted .s-card__logo {
    --scard-logo-height:10rem;
	color:#fff;
	background-color:#231815;
}



#haunted .miffy-pickup .s-card__title {
	color:#f26522;
}

#haunted .js-swiper {
	padding-left: 2.4rem;
	padding-right: 2.4rem;
	overflow: visible;
}

#haunted  .date {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.haunted-cruise{
  position: relative;
}
.haunted-cruise p{
	background: linear-gradient(180deg, #f9f0ff 0%, #f894ff 100%);
	 background-image: linear-gradient(132deg,rgba(255, 255, 255, 1) 25%, rgba(1250, 140, 240, 1) 50%, rgba(255, 255, 255, 1) 75%);
    background-size: 200%;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	 animation: gradation 5s infinite linear;
}
@keyframes gradation {
    0%{
        background-position: 0% 0%;
    }
    50%{
        background-position: 100% 0%;
    }
    100%{
        background-position: 0% 0%;
    }
}


.haunted-cruise .c-card-group {
  z-index: 1;
}
.haunted-cruise:before{
	content: "";
	background-image: url(../img/index/haunted/cruise_bg.webp);
	background-size: cover;
	background-position:center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

.haunted-cruise:after{
  content: "";
  background: #352359;
  background: linear-gradient(0deg,rgba(53, 35, 89, 1) 0%, rgba(53, 35, 89, 0) 25%, rgba(53, 35, 89, 0.02) 75%, rgba(53, 35, 89, 1) 100%);

  background: linear-gradient(0deg, rgba(53, 35, 89, 1) 0%, rgba(53, 35, 89, 0) 100%);
  position: absolute;
	top: 0;
  left: 0;
  width: 100%;
	height: 100%;
}


@media screen and (min-width: 1024px) {
	#haunted .js-swiper {
		padding: 0rem;
	}
}



/* =============================================
   ミッフィー・ハロウィン　#miffyhalloween
============================================= */

#miffyhalloween {
	background-color: var(--color-haunted);
	color:#562C08;
	font-family: var(--font-family-Zen-Maru-Go);
}

#miffyhalloween .section {
	background-color: var(--color-miffy);
}

#miffyhalloween dl dt {
	background-color: #fff;
	color: #f26522;
	border: 1px solid;
}

#miffyhalloween .miffy-pickup {
	display: grid;
	gap: 3rem;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

#miffyhalloween .miffy-pickup .s-card {
	background-color:#fff;
	color:#562C08;
	gap: 1.6rem;
}
#miffyhalloween .miffy-pickup .s-card .s-card__txt {
	padding-top: calc(var(--scard-padding) * 0);
}

#miffyhalloween .s-card__logo {
    --scard-logo-height:10rem;
	color:#fff;
	background-color:#f26522;
}

#miffyhalloween .miffy-pickup .s-card__title {
	color:#f26522;
}

#miffyhalloween .js-swiper {
	padding-left: 2.4rem;
	padding-right: 2.4rem;
	overflow: visible;
}
#miffyhalloween .s-card__img .js-swiper {
		padding: 0rem;
}

@media screen and (min-width: 1024px) {
	#miffyhalloween .js-swiper {
		padding: 0rem;
	}
}



/* =============================================
   テイストオブ九州　#tastekyushu
============================================= */

#tastekyushu {
	background-color: var(--color-miffy);
	color: #fff;
}

#tastekyushu .section {
	background-color: var(--color-tastekyushu);
}

#tastekyushu dl dt {
	background-color: #fff;
	color: #936939;
	border: 1px solid;
}

#tastekyushu .hotels-gourmet {
	display: grid;
	gap: 3rem;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

#tastekyushu .hotels-gourmet .s-card {
	background-color:#F1E6DA;
	color:#000;
}

#tastekyushu .hotels-gourmet .s-card__title {
	color:#936939;
}

#tastekyushu .hotels-gourmet .swiper-slide:before{
	content:"Hotel Gourmet";
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	border-radius:2rem;
	padding: 1rem 3rem;
	line-height: 100%;
	color:#936939;
	font-size: calc(var(--font-size-md) * 1);
	font-weight: 600;
	z-index: 1;
	text-align: center;
	background-color:#F1E6DA;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23936939' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1.2rem center;
	background-size: 2.4rem;
	padding-left: 4.6rem;
	position: absolute;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
	width: fit-content;
	white-space: nowrap;
}
#tastekyushu .hotels-gourmet .swiper-slide .swiper-slide:before{
	display:none;
}


#tastekyushu .js-swiper {
	padding-left: 2.4rem;
	padding-right: 2.4rem;
	overflow: visible;
}


#tastekyushu .hero-menu{
	display: flex;
	max-width: 1440px;
	margin: 0 auto;
}
#tastekyushu .hero-menu__body{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.6rem;
	max-width: 1440px;
	margin: 0 2.4rem;
	padding: 1.6rem;
	background: #ffeed5;
	position: relative;
}

#tastekyushu .hero-menu__body:before{
	content:"PickUp";
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	border-radius:1rem;
	padding: 1rem 3rem;
	line-height: 100%;
	color:#6E4F2B;
	font-size: calc(var(--font-size-md) * 1);
	font-weight: 600;
	z-index: 1;
	text-align: center;
	background-color:#ffeed5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E4F2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1.2rem center;
	background-size: 2.4rem;
	padding-left: 4.6rem;
	position: absolute;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
	width: fit-content;
	white-space: nowrap;
}


#tastekyushu .hero-menu button{
	flex: 0 0 calc(50% - 0.8rem);
	min-width: 0;
	display: block;
	overflow: hidden;
	border-radius: 1rem;
	background:var(--color-tastekyushu);
	background: #000;
	
}
#tastekyushu .hero-menu button figure {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
}
#tastekyushu .hero-menu button figure.kari:before {
  content: "仮";
  position: absolute;
  top: 20%;
  transform: translate(-50%, -20%);
  font-size: 1.6rem;
}

#tastekyushu .hero-menu button img{
}
#tastekyushu .hero-menu button figure p{
	padding: 1rem;
	font-size: calc(var(--font-size-sm) * 1);
	font-weight: 700;
	line-height: 140%;
	text-align: center;
}
#tastekyushu .s-card__img .js-swiper {
  padding: 0rem;
}

@media screen and (min-width: 1024px) {
	#tastekyushu .hero-menu__body {
	  gap: 2.4rem;
	  margin: 0 auto;
	  padding: 2.4rem;
	  background: #ffeed5;
	  border-radius: 2.4rem;
	}
	#tastekyushu .hero-menu button {
		flex: 1 1 0; 
		min-width: 0;
	}
	#tastekyushu .js-swiper {
		padding: 0rem;
	}
}


/* =============================================
   ワインフェス　#winefes
============================================= */

#winefes {
}

#winefes .winefes{
	display: grid;
	gap: 3rem;
	text-align: center;
	margin: 0 2.4rem;
	width: auto;
	max-width: 1200px;
	  border: 6px #b23f6e double;
}

#winefes .c-card-group {
	background: #fff;
	padding: 0 0 var(--space-x);
}

#winefes .c-card {
	color: #000;
	overflow: visible;
}

#winefes .c-card__label {
	background-color: #b23f6e;
	position: absolute;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 auto;
}

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

#winefes .c-card .c-card__header {
	color: #b23f6e;
}

#winefes dl dt {
	background-color: #fff;
	color: #b23f6e;
	border: 1px solid;
}

@media screen and (min-width: 1024px) {
	#winefes .c-card__label {
		top: -2.4rem;
	}
}

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

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

#other-events picture {
  height: 100%;
  display: flex;
}
#other-events .c-card__txt {
  align-content: center;
}


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



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