/* --------------------------------
    Foundation
-------------------------------- */
body
{
    font-family: 'Source Sans Pro',HelveticaNeue-Light,'Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;

    position: relative;

    max-width: 1920px;
    margin: auto;
}

a:link,
a:visited
{
    color: #868686;
}

a:hover,
a:active
{
    opacity: .8;
}

img
{
    width: 100%;
}

/* --------------------------------
    Layout
-------------------------------- */
.l-two-column
{
    overflow: hidden;

    width: 100%;
    margin: 0;
    padding: 0;
}

.l-left-column
{
    float: left;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 50%;
    padding: 0 10px;
}

.l-right-column
{
    float: right;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 50%;
    padding: 0 10px;
}

.l-container
{
    font-size: 14px;
    line-height: 1.5;

    position: relative;

    overflow: hidden;

    width: 100%;
    height: auto;

    color: #fff;
}

/* --------------------------------
    footer
-------------------------------- */
.l-footer
{
    font-size: .9rem;

    width: 100%;
    margin: auto;

    border-top: 2px solid #333;
}

.footer-inner
{
    padding: 20px 0;

    text-align: center;

    color: #888;
}

.footer-inner .offi-link
{
    font-size: .9rem;

    display: inline-block;

    margin-bottom: 10px;
}

.footer-inner a:link,
.footer-inner a:visited
{
    color: #999;
}

.footer-inner .job-contact
{
    padding: 10px 0;

    text-align: center;
}

.footer-inner .job-contact p
{
    display: inline-block;

    margin: 0 10px;
}

@media only screen and (max-width: 768px)
{
    .l-footer
    {
        font-size: .8rem;
    }
}

/* --------------------------------
    header
-------------------------------- */
.l-header
{
    font-size: 0;

    width: 100%;
}

.header__inner
{
    width: 100%;
    margin: 0;
}

.header__inner img
{
    width: 100%;
}

@media only screen and (max-width: 768px)
{
    .header__inner
    {
        margin-top: 10px;
    }
}

.l-main
{
    overflow: hidden;

    width: 100%;
    margin: 0;
    padding: 0;
}

.main__inner
{
    width: 1200px;
    margin: auto;
}

/* --------------------------------
    Object
-------------------------------- */
/* --------------------------------
    Global Nav
-------------------------------- */
.global-nav
{
    width: 100%;
    padding: 20px 0;

    background-color: #222;
}

.global-nav__list
{
    overflow: hidden;

    text-align: center;
}

.global-nav__list__item
{
    font-size: 1.5rem;
    font-weight: bold;

    display: inline-block;

    margin: 0 15px;
}

.global-nav__list__item a:link,
.global-nav__list__item a:visited
{
    color: inherit;
}

@media only screen and (max-width: 768px)
{
    .global-nav__list__item
    {
        font-size: 1.2rem;

        margin: 0 10px;
    }
}

@media only screen and (max-width: 480px)
{
    .global-nav
    {
        padding: 10px 0;
    }
    .global-nav__list__item
    {
        font-size: .9rem;

        margin: 0 7px;
    }
}

/* --------------------------------
    midashi
-------------------------------- */
.ttl
{
    font-family: 'Libre Baskerville', serif;
    font-size: 3rem;

    margin-bottom: 40px;

    text-align: center;
    letter-spacing: 5px;

    color: #000;
}

.header-ttl
{
    font-family: 'Libre Baskerville', serif;
    font-size: 1.5rem;

    position: absolute;
    z-index: 2;
    top: 0;

    width: 100%;
    padding: 10px 0;

    text-align: center;

    color: #fff;
    background-color: #000;
}

.ttl-ab
{
    font-family: 'Libre Baskerville', serif;
    font-size: 3rem;

    position: relative;

    display: inline-block;

    text-align: center;
    white-space: nowrap;

    color: #fff;
}

.ttl-ab::before
{
    position: absolute;
    top: 0;
    left: 0;

    overflow: hidden;

    width: 50%;

    content: attr(data-split);

    color: #000;
}

.sub-ttl
{
    font-family: 'Libre Baskerville', serif;
    font-size: 1.8rem;

    margin-top: 30px;
    margin-bottom: 40px;

    text-align: center;
    letter-spacing: 5px;

    color: #000;
}

@media only screen and (max-width: 980px)
{
    .sub-ttl
    {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 768px)
{
    .ttl
    {
        font-size: 1.8rem;

        text-align: center;

        color: #fff;
    }
    .header-ttl
    {
        font-size: .95rem;

        padding: 5px 0;
    }
    .ttl-ab
    {
        font-size: 1.8rem;

        color: #000;
        background-color: #fff;
    }
    .ttl-ab::before
    {
        position: absolute;
        top: 0;
        left: 0;

        overflow: hidden;

        width: 50%;

        content: attr(data-split);

        color: #000;
    }
    .sub-ttl
    {
        font-size: 1.2rem;
    }
}

/* --------------------------------
    Top btn
-------------------------------- */
.top_btn
{
    position: fixed;
    z-index: 2;
    right: 20px;
    bottom: -100px;

    width: 40px;
    height: 40px;

    -webkit-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;
}

.top_btn img
{
    width: 100%;
}

.js-top .top_btn
{
    bottom: 30px;
}

/* --------------------------------
    Artist
-------------------------------- */
.artist
{
    overflow: hidden;

    width: 100%;
    padding-top: 40px;

    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #000));
    background: -webkit-linear-gradient(left, #fff 50%, #000 50%);
    background:      -o-linear-gradient(left, #fff 50%, #000 50%);
    background:         linear-gradient(90deg, #fff 50%, #000 50%);
}

.artist .artist__img
{
    font-size: 0;

    width: 100%;
    margin-bottom: 145px;
}

.artist .artist__img__item
{
    position: relative;
    z-index: 1;

    overflow: hidden;

    width: 100%;
    height: 100%;
}

.artist .artist__img__item img
{
    -webkit-transition: all .8s;
         -o-transition: all .8s;
            transition: all .8s;
}

.artist .artist__img__item:hover img
{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.artist .artist__img__item-front
{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transition: all .9s cubic-bezier(.645, .045, .355, 1);
         -o-transition: all .9s cubic-bezier(.645, .045, .355, 1);
            transition: all .9s cubic-bezier(.645, .045, .355, 1);

    background-color: #000;
}

.artist-bp
{
    position: relative;

    float: left;

    width: 50%;
    margin: 0;
    padding: 0;
}

.artist-bp .artist-bp-vs
{
    font-family: 'Cinzel', serif;
    font-size: 2.8rem;

    position: absolute;
    top: 20px;
    right: 1px;

    display: inline-block;

    color: #000;
    text-shadow: 1px 1px #e6e6e6, 2px 2px #212121, 3px 3px #212121, 4px 4px #212121, 5px 5px #212121;
}

.artist-bp .artist-bp-vs__sp
{
    display: none;
}

.artist-rr
{
    position: relative;

    float: right;

    width: 50%;
    margin: 0;
    padding: 0;
}

.artist-rr .artist-rr-vs
{
    font-family: 'Cinzel', serif;
    font-size: 2.8rem;

    position: absolute;
    top: 20px;
    left: 1px;

    display: inline-block;

    color: #fff;
    text-shadow: 1px 1px #212121, 2px 2px #212121, 3px 3px #f9f9f9, 4px 4px #f9f9f9, 5px 5px #f9f9f9;
}

.artist-rr .artist__img__item-front
{
    background-color: #fff;
}

.artist-rr .js-img .artist__img__item-front
{
    margin-left: 100%;

    opacity: 0;
}

.js-img .artist__img__item-front
{
    width: 0;

    opacity: 0;
}

@media only screen and (max-width: 980px)
{
    .artist-bp .artist-bp-vs
    {
        font-size: 2.2rem;
    }
    .artist-rr .artist-rr-vs
    {
        font-size: 2.2rem;
    }
}

@media only screen and (max-width: 768px)
{
    .artist
    {
        width: 100%;
        padding-top: 0;

        background: #000;
    }
    .artist .u-text-center
    {
        padding-top: 20px;

        background-color: #fff;
    }
    .artist .artist__img__item
    {
        margin-bottom: 20px;
    }
    .artist-bp
    {
        float: none;

        width: 100%;
        margin: 0 auto;

        background-color: #fff;
    }
    .artist-bp .artist__img
    {
        margin-bottom: 0;
        padding-bottom: 30px;
    }
    .artist-bp .sub-ttl
    {
        margin-top: 0;
        margin-bottom: 20px;
        margin-left: 10px;
        padding-top: 30px;

        text-align: left;

        border-bottom: 1px solid #000;
    }
    .artist-bp .artist-bp-vs
    {
        display: none;
    }
    .artist-bp .artist-vs__sp
    {
        font-family: 'Cinzel', serif;
        font-size: 2.5rem;

        position: absolute;
        right: 0;
        bottom: -27px;
        bottom: -30px;
        left: 0;

        display: inline-block;

        margin: auto;
        margin-right: 10px;

        text-align: center;

        color: #fff;
    }
    .artist-bp .artist-vs__sp::before
    {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;

        overflow: hidden;

        height: 50%;
        margin: auto;

        content: attr(data-split);

        color: #000;
    }
    .artist-rr
    {
        float: none;

        width: 100%;
        margin: 0 auto;

        background-color: #000;
    }
    .artist-rr .artist__img
    {
        margin-bottom: 120px;
    }
    .artist-rr .sub-ttl
    {
        margin-top: 50px;
        margin-bottom: 20px;
        margin-left: 10px;

        text-align: left;

        border-bottom: 1px solid #fff;
    }
    .artist-rr .artist-rr-vs
    {
        display: none;
    }
    .artist-rr .artist-rr-vs__sp
    {
        font-family: 'Cinzel', serif;
        font-size: 2.5rem;

        position: absolute;
        right: 0;
        bottom: -27px;
        left: 0;

        display: inline-block;

        margin: auto;
        margin-left: 10px;

        text-align: center;

        color: #fff;
    }
}

/* --------------------------------
    Goods
-------------------------------- */
.goods
{
    position: relative;

    width: 100%;
    margin-top: 50px;
    margin-bottom: 70px;
}

.goods .ttl
{
    margin-bottom: 20px;
}

.goods__detail
{
    width: 90%;
    margin: 0 auto;
    padding: 0;

    text-align: center;

    color: #000;
}

.goods__detail img
{
    width: 100%;
    max-width: 550px;
}

.goods-soon
{
    font-size: 1.4rem;

    text-align: center;
}

@media only screen and (max-width: 768px)
{
    .goods
    {
        margin-top: 40px;
        margin-bottom: 40px;
        padding-top: 0;
    }
    .goods .ttl
    {
        color: #000;
    }
    .goods-soon
    {
        font-size: 1rem;
    }
}

/* --------------------------------
    schedule
-------------------------------- */
.schedule
{
    position: relative;
    z-index: 1;

    width: 100%;
}

.schedule::before
{
    position: absolute;
    z-index: 0;
    top: -52px;
    left: 0;

    width: 100%;
    height: 180px;

    content: '';
    -webkit-transform: skewY(3deg);
        -ms-transform: skewY(3deg);
            transform: skewY(3deg);

    background-color: #dcdee1;
}

.schedule__inner
{
    position: relative;
    z-index: 2;

    margin-top: 0;
    padding-bottom: 80px;

    text-align: center;

    background-color: #dcdee1;
}

.schedule__inner .ttl
{
    margin-left: 20px;

    text-align: left;
}

.schedule__grid
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
            justify-content: space-around;
}

.schedule__grid__item
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 48%;
    margin-top: 50px;
    margin-bottom: 20px;

    -webkit-transition: all .7s;
         -o-transition: all .7s;
            transition: all .7s;
    text-align: left;
    vertical-align: top;

    opacity: 0;
    border: 1px solid #000;
}

.js-sd
{
    margin-top: 0;

    opacity: 1;
}

.schedule__grid__top
{
    position: relative;

    min-height: 80px;
    padding: 15px;

    color: #fff;
    background-color: #212121;
}

.schedule__grid-date
{
    font-size: 1.2rem;
    font-weight: bold;

    position: absolute;
    top: 15px;
    left: 15px;

    display: inline-block;

    padding: 25px 10px;

    background-color: #327ba5;
}

.schedule__grid-place
{
    font-size: 1.6rem;
    font-weight: bold;

    margin-top: 10px;
    margin-left: 120px;
}

.schedule__grid-hour
{
    margin-top: 20px;
    margin-right: 10px;

    text-align: right;
}

.schedule__grid__bottom
{
    padding: 15px;

    color: #000;
}

.schedule__grid-order
{
    font-size: .9rem;

    margin-bottom: 7px;
}

.schedule__grid-contact
{
    text-align: right;
}

@media only screen and (max-width: 980px)
{
    .schedule__grid-date
    {
        font-size: 1.1rem;
    }
    .schedule__grid-place
    {
        font-size: 1.2rem;

        margin-left: 100px;
    }
}

@media only screen and (max-width: 768px)
{
    .schedule::before
    {
        top: -40px;
    }
    .schedule__inner
    {
        padding-bottom: 110px;
    }
    .schedule__inner .ttl
    {
        color: #000;
    }
    .schedule__grid
    {
        display: block;

        -webkit-flex-wrap: inherit;
            -ms-flex-wrap: inherit;
                flex-wrap: inherit;
        -webkit-box-pack: inherit;
        -webkit-justify-content: inherit;
        -ms-flex-pack: inherit;
                justify-content: inherit;
    }
    .schedule__grid-date
    {
        padding: 20px 10px;
    }
    .schedule__grid__item
    {
        width: 98%;
        margin: 40px auto 0 auto;
    }
    .schedule__grid__item:last-child
    {
        display: none;
    }
    .schedule__grid-date
    {
        font-size: 1rem;
    }
    .schedule__grid-place
    {
        font-size: 1.1rem;

        margin-left: 100px;
    }
    .js-sd
    {
        margin-top: 20px;

        opacity: 1;
    }
}

/* --------------------------------
    Ticket
-------------------------------- */
.ticket
{
    position: relative;

    width: 100%;
    padding-top: 40px;
}

.ticket::before
{
    position: absolute;
    z-index: 1;
    top: -50px;
    left: 0;

    width: 100%;
    height: 180px;

    content: '';
    -webkit-transform: skewY(-3deg);
        -ms-transform: skewY(-3deg);
            transform: skewY(-3deg);

    background-color: #000;
}

.ticket__inner
{
    position: relative;
    z-index: 1;

    margin-top: -20px;
    padding-bottom: 70px;

    color: #fff;
    background-color: #000;
}

.ticket__inner .ttl
{
    margin-right: 20px;

    text-align: right;

    color: #fff;
}

.ticket__detail
{
    position: relative;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 85%;
    margin: auto;
    padding: 20px;

    background-color: #2c2e33;
}

.ticket__detail:before
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: all 1.2s cubic-bezier(.645, .045, .355, 1);
         -o-transition: all 1.2s cubic-bezier(.645, .045, .355, 1);
            transition: all 1.2s cubic-bezier(.645, .045, .355, 1);

    background-color: #b8c0d4;
}

.ticket__detail__item
{
    width: 0;
    padding: 15px 0;

    -webkit-transition: all .8s;
         -o-transition: all .8s;
            transition: all .8s;

    opacity: 0;
    border-bottom: 1px solid #fff;
}

.ticket__detail__item-ttl
{
    font-weight: bold;

    display: inline-block;

    margin-bottom: 10px;
    padding: 10px 20px;

    background-color: #cd3535;
}

.ticket__detail__item-ttl span
{
    font-size: .8rem;

    margin-left: 10px;
}

.ticket__detail__item-contents
{
    margin-left: 10px;
}

.js-ticket .ticket__detail:before
{
    top: 10px;
    left: 10px;
}

.js-ticket .ticket__detail__item
{
    width: 100%;

    opacity: 1;
}

@media only screen and (max-width: 768px)
{
    .ticket
    {
        padding-top: 20px;
    }
    .ticket::before
    {
        top: -40px;
    }
    .ticket__detail
    {
        width: 95%;
    }
}

/* --------------------------------
    Twitter
-------------------------------- */
.twitter
{
    position: relative;

    width: 100%;
    padding: 50px 0;

    text-align: center;

    background-color: #000;
}

.twitter .ttl
{
    margin-bottom: 20px;

    color: #fff;
}

.twitter iframe
{
    max-width: 550px !important;
    margin: auto;
}

@media only screen and (max-width: 768px)
{
    .twitter iframe
    {
        width: 90% !important;
        margin: auto;
    }
}

/* --------------------------------
    color
-------------------------------- */
.u-white
{
    color: #fff;
}

/* --------------------------------
    device
-------------------------------- */
.view-pc
{
    display: block;
}

.view-sp
{
    display: none;
}

@media only screen and (max-width: 768px)
{
    .view-pc
    {
        display: none;
    }
    .view-sp
    {
        display: block;
    }
}

/* --------------------------------
    text-align
-------------------------------- */
.u-text-center
{
    text-align: center;
}

.u-text-left
{
    text-align: left;
}

.u-text-right
{
    text-align: right;
}