/***** 基本ボタン *****/
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.25rem; border-radius: 9999px;
  background: #059669; color: #fff; text-decoration: none; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: background-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.btn-primary:hover { background: #047857; }
.btn-primary:focus { outline: none; box-shadow: 0 0 0 3px rgba(16,185,129,.35); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.25rem; border-radius: 9999px;
  background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0;
  font-weight: 600; text-decoration: none; transition: background-color .2s ease;
}
.btn-secondary:hover { background: #D1FAE5; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.25rem; border-radius: 9999px;
  background: rgba(255,255,255,.8); color: #065F46; border: 1px solid #A7F3D0;
  text-decoration: none; transition: background-color .2s ease, backdrop-filter .2s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: #fff; }

.btn-ghost-white {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.25rem; border-radius: 9999px;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.3);
  text-decoration: none; transition: background-color .2s ease;
}
.btn-ghost-white:hover { background: rgba(255,255,255,.2); }

.btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.25rem; border-radius: 9999px;
  background: #fff; color: #065F46; text-decoration: none; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.btn-white:hover { background: #ECFDF5; }

/***** セクションヘッド *****/
.section-head { text-align: center; margin-bottom: 3.5rem; }
.section-title { font-size: clamp(1.5rem, 2vw + 1rem, 1.875rem); font-weight: 800; }
.section-desc { margin-top: .5rem; color: #4B5563; }

/***** カード *****/
.card {
  background: #fff; border-radius: 1rem; padding: 1rem; border: 1px solid #F3F4F6;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .2s ease;
}
@media (min-width: 768px){ .card { padding: 1rem; } }
.card:hover { box-shadow: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05); }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img { transform: scale(1.05); }
.badge { margin-left: .5rem; font-size: .75rem; padding: .125rem .5rem; border-radius: 9999px; background: #D1FAE5; color: #065F46; }

/***** フィーチャー *****/
.feature-item { background: #ECFDF5; border-radius: 1rem; padding: 1.5rem; border: 1px solid #D1FAE5; }
.feature-icon { width: 3rem; height: 3rem; border-radius: 9999px; background: #D1FAE5; color: #065F46; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.feature-title { margin-top: .75rem; font-weight: 600; }
.feature-desc { margin-top: .25rem; color: #4B5563; }

/***** ノート *****/
.note-card { background: #fff; border-radius: 1rem; padding: 1.5rem; border: 1px solid #D1FAE5; }
.note-title { font-size: .9rem; font-weight: 600; color: #047857; }
.note-desc { margin-top: .25rem; color: #374151; }
.note-img { margin-top: 1rem; width: 100%; height: 11rem; object-fit: cover; border-radius: .75rem; }

/***** HowTo *****/
.howto-step { position: relative; background: #fff; border-radius: 1rem; padding: 1.5rem; border: 1px solid #F3F4F6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.step-index { position: absolute; top: -0.75rem; left: -0.75rem; width: 2rem; height: 2rem; border-radius: 9999px; background: #059669; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.step-title { font-weight: 600; }
.step-desc { margin-top: .25rem; color: #4B5563; }

/***** FAQ *****/
.faq-item { background: #fff; border-radius: .75rem; border: 1px solid #E5E7EB; padding: 1rem; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; }
.faq-panel { margin-top: .75rem; color: #4B5563; }

/***** Reveal animation *****/
.reveal { opacity: 0; transform: translateY(12px); transition: all .6s cubic-bezier(.2,.65,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/***** アンカーのオフセット（固定ヘッダー対策） *****/
main section { scroll-margin-top: 90px; }

/***** モバイルメニューのアニメーション（簡易） *****/
#mobileNav { transition: height .3s ease; }

/***** Sticky CTA transition *****/
#stickyCta { transition: transform .4s ease, opacity .4s ease; }