/* =========================================================
   page-top.css : トップページ固有
   FV / 各施設のお知らせ / 施設一覧
   ========================================================= */

/* ----------------------------------------------------------
   FV (メインビジュアル)
---------------------------------------------------------- */
.fv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 990;
  max-height: 88vh;
  overflow: hidden;
}

.fv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左下を暗くして文字を読みやすく */
.fv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    66deg,
    rgba(51, 51, 51, 0.55) 0%,
    rgba(51, 51, 51, 0.28) 32%,
    rgba(51, 51, 51, 0) 58%
  );
}

.fv__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
}

.fv__copy-inner {
  width: 100%;
  max-width: calc(var(--content-width-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: 56px;
}

.fv__title {
  font-family: var(--font-copy);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.4;
  color: var(--color-white);
}

.fv__lead {
  margin-top: 16px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-white);
}

/* FV内 フロートCTA（各園はこちらから / 施設紹介）— PC */
.fv-cta {
  position: absolute;
  top: 148px;
  right: 72px;
  display: inline-block;
}

/* 縦バーはSP専用 */
.fv-cta__bar { display: none; }

.fv-cta__text {
  display: block;
  position: relative;
  padding: 18px 28px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-text);
  text-align: left;
}

/* バッジ（円「施設紹介」）を吹き出しの上に重ねる */
.fv-cta__badge {
  position: absolute;
  z-index: 2;
  top: -20px;
  right: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-beige);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #666;
  text-align: center;
}

.fv-cta:hover .fv-cta__text { opacity: 0.92; }

/* ----------------------------------------------------------
   各施設のお知らせ
   （.news__list / .news__row 等は components.css に共通定義）
---------------------------------------------------------- */
.news__more {
  margin-top: 40px;
  text-align: center;
}

/* 施設一覧セクションのカードは components.css（.fac__*）を使用 */

/* ==========================================================
   SP : max-width 750px
   ========================================================== */
@media (max-width: 750px) {
  /* FV */
  .fv {
    aspect-ratio: 375 / 762;
    max-height: none;
  }

  .fv__overlay {
    background: linear-gradient(
      180deg,
      rgba(51, 51, 51, 0) 30%,
      rgba(51, 51, 51, 0.5) 100%
    );
  }

  .fv__copy { bottom: 11%; }
  .fv__copy-inner { padding-inline: 20px; }
  .fv__title { font-size: 27px; line-height: 1.35; }
  .fv__lead { margin-top: 12px; font-size: 14px; }

  /* FV CTA（SP）— 横長レイアウト：縦バー＋テキスト＋円 */
  .fv-cta {
    top: 68px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-white);
    border-radius: 20px 0 0 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }

  .fv-cta__bar {
    display: block;
    flex-shrink: 0;
    width: 7px;
    height: 80px;
    border-radius: 4px;
    background: #eae6de;
  }

  .fv-cta__text {
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    line-height: 1.45;
  }

  .fv-cta__badge {
    position: static;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    margin-left: 4px;
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  /* news 行のSP調整は components.css */
  .news__more { margin-top: 28px; }
}