/*-------------------------------------------
    header
--------------------------------------------*/
.header {
    width: 100%;
    background:rgba(255,255, 255, 1);
    position: fixed;
    top:0;
    z-index: 100000000;
    min-height:100px;
    font-family: 'Arapey', serif;
    font-size: 150%;
    color:#f15a24;
}
.header-navi a:link, .header-navi a:visited, .header-navi a:active {color:#f15a24;}
.header-logo {width: 20%; float: left;padding: 20px 0 0 5%;}
.header-navi {width: 80%; float: left;padding:40px 2% 0 2% ;text-align: right;}
.header-navi li { width:10%;display:inline-block; text-align: center;}
.header-contact {
    width: 13%;
    padding: 40px 0;
    min-height:10px;
    float: left;
    background: #000000;
    text-align: center;
}
.header-contact a:link, .header-contact a:visited, .header-contact a:active {color:#000;}

/*----Mediaカテゴリー----*/
.header__catlist--ul {
    width: 150px;
    position: absolute;
    opacity: 0;
    background: #fff;
    text-align: left;
    margin:3px 0 0 0;
    padding:1% ;
    transition-duration: 0.5s;
    color: #000;
}
.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:#f15a24;}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .header {
        max-height:70px;
        min-height:70px;
    }
    .header-logo {width: 50%; float: left;padding: 6% 0 0 5%;}
    .header-navi-sp {
        width: 100%;
        height:100vh;
        position: fixed;
        top:0;
        right: -100%;
        z-index: 100000000;
        background:rgba(0,0,0,0.8);
        color: #fff;
        text-align:left;
        padding: 5% 5% 5% 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 {
    margin-top:100px;
    position: relative;
}

.main-imgAreaFilter {
    background:#fff;
    width:100%;
    height:100vh;
    z-index:100;
    position: absolute;
    top:0;
    left:0;
    transition : all 600ms;
}
.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;*/
}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .main-imgArea {
        padding-top:0px;
    }
    .main-imgArea-phrase{font-size: 300%;}
    .main-imgAreaFilter {display: none;}
}
/*-------------------------------------------
    top-blockArea
--------------------------------------------*/

.top-blockArea {
    font-size: 130%;
    padding:5% 20%;
}
.top-blockArea2 {
    font-size: 130%;
    padding: 10% 0 5% 0;
}
.top-blockArea2-text {
    text-align: left;
    padding:0 0 0 15%;
    margin-left:-100px;
    opacity: 0;
    transition : all 900ms;
}
.top-blockArea2-text.delighter.started {
    margin-left:0;
    opacity: 1;
 }
.top-blockArea2-ttl {
    font-size: 120%;
    margin-bottom:5%;
    line-height:180%;
}
.top-blockArea2-img.delighter.started {
    margin-top:0;  
    margin-right:0;   
    opacity:1;
 }
.top-blockArea2-ttl h2{
    font-size: 160%;
    margin-bottom:3%;
}
.top-blockArea2-img {
    margin-left:100px;
    transition : all 600ms;
    opacity: 0;
}
.top-blockArea2-img.delighter.started {
    margin-left:0;   
    opacity: 1;
 }
 .top-itemArea {
    font-size:120%;
    padding:0 5% 3% 5%;
}
.top-itemArea-ttl {
    font-size:120%;
    margin-bottom:5%;
    transition : all 600ms;
    opacity: 0;
    margin-top:40px; 
}
.top-itemArea-ttl.delighter.started { 
    opacity: 1;
    margin-top:0; 
 }
.top-itemArea-ttl h2{
    font-size:220%;
    margin-bottom:3%;
}
.itembox {
    transition : all 600ms;
    opacity: 0;  
}
.itembox.delighter.started { 
    opacity: 1;
 }
.top-blockArea3 {
    padding:4% 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;
}
.newsIcon {
    margin: 0 2%;
    padding:2px 5px ;
    display: inline-block;
    min-width: 150px;
    text-align: center;
    border:solid #000 1px;
}
.newsArea li a:link, 
.newsArea li a:visited, 
.newsArea li a:active{
    color:#000;
    transition-duration: 0.2s;
}

.newsArea li a:hover{
    color:#555;
}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .top-blockArea {font-size: 100%;padding:5% 3%;}
    .top-blockArea2 {font-size: 100%;padding:5% 3%;}
    .top-blockArea3 {font-size: 100%;padding:5% 3%;}
    .top-blockArea h2{font-size: 250%;}
    .top-blockArea2 h2{font-size: 250%;}
    .top-blockArea3 h2{font-size: 250%;}
    .top-blockArea2-text {
        width: 100%;
        text-align: center;
        padding:0 3%;
        margin-left:0;
        opacity: 0;
        transition : all 900ms;
    }
    .top-blockArea2-img {
        margin-left:0;
        margin-top:100px;
        transition : all 600ms;
        opacity: 0;
    }
    .top-itemArea {
        font-size:90%;
    }
}
/*-------------------------------------------
    footer
--------------------------------------------*/
.footer {
    color:#fff;
    background:#b55736;
}
.footerNavi {
    padding: 1% 15% 5% 15%;
    text-align: center;
}
.footerNavi li{
    width: 25%;
    float: left;
}
.footer a:link, .footer a:visited, .footer a:active {color:#fff;border-bottom:0px;}
.footer a:hover {color:#444;}

.footerLogo {width: 20%;}
@media screen and (max-width: 768px) {
    .footerLogo {width: 50%;}
    .footerNavi {
        padding: 2% 2% 5% 2%;
        text-align: center;
    }
    .footerNavi li{
        width: 50%;
    }
}
/*-------------------------------------------
    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;
}
@media screen and (max-width: 768px) {
    .nextArea {
        background: url('../img/next-top.jpg') no-repeat;

        padding: 170px 0 0 0;
    }
}
/*-------------------------------------------
   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;
}
/*-------------------------------------------
   記事詳細レイアウト
--------------------------------------------*/

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

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

.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{
    width:40%;
    margin: 0 0 5% 0;
    float: right;
}

.articlePage__item{
    width:60%;
    margin: 3% 0 5% 0;
    float: right;
}

.articlePage__dl {
    padding:0 0 5% 0;
}

.articlePage__dl dt{
    width:20%;
    padding:1% 0;
    margin:1% 0;
    float: left;
    background: #b55736;
    text-align: center;
    color:#fff;
}
.articlePage__dl dd{
    width:80%;
    padding:1% 3%;
    margin:1% 0;
    float: left;
}

.articlePage__BtnArea {
    padding:5% 0;
    text-align: center;
}
.articlePage__Btn {
    width: 60%;
    margin: auto;
    padding:2% 3%;
    background: #b55736;
    transition-duration: 0.2s;
}
.articlePage__Btn  a:link, .articlePage__Btn  a:visited, .articlePage__Btn a:active {color:#fff;border-bottom:0px;}
.articlePage__Btn:hover {
    background: #791002;
}

/*写真_グレー*/
.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%;}
    .itemBodyArea {
        font-size: 160%;
    }
    .itemBodyArea {
        background: #fff;
        padding: 8% 3%;
        font-size: 150%;
        text-align: left;
    }
    .articlePage__Topimg{
        width:100%;
    }    
    .articlePage__item{
        width:100%;
    }
    .articlePage__dl {
        font-size:90%;
    }
    .articlePage__BtnArea {
        padding:10% 0;
    }
    .articlePage__Btn {
        width: 90%;
        font-size: 120%;
    }
}

/*---------------------------
    faq
---------------------------*/

.faqArea dt{
    margin-bottom:15px;
    font-size:110%;
}
.faqArea dd{
    font-size:80%;
    margin-bottom:15px;
}
/*---------------------------
    company
---------------------------*/
.companyArea {
    width:100%;
}
/*---------------------------
    preview
---------------------------*/

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