:root{
  --bg:#fafafa;--paper:#fff;--fg:#111;--mute:#666;--line:#e6e6e6;--link:#0b65c2;
}
[data-theme="dark"]{
  --bg:#0e0e0f;--paper:#18191a;--fg:#e4e4e4;--mute:#aaa;--line:#333;--link:#6ca0ff;
}
*{box-sizing:border-box;transition:background .3s,color .3s,border-color .3s}
html,body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.brand img{height:30px}
.brand span{font-weight:700;letter-spacing:.04em;margin-left:8px}
nav{margin-left:auto;display:flex;gap:10px;align-items:center}
nav a{font-size:14px;padding:6px 10px;border-radius:8px}
nav a:hover{background:rgba(0,0,0,.05)}
.theme-toggle{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:4px 8px;font-size:13px;cursor:pointer}

.hero{max-width:1100px;margin:0 auto;padding:24px 16px;display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center}
.hero img{width:100%;height:auto;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.1)}
.heroText h1{margin:0;font-size:26px}
.heroText p{margin:8px 0 0 0;color:var(--mute);line-height:1.8}

.section{max-width:1100px;margin:24px auto;padding:0 16px}
.head{display:flex;align-items:end;gap:10px;margin:10px 0}
.head h2{margin:0;font-size:20px}
.head small{color:var(--mute)}

.card{
  display:flex;align-items:center;gap:18px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.05);
  padding:16px;
}
.thumb{
  width:35%;max-width:280px;border-radius:10px;object-fit:cover;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}
.text{flex:1;}
.text h3{margin:0 0 6px 0;font-size:16px}
.text p{margin:4px 0;color:var(--mute);line-height:1.8}
.btn{display:inline-block;margin-top:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.btn:hover{background:#f4f7ff;color:var(--link);border-color:#cbdaf6}
@media(max-width:700px){
  .card{flex-direction:column}
  .thumb{width:100%;max-width:none}
}
footer{border-top:1px solid var(--line);margin-top:24px}
.foot{max-width:1100px;margin:0 auto;padding:16px;color:#888;font-size:13px}

/* --- Profile Card --- */
.profile{
  max-width:1100px;margin:28px auto 0;padding:0 16px;
}
.profileCard{
  display:flex;gap:16px;align-items:center;
  background:var(--paper);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.05);
  padding:16px;
}
.profile .avatar{
  width:88px;height:88px;border-radius:50%;
  object-fit:cover;box-shadow:0 3px 8px rgba(0,0,0,.08);
}
.profile .bio{flex:1}
.profile .bio h3{margin:0 0 6px 0;font-size:16px}
.profile .bio p{margin:0;color:var(--mute);line-height:1.8}

/* --- Generation badges --- */
.gen{display:inline-flex;align-items:center;gap:6px;font-size:12px;border-radius:999px;padding:3px 8px;border:1px solid var(--line)}
.gen small{opacity:.7}
.gen-h{background:#eef4ff;border-color:#cfe0ff}  /* 初音 HATSUNE */
.gen-k{background:#f8f3e6;border-color:#eadfbf}  /* 祈音 KION */
.tagline{color:var(--mute);font-size:13px;margin-top:6px}
.note{margin:10px 0 0 0;font-size:13px;color:var(--mute);background:rgba(0,0,0,.03);border:1px solid var(--line);border-radius:8px;padding:8px 10px}


/* ===== Layout Fix: 左寄り解消・中央コンテナ化 ===== */
:root{ --page-w:1100px; --side:20px; }

/* overflow-x:hidden は削除 */
html,body{
  margin:0;
  padding:0;
  overflow-x:auto; /* ←横スクロールを許可する */
}




/* ============================
   音楽ページ（music_hatsune.html）共通レイアウト
   ============================ */

.music-page {
  max-width: 960px;          /* ページの横幅を制限 */
  margin: 0 auto;            /* 自動的に左右中央寄せ */
  padding: 40px 24px;        /* 余白（上下40px 左右24px） */
  line-height: 1.8;          /* 読みやすい行間 */
  text-align: left;          /* テキストは左揃え（中央寄せではなく整然表示） */
}

.music-page h1, 
.music-page h2, 
.music-page h3 {
  text-align: center;        /* 見出しは中央揃え */
  margin-bottom: 20px;
}

.music-page p {
  margin-bottom: 16px;
}

.music-page .lyrics {
  white-space: pre-line;     /* 歌詞の改行を反映 */
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 1.05em;
  text-align: center;        /* 歌詞部分は中央寄せ */
}

/* ==== Story Section (novelリンク用) ==== */
.story-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  margin: 40px auto;
  padding: 24px;
  max-width: 960px;
  border: 1px solid rgba(15,26,43,.08);
}
.story-thumb {
  flex: 0 0 320px;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  margin-right: 24px;
}
.story-text { flex: 1; min-width: 260px; }
.story-text h2 {
  margin-top: 0;
  margin-bottom: .4em;
  color: #0F1A2B;
  font-size: 1.4em;
  border-bottom: 2px solid #D8C47A;
  display: inline-block;
  padding-bottom: .2em;
}
.story-text p {
  color: #223;
  margin: .6em 0 1.2em;
  font-size: 1rem;
  line-height: 1.8;
}
.read-link {
  display: inline-block;
  background: #0F1A2B;
  color: #fff;
  padding: .6em 1.2em;
  border-radius: 8px;
  text-decoration: none;
  transition: .2s;
  font-weight: 500;
  letter-spacing: .03em;
}
.read-link:hover {
  background: #D8C47A;
  color: #0F1A2B;
}
@media (max-width:700px){
  .story-block { flex-direction: column; text-align: center; }
  .story-thumb { margin: 0 0 16px 0; width: 90%; }
}


/* ────────────────
   novel2 共通スタイル
──────────────── */
#novel {
  white-space: pre-wrap;           /* 改行を保持して自然に折返す */
  height: calc(100vh - 220px);     /* 画面の高さに合わせて可視領域を確保 */
  overflow: auto;                  /* スクロールを有効化（縦書き時は横スクロールになる） */
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール対応 */
  padding: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.card {
  overflow: visible;  /* 本文領域がはみ出してもスクロールできるように */
}

.inner {
  overflow: visible;
}

/* 縦書き／横書き切替 */
.vertical #novel {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.horizontal #novel {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.novelbox { display: none; }         /* 初期は必ず非表示（枠も消える） */
.novelbox.ready { display: block; }  /* 読み込み成功したらだけ表示 */

// 読み込み成功時
if (novelEl) {
  novelEl.textContent = txt;   // 既存
  novelEl.classList.add('ready');  // ← これを足す
}


#novelWrap {
  writing-mode: vertical-rl;
  text-orientation: upright;
  overflow-y: hidden; /* ← 内側スクロールを消す */
  overflow-x: auto;   /* ← 横方向だけスクロールを許可（縦書きなのでこれでOK） */
  width: 90%;
  height: 80vh;
  margin: 0 auto; /* ← 全体を中央寄せ */
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
  line-height: 2.2;
}

#novelText {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0 auto;
  padding: 0;
  max-height: none; /* ← 内部のスクロール発生を防止 */
  overflow: visible; /* ← 内側スクロールを無効に */
}

/* === 通常ページの本文中央寄せと左右余白修正 === */
section {
  max-width: 960px;        /* 全体の幅を制限 */
  margin: 0 auto 40px;     /* 左右自動＝中央寄せ、下に40px余白 */
  padding: 0 24px;         /* 左右に24pxの余白を追加 */
  line-height: 1.9;
}

/* 見出しのバランス */
section h2 {
  text-align: left;
  margin-bottom: 12px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  font-size: 20px;
}


/* === トップ見出し（ukon / 最新作）の左寄り修正 === */
h1, h2 {
  margin-left: 24px;      /* 左に余白 */
  margin-right: 24px;     /* 右も対称に */
}

header h1 {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;
}

main > h2 {
  max-width: 960px;
  margin: 40px auto 20px; /* 上下のバランスも整える */
  padding: 0 24px;
  text-align: left;
}

/* === story-block 内の余白調整 === */
.story-block {
  gap: 32px;              /* 画像とテキストの間の距離（お好みで20〜40px） */
}

.story-text {
  display: flex;
  flex-direction: column;
  gap: 18px;              /* タイトル・本文・ボタンの間隔（お好みで） */
}

.story-text h2 {
  margin-bottom: 4px;     /* タイトル下の余白を少なめに */
}

.story-text p {
  margin: 0;              /* pタグ同士の余白をリセット */
}
.gen-m {
  background:#eaf7f0;      /* 優しいグリーン系（共鳴・再生の象徴） */
  border-color:#c6e2d0;
}



#rv-header{
  background:#2e2e2e !important;   /* グレー（暗すぎず、白ロゴが映える） */
  color:#fff !important;
  border-bottom:1px solid #444 !important;
}
#rv-header .rv-wrap{
  max-width:var(--maxw,900px);
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.rv-mark{
  width:46px;
  height:auto;
  display:block;
}
.rv-title{
  margin:0;
  font:500 18px/1.2 "Helvetica Neue","Hiragino Kaku Gothic ProN",Arial,sans-serif;
  letter-spacing:.4px;
}


/* --- hero2：画像30%＋テキスト右回り込み（2025-10-31） --- */
.hero2 { /* 既存の幅指定があればそのままでOK */
  box-sizing: border-box;
}

/* 画像を左に回り込ませる */
.hero2 .kv {
  float: left;
  width: 30% !important;
  height: auto;
  display: block;
  margin: 0 20px 12px 0;   /* 右と下に余白 */
  border-radius: 6px;
  object-fit: cover;
}

/* 回り込み解除（画像の下で段落を通常フローに戻す用） */
.hero2 .clearfix { clear: both; }

/* モバイルでは縦積み */
@media (max-width: 768px){
  .hero2 .kv { float: none; width: 100% !important; margin: 0 0 12px 0; }
}


/* --- sakura案内カード用 --- */
.section.latest .card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 16px;
  margin: 24px auto;
  max-width: 900px;
}

.section.latest .card img.thumb {
  width: 30%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

.section.latest .card .text {
  flex: 1;
  line-height: 1.8;
  text-align: justify;
}

.section.latest .card .text h2 {
  margin-top: 0;
  font-size: 1.3em;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .section.latest .card {
    flex-direction: column;
    text-align: left;
  }
  .section.latest .card img.thumb {
    width: 100%;
  }
}


/* --- カード内ボタンのデザイン --- */
.btn.read-link {
  display: inline-block;
  background: linear-gradient(135deg, #1a3a6e, #4b7bd9); /* 深青系 */
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
}

.btn.read-link:hover {
  background: linear-gradient(135deg, #345fa8, #6da3ff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* ▼ RSS案内セクション --------------------------------------------------- */
.rv-rss-info {
  width: 100%;
  padding: 40px 16px;
  background: #0F1A2B;
  box-sizing: border-box;
}

.rv-rss-info .rss-inner {
  max-width: 880px;
  margin: 0 auto;
  background: #E8EBEE;
  padding: 32px 32px 40px;
  border-radius: 16px;
  border: 1px solid #c7d0dd;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.25);
}

.rv-rss-info .rss-title {
  font-size: 1.55em;
  font-weight: 600;
  color: #0F1A2B;
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 5px solid #D8C47A;
}

.rv-rss-info .rss-desc {
  font-size: 1em;
  color: #222;
  line-height: 1.85;
  margin-bottom: 1.1em;
}

.rv-rss-info .rss-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.rv-rss-info .rss-btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98em;
  transition: 0.2s ease;
}

/* 説明ページボタン（サブ） */
.rv-rss-info .rss-btn.sub {
  background: #ffffff;
  border: 1px solid rgba(15,26,43,0.4);
  color: #0F1A2B;
}
.rv-rss-info .rss-btn.sub:hover {
  background: #f7f7f7;
}

/* RSS フィードへのリンク（メインボタン） */
.rv-rss-info .rss-btn.main {
  background: #D8C47A;
  border: 1px solid #b39a54;
  color: #0F1A2B;
}
.rv-rss-info .rss-btn.main:hover {
  background: #cdb76c;
}