@charset "UTF-8";

body {}
ul, ol {padding: 0; margin: 0; list-style: none;}
section:not(.wrp_brd) {text-align: center;}
h2 {position: relative; display: inline-block; font-size: 1.875rem; font-weight: bold; letter-spacing: .05em; text-align: center;} 
em {font-style: normal;}
br.pcOnly {display: block;}
br.spOnly {display: none;}

a.btn_regist {
display: block;
width: 460px;
height: 2.9em;
line-height: 2.9;
color: #fff;
font-size: 1.375rem;
font-weight: bold;
letter-spacing: .08em;
background : linear-gradient(180deg, rgba(222, 83, 0, 0.6) 0%, rgba(222, 73, 27, 0.85) 45.04%, rgba(222, 69, 37, 1) 72.33%, rgba(222, 69, 37, 1) 100%);
border-radius : 1.5em;
/*padding-left: .5em;*/
margin: 0 auto;}
/*
a.btn_regist::before {
content: '';
display: inline-block;
width: 38px;
height: 28px;
background-image: ;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
padding-bottom: .2em;
margin-right: .5em;
margin-bottom: .15em;}*/


.mv_wrp {
  width: 100%; height: 330px; margin: 0 auto;
background-color: #fff2bb;
background-attachment: scroll; background-image: url(/themes/images/contents/ekyc-guide/mv-bg.svg);
background-repeat: repeat-x; background-position:center -15px; background-size: inherit;
}

.mv {
  width: 1000px;
  height: 100%;
  color: #333;
  padding: 20px 0;
  margin: 0 auto;
  background-image:
  url(/themes/images/contents/ekyc-guide/mv-ill-left.svg),
  url(/themes/images/contents/ekyc-guide/mv-ill-right.svg);
  background-size:205px auto,200px auto;
  background-position: left bottom,right bottom;
  background-repeat: no-repeat,no-repeat;
  display: flex; flex-direction: column; justify-content:space-around; align-items: center;
}
.mv_lead {font-size: 1.125em; margin: 1em 0 1.5em; text-align: center; font-weight: bold; margin-top: 2em;}
.mv > h1 { font-size: 3em; color: #229925; font-weight: bold; text-align: center; line-height: 1.1;margin-bottom: .35em;}
.mv > h1 span {font-size: .75em;}
.mv > h2 { font-size: 1em; font-weight: normal;}
em.und-line { display: inline-block; border-bottom: 2px #e95504 solid; padding-bottom: .1em;}

.contents {margin: 1rem auto 0px;}
.breadcrumb::before {margin-left: 0;}

section.advantage {padding: 25px 0 60px 0; }
.advantage .lead { position: relative; font-size: 1.75em; font-weight: bold; line-height: 1.7; margin-bottom: 1em; letter-spacing: .08em;}
.advantage .lead::after {
    content: '';
    position: absolute;
    bottom: -.75em;
    left: 50%;
    transform: translateX(-50%);
    width: 5em;
    height: 3px;    
    background-color: #df4525;}
.advantage h3 {padding: 0 1.5em; margin-bottom: .7em; position: relative; font-size: 1.25em; display: inline-block; font-weight: bold;}
.advantage h3::before, .advantage h3::after {
    content: '';
    position: absolute;
    top: 70%;
    display: inline-block;
    width: 1.2em;
    height: 2px;
    background-color: #d34316;}
	
.advantage h3::before {left: 0; transform: rotate(60deg);}
.advantage h3::after {right: 0;transform: rotate(-60deg);}

.ballon {display: inline-block; margin: 1.5em auto .5em;
background-attachment: scroll; background-image: url(/themes/images/contents/ekyc-guide/ballon.svg); background-position: bottom center; background-size: 100% auto; background-repeat: no-repeat; padding: 1em 1.5em;}
.ballon p { font-size: 1.125em;}

ul.merit-list { display: flex; margin: 1em auto; justify-content:center; align-items: flex-start;}
ul.merit-list li {display: inline-flex;flex-direction: column; margin: 0 20px; font-size: 1em;}
ul.merit-list li > span { display: flex;background-color: #f9dc62; border-radius: 50%; width: 100%; height: 100%; justify-content: center; align-items: center; margin-bottom: .5em;}

h2.underbar {position: relative;}
h2.underbar::after {
    content: '';
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background-color: #d34316;}
.bg_deg {position: relative;
    margin: 0 calc(50% - 50vw);
    width: 100vw;}
.bg_deg::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transform: skewY(-4.5deg);
    transform-origin: top left;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #fef6f2;}
.bg_deg::before {
    background: rgba(233, 85, 4, 0.05);top: 20px;}
	
section.stepflow {margin: 0 calc(50% - 50vw); width: 100vw; padding-bottom: 90px;}
.stepflow h2 { margin-bottom: 1.5em; font-size: 1.5em;}

.stepbox { display: flex; flex-direction: column; margin: 0 auto; justify-content: flex-start; align-items: center;}
.stepbox li { display: block; width: 800px; max-width: 90vw; margin: 0 auto 40px; background-color: #fff; border-radius: 12px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); margin-top: 25px; position: relative; padding:15px 25px;}
.stepbox li > i {display: block; margin-top: -35px;}
.stepbox li h4 {font-size: 1.25em; font-weight: bold; margin: .65em 0 0 0;padding-bottom: .65em;}
.stepbox li h4.line-btm { border-bottom: 1px #ddd solid; }
.row2wrp {display: flex; flex-direction: row; align-items: center; justify-content: center;}
.row2wrp > div {width: 48%; padding: 15px 1% 0;}
.row2wrp > div:first-child {border-right: 1px #ddd solid;}
.row2wrp > div img {margin:5px auto 10px;}
.stepbox li h5 {}
.stepbox li h5 span {font-size: .8375em; font-weight: normal; display: block;}
.stepbox li::after {content: ""; display: block; width: 32px; height: 24px;position: absolute; bottom: -40px; left:calc(50% - 16px);  background-attachment: scroll; background-image: url(/themes/images/contents/ekyc-guide/arrow_step.svg); background-size: contain; background-repeat: no-repeat;}
.stepbox li.finish::after {display: none;}
.imgbox {display: flex; justify-content:center; align-items: center; position:relative; width: 100%; max-width: 445px;
margin: 0 auto; padding-bottom: 25px;}
.imgbox img { position: absolute; left: 0; top: -25px;}
.imgbox h4 {}

.row2wrp > div.commingsoon {position: relative;}
.row2wrp > div.commingsoon::after {content: "Comming Soon"; color: #fff; font-weight: bold; font-size: 1.25em; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); display: flex; left: 0; top: 0; justify-content: center; align-items: center;position: absolute;}
.row2wrp > div.commingsoon > p.note {display: block; font-size: .75em; line-height: 1.3; position: absolute; top: .5em; text-align: center; width: 100%;}
.row2wrp > div {padding-top: 2.65em;}

section.method {padding: 0 0 20px 0;}
.method h2 { margin-bottom: 1.5em; font-size: 1.5em;}
table.method-td { width: 100%;}
table.method-td th {background-color: rgba(250,220,98,.6); border-bottom: 0; width: 50%; padding:1em .5em; font-size: 1.125em; text-align: center; border: 2px #fff solid;}
table.method-td th > span { display: block; font-weight: normal;}
table.method-td td {border-bottom: 2px #eee solid; padding: .65em 1.5em;}
table.method-td td:first-child {border-right: 2px #eee solid;}
table.method-td td.center {text-align: center;}

p.txtL {font-size: 1.5em; font-weight: bold;}
p.txtL em {font-size: 1.75em; padding: 0 .2em; line-height: 1.2;}

.line-box {display: flex; width: 100%; border: 1px #ddd solid; border-radius: 12px; padding: 15px; justify-content: flex-start; align-items: center;}
.line-box span {padding: .5em .5em;}
.line-box span.line-r {border-right: 2px #eee solid;}



section.attention {margin-bottom: 2em; background-color: rgba(233,85,4,.05); padding: 25px;}
.attention h2 { margin-bottom: 1.5em; font-size: 1.25em;}
.attention p {font-size: 1em;}

section.required {margin-bottom: 2em; border: 2px #eee solid; padding: 25px 35px;}
.required h3 {display: flex; justify-content: center; align-items: center; font-size: 1.125em; font-weight: bold;
border-bottom: 2px #eee solid; padding-bottom: .75em; margin-bottom: .75em;}
.required h3 img {height: 1em; margin-right: .2em;}

section.under-btnbox { padding: 1.5em 0; margin-bottom: 25px;}

ul.check-list { display: flex; justify-content: flex-start; align-items: center;}
ul.check-list li {display: inline-flex; justify-content: flex-start; align-items: center; margin-right: 2em; font-size: 1em;  flex-wrap: wrap;}
ul.check-list li img { width: 1em; height: 1em; margin-right: .2em;}
ul.check-list li >span {font-size: .8125em; }


ul.discM {margin: .5em 0 0 1em;}
ul.discM li {font-size: 1em;line-height: 1.4; padding-bottom: .25em; text-align: left;}
ul.discM li::before {
    content: "・";
    display: inline-block;
    margin-left: -1em;
    padding-right: 0;
    width: 1em;}
ul.discM.center li {text-align: center;}
ul.astM {margin: .5em 0 0 1em;}
ul.astM li {font-size: 1em;line-height: 1.4; padding-bottom: .25em; text-align: left;}
ul.astM li::before {
    content: "※";
    display: inline-block;
    margin-left: -1em;
    padding-right: 0;
    width: 1em;}
ul.astS {margin: .5em 0 2em 1em;}
ul.astS li {font-size: .75em;line-height: 1.4; padding-bottom: .25em; text-align: left;}
ul.astS li::before {
    content: "※";
    display: inline-block;
    margin-left: -1em;
    padding-right: 0;
    width: 1em;}
ul.discS {margin: .5em 0 2em 1em;}
ul.discS li {font-size: .875em;line-height: 1.4; padding-bottom: .25em;}
ul.discS li::before {
    content: "・";
    display: inline-block;
    margin-left: -1em;
    padding-right: 0;
    width: 1em;}
	
ul.num-list > li {font-size: .75rem;line-height: 1.4; padding-bottom: .25em; text-align: left; padding-left: 2.5em; position: relative;}
ul.num-list li >span {display: inline-block;width: 2em; padding-right: .25em; position: absolute; left: .25em; top: 0;}

ul.num-list li.red > ul.discS { margin-bottom: .25em; width: calc(100% - 2em);}
ul.num-list li.red > ul.discS li {color: #333;font-size: .75rem; margin-left: .25em;}
ul.lineS { padding-top: .25em; width: calc(100% - 2em);}
ul.lineS li {font-size: .75rem;line-height: 1.4; padding-bottom: .25em;}
ul.lineS li::before {
    content: "-";
    display: inline-block;
    margin-left: -1em;
    padding-right: 0;
    width: 1em;}
@media screen and (max-width: 660px) {
ul.num-list,
ul.num-list li.red > ul.discS li,
ul.lineS li {font-size: 3vw;}
}

.nomgb {margin-bottom: 0 !important;}

a.link-blue:link,a.link-blue:visited,a.link-blue:hover,a.link-blue:active { color: #066eb3;}



@media screen and (max-width: 1000px) {
.contents {width: 100%;}
section {width: 96%; margin: 0 auto;}
.breadcrumb::before {margin-left: 0;}

.mv { width: 100%;}
}  

/*
@media screen and (max-width: 768px) and (min-width: 661px) {
.breadcrumb::before {margin-left: -1.5em;} 
.mv {
  background-size:25vw auto,23.5vw auto;}
}  
*/

@media screen and (max-width: 660px) {

br.pcOnly {display: none;}
br.spOnly {display: block;}

p {font-size: 3.4vw;}
p.txtL {font-size: 4vw; line-height: 1.2;}
.mv_wrp {height: auto;}
.mv {background-size: 30vw auto,28vw auto;}
.mv_lead {font-size: 4vw; margin-top: 0; margin-bottom: .5em}
.mv > h1 {font-size: 7.5vw;}
.mv > h2 {font-size: 3.6vw; margin-bottom: auto;}
em.und-line {display: block;}

section.advantage {padding: 3vw 0 6vw 0;}
.advantage h3 {font-size: 4vw;}
.advantage .lead {font-size: 4.5vw;letter-spacing: .04em;}
.ballon { margin-top: .25em; padding-top: .5em;}
.ballon p {font-size: 3.6vw;}
ul.merit-list {margin-top: 0;}
ul.merit-list li {font-size: 3vw;margin: 0 2vw;}

section.stepflow {padding-bottom: 0;}
.stepflow h2 {font-size: 5vw;}
.stepbox li {padding: 3vw 3vw;}
.stepbox li > i img {width: 15vw;}
.stepbox li h4 {font-size: 4vw; margin: 0;}
.stepbox li h5 {font-size: 3.6vw;}
.imgbox {padding-bottom: 0.5em;}
.imgbox img {width: 12vw;left: 5vw;}
.stepbox li .imgbox > h4 { padding-top: 1em;}

.method h2 {font-size: 5vw;}
table.method-td th,table.method-td td {font-size: 3.6vw;}

.line-box {flex-direction: column;padding: 3vw 5vw;}
.line-box span.line-r {border-right: 0; border-bottom: 2px #eee solid; display: block; width: 100%;}
ul.discM li,
ul.astM li{font-size: 3.6vw;}
section.attention{ padding: 3vw;}
.attention h2 {font-size: 4vw;}
.attention p {font-size: 3.6vw;}

.required h3 {font-size: 4vw;text-align: left;}
.required h3 img {height: 2em; margin-right: .5em;}
section.required {padding: 5vw;}
ul.check-list {flex-direction: column; align-items: flex-start;}
ul.check-list li {font-size: 4vw; margin-right: 0;}
section.under-btnbox {padding:4vw 5vw; margin-bottom: 0;box-shadow: 0 -5px 3px 0 rgba(0,0,0,0.04); width: 100%;
position: fixed; z-index: 1000; bottom: 0; background-color: #fff;}
.under-btnbox h4 {font-size: 3.6vw; font-weight: bold;}
.under-btnbox {font-size: 3vw;}
a.btn_regist { width: 80%;font-size: 4.2vw;}

}

@media screen and (max-width: 660px) and (min-width: 441px){

}


@media screen and (max-width: 480px) {

}