@charset "UTF-8"; /* ============================================================ Love is Music — 共通スタイル（案 C: コーナー別に色が変わる） ------------------------------------------------------------ ルールは 1 つだけ: 「形」は全ゾーン共通。変わるのは「色」だけ。余白・文字サイズ・角丸・並べ方はどのコーナーでも同じにする。そうしないとバラバラに見える。ゾーンの切り替えはで行う。 ============================================================ */ /* ---------- 1. 形（全ゾーン共通。ここは色を書かない） ---------- */ :root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:72px; --radius:12px; --radius-sm:8px; --radius-pill:999px; --font-base:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP", "Yu Gothic UI","Yu Gothic",Meiryo,sans-serif; --font-num:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --text-body:1rem; /* 16px */ --text-small:0.875rem; /* 14px */ --text-kicker:0.6875rem; /* 11px */ --lh-body:1.85; /* 日本語は広めが読みやすい */ --lh-tight:1.45; --maxw-page:1040px; --maxw-prose:36rem; /* 本文は 1 行 36 文字前後で折り返す */ --shadow:0 1px 2px #0000000d, 0 6px 18px #00000012; } /* ---------- 2. 色: 共通ゾーン（初期値） ---------- */ :root{ /* サイトの顔。ゾーンが変わっても絶対に変えない */ --brand:#C2410C; --on-brand:#FFFFFF; /* 5.18 */ --on-brand-soft:#FFF0E8; /* 4.66 */ /* ゾーンごとに上書きされる色 */ --bg:#FFFDFB; --surface:#FFFFFF; --text:#241F1C; /* 16.07 */ --muted:#665C56; /* 6.41 */ --heading:#241F1C; --line:#E8E2DE; --accent:#C2410C; /* 5.10 */ --on-accent:#FFFFFF; /* 5.18 */ --zone-tint:#FFF7F1; color-scheme:light; } /* ---------- 3. 色: ゴスペラーズゾーン（暖色） ---------- */ [data-zone="gospellers"]{ --bg:#FFF7F0; --surface:#FFFFFF; --text:#3B2113; /* 14.02 */ --muted:#7A5540; /* 6.19 */ --heading:#4A2510; /* 12.68 */ --line:#F2DAC6; --accent:#B34700; /* 5.19 */ --on-accent:#FFFFFF; /* 5.50 */ --zone-tint:#FFEFE2; color-scheme:light; } /* ---------- 4. 色: TM NETWORK ゾーン（寒色・暗め） ---------- */ [data-zone="tm"]{ --bg:#101826; --surface:#16202F; --text:#DCE9F5; /* 14.41 */ --muted:#93AEC8; /* 7.73 */ --heading:#FFFFFF; /* 17.79 */ --line:#24354D; --accent:#22D3EE; /* 9.84 */ --on-accent:#04222A; /* 9.17 */ --accent-2:#F472B6; /* 6.72 */ --zone-tint:#152033; --shadow:0 1px 2px #0006, 0 6px 22px #0007; color-scheme:dark; /* スクロールバーやフォーム部品も暗い色になる */ } /* ---------- 5. 土台 ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important} } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-base); font-size:var(--text-body); line-height:var(--lh-body); } img,video{max-width:100%; height:auto; display:block} a{color:var(--accent); text-underline-offset:.2em} a:hover{text-decoration-thickness:2px} :focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:2px} h1,h2,h3,h4{line-height:var(--lh-tight); color:var(--heading); margin:0 0 var(--space-3)} h1{font-size:clamp(1.625rem,5vw,2.375rem)} /* 26 → 38px */ h2{font-size:clamp(1.25rem,3.6vw,1.625rem)} /* 20 → 26px */ h3{font-size:1.125rem} p,ul,ol{margin:0 0 var(--space-4)} /* キーボードだけで使う人が、メニューを飛ばして本文に行けるようにする */ .skip-link{ position:absolute; left:var(--space-4); top:-100px; z-index:100; background:var(--brand); color:var(--on-brand); padding:var(--space-3) var(--space-4); border-radius:0 0 var(--radius-sm) var(--radius-sm); text-decoration:none; font-weight:700; } .skip-link:focus{top:0} .container{max-width:var(--maxw-page); margin-inline:auto; padding-inline:var(--space-4)} /* ---------- 6. ヘッダー（サイトの顔。全ゾーン共通） ---------- */ .site-header{background:var(--brand); color:var(--on-brand)} .site-header a{color:inherit} .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4) var(--space-5); flex-wrap:wrap; padding-block:var(--space-3); } .site-logo{font-size:1.125rem; font-weight:800; text-decoration:none; line-height:1.3} .site-logo small{ display:block; font-size:var(--text-kicker); font-weight:500; letter-spacing:.14em; color:var(--on-brand-soft); } .site-nav ul{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); list-style:none; margin:0; padding:0} .site-nav a{ display:inline-block; font-size:var(--text-small); font-weight:700; text-decoration:none; padding:var(--space-1) 0; border-bottom:2px solid transparent; } .site-nav a:hover{border-bottom-color:var(--on-brand-soft)} /* いま見ているページに印を付ける */ .site-nav a[aria-current="page"]{border-bottom-color:var(--on-brand)} /* ---------- 7. 見出しエリア ---------- */ .hero{background:var(--zone-tint); border-bottom:1px solid var(--line)} .hero .container{padding-block:var(--space-7)} .hero p{color:var(--muted); margin:0; max-width:var(--maxw-prose)} .kicker{ font-size:var(--text-kicker); font-weight:700; letter-spacing:.16em; color:var(--accent); margin:0 0 var(--space-2); text-transform:uppercase; } /* ---------- 8. 本文 ---------- */ main{padding-block:var(--space-7) var(--space-8)} .prose{max-width:var(--maxw-prose)} .prose > :last-child{margin-bottom:0} .prose h2{margin-top:var(--space-7)} .prose h3{margin-top:var(--space-5)} .prose li{margin-bottom:var(--space-2)} .prose blockquote{ margin:var(--space-5) 0; padding:var(--space-3) var(--space-4); border-left:4px solid var(--accent); background:var(--zone-tint); color:var(--muted); } .prose figure{margin:var(--space-5) 0} .prose figcaption{font-size:var(--text-small); color:var(--muted); margin-top:var(--space-2)} /* ---------- 9. カード ---------- */ .card-grid{ display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:0 0 var(--space-6); padding:0; list-style:none; } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-5); box-shadow:var(--shadow); } .card h3{margin-bottom:var(--space-2)} .card p{color:var(--muted); font-size:var(--text-small); margin-bottom:var(--space-4)} .card > :last-child{margin-bottom:0} /* コーナーへの入口カード。中のリンクを押しやすくする */ .card-link{position:relative} .card-link:has(a:hover){border-color:var(--accent)} .card-link a::after{content:""; position:absolute; inset:0} /* ---------- 10. ボタン ---------- */ .btn{ display:inline-block; font-size:var(--text-small); font-weight:700; padding:var(--space-2) var(--space-5); border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent); text-decoration:none; border:2px solid transparent; } .btn:hover{filter:brightness(1.08)} .btn-quiet{background:transparent; color:var(--accent); border-color:var(--accent)} /* ---------- 11. 更新履歴 ---------- */ .news{margin:0 0 var(--space-6)} .news h2{ font-size:1.0625rem; border-left:4px solid var(--accent); padding-left:var(--space-3); margin-bottom:var(--space-4); } .news ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)} .news li{ display:flex; gap:var(--space-4); align-items:baseline; padding:var(--space-3) var(--space-1); border-bottom:1px solid var(--line); font-size:var(--text-small); } .news time{ flex:0 0 auto; color:var(--muted); font-family:var(--font-num); font-variant-numeric:tabular-nums; } @media (max-width:480px){ .news li{flex-direction:column; gap:var(--space-1)} } /* ---------- 12. フッター（サイトの顔。全ゾーン共通） ---------- */ .site-footer{ background:var(--brand); color:var(--on-brand); padding-block:var(--space-5); margin-top:var(--space-8); font-size:var(--text-small); } .site-footer a{color:var(--on-brand)} .site-footer p{margin:0 0 var(--space-1)} .site-footer p:last-child{margin:0; color:var(--on-brand-soft)} /* ---------- 14. 昔のページから移した本文 ---------- */ .doc{max-width:52rem} .doc > :last-child{margin-bottom:0} .doc h2{margin-top:var(--space-7); font-size:1.25rem} .doc h2:first-child{margin-top:0} .doc h3{margin-top:var(--space-5)} .doc img{border-radius:var(--radius-sm); margin-block:var(--space-3)} .doc ul,.doc ol{padding-left:1.4em} .doc li{margin-bottom:var(--space-2)} .doc hr{border:0; border-top:1px solid var(--line); margin:var(--space-6) 0} /* 表。昔のページの中身は本物のデータなので残す */ .table-wrap{overflow-x:auto; margin:0 0 var(--space-5)} .doc table{ border-collapse:collapse; width:100%; min-width:28rem; font-size:var(--text-small); background:var(--surface); } .doc th,.doc td{ border:1px solid var(--line); padding:var(--space-2) var(--space-3); text-align:left; vertical-align:top; line-height:1.7; } .doc th{background:var(--zone-tint); color:var(--heading); font-weight:700} .doc thead th{position:sticky; top:0} /* 画像がまだ無いとき、リンク切れの箱が目立たないようにする */ .doc img:not([src]){display:none} /* ---------- 15. 印刷（表も紙で読めるように） ---------- */ @media print{ .table-wrap{overflow:visible} .doc table{min-width:0} } /* ---------- 16. 昔のページにあったコーナー目次・お知らせ ---------- */ .corner-menu,.corner-news{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-4) var(--space-5); margin:0 0 var(--space-5); } .corner-menu h2,.corner-news strong:first-child{ margin-top:0; font-size:1.0625rem; color:var(--heading); } .corner-menu ul{list-style:none; margin:0; padding:0} .corner-menu li{margin:0 0 var(--space-2); line-height:1.7} /* リンクが無い項目は、その下の見出しとして扱う */ .corner-menu li:not(:has(a)){ margin-top:var(--space-4); font-weight:700; font-size:var(--text-small); letter-spacing:.06em; color:var(--muted); } .corner-menu li:first-child{margin-top:0} .corner-news{font-size:var(--text-small); line-height:1.8} @media (min-width:44rem){ /* 画面が広いときは、目次とお知らせを横に並べる */ .doc:has(.corner-menu):has(.corner-news) .corner-menu, .doc:has(.corner-menu):has(.corner-news) .corner-news{ display:inline-block; vertical-align:top; width:calc(50% - var(--space-3)); } .doc:has(.corner-menu):has(.corner-news) .corner-news{margin-right:var(--space-4)} } /* ---------- 17. CD ジャケット画像の代わり ---------- */ .no-jacket{ width:104px; height:104px; opacity:.9; border-radius:var(--radius-sm); background:var(--zone-tint); } /* ---------- 18. 外のサイトへ行くリンク ---------- */ /* 押すと別のタブが開くことが分かるように、小さな矢印を付ける */ .doc a[target="_blank"]::after{ content:"\2197"; /* ↗ */ font-size:.85em; margin-left:.15em; opacity:.75; } @media print{ .doc a[target="_blank"]::after{content:""} } /* ---------- 13. 印刷（暗いコーナーも紙で読めるようにする） ---------- */ @media print{ :root,[data-zone]{ --bg:#fff; --surface:#fff; --text:#000; --muted:#333; --heading:#000; --line:#bbb; --accent:#000; --on-accent:#fff; --brand:#fff; --on-brand:#000; --on-brand-soft:#333; --zone-tint:#fff; --shadow:none; } .site-nav,.btn,.skip-link{display:none} .card{border:1px solid #bbb} a[href^="http"]::after{content:" （" attr(href) "）"; font-size:.8em; color:#555} }