/* CSS Document */

/* サイドメニュー */
.hamburger-nav {
  position: fixed;
  top: 46px; /* 表示開始位置 */
  left: 0px;
  height: calc(100% - 40px); /* メニューの高さ */
  width: 270px;
  background-color: #274a78;
  color: #333;
  transform: translateX(-110%);
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  overflow: auto;
  scrollbar-color: #5c7a99 #274a78;
  scrollbar-gutter: stable
}

/*大きい画面はサイドメニュー固定*/
@media screen and (min-width: 1020px) {
.hamburger-nav {
  transform: initial; /* 継承値初期化 */
  top: 46px;
  left: 0px;
  min-width: 270px;
  background-color: #274a78;
  overflow: auto;
  scrollbar-color: #5c7a99 #274a78;
  scrollbar-gutter: stable
  }
}

.hamburger-nav:hover {
  overflow-y: auto; /* マウスを乗せたらスクロールバー表示 */
}

.hamburger-nav.open {
  transform: translateX(0);
}

.hamburger-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hamburger-nav img {
  vertical-align: middle;
  padding: 0px 5px 3px 0px;
}
.hamburger-nav ul li {
  padding: 9px 0px 9px 12px;
  font-size: 15px
}
.hamburger-nav ul li a {
  color: #fff;
  text-decoration: none;
}
.hamburger-nav ul li a:hover{
	  opacity: .7;
	  cursor: pointer;
}
.hamburger-nav ul li ul {
  display: none;
  padding-left: 2px 0px 2px 2px;
  border-radius: 4px;
  background-color: #5c7a99;
}
.hamburger-nav ul li.open ul {
  display: block;
}

 /* 学生向け・教員向け */
.drawer_nav_item .line {
	font-size: 14px;
    border: 1px solid #5c7a99;
	background-color: #5c7a99;
    padding: 4px 6px;
    margin-bottom: 5px;
    border-radius: 4px;
	display: inline-block;
}


 /* 白線 */
hr.side {
  border: none; /* 元の境界線を削除 */
  height: 1px;
  background-color: #f9f9f9;
  margin: 0 4px 0 0;
}

 /* 下向き矢印 */
.arrow {
  position: relative;
  display: inline-block;
  width: 9.5px;
  height: 5.2px;
  cursor: pointer;
}

.arrow:before,
.arrow:after {  /* arrowの前後に疑似要素をつける */
  content: "";
  position: absolute;
  bottom: 3px;
  left: calc(50% - 0.75px);
  width: 1.5px;
  height: 7px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 50% calc(100% - 0.75px);
}

.arrow:before {
  transform: rotate(45deg);
}

.arrow:after {
  transform: rotate(-45deg);
}

 /* クリックしたら上向き矢印にする */
.drawer_nav_item.open .arrow:before {
  transform: rotate(135deg);
}

.drawer_nav_item.open .arrow:after {
  transform: rotate(-135deg);
}