/* おかべゆうにゃ 公式サイト 共通スタイル（スマホ優先） */
:root{
  --green:#2f4a2c;      /* 玉露色 */
  --green-d:#1d2f1b;
  --leaf:#7fa35a;
  --gold:#c9a24a;
  --ink:#141414;
  --paper:#f6f3ea;
  --white:#fff;
  --sunset:#f08a3c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.8;font-size:16px;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:inherit}
.display{font-family:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.3}

/* ヘッダー */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--green-d);color:var(--white);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
}
.logo{text-decoration:none;font-size:18px}
.logo span{color:var(--gold)}
.nav{display:flex;gap:4px}
.nav a{
  text-decoration:none;font-size:12px;font-weight:700;
  padding:6px 8px;border-radius:999px;opacity:.85;
}
.nav a[aria-current="page"]{background:var(--gold);color:var(--ink);opacity:1}

/* 共通レイアウト */
main{max-width:640px;margin:0 auto}
section{padding:40px 20px}
.label{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.15em;
  color:var(--green);border-bottom:2px solid var(--gold);margin-bottom:10px;
}
h1,h2{color:var(--green-d)}
h2{font-size:26px;margin-bottom:16px}
p+p{margin-top:12px}
.dark{background:var(--green);color:var(--white)}
.dark h2,.dark .label{color:var(--white)}
.dark .label{border-color:var(--gold)}

/* ボタン */
.btn{
  display:block;text-align:center;text-decoration:none;font-weight:700;
  background:var(--ink);color:var(--white);
  padding:14px 18px;border-radius:12px;margin-top:12px;
  box-shadow:0 4px 0 var(--gold);
}
.btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 var(--green-d)}
.btn.disabled{background:#bbb;box-shadow:none;color:#555;pointer-events:none}

/* ヒーロー（トップ） */
.hero{position:relative;color:var(--white);padding:0}
.hero img{width:100%;height:78vh;max-height:760px;object-fit:cover;object-position:center 20%}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,rgba(20,30,18,.9) 100%);
}
.hero-text{position:absolute;left:20px;right:20px;bottom:28px;z-index:2}
.hero-text .tag{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.1em}
.hero-text h1{color:var(--white);font-size:40px;margin:4px 0 8px}
.hero-text p{font-size:15px}

/* 吹き出し（JK口調） */
.speech{
  position:relative;background:var(--white);color:var(--ink);
  border:2px solid var(--ink);border-radius:16px;padding:14px 16px;font-weight:700;
}
.speech::before{
  content:"";position:absolute;left:24px;top:-12px;
  border:10px solid transparent;border-bottom-color:var(--ink);border-top:0;
}

/* 曲カード */
.song{
  background:var(--white);border-radius:16px;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.08);margin-bottom:24px;
}
.song-body{padding:16px}
.song .no{font-size:12px;font-weight:700;color:var(--leaf)}
.song h3{font-size:20px;color:var(--green-d)}
.song .status{
  display:inline-block;font-size:12px;font-weight:700;
  background:var(--paper);color:var(--green-d);border-radius:999px;padding:2px 10px;margin:6px 0;
}
.links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.links .btn{margin:0;font-size:14px;padding:10px}

/* プロフィール表 */
.prof{width:100%;border-collapse:collapse;margin-top:12px}
.prof th,.prof td{text-align:left;padding:10px 6px;border-bottom:1px solid #ddd;vertical-align:top}
.prof th{width:34%;font-size:13px;color:var(--green)}

/* ステップ */
.steps{list-style:none;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding:0 0 18px 48px;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;
  background:var(--gold);color:var(--ink);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.steps b{display:block}

/* メリットカード */
.cards{display:grid;gap:12px}
.card{background:var(--white);color:var(--ink);border-radius:14px;padding:16px;border-left:6px solid var(--gold)}
.card b{display:block;color:var(--green-d);font-size:17px}

/* 注意書き */
.note{
  font-size:13px;background:#fff8e6;border:1px dashed var(--gold);
  border-radius:10px;padding:12px;margin-top:16px;
}

/* SNS */
.sns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sns .btn{margin:0}

/* フッター */
.site-footer{
  background:var(--ink);color:#ccc;font-size:12px;text-align:center;
  padding:28px 16px 36px;
}
.site-footer p+p{margin-top:6px}