img {
	max-width:100%;
	height:auto;
}
pre {
	white-space: pre-wrap ;
}

#bbs {
	div {
		white-space: pre-wrap ;
	}
}
a:link{
	color:#223344;
}
a:visited{
	color:#227788;
}

#container {
	display: grid;
	margin:0px;
    grid-template-columns: 1fr 24em 60em 20em 1fr ;
	//grid-template-rows : 2em 2em 1fr 1fr 1fr;
	grid-auto-rows: minmax(2em, auto);
}

#header{
    grid-column: 2/5;
    grid-row: 1/2;
	padding:0.1em;
	font-size:130%;
	text-align:center;
}
#header_right{
    grid-column: 2/5;
    grid-row: 1/2;
	padding:0.1em;
	text-align:right;
}

#header a:link{
	color:#ffffff;
	text-decoration:none;
}

#header a:visited{
	color:#ffffff;
}
/*
#header_right{
	grid-column: 2/5;
    grid-row: 1/2;
	padding:0.2em 1em 0.2em 0.2em;
	align-items: center;
	text-align:right;
	vertical-align :center;
	color:#fff;
}
*/
#sub_header{
    grid-column: 2/5;
    grid-row: 2/3;
	padding:0.2em 0.2em 0.2em 1em;
}
#main{
    grid-column: 3/4;
    grid-row: 3/5;
	padding:1em;
}

#main div a:hover,#footer div a:hover {
	text-decoration:none;
}
#nav{
    grid-column: 2/3;
    grid-row: 3/5;
	padding:0.5em;
}
#nav ul {
	list-style:none;
	padding-left:0;
}
#sidebar{
    grid-column: 4/5;
    grid-row: 3/5;
	padding:0.5em;
}

#footer{
    grid-column: 2/5;
    grid-row: 5/6;
//	background:#ccc;
	padding:0.5em;
}

#footer_right{
    grid-column: 2/5;
    grid-row: 5/6;
	text-align:right;
	padding:0.2em 1em 0.2em 0.2em;
}

.title {
	color:darkgreen;
	font-size:140%;
	font-weight:bold;
}
.navi, #nav, #sidebar {
	font-size:90%;
}

.navi a:hover, #nav a:hover, #sidebar a:hover {
	color:sienna;
	text-decoration:none;
}

pre {
	background-color:#ddeeee;
	padding:0.5em;
	border-radius:4px;
}
textarea {
	width:100%;
	box-sizing:border-box;
}
h1 {
	margin-bottom:0.2em;
	padding:1px 1px 1px 0.5em;
	background: linear-gradient(90deg, teal, #ffffff);
	color:#fff;
	font-size:120%;
	/*border-radius:4px;*/
}
h2 {
	margin-bottom:0.2em;
	background: linear-gradient(90deg, #eeeeee, #ffffff);
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:110%;
	border-left: 1em solid teal;
}
h3 {
	margin-bottom:0.3em;
	background: linear-gradient(90deg, #eeeeee, #ffffff);
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:100%;
	border-left: 0.6em solid teal;
}
h4 {
	margin-bottom:0.3em;
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:90%;
	border-left: 0.6em solid teal;
	border-bottom: 1px solid teal;
}
	table.calendar thead th,
	table.calendar thead td {
		padding:0 0 2px;
		text-align:center;
	}

	table.calendar tbody th,
	table.calendar tbody td {
		padding:5px;
		border:1px solid #ccc;
		width:20px;
		text-align:center;
	}

	table.calendar tbody th {
		background-color:#eee;
	}

	table.calendar tbody td {
		color:#666;
	}
	table.calendar th.sun,
	table.calendar td.sun
	{
		color:#d00;
	}
	.calendar a:link {
		text-decoration:none;
		color:#000;
	}
	.calendar a:visited {
		color:#000;
	}
	.calendar a:hover {
		text-decoration:underline;
	}
	.sun a:link, .sun a:visited {
		color:#d00;
	}
	.sat a:link, .sat a:visited {
		color:blue;
	}
	table.calendar th.sat,
	table.calendar td.sat,a.sat {
		color:#00d;
	}
	table.calendar td.today,a.today {
		//color:#000;
		background-color:#eee;
		font-weight:bold;
	}


a.pup:link,a.pup:visited {
	font-weight:bold;
	color:#cc2222;
	//text-decoration:none;
}
a.pup:hover {
	text-decoration:underline;
}

@media screen and (max-width: 1024px) {
	/* 959px以下に適用されるCSS（タブレット用） */

	img {
		max-width:100%;
		height:auto;
	}

	#container{
	display: grid;
		margin:0px;
	    grid-template-columns: 18em 1fr;
		grid-auto-rows: minmax(2em, auto);
	}

	#header{
	    grid-column: 1/3;
	    grid-row: 1/2;
		background:darkcyan;
		color:#fff;
		padding:0.2em;
		font-size:140%;
		text-align:center;
	}
/*
	#header_right{
	    grid-column: 1/3;
	    grid-row: 1/2;
		padding:0.2em 1em 0.2em 0.2em;
		text-align:right;
		color:#fff;
	}
*/
	#sub_header{
	    grid-column: 1/3;
	    grid-row: 2/3;
	}
	#main{
	    grid-column: 2/3;
	    grid-row: 3/5;
	}
	#nav{
	    grid-column: 1/2;
	    grid-row: 4/5;
		height:1fr;
	}

	#sidebar{
	    grid-column: 1/2;
	    grid-row: 3/4;
		min-height:20px;
	}

	#footer{
	    grid-column: 1/3;
	    grid-row: 5/6;
	}
/*
	#footer_right{
	    grid-column: 1/3;
	    grid-row: 5/6;
	}
*/

}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	
	img {
		max-width:100%;
		height:auto;
	}
	
	#container{
	display: grid;
		margin:0px;
	    grid-template-columns: 1fr;
		grid-auto-rows: minmax(2em, auto);
	}
	#header{
	    grid-column: 1/2;
	    grid-row: 1/2;
		background:darkcyan;
		color:#fff;
		padding:0.2em;
		font-size:140%;
		text-align:center;
	}

	#sub_header{
	    grid-column: 1/2;
	    grid-row: 2/3;
		background:lightblue;
		padding:0.2em;
	}

	#main{
	    grid-column: 1/2;
	    grid-row: 3/4;
		background:lightcyan;
		padding:1em;
	}
	#sidebar{
	    grid-column: 1/2;
	    grid-row: 4/5;
		//background:paleturquoise;
		padding:0.5em;
	}

	#nav{
	    grid-column: 1/2;
	    grid-row: 5/6;
		//background:#aff;
		padding:0.5em;
	}

	#sidebar2{
	    grid-column: 1/2;
	    grid-row: 6/7;
		background:paleturquoise;
		padding:0.5em;
	}
	#footer{
	    grid-column: 1/2;
	    grid-row: 7/8;
		background:#ccc;
		padding:0.5em;
	}
/*
	#footer_right{
	    grid-column: 1/2;
	    grid-row: 7/8;
		text-align:right;
		padding:0.5em;
	}
*/
}