<link href="http://fonts.googleapis.com/css?family=Varela Round|Kosugi" rel="stylesheet" type="text/css">
<style type="text/css">
/* common */
*{margin:0; padding:0;
color:#444;
border:none; box-sizing:border-box; 
font-family:"Varela Round","Kosugi","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
font-size:11px;
list-style-type:none;}
*:before, *:after{position:absolute; content:"";}
img{max-width:100%;}
body{width:100%;
background:#ecf2f9;
text-align:center; letter-spacing:1.5px; line-height:1.9; word-break:break-all;
-webkit-tap-highlight-color:rgba(0,0,0,0)}
::selection{background:#f9ecec;}
/* end common */

/* headline&link&mark */
h1{margin:5px 0;
font-size:11px; text-align:center;}
a{text-decoration:none; color:#444;
border-bottom:#c8d9eb solid 1px;}
a:hover, input[type=submit]:hover, footer a, #image{color:#888; border:none;}
#image:hover{opacity:.5;}
mark{background:linear-gradient(transparent 60%, #f9ecec 0%)}
/* end headline&link&mark */

/* block */
header{height:15px;
background-image:repeating-linear-gradient(45deg, transparent, transparent 4px, #fff 4px, #fff 8px);}
main{max-width:500px; margin:0 auto;
padding:50px 45px 40px 45px;}
section{position:relative;
margin-bottom:15px; padding:25px 22.5px;
text-align:justify;
background:#fff;

font-family:"Varela Round","Kosugi","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;

font-size:11px;

}
section:before{z-index:-1;
top:4px; left:4px;
width:100%; height:100%;
background:#c8d9eb;}
#menu{margin-top:5px;}
footer #image{display:inline-block; vertical-align:middle;}
.text{max-width:400px; margin:0 auto;
text-align:justify;}
.text li{padding:13px 0;
border-bottom:#ccc dashed 1px;}
.text li:last-child{border:none;}
/* end block */

/* arrow */
.arrow{display:block;
width:8px; height:8px;
margin:40px auto 40px auto;
border-bottom:#c8d9eb solid 2px;
border-left:#c8d9eb solid 2px;
-ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.l_arrow, .r_arrow{display:inline-block;
width:8px; height:8px;
border-bottom:#c8d9eb solid 2px;
border-left:#c8d9eb solid 2px;
vertical-align:middle;}
.l_arrow{margin-right:4em;
-ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.r_arrow{margin-left:4em;
-ms-transform:rotate(-135deg); -webkit-transform:rotate(-135deg); transform:rotate(-135deg);}
a .l_arrow:hover, a .r_arrow:hover{opacity:.5;}
/* arrow end */

/* form */
input, textarea{padding:.7em;
font-size:11px; letter-spacing:.1em; line-height:1.5;
background:#f2f2f1; outline:none;
border-radius:5px;}
input[type=submit]{padding:.3em;
background:transparent;
cursor:pointer;}
textarea::-webkit-input-placeholder, input::-webkit-input-placeholder{color:#bbb;} 
#post{position:relative; text-align:center;}
#post input[type=text], #post textarea{display:block; 
margin:0 auto;
width:100%; max-width:300px;
color:#888;}
#post input[type=text]{border-bottom-right-radius:0; border-bottom-left-radius:0;}
#post textarea{height:7em;
text-align:justify;
border-top-right-radius:0; border-top-left-radius:0;}
#post:before{top:100%; right:0; left:0;
width:0; height:0; margin:0 auto;
border:10px solid transparent;
border-top:10px solid #f2f2f1;}
/* form end */
</style>