/**
 * トップページだけの指定。値はFigma（P01_トップページ - Desktop、1600pxの幅）を、xlの大きさにしている。
 */

/* ---------- 最初の画面 ---------- */

/* Figmaのトップは、ヘッダーに地がなく、ページの上端から白→クリームのグラデーションが通る
 * （02 Hero：0%で白、20%＝170pxでクリーム）。ヘッダーは別のページパーツのため、
 * スクロール前はヘッダーの地にグラデーションの上の120px分を描き、ヒーローの地はその続き（残りの50px）から始める。
 * index.cssはトップのページパーツだけに読み込むため、下層ページのヘッダーには効かない */
html:not(.is-scrolled) .site-header {
  background: linear-gradient(180deg, var(--snow) 0%, rgb(249 247 242) 100%);
}

.index-hero {
  background: linear-gradient(180deg, rgb(249 247 242) 0, var(--cream) 3.125rem, var(--cream) 100%);
}

.index-hero-frame {
  height: 34rem;
  max-height: calc(100svh - 5rem);

  @media screen and (min-width: 768px) {
    height: 32rem;
  }
  @media screen and (min-width: 1024px) {
    height: auto;
    max-height: none;
    aspect-ratio: 2 / 1;
  }
}

.index-hero-slider {
  position: absolute;
  inset: 0;
}

.index-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* swiperの.swiper-pagination-horizontal（left: 0・width: 100%・bottom: 8px）に勝つよう、classを重ねる */
.index-hero-dots.slider__pagination {
  position: absolute;
  z-index: 3;
  left: 1.5rem;
  bottom: 1rem;
  justify-content: flex-start;

  @media screen and (min-width: 1200px) {
    left: 7.5rem;
    bottom: 3.25rem;
    width: auto;
  }
}

/* 既存のトップと同じ、左から右へ薄くなる暗幕 */
.index-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(15 36 26 / 0.85) 0%, rgb(15 36 26 / 0.45) 60%, rgb(15 36 26 / 0.15) 100%);

  @media screen and (min-width: 768px) {
    background: linear-gradient(90deg, rgb(15 36 26 / 0.8) 0%, rgb(15 36 26 / 0.3) 60%, rgb(15 36 26 / 0) 100%);
  }
}

.index-hero-copy {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 4rem;
  color: var(--snow);

  @media screen and (min-width: 1024px) {
    left: 4rem;
    right: auto;
    bottom: 6rem;
  }
  /* Figmaは、写真の下から144pxの位置に文言の下端をそろえる */
  @media screen and (min-width: 1200px) {
    left: 7.5rem;
    bottom: 9rem;
  }
}

.index-hero-sub {
  padding-left: 0.375rem;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-shadow: var(--heading-shadow);

  @media screen and (min-width: 1200px) {
    font-size: 1.125rem;
  }
}

.index-hero-title {
  margin: 0;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: var(--snow);
  text-shadow: var(--heading-shadow);

  @media screen and (min-width: 768px) {
    font-size: 2.5rem;
  }
  @media screen and (min-width: 1024px) {
    font-size: 2.5rem;
  }
  @media screen and (min-width: 1200px) {
    font-size: 3.75rem;
  }
}

.index-hero-lead {
  padding-left: 0.375rem;
  font-size: 0.8125rem;
  line-height: 2.2;
  letter-spacing: 0.08em;
  color: var(--snow);

  & br {
    display: none;
  }

  @media screen and (min-width: 768px) {
    font-size: 0.875rem;

    & br {
      display: inline;
    }
  }
  @media screen and (min-width: 1200px) {
    font-size: 1.125rem;
    line-height: 2.4;
  }
}

/* 右下の「SCROLL」と縦の線 */
.index-hero-scroll {
  display: none;

  @media screen and (min-width: 1024px) {
    position: absolute;
    z-index: 2;
    right: 4rem;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

    & p {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 200;
      font-size: 1rem;
      line-height: 1.4;
      letter-spacing: 0.12em;
      color: var(--snow);
      writing-mode: vertical-rl;
    }
  }
  @media screen and (min-width: 1200px) {
    right: 3.75rem;
    bottom: 2.5rem;

    & p {
      font-size: 1.125rem;
    }
  }
}

.index-hero-scroll-line {
  width: 1px;
  height: 3rem;
  background-color: var(--snow);
  transform-origin: top center;
  animation: index-scroll 2.4s var(--easing) infinite;
}

@keyframes index-scroll {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* ---------- Rebirthの想い ---------- */

.index-about-deco {
  position: absolute;
  top: 1.25rem;
  right: -8rem;
  width: 22rem;
  pointer-events: none;

  @media screen and (min-width: 1200px) {
    right: 1.25rem;
    width: 35rem;
  }
}

.index-about-photo {
  aspect-ratio: 1 / 1;

  @media screen and (min-width: 1024px) {
    flex: 1;
  }
  @media screen and (min-width: 1200px) {
    flex: none;
    width: 42.5rem;
  }
}

/* ---------- Rebirthにできること ---------- */

.index-business {
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, var(--snow) 30%, var(--snow) 70%, rgb(255 255 255 / 0) 100%);
}

.index-business-deco {
  position: absolute;
  top: -6rem;
  right: -10rem;
  width: 30rem;
  pointer-events: none;

  @media screen and (min-width: 1200px) {
    right: 2.5rem;
    width: 50rem;
  }
}

.index-business-text {
  @media screen and (min-width: 1024px) {
    flex: none;
    width: 45%;
  }
  @media screen and (min-width: 1200px) {
    width: 41.25rem;
  }
}

.index-business-photo {
  aspect-ratio: 4 / 3;
  margin-inline: 1.25rem;

  @media screen and (min-width: 768px) {
    margin-inline: 2.5rem;
  }
  @media screen and (min-width: 1024px) {
    flex: 1;
    align-self: flex-start;
    margin-inline: 0;
  }
}

.index-business-dots.slider__pagination {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  bottom: 0.75rem;
  width: auto;

  @media screen and (min-width: 1200px) {
    left: 2rem;
    bottom: 1.5rem;
  }
}

/* 建築・リフォームの写真の右下の植物（Figmaの1014・2413の位置。区画の上端から685px） */
.index-business-plant {
  display: none;

  @media screen and (min-width: 1200px) {
    position: absolute;
    top: 42.8125rem;
    right: 1.625rem;
    display: block;
    width: 35rem;
    pointer-events: none;
  }
}

.index-water-photos {
  @media screen and (min-width: 1024px) {
    flex: 1;
  }
}

/* 写真の見せる範囲は、Figmaの画像の位置（泡は下寄り、手元は下寄り）に合わせる */
.index-water-photo-small {
  width: 80%;
  aspect-ratio: 3 / 1;

  & img {
    object-position: 50% 96%;
  }
}

.index-water-photo-large {
  width: 100%;
  aspect-ratio: 3 / 1;

  & img {
    object-position: 50% 86%;
  }
}

/* 水と予防医学の間の、大きな「Rebirth」の透かし */
.index-watermark {
  height: 0;
  pointer-events: none;

  & img {
    display: block;
    width: 70%;
    margin-top: -6rem;

    @media screen and (min-width: 1200px) {
      width: 62.5rem;
      margin-top: -19.1875rem;
    }
  }
}

.index-care-photo {
  aspect-ratio: 3 / 2;
  margin-right: 1.25rem;

  @media screen and (min-width: 1024px) {
    flex: 1;
    margin-right: 0;
  }
}

/* barondoll cell・えみおもちのカード。地の写真を薄く敷く */
.index-shop-card {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.5rem 1.5rem;
  background-color: var(--cream);
  box-shadow: var(--photo-shadow);

  @media screen and (min-width: 1200px) {
    padding: 4rem 1.5rem 1.5rem 4rem;
  }
}

.index-shop-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}

.index-shop-card-mark {
  position: absolute;
  left: -0.625rem;
  bottom: -0.625rem;
  width: 80%;
  pointer-events: none;
}

/* ---------- トピックス ---------- */

.index-topics {
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, var(--snow) 30%, var(--snow) 100%);
}