/* Rule page */
        .rule-page {
            background: #fff;
        }

        .rule-page .container {
            max-width: 1180px;
        }

        .rule-page .survey-breadcrumb {
            margin-top: 22px;
            margin-bottom: 16px;
        }

        .rule-page .rule-hero {
            min-height: 278px;
            padding: 52px 0 40px;
            border-radius: 0;
            background:
                    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.58) 55%, rgba(255,255,255,0) 76%),
                    url("../img/mainvisual.png") center right / 760px auto no-repeat;
            box-shadow: none;
        }

        .rule-page .rule-hero h1 {
            margin-bottom: 24px;
            color: #12304a;
            font-size: 42px;
            letter-spacing: 0;
        }

        .rule-page .rule-hero p {
            max-width: 650px;
            color: #12304a;
            font-size: 17px;
            font-weight: 500;
            line-height: 2.05;
        }

        .rule-updated {
            max-width: 900px;
            margin: 30px auto 20px;
            color: #68798a;
            font-size: 14px;
            font-weight: 700;
            text-align: right;
        }

        .rule-content-card {
            max-width: 900px;
            margin: 0 auto 24px;
            padding: 28px 34px 26px;
            border: 1px solid #dfe7ee;
            border-radius: 8px;
            background: #fff;
        }

        .rule-content-card section + section {
            margin-top: 30px;
        }

        .rule-content-card h2 {
            position: relative;
            margin: 0 0 12px;
            padding-left: 18px;
            color: #12304a;
            font-size: 20px;
            line-height: 1.55;
        }

        .rule-content-card h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            width: 4px;
            height: 22px;
            border-radius: 999px;
            background: #2fad63;
        }

        .rule-content-card ol {
            margin: 0;
            padding-left: 20px;
            color: #2f4050;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.95;
        }

        .rule-content-card li + li {
            margin-top: 6px;
        }

        .rule-pdf-inline {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 24px;
            align-items: center;
            margin-top: 30px;
            padding: 20px 26px;
            border-radius: 8px;
            background: linear-gradient(105deg, #f2fbf5 0%, #fff 100%);
        }

        .rule-pdf-inline p {
            margin: 0;
            color: #23a95e;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.8;
        }

        .rule-pdf-inline span {
            color: #405466;
            font-weight: 500;
        }

        .rule-pdf-inline a,
        .rule-agree a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            border-radius: 999px;
            font-weight: 900;
            text-decoration: none;
        }

        .rule-pdf-inline a {
            min-width: 230px;
            padding: 0 24px;
            border: 1px solid #2fad63;
            color: #2fad63;
        }

        .rule-pdf-inline a::after {
            content: "";
            width: 12px;
            height: 12px;
            margin-left: 14px;
            border-bottom: 2px solid currentColor;
            border-left: 2px solid currentColor;
            transform: rotate(-45deg) translateY(-2px);
        }

        .rule-agree {
            max-width: 900px;
            margin: 0 auto 42px;
            text-align: center;
        }

        .rule-agree h2 {
            margin: 0 0 8px;
            color: #12304a;
            font-size: 22px;
        }

        .rule-agree p {
            margin: 0 0 18px;
            color: #647484;
            font-size: 14px;
        }

        .rule-agree a {
            min-width: 360px;
            padding: 0 34px;
            background: linear-gradient(90deg, #22a8b8 0%, #55b33c 100%);
            color: #fff;
        }

        .rule-agree a::after {
            content: "";
            width: 9px;
            height: 9px;
            margin-left: 18px;
            border-top: 2px solid currentColor;
            border-right: 2px solid currentColor;
            transform: rotate(45deg);
        }

        .rule-page .information-footer {
            margin-top: 0;
        }

        @media (max-width: 780px) {
            .rule-updated,
            .rule-content-card,
            .rule-agree {
                max-width: none;
            }

            .rule-pdf-inline {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }

        @media (max-width: 560px) {
            .rule-page .rule-hero {
                min-height: 300px;
                padding: 34px 0;
                background:
                        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 55%, rgba(255,255,255,.35) 100%),
                        url("../img/mainvisual.png") 62% center / cover no-repeat;
            }

            .rule-page .rule-hero h1 {
                font-size: 32px;
            }

            .rule-page .rule-hero p {
                font-size: 15px;
                line-height: 1.9;
            }

            .rule-updated {
                margin-top: 24px;
                text-align: left;
            }

            .rule-content-card {
                padding: 24px 18px;
            }

            .rule-content-card h2 {
                font-size: 18px;
            }

            .rule-pdf-inline {
                padding: 20px 16px;
            }

            .rule-pdf-inline a,
            .rule-agree a {
                width: 100%;
                min-width: 0;
            }
            .outline-section{
                margin-top: 70px;
            }
        }
        .outline-section h2
        {
            position: relative;
            margin: 0 0 34px;
            color: #12304a;
            font-size: 23px;
            text-align: center;
        }
        .outline-section h2::after
        {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -12px;
            width: 38px;
            height: 3px;
            border-radius: 999px;
            background: #2fad63;
            transform: translateX(-50%);
        }