@import url('https://fonts.googleapis.com/css?family=PT+Serif');

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

@font-face
{
font-family: "IPA 明朝";
src: url('https://cdn.leafscape.be/IPAfont/ipam_web.woff')
  format("woff");
}

* {
font-family: "IPA 明朝",Roboto Condensed, sans-serif;
}

body{
font-family:"IPA 明朝";
letter-spacing:1px;
line-height:150%;
color:#0a1612;
background:#c5c1c0;
margin:0;
padding:0;}

@media screen and (min-width:401px){
.wrp{
width:600px;
margin:0 auto;}
}

@media screen and (max-width:400px){
.wrp{
width:100%;
margin:0 auto;}
}

.box{
max-width:400px;
margin:0 auto;
overflow:hidden;}

.box:before,.box:after{
content: "";
display:table;}

.box:after{clear:both;}

.circle{
float:left;
padding:0 10px;
margin:0 20px 0 30px;}

.title{
margin:30px auto 0;
padding:30px;
font-size:20px;
width:50px;
height:50px;
background:#f7ce3e;
border-radius:50%;
text-align:center;}

.menu{
text-transform:uppercase;
letter-spacing:2px;
line-height:180%;
margin:50px 10px 0;
overflow:hidden;}

.menu a{
color:#c5c1c0;
padding:1px 5px;
background:rgba(255,255,255,.3);
border:none;}

.menu a:hover{
color:#f7ce3e;
background:none;
border:none;}

.top{
margin:50px 20px 20px;
padding:15px;
background:#fff;}

.con{
margin:0;
padding:15px;
text-align:center;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.con::before,.con::after {
position: absolute;
content: '';
width: 30px;
height:30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.con::before {
top: 0;
left: 0;
border-top: 1px solid #1a2930;
border-left: 1px solid #1a2930;}

.con::after {
bottom: 0;
right: 0;
border-bottom: 1px solid #1a2930;
border-right: 1px solid #1a2930;}

header{
background:#1a2930;
margin:0;
padding:20px;}

strong{
background:#c5c1c0;
font-weight:normal;
padding:0 2px;
margin:0 2px;}

h1{
color:#1a2930;
font-family:Roboto Condensed;
font-size:24px;
margin:0 auto;
padding:0;
text-align:center;
position:relative;
bottom:65px;
}

h2{
font-weight:normal;
font-size:14px;
margin:10px 40px;
padding:2px 0;
color:#fff;
background:#c49a6a;
border:solid 1px #c49a6a;
text-align:center;}

h3{
font-weight:normal;
font-size:14px;
margin:10px 40px;
padding:2px 0;
color:#fff;
background:#a6c46a;
border:solid 1px #a6c46a;
text-align:center;}

h4{
font-weight:normal;
font-size:14px;
margin:10px 40px;
padding:2px 0;
color:#fff;
background:#b33636;
border:solid 1px #b33636;
text-align:center;}

hr{
clear:left;
border-top:solid 2px #c5c1c0;
border-right:none;
border-bottom:none;
border-left:none;
margin:10px;}

a{
color:#1a2930;
text-decoration:none;
padding:0 3px;
border-bottom:solid 1px #c5c1c0;}

a:hover{border-bottom:solid 1px #f7ce3e;}