@charset "utf-8";

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

		TWICE ドームツアー 特設 common style

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

*, *::before, *::after {
	box-sizing: border-box;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}


/* base
============================ */
html,
body {
  height: 100%;
  -webkit-text-size-adjust: none;
}
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style: none;
}
button,
input,
select,
textarea {
  margin: 0;
}
img,
iframe,
object,
audio,
video {
  height: auto;
  max-width: 100%;
}
iframe {
  border: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
  text-align: left;
}
i {
  font-style: normal;
}
img {
  width: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
::selection {
  background: #f7e7c9;
  color: #daae4c;
}
::-moz-selection {
  background: #f7e7c9;
  color: #daae4c;
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
}
/* 1.2 clearfix
------------------------------ */
.clearfix::after {
  display: table;
  content: "";
  clear: both;
}


/* font */

#schedule td.date,
footer .links a,
{
	font-family: 'Roboto', sans-serif;
}
#keyVisual .headerNav .menu li a,
#gNav li,
.navWrap .menu li a,
#qa .icon,
#ticket h2.tit,
section .sectionTit,
#ticket .attention .tit,
.shareList dt{
	font-family: 'Crimson Text', serif;
}
.sectionTit span { 
opacity: 0;
-webkit-filter:blur(10px);
filter:blur(10px);
-webkit-transition:1s all .3s ease;
transition: 1s all .3s ease;
}
.show .sectionTit span{ 
opacity: 1;
-webkit-filter: blur(0);
filter:blur(0);
}
.block--title .txt:nth-of-type(1) {
	-webkit-transition-delay: .4s;
	transition-delay: .4s;
}
.sectionTit span:nth-of-type(2) {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}
.sectionTit span:nth-of-type(3) {
	-webkit-transition-delay: .6s;
	transition-delay: .6s;
}
.sectionTit span:nth-of-type(4) {
	-webkit-transition-delay: .7s;
	transition-delay: .7s;
}
.sectionTit span:nth-of-type(5) {
	-webkit-transition-delay: .8s;
	transition-delay: .8s;
}
.sectionTit span:nth-of-type(6) {
	-webkit-transition-delay: .9s;
	transition-delay: .9s;
}

.sectionTit span:nth-of-type(7) {
	-webkit-transition-delay: 1s;
	transition-delay: 1s;
}

.sectionTit span:nth-of-type(8) {
	-webkit-transition-delay: 1.1s;
	transition-delay: 1.1s;
}


section{ position: relative;}
section .inner { 
	max-width: 750px;
	margin: 0 auto;

}
section .inview{ z-index: 10; opacity: 0;position: relative;top:20px;-webkit-transition:1s all .3s ease;transition: 1s all .3s ease;}
section .inview.show{ opacity: 1;top:0;}
.btn { width: 80%; margin: 0 auto;}
.btn a {
	display: block;
	padding: 18px 0;
	margin: 0 auto;
	font-size: 18px;
	max-width: 370px;
	text-align: center;
	font-weight: bold;
	border-radius: 50px;
}
.btn .main { 
	background-size: 200% auto;
	background-image:linear-gradient(135deg, #daae4c, #ffcd5d, #daae4c);
	color: #fff;
	box-shadow: 0px 3px 10px rgba(0,0,0,.1);
	text-shadow: 0px 1px 2px rgba(0,0,0,.4);
	}
.btn .sub { background: transoparent; color: #c5a674; border: 2px solid; }
.btn .main:hover {
background-position:right center; 
}



/* Utility */
.subTxt { font-size: 0.85em; line-height: 1.4em;}
.center { text-align: center;}
.clearfix:after,.clearfix:before { display: table; content: " "}
.clearfix:after { clear: both}
.shareList { color: #c5a674;}
.shareList dd{ display: inline-block; }
.shareList dd a { color: #c5a674; font-size: 2em; margin-right: 15px}
.tourLogo { fill: #c5a674;}


#contents {position: relative;}
#wrap{ overflow: hidden}

/* keyVisual
================================ */
#keyVisual {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 0;
	background: #6e181d;
}

#keyVisual .info{
	position: absolute;
	width: 90%;
	left: 5%;
	bottom: -20px;
	padding: 5px 5%;
	background: #c5a674;
	color:#000;
	font-weight: bold;
	font-size: 13px;
	z-index: 10;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	-webkit-transition-delay: 4.5s;
	transition-delay: 4.5s;
}
#keyVisual .info span{margin-right: 10px}
#keyVisual .main_logo{
	opacity: 0;
	-webkit-filter:blur(10px);
	filter:blur(10px);
	-webkit-transition:1.5s all .3s ease;
	transition: 1.5s all .3s ease;
}
#keyVisual .main_logo .mark{ 
	position: relative;
	z-index: 2;
	transform-origin: center center; 
	transition: all .8s cubic-bezier(.79,.01,.21,1.04) 2s;
	-webkit-transform-origin: center center; 
	-webkit-transition: all .8s cubic-bezier(.79,.01,.21,1.04) 2s;
}
.loaded #keyVisual .main_logo{
	opacity: 1;
	-webkit-filter:blur(0);
	filter:blur(0);
}
.loaded #keyVisual .main_logo .mark{ 
	transform: rotate3d(0, 0, -1, 540deg);
	-webkit-transform: rotate3d(0, 0, -1, 540deg);
}
.loaded #keyVisual .main_logo .mark_wrap{
	-webkit-animation: swing 3s 3s forwards;
	animation: swing 3s 3s forwards;
}
@keyframes swing {
    0%,100% { 
        -webkit-transform-origin: bottom center; 
    }
    10% { transform: rotate(-10deg); }  
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-5deg); }   
    40% { transform: rotate(5deg); }    
    50% { transform: rotate(-3deg); }

    60% { transform: rotate(2deg); }
    70% { transform: rotate(-2deg); }
    80% { transform: rotate(1deg); }
    90% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}
@-webkit-keyframes swing {
    0%,100% { 
        -webkit-transform-origin: bottom center; 
    }
    10% { -webkit-transform: rotate(-15deg); }  
    20% { -webkit-transform: rotate(10deg); }
    30% { -webkit-transform: rotate(-5deg); }   
    40% { -webkit-transform: rotate(5deg); }    
    50% { -webkit-transform: rotate(-3deg); }

    60% { -webkit-transform: rotate(2deg); }
    70% { -webkit-transform: rotate(-2deg); }
    80% { -webkit-transform: rotate(1deg); }
    90% { -webkit-transform: rotate(-1deg); }
    100% { -webkit-transform: rotate(0deg); }
}
#keyVisual .main_logo .title{ position: relative;top:-10px;}

header #btnIco {
	display: inline-block;
	line-height: 0;
	position: fixed;
	top: -150px;
	right: 30px;
	transition: all .3s ease;
	z-index: 99;
	cursor: pointer;
}
header .navBtn{
	width: 33px;
	height: 27px;

}
header .navBtn span {
	display: inline-block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #daae4c;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
header .navBtn span:nth-of-type(1){ top: 0;}
header .navBtn span:nth-of-type(2){ top: 45%;}
header .navBtn span:nth-of-type(3){ bottom: 0;}
.menuOpen header .navBtn{
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.menuOpen header .navBtn span { background: #daae4c !important; }
.menuOpen header .navBtn span:nth-of-type(1){
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	top: 50%;
}
.menuOpen header .navBtn span:nth-of-type(2){ opacity: 0; }
.menuOpen header .navBtn span:nth-of-type(3){
	top: 50%;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

/* schedule */
#qa,
#schedule{
	background-color:#fff;
}
#schedule table { margin: 0 auto 40px;}
#schedule .date{ position: relative;}
#schedule .holiday{ color: #e50e4f;}
#schedule .sat{ color: #298bbf;}

/* ticket */
#ticket { background: #6e181d}
.accordion li:not(.current){ position: relative;}
.accordion li:not(.current) h3.tit:before {
	content: "";
	width: 15px;
	height: 15px;
	border-top: 2px solid #daae4c;
	border-right: 2px solid #daae4c;
	transform: rotate(135deg);
	position: absolute;
	right: 4%;
	top: 40%;
}
.accordion li.open h3.tit:before { transform: rotate(-45deg);}
.accordion li:not(.current) .detail { display: none; -webkit-transition: none; transition: none;}
.accordion li.end .tit { position: relative;font-size: 20px;}
.accordion li table { width: 100%; }

#ticket .accordion li .ticketList li:last-child{ margin: 0;}
#ticket .accordion li .ticketList li a:hover,
#ticket .ticket .faq .detail a:hover{ opacity: 0.8; transition: all .3s ease;}
#ticket .entry { padding-top: 5px; }
#ticket .entry a{ position: relative; padding-right: 13px;text-decoration: underline;}
#ticket .entry a:hover{ text-decoration: none}
#ticket .entry a:before,.attention a::after,.accordion li .ticketList li a:after{
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid #9e751a;
	border-right: 1px solid #9e751a;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -4px;
	transform: rotate(45deg);
}

#ticket .childTicket .tit {
	font-weight: bold;
	border-top: 0;
	padding: 0!important;
	color: #daae4c;
}
#ticket .accordion li.end .childTicket .tit:before,#ticket .accordion li.end .childTicket .tit:after { content: none;}
#ticket .childTicket .attentionList li {
	box-shadow: none;
	background: transparent;
	padding-left: 1em;
	text-indent: -1em;
}
#ticket .childTicket .attentionList li:last-child { margin: 0;}
#ticket .childTicket .attentionList li span { display: block; padding-left: 1em;}

#ticket .attention { 
	margin: 0 0 40px;
	padding: 30px;
	background: #fff;
	border-radius: 6px;
	}
#ticket .attention a{ position: relative;padding-right: 13px;text-decoration: underline;}
#ticket .attention a:hover {text-decoration: none}
#ticket .attention .tit{
	margin: 0 0 10px;
	color: #daae4c;
	font-size: 1.6em;
	display: flex;
	align-items: center;
}
#ticket .attention .tit:before, #ticket .attention .tit:after {
	content: "";
	flex-grow: 1;
	height: 2px;
	background: #daae4c;
	display: block;
}
#ticket .attention .tit:before {
	margin-right: 1em;
}
#ticket .attention .tit:after {
	margin-left: 1em;
}
#ticket .attention .bold{ font-weight: bold}
#ticket .attention .text{ margin: 0 0 10px;font-weight: bold;font-size: 1.15em;line-height: 1.6em;color:#d80000;}
#ticket .attention .subTxt,
#ticket .attention a{ font-weight: normal;color:#333;}
#ticket .attention a{color:#daae4c;}
#ticket .attention .tel{ font-size: 1.1em}
#ticket .attention .attentionList{ padding-top: 5px; font-size: 0.85em;line-height: 1.6em;}
#ticket .childTicket .bold{ font-size: 1.15em;}

#ticket .comingsoon{	
	padding: 18px 0;
	margin: 0 auto;
	font-size: 18px;
	max-width: 370px;
	text-align: center;
	font-weight: bold;
	border-radius: 50px;
	background: #eee;
	color: #adadad;
	}

/* trade */
#trade{
	background: #ffffff;
}

/* goods */
#goods{
	background: #6e181d;
	color:#ffffff;
}
#goods .comingsoon{
padding: 18px 0;
margin: 0 auto;
font-size: 18px;
max-width: 370px;
text-align: center;
font-weight: bold;
border-radius: 50px;
background: #4c0e17;
color: #a52335;
}
#goods .goodsLimit dd > span{
text-decoration: line-through;
}
#goods .goodsLimit dd .text{
padding:5px 0 0;
font-size: 13px;
line-height: 1.5;
}
#goods .goodsLimit dd .text span.indent{
display: inherit;
text-indent: -1em;
padding: 5px 0 0 1em;
}

/* qa */
#qa{
	background: #6e181d;
}

/* footer */
footer{ 
    background: #4c0e17;
}
footer .shareList{ text-align: center;color:#dbbf86;}
footer .shareList dd a{ margin: 0 10px;color:#dbbf86;}
footer .links .logo img{ width: 100%;}
footer .links a {
	display: block;
	color:#dbbf86;
	font-weight: bold;
}
footer .links a:after {
	margin-left: 5px;
	content: '\f054';
	font-family: 'FontAwesome';
}
footer .copyright {
	padding: 20px 0;
	text-align: center;
	font-size: 11px;
	color: #dbbf86!important;
}

.accordion li .ticketList { margin: 0 0 25px;}
.accordion li .ticketList:last-of-type { margin-bottom: 0;}
.accordion li .ticketList li { box-shadow: none; border-radius: 0;}
.accordion li .ticketList li:first-child { margin-bottom: 0;}

.officialcarrier { display: block;}
.officialcarrier dt {
	color: #dbbf86;
	font-family: 'Crimson Text', serif;
	text-align: center;
	opacity: 0.5
}
.officialcarrier dd a { display: block;}

/* 装飾 */
.flower { opacity: 0; transform-origin: center center; -webkit-animation: spin 12s linear infinite;animation: spin 12s linear infinite;position: absolute}
.show .flower{ opacity: 1}
.flower svg{
	fill:transparent;
	stroke-width:1.2;
	stroke:#dbbf86;
	opacity: 0.6;
}
#ticket .flower.top1,
#qa .flower.bottom1,
#goods .flower.top1{ -webkit-animation: spin2 12s linear infinite;animation: spin2 12s linear infinite;}
@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes spin2 {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(-360deg);}
}

@keyframes animationFrames{
  0% {
    transform:  translate(0,0px)  rotate(0deg) ;
  }
  50% {
    transform:  translate(0,0px)  rotate(-3deg) ;
  }
  100% {
    transform:  translate(0,0px)  rotate(3deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0,0px)  rotate(0deg) ;
  }
  50% {
    -webkit-transform:  translate(0,0px)  rotate(-3deg) ;
    -webkit-transform:  translate(0,0px)  rotate(-3deg) ;
  }
  100% {
    -webkit-transform:  translate(0,0px)  rotate(3deg) ;
  }
}