/* --------------------------------------------------
   1. 基本設定とカスタムフォント
   -------------------------------------------------- */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #1F2937;
    background-color: #F9FAFB;
    scroll-behavior: smooth;
}

/* --------------------------------------------------
   2. カラー定義（Larkを想起させる配色）
   -------------------------------------------------- */
.bg-lark-blue {
    background-color: #007AFF;
}

.text-lark-blue {
    color: #007AFF;
}

.bg-lark-accent {
    background-color: #F3F4F6;
}

/* --------------------------------------------------
   3. ボタン・アクション要素（オレンジ）
   -------------------------------------------------- */
.btn-orange {
    background: linear-gradient(135deg, #FF9500 0%, #FF5E00 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(255, 94, 0, 0.39);
}

.btn-orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(255, 94, 0, 0.45);
}

/* --------------------------------------------------
   4. 宮崎の風景を反映したヒーローエリア
   -------------------------------------------------- */
.miyazaki-hero {
    background: linear-gradient(rgba(0, 122, 255, 0.85), rgba(0, 122, 255, 0.7)), 
                url('https://images.unsplash.com/photo-1621245783350-011400e263c1?auto=format&fit=crop&q=80&w=2000');
    background-size: cover;
    background-position: center;
}

/* --------------------------------------------------
   5. コンポーネント（カード・タイトル）
   -------------------------------------------------- */
.card {
    background: white;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}

.section-title {
    position: relative;
    padding-bottom: 1rem;
}

/* タイトルの下のアクセントライン */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #FF9500;
    border-radius: 2px;
}