@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{
background:url(usiro2.gif);
background-attachment:fixed;
font-family: "游明朝", "ＭＳ 明朝",メイリオ, serif;
font-size:11px;
letter-spacing:2px;
line-height:1.85;
margin: 0;
padding: 0;
width:100%;
text-align:center;
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;
text-overflow:ellipsis;
white-space: nowrap;
overflow:hidden;
}

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 20px;
height:auto;

text-align:justify;
overflow:hidden;
}

.note{
font-size:11px;
width:85%;
max-width:550px;
line-height:28px;
}

#txt{
font-size:12.5px;
margin-top:50px;
width:90%;
max-width:700px;
background-size: auto 34px;
line-height:34px;
}

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;}
}