/* -------------------------------------------------------
カラー設定
---------------------------------------------------------*/
	:root {

		/* -----コーポレートカラー----- */
		/* メインカラー */
		--main_grad_direction:	to right; /* グラデーション方向 */
		--main_grad_start:		#28294F; /* グラデーションカラー（スタート） */
		--main_grad_end:		#0000CD; /* グラデーションカラー（エンド） */
		
		--corporate_main: var(--main_grad_direction), var(--main_grad_start), var(--main_grad_end);

		/* サブカラー */
		--sub_grad_direction:	to right; /* グラデーション方向 */
		--sub_grad_start:		#FF0A19; /* グラデーションカラー（スタート） */
		--sub_grad_end:			#FF0A19; /* グラデーションカラー（エンド） */	
		
		--corporate_sub: var(--sub_grad_direction), var(--sub_grad_start), var(--sub_grad_end);

		/* -----フォントカラー設定----- */
		/* フォントメインカラー */
		--main_font_color:	#333333;

		/* メニューフォントカラー */
		--sub_font_color:	#FFFFFF;
	}

/* -------------------------------------------------------
共通項目
---------------------------------------------------------*/

	/* -----フォント----- */
		body {
		/* フォント指定 */
		font-family: serif;

		/* フォントカラー */
		color: var(--main_font_color);
	}
	
	/* -----画面幅1200px・中央配置----- */
	.centerbox {
		max-width: 1200px;
		margin: auto;
		padding: 0 10px;
	}

	/* -----セクション間スペース----- */
	section {
		margin-bottom: 100px;
	}


	/* -----buttonデザイン----- */
	.defB-block {
		display: block;
		text-align: center;
		padding: 5px 10px;
		border-radius: 5px;
		background:
		linear-gradient(var(--corporate_sub));
		color: var(--sub_font_color);
	}

	.defB-form {
		padding: 5px 10px;
		border-radius: 5px;
		background:
		linear-gradient(var(--corporate_sub));
		color: var(--sub_font_color);
	}

	.wholeLink {
		cursor: pointer;
	}

/* -------------------------------------------------------
header
---------------------------------------------------------*/

	header {
		margin-bottom: 50px;
		background-color: #FFFFFF;
	}

	header menu {					
		margin: 0;
		padding: 0;
		list-style: none;
	}


/* -------------------------------------------------------
メイン見出し
---------------------------------------------------------*/

	.ttl {
		width: 100%;

		margin-bottom: 50px;
		padding: 10px;

		background:
		linear-gradient(var(--corporate_main)) ;
		color: var(--sub_font_color);
	}

	.ttl .centerbox {
		display: flex;
	}


	.ttl p {
		align-content: end;
	}

	
/* -------------------------------------------------------
サブ見出し
---------------------------------------------------------*/

	.subTtl {
		text-align: center;
		margin-bottom: 50px;
	}

	.subTtl h1,
	.subTtl h2 {
		display: inline-block;
		padding: 0 10px;
		padding-bottom: 3px;
		border-bottom: 3px solid var(--main_grad_end);
		border-image: linear-gradient(var(--main_grad_direction), var(--main_grad_start) 0%, var(--main_grad_end) 100%) 1;
	}


/* -------------------------------------------------------
footer
---------------------------------------------------------*/

	body {
		position: relative;
		min-height: 100vh;
		box-sizing: border-box;
	}

	footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: linear-gradient(var(--corporate_main));
		color: var(--sub_font_color);
	}
	
	/* -----footerメニュー----- */
	footer menu {					
		margin: 0;
		padding: 0;
		padding: 20px;
		list-style: none;
	}

	footer menu li {
		padding: 5px;
	}
	
	/* -----footerお問い合わせBTN----- */
	footer .btn {
		width: 120px;
	}

	/* -----footer会社情報----- */
	footer .company {
		display: flex;
		align-items: end;
	}
	
	/* -----footerコピーライト----- */
	footer .cr {
		text-align: center;
		padding: 3px;
		background-color: var(--sub_grad_end);
		font-size: x-small;
	}


/* -------------------------------------------------------
PC設定
---------------------------------------------------------*/

	@media not screen and (max-width:1200px) {

		/* ---------------
		header
		--------------- */
		header .header-step {
			display: flex;
		}

		/* -----header上段----- */
		header .header-step:first-child {
			justify-content: space-between;
			border-bottom: 3px solid;
			border-image: linear-gradient(var(--main_grad_direction), var(--main_grad_start) 0%, var(--main_grad_end) 100%) 1;
		}

		header .logo {
			margin: 10px 0 5px 20px;
		}

		header .btn {
			align-content: center;
			width: 120px;
			margin-right: 20px;
		}

		/* -----header下段----- */
		header nav button {
			display: none;
		}

		header menu {			
			display: flex;
			margin-left: 30px;
		}
		
		header menu li {
			margin-right: 30px;
		}

		header menu .sp {
			display: none;
		}

		header li a {
			display: block;
			padding: 10px;
		}

		/* ---------------
		メイン見出し
		--------------- */
		.ttl h1 {
			margin-left: 20px;
			font-size: 50px;
		}
		
		.ttl p {
			margin-left: 20px;
			font-size: large;
		}
		
		/* ---------------
		サブ見出し
		--------------- */
		.subTtl h1,
		.subTtl h2 {
			font-size: x-large;
		}
		
		/* ---------------
		footer
		--------------- */
		
		body {
			padding-bottom: 228px;
		}
		
		footer .footer-step {
			display: flex;
			justify-content: space-between;
			align-items: end;
			padding-right: 20px;
		}
		
		/* -----footerメニュー----- */
		footer menu {
			padding-left: 30px;
		}

		/* -----footerお問い合わせBTN----- */
		footer .btn {
			margin-left: auto;
		}

		/* -----footer会社情報----- */
		footer .company {
			padding-bottom: 20px;
		}

		footer .logo {
			margin-right: 20px;
		}
		footer .name {
			margin-bottom: 10px;
			font-size: x-large;
		}

		footer .address {
			margin-bottom: 10px;
		}
	}

	
/* -------------------------------------------------------
SP設定
---------------------------------------------------------*/

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

		/* ---------------
		header
		--------------- */
		header {
			position: sticky;
			top: 0;
			display: flex;
			justify-content: space-between;
			padding: 5px 0;
			border-bottom:3px solid;
			border-image: linear-gradient(var(--main_grad_direction), var(--main_grad_start) 0%, var(--main_grad_end) 100%) 1;
			z-index: 30;
		}
		
		/* -----headerロゴ----- */
		header .logo {
			margin-left: 10px;
		}

		header .header-step {
			align-content: end;
		}

		header .logo img {
			height: 35px;
		}

		/* -----headerメニュー----- */
		header .btn {
			display: none;
		}

		header nav button {
			align-content: center;
			margin-right: 10px;
		}

		header nav .gNav {
			display: none;
			position: absolute;
			top: 50px;
			left: 0px;
			width: 100%;
			background-color: var(--main_grad_end);
			z-index: 10;
		}

		header nav menu {
			text-align: center;
			box-shadow: 0 3px 5px 1px var(--main_grad_start);
		}

		header nav menu li {
			color: var(--sub_font_color);
			border-bottom: 1px dashed var(--sub_grad_end);
		}

		header nav menu li:last-child {
			border-bottom: 0;
		}

		header menu a {
			display: block;
			padding: 10px;
		}

		/* ---------------
		メイン見出し
		--------------- */
		.ttl h1 {
			font-size: x-large;
		}

		.ttl .centerbox {
			justify-content: space-between;
			padding: 0;
		}
		
		.ttl p {
			font-size: x-small;
		}

		/* ---------------
		サブ見出し
		--------------- */
		.subTtl h1,
		.subTtl h2 {
			font-size: large;
		}
		
		/* ---------------
		footer
		--------------- */		
		body {
			padding-bottom: 399px;
		}

		/* -----footerお問い合わせBTN----- */
		footer .btn {
			margin: auto;
		}
		
		/* -----footer会社情報----- */
		footer .company {
			justify-content: center;
			padding: 20px;
		}

		footer .logo {
			width: 80px;
			margin-right: 20px;
		}
		footer .name {
			margin-bottom: 5px;
			font-size: large;
		}

		footer .address {
			margin-bottom: 5px;
			font-size: small;
		}

		footer .tel {
			font-size: x-small;
		}
	}