@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/opensanscondensed/v15/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuXMRw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。
http://ipafont.ipa.go.jp/ipa_font_license_v1.html
オリジナルのフォントは以下から取得できます。
http://ipafont.ipa.go.jp/
<blockquote data-secret="uoFEK7mhQX" class="wp-embedded-content"><a href="http://fontopo.com/?p=377">はれのそら明朝</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="http://fontopo.com/?p=377&embed=true#?secret=uoFEK7mhQX" data-secret="uoFEK7mhQX" title="埋め込まれた WordPress の投稿" marginwidth="0" marginheight="0" scrolling="no" height="282" frameborder="0" width="500"></iframe>
-------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

body{
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 14px;
  width: 100%;
  max-width: 540px;
  letter-spacing: 2.5px;
  line-height: 1.7;
  margin: 0 auto;
  text-align:center;
  overflow-x:hidden;
  padding: 0;
}
	
a{
 color:#444;
 margin:5px;
 border-bottom:1px dashed #334466;
 text-decoration: none;
}

a:hover{
color: #ccc;
}
	
#main{
 font-size: 11px;
 width: 90%;
 margin:0 auto;
 padding: 10px;
}

h1{
 font-family:はれのそら明朝,serif; 
 font-size: 23px;
 color:#334466;
 border-bottom:8px dotted #334466;
 padding-bottom:10px;
 margin-bottom:20px;
 display:inline-block;
}

h2{
 font-size: 15px;
 color:#334466;
 margin:20 0 5 0px;
}

.menu{
 position: relative;
 display: inline-block;
 font-weight: bold;
 padding: 0.5em;
 text-decoration: none;
 color: #fff;
 background: #334466;
 border-radius: 20px;
 transition: .4s;
}

 .menu:hover {
 background: #00bcd4;
 border-radius: 20px;
 color: white; 
}

.box{
 display: block;
 position: relative;
 text-align: justify;
 text-justify: inter-ideograph;
 -ms-text-justify: inter-ideograph;
 border:1px solid #334466;
 border-radius: 20px;
 z-index: 0;
 margin: 5px auto;
 padding: 15px;
 background:#fff;
 font-size:13px;
 text-align:left;
 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
 box-sizing: border-box;
}

header{
 height:30px;
 background-image: linear-gradient(-45deg,#fff 25%,#334466 25%, #334466 50%,#fff 50%, #fff 75%,#334466 75%, #334466);
  background-size: 20px 20px;
}

footer{
text-align:center;
font-size:14px;
margin:0;
}

input[type]
{
	background: #fff;
	box-shadow: none;
	color: #777;
	font-family: 'Baloo', cursive;
	font-size: 10pt;
	height: auto;
	margin: 0;
	padding: 3px;
}
input[type=text]
{
  border: #ddd solid 1px;
  width: 80px;
  margin:5px;
 text-align: center;
}
input[type=submit]{
   border: #ddd solid 1px;
   margin: 5px;
   padding: 2px 2px;
   width: auto;
}
.nameform a {
  color: #fff;
  background: #334466;
  padding: 5px 10px;
}