@import url(https://fonts.googleapis.com/css?family=Anaheim|Bungee+Hairline);
@font-face{
 font-family:"togoshi";
 src: url('https://cdn.leafscape.be/togoshi/togoshi-mincho_web.woff') format("woff");
}
*{
 margin:0;
 padding:0;
 font-family:"Anaheim",heisei-maru-gothic-std,Yugothic,游ゴシック,"メイリオ";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html{height:100%;
min-height:100%;}
body{
height:100%;
min-height:100%;
 background-color:rgba(239,235,229,0.5);
background-image:url(http://alicex.jp/data/ivy/img/ivy_upld_2.png);
 color:#555;
 font-size:10px;
 letter-spacing:2px;
 text-align:center;
position:relative;
line-height:200%;
}
a{
 text-decoration:none;
 color:#555;
transition: .3s;
}
a:hover{
color:#aaa;}
h1{
 font-size:20px;
 font-family:"Bungee Hairline";
padding:30px 0 20px;
}
h1:before{
 width:100px;
 height:100px;
 margin:50px auto;
 box-shadow:10px 10px 0px  rgba(255,255,255,0.4);
 transform:rotate(135deg);
}
h2{
 font-size:13px;
 letter-spacing:3px;
font-weight:normal;
}
h4 span{
display:block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
position:relative;
}
h4 span:before{
position:absolute;
left:0;
top:10px;
width:100%;
text-indent:0;
font-family:togoshi;
white-space:normal;
overflow:auto;
line-height:50px;
content: attr(data-text);
}

h2:before{
 width:50px;
 height:50px;
 margin:30px auto;
 box-shadow:7px 7px 0px  rgba(255,255,255,0.4);
 transform:rotate(135deg);
}
h3{
 font-size:13px;
 line-height:20px;
 margin:30px 0 0;
 text-align:left;
}
h3:after{
 height:3px;
}
h4{
 font-size:20px;
 font-family:"togoshi";
 letter-spacing:3px;
padding:20px 0;
 text-align:center;
font-weight:normal;
line-height:50px;
}

nav span{
font-size:xx-small;
}
aside{
 margin:30px 0;
 padding:30px 5%;
 background: rgba(255,255,255,0.4);
 font-size:10px;
 line-height:180%;
}
main{
 max-width:450px;
 box-sizing:border-box;
 margin:0 auto;
 padding:30px 5% 50px;
}
article{
max-width:600px;
 margin:50px auto;
 padding:30px 5%;
 background: rgba(239,235,229,0.8);
 line-height:180%;
 text-align:justify;
font-size:15px;
letter-spacing:1px;
}
article a{
font-size:10px;
letter-spacing:2px;
}
ul{
 margin:30px 0;
 list-style-type:none;
}
li{
letter-spacing:1px;
 position:relative;
 margin:40px 0;
 padding:0 0 0 70px;
 line-height:180%;
 text-align:justify;
list-style:none;
}
li span{
letter-spacing:2px;
 position:absolute;
 top:50%;
 left:0;
 width:40px;
 height:40px;
 margin-top:-20px;
 box-shadow:-5px 5px 0px  rgba(255,255,255,0.4);
 background-size:70px auto;
 background-position:center;
 transform:rotate(45deg);
}
li a{
letter-spacing:2px;
 display:block;
 font-weight:bold;
}
p{
 margin:20px 0;
 text-align:justify;
}
p a{
 padding:0 5px;
 background: rgba(255,255,255,0.4);
}
.back{
 margin:20px -5px;
 padding:20px;
 border-radius:5px;
 background: rgba(255,255,255,0.6);
 line-height:180%;
}
hr{
 height:3px;
 margin:40px 0;
 border:none;
}
h1:before, h2:before, h3:after, hr{
 content:"";
 display:block;
 background:url(http://alicex.jp/data/ivy/img/ivy_upld_1.jpg) center;
 background-size:170px auto;
}
form{
margin: 20px 0;
text-align:left;
 padding:5px;
 border-radius:5px;
 background: rgba(255,255,255,0.6);
 line-height:180%;
position:relative;
}
textarea,input,select,option{
text-align:left;
width:250px;
padding:0 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
 border:1px solid transparent;
 background: transparent;
 line-height:180%;
border-radius:0;
}
button{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
 border:1px solid transparent;
 background: transparent;
width:50px;
position:absolute;
bottom:10px;
right:0;
border-left:1px solid #000;
}
br{letter-spacing:0;}


    section.post a {
        display: block;
background:transparent;
        width: fit-content;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
        vertical-align: bottom;
        overflow: hidden;
margin:5px 0 0;
padding:0;
    }

    section.post a:hover::after {
	width: 100%;
}    
    section.post a span {
        display: inline-block;
background: rgba(255,255,255,0.4);
padding:0 5px;
        position: relative;
        transition: .4s;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    
    section.post a span:after {
        display: inline-block;
        position: absolute;
width:auto;
        left: 0;
        top: 0;
        color: #000;
padding:0 5px;
background: rgba(255,255,255,0.4);
        content: attr(data-text);
      -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: translate3d(0, 105%, 0) rotateX(-90deg);
        transform: translate3d(0, 105%, 0) rotateX(-90deg);
    }
    
    section.post a:hover span {
        -webkit-transform: translate3d(0, 0, -30px) rotateX(90deg);
        transform: translate3d(0, 0, -30px) rotateX(90deg);
color:transparent;
background:transparent;
    }
mark{
color:#bbb;
letter-spacing:2px;
background:transparent;
}
footer{
margin:0 10px 0 auto;
float:right;
}
footer p{
text-align:center;
width:80px;
line-height:40px;
margin:0 auto;
}
footer p a{
color:#bbb;
background:transparent;
}