@charset "UTF-8";
/* topのみ */
.top-header {
  justify-content: flex-end;
}

/* アニメーションさせる要素をあらかじめ消しておく */
[data-opening-animation="text"],
[data-opening-animation="logo"] {
  opacity: 0;
  visibility: hidden;
}

/* テキストは初期位置もCSSで下げておくと、JS実行時のガタつきがなくなります */
[data-opening-animation="text"] {
  transform: translateY(50px);
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  height: 100svh;
  background-color: var(--cl-bg);
}

.loading__inner {
  width: 100%;
  height: inherit;
  display: grid;
  place-content: center;
  row-gap: 10px;
}

.loading__text {
  font-size: clamp(2.1rem, 1.33vw, 3.2rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 2;
  text-align: center;
  color: var(--cl-txt2);
}

.loading__logo {
  margin: 0 auto;
  width: min(400px, 100%);
}

/* mainVisual */
.mainVisual.flexB {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.mainVisual__image {
  width: 100%;
}
.top__slide {
  overflow: hidden;
}
@media (max-width: 660px) {
  .mainVisual__logo {
    width: 60px;
    margin: 70px auto 60px;
  }
}
@media (min-width: 661px) {
  .mainVisual.flexB {
    flex-direction: row;
    height: 100%;
  }
  .mainVisual__logo {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mainVisual__image {
    width: 60%;
  }
}

/* swiper opt */
.swiper {
  z-index: -1;
}
.swiper-slide-active .swiper-slide__item,
.swiper-slide-duplicate-active .swiper-slide__item,
.swiper-slide-prev .swiper-slide__item {
  animation: zoomAnime 6s linear 0s normal both;
}

@keyframes zoomAnime {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.progressbar {
  position: relative;
  width: 100%;
  height: 5px;
  background: #ccc;
  overflow: hidden;
  z-index: -1;
}
.progressbar span {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transform-origin: left center;
  background: var(--cl-acnt);
  border-radius: 7px;
  transform: scaleX(0);
  transition-timing-function: linear;
}

/* nav__top */
@media (min-width: 769px) {
  .nav__top ul {
    gap: 5%;
    font-size: 1.8rem;
  }
  .nav__top ul a {
    display: block;
    padding: 4rem 0;
    position: relative;
    transition: 0.2s ease-in-out;
  }
  .nav__top a::after {
    background-color: var(--cl-acnt); /* 下線の色 */
    bottom: 23px; /* 要素の下端からの距離 */
    content: ""; /* 要素に内容を追加 */
    height: 2px; /* 下線の高さ */
    left: 0; /* 要素の左端からの距離 */
    opacity: 0; /* 不透明度 */
    position: absolute; /* 絶対位置指定 */
    transition: all 0.3s; /* アニメーション効果を追加 */
    width: 100%; /* 要素の幅 */
    border-radius: 3px;
  }
  /* リンクにホバーした際の下線の表示 */
  .nav__top a:hover {
    opacity: 0.6;
  }
  .nav__top a:hover::after {
    bottom: 26px; /* 下線を上から下に移動 */
    opacity: 1; /* 不透明度を変更してフェードイン */
  }
}
.contents {
  height: 2000px;
}

/* top__about */
.top__about {
  padding: 8rem 0;
}
.top__about .flexW {
  flex-direction: column;
}
.top__about-txt__inner.fadeIn.is-show {
  position: relative;
  z-index: -1;
}
.top__about-photo.fadeIn.is-show {
  position: relative;
  z-index: -1;
}
.top__about-photo img {
  width: 100%;
}
.top__about .flexB {
  flex-direction: column;
  align-items: center;
  max-width: 70%;
  min-width: 345px;
  margin: auto;
}
.top__about-txt {
  display: contents;
}
.top__about p {
  padding: 0 4% 2rem;
  line-height: 1.6;
}
.top__about .btn {
  margin: 4rem auto 7rem;
  order: 3;
}
.top__about .btn.fadeIn.is-show {
  position: relative;
  z-index: 0;
}
.top__about-link {
  flex-direction: column;
  padding: 0 4%;
  gap: 3rem;
  margin-bottom: 0;
}
.top__about-link li {
  position: relative;
  overflow: hidden;
}
.top__about .flexB.fadeIn.is-show {
  position: relative;
  z-index: 0;
}
.top__about-link li img {
  transition: transform 0.6s ease;
}
.top__about-link a:hover img {
  transform: scale(1.1);
}

.top__about-link__ttl {
  position: absolute;
  writing-mode: vertical-rl;
  padding: 2rem 0.8rem 1.5rem;
  top: -0.5rem;
  right: 3rem;
  background: #fff;
  font-weight: normal;
  font-size: clamp(1.6rem, 0.71vw, 1.8rem);
  line-height: 1.2;
  z-index: 1;
}
@media (min-width: 769px) {
  .top__about {
    padding: 9rem 4%;
  }
  .top__about .flexW {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 9%;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .top__about-txt {
    display: block;
    width: 28.1%;
    min-width: 270px;
  }
  .top__about-txt__inner {
    display: flex;
    flex-direction: row-reverse;
    gap: 24%;
  }
  .top__about-txt .header2__ttl {
    text-align: left;
    writing-mode: vertical-rl;
  }
  .top__about-txt p {
    line-height: 2;
    writing-mode: vertical-rl;
    padding: 0;
  }
  .top__about-photo {
    width: 53%;
  }
  .top__about .btn {
    margin: 7.8rem auto 8rem;
  }
  .top__about .flexB {
    flex-direction: row-reverse;
    align-items: flex-start;
    padding: 0;
    max-width: 100%;
  }
  .top__about-link__ttl {
    font-size: clamp(1.4rem, 1.64vw, 1.8rem);
  }
}

/* top__news */
.top__news {
  background: #f2f0ec url(../images/common/glay_bg.webp);
  padding: 6rem 4%;
}
.top__news-ttl_wrap {
  max-width: 764px;
  margin: 0 auto 5rem;
}
.article__list-item {
  a {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
}
.article__list-item__date {
  font-size: 1.3rem;
  line-height: 2;
  display: block;
  margin-bottom: 0.8rem;
}
.article__list-item__ttl {
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: justify;
}

@media (min-width: 769px) {
  .top__news {
    padding: 10rem 4%;
  }
  .top__news-ttl_inner {
    max-width: 765px;
    margin: auto;
  }
  .article__list-item {
    flex-wrap: nowrap;
    gap: 3.6rem;
    a {
      transition: 0.3s ease-in-out;
      &:hover {
        color: var(--cl-acnt);
      }
    }
  }
  .top__news-ttl_inner .btn {
    margin: 0;
    margin-left: auto;
  }
}

/* top__event */
.top__event {
  background: #f2f0ec;
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
}
.top__event .header2__ttl {
  padding-left: 4%;
  text-align: left;
}
.top__event p {
  padding: 0 4% 3rem;
  line-height: 1.6;
}
.top__event .swiper02 {
  overflow: visible;
  margin-bottom: 4rem;
  z-index: 1;
}
.top__event .swiper02 .swiper-slide {
  width: 320px;
}

@media (min-width: 769px) {
  .top__event {
    padding: 10rem 0 10rem 9.4%;
  }
  .top__event .header2__ttl {
    padding-left: 0;
  }
  .top__event p {
    padding: 0;
    margin-bottom: 3rem;
  }
  .top__event .swiper02 {
    overflow: hidden;
  }
  .top__event .btn {
    margin: 0;
  }
}

/* top__columbarium */
.top__columbarium {
  padding: 6.5rem 2.8rem 9.5rem;
  background: url(../images/top/top_columbarium_link_sp.webp) no-repeat
    center/cover;
  position: relative;
}
.top__columbarium::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
}
.top__columbarium-inner {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
  width: 75%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  position: relative;
  z-index: 1;
}
.top__columbarium .header2__ttl {
  text-align: left;
  font-size: 2.8rem;
  letter-spacing: 0.03em;
}
.top__columbarium-inner > div {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  max-height: 325px;
}
.top__columbarium p {
  line-height: 1.8;
}
.top__columbarium .btn {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
  font-size: 1.8rem;
  width: 50px;
  height: 200px;
  padding: 24px 15px;
  display: inline-block;
  letter-spacing: 0.12em;
  margin: 0;
  margin-inline: 0;
  align-self: flex-end;
}
.top__columbarium .btn::after {
  width: 1px;
  height: 50px;
  top: -25px;
  right: inherit;
  left: 50%;
  translate: -50% 0;
  background: #fff;
}
@media (min-width: 769px) {
  .top__columbarium {
    padding: 4rem 12.5%;
    background: url(../images/top/top_columbarium_link.webp) no-repeat
      center/cover;
    margin-bottom: 2px;
  }
  .top__columbarium .header2__ttl {
    letter-spacing: 0.42em;
    line-height: 1.6;
    margin-bottom: 0;
  }
  .top__columbarium-inner {
    align-items: center;
    margin: 0;
    margin-left: auto;
  }
  .top__columbarium .btn:hover {
    background: rgb(from var(--cl-txt2) r g b / 0.4);
  }
  .top__columbarium .btn:hover::after {
    animation: OutIn-Line2 700ms;
    transition: all 0.3s;
  }

  @keyframes OutIn-Line2 {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    50% {
      -webkit-transform: scale3d(1, 0, 1);
      transform: scale3d(1, 0, 1);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    50.1% {
      -webkit-transform: scale3d(1, 0, 1);
      transform: scale3d(1, 0, 1);
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
    }

    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
    }
  }
}

/* .top__access */
.top__access {
  padding: 10rem 0 6rem;
  text-align: center;
}
.top__access .top__access-map {
  position: relative;
  height: 0;
  padding-top: 117.3333%;
  margin-bottom: 3rem;
}
.top__access .top__access-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top__access address {
  font-size: 1.8rem;
  font-style: normal;
  line-height: 2;
  margin-bottom: 3rem;
}
.top__access .top__access-tel {
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
@media (min-width: 660px) and (max-width: 768px) {
  .top__access .top__access-map {
    padding-top: 58%;
  }
}

@media (min-width: 769px) {
  .top__access {
    margin-bottom: 10rem;
  }
  .top__access .top__access-map {
    padding-top: 25%;
    margin-bottom: 3.2rem;
  }
}