/**
 * Media Queries
 * 
 * @file           responsive.css
 * @package        hiweb
 * @author         Masato Takahashi
 * @copyright      2016 wwwonder
 * @version        Release: 2.0.0
 * @filesource     wp-content/themes/hiweb/framework/css/responsive.css
 */


  /* ------------------------------------------------------------------------ */
  /* Smaller than standard 1200 (devices and browsers) */
  /* ------------------------------------------------------------------------ */
  @media only screen and (max-width: 1200px) {
  
    .container {
      min-width: initial;
      min-width: auto;
    }
    
  }
  
  
  
  /* ------------------------------------------------------------------------ */
  /* Tablet Portrait size to standard 960 (devices and browsers) / 1. Step */
  /* ------------------------------------------------------------------------ */
  @media only screen and (min-width: 960px) and (max-width: 1200px) {
  
    .container { max-width: 960px; }
    
    .header .logo { margin-top: 25px; }
    
    .header .navigation ul li a { padding: 0 10px; }
    
    .header .navigation ul li.header-sns-icon.twitter-icon { margin-left: 10px; }
    
  }
  
  
  
  /* ------------------------------------------------------------------------ */
  /* All Mobile Sizes (devices and browser) / all under Tablet */
  /* ------------------------------------------------------------------------ */
  @media only screen and (max-width: 959px) {
  
    .container { max-width: 100%; }
    .col {
      margin-left: 0;
      margin-right: 0;
    }
    .col.one,
    .col.two,
    .col.three,
    .col.four,
    .col.five,
    .col.six,
    .col.seven,
    .col.eight,
    .col.nine,
    .col.ten,
    .col.eleven,
    .col.twelve { width:  100%;}
    
    .one-half,
    .one-third,
    .two-third,
    .one-fourth,
    .three-fourth,
    .one-fifth,
    .two-fifth,
    .three-fifth,
    .four-fifth,
    .one-sixth,
    .five-sixth { width: 100%; }
    
    
    /* ------------------------------------------------------------------------ */
    /* 04. Forms
    /* ------------------------------------------------------------------------ */
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    textarea,
    select { width:  100%;}
    
    
    /* ------------------------------------------------------------------------ */
    /* 08. Content */
    /* ------------------------------------------------------------------------ */
    
    .page-wrap { padding: 40px 0; }
    
    .page-wrap .content {
      background-color: #FFF;
      padding: 20px;
      margin-bottom: 30px;
    }

    .page-wrap .content h2.content-title {
      font-size: 2.6rem;
    }
    
    /* ------------------------------------------------------------------------ */
    /* 08.Header */
    /* ------------------------------------------------------------------------ */
    
    .header .logo {
      text-align: center;
      margin: 25px 0 25px 0 !important;
    }
    
    .header .logo img { 
      width: 200px;
      height: 30px;
    }
    
    .header .navigation ul { display: none !important; }
    
    








  .header .menu-toggle-switch { display: block; }





    /* Mobile Grobal Navi */

    .header .mobile-navigation {
      display: block;
      position: absolute;
      top: 0;
      left: -100%;
      background: rgba(0,0,0,0.7);
      width: 100%;
      z-index: 1000;
      transition: left 0.4s ease;
      position: fixed;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
    }


      .header .mobile-navigation > ul {
        width: 80%;
        background-color: #FFF;
        border-top: 30px solid #EEE;
        float: left;
        padding-bottom: 50px;
        list-style: none;
      }

        .header .mobile-navigation > ul > li {
          border-bottom: 1px solid #EEE;
          margin: 0;
        }

          .header .mobile-navigation ul li a {
            color: #000;
          }

          .header .mobile-navigation > ul > li > a {
            display: block;
            padding: 15px;
          }


        .header .mobile-navigation ul li.sub {
          padding: 15px;
        }

        .header .mobile-navigation ul li.sub.index {
          background-color: #EEE;
          padding: 5px 15px;
        }

          .header .mobile-navigation ul li.sub ul {
            margin: 0;
          }

          .header .mobile-navigation ul li.sub ul li {
            display: inline-block;
            margin-right: 10px;
          }







      .header .mobile-navigation .menu-close-switch {
        width: 20%;
        text-align: center;
        margin-top: 20px;
        float: left;
      }

        .header .mobile-navigation .menu-close-switch i {
          font-size: 4.6rem !important;
          color: #FFF;
          cursor: pointer;
        }

























    /* ------------------------------------------------------------------------ */
    /* 9. Home */
    /* ------------------------------------------------------------------------ */
    
    .top-recent-news .news-item .post-meta {
      width: 100%;
      float:none;
      margin-bottom:5px;
    }
    
    
    .schedule-archive-table .schedule-item .post-meta {
      width: 100%;
      float:none;
      margin-bottom:5px;
    }
    
    
    
    /* ------------------------------------------------------------------------ */
    /* 20.Footer */
    /* ------------------------------------------------------------------------ */
    
    .back-to-top{ display: none !important; }
    
    .footer .copyright { text-align: center; }
    
    
    /* ------------------------------------------------------------------------ */
    /* 21. Contactform 7 Specific Styling */
    /* ------------------------------------------------------------------------ */
    
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="password"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="url"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="number"],
    .wpcf7-form input[type="date"] { width: 100%; }
    
    table.responsible th,
    table.responsible td {
      display: block;
      width: 100% !important;
    }
    
    
  }
  
  /* ------------------------------------------------------------------------ */
  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) 2. Step */
  /* ------------------------------------------------------------------------ */
  @media only screen and (min-width: 480px) and (max-width: 959px) {
  
    .container { max-width: 100%; }
    
    .one-half,
    .one-third,
    .two-third,
    .one-fourth,
    .three-fourth,
    .one-fifth,
    .two-fifth,
    .three-fifth,
    .four-fifth,
    .one-sixth,
    .five-sixth { width: 100%; }
    
  }