:root {  --padX: clamp(8px, 4vw, 24px);
  --bg:    #ffffff;
  --soft:  #e2ebf2;   /* セクション背景 */
  --soft2:  #d9e0e8;   /* 明るい背景 */
  --fg:    #1e293b;   /* 文字色（濃紺グレー） */
  --muted: #64748b;   /* 枠/薄文字 */
  --link:  #2563eb;   /* 通常リンク */
  --link-hover:#3b82f6; /* hoverリンク */
  --maxw: 1120px; /* 横幅 */
  --radius:4px;  /* 角丸 */}
*{ box-sizing:border-box }/* ズレ防止 */
ul {margin: 0; padding: 0;}

/* === Base === */
body{margin:0; font-family: system-ui, "Noto Sans JP", sans-serif; color:var(--fg); 
  background:var(--soft); line-height:1.8;font-size: 16px;}
  @media (max-width: 768px) {body { font-size: 14px; }}
a{color:var(--link); text-decoration:none; transition: color .2s;}
a:hover{ color:var(--link-hover);}
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--padX); }

/* ===== ヘッダ===== */
#siteHeader{position:sticky; top:0; z-index:40;/* 上部固定 */
  background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);/* 白半透明 */
  color:inherit;}
#siteHeader .topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px var(--padX); flex-wrap:wrap;}
/* ロゴ */
#siteHeader .brand{display:flex; align-items:center; color:inherit; text-decoration:none;}
#siteHeader .brand-name{
  font-family: 'Archivo Black', sans-serif;
  font-size:2rem; line-height:1; padding-left:4px; white-space:nowrap;letter-spacing: -0.06em;}
/* Nav (共通) */
#siteHeader .menu{ margin-left:auto; }
#siteHeader .menu ul{ list-style:none; display:flex; gap:0.3rem; padding:0; margin:0; }
#siteHeader .menu a{ text-decoration:none; color:inherit; display: block; align-items:center; gap:6px; padding:4px 6px; }
#siteHeader .menu a:hover{ color: var(--link-hover); }
#siteHeader .menu .ico{ width:1.5em; height:1.5em; flex-shrink:0; }
/* トグル（チェックボックス方式） */
#nav-toggle{ position:absolute; left:-9999px; } 
.hamburger{ display:none; margin-left:auto; width:40px; height:32px; position:relative; cursor:pointer;overflow:hidden;}
.hamburger::after{ content:none !important; background:none !important; box-shadow:none !important; }
.hamburger::before{content:""; position:absolute; inset:9px 8px;background:repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 6px);}
/* 760px以下 */@media (max-width:760px){.hamburger{ display:block; }
#siteHeader .menu{width:100%; order:3;max-height:0; overflow:hidden; transition:max-height .25s ease;}
#siteHeader .menu ul{ flex-direction:column; gap:.5rem; padding:.5rem 0; }
#nav-toggle:checked ~ .menu{ max-height:480px; } /* 開く */}
/* 元データをいじる */

/* === Hero / meta === */
.updated{ color:#64748b; font-size:.9rem }
.sub{ font-size:1.05rem; color:#374151 }
.tagline{ margin-top:.25em; color:#64748b; font-style:italic }


/* ===== トップページ===== */
/* ===== Hero ===== */
.hero{position: relative;display: grid;place-items: center;
  min-height: clamp(380px, 48vw, 440px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(206,216,232,0.5)),
              var(--soft);overflow: hidden;}
.hero-circle{position: absolute;width: min(48vmin, 420px);
  height: width;object-fit: cover;opacity: .16;}
.hero-copy{position: relative;text-align: center;padding-inline: var(--padX);}
.hero-logo{max-width: 180px;width: 40vw;height: auto;margin: 0 auto 1rem;}
.hero-copy .jp{margin: 6px 0 4px;font-size: clamp(24px, 3.2vw, 36px);
  color: var(--fg);letter-spacing: .02em;}
.hero-copy .en{margin: 0;font-size: clamp(12px, 2.2vw, 16px);color: var(--muted);}
/* ===== Category Grid ===== */
.top{ margin: 64px 0px auto; }
.top-grid{display: grid; gap: 16px;grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (min-width: 880px){
.top-grid{list-style: none;margin: 0;padding: 0;display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (min-width: 880px){.top-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }}
.top-card{position: relative;display: block;border-radius: 0;
  overflow: hidden;background: #ddd center/cover no-repeat;
  min-height: 140px;color: var(--fg);text-decoration: none;}
.top-card .card-inner{position: relative;z-index: 1;display: grid; 
  align-content: end;padding: 8px;background: rgba(255,255,255,.7);}
.top-card .ic .ico{width: 2.0em; height: 2.0em;}
.top-card h3{margin: 0;font-size: 1.125rem; font-weight: 700; letter-spacing: .02em;color: var(--fg);line-height: 1.3;}
.top-card p{margin: 0;color: var(--fg);line-height: 1.3;}
.top-grid,.top-grid li {list-style: none !important;margin: 0 !important;padding: 0 !important;}
/* 各カード背景 */
.top-card.is-first   { background-image: url("/img/first.jpg"); }
.top-card.is-chara   { background-image: url("/img/chara.webp"); }
.top-card.is-gallery { background-image: url("/img/gallery.webp"); }
.top-card.is-story   { background-image: url("/img/story.webp"); }
.top-card.is-game    { background-image: url("/img/game.webp"); }
.top-card.is-lore    { background-image: url("/img/lore.webp"); }
/* Hover */
@media (hover:hover){.top-card:hover{ transform: translateY(-2px); transition: transform .2s ease; }}
/* ===== トップここまで===== */




/* ===== 会う===== */
/* ====== キャラカード ====== */
.chara-card{ position:relative; background:var(--soft2,#fff); border:0px solid var(--line,#1b2430);
  border-radius:4px; overflow:hidden; display:block; color:inherit; text-decoration:none; }
.chara-card .media{ width:100%; display:block; object-fit:cover; }
.chara-card .meta{ position: absolute; bottom: 0; width: 100%; background: rgba(230, 238, 245, 0.8); }
.chara-card .name{ font-weight:700; }
.chara-card .catch{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.badge-era {
  position: absolute;font-family: 'Archivo Black', sans-serif;
  top: 2px;left: 2px;padding: 8px 10px;
  font-weight: 700;font-size: 1.5rem;
  color: #ffffff;clip-path: polygon(
    25% 5%, 75% 5%,100% 50%,
    75% 95%, 25% 95%,0% 50%);
  border: 1px;
  line-height: 1;
  text-align: center;
  min-width: 2.2em;           /* 六角形の横幅を確保 */
  box-sizing: border-box;}
.chara-card-s .badge-era{
  padding: 4px 7px; font-size: 1rem; min-width: 1.4em;
}
.badge-bd{ position:absolute; top:0; right:0; transform:translate(15%,-15%); line-height:1; display:none; }
.is-birthday .badge-bd{ display:block; }
.badge-bd::before{ content:"🌸"; font-size:1.5rem; }

.chara-card-m .media{ aspect-ratio:3/8; }
.chara-card-m .name{ font-size:1.75rem; margin:4px 0 2px; }
.chara-card-s .media{ aspect-ratio:3/4; }
.chara-card-s .name{ text-align:center; margin:6px 0 8px; }
.element-earth .badge-era{ background: #6a5d3a; }  /* 渋めのオリーブブラウン */
.element-water .badge-era{ background: #094977; }  /* 深みのあるブルーグレー */
.element-fire  .badge-era{ background: #a94736; }  /* レンガ色（赤茶系） */
.element-air   .badge-era{ background: #47a9b9; }  /* 落ち着いたティールグリーン */
.element-light .badge-era{ background: #bfa248; }  /* アンティークゴールド */
.element-dark  .badge-era{ background: #645278; }  /* スモーキーな紫グレー */
.element-other  .badge-era{ background: #1b1c23; } 
.element-none  .badge-era{ background: #333338; } 
/* ====== グリッド ====== */
.grid {
  display: grid;
  gap: 16px;
}
.grid-m { grid-template-columns: repeat(3, 1fr); }
.grid-s { grid-template-columns: repeat(6, 1fr); }

/* コンテナ：横幅を締める */
.wrap{max-width:1120px;/* 全体幅 */
  margin-inline:auto;padding:24px 16px;}
  @media (max-width: 640px) {.wrap{padding:8px 8px;}}

/* Mカードのグリッド：PC=3列 / タブ=2列 / モバイル=1列 */
.grid{ display:grid; gap:16px; }
.grid-m{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* 画面がかなり狭くなるまで3列維持（ギリまで粘る） */
@media (max-width:820px){
  .grid-m{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .grid{ gap:12px; }
  .card-m .meta{ padding:6px 8px 10px; }
}

/* スマホ：2列に切替（超小幅でも2列を維持） */
@media (max-width:560px){
  .grid-m{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid{ gap:10px; }
  .grid-s { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:640px) {
  body{overflow-x: hidden;}
  .chara-search .grid {grid-template-columns: 1fr;}
  .chara-search select,.chara-search input {
    width: 100%;}}
/* ====== 会うここまで ====== */








/* 見出し */
h1,h2,h3{ font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif; font-weight:700; }
h1{ font-size:clamp(20px,3vw,40px); margin:.2em 0 .1em }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem;}

/* ベース */
.site-header{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;border-bottom:1px solid #eee}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.logo img{width:32px;height:32px;display:block}
.title{font-weight:700;text-decoration:none;color:inherit;white-space:nowrap}


/* 見る */
/* 一覧カード */
.album-grid {display:grid; gap:16px;grid-template-columns: repeat(3, minmax(0,1fr));}
@media (max-width:820px){ .album-grid{gap:2px;grid-template-columns:repeat(2,1fr);} }
.album-card { display:block; background:var(--soft2); color:inherit; text-decoration:none;
  border:1px solid var(--muted); border-radius:12px; overflow:hidden; }
.album-card .thumb { width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }
.album-card .meta { padding:8px 10px; }
.album-card .name { margin:0 0 2px; font-weight:700;}
/* 詳細グリッド */
.gallery-grid {margin-top:12px;display:grid; gap:8px;grid-template-columns: repeat(3, minmax(0,1fr));}
@media (max-width:820px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);} }
.gitem { display:block; background:#fff; border:1px solid var(--muted); border-radius:4px; overflow:hidden; }
.gitem img { width:100%; height:100%; object-fit:cover; display:block; }
/* 見るここまで */

/* ===== 読む ===== */
 .story-grid{display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width:820px){  .story-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){  .story-grid{ grid-template-columns:repeat(1,1fr);} }
 .story-card{position:relative; overflow:hidden;
  background:var(--soft2); color:inherit; text-decoration:none;
  border:2px solid var(--muted); border-radius:4px;}
 .story-card > a{ display:block; color:inherit; text-decoration:none; }
 .story-card .cover{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.20; filter:saturate(.95) contrast(.95);
  pointer-events:none;}
 .story-card .meta{position:relative; padding:12px 12px 14px;}
 .story-card .title{margin:0 0 4px; font-weight:800; font-size:1.25rem; letter-spacing:.02em;}
 .story-card .sub{color:var(--muted); font-size:0.875rem; line-height:1.4;}
/* 最初のsub（[短編]など）をやや強調 */
 .story-card .sub:first-of-type{ font-weight:700; color:var(--fg); opacity:.95; }
/* 右上バッジ（🖊️ or ⭐） */
 .story-card .badge.mark{
  position:absolute; top:6px; right:6px; z-index:1;
  background:rgba(255,255,255,.88); border:1px solid var(--muted);
  border-radius:12px; padding:2px 6px; line-height:1;}
  .novel {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.75;
}
.novel p {
  margin: 0 0 1em;
  text-align: justify; /* 両端揃え */
}

/* 読むここまで */

/* ===== 遊ぶ ===== */
.game-grid {display:grid;gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:820px){.game-grid{grid-template-columns:repeat(2,1fr);}}
.game-card {
  position:relative;overflow:hidden;
  background:var(--soft2);color:inherit;
  border:2px solid var(--muted);border-radius:4px;}
.game-card > a {display:block;color:inherit;text-decoration:none;}
.game-card .cover {position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.20;filter:saturate(.95) contrast(.95);pointer-events:none;}
.game-card .meta {position:relative;padding:12px 12px 14px;}
/* タイトル（必ず折り返し） */
.game-card .title {margin:0 0 6px;font-weight:800;font-size:1.25rem;letter-spacing:.02em;
  display:block;max-width:100%;white-space:normal!important;
  overflow-wrap:anywhere;word-break:break-word;}
/* ジャンルなど */
.game-card .sub {color:var(--muted);font-size:0.875rem;line-height:1.4;}

/* ===== First ===== */
.album-grid .title{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.album-grid .tag{font-size:.85rem;border:1px solid var(--muted);padding:.1rem .45rem;border-radius:.4rem;opacity:.85}