@charset "utf-8";


main{ width:100%; padding:0 1vw;}
.container{ width:92%; max-width: 1000px; margin: 0 auto;}

video#bgvid { position: fixed; left:50%; top: 50%; min-height:130vh; min-width:100vw;background-size: cover; opacity:1; overflow:hidden; z-index:-1;transform: translate3d(-50%, -50%, 0)}
.overlay { background-image: url(../images/bg_line.png);background-size: 3px; position: fixed; left: 0; top: 0; height: 100vh; width: 100%;z-index: -1;}
.sp_bg{ display:none;}

@media only screen and (max-width: 768px){
video#bgvid { display:none;}
.sp_bg{ display: block; background-image: url(../images/islandnagasaki.gif); background-repeat: no-repeat; background-size: cover; background-position: top left; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1;}
}


/********************** top *******************************/
body#top{ /*background-image:url(../images/main_bg.jpg);*/ width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed;}

section h3{ font-family: 'Barlow', sans-serif; font-size: 40px; font-weight: 300; letter-spacing: 0.5em; line-height: 1.5em; position: relative; margin-bottom: 70px; padding-left: 0.5em;}
section h3:after{ content: ""; position: absolute; border-left: 2px solid; left: 50%; bottom: -40px; height: 25px;}
section.nami_block{ position: relative;}
section.nami_block:before,
section.nami_block:after{ content: ""; position: absolute; background-repeat: no-repeat; background-size: cover; width:100%; height: 65px; left: 0;}
section.nami_block:before{ top: -65px;}
section.nami_block:after{ bottom: -65px;}

@media only screen and (max-width: 768px){
body#top{ background-image:none;}
body#top:before{ content: ""; position: fixed; top: 0; left: 0; /*background-image: url(../images/main_bg_sp.jpg);*/ background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; z-index: -1;}

section h3{ font-size: 30px; letter-spacing: 0.3em; padding-left: 0.3em; margin-bottom: 32px;}
section h3:after{ bottom: -18px; height: 16px; border-left: 1px solid;}
section.nami_block:before, 
section.nami_block:after{ height: 25px;}
section.nami_block:before{ top: -20px;}
section.nami_block:after{ bottom: -20px;}
}

/********************** artists *******************************/
#artists{ position: relative; background-color: #fff; /*background-image: url("../images/a_bg.jpg");*/ background-size: 520px; background-position: center; background-repeat: no-repeat; color: #1b76b3; padding: 42px 0; margin-bottom: 130px;}
#artists .container{ max-width: 1600px; width: 94%;}
#artists:before{ background-image: url("../images/nami_01.png");}
#artists:after{ background-image: url("../images/nami_02.png");}
#artists ul{}
#artists li{ display: inline-block; width: 33%; vertical-align: top; margin-bottom: 40px;}
#artists li h4{ font-size: 24px; font-weight: bold; line-height: 1.5em; display: table; width: 100%;}
#artists li h4 strong{ display: table-cell; vertical-align: middle;}
#artists li h4 span{ font-size: 0.6em; line-height: 1em; display: block;}
#artists li figure{ line-height: 0; margin-bottom: 10px; position: relative;}
#artists li figure img{ width: 100%;}
#artists li.and_more{ display: block; width: 100%; font-size: 20px; margin-top: 80px;}

#artists li.new figure:after{ content: "NEW!"; position: absolute; display: block; font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: bold; line-height: 1.5em; left: -12px; top: 2px; color: #000; background-color: #ffd512; width: 20%; height: 1.5em; max-width: 80px; transform: rotate(-19deg);}

@media only screen and (max-width: 768px){
#artists{ padding: 20px 0; background-image: none; margin-bottom: 50px;}
#artists li{ float: left; width: 100%; margin-right: 0%; margin-bottom: 15px;}
#artists li:nth-child(2n){ margin-right: 0;}
#artists li h4{ font-size: 18px;}
#artists li h4 span{ line-height: 1.5em;}
#artists li figure{ margin-bottom: 5px;}
#artists li.and_more{ font-size: 16px; margin-top: 40px;}

#artists li.new figure:after{ font-size: 10px; width: 5em; left: -5px; top: 0;}
}

/********************** about *******************************/
#about{ position: relative; background-color: #03375a; color: #fff; padding: 42px 0; margin-bottom: 0; z-index: 1;}
#about:before{ background-image: url("../images/nami_03.png");}
#about:after{ background-image: url("../images/nami_04.png");}
#about .txt_box{ text-align: center;}
#about .txt_box p{ font-size: 18px; font-weight: 500; line-height: 1.7em; margin-bottom: 1.5em;}
#about .txt_box p.end_txt{ font-size: 14px; text-align: center;}

#about .txt_box .lead{ font-size:2.1em; text-align:center; text-indent:0.5em; margin-bottom:1em;}

@media only screen and (max-width: 768px){
#about{ padding: 20px 0;}
#about .txt_box{ text-align: left;}
#about .txt_box p{ font-size: 13px; line-height: 1.4em; margin-bottom: 1em;}
#about .txt_box .lead{ font-size:1.5em; margin-bottom:0.7em;}
}

/********************** TICKETS *******************************/
#tickets{  position: relative; background-color: rgba(24,107,166,0.9); color: #fff; padding: 140px 0; margin-bottom: 0;}
#tickets .container{ max-width:800px;}

#tickets .tk_box{}
#tickets .ticket_block{ margin-bottom: 60px;}
#tickets .tk_box h4{ font-size: 55px; font-weight: bold; font-style: italic; line-height: 1.5em; margin-bottom: 10px;}
#tickets .tk_box .date{ font-size: 34px; line-height: 1.5em;}
#tickets .tk_box .date span{ font-size: 0.7em;}
#tickets .tk_box .date span.sp_span{ font-size: 0.7em;}
#tickets .tk_box .price{ margin-bottom: 30px;}
#tickets .tk_box .price img{ width:47%;}
#tickets .tk_box .price img:nth-child(1){ float: left;}
#tickets .tk_box .price img:nth-child(2){ float: right;}
#tickets .tk_box .notice_01{ margin-bottom: 50px;}
#tickets .tk_box .notice_01 p{ font-size: 16px; line-height: 1.5em;}
#tickets .tk_box .single_btn{ display: block; background-color: #dcab00; color: #fff; font-size: 30px; font-weight: bold; line-height: 1.5em; padding: 16px 0; border-radius: 50px;}
#tickets .tk_box .single_btn:hover{ opacity:0.9;}
#tickets .tk_box .notice_02{ margin-top: 30px; border: 1px solid #fff; padding: 30px 20px 25px; text-align: left;}
#tickets .tk_box .notice_02 strong{ font-size: 1.4em;}
#tickets .tk_box .notice_02 p{ font-size: 14px; line-height: 1.6em;}

#tickets .ticket_block .notice_s{ padding:20px 0 0;}

/* 受付終了 */
#tickets .ticket_block.end{ position: relative; color: #888; margin-bottom: 24px;}
#tickets .ticket_block.end:after{ content: "受付は終了しました"; position: absolute; background-color: rgba(255,0,0,0.7); color: #fff; font-size: 17px; font-weight: bold; line-height: 1.5em; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-9deg); width: 100%; max-width: 200px; padding: 2px 0 4px;}
#tickets .ticket_block.end h4{ font-size: 24px; margin-bottom: 0;}
#tickets .ticket_block.end .date{ font-size: 20px; margin-bottom: 0;}
#tickets .ticket_block.end .single_btn{ background-color: #444; color: #888; width: 50%; margin: 0 auto; font-size: 16px; padding: 6px 0; cursor: inherit;}


@media only screen and (max-width: 768px){
#tickets{ padding: 60px 0; margin-bottom: 0;}
#tickets .ticket_block{ margin-bottom: 30px;}
#tickets .tk_box h4{ font-size: 28px; margin-bottom: 12px;}
#tickets .tk_box .date{ font-size: 18px;}
#tickets .tk_box .date span{}
#tickets .tk_box .date span.sp_span{ display: block; line-height: 1.1em; font-size: 0.9em;}
#tickets .tk_box .price{ margin-bottom: 10px;}
#tickets .tk_box .price img{ width:100%;}
#tickets .tk_box .price img:nth-child(1),
#tickets .tk_box .price img:nth-child(2){ float: none;}
#tickets .tk_box .notice_01{ margin-bottom: 30px;}
#tickets .tk_box .notice_01 p{ font-size: 12px;}
#tickets .tk_box .single_btn{ font-size: 18px; padding: 12px 0;}
#tickets .tk_box .notice_02{ margin-top: 20px; padding: 20px 12px 12px;}
#tickets .tk_box .notice_02 p{ font-size: 13px; line-height: 1.4em;}

/* 受付終了 */
#tickets .ticket_block.end{ margin-bottom: 12px;}
#tickets .ticket_block.end:after{ font-size: 14px;}
#tickets .ticket_block.end h4{ font-size: 20px;}
#tickets .ticket_block.end .date{ font-size: 18px; margin-bottom: 0;}
#tickets .ticket_block.end .single_btn{ width: 80%; font-size: 12px; padding: 4px 0;}
}


/********************** NOTICE *******************************/
#notice{ background-color: #fff; padding: 42px 0; margin-bottom: 70vh;}
#notice:before{ background-image: url("../images/nami_01.png");}
#notice:after{ background-image: url("../images/nami_02.png");}
#notice h3{}
#notice .contents{ text-align: left; border-bottom: 1px solid; margin-bottom: 16px; padding-bottom: 16px;}
#notice .contents h4{ font-size: 16px; font-weight: bold; line-height: 1.5em; margin-bottom: 15px;}
#notice .contents ul{ list-style: circle; padding-left: 17px;}
#notice .contents li{ font-size: 14px; line-height: 1.4em; border-top: 1px dashed #cbd5ef; margin-top: 8px; padding-top: 8px;}

@media only screen and (max-width: 768px){
#notice{ padding: 20px 0; margin-bottom: 100px;}
#notice .contents{ margin-bottom: 8px; padding-bottom: 8px;}
#notice .contents h4{ font-size: 14px; margin-bottom: 0;}
#notice .contents ul{ padding-left: 15px;}
#notice .contents li{ font-size: 12px; line-height: 1.3em; margin-top: 6px; padding-top: 6px;}
}


/* note */
.note{ border: 1px solid; padding: 50px; max-width: 1000px; margin: 0 auto 60px;}
.note p{ font-size: 18px; line-height: 2em; margin-bottom: 1.5em; text-align: left;}
.note p.tit{ font-size: 24px !important; font-weight: bold; line-height: 1.5em; text-align: center;}
.note p:last-child{ margin-bottom: 0; margin-top: 2.5em; font-weight: bold; text-align: center;}
.note a{ display: inline-block; padding: 0 6px; font-weight: bold; border-bottom: 1px solid;}

#refund p{ font-size: 16px; line-height: 2em;}

.note p strong{ display: block; font-size: 18px; line-height: 1.5em; background-color: #e1f3ff; padding: 2px 14px; margin-bottom: 6px;}

.note .in_box{ background-color: #1b76b3; color: #fff; padding: 50px; font-size: 20px; line-height: 2em; margin-bottom: 34px;}
.note .in_box span{ font-size: 24px; line-height: 2em;}

@media only screen and (max-width: 768px){
.note{ padding: 20px 12px; margin-bottom: 20px;}
.note p{ font-size: 16px; line-height: 1.6em;}
.note p.tit{ font-size: 16px !important;}
.note p:last-child{}
.note a{ padding: 0 6px; margin: 0 4px;}

#refund p{ font-size: 14px; line-height: 1.6em;}

.note p strong{ font-size: 16px; line-height: 1.4em; padding: 4px 12px 6px; margin-bottom: 6px;}

.note .in_box{ padding: 20px 12px; font-size: 14px; line-height: 1.7em; margin-bottom: 10px;}
.note .in_box span{ font-size: 20px;}
}



/********************** SNS *******************************/
.sns{ text-align: center; margin-bottom: 4px;}
.sns li{ display: inline-block; vertical-align: middle; width: 26px; margin: 0 3px;}
.sns li img{ width: 100%;}



/*lightbox*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#ccc;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#fff;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}