/* Google Fonts から Inter および Noto Sans JP を読み込み */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ルート要素におけるグローバルCSS変数（デザインシステム）の定義 */
:root {
  /* プライマリカラー: mybest風の深みのある信頼感ブラック */
  --color-primary: #1a1a1a;
  /* セカンダリカラー: アクセント用の暖色オレンジゴールド */
  --color-accent: #f5a623;
  /* 楽天ブランドカラー: 楽天市場アフィリエイトボタン用の赤色 */
  --color-rakuten: #bf0000;
  /* 楽天アフィリエイトボタンのホバー色 */
  --color-rakuten-hover: #9e0000;
  /* テキストのメインカラー */
  --color-text-main: #313131;
  /* サブテキストおよび注釈のカラー */
  --color-text-sub: #757575;
  /* メインの背景色 */
  --color-bg-main: #f8f9fa;
  /* カードやホワイト領域の背景色 */
  --color-bg-card: #ffffff;
  /* ボーダーおよび区切り線のカラー */
  --color-border: #e9ecef;
  /* メリット（おすすめポイント）のグリーンアクセント */
  --color-pros-bg: #e6f4ea;
  /* メリット用テキストカラー */
  --color-pros-text: #137333;
  /* デメリット（気になった点）のレッド/グレーアクセント */
  --color-cons-bg: #fce8e6;
  /* デメリット用テキストカラー */
  --color-cons-text: #c5221f;
  /* 金賞ゴールドカラー */
  --color-gold: #d4af37;
  /* 銀賞シルバーカラー */
  --color-silver: #a0a0a0;
  /* 銅賞ブロンズカラー */
  --color-bronze: #cd7f32;
  /* 標準フォントファミリーの設定 */
  --font-family: 'Inter', 'Noto Sans JP', sans-serif;
  /* コンテナの最大幅定義 */
  --max-width: 1080px;
  /* 角丸の基準値 */
  --border-radius: 8px;
  /* 基準ドロップシャドウ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  /* ホバー時ドロップシャドウ */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 全要素に対するリセットスタイルとボックスサイジングの指定 */
* {
  /* 余白のリセット */
  margin: 0;
  /* 内側余白のリセット */
  padding: 0;
  /* ボーダーボックスの強制指定 */
  box-sizing: border-box;
}

/* body全体の共通スタイリング */
body {
  /* フォントの指定 */
  font-family: var(--font-family);
  /* 背景色の指定 */
  background-color: var(--color-bg-main);
  /* テキスト色の指定 */
  color: var(--color-text-main);
  /* 行高の指定 */
  line-height: 1.6;
  /* アンチエイリアスの有効化 */
  -webkit-font-smoothing: antialiased;
}

/* リンク要素の基本スタイル */
a {
  /* 下線の除去 */
  text-decoration: none;
  /* 親のカラーを継承 */
  color: inherit;
}

/* メインコンテンツコンテナの配置 */
.container {
  /* 横幅100%指定 */
  width: 100%;
  /* 最大幅の制限 */
  max-width: var(--max-width);
  /* 中央寄せ配置 */
  margin: 0 auto;
  /* 左右のパディング */
  padding: 0 16px;
}

/* レスポンシブ調整（スマホ・モバイル） */
@media (max-width: 768px) {
  /* モバイル時のコンテナパディングの調整 */
  .container {
    /* パディングを12pxに縮小 */
    padding: 0 12px;
  }
}