/* ================================================================
   Top page (Frame 72/70 PC, iPhone 16 - Top Mobile)
   モバイルファースト → PC は @media (min-width: 768px) で上書き
   ================================================================ */

/* ===== ページ全体 ===== */
body{
position:relative;
min-height:100svh;
}
.page-top {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ===== 背景: 水彩画像 ===== */
/* Mobile: 393×1047px / PC: 1920×1398px, opacity 0.4 */
.top-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.top-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.top-bg__img {
  width: 100%;
  height: 100%;
  /*object-fit: cover;*/
  object-position: bottom;
}

@media (max-width: 767px) {
  .top-bg__img {
    object-fit: cover;
  }
}

/* ===== 波形デコレーション 下部 (モバイルのみ) ===== */
.top-wave-bottom {
  width: 100%;
  line-height: 0;
}

.top-wave-bottom img {
  width: 100%;
  height: auto;
}

/* ===== ヒーローセクション ===== */
.top-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 上: 137/393=34.86vw、左右: 35/393=8.91vw、下: 37px=9.415vw */
  padding: 34.86vw 8.91vw 9.415vw;
}

.top-hero__inner {
  text-align: center;
  width: 100%;
  max-width: clamp(280px, 82.44vw, 700px); /* 324/393=82.44vw */
}

/* ===== キャッチコピー: "Design Your own Trip" ===== */
/* Mobile: 46px bold #c40805 / PC: 90px bold #c40805 */
/* 46/393=11.704vw */
.top-hero__catch {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11.704vw;
  line-height: 1;
  color: var(--color-red);
  text-align: center;
  margin-bottom: 7.379vw; /* 29/393 */
  white-space: nowrap;
}

/* ===== サブキャッチ（h1直下・Figma追加）===== */
/* Mobile: 20px bold / PC: 非表示（PC Figmaに存在しない） */
/* 20/393=5.089vw */
.top-hero__subcatch {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 5.597vw; /* 22/393 */
  line-height: 1.6em;
  color: var(--color-red);
  text-align: center;
  display: inline-block;
  margin-top: 0.6em;
}

/* ===== サブタイトル ===== */
/* Mobile: 20px bold black / PC: 36px bold black */
/* 20/393=5.089vw */
.top-hero__subtitle {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 5.089vw;
  line-height: 1.3;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--sp-lg);
}

/* ===== 説明文 ===== */
/* Mobile: 16px bold / PC: 22px medium */
/* 16/393=4.071vw */
.top-hero__desc {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 4.071vw;
  line-height: 1.65;
  color: var(--color-text);
  text-align: left;
}

.lang-en .top-hero__desc {
  font-size: 4.071vw; /* Figma mobile (EN): 16px / 393 */
  line-height: 1.4375; /* Figma mobile (EN): 23px / 16px */
}

.lang-ja .top-hero__desc {
  text-align: justify;
}

/* ===== ボタンセクション ===== */
/* Mobile: 2ボタン横並び、間に× */
/* Figma: Room(x=18,y=802,w=167,h=108) × ipponsugi(x=232,y=826,w=134,h=114) */
.top-index {
  padding: 0 var(--gutter) 6.616vw; /* 26/393 */
}

.top-index__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
}

.top-index__btn {
  display: block;
  flex-shrink: 0;
  position: relative;
}

/* Roomボタン（SP）: 167/393=42.49vw */
.top-index__btn--room {
  width: 42.49vw;
  margin: -1em -0.2em 0 0;
}

/* 一本杉ボタン（SP）: 134/393=34.1vw */
.top-index__btn--ipponsugi {
  width: 34.1vw;
  margin: 1em 0 0 0.8em;
}

.top-index__btn-base {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.2s;
}

/* ホバー版: 通常版の上に重なり opacity:0 で待機 */
.top-index__btn-base--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* ホバー画像スワップ（--hoverクラスがある場合） */
.top-index__btn:hover .top-index__btn-base--normal {
  opacity: 0;
}
.top-index__btn:hover .top-index__btn-base--hover {
  opacity: 1;
}


/* × 区切り: 24/393=6.107vw  margin: 4/393=1.018vw */
.top-index__divider {
  flex-shrink: 0;
  width: 6.107vw;
  margin: 0 1.018vw;
  position: relative;
  top: 5px;
}

.top-index__divider img {
  width: 100%;
  height: auto;
}

/* ===== モバイル専用クラス ===== */
.sp-only { display: block; }
.pc-only { display: none; }

/* ================================================================
   PC レイアウト (≥768px)
   Figma: Frame 72, 1920×1398px
   vw換算: px / 1920 × 100  /  vh換算: px / 1398 × 100
   ================================================================ */
/* 背景: PCでウインドウが画像(1920×1398)より縦長になった場合のみ cover */
@media (min-width: 768px) and (max-aspect-ratio: 1920/1398) {
  .top-bg__img {
    object-fit: cover;
  }
}

@media (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: block; }

  /* ヒーロー: PC全高 */
  .top-hero {
    /* top: 200/1398=14.3vh  sides: 35/1920=1.823vw  bottom: 83px=4.323vw */
    padding: 14.3vh 1.823vw 4.323vw;
  }

  /* コンテンツ幅: 1005/1920=52.34vw → 各辺マージン 23.83vw ≒ Figma 457px */
  .top-hero__inner {
    max-width: 52.34vw;
  }

  /* キャッチ: 90/1920=4.6875vw  line-height: 110/1920=5.729vw */
  .top-hero__catch {
    font-size: 4.6875vw;
    line-height: 5.729vw;
    margin-bottom: 3.125vw; /* 60/1920 */
  }

  /* サブキャッチ: PC Figmaに存在しないため非表示 */
  .top-hero__subcatch {
    display: none;
  }

  /* サブタイトル: 36/1920=1.875vw  line-height: 50/1920=2.604vw */
  .top-hero__subtitle {
    font-size: 1.875vw;
    line-height: 2.604vw;
    /* margin-bottom: 64/1920=3.333vw */
    margin-bottom: 3.333vw;
  }

  /* 説明文: 22/1920=1.146vw */
  .top-hero__desc {
    font-weight: 500;
    font-size: 1.146vw;
    line-height: 1.6;
    text-align: justify;
  }

  /* 英語版説明文: Figma Frame 70 (font-bold, line-height 30/22=1.364) */
  .lang-en .top-hero__desc {
    font-weight: 700;
    line-height: 1.364;
    font-size:1.146vw; /* Figma mobile (EN): 22px / 1920 */
text-align:left;
  }

  /* ボタンセクション: bottom 80/1920=4.167vw */
  .top-index {
    padding: 0 1.823vw 4.167vw;
  }

  .top-index__inner {
    justify-content: center;
    align-items: center;
    gap: 0;
  }

  /* Roomボタン: 310.61/1920=16.18vw */
  .top-index__btn--room {
    width: 16.18vw;
    margin-left: -5em;
  }

  /* 一本杉ボタン: 236/1920=12.29vw */
  .top-index__btn--ipponsugi {
    width: 12.29vw;
  }

  /* × 区切り: 53.21/1920=2.77vw */
  .top-index__divider {
    width: 2.77vw;
    top: 0;
    margin: 0 3.57vw;
  }

}

/* タブレット幅（768〜1023px）: top-hero〜top-index間の余白を通常PCの20%程度に縮小
   .top-heroはflex:1で残りスペースを常に埋めるため、padding-bottomだけでは
   間隔が変わらない。flex:noneでコンテンツ量に応じた高さにし、
   .page-top側で画面内中央配置に切り替えて対応する */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-top {
    justify-content: center;
  }
  .top-hero {
    flex: none;
    padding: 10vh 0;
  }

  /* 固定値 margin-left:-5em がタブレット幅ではみ出すため一旦リセット */
  .top-index__btn--room {
    margin-left: 0;
  }
}