@-ms-viewport,
@viewport {
    width: device-width;
}

@media screen and (min-width: 1680px) {
    
}

@media screen and (min-width: 1280px) and (max-width: 1679px) {

}


@media screen and (max-width: 1280px) {
    
}

@media screen and (max-width: 1024px) {
    
}

@media screen and (max-width: 979px) {
    section.main ul.grid li {width: 50%;}
    .instagram .content {height: 0; padding-top: 79%;}
}

@media screen and (max-width: 768px) {
    
  .column dl dd {width: 20%;}
    
  .mcs-horizontal-example {
    max-width: 100%;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
   }
   .tableStructure.oneForth .col {
    /*min-width: 205px;*/
    min-width: auto;
    width: 50%;
   }

    .column-list { flex-direction: column;}
    .column:first-child {padding: 0 1em;}
    .column, .column:first-child, .column:last-child {width: 100%;}

}

@media screen and (max-width: 640px) {
   section.main ul.grid li {width: 100%; padding: 0;}
   .contentPage {width: 85vw;}

   .aboutPage .hd, .aboutPage .photo {float: none; width: 100%;}
   .aboutPage .hd {padding-left: 0; text-align: center;}
   .aboutPage .photo {width: 40%; margin: 0 auto 3rem;}
   .main_inner h2 {font-size: 2rem; margin-bottom: 2rem;}

   .main_inner h3 {font-size: 1.7rem;}

   .timetable dl {padding-bottom: 0; padding-left: 40px;}
   .timetable dl:before { height: 100%; width: 6px; bottom: auto; top: 0;}
   .timetable dl dd, .timetable.oneFifth dl dd {width: 100%; display: block; padding: 2rem 1rem;}
   .timetable dl dd u {bottom: auto; left: -42px; top: 0px; padding-top: 0px; padding-right: 24px; min-width: 55px;}
   .timetable dl dd u:before {top: 50%; left: auto; right: 0; margin-top: -10px;}
   .timetable dl dd .content:before {width: calc(100% + 10px); height: 1px; left: -10px; top: -12px;}

   

   section.main .grid li {margin-bottom: 1.5rem;}
   section.main .grid li a {}

   .sectionPdng {padding: 5rem 2rem;}


   #preview_1 {position: relative; overflow-x: auto;}
   #preview_1 .tableStructure {width: 640px;}

   footer {padding: 4.5rem;}
   .footInfo > div {float: none;}
   .footInfo > div * {vertical-align: middle; text-align: center; margin: 0 auto 1rem auto; display: block; font-size: 1.8rem;}
}

@media screen and (max-width: 480px) {
    section.main ul.grid li {padding: 1rem;}

    .column dl dd {width: 33.3333%;}
}

@media screen and (max-width: 360px) {
    .column dl dd {width: 50%;}
}