#class .section__inner { z-index: auto; display: flex; flex-direction: column; align-items: center; gap: calc(48px * var(--spc)); padding: 0; }
#class .hero-title { line-height: normal; margin-bottom: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .15); }
#class .class-tabs { display: flex; flex-direction: row; align-items: center; gap: calc(10px * var(--spc)); }
#class .class-tab { flex: none; padding: calc(10px * var(--spc)) calc(20px * var(--spc)); border: 1px solid #8F9BB1; border-radius: 999px; background: rgba(0, 0, 0, .1); color: #AEB7C9; font-family: var(--font-body); font-weight: 700; font-size: calc(16px * var(--spc)); line-height: 1.5; white-space: nowrap; cursor: pointer; }
#class .class-tab.is-active { border-color: #FFFFFF; background: #FFFFFF; color: #1A1F38; }
#class .class-stage { display: flex; flex-direction: row; align-items: center; gap: calc(40px * var(--spc)); width: calc(1310px * var(--spc)); }
#class .class-arrow { flex: none; width: calc(48px * var(--spc)); height: calc(54px * var(--spc)); border: 0; padding: 0; background-color: #696F7D; -webkit-mask: url('../assets/images/common/arrow_slide.svg') center / contain no-repeat; mask: url('../assets/images/common/arrow_slide.svg') center / contain no-repeat; cursor: pointer; }
#class .class-arrow:hover { background-color: #FFFFFF; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .25)); }
#class .class-arrow--next { transform: scaleX(-1); }
#class .class-deck { position: relative; flex: none; display: grid; width: calc(1134px * var(--spc)); height: calc(468px * var(--spc)); }
#class .class-panel { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
#class .class-panel.is-active { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
#class .class-glasscard { position: absolute; inset: 0; border-radius: calc(20px * var(--spc)); box-shadow: 0 16px 32px -4px rgba(12, 12, 13, .1), 0 4px 4px -4px rgba(12, 12, 13, .05); background: linear-gradient(-30.126deg, rgba(255, 255, 255, .3) 28.025%, rgba(153, 153, 153, 0) 56.504%); pointer-events: none; }
#class .class-frame { position: relative; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, .3); border-radius: calc(20px * var(--spc)); overflow: hidden; }
#class .class-glass { position: absolute; inset: 0; border-radius: calc(12px * var(--spc)); pointer-events: none; }
#class .class-glass--bg { opacity: .18; mix-blend-mode: luminosity; background-position: center; background-size: cover; background-repeat: no-repeat; }
#class .section__bg[data-bg-loaded] ~ .section__inner .class-glass--bg { background-image: url('../assets/images/class/pc/bg_class.webp'); }
#class .class-glass--tone { background: rgba(250, 253, 255, .76); mix-blend-mode: soft-light; }
#class .class-stagebox { position: absolute; left: -1px; top: -1px; width: 0; height: 0; }
#class .class-char { position: absolute; max-width: none; }
#class .class-char--knight { width: calc(656.08px * var(--spc)); height: calc(718.24px * var(--spc)); left: calc(414.73px * var(--spc)); top: calc(-77.64px * var(--spc)); }
#class .class-char--hunter { width: calc(581.05px * var(--spc)); height: calc(843.66px * var(--spc)); left: calc(462.86px * var(--spc)); top: calc(-30.61px * var(--spc)); }
#class .class-char--mage { width: calc(523.53px * var(--spc)); height: calc(860.32px * var(--spc)); left: calc(512.81px * var(--spc)); top: calc(-104.27px * var(--spc)); }
#class .class-char--priest { width: calc(524.32px * var(--spc)); height: calc(903.29px * var(--spc)); left: calc(538.91px * var(--spc)); top: calc(-124.82px * var(--spc)); }
#class .class-char--clown { width: calc(526.01px * var(--spc)); height: calc(865.71px * var(--spc)); left: calc(542.76px * var(--spc)); top: calc(-130.11px * var(--spc)); }
#class .class-text { position: absolute; left: -1px; top: calc(75.5px * var(--spc)); width: calc(1134px * var(--spc)); padding: calc(32px * var(--spc)) 0; padding-left: calc(147px * var(--spc)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(16px * var(--spc)); overflow: hidden; text-align: center; }
#class .class-text__head { display: flex; flex-direction: column; gap: calc(16px * var(--spc)); width: calc(360px * var(--spc)); }
#class .class-text__sub, #class .class-text__name { width: 100%; font-family: var(--font-title); font-weight: 400; line-height: 1.2; color: #FFFFFF; text-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3); }
#class .class-text__sub { font-size: calc(24px * var(--spc)); }
#class .class-text__name { font-size: calc(56px * var(--spc)); }
#class .class-text__name { display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--spc)); }
#class .class-text__badge { flex: none; width: calc(70px * var(--spc)); height: calc(70px * var(--spc)); background-position: center; background-size: contain; background-repeat: no-repeat; }
#class .class-text__badge--knight { background-image: url('../assets/images/class/badge_knight.webp'); }
#class .class-text__badge--hunter { background-image: url('../assets/images/class/badge_hunter.webp'); }
#class .class-text__badge--mage { background-image: url('../assets/images/class/badge_mage.webp'); }
#class .class-text__badge--priest { background-image: url('../assets/images/class/badge_priest.webp'); }
#class .class-text__badge--clown { background-image: url('../assets/images/class/badge_clown.webp'); }
#class .class-text__divider { display: block; width: calc(360px * var(--spc)); height: calc(13px * var(--spc)); background: url('../assets/images/common/divider_diamond.svg') center / contain no-repeat; }
#class .class-text__desc { width: calc(360px * var(--spc)); font-family: var(--font-body); font-weight: 700; font-size: calc(18px * var(--spc)); line-height: 1.6; letter-spacing: calc(-0.36px * var(--spc)); color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3); }
#class .class-text--clown .class-text__desc { width: calc(385px * var(--spc)); }
#class .class-text__desc, #class .class-text--clown .class-text__desc { width: max-content; max-width: none; margin-left: calc(180px * var(--spc)); transform: translateX(-50%); white-space: nowrap; }
#class .class-text__lead { display: block; width: max-content; margin-left: 50%; transform: translateX(-50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  #class .class-panel, #class .class-panel.is-active { transition: none; }
}