@charset "utf-8";
/* CSS Document */

body {
  counter-reset: number 0; 
}

#contentBox .support {
    background: #fff3da;
    color: #8cc66d;
    border-radius: 20px;
}

#contentBox h4.heading {
    display: inline-block;
    position: relative;
    text-align: center;
    padding: 5px;
    font-size: 1.2rem;
    font-weight: bold;
}

/*h3*/
#contentBox .hArea h3.heading {
  display: inline-block;
    position: relative;
    height: 46px;
    line-height: 46px;
    vertical-align: middle;
    text-align: center;
    padding: 0 30px 0 20px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #FFF;
    box-sizing: border-box;
    /*width:48%;*/
    width:100%;
}
#contentBox .hArea h3.heading:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}
#contentBox .hArea h3.heading:after {
    top: 0;
    right: -1px;
    border-width: 22px 20px 24px 0;
    border-color: transparent #FFF transparent transparent;
    border-style: solid;
}

#contentBox .area02 .hArea h3.heading {
  background: #fa2f45;
}
#contentBox .area03 .hArea h3.heading {
  background: #ffbe32;
}
#contentBox .area04 .hArea h3.heading {
  background: #1f8fea;
}
#contentBox .area05 .hArea h3.heading {
  background: #6cda8e;
}


@media only screen and (max-width: 768px) {
#contentBox .hArea h3.heading {
  width:100%; 
}


  #contentBox .area02,
  #contentBox .area03 {
      margin: 0 !important;
  }

}

@media only screen and (max-width: 480px) {
  #contentBox #balance .hArea h3.heading {
    display: inline-block;
      position: relative;
      height: 60px;
      line-height: 1.2;
      vertical-align: middle;
      text-align: center;
      padding: 5px 30px 0 20px;
      font-size: 1.4rem;
      font-weight: bold;
      color: #FFF;
      box-sizing: border-box;
  }
  
  #contentBox #balance .hArea h3.heading:after {
      position: absolute;
      content: '';
      width: 0px;
      height: 0px;
      z-index: 1;
  }
  #contentBox #balance .hArea h3.heading:after {
      top: 0;
      right: -1px;
      border-width: 30px 14px 34px 0;
      border-color: transparent #FFF transparent transparent;
      border-style: solid;
  }
}


/*ページ内リンク*/

#contentBox .in_page_link {
  display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: space-between; 
  justify-content: space-between; 
  align-items: center;
  flex-wrap: wrap;
  margin:60px 0;
}

#contentBox .in_page_link li {
  font-size:1.2rem;
  width: calc(100% / 4 - 23px);
  height:60px;
  line-height:1.1;
  font-weight:bold;
  border-radius:10px;
  box-sizing:border-box;
}

#contentBox .in_page_link li {
  display:inline-block\9; /*IE9ハック*/
  line-height:60px\9; /*IE9ハック エラーあり*/
}

#contentBox .in_page_link li:nth-child(1) {
  border:3px solid #fa2f45;
}
#contentBox .in_page_link li:nth-child(2) {
  border:3px solid #ffbe32;
}
#contentBox .in_page_link li:nth-child(3) {
  border:3px solid #1f8fea;
}
#contentBox .in_page_link li:nth-child(4) {
  border:3px solid #6cda8e;
}


#contentBox .in_page_link li::after {
  content: "";
  display: inline-block;
  padding: 0 0 0 10px;
  vertical-align: middle;
  width: 6px;
  height: 16px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
#contentBox .in_page_link li:nth-child(1)::after {
  border-top: 3px solid #fa2f45;
  border-right: 3px solid #fa2f45;
}
#contentBox .in_page_link li:nth-child(2)::after {
  border-top: 3px solid #ffbe32;
  border-right: 3px solid #ffbe32;
}
#contentBox .in_page_link li:nth-child(3)::after {
  border-top: 3px solid #1f8fea;
  border-right: 3px solid #1f8fea;
}
#contentBox .in_page_link li:nth-child(4)::after {
  border-top: 3px solid #6cda8e;
  border-right: 3px solid #6cda8e;
}


#contentBox .in_page_link li a {
  text-decoration:none;
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#contentBox .in_page_link li a {
  line-height:1\9;/*IE9,10 エラーあり*/
  display:block\9;/*IE9,10*/
}

@media all and (-ms-high-contrast: none) {
    #contentBox .in_page_link li a {
  display: flex;/* IE10以上 */
}
}

#contentBox .in_page_link li:nth-child(1) a {
  color:#fa2f45;
}
#contentBox .in_page_link li:nth-child(2) a {
  color:#ffbe32;
}
#contentBox .in_page_link li:nth-child(3) a {
  color:#1f8fea;
}
#contentBox .in_page_link li:nth-child(4) a {
  color:#6cda8e;
}

#contentBox .in_page_link li:nth-child(1) a:hover {
  color:#FFF;
  background:#fa2f45;
}
#contentBox .in_page_link li:nth-child(2) a:hover {
  color:#FFF;
  background:#ffbe32;
}
#contentBox .in_page_link li:nth-child(3) a:hover {
  color:#FFF;
  background:#1f8fea;
}
#contentBox .in_page_link li:nth-child(4) a:hover {
  color:#FFF;
  background:#6cda8e;
}

@media only screen and (max-width: 768px) {
  #contentBox .in_page_link li {
  width: calc(100% / 2 - 10px);
  margin-bottom:40px;
  }
}

@media only screen and (max-width: 480px) {
  #contentBox .in_page_link li {
  width:100%;
  }
}



/*area02 三育教育の理念*/


#contentBox .ideaList {
  display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: space-between; 
  justify-content: space-between; 
  align-items: center;
  flex-wrap: wrap;
  margin:40px 0;
}

#contentBox .ideaList li {
  font-size:1.1rem;
  width: calc(100% / 5 - 23px);
  height:60px;
  line-height:1.1;
  font-weight:bold;
  border-radius:10px;
  box-sizing:border-box;
  color:#fa2f45;
  background:#feeaec;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:left;
}

#contentBox .ideaList li {
  display:inline-block\9; /*IE9,10*/
  line-height:1;
  font-size:0.95rem\9; /*IE9,10*/
}

.ideaList .br-N374 {
  display:none\9; /*IE9,10*/
}


#contentBox .ideaList li:before {
    counter-increment: number 1;
    content: counter(number) " ";
    font-size: 3.2rem;
    display: inline-block;
    margin: 5px;
}
@media all and (-ms-high-contrast: none){ /*IE10以上ハック*/
  #contentBox .ideaList li:before {
    position:relative;
    top:8px;
  }
}

@media only screen and (max-width: 768px) {
  #contentBox .ideaList {
  -webkit-justify-content: center; 
  justify-content: center; 
}
  
  #contentBox .ideaList li {
  width: calc(100% / 3 - 10px);
  margin:5px;
}
}

@media only screen and (max-width: 650px) {
  #contentBox .ideaList li {
    width: calc(100% / 2 - 10px);
  }
}

@media only screen and (max-width: 374px) {
  #contentBox .ideaList li {
    width:100%;
    display:block;
    padding:0 20px;
    line-height:1.0;
    height:40px;
  }
  
  #contentBox .ideaList li:before {
    font-size: 2.2rem;
    vertical-align: middle;
}
}


/*area03 知徳体のバランスの取れた教育*/

#contentBox .balanceList {
  display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  align-items: center;
  flex-wrap: wrap;
  margin:0;
}

#contentBox .balanceList li {
  position: relative;
  width: calc(100% / 3 - 10px);
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  justify-content: center;
}

#contentBox .balanceList li {
  display:block\9; /*IE9,10*/
  float:left\9; /*IE9,10*/
}

#contentBox .balanceList li .pic {
  width:300px;
  height:200px;
  
}

#contentBox .balanceList li .balanceCap {
  width:280px;
  height:81px;
  position:absolute;
  top:168px;
  left:25px;
}


#contentBox .balanceList .review {
   margin:70px 20px 20px;
 }


@media only screen and (max-width: 768px) {
  #contentBox .balanceList {
    display:block
  }
  
  #contentBox .balanceList li {
    width:100%;
    display:block;
  }
  
  #contentBox .balanceList li {
  float:none\9; /*IE9,10*/
}
  
  #contentBox .balanceList li .pic {
    width:100%;
    height:auto;
    margin-bottom:-14%;
}

  #contentBox .balanceList li .balanceCap {
    position:static;
    z-index:100;
    top:0;
    right: 0;
    left: 0;
    margin:auto;
    width: 90%;
    height: 0;
}

  #contentBox .balanceList .review {
    margin:30% 0 10%;
  }

}


/*area04 少人数教育*/
/*area05 社会との多様な触れ合い*/



#contentBox .picArea {
  display: flex;
  margin:20px 0 0;
}

#contentBox .imgArea,
#contentBox .txtArea {
  display:inline-block\9; /* IE9,10 */
}


#contentBox .picRow {
  flex-direction: row-reverse;
}

#contentBox .imgArea {
  flex-basis: 380px;
}

#contentBox .picArea .txtArea,
#contentBox .picRow .txtArea {
  flex-basis: 640px;
  
}

#contentBox .picArea .txtArea {
  padding:0 0 0 40px;
}

#contentBox .picRow .txtArea {
  padding:0 40px 0 0;
}

#contentBox #small .review:first-child,
#contentBox #variety .review:first-child {
  margin-top:0;
}

@media only screen and (max-width: 768px) {
  #contentBox .picArea {
    display:block;
  }
  
  #contentBox .imgArea,
  #contentBox .txtArea {
    width:100%;
  }
  #contentBox .imgArea {
    margin:20px 0;
  }
  #contentBox .picArea .txtArea,
  #contentBox .picRow .txtArea {
    padding:0;
  }
}