/*
Theme Name : Globia Japan
Author : WESEN Inc.
Author URI : https://wesen.co.jp
Version : 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  /* ベースサイズ */
  --base-size: 8px;
  
  /* ブレークポイント */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1000px;
  --breakpoint-desktop: 1200px;
  
  /* スペーシング */
  --spacing-xs: calc(var(--base-size) * 0.5);  /* 4px */
  --spacing-sm: calc(var(--base-size) * 1);    /* 8px */
  --spacing-md: calc(var(--base-size) * 2);    /* 16px */
  --spacing-lg: calc(var(--base-size) * 3);    /* 24px */
  --spacing-xl: calc(var(--base-size) * 4);    /* 32px */
  
  /* フォントサイズ */
  --font-size-base: 16px;
  --font-size-sm: calc(var(--font-size-base) * 0.875);  /* 14px */
  --font-size-lg: calc(var(--font-size-base) * 1.25);   /* 20px */
}

body {
  margin: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

/* Elements */
img {
  max-width: 100%;
  height: auto;
}

/* メディアクエリの使用例 */
@media screen and (max-width: var(--breakpoint-mobile)) {
  /* モバイル用のスタイル */
}

@media screen and (min-width: var(--breakpoint-mobile)) and (max-width: var(--breakpoint-tablet)) {
  /* タブレット用のスタイル */
}

@media screen and (min-width: var(--breakpoint-tablet)) and (max-width: var(--breakpoint-desktop)) {
  /* 小さいデスクトップ用のスタイル */
}

@media screen and (min-width: var(--breakpoint-desktop)) {
  /* 大きいデスクトップ用のスタイル */
}