body{padding-top: 93px;}

@media(max-width:750px){
body{padding-top: 180px;}


}

#subVisual{position: relative; overflow: hidden; width: 100%;min-width: 1000px;padding-bottom: 50px;}

#subVisual >.inner{ width: 1000px; margin: 0 auto;padding:70px 0 0 0; position: relative; z-index: 2;}

@media(max-width:750px){
#subVisual{position: relative; overflow: hidden; width: 100%;min-width:auto;padding-bottom: 50px;}
#subVisual >.inner{ width: auto; margin: 0 auto;padding:130px 20px 0; position: relative; z-index: 2;}
}


#subVisual header{ text-align: center;}

#subVisual header p{ font-size:16px; color: #b5263f; margin-bottom: 10px;}
#subVisual header h2{font-size: clamp(38px, 3vw, 60px); color: #b5263f; margin-bottom: 30px; font-weight: 900;letter-spacing: 0.1em;}

#subVisual .introTxt{ width: 450px; margin: 0 auto; font-size: 14px; margin-bottom: 30px;}

@media(max-width:750px){

#subVisual .introTxt{ width: 500px; margin: 0 auto; font-size: 24px; margin-bottom: 30px;}
}

#subVisual .start{transition: all  0.7s ease;}

.sideCard01,
.sideCard02,
.sideCard03,
.sideCard04{ position: absolute;  width: 490px;transition: all  0.7s ease;}


.sideCard01 img,
.sideCard02 img,
.sideCard03 img,
.sideCard04 img{
box-shadow: 0px 3px 15px -5px #df2a82;
border-radius: 17px;
border:5px solid #fff;
}



.sideCard01{ transform: rotate(10deg); top: 50px; left: -240px;}
.sideCard02{ transform: rotate(-15deg); top: 320px; left: -230px;}
.sideCard03{ transform: rotate(-10deg); top: 50px; right: -230px;}
.sideCard04{ transform: rotate(10deg); top: 330px; right: -240px;}

.sideCard01.start{ transform: rotate(20deg); top: 0px; left: -340px; opacity: 0;}
.sideCard02.start{ transform: rotate(-25deg); top: 370px; left: -330px; opacity: 0;}
.sideCard03.start{ transform: rotate(-20deg); top: 0px; right: -330px; opacity: 0;}
.sideCard04.start{ transform: rotate(20deg); top: 380px; right: -340px; opacity: 0;}

#subVisual{}
#subVisual header p,
#subVisual header h2,
#subVisual .introTxt,
#subVisual p.tac{transition: all  0.7s ease;}

#subVisual header p.start{ opacity: 0;}
#subVisual header h2.start{opacity: 0;}
#subVisual .introTxt.start{opacity: 0;}
#subVisual p.tac.start{opacity: 0;}


@media(max-width:750px){
.sideCard01{ transform: rotate(10deg); top: 30px; left: -370px;}
.sideCard02{ transform: rotate(-15deg); top: 370px; left: -400px;}
.sideCard03{ transform: rotate(-10deg); top: 30px; right: -370px;}
.sideCard04{ transform: rotate(10deg); top: 370px; right: -400px;}

.sideCard01.start{ transform: rotate(20deg); top: -70px; left: -450px;}
.sideCard02.start{ transform: rotate(-25deg); top: 470px; left: -480px;}
.sideCard03.start{ transform: rotate(-20deg); top: -70px; right: -450px;}
.sideCard04.start{ transform: rotate(20deg); top: 470px; right: -480px;}
}



.topsec{ background: #666;}
.topsec >.inner{ width: 1000px; display: flex; margin: 0 auto;padding: 50px 0;}
.topsecCont{ width: 45%;}
.topsecImage{ width: 55%;}
.topsecImage img{ object-fit: cover; border-radius: 10px;}
.topsecCont header h3{ width: 200px;}
.topsecCont header p{ font-size: 20px; color: #fff;padding: 0 0 10px;}

.topsec p.topsecContTxt{ font-size: 14px; color: #fff; width: 90%; margin-bottom: 20px;}

@media(max-width:750px){
.topsec >.inner{ width: auto; display: flex; margin: 0 50px;padding: 50px 0;}
.topsecCont header h3{ width: 260px;margin-bottom: 10px;}
.topsecCont header p{ font-size: 20px; color: #fff;padding: 0 10px 10px 0; line-height: 1.3em;}
.topsec p.topsecContTxt{ font-size: 22px; color: #fff; width: 90%; margin-bottom: 20px;}
}


#topsecMUSEUM{ background:#c12323 url(/asset/images/top/bg_shima2.png) no-repeat left -50px top; background-size:1200px;}
#topsecSHOP{ background:#E4825c url(/asset/images/top/bg_shima2.png) no-repeat left -50px top; background-size:1200px;}

.topseMUSEUMImages{
    width: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    height: 100%;
}


.topseMUSEUMImages li{ height: 100%;}
.topseMUSEUMImages.objectfit li>.inner{height: 100%;}
.topseMUSEUMImages.objectfit li img{ object-fit: cover; border-radius: 10px;}

@media(max-width:750px){

.topseMUSEUMImages{
    width: auto;
    margin: 0 auto 0 40px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    height: 100%;
}

}



@media(max-width:750px){
#topsecSHOP .topsecImage .sp{ margin-left: 40px;}
}

.topsec2{ background: #eb9292 url(/asset/images/top/bg_shima2.png) no-repeat left -50px top;background-size: 1200px;}
.topsec2 >.inner{ width: 1000px; margin: 0 auto;padding: 50px 0;}

.topsec2 .topsecCont{ width: 100%;}

.topsec2 header{ position: relative;}
.topsec2 header h3{ width: 200px;}
.topsec2 header p{ color: #fff;padding-bottom: 30px;}

.topsec2 header p.ticketHdTxt{ position: absolute; right:0; bottom:0; width: 500px; font-size: 100%; text-align: right;}

.topTicketBody{border: 4px solid #7e2523; background: #fff;padding: 40px; box-sizing: border-box; border-radius: 10px;}

@media(max-width:750px){
.topsec2 header h3{ width: 260px;}
.topsec2 >.inner{ width: auto; margin: 0 auto;padding: 50px;}

.topsec2 header p.ticketHdTxt{ position: absolute; right:0; bottom:0; width: 400px; font-size: 95%; text-align: left;}

}