@charset "utf-8";

/*lightbox*/
#colorbox, #cboxOverlay, #cboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
  }
  
  #cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  #cboxMiddleLeft, #cboxBottomLeft {
    clear: left;
  }
  
  #cboxContent {
    position: relative;
  }
  
  #cboxLoadedContent {
    overflow: auto;
  }
  
  #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;
  }
  
  .cboxIframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
  }
  
  #colorbox, #cboxContent, #cboxLoadedContent {
    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: #303030;
  }
  
  #colorbox {
    outline: none;
  }
  
  /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
  #cboxContent {
    margin-right: 60px;
    overflow: visible;
    margin-bottom: 0;
  }
  
  .cboxIframe {
    background: #000;
  }
  
  #cboxError {
    padding: 50px;
    border: 1px solid #ccc;
  }
  
  #cboxLoadedContent {
    background: #fff;
  }
  
  #cboxLoadingGraphic {
    background: url(https://d15xg9ntanaqcf.cloudfront.net/images/loading.gif) no-repeat center center;
  }
  
  #cboxLoadingOverlay {
    background: #fff;
  }
  
  #cboxTitle {
    position: absolute;
    top: -22px;
    left: 0;
    color: #000;
  }
  
  #cboxCurrent {
    position: absolute;
    top: -22px;
    right: 205px;
    text-indent: -9999px;
  }
  
  #cboxSlideshow, #cboxClose {
    text-indent: -9999px;
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    background: url(https://d15xg9ntanaqcf.cloudfront.net/images/controls2.png) no-repeat 0 0;
  }
  
  #cboxClose {
    background-position: 7px 0;
    right: -50px;
    border: 0;
    outline: none;
  }
  
  #cboxClose:hover {
    background-position: -40px 0;
  }
  
  @media screen and (max-width: 768px) {
    #cboxContent {
      margin-right: 0;
      margin-bottom: 50px;
    }
    #cboxClose {
      right: 0;
      top: inherit;
      bottom: -35px;
      height: 22px;
    }
  } /*# sourceMappingURL=pages.css.map */
  /*# sourceMappingURL=maps/common.css.map */

/* =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: #E6E6E6; color: #000; counter-reset: number 0; font-family: 'Noto Sans JP', 'Noto Sans JP IE', sans-serif; font-feature-settings : "palt"; font-size: 16px; line-height: 1.6em; }
img { vertical-align: bottom; }
a { color: #f27900; text-decoration: underline; outline: none; }
a:hover { color: #f27900; text-decoration: none; }
a:hover img { opacity: 0.8; filter: alpha(opacity=80); }

/* =header
------------------------------------------------------------------------------------------*/
header {  position: relative; top: 0; width: 100%; z-index: 1; }
header h1 {max-width: 1280px; width: 100%; margin: 0 auto; }
header h1 img{ width: 100%;}


/* =foot
-----------------------------------------------------------------------------------------*/
footer { background: #fff; color: #000; text-align: center; width: 100%; }
footer .section-wrap { margin: 0 auto; padding: 2.5vw 0; }
footer p { font-size: 12px; margin-bottom: .6em; }
footer .miku { width: 157px; }
footer .eplus { width: 41px; }
footer i { display: inline-block; margin-top: -8px; }
footer .table-box .box02:first-child { text-align: right; width: 41%; }
footer .table-box .box02:last-child { padding-left: 1%; text-align: left; width: 59%; }

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top { margin: 0; position: fixed; right: 100px; bottom: 50px; text-align: center; z-index: 10; }
.page_top a {text-decoration: none; background: rgba(255,255,255,.8); border: 1px solid #ccc; border-radius: 40px; color: #000; display: block; font-family: 'Oswald',"メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif; font-size: 11px; height: 80px; line-height: 80px; transition: all .2s; width: 80px; }

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

/* = breadcrumb
------------------------------------------------------------------------------------------*/
.breadcrumb { margin: 0 auto 3vw; max-width: 1280px; width: 92%; }
.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-05vw { margin-bottom: .5vw !important; }
.mb-1vw { margin-bottom: 1vw !important; }
.mb-2vw { margin-bottom: 2vw !important; }
.mb-3vw { margin-bottom: 3vw !important; }
.mb-4vw { margin-bottom: 4vw !important; }
.mb-5vw { margin-bottom: 5vw !important; }
.mb-6vw { margin-bottom: 6vw !important; }
.mb-7vw { margin-bottom: 7vw !important; }
.mb-8vw { margin-bottom: 8vw !important; }
.mb-9vw { margin-bottom: 9vw !important; }
.mb-10vw { margin-bottom: 10vw !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; }


/* 16:9 wrap(youteubeとか) */
.video-outer-wrap { margin: 0 auto 3vw; 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%; }
.video-wrap img { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 100%; }

/* playButton */
.play-button::before { content: ""; border: 3px solid rgba(255,255,255,.5); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); width: 75px; height: 75px; transition: .15s; z-index: 1; }
.play-button::after { content: ""; border: 23px solid transparent; border-left: 35px solid rgba(255,255,255,.5); position: absolute; top: 50%; left: calc(50% + 17px); transform: translate3d(-50%,-50%,0);transition: .15s;  }
.play-button:hover::before { border: 3px solid rgba(255,255,255,1); }
.play-button:hover::after {  border-left: 35px solid rgba(255,255,255,1); }

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

/* 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 { font-size: .9em; padding: 0 0 .2em 1.1em; position: relative; }
p:not(:last-of-child).text-list { margin-bottom: 1em; }
.text-list ul li:not(:last-of-child) { margin-bottom: .4em; }
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; }

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

  /* =header
  ------------------------------------------------------------------------------------------*/
  header {  }

  /* =pagetop
  ------------------------------------------------------------------------------------------*/
  .page_top{ display: none; }

  /* = mainImage
  ------------------------------------------------------------------------------------------*/
  #main-img { background-image: none; }

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

  /* セクションごとのwrap */
  .section-wrap { margin: 0 auto 16vw; width: 92%; }

  /* コンテンツごとのwrap */
  .content-wrap { margin-bottom: 13vw;  }

  /* = 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; }



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

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

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

/* 追加 */
/* = mainImage */
#main-img { width: 100%;  max-width: 1280px; background-color: #fff; margin:0 auto; }
#main-img h1 { margin: 0 auto; max-width: 800px; width: 90%; background-color: #fff; box-sizing: border-box; padding: 30px 0;}
#main-img img { width: 100%; }
#main-img .txt{background-color: #1e2021; color: #fff; text-align: center; font-weight: bold; line-height: 1.4em; padding: .4em .2em;  margin: 0 auto; max-width: 1280px; width: 100%;font-size: min(3vw, 38px);}

/* = wrap */
/* コンテンツエリア全体wrap */
.container{max-width: 1280px; width: 100%; margin:0 auto 1vw; background-color: #fff;  }
/* main用のwrap */
.main-wrap { background: #fff; display: block; margin: 0 auto ; padding: 0 0 1vw; max-width: 1000px; width: 100%; }

/* セクションごとのwrap */
.section-wrap { margin: 0 auto 80px; width: 100%; }
/*.section-wrap:not(:last-of-type) { margin-bottom: 3vw; }*/
.section-wrap img { vertical-align: bottom; }
.section-wrap p:not(:last-of-type) { margin-bottom: 1em; }

/* コンテンツごとのwrap */
.content-wrap { margin-bottom: 60px; }

/* linkButtonBased */
.link-button a{text-decoration: none; box-sizing: border-box; display: block; border-radius: 50px; font-size: 26px; font-weight: bold; line-height: 1em; margin: 0 auto; padding: 1em 0 1.1em; position: relative; text-align: center; transition: .1s; width: 50%; }
.link-button a:hover { text-decoration: none; }
.link-button a:active { box-shadow: none;}
.spice-button a { background: #cc0000; box-shadow: 4px 4px 0 rgba(153,0,0,1); font-size: 26px; }
.spice-button a:hover { color: #cc0000; }

/* linkButtonColor */
.link-button a{ background: #f27900; color: #fff; }
.link-button a:hover { opacity: .7;}
.link-button a:active { }

.pc-only{ margin-bottom: 50px;}
.sp-only{display: none;}

.in-b{display: inline-block;}

.color-g{color:#F27900;}
.caution-box{background-color: #f0f0f0; padding: 25px 30px;margin-bottom: 30px;}
.caution-box.red-box{background-color: #ffefef;}
.caution-box p.caution-heading{font-weight: bold; font-size: 16px; line-height: 1em; margin-bottom: 10px;}

#detail h2,
#schedule h2,
#step h2,
#ticket h2,
#about h2 { font-size: 32px; font-weight: bold; line-height: 1em; margin-bottom: 80px; position: relative; }

#detail h2::before,
#schedule h2::before,
#step h2::before,
#ticket h2::before,
#about h2::before,
#detail h2::after,
#schedule h2::after,
#step h2::after,
#ticket h2::after,
#about h2::after { position: absolute; content: ""; bottom: -25px; }

#detail h2::before,
#schedule h2::before,
#step h2::before,
#about h2::before,
#ticket h2::before { border-bottom: 5px solid #f27900; width: 20%; left: 0; }

#detail h2::after,
#schedule h2::after,
#step h2::after,
#about h2::after,
#ticket h2::after { border-bottom: 5px solid #f0f0f0; width: 80%; right: 0; }

#first-text{ background: #ffefef; padding: 30px 60px; width: 100%; max-width: 1000px; }
#first-text p.first-ttl{color: #ff0000; text-align: center; font-weight: bold; margin-bottom: .6em; font-size: 16px; line-height: 1.6em; position: relative; padding-left: 1.1em; text-align: left;}
#first-text p.first-ttl::before{position: absolute; content: "■"; left: 0;}
#first-text p.comment{font-size: 16px; line-height: 1.6em;}
#first-text .text-wrap:not(:last-of-type){margin-bottom: 30px;}

#second-text { background: #fffbef; padding: 90px 0; width: 100%; }
#second-text .inner-wrap { margin: 0 auto; padding: 0 20px; width: 100%; max-width: 1000px; }
#second-text h2 { font-size: 22px; font-weight: bold; line-height: 1.4em; margin-bottom: 42px; text-align: center; color: #ee7600;}

#about .detail-wrap dl { border-bottom: 1px dotted #b5b5b5; display: table; margin-bottom: 1em; padding-bottom: 1em; width: 100%; }
#about .detail-wrap dl dt,
#about .detail-wrap dl dd { display: table-cell; font-size: 18px; line-height: 1.4em; vertical-align: top; }
#about .detail-wrap dl dt { font-weight: bold; width: 7%; }
#about .detail-wrap dl dd { padding-left: 1em; position: relative; width: 93%; }
#about .detail-wrap dl dd::before { content: "："; position: absolute; left: 0; top: 0; }
#about .detail-wrap ul li { border-bottom: 1px dotted #b5b5b5; font-size: 18px; line-height: 1.4em; padding-bottom: 1em; width: 100%; }
#about .detail-wrap ul li:not(:last-of-type) { margin-bottom: 1em; }

#detail .detail-wrap dl { border-bottom: 1px dotted #b5b5b5; display: table; margin-bottom: 1em; padding-bottom: 1em; width: 100%; }
#detail .detail-wrap dl dt,
#detail .detail-wrap dl dd { display: table-cell; font-size: 18px; line-height: 1.4em; vertical-align: top; }
#detail .detail-wrap dl dt { font-weight: bold; width: 7%; }
#detail .detail-wrap dl dd { padding-left: 1em; position: relative; width: 93%; }
#detail .detail-wrap dl dd::before { content: "："; position: absolute; left: 0; top: 0; }
#detail .detail-wrap ul li { border-bottom: 1px dotted #b5b5b5; font-size: 18px; line-height: 1.4em; padding-bottom: 1em; width: 100%; }
#detail .detail-wrap ul li:not(:last-of-type) { margin-bottom: 1em; }

#schedule table{ width: 100%; border-collapse: collapse;}
#schedule tr{}
#schedule th,
#schedule td{ border: 1px solid #d9d9d9;}
#schedule th.ippan{width: 12%;}
#schedule th.match-card{width: 11%;}
#schedule th{background-color: #f27900; color: #fff; text-align:center; font-weight: bold; padding: 10px 0; width: 21%;}
#schedule th:first-of-type { width: 16%; }
#schedule td{background-color: #fff; padding: 15px 15px 15px 15px;}
#schedule tr td.bg-gray{background-color: #f0f0f0; }
#schedule tr td.bg-white{background-color:#fff; }
#schedule tr td.bg-key-color{background-color:#fffcef; }
#schedule .caution-box{}

/* parts */
.text-key { color: #f27900; }
.flex-box { display: flex; flex-direction: row; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-start; width: 105%; margin-bottom: -5%; }
.flex-box .box02,
.flex-box .box03 { flex-grow: 1; flex-shrink: 0; margin: 0 5% 5% 0; }
.flex-box .box02 { flex-basis: 45%; max-width: 45%; }
.flex-box .box03 { flex-basis: 28.3%; max-width: 28.3%; }
#step .inner-heading{font-weight: bold; font-size: 16px; line-height: 1em; margin-bottom: 10px;}
#step .inner-heading-big{font-size: 24px; line-height: 1.4em; font-weight: bold; margin-bottom: 1em;}
#step .text-list{font-size: .9em; line-height: 1.4em;}
.big-text{font-size: 26px; line-height: 1.4em;}

/* タイトル下のテキスト */
#step .free-text{font-size: 14px; line-height: 1.6em; margin-bottom: 1em;}

/* ステップごとのタイトル部分 */
#step .step-box{position: relative; z-index: 0;}
#step .step-box:not(:last-of-type)::before {position: absolute; content: ""; border-left:3px solid #f27900; left: 46px; height: calc(100% + 60px); z-index: -1;}
#step .heading-box{display: table; border: 1px solid #F27900; margin-bottom: 40px; width: 100%;}
#step .heading-box .h-beforebox{display: table-cell; text-align: center; background-color: #f27900; color: #fff; width: 8%; vertical-align: middle; padding: 0px 0px 7px; min-width: 94px;}
#step .heading-box .h-beforebox span.moreless{ font-size: 0.6em; line-height: 1.4em; letter-spacing: 2px;}
#step .heading-box span.before-text{font-size: 32px; line-height: 1em; font-weight: bold; font-family: 'Oswald', sans-serif; display: inline-block;}
#step .heading-box .h-beforebox .heading-number-box{position: relative; display: inline-block; height: 35px; width: 100%;}
#step .heading-box .h-beforebox .heading-number-box::before{counter-increment: number 1; content: "" counter(number) ""; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,calc(-50% + 2px),0); z-index: 5;}
#step .heading-box h3{ font-weight: bold; display: table-cell; vertical-align: middle; font-size: 26px; line-height: 1.2em; padding: .8em;}

/* ステップの中を囲うwrap */
#step .inner-wrap{ width: 92%; margin-left: auto;}

/* dl dt dd を使った説明テキストと横並びにボタン設置 */
#step .list { margin-bottom: 22px; padding-left: 12px; }
#step .list dt { font-weight: bold; margin-bottom: .6em; position: relative; }
#step .list dt::before { content: "-"; position: absolute; left: -10px; top: 0; }
#step .period { font-weight: bold; color: #ff0000; font-size: 18px; line-height: 1.4em; }
#step .flex-box { margin-bottom: 0; }
#step .link-button a { font-size: 16px; line-height: 1em; padding: .8em 0 .7em; width: 64%; border-radius: 50px; }
#step .link-button a:not(:last-of-type) {margin-bottom: 1em; }

/* アイコンと横並びのテキスト */
#step .comment:not(:last-of-type) { margin-bottom: 2.5vw; }
#step .comment { position: relative; padding-left: 131px;}
#step .comment::before { content: ""; position: absolute; top: 50%; left: 0; transform: translate3d(0,-50%,0); }
#step .comment.icon-mail-send::before { background: url(../images/icon_mail_send.jpg) center no-repeat; background-size: contain; width: 116px; height: 67px; }
#step .comment.icon-check-mark::before { background: url(../images/icon_check_mark.jpg) center no-repeat; background-size: contain; width: 67px; height: 67px;left: 30px; }
#step .comment.icon-mail-post::before { background: url(../images/icon_mail_post.jpg) center no-repeat; background-size: contain; width: 67px; height: 70px; left: 30px;}
#step .comment.icon-exclamation::before { background: url(../images/icon_exclamation.png) center no-repeat; background-size: contain; width: 67px; height: 67px; left: 30px; }
#step .comment.icon-delivery::before { background: url(../images/icon_delivery.jpg) center no-repeat; background-size: contain; width: 101px; height: 65px;}
#step .comment.icon-exclamation p { font-size: 18px; font-weight: bold; line-height: 1.4em; color: #ff0000; }

/* 注意事項のbox */
#step .step-note-box{background-color: #f0f0f0; padding: 25px 30px;}
/*#step .step-note-box p.step-note-heading{font-weight: bold; font-size: 16px; line-height: 1em; margin-bottom: 10px;}*/

/* wrapの中身のbox */
#step .detail-box{border: 3px solid #ffe2c4; margin-bottom: 30px;}
#step .detail-box .detail-inner-wrap{padding: 35px 45px 35px 45px;}

/* wrapの中身のboxの見出し */
#step .detail-box h4{ font-size: 20px; background-color: #ffe2c4; line-height: 1em; font-weight: bold; padding: 20px 0 20px 35px;}

/* wrapの中身のboxのクレジットカードとテキスト */
#step .card-box{text-align: center;margin-bottom: 10px;}
#step .card-box img{width: 100%;}
#step .saison,
#step .visa,
#step .master,
#step .jcb,
#step .dinner,
#step .dc,
#step .uc{display: inline-block; vertical-align: middle;}
#step .saison{width: 131px;}
#step .visa{width: 85px;}
#step .master{width: 85px;}
#step .jcb{width: 79px;}
#step .dinner{width: 145px;}
#step .dc{width: 94px;}
#step .uc{width: 143px;}
#step .detail-inner-wrap p:not(:last-of-type){margin-bottom: .2em;}
#step .detail-inner-wrap p.text-list{margin-bottom: 1em;}
#step .detail-inner-wrap .step-note-box p.text-list{margin-bottom: 0;}

/*  wrapの中身のboxのコンビニ支払手順 */
#step .detail-box .process .box03{width: 29%; margin-right: 4.33%;position: relative;}
#step .detail-box .process p{padding: 0 20px 0 0;}
#step .detail-box .process .icon-choice,
#step .detail-box .process .icon-page,
#step .detail-box .process .icon-store{width: 100%; margin:0 auto 15px; }
#step .detail-box .process .icon-choice{ max-width:162px ;}
#step .detail-box .process .icon-page{ max-width: 91px;}
#step .detail-box .process .icon-store{ max-width: 101px;}
#step .detail-box .process .process-img img{width: 100%;}
#step .detail-box .process .box03:not(:last-of-type)::before,
#step .detail-box .process .box03:not(:last-of-type)::after{content: ""; position: absolute;}
#step .detail-box .process .box03:not(:last-of-type)::before{width: 30px; height: 30px; background-color: #f27900; right: -16px; border-radius: 20px; top: 50%; transform: translate3d(0,-50%,0);}
#step .detail-box .process .box03:not(:last-of-type)::after{right: -6px; width: 10px; height: 10px; border-top:4px solid #fff; border-right: 4px solid #fff; -webkit-transform: rotate(45deg); transform: translate3d(0,-50%,0) rotate(45deg); top: 50%;}
/*  コンビニ支払手順内-コンビニ別支払い詳細のbox */
#step .process-detail-box{background-color: #fff5eb; padding: 25px 30px;}
#step .process-detail-box:not(:last-of-type){  margin-bottom: 30px;}
#step .process-detail-box h5{font-size: 18px; line-height: 1em; font-weight: bold; margin-bottom: .8em; padding-left: 1.4em; position: relative;}
#step .process-detail-box h5::before{position: absolute; content: "●"; color: #f27900; font-size: 24px; left: 0;}
#step .process-detail-box .process-detail-list {counter-reset: number;}
#step .process-detail-box .process-detail-list .step-number{font-size: 16px; line-height: 1.4em; position: relative;}
#step .process-detail-box .process-detail-list .step-number:not(:last-of-type){margin-bottom: 30px;}
#step .process-detail-box .process-detail-list .step-number .number-box{display: inline-block; position: absolute; top: 0;content: ""; left: 0; background-color: #f27900; width: 30px; height: 30px; z-index: 1;}
#step .process-detail-box .process-detail-list .step-number .number-box::before{counter-increment: number 1; content: "" counter(number) ""; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);color: #fff; font-size: 18px; font-weight: bold; z-index: 5; }
#step .process-detail-box .process-detail-list .step-number dd{display: inline-block; position: relative;}
#step .process-detail-box .process-detail-list .step-number dd p{ padding-left: 3em;}

#step h4{ font-size: 20px; background-color: #ffe2c4; line-height: 1em; font-weight: bold; padding: 20px 0 20px 35px;}
#step .pay-inner-wrap{padding: 35px 45px 35px 45px;}
#step .pay-inner-wrap p.uketori-houhou{font-size: 18px; line-height: 1em; margin-bottom: 40px;}
#step .pay-inner-wrap p.setsumei{font-size: 16px; line-height: 1em; margin-bottom: 1em;}
#step .card-box{text-align: center;margin-bottom: 10px;}
#step .saison,
#step .visa,
#step .master,
#step .jcb,
#step .dinner,
#step .dc,
#step .uc{display: inline-block; vertical-align: middle;}
#step .saison{width: 131px;}
#step .visa{width: 85px;}
#step .master{width: 85px;}
#step .jcb{width: 79px;}
#step .dinner{width: 145px;}
#step .dc{width: 94px;}
#step .uc{width: 143px;}
#step .saison img,
#step .visa img,
#step .master img,
#step .jcb img,
#step .dinner img,
#step .dc img,
#step .uc img{width: 100%;}
#step p.card-comment{ margin-bottom: .2em;}
#step .pay-box{border: 3px solid #ffe2c4; margin-bottom: 30px;}
#step .pay-box .box03{width: 29%; margin-right: 4.33%;position: relative;}
#step .pay-box .box03 .icon-img-01,
#step .pay-box .box03 .icon-img-02,
#step .pay-box .box03 .icon-img-03{width: 100%; margin:0 auto 15px; }
#step .pay-box .box03 .icon-img-01{ max-width:162px ;}
#step .pay-box .box03 .icon-img-02{ max-width: 91px;}
#step .pay-box .box03 .icon-img-03{ max-width: 101px;}
#step .pay-box .box03 .icon-img-01 img,
#step .pay-box .box03 .icon-img-02 img,
#step .pay-box .box03 .icon-img-03 img{width: 100%;}
#step .pay-box .box03:not(:last-of-type){}
#step .pay-box .box03:not(:last-of-type)::before,
#step .pay-box .box03:not(:last-of-type)::after{content: ""; position: absolute;}
#step .pay-box .box03:not(:last-of-type)::before{width: 30px; height: 30px; background-color: #f27900; right: -4px; border-radius: 20px; top: 50%; transform: translate3d(0,-50%,0);}
#step .pay-box .box03:not(:last-of-type)::after{right: 6px; width: 10px; height: 10px; border-top:4px solid #fff; border-right: 4px solid #fff; -webkit-transform: rotate(45deg); transform: translate3d(0,-50%,0) rotate(45deg); top: 50%;}
#step .pay-box .box03 p{font-size: 12px; line-height: 1.6em;}
#step .store-pay{background-color: #fff5eb; padding: 25px 30px;  margin-bottom: 30px;}
#step .store-pay h5{font-size: 18px; line-height: 1em; font-weight: bold; margin-bottom: .8em; padding-left: 1.4em; position: relative;}
#step p.catch-heading{text-align: center; font-size: 22px; line-height: 1em; line-height: 1em; font-weight: bold; margin-bottom: 1em;}
#step .store-pay h5::before{position: absolute; content: "●"; color: #f27900; font-size: 24px; left: 0;}
#step .step-store{}
#step .step-store p.step-number01,
#step .step-store p.step-number02,
#step .step-store p.step-number03{position: relative; padding-left: 3em; font-size: 16px; line-height: 1.4em; margin-bottom: 30px;}
#step .step-store p.step-number01::before,
#step .step-store p.step-number02::before,
#step .step-store p.step-number03::before{content: ""; position: absolute; left: 0; display: inline-block; background-color: #f27900; width: 34px; height: 34px;  transform: translate3d(0,-50%,0); top: 50%;}
#step .step-store p.step-number01::after,
#step .step-store p.step-number02::after,
#step .step-store p.step-number03::after{ color: #fff; position: absolute; left: 0;transform: translate3d(0,-50%,0); top: 50%; left: 1.5%; font-size: 18px; font-weight: bold;}
#step .step-store p.step-number01::after{ content: "1";}
#step .step-store p.step-number02::after{ content: "2";}
#step .step-store p.step-number03::after{ content: "3";}
#step-03 .store-pay{padding-bottom: 0;}
#step-03 .store-pay.family-mart{padding-bottom: 30px;}
#step-03 .store-pay.family-mart p.step-number03{padding-bottom: 0px; margin-bottom: 0;}
#step-03 .store-pay.seven-eleven{padding-bottom: 30px;}
#step-03 .store-pay.seven-eleven .guide{margin-bottom: 0px;}

/*  コンビニ別詳細のbox内-Famiポート操作方法とセブン支払方法 */
#step .guide{background-color: #fff; padding: 15px 0px 15px 10px;margin-bottom:30px;}
#step .guide li{ display: inline-block; vertical-align: middle; position: relative; font-size: 12px; line-height: 1.4em; z-index: 99;}
#step .guide li.step-01{width: 22%;}
#step .guide li.step-02{width: 19%;}
#step .guide li.step-03{width: 16%;}
#step .guide li.step-04{width: 26%;}
#step .guide li.step-05{width: 14%;}
#step .guide li:not(:last-of-type){}
#step .guide li:not(:last-of-type)::after,
#step .guide li:not(:last-of-type)::before{content: ""; width: 0; height: 0; position: absolute; border-style: solid; border-width: 43px 0px 43px 25px; top: 50%; transform:translate3d(0,-50%,0); z-index: -1;}
#step .guide li:not(:last-of-type)::before{right: 5px; border-color: transparent transparent transparent #fff5eb;}
#step .guide li:not(:last-of-type)::after{ right: 10px; border-color: transparent transparent transparent #fff;border-width: 40px 0px 40px 25px; }
#step .guide.guide02 li{width: 49%;}
#step .guide.guide02 li:not(:last-of-type)::after,
#step .guide.guide02 li:not(:last-of-type)::before{border-width: 32px 0px 32px 25px;}
/* QRチケット利用方法のモーダル */
.modal-wrap { display: none; }
#howto p { padding: 0 1em 1em; }

/* 下部注意書き */
#notes { background: #f0f0f0; padding: 30px; text-align: center; }
#notes h2 { font-size: 18px; font-weight: bold; line-height: 1em; margin-bottom: .5em; }

#botom-caution .caution-box .text-list{margin-bottom: 1em;}
#botom-caution p.indent-text{padding-left: 1.1em;}


@media screen and (max-width: 768px){
.main-wrap { margin-bottom: 4vw; width: 92%; }
.section-wrap { margin-bottom: 9vw; }

.pc-only{display: none;}
.sp-only{display: block; margin-bottom: 7vw;}
.container{max-width: 1280px; width: 100%; margin:0 auto; background-color: #fff; }

.color-g{color:#F27900;}
.caution-box{ padding: 20px 15px;}
.caution-box.red-box{}
.caution-box p.caution-heading{line-height: 1.4em;}

#detail h2,
#schedule h2,
#step h2,
#about h2,
#ticket h2{font-size: 20px; line-height: 1.4em; margin-bottom: 30px;}

#detail h2::before,
#schedule h2::before,
#step h2::before,
#about h2::before,
#ticket h2::before,
#detail h2::after,
#schedule h2::after,
#step h2::after,
#about h2::after,
#ticket h2::after{bottom: -15px;}

#detail h2::before,
#schedule h2::before,
#step h2::before,
#about h2::before,
#ticket h2::before{width: 30%;}

#detail h2::after,
#schedule h2::after,
#step h2::after,
#about h2::after,
#ticket h2::after{width: 70%;}

#first-text{ padding: 20px 15px; margin-bottom: 7vw;}
#first-text p.first-ttl{text-align:left; margin-bottom: 3vw;}
#first-text p.comment{font-size: 14px;}

#second-text { margin-bottom: 7vw; padding: 20px 15px; }
#second-text .inner-wrap { padding: 0; }
#second-text h2 { margin-bottom: 7vw; font-size: 16px; }

#schedule table.sp-table{ }
#schedule table.sp-table:not(:last-of-type){margin-bottom: 7vw; }
#schedule table.sp-table tr{}
#schedule table.sp-table th,
#schedule table.sp-table td{ display: block;}
#schedule table.sp-table th.sp-date{width: 50%;}
#schedule table.sp-table th.sp-match-card{width: 50%;}
#schedule table.sp-table th{width: 100%;}
#schedule table.sp-table td{width: 100%;}
#schedule table.sp-table td dl{display: table; width: 100%;}
#schedule table.sp-table td dt,
#schedule table.sp-table td dd{display: table-cell;vertical-align: middle;}
#schedule table.sp-table td dt{width: 25%; border-right: 1px dotted #d6d4d4; }
#schedule table.sp-table td dd{padding-left: 5%;}

#about .detail-wrap ul li { font-size: 16px; }
#detail .detail-wrap ul li { font-size: 16px; }

/* parts */
.biggest { font-size: 1.3em; line-height: 1.2em; }
.flex-box { width: 100%; margin-bottom: -5%; }
.flex-box .box02 { flex-basis: 100%; max-width: 100%; margin: 0 0 8% 0; }
.flex-box .box03 { flex-basis: 47.5%; max-width: 47.5%; margin: 0 0 8% 0; }
.flex-box .box03:nth-child(odd) { margin-right: 5%; }
#step .inner-heading{}
#step .inner-heading-big{font-size: 18px; }
.big-text{font-size: 20px;}

/* タイトル下のテキスト */
#step .free-text{}

/* ステップごとのタイトル部分 */
#step .step-box:not(:last-of-type)::before{display: none;}
#step .heading-box span.before-text{font-size: 26px;}
#step .heading-box{margin-bottom: 7vw;}
#step .heading-box h3{font-size: 20px; }
#step .heading-box .h-beforebox{width: 20%;min-width: auto;}

/* ステップの中を囲うwrap */
#step .inner-wrap{width: 100%;}

/* dl dt dd を使った説明テキストと横並びにボタン設置 */
#step .link-button a{width: 74%;}

/* アイコンと横並びのテキスト */
#step .comment{padding-left: 100px;}
#step .comment.icon-mail-send::before { width: 80px; height: 46px; }
#step .comment.icon-check-mark::before,
#step .comment.icon-exclamation::before { width: 46px; height: 46px; left: 20px; }
#step .comment.icon-mail-post::before{width: 56px; height: 59px;left:20px;}
#step .comment.icon-delivery::before{width: 80px; height: 52px;}
#step .comment.icon-exclamation p { font-size: 16px; }

/* 注意事項のbox */
#step .step-note-box{padding: 20px 20px 15px;}

/* wrapの中身のbox */
#step .detail-box:not(:last-of-type){margin-bottom: 5vw;}
#step .detail-box .detail-inner-wrap{padding: 20px 15px 15px;}

/* wrapの中身のboxの見出し */
#step .detail-box h4{ font-size: 18px; padding: 10px 5px 10px 15px; line-height: 1.4em;}

/* wrapの中身のboxのクレジットカードとテキスト */
#step .card-box{margin-bottom: 5vw;}

/*  wrapの中身のboxのコンビニ支払手順 */
#step .detail-box .process .box03{width: 100%; margin:0 0 5vw 0;}
#step .detail-box .process .box03:not(:last-of-type){margin-bottom: 60px;}
#step .detail-box .process p{padding: 0 0 0 0;}
#step .detail-box .process .icon-choice,
#step .detail-box .process .icon-page,
#step .detail-box .process .icon-store{ margin-bottom: 3vw;}
#step .detail-box .process .box03:not(:last-of-type)::before{transform: translate3d(0,0,0); top: unset; bottom: -45px; left: 0; right: 0; margin: auto;}
#step .detail-box .process .box03:not(:last-of-type)::after{top: unset; transform: translate3d(0,0,0) rotate(135deg); bottom: -35px; right: 0; left: 0; margin: auto;}
/*  コンビニ支払手順内-コンビニ別支払い詳細のbox */
#step .process-detail-box{padding: 20px 20px 15px; }
#step .process-detail-box:not(:last-of-type){margin-bottom: 5vw;}
#step .process-detail-box h5{font-size: 16px; line-height: 1.4em; }
#step .process-detail-box h5::before{ font-size: 20px;}
#step .process-detail-box .process-detail-list .step-number:not(:last-of-type){margin-bottom: 7vw;}
#step .process-detail-box .process-detail-list .step-number dd p{ }
/*  コンビニ別詳細のbox内-Famiポート操作方法とセブン支払方法 */
.link-button a{ width: 92%; }
}

/*add*/
#ticket .flex-box { width: 102%; }
#ticket .flex-box .box03 { flex-basis: 31.3%; max-width: 31.3%; margin: 0 2% 5% 0; padding-bottom: 67px; position:relative; }
#ticket .flex-box a { text-decoration: none; color: #000; }
#ticket .flex-box img { width: 100%; }
#ticket .order-box { border: 3px solid; text-align: center; transition: .15s; }
#ticket .order-box .inner-wrap { padding: 35px 35px 20px; }
#ticket .order-box .inner-wrap .mark { padding-bottom: 20px; }
#ticket .order-box .inner-wrap .period-wrap .inner-heading { margin-bottom: .8em; }
#ticket .order-box .link { color: #fff; font-size: 20px; font-weight: bold; padding: 1.2em 1em .9em; position: absolute; bottom: 0; left: 0; transition: .15s; width:100%; }
#ticket .order-box .link::before { border: 10px solid; border-color: transparent transparent transparent #fff; content: ""; position: absolute; top: 50%; left: 34%; transform: translate3d(-50%,-50%,0); }
#ticket .order-box#grand-slam { border-color: #000; }
#ticket .order-box#grand-slam:hover { border-color: #696969; }
#ticket .order-box#grand-slam .link { background: #000; }
#ticket .order-box#grand-slam:hover .link { background: #696969; }
#ticket .order-box#gold { border-color: #9d8c02; }
#ticket .order-box#gold:hover { border-color: #c7b625; }
#ticket .order-box#gold .link { background: #9d8c02; }
#ticket .order-box#gold:hover .link { background: #c7b625; }
#ticket .order-box#silver { border-color: #476f79; }
#ticket .order-box#silver:hover { border-color: #64939e; }
#ticket .order-box#silver .link { background: #476f79; }
#ticket .order-box#silver:hover .link { background: #64939e; }
#ticket .order-box#kids { border-color: #7ab625; }
#ticket .order-box#kids:hover { border-color: #a2d45c; }
#ticket .order-box#kids .link { background: #7ab625; }
#ticket .order-box#kids:hover .link { background: #a2d45c; }
#ticket .order-box#bronze { border-color: #b84420; }
#ticket .order-box#bronze:hover { border-color: #ea663d; }
#ticket .order-box#bronze .link { background: #b84420; }
#ticket .order-box#bronze:hover .link { background: #ea663d; }
#ticket .order-box#gid { border-color: #ff4901; }
#ticket .order-box#gid:hover { border-color: #ff804e; }
#ticket .order-box#gid .link { background: #ff4901; }
#ticket .order-box#gid:hover .link { background: #ff804e; }

@media screen and (max-width: 768px){
#ticket .flex-box { width: 104%; }
#ticket .flex-box .box03 { flex-basis: 46%; max-width: 46%; margin: 0 4% 4% 0; }
#ticket .order-box .inner-wrap { padding: 5vw 4vw; }
#ticket .order-box .inner-wrap .mark { padding-bottom: 4vw; }
#ticket .order-box .link { font-size: 18px; }
#ticket .order-box .link::before { border: 8px solid; border-color: transparent transparent transparent #fff; top: 50%; left: 15px; }

#step h4{font-size: 16px; line-height: 1.4em; padding: 10px 0px 10px 10px; }
#step .pay-box{margin-bottom: 7vw;}
#step .pay-inner-wrap{ padding: 15px 15px 20px 15px;}
#step .card-box{margin-bottom: 5vw;}
#step .saison{}
#step .visa{}
#step .master{}
#step .jcb{}
#step .dinner{}
#step .dc{}
#step .uc{}
#step .saison img,
#step .visa img,
#step .master img,
#step .jcb img,
#step .dinner img,
#step .dc img,
#step .uc img{}
#step p.card-comment{}
#step .pay-box .box03{ width: 100%; margin-right: 0; margin-bottom: 7%; }
#step .pay-box .box03:not(:last-of-type){margin-bottom: 60px;}
#step .pay-box .box03:not(:last-of-type)::after,
#step .pay-box .box03:not(:last-of-type)::before{ right: 0; left: 0; margin: auto; transform: translate3d(0,0,0); top: unset; bottom: -40px;}
#step .pay-box .box03:not(:last-of-type)::before{}
#step .pay-box .box03:not(:last-of-type)::after{transform: rotate(135deg); bottom: -30px;}
#step .pay-box .box03 p{}
#step .store-pay{padding: 20px 10px 20px;}
#step .store-pay h5{font-size: 16px; line-height: 1.4em;}
#step .store-pay h5::before{font-size: 20px;}
#step .step-store{}
#step .step-store p.step-number01,
#step .step-store p.step-number02,
#step .step-store p.step-number03{font-size: 14px; margin-bottom: 5vw;}
#step .step-store p.step-number01::before,
#step .step-store p.step-number02::before,
#step .step-store p.step-number03::before{top: 0; left: 0; transform: none; width: 30px; height: 30px;}
#step .step-store p.step-number01::after,
#step .step-store p.step-number02::after,
#step .step-store p.step-number03::after{top: 6px; transform: none; left: 9px;}
#step-03 .store-pay.family-mart{padding-bottom: 20px;}
#step-03 .store-pay.family-mart p.step-number03{margin-bottom: 0; padding-bottom: 0;}
#step-03 .store-pay.seven-eleven{padding-bottom: 20px;}
#step .guide{padding: 20px 10px 30px 10px;}
#step .guide li{display: block;}
#step .guide li.step-01,
#step .guide li.step-02,
#step .guide li.step-03,
#step .guide li.step-04,
#step .guide li.step-05{width: 100%;}
#step .guide.guide02 li{display: block; width: 100%;}
#step .guide li:not(:last-of-type){margin-bottom: 14vw; padding-bottom: 2vw;}
#step .guide li:not(:last-of-type)::before{bottom: -46vw;}
#step .guide li:not(:last-of-type)::after,
#step .guide li:not(:last-of-type)::before{transform: translate3d(0,0,0) rotate(90deg); top: unset; right: 0; left: 0; margin: auto; border-width: 40vw 0px 40vw 30px;}
#step .guide li:not(:last-of-type)::after{bottom: -45vw;}
#step #step-04 .box01{ padding: 80px 0 0 0; margin-bottom: 20px}
#step p.catch-heading{font-size: 18px;}
#step .pay-inner-wrap p.uketori-houhou{font-size: 16px; line-height: 1.4em; margin-bottom: 20px;}
#step .pay-inner-wrap p.setsumei{font-size: 14px; line-height: 1.6em;}
#step .guide.guide02 li:not(:last-of-type)::after,
#step .guide.guide02 li:not(:last-of-type)::before{ border-width: 40vw 0px 40vw 30px;}

}
.text-morered{color: #ff1717;}
#step .text-list.big.text-morered{ font-size: 1.2em;color: #ff1717;}
.flex-box-center { align-items: center; }