@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Borel&display=swap');

/*===================================================
  anim
====================================================*/
.loader{
    position: fixed;
    height: 100%;
    width: 100%;
    background: #5bb2e7;
    z-index: 9999;
    -webkit-animation: fadeSplash 0.5s ease-in-out 1s 1 forwards;
    animation: fadeSplash 0.5s ease-in-out 1s 1 forwards;
}
.loader .loaderLogo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 600px;
}
@keyframes fadeSplash {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateX(-100%);
	}	
}

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

    .loader .loaderLogo {
        width: 275px;
    }

}

.action {
    opacity:0;
    transition: .5s ease-out;
}
.loaded .action {
    opacity:1;
}
.bgBox .bg.act01 {
    opacity:1;
    filter: blur(20px);
    transform: scale(1.2);
}
.bgBox .bgLogo.act02 {
    opacity: 0;
}
.bgBox .bandBox01.act02 .top {
    transform: translateY(-30px);
    opacity:0;
    transition: .5s ease-out;
}
.bgBox .bandBox01.act02 .bottom {
    transform: translateY(30px);
    opacity:0;
    transition: .5s ease-out;
}
.bgBox .bandBox02.act03 .top {
    transform: translateX(-20px);
    opacity:0;
    transition: .5s ease-out;
}
.bgBox .bandBox02.act03 .bottom {
    transform: translateX(20px);
    opacity:0;
    transition: .5s ease-out;
}
#heroView .heroInner .kv.act04,
#heroView .heroInner .logo.act05,
#heroView .heroInner .txt.act06 {
    transform: translateY(20px);
    opacity:0;
    transition: .5s ease-out;
}
.messageBox.act07 {
    opacity:0;
    transition-delay: 0s;
}

.loaded .bgBox .bg.act01 {
    transition-delay: 1.25s;
    filter: blur(0);
    transform: scale(1);
}
.loaded .bgBox .bgLogo.act02 {
    opacity: 0.2;
}
.loaded .bgBox .bgLogo.act02 {
    transition-delay: 1.5s;
}
.loaded .bgBox .bandBox01.act02 p {
    transition-delay: 1.5s;
    transform: translateY(0);
    opacity: 1;
}
.loaded .bgBox .bandBox02.act03 p {
    transition-delay: 1.75s;
    transform: translateX(0);
    opacity: 1;
}
.loaded #heroView .heroInner .kv.act04 {
    transition-delay: 2s;
    transform: translateY(0);
    opacity:1;
}
.loaded #heroView .heroInner .logo.act05 {
    transition-delay: 2.25s;
    transform: translateY(0);
    opacity:1;
}
.loaded #heroView .heroInner .txt.act06 {
    transition-delay: 2.5s;
    transform: translateY(0);
    opacity:1;
}
.loaded .messageBox.act07 {
    transition-delay: 2.5s;
    opacity:1;
}

.mainWrap .anim {
    opacity: 0;
    transform: translateY(30px);
    transition: all .5s ease-out;
}
.mainWrap .anim.on {
    opacity: 1;
    transform: translateY(0px);
}

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



/*===================================================
    message
====================================================*/
.messageBox {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0 0 0 / 0.6);
    z-index: 9998;
    transition: all 0.5s ease-out;
    pointer-events: none;
    min-height: 600px;
}
body.loaded.massage .messageBox {
    transition-delay: 0s;
}
body.loaded.massage.scrolled .messageBox {
    opacity: 0;
}

.messageBox p {
    position: absolute;
}

/* tokyo before */
.messageBox p.tokyo {}
.messageBox p.tokyo.tokyoBefore {}
.messageBox p.tokyo.tokyoBefore.tokyo01 {
    top: 38%;
    right: 25%;
    transform: translate(25%, -38%) rotate(10deg);
    width: 33%;
    max-width: 580px;
}
.messageBox p.tokyo.tokyoBefore.tokyo02 {
    bottom: 19%;
    left: 45%;
    transform: translate(-45%, 19%) rotate(-5deg);
    width: 33%;
    max-width: 560px;
}
.messageBox p.tokyo.tokyoBefore.tokyo03 {
    top: 15%;
    left: 25%;
    transform: translate(-25%, -15%) rotate(-10deg);
    width: 23%;
    max-width: 420px;
}

/* tokyo after */
.messageBox p.tokyo {}
.messageBox p.tokyo.tokyoAfter {}
.messageBox p.tokyo.tokyoAfter.tokyo01 {
    top: 21%;
    right: 25%;
    transform: translate(25%, -21%) rotate(10deg);
    width: 28%;
    max-width: 520px;
}
.messageBox p.tokyo.tokyoAfter.tokyo02 {
    bottom: 24%;
    left: 50%;
    transform: translate(-50%, 24%) rotate(-5deg);
    width: 27%;
    max-width: 480px;
}
.messageBox p.tokyo.tokyoAfter.tokyo03 {
    top: 24%;
    left: 25%;
    transform: translate(-25%, -24%) rotate(-10deg);
    width: 22%;
    max-width: 360px;
}


/* hiroshima before */
.messageBox p.hiroshima {}
.messageBox p.hiroshima.hiroshimaBefore {}
.messageBox p.hiroshima.hiroshimaBefore.hiroshima01 {
    top: 37%;
    right: 27%;
    transform: translate(27%, -37%) rotate(-5deg);
    width: 29%;
    max-width: 480px;
}
.messageBox p.hiroshima.hiroshimaBefore.hiroshima02 {
    bottom: 22%;
    left: 40%;
    transform: translate(-40%, 22%) rotate(5deg);
    width: 27%;
    max-width: 440px;
}
.messageBox p.hiroshima.hiroshimaBefore.hiroshima03 {
    top: 12%;
    left: 25%;
    transform: translate(-25%, -12%) rotate(-10deg);
    width: 22%;
    max-width: 380px;
}

/* hiroshima after */
.messageBox p.hiroshima {}
.messageBox p.hiroshima.hiroshimaAfter {}
.messageBox p.hiroshima.hiroshimaAfter.hiroshima01 {
    top: 35%;
    right: 25%;
    transform: translate(25%, -35%) rotate(-5deg);
    width: 32%;
    max-width: 460px;
}
.messageBox p.hiroshima.hiroshimaAfter.hiroshima02 {
    bottom: 22%;
    left: 33%;
    transform: translate(-33%, 22%) rotate(5deg);
    width: 29%;
    max-width: 440px;
}
.messageBox p.hiroshima.hiroshimaAfter.hiroshima03 {
    top: 17%;
    left: 25%;
    transform: translate(-25%, -17%) rotate(-5deg);
    width: 21%;
    max-width: 340px;
}


/* miyagi before */
.messageBox p.miyagi {}
.messageBox p.miyagi.miyagiBefore {}
.messageBox p.miyagi.miyagiBefore.miyagi01 {
    top: 45%;
    right: 28%;
    transform: translate(28%, -45%) rotate(5deg);
    width: 30%;
    max-width: 520px;
}
.messageBox p.miyagi.miyagiBefore.miyagi02 {
    bottom: 16%;
    left: 30%;
    transform: translate(-30%, 16%) rotate(-5deg);
    width: 28%;
    max-width: 480px;
}
.messageBox p.miyagi.miyagiBefore.miyagi03 {
    top: 14%;
    left: 30%;
    transform: translate(-30%, -14%) rotate(-10deg);
    width: 21%;
    max-width: 380px;
}

/* miyagi after */
.messageBox p.miyagi {}
.messageBox p.miyagi.miyagiAfter {}
.messageBox p.miyagi.miyagiAfter.miyagi01 {
    top: 43%;
    right: 18%;
    transform: translate(18%, -43%) rotate(-10deg);
    width: 27%;
    max-width: 460px;
}
.messageBox p.miyagi.miyagiAfter.miyagi02 {
    bottom: 22%;
    left: 27%;
    transform: translate(-27%, 22%) rotate(3deg);
    width: 29%;
    max-width: 440px;
}
.messageBox p.miyagi.miyagiAfter.miyagi03 {
    top: 17%;
    left: 38%;
    transform: translate(-38%, -17%) rotate(-5deg);
    width: 22%;
    max-width: 400px;
}


/* osaka before */
.messageBox p.osaka {}
.messageBox p.osaka.osakaBefore {}
.messageBox p.osaka.osakaBefore.osaka01 {
    top: 55%;
    right: 19%;
    transform: translate(19%, -55%) rotate(10deg);
    width: 24%;
    max-width: 419px;
}
.messageBox p.osaka.osakaBefore.osaka02 {
    bottom: 17%;
    left: 23%;
    transform: translate(-23%, 17%) rotate(5deg);
    width: 23%;
    max-width: 420px;
}
.messageBox p.osaka.osakaBefore.osaka03 {
    top: 17%;
    left: 39%;
    transform: translate(-39%, -17%) rotate(-10deg);
    width: 25%;
    max-width: 440px;
}

/* osaka after */
.messageBox p.osaka {}
.messageBox p.osaka.osakaAfter {}
.messageBox p.osaka.osakaAfter.osaka01 {
    top: 70%;
    right: 22%;
    transform: translate(22%, -70%) rotate(10deg);
    width: 23%;
    max-width: 400px;
}
.messageBox p.osaka.osakaAfter.osaka02 {
    bottom: 17%;
    left: 25%;
    transform: translate(-25%, 17%) rotate(10deg);
    width: 22%;
    max-width: 400px;
}
.messageBox p.osaka.osakaAfter.osaka03 {
    top: 16%;
    left: 48%;
    transform: translate(-48%, -16%) rotate(-10deg);
    width: 26%;
    max-width: 460px;
}


/* fukuoka before */
.messageBox p.fukuoka {}
.messageBox p.fukuoka.fukuokaBefore {}
.messageBox p.fukuoka.fukuokaBefore.fukuoka01 {
    top: 24%;
    right: 25%;
    transform: translate(25%, -24%) rotate(5deg);
    width: 33%;
    max-width: 580px;
}
.messageBox p.fukuoka.fukuokaBefore.fukuoka02 {
    bottom: 23%;
    left: 63%;
    transform: translate(-63%, 23%) rotate(10deg);
    width: 26%;
    max-width: 420px;
}
.messageBox p.fukuoka.fukuokaBefore.fukuoka03 {
    top: 42%;
    left: 21%;
    transform: translate(-21%, -42%) rotate(-5deg);
    width: 26%;
    max-width: 480px;
}

/* fukuoka after */
.messageBox p.fukuoka {}
.messageBox p.fukuoka.fukuokaAfter {}
.messageBox p.fukuoka.fukuokaAfter.fukuoka01 {
    top: 20%;
    right: 23%;
    transform: translate(23%, -20%) rotate(5deg);
    width: 32%;
    max-width: 540px;
}
.messageBox p.fukuoka.fukuokaAfter.fukuoka02 {
    bottom: 20%;
    left: 63%;
    transform: translate(-63%, 19%) rotate(-5deg);
    width: 24%;
    max-width: 380px;
}
.messageBox p.fukuoka.fukuokaAfter.fukuoka03 {
    top: 42%;
    left: 21%;
    transform: translate(-21%, -42%) rotate(-5deg);
    width: 26%;
    max-width: 480px;
}


/* shinjuku before */
.messageBox p.shinjuku {}
.messageBox p.shinjuku.shinjukuBefore {}
.messageBox p.shinjuku.shinjukuBefore.shinjuku01 {
    top: 19%;
    right: 17%;
    transform: translate(17%, -19%) rotate(10deg);
    width: 26%;
    max-width: 400px;
}
.messageBox p.shinjuku.shinjukuBefore.shinjuku02 {
    bottom: 21%;
    left: 68%;
    transform: translate(-68%, 21%) rotate(-5deg);
    width: 26%;
    max-width: 420px;
}
.messageBox p.shinjuku.shinjukuBefore.shinjuku03 {
    top: 77%;
    left: 20%;
    transform: translate(-20%, -77%) rotate(-10deg);
    width: 23%;
    max-width: 420px;
}
.messageBox p.shinjuku.shinjukuBefore.shinjuku04 {
    top: 15%;
    left: 32%;
    transform: translate(-32%, -15%) rotate(5deg);
    width: 23%;
    max-width: 420px;
}

/* shinjuku after */
.messageBox p.shinjuku {}
.messageBox p.shinjuku.shinjukuAfter {}
.messageBox p.shinjuku.shinjukuAfter.shinjuku01 {
    top: 21%;
    right: 17%;
    transform: translate(17%, -21%) rotate(-10deg);
    width: 26%;
    max-width: 400px;
}
.messageBox p.shinjuku.shinjukuAfter.shinjuku02 {
    bottom: 19%;
    left: 63%;
    transform: translate(-63%, 23%) rotate(5deg);
    width: 26%;
    max-width: 420px;
}
.messageBox p.shinjuku.shinjukuAfter.shinjuku03 {
    top: 77%;
    left: 18%;
    transform: translate(-18%, -77%) rotate(-5deg);
    width: 23%;
    max-width: 420px;
}
.messageBox p.shinjuku.shinjukuAfter.shinjuku04 {
    top: 22%;
    left: 28%;
    transform: translate(-28%, -22%) rotate(5deg);
    width: 23%;
    max-width: 420px;
}


/* aichi before */
.messageBox p.aichi {}
.messageBox p.aichi.aichiBefore {}
.messageBox p.aichi.aichiBefore.aichi01 {
    top: 17%;
    right: 15%;
    transform: translate(15%, -17%) rotate(10deg);
    width: 25%;
    max-width: 420px;
}
.messageBox p.aichi.aichiBefore.aichi02 {
    bottom: 12%;
    left: 64%;
    transform: translate(-64%, 12%) rotate(-5deg);
    width: 24%;
    max-width: 420px;
}
.messageBox p.aichi.aichiBefore.aichi03 {
    top: 76%;
    left: 16%;
    transform: translate(-16%, -77%) rotate(10deg);
    width: 24%;
    max-width: 420px;
}
.messageBox p.aichi.aichiBefore.aichi04 {
    top: 20%;
    left: 31%;
    transform: translate(-31%, -20%) rotate(-10deg);
    width: 23%;
    max-width: 420px;
}

/* aichi after */
.messageBox p.aichi {}
.messageBox p.aichi.aichiAfter {}
.messageBox p.aichi.aichiAfter.aichi01 {
    top: 13%;
    right: 21%;
    transform: translate(21%, -13%) rotate(-5deg);
    width: 25%;
    max-width: 420px;
}
.messageBox p.aichi.aichiAfter.aichi02 {
    bottom: 20%;
    left: 64%;
    transform: translate(-64%, 20%) rotate(5deg);
    width: 24%;
    max-width: 420px;
}
.messageBox p.aichi.aichiAfter.aichi03 {
    top: 70%;
    left: 16%;
    transform: translate(-16%, -70%) rotate(10deg);
    width: 25%;
    max-width: 440px;
}
.messageBox p.aichi.aichiAfter.aichi04 {
    top: 23%;
    left: 29%;
    transform: translate(-29%, -23%) rotate(5deg);
    width: 23%;
    max-width: 420px;
}

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

    .messageBox {
        min-height: 450px;
    }

    .messageBox p {}

    /* tokyo before */
    .messageBox p.tokyo {}
    .messageBox p.tokyo.tokyoBefore {}
    .messageBox p.tokyo.tokyoBefore.tokyo01 {
        top: 55%;
        right: 25%;
        transform: translate(25%, -55%) rotate(10deg);
        width: 67%;
        max-width: 320px;
    }
    .messageBox p.tokyo.tokyoBefore.tokyo02 {
        bottom: 15%;
        left: 53%;
        transform: translate(-53%, 15%) rotate(5deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.tokyo.tokyoBefore.tokyo03 {
        top: 13%;
        left: 50%;
        transform: translate(-50%, -13%) rotate(5deg);
        width: 55%;
        max-width: 220px;
    }

    /* tokyo after */
    .messageBox p.tokyo {}
    .messageBox p.tokyo.tokyoAfter {}
    .messageBox p.tokyo.tokyoAfter.tokyo01 {
        top: 50%;
        right: 44%;
        transform: translate(44%, -50%) rotate(-10deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.tokyo.tokyoAfter.tokyo02 {
        bottom: 15%;
        left: 53%;
        transform: translate(-53%, 15%) rotate(5deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.tokyo.tokyoAfter.tokyo03 {
        top: 13%;
        left: 50%;
        transform: translate(-50%, -13%) rotate(5deg);
        width: 55%;
        max-width: 220px;
    }


    /* hiroshima before */
    .messageBox p.hiroshima {}
    .messageBox p.hiroshima.hiroshimaBefore {}
    .messageBox p.hiroshima.hiroshimaBefore.hiroshima01 {
        top: 54%;
        right: 44%;
        transform: translate(44%, -54%) rotate(-5deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.hiroshima.hiroshimaBefore.hiroshima02 {
        bottom: 13%;
        left: 53%;
        transform: translate(-53%, 13%) rotate(10deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.hiroshima.hiroshimaBefore.hiroshima03 {
        top: 13%;
        left: 50%;
        transform: translate(-50%, -13%) rotate(5deg);
        width: 55%;
        max-width: 220px;
    }

    /* hiroshima after */
    .messageBox p.hiroshima {}
    .messageBox p.hiroshima.hiroshimaAfter {}
    .messageBox p.hiroshima.hiroshimaAfter.hiroshima01 {
        top: 50%;
        right: 30%;
        transform: translate(30%, -50%) rotate(-5deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.hiroshima.hiroshimaAfter.hiroshima02 {
        bottom: 15%;
        left: 46%;
        transform: translate(-46%, 15%) rotate(5deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.hiroshima.hiroshimaAfter.hiroshima03 {
        top: 13%;
        left: 34%;
        transform: translate(-34%, -13%) rotate(5deg);
        width: 50%;
        max-width: 220px;
    }


    /* miyagi before */
    .messageBox p.miyagi {}
    .messageBox p.miyagi.miyagiBefore {}
    .messageBox p.miyagi.miyagiBefore.miyagi01 {
        top: 50%;
        right: 60%;
        transform: translate(60%, -50%) rotate(5deg);
        width: 70%;
        max-width: 280px;
    }
    .messageBox p.miyagi.miyagiBefore.miyagi02 {
        bottom: 13%;
        left: 58%;
        transform: translate(-53%, 13%) rotate(-5deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.miyagi.miyagiBefore.miyagi03 {
        top: 13%;
        left: 65%;
        transform: translate(-64%, -13%) rotate(-5deg);
        width: 55%;
        max-width: 220px;
    }

    /* miyagi after */
    .messageBox p.miyagi {}
    .messageBox p.miyagi.miyagiAfter {}
    .messageBox p.miyagi.miyagiAfter.miyagi01 {
        top: 52%;
        right: 28%;
        transform: translate(28%, -52%) rotate(10deg);
        width: 60%;
        max-width: 260px;
    }
    .messageBox p.miyagi.miyagiAfter.miyagi02 {
        bottom: 10%;
        left: 51%;
        transform: translate(-51%, 10%) rotate(5deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.miyagi.miyagiAfter.miyagi03 {
        top: 11%;
        left: 50%;
        transform: translate(-50%, -11%) rotate(-5deg);
        width: 55%;
        max-width: 220px;
    }


    /* osaka before */
    .messageBox p.osaka {}
    .messageBox p.osaka.osakaBefore {}
    .messageBox p.osaka.osakaBefore.osaka01 {
        top: 51%;
        right: 62%;
        transform: translate(62%, -51%) rotate(-10deg);
        width: 58%;
        max-width: 260px;
    }
    .messageBox p.osaka.osakaBefore.osaka02 {
        bottom: 12%;
        left: 70%;
        transform: translate(-70%, 12%) rotate(5deg);
        width: 58%;
        max-width: 245px;
    }
    .messageBox p.osaka.osakaBefore.osaka03 {
        top: 12%;
        left: 70%;
        transform: translate(-70%, -12%) rotate(5deg);
        width: 60%;
        max-width: 260px;
    }

    /* osaka after */
    .messageBox p.osaka {}
    .messageBox p.osaka.osakaAfter {}
    .messageBox p.osaka.osakaAfter.osaka01 {
        top: 53%;
        right: 62%;
        transform: translate(62%, -53%) rotate(-10deg);
        width: 60%;
        max-width: 260px;
    }
    .messageBox p.osaka.osakaAfter.osaka02 {
        bottom: 12%;
        left: 70%;
        transform: translate(-70%, 12%) rotate(-5deg);
        width: 57%;
        max-width: 245px;
    }
    .messageBox p.osaka.osakaAfter.osaka03 {
        top: 12%;
        left: 70%;
        transform: translate(-70%, -12%) rotate(-5deg);
        width: 65%;
        max-width: 280px;
    }


    /* fukuoka before */
    .messageBox p.fukuoka {}
    .messageBox p.fukuoka.fukuokaBefore {}
    .messageBox p.fukuoka.fukuokaBefore.fukuoka01 {
        top: 52%;
        right: 44%;
        transform: translate(44%, -52%) rotate(-10deg);
        width: 70%;
        max-width: 260px;
    }
    .messageBox p.fukuoka.fukuokaBefore.fukuoka02 {
        bottom: 15%;
        left: 44%;
        transform: translate(-44%, 15%) rotate(5deg);
        width: 60%;
        max-width: 260px;
    }
    .messageBox p.fukuoka.fukuokaBefore.fukuoka03 {
        top: 14%;
        left: 40%;
        transform: translate(-40%, -14%) rotate(5deg);
        width: 60%;
        max-width: 220px;
    }

    /* fukuoka after */
    .messageBox p.fukuoka {}
    .messageBox p.fukuoka.fukuokaAfter {}
    .messageBox p.fukuoka.fukuokaAfter.fukuoka01 {
        top: 54%;
        right: 46%;
        transform: translate(46%, -54%) rotate(-10deg);
        width: 70%;
        max-width: 280px;
    }
    .messageBox p.fukuoka.fukuokaAfter.fukuoka02 {
        bottom: 10%;
        left: 56%;
        transform: translate(-56%, 10%) rotate(10deg);
        width: 65%;
        max-width: 260px;
    }
    .messageBox p.fukuoka.fukuokaAfter.fukuoka03 {
        top: 10%;
        left: 54%;
        transform: translate(-54%, -10%) rotate(5deg);
        width: 60%;
        max-width: 240px;
    }


    /* shinjuku before */
    .messageBox p.shinjuku {}
    .messageBox p.shinjuku.shinjukuBefore {}
    .messageBox p.shinjuku.shinjukuBefore.shinjuku01 {
        top: 68%;
        right: 20%;
        transform: translate(20%, -68%) rotate(-4deg);
        width: 58%;
        max-width: 240px;
    }
    .messageBox p.shinjuku.shinjukuBefore.shinjuku02 {
        bottom: 5%;
        left: 20%;
        transform: translate(-20%, 5%) rotate(5deg);
        width: 57%;
        max-width: 240px;
    }
    .messageBox p.shinjuku.shinjukuBefore.shinjuku03 {
        top: 29%;
        left: 20%;
        transform: translate(-20%, -29%) rotate(5deg);
        width: 53%;
        max-width: 240px;
    }
    .messageBox p.shinjuku.shinjukuBefore.shinjuku04 {
        top: 5%;
        left: 85%;
        transform: translate(-85%, -5%) rotate(-5deg);
        width: 51%;
        max-width: 240px;
    }

    /* shinjuku after */
    .messageBox p.shinjuku {}
    .messageBox p.shinjuku.shinjukuAfter {}
    .messageBox p.shinjuku.shinjukuAfter.shinjuku01 {
        top: 66%;
        right: 20%;
        transform: translate(20%, -66%) rotate(5deg);
        width: 58%;
        max-width: 240px;
    }
    .messageBox p.shinjuku.shinjukuAfter.shinjuku02 {
        bottom: 5%;
        left: 15%;
        transform: translate(-15%, 5%) rotate(-6deg);
        width: 57%;
        max-width: 240px;
    }
    .messageBox p.shinjuku.shinjukuAfter.shinjuku03 {
        top: 30%;
        left: 20%;
        transform: translate(-20%, -30%) rotate(5deg);
        width: 53%;
        max-width: 240px;
    }
    .messageBox p.shinjuku.shinjukuAfter.shinjuku04 {
        top: 5%;
        left: 85%;
        transform: translate(-85%, -5%) rotate(-5deg);
        width: 56%;
        max-width: 260px;
    }


    /* aichi before */
    .messageBox p.aichi {}
    .messageBox p.aichi.aichiBefore {}
    .messageBox p.aichi.aichiBefore.aichi01 {
        top: 61%;
        right: 20%;
        transform: translate(20%, -61%) rotate(5deg);
        width: 50%;
        max-width: 240px;
    }
    .messageBox p.aichi.aichiBefore.aichi02 {
        bottom: 5%;
        left: 25%;
        transform: translate(-25%, 5%) rotate(-5deg);
        width: 56%;
        max-width: 240px;
    }
    .messageBox p.aichi.aichiBefore.aichi03 {
        top: 32%;
        left: 20%;
        transform: translate(-20%, -32%) rotate(5deg);
        width: 60%;
        max-width: 275px;
    }
    .messageBox p.aichi.aichiBefore.aichi04 {
        top: 5%;
        left: 80%;
        transform: translate(-80%, -5%) rotate(5deg);
        width: 50%;
        max-width: 240px;
    }

    /* aichi after */
    .messageBox p.aichi {}
    .messageBox p.aichi.aichiAfter {}
    .messageBox p.aichi.aichiAfter.aichi01 {
        top: 61%;
        right: 75%;
        transform: translate(75%, -61%) rotate(-10deg);
        width: 50%;
        max-width: 240px;
    }
    .messageBox p.aichi.aichiAfter.aichi02 {
        bottom: 5%;
        left: 85%;
        transform: translate(-85%, 5%) rotate(5deg);
        width: 56%;
        max-width: 240px;
    }
    .messageBox p.aichi.aichiAfter.aichi03 {
        top: 35%;
        left: 80%;
        transform: translate(-80%, -35%) rotate(5deg);
        width: 60%;
        max-width: 275px;
    }
    .messageBox p.aichi.aichiAfter.aichi04 {
        top: 5%;
        left: 20%;
        transform: translate(-20%, -5%) rotate(-4deg);
        width: 50%;
        max-width: 240px;
    }

}



/*===================================================
    bgBox
====================================================*/
.bgBox {
    pointer-events: none;
    width: 100%;
    height: 100%;
    padding: 0;
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    min-height: 650px;
    transform: translate3d(0, 0, -1px);
    overflow: hidden;
}
.bgBox .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}



.bgBox .bg01 {
    background: url(/static/ligareaz/fanclub/feature/bokuao_tour2026/image/ph_bg_yH6ZNqDP.png) no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
}
.bgBox .bg02 {
    z-index: 2;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.5;
}
.bgBox .bandBox {}
.bgBox .bandBox p {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.bgBox .bandBox .top {}
.bgBox .bandBox.bottom {}
.bgBox .bandBox.bandBox01 {
    z-index: 4;
}
.bgBox .bandBox.bandBox01 p {
    background-color: rgb(145 219 241 / 63%);
}
.bgBox .bandBox.bandBox01 .top {
    clip-path: polygon(0% 0%, 0% 25%, 75% 0%);
}
.bgBox .bandBox.bandBox01 .bottom {
    clip-path: polygon(25% 100%, 100% 100%, 100% 75%);
}
.bgBox .bandBox.bandBox02 {
    z-index: 5;
    mix-blend-mode: soft-light;
}
.bgBox .bandBox.bandBox02 p {
    background-color: rgb(255 255 255);
}
.bgBox .bandBox.bandBox02 .top {
    clip-path: polygon(0% 0%, 0% 50%, 25% 0%);
}
.bgBox .bandBox.bandBox02 .bottom {
    clip-path: polygon(75% 100%, 100% 100%, 100% 50%);
}
.bgBox .bgLogo {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    max-width: 2200px;
    opacity: 0.2;
}
.bgBox .bgLogo img {
    transform: rotate(-15deg);
}

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

	.bgBox {
	    min-height: 450px;
	    height: 100vh;
	}
	.bgBox .bg {
		height: 100vh;
	}
    .bgBox .bg.bg01 {
        background: url(/static/ligareaz/fanclub/feature/bokuao_tour2026/image/ph_bg_sp_1a2r2i3N.jpg) no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .bgBox .bg02 {}
    .bgBox .bandBox {}
    .bgBox .bandBox .top {}
    .bgBox .bandBox .bottom {}
    .bgBox .bandBox.bandBox01 {}
    .bgBox .bandBox.bandBox01 .top {
        clip-path: polygon(0% 0%, 0% 15%, 100% 0%);
    }
    .bgBox .bandBox.bandBox01 .bottom {
        clip-path: polygon(0% 100%, 100% 100%, 100% 85%);
    }
    .bgBox .bandBox.bandBox02 {}
    .bgBox .bandBox.bandBox02 p {
        background-color: rgb(255 255 255 / 0.45);
    }
    .bgBox .bandBox.bandBox02 .top {
        clip-path: polygon(0% 0%, 0% 25%, 45% 0%);
    }
    .bgBox .bandBox.bandBox02 .bottom {
        clip-path: polygon(55% 100%, 100% 100%, 100% 70%);
    }
    .bgBox .bgLogo {
        width: 110vh;
        max-width: 1200px;
    }
    .bgBox .bgLogo img {
        transform: rotate(-90deg);
    }

}



/*===================================================
    nav
====================================================*/
.hamBtn {
    display: block;
    position: fixed;
    right: 30px;
    top: 30px;
    width: 45px;
    height: 45px;
    transition: all .3s ease;
    cursor: pointer;
    z-index: 9998;
    background: #00659a;
    border: 10px solid #00659a;
    padding: 10px;
    border-radius: 100px;
}
.hamBtn span {
    display: block;
    position: absolute;
    right: 0;
    width: 100%;
    height: 2px;
    background: #FFF;
    transition: all .3s ease;
}
.hamBtn :nth-of-type(1) {
    top: 2px;
}
.hamBtn :nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}
.hamBtn :nth-of-type(3) {
    bottom: 2px;
}
.hamBtn.open span {

}
.hamBtn.open span:nth-of-type(1) {
    transform: translateY(-50%) rotate(-45deg);
    top: 50%;
}
.hamBtn.open span:nth-of-type(2) {
    opacity: 0;
}
.hamBtn.open span:nth-of-type(3) {
    transform: translateY(50%) rotate(45deg);
    bottom: 50%;
}

.navigation {
    opacity: 0;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9997;
    position: fixed;
	transition: all 0.5s ease-out;
}
.navigation.active {
    transition: opacity 0.5s ease;
    pointer-events:auto;
    opacity:1;
}

.navigation .headerNavBox {
    background: #0086CD;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    flex-direction: row;
}
.navigation .headerNavBox .headerNav {}

.navigation .heroNavLogo {
    width: 320px;
    margin: 0 90px 0 0;
}

.navigation .headerNav li {
	padding: 0;
    position: relative;
    margin: 0 0 25px;
}
.navigation .headerNav li:last-child {
	margin: 0;
}
.navigation .headerNav li a {
    font-family: "Zen Maru Gothic", sans-serif;
    color: #fff;
    font-size: 28px;
    text-decoration: none;
    line-height: 1;
    font-weight: bold;
    letter-spacing: 0.1em;
}

@media screen and (min-width: 961px) {

	.navigation .headerNav a:hover {
		opacity: 0.7;
	}

}

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

    .hamBtn {
        right: 20px;
        top: 20px;
        width: 30px;
        height: 30px;
    }
    .hamBtn.scrolled {
        background: #d2b300;
        border: 10px solid #d2b300;
    }
    .hamBtn.scrolled span {
        background: #0A2745;
    }

	.navigation .headerNav {
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-position: top center;
	    overflow: hidden;
	    object-fit: cover;
	}

    .navigation .headerNavBox {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .navigation .heroNavLogo {
        width: 50%;
        max-width: 225px;
        margin: 0px 0 45px;
    }
    .navigation .headerNav li {
        position: relative;
    }
    .navigation .headerNav li a {
        font-size: 20px;
        display: block;
        line-height: 1;
    }

    .navigation .snsWrap {
        color: #fff;
    }
    .navigation .snsWrap .menuList {
        display: flex;
    }
    .navigation .snsWrap .menuList li {
        margin: 0 20px 0 0;
    }
    .navigation .snsWrap .menuList li:last-child {
        margin: 0;
    }
    .navigation .snsWrap .menuList li a {
        font-size: 20px;
    }

}



/*===================================================
	ALL
====================================================*/
html {}

.mainWrap {
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 1.5;
    font-family: "Zen Maru Gothic", sans-serif;
    padding: 0 0 30px;
    color: #222;
}
.mainWrap img {
    display: block;
}

section {
    margin: 0 auto 160px;
    text-align: center;
}
.container section:last-child {
    margin: 0 auto 240px;
}

section h3 {
    position: relative;
    color: #0086CD;
    margin: 0 auto 60px;
    font-size: 80px;
    letter-spacing: 0.05em;
    font-weight: bold;
    display: inline-block;
}
section h3 .subTit {
    position: absolute;
    font-size: 70px;
    top: 50%;
    left: 50%;
    z-index: -1;
    color: #FFF;
    translate: -50% -50%;
    letter-spacing: -0.05em;
    font-family: "Borel", cursive;
    font-weight: 400;
    line-height: 1em;
    text-indent: -10px;
    opacity: 0.3;
}
section h3 .subTit span {}

section .inBox {
    text-align: left;
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}
section .inBox.inBoxBg {
    padding: 40px;
    background: #fff;
    border-radius: 40px 0;
    box-shadow: #79bdd9 5px 5px;
}

.mainWrap .copy {
    text-align: center;
    font-size: 10px;
}

@media screen and (min-width:961px) {
    
    .sp {
        display: none;
    }

    a {
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

}

@media screen and (max-width:960px) {
    
    .pc {
        display: none;
    }

    html {}

    .mainWrap {
        padding: 0 0 20px;
    }

    section {
        margin: 0 auto 95px;
    }
    .container section:last-child {
        margin: 0 auto 140px;
    }

	section h3 {
        font-size: 42px;
        margin: 0 0px 30px;
	}
    section h3 .subTit {
        font-size: 32px;
        top: 40%;
    }
    section h3 .subTit span {}

    section .inBox {}
    section .inBox.inBoxBg {
        padding: 20px;
        border-radius: 20px 0;
    }

}



/*===================================================
    heroView
====================================================*/
#heroView {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 650px;
    z-index: 1;
    margin: 0 0 120px;
}

#heroView .heroInner {
    display: flex;
    position: absolute;
    width: 88%;
    max-width: 1400px;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    justify-content: space-between;
    align-items: center;
}
#heroView .heroInner .kv {
    width: 52%;
}
#heroView .heroInner .kv img {
    border-radius: 40px 0 40px 0;
}
#heroView .heroInner .txtBox {
    width: 42%;
    display: flex;
    flex-wrap: wrap;
}
#heroView .heroInner .txtBox .logo {}
#heroView .heroInner .txtBox .txt {}


#heroView .artistLogo {
    position: absolute;
    width: 175px;
    top: 30px;
    left: 30px;
}

#heroView .snsWrap {
    position: absolute;
    bottom: 25px;
    right: 30px;
	color: #0086CD;
}
#heroView .snsWrap .menuList {
	display: flex;
}
#heroView .snsWrap .menuList li {
	margin: 0 20px 0 0;
}
#heroView .snsWrap .menuList li:last-child {
	margin: 0;
}
#heroView .snsWrap .menuList li a {
	font-size: 20px;
}
#heroView .snsWrap .menuList li a i {}

.scrollBox {
    position: absolute;
    width: 100%;
    height: 100svh;
    top: 0;
    z-index: 1;
    pointer-events: none;
}
.scrollBox .scroll {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 30px;
    bottom: -60px;
}
.scrollBox .scroll img {
    animation: scrollAnim 15s linear infinite;
}
@keyframes scrollAnim {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }

@media screen and (min-width: 961px){

    #heroView .artistLogo a img,
    #heroView .snsWrap .menuList li a i  {
        transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
    }
    #heroView .artistLogo a:hover img,
    #heroView .snsWrap .menuList li a:hover i {
        opacity: 0.7;
    }

    #heroView .heroInner h2 .sp {
        display: none;
    }
	
}

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

	#heroView {
	    margin: 0 0 90px;
	    min-height: 450px;
	}

    #heroView .heroInner {
        flex-direction: column;
        max-width: 400px;
        width: 70%;
    }
    #heroView .heroInner .kv {
        width: 100%;
        margin: 0 0 12%;
    }
    #heroView .heroInner .kv img {
        border-radius: 20px 0;
    }
    #heroView .heroInner .txtBox {
        width: 100%;
        display: block;
    }
    #heroView .heroInner .txtBox .logo {}
    #heroView .heroInner .txtBox .txt {}
    
    #heroView .artistLogo {
        width: 150px;
        top: 20px;
        left: 20px;
    }
    
    #heroView .snsWrap {
        bottom: 15px;
        right: 20px;
    }
    
    .scrollBox .scroll {
        width: 100px;
        height: 100px;
        position: absolute;
        left: -25px;
        bottom: -25px;
    }
	
}



/*===================================================
    movie
====================================================*/
#movie {
    padding: 40px 0 0;
}
#movie h3 {}
#movie .inBox {}

#movie .inBox .mov {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#movie .inBox .mov video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 40px 0 40px 0;
    box-shadow: 5px 5px #ffffff;
}

@media screen and (min-width: 961px){}

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

    #movie {
        padding: 20px 0 0;
    }

    #movie .inBox .mov video {
        border-radius: 20px 0 20px 0;
    }

}



/*===================================================
    schedule
====================================================*/
#schedule {}
#schedule h3 {}
#schedule .inBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#schedule .inBox .leftBox {
    width: 47.5%;
}
#schedule .inBox .leftBox .tourList {}
#schedule .inBox .leftBox .tourList li {}
#schedule .inBox .leftBox .tourList li .txt {}
#schedule .inBox .leftBox .tourList li .txt .innerLink {
    background: #FFF41F;
    display: block;
    padding: 15px 20px;
    text-align: center;
    color: #0086cd;
    max-width: 450px;
    width: 100%;
    font-weight: bold;
    margin: 0 auto 10px;
    border-radius: 100px;
}
#schedule .inBox .leftBox .tourList li:last-child .txt .innerLink {
    margin: 0 auto;
}
#schedule .inBox .leftBox .tourList li .txt .innerLink span {
    font-size: 12px;
    padding: 0 3px;
}
#schedule .inBox .leftBox .tourList li .txt .innerLink span.venue {
    font-size: 15px;
    padding: 0;
}

#schedule .inBox .rightBox {
    width: 47.5%;
    position: relative;
}
#schedule .inBox .rightBox .japan {}
#schedule .inBox .rightBox .pin {
    width: 7%;
    position: absolute;
}
#schedule .inBox .rightBox .pin.pin01 {
    right: 35.5%;
    bottom: 29.5%;
}
#schedule .inBox .rightBox .pin.pin02 {
    bottom: 22%;
    left: 14%;
}
#schedule .inBox .rightBox .pin.pin03 {
    right: 27.25%;
    top: 44.25%;
}
#schedule .inBox .rightBox .pin.pin04 {
    left: 33.5%;
    bottom: 22.5%;
}
#schedule .inBox .rightBox .pin.pin05 {
    left: 2.5%;
    bottom: 15.75%;
}
#schedule .inBox .rightBox .pin.pin06 {
    left: 42%;
    bottom: 27%;
}

/* op_modal */
.op_modal{}
.op_modal .modPop {
    display:none;
    width: 100%;
    height: 100%;
    color: #fff;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.op_modal .modPop.popActive {
    display:block;
}
.op_modal .modPop .popupShade{
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background: rgba(0 134 205 / 0.8);
    z-index: 0;
}

.op_modal .modPop .close {
    right: 30px;
    top: 30px;
    width: 45px;
    height: 45px;
    position: fixed;
    cursor: pointer;
    transition: 0.3s ease;
    transform: rotate(45deg);
    background: #FFF41F;
    border-radius: 100px;
}
.op_modal .modPop .close::before,
.op_modal .modPop .close::after {
    content: '';
    display: inline-block;
    width: 60%;
    height: 2px;
    background: #0086CD;
    position: absolute;
    left: 50%;
    top: 50%;
}
.op_modal .modPop .close::before {
  transform: translate(-50%,-50%);
}
.op_modal .modPop .close::after {
    transform: translate(-50%,-50%) rotate(90deg);
}

.op_modal .modPop .popInBox {
    width: 90%;
    max-width: 1100px;
    margin: 105px auto;
    padding: 40px;
    background: #fff;
    border-radius: 40px 0;
    box-shadow: #0086CD 5px 5px;
    color: #0086CD;
    font-size: 16px;
    line-height: 1.5;
    font-family: "Zen Maru Gothic", sans-serif;
}
.op_modal .modPop .popInBox .tourDateBox {}
.op_modal .modPop .popInBox .tourDateBox .tourDateList.listHead {
    padding: 0 0 10px;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList.listHead li {
    justify-content: center;
    font-size: 70%;
    font-weight: 600;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList.listHead li:after {
    display: none;
}

.op_modal .modPop .popInBox .tourDateBox .tourDateList {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #0086CD;
    padding: 0 0 15px;
    margin: 0 0 15px;
    position: relative;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList:last-child {
    margin: 0;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList li {
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList li:after {
    content: "";
    position: absolute;
    background: #0086CD;
    top: 5%;
    right: 0;
    width: 1px;
    height: 90%;
} 
.op_modal .modPop .popInBox .tourDateBox .tourDateList li.scheduleInfo:after {
    display: none;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleDate {
    width: 23%;
    font-size: 18px;
    font-weight: bold;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleDate .day {
    font-size: 14px;
    padding: 0 3px;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleDate .day.week {
    padding: 0 0 0 3px;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleArea {
    width: 9%;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleVenue {
    width: 23%;
    text-align: center;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleTime {
    width: 23%;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleTime span {
    display: inline-block;
    font-size: 12px;
    background: #0086CD;
    color: #FFF41F;
    padding: 0 10px;
    margin: 0 10px 0 0;
}
.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleInfo {
    width: 22%;
    justify-content: left;
    font-size: 70%;
    padding: 0 0 0 20px;
}
.op_modal .modPop .popInBox .tourDateList .scheduleInfo .scheduleInner i {
	padding: 0 3px 0 0;
	display: inline-block;
}
.op_modal .modPop .popInBox .tourDateList .scheduleInfo .scheduleInner .txt span {
    display: block;
    padding: 2px 0 0;
}
.op_modal .modPop .popInBox .tourDateList .scheduleInfo .scheduleInner .txt .phone,
.op_modal .modPop .popInBox .tourDateList .scheduleInfo .scheduleInner .txt .web {
	text-decoration: underline;
}
.op_modal .modPop .popInBox .tourDateList .scheduleInfo .scheduleInner .txt span .webInquiry {
	border-bottom: 1px solid;
}

@media screen and (min-width: 961px) {

    #schedule .inBox .leftBox .tourList li .txt .innerLink:hover {
        background: #0086cd;
        color: #FFF41F;
    }

    .op_modal .modPop .popInBox .tourDateList .scheduleInfo .scheduleInner .txt .phone a:hover,
    .op_modal .modPop .popInBox .tourDateList .scheduleInfo .scheduleInner .txt .web a:hover {
	    opacity: 0.7;
	}

}

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

    #schedule {}
    #schedule h3 {}
    #schedule .inBox {
        flex-direction: column-reverse;
    }

    #schedule .inBox .leftBox {
        width: 100%;
    }

    #schedule .inBox .leftBox .tourList {}
    #schedule .inBox .leftBox .tourList li {}
    #schedule .inBox .leftBox .tourList li .txt {}
    #schedule .inBox .leftBox .tourList li .txt .innerLink {
        padding: 10px 15px;
    }
    #schedule .inBox .leftBox .tourList li .txt .innerLink span {}
    #schedule .inBox .leftBox .tourList li .txt .innerLink span:nth-last-child(2) {
        padding: 0 0 0 3px;
    }
    #schedule .inBox .leftBox .tourList li .txt .innerLink span.venue {
        display: block;
    }

    #schedule .inBox .rightBox {
        width: 80%;
        max-width: 600px;
        margin: 0 auto 20px;
    }
    #schedule .inBox .rightBox .japan {}
    #schedule .inBox .rightBox .pin {}
    #schedule .inBox .rightBox .pin.pin01 {}
    #schedule .inBox .rightBox .pin.pin02 {}
    #schedule .inBox .rightBox .pin.pin03 {}
    #schedule .inBox .rightBox .pin.pin04 {}
    #schedule .inBox .rightBox .pin.pin05 {}
    #schedule .inBox .rightBox .pin.pin06 {}

    /* op_modal */
    .op_modal .modPop .close {
        right: 20px;
        top: 20px;
        width: 40px;
        height: 40px;
    }
    
    .op_modal .modPop .popInBox {
        padding: 20px;
        border-radius: 20px 0;
        margin: 80px auto;
    }

    .op_modal .modPop .popInBox .tourDateBox {}
    
    .op_modal .modPop .popInBox .tourDateBox .tourDateList.listHead {
        padding: 0;
    }
	.op_modal .modPop .popInBox .tourDateBox .tourDateList.listHead li {
	    display: none;
	}

	.op_modal .modPop .popInBox .tourDateBox .tourDateList {
        display: block;
        padding: 0 0 15px;
        margin: 0 0 10px;
	}
	.op_modal .modPop .popInBox .tourDateBox .tourDateList li {
	    padding: 0;
	    display: block;
	    font-size: 100%;
	}
	.op_modal .modPop .popInBox .tourDateBox .tourDateList li:after{
		display: none;
	} 
	.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleDate {
	    width: 100%;
        font-size: 16px;
        margin: 0 0 5px;
        font-weight: 400;
    }
    .op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleDate .day {
        font-size: 12px;
    }
    .op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleDate .area {}
	.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleDate .sp {
		padding: 0 0 0 10px;
	}
	.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleArea {
		display: none;
	}
	.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleVenue {
        width: 100%;
        text-align: left;
        font-size: 18px;
        margin: 0 0 10px;
        font-weight: bold;
	}
	.op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleTime {
        width: 100%;
        font-size: 14px;
        margin: 0 0 10px;
	}
    .op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleTime span {}
    .op_modal .modPop .popInBox .tourDateBox .tourDateList .scheduleInfo {
	    width: 100%;
	    padding: 0;
	    margin: 0;
	}

}



/*===================================================
    ticket
====================================================*/
#ticket {}
#ticket h3 {}
#ticket .inBox {}

#ticket .inBox .txtBox {
    padding: 40px;
    background: #fff;
    border-radius: 40px 0;
    margin: 0 auto 45px;
    box-shadow: #79bdd9 5px 5px;
}
#ticket .inBox .txtBox .detailBox {
    margin: 0 0 30px;
    padding: 0 0 25px;
    border-bottom: 1px solid #0086ce;
}
#ticket .inBox .txtBox .detailBox:last-child {
    margin: 0;
    padding: 0;
    border-bottom: none;
}
#ticket .inBox .txtBox .detailBox .detailTit {
    display: inline-block;
    background: #0086ce;
    color: #fff;
    border-radius: 10px 0 10px 0;
    font-weight: bold;
    padding: 5px 15px;
    margin: 0 0 10px;
}
#ticket .inBox .txtBox .detailBox .priceList {}
#ticket .inBox .txtBox .detailBox .priceList li {
    margin-bottom: 15px;
}
#ticket .inBox .txtBox .detailBox .priceList li:last-child {
    margin-bottom: 0;
}
#ticket .inBox .txtBox .detailBox .priceList li .priceTit {
    border-left: 3px solid;
    color: #0086ce;
    font-weight: bold;
    padding: 0 0 0 10px;
    margin: 5px 0 5px;
}
#ticket .inBox .txtBox .detailBox .priceList li .priceTxt {
    font-weight: bold;
}
#ticket .inBox .txtBox .detailBox .priceList li span {
    font-size: 12px;
    padding: 0px 0 0 3px;
}
#ticket .inBox .txtBox .detailBox .priceList li .priceNoto {
    padding: 10px 0 0;
}
#ticket .inBox .txtBox .detailBox .priceList li .priceNoto p {
    margin-bottom: 5px;
    text-indent: -1em;
    padding: 0 0 0 1em;
    font-size: 14px;
}
#ticket .inBox .txtBox .detailBox .priceList li .priceNoto p:last-child {
    margin-bottom: 0;
}
#ticket .inBox .txtBox .detailBox .detailTxt {
}
#ticket .inBox .txtBox .detailBox .detailTxt p {
    margin-bottom: 5px;
    position: relative;
    padding-left: 24px;
}
#ticket .inBox .txtBox .detailBox .detailTxt p span{
    position: absolute;
    left: 0;
}
#ticket .inBox .txtBox .detailBox .detailTxt p:last-child {
    margin-bottom: 0;
}

#ticket .inBox .op_ticket {
    margin: 0 0 25px;
}
#ticket .inBox .op_ticket:last-child {
	margin: 0;
}
#ticket .inBox .op_ticket .ticketTit {
    color: #fff;
    padding: 30px 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    background: #0086CE;
    border-radius: 40px 0;
    box-shadow: #fff 5px 5px;
}
#ticket .inBox .op_ticket .ticketTit.open {
    border-radius: 40px 0 0 0;
    box-shadow: #fff 5px 0;
    position: relative;
}
#ticket .inBox .op_ticket .ticketTit.open::before {
    z-index: -1;
    content: "";
    background-color: #fff;
    right: -5px;
    bottom: -5px;
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
}
#ticket .inBox .op_ticket .ticketTit span {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 15px;
    height: 15px;
    transform: rotate(180deg) translateY(50%);
    transition: 0.3s ease;
}
#ticket .inBox .op_ticket .ticketTit.open span {
    transform: translateY(-50%);
}
#ticket .inBox .op_ticket .ticketTit span:before {
    content: "";
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
}
#ticket .inBox .op_ticket .ticketDetail {
    display: none;
    padding: 0 40px 40px;
    background: #0086CE;
    border-radius: 0 0 40px 0;
    box-shadow: #fff 5px 5px;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox {
	display: flex;
    border-bottom: 1px solid #fff;
    color: #fff;
    padding: 0 0 20px;
    margin: 0 0 20px;
    align-items: center;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox:first-child {
    border-top: 1px solid #fff;
    padding: 20px 0;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox:last-of-type {
    margin: 0 0 40px;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .tit {
    width: 25%;
    text-align: center;
    font-weight: 600;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt {
    width: 75%;
    padding: 0 30px;
    border-left: 1px solid #fff;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .txtList {}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .txtList li {
    margin: 0 0 5px;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .txtList li:last-child {
    margin: 0;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .txtList li.listNote {
    font-size: 14px;
    text-indent: -0.5em;
    padding: 0 0 0 0.5em;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .attList {}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .attList li {
    font-size: 14px;
    text-indent: -1em;
    padding: 0 0 0 1em;
    margin: 0 0 5px;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .attList li:last-child {
    margin: 0;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList {}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li {
    font-size: 14px;
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid #ffffff50;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li:last-child {
    margin: 0;
    padding: 0;
    border-bottom: none;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li .infoListTit {
    margin: 0 0 5px;
    font-weight: bold;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li .infoListTxt {
    text-decoration: underline;
}
#ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li .infoListNote {
    font-size: 12px;
    padding: 5px 0 0;
}

#ticket .inBox .op_ticket .ticketDetail .btn a {
    font-size: 16px;
    text-align: center;
    background-color: #fff41f;
    color: #0086ce;
    width: 100%;
    max-width: 350px;
    text-decoration: none;
    border-radius: 100px;
    padding: 20px;
    display: block;
    margin: 0px auto;
    font-weight: bold;
}
#ticket .inBox .op_ticket .ticketDetail .btn.grayBtn a {
    pointer-events: none;
    background-color: #a3a3a3;
    color: #fff;
}

@media screen and (min-width: 961px){

    #ticket .inBox .op_ticket .ticketTit:hover {
        opacity: 0.7;
    }

    #ticket .inBox .op_ticket .ticketDetail .btn a:hover {
        background-color: #ffffff;
        color: #0086ce;
    }

}

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

    #ticket {}
    #ticket h3 {}
    #ticket .inBox {}

    #ticket .inBox .txtBox {
        padding: 20px;
        border-radius: 20px 0;
    }
    #ticket .inBox .txtBox .detailBox {
        margin: 0px 0 25px;
        padding: 0px 0 20px;
    }
    #ticket .inBox .txtBox .detailBox:last-child {}
    #ticket .inBox .txtBox .detailBox .detailTit {}
    #ticket .inBox .txtBox .detailBox .priceList {}
    #ticket .inBox .txtBox .detailBox .priceList li {}
    #ticket .inBox .txtBox .detailBox .priceList li:last-child {}
    #ticket .inBox .txtBox .detailBox .priceList li .priceTit {}
    #ticket .inBox .txtBox .detailBox .priceList li .priceTxt {}
    #ticket .inBox .txtBox .detailBox .priceList li span {}
    #ticket .inBox .txtBox .detailBox .priceList li .priceNoto {}
    #ticket .inBox .txtBox .detailBox .priceList li .priceNoto p {}
    #ticket .inBox .txtBox .detailBox .priceList li .priceNoto p:last-child {}
    #ticket .inBox .txtBox .detailBox .detailTxt {
        font-size: 14px;
    }
    #ticket .inBox .txtBox .detailBox .detailTxt p {}
    #ticket .inBox .txtBox .detailBox .detailTxt p:last-child {}

    #ticket .inBox .op_ticket {
        margin: 0px 0 15px;
    }
    #ticket .inBox .op_ticket .ticketTit{
        padding: 20px 45px 20px 20px;
        font-size: 16px;
        border-radius: 20px 0;
    }
    #ticket .inBox .op_ticket .ticketTit.open {
        border-radius: 20px 0 0 0;
    }
    #ticket .inBox .op_ticket .ticketTit span {
        right: 20px;
        width: 12px;
        height: 12px; 
    }
    #ticket .inBox .op_ticket .ticketDetail{
        padding: 0 20px 20px;
        border-radius: 0 0 20px 0;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox {
        display: block;
        padding: 0 0 15px;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox:first-child {
        border-top: 1px solid #fff;
        padding: 20px 0 15px;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox:last-of-type {
        margin: 0 0 20px;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .tit {
        width: 100%;
        text-align: left;
        padding: 0 0 0 10px;
        border-left: 3px solid;
        line-height: 1;
        margin: 0 0 10px;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt {
        width: 100%;
        border-left: none;
        padding: 0;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .txtList {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .txtList li {
        font-size: 14px;
    }
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .txtList li:last-child {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .txtList li.listNote {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .attList {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .attList li {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .attList li:last-child {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li:last-child {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li .infoListTit {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li .infoListTxt {}
    #ticket .inBox .op_ticket .ticketDetail .ticketInfoBox .txt .infoList li .infoListNote {}

    #ticket .inBox .op_ticket .ticketDetail .btn a {
        width: 90%;
    }
    #ticket .inBox .op_ticket .ticketDetail .btn.grayBtn a {}

}



/*===================================================
    fanclub
====================================================*/
#fanclub {}
#fanclub h3 {}
#fanclub .inBox {}

#fanclub .inBox .op_ticket {
    margin: 0 0 25px;
}
#fanclub .inBox .op_ticket:last-child {
	margin: 0;
}
#fanclub .inBox .op_ticket .ticketTit {
    color: #fff;
    padding: 30px 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    background: #0086CE;
    border-radius: 40px 0;
    box-shadow: #fff 5px 5px;
}
#fanclub .inBox .op_ticket .ticketTit.open {
    border-radius: 40px 0 0 0;
    box-shadow: #fff 5px 0;
    position: relative;
}
#fanclub .inBox .op_ticket .ticketTit.open::before {
    z-index: -1;
    content: "";
    background-color: #fff;
    right: -5px;
    bottom: -5px;
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
}
#fanclub .inBox .op_ticket .ticketTit span {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 15px;
    height: 15px;
    transform: rotate(180deg) translateY(50%);
    transition: 0.3s ease;
}
#fanclub .inBox .op_ticket .ticketTit.open span {
    transform: translateY(-50%);
}
#fanclub .inBox .op_ticket .ticketTit span:before {
    content: "";
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
}
#fanclub .inBox .op_ticket .ticketTit .tagBox {
    margin-bottom: 5px;
}
#fanclub .inBox .op_ticket .ticketTit .num {
    display: inline-block;
    background: #fff;
    color: #0086ce;
    border-radius: 10px 0 10px 0;
    font-weight: bold;
    padding: 3px 15px;
    min-width: 90px;
    margin: 0 10px 0 0;
    text-align: center;
    font-size: 20px;
}
#fanclub .inBox .op_ticket .ticketTit .tag {
    display: inline-block;
    color: #fff41f;
}
#fanclub .inBox .op_ticket .ticketTit .tit {}

#fanclub .inBox .op_ticket .ticketDetail {
    display: none;
    padding: 0 40px 40px;
    background: #0086CE;
    border-radius: 0 0 40px 0;
    box-shadow: #fff 5px 5px;
    color: #fff;
}
#fanclub .inBox .op_ticket .ticketDetail .detailLead {
    margin: 0 0 40px;
    padding: 0 0 40px;
    border-bottom: 1px solid;
}
#fanclub .inBox .op_ticket .ticketDetail .detailLead p {
    margin-bottom: 10px;
}
#fanclub .inBox .op_ticket .ticketDetail .detailLead p:last-child {
    margin-bottom: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .detailLead p.note {
    font-size: 14px;
    text-indent: -1em;
    padding: 0 0 0 1em;
}

#fanclub .inBox .op_ticket .ticketDetail .stampBox {}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .boxTit {
    font-weight: bold;
    border-left: 3px solid;
    padding: 0 0 0 10px;
    margin: 0 0 25px;
    font-size: 18px;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox {}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox:last-child {}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .area {
    display: inline-block;
    background: #fff;
    color: #0086ce;
    border-radius: 10px 0 10px 0;
    font-weight: bold;
    padding: 5px 15px;
    margin: 0 0 15px;
    min-width: 90px;
    text-align: center;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail {
    margin: 0px 0 5px;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail:last-child {
    border-bottom: 1px dashed #ffffff;
    margin: 0 0 30px;
    padding: 0 0 20px;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox:last-child .areaDetail:last-child {
    margin: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail .event {
    font-weight: bold;
    color: #fff41f;
    margin: 0 0 10px;
}

#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto {
    border-bottom: 1px dashed #ffffff;
    margin: 0 0 30px;
    padding: 0 0 30px;
    display: flex;
    justify-content: space-between;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto:last-child {
    margin: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .leftBox {}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .photo {
    width: 25%;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .area {}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .areaDetail {}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .areaDetail:last-child {
    border-bottom: none;
    margin: 0;
    padding: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto:last-child .areaDetail:last-child {
    margin: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .areaDetail .event {}

#fanclub .event_sp2 {
    font-weight: bold;
    color: #fff;
    margin: 0 0 15px;
}

#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail .nameList {
    display: flex;
    flex-wrap: wrap;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail .nameList li {
    font-size: 14px;
    border: 1px solid;
    border-radius: 10px 0 10px 0;
    font-weight: bold;
    padding: 5px 15px;
    margin: 0 10px 10px 0;
}
#fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail .nameList li:last-child {}

#fanclub .inBox .op_ticket .ticketDetail .detailTit {
    font-weight: bold;
    border-left: 3px solid;
    padding: 0 0 0 10px;
    margin: 0 0 25px;
    font-size: 18px;
}
#fanclub .inBox .op_ticket .ticketDetail .detailTxt {
    margin: 0 0 30px;
}
#fanclub .inBox .op_ticket .ticketDetail .detailTxt li {
    margin-bottom: 5px;
}
#fanclub .inBox .op_ticket .ticketDetail .detailTxt li.tit {
    color: #fff41f;
    font-weight: bold;
    font-size: 18px;
}
#fanclub .inBox .op_ticket .ticketDetail .detailTxt li:last-child {
    margin-bottom: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox {
    border-bottom: 1px dashed #ffffff;
    margin: 0 0 30px;
    padding: 0 0 25px;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox:last-child {
    margin-bottom: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox:last-of-type {}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .boxTit {
    display: inline-block;
    background: #fff;
    color: #0086ce;
    border-radius: 10px 0 10px 0;
    font-weight: bold;
    padding: 5px 15px;
    margin: 0 0 15px;
    min-width: 90px;
    text-align: center;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox {
    margin: 0 0 15px;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox:last-child {
    margin-bottom: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt {}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt p {
    margin-bottom: 5px;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt p:last-child {}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt p.indent {}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt p span {
    color: #fff41f;
    padding: 0 3px;
    font-weight: bold;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .attList {}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .attList li {
    font-size: 14px;
    text-indent: -1em;
    padding: 0 0 0 1em;
    margin: 0 0 5px;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .attList li:last-child {
    margin-bottom: 0;
}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .info {}
#fanclub .inBox .op_ticket .ticketDetail .txtBox .info a {
    color: #fff41f;
    text-decoration: underline;
}

#fanclub .inBox .op_ticket .ticketDetail .detailBtn {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}
#fanclub .inBox .op_ticket .ticketDetail .detailBtn .btn {
    width: 100%;
    max-width: 300px;
}
#fanclub .inBox .op_ticket .ticketDetail .detailBtn .btn:first-child {
    margin-right: 30px;
}
#fanclub .inBox .op_ticket .ticketDetail .detailBtn .btn a {
    font-size: 16px;
    text-align: center;
    background-color: rgb(255, 244, 31);
    color: rgb(0, 134, 206);
    display: block;
    font-weight: bold;
    text-decoration: none;
    border-radius: 100px;
    padding: 20px;
    margin: 0px auto;
}

@media screen and (min-width: 961px){

    #fanclub .inBox .op_ticket .ticketDetail .txtBox .info a:hover {
        opacity: 0.7;
    }

    #fanclub .inBox .op_ticket .ticketDetail .detailBtn .btn a:hover {
        background-color: #ffffff;
        color: #0086ce;
    }
    
}

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

    #fanclub {}
    #fanclub h3 {}
    #fanclub .inBox {}

    #fanclub .inBox .op_ticket {
        margin: 0px 0 15px;
    }
    #fanclub .inBox .op_ticket .ticketTit{
        padding: 20px 30px 20px 20px;
        font-size: 16px;
        border-radius: 20px 0;
    }
    #fanclub .inBox .op_ticket .ticketTit.open {
        border-radius: 20px 0 0 0;
    }
    #fanclub .inBox .op_ticket .ticketTit span {
        right: 20px;
        width: 12px;
        height: 12px; 
    }
    #fanclub .inBox .op_ticket .ticketTit .tagBox {}
    #fanclub .inBox .op_ticket .ticketTit .num {
        font-size: 16px;
    }
    #fanclub .inBox .op_ticket .ticketTit .tag {}
    #fanclub .inBox .op_ticket .ticketTit .tit {}

    #fanclub .inBox .op_ticket .ticketDetail{
        padding: 0 20px 20px;
        border-radius: 0 0 20px 0;
    }  
    #fanclub .inBox .op_ticket .ticketDetail .detailLead {
        font-size: 14px;
        margin: 0 0 30px;
        padding: 0 0 25px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .detailLead p {}
    #fanclub .inBox .op_ticket .ticketDetail .detailLead p:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .detailLead p.note {}

    #fanclub .inBox .op_ticket .ticketDetail .stampBox {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .boxTit {
        font-size: 16px;
        margin: 0 0 20px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .area {
        margin: 0 0 10px;
        font-size: 14px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail:last-child {
        margin: 0 0 20px;
        padding: 0 0 15px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail .event .event_sp2 {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail .nameList {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail .nameList li {
        font-size: 12px;
        margin: 0 5px 5px 0;
        padding: 5px 10px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox .areaDetail .nameList li:last-child {}

    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto {
        display: block;
        margin: 0 0 20px;
        padding: 0 0 20px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .leftBox {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .photo {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .area {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .areaDetail {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .areaDetail:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto:last-child .areaDetail:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .stampBox .areaBox.areaPhoto .areaDetail .event {}

    #fanclub .inBox .op_ticket .ticketDetail .detailTit {
        font-size: 16px;
        margin: 0 0 15px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .detailTxt {
        font-size: 14px;
        margin: 0 0 25px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .detailTxt li {}
    #fanclub .inBox .op_ticket .ticketDetail .detailTxt li.tit {
        font-size: 16px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .detailTxt li:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox {
        font-size: 14px;
        margin: 0 0 25px;
        padding: 0 0 20px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .txtBox:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .boxTit {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt p {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt p:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt p.indent {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .txt p span {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .attList {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .attList li {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .txtInBox .attList li:last-child {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .info {}
    #fanclub .inBox .op_ticket .ticketDetail .txtBox .info a {}

    #fanclub .inBox .op_ticket .ticketDetail .detailBtn {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 5px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .detailBtn .btn {
        width: 90%;
        margin: 0 auto;
    }
    #fanclub .inBox .op_ticket .ticketDetail .detailBtn .btn:first-child {
        margin: 0 auto 20px;
    }
    #fanclub .inBox .op_ticket .ticketDetail .detailBtn .btn a {}

}



/*===================================================
    attention
====================================================*/
#attention {}
#attention h3 {}
#attention .inBox {}

#attention .op_qa {}
#attention .op_qa:first-child {
    border-top: 1px dashed #22222250;
}
#attention .op_qa:last-child {
    margin: 0;
}
#attention .op_qa .qaList {
    margin-bottom: 20px;
    border-bottom: 1px dashed #22222250;
}
#attention .op_qa .qaList:last-child{
    margin-bottom: 0;
}
#attention .op_qa .qaTit{
    padding: 20px;
    font-size: 100%;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    font-weight: bold;
}
#attention .op_qa .qaTit.open {
    border-radius: 40px 0 0 0;
    box-shadow: #fff 5px 0;
    position: relative;
}
#attention .op_qa .qaTit.open::before {
    z-index: -1;
    content: "";
    background-color: #fff;
    right: -5px;
    bottom: -5px;
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
}
#attention .op_qa .qaTit span {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 12px;
    height: 12px;
    transform: rotate(180deg) translateY(50%);
    transition: 0.3s ease;
}
#attention .op_qa .qaTit.open span {
    transform: translateY(-50%);
}
#attention .op_qa .qaTit span:before {
    content: "";
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: rotate(-45deg);
}

#attention .op_qa .qaDetail{
    display:none;
    padding: 0 20px 20px;
}
#attention .op_qa .qaDetail .txtList {}
#attention .op_qa .qaDetail .txtList li {
    margin-bottom: 10px;
    font-size: 14px;
}
#attention .op_qa .qaDetail .txtList li:last-child {
    margin-bottom: 0;
}

@media screen and (min-width: 961px){}

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

    #attention {}
    #attention h3 {}
    #attention .inBox {}
    
    #attention .op_qa {}
    #attention .op_qa:first-child {}
    #attention .op_qa:last-child {}
    #attention .op_qa .qaList {}
    #attention .op_qa .qaList:last-child{}
    #attention .op_qa .qaTit{
        padding: 15px 20px;
        font-size: 14px;
    }
    #attention .op_qa .qaTit.open {}
    #attention .op_qa .qaTit.open::before {}
    #attention .op_qa .qaTit span {
        right: 10px;
        width: 10px;
        height: 10px;
    }
    #attention .op_qa .qaTit.open span {}
    #attention .op_qa .qaTit span:before {}
    
    #attention .op_qa .qaDetail{}
    #attention .op_qa .qaDetail .txtList {}
    #attention .op_qa .qaDetail .txtList li {}
    #attention .op_qa .qaDetail .txtList li:last-child {}

}