/* はじめてのギター道具帖：木の色と、夕方の部屋のような温かい色 */
:root {
  --bg:#fbf6ee; --paper:#fffdf8; --ink:#3a2a1e; --muted:#7a6a5c;
  --wood:#9a5b2e; --wood-dark:#5a3519; --accent:#c8783a; --leaf:#4f7a5a;
  --line:#ead9c3; --card:#f6ecdf;
}
* { box-sizing:border-box; }
body {
  margin:0; color:var(--ink); line-height:1.9;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  background:
    radial-gradient(circle at 10% 0%, #fde9cf 0, transparent 40%),
    radial-gradient(circle at 100% 30%, #f6e3cc 0, transparent 35%),
    var(--bg);
}
main { max-width:740px; margin:0 auto; padding:0 16px 64px; }
a { color:var(--wood); }

/* 上の帯（全ページ共通） */
.site { margin:0 -16px 20px; padding:14px 16px; font-weight:bold;
  background:repeating-linear-gradient(100deg, #6b4024 0 14px, #74462a 14px 22px, #663c21 22px 40px);
  border-bottom:4px solid var(--accent); }
.site a { color:#fff7ea; text-decoration:none; display:inline-flex; align-items:center; gap:10px; letter-spacing:.04em; }
.site a::before { content:""; width:22px; height:54px; background:url(guitar.svg) center/contain no-repeat; transform:rotate(-18deg); margin:-14px 0; }

/* トップの大きな絵の所 */
.hero { position:relative; margin:0 -16px 8px; padding:40px 20px 36px; overflow:hidden; color:#fff7ea;
  background:
    radial-gradient(circle at 78% 30%, rgba(255,214,150,.55) 0, transparent 45%),
    linear-gradient(160deg, #7a4325 0%, #a5602f 45%, #d98f4a 100%); }
.hero::after { content:""; position:absolute; right:-10px; bottom:-40px; width:210px; height:430px;
  background:url(guitar.svg) center/contain no-repeat; transform:rotate(16deg); filter:drop-shadow(0 12px 18px rgba(40,20,5,.45)); }
.hero h1 { position:relative; z-index:1; color:#fff7ea; font-size:32px; margin:0 0 10px; max-width:62%; text-shadow:0 2px 8px rgba(60,25,5,.35); }
.hero p { position:relative; z-index:1; max-width:58%; margin:0 0 6px; font-size:15px; }
.hero .notes { position:absolute; left:58%; top:18px; font-size:22px; opacity:.55; letter-spacing:10px; }
@media (max-width:520px){
  .hero { padding:28px 16px 140px; }
  .hero h1, .hero p { max-width:100%; }
  .hero h1 { font-size:26px; }
  .hero::after { width:120px; height:250px; right:6px; bottom:-60px; }
  .hero .notes { left:auto; right:130px; top:auto; bottom:40px; }
}

/* 文字 */
h1 { font-size:27px; line-height:1.5; margin:8px 0 8px; color:var(--wood-dark); }
h2 { font-size:21px; color:var(--wood-dark); margin:48px 0 14px; padding:6px 0 6px 14px;
  border-left:6px solid var(--accent); background:linear-gradient(90deg, #f7e6d1, transparent); border-radius:2px; }
h3 { font-size:17px; margin:24px 0 6px; color:var(--wood); }
.by { font-size:14px; color:var(--muted); }
.by::before { content:"✎ "; }
ol li, ul li { margin:4px 0; }
strong { color:var(--wood-dark); }

/* PR表記 */
.pr { display:inline-block; border:1px solid var(--accent); color:var(--accent); background:#fff; font-size:12px; padding:2px 10px; border-radius:999px; }
.prnote { font-size:13px; color:var(--muted); margin:8px 0 24px; }

/* 箱 */
.card { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:16px 0; box-shadow:0 2px 0 var(--line); }
.mine { background:#fff3dc; border:1px solid #f0d6a8; border-left:6px solid var(--accent); padding:14px 16px; border-radius:10px; margin:18px 0; }
.mine::before { content:"🎸 わたしの愛用品"; display:block; font-size:12px; font-weight:bold; color:var(--accent); margin-bottom:4px; }
.next { font-size:14px; background:var(--card); border-radius:10px; padding:12px 14px; }
.cta { display:block; text-align:center; background:var(--accent); color:#fff; font-weight:bold; text-decoration:none; padding:14px; border-radius:10px; margin:24px 0; }

/* トップの記事の一覧 */
.list { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin-top:8px; }
.list a { position:relative; display:block; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:16px 16px 16px 66px; color:var(--ink); text-decoration:none; box-shadow:0 3px 0 var(--line); transition:transform .15s, box-shadow .15s; }
.list a:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--line); }
.list a::before { content:"🎵"; position:absolute; left:14px; top:16px; width:40px; height:40px; display:grid; place-items:center;
  font-size:22px; background:var(--card); border-radius:50%; }
.list a[href="komono.html"]::before { content:"🎒"; }
.list a[href="tuning.html"]::before { content:"🎵"; }
.list a[href="capo.html"]::before { content:"🎸"; }
.list a[href="gen-futosa.html"]::before { content:"✋"; }
.list a[href="shitsudo.html"]::before { content:"💧"; }
.list a[href="stand.html"]::before { content:"🪵"; }
.list a[href="gen-koukan.html"]::before { content:"🔧"; }
.list a strong { color:var(--wood-dark); display:block; line-height:1.5; margin-bottom:4px; }
.list a span { font-size:13px; color:var(--muted); }

footer { font-size:12px; color:var(--muted); margin-top:56px; border-top:2px dashed var(--line); padding-top:16px; }
.link-slot { display:none; } /* リンクのコードが入るまでの目印。読む人には見せない */