/* variables.css */
/* CSS変数の定義 */

:root {
  /* カラー */
  --color-primary: #EC2F2F; /* メインカラー (青) */
  --color-secondary: #BFA27D; /* アクセントカラー (ベージュ) 修正 */
  --color-text: #333333; /* 文字色 */
  --color-text-light: #666666; /* 薄い文字色 */
  --color-background: #F5F5F5; /* 背景色 */
  --color-white: #FFFFFF; /* 白 */
  --color-light-gray: #EEEEEE; /* 薄いグレー */
  --color-dark: #333333; /* 濃いグレー（フッター用） */
  
  /* オーバーレイグラデーション */
  --overlay-gradient-sp: linear-gradient(to top right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2)); /* SP用グラデーション - 視認性向上のため透明度調整 */
  --overlay-gradient-pc: linear-gradient(to top right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.2)); /* PC用グラデーション - 視認性向上のため透明度調整 */
  
  /* フォント */
  --font-family-base: 'Noto Sans JP', sans-serif;
  --font-size-base: 16px;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.5rem;
  --font-size-xxlarge: 2rem;
  
  /* スペーシング */
  --spacing-xsmall: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-xlarge: 2rem;
  --spacing-xxlarge: 3rem;
  
  /* ボーダー */
  --border-radius: 8px;
  --border-radius-large: 12px;
  --border-radius-circle: 50%;
  
  /* シャドウ */
  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* トランジション */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* コンテナ */
  --container-width-mobile: 100%;
  --container-width-tablet: 90%;
  --container-width-desktop: 80%;
  --container-width-large: 60%;
  --container-max-width: 800px; /* 最大幅を制限 */
  --container-padding: 1rem;
  
  /* ブレイクポイント */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* セクション間のスペーシング */
  --section-spacing-mobile: 3rem;
  --section-spacing-desktop: 5rem;
}