@charset "UTF-8";
/* sass */
.wrap-img { font-size: 0; }

.wrap-img img { width: 100%; height: inherit; }

@media all and (min-width: 768px) { .wrap-img a { display: block; }
  .wrap-img a:hover { opacity: .8; } }

.l-hide { display: none; }

.sp-hide { display: none; }

@media all and (min-width: 768px) { .sp-hide { display: block; } }

.pc-hide { display: block; }

@media all and (min-width: 768px) { .pc-hide { display: none; } }

/* ============= layout =============*/
#jbk-frame-main { position: absolute; top: 7%; opacity: .9; line-height: 1.5; }

@media all and (min-width: 768px) { #jbk-frame-main { top: 110px; } }

.l-all { background: url("../image/bg_all_sp.png") no-repeat; background-size: 100% auto; background-position: top center; }

@media all and (min-width: 768px) { .l-all { background: #fff; } }

@media all and (min-width: 768px) { .l-inner { width: 980px; margin: 0 auto; } }

.l-head .l-inner .wrap-logo { padding: 2.5% 68.4375% 2.5% 3.125%; }

.l-head .l-inner .wrap-head-text { padding: 11% 16.4% 36.2% 7.1875%; }

@media all and (min-width: 768px) { .l-head .l-inner { height: 870px; }
  .l-head .l-inner .wrap-logo { padding: 19px 50px 21px 50px; height: 105px; }
  .l-head .l-inner .wrap-logo .wrap-img { width: 191px; }
  .l-head .l-inner .wrap-head-text { background: url("../image/bg_head_pc.png") no-repeat; padding: 124px 350px 90px 95px; height: 765px; }
  .l-head .l-inner .wrap-head-text .wrap-img { width: 535px; } }

@media all and (min-width: 768px) { #sec-vol-01 { padding-left: 333px; background: url("../image/bg_sec_vol_01_pc.png") no-repeat; height: 650px; } }

@media all and (min-width: 768px) { #sec-vol-02 { background: url("../image/bg_sec_vol_02_pc.png") no-repeat; height: 840px; } }

@media all and (min-width: 768px) { #area-registration-01 { background: url("../image/bg_registration_01_pc.png") no-repeat; height: 423px; } }

@media all and (min-width: 768px) { #sec-kanpen-info { background: url("../image/bg_sec_kanpen_info_pc.png") no-repeat; height: 825px; } }

@media all and (min-width: 768px) { #sec-guide-01 { background: url("../image/bg_sec_guide_01_pc.png") no-repeat; height: 957px; } }

@media all and (min-width: 768px) { #sec-guide-02 { background: url("../image/bg_sec_guide_02_pc.png") no-repeat; height: 1195px; padding-bottom: 0; } }

@media all and (min-width: 768px) { #area-registration-02 { background: url("../image/bg_registration_02_pc.png"), #fff; background-repeat: no-repeat; } }

.l-foot { margin-top: 40%; background: #F2F2F2; }

.l-foot .l-inner { padding: 5% 0 15% 0; }

@media all and (min-width: 768px) { .l-foot { margin-top: 180px; }
  .l-foot .l-inner { padding: 25px 0 50px 0; } }

/* ============= parts =============*/
#sec-vol-01 .wrap-head-text { padding: 8% 4.21875% 0 4.375%; }

#sec-vol-01 .list-btn { display: block; padding-top: 6%; padding-bottom: 2%; }

#sec-vol-01 .list-btn li { padding-left: 5.15625%; padding-right: 29%; }

#sec-vol-01 .list-btn li + li { padding-top: 7%; }

#sec-vol-01 .list-item { padding-left: 5.15625%; margin-top: 3%; display: block; }

#sec-vol-01 .list-item li .wrap-img.type-A { padding-right: 8.125%; }

#sec-vol-01 .list-item li .wrap-img.type-B { padding-right: 10.15625%; }

#sec-vol-01 .list-item li .wrap-img.type-C { padding-right: 4.6875%; }

#sec-vol-01 .list-item li + li { margin-top: 6.8%; }

@media all and (min-width: 768px) { #sec-vol-01 .wrap-head-text { height: 158px; padding: 16px 160px 0 5px; }
  #sec-vol-01 .wrap-head-text .wrap-img { width: 482px; height: 141px; }
  #sec-vol-01 .list-btn { padding-left: 9px; padding-top: 36px; padding-bottom: 0; }
  #sec-vol-01 .list-btn li { padding: 0; }
  #sec-vol-01 .list-btn li + li { padding-top: 15px; }
  #sec-vol-01 .list-btn .wrap-img { width: 334px; }
  #sec-vol-01 .list-item { margin-top: 15px; padding-left: 0; padding-bottom: 15px; font-size: 0; }
  #sec-vol-01 .list-item li { display: inline-block; vertical-align: top; }
  #sec-vol-01 .list-item li .wrap-img.type-A { width: 198px; padding-right: 0; margin-right: 15px; }
  #sec-vol-01 .list-item li .wrap-img.type-B { width: 191px; padding-right: 0; margin-right: 21px; }
  #sec-vol-01 .list-item li .wrap-img.type-C { width: 190px; padding-right: 0; }
  #sec-vol-01 .list-item li + li { margin-top: 0; } }

#sec-vol-02 .wrap-head-text { padding: 14% 45% 0 5.46875%; }

#sec-vol-02 .list-item { margin-top: 50%; padding-bottom: 24.5%; }

#sec-vol-02 .list-item li { padding: 0 15.625% 0 9.375%; }

#sec-vol-02 .list-item li + li { margin-top: 10%; }

@media all and (min-width: 768px) { #sec-vol-02 .wrap-head-text { padding: 14px 0 0 35px; }
  #sec-vol-02 .wrap-head-text .wrap-img { width: 317px; }
  #sec-vol-02 .list-item { margin-top: 214px; padding-bottom: 0; }
  #sec-vol-02 .list-item li { padding: 0 0 0 60px; }
  #sec-vol-02 .list-item li .wrap-img.type-01 { width: 367px; }
  #sec-vol-02 .list-item li .wrap-img.type-02 { width: 369px; }
  #sec-vol-02 .list-item li + li { margin-top: 60px; } }

#area-registration-01 .list-btn { padding-top: 8%; padding-bottom: 5.25%; }

#area-registration-01 .list-btn li p.txt-registration { padding: 0 27.34375% 0 27%; }

#area-registration-01 .list-btn li p.txt-login { padding: 0 17.1875%; }

#area-registration-01 .list-btn li p:last-child { margin-top: 3.5%; }

#area-registration-01 .list-btn li p:last-child.wrap-img { padding: 0 2.96875%; }

#area-registration-01 .list-btn li + li { margin-top: 7%; }

@media all and (min-width: 768px) { #area-registration-01 .list-btn { padding-top: 55px; padding-left: 470px; padding-bottom: 86px; }
  #area-registration-01 .list-btn li p.txt-registration { margin-left: 105px; padding: 0; width: 218px; }
  #area-registration-01 .list-btn li p.txt-login { margin-left: 57px; padding: 0; width: 315px; }
  #area-registration-01 .list-btn li p:last-child { margin-top: 13px; }
  #area-registration-01 .list-btn li p:last-child.wrap-img { padding: 0; width: 415px; }
  #area-registration-01 .list-btn li + li { margin-top: 73px; } }

#sec-kanpen-info .wrap-head-text { padding: 23% 25.625% 0 25.78125%; }

#sec-kanpen-info .list-info { color: #fff; margin-top: 6%; padding-bottom: 6.9%; padding-left: 7%; padding-right: 7%; text-align: center; }

@media all and (min-width: 667px) { #sec-kanpen-info .list-info { padding-bottom: 5.4%; } }

@media all and (min-width: 736px) { #sec-kanpen-info .list-info { padding-bottom: 1.5%; } }

#sec-kanpen-info .list-info dl { margin-bottom: 8%; }

#sec-kanpen-info .list-info dt { font-size: 3.6vw; line-height: calc(1.4em + 0.5vw); padding: 0 35% 0 34.84375%; font-weight: bold; }

#sec-kanpen-info .list-info dt span { display: block; border-width: 0 1px 0 1px; border-color: #fff; border-style: solid; }

#sec-kanpen-info .list-info dd { margin-top: 3%; font-size: 3.5vw; line-height: calc(1.4em + 0.5vw); font-weight: bold; }

#sec-kanpen-info .list-info dd.sp-mg-7 { padding: 0 7%; }

#sec-kanpen-info .list-info dd.txt-ali-left { text-align: left; }

#sec-kanpen-info .list-type { text-align: left; }

#sec-kanpen-info .list-apply { text-align: left; list-style: none; }

#sec-kanpen-info .list-apply li { padding-left: 1em; position: relative; }

#sec-kanpen-info .list-apply li::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: #fff; top: 0.5em; left: 0.25em; position: absolute; }

#sec-kanpen-info .list-note { text-align: left; }

#sec-kanpen-info .list-note li { padding-left: 1em; position: relative; }

#sec-kanpen-info .list-note li::before { content: "※"; left: 0; position: absolute; }

@media all and (min-width: 768px) { #sec-kanpen-info .wrap-head-text { padding: 51px 0 0 231px; }
  #sec-kanpen-info .wrap-head-text .wrap-img { width: 312px; }
  #sec-kanpen-info .list-info { color: #fff; margin-top: 20px; padding-bottom: 100px; padding-left: 73px; padding-right: 275px; text-align: left; }
  #sec-kanpen-info .list-info dl { margin-bottom: 40px; font-size: 0; display: flex; }
  #sec-kanpen-info .list-info dt { width: 158px; font-size: 21px; letter-spacing: 1.5px; line-height: 1.45; padding: 0; text-align: center; display: flex; justify-content: center; align-content: center; align-items: center; justify-items: center; border-width: 0 1px 0 1px; border-color: #fff; border-style: solid; }
  #sec-kanpen-info .list-info dt span { border: 0; }
  #sec-kanpen-info .list-info dd { width: 474px; margin-top: 0; font-size: 18px; letter-spacing: 0.5px; padding-left: 20px; line-height: 1.45; }
  #sec-kanpen-info .list-info dd.sp-mg-7 { padding: 0 20px; }
  #sec-kanpen-info .list-info dd.txt-ali-left { text-align: left; }
  #sec-kanpen-info .list-type { text-align: left; }
  #sec-kanpen-info .list-type li + li { margin-top: 5px; } }

#sec-guide-01 .wrap-head-text { padding: 20% 36.815% 0 36.815%; }

#sec-guide-01 .list-step li { margin-top: 22%; padding-bottom: 4%; }

#sec-guide-01 .list-step li.step-01 .txt-label { padding: 0 19.375%; }

#sec-guide-01 .list-step li.step-01 .wrap-btn { margin-top: 3%; padding: 0 3.125%; }

#sec-guide-01 .list-step li.step-02 .txt-label { padding: 0 13.2815%; }

#sec-guide-01 .list-step li.step-02 .wrap-btn { margin-top: 3%; padding: 0 3.125%; }

#sec-guide-01 .list-step li.step-03 .txt-label { padding: 0 24.21875%; }

#sec-guide-01 .list-step li.step-03 .wrap-btn { margin-top: 3%; padding: 0 3.125%; }

#sec-guide-01 .list-note { margin-top: 4%; padding: 0 3.125% 29%; }

@media all and (min-width: 768px) { #sec-guide-01 .wrap-head-text { padding: 86px 0 0 645px; }
  #sec-guide-01 .wrap-head-text .wrap-img { width: 168px; }
  #sec-guide-01 .list-step li { margin-top: 25px; padding-bottom: 23px; }
  #sec-guide-01 .list-step li.step-01 .txt-label { padding: 0; margin-left: 588px; width: 285px; }
  #sec-guide-01 .list-step li.step-01 .wrap-btn { margin-top: 20px; padding: 0; margin-left: 525px; width: 414px; }
  #sec-guide-01 .list-step li.step-02 .txt-label { padding: 0; margin-left: 373px; width: 340px; }
  #sec-guide-01 .list-step li.step-02 .wrap-btn { margin-top: 16px; padding: 0; margin-left: 337px; width: 414px; }
  #sec-guide-01 .list-step li.step-03 .txt-label { padding: 0; margin-left: 190px; width: 238px; }
  #sec-guide-01 .list-step li.step-03 .wrap-btn { margin-top: 20px; padding: 0; margin-left: 102px; width: 414px; }
  #sec-guide-01 .list-note { margin-top: 0; padding: 0; margin-left: 43px; width: 521px; } }

#sec-guide-02 .wrap-head-text { padding: 11% 29.53125% 0 29.6875%; }

#sec-guide-02 .list-step-sp { margin-top: 5%; }

#sec-guide-02 .list-step-sp .step-count { padding: 0 23.2815% 0 42%; }

#sec-guide-02 .list-step-sp .step-count.step-last { padding: 0 42%; }

#sec-guide-02 .list-step-sp .step-img { width: 62.5%; display: block; margin: -3% auto 0; }

#sec-guide-02 .list-step-sp .slick-next { right: 3.125%; width: 40px; height: 40px; border-radius: 50%; background: #fe9500; }

#sec-guide-02 .list-step-sp .slick-next.slick-disabled { background: #98907f; }

#sec-guide-02 .list-step-sp .slick-next:before { content: ""; display: block; height: 16px; width: 16px; border-width: 3px 3px 0 0; border-color: #fff; border-style: solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 8px; }

#sec-guide-02 .list-step-sp .slick-prev { z-index: 7; left: 3.125%; width: 40px; height: 40px; border-radius: 50%; background: #fe9500; }

#sec-guide-02 .list-step-sp .slick-prev.slick-disabled { background: #98907f; }

#sec-guide-02 .list-step-sp .slick-prev:before { content: ""; display: block; height: 16px; width: 16px; border-width: 3px 3px 0 0; border-color: #fff; border-style: solid; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); margin-left: 15px; }

@media all and (min-width: 768px) { #sec-guide-02 .wrap-head-text { padding: 171px 0 0 150px; }
  #sec-guide-02 .wrap-head-text .wrap-img { width: 262px; }
  #sec-guide-02 .list-step-pc { margin-top: 30px; }
  #sec-guide-02 .list-step-pc.page-01 { background: url("../image/bg_entry_method_01_pc.png") no-repeat; background-position: 234px 0; background-size: 483px auto; }
  #sec-guide-02 .list-step-pc.page-02 { background: url("../image/bg_entry_method_02_pc.png") no-repeat; background-position: 234px 0; background-size: 483px auto; }
  #sec-guide-02 .list-step-pc .step-01 { margin-left: 93px; margin-top: 73px; }
  #sec-guide-02 .list-step-pc .step-01 .wrap-img { width: 370px; }
  #sec-guide-02 .list-step-pc .step-02 { margin-left: 490px; margin-top: 7px; }
  #sec-guide-02 .list-step-pc .step-02 .wrap-img { width: 370px; }
  #sec-guide-02 .list-step-pc .step-03 { margin-left: 93px; margin-top: 73px; }
  #sec-guide-02 .list-step-pc .step-03 .wrap-img { width: 370px; }
  #sec-guide-02 .list-step-pc .step-04 { margin-left: 490px; margin-top: 30px; }
  #sec-guide-02 .list-step-pc .step-04 .wrap-img { width: 370px; }
  #sec-guide-02 .slide .slick-prev { display: none; }
  #sec-guide-02 .slide .slick-next { right: 18px; width: 60px; height: 60px; border-radius: 50%; background: #fe9500; }
  #sec-guide-02 .slide .slick-next.slick-disabled { background: #98907f; }
  #sec-guide-02 .slide .slick-next:before { content: ""; display: block; height: 25px; width: 25px; border-width: 5px 5px 0 0; border-color: #fff; border-style: solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 12px; }
  #sec-guide-02 .slide .slick-prev { left: 18px; width: 60px; height: 60px; border-radius: 50%; background: #fe9500; z-index: 7; }
  #sec-guide-02 .slide .slick-prev.slick-disabled { background: #98907f; }
  #sec-guide-02 .slide .slick-prev:before { content: ""; display: block; height: 25px; width: 25px; border-width: 5px 5px 0 0; border-color: #fff; border-style: solid; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); margin-left: 22px; } }

#area-registration-02 .list-button-login { padding-top: 42%; }

#area-registration-02 .list-button-login li { margin-bottom: 10%; }

#area-registration-02 .list-button-registration li { margin-bottom: 10%; }

#area-registration-02 .txt-label { padding: 0 25.15625%; }

#area-registration-02 .wrap-btn { padding: 0 3.125%; margin-top: 3%; }

@media all and (min-width: 768px) { #area-registration-02 .list-button-login { padding-top: 25px; padding-left: 283px; }
  #area-registration-02 .list-button-login li { margin-bottom: 50px; }
  #area-registration-02 .list-button-login li .txt-label { margin-left: 50px; margin-bottom: 8px; }
  #area-registration-02 .list-button-registration { font-size: 0; padding-left: 65px; margin-left: -20px; }
  #area-registration-02 .list-button-registration li { display: inline-block; margin-bottom: 25px; padding-left: 20px; }
  #area-registration-02 .list-button-registration li .txt-label { margin-left: 50px; margin-bottom: 12px; }
  #area-registration-02 .txt-label { padding: 0; width: 308px; }
  #area-registration-02 .wrap-btn { padding: 0; margin-top: 0; width: 414px; } }

#area-bank-registration { padding: 0 4.6875%; }

#area-bank-registration .wrap-inner { padding: 4.31%; border: 1px solid #f08300; border-radius: 10px; }

#area-bank-registration .wrap-inner .list-btn { margin-top: 5%; }

@media all and (min-width: 768px) { #area-bank-registration { padding: 25px 0 0 0; }
  #area-bank-registration .wrap-inner { width: 686px; margin: 0 auto; padding: 40px 0; border: 1px solid #f08300; border-radius: 10px; }
  #area-bank-registration .wrap-inner .txt-info { width: 464px; margin: 0 auto; }
  #area-bank-registration .wrap-inner .list-btn { margin-top: 30px; }
  #area-bank-registration .wrap-inner .list-btn li .wrap-img { width: 473px; margin: 0 auto; } }

#area-qa { padding: 10% 7.8125% 0; }

#area-qa .list-info { margin-top: 5%; }

#area-qa .list-info dt { border-width: 1px 0 1px 0; border-style: solid; border-color: #000; padding: 3% 0; font-size: 6vw; text-align: center; font-weight: normal; }

#area-qa .list-info dd { padding-top: 2%; }

#area-qa .list-info .list-waring li { margin-top: 2%; color: #000; padding-left: 1.2em; font-size: 4vw; position: relative; }

#area-qa .list-info .list-waring li::before { content: ""; height: 4vw; width: 4vw; border-radius: 50%; background: #fb7000; top: .1em; left: 0; position: absolute; }

#area-qa .list-info .list-waring .list-sub li { padding-left: 0.5em; }

#area-qa .list-info .list-waring .list-sub li::before { height: 1vw; width: 1vw; top: 0.5em; background: #000; }

@media all and (min-width: 768px) { #area-qa { width: 686px; padding: 90px 0 0 0; margin: 0 auto; }
  #area-qa .list-btn { width: 482px; margin: 0 auto; }
  #area-qa .list-info { margin-top: 22px; }
  #area-qa .list-info dt { border-width: 1px 0 1px 0; border-style: solid; border-color: #000; padding: 5px 0; font-size: 24px; text-align: center; font-weight: normal; }
  #area-qa .list-info dd { padding-top: 10px; }
  #area-qa .list-info .list-waring li { margin-top: 5px; font-size: 15px; }
  #area-qa .list-info .list-waring li::before { height: 15px; width: 15px; }
  #area-qa .list-info .list-waring .list-sub li::before { height: 3px; width: 3px; } }

.txt-copyright { text-align: center; display: block; font-size: 3vw; color: #a6a6a6; }

@media all and (min-width: 768px) { .txt-copyright { font-size: 12px; } }