@charset "utf-8";

	body {
		background-color: rgba(255, 250, 229, 0.78);
		overflow-x:hidden
	}
	.left-image-bg {
		position: fixed;
		top: 0;
		left: 10%;
		width: 100px;
		height: 100vh;
		background-image: url('../img/802nooto.png');
		background-size: contain;
		background-repeat: repeat;
		background-position: center;
		z-index: -1;
	}
	.archive-date {
		padding-left: 24px;
		background: url('../img/icon-book.png') no-repeat left center;
		background-size: 19px 19px;
		font-size: small;
	}
	.text-lead {
		background-color: white;
		position: relative;
		padding: 3em 1em;
	}

	.line {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: black;
	}

	.top1 {
		top: 0;
	}

	.top2 {
		top: 8px;
	}

	.bottom1 {
		bottom: 0;
	}

	.bottom2 {
		bottom: 8px;
	}

	.archive-content {
		display: flex;
		border: 2px solid #333;
		padding: 40px 20px 20px;
		position: relative;
		background-color: #fff;
		border-radius: 20px;
		margin-top: 60px;
		min-height: 250px;
		flex-direction: row;
	}

	.archive-left {
		position: relative;
		margin-right: 20px;
		width: 200px;
		min-width: 120px;
	}

	.archive-left img {
		width: 100%;
		height: auto;
		position: absolute;
		top: -105px;
		left: 0;
	}

	.archive-right {
		flex: 1;
		position: relative;
	}

	.archive-vol {
		color: white;
		position: absolute;
		top: -110px;
		text-shadow: 4px 4px 0px #000000;
		left: 0;
		letter-spacing: .4rem;
		font-size: 40px;
		margin-bottom: 10px;
		padding: 2px 6px;
		-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: black;
	}
	.m-plus-1 {
		font-family: "M PLUS 1", sans-serif;
		font-optical-sizing: auto;
		font-weight: 900;
		font-style: normal;
	}

	.archive-date,
	.archive-text {
		margin: 0 0 10px 0;
		font-size: .9rem;
	}

	.archive-btn {
		color: #007bff;
		cursor: pointer;
		text-decoration: underline;
	}

	.archive-btn {
		background-color: #000;
		color: #fff;
		border: none;
		padding: 10px 20px;
		text-decoration: none;
		font-size: 13px;
		cursor: pointer;
		border-radius: 0;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		transition: background 0.3s;
		margin-bottom: 0px;
	}
	.archive-btn:hover {
		background-color: #333;
	}
	.archive-btn::after {
		content: "→";
		margin-left: 8px;
		font-size: 18px;
	}

	@media screen and (max-width: 769px){
		.archive-content {
		    flex-direction: column;
		}
	.archive-date, .archive-text {
		font-size: .7rem;
	}
	.archive-vol {
		text-shadow: 3px 3px 0px #000000;
        top: -60px;
        left: -5px;
		font-size: 35px;
		-webkit-text-stroke-width: 1px;
	}
	.archive-left {
		width: 100px;
	}

	.archive-left img {
		position: static;
	}
	.archive-btn {
		font-size: 10px;
		padding: 8px 15px;
	}

	}