@charset "UTF-8";


.middle_menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0px;
    font-weight:bold;
    font-size: 1rem;
    letter-spacing: -.5px;
    font-family:Calibri, Helvetica Neue,Arial, sans-serif;
}

.middle_menu-item {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.middle_menu-item a {
  padding: 60px 0 20px 0;
  position: relative;
  text-decoration: none;
  display:flex;
  align-items: center;
}


.middle_submenu {
  position: absolute;
  width: 1200px;
  bottom: -41px;
  height: 0px;
  padding :30px 0 10px 0;
  left: 0;
  list-style: none;
  margin-left: -270px;
  z-index: 10;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px); /* 下から少しずつ */
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: flex; /* 最初からflexにしておく */

}

/** 上のメニューをホバーした時の動作 **/
.middle_menu-item:hover .middle_submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


.middle_submenu a{
    padding: 20px 18px;
    margin-top: -34px;
    align-items: initial;
    font-family:  "游ゴシック",'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif;
}

.middle_menu_item{
    display: flex;
    margin-left: .75em;
}

/** メニューの縦棒  **/
.middle_menu_item::after{
    display: block;
    width: 2px;
    margin-left: .75em;
    background-color: black;
    content: "";
}
.middle_menu_item2{
    display: flex;
    margin-left: .75em;
}

/** ホバー時の下メニューの背景  **/
.middle_submenu::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.87);
  z-index: -1;        /* リンクの下に表示 */
  border-bottom: solid 1px #ccc;
  border-top: solid 1px #ccc;
}



/* アンダーライン */
.middle_menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 3px;
  background: #A01559;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* hover中は中央から左右へ広がる */
.middle_menu-item.hovering::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* hover解除で中央に向かって縮む */
.middle_menu-item.leaving::after {
  transform: scaleX(0);
  transform-origin: right;
}