/* =========================================================
   RANKING（ダークヒーロー・TOP5を縦積み／左右交互／背景固定）
   背景=トップと同じ写真(select_bg.png)＋斜めマスク(SVG・.rank_bg内・固定)／合成はPSD実測をvw化(1vw=19.2px@1920)
   ★重なり合成のため各順位ブロック内は absolute を使用(designedヒーロー=構造的に必要)
   PSD: title Anton280 @118,114 / NO.(91)+digit(303) @131,664 / 王冠85x66 @129,761
        badge 441x60白 @544,663(ZenKaku Black36 italic) / name48 @546,789 / spec30 @544,844
        line441x1 @544,891 / "ranking Therapist"Anton24 @543,909 / 写真394x530 @1022,401 / 1順位高 1082
   ========================================================= */

/* ── ダークページ用ヘッダー：トップ(ヒーロー)と同一挙動 ──
   非スクロール=背景透明(固定背景ヒーローが透ける)／フロート(スクロール固定)=白70%+黒文字(全テーマ)。
   文字色: 黒テーマ=白(暗いヒーロー上) / ore・whi=黒(明るいヒーロー上)。 */
body.page_dark{background:#000;}
body.page_dark .header:not(.is_scrolled){background:transparent;}
body.page_dark .header_logo a{color:var(--c-white);}
body.page_dark .header_open{color:var(--c-white);}
body.page_dark .header::after{display:none;}
body.page_dark .header.is_scrolled .header_logo a,
body.page_dark .header.is_scrolled .header_open{color:#000;}
@media (min-width:769px) and (max-width:1024px){
  .header_logo{left:34.77px;line-height:1;}
  .header_open{left:34.77px;top:16px;line-height:1;}
}
body.page_dark .footer{position:relative;z-index:120;background:#fff;}
body.page_dark .footer_main{background:#fff;}

/* ── ランキング全体枠 ── */
.rank{background:#000;}
.rank_card{display:none;}
.rank_hero{
  position:relative;
  width:100%;
  --cw:calc(100vw - var(--navw));/* ★合成スケールの基準幅=コンテンツ領域(ビューポート-右ナビ幅)。各vwをcalc(--cw*K)化しナビ左端まで埋める。K=元vw/75(1920で同一) */
  --rank-y:max(0px, calc(96px - var(--cw) * 0.07223));
  --rank-pad:36px;
  padding-bottom:80px;
  color:#fff;
}
.rank_bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
}
.rank_bg .hero_bg_svg{width:100%;height:100%;}

.rank_list{
  position:relative;
  z-index:2;
}

.rank_slide{
  position:relative;
  --block-y:calc(var(--rank-pad) - var(--cw) * 0.07223);
  min-height:calc(var(--cw) * 0.57597 + var(--rank-pad) * 2);
}
.rank_slide:first-child{
  --block-y:var(--rank-y);
  min-height:calc(var(--cw) * 0.6482 + var(--rank-y) + var(--rank-pad));
}

/* ── 大見出し(各順位) ── */
.rank_title{
  position:absolute;
  left:calc(var(--cw) * 0.08195);
  top:calc(var(--cw) * 0.07223 + var(--block-y));
  z-index:2;
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:calc(var(--cw) * 0.19444);
  line-height:.975;/* 273px。line-height:1だとRANKINGが下がりすぎ数字と隙間が狭い→PSDのink(THERAPIST'S上端114/RANKING下端636)に合わせる */
  letter-spacing:0;
  color:#fff;
  text-transform:uppercase;/* PSDはAll Caps表示 */
  pointer-events:none;
}
.rank_title_l{display:block;}

/* ── 白バッジ(各順位) ── */
.rank_badge{
  position:absolute;
  left:calc(var(--cw) * 0.37777);
  top:calc(var(--cw) * 0.46041 + var(--block-y));
  z-index:3;
  width:calc(var(--cw) * 0.30625);
  height:calc(var(--cw) * 0.04167);
  display:flex;
  align-items:center;
  padding-left:calc(var(--cw) * 0.02777);
  background:#fff;
  color:#000;
  white-space:nowrap;
}
.rank_badge_t{
  display:inline-block;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:900;
  font-size:calc(var(--cw) * 0.025);
  transform:var(--italic);
  transform-origin:left center;
}

.rank_photo{
  position:absolute;
  left:calc(var(--cw) * 0.70972);
  top:calc(var(--cw) * 0.27847 + var(--block-y));
  width:calc(var(--cw) * 0.27361);
  height:calc(var(--cw) * 0.36805);
  overflow:hidden;
  display:block;
  z-index:2;
}
.rank_photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.rank_number{
  position:absolute;
  left:calc(var(--cw) * 0.08959);
  top:calc(var(--cw) * 0.46133 + var(--block-y));/* PSD:digit boxを664〜930に合わせRANKINGとの隙間を確保 */
  display:flex;
  align-items:baseline;
  font-family:'Anton',sans-serif;
  color:#fff;
  z-index:3;
}
.rank_crown{
  position:absolute;
  left:0;
  top:calc(var(--cw) * 0.06733);
  width:calc(var(--cw) * 0.05903);
}
.rank_crown img{width:100%;height:auto;display:block;}
.rank_no{
  font-size:calc(var(--cw) * 0.06305);
  line-height:1;
}
.rank_digit{
  font-size:calc(var(--cw) * 0.21041);
  line-height:.878;/* PSD box高266/303。1だと縦に長くRANKINGへ食い込む(見切れない範囲で圧縮) */
  letter-spacing:-.01em;
}

.rank_info{
  position:absolute;
  left:calc(var(--cw) * 0.37777);
  top:calc(var(--cw) * 0.54792 + var(--block-y));
  width:calc(var(--cw) * 0.30625);
  z-index:3;
}
.rank_name{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:700;
  font-size:calc(var(--cw) * 0.03333);
  letter-spacing:.1em;
  line-height:1;
  color:#fff;
}
.rank_spec{
  margin-top:calc(var(--cw) * 0.004867);/* PSD:name下端837→spec844(実測でズレ補正) */
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:700;
  font-size:calc(var(--cw) * 0.02084);
  letter-spacing:.1em;
  line-height:1;
  color:#fff;
  text-transform:uppercase;/* PSD All Caps表示(150cm→150CM) */
}
.rank_line{
  display:block;
  margin-top:calc(var(--cw) * 0.0118);/* PSD:spec下端874→線891 */
  width:100%;
  height:1px;
  background:#fff;
}
.rank_enlabel{
  margin-top:calc(var(--cw) * 0.0118);/* PSD:線892→enlabel909 */
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:calc(var(--cw) * 0.016667);
  letter-spacing:.1em;
  line-height:1;
  color:#f9f9f9;
  text-transform:uppercase;
}


/* =========================================================
   偶数順位＝逆レイアウト。
   ・大見出し(THERAPIST'S RANKING)は右揃え(RANKINGが右へ)＝写真(左)と反対側で重ならない
   ・写真＝左／NO.番号＝右
   ・白バッジ／名前情報は奇数と同じ中央位置に固定(反転しない・左揃えのまま)
   縦位置(top)は奇数と同じ。右アンカー = navw + (元の左vw) で content 領域(0〜--cw)内へ配置。
   ========================================================= */
.rank_slide:nth-child(even) .rank_title{
  text-align:right;
}
.rank_slide:nth-child(even) .rank_photo{
  left:auto;
  right:calc(var(--navw) + var(--cw) * 0.66);
}
.rank_slide:nth-child(even) .rank_number{
  left:calc(var(--cw) * 0.68);
}
.rank_slide:nth-child(even) .rank_badge,
.rank_slide:nth-child(even) .rank_info{
  left:calc(var(--cw) * 0.353);
}

/* =========================================================
   スクロールイン演出：トップ hero_logo と同じ下→上 clip-path ワイプ。
   各順位の 大見出し(THERAPIST'S RANKING) と 情報(名前/スペック/線/RANKING THERAPIST)が
   ビューに入ると is_in が付き(ranking.js)、行ごとに時間差でワイプ表示。
   ★既定を非表示(下端までクリップ)にして最初から隠しておく＝is_in付与時に一瞬表示→非表示のチラつきを防ぐ。
   is_inでワイプ表示。サイト全体がJS必須のためJS前提。reduced-motionでは非表示解除(素の表示)。 */
.rank_title_l,
.rank_name,
.rank_spec,
.rank_line,
.rank_enlabel{clip-path:inset(100% 0 0);}
@keyframes rankLogoReveal{to{clip-path:inset(0);}}
.rank_title.is_in .rank_title_l{animation:rankLogoReveal .7s cubic-bezier(.33,0,.2,1) both;}
.rank_title.is_in .rank_title_l:nth-child(2){animation-delay:.15s;}
.rank_info.is_in .rank_name{animation:rankLogoReveal .7s cubic-bezier(.33,0,.2,1) both;}
.rank_info.is_in .rank_spec{animation:rankLogoReveal .7s cubic-bezier(.33,0,.2,1) .1s both;}
.rank_info.is_in .rank_line{animation:rankLogoReveal .7s cubic-bezier(.33,0,.2,1) .15s both;}
.rank_info.is_in .rank_enlabel{animation:rankLogoReveal .7s cubic-bezier(.33,0,.2,1) .2s both;}
@media (prefers-reduced-motion:reduce){
  .rank_title_l,
  .rank_name,
  .rank_spec,
  .rank_line,
  .rank_enlabel{clip-path:none;}
  .rank_title.is_in .rank_title_l,
  .rank_info.is_in .rank_name,
  .rank_info.is_in .rank_spec,
  .rank_info.is_in .rank_line,
  .rank_info.is_in .rank_enlabel{animation:none;}
}

/* =========================================================
   769〜1024(タブレット): ナビがハンバーガー化(右列消失)＝合成(PC)レイアウトを全幅で使用。
   合成の中身(見出し左端〜写真右端)が画面の左右40pxにピッタリ収まる(余白40px固定)。
   ※絶対配置は親paddingで動かないため、合成の枠 .rank_slide を内側幅で中央寄せし、--cwをその幅にする。
   ・--navw:0 … evenの右アンカー navw+cw*K を cw*K に(枠内で左右対称)
   ========================================================= */
@media (min-width:769px) and (max-width:1024px){
  .rank_hero{
    --navw:0px;
    --cw:calc((100vw - 80px) / 0.90138);
    overflow-x:clip;
  }
  .rank_slide{
    width:var(--cw);
    margin-left:calc(40px - var(--cw) * 0.08195);
    margin-right:0;
  }
}

/* =========================================================
   ≤768(スマホ) 暫定（SPデザイン受領まで）: 各順位を1カラムで縦積み
   PCの絶対配置/左右反転を解除し、写真上→情報→大NO.の順に並べる
   ========================================================= */
@media (max-width:768px){
  .rank_hero{
    padding:160px 16px 80px;
    overflow:hidden;
    isolation:isolate;
  }
  .rank_bg{z-index:-1;}
  .rank_list{display:flex;flex-direction:column;gap:72px;}

  .rank_slide{
    min-height:0;
    --block-y:0px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .rank_slide:first-child{min-height:0;--block-y:0px;}

  .rank_slide:nth-child(even) .rank_title,
  .rank_slide:nth-child(even) .rank_photo,
  .rank_slide:nth-child(even) .rank_number,
  .rank_slide:nth-child(even) .rank_badge,
  .rank_slide:nth-child(even) .rank_info{left:auto;right:auto;text-align:left;}
  .rank_slide:nth-child(even) .rank_badge{padding:0;justify-content:flex-start;}

  .rank_badge{
    order:0;
    position:static;
    width:auto;
    max-width:100%;
    align-self:flex-start;
    height:auto;
    padding:0;
    background:none;
  }
  .rank_badge_t{
    font-size:24px;
    letter-spacing:.1em;
    color:#fff;
    transform:none;
  }
  .rank_title{
    order:1;
    position:static;
    align-self:flex-start;
    text-align:left;
    margin-top:16px;
    font-size:80px;
    line-height:1;
    transform:scaleX(0.92);
    transform-origin:left center;
  }

  .rank_card{
    display:block;
    order:2;
    align-self:center;
    flex:0 0 auto;
    width:304px;
    max-width:100%;
    height:560px;
    margin-top:40px;
  }
  .rank_photo,
  .rank_info{display:none;}

  .rank_number{
    order:3;
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    align-self:center;
    margin-top:40px;
    display:flex;
    align-items:baseline;
  }
  .rank_no{font-size:74px;line-height:1;}
  .rank_digit{font-size:248px;line-height:.878;}
  .rank_crown{
    left:0;
    top:80px;
    width:72px;
  }
}