@charset "UTF-8";





/* page-top__fv ------------ */

.page-top__fv-ttl {
  margin-bottom: 6rem;
}

/* 外側：背景なし */
.page-top__fv {
  position: relative;
  height: calc(100vh - 6rem);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* 中身 40rem だけに固定背景 */
.page-top__fv .l-inner {
  position: relative;
  max-width: 40rem;
  width: 100%;
  z-index: 1;
  /* 背景より前へ */
}

/* ここが固定背景レイヤー */
.page-top__fv .l-inner::before {
  content: "";
  position: fixed;
  /* ← fixedなので画面に固定される */
  top: 0;
  left: 50%;
  width: 40rem;
  /* 中身の幅と合わせる */
  height: 100vh;
  /* 画面の高さ分だけ背景 */
  transform: translateX(-50%);
  background: url(../img/top-bg.png) bottom/cover no-repeat;
  z-index: -1;
}

/* page-top__idex01 ------------ */


.page-top__idex01 {
  background-color: #717171;
  backdrop-filter: blur(10px);
  background-color:
    color-mix(in srgb, #000 37%, transparent);

    clip-path:polygon(12% 0%, 88% 0%,
      /* 上部カット */
      100% 5%, 100% 100%,
      /* 右側カット */
      100% 100%, 0% 100%,
      /* 下部カット（←ここがへこみ） */
      0% 100%, 0% 5%
      /* 左側カット */
    )

}

.page-top__idex01-ttl {
  text-align: center;
  font-size: 3.2rem;
  color: #fff;
  /* text-shadow: 0 0 6px rgb(255, 255, 255, .6); */
  font-family: "adobe-caslon-pro", serif;
  font-weight: normal;
}

.page-top__idex01-subttl {
  font-size: 1.5rem;
  text-align: center;
  position: relative;
  color: #fff;
  text-shadow: 0 0 3px rgb(255, 255, 255, .6);
}

.page-top__idex01-subttl:before {
  content: '';
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background: url(../img/star.png) no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  right: 63%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.page-top__idex01-text {
  text-align: center;
  margin-top: 4rem;
  font-size: 1.4rem;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  /* text-shadow: 0 0 3px rgb(255, 255, 255, .6); */
}

.page-top__idex01-image.--line {
  width: 10%;
  margin: auto;
  margin-top: 4rem;
  text-align: center;
}



.page-top__idex01-image {
  width: 70%;
  margin: auto;
  margin-top: 4rem;
  text-align: center;
}

.page-top__idex01-text02 {
  font-size: 3.2rem;
  font-family: "Noto Serif JP", serif;
  text-align: center;
  margin-top: 4rem;
  color: #fff;
}

/* page-top__idex02 ------------ */


.page-top__idex02 {
  background-color: #fff;
}

.page-top__idex02-slide {
  margin-top: 4rem;
}

.page-top__idex02-slide .splide__pagination {
  bottom: -6rem;
}

.page-top__idex02-slide .splide__pagination__page {
  margin: 0 1rem;
}

.page-top__idex02-slide .splide__pagination__page {
  background: #F0E4F5;
}

.page-top__idex02-slide .splide__pagination__page.is-active {
  background: #9778D1;
  transform: scale(1);
}

/* ===== 初期：Splideが未初期化の時はズレ防止 ===== */
#rotateSlide:not(.ready) .splide__slide {
  opacity: 0;
  transform: none;
}

/* ===== mount後にアニメ有効化 ===== */
#rotateSlide.ready .splide__slide {
  transform: rotate(60deg);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

#rotateSlide .splide__track{
    padding: 1rem 1rem 1rem 2rem !important;
}


/* ===== アクティブ状態 ===== */
#rotateSlide.ready .splide__slide.is-active {
  transform: rotate(1.5deg);
  opacity: 1;
}

.slide-title {
  font-size: 1.6rem;
  font-weight: bold;
}

.slide-title a {
  line-height: 1.3;
}

.slide-thumb {
  margin-bottom: 2rem;
}

.slide-thumb img {
  width: 100%;
}

.page-top__idex02-btn {
  margin-top: 4rem;
}


/* page-top__idex03 ------------ */

.page-top__idex03 {
  background-color: #fff;
}

.page-top__idex03-text {
  font-size: 1.4rem;
  margin-top: 2.4rem;
}

.page-top__idex03-list {
  margin-top: 2.4rem;
}

.page-top__idex03-list-item {
  background: linear-gradient(to bottom, #E0E6ED 0%, #D5E0E6 100%);
  clip-path: polygon(9% 0%, 91% 0%,      /* 上部カット */      100% 9%, 100% 91%,      /* 右側カット */      91% 100%, 9% 100%,      /* 下部カット（←ここがへこみ） */      0% 91%, 0% 9%      /* 左側カット */    );
  padding: 3rem;
    margin: 3rem 2.2rem 0rem;
}

.page-top__idex03-list-item:not(:first-of-type) {
  margin-top: 0rem;
}

.page-top__idex03-list-item:last-of-type {
  padding: 3rem;
  clip-path: polygon(9% 0%, 91% 0%,
      /* 上部カット */
      100% 9%, 100% 91%,
      /* 右側カット */
      91% 100%, 9% 100%,
      /* 下部カット（←ここがへこみ） */
      0% 91%, 0% 9%
      /* 左側カット */
    );
}

.page-top__idex03-list-item-name {
  margin-top: 3rem;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
}

.page-top__idex03-list-item-text {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 1rem;
  color: #fff;
}

.page-top__idex03-btn {
  margin-top: 4rem;
  text-align: center;
}