@charset "utf-8";
/* CSS Document */

body {
	background-attachment: fixed;
}

#contents {
	z-index: 1;
}

header {
	position: relative;
	z-index: 10;
}
.inn {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	text-align: right;
	z-index: 5;
}
.inn img {
	max-width: 50%;
}

#middle-contents {
	background: #FFF;
	padding: 20px;
}

#main_in {
	line-height: 1.7em;
	padding: 15px 0;
}

/* 表示領域が992px以上の場合に適用するスタイル */
@media screen and (min-width: 992px) {
	#left-contents {
		padding: 0 10px;
	}
	#contents {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		display: grid; 
		grid-auto-columns: 1fr;
		grid-template-columns: 250px 1fr; 
		grid-template-rows: 1fr; 
		grid-template-areas: 
    "left-contents middle-contents";
		padding-top: 20px; 
	}
}

/* 表示領域が991.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 991.98px) {
	#contents {
		width: 100%;
		display: grid; 
		grid-template-columns: 1fr; 
		grid-template-rows: min-content 1fr;
		gap: 0px 0px; 
		grid-template-areas: 
			"left-contents"
			"middle-contents"
	}
}

/* 表示領域が575.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 575.98px) {
header {
	padding: 15px 10px;
}
	#middle-contents {
		padding: 10px;
	}
	#main_in {
		padding: 10px 0;
	}
}