@import url('https://fonts.googleapis.com/css2?family=Lato&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/*
*
* フォント設定
*
*/
body {
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  font-size        : 14px;
}
.error-text {
  font-size        : 1rem;
}
a:hover{
    color: #3e3d42;
}

/*
*
* ロゴ　画像
*
*/
.nav-sm .navbar.nav_title a i {
  font-size        : 23px;
  margin           : 0 0 0 0;
}
.nav-sm .navbar.nav_title .site_title {
  padding-left     : 0;
}

/*
*
* color設定
*
*/

/* 背景色：body,header,footer */
body .container.body .right_col {
  background       : #e6e7e7;
}
body{
  color            : #3e3d42;
  /* background       : #3e3e42; */
}
.nav_menu {
  background       : #e6e7e7;
  border-bottom    : none;
}
footer {
  background       : #e6e7e7;
}
.sidebar-footer {
  background       : #385a7a;
}
.sidebar-footer a {
  background       : #3e3e42;
}
.footer-wrapper{
    text-align: right;
    background: #464D4D;
    margin-left: 0 !important;
    color: #FFF;
    padding: 2rem 20px;
}
.footer-wrapper > a{
    margin: 0 0 0 1rem;
    color: #FFF;
}
.copyrights{
    padding-top: 2rem;
}
.footer-wrapper-fixed{
    width: 100%;
    position: absolute;
    bottom:0;
    right:0;
    text-align: right;
    background: #464D4D;
    color: #FFF;
}
@media (max-width: 991px) {
    .footer-wrapper{
        text-align: center;
        padding: 2rem .5rem;
    }
    .footer-wrapper > a{
        display: block;
        width: 100%;
        margin: 1rem 0;
        color: #FFF;
    }
    .footer-wrapper-fixed{
        text-align: center;
    }
}
/* /背景色：body,header,footer */

/* 背景色：side menu */
.nav_title {
  background       : #385a7a;
}
.left_col {
  background       : #3e3e42;
}
.sidebar-footer .fa,
#menu_toggle .fa{
  color            :#385a7a;
}
.nav.side-menu>li.active>a {
  background       : transparent;
  box-shadow       : none;
  text-shadow      : none;
}
.nav.side-menu>li.active, .nav.side-menu>li.current-page {
  border-right     : 5px solid #385a7a;
}
.nav-md ul.nav.child_menu li:before {
  background       : #8a4a4a;
}
.nav-md ul.nav.child_menu li:after {
  border-left      : 1px solid #8a4a4a;
}
.nav-sm ul.nav.child_menu {
  background       : #3e3e42;
}
/* /背景色：side menu */

/* hover色：side menu icon */
.nav.side-menu>li>a:hover {
  color            : #fd6b74 !important;
}
/* /hover色：side menu icon */

/* 色：メインコンテンツ */
.x_panel {
  border           : 2px solid #d1d1d1;
}
.x_title {
  border-bottom    : 2px solid #3E3E42;
}
.media .date {
  background       : #3e3e42;
}
a {
  color            : #385a7a;
}
.navbar-right li i,
.navbar-right li a:after{
  color            : #3e3e42;
}
/* /色：メインコンテンツ */

/*
*
* ボタン設定
*
*/
.btn {
  border-radius    : 0;
}
.btn-nav {
  padding          : 6px 12px 6px 12px;
  color            : #3e3e42;
  border-color     : #3e3e42;
  border-width     : 2px;
}
.btn-nav:hover {
  color            : #ecf0f1;
  background-color : #385a7a;
  border-color     : #385a7a;
  border-width     : 2px;
}
.btn-nav:focus,
.btn-nav:active {
  box-shadow: none !important;;
}
.btn-round_red {
  font-size: 1rem;
  background-color: #385a7a;
  color: #FFF;
  border-radius: 2rem;
  margin: 0;
}
.btn-round_red:hover {
  border-color: #385a7a;
  background-color: #fefefe;
  transition: .5s;
  color: #385a7a;
}
.btn-round_red_line {
  font-size: 1rem;
  background-color: #fefefe;
  border-color: #385a7a;
  color: #385a7a;
  border-radius: 2rem;
  margin: 0;
}
.btn-round_red_line:hover {
  background-color: #385a7a;
  transition: .5s;
  color: #fefefe;
}
.btn-blue {
  background-color : #385a7a;
  border-color     : #385a7a;
  color: #FFF;
}
.btn-blue:hover {
  border-color: #385a7a;
  background-color: #fefefe;
  transition: .5s;
  color: #385a7a;
}
.btn-orange {
  background-color : #ff6600;
  border-color     : #ff6600;
  color: #FFF;
}
.btn-orange:hover {
  border-color: #ff6600;
  background-color: #fefefe;
  transition: .5s;
  color: #ff6600;
}

/*
*
* ヘッダー設定
*
*/
nav {
  min-height       : 57px;
}
#header_upper_area,
#header_lower_area {
  margin           :0;
}
#header_upper_area {
  min-height       : 57px;
}

.nav:before{
  display          : table;
  content          : " ";
}
.nav:after{
  clear            : both;
  display          : table;
  content          : " ";
}
.side-menu li{
  width            : 100%;
}
nav ul {
  margin-bottom    : 0;
}
.nav>li {
    position       : relative;
    display        : block;
}
.project_info h2 {
  font-size: 1.5rem;
}
@media (min-width: 992px) {
  .project_info {
    padding-right: 15px;
    padding-left: 15px;
  }
}


/*
*
* daterangepicker設定
*
*/
.calendar + .right {
  float            : left;
}
.ranges{
  float            : left;
  width            : 95%;
}

/*
*
* icon css
*
*/
/* === メディアアイコンの形 =========================== */
.icon-media {
  position         : relative;
  background-color : transparent;
  color            : #3e3e42;
  display          : inline-block;
  text-align       : left;
}

.icon-media-size {
  width            : 25px;
  height           : 25px;
}

.icon-media-border {
  border           : 2px solid #3e3e42;
}
.icon-danger-border {
  border           : 2px solid #385a7a;
}


/* === メディアアイコンの文字（2文字） =========================== */
.icon-media-twimg:before {
  content          : "X";
  position         : absolute;
  top              : 50%;
  left             : 50%;
  transform        : translateY(-50%) translateX(-50%);
  font-size        : 1.5em;
  font-style       : normal;
}
.icon-media-2cfont:before {
  content          : "2c";
  position         : absolute;
  top              : -4px;
  left             : 0.09px;
  font-size        : 14px;
  padding-left     : 0.08em;
  font-weight      : bold;
}
.icon-media-blfont:before {
  content          : "bl";
  position         : absolute;
  top              : -4px;
  left             : 1px;
  font-size        : 14px;
  padding-left     : 0.08em;
  font-weight      : bold;

}
.icon-media-bbfont:before {
  content          : "bb";
  position         : absolute;
  top              : -4px;
  left             : 0.09px;
  font-size        : 14px;
  padding-left     : 0.08em;
  font-weight      : bold;

}
.icon-media-nefont:before {
  content          : "ne";
  position         : absolute;
  top              : -5.4px;
  left             : 1.6px;
  font-size        : 14px;
  padding-left     : 0.08em;
  font-weight      : bold;
}
.icon-media-infont:before {
  content          : "in";
  position         : absolute;
  top              : -5.4px;
  left             : 1.6px;
  font-size        : 14px;
  padding-left     : 0.08em;
  font-weight      : bold;
}
.icon-media-Ytfont:before {
  content          : "Yt";
  position         : absolute;
  top              : -5.4px;
  left             : 1.6px;
  font-size        : 14px;
  padding-left     : 0.08em;
  font-weight      : bold;
}
.icon-media-Yafont:before {
  content          : "Ya";
  position         : absolute;
  top              : -5.4px;
  left             : 1.6px;
  font-size        : 14px;
  padding-left     : 0.08em;
  font-weight      : bold;
}.icon-media-Bsfont:before {
  content          : "Bs";
  position         : absolute;
  top              : -5.4px;
  left             : 1.6px;
  font-size        : 14px;
  font-weight      : bold;
}
.comments-2font:before {
  top              : -1px;
}

/* === 緊急アイコンの文字（2文字） =========================== */
.icon-media-dangerfont {
  content          : "";
  position         : absolute;
  padding-left     : 0.08em;
  font-weight      : bold;
  top              : 49.5%;
  left             : 56%;
  transform        : translateY(-50%) translateX(-50%);
  color            : #385a7a;
}
.icon-media-dangerimg {
  content          : "";
  position         : absolute;
  top              : 49.6%;
  left             : 19%;
  transform        : translateY(-50%) translateX(-50%);
  font-size        : 1.2em;
  color            : #385a7a;
}
.letter-spacing{
  letter-spacing   : 0.15em;
}

/* === URLアイコンの文字（3文字） =========================== */
.icon-url-size {
  width            : 71px;
  height           : 25px;
}
.icon-media-urlfont:before {
  content          : "URL";
  position         : absolute;
  padding-left     : 0.08em;
  font-weight      : bold;
  top              : 49.5%;
  left             : 57%;
  transform        : translateY(-50%) translateX(-50%);

}
.icon-media-urlimg {
  content          : "";
  position         : absolute;
  top              : 50%;
  left             : 19%;
  transform        : translateY(-50%) translateX(-50%);
  font-size        : 1.3em;
}
.letter-spacing{
  letter-spacing   : 0.15em;
}
/* === CSVアイコンの文字（3文字） =========================== */
.icon-csv-size {
  width            : 45px;
  height           : 25px;
}
.icon-csv-text {
  position         : absolute;
  top              : 48%;
  left             : 50%;
  font-weight      : bold;
  transform        : translateY(-50%) translateX(-50%);
  font-size        : 14px;
}

/* === メディアアイコンの画像  =========================== */
.icon-media-twimgbg {
  content          : "";
  position         : absolute;
  width            : auto;
  height           : 18px;
  top              : 1px;
  left             : 1px;
}
.icon-media-commentimg {
  content          : "";
  position         : absolute;
  top              : 49%;
  left             : 49%;
  transform        : translateY(-50%) translateX(-50%);
  font-size        : 1.5em;
}
.icon-media-3dotsimg {
  content          : "";
  position         : absolute;
  top              : 49%;
  left             : 49%;
  transform        : translateY(-50%) translateX(-50%);
  font-size        : 12px;
}
#media tr:nth-child(even) .color-3dots {
  color            : #e6e7e7;
  }

  #media tr:nth-child(odd) .color-3dots {
  color            : #dadbdb;
  }
.icon-media-fbimg {
  content          : "";
  position         : absolute;
  top              : 5px;
  left             : 6px;
  font-size        : 18px;
}
/* === FontAwesome アイコン（色指定）  =========================== */
.icon-brown {
  color            : #3e3e42;
}

/* === FontAwesome アイコン（表示位置）  =========================== */

.fa-calendar-alt::before {
  position         : absolute;
  top              : 11px;
  right            : 5%;
}

@media (max-width: 992px) {
  .fa-calendar-alt::before {
      right        : 7% !important;
  }
}
@media (min-width: 992px) {
  .icon-to::before {
      right        : 10% !important;
  }
}
.table-arrow-center {
  top              : 50%;
  left             : 50%;
  transform        : translateY(-50%) translateX(-50%) rotate(90deg);
}
.table-media-arrow-center {
  top              : 46%;
  left             : -8%;
  transform        : translateY(-50%) translateX(-50%) rotate(90deg);
}

@media (max-width: 992px) {
  .fa-exchange-alt-under {
      margin-top   : 3em !important;
  }
}
/* === 対応ブラウザアイコン ============================ */
.browser-icon {
  width            : 70px;
  height           : 70px;
}
.browser-icon-text {
  font-size        : 1.25rem;
}
@media (max-width: 992px) {
  .browser-icon {
    width          : 150px;
    height         : 150px;
  }
  .browser-icon-text {
    font-size      : 2rem;
  }
}
.no-gutters {
  margin-right     : 0;
  margin-left      : 0;
}

/*
*
* ラベル css
*
*/
/* === 必須ラベル  =========================== */
.label-danger {
  background-color : #ff6600;
}
.label {
  display          : inline;
  padding          : .2em .6em .3em;
  font-size        : 81%;
  font-weight      : 500;
  line-height      : 1;
  color            : #fff;
  text-align       : center;
  white-space      : nowrap;
  vertical-align   : baseline;
}

/*
*
* checkbox css
*
*/
.form-check-label:hover{
  cursor           : pointer;
}

/*
*
* ボタン上部border
*
*/
.ln_solid {
  border-top       : 1px solid #3e3e42;
}

/*
*
* 必須エラー表示エリア
*
*/
.alert-danger, .alert-error {
  color            : #ff446a;
  border-color     : #ff446a;
  background-color : transparent;
}
.alert {
  position         : relative;
  padding          : .75rem 1.25rem;
  margin-bottom    : 1rem;
  border           : 2px solid #ff446a;
  border-radius    : 0;
}

/*
*
* eltes_logoエリア
*
*/
.logo1_img {
  position            : relative;
  width               : 100%;
  height              : 100%;
  background          : url('/static/images/eltes_logo4.png');
  background-size     : contain;
  background-repeat   : no-repeat;
  left                : 22%;
  top                 : 0px;
}
.logo2_img {
  position            : relative;
  width               : 100%;
  height              : 100%;
  background          : url('/static/images/eltes_logo3.png');
  background-size     : contain;
  background-repeat   : no-repeat;
  background-position : left center;
}

/*
*
* サイドメニュー css
*
*/
#menu_toggle_icon_area {
  padding-top    : .6rem;
}
.toggle a {
  padding        : unset ;
}
#menu_toggle_icon_content {
  width          : unset;
  padding        : .4rem;
}
.toggle a i {
font-size        : 2rem;
}

.nav.side-menu>li>span:hover {
  color: #fd6b74 !important;
}
.nav.side-menu>li>span{
  color: #E7E7E7;
  font-weight: 500;
  padding: 13px 15px 12px;
  display: block;
  margin-bottom: 6px;
}
.nav-sm .nav.side-menu li span {
  text-align: center!important;
  font-weight: 400;
  font-size: 10px;
  padding: 10px 0px;
}
.nav-sm .nav.side-menu li i {
  font-size: 25px!important;
  text-align: center;
  width: 100%!important;
  margin-bottom: 0px;
}
.nav-border{
    border-bottom: solid 1px #666;
}
/* nav-md（展開状態）では拡大しない */
.nav-md .side-menu_link a .menu-icon-svg {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  fill: #ffffff;
}

.nav-sm .side-menu_link a.svg-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  padding-bottom: 0px;
}

.nav-sm .side-menu_link a.svg-link .menu-icon-svg {
  width: 24px;
  height: 24px;
  transform: scale(1.1) translateY(3px);
  transform-origin: center center;
  display: block;
  margin: 0 auto;
  fill: #ffffff;
}

.nav-sm .side-menu_link a.svg-link span {
  margin-top: 4px;
}


/*
*
* サイドメニュー footer css
*
*/
.sidebar-footer a:hover {
  background       : #2e2e31;
}
.md-sidebar-footer {
  bottom           : 0;
  clear            : both;
  display          : block;
  padding          : 5px 0 0;
  position         : fixed;
  width            : 70px;
  background       : #385a7a;
  z-index          : 999;
}
.md-sidebar-footer>.side-menu>li>a {
  color            : #385a7a;
  background       : #3e3e42;
  margin-bottom    : 0px;
  font-size        : 17px !important;
}
.md-sidebar-footer>.side-menu>li>a:hover {
  color            : #385a7a !important;
  font-size        : 17px !important;
  background       : #2e2e31 !important;
}

/*
*
* 画面サイズmd以下　メニュー css
*
*/
#md-menu_toggle{
  padding: 0 0 0 0;
  z-index: 800;
}
@media (max-width: 991px){
  .nav-sm .container.body .col-md-3.left_col {
      display       : none;
  }
}
@media (max-width: 991px){
  .nav-sm .container.body .right_col {
      width         : 100%;
      padding-right : 0 !important;
  }
  .nav-sm .main_container .top_nav {
    margin-left     : 0 !important;
  }
  .nav-sm .container.body .right_col {
    margin-left     : 0 !important;
  }
}
.bg_scroll_off{
  height            : 100%;
  overflow          : hidden;
}
.md-menu{
  position          : fixed;
  overflow-y          : scroll;
  /* overflow          : hidden; */
  z-index           : 10;
  top               : 0;
  left              : 0;
  bottom            : 0;
  right             : 0;
  width             : 100%;
  height            : 100%;
  margin-left       : 0;
  margin-top        : 0;
  /* text-align        : center; */
  /* padding           : 1em 0; */
  /* opacity           : 0.8;
  background        : #3E3E42; */
  /* opacity: 0.9; */
  /* background: #29292b; */
  background: #3e3e42;
}

.menu-trigger,
.menu-trigger span {
  display           : inline-block;
  transition        : all .4s;
  box-sizing        : border-box;
}
.menu-trigger {
  position          : relative;
  width             : 50px;
  height            : 44px;
}
.menu-trigger span {
  position          : absolute;
  left              : 0;
  width             : 100%;
  height            : 7px;
  background-color  : #385a7a;
  border-radius     : 4px;
}
.menu-trigger span:nth-of-type(1) {
  top               : 0px;
}
.menu-trigger span:nth-of-type(2) {
  top               : 17px;
}
.menu-trigger span:nth-of-type(3) {
  top               : 35px;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform : translateY(15px) rotate(-45deg);
  transform         : translateY(15px) rotate(-45deg);
  z-index           : 1000;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity           : 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform : translateY(-20px) rotate(45deg);
  transform         : translateY(-20px) rotate(45deg);
  z-index           : 1000;
}



/*
*
* データ詳細　コピー押下時 css
*
*/

#copy_success {
  z-index           : 1500;
  position          : fixed;
  top               : 50%;
  background-color  : #385a7a;
  height            : 87px;
  width             : 100%;
}
#copy_success_content {
  position          : absolute;
  top               : 50%;
  left              : 50%;
  transform         : translateY(-50%) translateX(-50%);
  -webkit-transform : translateY(-50%) translateX(-50%);
  font-size         : 2em;
  color             : #ffffff;
}
@media (max-width: 991px) {
  #copy_success_content {
    font-size         : 1.5em;
  }
}

/*
*
* パンくず css
*
*/
#breadcrumbs {
  padding           : 0;
  background-color  : #e6e7e7;
  font-size         : 17px;
}
.breadcrumb-item+.breadcrumb-item::before {
  content           : "\f054" !important;
  font-family       : 'fontAwesome';
}
/* @media (max-width: 991px){
  #breadcrumbs {
    font-size       : 2rem;
  }
} */

/*
*
* 案件選択 css
*
*/
.hover-click-on{
  color             : #ecf0f1;
  background-color  : #385a7a;
  border-color      : #385a7a;
}
#service-menu-content{
  display           : none;
  z-index           : 9999;
  position          : absolute;
  padding           : 1rem 1rem 1rem 2rem;
  width             : 100%;
  background-color  : #3e3e42;
  top               : 57px;
}
@media (max-width: 991px) {
  #service-menu-content {
    padding           : 1rem .5rem 1rem .5rem;
  }
}
.service-menu-arrow {
  position          : absolute;
  width             : 0;
  height            : 0;
  border-style      : solid;
  border-width      : 0 10px 10px 10px;
  border-color      : transparent transparent #3e3e42 transparent;
  top               : -.6rem;
  left              : 140px;
}
@media (max-width: 991px) {
  .service-menu-arrow {
    display        : none;
  }
}
.service-menu-rirle {
  color             : #fff;
  font-size         : 1.5rem;
  border-bottom     : solid 1px #fff;
}
#service-menu-content > ul {
  margin-bottom     : 0;
  font-size         : 17px;
}
.list-inline-item:not(:last-child) {
  margin-right      : unset;
}
.service-name {
  margin-right      : 0px;
  padding           : 0;
  min-height        : 3.25rem;
  cursor            : pointer;
}
.service-name:hover {
  background-color  : #385a7a;
}
.service-name > form {
  width             : 100%;
  height            : 100%;
  padding-left      : 1rem;
}
.service-name form .fa-chevron-right:before {
  color             : #fff;
  position          : absolute;
  top               : 50%;
  left              : .9rem;
  transform         : translateY(-50%) translateX(-50%);
}
.service-select-btn {
  min-width         : 95%;
  position          : absolute;
  height            : 100%;
  background        : transparent;
  color             : #fff;
  white-space       : unset;
}
.service-select-btn:focus {
  box-shadow        : unset;
}


/*
*
* 案件名表示 css
*
*/
#select_service_name_content {
  background-color : #fff;
  border-top       : solid 1px #c3c3c3;
  border-bottom    : solid 1px #c3c3c3;
  min-height           : 57px;
}
#select_service_name {
  position         : relative;
  font-size        : 1.3rem;
  padding          : .6rem 0;
  font-weight      : bold;
}

/*
*
* 入力エラー時・成功時アイコン css
*
*/
.success_icon {
  position          : absolute;
  color             : #28a745;
  font-size         : 1.2rem;
  top               : 32%;
  right             : 1.2rem;
  transform         : translateY(-50%) translateX(-50%);
}
.error_icon {
  position          : absolute;
  color             : #dc3545;
  font-size         : 1.2rem;
  top               : 32%;
  right             : 1.5rem;
  transform         : translateY(-50%) translateX(-50%);
}
@media (max-width: 991px) {
  .error_icon,
  .success_icon {
    font-size       : 1.5rem;
    top             : 17%;
  }
}

/*
*
* 説明モーダル css
*
*/
.filter-description {
  margin-bottom: 0.4em;
  font-size: 0.95rem;
  line-height: 1.6;
}

/*
*
* client-content css
*
*/
.client-content {
  padding           : 0 4rem;
}
.client-panel {
  padding-top       : 10px;
  padding-bottom    : 10px;
  display           : flex;
  justify-content   : center;
}
.client-panel form {
  height            : 9.5rem;
  width             : 9.5rem;
  margin-bottom     : .8rem;
  cursor            : pointer;
}
.client-lg-btn {
  white-space       : normal;
  position          : relative;
  cursor            : pointer;
  background-color  : #fff;
  border            : none;
  height            : 100%;
  width             : 100%;
  overflow          : hidden;
  border-radius     : 50%;
}
.client-lg-btn:before {
  content           : '';
  position          : absolute;
  border-style      : solid;
  border-width      : 46px 21px 53px 206px;
  border-color      : transparent transparent #385a7a transparent;
  left              : 0;
  top               : 55px;
  z-index           : 3;
}
.client-lg-btn:after {
  content           : '';
  position          : absolute;
  border-style      : solid;
  border-width      : 52px 2px 59px 221px;
  border-color      : transparent transparent #1e3b54 transparent;
  left              : -6px;
  top               : 61px;
  transform         : scale(-1, 1);
  z-index           : 4;
}
.client-lg-btn span {
  z-index           : 5;
  padding           : .9rem;
  font-size         : 1.1rem;
  color             : #000000;
  top               : 50%;
}
/*
*
* animation css
*
*/
.client-name-animetion span {
  animation             : client-name-color .8s forwards;
}
.client-panel-bg-animetion:after {
  animation             : client-panel-bg-after .5s forwards;
  animation-delay       : .15s;
}
.client-panel-bg-animetion:before {
  animation             : client-panel-bg-before .5s forwards;
}
.client-panel-shadow {
  animation             : client-panel-shadow .5s forwards;
}
@keyframes client-name-color {
  0% {
      color             : unset;
  }
  100% {
      color             : #fff;
  }
}
@keyframes client-panel-bg-after {
  0% {
      border-width      : 16px 2px 116px 186px;
      top               : 61px;
  }
  100% {
      border-width      : 0px 3px 259px 364px;
      top               : -104px;
  }
}
@keyframes client-panel-bg-before {
  0% {
      border-width      : 9px 2px 97px 173px;
      left              : 0;
      top               : 55px;
  }
  100% {
      border-width      : 9px 119px 257px 434px;
      left              : -261px;
      top               : -108px;
  }
}
@keyframes client-panel-shadow {
  0% {
      box-shadow        : 0px 0px 0px 0px #947575;
  }
  100% {
      box-shadow        : 12px 10px 16px -1px #947575;
  }
}

/*
*
* square css
*
*/
#square{
  position                  : relative;
  width                     : 100px;
  height                    : 100px;
  top                       : 50%;
  left                      : 50%;
  transform                 : translateY(-50%) translateX(-50%) rotate(-45deg);
  -webkit-transform         : translateY(-50%) translateX(-50%) rotate(-45deg);
  z-index                   : 4;
}
#square span {
  position                  : absolute;
  transform                 : rotate(45deg);
  -webkit-transform         : rotate(45deg);
  bottom                    : -1px;
  left                      : -37px;
  width                     : 100%;
  font-size                 : 1.2rem;
}
.square_content {
  position                  : absolute;
  width                     : 100%;
  top                       : 50%;
  left                      : 50%;
  transform                 : translateY(-50%) translateX(-50%);
  -webkit-transform         : translateY(-50%) translateX(-50%);
}
.square1{
  padding-inline-start      : 0;
  padding-left              : 0;
  list-style-type           : none;
  overflow                  : hidden;
  display                   : -webkit-flex;
  display                   : flex;
  -webkit-justify-content   : center;
  justify-content           : center;
  -webkit-flex-wrap         : wrap;
  flex-wrap                 : wrap;
  margin-bottom             : 0px;
}
.square2{
  padding-inline-start      : 0;
  padding-left              : 0;
  list-style-type           : none;
  overflow                  : hidden;
  display                   : -webkit-flex;
  display                   : flex;
  -webkit-justify-content   : center;
  justify-content           : center;
  -webkit-flex-wrap         : wrap;
  flex-wrap                 : wrap;
  margin-bottom             : 0px;
}
.square3{
  padding-inline-start      : 0;
  padding-left              : 0;
  list-style-type           : none;
  overflow                  : hidden;
  display                   : -webkit-flex;
  display                   : flex;
  -webkit-justify-content   : center;
  justify-content           : center;
  -webkit-flex-wrap         : wrap;
  flex-wrap                 : wrap;
  margin-bottom             : 0px;
}
.square1 li,
.square2 li,
.square3 li{
  position                  : relative;
}
.square1 > li div,
.square2 > li div,
.square3 > li div {
  width                     : 18px;
  height                    : 18px;
  margin                    : 1px 1px 1px 1px;
  background-color          : #1e3b54;
}
.square1 > li:nth-child(1) div,
.square1 > li:nth-child(3) div,
.square2 > li:nth-child(2) div,
.square3 > li:nth-child(1) div,
.square3 > li:nth-child(3) div{
  background-color          : #385a7a;
}

/*
*
* スマホ用　案件名・期間 css
*
*/
.sp-title {
  font-size: 1.5rem;
}

/*
*
* スマホ用　タイトル css
*
*/
@media (max-width: 991px) {
    .page_top_title {
      margin-top        : 2rem;
  }
}

/*
*
* スマホ用　クライアント・案件選択 css
*
*/
@media (max-width: 991px) {
  .client-content {
    padding           : 0;
  }
}
.client-list,
.service-list {
  border-top: solid 1px #afafaf;
}
.client-list:last-of-type,
.service-list:last-of-type {
  border-top: solid 1px #afafaf;
  border-bottom: solid 1px #afafaf;
}
.client-list form,
.service-list form {
  height:unset;
  width: 100%;
  margin-bottom: 0;
}
.client-list form ul,
.service-list form ul {
  width: 100%;
  margin-bottom: 0;
}
.service-list .start_date_wrapp {
  font-size : 1.3rem;
}
.service-list .service_name {
  font-size : 1.5rem;
}
.select-list-btn {
  width             : 100%;
  white-space       : normal;
  font-size         : 1.5rem;
  border            : none;
  background-color  : #e6e7e7;
  text-align        : justify;
}
.select-list-btn:hover {
  cursor            : pointer;
}
.select-list-btn span {
  font-size         : unset;
}

.radio-inline__input {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}

.radio-inline__label {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-right: 18px;
  border-radius: 3px;
  transition: all .2s;
  border: solid 1px;
}

.radio-inline__input:checked + .radio-inline__label {
  background: #B54A4A;
  color: #fff;
  text-shadow: 0 0 1px rgba(0,0,0,.7);
}

.radio-inline__input:focus + .radio-inline__label {
  outline-color: #4D90FE;
  outline-offset: -2px;
  outline-style: auto;
  outline-width: 5px;
}

/*
*
* スマホ用　datatables css
*
*/
@media (max-width: 991px) {
  .dataTables_info {
    width           : 100%;
    text-align      : right !important;
  }
}

/*
*
* カレンダー　css
*
*/
@media (min-width:992px) {
  .reportrange_style{
    background       : #fff;
    cursor           : pointer;
    padding          : 4.5px 10px;
    border           : 1px solid #ccc;
  }
  #reportrange i,
  #reportrange span {
    font-size        : 14px;
    padding          : 6px 0;
  }
  .change-period_style{
    background-color : #385a7a;
    border-color     : #385a7a;
    margin-bottom    : 3px;
    padding          : 7px 12px;
    font-size        : .875rem;
    line-height      : 1.5;
  }
}
.change-period_style:focus {
  box-shadow       : none;
}
@media (max-width:992px) {
  #reportrange i,
  #reportrange span {
    font-size        : 21px;
    padding          : unset;
  }
  .reportrange_style{
    background       : #fff;
    cursor           : pointer;
    padding          : 10px 21px;
    border           : 1px solid #ccc
  }
  .change-period_style{
    background-color : #385a7a;
    border-color     : #385a7a;
    margin-bottom    : 12px;
    padding          : 9.9px 12px;
    font-size        : 1.25rem;
    line-height      : 1.5;
  }
}


/*
*
* csv,日報ダウンロード　アニメーション
*
*/
.loader-sm {
  display              : inline-block;
  position             : relative;
  color                : #385a7a;
  font-size            : 23px;
  text-indent          : -9999em;
  overflow             : hidden;
  width                : 1em;
  height               : 1em;
  border-radius        : 50%;
  -webkit-transform    : translateZ(0);
  -ms-transform        : translateZ(0);
  transform            : translateZ(0);
  -webkit-animation    : load6 1.7s infinite ease,
                         round 1.7s infinite ease;
  animation            : load6 1.7s infinite ease,
                         round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform  : rotate(0deg);
    transform          : rotate(0deg);
  }
  100% {
    -webkit-transform  : rotate(360deg);
    transform          : rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform  : rotate(0deg);
    transform          : rotate(0deg);
  }
  100% {
    -webkit-transform  : rotate(360deg);
    transform          : rotate(360deg);
  }
}

/************************************

　エラー画面

************************************/
.error-body {
  background: #e6e7e7;
  margin: unset;
}

/************************************

 　url折り返し指定

************************************/
.text-url {
  word-break: break-all;
}

/************************************

　利用規約

************************************/

pre{
    white-space: pre-wrap;
    font-family: "Meiryo UI", sans-serif;
}

/************************************

　/dashbord

************************************/
.article-container{
    margin: 0;
    padding: 0;
}
.article-container li{
    list-style: none;
    margin: 15px 0;
}
.article-wrap{
    display: table;
    width: 100%;
    color: #3e3d42;
    border: solid 1px #DDD;
    padding: 15px;
}
.article-wrap:hover{
    background: #EEE;
    transform: translateY(-0.2rem);
    transition: .5s;
}
.article-wrap-img{
    display: table-cell;
    vertical-align: top;
    width: 20%;
    padding-left: 15px;
}
.article-wrap-img img{
    width: 100%;
}
.article-inner{
    display: table-cell;
    vertical-align: top;
    font-size: 18px;
}
.article-name{
    font-size: 14px;
}
.color-twitter{
    color:#1DA1F3;
    font-size: 22px;
}
.top-count-wrap{
    display: flex;
    margin: 0;
    padding: 0;
}
.top-count-wrap > li{
    width: 33%;
    margin: 0 15px 15px 0;
    padding: 30px 15px;
    list-style: none;
    border-top: solid 1px #DDD;
    border-left: solid 1px #DDD;
    border-right: solid 1px #DDD;
    text-align: center;
}
.top-count-wrap > li:last-child{
    margin: 0 0 15px 0;
}
.top-count-wrap > li span{
    font-size: 38px;
}
.top-wrap-neutral{
    border-bottom: solid 2px #b6b6b6;
}
.top-wrap-negative{
    border-bottom: solid 2px #E45A77;
}
.top-wrap-positive{
    border-bottom: solid 2px #2DAB42;
}
.color-black{
    color: #3e3d42!important;
}
.view_visible{
    visibility: visible;
}
.view_hidden{
    visibility: hidden;
}
@media (max-width: 1200px) {
  .x_title h2 {
      width :100%!important;
      white-space: normal;
  }
}
@media (max-width: 992px) {
    .article-wrap,
    .article-wrap-img,
    .article-inner{
        display: block;
        width: 100%;
        overflow-wrap: break-word;
    }
    .article-wrap-img{
        padding-left: 0;
        padding-top: 15px;
    }
    .article-wrap:hover{
        background: #FFF;
        transform: none;
        transition: 1s;
    }
    .top-count-wrap{
        display: block;
    }
    .top-count-wrap > li{
        width: 100%;
        padding: 10px;
        margin: 0 0 15px 0;
    }
    .service-list .service_name {
      font-size : 1.2rem;
    }
}
.pc-only{
    display: block;
}
.sp-only{
    display: none;
}
.no-wrap{
    white-space: normal !important;
}
@media (max-width: 991px) {
    .pc-only{
        display: none;
    }
    .sp-only{
        display: block;
    }
}
.footer-fixed_off footer {
  position: unset;
}






.side-content_wrapp{
  flex-direction: column;
  flex-wrap: wrap;
}
/* head */
.side-head_logo {
  border: 0;
  /* width: 230px; */
  width: 100%;
  height: 40px;
  background: #385a7a;
  padding: .5rem 1rem;
}
.side-menu_toggle{
  width: 100%;
  font-size: 2rem;
  padding: .4rem;
  cursor: pointer;
}

/* links */
.side-menu_wrapp {
  min-height: 100%;
  overflow-y: auto;
  height: calc(100vh - 99px);
}
.side-menu_link {
  display: flex;
  cursor: pointer;
  width: 100%;
}
.side-menu_link a {
  width: 100%;
  color: #E7E7E7!important;
}
.side-menu_link a i {
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
}
.side-menu_link:hover {
  background-color: rgba(255,255,255,.05);
}
.side-menu_link.active {
  border-right: 4px solid #385a7a;
  background-color: rgba(255,255,255,.05);
}

.external_links_wrapp {
  border-top: 1px solid rgb(255 255 255 / 33%);
  border-bottom: 1px solid rgb(255 255 255 / 33%);
  padding: 1rem 0;
  margin-top: 1rem;
}
.external_links {
  height: 79px !important;
}
.external_links.select {
  background-color: rgba(255,255,255,.05);
}
.external_link_sub_text {
  font-size: 0.75rem;
  color: rgb(255 255 255 / 42%);
  margin: 5px 0 0 26px;
}
.side-menu_link a:hover,
.side-menu_link a:hover .external_link_sub_text {
  color: #6aacea !important;
}

/* svgホバー制御 */
.side-menu_link a.svg-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.side-menu_link a.svg-link svg {
  display: inline-block;
  margin-right: 8px;
}
.side-menu_link a.svg-link svg .icon-path {
  fill: #ffffff;
}
.side-menu_link a.svg-link:hover svg .icon-path {
  fill: #6aacea !important;
}

/* サイドメニュー切り替え用 */
.nav-sm .side-head_wrapp,
.nav-sm .side-menu_wrapp {
  width: 70px;
}
.nav-md .side-head_wrapp,
.nav-md .side-menu_wrapp {
  width: 230px;
}
.nav-sm .side-menu_toggle{
  justify-content: center;
}
.nav-md .side-menu_toggle{
  justify-content: flex-end;
}
.nav-sm .side-menu_link {
  height: 64px;
}
.nav-md .side-menu_link {
  height: 54px;
}
.nav-sm .side-menu_link a {
  font-size: 10px;
  padding: 10px 5px;
  text-align: center!important;
  font-weight: 400;
}
.nav-md .side-menu_link a {
  padding: 17px 15px;
  font-weight: 500;
}
.nav-sm .external_links a {
  padding: 0px 5px;
}
.nav-sm .side-menu_link a i {
  width: 100%!important;
  font-size: 25px!important;
  text-align: center;
  margin-bottom: 5px;
}
.nav-md .side-menu_link a i {
  width: 26px;
  font-size: 18px;
}
.nav-sm .side-menu_img_wrapp {
  width: 100%!important;
  font-size: 25px!important;
  margin-bottom: 5px;
}
.nav-md .side-menu_img_wrapp {
  width: 26px;
  display: inline-block;
}
.nav-sm .side-menu_link span.fa{
  display: none;
}
.nav-sm .img_S {
  width: 30px;
  height: auto;
}
.nav-md .img_M {
  width: 21px;
  height: auto;
}
.nav-sm .side-sub_menu {
  left: 70px;
}
.nav-md .side-sub_menu {
  left: 230px;
}
.nav-sm .external_link_sub_text {
  display: none;
}


/*スクロールバー全体*/
.side-content_wrapp ::-webkit-scrollbar {
  width: 10px;
}

/*スクロールバーの軌道*/
.side-content_wrapp ::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

/*スクロールバーの動く部分*/
.side-content_wrapp ::-webkit-scrollbar-thumb {
background-color: rgb(204 204 204 / 38%);
border-radius: 10px;
box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

/*Firefox(ダメだった。他の方法探そう)*/
.side-content_wrapp {
scrollbar-width: thin;
scrollbar-color: rgb(204 204 204 / 38%);
}


/* スマホメニュー */
#md-menu_wrapp {
  height: 100vh;
  padding: 4rem 1rem;
}
#md-menu_wrapp hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgb(171 171 171);
}
#table-menu_link td {
  padding: 1rem;
  border-top: unset;
  border-bottom: unset;
}
#table-menu_link td a {
  font-size: 17px;
  color: #FFF;
  width: 100%;
  display: block;
}
#table-menu_link td a i {
  margin-right: 0.5rem;
}
#table-menu_link .active td a {
  color: #385a7a !important;
}

#table-menu_link td a.svg-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#table-menu_link td a.svg-link:hover {
  cursor: pointer;
}
#table-menu_link td a.svg-link svg {
  margin-right: 8px;
}

#table-external_links .link_title {
  font-size: 1rem;
  color: #fff;
  padding: 1rem;
  display: block;
}
#table-external_links img {
  width: 20px;
  height: auto;
  margin-right: 0.5rem;
}


/* === 処理中アニメーション（サークル） =========================== */
.loader_comtent {
  position             : absolute;
  top                  : 50%;
  left                 : 50%;
  -ms-transform        : translate(-50%,-50%);
  -webkit-transform    : translate(-50%,-50%);
  transform            : translate(-50%,-50%);
  font-size            : 18px;
  text-align           : center;
}

.loader {
  color                : #385a7a;
  font-size            : 90px;
  text-indent          : -9999em;
  overflow             : hidden;
  width                : 1em;
  height               : 1em;
  border-radius        : 50%;
  margin               : 72px auto;
  position             : relative;
  -webkit-transform    : translateZ(0);
  -ms-transform        : translateZ(0);
  transform            : translateZ(0);
  -webkit-animation    : load6 1.7s infinite ease, round 1.7s infinite ease;
  animation            : load6 1.7s infinite ease, round 1.7s infinite ease;
}

.loader_count {
  color                : #385a7a;
  font-size            : 40px;
  text-indent          : -9999em;
  overflow             : hidden;
  width                : 1em;
  height               : 1em;
  border-radius        : 50%;
  margin               : 40px auto;
  position             : relative;
  -webkit-transform    : translateZ(0);
  -ms-transform        : translateZ(0);
  transform            : translateZ(0);
  -webkit-animation    : load6 1.7s infinite ease, round 1.7s infinite ease;
  animation            : load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow         : 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow         : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform  : rotate(0deg);
    transform          : rotate(0deg);
  }
  100% {
    -webkit-transform  : rotate(360deg);
    transform          : rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform  : rotate(0deg);
    transform          : rotate(0deg);
  }
  100% {
    -webkit-transform  : rotate(360deg);
    transform          : rotate(360deg);
  }
}

/* === 処理中アニメーション（文字） =========================== */
.blinking{
  color                :#385a7a;
  font-size            : 20px;
  -webkit-animation    : blink 0.85s ease-in-out infinite alternate;
  -moz-animation       : blink 0.85s ease-in-out infinite alternate;
  animation            : blink 0.85s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity          : 0;}
  100% {opacity        : 1;}
}
@-moz-keyframes blink{
  0% {opacity          : 0;}
  100% {opacity        : 1;}
}
@keyframes blink{
  0% {opacity          : 0;}
  100% {opacity        : 1;}
}