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

header {
	padding: 2%;
	background: url("../images/bg01.png") top center no-repeat;
	background-size: cover;
}

#main_sub {
	padding: 0 0 20px 0;
}

#main_in {
	line-height: 1.9em;
}

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

/* 表示領域が767.98px以下の場合に適用するスタイル */
@media print, screen and (max-width: 767.98px) {
	#main_in {
		line-height: 1.7em;
		padding:  5px;
	}
}

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

	header {
		padding: 20px 15px;
		margin: 0;
		margin-left: 5px;
	}

	#left-contents {
		grid-area: left-contents;
		padding: 20px 10px;
		background: hsla(0,0%,100%,0.80);
		box-shadow: 0px 0px 5px #CCC;
		align-self: stretch;
	}
	#middle-contents {
		grid-area: middle-contents;
		align-self: stretch;
	}

	#main_sub {
		padding-left: 20px;
	}
	#main_in {
		padding:  10px 20px 10px 0;
	}
}