/* TASUI.JP 主样式 - 日系蓝色系 */
:root {
  /* 主色：日本の空と水をイメージ */
  --color-primary: #6C96C3;      /* 空色（Sora-iro）- 主蓝色，饱和度36% */
  --color-secondary: #80ABA9;    /* 錆浅葱（Sabi-asagi）- 辅助蓝绿 */
  --color-accent: #B5495B;       /* 紅梅（Beni-bai）- 强调色，用于价格/灾害 */
  
  /* 文字与背景 */
  --color-text: #3A3F4C;         /* 藍鉄（Ai-tetsu）- 深蓝灰，阅读友好 */
  --color-text-light: #7B8D9B;   /* 湊鼠（Minato-nezumi）- 辅助文字 */
  --color-bg: #F7FCFE;           /* 卯の花色（Usu-no-hana）- 极淡蓝白背景 */
  --color-bg-gray: #F0F4F8;      /* 白菫色（Shira-sumire）- 区块背景 */
  --color-border: #C1D7E9;       /* 瓶覗（Kame-nozoki）- 柔和蓝边框 */
  
  /* 功能色 */
  --color-disaster: #B5495B;     /* 紅梅（强调色复用） */
  --color-success: #4A7B7D;      /* 錆御納戸（Sabi-onando）- 成功/节能标签 */
  --color-warning: #CB8347;      /* 狐色（Kitsune-iro）- 警告/低水压提示 */
  
  /* 透明度变体 */
  --color-primary-10: rgba(108, 150, 195, 0.1);
  --color-primary-20: rgba(108, 150, 195, 0.2);
  
  /* 字体 */
  --font-main: 'Noto Sans JP', 'Yu Gothic', 'Hiragino Sans', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  
  /* 间距 */
  --space-unit: 24px;
  --space-xs: calc(var(--space-unit) * 0.5);  /* 12px */
  --space-sm: var(--space-unit);              /* 24px */
  --space-md: calc(var(--space-unit) * 2);    /* 48px */
  --space-lg: calc(var(--space-unit) * 3);    /* 72px */
  
  /* 圆角 */
  --radius-sm: 4px;    /* 按钮 */
  --radius-md: 8px;    /* 卡片 */
  --radius-lg: 16px;   /* 主视觉 */
  
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(58, 63, 76, 0.1);
  --shadow-md: 0 4px 8px rgba(58, 63, 76, 0.08);
}

/* 全局重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

/* リンク */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

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

/* ボタン */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

/* ヘルパークラス */
.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
}

/* レイアウトコンテナ */
.footer-container,
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/* セクション余白 */
section {
  padding: var(--space-md) 0;
  margin-bottom: var(--space-sm);
}