html { scroll-behavior: smooth; }
body { color: #333333; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer.open { max-height: 400px; }
.faq-toggle.open svg { transform: rotate(180deg); }
/* 英字ラベル（参考サイト風） */
.en-label { font-family: 'Montserrat', sans-serif; letter-spacing: .28em; font-weight: 700; }
/* 見出しの左アクセントバー */
.title-bar { position: relative; display: inline-block; padding-left: 22px; color: rgb(34, 95, 149); }
.title-bar::before{ content:''; position:absolute; left:0; top:50%; width:10px; height:10px; background:#1e93fa; transform: translateY(-50%) rotate(45deg); }
/* 装飾用ドット背景 */
.dot-bg { background-image: radial-gradient(rgba(30,147,250,.22) 1px, transparent 1px); background-size: 14px 14px; opacity: 0.3; }
/* ボタンの斜めシェブロン（参考サイト風の片矢印） */
.btn-arrow::after{ content:''; display:inline-block; width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform: rotate(45deg); margin-left: 14px; vertical-align: middle; }
/* 斜めカット */
.clip-angle { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%); }
/* 波区切り */
.wave-divider { position:absolute; left:0; right:0; bottom:-1px; line-height:0; }

/* ヒーロー フェードインアニメーション（2秒後に発火） */
@keyframes hero-fade-in-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-fade-in {
  opacity: 0;
  animation: hero-fade-in-up 0.8s ease-out 1.2s forwards;
}

/* スマホ専用改行（768px以上では非表示） */
.br-sp { display: none; }
@media (max-width: 767px) {
  .br-sp { display: block; }
}

/* ステージ番号の円（letter-spacingの分だけ左にpadding追加して視覚的に中央揃え） */
.stage-circle { padding-left: .28em; }

/* フローティングウィジェット アニメーション */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in-up 0.25s ease-out both; }

/* Mobile: background-attachment fixed fallback (iOS does not support fixed) */
@supports (-webkit-touch-callout: none) {
  #features { background-attachment: scroll !important; }
}
@media (max-width: 767px) {
  #features { background-attachment: scroll !important; }
  /* フローティングバーの高さ分、下部に余白を確保 */
  body { padding-bottom: 52px; }
}