@charset "utf-8";
/*========= ドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/

#header nav {
  background: #333;
  color: #fff;
  text-align: center;
}

#header nav ul li {
  /*font-size: 90%;*/
  margin-bottom: 0;
  flex: none;
  padding-left:0;
  text-indent:0; 
}

/*ナビゲーションを横並びに*/

#header nav ul {
  /*2階層目の基点にするためrelativeを指定*/
  position: relative;
  list-style: none;
  display: flex;
  justify-content: center;
}

/*2階層目以降は横並びにしない*/

#header nav ul ul {
  display: block;
}

/*ナビゲーションのリンク設定*/

#header nav ul li a {
  /*矢印の基点にするためrelativeを指定*/
  position: relative;
  display: block;
  text-decoration: none;
  color: #999;
  padding: 15px 45px;
  transition: all .3s;
}

#header nav ul li li a {
  padding: 20px;
}

#header nav ul li a:hover {
  color: #fff;
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/

#header nav ul li.has-child>a::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(135deg);
}

/*==2階層目以降の画像設定*/

#header nav ul li.has-child img {
  /*max-width: 100%;
  height: auto;
  transition: all .5s;
  vertical-align: bottom;*/
  height: 0%;
}

/*hoverしたら画像拡大*/

/*#header nav ul li.has-child img:hover {
  transform: scale(1.2);
}*/

/*#header nav ul li.has-child dt{
  overflow: hidden;
  height: 20vh;
  margin:0 0 20px 0;
}*/

/*@media screen and (max-width:1200px){
#header nav ul li.has-child dt{
  height: 12vh;
}
  
}*/

/*== 2層目の設定 */

#header nav li.has-child ul {
  /*絶対配置で位置を指定*/
  position: absolute;
  left: 15%;
  top: 45px;
  z-index: 4;
  /*子要素を横並びに*/
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /*形状を指定*/
  background: #888;
  width: 60%;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/

#header nav li.has-child:hover>ul {
  visibility: visible;
  opacity: 1;
}

/*各ナビゲーション横幅*/

#header nav li.has-child ul li {
  /*width: 20%;*/
}

/*ナビゲーションaタグの形状*/

#header nav li.has-child ul li a {
  color: #fff;
}

#header nav li.has-child ul li a:hover, #header nav li.has-child ul li a:active {
  background: #3577CA;
}

#header nav li.has-child ul li dl {
  margin:0 5px;
}

/*==768px以下の形状*/

@media screen and (max-width:768px) {
  #header nav ul {
    display: block;
  }
  #header 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のアニメーションを切る*/
  }
  #header nav li.has-child ul li {
    width: 100%;
    text-align: left;
    padding: 2% 3% 2%;
  }
  #header nav li.has-child ul li dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: 0;
    margin-block-end: 0;
  }
  /*#header nav li.has-child ul li dt{
    width:30%;
    height: auto;
    margin: 0;
  }*/
  #header nav li.has-child ul li dd {
    width: 64%;
  }
  #header nav li.has-child ul li dd::before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    padding-right: 0.5em;
  }
  #header nav ul li a {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  #header nav ul li li a {
    padding: 0;
  }
  /*矢印の位置と向き*/
  #header nav ul li.has-child>a::before {
    top: 17px;
    left: 20px;
    transform: rotate(135deg);
  }
  #header nav ul li.has-child.active>a::before {
    transform: rotate(-45deg);
  }
}