@charset "utf-8";

/**
 * デザイントークン: ブレークポイントシステム
 * レスポンシブデザインの統一規則
 */

:root {
  /* === Breakpoint Values === */
  --bp_mobile: 767px;               /* モバイル上限 */
  --bp_tablet: 768px;               /* タブレット下限 */
  --bp_tablet_max: 1439px;          /* タブレット上限 */
  --bp_desktop: 1440px;             /* デスクトップ下限 */
  
  /* === Container Max Widths === */
  --container_mobile: 100%;         /* モバイル: フル幅 */
  --container_tablet: 83.33vw;      /* タブレット: 約1200px at 1440px */
  --container_desktop: 1200px;      /* デスクトップ: 固定幅 */
  
  /* === Responsive Font Scaling === */
  /* Mobile (vw based) */
  --font_scale_mobile_hero: 15.63vw;        /* ~120px at 768px */
  --font_scale_mobile_section_en: 15.63vw;  /* ~120px at 768px */
  --font_scale_mobile_section_ja: 4.17vw;   /* ~32px at 768px */
  --font_scale_mobile_h1: 10.42vw;          /* ~80px at 768px */
  --font_scale_mobile_h2: 7.03vw;           /* ~54px at 768px */
  --font_scale_mobile_body: 3.65vw;         /* ~28px at 768px */
  
  /* Tablet (vw based) */
  --font_scale_tablet_hero: 8.33vw;         /* ~120px at 1440px */
  --font_scale_tablet_section_en: 6.25vw;   /* ~90px at 1440px */
  --font_scale_tablet_section_ja: 1.39vw;   /* ~20px at 1440px */
  --font_scale_tablet_h1: 4.44vw;           /* ~64px at 1440px */
  --font_scale_tablet_h2: 2.78vw;           /* ~40px at 1440px */
  --font_scale_tablet_body: 1.11vw;         /* ~16px at 1440px */
  
  /* === Responsive Spacing === */
  /* Mobile */
  --space_section_mobile: 15.63vw;          /* ~120px at 768px */
  --space_container_mobile: 5.21vw;         /* ~40px at 768px */
  --space_grid_gap_mobile: 5.21vw;          /* ~40px at 768px */
  
  /* Tablet */
  --space_section_tablet: 8.33vw;           /* ~120px at 1440px */
  --space_container_tablet: 3.33vw;         /* ~48px at 1440px */
  --space_grid_gap_tablet: 2.78vw;          /* ~40px at 1440px */
}

/* === メディアクエリテンプレート === */

/* Desktop First Approach */
@media (min-width: 1440px), print {
  /* デスクトップ専用スタイル */
  :root {
    --container_current: var(--container_desktop);
    --space_current_container: 0;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  /* タブレット専用スタイル */
  :root {
    --container_current: var(--container_tablet);
    --space_current_container: var(--space_container_tablet);
  }
}

@media only screen and (max-width: 767px) {
  /* モバイル専用スタイル */
  :root {
    --container_current: var(--container_mobile);
    --space_current_container: var(--space_container_mobile);
  }
}

/* === レスポンシブ ユーティリティクラス === */

/* 表示/非表示 */
@media (min-width: 1440px), print {
  .only-sp { display: none !important; }
  .only-tablet { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .only-sp { display: none !important; }
  .only-pc { display: none !important; }
}

@media only screen and (max-width: 767px) {
  .only-pc { display: none !important; }
  .only-tablet { display: none !important; }
}

/* コンテナ幅 */
.container {
  width: var(--container_current);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space_current_container);
  padding-right: var(--space_current_container);
}

@media (min-width: 1440px), print {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* レスポンシブグリッド */
.grid-responsive {
  display: grid;
  gap: var(--space_grid_gap);
}

@media (min-width: 1440px), print {
  .grid-responsive {
    gap: var(--space_grid_gap);
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .grid-responsive {
    gap: var(--space_grid_gap_tablet);
  }
}

@media only screen and (max-width: 767px) {
  .grid-responsive {
    gap: var(--space_grid_gap_mobile);
    grid-template-columns: 1fr !important; /* モバイルは1列に */
  }
}