@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');


* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;



    & a {
        color: inherit;
        text-decoration: underline;
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;
    }
}

.gugi-regular {
    font-family: "Gugi", serif;
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
        line-height: 160%;
        font-size: 16px;    
        background: url(../img/bg.jpg);
        background-size: cover;
        background-attachment: fixed;
        background-position: center top;
        background-repeat: no-repeat;
        
}




#Mainvisual{
    text-align: center;
    width:100%;
    max-width: 1200px;
    margin: auto;

    & img{
        width: 100%;

    }
    
}

#Contents {

    background: linear-gradient(to left,rgba(10, 85, 82, 0.3), rgba(135, 85, 196, 0.3), rgba(146, 94, 62, 0.3)),rgba(0, 0, 0, 0.20);
    background-blend-mode: overlay;
    margin-top: calc(-100vw / 3.5);
    padding: 0;
    width: 100%;
    z-index: 9999;
    position: relative;

}

article {

    & .article-wrap {

        & h1 {
            text-align: center;

        }

        & section {
            max-width: 1120px;
            margin: auto;

        }

    }

    & .wrap-frame {

        width: calc(100% - 20px);
        max-width: 1200px;
        margin: 60px auto;
        background: url(../img/frame_top.svg) no-repeat top center,
            url(../img/frame_bottom.svg) no-repeat bottom center;
        background-size: contain;
        padding: 40px;

        & h2 {
            text-align: center;
            font-size: 40px;
            margin: 0 0 60px 0;
        }

        & .article-contents {
            background: rgba(0, 0, 0, 0.6);
            padding: 40px;
            color: #ffffff;
        }

    }


    & .wrap-noframe {

        width: 100%;
        background: linear-gradient(135deg,
                rgba(255, 204, 153, 0.3),            
                rgba(153, 153, 204, 0.3),                
                rgba(0, 153, 204, 0.3)                
            );
        color: #ffffff;

        & h2 {
            font-size: 48px;
            text-align: center;
            margin: 0 0 60px 0;
            color: #ffffff;
            font-family: "Gugi", serif;
            font-weight: 400;
            font-style: normal;
        }

        & .article-contents {
            width: calc(100% - 20px);
            max-width: 1200px;
            margin: auto;
            padding: 60px 0;

        }

    }

}

#Title {
    text-align: center;
    padding: 40px 10px;
    color: #ffffff;

    & h1 {

        margin: 0 0 20px 0;
        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
        font-size: 48px;
        font-weight: bold;
        line-height: 120%;

    }

    & div {
        font-size: x-large;
        font-weight: bold;
        margin: 20px auto;

        & img {
            width: 100%;
            max-width: 610px;
        }

    }
}

#Infomation {

    color: #ffffff;

    & .infomation-wrap {
        width: calc(100% - 20px);
        max-width: 1200px;
        margin: 40px auto;
        display: flex;
        gap: 20px;

        .infomation-news,
        & .infomation-sns {
            max-width: 590px;
            width: 100%;
            height: 290px;
            padding: 30px;

            & div.infomation-item {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                padding: 10px;

                & h2 {
                    font-size: large;
                    line-height: 100%;
                    text-align: center;
                    font-family: "Gugi", serif;
                    font-weight: 400;
                    font-style: normal;

                    & span {
                        font-family: "Gugi", serif;
                        font-weight: 400;
                        font-style: normal;
                        font-size: x-large;
                        background: linear-gradient(135deg,
                                rgba(255, 204, 153, 0.8),
                                /* color1 with 80% opacity */
                                rgba(153, 153, 204, 0.8),
                                /* color2 with 80% opacity */
                                rgba(0, 153, 204, 0.8)
                                /* color3 with 80% opacity */
                            );
                        -webkit-background-clip: text;
                        /* テキストのみに背景をクリップ */
                        color: transparent;
                        /* テキスト色を透明にする */
                    }
                }

                & dl {
                    height: calc(100% - 30px);
                    overflow: auto;

                    & dt {
                        font-weight: bold;
                    }

                    & dd {
                        border-bottom: solid 1px #666666;
                        padding: 10px 0;
                        margin-bottom: 10px;
                    }

                }

            }

        }

        & .infomation-news {
            background: url(../img/bg_news.svg) top center no-repeat;
            background-size: 100% auto;

        }

        & .infomation-sns {
            background: url(../img/bg_sns.svg) top center no-repeat;
            background-size: 100% auto;

            & .sns-wrap {
                background: none;
                height: 90%;
                overflow: auto;
                padding: 0;

            }


        }

    }

}

#Ticket {

    & h3 {
        font-size: x-large;
        margin: 0 0 20px 0;
    }

    & h4 {
        font-size: large;
    }

    & p {
        margin: 0 0 20px 0;

        span.ticket-attention{
            font-size: small;
            
            &::before {
                content: "※";

            }


        }
    }


    & hr {
        margin: 20px 0;
        opacity: 0.5;
    }



    & dl.ticket-attention,
    & ul.ticket-attention {

            margin: 0 0 20px 0;

        & dt {
            font-weight: bold;
        }

        & dd,
        & li {
            font-size: small;
            text-indent: -1em;
            padding-left: 1em;

            &::before {
                content: "※";

            }
        }




    }

    & dl.ticket-attention-present{
    margin: 0 0 20px 0;

    & dt{
        font-weight: bold;
        
        span{
            color:red;
        }
    }

    & dd{
        font-size: small;
        text-indent:0em;
        padding-left: 0em;
        &::before {
            content: "";

        }
}



        
    }


}

#Performer {
    & dl.performer-group {
        border: solid 2px #ffffff;
        border-radius: 16px;
        text-align: center;

        &+& {
            margin-top: 40px;
        }

        & dt {
            background-color: #ffffff;
            display: inline-block;
            padding: 8px 24px;
            border-radius: 0 0 16px 16px;


            & span {
                font-family: "Gugi", serif;
                font-weight: 400;
                font-style: normal;
                font-size: x-large;
                background: linear-gradient(135deg,
                        rgba(255, 204, 153, 0.8),
                        /* color1 with 80% opacity */
                        rgba(153, 153, 204, 0.8),
                        /* color2 with 80% opacity */
                        rgba(0, 153, 204, 0.8)
                        /* color3 with 80% opacity */
                    );
                -webkit-background-clip: text;
                /* テキストのみに背景をクリップ */
                color: transparent;
                /* テキスト色を透明にする */
            }

        }

        & dd {
            width: 100%;
            padding: 40px;

            & .performer-list {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 40px;

                & li {
                    width: calc((100% - 80px) / 3);
                    position: relative;

                    & img {
                        width: 100%;
                        display: block;
                        cursor: pointer;
                    }

                    & .popup-area {
                        display: none;
                        cursor: pointer !important;

                        & .performer-comment {
                            position: absolute;
                            z-index: 999;
                            top: 0;
                            left: 0;
                            background: linear-gradient(135deg,
                                    rgba(255, 204, 153, 0.95),
                                    /* color1 with 80% opacity */
                                    rgba(153, 153, 204, 0.95),
                                    /* color2 with 80% opacity */
                                    rgba(0, 153, 204, 0.95)
                                    /* color3 with 80% opacity */
                                );
                            ;
                            color: #ffffff;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            gap: 40px;
                            align-items: center;
                            justify-content: center;
                            padding: 20px;
                            font-size: large;
                            font-weight: bolder;

                            & .popup-close {
                                font-size: small;
                                line-height: 100%;
                                background: #333333;
                                color: #ffffff;
                                padding: 8px 16px;
                                border-radius: 4px;

                                &:hover{
                                    opacity: 0.5;
                                }
                            }

                        }
                    }

                }

            }
        }

    }

}

#Story {


    & h2 {
        margin: 0 0 20px 0;
        font-size: x-large;
        font-family: "Gugi", sun-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 180%;

    }

    & h3{
        text-align: center;
        font-size: large;
        font-weight: bold;
        margin: 0 0 10px 0;
    }

    & p {
        margin: 0 0 20px 0;
        line-height: 180%;

    }

    & pre {
        line-height: 180%;
    }



}

#Goods {

    & p {
        margin: 0 0 20px 0;
    }

    & div.goods-info {

        color: #000000;
        padding: 20px;
        background: rgba(255, 255, 255, 0.75);
        margin: 0 0 20px 0;
        border-radius: 8px;

        & :last-child {
            margin: 0;
            
        }

        & dl{
            margin: 0 0 20px 0;
        }

        & dt {
            font-weight: bold;
        }

        & dd {
            margin: 0 0 20px 0;

        }
    }

    & ul.goods-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        margin: 0 0 40px 0;
        color: #000000;
        cursor: pointer;

        & li {
            width: calc((100% - 40px) / 3);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.75);
            padding: 16px;

            & dl {

                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 10px;
                height: 100%;


                & dt.goods-name {
                    font-weight: bold;
                    line-height: 120%;
                    min-height: calc((16px * 2) + 16px * 0.2);
                }

                & dd.goods-image {

                    & img {
                        width: 100%;
                        flex-shrink: 4;
                    }

                }

                & dd.goods-subtext {

                    font-size: small;
                    line-height: 140%;
                    flex-grow: 4;

                    span{
                        color: #ff0000;
                    }
                }

                & dd.goods-price {
                    text-align: right;
                    font-weight: bold;
                }
            }

            & .popup-area {
                display: none;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.8);
                position: fixed;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                margin: auto;
                cursor: pointer;

                & .popup-item {
                    height: 100%;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 20px;

                    & img {
                        width: auto;
                        max-width: 800px;
                        height: 90%;
                        max-height: 90vw;

                    }

                    & .popup-close {
                        color: #000000;
                        font-weight: bold;
                        margin-top: 20px;
                        transition: .2s;
                        background: #ffffff;
                        padding: 4px 16px;
                        border-radius: 4px;

                        &:hover{
                            opacity: 0.5;
                        }
                        
                    }

                }

            }

        }




    }
}

footer {
    padding: 60px;
    background-color: rgba(0, 0, 0, 0.75);
    text-align: center;
    color: #ffffff;
    font-size: small;

    & div {
        margin: 0 0 40px 0;
        line-height: 180%;
    }

}

.sp {
    display: none;
}


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

    .sp {
        display: inherit;
    }

    body {
        font-size: 15px;
        background-image: none;
       
        &::before{
            content: "";
            background-image: url('../img/bg.jpg');
            background-size: auto 100vh;
            background-repeat: no-repeat;
            background-position: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1; /* 背景として配置 */

        }

    }


    article {
        & .wrap-frame {
            margin: 20px auto;
            padding: 10px;
            background-size: contain;

            & .article-contents {
                padding: 20px;
                
            }
        }

        & .wrap-noframe {
            & h2 {
                font-size: xx-large;
                margin: 0 0 20px 0;
            }

            & .article-contents {
                padding: 20px 0;
            }
        }


    }

    #Title {

        padding: 20px 0 0 0;

        & h1 {
            font-size: 20px;
            margin: auto;

        }

        & div {
            font-size: medium;
            margin: 10px 10px 0 10px;
        }
    }

    & #Infomation {


        & .infomation-wrap {
            display: block;
            margin: 20px auto;

            & .infomation-news,
            & .infomation-sns {
                background: url(../img/frame_top.svg) no-repeat top center,
                    url(../img/frame_bottom.svg) no-repeat bottom center;
                background-size: contain;
                padding: 10px;

                &+& {
                    margin-top: 20px;
                }
            }
        }
    }



    #Story {
        & h2 {
            font-size: large;
            font-weight: bold;
        }
    }

    #Performer {
        & dl.performer-group {
            & dt {
                padding: 4px 16px;
            }

            & dd {
                & .performer-list {

                    & li {
                        width: 100%;
                    }
                }
            }
        }
    }

    #Goods {
        & ul.goods-list {
            gap: 10px;

            & li {
                width: calc((100% - 10px) / 2);
            }
        }
    }


}



@media (orientation: portrait) {

    body {

        background-image: none;
       
        &::before{
            content: "";
            background-image: url('../img/bg.jpg');
            background-size: auto 100vh;
            background-repeat: no-repeat;
            background-position: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1; /* 背景として配置 */
    
        }
    
    }



  }

.text-attention{
    color: #ff0000;
    font-weight: bold;
}