/*-------------------------------------------
    header
--------------------------------------------*/
.header {
    width: 100%;
    background: #000;
    position: fixed;
    z-index: 100000000;
    box-shadow:0px 0px 7px -3px #000000;
    min-height:70px;
    font-family: 'Arapey', serif;
    font-size: 120%;
}
.header-navi a:link, .header-navi a:visited, .header-navi a:active {color:#fff;}
.header-logo {width: 20%; float: left;padding: 1% 0 1% 5%;}
.header-logo img{width:150px;}
.header-navi {width: 80%; float: left;padding:2% 5% 2% 7.5%;}
.header-navi li { width:15%;display:block;float: left;}
.header-contact {
    width: 10%;
    padding: 2.5% 0;
    min-height:70px;
    float: left;
    background: #000000;
    text-align: center;
}
.header-contact a:link, .header-contact a:visited, .header-contact a:active {color:#fff;}

/*----Mediaカテゴリー----*/
.header__catlist--ul {
    width: 150px;
    position: absolute;
    opacity: 0;
    background: #000;
    text-align: left;
    margin:3px 0 0 0;
    padding:1% ;
    transition-duration: 0.5s;
}
.header__catlist--ul li{
    width: 100%;
    padding:3px 0;
    float: none;
}
.header__catlist:hover .header__catlist--ul{
    opacity: 1;
}
.header__catlist--ul a:link, .header__catlist--ul a:visited, .header__catlist--ul a:active {color:#fff;}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .header {
        min-height:70px;
    }
    .header-logo {width: 50%; float: left;padding: 4% 0 0 0;}
    .header-logo img{width:70%;}
    .header-navi-sp {
        width: 100%;
        height:100vh;
        position: fixed;
        top:0;
        right: -100%;
        z-index: 100000000;
        background:rgba(0,0,0,0.8);
        color: #000;
        text-align:left;
        padding: 10% 5% 0 10%;
        transition-duration: 0.5s;
        overflow:scroll;
    }
    .header-navi-spAct {
        right: 0%;
    }
    .header-navi-sp li a{
        display: block;
        padding: 3% 0;
    }
    .header-navi-sp a:link, .header-navi-sp a:visited, .header-navi-sp a:active { color: #fff;}

    .header-navi-icon{
        position:fixed;
        right:20px;
        top:2.5%;
        width:35px;
        height:35px;
        background: rgb(0,0,0);
        z-index: 100000001;
        display: block;
    }
    .header-navi-icon span {
        display: inline-block;
        transition-duration: 0.3s;
        box-sizing: border-box;
        position: absolute;
        left: 10%;
        width: 80%;
        height: 2px;
        background-color: #fff;
    }
    .header-navi-icon span:nth-of-type(1) {top: 8px;}
    .header-navi-icon span:nth-of-type(2) {top: 16px;}
    .header-navi-icon span:nth-of-type(3) {top: 24px;}

    .header-navi-iconAct span:nth-of-type(1) {
        -webkit-transform: translateY(9px) rotate(-45deg);
        transform: translateY(9px) rotate(-45deg);
    }

    .header-navi-iconAct span:nth-of-type(2) {
        opacity: 0;
    }
    .header-navi-iconAct span:nth-of-type(3) {
        -webkit-transform: translateY(-7px) rotate(45deg);
        transform: translateY(-7px) rotate(45deg);
    }
    .header__catlist--ul {
        width: 100%;
        opacity: 1;
        background: none;
        position: static;
    }
    .header__catlist--ul li{
        padding:0;
        margin-left: 15px;
    }
}

/*-------------------------------------------
    main-imgArea 
--------------------------------------------*/

.main-imgArea {
    position: relative;
}
.main-imgArea-phrase {
    position: absolute;
    bottom: -10px;
    width: 100%;
    font-size: 500%;
    z-index: 10000000;
    /*text-shadow: rgb(255, 255, 255) 1px 0px 2px, rgb(255, 255, 255) -1px 0px 20px;*/
}
.main-imgArea__logo {
    position: absolute;
    top:35%;
    text-align: center;
    width: 100%;
}
.main-imgArea__logo img{width:25%;}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .main-imgArea {
        padding-top: 10%;
    }
    .main-imgArea-phrase{font-size: 300%;}
    .main-imgArea__logo {
        position: absolute;
        top:40%;
    }
    .main-imgArea__logo img{
        width: 60%;
    }
}
/*-------------------------------------------
    top-blockArea
--------------------------------------------*/

.top-blockArea {
    font-size: 150%;
    padding:5% 10%;
    line-height: 170%;
    background: url('../img/top_item_bg.jpg') repeat-y ;
}

.top-itemimg img {
    width: 80%;
}

.top-blockArea__ttlArea {
    margin-bottom: 5%;
}

.top-blockArea__ttlArea--ttl{
    font-size: 220%;
    margin: 3% 0;
    margin-bottom: 5%;
}
.top-blockArea__ttlArea--subttl{
    font-size: 150%;
    margin: 0 0 3% 0;
    margin-bottom: 5%;
}
.top-blockArea-text {
    text-align: left;
}

.itemBoxList {
    width: 100%;
}

.itemBoxList li{
    width: 23%;
    margin:0 1%;
    float: left;
}
.itemBox {
    padding: 0 10%;
    text-align: center;
}

.arapey {
    font-size: 110%;
}
.itemBox__img {
    width: 80%;
    border-radius: 50%;
    overflow: hidden;
}

.top-blockArea2 {
    font-size: 150%;
    padding:3% 0 0 0;
    background: url('../img/access_bg.jpg') repeat-y ;
}
.top-blockArea2-text {
    text-align: left;
    padding: 20px 5px;
}

.top-blockArea3 {
    padding:2% 10% 10% 10%;
}
.top-blockArea3 h2{
    padding: 5% 0;
    font-size: 200%;
}

.newsArea {
    text-align: left;
    font-size: 120%;
}

.newsBody {
    padding: 10% 0;
    line-height: 180%;
}
.newsArea li{
    margin: 4px 0;
}

.newsArea li a:link, 
.newsArea li a:visited, 
.newsArea li a:active{
    color:#000;
    transition-duration: 0.2s;
}

.newsArea li a:hover{
    color:#555;
}

.mapArea {
    border: solid #879345 5px;
    border-left: 0;
    border-right: 0;
}

/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .top-blockArea {font-size: 100%;padding:5% 3%;}
    .top-blockArea2 {font-size: 100%;padding:5% 0 0 0;}
    .top-blockArea3 {font-size: 100%;padding:5% 3%;}
    .top-blockArea2 h2{font-size: 250%;}
    .top-blockArea3 h2{font-size: 250%;}
    .itemBoxList li{
        width: 76%;
        margin:0% 12% 7% 12%;
        float: none;
    }
}
/*-------------------------------------------
    footer
--------------------------------------------*/
.footer {
    background: #000000;
    color: #fff;
    padding: 0 0 5% 0;
    font-size: 120%;
}
.footerNavi {
    padding: 3% 15% 3% 15%;
    text-align: center;
}
.footerNavi li{
    width: 20%;
    float: left;
}
.footer a:link, .footer a:visited, .footer a:active {color:#fff;}
.footer a:hover {color:#fff;}

.footerNavi li i{
    display: none;
}

.footerLogo {width: 10%; margin: 2% 0;}
.footerLogo img{width: 80%;}
@media screen and (max-width: 768px) {
    .footerLogo {width: 50%;}
    .footerNavi {
        font-size:120%;
        padding:0;
        margin-bottom:10%;
        text-align: center;
    }
    .footerNavi li{
        width:100%;
        text-align: left;
        border-bottom: solid #ccc 1px;
        position: relative;
    }
    .footerNavi li a{
        display: block;
        padding:3%;
    }
    .footerNavi li a:hover{background:#333333;color:#fff;}
    .footerNavi li a i{
        position: absolute;
        right:5%;
        top:40%;
        display: inline-block;
    }

}
/*-------------------------------------------
    next
--------------------------------------------*/

.nextArea {
    background: url('../img/next-top.jpg') no-repeat;
    background-size: 100%;
    padding: 15% 0 0 0;
}

.nextBodyArea {
    background: #fff;
    padding: 5% 8%;
    font-size: 150%;
    text-align: left;
}

.nextBodyArea--ttl{
    font-size: 180%;
    margin: 3% 0;
    margin-bottom: 5%;
    text-align: center;
    letter-spacing:3px;
}

.companyArea {
    background: #fff;
    padding: 5% 20%;
    font-size: 140%;
    text-align: left;
}

.companyLabel {
    background: #000;
    padding: 3% 4%;
    text-align:center;
    border-radius: 4px;
    color:#fff;
}
.companyText {
    padding: 2% 4%;
    text-align:left;
}

@media screen and (max-width: 768px) {
    .nextArea {
        background: url('../img/next-top.jpg') no-repeat;
        padding: 170px 0 0 0;
    }
    .companyArea {
        padding: 5% 3%;
    }
}


/*-------------------------------------------
   contact
--------------------------------------------*/
.contactArea {
    background: #fff;
    padding: 5% 20%;
    font-size: 150%;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .contactArea {
        background: #fff;
        padding: 5% 2%;
    }
}
/*-------------------------------------------
   page
--------------------------------------------*/
.pageArea {
    padding: 3% 0;
}

.pageMsg {
    margin-bottom: 3%; 
}

.teacherList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    line-height: 150%;
}
.teacherList li{
    width: 20%;
    padding: 0 1%;
    font-size: 70%;  
    /*float: left;*/   
}

.teacherListHeader {
    text-align: center;
    padding: 3% 0;
    font-size: 120%;
}

.careerWork{
    font-size: 90%;  
    line-height: 180%;
}

.listbox--main {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.listbox--main__box {
    width: 48%;
    margin: 1%;
    background: #fff;
    box-shadow:0px 0px 9px -3px #000000;
    border-radius: 7px;
    border-top: 5px #000 solid;
    font-size: 80%;
}

.listbox--main__header {
    background: #eeeeee;   
    padding:4% 5%;
}

.listbox--main__label {
    padding:15px 5% 0 5%;
}

.listbox--main__textheader {
    width: 120px;
    padding: 1%;
    margin: 3% 5% 0 5%;
    border: 1px #eee solid;
    border-bottom: 0px;
    background: #eee;
    text-align: center;
}

.listbox--main__textheader {
    width: 120px;
    padding: 1%;
    margin: 3% 5% 0 5%;
    border: 1px #eee solid;
    border-bottom: 0px;
    background: #eee;
    text-align: center;
}
.listbox--main__text {
    border-top: 1px #eee solid;   
    padding: 3% 5%;
}

@media screen and (max-width: 768px) {
    .teacherList li {
        width: 98%;
        font-size: 80%;
    }
    .listbox--main__box {
        width: 98%;
    }
}

/*-------------------------------------------
   記事リスト
--------------------------------------------*/
.article-list__h2 {
    font-size: 150%;
    text-align: left;
    padding: 1% 0%;
    margin-bottom: 3%;
    border-bottom: solid #dddddd 1px;
    position: relative;
}
/*-------------------------------------------
   記事詳細レイアウト
--------------------------------------------*/

.articlePage{
    text-align: left;
    line-height: 150%;
}

/*題名*/
.articlePage__ttl{
    font-size: 180%;
    font-weight: bold;    
    margin: 0 0 3% 0;
}

/*副題*/
.articlePage__subttl{
    font-size: 150%;
    font-weight: bold;    
}

.articlePage__date{
    text-align: right;;
    color: #aaaaaa;
    padding:10px 0 10px 0;
}

.articlePage__Topimg{
    margin: 0 0 5% 0;
}

.articlePage__item{
    margin: 3% 0 5% 0;
}


/*写真_グレー*/
.articlePage__imgrightgray{
    margin: 2% 0;
    font-size: 80%;
}

.articlePage__imgrightgray　img{
    width:100%;
}

/*写真周辺設定*/
.articlePage__imgright{
    float: right;
    width: 300px;
    margin: 0 2% 2% 2%;
    padding: 2%;
    font-size: 80%;
}

/*サイドバー*/
.sidebar__ttl {
    background: #000;
    color: #fff;;
    font-size: 150％;
    padding:3%;
}
.sidebar__catlist{
    margin:0 0 10% 0;
}
.sidebar__catlist li{
    margin: 3%;
}
.sidebar__catlist li a:link, 
.sidebar__catlist li .footer a:visited, 
.sidebar__catlist li .footer a:active{
    color: #000;
}

.sidebar__catlist .rank0{ color:gold;}
.sidebar__catlist .rank1{ color:#c0c0c0;}
.sidebar__catlist .rank2{ color:#B08A1C}
.sidebar__catlist .rank3,
.sidebar__catlist .rank4{ color:#666666}


.sidebar__catlist li a:hover{
    color: #bbbbbb;
}

/*スマホの画面サイズ設定*/
@media screen and (max-width: 768px) {
    .articlePage__imgrightgray{
        float: none;
        width: 100%;
        margin: 5px;
    }
    .articlePage__imgright{
        float: none;
        width: 100%;
        margin: 5px;
    }
    .articlePage__ttl{
        font-size: 120%;
    }
    .articlePage__subttl{margin: 25px 0;font-size: 110%;}
}

/*---------------------------
    preview
---------------------------*/

.previewArea {
	position: fixed;
	bottom:0;
	width:100%;
    background-color: rgba(0, 0, 0, 0.8);
}