@charset "UTF-8";
:root {
  scroll-padding: 122px;
  scroll-behavior: smooth;
}
@media screen and (max-width: 767px) {
  :root {
    scroll-padding: 0;
  }
}

/*------------------------------
    template override
--------------------------------*/
.navi--header .navi__item {
  flex: none !important;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
}

.fv--second .title--page {
  font-size: clamp(1.5rem, 1.1892265193rem + 1.3259668508vw, 2.25rem);
  font-family: "Noto Serif JP", serif;
}

.pageFooter__cvBtn.btn--cv {
  position: relative;
  min-height: 80px;
  border: none;
  background: none;
  font-family: "Noto Serif JP", serif;
  transition: 0.3s;
}
.pageFooter__cvBtn.btn--cv span {
  position: relative;
  z-index: 1;
}
.pageFooter__cvBtn.btn--cv::before, .pageFooter__cvBtn.btn--cv::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(0, 104, 55) 0%, rgb(54, 136, 43) 100%);
  content: "";
  transition: 0.3s;
}
.pageFooter__cvBtn.btn--cv::after {
  opacity: 0;
  background: linear-gradient(0deg, rgb(54, 136, 43) 0%, rgb(0, 104, 55) 100%);
}
.pageFooter__cvBtn.btn--cv:hover {
  color: #fff;
}
.pageFooter__cvBtn.btn--cv:hover::after {
  opacity: 1;
}

.pageFooter__related {
  padding-bottom: 60px;
}
.pageFooter__related .container--col3 {
  justify-content: center;
}
.pageFooter__related .bnr__item a {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  text-align: center;
  gap: 1em;
}

.pageFooter__contact {
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .pageFooter__contact {
    font-size: 0.8125rem;
  }
}
.pageFooter__contact > *:not(.contact__tel) {
  font-family: "Noto Serif JP", serif;
}

.pageFooter__note {
  font-family: "Noto Serif JP", serif;
}

.pageFooter__seller .seller .seller__item {
  margin: 0 20px 25px;
}

/*------------------------------
    common
--------------------------------*/
body {
  animation: fadeInBody 1s;
}

@keyframes fadeInBody {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .lg-visible {
    display: none;
  }
}

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

.tablet-visible {
  display: none;
}
@media screen and (min-width: 767px) and (max-width: 980px) {
  .tablet-visible {
    display: block;
  }
}

.en-label {
  font-size: clamp(0.75rem, 0.6982044199rem + 0.2209944751vw, 0.875rem);
  font-family: "Cormorant Garamond", serif;
}

.container--view .img-hero {
  margin-inline: calc(50% - 50vw);
}
.img-hero img {
  width: 100%;
}
.img-hero figcaption {
  margin-block: 0.5em;
  padding-inline: 20px;
  font-size: clamp(0.75rem, 0.6982044199rem + 0.2209944751vw, 0.875rem);
  text-align: right;
}
.img-hero figcaption.small {
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
}

.page-main, .page-top {
  padding-bottom: clamp(3.125rem, -1.5625rem + 9.765625vw, 6.25rem);
  font-weight: 500;
  font-family: "Noto Serif JP", serif;
}
@media screen and (min-width: 768px) {
  .page-main, .page-top {
    letter-spacing: 0.1em;
  }
}
.page-main img, .page-top img {
  vertical-align: bottom;
}
.page-main figcaption, .page-top figcaption {
  margin-top: 0.5em;
}

.page-main {
  overflow: hidden;
}

.page-fv img {
  width: 100%;
}

.page-intro {
  display: flex;
  flex-direction: column;
  padding-block: clamp(3.75rem, -5.625rem + 19.53125vw, 10rem);
  gap: clamp(1.875rem, -0.9375rem + 5.859375vw, 3.75rem);
}
@media screen and (min-width: 768px) {
  .page-intro--center {
    align-items: center;
  }
}
.page-intro__title {
  color: #005e3c;
  font-weight: 600;
  font-size: clamp(1.5rem, 0.9375rem + 1.171875vw, 1.875rem);
}
.page-intro__cont {
  max-width: 620px;
  font-size: clamp(0.9375rem, 0.84375rem + 0.1953125vw, 1rem);
  line-height: 2;
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .page-intro__cont {
    letter-spacing: 0.1em;
  }
}

.img-photo {
  position: relative;
}
.img-photo figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: #fff;
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
  line-height: 1;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.2), -1px 1px 1px rgba(0, 0, 0, 0.2), 1px -1px 1px rgba(0, 0, 0, 0.2);
}
.img-photo--bk figcaption {
  color: #000;
  text-shadow: none;
}

/*------------------------------
    page-location
--------------------------------*/
.location-body {
  display: flex;
  flex-direction: column;
  gap: clamp(3.75rem, -1.875rem + 11.71875vw, 7.5rem);
}

.location-sec-intro {
  display: flex;
  margin-bottom: clamp(1.25rem, -0.625rem + 3.90625vw, 2.5rem);
  gap: clamp(1.25rem, -0.625rem + 3.90625vw, 2.5rem);
}
@media screen and (max-width: 767px) {
  .location-sec-intro {
    flex-direction: column;
  }
}
.location-sec-intro > * {
  flex: 1;
}
@media screen and (min-width: 768px) {
  .location-sec-intro.location-sec-intro---reverse {
    flex-direction: row-reverse;
  }
}
.location-sec-intro__pic {
  font-size: clamp(0.75rem, 0.5625rem + 0.390625vw, 0.875rem);
}
.location-sec-intro__pic img {
  width: 100%;
}
.location-sec-intro__label {
  margin-bottom: clamp(2.1875rem, -1.09375rem + 6.8359375vw, 4.375rem);
  color: #005e3c;
  font-size: clamp(1.875rem, 0rem + 3.90625vw, 3.125rem);
  line-height: 1;
  font-family: "Cormorant Garamond", serif;
}
.location-sec-intro__title {
  margin-bottom: clamp(1.25rem, -0.625rem + 3.90625vw, 2.5rem);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.6875rem + 1.171875vw, 1.625rem);
}
.location-sec-intro__cont {
  font-size: clamp(0.875rem, 0.6875rem + 0.390625vw, 1rem);
  line-height: 2;
}

.facility-thumbs {
  display: grid;
  gap: clamp(1.25rem, -0.625rem + 3.90625vw, 2.5rem);
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 767px) {
  .facility-thumbs {
    column-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
}
.facility-thumbs figure {
  font-size: clamp(0.75rem, 0.5625rem + 0.390625vw, 0.875rem);
}
.facility-thumbs figure img {
  width: 100%;
}
.facility-thumbs .-large {
  grid-column: span 2;
}

.location-banner {
  padding-block: clamp(0rem, -4.6875rem + 9.765625vw, 3.125rem);
}
.location-banner img {
  width: 100%;
}
.location-banner a {
  transition: 0.3s;
}
.location-banner a:hover {
  opacity: 0.7;
}

.location-map {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .location-map {
    margin-inline: -25px;
  }
}

.location-info-title {
  margin-bottom: clamp(1.875rem, 0.5801104972rem + 5.5248618785vw, 5rem);
  color: #005e3c;
  font-weight: normal;
  font-family: "Cormorant Garamond", serif;
  text-align: center;
}

.location-info {
  display: grid;
  gap: clamp(1.25rem, -6.25rem + 15.625vw, 6.25rem);
}
@media screen and (min-width: 768px) {
  .location-info {
    grid-template-columns: repeat(2, 1fr);
  }
}
.location-info > * {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.facility-dl dt {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #808080;
  font-size: clamp(1rem, 0.8125rem + 0.390625vw, 1.125rem);
}

.facility-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.3125rem, 0.1830110497rem + 0.5524861878vw, 0.625rem);
}
.facility-list > li {
  display: flex;
  font-size: clamp(0.8125rem, 0.625rem + 0.390625vw, 0.9375rem);
  gap: 1em;
}
.facility-list .-dist {
  display: flex;
  margin-left: auto;
  gap: clamp(0.3125rem, 0.1830110497rem + 0.5524861878vw, 0.625rem);
}
.facility-list .-walk {
  width: 80px;
}
@media screen and (max-width: 767px) {
  .facility-list .-walk {
    width: 60px;
  }
}
.facility-list .-distance {
  width: 85px;
}
@media screen and (max-width: 767px) {
  .facility-list .-distance {
    width: 70px;
  }
}

/*------------------------------
    page-access
--------------------------------*/
.access-body {
  display: flex;
  flex-direction: column;
  gap: clamp(3.75rem, -1.875rem + 11.71875vw, 7.5rem);
}

.access-area {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .access-area {
    margin-inline: -120px;
  }
  .access-area figcaption {
    right: 100px;
  }
}

.access-intro {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .access-intro {
    align-items: center;
  }
}
.access-intro > * {
  flex: 1;
}
.access-intro__label {
  margin-bottom: 10px;
  color: #005e3c;
  font-size: clamp(1.875rem, 0rem + 3.90625vw, 3.125rem);
  line-height: 1;
  font-family: "Cormorant Garamond", serif;
}
.access-intro__title {
  margin-bottom: clamp(1.25rem, -0.625rem + 3.90625vw, 2.5rem);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.6875rem + 1.171875vw, 1.625rem);
}
.access-intro__cont {
  line-height: 2;
  text-align: justify;
}

.access-block {
  display: flex;
  align-items: end;
  min-height: 500px;
  gap: 40px;
}
@media screen and (max-width: 767px) {
  .access-block {
    flex-direction: column;
  }
}
.access-block__pic {
  flex-shrink: 0;
  max-width: clamp(18.75rem, -28.125rem + 97.65625vw, 50rem);
}
.access-block__cont {
  display: flex;
  flex-direction: column;
  text-align: justify;
  gap: 15px;
}
.access-block__title {
  font-size: clamp(1.125rem, 0.9375rem + 0.390625vw, 1.25rem);
}

.access-map {
  display: inline-block;
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .access-map {
    margin-inline: -25px;
  }
}
.access-map img {
  border: 1px solid #ccc;
}

.access-thumbs {
  display: grid;
  gap: clamp(1.875rem, -4.6875rem + 13.671875vw, 6.25rem);
}
@media screen and (min-width: 768px) {
  .access-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
}
.access-thumbs > div {
  display: grid;
  gap: 5px;
  grid-template-rows: subgrid;
  grid-row: span 2;
}
.access-thumbs img {
  width: 100%;
}
.access-thumbs figcaption {
  color: #005e3c;
  font-size: clamp(0.8125rem, 0.625rem + 0.390625vw, 0.9375rem);
}

.access-ohter {
  position: relative;
  padding-block: clamp(1.875rem, -0.9375rem + 5.859375vw, 3.75rem);
}
.access-ohter::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin-inline: calc(50% - 50vw);
  background-color: #e5e9e9;
  content: "";
}
.access-ohter__title {
  margin-bottom: clamp(1.875rem, -0.9375rem + 5.859375vw, 3.75rem);
  color: #005e3c;
  font-weight: 600;
  font-size: clamp(1.125rem, 0.375rem + 1.5625vw, 1.625rem);
}
@media screen and (min-width: 768px) {
  .access-ohter__title {
    text-align: center;
  }
}

/*------------------------------
    page-gallery
--------------------------------*/
.gallery-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(3.75rem, 1.1602209945rem + 11.0497237569vw, 10rem);
  gap: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
}
.gallery-intro__title {
  font-weight: normal;
  font-size: clamp(1.125rem, 0.9178176796rem + 0.8839779006vw, 1.625rem);
}
@media screen and (min-width: 768px) {
  .gallery-intro__title {
    letter-spacing: 0.4em;
  }
}

.gallery-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.875rem, -1.4917127072rem + 14.364640884vw, 10rem);
}

@media screen and (max-width: 767px) {
  .gallery-map {
    margin-inline: -25px;
  }
}

/*------------------------------
    page-guide
--------------------------------*/
.guide-main {
  position: relative;
}
.guide-main::before {
  opacity: 0.2;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(32, 128, 255) 0%, rgb(104, 128, 128) 100%);
  content: "";
}

.guide-intro__title {
  color: #005e3c;
  font-weight: 400;
  font-size: clamp(1.5625rem, -0.78125rem + 4.8828125vw, 3.125rem);
  line-height: 1;
  font-family: "Cormorant Garamond", serif;
}
.guide-intro .page-intro__title {
  color: #000;
}
.guide-intro .page-intro__cont {
  max-width: 720px;
}

.guide-slider {
  margin-bottom: clamp(3.75rem, -0.9116022099rem + 19.8895027624vw, 15rem);
}
.guide-slider .swiper-wrapper {
  transition-timing-function: linear;
}
.guide-slider .swiper-slide {
  width: clamp(15.625rem, 8.1664364641rem + 31.8232044199vw, 33.625rem);
}
.guide-slider .swiper-slide img {
  width: 100%;
}

.guide-items {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
@media screen and (max-width: 767px) {
  .guide-items {
    gap: 50px;
  }
}

.guide-item {
  display: flex;
  gap: clamp(1.875rem, -1.875rem + 7.8125vw, 4.375rem);
}
@media screen and (max-width: 767px) {
  .guide-item {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 768px) {
  .guide-item:nth-child(odd) {
    flex-direction: row-reverse;
  }
}
.guide-item > * {
  flex: 1;
}
.guide-item__pics {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .guide-item__pics {
    margin-top: 50px;
    margin-inline: -25px;
  }
}
.guide-item__pics img {
  width: 100%;
}

.guide-item-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.guide-item-body__header {
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
  font-size: clamp(1.125rem, 0.375rem + 1.5625vw, 1.625rem);
}
.guide-item-body__name {
  color: #006934;
}
.guide-item-body__name span {
  font-size: clamp(0.75rem, 0.375rem + 0.78125vw, 1rem);
}
.guide-item-body dl {
  display: grid;
  font-size: clamp(0.8125rem, 0.71875rem + 0.1953125vw, 0.875rem);
  word-break: break-all;
  column-gap: 2em;
  row-gap: 5px;
  grid-template-columns: auto 1fr;
}
.guide-item-body iframe {
  width: 100%;
  height: clamp(14.375rem, 10.625rem + 7.8125vw, 16.875rem);
  margin-top: auto;
}

.guide-item-dist {
  display: grid;
  position: absolute;
  top: calc(clamp(3.75rem, 3.3615331492rem + 1.6574585635vw, 4.6875rem) * -1);
  right: 10px;
  z-index: 1;
  width: clamp(7.5rem, 6.7230662983rem + 3.3149171271vw, 9.375rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #006934;
  color: #fff;
  font-size: clamp(0.6875rem, 0.6098066298rem + 0.3314917127vw, 0.875rem);
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  place-items: center;
}
@media screen and (max-width: 767px) {
  .guide-item-dist {
    right: 5px;
  }
}
.guide-item-dist .-walk {
  font-size: clamp(1rem, 0.8705110497rem + 0.5524861878vw, 1.3125rem);
}
.guide-item-dist .-walk span {
  font-size: clamp(1.4375rem, 0.9972375691rem + 1.8784530387vw, 2.5rem);
}

/*------------------------------
    page-position
--------------------------------*/
.position-fv figcaption {
  bottom: clamp(1.875rem, -2.5276243094rem + 18.7845303867vw, 12.5rem);
}

.position-body {
  display: flex;
  flex-direction: column;
  gap: clamp(3.125rem, -1.5625rem + 9.765625vw, 6.25rem);
}
.position-body + .position-body {
  margin-top: clamp(6.25rem, 3.6602209945rem + 11.0497237569vw, 12.5rem);
}

.position-intro {
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .position-intro {
    margin-top: -60px;
    text-align: right;
  }
}
.position-intro .page-intro__cont {
  max-width: none;
}
@media screen and (min-width: 768px) {
  .position-intro .page-intro__cont {
    text-align: right;
  }
}
@media screen and (max-width: 767px) {
  .position-intro .page-intro__cont p:not(:last-child) {
    margin-bottom: 1em;
  }
}

.position-parkside {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-column-gap: clamp(1.25rem, -0.625rem + 3.90625vw, 2.5rem);
  grid-row-gap: clamp(0.9375rem, -0.46875rem + 2.9296875vw, 1.875rem);
}
@media screen and (max-width: 767px) {
  .position-parkside {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
  }
}
@media screen and (max-width: 767px) {
  .position-parkside .div1 {
    grid-area: 1/1/2/3;
  }
  .position-parkside .div2 {
    grid-area: 2/1/3/3;
  }
  .position-parkside .div3 {
    grid-area: 3/1/4/2;
  }
  .position-parkside .div4 {
    grid-area: 4/1/5/2;
  }
  .position-parkside .div5 {
    grid-area: 3/2/5/3;
  }
  .position-parkside .div6 {
    grid-area: 5/1/6/3;
  }
}
@media screen and (min-width: 768px) {
  .position-parkside .div1 {
    grid-area: 1/1/2/3;
  }
  .position-parkside .div2 {
    grid-area: 1/3/2/5;
  }
  .position-parkside .div3 {
    grid-area: 2/1/3/2;
  }
  .position-parkside .div4 {
    grid-area: 3/1/4/2;
  }
  .position-parkside .div5 {
    grid-area: 2/2/4/3;
  }
  .position-parkside .div6 {
    grid-area: 2/3/4/5;
  }
}
.position-parkside img {
  width: 100%;
}
.position-parkside .div6 figure {
  position: relative;
}
.position-parkside .div6 figure figcaption {
  position: absolute;
  bottom: -55px;
}
.position-parkside__en {
  color: #005e3c;
  font-size: clamp(2.5rem, -1.25rem + 7.8125vw, 5rem);
  line-height: 1;
  font-family: "Cormorant Garamond", serif;
}

.position-area {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .position-area {
    margin-inline: -25px;
  }
}
.position-area__title {
  margin-block: 50px clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
  font-size: clamp(1.125rem, 0.9178176796rem + 0.8839779006vw, 1.625rem);
}

.position-items {
  display: grid;
  gap: clamp(1.25rem, 0.7320441989rem + 2.2099447514vw, 2.5rem);
}
@media screen and (min-width: 768px) {
  .position-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

.position-item {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  gap: clamp(0.9375rem, 0.5490331492rem + 1.6574585635vw, 1.875rem);
}
.position-item__title {
  font-size: clamp(1.125rem, 0.9178176796rem + 0.8839779006vw, 1.625rem);
}
.position-item__title span {
  color: #005e3c;
}
.position-item p:not(.position-item__title) {
  line-height: 2;
}
.position-item img {
  width: 100%;
}
.position-item figcaption {
  font-size: clamp(0.75rem, 0.6982044199rem + 0.2209944751vw, 0.875rem);
}

.position-pride-header {
  font-size: clamp(1.125rem, 0.9178176796rem + 0.8839779006vw, 1.625rem);
  text-align: center;
}
.position-pride-header__title {
  color: #005e3c;
  font-size: clamp(1.875rem, 1.7196132597rem + 0.6629834254vw, 2.25rem);
  font-family: "Cormorant Garamond", serif;
}

.position-map {
  display: flex;
  padding: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
  border: 1px solid #005e3c;
  gap: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
}
@media screen and (max-width: 767px) {
  .position-map {
    flex-direction: column;
  }
}
.position-map__pic {
  flex-shrink: 0;
}
.position-map__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 0.7320441989rem + 2.2099447514vw, 2.5rem);
}
.position-map__title {
  color: #005e3c;
  font-size: clamp(1.125rem, 0.9178176796rem + 0.8839779006vw, 1.625rem);
}
.position-map__cont {
  font-size: 0.875rem;
  line-height: 2;
}
.position-map__icon {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  font-size: 0.75rem;
  line-height: 1;
  gap: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
}
.position-map__icon li {
  display: flex;
  gap: 5px;
}
.position-map__icon li::before {
  display: inline-block;
  opacity: 0.3;
  width: clamp(1.625rem, 1.3142265193rem + 1.3259668508vw, 2.375rem);
  background-color: #378166;
  content: "";
}
.position-map__icon li:nth-child(2)::before {
  opacity: 0.5;
  background-color: #ff969a;
}
.position-map__icon li:nth-child(3)::before {
  opacity: 0.5;
  background-color: #cfb1ed;
}

@media screen and (max-width: 767px) {
  .position-view figcaption {
    text-align: left;
  }
}

/*------------------------------
    page-plan
--------------------------------*/
.plan-section {
  background: url("../../plan/img/plan_bg@2x.jpg") no-repeat;
  background-size: contain;
}

.plan-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(3.75rem, 1.1602209945rem + 11.0497237569vw, 10rem);
  text-align: center;
  gap: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
}
.plan-intro__title {
  font-weight: normal;
  font-size: clamp(1.125rem, 0.9178176796rem + 0.8839779006vw, 1.625rem);
}
@media screen and (min-width: 768px) {
  .plan-intro__title {
    letter-spacing: 0.4em;
  }
}

.plan-map {
  margin-bottom: clamp(3.125rem, 1.8301104972rem + 5.5248618785vw, 6.25rem);
  text-align: center;
}
.plan-map__inner {
  display: inline-block;
  position: relative;
}

.plan-map-link:hover[data-layer="1"] ~ .plan-map-layer[data-layer="1"], .plan-map-link:hover[data-layer="2"] ~ .plan-map-layer[data-layer="2"], .plan-map-link:hover[data-layer="3"] ~ .plan-map-layer[data-layer="3"] {
  opacity: 0.2;
}

.plan-map-layer {
  opacity: 0;
  position: absolute;
  transition: 0.3s;
}
.plan-map-layer--a {
  top: 16.3003663004%;
  left: 2.1136063408%;
  width: 31.571994716%;
}
.plan-map-layer--b {
  top: 22.7106227106%;
  left: 34.4782034346%;
  width: 26.5521796565%;
}
.plan-map-layer--c {
  top: 21.2454212454%;
  left: 61.9550858653%;
  width: 34.0819022457%;
}

.plan-map-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 47.619047619%;
  z-index: 1;
  color: #5a825e;
  letter-spacing: 0;
  transition: 0.3s;
  gap: 5px;
}
.plan-map-link--a {
  left: 14.5310435931%;
}
.plan-map-link--b {
  left: 42.2721268164%;
}
.plan-map-link--c {
  left: 72.6552179657%;
}
.plan-map-link__type {
  font-style: italic;
  font-size: clamp(0.625rem, 0.2671755725rem + 1.5267175573vw, 1rem);
  line-height: 1;
}
.plan-map-link__type span {
  font-weight: 400;
  font-size: clamp(1.625rem, -0.1044847328rem + 7.3791348601vw, 3.4375rem);
  font-family: "Playfair Display", serif;
}
.plan-map-link__unit {
  font-size: clamp(0.625rem, 0.3864503817rem + 1.0178117048vw, 0.875rem);
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.plan-map-link__unit span {
  display: inline-block;
  writing-mode: horizontal-tb;
}
.plan-map-link:hover {
  color: #005c09;
}

.plan-nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.5625rem, -0.78125rem + 4.8828125vw, 3.125rem);
}
@media screen and (max-width: 767px) {
  .plan-nav {
    flex-direction: column;
  }
}
.plan-nav a {
  transition: 0.3s;
}
.plan-nav a:hover {
  opacity: 0.7;
}

.plan-nav-item {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  background: linear-gradient(0deg, rgb(54, 136, 43) 0%, rgb(0, 104, 55) 100%);
  text-align: center;
  gap: 20px;
}
.plan-nav-item__title {
  color: #fff;
  font-style: italic;
  font-size: clamp(1.625rem, 0.875rem + 1.5625vw, 2.125rem);
  line-height: 1;
}
.plan-nav-item__title span {
  font-size: clamp(1rem, 0.6262183236rem + 0.7797270955vw, 1.25rem);
}
.plan-nav-item__box {
  display: flex;
  flex-direction: column;
  margin-inline: clamp(0.9375rem, 0.46875rem + 0.9765625vw, 1.25rem);
  padding-block: 50px;
  background-color: #fff;
  gap: 20px;
}
.plan-nav-item__type {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: italic;
  font-size: clamp(1rem, 0.625rem + 0.78125vw, 1.25rem);
  line-height: 20px;
  gap: 20px;
}
.plan-nav-item__type::after {
  width: 50px;
  height: 1px;
  background-color: #000;
  content: "";
}
.plan-nav-item__type span {
  font-weight: 400;
  font-size: clamp(3.125rem, 0.3125rem + 5.859375vw, 5rem);
  font-family: "Playfair Display", serif;
}
.plan-nav-item .-small {
  font-size: clamp(0.75rem, 0.5625rem + 0.390625vw, 0.875rem);
}
.plan-nav-item__area {
  font-size: clamp(0.875rem, 0.5rem + 0.78125vw, 1.125rem);
}
@media screen and (max-width: 767px) {
  .plan-nav-item__area {
    display: flex;
    flex-direction: column;
  }
}
.plan-nav-item__area span {
  font-size: clamp(1.125rem, 0.5625rem + 1.171875vw, 1.5rem);
}
.plan-nav-item__more {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #005c09;
  color: #fff;
  font-size: 0.875rem;
  font-family: "Cormorant Garamond", serif;
  gap: clamp(0.625rem, -0.3125rem + 1.953125vw, 1.25rem);
}
.plan-nav-item__more::before, .plan-nav-item__more::after {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  content: "";
}
.plan-nav-item__more span {
  flex-shrink: 0;
}

.plan-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(0rem, -2.5897790055rem + 11.0497237569vw, 6.25rem);
  background-color: #fff;
  gap: 50px;
}
.plan-detail__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}
.plan-detail__layout .-caption {
  font-size: 0.75rem;
}
.plan-detail__title {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1rem, 0.8964088398rem + 0.4419889503vw, 1.25rem);
  line-height: 1;
  text-align: center;
}
.plan-detail__title .-large {
  font-weight: 400;
  font-size: 6em;
  font-family: "Playfair Display", serif;
}
.plan-detail__title .-medium {
  font-size: 1.8em;
}
.plan-detail__btn {
  margin-top: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
  text-align: center;
}
.plan-detail__btn a {
  display: grid;
  position: relative;
  width: clamp(16.25rem, 10.0345303867rem + 26.5193370166vw, 31.25rem);
  height: clamp(5rem, 4.4820441989rem + 2.2099447514vw, 6.25rem);
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(0deg, rgb(0, 104, 55) 0%, rgb(54, 136, 43) 100%);
  color: #fff;
  font-size: clamp(1.25rem, 1.1464088398rem + 0.4419889503vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: 0.15em;
  place-items: center;
}
.plan-detail__btn a:hover::before {
  opacity: 1;
}
.plan-detail__btn a::before {
  opacity: 0;
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(54, 136, 43) 0%, rgb(0, 104, 55) 100%);
  content: "";
  transition: 0.3s;
}
.plan-detail__btn a::after {
  position: absolute;
  inset: 0;
  margin: -5px;
  border: 1px solid rgba(204, 204, 204, 0.5);
  content: "";
}
.plan-detail__btn a .ttl {
  position: relative;
  top: -0.5em;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.8));
}
.plan-detail__btn a .more {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: clamp(0.9375rem, 0.8080110497rem + 0.5524861878vw, 1.25rem);
  left: 0;
  width: 100%;
  font-size: clamp(0.75rem, 0.6982044199rem + 0.2209944751vw, 0.875rem);
  letter-spacing: 0.2em;
  gap: 10px;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.8));
}
.plan-detail__btn a .more > span {
  flex-shrink: 0;
}
.plan-detail__btn a .more::before, .plan-detail__btn a .more::after {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  content: "";
}

.plan-detail-spec {
  display: flex;
  gap: clamp(1.25rem, -0.3038674033rem + 6.6298342541vw, 5rem);
}
@media screen and (max-width: 767px) {
  .plan-detail-spec {
    flex-direction: column;
    font-size: 0.875rem;
  }
}
.plan-detail-spec > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-detail-spec dl {
  display: grid;
  column-gap: 10px;
  grid-template-columns: auto 1fr;
}
.plan-detail-spec dt {
  display: flex;
  align-items: end;
}
.plan-detail-spec dt::after {
  margin-left: auto;
  padding-left: 10px;
  content: "／";
}
.plan-detail-spec__desc dt::before {
  content: "□";
}
.plan-detail-spec__desc span {
  font-size: 1.8em;
}
.plan-detail-spec__total {
  font-size: clamp(1rem, 0.8964088398rem + 0.4419889503vw, 1.25rem);
  line-height: 1;
}
.plan-detail-spec__total span {
  font-size: 1.6em;
}
.plan-detail-spec__map {
  margin-left: auto;
}

/*------------------------------
    page-outline
--------------------------------*/
.outline-body {
  display: flex;
  flex-direction: column;
  padding-top: clamp(3.125rem, 1.8301104972rem + 5.5248618785vw, 6.25rem);
  gap: clamp(1.875rem, 1.3570441989rem + 2.2099447514vw, 3.125rem);
}

.outline-title {
  margin-top: clamp(0.9375rem, 0.5490331492rem + 1.6574585635vw, 1.875rem);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.9178176796rem + 0.8839779006vw, 1.625rem);
  text-align: center;
}

.outline-dl {
  display: grid;
  border-top: 1px solid #ccc;
  font-size: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .outline-dl {
    grid-template-columns: 30% 1fr;
  }
}
.outline-dl dt {
  background-color: rgba(0, 92, 9, 0.1);
}
.outline-dl dt, .outline-dl dd {
  padding: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
  border-bottom: 1px solid #ccc;
}

.outline-note {
  font-size: 0.875rem;
}

/*------------------------------
    top-page
--------------------------------*/
.top-fv {
  position: relative;
  height: calc(100vh - 122px);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .top-fv {
    min-height: 900px;
  }
}
@media screen and (max-width: 767px) {
  .top-fv {
    height: calc(100svh - 117px);
    max-height: 600px;
  }
}
.top-fv__mv {
  position: absolute;
  inset: 0;
}
.top-fv__mv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-fv__title {
  position: absolute;
  z-index: 1;
  width: clamp(31.25rem, 9.6875rem + 44.921875vw, 45.625rem);
}
@media screen and (min-width: 768px) {
  .top-fv__title {
    display: grid;
    top: 0;
    right: clamp(3.125rem, 0.3125rem + 5.859375vw, 5rem);
    height: 100%;
    place-items: center;
  }
}
@media screen and (max-width: 767px) {
  .top-fv__title {
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
  }
  .top-fv__title img {
    width: 330px;
  }
}

.top-fv__scroll {
  display: grid;
  align-items: center;
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, 100%);
  width: 20px;
  height: 80px;
  color: #fff;
  font-size: 0.625rem;
  line-height: 1;
  font-family: "Noto Sans JP", sans-serif;
  text-transform: uppercase;
  transition: 0.3s;
  transition-delay: 1s;
  writing-mode: vertical-lr;
}
@media screen and (max-width: 767px) {
  .top-fv__scroll {
    display: none;
  }
}
.top-fv__scroll::before, .top-fv__scroll::after {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #fff;
  content: "";
  animation: scrollLiner 2.5s ease infinite 3s;
}
.top-fv__scroll::before {
  left: 0;
}
.top-fv__scroll::after {
  right: 0;
}
.top-fv__scroll.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes scrollLiner {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
.top-intro {
  padding-bottom: clamp(5.625rem, 4.0711325967rem + 6.6298342541vw, 9.375rem);
  background-image: url("../../top/img/top_intro_bg@2x.png");
  background-position: bottom left;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .top-intro {
    background-image: url("../../top/img/top_intro_bg_sp.png");
    background-position: top left;
    background-size: contain;
  }
}
.top-intro > div {
  padding-inline: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
}
.top-intro__header {
  display: grid;
  position: relative;
  height: 180px;
  place-items: center;
}
@media screen and (max-width: 767px) {
  .top-intro__header {
    height: 196px;
  }
}
@media screen and (max-width: 767px) {
  .top-intro__header img {
    width: 214px;
  }
}
.top-intro__header::before {
  opacity: 0.6;
  position: absolute;
  inset: 0;
  background-color: #005e3c;
  content: "";
  mix-blend-mode: multiply;
}
.top-intro__header > div {
  position: relative;
  z-index: 1;
}
.top-intro__body {
  padding-block: 25px;
}
@media screen and (max-width: 767px) {
  .top-intro__body img {
    width: 300px;
  }
}
.top-intro__footer {
  padding-block: 20px;
  border-block: 1px solid #005e3c;
}
@media screen and (max-width: 767px) {
  .top-intro__footer img {
    width: 297px;
  }
}

.top-info {
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(6.25rem, 5.0845994475rem + 4.9723756906vw, 9.0625rem);
  padding-inline: clamp(1.5625rem, 0.9150552486rem + 2.7624309392vw, 3.125rem);
  text-align: center;
  gap: 30px;
}
.top-info__label {
  color: #005e3c;
  font-family: "Cormorant Garamond", serif;
}
.top-info__name {
  font-size: 1.125rem;
}
.top-info__title {
  color: #005e3c;
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .top-info__title {
    letter-spacing: 0.2em;
  }
}
.top-info__note {
  font-size: 0.75rem;
}
@media screen and (max-width: 767px) {
  .top-info__note {
    text-align: left;
  }
}
.top-info .container--btn--cv {
  margin-top: clamp(0.625rem, 0.3660220994rem + 1.1049723757vw, 1.25rem);
}

@media screen and (max-width: 767px) {
  .top-view figcaption {
    text-align: left;
  }
}

.top-scene {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .top-scene {
    position: sticky;
    top: 122px;
    z-index: -1;
    height: calc(100vh - 122px);
    min-height: 1050px;
  }
}
@media screen and (max-width: 767px) {
  .top-scene {
    position: relative;
    z-index: 0;
  }
}
.top-scene::before {
  opacity: 0.8;
  position: absolute;
  inset: 0;
  translate: 0 100%;
  background-color: #005e3c;
  content: "";
  transition: 0.6s;
  mix-blend-mode: multiply;
}
.top-scene.is-active::before {
  translate: 0;
}
.top-scene__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.top-scene__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 800px) {
  .top-scene__bg img {
    object-position: right center;
  }
}
@media screen and (max-width: 800px) {
  .top-scene__bg--position_left img {
    object-position: left center;
  }
}

.top-scene-body {
  display: grid;
  position: relative;
  height: 100%;
  margin-inline: auto;
  color: #fff;
  text-align: center;
  place-items: center;
}
@media screen and (min-width: 768px) {
  .top-scene-body {
    max-height: calc(100vh - 122px);
  }
}
.top-scene-body__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .top-scene-body__inner {
    min-height: 600px;
    padding-block: 2em;
  }
}
.top-scene-body__cont {
  overflow: hidden;
}
.top-scene-body__cont > * {
  opacity: 0;
  transform: translateY(-150%);
  transition: 1s;
}
.is-on .top-scene-body__cont > * {
  opacity: 1;
  transform: translateY(0);
}
.top-scene-body__cont .-ttl {
  font-weight: 500;
  font-size: 1.125rem;
}
.top-scene-body__title {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 30px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(2.5rem, 0.25rem + 9.6vw, 6.25rem);
  line-height: 1;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .top-scene-body__title {
    letter-spacing: 0.1em;
  }
}
.top-scene-body__title::before {
  display: block;
  opacity: 0;
  width: clamp(2.5rem, 1.3072519084rem + 5.0890585242vw, 3.75rem);
  aspect-ratio: 60/87;
  margin-bottom: 40px;
  margin-inline: auto;
  background-image: url("../img/icon_logo@2x.png");
  background-size: cover;
  content: "";
  transition: 1s;
}
.is-on .top-scene-body__title::before {
  opacity: 1;
}
.top-scene-body__title::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 0;
  height: 1px;
  background-color: #fff;
  content: "";
}
.is-on .top-scene-body__title::after {
  animation: lineChange 1s ease 0.3s forwards;
}
.top-scene-body__title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(120%);
  animation: textClose 1s ease forwards;
}
.is-on .top-scene-body__title span {
  animation: textChange 1s ease forwards;
}
.is-on .top-scene-body__title span:nth-child(1) {
  animation-delay: 0.06s;
}
.is-on .top-scene-body__title span:nth-child(2) {
  animation-delay: 0.12s;
}
.is-on .top-scene-body__title span:nth-child(3) {
  animation-delay: 0.18s;
}
.is-on .top-scene-body__title span:nth-child(4) {
  animation-delay: 0.24s;
}
.is-on .top-scene-body__title span:nth-child(5) {
  animation-delay: 0.3s;
}
.is-on .top-scene-body__title span:nth-child(6) {
  animation-delay: 0.36s;
}
.is-on .top-scene-body__title span:nth-child(7) {
  animation-delay: 0.42s;
}
.is-on .top-scene-body__title span:nth-child(8) {
  animation-delay: 0.48s;
}
.is-on .top-scene-body__title span:nth-child(9) {
  animation-delay: 0.54s;
}
.is-on .top-scene-body__title span:nth-child(10) {
  animation-delay: 0.6s;
}
.is-on .top-scene-body__title span:nth-child(11) {
  animation-delay: 0.66s;
}
.is-on .top-scene-body__title span:nth-child(12) {
  animation-delay: 0.72s;
}
.is-on .top-scene-body__title span:nth-child(13) {
  animation-delay: 0.78s;
}
.is-on .top-scene-body__title span:nth-child(14) {
  animation-delay: 0.84s;
}
.is-on .top-scene-body__title span:nth-child(15) {
  animation-delay: 0.9s;
}
.is-on .top-scene-body__title span:nth-child(16) {
  animation-delay: 0.96s;
}
.is-on .top-scene-body__title span:nth-child(17) {
  animation-delay: 1.02s;
}
.is-on .top-scene-body__title span:nth-child(18) {
  animation-delay: 1.08s;
}
.is-on .top-scene-body__title span:nth-child(19) {
  animation-delay: 1.14s;
}
.is-on .top-scene-body__title span:nth-child(20) {
  animation-delay: 1.2s;
}
.top-scene-body__btn {
  opacity: 0;
  scale: 0;
  margin-top: 50px;
  transition: 1s;
}
.is-on .top-scene-body__btn {
  opacity: 1;
  scale: 1;
}
.top-scene-body__btn a {
  display: grid;
  position: relative;
  width: clamp(18.125rem, 12.6864640884rem + 23.2044198895vw, 31.25rem);
  height: 70px;
  border: 1px solid #fff;
  background: linear-gradient(0deg, rgb(54, 136, 43) 0%, rgb(0, 104, 55) 100%);
  color: #fff;
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  transition: 0.3s;
  place-items: center;
}
.top-scene-body__btn a span {
  position: relative;
  z-index: 1;
}
.top-scene-body__btn a:hover::before {
  opacity: 1;
}
.top-scene-body__btn a::before {
  opacity: 0;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(54, 136, 43) 0%, rgb(0, 104, 55) 100%);
  content: "";
  transition: 0.3s;
}
.top-scene-body__btn a::after {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border: 1px solid #fff;
  content: "";
}

@keyframes lineChange {
  0% {
    width: 0;
  }
  100% {
    width: clamp(3.125rem, 1.8301104972rem + 5.5248618785vw, 6.25rem);
  }
}
@keyframes textClose {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(120%);
  }
}
@keyframes textChange {
  0% {
    opacity: 0;
    transform: translateY(120%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.top-more {
  position: relative;
  height: 132.9861111111vw;
  padding-block: 6.9444444444vw;
  box-sizing: border-box;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .top-more {
    height: 298.75vw;
    padding-block: 29.3333333333vw;
  }
}
.top-more__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.top-more__bg img {
  width: 100%;
}
.top-more__bg .-caption {
  margin-block: 0.5em;
  padding-inline: 20px;
  color: #000;
  font-size: clamp(0.625rem, 0.5732044199rem + 0.2209944751vw, 0.75rem);
  text-align: right;
}
.top-more__logo img {
  width: 45.5555555556vw;
}
@media screen and (max-width: 767px) {
  .top-more__logo img {
    width: 80vw;
  }
}
.top-more__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.5555555556vw;
}
.top-more__cont {
  display: flex;
  flex-direction: column;
  font-size: max(10px, 1.25vw);
  line-height: 2.3;
  gap: 2.0833333333vw;
}
@media screen and (max-width: 767px) {
  .top-more__cont {
    font-size: 4.2666666667vw;
    line-height: 2;
    gap: 16vw;
  }
}
.top-more__cont .-title {
  margin-bottom: 5.5555555556vw;
}
@media screen and (max-width: 767px) {
  .top-more__cont .-title {
    margin-bottom: 2.6666666667vw;
    text-align: center;
  }
}
.top-more__cont .-title img {
  width: 34.375vw;
}
@media screen and (max-width: 767px) {
  .top-more__cont .-title img {
    width: 58.6666666667vw;
  }
}
.top-more__cont .-copy {
  font-size: 1.7em;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .top-more__cont .-copy {
    font-size: 5.6vw;
  }
}

@media screen and (min-width: 768px) {
  .top-footer-cv {
    background: url("../../top/img/top_cv_bg@2x.jpg");
    background-size: cover;
  }
}

.js-scroll-trigger.kf-fade-in {
  opacity: 0;
}
.js-scroll-trigger.kf-fade-in.is-on {
  animation: fadeIn 2s forwards;
}

.js-scroll-trigger.kf-slide-in {
  opacity: 0;
}
.js-scroll-trigger.kf-slide-in.is-on {
  animation: slideIn 2s forwards;
}

.js-scroll-trigger.kf-slide-in-right {
  opacity: 0;
}
.js-scroll-trigger.kf-slide-in-right.is-on {
  animation: slideInRight 2s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}