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


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

:root {

	--color-primary: #b71d22;
	--color-secondary: #f7e7b7;
	--color-accent: #d19f00;
	--color-xmas-bg:#00131e;
	--color-xmas-bg-rgb: 0, 20, 30;
	--color-xmas-green: #2d6049;
	--color-base: #ffe7c5;
	--color-miffy-yellow: #ffc80b;
	--color-miffy-orange: #f26522;
	--color-miffy-green: #247033;
	--color-miffy-blue: #005599;
	--color-miffy-brown: #917f70;


	--content-max-width: 1440px;

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



#xmas {
	background:#00131e;
	color: #fff;
}

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

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

#xmas  #page__footer{
	color:#fff;
}

@media screen and (max-width: 768px) {
	#xmas .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 section.page__kv:before{
  content: "";
  background: #1A1E34;
  background: linear-gradient(0deg, rgba(var(--color-xmas-bg-rgb), 1) 0%, rgba(var(--color-xmas-bg-rgb), 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 1;
}

/* Canvas（背景アニメーション） */
#kiraKiraCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	opacity: 0.7;
}


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

#term {
	position: relative;
	background: #000;
}
#term:before,
#term:after {
  content: "";
  background: #1A1E34;
  background: linear-gradient(0deg, rgba(var(--color-xmas-bg-rgb), 0) 0%, rgba(var(--color-xmas-bg-rgb), 1) 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  z-index: 1;
}
#term:after {
  top: auto;
  bottom: 0;
  transform: rotate(180deg);
}
#term .page__body {
  z-index: 2;
}

#term .section {
	padding-top:0;
	position: relative;
}
#term .section:before {
content: "";
  background: url(../img/index/bg.webp);
  background: url(../img/index/star.webp), url(../img/index/bg.webp);
  background-size: 250%;
  background-repeat: no-repeat;
  background-position: top;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: opacity;
  opacity: 0.6;
  mix-blend-mode: hard-light;
}
/* アニメーション定義 */
@keyframes opacityPulse {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

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

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

#term .text-logo {
	width: 100%;
	margin-top: -4rem;
}
#term .text-logo  figure {
  justify-content: center;
}
#term .text-logo picture{
	width: 100%;
	max-width: 640px;
}
#term .text-logo picture img{
	filter: drop-shadow(2px 4px 6px rgba(0, 20, 30, 0.8));
}
#term time{
	font-size: calc(var(--font-size-base) * 1.4);
	font-weight: 600;
	line-height: 140%;
	text-align: center;
	font-family: var(--font-family-Zen-Mi);
	text-shadow: 1px 1px 10px rgba(0, 20, 30, 0.8),-1px -1px 10px rgba(0, 20, 30, 0.8);
	
}
#term time em{
	font-size:160%;
}

#term .text-logo-read{
	font-size: calc(var(--font-size-base) * 1.6);
	font-weight: 300;
	line-height: 140%;
	text-align: center;
	color: var(--color-secondary);
}

#term .text{
  font-size: calc(var(--font-size-base) * 1);
  text-align: center;
  max-width: 640px;
  line-height: 200%;
  color:#fff;
  color: var(--color-secondary);
}

@media screen and (min-width: 1024px) {
	#term .text-logo-read {
	  font-size: calc(var(--font-size-base) * 2.2);
	}
	#term .term-txt{
		gap: 4.4rem;
	}
	#term .text{
		font-size: calc(var(--font-size-base) * 1);
	}
	#term .section:before {
			background-size: cover
	}

}

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

.news {
	background: rgb(0 0 0 / 20%);
	font-size: calc(var(--font-size-base) * 1);
	font-weight: 500;
	padding-bottom: 0.4rem;
	border: 1px rgb(255 255 255 / 50%) solid;
}
.news dt{
	background: var(--color-primary);
	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) * 0.5) 0 0;
	gap: calc(var(--space-y) * 0.5);
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	color:#fff;
}
.rtb .page__header .page__header-headding{
	font-size: calc(var(--font-size-base) * 1.8);
	font-weight: 500;
	line-height: 140%;
	text-align: center;
	color: var(--color-secondary);
}

@media screen and (min-width: 1024px) {
	.rtb .page__header{
	}
	.rtb .page__header .page__header-headding{
		font-size: calc(var(--font-size-base) * 2.2);
	}
}

/* =============================================
  .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 #fff;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	top: 0;
	left: 0;
}
.c-card dl::after {
	border-right: solid 1px #fff;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	top: 0;
	right: 0;
}
.c-card dl dt{
	background:transparent;
	color:#fff;
	align-items: flex-start;
	padding:0.5rem 0 0 0;
}
.c-card dl dt,
.c-card dl dd{
  line-height: 140%;
}
.c-card__img.multiple {
	display: grid;
	grid-template-columns: 1fr 1fr;
	  gap: calc(var(--card-gap) * 0.5);
}


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

.s-card dl, .s-card dl {
  padding:0.8rem 1.4rem;
}
.s-card dl::before {
	border-left: solid 1px #fff;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	top: 0;
	left: 0;
}
.s-card dl::after {
	border-right: solid 1px #fff;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	top: 0;
	right: 0;
}
.s-card dl dt{
	background:transparent;
	color:#fff;
	align-items: flex-start;
	padding:0.5rem 0 0 0;
}

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

.js-json-open{
}

.js-json-open figure picture:before {
  content: "";
  width: 20px;
  height: 20px;
  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: #fff;
	text-align: center;
	text-decoration: underline;
	font-size: calc(var(--font-size-base) * 0.9);
	margin:0.5rem auto 0;
	display:none;
}
.js-json-open figure picture{
  border: 2px var(--color-secondary) solid;
  position: relative;
}

.c-dialog-modal__body{
  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: 100%;
}
.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); }
}

@media screen and (min-width: 1024px) {
	.js-json-open {
	  width: calc(100% / 3 - 1.5rem);
	}
}
/* =============================================
   RTB共通
============================================= */



.rtb .section {
	border-radius:0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.rtb.last .section {
}

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

.rtb .s-card__title,
.rtb .c-card__catch {
	border: 0;
	font-weight: 300;
}
.rtb .s-card__title{
	font-weight:500;
}


.rtb .c-card__catch:after {
	content: "";
	background: url(../img/index/star.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 3rem;
	border: 0;
	display:none;
}
.rtb .c-card__catch:after {
	content: "";
	width: 60%;
	height: 1px;
	background: #C2A008;
	background: linear-gradient(90deg,rgba(194, 160, 8, 0) 0%, rgba(194, 160, 8, 1) 20%, rgba(255, 233, 133, 1) 50%, rgba(194, 160, 8, 1) 80%, rgba(194, 160, 8, 0) 100%);
	background-size: 100%;
	display: block;
	position: relative;
	animation: 5s linear 0s infinite normal none running gradation;
	margin: 2rem auto;
}


.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__txt {
  gap: calc(var(--card-gap) * 1.8);
  padding: calc(var(--card-padding) * 2.5) calc(var(--card-padding) * 2.5);
}
.rtb .c-card__body {
  gap: calc(var(--card-gap) * 2.4);
}
.rtb .c-card__link {
	gap: calc(var(--card-gap) * 1);
}

.rtb .c-card__link .btn {
  background-color:var(--color-accent);
    min-width: 260px;
}
.rtb .c-card__link .btn:before {
	content: "";
	background: url(../img/index/btn_star.png);
	background-size: cover;
	position: absolute;
	top: -3rem;
	right: -1rem;
	width: 40%;
	height: 50px;
}


@media screen and (min-width: 1024px) {
	.rtb .c-card__link {
		gap: calc(var(--card-gap) * 0.5);
	}
	.rtb .c-card__body {
	  gap: calc(var(--card-gap) * 1.6);
	}
	.rtb .c-card__txt {
	  padding: calc(var(--card-padding) * 0.5) calc(var(--card-padding) * 1.5)!important;
	}
}


/* =============================================
  rtb.highlights
============================================= */
.highlights {
  position: relative;
}
.highlights:before {
  content: "";
  background: #1A1E34;
  background: linear-gradient(0deg, rgba(var(--color-xmas-bg-rgb), 0) 0%, rgba(var(--color-xmas-bg-rgb), 1) 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  z-index: 1;
}
.highlights:after{
	content: "";
	background: url(../img/index/bg_sp.webp);
	background-size:cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: opacity;
	opacity: 0.5;
	mix-blend-mode: hard-light;
  z-index: 0;
}

.highlights .movie {
	width: 100%;
	z-index: 1;
	position: relative;
	aspect-ratio: 4 / 3;
	  overflow: hidden;
}
.highlights .movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
	object-fit: cover;
}

.highlights .section:before {
  content: "";
  background:var(--color-accent);
  position: absolute;
  top: 0;
  left: 0;
  width: 1.6rem;
  width: 100%;
  height:100%;
  z-index:0;
}
.highlights .section:after {
/*
	content: "";
	background-image: url(../img/index/bg_sp.webp);
	position: absolute;
	top: 0;
	left: 0;
	width: 1.6rem;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-repeat: no-repeat;
	mix-blend-mode: hard-light;
	opacity: 0.5;
*/
}


@media screen and (min-width: 1024px) {
	.highlights:after {
		background: url(../img/index/bg_pc.webp);
	}
	.highlights .section:before{
		width:100%;
	}
}
#xmasmarket{
	
}
#xmasmarket.highlights .section:before {
  background:var(--color-xmas-green);
}


#xmasmarkets,
#eventshow{
  background:var(--color-xmas-green);
    position: relative;
}
#eventshow{
  background:#7e0101;
  background: var(--color-primary)
}


#xmasmarkets.rtb .section{
  padding-top: 0;
}

#xmasmarkets:before,
#eventshow:before {
/*
  content: "";
  background: url(../img/index/xmasmarkets/bg.webp);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: opacity;
  opacity: 1;
  mix-blend-mode: hard-light;
  z-index: 0;
*/
}
#eventshow:before {
	background: url(../img/index/eventshow/bg.webp);
	background-size: contain;
	opacity: 0.5;
}

#xmasmarkets.rtb .section,
#eventshow.rtb .section {
  overflow: visible;
}
#xmasmarkets section:before ,
#eventshow section:before {
/*
	content: "";
	background: url(../img/index/star.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20rem;
	z-index: 0;
	mix-blend-mode: hard-light;
*/
}


#xmasmarkets.rtb .c-card__txt,
#eventshow.rtb .c-card__txt{
  gap: calc(var(--card-gap) * 1);
  padding: calc(var(--card-padding) * 1.5) calc(var(--card-padding) * 0);
}
#xmasmarkets.rtb .c-card__title,
#eventshow.rtb .c-card__title{
  font-size: calc(var(--card-font-size) * 1.6);
color: var(--color-secondary);
}

#eventshow.rtb .s-card__txt {
  gap: calc(var(--scard-gap) * 2);
  padding: calc(var(--scard-padding) * 1.5) calc(var(--scard-padding) * 0);
}
#eventshow.rtb .s-card__title{
  font-size: calc(var(--scard-font-size) * 1.4);
color: var(--color-secondary);
font-weight: 600;
}


#xmasmarkets.rtb .page__header .page__header-headding,
#eventshow.rtb .page__header .page__header-headding {
/*
text-shadow: 1px 1px 10px var(--color-xmas-green), -1px -1px 10px var(--color-xmas-green);
*/
}


/* 左右に二重斜線を持つテキストコンポーネント */
.double-slash-text {
  /* 変数定義 */
  --slash-color: #fff;       /* 線の色 */
  --slash-width: 1px;            /* 線の太さ */
  --slash-gap: 4px;              /* 2本の線の間隔 */
  --slash-height: 0.8em;         /* 線の長さ（高さ） */
  --slash-angle: 20deg;          /* 線の傾き角度 */
  --text-gap: 0.6em;             /* テキストと線の間隔 */

  position: relative;
  display: inline-flex;
    align-items: flex-end;
  justify-content: center;
  gap: var(--text-gap);
  color: #fff;
  font-weight: bold;
  line-height: 1;
  margin-bottom:1rem;
}

/* 左右共通の斜線ベーススタイル */
.double-slash-text::before,
.double-slash-text::after {
  content: "";
  display: inline-block;
  width: var(--slash-width);
  height: var(--slash-height);
  background-color: var(--slash-color);
}

/* 左側の二重線 (＼＼ 向いて右下がり) */
.double-slash-text::before {
  transform: rotate(calc(var(--slash-angle) * -1));
  box-shadow: var(--slash-gap) 0 0 0 var(--slash-color);
  margin-right: var(--slash-gap); /* 影の飛び出し分を調整 */
}

/* 右側の二重線 (／／ 向いて右上がり) */
.double-slash-text::after {
  transform: rotate(var(--slash-angle));
  box-shadow: calc(var(--slash-gap) * -1) 0 0 0 var(--slash-color);
  margin-left: calc(var(--slash-gap) * -1); /* 影の方向へのオフセット調整 */
}

#eventshow .movie {
	width: 100%;
	z-index: 1;
	position: relative;
	aspect-ratio: 4 / 3;
	  overflow: hidden;
}
#eventshow .movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
	object-fit: cover;
}

.js-slide-body{
  display: block;
  width: 100%;
}


.js-slide-body .s-card {
  padding: 0;
  border-radius: 0;
}


#xmasmarket .btn,
#xmasmarkets .btn {
	background-color:#fff;
	color:#0f2d44;
}

#eventshow  .btn {
	background-color: #fff;
	color: var(--color-primary);
	font-size: calc(clamp(1.5rem, 1.157rem + 0.71vw, 1.8rem) * 0.8);
}

@media screen and (min-width: 1024px) {
	#xmasmarkets section:before ,
	#eventshow section:before {
	  background-size: cover;
	  background-position: bottom;
	  height: 50rem;
	}
	#xmasmarkets .page__body__inner, #xmasmarkets .page__body__inner--full,
	#eventshow .page__body__inner, #eventshow .page__body__inner--full {
	max-width:1200px;
	}
}

/* =============================================
  #fireworks
============================================= */
#fireworks.highlights:before {
	display:none;
}
#fireworks.highlights .section:before {
  background: var(--color-primary);
  display:none;
}
#fireworks .c-card__title {
	color: var(--color-secondary);
	font-weight: 600;
}

#fireworks .btn {
	background-color:#fff;
	color:#0f2d44;
}
#fireworks .btn:before {
  content: "";
  background: url(../img/index/btn_star.png);
  background-size: cover;
  position: absolute;
  top: -3rem;
  right: -1rem;
  width: 40%;
  height: 50px;
}

@media screen and (min-width: 1024px) {
  #fireworks.highlights .section:before {
    width: 30%;
  }
	 #fireworks .page__body__inner, #fireworks .page__body__inner--full{
	max-width:1200px;
	}
}

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


#other-events {
background-color: var(--color-miffy-yellow);
}

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

#other-events picture {
  height: 100%;
  display: flex;
}
#other-events .c-card__txt {
  align-content: center;
    font-family: var(--font-family-Zen-Maru-Go);
}
#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 (min-width: 1024px) {
	#other-events .page__body__inner, #other-events .page__body__inner--full{
	max-width:1200px;
	}
}

@media screen and (max-width: 768px) {
	#other-events .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;
	}
}




@media screen and (min-width: 1024px) {
	.htb-map{
	  min-height: 480px!important;
	}
}



#xmas.gourmet {
  background:#fff;
  color: #000;
}

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