:root{
  --bg: #05050f;
  --maxw: 1920px; /* デザインの基準幅 */
}

*{ box-sizing:border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
}

/* ページ全体 */
.page{
  width: 100%;
}

/* 画像の表示ステージ（中央寄せ） */
.stage{
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* full.png をそのまま表示 */
.full{
  display: block;
  width: 100%;
  height: auto;
  image-rendering:auto;
}

/* --- 透明リンクを重ねる時用（将来用） ---
.hotspot{
  position:absolute;
  display:block;
  left: calc(var(--x) * 1%);
  top:  calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height:calc(var(--h) * 1%);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  cursor: pointer;
}
.hotspot:hover{
  box-shadow: 0 0 24px rgba(255, 220, 120, 0.6);
}
*/

/* --- SPだけ少し拡大して見やすくする（世界観は崩さない） --- */
@media (max-width: 640px){
  .stage{
    width: 122%;
    margin-left: -11%;
  }
}

/* 見た目は隠すが、検索・スクリーンリーダーには読ませる */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* LP(index.html) 専用：余計な余白・上書きを防ぐ */
body.lp {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ================================
   フッター透明リンク（世界観保持）
================================ */

/* 共通 */
.hotspot {
  position: absolute;
  display: block;
  bottom: 80px;           /* ★上に上げる（←ここが重要） */
  height: 34px;           /* 文字の当たり判定を少し厚めに */
  cursor: pointer;
  pointer-events: auto;
}

/* 各リンクの横位置と幅（左から順に） */
/* いまのスクショのズレを基準に「右へ」「分散」させた */
.hs-terms {
  left: 30%;
  width: 8%;
}
.hs-law {
  left: 36%;
  width: 16%;
}
.hs-privacy {
  left: 49%;
  width: 14%;
}
.hs-faq {
  left: 62%;
  width: 9%;
}

/* ホバー演出：思考の金グロー */
.hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(212,175,55,0.30) 0%,
    rgba(212,175,55,0.14) 45%,
    rgba(212,175,55,0.0) 75%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.hotspot:hover::after {
  opacity: 1;
}

/* SP微調整（%に戻すとズレるのでpx固定） */
@media (max-width: 640px) {
  .hotspot {
    bottom: 108px;
    height: 38px;
  }
}

/* ================================
   ヘッダー透明リンク（ナビ）
================================ */
.navspot {
  position: absolute;
  display: block;
  top: 78px;              /* ★ヘッダーの高さに合わせる（まずここ） */
  height: 34px;
  cursor: pointer;
  pointer-events: auto;
}

/* ホバー演出：上品な金グロー（フッターより控えめ） */
.navspot::after {
  content: "";
  position: absolute;
  inset: -6px -10px;      /* 少し広めに光らせる */
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(212,175,55,0.22) 0%,
    rgba(212,175,55,0.10) 45%,
    rgba(212,175,55,0.0) 78%
  );
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.navspot:hover::after { opacity: 1; }

/* --- 各リンクの横位置（まず当てにいく初期値） --- */
.nav-journey { left: 33.5%; width: 8%; }
.nav-about   { left: 40%; width: 10%; }
.nav-can     { left: 46%; width: 12%; }
.nav-pricing { left: 55%; width: 9%; }
.nav-trial   { left: 63%; width: 8%; }
.nav-faq     { left: 70%; width: 8%; }

/* SPは上のナビが詰まるので当たり判定を少し広げる */
@media (max-width: 640px) {
  .navspot { top: 22px; height: 38px; }
}

/* ================================
   画像1枚LP用：セクションアンカー
   #journey 等に飛ばすための「見えない目印」
================================ */
.anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 各アンカーの縦位置（%）— まずは仮置き。あとで微調整 */
#top      { top: 0%; }
#journey  { top: 18%; }
#about    { top: 34%; }
#features { top: 52%; }
#pricing  { top: 68%; }
#trial    { top: 88%; }

/* ジャンプの動きをなめらかに */
html {
  scroll-behavior: smooth;
}