article, aside, canvas, details, figcaption, figure, header, footer, main, menu, nav, section, summary { display: block; }

html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-family: "Shippori Mincho B1", YuMincho, "Hiragino Mincho ProN", serif; font-optical-sizing: auto; font-weight: normal; color: #fff; background: #000; overflow-y: scroll; overflow-x: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; top: 0; left: 0; z-index: -1; display: block; width: 100%; height: 100vh; margin: 0; padding: 0; background: url('../images/background.webp') no-repeat top center; background-size: cover; }
body.noscroll {overflow: hidden; }

#header { z-index: 101; width: calc(100% - 140px); height: auto; margin: 0; padding: 0 70px; overflow-y: auto; }
#header .logo { text-align: center; margin: 0; padding: 10px; }
#header .logo img { max-width: 100%; height: auto; }
#header .open_btn { z-index: 102; display: block; position: absolute; top: 15px; right: 15px; width: 46px; height: 46px; margin: 0; padding: 0; line-height: 1; cursor: pointer; background: rgba(0,0,0,.0); overflow: hidden; }
#header .open_btn span { display: inline-block; position: absolute; height: 2px; background: #efefef; width: 70%; left: 7px; }
#header .open_btn span:nth-of-type(1) { top: 11px; }
#header .open_btn span:nth-of-type(2) { top: 23px; }
#header .open_btn span:nth-of-type(3) { top: 36px; }
#header .open_btn.active { width: 60%; height: 100%; top: 0; right: 40%; background: transparent; cursor: auto; }
#header .open_btn.active span { display: none; }

main { width: 900px; max-width: calc(90% - 20px); margin: 0 auto; padding: 10px; }
article, section { width: 100%; margin: 0; padding: 0; }

h1 { font-size: 25px; }
h2 { font-size: 24px; margin: 0 0 25px; padding: 5px; }
h3, h4 { font-size: 23px; margin: 0 0 25px; padding: 5px; }

p { font-size: 15px; line-height: 1.8; margin: 5px 0; padding: 5px 0; }
a { color: #df2323; text-decoration: underline; }
a:hover { opacity:.85; }

img { max-width: 100%; height: auto; vertical-align: top; }
picture { position: relative; display: inline-block; }

article header { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; min-height: 170px; margin: 0 0 30px; padding: 10px 0; }
article header h1 { color: #fff; font-size: 23px; font-weight: bold; line-height: 1.8em; letter-spacing: 0.04em; text-shadow: 1px 1px 1px #666; margin: 0; padding: 10px 20px; }
article header p { display: block; color: #eee; font-size: 14px; font-weight: bold; line-height: 1.65em; text-align: center; text-shadow: 1px 1px 1px #666; margin: 20px 0 0; padding: 5px; }
article header.index { height: 20vh; font-size: 26px; line-height: 2em; }

.sect { color: #333; margin: 0 0 50px; padding: 40px 35px; border-radius: 8px; background: #fff; }
.sect::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

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

.sect .img { text-align: center; margin: 0 auto 25px; }
.sect .img img { border-radius: 10px; }
.sect .img.left { float: left; max-width: 38%; margin: 5px 30px 30px 5px; clear: both; }
.sect .img.right { float: right; max-width: 38%; margin: 5px 5px 30px 30px; clear: both; }

#nav { z-index: 101; margin: 0; padding: 0; }
#nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 50px 10px; }
#nav ul li { width: calc(25% - 10px); list-style-type: none; margin: 0 0 2px; padding: 1px 3px; }
#nav ul li a { position: relative; display: block; font-weight: bold; text-decoration: none; margin: 0; padding: 2px 2px 2px 20px; }
#nav ul li a::before { content: ""; position: absolute; top: 15px; left: 20px; display: inline-block; width: 6px; height: 6px; line-height: 1; border-radius: 50%; background: #ccc; }
#nav ul li span { display: block; color: #fff; font-size: 15px; line-height: 1.6em; margin: 0; padding: 5px 20px;     background: #666666ad;}
#nav.active { position: fixed; top: 0; right: 0; width: 40%; height: 100%; margin: 0; padding: 0; background: #666666; overflow-y: scroll; }
#nav.active li { width: calc(100% - 10px); }

#footer { text-align: center; margin: 0; padding: 0; }
#footer .copyright { color: #fff; font-size: 13px; margin: 0; padding: 10px; }
#footer .copyright a { color: #fff; text-decoration: none; }
#footer .copyright a:hover{ color: #fff; text-decoration: none; }

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

    #header { width: calc(100% - 60px); padding: 5px 50px 5px 10px; }
    #header .open_btn { width: 38px; height: 38px; }
    #header .open_btn span:nth-of-type(1) { top: 7px; }
    #header .open_btn span:nth-of-type(2) { top: 18px; }
    #header .open_btn span:nth-of-type(3) { top: 29px; }
    #header .open_btn.active { width: 30%; right: 70%; }
    main { width: calc(100% - 30px); max-width: none; margin: 0; padding: 10px 15px; }
    p { font-size: 14px; }
    article header { min-height: 150px; margin: 0 0 25px; padding: 10px 0; }
    article header h1 { font-size: 20px; }
    article header p { font-size: 13px; }
    article header.index { height: 80vh; font-size: 23px; }
    .sect { padding: 30px 25px; border-radius: 8px; background: #fff; }
    .sect .img.left { max-width: 41%; margin: 5px 20px 20px 5px; }
    .sect .img.right { max-width: 41%; margin: 5px 5px 20px 20px; }
    #nav ul { margin: 0; padding: 35px 10px; }
    #nav ul li { width: calc(100% - 10px); margin: 0 0 2px; padding: 1px 3px; }
    #nav.active { width: 70%; }

}