CINXE.COM

<!doctype html><html amp lang="ja" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="robots" content="noindex,follow"><meta name="description" content="Web Stories immerse your readers in fast-loading full-screen experiences. Easily create visual narratives, with engaging animations and tappable interactions."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="Web Stories immerse your readers in fast-loading full-screen experiences. Easily create visual narratives, with engaging animations and tappable interactions."><meta name="twitter:title" content="Web Stories"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/about-stories-600x314.png"><meta property="og:title" content="Web Stories"><meta property="og:url" content="https://amp.dev/ja/about/stories/"><meta property="og:image" content="https://amp.dev/static/img/sharing/about-stories-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,stories,ads,email"><meta name="page-locale" content="ja"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-carousel-0.1.mjs" custom-element="amp-carousel" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" crossorigin="anonymous" custom-element="amp-carousel"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.mjs" custom-element="amp-fx-collection" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" crossorigin="anonymous" custom-element="amp-fx-collection"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-video-0.1.mjs" custom-element="amp-video" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/ja/about/stories/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/about/stories/"><link rel="alternate" hreflang="en" href="https://amp.dev/about/stories/"><link rel="alternate" hreflang="de" href="https://amp.dev/de/about/stories/"><link rel="alternate" hreflang="fr" href="https://amp.dev/fr/about/stories/"><link rel="alternate" hreflang="ar" href="https://amp.dev/ar/about/stories/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/about/stories/"><link rel="alternate" hreflang="it" href="https://amp.dev/it/about/stories/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/about/stories/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/about/stories/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/about/stories/"><link rel="alternate" hreflang="ru" href="https://amp.dev/ru/about/stories/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/about/stories/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/about/stories/"><link rel="alternate" hreflang="pl" href="https://amp.dev/pl/about/stories/"><link rel="alternate" hreflang="vi" href="https://amp.dev/vi/about/stories/"><title>Web Stories - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/ja/about/stories/ ","name":"amp.dev","headline":"Web Stories","description":"Web Stories immerse your readers in fast-loading full-screen experiences. Easily create visual narratives, with engaging animations and tappable interactions.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/about-stories-600x314.png","width":600,"height":314}}</script><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.-re.-rt{position:relative;flex:1 0 15em;margin:0 20px 20px 0}@media(min-width:575px){.-re.-rt{margin:0 0 2em}}.-re.-rt>a{position:relative;display:block;transition:transform .3s ease}.-re.-rt>a:hover{transform:translateY(-2px)}.-re.-rt>a:hover .-rn{box-shadow:inset 0 0 0 1px #ebebf0,0 25px 60px 0 rgba(0,0,0,.1)}.-re .-rr{position:absolute;right:16px;top:-15px;z-index:1;border-radius:15px;font-family:Poppins,system}.-re .-rn{overflow:hidden;position:relative;background-color:#fff;border-radius:10px;box-shadow:inset 0 0 0 1px #ebebf0,0 15px 30px 0 rgba(0,0,0,.15);transition:box-shadow .3s ease}@media(max-width:767px){.-re .-rn{margin-bottom:60px}}.-re .-rn .-ri{width:100%;max-width:100px;position:relative;width:110px;height:30px;margin-bottom:1em}.-re .-rn .-ri amp-img.contain img{object-fit:contain;object-position:left center}.-re .-rs{padding:25px}.-re .-ro{position:relative}.-re .-ro:before{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);height:150px;background:linear-gradient(0deg,rgba(0,0,0,.12),transparent);z-index:1}.-re .-ru{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1rem;margin:0}section.ap--tools .-rf{grid-column:1/-1;width:100%;margin-bottom:2em}section.ap--tools .-rl{display:grid;grid-template-columns:1fr;grid-gap:50px;margin:0;align-items:stretch}@media(min-width:575px){section.ap--tools .-rl{grid-template-columns:repeat(12,1fr);margin:0}}@media(min-width:768px){section.ap--tools .-rl{grid-gap:30px}}section.ap--tools .-rl .-rn{display:flex;flex-direction:column;width:100%;margin:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ebebf0,0 30px 75px -13px rgba(0,0,0,.25)}section.ap--tools .-rl .-rn:hover{box-shadow:inset 0 0 0 1px #ebebf0,0 40px 100px -13px rgba(0,0,0,.15)}section.ap--tools .-rl .-rn>div:last-child{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between}section.ap--tools .-rl .-rs{position:relative;padding-left:15px;padding-right:15px}section.ap--tools .-rl .-rr{right:13px;top:auto;bottom:10px;padding:5px 20px;line-height:1.6rem;font-size:12px;font-family:Noto Sans,system;font-weight:700;border-radius:20px;transition:transform .3s ease;cursor:pointer}section.ap--tools .-rl .-rr:hover+a{transform:translateY(-2px)}section.ap--tools .-rl .-rr:hover+a>.-rn{box-shadow:inset 0 0 0 1px #ebebf0,0 25px 60px 0 rgba(0,0,0,.1)}section.ap--tools .-rl .-sj{display:inline-flex;margin:0 2px 2px 0;vertical-align:middle;font-size:19px}section.ap--tools .-rl .-sq{fill:#fff}section.ap--tools .-rl .-sz{fill:#20202a}section.ap--tools .-rl .-oe{fill:#fff}section.ap--tools .-rl .-ot{fill:#20202a}section.ap--tools .-rl .-rt:hover .-rr{transform:translateY(-2px)}section.ap--tools .-rl .-ri{position:absolute;left:30px;bottom:100%;margin:0 0 3px;width:20px;height:20px;fill:#005af0}section.ap--tools .-rl .-ri svg{z-index:2}section.ap--tools .-rl .-ri:before{content:"";position:absolute;left:10px;bottom:-4px;transform:translateX(-50%);width:70px;height:28px;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 28'%3E%3Cpath d='M35 0.4v0c-20.5 0-11.8 26.6-35 26.6v1h70v-1c-23.2 0-14.5-26.6-35-26.6z' fill='%23fff'/%3E%3C/svg%3E")}section.ap--tools .-rl .-ro.contain amp-img{margin:0 10px}@media(min-width:768px){section.ap--tools .-rl .-ro.contain amp-img{margin:15px 30px}}section.ap--tools .-rl .-ro.contain:before{opacity:.5}section.ap--tools .-rl .-on .-rn{background-color:#20202a}section.ap--tools .-rl .-on .-rn .-rs>*{color:#fff}section.ap--tools .-rl .-on .-rn .-ri{fill:#fff;background-color:#20202a}section.ap--tools .-rl .-on .-rn .-ri:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 28'%3E%3Cpath d='M35 0.4v0c-20.5 0-11.8 26.6-35 26.6v1h70v-1c-23.2 0-14.5-26.6-35-26.6z' fill='%23333D47'/%3E%3C/svg%3E")}section.ap--tools .-rl .-or{display:flex;align-items:center;height:55px;padding:0 120px 0 15px;font-size:.8125rem;color:#48525c;border-top:2px solid #e2e5e6}section.ap--tools .-rl .-oi{color:#fff}section.ap--tools .-rl .-rt{grid-column:1;margin:0;display:flex}@media(min-width:575px){section.ap--tools .-rl .-rt{grid-column:span 6}}@media(min-width:768px){section.ap--tools .-rl .-rt{grid-column:span 4}}@media(min-width:1120px){section.ap--tools .-rl .-rt{grid-column:span 3}}section.ap--tools .-rl .-rt amp-img img{object-fit:cover}section.ap--tools .-rl .-rt amp-img.contain img{object-fit:contain}section.ap--tools .-rl .-rt>a{display:flex;width:100%}section.ap--tools .-rl .-rt p{color:#20202a;font-weight:400;font-size:.8em;margin-bottom:0}section.ap--tools-widget{margin-bottom:0}section.ap--tools-widget .-rf{margin-bottom:0}section.ap--tools-widget .-rl{display:flex;overflow:auto;margin:-40px 0 -120px;padding:0 10px 70px}@media(min-width:768px){section.ap--tools-widget .-rl{padding:0 0 70px}}section.ap--tools-widget .-rl .-rt{display:flex;margin:40px 20px;max-width:300px}@media(min-width:768px){section.ap--tools-widget .-rl .-rt:first-child{margin-left:calc((100vw - 690px)/ 24*3 + 90px)}}section.ap--tools .-t{margin-bottom:2em}section.ap--tools .-os{grid-column:4/25}.ap--story-carousel{margin-bottom:5em}@media(min-width:768px){.ap--story-carousel{margin-bottom:8vw}}.ap-o-story-carousel{grid-column:1/-1;width:100%}.ap-o-story-carousel.monetize{grid-column:1/16}.ap-o-story-carousel-slide{display:block;margin-left:85px}@media(max-width:1023px){.ap-o-story-carousel-slide{margin-left:25px}}.ap-o-story-carousel-slide:first-child{margin-left:20%}.ap-o-story-carousel-slide:last-child{margin-right:22px}.ap-o-story-carousel-slide-image{overflow:hidden;margin-top:20px;border-radius:10px;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);transition:transform .3s ease,box-shadow .3s ease}.ap-o-story-carousel-slide-image:hover{transform:translateY(-2px);box-shadow:0 25px 60px 0 rgba(0,0,0,.1)}.ap-o-story-carousel-slide-image amp-img{display:block}.ap-o-story-carousel-slide-image.no-logo{margin-bottom:35px}.ap-o-story-carousel-slide-image-wrapper{height:285px;width:161px;position:relative}@media(min-width:1024px){.ap-o-story-carousel-slide-image-wrapper{width:263px;height:467px}}.ap-o-story-carousel-slide-logo{margin:33px auto 0;width:80%}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}.-ie{grid-template-columns:5% auto 5%;grid-template-rows:17fr auto 7fr}.-ie .-it{max-width:11em}@media(min-width:768px){.-ie .-it{max-width:100%}}.-ie .-rq{max-width:12em;box-shadow:0 20px 20px 0 rgba(0,0,0,.05)}.-ie .-rq:before{border-color:#ffdc00}.-ie .-rq:after{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}@media(min-width:768px){.-ie .-rq{max-width:100%}}.-is .-io{grid-column:11/-1;position:absolute;left:50%;top:0;margin-left:-30%}@media(min-width:768px){.-is .-io{position:static;margin-top:-50%;margin-left:auto;margin-right:auto}}@media(min-width:1024px){.-is .-io{margin-top:-40%}}.-io{width:100%;max-width:16em;padding:1.5em 0;margin:0 auto;transform:rotate3d(135,-90,90,50deg);display:grid}@media(min-width:768px){.-io{width:50%;max-width:100%;position:relative;padding:0;margin-bottom:5em}}.-io:after{content:"";width:100%;height:auto;position:absolute;bottom:0;left:0;padding-top:75%;border-radius:1000% 0 0 0;opacity:.5;transform:rotate(-5deg) scaleY(1.1) skew(-25deg);transform-origin:center;background:linear-gradient(-225deg,transparent 30%,#000);filter:blur(20px);z-index:-1}@media(min-width:768px){.-io:after{padding-top:100%;transform-origin:right bottom}}.-iu{width:100%;height:auto;margin:auto}.-it{position:relative;grid-column:2/3;grid-row:1/4;max-width:9em;filter:drop-shadow(0 20px 40px rgba(0,0,0,.15))}@media(min-width:768px){.-it{max-width:100%}}.-rq{position:relative;grid-column:1/4;grid-row:2/3;max-width:11em;box-shadow:30px 90px 60px -40px rgba(0,0,0,.5);animation:bounce 10s ease-in-out -4s infinite}.-rq:before{content:"";width:100%;height:100%;position:absolute;left:-3px;top:-3px;border:3px solid #00dcc0}@media(min-width:768px){.-rq:before{left:-4px;top:-4px;border-width:4px}}@media(min-width:1024px){.-rq:before{left:-5px;top:-5px;border-width:5px}}.-rq:after{line-height:1.6rem;font-weight:400;color:#48525c;font-family:Fira Mono,monospace;font-weight:500;font-weight:700;color:#fff;content:attr(title);position:absolute;left:-3px;bottom:100%;padding:3px 6px;font-size:8px;background-color:#00dcc0}@media(min-width:768px){.-rq:after{left:-4px;padding:5px 10px;font-size:1.25vw}}@media(min-width:1024px){.-rq:after{left:-5px}}@media(min-width:1280px){.-rq:after{font-size:inherit}}@media(min-width:768px){.-rq{max-width:100%}}.-ir{grid-column:1/-1;grid-row:1/-1;width:auto;margin:auto auto 0;font-size:10px;transform:translate(75%,-4em)}@media(min-width:768px){.-ir{font-size:1.25vw;transform:translate(50%,-75px)}}.-ir .-ta{margin:0;box-shadow:15px 30px 45px -5px rgba(0,0,0,.25);animation:bounce 10s ease-in-out infinite}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-is{overflow:hidden}.-i_{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);grid-column:1/-1;position:relative;width:100%;margin-left:30px;border-bottom-left-radius:4em;-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 2em),4em 100%,0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 2em),4em 100%,0 100%)}@media(min-width:768px){.-i_{margin-left:64px;border-bottom-left-radius:6.25em;-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 3em),6.25em 100%,0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 3em),6.25em 100%,0 100%)}}.-i_ div.-tc{padding:0 2em}@media(min-width:768px){.-i_ div.-tc{padding:0 2.5em;margin-left:-64px}}.-ij{position:relative;margin:10vw 0 22vw}@media(min-width:768px){.-ij{grid-column:3/13;margin:7vw 0 11vw 3em}}@media(min-width:1024px){.-ij{grid-column:3/19;margin-left:5em}}@media(min-width:1280px){.-ij{grid-column:3/16}}.-iq{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1.375em;height:1.375em;fill:#20202a;position:absolute;left:0;bottom:calc(100% + 1em);padding:.5em;border:1px solid #20202a;border-radius:50%}@media(min-width:768px){.-iq{left:auto;bottom:auto;right:calc(100% + .75em);top:-.6em}}@media(min-width:1024px){.-iq{width:3em;height:3em;right:calc(100% + 1em);top:-1.5em;padding:1em;border-width:2px}}.-iz{font-family:Poppins,system;font-weight:700;line-height:1.2em;font-size:1.65rem;color:#20202a;margin:0}@media(min-width:768px){.-iz{font-size:2.125rem}}@media(min-width:1024px){.-iz{font-size:4rem}}@media(min-width:768px){.-iz br{display:none}}.-se{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#20202a;margin-top:0}@media(min-width:768px){.-se{font-size:.875rem}}@media(min-width:1024px){.-se{font-size:1.125rem}}.-st{color:#005af0;background:#fff;margin-top:20px}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.-so{display:block;width:100%;height:1px;margin-bottom:.813em;background-color:#fafafc}@media(min-width:768px){.-so{display:none}.-su{display:block}}section.-t.benefits.ads .-r,section.-t.benefits.ads h3-text,section.-t.benefits.websites .-r,section.-t.benefits.websites h3-text{color:#fff}section.-t.benefits.ads .-i,section.-t.benefits.ads h3-icon,section.-t.benefits.websites .-i,section.-t.benefits.websites h3-icon{fill:#005af0;background:#fff}section.-t.benefits.e-mails .-r,section.-t.benefits.e-mails h3-text,section.-t.benefits.stories .-r,section.-t.benefits.stories h3-text{color:#000}.-sa{position:relative;display:flex;margin:20px}@media(min-width:768px){.-sa{padding:0;margin:50px 0;flex:0 0 calc(33.333333333% - 40px)}}.-sf{width:2.5em;height:2.5em;fill:#005af0;margin-right:10px}.-sl{display:flex;flex-direction:column}.-sc{line-height:1.6rem;font-weight:400;color:#48525c;font-weight:700;color:#000;margin-bottom:.3em}.-sh{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;margin-bottom:10px}.-sl b{font-size:.875rem}.-sp{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.-sd{box-shadow:0 50px 100px 0 rgba(0,0,0,.25);z-index:1}@media(min-width:768px){.-sd{margin-left:55px}}.-sv{box-shadow:0 25px 50px 0 rgba(0,0,0,.21)}.-sm{padding:45px 50px}.-sg{width:60px;height:4px;background-color:#005af0}@media(min-width:1024px){.-sg{margin-bottom:3em}}.ap-m-copy{margin-bottom:3em}.ap-m-copy.no-margin{margin-bottom:0}.ap-m-copy p{line-height:1.6rem;font-weight:400;color:#48525c}.ap-m-copy-large p{font-size:1rem}.ap-m-copy-left{grid-column:3/17}.ap-m-copy-left-small{grid-column:4/13}.ap-m-copy-left-link{grid-column:3/12;margin-top:3em}.ap-m-copy-left-xsmall{grid-column:6/13}.ap-m-copy-right{grid-column:10/24}.ap-m-copy-right-centered{width:100%;grid-column:16/21;margin:auto 0}.ap-m-copy-right-small{grid-column:11/20}.ap-m-copy-right-link{grid-column:10/19;margin-top:3em}@media(min-width:768px){.ap-m-copy-right-xsmall{grid-column:8/20}}@media(min-width:1024px){.ap-m-copy-right-xsmall{grid-column:12/20}}.ap-m-copy-center{grid-column:1/-1;text-align:center}.ap-m-copy-center-small{grid-column:6/19;text-align:left}.ap-m-copy-center-medium{grid-column:4/22;text-align:left;max-width:100%}.ap-m-copy-center-large{grid-column:3/22;text-align:left;max-width:100%}.ap-m-headline-icon{display:flex}.ap-m-headline-icon-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;max-width:10em;max-height:10em;height:auto;width:100%}.ap-m-headline-icon-hl{margin-top:1.5rem;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:2.5rem;padding-top:80px;margin-bottom:0;margin-left:-1em}@media(min-width:768px){.ap-m-headline-icon-hl{font-size:3.5rem}}.-sn{margin-bottom:7em}@media(min-width:768px){.-sn{margin-bottom:8vw}}.-sr{grid-column:6/20;display:flex;flex-direction:column}@media(min-width:768px){.-sr{flex-direction:row}}.-si{flex:0 0 auto;display:flex;width:80%;align-items:flex-start}@media(min-width:768px){.-si{flex:0 0 30%;width:100%;flex-direction:column;align-items:flex-end}}.-si .ap-a-img{position:relative;width:150px;height:30px}.-si .ap-a-img amp-img.contain img{object-fit:contain;object-position:right top}.-si .ap-a-ico{width:40px;height:40px;margin:0 1em 0 0;fill:#005af0}@media(min-width:768px){.-si .ap-a-ico{width:100px;height:100px;margin:0 0 .5em auto}}.-ss{padding:0 0 0 3.375em}@media(min-width:768px){.-ss{padding:50px 0 0 30px}}.-ss blockquote{flex:0 0 70%;margin:0 0 2em}.-ss blockquote p.ap-a-txt{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1rem;line-height:1.8;font-style:italic;display:block}@media(min-width:768px){.-ss blockquote p.ap-a-txt{font-size:1.2rem;line-height:2}}.-ss blockquote p.ap-a-txt:before{content:"“"}.-ss blockquote p.ap-a-txt:after{content:"”"}.-ss p{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem}@media(min-width:768px){.-ss p{font-size:.875rem}}.ap--benefits-overview{margin-bottom:7em}@media(min-width:1024px){.ap--benefits-overview{margin-bottom:8vw}}.-sy{grid-column:1/16}@media(min-width:1024px){.-sy{grid-column:1/12}}@media(min-width:1280px){.-sy{grid-column:1/10}}.-sb{grid-column:1/13}.-sb h2{margin-top:0}.-sb .-sa{margin:20px 20px 0 0}.-sb .-sf{margin-right:15px}.-sb .-sa.principles{margin:50px 20px 100px 0}@media(min-width:1024px){.-sw{grid-column:2/10}}.-sx{grid-column:13/25}@media(min-width:768px){.-sx{margin-top:5em}}@media(min-width:1024px){.-sx{grid-column:14/22}.-sk{grid-column:3/10}}.-s_{grid-column:17/-1;width:100%;margin-top:2em}@media(min-width:768px){.-s_{width:auto;margin-top:0}}.-is .-im{grid-column:1/-1;width:150vw;margin-top:-40%;margin-right:-150vw;pointer-events:none}@media(min-width:768px){.-is .-im{width:100%;margin-top:-30%;margin-right:0}}.-ig{overflow:hidden;margin-bottom:7em}@media(min-width:768px){.-ig{margin-bottom:8vw}}.-ig .ap-m-copy h3{margin-top:0}.-im{grid-column:2/-1;width:100%;max-width:1680px;height:auto;display:grid;grid-gap:0;grid-template-columns:17fr 5.5fr 3fr 9fr 7fr 12.5fr 3fr 9fr 4fr 12.5fr 6fr 10.5fr;grid-template-rows:19fr 6fr 12.5fr 12.5fr 25fr 5fr 5fr 5fr 5fr 5fr;padding:7vw 0 11vw;transform:perspective(100px) rotate(.1deg) rotateY(-.1deg) skewX(-4deg) skewY(0) translateX(6.3%);transform-origin:center}.-iy{width:100%;height:auto;margin-top:auto;animation:levitate 7s ease-in-out infinite forwards}@media(prefers-reduced-motion:reduce){.-iy{animation:none}}.-iy:first-child{grid-column:2/5;grid-row:1/8;animation-delay:-5s}.-iy:nth-child(2){grid-column:1/3;grid-row:2/10;animation-delay:-6s}.-iy:nth-child(3){grid-column:8/12;grid-row:3/7;animation-delay:-2s}.-iy:nth-child(4){grid-column:6/9;grid-row:2/11;animation-delay:-3s}.-iy:nth-child(5){grid-column:4/7;grid-row:4/9;animation-delay:-4s}.-rd{margin-bottom:7em}@media(min-width:768px){.-rd{margin-bottom:calc(16vw + 6em)}}.-rv{grid-column:1/-1;width:100%;height:auto;display:grid;grid-gap:0;grid-template-columns:32fr 5fr 4fr 10fr 7fr 10fr 8fr;grid-template-rows:8fr 26fr 6fr 11fr 11fr 12fr 26fr}@media(min-width:768px){.-rv{grid-template-columns:32fr 5fr 4fr 10fr 7fr 10fr 8fr 24fr}}.-rm{grid-column:3/16;font-size:1.65rem;margin-top:0}@media(min-width:768px){.-rm{font-size:2.125rem}}@media(min-width:1024px){.-rm{font-size:4rem}}.-rg:hover{z-index:2;transform:translateY(-2%);transition:transform .3s ease}.-rg:hover .-ry{opacity:1;transform:translateY(0)}.-rg a{position:relative;display:block}.-rg amp-img{transition:box-shadow .3s ease}.-ry{width:100%;padding:0 2em;position:absolute;left:0;bottom:0;opacity:0;background:#fff;z-index:1;pointer-events:none;transform:translateY(10px);transition:transform .3s ease}@media(max-width:1023px){.-ry{display:none}}.-rb{grid-column:1/3;grid-row:2/6}.-rb amp-img{box-shadow:0 6.6vw 7vw 0 rgba(0,0,0,.5)}.-rb amp-img:hover{box-shadow:0 7.6vw 8vw 0 rgba(0,0,0,.4)}.-rw{grid-column:4/8;grid-row:1/4}.-rw amp-img{box-shadow:0 2.3vw 4.2vw -.7vw rgba(0,0,0,.33)}.-rw amp-img:hover{box-shadow:0 3.3vw 5.2vw -.7vw rgba(0,0,0,.23)}.-rx{grid-column:5/8;grid-row:3/7}@media(min-width:768px){.-rx{grid-column:7/9;grid-row:3/7}}.-rx amp-img{box-shadow:0 1.4vw 2.8vw 1.4vw rgba(0,0,0,.2)}.-rx amp-img:hover{box-shadow:0 2.4vw 3.8vw 1.4vw rgba(0,0,0,.1)}.-rk{grid-column:2/6;grid-row:5/8}.-rk amp-img{box-shadow:0 .3vw 1vw 0 rgba(0,0,0,.2)}.-rk amp-img:hover{box-shadow:0 1.3vw 2vw 0 rgba(0,0,0,.1)}.-r_{padding:40px 20px 0;grid-column:1/-1;grid-row:auto}@media(min-width:768px){.-r_{grid-column:6/9;grid-row:7/8;padding:12% 24% 0 12%}}.-oo{overflow:hidden;margin-bottom:7em}@media(min-width:768px){.-oo{margin-bottom:12vw}}.-ou{grid-column:4/10;order:2;margin:auto 0}@media(min-width:768px){.-ou{order:inherit}}.-os{margin:3em 1em 0 0}.-oa{width:100%;grid-column:13/25;order:1}@media(min-width:768px){.-oa{order:inherit}}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}.-of .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-of .-tf{padding:0 15px}.-of .-tf>div,.-of .-tf section{min-width:0}}@media(min-width:768px){.-of .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px}}.-of .-tc{position:relative;display:flex;flex-wrap:wrap;width:100%;padding:0;margin-left:auto;margin-right:auto;max-width:1920px}@media(max-width:767px){.-of .-tc>div,.-of .-tc section{min-width:0}}@media(min-width:768px){.-of .-tc{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0}}.-of .-t{padding-left:30px;padding-right:30px;margin-bottom:7em}@media(min-width:768px){.-of .-t{padding-left:0;padding-right:0;margin-bottom:8vw}}.-of .-t .-tf{padding:0}.-of .-t .ap-m-copy:last-child,.-of .-t .ap-m-copy p:last-child{margin-bottom:0}.-of .-oo{overflow:visible}.-of .-ol{display:flex;justify-content:space-between;grid-column:6/15}.-of .-oo .-os{margin-right:15px}.-of .-oo .-ou{padding-left:30px;padding-right:30px}@media(min-width:768px){.-of .-oo .-ou{padding-left:0;padding-right:0}}.-of .-ig .-im{grid-template-columns:14fr 5.5fr 3fr 9fr 7fr 12.5fr 3fr 5fr 4fr 4fr 12.5fr 6fr 10.5fr;grid-template-rows:5fr 6fr 12.5fr 12.5fr 25fr 5fr 5fr 5fr 5fr 5fr;padding:0}.-of .-ig .-iy{margin:auto}.-of .-ig .-iy:first-child{grid-column:2/5;grid-row:3/9}.-of .-ig .-iy:first-child:before{content:"";width:100%;height:100%;position:absolute;bottom:-1px;left:0;background:linear-gradient(270deg,transparent 30%,#000);z-index:1}.-of .-ig .-iy:first-child:after{content:"";width:100%;height:45%;position:absolute;bottom:45%;right:0;transform:translateY(50%);transform-origin:center;background:linear-gradient(90deg,transparent 30%,#000);z-index:1;filter:blur(15px)}.-of .-ig .-iy:nth-child(2){grid-column:1/3;grid-row:2/10}.-of .-ig .-iy:nth-child(3){grid-column:8/13;grid-row:3/7}.-of .-ig .-iy:nth-child(3):before{content:"";width:100%;height:45%;position:absolute;bottom:0;right:0;opacity:.3;background:linear-gradient(90deg,transparent 20%,#000);z-index:1;filter:blur(15px)}.-of .-ig .-iy:nth-child(3):after{content:"";width:100%;height:100%;position:absolute;bottom:0;left:0;opacity:.5;background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 40%,#000);z-index:1}.-of .-ig .-iy:nth-child(4){grid-column:6/9;grid-row:2/10}.-of .-ig .-iy:nth-child(4):before{content:"";width:100%;height:60%;position:absolute;bottom:42%;left:0;opacity:.3;transform:translateY(50%);transform-origin:center;background:linear-gradient(270deg,transparent -60%,#000);z-index:1;filter:blur(40px)}.-of .-ig .-iy:nth-child(5){grid-column:4/7;grid-row:4/8}.-of .-ig .-iy:nth-child(5):before{content:"";width:100%;height:calc(100% + 2px);position:absolute;bottom:-1px;left:0;opacity:.2;background:linear-gradient(270deg,transparent 50%,#303030);z-index:1}.-of .-ig .-iy:nth-child(6){grid-column:10/13;grid-row:5/9;z-index:1}.-of .-ig .-iy:nth-child(7){grid-column:12/14;grid-row:3/8}.-of .-ig .-iy:nth-child(7):before{content:"";width:100%;height:42%;position:absolute;bottom:0;right:0;opacity:.4;background:linear-gradient(200deg,transparent -20%,#000);z-index:1;filter:blur(0)}.-of .-ig .ap-m-copy{padding-left:30px;padding-right:30px}@media(min-width:768px){.-of .-ig .ap-m-copy{padding-left:0;padding-right:0}}.-of .-is .-st{margin-right:.5em}@media(max-width:767px){.-of .-is .-i_{margin-bottom:50px}.-of .-is .-ij{margin-top:20em;margin-bottom:4em}}@media(min-width:768px){.-of .-is+.-t{margin-top:-15%}}.-of .-is+.-t h1{font-size:2.125rem}@media(min-width:768px){.-of .-is+.-t h1{font-size:2.125rem}}@media(min-width:1024px){.-of .-is+.-t h1{font-size:4.5rem}}.-of .ap--tools-widget div.-rf{grid-column:4/25}.-of .-rf{grid-column:4/22;width:100%;margin-bottom:7em}@media(min-width:768px){.-of .-rf{margin-bottom:19.5em}}@media(min-width:1024px){.-of .-rf{margin-bottom:calc(12.5em + 8vw)}}.-of .-rl{display:flex;padding-top:40px;overflow:scroll}@media(min-width:768px){.-of .-rl{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:60px 30px;overflow:visible;padding-top:0;align-items:flex-start}}.-of .-rl .-rt{margin:0 20px}@media(min-width:768px){.-of .-rl .-rt{grid-column:span 4;margin:0}}.-of .-oc{grid-column:3/19;margin-top:0;font-size:1.65rem}@media(min-width:768px){.-of .-oc{font-size:2.125rem}}@media(min-width:1024px){.-of .-oc{font-size:4rem}}.-of .-tt{align-items:end}.-of .-tu{margin-bottom:-.688rem}@media not all and (min-width:1024px){#i-amp-0,#i-amp-2{display:none}}@media not all and (max-width:1023px){#i-amp-1,#i-amp-3{display:none}}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="logo-transparent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></symbol><symbol id="circle-arrows-money" viewBox="0 0 64 64"> <path d="M31.521 48.303c-9.003-0.001-16.301-7.3-16.301-16.303s7.299-16.303 16.303-16.303 16.303 7.299 16.303 16.303v0c-0.011 9-7.304 16.293-16.303 16.303h-0.001zM31.521 18.541c-7.433 0.001-13.457 6.026-13.457 13.459s6.026 13.459 13.459 13.459 13.459-6.026 13.459-13.459v0c-0.009-7.43-6.030-13.451-13.459-13.459h-0.001z"/> <path d="M33.231 27.589c0.396 0.27 0.653 0.719 0.653 1.228 0 0.026-0.001 0.052-0.002 0.078l0-0.004h2.441c-0.002-1.243-0.569-2.354-1.459-3.087l-0.007-0.005c-0.591-0.469-1.304-0.81-2.084-0.971l-0.032-0.006v-2.275h-2.442v2.275c-0.812 0.167-1.525 0.509-2.126 0.985l0.010-0.008c-0.897 0.739-1.465 1.849-1.465 3.093s0.568 2.354 1.458 3.087l0.007 0.005c0.872 0.711 1.997 1.141 3.222 1.141 0.067 0 0.134-0.001 0.2-0.004l-0.010 0c0.038-0.002 0.082-0.003 0.126-0.003 0.644 0 1.229 0.249 1.666 0.656l-0.001-0.001c0.397 0.3 0.651 0.772 0.651 1.303s-0.254 1.002-0.647 1.3l-0.004 0.003c-0.49 0.38-1.113 0.61-1.79 0.61s-1.301-0.23-1.797-0.615l0.007 0.005c-0.396-0.27-0.653-0.719-0.653-1.228 0-0.026 0.001-0.053 0.002-0.078l-0 0.004h-2.436c0.002 1.243 0.569 2.353 1.458 3.087l0.007 0.005c0.592 0.467 1.305 0.808 2.083 0.971l0.033 0.006v2.275h2.441v-2.275c0.812-0.168 1.524-0.509 2.127-0.985l-0.011 0.008c0.898-0.738 1.466-1.849 1.466-3.093s-0.568-2.354-1.459-3.087l-0.007-0.006c-0.87-0.711-1.993-1.141-3.216-1.141-0.069 0-0.138 0.001-0.206 0.004l0.010-0c-0.037 0.002-0.081 0.003-0.125 0.003-0.644 0-1.231-0.249-1.668-0.656l0.001 0.001c-0.397-0.3-0.651-0.771-0.651-1.302s0.254-1.002 0.647-1.299l0.004-0.003c0.49-0.38 1.113-0.609 1.79-0.609s1.299 0.229 1.795 0.613l-0.007-0.005z"/> <path d="M32.006 63.994c0 0-0 0-0 0-7.985 0-15.286-2.925-20.891-7.762l0.041 0.035 1.848-2.156c5.076 4.397 11.744 7.076 19.038 7.076 16.099 0 29.15-13.051 29.15-29.15 0-8.046-3.26-15.331-8.531-20.606l0 0 2.016-2.006c5.761 5.785 9.323 13.764 9.323 22.575 0 17.67-14.324 31.994-31.994 31.994-0 0-0 0-0 0v0z"/> <path d="M53.969 17.021l-2.844-0.063 0.186-8.529 8.529 0.186-0.061 2.844-5.688-0.125-0.122 5.686z"/> <path d="M5.213 49.832c-3.227-5.058-5.159-11.215-5.201-17.82l-0-0.011c0.005-17.671 14.331-31.994 32.003-31.994 5.841 0 11.317 1.565 16.031 4.299l-0.154-0.082-1.413 2.467c-4.154-2.414-9.142-3.839-14.463-3.839-16.101 0-29.154 13.050-29.16 29.15v0.001c0.038 6.047 1.803 11.674 4.827 16.421l-0.075-0.125z"/> <path d="M8.061 52.552l-8.061-2.793 0.931-2.689 5.375 1.863 1.861-5.375 2.688 0.931-2.794 8.063z"/> </symbol><symbol id="pie-chart-money" viewBox="0 0 64 64"> <path d="M48.046 61.447c-0 0-0.001 0-0.001 0-8.812 0-15.956-7.144-15.956-15.956s7.144-15.956 15.956-15.956c8.812 0 15.956 7.144 15.956 15.956 0 0.001 0 0.001 0 0.002v-0c-0.011 8.807-7.147 15.943-15.953 15.954h-0.001zM48.046 32.32c-0 0-0.001 0-0.001 0-7.275 0-13.172 5.898-13.172 13.172s5.898 13.172 13.172 13.172c7.275 0 13.172-5.898 13.172-13.172v0c-0.008-7.271-5.9-13.164-13.17-13.172h-0.001z"/> <path d="M50.25 24.717c2.122 0.254 4.054 0.793 5.852 1.582l-0.132-0.052c0.155 0.073 0.338 0.116 0.53 0.116 0.701 0 1.269-0.568 1.269-1.269 0-0.1-0.012-0.197-0.033-0.29l0.002 0.009c-1.185-4.734-3.378-8.847-6.348-12.267l0.031 0.036c-0.231-0.261-0.566-0.425-0.94-0.425s-0.709 0.164-0.939 0.423l-0.001 0.001-10.080 11.143c-0.203 0.222-0.327 0.518-0.327 0.844 0 0.244 0.070 0.473 0.191 0.665l-0.003-0.005 0.011 0.018c0.229 0.363 0.628 0.601 1.083 0.601 0.166 0 0.324-0.032 0.469-0.089l-0.009 0.003c2.036-0.764 4.389-1.207 6.846-1.207 0.892 0 1.77 0.058 2.631 0.171l-0.101-0.011z"/> <path d="M30.852 60.954c0.649-0.052 1.156-0.591 1.156-1.249 0-0.317-0.117-0.606-0.311-0.826l0.001 0.001c-2.248-2.692-3.849-5.999-4.519-9.633l-0.020-0.13c-0.174-1.023-0.304-2.253-0.362-3.502l-0.003-0.070c-0.003-0.087-0.005-0.19-0.005-0.293 0-0.289 0.014-0.574 0.041-0.856l-0.003 0.036c0.002-0.026 0.003-0.057 0.003-0.088 0-0.579-0.389-1.067-0.919-1.218l-0.009-0.002c-0.794-0.241-1.463-0.506-2.106-0.818l0.085 0.037c-0.884-0.489-1.642-0.996-2.354-1.558l0.036 0.027c-1.898-1.563-3.253-3.723-3.78-6.19l-0.013-0.072c-0.24-0.84-0.377-1.804-0.377-2.8 0-0.509 0.036-1.010 0.106-1.5l-0.006 0.056c0.122-0.806 0.29-1.516 0.51-2.203l-0.027 0.099c0.026-0.224 0.166-0.434 0.193-0.66l-1.968-1.603-3.291-2.901-2.058-1.837-4.968-4.324c-0.218-0.194-0.508-0.313-0.825-0.313-0.445 0-0.836 0.234-1.056 0.586l-0.003 0.005c-1.928 3.175-3.268 6.92-3.768 10.925l-0.014 0.138c-0.15 1.234-0.172 2.366-0.21 3.618-0.004 0.157-0.007 0.342-0.007 0.527 0 1.111 0.089 2.202 0.26 3.265l-0.016-0.117c0.278 1.915 0.657 3.596 1.151 5.228l-0.065-0.25c0.010 0.032 0.020 0.064 0.031 0.095l0.984 2.751c0.013 0.038 0.028 0.075 0.043 0.111 0.69 1.546 1.394 2.845 2.183 4.084l-0.075-0.126c0.479 0.742 1.058 1.607 1.649 2.366 0.907 1.179 1.862 2.225 2.897 3.186l0.016 0.015c0.717 0.655 1.336 1.186 2.165 1.855 1.078 0.879 2.281 1.704 3.551 2.425l0.129 0.068c0.856 0.445 1.713 0.891 2.681 1.348 2.372 1.073 5.124 1.856 8.008 2.211l0.139 0.014c0.902 0.078 1.952 0.123 3.012 0.123 0.741 0 1.478-0.022 2.209-0.065l-0.101 0.005zM3.019 28.555c0.306-2.505 0.896-4.783 1.747-6.93l-0.066 0.188c0.183-0.479 0.639-0.813 1.173-0.813 0.313 0 0.599 0.115 0.819 0.305l-0.002-0.001 1.080 0.925c0.267 0.231 0.436 0.571 0.436 0.949 0 0.346-0.14 0.659-0.367 0.886v0l-4.859 4.833zM3.243 32.558l6.764-6.679c0.226-0.223 0.537-0.36 0.879-0.36 0.318 0 0.607 0.118 0.828 0.313l-0.001-0.001 1.408 1.244c0.259 0.23 0.422 0.565 0.422 0.938 0 0.348-0.142 0.662-0.371 0.889l-0 0-7.915 7.809c-0.226 0.223-0.536 0.36-0.879 0.36-0.627 0-1.147-0.461-1.238-1.063l-0.001-0.007c-0.113-0.813-0.205-1.618-0.27-2.441-0.003-0.030-0.004-0.065-0.004-0.101 0-0.351 0.144-0.668 0.377-0.895l0-0zM5.171 40.661l7.409-7.321c0.225-0.223 0.534-0.361 0.876-0.361 0.625 0 1.143 0.462 1.23 1.063l0.001 0.007c0.107 0.771 0.252 1.449 0.443 2.108l-0.026-0.104c0.036 0.111 0.057 0.239 0.057 0.372 0 0.343-0.138 0.654-0.361 0.88l0-0-7.023 6.958c-0.226 0.224-0.537 0.362-0.881 0.362-0.497 0-0.926-0.289-1.128-0.708l-0.003-0.008c-0.298-0.617-0.583-1.227-0.863-1.851-0.066-0.148-0.104-0.32-0.104-0.501 0-0.35 0.143-0.667 0.374-0.896l0-0zM9.018 46.937l6.666-6.575c0.224-0.223 0.533-0.361 0.874-0.361 0.399 0 0.754 0.189 0.981 0.482l0.002 0.003c0.366 0.481 0.758 0.946 1.165 1.392 0.193 0.217 0.31 0.505 0.31 0.82 0 0.347-0.143 0.661-0.373 0.886l-0 0-6.624 6.556c-0.226 0.224-0.538 0.363-0.882 0.363-0.358 0-0.68-0.15-0.909-0.39l-0.001-0.001c-0.447-0.488-0.886-0.991-1.307-1.499-0.172-0.213-0.276-0.486-0.276-0.785 0-0.349 0.142-0.664 0.372-0.891l0-0zM14.32 51.769l6.842-6.75c0.223-0.225 0.533-0.364 0.874-0.364 0.192 0 0.374 0.044 0.536 0.122l-0.007-0.003c0.252 0.124 0.505 0.239 0.758 0.351 0.444 0.197 0.75 0.631 0.758 1.137v0.001c0 0.445 0.021 0.891 0.057 1.339 0.003 0.035 0.006 0.076 0.006 0.117 0 0.346-0.14 0.659-0.367 0.886v0l-6.049 5.954c-0.226 0.225-0.539 0.364-0.883 0.364-0.201 0-0.39-0.047-0.559-0.131l0.007 0.003c-0.704-0.369-1.295-0.733-1.861-1.132l0.052 0.035c-0.329-0.229-0.542-0.605-0.542-1.031 0-0.352 0.145-0.67 0.379-0.897l0-0zM23.374 52.882c0.224-0.222 0.533-0.36 0.873-0.36 0.536 0 0.992 0.34 1.165 0.816l0.003 0.009c0.661 1.847 1.455 3.441 2.409 4.922l-0.056-0.093-1.682-0.203c-1.64-0.191-3.116-0.498-4.542-0.923l0.187 0.048c-0.515-0.163-0.882-0.637-0.882-1.196 0-0.349 0.142-0.664 0.372-0.891l0-0z"/> <path d="M31.098 20.279c1.705 0.256 3.241 0.793 4.626 1.566l-0.069-0.035c0.18 0.098 0.394 0.155 0.621 0.155 0.396 0 0.75-0.174 0.992-0.45l0.001-0.002 9.812-11.542c0.191-0.225 0.307-0.519 0.307-0.84 0-0.395-0.175-0.748-0.453-0.987l-0.002-0.001-0.020-0.017c-0.061-0.055-0.129-0.106-0.199-0.153l-0.007-0.004c-4.897-3.436-9.261-5.32-15.24-5.416-0.010-0-0.021-0-0.033-0-0.373 0-0.708 0.161-0.94 0.417l-0.001 0.001-0.031 0.051c-0.195 0.231-0.313 0.532-0.313 0.861 0 0.029 0.001 0.059 0.003 0.088l-0-0.004-0.199 15.153c0.068 0.605 0.54 1.083 1.137 1.158l0.006 0.001zM32.86 5.202c4.535 0.313 7.473 1.752 11.305 4.193l-8.21 9.664c-0.996-0.481-2.158-0.885-3.371-1.153l-0.107-0.020z"/> <path d="M21.796 22.771v0c1.177-0.923 2.555-1.656 4.050-2.124l0.091-0.024c0.544-0.162 0.934-0.658 0.934-1.245 0-0.038-0.002-0.076-0.005-0.114l0 0.005-1.252-15.079c-0.054-0.667-0.609-1.189-1.286-1.189-0.037 0-0.074 0.002-0.11 0.005l0.005-0c1.986 0.255-0.082 0.015-0.118 0.018-6.12 1.123-11.441 3.97-15.592 8.013l0.007-0.006c-0.068 0.060-0.129 0.125-0.184 0.196l-0.002 0.003-0.017 0.020c-0.191 0.225-0.308 0.519-0.308 0.84 0 0.395 0.176 0.748 0.453 0.987l0.002 0.001 11.542 9.812c0.224 0.189 0.515 0.305 0.834 0.305 0.379 0 0.719-0.163 0.956-0.422l0.001-0.001zM11.228 12.034c3.275-2.915 7.294-5.066 11.735-6.135l0.187-0.038 1.048 12.603c-1.27 0.485-2.367 1.081-3.37 1.799l0.045-0.030z"/> <path d="M49.397 41.176c0.388 0.264 0.639 0.704 0.639 1.202 0 0.026-0.001 0.051-0.002 0.076l0-0.004h2.389c-0.002-1.217-0.557-2.303-1.427-3.023l-0.007-0.005c-0.579-0.458-1.277-0.791-2.040-0.949l-0.032-0.006v-2.226h-2.389v2.226c-0.794 0.164-1.492 0.497-2.081 0.962l0.010-0.008c-0.878 0.723-1.434 1.81-1.434 3.027s0.556 2.304 1.427 3.022l0.007 0.005c0.853 0.695 1.954 1.117 3.153 1.117 0.066 0 0.131-0.001 0.196-0.004l-0.009 0c0.037-0.002 0.080-0.003 0.123-0.003 0.63 0 1.203 0.244 1.63 0.642l-0.001-0.001c0.389 0.293 0.637 0.755 0.637 1.274s-0.249 0.98-0.633 1.271l-0.004 0.003c-0.479 0.373-1.089 0.598-1.752 0.598s-1.273-0.225-1.758-0.603l0.006 0.005c-0.388-0.263-0.639-0.702-0.639-1.2 0-0.026 0.001-0.051 0.002-0.077l-0 0.004h-2.384c0.002 1.216 0.557 2.303 1.427 3.021l0.007 0.005c0.579 0.457 1.276 0.791 2.039 0.949l0.032 0.006v2.232h2.389v-2.226c0.795-0.163 1.493-0.497 2.082-0.962l-0.010 0.008c0.878-0.723 1.434-1.81 1.434-3.027s-0.556-2.304-1.427-3.021l-0.007-0.005c-0.852-0.696-1.951-1.117-3.149-1.117-0.067 0-0.134 0.001-0.2 0.004l0.010-0c-0.037 0.002-0.080 0.003-0.123 0.003-0.631 0-1.204-0.244-1.632-0.642l0.001 0.001c-0.389-0.293-0.637-0.755-0.637-1.274s0.249-0.98 0.633-1.271l0.004-0.003c0.48-0.374 1.091-0.599 1.754-0.599 0.66 0 1.267 0.223 1.752 0.597l-0.007-0.005z"/> </symbol><symbol id="speedometer" viewBox="0 0 64 64"> <path d="M45.353 12.857l4.235-6.517c-5.021-3.346-11.193-5.34-17.831-5.34-0.023 0-0.046 0-0.069 0h0.004v6.657c5.164 0.698 9.793 2.543 13.769 5.27l-0.108-0.070z"/> <path d="M57.101 27.073l6.899-1.179c-2.213-7.582-6.708-13.915-12.682-18.38l-0.092-0.065-4.235 6.517c4.361 3.429 7.803 7.832 10.025 12.892l0.084 0.214z"/> <path d="M27.733 7.38c0.095-0.002 0.206-0.003 0.319-0.003 0.561 0 1.117 0.026 1.665 0.077l-0.070-0.005v-6.38c-5.794 0.374-11.098 2.185-15.648 5.077l0.134-0.080 2.185 3.467c3.377-1.363 7.293-2.153 11.393-2.153 0.008 0 0.015 0 0.023 0h-0.001z"/> <path d="M14.617 10.361l-2.049-3.189c-5.748 4.137-10.117 9.866-12.493 16.54l-0.075 0.242c3.367-5.953 8.38-10.636 14.421-13.508l0.197-0.084z"/> <path d="M36 34.333c-0.735-0.002-1.33-0.598-1.33-1.333 0-0.658 0.476-1.204 1.103-1.314l0.008-0.001 17.32-2.893c0.076-0.015 0.163-0.024 0.252-0.024 0.736 0 1.333 0.597 1.333 1.333 0 0.67-0.494 1.224-1.138 1.319l-0.007 0.001-17.32 2.893c-0.065 0.012-0.139 0.019-0.215 0.019-0.002 0-0.004 0-0.006 0h0z"/> <path d="M31.333 39.667c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6v0c-0.004 3.312-2.688 5.996-6 6h-0zM31.333 30.333c-1.841 0-3.333 1.492-3.333 3.333s1.492 3.333 3.333 3.333c1.841 0 3.333-1.492 3.333-3.333v0c0-1.841-1.492-3.333-3.333-3.333v0z"/> </symbol><symbol id="storytelling" viewBox="0 0 64 64"> <path d="M57.763 50.441h-4.746v-30.237c0-3.525-2.847-6.373-6.373-6.373h-31.864c0 0 0 0-0.136 0s-0.136 0-0.271 0c-3.39 0.271-6.102 3.119-5.966 6.644v2.847c0 0.814 0.678 1.627 1.627 1.627v0h8v26.847c0 3.39 2.847 7.864 6.237 8.136 1.627 0.271 23.186 0.271 27.254 0.271 4.61 0 8-1.898 8-6.508v-1.627c-0.136-0.814-0.814-1.627-1.763-1.627v0zM17.898 21.83h-6.373v-1.356c0-1.763 1.22-3.254 2.983-3.39s3.254 1.22 3.39 2.983v1.763zM27.526 52.068c0 0.949-0.271 1.763-0.949 2.441-0.542 0.542-1.356 0.814-2.169 0.814v0c-1.763-0.136-3.254-1.627-3.254-3.525v-31.593c0-1.085-0.271-2.169-0.949-3.119h26.441c1.763 0 3.119 1.492 3.119 3.119v0 30.237h-20.61c-0.949 0-1.627 0.814-1.627 1.627v0zM56.136 53.695c0 2.441-2.441 3.661-5.831 3.661h-21.695c0.814-1.085 1.356-2.305 1.898-3.661h25.627z"/> <path d="M33.356 46.508h-1.356l1.356-8h-4.068c-0.407 0-0.678-0.271-0.678-0.678v0c0-0.136 0.136-0.271 0.136-0.407l7.186-12.339h1.356l-1.356 8h4.068c0.407 0 0.678 0.271 0.678 0.678 0 0.136 0 0.271-0.136 0.407l-7.186 12.339z"/> <path d="M60.339 0.814l0.271 3.797 3.39 2.034-3.661 1.492-0.814 3.797-2.441-2.983-3.932 0.271 2.034-3.254-1.492-3.525 3.797 0.949z"/> <path d="M27.932 4.475l1.22 2.305 2.441 0.271-1.763 1.898 0.407 2.441-2.305-1.22-2.169 1.22 0.407-2.441-1.898-1.898 2.576-0.271z"/> <path d="M46.644 2.847c0 1.085-0.814 1.898-1.898 1.898s-1.898-0.814-1.898-1.898 0.814-1.898 1.898-1.898v0c1.085 0 1.898 0.814 1.898 1.898v0z"/> <path d="M16.678 9.898c0 1.085-0.814 1.898-1.898 1.898-0.949 0-1.898-0.814-1.898-1.898 0-0.949 0.949-1.898 1.898-1.898 1.085 0 1.898 0.949 1.898 1.898z"/> <path d="M7.186 5.288l-2.441-0.136-1.492 2.17-0.814-2.576-2.441-0.678 2.17-1.492v-2.576l2.034 1.627 2.441-0.814-0.949 2.441z"/> </symbol><symbol id="share" viewBox="0 0 64 64"> <path d="M45.333 52c-8.837 0-16-7.163-16-16s7.163-16 16-16c8.837 0 16 7.163 16 16v0c-0.010 8.833-7.167 15.99-15.999 16h-0.001zM45.333 22.667c-7.364 0-13.333 5.97-13.333 13.333s5.97 13.333 13.333 13.333c7.364 0 13.333-5.97 13.333-13.333v0c-0.008-7.36-5.973-13.325-13.333-13.333h-0.001z"/> <path d="M33.333 22.667c-0.368-0-0.701-0.149-0.943-0.391l-6.667-6.667c-0.232-0.239-0.374-0.566-0.374-0.926 0-0.736 0.597-1.333 1.333-1.333 0.36 0 0.687 0.143 0.927 0.375l6.666 6.666c0.241 0.241 0.39 0.575 0.39 0.943 0 0.736-0.597 1.333-1.333 1.333v0z"/> <path d="M20.667 14.667c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6v0c-0.004 3.312-2.688 5.996-6 6h-0zM20.667 5.333c-1.841 0-3.333 1.492-3.333 3.333s1.492 3.333 3.333 3.333c1.841 0 3.333-1.492 3.333-3.333v0c0-1.841-1.492-3.333-3.333-3.333v0z"/> <path d="M58 12c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6v0c-0.004 3.312-2.688 5.996-6 6h-0zM58 2.667c-1.841 0-3.333 1.492-3.333 3.333s1.492 3.333 3.333 3.333c1.841 0 3.333-1.492 3.333-3.333v0c0-1.841-1.492-3.333-3.333-3.333v0z"/> <path d="M21.333 64c-2.945 0-5.333-2.388-5.333-5.333s2.388-5.333 5.333-5.333c2.945 0 5.333 2.388 5.333 5.333v0c0 2.946-2.388 5.333-5.333 5.333v0zM21.333 56c-1.473 0-2.667 1.194-2.667 2.667s1.194 2.667 2.667 2.667c1.473 0 2.667-1.194 2.667-2.667v0c0-1.473-1.194-2.667-2.667-2.667v0z"/> <path d="M43.795 46.028h-1.221l1.208-7.411h-3.785c-0.338-0.002-0.611-0.277-0.611-0.615 0-0.001 0-0.003 0-0.004v0c0.021-0.15 0.068-0.284 0.136-0.406l-0.003 0.006 6.721-11.36h1.241l-1.237 7.423h3.819c0.001 0 0.002 0 0.003 0 0.335 0 0.607 0.272 0.607 0.607 0 0.142-0.049 0.273-0.13 0.376l0.001-0.001z"/> <path d="M26.667 37.333h-10.667c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333v0h10.667c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333v0z"/> <path d="M26.667 54.667c-0.736-0-1.333-0.597-1.333-1.333 0-0.368 0.149-0.701 0.39-0.943l4-4c0.239-0.232 0.566-0.374 0.926-0.374 0.736 0 1.333 0.597 1.333 1.333 0 0.36-0.143 0.687-0.375 0.927l-4 4c-0.241 0.241-0.575 0.391-0.943 0.391v0z"/> <path d="M52 20c-0.736-0-1.333-0.597-1.333-1.333 0-0.217 0.052-0.422 0.144-0.604l-0.004 0.008 2.667-5.333c0.224-0.441 0.674-0.738 1.193-0.738 0.737 0 1.334 0.597 1.334 1.334 0 0.217-0.052 0.422-0.144 0.604l0.004-0.008-2.667 5.333c-0.224 0.441-0.674 0.737-1.193 0.737-0.001 0-0.001 0-0.002 0h0z"/> <path d="M6.667 42.667c-3.682 0-6.667-2.985-6.667-6.667s2.985-6.667 6.667-6.667c3.682 0 6.667 2.985 6.667 6.667v0c-0.005 3.68-2.987 6.662-6.666 6.667h-0zM6.667 32c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0z"/> </symbol><symbol id="components" viewBox="0 0 64 64"> <path d="M9.001 36.945h-7.577c-0.735 0-1.33-0.596-1.33-1.33v0l-0.093-33.569c0-0.735 0.596-1.33 1.33-1.33v0 0l24.091 0.029c0.735 0 1.33 0.596 1.33 1.33v0 4.007c0 0.735-0.596 1.33-1.33 1.33s-1.33-0.596-1.33-1.33v0-2.678l-21.426-0.031 0.085 30.911h6.253c0.735 0 1.33 0.596 1.33 1.33s-0.596 1.33-1.33 1.33v0z"/> <path d="M13.396 44.927c-0.735 0-1.33-0.596-1.33-1.33v0l-0.093-33.569c0-0.735 0.596-1.33 1.33-1.33v0 0l22.76 0.029c0.735 0 1.33 0.596 1.33 1.33v0 33.274c0 0 0 0 0 0 0 0.729-0.587 1.321-1.313 1.33h-0.001l-22.667 0.266zM36.063 43.33v0zM14.637 11.355l0.085 30.891 20.011-0.23v-30.631z"/> <path d="M23.886 37.372h-1.219l1.205-7.394h-3.777c-0.337-0.002-0.609-0.276-0.609-0.613 0-0.001 0-0.003 0-0.004v0c0.021-0.149 0.068-0.284 0.136-0.405l-0.003 0.006 6.706-11.334h1.238l-1.235 7.406h3.81c0.001 0 0.002 0 0.003 0 0.334 0 0.605 0.271 0.605 0.605 0 0.142-0.049 0.272-0.13 0.375l0.001-0.001z"/> <path d="M42.798 24.706c0 0 0 0 0 0-0.732 0-1.326-0.591-1.33-1.322v-0l-0.083-13.352c0-0.002 0-0.005 0-0.008 0-0.735 0.596-1.33 1.33-1.33 0 0 0 0 0 0l19.955 0.013c0.735 0 1.33 0.596 1.33 1.33v0 13.235c0 0 0 0 0 0 0 0.732-0.592 1.327-1.323 1.33h-0l-19.872 0.104zM62.67 23.272v0zM44.053 11.354l0.067 10.692 17.22-0.097v-10.581z"/> <path d="M42.798 40.67c0 0 0 0-0 0-0.731 0-1.324-0.59-1.33-1.319v-0.001l-0.083-10.692c0-0.003-0-0.007-0-0.011 0-0.735 0.596-1.33 1.33-1.33 0 0 0 0 0 0l19.955 0.011c0.735 0 1.33 0.596 1.33 1.33v0 10.599c0 0.735-0.596 1.33-1.33 1.33v0l-19.867 0.083zM62.67 39.257v0zM44.056 29.978l0.061 8.031 17.222-0.077v-7.943z"/> <path d="M24.039 63.285c0 0 0 0-0 0-0.731 0-1.325-0.59-1.33-1.321v-0.001l-0.093-13.352c0-0.003-0-0.006-0-0.009 0-0.735 0.596-1.33 1.33-1.33 0 0 0 0 0 0l22.76 0.013c0.735 0 1.33 0.596 1.33 1.33v0 13.235c0 0.735-0.596 1.33-1.33 1.33v0l-22.661 0.104zM46.706 61.851v0zM25.288 49.933l0.073 10.692 20.015-0.098v-10.58z"/> <path d="M50.431 15.527c0 1.029-0.834 1.862-1.862 1.862s-1.862-0.834-1.862-1.862c0-1.029 0.834-1.862 1.862-1.862v0c0.013-0 0.029-0.001 0.044-0.001 1.004 0 1.819 0.814 1.819 1.819 0 0.016-0 0.031-0.001 0.047l0-0.002z"/> <path d="M40.054 56.633h-9.312c-0.735 0-1.33-0.596-1.33-1.33s0.596-1.33 1.33-1.33v0h9.312c0.735 0 1.33 0.596 1.33 1.33s-0.596 1.33-1.33 1.33v0z"/> </symbol><symbol id="code-architecture" viewBox="0 0 64 64"> <path d="M53.333 12h-52c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h52c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333z"/> <path d="M62.667 54.667h-52c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h52c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333z"/> <path d="M10.667 54.667c-0.8 0-1.333-0.533-1.333-1.333v-52c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v52c0 0.8-0.533 1.333-1.333 1.333z"/> <path d="M53.333 64c-0.8 0-1.333-0.533-1.333-1.333v-52c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v52c0 0.8-0.533 1.333-1.333 1.333z"/> <path d="M25.333 40.267c-0.4 0-0.667-0.133-0.933-0.4l-6.667-6.667c-0.533-0.533-0.533-1.333 0-1.867l6.667-6.667c0.533-0.533 1.333-0.533 1.867 0s0.533 1.333 0 1.867l-5.733 5.733 5.733 5.733c0.533 0.533 0.533 1.333 0 1.867-0.267 0.267-0.533 0.4-0.933 0.4z"/> <path d="M38.667 40.267c-0.8 0-1.333-0.533-1.333-1.333 0-0.4 0.133-0.667 0.4-0.933l5.733-5.733-5.733-5.733c-0.533-0.533-0.533-1.333 0-1.867s1.333-0.533 1.867 0l6.667 6.667c0.533 0.533 0.533 1.333 0 1.867l-6.667 6.667c-0.267 0.267-0.533 0.4-0.933 0.4z"/> <path d="M29.333 43.6c-0.133 0-0.133 0-0.267 0-0.667-0.133-1.2-0.8-1.067-1.6 0 0 0 0 0 0l4-20c0.133-0.667 0.8-1.2 1.467-1.067s1.2 0.8 1.067 1.467c0 0 0 0 0 0.133l-4 20c0 0.533-0.533 1.067-1.2 1.067z"/> </symbol><symbol id="exclamation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248 249"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="123" cy="123.2" r="123" stroke="#EAEAEA" stroke-width="2"/><text fill="#EAEAEA" font-family="Poppins-Bold, Poppins" font-size="200" font-weight="bold"><tspan x="81" y="204.2">!</tspan></text></g></symbol><symbol id="quote" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 82"><defs><linearGradient id="a" x1="84.125%" x2="15.643%" y1="-17.883%" y2="100%"><stop offset="0%" stop-color="#00DCC0"/><stop offset="100%" stop-color="#005AF0"/></linearGradient></defs><path fill="url(#a) #005AF0" fill-rule="evenodd" d="M106.5 45.7c0-13.6 3.6-24.55 10.8-32.85C124.5 4.55 135 .4 148.8.4v18.9c-10.6 0-15.9 6.8-15.9 20.4v4.5h19.2v37.2h-39.3c-4.2-12-6.3-23.9-6.3-35.7zm57 0c0-13.6 3.55-24.55 10.65-32.85C181.25 4.55 191.7.4 205.5.4v18.9c-10.4 0-15.6 6.8-15.6 20.4v4.5h18.9v37.2h-39.3c-4-12.2-6-24.1-6-35.7z" transform="translate(-106)"/></symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="bolt-solid" viewBox="0 0 64 64"> <path d="M36.178 0h4.158l-4.111 23.982 12.907-0.020c1.144 0 2.074 0.896 2.074 1.999 0 0.475-0.459 1.278-0.459 1.278l-22.868 36.761-4.227-0.017 4.213-24.019-12.995 0.017c-1.148 0-2.074-0.895-2.074-1.999 0-0.449 0.181-0.843 0.44-1.177l22.945-36.805z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/ja/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> AMP について <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/ja/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">AMP ウェブサイト</div> <div class="ap-o-header-flyout-item-description">完璧なウェブ体験をもたらします</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/ja/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">誰もが気軽に楽しめるストーリー</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/ja/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">AMP 広告</div> <div class="ap-o-header-flyout-item-description">超高速なウェブ広告</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/ja/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">AMP メール</div> <div class="ap-o-header-flyout-item-description">次世代型メール</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/about/how-amp-works/">AMP の仕組み</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/about/mission-and-vision/">ビジョンとミッション</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/about/use-cases/">使用事例</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/success-stories/">成功事例</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> ドキュメント <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/documentation/">スタートガイド</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">ガイドとチュートリアル</div> <div class="ap-o-header-flyout-item-description">AMP を使い始める</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">コンポーネント</div> <div class="ap-o-header-flyout-item-description">AMP ライブラリ一式</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">実例</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">コース</div> <div class="ap-o-header-flyout-item-description">無料の AMP 学習コース</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">テンプレート</div> <div class="ap-o-header-flyout-item-description">すぐに使えます</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">ツール</div> <div class="ap-o-header-flyout-item-description">構築を始めましょう</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> コミュニティ <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/documentation/guides-and-tutorials/contribute/">貢献</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/community/roadmap/">ロードマップ</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/community/governance/">ガバナンス</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/community/working-groups/access-subscriptions/">ワーキンググループ</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> イベント <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/events/amp-roadshow/">AMP ロードショー</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">ブログ</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> サポート <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/support/">ヘルプ</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/support/faq/">よくある質問</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="言語を選択してください" tabindex="-1"> <span class="-tw">JA</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/about/stories/" role="listitem">English</a> <a class="-tw" href="/de/about/stories/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/about/stories/" role="listitem">Français</a> <a class="-tw" href="/ar/about/stories/" role="listitem">العربية</a> <a class="-tw" href="/es/about/stories/" role="listitem">Español</a> <a class="-tw" href="/it/about/stories/" role="listitem">Italiano</a> <a class="-tw" href="/id/about/stories/" role="listitem">Indonesia</a> <a class="-tw" href="/ko/about/stories/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/about/stories/" role="listitem">Português</a> <a class="-tw" href="/ru/about/stories/" role="listitem">Русский</a> <a class="-tw" href="/tr/about/stories/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/about/stories/" role="listitem">中文</a> <a class="-tw" href="/pl/about/stories/" role="listitem">Polski</a> <a class="-tw" href="/vi/about/stories/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="ハンバーガーメニュー" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> AMP について </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/websites/"> AMP ウェブサイト </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/ads/"> AMP 広告 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/email/"> AMP メール </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/how-amp-works/"> AMP の仕組み </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/mission-and-vision/"> ビジョンとミッション </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/use-cases/"> 使用事例 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/success-stories/"> 成功事例 </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> ドキュメント </label> <input class="-td" type="checkbox" aria-label="Documentation"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/"> スタートガイド </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/guides-and-tutorials/"> ガイドとチュートリアル </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/components/"> コンポーネント </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/examples/"> 実例 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/courses/"> コース </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/templates/"> テンプレート </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/tools/"> ツール </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> コミュニティ </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/guides-and-tutorials/contribute/"> 貢献 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/community/roadmap/"> ロードマップ </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/community/governance/"> ガバナンス </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/community/working-groups/access-subscriptions/"> ワーキンググループ </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> イベント </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/events/amp-roadshow/"> AMP ロードショー </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">ブログ</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/ja/support/"> ヘルプ </a> </li> </ul> </nav> <main class="ap--main -of"> <section class="-is -tc"> <div class="-i_"> <div class="-tc"> <div class="-ij"> <div class="-iq ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bolt-solid"/></svg> </div> <h2 class="-se">Web Stories</h2> <h1 class="-iz">AMPを使用してウェブ上で視覚的なストーリーを作成しましょう。</h1> <a href="/ja/documentation/guides-and-tutorials/start/visual_story/?format=stories" class="-st ap-a-btn">開発を始める</a> <a href="#tools" class="-st ap-a-btn">ストーリーを伝える</a> </div> </div> </div> <div class="-io -ie"> <div class="-iu -it"> <amp-img src="/static/img/amp-stories-base.png" layout="responsive" width="176" height="246" i-amphtml-ssr data-hero class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:139.7727%"></i-amphtml-sizer><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="/static/img/amp-stories-base.png"></amp-img> </div> <div class="-iu -rq" title="<amp-story-grid-layer>"> <amp-img src="/static/img/amp-stories-monde.jpg" layout="responsive" width="192" height="192" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer></amp-img> </div> <div class="-ir"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-story-grid-layer</span> <span class="na">template</span><span class="o">=</span><span class="s">"vertical"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"moons.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"266"</span> <span class="na">height</span><span class="o">=</span><span class="s">"340"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-story-grid-layer</span><span class="p">></span> </code></pre></div> </div> </div></section> <section class="-t"> <div class="-tc"> <div class="ap-m-copy ap-m-copy-left-small" amp-fx="fade-in fly-in-left" data-margin-start="5%" data-duration="1s" data-fly-in-distance="5%"> <h1>Web<br> Stories</h1> <h5>オープンウェブ向けの視覚的なストーリーテリング</h5> <p>Web Storiesは、読み込みの速い全画面表示で読者を没頭させます。魅力的なアニメーションとタップ操作を備えた視覚的な物語を簡単に作成できます。AMP ストーリーの形式は自由であり、オープンウェブの一部であり、誰でもウェブサイトで試すことができます。閉じたエコシステムやプラットフォームに限定されることなく、ウェブ全体で共有したり埋め込んだりできます。</p> <p>Web Storiesは、ニュースや情報を視覚的にリッチでタップ操作で読み進められるストーリーとして配信できるモバイル向けフォーマットをコンテンツ発行者に提供します。AMP ストーリーは、広告主とサイト運営者が没入感のあるウェブでユニークなオーディエンスにリーチできるような強力かつ豊富な広告の機会を提供します。</p> </div> <div class="-ol"> <div class="-os"> <a href="/ja/documentation/guides-and-tutorials/start/visual_story/" class="-n -s"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">初めてのストーリーを構築しましょう</span> </a> </div> <div class="-os"> <a href="#monetization" class="-n -s"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">ストーリー広告の詳細</span> </a> </div> </div> </div> </section> <section class="-sn -tf"> <div class="-sr"> <div class="-si"> <div class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#quote"/></svg> </div> <div class="ap-a-img ap-a-img-static"> <amp-img src="/static/img/logo-dummy-washingtonpost.png" layout="responsive" height="96" width="630" alt="placeholder" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:15.2381%"></i-amphtml-sizer> </amp-img></div> </div> <div class="-ss"> <blockquote> <p class="ap-a-txt">Web Storiesを最新ニュースや情報のソースとして使用すると、複数の要素をまとめたい場合に質の高い記事を届けることができます。レポート、写真、動画、モーショングラフィックスを組み合わせることで、読者は私たちの記事を検索する際により視覚的な情報から入り込むことができます。</p><p> </p></blockquote> <p>Greg Manifold、The Washington Postデザインディレクター</p> <a href="/ja/success-stories/washingtonpost/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">成功事例を読む</span> </a> </div> </div> </section> <section class="ap--benefits-overview"> <div class="ap-o-benefits-overview -tf"> <div class="-sy"> <div class="ap-m-headline-icon"> <div class="ap-m-headline-icon-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#exclamation"/></svg> </div> <h1 class="ap-m-headline-icon-hl">Web Storiesのメリット</h1> </div> </div> <div class="-sb -sw"> <div class="-sa"> <div class="-sf"> <svg class="-sf"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#code-architecture"/></svg> </div> <div class="-sl"> <span class="-sc">美しく魅力的なコンテンツを簡単に作成</span> <span class="-sh"> Web Storiesは、技術的な観点からストーリーをできるだけ簡単に作成できるようにしています。 </span> </div> </div> <div class="-sa"> <div class="-sf"> <svg class="-sf"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components"/></svg> </div> <div class="-sl"> <span class="-sc">柔軟な想像力で自由に編集してブランディングを実現できます</span> <span class="-sh"> Web Storiesのフォーマットには、柔軟性の高い既製のレイアウトテンプレート、標準UIコントロール、および後続のコンテンツを共有・追加するためのコンポーネントが付属しています。 </span> </div> </div> <div class="-sa"> <div class="-sf"> <svg class="-sf"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#share"/></svg> </div> <div class="-sl"> <span class="-sc">オープンウェブ上で共有・リンク可能</span> <span class="-sh"> Web Storiesはオープンウェブの一部であり、単一のエコシステムに限定されることなくサイトやアプリ間で共有したり、埋め込んだりできます。 </span> </div> </div> </div> <div class="-sb -sx"> <div class="-sa"> <div class="-sf"> <svg class="-sf"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#storytelling"/></svg> </div> <div class="-sl"> <span class="-sc">追跡と測定</span> <span class="-sh"> バイラル共有や収益化のための分析機能とブックエンド機能をサポートします。 </span> </div> </div> <div class="-sa"> <div class="-sf"> <svg class="-sf"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speedometer"/></svg> </div> <div class="-sl"> <span class="-sc">高速な読み込み時間</span> <span class="-sh"> Web Storiesはオーディエンスを引き付けて楽しませるため、高速に表示されます。 </span> </div> </div> <div class="-sa"> <div class="-sf"> <svg class="-sf"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pie-chart-money"/></svg> </div> <div class="-sl"> <span class="-sc">没入型ストーリーテリング</span> <span class="-sh"> AMPストーリーは、新しい最新の方法で既存の読者にリーチします。 </span> </div> </div> <div class="-sa"> <div class="-sf"> <svg class="-sf"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#circle-arrows-money"/></svg> </div> <div class="-sl"> <span class="-sc">強力な広告サポート</span> <span class="-sh"> Web Storiesは、サイト運営者が全画面表示の没入型ストーリー広告とアフィリエイトリンクを使用して収益化能力を発揮できるようにします。広告主の場合、ストーリーは新しいストーリーテリング体験の中でユニークなオーディエンスにリーチするための手段になります。 </span> </div> </div> </div> <div class="-s_"> <a href="/ja/about/how-amp-works/" class="-n -s"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">AMP の仕組みについて読む</span> </a> </div> </div> </section> <section class="-t"> <div class="-tc"> <div class="ap-m-copy ap-m-copy-left-small" amp-fx="fade-in fly-in-left" data-margin-start="5%" data-duration="1s" data-fly-in-distance="5%"> <h2>画像、動画、GIF</h2> <p>Web Storiesは視覚的にリッチなメディアを使用して構築されており、写真、動画、GIF のどのアセットを利用するかはあなた次第です。画像と動画が視覚的に読者の画面いっぱいに広がり、スムーズで魅力あふれる体験をもたらします。AMP ではファイルタイプを指定することで、ユーザーのネットワーク接続とブラウザの機能を考慮することができます。</p> </div> <div class="ap-m-copy ap-m-copy-right-small" amp-fx="fade-in fly-in-left" data-margin-start="5%" data-duration="1s" data-fly-in-distance="5%"> <h2>テキストと音声</h2> <p>モバイルデバイスに最適化するため、非常に小さな1つか2つの文のかたまりを使って事実と数字を伝えることができます。さまざまなフォント色を選び、基本的な可読性を向上させることができます。または、微妙に黒く透明なグラデーションオーバーレイなどの視覚要素を追加し、不規則な背景画像（ユーザー生成コンテンツなど）でも可読性を向上させることができます。さらに、全ページで短い音声ファイルを使用することで、音声情報やバックグラウンドミュージックを提供することもできます。</p> </div> <div class="ap-m-copy ap-m-copy-left-small" amp-fx="fade-in fly-in-left" data-margin-start="5%" data-duration="1s" data-fly-in-distance="5%"> <h2>アニメーションとインタラクション</h2> <p>簡単に視覚効果とタップ操作を実現し、読者を引き付けることができます。タイトルをページにドロップしたり、フェードインしたり、アニメーション化したりできます。動画スニペットが終了したら次のページに自動的に遷移するようにストーリーを構成することができます。ストーリーの最後にソーシャルメディアへの共有リンクと関連リンクを提供し、ユーザーがそれらを共有したり、あなたのサイト上の他のコンテンツをさらに閲覧できるようにすることができます。</p> </div> </div> </section> <section class="ap--story-carousel -tc"> <div class="ap-m-copy ap-m-copy-center"> <h2 id="check-out-amp-stories-on-the-web">ウェブ上の Web Stories をご覧ください</h2> </div> <div class="ap-o-story-carousel"> <amp-carousel layout="fixed-height" height="555" type="carousel" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:555px;" i-amphtml-layout="fixed-height" id="i-amp-0"> <a class="ap-o-story-carousel-slide" href="https://edition-cnn-com.cdn.ampproject.org/c/s/edition.cnn.com/ampstories/world/protecting-the-antarctic-a-journey-to-a-continent-in-distress" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-cnn.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-cnn.png" width="395" height="45" alt="CNN" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-usatoday-com.cdn.ampproject.org/c/s/www.usatoday.com/amp-stories/beyonce-rule-the-world/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-usatoday.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-usatoday.png" width="395" height="45" alt="USA Today" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://projects-sfchronicle-com.cdn.ampproject.org/c/s/projects.sfchronicle.com/2019/visuals/camp-fire-ballet/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-sfchronicle.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-sfchronicle.png" width="395" height="45" alt="SF Chronicle" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-wired-com.cdn.ampproject.org/c/s/www.wired.com/amp-stories/space-photos-of-the-week-111817/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-wired.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-wired.png" width="395" height="45" alt="Wired" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://expansion.mx/ampstories/2018/12/12/nueve-hoteles-para-dormir-antes-de-morir" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-expansion.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-expansion.png" width="395" height="45" alt="Expansion" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-bbc-co-uk.cdn.ampproject.org/c/s/www.bbc.co.uk/news/ampstories/moonmess/index.html" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-bbc.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-bbc.png" width="395" height="45" alt="BBC" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-washingtonpost-com.cdn.ampproject.org/c/s/www.washingtonpost.com/graphics/2019/national/amp-stories/2019-state-of-the-union-reactions/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-wpost.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-wpost.png" width="395" height="45" alt="The Washington Post" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-pcgamesn-com.cdn.ampproject.org/c/s/www.pcgamesn.com/amp-stories/best-battle-royale-games.html" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-pcgamesn.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-pcgamesn.png" width="395" height="45" alt="PCGamesN" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-theatlantic-com.cdn.ampproject.org/c/s/www.theatlantic.com/assets/media/interactives/2019/01/02/the-amazon-gold-rush-atlantic-amp-story/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-theatlantic.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-theatlantic.png" width="395" height="45" alt="The Atlantic" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> </amp-carousel> <amp-carousel layout="fixed-height" height="370" type="carousel" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:370px;" i-amphtml-layout="fixed-height" id="i-amp-1"> <a class="ap-o-story-carousel-slide" href="https://edition-cnn-com.cdn.ampproject.org/c/s/edition.cnn.com/ampstories/world/protecting-the-antarctic-a-journey-to-a-continent-in-distress" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-cnn.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-cnn.png" width="395" height="45" alt="CNN" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-usatoday-com.cdn.ampproject.org/c/s/www.usatoday.com/amp-stories/beyonce-rule-the-world/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-usatoday.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-usatoday.png" width="395" height="45" alt="USA Today" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://projects-sfchronicle-com.cdn.ampproject.org/c/s/projects.sfchronicle.com/2019/visuals/camp-fire-ballet/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-sfchronicle.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-sfchronicle.png" width="395" height="45" alt="SF Chronicle" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-wired-com.cdn.ampproject.org/c/s/www.wired.com/amp-stories/space-photos-of-the-week-111817/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-wired.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-wired.png" width="395" height="45" alt="Wired" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://expansion.mx/ampstories/2018/12/12/nueve-hoteles-para-dormir-antes-de-morir" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-expansion.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-expansion.png" width="395" height="45" alt="Expansion" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-bbc-co-uk.cdn.ampproject.org/c/s/www.bbc.co.uk/news/ampstories/moonmess/index.html" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-bbc.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-bbc.png" width="395" height="45" alt="BBC" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-washingtonpost-com.cdn.ampproject.org/c/s/www.washingtonpost.com/graphics/2019/national/amp-stories/2019-state-of-the-union-reactions/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-wpost.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-wpost.png" width="395" height="45" alt="The Washington Post" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-pcgamesn-com.cdn.ampproject.org/c/s/www.pcgamesn.com/amp-stories/best-battle-royale-games.html" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-pcgamesn.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-pcgamesn.png" width="395" height="45" alt="PCGamesN" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> <a class="ap-o-story-carousel-slide" href="https://www-theatlantic-com.cdn.ampproject.org/c/s/www.theatlantic.com/assets/media/interactives/2019/01/02/the-amazon-gold-rush-atlantic-amp-story/" target="_blank"> <div class="ap-o-story-carousel-slide-image"> <amp-img src="/static/img/stories/story-theatlantic.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> <div class="ap-o-story-carousel-slide-logo"> <amp-img layout="responsive" src="/static/img/stories/logo-theatlantic.png" width="395" height="45" alt="The Atlantic" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:11.3924%"></i-amphtml-sizer> </amp-img> </div> </a> </amp-carousel> </div> </section> <section class="-t ap--stories-monetize -tc" id="monetization"> <div class="ap-m-copy ap-m-copy-left-small"> <h1>Web Storiesの <br>収益化オプション</h1> <h4>単一ページのストーリー広告</h4> <p>ストーリー広告は、Web Stories 内に表示される全画面の単一ページ広告です。広告主やサイト運営者は、1回タップするだけでユーザーをウェブページ、AMP ページ、またはアプリに招待できます。ストーリー広告には、画像、動画、アニメーションを使ったり、これらすべての要素の組み合わせたりできるリッチで柔軟なキャンバスが備わっています。<br> ストーリー広告は、Google アドマネージャーと Google ディスプレイ＆ビデオ 360 (ベータ版) でサポートされています。その他の広告サーバーも近日中にサポートされる予定です！</p> </div> </section> <section class="-t ap--monetize-carousel -tc"> <div class="ap-o-story-carousel monetize"> <amp-carousel layout="fixed-height" height="555" type="carousel" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:555px;" i-amphtml-layout="fixed-height" id="i-amp-2"> <div class="ap-o-story-carousel-slide"> <div class="ap-o-story-carousel-slide-image no-logo"> <div class="ap-o-story-carousel-slide-image-wrapper"> <amp-video layout="responsive" height="16" width="9" poster="/static/img/templates/single_video.jpg" src="/static/img/templates/single_video.mp4" autoplay muted loop class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:177.7778%"></i-amphtml-sizer> </amp-video> </div> </div> </div> <div class="ap-o-story-carousel-slide"> <div class="ap-o-story-carousel-slide-image no-logo"> <div class="ap-o-story-carousel-slide-image-wrapper"> <amp-video layout="responsive" height="16" width="9" poster="/static/img/templates/single-image-template.jpg" src="/static/img/templates/single-image-template.mp4" autoplay muted loop class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:177.7778%"></i-amphtml-sizer> </amp-video> </div> </div> </div> <div class="ap-o-story-carousel-slide"> <div class="ap-o-story-carousel-slide-image no-logo"> <amp-img src="/static/img/templates/multiple-image-template.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> </div> <div class="ap-o-story-carousel-slide"> <div class="ap-o-story-carousel-slide-image no-logo"> <amp-img src="/static/img/templates/app_install.jpg" width="282" height="470" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:282px;height:470px;" i-amphtml-layout="fixed"> </amp-img> </div> </div> </amp-carousel> <amp-carousel layout="fixed-height" height="370" type="carousel" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:370px;" i-amphtml-layout="fixed-height" id="i-amp-3"> <div class="ap-o-story-carousel-slide"> <div class="ap-o-story-carousel-slide-image no-logo"> <div class="ap-o-story-carousel-slide-image-wrapper"> <amp-video layout="responsive" height="16" width="9" src="/static/img/templates/single_video.mp4" poster="/static/img/templates/single_video.jpg" autoplay muted loop class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:177.7778%"></i-amphtml-sizer> </amp-video> </div> </div> </div> <div class="ap-o-story-carousel-slide"> <div class="ap-o-story-carousel-slide-image no-logo"> <div class="ap-o-story-carousel-slide-image-wrapper"> <amp-video layout="responsive" height="16" width="9" src="/static/img/templates/single-image-template.mp4" poster="/static/img/templates/single-image-template.jpg" autoplay muted loop class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:177.7778%"></i-amphtml-sizer> </amp-video> </div> </div> </div> <div class="ap-o-story-carousel-slide"> <div class="ap-o-story-carousel-slide-image no-logo"> <amp-img src="/static/img/templates/multiple-image-template.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> </div> <div class="ap-o-story-carousel-slide"> <div class="ap-o-story-carousel-slide-image no-logo"> <amp-img src="/static/img/templates/app_install.jpg" width="171" height="285" alt class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:171px;height:285px;" i-amphtml-layout="fixed"> </amp-img> </div> </div> </amp-carousel> </div> <div class="ap-m-copy ap-m-copy-right-centered"> <h4>ストーリー広告テンプレートで始めましょう</h4> <div class="-os"> <a href="/ja/documentation/templates/" class="-n -s"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">すべてのテンプレートを確認する</span> </a> </div> </div> <div class="ap-m-copy ap-m-copy-left-small"> <h4>アフィリエイトリンク</h4> <p>サイト運営者はオーガニックなストーリーページに外部リンクを配置することで、アフィリエイトリンクを収益化の一形態として使用できます。</p> <a href="/ja/documentation/guides-and-tutorials/develop/story_ads_best_practices/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">ベストプラクティスガイドを読む</span> </a> </div> </section> <section class="ap--tools"> <section class="-t"> <div class="-tc"> <div class="ap-m-copy ap-m-copy-left-small"> <h1 id="tools">ストーリーの作成を始める</h1> <h5>コーディングなしでストーリーを作成し始めるには、複数のエディタのうちいずれかを選択してください。</h5> <p>Looking to get your Story creation resource listed? <a href="https://github.com/ampproject/amp.dev/issues/new?assignees=&labels=&template=story_creation_tool.md&title=">Create a request here!</a></p> </div> </div> </section> <section class="ap--tools-widget -ra"> <div class="-rf"> <div class="-rl"> <div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://cleverpush.com/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/cleverpush.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">CleverPush </h4> <p>Easily create, publish and analyze professional Web Stories with CleverPush.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://www.gliastory.com/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/gliastory.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Glia Story </h4> <p>GliaStory uses AI to generate Web Stories from news, e-commerce and even podcast content in minutes!</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://www.join-stories.com/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/joinstories.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Join Stories </h4> <p>Long Story short, Join Stories is the fastest and easiest Story creation tool.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://makestories.io/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/makestories.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">MakeStories </h4> <p>ドラッグアンドドロップに対応した WYSIWYG エディタにはテンプレート、イラスト、アイコンが付属しており、独自の画像や動画をアップロードする機能が備わっています。</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://www.nws.ai/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/newsroom.png" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Newsroom AI </h4> <p>Newsroom Studio は、瞬時にコンテンツが表示される魅力的なモバイル体験の創出を支援します。</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://pendular.io/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/pend-c3a1c71e-8f09-4e5b-829f-96ddd6a67d7f.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Pendular.io </h4> <p>Allows publishers to automate the creation of high-quality stories focused on sports content.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-templated editor ap--stories"> <a href="https://productstories.pro/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/productstories.png" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Product Stories </h4> <p>eCommerce tool for the automatic generation of Web Stories from product information.</p> </div> <div class="-or ap-m-teaser-type-templated editor">Templated Editor</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://www.snackeet.com/?utm_source=google_listing"> <div class="-rn"> <div class="ap-a-img -ro contain"> <amp-img class="ap--media contain i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/snackeet.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru"><div class="-ri ap-a-ico"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-transparent"/></svg></div>Snackeet </h4> <p>Snackeet is the only tool you will ever need to build outstanding Webstories and interactive digital experiences.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://storifyme.com/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/storifyme.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">StorifyMe </h4> <p>StorifyMe stands out as all-in-one Web Stories platform. Made for brands & individuals, tailored for e-commerce, marketers and publishers.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://tappable.co"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/tappable.svg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Tappable </h4> <p>The collaborative Web Stories builder. Design immersive Stories, publish on a blazing fast CDN and measure engagement with zero-config analytics.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-content platform ap--stories"> <a href="https://unfold.com/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/unfold-d5403963b64e.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Unfold </h4> <p>Unfold helps brands and individuals easily create beautiful stories with templates.</p> </div> <div class="-or ap-m-teaser-type-content platform">コンテンツプラットフォーム</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://viqeo.tv/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/viqeostudio.png" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Viqeo Studio </h4> <p>Viqeo is the all-in-one video platform for creating Videos, Web Stories, Lessons and Onboardings.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://visualstories.com"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/visualstories.png" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Visual Stories </h4> <p>Multi-site, multi-author blogging tools and WYSIWYG editor to create Web Stories on your own domain.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://wp.stories.google/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/webstoriesforwordpress.png" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Web Stories for WordPress </h4> <p>Web Stories for WordPress provides story creation capabilities in a user-friendly, WYSIWYG tool.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://webstoryz.com/?utm_source=google_listing"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/webstoryz.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Webstoryz </h4> <p>Increase engagement on your website using Webstoryz widget!</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://zazuapp.co/"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/Zazu-c580-d8e1.jpeg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Zazu </h4> <p>Design award-winning Web Story builder. Rely on the most intuitive editor to build Stories with your team or automate the entire process.</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div><div hidden class="-rt -re ap-m-teaser-card-wysiwyg editor ap--stories"> <a href="https://www.zmooz.com"> <div class="-rn"> <div class="ap-a-img -ro"> <amp-img class="ap--media i-amphtml-layout-responsive i-amphtml-layout-size-defined" src="/static/img/tools/zmooz-9e90a49586e8.jpg" layout="responsive" width="2" height="1" alt i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:50%"></i-amphtml-sizer></amp-img> </div> <div> <div class="-rs"> <h4 class="-ru">Zmooz </h4> <p>Turn automatically articles into templated web stories. WYSIVYG Studio and Apps to edit and share</p> </div> <div class="-or ap-m-teaser-type-wysiwyg editor">WYSIWYG エディタ</div> </div> </div> </a> </div> </div> </div> </section> <section class="-t"> <div class="-tc"> <div class="-os"> <a href="/ja/documentation/tools/" class="-n -s"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">すべてのツールを確認する</span> </a> </div> </div> </section> </section> </main> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">もちろん、このサイトはAMPで作成されています！</div> <div class="-l"> <h5 class="-c">最新情報をチェック</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">概要</h5> <ul class="-y"> <li class="-b"><a href="/ja/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP フレームワーク</a></li> <li class="-b"><a href="/ja/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>使用事例</a></li> <li class="-b"><a href="/ja/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>成功事例</a></li> <li class="-b"><a href="/ja/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>機能</a></li> </ul> </div> <div class="-m"> <h5 class="-g">ドキュメント</h5> <ul class="-y"> <li class="-b"><a href="/ja/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>スタートガイド</a></li> <li class="-b"><a href="/ja/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>ガイドとチュートリアル</a></li> <li class="-b"><a href="/ja/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>コンポーネント</a></li> <li class="-b"><a href="/ja/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>実例</a></li> <li class="-b"><a href="/ja/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>デザインテンプレート</a></li> <li class="-b"><a href="/ja/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>ツール</a></li> </ul> </div> <div class="-m"> <h5 class="-g">コミュニティ</h5> <ul class="-y"> <li class="-b"><a href="/ja/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>プラットフォームとベンダーパートナー</a></li> <li class="-b"><a href="/ja/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>貢献</a></li> <li class="-b"><a href="/ja/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>ロードマップ</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">イベント</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/ja/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">AMP のブランド素材</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>スタイルガイド</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>ロゴ</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">プライバシーポリシー</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"other","event_label":"banner","event_name":"banner"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"other","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"other","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"other","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="同意を却下する"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Cookie の仕様を受け入れる">了解！</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes bounce{0%{transform:translate(-1.5%,-3%)}50%{transform:translate(1.5%,3%)}to{transform:translate(-1.5%,-3%)}}@keyframes levitate{0%{transform:translate3d(0,-2.3%,0)}50%{transform:translate3d(0,2.3%,0)}to{transform:translate3d(0,-2.3%,0)}}</style></body></html>