@charset "utf-8";


.header_wrap { width:100%; height:66px; position:fixed; z-index:999; align-items:center; border-bottom:1px solid #CBCBCB; background:#fff; }
.header_wrap #header {width:100%; text-align:left; margin-bottom:0; padding:16px 2.5%;  display:flex; align-items:center; }
@media screen and (min-width: 768px) {
    .header_all { width:100%; height:80px; }
    .header_wrap { height:80px; display:flex; padding:0; border-bottom:0; }
    .header_wrap #header{ height:80px;justify-content:space-between; margin-bottom:0; text-align:right; background: #fff;box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); }

  }

.nav_links li:empty {display: none;}


.header_wrap #header .header_logo { width:90%; display:flex; align-items:center;}
.header_wrap #header .header_logo img { width:200px; }
.header_wrap #header .header_logo span { font-size:16px; display:inline-block; margin-left:10px; margin-bottom:5px; line-height:35px;}
@media screen and (min-width: 768px) {
    .header_wrap #header .header_logo { width:350px; }
    .header_wrap #header .header_logo img { width:250px; }

}

.nav_links { width:50px; }
.nav_links li { display:none; }
.nav_links li.nav_links_openbtn { display:block; }
@media screen and (min-width:1080px) {
    .nav_links { width:250px; width:475px; display:flex; }
    .nav_links li { width:205px; margin-right:12px; display:block; }
    .nav_links li.nav_links_openbtn { width:auto; }
    .nav_links li .nav_entry_button { width:100%; height:52px; background:#B3212B; color:#fff; display:flex; align-items:center;
      background: linear-gradient(to bottom, #D84A4A, #8F1F24); /* 上明るく、下暗く */}
    .nav_links li .nav_entry_button .nav_arrow { width:26px; height:26px; border:1px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content: center; }
    .nav_links li .nav_entry_button em { font-style: normal; margin-left:23px; margin-right:10px; white-space: nowrap;}
}


.nav_links li .nav_entry_button .nav_arrow{ width:26px; height:26px; overflow:hidden;border-radius: 50%;  }
.nav_links li .nav_entry_button .nav_arrow img { width:12px;}
.nav_links li .nav_entry_button:hover .nav_arrow img {animation: arrowLoop 1s linear infinite;}
.nav_links li .nav_entry_button:hover { background:#000;}
.nav_links li .nav_entry_button {transition: background 0.3s ease; }
/* アニメーション定義：右にスライドして左から再登場 */
@keyframes arrowLoop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  49% {
    transform: translateX(70px);
    opacity: 0;
  }
  50% {
    transform: translateX(-70px);
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}




/*アクティブになったエリア*/
#g-nav { position:relative;   background-color: rgba(0, 0, 0, 0.95);  
    /*mix-blend-mode: multiply;*/ transform: translateX(100%); z-index:9999; background-position:center; color:#fff; }
#g-nav.panelactive{position:fixed;z-index:30;top: 0;width:100%;height: 100vh;overflow:hidden;left:0; transform: translateX(0); /*z-index:999; */}



/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height:auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 768px) {
    #g-nav-list{ height: 100vh;}
}

#g-nav.panelactive #g-nav-list{
     display: flex; 
     flex-wrap:wrap; 
     overflow-y: scroll;
     width:90%; margin:0 5%; 
     height:100vh;
     padding:50px 0;
}
@media screen and (min-width: 768px) {
    #g-nav.panelactive #g-nav-list{ width:100%; margin:0; padding:0; }
}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;
    position:relative;
    z-index: 999;
    top:0;
    left:50%;
    transform: translate(-50%,0);
    margin-top:20px;
    padding-top:20px; 
}
#g-nav ul { width:100%; }
@media screen and (min-width: 768px) {
    #g-nav ul { width:50%; margin:0 auto; }
}

#g-nav ul li { width:90%; text-align:left; display: block; margin:0 5%; text-align:left; }
#g-nav a span { width:100%; display:block; color:#000;}
#g-nav a strong { width:auto; display:inline; font-size:40px; color:#000;  margin-right:20px; }
/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}

}

#g-nav-list .inline_pc { display:none; }
@media screen and (min-width: 768px) {
    #g-nav-list .inline_pc { display:inline-block; }
}



#g-nav.panelactive ul li a {  width:100%; display:inline-block; }
#g-nav.panelactive ul li a.button_more.entry { margin-top:50px; }
@media screen and (min-width: 768px) {
    #g-nav.panelactive ul li a {position:relative;  }
    #g-nav.panelactive ul li a.button_more.entry { width:390px; margin:50px auto 0 auto; display:block; }
    #g-nav.panelactive ul li a:hover {color:#B3212B;  }
    
}

/*リストのレイアウト設定*/
#g-nav li{text-align: center; list-style: none;}
#g-nav a { color: #fff; text-decoration: none; text-transform: uppercase;letter-spacing: 0.1em;display:inline-flex;align-items: center;flex-wrap:wrap; }

#g-nav a:link { color: #fff;}
#g-nav a:visited { color: #fff;}
#g-nav a:active { color: #fff;}

#g-nav.panelactive ul li a.a_entry span { color:#fff; font-size:20px; font-weight:bold; font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#g-nav.panelactive ul li a.a_entry:link { color:#fff; }
#g-nav.panelactive ul li a.a_entry .arrow { width:7px; position:absolute; right:20px; top: 50%; transform: translateY(-50%);}
.a_entry .entry_wrap { width:100%; margin:0 auto;  display:block; align-items:left; }
#g-nav.panelactive ul li:last-child{ border-bottom:0; }
@media screen and (min-width: 768px) {
    #g-nav.panelactive ul li a.a_entry { width:350px; background:#DB262C; padding:15px 0; margin:50px auto 0 auto; color:#fff; display:block; font-weight:bold; position:relative; }

    .a_entry .entry_wrap { width:100%; margin:0 auto;  display:block; align-items:left; }
    #g-nav.panelactive ul li:last-child { border-bottom:initial; }
    
}

#g-nav a span { width:100%; font-size:15px; white-space:nowrap; line-height:1.7em; color:#000; }
#g-nav a span:hover { color:#000; }
@media screen and (min-width: 768px) {

}


#g-nav-list ul li .current:link { color:#D10000; font-size:16px; }
#g-nav-list ul li .current:visited { color:#D10000; font-size:16px; }
#g-nav.panelactive ul li a.spbold { font-size:20px; } 
#g-nav-list ul li:last-child  { margin-bottom:50px; }
#g-nav ul { position:relative; }
#g-nav ul li { width:100%; text-align:left; display: block; margin:0; }

@media screen and (min-width: 768px) {
    #g-nav-list ul li .current:link { font-size:18px; }
    #g-nav-list ul li .current:visited { font-size:18px; }
    #g-nav { display:flex; align-items: center;}
    #g-nav ul { width:100%; display:flex; margin:0 auto; top:0%; left:auto; transform: translate(0,0); }
    #g-nav a strong { width:auto; font-size:50px; line-height:1.2; display:block; transition: all 0.35s; }
    #g-nav a { width:100%; font-size:18px; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.35s; }
    #g-nav.panelactive ul li a.spbold { font-size:18px; }
    #g-nav.panelactive .a_member { width:100%; display:block; margin-bottom:5px; padding:0; }
    #g-nav.panelactive .a_member small { width:auto; display:inline; margin-right:10px; }
    #g-nav.panelactive .a_member img { margin-right:10px;}
} 

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #g-nav.panelactive #g-nav-list{ width:90%; height:auto; margin:0 5% 0 5%; }
}
@media screen and (min-width:1025px) {
  #g-nav.panelactive #g-nav-list{ width:100%; margin:0; }
}



#g-nav-list .entry_pc { display:none; }
#g-nav-list .entry_sp { display:block; margin:10px; }
#g-nav.panelactive ul { margin-top:0px; }
@media screen and (min-width:375px) {
    #g-nav-list .entry_sp {  margin-top:20px; }
    #g-nav.panelactive ul { margin-top:20px; padding-top:0; }
}



.entry_sp img { width:100%; }
#g-nav.panelactive ul { width:100%; display:block; }
#g-nav.panelactive ul li { width:100%; }


@media screen and (max-width:1024px) {
  #g-nav.panelactive ul li  { font-size:16px; margin-bottom:10px; font-family:"Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-weight: 400; }
  #g-nav.panelactive ul { display:flex; flex-wrap:wrap; margin-bottom:30px; }
  #g-nav.panelactive ul li:nth-child(1) { order:1; }/*新卒採用TOP*/
  #g-nav.panelactive ul li:nth-child(2) { order:3; }/*代表メッセージ*/
  #g-nav.panelactive ul li:nth-child(3) { order:8; }/*働く環境*/
  #g-nav.panelactive ul li:nth-child(4) { order:2; }/*中途採用サイトTOP*/
  #g-nav.panelactive ul li:nth-child(5) { order:4; }/*企業理念*/
  #g-nav.panelactive ul li:nth-child(6) { order:9; }/*最新情報*/
  #g-nav.panelactive ul li:nth-child(7) { display:none; }
  #g-nav.panelactive ul li:nth-child(8) { order:5; }/*社員インタビュー*/
  #g-nav.panelactive ul li:nth-child(9) { order:10; }/*地域の取り組み*/
  #g-nav.panelactive ul li:nth-child(10) { display:none;  }
  #g-nav.panelactive ul li:nth-child(11) { order:6; }/*数字で見るアート*/
  #g-nav.panelactive ul li:nth-child(12) { order:11; }/*会社概要*/
  #g-nav.panelactive ul li:nth-child(13) { display:none; }
  #g-nav.panelactive ul li:nth-child(14) { order:7; }/*職種紹介*/
  #g-nav.panelactive ul li:nth-child(15) { order:10; }/*募集要項*/
  #g-nav.panelactive ul li:nth-child(16) { display:none; }
  #g-nav.panelactive ul li:nth-child(17) { display:none;  }
}


@media screen and (min-width: 768px) {
    #g-nav-list .entry_pc { display:block; }
    .entry_pc:hover { opacity:0.7; }
    #g-nav-list .entry_sp { display:none; }
    #g-nav.panelactive div { width:90%; max-width:1080px; display:flex; flex-wrap:wrap; justify-content: space-between;}
    #g-nav.panelactive ul{ margin-bottom:0; }

}

@media screen and (min-width:1080px) {
  #g-nav.panelactive div { width:100%;}
}
#g-nav.panelactive #g-nav-list .nav_wrap { width:100%; }
#g-nav.panelactive #g-nav-list .nav_wrap_left { display:none; }
#g-nav.panelactive #g-nav-list .nav_wrap_right { width:100%; }
@media screen and (min-width:1080px) {
      #g-nav.panelactive #g-nav-list { width:90%; max-width:1080px; margin:15vw auto 0 auto; /*height: 100vh;*/display:block;position:relative; overflow-y: hidden;
      position:absolute; top: 50%;left: 50%; 
      transform: translate(-50%, -50%);}
      #g-nav.panelactive #g-nav-list .nav_wrap_left { width:30%; display:block; text-align:right; }
      #g-nav.panelactive #g-nav-list .nav_wrap_left img { width:250px; }
      #g-nav.panelactive #g-nav-list .nav_wrap_right { width:65%; }
      #g-nav.panelactive #g-nav-list .nav_wrap_right .hmenu { display:flex; flex-wrap:wrap; margin-top:0; padding-top:0; justify-content: space-between;}
      #g-nav.panelactive #g-nav-list .nav_wrap_right .hmenu li { width:30%; margin-bottom:10px; }

}



/*========= ボタンのためのCSS ===============*/
.openbtn span { width:30px; display:block; position:absolute; height:1px; background-color:#000; transition: all 0.4s ease;}
@media screen and (min-width: 768px) {
    .openbtn span { width:32px; background-color:#B3212B; }
}

.openbtn span:nth-of-type(1) {top: calc(50% - 8px); }
.openbtn span:nth-of-type(2) {top: 50%; }
.openbtn span:nth-of-type(3) {top: calc(50% + 8px); }
.openbtn.active { position:fixed;}
.openbtn.active span:nth-of-type(1) {transform: translateY(8px) rotate(-45deg); background-color:#fff; }
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3) {transform: translateY(-8px) rotate(45deg); background-color:#fff; }


.openbtn {width:50px;height:50px;position:fixed;top:5px; right:0; z-index: 99999; border-radius: 35px;display: flex;justify-content: center;align-items: center;cursor: pointer;}
@media screen and (min-width: 768px) {
    .openbtn  { top:15px; right: 10px;}
  }
#openbtn span {width: 30px;display: block;position: absolute;height: 2px;background-color: #000;transition: all 0.4s ease;}
#g-nav.panelactive {z-index: 9998; }
.nav_title { width:100%; display:block; float:left; margin-bottom:15px;}
.nav_title .title_contents { color:#B3212B; font-weight:bold; }
.nav_title .line { width:100%; border-bottom:1px solid #B3212B; display:block; margin:0; }
@media screen and (min-width:1025px) {
    .nav_wrap_right .nav_title { width:100%; margin-bottom:16px; display:flex; justify-content: space-between; align-items: center; } 
    .nav_title .line { width:580px; }
}


#g-nav.panelactive ul.nav_links { display:flex; justify-content: space-between; }
#g-nav.panelactive ul.nav_links li { width:48%; }
#g-nav.panelactive ul.nav_links li a { width:100%; height:50px; background:#B3212B; display:flex; gap: 0.5em;  align-items:center; justify-content: center;margin:0 auto 20px auto; }
#g-nav.panelactive ul li a:hover {color:#B3212B;  }
#g-nav.panelactive ul.nav_links li span.nav_arrow { width:30px; height:30px; border-radius:50%; display:flex; align-items: center; text-align: justify; border:1px solid #fff; }
#g-nav.panelactive ul.nav_links li span.nav_arrow img { width:15px; margin:0 auto; }
@media screen and (min-width: 768px) {
    #g-nav { display:block; }
    #g-nav.panelactive svg.leader_navi { width:60%; position:absolute; left:-5%; top:0; }
    #g-nav.panelactive ul.nav_links { margin-top:0; padding-top:0; }
    #g-nav.panelactive ul.nav_links li a { width:100%; height:88px; display:flex; align-items: center; font-size:26px; margin-right:0; }
    #g-nav.panelactive ul.nav_links li { max-width:340px; width:49%; }
    #g-nav.panelactive ul.nav_links li span.nav_arrow { width:44px; height:44px; }
    #g-nav.panelactive ul.nav_links li span.nav_arrow img { width:20px; }
    #g-nav.panelactive ul.nav_links li a:hover { background:#888888; }
    #g-nav.panelactive ul.nav_links li .nav_entry_button em { margin-left:40px; margin-right:5%; color:#fff; }
    #g-nav.panelactive ul.nav_links li .nav_entry_button em .inline_pc { color:#fff;}
}

#leader-img-container { display:none; }
@media screen and (min-width: 768px) {
  #leader-img-container { display:block; }
}