@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Oswald:wght@500&display=swap");
.billing-collect * {
  font-family: Noto Sans JP, Hiragino Kaku Gothic ProN, Meiryo, ＭＳ Ｐゴシック, Arial, sans-serif
}

.billing-collect .pc-only {
  display: block
}

@media (max-width:768px) {
  .billing-collect .pc-only {
    display: none
  }
}

.billing-collect .sp-only {
  display: none
}

@media (max-width:768px) {
  .billing-collect .sp-only {
    display: block
  }
}

.billing-collect img {
  width: 100%
}

.billing-collect .inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto
}

@media (max-width:768px) {
  .billing-collect .inner {
    width: 89.3%;
    max-width: 100%
  }
}

.billing-collect .c-blue {
  color: #0093d4
}

.billing-collect .f-number {
  font-family: Oswald, sans-serif
}

.billing-collect .btn-hover {
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s
}

.billing-collect .btn-hover:hover {
  opacity: .7
}

@media (max-width:768px) {
  .billing-collect .btn-hover {
    -webkit-transition: none;
    transition: none
  }
  .billing-collect .btn-hover:hover {
    opacity: 1
  }
}

.billing-collect .kv {
  padding: 40px 0;
  background: #dff3fd
}

.billing-collect .kv .kv-img {
  width: 100%;
  max-width: 766px;
  margin: 0 auto
}

@media (max-width:768px) {
  .billing-collect .kv {
    padding: 5.3% 0 8%
  }
  .billing-collect .kv .kv-img {
    width: 89.3%;
    max-width: 100%
  }
}

.billing-collect .detail {
  padding: 80px 0 100px
}

@media (max-width:768px) {
  .billing-collect .detail {
    padding: 13.3vw 0
  }
}

.billing-collect .detail .detail-ttl {
  width: 76.9%;
  max-width: 754px;
  margin: 0 auto 40px;
  text-align: center
}

@media (max-width:768px) {
  .billing-collect .detail .detail-ttl {
    width: 100%;
    max-width: 100%;
    margin-bottom: 7.46vw
  }
}

.billing-collect .detail p {
  font-size: 20px;
  line-height: 2;
  text-align: center
}

@media (max-width:768px) {
  .billing-collect .detail p {
    font-size: 4.7vw
  }
}

.billing-collect .detail .detail-img {
  margin-top: 58px;
  margin-bottom: 48px
}

@media (max-width:768px) {
  .billing-collect .detail .detail-img {
    margin-top: 8.53%;
    margin-bottom: 7.6%
  }
}

.billing-collect .detail .detail-subttl {
  font-size: 46px;
  font-weight: 700
}

@media (max-width:768px) {
  .billing-collect .detail .detail-subttl {
    font-size: 7.4vw
  }
}

.billing-collect .anc-btn {
  position: relative;
  display: block;
  width: 360px;
  padding: 20px 0;
  margin: 36px auto 0;
  font-size: 24px;
  color: #fff;
  text-align: center;
  background-color: #0b6fb8;
  border: none;
  border-radius: 15px;
  -webkit-box-shadow: 0 6px #01568a;
  box-shadow: 0 6px #01568a
}

@media (max-width:768px) {
  .billing-collect .anc-btn {
    width: 88%;
    padding: 4.5vw 0;
    margin: 8.4% auto 0;
    font-size: 5.33vw
  }
}

.billing-collect .anc-btn:after {
  position: absolute;
  top: 50%;
  right: 8%;
  display: inline-block;
  width: 13px;
  height: 8px;
  content: "";
  background: url(../images/icon_billing-collect_arrow_01.png) 100% 100% no-repeat;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.billing-collect .point {
  padding: 100px 0;
  background-color: #dff3fd
}

@media (max-width:768px) {
  .billing-collect .point {
    padding: 12vw 0 8vw
  }
}

.billing-collect .point .point-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 75px
}

@media (max-width:768px) {
  .billing-collect .point .point-list {
    display: block;
    margin-top: 4.53vw
  }
}

.billing-collect .point .point-list .point-list-item {
  position: relative;
  width: 300px;
  padding-top: 70px;
  background-color: #fff;
  border-radius: 15px
}

@media (max-width:768px) {
  .billing-collect .point .point-list .point-list-item {
    width: 100%;
    padding-top: 5.3vw;
    margin-bottom: 5.3vw
  }
}

.billing-collect .point .point-list .point-list-item .point-list-item-top {
  height: 240px
}

@media (max-width:768px) {
  .billing-collect .point .point-list .point-list-item .point-list-item-top {
    width: 88%;
    height: auto;
    margin: 0 auto 6vw
  }
  .billing-collect .point .point-list .point-list-item .point-list-item-top .ttl-sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5vw
  }
}

.billing-collect .point .point-list .point-list-item .icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 90px;
  height: 90px;
  background-color: #0093d4;
  border-radius: 50px;
  -webkit-transform: translate(-50%, -40%);
  transform: translate(-50%, -40%)
}

@media (max-width:768px) {
  .billing-collect .point .point-list .point-list-item .icon {
    position: relative;
    top: auto;
    left: auto;
    width: 16vw;
    height: 16vw;
    -webkit-transform: translate(0);
    transform: translate(0)
  }
}

.billing-collect .point .point-list .point-list-item .icon .circle {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  width: 90px;
  height: 90px;
  font-size: 16px;
  font-weight: 700;
  line-height: 3.5;
  color: #fff;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

@media (max-width:768px) {
  .billing-collect .point .point-list .point-list-item .icon .circle {
    width: 16vw;
    height: 16vw;
    font-size: 3.2vw;
    line-height: 3.2
  }
}

.billing-collect .point .point-list .point-list-item .icon .circle .number {
  display: block;
  font-size: 34px;
  font-weight: 500;
  line-height: 0
}

@media (max-width:768px) {
  .billing-collect .point .point-list .point-list-item .icon .circle .number {
    font-size: 6.66vw
  }
}

.billing-collect .point .point-list .point-list-item .ttl {
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 700;
  text-align: center
}

@media (max-width:768px) {
  .billing-collect .point .point-list .point-list-item .ttl {
    padding-left: 5.86vw;
    margin-bottom: 0;
    font-size: 7.2vw
  }
}

.billing-collect .point .point-list .point-list-item .txt {
  width: 240px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 2;
  color: #666
}

@media (max-width:768px) {
  .billing-collect .point .point-list .point-list-item .txt {
    width: 100%;
    font-size: 4.8vw;
    line-height: 1.86
  }
}

.billing-collect .point .point-list .point-list-item .catch {
  padding: 10px 0;
  font-size: 44px;
  font-weight: 700;
  text-align: center;
  background-color: #fcff00;
  border-radius: 0 0 15px 15px
}

@media (max-width:768px) {
  .billing-collect .point .point-list .point-list-item .catch {
    padding: 2.5vw;
    font-size: 8vw
  }
}

.billing-collect .step {
  padding: 100px 0
}

@media (max-width:768px) {
  .billing-collect .step {
    padding: 13.3vw 0
  }
}

.billing-collect .step h3 {
  margin-bottom: 15px;
  font-size: 46px;
  text-align: center
}

@media (max-width:768px) {
  .billing-collect .step h3 {
    margin-bottom: 2vw;
    font-size: 6.66vw
  }
}

.billing-collect .step p {
  font-size: 20px;
  text-align: center
}

@media (max-width:768px) {
  .billing-collect .step p {
    font-size: 4.8vw
  }
}

.billing-collect .step .step-list {
  margin-top: 60px
}

@media (max-width:768px) {
  .billing-collect .step .step-list {
    margin-top: 8vw
  }
}

.billing-collect .step .step-list .step-list-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  background-color: #dff3fd;
  border-radius: 15px;
  -webkit-box-align: center;
  -ms-flex-align: center
}

@media (max-width:768px) {
  .billing-collect .step .step-list .step-list-item {
    margin-bottom: 5vw
  }
}

.billing-collect .step .step-list .step-list-item .step-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 10px 0;
  color: #fff;
  background-color: #0093d4;
  border-radius: 15px 0 0 15px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center
}

@media (max-width:768px) {
  .billing-collect .step .step-list .step-list-item .step-ttl {
    width: 22.3%;
    padding: 8% 0
  }
}

.billing-collect .step .step-list .step-list-item .step-ttl p {
  padding-right: 15px;
  font-weight: 700;
  letter-spacing: .05em
}

@media (max-width:768px) {
  .billing-collect .step .step-list .step-list-item .step-ttl p {
    padding-right: 2.1vw;
    font-size: 3.2vw
  }
}

.billing-collect .step .step-list .step-list-item .step-ttl .number {
  font-size: 34px;
  font-weight: 500
}

@media (max-width:768px) {
  .billing-collect .step .step-list .step-list-item .step-ttl .number {
    font-size: 6.66vw
  }
}

.billing-collect .step .step-list .step-list-item .step-txt {
  width: 85%;
  font-size: 20px
}

@media (max-width:768px) {
  .billing-collect .step .step-list .step-list-item .step-txt {
    width: 77.6%;
    font-size: 20px
  }
}

.billing-collect .step .step-list .step-list-item .step-txt p {
  width: 85%;
  padding-left: 30px;
  text-align: left
}

@media (max-width:768px) {
  .billing-collect .step .step-list .step-list-item .step-txt p {
    width: 82.6%;
    padding-left: 4vw
  }
}

@media (max-width:768px) {
  .billing-collect .step .step-list .step-list-item:nth-child(2) .step-ttl {
    padding: 3.5% 0
  }
}

.billing-collect .step .step-list .step-list-item:after {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: 29px;
  height: 60px;
  content: "";
  background: url(../images/icon_billing-collect_arrow.png) 90% 90% no-repeat;
  -webkit-transform: translateY(50%);
  transform: translateY(50%)
}

@media (max-width:768px) {
  .billing-collect .step .step-list .step-list-item:after {
    right: 4%;
    z-index: 2;
    width: 3.86vw;
    height: 8vw;
    background-size: contain
  }
}

.billing-collect .step .step-last {
  padding: 20px;
  margin: 60px 0 30px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  color: #fcff00;
  text-align: center;
  background-color: #0093d4;
  border-radius: 15px
}

@media (max-width:768px) {
  .billing-collect .step .step-last {
    padding: 5vw;
    margin: 6vw 0 5.7vw;
    font-size: 5vw
  }
}

.billing-collect .step .step-note {
  font-size: 16px
}

@media (max-width:768px) {
  .billing-collect .step .step-note {
    font-size: 3.73vw;
    text-align: left
  }
}

.billing-collect .step .btn-rule {
  position: relative;
  display: block;
  width: 500px;
  padding: 20px 0;
  margin: 100px auto 0;
  font-size: 24px;
  text-align: center;
  background-color: #fff;
  border: 2px solid #bfbfbf;
  border-radius: 15px;
  -webkit-box-shadow: 0 6px #bfbfbf;
  box-shadow: 0 6px #bfbfbf
}

@media (max-width:768px) {
  .billing-collect .step .btn-rule {
    width: 88%;
    max-width: 100%;
    padding: 4.5vw 0;
    margin: 8.2vw auto 0;
    font-size: 4.5vw;
    -webkit-box-shadow: 0 4px #bfbfbf;
    box-shadow: 0 4px #bfbfbf
  }
}

.billing-collect .step .btn-rule:after {
  position: absolute;
  top: 50%;
  right: 5%;
  width: 9px;
  height: 15px;
  content: "";
  background: url(../images/icon_billing-collect_arrow_02.png) 100% 100% no-repeat;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.billing-collect .contact {
  padding: 100px 0;
  color: #fff;
  background-color: #0b6fb8
}

@media (max-width:768px) {
  .billing-collect .contact {
    padding: 13.3vw 0
  }
}

.billing-collect .contact .contact-ttl {
  margin-bottom: 60px;
  font-size: 46px;
  text-align: center
}

@media (max-width:768px) {
  .billing-collect .contact .contact-ttl {
    margin-bottom: 8vw;
    font-size: 6.2vw
  }
}

.billing-collect .contact .contact-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 671px;
  margin: 0 auto
}

@media (max-width:768px) {
  .billing-collect .contact .contact-list {
    display: block;
    max-width: 100%
  }
}

.billing-collect .contact .contact-list .contact-list-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.billing-collect .contact .contact-list .contact-list-item .icon {
  margin-right: 15px
}

.billing-collect .contact .contact-list .contact-list-item .txt span {
  display: block;
  font-size: 14px;
  font-weight: 400
}

@media (max-width:768px) {
  .billing-collect .contact .contact-list .contact-list-item .txt span {
    font-size: 3.73vw
  }
}

@media (max-width:768px) {
  .billing-collect .contact .contact-list .contact-list-item:first-child {
    margin-bottom: 8vw
  }
}

.billing-collect .contact .contact-list .contact-list-item:first-child .icon {
  width: 60px;
  height: 60px;
  background: url(../images/icon_billing-collect_mail.png) 100% 100% no-repeat;
  background-size: contain
}

@media (max-width:768px) {
  .billing-collect .contact .contact-list .contact-list-item:first-child .icon {
    width: 16vw;
    height: 16vw
  }
}

.billing-collect .contact .contact-list .contact-list-item:first-child .txt {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: .03em
}

.billing-collect .contact .contact-list .contact-list-item:first-child .txt a {
  font-size: 20px;
  line-height: 1.3;
  color: #fff
}

@media (max-width:768px) {
  .billing-collect .contact .contact-list .contact-list-item:first-child .txt {
    font-size: 6.2vw;
    line-height: 1.2
  }
}

.billing-collect .contact .contact-list .contact-list-item:nth-child(2) .icon {
  padding: 15px 10px;
  font-size: 18px;
  font-weight: 600;
  color: #0b6fb8;
  text-align: center;
  background-color: #fff;
  border-radius: 8px
}

@media (max-width:768px) {
  .billing-collect .contact .contact-list .contact-list-item:nth-child(2) .icon {
    padding: 4vw 2.5vw;
    font-size: 4.8vw
  }
}

.billing-collect .contact .contact-list .contact-list-item:nth-child(2) .txt {
  font-size: 24px;
  font-weight: 700
}

@media (max-width:768px) {
  .billing-collect .contact .contact-list .contact-list-item:nth-child(2) .txt {
    font-size: 5vw
  }
}

.billing-collect .contact .contact-list .contact-list-item:nth-child(2) .txt span {
  line-height: 1.8
}

@media (max-width:768px) {
  .billing-collect .contact .contact-list .contact-list-item:nth-child(2) .txt span {
    line-height: 1.6
  }
}

.billing-collect .qa {
  padding-top: 0;
  background-color: #dff2fc
}

@media (max-width:768px) {
  .billing-collect .qa {
    padding-top: 60px!important
  }
}

.billing-collect .qa h3 {
  padding-top: 120px;
  margin-bottom: 30px;
  text-align: center
}

.billing-collect .qa h3 img {
  width: 100%;
  max-width: 212px;
  margin: 0 auto
}

.billing-collect .qa h3 small {
  display: block;
  font-size: 30px;
  font-weight: 700
}

@media (max-width:768px) {
  .billing-collect .qa h3 {
    padding-top: 0!important
  }
  .billing-collect .qa h3 small {
    display: block;
    font-size: 20px;
    font-weight: 700
  }
  .billing-collect .qa h3 img {
    width: 120px
  }
}

.billing-collect .qa .qalist {
  padding-bottom: 100px
}

@media (max-width:768px) {
  .billing-collect .qa .qalist {
    padding-bottom: 13.3vw
  }
}

.billing-collect .qa .qalist dt {
  padding: 30px 30px 0;
  font-size: 20px;
  font-weight: 600;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px
}

.billing-collect .qa .qalist dt:nth-of-type(odd) {
  background-color: #fff
}

@media (max-width:768px) {
  .billing-collect .qa .qalist dt {
    font-size: 16px
  }
}

.billing-collect .qa .qalist dt span {
  position: relative;
  display: block;
  padding-bottom: 15px;
  padding-left: 55px;
  border-bottom: 1px solid #0093d4
}

.billing-collect .qa .qalist dt span:before {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
  text-align: center;
  content: "Q";
  background-color: #0093d4
}

@media (max-width:768px) {
  .billing-collect .qa .qalist dt span {
    padding-left: 36px
  }
  .billing-collect .qa .qalist dt span:before {
    width: 26px;
    height: 26px;
    font-size: 16px;
    line-height: 22px
  }
}

.billing-collect .qa .qalist dd {
  padding: 15px 30px 30px;
  font-size: 20px;
  font-weight: 600;
  color: #0093d4;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px
}

.billing-collect .qa .qalist dd:nth-of-type(odd) {
  background-color: #fff
}

@media (max-width:768px) {
  .billing-collect .qa .qalist dd {
    font-size: 16px
  }
}

.billing-collect .qa .qalist dd span {
  position: relative;
  display: inline-block;
  padding-left: 55px
}

.billing-collect .qa .qalist dd span:before {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #0093d4;
  text-align: center;
  content: "A";
  background-color: #fff;
  border: 1px solid #0093d4
}

@media (max-width:768px) {
  .billing-collect .qa .qalist dd span {
    position: relative;
    display: inline-block;
    padding-left: 36px
  }
  .billing-collect .qa .qalist dd span:before {
    width: 26px;
    height: 26px;
    font-size: 16px;
    line-height: 22px
  }
}

.billing-collect .qa .qalist dd span a {
  color: #e62320;
  text-decoration: none
}

.billing-collect .qa .qalist dd span a:hover {
  text-decoration: underline
}

.contact-ep {
    font-size: 40px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}

@media (max-width:768px) {
.contact-ep {
    font-size: 5.2vw;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}
  }