/* service-styles.css */

/* グーグルマップ掲載可能セクション */
.google-map-notice {
    background-color: #007bff; /* Bootstrapのプライマリーカラー（青） */
    color: white !important; /* テキストを白に */
    text-align: center; /* 中央揃え */
    padding: 40px 0; /* 上下の余白 */
    margin: 0; /* 他のセクションとの間隔調整 */
}

/* 見出し */
.google-map-notice h2 {
    color: white !important; /* テキストを白に */
    font-size: 2.5rem; /* 大きなフォントサイズ */
    font-weight: 700; /* 太字 */
    margin-bottom: 15px; /* 下に余白 */
    text-transform: uppercase; /* 大文字で強調 */
    letter-spacing: 1px; /* 文字間隔を少し広げる */
}

/* リード文 */
.google-map-notice .lead {
    font-size: 1.25rem; /* やや大きめのフォント */
    font-weight: 300; /* 軽めのウェイトで読みやすく */
    opacity: 0.9; /* 少し透明感を持たせてコントラストを調整 */
}

/* ホバーエフェクト（オプション） */
.google-map-notice:hover {
    background-color: #0056b3; /* ホバー時に少し暗めの青 */
    transition: background-color 0.3s ease; /* スムーズな変化 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .google-map-notice {
        padding: 30px 0; /* タブレット以下で余白を少し減らす */
    }
    .google-map-notice h2 {
        font-size: 2rem; /* 小さめの画面でフォントサイズ調整 */
    }
    .google-map-notice .lead {
        font-size: 1rem; /* リード文も調整 */
    }
}

@media (max-width: 576px) {
    .google-map-notice {
        padding: 20px 0; /* モバイルでさらにコンパクトに */
    }
    .google-map-notice h2 {
        font-size: 1.5rem;
    }
    .google-map-notice .lead {
        font-size: 0.875rem; /* モバイルでの可読性確保 */
    }
}