/* rank.css – SP 子Tab 横排 + ▶ 位置修正 + 指標行背景（Padding=12px & 上方+8px） */
/* ================================
 A) 子Tab（1年/3年/5年）SP横並び
 ================================ */
@media screen and (max-width: 767.9px){
  #rt-section-tab .section__list.section__list-flex{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start;
    align-items:center;
    gap:0 16px;
    margin:8px 0;
  }
  #rt-section-tab .section__list.section__list-flex > li.section__list-link.section__list-item{
    flex:0 0 auto;
    margin-top:0!important; /* 竪並び用 16px を無効化 */
  }
  #rt-section-tab .section__list.section__list-flex a.section__link.section__link-default{
    display:inline-block!important; /* ▶ 擬似要素を維持 */
    white-space:nowrap;
    padding:0;
  }
  #rt-section-tab .section__list.section__list-flex a.section__link.section__link-default::before{
    margin-right:6px!important; /* ▶ と文字の間隔 */
    position:relative!important; /* 垂直位置を微調整 */
    top:-1px!important;
    display:inline-block!important;
  }
}
/* ================================
 B) 指標行：行間を揃える（PC/SP 共通の基準）
 ================================ */
.investment-rank__return,
.investment-rank__sharpe{
  margin-top:4px; /* 既存リズム（SP 基準） */
 /*  font-size:1.4rem; */
  line-height:1.6;
}
@media screen and (min-width:768px){
  .investment-rank__return,
  .investment-rank__sharpe{
    margin-top:8px; /* PC 基準 */
   /* font-size:1.2rem;*/
  }
}
/* ================================
 D) SP：指標行に背景色 + 余白
 - 背景: #F0F4FF
 - Padding: 12px
 - 上方の余白: 既存 4px + 8px 追加 = 12px
 ================================ */
@media screen and (max-width: 767.9px){
  .investment-rank__return,
  .investment-rank__sharpe{
    background:#F0F4FF;
    padding:12px; 
    border-radius:4px; /* 任意。不要なら削除可 */
    margin-top:12px; /* 4px → +8px 追加 = 12px */
  }
}

/* ================================
 E) SP：指標行を左右2カラム表示に（今回追加）
 - 左：指標名＋期間（例：リターン（1年） / シャープレシオ（1年））
 - 右：数値（例：+3.63%）
 ================================ */
@media screen and (max-width: 767.9px){
  /* 容器を横並び（左右2分割）に */
  .investment-rank__return,
  .investment-rank__sharpe{
    display:grid;
    grid-template-columns: 1fr 1fr;    /* 50%｜50% 等分 */
    align-items:center;
    justify-content:space-between; /* 左右に振り分け */
    gap:8px;                       /* 左右の間隔（任意） */
  }

  /* 左右のテキスト（共通） */
  .investment-rank__return-text,
  .investment-rank__sharpe-text{
    margin:0;            
    line-height:1.6;     /* 既存と揃える */
    font-size:1.4rem;    /* 既存と揃える */
    word-break:break-word;
  }

  /* 右カラム（数値）の強調：任意 */
  .investment-rank__return-text:last-child,
  .investment-rank__sharpe-text:last-child{
   /* font-weight:700;     /* 数値を太字に（不要なら削除） */
    text-align:left;     /* 左寄せ */
    min-width:6em;       /* 最低幅（任意） */
  }
}

/* ================================
 F) PC：JSONP の指標列（第3列）を固定幅にする
 ================================ */
@media screen and (min-width: 768px) {
  /* 第1列：順位 */
  .investment-rank__table-head--rank,
  .investment-rank__table-data--rank {
    width: 7.5em;         /* 王冠＋数字＋「位」分の幅を確保 */
    white-space: nowrap;
  }
   /* 第3列*/
  .investment-rank__table-head--metric,
  .investment-rank__table-data--metric {
    
    width: 220px;           /* リターン/シャープレシオ 共通のピクセル値 */
    box-sizing: border-box; /* 幅計算を安定化 */
    white-space: nowrap;    /* 折り返し防止 */
    padding-left: 16px;     /* サイトの既定ヘッダ/セル内側余白に合わせる */
    padding-right: 16px;
  }
}


/*  子タブ: デフォルトは下線あり、アクティブ時は下線なし */
#rt-section-tab .section__list.section__list-flex a.section__link.section__link-default {
  text-decoration: underline;
  text-underline-offset: 2px;
}

#rt-section-tab .section__list.section__list-flex li.is-active > a.section__link.section__link-default,
#rt-section-tab .section__list.section__list-flex li.is-active > a.section__link.section__link-default:hover,
#rt-section-tab .section__list.section__list-flex li.is-active > a.section__link.section__link-default:visited,
#rt-section-tab .section__list.section__list-flex li.is-active > a.section__link.section__link-default:focus,
#rt-section-tab .section__list.section__list-flex li.is-active > a.section__link.section__link-default:active {
  text-decoration: none;
}


/* 子タブ: 非アクティブ時も hover では下線を表示しない */
#rt-section-tab .section__list.section__list-flex li:not(.is-active)
  > a.section__link.section__link-default:hover {
  text-decoration: none;
}