@charset "UTF-8";

/* =================================
COLOR SYSTEM
================================= */

:root {

    /* ==========================
    BACKGROUND
    ========================== */

    --bg-main: #FFFDF8;
    --bg-sub: #F7F3EE;
    --bg-card: #FFFFFF;


    /* ==========================
    TEXT
    ========================== */

    --text-main: #5E5A57;
    --text-sub: #8B8580;


    /* ==========================
    ACCENT
    ========================== */

    --accent-blue: #A8B8C8;
    --accent-beige: #C7B8A3;


    /* ==========================
    BORDER
    ========================== */

    --border-color: #E8E1D8;


    /* ==========================
    HOVER
    ========================== */

    --hover-soft: #EFE7DD;


    /* ==========================
    AFFILIATE
    ========================== */

    --affiliate-bg: #F7F3EE;
    --affiliate-border: #D8CDBF;
    --affiliate-accent: #A8B8C8;


    /* ==========================
    FOCUS
    ========================== */

    --focus-color: #7D8FA3;


    /* ==========================
    SHADOW
    ========================== */

    --shadow-soft: rgba(0, 0, 0, 0.08);

    --shadow-sm: 0 2px 8px var(--shadow-soft);
    --shadow-md: 0 5px 15px var(--shadow-soft);
    --shadow-lg: 0 10px 30px var(--shadow-soft);


    /* =================================
    TYPOGRAPHY
    ================================= */

    --font-main: "Noto Serif JP", serif;
    --font-sans: "Noto Sans JP", sans-serif;

    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-md: 1.1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.5rem;
    --font-2xl: 2rem;
    --font-3xl: 3rem;
    --font-4xl: 4rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-base: 1.8;
    --line-height-tight: 1.4;


    /* =================================
    SPACING
    ================================= */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;


    /* =================================
    LAYOUT
    ================================= */

    --container-width: 1100px;
    --container-narrow: 900px;

    --container-padding: 20px;

    --sidebar-width: 280px;
    --content-gap: 48px;

    --header-height: 64px;


    /* =================================
    IMAGE
    ================================= */

    --thumbnail-ratio: 16 / 9;


    /* =================================
    ICON
    ================================= */

    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;


    /* =================================
    BORDER RADIUS
    ================================= */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 999px;


    /* =================================
    TRANSITION
    ================================= */

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 旧CSS互換 */
    --transition: 0.3s;


    /* =================================
    Z-INDEX
    ================================= */

    --z-header: 100;
    --z-overlay: 999;
    --z-modal: 1000;

}


/* =================================
TABLET / PC
================================= */

@media (min-width: 768px) {

    :root {

        --container-padding: 32px;

        --header-height: 72px;

    }

}