@charset "utf-8";

@media (max-width: 768px) {
  #wrapper {
    margin: 0 2%;
    width: 96%;
  }

  #head {
    width: auto !important;
  }

  #head #mapbox {
    margin: 0 auto;
    max-height: 220px;
    max-width: 440px;
    padding: 100px 0 0;
    position: static;
  }

  img {
    height: auto !important;
    max-width: 100% !important;
  }

  .itembox,
  .school_itembox,
  #head #anc,
  .listbox,
  .school_listbox {
    width: auto;
  }

  #head.low {
    background-position: bottom;
    background-size: 100%;
  }

  .schoolbox .lbox,
  .schoolbox .rbox {
    float: none;
    width: auto;
  }

  .schoolbox h2 a span {
    font-size: 12px !important;
    margin: 4px 0 0 0;
    padding: 2px 0 0 20px;
  }

  .schoolbox .lbox .gmap {
    width: 100% !important;
  }

  .school_listbox {
    display: block;
    height: auto;
    margin: 0 0 10px !important;
    min-height: 110px;
    width: 100%;
  }

  .school_listbox a {
    display: flex;
  }

  .listbox a .tbox {
    width: auto;
  }

  .itembox h2 {
    width: auto;
  }

  .listbox a .tbox h3 {
    margin-right: 50px;
  }

  .school_listbox .lbox {
    flex: 0 0 120px;
  }

  .listbox a .lbox {
    align-items: flex-start;
    display: flex;
    float: none;
    justify-content: space-between;
    width: auto;
  }

  .listbox .lbox img {
    margin: 0;
    width: 50%;
  }

  .listbox .rbox,
  .school_listbox .rbox,
  .schoolbox .rbox table {
    float: none;
    height: auto;
    width: auto;
  }

  .school_listbox .rbox {
    flex: 0 1 100%;
  }

  .listbox .rbox table {
    margin: 0 10px 10px;
    width: auto;
  }

  .school_listbox .rbox .title {
    width: auto;
  }
}