@charset "utf-8";

/*css*/



.f001 {
    height:200px;
    width:200px;
    padding:0px;
    margin:200px 0px 0px 300px;
    background-image:url(../images/field_001001.png);
    position:relative;
    z-index:3;
}

.cha001 {
    background-image:url(../images/charactor_001511.png);
    background-position:0px 0px;
    height:60px;
    width:40px;
    padding:0px;
    margin:60px 0px 0px 80px;
    display:block;
    z-index:9;
    position:absolute;
    top : 0px;
    transition:margin 1.2s;
}

/*----------------アニメーション-----------------------------*/


.cha001AS {
    background-image:url(../images/charactor_001511.png);
    background-position:0px 0px;
    height:60px;
    width:40px;
    padding:0px;
    margin:60px 0px 0px 80px;
    display:block;
    z-index:9;
    position:absolute;
    top : 0px;
    transition:margin 1.2s;
    animation:fleAS001 0.5s steps(7,start) infinite;
}

.cha001AN {
    background-image:url(../images/charactor_001511.png);
    background-position:0px 0px;
    height:60px;
    width:40px;
    padding:0px;
    margin:60px 0px 0px 80px;
    display:block;
    z-index:9;
    position:absolute;
    top : 0px;
    transition:margin 1.2s;
    animation:fleAN001 0.5s steps(7,start) infinite;
}

.cha001AW {
    background-image:url(../images/charactor_001511.png);
    background-position:0px 0px;
    height:60px;
    width:40px;
    padding:0px;
    margin:60px 0px 0px 80px;
    display:block;
    z-index:9;
    position:absolute;
    top : 0px;
    transition:margin 1.2s;
    animation:fleAW001 0.5s steps(7,start) infinite;
}

.cha001AE {
    background-image:url(../images/charactor_001511.png);
    background-position:0px 0px;
    height:60px;
    width:40px;
    padding:0px;
    margin:60px 0px 0px 80px;
    display:block;
    z-index:9;
    position:absolute;
    top : 0px;
    transition:margin 1.2s;
    animation:fleAE001 0.5s steps(7,start) infinite;
}




@keyframes fleAS001 {
    0%  {background-position:0px 0px;}
    100% {background-position:-280px 0px;}
}
@keyframes fleAN001 {
    0%  {background-position:0px -60px;}
    100% {background-position:-280px -60px;}
}
@keyframes fleAW001 {
     0%  {background-position:0px -120px;}
    100% {background-position:-280px -120px;}
}
@keyframes fleAE001 {
    0%  {background-position:0px -180px;}
    100% {background-position:-280px -180px;}
}


/*----------------------------------------------------------*/



/*
#chai001 {
    padding:0px;
    margin:60px 0px 0px 80px;
    position:absolute;
    top : 0px;
}
*/

.con001 {
    height:100px;
    width:100px;
    border-radius:20px;
    padding:0px;
    margin:50px 0px 0px 520px;
    background-color:#b9caea;
    position:relative;
}
.con001 > p{
    font-size:36px;
    font-weight:bold;
    line-height:0px;
    color:#48599c;
    padding:0px;
    margin:0px;
}
.con001 > p:hover {
    color:#ec7b79;
}
.con101 {
    top:20px;
    left:36px;
    position:absolute;
    transform:rotate(270deg);
}
.con102 {
    top:52px;
    left:10px;
    position:absolute;
    transform:rotate(180deg);
}
.con103 {
    top:48px;
    right:8px;
    position:absolute;
}
.con104 {
    bottom:20px;
    left:41px;
    position:absolute;
    transform:rotate(90deg);
}