.p-top--web-service { background:#f8f8f7; color:#070707; scroll-margin-top:72px; }
.p-top--web-service .bg { background:#f8f8f7; }
.p-top--web-service .wrap { max-width:1600px; padding-top:clamp(132px,10vw,160px); padding-bottom:clamp(56px,6vw,96px); }
.web-service__grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); align-items:stretch; min-height:720px; }
.web-service__copy { padding:8px clamp(20px,4vw,64px) 0 0; }
.web-service__eyebrow { display:inline-block; margin:0 0 24px; padding:10px 24px; border-right:13px solid #c9f000; background:#050505; color:#fff; font-size:clamp(16px,1.6vw,25px); font-weight:800; line-height:1; letter-spacing:.05em; transform:skew(-10deg); }
.web-service__copy h2 { margin:0 0 20px; color:#070707; font-size:clamp(38px,3.8vw,62px); font-weight:900; letter-spacing:.01em; line-height:1.15; }
.web-service__intro { margin:0 0 22px; font-size:clamp(16px,1.4vw,24px); font-weight:700; line-height:1.65; }
.web-service__price { margin:24px 0 22px; padding:18px clamp(16px,2.4vw,34px) 20px; clip-path:polygon(0 0,100% 0,94% 100%,0 100%); background:#1042ed; color:#fff; text-align:center; }
.web-service__price > span { display:block; width:min(100%,430px); margin:0 auto 8px; padding:6px 12px; background:#fff; color:#1042ed; font-size:clamp(18px,1.9vw,28px); font-weight:900; line-height:1.1; }
.web-service__price strong { display:block; font-size:clamp(20px,2.2vw,34px); font-weight:900; line-height:1.15; }
.web-service__price strong b { font-size:clamp(68px,8.5vw,138px); line-height:.95; letter-spacing:.02em; }
.web-service__benefits-title { display:flex; align-items:center; gap:16px; margin:0 0 14px; font-size:clamp(16px,1.5vw,24px); font-weight:900; white-space:nowrap; }
.web-service__benefits-title::before,.web-service__benefits-title::after { content:""; flex:1; height:1px; background:#111; }
.web-service__benefits-title::after { flex:0 0 58px; background:#c9f000; }
.web-service__benefits { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:24px; }
.web-service__benefits > div { display:grid; grid-template-columns:54px 1fr; gap:10px; align-items:center; padding:6px 10px; border-right:1px solid #333; font-size:clamp(13px,1.2vw,20px); font-weight:800; line-height:1.3; }
.web-service__benefits > div:last-child { border-right:0; }
.web-service__benefits i { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#050505; color:#c9f000; font-size:28px; font-style:normal; }
.web-service__button { display:flex; align-items:center; justify-content:center; gap:26px; width:min(100%,680px); min-height:72px; padding:12px 28px; border-radius:8px; background:#ff5547; color:#fff; font-size:clamp(20px,2vw,31px); font-weight:900; text-align:center; }
.web-service__button:hover,.web-service__button:focus-visible { color:#fff; background:#e94438; text-decoration:none; }
.web-service__button span { font-size:1.3em; line-height:1; }
.web-service__note { margin:10px 0 0; font-size:12px; line-height:1.5; }
.web-service__media { min-height:720px; background:#07133a; overflow:hidden; }
.web-service__media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

@media screen and (max-width:767px) {
  .p-top--web-service { scroll-margin-top:60px; }
  .p-top--web-service .wrap { padding-top:145px; padding-bottom:0; }
  .web-service__grid { display:flex; flex-direction:column; min-height:0; }
  .web-service__copy { padding:0 16px 28px; }
  .web-service__eyebrow { margin-bottom:18px; padding:8px 14px; border-right-width:10px; font-size:14px; }
  .web-service__copy h2 { margin-bottom:16px; font-size:clamp(35px,10vw,48px); }
  .web-service__intro { font-size:15px; line-height:1.65; }
  .web-service__price { margin:18px -5px 20px; padding:14px 14px 16px; }
  .web-service__price strong b { font-size:clamp(68px,20vw,92px); }
  .web-service__benefits-title { gap:8px; font-size:14px; }
  .web-service__benefits-title::after { flex-basis:42px; }
  .web-service__benefits > div { display:block; padding:6px 2px; font-size:12px; text-align:center; }
  .web-service__benefits i { width:44px; height:44px; margin:0 auto 6px; font-size:22px; }
  .web-service__button { min-height:58px; padding:10px 14px; font-size:18px; }
  .web-service__note { font-size:10px; }
  .web-service__media { min-height:430px; height:430px; }
}

/* dance confirmation section */
.p-top--confirmation { scroll-margin-top:100px; }
.confirmation__break { display:none; }
.p-top--confirmation .bg { background-color:#f5f0e8; }
.p-top--confirmation .wrap { padding-top:55px; padding-bottom:55px; }
.p-top--confirmation .summary { max-width:900px; margin-left:auto; margin-right:auto; }
.confirmation__content { display:flex; align-items:center; justify-content:space-between; gap:5%; max-width:960px; margin:30px auto 0; }
.confirmation__copy { width:58%; }
.confirmation__steps { list-style:none; margin:0; padding:0; }
.confirmation__steps li { display:flex; align-items:flex-start; gap:16px; padding:10px 0; border-top:1px solid #c9a96e; }
.confirmation__steps li:last-child { border-bottom:1px solid #c9a96e; }
.confirmation__steps .num { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:#1eaa96; color:#fff; font-family:Arial,sans-serif; font-size:22px; font-weight:700; line-height:1; }
.confirmation__steps h3 { margin:0 0 5px; color:#0a0f1e; font-size:20px; font-weight:600; line-height:1.4; }
.confirmation__steps p { margin:0; line-height:1.7; }
.confirmation__note { margin:18px 0 0; padding:12px 16px; border-left:5px solid #c9a96e; background:#fff; line-height:1.7; }
.confirmation__image { width:35%; margin:0; }
.confirmation__image img { display:block; width:100%; height:auto; }

@media screen and (max-width:767px) {
  .p-top--confirmation { scroll-margin-top:60px; }
  .confirmation__break { display:block; }
  .p-top--confirmation .wrap { padding-top:32px; padding-bottom:35px; }
  .confirmation__content { display:flex; flex-direction:column-reverse; gap:22px; margin-top:28px; }
  .confirmation__copy, .confirmation__image { width:100%; }
  .confirmation__image { max-width:430px; }
  .confirmation__steps li { gap:12px; padding:10px 0; }
  .confirmation__steps .num { flex-basis:34px; width:34px; height:34px; font-size:18px; }
  .confirmation__steps h3 { font-size:17px; }
  .confirmation__steps p { font-size:14px; line-height:1.6; }
  .confirmation__note { margin-top:16px; padding:11px 14px; font-size:14px; }
}