/**
 * NC4 Framework (https://github.com/NC-4/NC4)
 * © NC4 Project.
 *
 * Licensed under The FreeBSD License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @author  　　一般社団法人 教育のための科学研究所 <https://www.s4e.jp/>
 * @author  　　国立研究開発法人 科学技術振興機構 <https://www.jst.go.jp/>
 * @author  　　リーディング・スキル・テスト株式会社 <https://www.rstest.co.jp/>
 * @copyright  NC4 Project
 * @since      4.0.0
 * @license    https://opensource.org/licenses/BSD-2-Clause FreeBSD License
 */

body {
    /*padding-top: 60px;*/
    background-color: var(--bs-body-bg);
}

/**
 * ナビゲーションバー
 */
body > .navbar {
    background-color: var(--nc4-navbar-bg) !important;
    border-bottom: 10px solid var(--nc4-body-border-color);

    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
    --bs-navbar-toggler-border-color: var(--bs-gray-500);
}

/**
 * カラム共通
 */
body > header.container,
body > footer > .container,
body > main.container {
    background-color: var(--nc4-container-none-bg);
    border-bottom: 0 none transparent;
    border-left: 1px solid var(--nc4-container-border-color);
    border-right: 1px solid var(--nc4-container-border-color);
    border-top: 0 none transparent;
    box-shadow: var(--nc4-container-box-shadow);
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}
body > header.container,
body > main.container {
    background-color: var(--nc4-container-none-bg);
}

/**
 * ヘッダー
 */
body > header > .nc4-frame:first-child {
    margin-top: 0;
}
/*body > header > .nc4-frame:last-child {*/
/*    margin-bottom: 0;*/
/*}*/
body > header {
    /*border-bottom: 5px solid var(--nc4-body-border-color);*/
    padding-bottom: 5px;
}
body > header > .card.nc4-frame.frame-none {
    margin-bottom: 0;
}

/**
 * メイン
 */
body > main.container {
    border-top-width: 0;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
}
/*body > main.container > .row > * > .nc4-frame:last-child {*/
/*    margin-bottom: 8px;*/
/*}*/

/**
 * フッター
 */
body > footer > .container {
    background-color: var(--nc4-container-bg);
    /*border-top: 6px solid var(--nc4-body-border-color);*/
    padding-bottom: 8px;
    padding-top: 10px;
}
body > footer > .container > .nc4-frame:first-child {
    margin-top: 0;
}

/**
 * コピーライト
 */
.copyright {
    background-color: var(--nc4-copyright-bg) !important;
    color: var(--nc4-copyright-color) !important;
    height: 60px;
    margin-top: 0;
}
footer > .copyright a {
    text-decoration: none;
}
footer > .copyright a,
footer > .copyright a:visited,
footer > .copyright a:link,
footer > .copyright a:active,
footer > .copyright a:focus,
footer > .copyright a:hover {
    color: var(--nc4-copyright-color);
}
footer > .copyright a:active,
footer > .copyright a:focus,
footer > .copyright a:hover {
    text-decoration: underline;
}

/**
 * フレーム枠、フレーム設定のスタイルリスト
 */
.card.nc4-frame {
    border: 0;
}
.card.nc4-frame:not(.frame-none, .frame-default, .frame-primary) {
    box-shadow: var(--nc4-frame-box-shadow);
}
.card.nc4-frame.frame-none:not(.nc4-plugin-menus) {
    background-color: transparent;
    /*box-shadow: none;*/
}

.card.nc4-frame.frame-default,
.frame-style-setting .dropdown-item .card.frame-default {
    /*background-color: var(--bs-body-bg);*/
    /*border: 1px solid var(--bs-border-color);*/
    border-radius: 0;
    border-top: 5px solid var(--nc4-body-border-color);
}
.card.nc4-frame.frame-primary,
.frame-style-setting .dropdown-item .card.frame-primary {
    border: 0 !important;
    border-radius: 0;
}
.card.nc4-frame.frame-secondary,
.frame-style-setting .dropdown-item .card.frame-secondary {
    background-color: var(--bs-secondary-bg-subtle) !important;
    border: 1px solid var(--bs-secondary) !important;
}
.card.nc4-frame.frame-success,
.frame-style-setting .dropdown-item .card.frame-success {
    background-color: #e3f0d9 !important;
    border: 1px solid var(--bs-success) !important;
}
.card.nc4-frame.frame-danger,
.frame-style-setting .dropdown-item .card.frame-danger {
    background-color: #f8e1e0 !important;
    border: 1px solid var(--bs-danger) !important;
}
.card.nc4-frame.frame-warning,
.frame-style-setting .dropdown-item .card.frame-warning {
    background-color: #fffadc !important;
    border: 1px solid var(--bs-warning) !important;
}
.card.nc4-frame.frame-info,
.frame-style-setting .dropdown-item .card.frame-info {
    background-color: #e3f1f8 !important;
    border: 1px solid var(--bs-info) !important;
}
.card.nc4-frame.frame-light,
.frame-style-setting .dropdown-item .card.frame-light {
    background-color: var(--bs-light-bg-subtle) !important;
    border: 1px solid var(--bs-light) !important;
}
.card.nc4-frame.frame-dark,
.frame-style-setting .dropdown-item .card.frame-dark {
    background-color: var(--bs-dark-bg-subtle) !important;
    border: 1px solid var(--bs-dark) !important;
}

.card.nc4-frame > .card-header {
    font-size: 1.5rem;
    font-weight: bold;
}
.card.nc4-frame > .card-header,
.frame-style-setting .dropdown-item .card > .card-header {
    background-color: transparent !important;
    border: 0;
}
.nc4-page-columns-left .card.nc4-frame > .card-header,
.nc4-page-columns-right .card.nc4-frame > .card-header {
    font-size: 1.1rem;
    font-weight: normal;
}

.card.nc4-frame.frame-default > .card-header {
    background-color: var(--nc4-base-bg-subtle-color) !important;
    border-radius: 0;
    font-weight: normal;
    padding: 10px 5px 13px 15px;
}
.card.nc4-frame.frame-primary > .card-header {
    background-color: var(--nc4-base-bg-color) !important;
    border-radius: 0;
    font-weight: normal;
    padding: 10px 5px 12px 15px;
}
.card.nc4-frame.frame-primary > .card-body {
    background-color: var(--nc4-base-bg-subtle-color) !important;
}
.card.nc4-frame.frame-secondary > .card-header {
    color: var(--bs-secondary-text-emphasis) !important;
}
.card.nc4-frame.frame-success > .card-header {
    color: var(--bs-success-text-emphasis) !important;
}
.card.nc4-frame.frame-danger > .card-header {
    color: var(--bs-danger-text-emphasis) !important;
}
.card.nc4-frame.frame-warning > .card-header {
    color: var(--bs-warning-text-emphasis) !important;
}
.card.nc4-frame.frame-info > .card-header {
    color: var(--bs-info-text-emphasis) !important;
}
.card.nc4-frame.frame-light > .card-header {
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-light-text-emphasis) !important;
}
.card.nc4-frame.frame-dark > .card-header {
    color: var(--bs-dark-text-emphasis) !important;
}

.frame-style-setting .dropdown-item .card.frame-default > .card-header {
    background-color: var(--nc4-base-bg-subtle-color) !important;
    border-radius: 0;
    font-weight: normal;
}
.frame-style-setting .dropdown-item .card.frame-primary > .card-header {
    background-color: var(--nc4-base-bg-color) !important;
    border-radius: 0;
    font-weight: normal;
}
.frame-style-setting .dropdown-item .card.frame-primary > .card-body {
    background-color: var(--nc4-base-bg-subtle-color) !important;
}
.frame-style-setting .dropdown-item .card.frame-secondary > .card-header {
    color: var(--bs-secondary-text-emphasis) !important;
}
.frame-style-setting .dropdown-item .card.frame-success > .card-header {
    color: var(--bs-success-text-emphasis) !important;
}
.frame-style-setting .dropdown-item .card.frame-danger > .card-header {
    color: var(--bs-danger-text-emphasis) !important;
}
.frame-style-setting .dropdown-item .card.frame-warning > .card-header {
    color: var(--bs-warning-text-emphasis) !important;
}
.frame-style-setting .dropdown-item .card.frame-info > .card-header {
    color: var(--bs-info-text-emphasis) !important;
}
.frame-style-setting .dropdown-item .card.frame-light > .card-header {
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-light-text-emphasis) !important;
}
.frame-style-setting .dropdown-item .card.frame-dark > .card-header {
    color: var(--bs-dark-text-emphasis) !important;
}

/**
 * ボタン
 */
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
    --bs-btn-bg: var(--nc4-btn-outline-bg);
}

/**
 * メニュープラグイン
 */
.menus-nav.nav-tabs > .nav-item > .nav-link,
.menus-nav.nav-pills > .nav-item > .nav-link {
    border: 1px solid transparent;
    padding: 10px;
}
.menus-nav.nav-tabs {
    background-color: var(--nc4-nav-tabs-bg);
    padding: 10px 20px 5px;
}
.menus-nav.nav-tabs > .nav-item {
    border: 0;
}
.menus-nav.nav-tabs > .nav-item > .nav-link {
    border-radius: var(--bs-nav-tabs-border-radius);
    font-size: 1.08rem;
    line-height: 1.1;
}
.menus-nav.nav-pills > .nav-item > .nav-link {
    border-radius: var(--bs-nav-pills-border-radius);
}
.menus-nav.nav-tabs > .nav-item > .nav-link:not(.active) {
    color: var(--nc4-tabs-text-color);
}
.menus-nav.nav-tabs > .nav-item > .nav-link:not(.active):hover {
    color: var(--nc4-nav-link-hover-bg);
}

/**
 * お知らせプラグイン
 */
.card.nc4-frame.nc4-plugin-announcements.frame-default > .card-body h1 {
    color: var(--nc4-base-text-color);
    display: flex;
    font-weight: bold;
}
.card.nc4-frame.nc4-plugin-announcements.frame-default > .card-body h1::before,
.card.nc4-frame.nc4-plugin-announcements.frame-default > .card-body h1::after {
    background: var(--nc4-base-text-color);
    content: " ";
    height: 0.6em;
    min-width: 0.6em;
}
.card.nc4-frame.nc4-plugin-announcements.frame-default > .card-body h1::before {
    margin: 0.35em 10px 0 0;
}
.card.nc4-frame.nc4-plugin-announcements.frame-default > .card-body h1::after {
    margin: 0.35em 0 0 10px;
}

.card.nc4-frame.nc4-plugin-announcements.frame-default > .card-body h2 {
    border-bottom: 4px solid var(--nc4-base-bg-color);
    color: var(--nc4-base-text-color);
    /*margin: 40px 0 20px 0;*/
    padding-bottom: 8px;
    padding-left: 10px;
}
.card.nc4-frame.nc4-plugin-announcements.frame-default > .card-body h3 {
    border-left: 8px solid var(--nc4-base-bg-color);
    color: var(--nc4-base-text-color);
    font-weight: bold;
    /*margin-top: 30px;*/
    padding: 5px 5px 5px 10px;
}
.card.nc4-frame.nc4-plugin-announcements:not(.frame-none, .frame-default) > .card-body h2::before {
    border-radius: 2px;
    content: " ";
    display: inline-block;
    height: 1.1em;
    margin-right: 6px;
    vertical-align: bottom;
    width: 7px;
}
.card.nc4-frame.nc4-plugin-announcements:not(.frame-none, .frame-default) > .card-body h3::before {
    background-color: transparent;
    border-radius: 50%;
    content: " ";
    display: inline-block;
    height: 0.8em;
    margin-right: 6px;
    vertical-align: baseline;
    width: 0.8em;
}
.card.nc4-frame.nc4-plugin-announcements.frame-primary > .card-body h1 {
    color: var(--nc4-base-text-color);
    font-weight: bold;
}
.card.nc4-frame.nc4-plugin-announcements.frame-primary > .card-body h2::before,
.card.nc4-frame.nc4-plugin-announcements.frame-primary > .card-body h3::before {
    background-color: var(--nc4-base-bg-color);
}
.card.nc4-frame.nc4-plugin-announcements.frame-secondary > .card-body h1 {
    color: var(--bs-secondary-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-secondary > .card-body h2::before,
.card.nc4-frame.nc4-plugin-announcements.frame-secondary > .card-body h3::before {
    background-color: var(--bs-secondary);
}
.card.nc4-frame.nc4-plugin-announcements.frame-success > .card-body h1 {
    color: var(--bs-success-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-success > .card-body h2::before,
.card.nc4-frame.nc4-plugin-announcements.frame-success > .card-body h3::before {
    background-color: var(--bs-success);
}
.card.nc4-frame.nc4-plugin-announcements.frame-danger > .card-body h1 {
    color: var(--bs-danger-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-danger > .card-body h2::before,
.card.nc4-frame.nc4-plugin-announcements.frame-danger > .card-body h3::before {
    background-color: var(--bs-danger);
}
.card.nc4-frame.nc4-plugin-announcements.frame-warning > .card-body h1 {
    color: var(--bs-warning-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-warning > .card-body h2::before,
.card.nc4-frame.nc4-plugin-announcements.frame-warning > .card-body h3::before {
    background-color: var(--bs-warning-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-info > .card-body h1 {
    color: var(--bs-info-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-info > .card-body h2::before,
.card.nc4-frame.nc4-plugin-announcements.frame-info > .card-body h3::before {
    background-color: var(--bs-info-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-light > .card-body h1 {
    color: var(--bs-light-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-light > .card-body h2::before,
.card.nc4-frame.nc4-plugin-announcements.frame-light > .card-body h3::before {
    background-color: var(--bs-light-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-dark > .card-body h1 {
    color: var(--bs-dark-text-emphasis);
}
.card.nc4-frame.nc4-plugin-announcements.frame-dark > .card-body h2::before,
.card.nc4-frame.nc4-plugin-announcements.frame-dark > .card-body h3::before {
    background-color: var(--bs-dark);
}