body{font-size:74%;
text-align:center;
font-family:'Quattrocento',Meiryo,Osaka;
line-height:1.9;
 background: #fff;
letter-spacing:2.3px;}

#wrp{max-width:600px;
  margin:0 auto;
  padding:50px 25px 25px 25px;
}

#header{
text-align:right;
width:220px;
display: inline-block;
  margin-right:20px;
vertical-align: middle;
}

#nav{
padding:0;
margin:0;
text-align:left;
width:320px;
display: inline-block;
vertical-align: middle;
}

ul {
	list-style: none;
	font-family: Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
}
li {
	margin-top: .5em;
}
li:first-child {
	margin-top: 0;
}

li {
	position: relative;
}
li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#content{
height:auto;
width:50%;
border:0px;
}h1 {
font-family: 'Fredericka the Great', cursive;
font-size:30px;
margin-left:20px;
letter-spacing: 5px;
}

h2{
position: relative;
padding: 0.25em 1em;
margin-top:10px;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
h2:before, h2:after{
content: '';
position: absolute;
top: -7px;
width: 1px;
  height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: #ccc;
}
h2:before {left: 7px;}
h2:after {right: 7px;}


p {
  color: #000;
  font-size:14px;
  text-align: justify;
  text-justify: inter-ideograph;
  margin:0;
padding-top:10px;
}

.box{
width:450px;
 margin: 0px auto;
padding: 20px;
 color:#000;
text-align:left;
}a{
position: relative;
padding:3px;
font-size:15px;
background: -webkit-linear-gradient(135deg, #f44336 0%,#ff9800 17%,#ffeb3b 32%,#4caf50 50%,#2196f3 67%,#3f51b5 84%,#9c27b0 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
border: 0;
}

a:hover {
	border-bottom: 1px #cccccc dashed;
}


strong {
background: linear-gradient(transparent 75%, #98fb98 75%);
}

.box2{
margin:2em 0;
position: relative;
padding: 1.5em 1.5em;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
.box2:before, .box2:after{
content: '';
position: absolute;
top: -10px;
width: 1px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;
}
.box2:before {left: 10px;}
.box2:after {right: 10px;}
.box2 p {
margin: 0;
padding: 0;
} 
.box2 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 30px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #999;
font-weight: bold;
}