@charset "utf-8";
@media screen and (max-width: 890px) {
  
  .h-dial
  ,.head_button .h-form-button{
    display: none;
  }
  .head_button{
    width: auto;
    aspect-ratio:1;
    display: block;
  }
  #hum-button .text{
    display: none;
  }
  .humhum{
    width: 40%;
  }
  
  /*footer*/
  .box-foot-close{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    gap:min(60px,8vw);
  }
    .item-foot_dial .num-set .num{
    font-size: min(48px, calc(100vw / 10));
  }

  
}
@media screen and (max-width: 768px) {
   #container{
    overflow-x: hidden;
  }
  
  /*about*/
  .box-about-content{
    grid-template-columns: 1fr;
    place-items:normal;
    gap:min(40px, 5vw) 0;
  }
  .item-about-intro{
    grid-area: 2 / 1 / 3 / 2;
    
  }
  .item-about-thumb{
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    grid-template-columns: min(400px,60%);
    place-content:center;
    aspect-ratio:auto;
  }
  .item-about-thumb picture{
    border-radius: 100vmax;
    overflow: hidden;
  }
  .item-about-prof{
    grid-area: 3 / 1 / 4 / 2;
    padding: min(30px,5vw);
  }
  /*service*/
  .box-service-titles{
    display: none;
  }
  .serv-detail .in-title{
    font-size: min(24px,calc(100vw/20));
  }
  /*company*/
  .box-compamy-content{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
/*
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    -o-flex-direction: column-reverse;
    flex-direction: column-reverse;
*/
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    gap:min(30px,5vw);
  }
  .corp-thumb{
    position: relative;
    width: 100%;
    left: 0;
    translate:0;
    aspect-ratio:1/.56;
  }
  .company-list{
    width: 100%;
  }
  
  /*contact*/
  .form-item{
    grid-template-columns: 1fr;
    gap:min(20px,4vw);
  }
  .form-item dt{
    padding-right: 0;
    padding-top: 0;
  }
  
  /*access*/
  .foot-access-blc{
    grid-template-columns: 1fr;
  }
  .box-access-map{
    grid-area: 2 / 1 / 3 / 2;
    aspect-ratio:1/.38;
  }
  .box-access-root{
    grid-area: 1 / 1 / 2 / 2;
    
  }
  /*footer*/
  

}

@media screen and (max-width: 480px) {
  #hum-button{
    aspect-ratio:1;
    height: min(96px, 15vw);
  }
  .h-logo .site-title .sub{
    font-size: min(12px,2.5vw);
  }
  .h-logo .site-title .main{
    font-size: min(21px,calc(100vw/18));
  }
  .hero-main{
    height: auto;
    aspect-ratio:1/1.4;
  }
  .hero-main_inner{
    align-content: center;
    gap:min(20px,4vw);
    padding-top: min(62px,15vw);
  }
  .hero-main::before{
    background-image: url("../images/wall/hero_sp.png");
    mask-image: url("../images/wall/mask_hero_sp.png");
    -webkit-mask-image: url("../images/wall/mask_hero_sp.png");
  }
  .hero-image{
    position:relative;
    width: 85vw;
    grid-area: 2 / 1 / 3 / 2;
    margin-left: auto;
    bottom: auto;
  }
  .hero-title{
    grid-area: 1 / 1 / 2 / 2;
  } 
  .hero-title .sub{
    font-weight: 600;
  }
  /*news*/
  .item-acv-post{
    grid-template-columns: 1fr;
    gap:5px;
  }

  /*about*/
  .serv-detail::before{
    opacity: .8;
  }
  /*service*/
  .serv-detail{
    padding-left: min(65px,5vw);
    padding-bottom: min(100px,35vw);
  }
  /*support*/
  .support-table{
    min-width:780px; 
    font-size: min(14px,3.2vw);
  }
  .support-table > tbody > tr > th{
    font-size: min(14px,2.8vw);
  }
  /*company*/
  .company-list > div{
    grid-template-columns:6em auto;
  }
  .company-list > div .history{
    grid-template-columns: 1fr;
  }
  .company-list > div .history dd{
    padding-left: 1em;
    line-height: calc(20/14);
  }
  /*footer*/
  .foot-nav{
    width: min(350px,100%);
    margin-left: auto;
    margin-right: auto;
    gap:.5em 0;
  }
  .foot-nav li{
    width: 50%;
  }
  .foot-nav li:not(:first-child)::before{
    content: none;
  }
  .foot-nav li a{
    padding: .5em;
    display: block;
  }
}