@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-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: 972px; 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 { background: url("../image/bg_head_sp.png") no-repeat; background-size: 100% auto; padding: 7% 6% 0 7%; }

@media all and (min-width: 768px) { .l-head .l-inner { height: 1319px; }
  .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: 48px 0 90px 0; height: 1214px; }
  .l-head .l-inner .wrap-head-text .wrap-img { width: 882px; margin:0 auto; } }
	
.l-body{ width: 100%; margin:0 auto; padding:0 0 100px; background:#000;}
#sec-vol-01 { padding-left: 0; background: url("../image/bg_sec_vol_01_sp.png") no-repeat; background-size:100%; height:auto; }
#area-registration-01 { margin:20px 0 0; background: url("../image/bg_registration_01_sp.png") no-repeat; background-size:100%; height:auto; }
#area-registration-02 { margin:30px 0 0; background: url("../image/bg_registration_02_sp.png") no-repeat; background-size:100%; height:auto; }

.middle-wrap{background: url("../image/bg_middle_sp.png"); background-repeat: no-repeat; background-size: 100%;}
.entry-wrap{background: url("../image/bg_entry_sp.png"); background-repeat: no-repeat; background-size: 100%;}
.bottom-wrap{background: url("../image/bg_bottom_sp.png"); background-repeat: no-repeat;}
.registration_wrap{background: url("../image/bg_registration_sp.png"); background-repeat: no-repeat; background-size:100%;}

@media all and (min-width: 768px) { .l-body{ width: 972px;}}

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

@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: 364px; } }

@media all and (min-width: 768px) { #sec-kanpen-info { background: none; } }

@media all and (min-width: 768px) { #sec-guide-01 { background: none; } }

@media all and (min-width: 768px) { #sec-guide-02 { background: none; } }

@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: 0; background: #F2F2F2; }

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

@media all and (min-width: 768px) { .l-foot { margin-top: 0px; }
  .l-foot .l-inner { padding: 25px 0 50px 0; } }
	
@media all and (min-width: 768px) { .middle-wrap{background: url("../image/bg_middle_pc.png"); background-repeat: no-repeat;} }

@media all and (min-width: 768px) {.entry-wrap{background: url("../image/bg_entry_pc.png"); background-repeat: no-repeat;} }


/* ============= 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: 6%; display: block; }

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

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

@media all and (min-width: 768px) { #sec-vol-01 .wrap-head-text { width:780px; margin:0 auto; padding: 60px 0 20px 0; }
  #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-item { width: 864px; margin: 30px auto 0; padding: 0; 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: 864px; padding-right: 0; margin-right: 15px; }
  #sec-vol-01 .list-item li .wrap-img.type-B { width: 864px; padding: 0 0 140px; 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; } }


#area-registration-01 .list-btn { padding: 18% 10%; }

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

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

#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 { width:826px; margin:0 auto; padding: 36px 0 0; }
	#area-registration-01 .list-btn li {display:inline-block;}
  #area-registration-01 .list-btn li p.txt-registration { width: 394px; padding: 0; margin: 0 auto; }
  #area-registration-01 .list-btn li p.txt-login { padding: 0; width: 394px; }
	#area-registration-01 .list-btn li:first-child { margin:0 20px 0 0; width: 394px;}
  #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; }
}


#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; } }



#sec-kanpen-info .wrap-head-text { padding: 13% 3% 0 3%; }

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

@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 { width:auto; font-size: 4.0vw; line-height: calc(1.4em + 1.0vw); padding: 0 30%; 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 { width:100%; margin: 0 0 0 5%; /*padding:0 20%;*/ 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; font-weight:normal; }

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

@media all and (min-width: 768px) { #sec-kanpen-info .wrap-head-text { width: 600px; margin: 0 auto; padding: 130px 0 0 0; }
  #sec-kanpen-info .list-info { color: #fff; margin-top: 30px; padding: 0 0 0 180px; 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: 700px; 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 245px 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-kanpen-info .list-apply { width: 100%; margin: 0; padding-right: 200px; text-align: left; list-style: none; font-size: 18px; }	
	}

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

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

#sec-guide-01 .list-step li.step-01{ width: 90%; margin: 25px auto 0; padding: 12% 0 15%; background: url("../image/bg_guide_01_sp.png"); background-repeat: no-repeat; background-size:100%; }

#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 7%; }

#sec-guide-01 .list-step li.step-02{ width: 90%; margin: 0 auto; padding: 12% 0 19%; background: url("../image/bg_guide_02_sp.png"); background-repeat: no-repeat; background-size:100%; }

#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 7%; }

#sec-guide-01 .list-step li.step-03{ width: 90%; margin: 0 auto; padding: 12% 0 9%; background: url("../image/bg_guide_03_sp.png"); background-repeat: no-repeat; background-size:100%; }

#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 7%; }

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

@media all and (min-width: 768px) { #sec-guide-01 .wrap-head-text { width:600px; padding: 50px 0 0 0; margin:0 auto; }
	#sec-guide-01 .list-step li.step-01{ width:598px; margin:30px auto 0; padding:55px 0 86px; background: url("../image/bg_guide_01_pc.png"); background-repeat: no-repeat; }
  /*#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: 0 auto; width: 420px; }
  #sec-guide-01 .list-step li.step-01 .wrap-btn { padding: 0; margin: 30px auto 0; width: 414px; }
	#sec-guide-01 .list-step li.step-02{ width:598px; padding:60px 0 86px; background: url("../image/bg_guide_02_pc.png"); background-repeat: no-repeat; }
  #sec-guide-01 .list-step li.step-02 .txt-label { padding: 0; margin: 0 auto; width: 471px; }
  #sec-guide-01 .list-step li.step-02 .wrap-btn { padding: 0; margin: 20px auto 0; width: 414px; }
	#sec-guide-01 .list-step li.step-03{ width:598px; padding:60px 0 55px; background: url("../image/bg_guide_03_pc.png"); background-repeat: no-repeat; }
  #sec-guide-01 .list-step li.step-03 .txt-label { padding: 0; margin: 0 auto; width: 407px; }
  #sec-guide-01 .list-step li.step-03 .wrap-btn { padding: 0; margin: 20px auto 0; width: 414px; }
  #sec-guide-01 .list-note { margin: 0 auto; padding: 0; width: 503px; } }



#sec-guide-02 .wrap-head-text { padding: 13% 3% 3% 3%; }

#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: #fff; }

#sec-guide-02 .list-step-sp .slick-next.slick-disabled { display: none !important; }

#sec-guide-02 .list-step-sp .slick-next:before { content: ""; display: block; height: 16px; width: 16px; border-width: 3px 3px 0 0; border-color: #000; 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: #fff; }

#sec-guide-02 .list-step-sp .slick-prev.slick-disabled { display: none !important; }

#sec-guide-02 .list-step-sp .slick-prev:before { content: ""; display: block; height: 16px; width: 16px; border-width: 3px 3px 0 0; border-color: #000; 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 { width:600px; padding: 86px 0 0 0; margin:0 auto;  }
  #sec-guide-02 .list-step-pc { margin-top: 30px; }
  #sec-guide-02 .list-step-pc .step-01 { margin-left: 73px; margin-top: 0px; }
  #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: 0px; }
  #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: 0px; }
  #sec-guide-02 .list-step-pc .step-03 .wrap-img { width: 370px; }
  #sec-guide-02 .slide .slick-prev { display: none; }
  #sec-guide-02 .slide .slick-next { right: 7px; width: 60px; height: 60px; border-radius: 50%; background: #fff; }
  #sec-guide-02 .slide .slick-next.slick-disabled { display:none !important;}
  #sec-guide-02 .slide .slick-next:before { content: ""; display: block; height: 25px; width: 25px; border-width: 5px 5px 0 0; border-color: #000; border-style: solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 12px; }
  #sec-guide-02 .slide .slick-prev { left: 7px; width: 60px; height: 60px; border-radius: 50%; background: #fff; z-index: 7; }
  #sec-guide-02 .slide .slick-prev.slick-disabled { display:none !important; }
  #sec-guide-02 .slide .slick-prev:before { content: ""; display: block; height: 25px; width: 25px; border-width: 5px 5px 0 0; border-color: #000; border-style: solid; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); margin-left: 22px; } }




#area-registration-02 .list-btn { padding: 18% 10% 30%; }

#area-registration-02 .list-btn li p.txt-registration { padding: 0 7%; }

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

#area-registration-02 .list-btn li p.txt-vote { padding: 0 7%; }

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

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

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

@media all and (min-width: 768px) { #area-registration-02 .list-btn { width:856px; padding: 100px 0 98px; margin:0 auto;}
	#area-registration-02 .list-btn li:first-child{ width: 395px; margin:0 auto;}
	#area-registration-02 .list-btn li:nth-child(2){ width: 415px; margin:30px 20px 0 0; display:inline-block;}
	#area-registration-02 .list-btn li:nth-child(3){ width: 415px; margin:30px 0 0 0; display:inline-block;}
	
  #area-registration-02 .list-btn li p.txt-registration { margin:0; padding: 0; }
  #area-registration-02 .list-btn li p.txt-login { margin:0; padding: 0; }
  #area-registration-02 .list-btn li p:last-child { margin-top: 13px; }
  #area-registration-02 .list-btn li p:last-child.wrap-img { padding: 0; }
  #area-registration-02 .list-btn li + li { margin-top: 73px; }
	#area-registration-02 .list-btn li p.txt-vote { padding:0;} }


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

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

#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: 458px; 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: #fff; padding: 3% 0; font-size: 6vw; text-align: center; font-weight: normal; color:#fff; }

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

#area-qa .list-info .list-waring li { margin-top: 2%; color: #fff; 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; color:#fff; }

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

@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: #fff; padding: 5px 0; font-size: 24px; text-align: center; font-weight: normal; color:#fff; }
  #area-qa .list-info dd { padding-top: 10px; }
  #area-qa .list-info .list-waring li { margin-top: 5px; font-size: 15px; color: #fff; }
  #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; background: #fff; } }

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

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