/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

	
}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

   /* mobile navigation
   -------------------------------------------------------------------- */
   header .nav-wrap {
      font-size: 11px;
      background: transparent !important;
      letter-spacing: 1.5px;  
      color: #515968;
      
      position: absolute;
      top: 0;
      right: 0;
   }
   header .nav-wrap > a {
      position: relative;
      top: 21px;
      right: 25px;
      height: 22px;
      float: right;
      display: block;
      vertical-align: middle;
      cursor: pointer;
   }

   header .nav-wrap > a span, header .nav-wrap > a span:before, header .nav-wrap > a span:after {
      height: 2px;
      width: 25px;
      border-radius: 2px;
      display: block;
      content: '';
      background: #204D58;
      position: relative;
   }
   .nav-wrap > a span:before {
      bottom: -8px;
   }
   .nav-wrap > a span:after {
      bottom: -14px;
   }

   /* hide menu panel */
   #nav-wrap ul#nav {
      padding: 24px 36px 48px 36px;
      background: #eee; 
      height: auto;
      display: none;
      clear: both;
      width: auto; 
            
      position: absolute;
      top: 64px;
      right: 30px;           
   }
   
   /* display toggle buttons */
   .no-js #nav-wrap:not( :target ) > a:first-of-type,
   .no-js #nav-wrap:target > a:last-of-type  {
      display: block;
   } 
   .js #nav-wrap a { display: block; }  

   /* display menu panels - no JS*/
   .no-js #nav-wrap:target > ul#nav  {
      display: block;           
   }

   ul#nav li {
      display: block;
      height: auto;      
      text-align: left;
      border-bottom: 1px solid #204D58;
   }
  
   ul#nav li a {  
      display: block;   
      width: auto;  
      margin: 0;
      padding: 0;      
      margin: 12px 0; 
      line-height: 16px; /* reset line-height from 54px */
      border: none;
   }  
   ul#nav li a.sns {
      display: inline-block;
      width: 30px;
      text-align: center;
   }  

   header .logo { margin-right: 36px; }

   #nav-wrap { width: 100%;font-size: 13px; }
   #nav-wrap ul#nav { 
      width: 100%;
      float: none;
      right: 0;  
      margin-right: 0;           
   }


   /* page
   -------------------------------------------------------------------- */
   .about_body_inner {
      max-width: 100%;
      padding: 0 60px 100px;
   }
   .service_box {
      width: 100%;
   }


}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

   .loading {
      background-size: 30px;
   }

   .top_inner {
      background-size: 700px;
   }
   @keyframes bg-slider {
      from {
         background-position: 0 0;
      }
      to {
         background-position: -700px 0;
      }
   } 
   .top-logo {
      width: 320px;
      background: no-repeat center top url(../images/top_title_bg.svg);
      background-size: 320px;
   }
   .top-logo img {
      width: 250px;
      margin: 70px auto;
   }
   #about {
      margin: 410px auto 0;
   }
   #about h1 {
      font-size: 18px;
      margin-bottom: 35px;
   }
   .about_body_inner {
      padding: 0 20px 100px;
   }
   .about_head {
      background-size: 1000px;
      height: 65px;
   }
   .service_box {
      margin: 0 auto 35px 0;
      border-radius: 50px;
      background-size: 215px;
   }
   .service_header {
      display: block;
      height: 215px;
   }
   .service_header .service_header_icon {
      width: 100%;
   }
   .service_header .service_header_icon img {
      width: 120px;
      margin: 0px auto 15px;
   }
   .service_header h2 {
      padding: 25px 0 5px;
      width: 100%;
      text-align: center;
   }
   .service_title_caption {
      font-size: 13px;
      letter-spacing: 1px;
      line-height: 26px;
   }
   .service_title {
      font-size: 20px;
      letter-spacing: 1px;
      line-height: 25px;
   }
   .service_text_box {
      padding: 20px 20px;
      display: block;
   }
   .service_text {
      width: 100%;
      padding: 0;
   }
   .service_text>p.service_text_note {
      font-size: 12px;
   }
   #company {
      padding: 0 20px 90px;
   }
   #company h3 {
      font-size: 20px;
      letter-spacing: 3px;
      margin: 60px auto 40px;
   }
   .company_deco {
      width: calc(100% + 40px);
      height: 15px;
      background-size: 20px;
      margin: 0 -20px;
   }
   .company_data {
      width: 100%;
   }
   .company_data li {
      padding: 15px 0;
   }
   #contact {
      padding: 40px 20px 90px;
   }
   #contact h3 {
      width: 300px;
      height: 90px;
      font-size: 20px;
      line-height: 90px;
      background-size: 84px, 36px;
      background-position: left top, right 40px top;
   }
   .contact_data {
      width: 100%;
   }
   button {
      font-size: 18px;
   }
   #modal-confirm-content {
      padding: 55px 30px 35px;
   }
   .confirm-data dl dt {
      padding: 10px 0;
      min-width: 150px;
   }
}

/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   

   .modal-content {
      width: 100vw;
      height: 550px;
   }
   #modal-confirm-content {
      padding: 55px 15px 35px;
   }
   .confirm-data {
      height: 260px;
   }
   .confirm-data dl dt {
      padding: 10px 0;
      min-width: 130px;
    }
   .confirm-data-comment {
      padding: 15px 0;
   }    
}

/* screenwidth less than or equal 420px - mobile narrow
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) { 


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


}

/* make sure the menu is visible on larger screens
  -------------------------------------------------------------------------- */

@media only screen and (min-width: 900px) {
   
   #nav-wrap ul#nav { display: block !important; }

}