:root {
    /* Colors */
    --color-base: #FFFFFF;
    --color-accent: #2745C2;
    /* Royal Blue */
    --color-accent-light: #EBF0FF;
    --color-accent-dark: #1A3299;
    --color-text-main: #333333;
    --color-text-sub: #666666;
    --color-bg-sub: #F5F7FA;
    --color-border: #E0E0E0;

    /* Typography */
    --font-main: 'Inter', 'Noto Sans JP', sans-serif;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 100px;

    /* Layout */
    --container-width: 1040px;
    --container-width-wide: 1280px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    color: var(--color-text-main);
    background-color: var(--color-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.container.wide {
    max-width: var(--container-width-wide);
}

.container.narrow {
    max-width: 800px;
}

.center {
    text-align: center;
}

.mb-xxl {
    margin-bottom: var(--spacing-xxl);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.relative {
    position: relative;
}

.z-10 {
    z-index: 10;
}

.text-accent {
    color: var(--color-accent);
}

.text-sm {
    font-size: 0.875rem;
}

.font-normal {
    font-weight: 400;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    border-radius: 99px;
    /* Pill shape */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    white-space: nowrap;
    /* Prevent text wrap */
}

.btn-primary {
    background-color: var(--color-accent);
    color: white;
}

.btn-disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    cursor: not-allowed;
    pointer-events: none;
}

.pricing-card.disabled-card {
    opacity: 0.6;
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-outline:hover {
    background-color: var(--color-accent-light);
}

.btn-white {
    background-color: white;
    color: var(--color-accent);
}

.btn-white:hover {
    background-color: #f0f0f0;
}

.btn-sm {
    padding: 8px 20px;
    font-size: 0.9rem;
}

.btn-lg {
    padding: 16px 48px;
    font-size: 1.1rem;
}

.full-width {
    width: 100%;
}

.shadow-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(39, 69, 194, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(39, 69, 194, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(39, 69, 194, 0);
    }
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05); /* Very subtle separator */
    height: 70px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensure full width usage in container */
}

.logo {
    display: inline-flex;
    align-items: center;
    z-index: 1002; /* Above mobile menu */
    position: relative;
    line-height: 0;
}

.logo-img {
    height: 38px;
    width: auto;
    max-width: min(520px, 70vw);
    object-fit: contain;
    display: block;
}

@media (max-width: 767px) {
    .logo-img {
        height: 32px;
        max-width: 72vw;
    }
}

/* Desktop Nav */
.desktop-nav {
    display: none;
}

@media (min-width: 900px) {
    .desktop-nav {
        display: flex;
        gap: 20px;
        align-items: center;
    }
    
    .desktop-nav a:not(.btn) {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-text-main);
        position: relative;
    }

    .desktop-nav a:not(.btn):hover {
        color: var(--color-accent);
    }
}

/* Hamburger */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1002; /* Above mobile menu */
    padding: 0;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 900px) {
    .hamburger {
        display: none;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Fallback */
    height: 100dvh;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding-top: 80px;
    padding-bottom: 40px;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, rgba(39, 69, 194, 0.05), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 20px;
}

.mobile-nav a:not(.btn) {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: calc(0.05s * var(--i));
    text-decoration: none;
    letter-spacing: 0.02em;
}

.mobile-nav a:not(.btn)::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s;
    margin: 4px auto 0;
}

.mobile-nav a:not(.btn):hover::after {
    width: 100%;
}

/* Animation trigger when active */
.mobile-menu.active .mobile-nav a:not(.btn) {
    opacity: 1;
    transform: translateY(0);
}

.mobile-cta-wrapper {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: calc(0.05s * var(--i));
}

.mobile-menu.active .mobile-cta-wrapper {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav .btn {
    width: 100%;
    max-width: 320px;
    padding: 16px;
    font-size: 1.1rem;
    box-shadow: 0 10px 20px rgba(39, 69, 194, 0.2);
}

.mobile-cta-note {
    font-size: 0.8rem;
    color: var(--color-text-sub);
    margin-top: 12px;
    font-weight: 500;
}

/* Sections Global */
section {
    padding: var(--spacing-xl) 0;
}

@media (min-width: 768px) {
    section {
        padding: var(--spacing-xxl) 0;
    }
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    line-height: 1.4;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }

    /* Section 1: FV (Updated) */
    .section-fv {
        padding-top: 100px;
        /* More top space */
        padding-bottom: 120px;
        /* Reserve space for carousel overlap */
        min-height: 800px;
        /* Switch to min-height for safety */
        position: relative;
        overflow: visible;
        /* Allow background to flow if needed, though strictly background is bound to box */
        color: white;
        display: flex;
        align-items: center;
    }
}

/* Mobile adjustments for FV */
@media (max-width: 767px) {
    .section-fv {
        padding-top: 90px;
        padding-bottom: 40px;
    }

    .fv-title {
        margin-bottom: 20px;
    }

    .no1-crown-badge-inline {
        margin-bottom: 16px;
    }

    .fv-benefits-circles {
        margin-bottom: 24px;
    }

    .fv-remark {
        margin-top: 16px !important;
    }
}

.fv-bg-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.fv-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.fv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(39, 69, 194, 0.85);
    z-index: 1;
    /* Ensure it sits ON TOP of the image */
    backdrop-filter: blur(2px);
    /* Slight blur helps text pop */
}

.fv-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
    text-align: left;
    /* Back to left */
    align-items: flex-start;
    /* Back to start */
    justify-content: center;
    height: 100%;
}

.fv-content {
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Back to start */
}

.fv-badge-row,
.fv-title {
    text-align: left;
}

@media (min-width: 900px) {
    .fv-container {
        flex-direction: row;
        /* Split layout */
        align-items: center;
        justify-content: space-between;
    }

    .fv-content {
        flex: 0 0 65%;
        /* Allocate 65% width to content */
        max-width: none;
        text-align: left;
    }

    .fv-visual {
        flex: 0 0 35%;
        /* Allocate remaining space */
        height: 100%;
        position: relative;
    }

    .fv-visual-img {
        position: absolute;
        bottom: -270px;
        /* Match the padding-bottom of .section-fv to align with bg bottom */
        right: -40%;
        /* Adjust horizontal position */
        width: 190%;
        /* 180-200% size */
        max-width: none;
        pointer-events: none;
        /* Prevent interference */
        z-index: 1;
    }
}

.badge-pill {
    background: white;
    color: var(--color-accent);
    padding: 8px 24px;
    border-radius: 99px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.fv-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 32px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 900px) {
    .fv-title {
        font-size: 3.5rem;
    }
}

.fv-subtitle {
    font-size: 0.6em;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.text-gradient {
    /* Fallback */
    color: white;
}

/* Benefit Circles */
.fv-benefits-circles {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    justify-content: flex-start;
    /* Left align */
}

.benefit-circle {
    background: white;
    color: var(--color-accent);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 1.25;
    padding: 4px;
}

.benefit-circle strong {
    font-size: 1.15rem;
    color: #1A3299;
}

/* CTA Row */
.fv-cta-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.fv-cta-row.center {
    align-items: flex-start;
}

@media (min-width: 600px) {
    .fv-cta-row {
        flex-direction: row;
    }
}

.btn-primary.shadow-pulse {
    background: #FF8A00;
    /* Orange CTA from reference */
    color: white;
}

.btn-primary.shadow-pulse:hover {
    background: #E57C00;
}

.fv-visual {
    position: relative;
    /* ensure image stays within bounds on mobile */
    min-height: 300px;
}

.fv-visual-img {
    width: 200%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.person-img {
    max-height: 500px;
    object-fit: contain;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.no1-crown-badge {
    position: absolute;
    bottom: 40px;
    left: -20px;
    /* Overlap slightly */
    background: rgba(26, 50, 153, 0.9);
    /* Dark blue */
    color: #FFD700;
    /* Gold */
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border: 2px solid #FFD700;
    animation: float 4s ease-in-out infinite;
}

/* Inline Crown Badge reused classes */
.crown-icon {
    font-size: 1.2rem;
}

/* Remark */
/* Remark */
.fv-remark {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin-top: 24px;
    text-align: left;
}

/* Inline Crown Badge */
.no1-crown-badge-inline {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 8px 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    margin-bottom: 24px;
    backdrop-filter: blur(4px);
}

.crown-icon {
    font-size: 1.2rem;
}

.no1-text-inline {
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.no1-large {
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFD700;
    font-style: italic;
}

/* Section 2 overlap & Full Width Carousel */
.section-results {
    margin-top: -100px;
    /* Pull up into the FV padding-bottom space */
    padding-top: 0;
    position: relative;
    z-index: 10;
    overflow: visible;
    background: linear-gradient(to bottom, transparent 100px, #F3F4F1 100px);
    /* Unify background with Campaign */
}

/* Allow carousel arrows to be seen if outside */

/* Full Width Container for Carousel */
.section-results .container.wide {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    /* Hide scrollbar of parent */
}

.results-carousel {
    position: relative;
    padding: 40px 0;
    /* Space for shadow */
}

/* Section 3: Campaign (New) */
.section-campaign {
    padding-top: 60px;
    padding-bottom: 240px;
    /* Increased bottom padding to accommodate V-shape and negative margin of next section */
    position: relative;
    z-index: 20;
    /* Removed direct clip-path to avoid clipping children like the pill */
}

/* Create the V-shape background using pseudo-element */
.section-campaign::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F3F4F1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
    z-index: -1;
}

.campaign-period-pill {
    background: white;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    display: inline-block;
    padding: 8px 32px;
    border-radius: 99px;
    font-weight: 700;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.campaign-box {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: 40px;
}

.campaign-banner {
    background: #2745C2;
    /* Dark Blue */
    color: white;
    padding: 32px 16px;
    text-align: center;
    background-image: radial-gradient(circle at center, #1A4080 1px, transparent 1px);
    background-size: 20px 20px;
}

.campaign-sub {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
    opacity: 0.9;
}

.campaign-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.campaign-title .big {
    font-size: 2.2rem;
    color: #FFD700;
    margin: 0 4px;
}

.campaign-title .icon {
    font-size: 1.8rem;
    vertical-align: middle;
}

.campaign-grid {
    padding: 24px;
    display: grid;
    gap: 24px;
}

@media (min-width: 768px) {
    .campaign-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.campaign-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    background: white;
    position: relative;
    display: flex;
    flex-direction: column;
}

.benefit-label {
    background: #FFD700;
    color: #333;
    font-weight: 700;
    padding: 4px 16px;
    display: inline-block;
    transform: skewX(-15deg);
    margin-bottom: 12px;
    align-self: flex-start;
    box-shadow: var(--shadow-sm);
}

.benefit-label .num {
    font-size: 1.2rem;
    margin-left: 4px;
}

.campaign-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

@media (min-width: 600px) {
    .campaign-content {
        flex-direction: row;
        align-items: center;
    }
}

.campaign-text {
    flex: 1;
}

.item-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
    color: var(--color-accent);
}

.item-desc {
    list-style: disc;
    padding-left: 20px;
    font-size: 0.9rem;
    color: var(--color-text-main);
}

.item-desc li {
    margin-bottom: 4px;
}

.campaign-img {
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 16px 0 0;
}

.campaign-img img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    object-position: top center;
}

@media (min-width: 600px) {
    .campaign-img {
        max-width: 180px;
        margin: 0 0 0 24px;
    }

    .campaign-img img {
        height: 120px;
    }
}

.campaign-cta .cta-label {
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
}

.campaign-cta .cta-label::before,
.campaign-cta .cta-label::after {
    content: '//';
    color: var(--color-text-sub);
    margin: 0 8px;
    font-weight: 300;
}

.carousel-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 5vw;
    /* Start with some padding */
    -webkit-overflow-scrolling: touch;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid var(--color-border);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    z-index: 20;
    transition: all 0.2s;
    font-size: 1.5rem;
    color: var(--color-accent);
}

.carousel-nav:hover {
    background: var(--color-accent);
    color: white;
}

.carousel-nav.prev {
    left: -20px !important;
}

.carousel-nav.next {
    right: -20px !important;
}

/* Floating UI in FV */
.floating-ui {
    position: absolute;
    background: white;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    bottom: -20px;
    right: 20px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Section 2: Market (New) */
.section-market {
    background-color: #1A3299;
    /* Main Dark Blue */
    position: relative;
    padding: 200px 0 140px;
    /* Generous top padding to clear the 50px overlap + title space */
    margin-top: -100px;
    /* Stronger pull up to ensure no white gap appears */
    /* If Campaign V extends down 50px, and we pull up 100px:
       The Market content starts higher physically.
       But simple math:
       Campaign 'visual bottom' is center point.
       Sides are -50px.
       If we want Blue to start at sides: margin-top: -50px.
       The Campaign center point then protrudes 50px INTO the Blue section.
       If title is hidden, we need more padding.
       Let's try margin-top: -50px; padding-top: 180px;
    */
    margin-top: -50px;
    overflow: visible;
    /* Ensure nothing is cut */
    color: #333;
    /* Remove clip-path on Market if user only wanted Campaign to be V-shape? 
       User said "Campaign section V... also Market section title hidden".
       User previously asked "Can you make blue background bottom V-shape?" -> We did that.
       Wait, let's keep Market V-shape if intended, but let's focus on top overlap.
    */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
}

.market-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(26, 50, 153, 0.8), rgba(26, 50, 153, 0.9)),
        url("https://www.transparenttextures.com/patterns/circuit-board.png");
    /* Fallback pattern */
    opacity: 0.6;
    z-index: 1;
}

.market-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    padding: 32px 24px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    .market-card {
        padding: 60px;
    }
}

.market-main-title {
    z-index: 10;
    line-height: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin-bottom: 80px;
    /* Add margin to separate from content */
}

.market-title-sub {
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 5px;
    border: 3px solid #333;
    background-color: white;
    color: #333;
    font-weight: bold;
    font-size: 26px;
    box-shadow: 3px 3px 0 0 #333;
    text-align: center;
    display: inline-block;
    min-width: 300px;
    margin-bottom: 24px;
}

.market-title-sub:before,
.market-title-sub:after {
    position: absolute;
    left: 60%;
    height: 0;
    width: 0;
    border: solid transparent;
    content: "";
    pointer-events: none;
}

.market-title-sub:before {
    top: 100%;
    margin-left: -12px;
    border-color: transparent;
    border-top-color: #333;
    border-left-color: #333;
    border-width: 10px;
}

.market-title-sub:after {
    top: calc(100% - 3px);
    margin-left: -7px;
    border-color: transparent;
    border-top-color: white;
    border-left-color: white;
    border-width: 6.5px;
}

/* We remove .market-title-deco as the speech bubble tail replaces it */
.market-title-deco {
    display: none;
}

/* Correction: 45deg rotates clockwise. Bottom border moves to Bottom-Left? No.
   Box:
   A B
   C D
   Border Bottom (CD) and Right (BD).
   Rotate 45deg:
   D moves to bottom. C moves to left. B moves to right. A moves to top.
   So Bottom (CD) becomes Left-Bottom. Right (BD) becomes Right-Bottom.
   Wait.
   Standard box:
   ___
   | |
   ---
   Right border (|) and Bottom border (__). Corner is Bottom-Right.
   Rotate 45deg clockwise:
   Bottom-Right corner moves to Bottom-Center.
   So it forms a V shape.
   Correct.
*/

.market-title-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1;
}

.market-title-main .num {
    font-size: 4rem;
    color: #FFD700;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    line-height: 0.8;
}

.market-title-main .text {
    font-size: 2rem;
    color: white;
    font-weight: 700;
}

/* Reason Layout */
.reason-row {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 20px 0;
}

@media (min-width: 768px) {
    .reason-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
    }

    /* .reason-row.reverse-mobile can be used here if needed for mobile reversal */
}

.reason-content {
    flex: 1;
    text-align: left;
}

.reason-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Reason Typography */
.reason-label {
    font-size: 1.2rem;
    font-weight: 900;
    background-color: #FFD700;
    color: #333;
    padding: 4px 12px;
    margin-bottom: 16px;
    display: inline-block;
    letter-spacing: 0.05em;
    font-family: 'Inter', sans-serif;
}

.reason-head {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 24px;
    color: #111;
}

.reason-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444;
}

.marker-yellow {
    background: linear-gradient(transparent 60%, #FFD700 60%);
    font-weight: 700;
    padding: 0 2px;
}

.text-yellow {
    color: #FFD700;
}

.text-blue {
    color: #1A3299;
}

/* Divider */
.reason-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 32px 0;
}

@media (min-width: 768px) {
    .reason-divider {
        margin: 48px 0;
    }
}

/* Icons Grid for Reason 2 */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 300px;
}

.icon-item {
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
}

.icon-item:hover {
    transform: scale(1.1);
}

.img-responsive {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Section 4: Courses */
.section-courses {
    background-color: #F8FAFC;
    padding: 80px 0;
}

.courses-header {
    margin-bottom: 88px;
}

.courses-subtitle-line {
    width: 40px;
    height: 2px;
    background: #333;
    margin: 24px auto;
}

.courses-intro {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 32px;
}

.courses-highlight {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.courses-highlight .highlight-bg {
    background-color: #01c2e0;
    /* Teal-Blue similar to image title */
    color: white;
    padding: 4px 16px;
}

.courses-highlight .highlight-text {
    color: #01c2e0;
}

.courses-big-title {
    font-size: 2rem;
    font-weight: 700;
    color: #01c2e0;
    margin-bottom: 12px;
}

.courses-big-title .number {
    font-size: 3.5rem;
    font-family: 'Inter', sans-serif;
    margin-right: 4px;
    line-height: 1;
}

/* Grid */
.courses-grid {
    display: grid;
    gap: 84px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .courses-grid {
        grid-template-columns: 1fr 1fr;
        gap: 112px 48px;
        /* Larger gap top/bottom for labels */
    }
}

.course-wrapper {
    position: relative;
    /* margin-top managed by grid gap but labels float up */
}

/* Floating Labels */
.course-floating-label {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    margin-bottom: 28px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.8;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Pseudo-element lines matching the image: \ Text / */
.course-floating-label::before,
.course-floating-label::after {
    content: "";
    display: block;
    width: 1px;
    height: 24px;
    background-color: #60A5FA;
    flex-shrink: 0;
}

.course-floating-label::before {
    transform: rotate(-25deg);
    /* Creates \ */
}

.course-floating-label::after {
    transform: rotate(25deg);
    /* Creates / */
}

/* Removed old course-line-deco styles */
/* .course-line-deco ... deleted */

/* Card Styling */
.course-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s;
}

.course-card:hover {
    transform: translateY(-5px);
}

.course-header {
    padding: 12px;
    text-align: center;
    color: white;
}

.course-header h3 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 700;
}

/* Colors */
.course-basic .course-header {
    background-color: #01c2e0;
}

/* Teal */
.course-marketing .course-header {
    background-color: #fddb10;
}

/* Orange */
.course-sales .course-header {
    background-color: #2745c2;
}

/* Navy */
.course-hr .course-header {
    background-color: #777777;
}

/* Maroon */

/* Image Area */
.course-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.course-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.course-card:hover .course-img img {
    transform: scale(1.05);
}

/* Badge Overlay in Image (for Basic course) */
.badge-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badge-text {
    font-size: 0.7rem;
    opacity: 0.9;
}

.badge-sub {
    font-size: 1.2rem;
    font-weight: 700;
}

.badge-pill {
    background: #F08422;
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 99px;
    align-self: center;
    margin-top: 4px;
}

/* Course Body */
.course-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.course-desc {
    font-size: 0.9rem;
    margin-bottom: 24px;
    line-height: 1.7;
    color: #444;
    flex: 1;
}

/* Recommend Box */
.course-recommend {
    background: #FFF9F0;
    /* Light beige for all? Or specific? Image uses light beige for Marketing. Generic light bg is safe. */
    background: #F9F9F9;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.course-marketing .course-recommend {
    background: #FFF4E5;
}

/* Marketing specific */
.course-basic .course-recommend {
    background: #EFFFFF;
}

.course-recommend h4 {
    font-size: 0.85rem;
    margin-bottom: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.recommend-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.icon-face {
    font-size: 1.5rem;
    color: #555;
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    flex-shrink: 0;
}

/* Buttons */
.course-btn {
    display: block;
    text-align: center;
    padding: 12px;
    background: white;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s;
    margin-top: auto;
}

.course-basic .course-btn {
    color: #3B9D9D;
    border-color: #3B9D9D;
}

.course-marketing .course-btn {
    color: #F08422;
    border-color: #F08422;
}

.course-sales .course-btn {
    color: #1A3299;
    border-color: #1A3299;
}

.course-hr .course-btn {
    color: #A63A50;
    border-color: #A63A50;
}

.course-btn:hover {
    color: white !important;
    /* Force white text */
}

.course-basic .course-btn:hover {
    background: #3B9D9D;
}

.course-marketing .course-btn:hover {
    background: #F08422;
}

.course-sales .course-btn:hover {
    background: #1A3299;
}

.course-hr .course-btn:hover {
    background: #A63A50;
}

/* Section 4: Features */
.section-features .feature-row {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 80px;
}

@media (min-width: 768px) {
    .section-features .feature-row {
        flex-direction: row;
        align-items: center;
        gap: 80px;
    }

    .section-features .feature-row.reverse {
        flex-direction: row-reverse;
    }

    .feature-text,
    .feature-img {
        width: 50%;
    }
}

.feature-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-accent-light);
    line-height: 1;
    margin-bottom: 8px;
}

.feature-img img {
    border-radius: var(--radius-md);
}

/* Section 5: Curriculum (Timeline) */
.section-curriculum {
    background-color: var(--color-bg-sub);
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    padding-left: 30px;
    border-left: 2px solid var(--color-accent);
    margin-bottom: 40px;
    position: relative;
}

.timeline-item:last-child {
    border-left: 2px solid transparent;
}

.timeline-marker {
    position: absolute;
    left: -32px;
    top: 0;
    background: var(--color-accent);
    color: white;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.timeline-content {
    background: white;
    padding: 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* FAQ Category */
.faq-category {
    margin-top: 80px;
    margin-bottom: 32px;
    padding: 0;
    border: none;
    font-weight: 700;
    color: var(--color-text);
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 0.02em;
    background: transparent;
}

.faq-category .highlight {
    color: var(--color-accent);
    font-size: 1.6rem;
    margin-right: 4px;
    font-weight: 800;
}

.faq-category:first-child {
    margin-top: 0;
}

/* Accordion */
details.accordion {
    margin-top: 0;
    border-bottom: 1px solid #E5E7EB;
    background: transparent;
    overflow: hidden;
    transition: background 0.2s;
}

details.accordion:first-of-type {
    border-top: 1px solid #E5E7EB;
}

details.accordion summary {
    padding: 24px 8px;
    font-weight: 600;
    color: #1F2937;
    font-size: 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

/* Q Icon (blue Q) */
details.accordion summary::before {
    content: 'Q.';
    color: var(--color-accent);
    font-weight: 800;
    font-size: 1.2rem;
    flex-shrink: 0;
}

details.accordion summary:hover {
    color: var(--color-accent);
}

/* Chevron Icon */
details.accordion summary::after {
    content: '';
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-accent);
    border-top: 2px solid var(--color-accent);
    transform: rotate(45deg);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    margin-right: 8px;
}

details[open].accordion summary::after {
    transform: rotate(135deg);
}

.accordion-body {
    padding: 0 8px 32px 42px; /* Indent to align with text */
    color: #4B5563;
    line-height: 1.8;
    font-size: 0.95rem;
}

.accordion-body li {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 4px;
}

/* Accordion animation helpers (JS sets height on details for smooth open/close) */
details.accordion.is-animating {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    details.accordion,
    details.accordion summary::after {
        transition: none !important;
    }
}

/* Section 6: RESULTS (Rich Carousel) */
.section-results {
    /* Overlap handling - see above */
    position: relative;
}

/* Carousel Layout */
.results-carousel {
    position: relative;
    padding: 20px 0;
}

.carousel-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    /* Scrollbar space / shadow space */
    -webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.result-card {
    min-width: 320px;
    max-width: 360px;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}

/* Result Card Parts */
.result-header {
    background: linear-gradient(90deg, #2745C2);
    color: white;
    padding: 12px 36px;
    /* High padding for 'label' look */
    font-weight: 700;
    text-align: center;
    font-size: 1rem;
}

.result-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Time Comparison */
.time-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.time-before,
.time-after {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}

.time-before {
    color: var(--color-text-sub);
    opacity: 0.6;
}

.time-after {
    color: #FF4757;
    font-size: 2.2rem;
}

.time-after .small {
    font-size: 0.9rem;
    color: var(--color-text-main);
    font-weight: 600;
}

.unit {
    font-size: 1rem;
}

.arrow-double {
    color: var(--color-border);
    font-size: 0.8rem;
    letter-spacing: -2px;
}

/* Person Info */
.result-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.person-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-bg-sub);
}

.person-info .name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
}

.person-info .job {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--color-text-sub);
}

.course-badge {
    display: inline-block;
    border: 1px solid var(--color-border);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: #fafafa;
    color: var(--color-text-sub);
}

/* Nav Buttons */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid var(--color-border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    z-index: 2;
    transition: all 0.2s;
    display: none;
    /* Hidden on mobile */
}

@media (min-width: 768px) {
    .carousel-nav {
        display: flex;
    }
}

.carousel-nav:hover {
    background: var(--color-accent-light);
}

.carousel-nav.prev {
    left: -20px;
}

.carousel-nav.next {
    right: -20px;
}

/* Section 5: Solution (New) */
.section-solution {
    background-color: #00C2E0;
    /* Cyan */
    padding: 60px 0 80px;
    color: #333;
    overflow: visible;
    /* Ensure nothing clips the balloon */
}

.solution-header-sub {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.solution-header-sub::before,
.solution-header-sub::after {
    content: "";
    display: block;
    width: 2px;
    height: 20px;
    background-color: #333;
}

.solution-header-sub::before {
    transform: rotate(-25deg);
}

.solution-header-sub::after {
    transform: rotate(25deg);
}


.solution-title {
    font-size: 1.75rem;
    font-weight: 900;
    color: white;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.solution-card {
    background: white;
    border-radius: 10px;
    overflow: visible !important;
    /* Force visible */
    max-width: 1000px;
    margin: 0 auto;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); Removed as requested */
    position: relative;
    z-index: 1;
    padding-bottom: 40px;
    /* Ensure space at bottom */
}

.solution-card+.solution-card {
    margin-top: 80px;
    /* Space between duplicated cards */
}

/* Problem Part */
.solution-problem {
    padding: 40px 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@media (min-width: 768px) {
    .solution-problem {
        flex-direction: row;
        justify-content: center;
        text-align: left;
        align-items: flex-start;
        /* Top align for bubbles to float correctly */
    }
}

.problem-illus-wrapper {
    position: relative;
    width: 260px;
    /* Slightly larger */
    flex-shrink: 0;
    margin-top: -30px;
    margin-right: 30px;
    margin-left: -50px;
    /* Pull left to stick out ! */
    z-index: 10;
}

.problem-img-main {
    width: 100%;
    transform: rotate(0deg);
    /* Straight */
    position: relative;
    z-index: 10;
    top: -20px;
    /* Slight overflow top */
    left: 20px;
    /* Slight right */
}

.problem-exclamation {
    position: absolute;
    top: -50px;
    /* Stick out more */
    left: -50px;
    width: 100px;
    /* Bigger */
    height: auto;
    /* Remove CSS shapes */
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: rotate(0deg);
    /* Straight */
    z-index: 20;
    /* On top of card */
}

.problem-exclamation img {
    width: 100%;
    height: auto;
}

/* Remove .exclamation-mark text style */
/* .exclamation-mark ... deleted */

.problem-text {
    flex: 1;
    max-width: 500px;
    text-align: left;
    padding-top: 10px;
}

.problem-text h3 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 16px;
    line-height: 1.4;
    color: #333;
}

/* Solution Part (Light Blue) */
.solution-solve {
    background-color: #E8F7FA;
    padding: 0px 40px 30px;
    position: relative;
    margin: 0 30px;
    border-radius: 10px;
}

.solve-header {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    /* Align leftish */
    margin-left: 20px;
    gap: 12px;
    transform: rotate(-5deg);
    /* Tilt */
}

.solve-header::before,
.solve-header::after {
    content: "";
    width: 2px;
    height: 32px;
    background: #333;
}

.solve-header::before {
    transform: rotate(-25deg);
}

.solve-header::after {
    transform: rotate(25deg);
}


.solve-content-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .solve-content-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        /* Align bottom to match illustration base */
        max-width: 800px;
        margin: 0 auto 32px;
    }
}

.solve-item-col {
    flex: 1;
    text-align: left;
}

.solve-product-img {
    width: 250px;
    margin-bottom: 16px;
}

.solve-item-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00C2E0;
    /* Cyan Text */
    margin-bottom: 12px;
}

.solve-desc-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

.solve-illustration-col {
    width: 280px;
    flex-shrink: 0;
    position: relative;
    /* Default mobile styles (no negative margin to prevent overlap) */
    width: 100%;
    max-width: 250px;
    margin: 20px auto 0;
}

@media (min-width: 768px) {
    .solve-illustration-col {
        width: 280px;
        top: -60px;
        /* Pop out of top only on desktop */
        margin-bottom: -40px;
        margin-top: 0;
    }
}

.solve-illustration-col img {
    width: 100%;
}

.btn-solution {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFE600;
    /* Yellow */
    color: black;
    font-weight: 700;
    padding: 12px 48px;
    border-radius: 4px;
    font-size: 1.1rem;
    border: 2px solid #333;
    box-shadow: 4px 4px 0 #333;
    transition: transform 0.2s;
}

.btn-solution:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #333;
}

/* Section 7: Support */
.support-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 600px) {
    .support-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.support-item {
    background: white;
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.support-item i {
    font-size: 1.5rem;
}

/* Section 8: Pricing */
.section-pricing {
    background-color: var(--color-bg-sub);
    /*
     * The flyer section above overlaps the next section by 50px
     * (see .section-flyer { margin-bottom: -50px; }).
     * Compensate here so the visible top/bottom spacing looks even.
     */
    padding-top: calc(var(--spacing-xl) + 50px);
}

@media (min-width: 768px) {
    .section-pricing {
        padding-top: calc(var(--spacing-xxl) + 50px);
    }
}

.pricing-grid {
    display: grid;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        /* Vertically align */
    }
}

/* Pricing Tabs */
.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}

.pricing-tab {
    background: white;
    border: 2px solid var(--color-border);
    color: var(--color-text-sub);
    padding: 12px 32px;
    border-radius: 99px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1rem;
}

.pricing-tab:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.pricing-tab.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-md);
}

.pricing-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.pricing-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pricing-card {
    background: white;
    padding: 32px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card .btn {
    margin-top: auto;
}

.pricing-card.featured {
    border: 2px solid var(--color-accent);
    transform: scale(1);
    z-index: 1;
    box-shadow: var(--shadow-lg);
}

@media (max-width: 767px) {
    .pricing-card.featured {
        transform: none;
        order: -1;
        margin-bottom: 10px;
    }
}

.ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF4757;
    color: white;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
}

.plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 24px;
}

.currency {
    font-size: 1rem;
    color: var(--color-text-main);
    font-weight: 400;
}

.plan-features {
    margin-bottom: 32px;
    text-align: left;
}

.plan-features li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.plan-features li sup,
.plan-features li .note-mark {
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 2px;
    color: var(--color-text-sub);
}

/* Pricing Footer Info */
.pricing-footer-info {
    max-width: 1000px;
    margin: 60px auto 0;
    padding: 0 16px;
}

.completion-requirements {
    margin-bottom: 40px;
    font-size: 0.9rem;
    color: var(--color-text-main);
}

.requirements-note {
    font-weight: 700;
    margin-bottom: 8px;
}

.requirements-list {
    list-style: none;
    padding: 0;
}

.requirements-list li {
    position: relative;
    padding-left: 0;
    margin-bottom: 4px;
}

.requirements-list li::before {
    content: none;
}

/* Extension Fee Box */
.extension-fee-box {
    background: white;
    border: 1px solid var(--color-border);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* @media (min-width: 900px) {
    .extension-fee-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
} */

.extension-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
    min-width: 120px;
    text-align: left;
}

.extension-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

@media (min-width: 768px) {
    .extension-content {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }
}

.extension-prices {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .extension-prices {
        flex-direction: row;
        gap: 24px;
    }
}

.extension-price-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.extension-category {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    align-self: flex-start;
    border-radius: 99px;
}

.extension-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #000;
}

.extension-value .tax {
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 2px;
}

.extension-details {
    font-size: 0.9rem;
    color: #333;
}

.extension-details ul {
    list-style: none;
    padding: 0;
}

.extension-details li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 4px;
}

.extension-details li::before {
    content: "・";
    position: absolute;
    left: 0;
}


/* Section 9: Flow */
.flow-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

@media (min-width: 768px) {
    .flow-steps {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
}

.step-item {
    text-align: center;
    flex: 1;
    max-width: 320px;
}

.step-num {
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto 16px;
}

.step-arrow {
    display: none;
    color: var(--color-border);
    font-size: 1.5rem;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .step-arrow {
        display: block;
    }
}

.flow-note {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--color-text-sub);
    line-height: 1.6;
}

.flow-note a {
    color: var(--color-accent);
    text-decoration: underline;
}

.flow-note-sub {
    font-size: 0.85rem;
    color: var(--color-text-sub);
}

.flow-bullets {
    margin: 12px auto 0;
    max-width: 320px;
    text-align: left;
}

/* Flow: typography hierarchy (title > details) */
.section-flow .step-item h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-accent-dark);
    margin-top: 12px;
}

.flow-bullets li {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section 11: Final CTA */
/* .section-final-cta inherits global section padding */

.cta-box {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: white;
    padding: 60px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.cta-desc {
    font-size: 1.1rem;
    margin-bottom: 32px;
    opacity: 0.9;
}

.cta-note {
    margin-top: 16px;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Reservation Form (LP in public/ai-school/index.html) */
.cta-box.reservation-box {
    background: #ffffff;
    color: var(--color-text-main);
    padding: 28px 16px;
    text-align: left;
    box-shadow: var(--shadow-lg);
}

.cta-box.reservation-box.is-course .reservation-info-grid {
    grid-template-columns: 1fr;
}

.cta-box.reservation-box.is-course .selected-date-display {
    display: none;
}

@media (min-width: 768px) {
    .cta-box.reservation-box {
        padding: 44px 40px;
    }
}

.reservation-tabs {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    margin-bottom: 22px;
}

.reservation-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 16px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    color: #111827;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.reservation-tab.is-active {
    background: var(--color-accent);
    color: #ffffff;
}

.reservation-tab:not(.is-active):hover {
    background: #e9eefc;
}

.form-section-step {
    margin-top: 18px;
}

.form-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #111827;
    margin-bottom: 10px;
}

.form-note-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #7c2d12;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 12px;
}

.btn-week {
    border: none;
    background: #111827;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}

.btn-week[disabled] {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}

.current-month {
    font-weight: 900;
    color: #111827;
    font-size: 1.1rem;
}

.calendar-container {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.reservation-calendar {
    min-width: 860px;
}

.res-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    gap: 12px;
}

.res-day-col {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 10px;
}

.res-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 10px;
}

.res-day-date {
    font-size: 1.25rem;
    font-weight: 900;
    color: #111827;
    line-height: 1;
}

.res-day-week {
    font-size: 0.95rem;
    font-weight: 900;
    color: #6b7280;
}

.res-day-head.is-sat .res-day-date,
.res-day-head.is-sat .res-day-week {
    color: #2563eb;
}

.res-day-head.is-sun .res-day-date,
.res-day-head.is-sun .res-day-week {
    color: #ef4444;
}

.res-day-head.is-today {
    background: rgba(39, 69, 194, 0.08);
    border-radius: 12px;
    padding: 10px 10px 10px 10px;
    margin: -4px -4px 10px -4px;
    border-bottom: none;
}

.res-slot-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.res-slot-btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 2px solid var(--color-accent);
    background: #ffffff;
    color: var(--color-accent);
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.res-slot-btn:hover {
    background: var(--color-accent-light);
}

.res-slot-btn:active {
    transform: translateY(1px);
}

.res-slot-btn:focus-visible {
    outline: 3px solid rgba(39, 69, 194, 0.35);
    outline-offset: 2px;
}

.res-slot-btn.is-selected {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}

.res-slot-btn:disabled,
.res-slot-btn.is-disabled {
    background: #f3f4f6;
    color: #cbd5e1;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

.reservation-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

@media (min-width: 900px) {
    .reservation-info-grid {
        grid-template-columns: 320px 1fr;
        gap: 22px;
    }
}

.selected-date-display {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    min-height: 170px;
}

.selected-date-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.selected-date-display .label {
    font-weight: 800;
    color: #111827;
    font-size: 0.95rem;
}

.selected-date-display .value {
    margin-top: 6px;
    font-weight: 900;
    font-size: 1.05rem;
    color: #111827;
}

.selected-date-display.is-empty .value {
    color: #6b7280;
    font-weight: 800;
}

.btn-reset-date {
    margin-top: 12px;
    width: 100%;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}

.btn-reset-date:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

.btn-reset-date:hover {
    background: #f3f4f6;
}

.reservation-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
}

.form-row {
    display: flex;
    gap: 12px;
}

@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
    }
}

.form-group {
    margin-bottom: 14px;
}

.form-group.half {
    flex: 1;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    color: #111827;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.badge-required {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 2px 10px;
    border-radius: 999px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    font-size: 1rem;
    background: #ffffff;
}

.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    font-size: 1rem;
    background: #ffffff;
    color: #111827;
    resize: vertical;
    line-height: 1.6;
}

.form-group textarea:focus-visible {
    outline: 3px solid rgba(39, 69, 194, 0.25);
    outline-offset: 2px;
}

.form-group select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    font-size: 1rem;
    background: #ffffff;
    color: #111827;
}

.form-group select:focus-visible {
    outline: 3px solid rgba(39, 69, 194, 0.25);
    outline-offset: 2px;
}

.choice-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 6px;
}

.choice-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice-pill:hover {
    background: #f8fafc;
}

.choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-pill:has(input:focus-visible) {
    outline: 3px solid rgba(39, 69, 194, 0.25);
    outline-offset: 2px;
}

.choice-pill:has(input:checked) {
    border-color: var(--color-accent);
    background: rgba(39, 69, 194, 0.08);
}

.inline-select-row,
.inline-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inline-select-row select {
    width: auto;
    min-width: 92px;
}

.inline-input-row input[type="text"] {
    width: 140px;
}

.inline-sep {
    font-weight: 900;
    color: #111827;
}

.form-group input:focus-visible {
    outline: 3px solid rgba(39, 69, 194, 0.25);
    outline-offset: 2px;
}

.radio-group-vertical {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 6px;
}

.radio-group-horizontal {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.radio-item {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 700;
    color: #111827;
}

.form-privacy {
    margin-top: 8px;
}

.checkbox-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 700;
    color: #111827;
}

.checkbox-item a {
    color: var(--color-accent);
    text-decoration: underline;
}

.form-submit {
    margin-top: 10px;
}

.form-error {
    margin-top: 10px;
    color: #dc2626;
    font-weight: 800;
    font-size: 0.95rem;
}

.form-success {
    margin-top: 12px;
    background: #ecfdf5;
    border: 1px solid #10b981;
    color: #065f46;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 800;
}

.hidden {
    display: none !important;
}

/* Footer */
.footer {
    background: #333;
    color: #ccc;
    padding: 24px 0;
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.footer-links a {
    color: #e5e7eb;
    font-weight: 600;
    text-decoration: none;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-sep {
    opacity: 0.5;
}

.footer-copy {
    color: #ccc;
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grids if needed */
.benefit-card:nth-child(1) {
    transition-delay: 0.1s;
}

.benefit-card:nth-child(2) {
    transition-delay: 0.2s;
}

.benefit-card:nth-child(3) {
    transition-delay: 0.3s;
}
/* Section: Comparison Table */
.section-comparison {
    padding: var(--spacing-xl) 0;
    background-color: white;
}

.comparison-subtitle-container {
    text-align: center;
    position: relative;
    margin-bottom: 60px;
}

.comparison-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    position: relative;
    display: inline-block;
}

.comparison-subtitle::before,
.comparison-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    width: 200px;
    background: #ddd;
}

.comparison-subtitle::before {
    right: 100%;
    margin-right: 20px;
}

.comparison-subtitle::after {
    left: 100%;
    margin-left: 20px;
}

@media (max-width: 1024px) {
    .comparison-subtitle::before,
    .comparison-subtitle::after {
        width: 80px;
    }
}

@media (max-width: 768px) {
    .comparison-subtitle {
        font-size: 1rem;
        margin-bottom: 40px;
    }
    .comparison-subtitle::before,
    .comparison-subtitle::after {
        display: none;
    }
}

/* Table Wrapper */
.comparison-table-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.comparison-scroll-hint {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: rgba(39, 69, 194, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 20px 0 0 20px;
    font-size: 0.85rem;
    font-weight: 500;
    animation: fadeInOut 2s infinite;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: none; /* Controlled by JS or media query */
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.comparison-table-container {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #2745C2 #f0f0f0;
    padding-bottom: 10px;
}

.comparison-table-container::-webkit-scrollbar {
    height: 8px;
}

.comparison-table-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.comparison-table-container::-webkit-scrollbar-thumb {
    background-color: #2745C2;
    border-radius: 4px;
}

.comparison-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background-color: white;
}

.comparison-table th,
.comparison-table td {
    padding: 1.25rem;
    border-right: 1px solid white;
}

.comparison-table th {
    text-align: center;
    font-size: 1.25rem;
}

.comparison-table td {
    font-size: 1rem;
}

/* Specific Columns */
.col-header-friday {
    background-color: #2745C2;
    color: white;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    position: relative;
}

.col-header-other {
    background-color: #e5e7eb;
    color: #333;
}

.border-overlay-top {
    position: absolute;
    inset: 0;
    border: 3px solid #2745C2;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    pointer-events: none;
}

.border-overlay-cell {
    position: absolute;
    inset: 0;
    border-left: 3px solid #2745C2;
    border-right: 3px solid #2745C2;
    pointer-events: none;
}

.border-overlay-bottom {
    position: absolute;
    inset: 0;
    border-left: 3px solid #2745C2;
    border-right: 3px solid #2745C2;
    border-bottom: 3px solid #2745C2;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    pointer-events: none;
}

/* Rows */
.row-header-cell {
    text-align: left;
    font-weight: 500;
    padding-left: 2rem !important;
    background-color: #f3f4f6;
    width: 25%;
    border-top-left-radius: 0.5rem;
}
.tr-border-bottom .row-header-cell {
    border-top-left-radius: 0; /* Reset for non-top cells if needed, or specific class */
}

/* Fix rounded corner for first cell '費用' */
.comparison-table tbody tr:first-child .row-header-cell {
    border-top-left-radius: 0.5rem;
}
/* Others square */
.comparison-table tbody tr:not(:first-child) .row-header-cell {
    border-top-left-radius: 0;
}


.row-friday-cell {
    text-align: center;
    color: #2745C2;
    font-weight: 500;
    position: relative;
    width: 25%;
    background-color: white;
}

.row-other-cell {
    text-align: center;
    background-color: white;
    width: 25%;
}

.tr-border-bottom {
    border-bottom: 1px solid #f3f4f6;
}

/* Rows - Alternating Backgrounds */
.comparison-table tbody tr:nth-child(even) .row-friday-cell,
.comparison-table tbody tr:nth-child(even) .row-other-cell {
    background-color: #f9fafb;
}

.comparison-table tbody tr:nth-child(even) .row-header-cell {
    background-color: #f3f4f6;
}

/* Mobile Line Break */
.mobile-only {
    display: none;
}
@media (max-width: 639px) {
    .mobile-only {
        display: inline;
    }
}

/* Comparison CTA */
.comparison-cta-section {
    margin-top: 60px;
    margin-bottom: 20px;
    text-align: center;
}

.comparison-cta-text {
    font-size: 1.3rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 30px;
}

.comparison-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .comparison-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Section: Flyer Campaign */
.section-flyer-campaign {
    padding: 120px 0; /* 上下のV字分を含めて広めに */
    background-color: #eef2ff; /* 薄い青 */
    /* 上辺凸、下辺凸 */
    clip-path: polygon(0 50px, 50% 0, 100% 50px, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
    margin-top: -50px;
    margin-bottom: -50px;
    position: relative;
    z-index: 20; /* 比較表や次のセクションより上に */
}

.flyer-img {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: block;
}

/* Flyer Campaign Section */
.section-flyer {
    background-color: var(--color-accent-light);
    padding: 120px 0;
    position: relative;
    z-index: 10;
    /* Top: Concave V, Bottom: Convex V */
    clip-path: polygon(0 0, 50% 50px, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
    margin-bottom: -50px; /* Overlap with next section */
}

.flyer-img {
    max-width: 800px;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin: 0 auto;
    display: block;
}

/* Ensure next section has space for the overlap */
.section-curriculum {
    padding-top: 150px; /* Standard padding + overlap compensation */
    position: relative;
    z-index: 5;
}

/* Section: Mentors */
.section-mentors {
    background-color: #F5F7FA;
    padding: var(--spacing-xl) 0;
}

.mentor-card {
    min-width: 300px;
    max-width: 340px;
    background: white;
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    scroll-snap-align: center;
}

.mentor-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 24px;
}

.mentor-badge {
    display: inline-block;
    padding: 6px 16px;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 4px;
    margin-bottom: 16px;
}
.mentor-badge.basic { background-color: #3B9D9D; }
.mentor-badge.hr { background-color: #A63A50; }
.mentor-badge.gen-ai { background-color: #8A63D2; } /* Purple */
.mentor-badge.dify { background-color: #5865F2; } /* Blue/Blurple */

.mentor-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.mentor-job {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    margin-bottom: 20px;
}

.mentor-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #444;
    text-align: left;
    margin-bottom: 20px;
}

.mentor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.mentor-tag {
    font-size: 0.75rem;
    background: #f0f0f0;
    color: #555;
    padding: 4px 10px;
    border-radius: 99px;
    font-weight: 600;
}

/* Mentors Carousel Specifics */
.mentors-carousel {
    position: relative;
    max-width: 1140px; /* 3枚きれいに収まる幅 (340*3 + gap) */
    margin: 0 auto;
    padding-bottom: 40px; /* ドット用の余白 */
}

/* 矢印ボタンの表示調整 */
.mentors-carousel .carousel-nav {
    background-color: white;
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    z-index: 20;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.mentors-carousel .carousel-nav:hover {
    background-color: var(--color-accent);
    color: white;
}

/* 矢印の位置調整 - カードに被せる */
.mentors-carousel .carousel-nav.prev {
    left: 10px; /* カードの内側に少し入る */
}
.mentors-carousel .carousel-nav.next {
    right: 10px;
}

/* トラックの調整 */
.mentors-carousel .carousel-track {
    padding: 20px 4px; /* 上下20px */
    scroll-padding: 0;
    gap: 24px;
}

/* カードの幅調整 - PCで3枚表示 */
.section-mentors .mentor-card {
    /* デフォルト(モバイル) */
    min-width: 280px;
    width: 80vw;
    max-width: 340px; 
}

@media (min-width: 1024px) {
    .section-mentors .mentor-card {
        min-width: auto;
        /* (100% - gap*2) / 3 */
        width: calc((100% - 48px) / 3);
        max-width: none; /* 固定幅制限を解除して均等配置 */
    }
}

/* ドットナビゲーション */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-dots .dot.active {
    background-color: var(--color-accent);
    transform: scale(1.2);
}

/* カードが見切れないようにコンテナのオーバーフローを確認 */
.section-mentors .container {
    overflow: visible;
}

/* Comparison Table Marks - Background Style */
.comparison-table td {
    position: relative;
    z-index: 1;
    /* テキストの配置調整 */
    vertical-align: middle;
}

/* Hide the break tag after the symbol */
.mark-symbol + br {
    display: none;
}

/* Symbol Base Styles */
.mark-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; /* セルサイズに依存しない固定サイズ（最小高さ基準） */
    height: 50px;
    display: block;
    color: transparent; /* テキスト文字は見えなくする */
    font-size: 0; /* テキストのスペースを消す */
    z-index: -1; /* テキストの背面へ */
    pointer-events: none;
    user-select: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.25; /* 背景として目立ちすぎず、かつ認識できる濃さ */
}

/* Circle: Blue, Thick Line */
.mark-circle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%232745C2' stroke-width='12' /%3E%3C/svg%3E");
    opacity: 0.2; /* 青は濃いので少し控えめ */
}

/* Triangle: Orange/Gold, Thick Line, No Round */
.mark-triangle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,15 15,85 85,85' fill='none' stroke='%23F08422' stroke-width='12' /%3E%3C/svg%3E");
}

/* Cross: Red, Thick Line, No Round */
.mark-cross {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='20' y1='20' x2='80' y2='80' stroke='%23FF4757' stroke-width='12' /%3E%3Cline x1='80' y1='20' x2='20' y2='80' stroke='%23FF4757' stroke-width='12' /%3E%3C/svg%3E");
    opacity: 0.2;
}

/* Adjust vertical align for cells with only marks or text */
.row-other-cell {
    vertical-align: middle;
}

/* Pricing Campaign Update 2025-12 */
.price-block-normal {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
}

.price-label-sm {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    font-weight: 500;
    margin-bottom: 2px;
}

.price-normal {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1;
}

.price-normal .currency {
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 2px;
}

.installment-block {
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--color-text-sub);
    line-height: 1.4;
}

.installment-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-left: 4px;
}

.installment-price .note-mark {
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 2px;
    color: var(--color-text-sub);
    font-weight: normal;
}

.campaign-badge-shape {
    position: relative;
    background: #E60058;
    color: white;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 99px;
    text-align: center;
    margin: 0 auto 12px;
    width: 100%; /* Fill width mostly */
    box-sizing: border-box;
    line-height: 1.3;
    font-size: 0.95rem;
    border: 2px solid #E60058;
    box-shadow: 0 4px 10px rgba(230, 0, 88, 0.2);
}

.campaign-badge-shape::after {
    content: '';
    position: absolute;
    top: 98%; /* Slightly overlap to avoid gap line */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #E60058;
}

.price-block-campaign {
    margin-top: 8px;
    margin-bottom: 24px;
}

.price-campaign {
    font-size: 2.4rem;
    font-weight: 800;
    color: #E60058;
    line-height: 1;
    letter-spacing: -0.02em;
}

.price-campaign .currency {
    font-size: 1.1rem;
    font-weight: 700;
    margin-left: 2px;
}

/* Update price-normal to match .price style (Blue & Big) */
.price-normal {
    font-size: 2rem !important; /* Increase size */
    color: var(--color-accent) !important; /* Make it blue */
}

/* Calendar Loading Overlay */
.calendar-container {
    position: relative;
    min-height: 200px; /* Prevent collapse */
}

.calendar-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    gap: 12px;
    opacity: 1;
    visibility: visible;
}

.calendar-loading-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.calendar-loading-overlay p {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-accent);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(39, 69, 194, 0.1);
    border-left-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}