@charset "UTF-8";

/*
Date   : 2023.03
Author : ISMR/h.tabira
*/

/*
font-family: 'Klee One', cursive;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
*/

/* ---------------------------------------- */
/* pages */
.pagetop_slider {
    width: 1000px;
    max-width: 100%;
    margin: auto auto;
}

.pagetop_slider img {
    width: 100%;
    border: solid 10px white;
    box-sizing: border-box;
}

.school_copy {
    margin: 150px auto;
    text-align: center;
    color: #006cb0;
    font-family: 'Klee One', cursive;
}

.school_copy h1 {
    font-size: 2.4em;
    margin: 0;
}

.school_copy p {
    font-size: 1.4em;
}

.school_page_menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2em auto;
    list-style: none;
}

.school_page_menu li {
    text-align: center;
    background-color: #e0e1ff;
    margin: 0 .25em;
    padding: .2em 1em;
    border-radius: 1em;
    font-size: 1.2em;
}
.school_page_menu li:hover{
    opacity: .5;
    transition: .3s;
}

.school_page_menu li a {
    display: block;
    text-decoration: none;
    color: #006cb0;
}

.school_page_menu li.active {
    background-color: #006cb0;

}

.school_page_menu li.active a {
    color: white;
}

@media screen and (max-width: 700px) {
    .school_page_menu {
        display: block;
    }

    .school_page_menu li {
        margin: 10px;
    }
}

.list_numeral {
    list-style: decimal;
}

.kome {
    color: #ff6f57;
}

.note {
    text-align: right;
    color: #999999;
}


/* ---------------------------------------- */
/* timetable*/
.timetable{
}
.timetable_two{
    display: flex;
    justify-content: space-around;
}
.timetable table{
    margin: auto auto;
    border-collapse: collapse;
    margin-bottom: 1em;
    margin: 0 0 auto 0;
}
.timetable tr th{
    background-color: #006cb0;
    color: white;
    padding: 2em;
    font-weight: normal;
}
.timetable table td,.timetable table th{
    font-weight: normal;
    padding: .5em;
    border:solid 2px #006cb0;
}
@media screen and (max-width: 700px) {
.timetable_two{
    display: block;
    justify-content: center;
}    
    .timetable table{
        margin: 1em auto;
    }
}
/* ---------------------------------------- */
/* graph */
.pie_examanation {
    position: relative;
    margin-right: auto;
    margin-left: auto;width: 300px;height: 300px;
  border-radius: 50%;}
.pie_examanation span {
    position: absolute;
    top: 50%;
    right: 120px;
    transform: translateY(-50%);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}
.school_graph{
                        
}
.school_graph p strong{
    font-size: 2em;
}
 .school_graph dl{
     display: flex;
     justify-content:center;
}
.school_graph table{
    text-align: center;
    margin: 2em;
    border-collapse: collapse;
}
.school_graph table thead{
    background-color: #006cb0;
    color: white;
}
.school_graph table td,.school_graph table th{
    font-weight: normal;
    padding: .5em;
    border:solid 2px #006cb0;
}
@media screen and (max-width: 700px) {
 .school_graph dl{
     display: block;
     justify-content:center;
}    
}
.grad_graph{}
.grad_graph dl dt div{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 2em;
}
.grad_graph table td,.grad_graph table th{
    border:#d3d3d3 solid 2px;
    border-bottom: 
}
.grad_graph table tbody tr:nth-child(1) th{
    background-color: #ffd8e2;
}
.grad_graph table tbody tr:nth-child(2) th{
    background-color: #becdff;
}
.grad_graph table tbody tr:nth-child(3) th{
    background-color: #c8ffb7;
}
@media screen and (max-width: 700px) {
    .school_graph table{
        margin: auto auto;
    }
    .grad_graph p{
        margin-top: 2em;
    }
    .grad_graph dl dt{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}
/* ---------------------------------------- */
/* Table */
.curriculum {
    width: 800px;
    margin: auto;
}

.curriculum h3 {
    font-family: 'Klee One', cursive;
    font-size: 1.4em;
    margin: 0;
    color: #006cb0;
    border: none;
    padding-left: 0;
}

.curriculum table {
    width: 100%;
    border-spacing: 0;
    margin-bottom: 2em;
}

.curriculum table thead tr {
    background-color: #006cb0;
    color: white;
}

.curriculum table thead tr {
    text-align: left;
}

.curriculum table thead tr th {
    font-weight: normal;
}

.curriculum table thead tr td {
    text-align: center;
}

.curriculum table thead tr.table_index {
    background-color: #999999;
    text-align: center;
}

.curriculum table tbody tr th,
.curriculum table tbody tr td {
    border-bottom: dotted 1px;
}

.curriculum table tbody tr th {
    text-align: left;
    font-weight: normal;
    padding-left: 2em;
}

.curriculum table tbody tr td {
    text-align: center;
    width: 5em;
}

.curriculum table tbody tr.subtotal {
    background-color: #d3d3d3;
    color: #333333;
}

.curriculum table tbody tr.subtotal th {
    text-align: right;
}

.curriculum table tbody tr.subtotal th,
.curriculum table tbody tr.subtotal td {
    border-bottom: solid 1px white;
}

@media screen and (max-width: 700px) {
    .curriculum {
        width: 100%;
        max-width: 100%;
    }

    .curriculum table thead,
    .curriculum table tbody td {
        white-space: nowrap;
    }

    .curriculum table tbody tr th {
        padding-left: .5em;
    }
}
@media screen and (max-width: 700px) {
    .school_copy{
        font-size: 80%;
        margin: 0!important;
    }
    .school_copy p{
        margin: 1em 0
    }
}