/* ==========================================================================
    navi-v2.css
    マイページ左サイドナビ（btc-navi__container）の再スキン版
    - サイト共通トーン：アクセント #008075（ティール）／カード背景 #f1f1f0
    - フォント：見出し Zen Kaku Gothic New／本文 Noto Sans JP
    - 各メニューにアイコン（currentColorで着色）を追加
    - 現在地ページをアクティブ状態（背景＋左ボーダー＋文字色）で視覚化
   ========================================================================== */

.btc-navi__container {
  display: block;
  width: 240px;
  line-height: 1;
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
}

.btc-navi__container .btc-navi__group {
  margin-bottom: 40px;
}

.btc-navi__container .btc-navi__group:last-of-type {
  margin-bottom: 0;
}

.btc-navi__container .btc-navi__group-title {
  padding-bottom: 14px;
  margin: 0 0 4px;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #008075;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 2px solid #008075;
}

.btc-navi__container .btc-navi__group-subtitle {
  display: inline;
  margin-left: 4px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: #666666;
  letter-spacing: 0.02em;
}

.btc-navi__container .btc-navi__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.btc-navi__container .btc-navi__item {
  border-bottom: 1px solid #e5e5e0;
}

.btc-navi__container .btc-navi__item:last-child {
  border-bottom: none;
}

/* .btc-mypage-index__line-* は line_button/pc-mypage-line_connect.html が
   本文エリア（pc-mypage-index.css）と共有しているクラス。
   サイドナビ内に表示される際は .btc-navi__link 等と同じ見た目にする。 */
.btc-navi__container .btc-navi__link,
.btc-navi__container .btc-mypage-index__line-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 10px 13px 10px;
  line-height: 1.4;
  font-size: 14px;
  font-weight: 500;
  color: #2d2d2d;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btc-navi__container .btc-navi__icon,
.btc-navi__container .btc-mypage-index__line-icon {
  flex: none;
  width: 19px;
  height: 19px;
  fill: currentColor;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.btc-navi__container .btc-navi__label,
.btc-navi__container .btc-mypage-index__line-label {
  flex: 1;
  min-width: 0;
}

/* 元デザインにあった右端の「>」相当の矢印
   （フォント文字はグリフごとに描画位置の余白が異なりアイコンと高さがズレるため、
    アイコンと同じ「純粋な図形」としてborder+rotateで描画し、ピクセル単位で位置を揃える） */
.btc-navi__container .btc-navi__link::after,
.btc-navi__container .btc-mypage-index__line-link::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  transform: rotate(45deg);
  transition: border-color 0.2s ease;
}

.btc-navi__container .btc-navi__link:hover::after,
.btc-navi__container .btc-mypage-index__line-link:hover::after {
  border-color: #008075;
}

.btc-navi__container .btc-navi__link--active::after {
  border-color: #008075;
}

/* ホバー時：控えめにティールへ寄せる */
.btc-navi__container .btc-navi__link:hover,
.btc-navi__container .btc-mypage-index__line-link:hover {
  background-color: #f6f8f7;
  color: #008075;
}

.btc-navi__container .btc-navi__link:hover .btc-navi__icon,
.btc-navi__container .btc-mypage-index__line-link:hover .btc-mypage-index__line-icon {
  opacity: 1;
}

/* --- 現在地ページ（アクティブ状態） --- */
.btc-navi__container .btc-navi__link--active {
  background-color: #eaf3ec;
  border-left-color: #008075;
  color: #008075;
  font-weight: 700;
}

.btc-navi__container .btc-navi__link--active .btc-navi__icon {
  opacity: 1;
}