@charset "utf-8";

/* Native scrolling remains the fallback when a CDN is unavailable. */
html.lenis { height: auto; scroll-behavior: auto; }
.lenis.lenis_smooth { scroll-behavior: auto; }
.header { transition: transform .35s ease, background-color .3s, border-color .3s; }
.header.is_hidden { transform: translateY(-100%); }
.header:focus-within { transform: translateY(0); }
.header .gnb .submenu { transform: translateY(-10px); transform-origin: center top; clip-path: inset(0 0 100%); transition: clip-path .35s, transform .35s, opacity .35s, visibility .35s; }
.header .has_submenu:hover .submenu, .header .has_submenu:focus-within .submenu { clip-path: inset(0); transform: translateY(0); }
@media (max-width: 768px) {
.header .gnb .submenu { clip-path: none; transform: none; }
.header:has(.gnb.is_open) { transform: none; }
}

/* All content is visible until the animation runtime opts in. */
.main_process .reveal, .main_portfolio .reveal { opacity: 1; transform: none; }
.main_visual .visual_copy { opacity: var(--copy-opacity, 1); transform: translateY(var(--copy-y, 0px)); pointer-events: auto; }
.main_difference .core_label,
.main_difference .core_copy h2,
.main_difference .core_copy .desc { opacity: 1; transform: none; }
.main_strength .english .char { opacity: 1; transform: none; }
.main_advertising .service_list svg > * { opacity: 1; }
.main_strength .highlight::after { clip-path: inset(0 var(--fill-rest, 0%) 0 0); transition: none; }
.main_strength.is_entered .highlight::after { clip-path: inset(0 var(--fill-rest, 0%) 0 0); }
.main_visual .symbol { rotate: var(--tilt-y, 0deg) y; }
.main_difference .core_content { clip-path: inset(0); }
.main_difference .core_item.is_current .core_content { animation: core_reveal .75s ease both; }
@keyframes core_reveal { from { clip-path: inset(100% 0 0); translate: 0 20px; } to { clip-path: inset(0); translate: 0 0; } }
.main_advertising .service_list > li { position: relative; isolation: isolate; }
.main_advertising .service_list > li::after { content: ""; position: absolute; z-index: -1; inset: -20px; border-radius: 16px; background: linear-gradient(#ffffffdf, #ffffffed), var(--service-photo) center / cover; clip-path: circle(0% at 85% 15%); transition: clip-path .65s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.main_advertising .service_list > li:nth-child(1) { --service-photo: url('../img/sv/meta.jpg'); }
.main_advertising .service_list > li:nth-child(2) { --service-photo: url('../img/sv/gfa.jpg'); }
.main_advertising .service_list > li:nth-child(3) { --service-photo: url('../img/sv/google.jpg'); }
.main_advertising .service_list > li:nth-child(4) { --service-photo: url('../img/sv/lms.jpg'); }
.main_advertising .service_list > li:nth-child(5) { --service-photo: url('../img/sv/short.jpg'); }
.main_advertising .service_list > li:nth-child(6) { --service-photo: url('../img/sv/web.jpg'); }
.main_advertising .service_list > li:hover::after, .main_advertising .service_list > li:focus-within::after { clip-path: circle(145% at 85% 15%); }
.main_portfolio { position: relative; isolation: isolate; }
.main_portfolio::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; left: 0; height: 110vh; background: #6d3bff; clip-path: circle(var(--portal-radius, 0%) at 50% 0); opacity: var(--portal-opacity, 0); pointer-events: none; }
.main_contact { background: #140d2b; overflow: hidden; }
.main_contact .cont { flex-wrap: wrap; gap: 60px 8%; }
.main_contact .talk { position: relative; flex: 0 0 100%; display: block; color: transparent; -webkit-text-stroke: 1px #bca3ff; background: linear-gradient(270deg, transparent var(--fill-rest, 0%), #bca3ff var(--fill-rest, 0%)); background-clip: text; -webkit-background-clip: text; font-family: var(--font2); font-size: 184px; font-weight: 600; letter-spacing: -.065em; line-height: 1.1; white-space: nowrap; }
.main_contact .contact_intro { flex: 0 0 34%; padding-top: 0; }
.main_contact .contact_layout { flex: 1; }
.main_contact .contact_links { gap: 0; }
.main_contact .contact_links a { position: relative; isolation: isolate; padding: 28px 0; border: 0; border-bottom: 1px solid #6a547d; border-radius: 0; background: none; backdrop-filter: none; font-size: 36px; }
.main_contact .contact_links a::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #6d3bff; transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.main_contact .contact_links a::after { content: "↗"; margin-left: auto; transition: translate .35s ease; }
.main_contact .contact_links a:hover, .main_contact .contact_links a:focus-visible { background: none; }
.main_contact .contact_links a:hover::before, .main_contact .contact_links a:focus-visible::before { transform: scaleX(1); }
.main_contact .contact_links a:hover::after, .main_contact .contact_links a:focus-visible::after { translate: 3px -3px; }
.main_contact .contact_links svg { display: none; }
.sub_visual { overflow: hidden; isolation: isolate; background-image: none; }
.sub_visual[data-page] { background-image: none; }
.sub_visual::after { content: ""; position: absolute; inset: -8%; z-index: -2; background: var(--visual-photo) center / cover; clip-path: var(--visual-clip, inset(0)); transform: translateY(var(--visual-y, 0%)) scale(var(--visual-scale, 1)); }
.sub_visual::before { z-index: -1; }
.sub_visual[data-page="company"] { --visual-photo: url('../img/ab/co_office.jpg'); }
.sub_visual[data-page="service"] { --visual-photo: url('../img/sv/web.jpg'); }
.sub_visual[data-page="portfolio"] { --visual-photo: url('../img/pj/raum_wide.jpg'); }
.sub_visual[data-page="projects"] { --visual-photo: url('../img/ab/identity_build.jpg'); }
main .motion_line { display: block; overflow: clip; }
main .motion_line > span { display: inline-block; }
main [data-motion-label] { position: relative; --label-progress: 1; }
@media (max-width: 1100px) {
.main_contact .talk { font-size: 140px; }
.main_contact .contact_links a { font-size: 28px; }
}
@media (max-width: 768px) {
.main_visual { height: auto; }
.main_visual .sticky { position: relative; height: auto; min-height: 100svh; }
.main_visual .visual_scene { position: relative; inset: auto; width: 100%; opacity: 1; filter: none; }
.main_visual .scroll_hint { display: none; }
.main_contact .cont { gap: 36px; }
.main_contact .talk { font-size: 64px; }
.main_contact .contact_intro, .main_contact .contact_layout { flex: 0 0 100%; }
.main_contact .contact_links a { padding: 24px 0; font-size: 24px; gap: 8px; }
.main_advertising .service_list > li::after { display: none; }
.main_difference .core_item.is_current .core_content { animation: none; }
}

/* The wordmark is a content-bearing element, never an empty ornament. */
.footer { overflow: hidden; }
.footer .wordmark { position: relative; display: inline-block; margin-bottom: 70px; color: #c9b8ff; font-family: var(--font2); font-size: clamp(60px, 12.4vw, 238px); font-weight: 600; line-height: 1.1; letter-spacing: -.055em; white-space: nowrap; animation: wordmark 30s linear infinite; }
.footer .wordmark::before, .footer .wordmark::after { content: attr(data-fill-text); }
.footer .wordmark::before { padding-right: .6em; }
.footer .wordmark::after { padding: 0 .6em; }
@keyframes wordmark { to { transform: translateX(-33.3333%); } }
@media (max-width: 768px) {
.footer .wordmark { margin-bottom: 40px; font-size: 48px; animation-duration: 16s; }
}

/* Generated pointer decoration does not replace the system cursor. */
.pointer { position: fixed; z-index: 190; top: 0; left: 0; width: 20px; aspect-ratio: 1; border: 1px solid #9b7bff; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: width .25s, opacity .2s, background-color .25s; }
.pointer.is_visible { opacity: 1; }
.pointer.is_link { width: 48px; background: #6d3bff22; }
.pointer.is_view { width: 88px; background: #6d3bff; border-color: #6d3bff; }
.pointer::after { content: attr(data-label); position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; color: #ffffff; font-family: var(--font2); font-size: 14px; }
@media (max-width: 768px), (pointer: coarse) {
.pointer { display: none; }
}

/* Static, complete alternatives for reduced motion and script failures. */
html:not([data-experience="desktop"]) .main_visual { height: auto; }
html:not([data-experience="desktop"]) .main_visual .sticky { position: relative; flex-direction: column; height: auto; min-height: 100svh; }
html:not([data-experience="desktop"]) .main_visual .visual_scene { position: relative; inset: auto; width: 100%; opacity: 1; filter: none; }
html:not([data-experience="desktop"]) .main_visual .symbol { animation: none; rotate: none; }
html:not([data-experience="desktop"]) .main_visual .marquee { animation: none; }
html:not([data-experience="desktop"]) .main_visual .scroll_hint { display: none; }
html:not([data-experience]) .main_difference { height: auto; }
html:not([data-experience]) .main_difference .core_sticky { position: relative; height: auto; display: block; }
html:not([data-experience]) .main_difference .core_left { width: 100%; height: auto; padding: 70px 24px; }
html:not([data-experience]) .main_difference .core_copy { position: relative; inset: auto; }
html:not([data-experience]) .main_difference .core_right { width: 100%; height: auto; overflow: visible; }
html:not([data-experience]) .main_difference .core_track { display: block; height: auto; transform: none; }
html:not([data-experience]) .main_difference .core_item { width: 100%; height: auto; min-height: 0; padding: 36px 24px; }
html:not([data-experience]) .main_difference .core_content { position: relative; inset: auto; margin-top: 24px; }
html:not([data-experience]) .main_difference .core_controls,
html:not([data-experience]) .main_difference .core_progress { display: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.pointer { display: none; }
.main_visual { height: auto; }
.main_visual .sticky { position: relative; height: auto; min-height: 100svh; }
.main_visual .visual_scene { opacity: 1; filter: none; }
.main_visual .scroll_hint { display: none; }
.main_visual .visual_copy { opacity: 1; transform: none; pointer-events: auto; }
.main_difference { height: auto; }
.main_difference .core_sticky { position: relative; height: auto; display: block; }
.main_difference .core_left { width: 100%; height: auto; padding: 70px 24px; }
.main_difference .core_copy { position: relative; inset: auto; }
.main_difference .core_right { width: 100%; height: auto; overflow: visible; }
.main_difference .core_track { display: block; height: auto; transform: none; }
.main_difference .core_item { width: 100%; height: auto; min-height: 0; padding: 36px 24px; }
.main_difference .core_content { position: relative; inset: auto; margin-top: 24px; }
.main_difference .core_controls, .main_difference .core_progress { display: none; }
.main_strength .stats li:hover { transform: none; }
}