*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0
}

:root {
--bg: #080808;
--bg2: #0d0d0d;
--bg3: #131313;
--bg4: #1a1a1a;
--white: #f0f0ee;
--off: #f7f7f5;
--gray: #555;
--gray2: #888;
--gray3: #aaa;
--rule: #1c1c1c;
--rule2: #d5d5d5;
--card: #111;
--accent: #C9A264;
--accent-dim: rgba(201, 162, 100, .12);
}

html {
scroll-behavior: smooth
}

body {
background: var(--bg);
color: var(--white);
font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
cursor: none
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
}

ul li {
	list-style-type: none;
}

/* ── ENERGETIC BACKGROUND LINES (UPDATED: STRONG) ── */
.bg-energetic {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0
}

.bg-line {
position: absolute;
transform-origin: center;
filter: blur(3px)
}

/* Dark theme lines (Mix-blend-mode: screen) */
.bg-line.dark-1 {
width: 200%;
height: 350px;
top: -10%;
left: -50%;
transform: rotate(-25deg);
background: linear-gradient(90deg, transparent 10%, rgba(201, 162, 100, .18) 50%, transparent 90%);
mix-blend-mode: screen;
}

.bg-line.dark-2 {
width: 200%;
height: 180px;
top: 50%;
left: -50%;
transform: rotate(45deg);
background: linear-gradient(90deg, transparent 10%, rgba(201, 162, 100, .15) 50%, transparent 90%);
mix-blend-mode: screen;
}

.bg-line.dark-3 {
width: 200%;
height: 500px;
top: 70%;
left: -50%;
transform: rotate(-65deg);
background: linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, .06) 50%, transparent 90%);
mix-blend-mode: screen;
}

/* Light theme lines (Mix-blend-mode: multiply) */
.bg-line.light-1 {
width: 200%;
height: 250px;
top: 10%;
left: -50%;
transform: rotate(-35deg);
background: linear-gradient(90deg, transparent 10%, rgba(201, 162, 100, .3) 50%, transparent 90%);
mix-blend-mode: multiply;
}

.bg-line.light-2 {
width: 200%;
height: 450px;
top: 50%;
left: -50%;
transform: rotate(20deg);
background: linear-gradient(90deg, transparent 10%, rgba(0, 0, 0, .08) 50%, transparent 90%);
mix-blend-mode: multiply;
}

.bg-line.light-3 {
width: 200%;
height: 200px;
bottom: -10%;
left: -50%;
transform: rotate(-55deg);
background: linear-gradient(90deg, transparent 10%, rgba(201, 162, 100, .25) 50%, transparent 90%);
mix-blend-mode: multiply;
}

/* ── LOADER ── */
#loader {
position: fixed;
inset: 0;
z-index: 9999;
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
transition: transform .95s cubic-bezier(.76, 0, .24, 1)
}

#loader.out {
transform: translateY(-100%);
pointer-events: none
}

.ld-brand {
font-size: 10px;
font-weight: 500;
letter-spacing: .45em;
text-transform: uppercase;
color: #2a2a2a
}

.ld-num {
font-family: 'Bebas Neue';
font-size: clamp(80px, 12vw, 150px);
color: rgba(255, 255, 255, .07);
line-height: 1;
user-select: none;
transition: all .05s
}

.ld-bar-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #111
}

.ld-bar {
height: 100%;
background: var(--accent);
width: 0%;
transition: width .06s linear
}

.ld-cross {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden
}

.ld-cross::before,
.ld-cross::after {
content: '';
position: absolute;
left: -10%;
width: 120%;
height: 1px;
background: rgba(201, 162, 100, .06)
}

.ld-cross::before {
top: 35%;
transform: rotate(-8deg)
}

.ld-cross::after {
top: 65%;
transform: rotate(-8deg)
}

/* ── CURSOR ── */
#cur {
position: fixed;
width: 10px;
height: 10px;
background: var(--white);
border-radius: 50%;
pointer-events: none;
z-index: 9998;
top: 0;
left: 0;
transform: translate(-50%, -50%);
mix-blend-mode: exclusion;
transition: width .2s, height .2s
}

#cur.big {
width: 36px;
height: 36px
}

#cur.accent {
background: var(--accent)
}

@media(pointer:coarse) {
#cur {
display: none
}

body {
cursor: auto
}
}

/* ── PROGRESS ── */
#pgbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
background: transparent;
z-index: 1000;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(to right, var(--accent), var(--white))
}

/* ── NAV ── */
#nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 64px;
border-bottom: 1px solid transparent;
transition: background .5s, padding .35s, border-color .5s
}

#nav.sc {
background: rgba(8, 8, 8, .94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 16px 64px;
border-bottom-color: var(--rule)
}

.nav-logo {
width: 75px;
}

.nav-links {
list-style: none;
display: flex;
gap: 32px
}

.nav-links a {
text-decoration: none;
font-size: 14px;
font-weight: 500;
letter-spacing: .1em;
color: #fff;
transition: color .2s
}

.nav-links a:hover {
color: var(--accent)
}

    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      z-index: 201;
      position: relative
    }

    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--white);
      transition: transform .35s ease, opacity .25s ease, width .3s ease;
      transform-origin: center
    }

    .nav-hamburger.open span:nth-child(1) {
      transform: translateY(7.5px) rotate(45deg)
    }

    .nav-hamburger.open span:nth-child(2) {
      opacity: 0;
      width: 0
    }

    .nav-hamburger.open span:nth-child(3) {
      transform: translateY(-7.5px) rotate(-45deg)
    }

    #mob-menu {
      position: fixed;
      inset: 0;
      z-index: 99;
      background: rgba(8, 8, 8, .98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .4s ease
    }

    #mob-menu.open {
      opacity: 1;
      pointer-events: all
    }

    #mob-menu::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(-25deg, transparent 0, transparent 60px, rgba(201, 162, 100, .04) 60px, rgba(201, 162, 100, .04) 61px);
      pointer-events: none
    }

    .mob-menu-item {
      display: block;
      text-decoration: none;
      font-family: 'Bebas Neue';
      font-size: clamp(42px, 10vw, 72px);
      letter-spacing: .06em;
      color: var(--gray2);
      padding: 10px 40px;
      border-bottom: 1px solid var(--rule);
      width: 100%;
      text-align: center;
      transition: color .25s, background .25s;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .4s ease, transform .4s ease, color .25s, background .25s
    }

    #mob-menu.open .mob-menu-item {
      opacity: 1;
      transform: translateY(0)
    }

    #mob-menu.open .mob-menu-item:nth-child(1) {
      transition-delay: .08s
    }

    #mob-menu.open .mob-menu-item:nth-child(2) {
      transition-delay: .14s
    }

    #mob-menu.open .mob-menu-item:nth-child(3) {
      transition-delay: .20s
    }

    #mob-menu.open .mob-menu-item:nth-child(4) {
      transition-delay: .26s
    }

    #mob-menu.open .mob-menu-item:nth-child(5) {
      transition-delay: .32s
    }

    #mob-menu.open .mob-menu-item:nth-child(6) {
      transition-delay: .38s
    }

    .mob-menu-item:hover {
      color: var(--accent);
      background: rgba(201, 162, 100, .05)
    }

    .mob-menu-accent {
      width: 60px;
      height: 2px;
      background: var(--accent);
      margin: 36px auto 0;
      opacity: 0;
      transition: opacity .4s ease .5s
    }

    #mob-menu.open .mob-menu-accent {
      opacity: 1
    }

/* ── HERO ── */
#hero {
	margin-top: -25px;
height: 100svh;
min-height: 640px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: var(--bg3)
}

.hero-bg-dummy {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(135deg, #181818 0%, #111 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #2a2a2a;
letter-spacing: .22em;
text-transform: uppercase
}

.hero-bg-dummy img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-grad {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(to top, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .4) 45%, transparent 100%);
pointer-events: none
}

.hero-slash {
position: absolute;
top: 48%;
left: -8%;
width: 116%;
height: 1.5px;
background: linear-gradient(90deg, transparent 0%, var(--accent) 12%, var(--accent) 88%, transparent 100%);
transform: rotate(-6deg);
z-index: 3;
clip-path: inset(0 100% 0 0);
animation: slashIn 1.8s cubic-bezier(.16, 1, .3, 1) forwards .3s
}

@keyframes slashIn {
to {
clip-path: inset(0 0% 0 0)
}
}

.hero-slash2 {
position: absolute;
top: 44%;
left: -8%;
width: 116%;
height: .5px;
background: linear-gradient(90deg, transparent 0%, rgba(201, 162, 100, .3) 12%, rgba(201, 162, 100, .3) 88%, transparent 100%);
transform: rotate(-6deg);
z-index: 3;
clip-path: inset(0 100% 0 0);
animation: slashIn 1.8s cubic-bezier(.16, 1, .3, 1) forwards .55s
}

.hero-deco-r {
position: absolute;
right: 8%;
top: 22%;
z-index: 3;
display: flex;
flex-direction: column;
gap: 11px;
opacity: 0;
animation: fadeIn .9s ease forwards 1.6s
}

.hdr-line {
background: var(--accent);
transform: rotate(-32deg);
transform-origin: right center
}

.hdr-line:nth-child(1) {
width: 68px;
height: 1.5px
}

.hdr-line:nth-child(2) {
width: 48px;
height: 1px;
opacity: .65
}

.hdr-line:nth-child(3) {
width: 28px;
height: 1px;
opacity: .4
}

.hero-deco-br {
position: absolute;
right: 6%;
bottom: 14%;
z-index: 3;
opacity: 0;
animation: fadeIn .9s ease forwards 2.0s
}

.hdbr-box {
width: 40px;
height: 40px;
border: 1px solid rgba(201, 162, 100, .35);
transform: rotate(15deg)
}

@keyframes fadeIn {
to {
opacity: 1
}
}

@keyframes slideUp {
to {
transform: translateY(0)
}
}

.hero-inner {
position: relative;
z-index: 4;
padding: 0 64px 92px
}

.hero-eyebrow {
font-size: 10px;
font-weight: 500;
letter-spacing: .44em;
text-transform: uppercase;
color: var(--gray);
margin-bottom: 18px;
opacity: 0;
animation: fadeIn .8s ease forwards 2.2s
}

.hero-h1-wrap {
overflow: hidden
}

#hero-h1 {
font-family: 'Bebas Neue';
font-size: clamp(64px, 14vw, 200px);
line-height: .88;
letter-spacing: .02em;
clip-path: inset(0 100% 0 0);
animation: slashIn 1.4s cubic-bezier(.16, 1, .3, 1) forwards .9s
}

.hero-copy {
overflow: hidden;
margin-top: 22px
}

.hero-copy-i {
display: block;
font-size: clamp(14px, 1.8vw, 20px);
font-weight: 300;
color: var(--gray3);
letter-spacing: .06em;
font-family: 'Noto Sans JP';
line-height: 1.6;
transform: translateY(110%);
animation: slideUp .8s cubic-bezier(.16, 1, .3, 1) forwards 1.6s
}

.hero-scroll {
position: absolute;
right: 64px;
bottom: 72px;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
font-size: 9px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gray);
opacity: 0;
animation: fadeIn .8s ease forwards 2.4s
}

.hero-scroll-line {
display: block;
width: 1px;
height: 60px;
background: linear-gradient(to bottom, var(--accent), var(--gray));
transform: scaleY(0);
transform-origin: top;
animation: lineV 1s ease forwards 2.5s
}

@keyframes lineV {
to {
transform: scaleY(1)
}
}

/* ── TICKER ── */
.ticker {
background: var(--white);
overflow: hidden;
padding: 15px 0
}

.ticker-track {
display: flex;
white-space: nowrap;
animation: tickerRun 28s linear infinite
}

.ti {
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--bg);
padding: 0 28px;
flex-shrink: 0
}

.ti-dot {
color: var(--accent);
padding: 0 4px
}

@keyframes tickerRun {
from {
transform: translateX(0)
}

to {
transform: translateX(-50%)
}
}

/* ── SECTION COMMON ── */
section {
padding: 130px 64px
}

.wrap {
max-width: 1280px;
margin: 0 auto
}

.stag {
font-size: 9px;
font-weight: 500;
letter-spacing: .44em;
text-transform: uppercase;
margin-bottom: 52px;
display: flex;
align-items: center;
gap: 22px;
color: var(--accent)
}

.stag::after {
content: '';
flex: 1;
height: 1px
}

.stag-dark::after {
background: linear-gradient(to right, var(--accent), transparent 70%)
}

.stag-light::after {
background: linear-gradient(to right, var(--accent), var(--rule2) 70%)
}

/* ── ABOUT ── */
#about {
background: var(--bg2);
position: relative;
overflow: hidden;
padding: 150px 64px
}

.about-bg-txt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Bebas Neue';
font-size: clamp(100px, 18vw, 260px);
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .025);
white-space: nowrap;
pointer-events: none;
user-select: none
}

.about-inner {
position: relative;
z-index: 1
}

.about-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: center
}

.about-stmt {
margin-bottom: 52px
}

.stmt-outer {
overflow: hidden;
margin-bottom: .08em
}

.stmt-line {
font-size: clamp(28px, 4vw, 64px);
font-weight: 700;
letter-spacing: -.025em;
font-family: 'Noto Sans JP';
display: block;
transform: translateY(110%);
transition: transform 1.1s cubic-bezier(.16, 1, .3, 1)
}

.stmt-line.in {
transform: translateY(0)
}

.about-deco {
margin-bottom: 48px;
padding-left: 4px
}

.about-deco-line {
width: 0;
height: 2px;
background: var(--accent);
transform: rotate(-10deg);
transform-origin: left;
transition: width 1.3s cubic-bezier(.16, 1, .3, 1) .2s
}

.about-deco.in .about-deco-line {
width: 110px
}

.about-body {
font-size: 15px;
line-height: 2.1;
color: #e4e4e4;
font-family: 'Noto Sans JP';
max-width: 680px
}

.about-body p+p {
margin-top: 16px
}

/* About Image Styles */
.about-img-wrap {
position: relative;
width: 100%
}

.about-img-wrap::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(201, 162, 100, .3);
transform: translate(16px, 16px);
z-index: 0;
transition: transform .5s ease
}

.about-img-wrap:hover::before {
transform: translate(8px, 8px)
}

.about-img {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(145deg, #151515 0%, #0a0a0a 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px;
text-align: center
}

/* ── BUSINESS ── */
#business {
background: var(--off);
position: relative;
overflow: hidden
}

#business .stag {
margin-bottom: 52px
}

.biz-intro {
margin-bottom: 60px;
position: relative;
z-index: 1
}

.biz-h {
font-size: clamp(24px, 3.5vw, 42px);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.4;
color: var(--bg)
}

.biz-rows {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
z-index: 1
}

.biz-row {
display: grid;
grid-template-columns: 56px 1fr 1.1fr;
border-top: 1px solid var(--rule2);
cursor: pointer;
text-decoration: none;
color: var(--bg);
overflow: hidden;
transition: background .3s;
position: relative
}

.biz-row:last-child {
border-bottom: 1px solid var(--rule2)
}

.biz-row::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
z-index: 1
}

.biz-row:hover {
background: #f2f2f0
}

.biz-row:hover::before {
transform: scaleX(1)
}

.biz-num {
padding: 40px 16px;
font-family: 'Bebas Neue';
font-size: 20px;
color: var(--accent);
align-self: start;
margin-top: 2px;
letter-spacing: .04em
}

.biz-visual {
height: 360px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
transition: transform .55s cubic-bezier(.16, 1, .3, 1)
}

.biz-visual .img-label {
	display: block;
	width: 100%;
}

.biz-visual img {
	object-fit: cover;
	object-position: top;
	width: 100%;
	height: 100%;
	max-height: 320px;
}

.biz-row:hover .biz-visual {
transform: scale(1.04)
}

.biz-content {
padding: 44px 52px;
display: flex;
flex-direction: column;
justify-content: space-between
}

.biz-cat {
font-size: 9px;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gray2);
margin-bottom: 12px
}

.biz-name {
font-size: clamp(22px, 2.5vw, 36px);
font-weight: 700;
letter-spacing: -.02em;
margin-bottom: 16px;
line-height: 1.2
}

.biz-desc {
font-size: 14px;
line-height: 1.95;
color: #777;
margin-bottom: 32px;
font-family: 'Noto Sans JP';
}

.biz-cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--bg)
}

.biz-arrow {
display: inline-block;
transition: transform .3s, color .3s;
color: var(--accent)
}

.biz-row:hover .biz-arrow {
transform: translateX(8px)
}

/* ── NEWS ── */
#news {
background: var(--white);
color: var(--bg);
position: relative;
overflow: hidden
}

.news-head {
display: flex;
justify-content: space-between;
margin-bottom: 56px;
position: relative;
z-index: 1
}

.news-h {
font-size: clamp(26px, 3.5vw, 48px);
font-weight: 700;
letter-spacing: -.03em;
color: var(--bg)
}

.news-more {
font-size: 11px;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gray2);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: color .2s
}

.news-more span {
color: var(--accent)
}

.news-more:hover {
color: var(--bg)
}

.news-list {
display: flex;
flex-direction: column;
position: relative;
z-index: 1
}

.news-item {
display: grid;
grid-template-columns: 160px 1fr 32px;
align-items: center;
padding: 24px;
border-top: 1px solid var(--rule2);
text-decoration: none;
color: var(--bg);
gap: 32px;
position: relative;
overflow: hidden;
transition: background .25s;
border-left: 2px solid transparent
}

.news-item:last-child {
border-bottom: 1px solid var(--rule2)
}

.news-item:hover {
background: #f7f7f5;
border-left-color: var(--accent)
}

.news-item-bar {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: width .5s ease
}

.news-item:hover .news-item-bar {
width: 100%
}

.news-meta {
display: flex;
flex-direction: column;
gap: 8px
}

.news-date {
font-size: 12px;
font-weight: 500;
color: var(--gray2);
letter-spacing: .04em
}

.news-cat {
display: inline-block;
font-size: 9px;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid var(--accent);
color: var(--accent);
align-self: flex-start
}

.news-title {
font-size: clamp(14px, 1.4vw, 16px);
font-weight: 500;
line-height: 1.65;
font-family: 'Noto Sans JP'
}

.news-arrow {
font-size: 16px;
color: var(--accent);
transition: transform .3s
}

.news-item:hover .news-arrow {
transform: translateX(4px)
}

/* ── CREATORS ── */
#creators {
background: var(--bg2);
position: relative;
overflow: hidden;
padding: 150px 64px
}

.cr-card{
    display:block;
    text-decoration:none;
    color:inherit;
}

.cr-bg-txt {
position: absolute;
bottom: -2vw;
right: -1vw;
font-family: 'Bebas Neue';
font-size: clamp(80px, 14vw, 200px);
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .025);
white-space: nowrap;
pointer-events: none;
user-select: none;
letter-spacing: .05em
}

.cr-inner {
position: relative;
z-index: 1
}

.cr-header {
margin-bottom: 60px
}

.cr-h {
font-size: clamp(26px, 3.5vw, 48px);
font-weight: 700;
letter-spacing: -.03em;
margin-top: 8px
}

.creators-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px
}

.cr-card {
position: relative;
overflow: hidden;
background: var(--card)
}

.cr-img {
width: 100%;
aspect-ratio: 3/4;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
position: relative;
overflow: hidden;
transition: transform .65s cubic-bezier(.16, 1, .3, 1)
}

.cr-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-card:hover .cr-img {
transform: scale(1.05)
}

.cr-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
z-index: 2
}

.cr-card:hover::before {
transform: scaleX(1)
}

.cr-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 40%;
background: rgba(0, 0, 0, .78);
opacity: 0;
transition: opacity .4s;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px
}

.cr-card:hover .cr-overlay {
opacity: 1
}

.cr-ov-desc {
font-size: 13px;
line-height: 1.85;
color: rgba(255, 255, 255, .75);
font-family: 'Noto Sans JP';
transform: translateY(14px);
transition: transform .45s ease;
margin-bottom: 12px
}

.cr-ov-sns {
font-size: 10px;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent);
transform: translateY(14px);
transition: transform .5s ease
}

.cr-card:hover .cr-ov-desc,
.cr-card:hover .cr-ov-sns {
transform: translateY(0)
}

.cr-info {
padding: 26px 22px;
border-top: 2px solid var(--rule);
transition: border-color .4s
}

.cr-card:hover .cr-info {
border-top-color: var(--accent)
}

.cr-name {
font-size: 17px;
font-weight: 700;
letter-spacing: -.01em;
margin-bottom: 6px
}

.cr-role {
font-size: 10px;
font-weight: 500;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gray2)
}

/* ── COMPANY ── */
#company {
background: var(--bg);
padding: 120px 64px;
position: relative;
overflow: hidden
}

.co-inner {
position: relative;
z-index: 1
}

.co-h {
font-size: clamp(26px, 3vw, 42px);
font-weight: 700;
letter-spacing: -.025em;
margin-bottom: 48px
}

.co-table {
border: 1px solid var(--rule)
}

.co-row {
display: grid;
grid-template-columns: 220px 1fr;
border-bottom: 1px solid var(--rule)
}

.co-row:last-child {
border-bottom: none
}

.co-k {
padding: 26px 36px;
font-size: 10px;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
background: var(--bg2);
border-right: 1px solid var(--rule);
display: flex;
align-items: center
}

.co-v {
padding: 26px 40px;
font-size: 15px;
display: flex;
align-items: center;
line-height: 1.7;
font-family: 'Noto Sans JP'
}

/* ── CONTACT ── */
    #contact {
      background: var(--bg2);
      color: var(--white);
      position: relative;
      overflow: hidden
    }

    /* 大文字透かし */
    .ct-bg-txt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(80px, 16vw, 220px);
      color: transparent;
      -webkit-text-stroke: 1px rgba(255, 255, 255, .025);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      letter-spacing: .06em
    }

    .ct-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      gap: 0;
      align-items: stretch
    }

    /* 縦の仕切り線 */
    .ct-divider {
      background: linear-gradient(to bottom, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
      opacity: .25;
      align-self: stretch
    }

    /* ── 左カラム：テキスト ── */
    .ct-left {
      padding-right: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .ct-h {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1.15;
      margin-bottom: 0;
      color: var(--white)
    }

    .ct-deco-line {
      width: 52px;
      height: 1.5px;
      background: var(--accent);
      transform: rotate(-8deg);
      transform-origin: left;
      margin: 28px 0 32px 2px
    }

    .ct-lead {
      font-size: 14px;
      line-height: 2.1;
      color: var(--gray2);
      font-family: 'Noto Sans JP', sans-serif
    }

    /* ── 右カラム：LINE CTA ── */
    .ct-right {
      padding-left: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0
    }

    /* LINEラベル */
    .ct-line-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .44em;
      text-transform: uppercase;
      color: var(--accent);
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 36px
    }

    .ct-line-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, var(--accent), transparent 70%)
    }

    /* LINE ID 表示 */
    .ct-id-block {
      border-left: 2px solid var(--accent);
      padding-left: 24px;
      margin-bottom: 44px
    }

    .ct-id-sub {
      font-size: 12px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--gray);
      margin-bottom: 10px
    }

    .ct-id-val {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(28px, 3.5vw, 42px);
      letter-spacing: .08em;
      color: var(--white)
    }

.ct-id-val a {
	color: var(--white);
}

    /* 友だち追加CTA */
    .ct-line-cta {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      border: 1px solid var(--accent);
      padding: 18px 36px;
      text-decoration: none;
      color: var(--white);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .24em;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
      transition: color .35s;
      align-self: flex-start;
      margin-bottom: 40px
    }

    .ct-line-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s cubic-bezier(.16, 1, .3, 1)
    }

    .ct-line-cta:hover::before {
      transform: scaleX(1)
    }

.ct-line-cta svg {
	      width: 18px;
      height: 18px;
      flex-shrink: 0;
      opacity: .7
}

    .ct-line-cta>* {
      position: relative;
      z-index: 1
    }

    .ct-qr-row {
      display: flex;
      align-items: flex-start;
      gap: 24px
    }

    .ct-qr-box {
      width: 130px;
      height: 130px;
      flex-shrink: 0;
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      color: #999;
      letter-spacing: .08em;
      padding: 6px;
    }

    .ct-qr-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block
    }

    .ct-qr-meta {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 4px
    }

    .ct-qr-label {
      font-size: 16px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--gray2)
    }

    .ct-qr-note {
      font-size: 12px;
      line-height: 1.85;
      color: var(--gray);
      font-family: 'Noto Sans JP', sans-serif
    }

/* ── FOOTER ── */
footer {
background: var(--bg);
padding: 40px 64px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden
}

footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, var(--accent) 0%, rgba(201, 162, 100, .2) 60%, transparent 100%)
}

.f-brand {
font-size: 20px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase
}

.f-nav {
list-style: none;
display: flex;
gap: 36px
}

.f-nav a {
font-size: 11px;
font-weight: 500;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--gray);
text-decoration: none;
transition: color .2s
}

.f-nav a:hover {
color: var(--accent)
}

.f-copy {
font-size: 11px;
color: var(--gray)
}

/* ── REVEAL ── */
.rv {
opacity: 0;
transform: translateY(32px);
transition: opacity .9s ease, transform .9s ease
}

.rv.in {
opacity: 1;
transform: none
}

.rv.d1 {
transition-delay: .12s
}

.rv.d2 {
transition-delay: .24s
}

.rv.d3 {
transition-delay: .36s
}

.rv.d4 {
transition-delay: .48s
}

.rvl {
opacity: 0;
transform: translateX(-36px);
transition: opacity .9s ease, transform .9s ease
}

.rvl.in {
opacity: 1;
transform: none
}

.rvr {
opacity: 0;
transform: translateX(36px);
transition: opacity .9s ease, transform .9s ease
}

.rvr.in {
opacity: 1;
transform: none
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
.biz-row {
grid-template-columns: 48px 1fr
}

.about-grid {
grid-template-columns: 1fr;
gap: 56px
}

.creators-grid {
grid-template-columns: 1fr 1fr
}
}

@media(max-width:768px) {

#nav,
#nav.sc {
padding: 18px 24px
}

.nav-links {
display: none
}
	
.nav-hamburger {
 display: flex
}

body.menu-open {
overflow: hidden
}

section,
#about,
#creators,
#company {
padding: 80px 24px
}

.hero-inner {
padding: 0 24px 64px
}

.hero-scroll {
display: none
}

.biz-row {
grid-template-columns: 1fr
}

.biz-num {
display: none
}

.biz-content {
padding: 28px 24px
}

.news-item {
grid-template-columns: 1fr;
gap: 16px
}

.news-meta {
flex-direction: row;
align-items: center;
gap: 12px
}

.news-head {
flex-direction: column;
gap: 16px
}

.creators-grid {
grid-template-columns: 1fr
}

.co-row {
grid-template-columns: 1fr
}

.co-k {
border-right: none;
border-bottom: 1px solid var(--rule);
padding: 14px 20px
}

.co-v {
padding: 14px 20px
}

.ct-inner {
        grid-template-columns: 1fr;
        gap: 0
      }

      .ct-divider {
        display: none
      }

      .ct-left {
        padding-right: 0;
        padding-bottom: 52px;
        border-bottom: 1px solid var(--rule)
      }

      .ct-right {
        padding-left: 0;
        padding-top: 48px
      }

      .ct-line-cta {
        width: 100%;
        justify-content: center
      }

      .ct-qr-row {
        display: none;
      }

footer {
flex-direction: column;
gap: 20px;
text-align: center;
padding: 28px
}

.f-nav {
flex-wrap: wrap;
justify-content: center
}
}

@media(prefers-reduced-motion:reduce) {
* {
animation: none !important;
transition: none !important
}

.stmt-line,
#hero-h1,
.hero-copy-i,
.rv,
.rvl,
.rvr {
opacity: 1 !important;
transform: none !important;
clip-path: none !important
}

.ticker-track {
animation: none
}
}