@charset "UTF-8";
/* CSS Document */


/***************************************
 common
***************************************/

.mt10{margin-top: 10px!important;}
.mt20{margin-top: 20px!important;}
.mt30{margin-top: 30px!important;}
.mt40{margin-top: 40px!important;}
.mt50{margin-top: 50px!important;}
.pt10{padding-top: 10px!important;}
.pt20{padding-top: 20px!important;}
.pt30{padding-top: 30px!important;}
.pt40{padding-top: 40px!important;}
.pt50{padding-top: 50px!important;}

.mb10{margin-bottom: 10px!important;}
.mb20{margin-bottom: 20px!important;}
.mb30{margin-bottom: 30px!important;}
.mb40{margin-bottom: 40px!important;}
.mb50{margin-bottom: 40px!important;}
.pb10{padding-bottom: 10px!important;}
.pb20{padding-bottom: 20px!important;}
.pb30{padding-bottom: 30px!important;}
.pb40{padding-bottom: 40px!important;}
.pb50{padding-bottom: 40px!important;}

.mr10{margin-right: 10px!important;}
.mr20{margin-right: 20px!important;}
.mr30{margin-right: 30px!important;}
.mr40{margin-right: 40px!important;}
.mr50{margin-right: 40px!important;}
.pr10{padding-right: 10px!important;}
.pr20{padding-right: 20px!important;}
.pr30{padding-right: 30px!important;}
.pr40{padding-right: 40px!important;}
.pr50{padding-right: 40px!important;}

.ml10{margin-left: 10px!important;}
.ml20{margin-left: 20px!important;}
.ml30{margin-left: 30px!important;}
.ml40{margin-left: 40px!important;}
.ml50{margin-left: 40px!important;}
.pl10{padding-left: 10px!important;}
.pl20{padding-left: 20px!important;}
.pl30{padding-left: 30px!important;}
.pl40{padding-left: 40px!important;}
.pl50{padding-left: 40px!important;}

.trs-03{
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease; 
}

#header-copy{
  min-width: 980px;
}

#subhead-nav{
  min-width: 960px;
}

#footerWrap{
  min-width: 980px;
}

#online #subHead{
  height: 60px;
  margin: 0;
  overflow: inherit;
  z-index: 1000;
}

#system #subHead{
  height: 60px;
  margin: 0;
  overflow: inherit;
  z-index: 1000;
}

#subhead-nav{
  background: #00A0E9;
  width: 100%;
  height: 60px;
}

#subhead-nav > .sub-n-p{
  display: table;
  width: 960px;
  margin: 0 auto;
  table-layout: fixed;
  position: relative;
}

#subhead-nav > .sub-n-p > li{
  display: table-cell;
}

#subhead-nav > .sub-n-p > li a{
  position: relative;
  display: table;
  color: #FFF;
  text-decoration: none;
  height: 59px;
  text-align: center;
  width: 100%;
  font-size: 14px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  margin-bottom: 10px;
  border-right: 1px solid #FFF;
}

#subhead-nav > .sub-n-p > li > a::before{
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 10px solid transparent;
    border-top-color: #33b3ee;
    top: 59px;
    right: 43%;
    opacity: 0;
  
}

#subhead-nav > .sub-n-p > li a:hover::before {
    opacity: 1;
}

#subhead-nav > .sub-n-p > li a:hover,
#subhead-nav > .sub-n-p > li a.active{
  background: rgba(255,255,255,0.2);
}

#subhead-nav > .sub-n-p > li a.active::before {
    opacity: 1;
}

#subhead-nav > .sub-n-p > li:first-child a{
  border-left: 1px solid #FFF;
}

#subhead-nav > .sub-n-p > li a span{
  display: table-cell;
  vertical-align: middle;
  line-height: 1.37;
}

#subhead-nav > .sub-n-p > li > .sub-n-c{
  position: absolute;
  left: 0;
  width: 100%;
  background: #007DE4;
  padding: 12px 9px 0px 9px;
  box-sizing: border-box;
  display: none;
}

#subhead-nav > .sub-n-p > li > .sub-n-c > li{
  float: left;
  width: 180px;
  text-align: center;
  margin: 0 4px 0px 4px;
}

#subhead-nav > .sub-n-p > li > .sub-n-c > li > a{
  height: 4em;
  background: #FEFEFE;
  color: #666;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  padding-bottom: 0;
  border-right: none;
}

#subhead-nav > .sub-n-p > li > .sub-n-c > li > a:hover,
#subhead-nav > .sub-n-p > li > .sub-n-c > li > a.active{
  background: #8CC223;
  color: #FFF;
}

#online #pageTop{
  position: fixed;
  bottom: 10px;
  right: -3px;
  width: auto;
  z-index: 1000000;
}

#online #pageTop a{
  background: #8CC223;
  color: #FFF;
}

#online #pageTop a:hover{
  background: #7ab700;
  color: #FFF;
}

#online #wrapper{
  height: auto;
}

#online #contents.w100p{
  width: 100%;
  max-width: 100%;
}

#system #pageTop{
  position: fixed;
  bottom: 10px;
  right: -3px;
  width: auto;
  z-index: 1000000;
}

#system #pageTop a{
  background: #8CC223;
  color: #FFF;
}

#system #pageTop a:hover{
  background: #7ab700;
  color: #FFF;
}

/***************************************
 button
***************************************/
.gradient{
  filter: none;
}
.btn-area a{
  display: table;
  text-decoration: none!important;
  text-align: center;
  font-size: 18px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.btn-area a span{
  display: table-cell;
  vertical-align: middle;
}

.btn-blue-gra{
  color: #FFF!important;
  background: #28aaff;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyOGFhZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNTA0NmY1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(top, ellipse cover,  #28aaff 0%, #5046f5 100%);
  background: -webkit-radial-gradient(top, ellipse cover,  #28aaff 0%,#5046f5 100%);
  background: radial-gradient(ellipse at top,  #28aaff 0%,#5046f5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28aaff', endColorstr='#5046f5',GradientType=1 );
}

.btnSet .btn-area{
  display: inline-block;
  text-align: center;
}

.btn-left{
  
}

.btn-right{
  
}

.hover{
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}

.hover:hover{
  opacity: 0.8;
  -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
  text-decoration: none;
}

.w200{width: 200px;}
.w220{width: 220px;}
.h45{height: 45px;}
.h60{height: 60px;}


/***************************************
 top
***************************************/
#online .online-top{
  z-index: 0;
  background: url(/img/bg_online_top_upper.jpg);
  min-width: 
}

#online .top-contents-upper{
  position: relative;
}

#online .top-contents-lower1{
  position: relative;
}

.online-top .btn-left{
  position: absolute;
  left: 170px;
  bottom: 100px;
}

.online-top .btn-right{
  position: absolute;
  right: 170px;
  bottom: 100px;
}

#online .top-contents-lower{
  position: relative;
  background: url(/img/bg_online_top_lower.jpg);  
}

.online-top .btn-upper{
  position: absolute;
  right : 150px;
  top: 60px;
}

.online-top .btn-lower{
  position: absolute;
  right: 150px;
  top: 140px;
}

/***************************************
 guide common
***************************************/
.guide-box{
  width: 725px;
  margin: 0 auto 40px auto;
}

.guide-sub-box{
  margin-bottom: 30px;
/*   padding-bottom: 20px; */
  border-bottom: 1px dashed #646464;
}

.guide-box .guide-sub-box:last-child{
  border-bottom: none;
}

.guide-left-box{
  float: left;
  width: 453px;
  margin-bottom: 30px;
}

.guide-right-box{
  float: right;
  width: 237px;
  margin-bottom: 30px;
}

.guide-sub-box p{
  position: relative;
  margin-bottom: 15px;
  line-height: 1.5;
  font-size: 14px;
}

.guide-sub-box p.guide-num-p{
  text-indent: 6px;
}

.guide-sub-box p.guide-num-p:before{
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 0px; 
  width: 18px;
  height: 18px;
  border-radius: 20px;
  background-color: #3296FF;
  z-index: -1;
  color: #FFF;
}

.guide-num{
  text-align: center;
  color: #FFF;
  font-style: normal;
  margin-right: 7px;
  margin-left: 0px;
  padding-top: 2px;
  display: inline-block;
  text-indent: 0;
  font-size: 10px;
  line-height: 1.7;
  vertical-align: top;
}

.guide-num-double{
  margin-left: -3px;
  margin-right: 3px;
}

.guide-attention{
  border: 1px solid #3296FF;
  padding: 15px;
  color: #3296FF;
  box-sizing: border-box;
  margin: 15px 0;
  line-height: 1.5;
}

/***************************************
 help
***************************************/
.online-qa .help-box{
  position: relative;
}

.online-qa .help-box h2{
  font-size: 36px;
  text-align: center;
  border-bottom: 1px solid #00A0E9;
  padding-bottom: 15px;
}

.help-sub-box{
  width: 810px;
  margin: 0 auto;
}

.help-sub-box.testw1000{
  width: 1000px;
  margin: 0 auto;
}

.online-qa .header-shadow{
  bottom: 120px;
  top:inherit;
}

.online-qa .help-box .btn-area{
  width: 710px;
  margin: 0 auto;
  text-align: center;
}

.online-qa .help-box .btn-area .btn-area-box{
  display: inline-table;
  margin: 0 20px 40px 20px;
}

/***************************************
 flow
***************************************/

.online-qa .flow-box h2{
  font-size: 32px;
  text-align: center;
  border-bottom: 1px solid #00A0E9;
  padding: 15px;
  color: #FFF!important;
  background: #00D6E7;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyOGFhZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNTA0NmY1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(top, ellipse cover,  #00D6E7 0%, #28AAFF 100%);
  background: -webkit-radial-gradient(top, ellipse cover,  #00D6E7 0%,#28AAFF 100%);
  background: radial-gradient(ellipse at top,  #00D6E7 0%,#28AAFF 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00D6E7', endColorstr='#28AAFF',GradientType=1 );
}

.flow-box{
  width: 980px;
  margin: 0 auto;
}

.flow-sub-box{
  width: 740px;
  margin: 0 auto;
}

/***************************************
 qa
***************************************/
.online-qa h2{
  font-size: 26px;
  color: #3296FF;
  margin: 40px 0 20px 0;
}

.faq-box{
  margin-bottom: 40px;
}

.faq-detail-box{
  margin-bottom: 30px;
}

.online-qa  h4{  
  font-size: 22px;
  line-height: 1.5;
  color: #FFF;
  background: #3296FF;
  font-weight: 300;
  margin-bottom: 20px;
  padding: 5px 15px;
}

.faq-detail-box dl{
}

.faq-detail-box dt,
.faq-detail-box dd{
  font-size: 14px;
  font-size: 1.4rem;
}

.faq-detail-box dt{
}

.faq-detail-box dt a{
  color: #3296FF;
  display: block;
  line-height: 1.5;
  padding: 5px;
  margin-bottom: 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;  
  text-decoration: none;
  font-size: 16px;
}

.faq-detail-box dt a span{
  font-weight: bold;
  margin: 0 10px 0 0;
}

.faq-detail-box dd{
  margin-top: 5px;
  margin-bottom: 15px;
  line-height: 1.5;
  padding-left: 3.3em;
  display: none;
  font-size: 16px;
}

/***************************************
 spec
***************************************/
.online-spec h3{
  background: #3296FF;
  color: #FFF;
  font-size: 16px;
  padding: 5px 15px;
  margin-bottom: 20px;
}

.online-spec .guide-sub-box{
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 40px;
}

/***************************************
 glossary
***************************************/

.online-qa .glossary-box h2{
  font-size: 36px;
  text-align: center;
  border-bottom: 1px solid #00A0E9;
  padding-bottom: 15px;
}

.glossary-sub-box{
  width: 710px;
  margin: 0 auto;
}