@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--NewsB_padding: var(--Gap_L) 0 0;
	}
}

@media screen and (min-width:769px) {
	:root {
		--NewsB_padding: var(--Gap_L) var(--Size_48) 0;
	}
}

section {
	& h2 {
		padding: var(--Margin_S) 0;
		text-align: center;
		font-size: var(--H2_font-size);
		font-weight: 600;
	}
	& > p {
		font-size: var(--Size_08);
		color: var(--Color_1D060);
	}
}

article #newsandblog {
	& ul {
		display: flex;
		flex-direction: column;
		gap: var(--Gap_L);
		& li {
			padding: var(--Gap_L);
			border: 1px var(--Color_1D020) solid;
			border-radius: var(--Border-radius_S);
			& h3 {
				padding: var(--NewsB_padding);
				font-size: var(--Size_12);
				font-weight: 600;
			}
			& p {
				padding: var(--NewsB_padding);
			}
			& div {
				display: flex;
				justify-content: flex-end;
				& a {
					display: inline-flex;
					align-items: center;
					margin: var(--Margin_S) 0 0;
					padding: 0 var(--Margin_S) var(--Gap_S) 0;
					font-size: var(--A_font-size);
					color: var(--Color_K);
					font-weight: 600;
					border-bottom: 3px var(--Color_K) solid;
				}
				& a:before {
					content: '';
					position: absolute;
					bottom: -2px;
					right: -2px;
					width: var(--Size_30);
					height: 3px;
					border-radius: var(--Border-radius_L);
					background-color: var(--Color_K);
					transform: rotate(50deg);
					transform-origin: calc(100% - 2px) 50%;
				}
				& a.out:after {
					content: "\f08e";
					padding: 0 0 0 var(--Gap_S);
					font-size: var(--Size_10);
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
				}
				& a:hover {
					color: var(--Color_R);
					border-bottom: 3px var(--Color_R) solid;
				}
				& a:hover:before {
					background-color: var(--Color_R);
				}
			}
		}
		& li:before {
			display: flex;
			justify-content: center;
			padding: var(--Size_01) 0;
			width: var(--Size_48);
			color: var(--Color_FF);
			font-size: var(--Size_08);
			background: var(--Color_K);
		}
		& .news:before {
			content: 'お知らせ';
		}
		& .blog:before {
			content: 'ブログ';
		}
	}
}