@charset "utf-8";

/*----- フォント設定 */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); /* 日本語 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap'); /* 韓国語 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); /* 中国語[繁体字] */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap'); /* 中国語[簡体字] */



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

:root{

	/*----- 文字 */
	/* 書体 */
	/* --jp: "Zen Kaku Gothic New", sans-serif; */
	--jp: "Noto Sans JP", 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));

	/*----- 色設定 */
	--logocolor: #00525e;
	--maincolor_dark1: #a0907a;
	--maincolor_dark2: #b7a586;
	--maincolor_dark3: #ccb079;
	--maincolor_dark4: #595149;
	--maincolor_dark5: #332d27;
	--maincolor_dark6: #937148;
	--maincolor_dark7: #8e7f6b;
	--maincolor_dark8: #6b4712;
	--maincolor_light1: #f2eadf;
	--maincolor_light2: #f7f2eb;
	--maincolor_light3: #efe7d0;

	--kato_maincolor_dark1: #2b7fad;
	--kato_maincolor_dark2: #4090c6;
	--kato_maincolor_dark3: #5bbcc4;
	--kato_maincolor_dark4: #2f6289;
	--kato_maincolor_light1: #d9e6e8;
	--kato_maincolor_light2: #e1eef4;

	--hara_maincolor_dark1: #4c8e7b;
	--hara_maincolor_dark2: #53997e;
	--hara_maincolor_dark3: #6fa886;
	--hara_maincolor_dark4: #466753;
	--hara_maincolor_light1: #dceae5;
	--hara_maincolor_light2: #e4efea;

	--subcolor_dark1: #b53c37;
	--subcolor_dark2: #ce6a6a;
	--subcolor_light1: #f2dfe2;

	--blackcolor: #212121;
	--graycolor1: #eaeaea;
	--graycolor2: #ccc;
	--graycolor3: #fcfbfa;

	--redcolor1: #af4848;
	--bluecolor1: #3973a6;
	--bluecolor2: #416b82;
	--orangecolor1: #ed7c15;

	/* 枠線用 */
	--maincolor_dark-border1: var(--maincolor_dark3);
	--maincolor_dark-border2: var(--maincolor_dark4);
	--maincolor_dark-border3: var(--maincolor_dark7);
	--maincolor_light-border1: var(--maincolor_light2);
	--maincolor_light-border2: var(--maincolor_light3);
	--grayborder1: var(--graycolor2);

	--kato_maincolor_dark-border1: var(--kato_maincolor_dark1);
	--hara_maincolor_dark-border1: var(--hara_maincolor_dark1);

	/* グラデーション */
	--gradcolor_dark1: linear-gradient(90deg, var(--maincolor_dark1) 0%, var(--maincolor_dark2) 100%);
	--gradcolor_dark2: linear-gradient(90deg, var(--maincolor_dark1) 0%, var(--maincolor_dark1) 52%, var(--maincolor_dark2) 90%);
	
	--sub_gradcolor_dark1: linear-gradient(90deg, var(--subcolor_dark1) 0%, var(--subcolor_dark2) 100%);

	--kato_gradcolor_dark1: linear-gradient(90deg, var(--kato_maincolor_dark1) 0%, var(--kato_maincolor_dark2) 55%, var(--kato_maincolor_dark3) 100%);
	--kato_gradcolor_dark2: linear-gradient(90deg, var(--kato_maincolor_dark2) 0%, var(--kato_maincolor_dark1) 100%);
	--hara_gradcolor_dark1: linear-gradient(90deg, var(--hara_maincolor_dark1) 0%, var(--hara_maincolor_dark2) 55%, var(--hara_maincolor_dark3) 100%);
	--hara_gradcolor_dark2: linear-gradient(90deg, var(--hara_maincolor_dark2) 0%, var(--hara_maincolor_dark1) 100%);
	

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

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

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

	:root{

		/*----- コンテンツ幅 */
		--l-width-number: calc(120rem + 8rem);
		--l-width: calc(var(--l-width-number) + (var(--padding-leftright) * 2));
		--m-width-number: calc(112rem + 8rem);
		--m-width: calc(var(--m-width-number) + (var(--padding-leftright) * 2));
		--s-width-number: calc(104rem + 8rem);
		--s-width: calc(var(--s-width-number) + (var(--padding-leftright) * 2));
		--xs-width-number: calc(96rem + 0rem); /* 2026.09.10 xsはサイズ増加なし */
		--xs-width: calc(var(--xs-width-number) + (var(--padding-leftright) * 2));

		/*----- 余白 */
		--padding-topbottom: 12rem;
		--padding-leftright: 2.6rem;

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

		/* 行間 */
		/* --line-height-number: 2.9; */
		--line-height-number: 2.8;

		/*----- その他 */
		--header-height: 15.6rem;
		--header-height-fix-scale: .75;

	}

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

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

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

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

	:root{

		/*----- コンテンツ幅 */
		--l-width-number: 120rem;
		--m-width-number: var(--l-width-number);
		--s-width-number: var(--l-width-number);
		--xs-width-number: var(--l-width-number);

	}

}
@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: 3.5rem;

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

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

		/*----- その他 */
		--header-height: 12rem;

	}

}