a:link{
	color:#223344;
}
a:visited{
	color:#227788;
}
dt {
	font-weight:bold;
}
dd {
	margin-left:1em;
	margin-bottom:0.4em;
}

td, th {
	border: solid 1px #000;              /* 枠線指定 */
	padding: 5px;
}
th {
	background:#ddffff;
}
tr:nth-child(even) {
	/*background-color:  #ddd;*/    /* 背景色指定 */
}
table {
    border-collapse:  collapse;     /* セルの線を重ねる */
	border: solid 2px;
	width:100%;
}

.table {
	display:table;
	border-collapse:collapse; /*隣接する要素のborderを共有*/
}
.table .row {
	display:table-row;
}
.table .cell {
	display:table-cell;
	border:#333333 1px solid; /*境界線を指定*/
	padding:10px; /*余白を指定*/
}
.row_table,
.row_table td,
.row_table th {
  border: 1px solid #cbced2;
  border-collapse: collapse;
  text-align: center;
}

.row_table th {
  background: #01214d;
  color: #fff;
  padding: 4px 12px;
  display: block;
  width: 100%
}

.row_table td {
  background: #f5f6f8;
  padding: 4px 12px;
  display: block;
  width: 100%;
}

#main div a:hover,#footer div a:hover {
	text-decoration:none;
}
#header{
	text-align:center;
	position: relative;
	height:160px;
}
#header a:link,#header a:visited{
	color:#ffffff;
	text-decoration:none;
}
#header a:hover {
	/*text-decoration:underline;*/
	text-shadow: 0px 0px 4px #ffffff;
}
#header img {
	width:100%;
	height:160px;
	max-width:100%;
	max-height:100%;
	object-fit: cover;
}
#header p {
	position: absolute;
	top:37%;
	left:50%;
	width:80%;
	transform: translate(-50%,-50%);
	color:#fff;
	font-size:140%;
	text-shadow: 0px 0px 6px #000000;
	/*white-space:nowrap;
	text-shadow:1px 2px 3px #606060;*/
}
#sub_header{
	/*padding:0.2em 0.2em 0.2em 1em;*/
	position: absolute;
	top: 110px;
	/*left: 50%;*/
	width:100%;
	height:50px;
	padding-top:0.2em;
}
#sub_header a:link,#sub_header a:visited {
	color:#fff;
	text-decoration:none;
}
#sub_header a:hover {
	text-decoration:underline;
}
.in_sub_header div {
	position: absolute;
	top:50%;
	left:50%;
	width:80%;
	/*text-shadow: 0px 0px 4px #ffffff;*/
	transform: translate(-50%,-50%);
}

.title {
	color:darkgreen;
	font-size:140%;
	font-weight:bold;
}
.title a:link, .title a:visited {
	color:darkgreen;
	text-decoration:none;
}

.navi, #nav, #sidebar {
	font-size:90%;
}

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

#preview {
	box-shadow: 5px 5px 15px 0px rgba(0, 40, 40, 0.7);
}

.outline {
	background:#ddccff;;
	margin:0.5em;
	padding:0.2em 1px 1px 0.8em;
	border-radius:0.8em;
}
.edit_mode, .edit_mode_inline {
	background-color:#ffff88;
}

.current, .current_inline {
	background-color:#ffdd99;
}
.list, .amode, .current, .edit_mode {
	padding-left:0.5em;
	padding-right:0.5em;
}
.list_inline, .amode_inline, .current_inline, .edit_mode_inline {
	padding-left:0.2em;
	padding-right:0.2em;
}
.amode, .amode_inline {
	background-color:#ccddff;
}
.keyword {
	color:#000;
	padding:1px 3px;
	background-color:yellow;
}
.space {
	background:#dddddd;
}
pre {
	background-color:#ddeeee;
	padding:0.5em;
	border-radius:0.5em;
}
textarea {
	width:100%;
	box-sizing:border-box;
}
h1 {
	/*margin:0.5em 0.2em 0.2em 0;*/
	margin-top:0.5em;
	margin-bottom:0.3em;
	padding:1px 1px 1px 0.9em;
	background: linear-gradient(90deg, darkcyan, #ffffff);
	color:#fff;
	font-size:120%;
	border-radius:1em;
}
h2 {
	margin:0.5em 0.2em 0.2em 0.5em;
	background: linear-gradient(90deg, #eeeeee, #ffffff);
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:110%;
	border-left: 1em solid darkcyan;
}
h3 {
	margin:0.5em 0.2em 0.2em 1em;
	background: linear-gradient(90deg, #eeeeee, #ffffff);
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:100%;
	border-left: 0.6em solid darkcyan;
}
h4 {
	margin:0.5em 0.2em 0.2em 1.5em;
	margin-left:1.5em;
	padding:0.1em 0.1em 0.1em 0.3em;
	font-size:90%;
	border-left: 0.6em solid teal;
	border-bottom: 1px solid darkcyan;
}

table.calendar thead th,
table.calendar thead td {
	/*padding:0 0 2px;*/
	text-align:center;
	vertical-align:center;
	padding:0.3em;
}
table.calendar {
	background-color:#fff;
	box-shadow: 8px 4px 10px gray;
	border-collapse:collapse;
	border-spacing:0;
	margin-bottom:0.5em;
	border:none;
}

table.calendar tbody td,table.calendar tbody th{
	padding:8px;
	width:20px;
	text-align:center;
	background-color:#fff;
}
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 {
	background-color:#dee;
	font-weight:bold;
}
table.calendar thead, table.calendar th {
	background-color:#557777;
}
table.calendar thead a:link{
	color:#fff;
}
table.calendar thead a:visited{
	color:#fff;
}
table.calendar thead a:hover{
	color:#fef !important;
}
table.calendar td.current{
	background-color:#fdf !important;
}
.calendar td,.calendar th {
	border:none;
}

a.pup:link,a.pup:visited {
	font-weight:bold;
	color:#cc2222;
}
a.pup:hover,a.readmore:hover {
	text-decoration:underline;
}
a.readmore:link,a.readmore:visited {
	font-weight:bold;
	color:#008899;
}
@media screen and (max-width: 700px) {
	#header p {
		font-size:100%;
	}
}

#header{
    grid-column: 2/5;
    grid-row: 1/2;
}
#header_right{
    grid-column: 2/5;
    grid-row: 1/2;
}

#main{
    grid-column: 3/4;
    grid-row: 2/4;
}
#nav{
    grid-column: 2/3;
    grid-row: 2/4;
}
#sidebar{
    grid-column: 4/5;
    grid-row: 2/4;
}

#footer{
    grid-column: 2/5;
    grid-row: 4/5;
}

#footer_right{
	grid-column: 2/5;
	grid-row: 4/5;
	text-align:right;
}


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

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

	#container{
	display: grid;
		margin:0px;
		grid-template-columns: 300px 70%;
		grid-auto-rows: minmax(2em, auto);
	}

	#header{
	    grid-column: 1/3;
	    grid-row: 1/2;
	}
	#main{
	    grid-column: 2/3;
	    grid-row: 2/4;
	}
	#nav{
	    grid-column: 1/2;
	    grid-row: 2/3;
		height:1fr;
	}
	#sidebar{
	    grid-column: 1/2;
	    grid-row: 3/4;
		/*min-height:20px;*/
	}
	#footer{
	    grid-column: 1/3;
	    grid-row: 4/5;
	}
}
@media screen and (max-width: 700px) {
	/* 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;
	}
	#main{
	    grid-column: 1/2;
	    grid-row: 2/3;
	}
	#sidebar{
	    grid-column: 1/2;
	    grid-row: 4/5;
	}
	#nav{
	    grid-column: 1/2;
	    grid-row: 3/4;
	}

	#footer{
	    grid-column: 1/2;
	    grid-row: 5/6;
	}

}