@charset "UTF-8";
/*
Theme Name : ハクバカード
*/

/* ===================
ベーススタイル
=================== */

/* 基本設計 */
:root {
  /* color */
  --color-main: #15853B;
  --color-blk: #000;
  --color-red: #D61518;
  --color-gry: #F2F2EB;

  /* font-family */
  --font-sans: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif;
  --font-en: Helvetica, Arial, sans-serif;

  /* transform */
  --to-rem: calc(1rem / 16); /* 1px あたりのrem値　*/
  /* font-size */
  --font-11: calc(11 * var(--to-rem));
  --font-12: calc(12 * var(--to-rem));
  --font-13: calc(13 * var(--to-rem));
  --font-14: calc(14 * var(--to-rem));
  --font-15: calc(15 * var(--to-rem));
  --font-16: calc(16 * var(--to-rem));
  --font-17: calc(17 * var(--to-rem));
  --font-18: calc(18 * var(--to-rem));
  --font-20: calc(20 * var(--to-rem));
  --font-22: calc(22 * var(--to-rem));
  --font-24: calc(24 * var(--to-rem));
  --font-28: calc(28 * var(--to-rem));
  --font-32: calc(32 * var(--to-rem));
  --font-36: calc(36 * var(--to-rem));
  --font-40: calc(40 * var(--to-rem));
  --font-48: calc(48 * var(--to-rem));

  --space-xs: clamp(16px, 1.666vw, 24px);
  --space-sm: clamp(24px, 2.777vw, 40px);
  --space-md: clamp(30px, 4.166vw, 60px);
  --space-lg: clamp(40px, 5.555vw, 80px);
  --space-xl: clamp(50px, 6.944vw, 100px);
  --space-xl2: clamp(60px, 8.333vw, 120px);
  --space-xl3: clamp(80px, 11.111vw, 160px);
  --space-xl4: clamp(100px, 13.888vw, 200px);

  --width-inner: min(1200px, 90vw);
  --bleed: calc((var(--width-inner) - 100dvw) / 2);

	--transition: 0.3s ease;
}
@media screen and (min-width: 810.1px) {
  :root {
    --rounded: 10px;
    --header-h: 70px;
  }
}

@media screen and (max-width: 810px) {
	:root {
    --rounded: 8px;
    --header-h: 52px;
	}
}