@charset "utf-8";
/* CSS Document */

/* 基本設定
----------------------------------------------------------- */



/* ヘッダースタイル
----------------------------------------------------------- */



/* ビジュアルスタイル
----------------------------------------------------------- */
#visual {
	order: 1; /* ★全体デザイン上の順序設定★ */
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 80px);
	min-height: fit-content; /* 要素に合わせた高さ */
}
#visual #visual_inner {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 10px 60px;
	width: 1700px;	/* PC固定幅 */
	margin: 0 auto 30px;
	font-size: clamp(5.0rem,10vw,5.7rem); /* 最小,推奨,最大  ※h1の最小値は最大(デフォルト)から-0.7rem　h2との差がなくなる場合固定のままで*/
	line-height: 1.6;
	padding: min(80px,10vw) 35px;
}
#visual .visual_illust {
}
#visual .visual_text {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 60px;
	margin-bottom: 10%;
	flex-shrink: 0.6;
}



/* 見出しスタイル
----------------------------------------------------------- */
h2:not(#gnavi_title):not(.side_title) {
	/*margin: 0;*/
}



/* ページスタイル
----------------------------------------------------------- */



@media screen and (max-width: 1699px) {	/* PC固定幅からのブレイクポイント */
	
	/* 基本設定
	----------------------------------------------------------- */
	/* ★　例）トップページのgnaviのみPC時はメニュー表示する場合　★ */
	/*.hamburger-button {
		display: block;
	}*/
	
	/* ビジュアルスタイル
	----------------------------------------------------------- */
	#visual {
		width: 100%;
	}
	#visual #visual_inner {
		left: auto;
		width: 100%;
		margin: 0;
	}
	
}

@media screen and (max-width: 959px) {	/* タブレットからのブレイクポイント */
	
	#visual #visual_inner {
		flex-wrap: wrap;
	}
	#visual .visual_text {
		margin-bottom: 0;
		padding: 5% 13%;
		flex-shrink: 1;
	}
	
}

@media screen and (max-width: 620px) {	/* 620pxからのブレイクポイント */
	
	/* ビジュアルスタイル
	----------------------------------------------------------- */
	#visual #visual_inner .visual_lead {
		font-size: 2.8rem;
	}
	
}

@media screen and (max-width: 479px) {	/* スマートフォンからのブレイクポイント */
	
	/* ビジュアルスタイル
	----------------------------------------------------------- */
	#visual {
		/*width: 100%;*/
		/*height: 100%;  ※splideスライドショー使用時は使用禁止しexpand.jsで高さ調整*/
		/*aspect-ratio: 1 / 1;  正方形 ※splideスライドショー使用時は使用禁止しexpand.jsで高さ調整 */
	}
	
	/* ビジュアルスタイル
	----------------------------------------------------------- */
	/* キャッチコピー */
	#visual #visual_inner .visual_catchphrase {
		/*font-size: 2.8rem;*/
	}
	
}