@charset "UTF-8";
/*
Theme Name : 墓じまい
*/

/* ===================
ベーススタイル
=================== */
/* 基本設計 */
:root {
  /* color */
  --color-main: #289AC0;
  --color-lightblue: #B6DEEB;
  --color-ink: #1F2A32;
  --color-pink: #E9827A;
  --color-gold: #DBC65A;
  --color-beige: #F8F7F1;
  --color-white: #ffffff;

  /* font-family */
  --font-sans: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Open Sans", sans-serif;
  --font-hand: "Zen Kurenaido", 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));
  --font-60: calc(60 * var(--to-rem));
  --font-64: calc(64 * var(--to-rem));
  --font-70: calc(70 * var(--to-rem));

  --space-xs2: clamp(8px, 1.666vw, 24px);
  --space-xs: clamp(16px, 2.222vw, 32px);
  --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, 90%);
  --bleed: calc((var(--width-inner) - 100dvw) / 2);

  --transition: 0.3s ease;

  --clamp-20: clamp(var(--font-14), 1.666vw, var(--font-20));
  --clamp-24: clamp(var(--font-18), 2vw, var(--font-24));
  --clamp-28: clamp(var(--font-20), 2.333vw, var(--font-28));
  --clamp-32: clamp(var(--font-24), 2.666vw, var(--font-32));
}

@media screen and (min-width: 810.1px) {
  :root {
    --rounded: 16px;
  }
}

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