/* ================================================
   base.css — リセット・共通スタイル
   シニアニコニコサポートセンター
================================================ */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ── リセット ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── ベース ── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--n800);
  background: var(--n50);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--g700); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }

/* ── ラッパー ── */
.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 60px;
}

/* ── セクション共通 ── */
.sec { padding: 26px 18px; }
.sec + .sec { padding-top: 0; }

/* ── セクション eyebrow ── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g700);
  margin-bottom: 7px;
}
.eyebrow::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--g500);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── 見出し ── */
.ttl {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--n800);
  line-height: 1.4;
  margin-bottom: 5px;
}
.desc {
  font-size: 12px;
  color: var(--n400);
  line-height: 1.8;
  margin-bottom: 18px;
}

/* ── divider ── */
.divider {
  height: 1px;
  background: var(--n100);
  margin: 0 18px;
}

/* ── テキストユーティリティ ── */
.rnd { font-family: 'M PLUS Rounded 1c', sans-serif; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }
.text-green { color: var(--g700); }
.text-muted { color: var(--n400); }

/* ── アニメーション ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}
@keyframes float-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(26,122,60,.55); }
  50%       { box-shadow: 0 6px 26px rgba(26,122,60,.8); }
}