body.course-persc .fv{background-image:url(../img/referral/fv.webp)}
.ref-fv-sp{display:none}
.fv__num.ref-off{font-size:calc(var(--fs-h2) * .74)}
.ref-band{background:var(--course);color:var(--white);font-weight:var(--fw-bold);text-align:center;padding:12px var(--wpad);display:none}
.is-referred .ref-band{display:block}
.ref-lead1{max-width:640px;margin:var(--sp-mid) auto 0;padding:14px 18px;border-radius:var(--r-card);background:var(--course-tint,#E8F4FF);font-weight:var(--fw-bold);text-align:center}
.ref-stairs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end;margin-top:var(--sp-part,64px);padding-bottom:0;border-bottom:3px solid var(--course)}
.ref-stair{position:relative;border-radius:14px 14px 0 0;padding:20px 14px;text-align:center;display:flex;flex-direction:column;gap:6px;justify-content:flex-start}
.ref-stair__n{font-size:var(--fs-note);font-weight:var(--fw-bold);color:var(--muted)}
.ref-stair__v{font-size:calc(var(--fs-h2) * .8);font-weight:var(--fw-bold);line-height:1.15;color:var(--course)}
.ref-stair__s{font-size:var(--fs-note);font-weight:var(--fw-bold);line-height:1.5}
.ref-stair--0{height:150px;background:#F1F5FB}
.ref-stair--1{height:210px;background:#E2ECF9}
.ref-stair--2{height:270px;background:#C9DCF4}
.ref-stair--3{height:350px;background:var(--course)}
.ref-stair--3 .ref-stair__v{font-size:calc(var(--fs-h2) * 1.1)}
.ref-stair--3 .ref-stair__n,.ref-stair--3 .ref-stair__v,.ref-stair--3 .ref-stair__s{color:#fff}
.ref-stair__tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 12px;border-radius:999px;background:var(--course);color:#fff;font-size:12px;font-weight:var(--fw-bold)}
.ref-stair--3 .ref-stair__tag{background:#FFF7A8;color:var(--ink)}
.ref-stair__arrow{position:absolute;right:-13px;top:28px;z-index:1;width:12px;height:12px;border-top:3px solid var(--course);border-right:3px solid var(--course);transform:rotate(-45deg)}

.ref-flow{max-width:960px;margin:var(--sp-far) auto 0;padding:24px;border-radius:var(--r-card);background:#F3F4F6}
.ref-flow__ttl{text-align:center;font-weight:var(--fw-bold);margin:0 0 16px}
.ref-flow__row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch}
.ref-flow__node{background:#fff;border:2px solid #DDE3EA;border-radius:12px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:6px;justify-content:center}
.ref-flow__node b{font-size:var(--fs-text)}
.ref-flow__node span{font-size:var(--fs-note);color:var(--muted)}
.ref-flow__node--on{border-color:var(--course);background:var(--course);color:#fff}
.ref-flow__node--on span{color:#fff;font-weight:var(--fw-bold)}
.ref-flow__ar{align-self:center;color:var(--course);font-size:22px;font-weight:var(--fw-bold)}

.ref-meter{margin-top:var(--sp-mid);max-width:472px}
.ref-meter__dots{display:flex;gap:8px;flex-wrap:nowrap}
.ref-meter__dots i{flex:1;max-width:40px;aspect-ratio:1;border-radius:50%;border:2px solid #C9DCF4;background:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;font-weight:var(--fw-bold);color:#9DB3D3}
.ref-meter__dots i.on{background:var(--course);border-color:var(--course);color:#fff}
.ref-meter__dots i.goal{border-color:var(--course);color:var(--course)}
.ref-meter__cap{display:flex;justify-content:space-between;margin-top:8px;font-size:var(--fs-note);font-weight:var(--fw-bold)}
.ref-meter__cap span:first-child{color:var(--course)}

.ref-how{position:relative}
.ref-how::before{content:"";position:absolute;left:50%;top:40px;bottom:40px;width:3px;margin-left:-1.5px;background:linear-gradient(var(--course),#C9DCF4)}
.ref-how__row{position:relative}
.ref-how__dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--course);border:4px solid #fff;box-shadow:0 0 0 3px var(--course);z-index:1}

.ref-after{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--sp-near)}
.ref-after span{padding:6px 10px;border-radius:999px;background:#E2ECF9;font-size:var(--fs-note);font-weight:var(--fw-bold)}
.ref-after span:last-child{background:var(--course);color:#fff}
.ref-after em{font-style:normal;color:var(--course);font-weight:var(--fw-bold)}

.ref-swap{max-width:720px;margin:var(--sp-mid) auto 0;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.ref-cp{border:2px dashed #9DB3D3;border-radius:12px;padding:12px 14px;text-align:center;background:#fff}
.ref-cp b{display:block}
.ref-cp span{font-size:var(--fs-note);color:var(--muted)}
.ref-cp--old{opacity:.55}
.ref-cp--old b{text-decoration:line-through}
.ref-cp--new{border-color:var(--course)}
.ref-swap__ar{text-align:center;font-size:var(--fs-note);font-weight:var(--fw-bold);color:var(--course);line-height:1.4}
.ref-tier{text-align:center}
.ref-tier .fv__num{display:block;margin-top:var(--sp-tight)}
.ref-tier--goal{border:2px solid var(--course)}
.ref-rules{display:inline-block;margin-top:var(--sp-near);color:var(--course);font-weight:var(--fw-bold)}
.ref-crs{display:flex;flex-direction:column;gap:var(--sp-near)}
.ref-crs img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-card);background:#fff}
.ref-crs .btn{margin:auto 0 0;width:100%}
.ref-yen{font-size:var(--fs-note);color:var(--muted)}

.ref-how{display:grid;gap:var(--sp-far);margin-top:var(--sp-part,64px)}
.ref-how__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-far);align-items:center}
.ref-how__row:nth-child(even) .ref-how__fig{order:2}
.ref-how__fig{background:#F3F4F6;border-radius:var(--r-card);padding:28px;display:flex;justify-content:center}
.ref-shot{position:relative;width:100%;max-width:340px}
.ref-shot--wide{max-width:520px}
.ref-shot img{display:block;width:100%;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.10)}
.ref-pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--course);color:#fff;font-weight:var(--fw-bold);font-size:15px;line-height:30px;text-align:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ref-how__txt .num{margin:0}
.ref-pins{list-style:none;margin:var(--sp-near) 0 0;padding:0;display:grid;gap:8px}
.ref-pins li{display:flex;gap:10px;align-items:flex-start}
.ref-pins b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--course);color:#fff;font-size:13px;line-height:24px;text-align:center}
.ref-count{max-width:720px;margin:var(--sp-far) auto 0;padding:16px 20px;border:2px dashed var(--course);border-radius:var(--r-card);text-align:center;font-weight:var(--fw-bold)}

.ref-friend{display:grid;grid-template-columns:300px 1fr;gap:var(--sp-far);align-items:center}
.ref-phone{width:300px;border:10px solid #1E1E22;border-radius:36px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.ref-phone img{display:block;width:100%}
.ref-mini{list-style:none;margin:var(--sp-mid) 0 0;padding:0;display:grid;gap:14px}
.ref-mini li{display:flex;gap:14px;align-items:center;font-weight:var(--fw-bold)}
.ref-mini .num{flex:none;font-size:28px;margin:0}

.ref-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-mid)}
@media (max-width:767px){
  .ref-flow{padding:16px}
  .ref-flow__row{grid-template-columns:1fr}
  .ref-flow__ar{transform:rotate(90deg);justify-self:center}
  .ref-meter__dots{gap:4px}
  .ref-how::before{left:22px;top:0;bottom:0}
  .ref-how__row{padding-left:56px}
  .ref-how__dot{left:22px;top:6px;transform:translate(-50%,0)}
  .ref-swap{grid-template-columns:1fr}
  .ref-swap__ar{transform:none}
  .ref-stairs{gap:6px}
  .ref-stair{padding:14px 4px}
  .ref-stair--0{height:120px}.ref-stair--1{height:160px}.ref-stair--2{height:200px}.ref-stair--3{height:250px}
  .ref-stair__v{font-size:18px}
  .ref-stair--3 .ref-stair__v{font-size:24px}
  .ref-stair__s{font-size:11px}
  .ref-stair__tag{font-size:10px;padding:3px 8px}
  .ref-stair__arrow{display:none}
  body.course-persc .fv{background-image:none}
  .fv{aspect-ratio:auto !important;min-height:0 !important;height:auto !important}
  .fv .fv__col{min-height:0 !important;height:auto !important}
  .fv .fv__micro{margin-top:var(--sp-mid) !important}
  .ref-fv-sp{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
  .ref-scroll{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin:0 calc(var(--wpad) * -1);padding:4px var(--wpad) 12px}
  .ref-scroll>*{flex:0 0 84%;scroll-snap-align:center}
  .ref-how__row{grid-template-columns:1fr;gap:var(--sp-mid)}
  .ref-how__row:nth-child(even) .ref-how__fig{order:0}
  .ref-how__fig{padding:18px}
  .ref-friend{grid-template-columns:1fr;justify-items:center}
  .ref-phone{width:240px}
}