@charset "UTF-8";
.visual{
    width: 100%; height: 450px; min-width: 1240px ;
    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
    background-repeat: no-repeat; background-position: center center;
    background-size: cover;
}
.visual .inner {position: relative;}
.visual .visual-header{
    width: 600px; 
    text-align: center;
    position: absolute; left: 0; top: 220px;
}
.visual .visual-header h3{
    font-weight: 700; font-size: 5rem; color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.visual .visual-header p{color: #111;}
.visual .visual-header p em{ font-weight: 700; color: #333; }

.lnb { 
    height: 80px; margin-top: -20px;
    background-color: #fff;
    box-shadow: 0 -5px 5px rgba(0,0,0,0.1);
}
.lnb ul{ display: flex; justify-content: center; }
.lnb ul li a{display: block;
    padding: 0 35px;
    font-size: 2rem; line-height: 8rem; color: #999;
    position: relative;
    transition: all .3s;
}
.lnb ul li a::after {content: ""; opacity: 0;
    width: 100%; height: 3px;
    background-color: #34568b;
    position: absolute; left: 0; bottom: 0;
    transition: all .3s;
}

.lnb ul li:hover a{color: #34568b;}
.lnb ul li:hover a::after {opacity: 1;}
.lnb ul li.on a{font-weight: 700;  color: #34568b;}
.lnb ul li.on a::after {opacity: 1;}

.sub-wrap { width: 1240px; margin: 0 auto; padding: 80px 0;}
.sub-wrap article{}
.sub-wrap h3{
    margin-bottom: 20px; padding-left: 10px;
    font-weight: 700; font-size: 3rem; color: #34568b;
    position: relative;
}
.sub-wrap h3::before {content: "";
    width: 4px; height: 20px;
    background-color: #34568b;
    position: absolute; left: 0; top: 10px;
}
.sub-wrap h3::after {content: "";
    width: 4px; height: 10px;
    background-color: #ccc;
    position: absolute; left: 0; top: 30px;
}
.sub-wrap h3 span { font-weight: 400; color: #aaa;}

/* board-common - S */
.sub-header{margin-bottom: 40px;text-align: center}
.sub-header h2{font-weight: 700; font-size: 5rem; color: #111;}
.sub-header h2 span{font-weight: 400; color: #777;}
.sub-header p{color: #999;}
.sub-header p em{color: #555;}
/* board-common - E */

/* table-style01 - S */
.table-style01{
    width: 100%;
    margin-bottom: 20px;
    font-size: 1.4rem; color: #777;
}
.table-style01 th {
    padding: 15px 10px; border: 1px solid #e1e1e1;
    font-size: 1.6rem;
    vertical-align: middle;
}
.table-style01 td {
    padding: 15px 10px; border: 1px solid #e1e1e1;
    vertical-align: middle;
}
.table-style01 thead th {
    padding: 20px 10px; border-top: 3px solid #000; border-bottom: none;
    font-weight: 700; color: #333;
    background-color: #f1f1f1;
}
.table-style01 tbody th { color: #333;}
/* table-style01 - E */


@media only screen and (max-width:1240px){
    .visual{ height: 150px; min-width: 100% ; background-size: cover}
    .visual .visual-header{ width: 100%; text-align: center; top: 50px;}
    .visual .visual-header h3{font-size: 2.5rem; 
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
    .visual .visual-header p{font-size: 1.4rem;}
    .lnb{display: none;}

    .sub-wrap { width: 100%; padding: 30px 20px 40px 20px;}
    .sub-wrap article{ margin-bottom: 30px;}
    .sub-wrap h3{
        margin-bottom: 10px; padding-left: 7px;
        font-size: 2rem; 
    }
    .sub-wrap h3::before {
        width: 3px; height: 15px;
        top: 5px;
    }
    .sub-wrap h3::after {
        width: 3px; height: 5px;
        top: 20px;
    }
    .sub-wrap h4 { font-size: 1.8rem; }


    /* board-common - S */
    .sub-header{ margin-bottom: 0px}
    .sub-header h2{font-size: 3rem; margin-bottom: 20px; }
    .sub-header p{display: none;}
    /* board-common - E */

    /* table-style01 - S */
    .table-style01 th {padding: 5px 10px; font-size: 1.4rem;}
    .table-style01 td {padding: 5px 5px; font-size: 1.2rem;}
    .table-style01 thead th {padding: 10px 10px;}
    /* table-style01 - E */



}