/* 画面を余白なしで使う */
html, body { height: 100%; margin: 0; }

/* ヒーロー全体：スマホで物理的な全画面高 */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;                /* 100vh でも可。svhはアドレスバー対策 */
  overflow: hidden;
  background: #000;              /* 画像外側の色（黒で引き締め） */
}

/* 横スクロールさせるレール */
.hero-track {
  position: absolute;
  inset: 0;
  overflow-x: auto;              /* ←横スクロール */
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;  /* 慣性スクロール */
  touch-action: pan-x;           /* 横スワイプを優先 */
}
/* スクロールバーを隠す（iOS/Android */
.hero-track::-webkit-scrollbar { display: none; }

/* パノラマ画像：高さを画面に合わせ、横は元サイズのまま（横に長ければスワイプ可能） */
.hero-track img {
  height: 100%;
  width: auto;
  display: inline-block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;          /* 画像自体をタップしてもスワイプが止まらないように */
}

/* 文字は常に中央固定 */
.hero-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  text-align: center;
  padding: 0 16px;               /* 端末幅が狭いときの余白 */
  text-shadow: 0 0 8px rgba(0,0,0,.75);
}
.hero-text h1 { margin: 0 0 .25em; font-size: clamp(22px, 5vw, 36px); }
.hero-text p  { margin: 0;       font-size: clamp(14px, 3.6vw, 18px); }

/* 本文（お好みで） */
.content { padding: 20px 16px 60px; }


	
/* ボタン設定 ---------------------------------------------------------- */

/* 共通 */
.btn-row {
  display: flex;
  gap: 16px;         /* ボタン間の余白 */
  justify-content: center;
}

.btn{
 padding:12px 18px; border-radius:9999px; border:1px solid var(--line);
  font-weight:700; background:#f8fafc; color:#0f172a;
}


.btn-primary{ background:#22ff33; border-color:#0f172a }
.btn-sub{ background:#fff233  }
.btn-ghost{ background:#fffff  }