/* ==========================================================================
   GRAY EC — トップページ デザイン刷新（2026-09-29）
   既存の theme.css・styles.css は変更せず、上から当てる差分のみ。
   ========================================================================== */

/* --- 1. 質感：グレイン ---------------------------------------------------
   単色の暗い面はデジタル特有の「のっぺり」が出る。極薄のノイズを一枚被せる。 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9;
  pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 2. 影：背景の色味を乗せる -------------------------------------------
   純黒の影は浮く。背景 #161819 の寒色寄りの色を影にも通す。 */
:root {
  --shadow: 0 18px 50px -12px rgba(10, 13, 16, .62), 0 2px 8px -2px rgba(10, 13, 16, .5);
  --shadow-accent: 0 16px 40px -14px rgba(232, 110, 58, .38);
}

/* --- 3. 見出しの詰め ------------------------------------------------------
   Newsreader は素のままだと字間が空いて締まらない。大きい字ほど詰める。 */
h1, h2 { letter-spacing: -0.02em; }
.hero h1.hero-jp { letter-spacing: 0.005em; }   /* 和文は詰めすぎない */
h3 { letter-spacing: -0.01em; }
.eyebrow { letter-spacing: .18em; font-size: 11px; }

/* --- 4. ヒーロー：視線の重み ---------------------------------------------- */
.hero .hero-en { opacity: .72; letter-spacing: .24em; }
.hero .lede { max-width: 27em; }                 /* 約65字で折り返す */
.hero-cta { margin-top: 32px; gap: 14px; }

/* 初回表示のずらし込み。一斉に出さず、上から順に重みをつける */
@media (prefers-reduced-motion: no-preference) {
  .hero-grid > div > .eyebrow,
  .hero-grid > div > h1,
  .hero-grid > div > .hero-en,
  .hero-grid > div > .lede,
  .hero-grid > div > .hero-cta,
  .hero-grid > div > .hero-stats {
    animation: gr-rise 760ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero-grid > div > h1        { animation-delay: 70ms; }
  .hero-grid > div > .hero-en  { animation-delay: 140ms; }
  .hero-grid > div > .lede     { animation-delay: 200ms; }
  .hero-grid > div > .hero-cta { animation-delay: 270ms; }
  .hero-grid > div > .hero-stats { animation-delay: 340ms; }
}
@keyframes gr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- 5. ボタン：押した実感 ------------------------------------------------ */
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary { box-shadow: var(--shadow-accent); }
.btn-primary:active { box-shadow: 0 6px 18px -10px rgba(232, 110, 58, .5); }

/* --- 6. 提供店舗：3等分をやめる ------------------------------------------
   均等3カラムは最も既視感の強い型。先頭を主役にして重みを変える。 */
@media (min-width: 881px) {
  .store-links { grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; }
  .store-links a:first-child { padding: 22px 24px; background: var(--c-surface-2); }
  .store-links a:first-child b { font-size: 16px; }
}
.store-links a {
  position: relative; overflow: hidden;
  transition: border-color 260ms ease, background 260ms ease, transform 260ms cubic-bezier(.16,1,.3,1);
}
.store-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* ホバーでアクセントの線が左から伸びる */
.store-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 380ms cubic-bezier(.16,1,.3,1);
}
.store-links a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .store-links a:hover { transform: none; }
  .store-links a::after { transition: none; }
}

/* --- 7. 余白のリズム ------------------------------------------------------
   上下同値だと目には下が詰まって見える。下を少し厚くする。 */
section { padding: var(--pad-section) 0 calc(var(--pad-section) * 1.15); }
.stores-trust { padding-top: calc(var(--pad-section) * .78); }

/* --- 8. 現在地の表示 → styles.css へ移動（全ページで同じ見た目にするため） --- */

/* --- 9. フッター見出し ---------------------------------------------------- */
.foot-col h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-muted); font-weight: 400;
}

/* --- 10. ニュースレター：入力欄の当たりを広く ----------------------------- */
.news-box form input { transition: border-color 220ms ease, background 220ms ease; }
.news-box form input:hover { border-color: var(--c-muted); }

/* --- 11. 和文見出しの改行位置 ---------------------------------------------
   既存の安全な改行指定は 560px 以下にしか当たっておらず、
   561〜880px で「まだ知／らない」と語中で折れていた。適用範囲を広げる。 */
@media (max-width: 880px) {
  .hero-title-break { display: block; }
  .hero-title-comma { display: none; }
  .hero-title-line  { white-space: nowrap; }
}