html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

/*設計書に記載の余白指定*/
:root {
    --spacing-small: 8px;
    --spacing-medium: 24px;
    --spacing-large: 64px;
}

/*設計書に記載の色指定*/
:root {
    --ddd-black: #000000;
    --ddd-light-blue: #17A2B8;
    --ddd-gray: #DAE0E4;
    --ddd-blue: #007BFF;
    --ddd-green: #28A745;
    --ddd-yellow: #FFC107;
    --ddd-red: #DC3545;
    --ddd-light-blue-2: #D1ECF1;
    --ddd-blue-2: #CCE5FF;
}

/*設計書に記載外の色指定*/
:root {
    --ddd-gray-2: #F7F7F7;
}

/*ボタン大きさ指定：中*/
.btn-custom-medium {
    height: 2.5rem !important;
    width: 7rem !important;
}

/*入力エラー時の枠線の色指定*/
.input-validation-error {
    border-color: var(--ddd-red);
}

/*以下ボタンの色指定*/
.btn-custom-black {
    background-color: var(--ddd-black);
    color: white;
}

    .btn-custom-black:hover {
        background-color: var(--ddd-black);
        color: white;
    }
    .btn-custom-black.disabled {
        background-color: #212529;
        color: white;
    }

.btn-custom-light-blue {
    background-color: var(--ddd-light-blue);
    color: white;
}

    .btn-custom-light-blue:hover {
        background-color: var(--ddd-light-blue);
        color: white;
    }

.btn-custom-gray {
    background-color: var(--ddd-gray);
    color: black;
}

    .btn-custom-gray:hover {
        background-color: var(--ddd-gray);
        color: black;
    }

.btn-custom-blue {
    background-color: var(--ddd-blue);
    color: white;
}

    .btn-custom-blue:hover {
        background-color: var(--ddd-blue);
    }

.btn-custom-green {
    background-color: var(--ddd-green);
    color: white;
}

    .btn-custom-green:hover {
        background-color: var(--ddd-green);
        color: white;
    }

.btn-custom-yellow {
    background-color: var(--ddd-yellow);
    color: black;
}

    .btn-custom-yellow:hover {
        background-color: var(--ddd-yellow);
        color: black;
    }

.btn-custom-red {
    background-color: var(--ddd-red);
    color: white;
}

    .btn-custom-red:hover {
        background-color: var(--ddd-red);
        color: white;
    }

/*枠線の色指定*/
.border-green {
    border-color: var(--ddd-green) !important;
}

.border-light-blue {
    border-color: var(--ddd-light-blue) !important;
}

.border-blue {
    border-color: var(--ddd-blue) !important;
}

.border-gray {
    border-color: var(--ddd-gray) !important;
}

/*枠線の太さ*/
.border-width-radius {
    border-width: 2px;
    border-radius: 8px;
}

    .border-width-radius .card-body {
        border-radius: inherit;
    }


/*フッタなどの背景色*/
.bg-gray-2 {
    background-color: var(--ddd-gray-2) !important;
}

/*テーブルのヘッダ太字を通常に変更*/
.table th {
    font-weight: normal;
}

/*footerを持つコンテナ*/
.container-with-footer {
    margin-bottom: 30px;
}

/* 横スクロールを有効にする */
container-main {
    /*    display: flex;*/
    overflow-x: auto;
    width: 100%;
}

/*main containerの余白設定*/
.container-page {
    padding: var(--spacing-medium);
}

/*コンテナは、1366px以下で横スクロールバーを表示*/
@media (max-width: 1366px) {
    body {
        flex-wrap: nowrap;
        width: 1366px;
    }
    .container-main {
        flex-wrap: nowrap;
        width: 1366px;
    }
        .container-main .menu-column {
            display: inline-block; /* アイテムをインラインブロックにする */
            min-width: 300px;
        }
}

body.page-explanation {
    width: 100% !important;
    max-width: 500px;
    overflow-x: hidden;
    word-wrap: break-word;
    flex-wrap: wrap !important;
    overflow-wrap: break-word;
}


/*カーソル設定*/
select {
    cursor: pointer;
}

.pointer-cursor {
    cursor: pointer;
}

/*スピンを非表示に*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*スクロール時にヘッダーを固定する*/
.header-1 {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 他の要素より前面に表示 */
}

.header-2 {
    position: fixed;
    top: 62px;
    width: 100%;
    z-index: 999; /* 他の要素より前面に表示 */
}

.contener-with-header-2 {
    margin-top: 6rem; /* パンくずヘッダ(2.5rem) + スムーススクロールナビ(3.5rem) */
}

.contener-with-header-2-no-scroll-nav {
    margin-top: 2.5rem; /* パンくずヘッダのみ */
}

/*結果件数表示が上部に来た場合固定*/
.result-count-sticky {
    position: sticky;
    top: calc(62px);
    padding-top: 24px;
    padding-left: 8px;
    padding-bottom: 8px;
    background-color: white;
    width: 100%;
    z-index: 998;
}

.result-table-header-sticky {
    position: sticky;
    top: calc(62px + 55px);
    width: 100%;
    z-index: 997;
}

.result-count-sticky-with-header-2 {
    position: sticky;
    top: calc(62px + 2.5rem);
    padding-top: 24px;
    padding-left: 8px;
    padding-bottom: 8px;
    background-color: white;
    width: 100%;
    z-index: 998;
}

.result-table-header-sticky-with-header-2 {
    position: sticky;
    top: calc(62px + 2.5rem + 55px);
    width: 100%;
    z-index: 997;
}

/*フッターの位置を固定*/
.footer-fixed {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    z-index: 1000;
}

/*キャンセル確認ポップアップのオーバーレイ*/
.overlay-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/*キャンセル確認ポップアップ*/
.popup-confirm {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 10000;
}

.hidden {
    display: none;
}

.display-none {
    display: none;
}

.table-light-blue {
    --bs-table-bg: var(--ddd-light-blue-2);
}

.text-blue {
    color: var(--ddd-blue);
}

/*黒背景ヘッダの共通設定*/
.header-height {
    height: 2.5rem;
}

/*スムーススクロールナビゲーションヘッダ*/
.scroll-nav-height {
    height: 3.5rem;
}

/*スムーススクロールナビゲーションのボタン*/
.scroll-nav-btn {
    margin-right: 1rem;
}

.breadcrumb-margin-none {
    --bs-breadcrumb-margin-bottom: none;
}

/*パンくずリストのdeviderの色を変更*/
.devider-color {
    --bs-breadcrumb-divider-color: white;
}

.shift-right {
    padding-left: 15px;
}

/*selectの矢印を非表示*/
.form-select:disabled {
    --bs-form-select-bg-img: none;
}

/*type="number"のスピンを非表示*/
.number-arrow-hidden::-webkit-inner-spin-button,
.number-arrow-hidden {
    /*Chrome/Safari/Edge 対応*/
    -webkit-appearance: none;
    /*FireFox/Mozilla 対応*/
    -moz-appearance: textfield;
}

/*アコーディオン選択時の色を非表示*/
.accordion-button:focus {
    box-shadow: none;
}

/*入力エラーメッセージの表示時の色と角の処理*/
.validation-error-style {
    margin-top: -0.5rem;
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
    border-radius: var(--bs-border-radius);
}

/**  管理年報のヘッダ設定  **/
.hydro .navbar-header,
.hydro .navbar-brand {
    width: 250px;
    height: 62px;
}

.navbar-link-wrapper {
    display: block;
    text-decoration: none;
    color: inherit;
}


.hydro.navbar-fixed-top {
    min-height: 62px;
    background-image: url(../images/line.gif);
    z-index: 0;
}

    .hydro.navbar-fixed-top > .container-fluid {
        min-height: 62px;
        background-image: url(../images/head.gif);
        background-repeat: no-repeat;
        z-index: 1;
    }

/* 年表の説明*/
.about-sub-title {
    font-weight: bold;
}

h5.about-sub-title {
    color: #0099cc;
}

h6.about-sub-title {
    color: #FF6666;
    font-size: 14px;
}

.about-explanation dl {
    margin-left: 10px;
}

.about-explanation dt {
    margin-top: 5px;
}

.about-explanation dd {
    margin-left: 5px;
}

.about-title {
    color: #FF6600;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

.inline-flex {
    display: inline-flex;
    align-items: center;
}

/* 年報フォームのテーブルヘッダースタイル */
.table-head1 {
    background-color: #90B8D1 !important;
    color: #000000 !important;
    font-weight: bold;
}

.table-head2 {
    background-color: #666666 !important;
    color: #FFFFFF !important;
    font-weight: bold;
}

.table-head3 {
    background-color: #E3E1C8 !important;
    color: #000000 !important;
    font-weight: bold;
}

.table-head6 {
    background-color: #FFCC66 !important;
    color: #000000 !important;
    font-weight: bold;
}

/* 平均行などの背景色（色をオレンジに統一） */
.table-cell1 {
    background-color: #FFCC99 !important;
    color: #000000 !important;
    font-weight: bold;
}

/* サマリーパネル内のthスタイル */
.summary-th {
    background-color: #364166 !important;
    color: #FFFFFF !important;
    font-weight: bold;
}

/* サマリーテーブルのセル幅 */
.summary-table-cell {
    width: 12.5%;
}

/* 数値セルを右寄せ */
.num-cell {
    text-align: right;
}

/* テーブルの中央寄せと垂直方向の中央寄せ */
.table-middle-align > tbody > tr > th,
.table-middle-align > thead > tr > th {
    text-align: center;
    vertical-align: middle;
}

.table-middle-align > tbody > tr > th,
.table-middle-align > tbody > tr > td {
    vertical-align: middle;
}

/* パンくずリストのリンク色 */
.breadcrumb a {
    color: white !important;
}

/* 詳細画面のテーブルを小さいフォントで */
.table-condensed-small {
    font-size: 0.8rem;
}

/* 年報フォーム用のセレクトボックス幅 */
.select-type-sm {
    width: 150px;
}

/* 年報フォーム用の数値入力欄 */
.input-annual-number {
    width: 100%;
    text-align: right;
}

/* 年報フォーム用の合計入力欄 */
.input-annual-total {
    width: 150px;
}

/* 月別データ編集テーブル（様式2） */
.month-edit-body {
    padding: 15px;
}

.month-edit-panel {
    margin-right: 0;
}

.month-edit-table .table-head2 {
    width: 60px;
}

.month-edit-table .table-head1 {
    width: auto;
}

.month-edit-table .table-head3 {
    width: 60px;
}

.month-edit-table .table-head6 {
    width: 60px;
}

.month-edit-table .month-edit-input {
    width: 80px;
}

.month-edit-table .month-edit-select {
    width: 100px;
}

.month-edit-table .month-edit-date-input {
    width: 120px;
}

/* デフォルトボタンスタイル */
.btn-default {
    background-color: #e6e6e6;
    color: #333333;
    border: 1px solid #cccccc;
}

.btn-default:hover {
    background-color: #d4d4d4;
    color: #333333;
    border-color: #8c8c8c;
}

.btn-default:active,
.btn-default.active {
    background-color: #cccccc;
    border-color: #8c8c8c;
}

/* ツリーセレクト設定*/
.treeselect--disabled .treeselect-input {
    background-color: var(--bs-secondary-bg);
}

.treeselect-input__tags-cross {
    display: none; /** 個別削除アイコンは常に非表示 */
    pointer-events: none;
}

.treeselect--disabled .treeselect-input__operators {
    display: none;
}

.treeselect .treeselect-tag,
.treeselect-input__tags-element {
    background-color: transparent !important;
    border: none; /* 枠線 */
    color: inherit; /* テキスト色 */
}

.treeselect--disabled .treeselect-input__edit {
    background-color: var(--bs-secondary-bg);
}

.treeselect--disabled .treeselect-input__edit::placeholder {
    color: transparent; /* disabledで未選択の場合文字色を透明にする */
}

/*アイコンのサイズ指定*/
/*.material-symbols-outlined {
    font-size: 14px;
}*/

.inline-icon-text {
    display: inline-flex;
    align-items: center; /* 垂直方向で中央揃え */
    gap: .25em; /* アイコンと文字の間隔を適度に */
}

    .inline-icon-text .material-symbols-outlined {
        font-size: 1em;
        line-height: 1;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    }

/* 創意工夫事例のテーブルヘッダースタイル */
.table-head7 {
    background-color: #D3D3D3 !important;
    color: #000000 !important;
    font-weight: bold !important;
}