<link href='https://fonts.googleapis.com/css?family=Crimson Text|Parisienne' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style type="text/css">
@font-face
{
font-family: はんなり明朝;
src: url('https://cdn.leafscape.be/hannari/hannari_web.woff')
     format("woff");
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。
http://ipafont.ipa.go.jp/ipa_font_license_v1.html
-------------------------------------------------*/

*{box-sizing:border-box;}

body{
font-family: 'Crimson Text',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size:11px;
letter-spacing:2px;
line-height:1.85;
margin: 0;
padding: 0;
width:100%;
text-align:center;
background-image: url("#背景画像URL#");
background-size:550px;
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;
overflow-x:hidden;
word-break:break-all;
-webkit-tap-highlight-color:rgba(255,255,200,.4);
postion:relative;
}

#wrp{
margin:80px auto 0 auto;
max-width:1024px;
padding:0 30px;
text-align:justify;
}

#shell{opacity:.75;}

.angle{
font-size:28px;
text-align:center;
}

ol{
counter-reset: li;
list-style:none;
list-style:decimal;
margin:0 auto;
padding:0;
}

li{
margin:10px;
padding:10px 0px 10px 20px;
width:260px;
color:#bbb;
background:rgba(2255,255,255,.55);
text-align:left;
position:relative;
display:block;
}

li:before{
font-family:'Parisienne',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size:16px;
content:counter(li);
counter-increment:li;
position:absolute; 
left:-25px;
top:10px;
padding:0 5px;
height:100%;
color:#555;
font-weight:700;
text-align:center;
}

li a{
color:#555;
background:none;
}

li a:hover{
color:#b0e0e6;
text-decoration:underline;
}

li a img:hover{opacity:.6;}

.note, #txt{
margin:0 auto;
padding:0 5px;
height:auto;
background:rgba(255,255,255,.55) -webkit-gradient(
linear,left top, left bottom,
from(transparent),
color-stop(0.94, transparent),
color-stop(0.98, #e5e5e5),
to(transparent)
);
background-size:auto 1.8rem;
text-align:justify;
line-height:1.8rem;
overflow:hidden;
}

.note{
font-size:11px;
width:85%;
max-width:550px;
}

#txt{
font-size:12.5px;
margin-top:50px;
width:90%;
max-width:700px;
background-size: auto 1.9rem;
line-height:1.9rem;
}

footer{color:#cfcfcf;}

h1{
font-family: 'はんなり明朝',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size:14px;
margin:0;
line-height:1.4;
letter-spacing:12px;
}

h2{
font-size:14px;
font-family: 'はんなり明朝',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
margin:0;
padding:0;
text-align:center;
}

a{
background:rgba(2255,255,255,.55);
text-decoration:none
}

a:hover{color:#efefef;}

input[type],textarea{
font-size:12px;
font-family: 'Crimson Text','はんなり明朝',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
margin:5px 0;
padding:3px 5px 1px 5px;
height:auto;
color:#555;
background:transparent;
border:none;
font-weight:700;
letter-spacing:1.2px;
box-shadow:none;
outline:none;
vertical-align:middle;
}

input[type=text]{
width:80px;
border-bottom:#555 solid 1.5px;
}

input[type=submit]{
margin-top:15px;
width:auto;
cursor:pointer;
}

input[type=submit]:hover{color:#bbb;}

textarea{
width:85%;
max-width:350px;
}

::selection {background:rgba(255,255,200,.4);}

::-moz-selection {background:rgba(255,255,200,.4);}

input::-webkit-input-placeholder {color:#555;}

@media (max-width:620px) {
ol{width:240px;}

li{width:auto;}
}

@media (min-width:620px)  and (max-width: 929px){
ol{width:620px;}

li{
margin:0 25px 20px 25px;
float:left;
}

h1{font-size:15px;}
}

@media (min-width:930px) {
ol{width:930px;}

li{
margin:0 25px 20px 25px;
float:left;}

h1{font-size:16px;}
}
</style>