<link href="http://fonts.googleapis.com/css?family=Spectral|Allura|Noto Serif JP" rel="stylesheet" type="text/css">
<style type="text/css">
/* common */
*{margin:0; padding:0;
border:none; box-sizing:border-box;
list-style-type:none; width:30%;}
*:before, *:after{position:absolute; content:"";}
img{max-width:100%;}
body{max-width:100%;
background:#f5f4f5;
font-size:11.5px; text-align:center;
letter-spacing:.1em; line-height:1.7;
word-break:break-all;
-webkit-tap-highlight-color:rgba(0,0,0,0);}
body, input, textarea{color:#333;
font-family:'Spectral',"Noto Serif JP","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;}
h1,h2, mark{font-weight:400;}
::selection{color:#ddd9eb; background:#f5f4f5;}
/* end common */

/* headline&link&mark */
a{text-decoration:none; color:#999;}
a:hover{color:#ddd9eb;}
footer a{display:inline-block;
margin:.75em; padding:.4em .8em .3em .9em;
background:#fff;
font-size:10.5px;}
h1{margin:0 auto 13px auto;
font-family:'Allura',"Noto Serif JP","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
font-size:24px; letter-spacing:0;}
h2{position:relative;
margin-bottom:20px;
font-size:11px;}
h2:before{top:-7px; left:-25px;
width:6px; height:30px;
background:#ddd9eb;}
mark{color:#333; background:transparent;
border-bottom:#ddd9eb dashed 1px;}
/* end headline&link&mark */

/* block */
header{padding:60px 12.5% 0 12.5%}
main{max-width:400px;
margin:0 auto; padding:60px 12.5% 0 12.5%;}
nav{position:relative;
margin:0 auto; padding:30px 0 20px 0;
max-width:320px;
border-top:#333 solid 1px;
border-bottom:#333 solid 1px;}
nav:before{z-index:-1;
top:-33px; right:0; left:0;
margin:0 auto;
width:130px; height:50px;
background-image:url("#画像URL#");
background-size:130px;
background-repeat:no-repeat;
opacity:.8;}
section{margin:0 0 20px 0; 
padding:25px;
background:#fff;
text-align:justify;}
footer{padding:30px;}
.link{margin-top:10px;}
/* end block */

/* form */
input, textarea{margin-bottom:10px;
padding:.5em .8em .3em .9em;
background:#f5f4f5;
font-size:11px; letter-spacing:.1em; line-height:1.5;
outline:none;}
input[type=submit]{cursor:pointer; margin-bottom:0;
color:#fff; background:#ccc;
border-radius:3px;}
input[type=submit]:hover{background:#ddd9eb;}
textarea{width:100%; height:7em;}
textarea::-webkit-input-placeholder, input::-webkit-input-placeholder{color: #bbb;}
/* form end */

/* responsive */
@media screen and (min-width:800px) {
main{display:flex; flex-flow:row wrap;
padding:60px 40px 30px 40px;
width:100%; max-width:800px;}
section{margin:15px; width:330px; border: none; box-sizing: border-box; list-style-type: none; }
/* end responsive */
</style>