@charset "utf-8";

/**************************************************
TRISITE_CSS
**************************************************/
:root {
	--step: 1.2;
	--font-size: 19px;
	--line-height: 1.8;
	--small: 0.6em;
	--large: 1.4em;
	--transition: 0.2s;
	--header-offset: 100px;
	--gap: 34px;
	--radius: 0.6rem;
	--radius-inner: 0.3rem;
	--width-limit: 1100px;
	--section-space: 60px;
	--margin: 1.8em;
	--padding: 20px;
	--input-width: 260px;
	--brightness: 1.1;
	--outline: 1px;
	--trigger-size: 56px;
	--trigger-bar: 3px;


	--color-light-glass: rgba(255, 254, 254, 0.8);
	--color-dark-glass: rgba(38, 32, 32, 0.8);

	--color-white: rgb(255, 254, 254);
	--color-blue: rgb(35, 137, 248);
	--color-red: rgb(231, 63, 63);
	--color-green: rgb(46, 163, 105);
	--color-yellow: rgb(248, 245, 46);
	--color-orange: #F29600;
	--color-gray: rgb(156, 147, 147);
	--color-lightgray: rgb(239, 233, 233);
	--color-black: rgb(38, 32, 32);
}


/* 追加設定 */
:root {
	--font-family-base: "Noto Sans JP", sans-serif;
	--color-main: #DF5E9C;
	--color-base: #FAE7F0;
	--color-red: #BB2C37;
	--color-pink: #FAE7F0;
	--color-purple: #A75BBD;
	--color-gray: #C0C1C1;

}


:root {
	--color-body: var(--color-white);
	--color-text: var(--color-black);
	--color-border: var(--color-black);
	--color-table: var(--color-white);
	--color-table-odd: var(--color-lightgray);

	--color-agree-bg: var(--color-lightgray);
	--color-agree-fr: var(--color-black);

	--color-disagree-bg: var(--color-red);
	--color-disagree-fr: var(--color-white);

	--color-cancel-bg: var(--color-lightgray);
	--color-cancel-fr: var(--color-black);

	--color-trigger-bg: var(--color-white);
	--color-trigger-fr: var(--color-black);

	--color-outline: var(--color-gray);
	--color-outline-focus: var(--color-main);
	--color-outline-text: var(--color-black);
	--color-outline-focus-text: var(--color-white);
	--color-link: var(--color-main);
	--color-hover: var(--color-red);
	--color-form: var(--color-white);
}


/**************************************************
clamp計算式
p {
  --clamp-min: 14;
  --clamp-max: 16;
  font-size: var(--clamp);
}
**************************************************/
*,
::before,
::after {
	--clamp-root-font-size: 16;
	--clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
	--clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
	--clamp-preffered-value: calc(var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi));
	--clamp: clamp(calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
			var(--clamp-preffered-value),
			calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size))));

	font-size: var(--clamp);
}

/* デフォルトのフォントサイズ */
body {
	--clamp-viewport-min: 375;
	--clamp-viewport-max: 1200;
	--clamp-min: 14;
	--clamp-max: 16;
}