#navi { width:100%; height:60px; background-color:#FFF; position:fixed; top:0; left:0; z-index:999; border-bottom:1px solid #000; }
#navi input { display:none; }
header { height:60px; display:block; z-index: 10;}
#navi .navimenu_wrap .menu-left .companylogo { width:140px;  }
#navi .navimenu_wrap .menu-left .companylogo:hover { opacity:0.7; }


/*ラベルに幅を持たせる*/
#menu label[for="menu-parent01"] { width:100%; cursor:pointer; display:block;}
#menu label[for="menu-parent02"] { width:100%; cursor:pointer; display:block;}
#menu label[for="menu-parent03"] { width:100%; cursor:pointer; display:block;}
#menu label[for="menu-0402"] { width:100%; cursor:pointer; display:block;}
#menu label[for="menu-0502"] { width:100%; cursor:pointer; display:block;}
#menu label[for="menu-0601"] { width:100%; cursor:pointer; display:block;}

@media screen and (min-width:1280px) {
  header { width:100%; height:80px; border-bottom:1px solid #000; display:flex; align-items:center; background:#fff; position:fixed;}
  #navi { width:98%; 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: 50px;}
  #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; }
@media screen and (min-width:768px) {

}

.menu-left { float:left; }
.menu-left img { vertical-align:middle; margin-left:20px; }
#menu {float:right; margin-right:10px; }
#menu > li { float:left; line-height:60px; font-size:16px; }
#menu-navibtn { display:none; cursor:pointer; cursor:hand;}
@media screen and (min-width:768px) {
  #menu { margin-right:0; }
}

@media screen and (max-width:1280px) {
  #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.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:10; transition:0.3s}
}
@media screen and (min-width:1280px) { 
  .menu-left { padding: 10px 0; }
}



/*サブメニュー*/
#menu > li > ul { display:none; position:absolute; padding: 0px 20px; background-color:#FFF; /*border-top:1px solid #000; border-bottom:1px solid #000;*/ }
@media screen and (min-width:768px) {
 
}
@media screen and (min-width:1080px) {
  #menu > li > ul { box-shadow: 0px 1px 16px rgba(0,0,0,0.15);}
}
#menu > li > ul li { font-size: 14px; }
#menu > li > ul li a { width:100%; height:100%; display:flex; align-items:center; position:relative; }
#menu > li > ul li a .header_arrow { width:28px; margin-left:10px; position:absolute; right:0; }
#menu > li > ul.back_orange .current { background-color:#EFA734;}
#menu > li > ul.back_pink .current { background-color:#F8C8CE; }
#menu > li > ul.back_green .current { background-color:#A4D3AC; }
#menu > li > ul.back_yellow .current { background-color:#F3CF5E; }
#menu > li > ul.back_blue .current { background-color:#AECFED; }
#menu > li span.current.lightyellow .current { background-color:#f1d5a0; }

#menu > li span.current { color:#EFA734;}
#menu > li span.current.pink {color:#F19CA6; }
#menu > li span.current.green {color:#A4D3AC; }
#menu > li span.current.lightyellow { color:#F3CF5E; }
#menu > li span.current.blue { color:#AECFED; }
#menu > li span.link_orange:hover { color:#EFA734;}
#menu > li span.link_orange:link { color:#EFA734;}


@media screen and (min-width:1280px) { 
  #menu > li { margin-right:20px; cursor: pointer; height: 80px; padding: 10px 0;}
  #menu > li span {cursor: pointer; }
  #menu > li span:hover { opacity:0.7; }
  #menu > li > ul { margin-left: inherit;width:120%;left:-10%; border:0;  margin-top:10px; text-align: center; }
  #menu > li > ul li { width:auto; display:inline-block; padding: 0 30px; vertical-align:top;  float: none; }


  #menu > li > ul.back_orange {  background-color:#EFA734;}/*セイムを知る*/
  #menu > li > ul.back_pink {  background-color:#F8C8CE;}/*想いを知る*/
  #menu > li > ul.back_green {  background-color:#A4D3AC;}/*仕事を知る*/
  #menu > li > ul.back_yellow {  background-color:#F3CF5E;}/*人を知る*/
  #menu > li > ul.back_blue {  background-color:#AECFED;}/*働く環境を知る*/
  #menu > li > ul.back_lightyellow {  background-color:#f1d5a0;}/*採用を知る*/
  
  #menu > li > ul li a {justify-content: center;}
  #menu > li > ul li a .header_arrow { position:relative; right:initial; }
  #menu > li > ul li a.current { color:#fff;}
  #menu > li > ul li a.current .nav_maru { color:#fff;}
  #menu > li > ul li a:hover { color:#fff;} 
  #menu > li > ul li a:hover .nav_maru { color:#EFA734;}
  #menu > li > ul li a .nav_maru { display:none; }

}

@media screen and (max-width:1280px) {
  #menu-navibtn:checked ~ * #menu { width:90%; margin:0 auto; display: block; float:none; transition:0.3s}

  /*#menu-navibtn がチェックされた状態のとき、#menu の li にスタイルを当てる
   間にどんな兄弟要素があっても対象になる（~ * の部分）*/
  #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:2000px) {
  #navi #navibtn {display: none;}
}

.button_entry { width:100%; line-height:48px; border:1px solid #EC841F; text-align:center; border-radius:24px; background:#EC841F; color:#fff; position:relative; transition: background 0.3s ease, color 0.3s ease;  }
.button_entry:visited:hover { color:#fff; background:#EC841F; }
.button_entry,
.button_entry:visited { color:#fff; background:#EC841F;  text-decoration: none;  display: inline-block; }
.button_entry:hover,
.button_entry:visited:hover { color:#EC841F; background: #fff; }
.menu_last { margin-bottom:40px; }
@media (min-width: 768px) and (max-width: 1180px) {
  #menu li.bordernone { width:48%; margin-top:30px; }
  .button_entry { width:100%; height:50px; display:inline-block; }
  .menu_last { margin-bottom:0; }
}
@media screen and (min-width:1280px) {
  #menu li.bordernone { width:initial;  margin-top:initial; margin-right:12px; }
  .button_entry { width:140px; line-height:40px; display:inline-block;}
  .button_news { border:1px solid #000; padding:5px 10px; position:relative; transition: background 0.3s ease, color 0.3s ease;  }
  .button_news:hover { background:#fff; color:#EC841F; border:1px solid #EC841F; }
  .menu_last { margin-bottom:0; }
}


@media screen and (max-width: 1280px) {
  #menu li {position: relative; /* 相対位置にしておく */}
  #menu li label[for^="menu-parent"],
  #menu li label[for^="menu-"] {position: absolute; /* ラベルも相対位置指定 */display: block;top:0;right:0;}
  #menu li label[for^="menu-parent"]::before,
  #menu li label[for^="menu-"]::before {content: "+";font-size: 20px;color: #333; position: absolute;right: 10px; /* 右端からの余白 */ top: 50%;transform: translateY(-50%);}
  #menu li input[id^="menu-parent"]:checked + label::before,
  #menu li input[id^="menu-"]:checked + label::before {content: "−";}
  .nav_maru { font-size:8px; margin-right:5px; }
  #menu input[type="checkbox"]:checked ~ label ~ ul > li a { padding-left:10px; display:flex; align-items:center; }
  #menu input[type="checkbox"]:checked ~ label ~ ul > li .current { width:100%; height:auto; }

  #menu > li > ul.back_orange li .current{  background-color:#EFA734;}/*セイムを知る*/
  #menu > li > ul.back_pink li .current{  background-color:#F8C8CE;}/*想いを知る*/
  #menu > li > ul.back_green li .current{  background-color:#A4D3AC;}/*仕事を知る*/
  #menu > li > ul.back_yellow li .current{  background-color:#F3CF5E;}/*人を知る*/
  #menu > li > ul.back_blue li .current{  background-color:#AECFED;}/*働く環境を知る*/
  #menu > li > ul.back_lightyellow li .current{  background-color:#f1d5a0;}/*採用を知る*/


  /* アニメーション対象要素の中身 */
  #menu li > ul {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease;
  }

  #menu li input[type="checkbox"]:checked ~ label ~ ul {
    max-height: 500px; /* 十分な高さに */
    opacity: 1;
  }


  #menu input[type="checkbox"]:checked ~ label ~ ul > li .current .nav_maru { color:#fff;}
  /*#menu input[type="checkbox"]:checked ~ label ~ ul > li a .nav_maru { color:#EFA734;}*/
  #menu input[type="checkbox"]:checked ~ label ~ ul > li a .header_arrow { width:28px; margin-left:auto; margin-right:5px; }


  

}
@media screen and (min-width: 1182px) {
  #menu input[type="checkbox"]:checked ~ label ~ ul > li a { width:100%; color:#000;  }
  /*#menu input[type="checkbox"]:checked ~ label ~ ul > li .current .nav_maru { color:#EFA734;}
  #menu input[type="checkbox"]:checked ~ label ~ ul > li .current  { color:#EFA734;}*/
  #menu input[type="checkbox"]:checked ~ label ~ ul > li a .header_arrow { width:28px; margin-left:5px; }

}



#navibtn span span::before,
#navibtn span::after,
#navibtn span span::after {
  transition: all 0.3s ease;  /* トランジションを追加 */
}