<style type="text/css">

@import 'https://fonts.googleapis.com/css?family=Crimson Text';

@font-face
{
font-family: はれのそら明朝;
src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2')
     format("woff2");
}
/*-------------------------------------------------
このフォントは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" width="500" height="282" frameborder="0"></iframe>
-------------------------------------------------*/

*{
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}

body{
font-family:'Crimson Text', 'はれのそら明朝', メイリオ, Meiryo, serif;
font-size:11px;
font-weight:normal;
letter-spacing:2px;
line-height:2;
text-align:justify;
word-break:break-all;
overflow-x:hidden;
}

a{
text-decoration:none;
line-height:1;
border-bottom:2px solid #f0f8ff;
}

mark{
background:#f0f8ff;
color:#666;
}

header{
padding:3em 2em;
background:#fff;
text-align:center;
position:relative;
}

header:after{
content:'';
position:absolute;
bottom:-20px;
left:50%;
margin-left:-30px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:20px 30px 0 30px;
border-color:#fff transparent transparent transparent;
}

h1{
display:inline-block;
margin:1em auto;
padding:3em 2em;
background:linear-gradient(-45deg, #fff, #f0f8ff, #fff);
font-size:14px;
font-weight:normal;
border:1px solid #fff;
box-shadow:0 0 0 5px rgba(240, 248, 255, .6);
}

nav{margin:1em 0;}

nav ul li{
display:inline-block;
margin:0 .5em;
}

main{
max-width:500px;
margin:0 auto;
padding-top:3em;
}

section{
margin:5em 2em;
padding:1.5em;
background:#fff;
border:1px solid #f0f8ff;
box-shadow:0 0 0 5px #fff;
}

section a{
line-height:1;
border-bottom:2px solid #f0f8ff;
}

h2{
width:80%;
font-size:14px;
text-align:center;
position:relative;
padding:.25em 0;
margin:1em auto;
border-bottom:3px solid #eee;
}

h2:after{
position:absolute;
bottom:-3px;
left:0;
z-index:2;
content:'';
width:50%;
height:3px;
background:#f0f8ff;
}

h3{
display:inline-block;
margin-right:1em;
padding:.25em .5em;
background:#f0f8ff;
font-size:10px;
}

footer{
background:#fff;
padding:1em 0;
text-align:center;
position:relative;
}

footer:after{
content:'';
position:absolute;
top:-20px;
left:50%;
margin-left:-30px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:0 30px 20px 30px;
border-color:transparent transparent #fff transparent;
}

input, textarea, select{
background:#f0f8ff;
font-family:'Crimson Text', 'はれのそら明朝', メイリオ, Meiryo, serif;
font-size:11px;
font-weight:normal;
letter-spacing:2px;
line-height:2;
color:#666;
text-align:justify;
word-break:break-all;
width:auto;
height:auto;
margin:5px 0;
padding:2px 4px;
border:none;
border-radius:0;
text-shadow:none;
box-shadow:none;
resize:vertical;
outline:none;
vertical-align:middle;
}

input[type=text]{width:150px;}

input[type=submit]{cursor:pointer;}

form.clap{margin:1em 0;}

.clap input[type]{margin:5px 3px;}

textarea{
width:100%;
height:20ch;
}

::selection{
background:#eee;
color:#666;
}

::-moz-selection{
background:#eee;
color:#666;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
 $(function(){
      $('a[href^=#]').click(function(){
        var speed = 600;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top - 10;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
      });
 });
</script>