@charset "UTF-8";

/* --- 共通設定 --- */
.floating-nav {
  position: fixed;
  z-index: 9999;
  display: flex;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: opacity 0.3s;
}

.nav-item:hover {
  opacity: 0.8;
  color: #fff;
}

.open-campus {
  background-color: #01afd1;
}

.line-official {
  background-color: #00B900;
}

/* --- PC表示 (768px以上) --- */
@media screen and (min-width: 768px) {
  .floating-nav {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    /* 右端にピタッとくっつけるための設定 */
    align-items: flex-end;
  }

  .nav-item {
    /* 初期状態の幅 */
    width: 120px;
    padding: 20px 10px;
    flex-direction: column;
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.4;

    /* テキストが折り返さないように固定 */
    white-space: nowrap;
    overflow: hidden;

    /* 左側だけ斜めにカット */
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);

    /* 伸びるアニメーションの設定（widthを対象にする） */
    transition: width 0.3s ease, background-color 0.3s ease;
  }

  /* ホバーした時に「伸びる」 */
  .nav-item:hover {
    width: 140px;
    /* ここでお好みの長さに伸ばす */
    /* clip-pathも伸びた幅に合わせて維持されます */
  }
}

/* --- スマホ表示 (767px以下) --- */
@media screen and (max-width: 767px) {
  .floating-nav {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    flex-direction: row;
    /* 横並び */
  }

  .nav-item {
    flex: 1;
    /* 均等に分割 */
    height: 100%;
    font-size: 16px;
    gap: 8px;
  }
}