@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, 0.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;
}

/*山本追加コード*/

/* ====================================
   LADIAS Channel Section
   ==================================== */
.page-top__channel {
  background-color: #fff;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
	padding-top:0;
}

.page-top__channel-image {
  width: 100%; /* 親要素(main)いっぱいまで広げる */
  margin: 0;
}

.page-top__channel-image img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /* 画像下の隙間消し */
  /* 影はお好みで（端まで行くなら無いほうが自然かもしれません） */
  /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
}

.page-top__channel-btn {
  margin-top: 3rem;
  text-align: center;
}
/* ====================================
   NEWS Section
   ==================================== */
.page-top__news {
  background-color: #fff;
  overflow: hidden; /* はみ出し防止 */
  padding-top: 0;
}

.page-top__news-slide {
  margin-top: 2rem;
}

/* スライダー画像の装飾 */
.page-top__news-slide .slide-thumb img {
  border-radius: 1rem;
  width: 100%;
  transition: opacity 0.3s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.page-top__news-slide .slide-thumb a:hover img {
  opacity: 0.8;
}

.page-top__news-btn {
  margin-top: 4rem;
  text-align: center;
}
.page-top__news-slider-wrap {
  margin-top: 2rem;
  width: 100%;
}

.page-top__news-track {
  display: flex; /* 横並び */
  width: max-content; /* 中身の幅に合わせる */
}

.page-top__news-item {
  width: 70vw; /* スマホ: 画面幅の70% */
  margin-right: 2rem; /* 画像間の隙間 */
  flex-shrink: 0;
}

/* PCサイズ調整 */
@media (min-width: 768px) {
  .page-top__news-item {
    width: 25rem; /* PC: 固定幅 */
  }
}

.page-top__news-item img {
  width: 100%;
  height: auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

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