@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : ticket.css
Description : チケット
===================================================================== */
/* =====================================================================
    ticket
======================================================================*/
.ticket {
  padding-bottom: 11rem;
}

.bnr_ticket_reserve {
  position: relative;
  width: 100%;
  height: 20rem;
}
.bnr_ticket_reserve a {
  position: relative;
  height: 100%;
  background: url(../images/banner/bg_bnr_reserve-sp.png) no-repeat center/contain;
}
.bnr_ticket_reserve a::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  margin: -10.9230769231% auto 0;
  width: 28%;
  padding-top: 35.2307692308%;
  background: url(../images/common/img_nekobus2.png) no-repeat center/contain;
}
.bnr_ticket_reserve a img {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: 0 4% 0 0;
  width: 17.2307692308%;
}

@media screen and (min-width: 768px) {
  .ticket {
    padding-bottom: 6.6rem;
  }
  .bnr_ticket_reserve {
    margin: 0 auto;
    width: 84rem;
    height: 14rem;
  }
  .bnr_ticket_reserve a {
    background-image: url(../images/banner/bg_bnr_reserve-pc.png);
  }
  .bnr_ticket_reserve a::after {
    margin: -5% auto 0;
    width: 24.1666666667%;
    padding-top: 19.4047619048%;
    background-image: url(../images/common/img_nekobus3.png);
  }
  .bnr_ticket_reserve a img {
    margin: 0 1.9047619048% 0 0;
    width: 13.3333333333%;
  }
  .bnr_ticket_reserve a::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin: 0 1.9047619048% 0 0;
    width: 13.3333333333%;
    padding-top: 13.3333333333%;
    background: url(../images/banner/bnr_reserve_h.png) no-repeat center/contain;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
    z-index: 1;
    opacity: 0;
  }
  .bnr_ticket_reserve a:hover::before {
    opacity: 1;
  }
}
/* =====================================================================
    head
======================================================================*/
.head {
  padding-bottom: 11rem;
  border-bottom: 1px solid #dae4ed;
}

.ticket_box {
  position: relative;
  margin-bottom: 10rem;
}
.ticket_box:last-child {
  margin-bottom: 0;
}
.ticket_box h3 {
  text-align: center;
  padding: 3rem calc(50 / 650 * 100%);
  font-size: 3rem;
  line-height: 1.357;
  background: #ffb400;
  border-radius: 5rem 5rem 0 0;
}
.ticket_box_inner {
  padding: calc(80 / 650 * 100%) calc(50 / 650 * 100%);
  background-color: #f2f1e9;
}
.ticket_box figure {
  margin: 0 auto 8.6rem;
  width: 40rem;
}
.ticket_box ul li:not(:last-child) {
  margin-bottom: 7rem;
}
.ticket_box ul li.ticket_box_price dl {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  line-height: 1.2;
}
.ticket_box ul li.ticket_box_price dl::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 2px dotted #dae4ed;
}
.ticket_box ul li.ticket_box_price dl:not(:last-child) {
  margin-bottom: 4rem;
}
.ticket_box ul li.ticket_box_price dl > * {
  background-color: #f2f1e9;
}
.ticket_box ul li.ticket_box_price dl dt {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 1em;
}
.ticket_box ul li.ticket_box_price dl dd {
  position: relative;
  padding-left: 1em;
  letter-spacing: 0.18em;
}
.ticket_box ul li p {
  line-height: 1.9;
  color: #0d5aa7;
}

.btn_ticket a {
  margin-top: 1.2rem;
}

@media screen and (min-width: 768px) {
  .head {
    padding-bottom: 9rem;
  }
  .ticket_box h3 {
    padding: 2rem calc(30 / 1080 * 100%);
    font-size: max(2.2rem, 18px);
  }
  .ticket_box_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 5rem 0;
  }
  .ticket_box_inner figure {
    margin: 0 calc(60 / 1080 * 100%) 0 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: calc(260 / 1080 * 100%);
  }
  .ticket_box_inner ul {
    width: calc(650 / 1080 * 100%);
  }
  .ticket_box_inner ul li:not(:last-child) {
    margin-bottom: 5rem;
  }
  .ticket_box_inner ul li.ticket_box_price dl {
    font-size: max(1.8rem, 16px);
  }
  .ticket_box_inner ul li.ticket_box_price dl:not(:last-child) {
    margin-bottom: 2rem;
  }
  .ticket_box_inner.flex ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
  .ticket_box_inner.flex ul li {
    width: calc(450 / 1080 * 100%);
  }
  .ticket_box_inner.flex ul li.ticket_box_price {
    margin: 0 calc(40 / 1080 * 100%) 0 0;
    width: calc(470 / 1080 * 100%);
  }
  .btn_ticket {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .btn_ticket a {
    width: calc(534 / 1080 * 100%);
  }
}
/* =====================================================================
    guide
======================================================================*/
.guide {
  padding: 10rem 0 40vw;
  background-color: #fff;
}

.fee_table {
  margin-bottom: 8rem;
}
.fee_table dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #dae4ed;
}
.fee_table dl > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0.1rem;
  padding: 2rem 0;
  width: 33.3333333333%;
  line-height: 1.25;
  letter-spacing: 0.2em;
}
.fee_table dl > * small {
  font-size: 75%;
}
.fee_table dl dt {
  text-align: center;
  width: calc(190 / 650 * 100%);
  color: #0d5aa7;
  background: #faf9f4;
}
.fee_table dl dd {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: right;
  width: calc(230 / 650 * 100%);
  padding-right: 2%;
  font-size: 110%;
  letter-spacing: 0.1em;
}
.fee_table_head > * {
  background: transparent !important;
}

.guide_list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #dae4ed;
}
.guide_list > li h3 {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2.8rem 0;
  width: calc(190 / 650 * 100%);
  background: #faf9f4;
}
.guide_list > li h3 img {
  margin: auto;
  width: auto;
  height: 2.9rem;
}
.guide_list_inner {
  padding: 2.8rem calc(50 / 650 * 100%);
  width: calc(460 / 650 * 100%);
  line-height: 1.357;
}
.guide_list_inner dl {
  margin-bottom: 0.8em;
}
.guide_list_inner dl:last-child,
.guide_list_inner dl > *:last-child {
  margin-bottom: 0;
}
.guide_list_inner dl dt {
  color: #0d5aa7;
}
.guide_list_inner dl dd {
  margin-bottom: 0.5em;
}
.guide_list_inner dl a {
  display: inline;
  word-wrap: break-word;
}

@media screen and (min-width: 768px) {
  .guide {
    padding: 9rem 0 18vw;
  }
  .guide_group {
    margin: 0 auto;
    max-width: 840px;
  }
  .fee_table {
    margin-bottom: 4rem;
    max-width: 840px;
    font-size: max(1.8rem, 16px);
  }
  .fee_table dl dd {
    padding-right: 9%;
  }
  .guide_list > li h3 {
    width: 38.0952380952%;
  }
  .guide_list > li h3 img {
    height: 5rem;
  }
  .guide_list_inner {
    padding: 2.8rem 4.7619047619%;
    width: 61.9047619048%;
  }
  .guide_list_inner dl a:hover {
    color: #ffb400;
  }
}/*# sourceMappingURL=ticket.css.map */