img {
	max-width:100%;
	height:auto;
}
pre {
	white-space: pre-wrap ;
	word-break:break-word;
	background-color:#cfeaf2;
	padding:0.5em;
	border-radius:8px;
}

#bbs {
	div {
		white-space: pre-wrap ;
	}
}

#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;
	font-size:110%;
	padding:0.1em;
	text-align:center;
}

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

#header a:visited{
	color:#ffffff;
}
#sub_header{
    grid-column: 2/5;
    grid-row: 2/3;
	padding:0 0.2em 0 0.2em;
}
#main{
    grid-column: 2/5;
    grid-row: 4/5;
}
#main div a:hover,#sub_header div a:hover,#form div a:hover,#footer div a:hover {
	text-decoration:none;
}
#form{
    grid-column: 2/5;
    grid-row: 3/4;
}
#nav ul {
	list-style:none;
	padding-left:0;
}

#footer{
    grid-column: 2/5;
    grid-row: 5/6;
}
#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;
}
.email {
	display:none;
	color:crimson;
}
.navi, #nav {
	font-size:90%;
}

.navi a:hover, #nav a:hover {
	color:sienna;
	text-decoration:none;
}
textarea,input,select {
	padding:4px;
	border-style:solid;
	border-width:0.5px;
	margin:4px;
	background:#fff;
}
input[type="file"] {
	border-style:none;
	background:rgba(0,0,0,0);
}
input[type="submit"],button {
	border-style:none;
	padding:4px 10px;
	border-radius:1em;
	background:#b0c4de;
}
input[type="text"][disabled]{
	cursor:not-allowed; /* 禁止カーソル */
}
.article div {
	line-height:1.4em;
}
.article_body {
	word-break:break-word;
}
.quote {
	color:steelblue;
	background-color:azure;
}

.keyword {
	color:#0030dd;
	padding:0px 2px;
	background-color:#ccffee;
}

textarea {
	width:100%;
	box-sizing:border-box;
}

form#slidelock {
	width: 50%;
	margin: 10% auto;
	min-width: 9rem;
}

  
input.post, textarea.post {
	float: left;
	width: 100%;
	max-width: 100%;
	border: none;
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	border-radius: 0.3rem;
	background: darken(#f9f9f9, 10%);
	color: darken(#f9f9f9, 50%);
  
	&[type=submit] {
		background: $green;
		color: #fff;
		width: auto;
		float: right;
	}

	&::placeholder {
		color: darken(#f9f9f9, 50%);
	}

	&.error {
		background: $red;
		color: #fff;
		&::placeholder {
		color: darken($red, 60%);
		}
	}
}
textarea.post {
	height: 10rem;
}


h1 {
	margin-bottom:0.2em;
	padding:1px 1px 1px 3px;
	background-color:#3388bb;
	color:#fff;
	font-size:120%;
	border-radius:4px;
}
h2 {
	margin-bottom:0.2em;
	background-color:#eeeeee;
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:110%;
	border-left: 1em solid #3388bb;
}
h3 {
	margin-bottom:0.3em;
	background-color:#eeeeee;
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:100%;
	border-left: 0.6em solid #3388bb;
}
h4 {
	margin-bottom:0.3em;
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:90%;
	border-left: 0.6em solid #3388bb;
	border-bottom: 1px solid #3388bb;
}
	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;
	}

@media screen and (max-width: 1024px) {
	/* 959px以下に適用される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/3;
	    grid-row: 1/2;
		padding:0.2em;
		text-align:center;
	}
	#sub_header{
	    grid-column: 1/3;
	    grid-row: 2/3;
	}
	#form{
	    grid-column: 1/3;
	    grid-row: 3/4;
	}
	#main{
	    grid-column: 1/3;
	    grid-row: 4/5;
	}
	#nav{
	    grid-column: 1/2;
	    grid-row: 4/5;
	}
	#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;
		color:#fff;
		padding:0.2em;
		font-size:140%;
		text-align:center;
	}

	#sub_header{
	    grid-column: 1/2;
	    grid-row: 2/3;
		padding:0.2em;
	}
	#form{
	    grid-column: 1/2;
	    grid-row: 3/4;
		padding:1em;
	}
	#main{
	    grid-column: 1/2;
	    grid-row: 4/5;
		padding:1em;
	}
	#sidebar{
	    grid-column: 1/2;
	    grid-row: 4/5;
		padding:0.5em;
	}

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

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

	form#slidelock {
		width: 100%;
	}

}