body {
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','メイリオ',Meiryo,YuGothic,'Yu Gothic','Hiragino Sans','ヒラギノ角ゴシック','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    color: #3c3c3c;
    height: 100vh;
    font-size: 15px;
    letter-spacing: 0.05em;
}

*:not([type="checkbox"]):not([type="radio"]):focus {
    outline: none;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 1px solid #009fe8;
}

.blue {
    color: #009fe8;
}

.light-blue {
    color: #e1e4e8;
}

.w-4 {
    width: 4% !important;
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-25 {
    width: 25% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important;
}

.w-50 {
    width: 50% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.w-96 {
    width: 96% !important;
}

.w-38 {
    width: 38%;
}


/*———————————
btn
———————————*/
.btn-green {
    color: #fff;
    /*background-color: #00ac6b;*/
    background-color: #48B034;
    border: none;
    font-size: 0.8rem;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

    .btn-green:hover,
    .btn-green:focus {
        color: #fff;
        background-color: #086658;
        text-decoration: none;
        -webkit-transition: all .4s;
        transition: all .4s;
    }

.btn-red {
    color: #fff;
    background-color: #ab2500;
    border: none;
    font-size: 0.8rem;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

    .btn-red:hover,
    .btn-red:focus {
        color: #fff;
        background-color: #801c00;
        text-decoration: none;
        -webkit-transition: all .4s;
        transition: all .4s;
    }

.btn-navy {
    font-weight: bold;
    color: #fff;
    background-color: #183c5a;
    border: none;
    font-size: 0.8rem;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

    .btn-navy:hover {
        color: #fff;
        background-color: #285377;
        text-decoration: none;
    }

.btn-lightblue {
    font-weight: bold;
    color: #6c6e71;
    background-color: #e1e4e8;
    border: none;
    font-size: 0.8rem;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

    .btn-lightblue:hover {
        color: #6c6e71;
        background-color: #d0d4d8;
        text-decoration: none;
    }

.btn-outline-blue {
    font-weight: bold;
    color: #009fe8;
    background-color: #fff;
    border: 2px solid #009fe8;
}

    .btn-outline-blue:hover {
        color: #fff;
        background-color: #009fe8;
        text-decoration: none;
    }

.btn-circle-gray {
    font-weight: bold;
    color: #fff;
    background-color: #acb1b5;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
}

    .btn-circle-gray:hover {
        color: #fff;
        background-color: #009fe8;
        text-decoration: none;
    }

    .btn-circle-gray i {
        font-size: 1rem;
    }

.btn[disabled] {
    color: gray;
    border-color: gray;
}

    .btn[disabled]:hover {
        background-color: transparent;
    }


/*———————————
header
———————————*/
header {
    background-color: #fff;
}

    header .h-box {
        padding: 3px 0;
        height: 66px;
    }

        header .h-box p {
            margin-bottom: 0;
        }

        header .h-box .logo {
            width: auto;
            height: 60px; /* .h-boxの高さ(66px - 上下の余白3pxずつ = 60px) */
            margin-right: calc(1rem + 56px + 1rem);
        }

            header .h-box .logo img {
                width: auto;
                height: 60px; /* .h-boxの高さ(66px - 上下の余白3pxずつ = 60px) */
            }

        header .h-box .menu-btn {
            margin-left: calc(-1rem - 56px);
        }

        header .h-box .page-info h1,
        .modal .page-info h2 {
            font-size: 1.1rem;
            margin-bottom: 0;
            font-weight: bold;
        }

        header .h-box .page-info h2,
        .modal .page-info h3 {
            font-size: 0.7rem;
            margin-bottom: 0;
            font-weight: normal;
            color: #848484;
        }

        header .h-box .login-info p {
            /*text-align: right;*/
            text-align: left;
            /*font-size: 0.65rem;*/
            font-size: 0.8rem;
        }

    header div.last-update-Info,
    .modal div.last-update-Info {
        font-size: 0.8rem;
        height: calc(0.8em + 0.5rem + 0.5em);
        padding: .2rem .5rem;
        background-color: #7cbc0a;
        color: #fff;
    }


.dairi {
    background-color: #e8e8e8;
    border-top: 2px solid #333;
    padding: 5px;
}

.topkotei {
    border-bottom: 3px solid #3d6e4c;
}

.title-bar {
    background: #9dd53a; /* Old browsers */
    background: -webkit-linear-gradient(#9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    background: -o-linear-gradient(#9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    background: linear-gradient(#9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    font-size: 130%;
    color: #fff;
    padding: 10px 15px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.modal-header {
    background: #c7baa5;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #fff;
    border-bottom: 1px solid #c7baa5;
}

/*———————————
footer
———————————*/
.footer-background {
    /*background-color: #7cbc0a;*/
    background-color: #FFFFFF;
}




/*———————————
alert
———————————*/
.alert-type-1 {
    background-color: #ffd8d8;
    color: #d14545;
    border: none;
}

    .alert-type-1 p {
        margin-bottom: 0;
    }


/*———————————
form
———————————*/
/* form-default */

form.form-default .form-group {
    margin-bottom: 0.6rem;
}

form.form-default textarea:focus,
form.form-default select:focus,
form.form-default input:not([type="checkbox"]):not([type="radio"]):focus,
form.form-default .uneditable-input:focus {
    outline: 0;
    box-shadow: none;
    border: 1px solid #009fe8;
    background-color: #ffffff;
}

form.form-default label {
    width: calc(100%);

    border-radius: 5px;
    font-size: 0.8rem;
    height: calc(0.8em + 0.5rem + 0.5em);
    padding: .2rem .5rem;
    display: block;
    margin-bottom: 2px;
}

form.form-default p.label {
    font-size: 0.8rem;
    white-space: nowrap
}

form.form-default .form-check label {
    font-weight: normal;
}

form.form-default input[type="text"],
form.form-default input[type="email"],
form.form-default input[type="password"],
form.form-default select {
    height: calc(0.8em + 0.5rem + 0.5em);
    padding: .2rem .5rem;
    font-size: 0.86rem;
    line-height: 1.5;
    border-radius: .2rem;
    border-color: #a4a9ae;
}

form.form-default textarea {
    padding: .2rem .5rem;
    font-size: 0.86rem;
    line-height: 1.5;
    border-radius: .2rem;
    border-color: #a4a9ae;
}

form.form-default .form-control.is-invalid,
form.form-default .was-validated .form-control:invalid,
form.form-default .custom-combobox-input.is-invalid {
    background-image: none;
    background-color: #fff1f1;
}

form.form-default .form-control.is-warning {
    background-image: none;
    background-color: #fffff2;
}

.justify-content-start {
    margin-left: 40px;
  }

/* Firefoxにてd-flex配下のテキストボックスの幅が広くなる現象の対策 */
.d-flex .form-control {
    min-width: 0;
}

form.form-default input::placeholder {
    color: #b7b7b7;
}

form.form-default input:-ms-input-placeholder {
    color: #b7b7b7;
}

form.form-default input::-ms-input-placeholder {
    color: #b7b7b7;
}

form.form-default button.btn-sm {
    height: calc(0.8em + 0.5rem + 0.5em);
    padding: .2rem .5rem;
    font-size: 0.8rem;
}

/* form-type-1 */
form.form-type-1 label {
    text-align: left;
    background: none;
}

/* form-type-2 */
form.form-type-2 label {
    text-align: left;
    background: none;
    font-size: 1.0rem;
    display: inline;
}

/* error */
.error i {
    font-size: 1.0rem;
    color: #F44336 !important;
}

div.error a {
    cursor: pointer;
}

    div.error a[data-toggle="popover"][data-content=""] {
        visibility: hidden;
    }

.form-control.is-invalid {
    padding-right: .75rem;
}

/* warning */
.warning i {
    font-size: 1.0rem;
    color: #ffc107 !important;
}

/* input-group */
form.form-default .input-group {
    width: 100%;
}

    form.form-default .input-group > .form-control {
        width: 1%;
    }

    form.form-default .input-group > .input-group-append > .btn {
        padding: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-color: #a4a9ae !important;
    }

    /* カレンダーコントロールが非活性の場合にアイコンを非表示にする */
    form.form-default .input-group > .datetimepicker-input[disabled]:not(:last-child) {
        border-top-right-radius: .2rem !important;
        border-bottom-right-radius: .2rem !important;
        cursor: default;
    }

        form.form-default .input-group > .datetimepicker-input[disabled]:not(:last-child) + .input-group-append {
            display: none;
        }

/* date-type-2 */
form.form-default .date-type-2 {
    width: calc(100% - 1.3rem);
}

/* tani-type-1 */
form.form-default .tani-type-1 input {
    width: calc(100% - 2.6rem);
}

/* tani-type-2 */
form.form-default .tani-type-2 input {
    width: calc(100% - 3.5rem);
}

/* tani-type-3 */
form.form-default .tani-type-3 input {
    width: calc(100% - 1.3rem);
}

/* text-type-1 */
form.form-default .text-type-1 {
    width: calc(100% - 1.3rem);
}

/* cb-type-1 */
form.form-default .cb-type-1 label {
    text-align: left;
    background: none;
    border: none;
    font-size: 0.8rem;
    padding: 3px 0 0;
    display: block;
    margin-bottom: 0;
}

/* cb-type-2 */
form.form-default .cb-type-2 label {
    text-align: left;
    background: none;
    border: none;
    font-size: 0.8rem;
    padding: 0px;
    display: block;
    margin-bottom: 0;
    width: auto;
    height: auto;
}

/* cb-type-3 */
form.form-default .cb-type-3 label {
    background: none;
    padding: 0;
    margin-bottom: 0;
    width: auto;
    height: auto;
}

/*———————————
combobox
———————————*/
.custom-combobox {
    position: relative;
    display: inline-block;
    width: calc(100% - 1.0rem - 30px);
}

.date-hokenkikan .item-2 .custom-combobox {
    width: calc(100% - 1.0em - 30px);
}

.ui-menu {
    z-index: 1200 !important;
}

.ui-autocomplete {
    max-height: 400px;
    overflow: hidden scroll;
}

span.custom-combobox input.custom-combobox-input {
    width: 100%;
    /*height: calc(1.5em + .75rem + 2px);*/
    /*padding:.375rem .75rem*/
    background-color: #fff;
    border: 1px solid #ced4da;
    height: calc(0.8em + 0.5rem + 0.5em);
    padding: .2rem .5rem;
    font-size: 0.8rem;
    line-height: 1.5;
    border-color: #a4a9ae;
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    width: 30px;
    border-color: #a4a9ae;
}

/*エラー*/
.combobox-error .custom-combobox-input {
    border: 1px solid #dc3545;
    background-color: #fff1f1;
}

/*無効*/
.combobox[disabled] + .custom-combobox {
    width: calc(100% - 1.0rem);
}

.date-hokenkikan .item-2 .combobox[disabled] + .custom-combobox {
    width: 100%;
}

.combobox[disabled] + .custom-combobox .custom-combobox-input {
    border-radius: .2rem;
    background-color: #e9ecef;
    opacity: 1;
    pointer-events: none;
}

.combobox[disabled] + .custom-combobox .custom-combobox-toggle {
    pointer-events: none;
    display: none;
}


/*———————————
保険期間
———————————*/
.date-hokenkikan .item-1 {
    width: 35%;
}

.date-hokenkikan .item-2 {
    width: 15%;
}

.date-hokenkikan .item-3 {
    width: 5%;
}

/*———————————
登録番号
———————————*/

.touroku-item .custom-combobox {
    width: 100%;
}

    .touroku-item .custom-combobox .custom-combobox-input {
        width: calc(100% - 30px);
    }


/*———————————
linebox
———————————*/
.linebox-1 {
    border: 1px solid #ccc;
    padding: 0.55rem;
    border-radius: 5px;
}

    .linebox-1 h4 {
        color: #009fe8;
        font-weight: bold;
        text-align: center;
        border-radius: 5px;
        font-size: 0.9rem;
    }

    .linebox-1 label {
        text-align: left !important;
        background: none !important;
        padding: 0 !important;
    }


/*———————————
table
———————————*/
.box-table {
    width: 100%;
    /*overflow-x: scroll;
    height:280px;
    overflow-y: scroll;*/
}

table.ta-type-1 {
    margin-bottom: 0;
}

    table.ta-type-1 thead tr th {
        text-align: center;
        /*background-color: #95ca38 !important;*/
        background-color: #19B2C2 !important;
        border: 1px solid #e1e4e8 !important;
        color: #fff;
        font-weight: normal;
        font-size: 0.8rem;
    }

    table.ta-type-1 thead tr th,
    table.ta-type-1 tbody tr td {
        vertical-align: middle;
        white-space: nowrap;
    }

.box-table .table .detail-select {
    width: 55px;
}

.box-table .table input[type="text"].form-control {
    min-width: 10px;
}

table tr.selected td {
    background-color: #ffc57f !important;
}

table#carInfoTable td {
    text-align: right;
}

table.table-header-sticky thead th {
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
    z-index: 1;
}

table.table-header-sticky th.second-row {
    top: 1.7rem
}

/*———————————
datetimepicker
———————————*/
.bootstrap-datetimepicker-widget {
    position: absolute;
    bottom: 0;
}

table.ta-type-1 .bootstrap-datetimepicker-widget table th {
    background-color: #fff !important;
    color: #3c3c3c;
}

table.ta-type-1 .bootstrap-datetimepicker-widget table th,
table.ta-type-1 .bootstrap-datetimepicker-widget table td {
    white-space: normal !important;
}


/*———————————
h3 title
———————————*/
.box-main h3,
.modal-body h3 {
    font-size: 0.9rem;
    color: #fff;
    font-weight: bold;
    /*background-color: #48b034;*/
    background-color: #19B2C2;
    padding: 0.4rem 0.5rem;
    letter-spacing: 0.08rem;
    margin-bottom: 0;
}

    .box-main h3 a {
        font-size: 0.9rem;
        display: block;
        color: #fff;
        text-decoration: none;
    }

    .box-main h3 label,
    .modal-body h3 label {
        font-weight: normal;
        font-size: 0.8rem;
    }


/*———————————
h4 title
———————————*/
.box-main h4 {
    height: calc(0.8em + 0.5rem + 0.5em);
    font-size: 0.8rem;
    color: #3c3c3c;
    font-weight: bold;
    /*background-color: #87fa87;*/
    background-color: #87CEFA;
    padding-top: .3rem;
    padding-bottom: .3rem;
    padding-left: 1.4rem;
    letter-spacing: 0.08rem;
    margin-bottom: 0;
}

    .box-main h4 a {
        font-size: 0.8rem;
        display: block;
        color: #3c3c3c;
        text-decoration: none;
    }

    .box-main h4 label {
        font-weight: normal;
        font-size: 0.8rem;
    }


/*———————————
tab
———————————*/
ul.nav-tabs {
    border-bottom: 2px solid #009fe8;
}

li.nav-item {
    border: 2px solid transparent;
    border-bottom-color: #009fe8;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

    li.nav-item.active {
        border-color: #009fe8 #009fe8 #fff;
    }

ul.tabs-type-1 .nav-link.active {
    color: #009fe8;
    font-weight: bold;
    border-width: 2px;
}

ul.tabs-type-1 .nav-item a {
    color: #bfc5cc;
    font-weight: bold;
    padding: .4rem 3rem;
    border: none;
    display: inline-block;
}

ul.tabs-type-1 div.error {
    display: inline-block;
    min-width: 0px;
}

    ul.tabs-type-1 div.error a[data-toggle="popover"] {
        padding: 0;
        padding-right: .5rem;
        margin-left: -24.75px;
    }

        ul.tabs-type-1 div.error a[data-toggle="popover"][data-content=""] {
            padding: 0;
            width: 0;
        }

.tabs-type-1 .nav-item {
    margin-bottom: -2px;
}


/*———————————
drawer
———————————*/
.drawer-hamburger {
    position: static;
    cursor: pointer !important;
}

.drawer-nav {
    top: 66px;
    height: 100%;
    color: #fff;
    background-color: #009fe8;
    z-index: 999;
}

.drawer-overlay {
    background: none;
}

.side-menu {
    width: 170px; /* サイドバーの幅 */
    position: fixed;
    /*top: 66px;*/
    top: 69px;
    /*height: 100%;*/
    /*height: calc(100% - 69px - 34px);*/ /* 全高からヘッダーとフッターの高さを引く */
    height: calc(100% - 69px); /* 全高からヘッダーの高さを引く */
    color: #fff;
    background-color: #eee;
}

/* メインコンテンツのスタイル */
.main-content {
    /* デフォルトのスタイル */
    /*z-index: 111;*/
}

    .main-content.logged-in {
        margin-left: 170px; /* ログイン時のみメニューの幅に合わせて調整 */
    }


/*———————————
g-navi
———————————*/
ul.g-navi {
    padding-left: 0;
}

    ul.g-navi .menu-item i {
        color: #337ab7; /* アイコンの色を#337ab7に設定 */
    }

    ul.g-navi .menu-item a,
    ul.g-navi a.menu-item-link {
        padding: 0.6rem;
        color: #337ab7; /* テキストの色を#337ab7に設定 */
        display: block;
        background-color: transparent; /* 背景色を透明に設定 */
        font-weight: bold; /* テキストを太字に設定 */
    }

        ul.g-navi .menu-item a:hover,
        ul.g-navi a.menu-item-link:hover, /* サブメニュー展開用リンクにもホバー時のスタイルを適用 */
        ul.g-navi li.submenu-item a:hover {
            background-color: #e8f4fd; /* ホバー時の背景色を#e8f4fdに設定 */
            text-decoration: underline; /* ホバー時にアンダーラインを表示 */
            color: #337ab7; /* ホバー時のテキストの色を保持 */
            cursor: pointer; /* カーソルをポインタに設定 */
        }

    ul.g-navi ul.submenu {
        display: none;
        list-style: none;
        padding-left: 0;
    }

    ul.g-navi li.submenu-item a {
        padding: 0.6rem 0.6rem 0.6rem 1.5rem;
        background-color: transparent; /* 背景色を透明に設定 */
        font-weight: normal; /* テキストを通常の太さに設定 */
    }

/*———————————
list-group
———————————*/
.listgroup-type-1 a i {
    color: #009fe8;
}

.listgroup-type-1 a:hover {
    background-color: #009fe8;
    color: #fff;
    transition: all 0.2s ease 0s;
}

    .listgroup-type-1 a:hover i {
        color: #fff;
        transition: all 0.2s ease 0s;
    }


/*———————————
modal
———————————*/
.modal-type-1 h1 {
    font-size: 1.2rem;
    color: #009fe8;
    font-weight: bold;
    margin-bottom: 0;
}

/*———————————
loading
———————————*/
.box-loading {
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.9;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .box-loading .spinner-border {
        color: #009fe8;
        width: 3rem;
        height: 3rem;
    }

.loading-item-1 {
    border: .35em solid #009fe8;
    border-right-color: transparent;
}

.loading-2 {
    position: relative;
}

    .loading-2 .loading-item-2 {
        position: absolute;
        top: -1.6rem;
        right: -1.6rem;
        color: #009fe8;
        width: 1.5rem;
        height: 1.5rem;
    }


/*———————————
scroll
———————————*/
.scroll-box-type-1 {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 44px - 66px - 35px - 40px - 2.0rem - 0.5em);
}

.scroll-box-type-2 {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 66px - 35px - 1.0rem - 1.1em);
}

.scroll-inner {
    flex: 1;
    overflow: auto;
}

/*———————————
住所検索ダイアログ
———————————*/
#modal-address-search-result {
    max-height: 70vh;
    overflow-y: scroll;
}

/*———————————
pager
———————————*/
div.fixed-table-pagination div.pagination-detail span.page-list,
div.fixed-table-pagination div.pagination-detail span.pagination-info {
    display: none !important;
}

div.pagination span.badge {
    position: absolute;
    z-index: 2;
}

/*———————————
bootstrap-table オーバーライト
———————————*/
/*
 * getScrollBarWidth()でスクロール幅を取得する際に利用するクラス
 * 現在の方法だと他の要素に影響されてFirefoxの時に正しくスクロール幅が取得されない
 * ※縦幅が小さくなりスクロール幅の計算がうまくできない
 * そのため、他の要素に影響されないよう「position: absolute」を付加する
 */
.fixed-table-scroll-outer {
    position: absolute;
}


/*
Media Queries
================================*/

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 480px) {
    form.form-default label {
        text-align: left;
    }
}

@media screen and (min-width: 751px) {
}


ul.no-bullet {
    list-style-type: none; /* リストアイテムの前の点を取り除く */
    /*padding-left: 0;*/ /* デフォルトのパディングも取り除く */
}