@charset "UTF-8";

/*
*  LAST ALLIANCE
*  RESPONSIVE OVERRIDES (試作 / index_responsive.html 専用)
*  既存 layout.css / layout_common.css には手を加えず、
*  スマホ幅のみメディアクエリで上書きする。
*/

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

    html, body {
        overflow-x: hidden;
    }

    #wrapper {
        padding: 90px 0 0 0;
    }

    .plot {
        min-width: 0;
        width: 100%;
    }

    .plot .contents {
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
    }

    .prop {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }

    /*-------------------- header --------------------*/
    #header {
        height: auto;
        min-height: 90px;
        padding-bottom: 10px;
        background-size: auto 100%;
    }
    #header h1 {
        margin-top: 12px;
        height: auto;
    }
    #header h1 img {
        max-width: 55%;
        height: auto;
    }
    #header #navi {
        position: static;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px 0 0 0;
    }
    #header #navi li {
        float: none;
        margin: 4px 6px;
    }
    #header #navi li img {
        max-height: 22px;
        width: auto;
    }
    #header #navi_sns {
        position: static;
        display: flex;
        justify-content: center;
        margin-top: 8px;
    }
    #header #navi_sns li {
        margin: 0 6px;
    }

    /*-------------------- main --------------------*/
    #top {
        height: 65vw;
        min-height: 220px;
    }
    #top .contents {
        position: relative;
        z-index: 2;
        padding: 30px 0;
    }
    #top h2 {
        padding-top: 0;
    }
    #top h2 img {
        max-width: 90%;
        height: auto;
    }
    #top .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #main_image, #main_image li {
        height: 100%;
    }
    #main_image li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /*-------------------- information --------------------*/
    #information {
        height: auto;
        background: none;
        margin-top: 20px;
        padding: 0 0 20px 0;
    }
    #information h2 {
        margin: 0 0 20px 0;
    }
    #information h2 img {
        max-width: 70%;
        height: auto;
    }
    #information #topics {
        position: static;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto 20px auto;
        border: none;
        padding: 0;
        text-align: center;
    }
    #information #topics img {
        max-width: 100%;
        height: auto;
        display: inline-block;
    }
    #information #topics p {
        text-align: center;
    }
    #information #news {
        position: static;
        width: 100%;
    }
    #information #news .news_article {
        float: none;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        min-height: 0;
        padding: 30px 0 12px 0;
        margin: 0 0 20px 0;
        border-left: none;
        border-bottom: 1px solid #333;
    }
    #information #news .divLink {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #information #news .date {
        position: absolute;
        top: 0;
        left: 0;
    }
    #information #news .c_title {
        position: static;
        padding-left: 0;
        margin-bottom: 8px;
    }
    #information #news .detail {
        position: static;
        width: 100%;
        height: auto;
        overflow: visible;
        padding-left: 0;
    }
    #information #news .detail img {
        width: 240px;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /*-------------------- information2 --------------------*/
    #information2 {
        height: auto;
        background: none;
        margin-top: 20px;
        padding-bottom: 20px;
    }
    #information2 #schedule,
    #information2 #twitter,
    #information2 #merch {
        position: static;
        width: 100%;
        box-sizing: border-box;
        border-left: none;
        padding-left: 0;
        margin: 0 0 20px 0;
        height: auto;
    }
    #information2 #tw {
        display: none;
    }
    #information2 #merch {
        color: #fff;
        font-size: 11px;
        text-align: center;
    }
    #information2 #schedule .date,
    #information2 #schedule .place {
        color: #fff !important;
    }
    #information2 #schedule h3 img {
        filter: invert(1);
    }

    /*-------------------- discography --------------------*/
    #discography {
        height: auto;
        background: none;
        margin-top: 20px;
        padding-bottom: 20px;
    }
    #discography h2 {
        margin: 0 0 20px 0;
    }
    #discography h2 img {
        max-width: 70%;
        height: auto;
    }
    #discography .contents {
        width: 100% !important;
    }
    #discography ul {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #discography li {
        float: none;
        margin: 8px;
    }
    #discography li img {
        width: 100px;
        height: 100px;
    }

    /*-------------------- biography --------------------*/
    #biography {
        height: auto;
        margin-top: 20px;
        padding-top: 20px;
    }
    #biography .contents {
        width: 100% !important;
    }
    #biography h2 {
        margin: 0 0 20px 0;
        text-align: center !important;
    }
    #biography .bg img {
        display: none;
    }
    .pp {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #bio1, #bio2 {
        margin: 0 0 20px 0;
        position: static;
    }
    #bio1 img, #bio2 img {
        max-width: 100%;
        height: auto;
    }
    .bg2 {
        position: static !important;
    }
    #bioInner {
        margin: 0;
        width: 100%;
    }
    #bioInner .bg2 img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    #biography h3 {
        text-align: center;
        padding-top: 20px;
    }
    #biography h3 img {
        max-width: 80%;
        height: auto;
    }
    #biography #names {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #biography #names li {
        float: none;
        margin: 0 10px 10px 0;
    }
    .biotxt {
        padding: 20px 16px 0 16px;
        box-sizing: border-box;
    }

    /*-------------------- media --------------------*/
    #media {
        height: auto !important;
        background: none;
    }
    #media .contents {
        width: 100% !important;
    }
    .youtube {
        width: 100%;
        margin: 20px auto 0;
    }

    /*-------------------- footer --------------------*/
    #footer {
        height: auto;
        background: url(../images/footer/sp_foot.png) repeat center top;
        margin-top: 20px;
        padding-top: 20px;
    }
    #footer #main p:last-child {
        display: none;
    }
    #footer .copyright-mobile {
        display: block;
        text-align: center;
        margin-top: 10px;
    }
    #footer #menu {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    #footer #links,
    #footer #main,
    #footer #social {
        position: static;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 30px auto;
        height: auto;
    }
    #footer #links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 16px;
        height: auto;
    }
    #footer #links h3 {
        width: 100%;
    }
    #footer #links li {
        margin-bottom: 0;
    }
}