/* ---- ベース ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background-size: cover; /* 縦横比を維持したまま、画面全体に拡大 */
  background-color: #000000;
  color: #222;
}

/* ---- 背景画像 ---- */
.page-bg {
  position: fixed;       /* 画面に固定 */
  inset: 0;              /* top:0; right:0; bottom:0; left:0 と同じ */
  z-index: -1;           /* 全コンテンツより奥に置く */
  background-image: url(image/bg/bg1.webp); /* 初期画像 */
  background-size: cover;  /* 全画面に拡大・トリミング */
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- 横幅・余白（ヘッダー/フッター含め同じ幅） ---- */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}

/* ---- 共通カード風 ---- */
.site-header,
.site-footer,
.grid > * {
  background: #e4f1c8;
  border: 2px solid #3B5124;
  padding: 8px;
  border-radius: 8px;
}

/* ---- ヘッダー ---- */
.site-header {
  font-size: clamp(16px, 2vw, 24px);
  text-align: center;
}

/* ---- フッター ---- */
.site-footer {
  font-size: 12px;
  text-align: center;
}

/* ---- 記事タイトル ---- */
h2.article-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  text-align: center;
}
h3.article-title {
  margin: 8px 0 8px 0;
  font-size: 12px;
}

/* ---- 記事ブロック ---- */
.article {
  margin-bottom: 8px;
  padding: 8px;
  background: #ffffff;
  border: 2px solid #6E8B4D;
  border-radius: 6px;
}
.article:last-child { margin-bottom: 0; }
.article-body { 
  margin: 0 0 0 0;
  font-size: 12px;
}

ul.article-body {
  margin: 8px 0 0 8px;        /* 上下は必要に応じて */
  padding-left: 0;  /* インデントを消す */
  list-style-position: inside; /* マーカーをテキストの内側に表示 */
}

.stores {
  text-align: center;
}

/* メディアのはみ出し防止 */
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

/* ---- レイアウト（モバイルファースト） ---- */
.grid {
  display: grid;
  grid-template-columns: 1fr;     /* スマホ：1カラム */
  gap: 8px;
  margin-block: 8px;
}

/* ---- 2カラム：左 + メイン（右は下段） ---- */
@media (min-width: 640px) {
  .grid {
    grid-template-columns: 1fr 2fr;
  }
  .left   { order: 1; }
  .content{ order: 2; }
  .right  { order: 3; }
}

/* ---- 3カラム：PC ---- */
@media (min-width: 960px) {
  .grid {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .left   { order: 1; }
  .content{ order: 2; }
  .right  { order: 3; }
}

/* ---- 細かなUI配慮 ---- */
a { color: #6E8B4D; text-decoration: none; } /* ---- リンク ---- */
a:hover, a:focus { text-decoration: underline; } /* ---- リンク（マウスオーバー時） ---- */
:focus-visible { outline: 2px solid #6E8B4D; outline-offset: 2px; }
ul li::marker{ color: #6E8B4D;} /* ---- リスト ---- */

/* ---- 流れる文字 ---- */
.marquee {
  width: 100%;          /* 横幅いっぱいに広げる */
  overflow: hidden;     /* はみ出す部分を隠す */
  white-space: nowrap;  /* 文字を折り返さず横一列に表示 */
  box-sizing: border-box; /* パディングやボーダーを幅に含める */
  font-size: 12px;
}

.marquee span {
  display: inline-block;        /* 幅やtransformを効かせるためにブロック化 */
  padding-left: 100%;           /* 画面の外（右端のさらに先）からスタートさせる */
  animation: marquee 8s linear infinite; /* アニメーション指定 */
}

@keyframes marquee {
  0%   { transform: translateX(0%); }    /* 右端からスタート */
  100% { transform: translateX(-100%); } /* 左端の外まで移動 */
}

/* ---- ゲーム一覧のボックス ---- */
.game-list-box{
  max-width: 100%;   /* 横幅の上限 */
  height: 320px;      /* 高さ固定 → 小窓になる */
  overflow: auto;     /* はみ出したらスクロールバーを表示 */
  padding: 12px;      /* 内側の余白 */
  border: 2px solid #d0d0d0; /* 枠線 */
  border-radius: 8px;       /* 角丸 */
  background: #ffffff;       /* 背景色 */
  line-height: 1.6;   /* 行間 */
  word-break: break-word; /* 長いURLを折り返し */
}

/* ---- 右下前面のもこも画像 ---- */
.front-image {
  position: fixed;
  right: 0px;     /* 右下に配置 */
  bottom: 0px;
  width: clamp(200px, 34vw, 800px);    /* サイズ調整 */
  z-index: 9999;   /* ほかの要素より前に出す */
  pointer-events: none; /* クリック操作を邪魔しない */
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5));
}

/* ---- 本文と前面画像の干渉回避 ---- */
.container {
  padding-bottom: clamp(120px, 20vw, 280px);
}