/* * Utilities
 * -------------------------------------------------- */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    position: relative;
}

.en-font {
    font-family: var(--font-en);
}

.section-padding {
    padding: 120px 0;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2rem;
    border-radius: var(--border-radius-pill);
    font-weight: 700;
    font-family: var(--font-ja);
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition-button);
}

.btn-primary {
    background-color: var(--color-accent-a);
    color: #fff;
    box-shadow: var(--shadow-button), 0 2px 8px rgba(249, 248, 246, 0.5);
    transition: var(--transition-base);
}

.site-header.scrolled .btn-primary {
    box-shadow: var(--shadow-button);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
    background-color: #c04529;
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 12px rgba(15, 37, 64, 0.15);
    position: relative;
    padding-right: 3rem;
}

.btn-secondary::after {
    content: '→';
    position: absolute;
    right: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    transition: transform var(--transition-base), color var(--transition-base);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 37, 64, 0.25);
}

.btn-secondary:hover::after {
    transform: translateX(5px);
    color: #fff;
}