@charset "UTF-8";
/*************************************************************************
  bootstarp の上書き
   primaryの色をオレンジにする
   ・表示色  ：#f6ad49
   ・選択色  ：#f08300
   ・非活性色：#F5B862;
 *************************************************************************/
/*------------------------------------
   チェックボックス・ラジオボタン
  ------------------------------------*/
/* 選択時の色変更 */
.form-check-input:checked, input[type="checkbox"]:checked, input[type="radio"]:checked
{
	background-color : #f08300;
	border-color     : #f08300;
}

/*------------------------------------
   cardのスタイル変更
  ------------------------------------*/
/* 枠線の強調 */
.card
{
    border-width     : 2px!important;
    margin-bottom    : 1.5rem;
}

/* ヘッダ部分を色なしに変更 */
.card-header
{
    background-color : #ffffff;
    border-bottom    : 0!important;
    padding          : 1rem 1.5rem 0.5rem;
}

.card-text
{
    margin-left      : 1rem;
    margin-bottom    : 0.25rem;
}

/*------------------------------------
   ページネーションのスタイル変更
  ------------------------------------*/
/* 表示文字 */
.page-link, .page-link:hover, .page-link:focus
{
    color: #f08300;
}

/* 表示ページ */
.page-item.active .page-link
{
    background-color : #f08300;
    border-color     : #f08300;
}

/*------------------------------------
   テーブルのスタイル変更
  ------------------------------------*/
.table
{
    border-collapse  : separate;
    border-spacing   : 0px;
}

.table th
{
    border-color     : inherit!important;
}

/*------------------------------------
   パンくずリストの区切り文字変更
  ------------------------------------*/
.breadcrumb-item+.breadcrumb-item::before
{
    content          : url('../icons/chevron-right.svg');
    position         : relative;
    top              : 0.1rem;
}

/*------------------------------------
   ドロップダウンのactive色変更
  ------------------------------------*/
.dropdown-item.active, .dropdown-item:active
{
    background-color : #f08300;
}

/*************************************************************************
  tablesorter の上書き
 *************************************************************************/
.tablesorter-headerUnSorted:not(.sorter-false) div::after
{
   content           : url('../icons/arrow-down-up.svg');
   position          : relative;
   top               : 2px;
   left              : 3px;
}

.tablesorter-headerAsc div::after{
    content          : url('../icons/arrow-up.svg');
    position         : relative;
    top              : 2px;
    left             : 3px;
}

.tablesorter-headerDesc div::after
{
    content          : url('../icons/arrow-down.svg');
    position         : relative;
    top              : 2px;
    left             : 3px;
}

.sorter-false
{
    background-image : none;
}

/*************************************************************************
  独自部分
 *************************************************************************/
/*------------------------------------
   カラー設定
  ------------------------------------*/
/* ヘッダ色 */
.bg-system
{
    background-color : #f09199;
}

.border-system
{
    border-color     : #f09199;
}

/* プライマリ色 */
.bg-ssTi-primary
{
    background-color : #f6ad49;
}

.border-ssTi-primary
{
    border-color     : #f6ad49;
}

.text-ssTi-primary
{
    color            : #f6ad49;
}

/* ボタンの折り返しなし */
.btn {
    white-space      : nowrap;
}

/*------------------------------------
   ボタン
  ------------------------------------*/
/* ボタン：表示 */
.btn-ssTi-primary
{
    background-color : #f6ad49;
	border-color     : #f6ad49;
/*
	border-color     : #F5A331
*/
	color            : #fff;
}

/* アウトラインボタン：枠を灰色に設定 */
.btn-outline-ssTi-primary
{
	background-color : #fff;
    border-color     : #ced4da;
    color            : #212529
}

/* アウトラインボタン：選択 */
.btn-outline-ssTi-primary:hover, .btn-outline-ssTi-primary:focus
{
	background-color : #f6ad49;
	border-color     : #f6ad49;
	color            : #fff;
}

/* ボタン・アウトラインボタン：選択 */
.btn-ssTi-primary:hover, .btn-ssTi-primary:focus, .btn-ssTi-primary:active, .btn-ssTi-primary.active
, .btn-outline-ssTi-primary:active, .btn-outline-ssTi-primary.active
, .form-check-input:checked+.btn-ssTi-primary, .btn-check:checked+.btn-ssTi-primary, .btn-group>.btn-check:checked+.btn-ssTi-primary
, .form-check-input:checked+.btn-outline-ssTi-primary, .btn-check:checked+.btn-outline-ssTi-primary, .btn-group>.btn-check:checked+.btn-outline-ssTi-primary
{
	background-color : #f08300;
	border-color     : #f08300;
	color            : #fff;
}

/* 検索・操作・トグル用ボタン */
.btn-outline-ssTi-secondary {
	background-color : #fff;
    border-color     : #ced4da;
    color            : #212529
/*
    border-color     : #6c757d;
    color            : #6c757d
*/

}

.btn-outline-ssTi-secondary:hover, .btn-outline-ssTi-secondary:focus {
	background-color : #e9ecef;
}

/* アイコン設定 */
.icon-margin-right
{
    margin-right     : calc(0.7rem);
}

.icon-margin-small-right
{
    margin-right     : calc(0.2rem);
}

/* ラジオボタングループ */
.radio-group-sm {
  width              : 200px;
}

/*------------------------------------
   画面タイトル
  ------------------------------------*/
/* 入力・参照画面タイトル */
.disp-title
{
    padding          : 1.5rem 0rem;
    text-align : center;
}

/* 一覧画面タイトル */
.disp-list-title
{
    padding          : 1.5rem 0rem;
}

/* パンくずリストあり入力・参照画面タイトル */
.disp-bc-title
{
    padding          : 0rem 0rem 1.5rem 0rem;
    text-align : center;
}

/* パンくずリストあり一覧画面タイトル */
.disp-bc-list-title
{
    padding          : 0rem 0rem 1.5rem 0rem;
}

/*------------------------------------
   入力・参照画面
  ------------------------------------*/
/* 入力・参照画面の表示サイズ */
.input-container, .detail-container
{
    max-width        : 720px;
}

/* インプット画面のカードスタイル指定 */
.input-container .card-body, .detail-container .card-body
, .card-input .card-body, .card-detail .card-body
{
    padding          : 1rem 2rem;
}

.input-container .card-title, .input-container .form-label
, .detail-container .card-title, .detail-container .form-label
, .card-input .card-title, .card-input .form-label
, .card-detail .card-title, .card-detail .form-label
{
    font-weight      : 700!important;
}

/*------------------------------------
   一覧
  ------------------------------------*/
.table-item-middle td
{
    vertical-align: middle;
}

.table-fixed {
    table-layout     : fixed;
}

/*------------------------------------
   ヘッダ部指定
  ------------------------------------*/
/* ヘッダ部 */
header, header .nav .dropdown-menu
{
	background-color : #f09199;
	color            : #fff;
}

header .nav .dropdown-menu a:hover
{
    background-color : #f6ad49;
}

header .nav .dropdown-menu a:focus
{
	background-color : #f08300;
}

header a, header link:hover
{
	color            : #fff!important;
}

header i
{
    padding          : 0.25rem;
}

.header-logo
{
    font-size        : 2rem;
}

.js-hamburger {
	padding          : 0px;	
    width            : 33px;
    height           : 100%;
    background-color : transparent;
    border-color     : transparent;
    z-index          : 9999;
}

.js-hamburger span {
    width            : 100%;
    height           : 1px;
    background-color : #FFF;
    position         : relative;
    transition       : ease .4s;
    display          : block;
}

.js-hamburger span:nth-child(1) {
    top              : 0;
}

.js-hamburger span:nth-child(2) {
    margin           : 8px 0;
}

.js-hamburger span:nth-child(3) {
    top              : 0;
}

.js-hamburger.active span:nth-child(1) {
    top              : 5px;
    transform        : rotate(45deg);
}

.js-hamburger.active span:nth-child(2) {
    opacity          : 0;

}

.js-hamburger.active span:nth-child(3) {
    top              : -13px;
    transform        : rotate(-45deg);
}

/*------------------------------------
   ステータス
  ------------------------------------*/
.status
{
    display          : inline-block;
    padding          : .35em .65em;
    font-size        : .75em;
    font-weight      : 700;
    line-height      : 1;
    text-align       : center;
    white-space      : nowrap;
    vertical-align   : baseline;
    border           : 1px solid #808080;
}

.status-no
{
    border-color     : #808080;
    background-color : #fff;
    color            : #808080;
}

.status-err
{
    border-color     : #ff0000;
    color            : #ff0000;
}

.status-seminormal
{
    border-color     : #e7609e;
    background-color : #e7609e;
    color            : #fff;
}

.status-start
{
    border-color     : #f08300;
    background-color : #f08300;
    color            : #fff;
}

.status-proc
{
    border-color     : #1e50a2;
    background-color : #1e50a2;
    color            : #fff;
}

.status-proc2
{
    border-color     : #2ca9e1;
    background-color : #2ca9e1;
    color            : #fff;
}

.status-proc3
{
    border-color     : #68be8d;
    background-color : #68be8d;
    color            : #fff;
}

.status-end
{
    border-color     : #006e54;
    background-color : #fff;
    color            : #006e54;
}

/*------------------------------------
   アラート
  ------------------------------------*/
.alert ul {
    margin-bottom    : 0;
}

/*------------------------------------
   トースト
  ------------------------------------*/
#dispToast {
    animation        : fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    z-index          : 1040;
}

/* 画面の横幅が一定サイズ以上の場合右寄せ表示にする */
@media screen and (min-width: 481px) {
	#dispToast {
		margin-right:3rem!important;
		right:0!important;
	}
}

@keyframes fadeup {
  0% {
    transform        : translateY(30px);
    opacity          : 0;
  }
  80% {
    opacity          : 1;
  }
  100% {
    opacity          : 1;
    transform        : translateY(0);
  }
}

/*------------------------------------
   一覧の検索キーワード
  ------------------------------------*/
.js-search
{
    position         : relative;
}

.js-search span
{
    position         : absolute;
    right            : 20px;
    top              : 20%;
    cursor           : pointer;
}

.js-search input:placeholder-shown + span,
.js-search input:not(:focus) + span
{
    display          : none;
}

.js-search input:not(:placeholder-shown):hover + span
, .js_search input:not(:placeholder-shown) + span:hover
{
    display          : block;
}

/*------------------------------------
   スクロールスパイ
  ------------------------------------*/
/* 位置指定 ※top・heighは画面毎に指定 */
.nav-scrollspy
{
    position         : sticky;
    top              : 20px;
    align-items      : start;
    max-width        : 180px;
}

.nav-scrollspy .nav-link
{
    color            : dimgray;
}

.nav-scrollspy .nav-link:hover
{
    color            : #fff;
	background-color : #f6ad49;
}

.nav-scrollspy .nav-link.active
{
    color            : #fff;
	background-color : #f08300;
}

/*------------------------------------
   ダウンロード処理等のお知らせ
  ------------------------------------*/
.caution
{
    padding          : 1.25rem;
    border           : 1px solid #ced4da;
    border-left-width: 0.25rem;
    border-radius    : 0.25rem;
}

.caution p
{
    margin-bottom: 0;
}

.caution-info
{
    border-left-color: #5bc0de;
}
.caution-danger
{
    border-left-color: #d9534f;
}
.caution-warning
{
    border-left-color: #f0ad4e;
}

/*------------------------------------
   部品
  ------------------------------------*/
/* 郵便番号 */
.js-zip-code0
{
    width            : 100px;
}
.js-zip-code1
{
    width            : 120px;
}

/* 電話番号 */
.telno-group input
{
    width            : 100px;
}

/* 雇用保険番号 */
.koyohokenno-group div:nth-child(1) input
{
    width            : 90px;
}
.koyohokenno-group div:nth-child(3) input
{
    width            : 110px;
}
.koyohokenno-group div:nth-child(5) input
{
    width            : 60px;
}

/* 年金番号 */
.nenkinno-group div:nth-child(1) input
{
    width            : 90px;
}

.nenkinno-group div:nth-child(3) input
{
    width: 110px;
}

/* カナ貼付け */
.js-past-kana
{
    font-size        : 0.8em;
}

.fileselect-cancel {
    margin-left      : 1em;
    margin-right     : 1em;
}

.fileselect-cancel:hover {
    color            : #fff;
    background-color :#f08300;
}

/* 日付 */
.js_date_picker {
    max-width        : 250px;
}

.label-required:after {
    content          : "";
    mask-image       : url("../icons/asterisk.svg");
    -webkit-mask-image : url("../icons/asterisk.svg");
    mask-repeat      : no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size        : 0.8rem, 0.8rem, cover;
    -webkit-mask-size  : 0.8rem, 0.8rem, cover;
    background-color : #dc3545;
    display          : inline-block;
    height           : 0.8rem;
    width            : 0.8rem;
    margin-left      : 0.25rem;
}

/* サムネイル画像 */
.custom_selec_thumbnail {
    height: 150px;
    width: 150px;
    object-fit: cover;
}