@charset "utf-8";

/* =================================================

		TWICE ドームツアー 特設 sp style

================================================= */

.pc { display: none;}
body {
	font-family: -apple-system, BlinkMacSystemFont, 'Arial', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: 0.01em;
	color:#333;
}
a{ color: #9e751a;text-decoration: none;}
section { padding: 60px 0;}
section .inner { max-width: 100%; padding: 0 5%;}
section .sectionTit { font-size: 30px; margin: 0 0 30px; line-height: 1.2;color:#daae4c;letter-spacing: 0.08em; text-align: center}
header #btnIco { top: 20px; right: 5%;}
header #btnIco img,#keyVisual .gNav li img{ width: 70px;}
header .navBtn { width: 28px; height: 24px;}
#loading { border: 0vw solid #fff; }
.btn { margin: 0 auto 20px; width: 90%;}
.btn a { max-width: 100%; font-size: 16px;}
.btn .sub{ color: #daae4c}

/* keyVisual
============================ */

#keyVisual {
	width: 100%;
	height: 85vh;
	padding: 0;
}
#keyVisual .info{ bottom:-20px;opacity: 0;}

#keyVisual .kv_wrap{ 
	width: 100%;
	height: 85vh;
}
#keyVisual .main_logo{
	width: 65%;
	max-width: 400px;
	min-width: 220px;
	position: absolute;
	top:45%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

#keyVisual .headerNav .navBtn{
	width: 33px;
	height: 33px;
	position: absolute;
	z-index: 1000;
	top: 17%;
	right: 66%;
	transform: rotate(32deg);
}
.navWrap {
	width: 70%;
	height: 100%;
	position: fixed;
	top:0;
	right: -70%;
	z-index: 98;
	overflow: hidden;
	background: #3c070e;
	box-shadow:4px 0px 10px 0px rgba(37,13,14,1) inset;
}
.navWrap .menu{
	position: absolute;
	top: 50%;
	left: 15%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.navWrap .menu li { margin: 0 0 5px;}
.navWrap .menu li a {
	display: block;
	position: relative;
	color: #daae4c;
	font-size: 24px;
	letter-spacing: 0.08em;
}
.navWrap .menu li.share { padding: 40px 0 0 0;}
.navWrap .menu li.share a { color: #daae4c;}
.menuOpen .navWrap { right: 0;}
#wrap{ position: relative;right: 0}
.menuOpen #wrap{ right: 70%}
.menuOpen .header_logo{ left: -70%;}

.navWrap .navCover{
	display: none;
	width: 100%;
	height: 100%;
	background: none;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1000;
}
#keyVisual .headerNav{
	width: 100%;
	height: 150%;
	padding: 90px 0 0 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: absolute;
	top: -12%;
	right: -44%;
	z-index: 100;
	transform: rotate(12deg);
	padding: 19vh 0 0 20px;
}
#keyVisual .headerNav .menu{
	transform: rotate(-12deg);
	position: relative;
	top: 17%;
	left: 5%;
}
#keyVisual .headerNav .menu li{ margin: 10px;}
#keyVisual .headerNav .menu li a{
	margin: 0 0 7px;
	display: block;
	position: relative;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}

/* ロード後 */
.loaded #keyVisual .info{ bottom:0;opacity: 1}

/* schedule */
#qa,
#schedule{
background-attachment: scroll;
background-size:300px;
}
#schedule table {
	width: 100%;
	border-bottom: none;
	margin: 0;
}
#schedule th { display: none;}
#schedule td { display: block;}
#schedule td.date {
	position: relative;
	vertical-align: middle;
	width:  80px;
	float: left;
	font-size: 24px;
	font-weight: 600;
	padding: 0;
	margin: 0 0 6px 0;
}
#schedule td.date span { display: inline-block; font-size: 10px; line-height: 1; transform: rotate(90deg);vertical-align: 5px;}
#schedule td.area,
#schedule td.venue{
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
}
#schedule .area a { color:#6e181d;margin-left: 10px}
#schedule td.open { font-size: 11px; padding: 0 0 0 70px; }
#schedule td.info {
	clear: left;
	font-size: 11px;
	border-bottom: 0.5px solid #ddd;
	padding: 0 0 15px 80px;
	margin: 0 0 15px;
	position: relative;
}

/* ticket */
#ticket .inner{ overflow: hidden;}
.accordion li {
	border-radius: 6px;
	margin: 0 0 10px;
	overflow: hidden;
	background: #fff;
}
.accordion li .tit {
	font-size: 20px;
	padding: 20px 40px 20px 5%;
	line-height: 1.3em;
	position: relative;
	font-weight: bold;
}
.accordion li.end .tit:after {
	content: '受付終了';
	display: inline-block;
	color: #d80000;
	font-size: 10px;
	font-weight: bold;
	line-height: 26px;
	border: 2px solid;
	padding: 0 10px;
	margin: -15px 0 0 -50px;
	position: absolute;
	top: 50%;
	right: 12%;
}
.accordion li.end .tit {font-size:16px; padding-right: 120px;}
.accordion li:not(.current) .tit:before {
	width: 12px;
	height: 12px;
	top: 50%;
	margin-top: -8px;
}
#ticket .accordion li table,#ticket .accordion li tbody,#ticket .accordion li tr,#ticket .accordion li th,#ticket .accordion li td,#special .contents table,#special .contents .prize tr{ display: block; width: 100%; }
.accordion li table { padding: 0 5% 20px; }
#ticket .accordion li th,#special .contents .prize th{ font-weight: bold; text-align: left;}
#ticket .accordion li td,#special .contents .prize td{ margin: 0 0 15px; }
#ticket .accordion li td { border-bottom: 1px solid #ddd;padding-bottom: 15px;}
#ticket .accordion li tr:last-child td{ margin: 0;}
.subTxt { display: block;}
#ticket .ticketList + .detail { font-size: 12px;}

#ticket .childTicket{ padding: 10px 0 20px 0;}
#ticket .childTicket .lead { margin: 0 0 20px;font-weight: bold;}
#ticket .childTicket .attentionList { margin: 0 0 25px;}
#ticket .childTicket .attentionList li { margin: 0 0 5px;}
#ticket .childTicket .attentionList li span { font-size: 11px;}
#ticket .attention{ padding: 20px 5%;}
#ticket .attention .inquiry{ margin:20px 0 0 ;padding: 20px 0 0;border-top: 1px dotted #ccc;}
#ticket .attention .inquiry .bold{font-size: 1.15em;line-height: 1.6em;}
#ticket .attention a{ font-weight:bold}
#ticket .attention .tel{ font-size: 1.25em;}
#ticket .comingsoon{ margin: 0 auto 30px; max-width: 90%; font-size: 16px;}
.moreTicketEnd .btn .main{
margin: 0 0 15px;
padding: 12px 0;
font-size: 14px;
}

/* goods */
#goods .block_right{ width: 70%; margin: 0 auto 20px;}
#goods .block_right img{border-radius: 50%}
#goods .text{ margin: 0 0 15px;}
#goods dl{ 
	margin: 0 0 15px;
	border-radius: 6px;
}
#goods dt{ margin: 0 0 2px;font-weight: bold;color: #daae4c;}
#goods .btn{ margin:20px auto 0;}




#goods .imageCap{ 
    width: 100%;
    line-height: 0;
    margin: 0 auto 20px;
}
#goods .preSale{
    border-radius: 0;
    background: #FFF;
    padding: 0 10px;
    margin: 0 0 20px;
}
#goods .preSale dt{
	text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3em;
    padding: 10px 0;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #6e181d;
}
#goods .preSale dd{
    color: #daae4c;
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
}

#goods .buyBtn{
    margin: 0 0 30px;
}
#goods .buyBtn li{
    width: 100%;
    box-sizing: border-box;
}
#goods .buyBtn li:nth-child(odd){
    margin: 0 0 20px;
}
#goods .buyBtn li:nth-child(even){
    margin: 0;
}
#goods .buyBtn li a{
    display: block;
    background: #daae4c;
    text-align: center;
    padding: 10px;
    color: #FFF;
    font-size: 15px;
    border-radius: 100px;
}
#goods .buyBtn li .btnCap{
	font-size: 11px;
    text-align: center;
    color: #daae4c;
    margin: 0 0 5px;
}

#goods .lovelysBox{
    border: 1px solid;
    padding: 15px;
    margin: 0 0 20px;
}
#goods .lovelysBox .boxTit{
    text-align: center;
    font-family: 'Crimson Text', serif;
    font-size: 26px;
    letter-spacing: 0.1em;
    margin: 0 auto 15px;
    line-height: 1em;
}
#goods .lovelysBox .boxLead{
    text-align: left;
    font-size: 13px;
    letter-spacing: 0.1em;
    margin: 0 0 15px;
    line-height: 1.4em;
}
#goods .lovelysBox .boxImage{
    line-height: 0;
    margin: 0 0 15px;
}
#goods .lovelysBox .btnYoutube a{
    background: #FF0000;
    color: #FFF;
    padding: 10px;
    display: block;
    text-align: center;
    font-size: 12px;
    width: 100%;
    margin: 0 auto;
    border-radius: 100px;
}


/*special
------------------------------ */
#special{

}
#special .contentsLead{
    text-align: left;
    font-size: 14px;
    color: #daae4c;
    font-weight: bold;
    line-height: 1.4em;
    margin: 0 0 40px;
}
#special .specialBoxOut{
   position:relative;
}
#special .specialBox{
    border: 4px solid #daae4c;
    padding: 30px 15px 15px;
    margin: 0 0 40px;

}
#special .specialBox .mb0{
	margin-bottom: 0!important;
}
#special .specialBox .badge{
    background: #daae4c;
    color: #FFF;
    width: 65%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    line-height: 1em;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-50%)skewX(-20deg);
}
#special .specialBox .badge span{
    transform: skewX(20deg);
    display: block;
}
#special .specialBox .specialTit{
    text-align: center;
    font-size: 16px;
    color: #daae4c;
    font-weight: bold;
    margin: 0 0 10px;
}
#special .specialLead{
    margin: 0 0 15px;
    font-weight: bold;
    font-size: 13px;
}
#special .soon{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #daae4c;
    letter-spacing: 0.1em;
}
#special .specilaleadList{
    padding: 0 0 15px;
}
#special .specilaleadList li{
    text-indent: -13px;
    margin: 0 0 0 13px;
    padding: 0 0 10px;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.3em;
}

#special .specilaleadList li:last-child{
    padding: 0;
}

#special .atentionList{
    margin: 0 0 20px;
}

#special .atentionList li{
    font-size: 10px;
    line-height: 1.4em;
    padding: 0 0 5px;
    margin: 0 0 0 10px;
    text-indent: -10px;
}

#special .atentionList li:last-child{
    padding: 0;
}

#special .specialImage{
    line-height: 0;
    margin: 0 0 20px;
}
#special .price{
    margin: 0 0 20px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #5a0000;
}

#special .preSale{
    border-radius: 0;
    background: #C5A674;
    padding: 0 10px;
    margin: 0 0 20px;
}
#special .preSale dt{
    text-align: center;
    font-size: 16px;
    line-height: 1.3em;
    padding: 10px 0;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #ffffff;
    color: #FFF;
}
#special .preSale dd{
	color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    font-weight: bold;
}

#goods .btnSell a{
	display: block;
    background: #daae4c;
    text-align: center;
    padding: 10px;
    color: #FFF;
    font-size: 15px;
    border-radius: 100px;
}
#goods .btnDwn a{
	    margin-bottom: 25px;
}
#special .buyBtn{


}
#special .buyBtn li .btnCap{
    font-size: 10px;
    text-align: center;
    color: #daae4c;
    margin: 0 0 5px;
}
#special .buyBtn li a{
    display: block;
    background: #daae4c;
    text-align: center;
    padding: 10px;
    color: #FFF;
    font-size: 14px;
    border-radius: 100px;
    width: 100%;
    margin: 0 auto 20px;

}
.btnSpecial a {
    display: block;
    background: #daae4c;
    text-align: center;
    padding: 10px;
    color: #FFF;
    font-size: 14px;
    border-radius: 100px;
    width: 100%;
    margin: 0 auto 20px;
    transition: 0.3s;
}








.specialLeadList{
    margin: 0 0 20px;
}
.specialLeadList li{
    font-weight: bold;
    font-weight: bold;
    font-size: 13px;
    margin: 0 0 5px;

}
.specialLeadList li:last-child{
    margin: 0;
}
.specialCap{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #daae4c;
    margin: 0 0 10px;
}
.snsSpeacialList{
    border-top: 1px solid #daae4c;
    padding: 10px 0 0;
}
.snsSpeacialList dt{
    font-weight: bold;
    font-size: 13px;
    margin: 0 0 5px;

}
.snsSpeacialList dd{
	margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #daae4c;
    line-height: 1.3em;
    font-size: 13px;
}
.snsSpeacialList dd:last-child{

}
.specialSubCap{
    text-align: center;
    margin: 0 0 20px;
    font-size: 11px;
    font-weight: bold;
}

.specialEntryBox{
    background: #c5a674;
    padding: 15px;

}
.specialEntryTit{
    text-align: center;
    font-size: 13px;
    color: #FFF;
    margin: 0px 0 15px;
    font-weight: bold;
}
.specialEntryBtn{
    display: block;
}
.specialEntryBtn li{
    width: 100%;
    text-align: center;
}
.specialEntryBtn li:nth-child(odd){
    padding: 0 0 10px 0;
}
.specialEntryBtn li:nth-child(even){
    padding: 0;
}
.specialEntryBtn li a{
    background: #fff;
    display: block;
    color: #daae4c;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 100px;
    font-size: 12px;
    transition: 0.3s;
    font-weight: bold;
}

.specialEntryBtn li a.blank{
    background: #898989;
    color: #b9b9b9;
    pointer-events: none;
}


.specialEntryCap{
    text-align: center;
    font-size: 12px;
    padding: 10px 0 0;
    color: #daae4c;
}

#special .thanks{
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #5a0000;
}





/* qa */
#qa .sectionTit { margin: 0 0 30px;}
#qa .accordion { margin: 0 0 30px;}
#qa .accordion li { background: #fffae2;}
#qa .accordion li.category {
	background: transparent;
	box-shadow: none;
	border-radius: 0px;
	overflow: hidden;
	font-size: 16px;
	font-weight: bold;
	line-height: 2em;
    color: #FFF;
}
#qa .accordion li .tit { font-size: 14px; padding: 15px 40px 15px 10px;}
#qa .accordion li:not(.current) .tit:before { border-color: #daae4c;}
#qa .accordion li .txt{
	padding-left: 40px;
	display: block;
	line-height: 1.8;
}
#qa .icon {
	display: inline-block;
	width: 26px;
	color: #fff;
	background: #dab54c;
	text-align: center;
	line-height: 26px;
	border-radius: 50%;
	float: left;
}
#qa .answer { padding: 15px 5% 15px 10px;}
#qa .answer .icon { background: #fff; color:#daae4c;font-weight: bold}
#qa .accordion li .txt a {
    text-decoration: underline;
}
.accordion li .ticketList li { margin-bottom: 0;}
.accordion li .ticketList li a {
	display: block;
	padding: 10px 0;
	border-bottom: 0.5px solid #ddd;
}
.accordion li .ticketList li:nth-child(2) { margin-bottom: 10px;}
.accordion li .ticketList li:nth-child(3) a { border-top: 0.5px solid #ddd;}
.accordion li .ticketList li a:after { right: 2px;}


.accordion li .pguid li:nth-child(3) a {
    border-top: 0.5px solid #daae4c;
}
.accordion li .pguid li a {
    display: block;
    padding: 10px 0;
    border-bottom: 0.5px solid #daae4c;
}

.pg table{
    margin: 0!important;
}
.pg tr:last-child th,
.pg tr:last-child td{
border-bottom: none!important;
}

.pguid .soldoutBox {
    display: inline-block;
    width: auto;
    color: #FFF;
    font-weight: bold;
    line-height: 25px;
    border-radius: 3px;
    padding: 0 10px;
    position: relative;
    top: -3px;
    font-size: 14px;
    vertical-align: 0em;
    background: #f40b0b;
    margin: 5px;
}



/* links */
footer { padding: 30px 0; }
footer .links {
	font-size: 12px;
	text-align: center;
	padding: 0 5%;
	margin: 0 0 25px;
}
footer .links a { line-height: 2.4; padding: 2px 0;}
footer .links .logo { width: 50px; margin: 0 auto 20px;}

.officialcarrier {  margin: 0 auto 20px;}
.officialcarrier dt {margin: 0 0 3px;}
.officialcarrier dd {
	width: 175px;
	margin: 0 auto;
	padding: 0 10px;
}
.shareList dt{ opacity: 0.5}

.sponsoredTit{
    color: #dbbf86;
    font-family: 'Crimson Text', serif;
    text-align: center;
    opacity: 0.5;
}
.sponsoredList{
    margin: 0 auto 20px;
}
.sponsoredList li{
    width: 40%;
    margin: 0 auto 10px;
}
.sponsoredList li:last-child{
    margin: 0 auto 0;
}



@media screen and (max-width: 360px){
.header_logo{ height: 80px}
.header_logo svg{ width: 80px}
#keyVisual .tour_tit{ top:54%;}
	footer .links a { font-size: 11px;}
	.accordion li .tit { font-size: 18px;}
}


/* 追加公演 */
.moreLive h3{
  padding: 0 0 18px;
  color: #daae4c;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
#schedule .moreLive table{
  border-top: 1px solid #daae4c;
}
#schedule .moreLive table .date, #schedule .moreLive table .venue,
#schedule .moreLive table .area{
  padding:15px 0 0;
}
#schedule .moreLive td.info{
  margin: 0 0 35px;
  border-bottom: 1px solid #daae4c;
}
.accordion li.moreTicket{
  border: 4px solid #daae4c;
}

.accordion li.moreTicket h3{
  padding: 20px;
  color: #daae4c;
  font-size: 18px;
}
/*
.accordion li.moreTicket .tit:after {
	content: '追加公演';
	display: inline-block;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	line-height: 26px;
	background:#e4004a;
	border: 2px solid #e4004a;
  padding: 0 10px;
  margin: -16px 0 0 0;
  position: absolute;
  top: 50%;
  right: 20px;
}
*/
.detail table td .indent{
  display: inline-block;
  text-indent: -1em;
  padding: 0 0 0 1em;
  font-size: 0.85em;
  line-height: 1.4em;
}
.moreTicket .btn .main{
  margin: 0 0 15px;
  padding: 12px 0;
  font-size: 14px;
}


/* 装飾 */
#ticket .flower.top1{ top:-20px; right: 2%;}
#ticket .flower.top1 svg{ 
	height: 110px;
	width: 110px;	
}
#ticket .flower.top2{ top:20px; left: 5%;}
#ticket .flower.top2 svg{ 
	height: 60px;
	width: 60px;	
	stroke-width:2.5;
}
#trade .flower.top1{ top:-40px; left: 20%;}
#trade .flower.top1 svg{ 
	height: 80px;
	width: 80px;	
	stroke-width:2;
}
#trade .flower.top2{ top:20px; left: 5%;}
#trade .flower.top2 svg{ 
	height: 60px;
	width: 60px;
	stroke-width:2.5;
}
#goods .flower.top1{ top:-40px; right: 3%}
#goods .flower.top1 svg{ 
	stroke-width:2;
	height: 110px;
	width: 110px;	
}
#qa .flower.top1{ top:-40px; left: 3%}
#qa .flower.top1 svg{ 
	stroke-width:2;
	height: 120px;
	width: 120px;	
}
#qa .flower.bottom1{ bottom:-10px; right: 3%}
#qa .flower.bottom1 svg{ 
	height: 80px;
	width: 80px;
	stroke-width:2;
}
.dreamchatcher{
	position: absolute;
	top:0;
	right:10%;
	width:90px;
	height: 180px;
	opacity: 0.8;
  animation: animationFrames ease-in-out 6s;
  animation-iteration-count: infinite;
  transform-origin: 50% 0%;
  animation-direction:alternate;
  -webkit-animation: animationFrames ease-in-out 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 0%;
  -webkit-animation-direction:alternate;
}