/*
	 common.js 対応css
*/

/*------------------------------------------------------------
スマートフォン（768px）以下の場合、アコーディオンメニューを開閉する
-------------------------------------------------------------*/

.AccTitleMenu {
  position: relative;
}

.AccTitleMenu::after {
  color: #ccc;
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  font-size: 14px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 〜768px：SP横
------------------------------ */
@media screen and (max-width:768px) {

  .AccTitleMenu::after {
    content: "\2b";
  }

  .AccTitleMenu.open::after {
    content: "\f068";
  }

}


/*------------------------------------------------------------
すべてのビューポートでaccordionメニューを実装する。
-------------------------------------------------------------*/

.AccTitleMenu_full {
  position: relative;
  padding-left:20px;
  cursor: pointer;
}

.AccTitleMenu_full::before {
  color: #ccc;
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  font-size: 14px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

  .AccTitleMenu_full::before {
    content: "\2b";
  }

  .AccTitleMenu_full.open::before {
    content: "\f068";
  }



/*------------------------------------------------------------
jet-hamburger-panel__toggle のカスタムjsとの連携
-------------------------------------------------------------*/

.jet-hamburger-panel__toggle{
  z-index: 99999;
}

div.costom_menu_btn {
position: relative;
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}

.open-state div.costom_menu_btn{
  border: 0px solid #ccc;
}

div.costom_menu_btn::after{
  position: absolute;
  color: #ccc;
  letter-spacing: 0.2em;
  bottom:-16px;
  content: "MENU";
  display: block;
  font-size: 11px;
}

/* 三本線のスタイルを決める */
div.costom_menu_btn span {
display: block;
width: 30px;
height: 4px;
background: #ccc;
position: absolute;
left: 4px;
transition: all 0.5s ease;
}

/* 線の縦位置の調整 */
.bar1 {
top: 7px;
background: #ccc;
}
.bar2 {
top: 17px;
background: #ccc;
}
.bar3 {
bottom:7px;
background: #ccc;
}

/* フロントページでは配色を変更する */
#FrontPage div.costom_menu_btn{
  border: 1px solid #191919;
}
#FrontPage .open-state div.costom_menu_btn{
  border: 0px solid #191919;
}
#FrontPage div.costom_menu_btn::after{
  color: #191919;
}
#FrontPage div.costom_menu_btn span {
  background: #191919;
}
.bar1,.bar2,.bar3 {
  background: #191919;
}


/*
ハンバーガーメニューがクリックされたら
上の線を真ん中に移動させて45℃回転
*/
.bar1.open {
top: 20px;
transform: rotate(45deg);
background: #cccccc;
}
/*
ハンバーガーメニューがクリックされたら
真ん中の線は透明化して見えないようにする
*/
.bar2.open { 
  opacity: 0; 
  background: #cccccc;
}

/*
ハンバーガーメニューがクリックされたら
下の線は真ん中に移動させて-45℃回転
*/
.bar3.open {
top: 20px;
transform: rotate(-45deg);
background: #cccccc;
}