@charset "utf-8";

body {
    font-size: 0.9rem;
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    outline: none !important;
}

.font-2rem {
    font-size: 2rem !important;
}

.font-xlarge {
    font-size: 1.2rem !important;
}

.font-large {
    font-size: 1.0rem !important;
}

.font-normal {
    font-size: 0.9rem !important;
}

.font-small {
    font-size: 0.8rem !important;
}

.font-xsmall {
    font-size: 0.7rem !important;
}

.bg-faded-50 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.bg-gradient-white-black {
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8)) !important;
}

.text-yellow {
    color: var(--yellow) !important;
}

.text-orange {
    color: var(--orange) !important;
}

.top-0 {
    top: 0 !important;;
}

.top-100 {
    top: 100% !important;;
}

.bottom-0 {
    bottom: 0 !important;;
}

.bottom-100 {
    bottom: 100% !important;;
}

.border-1 {
    border-width: 1px !important;
}

.border-2 {
    border-width: 2px !important;
}

.border-3 {
    border-width: 3px !important;
}

.border-4 {
    border-width: 4px !important;
}

.border-5 {
    border-width: 5px !important;
}

.shadow {
    position: relative;
    z-index: 2;
}

.shadow-common {
    -webkit-box-shadow: 0 0 5px 1px #999999 !important;
    -moz-box-shadow: 0 0 5px 1px #999999 !important;
    box-shadow: 0 0 5px 1px #999999 !important;
    position: relative !important;
    z-index: 1 !important;
}

.opacity-25 {
    opacity: 25%;
}

.opacity-50 {
    opacity: 50%;
}

.opacity-75 {
    opacity: 75%;
}

.h-4rem {
    height: 4rem !important;
}

.h-5rem {
    height: 5rem !important;
}

.h-6rem {
    height: 6rem !important;
}

.h-10rem {
    height: 10rem !important;
}

.h-15rem {
    height: 15rem !important;
}

.h-20rem {
    height: 20rem !important;
}

.h-25rem {
    height: 25rem !important;
}

.mh-10rem {
    max-height: 10rem !important;
}

.mw-8rem {
    min-width: 8rem !important;
}

.mw-11rem {
    min-width: 11rem !important;
}

.mw-17rem {
    min-width: 17rem !important;
}

.d-webkit-inline-box {
    display: -webkit-inline-box !important;
}

[class^="max-line-"], [class*=" max-line-"] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    vertical-align: middle;
}

.max-line-1 {
    -webkit-line-clamp: 1;
}

.max-line-2 {
    -webkit-line-clamp: 2;
}

.max-line-3 {
    -webkit-line-clamp: 3;
}

.max-line-4 {
    -webkit-line-clamp: 4;
}

.max-line-5 {
    -webkit-line-clamp: 5;
}

a:hover,
a:hover *,
button.bg-common:hover {
    opacity: 0.9 !important;
}

header .banner {
    z-index: 1001;
}

header .banner .logo-title {
    margin-left: 15%;
}

header .banner .logo-title .logo {
    display: contents;
}

header .banner .logo-title .logo > img {
    height: 80%;
}

header .banner .logo-title .title {
    font-family: "Times New Roman", serif;
    margin-left: 0.5rem;
}

header .banner .logo-title .title .school-level {
    font-size: 0.5rem;
    text-shadow: 0 0.05rem #333;
}

header .banner .logo-title .title .school-name {
    font-size: 1rem;
    line-height: 100%;
    text-shadow: 0 0.05rem #333;
}

header .menu-top a {
    text-decoration: none;
}

header .menu-top li {
    list-style: none;
}

header ul.menu-top.pc li ul.submenu {
    display: none;
    z-index: 1002;
}

header ul.menu-top.pc li ul.submenu:hover,
header ul.menu-top.pc li > a:hover ~ ul.submenu {
    display: block;
}

header .menu-top.sp {
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
    transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

header .menu-top.sp.active {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    overflow-y: auto;
}

header nav.shadow-common {
    z-index: 1000 !important;
}

footer > .background {
    min-height: 15rem;
}

footer a.back-to-top {
    position: absolute;
    top: -1rem;
    background: #fd7e14;
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
    text-decoration: none;
    box-shadow: 0 0 0.3rem #000000;
}

footer a.back-to-top > span {
    color: #ffffff;
    font-weight: bold;
    margin-right: 0.25rem;
}

footer a.back-to-top > i {
    border-radius: 50%;
    text-align: center;
    width: 22px;
    line-height: 22px;
    background: #ffffff;
    color: #fd7e14;
}

input.input-search::placeholder {
    font-style: italic;
}

.search-box input.input-search {
    height: 1.7rem;
    width: 8rem;
}

.search-box input.input-search ~ button {
    right: 0.5rem;
}

.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {
    display: block !important;
}

.owl-carousel .owl-nav button {
    position: absolute;
    color: #ffffff !important;
    top: calc(50% - 2rem);
    background-color: #cccccc;
    opacity: 0.5;
    font-size: 2rem !important;
    text-shadow: 0 0 #212529;
}

.owl-carousel .owl-nav button:hover {
    opacity: 1;
}

.owl-carousel .owl-nav button.owl-prev {
    left: 1rem;
}

.owl-carousel .owl-nav button.owl-next {
    right: 1rem;
}

.owl-carousel .owl-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.owl-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    border: 2px solid #ffffff;
    opacity: 0.5;
    display: block;
    transition: opacity 200ms ease;
    border-radius: 50%;
}

.owl-carousel .owl-dots .owl-dot.active span {
    opacity: 1;
    background-color: #ffffff;
}

.page-home a.text-body:visited {
    color: #666666 !important;
}

.page-home .calendar .date-time .date {
    font-size: 4rem;
    line-height: 100%;
}

.page-home .calendar .before {
    height: 1rem;
}

.page-home .calendar .before span {
    width: 0.5rem;
}

.page-article .article-content {
    overflow: auto;
}

.page-article .article-content * {
    max-width: 100% !important;
    overflow: hidden !important;
}

.page-article .article-content img {
    height: auto !important;
}

.page-article .fb_iframe_widget {
    display: -webkit-inline-flex;
}

.page-article .comment-content {
    min-height: 3rem;
    -moz-transition: min-height 0.4s ease;
    -webkit-transition: min-height 0.4s ease;
    -o-transition: min-height 0.4s ease;
    transition: min-height 0.4s ease;
}

.page-article .comment-content:empty:focus {
    min-height: 6rem;
}

.page-article .comment-button:enabled:hover {
    opacity: 0.9;
}

.page-article .comment-button:disabled {
    color: #212529 !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

.page-article .comments .comment-empty {
    opacity: 0.6;
}

.page-article .comments .likes {
    cursor: pointer;
}

.page-article .comments .likes[data-liked],
.page-article .comments .likes:hover {
    color: var(--primary) !important;
}

.page-category2 ul.pagination li {
    list-style: none;
}

@media (max-width: 991px) {
    header .menu-top > li > a {
        white-space: normal !important;
    }

    footer .container * {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 767px) {
    footer .container * {
        font-size: 0.8rem !important;
    }

    .page-home .calendar .header {
        border-radius: 0 !important;
    }

    .page-home .top-banners .owl-carousel .owl-nav,
    .page-home .organization .owl-carousel .owl-nav {
        display: none;
    }
}

@media (min-width: 320px) {
    header .banner .logo-title .title .school-level {
        font-size: 0.5rem;
    }

    header .banner .logo-title .title .school-name {
        font-size: 1rem;
    }

    footer a.back-to-top {
        right: 1rem;
    }
}

@media (min-width: 576px) {
    footer a.back-to-top {
        right: 2rem;
    }
}

@media (min-width: 768px) {
    .font-md-2rem {
        font-size: 2rem !important;
    }

    .font-md-xlarge {
        font-size: 1.2rem !important;
    }

    .font-md-large {
        font-size: 1.0rem !important;
    }

    .font-md-normal {
        font-size: 0.9rem !important;
    }

    .font-md-small {
        font-size: 0.8rem !important;
    }

    .font-md-xsmall {
        font-size: 0.7rem !important;
    }

    .border-md-1 {
        border: 1px solid #dee2e6 !important;
    }

    .border-md-2 {
        border: 2px solid #dee2e6 !important;
    }

    .border-md-3 {
        border: 3px solid #dee2e6 !important;
    }

    .border-md-4 {
        border: 4px solid #dee2e6 !important;
    }

    .border-md-5 {
        border: 5px solid #dee2e6 !important;
    }

    .border-md-right {
        border-right: 1px solid #dee2e6 !important;
    }

    .h-md-5rem {
        height: 5rem !important;
    }

    .h-md-7rem {
        height: 7rem !important;
    }

    .h-md-9-5rem {
        height: 9.5rem !important;
    }

    .h-md-10rem {
        height: 10rem !important;
    }

    .h-md-15rem {
        height: 15rem !important;
    }

    .h-md-20rem {
        height: 20rem !important;
    }

    .h-md-25rem {
        height: 25rem !important;
    }

    .d-md-webkit-inline-box {
        display: -webkit-inline-box !important;
    }

    header .banner .logo-title .title .school-level {
        font-size: 0.8rem;
    }

    header .banner .logo-title .title .school-name {
        font-size: 1.6rem;
    }

    footer a.back-to-top {
        right: 3rem;
    }
}

@media (min-width: 992px) {
    .w-lg-auto {
        width: auto !important;
    }

    .h-lg-100 {
        height: 100% !important;
    }

    .font-lg-2rem {
        font-size: 2rem !important;
    }

    .font-lg-xlarge {
        font-size: 1.2rem !important;
    }

    .font-lg-large {
        font-size: 1.0rem !important;
    }

    .font-lg-normal {
        font-size: 0.9rem !important;
    }

    .font-lg-small {
        font-size: 0.8rem !important;
    }

    .font-lg-xsmall {
        font-size: 0.7rem !important;
    }

    .border-lg-1 {
        border: 1px solid #dee2e6 !important;
    }

    .border-lg-2 {
        border: 2px solid #dee2e6 !important;
    }

    .border-lg-3 {
        border: 3px solid #dee2e6 !important;
    }

    .border-lg-4 {
        border: 4px solid #dee2e6 !important;
    }

    .border-lg-5 {
        border: 5px solid #dee2e6 !important;
    }

    .h-lg-5rem {
        height: 5rem !important;
    }

    .h-lg-10rem {
        height: 10rem !important;
    }

    .h-lg-15rem {
        height: 15rem !important;
    }

    .h-lg-20rem {
        height: 20rem !important;
    }

    .h-lg-25rem {
        height: 25rem !important;
    }

    .pl-lg-3-5 {
        padding-left: 0.75rem !important;
    }

    .pr-lg-3-5 {
        padding-right: 0.75rem !important;
    }

    header .banner .logo-title .title .school-level {
        font-size: 1rem;
    }

    header .banner .logo-title .title .school-name {
        font-size: 2rem;
    }

    footer a.back-to-top {
        right: 4rem;
    }

    .page-category4 .table-document thead th:nth-child(-n+2) {
        width: 10rem;
    }
}

@media (min-width: 1200px) {
    header .banner .logo-title .title .school-level {
        font-size: 1.2rem;
    }

    header .banner .logo-title .title .school-name {
        font-size: 2.4rem;
    }

    footer a.back-to-top {
        right: 5rem;
    }
}