@charset "utf-8";

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
.drop-navi{
  /*  background:#333;
  color:#fff;
  text-align: center;*/
}
/*ナビゲーションを横並びに*/
.drop-navi ul{
  list-style: none;
  display: flex;
  justify-content: center;
  padding: unset;
}
/*2階層目以降は横並びにしない*/
.drop-navi ul ul{
  display: block;
  padding: unset;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
.drop-navi ul li{
  position: relative;
  padding: unset;
}

/*ナビゲーションのリンク設定*/
.drop-navi ul li a,
.drop-navi ul li p{
  display: block;
  text-decoration: none;
  color: var(--body);
  padding: 5px 20px;
  transition: all .3s;
  line-height: unset;
}

.wrapper-list-item {
  height: 45px;
  align-items: center;
  justify-content: space-between !important;
}

@media screen and (min-width: 1536px), screen and (max-width: 1024px) {
  .title-navi {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
  }
}

@media screen and (min-width: 1024px) {
  .divider-header {
    border-bottom: 1px solid #ccc;
    height: 1px;
    width: 100%;
    padding-top: 16px;
  }
}

.drop-navi ul li li a,
.drop-navi ul li li p{
  padding:10px 12px;
}

.drop-navi ul li a:hover,
.drop-navi ul li p:hover{
  color:var(--bluelight);
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
.drop-navi ul li.has-child::before{
  content: '';
  position: absolute;
  right: 5px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
.drop-navi ul ul li.has-child::before{
  content:'';
  position: absolute;
  left:2px;
  top:17px;
  width:6px;
  height:6px;
  border-top: 2px solid #91C8E4;
  border-right:2px solid #91C8E4;
  transform: rotate(45deg);
  z-index:1;
}
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
.drop-navi li.has-child ul{
  /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  top:62px;
  z-index: 4;
  /*形状を指定*/
  background:#F1F0E8;
  width:180px;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all .3s;
}
/* メニューテキスト調整 */
.text-menu {
  font-size: clamp(0.625rem, 3.15vw, 0.9rem);
	line-height: 1.0em;
  margin-top: 0.2em;
}
/*hoverしたら表示*/
.drop-navi li.has-child:hover > ul,
.drop-navi li.has-child ul li:hover > ul,
.drop-navi li.has-child:active > ul,
.drop-navi li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}
/*ナビゲーションaタグの形状*/
.drop-navi li.has-child ul li a{
  border-bottom:solid 1px rgba(173, 196, 206, 0.6);
  color: #4D3C77;
  font-size: 13px;
  font-weight:700;
  transition:all 0.5s ease-in;
}
.drop-navi li.has-child ul li:last-child a{
  border-bottom:none;
}
.drop-navi li.has-child ul li a:hover
{
  background:#3577CA;
  color: #fff;
  transform:scale(1.0, 1.1);
}
.drop-navi li.has-child ul li a:active {
  animation: linkclick2 0.2s;
}
/*==3階層目*/
.drop-navi li.has-child ul li p {
  border-bottom:solid 1px rgba(173, 196, 206, 0.6);
  color: #4D3C77;
  font-size: 13px;
  font-weight:700;
  transition:all 0.5s ease-in;	
}
/*3階層目の位置*/
.drop-navi li.has-child ul ul{
  top:0;
  left:182px;
  background:#66ADF5;
}

.drop-navi li.has-child ul ul li a:hover,
.drop-navi li.has-child ul ul li a:active{
  background:#448ED3;
}


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

@media screen and (max-width:1024px){
.drop-navi{
    padding: 0;
  }

.drop-navi ul{
    display: block;
  }

  .drop-navi li.has-child ul,
.drop-navi li.has-child ul ul{
    position: relative;
  left:0;
  top:0;
  width:100%;
  visibility:visible;/*JSで制御するため一旦表示*/
  opacity:1;/*JSで制御するため一旦表示*/
  display: none;/*JSのslidetoggleで表示させるため非表示に*/
  transition:none;/*JSで制御するためCSSのアニメーションを切る*/
  }

  .drop-navi ul li a,
.drop-navi ul li p{
  border-bottom:1px solid #ccc;
  }

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

.drop-navi ul li.has-child::before{
  left:5px;  
  }

.drop-navi ul ul li.has-child::before{
    transform: rotate(135deg);
  left:5px;
  }

.drop-navi ul li.has-child.active::before{
    transform: rotate(-45deg);
  }

}