.sa-tutorial-videos{--sa-tutorial-title-size: var(--sa-tutorial-title-size-m);--sa-tutorial-title-gap: max(var(--sa-tutorial-title-gap-m), 40px);--sa-tutorial-hero-gap: var(--sa-tutorial-hero-gap-m);--sa-tutorial-hero-padding: var(--sa-tutorial-hero-padding-m);--sa-tutorial-hero-title-size: var(--sa-tutorial-hero-title-size-m);--sa-tutorial-hero-text-size: var(--sa-tutorial-hero-text-size-m);--sa-tutorial-card-width: var(--sa-tutorial-card-width-m);--sa-tutorial-card-title-size: min(var(--sa-tutorial-card-title-size-m), 16px);--sa-tutorial-card-meta-size: max(var(--sa-tutorial-card-meta-size-m), 15px);--sa-tutorial-carousel-gap: var(--sa-tutorial-carousel-gap-m);--sa-tutorial-play-size-m: 54px;--sa-tutorial-play-size-pc: 46.667px;--sa-tutorial-play-icon-y-m: 9px;--sa-tutorial-play-icon-y-pc: 8px;--sa-tutorial-play-icon-x-m: 14px;--sa-tutorial-play-icon-x-pc: 13px;--sa-tutorial-play-size: var(--sa-tutorial-play-size-m);--sa-tutorial-play-icon-y: var(--sa-tutorial-play-icon-y-m);--sa-tutorial-play-icon-x: var(--sa-tutorial-play-icon-x-m);--sa-tutorial-hero-button-display-m: none;--sa-tutorial-hero-button-display-pc: inline-flex;--sa-tutorial-hero-button-display: var(--sa-tutorial-hero-button-display-m);--sa-tutorial-content-ratio: min(100%, calc(100vw - 48px) );--sa-tutorial-card-effective-width: min(var(--sa-tutorial-card-width), calc(100vw - 72px) );--sa-tutorial-controls-width: min(408px, calc(100vw - 72px) );--sa-tutorial-popup-width-pc: 797px;--sa-tutorial-popup-aspect-pc: 16 / 9;display:block}.sa-tutorial-videos__container{overflow:hidden}.sa-tutorial-videos__header{width:var(--sa-tutorial-content-ratio);max-width:720px;margin:0 auto var(--sa-tutorial-title-gap)}.sa-tutorial-videos__heading{color:#000;font-size:var(--sa-tutorial-title-size);font-weight:400;line-height:1.1;letter-spacing:0;text-align:left}.sa-tutorial-videos__heading :is(h1,h2,h3,p){margin:0;font:inherit;letter-spacing:inherit}.sa-tutorial-videos__hero{display:flex;flex-direction:column;gap:min(var(--sa-tutorial-hero-gap),20px);width:var(--sa-tutorial-content-ratio);margin-bottom:32px;margin-right:auto;margin-left:auto;padding:var(--sa-tutorial-hero-padding)}.sa-tutorial-videos__hero-copy{order:2}.sa-tutorial-videos__media--hero{order:1}.sa-tutorial-videos__hero-title{margin:0 0 11px;color:#000;font-size:var(--sa-tutorial-hero-title-size);font-weight:400;line-height:1.2;letter-spacing:0}.sa-tutorial-videos__hero-description{max-width:410px;color:#7a7a7a;font-size:var(--sa-tutorial-hero-text-size);line-height:1.2}.sa-tutorial-videos__hero-description p{margin:0}.sa-tutorial-videos__hero-description :is(p,div){color:inherit;font:inherit;line-height:inherit}.sa-tutorial-videos__hero-button{display:var(--sa-tutorial-hero-button-display);margin-top:28px}.sa-tutorial-videos__media{position:relative}.sa-tutorial-videos__frame,.sa-tutorial-videos__poster,.sa-tutorial-videos__player,.sa-tutorial-videos__player iframe,.sa-tutorial-videos__video{width:100%;height:100%}.sa-tutorial-videos__frame{position:relative;overflow:hidden;border-radius:5px;background:rgba(var(--color-foreground),.05);aspect-ratio:16 / 9}.sa-tutorial-videos__media--hero .sa-tutorial-videos__frame{aspect-ratio:16 / 9}.sa-tutorial-videos__media--hero.sa-tutorial-videos__media--video-only .sa-tutorial-videos__frame{background:transparent}.sa-tutorial-videos__poster,.sa-tutorial-videos__player{position:absolute;top:0;right:0;bottom:0;left:0}.sa-tutorial-videos__poster{z-index:2;cursor:pointer;transition:opacity .25s ease,visibility .25s ease}.sa-tutorial-videos__poster picture{display:block;width:100%;height:100%}.sa-tutorial-videos__poster-image,.sa-tutorial-videos__video,.sa-tutorial-videos__player iframe{display:block;width:100%;height:100%;border:0;object-fit:cover}.sa-tutorial-videos__player iframe.sa-tutorial-videos__iframe--youtube{transform:none}.sa-tutorial-videos__player{z-index:1;background:rgb(var(--color-foreground))}.sa-tutorial-videos__media--hero.sa-tutorial-videos__media--video-only .sa-tutorial-videos__player{background:transparent}.sa-tutorial-videos__play{position:absolute;inset:50% auto auto 50%;display:inline-flex;align-items:center;justify-content:center;min-width:var(--sa-tutorial-play-size);min-height:var(--sa-tutorial-play-size);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:rgba(var(--color-background),.92);color:rgb(var(--color-foreground));cursor:pointer;transform:translate(-50%,-50%);transition:transform .2s ease,background .2s ease}.sa-tutorial-videos__poster:hover .sa-tutorial-videos__play{background:rgb(var(--color-background));transform:translate(-50%,-50%) scale(1.04)}.sa-tutorial-videos__play-icon{width:0;height:0;margin-left:4px;border-top:var(--sa-tutorial-play-icon-y) solid transparent;border-bottom:var(--sa-tutorial-play-icon-y) solid transparent;border-left:var(--sa-tutorial-play-icon-x) solid currentColor}.sa-tutorial-videos__play--custom-icon{min-width:40px;min-height:40px;background:transparent;border-radius:0}.sa-tutorial-videos__play-image{width:100%;height:100%;object-fit:contain;pointer-events:none}.sa-tutorial-videos__poster:hover .sa-tutorial-videos__play--custom-icon{background:transparent;transform:translate(-50%,-50%)}.sa-tutorial-videos__media--hero .sa-tutorial-videos__play{min-width:0;min-height:0;border-radius:0;background:transparent;color:var(--color-white, #fff)}.sa-tutorial-videos__media--hero .sa-tutorial-videos__play-icon{margin-left:0;border-top-width:clamp(13px,3vw,18px);border-bottom-width:clamp(13px,3vw,18px);border-left-width:clamp(22px,4.6vw,31px)}.sa-tutorial-videos__media--hero .sa-tutorial-videos__poster:hover .sa-tutorial-videos__play{background:transparent}.sa-tutorial-videos__media.is-playing .sa-tutorial-videos__poster{opacity:0;pointer-events:none;visibility:hidden}.sa-tutorial-videos__swiper{width:var(--sa-tutorial-content-ratio);margin-right:auto;margin-left:auto;overflow:visible;padding-bottom:56px}.sa-tutorial-videos__swiper .swiper-wrapper{margin-left:0}.sa-tutorial-videos__slide{width:var(--sa-tutorial-card-effective-width)}.sa-tutorial-videos__card{display:flex;flex-direction:column;gap:0;width:100%}.sa-tutorial-videos__media--card .sa-tutorial-videos__frame{aspect-ratio:16 / 9}.sa-tutorial-videos__media--card{border-radius:5px}.sa-tutorial-videos__card-info{display:flex;align-items:center;gap:22px;width:var(--sa-tutorial-content-ratio);margin:24px auto 0}.sa-tutorial-videos__logo{flex:0 0 auto;width:48px;height:48px;border-radius:5px;object-fit:contain;object-position:center}.sa-tutorial-videos__card-copy{min-width:0}.sa-tutorial-videos__card-title{margin:0;color:#000;font-size:var(--sa-tutorial-card-title-size);font-weight:400;line-height:normal;letter-spacing:0}.sa-tutorial-videos__card-author{margin:8px 0 0;color:#000;font-size:var(--sa-tutorial-card-meta-size);line-height:normal}.sa-tutorial-videos__popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center}.sa-tutorial-videos__popup[hidden]{display:none!important}.sa-tutorial-videos__popup-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;cursor:pointer}.sa-tutorial-videos__popup-content{position:relative;z-index:1;width:min(var(--sa-tutorial-popup-width-pc),calc(100vw - 64px));margin:0;background:#fff;border-radius:0;overflow:visible;box-shadow:none}.sa-tutorial-videos__popup-close{position:absolute;top:-24px;right:0;z-index:10;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;cursor:pointer;transition:opacity .2s ease}.sa-tutorial-videos__popup-close:hover{opacity:.8}.sa-tutorial-videos__popup-media{position:relative;width:100%;aspect-ratio:var(--sa-tutorial-popup-aspect-pc);background:#000;overflow:hidden}.sa-tutorial-videos__popup-media video,.sa-tutorial-videos__popup-media iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}@media(max-width:1024px){.sa-tutorial-videos__popup{display:none!important}}.sa-tutorial-videos__controls{position:absolute;right:0;bottom:0;left:auto;width:var(--sa-tutorial-controls-ratio, auto);height:auto;justify-content:flex-end;margin:0}.sa-tutorial-videos__controls .cs-section-swiper{align-items:center;gap:clamp(8px,1vw,10px);width:100%;height:100%;padding:0}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination{position:relative;order:initial;flex:1 1 auto;height:var(--swiper-pagination-progressbar-size, 2px);overflow:hidden;background:#0009;border-radius:1px}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination:before{content:none}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination:after{content:none}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination-progressbar-fill{top:0;left:0;z-index:1;width:100%!important;height:100%;margin-top:0;border-radius:1px}.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-prev,.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-next{width:34px;height:34px;border-radius:0;color:#000;background:transparent;opacity:1}.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-prev,.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-next{order:initial;margin-left:0}.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-prev.swiper-button-disabled,.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-next.swiper-button-disabled{opacity:.3}@media(max-width:1024px){.sa-tutorial-videos__swiper .swiper-wrapper{margin-left:-12px}.sa-tutorial-videos__controls{right:auto;bottom:0;left:0;width:var(--sa-tutorial-controls-width);height:32px;justify-content:flex-start}.sa-tutorial-videos__controls .cs-section-swiper{gap:0;height:32px}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination{order:1;flex:0 0 min(232px,56.863%);height:8.6px;overflow:visible;background:transparent;border-radius:0}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination:before{position:absolute;top:50%;left:0;width:96px;height:4px;border-radius:1px;background:#0009;content:"";transform:translateY(-50%)}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination:after{position:absolute;top:50%;left:112px;width:8.6px;height:8.6px;border-radius:1px;background:#a8a8a8;box-shadow:24.6px 0 #a8a8a8;content:"";transform:translateY(-50%)}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination-progressbar-fill{top:50%;width:96px!important;height:4px;margin-top:-2px}.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-prev,.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-next{width:32px;height:32px;border-radius:4px;color:#0b3d24;background:#21ef6a;opacity:1}.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-prev{order:2;margin-left:auto}.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-next{order:3;margin-left:8px}.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-prev.swiper-button-disabled,.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-next.swiper-button-disabled{color:#6f8c73;background:#d2f3d6;opacity:1}}@media(min-width:1025px){.sa-tutorial-videos{--sa-tutorial-title-size: var(--sa-tutorial-title-size-pc);--sa-tutorial-title-gap: var(--sa-tutorial-title-gap-pc);--sa-tutorial-hero-gap: var(--sa-tutorial-hero-gap-pc);--sa-tutorial-hero-padding: var(--sa-tutorial-hero-padding-pc);--sa-tutorial-hero-title-size: var(--sa-tutorial-hero-title-size-pc);--sa-tutorial-hero-text-size: var(--sa-tutorial-hero-text-size-pc);--sa-tutorial-card-width: var(--sa-tutorial-card-width-pc);--sa-tutorial-card-title-size: var(--sa-tutorial-card-title-size-pc);--sa-tutorial-card-meta-size: var(--sa-tutorial-card-meta-size-pc);--sa-tutorial-carousel-gap: var(--sa-tutorial-carousel-gap-pc);--sa-tutorial-play-size: var(--sa-tutorial-play-size-pc);--sa-tutorial-play-icon-y: var(--sa-tutorial-play-icon-y-pc);--sa-tutorial-play-icon-x: var(--sa-tutorial-play-icon-x-pc);--sa-tutorial-hero-button-display: var(--sa-tutorial-hero-button-display-pc);--sa-tutorial-content-ratio: 95.726%;--sa-tutorial-slide-ratio: 49.821%;--sa-tutorial-controls-ratio: 14.375%}.sa-tutorial-videos__header{width:var(--sa-tutorial-content-ratio);max-width:100%;margin-right:auto;margin-bottom:var(--sa-tutorial-title-gap);margin-left:auto;padding-inline:16.071%}.sa-tutorial-videos__heading{font-weight:400;letter-spacing:-.02em;text-align:center}.sa-tutorial-videos__hero{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);align-items:center;gap:var(--sa-tutorial-hero-gap-pc);width:var(--sa-tutorial-content-ratio);margin-bottom:24px;margin-right:auto;margin-left:auto;padding:0;border-radius:0;background:transparent}.sa-tutorial-videos__hero:not(:has(.sa-tutorial-videos__hero-copy)){grid-template-columns:minmax(0,1fr)}.sa-tutorial-videos__hero-copy,.sa-tutorial-videos__media--hero{order:initial;flex:unset;width:auto;max-width:none;min-width:0;margin:0}.sa-tutorial-videos__hero-copy{position:relative;z-index:1}.sa-tutorial-videos__hero-title{margin-bottom:16px;font-weight:400;line-height:1.2;letter-spacing:-.02em}.sa-tutorial-videos__hero-description{max-width:100%;color:#7a7a7a;line-height:1.2}.sa-tutorial-videos__hero-button{margin-top:56px}.sa-tutorial-videos__frame{border-radius:5px}.sa-tutorial-videos__media--hero .sa-tutorial-videos__frame{aspect-ratio:16 / 9}.sa-tutorial-videos__swiper{width:var(--sa-tutorial-content-ratio);aspect-ratio:1120 / 393;margin-right:auto;margin-left:auto;padding-bottom:0;overflow:hidden}.sa-tutorial-videos__swiper .swiper-wrapper{align-items:flex-start;margin-left:0}.sa-tutorial-videos__slide{width:var(--sa-tutorial-slide-ratio)}.sa-tutorial-videos__media--card .sa-tutorial-videos__frame{border-radius:3.889px;background:rgba(var(--color-foreground),.09);aspect-ratio:16 / 9}.sa-tutorial-videos__media--card{border-radius:3.889px}.sa-tutorial-videos__card-info{position:absolute;top:auto;bottom:0;left:25%;gap:16px;width:45.5%;margin:0}.sa-tutorial-videos__logo{width:54px;height:54px;border-radius:5px}.sa-tutorial-videos__card-title{font-weight:400;line-height:normal;letter-spacing:0}.sa-tutorial-videos__card-author{margin-top:11px;color:rgb(var(--color-foreground));line-height:normal}.sa-tutorial-videos__controls{top:85.242%;right:0;bottom:auto;left:auto;justify-content:flex-end;width:var(--sa-tutorial-controls-ratio);height:6.728%}.sa-tutorial-videos__controls .cs-section-swiper{gap:10px;align-items:center;width:100%;height:100%;padding:0}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination{position:relative;order:initial;flex:1 1 auto;height:2px;overflow:hidden;margin:0;background:#0009;border-radius:1px}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination:before,.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination:after{content:none}.sa-tutorial-videos__controls .cs-section-swiper .swiper-pagination-progressbar-fill{top:0;left:0;width:100%!important;height:100%;margin-top:0;border-radius:1px}.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-prev,.sa-tutorial-videos__controls .cs-section-swiper .swiper-button-next{order:initial;flex:0 0 26.444px;width:26.444px;height:26.444px;margin:0;border-radius:0;background:transparent;color:#000}}
/*# sourceMappingURL=/cdn/shop/t/59/assets/sa-tutorial-videos.css.map */