@charset "UTF-8";
/*
Theme Name : 桝一客殿 - Masuichi Kyakuden
*/

/* ===================
ベーススタイル
=================== */
/* 基本設計 */
:root {
  /* color */
  --color-navy: #0f1621;
  --color-ink: #191919;
  --color-gray: #6c6c6c;
  --color-black: #000000;
  --color-gold: #BB8F31;
  --color-gold-h: #D6AD54;
  --color-yellow: #E7B500;
  --color-white: #ffffff;
  --color-bg: #FAFAFA;
  
  --color-line: #CACACA;
  --color-line-wh: rgba(255, 255, 255, 0.5);

  /* font-family */
  --font-serif: "Shippori Mincho B1", "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --font-en: "EB Garamond", Garamond, "Times New Roman", serif;

  /* transform */
  --to-rem: calc(1rem / 16);
  /* 1px あたりのrem値　*/
  /* font-size */
  --font-10: calc(10 * var(--to-rem));
  --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-26: calc(26 * var(--to-rem));
  --font-28: calc(28 * var(--to-rem));
  --font-30: calc(30 * var(--to-rem));
  --font-34: calc(34 * var(--to-rem));
  --font-42: calc(42 * var(--to-rem));

  /* 本文まわりのゆらぎ */
  --clamp-14: clamp(var(--font-12), 1.093vw, var(--font-14));
  --clamp-16: clamp(var(--font-14), 1.25vw, var(--font-16));
  --clamp-18: clamp(var(--font-16), 1.406vw, var(--font-18));
  --clamp-20: clamp(var(--font-16), 1.562vw, var(--font-20));
  --clamp-22: clamp(var(--font-18), 1.718vw, var(--font-22));
  --clamp-24: clamp(var(--font-20), 1.875vw, var(--font-24));
  --clamp-28: clamp(var(--font-22), 2.187vw, var(--font-28));
  --clamp-30: clamp(var(--font-22), 2.343vw, var(--font-30));
  --clamp-34: clamp(var(--font-24), 2.656vw, var(--font-34));
  --clamp-42: clamp(var(--font-30), 3.281vw, var(--font-42));

  /* space */
  --space-1: clamp(8px, 1.25vw, 16px);
  --space-2: clamp(16px, 1.875vw, 24px);
  --space-3: clamp(20px, 2.5vw, 32px);
  --space-4: clamp(24px, 3.125vw, 40px);
  --space-5: clamp(32px, 3.75vw, 48px);
  --space-6: clamp(40px, 4.68vw, 60px);
  --space-7: clamp(48px, 6.25vw, 80px);
  --space-8: clamp(56px, 8.125vw, 104px);
  --space-9: clamp(64px, 9.375vw, 120px);
  --space-10: clamp(100px, 12.5vw, 160px);

  /* layout */
  --width-inner: min(1040px, 88%);
  --width-narrow: min(500px, 88%);

  --transition: 0.5s ease;
  --ease-soft: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}