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

.cf:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}  
.cf {display:inline-table;}  
* html .cf{height:1%;}
.cf {display:block;}  

input[type="submit"] {
   -webkit-appearance: none;
}

html{margin:0;padding:0;}
body{-webkit-text-size-adjust:100%;margin:0;padding:0;font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif;font-style:normal;color:#eee;background-color:#222;}

header{position:fixed;top:0;width:100%;height:auto;margin:0;padding:5px 40px 15px;text-align:left;background-color:rgba(0,0,0,0.4);}
header p{width:80%;font-size:18px;font-weight:800;line-height:1.45em;color:#fff;margin:20px 0 0;padding:10px;}
header p a{color:#efefef;text-decoration:none;}
header p a:hover{color:#efefef;text-decoration:none;}

h1,h2,h3{color:#fff;font-size:20px;font-weight:600;margin:10px 0 30px;padding:0;clear:both;}
h2,h3{font-size:18px;}
p{font-size:14px;line-height:1.7em;margin:15px 0;}
a{color:#A2C3C2;text-decoration:underline;}
a:hover{color:#A2C3C2;}

main{width:calc(100% - 60px);max-width:1300px;margin:0 auto 0;padding:10px 30px;}
section,nav,footer{width:calc(100% - 60px);max-width:1300px;margin:20px auto;padding:30px;}
article{width:100%;margin:20px 0; padding:10px;clear:both;}

p.pl{float:left;width:45%;margin:0 50px 50px 0;padding:0;}
p.pr{float:right;width:45%;margin:0 0 50px 50px;padding:0;}
p img{width:100%;height:auto;margin:0 0 50px;padding:0;}

nav{clear:both;background-color:#161616;}
nav ul{font-size:0;margin:0 30px;padding:30px 0 0;list-style-type:none;}
nav li{display:inline-block;width:calc(32.3% - 11px); vertical-align: top; margin:15px 1% 15px 0;padding:5px;}
nav li img{width:100%;height:auto;}
nav li span{display:block;font-size:12px;margin: 10px 0 0;}
nav a{text-decoration:none;}
nav a:hover{text-decoration:underline;}

footer{text-align:left;margin:0 auto 0;padding:10px 30px 10px 50px;clear:both;}
footer small{margin:0 10px;padding:0;}
footer small a{color:#ccc;text-decoration:none;}
footer small a:hover{color:#ccc;text-decoration:none;}

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

header{width:calc(100% - 10px);margin:0;padding:10px 5px;}
header p{width:90%;font-size:14px;font-weight:800;margin:0 0 0 5%;padding:5px 0;}
h1,h2,h3{margin:10px 0 10px;}
h2,h3{}
p{line-height:1.8em;margin:15px 0 15px;}
main{width:100%;max-width:none;margin:0;padding:0;}
section,nav,footer{width:calc(98% - 30px);max-width:none;margin:20px 0;padding:15px;}
article{margin:70px 0 35px; padding:0;}
p.pl,p.pr{width:100%;margin:15px 0 20px;}
p img{width:98%;margin:0 0 20px;}
nav{width:calc(100% - 20px);padding:0 10px;}
nav ul{width:100%;font-size:0;margin:0;padding:20px 0 0;list-style-type:none;}
nav li{display:inline-block;width:calc(49% - 11px);vertical-align:top;margin:15px 0 15px 0.5%;padding:5px;}
nav li img{}
nav li span{font-size:10px;margin: 10px 0 0;}
nav a{display:block; margin:0; padding:10px;}
footer{padding:5px 10px 0;}
footer small{font-size:10px;}
}