#navi { width:100%; height:60px; background-color:#FFF; position:fixed; top:0; left:0; z-index:999; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);}
@media screen and (min-width:768px) {
#navi {  box-shadow:none; background:none; }
}
#navi input { display:none; }
header { height:60px; display:block; z-index: 10;}
#navi .navimenu_wrap .menu-left .companylogo { width:120px;  }



@media screen and (min-width:768px) {
  header { width:90%; }
  #menu li a.current { background:#FDF400; color:#000; display:block;}
}
@media screen and (min-width:1301px) {
  header { width:100%; height:80px; display:flex; align-items:center; background:#fff; /*position:fixed;*/}
  #navi { width:1100px; margin:0 auto; display:flex; align-items:center; top:initial; left:50%; transform: translateX(-50%); position:absolute; border-bottom:0; padding:10px 0; }
  #navi .navimenu_wrap .menu-left .companylogo { width:70px; height:48px; margin:0; }
  #navi .navimenu_wrap .menu-left .companylogo span { font-size:14px; line-height:48px; }
  #navi .navimenu_wrap .menu-left .companylogo img { margin:5px 0 0 0;height:42px;}
  #menu { flex:1; }
  #navi .navimenu_wrap { width:100%; margin:0 auto;max-width: 1280px; }
}

.menu-left img.companylogo { width:auto; height:43px; margin-top:5px; }


.menu-left { float:left; }
.menu-left img { vertical-align:middle; margin-left:20px; }
#menu {float:right; margin-right:10px; }
#menu > li { float:left; }
#menu > li a { width:100%; float:left; line-height:60px; font-size:16px; padding-left:2.5%; }
#menu > li a.current { width:100%; color:#137CD3; }
#menu-navibtn { display:none; cursor:pointer; cursor:hand;}
@media screen and (min-width:1301px) {
  #menu { margin-right:3px; display:flex; align-items:center;}
  #menu > li { margin-left:17px; position:relative; line-height:1.2em; }

  #menu > li a { width:auto; line-height:1.2em; padding-left:0; }
  #menu li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #FDF400;
    z-index: -1;
    transition: width 0.4s ease; 
  }
  #menu > li a.current { color:#000; }
  
  /* ホバー時に左から右へ背景が伸びる */
  #menu li a:hover::before {
    width: 100%;
  }
  #menu li a:hover { color:#000; }

}

@media screen and (max-width:1300px) {
  #menu {display:none; }
  .menu-left { /*height:72px; */ margin:8.5px 0; display:flex; align-items: center; }
  #menu li { width:100%; height:auto; position:relative; border-bottom:1px solid #707070; white-space:nowrap; }
  #menu li:last-child { border-bottom:0; } 
#menu li.inline_pc { display:none; }
  #menu li.bordernone { border-bottom:0; margin-right:10px;}
  #menu > li .pd { display:inline-block; width:100%; }
  /*#menu li a { display: inline-block; }*/
  #menu li a.button_news { width:100%; }
  #menu li:first-child { border-top: 1px solid #707070; border-bottom: 1px solid #707070; }
  #menu li i { padding: 0px 6px ;}
  #menu-navibtn:checked ~ #navi { height:100%; position:fixed; overflow-y:scroll; overflow-x:hidden; z-index:20; background:#fff; }
}
@media screen and (min-width:1301px) { 
  .menu-left { width:234px; padding: 10px 0; }
  #menu li.inline_pc { display:block; }
    #menu li.menu_top { width:52px; }
}

.menu_contact { width:100%; height:70px; border-radius:35px; background: #FDF400; color:#137CD3; display:flex;align-items: center; justify-content: center; margin-top:30px;}
.menu_contact small {  color:#137CD3; font-size:16px; font-weight:bold; letter-spacing:0.1em; }
.menu_contact img.inline_sp { display:block; margin-right:20px; }
.menu_contact img.inline_pc { display:none; }
@media screen and (min-width:1301px) { 
  .menu_contact {width:64px;height:64px;border-radius:32px;display: flex;flex-direction: column; font-size: 13px;line-height:1;  align-items: center;       /* 横方向（左右）中央揃え */
  justify-content: center;}
  .menu_contact small {
    display: block;
    text-align: center;
    margin-top: 4px; /* 画像との間に少し余白 */
    font-size: 11px; 
    line-height:auto; 
   font-size:12px; 
   font-weight:normal; 
   letter-spacing:0; 
  }
  
  .menu_contact img {
    width: 28px;
    height: auto;
    display: block;
  
  }
  .menu_contact img.inline_sp { display:none; }
  .menu_contact img.inline_pc { display:block; margin-top:4px; }
}



#menu li a.menu_contact:hover::before { background:none; }
#menu li a.menu_contact::before { content:none; }
#menu li a.menu_contact { transition: background-color 0.4s ease, color 0.4s ease; margin-top:30px;}
@media screen and (min-width:1301px) { 
  #menu li a.menu_contact { width:64px; margin-top:0.5px; }
  #menu li a.menu_contact:hover { background:#EBF6FF; color:#137CD3; }
#menu li a.menu_contact:hover small { color:#137CD3; }
}



@media screen and (max-width:1300px) {
  #menu-navibtn:checked ~ * #menu { width:90%; margin:0 auto; display: block; float:none; }
  #menu-navibtn:checked ~ * #menu > li {max-height: inherit;overflow-y: visible; position:relative; }
  
  #menu > li ul {line-height: 50px;}
  #menu > li > ul {padding: 0;}
  #menu li ul li {display: none;}
  #menu > li > label:hover {cursor: pointer;cursor: hand;}
  #menu li ul {position: static;display: inline;}
  #menu > li > ul {margin-left: initial;}
  #menu ul li:last-child {border-bottom: none;}
  #menu > li > ul li {border-left: 1px solid #FFF;border-right: 1px solid #FFF;}
  #menu li ul li ul {top: inherit;left: 0;}
  #menu input[type="checkbox"]:checked ~ label ~ ul > li {max-height: inherit;overflow-y: visible; display: block;}
  .angletoggle:before {content: "\f107";}
  #navi input[type="checkbox"]:checked ~ label .pd .angletoggle:before {content: "\f106"; }

  #navi #navibtn { display:block; position:absolute; top:10px; right:20px;}
  #navibtn span { width:36px; height:36px; display:block;}
  #navibtn span span { display:block; overflow:hidden; width:1px; height:1px;}
  #navibtn span span::before,
  #navibtn span span::after,
  #navibtn span::after { position: absolute;content:"";width:36px; height:1px;background-color:#000;}
  #navibtn span span::before {top:8px;}
  #menu-navibtn:checked ~ #navi label#navibtn span span::before { top:18px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); }
  #navibtn span::after { bottom:5px; }
  #menu-navibtn:checked ~ #navi label#navibtn > span::after { bottom:18px;transform: rotate(-135deg); -webkit-transform:rotate(-135deg); }
  #navibtn span span::after { top:19px; left: 0;}
  #menu-navibtn:checked ~ #navi label#navibtn span span::after { display: none;}
}
@media screen and (min-width:1301px) {
  #navi #navibtn {display: none;}
}