body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", "Noto Sans JP", sans-serif;
}
body .pc-only {
  display: block;
}
body .sp-only {
  display: none;
}
@media screen and (max-width: 767px) {
  body .pc-only {
    display: none;
  }
  body .sp-only {
    display: block;
  }
}

.mvarea {
  background-color: #fbfbfb;
  text-align: center;
}
.mvarea__bg {
  background-image: url("/assets/images/visa-card-lp/mv_card-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 1388px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea__bg {
    max-width: calc( 100vw / 1180 * 1388);
  }
}
@media screen and (max-width: 767px) {
  .mvarea__bg {
    max-width: calc( 100vw / 375 * 1388);
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.mvarea__inner {
  padding-top: 24px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea__inner {
    padding-top: calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .mvarea__inner {
    padding-top: calc( 100vw / 375 * 24);
  }
}
.mvarea__logo {
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea__logo {
    margin-bottom: calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .mvarea__logo {
    margin-bottom: calc( 100vw / 375 * 24);
  }
}
.mvarea__logo img {
  height: auto;
  width: 100%;
  max-width: 132px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea__logo img {
    max-width: calc( 100vw / 1180 * 132);
  }
}
@media screen and (max-width: 767px) {
  .mvarea__logo img {
    max-width: calc( 100vw / 375 * 132);
  }
}
.mvarea__text-container {
  display: block;
  margin-bottom: 4px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea__text-container {
    margin-bottom: calc( 100vw / 1180 * 4);
  }
}
@media screen and (max-width: 767px) {
  .mvarea__text-container {
    margin-bottom: calc( 100vw / 375 * 4);
  }
}
.mvarea__text {
  font-size: 18px;
  line-height: 1.6;
  color: #555555;
  font-weight: 500;
  display: inline-block;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea__text {
    font-size: calc( 100vw / 1180 * 18);
  }
}
@media screen and (max-width: 767px) {
  .mvarea__text {
    font-size: calc( 100vw / 375 * 14);
  }
}
.mvarea__text-with-dots-container {
  position: relative;
  display: inline-block;
}
.mvarea__dots-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 78%;
  color: #20AEE5;
  letter-spacing: -0.1em;
  font-size: 18px;
  white-space: nowrap;
  line-height: 0.8;
  pointer-events: none;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea__dots-overlay {
    font-size: calc( 100vw / 1180 * 18);
  }
}
@media screen and (max-width: 767px) {
  .mvarea__dots-overlay {
    font-size: calc( 100vw / 375 * 14);
  }
}
.mvarea__heading {
  font-size: 32px;
  line-height: 1.2;
  color: #555555;
  font-weight: 600;
  margin: 0;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea__heading {
    font-size: calc( 100vw / 1180 * 32);
  }
}
@media screen and (max-width: 767px) {
  .mvarea__heading {
    font-size: calc( 100vw / 375 * 25);
  }
}
.mvarea .mv {
  text-align: center;
}
.mvarea .mv__inner {
  padding-top: 24px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea .mv__inner {
    padding-top: calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .mvarea .mv__inner {
    padding-top: calc( 100vw / 375 * 24);
  }
}
.mvarea .mv__img img {
  max-width: 288px;
  padding-left: 64px;
  vertical-align: bottom;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .mvarea .mv__img img {
    max-width: calc( 100vw / 1180 * 288);
    padding-left: calc( 100vw / 1180 * 64);
  }
}
@media screen and (max-width: 767px) {
  .mvarea .mv__img img {
    max-width: calc( 100vw / 375 * 288);
    padding-left: calc( 100vw / 375 * 64);
  }
}

.recommendarea {
  background-color: #fff;
  text-align: center;
}
.recommendarea__inner {
  padding: 40px 0;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .recommendarea__inner {
    padding: calc( 100vw / 1180 * 40) 0;
  }
}
@media screen and (max-width: 767px) {
  .recommendarea__inner {
    padding: calc( 100vw / 375 * 24) 0;
  }
}
.recommendarea__illustrations {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .recommendarea__illustrations {
    gap: calc( 100vw / 1180 * 80);
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .recommendarea__illustrations {
    gap: calc( 100vw / 375 * 32);
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.recommendarea__illustration img.shop {
  width: 88px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .recommendarea__illustration img.shop {
    width: calc( 100vw / 1180 * 88);
  }
}
@media screen and (max-width: 767px) {
  .recommendarea__illustration img.shop {
    width: calc( 100vw / 375 * 77);
  }
}
.recommendarea__illustration img.smartphone {
  width: 77px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .recommendarea__illustration img.smartphone {
    width: calc( 100vw / 1180 * 77);
  }
}
@media screen and (max-width: 767px) {
  .recommendarea__illustration img.smartphone {
    width: calc( 100vw / 375 * 70);
  }
}
.recommendarea__text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .recommendarea__text-container {
    gap: calc( 100vw / 1180 * 8);
  }
}
@media screen and (max-width: 767px) {
  .recommendarea__text-container {
    gap: calc( 100vw / 375 * 8);
  }
}
.recommendarea__check-icon img {
  height: auto;
  width: 20px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .recommendarea__check-icon img {
    width: calc( 100vw / 1180 * 20);
  }
}
@media screen and (max-width: 767px) {
  .recommendarea__check-icon img {
    width: calc( 100vw / 375 * 20);
  }
}
.recommendarea__text {
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  font-weight: 600;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .recommendarea__text {
    font-size: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .recommendarea__text {
    font-size: calc( 100vw / 375 * 14);
  }
}

.cp-bannerarea {
  padding: 80px;
  background: #fff;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .cp-bannerarea {
    padding: calc( 100vw / 1180 * 80);
  }
}
@media screen and (max-width: 767px) {
  .cp-bannerarea {
    padding: calc( 100vw / 375 * 40) calc( 100vw / 375 * 16);
  }
}
.cp-bannerarea__txt {
  margin-bottom: 40px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #555;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .cp-bannerarea__txt {
    margin-bottom: calc( 100vw / 1180 * 40);
    font-size: calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .cp-bannerarea__txt {
    margin-bottom: calc( 100vw / 375 * 16);
    font-size: calc( 100vw / 375 * 20);
  }
}
.cp-bannerarea__img {
  margin: 0 auto;
  max-width: 880px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .cp-bannerarea__img {
    max-width: calc( 100vw / 1180 * 880);
  }
}
@media screen and (max-width: 767px) {
  .cp-bannerarea__img {
    max-width: none;
  }
}
.cp-bannerarea__img a {
  transition: 0.2s;
}
.cp-bannerarea__img a:hover {
  opacity: 0.7;
}
.cp-bannerarea__img picture {
  display: block;
}
.cp-bannerarea__img img {
  width: 100%;
  vertical-align: top;
}

.charge-visacard-introductionarea {
  background-color: #fff;
  text-align: center;
}
.charge-visacard-introductionarea__inner {
  padding: 40px 24px 48px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .charge-visacard-introductionarea__inner {
    padding: calc( 100vw / 1180 * 40) calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .charge-visacard-introductionarea__inner {
    padding: calc( 100vw / 375 * 40) calc( 100vw / 375 * 24);
  }
}
.charge-visacard-introductionarea__heading {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: #555555;
  margin: 0 0 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .charge-visacard-introductionarea__heading {
    font-size: calc( 100vw / 1180 * 24);
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .charge-visacard-introductionarea__heading {
    font-size: calc( 100vw / 375 * 20);
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.charge-visacard-introductionarea__description {
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  margin: 0 0 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .charge-visacard-introductionarea__description {
    font-size: calc( 100vw / 1180 * 16);
    margin-bottom: calc( 100vw / 1180 * 40);
  }
}
@media screen and (max-width: 767px) {
  .charge-visacard-introductionarea__description {
    font-size: calc( 100vw / 375 * 14);
    margin-bottom: calc( 100vw / 375 * 32);
    text-align: left;
  }
}
.charge-visacard-introductionarea__features {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .charge-visacard-introductionarea__features {
    gap: calc( 100vw / 1180 * 40);
  }
}
@media screen and (max-width: 767px) {
  .charge-visacard-introductionarea__features {
    flex-direction: column;
    gap: calc( 100vw / 375 * 32);
    align-items: center;
  }
}
.charge-visacard-introductionarea__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.charge-visacard-introductionarea__feature-icon {
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .charge-visacard-introductionarea__feature-icon {
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .charge-visacard-introductionarea__feature-icon {
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.charge-visacard-introductionarea__feature-icon img {
  height: auto;
  width: 174px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .charge-visacard-introductionarea__feature-icon img {
    width: calc( 100vw / 1180 * 174);
  }
}
@media screen and (max-width: 767px) {
  .charge-visacard-introductionarea__feature-icon img {
    width: calc( 100vw / 375 * 174);
  }
}
.charge-visacard-introductionarea__feature-text {
  font-size: 16px;
  line-height: 1.4;
  color: #20AEE5;
  font-weight: 600;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .charge-visacard-introductionarea__feature-text {
    font-size: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .charge-visacard-introductionarea__feature-text {
    font-size: calc( 100vw / 375 * 16);
  }
}

.key-pointsarea {
  background-color: #E1F0F8;
}
.key-pointsarea__inner {
  padding: 40px 0;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__inner {
    padding: calc( 100vw / 1180 * 40) 0;
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__inner {
    padding: calc( 100vw / 375 * 40) 0;
  }
}
.key-pointsarea__title {
  text-align: center;
  margin-bottom: 36px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__title {
    margin-bottom: calc( 100vw / 1180 * 36);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__title {
    margin-bottom: calc( 100vw / 375 * 36);
  }
}
.key-pointsarea__title .heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.key-pointsarea__title .heading-group .heading-bubble {
  position: relative;
  display: inline-block;
  padding: 7px 0;
  background-color: #ffffff;
  color: #20AEE5;
  font-size: 16px;
  font-weight: 600;
  border-radius: 17px;
  line-height: 1.4;
  max-width: 221px;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__title .heading-group .heading-bubble {
    font-size: calc( 100vw / 1180 * 16);
    padding: calc( 100vw / 1180 * 7) 0;
    border-radius: calc( 100vw / 1180 * 17);
    max-width: calc( 100vw / 1180 * 221);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__title .heading-group .heading-bubble {
    font-size: calc( 100vw / 375 * 16);
    padding: calc( 100vw / 375 * 7) 0;
    border-radius: calc( 100vw / 375 * 17);
    max-width: calc( 100vw / 375 * 221);
  }
}
.key-pointsarea__title .heading-group .heading-bubble::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 20px 14px 0 14px;
  border-color: #ffffff transparent transparent transparent;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__title .heading-group .heading-bubble::after {
    border-width: calc( 100vw / 1180 * 20) calc( 100vw / 1180 * 14) 0 calc( 100vw / 1180 * 14);
    bottom: calc( 100vw / 1180 * -13);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__title .heading-group .heading-bubble::after {
    border-width: calc( 100vw / 375 * 20) calc( 100vw / 375 * 14) 0 calc( 100vw / 375 * 14);
    bottom: calc( 100vw / 375 * -13);
  }
}
.key-pointsarea__title .heading-group .heading-main {
  display: flex;
  align-items: center;
  color: #555555;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 14px;
  font-size: 24px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__title .heading-group .heading-main {
    margin-top: calc( 100vw / 1180 * 14);
    font-size: calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__title .heading-group .heading-main {
    margin-top: calc( 100vw / 375 * 14);
    font-size: calc( 100vw / 375 * 20);
  }
}
.key-pointsarea__title .heading-group .heading-main__num {
  position: relative;
  color: #20AEE5;
  font-family: "Avenir Next", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", "Noto Sans JP", sans-serif;
  font-size: 36px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__title .heading-group .heading-main__num {
    font-size: calc( 100vw / 1180 * 36);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__title .heading-group .heading-main__num {
    font-size: calc( 100vw / 375 * 32);
  }
}
.key-pointsarea__title .heading-group .heading-main__num::before {
  content: "";
  position: absolute;
  background-image: url("/assets/images/visa-card-lp/key-pointsarea_title-attension.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px;
  height: 14px;
  top: -4px;
  left: -4px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__title .heading-group .heading-main__num::before {
    top: calc( 100vw / 1180 * -4);
    left: calc( 100vw / 1180 * -4);
    width: calc( 100vw / 1180 * 16);
    height: calc( 100vw / 1180 * 14);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__title .heading-group .heading-main__num::before {
    top: calc( 100vw / 375 * -4);
    left: calc( 100vw / 375 * -4);
    width: calc( 100vw / 375 * 16);
    height: calc( 100vw / 375 * 14);
  }
}
.key-pointsarea__title .heading-group .heading-main__unit {
  color: #20AEE5;
}
.key-pointsarea__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 16px;
  max-width: 606px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__points {
    grid-template-columns: repeat(2, 1fr);
    gap: calc( 100vw / 1180 * 36) calc( 100vw / 1180 * 16);
    padding: 0 calc( 100vw / 1180 * 20);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__points {
    grid-template-columns: 1fr;
    gap: calc( 100vw / 375 * 36);
    padding: 0 calc( 100vw / 375 * 16);
  }
}
.key-pointsarea__point {
  position: relative;
  background-color: #fff;
  border-radius: 16px;
  padding: 32px 0 24px;
  width: 100%;
  max-width: 295px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point {
    border-radius: calc( 100vw / 1180 * 20);
    padding: calc( 100vw / 1180 * 32) 0 calc( 100vw / 1180 * 24);
    max-width: calc( 100vw / 1180 * 295);
  }
  .key-pointsarea__point:nth-child(odd) {
    justify-self: end;
  }
  .key-pointsarea__point:nth-child(even) {
    justify-self: start;
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point {
    border-radius: calc( 100vw / 375 * 20);
    padding: calc( 100vw / 375 * 32) 0 calc( 100vw / 375 * 24);
    max-width: calc( 100vw / 375 * 295);
    justify-self: center;
  }
}
.key-pointsarea__point-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-number {
    top: calc( 100vw / 1180 * -20);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-number {
    top: calc( 100vw / 375 * -20);
  }
}
.key-pointsarea__point-number img {
  height: auto;
  max-width: 42px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-number img {
    max-width: calc( 100vw / 1180 * 42);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-number img {
    max-width: calc( 100vw / 375 * 42);
  }
}
.key-pointsarea__point-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.key-pointsarea__point-text-top {
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
  font-weight: 300;
  margin-bottom: 4px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-text-top {
    font-size: calc( 100vw / 1180 * 14);
    margin-bottom: calc( 100vw / 1180 * 4);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-text-top {
    font-size: calc( 100vw / 375 * 14);
    margin-bottom: calc( 100vw / 375 * 4);
  }
}
.key-pointsarea__point-text-main {
  font-size: 20px;
  line-height: 1.4;
  color: #20AEE5;
  font-weight: 600;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-text-main {
    font-size: calc( 100vw / 1180 * 20);
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-text-main {
    font-size: calc( 100vw / 375 * 20);
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.key-pointsarea__point-text-main-small {
  font-size: 16px;
  color: #555555;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-text-main-small {
    font-size: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-text-main-small {
    font-size: calc( 100vw / 375 * 16);
  }
}
.key-pointsarea__point-image img {
  height: auto;
  width: 100%;
}
.key-pointsarea__point-image img.key-pointsarea__point-image-1 {
  width: 187px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-image img.key-pointsarea__point-image-1 {
    width: calc( 100vw / 1180 * 187);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-image img.key-pointsarea__point-image-1 {
    width: calc( 100vw / 375 * 187);
  }
}
.key-pointsarea__point-image img.key-pointsarea__point-image-2 {
  width: 223px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-image img.key-pointsarea__point-image-2 {
    width: calc( 100vw / 1180 * 223);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-image img.key-pointsarea__point-image-2 {
    width: calc( 100vw / 375 * 223);
  }
}
.key-pointsarea__point-image img.key-pointsarea__point-image-3 {
  max-width: 255px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-image img.key-pointsarea__point-image-3 {
    max-width: calc( 100vw / 1180 * 255);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-image img.key-pointsarea__point-image-3 {
    max-width: calc( 100vw / 375 * 255);
  }
}
.key-pointsarea__point-image img.key-pointsarea__point-image-4 {
  width: 157px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .key-pointsarea__point-image img.key-pointsarea__point-image-4 {
    width: calc( 100vw / 1180 * 157);
  }
}
@media screen and (max-width: 767px) {
  .key-pointsarea__point-image img.key-pointsarea__point-image-4 {
    width: calc( 100vw / 375 * 157);
  }
}

.visacard-howtouse-area {
  background-color: #f9f9f9;
}
.visacard-howtouse-area__inner {
  padding: 40px 24px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__inner {
    padding: calc( 100vw / 1180 * 40) calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__inner {
    padding: calc( 100vw / 375 * 40) calc( 100vw / 375 * 24);
  }
}
.visacard-howtouse-area__heading {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #555555;
  margin: 0 0 40px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__heading {
    font-size: calc( 100vw / 1180 * 24);
    margin-bottom: calc( 100vw / 1180 * 40);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__heading {
    font-size: calc( 100vw / 375 * 20);
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.visacard-howtouse-area__section {
  margin-bottom: 60px;
  width: 100%;
  max-width: 716px;
  margin: 0 auto 32px;
  background-color: #fff;
  border-radius: 16px;
  padding: 40px 0;
}
.visacard-howtouse-area__section:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__section {
    margin-bottom: calc( 100vw / 1180 * 32);
    max-width: calc( 100vw / 1180 * 716);
    border-radius: calc( 100vw / 1180 * 16);
    padding: calc( 100vw / 1180 * 40) 0;
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__section {
    margin-bottom: calc( 100vw / 375 * 16);
    border-radius: calc( 100vw / 375 * 16);
    padding: calc( 100vw / 375 * 24) 0;
  }
}
.visacard-howtouse-area__section-title {
  text-align: center;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.4;
  color: #20AEE5;
  margin: 0 0 16px;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__section-title {
    font-size: calc( 100vw / 1180 * 20);
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__section-title {
    font-size: calc( 100vw / 375 * 16);
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.visacard-howtouse-area__section-title-small {
  font-size: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__section-title-small {
    font-size: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__section-title-small {
    font-size: calc( 100vw / 375 * 14);
  }
}
.visacard-howtouse-area__section-dots {
  width: 100%;
  margin-bottom: 40px;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__section-dots {
    margin-bottom: calc( 100vw / 1180 * 40);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__section-dots {
    margin-bottom: calc( 100vw / 375 * 20);
  }
}
.visacard-howtouse-area__section-dots img {
  width: 100%;
  max-width: 646px;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__section-dots img {
    max-width: calc( 100vw / 1180 * 646);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__section-dots img {
    max-width: calc( 100vw / 375 * 295);
  }
}
.visacard-howtouse-area__step {
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__step {
    margin-bottom: calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__step {
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.visacard-howtouse-area__step.no-m-bottom {
  margin-bottom: 0;
}
.visacard-howtouse-area__step-title {
  font-size: 16px;
  line-height: normal;
  font-weight: 600;
  color: #555555;
  margin: 0 0 16px;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__step-title {
    font-size: calc( 100vw / 1180 * 16);
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__step-title {
    font-size: calc( 100vw / 375 * 16);
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.visacard-howtouse-area__step-content {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 494px;
  margin: 0 auto 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__step-content {
    gap: calc( 100vw / 1180 * 24);
    max-width: calc( 100vw / 1180 * 494);
    margin: 0 auto calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__step-content {
    flex-direction: column;
    gap: calc( 100vw / 375 * 16);
    margin-bottom: calc( 100vw / 375 * 16);
    align-items: center;
    max-width: calc( 100vw / 375 * 285);
  }
}
.visacard-howtouse-area__step-content.no-m-bottom {
  margin-bottom: 0;
}
.visacard-howtouse-area__step-image {
  flex-shrink: 0;
}
.visacard-howtouse-area__step-image img {
  height: auto;
  width: 100%;
}
.visacard-howtouse-area__step-image img.charge-illustration {
  max-width: 190px;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__step-image img.charge-illustration {
    max-width: calc( 100vw / 1180 * 190);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__step-image img.charge-illustration {
    max-width: calc( 100vw / 375 * 190);
  }
}
.visacard-howtouse-area__step-image img.saving-charge-illustration {
  max-width: 190px;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__step-image img.saving-charge-illustration {
    max-width: calc( 100vw / 1180 * 190);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__step-image img.saving-charge-illustration {
    max-width: calc( 100vw / 375 * 190);
  }
}
.visacard-howtouse-area__step-image img.saving-history-illustration {
  width: 190px;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__step-image img.saving-history-illustration {
    width: calc( 100vw / 1180 * 190);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__step-image img.saving-history-illustration {
    width: calc( 100vw / 375 * 190);
  }
}
.visacard-howtouse-area__step-image img.saving-withdraw-illustration {
  width: 190px;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__step-image img.saving-withdraw-illustration {
    width: calc( 100vw / 1180 * 190);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__step-image img.saving-withdraw-illustration {
    width: calc( 100vw / 375 * 190);
  }
}
.visacard-howtouse-area__step-text {
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  font-weight: normal;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__step-text {
    font-size: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__step-text {
    font-size: calc( 100vw / 375 * 16);
    text-align: center;
  }
}
.visacard-howtouse-area__arrow-down {
  text-align: center;
  margin: 24px 0;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__arrow-down {
    margin: calc( 100vw / 1180 * 24) 0;
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__arrow-down {
    margin: calc( 100vw / 375 * 24) 0;
  }
}
.visacard-howtouse-area__arrow-down img {
  height: auto;
  width: auto;
}
.visacard-howtouse-area__payment-method {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 494px;
  margin: 0 auto 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__payment-method {
    gap: calc( 100vw / 1180 * 24);
    margin-bottom: calc( 100vw / 1180 * 24);
    max-width: calc( 100vw / 1180 * 494);
    margin: 0 auto calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-method {
    flex-direction: column;
    gap: calc( 100vw / 375 * 16);
    margin-bottom: calc( 100vw / 375 * 24);
    max-width: calc( 100vw / 375 * 295);
  }
}
.visacard-howtouse-area__payment-method:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-method.net-shop {
    gap: 0;
  }
}
.visacard-howtouse-area__payment-image {
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-image {
    margin: 0 auto;
  }
}
.visacard-howtouse-area__payment-image img {
  height: auto;
  width: auto;
  max-width: 100%;
}
.visacard-howtouse-area__payment-image img.store-illustration {
  width: 190px;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__payment-image img.store-illustration {
    width: calc( 100vw / 1180 * 190);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-image img.store-illustration {
    width: calc( 100vw / 375 * 190);
  }
}
.visacard-howtouse-area__payment-image img.online-illustration {
  width: 190px;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__payment-image img.online-illustration {
    width: calc( 100vw / 1180 * 190);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-image img.online-illustration {
    width: calc( 100vw / 375 * 190);
  }
}
.visacard-howtouse-area__payment-text {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-text {
    text-align: center;
  }
}
.visacard-howtouse-area__payment-label {
  display: inline-block;
  padding: 4px 16px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #555555;
  background-color: #F5F5F5;
  border-radius: 24px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__payment-label {
    padding: calc( 100vw / 1180 * 4) calc( 100vw / 1180 * 16);
    margin: calc( 100vw / 1180 * 16) 0;
    font-size: calc( 100vw / 1180 * 14);
    border-radius: calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-label {
    padding: calc( 100vw / 375 * 4) calc( 100vw / 375 * 16);
    margin: calc( 100vw / 375 * 16) 0;
    font-size: calc( 100vw / 375 * 14);
    border-radius: calc( 100vw / 375 * 24);
    display: none;
  }
}
.visacard-howtouse-area__payment-label.sp-only {
  display: none;
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-label.sp-only {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-label.sp-only.net-shop-label {
    display: inline-block;
    text-align: center;
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.visacard-howtouse-area__payment-description {
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  font-weight: normal;
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__payment-description {
    font-size: calc( 100vw / 1180 * 16);
    margin-bottom: calc( 100vw / 1180 * 8);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-description {
    font-size: calc( 100vw / 375 * 16);
    margin-bottom: calc( 100vw / 375 * 8);
  }
}
.visacard-howtouse-area__payment-note {
  font-size: 10px;
  color: #555555;
  font-weight: 300;
  line-height: 1.2;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__payment-note {
    font-size: calc( 100vw / 1180 * 10);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__payment-note {
    font-size: calc( 100vw / 375 * 12);
    text-align: left;
  }
}
.visacard-howtouse-area__scenes {
  max-width: 490px;
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__scenes {
    max-width: calc( 100vw / 1180 * 490);
    border-radius: calc( 100vw / 1180 * 16);
    padding: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scenes {
    max-width: calc( 100vw / 375 * 279);
    border-radius: calc( 100vw / 375 * 16);
    padding: calc( 100vw / 375 * 16) 0;
  }
}
.visacard-howtouse-area__scenes-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #555555;
  margin: 0 0 4px;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__scenes-title {
    font-size: calc( 100vw / 1180 * 16);
    margin-bottom: calc( 100vw / 1180 * 4);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scenes-title {
    font-size: calc( 100vw / 375 * 16);
    margin-bottom: calc( 100vw / 375 * 4);
  }
}
.visacard-howtouse-area__scenes-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  max-width: 295px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__scenes-list {
    gap: calc( 100vw / 1180 * 32);
    max-width: calc( 100vw / 1180 * 295);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scenes-list {
    gap: calc( 100vw / 375 * 16);
    max-width: calc( 100vw / 375 * 263);
  }
}
.visacard-howtouse-area__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  max-width: 200px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__scene {
    max-width: calc( 100vw / 1180 * 200);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scene {
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scene.scene-1 {
    align-items: center;
    max-width: calc( 100vw / 375 * 68);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scene.scene-2 {
    max-width: calc( 100vw / 375 * 95);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scene.scene-3 {
    align-items: center;
    max-width: calc( 100vw / 375 * 68);
  }
}
.visacard-howtouse-area__scene-image img {
  height: auto;
}
.visacard-howtouse-area__scene-image img.scene-1-image {
  width: 52px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__scene-image img.scene-1-image {
    width: calc( 100vw / 1180 * 52);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scene-image img.scene-1-image {
    width: calc( 100vw / 375 * 52);
  }
}
.visacard-howtouse-area__scene-image img.scene-2-image {
  width: 59px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__scene-image img.scene-2-image {
    width: calc( 100vw / 1180 * 59);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scene-image img.scene-2-image {
    width: calc( 100vw / 375 * 59);
  }
}
.visacard-howtouse-area__scene-image img.scene-3-image {
  width: 68px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__scene-image img.scene-3-image {
    width: calc( 100vw / 1180 * 68);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scene-image img.scene-3-image {
    width: calc( 100vw / 375 * 68);
  }
}
.visacard-howtouse-area__scene-text {
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
  font-weight: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .visacard-howtouse-area__scene-text {
    font-size: calc( 100vw / 1180 * 14);
  }
}
@media screen and (max-width: 767px) {
  .visacard-howtouse-area__scene-text {
    font-size: calc( 100vw / 375 * 14);
  }
}

.usage-flowarea {
  background-color: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}
.usage-flowarea__inner {
  padding: 40px 24px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__inner {
    padding: calc( 100vw / 1180 * 40) calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__inner {
    padding: calc( 100vw / 375 * 40) calc( 100vw / 375 * 24);
  }
}
.usage-flowarea__heading {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: #555555;
  margin: 0 0 56px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__heading {
    font-size: calc( 100vw / 1180 * 24);
    margin-bottom: calc( 100vw / 1180 * 56);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__heading {
    font-size: calc( 100vw / 375 * 20);
    margin-bottom: calc( 100vw / 375 * 40);
  }
}
.usage-flowarea__steps {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__steps {
    gap: calc( 100vw / 1180 * 48);
    margin-bottom: calc( 100vw / 1180 * 32);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__steps {
    flex-direction: column;
    gap: calc( 100vw / 375 * 64);
    margin-bottom: calc( 100vw / 375 * 16);
    align-items: center;
  }
}
.usage-flowarea__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 327px;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step {
    max-width: calc( 100vw / 1180 * 327);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step {
    max-width: none;
  }
}
.usage-flowarea__step-header {
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-header {
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-header {
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.usage-flowarea__step-number {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: #20AEE5;
  margin-bottom: 16px;
  font-family: "Avenir Next", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-number {
    font-size: calc( 100vw / 1180 * 20);
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-number {
    font-size: calc( 100vw / 375 * 20);
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.usage-flowarea__step-title {
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  font-weight: 600;
  margin: 0;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-title {
    font-size: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-title {
    font-size: calc( 100vw / 375 * 16);
  }
}
.usage-flowarea__step-title-highlight {
  display: inline-block;
  padding: 0 8px;
  background-color: #ffffff;
  border: 1px solid #20AEE5;
  border-radius: 10px;
  color: #20AEE5;
  line-height: 1.5;
  margin-right: 4px;
  font-size: 12px;
  transform: translateY(-1px);
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-title-highlight {
    padding: 0 calc( 100vw / 1180 * 8);
    border-radius: calc( 100vw / 1180 * 10);
    margin-right: calc( 100vw / 1180 * 4);
    font-size: calc( 100vw / 1180 * 12);
    transform: translateY(calc( 100vw / 1180 * -1));
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-title-highlight {
    padding: 0 calc( 100vw / 375 * 8);
    border-radius: calc( 100vw / 375 * 10);
    margin-right: calc( 100vw / 375 * 4);
    font-size: calc( 100vw / 375 * 12);
    transform: translateY(calc( 100vw / 375 * -1));
  }
}
.usage-flowarea__step-title-highlight.bg-blue {
  background-color: #20AEE5;
  color: #ffffff;
}
.usage-flowarea__step-title-highlight.ml-4 {
  margin-left: 4px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-title-highlight.ml-4 {
    margin-left: calc( 100vw / 1180 * 4);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-title-highlight.ml-4 {
    margin-left: calc( 100vw / 375 * 4);
  }
}
.usage-flowarea__step-image {
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-image {
    margin-bottom: calc( 100vw / 1180 * 8);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-image {
    margin-bottom: calc( 100vw / 375 * 8);
  }
}
.usage-flowarea__step-image img {
  height: auto;
  width: 100%;
}
.usage-flowarea__step-image img.usage-flowarea__step-image-1 {
  max-width: 175px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-image img.usage-flowarea__step-image-1 {
    max-width: calc( 100vw / 1180 * 175);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-image img.usage-flowarea__step-image-1 {
    max-width: calc( 100vw / 375 * 175);
  }
}
.usage-flowarea__step-image img.usage-flowarea__step-image-2 {
  max-width: 191px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-image img.usage-flowarea__step-image-2 {
    max-width: calc( 100vw / 1180 * 191);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-image img.usage-flowarea__step-image-2 {
    max-width: calc( 100vw / 375 * 191);
  }
}
.usage-flowarea__step-image img.usage-flowarea__step-image-3 {
  max-width: 327px;
  height: 122px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-image img.usage-flowarea__step-image-3 {
    max-width: calc( 100vw / 1180 * 327);
    height: calc( 100vw / 1180 * 122);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-image img.usage-flowarea__step-image-3 {
    max-width: calc( 100vw / 375 * 327);
    height: calc( 100vw / 375 * 122);
  }
}
.usage-flowarea__step-note {
  font-size: 10px;
  line-height: 1.2;
  color: #555555;
  font-weight: 300;
  margin-top: 8px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__step-note {
    font-size: calc( 100vw / 1180 * 10);
    margin-top: calc( 100vw / 1180 * 8);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__step-note {
    font-size: calc( 100vw / 375 * 10);
    margin-top: calc( 100vw / 375 * 8);
  }
}
.usage-flowarea__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -16px;
  bottom: 78px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__arrow {
    right: calc( 100vw / 1180 * -16);
    bottom: calc( 100vw / 1180 * 78);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__arrow {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc( 100vw / 375 * -36);
  }
}
.usage-flowarea__arrow img {
  height: auto;
  width: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__arrow img {
    width: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__arrow img {
    width: calc( 100vw / 375 * 32);
  }
}
.usage-flowarea__download {
  text-align: center;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__download {
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__download {
    margin-bottom: calc( 100vw / 375 * 32);
  }
}
.usage-flowarea__download-text {
  font-size: 16px;
  line-height: 1.3;
  color: #555555;
  font-weight: 300;
  margin: 0 0 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__download-text {
    font-size: calc( 100vw / 1180 * 16);
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__download-text {
    font-size: calc( 100vw / 375 * 16);
    margin: calc( 100vw / 375 * 14) 0 calc( 100vw / 375 * 16);
  }
}
.usage-flowarea__download-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__download-buttons {
    gap: calc( 100vw / 1180 * 22);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__download-buttons {
    gap: calc( 100vw / 375 * 22);
  }
}
.usage-flowarea__download-button {
  transition: opacity 0.2s;
}
.usage-flowarea__download-button:hover {
  opacity: 0.8;
}
.usage-flowarea__download-button img {
  height: auto;
  width: auto;
}
.usage-flowarea__download-button:first-child img {
  width: 109px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__download-button:first-child img {
    width: calc( 100vw / 1180 * 109);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__download-button:first-child img {
    width: calc( 100vw / 375 * 109);
  }
}
.usage-flowarea__download-button:last-child img {
  width: 135px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__download-button:last-child img {
    width: calc( 100vw / 1180 * 135);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__download-button:last-child img {
    width: calc( 100vw / 375 * 135);
  }
}
.usage-flowarea__about {
  box-sizing: border-box;
  text-align: center;
  max-width: 823px;
  margin: 0 auto;
  padding: 24px 16px;
  border-radius: 16px;
  background-color: #f9f9f9;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__about {
    max-width: calc( 100vw / 1180 * 823);
    padding: calc( 100vw / 1180 * 24) calc( 100vw / 1180 * 16);
    border-radius: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__about {
    max-width: calc( 100vw / 375 * 327);
    padding: calc( 100vw / 375 * 24) calc( 100vw / 375 * 16);
    border-radius: calc( 100vw / 375 * 16);
  }
}
.usage-flowarea__about-heading {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #555555;
  margin: 0 0 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__about-heading {
    font-size: calc( 100vw / 1180 * 16);
    margin-bottom: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__about-heading {
    font-size: calc( 100vw / 375 * 16);
    margin-bottom: calc( 100vw / 375 * 16);
  }
}
.usage-flowarea__about-text {
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
  font-weight: 300;
  margin: 0 0 24px;
  white-space: nowrap;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__about-text {
    font-size: calc( 100vw / 1180 * 14);
    margin-bottom: calc( 100vw / 1180 * 24);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__about-text {
    font-size: calc( 100vw / 375 * 14);
    margin-bottom: calc( 100vw / 375 * 24);
    white-space: normal;
    text-align: left;
  }
}
.usage-flowarea__about-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__about-logos {
    gap: calc( 100vw / 1180 * 16);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__about-logos {
    gap: calc( 100vw / 375 * 12);
  }
}
.usage-flowarea__about-logo {
  height: auto;
}
.usage-flowarea__about-logo.recruit-logo {
  width: 102px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__about-logo.recruit-logo {
    width: calc( 100vw / 1180 * 102);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__about-logo.recruit-logo {
    width: calc( 100vw / 375 * 102);
  }
}
.usage-flowarea__about-logo.mufg-logo {
  width: 86px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__about-logo.mufg-logo {
    width: calc( 100vw / 1180 * 86);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__about-logo.mufg-logo {
    width: calc( 100vw / 375 * 86);
  }
}
.usage-flowarea__about-separator {
  height: 24px;
  width: 2px;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .usage-flowarea__about-separator {
    height: calc( 100vw / 1180 * 24);
    width: calc( 100vw / 1180 * 2);
  }
}
@media screen and (max-width: 767px) {
  .usage-flowarea__about-separator {
    height: calc( 100vw / 375 * 24);
    width: calc( 100vw / 375 * 2);
  }
}

.disclaimer-area {
  background-color: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", "Noto Sans JP", sans-serif;
}
.disclaimer-area__inner {
  max-width: 860px;
  margin: 40px auto;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .disclaimer-area__inner {
    max-width: calc( 100vw / 1180 * 860);
    margin: calc( 100vw / 1180 * 40) auto;
  }
}
@media screen and (max-width: 767px) {
  .disclaimer-area__inner {
    max-width: calc( 100vw / 375 * 327);
    padding: 0 calc( 100vw / 375 * 24);
    margin: 0 auto calc( 100vw / 375 * 40);
  }
}
.disclaimer-area__text {
  font-size: 10px;
  line-height: 1.4;
  color: #555555;
  font-weight: 300;
}
@media screen and (min-width: 768px) and (max-width: 1179px) {
  .disclaimer-area__text {
    font-size: calc( 100vw / 1180 * 10);
  }
}
@media screen and (max-width: 767px) {
  .disclaimer-area__text {
    font-size: calc( 100vw / 375 * 10);
  }
}