/* global */
@charset "UTF-8";

/* layout */
*,
*::before,
*::after {
  box-sizing: border-box;
}
article img {width:100%;height:auto;}
.edit {position: absolute;z-index: 10;top: 10px; right: 16px;padding: 5px;background-color: yellow; border-radius: 3px;width:41px;}
fieldset {border: 0;padding: 0;}
footer {width:100vw;position: fixed;z-index: 10;bottom: 0px;border-top:1px dotted #ccc;padding-top:5px;}
header {width: 100vw;height: 120px;overflow: none;margin-bottom: 2em;}
header img.head_img {width: 87px;height: 87px;}
legend {display:none;}
li, ul {list-style: none;margin:0;padding:0;}
.wrapper {width: 94vw;margin:0 auto 0 auto;}
.container {width: 94vw;text-align:left;margin:0 auto 4em auto;}

/* typography */
@font-face {font-family: 'Overpass Mono Reg'; src: url('../../../fonts/OverpassMono-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Overpass Mono Medium'; src: url('../../../fonts/OverpassMono-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal;}
article div {font-size: 13px;}
b, strong {font-family: 'Overpass Mono Medium';}
body {color: #333333; font:13px 'Overpass Mono Reg', "Roboto", Courier, Courier New, monospace;letter-spacing: -1px;margin:0;padding: 0; background:fixed #f9f9f9 url(../images/3.jpg)no-repeat top left;}
h1, h2, h4, h5, h6 {font-size: 16px;padding: 0;line-height: 18px;}
main h3 {font-weight:normal;}
header {text-align:left;}
header h2 {margin:0 0 5px 0;padding:0;}
header h3 {font-size: 11px;font-weight: normal;line-height: 12px;margin: -10px 0 0 0;padding: 0;}
footer {font-size: 12px;font-weight:normal;line-height:12px;}
header h3 span {font-size: 36px;margin-left:1px;}
small {font-size: 12px;}

/* links */
.edit a, h1 a, h2 a, h3 a {text-decoration: none;}


/* colors */
footer {background-color:#fff;}

/* ==========================================================================
   Additional layout for screen media 672px and up
   ========================================================================== */

@media only screen and (min-width: 44em) {
article img {float:left;margin:0 5px 5px 0;width: 55%;clear: right;float: none;}
article div {font-size:15px;}
body {font-size: 15px;letter-spacing: -1px;}
header {width: 20vw;float: left;height: 100vh;}
header img.head_img {width:202px;height:202px;}
footer {width:100vw;bottom:0px;text-align: left;}
.wrapper {width: 90vw;text-align:center;margin:60px auto 0 auto;}
.container {width: 60vw;text-align:left;margin:0 auto 1em auto;}
}