@charset "UTF-8";

@media only screen and (min-width:1px) and (max-width:980px){
  header .logo {position:relative; width: 100%; top:5px; left:0; padding-bottom: 10px; }
  header .logo img { max-height: 70px; }
  header nav ul{ margin: auto;}
  #header ul li{padding:0px 5px}
  .pc{display:none ;}
  .sp{display: block;}
  .intro {background: url("../../img/main_img.jpeg") no-repeat center top; background-size: 170% ; line-height: 1.8;letter-spacing: 0.2em; font-size: 1.1em;min-height: 300px;display: flex;justify-content: center; /*左右中央揃え*/align-items: center;}
.intro p {padding: 20px; width: 75%;}
h3 span{ padding: 0 50px;font-size: 1.2rem; }
h3 span:before, h3 span:after { width: 50px; height: 1px; background-color: #F7B57F;}
}

@media (min-width: 768px) {
  .bottom-menu {display: none;}
  }

/* -----------------------------------------------
[Media Queries] smart phone
-------------------------------------------------- */

@media only screen and (min-width:1px) and (max-width:768px){
/*---------------------------------▼index.html▼---------------------------------*/

footer {padding-bottom: 100px;}
#g-navi ul{display: flex;}
table {display: block;overflow-x: scroll; font-size: 0.9em; }
.logo_sp {  margin: 0 auto; left:15%; width: 90%;min-height: 300px;z-index: 1000;}
header {min-height: 90px;}
.intro p {padding: 30px;}
#header{ display: none;}
#company dt{ width: 98%;float: none;padding: 1em 0 0 0em; }
#company dd{ margin: 0.1em 0 0.4em 0.1em;padding-top: 0.6em; }
#jigyo ul { display: table;justify-content: center; padding-bottom: 10px;}
#jigyo li {width: 100%; max-width: 450px; text-align: center;min-height: 250px;margin: 10px 5px;padding: 0 0 10px 0; }
#recruit dt{ width: 98%;float: none;padding: 1em 0 0 0em; }
#recruit dd{ margin: 0.1em 0 0.4em 0.1em;padding-top: 0.6em; }
.flex_box{ width: 95%; margin: 10px;}
h3 span:before, h3 span:after { display: none;}

#page-top{display: none;}
}
@media only screen and (min-width:1px) and (max-width:600px){
.footer_menu { display: table;justify-content: center; padding-bottom: 15px;}
.footer_menu div {width: 100%; text-align: left; }
}
@media only screen and (min-width:1px) and (max-width:500px){
.intro { background-size: 100% ;content: ""; width: 100%;line-height: 1.2;letter-spacing: 0.1em;min-height: 250px;background-size: 190% ; font-size:0.7em; }
.intro p {padding: 20px;}
#news dt{ width: 95%;float: none;padding: 0.6em 0 0 0; }
#news dd{ margin: 0.1em 0 0.4em 0em;padding-top: 0.6em;text-indent: 0rem; }
}
@media screen and (max-width:1200px){
  nav ul li.has-child dt{ height: 12vh;} }
  /*== 2層目の設定 */ 
  nav li.has-child ul{ /*絶対配置で位置を指定*/position: absolute;left:5%;top:58px; z-index: 4;/*子要素を横並びに*/display: flex;justify-content: space-between;flex-wrap: wrap;/*形状を指定*/ background:#888; width:90%; /*はじめは非表示*/visibility: hidden; opacity: 0; /*アニメーション設定*/transition: all .3s;}
  /*hoverしたら表示*/
  nav li.has-child:hover > ul{visibility: visible;opacity: 1;}
  /*各ナビゲーション横幅*/
  nav li.has-child ul li{width:20%;}
  /*ナビゲーションaタグの形状*/
  nav li.has-child ul li a{color: #fff;}
  nav li.has-child ul li a:hover,nav li.has-child ul li a:active{background:#3577CA;}
  
  /*==768px以下の形状*/
  @media screen and (max-width:768px){
    nav ul{ display: block;}
    nav li.has-child ul{ position: relative; left:0; top:0;width:100%; visibility:visible;/*JSで制御するため一旦表示*/ opacity:1;/*JSで制御するため一旦表示*/ display: none;/*JSのslidetoggleで表示させるため非表示に*/ transition:none;/*JSで制御するためCSSのアニメーションを切る*/}
    nav li.has-child ul li{width:100%;text-align: left;}
    nav li.has-child ul li dl{display: flex; justify-content: space-between; align-items: center;}
    nav li.has-child ul li dt{ width:30%; height: auto; margin: 0;}
    nav li.has-child ul li dd{width:64%;}  
    nav ul li a{padding: 10px 20px;}
    nav ul li li a{padding: 0;}
  /*矢印の位置と向き*/
  nav ul li.has-child > a::before{top:17px; left:20px; transform: rotate(135deg);}
  nav ul li.has-child.active > a::before{transform: rotate(-45deg);}
  }