:root {
    --font-ja: 'Shippori Mincho', serif;
    --font-en: 'EB Garamond', serif;
    --color-text: #2c2c2c;
    --color-bg: #fff;
    --color-accent: #a08c75;
    --color-gray: #f9f9f9;
    --color-border: #e0e0e0;
    --color-hokkaido: #59708a;
    --color-okinawa: #5a9789;
}

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

body {
    font-family: var(--font-ja);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.0;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.en {
    font-family: var(--font-en);
    letter-spacing: 0.08em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

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

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

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(200%);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(200px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}