@charset "utf-8";

html {
    font-size: 100%;
}
body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

/* 基本構成
------------------------------ */
/* Layout */
.container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4rem;
    padding: 1rem 2.5rem 2.5rem;
}
/* Main */
main {
    width: 80%;
    margin-bottom: 0;
}
/* Aside */
aside {
    width: 15%;
    top: 1rem;
}

/* ヘッダー
------------------------------ */
.header {
    background-image: url(../images/header-bg.jpg);
    height: 300px;
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid white;
}
.page_title {
    text-align: center;
    font-family: 'Allura', cursive;
    font-size: 100px;
    padding: 10px;
}
.page_title a {
    color: #fff;
}

/* タブ
------------------------------ */
.area_pc, .area_mb {
    margin: auto;
    flex-wrap: wrap;
    display: flex;
}
.tab_class {
    width: calc((98.2%)/11);
    height: 50px;
    background-color: darkgrey;
    border: 0.5px solid #ccc;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    display: block;
    float: left;
    order: -1;
}
input[name="tab_name"] {
    display: none;
}
input[name="tab_name2"] {
    display: none;
}
input:checked + .tab_class {
    background-color: cadetblue;
    color: aliceblue;
}
.content_class {
    display: none;
    width: 99%;
    border: 1px solid #ccc;
}
input:checked + .tab_class + .content_class {
    display: block;
}

/* 教科詳細
------------------------------ */
.lay {
    display: flex;
    flex-wrap: wrap;
}
.culture {
    padding: 5px;
    width: 50%;
    font-size: 14px;
    border-width: 0.5px;
    border-style: solid;
    color: #432;
}
.container a{
    color: #432;
}
.container a:hover {
    color: cadetblue;
}
.culture td {
    border-width: 0.5px;
    padding: 0 10px;
}
.content_class h3 {
    padding: 0 7px;
}
.content_class h4 {
    padding: 0 7px;
}
.table_l_common {
    width: 40px;
    height: 180px;
    border-style: none solid none none;
}
.table_l_horizontal_2letter {
    width: 50px;
    border-style: none solid none none;
}
.table_l_horizontal_4letter {
    width: 80px;
    border-style: none solid none none;
}
.table_l_horizontal_5letter {
    width: 95px;
    border-style: none solid none none;
}
.table_l_horizontal_7letter {
    width: 130px;
    border-style: none solid none none;
}
.table_l_vertical_2letter {
    width: 80px;
    height: 100px;
    border-style: none solid none none;
}
.table_l_vertical_6letter {
    width: 40px;
    height: 200px;
    border-style: none solid none none;
}
.table_l_vertical_8letter {
    width: 40px;
    height: 240px;
    border-style: none solid none none;
}
.table_r_1row {
    display: flex;
    align-items: center;
    height: 180px;
}
.table_r_1row_2letter {
    display: flex;
    align-items: center;
    height: 100px;
}
.table_r_1row_6letter {
    display: flex;
    align-items: center;
    height: 200px;
}
.table_r_2row {
    display: flex;
    align-items: center;
    height: calc(180px/2);
    border-style: none none solid none;
}
.table_r_2row_bottom {
    display: flex;
    align-items: center;
    height: calc(180px/2);
}
.table_r_2row_6letter {
    display: flex;
    align-items: center;
    height: calc(200px/2);
    border-style: none none solid none;
}
.table_r_2row_6letter_bottom {
    display: flex;
    align-items: center;
    height: calc(200px/2);
}
.table_r_2row_8letter {
    display: flex;
    align-items: center;
    height: calc(240px/2);
    border-style: none none solid none;
}
.table_r_2row_8letter_bottom {
    display: flex;
    align-items: center;
    height: calc(240px/2);
}
.table_r_3row {
    display: flex;
    align-items: center;
    height: calc(180px/3);
    border-style: none none solid none;
}
.table_r_3row_bottom {
    display: flex;
    align-items: center;
    height: calc(180px/3);
}
.table_r_3row_6letter {
    display: flex;
    align-items: center;
    height: calc(200px/3);
    border-style: none none solid none;
}
.table_r_3row_6letter_bottom {
    display: flex;
    align-items: center;
    height: calc(200px/3);
}
.table_r_3row_8letter {
    display: flex;
    align-items: center;
    height: calc(240px/3);
    border-style: none none solid none;
}
.table_r_3row_8letter_bottom {
    display: flex;
    align-items: center;
    height: calc(240px/3);
}
.table_r_4row_8letter {
    display: flex;
    align-items: center;
    height: calc(240px/4);
    border-style: none none solid none;
}
.table_r_4row_8letter_bottom {
    display: flex;
    align-items: center;
    height: calc(240px/4);
}
.table_c_1row {
    align-items: center;
    height: 180px;
}
.table_c_2row {
    align-items: center;
    height: calc(180px/2);
    border-style: none none solid none;
}
.table_c_2row_bottom {
    align-items: center;
    height: calc(180px/2);
}
.table_c_1row_2letter {
    align-items: center;
    height: 100px;
}

/* NHK
------------------------------ */
.nhk_title {
    line-height: 0;
    padding: 0 0 10px 0;
}
.nhk_table_pc a, .nhk_table_mb a {
    display: block;
}
.japanese {
    background-color: crimson;
    width: 50px;
}
.japanese a, .japanese a:hover {
    color: #fff;
}
.social {
    background-color: seagreen;
    width: 50px;
}
.social a, .social a:hover {
    color: #fff;
}
.math {
    background-color: dodgerblue;
    width: 50px;
}
.math a, .math a:hover {
    color: #fff;
}
.science {
    background-color: orange;
    width: 50px;
}
.science a, .science a:hover {
    color: #432;
}
.living {
    background-color: tomato;
    width: 50px;
}
.living a, .living a:hover {
    color: #fff;
}
.music {
    background-color: peru;
    width: 50px;
}
.music a, .music a:hover {
    color: #fff;
}
.art {
    background-color: darkgoldenrod;
    width: 50px;
}
.art a, .art a:hover {
    color: #fff;
}
.technology {
    background-color: cadetblue;
    width: 50px;
}
.technology a, .technology a:hover {
    color: #fff;
}
.homeeconomics {
    background-color: mediumvioletred;
    width: 50px;
}
.homeeconomics a, .homeeconomics a:hover {
    color: #fff;
}
.pe {
    background-color: darkorchid;
    width: 50px;
}
.pe a, .pe a:hover {
    color: #fff;
}
.english {
    background-color: darkviolet;
    width: 50px;
}
.english a, .english a:hover {
    color: #fff;
}
.ethics {
    background-color: goldenrod;
    width: 50px;
}
.ethics a, .ethics a:hover {
    color: #432;
}
.integratedstudy {
    background-color: cornflowerblue;
    width: 50px;
}
.integratedstudy a, .integratedstudy a:hover {
    color: #fff;
}
.special {
    background-color: lightseagreen;
    width: 50px;
}
.special a, .special a:hover {
    color: #fff;
}
.support {
    background-color: mediumorchid;
    width: 50px;
}
.support a, .support a:hover {
    color: #fff;
}
.others {
    background-color: dimgray;
    width: 50px;
}
.others a, .others a:hover {
    color: #fff;
}
.nhk_table_pc, .nhk_table_mb {
    border-width: 1px solid #432;
    border-collapse: collapse;
}
.nhk_table_pc td, .nhk_table_pc th,
.nhk_table_mb td, .nhk_table_mb th {
    border: 1px solid #432;
}
.nhk_table_pc td:nth-of-type(1),
.nhk_table_mb td:nth-of-type(1),
.forcenter {
    text-align: center;
}

/* Google Formの配置
------------------------------ */
.contact {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 80%;
    margin: 0 auto;
}
.contact iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

/* サイドボックス
------------------------------ */
.side-box {
    margin-bottom: 1.5rem;
    border: 1px solid #ccc;
    outline: 2px solid #ccc;
    outline-offset: 4px;
    border-radius: 6px;
    padding: 0.25rem;
    display: block;
}
.side-box a {
    display: block;
}
.sub-title {
    padding-left: 1rem;
}
.sub-title_center {
    text-align: center;
}
.curriculum {
    margin-bottom: 15px;
    list-style: none;
    padding-right: 2.5rem;
}
.curriculum li {
    border-bottom: 1px solid #ccc;
}
.curriculum a {
    color: #432;
    padding: 5px;
    display: block;
}
.curriculum a:hover {
    color: cadetblue;
}

/* フッター
------------------------------ */
footer {
    background: #432;
    text-align: center;
    padding: 1px 0;
}
footer p {
    color: #fff;
    font-size: 0.875rem;
}

/* Mobile Ver.
------------------------------ */
@media (max-width: 600px) {
    /* LAYOUT */
    .container {
        flex-direction: column;
        padding: 0;
    }
    /* Main */
    main {
        width: 100%;
        margin-bottom: 10px;
    }
    /* Aside */
    aside {
        width: 100%;
        margin: 1rem auto;
    }
    
    /* 基本部分
    ------------------------------ */
    .header {
        height: 100px;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .page_title {
        font-size: 40px;
        padding: 25px;
        border-bottom: 0;
        line-height: 0;
    }

    /* 教科詳細
    ------------------------------ */
    .area_pc {
        display: none;
    }
    .lay {
        display: block;
    }
    .tab_class {
        width: calc((97.5%)/11);
    }
    .culture2 {
        word-break: break-all;
    }
    .content_class h3,.content_class a {
        font-size: 18px;
    }
    .culture2 h3, .culture2 a {
        font-size: 14px;
    }
    .culture2 {
        border-width: 1px solid #432;
        border-collapse: collapse;
        width: 100%;
    }
    .culture2 td {
        border: 1px solid #432;
    }
    .table_flex {
        display: flex;
        align-items: center;
    }
    .company {
        line-height: 0;
        font-size: 18px;
    }


    /* NHK
    ------------------------------ */
    .nhk_title {
        font-size: 18px;
    }
    .nhk_table_pc {
        display: none;
    }
    .nhk_table_mb {
        width: 100%;
        position: relative;
        margin: 0 auto;
        font-size: 14px;
    }

    /* Google Formの配置
    ------------------------------ */
    .contact {
        padding-top: 250%;
    }
}

/* Mobile Ver.との差異用
------------------------------ */
@media (min-width: 601px) {
    .nhk_table_mb, .area_mb {
        display: none;
    }
}