/* ══════════════════════════════════════════════════════════ 音楽受験対策オンライン塾 — 共通デザイン楽典 / 聴音 / 視唱の3ページが読み込む唯一のスタイルシート。ここを直せば3ページすべてに反映される。 ══════════════════════════════════════════════════════════ */ /* ── 3科目で共通のトークン ───────────────────────────── */ :root{ --green:#0F6E56;--green-l:#E1F5EE; --orange:#993C1D;--orange-l:#FAECE7; --blue:#185FA5;--blue-l:#E6F1FB; --gray-l:#F5F5F3;--border:#E2E0D8; --text:#1A1916;--text-sub:#5F5E5A; --bg:#FFFFFF;--bg-2:#FAF9F7; --radius:10px;--radius-lg:14px; --shadow:0 1px 3px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.04); } /* ── 科目テーマ ─────────────────────────────────────── の1語を変えるだけで、ヒーロー・バンド・ボタン・カードのホバーまで一括で色が変わる。色を変えたいときはこの3行だけを触ればよい。 */ :root, body[data-subject="rakuten"] { --accent:#534AB7; --accent-l:#EEEDFE; } /* 楽典紫 */ body[data-subject="chouon"] { --accent:#0F6E56; --accent-l:#E1F5EE; } /* 聴音緑 */ body[data-subject="shishou"] { --accent:#B81A96; --accent-l:#FBE7F5; } /* 視唱赤紫 */ /* --purple は旧変数名。本文の style 属性に var(--purple) の直書きが多数残っているため、--accent の別名として生かしてある。 */ body{ --purple:var(--accent); --purple-l:var(--accent-l); } *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth} body{font-family:-apple-system,'Hiragino Sans','Yu Gothic UI',sans-serif;background:var(--bg-2);color:var(--text);line-height:1.7;min-height:100vh} header{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100} .header-inner{max-width:900px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px;height:56px} .logo-badge{background:var(--purple);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.03em} .header-title{font-size:14px;font-weight:600} .page{max-width:900px;margin:0 auto;padding:32px 24px 80px} /* Hero */ .hero{background:var(--purple);border-radius:var(--radius-lg);padding:40px 40px 36px;margin-bottom:32px;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;right:-60px;top:-60px;width:280px;height:280px;background:rgba(255,255,255,.05);border-radius:50%;pointer-events:none} .hero::after{content:'';position:absolute;left:-40px;bottom:-40px;width:180px;height:180px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none} .hero-eyebrow{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.1em;margin-bottom:10px;text-transform:uppercase} .hero-title{font-size:32px;font-weight:800;color:#fff;margin-bottom:8px;line-height:1.3} .hero-sub{font-size:15px;color:rgba(255,255,255,.7);margin-bottom:24px;line-height:1.7} .hero-stats{display:flex;gap:24px;flex-wrap:wrap} .hero-stat{text-align:center} .hero-stat-val{font-size:26px;font-weight:800;color:#fff} .hero-stat-lbl{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px} /* Subject sections */ .sec-header{display:flex;align-items:center;gap:12px;margin:32px 0 16px;scroll-margin-top:76px} .sec-badge{font-size:12px;font-weight:700;padding:4px 14px;border-radius:20px;white-space:nowrap} .sec-title{font-size:18px;font-weight:700} .sec-count{font-size:12px;color:var(--text-sub);margin-left:auto} /* Unit cards grid */ .units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:8px} .unit-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 16px;box-shadow:var(--shadow);text-decoration:none;color:var(--text);transition:all .15s;display:flex;flex-direction:column;gap:6px;position:relative} .unit-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 15%,transparent);border-color:var(--purple)} .unit-card.locked{cursor:default;opacity:.55} .unit-card.locked:hover{transform:none;box-shadow:var(--shadow);border-color:var(--border)} .unit-num{font-size:10px;font-weight:700;color:var(--text-sub);letter-spacing:.06em} .unit-title{font-size:14px;font-weight:700;line-height:1.4} .unit-en{font-size:11px;color:var(--text-sub);font-style:italic} .unit-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px} .unit-tag{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600} .unit-tag.access-open{background:var(--green-l);color:var(--green)} .unit-tag.access-free{background:var(--blue-l);color:var(--blue)} .unit-tag.access-paid{background:var(--orange-l);color:var(--orange)} .acc-group{margin-bottom:10px;border:1px solid var(--border);border-radius:14px;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden;transition:box-shadow .25s,border-color .25s} .acc-group:hover{box-shadow:0 6px 22px rgba(0,0,0,.07);border-color:color-mix(in srgb,var(--lv) 35%,var(--border))} .acc-group.open{box-shadow:0 6px 24px rgba(0,0,0,.07)} .acc-group.g-green{--lv:var(--green);--lv-l:var(--green-l)} .acc-group.g-blue{--lv:var(--blue);--lv-l:var(--blue-l)} .acc-group.g-orange{--lv:#F5A200;--lv-l:#FEF3DA} .acc-group.g-rose{--lv:#BE185D;--lv-l:#FBE7F0} .acc-group.g-violet{--lv:#6D28D9;--lv-l:#F0EAFC} .acc-group-head{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;border-left:4px solid var(--lv);padding:14px 18px;cursor:pointer;font-family:inherit;text-align:left;transition:background .18s} .acc-group-head:hover{background:var(--lv-l)} .acc-group.open .acc-group-head{background:var(--lv-l)} .acc-group-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--lv);box-shadow:0 0 0 4px color-mix(in srgb,var(--lv) 18%,transparent)} .acc-group-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.01em} .acc-group-count{margin-left:2px;font-size:11px;font-weight:700;color:var(--lv);background:var(--bg);border:1px solid color-mix(in srgb,var(--lv) 45%,transparent);padding:1px 9px;border-radius:20px;white-space:nowrap} .acc-group-chevron{margin-left:auto;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--bg-2);color:var(--text-sub);display:flex;align-items:center;justify-content:center;font-size:10px;transition:transform .3s cubic-bezier(.4,0,.2,1),background .18s,color .18s} .acc-group.open .acc-group-chevron{transform:rotate(180deg);background:var(--lv);color:#fff} .acc-group-body{display:none;padding:16px 16px 12px} .acc-group-body .units-grid{margin-bottom:0!important} .acc-group.open .acc-group-body{display:block;animation:accReveal .34s cubic-bezier(.2,.7,.2,1)} @keyframes accReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .unit-tag.soon{background:var(--gray-l);color:var(--text-sub)} .unit-tag.level-1{background:var(--green-l);color:var(--green)} .unit-tag.level-2{background:var(--blue-l);color:var(--blue)} .unit-tag.level-3{background:#FEF3DA;color:#F5A200} .unit-tag.level-4{background:#FBE7F0;color:#BE185D} .unit-tag.level-5{background:#F0EAFC;color:#6D28D9} .unit-card .arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--purple);font-size:16px;opacity:0;transition:opacity .15s} .unit-card:hover .arrow{opacity:1} /* Info section */ .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px} .info-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)} .card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow)} .promo-btn{display:inline-block;font-size:14px;font-weight:700;text-decoration:none;padding:13px 30px;border-radius:26px;transition:transform .12s,box-shadow .12s} .promo-btn:hover{transform:translateY(-2px)} .promo-btn-fill{color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 22%,transparent)} .promo-btn-outline{color:var(--purple);border:1.5px solid var(--purple);background:var(--bg)} .promo-actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap} @media(max-width:600px){.card{padding:22px 20px}.promo-btn{width:100%;text-align:center}} .info-icon{font-size:24px;margin-bottom:8px} .info-title{font-size:14px;font-weight:700;margin-bottom:6px} .info-body{font-size:12px;color:var(--text-sub);line-height:1.8} footer{border-top:1px solid var(--border);padding:24px;text-align:center;font-size:12px;color:var(--text-sub);background:var(--bg)} @media(max-width:640px){ .hero{padding:28px 24px}.hero-title{font-size:24px}.hero-stats{gap:16px} .units-grid{grid-template-columns:1fr 1fr}.info-grid{grid-template-columns:1fr} .page{padding:20px 16px 60px} } .mypage-bar{margin-bottom:24px} .mypage-bar-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px} .mypage-bar-inner{display:flex;align-items:center;gap:12px;flex-wrap:nowrap} .mypage-links{flex:1;min-width:0;display:flex;align-items:stretch;flex-wrap:wrap;gap:10px} .mypage-link{display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:8px 14px;border-radius:10px;min-width:140px} .mypage-link-title{font-size:12px;font-weight:700} .mypage-link-desc{font-size:10px;font-weight:500;color:var(--text-sub)} /* 体験版と楽典ドリルの境界＝全幅の紫バンド */ .level-band{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:var(--purple);color:#fff;padding:40px 0;margin-top:36px;margin-bottom:36px} .level-band-inner{max-width:900px;margin:0 auto;padding:0 24px} .level-band-title{font-size:22px;font-weight:800;margin-bottom:6px} .level-band-sub{font-size:14px;line-height:1.8;color:rgba(255,255,255,.82);margin-bottom:22px} .level-band-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px} .level-item{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 14px;display:flex;flex-direction:column;align-items:center;text-align:center} .level-chip{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:12px;margin-bottom:10px} .level-desc{font-size:12px;line-height:1.7;color:rgba(255,255,255,.88);flex:1} .level-meta{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.2);width:100%} .level-count{font-size:12px;font-weight:800;color:#fff} .level-access{font-size:10px;font-weight:800;padding:3px 9px;border-radius:10px;white-space:nowrap} /* レベル紋章アイコン */ .level-crest{width:52px;height:52px;object-fit:contain;margin:0 auto 8px;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.3))} .li-crest{flex:none;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.18))} .li-body{flex:1;min-width:0} .lv-mini{width:22px;height:22px;object-fit:contain;vertical-align:-6px;margin-right:7px} .level-band-cta{display:flex;gap:12px;flex-wrap:wrap} .lb-btn{display:inline-block;font-size:14px;font-weight:800;text-decoration:none;padding:12px 26px;border-radius:24px} .lb-btn-fill{background:#fff;color:var(--purple)} .lb-btn-outline{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.6)} /* 楽典ドリル各レベルの説明文 */ .level-intro{display:flex;align-items:flex-start;gap:16px;border-left:4px solid var(--lv-c,var(--green));background:var(--lv-bg,var(--green-l));border-radius:0 12px 12px 0;padding:14px 18px;margin:6px 0 18px;font-size:13px;line-height:1.85;color:var(--text)} .level-intro strong{color:var(--lv-c,var(--green))} /* 楽典ドリル：レベル間（L1→L2→L3〜5）の区切りに余白 */ #free-member-promo,#free-member-content,#paid-promo,#paid-content{margin-top:44px} /* ログイン後のLv3→Lv4→Lv5（paid-content内）のレベル境界に余白。ログイン前のpaid-promoは対象外 */ #paid-content .acc-group + .level-intro{margin-top:44px} @media(max-width:760px){.level-band-grid{grid-template-columns:1fr 1fr}} @media(max-width:480px){.level-band-grid{grid-template-columns:1fr}} /* ── 科目切り替えタブ（楽典 / 聴音 / 視唱） ───────────── タブ自身がその科目の色を持つので、色と科目の対応が覚えられる。現在いるページは塗りつぶし、他は輪郭のみ。 */ .subject-tabs{display:flex;gap:6px;align-items:center} .subject-tab{--s:var(--accent);font-size:12px;font-weight:700;text-decoration:none;color:var(--s);background:var(--bg);border:1px solid color-mix(in srgb,var(--s) 42%,transparent);border-radius:16px;padding:5px 14px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s} .subject-tab:hover{background:color-mix(in srgb,var(--s) 10%,transparent);border-color:var(--s)} .subject-tab[aria-current="page"]{background:var(--s);color:#fff;border-color:var(--s)} .subject-tab.s-rakuten{--s:#534AB7} .subject-tab.s-chouon {--s:#0F6E56} .subject-tab.s-shishou{--s:#B81A96} /* mobile-header-fix */ @media(max-width:600px){ .header-inner{padding:0 16px;gap:6px} .logo-badge{display:none} .header-title{display:none} .header-sub{display:none} .subject-tabs{gap:4px} .subject-tab{font-size:11px;padding:4px 10px} } /* ── 楽譜の書き方（聴音の一覧ページ・カードの手前） ───────────────── */ .wr-box{border:1.5px solid var(--border);border-radius:12px;background:var(--bg); margin:0 0 28px;overflow:hidden} .wr-box summary{padding:16px 20px;cursor:pointer;font-size:15px;list-style:none; display:flex;flex-direction:column;gap:4px} .wr-box summary::-webkit-details-marker{display:none} .wr-box summary::before{content:'▶';color:var(--accent);font-size:11px;margin-right:6px} .wr-box[open] summary::before{content:'▼'} .wr-box summary span{font-size:13px;color:var(--text-sub);font-weight:400;line-height:1.8} .wr-box summary:hover{background:var(--gray-l)} .wr-body{padding:4px 20px 22px;border-top:1px solid var(--border)} .wr-g{margin-top:18px} .wr-t{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;margin-bottom:8px} .wr-n{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px; border-radius:50%;background:var(--accent);color:#fff;font-size:12px;flex:none} .wr-l{margin:0;padding-left:20px} .wr-l li{font-size:14px;line-height:1.95;margin-bottom:7px} .wr-l li b{color:var(--accent)} /* ── 解いたことのある単元の印 ─────────────────────────────────── */ .unit-card.done{filter:grayscale(1);opacity:.6} .unit-card.done:hover{filter:none;opacity:1} .unit-tag.progress{background:#E1F5EE;color:#0F6E56;font-weight:800} .unit-card.partial .unit-tag.progress{background:#FFF3D6;color:#8A5A00} .progress-note{font-size:12.5px;color:var(--text-sub);background:var(--gray-l); border-radius:9px;padding:10px 14px;margin:0 0 20px;line-height:1.7}