@charset "UTF-8";

/* ==========================================================================
   TOP page
   Base: style.css（変数・共通パーツ）
   ========================================================================== */

.top {
  --top-space-2xl: 160px;
  --top-space-xl: 80px;
  --top-space-lg: 80px;
  --top-space-md: 80px;

  overflow-x: clip;
}

.top > section {
  position: relative;
  isolation: isolate;
}

@media (min-width: 769px) {
  .top {
    --top-space-2xl: clamp(160px, 19.44vw, 280px);
    --top-space-xl: clamp(120px, 16.67vw, 240px);
    --top-space-lg: clamp(100px, 13.89vw, 200px);
    --top-space-md: clamp(80px, 9.72vw, 140px);
  }
}

/* ==========================================================================
   top-brush（縦見出しの背後に敷く筆の円）
   ========================================================================== */

/* 左右：和文タイトルの左右中心 ＋ --brush-x ／ 上下：和文タイトル上端からの距離 --brush-top（値は Figma の配置から算出） */
.top-brush .section-title__ja {
  position: relative;
}

.top-brush .section-title__ja::before {
  content: "";
  position: absolute;
  top: var(--brush-top, 0px);
  left: 50%;
  z-index: -1;
  width: 248px;
  aspect-ratio: 392 / 390;
  background: url("../img/common-bg-circle-brush.svg") no-repeat center / contain;
  pointer-events: none;
  transform: translateX(calc(-50% + var(--brush-x, 0px)));
}

/* SP：筆円の中心を和文タイトルの左右中心・上端に合わせる */
.top-concept__title {
  --brush-top: calc(248px * 390 / 392 / -2);
  --brush-x: 0px;
}

.top-feature--mineralspring .top-feature__title,
.top-feature--cuisine .top-feature__title {
  --brush-top: 33px;
}

.top-feature--space .top-feature__title {
  --brush-top: 16px;
}

.top-news__title {
  --brush-top: -78px;
}

@media (min-width: 769px) {
  .top-brush .section-title__ja::before {
    width: 392px;
  }

  .top-concept__title {
    --brush-top: -185px;
    --brush-x: 106px;
  }

  .top-feature--mineralspring .top-feature__title {
    --brush-top: -147px;
  }

  .top-feature--cuisine .top-feature__title {
    --brush-top: 38px;
  }

  .top-feature--space .top-feature__title {
    --brush-top: -162px;
  }

  .top-news__title {
    --brush-top: -136px;
  }
}

/* タブレット：PC の筆円を 80% に縮小し、和文タイトルからの距離も同率で縮める */
@media (min-width: 769px) and (max-width: 1024px) {
  .top-brush .section-title__ja::before {
    width: calc(392px * 0.8);
  }

  .top-concept__title {
    --brush-top: calc(-185px * 0.8);
    --brush-x: calc(106px * 0.8);
  }

  .top-feature--mineralspring .top-feature__title {
    --brush-top: calc(-147px * 0.8);
  }

  .top-feature--cuisine .top-feature__title {
    --brush-top: calc(38px * 0.8);
  }

  .top-feature--space .top-feature__title {
    --brush-top: calc(-162px * 0.8);
  }

  .top-news__title {
    --brush-top: calc(-136px * 0.8);
  }
}

/* ==========================================================================
   top-text（サブタイトル＋本文）
   ========================================================================== */

.top-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.top-text__subtitle {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.top-text__description {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 769px) {
  .top-text {
    gap: var(--space-20);
  }

  .top-text__subtitle {
    font-size: var(--fs-lead);
  }
}

/* ==========================================================================
   top-hero（KV）
   ========================================================================== */

.top-hero {
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-text);
}

.top-hero__slides {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.top-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-in-out);
}

.top-hero__slide--leaving {
  z-index: 1;
  opacity: 1;
}

.top-hero__slide--active {
  z-index: 2;
  opacity: 1;
}

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

.top-hero__slide--active .top-hero__img,
.top-hero__slide--leaving .top-hero__img {
  animation: top-hero-zoom 8s linear forwards;
}

.top-hero__content {
  position: absolute;
  top: 25.4%;
  left: 7.2vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 120px;
  animation: top-hero-intro 2.4s var(--ease-out) 0.4s both;
}

.top-hero__heading {
  font-size: var(--fs-heading-md);
  font-weight: var(--fw-medium);
  line-height: 2.05;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  text-shadow:
    0 4px 4px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(0, 0, 0, 0.8);
}

.top-hero__scroll {
  display: none;
}

@media (min-width: 769px) {
  .top-hero__content {
    top: 32.9%;
    left: 5.28vw;
  }

  .top-hero__heading {
    font-size: 1.5rem;
    line-height: 2.08;
    writing-mode: horizontal-tb;
    text-shadow: 0 0 60px #000;
  }

  .top-hero__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    padding-left: var(--space-4);
  }

  .top-hero__scroll-text {
    font-family: var(--ff-en);
    font-size: var(--fs-en-md);
    font-weight: 400;
    line-height: var(--lh-none);
    letter-spacing: 0.12em;
    writing-mode: vertical-rl;
  }

  .top-hero__scroll-line {
    position: relative;
    width: 1px;
    height: 79px;
    overflow: hidden;
    background-color: var(--color-white);
  }

  .top-hero__scroll-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 43px;
    background-color: #acacac;
    animation: top-hero-scroll 2.4s var(--ease-in-out) infinite;
  }
}

@keyframes top-hero-zoom {
  from {
    transform: scale(1.1);
  }

  to {
    transform: scale(1);
  }
}

@keyframes top-hero-intro {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes top-hero-scroll {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(184%);
  }
}

/* ==========================================================================
   top-concept
   ========================================================================== */

.top-concept {
  padding-top: var(--top-space-2xl);
}

/* PC：上に張り出す筆円が KV 画像に掛からない高さを下限にする（1440px 時の Figma 値と同じ） */
@media (min-width: 1025px) {
  .top-concept {
    padding-top: 280px;
  }
}

/* SP：content を display: contents にし、見出し・画像・本文をグリッドに直接並べる */
.top-concept__inner {
  display: grid;
  grid-template-columns: 1fr 61.7vw;
  grid-template-areas:
    "title media"
    "body  body";
  gap: 28px var(--space-32);
}

.top-concept__content {
  display: contents;
}

.top-concept__title {
  grid-area: title;
  justify-self: end;
  align-self: start;
  margin-top: var(--space-24);
}

.top-concept__media {
  grid-area: media;
}

.top-concept__img {
  width: 100%;
  aspect-ratio: 248 / 304;
  object-fit: cover;
}

.top-concept__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-24);
  padding-inline: var(--space-40);
}

@media (min-width: 769px) {
  .top-concept__inner {
    grid-template-columns: minmax(0, 720fr) minmax(0, 440fr);
    grid-template-areas: "media content";
    align-items: center;
    gap: clamp(40px, 8.33vw, 120px);
    max-width: calc(1280px + var(--container-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
  }

  .top-concept__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 44px;
  }

  .top-concept__title {
    justify-self: auto;
    align-self: flex-start;
    margin-top: 0;
  }

  .top-concept__img {
    aspect-ratio: 720 / 496;
  }

  .top-concept__body {
    gap: 44px;
    padding-inline: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .top-concept__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   top-feature（お風呂・お食事・空間）
   ========================================================================== */

.top-feature {
  padding-top: var(--top-space-xl);
}

.top-feature--cuisine {
  padding-top: var(--top-space-md);
}

/* タブレット：上に張り出す筆円が KV 画像・前セクションの本文に掛からない余白（769〜1024px で約45px空く） */
@media (min-width: 769px) and (max-width: 1024px) {
  .top-concept {
    padding-top: 240px;
  }

  .top-feature--mineralspring,
  .top-feature--space {
    padding-top: 176px;
  }

  .top-feature--cuisine {
    padding-top: 120px;
  }
}

/* 小さめ PC：空間の筆円がお食事の本文に掛からない高さを下限にする */
@media (min-width: 1025px) {
  .top-feature--space {
    padding-top: clamp(208px, 16.67vw, 240px);
  }
}

.top-feature__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.top-feature__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
}

.top-feature__img {
  width: 100%;
  aspect-ratio: 362 / 209;
  object-fit: cover;
}

.top-feature__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.top-feature__gallery-img {
  width: 100%;
  aspect-ratio: 115 / 208;
  object-fit: cover;
}

.top-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-24);
}

.top-feature__body .top-text {
  align-self: stretch;
}

.top-feature__btn {
  flex-shrink: 0;
}

/* SP：和文が2文字で短い分、写真との距離を足して筆円の見え方をお風呂・お食事と揃える */
.top-feature--space .top-feature__title {
  margin-bottom: 7px;
}

@media (min-width: 769px) {
  .top-feature--space .top-feature__title {
    margin-bottom: 0;
  }

  .top-feature__inner {
    --container-max: 1280px;

    flex-direction: row;
    align-items: flex-start;
    gap: clamp(32px, 5vw, 72px);
  }

  .top-feature__title {
    flex-shrink: 0;
    padding-left: var(--space-24);
  }

  .top-feature__content {
    flex: 1;
    min-width: 0;
    gap: 64px;
  }

  .top-feature__img {
    aspect-ratio: 1120 / 512;
  }

  .top-feature__gallery {
    gap: var(--space-16);
  }

  .top-feature__gallery-img {
    aspect-ratio: 362 / 510;
  }

  .top-feature__body {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(40px, 5.56vw, 80px);
  }

  .top-feature__body .top-text {
    flex: 0 1 928px;
  }

  .top-feature--stack .top-feature__inner {
    flex-direction: column;
    align-items: center;
    gap: 52px;
  }

  .top-feature--stack .top-feature__title {
    padding-left: 0;
  }

  .top-feature--stack .top-feature__content {
    width: 100%;
    max-width: 1120px;
  }
}

/* ==========================================================================
   top-split（ご宿泊・アクセス・周辺観光・お客様の声）
   ========================================================================== */

.top-split--stay,
.top-split--access,
.top-split--sightseeing,
.top-split--reviews {
  padding-top: var(--top-space-lg);
}

/* SP：content を display: contents にし、見出し→メディア→本文の順に並べ替える */
.top-split__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-inline: var(--container-gutter);
}

.top-split__content {
  display: contents;
}

.top-split__title {
  order: 1;
}

.top-split__media {
  order: 2;
}

.top-split__body {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-20);
}

.top-split__body .top-text {
  align-self: stretch;
}

.top-split__img,
.top-split__map {
  width: 100%;
  aspect-ratio: 362 / 209;
  object-fit: cover;
}

.top-split__map {
  display: block;
  height: auto;
  border: 0;
}

.top-split__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: var(--space-8);
}

.top-split__gallery-item:nth-child(odd) {
  margin-top: var(--space-20);
}

.top-split__gallery-img {
  width: 100%;
  aspect-ratio: 84 / 185;
  object-fit: cover;
}

.top-split__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.top-split__grid-img {
  width: 100%;
  aspect-ratio: 177 / 54;
  object-fit: cover;
}

@media (min-width: 769px) {
  /* SP の 80px（768px 時）から Figma PC の 280px（1440px 時）へ線形に広げる */
  .top-split--stay {
    padding-top: clamp(80px, calc(80px + (100vw - 768px) * 0.2976), 280px);
  }

  .top-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 425fr) minmax(0, 750fr);
    grid-template-areas: "content media";
    align-items: start;
    gap: clamp(40px, 7.22vw, 104px);
    padding-inline: clamp(40px, 11.18vw, 161px) 0;
  }

  .top-split__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  .top-split__media {
    grid-area: media;
  }

  .top-split--reverse .top-split__inner {
    grid-template-columns: minmax(0, 750fr) minmax(0, 425fr);
    grid-template-areas: "media content";
    padding-inline: 0 clamp(40px, 11.18vw, 161px);
  }

  .top-split--center .top-split__inner,
  .top-split--stay .top-split__inner,
  .top-split--sightseeing .top-split__inner {
    align-items: center;
  }

  .top-split__img {
    aspect-ratio: 750 / 510;
  }

  .top-split__map {
    aspect-ratio: 750 / 400;
  }

  .top-split__gallery {
    gap: var(--space-12);
  }

  .top-split__gallery-item:nth-child(odd) {
    margin-top: 56px;
  }

  .top-split__gallery-img {
    aspect-ratio: 178 / 417;
  }

  .top-split--reviews .top-split__inner {
    grid-template-columns: minmax(0, 740fr) minmax(0, 425fr);
    gap: clamp(40px, 7.92vw, 114px);
    max-width: calc(1280px + var(--container-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
  }

  .top-split__grid {
    gap: var(--space-16);
  }

  .top-split__grid-img {
    aspect-ratio: 362 / 120;
  }
}

/* タブレット：外側の余白をお客様の声と同じ --container-gutter に揃え、広がった幅はメディア列に回す（本文列の幅は従来のまま） */
@media (min-width: 769px) and (max-width: 1024px) {
  .top-split__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 8fr);
    padding-inline: var(--container-gutter) 0;
  }

  .top-split--reverse .top-split__inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 7fr);
    padding-inline: 0 var(--container-gutter);
  }

  .top-split--reviews .top-split__inner {
    grid-template-columns: 1fr 1fr;
  }

  .top-split__map {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   top-news
   ========================================================================== */

.top-news {
  padding-top: var(--top-space-xl);
}

.top-news__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.top-news__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-32);
}

.top-news__list {
  align-self: stretch;
}

.top-news__btn {
  flex-shrink: 0;
}

@media (min-width: 769px) {
  .top-news__inner {
    --container-max: 1283px;

    flex-direction: row;
    align-items: flex-start;
    gap: clamp(32px, 5.28vw, 76px);
  }

  .top-news__title {
    flex-shrink: 0;
    padding-left: var(--space-24);
  }

  .top-news__content {
    flex: 1;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: clamp(32px, 5vw, 72px);
    min-width: 0;
    padding-top: var(--space-48);
  }

  .top-news__list {
    flex: 0 1 935px;
  }
}