@import url(common/layout_en.css);

#contents .wrap {
    padding-top: 5rem;
}
p.image,
p.controller {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
p.controller {
    width: 92%;
    position: relative;
}
p.controller img {
    position: relative;
    z-index: 2;
    cursor: pointer;
}
p.controller .bg {
    width: 113.5%;
    position: absolute;
    top: 0.3%;
    left: -6.75%;
    z-index: 1;
}
.thumbs {
    margin: 2rem auto 0;
    display: block;
}
.thumbs li {
    width: 42.75%;
    margin-right: 1.75%;
    display: inline-block;
    vertical-align: middle;
}
.thumbs li.arrow {
    margin: 4% 0.5% 0 0.25%;
    width: 9%;
}
.thumbs li:last-child {
    margin-right: 4px;
    float: right;
}
.thumbs li dt {
    text-align: center;
}
.thumbs li dd {
    margin-top: 0.4rem;
}
.thumbs li dd img {
    border: solid 2px #d7ebe6;
}
ol.num li.nocount:before {
    content: "1";
}
ol.num li {
    padding: 0.8rem 1.8rem;
}
ol.num li p {
    padding-right: 0.8rem;
    display: table-cell;
    text-indent: 0;
    vertical-align: middle;
}
ol.num li p.hdnum {
    width: 1.8rem;
    display: table-cell;
    vertical-align: middle;
    background: none;
}
ol.num li p.hdnum span {
    margin-right: 0.8rem;
    display:inline-block;
    background: #fafa1e;
    color: #9600f0;
    font-size: 1.2rem;
    border-radius: 50%;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    text-align:center;
    vertical-align: 0.1rem;
}
ol.num li p .arrow {
    width: 4.3rem;
    text-align: center;
    display: inline-block;
}

ol.num li .btn {
    width: 6.4rem;
    padding-right: 1.6rem;
    text-align: center;
    line-height: 0;
}
ol.num li .btn.abxy img {
    width: 3.2rem;
}
ol.num li .btn.start img {
    width: 5.6rem;
}

#arwing {
    position: fixed;
    z-index: 1;
}
#arwing.aw01 {
    right: -130px;
    bottom: 10%;
}
#arwing.aw02 {
    left: -130px;
    bottom: 10%;
}
#arwing.aw01 .aw02,
#arwing.aw02 .aw01 {
    display: none;
}
#arwing img {
    width: 130px;
    height: auto;
}
@media screen and (max-width: 420px) {
    .thumbs li.arrow {
        margin: 4% 0.5% 0 0;
        width: 9%;
    }
    #arwing.aw01,
    #arwing.aw02 {
        bottom: 0;
    }
    #arwing.aw01 {
        right: -85px;
    }
    #arwing.aw02 {
        left: -85px;
    }
    #arwing img {
        width: 85px;
    }
}