@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");

@font-face{
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    src: url(../fonts/yugothib.ttf);
}
@font-face{
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
src: url(../fonts/yugothil.ttf);
}
@font-face{
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
src: url(../fonts/yugothic.ttf);
}

.font-yub{
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.font-yul{
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
button, .btn {
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

#logoCombo {
text-align: center;
}
#logoCombo img{
    width: 60%;
}

html,
body {
height: 100%;
}
body{
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
body.home{
background-image: url(../images/Background.png);
background-repeat: no-repeat;
background-size: cover;
padding-top: 10vh;
padding-bottom: 40px;
background-color: #f5f5f5;
z-index: 6;
color: #aaa;

}

.home .bodyFilter{

opacity: .5;
top:0;
bottom: 0;
left:0;
right:0;
z-index: 7;
}

.home .footer{
    bottom: 10px;
left: 0;
right: 0;
text-align: center;
}

.home .form-signin {
max-width: 400px;
margin: auto;
z-index: 9;
}
.home .form-signin .checkbox {
font-weight: 400;
}

.home .form-signin .form-control {
position: relative;
/* box-sizing: border-box; */
height: auto;
font-size: 14px;
background: #dddddd2e;
border: none;
outline: none;

}
.home .form-signin .form-control:focus {
z-index: 2;
box-shadow: 0 0 0 0.1rem #888;
}

.home .form-signin button{
background-color: #54245B;
}
.home .form-signin button:hover{
color: #fff;
}

.forgotPass, .userAgreement, .footer{
font-size: 12px;
}

.bd-callout-benli {
    border: 0px solid #eee;
    border-left-width: .25rem;
    border-left-color: #54245B;
}
 button.close{
    position: absolute;
    right: 10px;
    top: 10px;
}
 button.close span{
    background: #333;
    border-radius: 50%;
    color: #fff;
    height: 15px;
    width: 15px;
    display: block;
    line-height: 15px;
    font-size: 15px;
    font-weight: lighter;
}

.modal-body{
    font-size: 14px;
}



/* Registration  */
.Registration .os-select{
    border: none;
    
    background-color: #fff;
  }
  .Registration .profile-fill{
    text-decoration: none;
  }
  .Registration .profile-fill:hover{
    text-decoration: none;
    
  }
  .certify{
    cursor: pointer;
  }
  .certify i{
      padding-top: 3px;
  }
  .Registration i::before, .ProgressPage i::before{
    color: #f0f0f0;
  }
   .certify i[name='active']::before{
      color: #54245B;
  }
  
  .reg-procedure{
    list-style: none; padding:0px; line-height: 20px;
  }

  i.i-benli::before{
      color: #54245B;
  }

/* ProgressPage */
.ProgressPage .modal-body{
    padding-top: 10px!important;
}
.ProgressPage .bg-light{
       background-color: #f0f0f0!important;
   }
   .ProgressPage  .progressRow{
    overflow: hidden;
}
.ProgressPage .progressRow .col{
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
    z-index: 50;
}

.ProgressPage #currentStage{
    position: relative;
    background-color: #6A2B7C;
    color: #fff;
}
.ProgressPage  #currentStage::before{
    content: " ";
width: 35px;
height: 35px;
background: #f0f0f0;
position: absolute;
left: -21px;
right: 0;
top: 6px;
border: 3px solid #fff;
border-top-color: rgb(255, 255, 255);
border-top-style: solid;
border-top-width: 3px;
border-left-color: rgb(255, 255, 255);
border-left-style: solid;
border-left-width: 3px;
transform: rotate(-46deg);
border-left: 0;
border-top: 0;
z-index: 25;
}

.ProgressPage #currentStage::after{
    content: " ";
    width: 39px;
    height: 36px;
    background: #6a2b7c;
    position: absolute;
    right: -16px;
    
    top: 6px;
    border: 3px solid #fff;
    border-top-color: rgb(255, 255, 255);
    border-top-style: solid;
    border-top-width: 3px;
    border-left-color: rgb(255, 255, 255);
    border-left-style: solid;
    border-left-width: 3px;
    transform: rotate(-46deg);
    border-left: 0;
    border-top: 0;
    z-index: 25;
}


/* IntroPage */
.mypageIntro .button-case button{
    display: flex;
    align-items: center;
}

/*re schedule page */
.mypagereSchedule .bd-s-gray, .popupPage .bd-s-gray, .schedulePage .bd-s-gray{
    border: 10px solid #f0f0f0;
}

/* schedulePage  */
.bg-light{
    background-color: #f0f0f0!important;
}
.schedulePage .schedule{
cursor: pointer;
}


/* multi page  */
.infoSummary{
    margin-bottom: 5.5em!important;
    position: relative;
}
.multiPage .schedule-list > div {
    cursor: pointer;
}
.multiPage  .schedule-list a{
    text-decoration: none;
    color: #000;
}
.multiPage .schedule-list a:hover{
    box-shadow: 0px 0px 3px #ccc;
}


/* popup Page  */
.popupPage #dateTimePickModal{
    z-index: 1900;
}
.popupPage #myCalendar{
    border: none!important;;
    box-shadow: none!important;
}
.vanilla-calendar .vanilla-calendar-date{
    padding: 13px 0!important;
    border: 1px solid #ccc!important;
    border-radius: 0!important;
}
.vanilla-calendar .vanilla-calendar-week{
    background-color: #fff!important;
}
.vanilla-calendar .vanilla-calendar-week span{
    color: #000!important;
    font-size: 12px!important;
}
.vanilla-calendar-header{
    justify-content: center!important;
}
.vanilla-calendar .vanilla-calendar-header__label{
    width: auto!important;
    margin: 0 20px 0 20px!important;
}
.vanilla-calendar-btn svg{
    width: 15px!important;
}


/* one Page  */
.onepersonPage .infoSummary{
    padding-bottom: 5.5em!important;
}


/* message Page  */
.messagePage  time{
    font-size: 10px;
font-weight: lighter;
}
#sendMsg{
    display: flex;
    width: 35px;
    height: 35px;    
    border-radius: 50%;       
    padding: 0;  
    margin: 2px; 
    background-color: #54245B;
}
#sendMsg img{
    width: 20px;
    margin-left: 8px;
}
.sendMsg{
    background-color: #9D8B5A; box-shadow: 0px 0px 12px 2px #ccc;
}
.msgRec{
    align-items: flex-end!important;
}
.recMsg{
    box-shadow: 0px 0px 12px 2px #ccc;
}

.sendMsg p a {
    text-decoration: underline;
    color: #ffffff;
}

.recMsg p a {
    text-decoration: underline;
}

/* all in one  */
i::before{
    font-size: 18px;
}
.navbar{
    
    z-index: 1800;
}
.bg-orange{
    background-color: #9D8B5A;
}

.bg-benli-pupple{
    background-color: #54245B;
}
.fs-16{
    font-size: 16px;
}
.fs-14{
    font-size: 14px;
}
.fs-12{
    font-size: 12px;
}
.fs-10{
    font-size: 10px;
}
.bd-s-gray{
    border:8px solid #f0f0f0;
}
.line-separate{
    border-top: 1px dashed #000;
}
.fg-1{
    flex-grow: 1;
}
.mb-100px{
    margin-bottom: 100px;
}
.w-60px {
    width: 60px;
  }
.w-50px{
    width: 50px;
}
.p-12px{
    padding: 12px;
}
.w-85pc{
    width: 85%;
}
.w-80pc {
    width: 80%;
}
.w-70pc {
    width: 70%;
}
.w-40pc {
    width: 40%;
}