.header_padding {
    padding: calc(var(--ma-grid-inner_sm) / 2.5) !important;
}

@media screen and (min-width: 960px) {
    .header_padding {
        padding: calc(var(--padding-grid-inner_lgmd) / 2.75) !important;
    }
}

.hp_paddingLeft__xxs {
    padding-left: 0.4rem !important;
}
@media screen and (min-width: 960px) {
    .hp_paddingLeft__xxs {
        padding-left: 0.8rem !important;
    }
}
.header_icon_margin {
    margin-top: 0.9rem !important;
    margin-bottom: 0.9rem !important;
}
.header_title_margin {
    margin-top: 1.5rem !important;
}
.ly_cont_main {
    width: 100% !important;
}
.bg_color_blue {
    background-color: #0D47A1 !important;
}
.bg_color_light_blue {
    background-color: #BBDEFB !important;
}

.hp_paddingX__m {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
}

@media screen and (min-width: 960px) {
    .hp_paddingX__m {
        padding-left: 4.8rem;
        padding-right: 4.8rem;
    }
}

.hp_paddingX__l {
    padding-left: 3rem;
    padding-right: 3rem;
}

@media screen and (min-width: 960px) {
    .hp_paddingX__l {
        padding-left: 6.4rem;
        padding-right: 6.4rem;
    }
}

.fw-bold {
    font-weight: bold !important;
}
/*テーブルに縦線を追加*/
.bl_table_outer_vertical {
    border-left: 1px solid var(--color-border_l);
    border-right: 1px solid var(--color-border_l);
}
/*タブ切替を丸く*/
.bl_navPills_rounderd {
    background-color: transparent !important; /* bl_navPillsの背景色を消す */
    padding: 0 !important; /* bl_navPillsの余白を消す */
}

.bl_navPills_rounderd li {
    background-color: white !important;
    border: 1px solid var(--color-border_l);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    margin-right: 1px;
}

/*縦の区切り線を右端に追加*/
.vertical_line_right {
    border-right: 2px solid #707070 !important; /* 線の太さと色 */
}


.icon_btn {
    font-size: 32px;
}
    /*90度で横向き*/
    .icon_btn.is_open {
        transform: rotate(90deg);
    }
    /*270度で逆方向横向き*/
    .icon_btn.is_closed {
        transform: rotate(270deg);
    }

.ly_app_wrapper {
    display: flex;
    min-height: 100vh;
}

.ly_main_contents_area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

select,
textarea {
    max-width: none;
}

.el_badge {
    padding: 0.7em 1.2em 0.68em !important;
}

.el_form_style_date_width__s {
    max-width: 7em !important;
    min-width: 4em !important;
}
.aligin_center {
    display: flex;
    align-items: center;
}

/* ダイアログ設定（padding抜き） */
.md_np_wrapper {
    position: relative;
    z-index: 1001;
    overflow-y: auto;
    max-width: var(--width-modal_max);
    max-height: 90vh;
    margin: var(--padding-contents-lr_mdsm);
    padding: 3rem 0rem;
    border-radius: 0.4rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: var(--color-modal-bg);
}

@media screen and (min-width: 960px) {
    .md_np_wrapper {
        width: var(--width-modal_max);
        margin: var(--padding-contents-lr_lg);
        padding: 3rem 0rem;
    }
}

.micromodal-slide[aria-hidden=false] .md_np_wrapper {
    -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
    animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .md_np_wrapper {
    -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
    animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
    /* ====================================================

　　サイド

==================================================== */
    /*—————————————————————————————————————————————————————
　サイドバー
—————————————————————————————————————————————————————*/
    .ly_cont_side {
    width: var(--width-side);
    height: 100vh;
    padding: var(--padding-contents-lr_mdsm) 0;
    color: #ffffff;
    background-color: #0d47a1 !important;
    
}

.ly_cont_side::-webkit-scrollbar {
    display: none!important;
}

@media screen and (min-width: 1200px) {
    .ly_cont_side {
        height: auto;
        min-height: calc(100vh - var(--height-header_lg));
        overflow-y: scroll !important;
        scrollbar-width: none !important;
    }
}
.el_delbtn__size__m {
    font-size: 1.3rem;
    padding: 0.78em 2em 0.73em;
}

@media screen and (min-width: 960px) {
    .el_delbtn__size__m {
        font-size: 1.4rem;
    }
}

.el_inqbtn__size__l {
    font-size: 1.4rem;
    padding: 1em 2em 0.98em;
}

@media screen and (min-width: 960px) {
    .el_inqbtn__size__l {
        font-size: 1.6rem;
    }
}

.col_text_all_center {
    align-content: center;
}

    .bl_navPills_rounderd li {
        background-color: white !important;
        border: 1px solid var(--color-border_l);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        margin-right: 1px;
    }
}
/*—————————————————————————————————————————————————————
　サイドナビゲーション（親・子・孫階層まで）
—————————————————————————————————————————————————————*/
/* 全階層共通 */
.bl_sideNavi li {
    margin: 0rem 1.4rem;
}

@media screen and (min-width: 1200px) {
    .bl_sideNavi li {
        margin: 0.4rem 1.4rem;
    }
}

.bl_sideNavi li a, .bl_sideNavi li summary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 5rem;
    padding: 0.6rem 0rem 0.2rem;
    font-size: 1.4rem;
    line-height: 1.2;
    cursor: pointer;
    -webkit-transition: padding 0.2s ease;
    transition: padding 0.2s ease;
}

@media screen and (min-width: 1200px) {
    .bl_sideNavi li a, .bl_sideNavi li summary {
        min-height: 6rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1.6rem;
    }
}

.bl_sideNavi li a:hover, .bl_sideNavi li summary:hover {
    border-radius: 0.8rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    color: #040404 !important;
    background-color: #f5f5f5 !important;
}

@media screen and (min-width: 1200px) {
    .bl_sideNavi li a:hover, .bl_sideNavi li summary:hover {
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }
}

.bl_sideNavi li i {
    margin-right: 1.2rem;
    margin-bottom: 0.2em;
    vertical-align: middle;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-side_icon);
}

@media screen and (min-width: 1200px) {
    .bl_sideNavi li i {
        margin-bottom: 0.1em;
        font-size: 2.4rem;
    }
}

/*　アコーディオン：全階層共通
————————————————————————————————*/
.bl_sideNavi summary {
    position: relative !important;
    list-style: none !important;
    cursor: pointer !important;
}

    .bl_sideNavi summary:before {
        content: "\e5cc" !important;
        position: absolute !important;
        right: 0rem !important;
        top: calc(50% - 14px) !important;
        font-size: 2.4rem !important;
        -webkit-transition: all 0.2s ease !important;
        transition: all 0.2s ease !important;
    }

    .bl_sideNavi summary::-webkit-details-marker {
        display: none !important;
    }

.bl_sideNavi details[open] {
    width: calc(100% + 1.4rem + 1.4rem) !important;
    margin-left: -1.4rem !important;
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
    background-color: #0d47a1 !important;
}

    .bl_sideNavi details[open] > summary:before {
        -webkit-transform: rotate(90deg) !important;
        transform: rotate(90deg) !important;
    }

    .bl_sideNavi details[open] > summary:hover {
        color: #040404 !important;
        background-color: #f5f5f5 !important;
    }

/* 子階層 */
.bl_sideNavi_child > li a, .bl_sideNavi_child > li summary {
    min-height: 4rem !important;
    padding-left: 1.8rem !important;
}

    .bl_sideNavi_child > li a:hover, .bl_sideNavi_child > li summary:hover {
        color: #040404 !important;
        background-color: #f5f5f5 !important;
        padding-right: 0rem !important;
    }

/* 孫階層 */
.bl_sideNavi_grandchild > li > a, .bl_sideNavi_grandchild > li summary {
    min-height: 4rem !important;
    padding-left: 1.8rem !important;
}

    .bl_sideNavi_grandchild > li > a:hover, .bl_sideNavi_grandchild > li summary:hover {
        background-color: inherit !important;
    }

/* ————————————————— 状態 ————————————————— */
/* 選択中：全階層共通 */
.bl_sideNavi .is_active {
    pointer-events: none !important;
    padding: 0 1.4rem !important;
    border-radius: 0.8rem !important;
    color: #040404 !important;
    background-color: #f5f5f5 !important;
    font-weight: bold !important;
}

/*readonly項目の背景色設定*/
input[type='text']:read-only,
input[type='date']:read-only,
textarea:read-only {
    color: var(--color-disable_txt);
    background-color: var(--color-disable);
}

/*—————————————————————————————————————————————————————
　ファイル連携取込・出力レイアウト用
—————————————————————————————————————————————————————*/

.container_file_update_dt {
    max-height: none;
    height: auto;
    overflow-y: visible;
    margin-top: 30px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: white;
}

.container_file_update_title {
    justify-content: space-between;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    height: 4rem;
}
.file_update_table_title {
    color: #666;
}
.container_file_update_dt tbody tr {
    height: 3rem;
}

.container_file_update_dt tbody tr td {
    padding: 1rem 1.5rem;
}

/* 連携ファイル取込　進捗バー */
.import_progress_track {
    position: relative;
    height: 0.8rem;
    border-radius: 0.4rem;
    overflow: hidden;
    background-color: var(--color-progressbar_bg);
}
.import_progress_bar {
    width: 0%;
    height: 100%;
    background-color: var(--color-primary);
    transition: width 0.2s linear;
}
/* サーバー処理中は進捗率が取れないため、流れるバーで処理中であることを示す */
.import_progress_bar.is_indeterminate {
    width: 30%;
    transition: none;
    animation: import_progress_slide 1.2s ease-in-out infinite;
}
/* 取込中は選択枠内のラベルをグレーアウト（進捗表示は除く）。選択ファイル名はインラインで色指定しているため!importantで上書きする */
#dropZone.is_importing h4,
#dropZone.is_importing h6,
#dropZone.is_importing label,
#dropZone.is_importing #selectedFileName {
    color: var(--color-disable_txt) !important;
}
@keyframes import_progress_slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}

/*—————————————————————————————————————————————————————
　入力チェック時コントロールを赤枠にする
—————————————————————————————————————————————————————*/
/* 1. テキストボックス・ドロップダウン・日付入力の赤枠＆背景赤 */
.el_form_input.input-validation-error,
select.input-validation-error,
input[type="date"].input-validation-error {
    border-color: #F00000 !important;
    background-color: #f5dcdc !important;
}

    /* フォーカス時の枠線維持 */
    .el_form_input.input-validation-error:focus,
    select.input-validation-error:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }

/*—————————————————————————————————————————————————————
　授業変更申請画面　割引・指導関連費のアコーディオン
—————————————————————————————————————————————————————*/
.bl_accordion#discount summary::after {
    content: "expand_more";
    color: var(--color-txt);
}
.bl_accordion[open]#discount summary::after {
    content: "expand_less";
}

/* 推奨授業セット選択ダイアログ　セットが多いときにダイアログが伸びすぎないようにする */
#setListArea {
    max-height: 40vh;
    overflow-y: auto;
}

/*—————————————————————————————————————————————————————
　日付範囲（From～To）の検索条件
　入力欄1つ分の幅を問合せ一覧の日付入力欄（bl_col__1_5 = 13%）に合わせる
—————————————————————————————————————————————————————*/
@media screen and (min-width: 960px) {
    .bl_col__dateRange {
        width: calc(13% * 2 + 3em);
    }
}
.bl_col__dateRange_input {
    width: calc((100% - 3em) / 2);
}
.bl_col__dateRange_sep {
    width: 3em;
}