@charset "utf-8";

/*----- フォント設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');



/*-------------------------------
	変数設定
-------------------------------*/

:root{

	/*----- 文字 */
	/* 書体 */
	--jp: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	--en: "Jost", sans-serif;
	
	/* 文字サイズ */
	--font-size: calc(var(--font-size-number) * 1rem);

	/* 行間 */
	--line-height: calc(var(--line-height-number) / var(--font-size-number));

	/*----- 色設定 */
	--maincolor: #0055b8;
	--maincolor2: #0079c2;
	--subcolor: #2ec2db;
	--subcolor2: #fcee21;
	--gradcolor1: #00aaeb;
	--gradcolor2: #25ddbc;
	--gradcolor_light1: #e7f6ff;
	--gradcolor_light2: #ebfff5;
	--blackcolor: #333;
	--graycolor: #ccc;
	--gradcolor: linear-gradient(90deg, var(--gradcolor1) 0%, var(--gradcolor2) 100%);
	--gradcolor40: linear-gradient(40deg, var(--gradcolor1) 0%, var(--gradcolor2) 100%);
	--gradcolor_light: linear-gradient(90deg, var(--gradcolor_light1) 0%, var(--gradcolor_light2) 100%);

	/*----- アニメーション設定 */
	--transition: .3s all cubic-bezier(0.1, 0.7, 0.4, 1);
	--opacity: .6;

	/*----- その他設定 */

}
@media screen and (min-width:769px){

	:root{

		/*----- コンテンツ幅 */
		--maxwidth-number: 110rem;
		--maxwidth160-number: 160rem;
		--maxwidth120-number: 120rem;
		--maxwidth94-number: 94rem;
		--maxwidth: calc(var(--maxwidth-number) + (var(--padding-leftright) * 2));
		--maxwidth160: calc(var(--maxwidth160-number) + (var(--padding-leftright) * 2));
		--maxwidth120: calc(var(--maxwidth120-number) + (var(--padding-leftright) * 2));
		--maxwidth94: calc(var(--maxwidth94-number) + (var(--padding-leftright) * 2));

		/*----- 余白 */
		--padding-topbottom: 13rem;
		--padding-leftright: 3rem;

		/*----- 文字 */
		/* 文字サイズ */
		--root-font-size: 62.5%;
		--font-size-number: 2;

		/* 行間 */
		--line-height-number: 3.5;

		/* 固定値 */
		--header-height: 11rem;

	}

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	:root{
		
		/*----- スマホカンプサイズ */
		--sp-design-width: 750;

		/*----- コンテンツ幅 */
		--maxwidth-number: 100%;
		--maxwidth: var(--maxwidth-number);

		/*----- 余白 */
		--padding-topbottom: 10rem;
		--padding-leftright: 6rem;

		/*----- 文字 */
		/* 文字サイズ */
		--root-font-size: calc((10 / var(--sp-design-width)) * 100vw);
		--font-size-number: 3;

		/* 行間 */
		--line-height-number: 5.25;

		/* 固定値 */
		--header-height: 15rem;

	}

}