@charset "UTF-8";

/*========= メガメニュー ===============*/

/*==ナビゲーション全体の設定*/
nav {
  display: flex;
  text-align: center;
}

/*ナビゲーションを横並びに*/
nav ul {
  /*2階層目の基点にするためrelativeを指定*/
  /*position: relative;*/
  list-style: none;
  display: flex;
  justify-content: center;
}

/*2階層目以降は横並びにしない*/
nav ul ul {
  display: block;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
  /*矢印の基点にするためrelativeを指定*/
  position: relative;
  display: block;
  text-decoration: none;
  color: #FFF;
  padding: 20px 15px;
  transition: all 0.3s;
}

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

nav ul li a:hover {
  color: rgb(255, 255, 255);
  background-color: #e80000;
}

@media screen and (max-width: 768px) {
  nav ul li a:hover {
    background-color: initial;
  }
  
}

/*==矢印の設定*/

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

/* nav ul li.has-child > a::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0px;
  width: 6px;
  height: 6px;
  z-index: 10;
  /*border-top: 2px solid rgb(28, 28, 28);
    border-right:2px solid rgb(32, 32, 32);
  transform: rotate(135deg);
} */

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

nav ul li.has-child img {
  /*object-fit: cover;*/
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  vertical-align: top;
}

/*hoverしたら画像拡大*/
nav ul li.has-child img:hover {
  transform: scale(1.2);
}

@media screen and (max-width: 768px) {
  nav ul li.has-child img:hover {
    transform: scale(1);
  }
  
}

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

/*右下リンク*/
.all_list a {
  position: absolute;
  right: 40px;
  bottom: 20px;
  color: white;
  text-align: right;
  letter-spacing: 0.2em;
}

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

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

nav li.has-child ul {
  /*絶対配置で位置を指定*/
  position: absolute;
  left: 0%;
  top: calc(100% - 5px);
	pointer-events: none;
	z-index: 4;
  /*子要素を横並びに*/
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  /*形状を指定*/
  background: rgb(36, 36, 36);
  width: 100%;
	max-height: calc(100vh - 70px);
	overflow-y: auto;

  padding: 30px 30px 100px 30px;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all 0.1s;
}
nav li.has-child:hover > ul {
	visibility: visible;
	opacity: 1;
	pointer-events: all;

}

/*各ナビゲーション横幅*/
nav li.has-child ul li {
  width: 20%;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
  color: #FFF;
  font-size: small;
}

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

/*==768px以下の形状*/
@media screen and (max-width: 768px) {
  .nav nav{
    overflow-y: auto;
  }
  nav ul {
    width: 100%;
    display: block;
  }

  nav li.has-child ul {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0%;
    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: flex-start;
    align-items: center;
    gap: 0 20px;
  }
  nav li.has-child ul li dt {
    width: 30%;
    height: auto;
    margin: 0;
  }

  /*テキスト*/
  nav li.has-child ul li dd {
    flex: 1;
    padding-right: 5px;
  }

  nav ul li a {
    color: #fff;
    padding: 30px 20px;
    border-bottom: 1px solid rgb(105, 105, 105);
  }

  nav ul li li a {
    color: rgb(153, 153, 153);
    padding: 0;
  }

  /*矢印の位置と向き*/

  /* nav ul li.has-child > a::before {
    color: rgb(231, 231, 231);
    top: 17px;
    left: 10px;
    transform: rotate(135deg);
  }

  nav ul li.has-child.active > a::before {
    transform: rotate(-45deg);
  } */

  /*右下リンク*/
  .all_list a {
    display: none;
  }

  nav li.has-child ul li a:hover,
  nav li.has-child ul li a:active {
    background: initial;
  }
}