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

  intro

--------------------------------------------------------------------------------*/
.intro-sec {
  background: url("../image/intro_bg.png") no-repeat right top;
  background-size: contain;
}

/*--------------------------------------------------------------------------------
  .intro-hd
--------------------------------------------------------------------------------*/
.intro-hd {
  padding-block: var(--space-l);
}
.intro-hd img {
  width: 100%;
  max-width: 1000px;
}

/*--------------------------------------------------------------------------------
  .intro
--------------------------------------------------------------------------------*/
.intro {
  margin-top: var(--space-m);
  padding-bottom: var(--space-l);
  text-align: left;
}
.intro_ttl {
  font-weight: 600;
  font-size: var(--fs-l);
  line-height: var(--lh-l);
}
.intro_txt {
  margin-top: 1.5rem;
  font-weight: 400;
  font-size: var(--fs-s);
  line-height: var(--lh-l);
}

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

  main visual

--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
  .mv-slider
--------------------------------------------------------------------------------*/
.mv-slider img {
  width: 100%;
  height: 100%;
  max-height: 640px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center center;
  border-radius: 1.5rem;
}
@media (max-width: 640px) {
  .mv-slider {
    width: 80%;
    margin-inline: auto;
  }
}

/*--------------------------------------------------------------------------------
  .mv-slider_dots
--------------------------------------------------------------------------------*/
.mv-slider_dots {
  margin-top: 0.5rem;
}
.mv-slider_dots .slick-dots li.slick-active button:before { color: var(--color-base); }

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

  membership

--------------------------------------------------------------------------------*/
.membership {
  border-radius: 1rem;
  padding: var(--space-s) var(--inner-space-m);
  line-height: var(--lh-l);
  background-color: #FFF;
  box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
}
.membership_ttl {
  font-weight: 600;
  font-size: var(--fs-3m);
  margin-bottom: 0.5rem;
}
.membership_txt {
  font-weight: 400;
  font-size: var(--fs-s);
}
@media not (max-width: 640px) {
  .membership {
    max-width: 1000px;
    margin-inline: auto;
    margin-top: var(--space-m);
  }
}
@media (max-width: 640px) {
  .membership_txt {
    text-align: left;
  }
}

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

  menu

--------------------------------------------------------------------------------*/
.menu {
  margin-top: var(--space-m);
  border-radius: 1rem;
  padding: var(--space-m) var(--inner-space-m);
  background-image: url("../image/menu_bg-top.png"), url("../image/menu_bg-bottom.png");
  background-repeat: no-repeat;
  background-position: right top 1rem, left bottom 1rem;
  background-size: 80%, 80%;
  background-color: var(--bg-blue-1);
}
.menu_ttl {
  font-size: var(--fs-2l);
  line-height: var(--lh-s);
  font-weight: 600;
  margin-bottom: var(--space-2s);
}
.menu_list {
  list-style: none;
  font-size: var(--fs-m);
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  text-align: left;
  font-weight: 400;
}
.menu_list li {
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
}
.menu_list-no {
  flex-shrink: 0;
  font-weight: 600;
  font-family: var(--ff-min);
  font-size: var(--fs-l);
}

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

  section

--------------------------------------------------------------------------------*/
.sec {
  margin-top: var(--space-s);
  display: flex;
  flex-direction: column;
  row-gap: var(--space-s);
}

/*--------------------------------------------------------------------------------
  .sec_box
--------------------------------------------------------------------------------*/
@media not (max-width: 640px) { .sec_box { --pd: var(--space-l) var(--inner-space-l); } }
@media (max-width: 640px) { .sec_box { --pd: var(--space-m) var(--inner-space-m); } }
.sec_box {
  --list-rgap: 0.5rem;
  --no-width: 3rem;
  border-radius: 1rem;
  padding: var(--pd);
  color: #FFF;
  text-align: left;
}
.sec_box:nth-of-type(1) { background: var(--color-pink) url("../image/bg01.png") no-repeat right var(--inner-space-m) center / auto 50%; }
.sec_box:nth-of-type(2) { background: var(--color-blue) url("../image/bg02.png") no-repeat right var(--inner-space-m) center / auto 80%; }
.sec_box:nth-of-type(3) { background: var(--color-yellow) url("../image/bg03.png") no-repeat right var(--inner-space-m) center / auto 80%; }
.sec_box:nth-of-type(4) { background: var(--color-pink) url("../image/bg04.png") no-repeat right center / auto 100%; }
.sec_box:nth-of-type(5) { color: inherit; padding-bottom: 0; }
.sec_ttl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  font-size: var(--fs-2l);
  line-height: var(--lh-s);
  font-weight: 600;
}
.sec_ttl-no {
  width: var(--no-width);
  font-family: var(--ff-min);
  font-size: var(--fs-3m);
  margin-top: -0.25rem;
}
.sec_content {
  font-weight: 400;
  font-size: var(--fs-s);
  padding-left: var(--no-width);
  margin-top: var(--space-2s);
}
.sec_sub-ttl {
  font-weight: 600;
  font-size: var(--fs-3m);
  margin-bottom: 1rem;
}
.sec_sub-ttl:not(:first-of-type) {
  margin-top: var(--space-s);
}

/*--------------------------------------------------------------------------------
  .sec-price
--------------------------------------------------------------------------------*/
.sec-price {
  margin-top: var(--space-s);
  max-width: 800px;
  margin-inline: auto;
  border-radius: 1rem;
  font-weight: 400;
  font-size: var(--fs-s);
  padding: var(--space-s) var(--inner-space-m);
  line-height: var(--lh-l);
  background-color: #FFF;
  box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
  text-align: center;
}
.price-label {
  display: inline-flex;
  background-color: var(--bg-blue-light);
  border: 1px solid var(--bg-blue-1);
  border-radius: 999px;
  line-height: var(--lh-s);
  padding: 0.35rem 1rem;
}
.price-label.-annual { font-weight: 600; }
.price {
  font-size: var(--fs-4l);
  font-weight: 700;
  line-height: var(--lh-s);
  margin-block: 0.5rem 1rem;
}
.price_num { font-size: var(--fs-4l); margin-left: 0.25rem; }
.price_tax { font-size: 1rem; }
.price-desc { margin-top: 1.5rem; }

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

  [js] inview

--------------------------------------------------------------------------------*/
.js_inview {
  opacity: 0;
  transform: translateY(var(--space-s));
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js_inview.is-active {
  opacity: 1;
  transform: translateY(0);
}