.cmn--a {
  color: #000d99;
  transition: .3s
}

.cmn--a:hover {
  color: #ff7f00;
  text-decoration: underline
}

.cmn--h2 {
  position: relative;
  top: 0;
  left: 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 140%;
  margin: 1.3rem 0 .8rem;
  padding-bottom: .7rem
}

.cmn--h2::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #E2E3E4;
  height: 2px;
  width: 100%
}

.cmn--h2::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #6638B6;
  height: 2px;
  width: 5rem
}

.cmn--h3 {
  font-size: 15px;
  font-weight: bold;
  line-height: 140%;
  margin: 1.3rem 0 1.3rem;
  background: #F8F8F8;
  padding: .7rem 1rem
}

.cmn--h4 {
  font-size: 14px;
  font-weight: bold;
  line-height: 140%
}

.cmn--p {
  font-size: 15px;
  line-height: 140%;
  word-break: break-all;
  margin: 0 0 2rem
}

.cmn--p-sm {
  font-size: 12px
}

.cmn--p-txticon {
  padding-left: 2em;
  text-indent: -2em
}

.cmn--p-ind {
  padding-left: 1em;
  text-indent: -1em
}

.cmn--small {
  font-size: 90%
}

.cmn--img {
  max-width: 100%;
  height: auto
}

.cmn--img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center
}

.cmn--img-fill {
  width: 100%
}

.cmn--icon {
  max-height: 1.5em;
  width: auto
}

.cmn--icon-sm {
  max-height: 1.2em
}

.cmn--a-left-arrow {
  position: relative;
  padding-left: 1.3em
}

.cmn--a-left-arrow::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 1px #51318f;
  border-right: solid 1px #51318f;
  transform: rotate(45deg) translateX(-30%) translateY(-30%);
  position: absolute;
  top: 50%;
  left: 0
}

.cmn--iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.cmn--iframe--container {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 56.25%
}

.cmn--txticon {
  height: auto;
  max-width: 1.5em;
  margin-right: .5rem
}

.cmn--figure {
  position: relative
}

.cmn--figure-cover .cmn--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center
}

.cmn--fcaption-overlay {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 14px;
  line-height: 140%;
  text-align: center;
  font-weight: bold
}

.cmn--ol {
  padding: 0;
  margin-bottom: 2rem
}

.cmn--ul {
  margin-bottom: 2rem
}

.cmn--ul-count {
  counter-reset: count 0
}

.cmn--ul-count .cmn--li {
  list-style: none;
  text-indent: -2.3em
}

.cmn--ul-count .cmn--li::before {
  display: inline;
  content: counter(count);
  counter-increment: count 1;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  background: #6638B6;
  border-radius: 100%;
  padding: .3em .8em .3em;
  margin-right: .5rem
}

.cmn--li {
  list-style: outside disc;
  font-size: 15px;
  line-height: 140%;
  padding-left: 0em;
  margin-bottom: 1rem;
  text-indent: 0em;
  margin-left: 2em
}

.cmn--li-list-decimal {
  list-style-type: decimal
}

.cmn--li-list-kakko-decimal {
  list-style: none;
  margin-left: 0;
  text-indent: -2.5em;
  padding-left: 2.5em
}

.cmn--li-list-kakko {
  list-style: none;
  margin-left: 0;
  text-indent: -2.5em;
  padding-left: 2.5em
}

.cmn--li-list-none {
  list-style: none;
  padding-left: 1em;
  text-indent: -1em;
  margin-left: 0
}

.cmn--li-purple-disc {
  list-style: none;
  padding-left: 1em;
  text-indent: -1em;
  margin-left: 0
}

.cmn--li-purple-disc::before {
  content: "●";
  display: inline;
  font-size: 10px;
  color: #6638b6;
  margin-right: .5rem
}

.cmn--li-purple-disc-kakko {
  text-indent: -2.5em;
  padding-left: 2.5em
}

.cmn--btn {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  color: #fff;
  text-align: center;
  background: #6638b6;
  font-size: 14px;
  padding: .7rem 3rem .7rem 2rem;
  border: none
}

.cmn--btn--gray {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  color: #fff;
  text-align: center;
  background: #636466;
  font-size: 14px;
  padding: .7rem 3rem .7rem 2rem;
  border: none
}

.cmn--btn::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: rotate(45deg) translateX(-30%) translateY(-30%);
  position: absolute;
  top: 50%;
  right: 1rem
}

.cmn--btn-ticket {
  background-color: #8c714c
}

.cmn--btn-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}

.cmn--btn-under-arrow {
  padding: 1rem .5rem 1.5rem .5rem
}

.cmn--btn-under-arrow::after {
  top: auto;
  bottom: .5rem;
  right: auto;
  left: auto;
  transform: rotate(135deg) translateX(0%) translateY(0%)
}

.cmn--btn:hover {
  color: #fff;
  background-color: #262626;
}

.cmn--btn-howto {
  padding: .7rem 1rem .7rem .5rem;
  color: #000;
  background-color: #e7e0f5;
}
.cmn--btn-howto::after {
  border-color: #000;
}
.cmn--btn-howto:hover {
  color: #fff;
  background-color: #6638b6;
}
.cmn--btn-howto:hover::after {
  border-color: #fff;
}

.cmn--tab {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  line-height: 140%;
  padding: .7rem .5rem .7rem .5rem;
  height: 100%;
  background: #f8f8f8
}

.cmn--tab.active, .cmn--tab-active {
  background-color: #6638b6;
  color: #fff
}

.cmn--tab.active:hover, .cmn--tab-active:hover {
  color: #fff
}

.cmn--tab.active::after, .cmn--tab-active::after {
  content: "▼";
  display: inline;
  position: absolute;
  color: #6638b6;
  bottom: -0.9em;
  left: 50%;
  transform: translateX(-50%)
}

.cmn--card {
  border: 1px solid #e2e3e4;
  padding: 1rem
}

.cmn--available {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  border-top: 1px solid #E2E3E4;
  border-bottom: 1px solid #E2E3E4;
  padding: .7rem 0;
  margin-bottom: 2rem
}

.cmn--available--item {
  flex: 1 0 auto;
  padding-right: .2rem
}

.cmn--available--item--txt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: #999;
  color: #ccc;
  height: 100%;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  line-height: 140%;
  text-align: center;
  padding: .7rem 0
}

.cmn--available--item--txt-available {
  color: #fff;
  background-color: #F7A30A
}

.cmn--available--item--txt-ttl {
  color: #fff;
  background-color: #6638b6
}

.cmn--table {
  width: 100%;
  margin: 0 0 2rem;
  border-left: 1px solid #E2E3E4;
  border-top: 1px solid #E2E3E4
}

.cmn--table-bordered {
  border-top: 3px solid #6638b6;
  border-bottom: 3px solid #6638b6
}

.cmn--table-fixed {
  table-layout: fixed
}

.cmn--table-menu {
  table-layout: auto;
  border-left: 0;
  border-top: 0
}

.cmn--table-menu .cmn--hth {
  background: none;
  border: 0;
  border-bottom: 1px solid #E2E3E4
}

.cmn--table-menu .cmn--btr {
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.cmn--table-menu .cmn--btr:first-child {
  border-top: .5rem solid #fff
}

.cmn--table-menu .cmn--bth {
  border-right: 0;
  border-bottom: 0;
  padding: .7rem .5rem .7rem 0
}

.cmn--table-menu .cmn--btd {
  border-right: 0;
  border-bottom: 0;
  padding: .7rem 0rem .7rem .5rem
}

.cmn--table-menu .cmn--btd-primary {
  width: 100%
}

.cmn--table-history {
  border-left: 0
}

.cmn--table-history .cmn--bth {
  background-color: #fff;
  font-weight: bold;
  padding-left: 0
}

.cmn--table-history .cmn--btd {
  border-right: 0
}

.cmn--table-access {
  width: 100%;
  margin: 0 0 2rem;
  background-color: #fff;
  border-left: 1px solid #E2E3E4;
  border-top: 1px solid #E2E3E4
}

.cmn--bth {
  font-size: 14px;
  font-weight: normal;
  line-height: 140%;
  background: #F8F8F8;
  border-right: 1px solid #E2E3E4;
  border-bottom: 1px solid #E2E3E4;
  padding: .7rem 1rem
}

.cmn--btd {
  font-size: 14px;
  line-height: 140%;
  border-right: 1px solid #E2E3E4;
  border-bottom: 1px solid #E2E3E4;
  padding: .7rem 1rem
}

.cmn--btd-primary {
  background-color: #6638b6;
  color: #fff
}

.cmn--btd-dummy {
  background-color: #f5f5f5;
  color: #f5f5f5
}

.cmn--label {
  display: inline-block;
  background: #6638b6;
  padding: .1rem .4rem;
  color: #fff;
  font-size: 14px
}

.cmn--label-md {
  font-size: 15px;
  padding: .2rem .6rem
}

.cmn--label-lg {
  font-size: 18px;
  padding: .2rem .6rem .3rem
}

.cmn--hth {
  font-size: 14px;
  font-weight: bold;
  line-height: 140%;
  text-align: center;
  background: #F8F8F8;
  border-right: 1px solid #E2E3E4;
  border-bottom: 1px solid #E2E3E4;
  padding: .7rem 1rem
}

.cmn--hth-access {
  font-size: 14px;
  font-weight: bold;
  line-height: 140%;
  text-align: center;
  background: #fff;
  border-right: 1px solid #E2E3E4;
  border-bottom: 1px solid #E2E3E4;
  padding: .7rem 1rem
}

.cmn--well {
  background: #f8f8f8;
  padding: 1rem
}

.cmn--well--access {
  background: #f8f8f8;
  padding-left: 1rem;
  padding-bottom: 0.1rem;
  padding-top: 0.5rem
}

.cmn--well-purple {
  background-color: #f2ebff
}

.cmn--box {
  border: 2px solid #E2E3E4;
  padding: 2rem
}

.cmn--color--aqua {
  color: #38ace1
}

.cmn--color--orange {
  color: #ed6f39
}

.cmn--color--danger {
  color: #b00048
}

.cmn--color--primary {
  color: #6638b6
}

.cmn--color--light-blue {
  color: #6395ff
}

.cmn--color--pink {
  color: #ff4491
}

.cmn--color--white {
  color: #fff
}

.cmn--bg--white {
  background-color: #fff
}

.cmn--bg--danger {
  background-color: #b00048
}

.cmn--bg--aqua {
  background-color: #00B9EF
}

.cmn--bg--blue {
  background-color: #006AB8
}

.cmn--bg--primary {
  background-color: #6638b6
}

.cmn--bg--navy {
  background-color: #381f5e
}

.cmn--bg--green {
  background-color: #3c763d
}

.cmn--bg--gold {
  background-color: #ccac00
}

.cmn--bg--pink {
  background-color: #FD007F
}

.cmn--bdc--light {
  border-color: #e2e3e4 !important
}

.cmn--bdc--danger {
  border-color: #b00048 !important
}

.cmn--bdc--primary {
  border-color: #6638b6 !important
}

.cmn--font--sm {
  font-size: 11px
}

.cmn--font--md {
  font-size: 13px
}

.cmn--font--lg {
  font-size: 16px
}

.cmn--font--catch {
  font-size: 20px
}

.cmn--font--xl {
  font-size: 35px
}

.cmn--lh--md {
  line-height: 160%
}

.cmn--lh--lg {
  line-height: 180%
}

.cmn--h100 {
  height: 100%
}

.cmn--underline {
  display: inline;
  border-bottom: 5px solid #51318f;
  line-height: 2em
}

.cmn--hover--spin {
  transition: .3s
}

.cmn--hover--spin * {
  transition: .3s
}

.cmn--hover--spin:hover {
  cursor: pointer
}

.cmn--hover--spin:hover * {
  opacity: .8;
  transform: rotate(10deg)
}

@media (max-width: 767px) {
  .cmn--table-sm-block {
    display: block
  }
  .cmn--table-sm-block .cmn--thead {
    display: none
  }
  .cmn--table-sm-block .cmn--tbody, .cmn--table-sm-block .cmn--btr, .cmn--table-sm-block .cmn--bth, .cmn--table-sm-block .cmn--btd {
    display: block;
    border-bottom: none;
    width: 100% !important
  }
  .cmn--table-sm-block .cmn--btr {
    border-bottom: 1px solid #E2E3E4
  }
  .cmn--table--container {
    display: block;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch
  }
  .cmn--table--container .cmn--table {
    width: 180%
  }
  .cmn--table--container .cmn--btd {
    padding: .5rem .7rem
  }
  .cmn--table-mypage {
    table-layout: fixed
  }
  .cmn--table-mypage .cmn--hth {
    background-color: #a94585;
    color: #fff;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff
  }
  .cmn--table-mypage .cmn--btr .cmn--btd {
    background-color: #f1e9ed;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff
  }
  .cmn--table-mypage .cmn--btr .cmn--btd:last-child {
    background-color: #e2cfd9
  }
}

@media (max-width: 991px) {
  .cmn--table-sm-block {
    display: block
  }
  .cmn--table-sm-block .cmn--thead {
    display: none
  }
  .cmn--table-sm-block .cmn--tbody, .cmn--table-sm-block .cmn--btr, .cmn--table-sm-block .cmn--bth, .cmn--table-sm-block .cmn--btd {
    display: block;
    border-bottom: none;
    width: 100% !important
  }
  .cmn--table-sm-block .cmn--btr {
    border-bottom: 1px solid #E2E3E4
  }
  .cmn--table--md--container {
    display: block;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch
  }
  .cmn--table--md--container .cmn--table {
    width: 180%
  }
  .cmn--table--md--container .cmn--btd {
    padding: .5rem .7rem
  }
}

@media (min-width: 768px) {
  .cmn--h2 {
    font-size: 20px
  }
  .cmn--h4 {
    font-size: 16px
  }
  .cmn--table-mypage .cmn--hth {
    background-color: #a94585;
    color: #fff;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff
  }
  .cmn--table-mypage .cmn--btr .cmn--btd {
    background-color: #e2cfd9;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff
  }
  .cmn--table-mypage .cmn--btr:nth-child(even) .cmn--btd {
    background-color: #f1e9ed
  }
  .cmn--fcaption-overlay {
    font-size: 16px;
    line-height: 160%
  }
  .cmn--btn {
    display: inline-block
  }
  .cmn--btn-flex {
    display: flex
  }
  .cmn--btn-under-arrow {
    padding: 1rem 1rem 1.5rem 1rem
  }
  .cmn--small {
    font-size: 90%
  }
  .cmn--font--sm {
    font-size: 14px
  }
  .cmn--font--md {
    font-size: 15px
  }
  .cmn--font--catch {
    font-size: 32px
  }
}