@charset "utf-8";

/* Contents
 * ****************************
 *
 * 1: header
 * 2: global
 * 3: local
 * 4: footer
 * 5: other
 *
 * ****************************
 */

/*
======= 1: header =======
*/

/*
======= 2: global =======
*/
#globalNavi ul {
  position:relative;
  width: 960px;
  height: 60px;
  margin: 0 auto;
  overflow: hidden;
}
#globalNavi li {
  float: left;
    border-left: 1px solid #DAC4C3;
  display:block;
  overflow:hidden;
  width: calc(100% / 7);
  height: 60px;
  line-height:60px;
}
#globalNavi li:last-of-type{border-right: 1px solid #DAC4C3;}
#globalNavi a {
  text-align: center;
  position: relative;
  display: block;
  height: 60px;
  color: #FBF8F4;
  font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ ゴシック","MS Gothic","Osaka－等幅",Verdana,Arial,Helvetica,sans-serif;
    font-size: 0.875rem;
    font-weight: bold;
  text-decoration: none;
  overflow: hidden;
    transition: all .5s;
}

#globalNavi a:hover,
#home #globalNavi li:nth-of-type(1) a,
#school #globalNavi li:nth-of-type(2) a,
#course #globalNavi li:nth-of-type(3) a,
#flow #globalNavi li:nth-of-type(4) a,
#instructor #globalNavi li:nth-of-type(5) a,
#obog #globalNavi li:nth-of-type(6) a,
#active #globalNavi li:nth-of-type(7) a,
#fee #globalNavi li:nth-of-type(8) a{
    background-color: #FFFFFF;
    color: #db2e6d;
}

@media screen and (max-width: 820px){
    #globalNavi{height: 43px;}
    #globalNavi ul{
        width: 100%;
        height: 43px;
    }
    #globalNavi li {
        height: 43px;
        line-height: 43px;
    }
#globalNavi a {
  position: relative;
  height: 43px;
}
}

/*
======= 3: local =======
*/

/*
======= 4: footer =======
*/

/*
======= 5: other =======
*/
.instNavi{
  display: flex;
  flex-wrap: wrap;
  width: 960px;
  margin-bottom: 40px;
}
.instNavi li{
  width: 20%;
  height: 65px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
}
.instNavi li:nth-of-type(5n+1){border-left: 1px solid #CCCCCC;}
.instNavi li:nth-last-of-type(-n+5),
.instNavi:nth-of-type(2) li{border-bottom: 1px solid #CCCCCC;}
.instNavi li a{
  display: block;
  height: 65px;
  padding-top: 10px;
  color: #666666;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.instNavi li a span{
  display: block;
  font-size: 0.625rem;
  font-weight: normal;
}

@media screen and (min-width: 821px){
  .instNavi li a:hover{color: #DE3166;}
}
@media screen and (max-width: 820px){
  .instNavi {width: 100%;}
  .instNavi li{
    width: 33.3%;
    height: auto;
    text-align: center;
  }
  .instNavi li:nth-of-type(5n+1){border-left: none;}
  .instNavi li:nth-of-type(3n+1){border-left: 1px solid #CCCCCC;}
  .instNavi li:nth-last-of-type(-n+5){border-bottom: none;}
  .instNavi li.nav11{
    width: 100%;
    border-bottom: 1px solid #CCCCCC;
  }
  .instNavi:nth-of-type(2) li{border-bottom: 1px solid #CCCCCC;}
}