@charset "utf-8";

:root {

}

@media (prefers-color-scheme: dark) {
	:root {

	}
}

/* モバイル　ALL */
@media screen and (max-width: 425px) {
	:root {

	}
}

/* タブレット */
@media screen and (min-width:426px) and (max-width: 768px) {
	:root {

	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

	}
}

/* ノートパソコン L */
@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

	}
}

/* 2K以上 */
@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {

	}
}


/* 4K以上 */
@media screen and (min-width:2561px) {
	:root {

	}
}








/* ーーーーーーーーーーーーーーーーーーーー
ガイド
キービジュアル
ーーーーーーーーーーーーーーーーーーーー */

section#contents.guide {
	& .main_image {
		position: relative;
		height: var(--MainImage_height);
		background: url('https://ihubjpn.com/wp-content/uploads/header01.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		& div {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: var(--MainImage_Div_padding);
			width: 100%;
			height: 100%;
			color: var(--Color_FF100);
			font-size: var(--Size_12);
			background: var(--Color_1D080);
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
ガイド
利用ガイド
ーーーーーーーーーーーーーーーーーーーー */

section#contents.guide {
	& .wrap {
		& #guide {
			display: flex;
			flex-wrap: wrap;
			flex-direction: var(--Flex-direction_CRRRRR);
			gap: var(--Size_12);
			margin: var(--Size_24) 0 var(--Size_36);
			padding: 0;
			& div {
				position: relative;
				flex-basis: calc( calc( 100% - var(--Size_12) ) / 2 );
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: var(--Size_06);
				padding: var(--Size_06);
				background: var(--Color_FF100);
				border: 1px var(--Color_1D020) solid;
				border-radius: var(--Border-radius_S);
				& span {
					position: absolute;
					top: calc( var(--Size_02) * -2 );
					left: var(--Size_04);
					display: flex;
					align-items: baseline;
					padding: var(--Size_01) var(--Size_04) var(--Size_02);
					font-size: var(--Size_08);
					color: var(--Color_FF100);
					line-height: 1;
					background: var(--Color_1D100);
					border-radius: var(--Border-radius_S);
				}
				& span:before {
					content: 'STEP ';
					font-size: var(--Size_06);
				}
				& em {
					font-size: var(--Size_10);
					font-weight: 600;
				}
				& strong {
					font-size: var(--Size_08);
				}
			}
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
	注意事項
ーーーーーーーーーーーーーーーーーーーー */

section#contents.guide {
	& ul {
		display: flex;
		flex-wrap: wrap;
		flex-direction: var(--Flex-direction_CRRRRR);
		gap: var(--Size_12);
		margin: 0 0 var(--Size_36);
		padding: 0;
		list-style: none;
		& li {
			flex-basis: calc( calc( 100% - var(--Size_12) ) / 2 );
			display: flex;
			align-items: center;
			gap: var(--Size_06);
			padding: var(--Size_03);
			background: var(--Color_G020);
			border-radius: var(--Border-radius_S);
			& figure {
				width: var(--Size_24);
				& img {
					border-radius: var(--Border-radius_L);
				}
			}
			& em {
				flex: 1;
				color: var(--Color_1D100);
				font-size: var(--Size_08);
				line-height: 1.4;
			}
		}
	}
}