/* フォント設定 */
body {
    font-family: 'Noto Sans JP', sans-serif;
}

/* ヒーローセクション - グループ写真背景 */
.hero-section {
    position: relative;
    background-image: url('/static/hero-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* オーバーレイ - 株数が多い緑の法師の自然な雰囲気を活かす */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(34, 87, 52, 0.70) 0%,
        rgba(26, 68, 40, 0.75) 50%,
        rgba(19, 51, 31, 0.80) 100%
    );
    /* 中心部を少し明るくして、株が集まる様子を強調 */
    radial-gradient(
        ellipse at center,
        rgba(52, 125, 69, 0.20) 0%,
        transparent 70%
    );
}

/* スムーズスクロール */
html {
    scroll-behavior: smooth;
}

/* ナビゲーションのホバー効果 */
.nav-link, .nav-link-mobile {
    transition: color 0.3s ease;
}

/* セクション間のマージン */
section {
    scroll-margin-top: 80px;
}

/* カードのホバー効果 */
.bg-white:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* ボタンのホバー効果 */
button, a.inline-block {
    transition: all 0.3s ease;
}

/* フォーム入力のフォーカス効果 */
input:focus, textarea:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-section {
        background-attachment: scroll;
    }
    
    .hero-section h1 {
        font-size: 2.5rem;
    }
    
    .hero-section p {
        font-size: 1rem;
    }
}

/* アニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* ローディングアニメーション */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.fa-spin {
    animation: spin 1s linear infinite;
}