H1 {
padding: 2px;
border-bottom:2px solid #444f82;
border-top:2px solid #444f82;
font-size: 1.5em;
text-align: center;
}

/* グリッドレイアウト */

.top{border:0px;
	display: grid;
	grid-template-areas:
		"header header"
		"content sidebar"
		"footer footer";
	grid-template-columns: auto 360px;
	gap: 0;
}

#ts{
	grid-area: header;
background: #FFFFFF;padding: 0.2em;
}

#cw{
	grid-area: content;
/* float:left;width:65%; */
}

#cc{
border-style:solid;
border-color:#546E7A;
border-width:0px 1px 0px 0px;
}

#rc{
	grid-area: sidebar;
	background: #FFFFFF;
/* float:right;width:34.9% */
}

#footer{
	grid-area: footer;
width:100%;
background:#f2f5f7;
text-align:center;
padding: 0.2em 0em 0.2em 0em;
}

.it{
margin:2px 1% 2px 1%;
}

/* responsive layout CSS */

@media (max-width: 1024px){

	.top{border:0px;
		display: grid;
		grid-template-areas:
			"header"
			"content"
			"sidebar"
			"footer";
		grid-template-columns:100%;
		gap: 0;
	}

	#ts{
		grid-area: header;
	background: #FFFFFF;
	padding: 0.2em;
	}

	#cw{
		grid-area: content;
	}

	#rc{
		grid-area: sidebar;
	}

	#footer{
	grid-area: footer;
	width:100%;
	background:#f2f5f7;
	text-align:center;
	padding: 0.2em 0em 0.2em 0em;
	}

	.it{
	margin:2px 1% 2px 1%;
	}
}