/* CSS変数定義 */
:root {
  /* カラーパレット - 青基調 */
  --primary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --accent-color: #007bff;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --text-color: #333;
  --text-light: #666;
  --bg-light: #f8f9fa;
  --bg-white: #ffffff;
  --border-light: #e9ecef;
  --border-lighter: #eee;
  
  /* フォント */
  --font-primary: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: bold;
  
  /* レイアウト */
  --container-max: 1200px;
  --container-padding: 20px;
  --section-padding: 80px 0;
  --section-padding-mobile: 60px 0;
  
  /* エフェクト */
  --border-radius: 15px;
  --border-radius-lg: 20px;
  --border-radius-pill: 50px;
  --box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  --box-shadow-lg: 0 20px 60px rgba(0,0,0,0.1);
  --box-shadow-button: 0 10px 30px rgba(0, 123, 255, 0.4);
  --transition: 0.3s ease;
  --transition-slow: 0.6s ease;
  
  /* Z-index */
  --z-header: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--text-color);
  background: var(--bg-white);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 画像 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リンク */
a {
  color: inherit;
  text-decoration: none;
}

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

/* フォーカス */
:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* 選択テキスト */
::selection {
  background: var(--accent-color);
  color: var(--bg-white);
}

/* スクロールバー */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e55a5a;
}

/* 隠しテキスト（アクセシビリティ） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}