/* カラー・共通スタイル設定 - common.css */

/* カスタムプロパティでカラーパレットを定義 */
:root {
  /* メインカラー */
  --color-main: #E22121;
  
  /* サブカラー */
  --color-sub: #BE0000;
  
  /* テキストカラー */
  --color-text: #1F1F1F;
  
  /* 補助カラー（メイン背景・白系テキスト） */
  --color-light: #FBFBFB;
  
  /* 補助カラー2（サブ背景） */
  --color-light-gray: #E3E3E3;
  
  /* その他のカラー */
  --color-white: #FFFFFF;
  --color-black: #000000;
  
  /* 影・エフェクト用 */
  --color-shadow: rgba(31, 31, 31, 0.1);
  
  /* コンテナ最大幅 */
  --container-max-width: 1200px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  
  /* 余白 */
  --spacing-xs: clamp(0.5rem, 2vw, 0.75rem);
  --spacing-sm: clamp(0.75rem, 3vw, 1rem);
  --spacing-base: clamp(1rem, 4vw, 1.5rem);
  --spacing-lg: clamp(1.5rem, 5vw, 2rem);
  --spacing-xl: clamp(2rem, 6vw, 3rem);
  --spacing-xxl: clamp(3rem, 8vw, 4rem);
  
  /* 角丸 */
  --border-radius-sm: 4px;
  --border-radius-base: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 150px;
  
  /* トランジション */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* アニメーション */
  --animation-duration-fast: 0.6s;
  --animation-duration-base: 0.8s;
  --animation-delay-base: 0.2s;
  --animation-delay-1: 0.1s;
  --animation-delay-2: 0.3s;
  --animation-delay-3: 0.5s;
  --animation-delay-4: 0.7s;
  --animation-delay-5: 1s;
}

/* リセットCSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-jp-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* リンクのリセット */
a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-base);
}

a:hover {
  opacity: 0.8;
}

/* リストのリセット */
ul, ol {
  list-style: none;
}

/* 画像のレスポンシブ */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ボタンのリセット */
button {
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  transition: all var(--transition-base);
}

/* 共通コンテナクラス */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* 実際に使用されているユーティリティクラス */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.py-xxl { 
  padding-top: var(--spacing-xxl); 
  padding-bottom: var(--spacing-xxl); 
}

.text-text { 
  color: var(--color-text); 
}

.bg-white { 
  background-color: var(--color-white); 
}