/* BASIC
--------------------------------------------------------- */
html { overflow-y: scroll; }
body { color: black; min-width: 320px; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; clear: both; }
div { clear: both; }
a { color: #eb7000; text-decoration: underline; }
a:hover { color: #eb7000; text-decoration: none; }
a:visited { color: #eb7000; }

::-moz-selection, ::-moz-selection {
background: #ffab4f;
color: white;
text-shadow: none;
}

::-moz-selection, ::selection {
background: #ffab4f;
color: white;
text-shadow: none;
}
a:link { -webkit-tap-highlight-color: rgba(238, 163, 33, 0.45); }
/* CONTENTS
--------------------------------------------------------- */
#wrapper { width: 100%; max-width: 800px; margin: 0 auto; }
#header { background-color: #f4f5f8; width: 100%; }
#header header { padding: 15px; }
#header header h1 { font-size: 108%; display: table; }
#header header h1 span { display: table-cell; vertical-align: top; }
#header header h1 span img { margin-right: 15px; }
h2 { margin: 0.9em 15px 0.7em; display: block; position: relative; padding-left: 20px; text-align: left; font-size: 108%; line-height: 1.4; color: #000; background-color: #fff; padding-bottom: 10px; border-bottom: 1px solid #dcdee0; font-weight: normal; }
h2 strong, h2 em { font-weight: bold; }
h2::before { content: ''; display: block; position: absolute; left: 0; top: 0; height: 88%; width: 6px; background-color: #e96a02; }
h3 { width: 86%; margin: 1.2em auto 0.7em; font-size: 100%; line-height: 1.3; padding-bottom: 5px; border-bottom: 1px solid #dcdee0; padding-left: 1em; text-indent: -1em; }
h3 span { color: #ff4949; }
h4 { margin: 0.9em 15px 0.3em; font-size: 100%; line-height: 1.4; padding-bottom: 4px; border-bottom: 1px solid #dcdee0; }
h4 span { color: #ec0012; }
h5 { margin: 0.9em 15px 0.3em; font-size: 100%; line-height: 1.3; color: #e96a02; }
h6 { margin: 0.9em 15px 0.3em; font-size: 108%; line-height: 1.3; }
.list-ttl { font-size: 98%; line-height: 1.3; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #dcdee0; }
.list-ttl span { display: inline-block; font-size: 90%; color: #fff; background-color: #ec0012; -moz-border-radius: 200px; border-radius: 200px; width: 1.3em; height: 1.3em; text-align: center; line-height: 1.4em; margin-right: 3px; }
.steps .list-ttl { width: 80%; margin: 0 auto; border-bottom: none; }
.list-ttl2 { font-size: 98%; line-height: 1.3; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #dcdee0; font-weight: normal; }
.list-ttl2 span { display: inline-block; font-size: 90%; color: #fff; background-color: #ec0012; -moz-border-radius: 200px; border-radius: 200px; width: 1.3em; height: 1.3em; text-align: center; line-height: 1.4em; margin-right: 3px; }
.list-ttl2 strong { font-weight: bold; }
.inner { display: block; clear: both; position: relative; width: 84%; margin-right: auto; margin-left: auto; }
.inner > p { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; padding-top: 10px; }
.inner > dl { display: table; width: 100%; }
.inner > dl > dt { display: table-cell; text-align: right; width: 26%; max-width: 200px; vertical-align: top; }
.inner > dl > dt img { width: 100%; height: auto; }
.inner > dl > dd { display: table-cell; text-align: left; padding-left: 8px; vertical-align: top; font-size: 90%; }
p { clear: both; font-size: 90%; line-height: 1.7; margin: 0 15px; }
p.left-indent { border-left: 1px solid #dcdee0; padding-left: 10px; text-indent: 0; padding-bottom: 8px; }
p em { background-color: #ffff73; font-weight: bold; position: relative; display: inline; padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 3px; margin-left: 2px; margin-right: 2px; }
p .annotation { display: block; line-height: 1.4; margin: 4px 0px 16px; padding-left: 1.3em; text-indent: -1.3em; font-size: 86%; }
p strong { font-weight: bold; }
.btn-link { background-color: #eb4028; -moz-border-radius: 8px; border-radius: 8px; color: #fff !important; display: block; height: 2.8em; line-height: 2.8em; font-weight: bold; text-decoration: none; margin: 0px 15px 15px; background-image: url(../img/jbnbank-btn-arw2.png); background-position: 96% center; background-repeat: no-repeat; -moz-background-size: 30px 30px; background-size: 30px 30px; padding-left: 15px; font-size: 108%; text-align: center; }
.txt-01 { font-size: 90%; line-height: 1.7; margin: 0 15px; }
.txt-02 { font-size: 100%; line-height: 1.7; margin: 0 0px; }
.txt-03 { font-size: 100%; line-height: 1.7; margin: 0 15px; font-weight: bold; text-align: center; }
.img-paragraph01 { clear: both; }
.img-paragraph01 img { width: 36%; float: left; margin: 8px 10px 8px 0; }
.img-paragraph02 { clear: both; }
.img-paragraph02 img { width: 50%; float: left; margin: 8px 10px 8px 0; }
.img-paragraph03 { clear: both; display: table; width: 90%; position: relative; text-indent: 0; }
.img-paragraph03 span { display: table-cell; width: 50%; vertical-align: bottom; line-height: 1.5; }
.img-paragraph03 span img { width: 98%; height: auto; padding-right: 10px; }
.img-paragraph03 span em { display: inline-block; font-size: 80%; padding-bottom: 2px; }
.img-paragraph04 { font-size: 90%; line-height: 1.7; margin: 0 15%; }
.img-l { margin: 15px 0; }
.img-l img { width: 100%; height: auto; }
.img-m { text-align: center; width: 100%; display: block; padding: 10px 15px; }
.img-m img { width: 100%; height: auto; }
.img-cv { margin: 0px 0px; }
.img-cv img { width: 100%; padding: 5px 5px; }
.img-privilege { text-align: center; width: 100%; display: block; padding: 0px 15px; }
.img-privilege img { width: 100%; height: auto; }
.caption { font-size: 90%; line-height: 1.7; }
.caption2 { font-size: 80%; line-height: 1.7; }
.caption3 { font-size: 70%; line-height: 1.7; padding: 0 15px; }
.link { font-size: 80%; text-align: center; padding-top: 0px; padding-bottom: 20px; }
.link span { font-size: 84%; }
.step { background-color: #fff7f0; -moz-border-radius: 8px; border-radius: 8px; margin: 0px 20px 15px; padding: 20px 5px 20px; }
ul { margin: 0 15px; }
li { font-size: 90%; line-height: 1.7; margin: 10px 15px; list-style-type: disc; }
.start { text-align: center; margin: 10px 0px 10px 0px; font-size: 100%; line-height: 1.5; }
.conversion { text-align: center; margin: 10px 0px 10px 0px; font-size: 100%; line-height: 1.5; font-weight: bold; }
.annotation { margin: 0 15px 10px; font-size: 70%; line-height: 1.5; }
.annotation2 { margin: 15px 15px 0px; font-size: 80%; font-weight: bold; line-height: 1.5; }
.annotation3 { margin: 0 15px 0px; font-size: 80%; line-height: 1.5; color: #e96a02; }
.annotation4 { margin: 15px 15px 0.3em; font-size: 80%; font-weight: bold; line-height: 1.5; color: #e96a02; }
.anchor { margin: 10px 15px 10px; font-size: 90%; line-height: 1.5; text-align: right; }
.anchor2 { display: block; width: 13.9em; text-align: left; float: right; margin: 10px 15px 30px; font-size: 90%; line-height: 1.5; padding-left: 1.9em; background: url("../img/anchor-arw.png") no-repeat left top; -moz-background-size: 23px 23px; background-size: 23px 23px; }
.textlink { display: block; width: 10.5em; text-align: left; float: right; margin: 0px 8px 30px; font-size: 90%; line-height: 2; height: 2em; padding-left: 2.2em; background: url("../img/arw-link.png") no-repeat left top; -moz-background-size: 23px 23px; background-size: 23px 23px; }
.deficit { color: #ff0000; }
.lank { text-align: center; }
.heading { margin: 0.6em 15px 0.3em; font-size: 90%; line-height: 1.5; padding: 5px 0px; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; }
#cv, .cv { background-color: #fbe2ce; width: 100%; padding: 2px; margin: 20px 0px 10px 0px; }
.orange { font-weight: bold; color: #e96a02 !important; }
.img-lab { margin: 0; }
.img-lab img { width: 100%; height: auto; }
#footer { display: block; width: 100%; background-color: #f4f5f8; font-size: 80%; padding-top: 0.5em; padding-bottom: 3em; }
#footer .copy { width: 96%; margin: 0 auto; text-align: center; }
#footer .copy span { font-family: Helvetica, Arial, sans-serif; }
.pickup { display: block; position: relative; clear: both; width: 100%; color: #eb7000; font-weight: bold; font-size: 92%; padding-left: 2.9em; height: 2.1em; line-height: 2.1; margin-top: 13px; background-color: #f5f5f5; background: #f5f5f5 url("../img/hand-arw.png") no-repeat left center; -moz-background-size: auto 100%; background-size: auto 100%; }
.ttl { color: #ec0012; background-color: #ffebec; font-size: 92%; font-weight: bold; display: block; position: relative; line-height: 1.4; margin-top: 10px; margin-bottom: 13px; clear: both; padding: 5px 6px 5px 5px; }
.steps .ttl { width: 80%; margin: 35px auto 0; }
.table-contents { background-color: #f5f5f5; margin: 18px 14px 24px; padding: 14px 5px 14px 20px; }
.table-contents > span { font-weight: bold; }
.table-contents ol { counter-reset: item; list-style: none; padding-top: 2px; padding-left: 1.1em }
.table-contents ol li { padding: 0px 0; margin: 5px 0; list-style: none; color: #eb7000; font-size: .84em; line-height: 1.4; text-indent: -1.1em; }
.table-contents ol li::before { content: counters(item, "-"); counter-increment: item; color: #eb7000; margin-right: .5em; }
/* SLIDER
------------------ */
.bx-wrapper { position: relative; width: 80%; overflow: hidden; }
.bx-wrapper .bx-viewport { overflow: visible !important; }
.bx-wrapper .bxslider { margin: 0; padding: 0; }
.bx-prev { position: absolute; top: 50%; left: 0; z-index: 10; width: 13px; height: 29.5px; background: url(../img/btn_prev.png) no-repeat left top; background-size: 100% auto; text-indent: 100%; overflow: hidden; white-space: nowrap; }
.bx-next { position: absolute; top: 50%; right: 0; z-index: 10; width: 13px; height: 29.5px; background: url(../img/btn_next.png) no-repeat left top; background-size: 100% auto; text-indent: 100%; overflow: hidden; white-space: nowrap; }
.bx-prev.disabled, .bx-next.disabled { display: none; }
ul.slider { margin: 0; padding: 0; }
.slider li { font-size: 100%; line-height: 1; margin: 0; padding: 0; list-style-type: none; background: no-repeat center top; background-size: 100% auto; }
.slider li span { display: block; margin: 0; font-size: 12px; line-height: 1.8; }
.slider li span { padding: 36% 18% 4%; }
.bxSlider03 li span, .bxSlider04 li span, .bxSlider05 li span, .bxSlider06 li span, .bxSlider07 li span { padding: 50% 18% 4%; }
.bxSlider01 li:nth-of-type(1) { background-image: url(../img/slide01-01.png); }
.bxSlider01 li:nth-of-type(2) { background-image: url(../img/slide01-02.png); }
.bxSlider01 li:nth-of-type(3) { background-image: url(../img/slide01-03.png); }
.bxSlider02 li:nth-of-type(1) { background-image: url(../img/slide02-01.png); }
.bxSlider02 li:nth-of-type(2) { background-image: url(../img/slide02-02.png); }
.bxSlider02 li:nth-of-type(3) { background-image: url(../img/slide02-03.png); }
.bxSlider03 li:nth-of-type(1) { background-image: url(../img/slide03-01.png); }
.bxSlider03 li:nth-of-type(2) { background-image: url(../img/slide03-02.png); }
.bxSlider03 li:nth-of-type(3) { background-image: url(../img/slide03-03.png); }
.bxSlider04 li:nth-of-type(1) { background-image: url(../img/slide04-01.png); }
.bxSlider04 li:nth-of-type(2) { background-image: url(../img/slide04-02.png); }
.bxSlider04 li:nth-of-type(3) { background-image: url(../img/slide04-03.png); }
.bxSlider05 li:nth-of-type(1) { background-image: url(../img/slide05-01.png); }
.bxSlider05 li:nth-of-type(2) { background-image: url(../img/slide05-02.png); }
.bxSlider05 li:nth-of-type(3) { background-image: url(../img/slide05-03.png); }
.bxSlider05 li:nth-of-type(4) { background-image: url(../img/slide05-04.png); }
.bxSlider06 li:nth-of-type(1) { background-image: url(../img/slide06-01.png); }
.bxSlider06 li:nth-of-type(2) { background-image: url(../img/slide06-02.png); }
.bxSlider06 li:nth-of-type(3) { background-image: url(../img/slide06-03.png); }
.bxSlider06 li:nth-of-type(4) { background-image: url(../img/slide06-04.png); }
.bxSlider07 li:nth-of-type(1) { background-image: url(../img/slide07-01.png); }
.bxSlider07 li:nth-of-type(2) { background-image: url(../img/slide07-02.png); }
.bxSlider07 li:nth-of-type(3) { background-image: url(../img/slide07-03.png); }
/* CONTENT > STEP
------------------ */
.steps { color: #4e4e4e; }
.steps p { width: 70%; margin: 0 auto 1em auto; }
.steps h3.step_head { border: none; margin: 0 0 3vw 0; }
.steps h3.step_head img { display: block; width: 100%; margin: 6vw 0 0 0; }
.steps div.pickup_point { padding: 0.5em; background-color: #f5f5f5; width: 70%; margin: 13px auto 0.5em auto; }
.steps div.pickup_point p { width: 90%; margin: 0 auto; line-height: 1.4; }
div.pickup_point h5 { clear: both; color: #eb7000; font-weight: bold; font-size: 92%; height: 2.1em; line-height: 2.1; margin: 0 auto 0 auto; text-align: center; }
div.pickup_point h5 em { display: inline-block; background-color: #f5f5f5; background: #f5f5f5 url("../img/hand-arw.png") no-repeat left center; -moz-background-size: auto 100%; background-size: auto 100%; padding-left: 2.9em; }
.case_ttl { margin: 10vw 0; padding: 0; line-height: 0; border: none; }
.case_ttl img { width: 100%; }
.sub_section { margin: 12vw 0 5vw 0; padding: 0; line-height: 0; border: none; text-align: left; }
.sub_section img { width: 100%; }
.anchor3 { display: block; width: 17em; text-align: left; float: right; margin: 10px 15px 10vw; font-size: 90%; line-height: 1.5; padding-left: 1.9em; background: url("../img/anchor-arw.png") no-repeat left top; -moz-background-size: 23px 23px; background-size: 23px 23px; text-decoration: none; }
.accordion { margin: 30px auto; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.accordion .trigger { position: relative; margin: 0; padding: 10px 0; background-color: #eee; color: #666; font-size: 120%; line-height: 1.2; text-align: center; cursor: pointer; }
.accordion .trigger span { display: block; font-size: 12px; text-align: center; }
.tree { display: none; padding: 0 0 20px; border-top: 1px solid #ccc; }
.accordion .trigger:after { content: ""; position: absolute; top: 50%; right: 15px; width: 30px; height: 30px; margin-top: -15px; background: url(../img/acc-ico-open.png) no-repeat right center; background-size: 100% auto; }
.accordion .trigger.open:after { transform: rotate(45deg); }
.notes { margin: 0 20px 20px; color: #888; font-size: 65.25%; line-height: 1.4; }
/* CONTENT > notice
------------------ */

.notice { display: block; margin-left: 1em; color: #888; }
.notice02 { display: inline-block; margin: 0; padding-left: 1.3em; text-indent: -1.3em; }
.notice03 { display: inline-block; padding-left: 1em; text-indent: -1em; }
.notice_em { color: #4E4E4E; }
.notice + br { display: none; }
.notice:before { margin-left: -1.3em; content: "※ "; }