@charset "utf-8";

:root {

}

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

	}
}

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

		/* メインイメージ */
		--Top_MainImage_height: 30vh;
		--Top_MainImage_Img_width: var(--Size_60);

		/* WHAT'S iHub */
		--Whats_Ul_Li_width: calc( calc( 100% - calc( var(--Size_12) * 2 ) ) / 3 );
		--Whats_Ul_Li_height: var(--Size_70);
		--Whats_Ul_Li_border-radius: var(--Border-radius_S);

	}
}

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

		/* メインイメージ */
		--Top_MainImage_height: 30vh;
		--Top_MainImage_Img_width: var(--Size_140);

		/* WHAT'S iHub */
		--Whats_Ul_Li_width: var(--Size_72);
		--Whats_Ul_Li_height: var(--Size_72);
		--Whats_Ul_Li_border-radius: var(--Border-radius_L);

	}
}

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

		/* メインイメージ */
		--Top_MainImage_height: 750px;
		--Top_MainImage_Img_width: var(--Size_140);

		/* WHAT'S iHub */
		--Whats_Ul_Li_width: var(--Size_72);
		--Whats_Ul_Li_height: var(--Size_72);
		--Whats_Ul_Li_border-radius: var(--Border-radius_L);

	}
}

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

		/* メインイメージ */
		--Top_MainImage_height: 750px;
		--Top_MainImage_Img_width: var(--Size_140);

		/* WHAT'S iHub */
		--Whats_Ul_Li_width: var(--Size_72);
		--Whats_Ul_Li_height: var(--Size_72);
		--Whats_Ul_Li_border-radius: var(--Border-radius_L);

	}
}

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

		/* メインイメージ */
		--Top_MainImage_height: 750px;
		--Top_MainImage_Img_width: var(--Size_140);

		/* WHAT'S iHub */
		--Whats_Ul_Li_width: var(--Size_72);
		--Whats_Ul_Li_height: var(--Size_72);
		--Whats_Ul_Li_border-radius: var(--Border-radius_L);

	}
}

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

		/* メインイメージ */
		--Top_MainImage_height: 750px;
		--Top_MainImage_Img_width: var(--Size_140);

		/* WHAT'S iHub */
		--Whats_Ul_Li_width: var(--Size_72);
		--Whats_Ul_Li_height: var(--Size_72);
		--Whats_Ul_Li_border-radius: var(--Border-radius_L);

	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   コンテンツ
ーーーーーーーーーーーーーーーーーーーー */

section#contents.top {

}








/* ーーーーーーーーーーーーーーーーーーーー
	キービジュアル
ーーーーーーーーーーーーーーーーーーーー */

section#contents.top {
	& .main_image {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: var(--Top_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: center;
			align-items: center;
			& img {
				width: var(--Top_MainImage_Img_width);
			}	
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
	リード原稿
ーーーーーーーーーーーーーーーーーーーー */

section#contents.top {
	& .read {
		& p {
			margin: var(--Size_36) 0;
			padding: var(--SectionContents_padding);
			text-align: center;
			font-size: var(--Size_08);
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   WHAT'S iHub
ーーーーーーーーーーーーーーーーーーーー */

section#contents.top {
	& .whats {
		& p {
			display: flex;
			justify-content: center;
		}
		& ul {
			display: flex;
			justify-content: center;
			gap: var(--Size_12);
			padding: var(--Size_12) 0 0;
			list-style: none;
			& li {
				width: var(--Whats_Ul_Li_width);
				height: var(--Whats_Ul_Li_height);
				border-radius: var(--Whats_Ul_Li_border-radius);
				cursor: pointer;
				transition: var(--Transition_04s);
				-o-transition: var(--Transition_04s);
				-moz-transition: var(--Transition_04s);
				-webkit-transition: var(--Transition_04s);
				&  div {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: var(--Size_06);
					width: 100%;
					height: 100%;
					background: var(--Color_1D020);
					border-radius: var(--Whats_Ul_Li_border-radius);
					transition: var(--Transition_04s);
					-o-transition: var(--Transition_04s);
					-moz-transition: var(--Transition_04s);
					-webkit-transition: var(--Transition_04s);
					backdrop-filter: var(--Backdrop-filter_blur_on);
					-o-backdrop-filter: var(--backdrop-filter_blur_on);
					-moz-backdrop-filter: var(--backdrop-filter_blur_on);
					-webkit-backdrop-filter: var(--backdrop-filter_blur_on);
					&  i {
						color: var(--Color_FF100);
						font-size: var(--Size_36);
						line-height: 1;
						transition: var(--Transition_04s);
						-o-transition: var(--Transition_04s);
						-moz-transition: var(--Transition_04s);
						-webkit-transition: var(--Transition_04s);
					}
					&  em {
						color: var(--Color_FF100);
						visibility: hidden;
						font-size: 0;
						line-height: 1;
						font-weight: 200;
						transition: var(--Transition_04s);
						-o-transition: var(--Transition_04s);
						-moz-transition: var(--Transition_04s);
						-webkit-transition: var(--Transition_04s);
					}
				}
			}
			& li:nth-of-type(1) {
				background: url('https://ihubjpn.com/wp-content/uploads/whats_01.jpg');
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
			& li:nth-of-type(2) {
				background: url('https://ihubjpn.com/wp-content/uploads/whats_02.jpg');
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
			& li:nth-of-type(3) {
				background: url('https://ihubjpn.com/wp-content/uploads/whats_03.jpg');
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
			& li:hover {
				& div {
					background: var(--Color_1D080);
					backdrop-filter: var(--Backdrop-filter_blur_off);
					-o-backdrop-filter: var(--backdrop-filter_blur_off);
					-moz-backdrop-filter: var(--backdrop-filter_blur_off);
					-webkit-backdrop-filter: var(--backdrop-filter_blur_off);
					& i {
						font-size: var(--Size_12);
					}
					& em {
						visibility: visible;
						color: var(--Color_FF100);
						font-size: var(--Size_08);
						line-height: 1;
						font-weight: 400;
					}
				}
			}
		}
	}
}