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

#wrp{max-width:60%;
  margin:0 auto;
  padding:25px 0;
}

#header{text-align:center;
}

#nav{padding:10px 0 10px 0;}
#nav a {
    position: relative;
  display: inline-block;
background-color: #c53d43;
  border: 1px solid #274a78;
  border-radius:50%;
  margin:0px;
  padding: 0px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    color: #ffffff;
    text-align: center;
    z-index: 10;
    text-decoration: none;
}

#nav a:before {
    content: "";
   color:#e6b422;
    position: absolute;
    background-color: #000000;
  border: 0;
  border-radius:50%;
margin:0px;
  padding: 0px;
    line-height:

 80px;
  text-indent: 1em;
    width: 0;
    top: 0;
    bottom: 0;
     -webkit-transition: .4s ease 0s;
    transition: .4s ease 0s;
    z-index: -1;
}

#nav a:hover {
    color: #ffffff;
    text-decoration: none;
}

#nav a:hover:before {
    width: 100%;
}

#nav ul{
margin: 0; 
padding: 0; 
list-style: none;
}

#nav li{ 
  margin:20px;
  padding: 0px;
  height: 80px;
  width:80px;
 line-height: 80px;
  text-align: center;
  display: inline-block;
float: center;
}

#content{
height:auto;
border:0px;
}

h1 {
position: relative;
display: inline-block;
padding: 0 55px;
font-family: 'Megrim', cursive;
color:#ffffff;
font-size:3.5em;
}

h1:before, h1:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: #ffffff;
}

h1:before {left:0;}
h1:after {right: 0;}


h2{
position:relative;
margin:0 auto;
padding:0 20px;
width:300px;
color:#000000;
background:#ffffff;
border-top:#ffffff solid 1px;
border-bottom:#ffffff solid 1px;
background-image: -webkit-gradient(linear, left top, right bottom,
		from(			rgba(255, 255, 255, 0.0)), 
		color-stop(0.4, rgba(255, 255, 255, 0.0)), 
		color-stop(0.4, rgba(0, 0, 0, 0.1)), 
		color-stop(0.6, rgba(0, 0, 0, 0.1)), 
		color-stop(0.6, rgba(255, 255, 255, 0.0)),
		to(				rgba(255, 255, 255, 0.0))
		);
	background-image: -webkit-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -moz-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -o-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: linear-gradient(to bottom -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-size:4px 4px;
}
h2:before{
	content:" ";
	position:absolute;
	top:100%;
	left:24px;
	width:0;
	height:0;
	border-width:12px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#ffffff;
}
h2:after{
	content:" ";
	position:absolute;
	top:100%;
	left:28px;
	width:0;
	height:0;
	border-width:8px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#ffffff;
	z-index:1;
}

.box{
width:400px;
 margin: 0px auto;
padding: 20px;
 color:#cccccc;
text-align:left;
}

.box2{
 width: 350px;
 margin: 0px auto;
padding: 10px;
 color:#000000;
background:#ffffff;
border-radius:20px;
text-align:left;
}


a {
color:#ba2636;
text-decoration:none;
border-bottom:#274a78 dashed 1px;
}

hr{ width: 300px;
 align: center;
border:#274a78 dotted 1px;
}