.topcontainer {
    max-width: 1560px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.title_text {
    width: 60%;
}

#youtube iframe {
    width: 100%;
    border-radius: 20px;
}

.swiper-slide {
    width: 100%;
    height: 700px;
    /* height: auto; */
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

.swiper-slide .bgImg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.bgImgInner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-repeat: repeat-x;
}


.slide1 .bgImgInner {
	background-image: url(../images/top/img_slide_01.jpg);
	width: calc(2659px * 2);/*width: calc(3536px * 2);*/
}
.slide2 .bgImgInner {
	background-image: url(../images/top/img_slide_02.jpg);
	width: calc(2136px * 2);/*width: calc(2924px * 2);*/
}
.slide3 .bgImgInner {
	background-image: url(../images/top/img_slide_03.jpg);
	width: calc(2053px * 2);/*width: calc(2787px * 2);*/
}
.slide4 .bgImgInner {
	background-image: url(../images/top/img_slide_04.jpg);
}
.slide5 .bgImgInner {
	background-image: url(../images/top/img_slide_05.jpg);
}
.slide6 .bgImgInner {
	background-image: url(../images/top/img_slide_06.jpg);
}
.slide7 .bgImgInner {
	background-image: url(../images/top/img_slide_07.jpg);
}

.slide_link {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	position: relative;
}
.swiper-slide  .slide_ttl {
	position: relative;
	z-index: 2;
	padding: 0;
}
.swiper-slide h1.slide_ttl {
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    transform:none;
    width:auto;
    min-width:auto;

}
@media screen and (max-width: 900px) {
	#top-section1 {
		height: auto !important;
		position: relative;
	}
	.swiper-container {
		top: 0;
	}
	.slide_link {
		display: block;
		box-sizing: border-box;
		padding-top: calc(35 / 6.4 * 1vw);
	}
	.swiper-slide {
		width: 100%;
		height: 103.12vw;
		margin: 0 auto;
		text-align: center;
		box-sizing: border-box;
		position: relative;
	}

	.slide1 .bgImgInner {
		background-image: url(../images/top/img_slide_01-sp.jpg);
		width: 100%;
	}
	.slide2 .bgImgInner {
		background-image: url(../images/top/img_slide_02-sp.jpg);
		width: 100%;
	}
	.slide3 .bgImgInner {
		background-image: url(../images/top/img_slide_03-sp.jpg);
		width: 100%;
	}
	.slide4 .bgImgInner {
		background-image: url(../images/top/img_slide_04-sp.jpg);
	}
	.bgImgInner {
		background-repeat: no-repeat;
		background-size: cover;
	}

}

.bnrcontainer {
    width: 100%;
    height: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

#bnrflow {
    top: 200px;
    width: 100%;
    position: absolute;
}
#top-section1{
    position: relative;
}

#top-section1 .topcontainer {
    min-height: 680px;
}

#ticketbtn {
    position: absolute;
    right: 10%;
    bottom: 40px;
    z-index: 10;
}
#ticketbtn a {
	display: flex;
	height: 100%;
	justify-content: flex-end;
	align-items: flex-end;
}
@media screen and (max-width: 350px) {
    #ticketbtn{
        width: 150px;
    }
    #ticketbtn img{
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 900px) {
	#ticketbtn {
		position: absolute;
		right: 20px;
		top: auto;
		bottom: 20px;
		z-index: 10;
/*		width: calc(204 / 6.4 * 1vw);*/
		width: 102px;
/*		height: calc(204 / 6.4 * 1vw);*/
		height: 102px;
	}
	#ticketbtn img {
		max-width: 100%;
		width: auto;
	}
}



.tel {
    margin-bottom: 10px;
}

#youtube .span_8 {
    padding: 6px;
    color: #727171;
}

#youtube h3 {
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    margin: 13px 0 5px;
}

/*
* card
*/

#card1,
#card2,
#card3,
#card4,
#card7,
#card8 {
    height: 350px;
    text-align: center;
    margin: 0 6px;
    border-radius: 20px;
    margin-bottom: 12px;
    pointer-events: initial;
}
@media screen and (max-width: 640px) {
    #card1,
    #card2,
    #card3,
    #card4,
    #card7,
    #card8 {
        height: 250px;
    }
}
#top-main .topcontainer #card5,
#top-main .topcontainer #card6 {
    text-align: center;
    margin: 0 6px;
    border-radius: 20px;
    margin-bottom: 12px;
    pointer-events: initial;
    padding-top: 138.33%;
}
@media screen and (max-width: 640px) {
    #card5,
    #card6 {
        height: 500px;
    }
}

#card1 {
    background: url(../images/top/card1.png) top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#card2 {
    background: url(../images/top/card2.png) top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#card3 {
    background: url(../images/top/card3.png) top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#card4 {
    background: url(../images/top/card4.png) top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#card5 {
    background: url(../images/top/card5.png) top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#card6 {
    background: url(../images/top/card6.png) top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#card7 {
    background: url(../images/top/card7.png) top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#card8 {
    background: url(../images/top/card8.png) top center;
    background-size: cover;
    background-repeat: no-repeat;
}
#card8:hover {
    cursor: pointer;
    opacity: 0.9
}


.video {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #fff;
	z-index: 1;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video iframe html{
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

#card1 h2,
#card2 h2,
#card3 h2,
#card4 h2,
#card5 h2,
#card6 h2,
#card7 h2,
#card8 h2 {
    margin: 0 auto;
}
@media screen and (max-width: 640px) {
    #card1 h2,
    #card2 h2,
    #card3 h2,
    #card4 h2,
    #card7 h2,
    #card8 h2 {
        /*padding-top: 50px;*/
    }
}
#card1 h2,
#card2 h2,
#card3 h2,
#card4 h2,
#card7 h2,
#card8 h2 {
    /*padding-top: 24%;*/
    margin: 0 auto;
}
/*#card1 h2{
    width: 69.166%;
}
#card1 h3{
    width: 34.166%;
}

#card2 h2{
    width: 55.83%;
}
#card2 h3{
    width: 50%;
}

#card3 h2{
    width: 11.66%;
}
#card3 h3{
    width: 38.33%;
}

#card4 h2{
    width: 22.5%;
}
#card4 h3{
    width: 63%;
}

#card5 h2{
    width: 54.16%;
}
#card5 h3{
    width: 57.5%;
}

#card6 h2{
    width: 65%;
}
#card6 h3{
    width: 72.5%;
}

#card7 h2{
    width: 70%;
}
#card7 h3{
    width: 56.66%;
}

#card8 h2{
    width: 20.83%;
    margin: 0 auto;
}
#card8 h3{
    width: 55.5%;
    margin: 10px auto;
}*/

#card8 a.tel{
    display: block;
    width: 53.33%;
	margin: 0 auto;
    margin-bottom: 20px;
    text-align: right;
    /*margin-bottom: 20px;*/
}
@media screen and (max-width: 900px) {
	#card8 a.tel{
		text-align: center;
	}
}
@media screen and (max-width: 640px) {
	#card8 a.tel{
		text-align: center;
	}
}

#card8 a img{
/*    width: 87.5%;*/
}


@media screen and (max-width: 900px) {
    #card1 h2,
    #card2 h2,
    #card3 h2,
    #card4 h2,
    #card7 h2,
    #card8 h2 {
        /*padding-top: 50px;*/
    }
}

#card1 h3,
#card2 h3,
#card3 h3,
#card4 h3,
#card5 h3,
#card6 h3,
#card7 h3,
#card8 h3{

    font-size: 18px;
    color: #FFFFFF;
    font-weight: normal;
    margin: 20px auto;
}

@media screen and (max-width: 640px) {
    #card1 h3,
    #card2 h3,
    #card3 h3,
    #card4 h3,
    #card5 h3,
    #card6 h3,
    #card7 h3,
    #card8 h3 {
        font-size: 18px;
        color: #FFFFFF;
        font-weight: normal;
        /*margin: 30px 0;*/
    }

    /* #card8 h3 {
        margin: 10px auto 0 auto;
    } */
}

/*  2018.3/23 add*/
object a, a:link, a:visited {
    color: #fff;
}
.displayblock {
    display: block;
}
.txtcenter{
    text-align: center;
}
.hauto {
    height: auto;
    margin: 3px 0 6px;
    margin-right: 13px;
}

#card1 img,
#card2 img,
#card3 img,
#card4 img,
#card5 img,
#card6 img,
#card7 img,
#card8 img {
    max-width: 100%;
    width: auto;
/*    height: auto;*/
}




#instagram {
    background-repeat: no-repeat;
    height: 270px;
    z-index: 100;
    height: auto;
    display: block;
    position: relative;
}
#instagram::after {
    content: "";
    display: block;
    height: 80px;
    width: 80px;
    position: absolute;
    background: url(../images/top/btn-insta.png) top center;
    background-repeat: no-repeat;
    z-index: 10;
    top: -78px;
    left: 0;
    right: 0;
    margin: auto;
}
@media screen and (max-width: 640px) {
    #instagram {
        top: 30px;
        padding-bottom: 35px;
    }
}

.swiper-container2 img {
    width: 100%;
    height: auto;
}

.swiper-container2 {
    overflow: hidden;
}
@media screen and (max-width: 900px) {
    .swiper-container2 {
        padding-left: 12px;
    }
}


.swiper-button-next2 {
    background-image: url(../images/common/next2.png);
    -webkit-background-size: contain;
    background-size: contain;
    right: 39%;
    bottom: 40px;
    top: initial;
    width: 35px;
    height: 35px;
    left: auto;
    position: absolute;
    z-index: 999;
    display: block;
}
@media screen and (min-width: 641px) {
    .swiper-button-next2 {
        right: 5%;
        top: 0;
        bottom: 0;
        width: 48px;
        height: 48px;
        margin: auto;
        position: absolute;
    }
}

.swiper-button-prev2 {
    background-image: url(../images/common/prev2.png);
    background-size: contain;
    left: 39%;
    bottom: 40px;
    top: initial;
    width: 35px;
    height: 35px;
    right: auto;
    position: absolute;
    z-index: 999;
    display: block;
}
@media screen and (min-width: 641px) {
    .swiper-button-prev2 {
        left: 5%;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 48px;
        height: 48px;
        position: absolute;
    }
}