/* カラーパレット */
:root {
    /* Primary Color */
    --color-primary: #123280;
    --color-primary-light: #1a4ab3;
    --color-primary-lighter: #2d5fd9;
    --color-primary-dark: #0d2566;
    --color-primary-darker: #081a4d;
    
    /* Accent Color */
    --color-accent: #e31512;
    --color-accent-light: #ff2a27;
    --color-accent-lighter: #ff4d4a;
    --color-accent-dark: #b8110e;
    --color-accent-darker: #8d0d0b;
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* Text Colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary: var(--color-gray-400);
    --color-text-inverse: var(--color-white);
    
    /* Background Colors */
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-tertiary: var(--color-gray-100);
    
    /* Border Colors */
    --color-border-primary: var(--color-gray-200);
    --color-border-secondary: var(--color-gray-300);
    --color-border-accent: var(--color-accent);
}

/* フォント設定 */
body {
    font-family: "Noto Serif JP", "Times New Roman", "Yu Mincho", "Yu Mincho", "MS PGothic", serif;
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

h1 span::selection {
    color: white;
    background-color: transparent;
}

h2, h3, h4, h5, h6, p, span, a, li, ul, ol, table, tr, td, th, form, input, textarea, button {
    &::selection {
        color: white;
        background-color: var(--color-accent);
    }
}

.en {
    font-family: "Cormorant", serif;
}

/* レスポンシブグリッドシステム */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    padding-left: 24px;
    padding-right: 24px;
    max-width: unset!important;
}

/* 786px以上: 6カラム、マージン32、ガター16 */
@media (min-width: 786px) {
    .container {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* 1024px以上: 6カラム、マージン40、ガター20 */
@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* 1440px以上: 12カラム、マージン70、ガター20 */
@media (min-width: 1280px) {
    .container {
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
        padding-left: 70px;
        padding-right: 70px;
    }
}

/* 1920px以上: 12カラム、マージン70、ガター20 */
@media (min-width: 1920px) {
    .container {
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
        padding-left: 70px;
        padding-right: 70px;
    }
}

/* col-span ユーティリティクラス */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* レスポンシブ対応: 786px未満では3カラムまで */
@media (max-width: 785px) {
    .col-span-4,
    .col-span-5,
    .col-span-6,
    .col-span-7,
    .col-span-8,
    .col-span-9,
    .col-span-10,
    .col-span-11,
    .col-span-12 {
        grid-column: span 3;
    }
}

/* レスポンシブ対応: 786px以上1023px以下では6カラムまで */
@media (min-width: 786px) and (max-width: 1023px) {
    .col-span-7,
    .col-span-8,
    .col-span-9,
    .col-span-10,
    .col-span-11,
    .col-span-12 {
        grid-column: span 6;
    }
}

/* レスポンシブ対応: 1024px以上1439px以下では6カラムまで */
@media (min-width: 1024px) and (max-width: 1439px) {
    .col-span-7,
    .col-span-8,
    .col-span-9,
    .col-span-10,
    .col-span-11,
    .col-span-12 {
        grid-column: span 6;
    }
}

/* animation */
/* .animate-spinner {
    animation: spin 40s ease-in-out infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-30deg); }
    50% { transform: rotate(30deg); }
    75% { transform: rotate(-90deg); }
    100% { transform: rotate(51.4285714286deg); }
}
.animate-rotate {
    animation: rotate 20s ease-in-out infinite;
}

@keyframes rotate {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
} */