/* styles.css — Gothic & Dreamlike theme */
:root{
  /* Base */
  --bg:#fff;                   /* 背景を純白に */
  --bg-soft:#faf7ff;            /* うっすら淡紫 */
  --ink:#221a26;                /* ほのかに紫みの黒 */
  --muted:#6e6476;

  /* Lavender family */
  --lav-100:#f7f2ff;
  --lav-200:#eee7ff;
  --lav-300:#dbccff;
  --lav-400:#c4b0ff;

  /* Gothic accent */
  --crimson:#b30a2c;            /* 真紅（主アクセント） */
  --crimson-700:#7f0a21;

  /* Lines / shadow */
  --border:#e9e4f7;
  --shadow:0 12px 24px -16px rgba(20,10,30,.35);

  /* widths / gaps */
  --maxw:1200px;
  --gap:1rem;

  /* fonts */
  --jp-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  --jp-serif: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--jp-sans);
  color:var(--ink);
  line-height:1.6;
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--bg-soft) 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 100%, #fbf8ff 0%, transparent 60%),
    var(--bg);
}

/* 追加（上の方でOK） */
html{
  scrollbar-gutter: stable both-edges;  /* 対応ブラウザではこれで揃う */
}

/* 古めブラウザ向けフォールバック */
body{
  overflow-y: scroll;  /* 常に縦スクロール領域を確保（実質の幅を固定） */
}

/* スキップリンク */
.skip{
  position:absolute; left:-9999px; top:auto;
}
.skip:focus{
  left:0; top:0; background:#000; color:#fff; padding:.5rem 1rem; z-index:1000;
}

/* ヘッダー */
.site-header{
  border-bottom:1px solid var(--border);
  padding:.75rem 1rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:.75rem}
.logo{width:150px; height:150px; object-fit:contain}
.site-title{font-size:1.5rem; margin:0}
.top-nav{margin-left:auto; display:flex; gap:.75rem}
.menu-toggle{
  margin-left:auto;
  padding:.5rem .75rem; border:1px solid var(--border);
  background:linear-gradient(#fff, var(--lav-100));
  border-radius:.5rem;
}
.menu-toggle:hover{ border-color:var(--lav-300); }

/* レイアウト（モバイル＝縦並び） */
.layout{
  max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns: 1fr; gap:var(--gap); padding:var(--gap);
}
.site-aside,
.site-main{
  background:#fff;
  border:1px solid var(--border);
  border-radius:.9rem;
  box-shadow: 0 1px 0 #fff inset, var(--shadow);
  padding:1rem;
}
.site-aside{display:none;}
.site-aside.open{display:block}

.side-links{list-style:none; padding:0; margin:0}
.side-links a{
  display:block;
  padding:.55rem .75rem .55rem .9rem;
  border-radius:.5rem;
  text-decoration:none;
  color:var(--ink);
  border-left:3px solid transparent;
  transition:border-color .2s, border-left-width .2s, background-color .2s;
}
.side-links a:hover,
.side-links a:focus{
  background:var(--lav-100);
  border-left-color:var(--crimson);
  border-left-width:4px;          /* ← ホバーで太く */
}
.side-links a[aria-current="page"]{
  background:linear-gradient(90deg,var(--lav-200),#fff 60%);
  border-left-color:var(--crimson);
  border-left-width:4px;          /* ← 現在ページで太く */
  font-weight:600;
}

/* フッター */
.site-footer{
  border-top:1px solid var(--border);
  padding:1rem; text-align:center; color:#666;
}

/* 768px以上でサイド固定の2カラム */
@media (min-width: 768px){
  .menu-toggle{display:none}
  .layout{
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
  .site-aside{display:block; position:sticky; top:1rem; height:fit-content}
}

/* 見出し装飾 */
h1,h2,h3{ font-family:var(--jp-serif); letter-spacing:.02em; line-height:1.3; }
h2{
  position:relative;
  padding-bottom:.6rem;
  margin-bottom:1.2rem;
  border-bottom:1px solid var(--lav-300);
}
h2::before{
  content:"◆";
  color:var(--crimson);
  font-size:.9rem;
  position:absolute; left:-.2rem; top:-.3rem;
}
h2::after{
  content:"";
  position:absolute; left:1.2rem; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg, rgba(179,10,44,.25), transparent 70%); /* fallback */
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--crimson) 30%, transparent),
    transparent 70%);
  opacity:.5;
}

/* リンク */
a{ color:inherit; }
a:not(.btn){
  text-decoration:none;
  background-image:linear-gradient(var(--crimson),var(--crimson));
  background-size:0% 1.5px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .25s ease;
}
a:hover,a:focus{ background-size:100% 1.5px; }

/* フォーカス/選択 */
:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }
::selection{ background:rgba(179,10,44,.18); color:var(--ink); }

/* 小物 */
.news{padding-left:1rem}
.news li{margin:.25rem 0}

/* 作品・音楽のULをリセット */
.games,
.musics{
  list-style: none;
  margin: 0;
  padding: 0;      /* ←これが効く */
}

/* カード間の区切り（好みで） */
.games li,
.musics li{
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--lav-300);
}

.games h4,
.musics h4{ margin: 0 0.5rem; }
h3 {
  margin: 1rem 0 0.5rem; /* 好みで */
}
.gametitle,
.CDtitle{
  max-width: 50%; /* 画面幅を超えないように */
  height: auto;
  display:block;
  margin:1rem 0;
}
.site-main{
  overflow-x: hidden;
}