@charset "utf-8";
/*--------------------------------------------------------------------------------

  main visual

--------------------------------------------------------------------------------*/
.mv {
  width: 100%;
  background-color: var(--color-primary);
  overflow: hidden;
  position: relative;
}
@media (min-width: 761px) {
  .mv { display: grid; grid-template-columns: auto 1fr; }
}

/*--------------------------------------------------------------------------------
  .mv-slider
--------------------------------------------------------------------------------*/
@media (min-width: 761px) { .mv-slider { --width: max(760px, 60%); --item-height: clamp(500px, calc(600 / var(--base-width) *100vw), 600px); } }
@media (max-width: 760px) { .mv-slider { --width: 85%; --item-height: min(calc(500 / 760 * 100vw), 500px); } }
.mv-slider {
  opacity: 0;
  width: var(--width);
  margin: 0 auto;
  padding-top: var(--space-m);
  position: relative;
}
.mv-slider.slick-initialized { opacity: 1; }
.mv-slider .slick-list { overflow: visible; }
.mv-item {
  padding: 0 0.5rem;
  height: var(--item-height);
}
.mv-item img {
  border-radius: 1.5rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 761px) {
  .mv-slider { grid-area: 1 / 1 / 3 / 3; }
}

/*--------------------------------------------------------------------------------
  .mv-control
--------------------------------------------------------------------------------*/
.mv-control {
  display: none;
  align-items: center;
  column-gap: 1.5rem;
  padding: var(--space-m) var(--side-space);
}
.mv:has(.mv-item:nth-of-type(2)) .mv-control {
  display: flex;
}
@media (min-width: 761px) {
  .mv-control {
    grid-area: 3 / 1 / 4 / 2;
    align-self: center;
  }
}
@media (max-width: 760px) {
  .mv-control { padding-bottom: 0; }
}

/* .mv-control_btn
----------------------------------------*/
.mv-control_btn {
  display: inline-flex;
  border: 1px solid #FFF;
  border-radius: 100%;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 1;
  position: relative;
  cursor: pointer;
}
.mv-control_btn:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: currentColor;
  color: #FFF;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 40%;
}
.mv-control_btn,
.mv-control_btn:before { transition: var(--hover-trans); }
.mv-control_btn.is-pause:before { mask-image: var(--icon-pause); }
.mv-control_btn.is-play:before { mask-image: var(--icon-play); }
@media (hover: hover) {
  .mv-control_btn:hover { background-color: #FFF; }
  .mv-control_btn:hover:before { color: var(--color-primary); }
}
@media (max-width: 760px) {
  .mv-control_btn { margin-right: auto; }
}

/* .mv-control_dots
----------------------------------------*/
.mv-control_dots .slick-dots { gap: 0.5rem; }
.mv-control_dots .slick-dots li {
  width: 2rem;
  height: 4px;
}
.mv-control_dots .slick-dots li button:before {
  border: 0;
  border-radius: 9999px;
  background-color: #FFF;
  opacity: 0.2;
  transition: var(--hover-trans);
}
.mv-control_dots .slick-dots li.slick-active button:before { opacity: 1; }
@media (hover: hover) {
  .mv-control_dots .slick-dots li button:hover:before { opacity: 1; }
}

/*--------------------------------------------------------------------------------
  .mv-today
--------------------------------------------------------------------------------*/
.mv-today {
  padding-top: var(--space-m);
}
.mv-today_content {
  padding: var(--box-space-l);
  display: flex;
  align-items: center;
  column-gap: var(--space-s);
  background-color: #FFF;
  border-top-left-radius: 1rem;
  margin-bottom: -1px;
  position: relative;
}
.mv-today .corner {
  position: absolute;
  bottom: 0;
  width: 1rem;
  height: 1rem;
  background-color: #FFF;
  z-index: 2;
}
.mv-today .corner:first-of-type { left: calc(-1 * (1rem - 1px)); }
.mv-today .corner:last-of-type { right: calc(-1 * (1rem - 1px)); transform: scale(-1, 1); }
.mv-today .corner:after {
  content: "";
  width: 1rem;
  height: 1rem;
  clip-path: circle(100.0% at 0 0);
  background-color: var(--color-primary);
  position: absolute;
  left: -1px;
  top: -1px;
  z-index: 2;
}
@media (min-width: 761px) {
  .mv-today {
    grid-area: 2 / 2 / 4 / 3;
    justify-self: end;
    align-self: end;
  }
  .mv-today_content {
    width: fit-content;
  }
  .mv-today .corner:last-of-type { display: none; }
}
@media (max-width: 760px) {
  .mv-today {
    padding-left: var(--side-space);
    padding-right: var(--side-space);
  }
  .mv-today_content {
    border-top-right-radius: 1rem;
    justify-content: center;
  }
}

/* .mv-today_date
----------------------------------------*/
.mv-today_date {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.mv-today_date .y {
  grid-area: 1 / 1 / 2 / 3;
  font-size: var(--fs-l);
}
.mv-today_date .md {
  grid-area: 2 / 1 / 3 / 2;
  font-size: var(--fs-4l);
}
.mv-today_date .week {
  grid-area: 2 / 2 / 3 / 3;
  font-size: var(--fs-s);
  border-radius: 100%;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.2em;
  height: 2.2em;
  background-color: var(--color-gray);
  color: #FFF;
  align-self: center;
  text-align: center;
}
.mv-today_date .week.-sat { background-color: var(--color-primary-light); }
.mv-today_date .week.-sun { background-color: var(--color-warning-light); }

/* .mv-today_schedule
----------------------------------------*/
.mv-today_schedule {
  line-height: var(--line-height-2s);
  color: var(--color-primary);
}
.mv-today_schedule .time {
  font-weight: 800;
  font-size: var(--fs-3l);
}
.mv-today_schedule .close {
  font-family: var(--ff-go);
  font-weight: 800;
  font-size: var(--fs-3l);
}

/*--------------------------------------------------------------------------------

  nav

--------------------------------------------------------------------------------*/
.top-nav {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  width: 100%;
  max-width: calc(var(--base-width) * 1px);
  margin: 0 auto;
  font-family: var(--ff-go);
  font-size: var(--fs-m);
  font-weight: 500;
  display: flex;
}
.top-nav_item { text-align: center; line-height: var(--line-height-s); }
.top-nav_item.-contact { width: 100%; }
.top-nav_item a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 0.5rem;
}
.top-nav:not(:hover) a { transition: none; }
@media (min-width: 761px) {
  .top-nav { padding: var(--box-space-m) 1rem; }
  .top-nav_item { width: 70%; }
  .top-nav_item:not(:first-child) {
    border-left: 1px solid var(--border-color);
  }
  .top-nav_item a { padding: 0 1.5rem; }
}
@media (max-width: 760px) {
  .top-nav {
    padding: var(--space-m) var(--side-space);
    flex-wrap: wrap;
    gap: var(--box-space-s);
  }
  .top-nav_item { width: calc(50% - (var(--box-space-s) / 2)); }
  .top-nav_item a {
    border-radius: 0.75rem;
    padding: var(--box-space-m);
    border: 1px solid var(--color-gray-light);
  }
}
.top-nav_item a:before {
  content: "";
  display: block;
  width: 100%;
  height: 2.25em;
  background: var(--color-primary);
  color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
}
.top-nav_item.-contact a:before { mask-image: var(--icon-nav-contact); }
.top-nav_item.-time a:before { mask-image: var(--icon-nav-time); }
.top-nav_item.-price a:before { mask-image: var(--icon-nav-price); }
.top-nav_item.-floor a:before { mask-image: var(--icon-nav-floor); }
.top-nav_item.-access a:before { mask-image: var(--icon-nav-access); }
@media (hover: hover) {
  .top-nav_item a:hover { border-color: var(--color-primary); }
}

/*--------------------------------------------------------------------------------

  sns

--------------------------------------------------------------------------------*/
.follow-us {
  background-color: var(--color-secondary-lightest);
  padding: var(--space-l) var(--side-space);
  text-align: center;
}
.follow-us_btn {
  --btn-icon-size: 1.75em;
  --btn-width: 100%;
  --btn-width-min: min(100%, 600px);
  --btn-radius: 0.75rem;
  --btn-fs: var(--fs-2l);
  --btn-bg: #FFF;
  --btn-bg-hover: #FFF;
  --btn-outline: 2px solid var(--color-secondary-lighter);
  --btn-outline-hover: 2px solid var(--color-secondary-lighter);
  --btn-txt: var(--txt-color);
  --btn-txt-hover: var(--color-secondary);
  --btn-txt-fw: bold;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: var(--space-m);
}
.follow-us_btn li { width: min((50% - 0.5rem), 500px); }
@media (min-width: 761px) {
  .follow-us_btn { --btn-pd: calc(var(--default-btn-pd) + 0.15rem); }
}
@media (max-width: 760px) {
  .follow-us_btn li { width: 100%; }
}

/* Google翻訳用 */
.follow-us_ttl .u-tr {
  line-height: var(--line-height-s);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.75rem;
  font-family: var(--ff-go);
  font-size: var(--fs-l);
  font-weight: 800;
}
.follow-us_ttl .u-tr .line1 {
  font-size: var(--fs-3l);
  color: var(--color-secondary);
}

/*--------------------------------------------------------------------------------

  news

--------------------------------------------------------------------------------*/
.news-sec {
  padding-top: var(--space-2l);
}
.news {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "news-hd news-control"
    "news-content news-content"
    "news-btn news-btn";
}
.news_hd { grid-area: news-hd; }
.news_control { grid-area: news-control; }
.news_content { grid-area: news-content; }
.news_btn { grid-area: news-btn; }
.news_btn {
  padding-top: var(--space-l);
  text-align: center;
}

/*--------------------------------------------------------------------------------
  .news-slider
--------------------------------------------------------------------------------*/
.news-slider { opacity: 0; }
.news-slider.slick-initialized { opacity: 1; }

/*--------------------------------------------------------------------------------
  .news_control
--------------------------------------------------------------------------------*/
.news_control {
  display: flex;
  column-gap: 0.75rem;
}
.news_control .slide-arrow.slick-disabled {
  --arrow-bg: var(--color-gray-lighter);
  --arrow-bg-hover: var(--color-gray-lighter);
  --arrow-outline: 1px solid var(--color-gray-lighter);
  --arrow-outline-hover: 1px var(--color-gray-lighter);
  --arrow-color: #FFF;
  --arrow-color-hover: #FFF;
}

/*--------------------------------------------------------------------------------

  exhibition

--------------------------------------------------------------------------------*/
.exhibition-sec {
  position: relative;
  background: linear-gradient(0deg, var(--color-secondary-lighter) 0%, #FFF 60%);
  padding-top: var(--space-3l);
}
.exhibition {
  display: grid;
  position: relative;
  z-index: 2;
}
.exhibition_img { grid-area: exhibition-img; }
.exhibition_hd { grid-area: exhibition-hd; }
.exhibition_btn { grid-area: exhibition-btn; }
.exhibition_btn {
  padding-top: var(--space-l);
}
@media (min-width: 761px) {
  .exhibition {
    grid-template-columns: 1fr 60%;
    grid-template-areas: 
      "exhibition-hd exhibition-img"
      "exhibition-btn exhibition-img";
  }
  .exhibition_btn {
    padding-left: 5%;
    padding-bottom: calc(var(--box-space-2l) * 2.5);
  }
  .exhibition_img {
    margin-left: -5%;
    align-self: center;
  }
}
@media (max-width: 760px) {
  .exhibition {
    text-align: center;
    grid-template-areas: 
      "exhibition-hd"
      "exhibition-img"
      "exhibition-btn";
  }
  .exhibition_hd {
    padding-bottom: var(--space-2l);
  }
  .exhibition_btn {
    padding-bottom: var(--space-4l);
  }
  .exhibition_img {
    padding: 0 var(--box-space-s);
  }
}

/* Google翻訳用 */
.exhibition_hd .u-tr { line-height: var(--line-height-s); }
.exhibition_hd .u-tr .line1 {
  line-height: 2.4;
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-secondary-lighter);
  text-underline-offset: 0.75rem;
  text-decoration-skip-ink: none;
  font-weight: bold;
  font-size: var(--fs-m);
  color: var(--color-secondary);
  padding-bottom: 0.75rem;
  margin-bottom: var(--space-s);
}
.exhibition_hd .u-tr .line2 {
  display: flex;
  flex-direction: column;
  column-gap: 0.75rem;
  font-family: var(--ff-go);
  font-size: var(--fs-2l);
  font-weight: 800;
}
.exhibition_hd .u-tr .line2_1 {
  font-size: var(--fs-2l);
}
.exhibition_hd .u-tr .line2_2 {
  font-size: var(--fs-4l);
  color: var(--color-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
}
.exhibition_hd .u-tr .line2_2 small {
  font-size: var(--fs-3l-rem);
  color: var(--txt-color);
}
@media (min-width: 761px) {
  .exhibition_hd .u-tr .line1,
  .exhibition_hd .u-tr .line2 { margin-left: 5%; }
}
@media (max-width: 760px) {
  .exhibition_hd .u-tr .line1,
  .exhibition_hd .u-tr .line2_2 {
    justify-content: center;
  }
}

/*--------------------------------------------------------------------------------
  .exhibition-wave
--------------------------------------------------------------------------------*/
@media (min-width: 2001px) { .exhibition-wave { --width: 150%; } }
@media (max-width: 2000px) { .exhibition-wave { --width: 200%; } }
@media (max-width: 760px) { .exhibition-wave { --width: 250%; } }
@media (min-width: 761px) { .exhibition-wave { --duration: 50s; } }
@media (max-width: 760px) { .exhibition-wave { --duration: 40s; } }
.exhibition-sec { overflow: hidden; }
.exhibition-wave {
  display: flex;
  width: var(--width);
  height: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  overflow: hidden;
}
.exhibition-wave:before,
.exhibition-wave:after {
  content: "";
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  background: var(--color-secondary-lightest);
  color: currentColor;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4000 100" fill="currentColor"><path d="M -250 60 Q -187.5 60 -125 30 Q 0 -30 125 30 Q 187.5 60 250 60 Q 312.5 60 375 30 Q 500 -30 625 30 Q 687.5 60 750 60 Q 812.5 60 875 30 Q 1000 -30 1125 30 Q 1187.5 60 1250 60 Q 1312.5 60 1375 30 Q 1500 -30 1625 30 Q 1687.5 60 1750 60 Q 1812.5 60 1875 30 Q 2000 -30 2125 30 Q 2187.5 60 2250 60 Q 2312.5 60 2375 30 Q 2500 -30 2625 30 Q 2687.5 60 2750 60 Q 2812.5 60 2875 30 Q 3000 -30 3125 30 Q 3187.5 60 3250 60 Q 3312.5 60 3375 30 Q 3500 -30 3625 30 Q 3687.5 60 3750 60 Q 3812.5 60 3875 30 Q 4000 -30 4125 30 Q 4187.5 60 4250 60 L 4000 100 L 0 100 Z"></path></svg>');
  mask-repeat: repeat-x;
  mask-position: left bottom;
  mask-size: contain;
  animation: exhibition-wave var(--duration) infinite linear 0s both;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
@keyframes exhibition-wave {
  from { transform: translateX(0); } to { transform: translateX(-100%); }
}

/*--------------------------------------------------------------------------------

  learn

--------------------------------------------------------------------------------*/
.learn-sec {
  background-color: var(--color-secondary-lightest);
  padding-top: var(--space-2l);
}
.learn-hd {
  text-align: center;
  padding-bottom: var(--space-2l);
}
@media (min-width: 761px) {
  .learn-hd img {
    max-width: max(640px, calc(760 / 1200 * 100vw));
  }
}

/* Google翻訳用 */
.learn-hd .u-tr {
  line-height: var(--line-height-s);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--ff-go);
  font-size: var(--fs-3l);
  font-weight: 800;
}
.learn-hd .u-tr .line1 {
  font-size: var(--fs-l);
}
.learn-hd .u-tr .line2 {
  font-size: var(--fs-3l);
  color: var(--color-secondary);
}

/*--------------------------------------------------------------------------------
  .learn
--------------------------------------------------------------------------------*/
.learn {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-s);
  padding-bottom: var(--space-2l);
}
.learn_box {
  width: 100%;
  display: grid;
  background-color: #FFF;
  border-radius: 1.5rem;
  column-gap: var(--box-space-l);
  padding: var(--box-space-l);
}
.learn_img { grid-area: learn-img; }
.learn_ttl { grid-area: learn-ttl; }
.learn_txt { grid-area: learn-txt; }
.learn_btn { grid-area: learn-btn; }
.learn_img { position: relative; }
.learn_img img:not(.chikyu-emblem) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: 1rem;
}
.learn_img .chikyu-emblem {
  position: absolute;
  left: var(--box-space-m);
  top: var(--box-space-m);
  width: min(25%, 120px);
  z-index: 1;
}
.learn_ttl .sub {
  line-height: 2.4;
  color: var(--color-secondary);
  font-family: var(--ff-go);
  font-weight: 500;
  display: inline;
  padding-bottom: 0.5rem;
  background:
    linear-gradient(to right, var(--color-secondary) 0%, var(--color-secondary) 50%, #FFF 51%, #FFF 100%)
    repeat-x left bottom/min(calc(6 / 400 * 100vw), 6px) 2px;
}
.learn_ttl .main {
  line-height: var(--line-height-s);
  font-family: var(--ff-go);
  font-weight: 800;
  font-size: var(--fs-3l);
  padding-top: 1rem;
}
.learn_txt { padding-bottom: var(--space-m); }
.learn_btn {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (min-width: 761px) {
  .learn_box {
    grid-template-columns: 35% 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
      "learn-img learn-ttl"
      "learn-img learn-txt"
      "learn-img learn-btn";
  }
  .learn_box:nth-of-type(odd) {
    grid-template-columns: 1fr 35%;
    grid-template-areas:
      "learn-ttl learn-img"
      "learn-txt learn-img"
      "learn-btn learn-img";
  }
  .learn_ttl { padding-bottom: var(--box-space-m); }
}
@media (max-width: 760px) {
  .learn_box {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "learn-ttl"
      "learn-img"
      "learn-txt"
      "learn-btn";
  }
  .learn_ttl { padding-bottom: var(--box-space-l); }
  .learn_txt { padding-top: 1.5rem; }
  .learn_img,
  .learn_ttl,
  .learn_btn { text-align: center; }
  .learn_btn {
    --btn-width-min: min(100%, 320px);
    justify-content: center;
  }
}

/*--------------------------------------------------------------------------------

  guide

--------------------------------------------------------------------------------*/
.guide-sec {
  padding-top: var(--space-2l);
  padding-bottom: var(--space-2l);
}
.guide {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}
.guide_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: 1.5rem;
}
.guide_area-txt {
  flex: 1;
  align-self: center;
}
.guide_lead {
  line-height: var(--line-height-s);
  font-weight: bold;
  font-size: var(--fs-2l);
}
.guide_txt {
  padding-top: 2rem;
  padding-bottom: var(--space-m);
}
@media (min-width: 761px) {
  .guide_img { width: 40%; }
}
@media (max-width: 760px) {
  .guide_img { width: 100%; text-align: center; }
  .guide_btn { text-align: center; }
}

/*--------------------------------------------------------------------------------
  .guide-nav
--------------------------------------------------------------------------------*/
@media (min-width: 761px) { .guide-nav { --columns-min: 20%; } }
@media (max-width: 760px) { .guide-nav { --columns-min: 40%; } }
.guide-nav {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  padding-top: var(--space-l);
  font-family: var(--ff-go);
  font-size: var(--fs-m);
  font-weight: 500;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--columns-min), 1fr));
  justify-content: center;
  gap: var(--box-space-s);
}
.guide-nav_item { line-height: var(--line-height-s); }
.guide-nav_item a {
  border-radius: 0.75rem;
  padding: var(--box-space-m);
  border: 1px solid var(--color-gray-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 0.5rem;
}
.guide-nav_item a:before {
  content: "";
  display: block;
  width: 100%;
  height: 2.25em;
  background: var(--color-primary);
  color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
}
.guide-nav_item.-time a:before { mask-image: var(--icon-nav-time); }
.guide-nav_item.-price a:before { mask-image: var(--icon-nav-price); }
.guide-nav_item.-floor a:before { mask-image: var(--icon-nav-floor); }
.guide-nav_item.-access a:before { mask-image: var(--icon-nav-access); }
@media (hover: hover) {
  .guide-nav_item a:hover { border-color: var(--color-primary); }
}