/*
Theme Name: Piano Lovers .jp
Theme URI: https://piano-lovers.jp
Author: Piano Lovers .jp
Description: Anime piano sheet music catalog theme. v3: luxury editorial design — sharp edges, hairlines, wide-tracked serif typography, ivory palette, generous whitespace. Lightweight pure-CSS animated piano hero (no video files).
Version: 3.1.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: pianolovers
*/

:root{
  --bg:#ffffff; --bg2:#f6f6f8; --panel:#ffffff; --line:#e7e7ec; --line-dark:#cbcbd3;
  --gold:#a58a4d; --gold-soft:#c4ab74; --gold-pale:#f1ece0; --violet:#847198;
  --ink:#1e1b24; --sub:#8d8798; --easy:#4a8f6d; --inter:#b07f35;
  --shadow:0 12px 34px rgba(30,27,36,.06);
  --shadow-lg:0 26px 60px rgba(30,27,36,.11);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter','Hiragino Sans','Noto Sans JP',sans-serif;background:var(--bg);color:var(--ink);line-height:1.85;font-weight:300;-webkit-font-smoothing:antialiased;letter-spacing:.015em;}
img{max-width:100%;height:auto;}
a{color:var(--gold);}
::selection{background:rgba(165,138,77,.16);}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.serif{font-family:'Cormorant Garamond','Noto Serif JP',serif;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;height:76px;gap:36px;}
.logo{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-size:1.5rem;font-weight:500;white-space:nowrap;letter-spacing:.06em;}
.logo a{color:var(--ink);text-decoration:none;transition:opacity .3s;}
.logo a:hover{opacity:.65;}
.logo .dot{color:var(--gold);}
.nav .links{display:flex;gap:38px;flex:1;justify-content:center;list-style:none;}
.nav .links a{position:relative;color:var(--ink);text-decoration:none;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;padding:6px 0;font-weight:400;transition:color .3s;}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.nav .links a:hover{color:var(--gold);}
.nav .links a:hover::after{transform:scaleX(1);}
.lang-switch{font-size:.7rem;letter-spacing:.18em;color:var(--sub);border:1px solid var(--line-dark);padding:6px 16px;background:transparent;transition:border-color .3s;}
.lang-switch:hover{border-color:var(--gold);}
.lang-switch ul{list-style:none;display:inline;}
.lang-switch li{display:inline;margin:0 4px;}
.lang-switch a{text-decoration:none;color:var(--sub);text-transform:uppercase;transition:color .25s;}
.lang-switch a:hover{color:var(--gold);}
.lang-switch .current-lang a{color:var(--ink);font-weight:500;}

/* ---------- hero ---------- */
.hero{position:relative;padding:120px 0 0;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 90% 55% at 50% -12%,rgba(132,113,152,.07),transparent 62%),
             radial-gradient(ellipse 50% 40% at 86% 10%,rgba(165,138,77,.06),transparent 60%),var(--bg);}
.kicker{font-size:.66rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:28px;font-weight:400;text-indent:.5em;}
.hero h1{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:clamp(2.5rem,5.6vw,4.1rem);line-height:1.22;max-width:820px;margin:0 auto 26px;letter-spacing:.03em;}
.hero h1 em{font-style:italic;color:var(--violet);}
.hero .lead{color:var(--sub);max-width:520px;margin:0 auto 46px;font-size:.92rem;line-height:2.1;}
.searchbar{max-width:560px;margin:0 auto;display:flex;background:#fff;border:1px solid var(--line-dark);overflow:hidden;transition:border-color .3s,box-shadow .3s;}
.searchbar:focus-within{border-color:var(--gold);box-shadow:0 16px 40px rgba(165,138,77,.12);}
.searchbar input{flex:1;border:0;background:transparent;color:var(--ink);padding:17px 26px;font-size:.92rem;outline:none;letter-spacing:.02em;}
.searchbar input::placeholder{color:#b8b2c0;}
.searchbar button{border:0;background:var(--ink);color:#fff;font-weight:400;font-size:.72rem;letter-spacing:.3em;text-indent:.3em;padding:0 34px;cursor:pointer;transition:background .3s;text-transform:uppercase;}
.searchbar button:hover{background:var(--gold);}
.hero .tags{margin:26px 0 76px;font-size:.78rem;color:#b3adbc;letter-spacing:.04em;}
.hero .tags a{color:var(--sub);text-decoration:none;margin:0 9px;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .25s,border-color .25s;}
.hero .tags a:hover{color:var(--gold);border-color:var(--gold-soft);}

/* hero entrance (one-shot, cheap) */
.hero .kicker,.hero h1,.hero .lead,.hero .searchbar,.hero .tags{animation:pl-rise .9s var(--ease) both;}
.hero h1{animation-delay:.1s;}
.hero .lead{animation-delay:.2s;}
.hero .searchbar{animation-delay:.3s;}
.hero .tags{animation-delay:.4s;}
@keyframes pl-rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* ---------- animated piano (pure CSS — no video, GPU-friendly transforms only) ---------- */
.piano-stage{position:relative;max-width:1120px;margin:0 auto;}
.pnotes{position:absolute;inset:auto 0 92%;height:130px;pointer-events:none;z-index:3;}
.pnotes span{position:absolute;bottom:0;font-size:1rem;color:var(--gold-soft);opacity:0;animation:pl-float 7.5s linear infinite;will-change:transform,opacity;}
.pnotes .m1{left:9%;animation-delay:0s;}
.pnotes .m2{left:22%;color:var(--violet);animation-delay:1.5s;font-size:.82rem;}
.pnotes .m3{left:38%;animation-delay:3.3s;}
.pnotes .m4{left:55%;color:var(--violet);animation-delay:2.4s;font-size:.78rem;}
.pnotes .m5{left:71%;animation-delay:4.9s;}
.pnotes .m6{left:87%;color:var(--violet);animation-delay:6s;font-size:.88rem;}
@keyframes pl-float{
  0%{opacity:0;transform:translateY(18px) rotate(-4deg);}
  12%{opacity:.75;}
  60%{opacity:.45;}
  100%{opacity:0;transform:translateY(-104px) rotate(7deg);}
}

.keys{display:flex;height:92px;position:relative;max-width:1120px;margin:0 auto;padding:0 28px;filter:drop-shadow(0 -16px 26px rgba(132,113,152,.06));}
.wk{flex:1;background:linear-gradient(180deg,#ffffff 0%,#f1f1f4 100%);border:1px solid #dbdbe1;border-bottom:0;position:relative;
  animation:pl-press 9.8s infinite;transform-origin:top center;will-change:transform;}
.wk+.wk{border-left:0;}
.wk::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(165,138,77,.2),rgba(165,138,77,0) 70%);opacity:0;animation:pl-glow 9.8s infinite;}
/* 黒鍵: 白鍵の中ではなく独立レイヤーに置く(白鍵のtransformアニメーションが
   スタッキングコンテキストを作り、隣の白鍵に黒鍵の右側が隠れる問題の対策) */
.bks{position:absolute;top:0;bottom:0;left:28px;right:28px;z-index:2;pointer-events:none;}
.bk{position:absolute;top:0;width:4.1%;height:56%;background:linear-gradient(180deg,#38323f,#1f1b28);box-shadow:0 3px 7px rgba(30,27,36,.3);animation:pl-bkpress 9.8s infinite;transform-origin:top center;will-change:transform;}
/* stagger: an unhurried arpeggio across the keyboard */
.wk:nth-child(1) ,.wk:nth-child(1)::before{animation-delay:0s;}
.wk:nth-child(2) ,.wk:nth-child(2)::before{animation-delay:.55s;}
.wk:nth-child(3) ,.wk:nth-child(3)::before{animation-delay:1.1s;}
.wk:nth-child(4) ,.wk:nth-child(4)::before{animation-delay:1.65s;}
.wk:nth-child(5) ,.wk:nth-child(5)::before{animation-delay:2.2s;}
.wk:nth-child(6) ,.wk:nth-child(6)::before{animation-delay:2.75s;}
.wk:nth-child(7) ,.wk:nth-child(7)::before{animation-delay:3.3s;}
.wk:nth-child(8) ,.wk:nth-child(8)::before{animation-delay:3.85s;}
.wk:nth-child(9) ,.wk:nth-child(9)::before{animation-delay:4.4s;}
.wk:nth-child(10),.wk:nth-child(10)::before{animation-delay:4.95s;}
.wk:nth-child(11),.wk:nth-child(11)::before{animation-delay:5.5s;}
.wk:nth-child(12),.wk:nth-child(12)::before{animation-delay:6.05s;}
.wk:nth-child(13),.wk:nth-child(13)::before{animation-delay:6.6s;}
.wk:nth-child(14),.wk:nth-child(14)::before{animation-delay:7.15s;}
/* 黒鍵は対応する白鍵の少し後に沈む(裏拍) */
.bks .bk:nth-child(1){animation-delay:.28s;}
.bks .bk:nth-child(2){animation-delay:.83s;}
.bks .bk:nth-child(3){animation-delay:1.93s;}
.bks .bk:nth-child(4){animation-delay:2.48s;}
.bks .bk:nth-child(5){animation-delay:3.03s;}
.bks .bk:nth-child(6){animation-delay:4.13s;}
.bks .bk:nth-child(7){animation-delay:4.68s;}
.bks .bk:nth-child(8){animation-delay:5.78s;}
.bks .bk:nth-child(9){animation-delay:6.33s;}
.bks .bk:nth-child(10){animation-delay:6.88s;}
@keyframes pl-press{
  0%,3.5%,100%{transform:none;}
  1.6%{transform:translateY(3px);}
}
@keyframes pl-bkpress{
  0%,3%,100%{transform:none;}
  1.4%{transform:translateY(2px);}
}
@keyframes pl-glow{
  0%,5%,100%{opacity:0;}
  1.6%{opacity:1;}
}

/* ---------- sections ---------- */
.section{padding:100px 0 0;}
.sec-head{text-align:center;margin-bottom:52px;}
.sec-head .kicker{margin-bottom:14px;}
.sec-head h2{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:2.1rem;letter-spacing:.05em;}
.sec-head h2::after{content:"";display:block;width:1px;height:34px;background:var(--gold-soft);margin:20px auto 0;}
.sec-head p{color:var(--sub);font-size:.86rem;margin-top:8px;letter-spacing:.06em;}

/* ---------- sheet cards ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.card{background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:box-shadow .4s var(--ease),border-color .35s;position:relative;}
.card:hover{border-color:var(--line-dark);}
.card:hover{box-shadow:var(--shadow-lg);z-index:2;}
.card .thumb{display:block;aspect-ratio:16/9;background:var(--bg2) center/cover no-repeat;position:relative;transition:filter .45s;}
.card:hover .thumb{filter:brightness(1.06) saturate(1.04);}
.card .thumb::after{content:"▶";position:absolute;right:12px;bottom:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--gold);border:1px solid rgba(165,138,77,.35);transition:transform .35s var(--ease),background .3s;}
.card:hover .thumb::after{transform:scale(1.1);background:#fff;}
.card .body{padding:20px 22px 22px;}
.card h3{font-size:.96rem;font-weight:400;margin-bottom:4px;line-height:1.5;letter-spacing:.02em;}
.card h3 a{color:var(--ink);text-decoration:none;transition:color .25s;}
.card h3 a:hover{color:var(--gold);}
.card .anime{font-size:.76rem;color:var(--sub);margin-bottom:14px;letter-spacing:.03em;}
.badge{display:inline-block;font-size:.6rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;padding:4px 13px;margin-bottom:14px;text-indent:.24em;}
.b-easy{color:var(--easy);border:1px solid rgba(74,143,109,.4);}
.b-inter{color:var(--inter);border:1px solid rgba(176,127,53,.4);}
.b-adv{color:#a5514e;border:1px solid rgba(165,81,78,.4);}
.b-tag{color:var(--violet);border:1px solid rgba(132,113,152,.4);}
.card .cta{display:block;text-align:center;color:var(--ink);border:1px solid var(--line-dark);text-decoration:none;font-size:.68rem;letter-spacing:.3em;text-indent:.3em;padding:12px 0;font-weight:400;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s;}
.card .cta:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.more{text-align:center;margin-top:44px;}
.more a{display:inline-block;color:var(--ink);text-decoration:none;font-size:.68rem;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;border:1px solid var(--line-dark);padding:13px 42px;transition:background .3s,color .3s,border-color .3s;}
.more a:hover{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ---------- anime chips ---------- */
.anime-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
.anime-chip{background:#fff;border:1px solid var(--line);text-align:center;padding:26px 12px 22px;text-decoration:none;color:var(--ink);transition:background .3s,border-color .3s;}
.anime-chip:hover{border-color:var(--line-dark);}
.anime-chip:hover{background:var(--bg2);}
.anime-chip .t{font-size:.84rem;letter-spacing:.02em;}
.anime-chip .n{font-size:.66rem;color:var(--sub);display:block;margin-top:6px;letter-spacing:.14em;}
.anime-chip:hover .t{color:var(--gold);}

/* ---------- levels ---------- */
.levels{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.level-card{position:relative;padding:44px 42px;text-decoration:none;border:1px solid var(--line);background:#fff;transition:border-color .35s,box-shadow .35s;overflow:hidden;}
.level-card::after{content:"→";position:absolute;right:32px;bottom:28px;color:var(--sub);font-size:1rem;transition:transform .35s var(--ease),color .3s;}
.level-card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-lg);}
.level-card:hover::after{transform:translateX(6px);color:var(--gold);}
.lv-easy{background:linear-gradient(150deg,#ffffff,#f4f9f6);}
.lv-inter{background:linear-gradient(150deg,#ffffff,#faf6ec);}
.level-card .lk{font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;margin-bottom:14px;display:block;font-weight:400;}
.lv-easy .lk{color:var(--easy);}
.lv-inter .lk{color:var(--inter);}
.level-card h3{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-size:1.65rem;font-weight:500;color:var(--ink);margin-bottom:8px;letter-spacing:.03em;}
.level-card p{font-size:.85rem;color:var(--sub);max-width:400px;line-height:1.95;}

/* ---------- youtube band ---------- */
.band{position:relative;padding:72px 40px;text-align:center;border:1px solid var(--line);
  background:radial-gradient(ellipse 80% 120% at 50% -20%,rgba(132,113,152,.07),transparent 60%),#fff;margin-top:100px;overflow:hidden;}
.band::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:1px;height:30px;background:var(--gold-soft);}
.band h2{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:2rem;margin-bottom:10px;letter-spacing:.04em;}
.band h2 em{font-style:italic;color:var(--violet);}
.band p{color:var(--sub);max-width:480px;margin:0 auto 34px;font-size:.9rem;line-height:2;}
.band .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn-gold{background:var(--ink);border:1px solid var(--ink);color:#fff;text-decoration:none;font-weight:400;font-size:.7rem;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;padding:15px 36px;transition:background .3s,border-color .3s;}
.btn-gold:hover{background:var(--gold);border-color:var(--gold);}
.btn-line{background:transparent;border:1px solid var(--line-dark);color:var(--ink);text-decoration:none;font-weight:400;font-size:.7rem;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;padding:15px 36px;transition:border-color .3s,color .3s;}
.btn-line:hover{border-color:var(--gold);color:var(--gold);}

/* ---------- single sheet ---------- */
.crumbs{font-size:.72rem;color:var(--sub);padding:22px 0 0;letter-spacing:.06em;}
.crumbs a{color:var(--sub);text-decoration:none;transition:color .25s;}
.crumbs a:hover{color:var(--gold);}
.crumbs .sep{margin:0 8px;color:#ccc5d2;}
.layout{display:grid;grid-template-columns:1fr 320px;gap:44px;padding:26px 0 80px;}
.entry-title{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:2.15rem;line-height:1.3;margin-bottom:8px;letter-spacing:.02em;}
.h1sub{color:var(--sub);font-size:.92rem;margin-bottom:18px;letter-spacing:.03em;}
.h1sub b{color:var(--ink);font-weight:500;}
.badges{margin-bottom:22px;}
.badges .badge{margin-right:8px;}
.video-embed{position:relative;aspect-ratio:16/9;overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:12px;background:#000;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.caption{font-size:.72rem;color:var(--sub);margin-bottom:36px;letter-spacing:.05em;}
.single-content h2{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:1.5rem;margin:38px 0 14px;letter-spacing:.03em;}
.single-content p{font-size:.92rem;color:#48435a;margin-bottom:15px;line-height:2;}
table.facts{width:100%;border-collapse:collapse;font-size:.85rem;margin:12px 0 8px;}
.facts th{text-align:left;font-weight:400;color:var(--sub);padding:11px 14px;width:38%;border-bottom:1px solid var(--line);letter-spacing:.05em;}
.facts td{padding:11px 14px;border-bottom:1px solid var(--line);}

/* ---------- sidebar buy ---------- */
.sidebar{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:22px;}
.buy{background:#fff;border:1px solid var(--gold-soft);padding:30px 28px;box-shadow:0 8px 26px rgba(165,138,77,.1);}
.buy .k{font-size:.62rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:10px;}
.buy h3{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-size:1.3rem;font-weight:500;margin-bottom:18px;letter-spacing:.02em;}
.buy a.main{display:block;text-align:center;background:var(--ink);border:1px solid var(--ink);color:#fff;text-decoration:none;font-weight:400;font-size:.78rem;letter-spacing:.14em;padding:14px 6px;margin-bottom:10px;transition:background .3s,border-color .3s;}
.buy a.main:hover{background:var(--gold);border-color:var(--gold);}
.buy a.alt{display:block;text-align:center;background:transparent;border:1px solid var(--line-dark);color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.1em;padding:12px 6px;margin-bottom:10px;transition:border-color .3s,color .3s;}
.buy a.alt:hover{border-color:var(--gold);color:var(--gold);}
.buy .note{font-size:.68rem;color:var(--sub);line-height:1.7;margin-top:6px;}
.side-box{background:#fff;border:1px solid var(--line);padding:22px 24px;}
.side-box h4{font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:14px;}
.rel{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:opacity .25s;}
.rel:hover{opacity:.75;}
.rel:last-child{border-bottom:0;}
.rel img{flex:0 0 62px;width:62px;height:40px;object-fit:cover;}
.rel b{display:block;font-size:.8rem;font-weight:400;color:var(--ink);line-height:1.4;}
.rel span{font-size:.68rem;color:var(--sub);letter-spacing:.04em;}

/* ---------- archive ---------- */
.archive-head{padding:64px 0 8px;text-align:center;}
.archive-head h1{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:2.15rem;letter-spacing:.04em;}
.archive-head h1::after{content:"";display:block;width:1px;height:34px;background:var(--gold-soft);margin:20px auto 0;}
.archive-head p{color:var(--sub);font-size:.86rem;margin-top:10px;letter-spacing:.05em;}
.filterbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:22px 0 44px;}
.filterbar a{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);text-decoration:none;border:1px solid var(--line);background:#fff;padding:8px 20px;transition:color .3s,border-color .3s;}
.filterbar a.on,.filterbar a:hover{color:var(--gold);border-color:var(--gold-soft);}
.pagination{display:flex;gap:8px;justify-content:center;padding:48px 0;}
.pagination .page-numbers{border:1px solid var(--line);background:#fff;color:var(--sub);text-decoration:none;padding:9px 15px;font-size:.82rem;transition:color .3s,border-color .3s;}
.pagination .current,.pagination .page-numbers:hover{color:var(--gold);border-color:var(--gold-soft);}

/* ---------- blog ---------- */
.post-body{max-width:760px;margin:0 auto;padding:44px 0 80px;}
.post-body h1{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:2.1rem;margin-bottom:26px;line-height:1.4;letter-spacing:.02em;}
.post-body h2{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:1.55rem;margin:46px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line);letter-spacing:.03em;}
.post-body h3{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-weight:500;font-size:1.28rem;margin:34px 0 12px;letter-spacing:.02em;}
.post-body p{font-size:.94rem;color:#48435a;margin-bottom:17px;line-height:2.05;}
.post-body img{display:block;}
.post-body iframe{box-shadow:var(--shadow);}
.post-body ul,.post-body ol{margin:0 0 17px 22px;font-size:.94rem;color:#48435a;}
.post-body a.cta{display:inline-block;color:var(--ink);border:1px solid var(--line-dark);text-decoration:none;font-size:.78rem;letter-spacing:.08em;padding:11px 26px;font-weight:400;transition:background .3s,color .3s,border-color .3s;}
.post-body a.cta:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.post-body .wp-block-embed,.post-body .wp-embed-responsive figure{margin:0 0 17px;}
.post-body .wp-block-embed__wrapper{position:relative;}

/* ---------- footer ---------- */
.site-footer{margin-top:110px;border-top:1px solid var(--line);background:var(--bg2);padding:64px 0 40px;font-size:.82rem;}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
.site-footer h4{font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:16px;}
.site-footer p{color:var(--sub);max-width:300px;line-height:1.95;}
.site-footer a{color:var(--sub);text-decoration:none;display:block;margin-bottom:9px;letter-spacing:.03em;transition:color .25s;}
.site-footer a:hover{color:var(--gold);}
.foot-logo{font-family:'Cormorant Garamond','Noto Serif JP',serif;font-size:1.35rem;color:var(--ink);margin-bottom:12px;letter-spacing:.06em;}
.foot-logo .dot{color:var(--gold);}
.copyright{text-align:center;color:#b3adbc;font-size:.68rem;margin-top:48px;letter-spacing:.22em;text-transform:uppercase;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .anime-row{grid-template-columns:repeat(3,1fr);}
  .levels{grid-template-columns:1fr;}
  .layout{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .site-footer .cols{grid-template-columns:1fr 1fr;}
  .nav .links{display:none;}
  .keys{height:62px;}
  .pnotes{height:86px;}
  .hero{padding-top:88px;}
  .section{padding:76px 0 0;}
}

/* スマホ幅では記事一覧(ブログ・楽譜)を1列にする */
@media(max-width:600px){
  .grid{grid-template-columns:1fr!important;}
  .anime-row{grid-template-columns:repeat(2,1fr);}
}

/* 動きを減らす設定のユーザーにはアニメーションを止める(アクセシビリティ) */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}