:root {
  /*============================================================
  ==============================================================
  COLOR NÜCHI
  ==============================================================
  ============================================================*/

  /* Primary Color */
  --colorBeige: #b18f4e;


  /* Secondary Color */
  --colorBlack: #333333;
  /* Accent Color */
  --colorWhite: #f0ece4;
  /* --colorSkyblue: #a8bfca; */
  --colorBrown: #9c8d71;
  --colorDarkBrown: #63524d;


  /*============================================================
  ==============================================================
  HEIGHT & WIDTH
  ==============================================================
  ============================================================*/
}



/*============================================================
==============================================================
BUTTON
==============================================================
============================================================*/
/* Gatch Hairline */


body {
  /* font-family: 'Zen Kaku Gothic Antique', sans-serif; */
  font-family: "Cormorant Garamond", "Zen Old Mincho", serif;
  background: var(--colorBeige);
  font-weight: 300;
  font-optical-sizing: auto;
  padding-top: 96px;
}

@media only screen and (max-width: 1024px) {
  body {
    padding-top: 64px;
  }
}

.contents {
  z-index: 10000;
}

img, video {
  height: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
}

video {
  height: 100%;
}

.inner {
  padding: 0 96px;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  position: relative;
  margin: 0 auto;
}

.inner-tight {
  padding: 0 56px;
  width: 100%;
  height: 100%;
  max-width: 1080px;
  position: relative;
  margin: 0 auto;
}
.inner-policy {
  padding: 0 56px;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
}





/*============================================================
TEXTS
============================================================*/
/* 共通スタイル */
h1,
h2,
h3,
h4,
h5,
h6,
p,
address,
figure,
img,
iframe,
audio {
  margin-bottom: 16px;
}

p,
address {
  font-size: 16px;
  line-height: 1.75;
  background: none;
}

.uppercase {
  text-transform: uppercase;
}

/* 見出しのサイズ */
h1 {
  font-size: 96px;
  /* letter-spacing: -.05em; */
  font-weight: 200;
}

h2 {
  font-size: 48px;
  /* letter-spacing: -.07em; */
}

h3 {
  font-size: 32px;
  font-optical-sizing: auto;
  /* letter-spacing: -.02em; */
}

h4 {
  font-size: 20px;
  line-height: 1.6;
  /* color: var(--colorBeige); */
}

h5 {
  font-size: 18px;
}
h6 {
  font-size: 12px;
}

/* h2 のバリエーション */
h1.h1__small {
  font-size: 48px;
}

h2.h2__small {
  font-size: 48px;
}

h2.h2__large {
  font-size: 64px;
}

/* h2.h2__large 内の span のサイズ */
h2.h2__large span {
  font-size: 14px;
  margin-bottom: 5px;
}

/* h2, h3 内の span のスタイル */
h2 span,
h3 span {
  font-size: 12px;
  margin-bottom: 8px;
  /* letter-spacing: normal; */
}

/* 見出し内の span を考慮したレイアウト */
h2:has(span),
h3:has(span) {
  display: flex;
  flex-direction: column;
}

/* メディア要素の共通設定 */
iframe,
audio {
  width: 100%;
}

/* iframe を 16:9 に調整 */
iframe {
  aspect-ratio: 16 / 9;
}

@media only screen and (max-width: 1024px) {
  .inner {
    padding: 0 40px;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    position: relative;
    margin: 0 auto;
  }
}


@media only screen and (max-width: 1280px) {
  h1 {
    font-size: 64px;
  }
    h1.h1__small {
      font-size: 32px;
    }
}

@media only screen and (max-width: 767px) {
  .inner {
    padding: 0 24px;
  }
  .inner-tight {
    padding: 0 24px;
  }
  .inner-policy {
    padding: 0 24px;
  }
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 32px;
  }
  h2.h2__small {
    font-size: 28px;
  }

  h2.h2__large {
    font-size:40px;
  }

  h2.h2__large span {
    font-size: 10px;
  }

  h3 {
    font-size: 24px;
    font-weight: 400;
  }

  h4 {
    font-size: 20px;
    font-weight: 400;
  }
  h6 {
    font-size: 10px;
  }

  p, dd {
    font-size: 16px;
    font-weight: 300;
  }
  section {
    position: relative;
  }

  .section__pd {
    padding: 40px 0;
  }
  .section__pt {
    padding-top: 40px;
  }
  .section__pb {
    padding-bottom: 40px;
  }

}
/*
h1.zen-kaku,
h2.zen-kaku,
h3.zen-kaku,
h4.zen-kaku,
h5.zen-kaku,
h6.zen-kaku {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
} */
.zen-mincho {
  font-family: "EB Garamond", "Zen Old Mincho", serif;
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6,
dt,
h4 {
    font-family: "Cormorant Garamond", "Zen Old Mincho", serif;
    font-weight: 400;
}

p, dd, time, h2.info__title, .news__cat, ol li, ul li, .btn {
    font-family: "Jost", 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 400;
}


#news-post h1 {
  font-size: 24px;
}

#philosophy h4 {
  font-size: 24px;
}
@media only screen and (max-width: 767px) {
  #philosophy h4 {
    font-size: 16px;
  }
}
/* Margin 0 Utilities */
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Padding 0 Utilities */
.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.lh-05 {
  line-height: 0.5;
}

/*============================================================
==============================================================
BACKGROUND
==============================================================
============================================================*/

.bg-beige {
  background: var(--colorBeige);
  color: var(--colorWhite);
  /* border: solid .5px var(--colorWhite); */
}

.bg-black {
  background: var(--colorBlack);
  color: var(--colorWhite);
  /* border: solid .5px var(--colorWhite); */
}

.bg-white {
  background: var(--colorWhite);
  color: var(--colorBlack);
  /* border: solid .5px var(--colorBeige); */
}

.bg-gradient {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.bg-gradient__bottom {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4));
}

.section__pd {
  padding: 80px 0;
}
.section__pt {
  padding-top: 80px;
}
.section__pb {
  padding-bottom: 80px;
}
.section__pd.pt--0 {
  padding-top: 0;
}
.section__pd.pb--0 {
  padding-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .section__pd {
    padding: 40px 0;
  }
}

/*============================================================
==============================================================
VH
==============================================================
============================================================*/

.h__100p {
  height: 100%;
}


/*============================================================
==============================================================
VH
==============================================================
============================================================*/

.vh__100 {
  height: calc(100vh - 96px);
}
.vh__33 {
  height: calc(33.3333vh - 96px);
}

/*============================================================
==============================================================
FONT WEIGHT
==============================================================
============================================================*/

.fw__100 {
  font-weight: 100;
}

.fw__200 {
  font-weight: 200;
}

.fw__300 {
  font-weight: 300;
}

.fw__400 {
  font-weight: 400;
}

.fw__500 {
  font-weight: 500;
}

.fw__600 {
  font-weight: 600;
}

.fw__700 {
  font-weight: 700;
}

/*============================================================
==============================================================
HIDE & SHOW
==============================================================
============================================================*/

/* PC以上で非表示 */
@media only screen and (min-width: 1025px) {
  .pc__up--dn {
    display: none !important;
  }
}

/* PC未満で非表示（スマホ＋タブレット） */
@media only screen and (max-width: 1024px) {
  .pc__down--dn {
    display: none !important;
  }
}

/* タブレット以上で非表示（タブレット＋PC） */
@media only screen and (min-width: 768px) {
  .tab__up--dn {
    display: none !important;
  }
}

/* スマホ未満で非表示（〜767px） */
@media only screen and (max-width: 767px) {
  .sp__down--dn {
    display: none !important;
  }
}

/* タブレット未満で非表示（〜767px） */
@media only screen and (max-width: 767px) {
  .tab__down--dn {
    display: none !important;
  }
}

/* タブレットのみ非表示（768px〜1024px） */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .tab__only--dn {
    display: none !important;
  }
}

/* スマホのみ非表示 */
@media only screen and (max-width: 767px) {
  .sp__only--dn {
    display: none !important;
  }
}

/* PCのみ非表示 */
@media only screen and (min-width: 1025px) {
  .pc__only--dn {
    display: none !important;
  }
}

/*============================================================
==============================================================
GRID
==============================================================
============================================================*/

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  margin-left: -24px;
  margin-bottom: -24px;
}

.grid__ai-start {
  align-items: flex-start;
}
.grid__ai-center {
  align-items: center;
}
.grid__ai-end {
  align-items: flex-end;
}

.grid__jc-center {
  justify-content: center;
}
.grid__jc-ar {
  justify-content: space-around;
}
.grid__jc-sb {
  justify-content: space-between;
}

.grid__no-gutter {
  margin-left: 0;
  margin-bottom: 0;
}

.grid__no-gutter .grid__item {
  padding-left: 0;
  padding-bottom: 0;
}

.grid__x-small-gutter {
  margin-left: -8px;
  margin-bottom: -8px;
}

.grid__x-small-gutter .grid__item {
  padding-left: 8px;
  padding-bottom: 8px;
}
.grid__small-gutter {
  margin-left: -16px;
  margin-bottom: -16px;
}

.grid__small-gutter .grid__item {
  padding-left: 16px;
  padding-bottom: 16px;
}
.grid__large-gutter {
  margin-left: -40px;
  margin-bottom: -40px;
}

.grid__large-gutter .grid__item {
  padding-left: 40px;
  padding-bottom: 40px;
}

.grid__x-large-gutter {
  margin-left: -72px;
  margin-bottom: -72px;
}

.grid__x-large-gutter .grid__item {
  padding-left: 72px;
  padding-bottom: 72px;
}

.grid__reverse {
  flex-direction: row-reverse;
}

.grid.grid__nested .grid__item .grid .grid__item {
  padding-left: 24px;
    padding-bottom: 24px;
}

@media only screen and (max-width: 767px) {
  .grid__x-large-gutter {
    margin-left: -36px;
    margin-bottom: -36px;
  }
}

/*============================================================
==============================================================
GRID ITEM
==============================================================
============================================================*/

.grid__item {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 100%;
  padding-left: 24px;
  padding-bottom: 24px;
  width: 100%;
  min-height: 1px;
}

.grid__item--as-end {
  align-self: flex-end;
}

/* .grid__card {
  background: var(--colorBeige);
  border-radius: 8px;
  color: var(--colorWhite);
  padding-bottom: 24px;
}
.grid__card h3,
.grid__card p
 {
  padding: 0 24px 24px 24px;
} */

.all__1-1 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-2 {
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
}

.all__2-2 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-3 {
  flex-basis: 33.3333%;
  max-width: 33.3333%;
  width: 33.3333%;
}

.all__2-3 {
  flex-basis: 66.6667%;
  max-width: 66.6667%;
  width: 66.6667%;
}

.all__3-3 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-4 {
  flex-basis: 25%;
  max-width: 25%;
  width: 25%;
}

.all__2-4 {
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
}

.all__3-4 {
  flex-basis: 75%;
  max-width: 75%;
  width: 75%;
}

.all__4-4 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-5 {
  flex-basis: 20%;
  max-width: 20%;
  width: 20%;
}

.all__2-5 {
  flex-basis: 40%;
  max-width: 40%;
  width: 40%;
}

.all__3-5 {
  flex-basis: 60%;
  max-width: 60%;
  width: 60%;
}

.all__4-5 {
  flex-basis: 80%;
  max-width: 80%;
  width: 80%;
}

.all__5-5 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-6 {
  flex-basis: 16.6667%;
  max-width: 16.6667%;
  width: 16.6667%;
}

.all__2-6 {
  flex-basis: 33.3333%;
  max-width: 33.3333%;
  width: 33.3333%;
}

.all__3-6 {
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
}

.all__4-6 {
  flex-basis: 66.6667%;
  max-width: 66.6667%;
  width: 66.6667%;
}

.all__5-6 {
  flex-basis: 83.3333%;
  max-width: 83.3333%;
  width: 83.3333%;
}

.all__6-6 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-7 {
  flex-basis: 14.2857%;
  max-width: 14.2857%;
  width: 14.2857%;
}

.all__2-7 {
  flex-basis: 28.5714%;
  max-width: 28.5714%;
  width: 28.5714%;
}

.all__3-7 {
  flex-basis: 42.8571%;
  max-width: 42.8571%;
  width: 42.8571%;
}

.all__4-7 {
  flex-basis: 57.1429%;
  max-width: 57.1429%;
  width: 57.1429%;
}

.all__5-7 {
  flex-basis: 71.4286%;
  max-width: 71.4286%;
  width: 71.4286%;
}

.all__6-7 {
  flex-basis: 85.7143%;
  max-width: 85.7143%;
  width: 85.7143%;
}

.all__7-7 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-8 {
  flex-basis: 12.5%;
  max-width: 12.5%;
  width: 12.5%;
}

.all__2-8 {
  flex-basis: 25%;
  max-width: 25%;
  width: 25%;
}

.all__3-8 {
  flex-basis: 37.5%;
  max-width: 37.5%;
  width: 37.5%;
}

.all__4-8 {
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
}

.all__5-8 {
  flex-basis: 62.5%;
  max-width: 62.5%;
  width: 62.5%;
}

.all__6-8 {
  flex-basis: 75%;
  max-width: 75%;
  width: 75%;
}

.all__7-8 {
  flex-basis: 87.5%;
  max-width: 87.5%;
  width: 87.5%;
}

.all__8-8 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-9 {
  flex-basis: 11.1111%;
  max-width: 11.1111%;
  width: 11.1111%;
}

.all__2-9 {
  flex-basis: 22.2222%;
  max-width: 22.2222%;
  width: 22.2222%;
}

.all__3-9 {
  flex-basis: 33.3333%;
  max-width: 33.3333%;
  width: 33.3333%;
}

.all__4-9 {
  flex-basis: 44.4444%;
  max-width: 44.4444%;
  width: 44.4444%;
}

.all__5-9 {
  flex-basis: 55.5556%;
  max-width: 55.5556%;
  width: 55.5556%;
}

.all__6-9 {
  flex-basis: 66.6667%;
  max-width: 66.6667%;
  width: 66.6667%;
}

.all__7-9 {
  flex-basis: 77.7778%;
  max-width: 77.7778%;
  width: 77.7778%;
}

.all__8-9 {
  flex-basis: 88.8889%;
  max-width: 88.8889%;
  width: 88.8889%;
}

.all__9-9 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

.all__1-10 {
  flex-basis: 10%;
  max-width: 10%;
  width: 10%;
}

.all__2-10 {
  flex-basis: 20%;
  max-width: 20%;
  width: 20%;
}

.all__3-10 {
  flex-basis: 30%;
  max-width: 30%;
  width: 30%;
}

.all__4-10 {
  flex-basis: 40%;
  max-width: 40%;
  width: 40%;
}

.all__5-10 {
  flex-basis: 50%;
  max-width: 50%;
  width: 50%;
}

.all__6-10 {
  flex-basis: 60%;
  max-width: 60%;
  width: 60%;
}

.all__7-10 {
  flex-basis: 70%;
  max-width: 70%;
  width: 70%;
}

.all__8-10 {
  flex-basis: 80%;
  max-width: 80%;
  width: 80%;
}

.all__9-10 {
  flex-basis: 90%;
  max-width: 90%;
  width: 90%;
}

.all__10-10 {
  flex-basis: 100%;
  max-width: 100%;
  width: 100%;
}

/* SP */
@media only screen and (max-width: 767px) {
  .grid__item {
    padding-left: 24px;
    padding-bottom: 24px;
  }

  .sp__1-1 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-2 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .sp__2-2 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-3 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .sp__2-3 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .sp__3-3 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-4 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }

  .sp__2-4 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .sp__3-4 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }

  .sp__4-4 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-5 {
    flex-basis: 20%;
    max-width: 20%;
    width: 20%;
  }

  .sp__2-5 {
    flex-basis: 40%;
    max-width: 40%;
    width: 40%;
  }

  .sp__3-5 {
    flex-basis: 60%;
    max-width: 60%;
    width: 60%;
  }

  .sp__4-5 {
    flex-basis: 80%;
    max-width: 80%;
    width: 80%;
  }

  .sp__5-5 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-6 {
    flex-basis: 16.6667%;
    max-width: 16.6667%;
    width: 16.6667%;
  }

  .sp__2-6 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .sp__3-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .sp__4-6 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .sp__5-6 {
    flex-basis: 83.3333%;
    max-width: 83.3333%;
    width: 83.3333%;
  }

  .sp__6-6 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-7 {
    flex-basis: 14.2857%;
    max-width: 14.2857%;
    width: 14.2857%;
  }

  .sp__2-7 {
    flex-basis: 28.5714%;
    max-width: 28.5714%;
    width: 28.5714%;
  }

  .sp__3-7 {
    flex-basis: 42.8571%;
    max-width: 42.8571%;
    width: 42.8571%;
  }

  .sp__4-7 {
    flex-basis: 57.1429%;
    max-width: 57.1429%;
    width: 57.1429%;
  }

  .sp__5-7 {
    flex-basis: 71.4286%;
    max-width: 71.4286%;
    width: 71.4286%;
  }

  .sp__6-7 {
    flex-basis: 85.7143%;
    max-width: 85.7143%;
    width: 85.7143%;
  }

  .sp__7-7 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-8 {
    flex-basis: 12.5%;
    max-width: 12.5%;
    width: 12.5%;
  }

  .sp__2-8 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }

  .sp__3-8 {
    flex-basis: 37.5%;
    max-width: 37.5%;
    width: 37.5%;
  }

  .sp__4-8 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .sp__5-8 {
    flex-basis: 62.5%;
    max-width: 62.5%;
    width: 62.5%;
  }

  .sp__6-8 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }

  .sp__7-8 {
    flex-basis: 87.5%;
    max-width: 87.5%;
    width: 87.5%;
  }

  .sp__8-8 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-9 {
    flex-basis: 11.1111%;
    max-width: 11.1111%;
    width: 11.1111%;
  }

  .sp__2-9 {
    flex-basis: 22.2222%;
    max-width: 22.2222%;
    width: 22.2222%;
  }

  .sp__3-9 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .sp__4-9 {
    flex-basis: 44.4444%;
    max-width: 44.4444%;
    width: 44.4444%;
  }

  .sp__5-9 {
    flex-basis: 55.5556%;
    max-width: 55.5556%;
    width: 55.5556%;
  }

  .sp__6-9 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .sp__7-9 {
    flex-basis: 77.7778%;
    max-width: 77.7778%;
    width: 77.7778%;
  }

  .sp__8-9 {
    flex-basis: 88.8889%;
    max-width: 88.8889%;
    width: 88.8889%;
  }

  .sp__9-9 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .sp__1-10 {
    flex-basis: 10%;
    max-width: 10%;
    width: 10%;
  }

  .sp__2-10 {
    flex-basis: 20%;
    max-width: 20%;
    width: 20%;
  }

  .sp__3-10 {
    flex-basis: 30%;
    max-width: 30%;
    width: 30%;
  }

  .sp__4-10 {
    flex-basis: 40%;
    max-width: 40%;
    width: 40%;
  }

  .sp__5-10 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .sp__6-10 {
    flex-basis: 60%;
    max-width: 60%;
    width: 60%;
  }

  .sp__7-10 {
    flex-basis: 70%;
    max-width: 70%;
    width: 70%;
  }

  .sp__8-10 {
    flex-basis: 80%;
    max-width: 80%;
    width: 80%;
  }

  .sp__9-10 {
    flex-basis: 90%;
    max-width: 90%;
    width: 90%;
  }

  .sp__10-10 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* TAB */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .grid__item {
    padding-left: 24px;
    padding-bottom: 24px;
  }

  .tab__1-1 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-2 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .tab__2-2 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-3 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .tab__2-3 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .tab__3-3 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-4 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }

  .tab__2-4 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .tab__3-4 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }

  .tab__4-4 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-5 {
    flex-basis: 20%;
    max-width: 20%;
    width: 20%;
  }

  .tab__2-5 {
    flex-basis: 40%;
    max-width: 40%;
    width: 40%;
  }

  .tab__3-5 {
    flex-basis: 60%;
    max-width: 60%;
    width: 60%;
  }

  .tab__4-5 {
    flex-basis: 80%;
    max-width: 80%;
    width: 80%;
  }

  .tab__5-5 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-6 {
    flex-basis: 16.6667%;
    max-width: 16.6667%;
    width: 16.6667%;
  }

  .tab__2-6 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .tab__3-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .tab__4-6 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .tab__5-6 {
    flex-basis: 83.3333%;
    max-width: 83.3333%;
    width: 83.3333%;
  }

  .tab__6-6 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-7 {
    flex-basis: 14.2857%;
    max-width: 14.2857%;
    width: 14.2857%;
  }

  .tab__2-7 {
    flex-basis: 28.5714%;
    max-width: 28.5714%;
    width: 28.5714%;
  }

  .tab__3-7 {
    flex-basis: 42.8571%;
    max-width: 42.8571%;
    width: 42.8571%;
  }

  .tab__4-7 {
    flex-basis: 57.1429%;
    max-width: 57.1429%;
    width: 57.1429%;
  }

  .tab__5-7 {
    flex-basis: 71.4286%;
    max-width: 71.4286%;
    width: 71.4286%;
  }

  .tab__6-7 {
    flex-basis: 85.7143%;
    max-width: 85.7143%;
    width: 85.7143%;
  }

  .tab__7-7 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-8 {
    flex-basis: 12.5%;
    max-width: 12.5%;
    width: 12.5%;
  }

  .tab__2-8 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }

  .tab__3-8 {
    flex-basis: 37.5%;
    max-width: 37.5%;
    width: 37.5%;
  }

  .tab__4-8 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .tab__5-8 {
    flex-basis: 62.5%;
    max-width: 62.5%;
    width: 62.5%;
  }

  .tab__6-8 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }

  .tab__7-8 {
    flex-basis: 87.5%;
    max-width: 87.5%;
    width: 87.5%;
  }

  .tab__8-8 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-9 {
    flex-basis: 11.1111%;
    max-width: 11.1111%;
    width: 11.1111%;
  }

  .tab__2-9 {
    flex-basis: 22.2222%;
    max-width: 22.2222%;
    width: 22.2222%;
  }

  .tab__3-9 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .tab__4-9 {
    flex-basis: 44.4444%;
    max-width: 44.4444%;
    width: 44.4444%;
  }

  .tab__5-9 {
    flex-basis: 55.5556%;
    max-width: 55.5556%;
    width: 55.5556%;
  }

  .tab__6-9 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .tab__7-9 {
    flex-basis: 77.7778%;
    max-width: 77.7778%;
    width: 77.7778%;
  }

  .tab__8-9 {
    flex-basis: 88.8889%;
    max-width: 88.8889%;
    width: 88.8889%;
  }

  .tab__9-9 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .tab__1-10 {
    flex-basis: 10%;
    max-width: 10%;
    width: 10%;
  }

  .tab__2-10 {
    flex-basis: 20%;
    max-width: 20%;
    width: 20%;
  }

  .tab__3-10 {
    flex-basis: 30%;
    max-width: 30%;
    width: 30%;
  }

  .tab__4-10 {
    flex-basis: 40%;
    max-width: 40%;
    width: 40%;
  }

  .tab__5-10 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .tab__6-10 {
    flex-basis: 60%;
    max-width: 60%;
    width: 60%;
  }

  .tab__7-10 {
    flex-basis: 70%;
    max-width: 70%;
    width: 70%;
  }

  .tab__8-10 {
    flex-basis: 80%;
    max-width: 80%;
    width: 80%;
  }

  .tab__9-10 {
    flex-basis: 90%;
    max-width: 90%;
    width: 90%;
  }

  .tab__10-10 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
}

/* DESKTOP */
@media only screen and (min-width: 1025px) {
  .grid__item {
    padding-left: 24px;
    padding-bottom: 24px;
  }

  .pc__1-1 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-2 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .pc__2-2 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-3 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .pc__2-3 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .pc__3-3 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-4 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }

  .pc__2-4 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .pc__3-4 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }

  .pc__4-4 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-5 {
    flex-basis: 20%;
    max-width: 20%;
    width: 20%;
  }

  .pc__2-5 {
    flex-basis: 40%;
    max-width: 40%;
    width: 40%;
  }

  .pc__3-5 {
    flex-basis: 60%;
    max-width: 60%;
    width: 60%;
  }

  .pc__4-5 {
    flex-basis: 80%;
    max-width: 80%;
    width: 80%;
  }

  .pc__5-5 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-6 {
    flex-basis: 16.6667%;
    max-width: 16.6667%;
    width: 16.6667%;
  }

  .pc__2-6 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .pc__3-6 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .pc__4-6 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .pc__5-6 {
    flex-basis: 83.3333%;
    max-width: 83.3333%;
    width: 83.3333%;
  }

  .pc__6-6 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-7 {
    flex-basis: 14.2857%;
    max-width: 14.2857%;
    width: 14.2857%;
  }

  .pc__2-7 {
    flex-basis: 28.5714%;
    max-width: 28.5714%;
    width: 28.5714%;
  }

  .pc__3-7 {
    flex-basis: 42.8571%;
    max-width: 42.8571%;
    width: 42.8571%;
  }

  .pc__4-7 {
    flex-basis: 57.1429%;
    max-width: 57.1429%;
    width: 57.1429%;
  }

  .pc__5-7 {
    flex-basis: 71.4286%;
    max-width: 71.4286%;
    width: 71.4286%;
  }

  .pc__6-7 {
    flex-basis: 85.7143%;
    max-width: 85.7143%;
    width: 85.7143%;
  }

  .pc__7-7 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-8 {
    flex-basis: 12.5%;
    max-width: 12.5%;
    width: 12.5%;
  }

  .pc__2-8 {
    flex-basis: 25%;
    max-width: 25%;
    width: 25%;
  }

  .pc__3-8 {
    flex-basis: 37.5%;
    max-width: 37.5%;
    width: 37.5%;
  }

  .pc__4-8 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .pc__5-8 {
    flex-basis: 62.5%;
    max-width: 62.5%;
    width: 62.5%;
  }

  .pc__6-8 {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }

  .pc__7-8 {
    flex-basis: 87.5%;
    max-width: 87.5%;
    width: 87.5%;
  }

  .pc__8-8 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-9 {
    flex-basis: 11.1111%;
    max-width: 11.1111%;
    width: 11.1111%;
  }

  .pc__2-9 {
    flex-basis: 22.2222%;
    max-width: 22.2222%;
    width: 22.2222%;
  }

  .pc__3-9 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
  }

  .pc__4-9 {
    flex-basis: 44.4444%;
    max-width: 44.4444%;
    width: 44.4444%;
  }

  .pc__5-9 {
    flex-basis: 55.5556%;
    max-width: 55.5556%;
    width: 55.5556%;
  }

  .pc__6-9 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
    width: 66.6667%;
  }

  .pc__7-9 {
    flex-basis: 77.7778%;
    max-width: 77.7778%;
    width: 77.7778%;
  }

  .pc__8-9 {
    flex-basis: 88.8889%;
    max-width: 88.8889%;
    width: 88.8889%;
  }

  .pc__9-9 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  .pc__1-10 {
    flex-basis: 10%;
    max-width: 10%;
    width: 10%;
  }

  .pc__2-10 {
    flex-basis: 20%;
    max-width: 20%;
    width: 20%;
  }

  .pc__3-10 {
    flex-basis: 30%;
    max-width: 30%;
    width: 30%;
  }

  .pc__4-10 {
    flex-basis: 40%;
    max-width: 40%;
    width: 40%;
  }

  .pc__5-10 {
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
  }

  .pc__6-10 {
    flex-basis: 60%;
    max-width: 60%;
    width: 60%;
  }

  .pc__7-10 {
    flex-basis: 70%;
    max-width: 70%;
    width: 70%;
  }

  .pc__8-10 {
    flex-basis: 80%;
    max-width: 80%;
    width: 80%;
  }

  .pc__9-10 {
    flex-basis: 90%;
    max-width: 90%;
    width: 90%;
  }

  .pc__10-10 {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
}

/*============================================================
==============================================================
TEXT ALIGN
==============================================================
============================================================*/

.tai-center {
  text-align: center !important;
}

.tai-left {
  text-align: left !important;
}

.tai-right {
  text-align: right !important;
}

/* ===== PC以上 ===== */
@media only screen and (min-width: 1025px) {
  .pc__up--tai-center {
    text-align: center !important;
  }

  .pc__up--tai-left {
    text-align: left !important;
  }

  .pc__up--tai-right {
    text-align: right !important;
  }
}

/* ===== PC未満（スマホ＋タブレット）===== */
@media only screen and (max-width: 1024px) {
  .pc__down--tai-center {
    text-align: center !important;
  }

  .pc__down--tai-left {
    text-align: left !important;
  }

  .pc__down--tai-right {
    text-align: right !important;
  }
}

/* ===== タブレット以上（タブレット＋PC）===== */
@media only screen and (min-width: 768px) {
  .tab__up--tai-center {
    text-align: center !important;
  }

  .tab__up--tai-left {
    text-align: left !important;
  }

  .tab__up--tai-right {
    text-align: right !important;
  }
}

/* ===== スマホ未満（〜767px）===== */
@media only screen and (max-width: 767px) {
  .sp__down--tai-center {
    text-align: center !important;
  }

  .sp__down--tai-left {
    text-align: left !important;
  }

  .sp__down--tai-right {
    text-align: right !important;
  }
}

/* ===== タブレットのみ（768〜1024px）===== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .tab__only--tai-center {
    text-align: center !important;
  }

  .tab__only--tai-left {
    text-align: left !important;
  }

  .tab__only--tai-right {
    text-align: right !important;
  }
}

/* ===== スマホのみ（〜767px）===== */
@media only screen and (max-width: 767px) {
  .sp__only--tai-center {
    text-align: center !important;
  }

  .sp__only--tai-left {
    text-align: left !important;
  }

  .sp__only--tai-right {
    text-align: right !important;
  }
}

/* ===== PCのみ（1025px〜）===== */
@media only screen and (min-width: 1025px) {
  .pc__only--tai-center {
    text-align: center !important;
  }

  .pc__only--tai-left {
    text-align: left !important;
  }

  .pc__only--tai-right {
    text-align: right !important;
  }
}

/*============================================================
==============================================================
HEADER
==============================================================
============================================================*/

header {
  width: 100%;
  height: 96px;
  z-index: 10000;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--colorBeige);
  transition: transform 0.3s ease;
  position: fixed;
  z-index: 100000;
  top: 0;
  border-bottom: solid .5px var(--colorWhite);
}

header li, footer li {
  color: var(--colorWhite);
  font-family: "Jost", 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 300;

}

.header__top,
.header__bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__top {
  border-bottom: solid .5px var(--colorDarkGraySjk);
}

.header__top--box {
  height: 96px;
  align-items: center;
  justify-content: space-between;
  display: flex;
}
.header__top--right {
  display: flex;
  align-items: center;
}
.header__top--right ul, .header__top--left ul {
  display: flex;
}
.header__top--left ul li {
  margin-right: 16px;
  margin-bottom: 0;
  font-size: 20px;
}
.header__top--center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.header__top--right ul li {
  margin-left: 16px;
  margin-bottom: 0;
  font-size: 20px;
}
.btn-reservation {
  background: var(--colorWhite);
  color: var(--colorBeige);
  margin-left: 16px;
  border-radius: 1000px;
}
.btn.btn-reservation {
  padding: 8px 32px;
}

@media only screen and (max-width: 1280px) {
  .header__top--left ul li {
      font-size: 18px;
    }
  .header__top--right ul li {
    font-size: 18px;
  }
  .btn.btn-reservation {
    padding: 8px 16px;
  }
  }
  .btn.btn-big.btn-reservation {
    padding: 16px 24px;
  }
/* .header__bottom--box {
  height: 64px;
  align-items: center;
  justify-content: space-between;
  display: flex;
} */
.header__info>* {
  margin-right: 24px;
}

.header__info>*:last-child {
  margin-right: 0;
}
.header__logo {
  width: 160px;
}
@media only screen and (max-width: 1280px) {
  .header__logo {
    width: 120px;
  }
}
.header__burger {
  cursor: pointer;
}

.svg__sand {
  fill: var(--colorSand);
}
.svg__green {
  fill: var(--colorGreen);
}

.header__burger--lines {
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 36px;
}
.header__pc {
  width: 100%;
}

.header__sp--right {
  display: flex;
  align-items: center;
  position: relative;
}

.header__sp--left {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: end;
}
.header__sp--left a svg {
  width: 64px;
}
.header__reservation {
  position: absolute;
  right: 0;
  height: 100%;
  width: 200px;
  text-align: center;
}
.header__lang {
  margin-left: 16px;
  color: var(--colorSand);
}

html[lang="ja"] .header__lang--ja,
html[lang="ja"] .footer__lang--ja {
  color: var(--colorSand);
  border-bottom: solid 1px var(--colorSand);
  pointer-events: none;
}

html[lang="ja"] .header__lang--en,
html[lang="ja"] .footer__lang--en {
  color: var(--colorSand);
  opacity: 0.5;
}

html[lang="en"] .header__lang--en,
html[lang="en"] .footer__lang--en {
  color: var(--colorSand);
  border-bottom: solid 1px var(--colorSand);
  pointer-events: none;
}
html[lang="en"] .header__lang--ja,
html[lang="en"] .footer__lang--ja {
  color: var(--colorSand);
  opacity: 0.5;
}
/* リンクの下線用準備 */
.nav__link {
  position: relative;
  text-decoration: none;
  color: var(--colorWhite);
}

/* active クラスの要素だけに擬似要素で下線 */
.nav__link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--colorWhite);
}
.header__info--list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* gap: 16px; */
}

.header__info--list ul li {
  position: relative;
  /* これをliに移動 */
  cursor: pointer;
}

.arrow-down {
  display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
    margin-bottom: 4px;
  /* 矢印の色 */
}
.header__info--list ul li ul.submenu {
  position: absolute;
  background: var(--colorBlackSjk);
  z-index: 999;
  border-bottom: solid .5px var(--colorDarkGraySjk);
  border-right: solid .5px var(--colorDarkGraySjk);
  border-left: solid .5px var(--colorDarkGraySjk);
  display: flex;
  flex-direction: column;
}

.header__info--list ul li.has-submenu {
  position: relative;
  cursor: pointer;
}

.header__info--list ul li.has-submenu {
  position: relative;
  cursor: pointer;
}

.header__info--list ul li.has-submenu .submenu li {
  white-space: nowrap;
  padding: 8px 16px;
}

.header__info--list ul li.has-submenu .submenu li:hover {
  background-color: #eee;
}

.header__info--list ul {
  display: flex;
}
.header__info--list ul li {
  margin-bottom: 0;
  margin-right: 32px;
  color: var(--colorWhiteSjk);
}
.header__info--list ul li:last-child {
  margin-right: 0;
}

.header__burger--line {
  width: 36px;
  height: 1px;
  background: var(--colorWhite);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.header__top--left {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.header__location {
  margin-left: 24px;
}
.header__location ul li {
  color: var(--colorWhiteSjk);
  margin-bottom: 0;
}


.header__social {
  position: absolute;
  right: 224px;
  height: 100%;
  display: flex;
  align-items: center;
}
.header__social--icon {
  width: 24px;
  height: 24px;
  margin-left: 8px;
}


.header__burger--lines.active .line-1 {
  transform: translateY(11px) rotate(45deg);
  /* Adjusted translateY for 20px height */
}

.header__burger--lines.active .line-2 {
  opacity: 0;
}

.header__burger--lines.active .line-3 {
  transform: translateY(-11px) rotate(-45deg);
  /* Adjusted translateY for 20px height */
}

@media only screen and (min-width: 1025px) {
  header.hidden {
    transform: translateY(-96px);
  }
}

.header__nav {
  display: none;
  border-bottom: solid .5px var(--colorSand);
}



@media only screen and (max-width: 767px) {
  header {
    height: 64px;
  }
  .header__logo {
    width: 52px;
  }
  .header__reservation {
    width: 80px;
    /* font-variation-settings: "wght" 700; */
    padding: 0;
  }
}
@media only screen and (max-width: 1024px) {
  .header__nav {
      display: block;
      height: auto;
      background: var(--colorBeige);
      color: var(--colorWhite);
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-100%);
      width: 100%;
      transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
        /* ←ここ */
      z-index: 9999;
      max-height: 100vh;
      overflow-y: auto;
    }

    .header__nav--social {
      margin-bottom: 32px;
    }
    .header__nav--social--icon {
      width: 24px;
      height: 24px;
    }

    .header__nav.is-visible {
      transform: translateY(0);
      z-index: 9999;
      position: fixed;
    }

    .header__nav ul li::before {
      content: none;
    }

    .header__nav--wrap {
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;
      padding: 128px 0 64px 0;
      justify-content: space-between;
    }

    .header__nav--wrap li {
      margin-bottom: 0;
      padding-bottom: 24px;
      line-height: normal;
    }

    .header__nav--menu {
      display: flex;
      width: 100%;
      flex-direction: column;
    }

    .header__nav--menu li {
      opacity: 1;
      /* letter-spacing: -.07em; */
      text-align: left;

    }

    .header__nav--menu--main,
    .header__nav--menu--sub {
      width: 100%;
      margin-bottom: 32px;
      text-align: center;
    }

    .header__nav--info {
      width: 100%;
      align-self: flex-start;
      text-align: center;
    }



    .header__nav--menu--main li a {
      display: flex;
      flex-direction: column;
      font-size: 40px;
    }

    .header__nav--menu--main li span {
      font-size: 12px;
    }

    .header__nav--menu--sub li a {
      font-size: 40px;
    }

    .header__nav--menu--sub li span {
      font-size: 12px;
    }

    .header__nav--info li a {
      display: flex;
      flex-direction: column;
      font-size: 16px;
    }

    .header__nav--info li span {
      font-size: 12px;
    }

    .header__nav--info-2 li a {
      display: flex;
      flex-direction: column;
      font-size: 16px;
    }

    .header__nav--info-2 li span {
      font-size: 12px;
    }

    .header__nav--logo {
      width: 100px;
    }

    .header__nav--menu {
      width: 100%;
      flex-direction: column;
    }

    .header__nav--menu--main {
      width: 100%;
      margin-bottom: 32px;
    }

    .header__nav--wrap li {
      padding-bottom: 24px;
    }

    .header__nav--menu--main li a {
      font-size: 24px;
    }

    .header__burger--lines {
      height: 8px;
      width: 32px;
    }

    .header__burger--line {
      width: 32px;
    }

    .header__nav--wrap {
      align-items: flex-start;
    }

    .header__nav--menu--sub li a {
      font-size: 20px;
    }

  .header__sp,
  .header__sp--box,
  .header__sp--main {
    width: 100%;
    height: 100%;
    background: var(--colorBeige);
    z-index: 100000;
  }
  .header__sp--main {
    display: flex;
    justify-content: space-between;
  }
  .header__reservation {
    width: 128px;
  }
  .header__sp--center {
    position: absolute;
    width: 96px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  header {
    height: 64px;
  }
}

.header__burger--lines.active .line-1 {
  transform: translateY(3.6px) rotate(30deg);
  /* Adjusted translateY for 20px height */
}

.header__burger--lines.active .line-2 {
  opacity: 0;
}

.header__burger--lines.active .line-3 {
  transform: translateY(-3.6px) rotate(-30deg);
  /* Adjusted translateY for 20px height */
}

@media only screen and (max-width: 1024px) {
  .header__burger--lines.active .line-1 {
    transform: translateY(3.6px) rotate(30deg);
    /* Adjusted translateY for 20px height */
  }

  .header__burger--lines.active .line-3 {
    transform: translateY(-3.6px) rotate(-30deg);
    /* Adjusted translateY for 20px height */
  }
}
@media only screen and (max-width: 767px) {
  .header__reservation {
    width: 64px;
  }
}

/* section#hero {
  margin-top: 128px;
}
@media only screen and (max-width: 1024px) {
  section#hero {
      margin-top: 64px;
  }
} */
/*============================================================
==============================================================
BOTTOM FIXED
==============================================================
============================================================*/

.bottom__radio {
  position: fixed;
  bottom: 24px;
  z-index: 9998;
  width: 95%;
  display: flex;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 10000000px;
  left: 50%;
  transform: translateX(-50%);
}
.bottom__radio--text {
  background: var(--colorLimeSjk);
  color: #fff;
  padding: 8px;
  font-size: 16px;
  text-transform: uppercase;
  width: 256px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: auto;
}

@media only screen and (max-width: 767px) {
  .bottom__radio--text {
    font-size: 10px;
  }
}
/*============================================================
==============================================================
BOTTOM FIXED
==============================================================
============================================================*/

.bottom__button {
  position: fixed;
  bottom: 24px;
  z-index: 9998;
  width: 100%;
  display: flex;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 10000000px;
  left: 50%;
  transform: translateX(-50%);
}

.bottom__button a button {
  font-size: 16px;
  width: 100%;
  text-align: center;
  border: solid 1px var(--colorBlackSjk);
  padding: 16px;
}

blockquote {
  border-left: 4px solid #ccc;
  padding-left: 15px;
  margin: 20px 0;
  font-style: italic;
  line-height: 1.75;
  font-size: 16px;
  color: #555;
}


/*============================================================
==============================================================
MEDIA
==============================================================
============================================================*/

.media {
  height: 0;
  line-height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
  display: block;
  margin-bottom: 24px;
  /* border-radius: 8px; */
  /* border-radius: 32px; */
}

.media__image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: 'object-fit: contain;';
}

.media__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: 'object-fit: contain;';
  border-radius: 16px;
}



.media__square {
  padding-bottom: 100%;
}

.media__3-2 {
  padding-bottom: 66.6666%;
}
.media__2-3 {
  padding-bottom: 133.33%;
}
.media__2-1 {
  padding-bottom: 50%;
}
.media__3-1 {
  padding-bottom: 33.3333%;
}

.media__pd {
  padding: 56px;
}

.box__sticky {
  position: sticky;
  top: 10vh;
  z-index: 10;
}

/*============================================================
==============================================================
HERO
==============================================================
============================================================*/

.hero {
  height: calc(100vh - 128px);
}

/* @media only screen and (max-width: 1024px) {
  .hero {
      height: calc(100vh - 64px);
      padding: 24px;
    }
} */
@media only screen and (max-width: 767px) {

}

.hero-sub {
  height: 75vh;
  padding-top: 96px;
}
.hero-sub__wrapper {
  position: relative;
  height: 100%;
}

.hero {
  position: relative;
  overflow: hidden;
}

#hero {
  position: relative;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--colorGreen);
  opacity: 1;
  transition: opacity 2s ease;
  pointer-events: none;
  height: 100%;
  z-index: 10000000;
}

.hero__overlay.fade-out {
  opacity: 0;
}



.hero__logo {
  position: absolute;
  bottom: 0;
  /* 上から50%の位置に配置 */
  left: 0;
  /* 左から50%の位置に配置 */
  /* 50%だけ移動させて完全に中央にする */
  z-index: 999;
  width: 100%;
  padding: 56px;
}

@media only screen and (max-width: 1024px) {
  .hero__logo {
    padding: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .hero__logo {
    padding: 24px;
  }
}



.hero__logo h2, .hero__logo h3 {
  color: var(--colorWhite);
}

.hero__text {
  width: 100%;
  font-size: 24px;
  position: absolute;
  z-index: 999;
  padding: 56px;
  bottom: 0;
  left: 0;
  color: var(--colorWhiteSjk);
}



.hero-sub .hero-sub__text {
  position: absolute;
  color: var(--colorWhiteSjk);
  bottom: 0;
  left: 0;
  padding: 56px 56px;
  width: 100%;
}

.hero-sub-2 .hero-sub__text {
  position: absolute;
  color: var(--colorWhiteSjk);
  bottom: 0;
  left: 0;
  padding: 48px 96px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.hero-sub__image {
  height: 100%;
}

.hero-sub-2 {
  height: 50vh;
  padding-top: 96px;
}

@media only screen and (max-width: 767px) {

  .hero-sub .hero-sub__text,
  .hero-sub-2 .hero-sub__text {
    padding: 32px;
  }
  .hero-sub-2, .hero-sub {
    padding-top: 64px;
  }
  .hero__text {
    padding: 24px;
  }
}


.hero-sub__text {
  position: absolute;
  color: var(--colorBlackSjk);
  padding: 56px;
}


.hero-sub .hero-sub__text h1 {
  font-size: 80px;
  margin-bottom: 16px;
}
.hero-sub-2 .hero-sub__text h1 {
  font-size: 72px;
  margin-bottom: 0;
}

.hero-sub .hero-sub__text h3,
.hero-sub-2 .hero-sub__text h3 {
  font-size: 24px;
}
@media only screen and (max-width: 767px) {
  .hero-sub .hero-sub__text h1,
  .hero-sub-2 .hero-sub__text h1 {
    font-size: 48px;
  }
}

/*============================================================
==============================================================
CARD
==============================================================
============================================================*/

.card__box {
  /* border-radius: 8px; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  flex-grow: 1;
}


.card__text {
  padding: 32px;
  background: var(--colorWhiteSjk);
  /* border-radius: 0 0 10px 10px; */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* .card__tmb img {
  border-radius: 10px 10px 0 0;
} */

.card__tmb {
  position: relative;
}

.card__tmb .media {
  margin-bottom: 0;
}

.card__tmb {
  position: relative;
}

@media only screen and (max-width: 1279px) {
  .card__text {
    padding: 24px;
  }
}



/*============================================================
==============================================================
EVENT
==============================================================
============================================================*/



.event__date h4 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event__date .month {
  font-size: 16px;
  font-weight: 500;
}

.event__date .day {
  font-size: 24px;
  font-weight: 700;
}

.card__text .artist {
  font-size: 24px;
  margin-bottom: 16px;
}

.card__text .card__detail {
  /* flex-grow: 1; */
  margin-bottom: 16px;
  overflow-wrap: break-word;
}

.card__box.bg-black .card__text {
  background: var(--colorBlackSjk);
  color: var(--colorWhiteSjk);
}

.card__box.bg-white .card__text {
  background: var(--colorWhiteSjk);
  color: var(--colorBlackSjk);
}

.card__slider.bg-white .card__slider--wrapper {
  background: var(--colorWhiteSjk);
  color: var(--colorBlackSjk);
}

.card__slider.bg-black .card__slider--wrapper {
  background: var(--colorBlackSjk);
  color: var(--colorWhiteSjk);
}

.card__text .card__title {
  font-size: 32px;
  margin-bottom: 16px;
}

/*============================================================
==============================================================
CATEGORY
==============================================================
============================================================*/

.event__cat,
.journal__cat {
  padding: 4px 8px;
  display: inline-block;
  font-size: 16px;
  margin-bottom: 16px;
  place-self: flex-start;
}

.event__cat.cat-live {
  background: var(--colorOrangeSjk);
  color: var(--colorWhiteSjk);
}

.event__cat.cat-art {
  background: var(--colorPinkSjk);
  color: var(--colorBlackSjk);
}
.event__cat.cat-popup {
  background: var(--colorRedSjk);
  color: var(--colorWhiteSjk);
}
.event__cat.cat-dj {
  background: var(--colorLimeSjk);
  color: var(--colorBlackSjk);
}

.journal__cat.cat-inv {
  background: var(--colorBlueSjk);
  color: var(--colorWhiteSjk);
}

@media only screen and (max-width: 767px) {
  .event__cat {
    font-size: 14px;
  }
}

.card__text a {
  margin-top: auto;
}

.event__place-time {
  font-weight: 600;
  font-size: 18px;
  color: var(--colorWhiteSjk);
}

.event__info {
  width: 100%;
  height: 33%;
  position: absolute;
  bottom: 0;
  z-index: 100;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.event__info--box {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 36px;
  width: 100%;
  z-index: 1000000;
}

@media only screen and (max-width: 1279px) {
  .event__info--box {
    padding: 24px;
  }
  .event__date {
    top: 24px;
    left: 24px;
    width: 56px;
    height: 56px;

  }
  .event__date .month {
    font-size: 12px;
  }
  .event__date .day {
    font-size: 20px;
  }
}

/*============================================================
==============================================================
BUTTON
==============================================================
============================================================*/

button, .btn {
  padding: 8px 28px;
  display: inline-block;
  transition: 0.3s ease, color 0.3s ease;
  font-size: 16px;
  font-weight: 400;
  border: solid 1px var(--colorSand);
  border-radius: 1000px;
}

.btn span {
  font-size: 16px;
}

@media only screen and (max-width: 767px){
  button, .btn {
    font-size: 12px;
    padding: 8px 16px;
  }
}

.btn-black {
  border: solid 1px var(--colorBlackSjk);
  color: var(--colorBlackSjk);
}

.btn-black:hover {
  background: var(--colorBlackSjk);
  color: var(--colorWhiteSjk);
}

.btn-white {
  border: solid 1px var(--colorWhite);
  color: var(--colorWhite);
}

.btn-white:hover {
  background: var(--colorWhite);
  color: var(--colorBeige);
}
.btn-beige {
  border: solid 1px var(--colorBeige);
  color: var(--colorBeige);
}

.btn-beige:hover {
  background: var(--colorBeige);
  color: var(--colorWhite);
}

.btn-yellow {
  background: var(--colorYellowSjk);
  border: solid 1px var(--colorYellowSjk);
  color: var(--colorBlackSjk);
}

.btn-white.btn-focus {
  background: var(--colorWhiteSjk);
  color: var(--colorBlackSjk);
}

.btn-white.btn-focus:hover {
  background: var(--colorYellowSjk);
  border: solid 1px var(--colorYellowSjk);
}
.btn-black.btn-focus {
  background: var(--colorBlackSjk);
  color: var(--colorWhiteSjk);
}

.btn-black.btn-focus:hover {
  background: var(--colorYellowSjk);
  border: solid 1px var(--colorYellowSjk);
}

.btn-big {
  border: solid 2px;
  font-size: 24px;
  text-align: center;
  width: 100%;
  padding: 16px 64px;
}

@media only screen and (max-width: 767px) {
  .btn-big {
    font-size: 16px;
    padding: 16px 32px;
  }
  .btn-big.big-mac {
    padding: 40px;
  }

}

/*============================================================
==============================================================
SLIDER
==============================================================
============================================================*/

.card__slider--wrapper {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .card__slider--wrapper {
    padding: 24px;
  }
}

.card__slider {
  /* border: var(--colorBlackSjk) solid 1px; */
  /* border-radius: 8px; */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card__sliders--detail {
  flex-grow: 1;
}

.card__slider .media {
  /* border-radius: 8px 8px 0 0; */
  margin-bottom: 0;
}

.slider__top--hero {
  height: 100%;
  z-index: -999999;
}

.swiper-slide {
  height: auto;
}
.top-hero__swiper-slide {
  overflow: hidden;
}

.top-hero__swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1);
  transition: transform 3s ease;
}

.top-hero__swiper-slide-active img {
  transform: scale(1.03);
}




.swiper__overflow-visible {
  overflow: visible;
}
.swiper__overflow-hidden {
  overflow: hidden;
}

.room__details {
  margin-bottom: 16px;
}

.room__detail {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.room__detail img {
  width: 24px;
}

.room__detail.capacity img {
  margin-bottom: 0;
}

.room__detail:last-child {
  margin-bottom: 0;
}

.room__detail span {
  font-size: 12px;
  margin-left: 10px;
}

.mt-10px {
  margin-top: 10px;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  color: var(--colorWhiteSjk);
  font-size: 24px;
  margin-right: 2px;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  color: var(--colorWhiteSjk);
  font-size: 24px;
  margin-left: 2px;
}



/*============================================================
==============================================================
UL
==============================================================
============================================================*/
ul {
  list-style: none;
}

ul li {
  font-size: 16px;
  margin-bottom: 16px;
  text-indent: -1.3em;
  padding-left: 1.3em;
  line-height: 1.75;
}

@media only screen and (max-width: 767px) {
  ul li {
    font-size: 14px;
  }
}

ul.ul__row {
  display: flex;
  flex-wrap: wrap;
}

ul.ul__row li {
  width: 25%;
  list-style-position: inside;
  padding-left: 1.05em;
  text-indent: -1.05em;
  padding-right: 10px;
}

@media only screen and (max-width: 767px) {
  ul.ul__row li {
    width: 50%;
    list-style-position: inside;
    padding-left: 1.25em;
    text-indent: -1.25em;
  }
}

.bg-black ul li::before {
  content: "";
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: var(--colorWhiteSjk);
  border-radius: 50%;
  margin-right: 8px;
}
.bg-white ul li::before {
  content: "";
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: var(--colorBlackSjk);
  border-radius: 50%;
  margin: 0 6px 0 6px;
}

/*============================================================
==============================================================
OL
==============================================================
============================================================*/

ol {
  counter-reset: item;
  padding-left: 0;
  margin-bottom: 24px;
}

ol li {
  list-style-type: none;
  counter-increment: item;
  margin-bottom: 16px;
  display: table;
  line-height: 1.75;
  /* text-indent: -1.5em; */
  /* padding-left: 1.5em; */
}

ol li::before {
  content: counter(item) ".";
  display: table-cell;
  text-align: center;
  width: 22px;
}

ol.terms__number--ja li::before {
  content: "("counter(item)")";
  display: table-cell;
  text-align: center;
  width: 24px;
}

ol.terms__number--ja li ol li::before {
  content: counter(item, katakana)".";
  display: table-cell;
  text-align: center;
  width: 24px;
}
/* ol.terms__chuu--ja li::before {
  content: "("counter(item)")";
  display: table-cell;
  text-align: center;
  width: 24px;
} */
 ol.terms__chuu--ja {
   counter-reset: item;
   list-style: none;
   padding-left: 0;
 }

 ol.terms__chuu--ja li {
   counter-increment: item;
   display: table;
   margin-bottom: 0.5em;
 }

 ol.terms__chuu--ja li::before {
   content: "(注" counter(item) ")";
   display: table-cell;
   text-align: center;
   width: 3em;
   padding-right: 0.5em;
 }

ol li ol  {
  margin-bottom: 0;
}
ol li ol li:first-child {
  margin-top: 16px;
}
ol li ol li:last-child {
  margin-bottom: 0;
}

ol.terms__number--en li ol li::before {
  content: "(" counter(item)")";
  display: table-cell;
  text-align: center;
  width: 24px;
}

ol li span {
  display: table-cell;
}
/*============================================================
==============================================================
MARQUEE
==============================================================
============================================================*/
.top__marquee {
  align-items: center;
  background: var(--colorYellowSjk);
  color: var(--colorBlackSjk);
  display: flex;
  height: 128px;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.top__marquee ul {
  animation: flowing 40s linear infinite;
  font-size: 24px;
  transform: translateX(100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.top__marquee ul li {
  display: inline-block;
  padding-right: 56px;
  font-size: 40px;
  margin-bottom: 0;
}
.top__marquee ul li::before {
  content: none;
}

@keyframes flowing {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}



@media only screen and (max-width: 767px) {
  .top__marquee {
      height: 112px;
    }
  .top__marquee ul li {
    font-size: 32px;
  }
}


@media only screen and (max-width: 767px) {
  .grid__x-large-gutter .grid__item {
    padding-left: 36px;
    padding-bottom: 36px;
  }

  .media {
    margin-bottom: 16px;
  }

  .journal__cat {
    font-size: 10px;
    margin-bottom: 16px;
  }

  .event__cat {
    font-size: 10px;
    margin-bottom: 16px;
  }
}

@media only screen and (max-width: 1279px) {
  .card__text .card__title {
    font-size: 24px;
    margin-bottom: 16px;

  }
}


.journal__btn--sort a {
  margin-right: 16px;
}

.journal__btn--sort {
  display: flex;
  align-items: center;
}

/*============================================================
==============================================================
FOOTER
==============================================================
============================================================*/

footer {
  border-top: solid .5px var(--colorWhite);
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: 16px;
}

footer ul li::before {
  display: none;
}

.footer__logo {
  width: 136px;
}

.footer__bottom {
  color: var(--colorGraySjk);
}

.footer__bottom a {
  color: var(--colorGraySjk);
  transition: 0.3s ease, color 0.3s ease;
}

.footer__bottom a:hover {
  color: var(--colorWhiteSjk);
}

footer .footer__menu li::before,
footer .footer__lang li::before {
  content: none;
}
.footer__menu {
  display: flex;
  justify-content: center;
}
.footer__menu li {
  margin-right: 24px;
    font-size: 24px;
}
.footer__menu li:last-child {
  margin-right: 0;
}
.footer__menu li a {
  color: var(--colorGraySjk);
  /* transition: 0.3s ease, color 0.3s ease; */
}

.footer__menu li a:hover {
  color: var(--colorWhiteSjk);
}

.footer__menu--bottom li {
  font-size: 16px;
}

@media only screen and (max-width: 767px) {
  .footer__menu li {
    font-size: 16px;
  }
  .footer__menu--bottom li {
    font-size: 12px;
  }
}
.footer__lang {
  color: var(--colorGraySjk);
}

.footer__nav h5 {
  font-size: 16px;
  margin-bottom: 24px;
}

html[lang="ja"] .lang-ja {
  color: var(--colorSand);
  border-bottom: solid 2px var(--colorSand);
  pointer-events: none;
}

html[lang="ja"] .lang-en {
  color: var(--colorSand);
  opacity: 0.5;
}

html[lang="en"] .lang-en {
  color: var(--colorSand);
  border-bottom: solid 2px var(--colorSand);
  pointer-events: none;
}

html[lang="en"] .lang-ja {
  color: var(--colorSand);
  opacity: 0.5;
}

.footer__legal-info {
  display: flex;
  justify-content: flex-end;
}

.footer__legal-info li {
  margin-right: 32px;
}

.footer__copyright {
  font-size: 16px;
  color: var(--colorGraySjk);
}

@media only screen and (max-width: 767px) {
  .footer__copyright {
    font-size: 12px;
  }
  footer ul li {
    margin-bottom: 8px;
  }
}

li .asterisk {
  font-size: 14px;
  vertical-align: text-top;
  margin-left: 8px;
}

p .asterisk {
  font-size: 14px;
}

dl dt {
  float: left;
  padding: 16px 0 16px;
  font-size: 16px;
  line-height: 1.75;
}

dl dd {
  margin: 0;
  padding: 16px 0 16px 200px;
  font-size: 16px;
  line-height: 1.75;
}
.bg-white dl dd {
  border-top: solid .5px var(--colorBeige);
}
.bg-beige dl dd {
  border-top: solid .5px var(--colorWhite);
}

dl dt, dl dd {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

dl dd:first-child {
  border-top: none;
}
dl dd:last-child {
  border-bottom: solid .5px var(--colorGraySjk);
}

@media only screen and (max-width: 767px) {
  dl dt {
    padding: 16px 0 0 0;
  }
  dl dd {
    padding: 0 0 16px 0;
  }
  dl dt, dl dd {
    width: 100%;
  }
}


hr {
  height: 1px;
  background: var(--colorGraySjk);
  margin: 16px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

@media (min-width: 768px) {
  .table__sp {
    display: none;
  }
}



@media (max-width: 767px) {

  .table__sp th,
  .table__sp td {
    display: inline-block;
    width: 100%;
    float: left;
  }
  .table__tab-pc {
    display: none;
  }
}

th,
td {
  border: 1px solid #ccc;
  /* 枠線を薄いグレーで */
  padding: 16px;
  /* セル内の余白 */
  text-align: left;
  /* 左揃え */
  line-height: 1.75;

}

th {
  background-color: var(--colorBlackSjk);
  color: var(--colorWhiteSjk);
  /* ヘッダーを薄い灰色で */
  font-weight: bold;
  line-height: 1.75;
  /* 太字 */
}



.residence__price-comparison--table dl dt {
  text-align: right;
  padding: 16px 0 16px;
  width: auto;

}
.residence__price-comparison--table dl dd {
  text-align: right;
  padding: 16px 0 16px;
  width: auto;
}
.residence__price-comparison--total {
  font-size: 24px;
  font-variation-settings: "wght" 700;
}

/*
dl dt:first-child {
  padding: 0 0 30px 0;
}
dl dd:first-child {
  padding: 0px 0 30px 20ch;
} */

/*============================================================
==============================================================
SPACE
==============================================================
============================================================*/

.space {
  height: 64px;
}

.space.half {
  height: 32px;
}
.space.quarter {
  height: 16px;
}

.space.double {
  height: 128px;
}

@media only screen and (max-width: 767px) {
  .space {
    height: 48px;
  }
  .space.half {
    height: 24px;
  }

  .space.double {
    height: 96px;
  }
}

/*============================================================
==============================================================
RESIDENCE
==============================================================
============================================================*/

#price-comparison table {
  color: var(--colorWhiteSjk);
  /* background: var(--colorDarkGraySjk); */
  width: 100%;
  font-size: 14px;

}

.price-comparison__apartment {
  color: var(--colorBlackSjk);
}
.price-comparison__apartment {
  background: #ececec;
}
#price-comparison table th {
  height: 100px;
  text-align: center;
  vertical-align: middle;
}
#price-comparison table th,
#price-comparison table td {
  padding: 16px 32px;
  width: 33.3333%;
  height: 70px;
  vertical-align: middle;
  border: solid 1px var(--colorDarkGraySjk);
  text-align: center;
}
#price-comparison table th:nth-child(2) {
  border-top: 10px solid var(--colorLimeSjk);
}

#price-comparison table th:nth-child(2),
#price-comparison table td:nth-child(2) {
  border-left: 3px solid var(--colorLimeSjk);
  border-right: 3px solid var(--colorLimeSjk);
  color: var(--colorLimeSjk);
  font-weight: 700;
  font-size: 1.2em;
}
#price-comparison table tr:last-child td:nth-child(2) {
  border-bottom: 3px solid var(--colorLimeSjk);
}
#price-comparison table th:nth-child(1) {
  border: none;
}
#price-comparison table td:nth-child(1) {
  /* font-weight: 700; */
  background: #292929;
}


#price-comparison .table tr:last-child td:first-child {
  border-bottom: 5px solid var(--colorLimeSjk);
}

#price-comparison table tr:nth-last-child(-n+2) td {
  padding: 32px 64px;
  font-size: 24px;
}
#price-comparison table tr:first-child th:nth-child(2) {
  font-size: 20px;
  color: var(--colorBlackSjk);
}

/*============================================================
==============================================================
BEER DINER
==============================================================
============================================================*/
.todays-on-tap__pc table {
  width: 100%;
  border: 1px solid var(--colorGraySjk);
  border-collapse: collapse;
  background: var(--colorWhiteSjk);
  color: var(--colorBlackSjk);
}

.todays-on-tap__pc th,
.todays-on-tap__pc td {
  border: 1px solid var(--colorGraySjk);
  height: 100%;
  padding: 16px;
  vertical-align: middle;
  text-align: center;
}

.todays-on-tap__pc th {
  background: var(--colorWhiteSjk);
  padding: 8px;
}

.todays-on-tap__pc td {
  position: relative;
  word-wrap: break-word;
  white-space: normal;
}

.todays-on-tap__pc [class^="tap-"]>* {
  margin: 0;
}

.todays-on-tap__pc .tap-style,
.todays-on-tap__pc .tap-name,
.todays-on-tap__pc .tap-detail {
  font-size: 16px;
}

.todays-on-tap__pc .tap-style,
.todays-on-tap__pc .tap-name {
  width: 30%;
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

.todays-on-tap__pc .tap-name h3,
.todays-on-tap__pc .tap-number {
  font-size: 32px;
}

.todays-on-tap__pc .tap-abv h5 {
  font-size: 24px;
  text-align: center;
}

.todays-on-tap__pc .tap-price-pint h5,
.todays-on-tap__pc .tap-price-half h5 {
  font-size: 20px;
  text-align: center;
}

.todays-on-tap__pc .tap-abv span,
.todays-on-tap__pc .tap-price-pint span,
.todays-on-tap__pc .tap-price-half span,
.todays-on-tap__pc .tap-style span,
.todays-on-tap__pc .tap-brewery span,
.todays-on-tap__pc .tap-name span,
.todays-on-tap__pc .tap-detail span {
  font-size: 12px;
  position: absolute;
  top: 8px;
  left: 8px;
}

.todays-on-tap__pc .tap-abv span,
.todays-on-tap__pc .tap-abv h5,
.todays-on-tap__pc .tap-price-pint span,
.todays-on-tap__pc .tap-price-pint h5,
.todays-on-tap__pc .tap-price-half span,
.todays-on-tap__pc .tap-price-half h5 {
  display: inline-block;
  vertical-align: middle;
}

.todays-on-tap__pc .tap-detail {
  width: 30%;
  padding-top: 32px;
  padding-bottom: 32px;
}

.todays-on-tap__pc .tap-number {
  width: 5%;
  background: var(--colorBlackSjk);
  color: var(--colorWhiteSjk);
}

.todays-on-tap__pc .tap-logo {
  width: 15%;
  text-align: center;
}

.todays-on-tap__pc .tap-style {
  width: 30%;
}

.todays-on-tap__pc .tap-name {
  width: 30%;
}

.todays-on-tap__pc .tap-abv,
.todays-on-tap__pc .tap-brewery {
  width: 20%;
  text-align: center;
}

.todays-on-tap__pc .tap-brewery {
  padding-top: 32px;
  padding-bottom: 32px;
  text-align: center;
  font-size: 14px;
}

.todays-on-tap__pc .tap-logo img,
.todays-on-tap__pc .tap-logo a,
.todays-on-tap__pc .tap-logo p,
.todays-on-tap__pc .tap-brewery a {
  display: inline-block;
  text-align: center;
}

.todays-on-tap__pc .tap-logo img {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
}

.todays-on-tap__pc .tap-logo a,
.todays-on-tap__pc .tap-brewery a {
  text-decoration: underline;
  font-size: 18px;
  margin-bottom: 8px;
}

.todays-on-tap__pc .tap-brewery a {
  display: block;
}

.todays-on-tap__pc .tap-logo p {
  font-size: 14px;
  line-height: normal;
}

@media only screen and (max-width: 1024px) {
  .todays-on-tap__sp {
    background: var(--colorWhiteSjk);
    color: var(--colorBlackSjk);
  }

  .todays-on-tap__sp table {
    table-layout: fixed;
    margin: 0;
  }

  .todays-on-tap__sp td {
    position: relative;
    vertical-align: middle;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
  }

  /* 共通のフォントサイズ */
  .todays-on-tap__sp .tap-number,
  .todays-on-tap__sp .tap-name {
    font-size: 24px;
  }

  .todays-on-tap__sp .tap-style,
  .todays-on-tap__sp .tap-abv,
  .todays-on-tap__sp .tap-price-pint,
  .todays-on-tap__sp .tap-price-half {
    font-size: 20px;
    font-weight: 500;
  }

  .todays-on-tap__sp .tap-detail,
  .todays-on-tap__sp .tap-location {
    font-size: 14px;
  }

  /* 共通の幅設定 */
  .todays-on-tap__sp .tap-logo,
  .todays-on-tap__sp .tap-abv,
  .todays-on-tap__sp .tap-brewery {
    width: 30%;
  }

  .todays-on-tap__sp .tap-style,
  .todays-on-tap__sp .tap-name,
  .todays-on-tap__sp .tap-detail {
    width: 60%;
  }

  /* tap-number の個別スタイル */
  .todays-on-tap__sp .tap-number {
    width: 10%;
    padding: 0;
    background: var(--colorBlackSjk);
    color: var(--colorWhiteSjk);
  }

  /* tap-brewery の個別スタイル */
  .todays-on-tap__sp .tap-brewery {
    text-decoration: underline;
    font-size: 18px;
  }

  /* tap-logo の個別スタイル */
  .todays-on-tap__sp .tap-logo img {
    width: 60px;
    height: 60px;
  }

  /* span の共通スタイル */
  .todays-on-tap__sp .tap-style span,
  .todays-on-tap__sp .tap-abv span,
  .todays-on-tap__sp .tap-price-pint span,
  .todays-on-tap__sp .tap-price-half span {
    font-size: 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    font-weight: normal;
  }
}
/* .today-on-tap table {
  width: 100%;
  border: 1px solid var(--colorGraySjk);
  border-collapse: collapse;
  background: var(--colorWhiteSjk);
  color: var(--colorBlackSjk);
}

.today-on-tap tr {
  border: none;
}

.today-on-tap th,
.today-on-tap td {
  border: 1px solid var(--colorGraySjk);
}

.today-on-tap th {
  padding: 8px;
  background: var(--colorWhiteSjk);
}

.today-on-tap td {
  padding: 12px;
}

.tap-style {
  position: relative;
  height: 104px;
  width: 17.5%;
  font-size: 16px;
  vertical-align: middle;
  text-align: center;
}

.tap-style span {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 12px;
}

.tap-style h4 {
  margin-bottom: 0;
}

.tap-number {
  width: 5%;
  font-size: 24px;
  text-align: center;
}

.tap-name {
  width: 30%;
  vertical-align: middle;
  text-align: center;
  font-size: 32px;
}

.tap-name h3 {
  margin-bottom: 0;
}

.tap-detail {
  width: 30%;
  vertical-align: middle;
  font-size: 14px;
}

.tap-abv,
.tap-price-pint,
.tap-price-half {
  width: 17.5%;
  border: 0;
  border: none;
}

.tap-abv span,
.tap-price-pint span,
.tap-price-half span {
  font-size: 12px;
}

.tap-abv span,
.tap-abv h5,
.tap-price-pint span,
.tap-price-pint h5,
.tap-price-half span,
.tap-price-half h5 {
  display: inline-block;
  vertical-align: middle;
}

.tap-abv span,
.tap-price-pint span,
.tap-price-half span {
  margin-right: auto;
  width: 30%;
}

.tap-style span,
.tap-abv span,
.tap-price-pint span,
.tap-price-half span {}

.tap-abv h5,
.tap-price-pint h5,
.tap-price-half h5 {
  margin: 0;
  text-align: right;
  width: 70%;
}

.tap-name h3 {
  font-size: 24px;
}

.tap-name,
.tap-style h4 {
  font-size: 20px;
}

.today-on-tap .tap-abv {
  border-bottom: none;
}

.today-on-tap .tap-price-pint {
  border-bottom: none;
  border-top: none;
}

.today-on-tap .tap-price-half {
  border-top: none;
} */

/*============================================================
==============================================================
HEADER
==============================================================
============================================================*/



/*============================================================
==============================================================
Accordion
==============================================================
============================================================*/
.accordion {
  width: 100%;
  /* max-width: 600px; */
}

.accordion-item {
  /* border-radius: 5px; */
  margin-bottom: 24px;
  overflow: hidden;
}

.accordion.accordion__news .accordion-item.bg-white {
    border: 2px solid var(--colorBeige);
    color: var(--colorBeige);
  }
.accordion.accordion__news .accordion-item.bg-beige {
    border: 2px solid var(--colorWhite);
    color: var(--colorWhite);
}


.accordion-item:last-child {
  margin-bottom: 0;
}

.accordion-header {
  background-color: var(--colorWhiteSjk);
  color: #000;
  padding: 24px;
  cursor: pointer;
  font-size: 20px;
  border: none;
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.accordion-header::before,
.accordion-header::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: var(--colorBlackSjk);
  transition: transform 0.3s ease;
}

.accordion-header::before {
  right: 20px;
  transform: rotate(90deg);
}

.accordion-header::after {
  right: 20px;
}

.accordion-header.active::before {
  transform: rotate(0deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  background-color: var(--colorWhiteSjk);
  transition: max-height 0.3s ease;
  font-size: 16px;
  color: var(--colorBlackSjk);
}

.accordion-content p {
  margin: 16px 0;
  font-size: 16px;
}
.accordion-box {
  margin: 24px 0;
}

.accordion.accordion__news .accordion-item {
  border: none;
  margin-bottom: 0;
  overflow: hidden;
  border-top: solid 1px var(--colorBlack);
  border-bottom: solid 1px var(--colorBlack);
  margin-top: -1px;
}
/* .accordion.accordion__news .accordion-item:first-child {
  border-top: none;
} */

.accordion.accordion__news .accordion-header {
  background-color: none;
  color: var(--colorBlackSjk);
  padding: 24px 0;
  cursor: pointer;
  font-size: 18px;
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.accordion.accordion__news .accordion-header time {
  margin-right: 24px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}

.accordion.accordion__news .accordion-content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background-color: var(--colorWhiteSjk);
  transition: max-height 0.3s ease;
  font-size: 16px;
  color: var(--colorBlackSjk);
}

@media only screen and (max-width: 767px) {
  .accordion-content p {
    font-size: 14px;
  }
  .accordion.accordion__news .accordion-header time {
    font-size: 14px;
  }
  .accordion.accordion__news .accordion-header {
    font-size: 16px;
  }
}

/*============================================================
==============================================================
JOURNAL, EVENT CALENDAR
==============================================================
============================================================*/


.post__category {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.section__pd:has(.post__category) {
  padding-bottom: 0;
}
.post__category a {
  margin-right: 8px;
}
.post__category a:last-child {
  margin-right: 0;
}

.card__box.card__journal .card__text {
  position: absolute;
  bottom: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  color: var(--colorWhiteSjk);
  width: 100%;
}
.card__box.card__journal .card__title {
  font-size: 24px;
}

.card__box.card__journal .card__tmb {
  transition: transform 0.3s ease;
  transform: scale(1);
}

.card__box.card__journal:hover .card__tmb {
  transform: scale(1.03);
}


/*============================================================
==============================================================
CONTACT
==============================================================
============================================================*/


label {
  margin-bottom: 8px;
}

input,
select,
textarea {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 32px;
  margin-top: 8px;
}

textarea {
  resize: vertical;
}

#otherCategoryContainer {
  display: none;
}

/*============================================================
==============================================================
Reveal Text
==============================================================
============================================================*/

.reveal-text {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 1.2em;
}

.reveal-text span {
  display: inline-block;
  transform: translateY(100%);
}

/* 発火したときだけアニメーション */
.reveal-text.active span {
  animation: riseUp 0.5s forwards;
}

.reveal-text.active span:nth-child(n) {
  animation-delay: calc(0.05s * var(--i));
}

@keyframes riseUp {
  to {
    transform: translateY(0);
  }
}












.grid__item:has(> .event__media) {
  position: relative;
}

.event__box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event__title,
.event__category-date {
  color:var(--colorSand)
}


.event__title {
  font-size: 40px;
}
.event__category-date {
  /* position: absolute; */
  bottom: 0;
  display: flex;
}
.event__category, .event__date {
  width: 50%;
  font-size: 40px;
}
.event__card--box {
  position: relative;
}

@media only screen and (max-width: 767px) {
  .event__title,
  .event__category,
  .event__date  {
    font-size: 32px;
  }
}









.info__logo--box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info__logo {
  width: 320px;
}

#events .grid .grid__item,
#our-brands .grid .grid__item {
  transition: transform 0.2s ease;
  /* 0.5秒かけて変化 */
}

#events .grid .grid__item:hover {
  transform: scale(0.93);
}














.section__parallax--box {
  display: flex;
  justify-content: space-around;
  padding: 80px;
}

.parallax--box .media,
.parallax--box .media .media__image img {
  margin-bottom: 0;
}

.hero__image--center {
  width: 33.3333%;
}

.hero__image--left,
.hero__image--right {
  width: 15%;
}

.hero__image--right {
  align-self: flex-end;
}

.section__parallax {
  height: calc(100vh - 128px);
  position: relative;
}

.section__parallax h1 {
  position: absolute;
  bottom: 64px;
  left: 64px;
  font-size: 200px;
  z-index: 90000;
}

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

  .section__parallax h1 {
    font-size: 128px;
    position: relative;
    bottom: 40px;
    left: 40px;
  }
  .section__parallax .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
    .section__parallax--box {
      width: 100%;
      padding: 40px 0;
    }

    .hero__image--left,
    .hero__image--right,
    {
    width: 25%;
    }

    .hero__image--center {
      width: 40%;
    }
    .hero__image--left,
    .hero__image--right {
      width: 25%;
    }
        .section__parallax {
          height: calc(100vh - 64px);
        }
                .section__parallax {
                  height: 66.66vh;
                }
}

@media only screen and (max-width: 767px) {
  .section__parallax {
    height: 66.66vh;
  }
  .section__parallax h1 {
    font-size: 64px;
    position: relative;
    left: 0;
  }


}


























/* .text-underline {
  position: relative;
  display: inline-block;
}

.text-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}
@media only screen and (max-width: 1024px) {
  header .text-underline::after {
    bottom: auto;
  }
} */
/*
.text-underline:hover::after {
  width: 100%;
}

.text-underline.active::after {
  width: 100%;
} */

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 初期状態 */
.fade-in__scroll {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

/* 可視化されたら */
.fade-in__scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.parallax-scene {
  position: relative;
  height: 100vh;
  perspective: 1000px;
  /* ← 奥行きをつける */
  overflow-x: hidden;
  overflow-y: auto;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-style: preserve-3d;
}

.back {
  transform: translateZ(-300px) scale(2);
}

.mid {
  transform: translateZ(-150px) scale(1.5);
}

.front {
  transform: translateZ(0);
}



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

  .grid__parallax--on-top {
    z-index: 100000;
  }
  .grid__parallax--behind {
    z-index: 0;
    position: absolute;
  }
  .grid__parallax--behind.right {
    right: 0;
    padding-right: 0;
  }
  .grid__parallax--behind.left {
    left: 0;
    padding-left: 0;
  }
}

#privacy-policy p {
  font-size: 16px;
}


.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease-out;
  z-index: 99999999999999999;
  background: var(--colorBeige);

}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル本体 */
.modal {
  padding: 80px;
  border-radius: 12px;
  width: 85%;
  /* transform: translateY(20px); */
  opacity: 0;
  transition:
    opacity .6s ease-out,
    transform .6s ease-out;
}

@media only screen and (max-width: 767px) {
  .modal {
    padding: 0;
    border-radius: 12px;
    width: 80%;
    transform: translateY(20px);
  }
}

.modal-overlay.show .modal {
  opacity: 1;
  transform: translateY(0);
}

.modal h2 {
  margin-top: 0;
  /* font-size: 24px; */
}

.modal button {
  /* margin-top: 16px; */
  padding: 8px 16px;
  border: none;
  /* border-radius: 8px; */
  background: none;
  /* color: var(--colorSand); */
  cursor: pointer;
  border: solid 1px var(--colorWhite);
}

@media only screen and (max-width: 767px) {
  .modal {
    border-radius: 12px;
    width: 80%;
    transform: translateY(20px);
  }
  .modal h2 {
    margin-top: 0;
    font-size: 16px;
  }
  .modal h3 {
    font-size: 20px;
  }
}

/* 初期状態：透明＋ぼかし＋わずかに下から */
.fade-blur {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(30px);
  transition: opacity 0.8s ease-out,
    filter 1s ease-out,
    transform 0.8s ease-out;
}

/* 表示領域に入った時に付与される */
.fade-blur.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media only screen and (max-width: 767px) {
  p br {
    /* display: none; */
  }
}


p > a,
dd > a {
  text-decoration: underline;
}

h2.info__title {
  font-size: 16px;
  margin-bottom: 0;
}
.news__cat {
  margin-right: 16px;
  font-size: 12px;
  background: var(--colorBeige);
  color: var(--colorWhite);
  padding: 4px 12px;
  border-radius: 100px;
  display: inline;
}



/* 丸＋細い× の閉じるボタン */
.modal-close {
  --size: 36px;
  /* 少しコンパクトに */
  --stroke: 1px;
  /* ×をかなり細く */
  --line: 16px;
  /* ×の長さ */
  --ring: 1px;
  /* 丸枠も細く */

  position: absolute;
  top: 96px;
  right: 96px;
  z-index: 999999999;

  width: var(--size);
  height: var(--size);
  border-radius: 9999px;
  border: var(--ring) solid var(--colorWhite);
  background: transparent;
  padding: 0;
  cursor: pointer;

  display: inline-grid;
  place-items: center;

  -webkit-tap-highlight-color: transparent;
}

/* × */
.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  width: var(--line);
  height: var(--stroke);
  background: var(--colorWhite);
  border-radius: 9999px;
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

/* 任意：ホバー時にだけうっすら反応 */
.modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.h__line::before {
  content: "";
  display: inline-block;
  width: 1.6em;
  /* ← ここだけ長く */
  height: 1px;
  background: currentColor;
  margin-right: .4em;
  vertical-align: .33em;
}

@media only screen and (max-width: 767px) {
  .modal-close {
    top: 24px;
    right: 24px;
  }
}



.lp__2026 {
  width: 200px;
  height: 200px;
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 1000000000;
}

@media only screen and (max-width: 767px) {
  .lp__2026 {
    width: 100px;
    height: 100px;
    right: 8px;
    bottom: 8px;
  }
}

.vertical__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.loading {
  position: fixed;
  inset: 0;
  background: var(--colorBeige);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000000001;

  opacity: 1;
  transition: opacity 0.8s ease;
  /* フェードアウト用 */
}

.loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loading__logo {
  width: 200px;

  /* 初期状態 */
  opacity: 0;
  transform: scale(0.96);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

.loading.is-logo-visible .loading__logo {
  opacity: 1;
  transform: scale(1);
}

.loading__logo svg {
  width: 100%;
  height: auto;
  display: block;
}