body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #2F3A4F;
    /* cb-dark */
    background-color: #DCE4EA;
    /* cb-bg */
}

.font-en {
    font-family: 'Montserrat', sans-serif;
}

/********** Animation Utilities **********/
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}

/********** Hero Image Overlay **********/
.hero-bg {
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* cb-dark と cb-gray-text を混ぜたような深いオーバーレイ */
    background: linear-gradient(135deg, rgba(47, 58, 79, 0.85), rgba(74, 93, 115, 0.7));
    backdrop-filter: blur(1px);
}

/********** Glassmorphism for Cards **********/
.glass-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* box-shadow removed */
}

/********** Smooth Scroll **********/
html {
    scroll-behavior: smooth;
}

/********** Custom Selection Color **********/
::selection {
    background-color: #A8CFC4;
    /* cb-teal */
    color: #2F3A4F;
}

/********** Image Grayscale & Blend **********/
.soft-img {
    filter: grayscale(20%) contrast(90%);
    transition: filter 0.5s ease;
}

.soft-img:hover {
    filter: grayscale(0%) contrast(100%);
}