/*
Theme Name: Nagaoka Hanabi
*/

/*=====================
faq(よくある質問)
=====================*/
.accordionOpen > p > a,
.faqTextWrap a{
	color: #e5005e;
}

.faqTextWrap{
	margin-bottom: 1.25rem;
}

.faqTextBold{
	font-weight: bold;
	padding: 0.75rem 0;
}

.boxFaqList{
	list-style-type: disc;
	margin-left: 1rem;
}

/*=====================
anime(アニメーションで伝承)
=====================*/
.boxAnimeAore > .btnFile{
	margin-top: 1rem;
}

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

.boxAnimeOvervie{
	width: 48%;
}
.ttlAnimeOvervie{
	font-weight: bold;
}

.textAnimeOvervie{
	margin-bottom: 1rem;
}
.listAnimeOvervie{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.listAnimeOvervie dt{
	width: 20%;
	position: relative;
}

.listAnimeOvervie dt:before{
	content: ":";
	position: absolute;
	top: 0;
	right: -0.75rem;
}

.listAnimeOvervie dd{
	width: 80%;
	padding-left: 1rem;
}
.imgAnimeOverview{
	text-align: center;
	margin-bottom: 1rem;
}

.boxAnimeScenario{
	width: 100%;
	text-align: center;
}
.btnboxAnimeScenario{
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}
.btnAnimeScenario{
	margin: 1rem 0.75rem;
	text-align: center;
}

@media screen and (max-width: 767px){
	.btnAnimeAore{
		width: 100%;
	}
	
	.wrapAnimeOverview{
		display: block;
		justify-content: space-between;
	}
	
	.boxAnimeOvervie{
		width: 100%;
	}
	
	.btnboxAnimeScenario{
		display: block;
	}
}

/*=====================
ticket(チケット情報)
=====================*/
.boxTicketSchedule {
	text-align: center;
}
.boxTicketBtn{
	display: flex;
	flex-flow: row wrap;
	margin-top: 1.25rem;
}
.btnTicket{
	position: relative;
	flex-flow: column nowrap;
	width: calc(99% / 2);
	padding: 3rem 2rem;
	font-size: 2.4rem;
	line-height: 150%;
}
.btnTicket:first-child {
	margin-right: auto;
}
.btnTicket span {
	font-size: 1.6rem;
}
.boxTicketReg{
	display: flex;
	justify-content: space-between;
}

.boxTicketBridge,
.boxTicketImg{
	width: 48%;
}

.textTicketBridge{
	border-left: 2px solid #f0f0f0;
	padding-left: 1rem;
}

.textTicketBold{
	font-weight: bold;
}

.ttlTicketReg{
	font-weight: bold;
	color:#ECE000;
}

@media screen and (max-width: 767px){
	.btnTicket{
		padding: 1rem 0.5rem;
		font-size: 1.6rem;
	}
	.btnTicket span {
		font-size: 1rem;
	}
	
	.boxTicketReg{
		display: block;
	}
	
	.boxTicketBridge,
	.boxTicketImg{
		width: 100%;
	}
	
	.boxTicketImg{
		margin-bottom: 1.25rem;
	}
	@media (orientation: portrait){
		.btnTicket{
			width: 100%;
			margin-bottom: 0.5rem;
		}
	}
	@media (orientation: landscape){
		.btnTicket{
			padding-right: 2rem;
		}
	}
}

/*=====================
first(先着販売席)
=====================*/

.boxFirstEnd{
	padding: 2rem;
	text-align: center;
	border: 1px solid #f0f0f0;
}

.textFirstBold{
	font-weight: bold;
}

.tableFirstPlace,
.tableFirstSales{
	width: 100%;
	border-collapse: collapse;
}
.tableFirstPlace thead th,
.tableFirstPlace tbody th,
.tableFirstPlace tbody td,
.tableFirstSales thead th,
.tableFirstSales tbody th,
.tableFirstSales tbody td{
	border: 1px solid #898989;
	vertical-align: middle;
	text-align: center;
}
.tableFirstPlace thead th,
.tableFirstSales thead th{
	background: #444444;
}

.tableFirstPlace tbody th{
	width: 40%;
	background: #737373;
}

.tableFirstPlace tbody td{
	width : 20% ;
}

.boxFirstSite{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.boxFirstBnr{
	padding: 1rem;
	text-align: center;
}

.tableFirstSales{
	margin-bottom: 2rem;
}

.tableFirstSales tbody th{
	width: 30%;
	background: #737373;
}

.listFirstNotes{
	list-style-type: disc;
	margin-left: 1rem;
}

.boxFirstFaq{
	margin: 2rem 0;
}

.btnFirstFaq{
	width: 40%;
}

.boxFirstCuntact{
	padding: 2rem;
	border: 1px solid #f0f0f0;
}

.btnFirstCuntact{
	width: 50%;
	margin-top: 1rem;
}

@media screen and (max-width: 767px){
	.btnFirstFaq,
	.btnFirstCuntact{
		width: 100%;
	}
}

/*=====================
lottery(抽選販売席)
=====================*/

.textLotteryBold{
	font-weight: bold;
	margin-bottom: 1rem;
}

.btnLottery{
	width: 50%;
}

.boxLotteryBorder{
	padding: 2rem;
	border: 1px solid #f0f0f0;
}

.listLottery{
	list-style-type: disc;
	margin-left: 1rem;
}

@media screen and (max-width: 767px){
	.btnLottery{
		width: 100%;
	}
}

/*=====================
lodging(宿泊情報)
=====================*/

.listLodging{
	list-style-type: disc;
	margin-left: 1rem;
}

.listLodging li a{
	color: #e5005e;
}

.listLodgingCamp{
	width: 100%;
	border-collapse: collapse;
}
.listLodgingCamp thead th,
.listLodgingCamp tbody td{
	padding: 1rem;
	border: 1px solid #f0f0f0;
	vertical-align: middle;
}

.listLodgingCamp thead th{
	background: #d9d9d9;
	color: #0a1f33;
}

.listLodgingCamp tbody td{
	text-align: center;
}

.listLodgingCamp tbody td:nth-child(2){
	text-align: left;
}

.listLodgingCamp tbody td a{
	color: #e5005e;
}

/*=====================
launch(長岡市内花火打ち上げ情報)
=====================*/

.listLaunch{
	width: 100%;
	border-collapse: collapse;
}

.listLaunch thead th,
.listLaunch tbody td{
	padding: 1rem;
	border: 1px solid #f0f0f0;
	vertical-align: middle;
}

.listLaunch thead th{
	background: #d9d9d9;
	color: #0a1f33;
}

.listLaunch tbody td:nth-child(1){
	text-align: center;
}

.listLaunch tbody td a{
	color: #e5005e;
}

/*=====================
topics(トピックス)
=====================*/

.textTopicsBold{
	font-weight: bold;
}

.imgTopicsCenter{
	text-align: center;
}

.btnTopics{
	width: 50%;
}
.boxParkingDescription {
	margin-bottom: 0.5rem;
	padding: 1.5rem;
	border-radius: 4px;
	background-color: #e9f7fb;
}
.boxParkingDescription > * {
	color: #027691;
}
.movieYoutube{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	top: 0;
	left: 0;
	margin-bottom:30px !important;
}
.movieYoutube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/*(オフィシャルパートナー)*/

.textTopicsPartnerBold{
	font-weight: bold;
}

.btnTopicsPartner{
	margin: 1rem 0;
}

/*(コラボレーション)*/
.listTopicsCollabo{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.listTopicsCollabo dt{
	padding-right: 1rem;
	width: 10%;
}

.listTopicsCollabo dd{
	width: 90%;
}

/*(長岡まつり大花火大会インターネット中継)*/
.sampleIphone{
	text-align:center;
	}

.appContents{
	text-align:center;
}

.nctConnect{
	display:flex;
	align-items:center;
	justify-content:center;
	}

.nctConnect img{
	width:100px;
	height:auto;
	}

.nctConnect div:nth-child(2){
	margin:0 0 0 20px;
	}

.appBox{
	display:flex;
	justify-content:center;
	align-items:center;
	}

.appBox .androidApp{
	margin-left:20px;
	}

.appBox .qrCode{
	margin-left:20px;
	display:block;
}

	.relayName{
	text-align: center;
    font-size: 2.2rem;
    font-weight: bold;
	margin-bottom:5px;
	}

	.niconioArea{
	display: flex;
    justify-content: center;
	}

	.niconioArea a{
	margin: 0 10px;
	}

.youtubeArea{
	text-align:center;
}

@media screen and (max-width: 767px){
	.btnTopics{
		width: 100%;
	}
	
	/*(コラボレーション)*/
	
	.listTopicsCollabo dt{
		width: 20%;
	}
	
	.listTopicsCollabo dd{
		width: 80%;
	}
	
	
	
/*(長岡まつり大花火大会インターネット中継)*/
	
	.appBox .qrCode{
		display:none;
	}
	
	.nctConnect div:nth-child(2){
		margin:0 0 0 10px;
	}
	
	.relayName {
    font-size: 1.4rem;
}

	
	@media (orientation: portrait){
		.nctConnect img{
			width:110px;
			height:auto;
	}
	}
	@media (orientation: landscape){
		.nctConnect img{
			width:70px;
			height:auto;
		}
	}

}

/*花火大会で電子マネーが使えます*/

	.paypayBox{
		display:flex;
		margin:0;
		margin: 0 !important;
    	padding-bottom: 10px;
	}

	.paypayBox img{
		margin: 0 3px;
	}


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

	.venueName{
    	font-weight: bold;
    	font-size: 1.8rem;
	}	

	.venueBox{
		background: rgba(240, 240, 240, 0.1);
		padding: 15px;
		width: 48%;
	}


	.electronicMoney{
		display: flex;
    	flex-wrap: wrap;
    	justify-content: center;
		align-items: baseline;
	}

	.electronicMoney div {
		margin: 5px 15px;
		text-align: center;
	}

	.electronicMoney div p{
		padding:0;
		margin:0;
		line-height: 2.0rem;
	}


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

		.electronicMoney div p{
		line-height: 1.2rem;
	}
	
	@media (orientation: portrait){

		.venueArea{
			display:block;	
		}
	
		.venueBox {
		width: 100%;
		margin-bottom:10px;}
		
		.venueBox p{
			margin:0;
		}
		
		
	}

}