@charset "UTF-8";
/* ==================
カラー */
:root{
	--color-main:#009fe8;
	--color-main-soft: #8198a5;
	--color-main-pale: #abc0cc;
	--color-main-thin: #f1f5f7;

	--color-accent: #e50012;
	--color-accent-pale: #d3abb8;
	--color-accent-thin: #f9f5f4;

	--color-base: #ffffff;

	--color-gray:#7b7b7b;
	--color-bk: #2d2d2d;
	--color-white:#ffffff;

	/* hover ／ focus */
	--color-link: #0094d7;
	--color-link--hover: #1a46d5;
	--color-focus: #1a46d5;

	/* scroll bar */
	/* --color-scroll-bar: #4b6572;
	--color-scroll-bar-body: #053A5C; */
}


/* ==================
フォントファミリー */
:root{
	/* ベース */
	--baseFonts: "Heebo","Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	/* アルファベット */
	--alphabet: "Heebo","Helvetica Neue", sans-serif;
	/* ナンバー */
	--number: "Heebo","Helvetica Neue",Arial, sans-serif;
	/* 記号 / 注釈のマークなど */
	--sine: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}


/* ==================
フォントサイズ */
:root{
	/* ================== */
	/* px to rem // 16px = 1rem = (16rem / 16) */
	/* 559px 34.9375rem */
	/* 959px 59.9375rem */
	/* ================== */
	/* 基準値 min-width320px max-width1120px
	   必ず fall back も作成してください */
	/* 12px to 12px */
	--txt-xxs: calc(12rem/16);
	/* 14px to 14px */
	--txt-xs: calc(14rem/16);
	/* 15px to 15px */
	--txt-sm: calc(15rem/16);
	/* 15px to 16px */
	--txt-reg: clamp(0.938rem, calc(0.913rem + 0.125vw), 1rem);
	/* min: 15px, max: 20px */
	--txt-md: clamp(0.938rem, calc(0.813rem + 0.625vw), 1.25rem);
	/* min: 20px, max: 25px */
	--txt-lg: clamp(1.25rem, calc(1.125rem + 0.625vw), 1.563rem);
	/* min: 20px, max: 30px */
	--txt-xl: clamp(1.25rem, calc(1rem + 1.25vw), 1.875rem);
	/* min: 25px, max: 40px */
	--txt-4x: clamp(1.563rem, calc(1.188rem + 1.875vw), 2.5rem);
	/* min: 25px, max: 50px */
	--txt-5x: clamp(1.563rem, calc(0.938rem + 3.125vw), 3.125rem);
	/* min: 25px, max: 60px */
	--txt-6x: clamp(1.563rem, calc(0.688rem + 4.375vw), 3.75rem);
	/* min: 25px, max: 70px */
	--txt-7x: clamp(1.563rem, calc(0.438rem + 5.625vw), 4.375rem);
	/* min: 25px, max: 80px */
	--txt-8x: clamp(1.563rem, calc(0.188rem + 6.875vw), 5rem);
	/* min: 25px, max: 90px */
	--txt-9x: clamp(1.563rem, calc(-0.062rem + 8.125vw), 5.625rem);
	/* min: 25px, max: 100px */
	--txt-10x: clamp(1.563rem, calc(-0.312rem + 9.375vw), 6.25rem);
}
/* ==================
フォントサイズ／フォールバック／ clampをサポートしていない場合 */
@supports not ( font-size: clamp(0.938rem, 0.915rem + 0.11vw, 1rem) ){
	:root{
		/* 15px to 16px */
		--txt-reg: max(0.938rem, min(calc(0.913rem + 0.125vw)), 1rem);
		/* min: 15px, max: 20px */
		--txt-md: max(0.938rem, min(calc(0.813rem + 0.625vw)), 1.25rem);
		/* min: 20px, max: 25px */
		--txt-lg: max(1.25rem, min(calc(1.125rem + 0.625vw)), 1.563rem);
		/* min: 20px, max: 30px */
		--txt-xl: max(1.25rem, min(calc(1rem + 1.25vw)), 1.875rem);
		/* min: 25px, max: 40px */
		--txt-4x: max(1.563rem, min(calc(1.188rem + 1.875vw)), 2.5rem);
		/* min: 25px, max: 50px */
		--txt-5x: max(1.563rem, min(calc(0.938rem + 3.125vw)), 3.125rem);
		/* min: 25px, max: 60px */
		--txt-6x: max(1.563rem, min(calc(0.688rem + 4.375vw)), 3.75rem);
		/* min: 25px, max: 70px */
		--txt-7x: max(1.563rem, min(calc(0.438rem + 5.625vw)), 4.375rem);
		/* min: 25px, max: 80px */
		--txt-8x: max(1.563rem, min(calc(0.188rem + 6.875vw)), 5rem);
		/* min: 25px, max: 90px */
		--txt-9x: max(1.563rem, min(calc(-0.062rem + 8.125vw)), 5.625rem);
		/* min: 25px, max: 100px */
		--txt-10x: max(1.563rem, min(calc(-0.312rem + 9.375vw)), 6.25rem);
	}
}


/* =======================
ガーター */
:root{
	/* ガーター基礎設定 */
	--gutter-xxs: calc(10rem / 16);
	--gutter-xs: calc(20rem / 16);
	--gutter-sm: calc(30rem / 16);
	--gutter-reg: calc(40rem / 16);
	--gutter-md: calc(50rem / 16);
	--gutter-lg: calc(60rem / 16);
	--gutter-xl: calc(80rem / 16);
	--gutter-10x: calc(100rem / 16);
	--gutter-12x: calc(120rem / 16);
	--gutter-14x: calc(140rem / 16);
	--gutter-16x: calc(160rem / 16);

	/* セクション共通ガーター */
	--section-gutter: var(--gutter-16x);
	--section-inner-gutter: var(--gutter-10x);


	/* 可変ガーター */
	/* 基準値 min-width320px max-width1120px
	   必ず fall back も作成してください */
	/* min: 10px, max: 20px */
	--gutter-var-xs: clamp(10px, calc(0.375rem + 1.25vw), 1.25rem);
	/* min: 10px, max: 30px */
	--gutter-var-sm: clamp(0.625rem, calc(0.125rem + 2.5vw), 1.875rem);
	/* min: 10px, max: 40px */
	--gutter-var-reg: clamp(0.625rem, calc(-0.125rem + 3.75vw), 2.5rem);
	/* min: 15px, max: 50px */
	--gutter-var-md: clamp(0.938rem, calc(0.063rem + 4.375vw), 3.125rem);
	/* min: 15px, max: 60px */
	--gutter-var-lg: clamp(0.938rem, calc(-0.187rem + 5.625vw), 3.75rem);
	/* min: 20px, max: 70px */
	--gutter-var-xl: clamp(1.25rem, calc(0rem + 6.25vw), 4.375rem);
	/* min: 20px, max: 80px */
	--gutter-var-8x: clamp(1.25rem, calc(-0.25rem + 7.5vw), 5rem);
	/* min: 20px, max: 90px */
	--gutter-var-9x: clamp(1.25rem, calc(-0.5rem + 8.75vw), 5.625rem);
	/* min: 40px, max: 100px */
	--gutter-var-10x: clamp(2.5rem, calc(1rem + 7.5vw), 6.25rem);
	/* min: 40px, max: 110px */
	--gutter-var-11x: clamp(2.5rem, calc(0.75rem + 8.75vw), 6.875rem);
	/* min: 40px, max: 120px */
	--gutter-var-12x: clamp(2.5rem, calc(0.5rem + 10vw), 7.5rem);
}
/* ==================
ガーター／フォールバック／ clampをサポートしていない場合 */
@supports not ( margin: clamp(10px, 3.13vw, calc(40rem / 16)) ){
	:root{
		/* 可変ガーター */
		/* min: 10px, max: 20px */
		--gutter-var-xs: max(10px, min(clamp(0.375rem + 1.25vw)), 1.25rem);
		/* min: 10px, max: 30px */
		--gutter-var-sm: max(0.625rem, min(clamp(0.125rem + 2.5vw)), 1.875rem);
		/* min: 10px, max: 40px */
		--gutter-var-reg: max(0.625rem, min(clamp(-0.125rem + 3.75vw)), 2.5rem);
		/* min: 15px, max: 50px */
		--gutter-var-md: max(0.938rem, min(clamp(0.063rem + 4.375vw)), 3.125rem);
		/* min: 15px, max: 60px */
		--gutter-var-lg: max(0.938rem, min(clamp(-0.187rem + 5.625vw)), 3.75rem);
		/* min: 20px, max: 70px */
		--gutter-var-xl: max(1.25rem, min(clamp(0rem + 6.25vw)), 4.375rem);
		/* min: 20px, max: 80px */
		--gutter-var-8x: max(1.25rem, min(clamp(-0.25rem + 7.5vw)), 5rem);
		/* min: 20px, max: 90px */
		--gutter-var-9x: max(1.25rem, min(clamp(-0.5rem + 8.75vw)), 5.625rem);
		/* min: 40px, max: 100px */
		--gutter-var-10x: max(2.5rem, min(clamp(1rem + 7.5vw)), 6.25rem);
		/* min: 40px, max: 110px */
		--gutter-var-11x: max(2.5rem, min(clamp(0.75rem + 8.75vw)), 6.875rem);
		/* min: 40px, max: 120px */
		--gutter-var-12x: max(2.5rem, min(clamp(0.5rem + 10vw)), 7.5rem);
	}
}
@media ( max-width: 959px ){
	:root{
		/* ガーター基礎設定 */
		--gutter-md: calc(40rem / 16);
		--gutter-lg: calc(60rem / 16);
		--gutter-xl: calc(60rem / 16);
		--gutter-10x: calc(100rem / 16);
		--gutter-12x: calc(120rem / 16);
		--gutter-14x: calc(120rem / 16);
		--gutter-16x: calc(120rem / 16);
	}
}
@media ( max-width: 559px ){
	:root{
		/* ガーター基礎設定 */
		--gutter-10x: calc(80rem / 16);
		--gutter-12x: calc(80rem / 16);
		--gutter-14x: calc(80rem / 16);
		--gutter-16x: calc(80rem / 16);
	}
}


/* =======================
width/height */
:root{
	--max-width: calc(1120rem/16);
	--max-width--xl: calc(1800rem/16);
	--max-width--lg: calc(1600rem/16);
	--max-width--md: calc(1008rem/16);
	--max-width--sm: calc(896rem/16);
	--max-width--xs: calc(784rem/16);
	--max-width--xxs: calc(672rem/16);
	--flexible-width: min(
		calc(100% - calc(var(--gutter-var-8x) * 2)),
		var(--max-width)
	);
	--flexible-width--md: min(
		calc(100% - calc(var(--gutter-var-8x) * 2)),
		var(--max-width--md)
	);
	--flexible-width--sm: min(
		calc(100% - calc(var(--gutter-var-8x) * 2)),
		var(--max-width--sm)
	);
	--flexible-width--xs: min(
		calc(100% - calc(var(--gutter-var-8x) * 2)),
		var(--max-width--xs)
	);
	--flexible-width--xxs: min(
		calc(100% - calc(var(--gutter-var-8x) * 2)),
		var(--max-width--xxs)
	);
	/* ツラ合わせ設定
	window幅 - コンテンツ幅 / 2 = 片側の余白値 */
	--head-match-space: max(
		var(--gutter-var-8x),
		calc(calc(100vw - var(--max-width))/2)
	);
	--head-match-space--md: max(
		var(--gutter-var-8x),
		calc(calc(100vw - var(--max-width--md))/2)
	);
	--head-match-space--sm: max(
		var(--gutter-var-8x),
		calc(calc(100vw - var(--max-width--sm))/2)
	);
	--head-match-space--xs: max(
		var(--gutter-var-8x),
		calc(calc(100vw - var(--max-width--xs))/2)
	);
	--head-match-space--xxs: max(
		var(--gutter-var-8x),
		calc(calc(100vw - var(--max-width--xxs))/2)
	);


	/* =======================
	height */
	--height-vh-fit: calc(var(--vh, 1vh) * 100);
}


/* ==================
イージング */
:root{
	/* linear */
	/* 均等 */
	--linear:cubic-bezier(0.0, 0.0, 1.0, 1.0);

	/* easeInSine */
	--easeInSine:cubic-bezier(.47, 0, .745, .715);
	/* easeOutSine */
	--easeOutSine:cubic-bezier(.39, .575, .565, 1);
	/* easeInOutSine */
	--easeInOutSine:cubic-bezier(.445, .05, .55, .95);

	/* easeInQuad */
	--easeInQuad:cubic-bezier(.55, .085, .68, .53);
	/* easeOutQuad */
	--easeOutQuad:cubic-bezier(.25, .46, .45, .94);
	/* easeInOutQuad */
	--easeInOutQuad:cubic-bezier(.455, .03, .515, .955);

	/* easeInCubic */
	--easeInCubic:cubic-bezier(.55, .055, .675, .19);
	/* easeOutCubic */
	--easeOutCubic:cubic-bezier(.215, .61, .355, 1);
	/* easeInOutCubic */
	--easeInOutCubic:cubic-bezier(.645, .045, .355, 1);

	/* easeInQuart */
	--easeInQuart:cubic-bezier(.895, .03, .685, .22);
	/* easeOutQuart */
	--easeOutQuart:cubic-bezier(.165, .84, .44, 1);
	/* easeInOutQuart */
	--easeInOutQuart:cubic-bezier(.77, 0, .175, 1);

	/* easeInQuint */
	--easeInQuint:cubic-bezier(.755, .05, .855, .06);
	/* easeOutQuint */
	--easeOutQuint:cubic-bezier(.23, 1, .32, 1);
	/* easeInOutQuint */
	--easeInOutQuint:cubic-bezier(.86, 0, .07, 1);

	/* easeInExpo */
	--easeInExpo:cubic-bezier(.95, .05, .795, .035);
	/* easeOutExpo */
	--easeOutExpo:cubic-bezier(.19, 1, .22, 1);
	/* easeInOutExpo */
	--easeInOutExpo:cubic-bezier(1, 0, 0, 1);

	/* easeInCirc */
	--easeInCirc:cubic-bezier(.6, .04, .98, .335);
	/* easeOutCirc */
	--easeOutCirc:cubic-bezier(.075, .82, .165, 1);
	/* easeInOutCirc */
	--easeInOutCirc:cubic-bezier(.785, .135, .15, .86);

	/* 戻る動き//慣性スクロールのバウンドみたいな感じ */
	/* easeInBack */
	--easeInBack:cubic-bezier(.6, -0.28, .735, .045);
	/* easeOutBack */
	--easeOutBack:cubic-bezier(.175, .885, .32, 1.275);
	/* easeInOutBack */
	--easeInOutBack:cubic-bezier(.68, -0.55, .265, 1.55);
}