@charset "utf-8";

/* =reset
------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,header,section,article,footer,article,aside,time,nav,a{margin:0;padding:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
p{text-justify:inter-ideograph;margin: 0;}
header,section,article,footer,article,aside,time,nav{display: block;}
ul{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:0;}
figure {display:block;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;}
button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none;}

/* =base
------------------------------------------------------------------------------------------*/
* { box-sizing: border-box; }
body { background: #fff; color: #000; counter-reset: number 0; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-feature-settings : "palt"; font-size: 14px; line-height: 1.7em; letter-spacing: 0.07em; overflow-x: hidden;}
img { vertical-align: bottom; width: 100%; }
a { color: #e95098; text-decoration: none; outline: none; }
a:hover { color: #ef90bd text-decoration: none; }
a:hover img { opacity: 0.8; filter: alpha(opacity=80); }
span { display:inline-block; }

/* =header
------------------------------------------------------------------------------------------*/
header { background: #e95098; display: table; position: relative; top: 0; width: 100%; z-index: 1; }
header .header-wrap { display: table; margin: 0 auto; padding: 15px 20px; width: 100%; }
header .left { display: table-cell; line-height: 1em; vertical-align: middle; width: 16%; }
header .right { display: table-cell; margin: .5em 0; vertical-align: middle; width: 84%; }
header h1 { color: #fff; font-size: 10px; line-height: 1em; text-align: right; }
header .logo-eplus { width: 100px; height: 21px;}

/* =foot
-----------------------------------------------------------------------------------------*/
footer { background: #e95098; color: #fff; text-align: center; width: 100%; }
footer .section-wrap { margin: 0 auto; padding: 50px 0; }
footer p { font-size: 12px;}
footer .eplus { width: 100px;}


/* =チケット購入アンカー
------------------------------------------------------------------------------------------*/
.square-button { margin: 0; opacity: 0; position: fixed; right: 3vw; top: 60px; text-align: center; z-index: 10; transform: translate3d(-60vw, 250%, 0px) scale(5); transition: 0.8s cubic-bezier(1, 0, 0, 1); transition-duration: .4s; }
.square-button a { background: #000; border: 5px solid #fff; border-radius: 100px; box-sizing: border-box; color: #fff; display: block; transition: all .3s; box-shadow: 0px 0px 5px 1px #b8b8b8; max-width: 150px; max-height: 150px; width: 11.5vw; height: 11.5vw;}
.square-button a:hover { border: 7px solid #fffbcc; }
.square-button a:hover span.square-text { transform: translate3d(0, -50%, 0) scale(0.94); }
.square-button a span.square-text{transition: all .3s;position: relative; text-align: center; line-height: 1em; top: 50%; transform: translate3d(0, -50%, 0); display: block; max-width: 75px; width: 6vw; margin:0 auto; }
.square-button a span.square-text img{width: 100%;}
.square-button a:hover span.square-text img{opacity: 1;}
.scaleNone{transform: none!important;}
.scaleOn{transform: scale(0.75);}

/* = sp nav
------------------------------------------------------------------------------------------*/
.sp-nav { display: none; }

/* = wrap
------------------------------------------------------------------------------------------*/
/* main用のwrap */
.main-wrap {display: block; margin: 0 auto ; width: 100%; }

/* = breadcrumb
------------------------------------------------------------------------------------------*/
.breadcrumb { margin: 0 auto 30px; max-width: 1000px; width: 92%; text-align: center;}
.breadcrumb li { color: #696969; display: inline; }
.breadcrumb li a { font-size: 14px; line-height: 1.2em; text-decoration: underline; }
.breadcrumb li:not(:last-child)::after { content: " > "; color: #696969; }

/* = parts
------------------------------------------------------------------------------------------*/
.pc-none { display: none; }
.sp-none { display: block; }

/* 横並びbox */
.clearfix::after,
.float-box::after { content: ""; clear: both; display: block; }
.float-box { width: 102%;}
.float-box .box01 { width: 98%;}
.float-box .box02,
.float-box .box03,
.float-box .box04 { float: left; margin: 0 2% 5% 0; }
.float-box .box02 { width: 48%; }
.float-box .box03 { width: 31.3%; }
.float-box .box04 { width: 23%; }
.float-box .box01 img,
.float-box .box02 img,
.float-box .box03 img,
.float-box .box04 img { width: 100%; }
.table-box { display: table; width: 100%; }
.table-box .box02,
.table-box .box03,
.table-box .box04 { display: table-cell; vertical-align: middle; }
.table-box .box02 { width: 50%; }
.table-box .box03 { width: 33.3%; }
.table-box .box04 { width: 25%; }
.table-box .box02 img,
.table-box .box03 img,
.table-box .box04 img { width: 100%; }

/* font */
.moreless { font-size: .8em; line-height: 1.4em; }
.less { font-size: .9em; line-height: 1.4em; }
.mid { font-size: 1.1em; line-height: 1em; }
.big { font-size: 1.2em; line-height: 1em; }
.bigger { font-size: 1.3em; line-height: 1em; }
.biggest { font-size: 1.5em; line-height: 1em; }
.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.font-minchou { font-family: "ＭＳ 明朝",serif; font-weight: normal; }
.font-yu-minchou { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-weight: normal; }
.font-italic { font-style: italic; }
.copyright { font-size: 12px; }

/* textColor */
.text-red { color: #cc0000; }
.text-white { color: #fff; }
.text-black { color: #000; }
.sat { color: #0b5792; }
.sun { color: #a63646; }

/* textAlign */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* margin */
.mb-0 { margin-bottom: 0 !important; }
.mb-01em { margin-bottom: .1em !important; }
.mb-02em { margin-bottom: .2em !important; }
.mb-03em { margin-bottom: .3em !important; }
.mb-04em { margin-bottom: .4em !important; }
.mb-05em { margin-bottom: .5em !important; }
.mb-06em { margin-bottom: .6em !important; }
.mb-07em { margin-bottom: .7em !important; }
.mb-08em { margin-bottom: .8em !important; }
.mb-09em { margin-bottom: .9em !important; }
.mb-1em { margin-bottom: 1em !important; }
.mb-2em { margin-bottom: 2em !important; }
.mb-3em { margin-bottom: 3em !important; }
.mb-4em { margin-bottom: 4em !important; }
.mb-5em { margin-bottom: 5em !important; }

/* linkButtonBased */
.link-button a { box-sizing: border-box; text-decoration:none;  display: block; border-radius: 100px; font-size: 22px; font-weight: bold; line-height: 1em; margin: 0 auto; padding: 30px 10px; position: relative; text-align: center; transition: .2s; width: 90%; max-width: 550px;}
.link-button a:hover { text-decoration: none; opacity: .8;}
.link-button a:active { box-shadow: none; }

/* linkButtonColor */
.link-button a { background: #f16baa; color: #fff; }

/* 16:9 wrap(youteubeとか) */
.video-outer-wrap { margin: 0 auto 30px; width: 60%; }
.video-wrap { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0px; width: 100%; }
.video-wrap iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

/* periodBox */
.period-box { background: #f8f8f8; border: 1px solid #cc0000; box-sizing: border-box; color: #cc0000; font-size: 26px; font-weight: bold; line-height: 1.4em; margin: 0 auto 20px; padding: 25px 0; text-align: center; width: 80%; }

/* bottomLineBased */
.solid-line { border-bottom: 1px solid #fff; }
.dotted-line { border-bottom: 1px dotted #fff; }
.dashed-line { border-bottom: 1px dashed #fff; }

/* bottomLinePadding */
.solid-line,
.dotted-line,
.dashed-line { padding-bottom: 1em; }

/* textList(div等で囲む) */
p.text-list,
.text-list ul li { padding: 0 0 3px 1.1em; position: relative; }
p:not(:last-of-child).text-list { margin-bottom: 1em; }
.text-list ul li:not(:last-of-child) { margin-bottom: 5px; }
p.text-list::before,
.text-list ul li::before { content: "※"; position: absolute; left: 0; }
p.text-list-dotted::before,
.text-list-dotted ul li::before { content: "・"; }
p.text-list-circle::before,
.text-list-circle ul li::before { content: "●"; }
p.text-list-square::before,
.text-list-square ul li::before { content: "■"; }
p.text-list-counter,
.text-list-counter ul li { padding-left: 5.1em; }
p.text-list-counter::before,
.text-list-counter ul li::before { counter-increment: number 1; content: "" counter(number) ""; }

/* linkOff */
.link-off a { background: #ccc; border: none; box-shadow: none; pointer-events: none; }
.link-off a::after { display: none !important; }


ul.disc { list-style: disc; padding-left: 1.2em; }
p.caution { position: relative; padding-left: 1.2em;  }
p.caution::before { content: "※"; position: absolute; left: 0; }

/* smartphone
------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
  /* =base
  ------------------------------------------------------------------------------------------*/
  body { font-size: 14px; line-height: 1.7em; }

  /* =header
  ------------------------------------------------------------------------------------------*/
  header { border-top: solid 2px #e95098; }
  header .header-wrap { padding: 8px 8px 10px; }
  header .left,
  header .right { display: block; width: 100%; }
  header .left { margin-bottom: 10px; }
  header .right { margin: 0; }
  header h1 { text-align: left; line-height: 1.2em;}
  header .logo-eplus { width: 60px; height: 12px;}

  /* = breadcrumb
  ------------------------------------------------------------------------------------------*/
  .breadcrumb{text-align: left;}

  /* =チケット購入アンカー
  ------------------------------------------------------------------------------------------*/
  .square-button { right: 30px; top: unset; bottom: 60px;transform: translate3d(-100vw, -250%, 0px) scale(4);}
  .square-button a {border: 2px solid #fff; width: 120px; height: 120px; width: 30vw; height: 30vw;}
  .square-button a:hover{border: 3px solid #fff; box-shadow: 0px 0px 5px 1px #b8b8b8; }
  .square-button a span.square-text{ width: 15vw;}

  /* = sp nav
  ------------------------------------------------------------------------------------------*/
  .sp-nav { display: block; }
  #toggle { background: #fcc700; position: fixed; top: 0; right: 0; height: 45px; width: 45px; transition: .2s; z-index: 11; }
  #toggle .button { background: #fff; height: 4px; position: absolute; top: calc(50% - 2px); left: 20%; transition: .3s; width: 60%; }
  #toggle .button::before,
  #toggle .button::after { background: #fff; content: ""; display: block; height: 4px; position: absolute; top: 50%; left: 0; transition: .3s; width: 100%; }
  #toggle .button::before { margin-top: -12px; }
  #toggle .button::after { margin-top: 8px; }
  #toggle .close { background: transparent; top: calc(50% - 4px); }
  #toggle .close::before,
  #toggle .close::after{ margin-top: 0; }
  #toggle .close::before{ transform: rotate(-45deg); }
  #toggle .close::after{ transform: rotate(-135deg); }
  #menu { opacity: 0; transition: .3s; display: none;}
  #menu.open { display: block !important; opacity: 1; transition: .1s; }
  .nav-menu { background: rgba(0,0,0,.8); height: 100%; height: 100vh; position: fixed; top: 0; transition: .3s; width: 100%; width: 100vw; z-index: 10; }
  .nav-menu li:first-child { border-bottom: 1px solid #666; height: 45px; }
  .nav-menu li a { border-bottom: 1px solid #666; color: #fff; display: inherit; font-size: 14px; line-height: 1em; padding: .9em 0; width: 100%; text-align: center; }

  /* = wrap
  ------------------------------------------------------------------------------------------*/
  /* main用のwrap */
  .main-wrap { width: 100%; }

  /* = parts
  ------------------------------------------------------------------------------------------*/
  .pc-none { display: block; }
  .sp-none { display: none; }

  /* box */
  .float-box,
  .float-box .box01,
  .float-box .box02,
  .float-box .box03 { width: 100%; }
  .float-box .box02,
  .float-box .box03 { float: none; margin: 0 0 5% 0; }
  .float-box .box04 { width: 48%; }
  .table-box .box02,
  .table-box .box03 { display: block; width: 100%; }
  .table-box .box04 { width: 50%; }

  /* textAlign */
  .sp-text-left { text-align: left; }
  .sp-text-right { text-align: right; }
  .sp-text-center { text-align: center; }

  /* margin */
  .sp-mb-05vw { margin-bottom: .5vw !important; }
  .sp-mb-1vw { margin-bottom: 1vw !important; }
  .sp-mb-2vw { margin-bottom: 2vw !important; }
  .sp-mb-3vw { margin-bottom: 3vw !important; }
  .sp-mb-4vw { margin-bottom: 4vw !important; }
  .sp-mb-5vw { margin-bottom: 5vw !important; }
  .sp-mb-6vw { margin-bottom: 6vw !important; }
  .sp-mb-7vw { margin-bottom: 7vw !important; }
  .sp-mb-8vw { margin-bottom: 8vw !important; }
  .sp-mb-9vw { margin-bottom: 9vw !important; }
  .sp-mb-10vw { margin-bottom: 10vw !important; }

  /* linkButton */
  .link-button a { font-size: 22px; text-decoration: none; width: 90%; }

  /* 16:9 wrap(youteubeとか) */
  .video-outer-wrap { width: 92%; }

  /* periodBox */
  .period-box { font-size: 18px; line-height: 1.2em; margin-bottom: 4vw; padding: .6em 0; width: 90%; }

  /* textList(div等で囲む) */
  .text-list p,
  .text-list ul li { padding-bottom: .3em; }
}


/* = default
  ------------------------------------------------------------------------------------------*/

.inline-wrap{padding: 20px; box-sizing: border-box; }

.stand-text { font-weight: bold; color: #c8141e;}
.text-link{text-decoration: underline;}
.text-link:hover{text-decoration: none;}
#ticket .flex-box .right-box .list-wrap a.anc-text{line-height: 1.4em; display: inline; color: #c00; font-weight: bold; padding: 0; text-decoration: underline;}
#ticket .flex-box .right-box .list-wrap a.anc-text:hover{background: #fff; text-decoration: none;}
.inline-box{display: inline-block;}
/* リンク矢印 */
.triangle{position: relative;}
.triangle::after{position: absolute; content: ""; right: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../images/icon_arrow_text.svg); width: 135px; height: 16px;top: 50%; transform: translate3d(0px, -50%, 0px);}

.important{border: 2px solid #f00; background-color: #f8f4e6; padding: 12px;}

/* 戻る */
p.return{ margin-bottom: 50px; padding-top: 3em; text-align: center; }
p.return a { color: #000; position: relative; text-decoration: underline; }
p.return a:hover { text-decoration: none; }
p.return a:before, p.return a:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 4px 7px 0px; top: 50%; position: absolute; transform: translate3d(0,-50%,0); }
p.return a:before { left: -10px; border-color: transparent #000000 transparent transparent; }
p.return a:after { left: -9px; border-color: transparent #fff transparent transparent; }

/* wrap */
main.main-wrap img{width: 100%;}
.wrap1000px{max-width: 1000px; width: 92%; margin:0 auto; }
.wrap1200px{max-width: 1200px; width: 92%; margin:0 auto;}

/* 背景 */
.main-wrap .section-bg:nth-of-type(odd){background-color: #fff;}
.main-wrap .section-bg:nth-of-type(odd) #ticket .content-block{background-color: #f7f7f7;}
.main-wrap .section-bg:nth-of-type(even){background-color: #f7f7f7;}
.bg-spice{background-color: #000;}

/* 横並びbox */
.flex-box{display: flex; flex-direction: row; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-start; width: 102%;}

/* セクションごとのwrap */
.section-wrap {padding: 100px 0;}
.section-wrap p:not(:last-of-type) { margin-bottom: 1em; }

/* コンテンツごとのwrap */
.content-wrap:not(:last-of-type) {margin-bottom: 50px;}
.content-inner-wrap:not(:last-of-type){margin-bottom: 30px;}

/* セクションごとのh2 */
#news h2,
#ticket h2,
#about h2,
#movie h2,
#music h2,
#spice h2{ font-size: 14px; line-height: 1em; color: #000; font-weight: bold; position: relative;margin-bottom: 50px;}
#news h2{ padding-left: 155px;margin-top: 20px;}
#ticket h2{ padding-left: 200px;}
#about h2{padding-left: 180px;}
#movie h2{padding-left: 170px;margin-top: 20px;}
#music h2{padding-left: 230px;margin-top: 20px;}
#spice h2{padding-left: 145px; color: #fff;margin-top: 20px;}
#news h2::before,
#ticket h2::before,
#about h2::before,
#movie h2::before,
#music h2::before,
#spice h2::before{position: absolute; content: ""; background-repeat: no-repeat; background-size: contain; left: 0; bottom:0;}
#news h2::before{background-image: url(../images/h_news.png); width: 141px; height: 33px;}
#ticket h2::before{background-image: url(../images/h_ticket.png); width: 185px; height: 33px;}
#about h2::before{background-image: url(../images/h_about.png); width: 172px; height: 33px;}
#movie h2::before{background-image: url(../images/h_movie.png); width: 163px; height: 33px;}
#music h2::before{background-image: url(../images/h_spotify.png); width: 220px; height: 33px;}
#spice h2::before{background-image: url(../images/h_spice.png); width: 132px; height:40px;}

/* mainImage */
#main-img { width: 100%; }
#main-img h2 { margin: 0 auto; max-width: 1200px; width: 100%; }
#main-img picture,
#main-img img { width: 100%; }

/* catchcopy */
#catchcopy .catch-inner{max-width: 1000px; width: 92%; padding: 30px 0; margin: 0 auto;}
#catchcopy p:not(:last-of-type) { margin-bottom: 1em;}
#catchcopy p.catch-heading{font-size: 14px; line-height: 1.7em; font-weight: bold;}
#catchcopy dl{ display: table; text-align: left; margin-top: 1em; font-size: 14px; line-height: 1.4em; width: 100%;}
#catchcopy dl dt{display: table-cell;vertical-align: middle;}
#catchcopy dl dd{display: table-cell; position: relative; padding-left: 2em;vertical-align: middle;}
#catchcopy dd::before{position: absolute; content: ""; border-left: 1px solid #000; top: 50%; transform: translate3d(0,-50%,0); width: 0; height: 80%; left: 1em;}

/* news */
#news .flex-box{margin-bottom: 16px; width: 100%; align-items: flex-start;}
#news .flex-box .heading-box{flex-basis: 28%; max-width: 28%; margin-right: 2%; }
#news .flex-box .content-box{border-top:1px solid #d1d1d1 ; border-bottom:1px solid #d1d1d1 ; flex-basis: 70%; max-width: 70%; padding: 1em 0;}
#news .flex-box .content-box dl{display: table;}
#news .flex-box .content-box dl:not(:last-of-type){margin-bottom: 8px;}
#news .flex-box .content-box dt,
#news .flex-box .content-box dd{display: table-cell;}
#news .flex-box .content-box dt{color: #b1b1b1; font-size: 14px; line-height: 1em;}
#news .flex-box .content-box dd{ padding-left: 1em;}
#news .accordionlist{display: none; margin-top: 8px;}
#news .accordionlist.block{display: block;}
#news button.open-accordion{ line-height: 1em;text-decoration: underline; padding-right: 5px;}
#news button.open-accordion:hover{ text-decoration: none;}
#news button.open-accordion span.icon-accordion{display: inline-block; border: 1px solid #000; width: 16px; height: 16px; vertical-align: middle; border-radius: 100px; line-height: 1em; position: relative;right: -5px;}
#news button.open-accordion span.icon-accordion::before,
#news button.open-accordion span.icon-accordion::after{content: ''; display: block; width: 10px; height: 1px; background: #000; position: absolute; right: 0; top: 50%; transform: translate3d(-50%,-50%,0); backface-visibility: visible; left: 50%;}
#news button.open-accordion span.icon-accordion::after{ background: #000; transform: translate3d(-50%,-50%,0) rotate(90deg); transition: 0.3s; transition-delay: .3s;}
#news button.open-accordion span.icon-accordion.active::after {transform: rotate(0); transition: 0.3s; opacity: 0; left: 0; transition-delay: .3s;}

/* ticket */
#ticket .ticket-wrap:not(:last-of-type){margin-bottom: 90px;}
#ticket .border-wrap{border-bottom: 1px solid #d8d8d8; padding-bottom: 70px;}
#ticket .content-block{background-color: #fff; border-radius: 15px;box-sizing: border-box; }
#ticket .content-wrap:not(:last-of-type){margin-bottom: 50px;}
#ticket .content-wrap .content-inner-wrap{ padding: 20px 30px;}
#ticket h3{font-weight: bold; font-size: 20px; line-height: 1.6em; color: #000; text-align: center; margin-bottom: 50px;}
#ticket h3 .tokuten-icon{ position: relative; padding-left: 30px;}
#ticket h3 .tokuten-icon::before{position: absolute; content: ""; background-image: url(../images/icon_tokuten.svg); width: 23px; height: 31px; background-position: top center; background-repeat: no-repeat; top: 50%; left: 0; transform: translate3d(0,-50%,0);}
#ticket dl.info{display: table; margin: 0 auto; width: 90%; font-size: 16px; line-height: 1.6em;}
#ticket dl.info dt,
#ticket dl.info dd{display: table-cell;}
#ticket dl.info dt{font-weight: bold; width: 50%;}
#ticket dl.info dd{padding-left: 1em;width: 50%;vertical-align: middle;}
#ticket .flex-box{width: 100%; }
#ticket .flex-box .left-box{border-radius: 10px 0 0 10px;padding: 20px 25px; flex-basis: 25%; max-width: 25%; position: relative;}
#ticket .choice-wrap .flex-box .left-box{background-color: #fff;}
#ticket .choice-wrap .flex-box .left-box::after{ position: absolute; content: ""; border-right: 1px solid #cecece; right: 0; top: 50%; transform: translate3d(0,-50%,0);width: 0px;height: 80%;;}
#ticket .choice-wrap .flex-box .left-box h4{ color: #000;}
#ticket .ticket-off .flex-box .left-box{background-color: #939393;color: #fff;}
#ticket .ticket-close .flex-box .right-box .list-wrap .link-off span.ticket-text{color: #000;}
#ticket .flex-box .left-box h4 { font-weight: bold; font-size: 16px; line-height: 1.6em; margin-bottom: .6em; position: relative; }
#ticket .flex-box .left-box .sub-text { line-height: 1.8em;}
#ticket .flex-box .left-box .sale-type { border: 1px solid; border-radius: 100px; display: inline-block; font-size: 14px; font-weight: bold; line-height: 1em; margin-bottom: 1em; padding: 5px 10px 5px; }
#ticket .flex-box .right-box{ border-radius:0 15px 15px 0 ;padding: 20px 30px; flex-basis: 75%; max-width: 75%;}
#ticket .list-wrap.free-wrap{padding: 15px 0;}
#ticket .list-wrap{}
#ticket .list-wrap:not(:last-of-type){border-bottom: 1px dashed #cecece; margin-bottom: 25px;}
#ticket .tokuten-wrap{ margin-bottom: 15px;}
#ticket .tokuten-wrap:not(:last-of-type){border-bottom: 1px dashed #cecece; padding-bottom: 15px;}
#ticket .flex-box .right-box .list-wrap p.notice{font-weight: bold; position: relative; display: inline-block;}
#ticket .flex-box .right-box .list-wrap p.notice::after{ position: absolute; content: ""; background-repeat: no-repeat; background-image: url(../images/icon_notice.png); width: 21px; height: 14px; background-size: contain; top: 43%; transform: translate3d(0px, -50%, 0px); right: -25px;}
#ticket .flex-box .right-box .list-wrap a.link-box{overflow: hidden; line-height: 1.8em;display: block;color: #000; font-weight: bold; padding: 15px 170px 15px 15px; position: relative; transition: .3s;border: 2px solid #cecece; border-radius: 7px; box-sizing: border-box; margin-bottom: 25px;}
#ticket .flex-box .right-box .list-wrap a.link-box::before{position: absolute; top: 0; left: 0; z-index: -1; content: ''; width: 130%; height: 100%; transform-origin: right top; transform: skewX(-30deg) scale(0, 1); transition: transform .3s; z-index: 0;}
#ticket .flex-box .right-box .list-wrap a.link-box:hover{}
#ticket .flex-box .right-box .list-wrap a.link-box:hover::before{transform-origin: left top;transform: skewX(-30deg) scale(1, 1);}
#ticket .flex-box .right-box .list-wrap span.ticket-text{position: relative;}
#ticket .flex-box .right-box .list-wrap span.price{}
#ticket .flex-box .right-box .list-wrap .link-off{pointer-events: none;}
#ticket .flex-box .right-box .list-wrap .link-off span.ticket-text{color: #cecece;}
#ticket .flex-box .right-box .list-wrap .soldout::after{position: absolute; content: ""; background-image: url(../images/icon_soldout.png); background-repeat: no-repeat; background-size: contain; width: 53px; height: 22px; top: 15px; left: 15px;}
#ticket .flex-box .right-box .list-wrap .comingsoon::after{content: "Coming soon"; background-image:none;  width: unset; height: unset; top: 15px; left: 15px; font-weight: normal; font-size: 12px; position: absolute; line-height: 1em; color: #cecece;}
#ticket .flex-box .right-box .list-wrap .soldout{padding-top: 50px;}
#ticket .flex-box .right-box .list-wrap .comingsoon{padding-top: 40px;}
#ticket .flex-box .right-box .list-wrap .link-off span.price{}
#ticket .flex-box .right-box .list-wrap span.tax{ font-weight: normal;}
#ticket .flex-box .right-box .list-wrap span.sub-text{display: inline-block; margin-bottom: 0.4em; color: #838383;}
#ticket .line-border{position: relative;}
#ticket .line-border::after{position: absolute; content: ""; border-top:1px solid #c00; top: 50%; transform: translate3d(-50%,-50%,0); left: 50%; height: 0; width: 100%;}
#ticket .ticket-off .line-border::after{border-top:1px solid #cecece;}

#ticket .accordionlist{display: none; margin-top: 50px;}
#ticket .accordionlist.block{display: block;}
#ticket button.open-accordion{ line-height: 1em;text-decoration: underline; padding-right: 5px;font-size: 14px;}
#ticket button.open-accordion:hover{ text-decoration: none;}
#ticket button.open-accordion span.icon-accordion{left: 5px; bottom: 2px; width: 7px; height: 7px; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(135deg); transform: rotate(135deg);transition-delay: .3s; transition-duration: .3s; display: inline-block; position: relative;}
#ticket button.open-accordion span.icon-accordion.active{ -webkit-transform: rotate(315deg); transform: rotate(315deg);}


/*other-link*/
#other-link{padding-top: 0;}
#other-link .flex-box{justify-content: space-around; width: 100%;}
#other-link .flex-box .box03{border-radius: 5px; max-width: 32%; flex-basis: 32%; position: relative;overflow: hidden;background-color: #000; cursor: pointer;}
#other-link .flex-box .box03 img{ transition-duration: .4s;}
#other-link .flex-box .box03 span.ph-text{position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); text-align: center; color: #fff; backface-visibility: visible; font-size: 20px; letter-spacing: 2px; line-height: 1.4em; display: block; width: 100%;}
#other-link .flex-box .box03:hover{}
#other-link .flex-box .box03:hover img{transform: scale(1.1, 1.1); opacity: .6; }

#other-link .flex-box .box03.box01{max-width: 32%; flex-basis: 32%; margin: 0 34% 0 34%;}
#other-link .flex-box .box03.box02:nth-of-type(1){max-width: 32%; flex-basis: 32%; margin: 0 0 0 18%;}
#other-link .flex-box .box03.box02:nth-of-type(2){max-width: 32%; flex-basis: 32%; margin: 0 18% 0 0;}

/*about*/
#about{}
#about .content-wrap{}
#about .content-wrap:not(:last-of-type){border-bottom: 1px solid #cecece; margin-bottom: 35px; padding-bottom: 30px;}
#about dl{ display: table; text-align: left; margin-top: 1em; font-size: 14px; line-height: 1.4em; font-weight: bold; width: 100%;}
#about dl dt{display: table-cell;vertical-align: middle;}
#about dl dd{display: table-cell; position: relative; padding-left: 2em;vertical-align: middle;}
#about dl dt{width: 10%;}
#about dl dd.date-block{width: 35%;}
#about dl dd.place-block{width: 55%;}
#about dd::before{position: absolute; content: ""; border-left: 1px solid #000; top: 50%; transform: translate3d(0,-50%,0); width: 0; height: 80%; left: 1em;}
#about .flex-box{width: 100%;}
#about .flex-box .ph-box{flex-basis: 40%; max-width: 40%; margin-right: 4%;}
#about .flex-box .text-box{flex-basis: 56%; max-width: 56%;}
#about p.heading-text{font-weight: bold; font-size: 18px; line-height: 1em;}
#about .text-box .link-button{margin-top: 30px;}
#about .text-box .link-button a {font-size: 16px; font-weight: normal;margin: 0 0 0 auto; max-width: 280px; width: 100%; background-color: transparent; box-shadow: none; border: 1px solid #000; color: #000; width: 50%;padding: 15px 0 15px; }
#about .text-box .link-button a:hover {background-color: #000; color: #fff; text-shadow: none; opacity: 1;}
#about .text-box .link-button a:after {position: absolute; content: ""; right: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../images/icon_arrow_bk.png); width: 4px; height: 15px;top: 50%; transform: translate3d(0px, -50%, 0px);}
/*movie*/
#movie{}
#movie .flex-box{width: 100%;}
#movie .flex-box .heading-box{flex-basis: 48%; max-width: 48%; margin-right: 2%;}
#movie .flex-box .content-box{flex-basis: 50%; max-width: 50%;}
#movie .content-box .video-outer-wrap{margin: 0 auto 30px; width: 100%;}
#movie .content-box .video-outer-wrap p{}
#movie .content-box .video-wrap{}

/*music*/
#music{}
#music .flex-box{width: 100%;}
#music .flex-box .heading-box{flex-basis: 48%; max-width: 48%; margin-right: 2%;}
#music .flex-box .content-box{flex-basis: 50%; max-width: 50%;}
#music .content-box .music-outer-wrap{margin: 0 auto 30px; width: 100%; }
#music .content-box .music-wrap{overflow: hidden; padding-bottom: 430px; position: relative; height: 0px; width: 100%; }
#music .content-box .music-wrap iframe{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#movie .content-box .video-outer-wrap p{}

/*spice*/
#spice{}
#spice .flex-box{width: 100%;}
#spice .flex-box .heading-box{  flex-basis: 28%; max-width: 28%; margin-right: 2%;}
#spice .flex-box .content-box{border-top:1px solid #fff;border-bottom:1px solid #fff; flex-basis: 70%; max-width: 70%; margin-bottom: 15px;}
#spice #news-spice ul li:not(:last-of-type){border-bottom: 1px dashed #fff;}
#spice .flex-box .content-box a{color: #fff;display: block; padding: 15px 0;transition: .2s; }
#spice .flex-box .content-box a:hover{opacity: .8;}
#spice .flex-box .content-box a:not(:last-of-type){border-bottom:1px solid #fff;}
#spice .flex-box .content-box a dl{display: table; width: 100%;}
#spice .flex-box .content-box a dt,
#spice .flex-box .content-box a dd{display: table-cell;}
#spice .flex-box .content-box a dt{width: 18%; text-align: center; vertical-align: top;}
#spice .flex-box .content-box a dd{font-size: 16px; line-height: 1.4em; padding-right: 40px;}
#spice p.spice-more{text-align: right;}
#spice p.spice-more a{text-decoration: underline; color: #fff;padding-right: 40px;}
#spice p.spice-more a:hover{text-decoration: none;}
#spice {}
#spice .triangle::after{position: absolute; content: ""; right: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../images/icon_arrow_white.png); width: 4px; height: 15px;top: 50%; transform: translate3d(0px, -50%, 0px);}


/*banner*/
#banner { padding-top: 0; }
#banner .flex-box { justify-content: space-around; width: 100%; }
#banner .flex-box .banner-area{flex-basis: 60%; max-width: 60%; margin-right: 6%;}
#banner .flex-box .banner-area .flex-box{}
#banner .flex-box .banner-area .flex-box .box02{max-width: 48%; flex-basis: 48%; margin-right: 2%;margin-bottom: 2%;}
#banner .flex-box .banner-area .flex-box .box02 img{width: 100%;}
#banner .flex-box .banner-area .flex-box .box02:nth-of-type(2n){margin-right: 0;}
#banner .flex-box .favorite-area{margin-left: 6%; flex-basis: 28%; max-width: 28%;}

/* ticket-detail */
#ticket-page #ticket-top{ padding: 90px 0 40px;}
#ticket-page #ticket-top h2{font-size: 14px; line-height: 1em; color: #000; font-weight: bold; position: relative; text-align: center;}
#ticket-page #ticket-top h2::before{position: absolute; content: ""; background-size: contain; background-repeat: no-repeat; background-image: url(../images/h_ticket.png); background-position: center; left: 50%; transform: translate3d(-50%,0,0);width: 185px; height: 33px; top: -50px;}
#ticket-page #ticket .list-wrap:not(:last-of-type){ margin-bottom: 15px; padding-bottom: 15px;}
#ticket-page #ticket p.ticket-list-heading{font-size: 16px; line-height: 1em; font-weight: bold;margin-bottom: .6em;}
#ticket-page #ticket p.info-text{font-weight: bold;}
#ticket-page #ticket-detail {padding-bottom: 50px;}
#ticket-page #ticket-detail .content-wrap{margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #f7f7f7;}
#ticket-page #ticket-detail .content-wrap:last-of-type{margin-bottom: 0;}
#ticket-page #ticket-detail p.caution{ font-size: 16px; line-height: 1em; font-weight: bold; margin-bottom: 30px; color: #ff1d00; text-align: center;}
#ticket-page #ticket-detail p.caution span{position: relative;padding-left: 30px;}
#ticket-page #ticket-detail p.caution span::before{position: absolute; content: ""; background-size: contain; background-repeat: no-repeat; background-image: url(../images/icon_caution.png); background-position: center; top: 43%; transform: translate3d(0,-50%,0); left: 0; width: 24px; height: 21px;}
#ticket-page #ticket-detail h3{position: relative; font-size: 20px; line-height: 1em; font-weight: bold; margin-bottom: .8em; padding-left: 2em;}
#ticket-page #ticket-detail h3::before{position: absolute; left: 0; counter-increment: number 1; content: "" counter(number) "."; }
#ticket-page #ticket-detail p.content-heading{font-weight: bold; border-left: 3px solid #000; padding-left: .6em; line-height: 1.4em; margin-bottom: 1em;}
#ticket-page .section-wrap.button-wrap{padding-top: 0;}
#ticket-page .period-wrap{ padding: 30px 0 0; margin-bottom: 50px;}
#ticket-page .period-wrap .period-inner{max-width: 750px; margin: 0 auto;}
#ticket-page .period-wrap .period-inner.flex-box{}
#ticket-page .period-wrap .period-inner.flex-box dl{text-align: center; color: #e95098;}
#ticket-page .period-wrap .period-inner.flex-box dl.box01{flex-basis: 100%; max-width: 100%;}
#ticket-page .period-wrap .period-inner.flex-box dl.box02{flex-basis: 48%; max-width: 48%; margin-right: 2%;}
#ticket-page .period-wrap .period-inner.flex-box dl.box03{flex-basis: 31.3%; max-width: 31.3%; margin-right: 2%;}
#ticket-page .period-wrap .period-inner.flex-box dt{font-size: 16px; line-height: 1em; margin-bottom: .6em;}
#ticket-page .period-wrap .period-inner.flex-box dd{font-weight: bold; font-size: 18px; line-height: 1.4em;}
#ticket-page p.btn-text{text-align: center; margin-bottom: .4em; font-weight: bold; color:#e95098; font-size: 16px; line-height: 1.4em;}
#ticket-page .link-button a{ border-radius: 100px; box-shadow: none; background-color: #e95098; font-size: 20px; padding: 1.1em 0 1.1em; width: 50%;}
#ticket-page .link-button a:hover{text-shadow: none; color: #fff; opacity: .8;}
#ticket-page .link-button a:active{color: #fff; transform: none;}
#ticket-page .link-button.ajax-button a{border-radius: 0; border:1px solid #000; border-radius: 100px; background-color: transparent; color: #000; width: 50%; font-size: 18px;}
#ticket-page .link-button.ajax-button a:hover{background-color: #000; opacity: 1; color: #fff;}
#ticket-page .link-button a::after,
#ticket-page .link-button.ajax-button a::after{position: absolute; content: ""; width: 4px; height: 15px; background-size: contain; background-repeat: no-repeat; top: 50%; transform: translate3d(0,-50%,0); right: 6%;}
#ticket-page .link-button a::after{background-image: url(../images/icon_arrow_white.png);}
#ticket-page .link-button.ajax-button a::after{background-image: url(../images/icon_arrow_bk.png);}

#ticket-page .accordionlist{display: none; margin-top: 50px;}
#ticket-page .accordionlist.block{display: block;}
#ticket-page button.open-accordion{ line-height: 1em;text-decoration: underline; padding-right: 5px;}
#ticket-page button.open-accordion:hover{ text-decoration: none;}
#ticket-page button.open-accordion span.icon-accordion{display: inline-block; border: 1px solid #000; width: 16px; height: 16px; vertical-align: middle; border-radius: 100px; line-height: 1em; position: relative;right: -5px;}
#ticket-page button.open-accordion span.icon-accordion::before,
#ticket-page button.open-accordion span.icon-accordion::after{content: ''; display: block; width: 10px; height: 1px; background: #000; position: absolute; right: 0; top: 50%; transform: translate3d(-50%,-50%,0); backface-visibility: visible; left: 50%;}
#ticket-page button.open-accordion span.icon-accordion::before{}
#ticket-page button.open-accordion span.icon-accordion::after{ background: #000; transform: translate3d(-50%,-50%,0) rotate(90deg); transition: 0.3s; transition-delay: .3s;}
#ticket-page button.open-accordion span.icon-accordion.active::after {transform: rotate(0); transition: 0.3s; opacity: 0; left: 0; transition-delay: .3s;}

/* detailPage */
#detail h2{font-size: 20px; line-height: 1.4em; font-weight: bold; margin-bottom: 50px;}
#detail .top-img{max-width: 1000px; width: 100%; margin:0 auto 30px; }
#detail p.content-heading{font-weight: bold; border-left: 3px solid #000; padding-left: .6em; line-height: 1em; margin-bottom: 1em;}

/*artist timetable map Page*/
#title-header{ width: 100%; padding: 25px 0; }
.bg-artist#title-header{background:url(../images/heading_artist.jpg) top center no-repeat; }
.bg-timetable#title-header{background:url(../images/heading_timetable.jpg) top center no-repeat; }
.bg-map#title-header{background:url(../images/heading_map.jpg) top center no-repeat; }
#title-header h2{text-align: center; color: #fff; font-weight: bold;}
#title-header h2 span{display: block;}
#title-header h2 span.txt-en{font-size: 40px; line-height: 1em; margin-bottom: 5px; letter-spacing: .2em;}
#title-header h2 span.txt-jp{font-size: 14px; line-height: 1em; letter-spacing: .1em;}

#artist-page {max-width: 1000px; width: 92%; padding: 100px 0; }
#artist-page .content-wrap:not(:last-of-type){margin-bottom: 50px;}
#artist-page .content-wrap img{width: 100%; box-shadow: 0 0 7px 0px rgba(0,0,0,0.1);}
#artist-page .content-wrap .box02{margin: 0 2% 0 0;}
#artist-page .content-wrap .vertical{max-width: 500px; width: 100%; margin: 0 auto;}
#artist-page .content-wrap .horizontal{max-width: 1000px; width: 100%; margin: 0;}
#artist-page .content-wrap .artist-txt-box ul li{display: inline-block; position: relative; font-size: 12px; letter-spacing: .1em; line-height: 2em;}
#artist-page .content-wrap .artist-txt-box ul li.new { color: #ff1c1c; padding-right: calc(40px + 0.5em); }
#artist-page .content-wrap .artist-txt-box ul li.new::before { position: absolute; content: '(NEW!)'; right: 1em; }
#artist-page .content-wrap .artist-txt-box ul li:not(:last-of-type)::after { content: " / "; white-space: pre-wrap; }
#artist-page .content-wrap .artist-txt-box ul li:not(:last-of-type).new::after { color: #000; position: relative; right: calc(-40px - 1em); }
#artist-page .content-wrap .txt-box h3{font-size: 18px; line-height: 1em; letter-spacing: .1em; font-weight: bold;margin-bottom: .8em;}
#artist-page .content-wrap .txt-box p{font-size: 14px; line-height: 1.6em; letter-spacing: 0.05em;}

@media screen and (max-width: 768px){
/* リンク矢印 */
.triangle{position: relative;}
.triangle::after{bottom: 20px; transform: none; top: inherit;}

/* 戻る */
p.return{margin-bottom: 7vw; }

/* 横並びbox */
.flex-box{width: 100%;}

/* セクションごとのwrap */
.section-wrap {padding: 17vw 0;}

/* コンテンツごとのwrap */
.content-wrap:not(:last-of-type) {margin-bottom: 7vw;}
.content-inner-wrap:not(:last-of-type){margin-bottom: 5vw;}

/* セクションごとのh2 */
#news h2,
#ticket h2,
#about h2,
#movie h2,
#music h2,
#spice h2{margin-bottom: 7vw;margin-top: 10px}
#news h2{ padding-left: 115px;}
#ticket h2{ padding-left: 145px;}
#about h2{padding-left: 135px;}
#movie h2{padding-left: 125px;}
#music h2{padding-left: 175px;}
#spice h2{padding-left: 110px;}
#news h2::before,
#ticket h2::before,
#about h2::before,
#movie h2::before,
#music h2::before,
#spice h2::before{ height: 24px;}
#spice h2::before{height: 30px;}

/* catchcopy */
#catchcopy .catch-inner{ padding: 7vw 0;}
#catchcopy p{text-align: left;}
#catchcopy p.catch-heading{text-align: left;}
#catchcopy dl{  display: block; text-align: left;  border-left:; line-height: 1.8em;}
#catchcopy dl dt{width: 100%; display: block;}
#catchcopy dl dd{width: 100%; display: block;}
#catchcopy dl dd::before{content: none; }

/* news */
#news .flex-box{margin-bottom: 3vw; width: 100%;}
#news .flex-box .heading-box{flex-basis: 100%; max-width: 100%; margin-right: 0%; }
#news .flex-box .content-box{ flex-basis: 100%; max-width: 100%;}
#news .flex-box .content-box dl{display: block;}
#news .flex-box .content-box dt,
#news .flex-box .content-box dd{display: block;}
#news .flex-box .content-box dd{ padding-left: 0em;}

/* ticket */
#ticket .border-wrap{padding-bottom: 12vw;}
#ticket .ticket-wrap:not(:last-of-type){margin-bottom: 15vw;}
#ticket .choice-wrap .flex-box .left-box::after{ border-right: none; border-bottom: 1px solid #cecece; right: inherit; transform: translate3d(-50%, 0px, 0px); width: 90%; left: 50%; height: 0; bottom: 0px; top: inherit;}
#ticket h3{font-size: 18px; margin-bottom: 9vw;}
#ticket .flex-box .right-box .list-wrap .soldout{padding-top: 30px; padding-bottom: 20px;}
#ticket .flex-box .right-box .list-wrap .comingsoon{padding-top: 20px; padding-bottom: 20px;}
#ticket .content-wrap:not(:last-of-type){margin-bottom: 11vw;}
#ticket .content-wrap .content-inner-wrap{ padding: 10px 15px;}
#ticket dl.info{display: block; width: 100%; }
#ticket dl.info dt,
#ticket dl.info dd{display: block;}
#ticket dl.info dt{ width: 100%;margin-bottom: .4em;}
#ticket dl.info dd{padding-left: 0em;width: 100%;}
#ticket .flex-box{ }
#ticket .flex-box .left-box{padding: 10px 15px; flex-basis: 100%; max-width: 100%; border-radius: 15px 15px 0 0;}
#ticket .flex-box .left-box h4{font-size: 18px;}
#ticket .flex-box .right-box{ border-radius:0 0 15px 15px ;padding: 25px 15px; flex-basis: 100%; max-width: 100%;}
#ticket .flex-box .right-box .list-wrap a.link-box{padding: 20px 15px 50px 15px;}
#ticket .flex-box .right-box .list-wrap span.ticket-text .bigger{font-size: 16px;}
#ticket .flex-box .right-box .list-wrap .link-off{padding-bottom: 20px;}
#ticket .flex-box .right-box .list-wrap .link-off span.ticket-text::after{width: 39px; height: 16px; right: -50px;}
#ticket .flex-box .right-box .list-wrap .link-off.comingsoon span.ticket-text::after{font-size: 12px; font-weight: normal; right: 50%; transform: translate3d(50%, 0px, 0px); top: -10px;}

#ticket .accordionlist{ margin-top: 7vw;}

/*other-link*/
#other-link{width: 100%;padding: 0;}
#other-link .flex-box .box03 span.ph-text{font-size: 18px;}
#other-link .flex-box .box03.box01,
#other-link .flex-box .box03.box02,
#other-link .flex-box .box03{max-width: 100%; flex-basis: 100%; margin:0 auto; }

/*about*/
#about .content-wrap:not(:last-of-type){margin-bottom: 5vw; padding-bottom: 4vw;}
#about dl{display: block;}
#about dl:not(:last-of-type){ border-bottom: 1px solid #000;padding-bottom: 1em;}
#about dl dt,
#about dl dd:not(:last-of-type){margin-bottom: .6em;}
#about dl dt{display: block;}
#about dl dd{display: block; padding-left: 0;}
#about dl dd::before{content: none;}
#about dl dt{width: 100%;}
#about dl dd.date-block{width: 100%;}
#about dl dd.place-block{width: 100%;}
#about .flex-box .ph-box{flex-basis: 100%; max-width: 100%; margin-right: 0%; margin-bottom: 7vw;}
#about .flex-box .text-box{flex-basis: 100%; max-width: 100%;}
#about p.heading-text{font-size: 16px; line-height: 1.4em;}
#about .text-box .link-button{margin-top: 7vw;}
#about .text-box .link-button a { width: 90%; margin: 0 auto;}

/*movie*/
#movie .flex-box .heading-box{flex-basis: 100%; max-width: 100%; margin-right: 0%;}
#movie .flex-box .content-box{flex-basis: 100%; max-width: 100%;}
#movie .content-box .video-outer-wrap{margin: 0 auto 5vw;}

/*music*/
#music .flex-box{width: 100%;}
#music .flex-box .heading-box{flex-basis: 100%; max-width: 100%; margin-right: 0%;}
#music .flex-box .content-box{flex-basis: 100%; max-width: 100%;}
#music .content-box .music-outer-wrap{margin: 0 auto 5vw ;}

/*spice*/
#spice .flex-box .heading-box{  flex-basis: 100%; max-width: 100%; margin-right: 0%;}
#spice .flex-box .content-box{flex-basis: 100%; max-width: 100%; margin-bottom: 15px;}
#spice .flex-box .content-box a:not(:last-of-type){border-bottom:1px solid #fff; margin-bottom: 15px;  padding-bottom: 15px;}
#spice .flex-box .content-box a dl{display: block;}
#spice .flex-box .content-box a dt,
#spice .flex-box .content-box a dd{display: block; width: 100%;}
#spice .flex-box .content-box a dt{text-align: left;}
#spice .flex-box .content-box a dd{font-size: 14px;}
#spice p.spice-more{text-align: center;}

/*banner*/
#banner .flex-box{flex-direction: column-reverse; margin-bottom: -7vw;}
#banner .flex-box .banner-area{flex-basis: 100%; max-width: 100%; margin: 0 auto; margin-bottom: 7vw;}
#banner .flex-box .banner-area .flex-box{ flex-direction: column; margin-bottom: -5vw}
#banner .flex-box .banner-area .flex-box .box02{max-width: 336px; flex-basis: 100%; margin: 0 auto; margin-bottom: 5vw;}
#banner .flex-box .banner-area .flex-box .box02 img{width: 100%;}
#banner .flex-box .banner-area .flex-box .box02:nth-of-type(2n){margin: 0 auto 5vw;}
#banner .flex-box .favorite-area{margin-left: 0%; flex-basis: 100%; max-width: 100%; margin-bottom: 7vw;}

/* ticket-detail */
#ticket-page #ticket-top{ padding: 70px 0 30px;}
#ticket-page #ticket-top h2::before{height: 24px; top: -40px;}
#ticket-page #ticket p.info-text{line-height: 1.8em;}
#ticket-page #ticket-detail {padding-bottom: 7vw;}
#ticket-page #ticket-detail .content-wrap{padding-bottom: 7vw;}
#ticket-page #ticket-detail .content-wrap:not(:last-of-type){margin-bottom: 7vw; padding-bottom: 7vw;}
#ticket-page #ticket-detail p.caution{ margin-bottom: 7vw;}
#ticket-page #ticket-detail h3{font-size: 18px; line-height: 1.4em;}
#ticket-page .period-wrap{ padding: 20px 0; margin-bottom: 7vw;}
#ticket-page .period-wrap .period-inner.flex-box{width: 100%; margin-bottom: -5vw;}
#ticket-page .period-wrap .period-inner.flex-box dl.box01{ margin-bottom: 5vw;}
#ticket-page .period-wrap .period-inner.flex-box dl.box02{flex-basis: 100%; max-width: 100%; margin-bottom: 5vw; margin-right: 0%;}
#ticket-page .period-wrap .period-inner.flex-box dl.box03{flex-basis: 100%; max-width: 100%; margin-bottom: 5vw; margin-right: 0%;}
#ticket-page .period-wrap .period-inner.flex-box dt{font-size: 14px; line-height: 1.4em;}
#ticket-page .period-wrap .period-inner.flex-box dd{ font-size: 16px;}
#ticket-page .link-button a{ font-size: 16px; width: 100%;}
#ticket-page .link-button.ajax-button a{width: 90%; font-size: 16px; line-height: 1.4em;}

#ticket-page .accordionlist{margin-top: 7vw;}

/* detailPage */
#detail h2{font-size: 18px; margin-bottom: 7vw;}
#detail .top-img{ margin:0 auto 5vw; }
#detail p.content-heading{border-left: 2px solid #000;}

/*artist timetable map Page*/
#title-header h2 span.txt-en{font-size: 30px; line-height: 1em; letter-spacing: .15em;}
#artist-page {width: 92%; padding: 17vw 0; }
#artist-page .content-wrap:not(:last-of-type){margin-bottom: 9vw;}
#artist-page .content-wrap .box02{margin: 0 0 5% 0;}

}


/* お気に入り登録ボタン */
.block-favorite__register {margin-top: 0; }
.block-favorite__register .block-word__button {margin: 0 auto; max-width: unset; }
.block-favorite__register .button {border-radius: 0px; padding: 0; transition: .2s;}
.block-favorite__register .button:hover {opacity: .8; }
.block-favorite__register .button--favorite { border: none;background-color: transparent;}
.block-favorite__register .button--favorite-checked { background-color: transparent; border: none;}
.block-favorite__register .button--favorite:before {width: 100%; height: 40vw; margin: 0; background-image: url(../images/fav_btn.svg); }
.block-favorite__register .button--favorite-checked:before {width: 100%; height: 150px; margin: 0;background-image: url(../images/fav_btn_check.svg);}
.block-favorite__register .button.loading {color: transparent; position: relative; cursor: default; min-height: auto; pointer-events: none; }
.block-favorite__register .button.loading:before {content: ''; display: block; margin: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; background-image: url(/s/eplus/img/img_loading_gray.gif); background-size: 16px 16px; background-color: transparent !important; }
@media only screen and (min-width: 768px) {
.block-favorite__register .button { min-width: unset; padding: 0; background-color: transparent; border: none;}
.block-favorite__register .button--favorite:before {width: 100%; height: 11.8vw; margin: 0; background-image: url(../images/fav_btn.svg);}
.block-favorite__register .button--favorite-checked:before {background-image: url(../images/fav_btn_check.svg);}
}

/*ButtonTagStyle*/
.link-button button{box-sizing: border-box; display: block; font-weight: bold; line-height: 1em; margin: 0 auto; position: relative; text-align: center; transition: .1s; border-radius: 100px; box-shadow: none; background-color: #e95098; font-size: 20px; padding: 1.1em 0 1.1em; width: 50%; color: #fff;}
.link-button button:hover{text-shadow: none; color: #fff; opacity: .8;}

@media screen and (max-width: 768px){
.link-button button{font-size: 16px; width: 100%;}
}


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch; padding: 0;}
#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; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-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:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#fff;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff; padding:1px;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:40px; height:20px; position:absolute; top:-30px; background:url(../images/controls4.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{/*background-position:-50px 0px;*/ right:0;}
        #cboxClose:hover{/*background-position:-50px -25px;*/}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

/* accordion */

#ticket-page dl.accordionbox{}
#ticket-page dl.accordionbox dt{line-height: 1em;text-decoration: underline; padding-right: 5px; cursor: pointer; display: inline-block;}
#ticket-page dl.accordionbox dt:hover{ text-decoration: none;}
#ticket-page dl.accordionbox dd{display: none; }
#ticket-page dl.accordionbox dt span.icon-accordion{display: inline-block; border: 1px solid #000; width: 16px; height: 16px; vertical-align: middle; border-radius: 100px; line-height: 1em; position: relative;right: -5px;}
#ticket-page dl.accordionbox dt span.icon-accordion::before,
#ticket-page dl.accordionbox dt span.icon-accordion::after{content: ''; display: block; width: 10px; height: 1px; background: #000; position: absolute; right: 0; top: 50%; transform: translate3d(-50%,-50%,0); backface-visibility: visible; left: 50%;}
#ticket-page dl.accordionbox dt span.icon-accordion::before{}
#ticket-page dl.accordionbox dt span.icon-accordion::after{ background: #000; transform: translate3d(-50%,-50%,0) rotate(90deg); transition: 0.3s; transition-delay: .3s;}
#ticket-page dl.accordionbox dt span.icon-accordion.active::after {transform: rotate(0); transition: 0.3s; opacity: 0; left: 0; transition-delay: .3s;}

/* colorbox */
#ticket-page .colorbox{ display: block; width: 50%; max-width: 300px;}
#ticket-page .step-img{max-width: 780px; width: 100%; }
@media screen and (max-width: 768px){
#ticket-page .colorbox{ display: block; width: 100%; max-width: unset;}
#ticket-page .colorbox.sp-none{display: none;}
}