/*
 * style.css
 * Ikinuki Games ウェブサイト用 基本CSS
 */

/* ====================
   基本設定 (Base Settings)
   ==================== */
body {
	/* フォント設定: OS標準のフォントを優先し、最後に一般的なサンセリフ体 */
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

	/* 行の高さ: テキストの可読性を高めるための行間 */
	line-height: 1.6;

	/* デフォルトのマージンとパディングをリセット: ブラウザ間の表示差異をなくす */
	margin: 0;
	padding: 0;

	/* サイト全体の背景色: やわらかいグリーン系の色 */
	background-color: #fbfff1;

	/* 基本の文字色: 濃いグレー */
	color: #333;
}

/* box-sizingをすべての要素に適用: レイアウト計算を容易にし、パディングやボーダーを含めて幅・高さを指定 */
*, *::before, *::after {
	box-sizing: border-box;
}

/* ====================
   コンテンツを内包するコンテナ (Content Container)
   ==================== */
.content-container {
	/* コンテンツの最大幅: 広い画面での横幅の広がりすぎを防ぐ */
	max-width: 960px;

	/* 左右を自動で中央寄せ: コンテンツブロックを中央に配置 */
	margin: 0 auto;

	/* 左右にパディングを追加: コンテンツが画面端に張り付かないようにする */
	padding: 0 20px;
}

/* ====================
   ヘッダーとフッター (Header & Footer)
   ==================== */
header {
	/* 背景色: ヘッダーの背景色 */
	background-color: #cef1e4;

	/* 文字色: ヘッダー内の文字色 */
	color: #000;

	/* 上下のパディング: ロゴとナビゲーションの配置のため、ここでは0に設定 */
	padding: 0;

	/* 影: ヘッダーに立体感を出すための影 */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

footer {
	/* 背景色: フッターの背景色 */
	background-color: #cef1e4;

	/* 文字色: フッター内の文字色 */
	color: #000;

	/* テキストを中央寄せ: フッター内のテキストを中央に配置 */
	text-align: center;

	/* 上下のパディング: フッターコンテンツの上下の余白 */
	padding: 20px 0;

	/* 上部にマージン: フッターと上コンテンツの間隔 */
	margin-top: 40px;
}

/* ====================
   ナビゲーションメニュー (Navigation Menu)
   ==================== */
.main-nav {
	/* Flexコンテナ設定: アイテムを横並びにする */
	display: flex;

	/* 垂直方向の中央揃え: アイテムの高さを揃える */
	align-items: center;

	/* メニュー自体の上下左右のパディング: ナビゲーションバー全体の余白 */
	padding: 10px 20px;
}

/* ロゴのリンクスタイル (Logo Link Style) */
.logo-link img {
	/* ロゴの高さ */
	height: 64px;
	/* ロゴの幅 */
	width: 64px;
	/* 画像とテキストの垂直位置を合わせる */
	vertical-align: middle;
}

/* ナビゲーションアイテム (Navigation Item) */
.nav-item {
	/* テキスト色 */
	color: #000;
	/* テキスト装飾をなくす (下線など) */
	text-decoration: none;
	/* 左右のパディング: 各メニュー項目のクリック可能な領域と余白 */
	padding: 8px 15px;
	/* 角の丸み */
	border-radius: 4px;
	/* フォントサイズ */
	font-size: 1em;
	/* フォントの太さ */
	font-weight: bold;
	/* アイテム間のマージン: 各メニュー項目間の間隔 */
	margin: 0 5px;
	/* ポインターカーソル: マウスオーバー時に指の形に変化 */
	cursor: pointer;
	/* ホバー時の背景色変化のアニメーション */
	transition: background-color 0.3s ease;
}

.nav-item:hover {
	/* ホバー時の背景色 */
	background-color: rgba(0, 0, 0, 0.1);
}

/* ナビゲーション右寄せグループ (Navigation Right Group) */
.nav-right-group {
	/* Flexコンテナ設定: アイテムを横並びにする */
	display: flex;
	/* 垂直方向の中央揃え: アイテムの高さを揃える */
	align-items: center;
	/* 左寄せのアイテムと右寄せグループの間にスペースを作り、右端に寄せる */
	margin-left: auto;
}

/* ====================
   プルダウンメニュー (Dropdown Menu)
   ==================== */
.dropdown-container {
	/* 擬似要素の位置指定の基準: ドロップダウン内容をこの要素内で絶対配置するため */
	position: relative;
	/* インラインブロック要素として配置: テキストや他のアイテムと同じ行に表示 */
	display: inline-block;
}

.dropdown-content {
	/* 初期状態では非表示 */
	display: none;
	/* 絶対位置指定: 親要素 (dropdown-container) を基準に配置 */
	position: absolute;
	/* 背景色 */
	background-color: #f9f9f9;
	/* 最小幅: メニュー項目の内容が短くても一定の幅を保つ */
	min-width: 160px;
	/* ボックスの影: ドロップダウンに立体感を出す */
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	/* 重なり順序: 他のコンテンツの上に表示されるようにする */
	z-index: 999;
	/* ボタンの真下に配置 */
	top: 100%;
	/* 右端に揃える: プルダウンが右側に開くようにする */
	right: 0;
	/* 角の丸み */
	border-radius: 4px;
}

.dropdown-content a {
	/* 文字色 */
	color: black;
	/* パディング: 各メニュー項目のクリック可能な領域と余白 */
	padding: 12px 16px;
	/* テキスト装飾をなくす */
	text-decoration: none;
	/* ブロック要素にする: クリック可能な領域を広げ、縦に並べる */
	display: block;
	/* ホバー時の背景色変化のアニメーション */
	transition: background-color 0.2s ease;
	/* 角の丸み */
	border-radius: 4px;
	/* 文字列が長くても改行しないように */
	white-space: nowrap;
	/* 文字列を左寄せに */
	text-align: left;
}

.dropdown-content a:hover {
	/* ホバー時の背景色 */
	background-color: #ddd;
}

/* プルダウンボタンにホバーした時に内容を表示 */
.dropdown-container:hover .dropdown-content {
	/* ホバー時に表示 */
	display: block;
}

/* ====================
   セクションの共通スタイル (Common Section Styles)
   ==================== */
section {
	/* 内側のパディング: セクション内のコンテンツと境界線との間の余白 */
	padding: 40px;
	/* 下のマージン: 各セクション間の間隔 */
	margin-bottom: 25px;
	/* 角の丸み */
	border-radius: 10px;
	/* 幅: コンテンツの幅を制限 */
	width: 90%;
	/* 左右を自動で中央寄せ: セクションブロックを中央に配置 */
	margin-left: auto;
	margin-right: auto;
	/* 背景色 */
	background-color: #fff;
	/* 影: セクションに立体感を出すための影 */
	box-shadow: 0 5px 15px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.05);
}

section h2 {
	/* 見出しの色 */
	color: #000;
	/* フォント設定: 和文フォントを優先 */
	font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
	/* デフォルトマージンをリセット */
	margin: 0;
	/* フォントサイズ */
	font-size: 2.0em;
	/* 下線 */
	border-bottom: 2px solid #eee;
	/* 下線との間隔 */
	padding-bottom: 10px;
}

/* ====================
   セクションのバリエーションスタイル (Section Variant Styles)
   ==================== */
.section-variant {
	/* 背景色 */
	background-color: #cef1e4;
	/* 文字色 */
	color: #000;
	/* 影: より強調された影 */
	box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.07);
	/* ホバー時の変形・影のアニメーション */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-variant h2 {
	/* 見出しの色 */
	color: #000;
	/* フォントの太さ */
	font-weight: 600;
	/* 文字間隔 */
	letter-spacing: 0.02em;
	/* テキストの影 */
	text-shadow: 1px 1px 2px rgba(0,0,0,0.03);
	/* 擬似要素の位置指定の基準 */
	position: relative;
	/* 幅いっぱいに表示 */
	display: block;
	/* テキストを左寄せに */
	text-align: left;
	/* 下線との間隔 */
	padding-bottom: 10px;
	/* 下線色を背景色より暗く同系統の色に調整 */
	border-bottom: 2px solid #bfe2d5;
}

/* ====================
   Flexboxベースの2分割レイアウトコンテナ共通 (Flexbox Two-Column Layout)
   ==================== */
.section-content-wrapper,
.alt-section-layout-container {
	/* Flexコンテナ設定: アイテムを横並びにする */
	display: flex;
	/* アイテム間の間隔 */
	gap: 40px;
	/* アイテムがFlexコンテナの高さ全体に引き伸ばされる */
	align-items: stretch;
	/* 小さい画面でアイテムを折り返す */
	flex-wrap: wrap;
	/* Flexアイテムが余白がある場合に中央に寄る */
	justify-content: center;
	/* コンテンツブロック全体の最大幅 */
	max-width: 1200px;
	/* コンテナ自体を中央揃えにする */
	margin: 0 auto;
}

/* ====================
   Flexアイテムの共通スタイル (text-content, image-content)
   ==================== */
.text-content,
.image-content {
	/* 余ったスペースを埋める */
	flex-grow: 1;
	/* 必要であれば縮小する */
	flex-shrink: 1;
	/* flexの計算に任せる */
	max-width: unset;
	/* 親で中央寄せするため、子要素のマージンはリセット */
	margin: unset;
}

/* ====================
   テキストコンテンツの幅と最小幅 (Text Content Width)
   ==================== */
.text-content {
	/* ベース幅（ギャップを考慮してぴったり収まるように調整） */
	flex-basis: calc(40% - 20px);
	/* 最小幅: コンテンツが小さくなりすぎないようにする */
	min-width: 300px;
}

/* ====================
   画像コンテンツの幅と最小幅 (Image Content Width)
   ==================== */
.image-content {
	/* ベース幅（ギャップを考慮してぴったり収まるように調整） */
	flex-basis: calc(60% - 20px);
	/* 最小幅: 画像が小さくなりすぎないようにする */
	min-width: 450px;
	/* 画像を中央揃えに */
	text-align: center;
}

/* ====================
   セクション内の画像 (Images within Sections)
   ==================== */
.image-content img {
	/* 親要素の幅いっぱいに広がり、アスペクト比を維持して高さを自動調整 */
	max-width: 100%;
	/* 高さ自動調整 */
	height: auto;
	/* 画像の下の余白をなくす (inline要素のデフォルトの余白対策) */
	display: block;
	/* 角の丸み */
	border-radius: 8px;
	/* 影 */
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 区切り画像用のスタイル (Full-width Divider Image) */
.full-width-section-divider-image {
	/* 親要素（main）の幅いっぱいに広げる */
	width: 100%;
	/* この要素からはみ出すコンテンツを隠す */
	overflow: hidden;
	/* 上部に少しマージン */
	margin-top: 50px;
	/* 下部に少しマージン */
	margin-bottom: 50px;
}

.full-width-section-divider-image img {
	/* ブロック要素にして、余白をなくし、transformを適用しやすくする */
	display: block;
	/* 親要素の幅より狭い場合は、親要素いっぱいに広げる */
	min-width: 100%;
	/* 画像本来の幅を基準にする（min-widthより広ければその幅を使う） */
	width: auto;
	/* アスペクト比を維持して高さを自動調整 */
	/* transformでの位置調整のために必要 */
	position: relative;
	/* 左端を50%の位置に移動 */
	left: 50%;
	/* 自身の幅の半分だけ左に戻し、中央に配置 */
	transform: translateX(-50%);

	/* 他の画像と統一感を出すための影と角丸 */
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 最後のセクション用 (Last Section Specific Styles) */
.final-info-section .text-content {
	/* このセクションのテキストコンテンツだけを中央揃えにする */
	text-align: center;
}

.final-info-section .button-wrapper {
	/* ボタン群の幅をコンテンツの幅に合わせる */
	width: fit-content;
	/* その上で、そのbutton-wrapperブロックを中央揃えにする */
	margin: 0 auto;
}

/* ====================
   ボタンのコンテナ (Button Container)
   ==================== */
.button-wrapper {
	/* Flexコンテナ設定: ボタンを横並びにする */
	display: flex;
	/* ボタン間の間隔 */
	gap: 15px;
	/* ボタンの上のスペース */
	margin-top: 25px;
}

/* ====================
   プライマリーボタン (Primary Button)
   ==================== */
.primary-button {
	/* インラインブロック要素: テキストフロー内で配置されつつ、幅や高さ、パディングを持つ */
	display: inline-block;
	/* 背景色 */
	background-color: #000;
	/* 文字色 */
	color: #fff;
	/* パディング */
	padding: 12px 25px;
	/* テキストの下線をなくす */
	text-decoration: none;
	/* 角の丸み */
	border-radius: 5px;
	/* フォントの太さ */
	font-weight: bold;
	/* ホバー時の背景色変化のアニメーション */
	transition: background-color 0.3s ease;
}

.primary-button:hover {
	/* ホバー時の背景色 */
	background-color: #333;
}

/* ====================
   セカンダリーボタン (Secondary Button)
   ==================== */
.secondary-button {
	/* インラインブロック要素 */
	display: inline-block;
	/* 背景色 */
	background-color: #fff;
	/* 文字色 */
	color: #000;
	/* 境界線 */
	border: 1px solid #000;
	/* パディング */
	padding: 12px 25px;
	/* テキストの下線をなくす */
	text-decoration: none;
	/* 角の丸み */
	border-radius: 5px;
	/* フォントの太さ */
	font-weight: bold;
	/* ホバー時の背景色と境界線色の変化アニメーション */
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.secondary-button:hover {
	/* ホバー時の背景色 */
	background-color: #eee;
	/* ホバー時の境界線の色 */
	border-color: #333;
}

/* ====================
   リスト (Lists)
   ==================== */
ul {
	/* リストのスタイル: 黒い丸のリスト */
	list-style: disc;
	/* 左のマージン: リストのインデント */
	margin-left: 20px;
}

ul li {
	/* リスト項目の下マージン: 各リスト項目間の間隔 */
	margin-bottom: 8px;
}

/* ====================
   フッターリンクのグループ (Footer Links Group)
   ==================== */
.footer-links-group {
	/* Flexコンテナ設定: リンクを横並びにする */
	display: flex;
	/* リンクを中央寄せにする */
	justify-content: center;
	/* 小さい画面でリンクを折り返す */
	flex-wrap: wrap;
	/* リンク間のスペース */
	gap: 15px;
	/* 著作権表示との間隔 */
	margin-bottom: 15px;
}

/* フッターの著作権表示 (Copyright) */
.copyright {
	/* デフォルトマージンをリセット */
	margin: 0;
	/* フォントサイズを少し小さくする */
	font-size: 0.9em;
	/* 文字色を少し薄くする */
	color: #555;
}

/* ====================
   Cookie同意バナー (Cookie Consent Banner) - デフォルト (全画面サイズ)
   ==================== */
.c-cookie__box {
	/* box-sizingをborder-boxに設定: パディングやボーダーを含めて幅・高さを計算 */
	box-sizing: border-box;
	/* Flexコンテナとして設定: 子要素を横並びにする */
	display: flex;
	/* 他の要素より手前に表示されるように重なり順序を設定 */
	z-index: 1000;
	/* 画面下部に固定配置: ビューポートの最下部に固定 */
	position: fixed;
	bottom: 0;
	left: 0;
	/* 子要素 (.c-container) を水平方向の中央に配置 */
	justify-content: center;
	/* 親要素 (画面) の幅いっぱいに広げる */
	width: 100%;
	/* バナーの背景色 (半透明の黒) */
	background: rgba(0, 0, 0, 0.8);
	/* バナー自体の上下左右にパディングを追加 (黒いオーバーレイ自体の余白) */
	/* PC画面で適切な見た目になるように調整 */
	padding: 20px 40px; /* 上下20px, 左右40px */
}

.c-cookie__box .c-container.en {
  /* 英語バージョンのコンテナを非表示に */
  display: none;
}

.c-cookie__box .c-container {
  /* Flexコンテナとして設定: テキストとボタン群を横並びにする */
  display: flex;
  /* 垂直方向の中央揃え */
  align-items: center;
  /* 親要素の幅いっぱいに広がる */
  width: 100%;
  /* コンテンツの最大幅を制限し、広がりすぎないようにする (PC画面向け) */
  max-width: 1200px;
  /* コンテンツ（テキストとボタン）の上下に内側の余白を追加 */
  /* これが文字とボタンに直接影響する余白になります */
  padding: 15px 0; /* 上下15px, 左右は親 (.c-cookie__box) で制御済みなので0 */
}

.c-cookie__text {
  /* テキストエリアの幅 */
  width: 75%;
  /* テキストとボタンの間の余白 (パディング) */
  padding-right: 30px; /* PC画面でボタンとの適切な間隔を確保 */
  /* 文字色 */
  color: #fff;
  /* フォントサイズ (PC画面向け) */
  font-size: 14px;
  /* 行の高さ */
  line-height: 1.75;
}

.c-cookie__btn {
  /* Flexコンテナとして設定: ボタンを横並びにする */
  display: flex;
  /* コンテンツが縮まないように */
  flex-shrink: 0;
}

.c-cookie__btn--consent {
  /* 「同意する」ボタンと「詳細を見る」ボタンの間の右マージン */
  margin-right: 20px; /* PC画面で適切なボタン間隔を確保 */
}

.c-cookie__btn--consent a,
.c-cookie__btn--detail a {
  /* box-sizingをborder-boxに設定 */
  box-sizing: border-box;
  /* Flexコンテナとして設定: ボタン内のテキストを中央に配置 */
  display: flex;
  /* 垂直方向の中央揃え */
  align-items: center;
  /* 水平方向の中央揃え */
  justify-content: center;
  /* ボタンの幅 */
  width: 145px;
  /* ボタンの高さ */
  height: 48px;
  /* ホバー時のアニメーション */
  transition: 0.4s ease;
  /* テキスト装飾をなくす */
  text-decoration: none;
  /* フォントサイズ */
  font-size: 13px;
}

.c-cookie__btn--consent a {
  /* 背景色 */
  background-color: #fff;
  /* 文字色 */
  color: #323030;
}

.c-cookie__btn--detail a {
  /* 境界線 */
  border: 1px solid #fff;
  /* 背景色を透明に */
  background-color: transparent;
  /* 文字色 */
  color: #fff;
}

.c-cookie__btn--consent a:hover,
.c-cookie__btn--detail a:hover {
  /* ホバー時の透明度 */
  opacity: 0.7;
}


/* ====================
   レスポンシブ対応 (Responsive Design)
   ==================== */
/* 画面幅が768px以下の場合に適用されるスタイル */
@media (max-width: 768px) {
	.content-container {
		/* 左右のパディングを調整: より画面端に近づける */
		padding: 0 15px;
	}

	section,
	.section-variant {
		/* 小さい画面ではセクションのパディングを小さく */
		padding: 20px;
		/* レスポンシブ時には幅を100%に戻す */
		width: 100%;
		/* 最大幅の指定も解除 */
		max-width: unset;
	}

	/* 2分割レイアウトを縦積みに (Two-Column Layout Stacked Vertically) */
	.section-content-wrapper,
	.alt-section-layout-container {
		/* 列を縦積みに変更 */
		flex-direction: column;
		/* 縦積みの際のギャップ調整 */
		gap: 30px;
		/* レスポンシブ時は左寄せに */
		justify-content: flex-start;
		/* レスポンシブ時は左寄せに */
		align-items: flex-start;
	}

	.text-content,
	.image-content {
		/* 最小幅を解除 */
		min-width: unset;
		/* 幅を100%にする */
		width: 100%;
		/* 縦積みの際は中央寄せを解除 */
		margin: 0;
		/* レスポンシブ時も割合ベースフレックスアイテムに影響しないようにflex-basisをリセット */
		flex-basis: auto;
		/* 縦積み時には成長させない */
		flex-grow: 0;
	}

	/* ボタンコンテナも縦積み時の中央寄せを考慮 */
	.button-wrapper {
		/* ボタンを中央に寄せる（縦積み時） */
		justify-content: center;
	}

	/* フッターリンクのグループ (Footer Links Group Responsive) */
	.footer-links-group {
		/* 縦積みに変更 */
		flex-direction: column;
		/* 項目を中央揃えに */
		align-items: center;
	}

	/* レスポンシブ時の最後のセクションの調整 (Last Section Responsive) */
	.final-info-section .text-content {
		/* レスポンシブ時も中央揃えを維持 */
		text-align: center;
	}

	/* レスポンシブ時のボタン群のセンタリングも適用 */
	.final-info-section .button-wrapper {
		/* レスポンシブ時も幅をコンテンツに合わせる */
		width: fit-content;
		/* その上で、中央揃えにする */
		margin: 0 auto;
	}

/* ====================
   Cookie同意バナー (Cookie Consent Banner) - モバイル向け調整
   ==================== */
	.c-cookie__box {
		/* モバイルでの上下左右パディングを調整 */
		padding: 15px 20px; /* PCよりも狭く */
	}

	.c-cookie__box .c-container {
		/* アイテムを横並びから縦積みに変更 */
		flex-direction: column;
		/* 項目を左寄せに */
		align-items: flex-start;
		/* c-containerのパディングはc-cookie__boxで賄うため0にリセット */
		padding: 0;
	}

	.c-cookie__text {
		/* テキストを横幅いっぱいに */
		width: 100%;
		/* 右パディングをリセット */
		padding-right: 0;
		/* ボタンとの間隔のために下マージンを追加 */
		margin-bottom: 15px;
		/* テキストを左寄せに */
		text-align: left;
		/* モバイルでのフォントサイズを調整 */
		font-size: 13px;
	}

	.c-cookie__btn {
		/* ボタンコンテナを横幅いっぱいに */
		width: 100%;
		/* ボタンを縦積みに変更 */
		flex-direction: column;
		/* ボタンを中央寄せに */
		align-items: center;
		/* ボタン間の間隔 */
		gap: 10px;
	}

	.c-cookie__btn--consent {
		/* 横方向のマージンをリセット */
		margin-right: 0;
		/* 横幅いっぱいに */
		width: 100%;
	}

	.c-cookie__btn--detail {
		/* 横幅いっぱいに */
		width: 100%;
	}

	.c-cookie__btn--consent a,
	.c-cookie__btn--detail a {
		/* ボタン自体を横幅いっぱいに */
		width: 100%;
		/* モバイルでのボタンフォントサイズを調整 */
		font-size: 13px;
	}
}