/* ===== RESET & BASE ===== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
overflow-x: hidden;
}

body {
font-family: 'Figtree', 'Noto Sans JP', sans-serif;
background: #f0f0ec;
color: #0d1240;
}

img {
max-width: 100%;
display: block;
}

a {
text-decoration: none;
color: inherit;
}

/* ===== CUSTOM CURSOR ===== */
#cursor {
position: fixed;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
pointer-events: none;
z-index: 9999;
top: -100px;
left: -100px;
transform: translate(-50%, -50%);
transition: background 0.3s ease;
}

body.cursor-light #cursor {
background: #0d1240;
}

/* ===== HEADER ===== */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}

.header-logo {
width: 110px;
}

.header-logo img {
width: 100%;
transition: filter 0.3s ease;
}

header.header-dark .header-logo img {
filter: brightness(0) saturate(100%) invert(4%) sepia(97%) saturate(2100%) hue-rotate(218deg) brightness(85%);
}

/* PC NAV */
.pc-nav {
display: flex;
gap: 36px;
list-style: none;
}

.pc-nav a {
font-family: 'Figtree', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.1em;
color: #fff;
transition: opacity 0.2s, color 0.3s ease;
}

.pc-nav a:hover {
opacity: 0.6;
}

header.header-dark .pc-nav a {
color: #0d1240;
}

header.header-dark .hamburger span {
background: #00002c;
}

/* HAMBURGER */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
z-index: 200;
padding: 4px;
}

.hamburger span {
display: block;
width: 28px;
height: 3px;
background: #fff;
transition: transform 0.35s ease, opacity 0.25s ease;
transform-origin: center;
}

.hamburger.is-open span:nth-child(1) {
transform: translateY(5.5px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}

/* MOBILE MENU */
.mobile-menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #00002c;
z-index: 150;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px 20px 10px;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}

.mobile-menu.is-open {
opacity: 1;
pointer-events: all;
}

.mobile-menu-logo {
width: 80px;
}

.mobile-menu-close {
position: absolute;
top: 24px;
right: 20px;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
}

.mobile-menu-close span {
display: block;
width: 28px;
height: 3px;
background: #fff;
position: absolute;
}

.mobile-menu-close span:nth-child(1) {
transform: rotate(45deg);
}

.mobile-menu-close span:nth-child(2) {
transform: rotate(-45deg);
}

.mobile-nav {
list-style: none;
}

.mobile-nav li {
margin-bottom: 32px;
}

.mobile-nav a {
font-family: 'Figtree', sans-serif;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.15em;
color: #fff;
transition: opacity 0.2s;
}

.mobile-nav a:hover {
opacity: 0.6;
}

/* ===== MV ===== */
#mv {
position: relative;
height: 100vh;
overflow: clip;
}

.mv-parallax {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 134%;
background-image: url('../images/buck_mv03.jpg');
background-size: cover;
background-position: center 70%;
will-change: transform;
}

.mv-overlay {
position: absolute;
inset: 0;
background: rgba(5, 10, 40, 0.35);
}

.mv-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 1100px;
padding: 0 40px;
}

.mv-title-en {
font-family: 'Figtree', sans-serif;
font-size: clamp(32px, 4.5vw, 60px);
font-weight: 700;
color: #fff;
line-height: 1.3;
letter-spacing: -0.01em;
text-shadow: 0 3px 16px rgba(0,0,0,0.5), 0 5px 7px rgba(0,0,0,0.7);
}

.mv-title-ja {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(18px, 2vw, 28px);
font-weight: 500;
color: #fff;
margin-top: 16px;
letter-spacing: 0.1em;
line-height: 1.3;
text-shadow: 0 3px 14px rgba(0,0,0,0.5), 0 4px 5px rgba(0,0,0,0.7);
}

.mv-title-en span,
.mv-title-ja {
display: block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.mv-title-en span.visible,
.mv-title-ja.visible {
opacity: 1;
transform: translateY(0);
}

/* ===== SECTION COMMON ===== */
section {
padding: 250px 40px 280px;
}

.inner {
max-width: 1100px;
margin: 0 auto;
}

.section-title {
font-family: 'Figtree', sans-serif;
font-size: clamp(26px, 3vw, 42px);
font-weight: 700;
letter-spacing: 0.05em;
text-align: center;
}

.section-divider {
width: 1px;
height: 70px;
background: currentColor;
margin: 20px auto;
opacity: 0.4;
}

/* ===== FADE IN ON SCROLL ===== */
.fade-in {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.75s ease, transform 0.75s ease;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }
.fade-in-delay-5 { transition-delay: 0.5s; }

/* ===== FUNCTION ===== */
#function {
background: #00002c;
color: #fff;
text-align: center;
padding: 250px 40px 280px;
}

.function-subtitle-en {
font-family: 'Figtree', sans-serif;
font-size: clamp(20px, 2.2vw, 30px);
font-weight: 600;
margin-top: 25px;
letter-spacing: 0.03em;
}

.function-subtitle-ja {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(14px, 1.4vw, 18px);
font-weight: 300;
margin-top: 16px;
opacity: 0.75;
}

/* ===== WHAT WE DO ===== */
#whatwedo {
background: #f0f0ec;
color: #0d1240;
text-align: center;
}

.whatwedo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 48px;
}

.whatwedo-item-en {
font-family: 'Figtree', sans-serif;
font-size: clamp(23px, 2vw, 30px);
font-weight: 700;
letter-spacing: 0.03em;
}

.whatwedo-item-ja {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(15px, 1.1vw, 18px);
font-weight: 500;
margin-top: 10px;
opacity: 0.7;
}

/* ===== THINKING ===== */
#thinking {
background: #00002c;
color: #fff;
text-align: center;
}

.thinking-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 48px;
}

.thinking-case {
padding: 36px 28px;
text-align: center;
}

.case-label {
font-family: 'Figtree', sans-serif;
font-size: clamp(22px, 1.5vw, 26px);
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: 36px;
display: inline-block;
border: 1px solid rgba(255,255,255,0.6);
padding: 8px 20px;
}

.case-item {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(14px, 1.2vw, 17px);
font-weight: 400;
}

.case-arrow {
display: block;
width: 1px;
height: 40px;
border-left: 1px dashed rgba(255,255,255,0.8);
margin: 14px auto;
}

/* ===== FOOTER / ABOUT ===== */
#about {
background: #f0f0ec;
color: #0d1240;
position: relative;
padding-bottom: 0;
}

.footer-tagline {
font-family: 'Figtree', sans-serif;
font-size: clamp(15px, 1vw, 17px);
font-weight: 400;
letter-spacing: 0.01em;
opacity: 0.55;
padding-top: 120px;
padding-bottom: 370px;
}

.footer-bg-logo {
position: absolute;
right: 40px;
bottom: 0;
width: min(600px, 45vw);
opacity: 0.85;
pointer-events: none;
}

.footer-contact-fixed {
display: none;
}

.footer-cols {
display: grid;
grid-template-columns: 300px 400px 1fr;
gap: 60px;
padding: 60px 0 48px;
position: relative;
z-index: 1;
align-items: start;
}

.footer-col {
border-left: 2px solid rgba(13,18,64,0.25);
padding-left: 30px;
align-self: start;
}

.footer-col-contact {
text-align: center;
align-self: start;
}

.footer-col-title {
font-family: 'Figtree', sans-serif;
font-size: 18px;
font-weight: 700;
margin-bottom: 14px;
letter-spacing: 0.03em;
}

.footer-col-title span {
display: block;
margin-top: 5px;
}

.footer-col-title-ja {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 18px;
margin-bottom: 14px;
}

.footer-col-title-ja span {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
font-weight: 300;
display: block;
}

.footer-col-body {
font-family: 'Figtree', sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
opacity: 0.75;
}

.footer-col-body strong {
font-weight: 700;
opacity: 1;
}

.footer-col-body-ja {
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 1.5;
opacity: 0.75;
}

.footer-col-body-ja span {
display: block;
margin-bottom: 10px;
}

.footer-contact-label {
font-family: 'Figtree', sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: 0.08em;
margin-bottom: 3px;
}

.footer-contact-email {
font-family: 'Figtree', sans-serif;
font-size: 13px;
font-weight: 400;
opacity: 0.75;
}

.footer-contact-email a {
transition: opacity 0.2s;
}

.footer-contact-email a:hover {
opacity: 0.5;
}

.footer-bottom {
padding: 20px 0;
text-align: center;
position: relative;
z-index: 1;
}

.footer-bottom p {
font-family: 'Figtree', sans-serif;
font-size: 11px;
font-weight: 400;
opacity: 0.45;
letter-spacing: 0.05em;
}

.sp-br {
display: none;
}

.pcText {
display: block;
}

/* ===== RESPONSIVE: TABLET (iPad) ===== */
@media (max-width: 1024px) {
.pc-nav {
display: none;
}

.hamburger {
display: flex;
}

.header-logo img {
width: 75%;
}

.mobile-menu-logo {
position: absolute;
top: 24px;
left: 24px;
}

header {
padding: 20px 24px;
}

.mv-content {
padding: 0 24px;
}

section {
padding: 150px 40px;
}

.thinking-grid {
grid-template-columns: 1fr;
gap: 20px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}

.whatwedo-grid {
grid-template-columns: 1fr;
gap: 32px;
}

.sp-br {
display: none;
}

.footer-cols {
grid-template-columns: 1fr 1fr auto;
gap: 40px;
}

.footer-col-contact {
grid-column: auto;
text-align: right;
}

.footer-tagline {
padding-top: 160px;
padding-bottom: 150px;
}

.footer-bg-logo {
width: min(600px, 50vw);
right: 30px;
}

#about {
overflow: clip;
padding: 0 30px;
}
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 767px) {
section {
padding: 120px 20px;
}

.mv-parallax {
background-image: url('../images/buck_mv05_sp.jpg');
background-size: 130%;
background-position: center 50%;
}

.mv-content {
padding: 0 20px;
top: 50%;
transform: translate(-50%, -50%);
bottom: auto;
}

.mv-title-ja {
font-size: 20px;
line-height: 1.6;
}

.mobile-menu-close span {
width: 25px;
height: 4px;
transform-origin: center;
}

.mobile-menu-close {
width: 40px;
height: 15px;
overflow: hidden;
}

.mobile-menu-close span:nth-child(1) {
transform: rotate(30deg) scaleY(0.6);
}

.mobile-menu-close span:nth-child(2) {
transform: rotate(-30deg) scaleY(0.6);
}

#function {
padding: 180px 40px 180px;
}

.slash {
display: none;
}

.whatwedo-grid {
gap: 70px;
}

.thinking-grid {
margin-top: 20px;
}

.case-label {
font-size: 19px;
padding: 5px 18px;
}

.thinking-case {
padding: 20px 28px 36px;
}

.footer-cols {
grid-template-columns: 1fr;
gap: 40px;
padding: 40px 0 130px;
}

.footer-col {
padding-left: 16px;
}

.footer-col,
.footer-col-contact {
text-align: center;
border-left: none;
padding-left: 0;
}

.footer-col-title {
font-size: 25px;
margin-bottom: 10px;
}

.footer-col-title span {
margin-top: 10px;
font-size: 15px;
}

.footer-col-title-ja {
font-size: 13px;
margin-bottom: 8px;
}

.footer-col-body-ja span {
margin-bottom: 8px;
}

.footer-bg-logo {
right: auto;
left: 50%;
transform: translateX(-50%);
width: 85vw;
}

.footer-tagline {
padding-top: 150px;
padding-bottom: 100px;
text-align: center;
}

header {
padding: 16px 20px;
}

.mobile-menu-logo {
position: absolute;
top: 24px;
left: 20px;
}

.header-logo img {
width: 65%;
}

.sp-br {
display: block;
}

.pcText {
display: none !important;
}

.footer-contact-label {
font-size: 14px;
}
}

@media (prefers-reduced-motion: reduce) {
.fade-in {
opacity: 1;
transform: none;
transition: none;
}

.mv-title-en span,
.mv-title-ja {
opacity: 1;
transform: none;
transition: none;
}
}