*,
*:after,
*:before { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, ul, li, header, nav, footer 
{  margin: 0;  padding: 0; }

html, body {  height: 100%;scroll-behavior: smooth; }

a {  background-color: transparent; }
a:active,a:hover {  outline: 0; }
a img {  border: none; }
img {  border:none; }

table {  border-collapse: collapse;  border-spacing: 0; }
td,th {  padding: 0; }


a {color:#006699;text-decoration:none;}
a:hover {color:#008080;text-decoration:underline;}


#layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  min-height: 100vh;
}

#main {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr;
  grid-column-gap: 2em;
  grid-row-gap: 1em;
}

#main h2{ grid-area: 1 / 2 / 2 / 3; }
.submenu { grid-area: 1 / 1 / 3 / 2; }
#content { grid-area: 2 / 2 / 3 / 3; }

header h1,
header nav,
#main {max-width:1080px;margin:0 auto;width:100%;}

#main h2 {width:98%;color:#151515;font-size:1.4em;white-space: nowrap;background-color: #d0e8e8;padding:0.2em 2em;border-style:  outset;border-width: 2px ;background-image: url(../images/m.jpg);background-size:cover;border-color: #ffffff;margin: 0.5em auto;font-weight:normal}

header .inbox {color:#ffffff;background-color: #006699;border-bottom: 1px #d6d6f7 solid;}

header h1 {font-size:1.2em;color:#ffffff;padding: 0.5em 0;}
header h1 a {color:#ffffff}

header nav ul{display:flex;justify-content: flex-end;font-size:0.9em;margin-top:0.5em}
header nav li {list-style-type: none; margin-right: 0.8em;}
header nav li::before {content:"\000BB";padding-right: 0.3em;}

/*
.topimg ul {display:flex;flex-wrap:wrap;margin:0.5em auto;}
*/
.topimg  {  display: grid;  gap: 10px;  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));}
.topimg li {width:160px;list-style-type: none;text-align: center;margin-bottom: 0.5em;font-size: 0.9em;}
.topimg li img{width:120px;height:auto;}
.topimg a:hover {position: relative; top:1px;}
.topimg img {border:1px #d4d4d4 solid}

.submenu {padding: 0.5em;}

#menu {
height: 100%;
color:#454545;
position: sticky;}

#menu h3 {margin-bottom: 1em;
	width:100%;
	padding:2px ;
	text-align:center;
	font-size:0.86em;
	color:#ffffff;
	background-color:#006699;
	border-left: 1px #003e5e solid ;
	border-bottom:1px #003e5e solid;

}
#menu h3 a  {color:#ffffff}
#menu li {margin-left: 1em;list-style-type: circle;margin-bottom: 0.5em;}
#menu li span {margin-left:  3em;font-size: smaller;}

#content {margin-top: 0.5em;padding: 0.5em;}

#content .l_img{ width:180px;margin:1em;float:right}

#content .txt {margin-top: 1em;}

#content .txt h3 {color:#151515;font-size:1.2em;margin:0.5em 0; }
#content .txt h3::before {content:"\025a0";color:#006699;margin-right:0.5em}

#content ul {list-style-type: none;margin-bottom: 0.5em;}
#content li {margin-left: 2em;}
/*
#content ol {margin-left: 1em;} 
*/
.l_img {position: relative; top:3rem;margin:0.5em}

.fileInfo{font-size:0.86em}


footer {padding:1em 0;line-height:3em;text-align:center}




@media screen and (max-width: 600px) { 
header .inbox {padding:0 1em}


header nav ul {display:block}

#main, #content  {
   display:flex;flex-direction:column;
    align-items:center;
      }
      
.submenu {display: none;}


header nav ul {justify-content: flex-start;margin-left:1em}
.l_img { top:1rem}




}




@media screen and (max-width: 1080px) { 



 }