/* = edit
  ------------------------------------------------------------------------------------------*/

img { width: 100%; }
span { display: inline-block; white-space: pre-wrap; }
picture { display: block; }

.mid { font-size: 1.1em; line-height: 1.4em; }
.big { font-size: 1.2em; line-height: 1.4em; }
.bigger { font-size: 1.3em; line-height: 1.4em; }
.biggest { font-size: 1.5em; line-height: 1.4em; }

.breadcrumb li a { text-decoration: none; }
#ticket-page #ticket p.ticket-list-heading { line-height: 1.4em; }
#ticket .flex-box .right-box .list-wrap p a:hover::before { content: none; }
#ticket .flex-box .right-box .list-wrap p a:hover { color: inherit; }
#ticket .flex-box .right-box .list-wrap p a { line-height: 1.6; display: inline; color: inherit; padding: 0; border: none; text-decoration: underline; }

@media screen and (max-width: 768px){
  #ticket .flex-box .right-box .list-wrap .comingsoon::after { left: auto; right: 15px; top: 50%; transform: translateY(-50%); }
}

/*追従ボタン*/
.square-button a { padding: 1em; width: 150px; height: 150px; }
.square-button a:hover { border-color: #ff335c; }
.square-button a span.square-text { font-size: 16px; font-weight: bold; line-height: 1.25; top: calc(50% + .5em); transform: none; width: 90%; max-width: inherit; }
.square-button a:hover span.square-text { transform: scale(0.92); }
.square-button a span.square-text::before { background-image: url(https://eplus.jp/s/page/live/images/icon/slide_ticket.svg); background-repeat: no-repeat; background-position: center; background-size: contain; border-radius: 0; content: ""; opacity: 1; position: absolute; top: -3em; left: 50%; transform: translateX(-50%); width: 100%; height: 2.25em; }
@media screen and (max-width: 768px){
  .square-button a { width: 120px; height: 120px; }
  .square-button a span.square-text { font-size: 13px; }
}

/*アコーディオン*/
.accordionbox dt { cursor: pointer; }
.accordionbox dd { display: none; }

/*colorbox*/
.inline-wrap picture { text-align: center; }

/*メインイメージ 背景*/
#main-img { background-color: #fff; background-position: center; background-repeat: no-repeat; }
/*.webp #main-img { background-image: url(../images/main_bg.webp); background-size: cover; }*/
/*.no-webp #main-img { background-image: url(../images/main_bg.jpg); background-size: cover; }*/

/*キャッチ 背景色と文字色*/
#catchcopy{ background-color: #ff335c; color:#000; }

/*キャッチ 公演名、日程、場所の比率*/
#catchcopy dl dt { width: 12em; }
#catchcopy dl dd.date-block { padding-left: 3em; width: 30em; }
#catchcopy dl dd.place-block { padding-left: 3em; width: auto; }

#about dl dt, #about dl dd.date-block, #about dl dd.place-block { display: block; margin-bottom: .5em; padding-left: 0; width: 100%; }
#about dl dd::before { content: none; }

/*キャッチ 公演名、日程、場所の仕切り線の色*/
#catchcopy dd::before{ border-left: 1px solid #fff;}

/*ガイドライン*/
#guidelines {}
#guidelines h2 { font-size: 1.5em; font-weight: bold; line-height: 1.6em; margin-bottom: 1em; }
#guidelines h2 + p { color: #f00; font-size: 1.25em; font-weight: bold; margin-bottom: 2em; }
#guidelines .content-wrap { border-bottom: 1px solid #D1D1D1; padding: 1.25em 0; margin-bottom: 0; }
#guidelines .content-wrap:first-of-type { border-top: 1px solid #D1D1D1; }
#guidelines .content-wrap .accordionbox dt { font-size: 18px; font-weight: bold; line-height: 1.4em; padding: 0 1em; position: relative; }
#guidelines .content-wrap .accordionbox dt::after { content: "＋"; font-size: .5em; position: absolute; right: 0; }
#guidelines .content-wrap .accordionbox.active dt::after { content: "－"; }
#guidelines .content-wrap .accordionbox dt::before { border-left: 3px solid; content: ""; position: relative; left: -1em; }
#guidelines .content-wrap:nth-of-type(1) .accordionbox dt::before { color: #db172b; }
#guidelines .content-wrap:nth-of-type(2) .accordionbox dt::before { color: #ed6b22; }
#guidelines .content-wrap:nth-of-type(3) .accordionbox dt::before { color: #F1DB26; }
#guidelines .content-wrap:nth-of-type(4) .accordionbox dt::before { color: #1FA465; }
#guidelines .content-wrap:nth-of-type(5) .accordionbox dt::before { color: #58B6DB; }
#guidelines .content-wrap:nth-of-type(6) .accordionbox dt::before { color: #644297; }
#guidelines .content-wrap .accordionbox dd { padding-top: 1em; }
#guidelines .content-wrap .accordionbox dd ul { list-style: disc; padding-left: 1.5em; }
#guidelines .content-wrap .accordionbox dd li { margin-bottom: .5em; }
#guidelines .content-wrap .accordionbox dd ol { counter-reset: my-counter; list-style: none; padding: 0; } 
#guidelines .content-wrap .accordionbox dd ol li { padding-left: 1.5em; position: relative; }
#guidelines .content-wrap .accordionbox dd ol li:before { border: 1px solid #666; border-radius: 50%; content: counter(my-counter); counter-increment: my-counter; display: block; line-height: 1em; margin-left: -1.5em; position: absolute; top: .2em; text-align: center; height: 1em; width: 1.05em; }
#guidelines .point { color: #f00; display: inline; font-weight: bold; }

#artist { padding: 4em 2em; }
#artist .line-up-text { line-height: 1.25em; }
#artist .line-up-text li { display: inline-block; font-weight: bold; margin-bottom: .5em; }
#artist .line-up-text li:not(:last-child)::after { content: " / "; font-weight: normal; position: relative; bottom: 0; white-space: pre; }
#artist .line-up-text li a { color: #000; display: inline-block; }
#artist .line-up-text li.new::before { background: #e3002d; border-radius: .5em; color: #fff; content: "NEW"; display: inline-block; font-size: .5em; letter-spacing: 0; line-height: 1em; margin-right: .5em; padding: .5em; position: relative; top: 0; left: 0; text-align: center; height: 1em; transform: translateY(-50%); }
#artist .line-up-text li span.less { display: inline; line-height: 1.8em; }

/*チケット 左の背景色と文字色*/
#ticket .flex-box .left-box { background-color: #ff335c; color:#000; }

/*チケット 左の背景色とタイトル文字大きさ*/
/*#ticket .choice-wrap .flex-box .left-box h4 { font-size: ; }*/

#ticket .flex-box .left-box .sale-type { background-color: #fff; }

/*チケット 左の背景色とタイトル下文字大きさ*/
/*#ticket .flex-box .left-box .sub-text { font-size: ; }*/

/*チケット チケットリンクのホバーの色*/
#ticket .flex-box .right-box .list-wrap a::before { background: #ffc637; }

/*チケット チケットリンクのホバー時の文字色*/
#ticket .flex-box .right-box .list-wrap a:hover{color: #000;}

#ticket .flex-box .right-box .list-wrap p.notice { font-weight: normal; }
.famiport .triangle::after { background: none; content: "Famiポートからの購入方法詳細はこちら 〉"; font-weight: normal; text-align: right; width: 100%; }

#ticket .sumakami { border: 1px solid #666; padding: 1em; }
#ticket .sumakami .title { font-weight: bold; }
#ticket .sumakami .title::before { content: "■"; }
#ticket .sumakami ul.list-dotted li { padding-left: 1em; position: relative; }
#ticket .sumakami ul.list-dotted li::before { content: "・"; position: absolute; left: 0; }
#ticket .sumakami p:not(:last-of-type) { margin-bottom: .5em; }
#ticket .sumakami .underline { display: inline; text-decoration: underline; }

#other-link a img { opacity: 0!important; }
#other-link a:hover img { opacity: 0!important; }
#other-link .flex-box .box03 span.ph-text::before { content: ""; position: absolute; top: calc(-32px - .25em); left: calc(50% - 16px); width: 32px; height: 32px; z-index: 1; }
#other-link .flex-box .box03 span.ph-text.artist::before{ background: url(../images/icon_artist.svg) center no-repeat; background-size: }
#other-link .flex-box .box03 span.ph-text.timetable::before{ background: url(../images/icon_timetable.svg) center no-repeat; background-size: }
#other-link .flex-box .box03 span.ph-text.map::before{ background: url(../images/icon_map.svg) center no-repeat; background-size: }
#other-link .flex-box .box03 span.ph-text::after { background: url(../images/icon_link_arrow.svg) center no-repeat; background-size: contain; content: ""; position: absolute; bottom: -.5em; left: calc(50% - 1em); width: 2em; height: .25em; }

#famiport { max-width: 750px; }
#famiport.content-wrap { max-width: 100%; }
#famiport h3 { font-size: 1.5em; font-weight: bold; line-height: 1em; margin-bottom: .5em; }
#famiport h3 + p { margin-bottom: .5em; }
#famiport h3 + p  + .caution::before, #famiport h3 + p  + .caution::after { content: "※※"; }
#famiport ol { counter-reset: my-counter; }
#famiport ol li { border: 2px solid #36ae1a; border-top: 3em solid #36ae1a; border-radius: .5em; margin-bottom: 2em; padding: 1em; position: relative; text-align: center; }
#famiport ol li::before, #famiport ol li::after { color: #fff; font-size: 1.25em; font-weight: bold; }
#famiport ol li::before { content: "ステップ"; position: absolute; top: -1.75em; left: calc(50% - 3em); }
#famiport ol li::after { content: counter(my-counter); counter-increment: my-counter; position: absolute; top: -1.75em; left: calc(50% + 1em); }
#famiport ol li .image { margin: 0 auto; padding-top: .5em; max-width: 500px; }

@media screen and (max-width: 768px){
  #catchcopy dl dt, #about dl dt, #catchcopy dl dd.date-block, #about dl dd.date-block, #catchcopy dl dd.place-block, #about dl dd.place-block{width: 100%; padding-left: 0;}

  #guidelines .content-wrap .accordionbox dt { font-size: 14px; }
  #ticket .content-wrap .content-inner-wrap { padding: 20px 15px; }
  #artist { padding: 2em 0; }
  #other-link { padding-bottom: 17vw; }
  #other-link .flex-box .box03.box01, #other-link .flex-box .box03.box02, #other-link .flex-box .box03 { width: 90%!important; max-width: 450px!important; flex-basis: 90%!important; margin: 0 auto!important; }
  #other-link .flex-box .box03:not(:last-of-type) { margin-bottom: 5vw!important; }
}

/* add */
#ticket .flex-box .right-box .list-wrap .text-link a { border: none; color: #ff335c; display: inline-block; line-height: 1.7; margin: 0; padding: 0; text-decoration: underline; }
#ticket .flex-box .right-box .list-wrap .text-link a:hover { text-decoration: none; }
#ticket .flex-box .right-box .list-wrap .text-link a::before { content: none; }
#ticket .flex-box .right-box .list-wrap a::before { transition: transform .5s ease-in-out; }
#colorbox .inline-wrap { overflow: hidden; }
#online h3 { margin: 0 auto; width: 75%; max-width: 500px; }

#catchcopy p.catch-heading { color: #fff; }
#ticket .flex-box .left-box h4 { color: #fff; }
#ticket .flex-box .left-box .sale-type { color: #000; }

@media screen and (max-width: 768px){
  #artist { font-size: 3.25vw; }
  #artist .line-up-text li.new::before { top: .5em; }
}