/* 変数 */
:root {
    --green-dark : #006400;
    --green-lighter : #85c485;
    --green-lightest : rgb(235,242,235);

    --blue-dark : #4262C0;
    --blue-lighter : #6282c0;
    --blue-lightest : rgb(247, 247, 255);
}
.navbar {
    --bs-navbar-padding-y: 0.8rem;
}
.card {
    --bs-card-spacer-y: 1rem!important;
    --bs-card-spacer-x: 2rem!important;
}

/* 基本フォントサイズ */
html {
    font-size: 19px!important;
}
@media only screen and (max-width: 767px ) {
    html {
        font-size: 19px!important;
    }
}

/* 基本背景色 */
body {
    background-color: rgb(245, 247, 250);
}

/* ボタンの余白 */
.function-btn {
    font-size: 1.25rem;
    padding-top:0.65rem;
    padding-bottom:0.65rem;
}

/* activeクラスがついているナビゲーションは緑バックの白にする */
.nav-item.active {
    background-color: var(--blue-dark);
    border-radius: 0.5rem;
}
.nav-item.active>.nav-link {
    color: #ffffff;
}

/* スマホの場合のnavigationの角丸はとる */
@media (max-width: 991.98px) {
    .nav-item.active {
        border-radius: 0rem;
    }
}

/* sectionタグ */
section {
    position: relative;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
@media (min-width: 992px) {
    section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* スピナー*/
.overlay{
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 6px #ddd solid;
    border-top: 6px var(--blue-lighter) solid;
    border-radius: 50%;
    animation: sp-anime 1s infinite linear;
}
@keyframes sp-anime {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* ファイルアップロード関連 */
.custom-upload {
    background-color: #f3f3f3;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
}
.hidden {
    display: none;
}

/* readonlyの文字色変更 */
.readonly {
    background-color: #f2f2f2;
}

/* リンクの場合は、カーソルの種類を変更する */
.link:hover {
    cursor: pointer;
}

/* テーブルのヘッダは中央寄せ */
.table>thead th {
    text-align: center;
}
/* テーブルは上下中央 */
.table * {
    vertical-align: middle;
}

/* テーブルは全てレスポンシブ対応。widthの最小値をここで指定する */
.table {
    min-width: 1200px;
}

/* navタグははみ出たものはスクロールさせる */
nav {
    overflow-x: auto;
}

/* ラジオグループ */
.radio-group {
    padding-top:0.1rem;
    padding-bottom: 0.1rem;
    text-align: center;
    background-color: white;
    border-radius: 0.25rem;
}
.radio-group label {
    font-size: 1.1rem;
}
.radio-group input[type="radio"] {
    vertical-align: middle;
}

/* ぱんクズリスト */
.breadcrumb {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

/* rowクラスの標準的な余白を設定 */
.row {
    margin-bottom: 0.8rem;
}

/* ページネーションの色指定 */
.pagination * {
    color: var(--blue-dark);
}
.pagination *:hover{
    background-color: var(--blue-lighter);
    color: white;
}
.pagination .active * {
    background-color: var(--blue-dark);
    border: 1px solid var(--blue-dark);
    color: white;
}


/* 緑系 */
.bg-green {
    background-color: var(--green-dark);
    color:white;
}
.bg-green:hover {
    background-color: var(--green-lighter);
    color: white;
}

/* 緑系のカード */
.green>.card-header {
    background-color: var(--green-dark);
    color: white;
}
.green>.card-body {
    background-color: var(--green-lightest);
}
.green>.card-footer {
    background-color: var(--green-lightest);
}
.table.green>thead th {
    background-color: var(--green-lighter);
    color:white;
}

/* 緑系のぱんくず */
.breadcrumb.green {
    background-color: var(--green-dark);
    color: white;
}
.breadcrumb.green * {
    background-color: var(--green-dark);
    color: white;
}

/* 青系 */
.bg-blue {
    background-color: var(--blue-dark);
    color:white;
}
.bg-blue:hover {
    background-color: var(--blue-lighter);
    color: white;
}

/* 青系のカード */
.blue>.card-header {
    background-color: var(--blue-dark);
    color: white;
}
.blue>.card-body {
    background-color: var(--blue-lightest);
}
.blue>.card-footer {
    background-color: var(--blue-lightest);
}
.table.blue>thead th {
    background-color: var(--blue-lighter);
    color:white;
}

/* 青系のぱんくず */
.breadcrumb.blue {
    background-color: var(--blue-dark);
    color: white;
}
.breadcrumb.blue * {
    background-color: var(--blue-dark);
    color: white;
}