.Guides {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0 var(--columnPaddingNormal);
    pointer-events: none;
}

@media (max-width:1111px) {
    .Guides {
        max-width: var(--windowWidth);
    }
}

.Guides__container {
    display: grid;
    grid: 1fr/repeat(var(--columnCountMax), 1fr);
    position: relative;
    max-width: var(--layoutWidth);
    height: 100%;
    margin: 0 auto;
}

.Guides__guide {
    width: 1px;
    background: linear-gradient(180deg, var(--guideDashedColor), var(--guideDashedColor) 50%, transparent 0, transparent);
    background-size: 1px 8px;
}

.Guides__guide:first-of-type,
.Guides__guide:last-of-type {
    background: var(--guideSolidColor);
}

.Guides__guide:last-of-type {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

@media (max-width:599px) {
    .Guides__guide:nth-of-type(3n) {
        display: none;
    }
}

@media (max-width:899px) {
    .Guides__guide:nth-of-type(2n) {
        display: none;
    }
}

.Link {
    font-weight: var(--linkWeight, var(--fontWeightSemibold));
    cursor: pointer;
    color: var(--linkColor);
    opacity: var(--linkOpacity, 1);
    transition: var(--hoverTransition);
    transition-property: color, opacity;
    outline: 0;
}

@media (pointer:fine) {
    .Link:hover {
        color: var(--linkHoverColor, var(--linkColor));
        opacity: var(--linkHoverOpacity, 1);
    }
}

@media (pointer:coarse) {
    .Link:active {
        /* color: var(--linkHoverColor, var(--linkColor)); */
        opacity: var(--linkHoverOpacity, 1);
    }
}

.CtaButton {
    display: inline-block;
    padding: 3px 0 6px;
    border-radius: 16.5px;
    font: var(--ctaFont);
    color: var(--buttonColor);
    transition: var(--hoverTransition);
    outline: 0;
}

html[lang^=ja] .CtaButton {
    font-weight: 600;
    font-variation-settings: "wght" 425;
}

.CtaButton.variant--Link {
    font-weight: var(--linkWeight, var(--fontWeightSemibold));
    transition-property: color, opacity;
}

@media (pointer:fine) {
    .CtaButton.variant--Link:hover {
        color: var(--linkHoverColor, var(--linkColor));
        opacity: var(--linkHoverOpacity, 1);
    }
}

@media (pointer:coarse) {
    .CtaButton.variant--Link:active {
        color: var(--linkHoverColor, var(--linkColor));
        opacity: var(--linkHoverOpacity, 1);
    }
}

.HoverArrow {
    --arrowSpacing: 5px;
    --arrowHoverTransition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
    --arrowHoverOffset: translateX(3px);
    --arrowTipTransform: none;
    --arrowLineOpacity: 0;
    position: relative;
    top: 1px;
    margin-left: var(--arrowSpacing);
    stroke-width: 2px;
    fill: none;
    stroke: currentColor;
}

.HoverArrow__linePath {
    opacity: var(--arrowLineOpacity);
    transition: opacity var(--hoverTransition, var(--arrowHoverTransition));
}

.HoverArrow__tipPath {
    transform: var(--arrowTipTransform);
    transition: transform var(--hoverTransition, var(--arrowHoverTransition));
}

@media (pointer:fine) {
    a:hover .HoverArrow__linePath {
        --arrowLineOpacity: 1;
    }

    a:hover .HoverArrow__tipPath {
        --arrowTipTransform: var(--arrowHoverOffset);
    }
}

@media (pointer:coarse) {
    a:active .HoverArrow__linePath {
        --arrowLineOpacity: 1;
    }

    a:active .HoverArrow__tipPath {
        --arrowTipTransform: var(--arrowHoverOffset);
    }
}

:where(.BasicIcon) {
    --basicIconColor: #0a2540;
    display: block;
}

.Card {
    --cardBleedRightNormal: var(--columnWidth);
    --cardBleedBottomNormal: 16px;
    --cardShadow: none;
    --cardShadowMargin: 0;
    --cardMinHeight: 72px;
    position: relative;
    min-width: 100px;
    min-height: var(--cardMinHeight);
    max-width: var(--cardMaxWidth, none);
    margin-right: calc(var(--cardBleedRight, 0)*-1);
    margin-bottom: calc(var(--cardBleedBottom, 0)*-1);
    border-radius: 8px;
    background: var(--cardBackground);
    box-shadow: var(--cardShadow);
    overflow: hidden;
}

@media (min-width:600px) {
    .Card {
        max-width: var(--cardMaxWidthTablet, var(--cardMaxWidth));
    }
}

.Card--border {
    border: 1px solid var(--cardBorderColor);
}

@supports (-webkit-line-clamp:5) {
    .CustomersCaseStudyCard__title {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
    }
}

.RowLayout {
    --rowLayoutGapXSmall: 16px;
    --rowLayoutGapSmall: 24px;
    --rowLayoutGapNormal: 32px;
    --rowLayoutGapMedium: var(--rowLayoutGapNormal);
    --rowLayoutGapLarge: var(--rowLayoutGapNormal);
    --rowLayoutGapXLarge: var(--rowLayoutGapNormal);
    --rowLayoutGap: var(--rowLayoutGapLarge);
    display: grid;
    grid: auto/minmax(0, 1fr);
    row-gap: var(--rowLayoutGap);
    align-items: flex-start;
}

@media (min-width:600px) {
    .RowLayout {
        --rowLayoutGapMedium: 48px;
        --rowLayoutGapLarge: var(--rowLayoutGapMedium);
        --rowLayoutGapXLarge: var(--rowLayoutGapMedium);
    }
}

@media (min-width:900px) {
    .RowLayout {
        --rowLayoutGapLarge: 64px;
        --rowLayoutGapXLarge: 96px;
    }
}

.Section {
    --sectionAngleSin: var(--angleNormalSin);
    --sectionAngle: 0;
    --sectionPaddingNormalMax: 128;
    --sectionPaddingSmallMax: 110;
    --sectionPaddingXSmallMax: 72;
    --sectionPaddingMin: 72;
    --sectionPaddingMax: var(--sectionPaddingNormalMax);
    --sectionPaddingTopMax: var(--sectionPaddingMax);
    --sectionPaddingBottomMax: var(--sectionPaddingMax);
    --sectionMarginBottom: 0;
    --sectionAngleHeight: calc(var(--windowWidth)*var(--sectionAngleSin));
    --sectionAnglePaddingBaseMin: 100;
    --sectionAnglePaddingBaseMax: var(--sectionPaddingMax);
    --sectionAnglePaddingTopBaseMax: var(--sectionAnglePaddingBaseMax);
    --sectionAnglePaddingBottomBaseMax: var(--sectionAnglePaddingBaseMax);
    --sectionAngleMaxHeight: none;
    --sectionOverflow: hidden;
    --sectionTransformOrigin: 100% 0;
    --sectionBackgroundOverflow: visible;
    position: relative;
    z-index: 1;
    margin-bottom: var(--sectionMarginBottom);
    color: var(--textColor);
    scroll-margin-top: calc(var(--fixedNavHeight) + var(--fixedNavSpacing) - var(--sectionPaddingTop));
}

.Section {
    --sectionAnglePaddingTopBase: calc(var(--sectionAnglePaddingBaseMin)*1px + (var(--sectionAnglePaddingTopBaseMax) - var(--sectionAnglePaddingBaseMin))*(var(--windowWidth)/737 - 0.50882px));
    --sectionAnglePaddingBottomBase: calc(var(--sectionAnglePaddingBaseMin)*1px + (var(--sectionAnglePaddingBottomBaseMax) - var(--sectionAnglePaddingBaseMin))*(var(--windowWidth)/737 - 0.50882px));
    --sectionPaddingTopGutterWidth: var(--gutterWidth);
    --sectionAnglePaddingTop: calc(var(--sectionAngleHeight) - var(--sectionAngleSin)*var(--sectionPaddingTopGutterWidth) + var(--sectionAnglePaddingTopBase));
    --sectionAnglePaddingBottom: calc(var(--sectionAngleHeight) - var(--sectionAngleSin)*var(--gutterWidth) + var(--sectionAnglePaddingBottomBase));
    --sectionPaddingTop: calc(var(--sectionPaddingMin)*1px + (var(--sectionPaddingTopMax) - var(--sectionPaddingMin))*(var(--windowWidth)/737 - 0.50882px));
    --sectionPaddingBottom: calc(var(--sectionPaddingMin)*1px + (var(--sectionPaddingBottomMax) - var(--sectionPaddingMin))*(var(--windowWidth)/737 - 0.50882px));
}

@media (max-width:375px) {
    .Section {
        --sectionAnglePaddingTopBase: calc(var(--sectionAnglePaddingBaseMin)*1px);
        --sectionAnglePaddingBottomBase: calc(var(--sectionAnglePaddingBaseMin)*1px);
        --sectionPaddingTop: calc(var(--sectionPaddingMin)*1px);
        --sectionPaddingBottom: calc(var(--sectionPaddingMin)*1px);
    }
}

@media (min-width:1112px) {
    .Section {
        --sectionAnglePaddingTopBase: calc(var(--sectionAnglePaddingTopBaseMax)*1px);
        --sectionAnglePaddingBottomBase: calc(var(--sectionAnglePaddingBottomBaseMax)*1px);
        --sectionPaddingTop: calc(var(--sectionPaddingTopMax)*1px);
        --sectionPaddingBottom: calc(var(--sectionPaddingBottomMax)*1px);
    }
}

.Section__background {
    position: relative;
    height: 100%;
    max-height: var(--sectionAngleMaxHeight);
    width: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--sectionTransformOrigin);
    transform: skewY(var(--sectionAngle));
    background: var(--backgroundColor);
    overflow: hidden;
}

.Section__masked {
    overflow: var(--sectionOverflow);
}

.Section__container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    min-height: var(--sectionMinHeight);
    font-family: var(--fontFamily);
}

.Section__layoutContainer {
    width: 100%;
    max-width: var(--layoutWidth);
    margin: 0 var(--columnPaddingNormal);
}

.Section__layout {
    padding: var(--sectionPaddingTop) 0 var(--sectionPaddingBottom);
}

.Section__backgroundMask {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: var(--sectionBackgroundOverflow);
}

.FullWidthCarousel {
    --overflowMargin: 16px;
    --fullWidthCarouselOverflowPaddingTop: 0px;
    --fullWidthCarouselOverflowPaddingBottom: 0px;
    --fullWidthCarouselItemWidth: 0;

    /* min-width:0; */
}

.UpdateCardCarousel.FullWidthCarousel {
    --fullWidthCarouselOverflowPaddingTop: 16px;
    --fullWidthCarouselOverflowPaddingBottom: 144px;
}

.FullWidthCarousel__layout {
    display: flex;
    width: var(--windowWidth);
    margin-left: calc(var(--overflowMargin)*-1);
}

@media (min-width: 1112px) {
    .FullWidthCarousel__layout {
        --overflowMargin: calc(var(--windowWidth)/2 - var(--layoutWidth)/2);
    }
}

.FullWidthCarousel__track {
    position: relative;
    display: flex;
    padding: var(--fullWidthCarouselOverflowPaddingTop) 0 var(--fullWidthCarouselOverflowPaddingBottom);
    margin: calc(var(--fullWidthCarouselOverflowPaddingTop)*-1) 0 calc(var(--fullWidthCarouselOverflowPaddingBottom)*-1);
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--overflowMargin);
    scroll-padding-right: var(--overflowMargin);
    scrollbar-width: none;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.FullWidthCarousel__track::-webkit-scrollbar {
    display: none;
}

.FullWidthCarousel__track> * {
    scroll-snap-align: start end;
}

.FullWidthCarousel__spacer {
    scroll-snap-align: none;
    margin: 0;
    height: 1px;
}

.FullWidthCarousel__spacer,
.FullWidthCarousel__spacer--left {
    min-width: var(--overflowMargin);
}

.FullWidthCarousel__spacer--right {
    min-width: calc(var(--windowWidth) - var(--overflowMargin) - var(--fullWidthCarouselItemWidth));
}

.UpdateCard {
    --buttonColor: var(
    --knockoutColor);
    --linkColor: var(
    --knockoutColor);
    --linkHoverColor: var(
    --knockoutColor);
    --linkHoverOpacity: 0.6;
    --linkWeight: var(
    --fontWeightBold);
    --spaceBetweenCards: 26px;
    --cardWidth: calc(var(
    --windowWidth) - var(--overflowMargin)*2 - var(--spaceBetweenCards));
    --cardHeight: auto;
    --transition: 250ms cubic-bezier(0.4,0,0.2,1);
    --hoverScaleX: 1.081967213;
    --hoverScaleY: 1.081967213;
    --updateCardHoverShadow: var(
    --cardShadowXLarge);
    flex-shrink: 0;
    position: relative;
    margin-right: var(--spaceBetweenCards);
    font: var(--fontWeightNormal) 15px/1.6 var(--fontFamily);
    letter-spacing: .2px;
    color: var(--knockoutColor);
    width: var(--cardWidth);
    height: var(--cardHeight);
}

.UpdateCard:last-of-type {
    margin-right: 0;
}

.UpdateCard:first-of-type {
    margin-right: var(--spaceBetweenCards);
}

@media (min-width: 600px) {
    .UpdateCard {
        --cardWidth: calc(var(--windowWidth)/2 - var(--overflowMargin)*2/2 - var(--spaceBetweenCards));
    }
}

@media (min-width: 1200px) {
    .UpdateCard {
        --cardWidth: 244px;
        min-height: var(--cardWidth);
    }
}

@media (prefers-reduced-motion:reduce) {
    .UpdateCard {
        --transition: none;
    }
}

.UpdateCard__background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: var(--transition);
    transition-property: transform,opacity;
}

.UpdateCard__background:after,
.UpdateCard__background:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    content: "";
}

.UpdateCard__background:before {
}

.UpdateCard__background:after {
    /* background-color: var(--cardBackground); */
}

.UpdateCard__background--hover {
    opacity: 0;
}

.UpdateCard__background--hover:before {
    box-shadow: 0 50px 100px -20px rgba(50,50,93,0.25),0 30px 60px -30px rgba(0,0,0,0.3);
}

.alumno1:after {
    background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDF8fHBlcnNvbnxlbnwwfHx8fDE2ODE5MzA3MTg&ixlib=rb-4.0.3q=85&fm=jpg&crop=faces&cs=srgb&w=260&h=280&fit=crop');
}

.alumno2:after {
    background-image: url('https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDJ8fHBlcnNvbnxlbnwwfHx8fDE2ODE5MzA3MTg&ixlib=rb-4.0.3q=85&fm=jpg&crop=faces&cs=srgb&w=260&h=280&fit=crop');
}

.alumno3:after {
    background-image: url('https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDN8fHBlcnNvbnxlbnwwfHx8fDE2ODE5MzA3MTg&ixlib=rb-4.0.3q=85&fm=jpg&crop=faces&cs=srgb&w=260&h=280&fit=crop');
}

@media (prefers-reduced-motion:reduce) {
    .UpdateCard__background--hover:before {
        box-shadow: none;
    }
}

@media (pointer: fine) {
    .UpdateCard:hover .UpdateCard__background {
        opacity: 1;
    }

    @media (prefers-reduced-motion:no-preference) {
        .UpdateCard:hover .UpdateCard__background {
            transform: scale(var(--hoverScaleX),var(--hoverScaleY));
        }
    }
}

.UpdateCard__content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 400px;
    padding: 16px var(--columnPaddingNormal);
}

.UpdateCard__header {
    margin-bottom: 8px;
}

.UpdateCard__title {
    font: var(--fontWeightBold) 18px/1.555555556 var(--fontFamily);
}

.UpdateCard__date {
    opacity: .7;
}

.UpdateCard__content .Link {
    padding: 1px 4px 3px;
    border-radius: 4px;
    background-color: rgba(9,36,64,.075);
    transition: background-color var(--transition);
}

.UpdateCard:hover .UpdateCard__content .Link {
    background-color: hsla(0,0%,100%,.11);
}

.UpdateCard__footer {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
}

.CopyTitle {
    font-size: 2rem;
    color: #000000;
}

.alumnos {
    border-radius: 8px;
}
