@charset "UTF-8";


main,
section {
  width: 100%;
  position: relative;
}

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

nav.c-nav

*************************************************/
nav.c-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
}



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

dialog

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


/* ダイアログ開時に背景のスクロールを防ぐ */
html:has(dialog.c-dialog[open]) {
  overflow: hidden;
}

/* ======================================================================
   Dialog Base
   ====================================================================== */
dialog.c-dialog {
  transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

dialog.c-dialog::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

/* ======================================================================
   Menu Dialog (Drawer)
   ====================================================================== */
dialog.c-dialog.c-dialog--menu {
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  width: 50%;
  left: auto;
  margin: 0;
  border: 0;
  outline: 0;
  padding: 0;
}

/* 表示前/非表示後（JSで付与する想定：show-from / hide-to） */
dialog.c-dialog.c-dialog--menu.show-from,
dialog.c-dialog.c-dialog--menu.hide-to {
  translate: 100% 0%;
}

/* 表示前/非表示後は背景も透明 */
dialog.c-dialog.c-dialog--menu.show-from::backdrop,
dialog.c-dialog.c-dialog--menu.hide-to::backdrop {
  opacity: 0;
}

/* inner/body（BEM要素） */
.c-dialog__inner { /* 必要ならここに余白など */ }
.c-dialog__body  { /* 必要ならここに余白など */ }

/* ======================================================================
   Menu Button (Hamburger / Close)
   ====================================================================== */
.c-dialog__menu-btn {
  position: relative;
  width: 32px;
  height: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}

/* 線 */
.c-dialog__menu-btn span {
  position: relative;
  width: 30px;
  height: 1px;
  background-color: #000;
  transition: transform .2s cubic-bezier(.27,1.2,.6,1), opacity .2s cubic-bezier(.27,1.2,.6,1);
}

/* open（ハンバーガー） hover演出 */
@media (any-hover: hover) {
  .c-dialog__menu-btn--open:hover span:nth-child(1) {
    transform: translateY(3px);
  }
  .c-dialog__menu-btn--open:hover span:nth-child(3) {
    transform: translateY(-3px);
  }
}

/* close（×）スタイル：見た目は c- のmodifierに寄せる */
.c-dialog__menu-btn--close {
  background: #000;
  padding: 10px;
  height: 56px;
  width: 56px;
  margin: 0 0 0 auto;
  align-items: center;
}

.c-dialog__menu-btn--close span {
  position: absolute;
  background-color: #fff;
}

.c-dialog__menu-btn--close span:nth-child(1) {
  transform: translateY(18px) rotate(-45deg);
}
.c-dialog__menu-btn--close span:nth-child(2) {
  opacity: 0;
}
.c-dialog__menu-btn--close span:nth-child(3) {
  transform: translateY(18px) rotate(45deg);
}

/* ======================================================================
   Modal Dialog (Template)
   - 見た目は c- に寄せる
   - 挙動（open/close）は JS が is-open を付ける想定
   ====================================================================== */
dialog.c-dialog-modal {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  border: none;

  padding: 30px 20px;
  border-radius: 20px;
  max-width: 780px;
  background: #e2e2e2;
  margin: auto;
  width: 96%;
}

/* 開いた状態 */
dialog.c-dialog-modal.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* backdrop */
dialog.c-dialog-modal::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease-out;
}
dialog.c-dialog-modal.is-open::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* show-from / hide-to を使うアニメ（既存互換） */
dialog.c-dialog-modal.show-from,
dialog.c-dialog-modal.hide-to {
  opacity: 0;
  translate: 0% 10%;
}
dialog.c-dialog-modal.show-from::backdrop,
dialog.c-dialog-modal.hide-to::backdrop {
  opacity: 0;
}

/* inner */
.c-dialog-modal .c-dialog-modal__inner {
  display: grid;
  gap: 22px;
  justify-content: center;
  justify-items: center;
  grid-template-columns: 1fr;
}

.c-dialog-modal .c-dialog-modal__inner .item {
  width: 100% !important;
}

.c-dialog-modal .c-dialog-modal__inner .head {
  font-weight: 500;
  font-size: 16px;
  line-height: 160%;
  text-align: center;
  background: #D9D9D9;
  padding: 6px;
  width: 100%;
}

.c-dialog-modal .c-dialog-modal__inner ul {
  list-style: disc;
  margin-left: 25px;
  font-weight: 400;
  font-size: 14px;
  line-height: 170%;
}

.c-dialog-modal .c-dialog-modal__inner a {
  text-align: center;
  color: #000;
  border-bottom: 1px #000 solid;
  text-decoration: none;
}

/* closeボタン（JSフックはそのまま、見た目はCSS側で） */
.c-dialog-modal .js-dialog-close {
  font-weight: 500;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 10%;
  text-align: center;
  background: var(--color-black);
  color: #fff;
  padding: 8px 40px;
  border-radius: 5px;
  margin: 20px auto 0;
}

/* 遷移中 */
dialog.is-changing {
  transition: transform 0.3s ease-out;
}

/* Controls / Nav（新HTMLに合わせる） */
.c-dialog-modal__controls {
  display: grid;
  gap: 20px;
  width: 100%;
  justify-items: center;
  margin-top: 10px;
}

.c-dialog-modal__nav {
  display: flex;
  gap: 10px;
}

.js-dialog-prev,
.js-dialog-next {
  background-color: #555;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.js-dialog-prev:disabled,
.js-dialog-next:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.5;
}

.c-dialog-modal__controls .js-dialog-close {
  margin: 0 auto !important;
}

/* ======================================================================
   (Optional) existing .dialog_btn (使ってる場合のみ)
   ====================================================================== */
.dialog_btn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-top: 30px;
}
.dialog_btn .btn{
  background: transparent;
  border: 1px #644839 solid;
  color: #644839;
}
.dialog_btn .btn:after {
  background-color: #644839;
}



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

swiper対策

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



.swiper {
  width: 100%;
  min-width: 0;
}

.swiper-slide {
  min-width: 0;
  display: flex;
  height: auto; /* 高さに依存させない */
}
.swiper-wrapper {
  display: flex !important;
   justify-content: flex-start;
   height: auto;
}


.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	position: relative;
	margin-top: 4rem;
	bottom:0;
	top:0;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--color-black);
}
.swiper-pagination-bullet {
  width:10px;
  height:10px;
  display: inline-block;
}

.swiper-button-next, .swiper-button-prev {
  position: absolute;
  width: auto;
  height: auto;
}
.swiper-button-next:after, .swiper-button-prev:after {
	content: "";
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color:#000;
	background-repeat: no-repeat;
	background-position: center;
	width: 50px;
	height:50px;
	display: block;
	mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20157.58%20157.58%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20d%3D%22M78.79%2C0C35.27%2C0%2C0%2C35.27%2C0%2C78.79s35.27%2C78.79%2C78.79%2C78.79%2C78.79-35.27%2C78.79-78.79S122.3%2C0%2C78.79%2C0ZM67.88%2C111.24l-2.63-2.63%2C29.81-29.81-29.81-29.81%2C2.63-2.63%2C32.45%2C32.45-32.45%2C32.45Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}

.swiper-button-prev:after {
  transform: rotate(180deg);
}



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

img

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

img {
  object-fit: cover;
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  transition: 0.6s all;
  margin: 0 auto;
  display: block;
}


img.mercisbv {
  margin: 0px 0 0px auto;
  position: absolute !important;
  bottom: 0;
  right: 0;
  aspect-ratio: auto !important;
  width: 76px !important;
  height: auto !important;
  z-index: 1;
  height: auto;
  top: auto;
  padding: 3px;
}

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

ol li

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

ul.asterisk{
	text-align: left;
	font-weight: 400;
	letter-spacing: 0;
	gap: 2px;

}
ul.asterisk li:before{
	content: "※";
	display: block;
	left: 0;
	margin: auto;
	padding: 0;
	position: absolute;
	top: 0;
}
ul.asterisk.midpoint li:before{
	content: "・";
}
ul.asterisk.circle li:before{
	content: "●";
}
ul.asterisk li{
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 15px;
	position: relative;
}

dl.table{
	display: grid;
	justify-content: flex-start;
	align-items: start;
	margin: 10px auto;
	position: relative;
	gap: 10px;
	grid-template-columns:auto 1fr;
	width: 100%;
}
dl.table dt{
	width: 100px;
	display: block;
	background:#484747;
	color: #fff;
	border-radius: 5px;
	margin-right: 10px;
	padding: 3px 10px;
	line-height: 1.2;
	text-align: center;
}




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

.btn 

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

.c-btn {
  background-color: var(--color-orange);
  border: 2px solid;
  border-color: var(--color-orange);
  display: block;
  color: #fff;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4rem;
    padding: 1.8rem 3rem;
  font-family: YakuHanJP,"Zen Kaku Gothic New", sans-serif!important;
  border-radius: 9999px;
}

.c-btn.enjoy-border {
  background-color: var(--color-white);
  border-color: var(--color-htb-enjoy);
  color: var(--color-htb-enjoy);
}
.c-btn.expass-border {
  background-color: var(--color-white);
  border-color: var(--color-htb-event);
  color: var(--color-htb-event);
}

.c-btn span {
  line-height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  justify-content: center;
}

a.c-btn span:after {
  content: "";
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 15px;
  display: block;
  mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20123.93%20123.93%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20d%3D%22M61.97%2C0C27.74%2C0%2C0%2C27.74%2C0%2C61.97s27.74%2C61.97%2C61.97%2C61.97%2C61.97-27.74%2C61.97-61.97S96.19%2C0%2C61.97%2C0ZM81.11%2C65.62l-23.24%2C23.24c-1.01%2C1.01-2.33%2C1.51-3.65%2C1.51s-2.64-.5-3.65-1.51c-2.02-2.02-2.02-5.29%2C0-7.3l19.59-19.59-19.59-19.59c-2.02-2.02-2.02-5.29%2C0-7.3s5.29-2.02%2C7.3%2C0l23.24%2C23.24c2.02%2C2.02%2C2.02%2C5.29%2C0%2C7.3Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
}

a.c-btn:hover {
  opacity: 0.7;
}