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

/* スマホの場合にインプットにfocusされるとzoomされる不具合修正 */
@media only screen and (max-width: 1200px ) {
    input,select {
        font-size:16px!important;
    }
}

/* スピナー*/
.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 #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 1s infinite linear;
}
@keyframes sp-anime {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* コンテンツ全体の空白 */
.content {
    padding: 3rem 3rem 3rem 3rem!important;
}

/* タイトル */
.title {
    position: relative;
    margin-left: 40px;
    font-size: 2.3rem;
    font-weight: 600;
}
.title:before {
    content: '';
    display: block;
    position: absolute;
    left: -35px; /* 位置調整 */
    transform: translate(0%); /* 位置調整 */
    top: 0px; /* 下線の上下位置調整 */
    width: 5px; /* 下線の幅 */
    height: 55px; /* 下線の太さ */
    background-color: #007aff; /* 下線の色 */
}

/* モーダルヘッダー */
.modal-header {
    background-color: #195c96!important;
    color: white!important;
    font-size: 1.25rem!important;
}
.career .modal-header {
    background-color: #006400 !important;
}
.suishin .modal-header {
    background: #800080!important;
}
.modal-title {
    color: white!important;
    font-size: 1.25rem!important;
}

/* モーダルダイアログの閉じるボタンの色を白色に */
.btn-close {
    color: white!important;
    background-color: white!important;
    opacity: 0.8;
}

/* カード関連の設定 */
.card-header {
    font-weight: 600!important;
    font-size: 1.5rem!important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-right: 1.4rem !important;
    padding-left: 1.4rem !important;
    background-color: #195c96!important;
    color: white!important;
}

/* 建設キャリアアップのカードヘッダ */
.career .card-header {
    background-color: #006400 !important;
}
.card-career>.card-header {
    background-color: #006400!important;
}

/* 推進工事技士のカードヘッダ */
.suishin .card-header {
    background: #800080!important;
}
.card-suishin>.card-header {
    background: #800080!important;
}
.card-header > label {
    font-size: 1.25rem !important;
}
.card-body {
    padding: 2rem!important;
}
.card-body > .row > div {
    margin-bottom: 1.2rem!important;
}

/* 読み取り専用の場合に背景を白色に */
.readonly {
    background-color: #ffffff!important;
}

/* 日付選択の月の背景色を白色に */
.flatpickr-monthDropdown-months {
    background-color: white!important;
}

/* チェックボックスのラベルの文字サイズ調整 */
.form-check-label {
    font-size: 1.1rem!important;
}
.check-label {
    font-size: 15px;
    line-height: 30px;
}

/* リンクの色を黒色にする */
a, a:hover{
    color: #1c1c1c;
    text-decoration: none;
}

/* デモ画面の注意書き */
.demo-change {
    color:red;
}

/* ページナビゲーションの文字色を設定する */
page-link:hover{
    color: #1c1c1c;
}

/* リンククラスのポインターを設定する(data-href,data-targetを使って遷移できるようになっている) */
.link {
    cursor: pointer;
}

/* プロジェクト専用の背景色 */
.bg-blue-light {
    background-color: rgb(230,240,255);
}
.bg-green-light {
    background-color: rgb(235,242,235);
}
.bg-brown-light {
    background-color: #FFFBF7;
}

/* 次へボタンなど、form-controlを使用したボタンの文字サイズとパディングを指定する */
.btn.form-control {
    margin-top:2rem!important;
    margin-bottom:2rem!important;
    padding-top: 1.2rem!important;
    padding-bottom: 1.2rem!important;
    font-size: 1.3rem!important;
}

/* ボタンのフォントサイズを指定する */
.btn-sm {
    font-size: 0.95rem!important;
}

/* select2 で 入力チェックエラーの時に、赤枠にする処理 */
.is-invalid .select2-selection,
.needs-validation ~ span > .select2-dropdown{
    border-color:red !important;
}

/**
 * header
 */
.logo img {
    width: 23rem;
}

.logo {
    padding: 1.5rem 2rem 1.7rem;
    background-color: white;
}

.main-title {
    background-color: #044c96;
    padding: 4rem 0;
    color: #fff;
    text-align: center;
    font-size: 2.1rem;
}
.career .main-title {
    background-color: #006400 !important;
}
.suishin .main-title {
    background: #800080!important;
}
.perlink {
    font-size: 1.1rem;
    color: #000;
    background: #ffffff;
    padding: 0.8rem 3rem;
    border-bottom: solid 0.5px #cccccc;
}

.perlink a {
    color: #222;
    border-bottom: 1px solid #000;
    padding-bottom: 1px;
}

.divider-content-center {
    background-color: white!important;
    font-size: 1.4rem!important;
}
.btn-primary {
    font-size: 1rem!important;
}

/* テーブル関係 */
.table {
    min-width: 1080px!important;
}
.table tr {
    vertical-align: middle!important;
}
.table > tbody > tr > td:first-child { /* theme.cssでpaddingを指定されているので上書き */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.table td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.table > tbody > tr > td:last-child {
    padding-right: 0.75rem;
}

.require-badge {
    --phoenix-badge-padding-x: 0.711111em;
    --phoenix-badge-padding-y: 0.355555em;
    --phoenix-badge-font-size: 0.75em;
    --phoenix-badge-font-weight: 700;
    --phoenix-badge-color: #fff;
    --phoenix-badge-border-radius: 0.25rem;
    display: inline-block;
    padding: var(--phoenix-badge-padding-y) var(--phoenix-badge-padding-x);
    font-size: var(--phoenix-badge-font-size);
    font-weight: var(--phoenix-badge-font-weight);
    line-height: 1;
    color: var(--phoenix-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--phoenix-badge-border-radius);

    --phoenix-bg-opacity: 1;
    background-color: rgba(var(--phoenix-danger-rgb), var(--phoenix-bg-opacity)) !important;

    margin-left: 8px;
    margin-bottom: 2px;
}

/* キャリアアップのテーブル */
.career .bg-info-subtle {
    background-color: #F1FFF1 !important;
}
.career .btn-primary {
    background-color: #006400 !important;
}
.suishin .bg-info-subtle {
    background-color: #FFFBF7 !important;
}
.suishin .btn-primary {
    background: #800080!important;
}