@import url(https://fonts.googleapis.com/css?family=Oswald);


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
}
body{
    background:#000;
    color:#fff;
	font: 14px/1.7 "Oswald",'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS P Gothic',Arial,sans-serif;
}

.inr{
    width:1024px;
    margin:0 auto;
    max-width:90%;
}

section:not(.mainvisual) .inr{
    position:relative;
}

img{
    max-width:100%;
}

h2{
    font-size:3em;
    text-align:center;
    margin-bottom:2em;      
    font-family:"Oswald", sans-serif;
}

.wrapper:before {
    content: '';
    background: url(../img/bg.png) left top no-repeat;
    background-size: 100%;
    width: min(70%, 1100px);
    height: 100vh;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    opacity: .2;
    z-index: 0;
    filter: grayscale(1);
}

@media screen and (max-width:961px){
    .wrapper:before{
        width:120%;
    }
}

.sp{
    display:none;
}

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

    .pc{
        display:none;
    }
}



section{
    padding:5em 0;
}

section#top {
    padding: 0;
}

@media screen and (max-width:961px){
    h2{
        font-size:2em;
        margin-bottom:1em;
    }

    section{
        padding:3em 0;
    }
}


.mainvisual{
    position:relative;
    height:100dvh;
    min-height:700px;   
    font-family:"Oswald", sans-serif;
}

.mainvisual .fv_area{
    transform:translate(-50%, -50%);
    position:absolute;
    top:50%;
    left:50%;
    animation:opty 2s;
}

.mainvisual p{
    font-weight:bold;
    text-align:center;
    font-size:clamp(2vw, 3em , 6vw);
}

.mainvisual p.sub{
    scale:.8;
    margin-bottom:0.5em;
}

.mainvisual .fv_area .ev_year{
    font-family:"Oswald", sans-serif;
    font-size:clamp(4vw, 3em , 6vw);
    text-align:right;
    margin-right:0.3em;
    line-height:1.2em;
    font-weight:bold;
}

@keyframes opty{
    0%{
        opacity:0;
        transform: translate(-50%, -50%) scale(1.1);
    }

    100%{
        opacity:1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media screen and (max-width:961px){
    .mainvisual .fv_area{
        min-width:80%;
        top:60%;
    }

    .act .sep_txt{
        flex-wrap:wrap;
    }

    .act .sep_txt .oneday{
        width:100%;
    }
}

.caution{
    background:#11111180;
}




.act{
    font-family:"Oswald", sans-serif;
    background:#191919; 
}

.act:has(.sep_txt){
    background:#e6001280; 
}

.act .sep_txt{
    display:flex;
    justify-content:space-between;
}

.act .sep_txt .oneday{
    width:calc(50% - 1.5em);
}

.act .oneday{
    margin-bottom:5em;
}

.act .oneday p{
    font-size:1.3em;
}

.act .oneday .date{
    font-size:2em;
    position:relative;
    display:flex;
    overflow:hidden;
    align-items:center;
    margin-bottom:0.5em;
}

.act .oneday .date:after{
    content:'';
    width:100%;
    height:1px;
    background:#ffffff;
    margin-left:0.5em;
}

.act ul{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.act ul:after{
    content:'';
    width:33%;
}

.act ul li{
    width:33%;
    position:relative;
    margin-bottom:0.5%;
}

.act ul li figure{
    position:relative;
    overflow:hidden;
    width:100%;
    padding-top:66.72%;
}

.act ul li figure img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;
    z-index:1;
}

.act ul li figure img.blur{
    filter:blur(10px);
    object-fit:cover;
    transform:translate(-50%, -50%) scale(1.3);
    z-index:0;
}

.act ul li span {
    position:absolute;
    display:block;
    width:100%;
    padding:0.5em;
    text-align:center;
    bottom:0;
    background:#00000080;
    box-sizing: border-box;
    line-height:1em;
    z-index:1;
}

.act ul li strong{
    position: absolute;
    transform: translate(-50%, -50%) rotate(-10deg);
    top: 50%;
    left: 50%;
    background: #cc2222cc;
    z-index: 5;
    padding: 0 1em;
    font-size: 2.5em;
}

@media screen and (min-width:961px){
    .act ul li span{
        font-size:1.2em;
    }
}

@media screen and (max-width:961px){
    .act ul li {
        width:49.5%;
    }

    .act .oneday .date{
        font-size:1.4em;
    }

    .act ul li strong{
        font-size:2em;
    }

    .act .sep_txt{
        flex-wrap:wrap;
    }

    .act .sep_txt .oneday{
        width:100%;
    }
}

.timetable ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

.timetable ul li{
    width:49%;
}

@media screen and (max-width:961px){
    .timetable ul li{
        width:100%;
        margin-bottom:1em;
    }
}

.ticket{
    text-align:center;
    letter-spacing:0.1em;
    background:#111;
}

.ticket .price{
    font-size:1.2em;

}

.ticket .price em {
    background: #ffffff50;
    padding: 0 0.2em;
    font-size: .7em;
}

.ticket .tct_area{
    margin:3em 0;
}


.ticket .tct_area a {
	border-radius:5px;
	display:inline-block;
	width: 50px;;
	margin:1em 0;
    padding:.5em;
}

.ticket a.pia {background:#3264c8;}
.ticket a.lowson{background:#0074be;}
.ticket a.eplus{background:#ee6aaa;}
.ticket a.ikn{background:#dd3333}

.ticket a.pre{
    pointer-events:none;
    filter:grayscale();
    opacity:.8;
}

.ticket ul li {
    padding:2em;
    margin-bottom:1em;
    border:solid 1px #ffffff30;
    background:#33333380;;
}

.ticket ul li span {
    font-size:.8em;
    display:block;
}

.ticket ul li strong{
    display:block;
    text-align:center;
    font-size:1.1em;
    font-weight:bold;
}

.ticket .tct_area ul li.end{
    position:relative;
    opacity:.7;
}

.ticket .tct_area ul li.end a {
    pointer-events:none;
    filter:grayscale();
    opacity:.8;
}

.ticket ul li.pre a,
.ticket ul li.end a{
    pointer-events: none;
    filter:grayscale();
    opacity:.7;
}

.ticket ul li.end:after {
    content: '受付期間終了';
    background: #cc2222cc;
    padding: 0.1em 0.5em;
    position: absolute;
    transform: rotate(-1deg) translate(-50%, -50%);
    top: 50%;
    left: 50%;
    letter-spacing: 0.5em;
    padding-left: 1em;
    display: inline-block;
    font-size: 1.2em;
    /* border: dotted 1px; */
    font-weight: bold;
}

.ticket ul li.sold.end:after{
    content:'SOLD OUT';
}



.detail{
    background:#191919;
}

.detail dl{
    display:flex;
    justify-content:space-between;
    margin-bottom:1px;
}

.detail dl dt{
    padding:1em;
    background:#ffffff20;
    width:calc(20% - 1px);
    text-align:right;
}

.detail dl dd{
    width:80%;
    padding:1em;
    background:#ffffff10;
}

.contact h3{
    width:70%;
    padding:.5em 1em;
    margin:0 auto;
    background:#ee6aaa;
}

footer{
    padding:1em 0 10em;
    text-align:center;
}

footer small{
    font-size:.7em;
    opacity:.5;
}

@media screen and (max-width:961px){
    .detail dl{
        flex-wrap:wrap;
    }

    .detail dl dt,
    .detail dl dd{
        width:100%;
        text-align:left;
    }
}