/* top-services.css */

/* --- カラー定義 --- */
/* メインカラー: 濃紺 */
:root {
    --color-navy: #1F3A5F;
    /* アクセントカラー: シャンパンゴールド */
    --color-gold: #D4AF37;
    /* テキストカラー: ダークグレー */
    --color-text: #333333;
    /* 薄い背景色 */
    --color-light-bg: #F9F9F9;
}


.services {
    padding: 80px 20px; /* 上下余白を増やし、ゆとりと高級感を出す */
    background-color: var(--color-light-bg); 
    text-align: center;
}

.services h2 {
    font-size: 2.2em; /* タイトルを少し大きく */
    color: var(--color-navy); /* 濃紺に変更 */
    margin-bottom: 40px;
    font-weight: 400; /* 太すぎないウェイトで洗練された印象に */
    letter-spacing: 0.05em; /* 文字間隔を広げて高級感を演出 */
    /* シャンパンゴールドの下線を追加 */
    border-bottom: 2px solid var(--color-gold);
    display: inline-block;
    padding-bottom: 10px;
}

.service-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* サービスボックス間のスペースを広げる */
}

.service-box {
    background: #fff;
    border-radius: 8px; /* 角丸を少し控えめに */
    /* 濃紺を薄く使った影に変更 */
    box-shadow: 0 4px 15px rgba(31, 58, 95, 0.1); 
    padding: 30px; 
    width: 100%;
    max-width: 380px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eee; /* 薄い枠線を追加し、上品な区切りを */
}

.service-box:hover {
    transform: translateY(-8px); /* ホバー時の動きを少し大きく */
    /* 濃紺を強く使った影に変更 */
    box-shadow: 0 10px 25px rgba(31, 58, 95, 0.2); 
}

.service-box h3 {
    font-size: 1.4em;
    color: var(--color-gold); /* シャンパンゴールドに変更 */
    margin-bottom: 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--color-light-bg); /* 目立たない下線 */
    padding-bottom: 8px;
}

.service-box p {
    font-size: 1em;
    color: var(--color-text); /* テキストカラーを濃くし、可読性を高める */
    line-height: 1.7;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .services {
        padding: 40px 15px;
    }
    .service-boxes {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .services h2 {
        font-size: 1.8em;
    }
}