*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body {
background: var(--hundred-bg);
color: var(--hundred-text);
font-family: 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
font-weight: 400;
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
body.js { cursor: none; }
@media (hover: none) { body.js { cursor: auto; } }
img, video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
button {
background: transparent;
border: none;
color: inherit;
font: inherit;
cursor: pointer;
padding: 0;
}
input, textarea, select {
font: inherit;
color: inherit;
}
ul, ol { list-style: none; }
.screen-reader-text {
position: absolute !important;
clip-path: inset(50%);
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
.screen-reader-text:focus {
clip-path: none;
clip: auto;
width: auto;
height: auto;
padding: 8px 16px;
background: var(--hundred-accent);
color: var(--hundred-bg);
z-index: 100000;
}
.skip-link {
position: absolute;
top: -100px;
left: 0;
background: var(--hundred-accent);
color: var(--hundred-bg);
padding: 12px 24px;
z-index: 100000;
}
.skip-link:focus { top: 0; } .cursor {
position: fixed;
top: 0; left: 0;
width: 24px;
height: 24px;
border: 1px solid var(--hundred-text);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 9999;
mix-blend-mode: difference;
transition: width 0.25s ease, height 0.25s ease, background 0.25s ease;
will-change: transform;
}
.cursor.hover {
width: 60px;
height: 60px;
background: var(--hundred-accent);
border-color: var(--hundred-accent);
mix-blend-mode: normal;
}
html.no-js .cursor { display: none; }
@media (hover: none) { .cursor { display: none; } } .hundred-particles-bg {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0.55;
}
html.no-js .hundred-particles-bg { display: none; } .site-header {
position: fixed;
top: 0; left: 0;
width: 100%;
padding: 24px clamp(24px, 5vw, 80px);
z-index: 100;
}
.site-header__inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.site-header__logo-text {
font-family: 'Inter', system-ui, sans-serif;
font-size: 15px;
font-weight: 900;
letter-spacing: 0.12em;
color: var(--hundred-text);
text-decoration: none;
}
.site-header__logo-text em {
color: var(--hundred-accent);
font-style: normal;
}
.site-header .custom-logo-link img {
max-height: 32px;
width: auto;
}
.site-nav__list {
display: flex;
gap: 28px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__list a {
color: var(--hundred-muted);
transition: color 0.3s ease;
position: relative;
}
.site-nav__list a:hover { color: var(--hundred-accent); }
.site-nav__list .current-menu-item > a,
.site-nav__list a.current {
color: var(--hundred-text);
}
.site-nav__list .current-menu-item > a::before,
.site-nav__list a.current::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: var(--hundred-accent);
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
.site-nav__toggle {
display: none;
width: 40px;
height: 40px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.site-nav__toggle span {
display: block;
width: 24px;
height: 1px;
background: var(--hundred-text);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
.site-nav { display: none; }
.site-nav__toggle { display: flex; }
} .site-menu-fullscreen {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100vh;
background: var(--hundred-bg);
z-index: 90;
display: flex;
align-items: center;
padding: 100px clamp(24px, 5vw, 80px) 40px;
transform: translateY(-100%);
transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1);
overflow-y: auto;
}
.site-menu-fullscreen.open {
transform: translateY(0);
}
.site-menu-fullscreen__inner {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
gap: 40px;
}
.site-menu-fullscreen__list {
display: flex;
flex-direction: column;
gap: 20px;
font-family: 'Inter', system-ui, sans-serif;
font-size: clamp(40px, 8vw, 96px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
padding: 0;
list-style: none;
}
.site-menu-fullscreen__list a {
color: var(--hundred-text);
display: flex;
align-items: baseline;
gap: 24px;
transition: color 0.3s ease;
}
.site-menu-fullscreen__list a:hover { color: var(--hundred-accent); }
.site-menu-fullscreen__list span {
font-size: 14px;
font-weight: 500;
color: var(--hundred-muted);
letter-spacing: 0.2em;
}
.site-menu-fullscreen__meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding-top: 40px;
border-top: 1px solid var(--hundred-line);
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
color: var(--hundred-muted);
line-height: 1.7;
}
.site-menu-fullscreen__label {
color: var(--hundred-accent);
font-weight: 700;
letter-spacing: 0.2em;
margin-bottom: 8px;
text-transform: uppercase;
}
.site-menu-fullscreen__meta address { font-style: normal; }
.site-menu-fullscreen__meta a:hover { color: var(--hundred-accent); }
@media (max-width: 640px) {
.site-menu-fullscreen__meta { grid-template-columns: 1fr; gap: 24px; }
} .site-footer {
position: relative;
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
padding: 100px clamp(24px, 5vw, 80px) 40px;
z-index: 1;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
color: var(--hundred-muted);
line-height: 1.8;
}
.site-footer__inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 1px solid var(--hundred-line);
}
.site-footer__logo {
font-size: 24px;
font-weight: 900;
color: var(--hundred-text);
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.site-footer__logo em {
color: var(--hundred-accent);
font-style: normal;
}
.site-footer__tagline {
font-family: 'Noto Sans JP', sans-serif;
letter-spacing: 0.2em;
margin-bottom: 20px;
}
.site-footer__address {
font-style: normal;
font-size: 11px;
line-height: 1.8;
}
.site-footer__nav-label {
color: var(--hundred-accent);
font-weight: 700;
letter-spacing: 0.2em;
margin-bottom: 16px;
text-transform: uppercase;
font-size: 10px;
}
.site-footer__nav,
.site-footer__sns,
.site-footer__contact {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.site-footer__nav a:hover,
.site-footer__sns a:hover,
.site-footer__contact a:hover {
color: var(--hundred-accent);
}
.site-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: 10px;
}
@media (max-width: 900px) {
.site-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 640px) {
.site-footer__inner { grid-template-columns: 1fr; }
.site-footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
} .page-header {
padding: 200px clamp(24px, 5vw, 80px) 60px;
position: relative;
z-index: 1;
}
.page-header__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 40px;
}
.page-header__num { color: var(--hundred-accent); font-weight: 700; }
.page-header__title {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 900;
font-size: clamp(48px, 10vw, 180px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
padding-bottom: 40px;
border-bottom: 1px solid var(--hundred-line);
}
.page-content {
padding: 60px clamp(24px, 5vw, 80px) 200px;
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.page-content p {
margin-bottom: 24px;
line-height: 1.9;
color: var(--hundred-text);
}
.page-content h2 {
font-family: 'Inter', system-ui, sans-serif;
font-size: clamp(24px, 3vw, 40px);
font-weight: 900;
letter-spacing: -0.02em;
margin: 60px 0 24px;
color: var(--hundred-text);
}
.page-content h3 {
font-size: 20px;
font-weight: 700;
margin: 40px 0 16px;
color: var(--hundred-text);
} .fade-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.in {
opacity: 1;
transform: translateY(0);
}
.fade-up.d1 { transition-delay: 0.10s; }
.fade-up.d2 { transition-delay: 0.20s; }
.fade-up.d3 { transition-delay: 0.30s; }
.fade-up.d4 { transition-delay: 0.40s; }
.line-draw { position: relative; padding-top: 24px; }
.line-draw::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 1px;
background: var(--hundred-line);
transform: scaleX(0);
transform-origin: left;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-draw.in::before { transform: scaleX(1); }
html.no-js .fade-up { opacity: 1; transform: none; }
html.no-js .line-draw::before { transform: scaleX(1); } .tag {
display: inline-block;
padding: 4px 12px;
border: 1px solid var(--hundred-line);
border-radius: 100px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
letter-spacing: 0.15em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-right: 6px;
margin-bottom: 6px;
}.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 16px 32px;
border: 1px solid var(--hundred-line);
color: var(--hundred-text);
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
text-decoration: none;
background: transparent;
transition: all 0.3s ease;
cursor: pointer;
}
.btn:hover {
background: var(--hundred-accent);
color: var(--hundred-bg);
border-color: var(--hundred-accent);
}
.btn--primary {
background: var(--hundred-accent);
color: var(--hundred-bg);
border-color: var(--hundred-accent);
}
.btn--primary:hover {
background: transparent;
color: var(--hundred-accent);
}
.btn--lg {
padding: 20px 40px;
font-size: 13px;
} .filter { display: flex; gap: 8px; }
.filter__btn {
padding: 10px 20px;
border: 1px solid var(--hundred-line);
background: transparent;
color: var(--hundred-muted);
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 100px;
}
.filter__btn:hover {
border-color: var(--hundred-accent);
color: var(--hundred-accent);
}
.filter__btn.active {
background: var(--hundred-accent);
color: var(--hundred-bg);
border-color: var(--hundred-accent);
font-weight: 700;
} .card {
position: relative;
background: var(--hundred-bg-card);
border: 1px solid var(--hundred-line);
overflow: hidden;
cursor: pointer;
transition: border-color 0.4s ease, transform 0.4s ease;
display: flex;
flex-direction: column;
}
.card:hover { border-color: var(--hundred-accent); }
.card:hover .card__portrait::after { opacity: 1; }
.card:hover .card__name { color: var(--hundred-accent); }
.card:hover .card__initial { transform: scale(1.06); }
.card__portrait {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
background: linear-gradient(180deg, #0f0f12 0%, #06060a 100%);
overflow: hidden;
}
.card__portrait::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(110,231,255,0.10) 0%,
rgba(110,231,255,0.00) 40%,
rgba(110,231,255,0.00) 60%,
rgba(110,231,255,0.18) 100%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.card__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card__portrait-fig {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.card__initial {
font-family: 'Inter', system-ui, sans-serif;
font-weight: 900;
font-size: clamp(120px, 20vw, 240px);
letter-spacing: -0.08em;
line-height: 1;
color: rgba(255,255,255,0.06);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
pointer-events: none;
user-select: none;
}
.card__noise {
position: absolute;
inset: 0;
opacity: 0.06;
mix-blend-mode: overlay;
background-image:
repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,0.5) 0px, transparent 1px, transparent 4px),
repeating-radial-gradient(circle at 70% 60%, rgba(255,255,255,0.3) 0px, transparent 1px, transparent 5px);
pointer-events: none;
}
.card__meta {
position: absolute;
top: 12px;
left: 12px;
right: 12px;
display: flex;
justify-content: space-between;
font-family: 'Inter', system-ui, sans-serif;
font-size: 9px;
letter-spacing: 0.25em;
color: var(--hundred-muted);
text-transform: uppercase;
z-index: 2;
pointer-events: none;
}
.card__meta-idx { color: var(--hundred-accent); font-weight: 700; }
.card__vname {
position: absolute;
bottom: 12px;
left: 12px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3em;
color: var(--hundred-dim);
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
z-index: 2;
}
.card__label {
padding: 16px 18px 12px;
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1px solid var(--hundred-line);
}
.card__name {
font-family: 'Inter', system-ui, sans-serif;
font-size: 18px;
font-weight: 900;
letter-spacing: -0.01em;
color: var(--hundred-text);
transition: color 0.4s ease;
}
.card__role {
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
}
.card__bio-btn {
width: 100%;
padding: 12px 18px;
border-top: 1px solid var(--hundred-line);
color: var(--hundred-muted);
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.3s ease, background 0.3s ease;
}
.card__bio-btn:hover {
color: var(--hundred-accent);
background: rgba(110,231,255,0.05);
}
.card__bio-btn-arrow { transition: transform 0.3s ease; }
.card.open .card__bio-btn { color: var(--hundred-accent); }
.card.open .card__bio-btn-arrow { transform: rotate(180deg); color: var(--hundred-accent); }
.card__bio {
max-height: 0;
overflow: hidden;
transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.card.open .card__bio { max-height: 900px; }
.card__bio-inner {
padding: 24px 20px;
border-top: 1px solid var(--hundred-line);
}
.card__bio-catch {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--hundred-accent);
letter-spacing: 0.05em;
margin-bottom: 16px;
line-height: 1.5;
}
.card__bio-body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 12px;
line-height: 1.85;
color: var(--hundred-muted);
margin-bottom: 20px;
}
.card__bio-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.card__tag {
padding: 4px 10px;
border: 1px solid var(--hundred-line);
border-radius: 100px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 9px;
letter-spacing: 0.15em;
color: var(--hundred-muted);
text-transform: uppercase;
}
.card__bio-sns {
display: flex;
gap: 10px;
padding-top: 16px;
border-top: 1px solid var(--hundred-line);
}
.card__sns {
width: 32px;
height: 32px;
border: 1px solid var(--hundred-line);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
font-weight: 700;
color: var(--hundred-muted);
text-decoration: none;
transition: all 0.3s ease;
}
.card__sns:hover {
border-color: var(--hundred-accent);
color: var(--hundred-accent);
transform: translateY(-2px);
}
.card__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding: 10px 20px;
border: 1px solid var(--hundred-accent);
color: var(--hundred-accent);
font-family: 'Inter', system-ui, sans-serif;
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
}
.card__link:hover {
background: var(--hundred-accent);
color: var(--hundred-bg);
} .card--unit {
border-color: var(--hundred-accent);
background: linear-gradient(180deg, rgba(110,231,255,0.03) 0%, var(--hundred-bg-card) 100%);
}
.card--unit .card__portrait::before {
content: 'UNIT';
position: absolute;
top: 12px;
right: 12px;
padding: 4px 10px;
background: var(--hundred-accent);
color: var(--hundred-bg);
font-family: 'Inter', system-ui, sans-serif;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.2em;
border-radius: 2px;
z-index: 3;
}
.card--unit .card__name { color: var(--hundred-accent); } .card--roster .card__initial { font-size: clamp(80px, 16vw, 180px); }
.card--roster .card__label { padding: 12px 14px 10px; }
.card--roster .card__name { font-size: 15px; }
.card--roster .card__role { font-size: 9px; } .teaser-card {
position: relative;
display: block;
background: var(--hundred-bg-card);
border: 1px solid var(--hundred-line);
overflow: hidden;
transition: border-color 0.4s ease, transform 0.4s ease;
text-decoration: none;
}
.teaser-card:hover {
border-color: var(--hundred-accent);
transform: translateY(-4px);
}
.teaser-card:hover .teaser-card__name { color: var(--hundred-accent); }
.teaser-card__portrait {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: linear-gradient(180deg, #0f0f12 0%, #06060a 100%);
display: flex;
align-items: center;
justify-content: center;
}
.teaser-card__img { width: 100%; height: 100%; object-fit: cover; }
.teaser-card__initial {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(80px, 12vw, 160px);
color: rgba(255,255,255,0.08);
letter-spacing: -0.08em;
}
.teaser-card__badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 10px;
background: var(--hundred-accent);
color: var(--hundred-bg);
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.2em;
border-radius: 2px;
}
.teaser-card__label {
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1px solid var(--hundred-line);
}
.teaser-card__name {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 900;
color: var(--hundred-text);
transition: color 0.3s ease;
}
.teaser-card__role {
font-family: 'Inter', sans-serif;
font-size: 10px;
color: var(--hundred-muted);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.teaser-card--unit { border-color: var(--hundred-accent); }
.teaser-card--unit .teaser-card__name { color: var(--hundred-accent); } .search-form {
display: flex;
gap: 8px;
max-width: 500px;
}
.search-form__input {
flex: 1;
padding: 12px 20px;
background: transparent;
border: 1px solid var(--hundred-line);
color: var(--hundred-text);
font-family: inherit;
}
.search-form__input:focus {
outline: none;
border-color: var(--hundred-accent);
}
.search-form__submit {
padding: 12px 24px;
background: var(--hundred-accent);
color: var(--hundred-bg);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
font-size: 11px;
}.hero {
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
background: var(--hundred-bg);
}
.hero__particles {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 1;
display: block;
}
.hero__fallback {
display: none;
position: absolute;
inset: 0;
z-index: 2;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}
.hero__fallback-logo {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(80px, 15vw, 220px);
letter-spacing: -0.03em;
color: var(--hundred-text);
}
body[data-tier="0"] .hero__particles { display: none; }
body[data-tier="0"] .hero__fallback  { display: flex; }
.hero__overlay {
position: relative;
z-index: 3;
width: 100%; height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 100px clamp(24px, 5vw, 80px) 40px;
pointer-events: none;
}
.hero__top,
.hero__bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--hundred-muted);
text-transform: uppercase;
}
.hero__top-left,
.hero__top-right {
display: flex; flex-direction: column; gap: 4px;
}
.hero__top-right { text-align: right; }
.hero__top-label {
color: var(--hundred-accent);
font-weight: 700;
}
.hero__center {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 60px;
}
.hero__catch {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(14px, 1.6vw, 20px);
letter-spacing: 0.4em;
color: var(--hundred-text);
margin-top: 40px;
opacity: 0;
transform: translateY(20px);
animation: hero-fade 1.4s cubic-bezier(0.16, 1, 0.3, 1) 2.4s forwards;
}
.hero__subcatch {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(11px, 1vw, 14px);
letter-spacing: 0.3em;
color: var(--hundred-muted);
margin-top: 16px;
opacity: 0;
transform: translateY(20px);
animation: hero-fade 1.4s cubic-bezier(0.16, 1, 0.3, 1) 2.8s forwards;
}
@keyframes hero-fade {
to { opacity: 1; transform: translateY(0); }
}
.hero__scroll {
display: flex; align-items: center; gap: 12px;
}
.hero__scroll::before {
content: '';
display: block;
width: 40px;
height: 1px;
background: var(--hundred-muted);
animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
0%, 100% { transform: scaleX(0.3); transform-origin: left; }
50%      { transform: scaleX(1);   transform-origin: left; }
} [class$="__meta"] {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
} .manifesto {
position: relative;
padding: 200px clamp(24px, 5vw, 80px) 160px;
background: var(--hundred-bg);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.manifesto__meta {
display: flex;
justify-content: space-between;
margin-bottom: 120px;
}
.manifesto__num { color: var(--hundred-accent); font-weight: 700; }
.manifesto__title-wrap {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
margin-bottom: 160px;
gap: 40px;
}
.manifesto__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(56px, 12vw, 200px);
letter-spacing: -0.03em;
line-height: 0.88;
color: var(--hundred-text);
}
.manifesto__title em {
font-style: italic;
font-weight: 400;
color: var(--hundred-muted);
}
.manifesto__hint {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
letter-spacing: 0.15em;
line-height: 1.9;
color: var(--hundred-muted);
max-width: 340px;
text-align: right;
padding-bottom: 20px;
white-space: normal;
}
.manifesto__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 40px;
}
.manifesto__label {
grid-column: span 12;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 24px;
}
.manifesto__label::after {
content: '';
flex: 1;
height: 1px;
background: var(--hundred-line);
}
.manifesto__def {
grid-column: span 6;
padding-top: 24px;
border-top: 1px solid var(--hundred-line);
}
.manifesto__def-head {
display: flex;
align-items: baseline;
gap: 24px;
margin-bottom: 32px;
}
.manifesto__def-num {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--hundred-accent);
letter-spacing: 0.15em;
}
.manifesto__def-word {
font-family: 'Inter', sans-serif;
font-size: clamp(48px, 6vw, 96px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
color: var(--hundred-text);
}
.manifesto__def-body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 1.9;
color: var(--hundred-muted);
max-width: 480px;
}
@media (max-width: 900px) {
.manifesto__title-wrap { grid-template-columns: 1fr; gap: 40px; }
.manifesto__hint { text-align: left; }
.manifesto__def { grid-column: span 12; }
} .services {
position: relative;
padding: 160px clamp(24px, 5vw, 80px);
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.services__meta {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.services__num { color: var(--hundred-accent); font-weight: 700; }
.services__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 10vw, 160px);
letter-spacing: -0.03em;
line-height: 0.88;
color: var(--hundred-text);
margin-bottom: 100px;
}
.services__list { display: grid; gap: 0; }
.services__item {
display: grid;
grid-template-columns: 60px 1fr 300px 40px;
align-items: center;
gap: 40px;
padding: 40px 0;
border-top: 1px solid var(--hundred-line);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.services__item:last-child { border-bottom: 1px solid var(--hundred-line); }
.services__item:hover {
padding-left: 24px;
padding-right: 24px;
background: rgba(255,255,255,0.02);
}
.services__item:hover .services__arrow { transform: translateX(8px); color: var(--hundred-accent); }
.services__item:hover .services__name  { color: var(--hundred-accent); }
.services__idx {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--hundred-muted);
letter-spacing: 0.15em;
}
.services__name {
font-family: 'Inter', sans-serif;
font-size: clamp(24px, 3vw, 42px);
font-weight: 900;
letter-spacing: -0.01em;
color: var(--hundred-text);
transition: color 0.4s ease;
}
.services__desc {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
color: var(--hundred-muted);
line-height: 1.7;
}
.services__arrow {
font-family: 'Inter', sans-serif;
font-size: 24px;
color: var(--hundred-muted);
transition: transform 0.4s ease, color 0.4s ease;
text-align: right;
}
@media (max-width: 900px) {
.services__item { grid-template-columns: 40px 1fr 30px; gap: 20px; }
.services__desc { display: none; }
} .pillars {
position: relative;
width: 100%;
height: 400vh;
background: var(--hundred-bg);
border-top: 1px solid var(--hundred-line);
}
.pillars__sticky {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
padding: 40px clamp(24px, 5vw, 80px);
}
.pillars__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.pillars__num { color: var(--hundred-accent); font-weight: 700; }
.pillars__stage {
position: relative;
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
gap: clamp(40px, 6vw, 120px);
align-items: center;
}
.pillars__index {
font-family: 'Inter', sans-serif;
font-size: clamp(120px, 15vw, 280px);
font-weight: 900;
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--hundred-accent);
overflow: hidden;
text-overflow: clip;
}
.pillars__content {
position: relative;
min-height: 340px;
}
.pillar-slide {
position: absolute;
top: 0; left: 0;
width: 100%;
opacity: 0;
transform: translateY(60px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.pillar-slide.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.pillar-slide__label {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 32px;
}
.pillar-slide__title {
font-family: 'Inter', sans-serif;
font-size: clamp(52px, 8vw, 140px);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.03em;
color: var(--hundred-text);
margin-bottom: 40px;
}
.pillar-slide__ja {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(18px, 2vw, 26px);
font-weight: 700;
letter-spacing: 0.2em;
color: var(--hundred-accent);
margin-bottom: 32px;
}
.pillar-slide__body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 1.95;
color: var(--hundred-muted);
max-width: 620px;
}
.pillars__progress {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
border-top: 1px solid var(--hundred-line);
}
.pillars__dots { display: flex; gap: 12px; flex: 1; }
.pillars__dot {
width: 32px; height: 2px;
background: var(--hundred-line-str);
transition: background 0.4s ease, transform 0.4s ease;
transform-origin: left;
}
.pillars__dot.active {
background: var(--hundred-accent);
transform: scaleX(1.4);
}
.pillars__scroll-hint {
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
text-transform: uppercase;
}
@media (max-width: 900px) {
.pillars__stage { grid-template-columns: 1fr; }
.pillars__index { font-size: 96px; }
.pillars__content { min-height: 280px; }
} .members-teaser {
position: relative;
padding: 200px clamp(24px, 5vw, 80px);
background: var(--hundred-bg);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.members-teaser__meta {
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}
.members-teaser__num { color: var(--hundred-accent); font-weight: 700; }
.members-teaser__title-wrap {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
margin-bottom: 100px;
gap: 40px;
}
.members-teaser__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(56px, 10vw, 160px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
}
.members-teaser__title em {
font-style: italic;
font-weight: 400;
color: var(--hundred-muted);
}
.members-teaser__hint {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
max-width: 260px;
text-align: right;
padding-bottom: 20px;
}
.members-teaser__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 80px;
}
.members-teaser__cta { text-align: center; }
.members-teaser__empty {
text-align: center;
padding: 80px 0;
color: var(--hundred-muted);
font-style: italic;
}
@media (max-width: 900px) {
.members-teaser__grid { grid-template-columns: repeat(2, 1fr); }
.members-teaser__title-wrap { grid-template-columns: 1fr; }
.members-teaser__hint { text-align: left; }
}
@media (max-width: 480px) {
.members-teaser__grid { grid-template-columns: 1fr; }
} .news-teaser {
position: relative;
padding: 160px clamp(24px, 5vw, 80px);
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.news-teaser__meta {
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}
.news-teaser__num { color: var(--hundred-accent); font-weight: 700; }
.news-teaser__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 10vw, 160px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 80px;
}
.news-teaser__title em {
font-style: italic;
font-weight: 400;
color: var(--hundred-muted);
}
.news-teaser__list { display: grid; gap: 0; margin-bottom: 60px; }
.news-teaser__item {
display: grid;
grid-template-columns: 100px 100px 1fr 40px;
align-items: center;
gap: 20px;
padding: 24px 0;
border-top: 1px solid var(--hundred-line);
text-decoration: none;
transition: all 0.3s ease;
}
.news-teaser__item:last-child { border-bottom: 1px solid var(--hundred-line); }
.news-teaser__item:hover { padding-left: 16px; background: rgba(255,255,255,0.02); }
.news-teaser__item:hover .news-teaser__ttl { color: var(--hundred-accent); }
.news-teaser__item:hover .news-teaser__arrow { transform: translateX(6px); color: var(--hundred-accent); }
.news-teaser__date {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: var(--hundred-muted);
letter-spacing: 0.15em;
}
.news-teaser__cat {
font-family: 'Inter', sans-serif;
font-size: 10px;
color: var(--hundred-accent);
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
}
.news-teaser__ttl {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--hundred-text);
transition: color 0.3s ease;
margin: 0;
}
.news-teaser__arrow {
color: var(--hundred-muted);
text-align: right;
transition: transform 0.3s ease, color 0.3s ease;
}
.news-teaser__cta { text-align: center; }
.news-teaser__empty {
text-align: center; padding: 60px 0;
color: var(--hundred-muted); font-style: italic;
}
@media (max-width: 640px) {
.news-teaser__item { grid-template-columns: 90px 1fr; grid-template-rows: auto auto; }
.news-teaser__cat, .news-teaser__arrow { display: none; }
.news-teaser__ttl { grid-column: 1 / 3; }
} .lineage {
position: relative;
padding: 200px clamp(24px, 5vw, 80px);
background: var(--hundred-bg);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.lineage__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 100px;
}
.lineage__num { color: var(--hundred-accent); font-weight: 700; }
.lineage__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 8vw, 140px);
letter-spacing: -0.03em;
line-height: 0.92;
color: var(--hundred-text);
margin-bottom: 24px;
}
.lineage__title em { font-style: italic; font-weight: 400; color: var(--hundred-muted); }
.lineage__sub {
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 1.9;
color: var(--hundred-muted);
max-width: 620px;
margin-bottom: 140px;
}
.lineage__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 40px 32px;
}
.lineage__item {
grid-column: span 6;
padding-top: 24px;
border-top: 1px solid var(--hundred-line);
}
.lineage__name {
font-family: 'Inter', sans-serif;
font-size: clamp(28px, 4vw, 56px);
font-weight: 900;
letter-spacing: -0.01em;
color: var(--hundred-text);
margin-bottom: 20px;
}
.lineage__desc {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
line-height: 1.9;
color: var(--hundred-muted);
}
.lineage__closing {
grid-column: span 12;
padding-top: 100px;
}
.lineage__closing-title {
font-family: 'Inter', sans-serif;
font-size: clamp(32px, 5vw, 84px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
color: var(--hundred-text);
margin-bottom: 32px;
}
.lineage__closing-title em { font-style: italic; font-weight: 400; color: var(--hundred-muted); }
.lineage__closing-body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 1.9;
color: var(--hundred-muted);
max-width: 720px;
}
@media (max-width: 900px) {
.lineage__item { grid-column: span 12; }
} .contact-cta {
position: relative;
padding: 200px clamp(24px, 5vw, 80px);
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
text-align: center;
z-index: 1;
}
.contact-cta__meta {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
text-align: left;
}
.contact-cta__num { color: var(--hundred-accent); font-weight: 700; }
.contact-cta__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(56px, 12vw, 220px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 60px;
}
.contact-cta__title em { font-style: italic; font-weight: 400; color: var(--hundred-muted); }
.contact-cta__mail {
margin-bottom: 60px;
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 500;
}
.contact-cta__mail a {
color: var(--hundred-text);
border-bottom: 1px solid var(--hundred-line);
padding-bottom: 4px;
transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-cta__mail a:hover {
color: var(--hundred-accent);
border-color: var(--hundred-accent);
}
.contact-cta__buttons {
display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
} .members-hero {
position: relative;
padding: 200px clamp(24px, 5vw, 80px) 80px;
z-index: 1;
}
.members-hero__meta {
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}
.members-hero__num { color: var(--hundred-accent); font-weight: 700; }
.members-hero__title-wrap {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
padding-bottom: 40px;
border-bottom: 1px solid var(--hundred-line);
}
.members-hero__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(64px, 14vw, 240px);
letter-spacing: -0.04em;
line-height: 0.85;
color: var(--hundred-text);
}
.members-hero__count {
font-family: 'Inter', sans-serif;
font-size: 13px;
letter-spacing: 0.25em;
color: var(--hundred-muted);
text-align: right;
text-transform: uppercase;
padding-bottom: 20px;
}
.members-hero__count strong { color: var(--hundred-accent); font-weight: 900; }
.members-hero__count-big {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 900;
color: var(--hundred-text);
letter-spacing: 0;
margin-bottom: 4px;
}
.members-hero__sub {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
font-family: 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
} .members-grid {
position: relative;
padding: 80px clamp(24px, 5vw, 80px) 120px;
z-index: 1;
}
.grid-label {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 24px;
}
.grid-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--hundred-line);
}
.grid-label__num { color: var(--hundred-accent); font-weight: 700; }
.featured {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 120px;
}
@media (max-width: 1200px) { .featured { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .featured { grid-template-columns: 1fr; } }
.roster {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 1200px) { .roster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .roster { grid-template-columns: 1fr; } } .cta {
position: relative;
padding: 200px clamp(24px, 5vw, 80px);
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.cta__meta {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
.cta__meta-num { color: var(--hundred-accent); font-weight: 700; }
.cta__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 10vw, 180px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 60px;
}
.cta__title em { font-style: italic; font-weight: 400; color: var(--hundred-muted); }
.cta__buttons { display: flex; gap: 20px; flex-wrap: wrap; } .single-member__hero {
position: relative;
min-height: 90vh;
display: grid;
grid-template-rows: auto 1fr auto;
padding: 120px clamp(24px, 5vw, 80px) 80px;
z-index: 1;
overflow: hidden;
}
.single-member__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
}
.single-member__num { color: var(--hundred-accent); font-weight: 700; }
.single-member__portrait {
position: absolute;
top: 0; right: 0;
width: 60%;
height: 100%;
z-index: -1;
overflow: hidden;
opacity: 0.55;
}
.single-member__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(0.2) contrast(1.05);
}
.single-member__initial {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: 40vw;
line-height: 1;
color: rgba(255,255,255,0.05);
padding: 60px;
}
.single-member__title-wrap {
align-self: end;
max-width: 900px;
}
.single-member__reading {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
letter-spacing: 0.3em;
color: var(--hundred-accent);
margin-bottom: 16px;
}
.single-member__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(56px, 12vw, 200px);
letter-spacing: -0.04em;
line-height: 0.85;
color: var(--hundred-text);
margin-bottom: 32px;
}
.single-member__catch {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(15px, 1.6vw, 20px);
line-height: 1.7;
color: var(--hundred-muted);
max-width: 620px;
}
.single-member__body {
padding: 100px clamp(24px, 5vw, 80px);
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.single-member__block { margin-bottom: 100px; }
.single-member__block-label {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--hundred-accent);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 32px;
}
.single-member__prose {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 1.95;
color: var(--hundred-text);
}
.single-member__prose p { margin-bottom: 24px; }
.single-member__info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 40px 0;
border-top: 1px solid var(--hundred-line);
border-bottom: 1px solid var(--hundred-line);
margin-bottom: 80px;
}
.single-member__info-label {
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 12px;
}
.single-member__info-value {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: var(--hundred-text);
}
.single-member__info--wide { grid-column: span 3; }
@media (max-width: 700px) {
.single-member__info-grid { grid-template-columns: 1fr; gap: 24px; }
.single-member__info--wide { grid-column: span 1; }
}
.single-member__unit-link {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 20px 32px;
border: 1px solid var(--hundred-accent);
color: var(--hundred-accent);
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 900;
letter-spacing: -0.01em;
text-decoration: none;
transition: all 0.3s ease;
}
.single-member__unit-link:hover {
background: var(--hundred-accent);
color: var(--hundred-bg);
}
.single-member__unit-members {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.single-member__unit-member {
display: flex;
align-items: center;
gap: 16px;
padding: 12px;
border: 1px solid var(--hundred-line);
text-decoration: none;
color: var(--hundred-text);
transition: all 0.3s ease;
}
.single-member__unit-member:hover {
border-color: var(--hundred-accent);
color: var(--hundred-accent);
}
.single-member__unit-member-img {
width: 48px; height: 48px;
object-fit: cover;
border-radius: 50%;
}
.single-member__appearance {
list-style: none;
padding: 0;
margin: 0;
counter-reset: appearance;
}
.single-member__appearance li {
counter-increment: appearance;
padding: 16px 0;
border-bottom: 1px solid var(--hundred-line);
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--hundred-muted);
padding-left: 60px;
position: relative;
}
.single-member__appearance li::before {
content: counter(appearance, decimal-leading-zero);
position: absolute;
left: 0;
color: var(--hundred-accent);
font-weight: 700;
letter-spacing: 0.1em;
}
.single-member__sns {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.single-member__sns-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 24px;
border: 1px solid var(--hundred-line);
color: var(--hundred-text);
font-family: 'Inter', sans-serif;
font-size: 13px;
letter-spacing: 0.1em;
text-decoration: none;
transition: all 0.3s ease;
}
.single-member__sns-item:hover {
border-color: var(--hundred-accent);
color: var(--hundred-accent);
}
.single-member__nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
padding: 60px clamp(24px, 5vw, 80px);
border-top: 1px solid var(--hundred-line);
align-items: center;
z-index: 1;
position: relative;
}
.single-member__nav-prev,
.single-member__nav-next {
display: flex;
flex-direction: column;
gap: 8px;
text-decoration: none;
color: var(--hundred-text);
transition: color 0.3s ease;
}
.single-member__nav-next { text-align: right; align-items: flex-end; }
.single-member__nav-prev:hover,
.single-member__nav-next:hover { color: var(--hundred-accent); }
.single-member__nav-label {
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.25em;
color: var(--hundred-muted);
text-transform: uppercase;
}
.single-member__nav-name {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 900;
}
.single-member__nav-all {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border: 1px solid var(--hundred-line);
color: var(--hundred-muted);
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.single-member__nav-all:hover {
border-color: var(--hundred-accent);
color: var(--hundred-accent);
} .error-404 {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
padding: 100px clamp(24px, 5vw, 80px);
z-index: 1;
}
.error-404__inner { max-width: 800px; }
.error-404__meta {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 40px;
}
.error-404__num { color: var(--hundred-accent); font-weight: 700; margin-right: 8px; }
.error-404__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 10vw, 160px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 40px;
}
.error-404__title em { font-style: italic; font-weight: 400; color: var(--hundred-muted); }
.error-404__lead {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 1.9;
color: var(--hundred-muted);
margin-bottom: 60px;
}
.error-404__actions { display: flex; gap: 20px; flex-wrap: wrap; } .post-list {
max-width: 900px;
margin: 0 auto;
}
.post-list__item {
border-bottom: 1px solid var(--hundred-line);
padding: 40px 0;
}
.post-list__link {
display: block;
text-decoration: none;
transition: transform 0.3s ease;
}
.post-list__link:hover { transform: translateX(8px); }
.post-list__link:hover .post-list__title { color: var(--hundred-accent); }
.post-list__date {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: var(--hundred-muted);
letter-spacing: 0.15em;
margin-bottom: 12px;
}
.post-list__title {
font-family: 'Noto Sans JP', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--hundred-text);
transition: color 0.3s ease;
margin: 0 0 12px;
}
.post-list__excerpt {
color: var(--hundred-muted);
line-height: 1.7;
}
.pagination {
max-width: 900px;
margin: 60px auto;
text-align: center;
}
.pagination .nav-links {
display: flex;
gap: 16px;
justify-content: center;
}
.pagination a, .pagination span {
display: inline-block;
padding: 12px 20px;
border: 1px solid var(--hundred-line);
color: var(--hundred-text);
text-decoration: none;
font-family: 'Inter', sans-serif;
letter-spacing: 0.15em;
font-size: 12px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.pagination a:hover, .pagination .current {
background: var(--hundred-accent);
color: var(--hundred-bg);
border-color: var(--hundred-accent);
}.has-media-bg {
position: relative;
isolation: isolate;
}
.manifesto.has-media-bg,
.news-teaser.has-media-bg {
overflow: hidden;
}  .reveal-slide-x {
display: block;
}
.reveal-slide-x__mask {
display: block;
overflow: hidden;
padding-bottom: 0.05em; }
.reveal-slide-x__inner {
display: inline-block;
transform: translateX(110%);
opacity: 0;
will-change: transform;
transition:
transform 1.35s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.75s ease-out;
}
.reveal-slide-x.in .reveal-slide-x__mask:nth-child(1) .reveal-slide-x__inner { transition-delay: 0.00s; }
.reveal-slide-x.in .reveal-slide-x__mask:nth-child(2) .reveal-slide-x__inner { transition-delay: 0.14s; }
.reveal-slide-x.in .reveal-slide-x__mask:nth-child(3) .reveal-slide-x__inner { transition-delay: 0.28s; }
.reveal-slide-x.in .reveal-slide-x__mask:nth-child(4) .reveal-slide-x__inner { transition-delay: 0.42s; }
.reveal-slide-x.in .reveal-slide-x__inner {
transform: translateX(0);
opacity: 1;
} html.no-js .reveal-slide-x__inner {
transform: none;
opacity: 1;
} @media (prefers-reduced-motion: reduce) {
.reveal-slide-x__inner {
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
} .manifesto.has-media-bg {
background: var(--hundred-bg); }
.manifesto__bg {
position: absolute;
inset: -12%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.manifesto__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.34;
filter: saturate(0.6) contrast(1.08) brightness(0.72);
will-change: transform;
transform: translate3d(0, 0, 0) scale(1.06);
transition: transform 0.2s linear;
}
.manifesto__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse at 30% 20%, rgba(110, 231, 255, 0.06), transparent 55%),
linear-gradient(180deg,
rgba(5, 5, 5, 0.72) 0%,
rgba(5, 5, 5, 0.55) 40%,
rgba(5, 5, 5, 0.85) 100%);
}
.manifesto__inner {
position: relative;
z-index: 2;
} .services__item.glow-row {
position: relative;
overflow: hidden;
isolation: isolate;
}
.glow-row__glow {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
background:
radial-gradient(ellipse at var(--gx, 50%) 50%,
rgba(110, 231, 255, 0.22) 0%,
rgba(110, 231, 255, 0.08) 30%,
transparent 70%),
linear-gradient(90deg,
rgba(110, 231, 255, 0.0) 0%,
rgba(110, 231, 255, 0.05) 50%,
rgba(110, 231, 255, 0.0) 100%);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.services__item.glow-row::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: var(--hundred-accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 3;
}
.services__item.glow-row:hover {
padding-left: 32px;
background: rgba(110, 231, 255, 0.03);
box-shadow: inset 0 0 60px rgba(110, 231, 255, 0.06);
}
.services__item.glow-row:hover .glow-row__glow {
opacity: 1;
}
.services__item.glow-row:hover::before {
transform: scaleY(1);
}
.services__item.glow-row:hover .services__name {
text-shadow: 0 0 24px rgba(110, 231, 255, 0.4);
}
.services__item.glow-row:hover .services__arrow {
transform: translateX(14px);
text-shadow: 0 0 12px rgba(110, 231, 255, 0.6);
} .pillars__bg-stack {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.pillars__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-color: #050505;
opacity: 0;
filter: saturate(0.55) contrast(1.1) brightness(0.6);
transform: scale(1.08);
transition:
opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 3.5s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.pillars__bg.active {
opacity: 0.55;
transform: scale(1);
} .pillars__bg[data-i="0"] { background-color: #1a0f1e; }
.pillars__bg[data-i="1"] { background-color: #0e1420; }
.pillars__bg[data-i="2"] { background-color: #1f0d0d; }
.pillars__bg[data-i="3"] { background-color: #0d1a18; }
.pillars__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 20%, rgba(110, 231, 255, 0.04), transparent 60%),
linear-gradient(180deg,
rgba(5, 5, 5, 0.72) 0%,
rgba(5, 5, 5, 0.5) 40%,
rgba(5, 5, 5, 0.8) 100%);
}
.pillars__meta,
.pillars__stage,
.pillars__progress {
position: relative;
z-index: 2;
} .news-teaser.has-media-bg {
background: var(--hundred-bg-soft);
}
.news-teaser__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.news-teaser__bg-video {
position: absolute;
top: 50%; left: 50%;
min-width: 100%;
min-height: 100%;
width: auto; height: auto;
transform: translate(-50%, -50%);
object-fit: cover;
opacity: 0.28;
filter: saturate(0.7) contrast(1.05) brightness(0.75);
} .news-teaser__bg-fallback {
position: absolute;
inset: 0;
overflow: hidden;
}
.news-teaser__bg-poster {
position: absolute;
top: 50%; left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%) scale(1.08);
object-fit: cover;
opacity: 0.28;
filter: saturate(0.55) contrast(1.1) brightness(0.65);
animation: hundred-news-drift 22s ease-in-out infinite alternate;
}
@keyframes hundred-news-drift {
0%   { transform: translate(-50%, -50%) scale(1.08) translateY(0); }
100% { transform: translate(-50%, -50%) scale(1.14) translateY(-3%); }
} .news-teaser__bg-vhs {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.4) 100%),
linear-gradient(180deg, rgba(110, 231, 255, 0.03) 0%, transparent 8%, transparent 92%, rgba(255, 100, 100, 0.04) 100%);
animation: hundred-news-flicker 4s steps(24) infinite;
mix-blend-mode: screen;
}
@keyframes hundred-news-flicker {
0%, 100% { opacity: 0.85; }
50%      { opacity: 1;    }
} .news-teaser__bg-scanlines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 2px,
rgba(0, 0, 0, 0.06) 3px,
rgba(0, 0, 0, 0) 4px
);
pointer-events: none;
opacity: 0.6;
mix-blend-mode: multiply;
}
.news-teaser__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse at 30% 30%, rgba(110, 231, 255, 0.05), transparent 55%),
linear-gradient(180deg,
rgba(5, 5, 5, 0.78) 0%,
rgba(5, 5, 5, 0.6) 40%,
rgba(5, 5, 5, 0.85) 100%);
}
.news-teaser__inner {
position: relative;
z-index: 2;
} .news-teaser__item.glow-row {
position: relative;
overflow: hidden;
isolation: isolate;
transition: padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
background 0.5s ease;
}
.news-teaser__item.glow-row::before {
content: '';
position: absolute;
left: 0; top: 0;
width: 3px;
height: 100%;
background: var(--hundred-accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 3;
}
.news-teaser__item.glow-row:hover {
padding-left: 24px;
background: rgba(110, 231, 255, 0.04);
box-shadow: inset 0 0 40px rgba(110, 231, 255, 0.05);
}
.news-teaser__item.glow-row:hover::before {
transform: scaleY(1);
}
.news-teaser__item.glow-row:hover .news-teaser__ttl {
text-shadow: 0 0 18px rgba(110, 231, 255, 0.35);
}
.news-teaser__item.glow-row:hover .news-teaser__arrow {
text-shadow: 0 0 10px rgba(110, 231, 255, 0.5);
} @media (max-width: 900px) {
.pillars__bg.active { opacity: 0.4; }
.manifesto__bg-img  { opacity: 0.25; }
.news-teaser__bg-video, .news-teaser__bg-poster { opacity: 0.22; }
.services__item.glow-row:hover { padding-left: 20px; }
.news-teaser__item.glow-row:hover { padding-left: 16px; }
}  .single-member__hero { position: relative; overflow: hidden; isolation: isolate; }
.single-member__bg-graphic {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
background: radial-gradient(ellipse at 25% 15%, #10222A 0%, #050506 65%);
}
.single-member__bg-graphic::before,
.single-member__bg-graphic::after {
content: '';
position: absolute;
inset: 0;
}
.single-member__bg-graphic::before {
background:
linear-gradient(115deg, transparent 40%, rgba(110, 231, 255, 0.10) 50%, transparent 60%),
linear-gradient(120deg, transparent 65%, rgba(110, 231, 255, 0.06) 72%, transparent 80%);
mix-blend-mode: screen;
opacity: 0.9;
animation: hundred-rays 22s ease-in-out infinite alternate;
}
.single-member__bg-graphic::after {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
opacity: 0.08;
mix-blend-mode: overlay;
}
.single-member__bg-noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n2)' opacity='0.5'/></svg>");
mix-blend-mode: overlay;
opacity: 0.14;
pointer-events: none;
}
.single-member__bg-rays {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 78% 30%, rgba(110, 231, 255, 0.16) 0%, transparent 40%),
radial-gradient(circle at 15% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%);
mix-blend-mode: screen;
pointer-events: none;
}
@keyframes hundred-rays {
0%   { transform: translateX(-2%) translateY(-1%); opacity: 0.85; }
100% { transform: translateX( 2%) translateY( 1%); opacity: 1;   }
} .single-member__portrait { position: absolute; top: 0; right: 0; width: 62%; height: 100%; z-index: -1; overflow: hidden; }
.single-member__portrait::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.2) 45%, transparent 100%);
pointer-events: none;
}
.single-member__img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 30%;
filter: grayscale(0.15) contrast(1.08) brightness(0.95);
} .single-member[data-slug="trid3nt"] .single-member__img { object-position: center 22%; }
.single-member[data-slug="nanami"]  .single-member__img { object-position: center 24%; }
.single-member[data-slug="teto"]    .single-member__img { object-position: center 28%; }
.single-member[data-slug="lann"]    .single-member__img { object-position: center 28%; }
.single-member[data-slug="doremi"]  .single-member__img { object-position: center 34%; }
.single-member[data-slug="philly"]  .single-member__img { object-position: center 32%; }
.single-member[data-slug="ryo2"]    .single-member__img { object-position: center 32%; }
.single-member[data-slug="taisei"]  .single-member__img { object-position: center 32%; }
.single-member[data-slug="soju"]    .single-member__img { object-position: center 30%; }
.single-member[data-slug="tomo"]    .single-member__img { object-position: center 30%; }
.single-member[data-slug="tsumi"]   .single-member__img { object-position: center 30%; } .single-member__sns {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.single-member__sns-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
border: 1px solid var(--hundred-line);
color: var(--hundred-text);
background: rgba(255,255,255,0.02);
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.single-member__sns-item:hover {
color: var(--hundred-accent);
border-color: var(--hundred-accent);
background: rgba(110, 231, 255, 0.06);
box-shadow: 0 0 24px rgba(110, 231, 255, 0.25);
transform: translateY(-2px);
}
.single-member__sns-icon {
display: inline-flex;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
}
.single-member__sns-icon svg {
width: 100%;
height: 100%;
display: block;
}
.single-member__sns-label { line-height: 1; } .single-member__sns-item--instagram:hover  { border-color: #E4405F; color: #E4405F; box-shadow: 0 0 24px rgba(228, 64, 95, 0.35); }
.single-member__sns-item--twitter:hover    { border-color: #FFFFFF; color: #FFFFFF; }
.single-member__sns-item--youtube:hover    { border-color: #FF0000; color: #FF3333; box-shadow: 0 0 24px rgba(255, 0, 0, 0.35); }
.single-member__sns-item--soundcloud:hover { border-color: #FF5500; color: #FF7733; box-shadow: 0 0 24px rgba(255, 85, 0, 0.35); }
.single-member__sns-item--mixcloud:hover   { border-color: #5000FF; color: #7733FF; }
.single-member__sns-item--tiktok:hover     { border-color: #25F4EE; color: #25F4EE; box-shadow: 0 0 24px rgba(37, 244, 238, 0.35); } .site-footer__logo-link { display: inline-block; }
.site-footer__logo-img {
width: auto;
max-width: 220px;
height: auto;
filter: brightness(0) invert(1);
opacity: 0.95;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.site-footer__logo-link:hover .site-footer__logo-img {
opacity: 1;
filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(110, 231, 255, 0.5));
} @media (max-width: 700px) {
.single-member__portrait { width: 100%; opacity: 0.55; }
.single-member__portrait::after {
background: linear-gradient(180deg, transparent 0%, rgba(5,5,5,0.4) 40%, rgba(5,5,5,0.95) 100%);
}
.single-member__sns-item { padding: 12px 16px; font-size: 11px; }
.site-footer__logo-img { max-width: 180px; }
}  .card__img {
object-position: center 15%;
transform: scale(1.06);
transform-origin: center 20%;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card__img { transform: scale(1.1); } .card[data-slug="nanami"]  .card__img { object-position: center 8%;  transform: scale(1.6); }
.card:hover[data-slug="nanami"]  .card__img { transform: scale(1.66); }
.card[data-slug="trid3nt"] .card__img { object-position: center 10%; transform: scale(1.35); }
.card:hover[data-slug="trid3nt"] .card__img { transform: scale(1.4); }
.card[data-slug="taisei"]  .card__img,
.card[data-slug="philly"]  .card__img,
.card[data-slug="ryo2"]    .card__img { object-position: center 12%; transform: scale(1.22); }
.card:hover[data-slug="taisei"]  .card__img,
.card:hover[data-slug="philly"]  .card__img,
.card:hover[data-slug="ryo2"]    .card__img { transform: scale(1.28); }
.card[data-slug="tomo"]    .card__img,
.card[data-slug="soju"]    .card__img,
.card[data-slug="lann"]    .card__img,
.card[data-slug="tsumi"]   .card__img,
.card[data-slug="teto"]    .card__img,
.card[data-slug="doremi"]  .card__img { object-position: center 14%; transform: scale(1.15); }
.card:hover[data-slug="tomo"]    .card__img,
.card:hover[data-slug="soju"]    .card__img,
.card:hover[data-slug="lann"]    .card__img,
.card:hover[data-slug="tsumi"]   .card__img,
.card:hover[data-slug="teto"]    .card__img,
.card:hover[data-slug="doremi"]  .card__img { transform: scale(1.2); } .single-member__bg-graphic::before { background:
radial-gradient(circle at 30% 30%, rgba(110, 231, 255, 0.10), transparent 55%),
radial-gradient(circle at 80% 80%, rgba(110, 231, 255, 0.06), transparent 60%);
mix-blend-mode: screen;
opacity: 1;
animation: none;
}
.single-member__bg-graphic::after { opacity: 0.06;
} .talent-logo-3d {
position: absolute;
top: 40%;
left: 22%;
transform: translate(-50%, -50%);
width: min(40vw, 520px);
height: min(40vw, 520px);
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 8px 40px rgba(110, 231, 255, 0.35));
}
.talent-logo-3d canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 900px) {
.talent-logo-3d { top: 25%; left: 50%; width: 60vw; height: 60vw; }
} .card__sns {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--hundred-line);
border-radius: 50%;
color: var(--hundred-text);
background: rgba(255,255,255,0.03);
transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.card__sns svg { width: 14px; height: 14px; display: block; }
.card__sns:hover {
color: var(--hundred-accent);
border-color: var(--hundred-accent);
background: rgba(110, 231, 255, 0.10);
transform: translateY(-2px);
}
.card__sns--instagram:hover  { color: #E4405F; border-color: #E4405F; }
.card__sns--youtube:hover    { color: #FF3333; border-color: #FF0000; }
.card__sns--soundcloud:hover { color: #FF7733; border-color: #FF5500; }
.card__sns--mixcloud:hover   { color: #7733FF; border-color: #5000FF; }
.card__sns--tiktok:hover     { color: #25F4EE; border-color: #25F4EE; }
.card__portrait { cursor: pointer; }
.card__portrait::before {
content: 'DBL·CLICK TO ENTER';
position: absolute;
right: 12px;
bottom: 46px;
z-index: 4;
font-family: 'Inter', sans-serif;
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.card:hover .card__portrait::before { opacity: 1; } .card__portrait {
background:
radial-gradient(circle at 30% 25%, rgba(110, 231, 255, 0.14) 0%, transparent 40%),
radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%),
linear-gradient(180deg, #101820 0%, #060810 100%);
} .card__noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n3'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n3)' opacity='0.6'/></svg>");
mix-blend-mode: overlay;
opacity: 0.14;
pointer-events: none;
z-index: 0;
} .card[data-slug="doremi"]  .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(255, 100, 200, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #1a0f18 0%, #06060a 100%); }
.card[data-slug="ryo2"]    .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(120, 200, 255, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #0e1420 0%, #060810 100%); }
.card[data-slug="philly"]  .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(255, 200, 100, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #1a1210 0%, #060506 100%); }
.card[data-slug="taisei"]  .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(150, 255, 180, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #0f1a13 0%, #050805 100%); }
.card[data-slug="trid3nt"] .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(200, 150, 255, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #14101a 0%, #060608 100%); }
.card[data-slug="nanami"]  .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(255, 150, 200, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #18101a 0%, #060608 100%); }
.card[data-slug="soju"]    .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(200, 255, 220, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #101a16 0%, #060808 100%); }
.card[data-slug="tomo"]    .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(180, 220, 255, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #101418 0%, #060608 100%); }
.card[data-slug="lann"]    .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(255, 180, 150, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #1a1310 0%, #060506 100%); }
.card[data-slug="teto"]    .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(180, 255, 240, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #101a19 0%, #060808 100%); }
.card[data-slug="tsumi"]   .card__portrait { background: radial-gradient(circle at 30% 25%, rgba(255, 220, 150, 0.14) 0%, transparent 40%), radial-gradient(circle at 75% 80%, rgba(110, 231, 255, 0.08) 0%, transparent 45%), linear-gradient(180deg, #191510 0%, #060606 100%); }  @media (min-width: 900px) {
body {
font-size: 16px; line-height: 1.85;
}
.manifesto__hint,
.manifesto__def-body,
.pillar-slide__body,
.lineage__sub,
.lineage__desc,
.lineage__closing-body,
.members-teaser__hint {
font-size: 15px;
}
.services__desc { font-size: 14px; }
.single-member__prose,
.single-member__prose p { font-size: 15px; line-height: 1.95; }
.single-member__info-value { font-size: 14px; }
.card__name  { font-size: 20px; }
.card__role  { font-size: 11px; }
.card__bio-catch { font-size: 14px; line-height: 1.75; }
.card__bio-body,
.card__bio-body p { font-size: 13px; line-height: 1.85; }
} .pillars__bg.active { opacity: 0.72; }
.pillars__scrim {
background:
radial-gradient(ellipse at 50% 20%, rgba(110, 231, 255, 0.03), transparent 60%),
linear-gradient(180deg,
rgba(5, 5, 5, 0.58) 0%,
rgba(5, 5, 5, 0.32) 40%,
rgba(5, 5, 5, 0.7)  100%);
} .single-member__portrait::after { background:
radial-gradient(ellipse 90% 100% at 85% 50%, transparent 30%, rgba(5,5,5,0.55) 78%, rgba(5,5,5,0.95) 100%),
linear-gradient(180deg, rgba(5,5,5,0.4) 0%, transparent 20%, transparent 80%, rgba(5,5,5,0.6) 100%);
}  :root {
--hundred-particles-pattern:
radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,0.6) 100%, transparent),
radial-gradient(1.2px 1.2px at 40% 70%, rgba(110,231,255,0.55) 100%, transparent),
radial-gradient(0.9px 0.9px at 60% 20%, rgba(255,255,255,0.5) 100%, transparent),
radial-gradient(1.6px 1.6px at 80% 60%, rgba(110,231,255,0.4) 100%, transparent),
radial-gradient(0.8px 0.8px at 15% 85%, rgba(255,255,255,0.5) 100%, transparent),
radial-gradient(1.2px 1.2px at 90% 15%, rgba(110,231,255,0.5) 100%, transparent),
radial-gradient(0.7px 0.7px at 35% 45%, rgba(255,255,255,0.4) 100%, transparent),
radial-gradient(1.0px 1.0px at 70% 90%, rgba(110,231,255,0.4) 100%, transparent),
radial-gradient(1.1px 1.1px at 50% 10%, rgba(255,255,255,0.5) 100%, transparent),
radial-gradient(0.9px 0.9px at 5% 55%, rgba(110,231,255,0.5) 100%, transparent);
--hundred-particles-tile-w: 200px;
--hundred-particles-tile-h: 200px;
} .card[data-slug] .card__portrait,
.card__portrait {
background:
var(--hundred-particles-pattern),
radial-gradient(ellipse at 50% 30%, rgba(20,28,40,0.85) 0%, #050810 100%);
background-size:
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
100% 100%;
background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
} .card__noise { opacity: 0.08; } .single-member__bg-graphic {
background:
var(--hundred-particles-pattern),
radial-gradient(ellipse at 25% 15%, #0e1a24 0%, #050506 65%);
background-size:
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
var(--hundred-particles-tile-w) var(--hundred-particles-tile-h),
100% 100%;
background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
animation: hundred-particles-drift 40s linear infinite;
}
@keyframes hundred-particles-drift {
0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
100% { background-position:
-200px 200px, 200px -200px, -200px -200px, 200px 200px,
-200px 200px, 200px -200px, -200px -200px, 200px 200px,
-200px 200px, 200px -200px, 0 0; }
}  .single-member__hero { position: relative; overflow: hidden; isolation: isolate; } .single-member__bg-graphic { z-index: 0; }
.single-member__bg-noise,
.single-member__bg-rays { z-index: 0; } .single-member__portrait {
position: absolute;
top: 0; right: 0;
width: 62%;
height: 100%;
z-index: 2;
overflow: hidden;
} .single-member__portrait::after { content: none; }
.single-member__img {
position: relative;
z-index: 3;
} .talent-logo-3d { z-index: 1; } .single-member__title-wrap {
padding: 60px clamp(24px, 5vw, 80px) 40px;
max-width: 100%;
position: relative;
z-index: 3;
background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.6) 40%, var(--hundred-bg) 100%);
margin-top: -80px; }
.single-member__reading {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.5em;
color: var(--hundred-accent);
text-transform: none;
margin-bottom: 12px;
}
.single-member__title {
font-family: 'Inter', sans-serif;
font-size: clamp(56px, 10vw, 148px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 0.92;
color: var(--hundred-text);
margin-bottom: 20px;
}
.single-member__catch {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(14px, 1.4vw, 18px);
letter-spacing: 0.1em;
color: var(--hundred-muted);
max-width: 720px;
} .single-member__hero {
padding-bottom: 40px;
min-height: 78vh;
} .card__meta-idx {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: 14px;
letter-spacing: 0.05em;
color: var(--hundred-accent);
text-shadow: 0 0 10px rgba(110, 231, 255, 0.4);
} @media (max-width: 900px) {
.single-member__portrait { width: 100%; opacity: 0.6; }
.single-member__title-wrap { margin-top: -40px; padding-top: 40px; }
}  :root { --hundred-nebula-clouds:
radial-gradient(ellipse 45% 35% at 22% 28%, rgba(110,231,255,0.14) 0%, rgba(110,231,255,0.06) 40%, transparent 70%),
radial-gradient(ellipse 38% 42% at 78% 62%, rgba(200,180,255,0.10) 0%, rgba(160,140,240,0.04) 45%, transparent 75%),
radial-gradient(ellipse 55% 25% at 45% 82%, rgba(80,180,255,0.09) 0%, transparent 65%),
radial-gradient(ellipse 30% 40% at 88% 18%, rgba(255,255,255,0.06) 0%, transparent 60%); --hundred-stars-dense: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'><g fill='%23ffffff'><circle cx='45' cy='60' r='0.7' opacity='0.85'/><circle cx='80' cy='55' r='0.5' opacity='0.6'/><circle cx='115' cy='72' r='0.9' opacity='0.9'/><circle cx='145' cy='45' r='0.4' opacity='0.5'/><circle cx='170' cy='80' r='0.6' opacity='0.7'/><circle cx='200' cy='68' r='1.1' opacity='0.95'/><circle cx='230' cy='38' r='0.5' opacity='0.6'/><circle cx='268' cy='75' r='0.7' opacity='0.8'/><circle cx='305' cy='42' r='0.6' opacity='0.7'/><circle cx='340' cy='68' r='0.8' opacity='0.85'/><circle cx='375' cy='55' r='0.5' opacity='0.6'/><circle cx='55' cy='125' r='0.6' opacity='0.7'/><circle cx='90' cy='140' r='0.4' opacity='0.5'/><circle cx='130' cy='118' r='0.8' opacity='0.85'/><circle cx='175' cy='135' r='0.5' opacity='0.65'/><circle cx='210' cy='105' r='0.7' opacity='0.8'/><circle cx='245' cy='142' r='0.4' opacity='0.55'/><circle cx='280' cy='118' r='0.9' opacity='0.9'/><circle cx='320' cy='105' r='0.5' opacity='0.65'/><circle cx='362' cy='138' r='0.6' opacity='0.75'/><circle cx='68' cy='195' r='0.5' opacity='0.7'/><circle cx='105' cy='210' r='0.9' opacity='0.9'/><circle cx='142' cy='188' r='0.6' opacity='0.75'/><circle cx='188' cy='198' r='0.4' opacity='0.55'/><circle cx='222' cy='215' r='0.7' opacity='0.8'/><circle cx='260' cy='192' r='0.5' opacity='0.65'/><circle cx='298' cy='210' r='1' opacity='0.95'/><circle cx='340' cy='195' r='0.4' opacity='0.55'/><circle cx='380' cy='215' r='0.7' opacity='0.8'/><circle cx='42' cy='268' r='0.8' opacity='0.85'/><circle cx='85' cy='285' r='0.5' opacity='0.65'/><circle cx='125' cy='262' r='0.4' opacity='0.55'/><circle cx='160' cy='275' r='0.6' opacity='0.75'/><circle cx='198' cy='290' r='0.9' opacity='0.9'/><circle cx='238' cy='265' r='0.5' opacity='0.65'/><circle cx='278' cy='282' r='0.7' opacity='0.8'/><circle cx='318' cy='268' r='0.5' opacity='0.65'/><circle cx='358' cy='285' r='0.4' opacity='0.55'/><circle cx='60' cy='340' r='0.6' opacity='0.75'/><circle cx='100' cy='355' r='0.5' opacity='0.65'/><circle cx='138' cy='332' r='0.9' opacity='0.9'/><circle cx='178' cy='348' r='0.4' opacity='0.55'/><circle cx='220' cy='362' r='0.7' opacity='0.8'/><circle cx='258' cy='335' r='0.5' opacity='0.65'/><circle cx='295' cy='352' r='0.6' opacity='0.75'/><circle cx='335' cy='340' r='0.8' opacity='0.85'/><circle cx='378' cy='358' r='0.5' opacity='0.65'/></g><g fill='%236ee7ff'><circle cx='125' cy='95' r='1.2' opacity='0.9'/><circle cx='262' cy='158' r='1.1' opacity='0.85'/><circle cx='55' cy='232' r='0.9' opacity='0.75'/><circle cx='188' cy='245' r='1.3' opacity='0.95'/><circle cx='330' cy='232' r='0.9' opacity='0.75'/><circle cx='95' cy='378' r='1.1' opacity='0.85'/><circle cx='265' cy='388' r='0.9' opacity='0.75'/></g></svg>"); --hundred-stars-sparse: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'><g fill='%23ffffff' opacity='0.5'><circle cx='58' cy='142' r='0.4'/><circle cx='215' cy='85' r='0.5'/><circle cx='388' cy='198' r='0.4'/><circle cx='562' cy='105' r='0.5'/><circle cx='648' cy='285' r='0.4'/><circle cx='92' cy='398' r='0.4'/><circle cx='268' cy='465' r='0.5'/><circle cx='452' cy='352' r='0.4'/><circle cx='595' cy='510' r='0.5'/><circle cx='138' cy='608' r='0.4'/><circle cx='325' cy='642' r='0.4'/><circle cx='498' cy='595' r='0.5'/></g></svg>");
} .card[data-slug] .card__portrait,
.card__portrait {
background:
var(--hundred-stars-sparse),
var(--hundred-stars-dense),
var(--hundred-nebula-clouds),
radial-gradient(ellipse at 30% 25%, #101820 0%, #050810 100%);
background-size:
700px 700px,
420px 420px,
100% 100%,
100% 100%;
background-repeat: repeat, repeat, no-repeat, no-repeat;
background-position: center, center, center, center;
} .single-member__bg-graphic {
background:
var(--hundred-stars-sparse),
var(--hundred-stars-dense),
var(--hundred-nebula-clouds),
radial-gradient(ellipse at 25% 15%, #0e1a24 0%, #050506 65%);
background-size:
700px 700px,
420px 420px,
100% 100%,
100% 100%;
background-repeat: repeat, repeat, no-repeat, no-repeat;
background-position: center, center, center, center;
animation: hundred-galaxy-drift 60s linear infinite;
}
@keyframes hundred-galaxy-drift {
0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
100% { background-position: -700px 350px, 420px -420px, 0 0, 0 0; }
} .single-member__hero {
position: relative;
z-index: 5;
isolation: isolate;
}
.hundred-particles-bg { display: none; }
body.single-member .hundred-particles-bg,
.single-member .hundred-particles-bg { display: none !important; }
.single-member__portrait { z-index: 4; }
.single-member__img { z-index: 5; position: relative; } .talent-logo-3d {
width:  min(52vw, 720px);
height: min(52vw, 720px);
top: 42%;
left: 24%;
}
@media (max-width: 900px) {
.talent-logo-3d { width: 70vw; height: 70vw; top: 30%; left: 50%; }
} .single-member__title-wrap {
margin-top: 0;
padding: 100px clamp(24px, 5vw, 80px) 60px;
max-width: 62%;
background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.6) 30%, var(--hundred-bg) 100%);
}
@media (max-width: 900px) {
.single-member__title-wrap { max-width: 100%; padding-top: 60px; }
} .single-member__block-label--display {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 40px;
font-family: 'Inter', sans-serif;
color: var(--hundred-accent);
}
.single-member__block-label--display .single-member__block-label-dash {
display: inline-block;
font-size: clamp(48px, 6vw, 92px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.05em;
color: var(--hundred-accent);
text-shadow: 0 0 30px rgba(110, 231, 255, 0.4);
animation: hundred-dash-slide 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transform-origin: right center;
}
@keyframes hundred-dash-slide {
0%   { transform: scaleX(0); opacity: 0; }
60%  { transform: scaleX(1.3); opacity: 1; }
100% { transform: scaleX(1); opacity: 1; }
}
.single-member__block-label--display .single-member__block-label-text {
display: inline-block;
font-size: clamp(38px, 5vw, 76px);
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1;
color: var(--hundred-accent);
text-shadow: 0 0 20px rgba(110, 231, 255, 0.35);
} .single-member__prose,
.single-member__prose p {
font-size: clamp(14px, 1.1vw, 16px);
line-height: 2;
color: var(--hundred-text);
max-width: 780px;
} .tag { transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .tag--hip-hop, .tag--hiphop, .tag--rap, .tag--trap {
color: #ff4d4d;
border-color: rgba(255,77,77,0.55);
box-shadow: 0 0 12px rgba(255,77,77,0.25);
} .tag--house, .tag--tech-house, .tag--deep-house, .tag--future-house {
color: #6ee7ff;
border-color: rgba(110,231,255,0.55);
box-shadow: 0 0 12px rgba(110,231,255,0.25);
} .tag--techno, .tag--big-room-techno, .tag--minimal-techno {
color: #9d7dff;
border-color: rgba(157,125,255,0.55);
box-shadow: 0 0 12px rgba(157,125,255,0.25);
} .tag--trance, .tag--psy-trance {
color: #ff6ec7;
border-color: rgba(255,110,199,0.55);
box-shadow: 0 0 12px rgba(255,110,199,0.25);
} .tag--big-room, .tag--edm, .tag--electro-house {
color: #ff9d4d;
border-color: rgba(255,157,77,0.55);
box-shadow: 0 0 12px rgba(255,157,77,0.25);
} .tag--drum-and-bass, .tag--dnb, .tag--jungle {
color: #b8ff4d;
border-color: rgba(184,255,77,0.55);
box-shadow: 0 0 12px rgba(184,255,77,0.25);
} .tag--garage, .tag--uk-garage, .tag--2-step {
color: #4dfff5;
border-color: rgba(77,255,245,0.55);
box-shadow: 0 0 12px rgba(77,255,245,0.25);
} .tag--latin, .tag--laten, .tag--afro, .tag--amapiano, .tag--reggaeton {
color: #ffe14d;
border-color: rgba(255,225,77,0.55);
box-shadow: 0 0 12px rgba(255,225,77,0.25);
} .tag--pop, .tag--pops, .tag--open-format, .tag--top-40 {
color: #ffffff;
border-color: rgba(255,255,255,0.55);
box-shadow: 0 0 12px rgba(255,255,255,0.15);
} .site-header__logo-link {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
transition: opacity 0.3s ease;
}
.site-header__logo-icon {
width: 52px;
height: auto;
max-height: 40px;
object-fit: contain;
display: block;
filter: brightness(0) invert(1);
opacity: 0.98;
transition: filter 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header__logo-link:hover .site-header__logo-icon {
filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(110, 231, 255, 0.7));
transform: scale(1.08) rotate(-2deg);
} .site-header .custom-logo-link { display: none; }
@media (max-width: 700px) {
.site-header__logo-icon { width: 44px; max-height: 34px; }
} .single-member__block-label--display {
display: block; position: relative;
padding-left: 0;
margin-bottom: 40px;
}
.single-member__block-label--display .single-member__block-label-dash {
position: absolute;
right: calc(100% + 24px); top: 0;
line-height: 1;
white-space: nowrap;
}
.single-member__block-label--display .single-member__block-label-text {
display: inline-block; } @media (max-width: 900px) {
.single-member__block-label--display .single-member__block-label-dash {
position: static;
display: inline-block;
margin-right: 16px;
}
.single-member__block-label--display { padding-left: 0; }
}  .site-header__logo-icon {
width: 72px;
max-height: 56px;
}
@media (max-width: 700px) {
.site-header__logo-icon { width: 56px; max-height: 44px; }
} .single-member[data-slug="trid3nt"] .single-member__img {
object-position: 78% 22%;
} .hero {
transition: opacity 0.9s ease-out;
will-change: opacity;
}
.hero.is-fading {
opacity: 0.2;
}
.hero__particles,
.hero__overlay {
transition: opacity 1.1s ease-out, transform 1.5s ease-out;
}
.hero.is-fading .hero__particles {
opacity: 0.05;
transform: scale(0.92);
}
.hero.is-fading .hero__overlay {
opacity: 0.2;
} .manifesto {
position: relative;
}
.manifesto__bg-img {
opacity: 0;
transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}
.manifesto.is-emerging .manifesto__bg-img {
opacity: 0.42;
}
.manifesto__scrim {
opacity: 0.65;
transition: opacity 1.4s ease-out;
}
.manifesto.is-emerging .manifesto__scrim {
opacity: 1;
} .site-header__logo-icon {
width: 80px !important;
height: 80px !important;
max-height: 80px !important;
object-fit: contain; filter: none;
}
@media (max-width: 700px) {
.site-header__logo-icon {
width: 60px !important;
height: 60px !important;
max-height: 60px !important;
}
}  .card[data-slug] .card__portrait,
.card__portrait {
background:
url(//hundred.jp/wp-content/themes/hundred-theme/assets/images/galaxy-bg.svg),
radial-gradient(ellipse at 30% 25%, #101820 0%, #050810 100%) !important;
background-size: cover, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
}
.single-member__bg-graphic {
background:
url(//hundred.jp/wp-content/themes/hundred-theme/assets/images/galaxy-bg.svg),
radial-gradient(ellipse at 25% 15%, #0e1a24 0%, #050506 65%) !important;
background-size: cover, 100% 100% !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
animation: hundred-galaxy-pan 90s linear infinite alternate;
}
@keyframes hundred-galaxy-pan {
0%   { background-position: 20% 30%, center; }
100% { background-position: 80% 70%, center; }
}.about-hero {
position: relative;
padding: 200px clamp(24px, 5vw, 80px) 120px;
z-index: 1;
}
.about-hero__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 80px;
}
.about-hero__num { color: var(--hundred-accent); font-weight: 700; }
.about-hero__title-wrap {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 80px;
padding-bottom: 60px;
border-bottom: 1px solid var(--hundred-line);
}
.about-hero__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(56px, 11vw, 180px);
letter-spacing: -0.03em;
line-height: 0.88;
color: var(--hundred-text);
}
.about-hero__title em {
font-style: italic;
font-weight: 400;
color: var(--hundred-muted);
}
.about-hero__hint {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
max-width: 260px;
text-align: right;
padding-bottom: 20px;
}
.about-hero__lead {
max-width: 780px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 2.1;
color: var(--hundred-text);
}
.about-hero__lead p { margin-bottom: 24px; }
.about-hero__lead p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.about-hero__title-wrap { grid-template-columns: 1fr; }
.about-hero__hint { text-align: left; padding-bottom: 0; }
} .mvv {
position: relative;
padding: 160px clamp(24px, 5vw, 80px);
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.mvv__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 100px;
}
.mvv__num { color: var(--hundred-accent); font-weight: 700; }
.mvv__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
}
.mvv__item {
padding-top: 24px;
}
.mvv__label {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--hundred-accent);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 24px;
}
.mvv__title {
font-family: 'Inter', sans-serif;
font-size: clamp(40px, 5vw, 80px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
color: var(--hundred-text);
margin-bottom: 32px;
}
.mvv__body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 18px;
line-height: 1.9;
color: var(--hundred-muted);
font-weight: 500;
}
@media (max-width: 900px) {
.mvv__grid { grid-template-columns: 1fr; gap: 40px; }
} .values-grid {
position: relative;
padding: 200px clamp(24px, 5vw, 80px);
background: var(--hundred-bg);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.values-grid__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 100px;
}
.values-grid__num { color: var(--hundred-accent); font-weight: 700; }
.values-grid__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(56px, 12vw, 200px);
letter-spacing: -0.03em;
line-height: 0.88;
color: var(--hundred-text);
margin-bottom: 120px;
}
.values-grid__title em {
font-style: italic;
font-weight: 400;
color: var(--hundred-muted);
}
.values-grid__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.value-card {
padding: 40px 40px 48px;
border: 1px solid var(--hundred-line);
background: var(--hundred-bg-card);
transition: border-color 0.4s ease, transform 0.4s ease;
position: relative;
overflow: hidden;
}
.value-card:hover {
border-color: var(--hundred-accent);
transform: translateY(-4px);
}
.value-card::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 80px;
height: 1px;
background: var(--hundred-accent);
}
.value-card__num {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(80px, 10vw, 160px);
line-height: 0.85;
letter-spacing: -0.05em;
color: var(--hundred-accent);
margin-bottom: 24px;
display: block;
}
.value-card__title {
font-family: 'Inter', sans-serif;
font-size: clamp(28px, 3vw, 44px);
font-weight: 900;
letter-spacing: -0.02em;
color: var(--hundred-text);
margin-bottom: 12px;
line-height: 1;
}
.value-card__ja {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
letter-spacing: 0.2em;
color: var(--hundred-accent);
margin-bottom: 24px;
font-weight: 700;
}
.value-card__body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 1.95;
color: var(--hundred-muted);
}
@media (max-width: 900px) {
.values-grid__list { grid-template-columns: 1fr; }
.value-card { padding: 32px 24px; }
} .company-info {
position: relative;
padding: 200px clamp(24px, 5vw, 80px);
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.company-info__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 80px;
}
.company-info__num { color: var(--hundred-accent); font-weight: 700; }
.company-info__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 9vw, 140px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 100px;
}
.company-info__title em {
font-style: italic;
font-weight: 400;
color: var(--hundred-muted);
}
.company-info__list {
max-width: 1000px;
}
.company-info__row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 40px;
align-items: baseline;
padding: 24px 0;
border-bottom: 1px solid var(--hundred-line);
}
.company-info__row:first-child { border-top: none; padding-top: 24px; }
.company-info__label {
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--hundred-accent);
text-transform: uppercase;
font-weight: 700;
margin: 0;
}
.company-info__value {
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 1.85;
color: var(--hundred-text);
margin: 0;
}
.company-info__value .muted {
color: var(--hundred-muted);
font-size: 13px;
margin-left: 8px;
}
.company-info__value a {
color: var(--hundred-accent);
border-bottom: 1px solid var(--hundred-line);
}
.company-info__value a:hover { border-color: var(--hundred-accent); }
.company-info__biz {
list-style: none;
padding: 0;
margin: 0;
counter-reset: biz;
}
.company-info__biz li {
counter-increment: biz;
padding: 4px 0 4px 40px;
position: relative;
}
.company-info__biz li::before {
content: '(' counter(biz) ')';
position: absolute;
left: 0;
color: var(--hundred-accent);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 13px;
}
@media (max-width: 700px) {
.company-info__row { grid-template-columns: 1fr; gap: 8px; }
} .access {
position: relative;
padding: 200px clamp(24px, 5vw, 80px);
background: var(--hundred-bg);
border-top: 1px solid var(--hundred-line);
z-index: 1;
}
.access__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 80px;
}
.access__num { color: var(--hundred-accent); font-weight: 700; }
.access__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 9vw, 140px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 100px;
}
.access__title em { font-style: italic; font-weight: 400; color: var(--hundred-muted); }
.access__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.access__card {
padding: 40px;
border: 1px solid var(--hundred-line);
background: var(--hundred-bg-card);
transition: border-color 0.4s ease;
}
.access__card:hover { border-color: var(--hundred-accent); }
.access__label {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--hundred-accent);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 24px;
}
.access__name {
font-family: 'Inter', sans-serif;
font-size: clamp(28px, 3vw, 40px);
font-weight: 900;
letter-spacing: -0.01em;
color: var(--hundred-text);
margin-bottom: 24px;
}
.access__address {
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 1.9;
color: var(--hundred-text);
margin-bottom: 24px;
font-style: normal;
padding-bottom: 24px;
border-bottom: 1px solid var(--hundred-line);
}
.access__note {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
line-height: 1.85;
color: var(--hundred-muted);
}
@media (max-width: 900px) {
.access__grid { grid-template-columns: 1fr; }
} .about-cta {
position: relative;
padding: 200px clamp(24px, 5vw, 80px);
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
text-align: center;
z-index: 1;
}
.about-cta__meta {
display: flex;
justify-content: space-between;
text-align: left;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 80px;
}
.about-cta__num { color: var(--hundred-accent); font-weight: 700; }
.about-cta__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 10vw, 180px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 60px;
}
.about-cta__title em { font-style: italic; font-weight: 400; color: var(--hundred-muted); }
.about-cta__body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 1.9;
color: var(--hundred-muted);
max-width: 620px;
margin: 0 auto 60px;
}
.about-cta__buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}  .services-hero {
position: relative;
padding: 200px clamp(24px, 5vw, 80px) 80px;
z-index: 1;
}
.services-hero__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 80px;
}
.services-hero__num { color: var(--hundred-accent); font-weight: 700; }
.services-hero__title-wrap {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
padding-bottom: 40px;
margin-bottom: 60px;
border-bottom: 1px solid var(--hundred-line);
}
.services-hero__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(64px, 14vw, 240px);
letter-spacing: -0.04em;
line-height: 0.85;
color: var(--hundred-text);
}
.services-hero__count {
font-family: 'Inter', sans-serif;
font-size: 13px;
letter-spacing: 0.25em;
color: var(--hundred-muted);
text-align: right;
text-transform: uppercase;
padding-bottom: 20px;
}
.services-hero__count strong { color: var(--hundred-accent); font-weight: 900; }
.services-hero__count-big {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 900;
color: var(--hundred-text);
letter-spacing: 0;
margin-bottom: 4px;
}
.services-hero__lead {
max-width: 780px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 2.1;
color: var(--hundred-muted);
} .services-list-archive {
position: relative;
padding: 80px clamp(24px, 5vw, 80px) 200px;
z-index: 1;
}
.services-list { display: grid; gap: 0; }
.services-list__item {
display: grid;
grid-template-columns: 80px 1fr 200px 40px;
align-items: center;
gap: 40px;
padding: 40px 0;
border-top: 1px solid var(--hundred-line);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.services-list__item:last-child { border-bottom: 1px solid var(--hundred-line); }
.services-list__item:hover {
padding-left: 24px;
padding-right: 24px;
background: rgba(255,255,255,0.02);
}
.services-list__item:hover .services-list__name { color: var(--hundred-accent); }
.services-list__item:hover .services-list__arrow {
transform: translateX(8px);
color: var(--hundred-accent);
}
.services-list__idx {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 900;
color: var(--hundred-accent);
letter-spacing: -0.02em;
}
.services-list__body {
display: flex;
flex-direction: column;
gap: 8px;
}
.services-list__name {
font-family: 'Inter', sans-serif;
font-size: clamp(24px, 3vw, 42px);
font-weight: 900;
letter-spacing: -0.01em;
color: var(--hundred-text);
transition: color 0.4s ease;
margin: 0;
line-height: 1;
}
.services-list__tagline {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
color: var(--hundred-muted);
line-height: 1.7;
margin: 0;
}
.services-list__thumb img {
width: 100%;
height: 100px;
object-fit: cover;
border: 1px solid var(--hundred-line);
}
.services-list__arrow {
font-family: 'Inter', sans-serif;
font-size: 24px;
color: var(--hundred-muted);
transition: transform 0.4s ease, color 0.4s ease;
text-align: right;
}
.services-list__empty {
padding: 80px 0;
text-align: center;
color: var(--hundred-muted);
font-style: italic;
}
@media (max-width: 900px) {
.services-list__item { grid-template-columns: 60px 1fr 30px; gap: 20px; }
.services-list__thumb { display: none; }
}  .service-hero {
position: relative;
padding: 160px clamp(24px, 5vw, 80px) 100px;
overflow: hidden;
z-index: 1;
}
.service-hero__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 80px;
}
.service-hero__idx { color: var(--hundred-accent); font-weight: 700; }
.service-hero__breadcrumb a {
color: var(--hundred-muted);
transition: color 0.3s ease;
}
.service-hero__breadcrumb a:hover { color: var(--hundred-accent); }
.service-hero__inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(24px, 5vw, 80px);
align-items: start;
position: relative;
}
.service-hero__idx-big {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(120px, 20vw, 320px);
line-height: 0.85;
letter-spacing: -0.05em;
color: var(--hundred-accent);
opacity: 0.9;
}
.service-hero__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(40px, 7vw, 120px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 32px;
word-break: keep-all;
}
.service-hero__tagline {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(15px, 1.6vw, 20px);
letter-spacing: 0.15em;
color: var(--hundred-accent);
margin-bottom: 24px;
font-weight: 700;
}
.service-hero__subtitle {
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 1.9;
color: var(--hundred-muted);
max-width: 620px;
}
.service-hero__bg {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
z-index: -1;
opacity: 0.15;
pointer-events: none;
}
.service-hero__bg img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1) contrast(1.2);
}
@media (max-width: 900px) {
.service-hero__inner { grid-template-columns: 1fr; }
.service-hero__idx-big { font-size: 120px; }
} .service-section {
position: relative;
padding: 100px clamp(24px, 5vw, 80px);
border-top: 1px solid var(--hundred-line);
z-index: 1;
max-width: 1400px;
margin: 0 auto;
}
.service-section__label {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--hundred-accent);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 40px;
}
.service-section__desc {
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
color: var(--hundred-muted);
line-height: 1.85;
max-width: 720px;
margin-bottom: 40px;
}
.service-section__prose {
font-family: 'Noto Sans JP', sans-serif;
font-size: 17px;
line-height: 2.05;
color: var(--hundred-text);
max-width: 820px;
}
.service-section__prose p { margin-bottom: 24px; } .service-offers {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
.service-offers__item {
display: flex;
align-items: baseline;
gap: 16px;
padding: 20px 24px;
border: 1px solid var(--hundred-line);
background: var(--hundred-bg-card);
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
color: var(--hundred-text);
line-height: 1.7;
transition: border-color 0.3s ease;
}
.service-offers__item:hover {
border-color: var(--hundred-accent);
}
.service-offers__bullet {
color: var(--hundred-accent);
font-family: 'Inter', sans-serif;
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
@media (max-width: 700px) {
.service-offers { grid-template-columns: 1fr; }
} .service-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 40px 0;
border-top: 1px solid var(--hundred-line);
border-bottom: 1px solid var(--hundred-line);
}
.service-info-label {
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 12px;
}
.service-info__label {
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 16px;
}
.service-info__value {
font-family: 'Inter', sans-serif;
font-size: 18px;
line-height: 1.6;
color: var(--hundred-text);
}
.service-info__value a {
color: var(--hundred-accent);
border-bottom: 1px solid var(--hundred-line);
}
@media (max-width: 700px) {
.service-info-grid { grid-template-columns: 1fr; gap: 24px; }
} .service-cases {
list-style: none;
padding: 0;
margin: 0;
counter-reset: cases;
}
.service-cases__item {
counter-increment: cases;
display: block;
padding: 24px 24px 24px 80px;
border-bottom: 1px solid var(--hundred-line);
position: relative;
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
line-height: 1.85;
color: var(--hundred-text);
}
.service-cases__item::before {
content: counter(cases, decimal-leading-zero);
position: absolute;
left: 24px;
top: 24px;
color: var(--hundred-accent);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.15em;
} .service-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.service-related-card {
display: block;
text-decoration: none;
background: var(--hundred-bg-card);
border: 1px solid var(--hundred-line);
transition: border-color 0.4s ease, transform 0.4s ease;
}
.service-related-card:hover {
border-color: var(--hundred-accent);
transform: translateY(-4px);
}
.service-related-card:hover .service-related-card__name { color: var(--hundred-accent); }
.service-related-card__portrait {
aspect-ratio: 3 / 4;
overflow: hidden;
background: linear-gradient(180deg, #0f0f12 0%, #06060a 100%);
display: flex;
align-items: center;
justify-content: center;
}
.service-related-card__portrait img {
width: 100%; height: 100%; object-fit: cover;
}
.service-related-card__initial {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(60px, 8vw, 120px);
color: rgba(255,255,255,0.08);
letter-spacing: -0.08em;
}
.service-related-card__label {
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1px solid var(--hundred-line);
}
.service-related-card__name {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 900;
color: var(--hundred-text);
transition: color 0.3s ease;
}
.service-related-card__role {
font-family: 'Inter', sans-serif;
font-size: 9px;
color: var(--hundred-muted);
letter-spacing: 0.2em;
text-transform: uppercase;
}
@media (max-width: 900px) {
.service-related-grid { grid-template-columns: repeat(2, 1fr); }
} .service-cta {
position: relative;
padding: 160px clamp(24px, 5vw, 80px);
background: var(--hundred-bg-soft);
border-top: 1px solid var(--hundred-line);
text-align: center;
z-index: 1;
}
.service-cta__meta {
display: flex;
justify-content: space-between;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--hundred-muted);
text-transform: uppercase;
margin-bottom: 60px;
text-align: left;
}
.service-cta__num { color: var(--hundred-accent); font-weight: 700; }
.service-cta__title {
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(48px, 10vw, 160px);
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--hundred-text);
margin-bottom: 60px;
}
.service-cta__title em { font-style: italic; font-weight: 400; color: var(--hundred-muted); }
.service-cta__buttons {
display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
} .service-nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
padding: 60px clamp(24px, 5vw, 80px);
border-top: 1px solid var(--hundred-line);
align-items: center;
position: relative;
z-index: 1;
}
.service-nav__prev,
.service-nav__next {
display: flex;
flex-direction: column;
gap: 8px;
text-decoration: none;
color: var(--hundred-text);
transition: color 0.3s ease;
}
.service-nav__next { text-align: right; align-items: flex-end; }
.service-nav__prev:hover,
.service-nav__next:hover { color: var(--hundred-accent); }
.service-nav__label {
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.25em;
color: var(--hundred-muted);
text-transform: uppercase;
}
.service-nav__name {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 900;
}
.service-nav__all {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border: 1px solid var(--hundred-line);
color: var(--hundred-muted);
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.service-nav__all:hover {
border-color: var(--hundred-accent);
color: var(--hundred-accent);
}.addtoany_content{clear:both;margin:16px auto}.addtoany_header{margin:0 0 16px}.addtoany_list{display:inline;line-height:16px}.a2a_kit a:empty,.a2a_kit a[class^="a2a_button_"]:has(.a2a_s_undefined){display:none}.addtoany_list a,.widget .addtoany_list a{border:0;box-shadow:none;display:inline-block;font-size:16px;padding:0 4px;vertical-align:middle}.addtoany_list a img{border:0;display:inline-block;opacity:1;overflow:hidden;vertical-align:baseline}.addtoany_list a span{display:inline-block;float:none}.addtoany_list.a2a_kit_size_32 a{font-size:32px}.addtoany_list.a2a_kit_size_32 a:not(.addtoany_special_service)>span{height:32px;line-height:32px;width:32px}.addtoany_list a:not(.addtoany_special_service)>span{border-radius:4px;display:inline-block;opacity:1}.addtoany_list a .a2a_count{position:relative;vertical-align:top}.site .a2a_kit.addtoany_list a:focus,.addtoany_list a:hover,.widget .addtoany_list a:hover{background:none;border:0;box-shadow:none}.addtoany_list a:hover img,.addtoany_list a:hover span{opacity:.7}.addtoany_list a.addtoany_special_service:hover img,.addtoany_list a.addtoany_special_service:hover span{opacity:1}.addtoany_special_service{display:inline-block;vertical-align:middle}.addtoany_special_service a,.addtoany_special_service div,.addtoany_special_service div.fb_iframe_widget,.addtoany_special_service iframe,.addtoany_special_service span{margin:0;vertical-align:baseline!important}.addtoany_special_service iframe{display:inline;max-width:none}a.addtoany_share.addtoany_no_icon span.a2a_img_text{display:none}a.addtoany_share img{border:0;width:auto;height:auto}