/* ANKEN 本体サイト – 共通コンポーネントCSS
   index.html / member.html / contact.html から読み込む。
   複数ページで重複していたスタイルをここに集約。
   ページ固有のスタイルは各ページの <style> に残す。 */

html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  line-break: strict;
}

/* 日本語改行の制御 */
.ja-phrase {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
@supports (word-break: auto-phrase) {
  .ja-auto { word-break: auto-phrase; }
}
.phrase { display: inline-block; max-width: 100%; overflow-wrap: break-word; }

/* Hero gradient（既定値。ページ固有に上書きする場合は各ページの<style>で再定義） */
.hero-bg {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(245,158,11,0.32), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(250,204,21,0.22), transparent 60%),
    linear-gradient(180deg, #0B1221 0%, #101935 60%, #0B1221 100%);
}
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Card hover */
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(245,158,11,0.45); }

/* FAQ accordion */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease; }

/* Step connector line */
@media (min-width: 768px) {
  .step-line::before {
    content: "";
    position: absolute;
    top: 36px;
    left: calc(50% + 40px);
    right: calc(-50% + 40px);
    height: 2px;
    background: linear-gradient(to right, #F59E0B, rgba(245,158,11,0.2));
  }
  .step-item:last-child .step-line::before { display: none; }
}

/* Sticky CTA on mobile */
.sticky-cta { box-shadow: 0 -8px 24px -8px rgba(0,0,0,0.25); }

/* フォーム送信中スピナー & 成功表示フェード */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.8s linear infinite; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s ease both; }