@charset "UTF-8";
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}

@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
html {
visibility: visible !important;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: initial;
}
::selection {
background-color: #000000;
color: #FFFFFF;
}
::-moz-selection {
background-color: #000000;
color: #FFFFFF;
}
body {
background-color: #F2F2F2;
color: #000000;
font-family: "Noto Sans JP", sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.05;
z-index: 9999;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
h1, h2, h3, h4, h5, h6 {
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease-out, outline 0.2s ease-out;
}
button,
input,
select,
textarea {
transition: box-shadow 0.2s ease-out, outline 0.2s ease-out;
}
img {
max-width: 100%;
height: auto;
display: block;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.u-page-title {
font-size: clamp(3rem, 12vw, 8rem);
font-weight: 950;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
}
.u-section-title {
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 900;
margin-bottom: 3rem;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.u-section-title::before {
content: "";
display: block;
width: 1.5rem;
height: 1.5rem;
background-color: #FFE600;
border: 3px solid #000000;
flex-shrink: 0;
}
.u-section-title__sub {
font-size: 0.4em;
font-weight: 700;
color: rgba(0, 0, 0, 0.5);
margin-left: 1rem;
letter-spacing: 0.1em;
}
@media (max-width: 768px) {
.u-section-title__sub {
width: 100%;
margin-left: 0;
padding-left: 2.5rem;
margin-top: -0.5rem;
}
}
@media (max-width: 768px) {
.u-section-title {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.u-section-title::before {
display: none;
}
.u-section-title__inner,
.u-section-title > * {
display: block;
width: 100%;
text-align: center;
}
.u-section-title::after {
content: "";
display: block;
width: 48px;
height: 4px;
background-color: #FFE600;
margin-top: 1rem;
border-radius: 2px;
}
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
word-break: normal;
line-break: strict;
}
.u-keep-word {
display: inline-block;
white-space: nowrap;
}
[class*=-cta__text] .u-keep-word {
white-space: normal;
}
@media (max-width: 768px) {
.u-hidden-sm {
display: none !important;
}
}
.u-visible-sm {
display: none !important;
}
@media (max-width: 768px) {
.u-visible-sm {
display: block !important;
}
}
@media (min-width: 769px) {
.u-hidden-pc {
display: none !important;
}
}
@media (max-width: 768px) {
.u-hidden-sp {
display: none !important;
}
}
@media (min-width: 1025px) {
.u-hidden-desktop {
display: none !important;
}
}
@media (max-width: 1024px) {
.u-hidden-md,
.u-hidden-tablet-down {
display: none !important;
}
}
.u-section-padding {
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
@media (max-width: 768px) {
.u-section-padding {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.c-rich-text {
line-height: 1.8;
font-weight: 500;
}
.c-rich-text p {
margin-bottom: 1.5rem;
}
.c-rich-text h2 {
font-size: 1.5rem;
font-weight: 900;
margin: 3rem 0 1.5rem;
border-left: 4px solid #FFE600;
padding-left: 1rem;
}
.c-rich-text h3 {
font-size: 1.2rem;
font-weight: 900;
margin: 1.5rem 0 1rem;
}
.c-rich-text ul, .c-rich-text ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.c-rich-text ul li, .c-rich-text ol li {
margin-bottom: 0.5rem;
}
.u-phrase-wrap {
word-break: auto-phrase;
}
.u-mono {
font-family: "Space Mono", monospace;
}
.u-bg-gray {
background-color: #f8f8f8 !important;
}
.u-bg-brand {
background-color: #FFE600 !important;
}
html, body {
height: 100%;
min-height: 100dvh;
}
:root {
--header-height: 80px;
--container-width: 1400px;
}
.c-skip-link {
position: absolute;
top: 0;
left: 0;
z-index: 10000;
padding: 1rem 1.5rem;
background: #000000;
color: #fff;
font-weight: 700;
text-decoration: none;
border-radius: 0 0 4px 0;
transform: translateY(-100%);
transition: transform 0.2s ease;
visibility: visible; }
.c-skip-link:focus, .c-skip-link:focus-visible {
transform: translateY(0);
outline: 3px solid #FFE600;
outline-offset: 2px;
}
.l-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 clamp(1.5rem, 5vw, 7.5rem);
width: 100%;
}
@media (max-width: 768px) {
.l-container {
padding: 0 5vw;
}
}
.l-header {
height: var(--header-height);
background-color: #fff;
border-bottom: 3px solid #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: transform 0.3s ease, background-color 0.3s ease, height 0.3s ease;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
}
body.admin-bar .l-header {
--admin-bar-h: 32px;
top: var(--admin-bar-h);
}
@media screen and (max-width: 782px) {
body.admin-bar .l-header {
--admin-bar-h: 46px;
}
}
body.admin-bar .l-header.is-open {
top: 0;
padding-top: var(--admin-bar-h);
}
.l-header.is-open::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1040;
pointer-events: none;
}
.l-header.is-scrolled {
height: 70px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.l-header__inner {
height: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.l-header__logo {
position: relative;
z-index: 1100;
}
.l-header__logo a {
display: flex;
align-items: center;
text-decoration: none;
transition: transform 0.2s ease;
touch-action: manipulation;
}
@media (hover: hover) {
.l-header__logo a:hover {
transform: scale(1.05);
}
}
.l-header__logo img {
height: 3.2rem;
}
@media (max-width: 1024px) {
.l-header__logo img {
height: 2.2rem;
}
}
.l-header__logo img {
width: auto;
display: block;
transition: all 0.3s ease;
}
.l-header__logo img.is-white {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
opacity: 0;
}
.l-header.is-open .l-header__logo {
opacity: 0;
pointer-events: none;
}
.l-header__nav-wrap {
display: flex;
align-items: center;
gap: 3rem;
}
@media (max-width: 1024px) {
.l-header__nav-wrap {
position: fixed;
top: 15px;
right: 15px;
bottom: calc(80px + env(safe-area-inset-bottom) + 15px);
left: 15px;
width: calc(100% - 30px);
height: auto;
max-height: calc(100dvh - 80px - env(safe-area-inset-bottom) - 45px);
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px);
border: 3px solid #fff;
border-radius: 12px;
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.4);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 50px 20px 30px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 1050;
opacity: 0;
visibility: hidden;
pointer-events: none;
clip-path: circle(0% at calc(100% - 2rem) 2rem);
transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.5s step-end, opacity 0.2s ease;
}
.l-header__nav-wrap.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: circle(150% at calc(100% - 2rem) 2rem);
transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s step-start, opacity 0.2s ease;
}
}
@media (max-width: 1024px) {
.l-header__nav {
width: 100%;
}
}
.l-header__menu {
display: flex;
gap: 1rem;
list-style: none;
}
@media (max-width: 1024px) {
.l-header__menu {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
}
}
.l-header__menu li {
position: relative;
}
.l-header__menu li.m-prod {
order: 1;
}
.l-header__menu li.m-lect {
order: 2;
}
.l-header__menu li.m-crea {
order: 3;
}
.l-header__menu li.m-blog {
order: 4;
}
.l-header__menu li.m-assets {
order: 5;
}
.l-header__menu li.m-top {
display: none;
}
@media (max-width: 1024px) {
.l-header__menu li.m-top {
display: block;
order: 1;
}
}
@media (max-width: 1024px) {
.l-header__menu li {
width: 100%;
}
.l-header__menu li.m-crea {
order: 2;
}
.l-header__menu li.m-prod {
order: 3;
}
.l-header__menu li.m-lect {
order: 4;
}
.l-header__menu li.m-blog {
order: 5;
}
.l-header__menu li.m-assets {
order: 6;
}
}
.l-header__menu li a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
padding: 6px 16px;
border: 2.5px solid transparent;
border-radius: 4px;
transition: all 0.1s ease;
background-color: transparent;
}
.l-header__menu li a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #FFE600;
}
.l-header__menu li a span {
font-size: 0.95rem;
font-weight: 950;
color: #000000;
line-height: 1.2;
}
.l-header__menu li a .u-mono {
display: none;
}
.l-header__menu li a small {
font-size: 0.6rem;
font-family: "Space Mono", monospace;
font-weight: 700;
color: rgba(0, 0, 0, 0.4);
letter-spacing: 0.1em;
margin-top: 2px;
}
@media (max-width: 1024px) {
.l-header__menu li a {
padding: 20px 10px;
min-height: 100px;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.05);
flex-direction: column;
gap: 4px;
text-align: center;
}
.l-header__menu li a span {
font-size: 1.3rem;
color: #fff;
line-height: 1.1;
}
.l-header__menu li a small {
font-size: 0.7rem;
font-weight: 900;
margin-top: 2px;
}
.l-header__menu li a:active {
background-color: rgba(255, 255, 255, 0.1);
transform: scale(0.96);
}
}
@media (max-width: 1024px) {
.l-header__menu li.m-top small {
color: #fff;
}
.l-header__menu li.m-prod small {
color: #FF6B00;
}
.l-header__menu li.m-lect small {
color: #7B6FEF;
}
.l-header__menu li.m-crea small {
color: #5CE1E6;
}
.l-header__menu li.m-blog small {
color: #FFDE59;
}
.l-header__menu li.m-assets small {
color: #FFE600;
}
}
@media (hover: hover) and (min-width: 1025px) {
.l-header__menu li.m-top a:hover {
background-color: #fff;
border-color: #000000;
box-shadow: 3px 3px 0 #000000;
transform: rotate(1deg) translateY(-2px);
}
.l-header__menu li.m-top a:hover span, .l-header__menu li.m-top a:hover small {
color: #000000;
}
.l-header__menu li.m-prod a:hover {
background-color: #FF6B00;
border-color: #000000;
box-shadow: 3px 3px 0 #000000;
transform: rotate(-2deg) translateY(-2px);
}
.l-header__menu li.m-prod a:hover span, .l-header__menu li.m-prod a:hover small {
color: #000000;
}
.l-header__menu li.m-lect a:hover {
background-color: #7B6FEF;
border-color: #000000;
box-shadow: 3px 3px 0 #000000;
transform: rotate(2deg) translateY(-2px);
}
.l-header__menu li.m-lect a:hover span, .l-header__menu li.m-lect a:hover small {
color: #000000;
}
.l-header__menu li.m-crea a:hover {
background-color: #000000;
border-color: #000000;
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
transform: rotate(-1deg) translateY(-2px);
}
.l-header__menu li.m-crea a:hover span, .l-header__menu li.m-crea a:hover small {
color: #fff;
}
.l-header__menu li.m-blog a:hover {
background-color: #FFFFFF;
border-color: #000000;
box-shadow: 3px 3px 0 #000000;
transform: rotate(3deg) translateY(-2px);
}
.l-header__menu li.m-blog a:hover span, .l-header__menu li.m-blog a:hover small {
color: #000000;
}
.l-header__menu li.m-assets a:hover {
background-color: #FFE600;
border-color: #000000;
box-shadow: 3px 3px 0 #000000;
transform: rotate(-2deg) translateY(-2px);
}
.l-header__menu li.m-assets a:hover span, .l-header__menu li.m-assets a:hover small {
color: #000000;
}
}
.l-header__nav-footer {
display: none;
}
@media (max-width: 1024px) {
.l-header__nav-footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
width: 100%;
}
}
.l-header__nav-sns {
display: flex;
gap: 25px;
margin-bottom: 20px;
}
.l-header__nav-sns a {
font-family: "Space Mono", monospace;
font-size: 0.8rem;
font-weight: 700;
color: #fff;
text-decoration: none;
opacity: 0.7;
}
.l-header__nav-sns a:active {
color: #FFE600;
opacity: 1;
}
.l-header__nav-info {
text-align: center;
}
.l-header__nav-info p {
font-size: 0.6rem;
color: rgba(255, 255, 255, 0.4);
line-height: 1.4;
margin-bottom: 2px;
}
@media (max-width: 1024px) {
.l-header__cta {
margin-top: 30px;
width: 100%;
display: flex;
justify-content: center;
}
}
.l-header__cta .c-button--header {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.6rem;
border-radius: 100px;
min-width: 160px;
height: 2.8rem;
font-size: 0.8rem;
font-weight: 950;
border: 3px solid #000000;
background-color: #FFE600;
color: #000000;
box-shadow: 4px 4px 0 #000000;
transition: all 0.1s ease;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1;
}
@media (max-width: 1024px) {
.l-header__cta .c-button--header {
width: 100%;
max-width: 280px;
height: 3.5rem;
font-size: 1.1rem;
border-radius: 50px;
margin-bottom: 10px;
border-color: #fff;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}
}
.l-header__hamburger {
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
background-color: #FFE600;
border: 3px solid #000000;
box-shadow: 4px 4px 0 #000000;
cursor: pointer;
z-index: 1100;
padding: 0 12px 0 15px;
height: 3rem;
border-radius: 4px;
transition: all 0.2s ease;
}
.l-header__hamburger:focus-visible {
outline: none;
box-shadow: 4px 4px 0 #000000, 0 0 0 3px #FFE600;
}
@media (max-width: 1024px) {
.l-header__hamburger {
display: flex;
}
}
.l-header__hamburger::after {
content: "MENU";
font-size: 0.7rem;
font-weight: 950;
color: #000000;
letter-spacing: 0.05em;
}
.l-header.is-open .l-header__hamburger {
background-color: #fff;
}
.l-header.is-open .l-header__hamburger::after {
content: "CLOSE";
}
.l-header__hamburger-lines {
display: flex;
flex-direction: column;
gap: 5px;
width: 18px;
}
.l-header__hamburger span {
display: block;
width: 100%;
height: 3px;
background-color: #000000;
transition: all 0.3s ease;
border-radius: 4px;
}
.l-header__hamburger.is-open span:first-child {
transform: translateY(4px) rotate(45deg);
}
.l-header__hamburger.is-open span:last-child {
transform: translateY(-4px) rotate(-45deg);
}
.l-footer {
background-color: #000000;
color: #fff;
padding: clamp(3rem, 6vw, 5rem) 0 0;
margin-top: 0;
position: relative;
overflow: hidden;
}
.l-footer__inner {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 2;
}
.l-footer__main {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 5rem;
margin-bottom: 3rem;
}
@media (max-width: 1100px) {
.l-footer__main {
display: flex;
flex-direction: column;
gap: 3rem;
}
}
.l-footer__brand {
grid-column: span 4;
position: relative;
}
.l-footer__brand .l-footer__logo {
margin-bottom: 1.5rem;
line-height: 1;
}
.l-footer__brand .l-footer__logo a {
display: inline-block;
transition: transform 0.2s ease;
touch-action: manipulation;
}
@media (hover: hover) {
.l-footer__brand .l-footer__logo a:hover {
transform: scale(1.05);
}
}
.l-footer__brand .l-footer__logo a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #FFE600;
}
.l-footer__brand .l-footer__logo img {
height: 48px;
width: auto;
display: block;
}
.l-footer__brand .l-footer__tagline {
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
opacity: 1;
margin-bottom: 3rem;
font-weight: 950;
letter-spacing: -0.01em;
color: #FFE600;
line-height: 1.3;
word-break: keep-all;
overflow-wrap: anywhere;
}
.l-footer__brand .l-footer__status {
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: 0.65rem;
opacity: 0.8;
font-weight: 900;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 2px;
}
.l-footer__brand .l-footer__status-dot {
width: 5px;
height: 5px;
background-color: #00ff00;
border-radius: 50%;
box-shadow: 0 0 8px #00ff00;
animation: pulse 2s infinite;
}
.l-footer__links {
grid-column: span 8;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
position: relative;
padding-left: 5rem;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 1100px) {
.l-footer__links {
padding-left: 0;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 3rem;
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.l-footer__links {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 350px) {
.l-footer__links {
grid-template-columns: 1fr;
}
}
.l-footer__col-title {
font-size: 0.8rem;
letter-spacing: 0.12em;
margin-bottom: 1.5rem;
font-weight: 950;
color: #000000;
background-color: #FFE600;
padding: 3px 10px;
display: inline-block;
transform: rotate(-1.5deg);
border: 2px solid #000000;
box-shadow: 3px 3px 0 #fff;
text-transform: uppercase;
}
.l-footer__menu {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.l-footer__menu a {
color: #fff;
text-decoration: none;
font-size: 0.95rem;
font-weight: 800;
transition: all 0.3s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
display: inline-flex;
align-items: center;
opacity: 0.85;
touch-action: manipulation;
}
.l-footer__menu a::before {
content: "";
width: 0;
height: 2px;
background: #FFE600;
margin-right: 0;
transition: all 0.3s ease;
}
@media (hover: hover) {
.l-footer__menu a:hover {
color: #FFE600;
opacity: 1;
transform: translateX(4px);
}
.l-footer__menu a:hover::before {
width: 8px;
margin-right: 6px;
}
}
.l-footer__menu a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #FFE600;
}
.l-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
}
@media (max-width: 768px) {
.l-footer__bottom {
flex-direction: column-reverse;
text-align: center;
gap: 1.5rem;
}
}
.l-footer__bottom-nav {
display: flex;
align-items: center;
gap: 3rem;
padding-right: 80px;
}
@media (max-width: 1024px) {
.l-footer__bottom-nav {
padding-right: 0;
}
}
@media (max-width: 768px) {
.l-footer__bottom-nav {
flex-direction: column;
gap: 1rem;
}
}
.l-footer__legal {
display: flex;
gap: 1.5rem;
white-space: nowrap;
}
.l-footer__legal a {
color: #fff;
text-decoration: none;
font-size: 0.7rem;
opacity: 0.9;
font-weight: 700;
transition: all 0.3s ease;
min-height: 2.75rem;
display: inline-flex;
align-items: center;
touch-action: manipulation;
}
@media (hover: hover) {
.l-footer__legal a:hover {
opacity: 1;
color: #FFE600;
}
}
.l-footer__legal a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #FFE600;
}
.l-footer__copyright {
font-size: 0.65rem;
opacity: 0.9;
white-space: nowrap;
letter-spacing: 0.05em;
}
.l-footer__top {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.6rem;
color: #fff;
text-decoration: none;
opacity: 0.9;
transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
white-space: nowrap;
font-weight: 900;
letter-spacing: 0.15em;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 6px 12px;
border-radius: 2px;
touch-action: manipulation;
}
.l-footer__top::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 5px solid currentColor;
margin-left: 2px;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (hover: hover) {
.l-footer__top:hover {
opacity: 1;
background-color: #fff;
color: #000;
border-color: #fff;
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.l-footer__top:hover {
transform: translateY(-3px);
}
.l-footer__top:hover::after {
transform: translateY(-4px);
}
}
.l-footer__top:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #FFE600;
}
@media (max-width: 768px) {
.l-footer__top {
width: auto;
margin-top: 1rem;
}
}
.l-footer__scrolling-wrap {
background: #000;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 12px 0;
display: flex;
overflow: hidden;
}
@media (max-width: 1024px) {
.l-footer__scrolling-wrap {
display: none;
}
}
.l-footer__scrolling-text {
display: flex;
white-space: nowrap;
font-size: 0.85rem;
opacity: 0.3;
animation: scroll-text 40s linear infinite;
font-weight: 950;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.l-footer__scrolling-text span {
padding-right: 6rem;
}
.l-footer__decor {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 15vw;
font-weight: 950;
color: rgba(255, 255, 255, 0.04);
line-height: 1;
pointer-events: none;
z-index: 1;
font-family: "Space Mono", monospace;
white-space: nowrap;
}
@media (max-width: 1100px) {
.l-footer__decor {
top: 10rem; transform: translateY(-50%);
font-size: clamp(5rem, 28vw, 12vw);
}
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
@keyframes scroll-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
.c-button {
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
background-color: #FFE600;
display: inline-block;
padding: 1rem 3rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 1.25rem;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-out, outline 0.2s ease-out, background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), color 0.25s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.c-button:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0 #000000;
}
}
.c-button:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.c-button:active {
transform: translate(6px, 6px) scale(0.98);
box-shadow: 0 0 0 #000000;
}
.c-button:focus-visible {
outline: none;
box-shadow: 10px 10px 0 #000000, 0 0 0 3px #FFE600;
}
.c-button {
touch-action: manipulation;
}
@media (max-width: 1024px) {
.c-button {
font-size: 1.1rem;
padding: 1rem 1.5rem;
}
}
.c-button--secondary {
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
background-color: #FFE600;
display: inline-block;
padding: 1rem 3rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 1.25rem;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-out, outline 0.2s ease-out, background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), color 0.25s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.c-button--secondary:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0 #000000;
}
}
.c-button--secondary:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.c-button--secondary:active {
transform: translate(6px, 6px) scale(0.98);
box-shadow: 0 0 0 #000000;
}
.c-button--secondary:focus-visible {
outline: none;
box-shadow: 10px 10px 0 #000000, 0 0 0 3px #FFE600;
}
.c-button--primary {
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
background-color: #000000;
display: inline-block;
padding: 1rem 3rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 1.25rem;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-out, outline 0.2s ease-out, background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), color 0.25s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.c-button--primary:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0 #000000;
}
}
.c-button--primary:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.c-button--primary:active {
transform: translate(6px, 6px) scale(0.98);
box-shadow: 0 0 0 #000000;
}
.c-button--primary:focus-visible {
outline: none;
box-shadow: 10px 10px 0 #000000, 0 0 0 3px #FFE600;
}
.c-button--primary {
color: #fff;
}
@media (hover: hover) {
.c-button--primary:hover {
background-color: #333;
}
}
.c-button--production {
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
background-color: #FF6B00;
display: inline-block;
padding: 1rem 3rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 1.25rem;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-out, outline 0.2s ease-out, background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), color 0.25s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.c-button--production:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0 #000000;
}
}
.c-button--production:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.c-button--production:active {
transform: translate(6px, 6px) scale(0.98);
box-shadow: 0 0 0 #000000;
}
.c-button--production:focus-visible {
outline: none;
box-shadow: 10px 10px 0 #000000, 0 0 0 3px #FFE600;
}
.c-button--lecture {
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
background-color: #7B6FEF;
display: inline-block;
padding: 1rem 3rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 1.25rem;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-out, outline 0.2s ease-out, background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), color 0.25s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.c-button--lecture:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0 #000000;
}
}
.c-button--lecture:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.c-button--lecture:active {
transform: translate(6px, 6px) scale(0.98);
box-shadow: 0 0 0 #000000;
}
.c-button--lecture:focus-visible {
outline: none;
box-shadow: 10px 10px 0 #000000, 0 0 0 3px #FFE600;
}
.c-button--outline {
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
background-color: #FFFFFF;
display: inline-block;
padding: 1rem 3rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 1.25rem;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-out, outline 0.2s ease-out, background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), color 0.25s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.c-button--outline:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0 #000000;
}
}
.c-button--outline:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.c-button--outline:active {
transform: translate(6px, 6px) scale(0.98);
box-shadow: 0 0 0 #000000;
}
.c-button--outline:focus-visible {
outline: none;
box-shadow: 10px 10px 0 #000000, 0 0 0 3px #FFE600;
}
.c-button--secondary {
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
background-color: #000000;
display: inline-block;
padding: 1rem 3rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 1.25rem;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-out, outline 0.2s ease-out, background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), color 0.25s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.c-button--secondary:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0 #000000;
}
}
.c-button--secondary:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.c-button--secondary:active {
transform: translate(6px, 6px) scale(0.98);
box-shadow: 0 0 0 #000000;
}
.c-button--secondary:focus-visible {
outline: none;
box-shadow: 10px 10px 0 #000000, 0 0 0 3px #FFE600;
}
.c-button--secondary {
color: #fff;
}
@media (hover: hover) {
.c-button--secondary:hover {
background-color: #333;
}
}
.c-card {
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
background-color: #ffffff;
padding: 1.5rem;
transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.c-card--service-prod {
position: relative;
}
.c-card--service-prod::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(255, 107, 0, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
z-index: -1;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
.c-card--service-prod:hover::before {
opacity: 1;
}
}
.c-card--service-lect {
position: relative;
}
.c-card--service-lect::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(123, 111, 239, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
z-index: -1;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
.c-card--service-lect:hover::before {
opacity: 1;
}
}
.c-card__title {
font-size: 1.75rem;
margin-bottom: 1rem;
}
.c-card__image {
margin-bottom: 1rem;
border: 2px solid #000000;
overflow: hidden;
}
.c-card__image img {
width: 100%;
height: auto;
transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
.c-card__image:hover img {
transform: scale(1.05);
}
}
.c-card__badge {
display: inline-block;
padding: 2px 8px;
background-color: #000000;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
font-family: "Space Mono", monospace;
}
.c-badge {
display: inline-block;
padding: 4px 12px;
background-color: #000000;
color: #fff;
font-family: "Space Mono", monospace;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
border: 2px solid #000000;
}
.u-noise {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Ffilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
#js-custom-cursor {
position: fixed;
top: 0;
left: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid #fff;
background: transparent;
mix-blend-mode: difference; pointer-events: none;
z-index: 10000;
transform: translate(-50%, -50%);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease;
}
body.has-custom-cursor #js-custom-cursor {
visibility: visible;
opacity: 1;
} .c-creation-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10001;
visibility: hidden;
opacity: 0;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-creation-modal.is-open {
visibility: visible;
opacity: 1;
}
.c-creation-modal.is-open .c-creation-modal__container {
transform: translateY(0);
}
.c-creation-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
}
.c-creation-modal__container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 3rem 5rem 5rem;
transform: translateY(20px);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 768px) {
.c-creation-modal__container {
padding: 1rem;
}
}
.c-creation-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0 0.5rem;
}
.c-creation-modal__label {
color: var(--color-accent);
font-size: 0.75rem;
letter-spacing: 0.2em;
font-weight: 700;
position: relative;
padding-left: 20px;
}
.c-creation-modal__label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0.5rem;
height: 0.5rem;
background-color: var(--color-accent);
border-radius: 50%;
animation: pulse 2s infinite;
}
.c-creation-modal__close {
position: relative;
top: auto;
right: auto;
background: none;
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem;
transition: opacity 0.3s ease;
}
@media (hover: hover) {
.c-creation-modal__close:hover {
opacity: 0.7;
}
}
.c-creation-modal__close span {
font-size: 0.8rem;
letter-spacing: 0.2em;
}
.c-creation-modal__close-icon {
width: 1.5rem;
height: 1.5rem;
position: relative;
}
.c-creation-modal__close-icon::before, .c-creation-modal__close-icon::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
}
.c-creation-modal__close-icon::before {
transform: rotate(45deg);
}
.c-creation-modal__close-icon::after {
transform: rotate(-45deg);
}
@media (max-width: 768px) {
.c-creation-modal__close span {
display: none;
}
}
.c-creation-modal__content {
flex: 1;
background-color: #000;
border: 1px solid #000000;
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 100px rgba(0, 0, 0, 0.8);
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.c-creation-modal__media {
flex: 1;
width: 100%;
background-color: #111;
position: relative;
}
.c-creation-modal__media .c-creation-modal__iframe-wrap {
width: 100%;
height: 100%;
background-color: #fff;
}
.c-creation-modal__media .c-creation-modal__iframe-wrap iframe {
width: 100%;
height: 100%;
display: block;
}
.c-creation-modal__media .c-creation-modal__video {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.c-creation-modal__media .c-creation-modal__video iframe {
width: 100%;
max-width: 100%;
aspect-ratio: 16/9;
}
.c-creation-modal__footer {
padding-top: 1rem;
}
.c-creation-modal__info-bar {
background-color: #fff;
color: #000;
padding: 1.5rem 3rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 5rem;
border: 1px solid #000000;
border-color: #000;
position: relative;
z-index: 5;
}
@media (max-width: 1024px) {
.c-creation-modal__info-bar {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.5rem;
}
}
.c-creation-modal__info-main {
flex: 1;
}
.c-creation-modal__meta {
font-size: 0.7rem;
color: rgba(0, 0, 0, 0.5); margin-bottom: 2px;
font-weight: 700;
}
.c-creation-modal__title {
font-size: 1.25rem;
font-weight: 900;
margin-bottom: 2px;
line-height: 1.2;
color: #000;
}
.c-creation-modal__desc {
font-size: 0.85rem;
line-height: 1.5;
color: rgba(0, 0, 0, 0.7); max-width: 800px;
}
.c-creation-modal__link-wrap {
flex-shrink: 0;
}
.c-creation-modal__link-wrap .c-button {
background-color: #000;
color: #fff;
border-color: #000;
font-size: 0.75rem;
padding: 0.625rem 1.25rem;
}
@media (hover: hover) {
.c-creation-modal__link-wrap .c-button:hover {
background-color: #333;
}
}
@media (max-width: 1024px) {
.c-creation-modal__link-wrap {
width: 100%;
}
.c-creation-modal__link-wrap .c-button {
width: 100%;
text-align: center;
}
} .u-reveal, .js-reveal-text, .js-reveal-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: none;
}
.u-reveal.is-visible, .js-reveal-text.is-visible, .js-reveal-item.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.u-reveal--up {
transform: translateY(50px);
}
.u-reveal--down {
transform: translateY(-50px);
}
.u-reveal--left {
transform: translateX(-30px);
}
.u-reveal--right {
transform: translateX(30px);
}
.u-reveal--scale {
transform: scale(0.9);
}
[data-delay] {
transition-delay: var(--delay, 0s);
}
.c-lab-tool {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 2000;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
@media (max-width: 1024px) {
.c-lab-tool {
align-items: center;
}
}
.c-lab-tool__trigger {
background-color: #FFE600;
border: 2px solid #000000;
box-shadow: 4px 4px 0 #000000;
padding: 0.5rem 1rem;
font-family: "Space Mono", monospace;
font-weight: 900;
font-size: 0.8rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
touch-action: manipulation;
}
.c-lab-tool__trigger-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #FF6B00;
animation: blink 1.5s infinite;
}
@media (hover: hover) {
.c-lab-tool__trigger:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #000000;
}
}
.c-lab-tool__trigger.is-active {
background-color: #fff;
transform: scale(0.95);
box-shadow: 2px 2px 0 #000000;
}
.c-lab-tool__menu {
display: none;
flex-direction: column;
gap: 8px;
margin-bottom: 5px;
position: relative;
z-index: 100;
}
.c-lab-tool__menu.is-visible {
display: flex;
animation: menu-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.c-lab-tool__menu-item {
background-color: #fff;
border: 2px solid #000000;
box-shadow: 3px 3px 0 #000000;
padding: 8px 15px;
font-size: 0.75rem;
font-weight: 950;
cursor: pointer;
text-align: left;
white-space: nowrap;
transition: all 0.2s ease;
touch-action: manipulation;
}
.c-lab-tool__menu-item span {
margin-right: 8px;
color: #FF6B00;
}
@media (hover: hover) {
.c-lab-tool__menu-item:hover {
background-color: #FFE600;
transform: translate(-3px, -3px);
box-shadow: 6px 6px 0 #000000;
}
}
.c-lab-tool__result {
position: absolute;
bottom: calc(100% + 20px);
right: 0;
width: 280px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px) scale(0.95);
z-index: 10;
}
.c-lab-tool__result.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.is-ready .c-lab-tool__result.is-visible {
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (max-width: 1024px) {
.c-lab-tool__result {
left: 50%;
right: auto;
transform: translateX(-50%) translateY(10px) scale(0.95);
}
.c-lab-tool__result.is-visible {
transform: translateX(-50%) translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.c-lab-tool__result {
width: calc(100vw - 40px);
}
}
.c-lab-tool__result-inner {
background-color: #000;
color: #fff;
border: 3px solid #fff;
padding: 25px 20px;
position: relative;
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.2);
}
.c-lab-tool__result-inner::after {
content: "";
position: absolute;
bottom: -15px;
right: 40px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #fff transparent transparent transparent;
transition: left 0.2s ease, right 0.2s ease;
}
@media (max-width: 1024px) {
.c-lab-tool__result-inner::after {
right: auto;
left: 50%;
transform: translateX(-50%);
}
}
.c-lab-tool__result-label {
position: absolute;
top: -12px;
left: 15px;
background-color: #FFE600;
color: #000000;
font-family: "Space Mono", monospace;
font-size: 0.6rem;
font-weight: 950;
padding: 2px 8px;
border: 2px solid #000000;
}
.c-lab-tool__close-btn {
position: absolute;
top: -15px;
right: -15px;
width: 34px;
height: 34px;
background-color: #fff;
border: 2px solid #000000;
border-radius: 50%;
color: #000000;
font-size: 20px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 3px 3px 0 #000000;
transition: all 0.2s ease;
z-index: 20;
}
.c-lab-tool__close-btn:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.c-lab-tool__content {
font-size: 0.9rem;
font-weight: 800;
line-height: 1.6;
margin-bottom: 15px;
}
.c-lab-tool__content .res-title {
display: block;
color: #FFE600;
font-size: 1.2rem;
margin-bottom: 10px;
font-weight: 950;
}
.c-lab-tool__content .res-meta {
display: block;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.6);
margin-top: 10px;
font-family: "Space Mono", monospace;
}
.c-lab-tool__close {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
font-family: "Space Mono", monospace;
font-size: 0.6rem;
padding: 4px 10px;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 15px;
}
@media (max-width: 1024px) {
.c-lab-tool__close {
display: none;
}
}
@media (hover: hover) {
.c-lab-tool__close:hover {
background: #fff;
color: #000;
border-color: #fff;
}
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes menu-pop {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.c-floating-partners {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 900;
display: flex;
align-items: center;
}
.c-floating-partners.is-ready {
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.c-floating-partners.is-ready .c-floating-partners__toggle-icon {
transition: transform 0.2s ease;
}
.c-floating-partners.is-hidden {
transform: translateY(-50%) translateX(calc(100% - 44px));
}
.c-floating-partners.is-hidden .c-floating-partners__toggle::before {
content: "PARTNERS";
}
.c-floating-partners.is-hidden .c-floating-partners__toggle-icon {
transform: rotate(180deg);
}
.c-floating-partners__toggle {
min-width: 2.75rem;
width: 44px;
height: 120px;
background: #00D166;
color: #000;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 10px 0 0 10px;
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
position: relative;
}
.c-floating-partners__toggle::before {
content: "CLOSE";
font-family: "Space Mono", monospace;
font-size: 0.6rem;
font-weight: 900;
writing-mode: vertical-rl;
letter-spacing: 0.1em;
opacity: 0.6;
}
.c-floating-partners__toggle-icon {
width: 12px;
height: 12px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
margin-top: 5px;
}
.c-floating-partners__content {
background: #fff;
border: 3px solid #000;
border-right: none;
padding: 1.5rem 0.5rem;
width: 130px;
border-radius: 15px 0 0 15px;
box-shadow: -8px 8px 0 rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
@media (max-width: 768px) {
.c-floating-partners__content {
width: 80px;
padding: 1.5rem 0.25rem;
}
}
.c-floating-partners__content.is-link-hovered {
background: #f6f9f5;
border-color: #00D166;
box-shadow: -8px 8px 0 rgba(0, 209, 102, 0.25);
}
.c-floating-partners__content-link {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
text-align: center;
align-items: center;
text-decoration: none;
color: inherit;
transition: box-shadow 0.12s ease;
border-radius: 8px;
padding: 2px 0;
touch-action: manipulation;
}
@media (max-width: 768px) {
.c-floating-partners__content-link {
gap: 10px;
}
}
@media (hover: hover) {
.c-floating-partners__content-link:hover .c-floating-partners__label {
background: #00D166;
color: #fff;
border-color: #00D166;
}
.c-floating-partners__content-link:hover .c-floating-partners__cta {
background: #00D166;
color: #000;
transform: translateY(-2px);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.c-floating-partners__content-link:hover .c-floating-partners__cta::after {
transform: translateX(2px);
}
}
.c-floating-partners__content-link:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #FFE600;
}
.c-floating-partners__label {
font-size: 0.55rem;
font-weight: 950;
background: #000;
color: #fff;
padding: 2px 4px;
width: fit-content;
letter-spacing: 0.05em;
border: 2px solid transparent;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.c-floating-partners__title {
font-size: 0.85rem;
font-weight: 950;
line-height: 1.5;
color: #000;
word-break: keep-all;
}
@media (max-width: 768px) {
.c-floating-partners__title {
font-size: 0.75rem;
}
}
.c-floating-partners__title span {
display: inline-block;
color: #00D166;
text-decoration: underline;
text-underline-offset: 2px;
}
.c-floating-partners__cta {
font-size: 0.75rem;
font-weight: 950;
background: #000;
color: #fff;
padding: 8px 6px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
width: 100%;
line-height: 1.2;
}
.c-floating-partners__cta::after {
content: "→";
font-family: "Space Mono", monospace;
transition: transform 0.12s ease;
}
@media (max-width: 768px) {
.c-floating-partners__cta {
flex-direction: row;
padding: 6px 4px;
gap: 2px;
font-size: 0.7rem;
}
.c-floating-partners__cta::after {
content: "›";
font-size: 1rem;
line-height: 1;
margin-left: 2px;
}
}
.c-sns-tool {
position: fixed;
bottom: calc(1.5rem + 50px);
right: 1.5rem;
z-index: 2000;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}
.js-lab-tool-active .c-sns-tool {
opacity: 0;
pointer-events: none;
transform: translateX(20px);
}
.c-sns-tool__links {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 5px;
pointer-events: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.is-active .c-sns-tool__links {
pointer-events: auto;
opacity: 1;
transform: translateY(0);
}
.c-sns-tool__link {
min-width: 2.75rem;
min-height: 2.75rem;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff;
border: 2px solid #000000;
box-shadow: 3px 3px 0 #000000;
transition: all 0.2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
touch-action: manipulation;
}
.c-sns-tool__link svg {
width: 20px;
height: 20px;
}
@media (hover: hover) {
.c-sns-tool__link:hover {
transform: scale(1.1) rotate(-5deg);
box-shadow: 5px 5px 0 #000000;
}
}
.c-sns-tool__link.m-x {
background-color: #000;
}
.c-sns-tool__link.m-youtube {
background-color: #FF0000;
}
.c-sns-tool__link.m-instagram {
background-color: #E4405F;
}
.c-sns-tool__trigger {
background-color: #fff;
border: 2px solid #000000;
box-shadow: 4px 4px 0 #000000;
padding: 6px 12px;
font-family: "Space Mono", monospace;
font-weight: 950;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
touch-action: manipulation;
}
@media (hover: hover) {
.c-sns-tool__trigger:hover {
background-color: #FFE600;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #000000;
}
}
.is-active .c-sns-tool__trigger {
background-color: #000000;
color: #fff;
transform: scale(0.95);
box-shadow: 2px 2px 0 #000000;
}
.c-bottom-nav {
position: fixed;
bottom: calc(15px + env(safe-area-inset-bottom) - var(--vv-offset, 0px));
right: 50% !important;
transform: translateX(50%) !important;
width: 94% !important;
max-width: 480px;
margin: 0 auto;
background-color: #fff;
border: 3px solid #000000;
border-radius: 100px;
z-index: 10000;
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
display: block;
overflow: visible;
transform-origin: right center;
}
.c-bottom-nav, .c-bottom-nav *, .c-bottom-nav::before, .c-bottom-nav::after {
transition: none !important;
}
.c-bottom-nav.is-ready, .c-bottom-nav.is-ready::before, .c-bottom-nav.is-ready::after {
transition: transform 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, width 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), bottom 0.1s ease, right 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-radius 0.4s ease, background-color 0.3s ease;
}
.c-bottom-nav.is-ready .c-bottom-nav__toggle,
.c-bottom-nav.is-ready .c-bottom-nav__toggle-icon::before,
.c-bottom-nav.is-ready .c-bottom-nav__toggle-icon::after,
.c-bottom-nav.is-ready .c-bottom-nav__inner {
transition: all 0.3s ease;
}
.c-bottom-nav.is-minimized {
width: 60px !important;
height: 60px;
border-radius: 50%;
right: 15px !important;
transform: translateX(0) !important;
box-shadow: none;
}
.c-bottom-nav.is-minimized .c-bottom-nav__inner {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.c-bottom-nav.is-minimized .c-bottom-nav__toggle {
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #FFE600;
border: 3px solid #000000;
}
.c-bottom-nav.is-minimized .c-bottom-nav__toggle-icon::before {
width: 20px !important;
height: 4px !important;
background-color: #000000 !important;
}
.c-bottom-nav.is-minimized .c-bottom-nav__toggle-icon::after {
width: 4px !important;
height: 20px !important;
background-color: #000000 !important;
display: block !important;
}
.c-bottom-nav__toggle {
position: absolute;
top: -18px;
right: -5px;
width: 32px;
height: 32px;
background-color: #000000;
border: 2px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
touch-action: manipulation;
}
@media (hover: hover) {
.c-bottom-nav__toggle:hover {
transform: scale(1.1);
}
}
.c-bottom-nav__toggle-icon {
position: relative;
width: 100%;
height: 100%;
}
.c-bottom-nav__toggle-icon::before, .c-bottom-nav__toggle-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: #fff;
border-radius: 2px;
transform: translate(-50%, -50%);
}
.c-bottom-nav__toggle-icon::before {
width: 14px;
height: 3px;
}
.c-bottom-nav__toggle-icon::after {
display: none;
}
.c-bottom-nav__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
height: 64px;
}
.c-bottom-nav__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #000000;
background: none;
border: none;
border-right: 2px solid rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.c-bottom-nav__item:last-child {
border-right: none;
}
.c-bottom-nav__item.is-active, .c-bottom-nav__item:active {
background-color: rgba(255, 230, 0, 0.1);
}
.c-bottom-nav__item.is-active .c-bottom-nav__icon-wrap, .c-bottom-nav__item:active .c-bottom-nav__icon-wrap {
transform: scale(1.1);
}
.c-bottom-nav__icon-wrap {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #000000;
border-radius: 6px;
margin-bottom: 2px;
background-color: #fff;
}
.c-bottom-nav__icon-wrap svg {
width: 16px;
height: 16px;
}
.c-bottom-nav__icon-wrap.m-home {
background-color: #FFDE59;
}
.c-bottom-nav__icon-wrap.m-sns {
background-color: #FF5757;
color: #fff;
}
.c-bottom-nav__icon-wrap.m-lab {
background-color: #5CE1E6;
}
.c-bottom-nav__icon-wrap.m-contact {
background-color: #7ED957;
}
.c-bottom-nav__label {
font-family: "Space Mono", monospace;
font-size: 0.65rem;
font-weight: 950;
letter-spacing: 0.02em;
}
@media (max-width: 1024px) {
.c-lab-tool__trigger,
.c-sns-tool__trigger {
display: none !important;
}
.c-lab-tool {
bottom: calc(90px + env(safe-area-inset-bottom)) !important;
left: calc(50% + min(94%, 480px) * 0.125) !important;
right: auto !important;
transform: translateX(-50%) !important;
width: auto !important;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.c-lab-tool > * {
pointer-events: auto;
}
.c-lab-tool__menu {
width: 260px;
max-width: calc(100vw - 30px);
margin-bottom: 10px;
}
.c-lab-tool__menu::after {
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
}
.c-lab-tool__result {
width: 280px;
max-width: calc(100vw - 30px);
left: 50% !important;
bottom: 0 !important;
position: relative !important;
transform: translateX(-50%) !important;
}
.c-lab-tool__result .c-lab-tool__result-inner::after {
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
}
.c-sns-tool {
bottom: calc(90px + env(safe-area-inset-bottom)) !important;
left: calc(50% - min(94%, 480px) * 0.125) !important;
transform: translateX(-50%);
right: auto !important;
width: auto !important;
display: flex;
justify-content: center;
pointer-events: none;
}
.c-sns-tool.is-active {
pointer-events: auto;
}
.c-sns-tool__links {
display: flex;
flex-direction: row;
gap: 15px;
background-color: #fff;
padding: 10px 20px;
border: 3px solid #000000;
border-radius: 50px;
box-shadow: 4px 4px 0 #000000;
position: relative;
}
.c-sns-tool__links::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000000;
}
.l-footer {
padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
}
.p-front-hero {
margin-top: var(--header-height);
min-height: calc(100svh - var(--header-height));
width: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #fff;
border-top: 4px solid #000000;
border-bottom: 4px solid #000000;
--hero-split: 50%;
--hero-slant: 22vw;
--transition-main: 1.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-front-hero::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.035;
pointer-events: none;
z-index: 100;
}
.p-front-hero__bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: clip-path var(--transition-main), background-color var(--transition-main), opacity 0.6s ease;
overflow: hidden;
}
.p-front-hero__bg-layer .p-front-hero__glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 1s ease;
}
.p-front-hero__bg-layer::before {
position: absolute;
font-size: 22vw;
font-weight: 950;
line-height: 0.7;
color: transparent;
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.12);
font-family: "Noto Sans JP", sans-serif;
letter-spacing: -0.05em;
z-index: 1;
pointer-events: none;
white-space: nowrap;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-front-hero__bg-layer--lecture {
background-color: #fff;
z-index: 1;
}
.p-front-hero__bg-layer--lecture::before {
content: "GROW";
bottom: 10svh;
right: 2vw;
}
.p-front-hero__bg-layer--lecture {
background-image: linear-gradient(rgba(123, 111, 239, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 111, 239, 0.15) 1px, transparent 1px), linear-gradient(rgba(123, 111, 239, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 111, 239, 0.08) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
}
.p-front-hero__bg-layer--lecture .p-front-hero__glow {
background: radial-gradient(circle at 80% 65%, rgba(123, 111, 239, 0.16) 0%, transparent 60%), radial-gradient(circle at 60% 35%, rgba(123, 111, 239, 0.08) 0%, transparent 40%);
}
.p-front-hero__bg-layer--production {
background-color: #fff;
z-index: 2;
clip-path: polygon(0 0, calc(var(--hero-split) + var(--hero-slant)) 0, calc(var(--hero-split) - var(--hero-slant)) 100%, 0 100%);
}
.p-front-hero__bg-layer--production::before {
content: "MAKE";
top: 4svh;
left: 2vw;
}
.p-front-hero__bg-layer--production {
background-image: linear-gradient(rgba(255, 107, 0, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 107, 0, 0.15) 1px, transparent 1px), linear-gradient(rgba(255, 107, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 107, 0, 0.08) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
}
.p-front-hero__bg-layer--production .p-front-hero__glow {
background: radial-gradient(circle at 20% 35%, rgba(255, 107, 0, 0.16) 0%, transparent 60%), radial-gradient(circle at 40% 65%, rgba(255, 107, 0, 0.08) 0%, transparent 40%);
}
.p-front-hero__bg-layer--production::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0.85), #000000);
clip-path: polygon(calc(var(--hero-split) + var(--hero-slant) - 6px) 0, calc(var(--hero-split) + var(--hero-slant)) 0, calc(var(--hero-split) - var(--hero-slant)) 100%, calc(var(--hero-split) - var(--hero-slant) - 6px) 100%);
z-index: 20;
transition: clip-path var(--transition-main), opacity 0.6s ease;
}
.p-front-hero__character {
position: absolute;
z-index: 10;
pointer-events: none;
visibility: visible;
opacity: 1 !important;
transition: transform var(--transition-main), opacity 0.8s ease, filter 0.8s ease;
will-change: transform, opacity;
}
.p-front-hero__character img {
display: block;
height: 75svh;
width: auto;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2));
transition: filter 0.4s ease;
}
@media (hover: hover) {
.p-front-hero__character:hover img {
filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.3)) brightness(1.05);
}
}
@media (hover: hover) {
.p-front-hero__character img {
animation: hero-award-float 12s ease-in-out infinite;
}
}
.p-front-hero__bg-layer--production .p-front-hero__character {
bottom: 8svh;
left: 2vw;
transform: rotate(-2deg);
}
.p-front-hero__bg-layer--lecture .p-front-hero__character {
bottom: 8svh;
right: 2vw;
transform: rotate(2deg);
}
.p-front-hero__bg-layer--lecture .p-front-hero__character img {
animation-delay: -4.5s;
}
@keyframes hero-award-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-22px) rotate(0.4deg);
}
}
.p-front-hero__headline {
position: relative;
z-index: 35;
flex-shrink: 0;
width: 100%;
text-align: center;
padding: 2svh 2rem 0;
pointer-events: none;
}
.p-front-hero__headline-title {
font-size: clamp(1.5rem, 2.8vw, 2.4rem);
font-weight: 950;
line-height: 1.25;
letter-spacing: -0.02em;
color: #000000;
margin: 0 0 0.5rem;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}
.p-front-hero__headline-sub {
font-size: 0.7rem;
letter-spacing: 0.25em;
color: rgba(0, 0, 0, 0.5);
margin: 0;
}
.p-front-hero__sides {
position: relative;
z-index: 30;
flex: 1 1 0;
min-height: 0;
width: 100%;
display: flex;
}
.p-front-hero__side {
flex: 1 1 50%;
min-height: 0;
position: relative;
pointer-events: auto;
display: flex;
align-items: flex-end;
padding-bottom: 12svh;
}
.p-front-hero__side--prod {
justify-content: flex-start;
}
.p-front-hero__side--lect {
justify-content: flex-end;
}
.p-front-hero__content {
position: relative;
width: 100%;
max-width: 440px;
z-index: 40;
transform: translateX(0);
transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.9s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.7s;
}
.p-front-hero__content .u-keep-word {
white-space: nowrap;
}
.p-front-hero__side--prod .p-front-hero__content {
margin-left: 10vw;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.p-front-hero__side--lect .p-front-hero__content {
margin-right: 10vw;
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
@media (hover: hover) {
.p-front-hero__side {
transition: flex var(--transition-main);
}
.p-front-hero__side:hover {
flex: 1 1 75%;
}
.p-front-hero:hover .p-front-hero__side--prod:not(:hover) .p-front-hero__content {
opacity: 0;
transform: translateX(-110px) skewX(1deg);
pointer-events: none;
}
.p-front-hero:hover .p-front-hero__side--lect:not(:hover) .p-front-hero__content {
opacity: 0;
transform: translateX(110px) skewX(-1deg);
pointer-events: none;
}
.p-front-hero:has(.p-front-hero__side--prod:hover) {
--hero-split: 65%;
}
.p-front-hero:has(.p-front-hero__side--prod:hover) .p-front-hero__bg-layer--production .p-front-hero__glow {
opacity: 1;
}
.p-front-hero:has(.p-front-hero__side--prod:hover) .p-front-hero__bg-layer--lecture {
background-color: #d2d2d2;
}
.p-front-hero:has(.p-front-hero__side--prod:hover) .p-front-hero__bg-layer--lecture .p-front-hero__glow {
opacity: 0;
}
.p-front-hero:has(.p-front-hero__side--prod:hover) .p-front-hero__bg-layer--lecture .p-front-hero__character {
opacity: 0.1;
filter: grayscale(100%) blur(1px);
transform: scale(0.97);
}
.p-front-hero:has(.p-front-hero__side--prod:hover) .p-front-hero__bg-layer--production::before {
-webkit-text-stroke: 3px rgba(255, 107, 0, 0.35);
opacity: 1;
transform: scale(1.03);
}
.p-front-hero:has(.p-front-hero__side--lect:hover) {
--hero-split: 35%;
}
.p-front-hero:has(.p-front-hero__side--lect:hover) .p-front-hero__bg-layer--lecture .p-front-hero__glow {
opacity: 1;
}
.p-front-hero:has(.p-front-hero__side--lect:hover) .p-front-hero__bg-layer--production {
background-color: #d2d2d2;
}
.p-front-hero:has(.p-front-hero__side--lect:hover) .p-front-hero__bg-layer--production::after {
background-color: #999;
opacity: 0.5;
}
.p-front-hero:has(.p-front-hero__side--lect:hover) .p-front-hero__bg-layer--production .p-front-hero__glow {
opacity: 0;
}
.p-front-hero:has(.p-front-hero__side--lect:hover) .p-front-hero__bg-layer--production .p-front-hero__character {
opacity: 0.1;
filter: grayscale(100%) blur(1px);
transform: scale(0.97);
}
.p-front-hero:has(.p-front-hero__side--lect:hover) .p-front-hero__bg-layer--lecture::before {
-webkit-text-stroke: 3px rgba(123, 111, 239, 0.35);
opacity: 1;
transform: scale(1.03);
}
}
.p-front-hero__title {
font-size: clamp(2.2rem, 4.5vw, 4.2rem);
line-height: 1.1;
font-weight: 950;
margin-bottom: 3rem;
color: #000000;
text-shadow: 0 0 30px white, 0 0 10px rgba(255, 255, 255, 0.8);
letter-spacing: -0.01em;
}
.p-front-hero__label {
font-size: 1rem;
font-weight: 950;
letter-spacing: 0.6em;
margin-bottom: 1rem;
display: block;
color: #FF6B00;
text-transform: uppercase;
}
.p-front-hero__side--lect .p-front-hero__label {
color: #7B6FEF;
}
.p-front-hero__cta {
margin-top: 3rem;
width: 100%;
display: flex;
}
.p-front-hero__side--prod .p-front-hero__cta {
justify-content: flex-start;
}
.p-front-hero__side--lect .p-front-hero__cta {
justify-content: flex-end;
}
@media (max-width: 1024px) {
.p-front-hero {
display: block;
height: auto;
min-height: auto;
background-color: #fff;
overflow: hidden;
margin-top: var(--header-height);
max-height: calc(100svh - var(--header-height));
}
.p-front-hero__headline {
padding: 0.75rem 1rem 0.5rem;
margin-bottom: 0;
flex-shrink: 0;
}
.p-front-hero__headline-title {
font-size: clamp(1rem, 4vw, 1.35rem);
margin-bottom: 0.2rem;
}
.p-front-hero__headline-sub {
font-size: 0.55rem;
letter-spacing: 0.18em;
}
.p-front-hero__bg-layer {
position: relative !important;
width: 100% !important;
height: calc((100svh - var(--header-height) - 3.5rem) / 2) !important;
min-height: 140px;
clip-path: none !important;
z-index: 1;
overflow: visible !important;
}
.p-front-hero__bg-layer--production {
background-color: #fff !important;
background-image: linear-gradient(rgba(255, 107, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 107, 0, 0.12) 1px, transparent 1px), linear-gradient(rgba(255, 107, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 107, 0, 0.05) 1px, transparent 1px);
background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
}
.p-front-hero__bg-layer--production::before {
content: "MAKE";
display: block !important;
position: absolute;
top: 5%;
left: 0;
width: 100%;
text-align: center;
font-size: 30vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.08);
-webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.08);
z-index: 1;
pointer-events: none;
white-space: nowrap;
animation: mobile-text-purify-prod 8s ease-in-out infinite;
}
.p-front-hero__bg-layer--production::after {
display: none !important;
}
.p-front-hero__bg-layer--lecture {
background-color: #fcfcfc !important;
border-top: 1px solid rgba(0, 0, 0, 0.05);
background-image: linear-gradient(rgba(123, 111, 239, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 111, 239, 0.15) 1px, transparent 1px), linear-gradient(rgba(123, 111, 239, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 111, 239, 0.05) 1px, transparent 1px);
background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
}
.p-front-hero__bg-layer--lecture::before {
content: "GROW";
display: block !important;
position: absolute;
top: 5%;
left: 0;
width: 100%;
text-align: center;
font-size: 30vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.08);
-webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.08);
z-index: 1;
pointer-events: none;
white-space: nowrap;
animation: mobile-text-purify-lect 8s ease-in-out infinite;
}
.p-front-hero__bg-layer--lecture::after {
display: none !important;
}
.p-front-hero__bg-layer .p-front-hero__glow {
display: none !important;
}
.p-front-hero__sides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 10;
pointer-events: none;
}
}
@media (max-width: 1024px) and (max-width: 768px) {
.p-front-hero__sides {
top: 3.5rem;
height: calc(100svh - var(--header-height) - 3.5rem);
min-height: 280px;
}
}
@media (max-width: 1024px) {
.p-front-hero__side {
height: calc((100svh - var(--header-height) - 3.5rem) / 2);
min-height: 140px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent !important;
pointer-events: none;
}
}
@media (max-width: 1024px) and (max-width: 768px) {
.p-front-hero__side {
height: calc((100svh - var(--header-height) - 3.5rem) / 2);
min-height: 140px;
}
}
@media (max-width: 1024px) {
.p-front-hero__content {
position: relative;
width: 100%;
max-width: 100% !important;
margin: 0 !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center !important;
text-align: center;
min-height: 0;
padding: 0;
padding-top: 10svh;
pointer-events: auto;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
z-index: 30;
transition: none !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
}
@media (max-width: 1024px) and (max-width: 768px) {
.p-front-hero__content {
padding-top: 12svh;
}
}
@media (max-width: 1024px) {
.p-front-hero__character {
position: absolute !important;
bottom: 0 !important;
height: 26svh !important;
width: auto !important;
z-index: 20 !important;
opacity: 1 !important;
visibility: visible !important;
filter: none !important;
pointer-events: none;
display: block !important;
}
.p-front-hero__character img {
height: 100% !important;
width: auto !important;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
animation: hero-award-float 10s ease-in-out infinite !important;
}
.p-front-hero__bg-layer--production .p-front-hero__character {
left: 2% !important;
bottom: 0 !important;
}
.p-front-hero__bg-layer--lecture .p-front-hero__character {
right: 2% !important;
bottom: 0 !important;
}
.p-front-hero__bg-layer--lecture .p-front-hero__character img {
animation-delay: -5s !important;
}
.p-front-hero__title {
display: block;
width: 100%;
font-size: clamp(1.4rem, 4.5vw, 2.2rem);
font-weight: 950;
line-height: 1.45;
margin: 0 auto 0.5rem !important;
color: #000000;
text-align: center !important;
text-shadow: 0 0 30px #fff, 0 0 20px #fff, 0 0 10px #fff;
}
.p-front-hero__title .u-keep-word {
display: block;
}
.p-front-hero__title {
transition: none !important;
}
.p-front-hero__side--prod .p-front-hero__title {
transform: translateX(14vw) !important;
}
.p-front-hero__side--lect .p-front-hero__title {
transform: translateX(-14vw) !important;
}
.p-front-hero__label {
display: block;
width: 100%;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.4em;
margin: 0 auto 0.5rem !important;
color: #FF6B00;
white-space: nowrap;
text-align: center !important;
transition: none !important;
}
.p-front-hero__side--prod .p-front-hero__label {
transform: translateX(14vw) !important;
}
.p-front-hero__side--lect .p-front-hero__label {
transform: translateX(-14vw) !important;
}
.p-front-hero__side--lect .p-front-hero__label {
color: #7B6FEF;
}
.p-front-hero__cta {
margin-top: 1.5rem !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
z-index: 50;
pointer-events: auto;
transition: none !important;
}
.p-front-hero__side--prod .p-front-hero__cta {
transform: translateX(14vw) !important;
}
.p-front-hero__side--lect .p-front-hero__cta {
transform: translateX(-14vw) !important;
}
}
@media (max-width: 1024px) and (max-width: 768px) {
.p-front-hero__side--prod .p-front-hero__cta, .p-front-hero__side--lect .p-front-hero__cta {
transform: none !important;
}
}
@media (max-width: 1024px) {
.p-front-hero__cta .c-button {
position: relative;
padding: 1.125rem 2.75rem;
border-radius: 100px;
font-size: 1.45rem;
font-weight: 950;
width: fit-content;
min-width: 300px;
max-width: 85vw;
border: 3px solid #000000;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
background-color: #FF6B00;
color: #000000;
box-shadow: 0 10px 0 #000000, 0 20px 40px rgba(0, 0, 0, 0.15);
}
}
@media (max-width: 1024px) and (min-width: 769px) and (max-width: 1024px) {
.p-front-hero__cta .c-button {
min-width: 380px !important;
}
}
@media (max-width: 1024px) and (max-width: 768px) {
.p-front-hero__cta .c-button {
padding: 0.6rem 1.5rem;
border-radius: 100px;
font-size: 1rem;
min-width: 200px;
max-width: 72vw;
border-width: 2px;
box-shadow: 0 6px 0 #000000, 0 12px 24px rgba(0, 0, 0, 0.12);
}
}
@media (max-width: 1024px) {
.p-front-hero__side--lect .p-front-hero__cta .c-button {
background-color: #7B6FEF;
}
.p-front-hero__cta .c-button::before {
content: "";
position: absolute;
top: 2px;
left: 10%;
width: 80%;
height: 35%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent);
border-radius: 100px;
pointer-events: none;
}
.p-front-hero__cta .c-button span {
white-space: nowrap;
display: block;
width: 100%;
text-align: center;
letter-spacing: 0.08em;
}
.p-front-hero__cta .c-button:active {
transform: translateY(7px);
box-shadow: 0 3px 0 #000000, 0 10px 20px rgba(0, 0, 0, 0.1);
}
}
@media (max-width: 1024px) and (max-width: 768px) {
.p-front-hero__cta .c-button:active {
transform: translateY(4px);
box-shadow: 0 2px 0 #000000, 0 6px 12px rgba(0, 0, 0, 0.08);
}
}
@media (max-width: 1024px) {
.p-front-hero .p-front-hero__bg-layer {
background-color: transparent !important;
}
}
.p-front-about {
padding: 7.5rem 0;
background-color: #fff;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.p-front-about {
padding: 3rem 0;
}
}
.p-front-about__bg-text {
position: absolute;
left: 50%;
font-weight: 950;
color: transparent;
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.06);
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
.p-front-about__bg-text--1 {
top: 25%;
font-size: 18vw;
transform: translate(-50%, -50%) rotate(-5deg);
animation: about-bg-text-scroll-1 180s linear infinite;
}
.p-front-about__bg-text--2 {
top: 75%;
font-size: 15vw;
transform: translate(-50%, -50%) rotate(3deg);
animation: about-bg-text-scroll-2 200s linear infinite reverse;
opacity: 0.5;
}
@media (max-width: 1100px) {
.p-front-about__bg-text--1 {
top: 20%;
font-size: 25vw;
}
.p-front-about__bg-text--2 {
top: 80%;
font-size: 20vw;
}
}
@media (max-width: 768px) {
.p-front-about__bg-text {
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.08);
}
.p-front-about__bg-text--1 {
font-size: 40vw;
top: 15%;
}
.p-front-about__bg-text--2 {
font-size: 35vw;
top: 85%;
}
}
@keyframes about-bg-text-scroll-1 {
0% {
transform: translate(-10%, -50%) rotate(-5deg);
}
100% {
transform: translate(-90%, -50%) rotate(-5deg);
}
}
@keyframes about-bg-text-scroll-2 {
0% {
transform: translate(-90%, -50%) rotate(3deg);
}
100% {
transform: translate(-10%, -50%) rotate(3deg);
}
}
.p-front-about__inner {
position: relative;
z-index: 2;
padding: 0;
}
.p-front-about__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: clamp(2.5rem, 5vw, 6.25rem);
align-items: flex-start;
max-width: 1400px;
margin: 0 auto;
}
@media (max-width: 1100px) {
.p-front-about__grid {
grid-template-columns: 1fr;
gap: 5rem;
}
}
@media (max-width: 768px) {
.p-front-about__grid {
gap: 1.5rem;
}
}
.p-front-about__main {
width: 100%;
min-width: 0;
}
@media (max-width: 1100px) {
.p-front-about__main {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
@media (max-width: 768px) {
.p-front-about__main {
align-items: center;
text-align: center;
max-width: 100%;
}
}
.p-front-about__title {
font-size: clamp(2.5rem, 6vw, 5.5rem);
font-weight: 950;
line-height: 1.2;
margin-bottom: 5rem;
letter-spacing: -0.04em;
word-break: normal;
overflow-wrap: break-word;
line-break: strict;
max-width: 100%;
}
@media (max-width: 1100px) {
.p-front-about__title {
max-width: 800px;
}
}
@media (max-width: 768px) {
.p-front-about__title {
margin-bottom: 1.5rem;
font-size: clamp(1.6rem, 7vw, 2.4rem);
width: 100%;
text-align: center;
}
}
.p-front-about__description {
font-size: 1.2rem;
line-height: 2.2;
color: rgba(0, 0, 0, 0.85);
padding-left: 0;
border-left: none;
max-width: 720px;
position: relative;
}
@media (max-width: 1100px) {
.p-front-about__description {
margin: 0 auto;
}
}
@media (max-width: 768px) {
.p-front-about__description {
font-size: 0.95rem;
line-height: 1.85;
margin: 0;
max-width: 100%;
text-align: center;
}
}
.p-front-about__description p {
margin-bottom: 1.5rem;
}
.p-front-about__description p:last-child {
margin-bottom: 0;
}
.p-front-about__description strong {
font-weight: 900;
color: #000000;
background: linear-gradient(transparent 70%, rgba(255, 230, 0, 0.8) 70%);
padding: 0 2px;
}
.p-front-about__side {
width: 100%;
display: flex;
justify-content: flex-end;
}
@media (max-width: 1100px) {
.p-front-about__side {
justify-content: center;
margin-top: 0;
}
}
.p-front-about__profile-card {
background: #fff;
border: 4px solid #000000;
box-shadow: 12px 12px 0 #000000;
padding: 5rem 3rem;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
max-width: 420px;
width: 100%;
position: relative;
overflow: visible;
}
.p-front-about__profile-card::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 100% 2.5rem;
background-position: 0 1rem;
z-index: 0;
}
@media (max-width: 1100px) {
.p-front-about__profile-card {
max-width: 500px;
margin-top: 0;
}
}
@media (max-width: 768px) {
.p-front-about__profile-card {
padding: 1.5rem 1rem;
box-shadow: 6px 6px 0 #000000;
width: 95%;
margin-left: auto;
margin-right: auto;
}
}
@media (hover: hover) {
.p-front-about__profile-card:hover {
transform: translate(-4px, -6px);
box-shadow: 18px 22px 0 #FFE600;
}
}
.p-front-about__profile-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 3rem;
position: relative;
z-index: 5;
}
@media (max-width: 1100px) {
.p-front-about__profile-header {
justify-content: flex-start;
gap: 3rem;
}
}
@media (max-width: 768px) {
.p-front-about__profile-header {
margin-bottom: 1rem;
gap: 1rem;
}
}
.p-front-about__profile-visual-wrap {
position: relative;
width: 7.5rem;
height: 7.5rem;
margin-top: -1rem;
margin-left: -0.5rem;
}
@media (max-width: 768px) {
.p-front-about__profile-visual-wrap {
width: 5rem;
height: 5rem;
margin-top: -0.5rem;
}
}
.p-front-about__profile-visual {
width: 100%;
height: 100%;
background-color: #fff;
border: 3px solid #000000;
transform: rotate(-3deg);
box-shadow: 5px 5px 0 #000000;
padding: 0.5rem;
overflow: hidden;
}
.p-front-about__profile-visual img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-front-about__profile-info {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1rem;
}
.p-front-about__profile-seal {
width: 70px;
height: 70px;
background: #FFE600;
border: 2px dashed #000000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 950;
color: #000000;
transform: rotate(15deg);
box-shadow: 3px 3px 0 #000000;
animation: profile-seal-spin 25s linear infinite;
}
@media (max-width: 768px) {
.p-front-about__profile-seal {
width: 44px;
height: 44px;
font-size: 0.5rem;
box-shadow: 2px 2px 0 #000000;
}
}
@keyframes profile-seal-spin {
from {
transform: rotate(15deg);
}
to {
transform: rotate(375deg);
}
}
.p-front-about__profile-badge {
background: #000000;
color: #fff;
padding: 4px 15px;
font-size: 0.9rem;
font-weight: 950;
letter-spacing: 0.15em;
box-shadow: 4px 4px 0 #FFE600;
}
.p-front-about__profile-tape {
position: absolute;
width: 120px;
height: 35px;
background: rgba(255, 230, 0, 0.85);
backdrop-filter: blur(2px);
z-index: 10;
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}
.p-front-about__profile-tape--top {
top: -15px;
left: 20%;
transform: rotate(-8deg);
}
.p-front-about__profile-tape--bottom {
bottom: -10px;
right: 15%;
transform: rotate(3deg);
width: 100px;
background: rgba(255, 107, 0, 0.6);
}
@media (max-width: 768px) {
.p-front-about__profile-tape {
width: 64px;
height: 20px;
}
.p-front-about__profile-tape--top {
top: -8px;
left: 15%;
}
.p-front-about__profile-tape--bottom {
bottom: -6px;
width: 52px;
}
}
.p-front-about__profile-content {
position: relative;
z-index: 5;
}
.p-front-about__profile-msg-label {
font-size: 0.7rem;
font-weight: 950;
color: rgba(0, 0, 0, 0.4);
margin-bottom: 0.5rem;
letter-spacing: 0.3em;
font-family: "Space Mono", monospace;
}
.p-front-about__profile-bio {
font-size: 1.1rem;
line-height: 2;
color: #000000;
margin-bottom: 2rem;
font-weight: 700;
}
@media (max-width: 768px) {
.p-front-about__profile-bio {
font-size: 0.875rem;
line-height: 1.75;
margin-bottom: 1.5rem;
}
}
.p-front-about__profile-cta-wrap {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 1.5rem;
}
.p-front-about__profile-stamp {
font-size: 0.8rem;
font-weight: 950;
color: #e02424;
border: 3px double #e02424;
padding: 4px 12px;
transform: rotate(-12deg);
text-transform: uppercase;
opacity: 0.7;
user-select: none;
font-family: "Space Mono", monospace;
}
@media (max-width: 768px) {
.p-front-about__profile-stamp {
font-size: 0.7rem;
padding: 2px 8px;
}
}
.p-front-about__profile-cta .c-button {
padding: 10px 24px;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.p-front-about__profile-cta .c-button {
padding: 8px 18px;
font-size: 0.85rem;
}
}
.p-front-services {
padding: 7.5rem 0;
background-color: #FFE600;
position: relative;
z-index: 5;
overflow: hidden;
color: #000000;
}
.p-front-services::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 10% 15%, rgba(255, 107, 0, 0.15) 0%, transparent 50%), radial-gradient(circle at 90% 85%, rgba(123, 111, 239, 0.15) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
pointer-events: none;
}
.p-front-services::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.02;
pointer-events: none;
}
@media (max-width: 768px) {
.p-front-services {
padding: 3rem 0;
}
}
.p-front-services__header {
margin-bottom: 7.5rem;
text-align: left;
position: relative;
z-index: 10;
}
@media (max-width: 1024px) {
.p-front-services__header {
margin-bottom: 5rem;
}
}
@media (max-width: 768px) {
.p-front-services__header {
margin-bottom: 3rem;
}
}
.p-front-services__header .u-section-title {
color: #000000;
font-size: clamp(3rem, 8vw, 6rem);
margin-bottom: 1rem;
}
.p-front-services__lead {
font-size: 1.25rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
max-width: 800px;
margin: 0;
line-height: 1.6;
}
@media (max-width: 1024px) {
.p-front-services__lead {
font-size: 1.1rem;
line-height: 1.5;
}
}
@media (max-width: 768px) {
.p-front-services__lead {
font-size: 1rem;
padding: 0;
}
}
.p-front-services__list {
display: flex;
flex-direction: column;
gap: 12rem;
margin-top: 10rem;
}
@media (max-width: 1024px) {
.p-front-services__list {
gap: 6rem;
margin-top: 5rem;
}
}
@media (max-width: 768px) {
.p-front-services__list {
gap: 3rem;
margin-top: 2.5rem;
}
}
.p-front-services__item {
width: 100%;
position: relative;
}
.p-front-services__item-bg-text {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24vw;
font-weight: 950;
white-space: nowrap;
pointer-events: none;
z-index: -1;
line-height: 1;
opacity: 0;
transition: opacity 0.8s ease;
color: transparent;
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.08);
}
.p-front-services__item[data-service=production] .p-front-services__item-bg-text {
-webkit-text-stroke: 3px rgba(255, 107, 0, 0.2);
}
.p-front-services__item[data-service=lecture] .p-front-services__item-bg-text {
-webkit-text-stroke: 3px rgba(123, 111, 239, 0.2);
}
@media (max-width: 1024px) {
.p-front-services__item-bg-text {
font-size: 35vw;
top: 10%;
-webkit-text-stroke-width: 1.5px;
}
}
.p-front-services__item-canvas {
position: relative;
max-width: 1400px;
margin: 0 auto;
}
.p-front-services__item-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7.5rem;
}
@media (max-width: 1024px) {
.p-front-services__item-main {
flex-direction: column;
gap: 1.5rem;
text-align: left;
}
}
@media (max-width: 768px) {
.p-front-services__item-main {
gap: 1rem;
}
}
.p-front-services__item-visual-area {
position: relative;
width: 48%;
height: 560px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1024px) {
.p-front-services__item-visual-area {
width: 100%;
height: 350px;
order: 3;
}
}
@media (max-width: 768px) {
.p-front-services__item-visual-area {
height: 220px;
}
}
.p-front-services__item-blob {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.2;
filter: blur(50px);
border-radius: 50% 50% 30% 70%/50% 50% 70% 30%;
animation: blob-morph 12s infinite alternate ease-in-out;
}
.p-front-services__item-blob--prod {
background: radial-gradient(circle, #FF6B00, transparent);
}
.p-front-services__item-blob--lect {
background: radial-gradient(circle, #7B6FEF, transparent);
}
.p-front-services__item-character {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
pointer-events: none;
filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.15));
}
.p-front-services__item-character img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
will-change: transform;
}
@media (max-width: 1024px) {
.p-front-services__item-character {
height: 350px;
}
}
@media (max-width: 768px) {
.p-front-services__item-character {
height: 220px;
}
}
.p-front-services__item-bubble {
position: absolute;
top: 10%;
right: 10%;
background-color: #000000;
color: #fff;
padding: 8px 16px;
font-size: 0.8rem;
font-weight: 950;
border-radius: 20px 20px 20px 0;
transform: rotate(5deg);
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
z-index: 20;
white-space: nowrap;
will-change: transform;
}
@media (max-width: 1024px) {
.p-front-services__item-bubble {
top: 8%;
right: auto;
left: 50%;
transform: translateX(100px) rotate(5deg);
}
}
@media (max-width: 768px) {
.p-front-services__item-bubble {
top: 10%;
transform: translateX(80px) rotate(5deg);
}
}
@media (max-width: 480px) {
.p-front-services__item-bubble {
font-size: 0.7rem;
padding: 6px 12px;
top: 10%;
transform: translateX(60px) rotate(5deg);
}
}
.p-front-services__item-info {
position: relative;
z-index: 5;
width: 48%;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
@media (max-width: 1024px) {
.p-front-services__item-info {
width: 100%;
display: contents;
}
}
.p-front-services__item-label-wrap {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 3rem;
}
@media (max-width: 1024px) {
.p-front-services__item-label-wrap {
order: 1;
margin-bottom: 1rem;
}
}
@media (max-width: 768px) {
.p-front-services__item-label-wrap {
margin-bottom: 0.5rem;
}
}
.p-front-services__item-num {
font-size: 5rem;
line-height: 1;
font-weight: 950;
color: #000000;
position: relative;
}
.p-front-services__item-num::after {
content: "";
position: absolute;
bottom: 10%;
left: -10%;
width: 120%;
height: 30%;
background-color: #fff;
z-index: -1;
opacity: 0.6;
transform: rotate(-2deg);
}
@media (max-width: 768px) {
.p-front-services__item-num {
font-size: 3.5rem;
}
}
.p-front-services__item-label-wrap {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 3rem;
}
@media (max-width: 1024px) {
.p-front-services__item-label-wrap {
order: 1;
margin-bottom: 1rem;
}
}
@media (max-width: 768px) {
.p-front-services__item-label-wrap {
margin-bottom: 0.5rem;
}
}
.p-front-services__item-label-group {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.2;
}
.p-front-services__item-label-main {
font-size: 2.4rem;
font-weight: 900;
color: #000000;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.p-front-services__item-label-main {
font-size: 1.8rem;
}
}
.p-front-services__item-label-sub {
font-size: 0.75rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.3);
letter-spacing: 0.2em;
margin-top: 2px;
}
.p-front-services__item-title {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 950;
line-height: 1.1;
margin-bottom: 3rem;
letter-spacing: -0.04em;
color: #000000;
}
@media (max-width: 1024px) {
.p-front-services__item-title {
order: 2;
margin-bottom: 5rem;
}
}
@media (max-width: 768px) {
.p-front-services__item-title {
font-size: 1.65rem;
margin-bottom: 1.5rem;
}
}
.p-front-services__item-text {
font-size: 1.25rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.7);
margin-bottom: 5rem;
max-width: 540px;
}
@media (max-width: 1024px) {
.p-front-services__item-text {
order: 4;
margin: 1.5rem auto 5rem;
}
}
@media (max-width: 768px) {
.p-front-services__item-text {
font-size: 0.9375rem;
margin: 1rem auto 1.5rem;
}
}
@media (max-width: 1024px) {
.p-front-services__item-cta {
order: 5;
width: 100%;
max-width: 400px;
align-self: center;
}
}
.p-front-services__item-cta .c-button {
position: relative;
transition: all 0.1s linear;
border: 2px solid #000000;
box-shadow: 4px 4px 0 #000000;
}
.p-front-services__item-cta .c-button--production {
background-color: #FF6B00;
color: #000000;
}
@media (hover: hover) {
.p-front-services__item-cta .c-button--production:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #000000;
}
}
.p-front-services__item-cta .c-button--production:hover {
background-color: rgb(255, 112.92, 10.2);
}
.p-front-services__item-cta .c-button--production:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
.p-front-services__item-cta .c-button--lecture {
background-color: #7B6FEF;
color: #000000;
}
@media (hover: hover) {
.p-front-services__item-cta .c-button--lecture:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #000000;
}
}
.p-front-services__item-cta .c-button--lecture:hover {
background-color: rgb(131.415, 120.18, 240.02);
}
.p-front-services__item-cta .c-button--lecture:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #000000;
}
@media (max-width: 1024px) {
.p-front-services__item-cta .c-button {
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-size: 1.1rem;
text-align: center;
}
.p-front-services__item-cta .c-button span {
white-space: nowrap;
width: 100%;
text-align: center;
}
}
@media (min-width: 1025px) {
.p-front-services__item[data-service=lecture] .p-front-services__item-main .p-front-services__item-visual-area {
order: 2;
}
.p-front-services__item[data-service=lecture] .p-front-services__item-main .p-front-services__item-info {
order: 1;
}
}
.p-front-services__item[data-service=lecture] .p-front-services__item-num::after {
background-color: #7B6FEF;
}
.p-front-services__item[data-service=lecture] .p-front-services__item-bubble {
background-color: #7B6FEF;
}
.p-front-services__item[data-service=production] .p-front-services__item-num::after {
background-color: #FF6B00;
}
.p-front-services__item[data-service=production] .p-front-services__item-bubble {
background-color: #FF6B00;
}
@keyframes blob-morph {
0% {
border-radius: 50% 50% 30% 70%/50% 50% 70% 30%;
transform: rotate(0deg);
}
100% {
border-radius: 70% 30% 50% 50%/30% 70% 50% 50%;
transform: rotate(15deg);
}
}
.p-front-creations {
padding: 7.5rem 0;
background-color: #fff;
overflow: hidden;
}
@media (max-width: 768px) {
.p-front-creations {
padding: 3rem 0;
}
}
.p-front-creations__header {
margin-bottom: 7.5rem;
text-align: left;
}
@media (max-width: 1024px) {
.p-front-creations__header {
margin-bottom: 3rem;
}
}
@media (max-width: 768px) {
.p-front-creations__header {
margin-bottom: 1.5rem;
}
}
.p-front-creations__header .u-section-title {
margin-bottom: 1rem;
}
.p-front-creations__lead {
font-size: 1.2rem;
opacity: 0.6;
max-width: 800px;
margin-top: 0;
}
@media (max-width: 1024px) {
.p-front-creations__lead {
font-size: 1.1rem;
line-height: 1.5;
}
}
@media (max-width: 768px) {
.p-front-creations__lead {
font-size: 1rem;
}
}
.p-front-creations__section {
padding-bottom: 7.5rem;
}
.p-front-creations__section:last-child {
padding-bottom: 0;
}
@media (max-width: 768px) {
.p-front-creations__section {
padding-bottom: 1.5rem;
}
}
.p-front-creations__category-header {
margin-bottom: 3rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
padding-bottom: 1rem;
}
@media (max-width: 768px) {
.p-front-creations__category-header {
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
}
}
.p-front-creations__category-title {
font-size: 1.6rem;
font-weight: 950;
letter-spacing: 0.2em;
opacity: 0.3;
}
.p-front-creations__horizontal-container {
position: relative;
width: 100%;
padding: 1.5rem 0;
}
@media (max-width: 768px) {
.p-front-creations__horizontal-container {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
.p-front-creations__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 3.75rem;
height: 3.75rem;
background: #fff;
border: 2px solid #000000;
border-radius: 50%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.p-front-creations__arrow span {
display: block;
width: 0.625rem;
height: 0.625rem;
border-top: 2px solid #000000;
border-right: 2px solid #000000;
}
.p-front-creations__arrow--prev {
left: 1.25rem;
}
.p-front-creations__arrow--prev span {
transform: rotate(-135deg);
margin-left: 4px;
}
.p-front-creations__arrow--next {
right: 1.25rem;
}
.p-front-creations__arrow--next span {
transform: rotate(45deg);
margin-right: 4px;
}
@media (hover: hover) {
.p-front-creations__arrow:hover {
background: #FFE600;
transform: translateY(-50%) scale(1.1);
box-shadow: 8px 8px 0 #000000;
}
}
@media (max-width: 768px) {
.p-front-creations__arrow {
width: 2.75rem;
height: 2.75rem;
}
.p-front-creations__arrow--prev {
left: 0.5rem;
}
.p-front-creations__arrow--next {
right: 0.5rem;
}
.p-front-creations__arrow span {
width: 0.5rem;
height: 0.5rem;
}
}
.p-front-creations__horizontal-wrapper {
width: 100%;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
padding: 40px 5vw;
margin-top: -30px;
}
.p-front-creations__horizontal-wrapper::-webkit-scrollbar {
height: 6px;
}
.p-front-creations__horizontal-wrapper::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.08);
border-radius: 3px;
}
.p-front-creations__horizontal-wrapper::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
}
.p-front-creations__horizontal-wrapper::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.4);
}
.p-front-creations__horizontal {
display: flex;
gap: 3rem;
width: max-content;
}
.p-front-creations__card {
width: 450px;
flex-shrink: 0;
background: #fff;
border: 2px solid #000000;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
cursor: pointer;
backface-visibility: hidden;
transform-style: preserve-3d;
margin: 10px;
touch-action: manipulation;
}
@media (max-width: 768px) {
.p-front-creations__card {
width: 280px;
}
}
.p-front-creations__card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.p-front-creations__card-visual {
aspect-ratio: 16/10;
overflow: hidden;
border-bottom: 2px solid #000000;
position: relative;
}
.p-front-creations__card-visual img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-front-creations__card-content {
padding: 1.5rem;
position: relative;
z-index: 1;
}
.p-front-creations__card-title {
font-size: 1.4rem;
font-weight: 950;
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.p-front-creations__card-tags {
font-size: 0.8rem;
opacity: 0.4;
font-family: "Space Mono", monospace;
}
@media (hover: hover) {
.p-front-creations__card:hover {
transform: translateY(-12px) rotate(1deg);
box-shadow: 20px 20px 0 #FFE600;
border-color: #000000;
}
.p-front-creations__card:hover::after {
opacity: 1;
}
.p-front-creations__card:hover-visual img {
transform: scale(1.1) rotate(-1deg);
}
.p-front-creations__card:hover-title {
color: #FFE600;
-webkit-text-stroke: 1px #000000;
}
}
.p-front-creations__card--more {
width: 300px;
border-style: dashed;
border-color: rgba(0, 0, 0, 0.2);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.p-front-creations__card--more .p-front-creations__more-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-decoration: none;
color: inherit;
}
.p-front-creations__card--more .p-front-creations__more-arrow {
width: 5rem;
height: 5rem;
border: 2px solid #000000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (hover: hover) {
.p-front-creations__card--more:hover {
border-style: solid;
border-color: #000000;
background: #fff;
}
.p-front-creations__card--more:hover .p-front-creations__more-arrow {
background: #FFE600;
transform: rotate(-15deg);
}
}
.p-front-contact {
padding: 7.5rem 0;
background-color: #FFE600;
position: relative;
overflow: hidden;
}
.p-front-contact::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: repeating-linear-gradient(45deg, #000, #000 10px, #FFE600 10px, #FFE600 20px);
z-index: 10;
}
@media (max-width: 768px) {
.p-front-contact {
padding: 3rem 0;
}
}
.p-front-contact__inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 2.5rem;
}
@media (max-width: 768px) {
.p-front-contact__inner {
padding: 0 1.25rem;
}
}
.p-front-contact__title {
font-size: clamp(2rem, 10vw, 9rem);
font-weight: 950;
line-height: 1.1;
margin-bottom: 5rem;
letter-spacing: -0.03em;
color: #000000;
word-break: normal;
overflow-wrap: break-word;
}
@media (max-width: 768px) {
.p-front-contact__title {
margin-bottom: 1.5rem;
text-align: center;
}
}
.p-front-contact__title span.u-mono {
display: block;
font-size: 1.2rem;
letter-spacing: 0.5em;
opacity: 0.4;
margin-bottom: 1.5rem;
}
.p-front-contact__title span:not(.u-mono) {
display: inline-block;
font-size: inherit;
letter-spacing: inherit;
opacity: 1;
margin: 0;
}
.p-front-contact__text {
font-size: clamp(1.1rem, 2vw, 1.4rem);
line-height: 1.7;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 7.5rem;
font-weight: 500;
max-width: 700px;
}
@media (max-width: 768px) {
.p-front-contact__text {
margin-bottom: 3rem;
}
}
.p-front-contact__cta {
display: flex;
justify-content: flex-start;
}
@media (max-width: 1024px) {
.p-front-contact__cta {
justify-content: center;
}
}
.p-front-contact__cta .c-button {
white-space: nowrap;
}
@media (max-width: 768px) {
.p-front-contact__cta .c-button {
font-size: clamp(0.875rem, 3.5vw, 1rem);
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.p-front-contact__bg-text {
position: absolute;
bottom: -0.1em;
left: 0;
display: flex;
font-family: "Space Mono", monospace;
font-size: 24vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
line-height: 1;
letter-spacing: -0.02em;
}
.p-front-contact__bg-text span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.p-front-contact__bg-text {
-webkit-text-stroke: 0;
}
.u-section-title {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 950;
line-height: 1;
letter-spacing: -0.04em;
}
.c-link-more {
display: inline-flex;
align-items: center;
gap: 1.5rem;
font-family: "Noto Sans JP", sans-serif;
font-weight: 950;
font-size: 1.1rem;
text-decoration: none !important;
color: inherit !important;
transition: color 0.3s ease;
}
.c-link-more span {
display: flex;
width: 3rem;
height: 3rem;
border: 2px solid currentColor !important;
border-radius: 50% !important;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
font-size: 1.4rem;
background-color: transparent !important;
color: inherit !important;
flex-shrink: 0;
}
@media (hover: hover) {
.c-link-more:hover {
color: #FFE600 !important;
}
.c-link-more:hover span {
background-color: #FFE600 !important;
color: #000 !important;
border-color: #FFE600 !important;
transform: translateX(8px) rotate(-15deg);
}
}
@keyframes mobile-text-purify-prod {
0%, 10% {
color: rgba(0, 0, 0, 0.08);
-webkit-text-stroke-color: rgba(0, 0, 0, 0.08);
}
45%, 75% {
color: rgba(255, 107, 0, 0.1);
-webkit-text-stroke-color: rgba(255, 107, 0, 0.4);
text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
transform: scale(1.015);
}
100% {
color: rgba(0, 0, 0, 0.025);
-webkit-text-stroke-color: rgba(0, 0, 0, 0.025);
}
}
@keyframes mobile-text-purify-lect {
0%, 10% {
color: rgba(0, 0, 0, 0.08);
-webkit-text-stroke-color: rgba(0, 0, 0, 0.08);
}
45%, 75% {
color: rgba(123, 111, 239, 0.1);
-webkit-text-stroke-color: rgba(123, 111, 239, 0.4);
text-shadow: 0 0 10px rgba(123, 111, 239, 0.5);
transform: scale(1.015);
}
100% {
color: rgba(0, 0, 0, 0.025);
-webkit-text-stroke-color: rgba(0, 0, 0, 0.025);
}
}
.p-production {
background-color: #fff;
color: #000000;
overflow-x: hidden;
position: relative;
font-feature-settings: "palt";
}
.p-production .u-reveal {
transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.p-production::before {
content: "";
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
z-index: 9999;
}
.p-production { }
.p-production-hero {
position: relative;
padding-top: var(--header-height);
min-height: clamp(560px, 72svh, 780px);
display: flex;
align-items: center;
background-color: #fff;
overflow: hidden;
border-top: 4px solid #000000;
border-bottom: 4px solid #000000;
}
@media (max-width: 768px) {
.p-production-hero {
padding-top: calc(var(--header-height) + 1.5rem);
padding-bottom: 2rem;
min-height: 100svh;
max-height: 100svh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.p-production-hero::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(255, 107, 0, 0.08) 0%, transparent 70%);
z-index: 1;
pointer-events: none;
}
.p-production-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 107, 0, 0.12) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 107, 0, 0.12) 1.5px, transparent 1.5px), linear-gradient(rgba(255, 107, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 107, 0, 0.05) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
z-index: 0;
pointer-events: none;
}
.p-production-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.p-production-hero__bg-marquee {
position: absolute;
left: 0;
width: 100%;
top: 58%;
white-space: nowrap;
display: flex;
font-size: 16vw;
font-weight: 950;
color: transparent;
-webkit-text-stroke: 2px rgba(255, 107, 0, 0.15);
pointer-events: none;
user-select: none;
z-index: 1;
letter-spacing: -0.02em;
opacity: 0.8;
}
.p-production-hero__bg-marquee span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.p-production-hero__shapes {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.p-production-hero__shape {
position: absolute;
background: rgba(255, 107, 0, 0.1);
border: 2px solid rgba(255, 107, 0, 0.2);
}
.p-production-hero__shape--star {
width: 80px;
height: 80px;
top: 60%;
left: 10%;
background: rgba(255, 230, 0, 0.1);
border: 2px solid rgba(255, 230, 0, 0.2);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation: hero-float 10s ease-in-out infinite reverse;
}
.p-production-hero__inner {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
grid-template-areas: "content visual" "cta     visual";
gap: 0 5rem;
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
@media (max-width: 1024px) {
.p-production-hero__inner {
grid-template-columns: 1fr;
grid-template-areas: "content" "visual" "cta";
gap: 1.5rem;
text-align: center;
}
}
@media (max-width: 768px) {
.p-production-hero__inner {
gap: 2svh;
}
}
.p-production-hero__content {
grid-area: content;
position: relative;
z-index: 30;
}
@media (max-width: 1024px) {
.p-production-hero__content {
padding: 0 1.5rem;
}
}
.p-production-hero__label {
font-size: 0.8rem;
font-weight: 950;
color: #fff;
background: #FF6B00;
padding: 4px 16px;
display: inline-block;
margin-top: 1.5rem;
margin-bottom: 3rem;
transform: rotate(-1.5deg);
box-shadow: 4px 4px 0 #000000;
line-height: 1;
}
@media (max-width: 1024px) {
.p-production-hero__label {
margin-top: 3rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 768px) {
.p-production-hero__label {
margin-top: 1.25rem;
margin-bottom: 1rem;
}
}
.p-production-hero__title {
font-size: clamp(2.2rem, 6vw, 4.8rem);
line-height: 1.2;
font-weight: 950;
margin-bottom: 5rem;
letter-spacing: -0.02em;
color: #000000;
}
@media (max-width: 1024px) {
.p-production-hero__title {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.p-production-hero__title {
font-size: 2.1rem;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
}
.p-production-hero__title .u-text-pop {
display: inline-block;
background: #FFE600;
color: #000;
padding: 0 0.15em;
margin: 0 0.05em;
transform: skewX(-10deg);
border: 3px solid #000000;
box-shadow: 6px 6px 0 #000000;
border-radius: 2px;
}
@media (max-width: 768px) {
.p-production-hero__title .u-text-pop {
margin-right: 0.25em;
}
}
.p-production-hero__visual {
grid-area: visual;
position: relative;
z-index: 20;
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.p-production-hero__visual {
margin: 1rem 0;
}
}
@media (max-width: 768px) {
.p-production-hero__visual {
margin: 1rem 0;
}
}
.p-production-hero__character {
position: relative;
width: 100%;
max-width: 400px;
transform: rotate(-1deg);
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.p-production-hero__character {
max-width: 280px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.p-production-hero__character {
max-width: 280px;
max-height: 32svh;
}
}
.p-production-hero__cta {
grid-area: cta;
position: relative;
z-index: 30;
}
@media (max-width: 1024px) {
.p-production-hero__cta {
padding: 0 1.5rem;
margin-top: -3rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 768px) {
.p-production-hero__cta {
margin-top: -3rem;
margin-bottom: 0.5rem;
}
}
.p-production-hero__cta .c-button {
white-space: nowrap;
}
@media (max-width: 768px) {
.p-production-hero__cta .c-button {
width: auto;
min-width: 0;
max-width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.p-production-hero__character {
position: relative;
width: 100%;
max-width: 400px;
max-height: 630px;
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.p-production-hero__character {
max-width: 280px;
max-height: 420px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.p-production-hero__character {
max-width: 280px;
max-height: 32svh;
}
}
.p-production-hero__character {
transform: rotate(-1deg);
}
.p-production-hero__character img {
width: auto;
height: auto;
max-height: 630px;
object-fit: contain;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.05));
animation: hero-award-float 12s ease-in-out infinite;
}
@media (max-width: 1024px) {
.p-production-hero__character img {
max-height: 420px;
}
}
@media (max-width: 768px) {
.p-production-hero__character img {
max-height: 32svh;
}
}
.p-production-hero__bubble {
position: absolute;
top: 6%;
right: -2%;
background: #FF6B00;
color: #fff;
padding: 10px 20px;
font-weight: 950;
font-size: 1.1rem;
border-radius: 24px 24px 24px 4px;
transform: rotate(8deg);
box-shadow: 6px 6px 0 #000;
z-index: 30;
white-space: nowrap;
}
@media (max-width: 1024px) {
.p-production-hero__bubble {
top: -5%;
right: auto;
left: 50%;
transform: translateX(36px) rotate(8deg);
}
}
@media (max-width: 768px) {
.p-production-hero__bubble {
display: none;
}
}
.p-production-hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
font-size: 0.8rem;
font-weight: 900;
font-family: "Space Mono", monospace;
letter-spacing: 0.3em;
color: rgba(0, 0, 0, 0.3);
z-index: 40;
}
@media (max-width: 1024px) {
.p-production-hero__scroll {
display: none;
}
}
.p-production-hero__scroll span {
width: 2px;
height: 60px;
background: rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.p-production-hero__scroll span::after {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: #000;
animation: scroll-line-v 2s infinite;
}
.p-production { }
.p-production-commitment {
padding: 7.5rem 0;
background-color: #fff;
overflow-x: hidden;
}
@media (max-width: 1024px) {
.p-production-commitment {
padding: 5rem 0 6.5rem;
}
}
@media (max-width: 768px) {
.p-production-commitment {
padding: 1.5rem 0 2.5rem;
}
}
.p-production-commitment__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 1024px) {
.p-production-commitment__header {
margin-bottom: 3rem;
}
}
@media (max-width: 768px) {
.p-production-commitment__header {
margin-bottom: 1.5rem;
}
}
.p-production-commitment__header .u-section-title {
font-size: clamp(2rem, 5vw, 4rem);
margin-bottom: 3rem;
font-weight: 950;
letter-spacing: -0.02em;
}
.p-production-commitment__header .u-section-title .u-text-pop {
display: inline-block;
background: #FFE600;
color: #000;
padding: 0 0.2em;
margin: 0 0.1em;
transform: rotate(-2deg);
box-shadow: 4px 4px 0 #000;
border: 2px solid #000;
line-height: 1.1;
}
.p-production-commitment__message {
max-width: 840px;
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.p-production-commitment__catch {
font-size: clamp(1.2rem, 2.2vw, 2rem);
line-height: 1.6;
color: #000;
font-weight: 950;
margin-top: 5rem;
margin-bottom: 7.5rem;
}
.p-production-commitment__catch .u-text-highlight {
background: linear-gradient(transparent 60%, rgba(255, 230, 0, 0.6) 0);
padding: 0 4px;
}
@media (max-width: 1024px) {
.p-production-commitment__catch {
margin-top: 3rem;
margin-bottom: 5rem;
}
}
@media (max-width: 768px) {
.p-production-commitment__catch {
margin-top: 1.5rem;
margin-bottom: 3rem;
text-align: center;
width: 100%;
}
}
@media (max-width: 768px) {
.p-production-commitment__catch-line1 {
display: block;
}
}
.p-production-commitment__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
margin-top: 5rem;
max-width: 1000px;
margin-inline: auto;
}
@media (max-width: 1024px) {
.p-production-commitment__grid {
grid-template-columns: 1fr;
gap: 3rem;
padding: 0 1rem;
}
}
.p-production-comm-card {
background: #fff;
border-radius: 16px;
border: 3px solid #000000;
box-shadow: 6px 6px 0 #000000;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
min-width: 0;
height: 100%;
}
.p-production-comm-card.is-large {
grid-row: span 1.1;
}
@media (hover: hover) {
.p-production-comm-card:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #000;
background-color: #fff;
}
.p-production-comm-card:hover .p-production-comm-card__icon {
color: #FF6B00;
transform: scale(1.1) rotate(12deg) translate(-10px, 10px);
}
.p-production-comm-card:hover .p-production-comm-card__bg-num {
opacity: 0.1;
transform: scale(1.05);
}
.p-production-comm-card:hover .p-production-comm-card__label {
transform: rotate(0deg) scale(1.05);
background: #FF6B00;
color: #fff;
}
}
.p-production-comm-card__bg-num {
position: absolute;
bottom: -10px;
right: -10px;
font-size: 8rem;
font-weight: 950;
line-height: 1;
color: #000;
opacity: 0.03;
pointer-events: none;
z-index: 0;
transition: all 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-style: italic;
}
.p-production-comm-card__inner {
padding: 3rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.p-production-comm-card__inner {
padding: 1.5rem;
gap: 16px;
}
}
.p-production-comm-card__header {
width: 100%;
position: relative;
z-index: 2;
}
.p-production-comm-card__icon {
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 107, 0, 0.15);
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: -1;
}
.p-production-comm-card__icon svg {
width: 100%;
height: 100%;
stroke-width: 1.25;
filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.03));
}
.p-production-comm-card__label {
font-size: 0.75rem;
font-weight: 950;
color: #000;
background: #FFE600;
padding: 4px 14px;
display: inline-block;
border: 3px solid #000000;
transform: rotate(-2deg);
box-shadow: 3px 3px 0 #000000;
line-height: 1;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.p-production-comm-card__body {
display: flex;
flex-direction: column;
gap: 14px;
}
.p-production-comm-card__title {
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 950;
line-height: 1.4;
color: #000;
position: relative;
display: inline-block;
width: fit-content;
z-index: 1;
}
.p-production-comm-card__title::after {
content: "";
position: absolute;
bottom: 2px;
left: -2px;
width: calc(100% + 4px);
height: 40%;
background: rgba(255, 230, 0, 0.4);
z-index: -1;
transform: skewX(-15deg);
}
.p-production-comm-card__desc {
font-size: 0.9rem;
line-height: 1.8;
color: #000;
font-weight: 600;
opacity: 0.8;
}
.p-production { }
.p-production-menu {
padding: 7.5rem 0;
background-color: #FFE600;
position: relative;
z-index: 10;
}
@media (max-width: 768px) {
.p-production-menu {
padding: 1.5rem 0;
}
}
.p-production-menu__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-production-menu__header {
margin-bottom: 1.5rem;
}
}
.p-production-menu__header .u-section-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin-bottom: 1.5rem;
font-weight: 950;
color: #000;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.p-production-menu__header .u-section-title::after {
background-color: #000;
}
}
.p-production-menu__lead-box {
margin-top: 1.5rem;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.p-production-menu__lead-badge {
font-family: "Space Mono", monospace;
font-size: 0.75rem;
font-weight: 950;
background: #000;
color: #fff;
padding: 4px 16px;
display: inline-block;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 4px;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.p-production-menu__lead-badge::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #FFE600;
}
.p-production-menu__lead {
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
font-weight: 700;
color: #000;
line-height: 1.8;
}
.p-production-menu__guide {
margin-top: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.p-production-menu__note {
font-size: 0.85rem;
font-weight: 850;
color: #000;
background: rgba(255, 255, 255, 0.4);
border-left: 4px solid #000;
padding: 8px 16px;
border-radius: 4px;
display: inline-block;
text-align: left;
}
.p-production-menu__list {
display: flex;
flex-direction: column;
gap: 5rem;
max-width: 1200px;
margin: 5rem auto 0;
padding: 0 1.5rem;
}
.p-production-menu-card {
background: #fff;
border-radius: 32px;
box-shadow: 10px 10px 0 #000;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.p-production-menu-card::before {
content: attr(data-initial);
position: absolute;
top: -0.25em;
right: -0.1em;
font-size: 20rem;
font-weight: 950;
color: rgba(0, 0, 0, 0.02);
line-height: 1;
pointer-events: none;
z-index: 0;
}
@media (hover: hover) {
.p-production-menu-card:hover {
transform: translateY(-6px);
box-shadow: 15px 15px 0 rgba(0, 0, 0, 0.1), 15px 15px 0 #000;
}
.p-production-menu-card:hover .p-production-menu-card__icon {
background: #000;
color: #fff;
transform: rotate(-5deg) scale(1.05);
}
}
.p-production-menu-card__inner {
padding: 3rem 1.5rem;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.p-production-menu-card__inner {
padding: 1.5rem;
}
}
.p-production-menu-card__header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 3rem;
}
@media (max-width: 768px) {
.p-production-menu-card__header {
flex-direction: column;
align-items: flex-start;
}
}
.p-production-menu-card__icon {
width: 56px;
height: 56px;
background: #FFE600;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
transition: all 0.4s ease;
}
.p-production-menu-card__icon svg {
width: 28px;
height: 28px;
}
.p-production-menu-card__label {
font-size: 0.75rem;
font-weight: 950;
color: #FF6B00;
letter-spacing: 0.1em;
display: block;
margin-bottom: 0px;
}
.p-production-menu-card__title {
font-size: clamp(1.4rem, 2.2vw, 2rem);
font-weight: 950;
color: #000;
line-height: 1.2;
}
.p-production-menu-card__body {
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
align-items: start;
}
@media (max-width: 1024px) {
.p-production-menu-card__body {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.p-production-menu-card__sub-title {
font-size: 0.95rem;
font-weight: 950;
color: #000;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.p-production-menu-card__sub-title::after {
content: "";
flex: 1;
height: 1px;
background: #f0f0f0;
}
.p-production-menu-card__text {
font-size: 1rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.7);
line-height: 1.6;
margin-bottom: 3rem;
}
.p-production-menu-card__features {
list-style: none;
padding: 0;
margin: 0;
}
.p-production-menu-card__features li {
font-size: 0.95rem;
font-weight: 700;
color: #000;
margin-bottom: 8px;
line-height: 1.6;
display: flex;
align-items: center;
gap: 0.8rem;
}
.p-production-menu-card__features li::before {
content: "";
width: 6px;
height: 6px;
background-color: #FF6B00;
border-radius: 50%;
flex-shrink: 0;
}
.p-production-menu-card__pricing {
background: #f9f9f9;
border-radius: 24px;
padding: 3rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (max-width: 768px) {
.p-production-menu-card__pricing {
padding: 1.5rem;
}
}
.p-production-menu-card__price-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.p-production-menu-card__price-name {
font-size: 0.85rem;
font-weight: 850;
color: rgba(0, 0, 0, 0.4);
letter-spacing: 0.05em;
}
.p-production-menu-card__price-value {
font-size: 2.8rem;
font-weight: 950;
font-family: "Space Mono", monospace;
color: #000;
line-height: 1;
}
@media (max-width: 768px) {
.p-production-menu-card__price-value {
font-size: 2.4rem;
}
}
.p-production-menu-card__price-value span {
font-size: 1.1rem;
opacity: 0.4;
}
.p-production-menu-card__price-note {
font-size: 0.8rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.5);
padding-top: 0.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.p-production { }
.p-production-steps {
padding: 7.5rem 0;
background-color: #faf9f6;
overflow-x: hidden;
}
@media (max-width: 768px) {
.p-production-steps {
padding: 1.5rem 0;
}
}
.p-production-steps__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-production-steps__header {
margin-bottom: 1.5rem;
}
}
@media (max-width: 768px) {
.p-production-steps__header .u-step-title-line1 {
display: block;
}
}
.p-production-steps__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3rem;
position: relative;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 1200px) {
.p-production-steps__list {
grid-template-columns: 1fr;
gap: 7.5rem;
max-width: 800px;
}
}
@media (max-width: 768px) {
.p-production-steps__list {
gap: 1.5rem;
}
}
.p-production-steps-item {
display: flex;
flex-direction: column;
text-align: left;
background: #fff;
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
border-radius: 20px;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
height: 100%;
touch-action: manipulation;
}
@media (max-width: 1200px) and (min-width: 769px) {
.p-production-steps-item {
display: grid;
grid-template-areas: "header meta" "text   text";
grid-template-columns: 1fr auto;
align-items: flex-start;
column-gap: 3rem;
row-gap: 0;
}
.p-production-steps-item__header {
grid-area: header;
margin-bottom: 0;
}
.p-production-steps-item__meta {
grid-area: meta;
margin-top: 8px;
margin-bottom: 0;
justify-content: flex-end;
text-align: right;
}
.p-production-steps-item__text {
grid-area: text;
}
}
.p-production-steps-item {
padding: 3rem 1.5rem;
}
@media (max-width: 1200px) {
.p-production-steps-item {
padding: 3rem;
}
}
@media (max-width: 768px) {
.p-production-steps-item {
padding: 3rem 1.5rem;
}
}
@media (hover: hover) {
.p-production-steps-item:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #000;
background: #fafafa;
}
.p-production-steps-item:hover .p-production-steps-item__num {
background: #000;
color: #fff;
transform: scale(1.1) translateX(-50%);
}
}
.p-production-steps-item::after {
content: "→";
position: absolute;
font-size: 1.8rem;
font-weight: 950;
color: #000;
pointer-events: none;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 1201px) {
.p-production-steps-item::after {
top: 50%;
left: calc(100% + 1.5rem);
transform: translate(-50%, -50%);
}
.p-production-steps-item:last-child::after {
display: none;
}
}
@media (max-width: 1200px) {
.p-production-steps-item::after {
content: "↓";
top: calc(100% + 3.75rem);
left: 50%;
transform: translate(-50%, -50%);
}
.p-production-steps-item:last-child::after {
display: none;
}
}
.p-production-steps-item__num {
width: 56px;
height: 56px;
background: #FFE600;
color: #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
font-size: 1.35rem;
font-weight: 950;
font-family: "Space Mono", monospace;
border: 4px solid #000;
box-shadow: 4px 4px 0 #000;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 5;
}
.p-production-steps-item__header {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.p-production-steps-item__title {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: 950;
color: #FF6B00;
line-height: 1.2;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.p-production-steps-item__appeal {
font-size: 0.95rem;
font-weight: 950;
color: #000000;
line-height: 1.4;
}
.p-production-steps-item__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
margin-bottom: 0;
width: 100%;
}
@media (max-width: 1200px) and (min-width: 769px) {
.p-production-steps-item__meta {
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
}
@media (min-width: 1201px) {
.p-production-steps-item__meta {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 768px) {
.p-production-steps-item__meta {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
.p-production-steps-item__method-tag {
font-size: 0.7rem;
font-weight: 850;
color: rgba(0, 0, 0, 0.6);
background: #f8f8f8;
padding: 4px 10px;
border-radius: 4px;
display: inline-block;
font-family: "Space Mono", monospace;
letter-spacing: 0.02em;
border: 1px solid rgba(0, 0, 0, 0.08);
line-height: 1.4;
width: fit-content;
max-width: 100%;
word-break: break-all;
}
.p-production-steps-item__duration {
font-size: 0.75rem;
font-weight: 950;
color: #FF6B00;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.p-production-steps-item__duration::before {
content: "目安:";
font-size: 0.7rem;
color: #000000;
opacity: 0.8;
font-weight: 900;
}
.p-production-steps-item__text {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
font-weight: 600;
flex-grow: 1;
border-top: 2px dashed rgba(0, 0, 0, 0.1);
padding-top: 1.5rem;
margin-top: 1.5rem;
}
@media (max-width: 768px) {
.p-production-steps-item__text {
padding-top: 1rem;
margin-top: 1rem;
}
}
.p-production { }
.p-production-faq {
padding: 7.5rem 0;
background-color: #fff;
}
@media (max-width: 768px) {
.p-production-faq {
padding: 1.5rem 0;
}
}
.p-production-faq__header {
margin-bottom: 5rem;
text-align: center;
}
@media (max-width: 768px) {
.p-production-faq__header {
margin-bottom: 3rem;
}
}
.p-production-faq__list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.p-production-faq-item {
background: #fff;
border: 3px solid #000;
box-shadow: 4px 4px 0 #000;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-production-faq-item[open] {
box-shadow: 2px 2px 0 #000;
transform: translate(2px, 2px);
}
.p-production-faq-item[open] .p-production-faq-item__toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.p-production-faq-item__question {
padding: 1.5rem 3rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 1.5rem;
list-style: none;
position: relative;
font-weight: 950;
font-size: 1.1rem;
user-select: none;
}
.p-production-faq-item__question::-webkit-details-marker {
display: none;
}
@media (max-width: 768px) {
.p-production-faq-item__question {
padding: 1.5rem;
font-size: 1rem;
}
}
.p-production-faq-item__q-icon {
width: 36px;
height: 36px;
background: #FFE600;
color: #000;
border: 2px solid #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Space Mono", monospace;
font-weight: 950;
flex-shrink: 0;
}
.p-production-faq-item__toggle {
width: 24px;
height: 24px;
margin-left: auto;
position: relative;
flex-shrink: 0;
}
.p-production-faq-item__toggle::before, .p-production-faq-item__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 3px;
background: #000;
transform: translate(-50%, -50%);
transition: all 0.3s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-production-faq-item__toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.p-production-faq-item__answer {
padding: 0 3rem 1.5rem;
display: flex;
gap: 1.5rem;
}
@media (max-width: 768px) {
.p-production-faq-item__answer {
padding: 0 1.5rem 1.5rem;
gap: 1rem;
}
}
.p-production-faq-item__a-icon {
width: 36px;
height: 36px;
background: #FF6B00;
color: #fff;
border: 2px solid #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Space Mono", monospace;
font-weight: 950;
flex-shrink: 0;
}
.p-production-faq-item__a-text {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
font-weight: 600;
padding-top: 4px;
}
.p-production { }
.p-production-cta {
padding: 10rem 0 3rem;
background-color: #FFE600;
position: relative;
overflow: hidden;
}
.p-production-cta::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: repeating-linear-gradient(45deg, #000, #000 10px, #FFE600 10px, #FFE600 20px);
z-index: 10;
}
@media (max-width: 1024px) {
.p-production-cta {
padding: 7.5rem 0;
}
}
@media (max-width: 768px) {
.p-production-cta {
padding: 5.5rem 0;
}
}
.p-production-cta__content {
position: relative;
z-index: 10;
text-align: center;
max-width: 900px;
margin: 0 auto;
padding-bottom: 5rem;
}
@media (max-width: 768px) {
.p-production-cta__content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.p-production-cta__title {
font-size: clamp(2.5rem, 8vw, 7rem);
font-weight: 950;
line-height: 1.05;
margin-bottom: 5rem;
letter-spacing: -0.04em;
color: #000;
text-transform: uppercase;
}
.p-production-cta__title [class*=-cta__label] {
display: block;
font-size: 1rem;
margin-bottom: 20px;
opacity: 0.6;
font-family: "Space Mono", monospace;
}
@media (max-width: 768px) {
.p-production-cta__title {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
.p-production-cta__text {
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
font-weight: 850;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
margin-bottom: 7.5rem;
max-width: 40em;
margin-inline: auto;
text-align: left;
}
.p-production-cta__btn-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
}
.p-production-cta__btn-wrap .c-button {
padding: 1.6rem 5rem;
border-radius: 100px;
font-size: 2rem;
font-weight: 950;
background-color: #000;
color: #fff;
border: 4px solid #000;
box-shadow: 12px 12px 0 #fff;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
white-space: nowrap;
touch-action: manipulation;
}
@media (max-width: 768px) {
.p-production-cta__btn-wrap .c-button {
white-space: normal;
max-width: 100%;
box-sizing: border-box;
font-size: 1.35rem;
padding: 1rem 1.5rem;
}
}
@media (hover: hover) {
.p-production-cta__btn-wrap .c-button:hover {
transform: translate(6px, 6px);
box-shadow: 0 0 0 #fff;
background-color: #222;
}
}
.p-production-cta__bg-text {
position: absolute;
bottom: -0.1em;
left: 0;
display: flex;
font-family: "Space Mono", monospace;
font-size: 24vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
line-height: 1;
letter-spacing: -0.02em;
}
.p-production-cta__bg-text span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
@keyframes scroll-line-v {
0% {
top: -100%;
}
100% {
top: 100%;
}
}
@keyframes hero-award-float {
0%, 100% {
transform: translateY(0) rotate(-1deg);
}
50% {
transform: translateY(-20px) rotate(1deg);
}
}
.p-lecture {
background-color: #fff;
color: #000000;
overflow-x: hidden;
position: relative;
font-feature-settings: "palt";
}
.p-lecture .u-reveal {
transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.p-lecture::before {
content: "";
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
z-index: 9999;
}
.p-lecture-hero {
position: relative;
padding-top: var(--header-height);
min-height: clamp(560px, 72svh, 780px);
display: flex;
align-items: center;
background-color: #fff;
overflow: hidden;
border-top: 4px solid #000000;
border-bottom: 4px solid #000000;
}
@media (max-width: 768px) {
.p-lecture-hero {
padding-top: calc(var(--header-height) + 1.5rem);
padding-bottom: 2rem;
min-height: 100svh;
max-height: 100svh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.p-lecture-hero::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(123, 111, 239, 0.08) 0%, transparent 70%);
z-index: 1;
pointer-events: none;
}
.p-lecture-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(123, 111, 239, 0.12) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(123, 111, 239, 0.12) 1.5px, transparent 1.5px), linear-gradient(rgba(123, 111, 239, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 111, 239, 0.05) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
z-index: 0;
pointer-events: none;
}
.p-lecture-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.p-lecture-hero__bg-marquee {
position: absolute;
left: 0;
width: 100%;
top: 58%;
white-space: nowrap;
display: flex;
font-size: 16vw;
font-weight: 950;
color: transparent;
-webkit-text-stroke: 2px rgba(123, 111, 239, 0.15);
pointer-events: none;
user-select: none;
z-index: 1;
letter-spacing: -0.02em;
opacity: 0.8;
}
.p-lecture-hero__bg-marquee span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.p-lecture-hero__shapes {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.p-lecture-hero__shape {
position: absolute;
background: rgba(123, 111, 239, 0.1);
border: 2px solid rgba(123, 111, 239, 0.2);
}
.p-lecture-hero__shape--star {
width: 80px;
height: 80px;
top: 60%;
left: 10%;
background: rgba(123, 111, 239, 0.15);
border: 2px solid rgba(123, 111, 239, 0.25);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation: lecture-hero-float 10s ease-in-out infinite reverse;
}
.p-lecture-hero__inner {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
grid-template-areas: "content visual" "cta     visual";
gap: 0 5rem;
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
@media (max-width: 1024px) {
.p-lecture-hero__inner {
grid-template-columns: 1fr;
grid-template-areas: "content" "visual" "cta";
gap: 1.5rem;
text-align: center;
}
}
@media (max-width: 768px) {
.p-lecture-hero__inner {
gap: 2svh;
}
}
.p-lecture-hero__content {
grid-area: content;
position: relative;
z-index: 30;
}
@media (max-width: 1024px) {
.p-lecture-hero__content {
padding: 0 1.5rem;
}
}
.p-lecture-hero__label {
font-size: 0.8rem;
font-weight: 950;
color: #fff;
background: #7B6FEF;
padding: 4px 16px;
display: inline-block;
margin-top: 1.5rem;
margin-bottom: 3rem;
box-shadow: 4px 4px 0 #000;
transform: rotate(-1.5deg);
line-height: 1;
}
@media (max-width: 1024px) {
.p-lecture-hero__label {
margin-top: 3rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 768px) {
.p-lecture-hero__label {
margin-top: 1.25rem;
margin-bottom: 1rem;
}
}
.p-lecture-hero__title {
font-size: clamp(2.2rem, 6vw, 4.8rem);
line-height: 1.2;
font-weight: 950;
margin-bottom: 5rem;
letter-spacing: -0.02em;
color: #000000;
}
@media (max-width: 1024px) {
.p-lecture-hero__title {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.p-lecture-hero__title {
font-size: 2.1rem;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
}
.p-lecture-hero__title .u-text-pop {
display: inline-block;
background: #FFE600;
color: #000;
padding: 0 0.15em;
margin: 0 0.05em;
transform: skewX(-10deg);
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
border-radius: 2px;
}
.p-lecture-hero__visual {
grid-area: visual;
position: relative;
z-index: 20;
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.p-lecture-hero__visual {
margin: 1rem 0;
}
}
@media (max-width: 768px) {
.p-lecture-hero__visual {
margin: 1rem 0;
}
}
.p-lecture-hero__character {
position: relative;
width: 100%;
max-width: 400px;
max-height: 630px;
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.p-lecture-hero__character {
max-width: 280px;
max-height: 420px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.p-lecture-hero__character {
max-width: 280px;
max-height: 32svh;
}
}
.p-lecture-hero__character {
transform: rotate(-1deg);
}
.p-lecture-hero__character img {
width: auto;
height: auto;
max-height: 630px;
object-fit: contain;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.05));
animation: lecture-hero-float 12s ease-in-out infinite;
}
@media (max-width: 1024px) {
.p-lecture-hero__character img {
max-height: 420px;
}
}
@media (max-width: 768px) {
.p-lecture-hero__character img {
max-height: 32svh;
}
}
.p-lecture-hero__bubble {
position: absolute;
top: 6%;
right: -2%;
background: #7B6FEF;
color: #fff;
padding: 10px 20px;
font-weight: 950;
font-size: 1.1rem;
border-radius: 24px 24px 24px 4px;
transform: rotate(8deg);
box-shadow: 6px 6px 0 #000;
z-index: 30;
white-space: nowrap;
}
@media (max-width: 1024px) {
.p-lecture-hero__bubble {
top: -5%;
right: auto;
left: 50%;
transform: translateX(36px) rotate(8deg);
}
}
@media (max-width: 768px) {
.p-lecture-hero__bubble {
display: none;
}
}
.p-lecture-hero__cta {
grid-area: cta;
position: relative;
z-index: 30;
}
@media (max-width: 1024px) {
.p-lecture-hero__cta {
padding: 0 1.5rem;
margin-top: -3rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 768px) {
.p-lecture-hero__cta {
margin-top: -3rem;
margin-bottom: 0.5rem;
}
}
.p-lecture-hero__cta .c-button {
white-space: nowrap;
}
@media (max-width: 768px) {
.p-lecture-hero__cta .c-button {
width: auto;
min-width: 0;
max-width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.p-lecture-hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
font-size: 0.8rem;
font-weight: 900;
font-family: "Space Mono", monospace;
letter-spacing: 0.3em;
color: rgba(0, 0, 0, 0.3);
z-index: 40;
}
@media (max-width: 1024px) {
.p-lecture-hero__scroll {
display: none;
}
}
.p-lecture-hero__scroll span {
width: 2px;
height: 60px;
background: rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.p-lecture-hero__scroll span::after {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: #7B6FEF;
animation: lecture-scroll-line 2s infinite;
}
.p-lecture-values {
padding: 7.5rem 0;
background-color: #fff;
overflow-x: hidden;
}
@media (max-width: 1024px) {
.p-lecture-values {
padding: 5rem 0 6.5rem;
}
}
@media (max-width: 768px) {
.p-lecture-values {
padding: 1.5rem 0 2.5rem;
}
}
.p-lecture-values__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 1024px) {
.p-lecture-values__header {
margin-bottom: 3rem;
}
}
.p-lecture-values__header .u-section-title {
font-size: clamp(2rem, 5vw, 4rem);
margin-bottom: 3rem;
font-weight: 950;
letter-spacing: -0.02em;
}
.p-lecture-values__header .u-section-title .u-text-pop {
display: inline-block;
background: #FFE600;
color: #000;
padding: 0 0.2em;
margin: 0 0.1em;
transform: rotate(-2deg);
box-shadow: 4px 4px 0 #000;
border: 2px solid #000;
line-height: 1.1;
}
.p-lecture-values__catch {
font-size: clamp(1.2rem, 2.2vw, 2rem);
line-height: 1.6;
color: #000;
font-weight: 950;
margin-top: 5rem;
margin-bottom: 7.5rem;
}
.p-lecture-values__catch .u-text-highlight {
background: linear-gradient(transparent 60%, rgba(123, 111, 239, 0.5) 0%);
padding: 0 4px;
}
@media (max-width: 1024px) {
.p-lecture-values__catch {
margin-top: 3rem;
margin-bottom: 5rem;
}
}
@media (max-width: 768px) {
.p-lecture-values__catch {
margin-top: 1.5rem;
margin-bottom: 3rem;
}
}
.p-lecture-values__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
margin-top: 5rem;
max-width: 1000px;
margin-inline: auto;
}
@media (max-width: 1024px) {
.p-lecture-values__grid {
grid-template-columns: 1fr;
gap: 3rem;
padding: 0 1rem;
}
}
.p-lecture-values-card {
background: #fff;
border-radius: 16px;
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
min-width: 0;
height: 100%;
}
.p-lecture-values-card.is-large {
grid-row: span 1.1;
}
@media (hover: hover) {
.p-lecture-values-card:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #000;
}
.p-lecture-values-card:hover .p-lecture-values-card__bg-num {
opacity: 0.1;
transform: scale(1.05);
}
.p-lecture-values-card:hover .p-lecture-values-card__label {
transform: rotate(0deg) scale(1.05);
background: #7B6FEF;
color: #fff;
}
}
.p-lecture-values-card__bg-num {
position: absolute;
bottom: -10px;
right: -10px;
font-size: 8rem;
font-weight: 950;
line-height: 1;
color: #000;
opacity: 0.03;
pointer-events: none;
z-index: 0;
transition: all 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-style: italic;
}
.p-lecture-values-card__inner {
padding: 3rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.p-lecture-values-card__inner {
padding: 1.5rem;
gap: 16px;
}
}
.p-lecture-values-card__header {
width: 100%;
position: relative;
z-index: 2;
}
.p-lecture-values-card__label {
font-size: 0.75rem;
font-weight: 950;
color: #000;
background: #FFE600;
padding: 4px 14px;
display: inline-block;
box-shadow: 3px 3px 0 #000;
border: 3px solid #000;
line-height: 1;
transform: rotate(-2deg);
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.p-lecture-values-card__body {
display: flex;
flex-direction: column;
gap: 14px;
}
.p-lecture-values-card__title {
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 950;
line-height: 1.4;
color: #000;
position: relative;
display: inline-block;
width: fit-content;
z-index: 1;
}
.p-lecture-values-card__title::after {
content: "";
position: absolute;
bottom: 2px;
left: -2px;
width: calc(100% + 4px);
height: 40%;
background: rgba(123, 111, 239, 0.35);
z-index: -1;
transform: skewX(-15deg);
}
.p-lecture-values-card__desc {
font-size: 0.9rem;
line-height: 1.8;
color: #000;
font-weight: 600;
opacity: 0.8;
}
.p-lecture-curriculum {
padding: 7.5rem 0;
background-color: #faf9f6;
overflow-x: hidden;
}
@media (max-width: 768px) {
.p-lecture-curriculum {
padding: 1.5rem 0;
}
}
.p-lecture-curriculum__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-lecture-curriculum__header {
margin-bottom: 3rem;
}
}
.p-lecture-curriculum__header .u-section-title {
font-size: clamp(2rem, 5vw, 4rem);
margin-bottom: 0;
font-weight: 950;
color: #000;
letter-spacing: -0.02em;
}
.p-lecture-curriculum__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 1024px) {
.p-lecture-curriculum__list {
grid-template-columns: 1fr;
gap: 5rem;
}
}
.p-lecture-curriculum-item {
background: #fff;
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
border-radius: 20px;
padding: 3rem 1.5rem;
position: relative;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
@media (hover: hover) {
.p-lecture-curriculum-item:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #000;
}
.p-lecture-curriculum-item:hover .p-lecture-curriculum-item__num {
background: #7B6FEF;
color: #fff;
}
}
.p-lecture-curriculum-item__num {
width: 56px;
height: 56px;
min-width: 56px;
background: #FFE600;
color: #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1.1rem;
font-weight: 950;
font-family: "Space Mono", monospace;
border: 3px solid #000;
box-shadow: 4px 4px 0 #000;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.p-lecture-curriculum-item__body {
flex: 1;
min-width: 0;
}
.p-lecture-curriculum-item__title {
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
font-weight: 950;
color: #000000;
line-height: 1.3;
margin-bottom: 1rem;
letter-spacing: -0.02em;
padding-left: 1rem;
border-left: 4px solid #7B6FEF;
}
.p-lecture-curriculum-item__desc {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
font-weight: 600;
}
.p-lecture-requirements {
padding: 7.5rem 0;
background-color: #faf9f6;
overflow-x: hidden;
}
@media (max-width: 768px) {
.p-lecture-requirements {
padding: 1.5rem 0;
}
}
.p-lecture-requirements__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-lecture-requirements__header {
margin-bottom: 3rem;
}
}
.p-lecture-requirements__header .u-section-title {
font-size: clamp(2rem, 5vw, 4rem);
margin-bottom: 0;
font-weight: 950;
color: #000;
letter-spacing: -0.02em;
}
.p-lecture-requirements__header .u-section-title .u-text-pop {
display: inline-block;
background: #FFE600;
color: #000;
padding: 0 0.2em;
margin: 0 0.05em;
transform: rotate(-2deg);
box-shadow: 4px 4px 0 #000;
border: 2px solid #000;
line-height: 1.1;
}
.p-lecture-requirements__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
align-items: stretch;
}
@media (max-width: 1024px) {
.p-lecture-requirements__grid {
grid-template-columns: 1fr;
gap: 5rem;
}
}
.p-lecture-requirements__col {
background: #fff;
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
border-radius: 20px;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
}
@media (hover: hover) {
.p-lecture-requirements__col:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #000;
}
}
.p-lecture-requirements__col--before {
border-left: 6px solid #7B6FEF;
}
.p-lecture-requirements__col--support {
border-left: 6px solid #7B6FEF;
}
.p-lecture-requirements__col-inner {
padding: 5rem 3rem;
height: 100%;
display: flex;
flex-direction: column;
}
.p-lecture-requirements__label {
font-size: 0.75rem;
font-weight: 950;
letter-spacing: 0.15em;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
display: block;
}
.p-lecture-requirements__heading {
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
font-weight: 950;
color: #000;
line-height: 1.3;
margin-bottom: 3rem;
letter-spacing: -0.02em;
}
.p-lecture-requirements__sub-catch {
font-size: 0.95rem;
font-weight: 700;
color: #7B6FEF;
margin-bottom: 1.5rem;
line-height: 1.4;
}
.p-lecture-requirements__list {
list-style: none;
padding: 0;
margin: 0;
}
.p-lecture-requirements__list li {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
.p-lecture-requirements__list li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.p-lecture-requirements__item-title {
display: block;
font-size: 1rem;
font-weight: 950;
color: #7B6FEF;
margin-bottom: 0.5rem;
}
.p-lecture-requirements__list p, .p-lecture-requirements__body p {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.85);
font-weight: 600;
margin: 0;
}
.p-lecture-requirements__body {
flex: 1;
min-height: 0;
}
.p-lecture-requirements__body p {
margin-bottom: 1.5rem;
}
.p-lecture-requirements__body p:last-child {
margin-bottom: 0;
}
.p-lecture-plan {
padding: 7.5rem 0;
background-color: #FFE600;
position: relative;
z-index: 10;
}
@media (max-width: 768px) {
.p-lecture-plan {
padding: 1.5rem 0;
}
}
.p-lecture-plan__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-lecture-plan__header {
margin-bottom: 3rem;
}
}
.p-lecture-plan__header .u-section-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin-bottom: 0;
font-weight: 950;
color: #000;
letter-spacing: -0.02em;
}
.p-lecture-plan__lead-box {
margin-top: 1.5rem;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.p-lecture-plan__lead-badge {
font-family: "Space Mono", monospace;
font-size: 0.75rem;
font-weight: 950;
background: #000;
color: #fff;
padding: 4px 16px;
display: inline-block;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 4px;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.p-lecture-plan__lead-badge::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #7B6FEF;
}
.p-lecture-plan__lead {
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
font-weight: 700;
color: #000;
line-height: 1.8;
}
.p-lecture-plan__guide {
margin-top: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.p-lecture-plan__note {
font-size: 0.85rem;
font-weight: 850;
color: #000;
background: rgba(255, 255, 255, 0.4);
border-left: 4px solid #000;
padding: 8px 16px;
border-radius: 4px;
display: inline-block;
text-align: left;
}
.p-lecture-plan__list {
display: flex;
flex-direction: column;
gap: 5rem;
max-width: 920px;
margin: 0 auto;
padding: 0 1.5rem;
}
.p-lecture-plan-card {
background: #fff;
border: 3px solid #000;
border-radius: 20px;
box-shadow: 8px 8px 0 #000;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.p-lecture-plan-card:hover {
transform: translate(4px, 4px);
box-shadow: 4px 4px 0 #000;
}
}
.p-lecture-plan-card--featured {
border-width: 4px;
box-shadow: 10px 10px 0 #000;
}
.p-lecture-plan-card--featured .p-lecture-plan-card__icon {
background: #7B6FEF;
color: #fff;
border-color: #000;
}
.p-lecture-plan-card--featured .p-lecture-plan-card__tag {
background: #7B6FEF;
color: #fff;
}
.p-lecture-plan-card__inner {
padding: 5rem 3rem;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.p-lecture-plan-card__inner {
padding: 3rem 1.5rem;
}
}
.p-lecture-plan-card__header {
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 3rem;
}
.p-lecture-plan-card__icon {
width: 52px;
height: 52px;
min-width: 52px;
background: rgba(123, 111, 239, 0.15);
color: #7B6FEF;
border: 3px solid #7B6FEF;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.p-lecture-plan-card__icon svg {
width: 28px;
height: 28px;
}
.p-lecture-plan-card__title-wrap {
flex: 1;
min-width: 0;
}
.p-lecture-plan-card__tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 950;
letter-spacing: 0.1em;
padding: 4px 12px;
background: rgba(123, 111, 239, 0.2);
color: #000000;
border: 2px solid #7B6FEF;
border-radius: 6px;
margin-bottom: 0.5rem;
line-height: 1;
}
.p-lecture-plan-card__title {
font-size: clamp(1.25rem, 2vw, 1.6rem);
font-weight: 950;
color: #000;
line-height: 1.3;
margin: 0;
}
.p-lecture-plan-card__body {
border-top: 2px dashed rgba(0, 0, 0, 0.12);
padding-top: 3rem;
}
.p-lecture-plan-card__price-block {
background: rgba(123, 111, 239, 0.08);
border-left: 4px solid #7B6FEF;
padding: 1.5rem 3rem;
margin-bottom: 1.5rem;
border-radius: 0 8px 8px 0;
}
.p-lecture-plan-card__price {
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 950;
font-family: "Space Mono", monospace;
color: #000;
line-height: 1;
}
.p-lecture-plan-card__price span {
font-size: 0.45em;
opacity: 0.7;
font-weight: 700;
}
.p-lecture-plan-card__desc {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.85);
font-weight: 600;
margin: 0;
}
.p-lecture-plan-card--courses .p-lecture-plan-card__inner {
padding-bottom: 1rem;
}
.p-lecture-plan-card--courses .p-lecture-plan-card__accordion {
border-top: 2px dashed rgba(0, 0, 0, 0.12);
padding-top: 3rem;
}
.p-lecture-plan-card__accordion-hint {
font-size: 0.85rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.55);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-lecture-plan-card__accordion-hint::before {
content: "";
width: 18px;
height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237B6FEF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
flex-shrink: 0;
}
.p-lecture-plan-course {
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 12px;
margin-top: 1.5rem;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.p-lecture-plan-course:first-of-type {
margin-top: 0;
}
.p-lecture-plan-course[open] {
border-color: #000;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.p-lecture-plan-course[open] .p-lecture-plan-course__summary-label {
color: #7B6FEF;
}
.p-lecture-plan-course[open] .p-lecture-plan-course__summary-label::after {
transform: rotate(180deg);
}
.p-lecture-plan-course__summary {
padding: 1.5rem 3rem;
cursor: pointer;
font-weight: 950;
color: #000;
list-style: none;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 0.5rem 1.5rem;
background: #f8f8f8;
transition: background 0.2s ease;
}
@media (max-width: 768px) {
.p-lecture-plan-course__summary {
padding: 1.5rem 1rem;
gap: 0.5rem 1rem;
}
}
@media (hover: hover) {
.p-lecture-plan-course__summary:hover {
background: rgba(123, 111, 239, 0.06);
}
}
.p-lecture-plan-course__summary::-webkit-details-marker {
display: none;
}
.p-lecture-plan-course__summary::before {
content: "";
width: 0;
height: 0;
border-left: 6px solid #7B6FEF;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
grid-row: 1;
grid-column: 1;
align-self: center;
transition: transform 0.2s ease;
}
.p-lecture-plan-course[open] .p-lecture-plan-course__summary::before {
transform: rotate(90deg);
}
.p-lecture-plan-course[open] .p-lecture-plan-course__summary {
background: rgba(123, 111, 239, 0.08);
}
.p-lecture-plan-course__summary-head {
grid-row: 1;
grid-column: 2;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
min-width: 0;
}
@media (max-width: 768px) {
.p-lecture-plan-course__summary-head {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
.p-lecture-plan-course__summary-text {
font-size: 1.05rem;
min-width: 0;
}
@media (max-width: 768px) {
.p-lecture-plan-course__summary-text {
font-size: 1rem;
line-height: 1.4;
}
}
.p-lecture-plan-course__summary-meta {
grid-row: 2;
grid-column: 2;
display: flex;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.p-lecture-plan-course__summary-meta {
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-top: 4px;
}
}
.p-lecture-plan-course__summary-price {
font-size: 1.35rem;
font-weight: 950;
font-family: "Space Mono", monospace;
color: #000;
}
.p-lecture-plan-course__summary-period {
font-size: 0.8rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.6);
}
.p-lecture-plan-course__summary-label {
font-size: 0.8rem;
font-weight: 850;
color: rgba(0, 0, 0, 0.5);
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s ease;
}
@media (max-width: 768px) {
.p-lecture-plan-course__summary-label {
font-size: 0.75rem;
}
}
.p-lecture-plan-course__summary-label::after {
content: "";
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
transition: transform 0.2s ease;
}
.p-lecture-plan-course__body {
padding: 3rem 3rem 3rem;
}
.p-lecture-plan-course__lead {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(0, 0, 0, 0.8);
font-weight: 600;
margin: 0 0 1.5rem;
}
.p-lecture-plan-course__sub {
font-size: 0.9rem;
font-weight: 950;
color: #000;
margin: 0 0 1rem;
}
.p-lecture-plan-course__body ol {
margin: 0;
padding-left: 1.5em;
font-size: 0.9rem;
line-height: 1.8;
font-weight: 600;
color: rgba(0, 0, 0, 0.8);
}
.p-lecture-steps {
padding: 7.5rem 0;
background-color: #faf9f6;
overflow-x: hidden;
}
@media (max-width: 768px) {
.p-lecture-steps {
padding: 1.5rem 0;
}
}
.p-lecture-steps__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-lecture-steps__header {
margin-bottom: 3rem;
}
}
@media (max-width: 768px) {
.p-lecture-steps__header .u-step-title-line1 {
display: block;
}
}
.p-lecture-steps__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3rem;
position: relative;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 1200px) {
.p-lecture-steps__list {
grid-template-columns: 1fr;
gap: 7.5rem;
max-width: 800px;
}
}
@media (max-width: 768px) {
.p-lecture-steps__list {
gap: 1.5rem;
}
}
.p-lecture-steps-item {
display: flex;
flex-direction: column;
text-align: left;
background: #fff;
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
border-radius: 20px;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
height: 100%;
padding: 3rem 1.5rem;
touch-action: manipulation;
}
@media (max-width: 1200px) {
.p-lecture-steps-item {
padding: 3rem;
}
}
@media (max-width: 768px) {
.p-lecture-steps-item {
padding: 3rem 1.5rem;
}
}
@media (hover: hover) {
.p-lecture-steps-item:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #000;
background: #fafafa;
}
.p-lecture-steps-item:hover .p-lecture-steps-item__num {
background: #000;
color: #fff;
transform: scale(1.1) translateX(-50%);
}
}
.p-lecture-steps-item::after {
content: "→";
position: absolute;
font-size: 1.8rem;
font-weight: 950;
color: #000;
pointer-events: none;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 1201px) {
.p-lecture-steps-item::after {
top: 50%;
left: calc(100% + 1.5rem);
transform: translate(-50%, -50%);
}
.p-lecture-steps-item:last-child::after {
display: none;
}
}
@media (max-width: 1200px) {
.p-lecture-steps-item::after {
content: "↓";
top: calc(100% + 3.75rem);
left: 50%;
transform: translate(-50%, -50%);
}
.p-lecture-steps-item:last-child::after {
display: none;
}
}
.p-lecture-steps-item__num {
width: 56px;
height: 56px;
background: #FFE600;
color: #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
font-size: 1.35rem;
font-weight: 950;
font-family: "Space Mono", monospace;
border: 4px solid #000;
box-shadow: 4px 4px 0 #000;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 5;
}
.p-lecture-steps-item__header {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.p-lecture-steps-item__title {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: 950;
color: #7B6FEF;
line-height: 1.2;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.p-lecture-steps-item__appeal {
font-size: 0.95rem;
font-weight: 950;
color: #000000;
line-height: 1.4;
}
.p-lecture-steps-item__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
margin-bottom: 0;
}
.p-lecture-steps-item__method-tag {
font-size: 0.7rem;
font-weight: 850;
color: rgba(0, 0, 0, 0.6);
background: #f8f8f8;
padding: 4px 10px;
border-radius: 4px;
display: inline-block;
font-family: "Space Mono", monospace;
letter-spacing: 0.02em;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.p-lecture-steps-item__duration {
font-size: 0.75rem;
font-weight: 950;
color: #7B6FEF;
}
.p-lecture-steps-item__text {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
font-weight: 600;
flex-grow: 1;
border-top: 2px dashed rgba(0, 0, 0, 0.1);
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.p-lecture-faq {
padding: 7.5rem 0;
background-color: #fff;
}
@media (max-width: 768px) {
.p-lecture-faq {
padding: 1.5rem 0;
}
}
.p-lecture-faq__header {
margin-bottom: 5rem;
text-align: center;
}
@media (max-width: 768px) {
.p-lecture-faq__header {
margin-bottom: 3rem;
}
}
.p-lecture-faq__list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.p-lecture-faq-item {
background: #fff;
border: 3px solid #000;
box-shadow: 4px 4px 0 #000;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-lecture-faq-item[open] {
box-shadow: 2px 2px 0 #000;
transform: translate(2px, 2px);
}
.p-lecture-faq-item[open] .p-lecture-faq-item__toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.p-lecture-faq-item__question {
padding: 1.5rem 3rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 1.5rem;
list-style: none;
position: relative;
font-weight: 950;
font-size: 1.1rem;
user-select: none;
}
.p-lecture-faq-item__question::-webkit-details-marker {
display: none;
}
@media (max-width: 768px) {
.p-lecture-faq-item__question {
padding: 1.5rem;
font-size: 1rem;
}
}
.p-lecture-faq-item__q-icon {
width: 36px;
height: 36px;
background: #FFE600;
color: #000;
border: 2px solid #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Space Mono", monospace;
font-weight: 950;
flex-shrink: 0;
}
.p-lecture-faq-item__toggle {
width: 24px;
height: 24px;
margin-left: auto;
position: relative;
flex-shrink: 0;
}
.p-lecture-faq-item__toggle::before, .p-lecture-faq-item__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 3px;
background: #000;
transform: translate(-50%, -50%);
transition: all 0.3s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-lecture-faq-item__toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.p-lecture-faq-item__answer {
padding: 0 3rem 1.5rem;
display: flex;
gap: 1.5rem;
}
@media (max-width: 768px) {
.p-lecture-faq-item__answer {
padding: 0 1.5rem 1.5rem;
gap: 1rem;
}
}
.p-lecture-faq-item__a-icon {
width: 36px;
height: 36px;
background: #7B6FEF;
color: #fff;
border: 2px solid #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Space Mono", monospace;
font-weight: 950;
flex-shrink: 0;
}
.p-lecture-faq-item__a-text {
font-size: 0.95rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
font-weight: 600;
padding-top: 4px;
}
.p-lecture-cta {
padding: 10rem 0 3rem;
background-color: #FFE600;
position: relative;
overflow: hidden;
}
.p-lecture-cta::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: repeating-linear-gradient(45deg, #000, #000 10px, #FFE600 10px, #FFE600 20px);
z-index: 10;
}
@media (max-width: 1024px) {
.p-lecture-cta {
padding: 7.5rem 0;
}
}
@media (max-width: 768px) {
.p-lecture-cta {
padding: 5.5rem 0;
}
}
.p-lecture-cta__content {
position: relative;
z-index: 10;
text-align: center;
max-width: 900px;
margin: 0 auto;
padding-bottom: 5rem;
}
@media (max-width: 768px) {
.p-lecture-cta__content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.p-lecture-cta__title {
font-size: clamp(2.5rem, 8vw, 7rem);
font-weight: 950;
line-height: 1.05;
margin-bottom: 5rem;
letter-spacing: -0.04em;
color: #000;
text-transform: uppercase;
}
.p-lecture-cta__title [class*=-cta__label] {
display: block;
font-size: 1rem;
margin-bottom: 20px;
opacity: 0.6;
font-family: "Space Mono", monospace;
}
@media (max-width: 768px) {
.p-lecture-cta__title {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
.p-lecture-cta__text {
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
font-weight: 850;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
margin-bottom: 7.5rem;
max-width: 40em;
margin-inline: auto;
text-align: left;
}
.p-lecture-cta__btn-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
}
.p-lecture-cta__btn-wrap .c-button {
padding: 1.6rem 5rem;
border-radius: 100px;
font-size: 2rem;
font-weight: 950;
background-color: #000;
color: #fff;
border: 4px solid #000;
box-shadow: 12px 12px 0 #fff;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
white-space: nowrap;
touch-action: manipulation;
}
@media (max-width: 768px) {
.p-lecture-cta__btn-wrap .c-button {
white-space: normal;
max-width: 100%;
box-sizing: border-box;
font-size: 1.35rem;
padding: 1rem 1.5rem;
}
}
@media (hover: hover) {
.p-lecture-cta__btn-wrap .c-button:hover {
transform: translate(6px, 6px);
box-shadow: 0 0 0 #fff;
background-color: #222;
}
}
.p-lecture-cta__bg-text {
position: absolute;
bottom: -0.1em;
left: 0;
display: flex;
font-family: "Space Mono", monospace;
font-size: 24vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
line-height: 1;
letter-spacing: -0.02em;
}
.p-lecture-cta__bg-text span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
@keyframes lecture-hero-float {
0%, 100% {
transform: translateY(0) rotate(-1deg);
}
50% {
transform: translateY(-20px) rotate(1deg);
}
}
@keyframes lecture-scroll-line {
0% {
top: -100%;
}
100% {
top: 100%;
}
}
.p-creations-page {
padding: 7.5rem 0 0;
background-color: #050505;
color: #fff;
min-height: 100svh;
position: relative;
overflow: hidden;
}
.p-creations-page::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 230, 0, 0.05) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 40px 40px, 100px 100px, 100px 100px;
z-index: 0;
}
.p-creations-page__header {
margin-bottom: 3rem;
text-align: center;
position: relative;
z-index: 2;
padding: 4.5rem 0 5rem;
}
@media (max-width: 768px) {
.p-creations-page__header {
padding: 3rem 0;
margin-bottom: 3rem;
}
}
.p-creations-page__header-meta {
margin-bottom: 1.5rem;
}
.p-creations-page__header-meta .c-badge {
background-color: transparent;
border: 1px solid rgba(255, 230, 0, 0.5);
color: #FFE600;
padding: 6px 16px;
font-weight: 950;
letter-spacing: 0.2em;
}
.p-creations-page__header .u-page-title {
font-size: clamp(2.4rem, 10vw, 7.5rem);
margin-bottom: 1.5rem;
color: #fff;
font-weight: 950;
letter-spacing: -0.05em;
line-height: 1.1;
text-transform: none;
}
.p-creations-page__header-line {
width: 100px;
height: 4px;
background-color: #FFE600;
margin: 0 auto;
}
.p-creations-page__intro {
text-align: center;
margin-bottom: 7.5rem;
position: relative;
z-index: 2;
padding: 0 1.5rem;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.p-creations-page__intro {
margin-bottom: 3rem;
padding: 0 1rem;
}
}
.p-creations-page__intro-en {
display: block;
font-size: 0.85rem;
font-weight: 900;
letter-spacing: 0.25em;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 1rem;
}
.p-creations-page__intro-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 950;
letter-spacing: 0.02em;
color: #fff;
margin-bottom: 3rem;
line-height: 1.4;
}
@media (max-width: 768px) {
.p-creations-page__intro-title {
font-size: clamp(1.5rem, 5vw, 2rem);
margin-bottom: 1.5rem;
}
}
.p-creations-page__intro-text {
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 2;
color: rgba(255, 255, 255, 0.8);
margin: 0;
font-weight: 500;
}
.p-creations-page__lead {
font-size: clamp(1.1rem, 2vw, 1.4rem);
opacity: 0.7;
max-width: 700px;
margin: 0 auto;
line-height: 2;
font-weight: 500;
}
.p-creations-page__section {
margin-bottom: 7.5rem;
position: relative;
z-index: 2;
}
@media (max-width: 768px) {
.p-creations-page__section {
margin-bottom: 5rem;
}
}
.p-creations-page__section:last-child {
margin-bottom: 0;
}
.p-creations-page__category-header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 1rem 3rem;
margin-bottom: 5rem;
border-bottom: 1.5px solid rgba(255, 255, 255, 0.15);
padding-bottom: 1.5rem;
}
@media (max-width: 768px) {
.p-creations-page__category-header {
flex-direction: column;
align-items: flex-start;
gap: 0;
margin-bottom: 3rem;
padding-bottom: 1rem;
}
}
.p-creations-page__category-title {
font-size: clamp(1.5rem, 3.2vw, 2.5rem);
font-weight: 950;
letter-spacing: 0.03em;
color: #fff;
line-height: 1.2;
}
@media (max-width: 768px) {
.p-creations-page__category-title {
margin-bottom: 0.5rem;
}
}
.p-creations-page__category-en {
font-family: "Space Mono", monospace;
font-size: 0.9rem;
opacity: 0.3;
letter-spacing: 0.3em;
text-transform: uppercase;
font-weight: 900;
margin-bottom: 8px;
}
.p-creations-page__category-sub {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
letter-spacing: 0.02em;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
line-height: 1.6;
width: 100%;
max-width: 48em;
}
@media (max-width: 768px) {
.p-creations-page__category-sub {
font-size: 0.9rem;
line-height: 1.5;
margin-top: 0.5rem;
}
}
.p-creations-page__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5rem 3rem;
margin-top: 3rem;
padding: 0;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1200px) {
.p-creations-page__grid {
padding: 0;
}
}
@media (max-width: 1024px) {
.p-creations-page__grid {
gap: 3rem 1.5rem;
}
}
@media (max-width: 768px) {
.p-creations-page__grid {
grid-template-columns: 1fr;
padding: 0;
margin-top: 1.5rem;
gap: 3rem;
}
}
.p-creations-page__item {
position: relative;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
touch-action: manipulation;
}
.p-creations-page__item-visual {
margin-bottom: 3rem;
border: 2px solid #000000;
border-color: rgba(255, 255, 255, 0.1);
overflow: hidden;
background-color: #0a0a0a;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 4px;
}
.p-creations-page__item-visual::after {
content: "VIEW PROJECT";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
font-family: "Space Mono", monospace;
font-weight: 950;
font-size: 0.9rem;
letter-spacing: 0.2em;
color: #fff;
opacity: 0;
transition: all 0.4s ease;
z-index: 10;
background-color: rgba(0, 0, 0, 0.6);
padding: 12px 24px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (hover: hover) {
.p-creations-page__item-visual:hover {
border-color: #FFE600;
transform: translateY(-10px) rotateX(2deg);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
.p-creations-page__item-visual:hover::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.p-creations-page__item-visual:hover img {
transform: scale(1.1);
filter: grayscale(0%);
}
}
.p-creations-page__item-image-wrap {
aspect-ratio: 16/10;
overflow: hidden;
position: relative;
}
.p-creations-page__item-image-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
opacity: 0.7;
transition: opacity 0.4s ease;
}
.p-creations-page__item-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
filter: grayscale(20%);
}
.p-creations-page__item-content {
padding: 0 0 1rem;
margin-top: 1rem;
}
@media (max-width: 768px) {
.p-creations-page__item-content {
padding: 0 0.25rem 1.5rem;
}
}
.p-creations-page__item-meta {
font-size: 0.8rem;
color: #FFE600;
margin-bottom: 0.5rem;
font-weight: 950;
letter-spacing: 0.1em;
font-family: "Space Mono", monospace;
}
.p-creations-page__item-title {
font-size: clamp(1.35rem, 2.2vw, 2rem);
font-weight: 950;
margin-bottom: 1rem;
line-height: 1.25;
letter-spacing: -0.01em;
}
.p-creations-page__item-desc {
font-size: 0.95rem;
line-height: 1.85;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.p-creations-page__bg-text {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
font-size: 16vw;
font-weight: 950;
color: transparent;
-webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
white-space: nowrap;
pointer-events: none;
z-index: 1;
line-height: 1;
letter-spacing: -0.05em;
}
@media (max-width: 1024px) {
.p-creations-page__bg-text {
font-size: 16vw;
top: 11.5rem;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
}
}
.p-creations-page-cta {
padding: 10rem 0 3rem;
background-color: #FFE600;
position: relative;
overflow: hidden;
}
.p-creations-page-cta::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: repeating-linear-gradient(45deg, #000, #000 10px, #FFE600 10px, #FFE600 20px);
z-index: 10;
}
@media (max-width: 1024px) {
.p-creations-page-cta {
padding: 7.5rem 0;
}
}
.p-creations-page-cta {
margin-top: 7.5rem;
padding-top: 8rem;
padding-bottom: 8rem;
}
@media (max-width: 1024px) {
.p-creations-page-cta {
margin-top: 5rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
}
@media (max-width: 768px) {
.p-creations-page-cta {
margin-top: 3rem;
padding: 5rem 1.5rem 3rem;
}
}
.p-creations-page-cta__content {
position: relative;
z-index: 10;
text-align: center;
max-width: 900px;
margin: 0 auto;
padding-bottom: 5rem;
}
@media (max-width: 768px) {
.p-creations-page-cta__content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.p-creations-page-cta__content {
padding-bottom: 3rem;
}
.p-creations-page-cta__title {
font-size: clamp(2.5rem, 8vw, 7rem);
font-weight: 950;
line-height: 1.05;
margin-bottom: 5rem;
letter-spacing: -0.04em;
color: #000;
text-transform: uppercase;
}
.p-creations-page-cta__title [class*=-cta__label] {
display: block;
font-size: 1rem;
margin-bottom: 20px;
opacity: 0.6;
font-family: "Space Mono", monospace;
}
@media (max-width: 768px) {
.p-creations-page-cta__title {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
@media (max-width: 768px) {
.p-creations-page-cta__title {
margin-bottom: 1.5rem;
}
}
.p-creations-page-cta__text {
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
font-weight: 850;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
margin-bottom: 7.5rem;
max-width: 40em;
margin-inline: auto;
text-align: left;
text-align: center;
}
@media (max-width: 768px) {
.p-creations-page-cta__text {
text-align: left;
margin-bottom: 3rem;
}
}
.p-creations-page-cta__btn-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
}
.p-creations-page-cta__btn-wrap .c-button {
padding: 1.6rem 5rem;
border-radius: 100px;
font-size: 2rem;
font-weight: 950;
background-color: #000;
color: #fff;
border: 4px solid #000;
box-shadow: 12px 12px 0 #fff;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
white-space: nowrap;
touch-action: manipulation;
}
@media (max-width: 768px) {
.p-creations-page-cta__btn-wrap .c-button {
white-space: normal;
max-width: 100%;
box-sizing: border-box;
font-size: 1.35rem;
padding: 1rem 1.5rem;
}
}
@media (hover: hover) {
.p-creations-page-cta__btn-wrap .c-button:hover {
transform: translate(6px, 6px);
box-shadow: 0 0 0 #fff;
background-color: #222;
}
}
.p-creations-page-cta__btn-wrap {
margin-top: 0;
}
.p-creations-page-cta__btn-wrap .c-button {
border-radius: 4px;
box-shadow: 6px 6px 0 #fff;
border-width: 3px;
font-size: 1.5rem;
padding: 1.2rem 3rem;
min-width: 320px;
transition: all 0.1s ease-out;
}
@media (max-width: 768px) {
.p-creations-page-cta__btn-wrap .c-button {
font-size: 1.1rem;
padding: 1rem 2rem;
min-width: 0;
width: 100%;
box-shadow: 4px 4px 0 #fff;
}
}
@media (hover: hover) {
.p-creations-page-cta__btn-wrap .c-button:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #fff;
}
}
.p-creations-page-cta__btn-wrap .c-button--production {
background-color: #fff;
color: #000;
box-shadow: 6px 6px 0 #000;
}
@media (max-width: 768px) {
.p-creations-page-cta__btn-wrap .c-button--production {
box-shadow: 4px 4px 0 #000;
}
}
@media (hover: hover) {
.p-creations-page-cta__btn-wrap .c-button--production:hover {
box-shadow: 0 0 0 #000;
background-color: #f0f0f0;
}
}
.p-creations-page-cta__bg-text {
position: absolute;
bottom: -0.1em;
left: 0;
display: flex;
font-family: "Space Mono", monospace;
font-size: 24vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
line-height: 1;
letter-spacing: -0.02em;
}
.p-creations-page-cta__bg-text span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.c-blog-card {
background: #fff;
border: 4px solid #000000;
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.05);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
touch-action: manipulation;
}
.c-blog-card__link-wrap {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.c-blog-card__thumb {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
border-bottom: 4px solid #000000;
}
.c-blog-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.c-blog-card__thumb--no-img {
background: #f0f0f0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.2);
font-weight: 950;
}
.c-blog-card__label {
position: absolute;
top: 12px;
left: 12px;
background: #FFE600;
color: #000000;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 950;
border: 2px solid #000000;
transform: rotate(0deg);
box-shadow: 3px 3px 0 #000000;
z-index: 5;
}
.c-blog-card__body {
padding: 1.5rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.c-blog-card__meta {
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.c-blog-card__date {
font-size: 0.8rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.3);
}
.c-blog-card__title {
font-size: 1.15rem;
font-weight: 950;
line-height: 1.4;
transition: color 0.3s ease;
margin: 0;
}
.c-blog-card__more {
display: flex;
align-items: center;
}
.c-blog-card__more span {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #000000;
color: #fff;
border-radius: 50%;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-size: 0.8rem;
}
@media (hover: hover) and (hover: hover) {
.c-blog-card:hover {
transform: translate(-4px, -4px);
box-shadow: 12px 12px 0 #FFE600;
}
}
@media (hover: hover) {
.c-blog-card:hover .c-blog-card__thumb img {
transform: scale(1.05);
}
.c-blog-card:hover .c-blog-card__title {
color: #FF6B00;
}
.c-blog-card:hover .c-blog-card__more span {
background: #FFE600;
transform: translateX(5px) rotate(-15deg);
border-color: #000000;
}
}
.c-blog-card--small .c-blog-card__title {
font-size: 1.15rem;
}
.p-blog {
background-color: #fff;
}
.p-blog-hero {
position: relative;
padding-top: var(--header-height);
min-height: clamp(400px, 50svh, 600px);
display: flex;
align-items: center;
background-color: #fff;
overflow: hidden;
border-bottom: 4px solid #000000;
}
@media (max-width: 1024px) {
.p-blog-hero {
padding-top: calc(var(--header-height) + 1rem);
padding-bottom: 1.5rem;
min-height: auto;
max-height: none;
display: block;
}
}
.p-blog-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.p-blog-hero__bg-marquee {
position: absolute;
left: 0;
width: 100%;
top: 58%;
white-space: nowrap;
display: flex;
font-size: 15vw;
font-weight: 950;
color: transparent;
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.05);
pointer-events: none;
user-select: none;
z-index: 1;
letter-spacing: -0.02em;
opacity: 0.8;
}
.p-blog-hero__bg-marquee span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
@media (max-width: 1024px) {
.p-blog-hero__bg-marquee {
top: 40%;
font-size: 25vw;
}
}
.p-blog-hero__inner {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
padding: 5rem 1.5rem;
}
@media (max-width: 1024px) {
.p-blog-hero__inner {
grid-template-columns: 1fr;
text-align: center;
padding: 3rem 1.5rem;
}
}
.p-blog-hero__content {
position: relative;
z-index: 30;
}
.p-blog-hero__label {
font-size: 0.8rem;
font-weight: 950;
color: #fff;
background: #000000;
padding: 4px 16px;
display: inline-block;
margin-bottom: 1.5rem;
box-shadow: 4px 4px 0 #FFE600;
transform: rotate(-1.5deg);
line-height: 1;
}
@media (max-width: 1024px) {
.p-blog-hero__label {
margin-bottom: 8px;
font-size: 0.75rem;
}
}
.p-blog-hero__title {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 950;
line-height: 1.1;
letter-spacing: -0.02em;
color: #000000;
}
@media (max-width: 1024px) {
.p-blog-hero__title {
font-size: clamp(2rem, 10vw, 3rem);
}
}
.p-blog-hero__visual {
display: flex;
justify-content: center;
position: relative;
z-index: 20;
}
.p-blog-hero__character {
max-width: 340px;
transform: rotate(1deg);
}
@media (max-width: 1024px) {
.p-blog-hero__character {
max-width: 200px;
max-height: none;
margin-top: 0.5rem;
}
}
.p-blog-hero__character img {
width: 100%;
height: auto;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.05));
animation: hero-award-float 12s ease-in-out infinite;
}
.p-blog-hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
font-size: 0.8rem;
font-weight: 900;
font-family: "Space Mono", monospace;
letter-spacing: 0.3em;
color: rgba(0, 0, 0, 0.3);
z-index: 40;
}
@media (max-width: 1024px) {
.p-blog-hero__scroll {
display: none;
}
}
.p-blog-hero__scroll span {
width: 2px;
height: 60px;
background: rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.p-blog-hero__scroll span::after {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: #000;
animation: scroll-line-v 2s infinite;
}
.p-blog-filter {
padding: 3rem 0;
background-color: #fcfcfc;
position: relative;
z-index: 10;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
@media (max-width: 1024px) {
.p-blog-filter {
padding: 1.5rem 0;
}
}
.p-blog-filter__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
.p-blog-filter__top {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 3rem;
margin-bottom: 3rem;
}
@media (max-width: 1100px) {
.p-blog-filter__top {
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
}
.p-blog-filter__search {
flex: 1;
max-width: 500px;
}
.p-blog-filter__controls {
display: flex;
align-items: flex-end;
gap: 3rem;
}
@media (max-width: 1024px) {
.p-blog-filter__controls {
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;
}
}
.p-blog-filter__control-item {
display: flex;
flex-direction: column;
gap: 6px;
}
@media (max-width: 1024px) {
.p-blog-filter__control-item {
flex: 1;
min-width: 140px;
}
}
.p-blog-filter__label {
font-size: 0.7rem;
font-weight: 950;
color: rgba(0, 0, 0, 0.3);
letter-spacing: 0.1em;
font-family: "Space Mono", monospace;
}
.p-blog-filter__select-wrap {
position: relative;
width: 100%;
}
.p-blog-filter__select-wrap::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
margin-top: -3px;
width: 10px;
height: 6px;
background-color: #000000;
clip-path: polygon(0 0, 100% 0, 50% 100%);
pointer-events: none;
}
.p-blog-filter__select {
appearance: none;
background: #fff;
border: 2px solid #000000;
padding: 8px 32px 8px 12px;
font-size: 0.85rem;
font-weight: 850;
cursor: pointer;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
width: 100%;
}
.p-blog-filter__select:focus-visible {
outline: none;
border-color: #000000;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #FFE600, 0 0 0 2px #FFE600;
}
.p-blog-filter__groups {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding-top: 1.5rem;
border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
.p-blog-filter__group {
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
@media (max-width: 1024px) {
.p-blog-filter__group {
flex-direction: column;
gap: 6px;
}
}
.p-blog-filter__group-label {
font-size: 0.7rem;
font-weight: 950;
color: rgba(0, 0, 0, 0.2);
padding-top: 6px;
min-width: 80px;
font-family: "Space Mono", monospace;
}
.p-blog-filter__items {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.p-blog-filter__item {
cursor: pointer;
}
.p-blog-filter__item input {
display: none;
}
.p-blog-filter__item input:checked + .p-blog-filter__btn {
background: #FFE600;
border-color: #000000;
box-shadow: 3px 3px 0 #000000;
transform: translate(-2px, -2px);
color: #000000;
}
.p-blog-filter__btn {
display: inline-block;
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 950;
background: #fff;
border: 2px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
user-select: none;
border-radius: 4px;
touch-action: manipulation;
}
@media (hover: hover) {
.p-blog-filter__btn:hover {
border-color: #000000;
transform: translateY(-2px);
}
}
.p-blog-filter__btn--tag {
font-size: 0.75rem;
padding: 4px 12px;
color: rgba(0, 0, 0, 0.6);
background: #fcfcfc;
}
.p-blog-archive {
padding: 1.5rem 0 5rem;
background-color: #fff;
}
.p-blog-archive__result-meta {
max-width: 1400px;
margin: 0 auto 3rem;
padding: 0 1.5rem;
text-align: center;
}
.p-blog-archive__result-title {
font-size: 1.25rem;
font-weight: 950;
margin-bottom: 0.5rem;
}
.p-blog-archive__result-count {
font-size: 0.85rem;
font-weight: 950;
color: #000000;
background: #FFE600;
display: inline-block;
padding: 2px 12px;
border: 2px solid #000000;
box-shadow: 3px 3px 0 #000000;
transform: rotate(-1deg);
}
.p-blog-archive__none {
grid-column: 1/-1;
text-align: center;
padding: 5rem;
background: #fcfcfc;
border: 2px dashed rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
@media (max-width: 768px) {
.p-blog-archive__none {
padding: 3rem 1rem;
}
}
.p-blog-archive__none p {
font-size: 1rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.3);
line-height: 1.8;
}
.p-blog-archive__none-hint {
margin-top: 1rem;
font-size: 0.9rem;
font-weight: 600;
opacity: 0.8;
}
.p-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 1100px) {
.p-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.p-blog-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
}
.p-blog-pagination {
margin-top: 5rem;
display: flex;
justify-content: center;
}
.p-blog-pagination .nav-links {
display: flex;
gap: 1rem;
}
.p-blog-pagination .page-numbers {
min-width: 2.75rem;
min-height: 2.75rem;
width: 44px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #000000;
font-weight: 950;
text-decoration: none;
color: #000000;
transition: all 0.3s ease;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
touch-action: manipulation;
}
.p-blog-pagination .page-numbers.current {
background: #FFE600;
box-shadow: 4px 4px 0 #000000;
}
@media (hover: hover) {
.p-blog-pagination .page-numbers:hover:not(.current) {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #FFE600;
}
}
.p-blog-pagination .page-numbers:focus-visible {
outline: none;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 0 3px #FFE600;
}
.p-blog-cta {
padding: 10rem 0 3rem;
background-color: #FFE600;
position: relative;
overflow: hidden;
}
.p-blog-cta::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: repeating-linear-gradient(45deg, #000, #000 10px, #FFE600 10px, #FFE600 20px);
z-index: 10;
}
@media (max-width: 1024px) {
.p-blog-cta {
padding: 7.5rem 0;
}
}
.p-blog-cta {
min-height: 500px;
display: flex;
align-items: center;
}
@media (max-width: 1024px) {
.p-blog-cta {
padding: 7.5rem 0;
min-height: auto;
text-align: center;
}
}
.p-blog-cta__inner {
max-width: 1400px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr 380px;
align-items: center;
gap: 5rem;
}
@media (max-width: 1024px) {
.p-blog-cta__inner {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
}
.p-blog-cta__visual {
position: relative;
display: flex;
justify-content: center;
width: 100%;
}
@media (max-width: 1024px) {
.p-blog-cta__visual {
order: 0;
margin-bottom: 3rem;
}
}
.p-blog-cta__visual img {
width: 100%;
max-width: 380px;
height: auto;
filter: drop-shadow(15px 15px 0 rgba(0, 0, 0, 0.05));
animation: hero-award-float 10s ease-in-out infinite;
}
@media (max-width: 1024px) {
.p-blog-cta__visual img {
max-width: 240px;
}
}
.p-blog-cta__content {
position: relative;
z-index: 10;
text-align: center;
max-width: 900px;
margin: 0 auto;
padding-bottom: 5rem;
}
@media (max-width: 768px) {
.p-blog-cta__content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.p-blog-cta__content {
text-align: left;
margin: 0;
padding: 0;
}
@media (max-width: 1024px) {
.p-blog-cta__content {
order: 1;
width: 100%;
padding: 0 1.5rem;
text-align: center;
}
}
.p-blog-cta__title {
font-size: clamp(2.5rem, 8vw, 7rem);
font-weight: 950;
line-height: 1.05;
margin-bottom: 5rem;
letter-spacing: -0.04em;
color: #000;
text-transform: uppercase;
}
.p-blog-cta__title [class*=-cta__label] {
display: block;
font-size: 1rem;
margin-bottom: 20px;
opacity: 0.6;
font-family: "Space Mono", monospace;
}
@media (max-width: 768px) {
.p-blog-cta__title {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
.p-blog-cta__title {
text-align: left;
}
@media (max-width: 1024px) {
.p-blog-cta__title {
text-align: center;
display: block;
}
}
.p-blog-cta__title .p-profile-cta__title-sub {
display: inline-block;
background: #000000;
color: #fff;
padding: 4px 20px;
transform: rotate(-1.5deg);
margin-top: 10px;
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.p-blog-cta__title .p-profile-cta__title-sub {
padding: 4px 15px;
font-size: 1.4rem;
}
}
.p-blog-cta__text {
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
font-weight: 850;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
margin-bottom: 7.5rem;
max-width: 40em;
margin-inline: auto;
text-align: left;
margin-left: 0;
}
.p-blog-cta__btn-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
}
.p-blog-cta__btn-wrap .c-button {
padding: 1.6rem 5rem;
border-radius: 100px;
font-size: 2rem;
font-weight: 950;
background-color: #000;
color: #fff;
border: 4px solid #000;
box-shadow: 12px 12px 0 #fff;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
white-space: nowrap;
touch-action: manipulation;
}
@media (max-width: 768px) {
.p-blog-cta__btn-wrap .c-button {
white-space: normal;
max-width: 100%;
box-sizing: border-box;
font-size: 1.35rem;
padding: 1rem 1.5rem;
}
}
@media (hover: hover) {
.p-blog-cta__btn-wrap .c-button:hover {
transform: translate(6px, 6px);
box-shadow: 0 0 0 #fff;
background-color: #222;
}
}
.p-blog-cta__btn-wrap {
justify-content: flex-start;
}
@media (max-width: 1024px) {
.p-blog-cta__btn-wrap {
justify-content: center;
}
}
.p-blog-cta__bg-text {
position: absolute;
bottom: -0.1em;
left: 0;
display: flex;
font-family: "Space Mono", monospace;
font-size: 24vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
line-height: 1;
letter-spacing: -0.02em;
}
.p-blog-cta__bg-text span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.c-search-form__wrapper {
background: #fff;
border: 3px solid #000000;
padding: 4px;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (max-width: 1024px) {
.c-search-form__wrapper {
padding: 2px;
border-width: 2px;
}
}
.c-search-form__wrapper:focus-within {
transform: translate(-3px, -3px);
box-shadow: 10px 10px 0 #FFE600;
border-color: #000000;
}
.c-search-form__inner {
display: flex;
align-items: center;
}
.c-search-form__icon {
padding: 0 12px;
color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
}
@media (max-width: 1024px) {
.c-search-form__icon {
padding: 0 8px;
}
}
.c-search-form__input {
flex: 1;
border: none;
padding: 12px 0;
font-size: 1.1rem;
font-weight: 850;
outline: none;
}
@media (max-width: 1024px) {
.c-search-form__input {
padding: 8px 0;
font-size: 1rem;
}
}
.c-search-form__input::placeholder {
color: rgba(0, 0, 0, 0.2);
}
.c-search-form__input:focus-visible {
outline: none;
box-shadow: 0 2px 0 0 #FFE600;
}
.c-condition-toggle {
display: flex;
background: #eee;
padding: 4px;
border: 2px solid #000000;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.c-condition-toggle__item {
flex: 1;
cursor: pointer;
}
.c-condition-toggle__item input {
display: none;
}
.c-condition-toggle__item input:checked + .c-condition-toggle__btn {
background: #000000;
color: #fff;
box-shadow: none;
}
.c-condition-toggle__btn {
display: block;
padding: 6px 12px;
font-size: 0.7rem;
font-weight: 950;
border-radius: 2px;
transition: all 0.3s ease;
text-align: center;
white-space: nowrap;
}
@keyframes hero-award-float {
0%, 100% {
transform: translateY(0) rotate(-1deg);
}
50% {
transform: translateY(-20px) rotate(1deg);
}
}
.p-blog-detail {
padding-top: var(--header-height);
background-color: #fff;
}
.p-blog-detail .l-container {
max-width: 900px;
margin: 0 auto;
padding: 0 5vw;
}
@media (min-width: 1025px) {
.p-blog-detail .l-container {
padding: 0 1.5rem;
}
}
.p-blog-detail .p-blog-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: #FFE600;
z-index: 9999;
pointer-events: none;
transition: width 0.1s ease-out;
}
.p-blog-detail-breadcrumb {
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
color: rgba(0, 0, 0, 0.4);
}
.p-blog-detail-breadcrumb a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
touch-action: manipulation;
}
@media (hover: hover) {
.p-blog-detail-breadcrumb a:hover {
color: #000000;
}
}
.p-blog-detail-breadcrumb__sep {
font-size: 0.7rem;
opacity: 0.5;
}
.p-blog-detail-breadcrumb__current {
font-weight: 500;
opacity: 0.8;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.p-blog-detail-header {
padding: 1rem 0;
background-color: #fff;
text-align: left;
}
.p-blog-detail-header__meta {
margin-bottom: 0.8rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.p-blog-detail-header__cat {
font-size: 0.75rem;
font-weight: 800;
color: #7B6FEF;
background: rgba(123, 111, 239, 0.08);
display: inline-block;
align-self: flex-start;
padding: 0.25em 0.8rem;
border-radius: 2px;
border: 1px solid rgba(123, 111, 239, 0.2);
}
.p-blog-detail-header__tags {
display: flex;
align-items: center;
gap: 0.6rem;
}
.p-blog-detail-header__tags-icon {
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.3);
flex-shrink: 0;
}
.p-blog-detail-header__tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.p-blog-detail-header__tags a {
font-size: 0.7rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.5);
background: #fafaf8;
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 0.2em 0.6rem;
border-radius: 2px;
text-decoration: none;
transition: all 0.2s ease;
touch-action: manipulation;
}
@media (hover: hover) {
.p-blog-detail-header__tags a:hover {
color: #000;
background: rgba(255, 230, 0, 0.2);
border-color: rgba(255, 230, 0, 0.3);
}
}
.p-blog-detail-header__title {
font-size: clamp(1.8rem, 5vw, 3.2rem);
font-weight: 950;
line-height: 1.25;
letter-spacing: -0.02em;
margin: 0 0 1rem;
color: #000000;
word-break: break-word;
}
.p-blog-detail-header__pr {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.25rem;
padding: 0.4rem 0.8rem;
background: #fafaf8;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.p-blog-detail-header__pr-badge {
font-size: 0.65rem;
font-weight: 950;
color: #fff;
background: rgba(0, 0, 0, 0.3);
padding: 0.1em 0.4em;
line-height: 1;
border-radius: 2px;
letter-spacing: 0.05em;
}
.p-blog-detail-header__pr-text {
font-size: 0.75rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.4);
margin: 0;
}
.p-blog-detail-header__dates {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: rgba(0, 0, 0, 0.4);
}
.p-blog-detail-header__dates svg {
opacity: 0.6;
}
.p-blog-detail-header__dates time {
font-size: 0.85rem;
font-weight: 700;
color: inherit;
}
.p-blog-detail-header__dates-modified {
font-size: 0.8rem;
font-weight: 500;
opacity: 0.8;
}
@media (max-width: 768px) {
.p-blog-detail-header__dates {
flex-wrap: wrap;
gap: 0.3rem;
}
}
.p-blog-detail-header__thumb {
margin-bottom: 2rem;
text-align: center;
}
.p-blog-detail-header__thumb img {
max-width: 100%;
width: auto;
max-height: 500px;
height: auto;
object-fit: contain;
border-radius: 12px;
}
.p-blog-detail-content {
padding-top: 0;
padding-bottom: 7.5rem;
}
.p-blog-detail-content__inner {
max-width: 900px;
margin: 0 auto;
padding: 0;
}
.p-blog-detail-lead {
font-size: 1.1rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.7);
margin-bottom: 3rem;
padding: 1.5rem 2.5rem;
background: #fafaf8;
border-radius: 12px;
border-left: 4px solid #FFE600;
}
@media (max-width: 768px) {
.p-blog-detail-lead {
padding: 1.5rem 1rem;
}
}
.p-blog-detail-cta {
padding: 7.5rem 0;
background-color: #fafaf8;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.p-blog-detail-cta__inner {
text-align: center;
max-width: 700px;
margin: 0 auto;
padding: 5rem 3rem;
background: #fff;
border: 3px solid #000;
box-shadow: 12px 12px 0 #000;
border-radius: 30px;
}
@media (max-width: 768px) {
.p-blog-detail-cta__inner {
padding: 3rem 1.5rem;
box-shadow: 8px 8px 0 #000;
}
}
.p-blog-detail-cta__catch {
font-size: clamp(1.3rem, 3vw, 1.8rem);
font-weight: 950;
margin-bottom: 3rem;
line-height: 1.4;
color: #000;
}
.p-blog-detail-cta .c-button {
padding: 1rem 3rem;
border-radius: 100px;
font-size: 1.1rem;
font-weight: 950;
background: #000;
color: #fff;
border: 3px solid #000;
box-shadow: 6px 6px 0 #FFE600;
touch-action: manipulation;
}
@media (hover: hover) {
.p-blog-detail-cta .c-button:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #000;
}
}
.p-blog-detail-related {
padding: 7.5rem 0;
background-color: #fff;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.p-blog-detail-related__title {
font-size: 1.5rem;
font-weight: 950;
margin-bottom: 5rem;
color: #000000;
text-align: left;
position: relative;
padding-left: 1.2rem;
}
.p-blog-detail-related__title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 24px;
background: #FFE600;
border-radius: 2px;
}
.p-blog-detail-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
@media (max-width: 1024px) {
.p-blog-detail-related__grid {
grid-template-columns: 1fr;
max-width: 500px;
}
}
.entry-content {
font-size: 1.1rem;
line-height: 1.9;
color: rgba(0, 0, 0, 0.85);
letter-spacing: 0.01em;
}
.entry-content a:not(.c-button) {
position: relative;
}
.entry-content a:not(.c-button)::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: currentColor;
transition: width 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
.entry-content a:not(.c-button):hover::after {
width: 100%;
}
}
@media (max-width: 768px) {
.entry-content {
font-size: 1.05rem;
line-height: 1.8;
}
}
.entry-content > * {
margin-top: 1.5em;
margin-bottom: 0;
}
.entry-content > *:first-child {
margin-top: 0;
}
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > dl,
.entry-content > blockquote,
.entry-content > pre,
.entry-content > .wp-block-code {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
@media (max-width: 768px) {
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > dl,
.entry-content > blockquote,
.entry-content > pre,
.entry-content > .wp-block-code {
margin-left: 0;
margin-right: 0;
}
}
.entry-content p {
margin-bottom: 0;
}
.entry-content h1 {
font-size: clamp(1.8rem, 5vw, 2.5rem);
font-weight: 950;
margin: 2.5em 0 1em;
line-height: 1.3;
color: #002B5B;
}
.entry-content h2 {
font-size: clamp(1.4rem, 4vw, 1.75rem);
font-weight: 950;
margin: 3em 0 1.2rem;
padding: 0.6em 0 0.6em 1.2rem;
border-left: 6px solid #002B5B;
background: rgba(0, 43, 91, 0.03);
line-height: 1.4;
color: #002B5B;
position: relative;
}
@media (max-width: 768px) {
.entry-content h2 {
margin: 2.5em -2vw 1rem;
padding: 0.5em 0 0.5em 3vw;
font-size: 1.35rem;
}
}
.entry-content h3 {
font-size: clamp(1.2rem, 3vw, 1.4rem);
font-weight: 950;
margin: 2.5em 0 1rem;
padding-bottom: 0.5em;
border-bottom: 2px solid rgba(0, 43, 91, 0.1);
line-height: 1.5;
color: #002B5B;
position: relative;
}
.entry-content h3::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: #FFE600;
}
.entry-content h4 {
font-size: 1.15rem;
font-weight: 900;
margin: 2em 0 1rem;
color: #002B5B;
display: flex;
align-items: center;
gap: 10px;
}
.entry-content h4::before {
content: "";
width: 8px;
height: 8px;
background: #FFE600;
border-radius: 50%;
}
.entry-content h5 {
font-size: 1.05rem;
font-weight: 900;
margin: 1.8em 0 1rem;
color: rgba(0, 43, 91, 0.8);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.entry-content h6 {
font-size: 0.95rem;
font-weight: 900;
margin: 1.8em 0 1rem;
color: rgba(0, 43, 91, 0.6);
}
.entry-content ul, .entry-content ol {
margin: 2em 0;
padding: 1.5rem 2rem;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
}
.entry-content ul li, .entry-content ol li {
margin-bottom: 0.8em;
padding-left: 0.5em;
position: relative;
}
.entry-content ul li:last-child, .entry-content ol li:last-child {
margin-bottom: 0;
}
.entry-content ul li {
list-style: none;
}
.entry-content ul li::before {
content: "";
position: absolute;
left: -1.2em;
top: 0.7em;
width: 6px;
height: 6px;
background: #FFE600;
border-radius: 50%;
}
.entry-content blockquote {
padding: 2rem;
margin: 3rem 0;
background: #fafaf8;
border-radius: 12px;
border-left: 4px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.entry-content blockquote p {
margin-bottom: 0;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.7;
color: rgba(0, 0, 0, 0.7);
}
.entry-content blockquote cite {
display: block;
margin-top: 1.2rem;
font-size: 0.9rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.4);
text-align: right;
}
.entry-content img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 3rem 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.entry-content code {
font-family: "Space Mono", monospace;
font-size: 0.9em;
background: rgba(0, 0, 0, 0.05);
padding: 0.2em 0.4em;
border-radius: 4px;
color: #e01e5a;
font-weight: 600;
}
.entry-content pre {
overflow-x: auto;
padding: 1.5rem;
background: #1a1a1a;
color: #fff;
border-radius: 12px;
margin: 2.5rem 0;
}
.entry-content pre code {
background: none;
padding: 0;
color: inherit;
font-weight: 400;
}
.p-blog-toc {
margin: 1rem 0 2.5rem;
background: #fff;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 0;
overflow: hidden;
}
@media (max-width: 768px) {
.p-blog-toc {
margin: 1rem 0 2rem;
}
}
.p-blog-toc.is-empty {
display: none;
}
.p-blog-toc__header {
background: #fafaf8;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 0.8rem 1.2rem;
}
.p-blog-toc__title {
font-size: 0.95rem;
font-weight: 950;
margin: 0;
color: #000;
display: flex;
align-items: center;
gap: 8px;
}
.p-blog-toc__title::before {
content: "";
width: 14px;
height: 2px;
background: #000;
}
.p-blog-toc__nav {
padding: 1rem;
}
@media (max-width: 768px) {
.p-blog-toc__nav {
padding: 0.8rem;
}
}
.p-blog-toc__list {
list-style: none !important;
padding: 0 !important;
background: none !important;
border: none !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 4px;
}
.p-blog-toc__item {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.p-blog-toc__item::before {
display: none !important;
}
.p-blog-toc__item--h3 {
padding-left: 1.2rem !important;
position: relative;
}
.p-blog-toc__item--h3::before {
content: "";
display: block !important;
position: absolute;
left: 0.4rem;
top: 0;
bottom: 50%;
width: 8px;
border-left: 1.5px solid rgba(0, 0, 0, 0.1);
border-bottom: 1.5px solid rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 3px;
}
.p-blog-toc__item--h3 .p-blog-toc__link {
font-size: 0.9rem;
font-weight: 600;
color: rgba(0, 0, 0, 0.6);
padding: 0.4em 0.5rem;
}
.p-blog-toc__link {
display: block;
width: 100%;
font-size: 0.95rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
text-decoration: none !important;
padding: 0.6em 0.8rem;
border-radius: 6px;
transition: all 0.2s ease;
line-height: 1.4;
touch-action: manipulation;
}
@media (hover: hover) {
.p-blog-toc__link:hover {
background: rgba(255, 230, 0, 0.15);
color: #000;
}
}
.p-assets {
background-color: #fff;
}
.p-assets--landing {
background-color: #fff;
color: #000000;
}
.p-assets--landing .p-assets-hero--dual {
position: relative;
padding-top: var(--header-height);
min-height: clamp(560px, 72svh, 780px);
display: flex;
align-items: center;
background-color: #fff;
overflow: hidden;
border-bottom: 4px solid #000000;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-hero--dual {
padding-top: calc(var(--header-height) + 1.25rem);
min-height: clamp(280px, 50svh, 360px);
max-height: none;
display: block;
}
}
.p-assets--landing .p-assets-hero--dual::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(255, 230, 0, 0.1) 0%, transparent 70%);
z-index: 1;
pointer-events: none;
}
.p-assets--landing .p-assets-hero--dual::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 230, 0, 0.15) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 230, 0, 0.15) 1.5px, transparent 1.5px), linear-gradient(rgba(255, 230, 0, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 230, 0, 0.06) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
z-index: 0;
pointer-events: none;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__bg-marquee {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
display: flex;
font-size: clamp(8rem, 15vw, 18vw);
font-weight: 950;
color: transparent;
-webkit-text-stroke: 2px rgba(255, 230, 0, 0.4);
pointer-events: none;
user-select: none;
z-index: 1;
letter-spacing: -0.02em;
opacity: 1;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__bg-marquee span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__shapes {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__inner {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left content right";
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__content {
grid-area: content;
text-align: center;
padding: 0 1.5rem;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__label {
font-size: 0.8rem;
font-weight: 950;
color: #fff;
background: #000000;
padding: 4px 16px;
display: inline-block;
margin-bottom: 0.5rem;
box-shadow: 4px 4px 0 #FFE600;
transform: rotate(-1.5deg);
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__title {
font-size: clamp(2.2rem, 5.5vw, 4.8rem);
line-height: 1.1;
font-weight: 950;
letter-spacing: -0.02em;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__title .u-text-pop {
display: inline-block;
background: #FFE600;
color: #000;
padding: 0 0.15em;
transform: skewX(-10deg);
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__visual {
display: flex;
align-items: center;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__visual--left {
grid-area: left;
justify-content: flex-end;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__visual--right {
grid-area: right;
justify-content: flex-start;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__character {
position: relative;
height: clamp(300px, 55svh, 600px);
width: auto;
flex-shrink: 0;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__character img {
height: 100%;
width: auto;
object-fit: contain;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.05));
animation: hero-award-float 12s ease-in-out infinite;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
font-size: 0.8rem;
font-weight: 900;
font-family: "Space Mono", monospace;
letter-spacing: 0.3em;
color: rgba(0, 0, 0, 0.3);
z-index: 40;
}
@media (max-width: 1024px) {
.p-assets--landing .p-assets-hero--dual .p-assets-hero__scroll {
display: none;
}
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__scroll span {
width: 2px;
height: 60px;
background: rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__scroll span::after {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: #000;
animation: scroll-line-v 2s infinite;
}
@media (max-width: 1024px) {
.p-assets--landing .p-assets-hero--dual {
height: auto;
padding-bottom: 5rem;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__inner {
grid-template-columns: auto auto;
justify-content: center;
grid-template-areas: "content content" "left right";
gap: 1.5rem 0.5rem;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__content {
padding-top: 7.5rem;
margin-bottom: 0;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__character {
height: clamp(200px, 35svh, 320px);
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__scroll {
display: none;
}
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-hero--dual {
padding-bottom: 3rem;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__content {
padding-top: 1.5rem;
margin-top: 0;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__inner {
gap: 1rem 0.5rem;
}
.p-assets--landing .p-assets-hero--dual .p-assets-hero__character {
height: 280px;
}
}
.p-assets--landing .p-assets-intro {
padding: 10rem 0;
background-color: #fff;
}
.p-assets--landing .p-assets-intro__inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-intro {
padding: 1.5rem 0;
}
.p-assets--landing .p-assets-intro__title {
margin-bottom: 1.5rem;
}
}
.p-assets--landing .p-assets-intro__title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 950;
line-height: 1.2;
margin-bottom: 3rem;
}
.p-assets--landing .p-assets-intro__title .u-text-highlight {
background: linear-gradient(transparent 60%, rgba(255, 230, 0, 0.6) 0);
padding: 0 4px;
}
.p-assets--landing .p-assets-intro__body {
font-size: clamp(1.1rem, 1.5vw, 1.25rem);
line-height: 1.8;
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
}
.p-assets--landing .p-assets-intro__body p {
margin-bottom: 1.5rem;
}
.p-assets--landing .p-assets-intro__note {
margin-top: 3rem;
font-size: 0.9rem;
color: rgba(0, 0, 0, 0.4);
font-weight: 800;
}
.p-assets--landing .p-assets-section {
padding: 10rem 0;
}
.p-assets--landing .p-assets-section--tools {
background-color: #f8f8f8;
}
.p-assets--landing .p-assets-section--downloads {
background-color: #fff;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-section {
padding: 3rem 0;
}
}
.p-assets--landing .p-assets-section__header {
margin-bottom: 5rem;
}
.p-assets--landing .p-assets-section__header .u-section-title {
font-size: clamp(2.2rem, 5vw, 3.8rem);
}
.p-assets--landing .p-assets-section__lead {
max-width: 900px;
margin: 0;
font-size: 1.1rem;
line-height: 1.7;
font-weight: 700;
color: rgba(0, 0, 0, 0.6);
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-section__header {
margin-bottom: 3rem;
text-align: center;
}
.p-assets--landing .p-assets-section__header .u-section-title {
justify-content: center;
}
.p-assets--landing .p-assets-section__header .u-section-title::after {
content: "";
display: block;
width: 60px;
height: 4px;
background-color: #FFE600;
margin: 1rem auto 0;
}
.p-assets--landing .p-assets-section__lead {
text-align: center;
margin: 0 auto;
font-size: 1rem;
}
}
.p-assets--landing .p-assets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: 1.5rem;
max-width: 1400px;
margin: 0 auto;
padding: 0;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-grid {
padding: 0 1.5rem;
gap: 1.5rem;
}
}
.p-assets--landing .p-assets-card {
background: #fff;
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
padding: 1.5rem 3rem;
display: flex;
flex-direction: column;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
position: relative;
overflow: hidden;
touch-action: manipulation;
}
.p-assets--landing .p-assets-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #FFE600;
border-bottom: 2px solid #000;
}
.p-assets--landing .p-assets-card--download::before {
background: #000;
}
@media (hover: hover) {
.p-assets--landing .p-assets-card:hover {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 #000000;
background-color: #fafafa;
}
.p-assets--landing .p-assets-card:hover .p-assets-card__title {
color: #FF6B00;
}
.p-assets--landing .p-assets-card:hover .p-assets-card__more {
color: #000000;
transform: translateX(5px);
}
.p-assets--landing .p-assets-card:hover .p-assets-card__more span {
transform: rotate(90deg);
}
}
.p-assets--landing .p-assets-card__head {
flex: 1;
display: flex;
flex-direction: column;
}
.p-assets--landing .p-assets-card__meta {
margin-bottom: 0.5rem;
}
.p-assets--landing .p-assets-card__label {
font-size: 0.65rem;
font-weight: 900;
background: #000;
color: #fff;
padding: 2px 8px;
letter-spacing: 0.05em;
display: inline-block;
}
.p-assets--landing .p-assets-card__title {
font-size: clamp(1.2rem, 2vw, 1.4rem);
font-weight: 950;
line-height: 1.3;
margin-bottom: 1.5rem;
transition: color 0.2s ease;
}
.p-assets--landing .p-assets-card__more {
font-size: 0.8rem;
font-weight: 900;
color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
}
.p-assets--landing .p-assets-card__more span {
font-size: 1.2rem;
line-height: 1;
transition: transform 0.2s ease;
display: inline-block;
}
.p-assets--landing .p-assets-card--placeholder {
border-style: dashed;
border-color: rgba(0, 0, 0, 0.2);
background: transparent;
box-shadow: none;
cursor: default;
}
.p-assets--landing .p-assets-card--placeholder::before {
display: none;
}
.p-assets--landing .p-assets-card--placeholder .p-assets-card__body {
text-align: center;
}
.p-assets--landing .p-assets-card--placeholder .p-assets-card__body p {
color: rgba(0, 0, 0, 0.3);
font-weight: 900;
font-size: 1.2rem;
}
@media (hover: hover) {
.p-assets--landing .p-assets-card--placeholder:hover {
transform: none;
box-shadow: none;
background: transparent;
}
}
.p-assets--landing .p-assets-cta {
padding: 10rem 0 3rem;
background-color: #FFE600;
position: relative;
overflow: hidden;
}
.p-assets--landing .p-assets-cta::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: repeating-linear-gradient(45deg, #000, #000 10px, #FFE600 10px, #FFE600 20px);
z-index: 10;
}
@media (max-width: 1024px) {
.p-assets--landing .p-assets-cta {
padding: 7.5rem 0;
}
}
.p-assets--landing .p-assets-cta {
border-top: 4px solid #000000;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-cta {
padding: 4rem 0 3.5rem;
}
}
.p-assets--landing .p-assets-cta__content {
position: relative;
z-index: 10;
text-align: center;
max-width: 900px;
margin: 0 auto;
padding-bottom: 5rem;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-cta__content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.p-assets--landing .p-assets-cta__label {
display: block;
font-size: 1rem;
font-weight: 950;
margin-bottom: 20px;
opacity: 0.6;
font-family: "Space Mono", monospace;
}
.p-assets--landing .p-assets-cta__title {
font-size: clamp(2.5rem, 8vw, 7rem);
font-weight: 950;
line-height: 1.05;
margin-bottom: 5rem;
letter-spacing: -0.04em;
color: #000;
text-transform: uppercase;
}
.p-assets--landing .p-assets-cta__title [class*=-cta__label] {
display: block;
font-size: 1rem;
margin-bottom: 20px;
opacity: 0.6;
font-family: "Space Mono", monospace;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-cta__title {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-cta__title {
font-size: 2.2rem;
}
}
.p-assets--landing .p-assets-cta__text {
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
font-weight: 850;
line-height: 1.8;
color: rgba(0, 0, 0, 0.75);
margin-bottom: 7.5rem;
max-width: 40em;
margin-inline: auto;
text-align: left;
}
.p-assets--landing .p-assets-cta__btn-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-cta__btn-wrap {
padding: 0 1.5rem;
gap: 1.5rem;
}
}
.p-assets--landing .p-assets-cta__btn-wrap .c-button {
padding: 1.6rem 5rem;
border-radius: 100px;
min-width: 300px;
font-size: 2rem;
font-weight: 950;
background-color: #000;
color: #fff;
border: 4px solid #000;
box-shadow: 12px 12px 0 #fff;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
white-space: nowrap;
touch-action: manipulation;
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-cta__btn-wrap .c-button {
min-width: 0;
width: 100%;
font-size: 1.1rem;
padding: 1rem 0.5rem;
box-shadow: 8px 8px 0 #fff;
}
}
@media (hover: hover) {
.p-assets--landing .p-assets-cta__btn-wrap .c-button:hover {
transform: translate(6px, 6px);
box-shadow: 0 0 0 #fff;
background-color: #222;
}
}
.p-assets--landing .p-assets-cta__btn-wrap .c-button--production {
background-color: #fff;
color: #000;
box-shadow: 12px 12px 0 #000;
}
@media (hover: hover) {
.p-assets--landing .p-assets-cta__btn-wrap .c-button--production:hover {
box-shadow: 0 0 0 #000;
background-color: #f0f0f0;
}
}
@media (max-width: 768px) {
.p-assets--landing .p-assets-cta__btn-wrap .c-button--production {
box-shadow: 8px 8px 0 #000;
}
}
.p-assets--landing .p-assets-cta__bg-text {
position: absolute;
bottom: -0.1em;
left: 0;
display: flex;
font-family: "Space Mono", monospace;
font-size: 24vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
line-height: 1;
letter-spacing: -0.02em;
}
.p-assets--landing .p-assets-cta__bg-text span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.c-modal {
display: none;
}
.c-modal.is-open {
display: block;
}
.c-modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
padding: 1.5rem;
}
.c-modal__container {
background: #fff;
border: 4px solid #000000;
box-shadow: 15px 15px 0 #FFE600;
width: 100%;
max-width: 750px;
max-height: 85svh;
position: relative;
overflow-y: auto;
padding: 7.5rem 5rem;
}
@media (max-width: 768px) {
.c-modal__container {
padding: 5rem 1.5rem;
}
}
.c-modal__close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 44px;
height: 44px;
background: #000;
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.c-modal__close::before, .c-modal__close::after {
content: "";
position: absolute;
width: 22px;
height: 3px;
background: #fff;
}
.c-modal__close::before {
transform: rotate(45deg);
}
.c-modal__close::after {
transform: rotate(-45deg);
}
@media (hover: hover) {
.c-modal__close:hover {
transform: scale(1.1) rotate(90deg);
background: #FFE600;
}
.c-modal__close:hover::before, .c-modal__close:hover::after {
background: #000;
}
}
.c-modal__header {
margin-bottom: 5rem;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 3rem;
}
.c-modal__label {
font-size: 0.8rem;
font-weight: 950;
background: #000;
color: #fff;
padding: 2px 10px;
display: inline-block;
margin-bottom: 1rem;
}
.c-modal__title {
font-size: clamp(1.75rem, 5vw, 2.5rem);
font-weight: 950;
line-height: 1.2;
letter-spacing: -0.02em;
color: #000;
}
.c-modal__content {
font-size: 1.15rem;
line-height: 1.9;
font-weight: 600;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 7.5rem;
}
.c-modal__content p {
margin-bottom: 3rem;
}
.c-modal__footer {
display: flex;
justify-content: center;
}
.c-modal__footer .c-button--full {
width: auto;
min-width: 280px;
display: flex;
align-items: center;
justify-content: center;
height: 4rem;
padding: 0 5rem;
font-size: 1.25rem;
font-weight: 950;
}
@media (max-width: 768px) {
.c-modal__footer .c-button--full {
width: 100%;
height: 3.5rem;
font-size: 1.1rem;
}
}
.p-partners {
background-color: #fff;
color: #000000;
}
.p-partners .p-partners-hero--dual {
position: relative;
padding-top: var(--header-height);
height: clamp(560px, 72svh, 780px);
min-height: clamp(560px, 72svh, 780px);
display: flex;
align-items: center;
background-color: #fff;
overflow: hidden;
border-bottom: 4px solid #000000;
}
@media (max-width: 768px) {
.p-partners .p-partners-hero--dual {
padding-top: calc(var(--header-height) + 1rem);
padding-bottom: 1.5rem;
min-height: 100svh;
max-height: 100svh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.p-partners .p-partners-hero--dual::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(0, 209, 102, 0.12) 0%, transparent 70%);
z-index: 1;
pointer-events: none;
}
.p-partners .p-partners-hero--dual::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(0, 209, 102, 0.15) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0, 209, 102, 0.15) 1.5px, transparent 1.5px), linear-gradient(rgba(0, 209, 102, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 209, 102, 0.06) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
z-index: 0;
pointer-events: none;
}
.p-partners .p-partners-hero--dual .p-partners-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.p-partners .p-partners-hero--dual .p-partners-hero__bg-marquee {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
display: flex;
font-size: clamp(8rem, 15vw, 18vw);
font-weight: 950;
color: transparent;
-webkit-text-stroke: 2px rgba(0, 209, 102, 0.4);
pointer-events: none;
user-select: none;
z-index: 1;
letter-spacing: -0.02em;
opacity: 1;
}
.p-partners .p-partners-hero--dual .p-partners-hero__bg-marquee span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.p-partners .p-partners-hero--dual .p-partners-hero__shapes {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.p-partners .p-partners-hero--dual .p-partners-hero__inner {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left content right";
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.p-partners .p-partners-hero--dual .p-partners-hero__content {
grid-area: content;
text-align: center;
padding: 0 1.5rem;
align-self: flex-start;
margin-top: 3rem;
}
.p-partners .p-partners-hero--dual .p-partners-hero__label {
font-size: 0.8rem;
font-weight: 950;
color: #fff;
background: #000000;
padding: 4px 16px;
display: inline-block;
margin-bottom: 1.5rem;
box-shadow: 4px 4px 0 #00D166;
transform: rotate(-1.5deg);
}
.p-partners .p-partners-hero--dual .p-partners-hero__title {
font-size: clamp(2.2rem, 5.5vw, 4.8rem);
line-height: 1.1;
font-weight: 950;
letter-spacing: -0.02em;
}
.p-partners .p-partners-hero--dual .p-partners-hero__title .u-text-pop {
display: inline-block;
background: #00D166;
color: #000;
padding: 0 0.15em;
transform: skewX(-10deg);
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
margin-right: 0.25em;
}
.p-partners .p-partners-hero--dual .p-partners-hero__visual {
display: flex;
align-items: center;
}
.p-partners .p-partners-hero--dual .p-partners-hero__visual--left {
grid-area: left;
justify-content: flex-end;
}
.p-partners .p-partners-hero--dual .p-partners-hero__visual--right {
grid-area: right;
justify-content: flex-start;
}
.p-partners .p-partners-hero--dual .p-partners-hero__character {
position: relative;
height: clamp(300px, 55svh, 600px);
width: auto;
flex-shrink: 0;
}
.p-partners .p-partners-hero--dual .p-partners-hero__character img {
height: 100%;
width: auto;
object-fit: contain;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.05));
animation: hero-award-float 12s ease-in-out infinite;
}
.p-partners .p-partners-hero--dual .p-partners-hero__scroll {
display: none;
}
.p-partners .p-partners-hero--dual .p-partners-hero__cta-wrap {
position: absolute;
left: 50%;
bottom: 12%;
transform: translateX(-50%);
z-index: 20;
text-align: center;
}
.p-partners .p-partners-hero--dual .p-partners-hero__cta-wrap .c-button--partners {
min-width: 280px;
box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.2) !important;
}
@media (max-width: 1024px) {
.p-partners .p-partners-hero--dual {
height: auto;
padding-bottom: 1.5rem;
}
.p-partners .p-partners-hero--dual .p-partners-hero__inner {
grid-template-columns: auto auto;
justify-content: center;
grid-template-areas: "content content" "left right";
gap: 1.5rem 0.5rem;
}
.p-partners .p-partners-hero--dual .p-partners-hero__content {
padding-top: 10rem;
margin-bottom: 0;
margin-top: 0;
align-self: center;
}
.p-partners .p-partners-hero--dual .p-partners-hero__content .p-partners-hero__title {
line-height: 1.4;
}
.p-partners .p-partners-hero--dual .p-partners-hero__character {
height: clamp(240px, 40svh, 380px);
}
.p-partners .p-partners-hero--dual .p-partners-hero__cta-wrap {
position: relative;
left: auto;
bottom: auto;
transform: none;
margin-top: 3rem;
}
.p-partners .p-partners-hero--dual .p-partners-hero__scroll {
display: none;
}
}
@media (max-width: 768px) {
.p-partners .p-partners-hero--dual .p-partners-hero__content {
padding-top: 0;
margin-top: 0;
}
.p-partners .p-partners-hero--dual .p-partners-hero__label {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.p-partners .p-partners-hero--dual .p-partners-hero__title {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.p-partners .p-partners-hero--dual .p-partners-hero__inner {
gap: 2svh 0.5rem;
}
.p-partners .p-partners-hero--dual .p-partners-hero__character {
height: clamp(160px, 32svh, 240px);
}
.p-partners .p-partners-hero--dual .p-partners-hero__cta-wrap {
margin-top: 1rem;
}
}
.p-partners .p-partners-concept {
padding: 10rem 0;
background-color: #fff;
}
.p-partners .p-partners-concept__inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
@media (max-width: 768px) {
.p-partners .p-partners-concept {
padding: 3rem 0;
}
}
.p-partners .p-partners-concept__title {
margin-bottom: 3rem;
}
.p-partners .p-partners-concept__title-main {
display: block;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 950;
line-height: 1.2;
color: #000000;
}
.p-partners .p-partners-concept__title-main .u-text-highlight {
background: linear-gradient(transparent 60%, rgba(0, 209, 102, 0.5) 0%);
padding: 0 4px;
}
.p-partners .p-partners-concept__title-sub {
display: block;
font-size: 0.95rem;
font-weight: 800;
font-family: "Space Mono", monospace;
color: rgba(0, 0, 0, 0.5);
margin-top: 1rem;
letter-spacing: 0.05em;
}
.p-partners .p-partners-concept__body {
font-size: clamp(1.1rem, 1.5vw, 1.25rem);
line-height: 1.8;
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
}
.p-partners .p-partners-concept__body p {
margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
.p-partners .p-partners-concept__body {
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
}
.p-partners .p-partners-types {
padding: 10rem 0;
background-color: #f8faf8;
}
@media (max-width: 768px) {
.p-partners .p-partners-types {
padding: 3rem 0;
}
}
.p-partners .p-partners-types__header {
margin-bottom: 5rem;
text-align: center;
}
.p-partners .p-partners-types__header .u-section-title {
font-size: clamp(2.2rem, 5vw, 3.8rem);
}
.p-partners .p-partners-types__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 5rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 1024px) {
.p-partners .p-partners-types__list {
grid-template-columns: 1fr;
gap: 3rem;
}
}
.p-partners .p-partners-type-card {
background: #fff;
border: 4px solid #000000;
box-shadow: 6px 6px 0 #000000;
padding: 5rem 3rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
touch-action: manipulation;
}
@media (max-width: 768px) {
.p-partners .p-partners-type-card {
padding: 3rem 1.5rem;
}
}
.p-partners .p-partners-type-card__bg-text {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
font-size: clamp(0.75rem, 1.8vw, 1rem);
font-weight: 800;
font-family: "Space Mono", monospace;
color: rgba(0, 209, 102, 0.18);
line-height: 1.4;
letter-spacing: 0.15em;
writing-mode: vertical-rl;
text-orientation: mixed;
pointer-events: none;
z-index: 0;
}
.p-partners .p-partners-type-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #00D166;
border-bottom: 2px solid #000;
}
@media (hover: hover) {
.p-partners .p-partners-type-card:hover {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 #000000;
}
}
.p-partners .p-partners-type-card__num {
font-size: 0.75rem;
font-weight: 950;
font-family: "Space Mono", monospace;
color: #00D166;
margin-bottom: 1rem;
}
.p-partners .p-partners-type-card__title {
font-size: clamp(1.35rem, 2vw, 1.6rem);
font-weight: 950;
line-height: 1.3;
margin-bottom: 0.5rem;
color: #000000;
}
.p-partners .p-partners-type-card__title-en {
display: block;
font-size: 0.8rem;
font-weight: 800;
font-family: "Space Mono", monospace;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 1.5rem;
letter-spacing: 0.02em;
}
.p-partners .p-partners-type-card__lead {
font-size: 1rem;
line-height: 1.7;
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 1.5rem;
}
.p-partners .p-partners-type-card__note {
font-size: 0.85rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.5);
margin: 0 0 3rem;
}
.p-partners .p-partners-type-card__sub {
font-size: 0.8rem;
font-weight: 950;
font-family: "Space Mono", monospace;
letter-spacing: 0.05em;
color: #000;
margin: 1.5rem 0 1rem;
padding: 0.5rem 1rem 0.5rem 1rem;
border-left: 3px solid #00D166;
background: rgba(0, 209, 102, 0.08);
}
.p-partners .p-partners-type-card__sub:nth-of-type(2) {
margin-top: auto;
}
.p-partners .p-partners-type-card__list {
margin: 0;
padding-left: 1.2em;
font-size: 0.95rem;
line-height: 1.8;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
@media (max-width: 768px) {
.p-partners .p-partners-type-card__list {
font-size: 1rem;
}
}
.p-partners .p-partners-steps {
padding: 7.5rem 0;
background-color: #fff;
overflow-x: hidden;
}
@media (max-width: 768px) {
.p-partners .p-partners-steps {
padding: 3rem 0;
}
}
.p-partners .p-partners-steps__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-partners .p-partners-steps__header {
margin-bottom: 3rem;
}
}
.p-partners .p-partners-steps__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
position: relative;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 1100px) {
.p-partners .p-partners-steps__list {
grid-template-columns: 1fr;
gap: 7.5rem;
max-width: 800px;
}
}
@media (max-width: 768px) {
.p-partners .p-partners-steps__list {
gap: 3rem;
}
}
.p-partners .p-partners-steps-item {
display: flex;
flex-direction: column;
text-align: center;
background: #fff;
border: 3px solid #000;
box-shadow: 6px 6px 0 #000;
border-radius: 20px;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
height: 100%;
padding: 3rem 1.5rem;
touch-action: manipulation;
}
@media (max-width: 1100px) {
.p-partners .p-partners-steps-item {
padding: 3rem;
}
}
@media (hover: hover) {
.p-partners .p-partners-steps-item:hover {
transform: translate(3px, 3px);
box-shadow: 0 0 0 #000;
background: #fafafa;
}
.p-partners .p-partners-steps-item:hover .p-partners-steps-item__num {
background: #000;
color: #fff;
transform: scale(1.1) translateX(-50%);
}
}
.p-partners .p-partners-steps-item::after {
content: "→";
position: absolute;
font-size: 1.8rem;
font-weight: 950;
color: #000;
pointer-events: none;
z-index: 10;
}
@media (min-width: 1025px) {
.p-partners .p-partners-steps-item::after {
top: 50%;
left: calc(100% + 1.5rem);
transform: translate(-50%, -50%);
}
.p-partners .p-partners-steps-item:last-child::after {
display: none;
}
}
@media (max-width: 1100px) {
.p-partners .p-partners-steps-item::after {
content: "↓";
top: calc(100% + 3.75rem);
left: 50%;
transform: translate(-50%, -50%);
}
.p-partners .p-partners-steps-item:last-child::after {
display: none;
}
}
.p-partners .p-partners-steps-item__num {
width: 56px;
height: 56px;
background: #00D166;
color: #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
font-size: 1.35rem;
font-weight: 950;
font-family: "Space Mono", monospace;
border: 4px solid #000;
box-shadow: 4px 4px 0 #000;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 5;
}
.p-partners .p-partners-steps-item__header {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.p-partners .p-partners-steps-item__title {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: 950;
color: #00D166;
line-height: 1.2;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.p-partners .p-partners-steps-item__text {
font-size: 0.95rem;
line-height: 1.7;
font-weight: 600;
color: rgba(0, 0, 0, 0.8);
margin: 0;
}
.p-partners .p-partners-cta {
padding: 10rem 0 3rem;
background-color: #FFE600;
position: relative;
overflow: hidden;
}
.p-partners .p-partners-cta::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: repeating-linear-gradient(45deg, #000, #000 10px, #FFE600 10px, #FFE600 20px);
z-index: 10;
}
@media (max-width: 1024px) {
.p-partners .p-partners-cta {
padding: 7.5rem 0;
}
}
.p-partners .p-partners-cta {
border-top: 4px solid #000000;
background-color: #00D166;
}
.p-partners .p-partners-cta::after {
background: repeating-linear-gradient(45deg, #000, #000 10px, #00D166 10px, #00D166 20px);
}
@media (max-width: 768px) {
.p-partners .p-partners-cta {
padding: 3rem 0 5rem;
}
}
.p-partners .p-partners-cta__content {
position: relative;
z-index: 10;
text-align: left;
max-width: 1200px;
margin: 0 auto;
padding: 0 2.5rem;
}
@media (max-width: 768px) {
.p-partners .p-partners-cta__content {
text-align: center;
padding: 0 1.25rem;
}
}
.p-partners .p-partners-cta__header {
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-partners .p-partners-cta__header {
margin-bottom: 3rem;
}
}
.p-partners .p-partners-cta__label {
display: block;
font-size: 1.2rem;
letter-spacing: 0.5em;
opacity: 0.4;
margin-bottom: 1.5rem;
font-family: "Space Mono", monospace;
color: #000;
}
.p-partners .p-partners-cta__title {
font-size: clamp(2.5rem, 9vw, 8rem);
font-weight: 950;
line-height: 1.1;
margin-bottom: 5rem;
letter-spacing: -0.03em;
color: #000000;
text-transform: none;
}
@media (max-width: 768px) {
.p-partners .p-partners-cta__title {
font-size: 2.2rem;
margin-bottom: 3rem;
}
}
.p-partners .p-partners-cta__text {
font-size: clamp(1.1rem, 2vw, 1.4rem);
line-height: 1.7;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 7.5rem;
font-weight: 500;
max-width: 700px;
text-align: left;
}
@media (max-width: 768px) {
.p-partners .p-partners-cta__text {
text-align: center;
margin-bottom: 5rem;
}
}
.p-partners .p-partners-cta__btn-wrap {
display: flex;
justify-content: flex-start;
}
@media (max-width: 768px) {
.p-partners .p-partners-cta__btn-wrap {
justify-content: center;
}
}
.p-partners .p-partners-cta__bg-text {
position: absolute;
bottom: -0.1em;
left: 0;
display: flex;
font-family: "Space Mono", monospace;
font-size: 24vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
line-height: 1;
letter-spacing: -0.02em;
}
.p-partners .p-partners-cta__bg-text span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.p-partners .p-partners-cta .c-button--partners {
background-color: #00D166 !important;
color: #000 !important;
border: 4px solid #000 !important;
box-shadow: 12px 12px 0 #000 !important;
}
@media (hover: hover) {
.p-partners .p-partners-cta .c-button--partners:hover {
box-shadow: 0 0 0 #000 !important;
background-color: rgb(0, 178.4, 87.0660287081) !important;
}
}
@media (max-width: 768px) {
.p-partners .p-partners-cta .c-button--partners {
box-shadow: 8px 8px 0 #000 !important;
}
}
.p-partners .c-button--partners {
padding: 1.6rem 5rem;
border-radius: 100px;
font-size: clamp(1.1rem, 2.5vw, 1.75rem);
font-weight: 950;
background-color: #00D166 !important;
color: #000 !important;
border: 4px solid #000 !important;
box-shadow: 12px 12px 0 #000 !important;
transition: all 0.4s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
white-space: nowrap;
}
@media (hover: hover) {
.p-partners .c-button--partners:hover {
transform: translate(6px, 6px);
box-shadow: 0 0 0 #000 !important;
background-color: rgb(0, 178.4, 87.0660287081) !important;
}
}
@media (max-width: 768px) {
.p-partners .c-button--partners {
padding: 1rem 1.5rem;
font-size: 1.1rem;
box-shadow: 8px 8px 0 #000 !important;
}
}
.p-profile {
background-color: #fff;
color: #000000;
overflow-x: hidden;
position: relative;
font-feature-settings: "palt";
}
.p-profile .u-reveal {
transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.p-profile::before {
content: "";
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
z-index: 9999;
}
.p-profile-hero {
position: relative;
padding-top: var(--header-height);
min-height: clamp(560px, 72svh, 780px);
display: flex;
align-items: center;
background-color: #fff;
overflow: hidden;
border-top: 4px solid #000000;
border-bottom: 4px solid #000000;
}
@media (max-width: 768px) {
.p-profile-hero {
padding-top: calc(var(--header-height) + 1rem);
padding-bottom: 1.5rem;
min-height: clamp(280px, 50svh, 420px);
}
}
.p-profile-hero::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(255, 230, 0, 0.15) 0%, transparent 70%);
z-index: 1;
pointer-events: none;
}
.p-profile-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1.5px, transparent 1.5px), linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
z-index: 0;
pointer-events: none;
}
.p-profile-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.p-profile-hero__bg-marquee {
position: absolute;
left: 0;
width: 100%;
top: 58%;
white-space: nowrap;
display: flex;
font-size: 16vw;
font-weight: 950;
color: transparent;
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.1);
pointer-events: none;
user-select: none;
z-index: 1;
letter-spacing: -0.02em;
opacity: 0.8;
}
.p-profile-hero__bg-marquee span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.p-profile-hero__shapes {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.p-profile-hero__shape {
position: absolute;
background: rgba(255, 230, 0, 0.15);
border: 2px solid rgba(0, 0, 0, 0.15);
}
.p-profile-hero__shape--star {
display: none;
}
.p-profile-hero__inner {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "content visual" "cta     visual";
gap: 0 5rem;
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
@media (max-width: 1024px) {
.p-profile-hero__inner {
grid-template-columns: 1fr;
grid-template-areas: "content" "visual" "cta";
gap: 3rem;
text-align: center;
}
}
@media (max-width: 768px) {
.p-profile-hero__inner {
gap: 1rem;
}
}
.p-profile-hero__content {
grid-area: content;
position: relative;
z-index: 30;
}
@media (max-width: 1024px) {
.p-profile-hero__content {
padding: 0 1.5rem;
}
}
.p-profile-hero__label {
font-size: 0.8rem;
font-weight: 950;
color: #fff;
background: #000000;
padding: 4px 16px;
display: inline-block;
margin-top: 1.5rem;
margin-bottom: 3rem;
box-shadow: 4px 4px 0 #FFE600;
transform: rotate(-1.5deg);
line-height: 1;
}
@media (max-width: 1024px) {
.p-profile-hero__label {
margin-top: 1.5rem;
margin-bottom: 1rem;
}
}
.p-profile-hero__title {
font-size: clamp(1.85rem, 5.2vw, 4.2rem);
line-height: 1.25;
font-weight: 950;
margin-bottom: 5rem;
letter-spacing: -0.02em;
color: #000000;
}
@media (max-width: 1024px) {
.p-profile-hero__title {
margin-bottom: 0;
line-height: 1.2;
}
}
@media (max-width: 768px) {
.p-profile-hero__title {
font-size: 1.7rem;
}
}
.p-profile-hero__visual {
grid-area: visual;
position: relative;
z-index: 20;
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.p-profile-hero__visual {
margin: 1rem 0;
}
}
.p-profile-hero__character {
position: relative;
width: 100%;
max-width: 720px;
max-height: min(880px, 85svh);
}
@media (max-width: 1024px) {
.p-profile-hero__character {
max-width: 440px;
max-height: min(620px, 70svh);
margin: 0 auto;
}
}
@media (max-width: 768px) {
.p-profile-hero__character {
max-width: 280px;
max-height: 32svh;
}
}
.p-profile-hero__character {
transform: rotate(-1deg);
}
.p-profile-hero__character img {
width: auto;
height: auto;
max-height: min(880px, 85svh);
object-fit: contain;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.05));
animation: profile-hero-float 12s ease-in-out infinite;
}
@media (max-width: 1024px) {
.p-profile-hero__character img {
max-height: min(620px, 70svh);
}
}
@media (max-width: 768px) {
.p-profile-hero__character img {
max-height: 32svh;
}
}
.p-profile-hero__cta {
grid-area: cta;
position: relative;
z-index: 30;
}
@media (max-width: 1024px) {
.p-profile-hero__cta {
padding: 0 1.5rem;
margin-top: -3rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 768px) {
.p-profile-hero__cta {
margin-top: -3rem;
margin-bottom: 0.5rem;
}
}
.p-profile-hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
font-size: 0.8rem;
font-weight: 900;
font-family: "Space Mono", monospace;
letter-spacing: 0.3em;
color: rgba(0, 0, 0, 0.3);
z-index: 40;
}
@media (max-width: 1024px) {
.p-profile-hero__scroll {
display: none;
}
}
.p-profile-hero__scroll span {
width: 2px;
height: 60px;
background: rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.p-profile-hero__scroll span::after {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: #000;
animation: scroll-line-v 2s infinite;
}
@keyframes profile-hero-float {
0%, 100% {
transform: translateY(0) rotate(-1deg);
}
50% {
transform: translateY(-20px) rotate(1deg);
}
}
.p-profile-intro {
padding: 10rem 0;
background-color: #fff;
position: relative;
overflow: hidden;
}
.p-profile-intro__decor {
position: absolute;
font-weight: 950;
color: rgba(255, 230, 0, 0.3);
pointer-events: none;
}
.p-profile-intro__decor--star {
top: 10%;
right: 10%;
font-size: 4rem;
animation: profile-hero-float 8s ease-in-out infinite;
}
.p-profile-intro::before {
content: "HELLO";
position: absolute;
top: 5%;
left: -2%;
font-size: 20vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.02);
line-height: 1;
pointer-events: none;
z-index: 0;
}
@media (max-width: 768px) {
.p-profile-intro {
padding: 3rem 0;
}
}
.p-profile-intro__inner {
position: relative;
z-index: 1;
}
.p-profile-intro__grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 5rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1024px) {
.p-profile-intro__grid {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
}
.p-profile-intro__visual {
position: relative;
display: flex;
justify-content: center;
}
.p-profile-intro__visual img {
width: 100%;
max-width: 320px;
height: auto;
filter: drop-shadow(15px 15px 0 #FFE600);
border: 3px solid #000000;
background: #fff;
padding: 1.5rem;
transform: rotate(-3deg);
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (max-width: 768px) {
.p-profile-intro__visual img {
max-width: 240px;
}
}
@media (hover: hover) {
.p-profile-intro__visual:hover img {
transform: rotate(0deg) scale(1.05);
filter: drop-shadow(20px 20px 0 #000000);
}
}
.p-profile-intro__seal {
position: absolute;
bottom: -10px;
right: 0;
background: #FF6B00;
color: #fff;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 950;
transform: rotate(15deg);
border: 2px solid #000000;
box-shadow: 4px 4px 0 #000000;
}
.p-profile-intro__content {
position: relative;
}
.p-profile-intro__title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 950;
margin-bottom: 3rem;
letter-spacing: -0.02em;
color: #000000;
line-height: 1.1;
text-align: left;
}
@media (max-width: 1024px) {
.p-profile-intro__title {
text-align: center;
}
}
.p-profile-intro__title span {
display: block;
font-size: 0.35em;
color: #FFE600;
background: #000000;
padding: 2px 8px;
width: fit-content;
letter-spacing: 0.2em;
margin-bottom: 12px;
text-transform: uppercase;
transform: rotate(-1.5deg);
}
@media (max-width: 1024px) {
.p-profile-intro__title span {
margin-inline: auto;
}
}
.p-profile-intro__body {
font-size: 1.15rem;
line-height: 2.2;
color: rgba(0, 0, 0, 0.85);
text-align: left;
position: relative;
background: #fff;
border: 2px solid #000000;
padding: 5rem 3rem 3rem;
box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.05);
}
.p-profile-intro__body p {
margin-bottom: 1.5rem;
}
.p-profile-intro__body p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.p-profile-intro__body {
font-size: 1.05rem;
line-height: 2;
padding: 3rem 1.5rem;
}
}
.p-profile-intro__tape {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
width: 120px;
height: 35px;
background: rgba(255, 230, 0, 0.6);
border-left: 2px dotted rgba(0, 0, 0, 0.1);
border-right: 2px dotted rgba(0, 0, 0, 0.1);
z-index: 10;
}
.p-profile-story {
padding: 10rem 0;
background-color: #fff;
position: relative;
overflow: hidden;
}
.p-profile-story::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
z-index: 0;
}
.p-profile-story::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
}
@media (max-width: 768px) {
.p-profile-story {
padding: 3rem 0;
}
}
.p-profile-story__header {
text-align: center;
margin-bottom: 5rem;
position: relative;
z-index: 1;
}
.p-profile-story__header .u-section-title__inner {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 950;
color: #000000;
display: block;
}
.p-profile-story__header .u-section-title__sub {
font-size: 0.9rem;
background: #000000;
color: #fff;
padding: 2px 8px;
display: inline-block;
margin-top: 8px;
transform: rotate(-1.5deg);
letter-spacing: 0.05em;
width: fit-content;
max-width: 90%;
}
.p-profile-story__timeline {
max-width: 1200px;
margin: 0 auto;
position: relative;
padding-bottom: 5rem;
}
.p-profile-story__line {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 100%;
background: #000000;
z-index: 0;
}
@media (max-width: 1024px) {
.p-profile-story__line {
left: 20px;
transform: none;
}
}
.p-profile-story__line::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: #000000;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.p-profile-story__item {
position: relative;
margin-bottom: 7.5rem;
width: 50%;
z-index: 1;
}
@media (max-width: 1024px) {
.p-profile-story__item {
width: 100%;
padding-left: 50px;
margin-bottom: 5rem;
}
}
@media (max-width: 768px) {
.p-profile-story__item {
margin-bottom: 3rem;
}
}
.p-profile-story__item:nth-child(even) {
margin-left: auto;
padding-left: 5rem;
}
@media (max-width: 1024px) {
.p-profile-story__item:nth-child(even) {
margin-left: 0;
padding-left: 50px;
}
}
.p-profile-story__item:nth-child(even) .p-profile-story__item-inner {
transform: rotate(1.5deg);
}
.p-profile-story__item:nth-child(odd) {
padding-right: 5rem;
}
@media (max-width: 1024px) {
.p-profile-story__item:nth-child(odd) {
padding-right: 0;
}
}
.p-profile-story__item:nth-child(odd) .p-profile-story__item-inner {
transform: rotate(-1.5deg);
}
.p-profile-story__item-inner {
background: #fff;
border: 4px solid #000000;
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.05);
padding: 3rem;
position: relative;
transition: all 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (max-width: 768px) {
.p-profile-story__item-inner {
padding: 1.5rem;
}
}
@media (hover: hover) {
.p-profile-story__item-inner:hover {
transform: rotate(0deg) scale(1.02);
box-shadow: 16px 16px 0 #FFE600;
z-index: 10;
}
}
.p-profile-story__item-num {
position: absolute;
top: -20px;
left: -10px;
font-size: 2.5rem;
font-weight: 950;
background: #FFE600;
color: #000000;
border: 2px solid #000000;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 4px 4px 0 #000000;
z-index: 2;
}
.p-profile-story__item-visual {
margin-bottom: 1.5rem;
border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
padding-bottom: 1.5rem;
display: flex;
justify-content: center;
}
.p-profile-story__item-visual img {
height: 120px;
width: auto;
filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.05));
}
@media (max-width: 768px) {
.p-profile-story__item-visual img {
height: 90px;
}
}
.p-profile-story__item-title {
font-size: 1.3rem;
font-weight: 950;
margin-bottom: 1rem;
color: #000000;
}
.p-profile-story__item-text {
font-size: 1.05rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.8);
}
.p-profile-story__item-text p {
margin-bottom: 0;
}
.p-profile-story__item-stamp {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 0.8rem;
font-weight: 950;
background: #FF6B00;
color: #fff;
padding: 2px 8px;
transform: rotate(-10deg);
box-shadow: 3px 3px 0 #000000;
}
.p-profile-mission {
padding: 0;
background-color: #fff;
position: relative;
overflow: hidden;
}
.p-profile-mission__inner {
display: flex;
min-height: 500px;
}
@media (max-width: 1024px) {
.p-profile-mission__inner {
flex-direction: column;
min-height: auto;
}
}
.p-profile-mission__step {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 7.5rem 5rem;
position: relative;
text-align: center;
}
@media (max-width: 1024px) {
.p-profile-mission__step {
padding: 5rem 1.5rem;
}
}
@media (max-width: 768px) {
.p-profile-mission__step {
padding: 3rem 1rem;
}
}
.p-profile-mission__step--anxiety {
background-color: #222;
color: #fff;
}
.p-profile-mission__step--anxiety::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.1;
pointer-events: none;
}
.p-profile-mission__step--hope {
background-color: #FFE600;
color: #000000;
}
.p-profile-mission__visual {
margin-bottom: 3rem;
position: relative;
z-index: 1;
}
.p-profile-mission__visual img {
width: 100%;
height: auto;
object-fit: contain;
}
.p-profile-mission__step--anxiety .p-profile-mission__visual img {
max-width: 180px;
filter: grayscale(1) opacity(0.6);
}
.p-profile-mission__step--hope .p-profile-mission__visual img {
max-width: 240px;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.1));
animation: hero-award-float 10s ease-in-out infinite;
}
.p-profile-mission__content {
position: relative;
z-index: 1;
max-width: 480px;
}
.p-profile-mission__title {
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 950;
margin-bottom: 1.5rem;
line-height: 1.3;
letter-spacing: -0.01em;
}
.p-profile-mission__step--anxiety .p-profile-mission__title {
color: #888;
}
.p-profile-mission__text {
font-size: 1.1rem;
line-height: 1.8;
opacity: 0.9;
font-weight: 700;
}
@media (max-width: 768px) {
.p-profile-mission__text {
font-size: 1rem;
}
}
.p-profile-mission__arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 70px;
height: 70px;
background: #000;
border: 4px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1024px) {
.p-profile-mission__arrow {
position: relative;
top: auto;
left: 50%;
bottom: auto;
margin: -35px 0 -35px -35px;
transform: rotate(90deg);
}
}
@media (max-width: 768px) {
.p-profile-mission__arrow {
width: 60px;
height: 60px;
margin: -30px 0 -30px -30px;
}
}
.p-profile-mission__arrow-inner {
color: #fff;
font-weight: 950;
font-size: 0.9rem;
letter-spacing: 0.05em;
animation: profile-arrow-pulse 2s infinite;
transform: rotate(-90deg);
}
@keyframes profile-arrow-pulse {
0%, 100% {
transform: scale(1) rotate(-90deg);
opacity: 1;
}
50% {
transform: scale(1.1) rotate(-90deg);
opacity: 0.8;
}
}
.p-profile-why {
padding: 10rem 0;
background-color: #faf9f6;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.p-profile-why {
padding: 3rem 0 1.5rem;
}
}
.p-profile-why__decor {
position: absolute;
pointer-events: none;
z-index: 0;
}
.p-profile-why__decor--circle {
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: rgba(255, 230, 0, 0.1);
border-radius: 50%;
}
.p-profile-why__inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-areas: "header header" "visual bubble";
grid-template-columns: 300px 1fr;
gap: 3rem 5rem;
align-items: center;
}
@media (max-width: 1024px) {
.p-profile-why__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
}
}
.p-profile-why__header {
grid-area: header;
width: 100%;
}
@media (max-width: 1024px) {
.p-profile-why__header {
order: 0;
margin-bottom: 1.5rem;
}
}
.p-profile-why__visual {
grid-area: visual;
flex-shrink: 0;
width: 300px;
position: relative;
}
.p-profile-why__visual img {
width: 100%;
height: auto;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.05));
animation: hero-award-float 8s ease-in-out infinite;
}
@media (max-width: 1024px) {
.p-profile-why__visual {
width: 200px;
order: 1;
margin-bottom: 5rem;
}
}
.p-profile-why__bubble {
grid-area: bubble;
background: #fff;
border: 3px solid #000000;
box-shadow: 10px 10px 0 #000000;
padding: 3rem;
border-radius: 30px;
position: relative;
text-align: left;
font-size: 1.2rem;
line-height: 2;
}
@media (max-width: 1024px) {
.p-profile-why__bubble {
order: 2;
width: 100%;
}
}
.p-profile-why__bubble::before, .p-profile-why__bubble::after {
content: "";
position: absolute;
border-style: solid;
}
.p-profile-why__bubble::before {
top: 40px;
left: -20px;
border-width: 15px 20px 15px 0;
border-color: transparent #000000 transparent transparent;
}
@media (max-width: 1024px) {
.p-profile-why__bubble::before {
top: -20px;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
}
.p-profile-why__bubble::after {
top: 40px;
left: -14px;
border-width: 15px 20px 15px 0;
border-color: transparent #fff transparent transparent;
}
@media (max-width: 1024px) {
.p-profile-why__bubble::after {
top: -14px;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
}
.p-profile-why__bubble p {
margin-bottom: 1.5rem;
}
.p-profile-why__bubble p:last-child {
margin-bottom: 0;
}
.p-profile-why__bubble strong {
background: linear-gradient(transparent 70%, rgba(255, 230, 0, 0.8) 0);
padding: 0 4px;
}
@media (max-width: 768px) {
.p-profile-why__bubble {
font-size: 1rem;
padding: 1.5rem;
}
}
.p-profile-why__title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 950;
margin-bottom: 3rem;
letter-spacing: -0.02em;
color: #000000;
text-align: left;
}
@media (max-width: 1024px) {
.p-profile-why__title {
text-align: center;
}
}
.p-profile-why__title span {
display: block;
font-size: 0.35em;
color: #fff;
background: #FF6B00;
padding: 2px 10px;
width: fit-content;
letter-spacing: 0.2em;
margin-bottom: 12px;
text-transform: uppercase;
transform: rotate(-2deg);
}
@media (max-width: 1024px) {
.p-profile-why__title span {
margin-inline: auto;
}
}
.p-profile-why__decor-char {
position: absolute;
bottom: -40px;
right: 0;
width: 120px;
opacity: 1;
transform: rotate(-10deg);
pointer-events: none;
}
@media (max-width: 1024px) {
.p-profile-why__decor-char {
display: none;
}
}
.p-profile-business {
padding: 10rem 0;
background-color: #f8f8f8;
}
@media (max-width: 768px) {
.p-profile-business {
padding: 3rem 0 5rem;
}
}
.p-profile-business__header {
text-align: center;
margin-bottom: 1.5rem;
}
.p-profile-business__header .u-section-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 950;
color: #000000;
letter-spacing: -0.02em;
}
.p-profile-business__table-wrap {
max-width: 1200px;
margin: 0 auto;
background: #fff;
border: 4px solid #000000;
box-shadow: 12px 12px 0 #000000;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.p-profile-business__table-wrap {
box-shadow: 8px 8px 0 #000000;
margin: 0 0.5rem;
}
}
.p-profile-business__table {
width: 100%;
border-collapse: collapse;
}
.p-profile-business__table th, .p-profile-business__table td {
padding: 1.5rem 3rem;
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.p-profile-business__table th, .p-profile-business__table td {
padding: 1rem 1.5rem;
}
}
.p-profile-business__table th {
width: 30%;
font-weight: 950;
color: rgba(0, 0, 0, 0.7);
font-size: 0.9rem;
background: #f9f9f9;
letter-spacing: 0.05em;
border-right: 1px solid rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
.p-profile-business__table th {
width: 35%;
font-size: 0.9rem;
}
}
.p-profile-business__table td {
font-weight: 700;
color: #000000;
line-height: 1.6;
background: #fff;
}
@media (max-width: 768px) {
.p-profile-business__table td {
font-size: 0.95rem;
}
}
.p-profile-business__table td small {
display: block;
margin-top: 8px;
opacity: 0.6;
font-weight: 500;
}
.p-profile-business__table tr:last-child td,
.p-profile-business__table tr:last-child th {
border-bottom: none;
}
.p-profile-business__table-group th {
background: #eee !important;
color: #000000 !important;
font-size: 1.05rem;
padding: 14px 24px !important;
letter-spacing: 0.15em;
width: 100%;
border-top: 3px solid #000000 !important;
border-bottom: 2px solid #000000 !important;
border-right: none !important;
text-transform: none;
position: relative;
}
.p-profile-business__table-group th::after {
content: "";
position: absolute;
left: 20px;
bottom: 12px;
width: 100px;
height: 8px;
background: rgba(255, 230, 0, 0.5);
z-index: -1;
}
.p-profile-business__stamp {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 0.7rem;
font-weight: 950;
color: rgba(255, 107, 0, 0.4);
border: 2px solid rgba(255, 107, 0, 0.4);
padding: 4px 10px;
border-radius: 4px;
transform: rotate(-15deg);
pointer-events: none;
user-select: none;
}
@media (max-width: 768px) {
.p-profile-business__stamp {
bottom: 10px;
right: 10px;
font-size: 0.6rem;
}
}
.p-profile-cta {
padding: 10rem 0;
background-color: #FFE600;
position: relative;
overflow: hidden;
min-height: 500px;
display: flex;
align-items: center;
}
@media (max-width: 1024px) {
.p-profile-cta {
padding: 7.5rem 0;
min-height: auto;
text-align: center;
}
}
@media (max-width: 768px) {
.p-profile-cta {
padding: 3rem 0;
}
}
.p-profile-cta__inner {
max-width: 1400px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr 380px;
align-items: center;
gap: 5rem;
}
@media (max-width: 1024px) {
.p-profile-cta__inner {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
}
@media (max-width: 1024px) {
.p-profile-cta__content {
order: 1;
width: 100%;
padding: 0 1.5rem;
}
}
.p-profile-cta__title {
font-size: clamp(2rem, 6vw, 4.5rem);
font-weight: 950;
line-height: 1.1;
margin-bottom: 3rem;
color: #000000;
}
@media (max-width: 768px) {
.p-profile-cta__title {
font-size: 1.7rem;
line-height: 1.2;
width: 100%;
}
}
.p-profile-cta__title-sub {
display: inline-block;
background: #000000;
color: #fff;
padding: 4px 20px;
transform: rotate(-1.5deg);
margin-top: 10px;
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.p-profile-cta__title-sub {
padding: 4px 15px;
font-size: 1.4rem;
}
}
.p-profile-cta__text {
font-size: 1.25rem;
line-height: 1.8;
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-profile-cta__text {
font-size: 1rem;
margin-bottom: 3rem;
}
}
.p-profile-cta__btn-wrap .c-button {
padding: 20px 60px;
font-size: 1.2rem;
box-shadow: 12px 12px 0 #000000;
}
@media (max-width: 768px) {
.p-profile-cta__btn-wrap .c-button {
padding: 16px 40px;
font-size: 1.1rem;
box-shadow: 8px 8px 0 #000000;
}
}
.p-profile-cta__visual {
position: relative;
display: flex;
justify-content: center;
width: 100%;
}
@media (max-width: 1024px) {
.p-profile-cta__visual {
order: 0;
margin-bottom: 3rem;
}
}
.p-profile-cta__visual img {
width: 100%;
max-width: 380px;
height: auto;
filter: drop-shadow(15px 15px 0 rgba(0, 0, 0, 0.05));
animation: hero-award-float 10s ease-in-out infinite;
}
@media (max-width: 1024px) {
.p-profile-cta__visual img {
max-width: 240px;
}
}
.p-profile-cta__bg-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-size: 15vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
.p-contact {
background-color: #fff;
color: #000000;
}
.p-contact-hero {
padding-top: calc(var(--header-height) + 80px);
padding-bottom: 7.5rem;
min-height: auto;
background-color: #fff;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.p-contact-hero {
padding-top: calc(var(--header-height) + 40px);
padding-bottom: 5rem;
}
}
.p-contact-hero__inner {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
.p-contact-hero__content {
margin-bottom: 3rem;
}
.p-contact-hero__label {
font-size: 0.8rem;
font-weight: 950;
background: #000000;
color: #fff;
padding: 4px 12px;
display: inline-block;
margin-bottom: 1.5rem;
transform: rotate(-1.5deg);
}
.p-contact-hero__title {
font-size: clamp(1.8rem, 5vw, 3.5rem);
font-weight: 950;
line-height: 1.3;
color: #000000;
}
@media (max-width: 768px) {
.p-contact-hero__title {
font-size: 1.6rem;
}
}
.p-contact-hero__visual {
width: 100%;
display: flex;
justify-content: center;
}
.p-contact-hero__character {
width: 100%;
max-width: 340px;
position: relative;
}
.p-contact-hero__character img {
width: 100%;
height: auto;
filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.05));
animation: hero-award-float 12s ease-in-out infinite;
}
@media (max-width: 768px) {
.p-contact-hero__character {
max-width: 240px;
}
}
.p-contact-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.p-contact-hero__bg-marquee {
position: absolute;
left: 0;
width: 100%;
top: 58%;
white-space: nowrap;
display: flex;
font-size: 16vw;
font-weight: 950;
color: transparent;
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.08);
pointer-events: none;
user-select: none;
z-index: 1;
letter-spacing: -0.02em;
opacity: 0.8;
}
.p-contact-hero__bg-marquee span {
display: inline-block;
animation: marquee-scroll 160s linear infinite;
}
.p-contact-hero__shapes {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.p-contact-hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 16px;
font-size: 0.8rem;
font-weight: 900;
font-family: "Space Mono", monospace;
letter-spacing: 0.3em;
color: rgba(0, 0, 0, 0.3);
z-index: 40;
}
@media (max-width: 1024px) {
.p-contact-hero__scroll {
display: none;
}
}
.p-contact-hero__scroll span {
width: 2px;
height: 60px;
background: rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.p-contact-hero__scroll span::after {
content: "";
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: #000;
animation: scroll-line-v 2s infinite;
}
.p-contact-main {
padding: 7.5rem 0;
position: relative;
}
@media (max-width: 768px) {
.p-contact-main {
padding: 3rem 0;
}
}
.p-contact-main__inner {
max-width: 800px;
margin: 0 auto;
}
.p-contact-main__lead {
text-align: center;
margin-bottom: 5rem;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.8;
color: rgba(0, 0, 0, 0.85);
}
@media (max-width: 768px) {
.p-contact-main__lead {
font-size: 1.05rem;
padding: 0 1.5rem;
}
}
.p-contact-main__form-wrap {
background: #fff;
border: 3px solid #000000;
box-shadow: 12px 12px 0 #000000;
padding: 7.5rem;
border-radius: 4px;
}
@media (max-width: 768px) {
.p-contact-main__form-wrap {
padding: 5rem 1.5rem;
margin: 0 0.5rem;
box-shadow: 8px 8px 0 #000000;
}
}
.p-contact-main__form-wrap .wpcf7-form-control-wrap {
display: block;
margin-bottom: 0;
}
.p-contact-main__form-wrap .wpcf7-not-valid-tip {
color: #ff0000;
font-size: 0.85rem;
font-weight: 700;
margin-top: 5px;
}
.p-contact-main__form-wrap .wpcf7-response-output {
margin: 20px 0 0;
padding: 15px;
border: 2px solid #000000 !important;
font-weight: 700;
border-radius: 4px;
}
.p-contact-form__item {
margin-bottom: 1.75rem;
}
.p-contact-form__item:last-child {
margin-bottom: 0;
}
.p-contact-form__label + br {
display: none;
}
.p-contact-form__label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 950;
font-size: 0.95rem;
color: #000000;
margin-bottom: 10px;
}
.p-contact-form__label span {
font-size: 0.65rem;
font-weight: 700;
color: #fff;
background: #c00;
padding: 2px 6px;
border-radius: 2px;
letter-spacing: 0.05em;
}
.p-contact-form input[type=text],
.p-contact-form input[type=email],
.p-contact-form input[type=tel],
.p-contact-form select,
.p-contact-form textarea {
width: 100%;
padding: 14px 16px;
border: 2px solid #000000;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: #000000;
background: #f8f8f8;
border-radius: 4px;
transition: border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1), background 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-contact-form input[type=text]:focus-visible,
.p-contact-form input[type=email]:focus-visible,
.p-contact-form input[type=tel]:focus-visible,
.p-contact-form select:focus-visible,
.p-contact-form textarea:focus-visible {
outline: none;
border-color: #FFE600;
background: #fff;
box-shadow: 4px 4px 0 #000000;
}
.p-contact-form input[type=text]::placeholder,
.p-contact-form input[type=email]::placeholder,
.p-contact-form input[type=tel]::placeholder,
.p-contact-form select::placeholder,
.p-contact-form textarea::placeholder {
color: rgba(0, 0, 0, 0.45);
}
@media (max-width: 768px) {
.p-contact-form input[type=text],
.p-contact-form input[type=email],
.p-contact-form input[type=tel],
.p-contact-form select,
.p-contact-form textarea {
font-size: 1.05rem;
padding: 16px 18px;
min-height: 2.75rem;
}
}
.p-contact-form select {
padding-right: 2.5rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
color: #000000;
-webkit-text-fill-color: #000000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.p-contact-form textarea {
min-height: 160px;
resize: vertical;
}
.p-contact-form__policy {
text-align: center;
margin: 5rem 0 3rem;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
}
.p-contact-form__policy label {
cursor: pointer;
}
.p-contact-form__policy a {
text-decoration: underline;
font-weight: 950;
}
.p-contact-form__policy a:hover {
color: #FFE600;
}
.p-contact-form__policy input {
width: 18px;
height: 18px;
vertical-align: middle;
margin-right: 8px;
}
.p-contact-form__submit {
text-align: center;
margin-top: 0.5rem;
}
.p-contact-form__submit .c-button {
display: block;
width: 100%;
max-width: 360px;
margin-left: auto;
margin-right: auto;
padding: 18px;
font-size: 1.15rem;
cursor: pointer;
min-height: 2.75rem;
}
@media (max-width: 768px) {
.p-contact-form__submit .c-button {
padding: 16px 20px;
min-height: 3rem;
}
}
.p-contact-form__submit .c-button:disabled {
cursor: not-allowed;
background-color: #e5e5e5 !important;
border-color: rgba(0, 0, 0, 0.25) !important;
color: rgba(0, 0, 0, 0.5) !important;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08) !important;
opacity: 1;
transition: none;
}
.p-contact-form__submit .c-button:disabled:hover {
transform: none;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08) !important;
}
.p-contact-faq {
padding: 7.5rem 0 10rem;
background-color: #f8f8f8;
}
@media (max-width: 768px) {
.p-contact-faq {
padding: 3rem 0 5rem;
}
}
.p-contact-faq__header {
text-align: center;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-contact-faq__header {
margin-bottom: 3rem;
}
}
.p-contact-faq__list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (max-width: 768px) {
.p-contact-faq__list {
gap: 1rem;
}
}
.p-contact-faq__item {
background: #fff;
border: 2px solid #000000;
padding: 3rem;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
.p-contact-faq__item {
padding: 1.5rem;
margin: 0 1rem;
border-width: 2px;
}
}
.p-contact-faq__q {
font-weight: 950;
font-size: 1.1rem;
margin-bottom: 10px;
display: flex;
gap: 12px;
line-height: 1.5;
}
.p-contact-faq__q span {
color: #FFE600;
font-size: 1.4rem;
line-height: 1;
}
@media (max-width: 768px) {
.p-contact-faq__q {
font-size: 1.1rem;
}
}
.p-contact-faq__a {
font-size: 1rem;
line-height: 1.7;
color: rgba(0, 0, 0, 0.8);
padding-left: 30px;
}
@media (max-width: 768px) {
.p-contact-faq__a {
padding-left: 0;
margin-top: 8px;
font-size: 1.05rem;
}
}
.p-thanks-hero {
min-height: 80svh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background-color: #FFE600;
}
@media (max-width: 1024px) {
.p-thanks-hero {
padding: 7.5rem 0;
}
}
@media (max-width: 768px) {
.p-thanks-hero {
min-height: 60svh;
padding: 3rem 0;
}
}
.p-thanks-hero__inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
align-items: center;
gap: 7.5rem;
position: relative;
z-index: 10;
}
@media (max-width: 1024px) {
.p-thanks-hero__inner {
grid-template-columns: 1fr;
text-align: center;
gap: 5rem;
}
}
.p-thanks-hero__visual {
display: flex;
justify-content: center;
}
.p-thanks-hero__visual img {
width: 100%;
max-width: 400px;
height: auto;
filter: drop-shadow(20px 20px 0 rgba(0, 0, 0, 0.1));
animation: hero-award-float 10s ease-in-out infinite;
}
@media (max-width: 1024px) {
.p-thanks-hero__content {
padding: 0 1.5rem;
}
}
.p-thanks-hero__title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 950;
line-height: 1.3;
margin-bottom: 3rem;
}
@media (max-width: 768px) {
.p-thanks-hero__title {
line-height: 1.4;
}
}
.p-thanks-hero__text {
font-size: 1.2rem;
line-height: 1.8;
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-thanks-hero__text {
font-size: clamp(1.05rem, 2.5vw, 1.2rem);
}
}
.p-thanks-hero__bg-text {
position: absolute;
bottom: 5%;
left: 0;
width: 100%;
font-size: 12vw;
font-weight: 950;
color: rgba(0, 0, 0, 0.03);
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
@media (max-width: 768px) {
.p-thanks-hero__bg-text {
font-size: 8vw;
}
}
.p-privacy,
.p-terms {
background-color: #fff;
padding-bottom: 10rem;
}
.p-privacy__header,
.p-terms__header {
text-align: center;
padding: 10rem 0 5rem;
margin-bottom: 5rem;
}
@media (max-width: 768px) {
.p-privacy__header,
.p-terms__header {
padding: 7.5rem 0 1.5rem;
}
}
.p-privacy__title,
.p-terms__title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 950;
color: #000000;
letter-spacing: 0.05em;
position: relative;
display: inline-block;
}
.p-privacy__title::after,
.p-terms__title::after {
content: "";
display: block;
width: 60px;
height: 6px;
background: #FFE600;
margin: 15px auto 0;
}
.p-privacy__content,
.p-terms__content {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 768px) {
.p-privacy__content,
.p-terms__content {
padding: 0 1rem;
}
}
.p-privacy__intro,
.p-terms__intro {
font-size: 1.1rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 5rem;
text-align: justify;
}
.p-privacy__table,
.p-terms__table {
width: 100%;
border-collapse: collapse;
border: 3px solid #000000;
box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.05);
background: #fff;
}
@media (max-width: 768px) {
.p-privacy__table,
.p-terms__table {
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.05);
}
}
.p-privacy__table th, .p-privacy__table td,
.p-terms__table th,
.p-terms__table td {
padding: 3rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-align: left;
}
@media (max-width: 768px) {
.p-privacy__table th, .p-privacy__table td,
.p-terms__table th,
.p-terms__table td {
padding: 1.5rem;
}
}
.p-privacy__table th,
.p-terms__table th {
width: 280px;
background: #f9f9f9;
font-weight: 950;
font-size: 1rem;
line-height: 1.5;
color: #000000;
border-right: 2px solid #000000;
}
@media (max-width: 768px) {
.p-privacy__table th,
.p-terms__table th {
display: block;
width: 100%;
background: #eee;
border-right: none;
border-bottom: 2px solid #000000;
}
}
.p-privacy__table td,
.p-terms__table td {
font-size: 1.05rem;
line-height: 1.8;
color: rgba(0, 0, 0, 0.8);
}
@media (max-width: 768px) {
.p-privacy__table td,
.p-terms__table td {
display: block;
width: 100%;
font-size: 1rem;
}
}
.p-privacy__table td ul,
.p-terms__table td ul {
margin-top: 10px;
list-style: disc;
padding-left: 20px;
}
.p-privacy__table td ul li,
.p-terms__table td ul li {
margin-bottom: 5px;
}
.p-privacy__table td ul li:last-child,
.p-terms__table td ul li:last-child {
margin-bottom: 0;
}
.p-privacy__table tr:last-child th,
.p-privacy__table tr:last-child td,
.p-terms__table tr:last-child th,
.p-terms__table tr:last-child td {
border-bottom: none;
}
.p-privacy__footer,
.p-terms__footer {
margin-top: 5rem;
text-align: right;
font-weight: 700;
color: rgba(0, 0, 0, 0.5);
}
.p-404 {
min-height: 60svh;
display: flex;
align-items: center;
justify-content: center;
padding: 5rem 1.5rem;
}
.p-404-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.p-404-content__inner {
position: relative;
}
.p-404-content .u-page-title {
margin-bottom: 1rem;
}
.p-404-content > .p-404-content__inner > p {
margin-bottom: 0.5rem;
font-size: 1.1rem;
color: rgba(0, 0, 0, 0.8);
}
.p-404-content__playful {
margin-bottom: 1.5rem;
font-size: 0.95rem;
color: rgba(0, 0, 0, 0.6);
font-style: italic;
}
.p-404-content__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 1.5rem;
font-family: "Space Mono", monospace;
font-size: 2.5rem;
font-weight: 900;
color: #FFE600;
background: #000000;
border-radius: 50%;
border: 4px solid #000000;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (prefers-reduced-motion: no-preference) {
.p-404-content__icon {
animation: p-404-icon-float 3s ease-in-out infinite;
}
}
@keyframes p-404-icon-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.p-404-nav {
margin-top: 3rem;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}