@charset "UTF-8";
/*
Theme Name : 原病院　認知症LP
*/

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

/* 基本設計 */
:root {
  /* color */
	--color-txt: #3E3E3E;
  --color-main: #FF9100;
  --bg-main: #FFAE35;
	--bg-beige: #FCF6F3;
	--bg-white: #fff;
  /* font-family */
  --font-en: "Roboto", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-sans: "Zen Kaku Gothic New", "游ゴシック", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;

  /* transform */
  --to-rem: calc(1rem / 16); /* 1px あたりのrem値　*/
  /* font-size */
  --font-14: calc(14 * var(--to-rem));
  --font-16: calc(16 * 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-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));
  
	--gutter-8: 8px;
	--gutter-16: 16px;
	--gutter-24: 24px;
	--gutter-32: 32px;
	--gutter-40: 40px;
	--gutter-60: 60px;
	--gutter-80: 80px;

  --space-sm: clamp(24px, 2.777vw, 40px);
  --space-md: clamp(30px, 4.166vw, 60px);
  --space-lg: clamp(40px, 5.555vw, 80px);
  --space-xlg: clamp(60px, 8.333vw, 120px);
  --space-xxlg: clamp(80px, 11.111vw, 160px);
  --space-xxxlg: clamp(100px, 13.888vw, 200px);

  --width-inner: min(1044px, 84%);
  --bleed: calc((var(--width-inner) - 100dvw) / 2);

	--transition: 0.3s ease-in-out;
}

@media screen and (max-width: 810px) {
	:root {
    --font-18: calc(16 * var(--to-rem));
    --font-22: calc(20 * var(--to-rem));

		--gutter-24: 20px;
		--gutter-32: 28px;
		--gutter-40: 36px;
		--gutter-60: 48px;
		--gutter-80: 64px;
	}
}