@charset "utf-8";

:root {
}

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

		/* カルーセル */
		--Carousel_Width: var(--Size_60);
		--CarouselHover_Width: var(--Size_60);

		/* ニュース一覧 */
		--News_flex-basis: 100%;

		/* ニュース */
		--News_FigurePoster_flex-basis: 100%;
		--News_DivNews-wrap_flex-basis: 100%;
		--News_FigurePoster_Img_max-width: 70%;
		--News_FigurePoster_Img_max-height: 100%;
		--News_DivNews-wrap_padding: 0 0 var(--Size_10);

		/* イベント詳細 */
		--Event-image_Img_max-width: 60%;

	}
}

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

		/* カルーセル */
		--Carousel_Width: var(--Size_80);
		--CarouselHover_Width: var(--Size_80);

		/* ニュース一覧 */
		--News_flex-basis: calc( calc( 100% - var(--Size_12) ) / 2 );

		/* ニュース */
		--News_FigurePoster_flex-basis: var(--Size_120);
		--News_FigurePoster_Img_max-width: 100%;
		--News_FigurePoster_Img_max-height: 100%;
		--News_DivNews-wrap_flex-basis: calc( 100% - var(--News_FigurePoster_flex-basis) - var(--Size_10 ) );
		--News_DivNews-wrap_padding: 0;

		/* イベント詳細 */
		--Event-image_Img_max-width: 60%;

	}
}

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

		/* カルーセル */
		--Carousel_Width: var(--Size_100);
		--CarouselHover_Width: var(--Size_110);

		/* ニュース一覧 */
		--News_flex-basis: var(--Size_220);

		/* ニュース */
		--News_FigurePoster_flex-basis: var(--Size_120);
		--News_FigurePoster_Img_max-width: 100%;
		--News_FigurePoster_Img_max-height: 100%;
		--News_DivNews-wrap_flex-basis: calc( 100% - var(--News_FigurePoster_flex-basis) - var(--Size_10 ) );
		--News_DivNews-wrap_padding: 0 0 0 var(--Size_10);

		/* イベント詳細 */
		--Event-image_Img_max-width: 40%;

	}
}

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

		/* カルーセル */
		--Carousel_Width: var(--Size_120);
		--CarouselHover_Width: var(--Size_130);

		/* ニュース一覧 */
		--News_flex-basis: var(--Size_220);

		/* ニュース */
		--News_FigurePoster_flex-basis: 100%;
		--News_FigurePoster_Img_max-width: 100%;
		--News_FigurePoster_Img_max-height: 100%;
		--News_DivNews-wrap_flex-basis: 100%;
		--News_DivNews-wrap_padding: 0;

		/* イベント詳細 */
		--Event-image_Img_max-width: 40%;

	}
}

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

		/* カルーセル */
		--Carousel_Width: var(--Size_140);
		--CarouselHover_Width: var(--Size_150);

		/* ニュース一覧 */
		--News_flex-basis: var(--Size_220);

		/* ニュース */
		--News_FigurePoster_flex-basis: var(--Size_120);
		--News_FigurePoster_Img_max-width: 100%;
		--News_FigurePoster_Img_max-height: 100%;
		--News_DivNews-wrap_flex-basis: calc( 100% - var(--News_FigurePoster_flex-basis) - var(--Size_10 ) );
		--News_DivNews-wrap_padding: 0;

		/* イベント詳細 */
		--Event-image_Img_max-width: 40%;

	}
}

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

		/* カルーセル */
		--Carousel_Width: var(--Size_160);
		--CarouselHover_Width: var(--Size_170);

		/* ニュース一覧 */
		--News_flex-basis: var(--Size_220);

		/* ニュース */
		--News_FigurePoster_flex-basis: var(--Size_120);
		--News_FigurePoster_Img_max-width: 100%;
		--News_FigurePoster_Img_max-height: 100%;
		--News_DivNews-wrap_flex-basis: calc( 100% - var(--News_FigurePoster_flex-basis) - var(--Size_10 ) );
		--News_DivNews-wrap_padding: 0;

		/* イベント詳細 */
		--Event-image_Img_max-width: 40%;

	}
}








/* ーーーーーーーーーーーーーーーーーーーー
トップ
ニュース
ーーーーーーーーーーーーーーーーーーーー */

section#contents.top {
	& .wrap {
		& #news {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: flex-start;
			margin: var(--Size_24) 0;
			gap: var(--Size_06);
			& li {
				& a {
					display: flex;
					gap: var(--Size_06);
					padding: var(--Size_02) var(--Size_06);
					background: var(--Color_1D100);
					border-radius: var(--Border-radius_S);
					& date {
						font-size: var(--Size_08);
						color: var(--Color_FF100);
						line-height: 1.8;
						padding: 0 var(--Size_06) 0 0;
						border-right: 1px var(--Color_FF100) solid;
					}
					& div {
						display: flex;
						flex-direction: column;
						& em {
							font-size: var(--Size_10);
							color: var(--Color_FF100);
						}
						& strong {
							font-size: var(--Size_08);
							color: var(--Color_FF100);
						}
					}
				}
				& a:hover {
					background: var(--Color_1D080);
				}
			}
		}
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
シングル
ニュース
ーーーーーーーーーーーーーーーーーーーー */

section#contents.news {
	& .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.news {
	& .wrap {
		& date#date {
			display: flex;
			justify-content: flex-end;
			padding: 0 0 var(--Size_06);
			margin: 0 0 var(--Size_06);
			border-bottom: 1px var(--Color_A060) solid;
			& em {
				display: flex;
				align-items: baseline;
				padding: 0 var(--Size_06);
				background: var(--Color_1D100);
				border-radius: var(--Border-radius_S);
				font-size: var(--Size_08);
				color: var(--Color_FF100);
				& span {
					font-size: var(--Size_06);
				}
			}
		}
		& p {
			margin: 0 0 var(--Size_36);
			& a {
				color: var(--Color_1D100);
				border-bottom: 1px var(--Color_1D040) solid;
			}
			& a:hover {
				border-bottom: 1px var(--Color_1D000) solid;
			}
		}
	}
}




section#contents.news {
	& .wrap {
		& #news {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: flex-start;
			margin: 0 0  var(--Size_36);
			gap: var(--Size_06);
			& li {
				& a {
					display: flex;
					gap: var(--Size_06);
					padding: var(--Size_02) var(--Size_06);
					background: var(--Color_1D100);
					border-radius: var(--Border-radius_S);
					& date {
						font-size: var(--Size_08);
						color: var(--Color_FF100);
						line-height: 1.8;
						padding: 0 var(--Size_06) 0 0;
						border-right: 1px var(--Color_FF100) solid;
					}
					& div {
						display: flex;
						flex-direction: column;
						& em {
							font-size: var(--Size_10);
							color: var(--Color_FF100);
						}
						& strong {
							font-size: var(--Size_08);
							color: var(--Color_FF100);
						}
					}
				}
				& a:hover {
					background: var(--Color_1D080);
				}
			}
		}
	}
}