@charset "utf-8";

/* CSS Document */

/* pcheader 調整用 */
@media screen and (max-width:1500px) {
    header {
        h2 {
            font-size: 18pt;
        }

        span {
            font-size: 18pt;
            display: block;
            margin-bottom: 8px;
        }
    }
}

@media screen and (max-width:1200px) {
    header {
        .pcheader {
            display: none;
       }

        .nav-wrapper {
            display: block;
        }
    }
}

/*-- line up ページ内で名前が２段になる用の @media --*/
@media screen and (max-width:940px) {
    .djname {
        display: flex;
        flex-direction: column;
    }

    .sjt_title {
        width: 0 auto;
        height: 0 auto;
    }
}


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

    h1 {
        font-size: 60pt;
    }

    /* ボタン黒背景用 */
    .btnarea {
        .btn {
            font-size: 14pt;

            .btnicon {
                margin-left: 0.5rem;
                margin-top: -6px;
                width: 14pt;
                height: 14pt;
            }
        }
    }

    /* ボタン白背景用 */
    .btnarea.white {
        .btn {
            font-size: 14pt;

            .btnicon {
                margin-left: 0.5rem;
                margin-top: -6px;
                width: 14pt;
                height: 14pt;
            }
        }
    }

    /* ボタンここまで */

    /* followbtn */
    .pc-followbtn {
        display: none !important;
    }

    .sp-followbtn {
        width: 80px;
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 100;
    }

    /* footer */
    footer {
        flex-direction: column;
        gap: 20px;

        h4 {
            font-size: 13pt;
        }
    }

    /* topページ */
    .top-page {


        .hederfollow {
            .sectitle {
                font-size: 30pt;
            }

            .about {
                .content {
                    .caption {
                        font-size: 32pt;
                    }
                }
            }

            .lineup {
                overflow: hidden;

                .performers {
                    display: flex;
                    flex-direction: column;

                    .performer {
                        position: static;

                        .photo {
                            position: static;
                        }

                        .info {
                            position: static;

                            .name {
                                font-size: 20pt;
                            }
                        }
                    }
                }
            }

            .ticketinfo {
                .wrapper {
                    .placecontent {
                        img {
                            margin-bottom: 40px;
                        }

                        .placeinfo {
                            display: flex;
                            flex-direction: column;
                        }
                    }
                }
            }

            .drink {

                .drinkwrapper {
                    position: initial;

                    .sectitle {
                        position: initial;
                    }

                    .drinktext {
                        position: initial;
                    }

                    .drinklineup {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        gap: 20px;

                        .flavor {
                            img {
                                padding-top: 5%;
                                height: 100%;
                                width: auto;
                                right: 0;
                                left: 60%;
                            }
                        }
                    }
                }

                .andmore {
                    .linktext {
                        h3 {
                            font-size: 24pt;
                        }
                    }
                }
            }

            .access {
                overflow: hidden;

                .accesswrapper {
                    .mapcontent {
                        flex-direction: column;

                        iframe {
                            width: 100%;
                        }

                        .mapinfo {

                            .storename,
                            .adress,
                            .tel {
                                a {
                                    pointer-events: all;
                                }
                            }

                            .storename {}
                        }
                    }
                }


                /*****Neon Circuit 吉祥寺とは****/
                .about_nc {
                    padding: 0px !important;
                    margin-top: 50px;

                    .nc_explain {

                        .nc_title {

                            .sp_only {
                                display: block !important;
                            }
                        }
                    }

                    .btnarea.white {
                        width: 90%;

                        .btntext {
                            font-size: 18pt;
                            line-height: 30px;
                            text-align: center;
                            margin-left: 10px;


                            .sp_only {
                                display: block !important;
                            }
                        }

                        .btnicon {
                            margin-right: 10px;
                        }


                    }

                }
            }

            .eyecatch {
                .incitepc {
                    display: none;
                }

                .incitesp {
                    display: block;
                }

            }
        }
    }


    /* 下層about */
    .lowerabout {
        .pc {
            display: none;
        }

        .sp {
            display: block;
        }

        .lowerabout__about {
            display: flex;
            flex-direction: column;
            align-items: center;

            h2 {
                margin: 40px 0 25px 0;
                font-size: 32pt;
                padding: 0 3%;
            }

            .wrapper {
                padding: 40px 3% 100px 3%;

                h3 {
                    font-size: 18pt;
                    margin-bottom: 20pt;
                }

                .centertext {
                    margin-top: 40px;
                    text-align: center;
                    line-height: 2rem;
                }

                span {
                    font-size: 36pt;
                }
            }
        }

        .lowerabout__ticketinfo {
            .wrapper {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 25px;
                padding: 50px 3%;

                .placeinfo {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    .place {
                        font-size: 48pt;
                        color: #000;

                        .thin {
                            font-weight: 400;
                            font-size: 18pt;
                        }
                    }

                    .maplink {
                        color: #000;
                        font-size: 38pt;
                        font-weight: 800;
                    }
                }
            }

            .wrapper img:nth-child(odd) {
                width: 150px;
                margin-right: auto;
                margin-left: 0;
            }
        }

        .ticket {
            margin: 0 auto 80px auto;
            padding: 0 3%;

            img {
                width: 100%;
            }

            ul {
                margin: 14px auto 0 auto;
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                li {
                    text-align: left;
                    font-size: 10.5pt;
                }

                a:link,
                a:active {
                    text-decoration: underline;
                }
            }

            p {
                text-align: center;
                margin-top: 20px;
                font-size: 14pt;
            }
        }

        .enjoydrinks {
            padding: 0 3%;
            margin-bottom: 80px;

            h3 {
                font-size: 42pt;
            }

            .mainimg {
                display: block;
            }

            .container {
                margin: 20px auto 40px auto;
                padding: 0 3%;
                display: flex;
                flex-direction: column-reverse;

                .imgbox {
                    margin-left: 0;
                    margin-top: 20px;
                    display: flex;
                    justify-content: right;
                }

                .text {
                    width: 100%;
                    margin-left: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
        }

        .enjoyedm {
            padding: 0 3%;
            margin-bottom: 80px;

            h3 {
                font-size: 42pt;
            }

            .mainimg {
                display: block;
            }

            .container {
                margin: 20px auto 100px auto;
                padding: 0 3%;
                display: flex;
                flex-direction: column-reverse;

                .imgbox {
                    margin-right: 0;
                }

                .text {
                    width: 100%;
                    margin-right: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
        }
    }

    /* 下層aboutここまで */

    /*--- how to ページ ---*/

    .howto {

        h2 {
            font-size: 23pt;
        }

        .number {
            font-size: 30pt;
        }

        .process {
            font-size: 23pt;
        }

        .detail {
            font-size: 12pt;
        }

        .content {
            width: 93%;

        }

        .content-box {
            border: 6px solid #000;
            width: 95%;
            margin: 10px;
            padding: 15px;

        }

        .ticketbtn {
            margin: 0 auto;
            border: 5px solid #000000;
            max-width: 450px;
            min-width: 200px;
        }

        .ticketbtn-detail {
            padding: 10px 5px 5px 5px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;


            h3 {
                font-size: 20pt;
                text-align: center;
                line-height: 0.9;
                margin-right: 5px;
            }

            .transition {
                min-width: 30px;
                text-align: center;
                padding-top: 1px;
            }
        }

        .triangle {
            margin: 20px 0;
            max-width: 90px;
        }
    }

    /* torick shot ページ */

    .torickshot {

        .top-img h1 {
            margin-left: 3%;
        }

        .wrapper {
            padding: 0 3%;
        }

        .torickshot_lead {
            margin-bottom: 100px;
        }

        .torickshot_poster .container {
            margin-bottom: 150px;
        }

        /***** flavers *****/

        .torickshot_flavors {
            overflow: hidden;
            margin-bottom: 100px;
            padding: 150px 0;

            .flavors01,
            .flavors02,
            .flavors03 {
                background-position: 50% 50%;
                background-size: cover;
                height: auto;
                display: block;
                position: static;
                margin-bottom: 50px;

                .flavor {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    height: auto;
                    top: auto;
                    left: auto;
                    position: static;

                    .bottleimg {
                        text-align: center;

                        .bottle {
                            width: 70%;
                        }
                    }

                    .texts {
                        text-align: center;
                    }
                }

                .pcver {
                    display: none !important;
                }

                .spver {
                    display: block;
                }

                /* flavor閉じタグ */
                .flavor_2 {
                    display: flex;
                    flex-direction: column;
                    align-items: center !important;
                    justify-content: center;
                    height: auto;
                    top: auto;
                    left: auto;
                    position: static;

                    .bottleimg02 {
                        text-align: center;

                        .bottle02 {
                            width: 70%;
                        }
                    }

                    .texts02 {
                        text-align: center;
                    }

                    .cursive02 {
                        position: static;
                        font-size: 70pt;
                        line-height: 40pt;
                        text-align: center;
                    }
                }

                .cursive,
                .cursive02,
                .cursive03 {
                    position: static;
                    font-size: 70pt;
                    line-height: 40pt;
                    text-align: center;
                }
            }
        }

        /* flavors01,02,03閉じタグ*/
    }

    /* torick shot 閉じタグ*/

    /*--- line up ページ ---*/
    .lineup {
        .snsicon {
            width: 50px;
            height: 50px;
        }

        .content {
            h2 {
                font-size: 23pt;
                margin-top: 8%;
            }

            h4 {
                font-size: 13pt;
            }
        }

        .sjt_title {
            margin-top: 3%;
        }

        .content-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .content-box-revers {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .content-img {
            width: 100%;
            margin: 0 auto;
        }

        .yamamoto_title {
            word-break: normal;
        }

        .content-textbox {
            width: 100%;

            .yamamoto_bg {
                top: auto;
                bottom: 0;
            }

            .keter_bg {
                bottom: -10%;
            }

            .sjt_bg {
                width: 100%;
            }

            .echos_bg {
                right: 0;
            }
        }

        .sjt_bg {
            margin: 0 auto;
        }

        .djname {
            h4 {
                margin-top: 1%;
            }
        }

        .sns {
            gap: 10px;
        }

    }

    /*--- line up ページ閉じ ---*/
}