@charset "UTF-8";
/* base
===================================*/
:root {
	/* background color */
	--bg-color-primary: 252 248 240;
	--bg-color-secondary: 247 231 183;
	--bg-color-tertiary: 201 168 76;

	--bg-color-light: 255 255 255;

	/* text color */
	--text-color-primary: 51 49 46;
	--text-color-secondary: 51 49 46;

	/* color */
	--color-primary: 201 168 76;
	--color-secondary: 86 35 40;
	--color-tertiary: 158 130 36;
	--color-dark: var(--text-color-primary);
	--color-light: 255 255 255;
	--color-accent-primary: 215 22 24;

	/* border */
	--border-color-dark: var(--text-color-primary);

	/* font */
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;

	--rem-unit-base: 0.625;
	--font-size-xxs: calc(clamp(1rem,2.7vw,1.2rem) * var(--rem-unit-base));
	--font-size-xs-fix: calc(1.2rem * var(--rem-unit-base));
	--font-size-xs: calc(clamp(1.2rem,3.3vw,1.4rem) * var(--rem-unit-base));
	--font-size-sm-fix: calc(1.4rem * var(--rem-unit-base));
	--font-size-sm: calc(clamp(1.4rem,3.7vw,1.6rem) * var(--rem-unit-base));
	--font-size-reg-fix: calc(1.6rem * var(--rem-unit-base));
	--font-size-reg: calc(clamp(1.6rem,4.4vw,1.8rem) * var(--rem-unit-base));
	--font-size-md-fix: calc(2rem * var(--rem-unit-base));
	--font-size-md: calc(clamp(2rem,5.6vw,2.8rem) * var(--rem-unit-base));
	--font-size-lg: calc(clamp(2.4rem,6.7vw,3.4rem) * var(--rem-unit-base));
	--font-size-xl: calc(clamp(2.5rem,6.9vw,4.4rem) * var(--rem-unit-base));

	--font-size-xl-en: calc(clamp(3.6rem,10vw,6.8rem) * var(--rem-unit-base));

	--font-family-serif: "Shippori Mincho", serif;
	--font-family-sans: "Noto Sans JP", sans-serif;

	--font-heading: var(--font-family-serif);
	--font-body: var(--font-family-sans);


	/* layout */
	--layout-block-start: clamp(78px,22.2vw,120px);
	--layout-block-end: clamp(118px,33.3vw,240px);

	--layout-inline-gutter: clamp(18px,5.6vw,80px);

	/* space */
	--space-04: clamp(2px,1.1vw,8px);
	--space-08: clamp(6px,2.2vw,16px);
	--space-10: clamp(8px,2.8vw,20px);
	--space-12: clamp(10px,3.3vw,24px);
	--space-16: clamp(14px,4.4vw,32px);
	--space-20: clamp(18px,5.6vw,40px);
	--space-24: clamp(22px,6.7vw,48px);
	--space-28: clamp(26px,7.8vw,56px);
	--space-32: clamp(30px,8.9vw,64px);
	--space-36: clamp(34px,10vw,72px);
	--space-40: clamp(38px,11.1vw,80px);
	--space-48: clamp(46px,13.3vw,96px);
	--space-56: clamp(54px,15.6vw,112px);
	--space-64: clamp(62px,17.8vw,128px);
	--space-80: clamp(78px,22.2vw,160px);

	--header-height: 58px;
}

@media (width >= 811px) {
	:root {
		--header-height: 70px;
	}
}

html {
	scroll-padding-top: var(--header-height);
	scrollbar-gutter: stable;
}

body {
	color: var(--text-color-primary);
	font-size: var(--font-size-sm);
	line-height: 1.8;
	font-family: var(--font-family-ja);
}

body.is-fixed {
	height: 100%;
	overflow: hidden;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 700;
	font-family: var(--font-heading);
	font-feature-settings: "palt";
}

h1 {
	line-height: 1;
}

h2,h3,h4,h5,h6 {
	line-height: 1.5;
}

ul,ol {
	padding: 0;
}

ul  {
	list-style: disc inside;
}

ol {
	list-style: decimal inside;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

iframe {
	max-width: 100%;
	height: 100%;
}

a {
	color: rgb(var(--text-color-primary));
	text-decoration: none;
}

@media (hover:hover) {
	a:hover {
		color: rgb(var(--color-secondary));
		cursor: pointer;
	}
}

a:active {
	color: rgb(var(--color-secondary));
	transition: none;
}

a[target="_blank"] {
	-webkit-tap-highlight-color: transparent;
}

a[target="_blank"]:active {
	transition: none;
}

button {
	width: 100%;
	padding: 0;
	background-color: transparent;
	border: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

ruby {
	rt {
		font-size: 0.4em;
	}
}