@charset "UTF-8";

/*------------------------
アニメーション初期状態（GSAPで表示）
-------------------------*/
.js-fade-in {
  opacity: 0;
}

/*------------------------
FV
-------------------------*/
.hero {
  position: relative;
  width: 100%;
  max-height: 960px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--color-black);
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__picture {
  display: block;
  height: 100%;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.hero__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
}

.hero__logo-sect,
.hero__logo-mountain,
.hero__logo-temple,
.hero__en {
  opacity: 0;
}

.hero__logo-sect {
  width: 1.7708333333333333vw;
  /*34px*/
  max-width: 34px;
  margin-top: 2.1875vw;
  margin-bottom: 1.041667vw;
  /*20px*/
}

.hero__logo-mountain {
  width: 1.9791666666666665vw;
  /*38px*/
  max-width: 38px;
  margin-bottom: 0.78125vw;
  /*19px*/
}

.hero__logo-temple {
  width: 4.010416666666667vw;
  /*77px*/
  max-width: 77px;
  margin-bottom: 2.65625vw;
  /*51px*/
}

.hero__en {
  font-family: var(--font-mincho);
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 1920px) {
  .hero {
    max-height: 960px;
  }

  .hero__logo-sect {
    max-width: 34px;
    margin-top: 42px;
    margin-bottom: 20px;
  }

  .hero__logo-mountain {
    max-width: 38px;
    margin-bottom: 15px;
  }

  .hero__logo-temple {
    max-width: 77px;
    margin-bottom: 51px;
  }
}

@media screen and (max-width: 750px) {
  .hero {
    max-height: none;
    aspect-ratio: 750 / 1334;
  }

  .hero__logo-sect {
    width: 5.066666666666666%;
    max-width: 38px;
    margin-top: 5.333333333333334vw;
    margin-bottom: 3.4666666666666663vw;
  }

  .hero__logo-mountain {
    width: 6%;
    max-width: 45px;
    margin-bottom: 2.933333333333333vw;
    /*22px*/
  }

  .hero__logo-temple {
    width: 12.133333%;
    max-width: 91px;
    margin-bottom: 8vw;
    /*62px*/
  }

  .hero__en {
    font-size: 2.2rem;
  }
}

/*------------------------
お知らせ
-------------------------*/
.top-news {
  position: relative;
  padding: 6.857143vw 0 8.357143vw;
  /*96px 0 117px*/
  overflow: hidden;
}

.top-news__bg {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  pointer-events: none;
}

.top-news__wave {
  position: absolute;
}

.top-news__wave_position_right {
  top: 11.642857vw;
  /*163px*/
  right: -2.142857vw;
  /*-30px*/
  width: 53.854167%;
  max-width: 1034px;
}

.top-news__wave_position_left {
  top: 18.928571vw;
  /*265px*/
  left: -18.071429vw;
  /*-253px*/
  width: 40.46875%;
  max-width: 777px;
}

.top-news__inner {
  position: relative;
}

.top-news__body {
  padding-top: 7.428571vw;
  /*104px*/
}

.top-news__list {
  margin-bottom: 3.571429vw;
  /*50px*/
}

.top-news__more {
  margin-left: auto;
}

@media screen and (min-width: 1400px) {
  .top-news {
    padding: 96px 0 117px;
  }

  .top-news__wave_position_right {
    top: 163px;
    right: -30px;
    max-width: 1034px;
  }

  .top-news__wave_position_left {
    top: 265px;
    left: -253px;
    max-width: 777px;
  }

  .top-news__body {
    padding-top: 104px;
  }

  .top-news__list {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 750px) {
  .top-news {
    padding: 10.533333vw 0 12.933333vw;
    /*79px 0 97px*/
  }

  .top-news__wave_position_right {
    display: none;
  }

  .top-news__wave_position_left {
    top: 62.4vw;
    /*468px*/
    left: -46.266667%;
    /*-347px*/
    width: 103.6%;
    /*777px*/
    max-width: none;
  }

  .top-news__body {
    padding-top: 0;
  }

  .top-news__list {
    margin-bottom: 7.866667vw;
    /*59px*/
  }
}

/*------------------------
龍泉院について
-------------------------*/
.top-about {
  position: relative;
  padding: 6.428571vw 0 7.142857vw;
  /*90px 0 100px*/
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-black);
}

.top-about__bg {
  position: absolute;
  inset: 0;
}

.top-about__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.23;
}

.top-about__inner {
  position: relative;
}

.top-about__heading {
  margin-top: 0.5vw;
  /*7px*/
}

.top-about__intro {
  margin-bottom: 5.714286vw;
  /*80px*/
}

.top-about__lead {
  margin-bottom: 1.6428571428571428vw;
  /*21px*/
}

.top-about__more {
  margin-left: auto;
}

.top-about__cards {
  display: flex;
  flex-direction: column;
  gap: 2.142857vw;
  /*30px*/
}

@media screen and (min-width: 1400px) {
  .top-about {
    padding: 90px 0 100px;
  }

  .top-about__heading {
    margin-top: 7px;
  }

  .top-about__intro {
    margin-bottom: 80px;
  }

  .top-about__lead {
    margin-bottom: 23px;
  }

  .top-about__cards {
    gap: 30px;
  }
}

@media screen and (max-width: 750px) {
  .top-about {
    padding: 10.533333vw 0 13.333333vw;
    /*79px 0 100px*/
  }

  .top-about__heading {
    margin-top: 0;
  }

  .top-about__intro {
    margin-bottom: 10.666666666666668vw;
    /*80px*/
  }

  .top-about__lead {
    margin-bottom: 6vw;
    /*10px*/
  }

  .top-about__cards {
    gap: 4vw;
    /*30px*/
  }
}

/*------------------------
坐禅に親しむ
-------------------------*/
.top-zazen {
  position: relative;
  padding: 8.571429vw 0 2.857143vw;
  /*120px 0 40px*/
  overflow: hidden;
  isolation: isolate;
}

.top-zazen__inner {
  position: relative;
}

.top-zazen__body {
  position: relative;
}

/* 画像下から右端へ伸びる背景 */
.top-zazen__body::before {
  content: "";
  position: absolute;
  top: 26vw;
  /*364px*/
  right: -100vw;
  bottom: 4.714286vw;
  /*66px*/
  left: 23.333333%;
  z-index: -1;
  background: var(--color-beige-alpha-30);
}

.top-zazen__image {
  display: block;
  width: 100%;
  margin-bottom: 2.285714vw;
  /*32px*/
}

.top-zazen__intro {
  margin-bottom: 5.785714vw;
  /*81px*/
}

.top-zazen__lead {
  margin-bottom: 1.5vw;
  /*21px*/
}

.top-zazen__more {
  margin-left: auto;
}

.top-zazen__card {
  position: relative;
}

/* カード背面から左端へ伸びる背景 */
.top-zazen__card::before {
  content: "";
  position: absolute;
  top: -2.857143vw;
  /*-40px*/
  right: -3.5vw;
  /*-49px*/
  bottom: -2.857143vw;
  /*-40px*/
  left: -100vw;
  z-index: -1;
  background: var(--color-beige-alpha-20);
}

/* フェード中（スタッキングコンテキスト生成時）も帯がカードに被らないよう白で覆う */
.top-zazen__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-white);
}

.top-zazen__lotus {
  position: absolute;
  bottom: -3vw;
  /*-42px*/
  left: 77.818182%;
  width: 32.272727%;
  max-width: 355px;
  opacity: 0.6;
  pointer-events: none;
}

@media screen and (min-width: 1400px) {
  .top-zazen {
    padding: 120px 0 40px;
  }

  .top-zazen__body::before {
    top: 364px;
    bottom: 66px;
  }

  .top-zazen__image {
    margin-bottom: 32px;
  }

  .top-zazen__intro {
    margin-bottom: 81px;
  }

  .top-zazen__lead {
    margin-bottom: 21px;
  }

  .top-zazen__card::before {
    top: -40px;
    right: -49px;
    bottom: -40px;
  }

  .top-zazen__lotus {
    bottom: -42px;
    max-width: 355px;
  }
}

@media screen and (max-width: 750px) {
  .top-zazen {
    padding: 10.533333vw 0 6.666667vw;
    /*79px 0 50px*/
  }

  .top-zazen__heading {
    margin-bottom: 7.6vw;
    /*57px*/
  }

  .top-zazen__body::before {
    top: 38.133333vw;
    /*286px*/
    bottom: 16.533333vw;
    /*124px*/
    left: 21.73913%;
  }

  .top-zazen__image {
    margin-bottom: 4.8vw;
    /*36px*/
  }

  .top-zazen__intro {
    margin-bottom: 13.066667vw;
    /*98px*/
  }

  .top-zazen__lead {
    margin-bottom: 6.133333vw;
    /*46px*/
  }

  .top-zazen__card::before {
    top: -6.666667vw;
    /*-50px*/
    right: -4vw;
    /*-30px*/
    bottom: -6.666667vw;
    left: -4vw;
  }
}

/*------------------------
ギャラリー
-------------------------
.top-gallery {
  padding: 8.428571vw 0 8.785714vw;
  overflow: hidden;
}

.top-gallery__slider {
  --swiper-wrapper-transition-timing-function: linear;
}

.top-gallery__item {
  width: 18.75%;
}

.top-gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media screen and (min-width: 1400px) {
  .top-gallery {
    padding: 118px 0 123px;
  }
}

@media screen and (max-width: 750px) {
  .top-gallery {
    padding: 13.333333vw 0 13.066667vw;
  }

  .top-gallery__item {
    width: 38.4%;
  }
}*/

/*------------------------
ギャラリー
[変更] Swiper → Slick：swiper-wrapper 向け指定を削除し、variableWidth 用の幅・余白に変更
-------------------------*/
.top-gallery {
  padding: 8.428571vw 0 8.785714vw;
  overflow: hidden;
}

.top-gallery__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* [変更] 旧 Swiper spaceBetween:0.5208% を margin-right で再現 */
.top-gallery__item {
  width: 18.75vw;
  margin-right: 0.5208333333333333vw;
  box-sizing: border-box;
}

.top-gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media screen and (min-width: 1400px) {
  .top-gallery {
    padding: 118px 0 123px;
  }
}

@media screen and (max-width: 750px) {
  .top-gallery {
    padding: 13.333333vw 0 13.066667vw;
  }

  /* [変更] 旧 Swiper spaceBetween:1.0667% を margin-right で再現 */
  .top-gallery__item {
    width: 38.53333333333334vw;
    margin-right: 1.2vw;
  }
}

/*------------------------
住職からのご挨拶
-------------------------*/
.top-greeting {
  position: relative;
  padding: 7vw 0 7.214286vw;
  /*98px 0 101px*/
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-black);
}

.top-greeting__bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
}

.top-greeting__wave {
  position: absolute;
  transform: scaleX(-1);
}

.top-greeting__wave_position_left {
  top: 20.142857vw;
  /*282px*/
  left: -2.071429vw;
  /*-29px*/
  width: 53.854167%;
  max-width: 1034px;
}

.top-greeting__wave_position_right {
  top: 27.428571vw;
  /*384px*/
  left: 72.760417%;
  width: 40.46875%;
  max-width: 777px;
}

.top-greeting__inner {
  position: relative;
}

.top-greeting__media {
  position: relative;
  margin-bottom: 1.928571vw;
  /*27px*/
}

.top-greeting__image {
  display: block;
  width: 85.333333%;
  margin-left: auto;
}

.top-greeting__sub-image {
  position: absolute;
  top: 71.830986%;
  left: 0;
  width: 34.666667%;
}

.top-greeting__message {
  text-align: right;
}

.top-greeting__text {
  margin-bottom: 2.285714vw;
  /*32px*/
}

.top-greeting__more {
  margin-left: auto;
}

@media screen and (min-width: 1400px) {
  .top-greeting {
    padding: 98px 0 101px;
  }

  .top-greeting__wave_position_left {
    top: 282px;
    left: -29px;
    max-width: 1034px;
  }

  .top-greeting__wave_position_right {
    top: 384px;
    max-width: 777px;
  }

  .top-greeting__media {
    margin-bottom: 27px;
  }

  .top-greeting__text {
    margin-bottom: 32px;
  }
}

@media screen and (max-width: 750px) {
  .top-greeting {
    padding: 10.533333vw 0 13.333333vw;
    /*79px 0 100px*/
  }

  .top-greeting__wave_position_left {
    top: 80.666667vw;
    /*605px*/
    left: -36.666667%;
    /*-275px*/
    width: 137.866667%;
    /*1034px*/
    max-width: none;
  }

  .top-greeting__heading {
    margin-bottom: 7.6vw;
    /*57px*/
  }

  .top-greeting__media {
    margin-bottom: 15.4vw;
    /*115.5px*/
  }

  .top-greeting__image {
    width: 84.782609%;
  }

  .top-greeting__sub-image {
    top: 39.230769%;
    width: 34.347826%;
  }

  .top-greeting__message {
    text-align: left;
  }

  .top-greeting__text {
    margin-bottom: 6.066667vw;
    /*45.5px*/
  }
}

/*------------------------
お問合せ
-------------------------*/
.top-contact {
  position: relative;
  padding: 11.357143vw 0 11.428571vw;
  /*159px 0 160px*/
  overflow: hidden;
}

.top-contact__bg {
  position: absolute;
  inset: 0;
}

.top-contact__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.top-contact__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.top-contact__body {
  width: 50%;
}

.top-contact__title {
  margin-bottom: 3vw;
  /*42px*/
  font-family: var(--font-mincho);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

.top-contact__lead {
  margin-bottom: 0.357143vw;
  /*5px*/
}

.top-contact__tel {
  margin-bottom: 2.571429vw;
  /*36px*/
}

.top-contact__tel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.357143vw;
  /*5px*/
}

.top-contact__tel-icon {
  width: auto;
  height: 1.928571vw;
  /*27px*/
  max-height: 27px;
}

.top-contact__tel-number {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.top-contact__note {
  margin-bottom: 1.714286vw;
  /*24px*/
}

.top-contact__map {
  width: 48.181818%;
  border: solid 1px #000;
}

.top-contact__map-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 530 / 480;
}

/* 所在地・交通 */
.access-info {
  margin-bottom: 2.5vw;
  /*35px*/
}

.access-info__row {
  display: flex;
}

.access-info__term {
  flex: 0 0 6em;
}

.access-info__desc {
  flex: 1 1 auto;
}

@media screen and (min-width: 1400px) {
  .top-contact {
    padding: 159px 0 160px;
  }

  .top-contact__title {
    margin-bottom: 42px;
  }

  .top-contact__lead {
    margin-bottom: 5px;
  }

  .top-contact__tel {
    margin-bottom: 36px;
  }

  .top-contact__tel-link {
    gap: 5px;
  }

  .top-contact__tel-icon {
    max-height: 27px;
  }

  .top-contact__note {
    margin-bottom: 24px;
  }

  .access-info {
    margin-bottom: 35px;
  }
}

@media screen and (min-width: 751px) {
  .top-contact__tel-link {
    pointer-events: none;
  }
}

@media screen and (max-width: 750px) {
  .top-contact {
    padding: 13.333333vw 0;
    /*100px 0*/
  }

  .top-contact__inner {
    display: block;
  }

  .top-contact__body {
    width: auto;
  }

  .top-contact__title {
    margin-bottom: 5.866667vw;
    /*44px*/
    font-size: 5.5rem;
  }

  .top-contact__lead {
    margin-bottom: 2.4vw;
    /*18px*/
  }

  .top-contact__tel {
    margin-bottom: 5.466667vw;
    /*41px*/
  }

  .top-contact__tel-link {
    gap: 1.066667vw;
    /*8px*/
  }

  .top-contact__tel-icon {
    height: 4.933333vw;
    /*37px*/
    max-height: none;
  }

  .top-contact__tel-number {
    font-size: 4.4rem;
    line-height: 1;
  }

  .top-contact__note {
    margin-bottom: 5.333333vw;
    /*40px*/
  }

  .access-info {
    margin-bottom: 4.666667vw;
    /*35px*/
  }

  .top-contact__map {
    width: auto;
    margin-top: 10.666667vw;
    /*80px*/
  }

  .top-contact__map-frame {
    aspect-ratio: 690 / 400;
  }
}