@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/
ul{
    margin:0;
    padding: 0;
    list-style: none;
}

a{
    color: #fff;
}

a:hover,
a:active{
    text-decoration: none;
}

section{}


.bxslider{   
    margin:0px;
}

.bx-wrapper {
    max-width: 960px !important;
    margin: 0 auto;
    position: relative;
}

.bx-wrapper img {
    width:100%;
}

.bx-viewport {
    max-height: 900px;
}

.container_marquee_club_head{
    margin: 0px auto;
    /* padding-top: 100px; */
    background:#000;
    color: #fff;
}

.head_warpper{
    display: flex;
    padding-top: 100px;
    padding-bottom: 100px;
}
.head_info{ width: 50%; padding-top: 2.5vw;}
.head_image{ width: 30%; margin: 0 40px 0 auto;}
.head_image img{ max-width: 40%; margin-right: 30px;}

.head_warpper_bya{
    padding-top: 50px;
    padding-bottom: 50px;
}
.head_image_bya{ width: 10%; padding-top: 4vw; margin-left: auto; margin-right: auto;}
.head_image_bya img{ max-width: 100%;}


.container_marquee_club_head p{
    font-size: 1.5vw;
    line-height: 220%;
    letter-spacing: 0.1em;
}

.container_marquee_club_info{background-color: #efeedf;}
.marquee_club_info_contents{ width: 100%; padding-top: 80px; padding-bottom: 80px;}
.container_marquee_club_info p{
    font-size: 18px;
    text-align: center;
}



.container_marquee_club_novelty{
    margin: 0px auto;
    padding-bottom: 50px;
    background:#404040;
    color: #fff;
}

.novelty_warpper{
    display: flex;
}
.novelty_info{ width: 50%; padding-top: 12vw;}
.novelty_image{ width: 50%;}
.novelty_image img{ max-width: 70%;}


.container_marquee_club_oficial{
    margin: 0px auto;
    padding-bottom: 50px;
    /* background:#404040; */
    background:#000;
    color: #fff;
}
.oficial_info{ width: 50%; padding-top: 5vw; padding-bottom: 2vw; margin-left: auto; margin-right: auto; text-align: center;}



h2.main_title{
    text-align: center;
    font-size: 3vw;
    padding-top: 80px;
    margin-bottom: 80px;
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.1em;
    color: #0b172c;
}


h3.sub_title{
    text-align: center;
    font-size: 2vw;
    margin-bottom: 80px;
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.1em;
    color: #fff;
}
h3.sub_title span{
    font-size: 1.2vw;
    color: #fff;
}


.novelty_info p{
    text-align: center;
    font-size: 0.8vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.1em;
    color: #fff;
    line-height: 180%;
}


.container_marquee_club_Lineup{
    margin: 0px auto;
    padding-bottom: 50px;
    /*background:#000;*/
    color: #fff;
    background-image: 
        url(https://img.abc-mart.net/img/event/2023/2302_bya_marquee_club/back.jpg);
    background-repeat:repeat;
    background-position: center top;
    background-size: cover;
}
.Lineup_warpper{
    display: flex;
    width: 40%;
    margin: 80px auto 0 auto;
}
.Lineup_info{ width: 50%; padding-top: 3vw;}
.Lineup_image{ width: 50%; margin-bottom: 30px;}
.Lineup_image img{ width: 200px;}



h3.sub_title_Lineup{
    text-align: center;
    font-size: 2vw;
    margin-bottom: 80px;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.1em;
    color: #fff;
}
h3.sub_title_Lineup span{
    font-size: 1.2vw;
    color: #333333;
}


.item_warpper{
    display: flex;
    flex-wrap: wrap;
    width: 71%;
    margin: 0 auto;
    justify-content: space-between;
    padding: 80px;
    background-color: #efeedf;
}

.item_warpper_contents{width: 45%;}

.item_warpper_contents:nth-child(n + 3){margin-top: 80px;}

.item_warpper_contents img {max-width: 100%; margin: 0 auto;}

.item_warpper_contents p{color: #0b172c; font-size: 16px; margin-top: 30px;}

.p_box{display: block; height: 300px;}

.item_warpper_night{
    display: block;
    width: 35%;
    margin: 0 auto;
    justify-content: center;
}

.item_warpper_contents_night {width: 100%;}
.item_warpper_contents_night img {max-width: 100%; margin: 0 auto;}



.brand-product-detail-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 70%;
    margin: 30px auto;
}

.brand-product-detail-btn a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border: 1px solid #d71418;
    border-radius: 4px;
    background-color: #d71418;
    color: #fff;
    font-size: 1vw;
    transition: background 1s;
}

.brand-product-detail-btn a:hover {
    background-color: #7e1618;
    color: #fff;
    text-decoration: none;
}




.oficial_brand-product-detail-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 90%;
    margin: 30px auto;
}

.oficial_brand-product-detail-btn a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 90%;
    height: 80px;
    border: 1px solid #d71418;
    border-radius: 4px;
    background-color: #d71418;
    color: #fff;
    font-size: 1vw;
    transition: background 1s;
}

.oficial_brand-product-detail-btn a:hover {
    background-color: #7e1618;
    color: #fff;
    text-decoration: none;
}


.pc_lp {
    display: block;
}
.sp_lp {display: none;}



.container_marquee_club_shop {
    margin: 0px auto;
    /* padding: 50px 0; */
    padding: 50px 0 10px;
    background: #d02827;
    color: #fff;
}

.shop_warpper {
    margin: 0 auto;
    padding: 50px auto;
    width: 70%;
    text-align: center;
}

/*
.btn-3 {
    width: 70%;
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 1.5vw;
    margin: 0 auto;
    border-bottom: 0.5px solid;
}
*/
.shop_warpper ul {
    margin: 0 auto 30px;
}

.shop_warpper ul li {
    margin: 10px 20px;
    width: 40%;
    display: inline-block;
    font-size: 1vw;
}

.shop_warpper ul li a{
    color: #fff !important;
}



.container_marquee_club_shop .open_h3{
    border-bottom: 1px solid #fff;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    padding-bottom: 30px;
    text-align: center;
    font-size: 1.5vw;
    margin-bottom: 80px;
    letter-spacing: 0.1em;
    color: #fff;
}

.container_marquee_club_shop{
    font-family: 'Noto Sans JP', sans-serif;
}


.container_marquee_club_shop .open_h3:after, 
.container_marquee_club_shop .open_h3.active:after {
    font-size: 18px;
    margin-left: 10px;
}

.container_marquee_club_shop .open_h3.active::after {
    content: "▲";
}

.container_marquee_club_shop .open_h3::after {
    content: "▼";
}

.container_marquee_club_shop .open-3 {
    padding: 0px 10px 15px 10px;
}

.copy-right{ background-color: #d02827;}
.copy-right-contents{ width: 1500px; margin: 0 auto; padding: 50px;}
.copy-right-contents p{ font-size: 14px;}
/*
.container_marquee_club_shop .open-3 li{
    float: left;
    width: 50%;
    padding: 10px 0px; 
}
.container_marquee_club_shop .open-3 a{
    color: #0066CC;
    text-decoration: underline;
}
*/

/*////////////////////////////////////////////////*/

@media only screen and (max-width: 1200px) {

    .container_marquee_club_head p{
        font-size: 2vw;
    }

    h2.main_title{
        font-size: 4vw;
    }

    h2.main_title_night{
        font-size: 4vw;
    }
    
    h3.sub_title{
        font-size: 3vw;
        margin-bottom: 30px;
    }
    h3.sub_title span{
        font-size: 2vw;
    }

    h3.oficial_sub_title{
        font-size: 3vw;
    }
    
    .novelty_info {
        padding-top: 6vw;
    }
    
    .Lineup_warpper{
        display: flex;
        width: 60%;
        margin: 80px auto 0 auto;
    }
    .Lineup_info{ width: 50%; padding-top: 4vw;}
    .Lineup_image{ width: 50%; margin-bottom: 50px;}
    .Lineup_image img{ width: 180px;}


    .Lineup_warpper_night{
        display: flex;
        width: 60%;
        margin: 80px auto 0 auto;
    }

    .Lineup_info_night{ width: 75%; padding-top: 5vw;}
    .Lineup_image_night{ width: 25%; margin-bottom: 50px; text-align: right; padding-right: 50px;}
    .Lineup_image_night img{ width: 180px; }


    h3.sub_title_Lineup{
        font-size: 3vw;
    }

    h3.sub_title_Lineup span{
        font-size: 2.2vw;
    }


    .copy-right-contents{ width:960px; margin: 0 auto; padding: 50px;}
    .copy-right-contents p{ font-size: 14px;}

}

/*////////////////////////////////////////////////*/

@media only screen and (max-width: 760px) {


    /* .container_marquee_club_head{
        padding-top: 30px;
    } */

    .head_warpper{
        width: 95%;
        margin: 0 auto;
        flex-direction: column;
        padding-top: 0px;
        padding-bottom: 50px;
    }
    .head_info{ width: 100%; padding-top: 5vw;}
    .head_image{ width: 70%; margin: 0 auto;}
    .head_image img{ max-width: 40%; margin: 10px;}


    .head_warpper_bya{
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .head_image_bya{ width: 30%; padding-top: 4vw; margin-left: auto; margin-right: auto;}
    .head_image_bya img{ max-width: 100%;}

    
    
    .container_marquee_club_head p{
        text-align: center;
        font-size: 3vw;
    }

    .container_marquee_club_info{background-color: #efeedf; }
    .marquee_club_info_contents{ width: 90%; padding-top: 30px; padding-bottom: 30px; padding-left: 5%; padding-right: 5%;}
    .container_marquee_club_info p{
        font-size: 16px;
        text-align: left;
    }
    

    .container_marquee_club_novelty{
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .novelty_warpper{
        width: 95%;
        margin: 0 auto;
        flex-direction: column;
    }
    .novelty_info{ width: 100%; padding-top: 3vw; margin-bottom: 50px;}
    .novelty_image{ width: 50%; margin: 0 auto;}
    .novelty_image img{ max-width: 100%;}


    .novelty_info p{
        text-align: center;
        font-size: 3vw;
    }


    h2.main_title{
        text-align: center;
        font-size: 9vw !important;
        padding-top: 0px;
        margin-bottom: 40px;
    }
    
    h3.oficial_sub_title{
        text-align: center;
        font-size: 4vw;
        margin-bottom: 30px;
    }

    .oficial_info{ width: 80%; padding-top: 12vw; margin-left: auto; margin-right: auto; text-align: center;}


    .container_marquee_club_Lineup{
        margin: 0px auto;
        padding-bottom: 50px;
        /*
        background:#000;
        */
        color: #fff;
        padding-top: 30px;
        background-image: 
            url(https://img.abc-mart.net/img/event/2023/2302_bya_marquee_club/back_s.jpg);
        background-repeat:repeat;
        background-position: center top;
        background-size: contain;
    }
    .Lineup_warpper{
        display: flex;
        width: 80%;
        margin: 60px auto 0 auto;
    }
    .Lineup_info{ width: 70%; padding-top: 6vw;}
    .Lineup_image{ width: 30%; margin-bottom: 30px;}
    .Lineup_image img{ width: 80px;}


    h3.sub_title{
        text-align: center;
        font-size: 6vw;
        /* margin-bottom: 80px; */
        margin-bottom: 40px;
        font-family: 'Roboto', sans-serif;
        letter-spacing: 0.1em;
        color: #fff;
    }
    h3.sub_title_Lineup span{
        font-size: 3vw;
        color: #333333;
    }

    h3.sub_title_Lineup{
        text-align: center;
        font-size: 6vw;
        /* margin-bottom: 80px; */
        margin-bottom: 40px;
        font-family: 'Noto Sans JP', sans-serif;
        letter-spacing: 0.1em;
        color: #fff;
    }

    .item_warpper{
        /* display: flex; */
        display: block;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
        padding: 50px 0px;
    }

    /* .item_warpper_contents{width: 45%;} */
    .item_warpper_contents{width: 70%; margin: 0 auto;}
    .item_warpper_contents img {max-width: 100%; margin: 0 auto;}
    .item_warpper_contents p{color: #0b172c; font-size: 13px; margin-top: 20px;}
    .item_warpper_contents:nth-child(n + 2){margin-top: 60px;}
    
    
    .item_warpper_night{
        display: block;
        width: 45%;
        margin: 0 auto;
        justify-content: center;
    }

    .item_warpper_contents_night {width: 100%;}
    .item_warpper_contents_night img {max-width: 100%; margin: 0 auto;}



    .brand-product-detail-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 90%;
        margin: 30px auto;
    }

    .brand-product-detail-btn a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        /* height: 30px; */
        height: 10vw;
        border: 1px solid #d71418;
        border-radius: 4px;
        background-color: #d71418;
        color: #fff;
        font-size: 4vw;
        font-weight: bold;
        transition: background 1s;
    }

    .brand-product-detail-btn a:hover {
        background-color: #7e1618;
        color: #fff;
        text-decoration: none;
    }
    
    
    

    .oficial_brand-product-detail-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        margin: 30px auto;
    }

    .oficial_brand-product-detail-btn a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        border: 1px solid #d71418;
        border-radius: 4px;
        background-color: #d71418;
        color: #fff;
        font-size: 4vw;
        font-weight: bold;
        transition: background 1s;
    }

    .oficial_brand-product-detail-btn a:hover {
        background-color: #7e1618;
        color: #fff;
        text-decoration: none;
    }
    
    .jender_link_wrap {
        margin-top: 0px;
    }

    .shop_warpper {
        margin: 0 auto;
        padding: 50px auto;
        width: 90%;
        text-align: center;
    }
    .shop_warpper ul li {
        margin: 10px 0px;
        width: 100%;
        font-size:4vw; 
    }

    .shop_warpper ul li a:hover {
        opacity: 0.5;
    }

    .container_marquee_club_shop .open_h3{
        border-bottom: 1px solid #fff;
        cursor: pointer;

        padding-bottom: 30px;
        text-align: center;
        font-size: 5vw;
        margin-bottom: 30px;
    }
    
    .copy-right-contents{ width: 90%; margin: 0 auto; padding: 30px;}
    .copy-right-contents p{ font-size: 12px;}

}

@media only screen and (max-width: 760px) {
    .pc_lp {
        display: none;
    }
    .sp_lp {
        display: block;
    }
}