@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap");
/*transitionの記述を追加*/
*,
::after,
::before {
  box-sizing: inherit;
}

html {
  font-size: 3.125vw;
}
@media (min-width: 960px) {
  html {
    font-size: 62.5%;
  }
}

body {
  font-size: 1.4rem;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  color: #202124;
  letter-spacing: 0.07rem;
  font-weight: 400;
}
@media (min-width: 960px) {
  body {
    font-size: 1.6rem;
  }
}

div {
  box-sizing: border-box;
}

.container {
  width: 95%;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .container {
    max-width: 960px;
  }
}

img {
  border: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: top;
  image-rendering: -webkit-optimize-contrast;
}

p {
  margin: 0;
  line-height: 1.5;
  text-align: justify;
  font-size: 1.2rem;
}
@media (min-width: 960px) {
  p {
    font-size: 1.6rem;
  }
}

p.clamp-p {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}

a {
  color: #00aad3;
  font-weight: 500;
  transition: all 0.2s ease-in;
}

a:hover {
  opacity: 0.85;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.14rem;
  font-weight: 500;
  line-height: 1;
}

header {
  width: 100%;
}

.hero-wrap {
  position: relative;
}
.hero-wrap h1 {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.4rem;
  z-index: -1;
}

.hero-img-sp {
  display: block;
  z-index: 1;
}
@media (min-width: 960px) {
  .hero-img-sp {
    display: none;
  }
}

.hero-img-dt {
  display: none;
}
@media (min-width: 960px) {
  .hero-img-dt {
    display: block;
    z-index: 1;
  }
}

.sec-pre1 {
  position: relative;
  padding-top: 3.2rem;
}
@media (min-width: 960px) {
  .sec-pre1 {
    padding-top: 9rem;
    margin-bottom: 6rem;
  }
}

.h2_mainttl, .h3-flow-ttl.cam2-style, .h2_mainttl.cam2-style {
  background: #00aad3;
  padding-top: 0.6rem;
  padding-bottom: 1rem;
  text-align: center;
  border-radius: 4rem;
  position: relative;
  z-index: 0;
  margin: 0 0 1.4rem;
}
@media (min-width: 960px) {
  .h2_mainttl, .h3-flow-ttl.cam2-style, .h2_mainttl.cam2-style {
    padding-top: 1rem;
    padding-bottom: 1.4rem;
    text-align: left;
  }
}
.h2_mainttl::before, .h3-flow-ttl.cam2-style::before, .h2_mainttl.cam2-style::before {
  content: "";
  background-image: url(/campaign/walletplus_2606/images/h2-cam1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 5.2rem;
  height: 3.6rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: -1;
}
@media (min-width: 960px) {
  .h2_mainttl::before, .h3-flow-ttl.cam2-style::before, .h2_mainttl.cam2-style::before {
    width: 15.2rem;
    height: 10.4rem;
    top: -1rem;
    left: 3.4rem;
  }
}
.h2_mainttl.title_none::before, .h2_mainttl.cam2-style.title_none::before {
  background-image: none;
}

.h2_mainttl.title_none span, .h2_mainttl.cam2-style.title_none span {
  margin-left: 5rem;
}

.h2_mainttl span, .h3-flow-ttl.cam2-style span, .h2_mainttl.cam2-style span {
  color: #fff;
  font-size: 1.4rem;
}
@media (min-width: 960px) {
  .h2_mainttl span, .h3-flow-ttl.cam2-style span, .h2_mainttl.cam2-style span {
    font-size: 2.2rem;
    display: block;
    margin-left: 22rem;
  }
  .h2_mainttl span br, .h3-flow-ttl.cam2-style span br, .h2_mainttl.cam2-style span br {
    display: none;
  }
}

.p-desk {
  padding: 0 0.8rem;
  font-weight: 500;
}
.p-desk br {
  display: block;
}
@media (min-width: 960px) {
  .p-desk {
    font-size: 2.5rem;
    padding: 1rem 3.2rem;
  }
  .p-desk br {
    display: none;
  }
}

.flex-detail, .flex-detail_2col {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  margin: 1.4rem 0;
}
@media (min-width: 960px) {
  .flex-detail {
    justify-content: space-between;
    margin: 4.8rem 0;
  }
  .flex-detail_2col {
    justify-content: normal;
    margin: 4.8rem 0;
    gap: 1.2rem;
  }
}

.f-detail-item {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 2.8rem 2.4rem 2.4rem;
  background: #00aad3;
  color: #fff;
  border-radius: 0.4rem;
  margin-bottom: 1.8rem;
}
.f-detail-item img {
  position: absolute;
  top: -1.2rem;
  right: 1rem;
  width: 5.2rem;
}
.f-detail-item_pd {
}
@media (min-width: 960px) {
  .f-detail-item img {
    top: -4rem;
    right: initial;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 12.4rem;
  }
  .f-detail-item_pd {
    padding: 5.4rem 1.4rem 4rem !important;
  }
}
.f-detail-item p {
  font-size: 1.8rem;
  font-weight: 500;
}
@media (min-width: 960px) {
  .f-detail-item {
    width: 32.4%;
    padding: 5.4rem 4rem 4rem;
  }
}

.f-d-step1::after, .f-d-step2::after {
  content: "";
  background-image: url(/campaign/walletplus_2606/images/pink-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  position: absolute;
  bottom: -2.46rem;
  left: 50%;
  width: 3.2rem;
  height: 2.5rem;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 1;
}
@media (min-width: 960px) {
  .f-d-step1::after, .f-d-step2::after {
    top: 50%;
    bottom: initial;
    left: initial;
    right: -2.79rem;
    transform: translateY(-50%);
    transform: rotate(-90deg);
  }
}

@media (min-width: 960px) {
  .f-detail-item .btn-gray, .f-detail-item .entry-btn {
    display: none;
  }
}

.dl-qr-cam1-1 {
  display: none;
}
@media (min-width: 960px) {
  .dl-qr-cam1-1 {
    display: block;
    background: url(/campaign/walletplus_2606/images/qr-cam2-entry.png) no-repeat;
    background-position: center;
    background-size: contain;
    width: 8.4rem;
    height: 8.4rem;
    margin: 1.6rem auto 0;
  }
}

.btn-gray, .entry-btn {
  position: relative;
  display: block;
  margin: 1.6rem auto 0;
  background: #fff;
  border: solid 0.2rem #cdcdcd;
  border-radius: 0.8rem;
  color: #202124;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  padding: 1rem;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  line-height: 1;
}
.btn-gray span::after, .entry-btn span::after {
  content: "";
  background-image: url(/other/campaign/walletplus_2312/images/shortcut.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: bottom;
  margin-left: 0.8rem;
}
@media (min-width: 960px) {
  .btn-gray span::after, .entry-btn span::after {
    width: 1.6rem;
    height: 1.6rem;
  }
}

.pre-box {
  position: relative;
  border: solid 0.2rem #00aad3;
  background: #fff;
  padding: 4.8rem 1.6rem 1.6rem;
  border-radius: 0.8rem;
}
.pre-box .btn-gray, .pre-box .entry-btn, .sec-flow .btn-gray {
  margin: 0 0 1.6rem;
}
@media (min-width: 960px) {
  .pre-box .btn-gray, .pre-box .entry-btn, .sec-flow .btn-gray {
    padding: 1.4rem;
    font-size: 1.8rem;
  }
}
.pre-box p {
  text-align: center;
  font-weight: 600;
}
@media (min-width: 960px) {
  .pre-box {
    display: flex;
    justify-content: space-between;
    padding: 9.6rem 6.4rem 4.8rem;
    gap: 3.2rem;
  }
}

.pre-box-h3 {
  margin: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: calc(100% - 3.2rem);
}
@media (min-width: 960px) {
  .pre-box-h3 {
    max-width: 52rem;
  }
}

.pre-box-left {
  margin-bottom: 1.6rem;
}
@media (min-width: 960px) {
  .pre-box-left {
    margin-bottom: 0;
    width: 64%;
  }
}

@media (min-width: 960px) {
  .pre-box-right {
    flex: 1s;
  }
}

.sec-pre2 {
  position: relative;
  padding-top: 4rem;
}
@media (min-width: 960px) {
  .sec-pre2 {
    padding-top: 6rem;
  }
}

.cam2-style.h2_mainttl span, .cam2-style.h3-flow-ttl span {
  color: #00aad3;
}
.cam2-style p {
  color: #00aad3;
}

.cam2-style p.prize {
  font-size: 4.0rem;
  text-align: center;
  line-height: 1.3;
}
.cam2-style p.prize span {
  font-size: 4.5rem;
}

.h2_mainttl.cam2-style, .cam2-style.h3-flow-ttl {
  background: #dff1f4;
}
.h2_mainttl.cam2-style::before, .cam2-style.h3-flow-ttl::before {
  background-image: url(/campaign/walletplus_2606/images/h2-cam2.png);
}

.f-detail-item.cam2-style {
  background: #dff1f4;
  border: solid 0.2rem #00aad3;
}

.f-detail-item.cam2-style.white {
  background: #ffffff;
}

.dl-qr-cam2-3 {
  display: none;
  background: url(/campaign/walletplus_2606/images/qr-cam2-entry.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 8.4rem;
  height: 8.4rem;
  margin: 0.8rem auto 0;
}
@media (min-width: 960px) {
  .dl-qr-cam2-3 {
    display: block;
  }
}

.f-d-step1.cam2-style::after, .f-d-step2.cam2-style::after {
  background-image: url(/campaign/walletplus_2606/images/gold-arrow.svg);
}

.f-d-step1.cam2-style.arrow_none::after, .f-d-step2.cam2-style.arrow_none::after {
  background-image: none;
}

.pre-box.cam2-style {
  border: solid 0.2rem #dff1f4;
}

.sec-flow {
  position: relative;
  padding-bottom: 4rem;
}
@media (min-width: 960px) {
  .sec-flow p {
    text-align: center;
  }
}

.h2-flow-ttl {
  text-align: center;
}
.h2-flow-ttl span {
  display: inline-block;
  padding-top: 0.6rem;
  padding-bottom: 0.8rem;
  color: #00aad3;
  font-size: 1.4rem;
}
@media (min-width: 960px) {
  .h2-flow-ttl span {
    font-size: 2rem;
  }
}

.h3-flow-ttl.cam2-style {
  background: #dff1f4;
}

.slider-wrap-1 {
  position: relative;
  margin-bottom: 4rem;
}

.slider-wrap-2 {
  position: relative;
}

.slider-sp {
  display: block;
}
@media (min-width: 960px) {
  .slider-sp {
    display: none;
  }
}

.slider-dt {
  display: none;
}
@media (min-width: 960px) {
  .slider-dt {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }
  .slider-dt::after {
    content: "";
    display: block;
    width: 30%;
  }
}

button.slick-arrow {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 0;
  width: 3rem;
  height: 3rem;
  z-index: 2;
  filter: drop-shadow(0px 4px 1px #f5f5f5);
}

.slick-prev {
  position: absolute;
  top: 65%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.slick-next {
  position: absolute;
  top: 65%;
  right: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.slick-arrow:before {
  content: "" !important;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slick-next:before {
  background: url(/other/campaign/walletplus_2312/images/arrow-next.svg) no-repeat;
  background-size: contain;
  width: 3rem;
}

.slick-prev:before {
  background: url(/other/campaign/walletplus_2312/images/arrow-prev.svg) no-repeat;
  background-size: contain;
  width: 3rem;
}

.slick-disabled {
  display: none !important;
}

.slider-item {
  position: relative;
}
@media (min-width: 960px) {
  .slider-item {
    width: 32%;
    margin-bottom: 4rem;
  }
  .slider-item::after {
    content: "";
    background: url(/other/campaign/walletplus_2312/images/arrow-next.svg) no-repeat;
    background-size: contain;
    width: 3rem;
    height: 4.2rem;
    position: absolute;
    top: 65%;
    right: -8%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  .slider-item:last-child::after {
    content: none;
  }
}
.slider-item p {
  text-align: center;
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.slider-item p .slide-i-pimg {
  display: block;
  margin: 0 auto;
  height: 6.2rem;
  width: auto;
}
.slider-item div .entry-btn {
  width: 60%;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.entry-btn {
  margin: 0;
  color: #009be4;
  font-weight: 600;
  font-size: 1.4rem;
  margin: 1.6rem 0 0;
}

.step-num {
  position: relative;
}
.step-num img {
  margin: 0 auto 1.2rem;
  width: 9rem;
  display: block;
}
@media (min-width: 960px) {
  .step-num img {
    width: 9rem;
  }
}
.step-num .kanryo {
  position: absolute;
  top: 0;
  right: 0;
}
@media (min-width: 960px) {
  .step-num .kanryo {
    top: -1.6rem;
  }
}

.flow-screen-img {
  width: 80%;
  margin: 0 auto;
  display: block;
}

.flow-s-txt {
  display: block;
  font-size: 1rem;
  padding: 0 2rem;
}
@media (min-width: 960px) {
  .flow-s-txt {
    font-size: 1.2rem;
  }
}

.sec-app {
  position: relative;
  background: #eaf6fd;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 960px) {
  .sec-app {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .sec-app p {
    text-align: center;
  }
}

.logo-wrap {
  text-align: center;
  margin-bottom: 2.8rem;
}
.logo-wrap img {
  width: 15.5rem;
}
@media (min-width: 960px) {
  .logo-wrap img {
    width: 31rem;
  }
}

.p-app {
  font-size: 1.4rem;
}

.sec-feature {
  position: relative;
  background: #009be4;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.flex-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.f-item-feature-left {
  width: 60%;
}
@media (min-width: 960px) {
  .f-item-feature-left {
    width: 72%;
    padding: 1rem 4rem 0 0;
  }
}
.f-item-feature-left dl {
  color: #fff;
}
.f-item-feature-left dl dt {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: 0;
}
@media (min-width: 960px) {
  .f-item-feature-left dl dt {
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    margin-top: 2rem;
  }
}
.f-item-feature-left dl dd {
  font-size: 0.9rem;
  padding-bottom: 0.5rem;
  margin: 0 0 0.5rem 0;
  border-bottom: dotted #fff 0.1rem;
}
@media (min-width: 960px) {
  .f-item-feature-left dl dd {
    font-size: 1.4rem;
    padding-bottom: 2rem;
  }
}
.f-item-feature-left dl dd:last-child {
  border-bottom: none;
  margin: 0;
}

.f-item-feature-right {
  position: relative;
  width: 38%;
}
@media (min-width: 960px) {
  .f-item-feature-right {
    width: 25%;
  }
  .f-item-feature-right img {
    position: absolute;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}

.flow1-dt-link {
  display: none;
}
@media (min-width: 960px) {
  .flow1-dt-link {
    display: inline-block;
  }
}

.flow1-sp-link {
  display: inline-block;
}
@media (min-width: 960px) {
  .flow1-sp-link {
    display: none;
  }
}

footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 960px) {
  footer {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.dl-ball {
  position: relative;
  margin: 0 auto 2.8rem;
  padding: 0.7rem 1rem;
  width: 23.6rem;
  color: #fff;
  font-size: 1.4rem;
  background: #009be4;
  text-align: center;
  font-weight: 500;
}

.dl-ball:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #009be4;
}

.qr-wrap {
  display: none;
}
@media (min-width: 960px) {
  .qr-wrap {
    display: block;
    text-align: center;
    margin-bottom: 2.8rem;
  }
  .qr-wrap img {
    display: inline-block;
    width: 25.6rem;
  }
}

.flex-appdlicon {
  display: flex;
  justify-content: center;
}
@media (min-width: 960px) {
  .flex-appdlicon {
    margin-bottom: 4rem;
  }
}

.f-item-apdi {
  width: 40%;
  margin: 0 0.7rem;
}
@media (min-width: 960px) {
  .f-item-apdi {
    width: 26rem;
  }
}

.h4-ftr-ttl {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}
.h4-ftr-ttl::before {
  content: "■";
  margin-right: 0.2rem;
}

.app-desk-wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-desk-wrap ul li {
  position: relative;
  font-size: 1.2rem;
  padding-left: 1.6rem;
  margin-bottom: 0.4rem;
}
.app-desk-wrap ul li:before {
  content: "・";
  position: absolute;
  top: 0;
  left: -0.2rem;
  font-size: 1.5rem;
}
.app-desk-wrap p {
  padding-left: 1.6rem;
}/*# sourceMappingURL=style.css.map */