@charset "utf-8";

@media screen and (max-width: 800px) {
  /*************************
  * default
  *************************/

  /*************************
  * rayout
  *************************/
  .col2,.col3,.dl_grid,.form_area{grid-template-columns: 1fr; }
  .sec_box{padding-left: 2.5vw;padding-right: 2.5vw;}
  .col3{place-items:center;}
  /*************************
  * header
  *************************/
  .h_image{grid-row: 2;padding-top: 4rem;}
  nav.nav_menu{
    grid-row: 1;
    position: fixed;
    height: 3rem;margin-bottom: 0;
  }
  .triger_box{
    display: grid;
    grid-template-rows:1fr 1fr 1fr;grid-template-columns: 1fr;
    width: 2rem;height:2rem;
    margin-left:auto;margin-right:0.5rem;
    padding-top: 0.5rem;padding-bottom: 0.5rem;
    grid-row-gap:0.1rem;
    align-items:center;
  }
  .triger_box span{
    display: block;
    background-color: #fff;
    height: 0.2rem;
  }
  .nav_menu_mount{
    display: none;
    opacity: 0;
    position: fixed;
    top:3rem;left:0;
    width: 100%;height:100vh;
    background-color: #e94630;
    place-items:center;
  }
  .nav_menu_list{grid-auto-flow: row;grid-row-gap:0.5rem; }
  .nav_menu_list li{border-bottom: 1px solid #fff;}
  #nav_input:checked ~ .nav_menu_mount {
    opacity: 1;z-index: 1;
    display: grid;
    animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;
  }

  #nav_input:checked ~ .triger_box .btn_bar_top{
    transform: rotate(-45deg);grid-area: 2/1;
    animation:tabAnimX1 ease-in 0.5s ; -ms-animation:tabAnimX1 ease-in 0.5s ;
  }
  #nav_input:checked ~ .triger_box .btn_bar_mid{opacity: 0;}
  #nav_input:checked ~ .triger_box .btn_bar_undr{
    transform: rotate(45deg);grid-area: 2/1;
    animation:tabAnimX2 ease-in 0.5s ; -ms-animation:tabAnimX2 ease-in 0.5s ;
  }
  @keyframes tabAnim{
    0%{opacity:0;}
    100%{opacity:1;}
  }
  @keyframes fadeOut {
    100% {opacity: 1;}
    0% {opacity: 0;}
  }
  @keyframes tabAnimX1{
    0%{transform: rotate(0deg);opacity:0;}
    100%{transform: rotate(-45deg);opacity:1;}
  }
  @keyframes tabAnimX2{
    0%{transform: rotate(0deg);opacity:0;}
    100%{transform: rotate(45deg);opacity:1;}
  }
  .sp_menu_links{
    display:grid;grid-row-gap:1rem;
    place-items:center;
    margin-top: 1.5rem;
  }

}