/* ===== リセット & 基礎 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #FAF8F5;
  color: #2C2C2C;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ===== デザイン変数 ===== */
:root {
  --cream:       #FAF8F5;
  --white:       #FFFFFF;
  --text-dark:   #2C2C2C;
  --text-mid:    #5A5A5A;
  --text-light:  #9A9A9A;
  --border:      #E8E4DF;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.12);
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --accent:      #2980af;
  --accent-pale: #E4F4FA;
  --gold:        #F4804A;
}

/* ===== コンテナ ===== */
.container { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px; }
.container--wide { max-width: 960px; }

/* ===== セクション共通 ===== */
.section { padding: 64px 0; }
.section--sm { padding: 40px 0; }

/* ===== 見出し ===== */
.heading-serif {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-weight: 600;
  line-height: 1.3;
}
.heading-xl { font-size: clamp(28px, 6vw, 48px); }
.heading-lg { font-size: clamp(22px, 4vw, 36px); }
.heading-md { font-size: clamp(18px, 3vw, 24px); }

/* ===== テキストカラー ===== */
.text-mid   { color: var(--text-mid); }
.text-light { color: var(--text-light); }
.text-center { text-align: center; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }

/* ===== カード ===== */
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 28px;
}

/* ===== ボタン ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: var(--radius-xl);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  letter-spacing: 0.04em;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, #00afcc 100%);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(41,128,175,0.35);
}
.btn--primary:hover { box-shadow: 0 6px 24px rgba(41,128,175,0.45); transform: translateY(-1px); }
.btn--gold {
  background: linear-gradient(135deg, #F4804A 0%, #E06030 100%);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(244,128,74,0.35);
}
.btn--gold:hover { box-shadow: 0 6px 24px rgba(244,128,74,0.45); transform: translateY(-1px); }
.btn--outline {
  border: 2px solid var(--border);
  color: var(--text-mid);
  background: var(--white);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--full { width: 100%; }
.btn--lg { padding: 20px 48px; font-size: 18px; }
.btn:disabled { opacity: 0.45; pointer-events: none; }

/* ===== フォーム ===== */
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-label { font-size: 14px; font-weight: 600; color: var(--text-mid); }
.form-label span { color: #C0392B; margin-left: 4px; }
.form-input {
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: inherit;
  background: var(--white);
  color: var(--text-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  width: 100%;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41,128,175,0.12);
}
.form-input::placeholder { color: var(--text-light); }
select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239A9A9A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; }

/* ===== バッジ ===== */
.badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.badge--accent { background: var(--accent-pale); color: var(--accent); }
.badge--gold   { background: #FEF2E8; color: var(--gold); }

/* ===== 区切り線 ===== */
.divider { height: 1px; background: var(--border); margin: 28px 0; }

/* ===== ユーティリティ ===== */
.mt-4  { margin-top:  4px; }
.mt-8  { margin-top:  8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8  { margin-bottom:  8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-8  { gap:  8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

/* ===== プログレスバー ===== */
.progress-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
}
.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.progress-bar-bg {
  height: 6px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #00afcc);
  border-radius: 100px;
  transition: width 0.4s ease;
}

/* ===== アニメーション ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}
.animate-fadein    { animation: fadeIn 0.5s ease both; }
.animate-fadeinup  { animation: fadeInUp 0.5s ease both; }
.animate-pulse     { animation: pulse 2s ease-in-out infinite; }

/* ===== ローディング ===== */
.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== ヘッダー（共通） ===== */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  text-align: center;
}
.site-header__logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}

/* ===== フッター（共通） ===== */
.site-footer {
  background: #F0EDE8;
  border-top: 1px solid var(--border);
  padding: 32px 20px;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
}
.site-footer a { color: var(--text-light); text-decoration: underline; }
.site-footer a:hover { color: var(--accent); }

/* ===== レスポンシブ ===== */
@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .card    { padding: 20px; }
  .btn--lg { padding: 18px 32px; font-size: 16px; }
}