/* キャラクター一覧 */
.character-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    padding: 40px 20px;
  }
  
  .character-card {
    width: 220px;
    background: #fffdf9;
    border: 1px solid #e1d9c7;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
    transform: translateY(0);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  
  .character-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  }
  
  .character-card img {
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  
  .character-card h2 {
    font-size: 20px;
    margin: 12px 0 4px;
    color: #333;
  }
  
  .character-card .catch {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
  }
  
  .character-card a {
    text-decoration: none;
    color: inherit;
  }

 /* ページ背景は既存の #f8f3e7 を継承想定 */

/* 見出しまわり（コンパクト） */
.site-header.compact{ padding:14px 16px; }
.breadcrumbs{ font-size:.9rem; color:#6b635b; }
.breadcrumbs a{ color:#6b635b; text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.site-logo{ font-size:1.1rem; margin:.3rem 0 0; }

/* シートレイアウト */
.sheet{
  --card-bg:#fffdf9;
  max-width:1024px; margin:16px auto; padding:20px;
  display:grid; grid-template-columns: 380px 1fr; gap:28px;
  background: var(--card-bg);
  border:1px solid #e1d9c7; border-radius:16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.sheet-visual{
  margin:0; align-self:start; position:relative;
  background:#faf7f0; border:1px solid #e6dccb; border-radius:12px; overflow:hidden;
}


.sheet-body{ align-self:start; }
.badge{
  display:inline-block; padding:.3rem .6rem; border:1px solid #e6dccb;
  border-radius:999px; background:#fff; color:#6b635b; font-size:.85rem;
}
.name{
  font-family:"Noto Serif JP",serif; font-size:clamp(1.2rem,2.4vw,1.6rem);
  margin:.5rem 0 1rem; line-height:1.5;
}

/* スペック表 */
.spec{ display:grid; grid-template-columns: 110px 1fr; gap:8px 16px; margin: 6px 0 16px; }
.spec dt{ color:#6b635b; }
.spec dd{ margin:0; }

/* 本文 */
.intro{ line-height:1.9; margin: .8rem 0 1.2rem; }
.list{ padding-left:1.1em; margin:.4rem 0 1.2rem; }
.list li{ margin:.25rem 0; }

.links{ padding-left:1.1em; }
.links li{ margin:.25rem 0; }

/* ナビ */
.pager{ display:flex; gap:10px; align-items:center; margin-top:18px; }
.pager .spacer{ flex:1; }
.btn{ display:inline-block; padding:.7rem 1rem; border-radius:10px; background:#caa95a; color:#fff; text-decoration:none; font-weight:700; border:1px solid #b9933f; }
.btn.ghost{ background:#fff; color:#6b635b; border-color:#e0d6c3; }
.btn:hover{ opacity:.92; }

/* モバイル */
@media (max-width: 860px){
  .sheet{ grid-template-columns: 1fr; }
  .sheet-visual{ order:2; }
  .sheet-body{ order:1; }
}


.switch-btn {
  margin-top: 10px;
  padding: 6px 14px;
  background: #444;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.switch-btn:hover {
  background: #666;
}

.character-card:hover{
  transform: translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}


.sheet-visual { position: relative; }


/* --- 通常表示（フェード不使用ページ） --- */
.sheet-visual img{
  display:block;
  width:100%;
  height:auto;
}
.sheet-visual:not(.fade-switch) img{
  position: static !important;
  opacity: 1 !important;
  display: block !important;
}

/* --- フェードON（.fade-switch が付いた figure だけ適用） --- */
.sheet-visual.fade-switch{ position:relative; }
.sheet-visual.fade-switch img{
  position:absolute; inset:0;
  width:100%; height:auto;
  opacity:0; transition:opacity .28s ease;
}
.sheet-visual.fade-switch img.is-visible{
  opacity:1; position:relative; /* 親の高さ維持 */
}
/* 動きを減らす設定の人にはアニメを切る —— ★ここを必ず閉じる！ */
@media (prefers-reduced-motion: reduce){
  .sheet-visual.fade-switch img{ transition: none; }
} /* ← この閉じカッコが無いと全部崩れます */

/* --- フェード時にボタンが埋もれないよう最前面へ --- */
.sheet-visual .switch-btn{
  position: relative;   /* z-indexを効かせるためにpositionを付与 */
  z-index: 10;          /* 画像より上に */
}

/* --- 非表示の画像はクリックを拾わない（透明レイヤー対策） --- */
.sheet-visual.fade-switch img{ pointer-events: none; }
.sheet-visual.fade-switch img.is-visible{ pointer-events: auto; }

/* 押している状態を軽くハイライト */
.switch-btn[aria-pressed="true"]{
  filter: brightness(1.05);
  box-shadow: 0 0 0 2px rgba(202,169,90,.25) inset;
}

/* キーボード操作のフォーカスが見えるように */
.switch-btn:focus-visible{
  outline: 2px solid rgba(202,169,90,.9);
  outline-offset: 2px;
  border-radius: 8px;
}