@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,700&display=swap');
@import url('https://fonts.cdnfonts.com/css/metropolis');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100..700,0..1,0&display=swap');

/* ---- Base ---- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ---- Navigation ---- */
nav.fixed,
header.fixed {
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* スクロール時: 背景を透明に */
.nav-scrolled {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* ---- Scroll Reveal ---- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Image hover zoom ---- */
.image-zoom-container:hover .zoom-image {
    transform: scale(1.05);
}
.image-zoom-container .overlay {
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}
.image-zoom-container:hover .overlay {
    opacity: 1;
}

/* ---- News row ---- */
.news-row:hover .news-underline {
    transform: scaleX(1);
}
.news-underline {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---- Contact form focus line ---- */
.input-focus-line {
    position: relative;
}
.input-focus-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #000000;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.input-focus-line:focus-within::after {
    width: 100%;
}

/* ---- Project hero scrim ---- */
.scrim-overlay {
    background: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.10) 50%,
        rgba(0,0,0,0.50) 100%
    );
}

/* ---- Project quote block ---- */
.project-quote {
    font-family: 'metropolis', sans-serif;
    font-size: clamp(28px, 3.5vw, 52px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #ffffff;
}

/* ---- Google Maps iframe ---- */
.map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---- Mobile menu ---- */
[data-mobile-menu] {
    display: none;
}
[data-mobile-menu].open {
    display: flex;
}

/* ---- Recruit Page Hero ---- */
.hero-clip {
    clip-path: none;
}
@media (min-width: 1024px) {
    .hero-clip {
        clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

/* ---- Collage & Parallelogram Clip ---- */
.clip-skew-photo-1 {
    clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%);
}
.clip-skew-photo-2 {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.clip-skew-bg {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

/* ---- Scroll Reveal Animations ---- */
.reveal-slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-slide-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-slide-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-slide-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-fade-in {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-fade-in.active {
    opacity: 1;
}

/* Delay classes */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* ---- SVG Donut Chart Animation ---- */
.chart-circle {
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 親要素（カード）がactiveになった時に円弧を描画 */
.active .chart-circle-1 { stroke-dashoffset: 0; }
.active .chart-circle-2 { stroke-dashoffset: -45; }
.active .chart-circle-3 { stroke-dashoffset: -75; }
.active .chart-circle-4 { stroke-dashoffset: -90; }