/* =========================================================
   あくめくん Design System (base)
   - 全ページ共通のトークン / リセット / 共通部品
   - 色やフォントを変えるときはまず :root を編集
   ========================================================= */

:root {
  /* brand */
  --pink:        #ff4f9a;
  --pink-2:      #ff86bf;
  --pink-soft:   #ffe4f1;
  --pink-pale:   #fff4f9;
  --violet:      #8757ff;
  --violet-2:    #b69bff;
  --violet-deep: #5a2bd4;
  --violet-soft: #efe8ff;
  --plum:        #2a1540;   /* 本文色 */
  --plum-2:      #4b2e66;
  --muted:       #7d6a92;
  --line:        #f0dcea;
  --white:       #ffffff;
  --bg:          #fff7fb;

  /* dark (R18 / reader) */
  --night:       #150b22;
  --night-2:     #1e1030;
  --night-3:     #2a1742;
  --night-line:  rgba(214,190,255,.14);
  --night-text:  #f4ecff;
  --night-muted: #b7a6cf;

  --grad-brand:  linear-gradient(115deg, #ff5fa2 0%, #d56cff 52%, #8757ff 100%);
  --grad-brand-v:linear-gradient(180deg, #ff6aa9 0%, #a262ff 100%);
  --grad-soft:   linear-gradient(160deg, #fff0f7 0%, #f3ecff 100%);

  /* type */
  --f-body: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --f-pop:  'Mochiy Pop One', 'M PLUS Rounded 1c', sans-serif;
  --f-en:   'Fredoka', 'M PLUS Rounded 1c', sans-serif;

  /* shape */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;

  --sh-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px -14px rgba(120,60,200,.28), 0 2px 6px rgba(120,60,200,.06);
  --sh-pop:  0 5px 0 #e9d8ff, 0 18px 36px -14px rgba(135,87,255,.45);
  --sh-pink: 0 5px 0 #d8367c, 0 16px 30px -12px rgba(255,79,154,.6);

  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  font-family: var(--f-body);
  font-weight: 500;
  color: var(--plum);
  background: var(--bg);
  line-height: 1.8;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--violet-2); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  --bh: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--bh);
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .06em;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn svg { flex-shrink: 0; }
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-pink); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #d8367c, 0 22px 36px -12px rgba(255,79,154,.65); }
.btn-primary:active { box-shadow: 0 2px 0 #d8367c; }
.btn-white { background: #fff; color: var(--violet-deep); box-shadow: var(--sh-pop); }
.btn-white:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--plum); border: 2px solid var(--line); }
.btn-ghost:hover { border-color: var(--violet-2); color: var(--violet-deep); }
.btn-sm { --bh: 44px; padding: 0 18px; font-size: .84rem; gap: 8px; }

/* ---------- service buttons (行き先ごとに色を固定する) ----------
   押せる場所は必ずボタンの形にし、文字は行き先を書く。
   .btn-works   作品 (R18作品一覧 / 試し読み)   ピンクのグラデ   例: 作品一覧へ
   .btn-yt      YouTube                         赤               例: YouTubeで見る
   .btn-x       X                               黒               例: Xでフォロー
   .btn-discord Discord (あくめくん秘密基地)    ブラープル       例: 秘密基地に参加
   .btn-patreon Patreon                         コーラル         例: Patreonで支援する
   .btn-mark    ボタン内の小さな目印 (18+ など)
   ------------------------------------------------------------------ */
.btn-works, .btn-yt, .btn-x, .btn-discord, .btn-patreon { color: #fff; }
.btn-works   { --sc: #d62f78; background: linear-gradient(115deg, #ff7bb4 0%, #ff4f9a 48%, #e8388c 100%); }
.btn-yt      { --sc: #b3001f; background: #ff0033; }
.btn-x       { --sc: #000;    background: #16161d; }
.btn-discord { --sc: #3b44b8; background: #5865f2; }
.btn-patreon { --sc: #c9212c; background: #ff5a4e; }
.btn-works, .btn-yt, .btn-x, .btn-discord, .btn-patreon {
  box-shadow: 0 4px 0 var(--sc), 0 14px 26px -12px color-mix(in srgb, var(--sc) 80%, transparent);
}
.btn-works:hover, .btn-yt:hover, .btn-x:hover, .btn-discord:hover, .btn-patreon:hover {
  transform: translateY(-2px); filter: brightness(1.07);
  box-shadow: 0 6px 0 var(--sc), 0 20px 30px -12px color-mix(in srgb, var(--sc) 85%, transparent);
}
.btn-works:active, .btn-yt:active, .btn-x:active, .btn-discord:active, .btn-patreon:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sc); }
.btn-mark {
  display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 6px;
  background: rgba(255,255,255,.95); color: #e8388c;
  font-family: var(--f-en); font-weight: 700; font-size: .72rem; letter-spacing: .02em; line-height: 1;
}
.btn-x .btn-mark { color: #16161d; }

/* ---------- section heading ---------- */
.sec { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.sec-head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-en {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--violet);
  text-shadow: 4px 4px 0 var(--pink-soft);
}
.sec-en .dot { color: var(--pink); }
.sec-ja {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 14px;
  font-size: .92rem; font-weight: 800; letter-spacing: .24em;
  color: var(--plum-2);
}
.sec-ja::before, .sec-ja::after { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--grad-brand); }

/* ---------- chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  line-height: 1.5;
  background: var(--violet-soft); color: var(--violet-deep);
}

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
}