@charset "utf-8";

.stage .inner {
    max-width: 1600px;
}

/* mv */
#mv {
    overflow: hidden;
    background-color: #fff;
}

#mv img {
    width: 100%;
}

#mv .stage {
    padding-top: 66.6875%;
}

#mv .bg_wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#mv .bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/mv_bg_hounds.jpg);
    background-size: cover;
}

#mv .bg2 {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/mv_bg.jpg);
    background-size: cover;
}

#mv .bg3 {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/mv_bg_silvervine.jpg);
    background-size: cover;
}

#mv .bg4 {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/mv_bg_agf_pc.jpg);
    background-size: cover;
}

#mv .agf_logo {
    position: absolute;
    top: 80px;
    left: 0.5%;
    width: 13.5%;
}

#mv .agf_text {
    position: absolute;
    top: 75px;
    right: 6.7%;
    width: 40%;
}

#mv .agf_btn {
    position: absolute;
    top: 80px;
    right: .5%;
    width: 6.2%;
}

#mv .title {
    position: absolute;
    top: 69.5%;
    left: 4%;
    margin: auto;
    width: 52.5%;
}

#mv .subTitle {
    position: absolute;
    top: 36.55107778819119%;
    left: 0;
    right: 0;
    margin: auto;
    width: 75%;
}

#mv .txt {
    position: absolute;
    width: 41.9375%;
    top: 56.697282%;
    left: 54.5%;
}

#mv .applyBox {
    position: absolute;
    width: 37%;
    top: 68.69728209934396%;
    left: 58%;
    padding-top: 19.172259%;
}

#mv .applyBox .dlBox {
    width: 89.52702702702703%;
    position: absolute;
    left: 5%;
    right: 0;
    top: -30%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    background-color: rgb(185 206 255 / 60%);
    border-radius: 10px;
    box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 0.3) inset;
    padding-bottom: 20px;
    text-align: center;
}

#mv .applyBox .dlBox p {
    width: 70%;
    margin: 0 auto 10px;
}

#mv .applyBox .dlBox ul {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: -44%;
    z-index: -1;
}

#mv .applyBox .dlBox ul li {
    display: inline-block;
    width: 40%;
    margin: 0 2%;
}

#mv .sns {
    width: 89.52702702702703%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 22.424324%;
}

#mv .sns li {
    width: 30.94339622641509%;
    float: left;
}

#mv .sns li:not(:last-of-type) {
    margin-right: 3.58490566037736%;
}

#mv .btnDetail {
    width: 23.3%;
    position: absolute;
    margin: auto;
    right: -4.5%;
    top: -10%;
}

#mv .btnRt {
    width: 76.22641509433962%;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 80%;
}

#mv .apply_inner {
    top: 24%;
}

/* news */
#news .stage {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/news_bg.jpg);
    background-size: cover;
}

#news .newsInner {
    padding: 5px 0 6.5625%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

#news .title {
    width: 36.875%;
    margin: auto;
    padding: 0 0 10px;
}

#news .newsList {
    width: 1220px;
    padding: 0 10px;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}

#news .newsList dl {
    float: left;
    width: 280px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.2);
}

#news .newsList dl>a {
    display: block;
    transition: 0.5s ease;
    box-shadow: inset 0 0 0 0 #ffffff00, inset 0 0 0 0 #ffffff00;
}

#news .newsList dl>a:hover {
    box-shadow: inset 0 0 30px 0 #ffffff, inset 0 0 5px 0 #ffffff;
    opacity: 0.8;
}

#news .newsList dl:not(:last-of-type) {
    margin-right: 26px;
}

#news .newsList dl dt {
    background-color: #555;
    padding-top: 56.25%;
    position: relative;
    overflow: hidden;
}

#news .newsList dl dt img {
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#news .newsList dl dd {
    background-color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    color: #4f455c;
    line-height: 1.5;
    padding: 5px 10px 20px;
}

#news .newsList dl dd>ul {
    margin: 0 0 10px;
}

#news .newsList dl dd>ul>li {
    float: left;
    font-size: 1.4rem;
    line-height: 30px;
}

#news .newsList dl dd>ul>li.icon {
    float: right;
}

#news .btnMore {
    position: absolute;
    bottom: 3%;
    left: 0;
    right: 0;
    width: 22.75%;
    margin: auto;
}

/* movie */
#movie .stage {
    padding-top: 846px;
}

#movie .title {
    position: absolute;
    top: 0.375%;
    left: 0;
    right: 0;
    width: 36.875%;
    margin: auto;
}

#movie .videoArea {
    overflow: hidden;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;

    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/mv_bg.jpg);
    background-size: cover;
    background-position: center center;
}

#movie video {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    /* Safari用 */
    transform: translateY(-50%);
    width: 100%;
}

#movie .frame {
    width: 100%;
    height: 100.5%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/movie_mask.png);
    background-repeat: repeat-x;
    background-size: cover;
}

#movie .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/dot.png);
    background-repeat: repeat;
    visibility: visible !important;
}

#movie .btn {
    position: absolute;
    left: 0;
    right: 0;
    top: 40.78014184397163%;
    margin: auto;
    width: 6.5%;
}

#movie .btn:hover img {
    transform: scale(0.8);
}

#movie .txt {
    position: absolute;
    left: 0;
    right: 0;
    top: 55.91016548463357%;
    margin: auto;
    width: 19.8125%;
}

#movie .btnMore {
    position: absolute;
    bottom: 3.3096926713948%;
    left: 0;
    right: 0;
    width: 22.75%;
    margin: auto;
}

/* character */
#character .stage {
    padding-top: 1276px;
}

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

#character .title {
    position: absolute;
    top: 8.15047021943574%;
    left: 0;
    right: 0;
    width: 36.875%;
    margin: auto;
}

#character .logo01 {
    position: absolute;
    left: 5%;
    top: -1%;
    width: 39.35714285714286%;
}

#character .unit01 {
    position: absolute;
    right: 56.175%;
    top: 3.702194%;
    width: 49.8755%;
}

#character .logo02 {
    position: absolute;
    left: 62.8125%;
    top: -1%;
    width: 37.375%;
}

#character .unit02 {
    position: absolute;
    left: 50.75%;
    top: 2.383699%;
    width: 57.8125%;
}

#character .unit03 {
    position: absolute;
    right: 34.5%;
    top: 27.529467%;
    width: 79.4375%;
}

#character .logo03 {
    position: absolute;
    left: 9.375%;
    top: 80.32915360501567%;
    width: 34.125%;
}

#character .unit04 {
    position: absolute;
    left: 43.4%;
    top: 26.629467%;
    width: 61.75%;
}

#character .logo04 {
    position: absolute;
    left: 65.625%;
    top: 73.27586206896552%;
    width: 16.9375%;
}

#character .btnMore {
    position: absolute;
    bottom: 1.88087774294671%;
    left: 0;
    right: 0;
    width: 22.75%;
    margin: auto;
}

/* SOTYR */
#story .stage {
    padding-top: 602px;
    position: relative;
}

#story .bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/story_bg.jpg);
}

#story .title {
    position: absolute;
    top: 0.375%;
    left: 0;
    right: 0;
    width: 36.875%;
    margin: auto;
}

#story .mic {
    position: absolute;
    width: 22.625%;
    bottom: 0;
    right: 9.0625%;
}

#story .txt01 {
    position: absolute;
    top: 38.1%;
    left: 5.35%;
    width: 71.375%;
}

#story .btnMore {
    position: absolute;
    bottom: 3.98671096345515%;
    left: 0;
    right: 0;
    width: 22.75%;
    margin: auto;
}

/* system */
#system .stage {
    padding-top: 492px;
}

#system .bg {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/system_bg.jpg);
}

#system .title {
    position: absolute;
    top: 0.375%;
    left: 0;
    right: 0;
    width: 36.875%;
    margin: auto;
}

#system .txt {
    position: absolute;
    top: 55.89430894308943%;
    left: 0;
    right: 0;
    width: 13.75%;
    margin: auto;
}

#system .btnMore {
    position: absolute;
    bottom: 3.98671096345515%;
    left: 0;
    right: 0;
    width: 22.75%;
    margin: auto;
}

/* info */
#info {
    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/info_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 50px 10px 500px;
}

#info>ul {
    max-width: 1140px;
    margin: 0 auto;
}

#info>ul>li {
    float: left;
    width: 47.5%;
}

#info>ul>li.tweetBox {
    position: relative;
}

#info>ul>li.tweetBox>.head {
    margin: 0 0 15px;
}

#info>ul>li.tweetBox>.head li {
    float: left;
}

#info>ul>li.tweetBox>.head li:last-of-type {
    float: right;
}

#info>ul>li.tweetBox>iframe {
    height: 900px !important;
}

#info>ul>li.staff {
    /* float: right; */
    float: none;
    margin: 0 auto;
    width: 80%;
}

#info>ul>li.staff>dl {
    margin: 0 0 15px;
}

#info>ul>li.staff>dl>dt {
    font-size: 2.0rem;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;

    background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/info_cap.png);
    background-repeat: no-repeat;
    background-position: left top;
}

#info>ul>li.staff>dl>dd {
    font-size: 1.4rem;
    padding-left: 15px;
    color: #fdeff2;
}

#info>ul>li.staff>dl>dd>p {
    line-height: 2.0;
}

#info>ul>li.staff>dl>dd>p:last-of-type {
    margin-bottom: 0;
}

#info>ul>li.staff>dl>dd .indent01 {
    padding-left: 7.0em;
    text-indent: -7.0em;
}

#info>ul>li.staff>dl>dd .indent02 {
    padding-left: 2.0em;
}

#info>ul>li.staff>dl>dd .indent02>span {
    display: inline-block;
    padding-left: 5.4em;
    text-indent: -5.4em;
}

#info>ul>li.staff>dl.product>dd:not(:first-of-type) {
    margin-top: 15px;
    line-height: 1.3;
}

#info .dlBox {
    width: 89.52702702702703%;
    margin: 0 auto 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    background-color: rgb(185 206 255 / 60%);
    border-radius: 10px;
    box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 0.3) inset;
    text-align: center;
    padding-bottom: 20px;
}

#info .dlBox p {
    width: 65%;
    margin: 0 auto 10px;
}

#info .dlBox ul {
    text-align: center;
}

#info .dlBox ul li {
    display: inline-block;
    width: 200px;
    margin: 0 10px 10px;
}

@media screen and (max-width: 1599px) {
    #news .stage {
        /* padding-top: 41.1875%; */
    }

    #movie .stage {
        padding-top: 52.875%;
    }

    #character .stage {
        padding-top: 79.5%;
    }

    #story .stage {
        padding-top: 37.625%;
    }

    #system .stage {
        padding-top: 30.75%;
    }
}

@media screen and (max-width: 1199px) {
    #news .newsList {
        width: 80%;
    }

    #news .newsList dl {
        width: 48%;
        margin-top: 0;
    }

    #news .newsList dl>dt img {
        width: 100%;
    }

    #news .newsList dl:not(:last-of-type) {
        margin-right: 0;
    }

    #news .newsList dl:nth-of-type(even) {
        float: right;
    }

    #news .newsList dl:nth-of-type(n+3) {
        margin-top: 30px;
    }

    #news .btnMore {
        bottom: 1.4%;
    }
}

/* タブレット */
@media screen and (max-width: 1139px) {
    #info>ul>li.staff>dl>dd>p br {
        display: none;
    }

    #info {
        padding-bottom: 510px;
    }
}

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

    /* mv */
    #mv img {
        width: 100%;
    }

    #mv .stage {
        padding-top: 142.1875%;
    }

    #mv .bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/sp/mv_bg_hounds.jpg);
        background-size: cover;
    }

    #mv .bg2 {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/sp/mv_bg.jpg);
        background-size: cover;
    }

    #mv .bg3 {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/sp/mv_bg_silvervine.jpg);
        background-size: cover;
    }

    #mv .bg4 {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/sp/mv_bg_agf_sp.jpg);
        background-size: cover;
    }

    #mv .agf_text {
        position: absolute;
        top: 50.5%;
        right: auto;
        left: 2.5%;
        width: 80%;
    }

    #mv .agf_btn {
        position: absolute;
        top: 54.5%;
        right: 2.5%;
        width: 15%;
    }

    #mv .title {
        top: 0%;
        left: 0;
        right: 0;
        width: 59.6875%;
    }

    #mv .subTitle {
        position: absolute;
        top: 21.31868131868132%;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
    }

    #mv .txt {
        top: 48.35164835164835%;
        left: 0%;
        right: 0%;
        margin: auto;
        width: 84.0625%;
    }

    #mv .applyBox {
        width: 92.1875%;
        top: 59.897282%;
        left: 0;
        right: 0;
        margin: auto;
        padding-top: 53.172259%;
    }

    #mv .applyBox .dlBox {
        top: -20%;
    }

    #mv .applyBox .dlBox p {
        width: 70%;
        margin: 0 auto 10px;
    }

    #mv .applyBox .dlBox ul {
        text-align: center;
        top: -40%;
        height: 23vh;
    }

    #mv .applyBox .dlBox ul li {
        display: inline-block;
        width: 45%;
        margin: 0 2%;
    }

    #mv .sns {
        width: 89.52702702702703%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 22.424324%;
    }

    #mv .sns li {
        width: 30.94339622641509%;
        float: left;
    }

    #mv .sns li:not(:last-of-type) {
        margin-right: 3.58490566037736%;
    }

    #mv .btnDetail {
        width: 23.3%;
        position: absolute;
        margin: auto;
        right: -4.5%;
        top: -10%;
    }

    #mv .btnRt {
        width: 76.22641509433962%;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 80%;
    }

    #mv .apply_inner {
        top: 25.5%;
    }

    /* news */
    #news .stage {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/sp/news_bg.jpg);
        background-size: cover;
    }

    #news .newsList {
        width: 100%;
        padding: 0 10px;
    }

    #news .newsInner {
        width: 100%;
        padding: 5px 0 20%;
    }

    #news .title {
        width: 92.1875%;
        padding: 0 0 10px;
    }

    #news .newsList dl {
        width: 48%;
    }

    #news .newsList dl dd {
        font-size: 0.9rem;
        padding: 5px;
    }

    #news .newsList dl dd>ul {
        margin: 0 0 5px;
    }

    #news .newsList dl dd>ul>li {
        font-size: 0.9rem;
        line-height: 15px;
    }

    #news .newsList dl dd>ul>li.icon {
        width: 30%;
    }

    #news .newsList dl:nth-of-type(n+3) {
        margin-top: 15px;
    }

    #news .btnMore {
        bottom: 3%;
        width: 56.25%;
    }

    /* movie */
    #movie .stage {
        padding-top: 93.75%;
    }

    #movie .title {
        top: 1.12107623318386%;
        width: 92.1875%;
    }

    #movie .videoArea video {
        top: 46%;
        width: 101%;
    }

    #movie .spVideo {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        /* background-image: url(/wp-content/themes/ikemen/title/live/original/movie/sp/index.gif); */
        background-size: cover;
        background-position: center center;
    }

    #movie .frame {
        width: 100%;
        height: 100%;
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/sp/movie_mask.png);
        background-size: cover;
    }

    #movie .mask {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/dot_sp.png);
    }

    #movie .btn {
        top: 38.780142%;
        width: 16.25%;
    }

    #movie .txt {
        top: 57.910165%;
        width: 49.53125%;
    }

    #movie .btnMore {
        bottom: 4%;
        width: 56.25%;
    }

    /* character */
    #character .stage {
        padding-top: 91.5625%;
    }

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

    #character .title {
        top: 1.12107623318386%;
        width: 92.1875%;
    }

    #character .logo01 {
        position: absolute;
        left: 3%;
        top: 12%;
        width: 39.35714285714286%;
    }

    #character .unit01 {
        position: absolute;
        left: -6.8%;
        top: 17.3%;
        width: 49.8755%;
    }

    #character .unit02 {
        left: 47.55%;
        top: 16.783699%;
        width: 57.8125%;
    }

    #character .logo02 {
        top: 17.91808873720137%;
        left: 61%;
    }

    #character .unit03 {
        right: 35.04375%;
        top: 41.527304%;
        width: 79.4375%;
    }

    #character .logo03 {
        left: 9.375;
        top: 70.64846416382253%;
        width: 34.21875%;
    }

    #character .unit04 {
        position: absolute;
        left: 43.04375%;
        top: 41.227304%;
        width: 61.75%;
    }

    #character .logo04 {
        left: 67.8125%;
        top: 60.580204778157%;
        width: 16.875%;
    }

    #character .btnMore {
        bottom: 5.97269624573379%;
        width: 56.25%;
    }

    /* SOTYR */
    #story .stage {
        padding-top: 77.5%;
    }

    #story .bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/sp/story_bg.jpg);
    }

    #story .title {
        top: 1.12107623318386%;
        width: 92.1875%;
    }

    #story .mic {
        width: 31.25%;
        right: -2.9375%;
    }

    #story .txt01 {
        top: 35.67741935483871%;
        left: 2%;
        width: 83.125%;
    }

    #story .btnMore {
        bottom: 6.05645161290323%;
        width: 56.25%;
    }

    /* system */
    #system .stage {
        padding-top: 47.1875%;
    }

    #system .bg {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/sp/system_bg.jpg);
        background-position: center top;
    }

    #system .title {
        top: 1.12107623318386%;
        width: 92.1875%;
    }

    #system .txt {
        top: 76.369507%;
        width: 34.375%;
    }

    #system .btnMore {
        bottom: 6.05645161290323%;
        width: 56.25%;
    }

    /* info */
    #info {
        background-image: url(/wp-content/themes/ikemen/title/live/original/images/index/info_bg.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

        padding: 20px 10px 30px;
    }

    #info>ul {
        margin: 0 auto;
    }

    #info>ul>li {
        float: none;
        width: 100%;
    }

    #info>ul>li.tweetBox {
        margin-bottom: 20px;
    }

    #info>ul>li.tweetBox>.head {
        margin: 0 0 8px;
    }

    #info>ul>li.tweetBox>.head li:first-of-type {
        width: 21.25%;
    }

    #info>ul>li.tweetBox>.head li:last-of-type {
        width: 32.5%;
    }

    #info>ul>li.tweetBox>iframe {
        height: 245px !important;
    }

    #info>ul>li.staff {
        float: none;
    }

    #info>ul>li.staff>dl {
        margin: 0 0 10px;
    }

    #info>ul>li.staff>dl>dt {
        font-size: 1.0rem;
        height: 25px;
        line-height: 25px;
        padding-left: 7px;

        background-size: contain;
    }

    #info>ul>li.staff>dl>dd {
        font-size: 0.9rem;
        padding-left: 7px;
    }

    #info>ul>li.staff>dl>dd>p {
        line-height: 1.7;
    }

    #info>ul>li.staff>dl.product>dd:not(:first-of-type) {
        margin-top: 10px;
        line-height: 1.2;
    }

    #info .dlBox {
        margin-bottom: 20px;
    }

    #info .dlBox p {
        width: 85%;
        margin: 0 auto 10px;
    }

    #info .dlBox ul {
        text-align: center;
    }

    #info .dlBox ul li {
        display: inline-block;
        width: 40%;
        margin: 0 5px;
    }
}