/* mobile ad flow */
.sv-flow{--u:clamp(.5px,min(.0455vw,calc((100vh - 330px) / 813)),1px)}
.fl-stage{display:flex;align-items:center;min-height:100vh;padding:calc(var(--header-h) + 16px) 0 16px;overflow:hidden}
.fl-stage .inner{width:100%}
.fl-head{text-align:center}
.fl-body{display:flex;justify-content:center;align-items:flex-start;gap:calc(114 * var(--u));margin-top:calc(44 * var(--u))}
.fl-phone{position:relative;flex:none;width:calc(510 * var(--u));aspect-ratio:1188/1905;overflow:hidden}
.fl-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.fl-shot.is-on{opacity:1}

.fl-side{flex:none;width:calc(382 * var(--u));padding-top:calc(40 * var(--u))}
.fl-kicker{font-size:calc(50 * var(--u));font-weight:900;line-height:1.21;letter-spacing:-.05em;color:#0400FF}
.fl-list{position:relative;display:flex;flex-direction:column;gap:calc(29 * var(--u));margin-top:calc(56 * var(--u))}
.fl-list::before{
  content:'';position:absolute;left:calc(25 * var(--u) - 1.5px);
  top:calc(25 * var(--u));bottom:calc(25 * var(--u));border-left:3px dashed #C3C3C3;
}
.fl-item{position:relative;display:flex;align-items:center;gap:calc(20 * var(--u))}
.fl-dot{
  flex:none;display:grid;place-items:center;width:calc(50 * var(--u));height:calc(50 * var(--u));
  border-radius:50%;background:#C3C3C3;transform:scale(.63);
  transition:background-color .45s ease,transform .45s ease;
}
.fl-dot::before{
  content:'';width:44%;aspect-ratio:1;background:#fff;transform:rotate(-45deg);
  -webkit-mask:url(/images/icon-spark.svg) center/contain no-repeat;mask:url(/images/icon-spark.svg) center/contain no-repeat;
  transition:transform .45s ease;
}
.fl-item.is-on .fl-dot{background:#0400FF;transform:scale(1)}
.fl-item.is-on .fl-dot::before{transform:rotate(0deg)}
.fl-name{font-size:calc(30 * var(--u));font-weight:900;line-height:1.2;letter-spacing:-.03em;color:#C3C3C3;word-break:keep-all;transition:color .45s ease}
.fl-item.is-on .fl-name{color:#000}
.fl-note{
  display:grid;place-items:center;width:100%;height:calc(160 * var(--u));
  margin-top:calc(60 * var(--u));padding:0 calc(28 * var(--u));
  background:#F5F5F5;border-radius:calc(15 * var(--u));
}
.fl-note-text{
  grid-area:1/1;font-size:calc(25 * var(--u));font-weight:800;line-height:1.28;letter-spacing:-.03em;
  text-align:center;color:#000;opacity:0;
}
.fl-note-text.is-on{opacity:1}

@media (max-width:1023px){
  .fl-stage{display:block;min-height:0;padding:calc(var(--header-h) + 40px) 0 60px}
  .fl-body{flex-direction:column;align-items:center;gap:0;margin-top:32px}
  .fl-side{display:contents}
  .fl-kicker{order:1;font-size:26px;text-align:center}
  .fl-list{order:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:460px;margin-top:18px}
  .fl-list::before{display:none}
  .fl-item{gap:8px;padding:10px 12px;border:1px solid #E5E8EB;border-radius:10px;background:#fff;cursor:pointer;transition:background-color .35s,border-color .35s}
  .fl-item.is-on{background:#0400FF;border-color:#0400FF}
  .fl-dot,.fl-item.is-on .fl-dot{width:20px;height:20px;transform:none}
  .fl-item.is-on .fl-dot{background:#fff}
  .fl-item.is-on .fl-dot::before{background:#0400FF}
  .fl-name{font-size:13px;font-weight:700;line-height:1.3;color:#8B95A1}
  .fl-item.is-on .fl-name{color:#fff}
  .fl-phone{order:3;width:min(260px,62vw);margin-top:24px}
  .fl-shot{transition:opacity .5s ease}
  .fl-note{order:4;width:100%;max-width:460px;height:auto;min-height:80px;margin-top:16px;padding:16px}
  .fl-note-text{font-size:15px;transition:opacity .2s ease}
  .fl-note-text.is-on{transition:opacity .4s ease .2s}
}

/* steps */
.sv-steps{padding:clamp(80px,7.3vw,140px) 0 clamp(70px,6.2vw,120px)}
.ms-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:min(24px,1.25vw);margin-top:min(56px,2.92vw)}
.ms-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:min(26px,1.35vw);row-gap:min(16px,.83vw);
  padding:min(26px,1.35vw) min(28px,1.46vw);
  background:#fff;border:1px solid #E6E6E6;border-radius:min(10px,.52vw);
  transition:transform .35s cubic-bezier(.34,1.2,.64,1),box-shadow .35s,border-color .35s;
}
.ms-card:hover{transform:translateY(-6px);border-color:#D4DCEC;box-shadow:0 14px 28px rgba(20,60,140,.1)}
.ms-step{justify-self:center;font-size:min(17px,.89vw);font-weight:800;letter-spacing:.02em;color:#0400FF}
.ms-name{font-size:min(24px,1.25vw);font-weight:800;letter-spacing:-.03em;color:#111;word-break:keep-all}
.ms-ico{justify-self:center;width:auto;height:min(58px,3.02vw);object-fit:contain}
.ms-desc{font-size:min(16px,.83vw);font-weight:500;line-height:1.5;letter-spacing:-.02em;color:#555;word-break:keep-all}

@media (max-width:1023px){
  .sv-steps{padding:60px 0 50px}
  .ms-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px}
  .ms-card{padding:20px;border-radius:12px;column-gap:16px;row-gap:12px}
  .ms-step{font-size:13px}
  .ms-name{font-size:18px}
  .ms-ico{height:40px}
  .ms-desc{font-size:14px}
}
@media (max-width:560px){
  .ms-list{grid-template-columns:1fr}
}