@charset "utf-8";

:root {

}

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

		--Ul_Li_A_flex-basis: auto;
		--Ul_Li_A_width: 100%;
	}
}

@media screen and (min-width:481px) and (max-width: 768px) {
	:root {

		--Ul_Li_A_flex-basis: auto;
		--Ul_Li_A_width: 100%;
	}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		--Ul_Li_A_flex-basis: calc( var(--Size_10) * 12.4 );
		--Ul_Li_A_width: calc( var(--Size_10) * 12.4 );
	}
}

@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

		--Ul_Li_A_flex-basis: calc( var(--Size_10) * 12.4 );
		--Ul_Li_A_width: calc( var(--Size_10) * 12.4 );
	}
}

@media screen and (min-width:1440px) {
	:root {

		--Ul_Li_A_flex-basis: calc( var(--Size_10) * 12.4 );
		--Ul_Li_A_width: calc( var(--Size_10) * 12.4 );
	}
}



/* ーーーーーーーーーーーーーーーーーーーー
ロゴ
ーーーーーーーーーーーーーーーーーーーー */
div#top {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 4.5;
	& img {
		width: 40%;
	}
}








/* ーーーーーーーーーーーーーーーーーーーー
お知らせ
ーーーーーーーーーーーーーーーーーーーー */

div#newsList {
	& h2 {
		color: var(--Color_1D100);
	}
	& ul {
		display: flex;
		flex-direction: column;
		gap: var(--Gap);
		& li {
			display: flex;
			flex-direction: var(--Flex-direction_CRRRRR);
			gap: var(--Gap);
			padding: var(--Padding_S);
			background: var(--Color_1D100);
			border-radius: var(--Border-radius_S);
			& > a {
				flex-basis: var(--Ul_Li_A_flex-basis);
				display: flex;
				width: var(--Ul_Li_A_width);
				& figure {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					background: var(--Color_A020);
					border-radius: var(--Border-radius_S);
					overflow: hidden;
					aspect-ratio: 1 / 1;
					& img {
						max-width: 100%;
						max-height: 100%;
						object-fit: contain;
					}
				}
			}
			& #data {
				flex: 1;
				display: flex;
				flex-direction: column;
				& .title {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					padding: 0 0 var(--Size_04);
					border-bottom: 1px var(--Color_A100) solid;
					& div {
						font-size: var(--Size_12);
						font-weight: 600;
					}
					& time {
						font-size: var(--Size_08);
					}
				}
				& .content {
					padding: var(--Size_04) 0 0;
				}
				& .link {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					& a {
						display: inline-flex;
						padding: var(--Size_02) var(--Size_06);
						color: var(--Color_1D100);
						font-size: var(--Size_08);
						font-weight: 600;
						background: var(--Color_A100);
						border-radius: var(--Border-radius_S);
					}
					& a:hover {
						color: var(--Color_A100);
						background: var(--Color_A020);
					}
				}
			}
		}
	}
}


