<? header("Content-Type:text/css");
    include_once( 'common.php' );
?>
body {
    background-color: #fff;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Verdana,sans-serif;
    font-size: 100%;
    user-select:text;
    -webkit-user-select:text;
    -moz-user-select:text;
    -khtml-user-select:text;
}
img {
    user-select:none;
    -webkit-user-drag:none;
    -khtml-user-drag:none;
}
/* ヘッダー */
#header {
    position: relative;
    width: 100%;
    margin: 0;
    padding:0;
    padding-bottom: 3.5em;
}
#header-sys {
    position: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: <? if(defDebugServer == false) {echo  "rgb(0,0,0)";} else { echo "rgb(100,100,100)"; } ?>;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    height: 3.5em;
    z-index: 10000;
}
#header-mnu {
    position: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(255,255,255);
    box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    -moz-box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    -webkit-box-shadow: 4px 4px 4px rgba(150,150,150,0.5);
    z-index: 10000;
}
#header-mnu-mask-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 60px;
    border: 1px solid rgba(255,255,255,0.5);
    background-color: rgb(255,255,255);
    box-shadow: 2px 0px 5px rgb(158,158,158);
    -moz-box-shadow: 2px 0px 5px rgb(158,158,158);
    -webkit-box-shadow: 2px 0px 5px rgb(158,158,158);
    border-radius: 0 30px 30px 0;
    border-left: 0;
    z-index: 10001;
}
#header-mnu-mask-r {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 60px;
    border: 1px solid rgba(255,255,255,0.5);
    background-color: rgb(255,255,255);
    box-shadow: -2px 0px 5px rgb(158,158,158);
    -moz-box-shadow: -2px 0px 5px rgb(158,158,158);
    -webkit-box-shadow: -2px 0px 5px rgb(158,158,158);
    border-radius: 30px 0px 0px 30px;
    border-right: 0;
    z-index: 10001;
}
#header .title {
    position: relative;
    margin-left: 0.5em;
    float: left;
    width: 80%;
    white-space: nowrap;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#header .title a {
    color: #fff;
}
/* ポップアップメニュー */
#nav {
    position: fixed;
    padding: 0;
    top: 0;
    left: 0;
    /*right: 0;*/
    /*bottom: 0;*/
    margin: auto;
    text-align: center;
    width: 18em;
    /*border: 1px solid;
    border-color: rgb(158,158,158);*/
    background-color: rgb(255,255,255);
    color: rgb(33,33,33);
    font-weight: normal;
    box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    -moz-box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    z-index: 10001;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-bottom: 5px;
    background-color: rgb(255,255,255);
}
#nav ul li {
    margin: 0;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
#nav .nav-border-top {
    border-top: 1px solid rgb(158,158,158);
}
#nav .nav-button {
    margin: 0;
    padding: 5;
    width: 15em;
    white-space: nowrap;
    font-weight: normal;
    text-align: center;
}
#nav .nav-top {
    padding-top: 15px;
}
#nav .nav-title {
    margin: 0;
    padding: 14px 10px 10px 10px;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
    color: rgb(255,255,255);
    background-color: rgb(0,0,0);
    vertical-align: middle;
}
#nav .nav-menu {
    margin: 0;
    /*padding: 5px 10px;*/
    padding: 5px 0;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: normal;
    text-align: left;
    color: rgb(0,0,0);
}
#nav .nav-menu-text {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    padding-left:0.5em;
    color: rgb(51,51,51);
}
#nav .nav-menu-img {
    vertical-align: top;
    margin: 0;
    padding: 0;
}
/* ハンバーガーメニュー */
#system-menu {
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    /*right: 13px;*/
    /*top: 13px;*/
    width: 40px;
    height: 25px;
    cursor: pointer;
    background-color: rgb(0,0,0);
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#system-menu div {
    position: relative;
}
#system-menu .menu-open span {
    display: block;
    position: absolute;
    width: 100%;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out
}
#system-menu .menu-open span:nth-child(1) {top:2px}
#system-menu .menu-open span:nth-child(2) {top:10px}
#system-menu .menu-open span:nth-child(3) {top:18px}
#system-menu .menu-close span {
    margin-top:10px;
    display: block;
    position: absolute;
    width: 100%;
    transform: rotate(45deg);
    border-bottom: solid 3px #fff;
}
#system-menu .menu-close span:nth-child(1) {transform: rotate(45deg);}
#system-menu .menu-close span:nth-child(2) {transform: rotate(135deg);}

/* メインメニュー */
.main-menu {
    display: inline-block;
    letter-spacing: normal;
    margin: 0px 0px;
    padding: 10px 5px;
    cursor: pointer;
    width: 6em;
    user-select: none;
}
.main-menu-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.main-menu-container::-webkit-scrollbar {
    display:none;
}
.main-menu-text{
    border-radius: 15px;
    margin: 0;
    padding: 2px 0;
    width: 100%;
}
.main-menu-default{
    color: #000;
    background-color: rgba(255,255,255,0);
}
.main-menu-grey{
    color: #000;
    background-color: rgb(195,195,195);
}
.main-menu-red{
    color: #fff;
    background-color: rgb(212,83,72);
}
.main-menu-yellow{
    color: #fff;
    background-color: rgb(212,158,46);
}
.main-menu-blue{
    color: #fff;
    background-color: rgb(63,111,182);
}
.main-menu-green{
    color: #fff;
    background-color: rgb(70,161,70);
}
.main-menu-orange{
    color: #fff;
    background-color: rgb(218,115,40);
}
.main-menu-cyan{
    color: #fff;
    background-color: rgb(65,167,196);
}
.main-menu-darkcyan{
    color: #fff;
    background-color: rgb(35,170,170);
}
/* もどる */
#back-navi {
    position: absolute;
    padding: 0;
    /*top: 0;*/
    left: 0;
    /*right: 0;*/
    /*bottom: 0;*/
    margin: auto;
    margin-top: 0;
    /*border: 1px solid;*/
    border-color: rgb(158,158,158);
    background-color: #fff;
    color: rgb(33,33,33);
    font-weight: normal;
    z-index: 9999;
}
input::placeholder {
    color: rgb(158,158,158);
}

/* 入力項目 */
input[type="text"],input[type="checkbox"],
input[type="date"],input[type="time"],input[type="datetime-local"],
input[type="password"],
input[type="email"],
textarea {
    font-size: 0.9rem;
    font-weight: normal;
    color: rgb(33,33,33);
}
select,option {
    font-size: 0.9rem;
    padding: 0.4rem;
    font-weight: normal;
    color: rgb(33,33,33);
}
select{
    padding-right: 2em;
}
select.order-combobox, select.order-combobox option{
    font-size: 0.8rem;
    width: auto;
}
/* タグ入力 */
input[type="text"].tag-input {
    ime-mode:active;
    margin:0;
    margin-bottom:2%;
    margin-right:2%;
    width:86%;
    display:inline;
}

/* チェックボックスの画像表示対応 */
input[type="checkbox"]{
    display:none;
}
input[type="checkbox"]+label:after{
    content: '';
    width: 26px;
    height: 26px;
    background-size: 26px;
    background-image:  url("../img/check_off.png");
    background-repeat: no-repeat;
    position:relative;
    display: block;
    margin: 0;
    padding: 0;
}
input[type="checkbox"]:checked+label:after{
    content: "";
    width: 26px;
    height: 26px;
    background-size: 26px;
    background-image: url("../img/check_on.png");
    background-repeat: no-repeat;
    position:relative;
    display: block;
    margin: 0;
    padding: 0;
}
input[type="checkbox"]:disabled+label:after{
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
/* チェックボックス（小）*/
input[type="checkbox"]+label.checkbox-min:after{
    content: '';
    width: 1.5em;
    height: 1.5em;
    background-size: 1.5em;
    background-image:  url("../img/check_off.png");
    background-repeat: no-repeat;
    position:relative;
    display: block;
    margin: 0;
    padding: 0;
}
input[type="checkbox"]:checked+label.checkbox-min:after{
    content: "";
    width: 1.5em;
    height: 1.5em;
    background-size: 1.5em;
    background-image: url("../img/check_on.png");
    background-repeat: no-repeat;
    position:relative;
    display: block;
    margin: 0;
    padding: 0;
}
input[type="checkbox"]:disabled+label.checkbox-min:after{
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
/* ラジオボタンの画像表示対応 */
input[type="radio"]{
    display:none;
}
input[type="radio"]+label:after{
    content: '';
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-image:  url("../img/radio_off.png");
    background-repeat: no-repeat;
    position:relative;
    top: 4px;
    display: block;
    margin: 0;
    padding: 0;
}
input[type="radio"]:checked+label:after{
    content: "";
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-image: url("../img/radio_on.png");
    background-repeat: no-repeat;
    position:relative;
    top: 4px;
    display: block;
    margin: 0;
    padding: 0;
}
input[type="radio"]:disabled+label:after{
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
/* 入力欄ラベル */
.input-label {
    margin-left: 1.2em;
    text-indent: -1.2em;
}
/* チェックボックスの画像の縦幅に合わせる */
.input-radiobutton-label,.input-checkbox-label {
    height: 2em;
    line-height: 2em;
    white-space: nowrap;
}
.input-checkbox-label-min {
    height: 1.5em;
    line-height: 1.5em;
    white-space: nowrap;
}
/* テキスト表示枠外の対応 */
.text-over {
    padding-left: 5px;
    padding-right: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-wrap {
    white-space: pre-wrap;
}
/* 長文の表示 */
.text-view {
    line-height: 1.4rem;
}
/* 掲示板 コメント入力のスタイル */
.comment-view {
    margin-bottom:2%;
    padding:2%;
    overflow: hidden;
}
/* 長文の入力 */
textarea[rows]{
    height: 18em;
}
/* divのスクロール設定 */
.div-over {
    overflow: auto;
    width: 100%;
}
.div-over-hidden {
    overflow: hidden;
    width: 100%;
}
/* 色指定 */
/* テキスト */
.text-color-grey {
    color: rgb(33,33,33);
}
.text-color-grey2 {
    color: rgb(189,189,189);
}
.text-color-grey3 {
    color: rgb(195,195,195);
}
/* j0201.phpで使用 */
.text-color-grey4 {
    color: rgb(158,158,158);
}
.text-color-lightgrey {
    color: rgb(183,183,183);
}
.text-color-blue {
    color: rgb(41,98,255);
}
/* j0201.phpで使用 */
.text-color-blue2 {
    color: rgb(98,148,235);
}
.text-color-lightblue {
    color: rgb(30,136,229);
}
.text-color-dodgerblue {
    color: rgb(54,155,228);
}
.text-color-orange {
    color: rgb(255,109,0);
}
.text-color-orange2 {
    color: rgb(255,109,18);
}
.text-color-green {
    color: rgb(0,200,83);
}
/* j0201.phpで使用 */
.text-color-green2 {
    color: rgb(128,180,72);
}
.text-color-red {
    color: rgb(244,67,54);
}
.text-color-white {
    color: rgb(255,255,255);
}
.text-color-yellow {
    color: rgb(252,239,94);
}
.text-color-off{
    color: rgb(158,158,158);
}
.text-color-lightblue2 {
    color: rgb(58,135,228);
}
.text-color-lightblue3 {
    color: rgb(144,202,249);
}
.text-color-purple{
    color: rgb(128,100,162);
}
.placeholder-color {
    color: rgb(158,158,158);
}
.text-hide {
    display: none;
}
.text-underline {
    color: rgb(31,136,228);
    text-decoration: underline;
}
/* ボタン */
.button-blue {
    background-color: rgb(30,136,229);
}
.button-lightblue {
    background-color: rgb(210,231,250);
}
.button-lightblue:hover, .button-lightblue:focus {
    background-color: rgb(210,231,250);
}
.button-blue:hover, .button-blue:focus {
    background-color: rgb(0,106,199);
}
.button-blue2 {
    border: 1px solid rgb(30,136,229);
    background-color: rgb(30,136,229);
}
.button-blue2:hover, .button-blue2:focus {
    background-color: rgb(0,106,199);
}
/* j0201.phpで使用 */
.button-blue3 {
    background-color: rgb(98,148,235);
}
.button-blue3:hover, .button-blue3:focus {
    background-color: rgb(68,118,205);
}
.button-blue-frame {
    border: 1px solid rgb(30,136,229);
    background-color: rgb(255,255,255);
    color: rgb(30,136,229);
}
.button-blue-frame:hover, .button-blue-frame:focus {
    border: 1px solid rgb(0,106,199);
    background-color: rgb(234,243,253);
    color: rgb(30,136,229);
}
.button-grey {
    background-color: rgb(158,158,158);
    cursor: default;
}
.button-grey:hover, .button-grey:focus {
    background-color: rgb(158,158,158);
    cursor: default;
}
.button-grey2 {
    border: 1px solid rgb(158,158,158);
    background-color: rgb(158,158,158);
    cursor: default;
}
.button-grey2:hover, .button-grey2:focus {
    background-color: rgb(158,158,158);
    cursor: default;
}
.button-grey-frame {
    border: 1px solid rgb(158,158,158);
    background-color: rgb(255,255,255);
    color: rgb(158,158,158);
    cursor: default;
}
.button-grey-frame:hover, .button-grey-frame:focus {
    border: 1px solid rgb(158,158,158);
    background-color: rgb(240,240,240);
    color: rgb(158,158,158);
    cursor: default;
}
.button-grey-frame-off {
    border: 1px solid rgb(158,158,158);
    background-color: rgb(255,255,255);
    color: rgb(158,158,158);
    cursor: default;
}
.button-grey-frame-off:hover, .button-grey-frame-off:focus {
    border: 1px solid rgb(158,158,158);
    background-color: rgb(255,255,255);
    color: rgb(158,158,158);
    cursor: default;
}
.button-green {
    background-color: rgb(124,179,66);
}
.button-green-off, .button-green-off:hover, .button-green-off:focus {
    background-color: rgb(124,179,66,0.5);
}
.button-green:hover, .button-green:focus {
    background-color: rgb(94,149,36);
}
/* j0201.phpで使用 */
.button-green2 {
    background-color: rgb(128,180,72);
}
.button-green2:hover, .button-green2:focus {
    background-color: rgb(98,150,42);
}
.button-orange {
    background-color: rgb(255,109,0);
}
.button-orange:hover, .button-orange:focus {
    background-color: rgb(225,79,0);
}
/* j0201.phpで使用 */
.button-orange2 {
    background-color: rgb(255,109,18);
}
.button-orange2:hover, .button-orange2:focus {
    background-color: rgb(225,79,0);
}
.button-purple {
    background-color: rgb(128,100,162);
}
.button-purple:hover, .button-purple:focus {
    background-color: rgb(98,70,132);
}
.button-white {
    border-radius:30px;
    color: rgb(33,33,33);
    background-color: rgb(255,255,255);
}
.button-white:hover, .button-white:focus {
    color: rgb(33,33,33);
    background-color: rgb(240,240,240);
}
.button-off {
    background-color: rgb(158,158,158);
}
.button-off:hover, .button-off:focus {
    background-color: rgb(158,158,158);
}
.button-black {
    background-color: rgb(0,0,0);
}
.button-black:hover, .button-black:focus {
    background-color: rgb(128,128,128);
}
.small-button-cancel {
    background-color: rgb(255,180,160);
}
.small-button-cancel:hover,.small-button-cancel:focus {
    background-color: rgb(255,180,160);
}
.small-button-red {
    background-color: rgb(244,67,54);
}
.small-button-red:hover, .small-button-red:focus {
    background-color: rgb(210,67,54);
}
.small-button-beige {
    color: rgb(255,255,255);
    background-color: rgb(250,179,159);
}
.small-button-beige:hover, .small-button-beige:focus {
    background-color: rgb(240,169,149);
}
.button-radius-left {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.button-radius-right {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.button-radius {
    -webkit-border-top-left-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
    -webkit-border-bottom-right-radius: 16px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    margin-bottom: 0;
    padding:0.25rem 0.5rem;
}
.button-grey-frame-on {
    border: 1px solid rgb(204,204,204);
    background-color: rgb(255,255,255);
    color: rgb(34,34,34);
}
.button-grey-frame-on:hover, .button-grey-frame-on:focus {
    border: 1px solid rgb(204,204,204);
    background-color: rgb(255,255,255);
    color: rgb(34,34,34);
}
.button-grey-frame-off {
    border: 1px solid rgb(240,240,240);
    background-color: rgb(255,255,255);
    color: rgb(188,188,188);
}
.button-grey-frame-off:hover, .button-grey-frame-off:focus {
    border: 1px solid rgb(240,240,240);
    background-color: rgb(255,255,255);
    color: rgb(188,188,188);
}
/* 比率表示バー */
.bar-green {
    background-color: rgb(124,179,66);
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
/* テーブル */
.table-border {
    /*border: 1px solid rgb(144,202,249);*/
    border: 1px solid rgb(209,233,255);
    /*border-radius: 5px;*/
    /* chromeのレイアウト崩れ対応 */
    /* border-collapse: separate; */
    /* border-spacing: 0; */
}
.table-border-red {
    border: 1px solid rgb(244,67,54);
}
.table-border-top {
    /*border-top: 1px solid rgb(144,202,249);*/
    border-top: 1px solid rgb(209,233,255);
}
.table-border-left {
    /*border-left: 1px solid rgb(144,202,249);*/
    border-left: 1px solid rgb(209,233,255);
}
.table-border-right {
    /*border-right: 1px solid rgb(144,202,249);*/
    border-right: 1px solid rgb(209,233,255);
}
.table-border-bottom {
    /*border-bottom: 1px solid rgb(144,202,249);*/
    border-bottom: 1px solid rgb(209,233,255);
}
.table-border-top-blue {
    border-top: 1px solid rgb(124,182,229);
}
.table-border-left-blue {
    border-left: 1px solid rgb(124,182,229);
}
.table-border-left-blue2 {
    border-left: 1px solid rgb(209,233,255);
}
.table-border-right-blue {
    border-right: 1px solid rgb(124,182,229);
}
.table-border-bottom-blue {
    border-bottom: 1px solid rgb(124,182,229);
}
.table-border-left-dummy {
    border-left: 1px solid rgb(255,255,255);
}
.table-header {
    background-color: rgb(209,233,255);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-header-red {
    background-color: rgb(244,67,54);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-header-orange {
    background-color: rgb(255,180,160);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-lock {
    background-color: rgb(238,238,238);
}
.table-column {
    background-color: #fff;
}
.table-column-even {
    background-color: rgb(249,249,249);
}
.table-column-grey {
    background-color: rgb(224,224,224);
    opacity:0.8;
}
.table-column-blue {
    background-color: rgb(144,202,249);
    opacity:0.8;
}
.table-column-yellow {
    background-color: rgb(254,250,228);
}
.table-column-grey3 {
    background-color: rgb(249,249,249);
    margin:0;
    padding:0.25em 0;
}
/* バックグラウンドがいらない場合のテーブルスタイル */
table.offbackground tr.even, table.offbackground tr.alt, table.offbackground tr:nth-of-type(even) {
    background: none;
}
/* カード */
.card-folder{
}
.card{
    border: 1px solid rgb(209,233,255);
    margin-bottom: 1em;
    line-height: 1.125rem
}
.card-folder .card:last-child{
    margin-bottom: 0;
}
.card-header{
    background-color: rgb(209,233,255);
    padding: 0.5rem 1rem 0.5em 1rem;
}
.card-sub-header{
    /*background-color: rgb(238,238,238);*/
    padding: 0.5rem 1rem 0.5em 1rem;
}
.card-title{
    padding: 0.2rem 0;
}
.status-icon{
    border-radius: 3px;
    padding: 0.2rem 0;
    margin: 0;
    background-color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 80px;
}
.status-icon-off{
    /*border-radius: 3px;*/
    padding: 0.2rem 0;
    margin: 0;
    /*background-color: #fff;*/
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-icon2{
    border-radius: 3px;
    padding: 0.2rem 0;
    margin: 0;
    background-color: #fff;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
}
.status-icon3{
    border-radius: 3px;
    padding: 0;
    margin: 0;
    margin-top: -1px;
    background-color: #fff;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
}
.status-icon-color-green{
    color: #fff;
    background-color: rgb(0,200,83);
}
/* j0101.phpで使用 */
.status-icon-color-green2{
    color: #fff;
    background-color: rgb(128,180,72);
}
.status-icon-color-blue{
    color: #fff;
    background-color: rgb(41,98,255);
}
/* j0101.phpで使用 */
.status-icon-color-blue2{
    color: #fff;
    background-color: rgb(98,148,235);
}
.status-icon-color-grey{
    color: #fff;
    background-color: rgb(158,158,158);
}
/* j0101.phpで以前に使用
.status-icon-color-grey2{
    color: #fff;
    background-color: rgb(189,189,189);
}
*/
.status-icon-color-orange{
    color: #fff;
    background-color: rgb(255,109,0);
}
.status-icon-color-yellow{
    color: #fff;
    background-color: rgb(249,191,74);
}
/* j0101.phpで使用 */
.status-icon-color-orange2{
    color: #fff;
    background-color: rgb(255,109,18);
}
.status-icon-color-purple{
    color: #fff;
    background-color: rgb(128,100,162);
}
.status-icon-color-red{
    color: #fff;
    background-color: rgb(244,67,54);
}
.status-icon-color-border-red{
    color:  rgb(244,67,54);
    background-color: rgb(255,255,255);
    border:1px solid rgb(244,67,54);
}
/** 時間割 出席登録 アイコン */
.status-attendance-icon-color-grey {
    color: rgb(33,33,33);
    border-color: rgb(33,33,33);
    border:1px solid;
}
.status-attendance-icon-color-blue {
    color: rgb(31,136,229);
    border-color: rgb(31,136,229);
    border:1px solid;
}
.status-attendance-icon-color-red {
    color: rgb(255,0,0);
    border-color: rgb(255,0,0);
    border:1px solid;
}
.status-attendance-icon-color-orange {
    color: rgb(255,149,67);
    border-color: rgb(255,149,67);
    border:1px solid;
}
.status-icon-frame-blue{
    color: rgb(30,136,229);
    border: 1px solid rgb(30,136,229);
    background-color: rgb(255,255,255);
}
.status-icon-frame-red{
    color: rgb(244,67,54);
    border: 1px solid rgb(244,67,54);
    background-color: rgb(255,255,255);
}
.card-body{
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}
.card-body2{
    padding-top: 0.5rem;
    padding-bottom: 0rem;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
}
.card-body-question{
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
}
.card-body-result{
    padding: 1.5rem 0.5rem 1.5rem 1.5rem;
}
.card-footer{
    background-color: rgb(238,238,238);
    padding: 0.5rem 0 0.5rem 0;
}
.card-table-header{
    background-color: #fff;
    padding: 0.4rem 0;
    margin: 0;
}
.card-table-header2{
    background-color: rgb(230,230,230);
    padding: 0.4rem 0;
    margin: 0;
}
.card-table-column{
    background-color: #fff;
    padding: 0.4rem 0 0.4rem 1rem;
    margin: 0;
}
.card-table-column2{
    background-color: #fff;
    padding: 0.4rem 0;
    margin: 0;
}
/* サマリー用カード */
.summary-card{
    border:5px solid rgb(238,238,238);
    padding: 0.5rem;
}
/* カード（背景色：グレー）*/
.card-grey{
    border: 1px solid rgb(238,238,238);
    margin-bottom: 1em;
    line-height: 1.125rem
}
.card-header-grey{
    background-color: rgb(249,249,249);
    padding: 0.5rem 1rem 0.5em 1rem;
}
.card-body-grey{
    background-color: rgb(249,249,249);
    padding: 0rem 1rem 0.5em 1rem;
}
.card-table-grey{
    background-color: rgb(249,249,249);
}
.card-table-header-grey{
    padding: 0.4rem 0;
    margin: 0;
}
.card-table-column-grey{
    padding: 0.4rem 0 0.4rem 1rem;
    margin: 0;
}
.card-header-grey2{
    background-color: rgb(238,238,238);
    padding: 1rem 1rem 0.5em 1rem;
}
.card-body-grey2{
    background-color: rgb(238,238,238);
    padding: 0rem 1rem 1em 1rem;
}
.card-table-grey2{
    background-color: rgb(238,238,238);
}
.card-grey3 {
    border: 1px solid rgb(230,230,230);
    margin-bottom: 1em;
    line-height: 1.125rem
}
.card-header-grey3{
    background-color: rgb(230,230,230);
    padding: 0.5rem 1rem 0.5em 1rem;
}
.card-header-grey4{
    background-color: rgb(245,248,251);
    padding: 1rem 1rem 0.5em 1rem;
}
.card-body-grey4{
    background-color: rgb(245,248,251);
    padding: 0rem 1rem 1em 1rem;
}
.card-table-grey4{
    background-color: rgb(245,248,251);
}
.card-footer-grey4{
    background-color: rgb(245,248,251);
    padding: 0rem 0 1rem 0;
}
/* トグルボタン */
.toggle-button-on {
    cursor: pointer;
    color: #fff;
    margin:0px 5px 5px 5px;
    padding: 0.8em 0 0.8em 0;
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    background-color: rgb(251,140,0);
}
.toggle-button-on:hover, .toggle-button-on:focus {
    background-color: rgb(221,110,0);
}
.toggle-button-off {
    cursor: pointer;
    color: #fff;
    margin:0px 5px 5px 5px;
    padding: 0.8em 0 0.8em 0;
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    background-color: rgb(30,136,229);
}
.toggle-button-off:hover, .toggle-button-off:focus {
    background-color: rgb(0,106,199);
}
/* 枠線 */
.border-color {
    color: rgb(158,158,158);
}

/* フォントサイズ指定 */
.label-font {
    padding: 5px 0px 5px 0px;
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}
.label-font-mini {
    padding: 5px 0px 5px 0px;
    font-size: 0.8rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}
.label-font-big {
    padding: 1em 0.25em;
    font-size: 1.25rem;
    font-weight: bold;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}
.message-font {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.message-font-b {
    font-size: 0.9rem;
    font-weight: bold;
    overflow-wrap: break-word;
    word-break: break-all;
}
.message-font-mini {
    font-size: 0.8rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.message-font-mini2 {
    font-size: 0.7rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.message-font-mini3 {
    font-size: 0.65rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.message-font-big {
    font-size: 1.5rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.message-font-middle {
    font-size: 1.25rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.message-ruby-font{
    font-size: 0.8rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.font-bold {
    font-weight: bold;
}
.bbs-title-font {
    font-size: 1.2rem;
    font-weight: bold;
    overflow-wrap: break-word;
    word-break: break-all;
}
.title-font {
    font-size: 1rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.title-font-bold {
    font-size: 1rem;
    font-weight: bold;
    overflow-wrap: break-word;
    word-break: break-all;
}
.title-font-big {
    font-size: 2rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.sub-title-font {
    font-size: 0.8rem;
    font-weight: normal;
    white-space: nowrap;
}
.sub-title-font2 {
    font-size: 0.9rem;
    font-weight: normal;
    white-space: nowrap;
}
.main-title-font {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
    overflow-wrap: break-word;
    word-break: break-all;
}
.title-font2 {
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1.25rem;
    overflow-wrap: break-word;
    word-break: break-all;
}
.title-font-bold2 {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.25rem;
    overflow-wrap: break-word;
    word-break: break-all;
}
.body-font {
    font-size: 0.95rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.tag-font {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.comment-font {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.menu-button-font {
    font-size: 0.8rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.table-font {
    font-size: 0.9rem;
    font-weight: normal;
    white-space: nowrap;
}
.table-font-wrap {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.table-font-mini {
    font-size: 0.8rem;
    font-weight: normal;
    white-space: nowrap;
}
.table-font-mini-wrap {
    font-size: 0.8rem;
    font-weight: normal;
    overflow-wrap:break-word;
    word-break: break-all;
}
.table-font-mini-wrap2 {
    font-size: 0.75rem;
    font-weight: normal;
    overflow-wrap:break-word;
    word-break: break-all;
}
.table-font-large {
    font-size: 1.25rem;
    font-weight: normal;
    white-space: nowrap;
}
.table-font-large-wrap {
    font-size: 1.25rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.button-font {
    font-size: 0.9rem;
    font-weight: normal;
    width: 100%;
    white-space: nowrap;
}
.button-font-medium {
    font-size: 1.25rem;
    font-weight: normal;
    width: 100%;
    white-space: nowrap;
}
.button-font-big {
    font-size: 1.5rem;
    font-weight: normal;
    width: 100%;
    white-space: nowrap;
}
.small-button-font {
    font-size: 0.8rem;
    font-weight: normal;
    width: 100%;
    white-space: nowrap;
}
.button-size {
    width: 8em;
    margin-bottom: 0;
    padding: 0.7rem;
}
.small-button-size{
    width:7em;
    margin-bottom: 0;
    padding:0.5rem;
}
.button-size-big {
    width: 8em;
    margin-bottom: 0;
    padding: 1rem;
}
.link-font {
    font-size: 0.8rem;
    font-weight: normal;
    white-space: nowrap;
}
.link-font-middle {
    font-size: 1.2rem;
    font-weight: normal;
    white-space: nowrap;
}
.link-font-large {
    font-size: 1.6rem;
    font-weight: normal;
    white-space: nowrap;
}
.password-font {
    font-size: 1.25rem;
    font-weight: bold;
    white-space: nowrap;
}
.reading-font {
    font-size: 0.6rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.safety-confirmation-count-font {
    font-size: 2.5rem;
    overflow-wrap: break-word;
    word-break: break-all;
}
/* ダイアログ表示用 */
.dialog {
    display:none;
    margin: 0px 0px 0px 0px;background-color:#fff;
    border:1px solid;
    border-color:rgb(158,158,158);
    position:absolute;
    padding: 10px 10px 10px 10px;
    /*border-radius: 5px;*/
    color: rgb(33,33,33);
    font-weight: normal;
    box-shadow: -5px 5px 5px rgba(33,33,33,0.5);
    -moz-box-shadow: -5px 5px 5px rgba(33,33,33,0.5);
    -webkit-box-shadow: -5px 5px 5px rgba(33,33,33,0.5);
    z-index:2000;
}
/* 閉じるボタン */
.dialog a.close_button,a.close-button{
    font-size:1rem;
    text-align:center;
    cursor: pointer;
    outline: none;
    text-decoration:none;
    color: rgb(33,33,33);
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:#fff;
    width: 1rem;
    float: right;
}
/* カーソルが乗った時 */
.dialog a.close_button:hover,a.close-button:hover{
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color: rgb(128,128,128);
    color: rgb(255,255,255);
}
/* 閉じるボタン */
.dialog a.close-button2{
    font-size:1rem;
    text-align:center;
    cursor: pointer;
    outline: none;
    text-decoration:none;
    color: rgb(33,33,33);
    //border:1px solid;
    //border-color:rgb(158,158,158);
    //background-color:#fff;
    width: 1rem;
    float: right;
}
/* カーソルが乗った時 */
.dialog a.close-button2:hover{
    //border:1px solid;
    //border-color:rgb(158,158,158);
    //background-color: rgb(128,128,128);
    //color: rgb(255,255,255);
}
/* 押されたとき */
.dialog a.close_button:action,a.close-button:action{
}
/* 閉じるボタン */
.dialog a.close-button2{
    font-size:1rem;
    text-align:center;
    cursor: pointer;
    outline: none;
    text-decoration:none;
    color: rgb(33,33,33);
    width: 1rem;
    float: right;
}
/* カーソルが乗った時 */
.dialog a.close-button2:hover{
}
/* タイトル */
.dialog span.dialog_title,span.dialog-title{
    clear: both;
    padding-bottom: 0.5em;
    font-size:0.656rem;
    display:block;
    overflow: hidden;
}
/* メッセージ */
.dialog span.dialog_message,span.dialog-message{
    line-height: 150%;
    padding: 1em;
    padding:0;
    margin: 0;
    padding-bottom:0;
    margin-bottom: 0;
    font-size:0.656rem;
    border:1px solid;
    border-color:rgb(158,158,158);
    display:block;
}
.dialog span.message{
    font-size:0.656rem;
    text-align:left;
    outline: none;
    text-decoration:none;
    color: rgb(33,33,33);
    float: left;
}
.dialog2 {
    display:none;
    margin: 0px 0px 0px 0px;
    background: rgba(255,255,255,0);
    border:none;
    position:absolute;
    padding: 10px 10px 10px 10px;
    /*border-radius: 5px;*/
    color: rgb(33,33,33);
    font-weight: normal;
    z-index:2000;
}
/* 閉じるボタン */
.dialog2 a.close_button{
    font-size:1rem;
    text-align:center;
    cursor: pointer;
    outline: none;
    text-decoration:none;
    color: rgb(33,33,33);
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:#fff;
    width: 1rem;
    float: right;
}
/* カーソルが乗った時 */
.dialog2 a.close_button:hover{
    //border:1px solid;
    //border-color:rgb(158,158,158);
    //background-color: rgb(128,128,128);
    //color: rgb(255,255,255);
}
/* 背景をブロック */
.dialog_block,.dialog-block {
    display:none;
    position:fixed;
    top:0;
    left:0;
    padding:0 0 0 0;
    margin: 0 0 0 0;
    width:100%;
    height:100%;
    font-size:10px;
    border: 0px solid #000000;
    background: rgba(128,128,128,0.2);
    z-index:100;
}
.dialog_block2,.dialog-block2 {
    display:none;
    position:fixed;
    top:0;
    left:0;
    padding:0 0 0 0;
    margin: 0 0 0 0;
    width:100%;
    height:100%;
    font-size:10px;
    border: 0px solid #000000;
    background: rgba(0,0,0,0.8);
    z-index:100;
}
/* ダイアログ表示用 */
.answer-dialog {
    display:none;
    position:absolute;
    margin: 0;
    padding: 0;
    font-weight: normal;
    z-index:200;
}
/* 丸 */
.circle-red {
    width: 2.5em;
    height: 2.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(244,67,54);
}
.circle-mini-red {
    width: 1.25em;
    height: 1.25em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(244,67,54);
}
.circle-grey {
    width: 3em;
    height: 3em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(183,183,183);
}
.circle-white {
    width: 1.25em;
    height: 1.25em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(255,255,255);
}
.circle-white-week {
    width: 1.5em;
    height: 1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(255,255,255);
    display:inline-block;
}
.circle-skyblue {
    width: 3em;
    height: 3em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(144,202,249);
}
.circle-lightskyblue {
    width: 3em;
    height: 3em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(199,228,252);
}
.circle-blue {
    width: 4em;
    height: 4em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.square-bulue {
    width: 6em;
    height: 2.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 5%;
    background-color: rgb(30,136,229);
}
.category-status {
    position: relative;
    padding: 1em;
    margin-bottom: 0.3rem;
    border: 1px solid rgb(224,224,224);
    border-radius: 0.5em;
}
.category-status-detail {
    float: left;
    width: 50%;
}
.category-status-detail p {
    font-weight: bold;
    font-size: 1.05rem;
}
.category-status-detail ul {
    list-style: none;
    font-size: 0.9em;
}
.category-status-detail ul li {
    text-indent: -1em;
}
.category-status-detail ul li span {
    margin-right: 0.2em;
    font-size: 1.1em;
}
.answer-rate-circle {
    position: relative;
    width: 1em;
    height: 1em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    float: right;
    background-color:rgb(235,239,242);
    font-size: 115px;
}
.answer-rate-circle:after {
    position: absolute;
    top: 0.08em;
    left: 0.08em;
    display: block;
    content: '';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(255,255,255);
    width: 0.84em;
    height: 0.84em;
    box-sizing: content-box;
}
.answer-rate-circle .rate-text {
    position: absolute;
    top: 13%;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 5em;
    line-height: 4em;
    font-size: 0.1em;
    display: block;
    text-align: center;
    white-space: normal;
    z-index: 1;
    box-sizing: content-box;
}
.answer-rate-circle .rate-percentage {
    position: absolute;
    top: 10%;
    left: 0;
    width: 5em;
    line-height: 5em;
    font-size: 0.2em;
    display: block;
    text-align: center;
    white-space: normal;
    z-index: 1;
    box-sizing: content-box;
    font-weight: bold;
}
.answer-rate-circle .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0,1em,1em,0.5em);
    box-sizing: content-box;
}
.answer-rate-circle .slice .bar {
    box-sizing: content-box;
}
.answer-rate-circle .slice .fill {
    box-sizing: content-box;
}
.answer-rate-circle .slice.obtuse {
    clip: rect(auto,auto,auto,auto);
}
.answer-rate-circle .slice .bar,
.answer-rate-circle .slice.obtuse .fill {
    position: absolute;
    width: 0.84em;
    height: 0.84em;
    clip: rect(0,0.5em,1em,0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.answer-rate-circle .slice.border .bar,
.answer-rate-circle .slice.border.obtuse .fill {
    border: 0.08em solid rgb(176,191,198);
}
.answer-rate-circle .slice.obtuse .fill {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
/* 文字のオーバーラップ */
.str-base {
    position: relative;
}
.str-white {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: 1em;
}
.str-grey {
    position: absolute;
    width:100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(220,220,220);
    font-weight: bold;
    font-size: 2.5em;
}
.str-mark-red {
    position: absolute;
    width:100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(244,67,54);
    font-weight: bold;
    font-size: 2.5em;
    opacity: 0.3;
}
.str-mark-blue {
    position: absolute;
    width:100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(41,98,255);
    font-weight: bold;
    font-size: 2.5em;
    opacity: 0.3;
}
.str-red {
    position: absolute;
    width:100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(244,67,54);
    font-weight: bold;
    font-size: 1em;
}
.str-blue {
    position: absolute;
    width:100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(41,98,255);
    font-weight: bold;
    font-size: 1em;
}
.str-lightblue {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(30,136,229);
    font-weight: bold;
    font-size: 1em;
}
.str-off {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(158,158,158);
    font-weight: bold;
    font-size: 1em;
}
.str-grey2 {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(33,33,33);
    font-weight: normal;
    font-size: 1em;
}
.str-grey3 {
    position: absolute;
    width:100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(128,128,128);
    font-weight: bold;
    font-size: 1em;
    opacity: 0.3;
}
.str-center {
    position: absolute;
    top: 60%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}
.str-right {
    position: absolute;
    right:1em;
    bottom:1em;
    margin: 0;
    padding: 0;
    color: rgb(33,33,33);
    font-weight: normal;
    font-size: 1em;
}
.str-right-red {
    position: absolute;
    right:0.5em;
    bottom:0.5em;
    margin: 0;
    padding: 0;
    color: rgb(244,67,54);
    font-weight: bold;
    font-size: 1.5em;
}
/* hr */
.hr-blue {
    border-width: 1px 0 0 0;
    border-color: rgb(41,98,255);
}
.hr-grey {
    border-width: 3px 0 0 0;
    border-color: rgb(189,189,189);
}
.hr-grey2 {
    border-width: 3px 0 0 0;
    border-color: rgb(238,238,238);
}
/* 問題の選択肢 */
.choice {
}
/* カーソルが乗った時 */
.choice:hover {
    background-color:rgb(255,200,180);
    color: rgb(158,158,158);
}
.choice:hover .choice-number{
    background-color:rgb(255,200,180);
    color: rgb(158,158,158);
}
.choice:hover .choice-number-parent{
    background-color:rgb(255,200,180);
    color: rgb(158,158,158);
}
.choice:hover .choice-font{
    border: 1px solid;
    border-color: rgb(255,200,180);
    background-color:rgb(255,200,180);
    color: rgb(158,158,158);
    overflow-wrap: break-word;
    word-break: break-all;
}
/* 押されたとき */
.choice:action{
}
/* 問題の選択肢(選択済) */
.choice-select {
    background-color:rgb(255,200,180);
}
.choice-select .choice-font{
    border: 1px solid;
    border-color: rgb(255,200,180);
    background-color:rgb(255,200,180);
    overflow-wrap: break-word;
    word-break: break-all;
}
/* カーソルが乗った時 */
.choice-select:hover{
    background-color:rgb(255,180,160);
    color: rgb(158,158,158);
}
.choice-select:hover .choice-number{
    background-color:rgb(255,180,160);
    color: rgb(158,158,158);
}
.choice-select:hover .choice-number-parent{
    background-color:rgb(255,180,160);
    color: rgb(158,158,158);
}
.choice-select:hover .choice-font{
    border: 1px solid;
    border-color: rgb(255,180,160);
    background-color:rgb(255,180,160);
    color: rgb(158,158,158);
    overflow-wrap: break-word;
    word-break: break-all;
}
/* 押されたとき */
.choice-select:action{
}
/* 画像 */
.choice-img{
    max-width:100%;
    height:auto;
    /*
    border:1px solid;
    border-color:rgb(158,158,158);
    */
    backgroud-color:inherit;
}
.commentary {
    font-size:0.9rem;
    text-align:left;
    border:1px solid;
    border-color:rgb(124,182,229);
    background-color:rgb(209,233,255);
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    margin:0;
    padding:10px;
}
/* 試験問題操作用リンク */
#navi-link1 {
    position: absolute;
    padding: 0;
    /*top: 0;*/
    /*left: 0;*/
    right: 0;
    /*bottom: 0;*/
    margin: auto;
    margin-top: 0;
    /*border: 1px solid;*/
    border-color: rgb(158,158,158);
    background-color: #fff;
    color: rgb(33,33,33);
    font-weight: normal;
    z-index: 9999;
    opacity:0.8;
}
#navi-link2 {
    position: fixed;
    padding: 0;
    /*top: 0;*/
    left: 0;
    /*right: 0;*/
    bottom: 0;
    margin: auto;
    margin-top: 0;
    /*border: 1px solid;*/
    border-color: rgb(158,158,158);
    background-color: #fff;
    color: rgb(33,33,33);
    font-weight: normal;
    z-index: 9999;
    opacity:0.8;
}
#navi-link3 {
    position: fixed;
    padding: 0;
    padding-left:0.5em;
    /*top: 0;*/
    left: 0;
    /*right: 0;*/
    bottom: 0;
    margin: auto;
    margin-top: 0;
    /*border: 1px solid;*/
    border-color: rgb(158,158,158);
    background-color: #fff;
    color: rgb(33,33,33);
    font-weight: normal;
    z-index: 9999;
    opacity:0.8;
}
.navi-link {
    position: fixed;
    padding: 0;
    top: 0;
    left: 0;
    /*right: 0;*/
    /*bottom: 0;*/
    margin: auto;
    margin-top: 0;
    z-index: 9999;
    opacity:0.8;
}
.div-bottom {
    position: fixed;
    padding: 0;
    bottom: 0.5em;
    /*margin-top: 0;*/
    left: 50%;
    transform: translate(-50%, 0);
    border-color: rgb(158,158,158);
    color: rgb(33,33,33);
    font-weight: normal;
    z-index: 9999;
    opacity:0.8;
    overflow-x: hidden;
    overflow-y: scroll;
}
.div-bottom-button {
    position: fixed;
    padding: 0;
    bottom: 0;
    /*margin-top: 0;*/
    left: 50%;
    transform: translate(-50%, 0);
    border-color: rgb(158,158,158);
    color: rgb(33,33,33);
    font-weight: normal;
    z-index: 9999;
    /*opacity:0.8;*/
    overflow-x: hidden;
    overflow-y: hidden;
}
.div-top-button {
    position: fixed;
    padding: 0;
    top: 0;
    /*margin-top: 0;*/
    left: 50%;
    transform: translate(-50%, 0);
    border-color: rgb(158,158,158);
    color: rgb(33,33,33);
    font-weight: normal;
    z-index: 9999;
    /*opacity:0.8;*/
    overflow-x: hidden;
    overflow-y: hidden;
}
/* 透過を無効 */
.opacity-off {
    opacity:1;
}
/* 透過 */
.opacity-on {
    opacity:0.5;
}
/* テーブルクリック */
.table-click {
    cursor: pointer;
}
.table-click:hover {
    background-color: rgb(234,243,253);
}
/* 色付きのボックス */
.box-font {
    margin:0;
    padding:0.25em;
    padding-left:0.5em;
    padding-right:0.5em;
    font-size: 0.75rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(255,255,255);
}
.box-blue {
    background-color: rgb(30,136,229);
}
.box-red {
    background-color: rgb(244,67,54);
}
.box-red2 {
    background-color: rgba(244,67,54,0.2);
}
.box-orange {
    background-color: rgb(255,109,0);
}
.box {
    border: 1px solid;
    border-color: rgb(158,158,158);
}
.box-frame-blue {
    border: 1px solid;
    border-color: rgb(30,136,229);
}
.box-frame-grey {
    border: 3px solid;
    border-color: rgb(189,189,189);
}
/* 表示バー */
.graph-bar-blue {
    background-color: rgb(3,155,229);
    /*
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    */
}
.graph-bar-green {
    background-color: rgb(124,179,66);
    /*
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    */
}
.graph-bar-orange {
    background-color: rgb(249,168,37);
}
.graph-bar-red {
    background-color: rgb(255,45,45);
}
.bar-lightblue {
    background-color: rgb(30,136,229);
    filter:alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
}
/* 出欠照会 */
.bar-grey {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 20px;
    background-color: rgb(238,238,238);
    border-radius: 3px;
}
.bar-blue {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 20px;
    background-color: rgb(31,136,228);
    border-radius: 3px;
}
.bar-blue::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    border-left: 5px solid rgb(31,136,228);
    border-top: 10px solid rgb(238,238,238);
    border-bottom: 11px solid rgb(238,238,238);
}
.box-frame {
    margin-bottom: 1em;
    line-height: 1.125rem;
    border-radius: 5px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
.box-header {
    border-top: 1px solid rgb(31,136,228);
    border-left: 1px solid rgb(31,136,228);
    border-right: 1px solid rgb(31,136,228);
    color: rgb(255,255,255);
    background-color: rgb(31,136,228);
    padding: 0.5rem 0.5rem 0.5em 0.5rem;
    border-radius: 5px 5px 0 0;
}
.box-body {
    border-left: 1px solid rgb(183,183,183);
    border-right: 1px solid rgb(183,183,183);
    border-bottom: 1px solid rgb(183,183,183);
    padding: 1rem 0.5rem 1rem 0.5rem;
    color: rgb(31,136,228);
    border-radius: 0 0 5px 5px;
}
.box-frame-off {
    margin-bottom: 1em;
    line-height: 1.125rem;
    border-radius: 5px;
}
.box-header-off {
    border-top: 1px solid rgb(183,183,183);
    border-left: 1px solid rgb(183,183,183);
    border-right: 1px solid rgb(183,183,183);
    color: rgb(255,255,255);
    background-color: rgb(183,183,183);
    padding: 0.5rem 0.5rem 0.5em 0.5rem;
    border-radius: 5px 5px 0 0;
}
.box-body-off {
    border-left: 1px solid rgb(183,183,183);
    border-right: 1px solid rgb(183,183,183);
    border-bottom: 1px solid rgb(183,183,183);
    padding: 1rem 0.5rem 1rem 0.5rem;
    color: rgb(33,33,33);
    border-radius: 0 0 5px 5px;
}
.box-body-font1 {
    font-size: 1.5rem;
    font-weight: bold;
    overflow-wrap: break-word;
    word-break: break-all;
}
.box-body-font1-off {
    font-size: 1.5rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(33,33,33);
}
.box-body-font2 {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.box-body-font2-off {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(33,33,33);
}
.box-body-font3 {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}
.box-body-font3-off {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(33,33,33);
}
.box-body-link:link {
    color: rgb(31,136,228);
    text-decoration: underline;
}
.box-body-link:visited {
    color: rgb(31,136,228);
    text-decoration: underline;
}
.box-dialog {
    border-radius: 5px;
}
.box-dialog-title {
    padding: 0.8em;
    font-size:0.656rem;
    display:block;
    overflow: hidden;
    background-color: rgb(238,238,238);
    border-radius: 5px 5px 0 0;
}
/* 試験問題にチャレンジ */
.challenge {
    margin:0;
    padding:0.25em;
    padding-top:0.5em;
    padding-left:1em;
    padding-right:0.5em;
    font-size: 0.75rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(255,255,255);
}
.challenge-color-blue {
    background-color: rgb(3,155,229);
}
.challenge-color-green {
    background-color: rgb(124,179,66);
}
.challenge-color-orange {
    background-color: rgb(249,168,37);
}
.challenge-color-red {
    background-color: rgb(255,45,45);
}
.challenge-font-big {
    margin:0;
    padding:0;
    font-weight: bold;
    font-size: 1.25rem;
}
/* アイコン＋テキスト */
.link-icon {
    font-size: 1.25rem;
    color: rgb(30,136,229);
}
.link-icon2 {
    font-size: 1.25rem;
    color: rgb(58,135,228);
}
.link-icon3 {
    font-size: 1.00rem;
    color: rgb(255,255,225);
    vertical-align:middle;
}
.link-icon:hover {
}
.link-icon-text {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(33,33,33);
}
.link-icon-text:hover {
}
.link-icon-parent {
    outline:none;
}
.link-icon-parent:hover > .link-icon-text {
    color: rgb(0,120,160);
}
.link-icon-button {
    background-color: rgb(30,136,229);
}
.link-icon-text-blue {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(58,135,228);
}
.link-icon-parent:hover > .link-icon-text-blue {
    color: rgb(0,106,199);
}
.link-icon-text-blue2 {
    font-size: 0.9rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(31,139,229);
}
.link-icon-parent:hover > .link-icon-text-blue2 {
    color: rgb(31,139,229);
}
.link-icon-parent:hover > .link-icon-button {
    background-color: rgb(0,106,199);
}
.link-icon-blue {
    font-size: 1.25rem;
    color: rgb(58,135,228);
}
.link-icon-blue2 {
    font-size: 1.25rem;
    color: rgb(31,139,229);
}
.link-icon-red {
    font-size: 0.75rem;
    color: rgb(255,109,0);
}
.link-icon-green {
    font-size: 1.25rem;
    color: rgb(87,176,85);
}
.link-icon-green2 {
    font-size: 1.25rem;
    color: rgb(96,177,90);
}
.link-icon-yellow {
    font-size: 1.25rem;
    color: rgb(255,204,0);
}
.link-icon-off {
    font-size: 1.25rem;
    color: rgb(158,158,158);
}
.link-icon-off2 {
    font-size: 1rem;
    color: rgb(200,200,200);
}
.link-icon-hide {
    display: none !important;
}
.link-status-icon-green{
    font-size: 1.25rem;
    color: rgb(0,200,83);
}
/* j0201.phpで使用 */
.link-status-icon-green2{
    font-size: 1.25rem;
    color: rgb(128,180,72);
}
.link-status-icon-blue{
    font-size: 1.25rem;
    color: rgb(41,98,255);
}
/* j0201.phpで使用 */
.link-status-icon-blue2{
    font-size: 1.25rem;
    color: rgb(98,148,235);
}
.link-status-icon-grey{
    font-size: 1.25rem;
    color: rgb(158,158,158);
}
.link-status-icon-grey2{
    font-size: 1.25rem;
    color: rgb(189,189,189);
}
.link-status-icon-orange{
    font-size: 1.25rem;
    color: rgb(255,109,0);
}
/* j0201.phpで使用 */
.link-status-icon-orange2{
    font-size: 1.25rem;
    color: rgb(255,109,18);
}
.link-status-icon-purple{
    font-size: 1.25rem;
    color: rgb(128,100,162);
}
.link-icon-text-small {
    font-size: 0.75rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(33,33,33);
}
.side-icon {
    font-size: 1.25rem;
    color: rgb(144,202,249);
}
.side-icon-white {
    font-size: 1.25rem;
    color: rgb(255,255,255);
}
/* 設問 */
.question-number {
    margin: 0;
    padding: 0 10px;
    font-size: 1.25rem;
    font-weight: bold;
    white-space: nowrap;
    color: rgb(255,255,255);
    background-color: rgb(30,136,229);
}
.question-font {
    font-size: 1.25rem;
    font-weight: bold;
    /*white-space: nowrap;*/
    overflow-wrap: break-word;
    word-break: break-all;
    color: rgb(33,33,33);
}
.correct-font {
    font-size: 1.25rem;
    font-weight: bold;
    color: rgb(33,33,33);
    overflow-wrap: break-word;
    word-break: break-all;
}
.choice-panel {
    margin:10px 0;
    padding:1.25em 1em;
    border: 1px solid;
    border-color: #d8d8d8;
    background-color: #fff;
    border-radius: 5px;
}
.choice-panel-select {
    margin:10px 0;
    padding:1.25em 1em;
    border: 1px solid;
    border-color: #d8d8d8;
    background-color:rgb(255,200,180);
    border-radius: 5px;
}
.choice-panel-select .choice-font{
    border: 1px solid;
    border-color: rgb(255,200,180);
    overflow-wrap: break-word;
    word-break: break-all;
}
.choice-panel-select-ok {
    margin:10px 0;
    padding:1.25em 1em;
    border: 1px solid;
    border-color: #d8d8d8;
    background-color:rgb(180,200,255);
    border-radius: 5px;
}
.choice-panel-select-ok .choice-font{
    border: 1px solid;
    border-color: rgb(180,200,255);
    overflow-wrap: break-word;
    word-break: break-all;
}
.choice-table {
    border:none;
    margin: 0;
    padding: 5px 10px;
}
.choice-table-select {
    border:none;
    margin: 0;
    padding: 5px 10px;
    background-color:rgb(255,200,180);
}
.choice-table-select-ok {
    border:none;
    margin: 0;
    padding: 5px 10px;
    background-color:rgb(180,200,255);
}
.choice-number {
    font-size: 1.1rem;
    font-weight: bold;
    color: rgb(30,136,229);
}
.choice-font {
    margin:0;
    padding:0;
    border: 1px solid;
    border-color: rgb(255,255,255);
    font-size: 1.25rem;
    font-weight: normal;
    line-height:1.5rem;
    color: rgb(33,33,33);
    overflow-wrap: break-word;
    word-break: break-all;
}
/* 背景をブロック */
.table_block {
    display:none;
    position:fixed;
    top:0;
    left:0;
    padding:0 0 0 0;
    margin: 0 0 0 0;
    width:100%;
    height:100%;
    font-size:10px;
    //border: 0px solid #000000;
    //background: rgba(250,250,250,0.2);
    z-index:1000;
}
.select-on {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
.select-off {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* アニメーション */
.blink-button {
    animation: blink 2s linear infinite normal;
    -webkit-animation: blink 2s linear infinite normal;
    -moz-animation: blink 2s linear infinite normal;
    -o-animation: blink 2s linear infinite normal;
}
.blink-button:hover {
    animation:none;
    -webkit-animation:none;
}
@keyframes blink{
    0% {background-color:rgb(30,136,229);}
    10% {background-color:rgb(98,195,247);}
    100% {background-color:rgb(30,136,229);}
}
@-webkit-keyframes blink{
    0% {background-color:rgb(30,136,229);}
    10% {background-color:rgb(98,195,247);}
    100% {background-color:rgb(30,136,229);}
}
@-moz-keyframes blink{
    0% {background-color:rgb(30,136,229);}
    10% {background-color:rgb(98,195,247);}
    100% {background-color:rgb(30,136,229);}
}
@-o-keyframes blink{
    0% {background-color:rgb(30,136,229);}
    10% {background-color:rgb(98,195,247);}
    100% {background-color:rgb(30,136,229);}
}
/* パネルみたいなボタン */
.panel-button {
    margin:10px 0;
    padding:3em 1em;
    border: 2px solid;
    border-color: #d8d8d8;
    background-color: #fff;
    border-radius: 5px;
}
.panel-button-font {
    border: 1px solid;
    border-color: rgb(255,255,255);
    font-size: 1.25rem;
    font-weight: normal;
    line-height:1.5rem;
    color: rgb(33,33,33);
    overflow-wrap: break-word;
    word-break: break-all;
}
/* カーソルが乗った時 */
.panel-button:hover {
    cursor: pointer;
    background-color:rgb(234,243,253);
    /*color: rgb(158,158,158);*/
}
.panel-button:hover .panel-button-font{
    border: 1px solid;
    border-color: rgb(234,243,253);
    background-color:rgb(234,243,253);
    color: rgb(158,158,158);
    overflow-wrap: break-word;
    word-break: break-all;
}
.panel-button-off {
    margin:10px 0;
    /*padding:1.25em 1em;*/
    padding:3em 1em;
    border: 2px solid;
    border-color: #d8d8d8;
    background-color: #fff;
    border-radius: 5px;
}
/* カーソルが乗った時 */
.panel-button-off:hover {
    cursor: pointer;
    background-color:rgb(240,240,240);
    /*color: rgb(158,158,158);*/
}
.panel-button-off:hover .panel-button-font{
    border: 1px solid;
    border-color: rgb(240,240,240);
    background-color:rgb(240,240,240);
    color: rgb(158,158,158);
    overflow-wrap: break-word;
    word-break: break-all;
}
.title-bar {
    margin:5px 0;
    padding:0.5em 1em;
    /*border: 1px solid;*/
    /*border-color: #d8d8d8;*/
    border: none;
    background-color: rgb(209,233,255);
    font-size: 1.25rem;
    font-weight: bold;
    line-height:1.5rem;
    color: rgb(33,33,33);
}
.link-button {
    position: absolute;
    padding: 0;
    padding: 2px 10px;
    border-radius: 5px;
    /*top: 0;*/
    /*left: 0;*/
    right: 1em;
    /*bottom: 0;*/
    margin: auto;
    margin-top: 0;
    /*border: 1px solid;*/
    border-color: rgb(158,158,158);
    color: rgb(255,255,255);
    font-weight: normal;
    font-size: 1rem;
    line-height:1.25rem;
    z-index: 9999;
    /*opacity:0.8;*/
}
/* 背景色（青）*/
.backcolor-blue {
    background-color: rgb(234,244,255);
}
/* 背景色（薄い赤）*/
.backcolor-red {
    background-color: rgb(255,180,160);
}
/* 背景色（薄いオレンジ）*/
.backcolor-orange {
    background-color: rgb(254,242,222);
}
/* 角丸ボックス */
.radius-box {
    margin:5px 5px;
    padding:3px;
    border: 1px solid;
    border-color:rgb(201,228,252);
    background-color:rgb(201,228,252);
    border-radius: 5px;
    font-weight:bold;
}
.radius-box-grey {
    margin:0px 0px;
    padding:0px 5px;
    border:1px solid;
    border-color:rgb(183,183,183);
    background-color:rgb(183,183,183);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.65rem;
    text-align:left !important;
}
.radius-box-grey2 {
    margin:0px 0px;
    padding:0px 5px;
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:rgb(158,158,158);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.65rem;
    text-align:center;
}
.radius-box-grey3 {
    //margin:0px 0px;
    //padding:0px 5px;
    border:1px solid;
    border-color:rgb(183,183,183);
    background-color:rgb(248,250,251);
    //color:rgb(183,183,183);
    border-radius: 5px;
    font-weight:normal;
    //font-size:0.65rem;
    text-align:left !important;
}
.radius-box-grey4 {
    border:1px solid;
    //border-color:rgb(248,250,251);
    //background-color:rgb(248,250,251);
    border-color:rgb(249,249,249);
    background-color:rgb(249,249,249);
    color:rgb(83,83,83);
    border-radius: 5px;
    font-weight:bold;
    font-size:0.8rem;
    text-align:center;
}
.radius-box-grey5 {
    border:1px solid;
    border-color:rgb(238,238,238);
    background-color:rgb(249,249,249);
    border-radius: 5px;
    padding:1em 1em;
}
.radius-box-white {
    border:1px solid;
    border-color:rgb(238,238,238);
    background-color:rgb(255,255,255);
    border-radius: 5px;
    padding:1em 0.5em;
}
.radius-box-lightblue {
    border:1px solid;
    border-color:rgb(209,233,255);
    background-color:rgb(255,255,255);
    border-radius: 5px;
    padding:1em 0.5em;
}
/* パネルの背景色 */
.panel-backcolor {
    background-color: rgb(255,255,255);
}
/* foundation */
ul.pagination {
    margin-left: 0;
    padding: 0;
}
ul.pagination li {
    height: 1.5rem;
    margin: 0;
    padding: 0;
}
ul.pagination li a, ul.pagination li button {
    border-radius: 3px;
    transition: background-color 300ms ease-out;
    background: none;
    color: rgb(41,98,255);
    display: block;
    font-size: 0.8rem;
    font-weight: normal;
    line-height: inherit;
    padding-left: 3px;
    padding-right: 3px;
}
ul.pagination li:hover a,
ul.pagination li a:focus, ul.pagination li:hover button,
ul.pagination li button:focus {
    background: rgb(225,225,225);
}
ul.pagination li.unavailable a, ul.pagination li.unavailable button {
    cursor: default;
    color: rgb(97,97,97);
    pointer-events: none;
    padding-left: 3px;
    padding-right: 3px;
}
ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus, ul.pagination li.unavailable:hover button, ul.pagination li.unavailable button:focus {
    background: transparent;
}
ul.pagination li.current a, ul.pagination li.current button {
    background: rgb(41,98,255);
    color: #fff;
    cursor: default;
    font-weight: bold;
}
ul.pagination li.current a:hover, ul.pagination li.current a:focus, ul.pagination li.current button:hover, ul.pagination li.current button:focus {
    background: rgb(11,68,235);
}
/* サジェスト機能 */
.ui-autocomplete{
    padding: 0.4rem;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    max-height: 10.8em;
    font-size: 0.9rem;
    font-weight: normal;
    color: rgb(33,33,33);
    text-overflow: ellipsis;
    white-space: nowrap;
    background: RGB(250,250,250);
}
.ui-state-focus,.ui-state-focus:hover{
    border:none !important;
    background:#1e90ff !important;
    font-weight:normal !important;
    color:#ffffff !important;
}
/* 休学中の画像 */
.leave-of-absence {
    position:relative;
    top:15px;
    right:4px;
}
.leave-of-quite-or-absence {
    position:relative;
    top:2px;
    right:4px;
    height:0px;
    float:right;
}
/* 安否確認のスタイル */
.answer-list-inner {
    padding: 1.5em 0;
}
.safety-confirmation-display {
    display: table-cell;
}
/* 安否確認の外側のテーブル */
.safety-confirmation-table {
    margin:0;
    padding:0;
    border:none;
    table-layout:fixed;
    border-collapse:separate;
    height:auto;
}
.safety-confirmation-table td {
    padding:0;
}
.safety-confirmation-table td.title {
    padding-top:2px;
    vertical-align:top;
    width:70px;
}
/* 安否確認の項目ごとのパネル */
.safety-confirmation-panel {
    margin:10px 0;
    padding:0.5em 0em;
    border-radius: 10px;
    width:100px;
    height:100px;
    text-align:center;
    display:inline-table;
}
.safety-confirmation-panel-title {
    padding-top:5px;
    height:40px;
}
.safety-confirmation-active-color {
    background-color: rgb(201,228,252);
}
.safety-confirmation-inactive-color {
    background-color: rgb(183,183,183);
    color: rgb(97,97,97);
}
/* タブ */
.tab {
    overflow:hidden;
    list-style: none;
    margin:0;
    margin-top:0.25em;
    white-space:nowrap;
}
.tab li {
    border: 2px solid;
    border-color: rgb(144,202,249);
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    background-color: rgb(255,255,255);
    padding:5px 15px;
    float:left;
    margin-right:1px;
    white-space:nowrap;
}
.tab li.tab-select {
    background-color: rgb(144,202,249);
}
.tab-content {
    list-style: none;
    margin:0;
}
.tab-content li {
    background-color: rgb(144,202,249);
    //padding:20px;
}
.tab-hide {
    display:none;
}
.staff-tab-content {
    list-style: none;
    margin:0;
}
.staff-tab-content li {
    background-color: rgb(144,202,249);
    //padding:20px;
}
/* ユーザー登録 注意書き */
.under-line-yellow {
    background:linear-gradient(transparent 80%,rgb(252,239,94) 0%);
}
/* ユーザー設定 */
.bar-color-grey{
    color: rgb(0,0,0);
    background-color: rgb(224,224,224);
}
/* タブ */
.user-tab {
    overflow:hidden;
    list-style: none;
    margin:0;
    margin-top:0.25em;
    white-space:nowrap;
    border-bottom: 2px solid;
    border-color: rgb(33,33,33);
}
.user-tab li {
    padding:5px 15px;
    float:left;
    margin-right:5px;
    white-space:nowrap;
    color: rgb(33,33,33);
    background-color: rgb(255,255,255);
}
.user-tab li.tab-select {
    border-bottom: 5px solid;
    border-color: rgb(30,136,229);
    color: rgb(30,136,229);
}
.user-tab li:hover {
    background-color: rgb(238,238,238);
    border-bottom: 5px solid;
    border-color: rgb(238,238,238);
}
.user-tab li.tab-select:hover {
    background-color: rgb(238,238,238);
    border-bottom: 5px solid;
    border-color: rgb(30,136,229);
}
.user-tab-content {
    list-style: none;
    margin:0;
}
.user-tab-content li {
    background-color: rgb(255,255,255);
}
/* div右寄せ */
.div-right {
    position: absolute;
    right:0;
    top:0;
    margin: 0;
    padding: 0;
}
/* テーブル */
.table-header-student {
    background-color: rgb(209,233,255);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-header-guardian {
    background-color: rgb(255,236,199);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-header-staff {
    background-color: rgb(209,233,255);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-header-grey {
    background-color: rgb(249,249,249);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-header-grey2 {
    background-color: rgb(238,238,238);
}
.table-header-grey3 {
    background-color: rgb(249,249,249);
}
.table-header-grey4 {
    background-color: rgb(230,230,230);
}
.table-header-grey5 {
    background-color: rgb(245,248,251);
}
.table-header-lightblue {
    background-color: rgb(176,219,255);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table-border-top-white {
    border-top: 5px solid rgb(255,255,255);
}
.table-border-left-white {
    border-left: 1px solid rgb(255,255,255);
}
.table-border-right-white {
    border-right: 1px solid rgb(255,255,255);
}
.table-border-bottom-white {
    border-bottom: 5px solid rgb(255,255,255);
}
/* テーブルの背景色 */
.table-column-lightgrey {
    background-color: rgb(248,250,251);
}
/* セレクトの背景色(白) */
.select-color-white {
    background-color: rgb(255,255,255);
}
/* チェックボックス(ユーザー設定) */
input[type="checkbox"]+label.check-circle:after{
    font-family: 'Font Awesome 5 Free';
    content: '\f111';
    font-weight: 400;
    background-image: none;
    width: 22px;
    height: 26px;
    position:relative;
    display: block;
    margin: 0;
    padding: 0;
    margin-top:-6px;
    color: rgb(97,171,237);
    font-size: 22px;
}
input[type="checkbox"]:checked+label.check-circle:after{
    font-family: 'Font Awesome 5 Free';
    content: '\f058';
    font-weight: 900;
    background-image: none;
    width: 22px;
    height: 26px;
    position:relative;
    display: block;
    margin: 0;
    padding: 0;
    margin-top:-6px;
    color: rgb(31,136,229);
    font-size: 22px;
}
input[type="checkbox"]:disabled:checked+label.check-circle:after{
    filter:alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
    font-weight: 900;
    color: rgb(31,136,229);
    cursor: text;
}
input[type="checkbox"]:disabled+label.check-circle:after{
    filter:alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
    font-weight: 400;
    color: rgb(31,136,229);
    cursor: text;
}
/* ラジオボタン(ユーザー設定) */
input[type="radio"]+label.radio-button:after{
    font-family: 'Material Icons';
    content: 'radio_button_unchecked';
    background-image: none;
    width: 26px;
    height: 26px;
    position:relative;
    display: block;
    margin: 0;
    padding: 0;
    margin-top:-8px;
    color: rgb(31,136,229);
    font-size: 26px;
}
input[type="radio"]:checked+label.radio-button:after{
    font-family: 'Material Icons';
    content: 'radio_button_checked';
    background-image: none;
    width: 26px;
    height: 26px;
    position:relative;
    display: block;
    margin: 0;
    padding: 0;
    margin-top:-8px;
    color: rgb(31,136,229);
    font-size: 26px;
}
input[type="radio"]:disabled+label.radio-button:after{
    /*filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;*/
    /*color: rgb(216,216,216);*/
    /* チェックボックスと合わせる */
    color: rgba(31,136,229,0.5);
}
/* 保存ボタン */
.submit-button-bar {
    position: fixed;
    margin: 0;
    padding: 0;
    left: 0;
    bottom: 0;
    border: 1px solid;
    border-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    z-index: 9999;
    overflow-x: hidden;
    overflow-y: hidden;
}
/* 掲示板 確認しましたボタン */
.confirm-bbs-button-bar {
    position: fixed;
    margin: 0;
    padding: 0;
    left: 0;
    bottom: 0;
    background-color: rgb(61,61,61,0.5);
    z-index: 9999;
    overflow-x: hidden;
    overflow-y: hidden;
}
/* 画面下広告 */
.advertisement-bar {
    position: fixed;
    margin: 0;
    padding: .5em;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(246,242,241);
    z-index: 9999;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: center;
}
.advertisement-notice {
    width: 17em;
    margin: 0 auto .5em;
    padding: .6em 0;
    border-radius: 1em;
    background-color: rgb(255,255,255);
    line-height: 1;
    font-size: .8rem;
    font-weight: bold;
    color: rgb(121,85,71);
}
.advertisement-notice span {
    color: rgb(0,171,193);
}
/* シラバス 連番 */
.syllabus-number {
    margin: 0;
    padding: 0 8px;
    font-size: 1.00rem;
    font-weight: bold;
    white-space: nowrap;
    color: rgb(255,255,255);
    background-color: rgb(30,136,229);
}
/* シラバス 追加ボタン */
.syllabus-add-button {
    background-color:rgb(30,136,229);
    padding:8px 12px;
    border-radius:6px;
}
/* 出席登録 */
.img-circle {
    display: inline-block;
    width: 42px;
    height: 42px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background-color:rgb(230,230,230);
}
.attendance-color-black {
    color: rgb(0,0,0);
}
.attendance-color-blue {
    color: rgb(94,169,235);
}
.attendance-color-red {
    color: rgb(255,0,0);
}
.attendance-color-orange {
    color: rgb(255,149,67);
}
.radius-box-blue {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgb(31,136,229);
    background-color:rgb(255,255,255);
    color:rgb(31,136,229);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-blue-fill {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgb(31,136,229);
    background-color:rgb(31,136,229);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-blue-off {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgba(31,136,229,0.5);
    background-color:rgba(255,255,255,0.5);
    color:rgba(31,136,229,0.5);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-blue-fill-off {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgba(31,136,229,0.5);
    background-color:rgba(31,136,229,0.5);
    color:rgba(255,255,255,0.5);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-red {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgb(255,0,0);
    background-color:rgb(255,255,255);
    color:rgb(255,0,0);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-red-fill {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgb(255,0,0);
    background-color:rgb(255,0,0);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-red-off {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgba(255,0,0,0.5);
    background-color:rgba(255,255,255,0.5);
    color:rgba(255,0,0,0.5);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-red-fill-off {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgba(255,0,0,0.5);
    background-color:rgba(255,0,0,0.5);
    color:rgba(255,255,255,0.5);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-orange {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgb(255,149,67);
    background-color:rgb(255,255,255);
    color:rgb(255,149,67);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-orange-fill {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgb(255,149,67);
    background-color:rgb(255,149,67);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-orange-off {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgba(255,149,67,0.5);
    background-color:rgba(255,255,255,0.5);
    color:rgba(255,149,67,0.5);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.radius-box-orange-fill-off {
    margin:0px 0px;
    padding:0.8em 0.5em;
    border:1px solid;
    border-color:rgba(255,149,67,0.5);
    background-color:rgba(255,149,67,0.5);
    color:rgba(255,255,255,0.5);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.table-border-grey {
    border-top: 0px solid rgb(238,238,238);
    border-left: 5px solid rgb(238,238,238);
    border-right: 5px solid rgb(238,238,238);
    border-bottom: 5px solid rgb(238,238,238);
}
.table-border-grey2 {
    border: 1px solid rgb(230,230,230);
}
.table-border-white2 {
    border: 1px solid rgb(255,255,255);
}
.table-border-top-white2 {
    border-top: 1px solid rgb(255,255,255);
}
.table-border-left-white2 {
    border-left: 1px solid rgb(255,255,255);
}
.table-border-right-white2 {
    border-right: 1px solid rgb(255,255,255);
}
.table-border-bottom-white2 {
    border-bottom: 2px solid rgb(255,255,255);
}
.table-border-bottom-white3 {
    border-bottom: 1px solid rgb(255,255,255);
}
.table-border-top-grey {
    border-top: 1px solid rgb(230,230,230);
}
.table-border-left-grey {
    border-left: 1px solid rgb(230,230,230);
}
.table-border-right-grey {
    border-right: 1px solid rgb(230,230,230);
}
.table-border-bottom-grey {
    border-bottom: 1px solid rgb(230,230,230);
}
.table-border-bottom-snow {
    border-bottom: 1px solid rgb(255,250,250);
}
.table-column-grey2 {
    background-color: rgb(230,230,230);
}
.table-td-height td {
    padding-top: 1.25em;
    padding-bottom: 1.25em;
}
.timeTable-date-selection {
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.timeTable-date-selection:hover {
    color: rgb(0, 120, 160);
}
/* 掲示板タブメニュー */
#bb-menu {
    position: fixed;
    padding: 0;
    top: 0;
    left: 0;
    margin: auto;
    text-align: center;
    /*border: 1px solid;
    border-color: rgb(158,158,158);*/
    background-color: rgb(255,255,255);
    color: rgb(33,33,33);
    font-weight: normal;
    //box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    //-moz-box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    //-webkit-box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    z-index: 99;
}
.bb-menu-box {
    border-top: 1px solid rgb(158,158,158);
    border-right: 1px solid rgb(158,158,158);
}
#bb-menu2 {
    position: fixed;
    padding: 0;
    top: 0;
    left: 0;
    margin: auto;
    text-align: center;
    /*border: 1px solid;
    border-color: rgb(158,158,158);*/
    background-color: rgb(255,255,255);
    color: rgb(33,33,33);
    font-weight: normal;
    //box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    //-moz-box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    //-webkit-box-shadow: 5px 5px 5px rgba(33,33,33,0.5);
    z-index: 99;
}
.text-color-grey-bold {
    color: rgb(33,33,33);
    font-weight: bold;
}
.text-color-blue-bold {
    color: rgb(41,98,255);
    font-weight: bold;
}
.bb-menu-text-color-red {
    color: rgb(235,64,27);
    font-weight: normal;
}
.button-lightgrey {
    border: 1px solid rgb(248,250,251);
    background-color: rgb(248,250,251);
}
.button-lightgrey:hover, .button-lightgrey:focus {
    background-color: rgb(248,250,251);
}
.circle-blue-frame {
    width: 2.5em;
    height: 2.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: solid 3px rgb(30,136,229);
}
.bb-menu-color-select {
    background-color: rgb(60,65,70);
}
.bb-menu-color {
    background-color: rgb(100,105,110);
}
.bb-menu-color:hover {
    background-color: rgb(86,90,95);
}
.bb-menu-color-base {
    background-color: rgb(100,105,110);
}
.bb-menu-color-grey {
    background-color: rgb(158,158,158);
}
.bb-menu-text-off {
    color: rgb(116,121,125);
}
.bb-menu-contents {
    background-color: rgb(255,255,255);
    border-bottom: 1px solid rgb(230,230,230);
}
.bb-menu-contents:hover {
    background-color: rgb(245,247,248);
}
.bb-menu-contents:hover > .bb-menu-sub-contents {
    background-color: rgb(245,247,248);
}
.bb-menu-contents-select {
    background-color: rgb(243,245,246);
    border-bottom: 1px solid rgb(230,230,230);
}
.bb-menu-contents-new {
    background-color: rgb(255,255,255);
    border-bottom: 1px solid rgb(230,230,230);
}
.bb-menu-contents-new:hover {
    background-color: rgb(246,250,255);
}
.bb-menu-contents-new-select {
    background-color: rgb(224,235,250);
    border-bottom: 1px solid rgb(230,230,230);
}
.bb-menu-icon-color-student {
    color: rgb(255,255,255);
    background-color: rgb(112,144,233);
}
.bb-menu-icon-color-guardian {
    color: rgb(255,255,255);
    background-color: rgb(135,201,84);
}
.bb-menu-icon-color-staff {
    color: rgb(255,255,255);
    background-color: rgb(241,149,65);
}
.bb-menu-icon-color-graduate {
    color: rgb(255,255,255);
    background-color: rgb(38,198,218);
}
.bb-menu-icon {
    border-radius: 3px;
    padding: 0.2rem 0rem;
    margin: 0;
    color: rgb(255,255,255);
}
.bb-menu-icon-font {
    font-size: 0.7rem;
    font-weight: normal;
    white-space: nowrap;
}
/* 掲示板投稿のタイトルアイコン */
.bb-menu-icon-title {
    border-radius: 3px;
    padding: 0.2rem 0rem 0.2em 0.3em;
    color: rgb(255,255,255);
    margin-right:0.5em;
    font-size:0.6em;
    vertical-align:0.3em;
}
.bb-target-icon {
    border-radius: 8px;
    padding: 0.2rem 0rem;
    margin: 0;
    color: rgb(255,255,255);
}
.bb-target-icon-color-blue {
    color: rgb(255,255,255);
    background-color: rgb(30,136,229);
}
.bb-link-icon-grey {
    font-size: 1.25rem;
    color: rgb(158,158,158);
}
.bb-text-over {
    overflow: hidden;
    text-overflow: '';
    white-space: nowrap;
}
.bb-popup-menu-item {
    padding: 0.5em 1em;
    color: rgb(33,33,33);
    background-color: rgb(255,255,255);
}
.bb-popup-menu-item:hover {
    padding: 0.5em 1em;
    color: rgb(33,33,33);
    background-color: rgb(245,247,248);
}
.bb-menu-circle-red {
    width: 1.5em;
    height: 1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(244,67,54);
}
.bb-menu-circle-grey {
    width: 1.5em;
    height: 1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(245,247,248);
}
.bb-menu-str-white {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(255,255,255);
    font-weight: normal;
    font-size: 0.8em;
}
.bb-menu-str-grey {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(33,33,33);
    font-weight: normal;
    font-size: 0.8em;
}
.bb-menu-button-radius {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 0;
    padding:0.25rem 0.5rem;
}
.bb-menu-search-grey {
    background-color: rgb(245,247,248);
}
input[type="text"].menu-search {
    margin:0;
    ime-mode: active;
    background-color: rgb(245,247,248);
    font-size: 14px;
    border-width: 0px;
    border-style: none;
    box-shadow: none;
}
.bb-search-white {
    background-color: rgb(255,255,255);
}
input[type="text"].bb-search {
    margin:0;
    ime-mode: active;
    background-color: rgb(255,255,255);
    font-size: 14px;
    border-width: 0px;
    border-style: none;
    box-shadow: none;
}
.bb-contents-color {
    background-color: rgb(255,255,255);
}
.bb-back-color {
    background-color: rgb(243,245,246);
}
.bb-comment-circle-student {
    width: 1.5em;
    height: 1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(114,146,233);
}
.bb-comment-circle-guardian {
    width: 1.5em;
    height: 1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(135,201,84);
}
.bb-comment-circle-staff {
    width: 1.5em;
    height: 1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(241,150,67);
}
.bb-comment-circle-graduate {
    width: 1.5em;
    height: 1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(38,198,218);
}
.bb-border {
    display: flex;
    align-items: center;
    text-align: center;
}
.bb-border:before,.bb-border:after {
    border-top: 1px solid;
    content: "";
    display: inline;
    flex-grow: 1;
}
.bb-border:before {
    margin-right: 0.5em;
}
.bb-border:after {
    margin-left: 0.5em;
}
.bb-contents-radius {
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.bb-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4em 4em 0 0;
    border-color: rgb(43,110,220) transparent transparent transparent;
    //border-top-left-radius: 6px;
}
.bb-triangle-mini {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.8em 1.8em 0 0;
    border-color: rgb(43,110,220) transparent transparent transparent;
}
.bb-triangle-mini2 {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.5em 1.5em 0 0;
    border-color: rgb(43,110,220) transparent transparent transparent;
}
.bb-triangle-str {
    position: absolute;
    color: rgb(255,255,255);
    font-size: 0.6em;
}
.bb-menu-unread {
    background-color: rgb(255,255,255);
    border-top: 1px solid rgb(230,230,230);
}
/* ツールチップ */
.ui-tooltip {
    font-size: 0.8em;
    background: rgb(255,255,255);
    box-shadow: 5px 5px 5px rgba(33,33,33,0.2);
    padding-left: 1.0em;
    min-width: 340px;
}
.userCountTable tr:hover td {
	background-color: #d9efff;
}

/* 利用人数照会　無効タブ */
.tab_item {
    display: none;
}
/* 利用人数照会　有効タブ */
.is-active-item {
display: block;
border: solid 1px rgb(220,220,220);
}
/* 利用人数照会　 無効タブボタン*/
.tab_btn {
font-size: 1rem;
text-align: center;
display: inline-block;
background-color: rgb(220,220,220);
}
/* 利用人数照会　 有効タブボタン*/
.is-active-btn {
opacity: 1;
background-color: rgb(144,202,249);
}
.login-back-color {
    background-color: rgb(243,245,246);
}
/* 約款表示パネル */
.login-page-panel-font {
    padding: 4em 0em;
    font-size: 0.95rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}
/* 時間割授業ボタン用 */
.lesson-panel {
    cursor:pointer;
    background-color:rgb(255,255,255);
    /* 高さは半コマ、一コマで可変になるのでPHP側で指定 */
    width:85%;
    margin:0.5em;
    padding: 0.2rem 0;

    font-size: 0.8rem;
    font-weight: normal;
    overflow-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;

    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap        : wrap;

    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* 時間割授業ボタン用 */
.lesson-panel-active {
    color: rgb(0,0,0);
    border: 1.5px solid rgb(118,184,242);
    border-bottom: 5px solid rgb(118,184,242);
    border-radius: 3px;
    cursor: pointer;
}

.lesson-panel-active:hover {
    background-color: rgb(232,243,253);
}

/* 時間割授業ボタン用 休講*/
.lesson-panel-inactive {
    color: rgb(204,204,204);
    border: 1.5px solid rgb(204,204,204);
    border-bottom: 5px solid rgb(204,204,204);
    border-radius: 3px;
    cursor: default;
}

.kannaro-banner-setting {
    position: relative;
    min-height: 89px;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 9px;
    border: 1px solid #d6cbc7;
}

.kannaro-banner-setting span {
    position: absolute;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 90%;
}

.noborder {
    border: 0px none;
}
/* 授業を選択 */
.table-border-blue {
    border: 1px solid rgb(209,233,255);
}
.class-select {
    color: rgb(33,33,33);
}
.class-select-text {
    color: rgb(30,136,229);
    font-weight: bold;
}
.class-select-text-off {
    color: rgb(33,33,33);
    font-weight: normal;
}
.class-select:hover .class-select-text-off {
    color: rgb(30,136,229);
    font-weight: normal;
}
.class-select:focus {
    color: rgb(30,136,229);
    font-weight: normal;
}
/* 時間割 */
.table-border-blue2 {
    border: 1px solid rgb(209,233,255);
}
.table-border-right-blue2 {
    border-right: 1px solid rgb(209,233,255);
}
.table-border-top-blue2 {
    border-top: 1px solid rgb(209,233,255);
}
.table-border-top-grey2 {
    border-top: 1px solid rgb(200,200,200);
}
.table-border-left-grey2 {
    border-left: 1px solid rgb(200,200,200);
}
.table-border-right-grey2 {
    border-right: 1px solid rgb(200,200,200);
}
.table-border-bottom-grey2 {
    border-bottom: 1px solid rgb(200,200,200);
}
/* 灰色のバー */
.bar-color-grey2{
    padding:1em 0;
    background-color: rgb(238,238,238);
}
/* アンケート一覧のアイコン色 */
.questionnaire-icon-color-red{
    color: rgb(255,255,255);
    background-color: rgb(240,67,54);
}
.questionnaire-icon-color-green{
    color: rgb(255,255,255);
    background-color: rgb(130,200,77);
}
.questionnaire-icon-color-grey{
    color: rgb(255,255,255);
    background-color: rgb(189,189,189);
}
.questionnaire-icon-color-blue{
    color: rgb(255,255,255);
    background-color: rgb(107,147,234);
}
/* ピン留め */
.questionnaire-icon-pin-on{
    color: rgb(0,111,221);
    transform: rotate(45deg);
}
.questionnaire-icon-pin-off{
    color: rgb(218,220,221);
}

/* 角丸の背景色グレーテーブル */
.new-gray-table {
    background-color: RGB(238,238,238);
    border-radius: 10px 10px 10px 10px;
    border:none;
}
/* 求人票ファイル名 */
.jobFileName{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 固定メッセージ */
.fixed-message-box {
    position: fixed;
    margin: 0;
    padding: 8px;
    left: 10px;
    top: 4.5em;
    color: rgb(244,67,54);
    border-radius: 5px;
    border: 3px solid;
    border-color: rgba(244,67,54,0.3);
    background-color: rgba(255,255,255,0.8);
    z-index: 9999;
    overflow-x: hidden;
    overflow-y: hidden;
}
/* 検索ボタンの枠 */
.search-button-radius {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 0;
    padding:0.25rem 0.5rem;
}
/* 検索結果 */
.search-result-text {
    padding: 5px 10px;
    border: 1px solid rgb(223,240,255);
    background-color: rgb(223,240,255);
    color: rgb(158,158,158);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* お気に入りの色 */
.favorites-on {
    color: rgb(31,136,229);
}
.favorites-off {
    color: rgb(204,204,204);
}
/* 表示条件の設定、チャレンジのテキスト色 */
.challenge-text-color-blue {
    color: rgb(3,155,229);
}
.challenge-text-color-green {
    color: rgb(124,179,66);
}
.challenge-text-color-orange {
    color: rgb(249,168,37);
}
.challenge-text-color-red {
    color: rgb(255,45,45);
}
/* 提出物管理 */
.submission-box-frame-alert {
    margin-top: 0em;
    margin-bottom: 0.5em;
    padding: 0.7em;
    background-color: rgb(255,255,255);
    line-height: 1.125rem;
    border-radius: 5px;
    box-shadow: 1px 3px 2px rgba(0,0,0,0.15);
}
.submission-box-frame-alert:hover {
    margin-top: 0em;
    margin-bottom: 0.5em;
    padding: 0.7em;
    background-color: rgb(255,238,238);
    line-height: 1.125rem;
    border-radius: 5px;
    box-shadow: 1px 3px 2px rgba(0,0,0,0.15);
}
.submission-box-frame-normal {
    margin-top: 0em;
    margin-bottom: 0.5em;
    padding: 0.7em;
    background-color: rgb(255,255,255);
    line-height: 1.125rem;
    border-radius: 5px;
    box-shadow: 1px 3px 2px rgba(0,0,0,0.15);
}
.submission-box-frame-normal:hover {
    margin-top: 0em;
    margin-bottom: 0.5em;
    padding: 0.7em;
    background-color: rgb(236,245,233);
    line-height: 1.125rem;
    border-radius: 5px;
    box-shadow: 1px 3px 2px rgba(0,0,0,0.15);
}
/* パネルの背景色 */
.panel-backcolor-default {
    background:#f2f2f2;
}
/* 背景色（赤）*/
.backcolor-red {
    background-color: rgb(255,238,238);
}
/* 背景色（緑）*/
.backcolor-green {
    background-color: rgb(236,245,233);
}
/* 背景色（青）*/
.backcolor-blue2 {
    background-color: rgb(31,136,229);
}
/* 文字色（赤） */
.submission-text-color-red {
    color: rgb(255,0,0);
}
/* 文字色（緑） */
.submission-text-color-green {
    color: rgb(71,161,39);
}
/* 期限切れアイコン */
.status-submission-icon-color-red {
    color: rgb(255,0,0);
    border-color: rgb(255,0,0);
    border:1px solid;
}
/* 下書きアイコン */
.status-submission-icon-color-green {
    color: rgb(130,200,77);
    border-color: rgb(130,200,77);
    border:1px solid;
}
/* アイコン（白）*/
.link-icon-white {
    color: rgb(255,255,255);
}
/* 線の色 */
.bar-color-blue {
    background-color: rgb(58,135,228);
}
.bar-color-off {
    background-color: rgb(200,200,200);
}
/* 枠（灰色）*/
.box-grey {
    border: 1px solid;
    border-color: rgb(200,200,200);
}
/* ステータスボタン */
/* 灰 */
.submission-radius-box-grey {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:rgb(255,255,255);
    /* 238だと見えないので調整 */
    color:rgb(158,158,158);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-grey-on {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:rgb(158,158,158);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-grey-off {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:rgb(255,255,255);
    color:rgb(158,158,158);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}

.submission-radius-box-grey-fill {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:rgb(158,158,158);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-grey-fill-on {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:rgb(158,158,158);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-grey-fill-off {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(158,158,158);
    background-color:rgb(255,255,255);
    color:rgb(158,158,158);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
/* 橙 */
.submission-radius-box-orange {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(255,109,18);
    background-color:rgb(255,109,18);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-orange-on {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(255,109,18);
    background-color:rgb(255,109,18);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-orange-off {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(255,109,18);
    background-color:rgb(255,255,255);
    color:rgb(255,109,18);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-orange-fill {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(255,229,229);
    background-color:rgb(255,229,229);
    color:rgb(255,109,18);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
/* 青 */
.submission-radius-box-blue {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(98,148,235);
    background-color:rgb(98,148,235);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-blue-on {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(98,148,235);
    background-color:rgb(98,148,235);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-blue-off {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(98,148,235);
    background-color:rgb(255,255,255);
    color:rgb(98,148,235);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-blue-fill {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(232,243,253);
    background-color:rgb(232,243,253);
    color:rgb(31,136,229);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
/* 緑 */
.submission-radius-box-green {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(128,180,72);
    background-color:rgb(128,180,72);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-green-on {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(128,180,72);
    background-color:rgb(128,180,72);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-green-off {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(128,180,72);
    background-color:rgb(255,255,255);
    color:rgb(128,180,72);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-green-fill {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(236,245,233);
    background-color:rgb(236,245,233);
    color:(128,180,72);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
/* 黒 */
.submission-radius-box-black {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(51,51,51);
    background-color:rgb(51,51,51);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-black-on {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(51,51,51);
    background-color:rgb(51,51,51);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-black-off {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(51,51,51);
    background-color:rgb(255,255,255);
    color:rgb(51,51,51);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
.submission-radius-box-black-fill {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(51,51,51);
    background-color:rgb(51,51,51);
    color:rgb(255,255,255);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
/* 赤 */
.submission-radius-box-red-fill {
    margin:0px 0px;
    padding:0.5em 0.5em;
    border:1px solid;
    border-color:rgb(238,238,238);
    background-color:rgb(238,238,238);
    color:rgb(255,0,0);
    border-radius: 5px;
    font-weight:normal;
    font-size:0.9rem;
    text-align:center;
}
/* 提出中ダイアログ */
.transparent-dialog {
    display:none;
    margin: 0px 0px 0px 0px;
    /*border:1px solid;*/
    /*border-color:rgb(158,158,158);*/
    position:absolute;
    padding: 10px 10px 10px 10px;
    /*border-radius: 5px;*/
    color: rgb(255,255,255);
    font-weight: normal;
    /*box-shadow: -5px 5px 5px rgba(33,33,33,0.5);*/
    /*-moz-box-shadow: -5px 5px 5px rgba(33,33,33,0.5);*/
    /*-webkit-box-shadow: -5px 5px 5px rgba(33,33,33,0.5);*/
    z-index:2000;
}
/* 生徒トップ(l0401.php) */
.box-fill-grey {
    border: 0px solid;
    border-color: rgb(249,249,249);
    background-color: rgb(249,249,249);
    padding: 1rem 1rem 1rem 1rem;
}
.box-header-white {
    border-top: 1px solid rgb(255,255,255);
    border-left: 1px solid rgb(255,255,255);
    border-right: 1px solid rgb(255,255,255);
    background-color: rgb(255,255,255);
    border-radius: 5px 5px 0 0;
}
.box-body-white {
    border-left: 1px solid rgb(255,255,255);
    border-right: 1px solid rgb(255,255,255);
    border-bottom: 1px solid rgb(255,255,255);
    background-color: rgb(255,255,255);
    border-radius: 0 0 5px 5px;
}
.box-header-title-red {
    border-top: 1px solid rgb(244,67,54);
    border-left: 1px solid rgb(244,67,54);
    border-right: 1px solid rgb(244,67,54);
    background-color: rgb(244,67,54);
    border-radius: 5px 5px 0 0;
}
.box-header-frame-red {
    border-top: 3px solid rgb(244,67,54);
    border-left: 3px solid rgb(244,67,54);
    border-right: 3px solid rgb(244,67,54);
    background-color: rgb(255,255,255);
    border-radius: 0 0 0 0;
}
.box-body-frame-red {
    border-left: 3px solid rgb(244,67,54);
    border-right: 3px solid rgb(244,67,54);
    border-bottom: 3px solid rgb(244,67,54);
    background-color: rgb(255,255,255);
    border-radius: 0 0 5px 5px;
}
.box-header-line {
    background-color: rgb(249,249,249);
    height: 2px;
}
/* カード（背景色：グレー）*/
.card-grey4{
    border: 1px solid rgb(245,248,251);
    margin-bottom: 1em;
    line-height: 1.125rem
}
.card-header-grey4{
    background-color: rgb(245,248,251);
    padding: 0.5rem 1rem 0.5em 1rem;
}
.card-body-grey4{
    background-color: rgb(245,248,251);
    padding: 0rem 1rem 0.5em 1rem;
}
.card-table-grey4{
    background-color: rgb(245,248,251);
}
/* h0203_qrread.php */
.qrread-parent {
    position: relative;
    background-color: rgb(249,249,249);
    padding: 15px;
}
.qrread-radius-top-left {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50px;
    left: 50px;
    border-top-left-radius: 30px;
    border-top: solid 10px rgb(249,249,249);
    border-left: solid 10px rgb(249,249,249);
    z-index: 1000;
}
.qrread-radius-top-right {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50px;
    right: 50px;
    border-top-right-radius: 30px;
    border-top: solid 10px rgb(249,249,249);
    border-right: solid 10px rgb(249,249,249);
    z-index: 1000;
}
.qrread-radius-bottom-left {
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 55px;
    left: 50px;
    border-bottom-left-radius: 30px;
    border-bottom: solid 10px rgb(249,249,249);
    border-left: solid 10px rgb(249,249,249);
    z-index: 1000;
}
.qrread-radius-bottom-right {
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 55px;
    right: 50px;
    border-bottom-right-radius: 30px;
    border-bottom: solid 10px rgb(249,249,249);
    border-right: solid 10px rgb(249,249,249);
    z-index: 1000;
}
.lightbox {
    z-index: 1000000 !important;
}
.job-offer-remarks {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
}
.graduated-circle {
    width: 1.5em;
    height: 1.5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgb(233,219,206);
}
.graduated-str {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: rgb(143,62,0);
    font-weight: normal;
    font-size: 0.8em;
}
.table-column-lightblue {
    /*background-color: rgb(144,202,249);*/
    background-color: rgb(209,233,255);
}