/* 共通設定 */
/* font_family */
body {
    font-family : sans-serif;
}
/* globalナビはメニューの色合いと合わせる */
.bg-dark {
    background-color: #12335c !important;
    padding: 0;
}
.navbar-dark .navbar-brand {
    font-size : 1rem;
    padding-left: 0.5rem;
}
.navbar-dark .navbar-nav .nav-link {
    font-size : 0.8rem;
}
/* 横型メニューのCSS */
/* 横型メニュー color */
.plugin-menus .nav-tabs li.nav-item > a {
    color : #ffffff;
}
.plugin-menus .nav-tabs li.nav-item > a.active {
    border-color : transparent;
}
/* 横型メニュー background */
.plugin-menus .nav-tabs li.nav-item > a {
    background : #12335c;
}
/* 横型メニュー border */
.plugin-menus .nav-tabs li.nav-item {
    border-top : solid 2px #ffffff;
    border-bottom : solid 2px #ffffff;
    border-left : solid 2px #ffffff;
}
.plugin-menus .nav-tabs li.nav-item:last-child {
    border-right : solid 2px #ffffff;
}
.plugin-menus .nav-tabs .nav-link {
    border-radius : 0;
}
/* ページ上部へ戻るボタン page-top */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
    z-index: 9999;
}
#page-top a {
    display: block;
    background: #12335c;
    color: #fff;
    width: 100px;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    font-size:3rem;
    opacity:1;
}
#page-top a:hover {
    background: #12335c;
    text-decoration: none;
    opacity:0.8;
}


/* 縦型（サイド）メニュー menu_vertical */
/* 縦型（サイド）メニュー color */
.plugin-menus .list-group > a.list-group-item {
    color : #ffffff;
}
/* 縦型（サイド）メニュー background */
.plugin-menus .list-group > a.list-group-item {
    color : #ffffff;
    background : #12335c;
}
.plugin-menus .list-group > a.list-group-item.active,
.plugin-menus .list-group > a.list-group-item:hover {
    background-color : #55555550;
    z-index : 0;
    border-color : transparent;
    text-decoration: none;
}
/* 縦型（サイド）メニュー border */
.plugin-menus .list-group > a.list-group-item {
    border : none;
    border-radius : unset;
}


/* フレームタイトル frame_tittle */
/************/
/* サイト全体設定(メインエリアのみ) site all anchor */
#ccMainArea a:hover {
    color: #12335c80;
    text-decoration: underline;
}
#ccMainArea a {
    color: #12335c;
    text-decoration: underline;
}
/************/

/* フレームタイトル color */
.card-header.bg-default {
    color : #ffffff;
}
/* フレームタイトル background */
.card-header.bg-default {
    background : #12335c;
}
/* フレームタイトル border */
.card-header.bg-default {
    border-color : #ffffff;
    border-bottom-style : solid;
    border-bottom-width : 2px;
}


/* =====================================================

   山形県立山形盲学校

   追加フレームカラー Ver.1

   フレーム編集の「class名」欄で使用

   ===================================================== */

/* ---------------------------------

   全追加フレーム共通

   --------------------------------- */

.frame-pink,

.frame-coral,

.frame-orange,

.frame-yellow,

.frame-green,

.frame-mint,

.frame-blue,

.frame-purple,

.frame-gray {

    border-radius: 12px !important;

    overflow: hidden !important;

    box-shadow: 0 3px 10px rgba(18, 51, 92, 0.12) !important;

}

/* フレーム外枠 */

.frame-pink .card,

.frame-coral .card,

.frame-orange .card,

.frame-yellow .card,

.frame-green .card,

.frame-mint .card,

.frame-blue .card,

.frame-purple .card,

.frame-gray .card {

    border-width: 2px !important;

    border-style: solid !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    box-shadow: none !important;

}

/* タイトル共通 */

.frame-pink .card-header,

.frame-coral .card-header,

.frame-orange .card-header,

.frame-yellow .card-header,

.frame-green .card-header,

.frame-mint .card-header,

.frame-blue .card-header,

.frame-purple .card-header,

.frame-gray .card-header {

    color: #24333d !important;

    font-weight: 700 !important;

    border-radius: 10px 10px 0 0 !important;

    border-bottom-width: 2px !important;

    border-bottom-style: solid !important;

    background-image: none !important;

}

/* タイトル内の文字、リンク、操作アイコン */

.frame-pink .card-header a,

.frame-coral .card-header a,

.frame-orange .card-header a,

.frame-yellow .card-header a,

.frame-green .card-header a,

.frame-mint .card-header a,

.frame-blue .card-header a,

.frame-purple .card-header a,

.frame-gray .card-header a,

.frame-pink .card-header button,

.frame-coral .card-header button,

.frame-orange .card-header button,

.frame-yellow .card-header button,

.frame-green .card-header button,

.frame-mint .card-header button,

.frame-blue .card-header button,

.frame-purple .card-header button,

.frame-gray .card-header button,

.frame-pink .card-header i,

.frame-coral .card-header i,

.frame-orange .card-header i,

.frame-yellow .card-header i,

.frame-green .card-header i,

.frame-mint .card-header i,

.frame-blue .card-header i,

.frame-purple .card-header i,

.frame-gray .card-header i {

    color: #24333d !important;

}

/* 本文部分 */

.frame-pink .card-body,

.frame-coral .card-body,

.frame-orange .card-body,

.frame-yellow .card-body,

.frame-green .card-body,

.frame-mint .card-body,

.frame-blue .card-body,

.frame-purple .card-body,

.frame-gray .card-body {

    background-color: #ffffff !important;

}

/* =====================================================

   frame-pink：淡い桃色

   ===================================================== */

.frame-pink .card {

    border-color: #bd7e89 !important;

}

.frame-pink .card-header {

    background-color: #e5b7be !important;

    border-bottom-color: #bd7e89 !important;

}

/* =====================================================

   frame-coral：淡いコーラル

   ===================================================== */

.frame-coral .card {

    border-color: #dc927b !important;

}

.frame-coral .card-header {

    background-color: #fabea7 !important;

    border-bottom-color: #dc927b !important;

}

/* =====================================================

   frame-orange：淡いオレンジ

   ===================================================== */

.frame-orange .card {

    border-color: #d99b71 !important;

}

.frame-orange .card-header {

    background-color: #fcc9ac !important;

    border-bottom-color: #d99b71 !important;

}

/* =====================================================

   frame-yellow：淡い黄色

   ===================================================== */

.frame-yellow .card {

    border-color: #d1c968 !important;

}

.frame-yellow .card-header {

    background-color: #fffac2 !important;

    border-bottom-color: #d1c968 !important;

}

/* =====================================================

   frame-green：淡い緑

   ===================================================== */

.frame-green .card {

    border-color: #88b17f !important;

}

.frame-green .card-header {

    background-color: #c3dcbe !important;

    border-bottom-color: #88b17f !important;

}

/* =====================================================

   frame-mint：淡いミント

   ===================================================== */

.frame-mint .card {

    border-color: #7faeaa !important;

}

.frame-mint .card-header {

    background-color: #bad4d1 !important;

    border-bottom-color: #7faeaa !important;

}

/* =====================================================

   frame-blue：淡いブルーグレー

   ===================================================== */

.frame-blue .card {

    border-color: #8094aa !important;

}

.frame-blue .card-header {

    background-color: #b4c1d1 !important;

    border-bottom-color: #8094aa !important;

}

/* =====================================================

   frame-purple：淡い藤色

   ===================================================== */

.frame-purple .card {

    border-color: #9275ad !important;

}

.frame-purple .card-header {

    background-color: #c5b2d6 !important;

    border-bottom-color: #9275ad !important;

}

/* =====================================================

   frame-gray：淡いグレー

   ===================================================== */

.frame-gray .card {

    border-color: #9ca8b3 !important;

}

.frame-gray .card-header {

    background-color: #d7dde3 !important;

    border-bottom-color: #9ca8b3 !important;

}

/* キーボード操作時の見やすいフォーカス表示 */

.frame-pink a:focus-visible,

.frame-coral a:focus-visible,

.frame-orange a:focus-visible,

.frame-yellow a:focus-visible,

.frame-green a:focus-visible,

.frame-mint a:focus-visible,

.frame-blue a:focus-visible,

.frame-purple a:focus-visible,

.frame-gray a:focus-visible {

    outline: 3px solid #12335c !important;

    outline-offset: 2px !important;

}