@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato);
/*@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);*/
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
/* Reset */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}

body {font-size:12px; line-height:2.25; color:#555; font-family:"リュウミン M-KL", "NOW-GM", sans-serif; letter-spacing:0.2em; width:100%;}
body.trigger {overflow:hidden;}
a {color:#1e90ff; word-break:break-all; font-family:"NOW-GM", sans-serif; letter-spacing:0; text-decoration:none;}
a i {font-family:serif;}
hr {height:1px; background-color:#ccc; width:100%; border:none; margin:30px auto;}

@media (max-width:640px) {
	hr {width:100%;}
}

header {margin:0 auto; max-width:620px; position:relative; box-sizing:border-box; width:100%; padding:0;}
nav {position:absolute; top:0; left:0; right:0; bottom:0; margin:0 auto; z-index:2; background-color:rgba(255, 255, 255, 0.9); height:100vh; width:100%; max-width:620px; display:none;}
nav ul {margin:24px 0 0 10px;}
nav li a {font-size:18px;}

.menu-trigger,
.menu-trigger span {display:inline-block; transition: all .4s; box-sizing:border-box;}
.menu-trigger {position:relative; width:25px; height:22px; background:none; border:none; appearance:none; cursor:pointer;}
.menu-trigger span {position:absolute; left:0; width:100%; height:2px; background-color:#555; border-radius:2px;}
.menu-trigger span:nth-of-type(1) {top:0;}
.menu-trigger span:nth-of-type(2) {top:10px;}
.menu-trigger span:nth-of-type(3) {bottom:0;}

#menu {position:absolute; top:30px; right:10px; z-index:4; width:25px; height:22px;}
#menu.active {transform:rotate(360deg);}
#menu.active span:nth-of-type(1) {transform:translateY(10px) rotate(-45deg);}
#menu.active span:nth-of-type(2) {transform:translateY(0) rotate(45deg);}
#menu.active span:nth-of-type(3) {opacity:0;}

#contents {margin:10px auto 50px; max-width:620px; position:relative; box-sizing:border-box; width:100%; padding:0 10px; overflow:hidden;}
#contents h1 {font-size:36px; line-height:1; margin:0 0 30px;}
#contents h1 em {margin:0; padding:0; line-height:3; font-size:12px;}
#contents h2 {margin:80px 0 0px; font-size:18px; line-height:1.75; padding:10px 0 0;}
#contents dl {margin:0 0 50px;}
#contents dt {float:left; overflow:hidden; clear:both; margin-bottom:10px;}
#contents dd {margin-left:4.5em; overflow:hidden; margin-bottom:10px;}
#contents dd span {font-size:10px; display:block;}
#contents img {width:100%;}
#contents .caption {font-size:10px; display:block; text-align:right;}
#contents p {margin:20px 0 50px; font-size:12px; text-align:justify;}

.youtube {width:100%; aspect-ratio:16/9;}
.youtube iframe {width:100%; height:100%;}

#download {margin:20px auto; max-width:620px; position:relative; box-sizing:border-box; width:100%; padding:0 10px; overflow:hidden; text-align:center;}
#download div img {width:90%; margin:20px auto; border:1px solid #eee;}

/*


#contents em {font-family:"UD Shin Go Medium", sans-serif; font-weight:bold;}

.btn {display:block;}
#contents p span.more {display:none;}
#contents p a.more-btn {text-align:right; display:block;}
#contents p a.less-btn {text-align:right; display:block;}
*/