/* Ticket-style comparison, using FunSki's existing palette, type and mascot. */
#pass{--pass-surface:#f8fcfa;--pass-border:#bdd8d9;padding:76px 0 84px}
#pass>.sp-wrap{position:relative}
#pass>.sp-wrap>.sp-label{display:inline-block;padding-bottom:10px;border-bottom:3px solid var(--orange)}
#pass .price-pass-head{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:18px 0 22px}
#pass .price-pass-head h2{font-size:clamp(42px,4.2vw,60px)}
.pass-brand-mark{flex:0 0 156px;display:grid;place-items:center;width:156px;height:156px;margin-right:45px;border-radius:50%;background:#c8e9e9;border:1px solid #b6dcdc;transform:rotate(7deg)}
.pass-brand-mark img{width:142px;height:142px;object-fit:contain;transform:rotate(-13deg)}
.pass-comparison{width:100%;border-collapse:separate;border-spacing:0 14px;table-layout:fixed;text-align:left}
.pass-comparison caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pass-comparison col:first-child{width:46%}
.pass-comparison col:not(:first-child){width:27%}
.pass-comparison thead th{padding:0 30px 0;font-size:14px;font-weight:600;color:var(--blue)}
.pass-comparison tbody th,.pass-comparison tbody td{padding:28px 30px;vertical-align:middle;background:var(--pass-surface);border-top:1px solid var(--pass-border);border-bottom:1px solid var(--pass-border)}
.pass-comparison tbody th{font-weight:400;border-left:1px solid var(--pass-border);border-radius:20px 0 0 20px}
.pass-comparison tbody td:last-child{border-right:1px solid var(--pass-border);border-radius:0 20px 20px 0}
.pass-comparison tbody td:nth-child(2){position:relative;border-left:1px dashed #a7c8cc}
.pass-comparison tbody td:nth-child(2)::before,.pass-comparison tbody td:nth-child(2)::after{content:'';position:absolute;left:-8px;width:15px;height:15px;border-radius:50%;background:#d9f1f1}
.pass-comparison tbody td:nth-child(2)::before{top:-8px;border-bottom:1px solid var(--pass-border)}
.pass-comparison tbody td:nth-child(2)::after{bottom:-8px;border-top:1px solid var(--pass-border)}
.pass-option{display:grid;grid-template-columns:74px minmax(0,1fr);gap:22px;align-items:center}
.pass-count{display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1}
.pass-number{font-size:48px;font-weight:800;letter-spacing:-.065em;color:var(--blue);font-variant-numeric:tabular-nums}
.pass-count-unit{font-size:13px;font-weight:600;color:#45657a}
.sp-page .pass-title{font-size:25px;letter-spacing:-.035em;margin:0}
.sp-page .pass-description{margin:9px 0 0;max-width:340px;font-size:14px;line-height:1.65;color:#45657a}
.pass-total{display:block;white-space:nowrap;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.35}
.pass-total small{font-size:.6em;font-weight:600;margin-left:3px;letter-spacing:0}
.pass-per-lesson{display:block;margin-top:9px;font-size:14px;line-height:1.5;color:#45657a;font-variant-numeric:tabular-nums;white-space:nowrap}
.pass-mobile-label{display:none}
#pass .price-table-note{max-width:none;margin-top:12px;padding-left:2px;color:#45657a;font-size:13px!important}
@media(max-width:1050px){
  .pass-comparison col:first-child{width:44%}
  .pass-comparison col:not(:first-child){width:28%}
  .pass-comparison tbody th,.pass-comparison tbody td{padding:26px 22px}
  .pass-comparison thead th{padding-left:22px}
  .pass-option{grid-template-columns:56px minmax(0,1fr);gap:16px}
  .pass-number{font-size:40px}
  .sp-page .pass-title{font-size:23px}
  .sp-page .pass-description{font-size:13px}
  .pass-brand-mark{flex-basis:132px;width:132px;height:132px;margin-right:24px}
  .pass-brand-mark img{width:120px;height:120px}
}
@media(max-width:700px){
  #pass{padding:48px 0 52px}
  #pass .price-pass-head{gap:12px;margin:16px 0 28px;align-items:flex-end}
  #pass .price-pass-head h2{font-size:clamp(30px,8.4vw,42px);line-height:1.2}
  .pass-brand-mark{flex-basis:74px;width:74px;height:74px;margin:0 0 4px}
  .pass-brand-mark img{width:70px;height:70px}
  .pass-comparison,.pass-comparison tbody{display:block;width:100%}
  .pass-comparison colgroup{display:none}
  .pass-comparison thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pass-comparison tbody{display:grid;gap:16px}
  .pass-comparison tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;padding:24px;background:var(--pass-surface);border:1px solid var(--pass-border);border-radius:20px}
  .pass-comparison tbody th{position:relative;display:block;grid-column:1/-1;padding:0 0 22px;margin-bottom:19px;border:0;border-bottom:1px dashed #a7c8cc;border-radius:0;background:none}
  .pass-option{grid-template-columns:50px minmax(0,1fr);gap:18px}
  .pass-number{font-size:40px}
  .pass-count-unit{font-size:12px}
  .sp-page .pass-title{font-size:22px}
  .sp-page .pass-description{max-width:none;margin-top:8px;font-size:13px;line-height:1.65}
  .pass-comparison tbody td,.pass-comparison tbody td:last-child,.pass-comparison tbody td:nth-child(2){display:block;min-width:0;padding:0;background:none;border:0;border-radius:0}
  .pass-comparison tbody td:nth-child(2)::before,.pass-comparison tbody td:nth-child(2)::after{display:none}
  .pass-comparison tbody th::before,.pass-comparison tbody th::after{content:'';position:absolute;bottom:-8px;width:15px;height:15px;border-radius:50%;background:#d9f1f1}
  .pass-comparison tbody th::before{left:-32px;border-right:1px solid var(--pass-border)}
  .pass-comparison tbody th::after{right:-32px;border-left:1px solid var(--pass-border)}
  .pass-mobile-label{display:inline-block;margin-bottom:8px;color:var(--blue);font-size:13px;font-weight:600}
  .pass-total{font-size:clamp(18px,5.4vw,26px)}
  .pass-per-lesson{margin-top:6px;font-size:12px}
  #pass .price-table-note{margin-top:20px;padding:0;font-size:12px!important;line-height:1.7}
}
@media(max-width:360px){
  .pass-brand-mark{flex-basis:60px;width:60px;height:60px}
  .pass-brand-mark img{width:58px;height:58px}
  #pass .price-pass-head h2{font-size:29px}
  .pass-comparison tbody tr{padding:22px 18px;column-gap:12px}
  .pass-comparison tbody th::before{left:-26px}
  .pass-comparison tbody th::after{right:-26px}
  .pass-option{gap:12px}
}