@charset "utf-8";

#sh_aside{display: none; border-bottom:1px solid #e1e1e1}
#sh_snb{display:table;overflow:hidden;margin:0 auto;padding-right:18px}
#sh_snb li{float:left;margin-left:3px}
#sh_snb li a{display:block;position:relative;height:60px;padding:0 28px;line-height:60px;color:#222;letter-spacing:-.2px;font-size:16px;-webkit-transition:all .3s;transition:all .3s;font-family:var(--e-font),var(--k-font)}
#sh_snb li a:after{display:block;content:"";position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:0;height:3px;background-color:var(--primary)}
#sh_snb li.snb_on a{color:#222;font-weight:600}
#sh_snb li.snb_on a:after{width:100%}

.CUSTOMER #sh_snb li:nth-child(n + 4){display:none;}



.template-navi {
    border-bottom: 1px solid #ddd;
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 10;
    /*backdrop-filter: blur(4px);*/
  }
  .template-navi-list {
    width: 100%;
    height: 48px;
    margin: 0px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .template-navi-list > li {
    float: left;
    height: 50px;
    position: relative;
  }
  .template-navi-list > li > a {
    border-right: 1px solid #ddd;
    width: 100%;
    padding: 0 20px;
    color: #333;
    font-size: 17px;
    font-weight: 500;
    line-height: 3;
  }
  .template-navi-list > li:first-child {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
  .template-navi-list > li a:nth-child(2) {
    padding-left: 0;
  }
  
  .template-navi-list > li > a > span {
    margin-right: auto;
    padding-left: 10px;
    line-height: 50px;
  }
  .template-navi-list > li > .template-more {
    float: right;
  }
  .template-navi-list > li:first-of-type > a {
    border-right: 0;
  }
  .template-sub-menu01 {
    width: 285px;
    cursor: pointer;
  }
  .template-sub-menu02 {
    width: 300px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: #57af4c;
  }
  .template-sub-menu01 a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
  }
  .template-sub-menu01 a img {
    float: right;
    margin-top: 25px;
  }
  .template-sub-menu02 a {
    box-sizing: border-box;
    display: block;
    color: #fff !important;
  }
  
  .template-sub-menu02 span {
    letter-spacing: -0.5px;
  }
  
  .template-sub-menu02 a img {
    float: right;
    margin-top: 25px;
  }
  .template-navi-depth01 {
    display: none;
    background-color: white;
    box-sizing: border-box;
    top: 60px;
    position: absolute;
    z-index: 1;
  }
  .template-navi-depth01.active {
    display: block;
  }
  .template-navi-depth01 > li {
    width: 241px;
    border: 1px solid #eee;
    border-top: 0;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .template-navi-depth01 > li > a {
    line-height: 3;
    color: #333;
    font-size: 15px;
    display: block;
    letter-spacing: -0.5px;
  }
  .template-navi-depth01 > li:hover > a {
    color: #57af4c;
  }
  .template-navi-depth02 {
    display: none;
    background-color: white;
    box-sizing: border-box;
    top: 50px;
    position: absolute;
    z-index: 1;
  }
  .template-navi-depth02.active {
    display: block;
  }
  
  .template-navi-depth02 > li {
    width: 300px;
    border: 1px solid #eee;
    border-top: 0;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .template-navi-depth02 > li > a {
    line-height: 1.4;
    font-size: 15px;
    color: #333 !important;
    display: block;
    padding: 12px 0;
    letter-spacing: -0.5px;
  }
  .template-navi .template-navi-depth02 > li:hover > a {
    color: #57af4c !important;
  }

  @media (max-width:768px){
    .template-navi-depth02, .template-navi-depth01{top: 44px; width: 100%;}
    .template-navi-list > li:first-child{display: none;}
    .template-navi-depth02 > li > a, .template-navi-depth01 > li > a{font-size: 12px; padding: 0;}
    .template-navi-depth02 > li, .template-navi-depth01 > li{width: auto; padding: 8px;}
    
    
    .template-navi-list{height: 40px;}
    .template-navi{height: 40px;}
    .template-navi-list > li{height: 40px;}
    
    .template-navi-list > li > a{font-size: 12px !important;}
    .template-navi-list > li > a > span{line-height: 40px;}
    .template-navi-depth01 > li > a{line-height: normal;}
    .template-sub-menu01 a img, .template-sub-menu02 a img{margin-top: 18px;}
    .template-navi-list > li > a{border-right: none;}



  }