<style type="text/css">

@charset "UTF-8";

@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:12px;
    letter-spacing:2px;
    line-height:1.85;
    margin: 0;
    padding: 0;
    width:100%;
    text-align:center;
    background-image: url("image/back.jpg");
    background-size:550px;
    background-repeat:no-repeat;
    background-position:top center;
    background-attachment:fixed;
    overflow-x:hidden;
    line-break: strict;
    -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 5px;
    height:auto;
    text-align:justify;
    overflow:hidden;
}

.note{
    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 28px;
    font-size:11px;
    width:85%;
    max-width:550px;
    line-height:28px;
    color: #555555;
}

#txt{
    font-size:14px;
    margin-top:50px;
    width:85%;
    max-width:580px;
    background-size: auto 34px;
    line-height:2.0;
    text-align: justify;
}

footer{
    color:#cfcfcf;
}

h1{
    font-family: 'はんなり明朝',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size:16px;
    margin:0;
    line-height:1.4;
    letter-spacing:10px;
    color: #555555;
}

h2{
    font-size:16px;
    font-family: 'はんなり明朝',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin:0;
    padding:0;
    text-align:center;
    color: #555555;
}

a{
    background:rgba(2255,255,255,.55);
    text-decoration:none;
    color: #b0e0e6;
}

a:hover{
    color:#b0e0e6;
}

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

    h1{
        font-size:15px;
        letter-spacing:6px;
    }

}

@media (min-width:620px)  and (max-width: 929px){
    body{
        font-size: 14px;
    }

    .note{
        font-size: 13px;
    }

    #txt{
        font-size: 17px;
        max-width:750px;
        line-height:2.1;
    }

    ol{
        width:620px;
    }

    li{
        margin:0 25px 20px 25px;
        float:left;
    }

    h1{
        font-size:18px;
        letter-spacing:6px;
    }

    h2{
        font-size:19px;
    }

}

@media (min-width:930px) {
    body{
        font-size: 14px;
    }

    .note{
        font-size: 13px;
    }

    #txt{
        font-size: 17px;
        max-width:800px;
        line-height:2.1;
    }

    ol{
        width:930px;
    }

    li{
        margin:0 25px 20px 25px;
        float:left;
    }

    h1{
        font-size:18px;
    }

    h2{
        font-size:19px;
    }

}
</style>