@charset "utf-8";

/* navi */
.sideNavi {
    position: fixed;
    right: 0;
    top: 200px;
    z-index: 2;
}

/* chara01 */
#chara01 .stage .inner {
    position: relative;
    text-align: center;
}

#chara01 .stage .bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/index/bg_01.png);
    background-position: center bottom;
}

#chara01 h1 {
    width: 42.1428571428571%;
    padding-top: 7%;
    margin: 0 auto 5%;
}

#chara01 h2 {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: -42.85714285714286%;
}

#chara01 .chara {
    margin: -2% -7.14285714285714% 0;
}

/* chara02 */
#chara02 .stage .inner {
    position: relative;
    text-align: center;
}

#chara02 .stage .bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/index/bg_02.png);
    background-position: center bottom;
}

#chara02 h1 {
    width: 42.1428571428571%;
    padding-top: 7%;
    margin: 0 auto 2%;
}

#chara02 h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: -42.85714285714286%;
}

#chara02 .chara {
    margin: 0 -7.14285714285714% 0;
}

/* chara03 */
#chara03 .stage .inner {
    position: relative;
    text-align: center;
}

#chara03 .stage .bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/index/bg_03.png);
    background-position: center bottom;
}

#chara03 h1 {
    width: 42.1428571428571%;
    padding-top: 7%;
    margin: 0 auto 2%;
}

#chara03 h2 {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: -42.85714285714286%;
}

/* chara04 */
#chara04 .stage .inner {
    position: relative;
    text-align: center;
}

#chara04 .stage .bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/index/bg_04.png);
    background-position: center bottom;
}

#chara04 h1 {
    width: 42.1428571428571%;
    padding-top: 7%;
    margin: 0 auto 2%;
}

#chara04 h2 {
    width: 142.8571428571429%;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: -42.85714285714286%;
}

@media screen and (max-width: 1399px) {}

/* PCのみ */
@media screen and (min-width: 768px) {
    #chara01 .chara a .over {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    #chara01 .chara a:hover .over {
        opacity: 100;
    }

    #chara02 .chara a .over {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    #chara02 .chara a:hover .over {
        opacity: 100;
    }

    #chara03 .chara a .over {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    #chara03 .chara a:hover .over {
        opacity: 100;
    }

    #chara04 .chara a .over {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    #chara04 .chara a:hover .over {
        opacity: 100;
    }
}

/* SP */
@media screen and (max-width: 767px) {

    /* navi */
    .sideNavi {
        width: 30px;
        top: 80px;
    }

    #chara01 img {
        width: 100%;
    }

    #chara01 h1 {
        width: 92.1875%;
        padding-top: 2%;
        margin: 0 auto 1%;
    }

    #chara01 .stage .bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/index/sp/bg_01.png);
    }

    #chara01 h2 {
        width: 100%;
        margin-right: 0;
    }

    #chara01 .chara {
        margin: -2% 0 0;
    }

    #chara02 img {
        width: 100%;
    }

    #chara02 .stage .bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/index/sp/bg_02.png);
    }

    #chara02 h2 {
        width: 100%;
        margin-left: 0;
    }

    #chara02 .chara {
        margin: 0;
    }

    #chara03 img {
        width: 100%;
    }

    #chara03 .stage .bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/index/sp/bg_03.png);
    }

    #chara03 h2 {
        width: 100%;
        margin-right: 0;
    }

    #chara04 img {
        width: 100%;
    }

    #chara04 .stage .bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/index/sp/bg_04.png);
    }

    #chara04 h2 {
        width: 100%;
        margin-left: 0;
    }
}