/* home.css — index.html 専用スタイル（ヒーロー） */
/* ゲーム用のスタイルは css/game.css に移動しました */

@media (max-width: 600px) {
  .hero .tagline { margin-bottom: 12px; }
}

.hero {
  position: relative;
  z-index: 2;
  min-height: 0; /* 下に広告が続くので、画面の高さに合わせた余白は取らない */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 5% 10px; /* ハートマンと下の広告の間を詰める（元は40px） */
}

.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.3rem);   /* 小さく（以前は 4.6rem） */
  line-height: 1.05;
  letter-spacing: -1px;                    /* 文字が小さくなったので、詰めすぎない */
  word-spacing: -0.3em;
  margin-bottom: 15px;
}

/* 日本語のキャッチコピー（英語の見出しの下） */
.hero .tagline.tagline-ja {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: clamp(1.05rem, 4.4vw, 1.45rem);
  font-weight: 700;          /* 少し太く。全部の文字が同じフォント・同じ太さで出る */
  letter-spacing: 0.24em;
  opacity: 1;
  text-transform: none;
  word-spacing: normal;
  margin-top: 6px;
}
.hero .tagline.tagline-ja span { display: inline-block; }

.hero .tagline {
  font-size: 1.65rem;
  letter-spacing: 8px;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 20px; /* 元は50px。下の3Dに太陽が入る空があるので詰める */
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- HEARTBEAT-16 開発中のお知らせ（index・昔の雑誌広告ふう） ---------- */
.app-ad {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 90%;
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 20px 7% 16px;
  background: transparent; /* 白い紙をやめて、サイトの背景をそのまま見せる */
  color: #111;
  text-align: center;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.app-ad .ad-head {
  margin: 0 0 36px;
  /* ゴシック体（日本語のコピーと同じ Noto Sans JP）。文字の塗りは、ハートの赤 → 紫 → 未来の青のグラデーション */
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  background: linear-gradient(90deg, #ff4d5e 0%, #9b6cf0 55%, #3fa6e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;   /* 「y」の下がグラデーションの外に切れないように */
  font-size: clamp(1.7rem, 7.6vw, 5rem);   /* ゴシックは横に広いので、スマホでも1行に収まる大きさに */
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 主役の3画面 */
.ad-hero {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 0 22px;
}
.ad-hero img,
.ad-shots img {
  display: block;
  height: auto;
  background: #111;
  border: 4px solid #111;
  border-radius: 16px;
  box-sizing: border-box;
}
.ad-hero img {
  width: 30%;
  max-width: 220px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}
.ad-hero .ad-main {
  position: relative;
  z-index: 1;
  width: 44%;
  max-width: 300px;
  margin: 0 -5%;
  border-width: 5px;
  border-radius: 20px;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24);
}

/* 日本語のコピー（1行） */
.ad-copy {
  margin: 0;
  font-size: clamp(1.05rem, 4.4vw, 1.5rem);
  line-height: 1.8;
  letter-spacing: 0.14em;
  font-weight: 500;
}
/* 句読点の位置でだけ改行させる */
.ad-copy span { display: inline-block; }

/* 本文 */
.ad-body {
  max-width: 34em;
  margin: 32px auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 2;
}
.ad-body p { margin: 0 0 1.1em; }
.ad-body p:last-child { margin-bottom: 0; }
/* 改行は文節の切れ目だけ。長い文は行頭から始め、行の長さをそろえる */
.ad-body span { display: inline-block; }
.ad-body .s { max-width: 100%; vertical-align: top; text-wrap: balance; }

/* 小さい画面の列：スマホは横スワイプ */
/* 主役の3画面の中央はデモ曲の動画。SOUND ボタンはその下に */
.ad-hero video.ad-main { display: block; height: auto; background: #111; border: 5px solid #111; box-sizing: border-box; }
.ad-sound {
  margin: 0 0 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.ad-sound .ds-icon { width: 8px; height: 8px; border-radius: 50%; background: #ff4d5e; }
.ad-sound[aria-pressed="true"] .ds-icon { animation: adPulse 0.9s ease-in-out infinite; }
@keyframes adPulse { 50% { transform: scale(1.6); opacity: 0.5; } }

/* プロダクトページへのボタン（お知らせの締め） */
.ad-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 36px 0 0;
  padding: 14px 32px 14px calc(32px + 0.2em);   /* 字間のぶん左を足して、文字をボタンのまん中に */
  border: 2px solid #111;
  border-radius: 2px;
  color: #111;
  text-decoration: none;
  font-family: 'Liberation Mono', 'Courier New', monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  transition: background 0.2s ease, color 0.2s ease;
}
.ad-more:active { background: #111; color: #fff; }
@media (hover: hover) {
  .ad-more:hover { background: #111; color: #fff; }
}

.ad-shots {
  display: flex;
  gap: 16px;
  /* 画面の左右の端まで広げる（広告の余白 5vw + 7vw ぶん外へ出す）。
     最初の1枚は本文の左端にそろえ、続きは画面の端で切れる */
  margin: 36px -12vw 0;
  padding: 0 12vw 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 12vw;
  scrollbar-width: none;
}
.ad-shots::-webkit-scrollbar { display: none; }
.ad-shots figure {
  flex: 0 0 auto;
  width: 34vw;
  max-width: 150px;
  margin: 0;
  scroll-snap-align: start;
}
.ad-shots img { width: 100%; border-width: 3px; border-radius: 12px; }
.ad-shots figcaption {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  font-weight: 500; /* 日本語コピーと同じ太さ */
}
.ad-shots figcaption span { display: inline-block; } /* 長い説明は「・」の後ろで改行 */

/* 締めのロゴ */
.ad-sign { margin: 56px 0 14px; line-height: 0; }
/* HEARTBEAT-16 ロゴ（SVG）：ハート・文字・16 の天地を同じラインにそろえたもの */
.hb-logo { display: inline-block; height: clamp(17px, 4.4vw, 25px); width: auto; color: var(--fg, #111); }
.ad-foot {
  margin: 0;
  font-size: clamp(0.85rem, 3.6vw, 1.05rem);
  opacity: 0.7;
}

@media (min-width: 761px) {
  /* PC：1文を1行に。中央ぞろえで、改行そのものを見せる */
  .ad-body {
    max-width: none;
    margin-top: 36px;
    text-align: center;
    font-size: 1.02rem;
    line-height: 2.3;
    letter-spacing: 0.06em;
  }
  .ad-body p { margin-bottom: 1.6em; }
  .ad-body .s { display: block; }
  .ad-shots {
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 16px;
    margin: 44px 0 0;
    padding: 0;
    overflow: visible;
  }
  .ad-shots figure { width: 17%; max-width: 136px; }
}