/* =========================================================
   Reset & Base
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Noto Sans JP', sans-serif; 
    background-color: #FDFBF7; 
    color: #4A3B32; 
    line-height: 1.8; 
}
h1, h2, h3, h4, .tag { font-family: 'M PLUS Rounded 1c', sans-serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   Layout & Utility
   ========================================================= */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
section { padding: 90px 0; }

/* Colors */
.bg-white { background-color: #FFFFFF; }
.bg-green { background-color: #F0F7F4; }
.bg-yellow { background-color: #FFF9E6; }

/* Common UI */
.section-title { 
    text-align: center; 
    font-size: 2.2rem; 
    color: #2E7D32; 
    margin-bottom: 60px; 
    position: relative; 
    letter-spacing: 2px;
}
.section-title::after { 
    content: ''; 
    display: block; 
    width: 60px; 
    height: 4px; 
    background-color: #FFB300; 
    margin: 15px auto 0; 
    border-radius: 2px; 
}
.tag { 
    background: #4CAF50; 
    color: #fff; 
    font-size: 0.85rem; 
    padding: 6px 14px; 
    border-radius: 20px; 
}
.date { 
    font-weight: bold; 
    color: #795548; 
    font-size: 0.95rem; 
}
.title { 
    flex: 1; 
    font-size: 1.05rem; 
    font-weight: bold; 
}

/* Animations */
@keyframes fadeSlide {
    0%   { opacity: 1; transform: scale(1.02); }
    20%  { opacity: 1; transform: scale(1.04); }
    33%  { opacity: 0; transform: scale(1.06); }
    87%  { opacity: 0; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.02); }
}

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

/* =========================================================
   川口専用：ぎゅ～～～るるるるる！！！（徐々に加速）
   ========================================================= */
.kawaguchi-spin:hover .staff-img {
    /* 
       1つ目: 2秒かけて「ease-in（徐々に加速）」しながら10回転する
       2つ目: 2秒後（加速が終わった後）から、0.1秒に1回転の「超高速ループ」に切り替わる
    */
    animation: 
        speedUp 2s ease-in forwards,
        maxSpeed 0.1s linear 2s infinite;
    
    border-color: #F44336;
}

/* ① 加速用（0度から3600度＝10回転まで一気に回す） */
@keyframes speedUp {
    0%   { transform: rotate(0deg) scale(1.1); }
    100% { transform: rotate(3600deg) scale(1.1); }
}

/* ② 最高速ループ用（0.1秒で1回転を繰り返す） */
@keyframes maxSpeed {
    0%   { transform: rotate(0deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1.1); }
}