/* ===============================
   world.html用
   Base: uten/style.css
=============================== */

:root {
  /* Base tones */
  --color-ink:          #e8e6df;                      /* 通常テキスト */
  --color-accent:       #dbcc8d;                      /* ゴールドのアクセント */
  --color-overlay:      rgba(0, 0, 0, 0.78);           /* 黒透過ボックス */
  --color-border:       rgba(255, 255, 255, 0.1);
  --color-border-strong:rgba(255, 255, 255, 0.3);
  --color-muted:        rgba(255, 255, 255, 0.6);
  --color-white:        #ffffff;
  --color-black:        #222222;

  /* フォント、テキスト */
  --font-mincyo: "Noto serif", serif;
  --font-alphabet: "Cormorant Garamond", "Times New Roman", serif;
  --font-size-small: 0.85rem;

  /* レイアウト関連 */
  --max-width: 1000px;
  --radius-box: 12px;
  --radius-small: 4px;
  --transition-fast: 0.25s ease;

  --nav-h: 64px;          /* ← navの高さに合わせる */

  --uten-gold:#c6a75c;
  --fixed-header: 72px;

}



/* =============== 全体 =============== */
body {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);  /* 余白分を確保 */
}




/* =============== 上部メニュー =============== */

.site-menu-nav2 {
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: var(--font-mincyo);
  border-bottom: 1px solid var(--color-border-strong);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-menu-ul2 a {
  display: inline-block;
  margin: 0 1.5rem;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.site-menu-ul2 a:hover {
  color: var(--color-white);
}

.site-menu-ul2 a.is-active {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 6px;
}



/* =============== メイン部分 =============== */
.main_chara {
  background: var(--color-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-box);
  padding: 2rem;
  margin: 3rem auto;
  max-width: var(--max-width);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  text-align: center;
}

h2.section-title {
  min-width: 220px;
  min-height: 160px;
  background-size: contain;
  background-position: center;
}



/* =============== ページ内リンク =============== */
.chara-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 6rem 1rem 3rem;
  text-align: center;
}

.chara-card {
  background: #000;
  border: 1px solid rgba(198,167,92,0.4);
  border-radius: 12px;
  padding: 1.2rem 1rem;
  text-decoration: none;
  color: #f5f2e8;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.chara-card:hover {
  border-color: rgba(198,167,92,0.8);
  box-shadow: 0 0 12px rgba(198,167,92,0.25);
}

.chara-card .circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(198,167,92,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: 0.05em;
}
.circle_shita {
  font-weight: 400;
  font-size: .85rem;
  letter-spacing: 0;
}




/* =============== キャラ紹介詳細エリア =============== */
.chara-section {
  display: flex;
  align-items: flex-start;
  min-height: auto; 
}

/* 偶数・奇数で左右切り替え */
.chara-section.odd .chara-img { order: 1; }
.chara-section.odd .chara-text { order: 2; }
.chara-section.even .chara-text { order: 1; }
.chara-section.even .chara-img { order: 2; }

/* 画像領域（背景指定） */
.chara-img {
  flex: 1;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  background-color: #333;
}

#img-sei  { background-image: url("img/sample_sei.png"); }
#img-haru  { background-image: url("img/sample_haru.png"); }
#img-quan  { background-image: url("img/sample_quan.png"); }
#img-henri { background-image: url("img/sample_henri.png"); }



/* =============== キャラ紹介詳細エリア(詳細の表組み) =============== */
.chara-text {
  flex: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: .9rem;
}

.chara-text h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.chara-text h2 span {
  font-size: .85rem;
  opacity: 0.8;
}

/* ① 名前＋バッジ横並び（自然に折り返す） */
.head-row{
  display:flex; align-items:center; gap:.6rem;
  flex-wrap:wrap;
  margin-bottom:.8rem;
}
.ch-name{
  margin:0 1rem 0 .7rem;
  font-size: clamp(20px, 2.6vw, 28px);
}
.ch-name .en{ opacity:.7; font-size:.85em; margin-left:.35rem; }

/* 陣営バッジ（ピル型） */
.badge-faction{
  display:inline-block;
  padding:.15rem .5rem;
  margin-left: 1rem;
  border:2px solid rgba(198,167,92,.55);
  border-radius:999px;
  font-size:.85rem;
  white-space:nowrap;
  position: relative; top: -3px;
  letter-spacing: 1px;
}

/* キャッチ用セリフ */
.chara-quote {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
  color: #d6c38b; /* やや淡い金色 */
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-style: italic;
  display: block;
  text-align: left;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* ② 基本データ（dlの2カラム風） */
.info-list{
  margin:.4rem 0 1rem;
}
.info-list .row{
  display:grid; grid-template-columns: 8em 1fr;
  gap:.6rem; padding:.35rem 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.info-list .row:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }
.info-list dt{
  display: inline-block;      /* 幅を内容に合わせる */
  background: rgba(255, 255, 255, 0.05); /* 背景色 */
  color: #d8cfae;
  padding: 0.2em 0.6em;
  margin-bottom: 0.3em;
  border-radius: 3px;
  font-weight: bold;
  opacity:.8;
  font-size: .83rem;
}
.info-list dd{
  text-align: left;
  margin:0;
}

/* ③ 紹介テキスト */
.lead {
  text-align: left;
  margin: .8rem 0 1.2rem;
  line-height:1.9;
  font-size: .92rem;
}




/* =============== フッター =============== */
footer {
  text-align: center;
  padding: 1rem;
  font-size: var(--font-size-small);
  color: var(--color-muted);
}




/* =============== ▼以下レスポンシブ設定 =============== */
@media (max-width: 768px) {
  .main_chara {
    padding: .7rem;
    margin: .8rem;
  }
  .site-menu-ul2 a {
    margin: 0 0.8rem;
  }
  .chara-section {
    flex-direction: column;
  }
  .chara-text {
    padding: 2rem .6rem;
  }
  .chara-section.odd .chara-img,
  .chara-section.even .chara-img { order: 1; }
  .chara-section.odd .chara-text,
  .chara-section.even .chara-text { order: 2; }
  .chara-quote {
    font-size: 0.93rem;
    margin-bottom: 1rem;
    line-height: 1.4;
  }
  .chara-img{
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 1rem;
  }
}

/* --- モバイル調整（横幅が狭い時は縦並び） --- */
@media (max-width: 640px){
  .info-list .row{
    grid-template-columns: 4rem 1fr;
  }
}