html,
/* =============================================
フォント・配色・その他 基本設定
============================================= */
:root {
--body-bg: #FFFFFF; /* 背景色 */
--body-text: #000000; /* 基本文字色 */
--tagline-text: #999999; /* ロゴ直下 テキスト 文字色 */
--info-bg: #fbfbfb; /* ロゴ直下 テキストボックス 背景色 */
--info-border: #e9e9e9; /* ロゴ直下 テキストボックス 罫線色 */
--info-text: #666666; /* ロゴ直下 テキストボックス 文字色 */
--contact-bg: #000000; /* コンタクトボタン背景色 */
--steam-bg: #00adee; /* STEAMボタン背景色 */
--contact-text: #FFFFFF; /* コンタクトボタン文字色 */
--section-title: #000000; /* 見出し文字色 */
--section-title-border: #ff0000; /* TITLES見出し 罫線色 */
--coming-soon-bg: #8e8e8e; /* タイトルイメージ背景色 */
--coming-soon-text: #FFFFFF; /* タイトルイメージ文字色 */
--coming-label-bg: #b3b3b3; /* ゲーム特徴 タグ 背景色 */
--coming-label-text: #FFFFFF; /* ゲーム特徴 タグ 文字色 */
--release-date-text: #666666; /* リリース日 文字色 */
--game-title-text: #666666; /* ゲームタイトル リンク用 文字色 */
--game-title-link-text: #FF0000; /* ゲームタイトル リンク用 文字色 */
--game-detail-text: #666666; /* ゲーム詳細情報 文字色 */
}
/* =============================================
BODY 基本設定
============================================= */
body { margin: 0; padding: 0; background-color: var(--body-bg); font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: var(--body-text); text-align: center; }
/* =============================================
コンテンツ表示部 基本設定
============================================= */
/* コンテンツ外枠 */
.container { position: relative; width: 86%; max-width: 1400px; margin: 0 auto; padding: clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem) 0 ; z-index: 10; }
/* ヘッダーエリア設定 */
header { width: 96%; margin: 0 auto; }
/* ヘッダーロゴ周り */
.header-logo { width: clamp(11.25rem, 7.614rem + 18.18vw, 21.25rem); height: auto; margin: clamp(0.625rem, 0.398rem + 1.14vw, 1.25rem) 0 clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem); }
/* ヘッダーロゴ 下部テキスト */
.tagline { font-weight: bold; font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem); margin: 0 0 clamp(1rem, 0.909rem + 0.45vw, 1.25rem); color: var(--tagline-text); }
/* ヘッダーロゴ 下部囲いテキスト（2列） */
.info-tags { display: flex; justify-content: center; gap: 10px; margin-bottom: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem); flex-wrap: wrap; }
.info-tag { border: 1px solid var(--info-border); background-color: var(--info-bg); padding: 8px 15px; font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem); max-width: 260px; min-width: 180px; box-sizing: border-box; color: var(--info-text); }
/* ヘッダーロゴ 下部囲いテキスト（1列） */
@media (max-width: 835px) {
.info-tag { width: 65%; }
}
/* ボタン囲い設定 */
.btn-group { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 15px; row-gap: 5px; margin-bottom: 5px; }
/* 個別ボタン余白調整 */
.contact-btn, .steam-btn { margin-bottom: 0; }
/* 問合せボタン */
.contact-btn { display: inline-block; background-color: var(--contact-bg); color: var(--contact-text); text-decoration: none; padding: 12px 28px; font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); font-weight: normal; margin-bottom: clamp(0.063rem, -0.051rem + 0.57vw, 0.375rem); border-radius: 50px; cursor: pointer; }
/* STEAMボタン */
.steam-btn { display: inline-block; background-color: var(--steam-bg); color: var(--contact-text); text-decoration: none; padding: 12px 30px 12px 24px; font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); font-weight: normal; margin-bottom: clamp(0.063rem, -0.051rem + 0.57vw, 0.375rem); border-radius: 50px; cursor: pointer; }
/* 問合せボタン 直下テキスト */
.sub-text { font-size: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem); margin-bottom: clamp(2.5rem, 2.273rem + 1.14vw, 3.125rem); }
/* GAMESセクション タイトルテキスト */
.section-title { font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem); font-weight: 900; color: var(--section-title); margin-bottom: clamp(2.125rem, 1.989rem + 0.68vw, 2.5rem); display: inline-block; border-bottom: 3px solid var(--section-title-border); padding-bottom: 5px; }
/* ゲームリスト PC版(3列) */
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: left; }
/* タブレット版（2列） */
@media (max-width: 1024px) {
.game-grid { grid-template-columns: repeat(2, 1fr); }
}
/* スマホ版（1列） */
@media (max-width: 768px) {
.game-grid { grid-template-columns: 1fr; }
}
/* ゲーム個別タイトル枠組み */
.game-item { min-width: 0; }
/* タイトル画像設定 */
.game-img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover;}
/* Coming Soonの黒矩形 */
.coming-soon { width: 100%; aspect-ratio: 16 / 9; background-color: var(--coming-soon-bg); color: var(--coming-soon-text); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); }
/* リリース日テキスト */
.release-date { text-align: right; font-size: clamp(0.688rem, 0.619rem + 0.34vw, 0.875rem); margin: clamp(0.375rem, 0.284rem + 0.45vw, 0.625rem) 0 clamp(0.5rem, 0.409rem + 0.45vw, 0.75rem); color: var(--release-date-text); }
/* ゲームタイトル設定 */
.game-title { font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem); font-weight: bold; margin: 0 0 clamp(0.25rem, 0.159rem + 0.45vw, 0.5rem); color: var(--game-title-text); }
.game-title a { color: var(--game-title-link-text); text-decoration: none;}
/* ゲーム特徴 タグ 枠組み */
.labels { display: flex; gap: 5px; margin-bottom: clamp(0.5rem, 0.455rem + 0.23vw, 0.625rem); flex-wrap: wrap; }
/* ゲーム特徴 タグ テキスト */
.label { background-color: var(--coming-label-bg); color: var(--coming-label-text); font-size: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem); padding: 6px 10px; border-radius: 5px; }
/* ゲーム詳細情報 */
.game-details { font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); line-height: 1.4; color: var(--game-detail-text); }