@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=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');



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

:root{

	/*----- 文字 */
	/* 書体 */
	--jp1: "Zen Maru Gothic", serif;
	--jp2: "Zen Old Mincho", serif;
	--en1: "Josefin Sans", sans-serif;
	--en2: "Dancing Script", cursive;
	--en3: "Oswald", sans-serif;
	
	/* 文字サイズ */
	--font-size: calc(var(--font-size-number) * 1rem);

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

	/*----- 色設定 */
	--maincolor1: 251,121,168; /* FB79A8 */
	--maincolor1_sub: 233,168,187; /* E9A8BB */
	--maincolor1_sub2: 251,226,231; /* FBE2E7 */
	--maincolor1_sub3: 234,170,188; /* EAAABC */
	--maincolor2: 36,167,205; /* 24A7CD */
	--maincolor2_sub: 179,225,214; /* B3E1D6 */
	--maincolor2_sub2: 177,244,238; /* B1F4EE */
	--maincolor2_sub3: 38,168,205; /* 26A8CD */
	--blackcolor: #1F2427;
	--graycolor: #D3CCCC;
	/* --gradcolor: linear-gradient(90deg, var(--maincolor1) 0%, var(--maincolor2) 100%); */
	--gradcolor1: linear-gradient(135deg, #E8B8BE 14%, #E6D6D4 31%, #B4D4CE 52%,  #83D2EE 71%);
	--gradcolor2: linear-gradient(135deg, rgba(var(--maincolor2_sub2),1) 0%, rgba(var(--maincolor1_sub2),1) 100%);
	--gradcolor3: linear-gradient(135deg,  rgba(var(--maincolor2_sub3),1) 24%,rgba(var(--maincolor1_sub3),1) 58%);
	--gradcolor_maincolor1: linear-gradient(90deg, rgba(var(--maincolor1),1) 0%, rgba(var(--maincolor1_sub),1) 100%);
	--gradcolor_maincolor2: linear-gradient(90deg, rgba(var(--maincolor2),1) 0%, rgba(var(--maincolor2_sub),1) 100%);

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

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

	:root{

		/*----- コンテンツ幅 */
		--maxwidth-number: 120rem;
		--maxwidth: calc(var(--maxwidth-number) + (var(--padding-leftright) * 2));

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

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

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

		/*----- その他設定 */
		--border-radius: 2rem;
		--box-shadow: 0 0 2rem;

	}

}
@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: 12rem;
		--padding-leftright: 5rem;

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

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

		/*----- その他設定 */
		--border-radius: 4rem;
		--box-shadow: 0 0 4rem;

	}

}