@charset "UTF-8";

body { background: url("/kojin/benri/82debit_jcb/img/homeBG_201905.jpg") no-repeat 100% 0; background-size: 80%; /*-webkit-animation: fadeIn 2s ease 0s 1 normal;*/ }
@media screen and (max-width:1100px){
	body { background: url("/kojin/benri/82debit_jcb/img/homeBG.jpg") no-repeat 100% 0; background-size: 80%; /*-webkit-animation: fadeIn 2s ease 0s 1 normal;*/ }
}

/*-----loader-----*/
.loader { margin: 20px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 0.1em solid rgba(235,84,5,13); border-right: 0.1em solid rgba(235,84,5,1); border-bottom: 0.1em solid rgba(235,84,5,1); border-left: 0.1em solid #FFF; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; }
.loader,
.loader:after { border-radius: 50%; width: 10em; height: 10em; }
@-webkit-keyframes load8 {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes load8 {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

#loader-bg { display:none; position:fixed; width:100%; height:100%; top:0px; left:0px; z-index:10000; /*background:#008F79;*/ background:#fff;}
#loader { display:none; position:fixed; top:50%; left:50%; width:200px; height:200px; margin-top:-100px; margin-left:-100px; text-align:center; color:#fff; z-index:2; }
@media screen and (max-width:767px){
	#loader-bg {background-size:125%;}
}

.home_sec { max-width:1100px; margin:0 auto;}
@media screen and (max-width:1100px){
	.home_sec { max-width:90%; margin:0 auto;}
}



.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes fuwatAnime {
 0% { opacity: 0; }
 100% { opacity: 1; }
}

#main { padding-bottom: 50px; }




/*section*/
#main .section { padding: 30px 0; }
#main .section h1.line { margin: 0 auto 45px; font-size: 28px; font-weight: bold; }
#main .section h1.line span { position: relative; width: auto; display: inline-block; margin: 0 auto; padding: 0 90px; vertical-align: middle; text-align: center; }
#main .section h1.line span:before,
#main .section h1.line span:after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; height: 4px; margin: auto; vertical-align: middle; background: url("/kojin/benri/82debit_jcb/img/line.gif") repeat; }
#main .section h1.line span:before { left: 0; }
#main .section h1.line span:after { right: 0; }
@media screen and (max-width:959px){
	#main .section { padding: 30px 0; }
	#main .section h1.line { margin: 0 auto 20px; padding-bottom: 10px; font-size: 24px; background: url("/kojin/benri/82debit_jcb/img/line.gif") no-repeat 50% 100%; }
	#main .section h1.line span { position: static; width: auto; display: block; padding: 0; }
	#main .section h1.line span:before,
	#main .section h1.line span:after { display: none; }
}

/*keyVisual*/
#keyVisual { position: relative; padding-top: 0 !important; overflow: hidden; }
#keyVisual .inner { padding-top: 20px; padding-left: 200px; }
#keyVisual h1 { font-size: 15px; line-height: 1.5; font-weight: bold; margin: 0 60px 35px; }
#keyVisual h1 img { display: block; max-width: 100%; width: 250px; margin-top: 10px; }
#keyVisual img.cards { max-width: 100%; width: 400px;  }
#keyVisual aside { position:fixed; bottom:140px; right:2%; z-index:100; transition:0.5s; background:url(/kojin/benri/82debit_jcb/img/here_bg.png) no-repeat 50% 50%; background-size:contain;}
#keyVisual aside.fixed { position:fixed; bottom:160px; right:2%; z-index:100; transition:0.5s;}
#keyVisual aside img { display: block; width: 100%; }
#keyVisual aside:hover img { filter: alpha(style=0,opacity=60); opacity: .6;}
@media screen and (max-width:959px){
	#keyVisual { overflow-x: hidden; }
	#keyVisual .inner { padding-left: 0px; }
	#keyVisual h1 { font-size: 16px; margin: 0 0 35px; }
	#keyVisual h1 img { width: 55%; margin-top: 20px; width: 150px; }
	#keyVisual aside { width: 100px; right: -14px; bottom:70px; }
	#keyVisual aside.fixed { width: 100px; right: -14px; bottom:130px!important; }
	#keyVisual aside { background:none;}
	#keyVisual aside:hover img { filter: alpha(style=0,opacity=100); opacity: 1;}
}

/*merits*/
#merits { text-align: center; }
#merits h1 { display: inline-block; text-align: center; vertical-align: middle; font-size: 30px; line-height: 1; margin: 0 auto 48px; padding: 0 15px 8px; font-family: 'Noto Sans JP', sans-serif; background: url("/kojin/benri/82debit_jcb/img/line.gif") repeat-x 50% 100%; }
#merits h1 span:nth-of-type(1) { font-size: 60px; line-height: 1; color: #008F79; font-weight: 900; margin-right: 5px; font-family: 'Noto Sans JP', sans-serif;}
#merits h1 span:nth-of-type(2) { font-size: 38px; line-height: 1; font-weight: 700; font-family: 'Noto Sans JP', sans-serif;}
#merits ol { display: flex; list-style-type: none !important; justify-content: space-between; }
#merits ol li { margin: 0 !important; padding: 0 !important; }
#merits ol li img { display: block; width: 100%; margin: 0 auto; }
#merits ol li:hover img { filter: alpha(style=0,opacity=60); opacity: .6;}
#merits ol li:nth-child(1) { background:url(/kojin/benri/82debit_jcb/img/merit01_pc_bg.png) no-repeat 0 0;}
#merits ol li:nth-child(2) { background:url(/kojin/benri/82debit_jcb/img/merit02_pc_bg.png) no-repeat 0 0;}
#merits ol li:nth-child(3) { background:url(/kojin/benri/82debit_jcb/img/merit03_pc_bg.png) no-repeat 0 0;}
#merits ol li:nth-child(4) { background:url(/kojin/benri/82debit_jcb/img/merit04_pc_bg.png) no-repeat 0 0;}
#merits ol li:nth-child(5) { background:url(/kojin/benri/82debit_jcb/img/merit05_pc_bg.png) no-repeat 0 0;}
@media screen and (max-width:959px){
	#merits ol li { background:none;}
	#merits h1 { margin: 0 auto 30px; }
	#merits ol { display: block; }
	#merits ol li { margin-bottom: 10px !important; }
	#merits ol li:hover img { filter: alpha(style=0,opacity=100); opacity:1;}
}

/*merit*/
#merit { padding: 0 !important; }
.merit { overflow-y: hidden; display: flex; }
.meritIllust { width: 50%; background: #fff; }
.meritIllust img { display: block; max-width: 100%; margin: 0 auto; }
.meritText { width: 50%; color: #fff;text-align: center; background-size: cover; background-color: #008F79; background-repeat: no-repeat; padding-bottom:40px;}
.meritText .inner { width: 90%; max-width: 450px; margin: 5% 60px; text-align: left; display: block; }
.meritText .inner p { margin: 0; }
.meritText .inner img { max-width: 100%; margin: 10px auto 0; }
#merit01 .inner,
#merit03 .inner,
#merit05 .inner { margin: 5% 0 0 calc(100% - 510px);}
.merit:nth-of-type(odd) .meritIllust,
.merit:nth-of-type(even) .meritText { order: 2; }
.merit:nth-of-type(odd) .meritText,
.merit:nth-of-type(even) .meritIllust { order: 1; }
.merit:nth-of-type(odd) .meritText {  }
.merit:nth-of-type(even) .meritText { background-position: 100% 0; }
#merit01 .meritText { background-image: url("/kojin/benri/82debit_jcb/img/meritBG01.png"); }
#merit02 .meritText { background-image: url("/kojin/benri/82debit_jcb/img/meritBG02.png"); }
#merit03 .meritText { background-image: url("/kojin/benri/82debit_jcb/img/meritBG03.png"); }
#merit04 .meritText { background-image: url("/kojin/benri/82debit_jcb/img/meritBG04.png"); }
#merit05 .meritText { background-image: url("/kojin/benri/82debit_jcb/img/meritBG05.png"); }

.merit h1 { font-size: 26px; line-height: 1; font-weight: bold; margin-bottom: 15px; }
.merit h1 span { font-size: 60px; line-height: 1; font-weight: 900; font-family: 'Noto Sans JP', serif; vertical-align: middle; margin-right: .3em; }
.merit img { display: block; margin: 0 auto; }
@media screen and (max-width:959px){
	.merit { display: block; }
	.meritIllust,
	.meritText { width: 100%;}
	.meritText { padding:20px 0;}
	.meritText .inner { width: 90%; margin:5% auto!important;}
	.merit h1 { font-size: 20px; }
	.merit h1 span { font-size: 40px; }
}

/*video*/
#video {  }
#video .inner { max-width: 927px; }
#video .inner img { display: block; width: 100%; margin: 0 auto; }

/*about*/
#about { background: #eaeaea; }
#about .inner { max-width: 928px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; }
#about dl { width: 43%; padding: 3%; background: #fff; margin: 0 0 2%; }
#about dl dt { margin-bottom: 10px; padding-bottom: 3px; font-size: 18px; font-weight: bold; padding-left: 40px; background: url("/kojin/benri/82debit_jcb/img/icnQ.png") no-repeat 0 0; }
#about dl dd { padding-bottom: 3px; padding-left: 40px; background: url("/kojin/benri/82debit_jcb/img/icnA.png") no-repeat 0 0; }
#about dl dd span { font-weight: bold; color: #008F79; }
@media screen and (max-width:959px){
	#about .inner { display: block; }
	#about dl { width: 90%; padding: 5%; margin: 0 0 5%; }
}

/*flow*/
#flow { }
#flow .inner { max-width: 800px; }
#flow .flows { overflow-y: hidden; margin-bottom: 30px; display: flex; }
#flow .flow { float: left; width: 38%; padding: 5%; border: 2px solid #008F79; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
#flow .flow:first-of-type { position: relative; width: 43%; vertical-align: middle; margin-right: 5%; }
#flow .flow:first-of-type:after { position: absolute; top: 50%; right: -10.5%; margin: auto; content: ""; vertical-align: middle; width: 10.5%; height: 42px; margin-top: -16px; background: url("/kojin/benri/82debit_jcb/img/flowArw_pc.png")  no-repeat 100% 50%; }
@media screen and (max-width:959px){
	#flow .flows { display: block; }
	#flow .flow { float: none; width: 88%; padding: 5%; border: 2px solid #008F79; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
	#flow .flow:first-of-type { position: relative; width: 88%; margin: 0 0 41px; }
	#flow .flow:first-of-type:after { position: absolute; top: 100%; left: 50%; width: 42px; height: 42px; margin: 0 0 0 -21px; background: url("/kojin/benri/82debit_jcb/img/flowArw_sp.png")  no-repeat 50% 100%; }
}
#flow .flow h2 { font-size: 17px; font-weight: bolder; color: #008F79; }
#flow .flow h3 { display: table; margin-bottom: 15px; }
#flow .flow h3 img { display: table-cell; vertical-align: middle; margin-right: 10px; }
#flow .flow h3 span { display: table-cell; vertical-align: middle; font-size: 18px; font-weight: bold; }
#flow .flow h3 span span { display: inline-block; vertical-align: top; font-size: 10px; }
#flow h4 { font-weight: bold; font-size: 14px; margin-bottom: 3px; }
#flow p { text-align: center; font-weight: bold; margin: 0; }
#flow p.astarisk { font-size: 12px; font-weight: normal; margin-bottom: 2em; }

/*application*/
#application { background: #eaeaea; }
#application .inner { max-width: 736px; }
#application ul { list-style-type: none !important; display: flex; justify-content: space-between; font-size: 12px; text-align: center; margin-bottom: 35px; }
#application ul li { margin: 0 !important; padding: 0 !important; font-weight: bold; }
#application ul li img { display: block; max-width: 100%; margin: 0 auto 10px; }
#application h2 { font-size: 22px; font-weight: bold; margin-bottom: 15px; }
#application h2 span { font-size: 16px; font-weight: normal; }
#application p { margin: 0; }
#application aside { margin: 80px 0 40px; text-align: center; padding-bottom: 4px; }
#application aside a { display: block; width: 99%; padding: .6em 0; background: #008F79; color: #fff; font-size: 28px; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 1px #00654E; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 4px 4px 0 0 #00654E; }
#application .left { margin: 20px auto 40px; text-align: center; padding-bottom: 4px; float: left; width: 48%;}
#application .left a { display: block; padding: .6em 0.3em; background: #6699ff; color: #fff; font-size: 18px; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 1px #00654E; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 4px 4px 0 0 #00654E; }
#application .right { margin: 20px auto 40px; text-align: center; padding-bottom: 4px; float: right; width: 48%;}
#application .right a { display: block; padding: .6em  0.3em; background: 
#66cc00; color: #fff; font-size: 18px; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 1px #00654E; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 4px 4px 0 0 #00654E; margin-right: 4px;}
#application .botton { margin: 20px 0 40px; text-align: center; padding-bottom: 4px; }
#application .botton { display: block; width: 99%; padding: .6em 0; background: #6699ff; color: #fff; font-size: 28px; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 1px #00654E; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 4px 4px 0 0 #00654E; }
#application .botton a { color: #fff; text-decoration: none; }

#application #time { max-width: 416px; margin: 0 auto; }
#application #time h4 { font-size: 14px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #ababab; }
#application #time dl { font-size: 14px; padding: 10px 2em; border-bottom: 1px solid #ababab; }
#application #time dt { float: left; width: 40%; }
#application #time dd { padding-left: 40%; }
@media screen and (max-width:959px){
	#application .inner {  }
	#application ul { flex-wrap: wrap; }
	#application ul li { width: 49%; margin-bottom: 5% !important; }
	#application h2 span { display: block; }
	#application aside { margin: 30px 0; }
	#application aside a { font-size: 20px; }
	#application #time dl { padding: 10px 1em; }
	#application .left { margin: 20px auto 10px; text-align: center; padding-bottom: 4px; float: left; width: 99%;}
	#application .right { margin: 10px auto 40px; text-align: center; padding-bottom: 4px; float: left; width: 99.9%;}
	#application .botton { margin: 30px 0; }
	#application .botton { font-size: 20px; }
}

@media screen and (max-width:768px){
	#application .left { margin: 20px auto 20px; float: none;}
	#application .left a { margin-right: 4px;}
	#application .right { float: none;}
	#application .right a { }
}
/*more*/
#more { background: #c4c4c4; }
#more .inner { max-width: 736px; }
#more aside { text-align: center; padding-bottom: 4px; }
#more aside a { display: block; width: 99%; padding: .6em 0; background: #666666; color: #fff; font-size: 28px; font-weight: bold; text-decoration: none; text-shadow: 1px 1px 1px #333; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 4px 4px 0 0 #333; }
@media screen and (max-width:959px){
	#more aside a { font-size: 20px; }
}

/*contact*/
#contact {  }
#contact .inner { max-width: 800px; text-align: center; display: flex; justify-content: space-between; }
#contact dl { width: 49%; margin: 0 0 2%; }
#contact dl dt { padding: 4% 3%; font-size: 18px; font-weight: bold; color: #fff; background: #008F79; border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; }
#contact dl dd { padding: 4% 3%; background: #ececec url("/kojin/benri/82debit_jcb/img/stripeBG.png"); border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; font-weight: bold; }
#contact dl dd a { display: block; font-size: 26px; font-weight: bolder; font-family: 'Noto Sans JP', serif; text-decoration: none; }
#contact dl dd span { display: block; font-size: 14px; font-weight: normal; }
@media screen and (max-width:959px){
	#contact .inner { max-width: 800px; text-align: center; display: block; }
	#contact dl { width: 100%; margin: 0 0 5%; }

}

/*Youtube対応 20190806*/
.videoiframe{
 position: relative;
 width: 100%;
 padding-top: 56.25%;
}

.videoiframe iframe{
 position: absolute;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
}