/* ==========================================================================
           固有スコープ設定（他のCSSとの競合防止）
           ========================================================================== */
        .official-buyer-recruit-wrapper {
            /* カラーパレット変数 */
            --obr-main-purple: #7801B7;
            --obr-main-red: #E80100;
            --obr-accent-gold: #F3D567;
            --obr-bg-dark: #363636;
            --obr-text-gray: #333333;
            --obr-btn-grad: linear-gradient(138deg, #844798 0%, rgba(132, 71, 152, 1) 51%, #ed3737 100%);

            --obr-gray-50: #f9fafb;
            --obr-gray-100: #f3f4f6;
            --obr-gray-200: #e5e7eb;
            --obr-gray-300: #d1d5db;
            --obr-gray-400: #9ca3af;
            --obr-gray-500: #6b7280;
            --obr-gray-600: #4b5563;
            --obr-gray-700: #374151;
            --obr-gray-800: #1f2937;

            font-family: 'Noto Sans JP', 'Roboto', sans-serif;
            color: var(--obr-text-gray);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            background-color: var(--obr-gray-50);
            overflow-x: hidden;
        }

        /* リセットCSS (スコープ内のみ適用) */
        .official-buyer-recruit-wrapper *,
        .official-buyer-recruit-wrapper *::before,
        .official-buyer-recruit-wrapper *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .official-buyer-recruit-wrapper img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .official-buyer-recruit-wrapper a {
            text-decoration: none;
            color: inherit;
        }

        /* アニメーション */
        .obr-fade-in-up {
            animation: obrFadeInUp 1s ease forwards;
            opacity: 0;
            transform: translateY(20px);
        }

        @keyframes obrFadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .obr-delay-100 {
            animation-delay: 0.1s;
        }

        .obr-delay-200 {
            animation-delay: 0.2s;
        }

        .obr-delay-300 {
            animation-delay: 0.3s;
        }

        /* 共通レイアウト */
        .obr-container {
            max-width: 64rem;
            /* 1024px */
            margin: 0 auto;
            padding: 0 1rem;
        }

        .obr-container-lg {
            max-width: 72rem;
            /* 1152px */
            margin: 0 auto;
            padding: 0 1rem;
        }

        .obr-text-center {
            text-align: center;
        }

        /* 共通ボタン */
        .obr-btn-gradient {
            background: var(--obr-btn-grad);
            color: white !important;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            box-shadow: 0 10px 25px -5px rgba(120, 1, 183, 0.4);
            border-radius: 9999px;
            font-weight: 900;
            letter-spacing: 0.1em;
        }

        .obr-btn-gradient:hover {
            opacity: 0.95;
            transform: translateY(-2px);
            box-shadow: 0 15px 30px -5px rgba(120, 1, 183, 0.5);
        }

        .obr-btn-gradient svg {
            margin-left: 0.75rem;
            transition: transform 0.3s ease;
        }

        .obr-btn-gradient:hover svg {
            transform: translateX(4px);
        }

        /* -----------------------------------
           Hero Section
           ----------------------------------- */
        .obr-hero {
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5rem 1.5rem;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%),
                url('../../common/img/officialbuyer/img1.webp');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .obr-hero-subtitle {
            color: var(--obr-gray-500);
            letter-spacing: 0.3em;
            margin-bottom: 1.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        @media (min-width: 768px) {
            .obr-hero-subtitle {
                font-size: 0.875rem;
            }
        }

        .obr-hero-title {
            margin-bottom: 3rem;
            letter-spacing: -0.025em;
            font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
            font-weight: 900;
            line-height: 1.3;
        }

        .obr-hero-title .txt-purple {
            color: #844798;
        }

        .obr-hero-title .txt-red {
            color: #E80100;
        }

        .obr-hero-badges {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-bottom: 4rem;
        }

        @media (min-width: 768px) {
            .obr-hero-badges {
                flex-direction: row;
                gap: 1.5rem;
            }
        }

        .obr-info-badge {
            background: white;
            border: 2px solid #eee;
            border-radius: 100px;
            padding: 0.75rem 2rem;
            display: inline-flex;
            align-items: center;
            font-weight: 700;
            color: var(--obr-text-gray);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            font-size: 0.875rem;
        }

        @media (min-width: 768px) {
            .obr-info-badge {
                font-size: 1rem;
            }
        }

        .obr-info-badge svg {
            margin-right: 0.75rem;
            width: 20px;
            height: 20px;
        }

        .obr-info-badge .icon-purple {
            color: var(--obr-main-purple);
        }

        .obr-info-badge .icon-red {
            color: var(--obr-main-red);
        }

        .obr-hero-btn {
            padding: 1.25rem 2.5rem;
            font-size: 1rem;
        }

        @media (min-width: 768px) {
            .obr-hero-btn {
                padding: 1.25rem 4rem;
                font-size: 1.125rem;
            }
        }

        /* -----------------------------------
           Sticky CTA Bar
           ----------------------------------- */
        .obr-sticky-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #ffffff;
            padding: 0.75rem 1.5rem;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .obr-sticky-bar.is-visible {
            transform: translateY(0);
        }

        .obr-sticky-btn {
            padding: 0.75rem 2rem;
            font-size: 0.875rem;
            width: 100%;
            max-width: 400px;
        }

        @media (min-width: 768px) {
            .obr-sticky-btn {
                padding: 0.85rem 3.5rem;
                font-size: 1rem;
                width: auto;
            }

            .obr-sticky-bar {
                padding: 1rem 1.5rem;
            }
        }

        /* -----------------------------------
           About System Section
           ----------------------------------- */
        .obr-about {
            padding: 6rem 1rem;
            background-color: white;
        }

        .obr-section-header {
            text-align: center;
            margin-bottom: 5rem;
        }

        .obr-section-title {
            color: var(--obr-bg-dark);
            font-weight: 900;
            font-size: clamp(1.75rem, 1.1318rem + 2.9091vw, 3.75rem);
            line-height: 1.3;
        }

        .obr-section-divider-pr {
            width: 4rem;
            height: 4px;
            background: linear-gradient(to right, var(--obr-main-purple), var(--obr-main-red));
            margin: 2rem auto 0;
            border-radius: 9999px;
        }

        .obr-about-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 4rem;
            align-items: center;
        }

        @media (min-width: 1024px) {
            .obr-about-grid {
                grid-template-columns: repeat(12, 1fr);
            }

            .obr-about-left,
            .obr-about-right {
                grid-column: span 6;
            }
        }

        /* Left Column */
        .obr-about-left {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .obr-about-desc {
            font-size: 1.125rem;
            font-weight: 500;
            line-height: 2;
            color: var(--obr-gray-800);
        }

        @media (min-width: 768px) {
            .obr-about-desc {
                font-size: 1.25rem;
            }
        }

        .obr-text-red-bold {
            color: var(--obr-main-red);
            font-weight: 900;
        }

        .obr-point-box {
            background: linear-gradient(145deg, #f8faff 0%, #eef3ff 100%);
            border-left: 6px solid var(--obr-main-purple);
            border-radius: 0 16px 16px 0;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }

        .obr-point-box::before {
            content: '';
            position: absolute;
            top: -20px;
            right: -20px;
            width: 100px;
            height: 100px;
            background: var(--obr-main-purple);
            opacity: 0.05;
            border-radius: 50%;
        }

        .obr-point-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .obr-point-header svg {
            color: var(--obr-main-purple);
            margin-right: 0.5rem;
            width: 24px;
            height: 24px;
        }

        .obr-point-header h4 {
            color: var(--obr-main-purple);
            font-weight: 900;
            font-size: 1.25rem;
            line-height: 1.3;
        }

        .obr-point-text {
            color: var(--obr-gray-700);
            font-weight: 700;
            line-height: 1.625;
        }

        .obr-text-red-border {
            color: var(--obr-main-red);
            border-bottom: 2px solid var(--obr-main-red);
            padding-bottom: 2px;
        }

        .obr-about-image {
            display: none;
            border-radius: 1rem;
            overflow: hidden;
            height: 12rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .obr-about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.9;
        }

        @media (min-width: 768px) {
            .obr-about-image {
                display: block;
            }
        }

        /* Right Column */
        .obr-about-right {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .obr-merits-title {
            text-align: center;
            color: #844798;
            font-size: 1.25rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
        }

        @media (min-width: 768px) {
            .obr-merits-title {
                font-size: 1.5rem;
            }
        }

        .obr-feature-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: white;
            border-radius: 1rem;
            border: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            padding: 1.5rem 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .obr-feature-card:hover {
            transform: translateX(8px);
            border-color: var(--obr-main-purple);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .obr-feature-icon-wrap {
            width: 3rem;
            height: 3rem;
            border-radius: 9999px;
            background-color: var(--obr-gray-100);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1.5rem;
            flex-shrink: 0;
            transition: background-color 0.3s ease;
        }

        .obr-feature-card:hover .obr-feature-icon-wrap.bg-hover-purple {
            background-color: rgba(120, 1, 183, 0.1);
        }

        .obr-feature-card:hover .obr-feature-icon-wrap.bg-hover-red {
            background-color: rgba(232, 1, 0, 0.1);
        }

        .obr-feature-card:hover .obr-feature-icon-wrap.bg-hover-gold {
            background-color: rgba(202, 138, 4, 0.1);
        }

        .obr-feature-icon-wrap svg {
            color: var(--obr-gray-600);
            transition: color 0.3s ease;
        }

        .obr-feature-card:hover .obr-feature-icon-wrap.bg-hover-purple svg {
            color: var(--obr-main-purple);
        }

        .obr-feature-card:hover .obr-feature-icon-wrap.bg-hover-red svg {
            color: var(--obr-main-red);
        }

        .obr-feature-card:hover .obr-feature-icon-wrap.bg-hover-gold svg {
            color: #ca8a04;
        }

        .obr-feature-text {
            font-weight: 900;
            color: var(--obr-bg-dark);
            font-size: 1.125rem;
        }

        /* -----------------------------------
           Benefits Section
           ----------------------------------- */
        .obr-benefits {
            padding: 6rem 1rem;
            background-color: var(--obr-gray-50);
        }

        .obr-section-divider-rg {
            width: 4rem;
            height: 4px;
            background: linear-gradient(to right, var(--obr-main-red), var(--obr-accent-gold));
            margin: 2rem auto 0;
            border-radius: 9999px;
        }

        .obr-grid-2 {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        @media (min-width: 768px) {
            .obr-grid-2 {
                grid-template-columns: repeat(2, 1fr);
                gap: 3rem;
            }
        }

        .obr-benefit-card {
            background-color: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            border: 1px solid var(--obr-gray-100);
            transition: box-shadow 0.3s ease;
        }

        @media (min-width: 768px) {
            .obr-benefit-card {
                padding: 2rem;
            }
        }

        .obr-benefit-card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .obr-benefit-header {
            background-color: var(--obr-main-purple);
            width: 100%;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            padding: 0.75rem 1.25rem;
            margin-bottom: 1.25rem;
        }

        .obr-benefit-header svg {
            color: white;
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }

        .obr-rotate-icon {
            transform: rotate(-45deg);
        }

        .obr-benefit-title {
            font-size: 1.125rem;
            font-weight: 900;
            color: white;
            line-height: 1.2;
            margin: 0;
            text-align: left;
        }

        @media (min-width: 768px) {
            .obr-benefit-title {
                font-size: 22px;
            }
        }

        .obr-benefit-desc {
            font-size: 0.875rem;
            color: var(--obr-gray-600);
            font-weight: 500;
            line-height: 1.625;
        }

        @media (min-width: 768px) {
            .obr-benefit-desc {
                font-size: 1rem;
            }
        }

        /* -----------------------------------
           Divider Section
           ----------------------------------- */
        .obr-divider {
            height: 16rem;
            width: 100%;
            position: relative;
        }

        @media (min-width: 768px) {
            .obr-divider {
                height: 400px;
            }
        }

        .obr-divider img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.75);
        }

        .obr-divider-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(120, 1, 183, 0.4), transparent);
        }

        /* -----------------------------------
           Conditions & Flow Section
           ----------------------------------- */
        .obr-flow {
            padding: 6rem 1rem;
            background-color: white;
        }

        .obr-conditions-box {
            border: 3px solid var(--obr-bg-dark);
            border-radius: 1.5rem;
            padding: 2rem;
            margin-bottom: 8rem;
            position: relative;
            background-color: white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        @media (min-width: 768px) {
            .obr-conditions-box {
                padding: 3.5rem;
            }
        }

        .obr-conditions-title {
            font-size: 1.5rem;
            font-weight: 900;
            display: flex;
            align-items: center;
            text-align: left;
            margin-bottom: 2.5rem;
            color: var(--obr-bg-dark);
            line-height: 1.3;
        }

        @media (min-width: 768px) {
            .obr-conditions-title {
                font-size: 1.875rem;
            }
        }

        .obr-conditions-title svg {
            color: var(--obr-main-red);
            margin-right: 1rem;
            width: 2rem;
            height: 2rem;
        }

        .obr-conditions-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            font-size: 1rem;
            font-weight: 700;
            color: var(--obr-gray-800);
        }

        @media (min-width: 768px) {
            .obr-conditions-list {
                font-size: 1.125rem;
            }
        }

        .obr-condition-item {
            display: flex;
            align-items: flex-start;
        }

        .obr-bullet {
            color: var(--obr-bg-dark);
            margin-right: 1rem;
            margin-top: 0.25rem;
            font-size: 1.25rem;
        }

        .obr-condition-text {
            line-height: 1.625;
        }

        .obr-alert-item {
            display: flex;
            align-items: flex-start;
            color: var(--obr-main-red);
            background-color: #fef2f2;
            padding: 1rem;
            border-radius: 0.75rem;
            border: 1px solid #fee2e2;
        }

        .obr-alert-item .obr-bullet {
            color: var(--obr-main-red);
        }

        .obr-flow-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 1rem;
            row-gap: 3rem;
        }

        @media (min-width: 768px) {
            .obr-flow-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .obr-step-card {
            text-align: center;
        }

        .obr-step-card:hover .obr-step-circle {
            border-color: var(--obr-main-purple);
        }

        .obr-step-card:hover .obr-step-number {
            color: rgba(120, 1, 183, 0.1);
        }

        .obr-step-circle {
            position: relative;
            width: 8rem;
            height: 8rem;
            margin: 0 auto 1.5rem;
            border-radius: 9999px;
            background-color: white;
            border: 1px solid var(--obr-gray-300);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.3s ease;
            overflow: hidden;
        }

        @media (min-width: 768px) {
            .obr-step-circle {
                width: 10rem;
                height: 10rem;
            }
        }

        .obr-step-number {
            position: absolute;
            font-size: 4.5rem;
            font-weight: 900;
            color: var(--obr-gray-100);
            z-index: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: color 0.3s ease;
            line-height: 1;
        }

        @media (min-width: 768px) {
            .obr-step-number {
                font-size: 6.5rem;
            }
        }

        .obr-step-title {
            position: relative;
            z-index: 10;
            font-size: 1rem;
            font-weight: 900;
            color: var(--obr-bg-dark);
            margin: 0;
            letter-spacing: 0.1em;
        }

        @media (min-width: 768px) {
            .obr-step-title {
                font-size: 1.25rem;
            }
        }

        .obr-step-date {
            color: var(--obr-main-purple);
            font-weight: 700;
            letter-spacing: 0.05em;
            font-size: 0.875rem;
        }

        @media (min-width: 768px) {
            .obr-step-date {
                font-size: 1rem;
            }
        }

        /* -----------------------------------
           Subsidy Section
           ----------------------------------- */
        .obr-subsidy {
            padding: 8rem 0;
            background: linear-gradient(135deg, #2d004d 0%, #363636 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }

        .obr-subsidy::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 70% 30%, rgba(120, 1, 183, 0.15) 0%, transparent 60%);
            pointer-events: none;
        }

        .obr-subsidy .obr-section-header {
            margin-bottom: 4rem;
        }

        .white {
            color: white !important;
        }

        .obr-badge-top {
            background-color: var(--obr-main-red);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 900;
            display: inline-block;
            margin-bottom: 1.5rem;
            letter-spacing: 0.1em;
        }

        .obr-section-divider-gold {
            width: 4rem;
            height: 4px;
            background-color: var(--obr-accent-gold);
            margin: 2rem auto;
            border-radius: 9999px;
        }

        .obr-subsidy-desc {
            font-size: clamp(1rem, 1.2vw, 1.25rem);
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.8;
            opacity: 0.9;
        }

        .obr-subsidy-grid {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .obr-subsidy-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            padding: 2.5rem 3rem;
            transition: all 0.3s ease;
        }

        .obr-subsidy-card:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-5px);
            border-color: var(--obr-main-purple);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .obr-subsidy-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;
        }

        .obr-subsidy-region {
            font-size: clamp(1.25rem, 1.5vw, 1.75rem);
            font-weight: 800;
            margin: 0;
            line-height: 1.3;
        }

        .obr-subsidy-amount {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            color: var(--obr-accent-gold);
        }

        .obr-amount {
            font-size: clamp(2.5rem, 3.5vw, 4rem);
            font-weight: 900;
            line-height: 1;
        }

        .obr-currency {
            font-size: 1.25rem;
            font-weight: 700;
        }

        @media (max-width: 768px) {
            .obr-subsidy {
                padding: 6rem 0;
            }

            .obr-subsidy-card {
                padding: 2rem;
            }

            .obr-subsidy-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 1.5rem;
            }

            .obr-subsidy-content--hotel {
                flex-direction: row;
                align-items: center;
                gap: 1rem;
            }

            .obr-subsidy-content--hotel .obr-subsidy-region {
                font-size: clamp(1rem, 4vw, 1.25rem);
            }

            .obr-subsidy-amount {
                align-self: flex-end;
            }
        }

        /* -----------------------------------
           CTA Section
           ----------------------------------- */
        .obr-cta {
            padding: 6rem 1rem;
            background-color: var(--obr-bg-dark);
            color: white;
            text-align: center;
        }

        .obr-cta-desc {
            margin-bottom: 3rem;
            color: var(--obr-gray-300);
            font-weight: 500;
        }

        .obr-br-md {
            display: none;
        }

        @media (min-width: 768px) {
            .obr-br-md {
                display: block;
            }
        }

        .obr-cta-btn {
            padding: 1.5rem 4rem;
            font-size: 1.125rem;
        }

        .obr-contact-wrap {
            margin-top: 2.5rem;
        }

        .obr-contact-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            border: 1px solid white;
            border-radius: 9999px;
            padding: 0.75rem 2rem;
            background-color: rgba(255, 255, 255, 0.05);
            transition: background-color 0.3s ease;
        }

        .obr-contact-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .obr-contact-btn svg {
            width: 1.25rem;
            height: 1.25rem;
            margin-right: 0.75rem;
        }

        /* -----------------------------------
           Footer Section
           ----------------------------------- */
        .obr-footer {
            padding: 2.5rem 1.5rem;
            background-color: black;
            color: white;
            text-align: center;
        }

        .obr-footer p {
            font-size: 11px;
            color: var(--obr-gray-500);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 700;
        }

        .is-pc {
            display: block;

            @media (max-width: 768px) {
                display: none;
            }
        }

        /* Prevent sticky bar from covering footer content */
        footer {
            padding-bottom: 80px;
        }

        @media (max-width: 768px) {
            footer {
                padding-bottom: 70px;
            }
        }

        .is-sp {
            display: none;

            @media (max-width: 768px) {
                display: block;
            }
        }