@charset "UTF-8";
/*
Theme Name : 光石
*/

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

/* 基本設計 */
:root {
  /* color */
	--color-txt: #000;
  --color-main: #005728;
  --color-main-h: #0E8A61;
  --color-light: #F6F8F7;
  --color-blk: #000;
  --color-blk-h: #333;
  --color-gray: #3C3735;
  --color-beige: #CABB89;

  --grad-v-grn: linear-gradient( to bottom, #056C55 0%, #0E8A61 50%, #30691F 100%);
  --grad-v-blu: linear-gradient( to bottom, #041F59 0%, #16337D 50%, #2E6495 100%);
  --grad-v-orn: linear-gradient( to bottom, #905036 0%, #AD6232 50%, #DB7E2C 100%);
  --grad-v-pnk: linear-gradient( to bottom, #921A54 0%, #B24160 50%, #E17A6F 100%);
  --grad-v-ppl: linear-gradient( to bottom, #532884 0%, #66418A 50%, #9E5AB7 100%);

  --grad-h-grn: linear-gradient( to right, #056C55 0%, #0E8A61 50%, #30691F 100%);
  --grad-h-blu: linear-gradient( to right, #041F59 0%, #16337D 50%, #2E6495 100%);
  --grad-h-orn: linear-gradient( to right, #905036 0%, #AD6232 50%, #DB7E2C 100%);
  --grad-h-pnk: linear-gradient( to right, #921A54 0%, #B24160 50%, #E17A6F 100%);
  --grad-h-ppl: linear-gradient( to right, #532884 0%, #66418A 50%, #9E5AB7 100%);

  --grad-biz1: linear-gradient(80deg, #689427 0%, #004D3D 80%);
  --grad-biz2: linear-gradient(80deg, #E68A81 0%, #803C42 80%);
  --grad-biz3: linear-gradient(80deg, #1893C4 0%, #003457 80%);

  /* font-family */
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Cormorant Garamond", serif;
  --font-script: "Allura", cursive;
  --font-sans: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, 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-30: calc(30 * var(--to-rem));
  --font-32: calc(32 * var(--to-rem));
  --font-36: calc(36 * var(--to-rem));
  --font-40: calc(40 * 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, 86vw);
  --width-narrow: min(1040px, 86vw);
  --width-article: min(980px, 86vw);
  --bleed: calc((var(--width-inner) - 100dvw) / 2);

	--transition: 0.3s ease;


  --border-width: 12px;
  --border-angle: 9px;
  --border-size: 2px;
  --border-half: calc(var(--border-size) / 2);
}
@media screen and (min-width: 810.1px) {
  :root {
    --rounded: 16px;
    --header-h: 70px;
  }
}

@media screen and (max-width: 810px) {
	:root {
    --rounded: 8px;
    --header-h: 52px;
    --border-width: 10px;
    --border-angle: 7px;
    --border-size: 1px;
	}
}