/* ===============================================
  * COMMON *
=============================================== */
:root {
  --spacer-xxs: 1.5rem;
  --spacer-xs: 2rem;
  --spacer-s: 1.8rem;
  --spacer-m: 4rem;
  --spacer-l: 5rem;
  --spacer-xl: 6rem;
  --padding-horizontal: 5.2%;
  --transition-duration: 1.5s;
}


@media (min-width: 769px) {
  :root {
    --spacer-xxs: 3rem;
    --spacer-xs: 4rem;
    --spacer-s: 3rem;
    --spacer-m: 8rem;
    --spacer-l: 10rem;
    --spacer-xl: 12rem;
    --padding-horizontal: min(4.54%, 5rem);
  }
}

.header[data-header-theme="light"].c-active,
.header[data-header-theme="dark"] {
  background: linear-gradient(180deg, #FCFDFF 33%, transparent 85%);
}

.main-area.lp {
  margin-bottom: 0 !important;
}

.lp_area img {
  width: 100%;
  height: auto;
}

.maivsiual {
  position: relative;
}

.lp_area .slick-slide {
  height: fit-content;
}

.slider-container {
  position: relative;
}

.main-container {
  overflow: clip;
  font-family: "ryo-text-plusn", serif;
  font-weight: 400;
  font-style: normal;
  color: #3C4250;
  font-size: calc(14* (100vw /375));
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .main-container {
    font-size: 1.6rem;
  }
}

.font_en {
  font-family: "adobe-garamond-pro", serif;
}

/*
 * Text
 */

/* pc */
body,
html {
  height: 100%;
  margin: 0 auto;
}

/* ===============================================
* 背景画像・背景色 *
=============================================== */
body:before,
body:after {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -1;
}

body:before {
  background: url(../img/bg.jpg) center/100% no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

body:after {
  background: linear-gradient(0deg, #FCFDFF 8%, transparent 50%);
  top: 0;
}

/* ===============================================
* nav *
=============================================== */

.main-container .nav li a {
  width: 100%;
}

.main-container .nav {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.main-container .nav ul {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.main-container .nav li {
  display: flex;
  justify-content: center;
  width: 100%;
  color: #7989AA;
  border-width: 1px;
  border-style: solid solid none none;
  background-color: rgb(252 253 255 / 80%);
  backdrop-filter: blur(5px);
  will-change: backdrop-filter;
  -webkit-backdrop-filter: blur(5px);
}

.main-container li.nav03 {
  border-style: solid none none none;
}

.main-container .nav p {
  width: 100%;
  height: calc(50* (100vw /375));
  font-size: calc(14* (100vw /375));
  font-family: bodoni-urw, serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.06em;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  line-height: 1.0714285714;
}

.main-container .nav li.active p {
  color: #fff;
}

.main-container .nav li.active {
  background-color: rgb(121 137 170 / 80%);
}

@media screen and (min-width: 768px) {
  .main-container .nav {
    font-size: 1.8rem;
  }

  .main-container .nav p {
    width: 100%;
    height: 6rem;
    font-size: 2rem;
  }
}

/* ===============================================
* credit *
=============================================== */
.credit-wrap {
  margin-top: calc(18* (100vw /375));
}

.credit-wrap a {
  display: inline-block;
  font-size: calc(12* (100vw /375));
  text-align: center;
  line-height: 2;
  white-space: nowrap;
  letter-spacing: 0.08em;
}

.credit-wrap a span {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .credit-wrap {
    margin-top: 2.4rem;
  }

  .credit-wrap a {
    font-size: 1.4rem;
  }
}






.maivsiual+p {
  margin-top: calc(53* (100vw /375));
}

.ttl--wrap h2 {
  position: relative;
  font-family: bodoni-urw, serif;
  font-style: normal;
  font-weight: 300;
  font-size: calc(36* (100vw /375));
  line-height: 1;
  letter-spacing: 0.06em;
  margin-top: calc(77* (100vw /375));
}

.sec01 .ttl--wrap h2 {
  margin-top: calc(170* (100vw /375));
}

.sec01 .ttl--wrap h2::before {
  content: "";
  position: absolute;
  background: url(../img/img_ttlStar.svg) center/100% no-repeat;
  width: calc(20 * (100vw / 375));
  height: calc(20 * (100vw / 375));
  top: calc(-97* (100vw /375));
  left: 50%;
  transform: translateX(-50%);
}

.ttl--wrap h2+p {
  font-size: calc(16* (100vw /375));
  margin-top: calc(5* (100vw /375));
  letter-spacing: 0.08em;
}

@media screen and (min-width: 768px) {
  .maivsiual+p {
    margin-top: 7.2rem;
  }

  .ttl--wrap h2 {
    font-size: 5.4rem;
    margin-top: 10.8rem;
  }

  .sec01 .ttl--wrap h2 {
    margin-top: 20.7rem;
  }

  .sec01 .ttl--wrap h2::before {
    width: 2rem;
    height: 2rem;
    top: -11.5rem;
  }

  .ttl--wrap h2+p {
    font-size: 1.8rem;
    margin-top: 1.7rem;
  }
}

/* ===============================================
* sec01 *
=============================================== */
.main-container .sec__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.main-container .lp--btn {
  width: calc(187*(100vw / 375));
  margin: calc(53*(100vw / 375)) auto 0;
  display: block;
}

.section--separator {
  display: block;
  margin: calc(80* (100vw /375)) auto 0;
  width: calc(350* (100vw /375));
}

@media screen and (max-width: 767px) {
  .main-container .sec__inner {
    flex-direction: column;
    width: calc(350* (100vw /375));
    margin: calc(32* (100vw /375)) auto 0;
    gap: calc(34* (100vw /375));
  }

  .main-container .sec__inner+.sec__inner {
    margin-top: calc(73* (100vw /375));
  }
}

@media screen and (min-width: 768px) {

  .main-container .sec01,
  .main-container .sec02,
  .main-container .sec03 {
    width: 100rem;
    margin-left: auto;
    margin-right: auto;
  }

  .main-container .sec__inner {
    gap: 10rem;
    margin-top: 5rem;
  }

  .main-container .sec__inner:nth-child(even) {
    flex-direction: row-reverse;
  }

  .main-container .sec__inner .inner_img {
    width: 38rem;
  }

  .main-container .sec__inner .inner_textArea {
    margin-top: 17.2rem;
  }

  .main-container .sec__inner .inner_textArea * {
    text-align: left;
  }

  .main-container .lp--btn {
    width: 27rem;
    margin: 8rem auto 0;
  }

  .section--separator {
    margin: 13rem auto 0;
    width: 100rem;
  }
}



/* ===============================================
* sec03 *
=============================================== */
@media screen and (max-width: 767px) {
  .sec03 .ttl--wrap h2+p {
    line-height: 1.7;
    margin-top: calc(7*(100vw / 375));
  }
}


.footer {
  z-index: 999;
}


/* ===============================================
* info--wrap *
=============================================== */
.info--wrap h3 {
  position: relative;
  width: fit-content;
  margin: calc(79* (100vw /375)) auto 0;
  font-size: calc(25* (100vw /375));
  line-height: 1;
}

.info--wrap h3::before,
.info--wrap h3::after {
  content: "";
  position: absolute;
  background: url(../img/img_ttlStar.svg) center/contain no-repeat;
  width: calc(13* (100vw /375));
  height: calc(13* (100vw /375));
  top: calc(6* (100vw /375));
}

.info--wrap h3::before {
  left: calc(-17* (100vw /375));
}

.info--wrap h3::after {
  right: calc(-17* (100vw /375));
}

.info--wrap h3+p {
  font-size: calc(14* (100vw /375));
  margin-top: calc(18* (100vw /375));
}

.info--wrap h3+p+p {
  font-size: calc(12* (100vw /375));
  line-height: 1.75;
  margin-top: calc(5* (100vw /375));
}

.info--wrap .lp--btn {
  margin: calc(55*(100vw / 375)) auto calc(80* (100vw /375));
}

@media screen and (min-width: 768px) {
  .info--wrap h3 {
    margin: 11.3rem auto 0;
    font-size: 3.4rem;
  }

  .info--wrap h3::before,
  .info--wrap h3::after {
    width: 2rem;
    height: 2rem;
    top: 0.7rem;
  }

  .info--wrap h3::before {
    left: -3.2rem;
  }

  .info--wrap h3::after {
    right: -3.2rem;
  }

  .info--wrap h3+p {
    font-size: 1.8rem;
    margin-top: 2.1rem;
  }

  .info--wrap h3+p+p {
    font-size: 1.4rem;
    margin-top: 0.7rem;
  }

  .info--wrap .lp--btn {
    margin: 7.5rem auto 13rem;
  }
}

/* ===============================================
  * アニメーション - 1 *
=============================================== */

/* 普通フェード */
.main-container .js_fade {
  opacity: 0;
  transition-duration: 1s;
  transition: ease-in, opacity 2500ms, transform 1000ms;
}

.main-container .js_fade.active {
  opacity: 1;
}


@media (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}





























/* ------------------------------------------------
  slider
  ------------------------------------------------ */
.fv-area__slider {
  margin-top: calc(32* (100vw /375));
}

.fv-area__slider--item .--img {
  position: relative;
  display: block;
  width: calc(250* (100vw /375));
  margin: auto;
}

.fv-area__slider--item .--img::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
  z-index: 1;
}

.fv-area__slider--item:not(.slick-center) .--img::before {
  background-color: rgb(252 253 255 / 80%);
  backdrop-filter: blur(4px);
  will-change: backdrop-filter;
  -webkit-backdrop-filter: blur(4px);
}

.fv-area__slider--item .inner_textArea {
  position: relative;
  width: calc(350* (100vw /375));
  transition: opacity 0.5s ease;
  opacity: 1;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(65* (100vw /375));
}

.fv-area__slider--item:not(.slick-center) .inner_textArea {
  opacity: 0;
}

#js-fv-slider .slick-arrow {
  position: absolute;
  top: calc(107*(100vw / 375));
  width: calc(40*(100vw / 375));
  z-index: 2;
  cursor: pointer;
}

#js-fv-slider .prev_icon {
  left: calc(12* (100vw /375));
}

#js-fv-slider .next_icon {
  right: calc(12* (100vw /375));
  left: initial;
}

@media screen and (max-width: 767px) {
  .fv-area__slider--item {
    width: calc(262* (100vw /375));
    overflow: visible;
  }

  #js-fv-slider img {
    position: relative;
  }
}

@media screen and (min-width: 768px) {
  .fv-area__slider {
    margin-top: 5rem;
    margin-bottom: 0;
  }

  .fv-area__slider--item {
    width: 55rem;
  }

  .fv-area__slider--item .--img {
    width: 36rem;
  }

  .fv-area__slider--item .inner_textArea {
    width: 55rem;
    margin-top: 7.5rem;
  }

  #js-fv-slider .slick-arrow {
    top: 15rem;
    width: 7rem;
  }

  #js-fv-slider .prev_icon {
    left: 21rem;
  }

  #js-fv-slider .next_icon {
    right: 21rem;
    left: initial;
  }
}

/* dot___________________________*/
.fv-area__slider .slick-dots {
  bottom: calc(260* (100vw /375));
}

.fv-area__slider .slick-dots li {
  width: calc(8* (100vw /375));
  height: calc(8* (100vw /375));
  margin: 0 calc(7.5* (100vw /375));
}

.fv-area__slider .slick-dots li button {
  width: calc(8* (100vw /375));
  height: calc(8* (100vw /375));
  padding: 0;
  opacity: 0.2;
  background: #3C4250;
  transform: rotate(45deg);
  border-radius: 0;
  transition: opacity 0.3s;
}

.fv-area__slider .slick-dots li.slick-active button {
  opacity: 1;
}

.fv-area__slider .slick-dots li button:before {
  content: none !important;
}

@media screen and (min-width: 768px) {
  .fv-area__slider .slick-dots {
    bottom: 23.7rem;
  }

  .fv-area__slider .slick-dots li {
    width: 0.8rem;
    height: 0.8rem;
    margin: 0 0.75rem;
  }

  .fv-area__slider .slick-dots li button {
    width: 0.8rem;
    height: 0.8rem;
  }

  .main-container .sec02 .lp--btn {
    margin-top: 7.2rem;
  }
}

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