@charset "UTF-8";
/* markuspassion.css — 4ページ共通デザイン（index基準の暖色パレット / sans） */

:root{
  --bg:#f5f4f1; --card:#ffffff; --ink:#23201c; --sub:#6b655c;
  --line:#e0ddd6; --accent:#7a1f1f; --accent2:#a8642a;
  --chip:#efece6; --chipon:#7a1f1f; --chipontx:#fff;
  --de:#23201c; --ja:#7a1f1f;
  --sans:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.5; padding-bottom:40px;
}
a{color:var(--accent)}
::selection{background:#f0d9d9}

/* ===== 共通ヘッダー帯 ===== */
header.top{
  background:linear-gradient(180deg,#fff,#faf8f4);
  border-bottom:1px solid var(--line);
  padding:12px 14px 10px;
}
header.top h1{font-size:17px; margin:0 0 2px; line-height:1.35}
header.top .sub{font-size:12px; color:var(--sub); line-height:1.55}
header.top .note{
  font-size:11.5px; color:var(--sub); background:#efece6;
  border:1px solid var(--line); border-radius:8px;
  padding:.6em .8em; margin-top:.7em; line-height:1.7;
}
/* 読み物ページ: ヘッダー帯は全幅、内容は本文（main.reading）と同じ列幅に揃える */
header.top.rhead{padding-left:0; padding-right:0}
header.top.rhead h1,
header.top.rhead .sub,
header.top.rhead .note{
  max-width:900px; margin-left:auto; margin-right:auto;
  padding-left:14px; padding-right:14px;
}

/* ===== 読み物（歌詞 / 逐語）共通 ===== */
main.reading{max-width:900px; margin:0 auto; padding:6px 14px 60px}
/* wordbyword は section が入れ子。境界線でなく余白＋番号バッジで曲を区切る（入れ子/フラット両対応・字下げ累積なし） */
.reading section.mvt{margin:0; padding:0}
.reading section.mvt h2{
  font-size:15.5px; font-weight:800; margin:1.6em 0 .55em; color:var(--ink);
  display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap;
}
.reading section.mvt h2 .num{
  color:#fff; background:var(--accent); font-weight:800;
  font-size:.82em; border-radius:7px; padding:2px 8px;
}
.reading section.mvt h2 .cast{font-size:.76em; color:var(--accent2); font-weight:600}
.reading .sinfonia{color:var(--sub); font-style:italic; font-size:.92em; margin:.2em 0 .6em}

/* 役名ピル（index .rt に統一） */
.reading .role{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:3px 10px; border-radius:7px; margin:.4em 0 .2em;
  background:#f3ece0; color:#7a4a16; border:1px solid #e8ddc8;
}
.reading .role.chor{background:#e6eef0; color:#1f5560; border-color:#cfe0e3}
.reading .role.evang{background:#ece9e3; color:#5a5248; border-color:#ddd8cf}

/* 歌詞（lyrics） */
.reading .speech{margin:.5em 0}
.reading .verse{margin:.4em 0}
.reading .vno{font-weight:800; color:var(--sub); margin-right:.3em}
.reading .line{margin:.15em 0 .6em; padding-left:.6em; border-left:3px solid var(--line)}
.reading .line .de{margin:0; color:var(--de)}
.reading .line .ja{margin:.14em 0 0; color:var(--ja); font-size:.92em}
.reading .line .ja:before{content:"›  "; color:#c2b6a8}

/* 逐語（wordbyword） */
.reading .verse-no{font-weight:800; color:var(--sub); margin:.5em 0 .1em; font-size:.95em}
.reading .phrase{margin:.15em 0 .85em}
.reading .words{display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:.55em; row-gap:.4em}
.reading .w{display:inline-flex; flex-direction:column; align-items:center}
.reading .w .de{color:var(--de); white-space:nowrap; font-size:1.05em}
.reading .w .de u{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--accent)}
.reading .w .g{font-size:.74em; color:var(--sub); white-space:nowrap; margin-top:.12em}
.reading .w .g.fn{color:#aca69c}
.reading .tr{font-size:.86em; color:var(--ja); margin:.22em 0 0; padding-left:.6em; border-left:3px solid var(--line)}
.reading .tr:before{content:"›  "; color:#c2b6a8}
.reading .leg{font-size:.78em; color:var(--sub); margin:1.6em 0 0; border-top:1px solid var(--line); padding-top:.7em; line-height:1.7}

/* ===== 解説記事（notes / .wrap） ===== */
.wrap{
  max-width:760px; margin:16px auto; padding:26px 28px 60px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); line-height:1.85;
}
.wrap h1,.wrap h2,.wrap h3,.wrap h4{line-height:1.45; color:var(--ink)}
.wrap h1{font-size:1.55em; margin:1.3em 0 .6em; padding-bottom:.32em; border-bottom:3px solid var(--accent)}
.wrap h1:first-child{margin-top:.1em}
.wrap h2{font-size:1.26em; margin:1.7em 0 .5em; padding-left:.5em; border-left:5px solid var(--accent)}
.wrap h3{font-size:1.08em; margin:1.3em 0 .35em; color:var(--accent)}
.wrap h4{font-size:1em; margin:1.1em 0 .3em}
.wrap p{margin:.7em 0}
.wrap ul{margin:.6em 0; padding-left:1.4em}
.wrap li{margin:.3em 0}
.wrap strong{font-weight:700}
.wrap hr{border:none; border-top:1px solid var(--line); margin:2.2em 0}

/* ===== index：CTA目次 ===== */
.studynav{ display:flex; gap:14px; flex-wrap:wrap; padding:16px; background:#f0ece4; border-bottom:1px solid var(--line); }
.ql{ display:inline-flex; align-items:center; gap:13px; padding:15px 22px; border-radius:14px; text-decoration:none; color:#fff; box-shadow:0 3px 10px rgba(60,30,20,.22); transition:transform .1s ease, box-shadow .1s ease; }
.ql .ic{ font-size:26px; line-height:1 }
.ql .qlt{ display:block; font-size:18px; font-weight:800; letter-spacing:.02em }
.ql .qls{ display:block; font-size:12px; font-weight:600; opacity:.92; margin-top:2px }
.ql-notes{ background:linear-gradient(135deg,#8a3a16,#b0742e) }
.ql-lyrics{ background:linear-gradient(135deg,#7a1f1f,#b23a3a) }
.ql:hover{ transform:translateY(-2px); box-shadow:0 7px 18px rgba(60,30,20,.30) }
.ql:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(60,30,20,.22) }

/* ===== index：検索・フィルタ ===== */
.controls{ position:sticky; top:0; z-index:20; background:rgba(245,244,241,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); padding:10px 14px; }
.search{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.search input{ flex:1; font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); min-width:0; }
.search button{ font-size:13px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--sub); white-space:nowrap; }
.filtsec{margin-top:4px}
.filtsec .lbl{ font-size:11px; color:var(--sub); font-weight:700; letter-spacing:.04em; margin:6px 2px 4px; }
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{ font-size:12.5px; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--chip); color:var(--ink); cursor:pointer; user-select:none; }
.chip.on{background:var(--chipon); color:var(--chipontx); border-color:var(--chipon)}
.chip.role.on{background:var(--accent2); border-color:var(--accent2)}
.chip.special{border-color:var(--accent); color:var(--accent); font-weight:700}
.chip.special.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.chipsep{align-self:center; color:var(--sub); font-weight:700; padding:0 2px}
.count{font-size:12px; color:var(--sub); padding:8px 16px 0}

/* ===== index：モバイル カード ===== */
#cards{padding:10px 12px; display:flex; flex-direction:column; gap:10px}
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 13px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.card .chead{display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap}
.no{ font-weight:800; font-size:13px; background:var(--accent); color:#fff; border-radius:8px; padding:2px 9px; min-width:34px; text-align:center; }
.typ{font-size:12px; color:var(--sub); font-weight:600}
.pg{font-size:11px; color:var(--sub); background:#efece6; border:1px solid var(--line); border-radius:6px; padding:1px 7px; margin-left:auto}
.badge{font-size:11px; padding:2px 8px; border-radius:999px; background:#efe7da; color:#7a4a16}
.badge.chorus{background:#e6eef0; color:#1f5560}
.titles{margin:2px 0 8px}
.titles a, .titles span.notlink{display:block; text-decoration:none}
.titles .de{display:block; color:var(--ink); font-weight:700; font-size:15.5px; line-height:1.35}
.titles .ja{display:block; color:var(--accent); font-size:13.5px; margin-top:2px}
.note{color:#1f5560; font-size:11.5px; margin-top:3px; line-height:1.35}
td.tl .note{font-weight:400; white-space:normal; max-width:22em}
.titles a:active .de{opacity:.6}
.play{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:#fff; background:#c0392b; border-radius:999px; padding:4px 11px; text-decoration:none; margin-top:2px; }
.play.dead{background:#cfcabf; color:#fff}
.roletags{display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 9px}
.rt{font-size:12px; padding:3px 10px; border-radius:7px; background:#f3ece0; color:#7a4a16; border:1px solid #e8ddc8; font-weight:600}
.rt.chorus{background:#e6eef0; color:#1f5560; border-color:#cfe0e3}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.sing{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:#7a4a16; background:#f3ece0; border:1px solid #e8ddc8; border-radius:999px; padding:4px 11px; text-decoration:none; margin-top:2px; }
.sing:active{opacity:.6}

/* ===== index：PC 表 ===== */
#tablewrap{display:none; padding:8px 14px 0}
table{border-collapse:collapse; width:auto; font-size:13px; background:#fff}
th,td{border:1px solid var(--line); padding:6px 8px; text-align:center; white-space:nowrap}
th{background:#efe9e0; position:sticky; top:var(--ctrlh,0px); z-index:10; font-size:12px; box-shadow:0 1px 0 var(--line)}
td.tl,th.tl{text-align:left; white-space:nowrap}
td.title .t-de{display:block; color:var(--ink); font-weight:600}
td.title .t-ja{display:block; color:var(--accent); font-size:.92em; margin-top:2px}
.mk{color:var(--accent); font-weight:800}
td.aud a, td.sing2 a{ display:inline-flex; align-items:center; gap:4px; text-decoration:none; border-radius:999px; padding:2px 10px; font-size:12px; white-space:nowrap; }
td.aud a{color:#fff; background:#c0392b}
td.aud a:hover{background:#a02419}
td.aud .dead{color:#b7b1a5; font-size:12px}
td.sing2 a{color:#7a4a16; background:#f3ece0; border:1px solid #e8ddc8}
td.sing2 a:hover{background:#7a4a16; color:#fff}
.empty{padding:40px 16px; text-align:center; color:var(--sub)}

/* ===== レスポンシブ / 印刷 ===== */
@media (min-width:900px){
  body{font-size:15px}
  #cards{display:none}
  #tablewrap{display:block}
  header.top h1{font-size:19px}
  .ql{padding:18px 28px}
  .ql .qlt{font-size:20px}
  .ql .ic{font-size:30px}
}
@media (max-width:480px){
  .wrap{margin:10px; padding:18px 16px 48px}
  .wrap h1{font-size:1.32em}
  .wrap h2{font-size:1.16em}
}
@media print{
  body{background:#fff}
  .wrap{max-width:none; margin:0; padding:0; border:none; box-shadow:none}
  .wrap h1{border-bottom:2px solid #000}
  .wrap h2{border-left:4px solid #000}
  .wrap h3{color:#000}
  .wrap hr{border-top:1px solid #999}
  a{color:#000; text-decoration:none}
}


/* ===== VOX RARA トップページ（index.html） ===== */
body.home{padding-bottom:0}
.hero{
  text-align:center; padding:46px 18px 34px;
  background:linear-gradient(180deg,#ffffff,#f6f1e8);
  border-bottom:1px solid var(--line);
}
.hero .brand{
  font-family:"Times New Roman",serif; font-weight:700;
  font-size:34px; letter-spacing:.34em; text-indent:.34em; color:var(--ink);
}
.hero .hero-sub{font-size:12.5px; letter-spacing:.18em; color:var(--sub); margin-top:9px}
.hero .tagline{
  max-width:620px; margin:16px auto 0; font-size:15px; line-height:1.8;
  color:var(--accent); font-weight:700; letter-spacing:.02em;
}
.home-main{max-width:820px; margin:0 auto; padding:10px 16px 44px}
.sect{
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:12px; padding:18px 20px; margin:18px 0; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.sect > h2{font-size:16px; font-weight:800; color:var(--accent); margin:0 0 12px; letter-spacing:.03em}
.sect p{margin:.5em 0; line-height:1.85}
.note-sm{font-size:12px; color:var(--sub); line-height:1.65; margin-top:.7em}
dl.info{margin:.3em 0 0; display:grid; grid-template-columns:1fr; gap:9px}
dl.info > div{display:flex; gap:12px; align-items:baseline}
dl.info dt{flex:0 0 5.4em; color:#fff; background:var(--accent2); font-size:11.5px; font-weight:700; text-align:center; border-radius:6px; padding:3px 6px; letter-spacing:.03em}
dl.info dd{flex:1; font-size:14px; line-height:1.6}
dl.info dd b{color:var(--accent)}
.work-head{border-left:4px solid var(--accent); padding-left:13px; margin:22px 0 14px}
.work-head .composer{font-family:"Times New Roman",serif; font-size:18px; color:var(--accent); font-weight:700}
.work-head .work-title{font-size:23px; font-weight:700; letter-spacing:.05em; margin-top:2px}
.work-head .work-title span{display:block; font-size:12px; color:var(--sub); font-weight:400; letter-spacing:.08em; margin-top:5px}
.maestro{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.maestro .mphoto{width:104px; height:132px; object-fit:cover; object-position:center 8%; border:1px solid var(--line); border-radius:8px; background:#efe7d6; flex:0 0 auto}
.maestro .mwho{flex:1 1 240px; min-width:0}
.maestro .mrole{font-size:12px; color:var(--accent2); font-weight:700; letter-spacing:.04em; margin-bottom:5px}
.maestro .mname{font-size:16px; font-weight:800; letter-spacing:.04em}
.maestro .mname span{font-size:11.5px; color:var(--sub); font-weight:400; margin-left:8px}
.maestro .mbio{font-size:12.5px; line-height:1.85; color:var(--sub); margin-top:6px}
.contact-box{text-align:center}
.mailbtn{
  display:inline-flex; align-items:center; gap:8px; margin:10px 0 6px;
  font-size:16px; font-weight:700; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#7a1f1f,#b23a3a);
  border-radius:12px; padding:13px 22px; box-shadow:0 3px 10px rgba(60,30,20,.22);
}
.mailbtn:hover{filter:brightness(1.06)}
.site-foot{text-align:center; font-size:11px; letter-spacing:.1em; color:var(--sub); padding:24px 12px 30px; border-top:1px solid var(--line); background:#faf8f4}
@media (min-width:620px){ dl.info{grid-template-columns:1fr 1fr; gap:10px 22px} }
/* 第1回演奏会: UPCOMING 感を強調 */
.up-eyebrow{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.12em;
  color:#fff; background:var(--accent2); border-radius:6px; padding:3px 11px; margin-bottom:11px;
}
.up-date{
  font-family:"Times New Roman",serif; font-weight:700; color:var(--accent);
  font-size:33px; letter-spacing:.01em; line-height:1.1; margin:0 0 4px;
}
.up-date .dow{font-size:14px; color:var(--sub); margin-left:10px; letter-spacing:.12em; font-family:var(--sans); font-weight:700}
.up-lead{font-size:13px; color:var(--sub); line-height:1.75; margin:2px 0 15px}
.work-desc{font-size:13.5px; color:var(--sub); line-height:1.9; margin:12px 0 0}
.detail-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:15px;
  font-size:13px; font-weight:700; text-decoration:none; letter-spacing:.02em;
  color:var(--accent); background:#f4e9e9; border:1px solid #e3c9c9;
  border-radius:999px; padding:9px 16px;
}
.detail-link:hover{background:var(--accent); color:#fff; border-color:var(--accent)}