@charset "utf-8";
.main_visual {position: relative;height: 100svh;min-height: 64rem;color: #fff;background: var(--ink);overflow: hidden;}
.visual_slide {position: absolute;inset: 0;display: flex;align-items: flex-end;padding-bottom: 13rem;opacity: 0;visibility: hidden;transition: opacity 1s var(--ease), visibility 1s;}
.visual_slide.is_active {z-index: 1;opacity: 1;visibility: visible;}
.visual_bg {position: absolute;inset: -2%;background-size: cover;background-position: center;}
.vs1 .visual_bg {background-image: linear-gradient(90deg, rgba(5, 10, 16, .88), rgba(5, 10, 16, .4) 55%, rgba(5, 10, 16, .1)), linear-gradient(0deg, rgba(5, 10, 16, .8), transparent 45%), url('../../images/visual-main.jpg');}
.vs2 .visual_bg {background-image: linear-gradient(90deg, rgba(5, 10, 16, .85), rgba(5, 10, 16, .35) 55%, rgba(5, 10, 16, .05)), linear-gradient(0deg, rgba(5, 10, 16, .8), transparent 45%), url('../../images/visual-main-2.jpg');}
.vs3 .visual_bg {background-image: linear-gradient(90deg, rgba(5, 10, 16, .85), rgba(5, 10, 16, .35) 55%, rgba(5, 10, 16, .05)), linear-gradient(0deg, rgba(5, 10, 16, .8), transparent 45%), url('../../images/visual-main-3.jpg');}
.visual_slide.is_active .visual_bg {animation: visual_zoom 12s linear forwards;}
.visual_slide::before {content: '';position: absolute;inset: 0;z-index: 1;background: radial-gradient(60% 80% at 100% 0%, rgba(0, 229, 255, .22), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(255, 196, 0, .14), transparent 60%);mix-blend-mode: screen;pointer-events: none;}
.visual_no {position: absolute;z-index: 1;right: var(--page-gutter);top: 50%;translate: 0 -55%;font-size: clamp(14rem, 22vw, 38rem);font-weight: 800;line-height: 1;letter-spacing: -.06em;color: transparent;-webkit-text-stroke: .15rem rgba(0, 229, 255, .35);pointer-events: none;opacity: 0;}
.visual_slide.is_active .visual_no {animation: no_in 1.2s .3s var(--ease) both;}
.visual_fx {position: absolute;inset: 0;z-index: 3;pointer-events: none;background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 .1rem, transparent .1rem .4rem);}
.visual_fx::after {content: '';position: absolute;left: 0;right: 0;height: 12rem;background: linear-gradient(180deg, transparent, rgba(0, 229, 255, .12), transparent);animation: scan 8s linear infinite;}
.visual_hud {position: absolute;z-index: 3;inset: calc(var(--header-height) + 1.6rem) var(--page-gutter) 2.6rem;pointer-events: none;--c: rgba(0, 229, 255, .85);background: linear-gradient(var(--c), var(--c)) top left / 3.2rem .2rem no-repeat, linear-gradient(var(--c), var(--c)) top left / .2rem 3.2rem no-repeat, linear-gradient(var(--c), var(--c)) top right / 3.2rem .2rem no-repeat, linear-gradient(var(--c), var(--c)) top right / .2rem 3.2rem no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 3.2rem .2rem no-repeat, linear-gradient(var(--c), var(--c)) bottom left / .2rem 3.2rem no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 3.2rem .2rem no-repeat, linear-gradient(var(--c), var(--c)) bottom right / .2rem 3.2rem no-repeat;}
.visual_label {position: absolute;z-index: 4;left: calc(var(--page-gutter) + 2.4rem);top: calc(var(--header-height) + 3.6rem);display: flex;align-items: center;gap: 1.2rem;font: 500 1.3rem var(--font-mono);letter-spacing: .2em;color: rgba(0, 229, 255, .9);}
.visual_label i {width: .9rem;height: .9rem;border-radius: 50%;background: #00e5ff;box-shadow: 0 0 1.2rem #00e5ff;animation: blink 1.4s steps(2) infinite;}
.main_visual.is_paused *, .main_visual.is_paused *::before, .main_visual.is_paused *::after {animation-play-state: paused !important;}
.main_visual .slogan {position: relative;z-index: 2;display: flex;align-items: flex-end;gap: 4%;padding-inline: calc(var(--page-gutter) + 2.4rem);}
.main_visual .title {flex-shrink: 0;font-size: var(--fs-display);font-weight: 800;line-height: 1;letter-spacing: -.04em;text-transform: uppercase;}
.main_visual .title em {color: var(--accent);text-shadow: 0 0 2.4rem rgba(255, 196, 0, .45);}
.visual_slide.is_active .title {animation: title_in 1s both, glitch .7s .25s steps(2) 2;}
.main_visual .desc {flex: 1;text-align: right;font-size: var(--fs-lead);font-weight: 500;}
.visual_slide.is_active .desc {animation: text_in 1.1s .4s both;}
.main_visual .desc p + p {margin-top: 1.5rem;padding-top: 1.5rem;border-top: .1rem solid rgba(0, 229, 255, .5);}
.visual_ctl {position: absolute;z-index: 5;left: calc(var(--page-gutter) + 2.4rem);right: calc(var(--page-gutter) + 2.4rem);bottom: 5rem;display: flex;align-items: center;gap: 3rem;}
.vctl_count {font: 500 1.4rem var(--font-mono);letter-spacing: .1em;color: rgba(255, 255, 255, .6);}
.vctl_count b {color: #00e5ff;font-weight: 700;}
.vbars {display: flex;flex: 1;gap: 1rem;}
.vbar {position: relative;flex: 1;max-width: 18rem;height: 3.2rem;}
.vbar::before {content: '';position: absolute;left: 0;right: 0;top: 50%;height: .3rem;background: rgba(255, 255, 255, .25);}
.vbar i {position: absolute;left: 0;top: 50%;width: 0;height: .3rem;background: #00e5ff;box-shadow: 0 0 1rem #00e5ff;}
.vbar.is_done i {width: 100%;}
.vbar.is_active i {animation: vbar 7s linear forwards;}
.vbtns {display: flex;gap: .8rem;}
.vbtns button {display: grid;place-items: center;width: 4.4rem;height: 4.4rem;border: .1rem solid rgba(0, 229, 255, .6);font-size: 1.8rem;font-weight: 800;transition: background .3s, color .3s, border-color .3s;}
.vbtns button:hover {background: #00e5ff;color: var(--ink);border-color: #00e5ff;}
@keyframes title_in {from {opacity: 0;transform: translateY(4rem);filter: blur(4px);} to {opacity: 1;transform: none;filter: blur(0);}}
@keyframes glitch {0%, 100% {text-shadow: none;translate: 0 0;} 20% {text-shadow: -.4rem 0 #00e5ff, .4rem 0 #ff2bd6;translate: .3rem 0;} 40% {text-shadow: .4rem 0 #00e5ff, -.4rem 0 #ff2bd6;translate: -.3rem 0;} 60% {text-shadow: none;translate: 0 0;} 80% {text-shadow: -.2rem 0 #00e5ff;translate: .2rem 0;}}
@keyframes no_in {from {opacity: 0;translate: 4rem -55%;} to {opacity: 1;translate: 0 -55%;}}
@keyframes blink {50% {opacity: .15;}}
@keyframes vbar {from {width: 0;} to {width: 100%;}}
@keyframes grid_move {to {background-position: 0 8rem, 8rem 0;}}
@keyframes scan {from {top: -15%;} to {top: 105%;}}
@keyframes visual_zoom {from {transform: scale(1);} to {transform: scale(1.1);}}
.main_overview {padding: 28rem 0;overflow: hidden;}
.overview_inner {position: relative;}
.overview_text {position: relative;z-index: 1;}
.overview_text .section_title {margin: 5rem 0;font-size: clamp(3.2rem, 3.4vw, 6rem);line-height: 1.4;}
.overview_text .section_desc {max-width: 62rem;}
.overview_text .btn_cut {margin-top: 5rem;}
.overview_image {position: absolute;right: 0;top: 50%;width: 46%;height: 80vh;max-height: 76rem;translate: 0 -50%;}
.overview_image .img_box {width: 100%;height: 100%;}
.main_lineup {background: var(--ink);}
.lineup_item {position: sticky;top: 0;height: 100svh;min-height: 68rem;color: #fff;overflow: hidden;}
.lineup_item1 {background: linear-gradient(135deg, #131a21 0%, #1c2631 100%);}
.lineup_item2 {background: linear-gradient(135deg, #1a2430 0%, #2a3340 100%);}
.lineup_item3 {background: linear-gradient(135deg, #222c37 0%, #35404e 100%);}
.lineup_item::before {content: '';position: absolute;inset: 0;background-image: linear-gradient(rgba(255, 255, 255, .05) .1rem, transparent .1rem), linear-gradient(90deg, rgba(255, 255, 255, .05) .1rem, transparent .1rem);background-size: 8rem 8rem;background-position: 0 var(--gy, 0px);}
.lineup_item::after {content: '';position: absolute;inset: 0;z-index: 0;background: radial-gradient(34rem circle at var(--mx, 72%) var(--my, 42%), var(--glow, rgba(0, 229, 255, .18)), transparent 62%);pointer-events: none;transition: opacity .4s;}
.lineup_item1 {--glow: rgba(0, 229, 255, .2);}
.lineup_item2 {--glow: rgba(255, 196, 0, .18);}
.lineup_item3 {--glow: rgba(120, 255, 235, .18);}
.lineup_fx {position: absolute;inset: 0;z-index: 0;width: 100%;height: 100%;pointer-events: none;}.lineup_wrap {position: relative;z-index: 1;height: 100%;}
.lineup_count {position: absolute;top: 14%;left: var(--page-gutter);font: 500 1.4rem var(--font-mono);color: rgba(255, 255, 255, .55);}
.lineup_count strong {margin-right: 1rem;color: var(--accent);font-weight: 700;}
.lineup_scroll {position: absolute;right: 2rem;top: 50%;rotate: 90deg;font: 500 1.3rem var(--font-mono);letter-spacing: .2em;color: rgba(255, 255, 255, .5);}
.lineup_inner {display: flex;align-items: center;justify-content: space-between;gap: 5%;width: 100%;max-width: var(--container-width);height: 100%;padding-inline: var(--page-gutter);margin: auto;}
.lineup_text {flex: 1;}
.lineup_text h2 {margin: 3rem 0 2.4rem;font-size: var(--fs-h2);font-weight: 800;line-height: 1.2;letter-spacing: -.03em;}
.lineup_text > p:not(.section_st) {max-width: 56rem;font-size: var(--fs-lead);line-height: 1.8;color: rgba(255, 255, 255, .8);}
.lineup_visual {position: relative;width: 42%;height: 31vw;}
.lineup_visual .img_box {width: 100%;height: 100%;}
.lineup_visual:hover .img_box img {transform: scale(1.05);}
.lineup_no {position: absolute;right: -2rem;top: -4rem;font-size: clamp(10rem, 13vw, 22rem);font-weight: 800;line-height: 1;color: transparent;-webkit-text-stroke: .1rem rgba(255, 196, 0, .7);pointer-events: none;}
.btn_more {display: inline-flex;align-items: center;gap: 3rem;margin-top: 4rem;font-size: 1.6rem;font-weight: 700;}
.btn_more span {display: grid;place-items: center;width: 5.5rem;height: 5.5rem;border: .1rem solid rgba(255, 255, 255, .5);font-size: 2.4rem;transition: color .3s, background .3s, transform .3s;}
.btn_more:hover span {color: var(--ink);background: var(--accent);border-color: var(--accent);transform: rotate(45deg);}
.main_portfolio {padding: 20rem 0;overflow: hidden;background: var(--paper);}
.portfolio {position: relative;margin-top: 5rem;touch-action: pan-y;}
.portfolio_viewport {width: 62%;margin: auto;}
.portfolio_slide {text-align: center;}
.portfolio_slide figure {overflow: hidden;aspect-ratio: 1.7;}
.portfolio_slide figure .img_box {width: 100%;height: 100%;}
.portfolio_slide.is_active figure {animation: portfolio_in .65s both;}
.portfolio_slide h3 {margin-top: 3.5rem;font-size: var(--fs-h2);font-weight: 800;letter-spacing: -.03em;}
.portfolio_slide dl {display: flex;justify-content: center;margin-top: 1.5rem;font-size: 1.8rem;color: var(--mute);}
.portfolio_slide dt {padding-right: 2rem;margin-right: 2rem;border-right: .1rem solid #c4cad1;}
.navigation {position: absolute;inset: 0;display: flex;align-items: center;justify-content: space-between;padding-bottom: 11rem;pointer-events: none;}
.navigation button {display: flex;align-items: center;justify-content: space-between;width: 16%;gap: 1rem;text-align: left;pointer-events: auto;color: var(--mute);font-size: 1.4rem;}
.navigation button > span[aria-hidden] {font-size: 3.5rem;transition: transform .3s;}
.navigation strong {display: block;margin-top: 1rem;color: var(--text);font-size: 2.2rem;font-weight: 700;}
.navigation .next {text-align: right;}
.navigation .prev:hover > span[aria-hidden] {transform: translateX(-.5rem);}
.navigation .next:hover > span[aria-hidden] {transform: translateX(.5rem);}
.drag_cursor {position: fixed;left: 0;top: 0;z-index: 110;display: grid;place-items: center;width: 11rem;height: 11rem;background: rgba(255, 196, 0, .9);color: var(--ink);font: 800 1.5rem var(--font-mono);letter-spacing: .1em;pointer-events: none;opacity: 0;transform: translate(-50%, -50%);clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));}
.drag_cursor.is_visible {opacity: 1;}
.sample_note {margin-top: 3rem;font-size: var(--fs-small);text-align: center;color: var(--mute);}
@keyframes portfolio_in {from {clip-path: polygon(0 0, 0 0, 15% 100%, 0 100%);} to {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}}
.main_overview, .main_portfolio, .main_merit {position: relative;overflow: hidden;}
.overview_inner, .main_portfolio > .container, .main_merit > .container {position: relative;z-index: 1;}
.fx_blueprint {position: absolute;inset: 0;z-index: 0;overflow: hidden;pointer-events: none;background-image: radial-gradient(rgba(14, 18, 23, .16) .12rem, transparent .13rem);background-size: 4rem 4rem;}
.fx_ch_h, .fx_ch_v {position: absolute;left: 0;top: 0;background: rgba(217, 166, 0, .7);opacity: 0;transition: opacity .3s;}
.fx_ch_h {width: 100%;height: .1rem;transform: translateY(var(--cy, 0px));}
.fx_ch_v {width: .1rem;height: 100%;transform: translateX(var(--cx, 0px));}
.fx_ch_ring {position: absolute;left: 0;top: 0;width: 9rem;height: 9rem;margin: -4.5rem 0 0 -4.5rem;border: .15rem solid rgba(217, 166, 0, .8);border-radius: 50%;transform: translate(var(--cx, 0px), var(--cy, 0px));opacity: 0;transition: opacity .3s;}
.fx_ch_label {position: absolute;left: 0;top: 0;padding: .4rem .8rem;background: var(--ink);color: var(--accent);font: 700 1.2rem var(--font-mono);letter-spacing: .1em;white-space: nowrap;transform: translate(calc(var(--cx, 0px) + 2.4rem), calc(var(--cy, 0px) + 2.4rem));opacity: 0;transition: opacity .3s;}
.fx_blueprint.is_on .fx_ch_h, .fx_blueprint.is_on .fx_ch_v, .fx_blueprint.is_on .fx_ch_ring, .fx_blueprint.is_on .fx_ch_label {opacity: 1;}
.overview_image .img_box {transform: perspective(90rem) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));transition: transform .25s ease-out;will-change: transform;}
.fx_gear {position: absolute;z-index: 0;color: var(--ink);opacity: .09;pointer-events: none;will-change: transform;}
.fx_gear.g1 {left: -12rem;top: 8rem;width: 46rem;height: 46rem;}
.fx_gear.g2 {right: -16rem;bottom: 4rem;width: 62rem;height: 62rem;}
.fx_gear.g3 {right: 18%;top: -10rem;width: 24rem;height: 24rem;}
.fx_rain {position: absolute;inset: 0;z-index: 0;width: 100%;height: 100%;pointer-events: none;opacity: .55;}
.main_merit {padding: 23rem 0 26rem;background: linear-gradient(180deg, #0e1217, #17202a);color: #fff;}
.main_merit .section_title {color: #fff;}
.merit_circles {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2.5rem;margin-top: 12rem;}
.merit_circle {aspect-ratio: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 3rem;border: .15rem dashed rgba(255, 255, 255, .7);border-radius: 50%;text-align: center;transition: background .4s, color .4s, border-color .4s;}
.merit_no {font: 700 1.6rem var(--font-mono);color: var(--accent);transition: color .3s;}
.merit_circle h3 {font-size: clamp(1.8rem, 1.3vw, 2.4rem);font-weight: 800;margin: 2rem 0;}
.merit_circle p {max-height: 0;opacity: 0;overflow: hidden;font-size: 1.4rem;line-height: 1.7;transition: max-height .4s, opacity .4s;}
.merit_circle:hover, .merit_circle:focus-visible {background: rgba(255, 196, 0, .95);color: var(--ink);border-color: transparent;}
.merit_circle:hover .merit_no, .merit_circle:focus-visible .merit_no {color: var(--ink);}
.merit_circle:hover p, .merit_circle:focus-visible p {max-height: 15rem;opacity: 1;}
@media (max-width: 1399px) {
.main_visual .slogan {flex-direction: column;align-items: flex-start;gap: 3.4rem;}
.main_visual .desc {text-align: left;}
.main_overview {padding: 20rem 0;}
.lineup_text > p:not(.section_st) {font-size: 1.8rem;}
.lineup_scroll {display: none;}
.merit_circles {grid-template-columns: repeat(2, 1fr);max-width: 90rem;margin-inline: auto;}
.merit_circle h3 {font-size: 2.4rem;}
.merit_circle p {max-height: 15rem;opacity: 1;}
}
@media (max-width: 1024px) {
.main_portfolio {padding-block: 12rem;}
.main_overview {padding: 12rem 0;}
.overview_inner {display: grid;gap: 5rem;}
.overview_image {position: relative;top: auto;width: 100%;height: 52rem;translate: none;}
.lineup_inner {flex-direction: column;align-items: flex-start;justify-content: center;gap: 4rem;}
.lineup_text h2 {margin: 2rem 0;}
.lineup_visual {width: 100%;height: 34vw;}
.lineup_no {display: none;}
.portfolio_viewport {width: 76%;}
.navigation button {width: 10%;}
.navigation button > span:not([aria-hidden]) {display: none;}
.main_merit {padding: 14rem 0 16rem;}
}
@media (max-width: 768px) {
.main_portfolio {padding-block: 8rem;}
.main_visual {min-height: 54rem;}
.visual_slide {padding-bottom: 15rem;}
.visual_no {display: none;}
.visual_hud {inset: calc(var(--header-height) + 1rem) var(--page-gutter) 1.6rem;}
.visual_label {left: calc(var(--page-gutter) + 1.6rem);font-size: 1.1rem;}
.visual_ctl {left: calc(var(--page-gutter) + 1.6rem);right: calc(var(--page-gutter) + 1.6rem);bottom: 3.4rem;gap: 1.4rem;}
.vctl_count {display: none;}
.vbtns button {width: 4rem;height: 4rem;}
.main_visual .desc {font-size: 1.6rem;line-height: 1.7;}
.main_overview {padding: 8rem 0;}
.fx_ch_ring, .fx_ch_label, .fx_ch_h, .fx_ch_v {display: none;}
.fx_gear.g1 {width: 26rem;height: 26rem;}
.fx_gear.g2 {width: 34rem;height: 34rem;}
.fx_gear.g3 {display: none;}
.fx_rain {opacity: .35;}
.overview_image {height: 70vw;max-height: 42rem;}
.lineup_item {height: auto;min-height: 100svh;padding: 10rem 0 5rem;}
.lineup_wrap {height: auto;}
.lineup_count {position: static;margin: 0 var(--page-gutter) 3rem;}
.lineup_inner {align-items: stretch;}
.lineup_text > p:not(.section_st) {font-size: 1.6rem;}
.lineup_visual {height: 62vw;max-height: 40rem;}
.portfolio {margin-top: 3rem;padding-bottom: 5rem;}
.portfolio_viewport {width: 100%;}
.portfolio_slide figure {aspect-ratio: 1.25;}
.portfolio_slide h3 {margin-top: 2rem;}
.portfolio_slide dl {font-size: 1.5rem;}
.navigation {inset: auto 0 0;padding: 0;}
.navigation button {width: 4rem;}
.drag_cursor {display: none;}
.main_merit {padding: 9rem 0 10rem;}
.merit_circles {grid-template-columns: 1fr;gap: 2rem;max-width: 36rem;margin-top: 5rem;}
.merit_circle {padding: 3.5rem;}
}
@media (hover: none) {
.merit_circle p {max-height: none;opacity: 1;}
}
@media (prefers-reduced-motion: reduce) {
.lineup_item {position: relative;}
}