@charset "UTF-8";
@font-face {
  font-family: 'Himalaya';
  src: url("../font/MicrosoftHimalaya.eot");
  src: url("../font/MicrosoftHimalaya.eot?#iefix") format("embedded-opentype"), url("../font/MicrosoftHimalaya.woff") format("woff"), url("../font/MicrosoftHimalaya.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

.cf {
  *zoom: 1; }
  .cf:after {
    content: "";
    display: table;
    clear: both; }

.hover {
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out; }
  .hover:hover {
    opacity: .7; }

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

#top_main div, #top_main p, #top_main ul, #top_main li, #top_main img, #top_main span {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#main_visual ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: normal;
  -ms-flex-align: normal;
  align-items: normal;
  -webkit-box-pack: normal;
  -ms-flex-pack: normal;
  justify-content: normal;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  #main_visual ul li.pin img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute; }
  @media screen and (min-width: 768px) {
    #main_visual ul li {
      width: calc(100% / 5);
      position: relative; }
      #main_visual ul li:nth-child(3) {
        position: relative; }
        #main_visual ul li:nth-child(3):before {
          content: "";
          display: block;
          background: url("../img/top/main_visual/text.png") no-repeat center center;
          background-size: 100%;
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 2; }
      #main_visual ul li:nth-child(n + 11) {
        display: none; } }
  @media screen and (max-width: 767px) {
    #main_visual ul li {
      width: calc(100% / 3);
      position: relative; }
      #main_visual ul li:nth-child(5) {
        position: relative; }
        #main_visual ul li:nth-child(5):before {
          content: "";
          display: block;
          background: url("../img/top/main_visual/text.png") no-repeat center center;
          background-size: 100%;
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 2; }
      #main_visual ul li:nth-child(n + 7) {
        display: none; } }

@media all and (-ms-high-contrast: none) {
  /* ここに書く */ }

.school_about_menu {
  margin: 30px 0; }
  .school_about_menu .menu_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: normal;
    -ms-flex-align: normal;
    align-items: normal;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap; }
  .school_about_menu .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap; }
  @media screen and (min-width: 768px) {
    .school_about_menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: normal;
      -ms-flex-align: normal;
      align-items: normal;
      -webkit-box-pack: normal;
      -ms-flex-pack: normal;
      justify-content: normal;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }
      .school_about_menu .title {
        width: calc((100% / 5) * 2); }
        .school_about_menu .title img {
          width: 67%; }
      .school_about_menu .menu_area {
        width: calc((100% / 5) * 3); }
        .school_about_menu .menu_area li {
          width: calc(100% / 3); } }
  @media screen and (max-width: 767px) {
    .school_about_menu .title {
      margin-bottom: 30px; }
      .school_about_menu .title img {
        width: calc(100% - 120px); }
    .school_about_menu .title,
    .school_about_menu .menu_area {
      width: 100%; } }

.explain_content {
  background: #F5F5F5;
  line-height: 2; }
  @media screen and (min-width: 768px) {
    .explain_content .wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: normal;
      -ms-flex-align: normal;
      align-items: normal;
      -webkit-box-pack: normal;
      -ms-flex-pack: normal;
      justify-content: normal;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }
    .explain_content .img_area img {
      width: 100%; }
    .explain_content .text_area {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; } }
  @media screen and (min-width: 990px) {
    .explain_content .text_area {
      width: 68%;
      padding: 20px 0 20px 60px; } }
  @media screen and (max-width: 989px) {
    .explain_content .wrap {
      padding-right: 30px;
      padding-left: 30px; }
    .explain_content .text_area {
      width: 68%;
      padding: 20px 0 20px 60px; } }
  @media screen and (min-width: 920px) {
    .explain_content .wrap {
      padding-top: 30px;
      padding-bottom: 30px; }
    .explain_content .img_area {
      width: 32%; }
    .explain_content .text_area {
      width: 68%;
      padding: 20px 0 20px 60px; } }
  @media screen and (max-width: 919px) {
    .explain_content .wrap {
      padding: 0; }
    .explain_content .img_area {
      width: 42%; }
    .explain_content .text_area {
      width: 58%;
      padding: 20px 40px; } }
  @media screen and (max-width: 767px) {
    .explain_content .img_area,
    .explain_content .text_area {
      width: 100%; }
    .explain_content .text_area {
      padding: 60px 30px; }
    .explain_content .wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: normal;
      -ms-flex-align: normal;
      align-items: normal;
      -webkit-box-pack: normal;
      -ms-flex-pack: normal;
      justify-content: normal;
      -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse; } }

@media screen and (min-width: 768px) {
  #main_visual,
  .school_about_menu,
  .explain_content .wrap {
    width: 100%;
    max-width: 950px;
    margin-right: auto;
    margin-left: auto; } }