/* ==================================================
   service.css (SWELL対策済み・ID強化版)
   ================================================== */

/* セクション設定 */
#my-custom-area .about-section {
    background-color: #fff !important;
    padding: 40px !important;
    border-radius: 8px !important;
    margin-bottom: 60px !important;
}

/* H2見出し (SWELLの装飾を打ち消して赤文字にする) */
#my-custom-area .about-section h2 {
    font-size: 24px !important;
    color: #e60012 !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #eee !important;
    padding-bottom: 10px !important;
    
    /* SWELLリセット用 */
    background: none !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    box-shadow: none !important;
}
/* SWELLの疑似要素(アイコン等)を消す */
#my-custom-area .about-section h2::before,
#my-custom-area .about-section h2::after {
    display: none !important;
    content: none !important;
}

/* 本文 */
#my-custom-area .about-section p {
    margin-bottom: 40px !important;
}

/* H3見出し */
#my-custom-area .about-section h3 {
    font-size: 20px !important;
    margin-bottom: 20px !important;
    
    /* SWELLリセット */
    background: none !important;
    border: none !important;
    padding: 0 !important;
}
#my-custom-area .about-section h3::before,
#my-custom-area .about-section h3::after {
    display: none !important;
}

/* --------------------------------------------------
   テーブル設定 (SWELLのテーブルスタイルを上書き)
   -------------------------------------------------- */
#my-custom-area .outline-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important; /* SWELLの外枠対策 */
}

/* THとTDの設定 */
#my-custom-area .outline-table th,
#my-custom-area .outline-table td {
    padding: 15px !important;
    border: 1px solid #ddd !important;
    background: none !important; /* SWELLの背景対策 */
    font-size: 16px !important;  /* 必要に応じて調整 */
}

/* TH (見出しセル) の背景色 */
#my-custom-area .outline-table th {
    width: 25% !important;
    background-color: #f5f5f5 !important;
    text-align: left !important;
    font-weight: bold !important;
}

/* レスポンシブ (スマホ対応) */
@media screen and (max-width: 768px) {
    #my-custom-area .about-section {
        padding: 20px !important;
    }
    
    /* テーブルを縦並びにする */
    #my-custom-area .outline-table th,
    #my-custom-area .outline-table td {
        display: block !important;
        width: 100% !important;
    }
    
    #my-custom-area .outline-table th {
        border-bottom: none !important;
    }
}