@charset "utf-8";

.content.bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/detail/detail_bg.jpg);
}

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

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

/* detail */
#detail .stage {
    overflow: visible;
}

#detail .stage .inner {
    position: relative;
    text-align: center;
}

#detail h1 {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/detail/detail_name_bg.png);
    margin-bottom: 5%;
    position: relative;
}

#detail .chara.pc {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

#detail .chara.pc ul li {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
}

#detail .info {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
}

#detail .info {
    width: 1000px;
    margin: 0 auto;
}

#detail .copy {
    text-align: left;
    width: 53%;
}

#detail .copy h4 {
    font-size: 3.0rem;
    margin-bottom: 8%;
    line-height: 1.5;
}

#detail .copy p {
    font-size: 1.7rem;
    margin-bottom: 8%;
    line-height: 1.7;
}

#detail .profile {
    font-size: 1.7rem;
    text-align: left;
    margin-bottom: 5%;
}

#detail .profile dl:not(:first-of-type) {
    margin-top: 12px;
}

#detail .profile dl dt {
    display: inline-block;
    vertical-align: top;
    width: 204px;
    height: 39px;
    line-height: 39px;
    padding-left: 30px;
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/detail/detail_balloon.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#detail .profile dl dd {
    display: inline-block;
    line-height: 39px;
    width: 40%;
}

#detail .voice {
    width: 540px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 2%;
    margin-left: 1%;
}

#detail .voice dl {
    margin-bottom: 2%;
}

#detail .voice dl:last-of-type {
    margin-bottom: 0;
}

#detail .voice dl dt {
    float: left;
    width: 58%;
}

#detail .voice dl dd {
    width: 40%;
    float: left;
}

#detail .voice dl dd>div {
    float: left;
    width: 22%;
    margin-left: 2%;
}

#detail .arrowL {
    position: absolute;
    top: 50%;
    left: 6%;
    width: 8.57142857142857%;
}

#detail .arrowR {
    position: absolute;
    top: 50%;
    right: 6%;
    width: 8.57142857142857%;
}

/* navi */
#navi .stage .inner {
    position: relative;
    padding-top: 5%;
}

#navi .btnChange {
    width: 32.85714285714286%;
    margin: 0 auto 2%;
    cursor: pointer;
}

#navi .btnShare {
    width: 32.85714285714286%;
    margin: 0 auto;
}

/* charaList */
#charaList .stage .inner {
    position: relative;
    text-align: center;
    padding-bottom: 10%;
}

#charaList .stage .bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/detail/list_bg.png);
    background-position: center top;
}

#charaList .stage h2 {
    width: 42.1428571428571%;
    padding-top: 5%;
    margin: 0 auto 2%;
}

#charaList .stage .unit:not(:first-of-type) {
    margin-top: 6%;
}

#charaList .stage .unit h3 {
    margin: 0 auto 3%;
}

#charaList .stage .unit ul {
    text-align: center;
}

#charaList .stage .unit ul li {
    display: inline-block;
    text-align: center;
    width: 16.78571428571429%;
    margin: 0 0.7%;
}

#charaList .stage .unit ul li p {
    font-size: 2.2rem;
    font-weight: bold;
    margin-top: 5%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 1399px) {
    #detail .info {
        width: 71.4285714285714%;
    }
}

/* SP */
@media screen and (max-width: 767px) {
    .content.bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/detail/sp/detail_bg.jpg);
    }

    #detail h1 {
        margin-top: 8%;
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/detail/sp/detail_name_bg.png);
        margin-bottom: 5%;
    }

    #detail .stage {
        overflow: hidden;
    }

    #detail .info {
        width: 100%;
    }

    #detail .copy {
        text-align: left;
        width: 50%;
        float: left;
        padding-left: 5%;
    }

    #detail .spFrame {
        position: relative;
        padding-bottom: 100%;
        margin-bottom: 3%;
    }

    #detail .spFrame .btnChange {
        position: absolute;
        width: 12.5%;
        right: 3%;
        bottom: 30%;
    }

    #detail .info .chara {
        position: absolute;
        width: 100%;
        right: 0;
        top: 0;
        margin-top: -45%;
    }

    #detail .info .chara ul li {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
    }

    #detail .copy {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    #detail .copy h4 {
        font-size: 1.2rem;
        margin-bottom: 8%;
    }

    #detail .copy p {
        font-size: 1.1rem;
        margin-bottom: 8%;
    }

    #detail .profile {
        font-size: 1.1rem;
        margin: 0 auto 5%;
        width: 95%;
    }

    #detail .profile dl:not(:first-of-type) {
        margin-top: 12px;
    }

    #detail .profile dl dt {
        width: 118px;
        height: 31px;
        line-height: 31px;
        padding-left: 15px;
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/detail/sp/detail_balloon.png);
    }

    #detail .profile dl dd {
        line-height: 31px;
        width: auto;
    }

    #detail .profile .multiLine {
        line-height: 1.1;
        padding-top: 3px;
    }

    #detail .voice {
        width: 95%;
        padding: 5%;
        margin: 0 auto 5%;
    }

    #detail .voice dl {
        margin-bottom: 4%;
    }

    #detail .voice dl:last-of-type {
        margin-bottom: 0;
    }

    #detail .voice dl dt {
        float: left;
        width: 58%;
    }

    #detail .voice dl dd {
        width: 40%;
        float: left;
    }

    #detail .voice dl dd>div {
        float: left;
        width: 22%;
        margin-left: 4%;
    }

    /* navi */
    #navi .stage .inner {
        position: relative;
        padding-top: 5%;
    }

    #navi .btnChange {
        width: 71.875%;
        margin: 0 auto 3%;
    }

    #navi .btnShare {
        width: 71.875%;
        margin: 0 auto;
    }

    /* charaList */
    #charaList .stage .inner {
        padding-bottom: 10%;
    }

    #charaList .stage .bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/character/detail/list_bg.png);
    }

    #charaList .stage h2 {
        width: 92.1875%;
        padding-top: 5%;
        margin: 0 auto 2%;
    }

    #charaList .stage .unit:not(:first-of-type) {
        margin-top: 10%;
    }

    #charaList .stage .unit h3 {
        margin: 0 auto 1%;
    }

    #charaList .stage .unit ul {
        text-align: center;
    }

    #charaList .stage .unit ul li {
        width: 40%;
        margin: 4% 1% 0;
    }

    #charaList .stage .unit ul li p {
        font-size: 1.1rem;
        margin-top: 5%;
    }

    #detail .arrowL {
        top: 2.5%;
        bottom: 0;
        left: -5%;
        width: 18.75%;
        z-index: 2;
    }

    #detail .arrowR {
        top: 2.5%;
        right: -5%;
        width: 18.75%;
        z-index: 2;
    }

}