.main-container {
        max-width: 1200px; 
        margin: 15px; 
        background-color: #ffffff;
        border: 2px solid #7592b2; 
        border-radius: 8px;
        padding: 20px 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .banner-top {
        background-image: url(../images/sunshine.jpg); 
        background-color: #768DAD; 
        background-repeat: no-repeat;
        background-position: left top; 
        width: 100%;
        height: 180px; 
        margin-bottom: 20px;
        border-bottom: 2px solid #e0e0e0;
        display: none; 
        align-items: center; 
        justify-content: flex-end; 
        padding-right: 15px; 
        border-radius: 8px 8px 0 0; 
        overflow: hidden; 
    }
    
    .banner-top img { 
        height: 136px; 
        width: auto; 
        max-width: 900px; 
        border-radius: 4px; 
    }

    .intro-section { text-align: center; margin-bottom: 30px; width: 100%; }
    
    .page-title {
        text-transform: uppercase; color: #204a87; font-size: 1.6rem;
        margin-bottom: 20px; border-bottom: 2px solid #204a87; padding-bottom: 10px;
        display: inline-block; width: 100%; text-align: left;
    }
    
    .intro-video {
        width: 100%; max-width: 400px; height: auto; border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15); margin: 0 auto; display: block; object-fit: cover;
    }

    .services-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

    .full-card {
        background: #fdfdfd;
        border-radius: 8px; padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        border-top: 4px solid #204a87; 
        border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee;
        height: 100%; display: flex; flex-direction: column;
    }

    .full-card h2 { color: #204a87; text-transform: uppercase; font-size: 1.2rem; margin-bottom: 15px; }
    .full-card h3 { font-size: 1.05rem; color: #333; margin: 15px 0 10px 0; }
    .full-card p { font-size: 0.95rem; color: #555; margin-bottom: 15px; }

    .service-list { list-style: none; padding-left: 0; margin-bottom: 15px; }
    .service-list li { position: relative; padding-left: 20px; margin-bottom: 8px; color: #444; font-size: 0.95rem; }
    .service-list li::before { content: "✓"; position: absolute; left: 0; color: #204a87; font-weight: bold; }

    .read-more-link {
        margin-top: auto; align-self: flex-start;
        color: #204a87; font-weight: bold; text-decoration: none;
        border: 1px solid #204a87; padding: 8px 15px; border-radius: 4px; transition: 0.3s;
    }
    .read-more-link:hover { background: #204a87; color: #fff; }

    .note-block-pc {
        background-color: #f5f7fa; 
        border: 1px solid #dbe1e8;
        border-radius: 6px;
        padding: 20px;
        margin-top: 35px;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
        display: none; 
    }
    .note-block-pc h3 {
        color: #204a87;
        font-size: 1.3rem;
        margin-bottom: 15px;
        text-transform: uppercase;
        border-bottom: 2px solid #204a87;
        padding-bottom: 5px;
        text-align: left;
    }
    .note-block-pc a {
        color: #333;
        text-decoration: none;
        transition: 0.2s;
    }
    .note-block-pc a:hover {
        color: #204a87;
        text-decoration: underline;
    }

    @media(min-width: 768px) {
        .banner-top { display: flex; }
        .note-block-pc { display: block; }
        .services-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
        .main-container { 
            padding: 30px; 
            max-width: 96%; 
            margin: 30px auto; 
        }
    }

    @media(min-width: 992px) {
        .main-container { 
            width: 80% !important;       
            max-width: 80% !important;   
            margin: 30px auto !important;
        }
        .services-grid { 
            grid-template-columns: repeat(3, 1fr); 
            gap: 25px; 
        }
        .intro-section { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 50px; padding: 20px 0 40px 0; }
        .page-title { flex: 1; font-size: 2.5rem; line-height: 1.3; border-bottom: none; border-left: 6px solid #204a87; padding-left: 25px; margin-bottom: 0; }
        .intro-video { flex: 0 0 500px; width: 500px; max-width: 50%; }
        .full-card h2 { font-size: 1.5rem; }
        .full-card p, .service-list li { font-size: 1.05rem; line-height: 1.6; }
    }