@charset "utf-8";

body {
    font-family: "Noto Sans JP", sans-serif,"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, sans-serif;
}

img {
    width: 100%;
    height: auto;
}

.mb_30 {
    margin-bottom: 3.125%
}

.ta-c{
    text-align: center !important;
}

.fs-0{
    font-size: 0 !important;
}

.invisibleTxt {
    display: none;
    font-size: 0;
}

.nolink {
    pointer-events: none;
}
.nolink.disable {
  filter: grayscale(1);
  opacity: 0.5;
}
.wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.txt_main {
  font-size: min(7vw,40px);
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  padding: 3.125%;
  background-color: #E60014;
}

.howto_area {
    position: relative;
    padding: 0;
    background-color: #EBEBEB;
    background-image: url(../img/bg01.png),url(../img/bg02.png);
    background-repeat: no-repeat;
    background-position: right 4%,left 63%;
    background-size: 26%;
}

section {
    padding: 6.2500vw 5vw;
}

@media screen and (min-width: 641px) {
    section {
        padding: 40px 32px;
    }
}
.howto_ttl {
    margin: 0 auto;
    width: 44.063%;
    padding: 5.625% 0;
}

.howto_step_wrap {
    padding-left: 6.25%;
    padding-bottom: 6.5645%;
}

.howto_step_body {
    background-color: #ffffff;
    border-radius: 0 0 0 32px;
}

.howto_step_wrap02 {
    padding-right: 6.25%;
    padding-bottom: 6.5645%;
}

.howto_step_body02 {
    background-color: #ffffff;
    border-radius: 0 0 32px 0;
}

.howto_step>li:not(:last-child) {
    border-bottom: 5px dashed #CFCFCF;
}
.step_wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4.5% 5%;
}
.step_wrap.start {
    align-items: start;
}

.step_wrap .cover {
    position: absolute;
    display: block;
    width: 90%;
    height: 87%;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 24px;
}

.step_wrap .cover::after {
    content: "";
    position: absolute;
    background-image: url(../img/done.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: min(24vw,167px);
    height: min(24vw,167px);
    right: min(3vw,30px);
}

.step_img {
    width: 37.594%;
}
.step_img span {
    display: block;
    width: 50%;
    margin: 0 auto;
}

.step_body {
    width: 54.26%;
    padding: 0 0 0 8.15%;
}

.step_body .step_ttl {
    width: 28.556%;
    padding-bottom: 5.125%;
}
.step_body .txt {
    font-size: 3.3375vw;
}
.step_body .txt02 {
    font-size: 3.1375vw;
}
.step_body .caution {
    font-size: 2.5vw;
}
.step_body .link a {
    position: relative;
    font-size: 3.1375vw;
    font-weight: bold;
    color: #005AE1;
    padding-right: 1.0em;
    border-bottom: 2px solid #005AE1;
}
.step_body .link a::after {
    position: absolute;
    content: "";
    background-image: url('../img/arrow03.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 1em;
    height: 1em;
    top: 50%;
    bottom: 50%;
    margin: auto 0;
}
.step_body .btn01 {
    margin: 5.056% 0;
}
.step_body .btn01 a {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    background-color: #000000;
    padding: 3% 0;
    font-size: 2.5vw;
    font-weight: bold;
    border-radius: 110px;
}
.step_body .btn01 a::after {
    position: absolute;
    content: "";
    background-image: url(../img/arrow01.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 17px;
    height: 17px;
    top: 50%;
    bottom: 50%;
    right: 5%;
    margin: auto 0;
}
.step_body .btn02 {
    margin: 5.056% 0;
}
.step_body .btn02 a {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    background-color: #E60014;
    padding: 6% 0;
    font-size: 2.5vw;
    font-weight: bold;
    border-radius: 110px;
}
.step_body .btn02 a::after {
    position: absolute;
    content: "";
    background-image: url(../img/arrow02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 17px;
    height: 17px;
    top: 50%;
    bottom: 50%;
    right: 5%;
    margin: auto 0;
}

.code {
    padding: 3% 0 4.5%;
    max-width: 227px;
    margin: 0 auto;
}

.code_ttl {
    font-size: 4.08125vw;
    font-weight: bold;
    text-align: center;
    background-color: #e6effc;
    color: #005AE1;
    padding: 1% 0;
}

.code_arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 2vw solid transparent;
    border-left: 2vw solid transparent;
    border-top: 2.2vw solid #005AE1;
    border-bottom: 0;
    margin: 0 0.5em;
}

.code input {
    border: 1px solid #515151;
    width: 100%;
    font-size: 5.2vw;
    padding: 0.25em;
    box-sizing: border-box;
}

.step_btn_area  {
    padding: 0 5% 4.5%;
    margin: 0 auto;
    max-width: 256px;
}
.step_btn_area .btn03 {
    margin: 5.056% 0;
}
.step_btn_area .btn03 a {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    background-color: #E60014;
    padding: 6% 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 110px;
    box-sizing: border-box;
}
.step_btn_area .btn03.is-disabled a {
    background-color: #333333;
    pointer-events: none;
}
.step_btn_area .btn03 a::after {
    position: absolute;
    content: "";
    background-image: url(../img/arrow02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 17px;
    height: 17px;
    top: 50%;
    bottom: 50%;
    right: 5%;
    margin: auto 0;
}

.step_btn_area .btn04 {
    margin: 5.056% 0;
}
.step_btn_area .btn04 a {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #E60014;
    background-color: #ffffff;
    border: 2px solid #E60014;
    padding: 5% 0;
    font-size: 2.5vw;
    font-weight: bold;
    border-radius: 110px;
    box-sizing: border-box;
}

.arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: min(50vw,320px) solid transparent;
    border-left: min(50vw,320px) solid transparent;
    border-top: min(16vw,100px) solid #EBEBEB;
    border-bottom: 0;
}

.howto_img01 {
    padding: 7.25% 4.22%;
}


@media screen and (min-width: 641px) {
    .step_body .txt {
        font-size: 22px;
    }
    .step_body .txt02 {
        font-size: 20px;
    }
    .step_body .caution {
        font-size: 16px;
    }
    .step_body .link a {
        font-size: 20px;
    }
    .step_body .btn01 a {
        font-size: 16px;
    }
    .step_body .btn02 a {
        font-size: 16px;
    }
    .step_btn_area .btn03 a {
        font-size: 16px;
    }
  .step_btn_area .btn03 a::after {
      width: 17px;
      height: 17px;
  }
    .step_btn_area .btn04 a {
        font-size: 16px;
    }
    .code input {
        font-size: 34px;
    }

    .code_ttl {
      font-size: 26px;
    }

    .code_arrow {
      border-right: 14px solid transparent;
      border-left: 14px solid transparent;
      border-top: 16px solid #005AE1;
    }
}

.sec_step {
  background-color: #EBEBEB !important;
  padding: 6.2500vw 5vw 10.6250vw;
}

.sec_step h2 {
  width: 70% !important;
  max-width: 384px;
  margin: 0 auto;
}

.campaign-link-wrap{
  margin-top: 30px;
  margin-bottom: 30px;
}
.campaign-link-wrap p:first-child{
    margin-bottom: 1.0em;
}

.campaign-link-wrap a{
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #0000ee;
    font-size: 3.7500vw;
}

.slide_content{
  padding: 0 10.1563vw !important;
}







@media screen and (min-width: 641px) {
  .slide_content {
      padding: 0 65px !important;
  }
    .campaign-link-wrap a{
        font-size: 24px;
    }

}

.dpoint_slide{
  padding: 6.2500vw 10.1563vw !important;
}

@media screen and (min-width: 641px) {
  .dpoint_slide{
    padding: 40px 65px !important;
  }
}

#campaign-dpoint,#campaign-dharai{
  scroll-margin-top: 80px;
}

.wave-text span,.wave-text02 span {
  display: inline-block;
  font-size: 5vw !important;
  transform: translateY(0);
  font-weight: bold;
}
@media screen and (min-width: 641px) {
  .wave-text span,.wave-text02 span {
    font-size: 30px !important;
    font-weight: bold;
  }
}
.wave-text02{
  margin-top: 60px;
}

@media screen and (min-width: 641px) {
  .step .step_inner02 img {
      width: 34.272% !important;
  }
}

.step {
  position: relative;
  margin: 11.7188vw auto 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 3.1250vw 5.0000vw 3.9063vw;
  background-color: #FFFFFF;
}

.step .stepNum {
  position: absolute;
  top: -8vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 13.2813vw;
}

.step .step_inner {
  background-color: #F9F9F9;
}

.step .step_inner img {
  width: 58.7500vw;
  height: auto;
  display: block;
  background-color: #F9F9F9;
  margin: 0 auto;
  padding-top: 6.2500vw;
  padding-bottom: 2.3438vw;
}

.step .step_inner02 img{
  width: 28.9484vw;
  height: auto;
}

.step.step_single_screen .step_inner img {
  width: 36.7188vw;
}

.step .step_inner .note {
  font-size: 3.1250vw;
  padding-bottom: 4.6875vw;
  text-align: center;
}

.sec_step .text {
    padding-top: 3.4375vw;
    text-align: left;
    
    font-size: 3.7500vw;
}

.sec_step .text a {
  text-decoration: underline;
  color: #0B98D8;
}

.sec_step .note {
  text-align: left;
}

@media screen and (min-width: 641px) {
  .sec_step {
    padding: 40px 32px 68px;
  }

  .step {
    margin: 75px auto 0;
    padding: 20px 32px 25px;
  }

  .step .stepNum {
    top: -51px;
    width: 85px;
  }

  .step .step_inner img {
    width: 376px;
    padding-top: 40px;
    padding-bottom: 15px;
  }

  .step.step_single_screen .step_inner img {
    width: 235px;
  }

  .step .step_inner .note {
    font-size: 14px;
    padding-bottom: 30px;
  }

  .sec_step .text {
    font-size: 24px;
    padding-top: 22px;
  }
}
@media screen and (max-width: 640px) {
  .step.step_single_screen .step_inner img {
    width: 28.7648vw;
  }
  .step .step_inner02 img{
    width:30.9484vw;
    padding-top: 4.085vw;
    padding-bottom: 1.3438vw;
  }
}

@media screen and (min-width: 641px) {
  .sec_step h2 {
    font-size: 35px;
  }

  .step .stepNum {
    top: -49px;
    width: 85px;
  }

  .step .step_inner img {
    width: 70%;
  }
  .step .step_inner02 img {
    width: 34.5%;
  }

  .step.step_single_screen .step_inner img {
    width: 34%;
  }
}

/* 20251218 追加バナー用 */
section.inc_banner {
  padding-top: 3.125vw;
}

@media screen and (min-width: 641px) {
  section.inc_banner {
    padding-top: 20px;
  }
}

/*2026-02-18*/

.sec_content_btn {
  position: relative;
  background-color: rgb(51, 51, 51);
  color: rgb(255, 255, 255);
  max-width: 376px;
  width: 60.044%;
  font-size: 3.28125vw;
  font-weight: bold;
  margin: 0px auto 5.125%;
  border-radius: 60px;
}

.sec_content_btn span {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 3.28125vw;
  font-weight: bold;
  text-align: center;
  padding: 0.5em 0px;
}

@media screen and (min-width: 641px) {
  .sec_content_btn span {
      font-size: 26px;
  }
}

.sec_content_bnr_list {
  display: flex;
  width: 100%;
  overflow-x: scroll;
}

.sec_content_bnr_list li {
  flex-shrink: 0;
  width: 100%;
}

.sec_content_bnr_list li:last-child {
  width: 62.5%;
}

.sec_content_bnr_list li:not(:last-child) {
  margin-right: 3.125%;
}


.slide {
  width: 80.0000vw;
  margin: 0 auto;
  margin-top: 4.6875vw;
  box-shadow: 0 0 2.8125vw 0 rgba(0, 63, 152, 0.12);
  border-radius: 3.1250vw;
  overflow: hidden;
}

.slide_content {
  padding: 6.2500vw 10.1563vw;
}

.slide_content .slick-list {
  margin: 0 -1.5625vw;
}

.slide_content .slick-slide {
  margin: 0 1.5625vw;
}

.slick-arrow {
  z-index: 1 !important;
}

.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background: none;
  border: none;
  width: 3.7500vw;
  height: 6.5625vw;
  cursor: pointer;
  background: url('../img/arrow.png') no-repeat center center / contain !important;
}

.slick-prev {
  left: -7.5000vw;
}

.slick-next {
  right: -7.5000vw;
  transform: translateY(-50%) scaleX(-1);
}

.slick-prev:before,
.slick-next:before {
  content: '';
}

@media screen and (min-width: 641px) {
  .sec_kanryo {
    padding-bottom: 25px;
    margin-top: -20px;
  }

  .sec_kanryo>img {
    width: 640px;
    margin-left: -32px;
  }

  .sec_kanryo>p {
    font-size: 28px;
    margin-top: 63px;
  }

  .slide {
    width: 512px;
    margin-top: 30px;
    box-shadow: 0 0 18px 0 rgba(0, 63, 152, 0.12);
    border-radius: 20px;
  }

  .slide_content {
    padding: 40px 65px;
  }

  .slide_content .slick-list {
    margin: 0 -10px;
  }

  .slide_content .slick-slide {
    margin: 0 10px;
  }

  .slick-prev,
  .slick-next {
    width: 24px;
    height: 42px;
  }

  .slick-prev {
    left: -48px;
  }

  .slick-next {
    right: -48px;
  }
}


/* ご注意事項 */
.cpNotes {
  margin: 0 auto;
}

.cpNotesBtnWrap {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.cpNotesBtnWrap {
  position: relative;
  padding-bottom: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0px -3px 0px 0px #d00e31 inset;
  box-shadow: 0px -3px 0px 0px #d00e31 inset;
  border: 2px solid #D00E31;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #fff;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.cpNotesBtnWrap.shadowJs {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 3px 3px 0 0;
}

.cpNotesBtn {
  display: table;
  width: 100%;
}

.cpNotesBtn a {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.cpNotesFlame {
  display: none;
  border-left: 2px solid #D00E31;
  border-right: 2px solid #D00E31;
  border-bottom: 2px solid #D00E31;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
}

.cpNotesList {
  padding: 10px;
  font-size: 12px;
  text-align: left;
}

.cpNotesSubttl {
  margin-top: 1em;
}

.cpNotesCaution {
  padding-left: 1.0em;
  text-indent: -1.0em;
}
.cpNotesCaution2 {
  padding-left: 2.35em;
  text-indent: -1.35em;
}
.cpNotesCaution3 {
  padding-left: 1.65em;
  text-indent: -1.65em;
}

.cpNotesCaution4 {
  padding-left: 4.25em;
  text-indent: -2.6em
}



@media only screen and (min-width: 361px) {
  .cpNotesList {
    padding: 20px;
  }

  .cpNotesList {
    font-size: 14px;
  }

  .cpNotesBtnWrap {
    padding-bottom: 4px;
    -webkit-box-shadow: 0px -4px 0px 0px #d00e31 inset;
    box-shadow: 0px -4px 0px 0px #d00e31 inset;
    border-width: 3px;
  }

  .cpNotesFlame {
    border-width: 3px;
  }
}

@media only screen and (min-width: 641px) {
  .cpNotesBtnWrap {
    padding-bottom: 6px;
    -webkit-box-shadow: 0px -6px 0px 0px #d00e31 inset;
    box-shadow: 0px -6px 0px 0px #d00e31 inset;
  }
}

.txtIndent {
  padding-left: 1em;
  text-indent: -1em;
}

.cpNotesTable table {
  border-spacing: 0;
  gap: 1px;
  padding: 1px;

}

.cpNotesTable th,.cpNotesTable td {
  outline: 1px solid #000000;
  text-align: center;
  padding: 1%;
  width: 14.3%;
  font-size: 10px;
}
.cpNotesTable th {
  background-color: #000000;
  color: #ffffff;
}

.inc_banner02 {
    background-color: #E2E3E9;
    padding-top: 0 !important;
    padding-bottom:20px;
}

.sec_content_txt04.mt18{
  background: #E2E3E9;
  margin:3% auto;
  max-width:100%;
  font-size: 2.7125vw;
  text-align: center;
  font-weight: bold;
}

@media screen and (min-width: 641px) {
  .sec_content_txt04.mt18{
    font-size:18px;
  }
}