﻿html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  font-family: "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "メイリオ", sans-serif;
}
body a{
  color: #0e1eb8;
  text-decoration: none;
}
body a:hover{
  color: #0e1eb8;
}
ul, menu, dir {
  margin: 0;
  list-style: none;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt25 {
  margin-top: 25px;
}
.mb10 {
  margin-bottom: 10px;
}
.mr15{
  margin-right: 15px;
}
.w-100{
  width: 100% !important; 
}
.no-padding{
 padding: 0 !important; 
}
.no-pl{
  padding-left: 0 !important; 
}
.no-margin{
 margin: 0 !important; 
}
.no-bd-top{
  border-top:none !important; 
}
.unset{
  position:unset !important;
}
.pl30{
  padding-left: 30px;
}
.pl15{
  padding-left: 15px;
}
.pl5{
  padding-left: 5px;
}
.fb16{
  font-size: 16px;
  font-weight: bold;
}
.break-only-pc{
  display: block;
}
/** Float to right only PC and tablet */
.pctb-pull-right {

  float: right;
}
div.height-oflow {
  height: auto;
  overflow: hidden;
}
.widauto {
  width: auto;
}
.wid100 {
  width: 100%;
}
div.border-bottom-line {
  border-bottom: 1px solid #f5f5f5;
}
.small{
  color: #777;
}
.fa-2{
  font-size: 2em;
}
.fa-3{
  font-size: 3em;
}
.fa-4{
  font-size: 7em;
}
.fa-5{
  font-size: 12em;
}
.fa-6{
  font-size: 20em;
}
/*******************************************************************************
 * Bootstrap rewrite
 ******************************************************************************/
.text-warning{
  color: #f39c12;
}
.text-success{
  color : #7fb500;
}
.text-light-gray{
  color: #dbdbdb;
}
.required,
.text-danger{
  color: #e60000;
}
.required{
  font-weight: normal;
}
.panel{
  border-radius: 3px;
}
.d-block,
.d-block > span{
  display: block;
  clear: both;
  height: auto;
  overflow: hidden;
}
.alert-success-info{
  border-color: #7fb500;
  color: #333;
}
.alert-danger{
  border-color: #e60000;
  background-color: #fff2ee;
  color: #e60000;
}
.alert-success-info > .fa,
.alert-danger > .fa{
  font-size: 120%;
}

/*******************************************************************************
 * Form UI
 ******************************************************************************/
.btn{
  border-radius: 3px;
}
.btn-danger{
  color: #fff;
  background-color: #e60000;
  border-color: #e60000;
}
.btn-group-lg>.btn, .btn-lg{
  padding: 10px 36px;
}
.btn-mid{
  padding: 10px 20px;
  font-size: 18px;
  line-height: 1.3333333;
}
.btn-small{
  padding: 5px 8px;
  font-size: 14px; 
  line-height: 1.3333333;
}
.btn-dark-gray{
  color: #fff;
  background-color: #5a5a5a;
  border-color: transparent;
}
.btn-dark-gray:hover,
.btn-dark-gray:focus{
  color: #fff;
  background-color: #666;
  border-color: #5a5a5a;
}
.btn-group-big>.btn, .btn-big{
  font-size: 24px;
  padding: 20px 36px;
}
.btn-purple{
  color: #fff;
  background-color: #4e5474;
  border-color: #4e5474;
}
.btn-purple:focus, .btn-purple:hover{
  color: #fff;
  background-color: #555e8a;
  border-color: #4e5474;
}
.color-gray{
  color: #777;
}
.background-color-pink{
  background-color: #fff2ee;
}
.color-red{
  color: #e60000;
}
.col-form-label{
  line-height: 32px;
}
.no-margin-top{
  margin-top: 0px !important;
}.no-margin-bottom{ margin-bottom:0px !important;}
.text-underline{
  text-decoration: underline;
}
/**  */
.lcol{
  padding-left: 0px;
}
.rcol{
  padding-right: 0px;
}
/*未入力の場合、背景色*/
.nullInputBg,
.bootstrap-select.nullInputBg .btn.dropdown-toggle{    
  background-color: cornsilk;
}

/** エラーメッセージ対応 */
.errfiled-bd{
  border: 2px solid #e60000 !important;
}

.errfiled-msg{
  margin: 10px 0 0;
  color: #e60000;
  font-size: 90%;
  display: block;
}
.errfiled-radio-bd input[type="radio"] + label::before {
  border-color: #e60000 ; 
  border-width: 2px;
}
.bootstrap-select.errfiled-bd{
  border-radius: 3px;
}
.bootstrap-select.btn-group .dropdown-toggle .filter-option{
  text-overflow: ellipsis;
}
/** Mobile Select専用 */
select[size].sp-selectpicker{  
  padding: 6px 12px;
  display: inline-block;  
  cursor: pointer;
  width: 100%;
  line-height: 34px;
  height: 34px;
  border-radius: 3px;
  border-color: #ccc;
}
.custom-radio > tbody tr td{
  padding: 0px 8px 0 5px;
}
/*　apex:selectRadio を利用するために、スタイルをカスタマイズ　*/
.custom-radio > tbody > tr > td label{
  white-space: nowrap;
}
.custom-radio > tbody > tr > td:nth-child(2){
  padding-left: 40px;
}
.custom-radio > tbody > tr > td:nth-child(1) label{
  margin-left: 18px;
}

.sanctioned-radio table{
  width: 100%;
}
.sanctioned-radio table > tbody > tr > td {
  display: block;
  width: 100%;
  float: left;
  margin-bottom: 5px;
  padding: 0px 8px 0 5px;
}

@media (max-width: 768px) {
  .custom-radio > tbody > tr > td{
    width: 60%;
  }
  .custom-radio > tbody > tr > td:nth-child(2){
    padding-left: 20px;
  }
  .sanctioned-radio table > tbody > tr > td label{
    white-space: normal;
  }
}
/*******************************************************************************
* corp-form-table
******************************************************************************/
.corp-form-table .checkbox{
  margin-bottom: 0;
}
.corp-form-table .required,
.corp-form-table .option{
  padding: 0px 6px;
  border: 1px solid #e60000;
  display: inline-block;
  color: #e60000;
  font-weight: normal;
  font-size: 85%;
  height: 20px;
  line-height: 20px;
}
.corp-form-table .option{
  border: 1px solid #5a5a5a;
  color: #5a5a5a;
}
.corp-form-table>tbody>tr>th, 
.corp-form-table>tfoot>tr>th, 
.corp-form-table>thead>tr>th{
  white-space: nowrap;
  width: 25px;
  vertical-align: top;
  padding-right: 0;
  padding-top: 15px;
}
.corp-form-table>tbody>tr>th.mark{
  background-color: #fff;
  vertical-align: top;
  padding-left: 8px;
  padding-right: 15px;
}
.corp-form-table>tbody>tr>td, 
.corp-form-table>tbody>tr>th, 
.corp-form-table>tfoot>tr>td, 
.corp-form-table>tfoot>tr>th, 
.corp-form-table>thead>tr>td, 
.corp-form-table>thead>tr>th{
  border: none;
}
.corp-form-table>tbody>tr>td .remark{
  margin: 10px 0 0;
  color: #777;
  font-size: 90%;
}
/** 名前入力Box */
.corp-form-table .inline-btn .form-control{
  width: calc(100% - 75px);
  margin-right: 15px;
}
.corp-form-table .inline-name .form-control{
  width: calc(50% - 10px);
}
.corp-form-table .inline-name .form-control:first-child{
  margin-right: 17px;
}
.corp-form-table>tbody>tr>th.wid160{
  width: 160px;
}
.corp-form-table.app-table .inline-name .form-control{
  width: calc(50% - 45px);
}
.corp-form-table .inline-phone .form-control{
  width: calc(33% - 20px);
  display: inline-block;
}
.corp-form-table.app-table .pointer-events{
  pointer-events: none;
}
.corp-form-table.app-table .pointer-events>input{
  background-color:#EEEEEE;
}
/******* 申込入力① ******/
.corp-form-table.app-table .form-control.postcode{
  display: inline-block;
  width: auto;
}
.corp-form-table.app-table .inline-name .form-control.position-last-name,
.corp-form-table.app-table .inline-name .form-control.position-first-name,
.corp-form-table.app-table .inline-name .form-control.position-last-name-kana,
.corp-form-table.app-table .inline-name .form-control.position-first-name-kana,
.corp-form-table.app-table .inline-name .form-control.contact-last-name,
.corp-form-table.app-table .inline-name .form-control.contact-first-name,
.corp-form-table.app-table .inline-name .form-control.contact-last-name-kana,
.corp-form-table.app-table .inline-name .form-control.contact-first-name-kana,
.corp-form-table.app-table .inline-name .form-control.corp-no-input{
  width: calc(50% - 9px);
}
/******* 申込入力② ******/
.purpose-op-group table.businessPurposers{
  width: 100%;
}
.purpose-op-group table.businessPurposers > tbody > tr > td{
  display: block;
  width: 33.33333333%;
  float: left;
  margin-bottom: 5px;
}
.purpose-op-group table.lcreason{
  width: 100%;
}
.purpose-op-group table.lcreason > tbody > tr > td{
  display: block;
  width: 33.33333333%;
  float: left;
  margin-bottom: 5px;
}
.purpose-op-group .checkbox table.businessPurposers > tbody > tr > td label{
  padding-left: 5px;
}
.purpose-op-group .checkbox table.lcreason > tbody > tr > td label{
  padding-left: 5px;
}
.purpose-op-group .form-control.BusinessPurposeOther{
  width: 100%;
}
.purpose-op-group .errfiled-bd.businessPurposers{
  border: none !important; 
}
.purpose-op-group .checkbox .errfiled-bd.businessPurposers label:before{
  border-color: #e60000 !important;
  border-width: 2px;
}

.purpose-op-group .errfiled-bd.lcreason{
  border: none !important; 
}
.purpose-op-group .checkbox .errfiled-bd.lcreason label:before{
  border-color: #e60000 !important;
  border-width: 2px;
}

.purpose-op-group table.businessContentRiskrs{
  width: 100%;
}
.purpose-op-group table.businessContentRiskrs > tbody > tr > td{
  display: block;
  width: 33.33333333%;
  float: left;
  margin-bottom: 5px;
  white-space:nowrap;
}
.purpose-op-group .checkbox table.businessContentRiskrs > tbody > tr > td label{
  padding-left: 5px;
}
.purpose-op-group .errfiled-bd.businessContentRiskrs{
  border: none !important; 
}
.purpose-op-group .checkbox .errfiled-bd.businessContentRiskrs label:before{
  border-color: #e60000 !important;
  border-width: 2px;
}

.purpose-op-group table.sanctionCountryrs{
  width: 100%;
}
.purpose-op-group table.sanctionCountryrs > tbody > tr > td{
  display: block;
  width: 100%;
  float: left;
  margin-bottom: 5px;
  white-space:nowrap;
}
.purpose-op-group .checkbox table.sanctionCountryrs > tbody > tr > td label{
  padding-left: 5px;
}
.purpose-op-group .errfiled-bd.sanctionCountryrs{
  border: none !important; 
}
.purpose-op-group .checkbox .errfiled-bd.sanctionCountryrs label:before{
  border-color: #e60000 !important;
  border-width: 2px;
}

.indirect-relationDiv > .fstul > .table{
  margin-bottom: 0;
}
.corp-form-table.app-table .inline-number .form-control{
  display: inline-block;
  width: calc(50% - 10px);
}
.corp-form-table.app-table .inline-number .form-control:first-child{
  margin-right: 17px;
}
.corp-form-table.app-table .inline-country .form-control{
  display: inline-block;
  width: calc(50% - 10px);
}
.corp-form-table.app-table .inline-country .form-control:first-child{
  margin-right: 17px;
}
input.small-placeholder::placeholder{
  font-size : 80%;
}
input.small-placeholder:-ms-input-placeholder{
  font-size : 80%;
}
input.ss-placeholder::placeholder{
  font-size : 70%;
}
input.ss-placeholder:-ms-input-placeholder{
  font-size : 70%;
}
.col-sm-6.mb10.add-status{
  width:35%;
}
/** お客さまとの関係注意文言 */
.caution{
  margin: 10px 0 0;
  color: #e60000;
  font-size: 90%;
}
/******* 書類アップロード ******/
.corp-form-table.file-upload-table{
  overflow-x: hidden;
}
.corp-form-table.file-upload-table .imgpos{
  display: block;
  height: auto;
  overflow: hidden;
}
.corp-form-table.file-upload-table .imgpos .imgpreview{
  height: 120px;
  text-align: center;
  min-width: 120px;
}
.corp-form-table.file-upload-table .imgpos .imgpreview img{
  max-width: 172px;
  max-height: 172px;
}
.corp-form-table.file-upload-table .imgpos .imgpreview .pdf-icon{
  font-size: 48px;
  line-height: 120px;
}
.corp-form-table.file-upload-table>tbody>tr>th.pc-wid145{
  width: 145px;
}
  /** For Tablet */
@media (max-width: 972px) and (min-width: 768px){
  .corp-form-table>tbody>tr>th{
    display: block;
    width: auto;
    float: left;
    padding-top: 8px;
  }
  .corp-form-table>tbody>tr>td{
    display: block;
    clear: both;
    height: auto;
    overflow: hidden;
  }
  .corp-form-table>tbody>tr>th.mark{
    padding-left: 15px;
  }
  .corp-form-table>tbody>tr>th.wid160{
    width: 25px;
  }
}
/** For Smart Phone */
@media (max-width: 767px) {
  
  .corp-form-table>tbody>tr>th{
    display: block;
    width: auto;
    float: left;
    padding-top: 8px;
  }
  .corp-form-table>tbody>tr>td{
    display: block;
    clear: both;
    height: auto;
    overflow: hidden;
  }
  .corp-form-table>tbody>tr>th.mark{
    padding-left: 15px;
  }
  .corp-form-table>tbody>tr>th.wid160{
    width: 25px;
  }
  .corp-form-table.file-upload-table>tbody>tr>th.pc-wid145{
    width: auto;
  }
  .corp-form-table.file-upload-table>tbody>tr>td .iptDiv,
  .corp-form-table.file-upload-table>tbody>tr>td p{
    width: calc(100% - 50px);
  }
  .confirm-container .corp-form-table.file-upload-table>tbody>tr>td p.remark{
    width: 100%;
  }
  /******* 申込入力② ******/
  .purpose-op-group table.businessPurposers > tbody > tr > td{
    width: 50%;
    padding-left: 15px;
  }
  .purpose-op-group table.lcreason > tbody > tr > td{
    width: 100%;
    padding-left: 15px;
  }
  .purpose-op-group table.businessContentRiskrs{
    width: 100%;
  }
  .purpose-op-group table.businessContentRiskrs > tbody > tr > td{
    width: 50%;
    padding-left: 15px;
    white-space: normal;
  }
  .purpose-op-group table.sanctionCountryrs{
    width: 100%;
  }
  .purpose-op-group table.sanctionCountryrs > tbody > tr > td{
    padding-left: 15px;
    white-space: normal;
  }
  /* 実質支配者 */
  .sr-box-panel .panel-body{
    padding-left: 5px;
  }
}
/******* WEB面談の予約 ******/
/** .calendar */
.calendar{
  width: 100%;
}
.calendar .only-pc-tab{
  display: inline-block;
}
.calendar .only-sp{
  display: none;
}
.calendar tr>th,
.calendar tr>td{
  border: 1px solid #ccc;
  text-align: center;
  padding: 8px;
}
.calendar tr>th{
  background-color: #f5f6f9;
}
.calendar tr>th>.month,
.calendar tr>th>.day,
.calendar tr>th>.week{
  font-weight: normal;
  display: block;
  text-align: center;
  font-size: 85%;
}
.calendar tr>th>.month,
.calendar tr>th>.week{
  color: #777;
}
.calendar tr>th>.day{
  font-size: 200%;
  font-weight: bold;
}
.calendar tr>th.holiday,
.calendar tr>th.holiday>.month,
.calendar tr>th.holiday>.week{
  color: #e60000;
}
.calendar tr>th.sat,
.calendar tr>th.sat>.month,
.calendar tr>th.sat>.week{
  color: #7fb500
}
.calendar tr>td.time{
  padding: 12px 8px;
}
.calendar tr>td.disabled{
  background-color: #e6e6e6;
}
.calendar tr>td>.holiday-name{
  width: 20px;
  display: inline-block;
  height: 100%;
  color: #e60000;
}
.calendar tr>td.enable{
  padding: 0;
}

.calendar tr>td.oldselectedTd{
  padding: 0;
}
.calendar tr>td.oldselectedTd >a{
  pointer-events: none; 
  cursor: default;
}

.calendar tr>td .btn-reserve{
  height: 45px;
  line-height: 45px;
  width: 100%;
  display: block;
  background-color: #fff;
  color: #333;
  /*padding: 6px 12px;
  border: 1px solid #ccc;*/
  text-decoration: none;
  /*border-radius: 3px;*/
}
.calendar tr>td .btn-reserve:hover,
.calendar tr>td .btn-reserve:focus{
  background-color: #c9302c;
  color: #fff;
}
.calendar tr>td .btn-reserve.active{
  background-color: #e60000;
  color: #fff;
}
/** For Smart Phone */
@media (max-width: 767px) {

  .calendar tr>td .btn-reserve{
    line-height: 84px;
    height: auto;
    width: 100%;
    display: block;
    background-color: #fff;
    color: #333;
    text-decoration: none;
  }
  .nopadding-in-sp{
    padding: 0 !important;
  }
  .calendar tr>th>.day{
    font-size: 110%;
  }
  .calendar tr>td.time{
    padding: 12px 3px;
  }
  .calendar .only-pc-tab{
    display: none;
  }
  .calendar .only-sp{
    display: inline-block;
  }
}
/*******************************************************************************
* confirm-container
******************************************************************************/
.confirm-container .panel-head-btn{
  font-size: 85%;
}
.confirm-container .panel-title a,
.confirm-container .panel-title a:hover,
.confirm-container .panel-title a:focus,
.confirm-container .panel-head-btn:hover,
.confirm-container .panel-head-btn:focus{
  text-decoration: none;
  color: #333;
}
.confirm-container .panel-title a[data-toggle="collapse"]{
  display: inline-block;
  width: calc(100% - 50px);
}

.confirm-container .panel-title > a.collapsed .fa-angle-right:before{
  content: "\f107";
}
.confirm-container h5{
  font-weight: bold;
  border-left: 3px solid #e60000;
  line-height: 1.4;
  padding-left: 8px;
}
div.confirm-container td{
  word-break: break-all;
}
div.welcome-wrap-container {
  word-break: break-all;
}
/*******************************************************************************
* corp-form-info-table
******************************************************************************/
.corp-form-info-table>tbody>tr>th, 
.corp-form-info-table>tfoot>tr>th, 
.corp-form-info-table>thead>tr>th{
  white-space: nowrap;
  width: 25px;
  vertical-align: top;
  padding: 8px 12px 8px 8px;
}
.corp-form-info-table>tbody>tr>td, 
.corp-form-info-table>tbody>tr>th, 
.corp-form-info-table>tfoot>tr>td, 
.corp-form-info-table>tfoot>tr>th, 
.corp-form-info-table>thead>tr>td, 
.corp-form-info-table>thead>tr>th{
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 8px;
}
.corp-form-info-table>tbody>tr:first-child>th,
.corp-form-info-table>tbody>tr:first-child>td{
  border-top: none;
}
.corp-form-info-table>tbody>tr:last-child>th,
.corp-form-info-table>tbody>tr:last-child>td{
  border-bottom: none;
}
.confirm-container .row.checkbox{
  padding-left: 0;
}
/** For Smart Phone */
@media (max-width: 767px) {
  .corp-form-info-table>tbody>tr>th{
    border-top: none;
    border-bottom: none;
    width: auto;
  }
  .corp-form-info-table>tbody>tr:first-child>th:first-child{
    /*border-top: 1px solid #ddd;*/
  }
  .corp-form-info-table>tbody>tr>th,
  .corp-form-info-table>tbody>tr>td{
    display: block;
    clear: both;
    height: auto;
    overflow: hidden;
  }
  .corp-form-info-table>tbody>tr:first-child>td,
  .corp-form-info-table>tbody>tr>td{
    border-top: 1px solid #f5f5f5;
  }

  .confirm-container .panel-collapse > .panel-body > .col-sm-12{
    padding: 0;
  }
  .confirm-container .row.checkbox{
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .confirm-container .row.radio{
    margin-left: 0px;
  }
}


/*******************************************************************************
 * header
 ******************************************************************************/
#header {
  border-top: 1px solid #d2d2d2;
  border-bottom: 4px solid #e60000;
  padding-top: 8px;
  padding-bottom: 8px;
  height: 72px;
}
#header h1 {
  width: 950px;
  margin: 0;
  margin: 0 auto;
}
#header .img_logo3 {
  float: right;
  margin-top: 10px;
}
#header .img_logo3 img{
  height: 20px;
}

/*******************************************************************************
 * body
 ******************************************************************************/
#main{
  min-height: calc(100% - 216px);
}
.container{
  width: 950px;
  padding: 0;
}
#main .title{
  font-size: 20px;  
  margin-bottom: 15px;
  font-weight: bold;
}
#main .section{
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 1px;
  margin: 20px 0 15px 0;
  float: none;
}
#main .section h2{
  border-left: 4px solid #e60000;
  background-color: #f5f6f9;
  padding: 0 12px;
  margin: 0;
  font-size: 15px;
  line-height: 32px;
  font-weight: bold;
}
/*******************************************************************************
 * status-bar / steps
 ******************************************************************************/
.steps {
  list-style-type: none;
  /* padding: 0; */
  margin-bottom: 10px;
  overflow: hidden;
}
.steps li {
  display: inline-block;
  margin-bottom: 3px;
  padding: 2px;
}
.steps li a, .steps li p {
  background: #5a5a5a;
  padding: 8px 12px;
  color: #fff;
  display: block;
  font-size: 14px;
  /*font-weight: bold;*/
  position: relative;
  text-indent: 12px;
  margin: 0;
}
.steps li a:hover, .steps li p:hover {
  text-decoration: none;
}
.steps li a:before, .steps li p:before {
  border-bottom: 18px solid transparent;
  border-left: 12px solid #fff;
  border-top: 18px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  margin-top: -18px;
}
.steps li a:after, .steps li p:after {
  border-bottom: 18px solid transparent;
  border-left: 12px solid #5a5a5a;
  border-top: 18px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  left:100%;
  top: 50%;
  width: 0;
  margin-top: -18px;
  z-index: 1;
}
.steps li.first a:before, .steps li.first p:before {
  border-left:none;
}
.steps li.first a, .steps li.first p {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.steps li.last a:after, .steps li.last p:after {
  border-bottom: none;
  border-top: none;
}
.steps li.last a, .steps li.last p {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.steps li.first a, .steps li.first p {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.steps li.active a, .steps li.active p {
  background: #e60000;
  color: #fff;
}
.steps li.active a:after, .steps li.active p:after {
  border-left: 12px solid #e60000;
}
.steps li.undone a, .steps li.undone p {
  background: #dbdbdb;
  color: #000;
}
.steps li.undone a:after, .steps li.undone p:after {
  border-left: 12px solid #dbdbdb;
}
.steps li.undone p {
  color: #000;
}
.status-bar .flex-container, 
.status-bar-mini .flex-container {
  display: flex;
  flex-wrap: nowrap;
  padding-right: 15px;
}
.status-bar .flex-container > li, 
.status-bar-mini .flex-container > li {
  min-width: 20px;
  flex-grow: 1;
}

.status-bar .flex-container .steps li.first > p, 
.status-bar-mini .flex-container .steps li.first > p {
  text-indent: 0px;
}

/* sp:768 */
@media screen and (max-width: 768px) {
  .status-bar-mini .steps li p {
    padding: 8px 0px 8px 14px;
    font-size: 13px;
  }
  .status-bar-mini .sp-col-wid-5{
    width: 41.66666667%;
  }
  .status-bar-mini .sp-col-wid-4{
    width: 33.33333333%;
  }
  .status-bar-mini .sp-col-wid-3{
    width: 25%;
  }

}

/* iPad:988 */
@media screen and (max-width: 988px) {

  .status-bar .flex-container.steps li:not(.active) > p {
    text-indent: -9999px;
  }
  .status-bar .flex-container.steps li.active p{
    white-space: nowrap;
  }
  .status-bar .flex-container.steps li.active{
    min-width: fit-content;
  }
  .status-bar .steps li.active.first > p,
  .status-bar .steps li:not(.active) > p{
    padding-left: 12px;
  }
}

/*******************************************************************************
 * vert-steps
 ******************************************************************************/
.flow-steps h4{
  font-size: 15px;
  font-weight: bold;
}
.flow-steps > li:first-child {
  margin-top: 0;
}
.flow-steps > li {
  position: relative;
  border: 1px solid #ccc;
  display: table;
  width: 100%;
  margin-top: 15px;
  border-radius: 3px;
}
.flow-steps > li::before, .flow-steps > li::after{
  border-left: 18px solid transparent;
  border-top: 12px solid #fbf9eb;
  border-right: 18px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  left: calc((153px - 36px) / 2);
  bottom: -12px;
  width: 0;
  margin-top: -18px;
  z-index: 1;
}
.flow-steps > li::after{
  bottom: -11px;
}
.flow-steps > li::before {
  border-top-color:#ccc;
}
.flow-steps > li.done::before{
  border-top-color: #7fb500;
}
.flow-steps > li.active::before{
  border-top-color: #e60000;
}
.flow-steps > li.undone::before {
  border-top-color: #ccc;
}
.flow-steps > li:last-child::before,
.flow-steps > li:last-child::after{
  border-color: transparent !important;
}
.flow-steps > li .steptitle {
  font-size: 114.29%;
  width: 153px;
  background-color: #fbf9eb;
  border-right: 1px solid #ccd0d9;
  text-align: center;
  /* font-weight: bold; */
  display: table-cell;
  vertical-align: middle;
}
.flow-steps > li.done,
.flow-steps > li.done .steptitle{
  border-color: #7fb500;
}
.flow-steps > li.done .inner{
  padding: 5px 20px 5px;
}
.flow-steps > li .inner {
  padding: 5px 20px 15px;
  display: table-cell;
  vertical-align: middle;
}
.flow-steps > li .inner p{
  margin : 0;
}
.flow-steps > li.active,
.flow-steps > li.active .steptitle{
  border-color: #e60000;
}
.flow-steps > li .readmore{
  float: right;
  display: none;
  font-size: 85%;
  font-weight: normal;
}
.flow-steps > li .readmore:hover,
.flow-steps > li .readmore:focus{
  text-decoration: none;
}
.flow-steps > li.done .readmore{
  display: block;
}
.flow-steps > li.done .readmore[aria-expanded="true"] > .fa-angle-down:before{
  content: "\f106";
}
.flow-steps > li.done .body{
  margin-bottom: 10px;
}

/** For Smart Phone */
@media (max-width: 767px) {
  .flow-steps p{
    margin: 0;
  }
  .flow-steps > li::before, .flow-steps > li::after{
    left: calc((100% - 36px) / 2);
    border-top-color: #fff;
  }
  .flow-steps > li .steptitle,
  .flow-steps > li .inner{
    display : block;
    width : 100%;
    border-right: none;
  }
  .flow-steps > li .steptitle{
    border-bottom: 1px solid #ccd0d9;
    padding: 10px;
  }
  .flow-steps > li .inner{
    padding: 15px;
  }
  .flow-steps > li.done .inner{
    padding: 5px 15px;
  }
  
}
/*******************************************************************************
 * note-box
 ******************************************************************************/
.note-box {
  cursor: initial;
  padding: 10px;
  border: 1px solid #E2DEC2;
  background: #F9F8F2;
}
.note-box .head {
  padding: 0 0 7px 5px;
  border-bottom: 1px solid #E2DEC2;
  line-height: 1.5;
}
.note-box .head .fa-exclamation-triangle:before {
  color: #e60000;
}
.note-box h3{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  padding-left: 10px;
}
.note-box h3 > span{
  font-size: 90%;
  font-weight: normal;
  line-height: 1.5;
}
.note-box .list-dot{
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
  margin: 10px 25px; 
  line-height: 1.5;
}
.note-box .list-dot.disc-list{
  list-style: disc;
  padding-left: 5px;
}
.note-box .head .fa-file-pdf-o:before {
  color: #e60000;
}
.fa-file-pdf-o:before {
  color: #e60000;
}

.note-box.clickable {
  cursor: pointer;
}
/*******************************************************************************
 * アンケート用
 ******************************************************************************/
 /* アンケート　チェックボックス　*/
.question-title{
  font-size: 100%;
  color: #333;
  margin-bottom: 6px;
  font-weight: bold;
}

.question-op-group table{
  width: 100%;
}
.question-op-group table > tbody > tr > td {
  display: block;
  width: 100%;
  float: left;
  margin-bottom: 5px;
}
.question-op-group .checkbox table > tbody > tr > td label{
  padding-left: 5px;
}
.question-op-group .form-control.BusinessPurposeOther{
  width: 100%;
}
.question-op-group .errfiled-bd{
  border: none !important; 
}
.question-op-group .checkbox .errfiled-bd label:before{
  border-color: #e60000 !important;
  border-width: 2px;
}

.question-op-group .confirm-checkbox{
  line-height: 1.42857143;
  width: 100%;
}

.question-op-group .confirm-checkbox .checkbox {
  display: block;
  width: 100%;
  float: left;
  margin-bottom: 5px;
}
.ml18{
  margin-left: 18px;
}
div.sp-ipt-focus-dis{
  display: inline-block;
  width: 100%;
}
/* アンケート　radio　*/
.question-op-radio-group{
  width: 100%;
}

.question-op-radio-group table{
  width: 100%;
}
.question-op-radio-group table > tbody > tr > td {
  display: block;
  width: 25%;
  float: left;
  margin-bottom: 5px;
  padding: 0px 8px 0 5px;
}
.question-op-radio-group table.radio-label-wid-half > tbody > tr > td {
  display: block;
  width: 50%;
  float: left;
  margin-bottom: 5px;
}

.question-op-radio-group table.radio-label-wid-1-of-3 > tbody > tr > td {
  display: block;
  width: 33.33333%;
  float: left;
  margin-bottom: 5px;
}

.question-op-radio-group table.radio-label-wid-1-of-5 > tbody > tr > td {
  display: block;
  width: auto;
  float: left;
  margin-bottom: 5px;
}

/*　apex:selectRadio を利用するために、スタイルをカスタマイズ　*/
.custom-quesion-op-radio > tbody > tr > td label{
  white-space: nowrap;
  margin-left: 18px;
}
/*　apex:selectRadio を利用するために、スタイルをカスタマイズ　申込情報入力③画面用*/
.custom-quesion-op-islradio > tbody > tr > td label{
  white-space: normal;
  margin-left: 18px;
}
/** For Tablet */
@media (max-width: 972px) and (min-width: 768px){
  /* 縦向きの場合のスタイル */
  .title-space-only-pc{
    display: none;
  }
}
/** For Smart Phone */
@media (max-width: 767px) {
  /* 縦向きの場合のスタイル */
  .title-space-only-pc{
    display: none;
  }
  /* アンケート　チェックボックス　*/
  .question-op-group table > tbody > tr > td{
    width: 100%;
    padding-left: 15px;
  }
  .question-op-radio-group table > tbody > tr > td {
    display: block;
    width: 100%;
    float: left;
    margin-bottom: 5px;
  }
  .question-op-radio-group table.radio-label-wid-half > tbody > tr > td {
    display: block;
    width: 100%;
    float: left;
    margin-bottom: 5px;
  }
  .question-op-radio-group table.radio-label-wid-1-of-3 > tbody > tr > td {
    display: block;
    width: 100%;
    float: left;
    margin-bottom: 5px;
  }
  
}
/*******************************************************************************
 * Leading
 ******************************************************************************/
.agreedoclink > i.fa-angle-right:before {
  color: #e60000;
}
.leading-container .checkbox label.agreechk-label:before{
  border-color: #e60000 !important;
}
.note-box-info {
  border: 1px solid #E2DEC2;
  background: #F9F8F2;
}
.note-box-info > .head {
  padding: 10px;
  border-bottom: 1px solid #E2DEC2;
}
.note-box-info > .body {
  padding: 10px;
}
.note-box-info > .no-margin-info{
  margin: 0px;
}
.info-div > table {
  width: 80%;
  margin-bottom: 0px; 
}
.info-div > table >tbody>tr {
  border: 1px solid #ddd;
}
.info-div > table >tbody>tr>th {
  width: 20%;
  background-color: #EBE8D4;
  vertical-align: middle;
}
.info-div > table >tbody>tr>td {
  border-left: 1px solid #ddd;
}
.info-div.pic-info > table >tbody>tr>th{
  background-color: #fff;
}
.info-div.accno-th > table >tbody>tr>th{
  width: 33.3%;
  background-color: #fbf9eb;
}
@media screen and (max-width: 788px) {
  .info-div {
    text-align: -webkit-center;
  }
  .info-div > table {
    width: 100%;
  }
  .info-div > table >tbody>tr>th {
    width: 25%;
  }
  /** 流れ画面写真Box */
  .info-div.pic-info > table >tbody>tr>th,
  .info-div.pic-info > table >tbody>tr>td {
    width: 100%;
    display: block;
    float: left;
  }
  .info-div.pic-info > table >tbody>tr>th{
    border-top: none;
    text-align: center;
  }
  .info-div.pic-info > table >tbody>tr>td{
    border-left: none;
  }
}
.act-as-a {
  color: #0e1eb8;
  text-decoration: none;
  cursor:pointer; 
}
.act-as-a:hover, .act-as-a:focus{
  color: #0e1eb8;
  text-decoration: underline;
  cursor:pointer;  
}
.not-a {
  text-decoration: none;
  color: inherit;
}
.not-a:hover, .not-a:focus {
  text-decoration: none;
  color: inherit;
  cursor:pointer;  
}
.leading-container .notread-div{
  white-space: nowrap;
}
.leading-container .notread-div .readed{
  display: none;
}
.leading-container .note-box-info.has-readed .notread-div .readed{
  display: inline;
  color: #777;

}
.leading-container .note-box-info.has-readed .notread-div .notread{
  display: none;
}
.leading-container .note-box-info.has-readed .agreechk-label{
  color : #333;
}
/*******************************************************************************
 * flex-disp
 ******************************************************************************/
.flex-disp{
  display: flex;
}
.flex-disp > div.i-div{
  float: left; margin-top: 5px; margin-left: 10px;
}
.flex-disp > div.i-div > i{
  font-size: 20px;
}
.flex-disp > ul.pdf-ul{
  margin-left: -30px; 
  flex-grow: 2;
}
.flex-disp > div.notread-div{
  float: right;
  color:#e60000;
  font-weight: bold;
  min-width: fit-content;
}
/*******************************************************************************
 * entry
 ******************************************************************************/
.complete .right-box{
  
}
/*******************************************************************************
 * pageTemplate
 ******************************************************************************/

.outPut-text-wrap{
  word-wrap: break-word;
}  
.purpose-op-2{
  display: none;
}
input[type="radio"].styled:checked + label:after {
  font-family: 'FontAwesome';
  content: "" !important;
}
.with-hint p,  .with-hint .form-control{
  width: calc(100% - 40px);
  display: inline-block;
}
.agreechkdiv {
  background-color: #fff2ee !important;
  padding: 12px 33px !important;
  margin: 0 !important;
  font-size: 15px;
  /*line-height: 12px;*/
  font-weight: bold;
}

.infodiv{
  padding: 12px 20px !important; 
  border: 1px solid #E2DEC2; 
  background: #F9F8F2 !important; 
}
/***************和暦用****************/
.input-group-withoubackgroud{
  padding-right: 0;
  display: table;
  border-collapse: separate;
  padding-left: 0px;
}
.input-group-addon-withoubackgroud {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;    
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
/** For Smart Phone */
@media (max-width: 767px) {
  .wareki-input-group .form-control.wareki-date-year{
    margin-left: 5px;
  }
  .wareki-input-group .form-control.wareki-date-year,
  .wareki-input-group .form-control.wareki-date-month,
  .wareki-input-group .form-control.wareki-date-day{
    min-width: 34px;
  }

  .wareki-input-group .input-group-addon-withoubackgroud {
    padding: 6px 5px;
  }
}
/***************希望支店用****************/
.input-group-addon-withoubackgroud-hopedbranch {
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
/*******************************************************************************
 * topics
 ******************************************************************************/
#main .topics{
  border-top: 1px solid #e60000;
  border-bottom: 1px solid #e60000;
  text-align: center;
  height: 88px;
}
#main .topics h2{
  margin: 0;
  font-size: 32px;
  color: #e60000;
  height: 88px;
  line-height: 88px;
}

/*******************************************************************************
 * Timeline
 ******************************************************************************/
.timeline {
  position: relative;
  margin: 0 0 30px 0;
  padding: 0;
  list-style: none;
}
.timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e60000;
  left: 33px;
  margin: 0;
  border-radius: 2px;
}
.timeline > li {
  position: relative;
  margin-right: 10px;
  margin-bottom: 15px;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li:last-child{
  background-color: #fff;
  margin-bottom: 0;
  padding-bottom: 15px;
}
.timeline > li > .timeline-item {
  border-bottom: 1px solid #f4f4f4;
  margin-top: 0;
  background: #fff;
  color: #444;
  margin-left: 60px;
  margin-right: 15px;
  padding: 0;
  position: relative;
}
.timeline > li > .timeline-item > .time {
  color: #999;
  float: right;
  padding: 10px;
  font-size: 12px;
}
.timeline > li > .timeline-item > .timeline-header {
  margin: 0;
  color: #555;
  border-bottom: 1px solid #f4f4f4;
  padding: 5px 10px 10px;
  font-size: 16px;
  font-weight:bold;
  line-height: 1.1;
}
.timeline > li > .timeline-item > .timeline-header > a {
  font-weight: 600;
}
.timeline > li > .timeline-item > .timeline-body,
.timeline > li > .timeline-item > .timeline-footer {
  padding: 10px;
}
.timeline > li > .fa,
.timeline > li > .glyphicon,
.timeline > li > .ion {
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 30px;
  position: absolute;
  color: #666;
  background: #d2d6de;
  border-radius: 50%;
  text-align: center;
  left: 18px;
  top: 0;
}
.timeline > li > .flow-icon {
  font-size: 16px;
  font-weight: bold;
  background-color: #e60000;
  color: #fff;
}
.timeline > .time-label > span {
  font-weight: 600;
  padding: 5px;
  display: inline-block;
  background-color: #fff;
  border-radius: 4px;
}
.timeline-inverse > li > .timeline-item {
  background: #f0f0f0;
  border: 1px solid #ddd;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.timeline-inverse > li > .timeline-item > .timeline-header {
  border-bottom-color: #ddd;
}
.timeline > li > .timeline-item > .timeline-body, 
.timeline > li > .timeline-item > .timeline-footer{
  line-height: 1.5;
}
.timeline > li > .fa {
  width: 50px;
  height: 50px;
  left: 8px;
}
.timeline > li > .flow-icon > div > .step-top {
  margin: 2px 0 -15px;
  font-size: 10px;
  font-weight: 600;
}
.timeline > li > .flow-icon > div > .step-bottom {}

.timeline > li > .flow-icon > div > .step-top > i {
  margin-top: 8px;
  font-size: 30px;
}
/*******************************************************************************
 * file upload
 ******************************************************************************/
.upload-file-panel .imgpos .imgpreview{
  height: 160px;
  padding: 4px;
  border: 1px solid #ddd;
  display: inline-block;
  float: left;
}
.upload-file-panel .imgpos .imgpreview img{
  height: 100%;
}
.upload-file-panel .imgpos .delrowbtn{
  margin-left: 15px;
}
.upload-file-panel .delOTrowbtn{
  margin-left: 10px;
}
/** For Smart Phone */
@media (max-width: 767px) {
  .upload-file-panel .panel-body{
    padding-left: 5px;
    padding-right: 5px;
  }
  .upload-file-panel .delOTrowbtn{
    margin-left: 2px;
  }
  
}
/*******************************************************************************
 * mypage
 ******************************************************************************/
.mypage-header{
  position: relative;
  padding: 16px 0;
  /*background-color: #5a5a5a;*/
  /*background-color: #211f80; blue*/
  background-color: #f5f6f9;
  border-bottom: 1px solid #d2d2d2;
}
.mypage-header h1{
  width: 950px;
  margin: 0 auto;
  /*color: #fff;*/
  font-size: 26px;
}
#sidebar{
  display: block;
}

.my-panel > .panel-heading > h4{
  font-size: 15px;
  font-weight: bold;
}
.my-panel{
  border-top: 2px solid #e60000;
}
.my-panel > .panel-heading{
  /*background-color: #EBE8D4;*/
}
.navbar-toggle {
  position: absolute;
  top: 11px;
  right: 15px;
  border-radius: 3px;
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.navbar-toggle .icon-bar {
  background-color: #e60000;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.crumb{
  font-size: 14px;
}
#main .mypage-title {
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  padding: 1px;
  margin: 20px 0 15px 0;
  float: none;
}
#main .mypage-title h2 {
  border-left: 4px solid #e60000;
  padding: 0 12px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  margin: 6px 0;
}
/** For Tablet */
@media (max-width: 972px) and (min-width: 768px){
  #sidebar.collapse{
    display: none;
  }
  #sidebar.collapse.in{
    display: block;
  }
  .mypage-header h1{
    width: 100%;
    padding: 0 15px;
    font-size: 24px;
  }
  .navbar-toggle{
    display: block;
  }
}
/** For Smart Phone */
@media (max-width: 767px) {
  #sidebar.collapse{
    display: none;
  }
  #sidebar.collapse.in{
    display: block;
  }
  .mypage-header h1{
    width: 100%;
    padding: 0 15px;
    font-size: 24px;
  }
  .navbar-toggle{
    display: block;
  }
}


/*******************************************************************************
 * footer
 ******************************************************************************/
footer{
  margin-top: 50px;
}
footer a{
  color: #000;
  text-decoration: none;
}
footer a:hover{
  color: #000;
}
#footer{
  background: #dbdbdb;
  border-top: 4px solid #5a5a5a;
  line-height: 1.4;
  font-size: 85%;
}
#footer .links{
  margin: 0 auto;
  padding: 15px 0;
  width: 950px;
  text-align: center;
}
#footer span{
  padding: 0 10px 0 11px;
}
.copyright{
  background: #5a5a5a;
  margin: 0 auto;
  text-align: center;
}
.copyright p{
  color: #fff;
  padding: 14px 0;
  font-size: 85%;
  margin: 0;
}
.footer-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/*******************************************************************************
 * Responsive
 ******************************************************************************/
/** For PC 992px */
@media (min-width: 972px){
  
}
/** For Tablet */
@media (max-width: 972px) and (min-width: 768px){
  #header h1{
    width: 100%;
    padding: 0 15px;
  }
  .container{
    width: 100%;
    padding: 0 15px;
  }
  #footer .links{
    width: 100%;
  }
}
/** For Smart Phone */
@media (max-width: 767px) {
  /** 生年月日欄で2桁数 */
  div.wareki-input-group .sp-selectpicker{  
    padding: 6px 6px;
  }
  h4.mt0-only-sp {
    font-size: 16px;
    margin-top: 0px;
  }
  .mt25{
    margin-top: 15px;
  }
  #header h1{
    width: 100%;
    padding: 0 15px;
    
  }
  #header h1 .img_logo1 img{
    margin-top: 4px;
  }
  #header h1 .img_logo2{
    display: none;
  }
  #main{
    min-height: 0;
  }
  .container{
    width: 100%;
    padding: 0 15px;
  }
  .steps li a, .steps li p {
    text-indent: 0px;
    padding: 8px 0px 8px 18px;
  }
  .only-pc{
    display: none;
  }
  .break-only-pc{
    display: inline-block;
  }
  .pctb-pull-right {
    float: none;
  }
  footer{
    margin-top: 20px;
  }
  #footer .links{
    width: 100%;
  }
  #footer .links span{
    display: block;
    text-align: left;
    line-height: 20px;
  }
  .copyright p{
    font-size: 75%;
  }

}
@media print {
  body { display: none !important; }
}
