*,*:after,*:before {  box-sizing: border-box; }
body {  font-family: Arial, Helvetica, Sans-serif;  background: #fff;}
html, body {  margin: 0;  padding: 0; }
blockquote p, button, input, li h1, li h2, li h3, li h4, li h5, li h6, li li, li p, select, td p, th p {  font-size: 100%; }

html {  height: 100%;}
body {  font-size: 0.98rem;color:#454545;line-height: 1.4;}

footer,header,main,menu,nav,section,summary {  display: block; }
a {  background-color: transparent; }
a:active,a:hover {  outline: 0; }
a img {  border: none; }
img {  border: 0; }

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

/*-----------------*/
img {  pointer-events: none;}
@media print { body { display: none !important; } }
/*-----------------*/

body,#wrapper {  display: flex;  flex-direction: column;  min-height: 100vh;
}

#wrapper {align-items: center;}
header, #contents, footer {width: 100%;}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

header,nav ul {display:flex}



.logo {font-size:1.1em;margin-left:1em;margin-right: auto;white-space: nowrap;}
header nav ul {font-size:0.9em;margin-right:2em;justify-content: flex-end;
}
header nav li {list-style-type: none; margin-right: 0.8em;}
header nav li::before {content:"\000BB";padding-right: 0.3em;}


#contents {max-width: 1080px;padding: 1em;}



footer {margin-top:auto}
.footer {text-align:center;height: 3em;line-height: 3em;}


@media screen and (max-width: 400px) { 
.logo a {display: block;}

}

@media screen and (max-width: 600px) { 
header,header nav ul {flex-direction:column;}

}
@media screen and (max-width: 960px) { 
header {flex-direction:column;}
.navi {padding-right: 0 1em;}

 }