@charset "UTF-8";

.edit-area.blog {
	padding-top: 6.5rem;
	padding-bottom: 11rem;
	@media screen and (max-width: 767px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.common-list.blog {
		display: flex;
		flex-wrap: wrap;
		gap: 6rem 4.1rem;
		@media screen and (max-width: 767px) {
			gap: 3rem;
		}
		& li {
			width: 37.2rem;
			@media screen and (max-width: 767px) {
				width: 100%;
			}
			& a {
				width: 100%;
				position: relative;
				height: 47.7rem;
				@media screen and (max-width: 767px) {
					height: 38rem;
				}
				.thumbnail {
					border-radius: 1.4rem;
					overflow: hidden;
					height: 100%;
					& img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.white-card {
					background-color: #fff;
					position: absolute;
					width: 28rem;
					height: 17.8rem;
					bottom: -0.1rem;
					right: -0.1rem;
					padding: 2rem 3.9rem 6.2rem 3.2rem;
					box-sizing: border-box;
					border-radius: 1.4rem 0 0 0;
					@media screen and (max-width: 767px) {
						padding: 2rem 3.4rem 3.4rem 2rem;
						height: auto;
					}
					&:after {
						position: absolute;
						content: "";
						right: 0.7rem;
						bottom: 0.7rem;
						width: 3.2rem;
						height: 3.2rem;
						background: url("../../common/img/general/post-arrow.png") no-repeat center / 100% auto;
						@media screen and (max-width:767px){
						width: 2.2rem;
						height: 2.2rem;
						}
					}
					.list-date {
						font-style: normal;
						font-weight: 700;
						font-size: 1.6rem;
						line-height: 1;
						letter-spacing: 0.1em;
						color: #0d2d74;
						padding-bottom: 1.2rem;
						display: block;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
							padding-bottom: 1rem;
						}
					}
					.list-title {
						font-style: normal;
						font-weight: 700;
						font-size: 2rem;
						line-height: 120%;
						letter-spacing: 0.1em;
						font-feature-settings: "palt" on;
						color: #000000;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}
			}
		}
	}
}