/* ===== total.css (stable/fixed) ===== */

/* 基本 */
:root{ --bg:#0b0b10; --fg:#e9ecf1; --muted:#aab1bd; --line:#232344; --accent:#2f93ff; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; }
a{ color:#8ec3ff; text-decoration:none; } a:hover{ text-decoration:underline; }

/* Header */
header{ display:flex; justify-content:space-between; align-items:center; padding:12px 20px; }
header .brand, header .brand a{ display:flex; align-items:center; height:48px; }
header .brand img, header img.logo{ height:100%; width:auto; display:block; }

/* nav: 横並び固定 */
header nav ul{ display:flex !important; gap:20px; list-style:none; margin:0; padding:0; align-items:center; }
header nav ul li{ margin:0; }

/* 言語ボタン統一 */
.lang-switch{ display:flex; gap:8px; }
.lang-switch button{
  -webkit-appearance:none; appearance:none; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  height:28px; line-height:28px; padding:0 10px; min-width:44px;
  border:1px solid #2a2a46; border-radius:8px; background:#1b1b22; color:var(--fg);
  font:500 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; white-space:nowrap; cursor:pointer;
}
.lang-switch button[aria-current="true"]{ background:var(--accent); color:#04121f; border-color:var(--accent); }

/* Main */
main{ width:100%; max-width:1200px; margin:0 auto; padding:0 16px 48px; }

/* Hero */
.hero.visual{ position:relative; overflow:hidden; border-radius:16px; border:1px solid #232344; }
.hero.visual > img{ width:100%; height:auto; display:block; }
/* テキストを画像外へ（重なり防止） */
.hero-copy{ position:static !important; margin-top:16px !important; padding:0 !important; background:none !important; border:none !important; }

/* Grid */
.grid{ display:grid !important; grid-template-columns:1fr; gap:6px !important; }
@media (min-width:600px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1200px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Card */
.card{ background:linear-gradient(180deg,#182038,#11182a); border:2px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s; position:relative; display:flex; flex-direction:column; padding:8px; }
.card:hover{ border-color:#f5c04d; box-shadow:0 10px 26px rgba(245,192,77,.25); transform:translateY(-2px); }
.card .thumb{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.card-body{ padding:8px 8px 10px; display:flex; flex-direction:column; gap:6px; }
.card-body h3{ margin:0; font-size:1.06rem; color:#fff; }
.card-body p{ margin:0; color:#cfd6e3; font-size:.92rem; line-height:1.5; }
.card-actions{ margin-top:auto; padding:0 8px 8px; display:flex; gap:10px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid #2b2b48; background:#1b1b2f; color:var(--fg); }
.btn.primary{ background:linear-gradient(180deg,#2f93ff,#2f8fe0); color:#061219; border-color:#2f93ff; }

/* バッジ */
.corner-multi{ position:absolute; right:8px; bottom:8px; width:42px; height:auto; border-radius:0px; opacity:.95; display:block; pointer-events:none; }
@media (max-width:480px){ .corner-multi{ width:36px; right:6px; bottom:6px; } }

/* Sections */
section{ margin-top:28px; }
section > h2{ font-size:1.25rem; margin:0 0 10px; color:#9cd5ff; border-left:4px solid var(--accent); padding-left:10px; }
/* 運営情報は見出し直下で1カラム */
section#about.cols{ display:grid; grid-template-columns:1fr; }
section#about.cols > *{ grid-column:1 / -1; }
/* 運営情報、プライバシー、お問い合わせ、ブログの本文に共通の可読性制限（72ch）を適用する */
section#about .body, 
section#policy .body,
section#contact p,
section#contact ul,
main article p,   /* <article>内の段落 */
main article ul,  /* <article>内のリスト */
main article ol   /* <article>内の番号付きリスト（念のため） */
{ 
    margin-top:8px; 
    max-width:72ch; /* 72文字幅の制限 */
    font-size:.95rem; 
    line-height:1.7; 
    /* ブログ記事内のテキストは、articleの範囲内で中央寄せにする */
    margin-left: auto;
    margin-right: auto;
}
/* --- ブログ記事のレイアウト調整 (blog.html) --- */
/* 記事全体を最大900pxに制限し、中央に寄せる */
main article {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/* Footer */
footer{ text-align:center; font-size:.85rem; color:#8a94a5; margin-top:40px; padding:20px 0; border-top:1px solid #202033; }

/* ロゴ拡大（前回の調整） */
header .brand img {
  width: 18vw;
  max-width: 200px;
  min-width: 120px;
  height: auto;
}

/* カード全体をクリック可能だとわかるように */
.card { cursor: pointer; }

/* === モバイル時ヘッダー再構成 === */
@media (max-width:600px){
  header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
  }

  header .brand {
    justify-content: center;
    width: 100%;
  }

  header nav ul {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 12px;
  }

  .lang-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 6px;
  }

  .lang-switch button {
    flex: 0 1 22%;
    min-width: 60px;
    max-width: 80px;
  }

  main {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px 40px;
  }

  .hero.visual {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

/* 1. 全ボタンのデフォルト（非アクティブ時）をグレーに設定 */
.vol button {
    color: #6c757d; /* グレー（非アクティブ） */
    opacity: 0.7;
    transition: color 0.2s, opacity 0.2s;
    /* その他の既存のスタイル（カーソル、背景など）は維持 */
}

/* 2. active クラスが付いたボタン（選択中の状態）を白色に設定 */
.vol button.active {
    color: #f8f9fa; /* 白（アクティブ） */
    opacity: 1;
}

/* 補足: on/off の両方が同時に表示されないように調整（あれば） */
.vol button#volume-off.active,
.vol button#volume-on.active {
    /* アクティブなボタンの強調スタイルを定義 */
    /* ここに視覚的な強調を入れることで、さらにわかりやすくなります */
}
/* ========================================= */
/* === AdSense 安定化のための安全対策 ===== */
/* ========================================= */

/* 広告枠が一瞬でも width:0 になるのを防ぐ */
.adbox {
  min-width: 100%;
  display: block;
}

/* hidden 属性による display:none → 幅0 を防ぐ */
.adbox[hidden] {
  display: block;
  visibility: hidden;
}

/* 必要なら高さの最低値も付けられる
   （広告のサイズ計算がより安定する） */
/*
.adbox {
  min-height: 90px;
}
*/