<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Arsenal');

@font-face
{
font-family: Fontpoにほんご;
src: url('https://cdn.leafscape.be/nihongo/FontopoNIHONGO_web.woff')
     format("woff");
}

body{
font-family:"Arsenal","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color: #fff;
background:#a6c8b2;
text-transform:uppercase;
margin:0;
padding:0;}

@media screen and (min-width:601px){
.wrp{
width:500px;
margin:0 auto;}
}

@media screen and (max-width: 600px){
.wrp{
width:100%;
margin:0 auto;}
}

#top{
marign:0;
padding:20px;}

.line1,.line2{
padding:5px;
margin:0;}

.line1{
background:linear-gradient(left, #fff799, #fff799 80%, #554738 20%, #554738);
background:-moz-linear-gradient(left, #fff799, #fff799 80%, #554738 20%, #554738);
background:-webkit-linear-gradient(left, #fff799, #fff799 80%, #554738 20%, #554738);
-moz-background-size:20px;
-webkit-background-size:20px;
background-size:20px;}

.line2{
background:linear-gradient(left, #a6c8b2, #a6c8b2 80%, #554738 20%, #554738);
background:-moz-linear-gradient(left, #a6c8b2, #a6c8b2 80%, #554738 20%, #554738);
background:-webkit-linear-gradient(left, #a6c8b2, #a6c8b2 80%, #554738 20%, #554738);
-moz-background-size:20px;
-webkit-background-size:20px;
background-size:20px;}

.menu{
margin:10px 0 20px;
padding:0;}

.menu a{
color:#555;
border:solid 1px #e0ebaf;
background:#e0ebaf;
padding:2px 10px;
margin:5px;
display:inline-block;
text-align:center;}

.menu a:hover{
color:#ccc;
border:solid 1px #e0ebaf;
background:#fff799;}

.info{
margin:20px 5px 10px;
padding:10px 10px 20px;
background:#fff;
color:#555;}

.info a{
color:#555;
border-bottom:dashed 2px #f7b977;
}

.info a:hover{
color:#ccc;
border-bottom:dashed 2px #fff;}

strong{
background:linear-gradient(transparent 40%, #f8e58c 0%);
font-weight:normal;
margin:0 1px;
padding:0 2px;}

header{
color:#ccc;
background:#fff799;
text-align:center;
margin:0;
padding:0;}

h1{
font-family:Fontpoにほんご, sans-serif;
font-size:24px;
font-weight:normal;
margin:0;
padding:50px 0 10px;
color:#555;
}

h2{
color:#555;
background:#fff799;
font-size:12px;
font-weight:normal;
padding:2px 10px;
margin:10px 10px 10px 5px;
border-left:dashed 1px #a6c8b2;
box-shadow:-5px 0 0 0 #fff799;
text-align:center;
display:inline-block;
}

h3{
color:#fff;
background:#a6c8b2;
font-size:12px;
font-weight:normal;
padding:2px 10px;
margin:10px 10px 10px 5px;
border-left:dashed 1px #fff;
box-shadow:-5px 0 0 0 #a6c8b2;
text-align:center;
display:inline-block;
}

a{
color:#fff;
border-bottom:dashed 2px #fff799;
background:none;
text-decoration:none;
padding:0 3px;
transition:0.5s;
}

a:hover{
color:#efefef;
border-bottom:dashed 2px #a6c8b2;}

</style>margin:0 auto;
padding:20px 10px;
max-width:320px;
border:6px solid #8bcfcc;
border-radius:10%;
background-color:#fff;
}
u{
text-decoration:none;
background:linear-gradient(transparent 60%,#9febeb 60%);
}
h1{
color:#fff;
margin:70px auto -10px;
text-shadow:1px 0 0 #8bcfcc,-1px 0 0 #8bcfcc,0 1px 0 #8bcfcc,0 -1px 0 #8bcfcc,1px 1px 0 #8bcfcc,-1px 1px 0 #8bcfcc,1px -1px 0 #8bcfcc,-1px -1px 0 #8bcfcc,1px 2px 0 #8bcfcc,-1px 2px 0 #8bcfcc,1px -2px 0 #8bcfcc,-1px -2px 0 #8bcfcc,2px 1px 0 #8bcfcc,-2px 1px 0 #8bcfcc,2px -1px 0 #8bcfcc,-2px -1px 0 #8bcfcc,3px 0 0 #8bcfcc,-3px 0 0 #8bcfcc,0 3px 0 #8bcfcc,0 -3px 0 #8bcfcc,3px 1px 0 #8bcfcc,-3px 1px 0 #8bcfcc,3px -1px 0 #8bcfcc,-3px -1px 0 #8bcfcc,1px 3px 0 #8bcfcc,-1px 3px 0 #8bcfcc,1px -3px 0 #8bcfcc,-1px -3px 0 #8bcfcc,3px 2px 0 #8bcfcc,-3px 2px 0 #8bcfcc,3px -2px 0 #8bcfcc,-3px -2px 0 #8bcfcc,2px 3px 0 #8bcfcc,-2px 3px 0 #8bcfcc,2px -3px 0 #8bcfcc,-2px -3px 0 #8bcfcc;
}
h2{
display:block;
font-size:110%;
text-align:left;
margin:0 0 8px;
border-bottom:3px dotted #8bcfcc;
}
a,a:link{color:#8bcfcc;text-decoration:none;}
a:hover{color:#8bcfcc;}
