@charset "utf-8";

html{font-size:62.5%;}
body{overflow-x:hidden;-webkit-text-size-adjust:100%;font-size:100%;font-family:'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ','Meiryo','ＭＳ ゴシック',sans-serif;}
body *{box-sizing:border-box;}
html,body{height:100%;}
img{-webkit-backface-visibility:hidden;backface-visibility:hidden;max-width: 100%;height: auto;vertical-align: middle;}

.fadeItem{opacity:0;-webkit-transition:all 1s ease-out;transition:all 1s ease-out;-webkit-transform:translateY(30px);transform:translateY(30px);}
.fadeItem.active{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}

@media print,screen and (min-width:768px){
    .sp {
      display: none;
    }
    .inner {
       max-width: 1020px;
       padding: 100px 0;
       margin: 0 auto;
    }
    h2 {
      font-size: 40px;
      font-weight: bold;
      text-align: center;
    }
    ul {
      list-style: none;
    }
    /**/
    .mainv .inner{
      padding: 50px 0 0px;
    }
    .mainv {
      background: url("/system/files/landing/debit//img/bg_mvpc_1.jpg") no-repeat center;
      height: 640px;
    }
    .mainv h1 {
      margin-bottom: 75px;
      text-align: center;
    }
    .mainv h2{
      color: #00458f;
      margin-bottom: 30px;
    }
    .mainv p{
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      color: #00458f;
      line-height: 40px;
    }
    
    /**/
    .cont1 .inner{
      padding-top: 55px;
    }
    .cont1{
      background: linear-gradient(to right, #22bef0, #126ddd);
    }
    .cont1 h2{
      color: #FFF;
      margin-bottom: 55px;
    }
    .cont1 h2 + div{
      background: #e9f6fd;
      border-radius: 5px;
      color: #00458f;
      padding: 20px;
    }
    .cont1 div ul{
      padding: 30px;
      font-size: 0;
    }
    .cont1 div ul li{
      font-size: 18px;
      font-weight: bold;
      display: inline-block;
      width: 25%;
      text-align: center;
      box-sizing: border-box;
    }
    .cont1 div ul li:nth-of-type(n+6){
      margin-top: 25px;
    }
    .cont1 div p{
      font-size: 12.6px;
      text-align: right;
    }
    
    /**/
    .cont2{
       background: url("/system/files/landing/debit//img/bg_cont2pc_2.jpg") no-repeat top, url("/system/files/landing/debit//img/bg_cont2pc_1.gif") repeat-y top;
       background-size: 100% auto;
       border-bottom: solid 1px #bdd4e6;
    }
    .cont2 h2 > img{
      display: block;
      margin: 0 auto;
      margin-bottom: 25px;
    }
    .cont2 h2{
      color: #00458f;
      margin-bottom: 100px;
    }
    /**/ 
    .cont2 .member{
      float: left;
      width: 45%;
    }
    .cont2 .nonMember{
      float: right;
      width: 45%;
    }
    .cont2 .member h3,
    .cont2 .nonMember h3{
      font-size: 26px;
      font-weight: bold;
      text-align: center;
      width: 100%;
      padding: 35px 0;
      position: relative;
      margin-bottom: 50px;
    }
    .cont2 .member h3{
      color: #05a001;
    }
    .cont2 .nonMember h3{
      color: #1e0d07;
    }
    .cont2 .member h3::before{
      display: inline-block;
      content: "";
      background: url("/system/files/landing/debit//img/img_bracketsgreen_1.png") no-repeat center;
      background-size: contain;
      width: 16px;
      height: 94px;
      left: 0;
      top: 0;
      position: absolute;
    }
    .cont2 .member h3::after{
      display: inline-block;
      content: "";
      background: url("/system/files/landing/debit//img/img_bracketsgreen_2.png") no-repeat center;
      background-size: contain;
      width: 16px;
      height: 94px;
      right: 0;
      top: 0;
      position: absolute;
    }
    .cont2 .nonMember h3::before{
      display: inline-block;
      content: "";
      background: url("/system/files/landing/debit//img/img_bracketsblack_1.png") no-repeat center;
      background-size: contain;
      width: 16px;
      height: 94px;
      left: 0;
      top: 0;
      position: absolute;
    }
    .cont2 .nonMember h3::after{
      display: inline-block;
      content: "";
      background: url("/system/files/landing/debit//img/img_bracketsblack_2.png") no-repeat center;
      background-size: contain;
      width: 16px;
      height: 94px;
      right: 0;
      top: 0;
      position: absolute;
    }
    .cont2 .member ul li,
    .cont2 .nonMember ul li{
      width: 100%;
      padding: 40px 0;
      background: #FFF;
      border-top: 1px solid #ccdae9;
      position: relative;
      margin-bottom: 50px;
    }
    .cont2 .member ul li img,
    .cont2 .nonMember ul li img{
      position: absolute;
      left: 0px;
      top: -1px;
      width: 60px;
      height: 56px;
    }
    .cont2 .member ul li::after,
    .cont2 .nonMember ul li::after{
      position: absolute;
      content: "";
      background: url("/system/files/landing/debit//img/img_arrow_1.png") no-repeat center;
      background-size:contain;
      width: 100%;
      height: 44px;
      bottom: -44px;
    }
    .cont2 .member ul li p,
    .cont2 .nonMember ul li p{
      text-align: center;
      color: #00458f;
      font-size: 20px;
      line-height: 32px;
      font-weight: bold;
    }
    /**/
    .cont2 .cmnList{
      clear: both;
      content: "";
      display: block;
    }
    .cont2 .cmnList ul li{
      width: 100%;
      padding: 40px 0;
      background: #FFF;
      border-top: 1px solid #ccdae9;
      position: relative;
      margin-bottom: 50px;
    }
    .cont2 .cmnList ul li img{
      position: absolute;
      left: 0px;
      top: -1px;
      width: 60px;
      height: 56px;
    }
    .cont2 .cmnList ul li p{
      text-align: center;
      color: #00458f;
      font-size: 20px;
      line-height: 32px;
      font-weight: bold;
    }
    .cont2 .cmnList ul li em{
      font-style: normal;
      border-bottom: 1px solid #00458f;
    }
    .cont2 .cmnList ul li a{
      position: absolute;
      right: 2.5%;
      top: 40px;
      background: #00458f;
      text-decoration: none;
      display: inline-block;
      color: #FFF;
      font-size: 14px;
      text-align: left;
      padding: 10px 27px 10px 14px;
    }
    .cont2 .cmnList ul li a:hover{
      opacity: 0.7;
    }
    .cont2 .cmnList ul li a::after{
      content: "";
      background: url("/system/files/landing/debit//img/icon_newtab_1.png") no-repeat center;
      background-size: contain;
      width: 10px;
      height: 10px;
      position: absolute;
      right: 10px;
    }
    .cont2 .cmnList ul li:not(:last-of-type)::before{
      position: absolute;
      content: "";
      background: url("/system/files/landing/debit//img/img_arrow_1.png") no-repeat center;
      background-size:contain;
      width: 45%;
      height: 44px;
      bottom: -44px;
    }
    .cont2 .cmnList ul li:not(:last-of-type)::after{
      position: absolute;
      content: "";
      background: url("/system/files/landing/debit//img/img_arrow_1.png") no-repeat center;
      background-size:contain;
      width: 45%;
      height: 44px;
      bottom: -44px;
      right: 0;
    }
    /**/
    .btnList{
      font-size: 0;
    }
    .btnList li{
      box-sizing: border-box;
      display: inline-block;
      font-size: 20px;
      font-weight: bold;
      width: 45%;
      text-align: center;
    }
    .btnList li:nth-of-type(2){
      margin-left: 10%;
    }
    .btnList li p{
      margin-bottom: 30px;
      position: relative;
      display: inline-block;
      line-height: 30px;
    }
    .btnList li p::before{
      content: "";
      background: url("/system/files/landing/debit//img/img_slash_1.png");
      width: 30px;
      height: 39px;
      position: absolute;
      left: -30px;
    }
    .btnList li p::after{
      content: "";
      background: url("/system/files/landing/debit//img/img_slash_2.png");
      width: 30px;
      height: 39px;
      position: absolute;
      right: -30px;
    }
    .btnList li a{
      box-sizing: border-box;
      display: inline-block;
      height: 70px;
      width: 100%;
      line-height: 70px;
      vertical-align: middle;
      color: #FFF;
      text-decoration: none;
      position: relative;
    transition: 0.2s;
    }
    .btnList li a:hover{
      opacity: 0.7;
    }
    .btnList li:nth-of-type(1) a{
      background: #00a000;
    }
    .btnList li:nth-of-type(2) a{
      background: #212121;
    }
    .btnList li a::after{
      content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 20px;
    width: 9px;
    height: 9px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: 0.2s;
    }
    .btnList li a:hover::after{
     -webkit-transform: translateX(2px) rotate(-45deg);
    transform: translateX(2px) rotate(-45deg);
    }
    /**/
    .cont3 h2{
      font-size: 18px;
      font-weight: bold;
      background: linear-gradient(to right, #00458f, #126ddd);
      color: #FFF;
      line-height: 44px;
      margin-bottom: 40px;
    }
    .cont3 ul.notes{
      margin-bottom: 70px;
    }
    .cont3 ul.notes li{
      padding-left:1em;
      text-indent:-1em;
      font-size: 16px;
      line-height: 32px;
      margin-bottom: 10px;
    }

}
@media screen and (min-width:768px) and (max-width:1019px){
  .cont1 h2 {
    font-size: 4.1vw;
  }
  .cont2 h2 {
    font-size: 4.1vw;
    margin-bottom: 10vw;
  }
  .cont2 .member h3,
  .cont2 .nonMember h3{
    font-size: 2.9vw;
  }
  .cont2 .member ul li p,
  .cont2 .nonMember ul li p,
  .cont2 .cmnList ul li p {
    font-size: 2vw;
  }
}
	

@media screen and (max-width:767px){
    ul {
      list-style: none;
    }
    .mainv .inner div {
      padding: 15.33vw 0 16vw;
      background: url("/system/files/landing/debit//img/bg_mvsp_1.jpg") no-repeat center top ;
      background-size: 100% auto;
    }
    .mainv .inner div h2{
      font-size: 8vw;
      font-weight: bold;
      color: #00458f;
      text-align: center;
    }
    .mainv .inner div p{
      font-size: 4.266vw;
      font-weight: bold;
      color: #00458f;
      text-align: center;
      line-height: 8.66vw;
    }
    .cont1 .inner{
      width: 90vw;
      margin: 0 auto;
      padding: 13.33vw 0;
    }
    .cont1{
      background: linear-gradient(to right, #22bef0, #126ddd);
    }
    .cont1 h2{
      color: #FFF;
      text-align: center;
      font-size: 6vw;
      margin-bottom: 11.33vw;
      line-height: 9.2vw;
    }
    .cont1 h2 + div{
      background: #e9f6fd;
      border-radius: 10px;
      color: #00458f;
      padding: 6.66vw 0 4vw;
    }
    .cont1 div ul{
      font-size: 0;
      margin-bottom: 5.33vw;
    }
    .cont1 div ul li{
      font-size: 3.8vw;
      font-weight: bold;
      display: inline-block;
      width: 33%;
      text-align: center;
      box-sizing: border-box;
    }
    .cont1 div ul li:nth-of-type(n+6){
      margin-top: 4vw;
    }
    .cont1 div p{
      font-size: 3.2vw;
      text-align: right;
    }
    /**/
    .cont2 .inner{
      padding-top: 15.6vw;
    }
    .cont2{
      background: url("/system/files/landing/debit//img/bg_cont2sp_2.jpg") no-repeat center top, url("/system/files/landing/debit//img/bg_cont2sp_1.gif") repeat-y center;
      border-bottom: solid 1px #bdd4e6;
      background-size: 100% auto;
    }
    .cont2 h2 > img{
      width: 26.66vw;
      display: block;
      margin: 0 auto;
      margin-bottom: 5.2vw;
    }
    .cont2 h2{
      text-align: center;
      font-size: 6.13vw;
      line-height: 9.33vw;
      color: #00458f;
      margin-bottom: 10.66vw;
    }
    /**/ 
    .cont2 .nonMember {
       background: url("/system/files/landing/debit//img/bg_cont2sp_3.jpg") no-repeat center top;
       background-size: 100% 100%;
       padding-top: 13.33vw;
    }
    .cont2 .member h3,
    .cont2 .nonMember h3{
      font-size: 5vw;
      font-weight: bold;
      text-align: center;
      width: 89.33vw;
      height: 19.2vw;
      position: relative;
      line-height: 19.2vw;
      margin: 0 auto 8vw;
    }
    .cont2 .member h3{
      color: #05a001;
    }
    .cont2 .nonMember h3{
      color: #1e0d07;
    }
    .cont2 .member h3::before{
      display: inline-block;
      content: "";
      background: url("/system/files/landing/debit//img/img_bracketsgreen_1.png") no-repeat center;
      background-size: contain;
      width: 3.33vw;
      height: 19.2vw;
      left: 0;
      top: 0;
      position: absolute;
    }
    .cont2 .member h3::after{
      display: inline-block;
      content: "";
      background: url("/system/files/landing/debit//img/img_bracketsgreen_2.png") no-repeat center;
      background-size: contain;
      width: 3.33vw;
      height: 19.2vw;
      right: 0;
      top: 0;
      position: absolute;
    }
    .cont2 .nonMember h3::before{
      display: inline-block;
      content: "";
      background: url("/system/files/landing/debit//img/img_bracketsblack_1.png") no-repeat center;
      background-size: contain;
      width: 3.33vw;
      height: 19.2vw;
      left: 0;
      top: 0;
      position: absolute;
    }
    .cont2 .nonMember h3::after{
      display: inline-block;
      content: "";
      background: url("/system/files/landing/debit//img/img_bracketsblack_2.png") no-repeat center;
      background-size: contain;
      width: 3.33vw;
      height: 19.2vw;
      right: 0;
      top: 0;
      position: absolute;
    }
    .cont2 .member ul li,
    .cont2 .nonMember ul li,
    .cont2 .cmnList ul li{
      width: 89.33vw;
      padding: 6.6vw 0;
      background: #FFF;
      border-top: 1px solid #ccdae9;
      position: relative;
      margin: 0 auto 9.33vw;
    }
    .cont2 .member ul li img,
    .cont2 .nonMember ul li img,
    .cont2 .cmnList ul li img{
      position: absolute;
      left: 0px;
      top: -1px;
      width: 12vw;
      height: 11.2vw;
    }
    .cont2 .member ul li::after,
    .cont2 .nonMember ul li::after,
    .cont2 .cmnList ul li:not(:last-of-type)::after{
      position: absolute;
      content: "";
      background: url("/system/files/landing/debit//img/img_arrow_1.png") no-repeat center;
      background-size:contain;
      width: 89.33vw;
      height: 8.8vw;
      bottom: -8.8vw;
    }
    .cont2 .member ul li p,
    .cont2 .nonMember ul li p,
    .cont2 .cmnList ul li p{
      text-align: center;
      color: #00458f;
      font-size: 4.53vw;
      line-height: 7.6vw;
      font-weight: bold;
    }
    /**/
    .cont2 .cmnList ul li em{
      font-style: normal;
      border-bottom: 1px solid #00458f;
    }
    .cont2 .cmnList ul li span{
      display: block;
      text-align: center;
      margin: 0 auto;
    }
    .cont2 .cmnList ul li a{
      position: relative;
      text-align: right;
      margin: 6vw auto 0;
      display: inline-block;
      font-size: 3.7vw;
      background: #00458f;
      text-decoration: none;
      color: #FFF;
      padding: 2.66vw 7.33vw 2.66vw 3.73vw; 
    }
    .cont2 .cmnList ul li a::after{
      content: "";
      background: url("/system/files/landing/debit//img/icon_newtab_1.png") no-repeat center;
      background-size: contain;
      width: 2.6vw;
      height: 2.6vw;
      position: absolute;
      top: 3.1vw;
      right: 2.66vw;
    }
    /**/
    .cont2 .btnList{
      font-size: 0;
    }
    .cont2 .btnList li{
      display: block;
      font-size: 4.26vw;
      font-weight: bold;
      width: 89.33vw;
      text-align: center;
      margin: 0 auto 10.6vw;
    }
    .cont2 .btnList li p{
      margin-bottom: 4vw;
      position: relative;
      display: inline-block;
      line-height: 4.93vw;
    }
    .cont2 .btnList li p::before{
      content: "";
      background: url("/system/files/landing/debit//img/img_slash_1.png") no-repeat center;
      width: 4.4vw;
      height: 4.93vw;
      position: absolute;
      left: -30px;
    }
    .cont2 .btnList li p::after{
      content: "";
      background: url("/system/files/landing/debit//img/img_slash_2.png") no-repeat center;
      width: 4.4vw;
      height: 4.93vw;
      position: absolute;
      right: -30px;
    }
    .cont2 .btnList li a{
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
      padding: 4.66vw 0;
      color: #FFF;
      text-decoration: none;
      position: relative;
    }
    .cont2 .btnList li:nth-of-type(1) a{
      background: #00a000;
    }
    .cont2 .btnList li:nth-of-type(2) a{
      background: #212121;
    }
    .cont2 .btnList li a::after{
      content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 20px;
    width: 9px;
    height: 9px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: 0.2s;
    }
    /**/
    .cont3 .inner{
      padding-top: 13.33vw;
    }
    .cont3 h2{
      font-size: 4.26vw;
      font-weight: bold;
      background: linear-gradient(to right, #00458f, #126ddd);
      color: #FFF;
      padding: 2.66vw;
      width: 92vw;
      margin: 0 auto 8vw;
      text-align: center;
    }
    .cont3 ul.notes{
      margin: 0 auto 13.33vw;
      width: 92vw;
    }
    .cont3 ul.notes li{
      padding-left:1em;
      text-indent:-1em;
      font-size: 3.7vw;
      line-height: 8vw;
      margin-bottom: 1.33vw;
    }
    /**/
    .cont3 .btnList{
      font-size: 0;
    }
    .cont3 .btnList li{
      display: block;
      font-size: 4.26vw;
      font-weight: bold;
      width: 89.33vw;
      text-align: center;
      margin: 0 auto 10.6vw;
    }
    .cont3 .btnList li p{
      margin-bottom: 4vw;
      position: relative;
      display: inline-block;
      line-height: 4.93vw;
    }
    .cont3 .btnList li p::before{
      content: "";
      background: url("/system/files/landing/debit//img/img_slash_1.png") no-repeat center;
      width: 4.4vw;
      height: 4.93vw;
      position: absolute;
      left: -30px;
    }
    .cont3 .btnList li p::after{
      content: "";
      background: url("/system/files/landing/debit//img/img_slash_2.png") no-repeat center;
      width: 4.4vw;
      height: 4.93vw;
      position: absolute;
      right: -30px;
    }
    .cont3 .btnList li a{
      box-sizing: border-box;
      display: inline-block;
      padding: 4.66vw 0;
      width: 100%;
      color: #FFF;
      text-decoration: none;
      position: relative;
      transition: 0.2s;
    }
    .cont3 .btnList li:nth-of-type(1) a{
      background: #00a000;
    }
    .cont3 .btnList li:nth-of-type(2) a{
      background: #212121;
    }
    .cont3 .btnList li a::after{
      content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 20px;
    width: 9px;
    height: 9px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: 0.2s;
    }

}




/* footer
--------------------------------*/
.footer {width: 100%;min-width: 1104px;border-top: 1px solid #656363;background-color: #fff;}
.footer-inner {margin: 0 auto;}
.footer-list {font-size: 0;}
.footer-list > li {display: inline-block;}
.footer-about {border-top: 1px solid #e6e6e6;text-align: center;}
.footer-about > dl {font-size: 1.2rem;}
.footer-about > dl > dt {color: #c00;font-weight: 700;}
.footer > p.coptyright {padding: 15px 0;font-size: 1.2rem;color: #000;background-color: #eee;text-align: center;}

@media screen and (min-width: 768px) {
  /* footer */
  .footer-inner {max-width: 1020px;width: 92%;}
  .footer-list {margin: 32px 0;padding: 0 5.88235%;}
  .footer-list > li {-webkit-box-sizing: content-box;box-sizing: content-box;}
  .footer-list > li:first-child {padding-right: 2.1%;width: 48.3%;}
  .footer-list > li:nth-child(2) {padding-left: 2%;padding-right: 3%;width: 19.5%;border-left: 1px solid #ccc;}
  .footer-list > li:nth-child(3) {padding-left: 2.4%;width: 22.3%;border-left: 1px solid #ccc;}
  .footer-about > dl {margin: 0 auto;padding: 20px 0 24px;width: 100%;line-height: 1.8rem;overflow: hidden;}
}
@media screen and (max-width: 767px) {
/* footer */
.footer {min-width: 0;}
.footer-inner {width: 90%;}
.footer-list {margin: 4.09165% 0;}
.footer-list > li:first-child {width: 50.08183%;}
.footer-list > li:nth-child(2) {width: 24.87725%;}
.footer-list > li:nth-child(3) {width: 25.04092%;}
.footer-about > dl {padding: 2.66667% 0 3.2%;line-height: 1.5rem;}
.footer-about > dl > dd {margin-top: 8px;font-weight: 700;}
.footer-about > dl > dd span {text-decoration: underline;}
}