@font-face { font-family: "Rockers"; src: url("/files/user/26-27_SEASON/lp/violex/img/Rockers-Bold.otf") format("opentype"); font-display: swap; }
:root { --purple:#3e2079; --yellow:#ffd900; --ink:#321967; --paper:#fff; --pale:#e9e5f1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; font-size:16px; line-height:1.9; }
.content { width:min(1200px,calc(100% - 40px)); margin:auto; position:relative; z-index:1; }
.content--narrow { width:min(1000px,calc(100% - 40px)); }
h2 { font:clamp(34px,5.5vw,56px)/1 Rockers,"Arial Narrow",sans-serif; letter-spacing:.02em; text-align:center; margin:0 0 32px; }
.hero { height:clamp(220px,39.6vw,760px); position:relative; overflow:hidden; background:url("/files/user/26-27_SEASON/lp/violex/img/kv.jpg") center center/cover no-repeat; }
.hero__title { position:absolute; z-index:1; bottom:14%; left:50%; width:min(620px,65vw); height:auto; transform:translateX(-50%); filter:drop-shadow(0 3px 5px rgba(0,0,0,.42)); }
.brand-section { min-height:180px; padding:24px 0; display:flex; justify-content:center; align-items:center; gap:12px; overflow:hidden; position:relative; }
.brand-logo { display:block; width:min(690px,78vw); height:auto; position:relative; z-index:1; }
.brand-watermark { position:absolute; z-index:0; top:50%; right:-8%; width:clamp(210px,28vw,430px); height:auto; transform:translateY(-50%); pointer-events:none; }
.section-dark { color:#fff; background:var(--purple); }.about { padding:70px 0 30px; position:relative; overflow:hidden; }.about .content > p { font-size:14px; text-align:left; margin:0 0 24px; }
.vertical-label { position:absolute; top:48px; left:24px; color:#fff; font:74px/.8 Rockers,sans-serif; writing-mode:vertical-rl; letter-spacing:-.03em; z-index:0; }.about .vertical-label, .people-section .vertical-label--light { letter-spacing:.055em; }.about .vertical-label { top:50%; left:8.5%; transform:translateY(-50%); font-size:110px; }.people-section .vertical-label--light { top:auto; bottom:100px; left:8.5%; color:#dad5e5; font-size:110px; }
@media (max-width:1469px) { .about .vertical-label { display:none; } }
.statement { margin-top:72px; }.statement h2 { color:#fff; font:42px/1 Rockers,sans-serif; letter-spacing:.02em; }.about .statement .statement__lead { color:var(--purple); background:#fff; font:700 18px/1.5 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; padding:7px; text-align:center; letter-spacing:.02em; }.statement article { border:1px solid rgba(255,255,255,.75); padding:15px 18px; }.statement article + article { margin-top:8px; }.statement h3 { text-align:center; font:700 16px/1.45 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; margin:0 0 9px; }.statement article ul { margin:0; padding:0; list-style:none; font-size:12px; line-height:1.75; }.statement article li { padding-left:1em; text-indent:-1em; }.statement article li::before { content:"・"; }.about .statement .club-note { color:var(--yellow); text-align:center; font:16px/1.2 Rockers,sans-serif; letter-spacing:.1em; margin:34px 0 0; }
.statement-section { padding:72px 0 80px; }.statement-section .statement { margin-top:0; }.statement-section .statement__lead { color:var(--purple); background:#fff; font:700 18px/1.5 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; padding:7px; text-align:center; letter-spacing:.02em; }.statement-section .club-note { color:var(--yellow); text-align:center; font:16px/1.2 Rockers,sans-serif; letter-spacing:.1em; margin:34px 0 0; }
.people-section { position:relative; padding:68px 0; overflow:hidden; }.people-section h2 { text-align:left; margin-left:6%; }.people-section .members-heading { margin-left:0; text-align:left; }.people-layout { display:block; }.member-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.member { aspect-ratio:.72; overflow:hidden; background:linear-gradient(155deg,#d6d1e0,#fff 45%,#856db1); border:1px solid #ddd; position:relative; display:grid; place-items:center; color:#fff; text-shadow:0 1px 2px #271259; font:16px Rockers,sans-serif; }.member__photo { width:100%; height:100%; object-fit:cover; object-position:center top; }.member:after { content:"JUNON"; position:absolute; color:#fff; background:var(--purple); bottom:3px; left:4px; right:4px; text-align:center; font:clamp(14px,1.5vw,22px)/1.35 Rockers,sans-serif; }.people-section .directors-heading { margin-top:80px; margin-left:0; text-align:left; }.director { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,8fr); gap:12px; align-items:start; margin:0 0 38px; }.director--reverse { grid-template-columns:minmax(0,8fr) minmax(0,2fr); }.portrait { aspect-ratio:.78; background:linear-gradient(145deg,#e7e5e9,#38206f); color:white; display:grid; place-content:center; text-align:center; font:14px/1.25 Rockers,sans-serif; }.portrait--director { width:100%; height:auto; object-fit:cover; object-position:center top; }.director h3 { display:inline-block; padding:4px 10px; margin:0 0 10px; background:var(--purple); color:#fff; font-size:16px; line-height:1.4; }.director p { margin:0; color:#111; font-size:14px; line-height:1.9; }
.movie { padding:48px 0; }.movie h2 { text-align:left; color:#fff; }.video-wrap { aspect-ratio:16/9; background:#231041; }.video-wrap iframe { border:0; width:100%; height:100%; }.ticker { height:52px; overflow:hidden; color:var(--purple); background:#fff; border-bottom:1px solid #ece8f0; }.ticker__track { display:flex; align-items:center; width:max-content; height:52px; will-change:transform; transform:translate3d(0,0,0); }.ticker__group { display:flex; align-items:center; gap:24px; flex:none; width:max-content; height:52px; padding-right:24px; }.ticker span { white-space:nowrap; font:22px/1 Rockers,sans-serif; letter-spacing:.04em; }
.gallery-section { padding:56px 0 76px; }.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }.gallery-item { aspect-ratio:.72; background:linear-gradient(145deg,#061730,#0759bd 47%,#2c0b56); position:relative; overflow:hidden; }.gallery-item:after { content:"VIOLEX"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-50deg); color:rgba(255,255,255,.65); font:19px Rockers,sans-serif; }.gallery-item:nth-child(3n+2) { background:linear-gradient(155deg,#10101e,#54227a 45%,#00a9ea); }.gallery-item:nth-child(5n) { background:linear-gradient(155deg,#123a8e,#05050e 48%,#2a1765); }.instagram-link { display:block; width:min(420px,100%); margin:20px auto 0; padding: 15px 12px; color:#fff; background:linear-gradient(100deg,#833ab4 0%,#c13584 34%,#fd1d1d 67%,#fcaf45 100%); text-align:center; text-decoration:none; font:700 14px/1 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }.cta-row { width:min(420px,100%); margin:10px auto 0; }.audition-accordion { color:var(--purple); border:1px solid var(--purple); }.audition-accordion summary { position:relative; display:block; min-height:32px; padding:7px 34px 7px 12px; cursor:pointer; font-size:12px; font-weight:bold; list-style:none; }.audition-accordion summary::-webkit-details-marker { display:none; }.audition-accordion summary::after { content:"＋"; position:absolute; right:12px; top:50%; transform:translateY(-50%); }.audition-accordion[open] summary { border-bottom:1px solid var(--purple); }.audition-accordion[open] summary::after { content:"−"; }.audition-accordion__content { padding:12px 16px; color:#111; font-size:12px; line-height:1.9; }.audition-accordion__content p { margin:0 0 12px; }.audition-accordion__content p:last-child { margin-bottom:0; }
.message-section { padding:58px 0 100px; }.message-section .content { width:min(720px,calc(100% - 40px)); }.message-section__logo { display:block; width:min(320px,70vw); height:auto; margin:0 auto 34px; }.message-section h2 { text-align:center; font-size:34px; font-weight:900; -webkit-text-stroke:.35px currentColor; }.message-section p { color:var(--ink); font-size:13px; line-height:2; margin:0 0 28px; }footer { text-align:center; color:#fff; background:var(--purple); padding:46px 20px 30px; }.footer-mark { border:2px solid #fff; border-radius:50%; width:46px; height:46px; display:grid; place-items:center; margin:auto; font:30px Rockers,sans-serif; }.footer-name { margin:12px 0 0; font:17px/1 Rockers,sans-serif; }footer h2 { font-size:20px; margin:20px 0 12px; }footer nav { display:flex; justify-content:center; gap:14px; }footer nav a { color:#fff; text-decoration:none; font-weight:bold; }footer small { display:block; font-size:8px; opacity:.85; line-height:1.8; margin-top:14px; }
@media (max-width:560px) { .hero__title { width:68vw; }.brand-section { min-height:90px; padding:10px 0; }.brand-logo { width:50vw; }.brand-watermark { right:-19%; width:160px; }.about { padding-top:60px; }.about .vertical-label, .people-section .vertical-label--light { display:none; }.vertical-label { left:19px; font-size:62px; }.statement h2 { font-size:35px; }.statement article { padding:12px 14px; }.statement article ul { font-size:11px; }.about .statement .club-note { font-size:14px; }.people-section .members-heading { text-align:center; }.people-layout { grid-template-columns:1fr 108px; gap:16px; }.member-grid { gap:10px; }.member:after { font-size:11px; }.member-list { font-size:7px; }.director { grid-template-columns:minmax(0,2fr) minmax(0,8fr); gap:12px; }.director h3 { font-size:16px; }.director p { font-size:14px; }.director--reverse { grid-template-columns:minmax(0,8fr) minmax(0,2fr); } }
@media (min-width:800px) { body { font-size:16px; }.brand-section { min-height:260px; }.about { padding:100px 0 80px; }.about .content > p { font-size:15px; }.people-section { padding:100px 0; }.gallery-grid { grid-template-columns:repeat(3,1fr); }.gallery-item { aspect-ratio:.8; } }
.member { appearance:none; padding:0; cursor:pointer; font:16px Rockers,sans-serif; }.member:after { content:attr(data-name); }.member:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.portrait--director { border:1px solid #ddd; }
@media (min-width:1200px) { .people-section { overflow:visible; }.people-layout { width:100%; }.members-background-copy { position:absolute; top:26px; left:calc(100% + 34px); width:175px; color:rgba(62,32,121,.7); font:13px/1.8 Rockers,sans-serif; letter-spacing:.035em; text-transform:uppercase; }.members-background-copy p { margin:0 0 16px; } }
@media (max-width:1199px) { .members-background-copy { display:none; } }
body.is-modal-open { overflow:hidden; }.profile-modal[hidden] { display:none; }.profile-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; overflow:auto; padding:24px; background:rgba(20,9,40,.78); }.profile-modal__panel { position:relative; display:grid; grid-template-columns:minmax(180px,30%) 1fr; width:min(940px,100%); max-height:min(820px,calc(100vh - 48px)); overflow:auto; background:#fff; box-shadow:0 18px 60px rgba(0,0,0,.34); }.profile-modal__close { position:sticky; z-index:2; grid-column:2; justify-self:end; top:0; right:0; width:48px; height:48px; margin:12px 12px -60px 0; border:0; color:#fff; background:var(--purple); cursor:pointer; font-size:30px; line-height:1; }.profile-modal__photo { grid-row:1 / span 2; min-height:360px; display:grid; place-items:center; padding:20px; color:#fff; background:linear-gradient(145deg,#d6d1e0,#fff 45%,#856db1); text-shadow:0 1px 2px #271259; font:clamp(26px,5vw,54px)/1 Rockers,sans-serif; }.profile-modal__photo.has-photo { padding:0; }.profile-modal__photo img { width:100%; height:100%; min-height:360px; object-fit:contain; object-position:center; }.profile-modal__content { grid-column:2; padding:52px 44px 44px; }.profile-modal__role { margin:0 0 4px; color:var(--purple); font:16px/1 Rockers,sans-serif; letter-spacing:.08em; }.profile-modal__content h2 { margin:0 0 28px; color:var(--purple); text-align:left; font-size:42px; }.profile-modal__details { display:grid; gap:18px; }.profile-modal__item { border-top:1px solid #d8d2e3; padding-top:12px; }.profile-modal__item h3 { margin:0 0 4px; color:var(--purple); font-size:14px; line-height:1.5; }.profile-modal__item p { margin:0; color:#111; white-space:pre-line; font-size:14px; line-height:1.9; }
body.is-modal-open .fixed_btn { display:none; }
@media (max-width:560px) { .profile-modal { padding:14px; }.profile-modal__panel { display:block; max-height:calc(100vh - 28px); }.profile-modal__photo { min-height:190px; }.profile-modal__close { position:absolute; top:0; right:0; margin:0; width:48px; min-width:48px; height:48px; min-height:48px; aspect-ratio:1 / 1; padding:0; display:grid; place-items:center; line-height:1; }.profile-modal__content { padding:30px 24px 32px; }.profile-modal__content h2 { font-size:34px; margin-bottom:22px; }.profile-modal__details { gap:14px; }.profile-modal__item h3 { font-size:13px; }.profile-modal__item p { font-size:13px; line-height:1.8; } }
@media (min-width:561px) { .profile-modal__panel { display:block; height:min(820px,calc(100vh - 48px)); margin:auto; overflow:hidden; }.profile-modal__photo { position:absolute; inset:0 auto 0 0; z-index:0; width:57%; min-height:0; height:100%; padding:0; }.profile-modal__photo::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.22) 70%,#fff 100%); }.profile-modal__photo img { width:100%; height:100%; min-height:0; object-fit:contain; object-position:left center; }.profile-modal__content { position:relative; z-index:1; height:100%; margin-left:45%; overflow-y:auto; padding:52px 44px 44px; background:rgba(255,255,255,.93); }.profile-modal__close { position:absolute; z-index:2; top:12px; right:12px; margin:0; } }

/* Official Sunrockers footer layout. */
.footer { padding:50px 20px 70px; background:var(--purple); color:#fff; text-align:center; }
.footer__main { display:grid; justify-items:center; gap:28px; padding-bottom:60px; }
.footer__logo { width:190px; height:auto; }
.footer__follow { margin:0; color:#fff; font:24px/1 Rockers,sans-serif; letter-spacing:.04em; }
.footer-social { display:flex; align-items:center; justify-content:center; gap:48px; margin-top:10px; }
.footer-social__link { display:grid; place-items:center; width:38px; height:38px; transition:opacity .3s; }
.footer-social__link:hover { opacity:.7; }
.footer-social__link img { display:block; width:100%; height:100%; }
.footer__brand { display:grid; justify-items:center; gap:40px; }
.footer__brand-logo { width:300px; max-width:72vw; height:auto; }
.footer-subnav { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; }
.footer-subnav__link, .footer .footer-subnav__link, .footer small { color:rgba(255,255,255,.88); font:14px/1.4 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; text-decoration:none; }
.footer small { display:block; margin:0; }
@media (max-width:640px) { .footer { padding:50px 20px 70px; }.footer__main { gap:22px; padding-bottom:40px; }.footer__logo { width:110px; }.footer__follow { font-size:20px; }.footer-social { gap:22px; margin-top:2px; }.footer-social__link { width:24px; height:24px; }.footer__brand { gap:20px; }.footer__brand-logo { width:min(150px,72vw); }.footer-subnav__link, .footer .footer-subnav__link, .footer small { font-size:9px; } }

.fixed_btn { position:fixed; right:max(30px,env(safe-area-inset-right)); bottom:max(30px,env(safe-area-inset-bottom)); z-index:150; width:clamp(112px,11vw,168px); }
.fixed_btn a, .fixed_btn a img { display:block; width:100%; height:auto; }
@keyframes fixedBtnBounce { 0%,100% { transform:translateY(0) scale(1); } 35% { transform:translateY(-8px) scale(1.03); } 60% { transform:translateY(2px) scale(.99); } 80% { transform:translateY(-3px) scale(1.01); } }
@media (hover:hover) and (pointer:fine) { .fixed_btn a:hover { animation:fixedBtnBounce .6s ease; } }
@media (max-width:640px) { .fixed_btn { right:8px; bottom:max(10px,env(safe-area-inset-bottom)); width:112px; } }

@media (max-width:560px) {
  .member-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member:after { font-size:18px; }
  .people-section .directors-heading { text-align:center; }
  .director, .director--reverse { grid-template-columns:1fr; }
  .director .portrait--director { width:min(150px,calc((100vw - 50px) / 2)); justify-self:center; }
  .director--reverse .portrait--director { grid-row:1; }
  .director--reverse > div { grid-row:2; }
  .profile-modal__photo { height:210px; min-height:210px; overflow:hidden; }
  .profile-modal__photo img { height:220px; min-height:220px; object-fit:cover; object-position:center top; transform:scale(1.1); }
}

@keyframes heroTitleEnter { from { opacity:0; transform:translate(-50%,-42%); } to { opacity:1; transform:translate(-50%,-50%); } }
.hero-title-enter { animation:heroTitleEnter .9s cubic-bezier(.2,.75,.2,1) both; }
.motion-ready .reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.75,.2,1); transition-delay:var(--reveal-delay,0ms); }
.motion-ready .reveal-heading { transform:translateX(-24px); }
.motion-ready .reveal.is-visible { opacity:1; transform:translate3d(0,0,0); }
.motion-ready .reveal-card { transition-duration:.5s; }
@keyframes typeCursor { 50% { opacity:0; } }
.members-background-copy p.is-typing::after { color:var(--yellow); content:"|"; animation:typeCursor .7s steps(1,end) infinite; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

.statement article ul { font-size:15px; }
.director:not(.director--reverse) { margin-bottom:110px; }
.message-section p { font-size:15px; }
@media (max-width:560px) {
  .statement article ul { font-size:14px; }
  .profile-modal__content { text-align:left !important; }
  .profile-modal__role,
  .profile-modal__content h2 { display:block; width:100% !important; margin-left:0 !important; padding-left:0 !important; text-align:left !important; text-indent:0 !important; justify-self:start; }
  .profile-modal__role { margin:0 0 4px !important; }
  .profile-modal__content h2 { margin:0 0 22px !important; }
}
.motion-ready .profile-modal__content h2 { transform:none !important; }